/* Layout: the sky canvas fills the screen; hover zones in the corners and along the bottom hold every control and stay invisible until you reach for them (on touch screens: until you tap there).
   Written to work on Chrome 61 (the Xiaohongshu mini-tool baseline): colours are rgba(var(--x), a) with comma-separated
   variables, no `inset` / flex `gap` / `max()`, and safe-area padding is an @supports enhancement over fixed values. */
:root {
  --ink-rgb: 239, 227, 204;   /* follows the particle colour, updated from JS */
  --bg-rgb: 13, 17, 29;       /* follows the top of the sky, updated from JS */
  --accent-rgb: 214, 140, 170; /* mood hue, updated from JS */
  --sea-rgb: 20, 24, 40;      /* bottom of the sea, updated from JS */
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
/* whatever peeks out past the canvas (iOS toolbar area, overscroll) matches the sky above and the sea below */
html { background: rgb(var(--sea-rgb)); }
body { background: linear-gradient(rgb(var(--bg-rgb)), rgb(var(--sea-rgb))) fixed; color: rgb(var(--ink-rgb)); font-family: system-ui, -apple-system, sans-serif; -webkit-tap-highlight-color: transparent; }

/* 100lvh: on phones the sea keeps going underneath the browser's bottom toolbar instead of stopping above it */
#sky, #sea { position: fixed; top: 0; left: 0; width: 100%; height: 100%; height: 100lvh; display: block; pointer-events: none; }
/* a light film grain over everything; it hops to a new spot about 7 times a second. Opacity is set from visual.js */
#grain {
  position: fixed; top: -180px; right: -180px; bottom: -180px; left: -180px; pointer-events: none; z-index: 1; opacity: .05;
  mix-blend-mode: overlay; background-repeat: repeat; background-size: 180px 180px;
  animation: grain .84s steps(1) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-61px, 37px); } 33% { transform: translate(43px, -88px); }
  50% { transform: translate(-112px, -24px); } 67% { transform: translate(88px, 71px); } 83% { transform: translate(-29px, 126px); }
}
#stage { position: fixed; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }

#glyph {
  position: fixed; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  pointer-events: none; color: rgb(var(--ink-rgb)); opacity: .5; transition: opacity .9s var(--ease), transform .9s var(--ease);
}
#glyph svg { width: 100%; height: 100%; }
body.is-playing #glyph { opacity: 0; transform: scale(.85); }
@media (hover: hover) { body.is-playing #stage:hover + #glyph { opacity: .18; transform: scale(1); } } /* touch screens keep :hover after a tap */

/* ---------- hover zones ---------- */
.zone { position: fixed; display: flex; z-index: 2; }
.zone-left { top: 0; left: 0; align-items: flex-start; padding: 18px 80px 60px 18px; }
.zone-corner { top: 0; right: 0; flex-direction: column; align-items: flex-end; padding: 18px 18px 60px 80px; }
.zone-bl { left: 0; bottom: 0; z-index: 3; align-items: center; padding: 60px 60px 22px 18px; }
.zone-br { right: 0; bottom: 0; z-index: 3; align-items: center; padding: 60px 18px 22px 60px; }
.zone-bottom { left: 0; right: 0; bottom: 0; justify-content: center; padding: 60px 16px 22px 16px; }

/* safe areas (notches, home indicator): the PC simulator injects --safe-area-inset-*, phones report env() */
@supports (padding-top: env(safe-area-inset-top)) {
  .zone-left, .zone-corner { padding-top: calc(18px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); }
  .zone-bl, .zone-br, .zone-bottom { padding-bottom: calc(22px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
  .zone-left, .zone-bl { padding-left: calc(18px + var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); }
  .zone-corner, .zone-br { padding-right: calc(18px + var(--safe-area-inset-right, env(safe-area-inset-right, 0px))); }
}
/* inside the mini-tool container: start the top corners below its own back / me / share buttons (measured in JS) */
body.has-chrome .zone-left, body.has-chrome .zone-corner { padding-top: 18px; padding-top: calc(var(--chrome-top, 0px) + 10px); }

.panel {
  display: flex; align-items: center; padding: 6px;
  border-radius: 26px; border: 1px solid rgba(var(--ink-rgb), .1);
  background: rgba(var(--bg-rgb), .3);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.panel > * + * { margin-left: 2px; }
.zone-corner .panel, .zone-left .panel { transform: translateY(-6px); }
.zone.show .panel { opacity: 1; transform: none; }
/* only real pointers reveal on hover / focus: on touch screens both stay "stuck" after a tap and the panel would never hide */
@media (hover: hover) {
  .zone:hover .panel, .zone:focus-within .panel { opacity: 1; transform: none; }
  .zone:hover .tag { opacity: .8; }
  .zone-br:hover .pomo-time { opacity: .9; }
}

/* station name + what the window looks like right now: a faint watermark, readable on hover */
.tag { text-align: right; pointer-events: none; -webkit-user-select: none; user-select: none; opacity: .16; transition: opacity 1.2s var(--ease); padding-right: 4px; }
.zone.show .tag { opacity: .8; }
.tag-name { font: 500 11px/1 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif; letter-spacing: .38em; text-transform: uppercase; margin-right: -.38em; color: rgb(var(--ink-rgb)); }
.tag-now {
  margin-top: 6px; font: italic 300 24px/1.05 'Cormorant Garamond', "Iowan Old Style", Palatino, Georgia, serif; letter-spacing: .01em;
  color: rgb(var(--accent-rgb)); min-height: 1.1em; transition: opacity .7s var(--ease);
}
.tag-now.swap { opacity: 0; }

/* icons only: no captions (tried; the bare icons read better) */
.panel button {
  width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
  color: rgba(var(--ink-rgb), .62); background: transparent; transition: color .3s, background .3s;
}
.panel button svg { width: 19px; height: 19px; }
.panel button:hover { color: rgb(var(--ink-rgb)); background: rgba(var(--ink-rgb), .08); }
.panel button:focus, .row input:focus { outline: 1.5px solid rgba(var(--ink-rgb), .5); outline-offset: 2px; }
.panel button:focus:not(:focus-visible), .row input:focus:not(:focus-visible) { outline: none; } /* newer engines: keyboard focus only */
.panel button[aria-pressed="true"] { color: rgb(var(--ink-rgb)); background: rgba(var(--ink-rgb), .12); }
.panel button.is-now { color: rgba(var(--ink-rgb), .9); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .25); }
.panel button.big { width: 46px; height: 46px; color: rgba(var(--ink-rgb), .88); }
.panel button.big svg { width: 22px; height: 22px; }
#btnPomo[aria-pressed="true"] { color: rgb(var(--accent-rgb)); }
.panel > .sep { width: 1px; align-self: stretch; margin: 8px 6px; background: rgba(var(--ink-rgb), .14); }

/* volume sliders: horizontal, stacked one above another, one row per sound — add a row to add a control */
.mixer { display: flex; flex-direction: column; justify-content: center; padding: 2px 10px 2px 4px; }
.row { display: flex; align-items: center; height: 24px; color: rgba(var(--ink-rgb), .62); cursor: pointer; }
.row + .row { margin-top: 2px; }
.row svg { width: 15px; height: 15px; flex: none; margin-right: 10px; }
.row input { -webkit-appearance: none; appearance: none; width: 112px; height: 20px; background: transparent; margin: 0; cursor: pointer; }
.row input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: rgba(var(--ink-rgb), .22); }
.row input::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(var(--ink-rgb), .22); }
.row input::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4.5px; border-radius: 50%; background: rgb(var(--accent-rgb)); border: 0; box-shadow: 0 0 0 2px rgba(var(--ink-rgb), .15); }
.row input::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: rgb(var(--accent-rgb)); border: 0; box-shadow: 0 0 0 2px rgba(var(--ink-rgb), .15); }

/* focus timer: digits beside its button, faint until you reach for them; accent while focusing, ink on a break */
.pomo-time {
  margin-right: 12px;
  font: 300 15px/1 system-ui, -apple-system, sans-serif; letter-spacing: .08em; font-variant-numeric: tabular-nums;
  color: rgb(var(--accent-rgb)); opacity: .45; transition: opacity 1.2s var(--ease), color 1.2s; pointer-events: none; -webkit-user-select: none; user-select: none;
}
.pomo-time:empty { display: none; }
body.pomo-break .pomo-time { color: rgb(var(--ink-rgb)); }
.zone-br.show .pomo-time { opacity: .9; }

/* focus timer: a hairline along the top edge */
#pomoBar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 3; pointer-events: none;
  transform-origin: left center; transform: scaleX(0); opacity: 0;
  background: rgb(var(--accent-rgb)); transition: transform 1s linear, opacity 1.2s var(--ease), background 1.2s;
}
body.pomo-focus #pomoBar { opacity: .45; }
body.pomo-break #pomoBar { opacity: .3; background: rgb(var(--ink-rgb)); }

@media (max-width: 560px) {
  .zone-left { padding-right: 20px; }
  /* the watermark keeps to the right half, clear of the weather panel on the left; long lines wrap */
  .zone-corner { padding-left: 8px; max-width: 48%; }
  .tag-name { font-size: 10px; letter-spacing: .3em; margin-right: -.3em; }
  .tag-now { font-size: 19px; line-height: 1.12; }
  /* phones: the dock takes the bottom edge, so the timer and fullscreen sit just above it */
  .zone-br { padding-bottom: 108px; padding-left: 20px; }
  .zone-bl { padding-bottom: 108px; padding-right: 20px; }
}
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 560px) {
    .zone-br, .zone-bl { padding-bottom: calc(108px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel, #glyph, .tag, .tag-now, #pomoBar { transition: none; }
  #grain { animation: none; }
}