@font-face{
  font-family:'VT323';
  src:url('../assets/fonts/VT323-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

:root{
  --gfr-primary:#68c85f;
  --gfr-highlight:#a7f59a;
  --gfr-bg:#020502;
  --gfr-panel:#061006;
  --gfr-muted:#376f36;
  --gfr-max:720px;
  --gfr-scan:.10;
  --gfr-accent:#d6b86a;
  --gfr-accent-rgb:214,184,106;
  --gfr-accent-contrast:#1f1706;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000}
body{color:var(--gfr-primary);font-family:'VT323',Consolas,'Courier New',monospace;font-size:18px}
button{font:inherit}

/* The browser canvas stays clean black. CRT treatment belongs to the terminal only. */
.gfr-jukebox{
  width:min(100%,var(--gfr-max));
  min-height:100vh;
  margin:0 auto;
  padding:4px 0 56px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(circle at 50% 5%,color-mix(in srgb,var(--gfr-primary) 14%,#000) 0,color-mix(in srgb,var(--gfr-bg) 82%,#000) 40%,#010201 100%);
}
.gfr-jukebox::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:100;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(var(--gfr-stage-primary-rgb),var(--gfr-scan)) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;
  opacity:.32;
}
.gfr-jukebox::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:99;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.42) 100%);
}

.gfr-hero{
  position:relative;
  margin:10px clamp(12px,6vw,46px) 0;
  min-height:505px;
  border:1px solid var(--gfr-muted);
  border-radius:7px;
  padding:18px 18px 16px;
  background:linear-gradient(color-mix(in srgb,var(--gfr-primary) 10%,rgba(0,0,0,.84)),color-mix(in srgb,var(--gfr-bg) 88%,rgba(0,0,0,.9))),repeating-linear-gradient(90deg,transparent 0 31px,rgba(var(--gfr-stage-primary-rgb),.035) 32px);
  box-shadow:inset 0 0 30px rgba(var(--gfr-stage-primary-rgb),.08),0 0 14px rgba(var(--gfr-stage-primary-rgb),.08);
  overflow:hidden;
}
.gfr-hero__topline,.gfr-hero__footer{display:flex;justify-content:space-between;gap:14px;font-size:clamp(10px,2.2vw,14px);line-height:1.35;text-shadow:0 0 8px rgba(var(--gfr-stage-primary-rgb),.45)}
.gfr-hero__code{text-align:right}.gfr-wave{letter-spacing:-.18em}.gfr-signal{font-size:.8em}
.gfr-hero__footer{position:absolute;left:18px;right:18px;bottom:14px;color:var(--gfr-muted);font-size:10px}

.gfr-hero-idle{text-align:center;position:relative}
.gfr-hero-idle-asset{position:absolute;inset:8px 0 30px;display:grid;place-items:center;z-index:3;overflow:hidden}
.gfr-hero-idle-asset[hidden]{display:none}
.gfr-hero-idle-asset img{display:block;width:100%;height:100%;object-fit:contain;filter:saturate(.9) contrast(1.04);opacity:.96}
.gfr-hero-fallback{position:relative}
.gfr-hero-fallback[hidden]{display:none}
.gfr-hero__core{height:200px;display:grid;place-items:center;position:relative;margin-top:14px}
.gfr-radar{position:absolute;width:min(68vw,310px);aspect-ratio:1;border:1px solid rgba(var(--gfr-stage-primary-rgb),.12);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 29px,rgba(var(--gfr-stage-primary-rgb),.07) 30px 31px),linear-gradient(90deg,transparent 49.7%,rgba(var(--gfr-stage-primary-rgb),.07) 50%,transparent 50.3%),linear-gradient(0deg,transparent 49.7%,rgba(var(--gfr-stage-primary-rgb),.07) 50%,transparent 50.3%);opacity:.8}
.gfr-mic{font-size:clamp(55px,14vw,90px);font-weight:900;letter-spacing:-.16em;z-index:1;text-shadow:0 0 14px rgba(var(--gfr-stage-primary-rgb),.4)}
.gfr-radio-waves{position:absolute;left:61%;font-weight:900;font-size:clamp(34px,8vw,58px);letter-spacing:-.25em;text-shadow:0 0 14px rgba(var(--gfr-stage-primary-rgb),.4)}
.gfr-hero h1{margin:2px 0 -6px;text-align:center;font-size:clamp(52px,14vw,94px);line-height:.92;letter-spacing:-.07em;color:var(--gfr-primary);text-shadow:1px 0 color-mix(in srgb,var(--gfr-bg) 68%,#000),-1px 0 color-mix(in srgb,var(--gfr-highlight) 80%,#fff),0 0 12px rgba(var(--gfr-stage-primary-rgb),.22)}
.gfr-radio-title{text-align:center;font-weight:900;font-size:clamp(31px,8vw,54px);letter-spacing:.12em;color:var(--gfr-primary)}
.gfr-library-badge{width:max-content;max-width:100%;margin:11px auto 22px;border:1px solid var(--gfr-muted);padding:7px 14px;border-radius:3px;font-size:clamp(12px,3vw,18px);white-space:nowrap}

/* RC0.2 functionality, re-fitted to the calmer RC0.1 proportions. */
.gfr-hero-playing{padding:42px 0 28px;display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:20px;align-items:center}
.gfr-hero-playing[hidden]{display:none}
.gfr-hero-back{grid-column:1/-1;justify-self:start;border:1px solid var(--gfr-muted);background:color-mix(in srgb,var(--gfr-bg) 84%,#000);color:var(--gfr-highlight);padding:7px 10px;cursor:pointer;font-size:10px;letter-spacing:.07em;border-radius:2px}
.gfr-hero-back:hover,.gfr-hero-back:focus-visible{border-color:var(--gfr-highlight);color:var(--gfr-highlight);outline:none;box-shadow:0 0 8px rgba(var(--gfr-stage-primary-rgb),.16)}
.gfr-hero-cover{width:100%;aspect-ratio:1;border:1px solid var(--gfr-muted);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--gfr-primary) 26%,#000),color-mix(in srgb,var(--gfr-bg) 82%,#000) 68%);display:grid;place-items:center;font-size:68px;font-weight:900;color:var(--gfr-primary);text-shadow:0 0 17px rgba(var(--gfr-stage-primary-rgb),.45);position:relative;overflow:hidden;box-shadow:0 0 20px rgba(var(--gfr-stage-primary-rgb),.08)}
.gfr-hero-cover::after{content:"CAPTURED TRANSMISSION";position:absolute;left:8px;right:8px;bottom:7px;font-size:8px;letter-spacing:.08em;color:color-mix(in srgb,var(--gfr-primary) 76%,#d7d7d7 24%);text-align:center}
.gfr-hero-cover img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.8) contrast(1.05)}
.gfr-hero-frequency{font-size:15px;color:var(--gfr-highlight);margin-bottom:8px}
.gfr-hero-song-title{font-weight:900;font-size:clamp(25px,5vw,40px);line-height:.98;letter-spacing:.035em;color:var(--gfr-highlight);text-shadow:0 0 10px rgba(var(--gfr-stage-primary-rgb),.28);overflow-wrap:anywhere}
.gfr-hero-subtitle{margin-top:10px;font-size:12px;line-height:1.35;color:color-mix(in srgb,var(--gfr-primary) 82%,#d7d7d7 18%)}
.gfr-hero-player{grid-column:1/-1;display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;margin-top:2px}
.gfr-hero-play{height:31px;border:1px solid var(--gfr-highlight);background:#071207;color:var(--gfr-highlight);cursor:pointer}
.gfr-hero-progress{height:11px;border:1px solid var(--gfr-muted);padding:2px}
.gfr-hero-progress span{display:block;height:100%;width:0;background:var(--gfr-highlight);box-shadow:0 0 9px rgba(var(--gfr-stage-primary-rgb),.42)}
.gfr-hero-time{font-size:9px;color:var(--gfr-highlight);white-space:nowrap}
.gfr-hero-audio-state{grid-column:1/-1;text-align:center;font-size:8px;letter-spacing:.14em;color:color-mix(in srgb,var(--gfr-primary) 78%,#d7d7d7 22%);margin-top:-3px}
.gfr-hero-audio-state.is-warning{color:color-mix(in srgb,var(--gfr-highlight) 60%,#c59f59 40%)}

.gfr-intro{padding:20px clamp(16px,7vw,52px) 15px;text-align:center;background:linear-gradient(90deg,transparent,rgba(var(--gfr-stage-primary-rgb),.04),transparent)}
.gfr-intro h2{margin:0 0 9px;font-size:clamp(16px,4vw,24px);font-weight:700;letter-spacing:.07em;color:var(--gfr-highlight);text-shadow:0 0 9px rgba(var(--gfr-stage-primary-rgb),.25)}
.gfr-intro p{margin:0 0 12px;font-size:clamp(10px,2.4vw,13px)}
.gfr-signal-meter{height:22px;border:1px solid var(--gfr-primary);padding:2px;display:grid;grid-template-columns:repeat(18,1fr);gap:2px;box-shadow:0 0 8px rgba(var(--gfr-stage-primary-rgb),.2)}
.gfr-signal-meter span{border:1px solid color-mix(in srgb,var(--gfr-primary) 58%,#203020);background:color-mix(in srgb,var(--gfr-bg) 82%,#000)}
.gfr-signal-meter span:nth-child(-n+7){background:var(--gfr-highlight);box-shadow:0 0 6px rgba(var(--gfr-stage-primary-rgb),.26)}
.gfr-demo-note{margin-top:7px;font-size:9px;color:var(--gfr-muted);letter-spacing:.09em}.gfr-demo-note.is-runtime{color:var(--gfr-highlight)}
.gfr-build-version{margin-top:4px;font-size:8px;color:color-mix(in srgb,var(--gfr-primary) 55%,#3d3d3d 45%);letter-spacing:.08em}

/* RC0.1 card geometry restored: side padding makes the entries feel portrait/terminal-like again. */
.gfr-song-list{display:flex;flex-direction:column;gap:7px;padding:0 clamp(8px,4vw,28px) 8px}
.gfr-card{position:relative;width:100%;min-height:112px;border:1px solid var(--gfr-primary);border-radius:7px;background:linear-gradient(90deg,color-mix(in srgb,var(--gfr-primary) 9%,rgba(0,0,0,.94)),color-mix(in srgb,var(--gfr-bg) 88%,rgba(0,0,0,.94)));display:grid;grid-template-columns:76px 98px 1fr;gap:11px;align-items:center;padding:9px;cursor:pointer;outline:none;box-shadow:inset 0 0 16px rgba(var(--gfr-stage-primary-rgb),.05),0 0 7px rgba(var(--gfr-stage-primary-rgb),.12);transition:border-color .12s ease,box-shadow .12s ease,background .12s ease,transform .06s ease}
.gfr-card:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--gfr-primary) 14%,rgba(0,0,0,.98)),color-mix(in srgb,var(--gfr-bg) 84%,rgba(0,0,0,.98)));border-color:var(--gfr-highlight)}
.gfr-card:focus-visible{outline:2px solid var(--gfr-highlight);outline-offset:2px}
.gfr-card:active{transform:scale(.997)}
.gfr-card.is-active{border-color:var(--gfr-highlight);background:linear-gradient(90deg,color-mix(in srgb,var(--gfr-primary) 18%,rgba(0,0,0,.98)),color-mix(in srgb,var(--gfr-bg) 82%,rgba(0,0,0,.98)));box-shadow:inset 0 0 22px rgba(var(--gfr-stage-primary-rgb),.09),0 0 13px rgba(var(--gfr-stage-primary-rgb),.28)}
.gfr-cover{width:76px;aspect-ratio:1;border:1px solid var(--gfr-muted);display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--gfr-primary) 26%,#000),color-mix(in srgb,var(--gfr-bg) 82%,#000) 68%);font-size:28px;font-weight:900;color:var(--gfr-primary);text-shadow:0 0 8px rgba(var(--gfr-stage-primary-rgb),.4)}
.gfr-cover::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(var(--gfr-stage-primary-rgb),.07) 5px);pointer-events:none;z-index:2}
.gfr-cover::after{content:attr(data-code);position:absolute;left:4px;right:4px;bottom:3px;font-size:7px;text-align:center;color:color-mix(in srgb,var(--gfr-primary) 82%,#d7d7d7 18%);letter-spacing:.02em;z-index:3}
.gfr-cover img{width:100%;height:100%;object-fit:cover;display:block}
.gfr-frequency{font-size:clamp(11px,2.7vw,15px);font-weight:700;white-space:nowrap}.gfr-active-marker{display:inline-block;width:12px;color:var(--gfr-highlight)}
.gfr-card-main{min-width:0}.gfr-title{font-weight:900;font-size:clamp(18px,4.9vw,31px);letter-spacing:.04em;line-height:1.02;color:var(--gfr-highlight);text-shadow:0 0 7px rgba(var(--gfr-stage-primary-rgb),.22);overflow-wrap:anywhere}.gfr-subtitle{margin-top:8px;font-size:clamp(10px,2.5vw,14px);line-height:1.2;color:color-mix(in srgb,var(--gfr-primary) 82%,#d7d7d7 18%)}
.gfr-card.is-active .gfr-title,.gfr-card.is-active .gfr-frequency{color:var(--gfr-highlight)}
.gfr-player{grid-column:2/-1;display:none;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-top:1px}.gfr-card.is-active .gfr-player{display:grid}
.gfr-play{width:30px;height:26px;padding:0;border:1px solid var(--gfr-highlight);background:color-mix(in srgb,var(--gfr-bg) 78%,#000);color:var(--gfr-highlight);cursor:pointer;border-radius:2px}
.gfr-progress{height:9px;border:1px solid var(--gfr-muted);padding:1px;position:relative}.gfr-progress-fill{display:block;height:100%;width:0;background:var(--gfr-highlight);box-shadow:0 0 7px rgba(var(--gfr-stage-primary-rgb),.35)}
.gfr-time{font-size:9px;color:var(--gfr-highlight);white-space:nowrap}.gfr-now{position:absolute;right:8px;top:6px;font-size:8px;color:var(--gfr-highlight);letter-spacing:.12em;display:none}.gfr-card.is-active .gfr-now{display:block}
.gfr-audio-badge{font-size:7px;color:color-mix(in srgb,var(--gfr-primary) 60%,#424242 40%);margin-top:6px;letter-spacing:.08em}.gfr-card.is-active .gfr-audio-badge{color:color-mix(in srgb,var(--gfr-primary) 86%,#d7d7d7 14%)}
.gfr-error{margin:20px;border:1px solid #985c42;padding:14px;color:#da8e68}.gfr-page-footer{text-align:center;color:var(--gfr-muted);font-size:9px;padding:25px 14px 0;letter-spacing:.08em}

@media(max-width:520px){
  .gfr-hero{min-height:430px}
  .gfr-hero__core{height:165px}
  .gfr-hero-playing{padding-top:32px;grid-template-columns:120px 1fr;gap:12px}
  .gfr-hero-song-title{font-size:23px}.gfr-hero-subtitle{font-size:10px}
  .gfr-hero-player{grid-template-columns:34px 1fr}.gfr-hero-time{grid-column:1/-1;text-align:center}
  .gfr-card{grid-template-columns:68px 84px 1fr;gap:8px;min-height:100px;padding:8px}
  .gfr-cover{width:68px}.gfr-subtitle{margin-top:6px}.gfr-player{grid-column:1/-1;margin-top:5px}.gfr-now{top:4px}
}
@media(max-width:390px){
  .gfr-hero{margin-left:8px;margin-right:8px}
  .gfr-card{grid-template-columns:62px 72px 1fr;padding:7px}.gfr-cover{width:62px}.gfr-frequency{white-space:normal}.gfr-title{font-size:17px}.gfr-subtitle{font-size:9px}
  .gfr-hero-playing{grid-template-columns:102px 1fr}.gfr-hero-song-title{font-size:19px}.gfr-hero-frequency{font-size:12px}.gfr-library-badge{font-size:11px;padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* RC0.7 — living CRT pass -------------------------------------------------- */
:root{
  --gfr-cover-tint-opacity:.36;
  --gfr-grain-opacity:.045;
  --gfr-flicker-opacity:.028;
}

/* Keep every CRT effect inside the terminal surface. */
.gfr-crt-grain,
.gfr-crt-flicker{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:98;
}

/* Tiny local texture, shifted only once per second. This avoids a costly
   per-frame Canvas noise renderer while still keeping the phosphor alive. */
.gfr-crt-grain{
  background-image:url('../assets/noise/grain.png');
  background-repeat:repeat;
  background-size:96px 96px;
  opacity:var(--gfr-grain-opacity);
  mix-blend-mode:screen;
  animation:gfr-grain-shift 1s steps(1,end) infinite;
}

/* Rare luminance ticks. The overlay is intentionally tiny; it should be felt,
   not read as a visible blink. */
.gfr-crt-flicker{
  background:rgba(154,255,134,.12);
  opacity:0;
  mix-blend-mode:screen;
  animation:gfr-crt-flicker 7.1s steps(1,end) infinite;
}

@keyframes gfr-grain-shift{
  0%{background-position:0 0}
  20%{background-position:-31px 17px}
  40%{background-position:19px -43px}
  60%{background-position:-57px -11px}
  80%{background-position:43px 37px}
  100%{background-position:0 0}
}

@keyframes gfr-crt-flicker{
  0%,31.9%,32.7%,67.9%,68.4%,100%{opacity:0}
  32.0%{opacity:var(--gfr-flicker-opacity)}
  32.2%{opacity:.010}
  68.0%{opacity:.018}
  68.2%{opacity:var(--gfr-flicker-opacity)}
}

/* Covers remain untouched on disk. The web view first removes source colour,
   then lays the current phosphor colour over luminance with blend-mode:color. */
.gfr-cover img,
.gfr-hero-cover img,
.gfr-hero-idle-asset img{
  filter:grayscale(.88) saturate(.28) contrast(1.08) brightness(1.06);
}

.gfr-cover::before,
.gfr-hero-cover::before,
.gfr-hero-idle-asset::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:var(--gfr-primary);
  opacity:var(--gfr-cover-tint-opacity);
  mix-blend-mode:color;
  z-index:2;
}

.gfr-card.is-active .gfr-cover img,
.gfr-hero-cover img{
  filter:grayscale(.84) saturate(.32) contrast(1.10) brightness(1.12);
}
.gfr-card.is-active .gfr-cover::before,
.gfr-hero-cover::before{
  opacity:.43;
}

/* RC0.8 scanlines: the overlay sits ABOVE text, glow and artwork.
   Dark 1px grooves cut through the phosphor while a very faint green edge
   keeps the screen luminous. At 100% browser zoom this maps cleanly to CSS pixels. */
.gfr-jukebox::before{
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0,0,0,.30) 2px,
    rgba(0,0,0,.30) 3px,
    rgba(150,255,130,.035) 3px,
    rgba(150,255,130,.035) 4px
  );
  background-size:auto;
  background-repeat:repeat;
  mix-blend-mode:normal;
  opacity:.72;
}

@media(prefers-reduced-motion:reduce){
  .gfr-crt-grain,.gfr-crt-flicker{animation:none!important}
  .gfr-crt-flicker{display:none}
}
.gfr-hero-cover::after{z-index:3}

/* RC0.8 VT323 optical compensation */
.gfr-demo-note,.gfr-build-version,.gfr-audio-badge,.gfr-now,.gfr-page-footer,.gfr-hero-audio-state{letter-spacing:.06em}


/* RC1.2 — conservative phosphor readability pass ------------------------- */
:root{
  --gfr-cover-tint-opacity:.20;
}

/* Preserve the existing palette, but let more original luminance/details through. */
.gfr-cover img,
.gfr-hero-cover img,
.gfr-hero-idle-asset img{
  filter:grayscale(.72) saturate(.42) contrast(1.04) brightness(1.14);
}
.gfr-card.is-active .gfr-cover img,
.gfr-hero-cover img{
  filter:grayscale(.68) saturate(.46) contrast(1.05) brightness(1.18);
}
.gfr-card.is-active .gfr-cover::before,
.gfr-hero-cover::before{
  opacity:.25;
}

/* Compact phosphor glow: bright enough to feel emissive, not so broad that it
   washes away the dark scanline grooves above it. */
.gfr-title,
.gfr-frequency,
.gfr-hero-song-title,
.gfr-hero-frequency,
.gfr-intro h2,
.gfr-library-badge,
.gfr-hero-play,
.gfr-play{
  text-shadow:
    0 0 2px rgba(185,255,170,.55),
    0 0 6px rgba(104,200,95,.28);
}

/* Grooves remain the top-most terminal treatment and therefore cut through
   text, glow and artwork alike. Keep them narrow to preserve readability. */
.gfr-jukebox::before{
  z-index:120;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.38) 2px,
    rgba(0,0,0,.38) 3px,
    rgba(146,255,130,.025) 3px,
    rgba(146,255,130,.025) 4px
  );
  opacity:.82;
  mix-blend-mode:normal;
}


/* RC1.3 — album metadata + colour recovery + compact phosphor pass -------- */
.gfr-hero-album{
  margin-top:7px;
  font-size:10px;
  line-height:1.2;
  color:#4f944a;
  letter-spacing:.055em;
}
.gfr-card-meta{
  font-size:8px;
  color:color-mix(in srgb,var(--gfr-primary) 60%,#424242 40%);
  margin-top:6px;
  letter-spacing:.055em;
}
.gfr-card.is-active .gfr-card-meta{color:#67aa61}

/* Keep the source artwork recognisable: mild desaturation, only a whisper of
   phosphor tint, and enough luminance to survive the CRT overlay. */
:root{--gfr-cover-tint-opacity:.10}
.gfr-cover img,
.gfr-hero-cover img{
  filter:grayscale(.30) saturate(.80) contrast(1.03) brightness(1.13);
}
.gfr-hero-idle-asset img{
  filter:grayscale(.12) saturate(.90) contrast(1.03) brightness(1.10);
}
.gfr-card.is-active .gfr-cover img,
.gfr-hero-cover img{
  filter:grayscale(.24) saturate(.86) contrast(1.04) brightness(1.17);
}
.gfr-card.is-active .gfr-cover::before,
.gfr-hero-cover::before{opacity:.14}
.gfr-hero-idle-asset::after{opacity:.06}

/* Tighter glow leaves the VT323 glyph shape visible while the top-most
   scanline overlay still cuts narrow grooves through the illuminated text. */
.gfr-title,
.gfr-frequency,
.gfr-hero-song-title,
.gfr-hero-frequency,
.gfr-intro h2,
.gfr-library-badge,
.gfr-hero-play,
.gfr-play{
  text-shadow:
    0 0 1px rgba(205,255,190,.48),
    0 0 4px rgba(104,200,95,.22);
}
.gfr-jukebox::before{
  opacity:.86;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.40) 2px,
    rgba(0,0,0,.40) 3px,
    rgba(146,255,130,.022) 3px,
    rgba(146,255,130,.022) 4px
  );
}


/* RC1.4 — real collection hero + Studio signal cover renderer ------------ */
/* The idle asset is absolutely positioned; give its parent a real box so
   hiding the fallback no longer collapses the hero image to zero height. */
.gfr-hero-idle{min-height:390px}
.gfr-hero-idle-asset{inset:10px 0 18px}
.gfr-hero-idle-asset img{
  filter:none;
  opacity:1;
}
.gfr-hero-idle-asset::after{opacity:.035}

/* display_cover is pre-rendered by the exporter with the same luminance /
   autocontrast / signal-colour method used by Broadcast Studio. Do not apply
   a second grayscale/tint pass in the browser. */
.gfr-cover img,
.gfr-hero-cover img,
.gfr-card.is-active .gfr-cover img{
  filter:none;
  opacity:1;
}
.gfr-cover::before,
.gfr-hero-cover::before,
.gfr-card.is-active .gfr-cover::before{
  opacity:0;
}

/* Wider but much more transparent phosphor halo. The glyph core remains crisp
   while the scanline overlay above the page can still cut visible grooves. */
.gfr-title,
.gfr-frequency,
.gfr-hero-song-title,
.gfr-hero-frequency,
.gfr-intro h2,
.gfr-library-badge,
.gfr-hero-play,
.gfr-play{
  text-shadow:
    0 0 1px rgba(220,255,210,.30),
    0 0 7px rgba(118,220,105,.12),
    0 0 15px rgba(92,190,82,.055);
}

/* RC1.5 — Hero state polish -------------------------------------------------
   Idle: collection art behaves like a dim phosphor background, not a hard
   album card. Playing: the active song gets a little more visual weight. */
.gfr-hero-idle-asset{
  inset:10px 0 18px;
  background:radial-gradient(circle at 50% 42%,rgba(65,145,58,.08),rgba(0,0,0,.30) 68%,rgba(0,0,0,.54));
}
.gfr-hero-idle-asset img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.38;
  filter:grayscale(1) sepia(1) saturate(3.2) hue-rotate(67deg) brightness(.76) contrast(1.10);
  transform:scale(1.015);
}
.gfr-hero-idle-asset::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 43%,rgba(111,215,99,.14),transparent 54%),
    linear-gradient(rgba(2,7,2,.06),rgba(0,0,0,.28));
  opacity:.78;
  mix-blend-mode:screen;
}

/* Give the active transmission more presence once the library hero yields. */
.gfr-hero-playing{
  grid-template-columns:minmax(175px,230px) 1fr;
  gap:22px;
}
.gfr-hero-cover{
  box-shadow:0 0 24px rgba(110,230,100,.10);
}

@media(max-width:520px){
  .gfr-hero-playing{grid-template-columns:135px 1fr;gap:13px}
}
@media(max-width:390px){
  .gfr-hero-playing{grid-template-columns:112px 1fr}
}


/* RC1.6 — Layout tightening ---------------------------------------------- */
/* Idle hero: keep the full artwork inside the green frame. A little air at
   the sides is welcome; this reads more like a terminal panel than a cropped
   album cover. */
.gfr-hero-idle-asset{
  inset:14px 12px 20px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 44%,rgba(68,156,61,.10),rgba(0,0,0,.26) 64%,rgba(0,0,0,.50)),
    linear-gradient(rgba(2,7,2,.08),rgba(0,0,0,.24));
}
.gfr-hero-idle-asset img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:.54;
  transform:none;
  filter:grayscale(1) sepia(1) saturate(3.1) hue-rotate(58deg) brightness(.82) contrast(1.08);
}
.gfr-hero-idle-asset::after{
  opacity:.62;
}

/* Playing state: use more of the available hero width for the active cover
   and tighten the composition so less space is visually wasted. */
.gfr-hero-playing{
  grid-template-columns:minmax(220px,270px) minmax(0,1fr);
  gap:18px;
  padding:34px 0 24px;
  align-items:start;
}
.gfr-hero-cover{
  align-self:start;
}
.gfr-hero-meta{
  align-self:center;
  min-width:0;
}
.gfr-hero-song-title{
  margin-top:2px;
}
.gfr-hero-player{
  margin-top:8px;
}

/* Keep album metadata firmly in the text column; never let it visually creep
   into the cover area. */
.gfr-card-main,
.gfr-hero-meta{
  min-width:0;
  overflow:hidden;
}
.gfr-card-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.gfr-card-meta,
.gfr-hero-album{
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(max-width:520px){
  .gfr-hero-playing{grid-template-columns:150px minmax(0,1fr);gap:12px;padding-top:28px}
}
@media(max-width:390px){
  .gfr-hero-playing{grid-template-columns:122px minmax(0,1fr)}
}


/* RC1.7 — Responsive hero rebuild -----------------------------------------
   The hero content now participates in normal document flow. Its artwork
   decides its own height from aspect-ratio instead of being stretched inside
   a fixed/absolute middle band. This makes desktop, portrait and browser zoom
   behave consistently. */
.gfr-hero{
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:18px 18px 14px;
}
.gfr-hero__topline{
  flex:0 0 auto;
}
.gfr-hero__footer{
  position:static;
  flex:0 0 auto;
  margin-top:18px;
  left:auto;
  right:auto;
  bottom:auto;
}

.gfr-hero-idle{
  min-height:0;
  width:100%;
  margin-top:14px;
  position:relative;
}
.gfr-hero-idle-asset{
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  display:block;
  overflow:hidden;
  padding:12px;
  background:
    radial-gradient(circle at 50% 44%,rgba(68,156,61,.10),rgba(0,0,0,.26) 64%,rgba(0,0,0,.50)),
    linear-gradient(rgba(2,7,2,.08),rgba(0,0,0,.24));
}
.gfr-hero-idle-asset img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;
  margin:0 auto;
  opacity:.54;
  transform:none;
  filter:grayscale(1) sepia(1) saturate(3.1) hue-rotate(58deg) brightness(.82) contrast(1.08);
}
.gfr-hero-idle-asset::after{
  inset:12px;
}
.gfr-hero-fallback{
  margin-top:8px;
}

/* Playing state uses intrinsic square cover geometry and a responsive grid.
   The hero grows with the cover instead of limiting it with a fixed row. */
.gfr-hero-playing{
  width:100%;
  padding:28px 0 4px;
  display:grid;
  grid-template-columns:minmax(250px,42%) minmax(0,1fr);
  grid-template-rows:auto auto auto;
  gap:18px 22px;
  align-items:center;
}
.gfr-hero-playing[hidden]{display:none}
.gfr-hero-back{
  grid-column:1/-1;
  grid-row:1;
}
.gfr-hero-cover{
  grid-column:1;
  grid-row:2;
  width:100%;
  max-width:none;
  aspect-ratio:1/1;
  align-self:start;
}
.gfr-hero-meta{
  grid-column:2;
  grid-row:2;
  align-self:center;
  overflow:visible;
}
.gfr-hero-player{
  grid-column:1/-1;
  grid-row:3;
  margin-top:0;
}
.gfr-hero-audio-state{
  grid-column:1/-1;
}

/* Real cover art already contains its own typography. Remove the old demo
   ID/caption overlay entirely so no generated label can sit over artwork. */
.gfr-cover::after{
  content:none !important;
  display:none !important;
}

/* Album metadata belongs only to the information column. */
.gfr-card-main{
  position:relative;
  z-index:1;
  overflow:hidden;
}
.gfr-card-meta{
  position:static;
  z-index:auto;
  max-width:100%;
}

@media(max-width:620px){
  .gfr-hero-playing{
    grid-template-columns:minmax(150px,40%) minmax(0,1fr);
    gap:14px;
  }
}
@media(max-width:430px){
  .gfr-hero-playing{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
  }
  .gfr-hero-back{grid-column:1;grid-row:1}
  .gfr-hero-cover{
    grid-column:1;
    grid-row:2;
    width:min(78vw,290px);
    justify-self:center;
  }
  .gfr-hero-meta{
    grid-column:1;
    grid-row:3;
    width:100%;
  }
  .gfr-hero-player{
    grid-column:1;
    grid-row:4;
  }
}


/* RC1.8 — Playing hero reflow ----------------------------------------------
   One primary content row (large cover + metadata) followed by one dedicated
   transport row. The back control floats above the composition instead of
   consuming a grid row, so the cover can use the available hero area. */
.gfr-hero-playing{
  position:relative;
  grid-template-columns:minmax(300px,54%) minmax(0,1fr);
  grid-template-rows:auto auto auto;
  column-gap:24px;
  row-gap:15px;
  padding:38px 0 6px;
  align-items:center;
}
.gfr-hero-back{
  position:absolute;
  top:0;
  right:0;
  z-index:5;
  grid-column:auto;
  grid-row:auto;
}
.gfr-hero-cover{
  grid-column:1;
  grid-row:1;
  width:100%;
  aspect-ratio:1/1;
  justify-self:start;
  align-self:center;
}
.gfr-hero-meta{
  grid-column:2;
  grid-row:1;
  align-self:center;
  padding-right:4px;
}
.gfr-hero-player{
  grid-column:1/-1;
  grid-row:2;
  width:100%;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  margin:0;
}
.gfr-hero-audio-state{
  grid-column:1/-1;
  grid-row:3;
  margin-top:-5px;
}

/* Hardware-like transport control: the running state is represented by a
   solid square while keeping the same pause behaviour underneath. */
.gfr-hero-play,
.gfr-play{
  display:grid;
  place-items:center;
  line-height:1;
  font-family:Consolas,'Courier New',monospace;
  font-weight:700;
}
.gfr-hero-play{
  width:38px;
  height:38px;
  padding:0;
}
.gfr-play{
  width:32px;
  height:30px;
}

@media(max-width:620px){
  .gfr-hero-playing{
    grid-template-columns:minmax(180px,48%) minmax(0,1fr);
    column-gap:14px;
    padding-top:36px;
  }
}
@media(max-width:430px){
  .gfr-hero-playing{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    padding-top:38px;
  }
  .gfr-hero-back{top:0;right:0}
  .gfr-hero-cover{
    grid-column:1;
    grid-row:1;
    width:min(86vw,320px);
    justify-self:center;
  }
  .gfr-hero-meta{
    grid-column:1;
    grid-row:2;
    width:100%;
  }
  .gfr-hero-player{
    grid-column:1;
    grid-row:3;
  }
  .gfr-hero-audio-state{
    grid-column:1;
    grid-row:4;
  }
}


/* RC1.9 — Hero luminance-as-alpha experiment ------------------------------
   The exported idle hero image now already carries transparency derived from
   luminance. Keep the browser treatment light so the signal can float in the
   panel instead of becoming a heavy opaque block. */
.gfr-hero-idle-asset img{
  filter:none;
  opacity:.88;
}
.gfr-hero-idle-asset::after{
  opacity:.44;
  background:
    radial-gradient(circle at 50% 43%,rgba(111,215,99,.10),transparent 56%),
    linear-gradient(rgba(2,7,2,.03),rgba(0,0,0,.18));
}


/* RC2.0 — Signal brightness pass -------------------------------------------
   Lift the perceived brightness of the idle hero so it sits closer to the
   luminous text, while still remaining slightly subordinate. */
.gfr-hero-idle-asset img{
  opacity:.96;
}
.gfr-hero-idle-asset::after{
  opacity:.34;
}


/* RC2.3 — Authored alpha hero pass -----------------------------------------
   A manually authored Web Hero Override is treated as the final RGBA artwork.
   No luminance remap, grayscale, inversion or rectangular overlay is applied.
   Only a tiny brightness lift and soft phosphor halo are added in the browser. */
.gfr-hero-idle-asset.is-authored-alpha{
  background:transparent;
}
.gfr-hero-idle-asset.is-authored-alpha img{
  filter:
    brightness(1.05)
    drop-shadow(0 0 5px rgba(var(--gfr-stage-primary-rgb),.16))
    drop-shadow(0 0 16px rgba(var(--gfr-stage-primary-rgb),.07));
  opacity:.92;
}
.gfr-hero-idle-asset.is-authored-alpha::after{
  display:none;
}

/* Generated fallback hero keeps the existing screen treatment. */
.gfr-hero-idle-asset.is-generated-signal img{
  opacity:.96;
}


/* RC2.7 — Mobile CRT normalization -----------------------------------------
   High-DPI phones rasterize 1 CSS-pixel scanline grooves across multiple
   physical pixels, which makes the desktop pattern look harder/coarser.
   Desktop remains untouched; mobile gets a finer, softer groove pattern. */
@media (max-width: 760px) {
  .gfr-jukebox::before {
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 1.5px,
      rgba(0,0,0,.27) 1.5px,
      rgba(0,0,0,.27) 2px,
      rgba(146,255,130,.014) 2px,
      rgba(146,255,130,.014) 3px
    );
    opacity: .70;
  }

  .gfr-crt-grain {
    opacity: .032;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .gfr-jukebox::before {
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 1.25px,
      rgba(0,0,0,.22) 1.25px,
      rgba(0,0,0,.22) 1.75px,
      rgba(146,255,130,.012) 1.75px,
      rgba(146,255,130,.012) 2.75px
    );
    opacity: .64;
  }
}


/* RC2.8 — clean loading state + build diagnostics ------------------------ */
.gfr-hero__right{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.gfr-info-button{
  width:24px;
  height:24px;
  padding:0;
  border:1px solid var(--gfr-muted);
  background:#041004;
  color:#63b85d;
  border-radius:2px;
  cursor:pointer;
  line-height:1;
  font-size:16px;
}
.gfr-info-button:hover,
.gfr-info-button:focus-visible{
  color:var(--gfr-highlight);
  border-color:var(--gfr-highlight);
  outline:none;
  box-shadow:0 0 8px rgba(167,245,154,.14);
}

.gfr-hero-loading{
  min-height:390px;
  display:grid;
  place-items:center;
}
.gfr-loading-copy{
  color:color-mix(in srgb,var(--gfr-primary) 78%,#d7d7d7 22%);
  font-size:15px;
  letter-spacing:.12em;
  text-shadow:
    0 0 1px rgba(220,255,210,.22),
    0 0 9px rgba(104,200,95,.08);
}
.gfr-loading-pulse{
  display:inline-block;
  margin-right:7px;
  animation:gfr-loading-pulse 1.1s steps(1,end) infinite;
}
@keyframes gfr-loading-pulse{
  0%,49%{opacity:1}
  50%,100%{opacity:.18}
}

.gfr-page-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.gfr-build-footnote{
  border:0;
  background:transparent;
  padding:0;
  color:#264d25;
  font:inherit;
  font-size:8px;
  letter-spacing:.07em;
  cursor:pointer;
}
.gfr-build-footnote:hover,
.gfr-build-footnote:focus-visible{
  color:#4c8c48;
  outline:none;
}

.gfr-build-panel{
  position:fixed;
  inset:0;
  z-index:500;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.68);
  padding:18px;
}
.gfr-build-panel[hidden]{display:none}
.gfr-build-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgba(0,0,0,.22) 2px 3px,
    transparent 3px 4px
  );
}
.gfr-build-panel__title,
.gfr-build-panel__body,
.gfr-build-panel__close{
  position:relative;
  z-index:2;
}
.gfr-build-panel__title{
  width:min(92vw,420px);
  padding:16px 18px 4px;
  border:1px solid var(--gfr-muted);
  border-bottom:0;
  background:#041004;
  color:var(--gfr-highlight);
  font-size:21px;
  letter-spacing:.08em;
}
.gfr-build-panel__body{
  width:min(92vw,420px);
  border:1px solid var(--gfr-muted);
  border-top:0;
  background:#041004;
  padding:10px 18px 18px;
  box-shadow:0 0 28px rgba(75,180,68,.11);
}
.gfr-build-panel__close{
  position:absolute;
  top:calc(50% - 220px);
  right:calc(50% - 205px);
  width:26px;
  height:26px;
  border:1px solid var(--gfr-muted);
  background:#071207;
  color:var(--gfr-highlight);
  cursor:pointer;
}
.gfr-build-row{
  display:grid;
  grid-template-columns:minmax(110px,.9fr) 1.4fr;
  gap:12px;
  padding:5px 0;
  border-bottom:1px solid rgba(70,130,65,.18);
  font-size:11px;
}
.gfr-build-row span{color:#3e753a}
.gfr-build-row strong{
  color:#74c96d;
  font-weight:400;
  overflow-wrap:anywhere;
}

@media(max-width:520px){
  .gfr-info-button{width:22px;height:22px;font-size:14px}
  .gfr-build-panel__close{
    top:28px;
    right:28px;
  }
  .gfr-build-row{grid-template-columns:1fr;gap:2px}
}
@media(prefers-reduced-motion:reduce){
  .gfr-loading-pulse{animation:none}
}


/* RC2.9 — Build Info dialog layout fix -------------------------------------
   Keep the info window as one compact centered unit. RC2.8 placed title/body
   as separate children of the full-screen grid, which allowed the rows to
   stretch across viewport height. */
.gfr-build-panel{
  display:grid;
  place-items:center;
  align-content:center;
}
.gfr-build-panel[hidden]{display:none}

.gfr-build-dialog{
  position:relative;
  z-index:2;
  width:min(92vw,420px);
  max-height:min(84vh,620px);
  display:flex;
  flex-direction:column;
  background:#041004;
  border:1px solid var(--gfr-muted);
  box-shadow:0 0 28px rgba(75,180,68,.11);
  overflow:hidden;
}

.gfr-build-dialog__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(70,130,65,.24);
}

.gfr-build-panel__title{
  width:auto;
  flex:1 1 auto;
  border:0;
  padding:14px 16px 10px;
  background:transparent;
}

.gfr-build-panel__body{
  width:auto;
  border:0;
  padding:10px 16px 16px;
  background:transparent;
  box-shadow:none;
  overflow:auto;
}

.gfr-build-panel__close{
  position:static;
  flex:0 0 auto;
  width:28px;
  height:28px;
  margin:8px 10px 8px 0;
}

@media(max-width:520px){
  .gfr-build-dialog{
    width:min(94vw,420px);
    max-height:82vh;
  }
  .gfr-build-panel__close{
    position:static;
    top:auto;
    right:auto;
  }
}


/* RC2.10 — permanent station hero + inline transmission cards -------------
   The GODFAZA RADIO collection hero remains the stable page identity while
   the selected song expands exactly where the listener tapped it. This also
   removes the disruptive mobile jump back to the top of the page. */

/* Normal library cards get a little more breathing room so authored covers
   remain readable even before a transmission is selected. */
.gfr-card{
  min-height:128px;
  grid-template-columns:90px 104px minmax(0,1fr);
  gap:13px;
  padding:10px;
}
.gfr-cover{
  width:90px;
  box-shadow:
    0 0 8px rgba(110,230,100,.10),
    inset 0 0 10px rgba(110,230,100,.035);
}

/* Exported display_cover assets are already authored by Broadcast Studio.
   Only lift their emitted luminance here; do not recolour or invert them. */
.gfr-cover img{
  filter:brightness(1.18) contrast(1.045);
  opacity:1;
}
.gfr-cover::before{opacity:0}

/* Selected transmission: roughly double-height card, large artwork, metadata
   beside it and the existing player controls on their own lower row. */
.gfr-card.is-active{
  min-height:230px;
  grid-template-columns:176px 112px minmax(0,1fr);
  grid-template-rows:minmax(136px,auto) auto;
  align-items:center;
  align-content:center;
  gap:14px 16px;
  padding:14px 13px;
  background:
    radial-gradient(circle at 18% 48%,rgba(71,154,64,.12),transparent 34%),
    linear-gradient(90deg,rgba(12,29,12,.99),rgba(4,12,4,.98));
}
.gfr-card.is-active .gfr-cover{
  width:176px;
  grid-row:1 / span 2;
  align-self:center;
  justify-self:start;
  border-color:#5faa58;
  box-shadow:
    0 0 13px rgba(132,240,120,.22),
    0 0 28px rgba(92,190,82,.10),
    inset 0 0 12px rgba(132,240,120,.04);
}
.gfr-card.is-active .gfr-cover img{
  filter:brightness(1.30) contrast(1.055);
}
.gfr-card.is-active .gfr-frequency{
  align-self:end;
  padding-bottom:6px;
}
.gfr-card.is-active .gfr-card-main{
  align-self:center;
  padding-bottom:2px;
}
.gfr-card.is-active .gfr-title{
  font-size:clamp(25px,5.8vw,37px);
}
.gfr-card.is-active .gfr-player{
  grid-column:2 / -1;
  align-self:start;
  margin-top:2px;
}
.gfr-card.is-active .gfr-now{
  top:9px;
  right:10px;
}

/* The hero-playing markup stays as a compatibility shell for older code and
   future broadcast modes, but RC2.10 never exposes it during song selection. */
.gfr-hero-playing{display:none!important}

@media(max-width:520px){
  .gfr-card{
    min-height:116px;
    grid-template-columns:78px 84px minmax(0,1fr);
    gap:9px;
    padding:9px;
  }
  .gfr-cover{width:78px}

  .gfr-card.is-active{
    min-height:216px;
    grid-template-columns:136px minmax(0,1fr);
    grid-template-rows:auto auto auto;
    align-content:center;
    gap:8px 12px;
    padding:12px 11px;
  }
  .gfr-card.is-active .gfr-cover{
    width:136px;
    grid-column:1;
    grid-row:1 / span 2;
    align-self:center;
  }
  .gfr-card.is-active .gfr-frequency{
    grid-column:2;
    align-self:end;
    padding-bottom:2px;
    white-space:normal;
  }
  .gfr-card.is-active .gfr-card-main{
    grid-column:2;
    align-self:start;
  }
  .gfr-card.is-active .gfr-title{
    font-size:clamp(22px,7vw,30px);
  }
  .gfr-card.is-active .gfr-player{
    grid-column:1 / -1;
    grid-row:3;
    margin-top:4px;
  }
}

@media(max-width:390px){
  .gfr-card{
    grid-template-columns:72px 74px minmax(0,1fr);
  }
  .gfr-cover{width:72px}
  .gfr-card.is-active{
    grid-template-columns:120px minmax(0,1fr);
  }
  .gfr-card.is-active .gfr-cover{width:120px}
  .gfr-card.is-active .gfr-title{font-size:22px}
}


/* RC2.12 — cinematic library crops + readable build line + seekable transport
   Default cards use the middle strip of the authored square artwork. The active
   transmission still reveals the larger square cover. */
.gfr-demo-note,
.gfr-build-version{
  font-size:clamp(10px,2.4vw,13px);
  line-height:1.15;
}
.gfr-build-version{margin-top:5px}

.gfr-card:not(.is-active){
  min-height:132px;
  grid-template-columns:244px minmax(0,1fr);
  gap:24px;
  padding:8px 14px 8px 8px;
  align-items:center;
}
.gfr-card:not(.is-active) .gfr-cover{
  width:244px;
  height:112px;
  aspect-ratio:auto;
  align-self:center;
  justify-self:start;
}
.gfr-card:not(.is-active) .gfr-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}
.gfr-card:not(.is-active) .gfr-frequency{
  position:absolute;
  left:auto;
  right:18px;
  bottom:16px;
  font-size:clamp(11px,2.6vw,15px);
  text-align:right;
  color:#9bed90;
  text-shadow:0 0 8px rgba(104,200,95,.25);
}
.gfr-card:not(.is-active) .gfr-card-main{
  grid-column:2;
  align-self:center;
  padding:2px 96px 18px 0;
}

/* Use the existing expanded-card composition, but spend more of its available
   height on the square art while keeping the current now-playing layout.
   Default library cards are also reframed so the cropped preview reads larger,
   more centered, and less thumbnail-like. */
.gfr-card.is-active{
  min-height:278px;
  grid-template-columns:244px 112px minmax(0,1fr);
  padding:12px;
  gap:14px 16px;
  align-content:center;
}
.gfr-card.is-active .gfr-cover{
  width:244px;
  align-self:center;
}

.gfr-progress{
  cursor:ew-resize;
  touch-action:none;
  user-select:none;
  z-index:5;
  pointer-events:auto;
}
.gfr-progress::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-8px;
  bottom:-8px;
}
.gfr-progress:hover,
.gfr-progress.is-seeking{
  border-color:var(--gfr-highlight);
  box-shadow:0 0 8px rgba(167,245,154,.24);
}

@media(max-width:520px){
  .gfr-card:not(.is-active){
    min-height:114px;
    grid-template-columns:136px minmax(0,1fr);
    gap:12px;
    padding:7px 10px 7px 7px;
    align-items:center;
  }
  .gfr-card:not(.is-active) .gfr-cover{
    width:136px;
    height:94px;
  }
  .gfr-card:not(.is-active) .gfr-frequency{
    left:auto;
    right:12px;
    bottom:12px;
    font-size:12px;
    text-align:right;
  }
  .gfr-card:not(.is-active) .gfr-card-main{
    padding:2px 72px 14px 0;
  }
  .gfr-card.is-active{
    min-height:208px;
    grid-template-columns:136px minmax(0,1fr);
    padding:10px;
  }
  .gfr-card.is-active .gfr-cover{width:136px}
}

@media(max-width:390px){
  .gfr-card:not(.is-active){
    grid-template-columns:120px minmax(0,1fr);
  }
  .gfr-card:not(.is-active) .gfr-cover{
    width:120px;
    height:82px;
  }
  .gfr-card:not(.is-active) .gfr-frequency{
    left:auto;
    right:10px;
    bottom:11px;
    font-size:11px;
  }
  .gfr-card.is-active{grid-template-columns:120px minmax(0,1fr)}
  .gfr-card.is-active .gfr-cover{width:120px}
}


/* RC2.16 — native seek hit area ------------------------------------------ */
.gfr-progress{
  overflow:visible;
}
.gfr-seek{
  position:absolute;
  z-index:5;
  left:-4px;
  right:-4px;
  top:-10px;
  width:calc(100% + 8px);
  height:29px;
  margin:0;
  padding:0;
  opacity:0;
  cursor:ew-resize;
  touch-action:none;
  -webkit-appearance:none;
  appearance:none;
}
.gfr-seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:29px;
  cursor:ew-resize;
}
.gfr-seek::-moz-range-thumb{
  width:18px;
  height:29px;
  border:0;
  background:transparent;
  cursor:ew-resize;
}
.gfr-progress:focus-within{
  border-color:var(--gfr-highlight);
  box-shadow:0 0 8px rgba(167,245,154,.24);
}


/* RC2.17 — terminal login / boot sequence ---------------------------------
   A short in-world startup pass runs before the station hero is revealed.
   It is decorative rather than an authentication gate and never blocks input
   after the sequence completes. */
.gfr-boot{
  position:absolute;
  inset:10px 12px 12px;
  z-index:20;
  display:grid;
  place-items:center;
  padding:14px;
  background:radial-gradient(circle at 50% 44%,rgba(2,9,2,.13),rgba(1,4,1,.04) 56%,rgba(0,0,0,.11) 100%);
  color:var(--gfr-primary);
  opacity:1;
  visibility:visible;
  transition:opacity .22s ease,visibility .22s linear;
}
.gfr-boot.is-leaving{opacity:0;visibility:hidden}
.gfr-boot__terminal{
  width:min(100%,620px);
  min-height:320px;
  padding:22px clamp(18px,5vw,36px) 28px;
  border:1px solid rgba(104,200,95,.20);
  background:linear-gradient(rgba(4,12,4,.60),rgba(1,5,1,.68));
  box-shadow:inset 0 0 28px rgba(93,194,84,.045),0 0 18px rgba(64,160,57,.05);
  backdrop-filter:blur(.7px);
  position:relative;
  overflow:hidden;
  text-shadow:0 0 8px rgba(104,200,95,.32);
}
.gfr-boot__terminal::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.24) 2px 3px);
  opacity:.68;
}
.gfr-boot__title,.gfr-boot__sub,.gfr-boot__login,.gfr-boot__log,.gfr-boot__welcome{position:relative;z-index:1}
.gfr-boot__title{font-size:clamp(23px,5vw,36px);letter-spacing:.045em;color:var(--gfr-highlight);margin-bottom:28px}
.gfr-boot__sub{font-size:clamp(11px,2.5vw,15px);margin-bottom:34px;color:#79d370;letter-spacing:.055em}
.gfr-boot__login{
  display:grid;
  grid-template-columns:72px minmax(0,240px);
  gap:8px 12px;
  align-items:center;
  font-size:clamp(13px,3vw,18px);
}
.gfr-boot__label{color:#70c968;text-align:right}
.gfr-boot__field{
  min-height:27px;
  border:1px solid rgba(var(--gfr-stage-primary-rgb),.68);
  padding:2px 7px;
  color:var(--gfr-highlight);
  background:color-mix(in srgb,var(--gfr-primary) 8%,rgba(0,0,0,.64));
}
.gfr-boot__field::after,.gfr-boot__log.is-typing::after{
  content:"▮";
  margin-left:2px;
  animation:gfr-boot-cursor .58s steps(1,end) infinite;
}
.gfr-boot__status{color:#8de183}
.gfr-boot__log{margin:25px 0 0 84px;min-height:52px;font-size:clamp(11px,2.4vw,14px);line-height:1.45;color:#69bd62;white-space:pre-line}
.gfr-boot__welcome{margin:16px 0 0 84px;font-size:clamp(12px,2.7vw,16px);letter-spacing:.16em;color:var(--gfr-highlight)}
.gfr-jukebox.is-booting .gfr-intro,
.gfr-jukebox.is-booting .gfr-song-list,
.gfr-jukebox.is-booting .gfr-page-footer,
.gfr-jukebox.is-booting .gfr-build-panel,
.gfr-jukebox.is-booting .gfr-info-button{visibility:hidden}
.gfr-jukebox.is-booting .gfr-hero{overflow:hidden}
.gfr-jukebox.is-booting .gfr-hero__topline,
.gfr-jukebox.is-booting .gfr-hero__footer,
.gfr-jukebox.is-booting .gfr-hero-idle,
.gfr-jukebox.is-booting .gfr-hero-fallback,
.gfr-jukebox.is-booting .gfr-hero-idle-asset{opacity:.40;filter:saturate(1)}
.gfr-jukebox.gfr-boot-flash{animation:gfr-boot-flash .28s steps(1,end) 1}
@keyframes gfr-boot-cursor{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes gfr-boot-flash{
  0%{filter:brightness(1)}
  18%{filter:brightness(.55)}
  34%{filter:brightness(1.35)}
  49%{filter:brightness(.78)}
  100%{filter:brightness(1)}
}
@media(max-width:520px){
  .gfr-boot{inset:8px 8px 10px;padding:8px}
  .gfr-boot__terminal{min-height:290px;padding:18px 16px 22px}
  .gfr-boot__title{margin-bottom:22px}
  .gfr-boot__sub{margin-bottom:26px}
  .gfr-boot__login{grid-template-columns:58px minmax(0,1fr);gap:7px 9px}
  .gfr-boot__log,.gfr-boot__welcome{margin-left:67px}
}
@media(prefers-reduced-motion:reduce){
  .gfr-boot__field::after,.gfr-boot__log.is-typing::after{animation:none}
  .gfr-jukebox.gfr-boot-flash{animation:none}
}


/* RC2.22 — Web Stage Gray-First Calibration -------------------------------
   Values authored in Broadcast Studio/web_stage.json now drive the browser
   runtime. The existing CSS remains the fallback when no Web Stage file exists. */
:root{
  --gfr-stage-primary-rgb:104,200,95;
  --gfr-stage-scanlines:.32;
  --gfr-stage-grain:.12;
  --gfr-stage-flicker:.10;
  --gfr-stage-vignette:.18;
  --gfr-stage-screen-glow:.20;
  --gfr-stage-cover-glow:.30;
  --gfr-stage-cover-desat:1;
  --gfr-stage-cover-tint:1;
  --gfr-stage-cover-lift:1.18;
  --gfr-stage-cover-contrast:1.16;
  --gfr-stage-overlay-opacity:.60;
  --gfr-stage-hero-visibility:.40;
}
.gfr-jukebox{
  background:radial-gradient(circle at 50% 5%,color-mix(in srgb,var(--gfr-primary) 12%,#000) 0,var(--gfr-bg) 43%,#000 100%);
  box-shadow:inset 0 0 calc(12px + 42px * var(--gfr-stage-screen-glow)) rgba(var(--gfr-stage-primary-rgb),calc(.03 + .18 * var(--gfr-stage-screen-glow)));
}
.gfr-jukebox::before{
  opacity:calc(.10 + .90 * var(--gfr-stage-scanlines));
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,calc(.12 + .30 * var(--gfr-stage-scanlines))) 2px,rgba(0,0,0,calc(.12 + .30 * var(--gfr-stage-scanlines))) 3px,rgba(var(--gfr-stage-primary-rgb),calc(.01 + .05 * var(--gfr-stage-scanlines))) 3px,rgba(var(--gfr-stage-primary-rgb),calc(.01 + .05 * var(--gfr-stage-scanlines))) 4px);
}
.gfr-jukebox::after{opacity:calc(.18 + .82 * var(--gfr-stage-vignette))}
.gfr-crt-grain{opacity:calc(.008 + .115 * var(--gfr-stage-grain));filter:saturate(0)}
.gfr-crt-flicker{background:rgba(var(--gfr-stage-primary-rgb),.13);--gfr-flicker-opacity:calc(.004 + .085 * var(--gfr-stage-flicker))}
.gfr-cover img,.gfr-hero-cover img{
  filter:grayscale(var(--gfr-stage-cover-desat)) saturate(calc(1 - .72 * var(--gfr-stage-cover-desat))) contrast(var(--gfr-stage-cover-contrast)) brightness(var(--gfr-stage-cover-lift));
}
.gfr-cover::before,.gfr-hero-cover::before{background:var(--gfr-primary);opacity:calc(.08 + .40 * var(--gfr-stage-cover-tint))}
.gfr-cover{box-shadow:0 0 calc(5px + 26px * var(--gfr-stage-cover-glow)) rgba(var(--gfr-stage-primary-rgb),calc(.05 + .25 * var(--gfr-stage-cover-glow)))}
.gfr-card.is-active .gfr-cover{box-shadow:0 0 calc(8px + 34px * var(--gfr-stage-cover-glow)) rgba(var(--gfr-stage-primary-rgb),calc(.08 + .34 * var(--gfr-stage-cover-glow)))}
.gfr-boot{background:radial-gradient(circle at 50% 44%,rgba(var(--gfr-stage-primary-rgb),calc(.01 + .08 * var(--gfr-stage-overlay-opacity))),rgba(1,4,1,calc(.02 + .10 * var(--gfr-stage-overlay-opacity))) 56%,rgba(0,0,0,calc(.05 + .25 * var(--gfr-stage-overlay-opacity))) 100%)}
.gfr-boot__terminal{background:linear-gradient(rgba(var(--gfr-stage-primary-rgb),calc(.015 + .08 * var(--gfr-stage-overlay-opacity))),color-mix(in srgb,var(--gfr-bg) calc(82% + 10% * var(--gfr-stage-overlay-opacity)), transparent));border-color:rgba(var(--gfr-stage-primary-rgb),.28)}
.gfr-jukebox.is-booting .gfr-hero__topline,.gfr-jukebox.is-booting .gfr-hero__footer,.gfr-jukebox.is-booting .gfr-hero-idle,.gfr-jukebox.is-booting .gfr-hero-fallback,.gfr-jukebox.is-booting .gfr-hero-idle-asset{opacity:calc(.12 + .72 * var(--gfr-stage-hero-visibility))}


/* RC2.25 — Web geometry + CRT calibration ---------------------------------
   Final overrides for Studio/Web parity: theme-clean boot copy, procedural
   grain (no external noise asset dependency), slightly stronger flicker, and
   taller library cards with a centered crop like the Studio Web Terminal. */
.gfr-boot__sub,
.gfr-boot__label,
.gfr-boot__status,
.gfr-boot__log{
  color:color-mix(in srgb,var(--gfr-primary) 86%,var(--gfr-highlight) 14%);
  text-shadow:0 0 8px rgba(var(--gfr-stage-primary-rgb),.24);
}
.gfr-boot__terminal{ text-shadow:0 0 8px rgba(var(--gfr-stage-primary-rgb),.32); }

/* RC2.26 — CRT motion calibration. Grain is intentionally visible at medium
   values and moves in small, irregular jumps. Soft-light lets both bright and
   dark speckles survive instead of the old screen-only wash. */
.gfr-crt-grain{
  background-image:
    radial-gradient(circle at 19% 31%, rgba(255,255,255,.72) 0 .42px, transparent .72px),
    radial-gradient(circle at 73% 61%, rgba(var(--gfr-stage-primary-rgb),.78) 0 .48px, transparent .78px),
    radial-gradient(circle at 46% 83%, rgba(0,0,0,.92) 0 .52px, transparent .82px),
    radial-gradient(circle at 88% 17%, rgba(255,255,255,.38) 0 .34px, transparent .64px);
  background-size:4px 4px,7px 7px,9px 9px,13px 13px;
  opacity:calc(.025 + .34 * var(--gfr-stage-grain));
  mix-blend-mode:soft-light;
  animation:gfr-grain-shift .64s steps(1,end) infinite;
}

/* More frequent low-amplitude phosphor ticks. The authored Flicker Strength
   now controls an effect that is actually perceptible without looking like a
   broken monitor. */
.gfr-crt-flicker{
  background:rgba(var(--gfr-stage-primary-rgb),.22);
  --gfr-flicker-opacity:calc(.008 + .16 * var(--gfr-stage-flicker));
  animation:gfr-crt-flicker-live 3.2s steps(1,end) infinite;
}
@keyframes gfr-crt-flicker-live{
  0%,13%,18%,37%,42%,61%,68%,86%,100%{opacity:0}
  14%{opacity:calc(var(--gfr-flicker-opacity) * .38)}
  15%{opacity:calc(var(--gfr-flicker-opacity) * .12)}
  38%{opacity:calc(var(--gfr-flicker-opacity) * .58)}
  39%{opacity:calc(var(--gfr-flicker-opacity) * .18)}
  62%{opacity:calc(var(--gfr-flicker-opacity) * .30)}
  63%{opacity:calc(var(--gfr-flicker-opacity) * .72)}
  64%{opacity:calc(var(--gfr-flicker-opacity) * .10)}
  87%{opacity:calc(var(--gfr-flicker-opacity) * .46)}
}

/* Studio-like library card proportions. */
.gfr-card:not(.is-active){
  min-height:150px;
  grid-template-columns:244px minmax(0,1fr);
  gap:28px;
  padding:9px 16px 9px 9px;
}
.gfr-card:not(.is-active) .gfr-cover{
  width:244px;
  height:132px;
  align-self:center;
  justify-self:start;
  overflow:hidden;
}
.gfr-card:not(.is-active) .gfr-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center !important;
}
.gfr-card:not(.is-active) .gfr-card-main{
  align-self:center;
  padding:2px 96px 20px 0;
}
.gfr-card:not(.is-active) .gfr-frequency{
  right:18px;
  bottom:17px;
  color:var(--gfr-highlight);
  text-shadow:0 0 8px rgba(var(--gfr-stage-primary-rgb),.25);
}

@media(max-width:520px){
  .gfr-card:not(.is-active){min-height:122px;grid-template-columns:136px minmax(0,1fr);gap:13px;padding:7px 10px 7px 7px}
  .gfr-card:not(.is-active) .gfr-cover{width:136px;height:100px}
  .gfr-card:not(.is-active) .gfr-cover img{object-position:center center !important}
}
@media(max-width:390px){
  .gfr-card:not(.is-active){min-height:112px;grid-template-columns:120px minmax(0,1fr)}
  .gfr-card:not(.is-active) .gfr-cover{width:120px;height:90px}
}


/* RC2.27 — Web-only CRT finalization --------------------------------------
   Keep the calibrated card geometry/theme intact. This pass only makes the
   authored CRT controls visibly useful in-browser and hard-locks the default
   cover crop to the vertical centre. */

/* Vignette: drive the darkness itself from the authored value instead of
   merely fading a fixed weak gradient in/out. */
.gfr-jukebox::after{
  opacity:1;
  background:radial-gradient(
    ellipse at 50% 46%,
    transparent 42%,
    rgba(0,0,0,calc(.05 + .16 * var(--gfr-stage-vignette))) 67%,
    rgba(0,0,0,calc(.24 + .62 * var(--gfr-stage-vignette))) 100%
  );
}

/* Grain: high-frequency mixed bright/dark phosphor texture. The authored
   value controls alpha directly and the pattern shifts often enough to read
   as living CRT noise rather than a static texture. */
.gfr-crt-grain{
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(255,255,255,.72) 0 .45px, transparent .55px 3.5px),
    repeating-radial-gradient(circle at 69% 71%, rgba(var(--gfr-stage-primary-rgb),.72) 0 .42px, transparent .62px 4.7px),
    repeating-radial-gradient(circle at 41% 57%, rgba(0,0,0,.94) 0 .48px, transparent .66px 5.8px);
  background-size:7px 7px,11px 11px,13px 13px;
  opacity:calc(.015 + .46 * var(--gfr-stage-grain));
  mix-blend-mode:overlay;
  animation:gfr-grain-live .28s steps(1,end) infinite;
}
@keyframes gfr-grain-live{
  0%{background-position:0 0,0 0,0 0}
  20%{background-position:-3px 4px,5px -2px,-7px 3px}
  40%{background-position:5px -3px,-4px 6px,2px -6px}
  60%{background-position:-6px -2px,3px 4px,7px 1px}
  80%{background-position:2px 6px,-7px -3px,-2px 5px}
  100%{background-position:0 0,0 0,0 0}
}

/* Flicker: combine a soft theme-colour pulse with a tiny global brightness
   modulation. This remains subtle at low values but is obvious near 100%. */
.gfr-crt-flicker{
  background:rgba(var(--gfr-stage-primary-rgb),.18);
  --gfr-flicker-opacity:calc(.006 + .20 * var(--gfr-stage-flicker));
  animation:gfr-crt-flicker-final 2.35s steps(1,end) infinite;
}
.gfr-jukebox{
  animation:gfr-terminal-brightness 4.1s steps(1,end) infinite;
}
@keyframes gfr-crt-flicker-final{
  0%,8%,12%,29%,33%,52%,58%,75%,81%,100%{opacity:0}
  9%{opacity:calc(var(--gfr-flicker-opacity) * .34)}
  10%{opacity:calc(var(--gfr-flicker-opacity) * .10)}
  30%{opacity:calc(var(--gfr-flicker-opacity) * .62)}
  31%{opacity:calc(var(--gfr-flicker-opacity) * .18)}
  53%{opacity:calc(var(--gfr-flicker-opacity) * .28)}
  54%{opacity:calc(var(--gfr-flicker-opacity) * .80)}
  55%{opacity:calc(var(--gfr-flicker-opacity) * .08)}
  76%{opacity:calc(var(--gfr-flicker-opacity) * .44)}
  77%{opacity:calc(var(--gfr-flicker-opacity) * .16)}
}
@keyframes gfr-terminal-brightness{
  0%,24%,27%,63%,66%,100%{filter:brightness(1)}
  25%{filter:brightness(calc(1 - .035 * var(--gfr-stage-flicker)))}
  26%{filter:brightness(calc(1 + .025 * var(--gfr-stage-flicker)))}
  64%{filter:brightness(calc(1 + .045 * var(--gfr-stage-flicker)))}
  65%{filter:brightness(calc(1 - .022 * var(--gfr-stage-flicker)))}
}

/* Library artwork framing: preserve current card proportions, crop square
   artwork symmetrically from top/bottom and keep the focal centre stable. */
.gfr-card:not(.is-active) .gfr-cover{
  display:block;
  overflow:hidden;
}
.gfr-card:not(.is-active) .gfr-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover !important;
  object-position:50% 50% !important;
  transform:none !important;
}

@media(prefers-reduced-motion:reduce){
  .gfr-crt-grain,.gfr-crt-flicker,.gfr-jukebox{animation:none!important}
}


/* RC2.28 — CRT balance pass -------------------------------------------------
   Keep the procedural grain character from RC2.27, but reduce its contrast so
   artwork remains legible. Flicker gets stronger short brightness ticks rather
   than more persistent colour wash. */
.gfr-crt-grain{
  opacity:calc(.006 + .20 * var(--gfr-stage-grain));
  mix-blend-mode:soft-light;
}
.gfr-crt-flicker{
  background:rgba(var(--gfr-stage-primary-rgb),.16);
  --gfr-flicker-opacity:calc(.010 + .26 * var(--gfr-stage-flicker));
  animation:gfr-crt-flicker-balanced 2.05s steps(1,end) infinite;
}
.gfr-jukebox{
  animation:gfr-terminal-brightness-balanced 2.75s steps(1,end) infinite;
}
@keyframes gfr-crt-flicker-balanced{
  0%,11%,15%,35%,39%,57%,62%,79%,84%,100%{opacity:0}
  12%{opacity:calc(var(--gfr-flicker-opacity) * .50)}
  13%{opacity:calc(var(--gfr-flicker-opacity) * .14)}
  36%{opacity:calc(var(--gfr-flicker-opacity) * .74)}
  37%{opacity:calc(var(--gfr-flicker-opacity) * .16)}
  58%{opacity:calc(var(--gfr-flicker-opacity) * .42)}
  59%{opacity:calc(var(--gfr-flicker-opacity) * .90)}
  60%{opacity:calc(var(--gfr-flicker-opacity) * .10)}
  80%{opacity:calc(var(--gfr-flicker-opacity) * .62)}
  81%{opacity:calc(var(--gfr-flicker-opacity) * .12)}
}
@keyframes gfr-terminal-brightness-balanced{
  0%,17%,21%,46%,50%,71%,75%,100%{filter:brightness(1)}
  18%{filter:brightness(calc(1 - .095 * var(--gfr-stage-flicker)))}
  19%{filter:brightness(calc(1 + .060 * var(--gfr-stage-flicker)))}
  47%{filter:brightness(calc(1 + .075 * var(--gfr-stage-flicker)))}
  48%{filter:brightness(calc(1 - .050 * var(--gfr-stage-flicker)))}
  72%{filter:brightness(calc(1 - .070 * var(--gfr-stage-flicker)))}
  73%{filter:brightness(calc(1 + .045 * var(--gfr-stage-flicker)))}
}
@media(prefers-reduced-motion:reduce){
  .gfr-crt-flicker,.gfr-jukebox{animation:none!important}
}


/* RC2.29 — Grain softening + active-card theme fix -------------------------
   Soften the procedural grain so it reads as CRT texture instead of fine
   artwork noise. The active/now-playing card also inherits the current theme
   instead of falling back to legacy Pip-Boy green values. */
.gfr-crt-grain{
  opacity:calc(.004 + .145 * var(--gfr-stage-grain));
  mix-blend-mode:soft-light;
  filter:blur(.55px) saturate(0);
  transform:scale(1.004);
  transform-origin:center;
}

.gfr-card.is-active{
  background:
    radial-gradient(circle at 18% 48%,rgba(var(--gfr-stage-primary-rgb),.105),transparent 34%),
    linear-gradient(90deg,
      color-mix(in srgb,var(--gfr-primary) 13%,rgba(0,0,0,.985)),
      color-mix(in srgb,var(--gfr-bg) 88%,rgba(0,0,0,.985))
    );
  border-color:var(--gfr-highlight);
  box-shadow:
    inset 0 0 22px rgba(var(--gfr-stage-primary-rgb),.08),
    0 0 13px rgba(var(--gfr-stage-primary-rgb),.24);
}
.gfr-card.is-active .gfr-cover{
  border-color:var(--gfr-primary);
  box-shadow:
    0 0 13px rgba(var(--gfr-stage-primary-rgb),.20),
    0 0 28px rgba(var(--gfr-stage-primary-rgb),.09),
    inset 0 0 12px rgba(var(--gfr-stage-primary-rgb),.04);
}
.gfr-card.is-active .gfr-title,
.gfr-card.is-active .gfr-frequency,
.gfr-card.is-active .gfr-now,
.gfr-card.is-active .gfr-play,
.gfr-card.is-active .gfr-time{
  color:var(--gfr-highlight);
}
.gfr-card.is-active .gfr-play{
  border-color:var(--gfr-highlight);
  background:color-mix(in srgb,var(--gfr-bg) 82%,#000);
}
.gfr-card.is-active .gfr-progress-fill{
  background:var(--gfr-highlight);
  box-shadow:0 0 7px rgba(var(--gfr-stage-primary-rgb),.35);
}


/* RC2.30 — Grain debug off -----------------------------------------------
   Temporary debug pass: remove the CRT grain layer completely so cover
   readability and source asset quality can be judged without any noise
   overlay. Flicker, scanlines and theme handling stay untouched. */
.gfr-crt-grain{
  display:none !important;
  opacity:0 !important;
  animation:none !important;
  filter:none !important;
}
@media (prefers-reduced-motion:reduce){
  .gfr-crt-grain{display:none !important}
}


/* RC2.31 — cover double-processing debug ---------------------------------
   Exported display_cover / hero assets are already luminance/tint processed by
   the Broadcast Studio exporter. Disable the secondary browser-side grayscale /
   contrast / lift pass so we can judge whether the crunchy look came from
   double-processing rather than the source artwork itself. */
.gfr-cover img,
.gfr-card.is-active .gfr-cover img,
.gfr-hero-cover img{
  filter:none !important;
}


/* RC2.32 — default-card crop rasterization debug --------------------------
   The expanded/playing card renders the same exported cover cleanly, while
   the cropped library card looked crunchy. Force the default card to render
   the artwork as a full square (same raster geometry as the active card) and
   let the shorter wrapper perform the crop. This avoids asking object-fit to
   rasterize directly into the shallow 244x132 content box. */
.gfr-card:not(.is-active) .gfr-cover{
  position:relative;
  overflow:hidden;
}
.gfr-card:not(.is-active) .gfr-cover img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1;
  max-width:none !important;
  object-fit:cover !important;
  object-position:50% 50% !important;
  transform:translate(-50%,-50%) !important;
}


/* RC2.33 — default flicker calibration ------------------------------------
   Make the authored default (10%) actually perceptible while keeping it subtle.
   Short irregular brightness ticks carry most of the effect; high values can
   still become intentionally unstable. */
.gfr-crt-flicker{
  --gfr-flicker-opacity:calc(.018 + .30 * var(--gfr-stage-flicker));
  animation:gfr-crt-flicker-default 2.15s steps(1,end) infinite !important;
}
.gfr-jukebox{
  animation:gfr-screen-flicker-default 2.15s steps(1,end) infinite !important;
}
@keyframes gfr-crt-flicker-default{
  0%,10%,14%,32%,36%,54%,58%,76%,80%,100%{opacity:0}
  11%{opacity:calc(var(--gfr-flicker-opacity) * .44)}
  12%{opacity:calc(var(--gfr-flicker-opacity) * .12)}
  33%{opacity:calc(var(--gfr-flicker-opacity) * .72)}
  34%{opacity:calc(var(--gfr-flicker-opacity) * .18)}
  55%{opacity:calc(var(--gfr-flicker-opacity) * .95)}
  56%{opacity:calc(var(--gfr-flicker-opacity) * .10)}
  77%{opacity:calc(var(--gfr-flicker-opacity) * .58)}
  78%{opacity:calc(var(--gfr-flicker-opacity) * .15)}
}
@keyframes gfr-screen-flicker-default{
  0%,20%,24%,45%,49%,69%,73%,91%,100%{filter:brightness(1)}
  21%{filter:brightness(calc(1 - .22 * var(--gfr-stage-flicker)))}
  22%{filter:brightness(calc(1 + .13 * var(--gfr-stage-flicker)))}
  46%{filter:brightness(calc(1 + .16 * var(--gfr-stage-flicker)))}
  47%{filter:brightness(calc(1 - .10 * var(--gfr-stage-flicker)))}
  70%{filter:brightness(calc(1 - .18 * var(--gfr-stage-flicker)))}
  71%{filter:brightness(calc(1 + .10 * var(--gfr-stage-flicker)))}
  92%{filter:brightness(calc(1 - .12 * var(--gfr-stage-flicker)))}
}
@media(prefers-reduced-motion:reduce){
  .gfr-crt-flicker,.gfr-jukebox{animation:none!important}
}


/* RC2.34 — luminance flicker calibration ---------------------------------
   Browser compositing made the previous theme-colour screen pulse too subtle.
   Use short neutral luminance dips on the dedicated flicker layer instead.
   10% should read as a soft CRT tick; high authored values become clearly
   visible without changing the underlying theme or cover treatment. */
.gfr-crt-flicker{
  background:#000 !important;
  mix-blend-mode:normal !important;
  --gfr-flicker-dim:calc(.025 + .34 * var(--gfr-stage-flicker));
  animation:gfr-luminance-flicker 2.45s steps(1,end) infinite !important;
  opacity:0;
}
/* Keep only a tiny global peak component; the black overlay carries the
   readable dips and avoids depending on browser filter interpolation. */
.gfr-jukebox{
  animation:gfr-luminance-peak 2.45s steps(1,end) infinite !important;
}
@keyframes gfr-luminance-flicker{
  0%,8%,12%,27%,31%,48%,52%,68%,72%,86%,90%,100%{opacity:0}
  9%{opacity:calc(var(--gfr-flicker-dim) * .48)}
  10%{opacity:calc(var(--gfr-flicker-dim) * .14)}
  28%{opacity:calc(var(--gfr-flicker-dim) * .82)}
  29%{opacity:calc(var(--gfr-flicker-dim) * .18)}
  49%{opacity:calc(var(--gfr-flicker-dim) * .38)}
  50%{opacity:calc(var(--gfr-flicker-dim) * .95)}
  51%{opacity:calc(var(--gfr-flicker-dim) * .10)}
  69%{opacity:calc(var(--gfr-flicker-dim) * .62)}
  70%{opacity:calc(var(--gfr-flicker-dim) * .16)}
  87%{opacity:calc(var(--gfr-flicker-dim) * .44)}
  88%{opacity:calc(var(--gfr-flicker-dim) * .12)}
}
@keyframes gfr-luminance-peak{
  0%,18%,22%,40%,44%,60%,64%,79%,83%,100%{filter:brightness(1)}
  19%{filter:brightness(calc(1 + .10 * var(--gfr-stage-flicker)))}
  20%{filter:brightness(calc(1 - .035 * var(--gfr-stage-flicker)))}
  41%{filter:brightness(calc(1 + .075 * var(--gfr-stage-flicker)))}
  42%{filter:brightness(calc(1 - .025 * var(--gfr-stage-flicker)))}
  61%{filter:brightness(calc(1 + .12 * var(--gfr-stage-flicker)))}
  62%{filter:brightness(calc(1 - .04 * var(--gfr-stage-flicker)))}
  80%{filter:brightness(calc(1 + .065 * var(--gfr-stage-flicker)))}
  81%{filter:brightness(1)}
}
@media(prefers-reduced-motion:reduce){
  .gfr-crt-flicker,.gfr-jukebox{animation:none!important}
}


/* RC2.35 — rolling CRT scan band -----------------------------------------
   Old tube displays occasionally showed a horizontal luminance band drifting
   from top to bottom. Add a soft bright/dark travelling stripe to the web
   player. The intensity loosely follows Flicker Strength, but the behaviour
   stays occasional and gentle rather than constant. */
.gfr-crt-roll{
  position:absolute;
  left:0;
  right:0;
  top:-42%;
  height:42%;
  pointer-events:none;
  z-index:97;
  opacity:0;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.018) 18%,
    rgba(255,255,255,.085) 34%,
    rgba(255,255,255,.022) 44%,
    rgba(0,0,0,.050) 58%,
    rgba(0,0,0,.030) 72%,
    rgba(255,255,255,0) 100%
  );
  filter:blur(10px);
  animation:gfr-crt-roll-sweep 14.6s linear infinite;
}
@keyframes gfr-crt-roll-sweep{
  0%,16%{opacity:0;transform:translateY(-10%)}
  17%{opacity:calc(.018 + .26 * var(--gfr-stage-crt-roll));transform:translateY(0%)}
  34%{opacity:calc(.014 + .20 * var(--gfr-stage-crt-roll));transform:translateY(360%)}
  36%,64%{opacity:0;transform:translateY(390%)}
  65%{opacity:calc(.014 + .20 * var(--gfr-stage-crt-roll));transform:translateY(0%)}
  84%{opacity:calc(.020 + .28 * var(--gfr-stage-crt-roll));transform:translateY(360%)}
  86%,100%{opacity:0;transform:translateY(390%)}
}
@media (prefers-reduced-motion:reduce){
  .gfr-crt-roll{display:none !important;animation:none !important}
}


/* RC2.40 — album carousel v0.1 -------------------------------------------
   Registry albums become the first structural navigation layer of the future
   standalone GFR site. The strip is swipeable on touch devices and uses the
   already-themed song signal cover as its preferred preview artwork. */
.gfr-album-strip{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px;
  gap:7px;
  align-items:stretch;
  margin:15px 0 14px;
  text-align:left;
}
.gfr-album-carousel{
  display:flex;
  gap:6px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  touch-action:pan-x;
  padding:1px;
}
.gfr-album-carousel::-webkit-scrollbar{display:none}
.gfr-album-card{
  flex:0 0 calc(50% - 3px);
  min-width:0;
  height:118px;
  padding:0;
  border:1px solid var(--gfr-muted);
  background:color-mix(in srgb,var(--gfr-bg) 92%,#000);
  color:var(--gfr-primary);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  scroll-snap-align:start;
  box-shadow:inset 0 0 13px rgba(var(--gfr-stage-primary-rgb),.045);
}
.gfr-album-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--gfr-primary);
  mix-blend-mode:color;
  opacity:.26;
  pointer-events:none;
}
.gfr-album-card:hover,.gfr-album-card:focus-visible{
  outline:none;
  border-color:var(--gfr-highlight);
  box-shadow:0 0 9px rgba(var(--gfr-stage-primary-rgb),.18),inset 0 0 15px rgba(var(--gfr-stage-primary-rgb),.07);
}
.gfr-album-card.is-selected{
  border-color:var(--gfr-highlight);
  box-shadow:0 0 12px rgba(var(--gfr-stage-primary-rgb),.25),inset 0 0 19px rgba(var(--gfr-stage-primary-rgb),.09);
}
.gfr-album-art{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:color-mix(in srgb,var(--gfr-primary) 7%,#000);
}
.gfr-album-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.60),rgba(0,0,0,.05) 72%);
  pointer-events:none;
}
.gfr-album-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:brightness(.82) contrast(1.02);
}
.gfr-album-placeholder{font-size:42px;color:var(--gfr-muted)}
.gfr-album-title{
  position:absolute;
  z-index:3;
  left:10px;
  right:10px;
  bottom:9px;
  color:var(--gfr-highlight);
  font-weight:900;
  font-size:clamp(16px,4vw,25px);
  line-height:.95;
  letter-spacing:.035em;
  text-align:center;
  text-shadow:0 0 8px rgba(var(--gfr-stage-primary-rgb),.32),0 2px 2px #000;
}
.gfr-album-nav{
  border:1px solid var(--gfr-muted);
  background:color-mix(in srgb,var(--gfr-primary) 8%,var(--gfr-bg));
  color:var(--gfr-highlight);
  font-size:33px;
  line-height:1;
  cursor:pointer;
  padding:0;
}
.gfr-album-nav:hover,.gfr-album-nav:focus-visible{border-color:var(--gfr-highlight);outline:none;background:color-mix(in srgb,var(--gfr-primary) 16%,var(--gfr-bg))}
.gfr-album-nav:disabled{opacity:.22;cursor:default}
@media(max-width:520px){
  .gfr-album-strip{grid-template-columns:28px minmax(0,1fr) 28px;gap:5px;margin-top:12px}
  .gfr-album-card{flex-basis:72%;height:108px}
  .gfr-album-title{font-size:18px}
  .gfr-album-nav{font-size:27px}
}
@media(max-width:390px){
  .gfr-album-card{flex-basis:82%;height:101px}
}


/* RC2.41 — album carousel v0.2 / hero focus -------------------------------
   Keep the v0.1 width, but let each album tile become a real square artwork
   card. Selecting an album can now reuse the same themed square artwork in the
   main hero screen without changing the hero geometry. */
.gfr-album-card{
  height:auto !important;
  aspect-ratio:1 / 1;
}
.gfr-album-art img{
  object-fit:cover;
  object-position:center center;
  filter:none;
}
/* Album artwork in the large station screen should read like a displayed
   sleeve rather than being forcibly stretched to fill the terminal. */
.gfr-hero-idle-asset.is-album-focus img{
  object-fit:contain;
  padding:5.5%;
}
@media(max-width:520px){
  .gfr-album-card{height:auto !important;aspect-ratio:1 / 1}
}
@media(max-width:390px){
  .gfr-album-card{height:auto !important;aspect-ratio:1 / 1}
}


/* RC2.43 — album alpha / hero integration ---------------------------------
   Album artwork already contains its own typography. Keep the ALL TRACKS
   label as a navigation aid, but remove redundant title overlays from authored
   album sleeves. In the large hero, treat album focus artwork as authored RGBA
   instead of generated signal art so transparent pixels remain visually open
   to the terminal underneath. */
.gfr-album-card:not([data-album-id="all"]) .gfr-album-title{
  display:none !important;
}
.gfr-hero-idle-asset.is-album-focus{
  background:transparent !important;
  padding:0 !important;
}
.gfr-hero-idle-asset.is-album-focus::after{
  display:none !important;
}
.gfr-hero-idle-asset.is-album-focus img{
  width:100%;
  height:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
  padding:2.4% !important;
  opacity:1 !important;
  filter:
    saturate(1.10)
    brightness(1.16)
    contrast(1.025)
    drop-shadow(0 0 6px rgba(var(--gfr-stage-primary-rgb),.14))
    drop-shadow(0 0 20px rgba(var(--gfr-stage-primary-rgb),.055)) !important;
}
/* The square album carousel is our visual reference for album-art energy. */
.gfr-album-card:not([data-album-id="all"]) .gfr-album-art::after{
  background:linear-gradient(to top,rgba(0,0,0,.18),rgba(0,0,0,0) 58%) !important;
}
.gfr-album-card:not([data-album-id="all"]) .gfr-album-art img{
  opacity:1;
  filter:brightness(1.04) saturate(1.04) !important;
}


/* RC2.44 — Album Focus Archive View ---------------------------------------
   Selecting an album keeps the GODFAZA station identity faintly alive in the
   main screen and layers a smaller album sleeve plus typed Registry lore above
   it. This is also the reusable visual grammar for future LORE / ABOUT pages. */
.gfr-hero-idle.is-album-info{
  min-height:540px;
}
.gfr-hero-idle.is-album-info .gfr-hero-idle-asset{
  inset:10px 0 18px;
  background:transparent !important;
}
.gfr-hero-idle.is-album-info .gfr-hero-idle-asset::after{
  display:block !important;
  opacity:.025 !important;
}
.gfr-hero-idle.is-album-info .gfr-hero-idle-asset img{
  padding:0 !important;
  object-fit:cover !important;
  opacity:.17 !important;
  filter:brightness(.72) saturate(.78) contrast(.98) !important;
  transform:scale(1.01);
}
.gfr-album-focus{
  position:absolute;
  inset:28px 7% 26px;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  pointer-events:none;
}
.gfr-album-focus[hidden]{display:none !important}
.gfr-album-focus__art{
  width:min(54%,330px);
  aspect-ratio:1 / 1;
  display:grid;
  place-items:center;
  position:relative;
  opacity:0;
  transform:translateY(8px) scale(.985);
  transition:opacity .18s ease,transform .22s ease;
}
.gfr-album-focus.is-ready .gfr-album-focus__art{
  opacity:1;
  transform:none;
}
.gfr-album-focus__art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:
    brightness(1.10)
    saturate(1.06)
    drop-shadow(0 0 7px rgba(var(--gfr-stage-primary-rgb),.15))
    drop-shadow(0 0 18px rgba(var(--gfr-stage-primary-rgb),.06));
}
.gfr-album-focus__copy{
  width:min(78%,520px);
  margin-top:12px;
  text-align:left;
  color:var(--gfr-highlight);
  text-shadow:0 0 6px rgba(var(--gfr-stage-primary-rgb),.18);
}
.gfr-album-focus__title{
  min-height:1.25em;
  font-size:clamp(15px,3.2vw,22px);
  line-height:1.05;
  font-weight:900;
  letter-spacing:.055em;
  color:var(--gfr-highlight);
}
.gfr-album-focus__lore{
  min-height:4.6em;
  margin-top:8px;
  font-size:clamp(9px,1.9vw,13px);
  line-height:1.36;
  letter-spacing:.018em;
  color:color-mix(in srgb,var(--gfr-primary) 84%,#dcdcdc 16%);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.gfr-album-focus__title::after,
.gfr-album-focus__lore::after{
  content:'▮';
  margin-left:3px;
  opacity:.75;
  animation:gfr-album-cursor .75s steps(1,end) infinite;
}
.gfr-album-focus__title:empty::after,
.gfr-album-focus__lore:empty::after{display:none}
@keyframes gfr-album-cursor{0%,48%{opacity:.8}49%,100%{opacity:0}}

@media(max-width:520px){
  .gfr-hero-idle.is-album-info{min-height:505px}
  .gfr-album-focus{inset:24px 5% 22px}
  .gfr-album-focus__art{width:min(62%,285px)}
  .gfr-album-focus__copy{width:88%;margin-top:10px}
  .gfr-album-focus__lore{font-size:10px;line-height:1.32;max-height:8.1em;overflow:hidden}
}
@media(max-width:390px){
  .gfr-hero-idle.is-album-info{min-height:470px}
  .gfr-album-focus__art{width:min(64%,245px)}
  .gfr-album-focus__copy{width:92%}
  .gfr-album-focus__lore{font-size:9px;max-height:7.9em}
}
@media(prefers-reduced-motion:reduce){
  .gfr-album-focus__art{opacity:1;transform:none;transition:none}
  .gfr-album-focus__title::after,.gfr-album-focus__lore::after{animation:none}
}


/* RC2.44 — album focus border + softer typed SFX cadence ------------------
   The album archive card in the main screen gets a brighter visible frame to
   match the mockup more closely. The actual typing cadence is still per
   character visually, but only roughly every third non-space character fires
   the typing sound so it stops sounding like a gatling gun. */
.gfr-album-focus__art::before{
  content:'';
  position:absolute;
  inset:-8px;
  border:1px solid rgba(var(--gfr-stage-primary-rgb),.72);
  box-shadow:
    0 0 0 1px rgba(var(--gfr-stage-primary-rgb),.18) inset,
    0 0 10px rgba(var(--gfr-stage-primary-rgb),.16),
    0 0 22px rgba(var(--gfr-stage-primary-rgb),.08);
  pointer-events:none;
  z-index:2;
}
.gfr-album-focus__art::after{
  content:'';
  position:absolute;
  inset:-14px;
  border:1px solid rgba(var(--gfr-stage-primary-rgb),.18);
  pointer-events:none;
  z-index:1;
}
.gfr-album-focus__art img{
  position:relative;
  z-index:3;
}
@media(max-width:520px){
  .gfr-album-focus__art::before{inset:-6px}
  .gfr-album-focus__art::after{inset:-11px}
}


/* RC2.45 — continuous album typing audio + cursor/spacing cleanup -------- */
.gfr-album-focus__copy{
  margin-top:28px !important;
}
.gfr-album-focus__title::after,
.gfr-album-focus__lore::after{
  display:none !important;
}
.gfr-album-focus__title.is-typing::after,
.gfr-album-focus__lore.is-typing::after{
  display:inline !important;
  content:'▮';
  margin-left:3px;
  opacity:.75;
  animation:gfr-album-cursor .75s steps(1,end) infinite;
}
@media(max-width:520px){
  .gfr-album-focus__copy{margin-top:22px !important}
}
@media(prefers-reduced-motion:reduce){
  .gfr-album-focus__title.is-typing::after,
  .gfr-album-focus__lore.is-typing::after{animation:none}
}


/* RC2.47 — signal meter cleanup ------------------------------------------
   The old fixed library/signal progress bar no longer carries useful meaning
   now that albums filter the track list. Hide it and tighten the intro spacing. */
.gfr-signal-meter{display:none !important;}
.gfr-intro{padding-bottom:9px;}
.gfr-intro p{margin-bottom:7px;}
.gfr-demo-note{margin-top:0 !important;}


/* RC2.48 — album carousel vertical scroll handoff -------------------------
   Allow the browser to resolve both horizontal carousel swipes and vertical
   page scrolling. The previous pan-x lock swallowed vertical touch gestures
   whenever they began over the album carousel. */
.gfr-album-carousel{
  touch-action:pan-x pan-y pinch-zoom !important;
  overscroll-behavior-y:auto;
}


/* RC2.49 — mobile hero framing + active card rebalance --------------------
   1) Album focus no longer grows the hero dramatically on phones. Instead the
      focus cover and archive text are composed inside the existing hero area.
   2) Now-playing cards allocate roughly half the card width to the cover on
      phones (and more generous art space on desktop), with card height driven
      by that composition.
*/

/* Keep album focus inside the existing hero frame instead of extending the
   whole hero area on mobile. */
.gfr-hero-idle.is-album-info{
  min-height:0 !important;
}
.gfr-album-focus{
  inset:20px 7% 18px;
  justify-content:flex-start;
}
.gfr-album-focus__art{
  width:min(46%,250px);
}
.gfr-album-focus__copy{
  width:min(72%,430px);
  margin-top:18px !important;
}
.gfr-album-focus__title{
  font-size:clamp(14px,3vw,20px);
}
.gfr-album-focus__lore{
  margin-top:9px;
  font-size:clamp(8.6px,1.55vw,11.5px);
  line-height:1.28;
  max-height:6.5em;
  overflow:hidden;
}

/* Give the active song more of the card width for artwork. */
.gfr-card.is-active{
  min-height:252px;
  grid-template-columns:minmax(196px,46%) minmax(0,1fr);
  grid-template-rows:auto auto auto;
  gap:12px 16px;
  padding:12px;
  align-items:center;
}
.gfr-card.is-active .gfr-cover{
  width:100%;
  max-width:100%;
  grid-row:1 / span 3;
  align-self:center;
}
.gfr-card.is-active .gfr-frequency,
.gfr-card.is-active .gfr-card-main,
.gfr-card.is-active .gfr-player{
  grid-column:2;
}
.gfr-card.is-active .gfr-frequency{
  align-self:end;
  padding-bottom:4px;
}
.gfr-card.is-active .gfr-card-main{
  align-self:center;
  padding-right:0;
}
.gfr-card.is-active .gfr-player{
  align-self:start;
  margin-top:0;
}

@media(max-width:700px){
  .gfr-album-focus{inset:18px 6% 16px}
  .gfr-album-focus__art{width:min(50%,220px)}
  .gfr-album-focus__copy{width:min(78%,360px);margin-top:16px !important}
  .gfr-album-focus__lore{font-size:10px;line-height:1.26;max-height:5.15em}
}

@media(max-width:520px){
  .gfr-hero-idle.is-album-info{min-height:0 !important}
  .gfr-album-focus{inset:14px 5.5% 12px;justify-content:flex-start}
  .gfr-album-focus__art{width:min(52%,188px)}
  .gfr-album-focus__copy{width:82%;margin-top:14px !important}
  .gfr-album-focus__title{font-size:15px;line-height:1.02}
  .gfr-album-focus__lore{font-size:9px;line-height:1.22;max-height:4.88em}

  .gfr-card.is-active{
    min-height:244px;
    grid-template-columns:minmax(0,48%) minmax(0,1fr);
    gap:10px 12px;
    padding:10px;
  }
  .gfr-card.is-active .gfr-cover{width:100%}
  .gfr-card.is-active .gfr-title{font-size:clamp(20px,6vw,30px)}
}

@media(max-width:390px){
  .gfr-album-focus{inset:12px 5% 10px}
  .gfr-album-focus__art{width:min(50%,168px)}
  .gfr-album-focus__copy{width:84%;margin-top:12px !important}
  .gfr-album-focus__lore{font-size:8.5px;line-height:1.18;max-height:4.2em}

  .gfr-card.is-active{
    min-height:224px;
    grid-template-columns:minmax(0,47%) minmax(0,1fr);
    gap:9px 10px;
  }
}


/* RC2.50 — fixed mobile hero geometry + larger active art -----------------
   Force the idle/main screen to one stable square on phones. Album focus is
   overlaid inside that square, so selecting an album can no longer stretch the
   main screen. Also give now-playing art roughly another 10% of card width. */
@media(max-width:700px){
  .gfr-hero-idle{
    width:100%;
    aspect-ratio:1 / 1;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden;
  }
  .gfr-hero-idle .gfr-hero-idle-asset,
  .gfr-hero-idle.is-album-info .gfr-hero-idle-asset{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    padding:10px !important;
  }
  .gfr-hero-idle .gfr-hero-idle-asset img,
  .gfr-hero-idle.is-album-info .gfr-hero-idle-asset img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }
  .gfr-album-focus{
    position:absolute !important;
    inset:12px 5% 12px !important;
    overflow:hidden;
  }
}

@media(max-width:520px){
  .gfr-card.is-active{
    min-height:258px;
    grid-template-columns:minmax(0,53%) minmax(0,1fr);
  }
  .gfr-card.is-active .gfr-cover{width:100%;}
}
@media(max-width:390px){
  .gfr-card.is-active{
    min-height:238px;
    grid-template-columns:minmax(0,52%) minmax(0,1fr);
  }
}
@media(min-width:521px){
  .gfr-card.is-active{
    grid-template-columns:minmax(210px,50%) minmax(0,1fr);
  }
}


/* RC2.51 — collection/album focus consistency -----------------------------
   Collection info uses the same archive treatment as album info. Keep the
   authored registry text untouched, but render it in terminal-style capitals.
   The extra spacing gives the cover and headline a little more breathing room. */
.gfr-album-focus__copy{
  margin-top:28px !important;
}
.gfr-album-focus__title,
.gfr-album-focus__lore{
  text-transform:uppercase;
}
.gfr-album-card .gfr-album-title{
  display:none !important;
}
@media(max-width:520px){
  .gfr-album-focus__copy{margin-top:22px !important}
}


/* RC2.52 — active cover phosphor lift -------------------------------------
   Keep the clean exported artwork / square raster path, but give the expanded
   now-playing cover a gentle display-only lift so it does not look flatter
   than the cropped library cards. This deliberately does NOT restore the old
   grayscale/autocontrast processing that caused crunchy artwork. */
.gfr-card.is-active .gfr-cover img{
  filter:brightness(1.11) saturate(1.08) contrast(1.025) !important;
}
.gfr-card.is-active .gfr-cover{
  box-shadow:
    0 0 calc(10px + 30px * var(--gfr-stage-cover-glow)) rgba(var(--gfr-stage-primary-rgb),calc(.10 + .30 * var(--gfr-stage-cover-glow))),
    inset 0 0 10px rgba(var(--gfr-stage-primary-rgb),.055) !important;
}


/* RC2.53 — active cover luminance fix ------------------------------------
   The full-square playing cover contains substantially more dark authored
   frame/title area than the cropped library thumbnail. Also reduce the strong
   normal-blend theme wash in the active state, which can flatten an already
   themed green/amber display cover. Keep the source image clean; this is only
   a browser display lift. */
.gfr-card.is-active .gfr-cover img{
  filter:brightness(1.27) saturate(1.16) contrast(1.035) !important;
}
.gfr-card.is-active .gfr-cover::before{
  background:var(--gfr-highlight) !important;
  opacity:calc(.025 + .10 * var(--gfr-stage-cover-tint)) !important;
  mix-blend-mode:screen !important;
}
.gfr-card.is-active .gfr-cover{
  box-shadow:
    0 0 calc(12px + 34px * var(--gfr-stage-cover-glow)) rgba(var(--gfr-stage-primary-rgb),calc(.13 + .34 * var(--gfr-stage-cover-glow))),
    inset 0 0 12px rgba(var(--gfr-stage-primary-rgb),.075) !important;
}


/* RC2.54 — active cover contrast / saturation tuning ----------------------
   RC2.53 proved bright enough but a little washed out. Pull luminance back
   and shift the emphasis to chroma + local contrast so the expanded artwork
   reads closer to the punchier cropped library cards. */
.gfr-card.is-active .gfr-cover img{
  filter:brightness(1.12) saturate(1.30) contrast(1.12) !important;
}
.gfr-card.is-active .gfr-cover::before{
  opacity:calc(.015 + .065 * var(--gfr-stage-cover-tint)) !important;
}


/* RC2.83 — standalone app navigation shell + player anchor strip -----
   Keep the global nav for archive pages, but add a more prominent secondary
   nav directly under the main player screen so LORE / ABOUT / YOUTUBE do not
   disappear into the monochrome shell. */
.gfr-app-nav{
  width:calc(100% - 32px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  padding:5px;
  border:1px solid var(--gfr-primary);
  background:color-mix(in srgb,var(--gfr-bg) 84%,#000);
  box-shadow:inset 0 0 16px rgba(var(--gfr-stage-primary-rgb),.07),0 0 10px rgba(var(--gfr-stage-primary-rgb),.12);
}
.gfr-app-nav--global{
  margin:14px auto 10px;
}
.gfr-app-nav--player{
  margin:12px auto 14px;
  width:calc(100% - 32px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gfr-primary) 9%,#040704),color-mix(in srgb,var(--gfr-bg) 88%,#000));
  box-shadow:inset 0 0 18px rgba(var(--gfr-stage-primary-rgb),.08),0 0 12px rgba(var(--gfr-stage-primary-rgb),.14);
}
.gfr-app-nav__item,.gfr-app-nav__spacer{
  min-height:38px;
  border:1px solid color-mix(in srgb,var(--gfr-primary) 62%,#1b321b);
  background:color-mix(in srgb,var(--gfr-primary) 10%,#020402);
}
.gfr-app-nav--player .gfr-app-nav__item{
  min-height:44px;
  font-size:clamp(13px,3vw,19px);
  letter-spacing:.10em;
}
.gfr-app-nav__item{
  color:var(--gfr-primary);
  font:inherit;
  font-size:clamp(12px,2.8vw,18px);
  letter-spacing:.08em;
  cursor:pointer;
  text-shadow:0 0 6px rgba(var(--gfr-stage-primary-rgb),.18);
}
.gfr-app-nav__item:hover,.gfr-app-nav__item:focus-visible{
  border-color:var(--gfr-highlight);
  color:var(--gfr-highlight);
  outline:none;
}
.gfr-app-nav__item.is-active{
  color:#061006;
  background:var(--gfr-highlight);
  box-shadow:0 0 10px rgba(var(--gfr-stage-primary-rgb),.26),inset 0 0 0 2px rgba(0,0,0,.18);
  text-shadow:none;
}
.gfr-app-nav__spacer{opacity:.7}
.gfr-jukebox.is-booting .gfr-app-nav{opacity:.22;pointer-events:none}
.gfr-jukebox[data-app-view="player"] .gfr-app-nav--global{display:none}
.gfr-jukebox:not([data-app-view="player"]) .gfr-app-nav--player{display:none}
.gfr-app-view[hidden]{display:none !important}

.gfr-terminal-view{padding:0 clamp(10px,3.5vw,26px) 18px}
.gfr-terminal-view__screen{
  position:relative;
  min-height:610px;
  border:1px solid var(--gfr-primary);
  border-radius:7px;
  padding:20px clamp(16px,4vw,32px) 18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 35%,rgba(var(--gfr-stage-primary-rgb),.08),transparent 38%),
    linear-gradient(180deg,color-mix(in srgb,var(--gfr-bg) 88%,#000),#010201);
  box-shadow:inset 0 0 34px rgba(var(--gfr-stage-primary-rgb),.06),0 0 10px rgba(var(--gfr-stage-primary-rgb),.10);
}
.gfr-terminal-view__topline,.gfr-terminal-view__footer{
  display:flex;justify-content:space-between;gap:16px;
  font-size:clamp(8px,1.7vw,11px);letter-spacing:.08em;color:var(--gfr-primary);
}
.gfr-terminal-view__image-buffer{
  width:min(68%,430px);
  aspect-ratio:4/3;
  margin:42px auto 30px;
  border:1px solid color-mix(in srgb,var(--gfr-primary) 70%,#253925);
  display:grid;place-items:center;position:relative;overflow:hidden;
  color:color-mix(in srgb,var(--gfr-primary) 68%,#777 32%);
  font-size:clamp(8px,1.8vw,11px);letter-spacing:.08em;text-align:center;
  background:rgba(0,0,0,.36);
}
.gfr-terminal-view__image-grid{
  position:absolute;inset:0;opacity:.55;
  background:
    linear-gradient(90deg,transparent 49.7%,rgba(var(--gfr-stage-primary-rgb),.10) 50%,transparent 50.3%),
    linear-gradient(0deg,transparent 49.7%,rgba(var(--gfr-stage-primary-rgb),.10) 50%,transparent 50.3%),
    repeating-linear-gradient(0deg,transparent 0 8px,rgba(var(--gfr-stage-primary-rgb),.025) 9px);
}
.gfr-terminal-view__image-buffer>span{position:relative;z-index:1}
.gfr-terminal-view__copy{width:min(82%,600px);margin:0 auto 44px;text-align:left}
.gfr-terminal-view__heading{
  min-height:1.3em;color:var(--gfr-highlight);font-weight:900;
  font-size:clamp(17px,4vw,28px);letter-spacing:.055em;line-height:1.05;
  text-shadow:0 0 8px rgba(var(--gfr-stage-primary-rgb),.22);
}
.gfr-terminal-view__text{
  min-height:7em;margin-top:18px;white-space:pre-wrap;overflow-wrap:anywhere;
  color:color-mix(in srgb,var(--gfr-primary) 86%,#dcdcdc 14%);
  font-size:clamp(10px,2.2vw,14px);line-height:1.45;letter-spacing:.025em;
}
.gfr-terminal-view__heading.is-typing::after,.gfr-terminal-view__text.is-typing::after{
  content:'▮';margin-left:4px;animation:gfr-album-cursor .75s steps(1,end) infinite;
}
.gfr-terminal-view__footer{position:absolute;left:20px;right:20px;bottom:16px}
@media(max-width:520px){
  .gfr-app-nav{width:calc(100% - 18px);padding:4px;gap:3px}
  .gfr-app-nav--global{margin-top:9px}
  .gfr-app-nav--player{margin:10px auto 12px;width:calc(100% - 18px)}
  .gfr-app-nav__item,.gfr-app-nav__spacer{min-height:34px}
  .gfr-app-nav--player .gfr-app-nav__item{min-height:40px;font-size:clamp(12px,3.3vw,16px)}
  .gfr-terminal-view{padding-inline:8px}
  .gfr-terminal-view__screen{min-height:520px;padding:15px 14px}
  .gfr-terminal-view__image-buffer{width:78%;margin:34px auto 25px}
  .gfr-terminal-view__copy{width:88%;margin-bottom:40px}
  .gfr-terminal-view__text{margin-top:14px;line-height:1.38}
  .gfr-terminal-view__footer{left:14px;right:14px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .gfr-terminal-view__heading.is-typing::after,.gfr-terminal-view__text.is-typing::after{animation:none}
}


/* RC2.56 — authored Lore/About page images -------------------------------- */
.gfr-terminal-view__image-buffer.has-image{
  background-image:
    repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.22) 3px 4px),
    var(--gfr-page-image);
  background-size:auto,contain;
  background-repeat:repeat,no-repeat;
  background-position:center,center;
  color:transparent;
}
.gfr-terminal-view__image-buffer.has-image .gfr-terminal-view__image-grid{
  opacity:.24;
}
.gfr-terminal-view__image-buffer.is-reconstructing::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,transparent 0%,rgba(var(--gfr-stage-primary-rgb),.16) 48%,rgba(var(--gfr-stage-primary-rgb),.40) 50%,rgba(0,0,0,.86) 52%,rgba(0,0,0,.96) 100%);
  animation:gfr-page-reconstruct 1.65s steps(24,end) 1 forwards;
  pointer-events:none;
}
@keyframes gfr-page-reconstruct{
  from{transform:translateY(-1%)}
  to{transform:translateY(102%)}
}
@media(prefers-reduced-motion:reduce){
  .gfr-terminal-view__image-buffer.is-reconstructing::after{display:none}
}


/* RC2.57 — robust page image element -------------------------------------- */
.gfr-terminal-view__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  z-index:0;
  filter:brightness(1.04) saturate(1.03) contrast(1.04);
}
.gfr-terminal-view__image[hidden]{display:none !important}
.gfr-terminal-view__image-buffer.has-image{
  background:rgba(0,0,0,.30) !important;
}
.gfr-terminal-view__image-buffer.has-image>span{display:none}
.gfr-terminal-view__image-buffer.has-image .gfr-terminal-view__image-grid{z-index:1}
.gfr-terminal-view__image-buffer.is-reconstructing::after{z-index:2}


/* RC6.10an106 — Album / Collection focus readability pass -----------------
   For archive selections we now let the selected cover become the faint
   background inside the main screen and shift visual priority to the typed
   copy. This removes the “Godfaza logo in the back + cover in front” layering
   and makes the text much easier to read, especially for ALL FREQUENCIES. */
.gfr-hero-idle.is-album-info .gfr-hero-idle-asset img{
  padding:22px 13% 18px !important;
  object-fit:contain !important;
  opacity:.16 !important;
  filter:brightness(.72) saturate(.86) contrast(1.04) !important;
  transform:none !important;
}
.gfr-hero-idle.is-album-info .gfr-hero-idle-asset::after{
  opacity:.018 !important;
}
.gfr-hero-idle.is-album-info .gfr-album-focus{
  inset:26px 7.5% 28px;
  align-items:flex-start;
  justify-content:flex-end;
}
.gfr-hero-idle.is-album-info .gfr-album-focus__art{
  display:none !important;
}
.gfr-hero-idle.is-album-info .gfr-album-focus__copy{
  width:min(86%, 610px);
  margin-top:0;
  padding:8px 10px 10px;
  background:linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.18));
  border-left:1px solid rgba(var(--gfr-stage-primary-rgb), .18);
}
.gfr-hero-idle.is-album-info .gfr-album-focus__title{
  min-height:1.15em;
  font-size:clamp(20px, 4.2vw, 34px);
  line-height:1.02;
  letter-spacing:.05em;
}
.gfr-hero-idle.is-album-info .gfr-album-focus__lore{
  min-height:5.3em;
  margin-top:10px;
  font-size:clamp(11px, 2.3vw, 16px);
  line-height:1.42;
  color:color-mix(in srgb, var(--gfr-primary) 90%, #f3f3f3 10%);
}
@media(max-width:520px){
  .gfr-hero-idle.is-album-info{
    min-height:500px;
  }
  .gfr-hero-idle.is-album-info .gfr-hero-idle-asset img{
    padding:16px 8% 14px !important;
    opacity:.14 !important;
  }
  .gfr-hero-idle.is-album-info .gfr-album-focus{
    inset:18px 5% 18px;
  }
  .gfr-hero-idle.is-album-info .gfr-album-focus__copy{
    width:94%;
    padding:6px 6px 8px;
  }
  .gfr-hero-idle.is-album-info .gfr-album-focus__title{
    font-size:clamp(18px, 6.0vw, 25px);
  }
  .gfr-hero-idle.is-album-info .gfr-album-focus__lore{
    font-size:clamp(10px, 3.0vw, 13px);
    max-height:none;
  }
}


/* RC6.10an107 — archive copy readability + overflow safety ----------------
   Preserve the nice bottom-anchored / upward-growing terminal behavior from
   an106, but remove older max-height clipping and raise the copy size. */
.gfr-hero-idle.is-album-info .gfr-album-focus{
  bottom:34px;
}
.gfr-hero-idle.is-album-info .gfr-album-focus__copy{
  width:min(89%, 650px);
  padding-bottom:14px;
}
.gfr-hero-idle.is-album-info .gfr-album-focus__title{
  font-size:clamp(22px, 4.55vw, 37px);
}
.gfr-hero-idle.is-album-info .gfr-album-focus__lore{
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  font-size:clamp(13px, 2.65vw, 18px);
  line-height:1.46;
  padding-bottom:3px;
}
@media(max-width:520px){
  .gfr-hero-idle.is-album-info{
    min-height:510px;
  }
  .gfr-hero-idle.is-album-info .gfr-album-focus{
    inset:18px 5% 26px;
  }
  .gfr-hero-idle.is-album-info .gfr-album-focus__copy{
    width:95%;
    padding-bottom:12px;
  }
  .gfr-hero-idle.is-album-info .gfr-album-focus__title{
    font-size:clamp(20px, 6.4vw, 28px);
  }
  .gfr-hero-idle.is-album-info .gfr-album-focus__lore{
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    font-size:clamp(11.5px, 3.35vw, 15px);
    line-height:1.42;
  }
}


/* RC2.60 — Unified Archive Focus grammar for LORE / ABOUT -----------------
   Default: assigned page art becomes a faint archive backdrop and copy is
   bottom-anchored, growing upward exactly like the album / collection focus. */
.gfr-terminal-view__screen::before{
  content:'';
  position:absolute;
  inset:48px 5% 42px;
  pointer-events:none;
  z-index:0;
  background-image:var(--gfr-page-background-image);
  background-repeat:no-repeat;
  background-position:center 42%;
  background-size:contain;
  opacity:0;
  filter:brightness(.70) saturate(.88) contrast(1.04);
}
.gfr-terminal-view__screen>*{position:relative;z-index:2}
.gfr-terminal-view__screen.is-page-background::before,
.gfr-terminal-view__screen.is-page-mixed::before{opacity:.16}
.gfr-terminal-view__screen.is-page-background .gfr-terminal-view__image-buffer{
  position:absolute;
  inset:48px 5% 42px;
  width:auto;
  height:auto;
  margin:0;
  border:0;
  background:transparent !important;
  pointer-events:none;
  opacity:0;
}
.gfr-terminal-view__screen.is-page-background .gfr-terminal-view__copy{
  position:absolute;
  left:clamp(34px,9%,82px);
  right:clamp(30px,10%,92px);
  bottom:64px;
  width:auto;
  margin:0;
  padding:10px 12px 12px;
  border-left:1px solid rgba(var(--gfr-stage-primary-rgb),.18);
  background:linear-gradient(to bottom,rgba(0,0,0,.01),rgba(0,0,0,.16));
}
.gfr-terminal-view__screen.is-page-background .gfr-terminal-view__heading,
.gfr-terminal-view__screen.is-page-mixed .gfr-terminal-view__heading{
  font-size:clamp(24px,5vw,38px);
  line-height:1.02;
}
.gfr-terminal-view__screen.is-page-background .gfr-terminal-view__text,
.gfr-terminal-view__screen.is-page-mixed .gfr-terminal-view__text{
  min-height:0;
  margin-top:12px;
  font-size:clamp(13px,2.8vw,18px);
  line-height:1.43;
  overflow:visible;
  max-height:none;
}
.gfr-terminal-view__screen.is-page-mixed .gfr-terminal-view__image-buffer{
  width:min(48%,300px);
  margin:34px auto 20px;
}
.gfr-terminal-view__screen.is-page-mixed .gfr-terminal-view__copy{
  width:min(86%,650px);
  margin-bottom:42px;
}
.gfr-terminal-view__screen.is-page-focus::before{opacity:0}
@media(max-width:520px){
  .gfr-terminal-view__screen.is-page-background::before,
  .gfr-terminal-view__screen.is-page-mixed::before{
    inset:42px 3% 38px;
    background-position:center 36%;
    opacity:.14;
  }
  .gfr-terminal-view__screen.is-page-background .gfr-terminal-view__copy{
    left:7%;right:7%;bottom:52px;padding:8px 8px 10px;
  }
  .gfr-terminal-view__screen.is-page-background .gfr-terminal-view__heading,
  .gfr-terminal-view__screen.is-page-mixed .gfr-terminal-view__heading{
    font-size:clamp(21px,6.6vw,29px);
  }
  .gfr-terminal-view__screen.is-page-background .gfr-terminal-view__text,
  .gfr-terminal-view__screen.is-page-mixed .gfr-terminal-view__text{
    font-size:clamp(11.5px,3.55vw,15px);
    line-height:1.40;
  }
}


/* RC2.61 — Paged Terminal Reader */
.gfr-terminal-view__continue{display:block;margin:18px 0 0 auto;padding:7px 13px;border:1px solid rgba(var(--gfr-stage-primary-rgb),.62);background:rgba(0,0,0,.38);color:var(--gfr-highlight);font:inherit;font-size:clamp(11px,2vw,14px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-shadow:0 0 6px rgba(var(--gfr-stage-primary-rgb),.28)}
.gfr-terminal-view__continue[hidden]{display:none !important}
.gfr-terminal-view__continue:hover,.gfr-terminal-view__continue:focus-visible{background:rgba(var(--gfr-stage-primary-rgb),.12);outline:1px solid rgba(var(--gfr-stage-primary-rgb),.35)}
.gfr-terminal-view__continue.is-complete{opacity:.58;cursor:default}
@media(max-width:520px){.gfr-terminal-view__continue{margin-top:14px;font-size:11px;padding:6px 10px}}


/* RC2.65 — CRT roll speed + selected signal lift -------------------------- */
.gfr-jukebox::after{
  animation-duration:calc(23s - (var(--gfr-stage-crt-roll-speed) * 15s)) !important;
}
.gfr-terminal-view::after{
  animation-duration:calc(23s - (var(--gfr-stage-crt-roll-speed) * 15s)) !important;
}

/* Stronger signal lock when a collection / album is actively selected. */
.gfr-jukebox.has-album-selection .gfr-hero-idle.is-album-info .gfr-hero-idle-asset img{
  opacity:.21 !important;
  filter:brightness(.82) saturate(.98) contrast(1.08) !important;
}
.gfr-jukebox.has-album-selection .gfr-album-card.is-active .gfr-album-art img{
  filter:brightness(1.14) saturate(1.15) contrast(1.08) !important;
  filter:
    brightness(1.14)
    saturate(1.15)
    contrast(1.08)
    drop-shadow(0 0 8px rgba(var(--gfr-stage-primary-rgb),.22)) !important;
}
.gfr-jukebox.has-album-selection .gfr-card.is-active .gfr-cover img,
.gfr-jukebox.has-album-selection .gfr-card.is-playing .gfr-cover img{
  filter:
    brightness(1.16)
    saturate(1.22)
    contrast(1.12)
    drop-shadow(0 0 7px rgba(var(--gfr-stage-primary-rgb),.18))
    drop-shadow(0 0 18px rgba(var(--gfr-stage-primary-rgb),.07)) !important;
}

/* Login cursors disappear completely once authentication has completed. */
.gfr-boot-user:not(.is-typing)::after,
.gfr-boot-pass:not(.is-typing)::after,
.gfr-boot-welcome:not(.is-typing)::after{
  display:none !important;
}


/* RC2.66 — Web ambient / cursor / signal lift hotfix ---------------------- */
.gfr-boot.is-auth-complete .gfr-boot__field::after,
.gfr-boot.is-auth-complete .gfr-boot__log::after,
.gfr-boot.is-auth-complete .gfr-boot__welcome::after{
  display:none !important;
  content:none !important;
  animation:none !important;
}
.gfr-album-card.is-selected{
  border-color:rgba(var(--gfr-stage-primary-rgb),.96) !important;
  background:rgba(var(--gfr-stage-primary-rgb),.085) !important;
  box-shadow:inset 0 0 24px rgba(var(--gfr-stage-primary-rgb),.10),0 0 15px rgba(var(--gfr-stage-primary-rgb),.14) !important;
}
.gfr-album-card.is-selected .gfr-album-art img{
  opacity:1 !important;
  filter:brightness(1.24) saturate(1.30) contrast(1.11) drop-shadow(0 0 8px rgba(var(--gfr-stage-primary-rgb),.26)) drop-shadow(0 0 20px rgba(var(--gfr-stage-primary-rgb),.11)) !important;
}
.gfr-card.is-active{
  border-color:rgba(var(--gfr-stage-primary-rgb),.95) !important;
  background:rgba(var(--gfr-stage-primary-rgb),.060) !important;
  box-shadow:inset 0 0 26px rgba(var(--gfr-stage-primary-rgb),.08),0 0 14px rgba(var(--gfr-stage-primary-rgb),.12) !important;
}
.gfr-card.is-active .gfr-cover img{
  opacity:1 !important;
  filter:brightness(1.22) saturate(1.32) contrast(1.14) drop-shadow(0 0 9px rgba(var(--gfr-stage-primary-rgb),.24)) drop-shadow(0 0 24px rgba(var(--gfr-stage-primary-rgb),.09)) !important;
}
.gfr-card.is-active .gfr-title,.gfr-card.is-active .gfr-frequency{
  color:var(--gfr-highlight) !important;
  text-shadow:0 0 8px rgba(var(--gfr-stage-primary-rgb),.36) !important;
}
.gfr-jukebox.has-album-selection .gfr-hero-idle.is-album-info .gfr-hero-idle-asset img{
  opacity:.24 !important;
  filter:brightness(.90) saturate(1.08) contrast(1.11) !important;
}


/* RC2.67 — hard cursor kill after successful authentication. */
#gfr-noop{display:none}
.gfr-boot.is-auth-complete .gfr-boot__field::after,
.gfr-boot.is-auth-complete .gfr-boot__log::after,
.gfr-boot.is-auth-complete .gfr-boot__welcome::after{
  content:none !important;
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  animation:none !important;
}


/* RC2.75 — public creator credit / SEO-visible attribution ---------------- */
.gfr-creator-credit{
  margin-top:4px;
  font-size:clamp(9px,1.4vw,11px);
  letter-spacing:.08em;
  opacity:.62;
}


/* RC2.77 — Continuous Archive Reader --------------------------------------
   LORE / ABOUT behaves like one long terminal document. New chunks append
   below existing copy while the viewport follows the newest output, causing
   earlier text (and eventually the heading) to drift naturally upward. */
.gfr-terminal-view__screen.is-page-background .gfr-terminal-view__copy,
.gfr-terminal-view__screen.is-page-mixed .gfr-terminal-view__copy{
  max-height:calc(100% - 112px);
  overflow-y:hidden !important;
  overflow-x:hidden !important;
  scroll-behavior:auto;
  scrollbar-width:none;
}
.gfr-terminal-view__screen.is-page-background .gfr-terminal-view__copy::-webkit-scrollbar,
.gfr-terminal-view__screen.is-page-mixed .gfr-terminal-view__copy::-webkit-scrollbar{
  display:none;
}
.gfr-terminal-view__copy.has-reader-overflow{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.72) 4%,#000 11%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.72) 4%,#000 11%,#000 100%);
}

/* Keep the Continue row allocated even while hidden so clicking it cannot
   make the archive text jump down before the next section starts typing. */
.gfr-terminal-view__continue[hidden]{
  display:block !important;
  visibility:hidden !important;
  pointer-events:none !important;
  opacity:0 !important;
}
.gfr-terminal-view__continue:not([hidden]){
  visibility:visible;
  opacity:1;
}
@media(max-width:520px){
  .gfr-terminal-view__screen.is-page-background .gfr-terminal-view__copy,
  .gfr-terminal-view__screen.is-page-mixed .gfr-terminal-view__copy{
    max-height:calc(100% - 94px);
  }
}


/* RC2.78 — Archive status safe zones + page counter -----------------------
   The continuous reader is visually isolated from the fixed terminal HUD.
   This prevents scrolling body copy from colliding with ARCHIVE CHANNEL,
   NODE, ARCHIVE LINK READY or SIGNAL LOCKED. */
.gfr-terminal-view__topline{
  position:absolute !important;
  left:clamp(16px,4vw,32px);
  right:clamp(16px,4vw,32px);
  top:18px;
  z-index:6 !important;
  min-height:18px;
  align-items:center;
  white-space:nowrap;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(1,4,1,.74),rgba(1,4,1,.16),transparent);
}
.gfr-terminal-view__topline>span:first-child,
.gfr-terminal-view__footer>span:first-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gfr-terminal-view__topline>span:last-child,
.gfr-terminal-view__footer>span:last-child{
  flex:0 0 auto;
  text-align:right;
}

.gfr-terminal-view__footer{
  z-index:6 !important;
  min-height:18px;
  align-items:center;
  white-space:nowrap;
  pointer-events:none;
  background:linear-gradient(to top,rgba(1,4,1,.78),rgba(1,4,1,.18),transparent);
}

/* Reader stays between the HUD bars. Keeping bottom anchoring preserves the
   existing teletype feel while this reduced max-height protects the top HUD. */
.gfr-terminal-view__screen.is-page-background .gfr-terminal-view__copy,
.gfr-terminal-view__screen.is-page-mixed .gfr-terminal-view__copy{
  max-height:calc(100% - 158px) !important;
}

/* Counter + CONTINUE form one stable reader-control row. */
.gfr-terminal-view__reader-nav{
  min-height:42px;
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  flex-wrap:wrap;
}
.gfr-terminal-view__page-counter{
  margin-right:auto;
  color:color-mix(in srgb,var(--gfr-primary) 72%,#879787 28%);
  font-size:clamp(9px,1.6vw,12px);
  line-height:1;
  letter-spacing:.10em;
  white-space:nowrap;
  text-shadow:0 0 5px rgba(var(--gfr-stage-primary-rgb),.18);
  opacity:.78;
}
.gfr-terminal-view__reader-nav .gfr-terminal-view__continue{
  margin:0 !important;
}

/* Preserve the row while typing so the reader never jumps vertically. */
.gfr-terminal-view__reader-nav .gfr-terminal-view__continue[hidden]{
  display:block !important;
  visibility:hidden !important;
  pointer-events:none !important;
  opacity:0 !important;
}

@media(max-width:520px){
  .gfr-terminal-view__topline{
    left:14px;
    right:14px;
    top:13px;
    gap:8px;
  }
  .gfr-terminal-view__screen.is-page-background .gfr-terminal-view__copy,
  .gfr-terminal-view__screen.is-page-mixed .gfr-terminal-view__copy{
    max-height:calc(100% - 132px) !important;
  }
  .gfr-terminal-view__reader-nav{
    min-height:36px;
    gap:8px;
  }
  .gfr-terminal-view__page-counter{
    font-size:9px;
  }
}


/* RC2.80 — real Archive HUD top / bottom split. */
.gfr-terminal-view__screen > .gfr-terminal-view__topline{
  position:absolute !important;
  z-index:8 !important;
  top:18px !important;
  bottom:auto !important;
  left:clamp(16px,4vw,32px) !important;
  right:clamp(16px,4vw,32px) !important;
}
.gfr-terminal-view__screen > .gfr-terminal-view__footer{
  position:absolute !important;
  z-index:8 !important;
  top:auto !important;
  bottom:16px !important;
  left:clamp(16px,4vw,32px) !important;
  right:clamp(16px,4vw,32px) !important;
}
@media(max-width:520px){
  .gfr-terminal-view__screen > .gfr-terminal-view__topline{
    top:13px !important;
    left:14px !important;
    right:14px !important;
  }
  .gfr-terminal-view__screen > .gfr-terminal-view__footer{
    top:auto !important;
    bottom:12px !important;
    left:14px !important;
    right:14px !important;
  }
}


/* RC2.82 — YouTube internal-page CTA (inverse style) */
.gfr-terminal-view__external-link{
  min-height:32px;
  padding:6px 14px;
  border:1px solid color-mix(in srgb,var(--gfr-primary) 78%,transparent);
  background:color-mix(in srgb,var(--gfr-primary) 84%, rgba(255,255,255,.24));
  color:rgba(0,0,0,.88);
  font:inherit;
  font-size:clamp(10px,1.7vw,13px);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  text-shadow:none;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.22),
    0 0 10px rgba(var(--gfr-stage-primary-rgb),.18);
}
.gfr-terminal-view__external-link:hover,
.gfr-terminal-view__external-link:focus-visible{
  background:color-mix(in srgb,var(--gfr-primary) 92%, white 8%);
  color:rgba(0,0,0,.94);
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.28),
    0 0 14px rgba(var(--gfr-stage-primary-rgb),.24);
}
.gfr-terminal-view__external-link[hidden]{
  display:none !important;
}


/* RC2.83 — optional amber accent lane for small meta/navigation elements */
:root[data-gfr-accent="amber"] .gfr-terminal-view__topline,
:root[data-gfr-accent="amber"] .gfr-terminal-view__footer,
:root[data-gfr-accent="amber"] .gfr-terminal-view__page-counter,
:root[data-gfr-accent="amber"] .gfr-terminal-view__external-link,
:root[data-gfr-accent="amber"] .gfr-frequency,
:root[data-gfr-accent="amber"] .gfr-card-meta,
:root[data-gfr-accent="amber"] .gfr-demo-note,
:root[data-gfr-accent="amber"] .gfr-build-version,
:root[data-gfr-accent="amber"] .gfr-hero-frequency,
:root[data-gfr-accent="amber"] .gfr-hero-audio-state,
:root[data-gfr-accent="amber"] .gfr-hero__footer,
:root[data-gfr-accent="amber"] .gfr-hero__code,
:root[data-gfr-accent="amber"] .gfr-intro p{
  color:var(--gfr-accent) !important;
  text-shadow:0 0 6px rgba(var(--gfr-accent-rgb),.18);
}
:root[data-gfr-accent="amber"] .gfr-signal-meter{
  border-color:var(--gfr-accent);
  box-shadow:0 0 8px rgba(var(--gfr-accent-rgb),.16);
}
:root[data-gfr-accent="amber"] .gfr-signal-meter span{
  border-color:color-mix(in srgb,var(--gfr-accent) 58%,#3e3420);
}
:root[data-gfr-accent="amber"] .gfr-signal-meter span:nth-child(-n+7),
:root[data-gfr-accent="amber"] .gfr-terminal-view__continue,
:root[data-gfr-accent="amber"] .gfr-terminal-view__continue.is-complete{
  background:var(--gfr-accent);
  border-color:color-mix(in srgb,var(--gfr-accent) 78%,white 22%);
  color:var(--gfr-accent-contrast);
  text-shadow:none;
  box-shadow:0 0 8px rgba(var(--gfr-accent-rgb),.2);
}
:root[data-gfr-accent="amber"] .gfr-active-marker{color:var(--gfr-accent)}


/* RC2.86 — muted warm red HUD / metadata accent polish ---------------------------
   A low-blue oxidized broadcast red is reserved for tuned values and selected
   status markers so the green phosphor remains the dominant interface color. */
:root{
  --gfr-warm-red:#b85a46;
  --gfr-warm-red-bright:#d56a52;
  --gfr-warm-red-rgb:184,90,70;
  --gfr-warm-red-dark:#24100b;
}

/* Tuned frequency metadata */
.gfr-card .gfr-frequency{
  color:var(--gfr-warm-red) !important;
  text-shadow:0 0 6px rgba(var(--gfr-warm-red-rgb),.11) !important;
}
.gfr-card.is-active .gfr-frequency{
  color:var(--gfr-warm-red-bright) !important;
  text-shadow:0 0 8px rgba(var(--gfr-warm-red-rgb),.17) !important;
}

/* Runtime / RC readouts under the album strip */
.gfr-demo-note,
.gfr-demo-note.is-runtime,
.gfr-build-version{
  color:var(--gfr-warm-red) !important;
  text-shadow:0 0 5px rgba(var(--gfr-warm-red-rgb),.09) !important;
}

/* YouTube is the external / alternate broadcast lane. */
.gfr-app-nav__item[data-gfr-view="youtube"]{
  color:var(--gfr-warm-red) !important;
  border-color:color-mix(in srgb,var(--gfr-warm-red) 58%,#332019) !important;
  text-shadow:0 0 6px rgba(var(--gfr-warm-red-rgb),.10) !important;
}
.gfr-app-nav__item[data-gfr-view="youtube"]:hover,
.gfr-app-nav__item[data-gfr-view="youtube"]:focus-visible{
  color:var(--gfr-warm-red-bright) !important;
  border-color:var(--gfr-warm-red-bright) !important;
}
.gfr-app-nav__item[data-gfr-view="youtube"].is-active{
  color:var(--gfr-warm-red-dark) !important;
  background:var(--gfr-warm-red-bright) !important;
  border-color:var(--gfr-warm-red-bright) !important;
  text-shadow:none !important;
  box-shadow:0 0 11px rgba(var(--gfr-warm-red-rgb),.16),inset 0 0 0 2px rgba(0,0,0,.18) !important;
}

/* Main screen broadcast identity / live state */
.gfr-station-name,
#heroOnAir{
  color:var(--gfr-warm-red) !important;
  text-shadow:0 0 7px rgba(var(--gfr-warm-red-rgb),.13) !important;
}
#heroOnAir{
  color:var(--gfr-warm-red-bright) !important;
}



/* RC2.87 — initial login overlay hide hotfix -----------------------------
   The boot runtime already sets `hidden=true` after authentication, but the
   authored `.gfr-boot { display:grid }` can win during later repaint/layout
   passes and expose the completed login overlay again. Make hidden terminal
   state explicit. Re-auth from LORE/ABOUT/YOUTUBE remains unchanged because
   replayPlayerLogin() deliberately sets hidden=false before running. */
.gfr-boot[hidden]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* RC2.89 — muted hybrid registry summary polish ---------------------------
   System/category tokens use the existing oxidized warm-red lane, while the
   actual archive names/counts stay in dim phosphor green. This keeps the
   readout informative without competing with the album carousel. */
.gfr-registry-summary{
  width:min(94%,660px);
  margin:5px auto 16px;
  font-size:clamp(7px,1.48vw,9px);
  line-height:1.30;
  letter-spacing:.045em;
  color:color-mix(in srgb,var(--gfr-primary) 67%,transparent);
  opacity:.78;
}
.gfr-registry-summary__line{
  margin-top:3px;
  text-wrap:balance;
}
.gfr-registry-summary__label{
  color:color-mix(in srgb,var(--gfr-warm-red) 82%,transparent);
  text-shadow:0 0 3px rgba(var(--gfr-warm-red-rgb),.055);
  white-space:nowrap;
}
.gfr-registry-summary strong{
  color:color-mix(in srgb,var(--gfr-primary) 78%,#c2cec2 22%);
  font-weight:600;
  text-shadow:0 0 3px rgba(var(--gfr-stage-primary-rgb),.05);
}
#registryAlbums,
#registryCollections{
  color:color-mix(in srgb,var(--gfr-primary) 72%,#9daa9d 28%);
}
@media(max-width:520px){
  .gfr-registry-summary{
    width:96%;
    margin:4px auto 12px;
    font-size:7px;
    line-height:1.25;
    opacity:.74;
  }
}


/* RC2.90 — Experimental IN HERO archive reader ---------------------------
   LORE / ABOUT / internal YOUTUBE can dock into the existing Player hero.
   The page image is intentionally suppressed in this mode so the Godfaza
   hero/logo remains the visual source beneath the continuous reader. */
.gfr-hero--archive-active > :not(.gfr-terminal-view--hero-overlay):not(.gfr-hero__topline):not(.gfr-hero__footer){
  opacity:.22;
  filter:saturate(.72) brightness(.64);
  transition:opacity .18s ease,filter .18s ease;
}
.gfr-terminal-view--hero-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:38 !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  pointer-events:auto;
}
.gfr-terminal-view--hero-overlay .gfr-terminal-view__screen{
  position:absolute !important;
  inset:0 !important;
  min-height:0 !important;
  width:100%;
  height:100%;
  border:0 !important;
  border-radius:0 !important;
  padding:18px 20px 16px !important;
  background:linear-gradient(180deg,rgba(0,4,0,.30),rgba(0,3,0,.55)) !important;
  box-shadow:inset 0 0 38px rgba(0,0,0,.36) !important;
}
.gfr-terminal-view--hero-overlay .gfr-terminal-view__image-buffer{
  display:none !important;
}
.gfr-terminal-view--hero-overlay .gfr-terminal-view__copy{
  position:absolute !important;
  left:clamp(32px,7vw,64px) !important;
  right:clamp(32px,7vw,64px) !important;
  bottom:52px !important;
  width:auto !important;
  max-height:calc(100% - 116px) !important;
  margin:0 !important;
  overflow-y:hidden !important;
  z-index:3;
}
.gfr-terminal-view--hero-overlay .gfr-terminal-view__heading{
  font-size:clamp(20px,4.8vw,31px) !important;
}
.gfr-terminal-view--hero-overlay .gfr-terminal-view__text{
  font-size:clamp(11px,2.45vw,15px) !important;
  line-height:1.42 !important;
}
.gfr-terminal-view--hero-overlay .gfr-terminal-view__reader-nav{
  margin-top:12px !important;
}
.gfr-terminal-view--hero-overlay .gfr-terminal-view__topline,
.gfr-terminal-view--hero-overlay .gfr-terminal-view__footer{
  z-index:5 !important;
}
@media(max-width:520px){
  .gfr-terminal-view--hero-overlay .gfr-terminal-view__screen{
    padding:14px !important;
  }
  .gfr-terminal-view--hero-overlay .gfr-terminal-view__copy{
    left:22px !important;
    right:22px !important;
    bottom:44px !important;
    max-height:calc(100% - 96px) !important;
  }
}


/* RC2.91 — inline archive accent markup ----------------------------------- */
.gfr-inline-accent{
  color: var(--gfr-red-accent, #b85a46);
  opacity: .92;
  text-shadow: 0 0 4px rgba(184,90,70,.10);
}


/* RC2.93 — album / collection archive record in the main hero -------------
   Reuse the existing album lore data as a compact terminal readout. The
   selected cover remains a faint backdrop; foreground art is suppressed so
   the title + information read like the new in-hero archive channels. */
.gfr-hero-idle.is-album-info{
  min-height:500px;
}
.gfr-hero-idle.is-album-info .gfr-hero-idle-asset{
  inset:8px 0 26px;
}
.gfr-hero-idle.is-album-info .gfr-hero-idle-asset img{
  object-fit:cover !important;
  opacity:.105 !important;
  filter:brightness(.58) saturate(.68) contrast(1.02) !important;
  transform:scale(1.025);
}
.gfr-album-focus.is-archive-record{
  inset:54px 7% 42px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
}
.gfr-album-focus.is-archive-record .gfr-album-focus__art{
  display:none !important;
}
.gfr-album-focus.is-archive-record .gfr-album-focus__copy{
  width:min(88%,590px) !important;
  margin:0 !important;
  padding:18px 20px 20px;
  border-left:1px solid color-mix(in srgb,var(--gfr-primary) 64%,transparent);
  background:linear-gradient(90deg,rgba(0,0,0,.38),rgba(0,0,0,.10),transparent);
  text-align:left;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 88%,transparent 100%);
}
.gfr-album-focus.is-archive-record .gfr-album-focus__title{
  min-height:1.15em;
  font-size:clamp(22px,5.1vw,36px) !important;
  line-height:1.0;
  letter-spacing:.065em;
  color:var(--gfr-highlight);
  text-shadow:0 0 8px rgba(var(--gfr-stage-primary-rgb),.20);
}
.gfr-album-focus.is-archive-record .gfr-album-focus__lore{
  min-height:0;
  max-height:none !important;
  overflow:visible !important;
  margin-top:20px !important;
  font-size:clamp(11px,2.25vw,15px) !important;
  line-height:1.42 !important;
  letter-spacing:.03em;
  color:color-mix(in srgb,var(--gfr-primary) 82%,#dcdcdc 18%);
  text-shadow:0 0 5px rgba(var(--gfr-stage-primary-rgb),.10);
}
.gfr-album-focus.is-archive-record .gfr-inline-accent{
  color:var(--gfr-red-accent,#b85a46);
  opacity:.94;
}
@media(max-width:520px){
  .gfr-hero-idle.is-album-info{min-height:470px}
  .gfr-album-focus.is-archive-record{inset:46px 5% 36px !important}
  .gfr-album-focus.is-archive-record .gfr-album-focus__copy{
    width:94% !important;
    padding:15px 15px 17px;
  }
  .gfr-album-focus.is-archive-record .gfr-album-focus__title{
    font-size:clamp(18px,6vw,27px) !important;
  }
  .gfr-album-focus.is-archive-record .gfr-album-focus__lore{
    margin-top:15px !important;
    font-size:clamp(10px,3.1vw,13px) !important;
    line-height:1.35 !important;
  }
}


/* RC2.95 — deterministic album archive-record visibility ----------------- */
.gfr-hero-idle.is-album-info .gfr-album-focus.is-archive-record:not([hidden]){
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:12 !important;
}
.gfr-hero-idle.is-album-info .gfr-album-focus.is-archive-record .gfr-album-focus__copy{
  position:relative;
  z-index:13;
}


/* RC2.98 — stable master geometry + true bottom-up album archive reader -- */
/* Album selection must never change the master-screen height. Keep the
   normal authored hero image in document flow and only dim its appearance. */
.gfr-hero-idle.is-album-info{
  min-height:0 !important;
  width:100% !important;
}
.gfr-hero-idle.is-album-info .gfr-hero-idle-asset{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  display:block !important;
  padding:12px !important;
}
.gfr-hero-idle.is-album-info .gfr-hero-idle-asset img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 auto !important;
  opacity:.16 !important;
  transform:none !important;
  filter:brightness(.62) saturate(.72) contrast(1.02) !important;
}

/* The record itself is an overlay over that unchanged master geometry. */
.gfr-hero-idle.is-album-info .gfr-album-focus.is-archive-record:not([hidden]){
  position:absolute !important;
  inset:0 !important;
  z-index:12 !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  align-items:stretch !important;
  justify-content:flex-end !important;
  padding:54px 7% 46px !important;
  pointer-events:none;
}
.gfr-album-focus.is-archive-record .gfr-album-focus__art{
  display:none !important;
}
.gfr-album-focus.is-archive-record .gfr-album-focus__copy{
  position:relative !important;
  z-index:13 !important;
  width:min(88%,590px) !important;
  height:58% !important;
  max-height:58% !important;
  margin:0 !important;
  padding:18px 20px 20px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  overflow:hidden !important;
  text-align:left !important;
  border-left:1px solid color-mix(in srgb,var(--gfr-primary) 64%,transparent);
  background:linear-gradient(90deg,rgba(0,0,0,.38),rgba(0,0,0,.10),transparent);
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 100%);
}
.gfr-album-focus.is-archive-record .gfr-album-focus__copy::-webkit-scrollbar{display:none}
.gfr-album-focus.is-archive-record .gfr-album-focus__title{
  flex:0 0 auto !important;
  min-height:1.15em;
  font-size:clamp(22px,5.1vw,36px) !important;
  line-height:1.0 !important;
  letter-spacing:.065em;
  color:var(--gfr-highlight);
  text-shadow:0 0 8px rgba(var(--gfr-stage-primary-rgb),.20);
}
.gfr-album-focus.is-archive-record .gfr-album-focus__lore{
  flex:0 0 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  margin-top:20px !important;
  font-size:clamp(11px,2.25vw,15px) !important;
  line-height:1.42 !important;
  letter-spacing:.03em;
  color:color-mix(in srgb,var(--gfr-primary) 82%,#dcdcdc 18%);
  text-shadow:0 0 5px rgba(var(--gfr-stage-primary-rgb),.10);
}
.gfr-album-focus.is-archive-record .gfr-inline-accent{
  color:var(--gfr-red-accent,#b85a46);
  opacity:.94;
}
@media(max-width:700px){
  .gfr-hero-idle.is-album-info{
    aspect-ratio:1 / 1;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden;
  }
  .gfr-hero-idle.is-album-info .gfr-hero-idle-asset{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    padding:10px !important;
  }
  .gfr-hero-idle.is-album-info .gfr-hero-idle-asset img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }
  .gfr-hero-idle.is-album-info .gfr-album-focus.is-archive-record:not([hidden]){
    padding:44px 5% 34px !important;
  }
  .gfr-album-focus.is-archive-record .gfr-album-focus__copy{
    width:94% !important;
    height:61% !important;
    max-height:61% !important;
    padding:15px 15px 17px !important;
  }
  .gfr-album-focus.is-archive-record .gfr-album-focus__title{
    font-size:clamp(18px,6vw,27px) !important;
  }
  .gfr-album-focus.is-archive-record .gfr-album-focus__lore{
    margin-top:15px !important;
    font-size:clamp(10px,3.1vw,13px) !important;
    line-height:1.35 !important;
  }
}


/* RC2.99 — Album overlay master geometry lock -----------------------------
   Album info is now a pure overlay. Selection must never modify the master
   hero box or resize the Godfaza logo underneath it. */
.gfr-hero-idle.is-album-info{
  position:relative !important;
  min-height:390px !important;
  height:auto !important;
  width:100% !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
}

/* Exact normal master-hero geometry: same absolute box used when no album
   is selected. Only visual opacity/filter changes. */
.gfr-hero-idle.is-album-info .gfr-hero-idle-asset{
  position:absolute !important;
  inset:10px 0 18px !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  transform:none !important;
}
.gfr-hero-idle.is-album-info .gfr-hero-idle-asset img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
  opacity:.16 !important;
  filter:brightness(.62) saturate(.72) contrast(1.02) !important;
}

/* Reader owns only an overlay layer. It has no layout influence on heroIdle. */
.gfr-hero-idle.is-album-info .gfr-album-focus.is-archive-record:not([hidden]){
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:54px 7% 46px !important;
  z-index:12 !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:flex-end !important;
  pointer-events:none !important;
}

/* Kill previous responsive square/resize experiments for album mode. */
@media(max-width:700px){
  .gfr-hero-idle.is-album-info{
    min-height:390px !important;
    height:auto !important;
    aspect-ratio:auto !important;
  }
  .gfr-hero-idle.is-album-info .gfr-hero-idle-asset{
    position:absolute !important;
    inset:10px 0 18px !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
  }
  .gfr-hero-idle.is-album-info .gfr-hero-idle-asset img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }
}
@media(max-width:520px){
  .gfr-hero-idle.is-album-info{
    min-height:390px !important;
  }
  .gfr-hero-idle.is-album-info .gfr-album-focus.is-archive-record:not([hidden]){
    padding:44px 5% 34px !important;
  }
}


/* RC3.00 — Album archive uses the same hero overlay path as LORE / ABOUT ---
   No album-specific geometry is applied to heroIdle or the master logo. */
.gfr-album-archive-reader.gfr-terminal-view--hero-overlay{
  pointer-events:none !important;
}
.gfr-album-archive-reader.gfr-terminal-view--hero-overlay .gfr-terminal-view__screen{
  background:linear-gradient(180deg,rgba(0,4,0,.18),rgba(0,3,0,.38)) !important;
}
.gfr-album-archive-reader.gfr-terminal-view--hero-overlay .gfr-terminal-view__copy{
  bottom:58px !important;
  max-height:calc(100% - 122px) !important;
}
.gfr-album-archive-reader .gfr-terminal-view__heading{
  font-size:clamp(20px,4.6vw,30px) !important;
}
.gfr-album-archive-reader .gfr-terminal-view__text{
  font-size:clamp(10px,2.15vw,14px) !important;
  line-height:1.42 !important;
}
.gfr-hero--album-archive-active > :not(.gfr-terminal-view--hero-overlay):not(.gfr-hero__topline):not(.gfr-hero__footer){
  opacity:.24;
  filter:saturate(.72) brightness(.66);
}
@media(max-width:520px){
  .gfr-album-archive-reader.gfr-terminal-view--hero-overlay .gfr-terminal-view__copy{
    bottom:46px !important;
    max-height:calc(100% - 102px) !important;
  }
}