/* ============================================================
   KILIGAMP: Kaye's playlist in a late-90s desktop music player.
   Geometry is written in "skin pixels": every size is N × var(--u).
   app.js sets --u (2px on big screens, fit-to-width on phones).
   Every colour, bevel and font is a skin token below; a skin is just
   a block of tokens on :root[data-skin="…"]. Canvas art (LCD, analyzer,
   big visualizer) reads the same tokens, so it follows the skin too.
   ============================================================ */

:root {
  --u: 2px;
  /* —— Classic: the default look of the old desktop player —— */
  --desk-bg: #1b1c2b;
  --desk-ink: #a9adc6;
  --desk-pattern: radial-gradient(circle at 1px 1px, #ffffff0d 1px, transparent 1.5px);
  --desk-pattern-size: 4px 4px;
  --face: #353648; --face-2: #282939; --face-hi: #6c6f8c; --face-lo: #10101b; --edge: #07070d;
  --texture: repeating-linear-gradient(0deg, #ffffff06 0 var(--u), transparent var(--u) calc(2 * var(--u)));
  --tb-bg: #1d1e2c; --tb-line-a: #e6c66c; --tb-line-b: #6b5520; --tb-off-a: #6d7086; --tb-off-b: #2a2b39;
  --tb-ink: #f0dc90; --tb-ink-off: #8d90a6;
  --tbb: #8d90a6; --tbb-hi: #c9cbd9; --tbb-lo: #3a3b4c; --tbb-ink: #13131b;
  --lcd-bg: #000000; --lcd-hi: #4d5068; --lcd-lo: #050508;
  --lcd-on: #00e83a; --lcd-ghost: #08280f; --lcd-dim: #0c4a1a;
  --lbl: #b4b7cc;
  --light-on: #22f04a; --light-off: #2a3d30;
  --btn: #b3b6c6; --btn-hi: #eef0f8; --btn-lo: #50536a; --btn-ink: #17171f; --btn-down: #9396a9; --btn-edge: #0b0b12;
  --led-on: #2cff58; --led-off: #1c3322;
  --rail: #14151f; --rail-hi: #4d5068; --rail-lo: #050508;
  --thumb: #b8bbcb; --thumb-hi: #f2f3fa; --thumb-lo: #50536a;
  --seek-thumb: #c9ccda;
  --pl-bg: #000000; --pl-ink: #00ff00; --pl-cur: #ffffff; --pl-sel: #0000c6; --pl-font: Arial, Helvetica, sans-serif;
  --pl-dim: #2f7a2f;
  --ana-low: #18c018; --ana-mid: #d8d000; --ana-high: #e8341c; --ana-peak: #c4c4c4; --scope: #ffd04a;
  --eq-low: #18c018; --eq-mid: #d8d000; --eq-high: #e8341c; --eq-curve: #ffd04a;
  --menu-bg: #c0c0c0; --menu-ink: #000000; --menu-hi: #000080; --menu-hi-ink: #ffffff; --menu-hi-edge: #ffffff; --menu-lo-edge: #404040;
  --tip-bg: #ffffe1; --tip-ink: #000000;
  --link: #9fb2ff;
  /* big visualizer palette: "rainbow" lets it cycle every hue */
  --vis-mode: rainbow;
  --vis-1: #39ff6e; --vis-2: #ffd04a; --vis-3: #ff4a3c; --vis-4: #4a8cff;
  --flora: none;
  --flora-corner: none;
}

/* —— Harana: the invitation cards. Navy and cream chrome, red and blue
   flowers, gold LCD. The flowers are SVG drawn right here. —— */
:root[data-skin="harana"] {
  --desk-bg: #efe7d4;
  --desk-ink: #2b3190;
  --desk-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='%233a42b0' opacity='.16'%3E%3Ccircle cx='7' cy='7' r='1.6'/%3E%3Cellipse cx='7' cy='3.6' rx='1.3' ry='2'/%3E%3Cellipse cx='7' cy='10.4' rx='1.3' ry='2'/%3E%3Cellipse cx='3.6' cy='7' rx='2' ry='1.3'/%3E%3Cellipse cx='10.4' cy='7' rx='2' ry='1.3'/%3E%3C/g%3E%3Cg fill='%23c8323a' opacity='.12'%3E%3Ccircle cx='21' cy='21' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  --desk-pattern-size: 28px 28px;
  --face: #232a7c; --face-2: #1a1f62; --face-hi: #5a63c8; --face-lo: #0b0d36; --edge: #070824;
  --texture: repeating-linear-gradient(0deg, #ffffff07 0 var(--u), transparent var(--u) calc(2 * var(--u)));
  --tb-bg: #f3ead6; --tb-line-a: #2b3190; --tb-line-b: #f3ead6; --tb-off-a: #a7a3c4; --tb-off-b: #f3ead6;
  --tb-ink: #b3262f; --tb-ink-off: #7a7898;
  --tbb: #2b3190; --tbb-hi: #6a73d6; --tbb-lo: #11145a; --tbb-ink: #f3ead6;
  --lcd-bg: #0a0b2a; --lcd-hi: #6a73d6; --lcd-lo: #04051a;
  --lcd-on: #f4c24c; --lcd-ghost: #23213c; --lcd-dim: #5a4a24;
  --lbl: #f3ead6;
  --light-on: #f4c24c; --light-off: #3a3d78;
  --btn: #f1e8d3; --btn-hi: #fffaf0; --btn-lo: #9c9178; --btn-ink: #1d2368; --btn-down: #d8ccb1; --btn-edge: #070824;
  --led-on: #e8343c; --led-off: #6f6a8a;
  --rail: #0a0b2a; --rail-hi: #6a73d6; --rail-lo: #04051a;
  --thumb: #f1e8d3; --thumb-hi: #fffaf0; --thumb-lo: #9c9178;
  --seek-thumb: #f4c24c;
  --pl-bg: #0a0b2a; --pl-ink: #f4c24c; --pl-cur: #ffffff; --pl-sel: #b3262f; --pl-font: Georgia, 'Times New Roman', serif;
  --pl-dim: #7a6a3a;
  --ana-low: #4a5cff; --ana-mid: #f4c24c; --ana-high: #e8343c; --ana-peak: #fff4dc; --scope: #f4c24c;
  --eq-low: #4a5cff; --eq-mid: #f4c24c; --eq-high: #e8343c; --eq-curve: #f4c24c;
  --menu-bg: #f3ead6; --menu-ink: #1d2368; --menu-hi: #2b3190; --menu-hi-ink: #fffaf0; --menu-hi-edge: #fffaf0; --menu-lo-edge: #8a8070;
  --tip-bg: #fffaf0; --tip-ink: #1d2368;
  --link: #2b3190;
  --vis-mode: palette;
  --vis-1: #f4c24c; --vis-2: #e8343c; --vis-3: #4a5cff; --vis-4: #fff4dc;
  /* a cream frame band with the cards' little blue flowers, and a red orchid-ish bloom in the corners */
  --flora: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Crect width='12' height='12' fill='%23f3ead6'/%3E%3Cg fill='%232b3190'%3E%3Ccircle cx='6' cy='6' r='1.2'/%3E%3Cellipse cx='6' cy='3' rx='1' ry='1.6'/%3E%3Cellipse cx='6' cy='9' rx='1' ry='1.6'/%3E%3Cellipse cx='3' cy='6' rx='1.6' ry='1'/%3E%3Cellipse cx='9' cy='6' rx='1.6' ry='1'/%3E%3C/g%3E%3C/svg%3E");
  --flora-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(20 20)'%3E%3Cg fill='%232b3190'%3E%3Cpath d='M0 0 C8 -4 16 -2 19 4 C12 6 5 4 0 0Z'/%3E%3Cpath d='M0 0 C-3 8 -1 15 4 19 C6 12 4 5 0 0Z'/%3E%3C/g%3E%3Cg fill='%23d0303a'%3E%3Cpath d='M0 0 C-4 -9 -2 -15 0 -16 C2 -15 4 -9 0 0Z'/%3E%3Cpath d='M0 0 C-4 -9 -2 -15 0 -16 C2 -15 4 -9 0 0Z' transform='rotate(72)'/%3E%3Cpath d='M0 0 C-4 -9 -2 -15 0 -16 C2 -15 4 -9 0 0Z' transform='rotate(144)'/%3E%3Cpath d='M0 0 C-4 -9 -2 -15 0 -16 C2 -15 4 -9 0 0Z' transform='rotate(216)'/%3E%3Cpath d='M0 0 C-4 -9 -2 -15 0 -16 C2 -15 4 -9 0 0Z' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='3.2' fill='%23f3ead6'/%3E%3Ccircle r='1.6' fill='%23f4c24c'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh; min-height: 100dvh;
  background: var(--desk-pattern), var(--desk-bg);
  background-size: var(--desk-pattern-size), auto;
  color: var(--desk-ink);
  font: 13px/1.35 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

/* —— the desktop —— */
.desk {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: max(8px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 8px max(6px, env(safe-area-inset-left));
}
.desk .w-stage { order: 0; } .desk .w-main { order: 1; } .desk .w-eq { order: 2; } .desk .w-pl { order: 3; } .desk .w-video { order: 4; }
.desk.free { display: block; padding: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.desk.free .win { position: absolute; }
.foot { text-align: center; padding: 10px 12px max(16px, env(safe-area-inset-bottom)); font-size: 13px; }
.foot a { color: var(--link); text-decoration: none; opacity: 0.85; }
.foot a:hover, .foot a:focus-visible { opacity: 1; text-decoration: underline; }
.desk.free + .foot { position: fixed; right: 14px; bottom: 8px; padding: 0; }

/* —— a window —— */
.at {
  position: absolute;
  left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
}
.win {
  position: relative; flex: none;
  width: calc(var(--ww, 275) * var(--u)); height: calc(var(--wh, 116) * var(--u));
  background: var(--texture), linear-gradient(180deg, var(--face) 0%, var(--face-2) 100%);
  box-shadow:
    inset var(--u) var(--u) 0 var(--face-hi),
    inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--face-lo),
    0 0 0 var(--u) var(--edge);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  color: var(--lbl);
}
:root[data-skin="harana"] .win {
  /* cream patterned band all round, navy panel inside it */
  background: var(--flora) 0 0 / calc(6 * var(--u)) calc(6 * var(--u)) repeat;
}
:root[data-skin="harana"] .win::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: calc(3 * var(--u)); right: calc(3 * var(--u)); top: calc(14 * var(--u)); bottom: calc(3 * var(--u));
  background: var(--texture), linear-gradient(180deg, var(--face) 0%, var(--face-2) 100%);
  box-shadow: inset var(--u) var(--u) 0 var(--face-hi), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--face-lo), 0 0 0 var(--u) #2b3190;
}
:root[data-skin="harana"] .win::after {
  content: ''; position: absolute; z-index: 3; pointer-events: none;
  right: calc(-3 * var(--u)); bottom: calc(-4 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u));
  background: var(--flora-corner) center / contain no-repeat;
}
:root[data-skin="harana"] .w-eq::after, :root[data-skin="harana"] .w-video::after { display: none; }
:root[data-skin="harana"] .w-pl::after { right: auto; left: calc(-3 * var(--u)); bottom: calc(-4 * var(--u)); }
.win > * { z-index: 1; }
.w-main { --wh: 116; }
.w-eq { --wh: 116; }
.win.shaded { --wh: 14 !important; overflow: hidden; }
.win.shaded > :not(.tb) { display: none; }
.win.hidden { display: none; }

/* title bar: stripes either side of the name, tiny buttons on the right */
.tb { position: absolute; left: 0; top: 0; width: 100%; height: calc(14 * var(--u)); cursor: default; }
.desk.free .tb[data-drag] { cursor: move; }
.tb-lines {
  position: absolute; left: calc(var(--tl, 18) * var(--u)); width: calc((var(--tr, 241) - var(--tl, 18)) * var(--u));
  top: calc(4 * var(--u)); height: calc(5 * var(--u));
  background: repeating-linear-gradient(180deg, var(--tb-off-a) 0 var(--u), var(--tb-off-b) var(--u) calc(2 * var(--u)));
}
.win.active .tb-lines { background: repeating-linear-gradient(180deg, var(--tb-line-a) 0 var(--u), var(--tb-line-b) var(--u) calc(2 * var(--u))); }
.tb-title { position: absolute; top: calc(3 * var(--u)); color: var(--tb-ink-off); background: var(--tb-bg); }
.win.active .tb-title { color: var(--tb-ink); }
:root[data-skin="harana"] .tb { background: var(--tb-bg); box-shadow: inset 0 calc(-1 * var(--u)) 0 #2b3190; }
.w-main .tb { --tl: 18; --tr: 241; }
.w-stage .tb { --tl: 18; --tr: 261; }
.w-eq .tb, .w-pl .tb { --tl: 6; --tr: 261; }
.w-video .tb { --tl: 6; --tr: 269; }
.dlg-tb { --tl: 6; --tr: 261; }
.tbb {
  padding: 0; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--tbb); color: var(--tbb-ink);
  box-shadow: inset var(--u) var(--u) 0 var(--tbb-hi), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--tbb-lo);
}
.tbb.r1 { --x: 264; --y: 3; --w: 9; --h: 9; } .tbb.r2 { --x: 254; --y: 3; --w: 9; --h: 9; } .tbb.r3 { --x: 244; --y: 3; --w: 9; --h: 9; }
.tbb svg { width: calc(var(--iw) * var(--u)); height: calc(var(--ih) * var(--u)); }
.tbb[data-ico="heart"] svg { width: calc(var(--iw) * var(--u) * 0.86); height: calc(var(--ih) * var(--u) * 0.86); }
.tbb:active { box-shadow: inset var(--u) var(--u) 0 var(--tbb-lo), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--tbb-hi); }

svg { display: block; fill: currentColor; }
[data-ico] > svg, span[data-ico] > svg { width: calc(var(--iw) * var(--u)); height: calc(var(--ih) * var(--u)); }

/* black display boxes (sunken) */
.lcd {
  background: var(--lcd-bg);
  box-shadow: inset var(--u) var(--u) 0 var(--lcd-lo), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--lcd-hi);
}
.lbl { color: var(--lbl); }
.light { color: var(--light-off); }
.light.on { color: var(--light-on); }
.clutter {
  padding: 0; border: 0; cursor: pointer; color: var(--lbl); opacity: 0.55;
  background: linear-gradient(90deg, #ffffff10, #00000040);
}
.clutter:hover { opacity: 0.9; }
.pstate { color: var(--lcd-on); display: grid; place-items: center; }
.pstate svg { width: calc(var(--iw) * var(--u)); height: calc(var(--ih) * var(--u)); }
.pstate.buffering { color: var(--lcd-dim); }

/* buttons */
.btn {
  padding: 0; border: 0; margin: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: calc(2 * var(--u));
  background: var(--btn); color: var(--btn-ink);
  box-shadow:
    inset var(--u) var(--u) 0 var(--btn-hi),
    inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--btn-lo),
    0 0 0 calc(0.5 * var(--u)) var(--btn-edge);
  font: inherit;
}
.btn:active, .btn.down {
  background: var(--btn-down);
  box-shadow:
    inset var(--u) var(--u) 0 var(--btn-lo),
    inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--btn-hi),
    0 0 0 calc(0.5 * var(--u)) var(--btn-edge);
}
.btn:active > *, .btn.down > * { transform: translate(var(--u), var(--u)); }
.btn:focus-visible, .tbb:focus-visible, .slider:focus-visible, .logo:focus-visible, .clutter:focus-visible { outline: 2px solid var(--lcd-on); outline-offset: 1px; }
.btn .px { color: var(--btn-ink); }
.led {
  flex: none; width: calc(3 * var(--u)); height: calc(3 * var(--u));
  background: var(--led-off); box-shadow: inset calc(0.5 * var(--u)) calc(0.5 * var(--u)) 0 #0006;
}
.tog[aria-pressed="true"] .led { background: var(--led-on); box-shadow: 0 0 calc(2 * var(--u)) var(--led-on); }
.btn.tog.small { justify-content: flex-start; padding-left: calc(3 * var(--u)); }
#b-shuffle, #b-repeat { gap: calc(3 * var(--u)); }
.btn.mini { gap: var(--u); }
.btn.mini svg { width: calc(var(--iw) * var(--u)); height: calc(var(--ih) * var(--u)); }
.logo {
  padding: 0; border: 0; cursor: pointer; background: transparent; color: var(--tb-ink);
  display: grid; place-items: center;
}
.logo svg { width: calc(var(--iw) * var(--u) * 1.4); height: calc(var(--ih) * var(--u) * 1.4); }
.logo:hover { filter: brightness(1.3); }

/* sliders (pointer + keyboard, see slider() in app.js) */
.slider { cursor: pointer; touch-action: pan-y; }
.slider .rail {
  position: absolute; left: 0; right: 0; top: calc(3 * var(--u)); bottom: calc(3 * var(--u));
  background: var(--rail);
  box-shadow: inset var(--u) var(--u) 0 var(--rail-lo), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--rail-hi);
}
.slider .thumb {
  position: absolute; top: var(--u); height: calc(100% - 2 * var(--u));
  width: calc(var(--tw) * var(--u));
  left: calc((100% - var(--tw) * var(--u)) * var(--f, 0));
  background: var(--thumb);
  box-shadow: inset var(--u) var(--u) 0 var(--thumb-hi), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--thumb-lo), 0 0 0 calc(0.5 * var(--u)) var(--btn-edge);
}
.slider .thumb::after {  /* grip lines */
  content: ''; position: absolute; left: 35%; right: 35%; top: 30%; bottom: 30%;
  background: repeating-linear-gradient(90deg, var(--thumb-lo) 0 var(--u), transparent var(--u) calc(2 * var(--u)));
  opacity: 0.8;
}
.vol .rail, .bal .rail {
  background:
    repeating-linear-gradient(90deg, #00000055 0 var(--u), transparent var(--u) calc(3 * var(--u))),
    var(--bar, var(--ana-low));
}
.seek .rail { top: calc(2 * var(--u)); bottom: calc(2 * var(--u)); }
.seek .thumb { top: 0; height: 100%; background: var(--seek-thumb); }
.seek.off .thumb { visibility: hidden; }
.seek.off { cursor: default; }

/* equalizer sliders */
.vslider { cursor: pointer; touch-action: none; }
.vslider .rail {
  position: absolute; left: calc(4 * var(--u)); width: calc(6 * var(--u)); top: 0; bottom: 0;
  background: var(--rail);
  box-shadow: inset var(--u) var(--u) 0 var(--rail-lo), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--rail-hi);
}
.vslider .fill {
  position: absolute; left: calc(5 * var(--u)); width: calc(4 * var(--u)); bottom: var(--u);
  height: calc((100% - 13 * var(--u)) * var(--f, 0.5) + 5 * var(--u));
  background: repeating-linear-gradient(0deg, #00000040 0 var(--u), transparent var(--u) calc(2 * var(--u))), var(--bar, var(--eq-mid));
}
.vslider .thumb {
  position: absolute; left: calc(1.5 * var(--u)); width: calc(11 * var(--u)); height: calc(11 * var(--u));
  top: calc((100% - 11 * var(--u)) * (1 - var(--f, 0.5)));
  background: var(--thumb);
  box-shadow: inset var(--u) var(--u) 0 var(--thumb-hi), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--thumb-lo), 0 0 0 calc(0.5 * var(--u)) var(--btn-edge);
}
.vslider .thumb::after { content: ''; position: absolute; left: 20%; right: 20%; top: 45%; height: var(--u); background: var(--thumb-lo); }

/* —— playlist editor —— */
.tb-pl { height: calc(20 * var(--u)); }
.tb-pl .tb-lines { top: calc(6 * var(--u)); height: calc(7 * var(--u)); }
.tb-pl .tb-title { top: calc(6 * var(--u)); }
.tb-pl .tbb.r1 { --y: 6; }
:root[data-skin="harana"] .w-pl::before { top: calc(20 * var(--u)); }
.pl-side { position: absolute; top: calc(20 * var(--u)); bottom: calc(38 * var(--u)); }
.pl-side.l { left: 0; width: calc(12 * var(--u)); }
.pl-side.r { right: 0; width: calc(20 * var(--u)); }
.pl-scroll {
  position: absolute; left: calc(6 * var(--u)); width: calc(8 * var(--u)); height: calc(18 * var(--u));
  top: calc((100% - 18 * var(--u)) * var(--sf, 0));
  background: var(--thumb);
  box-shadow: inset var(--u) var(--u) 0 var(--thumb-hi), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--thumb-lo);
  touch-action: none; cursor: pointer;
}
.pl-list {
  position: absolute; left: calc(12 * var(--u)); top: calc(20 * var(--u)); width: calc(243 * var(--u)); bottom: calc(38 * var(--u));
  margin: 0; padding: 0; list-style: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
  overscroll-behavior: contain;
  background: var(--pl-bg); color: var(--pl-ink);
  font-family: var(--pl-font); font-size: var(--pl-fs, calc(7 * var(--u))); line-height: var(--row);
  outline: none;
  box-shadow: inset var(--u) var(--u) 0 var(--lcd-lo);
}
.pl-list::-webkit-scrollbar { display: none; }
.pl-list:focus-visible { box-shadow: inset 0 0 0 1px var(--pl-ink); }
.pl-row {
  display: flex; gap: calc(3 * var(--u)); align-items: center;
  height: var(--row); padding: 0 calc(2 * var(--u)) 0 calc(2 * var(--u));
  white-space: nowrap; cursor: default;
}
.pl-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pl-row .d { flex: none; font-variant-numeric: tabular-nums; }
.pl-row.sel { background: var(--pl-sel); }
.pl-row.cur { color: var(--pl-cur); }
.pl-row.broken { color: var(--pl-dim); text-decoration: line-through; }
.pl-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: calc(38 * var(--u)); }
.pl-btn .px { color: var(--btn-ink); }
.grip { color: var(--lbl); opacity: 0.5; display: none; cursor: ns-resize; touch-action: none; }
.desk.free .grip { display: block; }

/* —— big visualizer and the video —— */
.frame {
  position: absolute; left: calc(11 * var(--u)); top: calc(20 * var(--u));
  background: #000;
  box-shadow: 0 0 0 var(--u) var(--lcd-lo), 0 0 0 calc(2 * var(--u)) var(--lcd-hi);
  overflow: hidden;
}
.stage-frame { width: calc(253 * var(--u)); height: calc(var(--sh, 142) * var(--u)); cursor: pointer; }
.stage-canvas { width: 100%; height: 100%; image-rendering: auto; }
.stage-name { position: absolute; left: calc(4 * var(--u)); top: calc(4 * var(--u)); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.stage-name.show { opacity: 1; }
.stage-bar { position: absolute; left: 0; right: 0; bottom: calc(3 * var(--u)); height: calc(15 * var(--u)); }
.video-frame { width: calc(var(--vaw, 253) * var(--u)); height: var(--vah-px, calc(142 * var(--u))); min-width: 200px; min-height: 200px; }
#yt, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); margin: 0; z-index: 2;
  padding: 6px 10px; border-radius: 4px; max-width: 90%;
  background: var(--tip-bg); color: var(--tip-ink); font-size: 13px; line-height: 1.3; text-align: center;
  box-shadow: 0 0 0 1px #0008, 0 4px 14px #0008; pointer-events: none;
}
.video-bar { position: absolute; left: 0; right: 0; bottom: calc(3 * var(--u)); height: calc(13 * var(--u)); }
.video-lcd { position: absolute; left: calc(11 * var(--u)); top: var(--u); height: calc(11 * var(--u)); right: calc(11 * var(--u)); }
.video-lcd canvas { position: absolute; left: calc(2 * var(--u)); top: calc(2 * var(--u)); }

/* full screen ("theater"): the stage fills the screen, the video stays docked on top, uncovered */
.theater body { overflow: hidden; }
.theater .w-stage { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; z-index: 50; box-shadow: none; background: #000; }
.theater .w-stage > :not(.stage-frame) { display: none; }
.theater .w-stage::before, .theater .w-stage::after { display: none; }
.theater .stage-frame { left: 0; top: 0; width: 100%; height: 100%; box-shadow: none; }
.theater .w-video {
  position: fixed !important; z-index: 60; left: auto !important; top: auto !important;
  right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom));
}

/* —— menus, tooltips, dialogs (late-90s system look) —— */
.menu {
  position: absolute; z-index: 100; min-width: 190px; padding: 2px;
  background: var(--menu-bg); color: var(--menu-ink);
  box-shadow: inset 1px 1px 0 var(--menu-hi-edge), inset -1px -1px 0 var(--menu-lo-edge), 0 0 0 1px #000, 3px 3px 0 #0006;
  font: 13px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.menu[hidden] { display: none; }
.menu button {
  display: flex; width: 100%; align-items: center; gap: 8px; padding: 6px 18px 6px 8px; min-height: 30px;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.menu button:hover, .menu button:focus-visible { background: var(--menu-hi); color: var(--menu-hi-ink); outline: none; }
.menu .check { width: 12px; flex: none; text-align: center; }
.menu .sep { height: 0; margin: 3px 2px; border-top: 1px solid var(--menu-lo-edge); border-bottom: 1px solid var(--menu-hi-edge); }
.menu .head { padding: 6px 8px 2px 28px; font-size: 11px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.06em; }
.coarse .menu button { min-height: 42px; font-size: 15px; }
.tip {
  position: absolute; z-index: 120; max-width: 260px; padding: 5px 8px;
  background: var(--tip-bg); color: var(--tip-ink); border: 1px solid #000;
  font: 13px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif; box-shadow: 2px 2px 0 #0005;
  pointer-events: none;
}
.tip[hidden] { display: none; }
.dlg {
  --ww: 275; padding: 0; border: 0; overflow: hidden;
  width: min(calc(275 * var(--u)), calc(100vw - 16px)); height: auto; max-height: calc(100dvh - 24px);
  color: var(--lbl);
}
.dlg::backdrop { background: #0008; }
.dlg form { margin: 0; }
.dlg-body { position: relative; z-index: 1; padding: calc(18 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); font-size: 14px; }
.dlg-body label { display: block; margin: 0 0 6px; }
.dlg-body input {
  width: 100%; font: 16px/1.3 system-ui, sans-serif; padding: 6px 8px; border: 0; border-radius: 0;
  background: var(--lcd-bg); color: var(--lcd-on);
  box-shadow: inset var(--u) var(--u) 0 var(--lcd-lo), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--lcd-hi);
}
.jump-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 50vh; overflow-y: auto; background: var(--pl-bg); font-family: var(--pl-font); }
.jump-list button {
  display: block; width: 100%; border: 0; background: transparent; color: var(--pl-ink); text-align: left;
  font: 14px/1.3 var(--pl-font); padding: 8px; min-height: 40px; cursor: pointer;
}
.jump-list button:hover, .jump-list button:focus-visible { background: var(--pl-sel); color: var(--pl-cur); outline: none; }
.about-body p { margin: 0 0 10px; line-height: 1.45; }
.about-body .big { color: var(--tb-ink); font-size: 16px; font-weight: 600; }
:root[data-skin="harana"] .about-body .big { color: #f4c24c; }

/* touch: the classic layout stays, hit areas grow where there is room */
.coarse .btn.tr::after, .coarse .btn.tog::after, .coarse .btn.small::after, .coarse .btn.pl-btn::after, .coarse .logo::after {
  content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px;
}
.coarse .tbb::after { content: ''; position: absolute; inset: -12px; }
.coarse .hslider::after { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.coarse .seek::after { top: -12px; bottom: -12px; }
.btn, .tbb, .logo, .slider, .clutter { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .stage-name { transition: none; }
}

/* pixel text canvases: app.js sets --w/--h in font dots */
canvas.px { width: calc(var(--w, 1) * var(--u)); height: calc(var(--h, 1) * var(--u)); flex: none; }
.tb-title { left: calc(var(--x, 0) * var(--u)); box-sizing: content-box; padding: 0 calc(3 * var(--u)); }
.w-video .tb { --tl: 6; --tr: calc(var(--ww, 275) - 6); }
.video-lcd canvas, #preset-lcd { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.desk:not(.free) { overflow-x: clip; }