/* ---------- themes ---------- */
:root { --ft: 'Audiowide', sans-serif; }
:root, :root[data-theme="og"] {
  --bg0: #010501; --bg1: #0e2c06;
  --c1: #6fd21c; --c2: #c9ff5c; --alt: #9be33a; --wire: #b6f55a;
  --hi: #c8e62a; --hi2: #f4ff8a; --hiInk: #142800;
  --txt: #e4f5c9; --title: #eaff9e; --dim: #7fb84a;
  --pA: #4f9a1c; --pB: #1a4d08; --wA: #0f3208; --wB: #051803;
  --iA: #2e6c14; --iB: #133f08; --warn: #ff5b1a;
}
/* palette: #154556 teal · #7B3217 rust · #89AAB2 slate · #7E7E40 olive */
:root[data-theme="tide"] {
  --bg0: #02080b; --bg1: #154556;
  --c1: #89AAB2; --c2: #d4e4e8; --alt: #7E7E40; --wire: #7E7E40;
  --hi: #7B3217; --hi2: #b25a33; --hiInk: #fbeee4;
  --txt: #e3edf0; --title: #e9f2f4; --dim: #9fb6bc;
  --pA: #3a7488; --pB: #154556; --wA: #0f3442; --wB: #061820;
  --iA: #1f566a; --iB: #0e2e3a; --warn: #b25a33;
}

/* Kaskade 'Gonna Make It' cover */
:root[data-theme="sky"] {
  --bg0: #030814; --bg1: #1c3f73;
  --c1: #5fb4e0; --c2: #d8f0fb; --alt: #c8484e; --wire: #c8484e;
  --hi: #d9d93a; --hi2: #f4f48a; --hiInk: #16243a;
  --txt: #eef6fb; --title: #ffffff; --dim: #8fb4cc;
  --pA: #3a88ae; --pB: #22467e; --wA: #16305a; --wB: #0a1830;
  --iA: #2f6fa0; --iB: #1a3f6e; --warn: #c8484e;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg0); color: var(--txt);
  font-family: 'Share Tech', system-ui, sans-serif; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
body.nogl { background: radial-gradient(circle at 50% 45%, var(--bg1), var(--bg0) 75%); }
body.nogl #gl { display: none; }

#stage { position: fixed; left: 0; top: 0; width: 1280px; height: 960px; transform-origin: 0 0; }
#host { position: absolute; inset: 0; }

/* ---------- screens & transitions ---------- */
.screen { position: absolute; inset: 0; transform-origin: 50% 50%;
  transition: transform .55s cubic-bezier(.2, .75, .25, 1), opacity .45s ease, filter .45s; }
.screen.from-fwd { opacity: 0; transform: scale(.72); transition: none; }
.screen.from-back { opacity: 0; transform: scale(1.3); transition: none; }
.screen.to-fwd { opacity: 0; transform: scale(1.4); }
.screen.to-back { opacity: 0; transform: scale(.7); }

.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wires .w1 { fill: none; stroke: var(--c1); stroke-opacity: .28; stroke-width: 7; }
.wires .w2 { fill: none; stroke: var(--wire); stroke-opacity: .7; stroke-width: 3; stroke-dasharray: 9 6; animation: dash 5s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -150; } }

@keyframes float {
  0%, 100% { transform: var(--tf) translate3d(0, 0, 0); }
  50% { transform: var(--tf) translate3d(0, -7px, 0) rotateX(1.2deg); }
}

/* ---------- chamfered frame ---------- */
.frame { position: absolute; --cut: 30px; --tf: none; transform: var(--tf); animation: float 9s ease-in-out infinite;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c1) 30%, transparent)); }
.frame > .fo, .frame > .fi { position: absolute; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.frame > .fo { inset: 0; background: linear-gradient(165deg, var(--c2) 0%, var(--pA) 5%, var(--pB) 55%, var(--pA) 92%, var(--c1) 100%); }
.frame > .fi { inset: 12px; --cut: 22px;
  background: linear-gradient(180deg, var(--wA), var(--wB));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c1) 45%, transparent), inset 0 0 60px rgba(0, 0, 0, .55); }
.frame > .fi::after { content: ''; position: absolute; inset: 0; opacity: .12;
  background: repeating-linear-gradient(0deg, var(--c1) 0 1px, transparent 1px 4px); }
.frame > .fc { position: absolute; inset: 26px 28px; display: flex; flex-direction: column; }
.dots { position: absolute; left: -2px; top: 42%; width: 12px; height: 30px;
  background: radial-gradient(circle at 6px 6px, var(--alt) 4px, transparent 5px), radial-gradient(circle at 6px 22px, var(--alt) 4px, transparent 5px);
  filter: brightness(1.3); }
.dots.b { left: auto; right: -2px; top: auto; bottom: 14%; }
.plate { position: absolute; left: 40px; top: -60px; height: 66px; padding: 0 44px 0 34px; line-height: 66px;
  clip-path: polygon(22px 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  background: linear-gradient(180deg, var(--c2) 0, var(--pA) 8%, var(--pB)); white-space: nowrap;
  font: calc(40px * var(--fts, 1)) var(--ft); letter-spacing: 2px; color: var(--title); text-shadow: 0 0 10px var(--c1); }
.fhead { font: calc(38px * var(--fts, 1)) var(--ft); letter-spacing: 3px; color: var(--title); text-shadow: 0 0 12px var(--c1);
  margin: -4px 4px 14px; white-space: nowrap; display: flex; align-items: baseline; gap: 18px; text-transform: lowercase; }
.fhead small { font: 20px 'Share Tech Mono', monospace; color: var(--txt); letter-spacing: 1px; margin-left: auto; text-transform: uppercase; }

/* ---------- lists ---------- */
.scroll { position: relative; overflow: hidden; scroll-behavior: smooth; flex: 1; }
.list { padding: 4px 4px 4px 0; }
.item { position: relative; height: 54px; margin: 0 0 10px; padding: 0 52px 0 24px; display: flex; align-items: center; gap: 16px;
  font: 27px/1 'Share Tech', sans-serif; letter-spacing: 2px; color: var(--txt); cursor: pointer; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
  background: linear-gradient(180deg, var(--iA), var(--iB));
  transition: background .15s, color .15s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.list.mono .item { font-family: 'Share Tech Mono', monospace; }
.item::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: color-mix(in srgb, var(--c2) 45%, transparent); }
.item.focus { background: linear-gradient(180deg, var(--hi2), var(--hi) 55%, color-mix(in srgb, var(--hi) 75%, #000)); color: var(--hiInk); transform: translateX(10px); }
.item.big { height: 76px; font-size: 32px; }
.item.chosen:not(.focus) span::after { content: ' \2022'; color: var(--c2); }
.chev { position: absolute; right: 38px; top: 50%; width: 0; height: 0; border: 12px solid transparent; }
.chev.up { border-bottom: 16px solid var(--title); margin-top: -22px; }
.chev.down { border-top: 16px solid var(--title); margin-top: -4px; }
.item.focus .chev.up { border-bottom-color: var(--hiInk); }
.item.focus .chev.down { border-top-color: var(--hiInk); }

.orow { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.orow .item { flex: 1; margin: 0; }
.minib { flex: none; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; padding: 14px;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c2) 50%, transparent), color-mix(in srgb, var(--c1) 15%, transparent) 60%);
  border: 2px solid color-mix(in srgb, var(--c2) 45%, transparent); }
.screen-audio .orow { flex-direction: row-reverse; }

/* ---------- glass bubbles ---------- */
.bubble { position: absolute; border-radius: 50%; --tf: translate(-50%, -50%); transform: var(--tf); animation: float 8s ease-in-out infinite;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c2) 50%, transparent) 0, color-mix(in srgb, var(--c1) 16%, transparent) 24%,
    color-mix(in srgb, var(--c1) 6%, transparent) 55%, color-mix(in srgb, var(--c1) 32%, transparent) 88%, color-mix(in srgb, var(--c2) 55%, transparent) 100%);
  box-shadow: 0 0 40px color-mix(in srgb, var(--c1) 30%, transparent), inset 0 0 50px color-mix(in srgb, var(--c1) 38%, transparent);
  border: 2px solid color-mix(in srgb, var(--c2) 45%, transparent); transition: box-shadow .25s, border-color .25s; }
.bubble::before { content: ''; position: absolute; inset: -9%; border-radius: 50%; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--c1) 22%, transparent); border-left-color: transparent; border-bottom-color: transparent;
  animation: spin 18s linear infinite; }
.bubble::after { content: ''; position: absolute; left: 15%; top: 7%; width: 46%; height: 26%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .5), transparent 70%); transform: rotate(-28deg); }
.bubble > .in { position: absolute; inset: 13%; display: grid; place-items: center; border-radius: 50%; overflow: hidden; }
.bubble.ghost { opacity: .55; }
.fbub { cursor: pointer; }
.fbub.focus { border-color: var(--hi2); box-shadow: 0 0 70px var(--c1), 0 0 20px var(--hi), inset 0 0 60px color-mix(in srgb, var(--c1) 55%, transparent); }
.fbub.focus > .in { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes spin { to { transform: rotate(360deg); } }
.ico { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.portrait, .clock-art, .bigart { width: 100%; height: 100%; display: grid; place-items: center; }
.bigart .ico { width: 88%; height: 88%; }
.svg-title { font-family: var(--ft); fill: var(--title); }
.f-c1 { fill: var(--c1); } .f-c2 { fill: var(--c2); } .f-pB { fill: var(--pB); } .f-hi { fill: var(--hi); fill-opacity: .85; }
.s-c1 { stroke: var(--c1); } .s-c2 { stroke: var(--c2); stroke-width: 2; }
.f-glass { fill: var(--c1); fill-opacity: .25; } .f-glass2 { fill: var(--c1); fill-opacity: .4; } .f-glass3 { fill: var(--c1); fill-opacity: .15; }
.spin-slow { transform-origin: 100px 100px; animation: spin 30s linear infinite; }
.globe-spin { animation: globe 22s linear infinite; }
@keyframes globe { to { transform: translateX(-400px); } }
.spin-y { width: 80%; animation: sway 7s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: perspective(600px) rotateY(-18deg) rotateX(8deg); } 50% { transform: perspective(600px) rotateY(18deg) rotateX(-4deg); } }
.pair { display: flex; gap: 6%; width: 100%; justify-content: center; }
.pair .ico { width: 47%; }
.pair.mono .ico { width: 70%; }
.minib .pair .ico { width: 50%; }
.minib .pair.mono .ico { width: 80%; }

/* ---------- A / B buttons ---------- */
.ab { position: absolute; top: 826px; display: flex; align-items: center; gap: 14px; cursor: pointer;
  font: 20px 'Share Tech', sans-serif; letter-spacing: 4px; color: var(--c2); z-index: 2; }
.ab-b { left: 108px; } .ab-a { left: 1000px; }
.ab .k { width: 84px; height: 72px; border-radius: 50%; display: grid; place-items: center; font: 46px/1 var(--ft); color: var(--title);
  background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--c2) 60%, transparent), color-mix(in srgb, var(--c1) 35%, var(--bg0)) 60%, var(--pB));
  border: 3px solid var(--c1); box-shadow: 0 0 22px color-mix(in srgb, var(--c1) 55%, transparent), inset 0 0 14px var(--c1); text-shadow: 0 0 8px var(--c1);
  transition: transform .15s; }
.ab:hover .k, .ab:active .k { transform: scale(1.08); }

/* ---------- main menu ---------- */
.orb { position: absolute; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.orb span { font: 42px var(--ft); color: var(--title); letter-spacing: 1px;
  text-shadow: 0 0 14px var(--c1), 0 3px 0 rgba(0, 0, 0, .6); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.orb.focus span { transform: scale(1.18); }
body.nogl .orb { background: radial-gradient(circle at 35% 30%, var(--c2), var(--c1) 45%, var(--pB)); box-shadow: 0 0 30px var(--c1); }

/* ---------- info text ---------- */
.info h4 { margin: 0 0 4px; font: 24px 'Share Tech Mono', monospace; color: var(--title); letter-spacing: 1px; }
.info p { margin: 0 0 14px; font: 19px/1.25 'Share Tech Mono', monospace; color: var(--txt); }
.bullets p { margin: 6px 0 10px; font: 22px/1.25 'Share Tech', sans-serif; letter-spacing: 1px; }
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: baseline; gap: 22px; padding: 10px 12px; font: 28px 'Share Tech', sans-serif; letter-spacing: 1px;
  border-bottom: 1px solid color-mix(in srgb, var(--c1) 25%, transparent); cursor: default; }
.row b { width: 34px; font: 18px 'Share Tech Mono', monospace; color: var(--dim); }
.row em { margin-left: auto; font-style: normal; font-family: 'Share Tech Mono', monospace; }
.row.focus, .row.focus b { color: var(--title); text-shadow: 0 0 10px var(--c1); }
.rows.text .row { font-size: 24px; line-height: 1.3; }
.sub { font: 24px 'Share Tech Mono', monospace; margin: 4px 0 26px; }
.bar { height: 22px; border: 2px solid var(--c1); padding: 3px; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hi), var(--hi2)); }

/* ---------- memory ---------- */
.cplate { position: absolute; width: 280px; text-align: center; font: 24px var(--ft); color: var(--title); padding: 6px 0;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%); background: linear-gradient(180deg, var(--pA), var(--pB)); text-transform: lowercase; }
.muinfo { text-align: right; padding-right: 10px; }
.muinfo small, .muhead small { font: 20px 'Share Tech Mono', monospace; color: var(--c2); }
.muinfo h2, .muhead h2 { margin: 0 0 4px; font: 42px/1.1 var(--ft); color: var(--title); text-shadow: 0 0 10px var(--c1); }
.muinfo p { margin: 2px 0; font: 19px 'Share Tech', sans-serif; letter-spacing: 1px; color: var(--dim); }
.muinfo b { color: var(--txt); font-weight: normal; }
.muhead { display: flex; flex-direction: column; align-items: center; }
.muhead h2 { font-size: calc(54px * var(--fts, 1)); }
.grid .ghead { margin: 6px 0 8px; padding: 6px 16px; font: 24px 'Share Tech Mono', monospace; letter-spacing: 1px; color: var(--title);
  background: linear-gradient(90deg, var(--pA), transparent); }
.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px 10px; padding: 4px 10px 12px; }
.thumb { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.thumb i { width: 70px; height: 70px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--c2) 50%, transparent);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), transparent 35%), conic-gradient(from var(--a), var(--pB), var(--c1), var(--bg0), var(--pA), var(--pB));
  transition: transform .2s; }
.thumb span { font: 22px 'Share Tech Mono', monospace; }
.thumb.focus i { transform: scale(1.18); border-color: var(--hi2); box-shadow: 0 0 18px var(--hi); }
.thumb.focus span { color: var(--title); }
.empty { font: 26px 'Share Tech Mono', monospace; text-align: center; margin-top: 200px; }
.sinfo { margin: 0; }
.sinfo dt { font: 16px 'Share Tech Mono', monospace; color: var(--dim); margin-top: 6px; }
.sinfo dd { margin: 0; font: 26px 'Share Tech', sans-serif; letter-spacing: 1px; }
.sinfo.big dt { font-size: 18px; } .sinfo.big dd { font-size: 34px; }

/* ---------- music ---------- */
.discs { position: absolute; width: 240px; height: 240px; perspective: 900px; }
.disc { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 8%, #2a2e2c 8.5% 10%, #cfd6d2 10.5% 17%, rgba(0, 0, 0, .25) 17.5% 18%, transparent 18.5%),
    conic-gradient(from 20deg, #f3f6f4, #9aa39f, #eef2ef, #7f8985, #dfe5e2, #a1aaa6, #f3f6f4);
  -webkit-mask: radial-gradient(circle, transparent 7.5%, #000 8%); mask: radial-gradient(circle, transparent 7.5%, #000 8%);
  box-shadow: 0 0 30px rgba(0, 0, 0, .4); }
.disc.single { animation: discspin 6s linear infinite; }
@keyframes discspin { from { transform: rotateY(-28deg) rotateX(8deg) rotate(0); } to { transform: rotateY(-28deg) rotateX(8deg) rotate(360deg); } }
.stack { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(62deg) rotateZ(-20deg); animation: stack 10s linear infinite; }
@keyframes stack { to { transform: rotateX(62deg) rotateZ(340deg); } }
.stack .disc:nth-child(1) { transform: translateZ(0); } .stack .disc:nth-child(2) { transform: translateZ(14px); }
.stack .disc:nth-child(3) { transform: translateZ(28px); } .stack .disc:nth-child(4) { transform: translateZ(42px); }
.stack .disc:nth-child(5) { transform: translateZ(56px); }
.minfo h3, .vinfo h3 { margin: 0 0 6px; font: 32px 'Share Tech', sans-serif; letter-spacing: 1px; color: var(--title); }
.minfo dt, .vinfo dt { font: 16px 'Share Tech Mono', monospace; color: var(--dim); }
.minfo dd, .vinfo dd { margin: 0 0 4px; font: 22px 'Share Tech Mono', monospace; }
.rings { position: relative; width: 100%; height: 100%; }
.rings i { position: absolute; inset: calc(var(--n) * 7%); border-radius: 50%; border: 4px solid color-mix(in srgb, var(--c2) 60%, transparent);
  border-right-color: transparent; transform: rotate(calc(var(--n) * 40deg)); }
.rings i:nth-child(1) { --n: 0; } .rings i:nth-child(2) { --n: 1; } .rings i:nth-child(3) { --n: 2; }
.rings i:nth-child(4) { --n: 3; } .rings i:nth-child(5) { --n: 4; } .rings i:nth-child(6) { --n: 5; }
.rings.on i { animation: ring 1.6s ease-in-out infinite; animation-delay: calc(var(--n) * -.2s); }
@keyframes ring { 50% { transform: rotate(calc(var(--n) * 40deg + 120deg)) scale(1.06); opacity: .45; } }
.time { font: 44px 'Share Tech Mono', monospace; color: var(--hi2); display: flex; gap: 16px; align-items: center; }
.time .pi { font-size: 22px; }
.prog { height: 10px; margin-top: 6px; background: color-mix(in srgb, var(--c1) 25%, transparent); }
.prog i { display: block; height: 100%; width: 0; background: var(--c2); }
.trk { display: flex; justify-content: space-between; padding: 9px 18px; font: 28px 'Share Tech', sans-serif; letter-spacing: 2px; cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--c1) 25%, transparent); }
.trk span:last-child { font-family: 'Share Tech Mono', monospace; }
.trk.cur { color: var(--c2); text-shadow: 0 0 10px var(--c1); }
.trk.focus { background: linear-gradient(90deg, var(--hi2), var(--hi)); color: var(--hiInk); text-shadow: none; }
.cbar { display: flex; gap: 10px; align-items: center; height: 100%; }
.cbar.small { justify-content: center; height: auto; margin-top: 14px; }
.cbtn { min-width: 56px; height: 46px; padding: 0 12px; display: grid; place-items: center; cursor: pointer; font: 20px 'Share Tech', sans-serif; letter-spacing: 1px;
  background: linear-gradient(180deg, var(--iA), var(--iB)); border: 2px solid color-mix(in srgb, var(--c1) 60%, transparent); border-radius: 8px; color: var(--txt); }
.cbtn.wide { padding: 0 16px; }
.cbtn.on { color: var(--c2); border-color: var(--c2); box-shadow: 0 0 12px var(--c1); }
.cbtn.focus { background: linear-gradient(180deg, var(--hi2), var(--hi)); color: var(--hiInk); border-color: var(--hi2); }

/* ---------- movies ---------- */
.cover { width: 100%; height: 100%; }
.vscreen { flex: 1; background: #000; border: 3px solid color-mix(in srgb, var(--c1) 60%, transparent); overflow: hidden; }
.vscreen canvas { width: 100%; height: 100%; display: block; }

/* ---------- settings ---------- */
.splate { position: absolute; width: 300px; text-align: center; pointer-events: none;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c1) 40%, transparent)); }
.splate b { display: block; padding: 6px 10px; font: calc(30px * var(--fts, 1))/1 var(--ft); font-weight: normal; color: var(--title); text-transform: lowercase;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%); background: linear-gradient(180deg, var(--c2), var(--pA) 10%, var(--pB)); }
.splate .val { display: flex; justify-content: center; gap: 30px; margin: 0 26px; padding: 4px; font: 20px 'Share Tech', sans-serif; letter-spacing: 1px;
  background: color-mix(in srgb, var(--wB) 85%, transparent); }
.splate.parental .val { gap: 4px; padding: 8px 20px; }
.splate.parental .val i { flex: 1; height: 10px; border-radius: 5px; background: var(--c1); }
.splate.parental .val i.warn { background: var(--warn); }

.clockrow { flex: 1; display: flex; gap: 40px; align-items: center; justify-content: center; }
.clockrow .grp { position: relative; display: flex; gap: 8px; align-items: center; padding: 16px 16px 34px; background: rgba(0, 0, 0, .35); }
.clockrow label { position: absolute; left: 14px; bottom: 6px; font: 18px 'Share Tech Mono', monospace; color: var(--dim); }
.tile { position: relative; width: 108px; height: 150px; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(180deg, var(--iA), var(--iB)); border-radius: 10px; font: 58px 'Share Tech', sans-serif; }
.tile.big { width: 130px; }
.tile.focus { background: linear-gradient(180deg, var(--hi2), var(--hi)); color: var(--hiInk); }
.tile.focus::before, .tile.focus::after { position: absolute; left: 0; right: 0; text-align: center; font-size: 22px; }
.tile.focus::before { content: '\25B2'; top: 6px; }
.tile.focus::after { content: '\25BC'; bottom: 6px; }
.sl { font: 58px 'Share Tech', sans-serif; color: var(--c2); }

.pc { position: relative; flex: 1; padding-left: 100px; }
.slider { position: absolute; left: 30px; top: 0; bottom: 0; width: 22px; border-radius: 11px; background: linear-gradient(90deg, var(--pB), var(--pA), var(--pB));
  box-shadow: inset 0 0 6px #000; }
.slider .fill { position: absolute; left: 4px; right: 4px; top: 6px; height: 0; border-radius: 7px; background: linear-gradient(90deg, var(--warn), color-mix(in srgb, var(--warn) 60%, #fff), var(--warn)); transition: height .25s; }
.slider .knob { position: absolute; left: -16px; width: 54px; height: 34px; margin-top: -17px; border-radius: 8px; transition: top .25s;
  background: linear-gradient(180deg, var(--c2), var(--c1) 50%, var(--pB)); box-shadow: 0 0 14px var(--c1); }
.levels { display: flex; flex-direction: column; justify-content: space-around; height: 100%; }
.lvl { padding: 14px 20px; font: 32px 'Share Tech', sans-serif; letter-spacing: 2px; cursor: pointer; color: var(--txt); }
.lvl.focus { color: var(--hi2); text-shadow: 0 0 12px var(--hi); }
:root[data-theme="tide"] .lvl.focus { color: var(--c2); text-shadow: 0 0 12px var(--hi2); }
.pname { margin: 0 0 8px; font: 44px 'Share Tech', sans-serif; font-weight: normal; color: var(--title); }
.pdesc { margin: 0; font: 24px/1.3 'Share Tech', sans-serif; letter-spacing: 1px; }

/* ---------- toast ---------- */
#toast { position: absolute; left: 50%; top: 80px; transform: translate(-50%, -20px); opacity: 0; pointer-events: none; z-index: 5;
  padding: 14px 44px; font: 24px 'Share Tech Mono', monospace; letter-spacing: 2px; color: var(--title);
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%); background: linear-gradient(180deg, var(--pA), var(--pB));
  transition: opacity .25s, transform .25s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- boot ---------- */
#boot { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; cursor: pointer; transition: opacity 1s; }
#boot.done { opacity: 0; pointer-events: none; }
#boot > * { grid-area: 1 / 1; }
.gate { display: flex; flex-direction: column; align-items: center; gap: 40px; transition: opacity .6s; }
#boot.run .gate { opacity: 0; pointer-events: none; }
.gate-orb { width: 180px; height: 180px; border-radius: 50%; animation: pulse 2.4s ease-in-out infinite;
  background: radial-gradient(circle at 50% 50%, #fff 0, var(--hi2) 12%, var(--c1) 38%, var(--pB) 70%, transparent 72%);
  box-shadow: 0 0 80px var(--c1); }
.press { font: 34px var(--ft); color: var(--title); display: flex; align-items: center; gap: 16px; text-shadow: 0 0 10px var(--c1); }
.press .k { width: 64px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--c1); box-shadow: 0 0 14px var(--c1); }
.keys { font: 16px 'Share Tech Mono', monospace; color: var(--dim); letter-spacing: 1px; }
.logo { font: 190px var(--ft); letter-spacing: 16px; opacity: 0; pointer-events: none; }
.logo.emboss { color: color-mix(in srgb, var(--bg1) 70%, var(--c1));
  text-shadow: -3px -3px 0 color-mix(in srgb, var(--c2) 30%, transparent), 4px 4px 6px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .6); }
#boot.run .logo.emboss { animation: emboss 2.6s 3s forwards; }
@keyframes emboss { 0% { opacity: 0; transform: scale(1.5); letter-spacing: 60px; filter: blur(12px); }
  30% { opacity: 1; filter: blur(0); } 80% { opacity: 1; transform: scale(1); letter-spacing: 16px; } 100% { opacity: 0; transform: scale(.9); } }
.logo.final { font-size: 110px; color: var(--c2); text-shadow: 0 0 20px var(--c1), 0 0 60px var(--c1); }
#boot.run .logo.final { animation: final 1.6s 6.7s forwards; }
@keyframes final { from { opacity: 0; filter: blur(14px); transform: scale(1.3); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
.skip { align-self: end; margin-bottom: 40px; font: 18px 'Share Tech Mono', monospace; color: var(--dim); opacity: 0; }
#boot.run .skip { opacity: .7; transition: opacity 1s 1s; }

/* ---------- HUD ---------- */
#hud { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 20; display: flex; gap: 8px; }
#hud button { height: 36px; border-radius: 18px; border: 2px solid rgba(255, 255, 255, .25); cursor: pointer; color: #fff; font: 14px 'Share Tech Mono', monospace; }
#hud .sw { padding: 0 12px 0 34px; position: relative; background: rgba(0, 0, 0, .55); }
#hud .sw::before { content: ''; position: absolute; left: 6px; top: 5px; width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(var(--a) 0 25%, var(--b) 0 50%, var(--c) 0 75%, var(--d) 0); }
#hud .sw.on { border-color: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .4); }
#hud .mute { width: 36px; background: rgba(0, 0, 0, .55) center / 20px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='white'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E"); }
#hud .mute.off { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='white'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  .frame, .bubble, .spin-slow, .globe-spin, .bubble::before { animation: none !important; }
}

/* ---------- brand kit ---------- */
.spin-rec { transform-origin: 100px 100px; animation: spin 4s linear infinite; }
.tiles { display: flex; gap: 14px; justify-content: center; margin: 10px 0 18px; }
.tiles .tile { cursor: default; }
.tiles .tile small { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font: 16px 'Share Tech Mono', monospace; color: var(--dim); }
.price { font: 30px 'Share Tech Mono', monospace; color: var(--hi2); }
.desc { font: 21px/1.3 'Share Tech', sans-serif; letter-spacing: 1px; margin: 8px 0 0; }
.thumb.prod i { display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), transparent 40%), color-mix(in srgb, var(--pc) 30%, var(--wB)); }
.thumb.prod i .ico { width: 78%; height: 78%; filter: none; }
.total { margin-top: auto; display: flex; justify-content: space-between; font: 30px 'Share Tech Mono', monospace; color: var(--title); padding: 10px 6px 0;
  border-top: 2px solid color-mix(in srgb, var(--c1) 40%, transparent); }
.row.link em { color: var(--c2); }
.cbar .item.grow { flex: 1; margin: 0; height: 58px; }

/* collapsed theme picker */
#hud .pal { width: 36px; position: relative; background: rgba(0, 0, 0, .55); }
#hud .pal::before { content: ''; position: absolute; inset: 6px; border-radius: 50%;
  background: conic-gradient(var(--a) 0 25%, var(--b) 0 50%, var(--c) 0 75%, var(--d) 0); }
#hud:not(.open) .sw { display: none; }
#hud.open .pal { border-color: #fff; }

/* popups */
.screen.under { filter: blur(3px) brightness(.4); transition: filter .4s; }
.screen.modal::before { content: ''; position: absolute; inset: -400px; background: radial-gradient(circle, transparent 30%, rgba(0, 0, 0, .55)); }
.vote-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.vote-grid .item { height: 50px; font-size: 24px; }
.vote-other { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.vote-other .item { flex: none; width: 260px; margin: 0; height: 50px; font-size: 22px; }
.city-in { flex: 1; height: 50px; padding: 0 16px; font: 22px 'Share Tech Mono', monospace; letter-spacing: 1px; color: var(--title);
  background: var(--wB); border: 2px solid var(--c1); outline: none; text-transform: uppercase; }
.city-in:focus { border-color: var(--hi); box-shadow: 0 0 14px var(--c1); }
.city-in::placeholder { color: var(--dim); }

/* games */
.gamebox { position: relative; }
.gover { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 30px 70px; text-align: center; background: color-mix(in srgb, var(--bg0) 78%, transparent); }
.gover.show { display: flex; }
.gover h3 { margin: 0 0 6px; font: calc(46px * var(--fts, 1)) var(--ft); color: var(--title); text-shadow: 0 0 16px var(--c1); text-transform: lowercase; }
.gover .lore { margin: 0; font: 21px/1.35 'Share Tech', sans-serif; letter-spacing: 1px; color: var(--txt); }
.gover .how { margin: 10px 0 0; font: 18px 'Share Tech Mono', monospace; color: var(--dim); }
.gover .go { margin: 12px 0 0; font: 26px var(--ft); color: var(--hi2); display: flex; gap: 12px; align-items: center; }
.gover .go .k { width: 46px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--c1); }
.gover .big { margin: 0; font: 90px 'Share Tech Mono', monospace; color: var(--hi2); text-shadow: 0 0 20px var(--c1); }
.ghud { display: flex; justify-content: space-between; margin-top: 12px; font: 22px 'Share Tech Mono', monospace; color: var(--dim); }
.ghud b { color: var(--title); font-weight: normal; }
.pwrap { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.pwrap .photo { position: absolute; inset: -6%; border-radius: 50%; background-size: cover; background-repeat: no-repeat; }
.pwrap video.photo { width: 112%; height: 112%; object-fit: cover; }
/* music: square sleeve with the disc sliding out */
.sleeve { position: absolute; left: 0; top: 10px; width: 210px; height: 210px; z-index: 1; box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 0 2px color-mix(in srgb, var(--c2) 40%, transparent);
  transform: perspective(700px) rotateY(18deg); overflow: hidden; }
.sleeve video, .sleeve img { width: 100%; height: 100%; object-fit: cover; display: block; }
.disc.peek { inset: 25px -70px 15px 80px; width: 200px; height: 200px; animation: peek 6s ease-in-out infinite; }
@keyframes peek { 50% { transform: translateX(26px) rotate(160deg); } }
.pcover { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; opacity: .9; }
.pcover .pwrap { width: 100%; height: 100%; }
/* embedded players */
.vscreen.yt iframe, .embed iframe { width: 100%; border: 0; display: block; background: #000; }
.vscreen.yt iframe { height: 100%; }
.cbar.tabs { flex-wrap: wrap; height: auto; gap: 8px; margin: 2px 0 14px; }
.cbar.tabs .cbtn { font-size: 16px; padding: 0 12px; height: 40px; }
.embed { flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  background: color-mix(in srgb, var(--wB) 80%, #000); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c1) 35%, transparent); }
.embed iframe { border-radius: 12px; }
.noembed { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; text-align: center; font: 20px 'Share Tech Mono', monospace; color: var(--txt); }
.noembed .pwrap, .noembed .ico { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; margin-bottom: 14px; }
.noembed p { margin: 0; }
.noembed b { color: var(--hi2); }

/* keep content inside its frame; compact two-column info lists */
.frame > .fc { overflow: hidden; }
.screen-listen .sinfo { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; }
.screen-listen .sinfo dt { margin: 0; }
.screen-listen .sinfo dd { font-size: 20px; overflow-wrap: anywhere; }
.screen-listen .pname { font-size: 36px; }
.openbtn span { overflow: hidden; text-overflow: ellipsis; }

/* cable style: energy tether - soft glow channel + two crackling bolts (no SVG filters: cheap) */
body.cables-beam .wires .w1 { stroke: var(--c1); stroke-opacity: .13; stroke-width: 18; stroke-dasharray: none; animation: tether 2.6s ease-in-out infinite; }
body.cables-beam .wires .w2 { stroke: #fff; stroke-opacity: .95; stroke-width: 1.8; stroke-dasharray: none; animation: none; stroke-linejoin: bevel; }
body.cables-beam .wires .w3 { fill: none; stroke: var(--c1); stroke-opacity: .7; stroke-width: 1.2; stroke-linejoin: bevel; }
@keyframes tether { 50% { stroke-opacity: .24; stroke-width: 24; } }
.item > span { min-width: 0; overflow: hidden; white-space: nowrap; flex: 1; }

.screen { will-change: transform, opacity; }
.bubble .in:has(.ndl3d) { overflow: visible; }