/* ============================================================
   dreamUp // Signal Field 2029 — civic HUD over rotting analog
   ============================================================ */
:root{
  --bg:#0b0908;
  --ink:#e8e4dc;
  --silk:#8a8478;
  --line:rgba(232,228,220,.14);
  --hair:rgba(232,228,220,.22);
  --panel:rgba(10,9,8,.48);
  --panel-solid:#100e0c;
  --accent:#5ecfbf;            /* updated per world by field.js */
  --display:'Space Grotesk',system-ui,sans-serif;
  --mono:'DM Mono','Courier New',monospace;
  --radius:2px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{background:var(--bg)}
body{
  background:radial-gradient(120% 90% at 50% 0%,#14110e,#0b0908 60%,#080706);
  color:var(--ink);font-family:var(--mono);font-weight:300;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--accent);color:#04100e}

#field{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:none}
.field-stack{position:fixed;inset:0;z-index:2;pointer-events:none}
.vignette{
  position:absolute;inset:0;
  background:radial-gradient(132% 108% at 50% 42%,transparent 58%,rgba(8,6,4,.28) 100%);
  mix-blend-mode:multiply;
  opacity:.72
}

/* slow accent blobs — fill the void without extra geometry */
.field-wash{
  position:absolute;inset:-28%;
  background:
    radial-gradient(ellipse 52% 44% at 16% 24%, color-mix(in srgb,var(--accent) 34%,transparent) 0%, transparent 64%),
    radial-gradient(ellipse 46% 40% at 86% 70%, color-mix(in srgb,var(--accent) 16%,#c47cff) 0%, transparent 60%),
    radial-gradient(ellipse 38% 34% at 48% 92%, color-mix(in srgb,var(--accent) 18%,#ff9a62) 0%, transparent 58%);
  mix-blend-mode:screen;
  opacity:.38;
  filter:blur(12px);
  animation:washDrift 26s ease-in-out infinite alternate;
  transition:background .8s ease;
}
@keyframes washDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(4.5%,-3.2%) scale(1.07)}
  100%{transform:translate(-5.2%,3.8%) scale(.96)}
}

/* film grain + chromatic fringe sit on the canvas stack only — HUD stays clean */
.field-grain{
  position:absolute;inset:-20%;
  opacity:.34;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.78  0 0 0 0 0.62  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
  mix-blend-mode:overlay;
  animation:grainShift .34s steps(2) infinite;
}
.field-fringe{
  position:absolute;inset:0;
  box-shadow:inset 3px 0 18px rgba(255,36,170,.16),inset -3px 0 18px rgba(0,230,255,.14),inset 0 0 48px color-mix(in srgb,var(--accent) 10%,transparent);
  mix-blend-mode:screen;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}
  25%{transform:translate(-1.6%,.8%)}
  50%{transform:translate(1.2%,-1%)}
  75%{transform:translate(-.8%,1.4%)}
  100%{transform:translate(0,0)}
}
@media (max-width:820px){
  .field-grain{opacity:.16;animation-duration:.9s}
  .field-fringe{box-shadow:inset 2px 0 10px rgba(255,36,170,.1),inset -2px 0 10px rgba(0,230,255,.08)}
  .field-wash{opacity:.22;filter:blur(16px)}
}

.silk{font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--silk)}
.hud-caption .silk,.hud-label,.civic-ticker,.ticker-tag,.clearance,.np-chip .np-meta{letter-spacing:.11em}
.emblem{width:34px;height:34px;flex:none;color:var(--accent);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 45%,transparent));transition:color .6s ease,filter .6s ease}
.emblem-xl{width:92px;height:92px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 16px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;border-radius:var(--radius);
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink);transition:.18s}
.btn:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);color:var(--accent)}
.btn.primary{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:#04100e;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff),var(--accent));
  box-shadow:0 0 22px color-mix(in srgb,var(--accent) 35%,transparent)}

/* ============================================================
   LOADER / BOOT LOG
   ============================================================ */
.loader{position:fixed;inset:0;z-index:60;display:grid;place-items:center;align-content:center;gap:16px;
  background:radial-gradient(120% 90% at 50% 40%,#14110e,#080706);transition:opacity .8s ease,visibility .8s ease}
.loader.gone{opacity:0;visibility:hidden;pointer-events:none}
.loader-word{font-family:var(--display);font-weight:700;font-size:2.4rem;letter-spacing:-.03em}
.loader-word em{font-style:normal;color:var(--accent)}
.boot-log{list-style:none;width:min(420px,86vw);display:grid;gap:6px;min-height:5.4rem}
.boot-log li{
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silk);
  border-left:1px solid var(--hair);padding:3px 0 3px 10px;opacity:0;
  animation:bootLine .35s ease forwards;
}
.boot-log li.on{opacity:1}
.boot-skip{
  border:1px solid var(--line);background:transparent;min-height:36px;padding:6px 14px;
  font-size:.52rem;letter-spacing:.22em;text-transform:uppercase;border-radius:var(--radius);color:var(--silk);
}
.boot-skip:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
@keyframes bootLine{to{opacity:1}}

/* ============================================================
   FALLBACK
   ============================================================ */
.fallback{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 40%,#14110e,#080706)}
.fallback[hidden]{display:none}
.fallback-inner{text-align:center;max-width:520px;display:grid;justify-items:center;gap:14px}
.fallback h1{font-family:var(--mono);font-weight:400;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase}
.fallback p{max-width:420px;line-height:1.7}
.fallback-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* ============================================================
   HUD
   ============================================================ */
.hud{position:fixed;inset:0;z-index:20;pointer-events:none}
.hud[hidden]{display:none}
.hud > *{pointer-events:auto}
.hud .civic-ticker{pointer-events:none}

.hud-top{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:12px clamp(14px,3vw,28px) 8px;
  background:linear-gradient(180deg,rgba(8,6,4,.78),transparent);
  border-bottom:1px solid transparent}
.hud-brand{display:flex;align-items:center;gap:10px;justify-self:start}
.hud-word{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.hud-word em{font-style:normal;color:var(--accent)}
.hud-mast{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0}
.hud-caption{text-align:right;line-height:1.45;max-width:min(420px,56vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clearance{
  display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px 0;
  font-size:.5rem;letter-spacing:.11em;text-transform:uppercase;color:var(--silk);
  border:1px solid var(--line);padding:4px 8px;border-radius:var(--radius);
  background:rgba(8,7,6,.55);
  opacity:1;
}
.clearance-dot{margin:0 7px;opacity:.45}
.checksum{color:var(--accent);letter-spacing:.1em}
@media (max-width:820px){
  .clearance,.hud-mast{display:none}
  .hud-top{grid-template-columns:auto 1fr auto;padding:10px 12px 6px;gap:8px}
  .hud-word{font-size:.92rem}
}

/* civic ticker — always on */
.civic-ticker{
  position:absolute;top:78px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;max-width:min(720px,92vw);
  padding:4px 10px;border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(10,9,8,.52);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--silk);
  white-space:nowrap;overflow:hidden;
  opacity:1;
}
.ticker-tag{color:var(--accent);letter-spacing:.14em}
#tickerLine{overflow:hidden;text-overflow:ellipsis}

/* worlds list (left) — always on; field reads through the glass */
.hud-worlds{position:absolute;left:clamp(14px,3vw,28px);top:50%;transform:translateY(-50%);
  width:min(280px,42vw);display:flex;flex-direction:column;gap:8px;
  background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--hair);border-radius:var(--radius);padding:12px 12px 10px;
  box-shadow:0 16px 40px rgba(0,0,0,.42),0 0 28px color-mix(in srgb,var(--accent) 12%,transparent);
  opacity:1;pointer-events:auto}
.hud-label{margin-bottom:2px}
.hud-worlds ul{list-style:none;display:flex;flex-direction:column;gap:2px;max-height:44vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.world-item{--c:var(--accent);display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:6px 8px;border-radius:var(--radius);border:1px solid transparent;background:transparent;transition:.15s;min-height:34px}
.world-item:hover{background:rgba(255,255,255,.04);border-color:var(--line)}
.world-item.active{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.world-item > span:not(.world-dot){min-width:0;flex:1}
.world-dot{width:7px;height:7px;border-radius:0;flex:none;background:var(--c);box-shadow:0 0 8px var(--c)}
.world-item-name{display:block;font-family:var(--mono);font-weight:400;font-size:.7rem;line-height:1.25;letter-spacing:.02em}
.world-item-meta{display:block;font-size:.48rem;letter-spacing:.1em;text-transform:uppercase;color:var(--silk);margin-top:2px}
.hud-tx-toggle{margin-top:6px}

/* route dock (right) — always on; tracks live here, transport lives on the chip */
.hud-now{position:absolute;right:clamp(14px,3vw,28px);top:50%;transform:translateY(-50%);
  width:min(340px,46vw);display:flex;flex-direction:column;gap:8px;
  background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--hair);border-radius:var(--radius);padding:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.42),0 0 28px color-mix(in srgb,var(--accent) 12%,transparent);
  opacity:1;pointer-events:auto}
@media (min-width:821px){
  .hud .hud-worlds,.hud .hud-now{pointer-events:auto;opacity:1;transform:translateY(-50%)}
}
.np-title{font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.2}
.np-meta{margin-top:1px}
.t-btn{width:44px;height:44px;border-radius:var(--radius);display:grid;place-items:center;border:1px solid var(--line);
  background:rgba(255,255,255,.03);transition:.14s;flex:none}
.t-btn:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent)}
.t-btn:active{transform:translateY(1px)}
.t-btn svg{width:15px;height:15px;fill:currentColor}
.t-btn.play{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 90%,#fff),var(--accent));color:#04100e;border-color:transparent;
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent)}
.np-counter{margin-left:auto;font-family:var(--mono);font-size:.62rem;color:var(--accent);letter-spacing:.06em;white-space:nowrap}
.np-progress{position:relative;height:8px;border-radius:0;background:rgba(255,255,255,.07);overflow:visible;cursor:pointer;flex-shrink:0}
.np-progress span{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 28%,transparent),var(--accent));
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent)}
.np-progress span::after{
  content:"";position:absolute;right:-5px;top:50%;width:12px;height:12px;transform:translateY(-50%);
  border-radius:50%;background:var(--accent);
  box-shadow:0 0 16px 3px color-mix(in srgb,var(--accent) 75%,transparent)
}
body.is-playing .np-progress span::after{animation:leadPulse 1.7s ease-in-out infinite}
@keyframes leadPulse{
  0%,100%{opacity:.7;transform:translateY(-50%) scale(1)}
  50%{opacity:1;transform:translateY(-50%) scale(1.22)}
}
.np-tracks{list-style:none;display:flex;flex-direction:column;gap:1px;margin-top:4px;max-height:36vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.tk-row{display:grid;grid-template-columns:1fr auto;gap:4px;align-items:center}
.tk{--c:var(--accent);display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding:7px 8px;border-radius:var(--radius);border:1px solid transparent;transition:.13s;min-height:40px;text-align:left;width:100%;background:transparent}
.tk:hover{background:rgba(255,255,255,.04)}
.tk.active{border-color:color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent)}
.tk-num{font-family:var(--mono);font-size:.54rem;color:var(--silk)}
.tk.active .tk-num{color:var(--c)}
.tk-title{font-family:var(--display);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-dur{font-family:var(--mono);font-size:.56rem;color:var(--silk)}
.tk-watch{
  min-height:28px;padding:4px 7px;border:1px solid var(--line);border-radius:var(--radius);
  background:transparent;color:var(--accent);font-family:var(--mono);font-size:.46rem;letter-spacing:.14em;text-transform:uppercase
}
.tk-watch:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* slim transport — never recedes */
.np-chip{
  position:absolute;left:50%;bottom:72px;transform:translateX(-50%);
  width:min(500px,78vw);z-index:23;
  display:grid;grid-template-columns:auto auto auto 1fr auto;grid-template-areas:"prev play next copy counter" "bar bar bar bar bar";
  gap:8px 8px;align-items:center;
  padding:12px 14px;border:1px solid var(--hair);border-radius:var(--radius);
  background:rgba(10,9,8,.62);backdrop-filter:blur(14px);
  box-shadow:0 12px 32px rgba(0,0,0,.4),0 0 24px color-mix(in srgb,var(--accent) 14%,transparent)
}
.np-chip #fPrev{grid-area:prev}
.np-chip #fPlay{grid-area:play}
.np-chip #fNext{grid-area:next}
.np-chip-copy{grid-area:copy;min-width:0}
.np-chip .np-title{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-chip .np-counter{grid-area:counter}
.np-chip .np-progress{grid-area:bar}

.sheet-tabs{display:none}

@media (max-width:820px){
  .civic-ticker{display:none}
  .sheet-tabs{
    display:flex;position:absolute;left:12px;right:12px;z-index:21;
    bottom:calc(122px + env(safe-area-inset-bottom,0px));
    border:1px solid var(--hair);background:rgba(10,9,8,.78);backdrop-filter:blur(12px)
  }
  .sheet-tab{
    flex:1;min-height:36px;border:0;background:transparent;
    font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--silk)
  }
  .sheet-tab.is-on{color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,transparent)}
  .hud-worlds,.hud-now{
    position:absolute;top:auto;left:12px;right:12px;width:auto;
    bottom:calc(158px + env(safe-area-inset-bottom,0px));
    max-height:min(26vh,196px);transform:none;opacity:1;pointer-events:auto;
    transition:none
  }
  body.mode-listen .hud-worlds{
    bottom:calc(158px + min(18vh,148px) + 8px + env(safe-area-inset-bottom,0px));
    max-height:min(16vh,124px)
  }
  body.mode-listen .hud-now{max-height:min(18vh,148px)}
  body.mode-watch .hud-now{display:none}
  body.mode-watch .hud-worlds{max-height:min(28vh,220px)}
  .hud-worlds ul{max-height:12vh}
  .np-tracks{max-height:12vh;margin-top:2px}
  .world-item{min-height:32px;padding:6px 8px}
  .np-chip{
    left:12px;right:12px;width:auto;transform:none;
    bottom:calc(66px + env(safe-area-inset-bottom,0px));
    grid-template-columns:auto auto auto 1fr;
    grid-template-areas:"prev play next copy" "bar bar bar bar";
    gap:6px 8px;padding:8px 10px
  }
  .np-chip .np-counter{display:none}
  .np-chip .np-title{font-size:.82rem}
}
@media (max-width:420px){
  .hud-worlds,.hud-now{max-height:min(20vh,154px);padding:8px}
  .np-title{font-size:.88rem}
  .np-tracks{max-height:10vh}
  .tk{min-height:34px;padding:5px 6px}
  .hud-worlds ul{max-height:10vh}
}

.hud-hint{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);text-align:center;opacity:.55}
.hud-provenance{position:absolute;left:50%;bottom:172px;transform:translateX(-50%);opacity:.4}
@media (max-width:820px){.hud-hint,.hud-provenance{display:none}}

/* field hover label + reticle (canvas only) */
.field-label{
  position:fixed;z-index:16;pointer-events:none;
  transform:translate(-50%,calc(-100% - 14px));
  display:grid;gap:2px;justify-items:center;
  padding:6px 10px;border:1px solid var(--hair);border-radius:var(--radius);
  background:rgba(10,9,8,.78);backdrop-filter:blur(10px)
}
.field-label[hidden]{display:none}
.field-label-name{font-family:var(--display);font-weight:500;font-size:.78rem;color:var(--ink)}
.reticle{
  position:fixed;z-index:12;width:26px;height:26px;margin:-13px 0 0 -13px;
  pointer-events:none;opacity:0;transition:opacity .18s ease;
  border:1px solid rgba(232,228,220,.22);border-radius:50%
}
.reticle::before,.reticle::after{content:"";position:absolute;background:rgba(232,228,220,.3)}
.reticle::before{left:50%;top:3px;bottom:3px;width:1px;transform:translateX(-50%)}
.reticle::after{top:50%;left:3px;right:3px;height:1px;transform:translateY(-50%)}
body.over-field .reticle{opacity:.65}
@media (pointer:coarse){.reticle{display:none}}

/* system toast — top, never over play */
.hud .sys-toast{
  position:absolute;top:112px;left:50%;transform:translateX(-50%);
  pointer-events:none;z-index:24;
  font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--hair);background:rgba(10,9,8,.86);
  padding:8px 12px;border-radius:var(--radius);color:var(--ink);
}
.hud .sys-toast[hidden]{display:none}
.hud .sys-toast.is-on{animation:toastFade 2.1s ease forwards}
@keyframes toastFade{0%{opacity:0}18%{opacity:1}72%{opacity:1}100%{opacity:0}}

/* SynthFeed ad — de-emphasized, kept off the stereo / CRT pile */
.synth-ad{
  position:absolute;right:clamp(14px,3vw,28px);left:auto;top:auto;
  bottom:calc(96px + env(safe-area-inset-bottom,0px));
  width:min(220px,38vw);z-index:18;
  border:1px solid var(--hair);background:rgba(12,10,9,.78);
  padding:10px;border-radius:var(--radius);
  display:grid;gap:6px;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  opacity:.82
}
.synth-ad[hidden]{display:none}
.synth-ad.is-live{animation:adGlitch .55s steps(2) 2}
.synth-ad-line{font-size:.68rem;letter-spacing:.02em;color:var(--ink);line-height:1.35}
.synth-ad-yield{color:var(--accent);font-size:.48rem}
.synth-ad .btn{justify-self:start;min-height:32px;padding:6px 10px}
@keyframes adGlitch{
  0%,100%{filter:none;transform:none}
  30%{filter:hue-rotate(18deg) contrast(1.25);transform:translateX(-2px)}
  60%{filter:saturate(.4);transform:translateX(2px)}
}
@media (max-width:820px){
  .hud .sys-toast{top:78px}
  .synth-ad{top:72px;right:12px;bottom:auto;width:min(188px,62vw);opacity:.7}
}

/* ============================================================
   INTERCEPTED TAPE
   ============================================================ */
.tx-panel{position:fixed;inset:auto 0 0 0;z-index:30;max-height:70vh;
  background:linear-gradient(180deg,rgba(12,10,8,.96),rgba(8,6,5,.99));border-top:1px solid var(--hair);
  padding:16px clamp(14px,3vw,28px) calc(20px + env(safe-area-inset-bottom));box-shadow:0 -14px 40px rgba(0,0,0,.6);
  transform:translateY(0);transition:transform .35s ease}
.tx-panel[hidden]{display:none}
.tx-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}
.tx-stamp{border:1px solid var(--hair);padding:5px 8px;border-radius:var(--radius)}
.tx-close{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:var(--radius);padding:8px 12px;font-family:var(--mono);font-size:.52rem;letter-spacing:.2em;text-transform:uppercase}
.tx-close:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.tx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;overflow-y:auto;max-height:56vh;padding-right:4px}
.tx-card{--c:var(--accent);text-align:left;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#0c0a08;transition:.16s}
.tx-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.tx-thumb{position:relative;aspect-ratio:16/9;background:#000}
.tx-thumb img{width:100%;height:100%;object-fit:cover;filter:contrast(1.08) saturate(.82)}
.tx-thumb::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.22) 2px 3px);pointer-events:none}
.tx-thumb span{position:absolute;right:4px;bottom:4px;font-family:var(--mono);font-size:.46rem;background:rgba(0,0,0,.72);padding:1px 4px;border-radius:0}
.tx-card-title{font-family:var(--display);font-size:.66rem;padding:8px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   VIDEO OVERLAY
   ============================================================ */
.v-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:rgba(8,6,5,.92);backdrop-filter:blur(10px)}
.v-overlay[hidden]{display:none}
.v-close{position:absolute;top:18px;right:18px;min-height:42px;padding:10px 15px;border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.04);font-family:var(--mono);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase}
.v-close:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.v-frame{width:min(960px,94vw)}
.v-screen{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:0 0 0 4px #100e0c,0 20px 50px rgba(0,0,0,.6)}
.v-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.v-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:12px}
.v-title{font-family:var(--display);font-weight:600;font-size:1.05rem}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .field-grain,.field-fringe,.field-wash{display:none}
  .boot-log li{opacity:1;animation:none}
  .synth-ad.is-live,.hud .sys-toast.is-on{animation:none}
  .np-progress span::after{animation:none !important;box-shadow:none}
}
body.reduce-motion .field-grain,
body.reduce-motion .field-fringe,
body.reduce-motion .field-wash{display:none}
body.reduce-motion .boot-log li{opacity:1;animation:none}
body.reduce-motion .synth-ad.is-live,
body.reduce-motion .sys-toast.is-on{animation:none}

/* ============================================================
   LISTEN / WATCH CHROME + PHOTO ROOMS
   ============================================================ */
#field{display:none}
.rooms{position:fixed;inset:0;z-index:3;background:#0b0908}
.room{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease}
body.mode-listen .listen-room,
body.mode-watch .watch-room,
body.mode-pick .listen-room{opacity:1}
body.mode-listen .listen-room,
body.mode-watch .watch-room{pointer-events:auto}
.room-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 45%;display:block;
  pointer-events:none
}
body.mode-listen .field-wash,body.mode-watch .field-wash,body.mode-pick .field-wash{opacity:.06}
body.mode-listen .vignette,body.mode-watch .vignette,body.mode-pick .vignette{opacity:.22}
body.mode-listen .field-grain,body.mode-watch .field-grain,body.mode-pick .field-grain{opacity:.08}
body.mode-listen .reticle,body.mode-watch .reticle,body.mode-pick .reticle{display:none}

.hotspot{
  position:absolute;border:0;background:transparent;padding:0;
  cursor:pointer;border-radius:2px
}
.listen-deck{z-index:1}
.listen-deck:hover{box-shadow:inset 0 0 40px color-mix(in srgb,var(--accent) 18%,transparent)}
.listen-marks{position:absolute;inset:0;z-index:4;pointer-events:none}
.listen-mark{
  z-index:4;pointer-events:auto;color:transparent;font-size:0;line-height:0;
  overflow:hidden;cursor:pointer
}
.listen-mark:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.listen-mark:focus{outline:none}
.listen-mark:focus-visible{
  clip-path:none;
  outline:2px solid var(--accent);
  outline-offset:3px;
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  color:transparent
}
.lava-lamp{
  position:absolute;z-index:2;pointer-events:none;
  display:block
}
body:not(.mode-listen) .listen-marks,
body:not(.mode-listen) .lava-lamp{visibility:hidden}

.tv-sat{
  position:absolute;overflow:hidden;border-radius:2px;z-index:1;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 0 18px rgba(80,160,255,.12);
  background-color:transparent;background-size:cover;background-position:center;
  cursor:pointer;border:0;padding:0
}
.tv-hero-spill{
  position:absolute;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 52% 48% at 50% 48%,rgba(90,170,255,.28),rgba(40,90,140,.08) 58%,transparent 74%);
  mix-blend-mode:screen;filter:blur(18px);transition:opacity .35s ease
}
.tv-hero{
  position:absolute;overflow:hidden;z-index:3;background:#050608;cursor:pointer;
  filter:drop-shadow(0 0 10px rgba(40,90,140,.18))
}
.tv-hero-stage{
  position:absolute;left:0;top:0;z-index:2;transform-origin:0 0;
  overflow:hidden;background:#000
}
.tv-hero-glass{position:absolute;inset:0;overflow:hidden}
.tv-hero-glass iframe,
.tv-hero-glass > div,
.tv-hero-glass > iframe{
  position:absolute;left:50%;top:46%;width:142%;height:188%;
  transform:translate(-50%,-50%);border:0;background:#000;max-width:none
}
.tv-hero-glaze{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.55;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse 78% 68% at 50% 42%,rgba(255,255,255,.05) 0%,transparent 62%),
    radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(0,0,0,.32) 100%);
  box-shadow:inset 0 0 18px rgba(0,0,0,.42),inset 0 0 2px rgba(255,255,255,.08)
}
.tv-hero-glaze::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .28 0'/></filter><rect width='100%' height='100%' filter='url(%23d)'/></svg>");
  background-size:90px 90px;mix-blend-mode:overlay
}
.tv-hero-glaze::after{
  content:"";position:absolute;inset:-8%;pointer-events:none;
  background:radial-gradient(ellipse 70% 62% at 50% 44%,rgba(180,210,255,.12),transparent 64%);
  mix-blend-mode:screen
}
.tv-hero-snow,.tv-sat-snow{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.35) 2px 3px),
    radial-gradient(circle at 50% 50%,rgba(90,140,200,.18),transparent 70%);
  animation:crtSnow .14s steps(2) infinite;
  mix-blend-mode:screen;opacity:.55
}
.tv-hero-snow{
  z-index:1;mix-blend-mode:normal;opacity:.82;
  background:
    repeating-linear-gradient(180deg,rgba(210,225,255,.09) 0 1px,transparent 1px 2px),
    repeating-linear-gradient(90deg,rgba(160,190,230,.06) 0 1px,transparent 1px 3px),
    radial-gradient(circle at 50% 48%,rgba(70,120,180,.32),rgba(6,8,12,.7) 74%)
}
body.is-playing.mode-watch .tv-hero-snow{opacity:0}
body.is-playing.mode-watch .tv-hero{
  filter:drop-shadow(0 0 14px rgba(90,170,255,.5)) drop-shadow(0 0 32px rgba(80,160,255,.28))
}
body.is-playing.mode-watch .tv-hero-spill{opacity:.9}
body.is-playing.mode-watch .tv-hero-glaze{
  opacity:.9;
  box-shadow:inset 0 0 22px rgba(90,170,255,.22),inset 0 0 8px rgba(255,255,255,.12)
}
@keyframes crtSnow{
  0%{transform:translate(0,0);filter:contrast(1.2)}
  100%{transform:translate(-1%,1%);filter:contrast(1.45)}
}
body.reduce-motion .tv-hero-snow,
body.reduce-motion .tv-sat-snow{animation:none}
body.reduce-motion .tv-hero-spill{transition:none}

body.mode-listen .watch-only,
body.mode-watch .listen-only{display:none}
body:not(.mode-listen) .listen-only,
body:not(.mode-watch) .watch-only{display:none}
body.mode-listen .listen-only,
body.mode-watch .watch-only{display:block}
body.mode-pick .hud{display:none}

.hud-modes{display:flex;justify-self:center;align-items:center;gap:8px;min-width:0}
.hud-guide{
  min-height:32px;padding:6px 12px;border:1px solid var(--hair);border-radius:var(--radius);
  background:rgba(10,9,8,.55);font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--silk)
}
.hud-guide:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.mode-toggle{
  display:flex;border:1px solid var(--hair);border-radius:var(--radius);
  background:rgba(10,9,8,.55);overflow:hidden
}
.mode-btn{
  min-height:32px;padding:6px 14px;border:0;background:transparent;
  font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--silk)
}
.mode-btn.is-on{
  color:#04100e;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff),var(--accent))
}
.tv-item{--c:var(--accent);display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:6px 8px;border-radius:var(--radius);border:1px solid transparent;background:transparent;min-height:34px}
.tv-item:hover{background:rgba(255,255,255,.04);border-color:var(--line)}
.tv-item.active{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.tv-item-name{display:block;font-family:var(--display);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-item-meta{display:block;font-size:.46rem;letter-spacing:.1em;text-transform:uppercase;color:var(--silk);margin-top:2px}

body.mode-watch .np-progress,
body.mode-watch .np-counter{display:none}
body.mode-watch .np-chip{
  grid-template-columns:auto auto auto 1fr;
  grid-template-areas:"prev play next copy"
}

.mode-split{
  position:fixed;inset:0 0 58px 0;z-index:65;display:grid;place-items:center;align-content:center;gap:18px;
  background:radial-gradient(120% 90% at 50% 40%,rgba(20,14,10,.55),rgba(8,6,5,.82));
  backdrop-filter:blur(8px)
}
.mode-split[hidden]{display:none}
.mode-split-word{font-family:var(--display);font-weight:700;font-size:2.1rem;letter-spacing:-.03em}
.mode-split-word em{font-style:normal;color:var(--accent)}
.mode-split-kicker{letter-spacing:.2em}
.mode-split-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(720px,92vw)}
.mode-split-btn{
  display:grid;gap:8px;justify-items:start;text-align:left;
  min-height:148px;padding:22px 22px 20px;border:1px solid var(--hair);border-radius:var(--radius);
  background:rgba(10,9,8,.72);transition:.18s
}
.mode-split-btn:hover{
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,rgba(10,9,8,.8));
  transform:translateY(-2px)
}
.mode-split-name{font-family:var(--display);font-weight:700;font-size:1.8rem;letter-spacing:-.03em}
.mode-split-sub{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--silk)}
@media (max-width:820px){
  .mode-split-row{grid-template-columns:1fr}
  .mode-split-btn{min-height:112px;padding:16px}
  .mode-split-name{font-size:1.45rem}
  .mode-toggle .mode-btn{padding:6px 10px;font-size:.46rem}
}

@media (prefers-reduced-motion:reduce){
  .mode-split-btn:hover{transform:none}
}

/* Quiet crawlable footer. Real links, no room script required. */
.site-footer{
  position:fixed;z-index:22;left:0;right:0;bottom:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;
  max-height:58px;overflow:auto;
  padding:8px 16px;
  background:rgba(8,6,4,.9);
  border-top:1px solid var(--line);
  font-size:.48rem;letter-spacing:.08em;text-transform:uppercase;color:var(--silk);
  pointer-events:auto
}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.site-footer ul{display:flex;flex-wrap:wrap;gap:4px 12px;list-style:none;margin:0;padding:0}
.site-footer a:hover{color:var(--accent)}

/* Listener guide. Same glass as the field HUD. */
.reach{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;
  background:rgba(8,6,4,.62);pointer-events:auto
}
.reach[hidden]{display:none}
.reach-panel{
  width:min(440px,92vw);max-height:min(82vh,680px);overflow:auto;
  display:grid;gap:12px;
  background:var(--panel-solid);border:1px solid var(--hair);border-radius:var(--radius);
  padding:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.42),0 0 28px color-mix(in srgb,var(--accent) 12%,transparent)
}
.reach-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.reach-close{
  border:1px solid var(--line);background:transparent;min-height:32px;padding:4px 10px;
  font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silk);border-radius:var(--radius)
}
.reach-close:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.reach-panel h2{font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.02em}
.reach-moods{display:grid;gap:6px}
.reach-moods[hidden]{display:none}
.reach-mood{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;text-align:left;
  min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(255,255,255,.03)
}
.reach-mood:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent)}
.reach-album{font-family:var(--display);font-weight:600;font-size:1.05rem}
.reach-copy{color:var(--silk);font-size:.78rem;line-height:1.5}
.reach-actions,.reach-follow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.reach-follow a{font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}