/* ===================================================================
   GUNFINGA — TRANSMISSION FROM BELOW THE NOISE
   Pirate-broadcast system look (from the FINGATRON stream overlays):
   ice-blue monochrome terminal, system tiles with corner brackets, RGB rip,
   scanlines, block-char signal bars, holo logo — plus graffiti tags,
   stickers and a spray wall. Fonts: JetBrains Mono (system), Rubik Mono One
   (iconic). Graffiti fonts were dropped on 2026-09-15 (Bastian).
   Class names are wired to js/main.js + js/fx.js — keep them.
   =================================================================== */
:root {
  color-scheme: dark;
  --bg: #000; --bg2: #04060a; --panel: rgba(4,7,12,0.82); --panel-2: rgba(6,10,16,0.9);
  --ice: #7fc4ff; --ice2: #dff0ff; --ice-dim: rgba(150,200,245,0.75); --ice-faint: rgba(150,200,245,0.4);
  --line: rgba(150,200,245,0.18); --line-hot: rgba(190,225,255,0.7);
  --acid: #e8ff3a; --red: #ff3a4e; --pink: #ff2e88; --green: #7fe08a;
  --text: #eef4fb; --mute: #8e9bb0; --faint: #4f5a6b;
  --ice-rgb: 127, 196, 255; --acid-rgb: 232, 255, 58;
  --sys: "JetBrains Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --pix: "VT323", "JetBrains Mono", monospace;    /* labels + accents, same face */
  --body: "VT323", "JetBrains Mono", monospace;  /* running copy — same bitmap face as the labels */
  --violet: #7b2cff; --cyan: #2ef2ff;
  --iconic: "Pixelify Sans", "Arial Black", Impact, sans-serif; /* only card/marquee titles */
  --tag: var(--iconic);
  --marker: var(--sys);
  --maxw: 1280px; --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --glow-ice: 0 0 18px rgba(140,200,255,0.55);
  /* aliases so release-page + legacy markup keep working */
  --display: var(--iconic); --mono: var(--sys); --label: var(--sys);
  --gold: var(--ice); --glow: var(--ice2); --bone: var(--text); --text-dim: var(--mute); --text-faint: var(--faint);
  --glitch: var(--pink); --glitch-dim: rgba(255,46,136,0.45);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 88px; }
section, .hero, .stack { scroll-margin-top: 88px; }
body {
  background: var(--bg); color: var(--text); font-family: var(--sys); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip; min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; color: inherit; }
a, button, .btn, .cap, .sticker, .tabbar a, .dubpad__btn, .knob__dial, .track__btn, .video__play, .playerbar__play, .playerbar__skip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.dubpad, .wall__frame, .knob__dial, .sticker, .playerbar__bar, .viewer__bar { touch-action: none; }
[hidden] { display: none !important; }
::selection { background: rgba(var(--ice-rgb), 0.35); color: #fff; }
:focus-visible { outline: 1px solid var(--ice); outline-offset: 3px; }

/* ----- atmosphere ----- */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; background: #000; }
.spotlight { position: fixed; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 30%), rgba(var(--ice-rgb), 0.07), transparent 70%); }
.fx-lines { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.14; background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.4) 0 1px, transparent 1px 3px); }
.fx-tear { position: fixed; left: 0; right: 0; height: 84px; top: 40%; z-index: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(255,40,40,0.12), rgba(255,255,255,0.10) 40%, rgba(60,110,255,0.14)); animation: tear 7s steps(1, end) infinite; }
@keyframes tear {
  0%, 62%, 100% { opacity: 0; transform: translate(0, 0); } 63% { opacity: 0.85; transform: translate(-24px, -90px); }
  64% { opacity: 0.5; transform: translate(18px, 130px); } 65% { opacity: 0.9; transform: translate(-9px, -30px); } 66% { opacity: 0; }
  88% { opacity: 0.7; transform: translate(26px, 210px); } 89% { opacity: 0; }
}
.fx-grid { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.05; background: linear-gradient(rgba(var(--ice-rgb), 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ice-rgb), 0.5) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%); }

/* ----- sparks (signal button) ----- */
.spark { position: fixed; z-index: 199; pointer-events: none; width: 6px; height: 6px; background: var(--ice2); box-shadow: 0 0 10px var(--ice); transform: translate(-50%, -50%); animation: spark 0.7s ease-out forwards; }
@keyframes spark { from { opacity: 0.9; } to { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, 20px)) scale(0.2); } }

/* ----- shell ----- */
.shell { position: relative; width: min(var(--maxw), calc(100% - 32px)); margin: 0 auto; padding: 0 0 60px; } /* no z-index: the sticker layer (z 30) must sit between panels and the sticky bars (z 40+) */
.wrap { width: 100%; }
.content { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
.sep { display: flex; align-items: center; gap: 10px; margin: -4px 0; font-family: var(--sys); font-size: 11px; line-height: 1; color: var(--ice-faint); user-select: none; }
.sep i { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-style: normal; letter-spacing: 0.05em; opacity: 0.8; }
.sep i:first-child { direction: rtl; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.sep i:last-child { -webkit-mask-image: linear-gradient(270deg, transparent, #000 35%); mask-image: linear-gradient(270deg, transparent, #000 35%); }
.sep span { font-family: var(--pix); font-size: 16px; letter-spacing: 0.18em; color: var(--acid); white-space: nowrap; }
.sep .sep__hot { color: var(--ice2); text-shadow: 0 0 8px rgba(190,225,255,0.8); }
.stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ----- system tile (from the overlays: dark, corner brackets, no rounding) ----- */
.tile, .panel, .section { contain: layout style; position: relative; z-index: auto; display: block; padding: clamp(18px, 2.6vw, 30px);
  background: linear-gradient(160deg, rgba(4,7,12,0.88) 0%, rgba(2,4,8,0.80) 100%);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(190,225,255,0.10), 0 8px 28px rgba(0,0,0,0.45); }
.tile::before, .tile::after, .panel::before, .panel::after, .section::before, .section::after { content: ""; position: absolute; width: 13px; height: 13px; pointer-events: none; }
.tile::before, .panel::before, .section::before { left: -1px; top: -1px; border-left: 2px solid var(--line-hot); border-top: 2px solid var(--line-hot); }
.tile::after, .panel::after, .section::after { right: -1px; bottom: -1px; border-right: 2px solid var(--line-hot); border-bottom: 2px solid var(--line-hot); }
.tile--flat { background: rgba(2,4,8,0.6); box-shadow: none; }

/* ----- type ----- */
.sys { font-family: var(--sys); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice-dim); }
.eyebrow, .section-label { display: inline-block; font-family: var(--sys); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ice-dim); }
.section-label::before { content: "// "; color: var(--faint); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-tag { font-family: var(--sys); font-size: 11px; letter-spacing: 0.2em; color: var(--faint); }
.h-iconic { font-family: var(--iconic); font-weight: 900; font-size: clamp(1.4rem, 3.4vw, 2.4rem); line-height: 1.12; letter-spacing: 0.02em; color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,0.9), 0 0 30px rgba(140,200,255,0.35); margin-top: 10px; }
.sec-title { font-family: var(--iconic); font-weight: 900; font-size: clamp(1.4rem, 3.4vw, 2.4rem); line-height: 1.12; color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,0.9), 0 0 30px rgba(140,200,255,0.35); margin-top: 10px; }
.big-headline { font-family: var(--iconic); font-weight: 900; font-size: clamp(1.4rem, 3.4vw, 2.4rem); line-height: 1.12; color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,0.9), 0 0 30px rgba(140,200,255,0.35); margin-top: 10px; }
.sec-lead, .small, .hero__lead, .about__text, .rel-desc, .album__desc, .rel-tagline, .imprint__text, .credits dd {
  font-family: var(--body); letter-spacing: 0.015em; line-height: 1.22;
}
/* VT323 has no bold weight — mark emphasis with colour instead */
.sec-lead b, .small b, .hero__lead b, .about__text b, .rel-desc b, .album__desc b { font-weight: 400; color: var(--acid); }
.sec-lead, .small { color: var(--mute); font-size: 19px; max-width: 62ch; margin-top: 10px; }



/* RGB rip — the overlay's signature glitch */
.rip { animation: rip 0.34s steps(2, end) 2; }
@keyframes rip {
  0%, 100% { transform: translateX(0); text-shadow: 0 2px 22px rgba(0,0,0,0.9); }
  35% { transform: translateX(3px); text-shadow: -4px 0 0 rgba(255,40,40,0.9), 4px 0 0 rgba(60,110,255,0.9); }
  70% { transform: translateX(-2px); text-shadow: 4px 0 0 rgba(255,40,40,0.9), -4px 0 0 rgba(60,110,255,0.9); }
}
.rip-hover:hover { animation: rip 0.34s steps(2, end) infinite; }

/* ----- graffiti tags + stickers ----- */
.tag { position: absolute; pointer-events: none; font-family: var(--tag); line-height: 1; white-space: nowrap; user-select: none; z-index: 0;
  color: var(--acid); opacity: 0.85; filter: url(#spray) drop-shadow(0 0 12px rgba(232,255,58,0.35)); mix-blend-mode: screen; }
.tag--ice { color: var(--ice); filter: url(#spray) drop-shadow(0 0 14px rgba(127,196,255,0.45)); }
.tag--pink { color: var(--pink); filter: url(#spray) drop-shadow(0 0 14px rgba(255,46,136,0.45)); }
.tag--white { color: #fff; opacity: 0.55; filter: url(#spray) drop-shadow(0 0 10px rgba(255,255,255,0.35)); }
.tag--marker { font-family: var(--marker); filter: none; opacity: 0.7; mix-blend-mode: normal; }
.sticker { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; font-family: var(--sys); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  background: #eef4fb; color: #05070b; border: 2px solid #05070b; box-shadow: 3px 3px 0 rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.4); transform: rotate(var(--r, -4deg)); user-select: none; touch-action: none; }
.sticker--acid { background: var(--acid); }
.sticker--ice { background: var(--ice); }
.sticker--pink { background: var(--pink); color: #fff; }
.sticker--black { background: #05070b; color: var(--ice2); border-color: var(--ice2); }
.sticker--icon { padding: 0; border: 0; background: transparent; box-shadow: none; width: 40px; height: 40px; filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.6)); }
.sticker--icon svg { width: 100%; height: 100%; display: block; }
.sticker--ufo { width: 52px; height: 44px; }
.sticker--unicorn { width: 46px; height: 46px; }
.sticker--rainbow { width: 62px; height: 35px; }
.sticker--vinyl { width: 44px; height: 44px; } .sticker--yo { width: 56px; height: 43px; } .sticker--tape { width: 56px; height: 37px; } .sticker--alien { width: 38px; height: 42px; } .sticker--flame { width: 36px; height: 46px; }
.sticker--gf { width: 58px; height: 36px; filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.6)) drop-shadow(0 0 10px rgba(150,205,255,0.7)); }
.sticker--bolt { width: 34px; height: 40px; filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.6)) drop-shadow(0 0 10px rgba(232,255,58,0.6)); }
.sticker--icon.is-drag { box-shadow: none; filter: drop-shadow(6px 9px 0 rgba(0,0,0,0.6)); }
.sticker.is-drag { cursor: grabbing; z-index: 50; box-shadow: 8px 10px 0 rgba(0,0,0,0.6); transform: rotate(var(--r, -4deg)) scale(1.06); }
.sticker.is-free { cursor: grab; }
.sticker .gf { width: 16px; height: auto; filter: brightness(0); }
.sticker--black .gf, .sticker--pink .gf { filter: brightness(0) invert(1); }

/* ----- topbar ----- */
.topbar { position: sticky; top: 10px; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; margin: 0 0 16px;
  background: linear-gradient(160deg, rgba(6,9,14,0.97), rgba(3,5,9,0.96)); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(190,225,255,0.10), 0 8px 28px rgba(0,0,0,0.45); }
.topbar::before, .topbar::after { content: ""; position: absolute; width: 13px; height: 13px; pointer-events: none; }
.topbar { box-shadow: inset 0 1px 0 rgba(190,225,255,0.10), 0 8px 28px rgba(0,0,0,0.45), 0 -14px 0 0 #000; }
.topbar::before { left: -1px; top: -1px; border-left: 2px solid var(--line-hot); border-top: 2px solid var(--line-hot); }
.topbar::after { right: -1px; bottom: -1px; border-right: 2px solid var(--line-hot); border-bottom: 2px solid var(--line-hot); }
.brand, .topbar__brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 0; }
.brand__mark { height: 22px; width: auto; filter: drop-shadow(0 0 8px rgba(150,205,255,0.6)); }
.brand__name { display: none; }
.pill, .topbar__sys { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); font-family: var(--sys); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice-dim); white-space: nowrap; }
.pill__mark { height: 14px; width: auto; filter: drop-shadow(0 0 6px rgba(150,205,255,0.6)); }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: puls 1.6s ease-in-out infinite; }
.pill__dot.aus { background: var(--green); box-shadow: 0 0 10px rgba(127,224,138,0.9); animation: none; }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
/* fake carrier indicator (top right) */
.carrier { display: inline-flex; align-items: center; gap: 8px; order: 0; margin-left: 4px; margin-right: 0; font-family: var(--sys); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ice2); white-space: nowrap; }
.carrier__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.carrier__bars i { display: block; width: 3px; background: rgba(150,200,245,0.25); transition: background 0.35s ease; }
.carrier__bars i:nth-child(1) { height: 4px; } .carrier__bars i:nth-child(2) { height: 6px; } .carrier__bars i:nth-child(3) { height: 8px; } .carrier__bars i:nth-child(4) { height: 11px; } .carrier__bars i:nth-child(5) { height: 14px; }
.carrier__bars i.on { background: var(--ice2); box-shadow: 0 0 6px rgba(190,225,255,0.8); }
.carrier__net { font-weight: 700; }
.carrier__tech { padding: 1px 5px; border: 1px solid var(--line-hot); font-size: 9px; letter-spacing: 0.12em; color: var(--ice-dim); }
.carrier.is-search .carrier__net { color: var(--ice-dim); animation: puls 0.8s steps(2, end) infinite; }
.carrier.is-live .carrier__tech { border-color: var(--red); color: #fff; background: var(--red); }
.carrier.is-glitch { animation: rip 0.3s steps(2, end) 1; }
.nav, .topbar__nav { display: flex; gap: 4px; flex-wrap: nowrap; flex-shrink: 0; margin-left: auto; }
.nav a, .topbar__nav a { color: var(--ice-dim); font-family: var(--sys); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 11px; border: 1px solid transparent; transition: 0.2s ease; }
.nav a:hover, .topbar__nav a:hover { color: #fff; border-color: var(--line); background: rgba(255,255,255,0.04); text-shadow: var(--glow-ice); }
.nav a.nav__hot { color: var(--acid); border-color: rgba(var(--acid-rgb), 0.4); }

@media (min-width: 901px) and (max-width: 1180px) { .nav a, .topbar__nav a { padding: 8px 7px; font-size: 10.5px; letter-spacing: 0.1em; } .nav, .topbar__nav { gap: 2px; } .carrier { gap: 6px; font-size: 10px; } }

/* ----- buttons ----- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sys); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 13px 20px; border: 1px solid var(--line-hot); color: var(--ice2); background: rgba(6,10,16,0.7); cursor: pointer; transition: 0.2s ease; text-shadow: 0 0 10px rgba(140,200,255,0.4); }
.btn::before { content: ""; position: absolute; left: -1px; top: -1px; width: 9px; height: 9px; border-left: 2px solid var(--ice2); border-top: 2px solid var(--ice2); }
.btn:hover { background: rgba(127,196,255,0.14); box-shadow: 0 0 22px rgba(127,196,255,0.3); color: #fff; }
.btn--solid { background: var(--ice2); color: #05070b; border-color: var(--ice2); text-shadow: none; }
.btn--solid::before { border-color: #05070b; }
.btn--solid:hover { background: #fff; box-shadow: 0 0 30px rgba(190,225,255,0.55); color: #000; }
.btn--acid { background: var(--acid); color: #05070b; border-color: var(--acid); text-shadow: none; }
.btn--acid::before { border-color: #05070b; }
.btn--acid:hover { background: #f4ff8a; box-shadow: 0 0 30px rgba(232,255,58,0.5); color: #000; }
.btn--ghost { color: var(--ice-dim); border-color: var(--line); }
.btn--ghost:hover { color: #fff; }

/* ----- hero / broadcast ----- */
.hero { position: relative; overflow: hidden; isolation: isolate; min-height: min(86svh, 860px); border: 1px solid var(--line); background: #020306; box-shadow: 0 8px 28px rgba(0,0,0,0.45); }
.hero::before, .hero::after { content: ""; position: absolute; width: 16px; height: 16px; z-index: 5; pointer-events: none; }
.hero::before { left: -1px; top: -1px; border-left: 2px solid var(--line-hot); border-top: 2px solid var(--line-hot); }
.hero::after { right: -1px; bottom: -1px; border-right: 2px solid var(--line-hot); border-bottom: 2px solid var(--line-hot); }
.hero__veil { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 70% 40%, rgba(255,46,136,0.18), transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(123,44,255,0.08), transparent 45%), linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.7)); }
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "copy holo" "copy side"; gap: 16px clamp(20px, 4vw, 48px); padding: clamp(22px, 4vw, 48px); min-height: inherit; align-items: center; }
.hero__copy { grid-area: copy; }
.hero__holo { grid-area: holo; align-self: end; }
.hero__side { grid-area: side; align-self: start; }
.hero__copy { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hero__status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sys); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice2); }
.hero__status .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: puls 1.6s ease-in-out infinite; }
.hero__status .punkt.aus { background: var(--green); box-shadow: 0 0 10px rgba(127,224,138,0.9); animation: none; }
.hero__title { font-family: var(--iconic); font-weight: 900; font-size: clamp(1.75rem, 4.4vw, 3.5rem); line-height: 1.02; color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,0.9), 0 0 30px rgba(140,200,255,0.45); }
.hero__title em { font-style: normal; color: var(--ice2); }
.hero__title { font-size: clamp(2.6rem, 6vw, 6.4rem); white-space: nowrap; letter-spacing: -0.02em; max-width: 100%; }
.hero__copy { min-width: 0; }
.hero__titlerow { max-width: 100%; min-width: 0; }
@supports (font-size: 1cqw) {
  .hero__copy { container-type: inline-size; }
  .hero__title { font-size: clamp(2.8rem, 15.2cqw, 8.4rem); }
}
.hero__slogan { font-family: var(--sys); font-weight: 700; font-size: 13px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--acid); text-shadow: 0 0 14px rgba(232,255,58,0.5); }
.hero__lead { max-width: 52ch; color: var(--text); font-size: 20px; }
.hero__lead p + p { margin-top: 10px; }
.hero__lead .sig { font-family: var(--sys); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice-dim); }
.hero__lead .sig b { color: var(--acid); font-weight: 400; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hero__titlerow { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); }
.hero__logo { flex: 0 0 auto; height: clamp(64px, 8vw, 110px); aspect-ratio: 977.91 / 602.77; width: auto; display: block;
  -webkit-mask: url("../assets/logo-gunfinga-white.svg") center / contain no-repeat; mask: url("../assets/logo-gunfinga-white.svg") center / contain no-repeat;
  background: #fff; filter: drop-shadow(0 0 22px rgba(150,205,255,0.55)); transition: background 0.08s steps(2, end), filter 0.08s steps(2, end); }
body.is-broken .hero__title .wob { filter: hue-rotate(calc(-1 * var(--bh, 0deg))) saturate(2) sepia(1) hue-rotate(20deg) saturate(9) brightness(1.15) drop-shadow(0 0 18px rgba(232,255,58,0.9)); }
.hero__logo.stoerung { animation: markGlitch 0.42s steps(1, end) 1; }
@keyframes markGlitch {
  0% { opacity: 1; filter: drop-shadow(0 0 14px rgba(200,235,255,0.95)); transform: translateX(0); }
  22% { opacity: 1; filter: none; transform: translate(-3px, -2px); }
  45% { opacity: 0.28; filter: grayscale(1) brightness(0.55); transform: translate(2px, 2px); }
  68% { opacity: 0.9; filter: drop-shadow(0 0 8px rgba(150,205,255,0.6)); transform: translateX(-1px); }
  100% { opacity: 1; filter: drop-shadow(0 0 22px rgba(150,205,255,0.55)); transform: none; }
}
.hero__side { position: relative; display: flex; flex-direction: column; gap: 14px; }
.holo { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.holo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* --- holo transmission feed (gf_loop, shows up in bursts) --- */
.holo__feed { position: absolute; inset: 0; z-index: 2; background: #000; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; }
.holo__feed::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(232,255,58,0.55), inset 0 0 40px rgba(0,0,0,0.7); }
.holo__feed.is-on { visibility: visible; opacity: 1; }
.holo__feed.is-glitch { animation: feedGlitch 0.16s steps(2, end) infinite; }
.holo__feed-vid { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; filter: contrast(1.3) brightness(0.92) saturate(0.6); }
.holo__feed-scan { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.5;
  background: repeating-linear-gradient(180deg, rgba(150,200,245,0.16) 0 1px, transparent 1px 3px); }
.holo__feed-tag { position: absolute; left: 12px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--pix); font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acid);
  text-shadow: 0 1px 4px #000; }
.holo__feed-tag i { width: 7px; height: 7px; background: var(--red); box-shadow: 0 0 6px var(--red); animation: puls 1.1s steps(2, end) infinite; }
.holo__feed::after { content: ""; position: absolute; left: 0; right: 0; height: 22%; top: -30%;
  background: linear-gradient(180deg, transparent, rgba(190,225,255,0.22), transparent); mix-blend-mode: screen;
  animation: vhsRoll 1.6s linear infinite; }
@keyframes feedGlitch {
  0% { transform: translate(0, 0); clip-path: inset(0 0 0 0); filter: none; }
  25% { transform: translate(-3px, 1px); clip-path: inset(18% 0 34% 0); }
  50% { transform: translate(4px, -2px); clip-path: inset(46% 0 8% 0); filter: invert(1) hue-rotate(60deg); }
  75% { transform: translate(-2px, 0); clip-path: inset(6% 0 58% 0); }
  100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}
.holo__hint { position: absolute; left: 12px; bottom: 10px; font-family: var(--sys); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice-faint); }

/* status tile (the SIGNAL overlay) */
.status { padding: 14px 16px; font-family: var(--sys); color: var(--ice2); text-shadow: 0 2px 10px rgba(0,0,0,0.95); }
.status__row1 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; letter-spacing: 0.2em; }
.status .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: puls 1.6s ease-in-out infinite; flex: 0 0 auto; }
.status .punkt.aus { background: var(--green); box-shadow: 0 0 10px rgba(127,224,138,0.9); animation: none; }
.status__zeile { font-size: 12px; letter-spacing: 0.14em; margin-top: 8px; color: var(--ice-dim); }
.status__zeile .wert { color: rgba(230,245,255,0.95); }
.status__sig { font-size: 14px; letter-spacing: 0.05em; margin-top: 9px; color: rgba(160,230,255,0.9); }
.status__mark { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 54px; opacity: 0.32; filter: drop-shadow(0 0 10px rgba(150,205,255,0.5)); transition: opacity 0.5s ease; }
.status.live .status__mark { opacity: 0.75; animation: markPuls 2.4s ease-in-out infinite; }
@keyframes markPuls { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }
.status.armed { box-shadow: inset 0 0 0 1px #fff, 0 0 30px rgba(190,225,255,0.5); }

/* signal counter (fan service) */
.signal { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; }
.signal__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.signal__label { font-family: var(--sys); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ice-dim); }
.signal__count { font-family: var(--iconic); font-weight: 900; font-size: 1.6rem; line-height: 1; color: #fff; text-shadow: var(--glow-ice); }
.signal__count.bump { animation: bump 0.4s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); color: var(--acid); } 100% { transform: scale(1); } }
.burst { position: fixed; z-index: 150; pointer-events: none; font-family: var(--sys); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; color: var(--ice2); text-shadow: 0 0 10px var(--ice); transform: translate(-50%, -50%); animation: burst 1.1s ease-out forwards; white-space: nowrap; }
.burst.acid { color: var(--acid); text-shadow: 0 0 10px var(--acid); }
.burst.pink { color: var(--pink); text-shadow: 0 0 10px var(--pink); }
@keyframes burst { from { opacity: 1; } to { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, -120px)) rotate(var(--rot, 0deg)) scale(1.4); } }

/* ----- ticker ----- */
.ticker { contain: layout paint; overflow: hidden; border: 1px solid var(--line); background: rgba(2,4,8,0.7); padding: 9px 0; margin-top: 16px; }
.ticker__track { display: inline-flex; align-items: center; gap: 28px; white-space: nowrap; font-family: var(--sys); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ice-dim); animation: ticker 44s linear infinite; will-change: transform; backface-visibility: hidden; padding-left: 28px; }
.ticker__track i { font-style: normal; color: var(--acid); }
.ticker__track b { font-family: var(--pix); font-weight: 400; color: var(--acid); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----- releases ----- */
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; perspective: 1200px; }
.rel-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); background: rgba(2,4,8,0.75); overflow: hidden; transform-style: preserve-3d; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease; }
.rel-card:hover { border-color: var(--line-hot); box-shadow: 0 0 30px rgba(127,196,255,0.18); }
.rel-card::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-right: 2px solid var(--line-hot); border-bottom: 2px solid var(--line-hot); }
.rel-card__art { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: #05070b; overflow: hidden; border-bottom: 1px solid var(--line); }
.rel-card__art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) contrast(1.08); transition: filter 0.3s ease, transform 0.6s ease; }
.rel-card:hover .rel-card__art img { filter: saturate(1) contrast(1.1); transform: scale(1.03); }
.rel-card__type { font-family: var(--iconic); font-weight: 900; font-size: clamp(1.2rem, 2.6vw, 1.8rem); line-height: 1.15; text-align: center; padding: 20px; color: var(--ice2); text-shadow: 0 0 22px rgba(140,200,255,0.55), -2px 0 0 rgba(255,40,40,0.5), 2px 0 0 rgba(60,110,255,0.5); }
.rel-card__soon { position: absolute; top: 10px; left: 10px; font-family: var(--sys); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #05070b; background: var(--acid); padding: 4px 8px; transform: rotate(-3deg); box-shadow: 2px 2px 0 rgba(0,0,0,0.6); }
.rel-card__meta { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.rel-card__title { font-family: var(--iconic); font-weight: 700; font-size: 1rem; line-height: 1.15; color: #fff; }
.rel-card__feat { font-family: var(--sys); font-weight: 700; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pink); }
.rel-card__sub { font-family: var(--sys); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }

/* ----- spray wall ----- */
.wall { position: relative; }
.wall__frame { position: relative; margin-top: 16px; border: 1px solid var(--line-hot); background:
  linear-gradient(0deg, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 100% 64px,
  linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 128px 100%,
  linear-gradient(0deg, rgba(255,255,255,0.03) 1px, transparent 1px) 64px 32px / 100% 64px,
  radial-gradient(ellipse at 50% 100%, rgba(127,196,255,0.08), transparent 60%), #06080c;
  height: clamp(280px, 46vw, 520px); overflow: hidden; cursor: crosshair; touch-action: none; }
.wall__frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wall__seed { position: absolute; inset: 0; pointer-events: none; }
.wall__ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(46%, 300px); height: auto; opacity: 0.07; filter: drop-shadow(0 0 30px rgba(150,205,255,0.5)); }
.wall__hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--sys); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ice-faint); pointer-events: none; transition: opacity 0.4s ease; text-align: center; }
.wall__frame.is-used .wall__ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(46%, 300px); height: auto; opacity: 0.07; filter: drop-shadow(0 0 30px rgba(150,205,255,0.5)); }
.wall__hint { opacity: 0; }
.caps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cap { width: 34px; height: 34px; border: 2px solid rgba(255,255,255,0.25); background: var(--c); cursor: pointer; position: relative; transition: 0.2s ease; }
.cap::after { content: ""; position: absolute; left: 50%; top: -8px; width: 8px; height: 6px; background: #333; transform: translateX(-50%); }
.cap.is-active { border-color: #fff; box-shadow: 0 0 14px var(--c); transform: translateY(-2px); }
.caps__sep { flex: 1; }
.caps .btn { padding: 9px 14px; font-size: 10px; }

/* ----- dub station (unit) ----- */
.dubunit { position: relative; margin-top: 16px; border: 1px solid var(--line-hot); background: linear-gradient(180deg, #070a0f, #030407); padding: 14px; }
.screw { position: absolute; width: 8px; height: 8px; border: 1px solid var(--line-hot); background: #05070b; }
.screw::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 1px; background: rgba(190,225,255,0.5); transform: translate(-50%, -50%) rotate(35deg); }
.screw--tl { top: 6px; left: 6px; } .screw--tr { top: 6px; right: 6px; } .screw--bl { bottom: 6px; left: 6px; } .screw--br { bottom: 6px; right: 6px; }
.dubunit__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 6px 12px; border-bottom: 1px solid var(--line); font-family: var(--pix); font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; }
.dubunit__brand { color: var(--ice2); font-weight: 700; }
.dubunit__model { color: var(--faint); }
.dubunit__switch { display: inline-flex; gap: 0; }
.dubunit__switch .dubpad__btn { padding: 8px 14px; }
.dubunit__switch .dubpad__btn + .dubpad__btn { border-left: 0; }
.dubunit.is-rave .dubpad__btn.is-on, .dubunit.is-rave .dubpad__puck { background: var(--pink); border-color: var(--pink); color: #fff; }
.dubunit.is-rave .dubpad__puck { background: transparent; box-shadow: 0 0 18px rgba(255,46,136,0.85); }
.dubunit.is-rave .dubpad__note { color: var(--pink); }
.dubunit.is-rave .dubpad__grid { background-image: linear-gradient(rgba(255,46,136,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,46,136,0.14) 1px, transparent 1px); }
.dubunit.is-rave.is-live .led--sig { background: var(--pink); border-color: var(--pink); box-shadow: 0 0 10px rgba(255,46,136,0.95); }
.dubunit.is-rave .vu__fill { background: linear-gradient(90deg, var(--ice), var(--ice2) 50%, var(--pink)); }
.dubunit__leds { display: inline-flex; gap: 8px; }
.led { width: 8px; height: 8px; border-radius: 50%; background: #141a24; border: 1px solid var(--line); }
.led--pwr { background: var(--ice); border-color: var(--ice); box-shadow: 0 0 10px rgba(127,196,255,0.9); }
.dubunit.is-live .led--sig { background: var(--acid); border-color: var(--acid); box-shadow: 0 0 10px rgba(232,255,58,0.95); }
.dubunit__panel { display: grid; grid-template-columns: 1fr 240px; gap: 14px; padding-top: 14px; }
.dubpad { position: relative; height: clamp(220px, 34vw, 340px); border: 1px solid var(--line); background: #020306; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
.dubpad__canvas, .dubpad__grid, .dubpad__scan, .dubpad__puck, .dubpad__note, .dubpad__hint { pointer-events: none; }
.dubpad__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dubpad__grid { position: absolute; inset: 0; background: linear-gradient(rgba(var(--ice-rgb), 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ice-rgb), 0.14) 1px, transparent 1px); background-size: 32px 32px; opacity: 0.7; }
.dubpad__scan { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px); mix-blend-mode: screen; opacity: 0.5; }
.dubpad__puck { position: absolute; width: 18px; height: 18px; border: 2px solid var(--acid); box-shadow: 0 0 18px rgba(232,255,58,0.8); transform: translate(-50%, -50%); left: 50%; top: 50%; opacity: 0; transition: opacity 0.2s ease; }
.dubpad.is-playing .dubpad__puck { opacity: 1; }
.dubpad__puck2 { border-color: var(--pink); box-shadow: 0 0 18px rgba(255,46,136,0.8); opacity: 0; }
.dubpad__note { position: absolute; left: 12px; bottom: 10px; font-family: var(--pix); font-size: 17px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acid); opacity: 0; transition: opacity 0.2s ease; }
.dubpad.is-playing .dubpad__note { opacity: 0.95; }
.dubpad__hint { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--pix); font-size: 16px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ice-faint); transition: opacity 0.3s ease; }
.dubpad.is-playing .dubpad__hint { opacity: 0; }
.dubpad__ctrls { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 2; }
.dubpad__btn { font-family: var(--pix); font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; padding: 9px 12px; border: 1px solid var(--line-hot); background: rgba(2,4,8,0.7); color: var(--ice-dim); cursor: pointer; transition: 0.2s ease; }
.dubpad__btn:hover { color: #fff; border-color: #fff; }
.dubpad__btn.is-on { color: #05070b; background: var(--acid); border-color: var(--acid); }
.dubunit__rack { display: flex; flex-direction: column; gap: 14px; padding: 14px; border: 1px solid var(--line); background: rgba(2,4,8,0.5); }
.vu { height: 8px; background: rgba(255,255,255,0.08); overflow: hidden; }
.vu__fill { width: 4%; height: 100%; background: linear-gradient(90deg, var(--ice), var(--ice2) 62%, var(--acid)); box-shadow: 0 0 10px rgba(127,196,255,0.6); transition: width 0.07s linear; }
.knobs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 8px; }
.knob { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.knob__dial { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-hot); background: radial-gradient(circle at 50% 40%, #151b26, #05070b 70%); cursor: ns-resize; touch-action: none; transform: rotate(var(--rot, 0deg)); }
.knob__dial::after { content: ""; position: absolute; top: 4px; left: 50%; width: 2px; height: 12px; background: var(--ice2); transform: translateX(-50%); box-shadow: 0 0 8px rgba(190,225,255,0.9); }
.knob__dial:hover, .knob__dial:focus-visible { border-color: var(--ice2); outline: none; }
.knob label { font-family: var(--pix); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); }
.dubunit__ctrls { display: flex; gap: 6px; }
.dubunit__ctrls .dubpad__btn { flex: 1; text-align: center; }
.dubunit__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 6px 0; margin-top: 14px; border-top: 1px solid var(--line); font-family: var(--pix); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }

/* ----- video ----- */
.headline-eclipse { margin-bottom: 16px; }
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); background: #020306; cursor: pointer; }
.video__poster { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6) contrast(1.08); transition: filter 0.4s ease, transform 0.6s ease; }
.video:hover .video__poster { filter: saturate(0.9) contrast(1.1); transform: scale(1.02); }
.video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border: 1px solid var(--ice2); background: rgba(4,7,12,0.7); color: var(--ice2); display: grid; place-items: center; cursor: pointer; transition: 0.2s ease; box-shadow: 0 0 24px rgba(127,196,255,0.35); }
.video__play::before { content: ""; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px; border-left: 2px solid #fff; border-top: 2px solid #fff; }
.video__play:hover { background: var(--ice2); color: #05070b; }
.video__play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.video__sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.8)), repeating-linear-gradient(to bottom, rgba(255,255,255,0.06) 0 1px, transparent 1px 3px); }
.video__label { position: absolute; left: 14px; bottom: 12px; font-family: var(--sys); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice2); text-shadow: 0 2px 10px rgba(0,0,0,0.95); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video.is-playing .video__poster, .video.is-playing .video__play, .video.is-playing .video__sheen, .video.is-playing .video__label { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.video.is-soon .video__play { border-color: var(--pink); color: var(--pink); }
.transmissions__note { font-family: var(--sys); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 12px; }
.transmissions__note a { color: var(--ice); }

/* ----- operator (about) ----- */
.about__wrap { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.about__portrait { position: relative; margin: 0; border: 1px solid var(--line); overflow: hidden; background: #05070b; }
.about__portrait img { width: 100%; height: auto; filter: grayscale(0.7) contrast(1.15) brightness(0.9); transition: filter 0.4s ease; }
.about__portrait:hover img { filter: grayscale(0.2) contrast(1.05); }
.about__portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.06) 0 1px, transparent 1px 3px), linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.7)); }
.about__portrait-glow { display: none; }
.about__portrait figcaption { position: absolute; left: 12px; bottom: 10px; z-index: 1; font-family: var(--sys); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ice2); }
.about__copy { display: flex; flex-direction: column; gap: 12px; }
.about__text { font-size: 20px; color: var(--text); max-width: 50ch; line-height: 1.22; }
.about__text p + p { margin-top: 10px; }
.about__text b { color: var(--acid); font-weight: 400; text-shadow: 0 0 12px rgba(232,255,58,0.35); }
.spec { list-style: none; margin-top: 8px; border-top: 1px solid var(--line); }
.spec li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-family: var(--sys); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.spec li span { color: var(--faint); }
.spec li strong { font-weight: 400; color: var(--ice2); text-align: right; }

/* ----- imprints ----- */
.imprints { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.imprint { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line); background: rgba(2,4,8,0.7); transition: 0.3s ease; }
.imprint:hover { border-color: var(--line-hot); box-shadow: 0 0 24px rgba(127,196,255,0.18); }
.imprint__short { font-family: var(--sys); font-weight: 700; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ice); }
.imprint.world-glitch .imprint__short { color: var(--pink); }
.imprint__name { font-family: var(--iconic); font-weight: 700; font-size: 1rem; line-height: 1.15; color: #fff; }
.imprint__line { color: var(--mute); font-size: 0.92rem; }
.imprint__host { font-family: var(--sys); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-top: 8px; }
.imprint:hover .imprint__host { color: var(--ice2); }

/* ----- footer ----- */
.footer { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.footer__wrap, .footer__inner { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.footer__row { width: 100%; }
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--sys); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ice-dim); }
.footer__brand { display: inline-flex; align-items: center; gap: 12px; }
.footer__brand .brand__mark { height: 18px; filter: none; opacity: 0.6; }
.footer__mark-link, .footer__label { display: inline-flex; align-items: center; gap: 10px; color: var(--faint); transition: 0.2s ease; }
.footer__mark-link:hover, .footer__label:hover { color: var(--ice2); }
.footer__mark { height: 12px; width: auto; filter: brightness(0) invert(0.4); }
.footer__streams, .footer__links, .footer__nav { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.footer__streams a, .footer__links a, .footer__nav a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sys); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ice-dim); padding: 9px 12px; border: 1px solid var(--line); transition: 0.2s ease; }
.footer__streams a:hover, .footer__links a:hover, .footer__nav a:hover { color: #fff; border-color: var(--ice2); text-shadow: var(--glow-ice); }
.footer__streams .ic { width: 14px; height: 14px; }
.footer__line { font-family: var(--sys); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.footer__secret { font-family: var(--sys); font-size: 11px; color: var(--faint); letter-spacing: 0.18em; }


/* ----- mini player (in-page picture-in-picture) ----- */
.video__holder { border: 1px dashed var(--line); background: rgba(2,4,8,0.5); }
.video.is-mini { position: fixed; right: 16px; bottom: 16px; z-index: 65; width: min(46vw, 320px); aspect-ratio: 16 / 9; height: auto; border: 1px solid var(--line-hot); box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 24px rgba(127,196,255,0.25); cursor: default; }
.video__close, .video__back { position: absolute; top: 6px; z-index: 3; width: 30px; height: 30px; border: 1px solid var(--line-hot); background: rgba(2,4,8,0.85); color: var(--ice2); font-family: var(--sys); font-size: 14px; display: none; place-items: center; cursor: pointer; }
.video__close { right: 6px; } .video__back { right: 42px; font-size: 11px; }
.video.is-mini .video__close, .video.is-mini .video__back { display: grid; }
.video__onair { position: absolute; left: 12px; top: 12px; z-index: 2; font-family: var(--sys); font-weight: 700; font-size: 10px; letter-spacing: 0.2em; color: #fff; background: var(--red); padding: 4px 8px; box-shadow: 0 0 14px rgba(255,58,78,0.8); animation: puls 1.6s ease-in-out infinite; }
.video.is-onair .video__label { opacity: 1; pointer-events: none; }
body.is-onair .tabbar .tab-live, body.is-onair .pill__dot, body.is-onair .hero__status .punkt { animation: puls 1.2s ease-in-out infinite; }

/* ----- operator cam ----- */
.cam__stage { position: relative; margin-top: 16px; aspect-ratio: 3 / 4; max-height: 70vh; margin-inline: auto; width: min(100%, calc(70vh * 0.75)); border: 1px solid var(--line); background: #020306; overflow: hidden; }
.cam__stage canvas { width: 100%; height: 100%; display: block; object-fit: cover; }
.cam__stage.is-frozen::after { content: "CAPTURED · TAP TO RETAKE"; position: absolute; left: 50%; top: 14px; transform: translateX(-50%); font-family: var(--sys); font-size: 10px; letter-spacing: 0.24em; color: #05070b; background: var(--acid); padding: 4px 8px; }
.cam__idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-family: var(--sys); font-size: 11px; letter-spacing: 0.26em; color: var(--ice-faint); background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px); }
.cam__idle img { width: 34%; height: auto; opacity: 0.18; filter: drop-shadow(0 0 20px rgba(150,205,255,0.5)); }
.cam__stage.is-on .cam__idle { display: none; }
.cam__ctrls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 900px) {
  .video.is-mini { right: 10px; bottom: calc(74px + env(safe-area-inset-bottom)); width: 52vw; }
  body.has-player .video.is-mini { bottom: calc(74px + 58px + env(safe-area-inset-bottom)); }
  .cam__stage { width: 100%; max-height: none; }
  .cam__ctrls .btn { flex: 1 1 calc(50% - 4px); }
}

/* ----- ascii ----- */
.ascii { position: relative; font-family: var(--sys); white-space: pre; line-height: 1.05; margin: 0; padding: 0; overflow: hidden; max-width: 100%; color: var(--ice-dim); text-shadow: 0 0 8px rgba(127,196,255,0.35); user-select: none; }
.ascii--logo { font-size: 8px; letter-spacing: 0.02em; opacity: 0.85; margin: 26px auto 0; color: var(--ice); width: 100%; max-width: 560px; text-align: center; }
.ascii-wrap { position: relative; width: 100%; min-width: 0; max-width: 100%; height: 0; overflow: hidden; margin: 0 auto 4px; }
/* absolutely positioned: its 72-column layout width can never widen the footer, only the scaled box shows */
.ascii--banner { position: absolute; left: 50%; top: 0; display: block; font-size: 10px; letter-spacing: 0.04em; color: rgba(150,200,245,0.6); text-align: center; margin: 0; width: max-content; max-width: none; transform-origin: 50% 0; transform: translateX(-50%); overflow: visible; }
.status__spc { font-size: 13px; letter-spacing: 0.02em; margin-top: 4px; color: rgba(150,200,245,0.8); }
.status__spc span { color: var(--ice2); }
.syserr { position: fixed; z-index: 190; pointer-events: none; opacity: 0; max-width: 88vw; padding: 10px 12px; font-family: var(--sys); font-size: 12px; line-height: 1.35; letter-spacing: 0.08em; white-space: pre; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.95);
  background: rgba(2,4,8,0.9); border: 1px solid var(--line-hot); box-shadow: 0 0 24px rgba(127,196,255,0.25); transition: opacity 0.12s ease; }
.syserr::before { content: ""; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px; border-left: 2px solid var(--red); border-top: 2px solid var(--red); }
.syserr.on { opacity: 1; }
@media (max-width: 900px) { .ascii--logo { margin-top: 18px; max-width: none; }  .syserr { font-size: 11px; } }


/* ----- BREAK THIS PAGE ----- */
.btn--break { border-color: var(--red); color: #fff; background: rgba(255,58,78,0.14); text-shadow: 0 0 10px rgba(255,58,78,0.6); user-select: none; -webkit-user-select: none; touch-action: none; }
.btn--break::before { border-color: var(--red); }
.btn--break.is-on { background: var(--red); animation: rip 0.2s steps(2, end) infinite; }
body.is-broken .shell { animation: brokenShake 0.09s steps(2, end) infinite; filter: hue-rotate(var(--bh, 0deg)) contrast(1.3) saturate(1.6); }
body.is-broken .hero__title, body.is-broken .sec-title, body.is-broken .big-headline { animation: rip 0.14s steps(2, end) infinite, brokenSkew 0.22s steps(3, end) infinite; letter-spacing: 0.08em; }
body.is-broken .panel, body.is-broken .tile, body.is-broken .hero { animation: brokenJitter 0.12s steps(2, end) infinite; }
body.is-broken .fx-lines { opacity: 0.45; } body.is-broken .fx-tear { animation-duration: 0.6s; }
body.is-broken img, body.is-broken canvas { filter: invert(1) hue-rotate(180deg); }
body.is-broken .hero__logo, body.is-broken .brand__mark, body.is-broken .pill__mark { filter: none; }
body.is-broken::after { content: ""; position: fixed; inset: 0; z-index: 180; pointer-events: none; mix-blend-mode: difference; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0 2px, transparent 2px 9px); animation: vhsJitter 0.07s steps(2, end) infinite; }
@keyframes brokenShake { 0% { transform: translate(var(--bx, 0), var(--by, 0)); } 100% { transform: translate(calc(var(--bx, 0) * -1), calc(var(--by, 0) * -0.5)); } }
@keyframes brokenSkew { 0% { transform: skewX(0); } 33% { transform: skewX(-9deg) translateX(6px); } 66% { transform: skewX(6deg) translateX(-5px); } 100% { transform: skewX(0); } }
@keyframes brokenJitter { 0% { transform: translate(0, 0); } 100% { transform: translate(var(--by, 0), var(--bx, 0)); } }

/* ----- VOICE TOY ----- */
/* ----- GF VOX: the voice toy as a device ----- */
.vox { position: relative; margin-top: 16px; border: 1px solid var(--line-hot); background: linear-gradient(180deg, #070a0f, #030407); padding: 12px; }
.vox__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 0 4px 10px; border-bottom: 1px solid var(--line); font-family: var(--pix); font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice-dim); }
.vox__name { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.vox__name i { width: 8px; height: 8px; background: var(--acid); box-shadow: 0 0 8px var(--acid); }
.vox__model { color: var(--faint); }
.vox__led { display: inline-block; width: 10px; height: 10px; margin-left: 6px; background: #141a24; border: 1px solid var(--line); transition: background 0.08s; }
.vox__led.is-on { background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.vox__display { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: stretch; margin-top: 12px; padding: 10px; border: 1px solid var(--line-hot); background: #020306; }
.vox__readout { position: relative; display: flex; align-items: center; min-height: 52px; padding: 0 8px; font-family: var(--pix); font-size: 30px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acid); text-shadow: 0 0 12px rgba(232,255,58,0.55); overflow: hidden; white-space: nowrap; background: repeating-linear-gradient(180deg, rgba(150,200,245,0.06) 0 1px, transparent 1px 3px); }
.vox__word { white-space: nowrap; }
.vox__cursor { display: inline-block; width: 12px; height: 26px; margin-left: 4px; background: var(--acid); animation: blink 0.9s steps(1) infinite; }
.vox__hint { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 16px; letter-spacing: 0.22em; color: var(--faint); text-shadow: none; pointer-events: none; }
.vox__readout.is-full { color: #fff; text-shadow: 0 0 16px rgba(255,255,255,0.8), 0 0 30px rgba(232,255,58,0.8); animation: rip 0.3s steps(2, end) 3; }
.vox__readout.is-full .vox__cursor { background: #fff; }
.vox__mouth { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 4px; background: #05070b; border: 1px solid var(--line); font-family: var(--sys); font-size: 11px; line-height: 1.05; color: var(--pink); text-shadow: 0 0 8px rgba(255,46,136,0.6); white-space: pre; overflow: hidden; }
.vpads { display: grid; grid-template-columns: repeat(3, 1fr) 0.7fr 0.7fr; gap: 8px; margin-top: 12px; }
.vpad { position: relative; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px solid var(--line-hot); background: linear-gradient(180deg, #0d1219, #05070b); color: var(--ice2); font-family: var(--pix); font-size: 26px; line-height: 1; letter-spacing: 0.06em; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 4px 0 #000, inset 0 1px 0 rgba(255,255,255,0.06); transition: transform 0.06s, box-shadow 0.06s; }

.vpad i { position: absolute; right: 6px; top: 6px; width: 6px; height: 6px; background: #141a24; border: 1px solid var(--line); }
.vpad--soft { min-height: 96px; font-size: 14px; letter-spacing: 0.18em; color: var(--ice-dim); background: #05070b; }
.vpad:hover { border-color: var(--ice2); }
.vpad.is-hit { background: var(--acid); color: #05070b; border-color: var(--acid); transform: translateY(3px); box-shadow: 0 1px 0 #000, 0 0 26px rgba(232,255,58,0.6); }

.vpad.is-hit i { background: #05070b; border-color: #05070b; }
.vox .vfaders { margin-top: 12px; }
.vox .vnote { margin-top: 10px; }
@media (max-width: 640px) { .vox { padding: 10px; } .vox__display { grid-template-columns: 1fr 96px; padding: 8px; } .vox__readout { font-size: 26px; min-height: 48px; } .vpads { grid-template-columns: repeat(3, 1fr); } .vpad { min-height: 88px; font-size: 24px; } .vpad--soft { grid-column: span 1; min-height: 56px; } .vpads .vpad--soft:nth-of-type(4) { grid-column: 1 / 3; } }
.vfaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.vfader { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border: 1px solid var(--line); background: rgba(2,4,8,0.6); font-family: var(--sys); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice-dim); }
.vfader::before { content: ""; position: absolute; left: -1px; top: -1px; width: 8px; height: 8px; border-left: 2px solid var(--line-hot); border-top: 2px solid var(--line-hot); }
.vfader > span { display: flex; justify-content: space-between; }
.vfader b { color: var(--acid); font-size: 12px; }
.vfader__scale { height: 6px; background: repeating-linear-gradient(90deg, rgba(150,200,245,0.45) 0 1px, transparent 1px calc(100% / 10)); background-size: calc(100% - 1px) 100%; opacity: 0.6; margin: 0 14px -2px; }
.vfader input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; margin: 0; background: transparent; touch-action: pan-y; --p: 50%; }
.vfader input[type=range]::-webkit-slider-runnable-track { height: 6px; border: 1px solid var(--line-hot); background: linear-gradient(90deg, var(--acid) 0 var(--p), rgba(255,255,255,0.08) var(--p)); box-shadow: inset 0 1px 3px rgba(0,0,0,0.8); }
.vfader input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 26px; margin-top: -11px; border: 1px solid #000; border-radius: 2px; cursor: ew-resize;
  background: linear-gradient(180deg, #2a3140, #0d1017); box-shadow: 0 3px 0 #05070b, 0 6px 14px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.12);
  background-image: linear-gradient(90deg, transparent 0 15px, var(--acid) 15px 19px, transparent 19px), linear-gradient(180deg, #2a3140, #0d1017); }
.vfader input[type=range]::-moz-range-track { height: 6px; border: 1px solid var(--line-hot); background: rgba(255,255,255,0.08); }
.vfader input[type=range]::-moz-range-progress { height: 6px; background: var(--acid); }
.vfader input[type=range]::-moz-range-thumb { width: 34px; height: 26px; border: 1px solid #000; border-radius: 2px; background: linear-gradient(90deg, transparent 0 15px, var(--acid) 15px 19px, transparent 19px), linear-gradient(180deg, #2a3140, #0d1017); box-shadow: 0 3px 0 #05070b, 0 6px 14px rgba(0,0,0,0.7); }
.vfader input[type=range]:focus-visible { outline: none; }
.vfader input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--acid), 0 3px 0 #05070b; }
.vnote { font-family: var(--sys); font-size: 10px; letter-spacing: 0.1em; color: var(--faint); margin-top: 10px; }

/* ----- STICKER BOMB ----- */
.bomb-layer { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.bomb-layer .sticker { pointer-events: auto; position: absolute; }
.sticker.is-new { animation: stickPop 0.45s var(--ease); }
@keyframes stickPop { 0% { transform: rotate(var(--r, 0deg)) scale(0.2); } 60% { transform: rotate(var(--r, 0deg)) scale(1.25); } 100% { transform: rotate(var(--r, 0deg)) scale(1); } }
.tray { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 84px; gap: 10px; margin-top: 16px; padding: 12px; border: 1px dashed var(--line-hot); background: rgba(2,4,8,0.5); }
.tray .tray__item[class] { width: 100%; height: 100%; padding: 10px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255,255,255,0.03); cursor: pointer; transition: 0.15s ease; filter: none; box-shadow: none; }
.tray__item svg { width: 100%; height: 100%; max-height: 100%; display: block; }
.tray .tray__item.sticker--gf[class], .tray .tray__item.sticker--rainbow[class], .tray .tray__item.sticker--tape[class], .tray .tray__item.sticker--ufo[class], .tray .tray__item.sticker--yo[class] { padding: 12px 8px; }
.tray__item:hover, .tray__item:active { border-color: var(--acid); background: rgba(232,255,58,0.1); transform: translateY(-2px); }
@media (max-width: 900px) {
  .vpads { grid-template-columns: repeat(3, 1fr); }
  .vpad { min-height: 74px; }
  .vfaders { grid-template-columns: 1fr; }

  .signal .btn--break { margin-top: 2px; }
}


/* ----- merch ----- */
.merch__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.mcard { display: flex; flex-direction: column; border: 1px solid var(--line); background: rgba(2,4,8,0.7); overflow: hidden; transition: 0.25s ease; position: relative; }
.mcard::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-right: 2px solid var(--line-hot); border-bottom: 2px solid var(--line-hot); }
.mcard:hover { border-color: var(--line-hot); box-shadow: 0 0 26px rgba(127,196,255,0.2); transform: translateY(-2px); }
.mcard__art { display: block; aspect-ratio: 1; background: #05070b; border-bottom: 1px solid var(--line); }
.mcard__art img { width: 100%; height: 100%; object-fit: cover; }
.mcard__meta { display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 14px; }
.mcard__title { font-family: var(--iconic); font-weight: 700; font-size: 0.95rem; color: #fff; }
.mcard__sub { font-family: var(--sys); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.mcard__price { font-family: var(--sys); font-weight: 700; font-size: 13px; color: var(--acid); margin-top: 4px; }
.mcard__buy { position: absolute; right: 10px; top: 10px; font-family: var(--sys); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #05070b; background: var(--acid); padding: 4px 8px; box-shadow: 2px 2px 0 rgba(0,0,0,0.6); }
.merch__note { font-family: var(--sys); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 12px; }
.merch__note a { color: var(--ice); }
@media (max-width: 900px) {
  .merch__grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
  .tabbar { grid-template-columns: repeat(6, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; padding-left: 4px; padding-right: 4px; }
  .tabbar a { font-size: 10px; letter-spacing: 0.08em; }
  .tabbar a svg { width: 20px; height: 20px; }
}

/* ----- inline album player on the start page ----- */
.inline-player { margin-top: 14px; }
.inline-player__open { width: 100%; }
.inline-player__body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.inline-player .section { border: 0; padding: 0; background: transparent; box-shadow: none; }
.inline-player .section::before, .inline-player .section::after { display: none; }
.inline-player .album__head { display: none; }
.inline-player.is-open .inline-player__open { display: none; }
.inline-player__more { display: inline-block; margin-top: 14px; font-family: var(--sys); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ice); }

/* ----- lite / performance ----- */
@media (max-width: 900px) { .fx-lines, .fx-tear { mix-blend-mode: normal; } .fx-lines { opacity: 0.09; } .fx-tear { opacity: 0; animation-duration: 9s; } }
body.is-lite .fx-tear, body.is-lite .fx-grid, body.is-lite .spotlight { display: none; }
body.is-lite .fx-lines { animation: none; opacity: 0.07; mix-blend-mode: normal; }
body.is-lite .fx-scan::after, body.is-lite .ticker__track { animation-play-state: paused; }
body.is-lite .pill__dot, body.is-lite .punkt, body.is-lite .status.live .status__mark { animation: none; }
body.is-lite .hero__title { animation-duration: 1.2s; }
body.is-lite .rip { animation-duration: 0.2s; }
body.is-lite .video__poster, body.is-lite .about__portrait img, body.is-lite .rel-card__art img { transition: none; }
body.is-lite .topbar, body.is-lite .tabbar, body.is-lite .playerbar { background: rgba(4,7,12,0.99); }


/* ----- GUNFINGA ARCADE cabinet — flat, retro, system-tile look ----- */
.arcade-cab { --edge: var(--line-hot); position: relative; margin: 18px auto 0; max-width: 600px; font-family: var(--sys); background: #05070b; border: 1px solid var(--edge); }
.arcade-cab::before, .arcade-cab::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 2; }
.arcade-cab::before { left: -1px; top: -1px; border-left: 2px solid #fff; border-top: 2px solid #fff; }
.arcade-cab::after { right: -1px; bottom: -1px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; }
/* cables out of the housing */
.arcade-cab .cab__cable { position: absolute; top: 34%; width: 54px; height: 130px; border: 2px solid var(--line-hot); border-top: 0; pointer-events: none; }
.cab__cable--l { left: -58px; border-right: 0; border-radius: 0 0 0 50px; }
.cab__cable--r { right: -58px; border-left: 0; border-radius: 0 0 50px 0; }
.cab__cable::after { content: ""; position: absolute; bottom: -5px; width: 8px; height: 8px; background: var(--acid); box-shadow: 0 0 10px var(--acid); }
.cab__cable--l::after { left: -5px; } .cab__cable--r::after { right: -5px; }
/* marquee */
.cab__marquee { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--edge); background: repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px); }
.cab__marquee-gf img { height: 20px; width: auto; }
.cab__marquee-txt { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--sys); font-weight: 700; font-size: 13px; letter-spacing: 0.34em; text-transform: uppercase; }
.cab__marquee-txt b { color: #fff; }
.cab__marquee-txt i { font-style: normal; color: var(--acid); animation: neon 3.2s steps(1, end) infinite; }
@keyframes neon { 0%, 60%, 100% { opacity: 1; } 61% { opacity: 0.35; } 63% { opacity: 1; } 78% { opacity: 0.6; } 79% { opacity: 1; } }
.cab__marquee-led { position: absolute; left: 10px; right: 10px; bottom: -1px; height: 1px; background: repeating-linear-gradient(90deg, var(--acid) 0 4px, transparent 4px 10px); opacity: 0.7; animation: ledrun 1s linear infinite; }
@keyframes ledrun { from { background-position: 0 0; } to { background-position: 10px 0; } }
/* body */
.cab__body { display: grid; grid-template-columns: 22px 1fr 22px; }
.cab__side { position: relative; border-inline: 1px solid var(--line); background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255,255,255,0.05) 8px 9px); display: grid; place-items: center; overflow: hidden; }
.cab__side span { writing-mode: vertical-rl; font-size: 9px; letter-spacing: 0.4em; color: var(--faint); text-transform: uppercase; }
.cab__side--l span { transform: rotate(180deg); }
.cab__center { padding: 12px 12px 10px; }
.cabinet__hud { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; letter-spacing: 0.16em; color: var(--mute); margin-bottom: 10px; }
.cabinet__hud b { color: var(--acid); font-weight: 700; }
.cab__bezel { padding: 6px; border: 1px solid var(--line); background: #000; }
.cabinet__screen { position: relative; aspect-ratio: 192 / 224; background: #000; border: 1px solid var(--line-hot); overflow: hidden; }
#gameCanvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; animation: crt 0.12s steps(2, end) infinite; touch-action: none; cursor: crosshair; }
@keyframes crt { 0% { opacity: 1; } 100% { opacity: 0.96; } }
.cabinet__glass { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px), linear-gradient(180deg, transparent 80%, rgba(0,0,0,0.35)); box-shadow: inset 0 0 30px rgba(0,0,0,0.7); }
.cabinet__enter { position: absolute; left: 10%; right: 10%; bottom: 10%; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(0,0,0,0.94); border: 1px solid var(--acid); font-size: 10px; letter-spacing: 0.2em; color: var(--acid); }
.cabinet__enter input { font-family: var(--sys); font-weight: 700; font-size: 22px; letter-spacing: 0.4em; text-align: center; text-transform: uppercase; color: #fff; background: #000; border: 1px solid var(--line-hot); padding: 8px; }
.cabinet__drop { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 10px; letter-spacing: 0.22em; color: var(--mute); }
.cabinet__drop i { flex: 1; height: 8px; background: #000; border: 1px solid var(--line-hot); display: block; }
.cabinet__drop b { display: block; height: 100%; width: 0; background: var(--acid); box-shadow: 0 0 10px var(--acid); transition: width 0.2s ease; }
/* control deck: flat */
.cab__deck { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); background: repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 12px); }
.cab__buttons { grid-column: 2; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cab__btn { position: relative; min-width: 84px; height: 46px; padding: 0 14px; cursor: pointer; font-family: var(--sys); font-weight: 700; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; touch-action: manipulation;
  border: 1px solid var(--line-hot); background: #0a0d13; color: var(--ice2); clip-path: var(--cut); transition: transform 0.06s ease, background 0.1s ease; }
.cab__btn::before { content: ""; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; }
.cab__btn::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.cab__btn span { position: relative; z-index: 1; }
.cab__btn--start { background: var(--acid); color: #05070b; border-color: var(--acid); }
.cab__btn--drop { background: var(--pink); color: #fff; border-color: var(--pink); }
.cab__btn--mute { color: var(--ice-dim); }
.cab__btn--mute.is-off { color: var(--faint); background: #05070b; }
.cab__btn:hover { animation: rip 0.3s steps(2, end) 1; }
.cab__btn:active { transform: translate(2px, 2px); }
.cab__btn:disabled { opacity: 0.4; cursor: default; }
.cab__btn.is-ready { animation: rip 0.34s steps(2, end) infinite; box-shadow: 0 0 24px rgba(255,46,136,0.8); }
.cab__coin { grid-column: 3; justify-self: end; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 9px; letter-spacing: 0.24em; color: var(--acid); }
.cab__coin i { width: 10px; height: 30px; border: 1px solid var(--line-hot); background: #000; }
.cab__coin span { animation: puls 1.4s steps(1, end) infinite; white-space: nowrap; }
/* base */
.cab__base { display: grid; grid-template-columns: 48px 1fr 48px; gap: 12px; padding: 12px; }
.cab__grille { background: radial-gradient(circle, rgba(255,255,255,0.35) 1px, transparent 1.3px) 0 0 / 6px 6px; border: 1px solid var(--line); }
.cabinet__hint { font-size: 10px; letter-spacing: 0.1em; color: var(--faint); }
.cabinet__hs { list-style: none; margin-top: 8px; border-top: 1px solid var(--line); font-size: 11px; letter-spacing: 0.14em; }
.cabinet__hs li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--mute); }
.cabinet__hs li b { color: #fff; }
.cabinet__hs li:first-child b { color: var(--acid); }
@media (max-width: 900px) {
  .arcade-cab { max-width: none; }
  .arcade-cab .cab__cable { display: none; }
  .cab__body { grid-template-columns: 12px 1fr 12px; }
  .cab__side span { display: none; }
  .cab__center { padding: 10px 8px 8px; }
  .cab__deck { grid-template-columns: 1fr; gap: 10px; padding: 12px 10px; }
  .cab__buttons { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .cab__coin { grid-column: 1; justify-self: center; }
  .cab__btn { min-width: 0; width: 100%; height: 48px; padding: 0 6px; font-size: 9px; letter-spacing: 0.14em; }
  .cab__coin { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 10px; }
  .cab__coin i { width: 28px; height: 8px; }
  .cab__base { grid-template-columns: 30px 1fr 30px; gap: 8px; padding: 10px; }
  .tabbar { grid-template-columns: repeat(7, 1fr); } .tabbar a { font-size: 9.5px; letter-spacing: 0.04em; }
}
@media (prefers-reduced-motion: reduce) { .cab__marquee-txt i, .cab__marquee-led, .cab__coin span, .cab__btn:hover, .cab__btn.is-ready { animation: none; } }


/* =====================================================================
   HOTLINE OVERDRIVE — neon wash, wobbling letters, pixel creatures, VHS
   ===================================================================== */
/* hero: rotating neon stripes + slow hue drift behind the copy */
.hero__wash { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.42; mix-blend-mode: screen; image-rendering: pixelated; image-rendering: crisp-edges; }
.hero::before { background: radial-gradient(ellipse at 70% 40%, rgba(123,44,255,0.28), transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(255,46,136,0.22), transparent 45%), radial-gradient(ellipse at 85% 90%, rgba(46,242,255,0.16), transparent 40%), linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.75)); }
/* wobbling letters (Hotline title cards) */
.wob { display: inline-block; transform-origin: 50% 70%; }
.wword { display: inline-block; white-space: nowrap; }
.is-wobbling .wob { animation: wob var(--wd, 2.4s) ease-in-out var(--wo, 0s) infinite alternate; }
@keyframes wob { from { transform: translateY(-2px) rotate(var(--wr1, -4deg)); } to { transform: translateY(2px) rotate(var(--wr2, 4deg)); } }
.hero__title .wob { --wr1: -6deg; --wr2: 5deg; }
.hero__title em .wob { text-shadow: 0 0 22px rgba(46,242,255,0.7), 3px 0 0 rgba(255,46,136,0.7), -3px 0 0 rgba(46,242,255,0.7); }
/* pixel accents */
.section-label, .eyebrow, .section-tag, .sep span, .ticker__track, .cabinet__hud, .tabbar a span, .pill, .topbar__sys, .carrier { font-family: var(--pix); font-weight: 400; font-size: 15px; letter-spacing: 0.16em; }
.section-label::before { content: ">> "; color: var(--pink); }
.ticker__track { font-size: 16px; gap: 34px; }
.ticker__track i { color: var(--cyan); }
.ticker__track b { color: var(--pink); }
.cab__marquee-txt { font-size: 16px; font-weight: 700; letter-spacing: 0.18em; }
.cabinet__hud { font-size: 15px; }
.pill, .topbar__sys { font-size: 15px; letter-spacing: 0.12em; }
.carrier { font-size: 15px; } .carrier__tech { font-family: var(--sys); font-size: 9px; }
.tabbar a span { font-size: 13px; letter-spacing: 0.08em; }
/* separators as pixel bands */
.sep i { color: var(--ice-dim); }
/* VHS bands in colour */
.fx-tear { background: linear-gradient(90deg, rgba(255,46,136,0.28), rgba(255,255,255,0.14) 40%, rgba(46,242,255,0.3)); animation-duration: 5.5s; }
.fx-tear--2 { top: 70%; height: 40px; animation-duration: 8.5s; animation-delay: -3s; }
/* pixel creature layer */
.fx-pix { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; image-rendering: pixelated; opacity: 0.85; }
body.is-lite .fx-pix, body.is-lite .fx-tear--2 { display: none; }
body.is-lite .hero__wash { opacity: 0.35; }
body.is-lite .wob, body.is-lite .sep i { animation: none; }
/* pixel sparks */
.spark { width: 5px; height: 5px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
/* stickers get a harder pop */
.sticker--icon { filter: drop-shadow(3px 3px 0 var(--pink)) drop-shadow(0 0 2px #000); }
/* panels: pixel corner marks in pink */
.panel::before, .section::before { border-color: var(--pink); }
.panel::after, .section::after { border-color: var(--cyan); }
@media (max-width: 900px) {
  .section-label, .eyebrow { font-size: 13px; }
  .ticker__track { font-size: 15px; gap: 26px; }
  .pill, .topbar__sys { font-size: 14px; padding: 6px 9px; gap: 6px; }
  .pill__mark { height: 12px; }
  .carrier { font-size: 14px; gap: 5px; }
  .carrier__bars { height: 12px; }
  .carrier__tech { font-size: 8px; padding: 1px 3px; }
  @media (max-width: 400px) { .carrier__net { display: none; } }
  .cab__marquee-txt { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .hero__wash, .wob, .sep i { animation: none; } }

/* pixel headlines: each letter is a tiny raster scaled up (arcade-screen softness) */
.pix-head .wob, .hero__title.pix-head em .wob { text-shadow: none !important; }
.pix-head .wob { color: transparent; background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: baseline; line-height: 0; }
.pix-head { letter-spacing: 0; word-spacing: 0.15em; text-shadow: none; }
.pix-head .wob { vertical-align: bottom; }
/* pixel bolt leaning on the top-right corner of the N in RAVE ON */
.boltmark { position: absolute; left: auto; right: -46%; bottom: 96%; height: 50%; width: auto; aspect-ratio: 1;
  background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated; pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(232,255,58,0.8)); animation: boltZap 2.6s steps(1, end) infinite; }
.hero__title .wob { position: relative; }
@keyframes boltZap {
  0%, 45% { opacity: 1; transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 6px rgba(232,255,58,0.85)); }
  46% { opacity: 1; transform: rotate(0deg) scale(1.18); filter: grayscale(1) brightness(3.4) drop-shadow(0 0 16px rgba(255,255,255,0.95)); } /* single white spike */
  47% { opacity: 0.25; transform: rotate(0deg) scale(1.04); filter: drop-shadow(0 0 6px rgba(232,255,58,0.85)); }
  49%, 88% { opacity: 1; transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 6px rgba(232,255,58,0.85)); }
  89% { opacity: 1; transform: rotate(6deg) scale(1.14); filter: grayscale(1) brightness(3.4) drop-shadow(0 0 18px rgba(255,255,255,1)); }
  90% { opacity: 0.3; transform: rotate(-3deg) scale(0.98); filter: drop-shadow(0 0 6px rgba(232,255,58,0.85)); }
  92%, 100% { opacity: 1; transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 6px rgba(232,255,58,0.85)); }
}
body.is-lite .boltmark { animation: none; }
@media (prefers-reduced-motion: reduce) { .boltmark { animation: none; } }
.hero__title.pix-head .wob { filter: drop-shadow(0 0 10px rgba(255,255,255,0.35)); }
.hero__title.pix-head em .wob { filter: drop-shadow(0 0 12px rgba(46,242,255,0.7)) drop-shadow(2px 0 0 rgba(255,46,136,0.6)); }
.hero__title.pix-head { animation: none; }
.hero__title.pix-head::before, .hero__title.pix-head::after { display: none; }
@media (prefers-reduced-motion: reduce) { .wob { animation: none; } }


/* ----- tour dates ----- */
.tour__list { list-style: none; margin-top: 16px; border-top: 1px solid var(--line); }
.tour__row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); transition: background 0.2s ease; }
.tour__row:hover { background: rgba(var(--acid-rgb), 0.05); }
.tour__date { display: flex; flex-direction: column; font-family: "Pixelify Sans", var(--pix); font-weight: 600; }
.tour__date b { font-size: 16px; color: var(--acid); letter-spacing: 0.06em; }
.tour__date i { font-style: normal; font-size: 11px; color: var(--faint); letter-spacing: 0.14em; }
.tour__where { display: flex; flex-direction: column; min-width: 0; }
.tour__where b { font-family: "Pixelify Sans", var(--pix); font-weight: 700; font-size: 18px; color: #fff; letter-spacing: 0.02em; }
.tour__where i { font-style: normal; font-family: var(--sys); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-top: 3px; }
.tour__action { justify-self: end; }
.tour__btn { padding: 0 16px; height: 40px; font-size: 11px; }
.tour__badge { display: inline-block; font-family: var(--sys); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ice-dim); border: 1px solid var(--line-hot); padding: 8px 12px; clip-path: var(--cut); }
.tour__badge--out { color: var(--pink); border-color: var(--glitch-dim); }
.tour__row.is-past { opacity: 0.45; }
.tour__row.is-past .tour__date b { color: var(--faint); }
.tour__row--empty { grid-template-columns: 1fr; }
.tour__row--empty .tour__where b { color: var(--ice2); }
.tour__note { font-family: var(--sys); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 14px; }
.tour__note a { color: var(--acid); }
@media (max-width: 900px) {
  .tour__row { grid-template-columns: 74px 1fr; gap: 10px; padding: 12px 2px; }
  .tour__action { grid-column: 2; justify-self: start; margin-top: 4px; }
  .tour__where b { font-size: 16px; }
  .tour__date b { font-size: 14px; }
}

/* ----- imprint ----- */
.imprint { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; padding: 16px 18px; border: 1px solid var(--line); background: rgba(2,4,8,0.7); font-family: var(--sys); font-size: 12px; line-height: 1.8; color: var(--mute); }
.imprint strong { color: var(--ice2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; }
.imprint a { color: var(--ice); }
.footer__links a.is-open { color: var(--ice2); border-color: var(--ice2); }
@media (max-width: 680px) { .imprint { grid-template-columns: 1fr; } }

/* ----- DROP ARMED overlay (easter egg) — VHS tracking glitch ----- */
.armed { position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: 0; background: #000; transition: opacity 0.2s ease; overflow: hidden; }
.armed.on { opacity: 1; }
.armed__bolt { position: absolute; left: 50%; top: 50%; width: auto; height: 78%; max-width: 78vw;
  transform: translate(-50%, -50%) scale(0.86); opacity: 0; mix-blend-mode: screen; pointer-events: none;
  filter: contrast(2.1) brightness(1.06) saturate(1.25) drop-shadow(0 0 30px rgba(140,200,255,0.5)); }
.armed.on .armed__bolt { opacity: 1; animation: boltStrike 2.2s steps(4, end) 1 forwards; }
.armed.flash .armed__bolt { opacity: 0; }
@keyframes boltStrike {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
  6% { opacity: 1; transform: translate(-50%, -50%) scale(0.96); }
  14% { opacity: 0.35; transform: translate(-51%, -50%) scale(1.02); }
  22% { opacity: 1; transform: translate(-49%, -50%) scale(0.92); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(0.88); }
}
.armed__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #fff; box-shadow: 0 0 20px 4px #9fd4ff; transform: scaleX(0); transform-origin: 50% 50%; }
.armed.on .armed__line { transform: scaleX(1); transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.3, 1); }
.armed__text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(-40px); font-family: var(--sys); font-weight: 700; font-size: clamp(1.4rem, 5vw, 3rem); letter-spacing: 0.3em; text-transform: uppercase; color: #fff; text-shadow: 0 0 30px rgba(140,200,255,0.9); white-space: nowrap; }
.armed.on .armed__text { animation: rip 0.22s steps(2, end) infinite, vhsSkew 0.35s steps(4, end) infinite; }
/* vertical VHS streaks + fine vertical lines */
.armed__vhs { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(120,190,255,0.08) 0 2px, transparent 2px 23px); }
.armed.on .armed__vhs { opacity: 1; animation: vhsJitter 0.09s steps(2, end) infinite; }
.armed__streak { position: absolute; top: -10%; bottom: -10%; width: 2px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.9), rgba(120,190,255,0.8), transparent); box-shadow: 0 0 8px rgba(190,225,255,0.8); opacity: 0; }
.armed.on .armed__streak { animation: vhsStreak 0.6s steps(3, end) infinite; }
/* rolling tracking bands */
.armed__roll { position: absolute; left: 0; right: 0; height: 16%; top: 0; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.12) 30%, rgba(120,190,255,0.22) 50%, rgba(255,40,40,0.12) 70%, transparent); }
.armed.on .armed__roll { opacity: 1; animation: vhsRoll 0.9s linear infinite; }
.armed__roll--2 { animation-delay: -0.45s !important; height: 6%; }
/* noise */
.armed__noise { position: absolute; inset: -20%; opacity: 0; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
.armed.on .armed__noise { opacity: 0.35; animation: vhsNoise 0.25s steps(4, end) infinite; }
.armed.flash { background: #fff; }
.armed.flash .armed__vhs, .armed.flash .armed__roll, .armed.flash .armed__noise { opacity: 0; }
@keyframes vhsJitter { 0% { transform: translateX(0); } 50% { transform: translateX(-3px) scaleX(1.01); } 100% { transform: translateX(2px); } }
@keyframes vhsSkew { 0% { transform: translate(-50%, -50%) translateY(-40px) skewX(0); } 25% { transform: translate(-50%, -50%) translateY(-42px) skewX(-8deg) translateX(6px); } 50% { transform: translate(-50%, -50%) translateY(-38px) skewX(5deg) translateX(-4px); } 75% { transform: translate(-50%, -50%) translateY(-41px) skewX(-3deg); } 100% { transform: translate(-50%, -50%) translateY(-40px) skewX(0); } }
@keyframes vhsStreak { 0% { opacity: 0; } 34% { opacity: 0.9; } 67% { opacity: 0.2; } 100% { opacity: 0.7; } }
@keyframes vhsRoll { from { transform: translateY(-20vh); } to { transform: translateY(110vh); } }
@keyframes vhsNoise { 0% { transform: translate(0, 0); } 25% { transform: translate(-4%, 3%); } 50% { transform: translate(3%, -4%); } 75% { transform: translate(-2%, -2%); } 100% { transform: translate(4%, 2%); } }

/* ----- sticky player bar ----- */
body.has-player { padding-bottom: 64px; }
.playerbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--acid); padding: 10px clamp(16px, 4vw, 32px); background: rgba(2,4,8,0.985); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 0.35s var(--ease); }
.playerbar.is-on { transform: translateY(0); }
.playerbar__cover { width: 42px; height: 42px; object-fit: cover; border: 1px solid var(--line-hot); flex: 0 0 auto; background: #05070b; filter: saturate(0.7) contrast(1.1); }
.playerbar.is-on .playerbar__cover { animation: coverPulse 2.8s steps(2, end) infinite; }
@keyframes coverPulse { 0%, 92% { filter: saturate(0.7) contrast(1.1); } 94% { filter: saturate(1.6) contrast(1.3) hue-rotate(20deg); } 96%, 100% { filter: saturate(0.7) contrast(1.1); } }
.playerbar__meta { display: flex; flex-direction: column; min-width: 0; overflow: hidden; flex: 0 1 240px; }
.playerbar__title { font-family: var(--sys); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; line-height: 1.2; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playerbar__sub { font-family: var(--sys); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playerbar__skip, .playerbar__play, .viewer__play, .transport-skip { flex: 0 0 auto; height: 40px; min-width: 42px; padding: 0 10px; border: 1px solid var(--line-hot); background: rgba(6,10,16,0.7); color: var(--ice2); font-family: var(--sys); font-size: 11px; letter-spacing: 0.1em; cursor: pointer; transition: 0.12s ease; display: grid; place-items: center; clip-path: var(--cut); position: relative; }
.playerbar__skip:active, .viewer__play:active, .playerbar__play:active, .transport-skip:active { transform: translate(1px, 1px); }
.playerbar__play, .viewer__play { background: var(--acid); color: #05070b; border-color: var(--acid); font-size: 15px; min-width: 52px; }
.playerbar__play:hover, .viewer__play:hover { background: #f4ff8a; box-shadow: 0 0 22px rgba(232,255,58,0.6); }
.playerbar__skip:hover, .transport-skip:hover { border-color: #fff; color: #fff; }
.playerbar__bar, .viewer__bar { flex: 1; height: 12px; position: relative; overflow: hidden; cursor: pointer; touch-action: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0 6px, transparent 6px 9px); border: 1px solid var(--line); }
.playerbar__prog, .viewer__prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: repeating-linear-gradient(90deg, var(--acid) 0 6px, transparent 6px 9px); box-shadow: 0 0 10px rgba(232,255,58,0.5); }
.playerbar__bar::after, .viewer__bar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0,0,0,0.5) 0 1px, transparent 1px 3px); }
.playerbar__time, .viewer__time { flex: 0 0 auto; font-family: var(--sys); font-size: 11px; letter-spacing: 0.08em; color: var(--ice-dim); min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }

/* ----- album / player (release page) ----- */
.album__head { margin-bottom: 18px; }
.album-title { font-family: var(--iconic); font-weight: 900; font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.1; color: #fff; text-shadow: 0 0 30px rgba(140,200,255,0.4); margin-top: 10px; }
.album__desc { color: var(--mute); font-size: 19px; max-width: 60ch; margin-top: 10px; }
.player { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: clamp(16px, 3vw, 32px); align-items: start; }
.viewer { position: relative; display: flex; flex-direction: column; gap: 12px; }
.viewer__tag { font-family: var(--sys); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ice-dim); }
.viewer__tag::before { content: "// "; color: var(--faint); }
.viewer__frame { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line-hot); background: #05070b; }
.viewer__frame::before, .viewer__frame::after { content: ""; position: absolute; width: 16px; height: 16px; z-index: 3; pointer-events: none; }
.viewer__frame::before { left: 0; top: 0; border-left: 3px solid var(--pink); border-top: 3px solid var(--pink); }
.viewer__frame::after { right: 0; bottom: 0; border-right: 3px solid var(--cyan); border-bottom: 3px solid var(--cyan); }
.viewer.is-glitching .viewer__img.is-active { animation: coverRip 0.42s steps(2, end) 1; }
@keyframes coverRip {
  0% { transform: translateX(0); filter: none; }
  25% { transform: translateX(-6px) scaleY(1.02); filter: drop-shadow(6px 0 0 rgba(255,46,136,0.85)) drop-shadow(-6px 0 0 rgba(46,242,255,0.85)) saturate(1.6); }
  50% { transform: translateX(5px); filter: drop-shadow(-8px 0 0 rgba(255,46,136,0.8)) drop-shadow(8px 0 0 rgba(46,242,255,0.8)); }
  75% { transform: translateX(-2px) scaleY(0.99); filter: invert(0.15) saturate(1.4); }
  100% { transform: translateX(0); filter: none; }
}
.viewer.is-glitching .viewer__frame { box-shadow: 0 0 0 1px var(--pink), 0 0 26px rgba(255,46,136,0.35); }
.viewer__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--ease); filter: saturate(0.85) contrast(1.05); }
.viewer__img.is-active { opacity: 1; }
.viewer__glow { display: none; }
.viewer__scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0,0,0,0.45) 0 1px, transparent 1px 3px), linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.5)); opacity: 0.85; }
.viewer__meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; }
.viewer__no { font-family: "Pixelify Sans", var(--pix); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; color: var(--acid); }
.viewer__title { font-family: "Pixelify Sans", var(--pix); font-weight: 700; font-size: 20px; letter-spacing: 0.03em; color: #fff; }
.viewer__mood { grid-column: 2; font-family: var(--sys); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice-dim); }
.viewer__transport { display: flex; align-items: center; gap: 8px; }
.viewer__time { min-width: 84px; }
.viewer.is-loading .viewer__bar { animation: pulseBar 1s ease-in-out infinite; }
@keyframes pulseBar { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.tracklist { list-style: none; border-top: 1px solid var(--line); }
.track { position: relative; border-bottom: 1px solid var(--line); transition: background 0.2s ease; }
.track.is-active { background: rgba(var(--acid-rgb), 0.07); }
.track.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pink); box-shadow: 0 0 10px rgba(255,46,136,0.8); }
.track__btn { display: grid; grid-template-columns: 36px 46px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; }
.track__no { font-family: "Pixelify Sans", var(--pix); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; color: var(--faint); }
.track.is-active .track__no, .track__btn:hover .track__no { color: var(--acid); }
.track__thumb { width: 46px; height: 46px; object-fit: cover; border: 1px solid var(--line); filter: saturate(0.5) contrast(1.1); transition: filter 0.3s ease; }
.track__btn:hover .track__thumb, .track.is-active .track__thumb { filter: saturate(1.1) contrast(1.05); border-color: var(--acid); }
.track__name { font-family: "Pixelify Sans", var(--pix); font-weight: 600; font-size: 16px; letter-spacing: 0.03em; color: var(--mute); transition: color 0.2s ease; }
.track.is-active .track__name, .track__btn:hover .track__name, .track.is-playing-audio .track__name { color: #fff; text-shadow: var(--glow-ice); }
.track__cue { font-family: var(--sys); font-size: 12px; color: var(--faint); width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-hot); clip-path: var(--cut); }
.track.is-playing-audio .track__cue { color: #05070b; background: var(--acid); border-color: var(--acid); }
.track.is-playing-audio .track__name { animation: rip 2.4s steps(2, end) infinite; }
.track__mood { max-height: 0; overflow: hidden; opacity: 0; font-family: var(--sys); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice-dim); padding: 0 8px 0 106px; transition: max-height 0.4s var(--ease), opacity 0.4s ease, padding 0.4s ease; }
.track.is-open .track__mood, .track.is-active .track__mood { max-height: 5rem; opacity: 0.9; padding-bottom: 12px; }
.track--plain { display: flex; align-items: center; gap: 14px; padding: 12px 8px; }
.track--plain .track__name { color: #fff; }

/* ----- release page ----- */
.rel-hero { position: relative; overflow: hidden; border: 1px solid var(--line); background: #020306; isolation: isolate; box-shadow: 0 8px 28px rgba(0,0,0,0.45); }
.rel-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 20% 40%, rgba(127,196,255,0.1), transparent 45%), radial-gradient(ellipse at 90% 20%, rgba(60,110,255,0.14), transparent 40%); }
.page-release.world-glitch .rel-hero::before { background: radial-gradient(ellipse at 20% 40%, rgba(255,46,136,0.12), transparent 45%), radial-gradient(ellipse at 90% 20%, rgba(127,196,255,0.1), transparent 40%); }
.rel-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(240px, 460px) 1fr; gap: clamp(20px, 4vw, 48px); padding: clamp(22px, 4vw, 44px); align-items: center; }
.rel-hero__art { border: 1px solid var(--line); background: #05070b; }
.rel-cover { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; filter: saturate(0.85) contrast(1.05); }
.rel-cover--type { display: grid; place-content: center; gap: 10px; text-align: center; padding: 20px; }
.rel-cover__lines { display: flex; flex-direction: column; font-family: var(--iconic); font-weight: 900; font-size: clamp(1.8rem, 4.5vw, 3.2rem); line-height: 1.1; color: var(--ice2); text-shadow: 0 0 26px rgba(140,200,255,0.55), -3px 0 0 rgba(255,40,40,0.5), 3px 0 0 rgba(60,110,255,0.5); }
.rel-cover__note { font-family: var(--sys); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); }
.rel-hero__copy { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rel-title { font-family: var(--iconic); font-weight: 900; font-size: clamp(1.9rem, 5vw, 3.6rem); line-height: 1.05; color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,0.9), 0 0 30px rgba(140,200,255,0.45); }
.rel-feat { font-family: var(--sys); font-weight: 700; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--pink); }
.rel-tagline { font-family: var(--sys); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice2); }
.rel-desc { color: var(--mute); font-size: 19px; max-width: 56ch; }
.rel-imprint { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sys); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }
.rel-imprint a:hover { color: var(--ice2); }
.rel-imprint__badge { padding: 4px 8px; border: 1px solid rgba(var(--ice-rgb), 0.5); color: var(--ice); }
.world-glitch .rel-imprint__badge { color: var(--pink); border-color: var(--glitch-dim); }
.rel-status { font-family: var(--sys); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #05070b; background: var(--acid); padding: 4px 8px; transform: rotate(-2deg); box-shadow: 2px 2px 0 rgba(0,0,0,0.6); }
.rel-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.credits { display: grid; margin-top: 14px; border-top: 1px solid var(--line); }
.credits__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-family: var(--sys); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.credits__row dt { color: var(--faint); }
.credits__row dd { color: var(--ice2); text-align: right; }
.rel-tracks .tracklist { margin-top: 12px; }

/* ----- reveal / image fade ----- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.img-fade { opacity: 0; transition: opacity 0.8s var(--ease); }
.img-fade.is-loaded { opacity: 1; }
.scroll-cue, .hero-arrow, .about__mark { display: none; }

/* ----- responsive ----- */
/* =====================================================================
   MOBILE APP SHELL (≤ 900px) — mobile first: bottom tab bar, compact top bar,
   one type scale, full-width tiles, safe areas.
   ===================================================================== */
.tabbar { display: none; }
@media (max-width: 900px) {
  :root { --maxw: 100%; }
  html { font-size: 16px; scroll-padding-top: calc(66px + env(safe-area-inset-top)); }
  section, .hero, .stack { scroll-margin-top: calc(66px + env(safe-area-inset-top)); }
  body { font-size: 15px; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .shell { width: 100%; padding: 0 12px 24px; }

  /* top bar: pill only, no wrapping nav */
  .topbar { position: sticky; top: 0; margin: 0 -12px 12px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); border-left: 0; border-right: 0; border-top: 0; }
  .topbar::before, .topbar::after { display: none; }
  .topbar .nav, .topbar .topbar__nav { display: none; }
  .brand, .topbar__brand { width: auto; min-width: 0; }
  .pill, .topbar__sys { display: inline-flex; font-size: 14px; padding: 7px 10px; letter-spacing: 0.12em; }
  .carrier { order: 0; margin-left: auto; margin-right: 0; gap: 6px; font-size: 13px; letter-spacing: 0.1em; }
  .carrier__tech { font-size: 10px; padding: 1px 4px; }
  .topbar { justify-content: space-between; }

  /* type scale */
  .hero__copy .hero__title { font-size: 19.6vw; line-height: 1; letter-spacing: -0.015em; white-space: nowrap; width: 100%; }
  .hero__logo { display: none; }
  .hero__titlerow { width: 100%; }
  .hero__slogan { font-size: 12px; letter-spacing: 0.3em; }
  .hero__status { font-size: 12px; }
  .hero__lead { font-size: 18px; }
  .sec-title, .big-headline, .album-title, .rel-title { font-size: 1.95rem; line-height: 1.08; }
  .sec-lead, .small, .rel-desc, .album__desc, .about__text { font-size: 17px; line-height: 1.22; }
  .about__text { font-size: 17.5px; }
  .section-label, .eyebrow { font-size: 12px; }
  .section-tag { display: none; }

  /* layout */
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; grid-template-areas: "holo" "copy" "side"; gap: 14px; padding: 14px; }
  .hero__holo, .hero__side { max-width: none; }
  .holo { aspect-ratio: 16 / 10; }

  .hero__copy { gap: 20px; }
  .hero__cta { width: 100%; gap: 8px; }
  .hero__cta .btn { flex: 1 1 calc(50% - 4px); }
  .hero__cta .btn--solid { flex-basis: 100%; }
  .signal { flex-direction: column; align-items: stretch; gap: 10px; }
  .signal__count { font-size: 1.9rem; }
  .content { gap: 48px; margin-top: 24px; }
  .sep { margin: 0; }
  .stack, .imprints, .about__wrap, .player, .rel-hero__inner { grid-template-columns: 1fr; }
  .panel, .section, .tile { padding: 26px 16px 28px; }
  .section-head { margin-bottom: 10px; }
  .sec-title, .big-headline { margin-top: 6px; }
  .sec-lead { margin-top: 8px; margin-bottom: 4px; font-size: 17px; }
  .hero__lead { font-size: 18px; }
  .hero__lead p + p { margin-top: 7px; }
  .holo { aspect-ratio: 16 / 9; }
  .ticker { margin-top: 16px; padding: 8px 0; }
  .status { padding: 12px 12px; }
  .status__zeile { margin-top: 5px; }
  .signal { padding: 12px; }
  .vpads { margin-top: 10px; gap: 6px; } .vpad { min-height: 62px; }
  .vfaders { margin-top: 10px; gap: 8px; }
  .tray { margin-top: 10px; padding: 10px; gap: 8px; }
  .tray { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 72px; gap: 8px; padding: 10px; }
  .tray .tray__item[class] { padding: 9px; }
  .tray .tray__item.sticker--gf[class], .tray .tray__item.sticker--rainbow[class], .tray .tray__item.sticker--tape[class], .tray .tray__item.sticker--ufo[class], .tray .tray__item.sticker--yo[class] { padding: 10px 6px; }
  .cam__stage { margin-top: 10px; }
  .dubunit { margin-top: 10px; padding: 10px; }
  .rel-grid { margin-top: 12px; }
  .wall__frame { margin-top: 10px; }
  .footer { margin-top: 16px; padding-top: 14px; }
  .rel-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rel-card__meta { padding: 10px 12px 12px; }
  .rel-card__title { font-size: 0.85rem; }
  .rel-hero__art { max-width: none; }
  .sticker--desktop { display: none; }
  .sticker { font-size: 9px; padding: 6px 9px; }
  .sticker--icon { width: 34px; height: 34px; padding: 0; }
  .sticker--ufo { width: 44px; height: 38px; }

  /* controls: one height everywhere */
  .btn, .dubpad__btn, .cap, .playerbar__play, .playerbar__skip, .viewer__play, .transport-skip { min-height: 46px; }
  .btn { padding: 0 18px; font-size: 12px; }
  .dubunit__panel { grid-template-columns: 1fr; }
  .dubunit__head { gap: 8px; }
  .dubunit__switch { order: 3; width: 100%; }
  .dubunit__switch .dubpad__btn { flex: 1; }
  .dubunit__model { display: none; }
  .knobs { grid-template-columns: repeat(4, 1fr); }
  .knob__dial { width: 52px; height: 52px; }
  .dubpad { height: clamp(240px, 62vw, 340px); }
  .caps { gap: 10px; }
  .cap { width: 46px; height: 46px; }
  .caps .btn { flex: 1 1 100%; }
  .wall__frame { height: clamp(320px, 92vw, 460px); }
  .status__mark { display: none; }
  .status__row1 { font-size: 15px; }
  .track__btn { grid-template-columns: 30px 42px 1fr auto; gap: 10px; }
  .track__thumb { width: 42px; height: 42px; }
  .track__mood { padding-left: 8px; }
  .credits__row { grid-template-columns: 1fr; gap: 4px; }
  .credits__row dd { text-align: left; }
  .footer__row { justify-content: space-between; flex-wrap: nowrap; gap: 10px; font-size: 10px; letter-spacing: 0.14em; }
  .footer__row > * { min-width: 0; white-space: nowrap; }
  .footer__wrap > .footer__row:last-child { flex-wrap: wrap; row-gap: 6px; }
  .footer__brand .brand__mark { height: 14px; }
  .footer__mark { height: 10px; }
  .footer__streams { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
  .footer__streams a { flex-direction: column; justify-content: center; gap: 6px; min-height: 58px; padding: 8px 4px; font-size: 10px; letter-spacing: 0.06em; }
  .footer__streams .ic { width: 18px; height: 18px; }
  .footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; width: 100%; }
  .footer__links a { border: 1px solid var(--line); padding: 7px 11px; min-height: 0; font-size: 12px; letter-spacing: 0.12em; }
  .footer__streams a span { font-size: 9px; }
  .footer__row { justify-content: center; gap: 8px 18px; }
  .footer__wrap { gap: 12px; }
  .ascii--banner { color: rgba(150,200,245,0.55); }

  /* bottom tab bar */
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(2,4,8,0.985); border-top: 1px solid var(--line); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 54px; color: var(--ice-dim); font-family: var(--sys); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid transparent; transition: 0.2s ease; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a.is-active { color: #fff; text-shadow: var(--glow-ice); border-color: var(--line); background: rgba(127,196,255,0.08); }
  .tabbar a.is-active svg { filter: drop-shadow(0 0 8px rgba(150,205,255,0.8)); }
  .tabbar .tab-live { fill: var(--red); }
  body.is-live .tabbar .tab-live { animation: puls 1.6s ease-in-out infinite; }

  /* player sits above the tab bar */
  .playerbar { bottom: calc(66px + env(safe-area-inset-bottom)); padding: 8px 12px; gap: 8px; }
  .playerbar__meta { flex-basis: 40vw; }
  .playerbar__time { min-width: 0; font-size: 10px; }
  .playerbar__skip { display: none; }
  body.has-player { padding-bottom: calc(66px + 58px + env(safe-area-inset-bottom)); }
  .armed__text { font-size: 1.6rem; letter-spacing: 0.2em; }
}
@media (max-width: 380px) {
  .rel-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx-tear, .pill__dot, .punkt, .ticker__track, .rip, .rip-hover:hover, .hero__logo.stoerung, .status.live .status__mark, .hero__title { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ----- sticker layout mode (?layout) ----- */
.layoutbar { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 20px); padding: 8px 10px; background: #050709; border: 2px solid var(--acid); box-shadow: 0 0 0 2px #000, 0 10px 30px rgba(0,0,0,0.8); font-family: var(--pix); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice2); }
.layoutbar b { color: var(--acid); font-weight: 400; }
.layoutbar__mode { color: var(--ice-dim); }
.layoutbar__n { font-style: normal; color: var(--pink); }
.layoutbar button { font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 6px 10px; background: #0b0f15; border: 1px solid var(--line-hot); color: var(--ice2); cursor: pointer; }
.layoutbar button:hover { border-color: var(--acid); color: var(--acid); }
.is-layout .tabbar { bottom: 62px; }
.is-layout .bomb-layer .sticker { outline: 1px dashed rgba(232,255,58,0.6); outline-offset: 2px; }

/* ----- THE LAST RAVER (club cabinet) ----- */
.club { margin-top: 16px; border: 1px solid var(--line-hot); background: #050709; padding: 10px; }
.club__hud { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; padding: 6px 8px 10px; font-family: var(--pix); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice-dim); }
.club__stat { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.club__stat i { font-style: normal; color: var(--faint); }
.club__stat b { font-weight: 400; color: #fff; font-size: 18px; }
.club__stat--energy { min-width: 0; }
.club__bar { flex: 1; min-width: 60px; height: 10px; border: 1px solid var(--line-hot); background: #0b0f15; overflow: hidden; }
.club__bar em { display: block; height: 100%; width: 100%; background: var(--acid); box-shadow: 0 0 10px rgba(232,255,58,0.6); transition: width 0.12s linear, background 0.3s ease; }
.club__bar em.is-low { background: var(--red); box-shadow: 0 0 10px rgba(255,58,78,0.7); animation: blink 0.5s steps(1) infinite; }
.club__screen { position: relative; aspect-ratio: 3 / 2; background: #000; border: 2px solid #1b2236; box-shadow: 0 0 0 1px #000, 0 0 30px rgba(0,0,0,0.8) inset; overflow: hidden; touch-action: manipulation; }
.club__screen canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; cursor: pointer; }
.club__glass { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px); }
.club__pads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.club__pad { position: relative; height: 72px; border: 2px solid var(--line-hot); background: #0b0f15; color: var(--ice2); cursor: pointer; font-family: var(--pix); letter-spacing: 0.16em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.club__pad span { font-size: 22px; line-height: 1; }
.club__pad small { font-size: 12px; color: var(--faint); letter-spacing: 0.1em; }
.club__pad--dance { border-color: var(--acid); color: var(--acid); }
.club__pad--dance:active { background: var(--acid); color: #05070b; }
.club__pad--dance:active small { color: #05070b; }
.club__pad--rest { border-color: var(--cyan); color: var(--cyan); }
.club__pad--rest.is-held { background: var(--cyan); color: #05070b; }
.club__pad--rest.is-held small { color: #05070b; }
.club__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-family: var(--pix); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.club__sync { display: inline-flex; align-items: center; gap: 6px; }
.club__sync b { font-weight: 400; color: var(--ice2); min-width: 56px; text-align: center; }
.club__mini { font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 6px 10px; border: 1px solid var(--line-hot); background: #0b0f15; color: var(--ice-dim); cursor: pointer; }
.club__mini:hover { border-color: var(--acid); color: var(--acid); }
.club__mini--acid { border-color: var(--acid); color: var(--acid); }
.is-raving .tabbar { opacity: 0.35; }
@media (min-width: 901px) { .club { max-width: 720px; margin-left: auto; margin-right: auto; } .club__pad { height: 60px; } }
@media (max-width: 640px) { .club { padding: 8px; } .club__hud { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; padding: 4px 4px 8px; } .club__stat--energy { flex: 1 1 58%; order: 0; } .club__mini--pause { order: 1; margin-left: auto; } .club__stat:not(.club__stat--energy) { order: 2; } .club__stat b { font-size: 16px; } .club__pad { height: 84px; } }

/* ----- ARCADE hub: two marquees side by side ----- */
.arcade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.marquee { --mq: var(--acid); --mq-rgb: 232, 255, 58; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 230px; padding: 14px 14px 16px; text-align: left; cursor: pointer; overflow: hidden;
  border: 2px solid var(--mq); background: #05070b; color: #fff; box-shadow: 0 0 0 1px #000, 0 6px 0 #000, inset 0 0 40px rgba(var(--mq-rgb), 0.08); transition: transform 0.08s, box-shadow 0.08s; -webkit-tap-highlight-color: transparent; }
.marquee--invaders { --mq: var(--pink); --mq-rgb: 255, 46, 136; }
.marquee::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 3px); }
.marquee::after { content: ""; position: absolute; left: -1px; top: -1px; width: 14px; height: 14px; border-left: 3px solid #fff; border-top: 3px solid #fff; }
.marquee:hover { box-shadow: 0 0 0 1px #000, 0 6px 0 #000, 0 0 30px rgba(var(--mq-rgb), 0.35), inset 0 0 40px rgba(var(--mq-rgb), 0.14); }
.marquee:active { transform: translateY(4px); box-shadow: 0 0 0 1px #000, 0 2px 0 #000; }
.marquee__art { width: 100%; height: auto; aspect-ratio: 96 / 56; display: block; image-rendering: pixelated; image-rendering: crisp-edges; border: 1px solid rgba(var(--mq-rgb), 0.5); background: #000; }
.marquee__no { position: absolute; right: 12px; top: 10px; font-family: var(--pix); font-size: 15px; letter-spacing: 0.2em; color: var(--mq); }
.marquee__title { font-family: var(--iconic); font-weight: 900; font-size: clamp(1.15rem, 4.6vw, 1.7rem); line-height: 1.02; color: #fff; text-shadow: 0 0 14px rgba(var(--mq-rgb), 0.55); margin-top: 4px; }
.marquee__sub { font-family: var(--pix); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice-dim); }
.marquee__best { font-family: var(--pix); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mq); }
.marquee__play { margin-top: auto; align-self: stretch; text-align: center; padding: 10px 0; background: var(--mq); color: #05070b; font-family: var(--pix); font-size: 20px; letter-spacing: 0.3em; text-transform: uppercase; }
@media (max-width: 640px) { .arcade-grid { gap: 8px; } .marquee { min-height: 0; padding: 10px 10px 12px; } .marquee__title { font-size: 1.15rem; } .marquee__sub { font-size: 11px; letter-spacing: 0.08em; } .marquee__best { font-size: 13px; } .marquee__play { font-size: 17px; padding: 8px 0; } }

/* ----- game lightbox ----- */
.gamebox { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 12px; }
.gamebox[hidden] { display: none; }
.gamebox__veil { position: absolute; inset: 0; background: rgba(0,0,0,0.9); background-image: repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px); }
.gamebox__frame { position: relative; width: min(100%, 760px); max-height: 100%; display: flex; flex-direction: column; background: #05070b; border: 2px solid var(--acid); box-shadow: 0 0 0 2px #000, 0 0 60px rgba(232,255,58,0.25); animation: boxIn 0.28s steps(3, end) 1; }
.gamebox__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line-hot); font-family: var(--pix); font-size: 16px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--acid); flex: 0 0 auto; }
.gamebox__close { font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 6px 10px; border: 1px solid var(--line-hot); background: #0b0f15; color: var(--ice2); cursor: pointer; }
.gamebox__close:hover { border-color: var(--pink); color: var(--pink); }
.gamebox__body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-height: 0; }
.gamebox__body > section { margin: 0; border: 0; }
.gamebox__body > section .section-head, .gamebox__body > section .sec-title, .gamebox__body > section .sec-lead { display: none; }
.gamebox__body .club, .gamebox__body .arcade-cab { margin-top: 0; }
@keyframes boxIn { 0% { transform: translate(-6px, 4px) scale(0.98); opacity: 0.4; } 50% { transform: translate(4px, -2px); opacity: 1; } 100% { transform: none; } }
body.is-gamebox { overflow: hidden; }
body.is-gamebox .tabbar { display: none; }
@media (max-width: 640px) { .gamebox { padding: 0; align-items: flex-start; } .gamebox__frame { width: 100%; max-height: 100%; height: auto; border-width: 0; border-top: 2px solid var(--acid); border-bottom: 2px solid var(--acid); } }

.club__mini--pause { padding: 4px 8px; font-size: 13px; }

/* ----- sound system marquee over the station pad ----- */
.soundsys { margin: 0 0 12px; border: 1px solid var(--line-hot); background: #04060a; }
.soundsys canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
/* the club is a controller, not a document: no long-press text selection while holding REST */
.club, .club * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ----- FEVER DREAM layer: neon washes that slowly trade places, VHS grain, colour fringes ----- */
.fx-fever { position: fixed; inset: -10%; z-index: 0; pointer-events: none; }
.fx-fever i { position: absolute; inset: 0; display: block; opacity: 0; will-change: opacity; }
.fx-fever__a { background: radial-gradient(ellipse 70% 50% at 15% 20%, rgba(255,46,136,0.22), transparent 60%), radial-gradient(ellipse 60% 45% at 85% 75%, rgba(123,44,255,0.22), transparent 60%); animation: feverA 26s ease-in-out infinite; }
.fx-fever__b { background: radial-gradient(ellipse 65% 50% at 80% 15%, rgba(46,242,255,0.16), transparent 60%), radial-gradient(ellipse 60% 50% at 20% 85%, rgba(255,122,46,0.14), transparent 60%); animation: feverB 26s ease-in-out infinite; }
@keyframes feverA { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.15; } }
@keyframes feverB { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.9; } }
.fx-grain { position: fixed; inset: -20%; z-index: 400; pointer-events: none; opacity: 0.075; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; animation: grain 0.7s steps(3) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }
.sec-title.pix-head, .big-headline.pix-head, .album-title.pix-head { filter: drop-shadow(-2px 0 rgba(255,46,136,0.5)) drop-shadow(2px 0 rgba(46,242,255,0.4)); }
.hero__slogan { text-shadow: -1px 0 rgba(255,46,136,0.7), 1px 0 rgba(46,242,255,0.6), 0 0 14px rgba(232,255,58,0.5); }
.section-label { text-shadow: -1px 0 rgba(255,46,136,0.45), 1px 0 rgba(46,242,255,0.4); }
.is-lite .fx-grain, .is-lite .fx-fever, .is-gamebox .fx-grain { display: none; }
@media (prefers-reduced-motion: reduce) { .fx-grain { animation: none; } .fx-fever i { animation: none; opacity: 0.5; } }
@media (min-width: 901px) { .content { gap: 40px; } }

/* ----- GF VOX in ASCII: block-letter pads, text faders ----- */
.vpad__ascii { margin: 0; font-family: var(--sys); font-size: 11px; line-height: 1; letter-spacing: 0; white-space: pre; color: var(--ice2); text-shadow: 0 0 10px rgba(127,196,255,0.45); }
.vpad__lbl { font-size: 13px; letter-spacing: 0.24em; color: var(--ice-dim); }
.vpad.is-hit .vpad__ascii, .vpad.is-hit .vpad__lbl { color: #05070b; text-shadow: none; }
.vpad--soft span { font-family: var(--sys); font-size: 12px; letter-spacing: 0.16em; }
.vfaders--ascii { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 12px; }
.afader { position: relative; display: grid; grid-template-columns: 64px 1fr 56px; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(2,4,8,0.6); font-family: var(--pix); font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.afader__track { font-family: var(--sys); font-size: 13px; letter-spacing: 0; white-space: pre; color: var(--ice-dim); overflow: hidden; }
.afader__track b { font-weight: 400; color: var(--acid); text-shadow: 0 0 8px rgba(232,255,58,0.6); }
.afader__val { text-align: right; color: var(--acid); font-weight: 400; }
.afader.is-drag { border-color: var(--acid); }
.sr-range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.afader:focus-within { border-color: var(--acid); }
@media (min-width: 901px) { .vfaders--ascii { grid-template-columns: repeat(3, 1fr); } .afader { grid-template-columns: 60px 1fr 52px; } .vpad__ascii { font-size: 13px; } }
@media (max-width: 640px) { .vpad__ascii { font-size: 8.5px; } .afader { grid-template-columns: 56px 1fr 46px; padding: 8px 8px; gap: 6px; } .afader__track { font-size: 11px; } .vpad--soft span { font-size: 11px; letter-spacing: 0.12em; } }

/* ----- station glitch bursts (class toggled by initSoundSystem) ----- */
.dubunit.is-glitch .dubpad { animation: stTear 0.24s steps(3, end) 1; }
.dubunit.is-glitch .dubunit__brand, .dubunit.is-glitch .dubpad__hint, .dubunit.is-glitch .knob label { animation: rip 0.3s steps(2, end) 1; }
.dubunit.is-glitch .soundsys { filter: drop-shadow(-3px 0 rgba(255,46,136,0.7)) drop-shadow(3px 0 rgba(46,242,255,0.6)); }
.dubunit.is-glitch .vu__fill { background: repeating-linear-gradient(90deg, var(--pink) 0 4px, var(--cyan) 4px 8px); }
@keyframes stTear { 0% { transform: translateX(0) skewX(0); } 34% { transform: translateX(-4px) skewX(-1.5deg); clip-path: inset(12% 0 40% 0); } 67% { transform: translateX(5px) skewX(1deg); clip-path: inset(48% 0 8% 0); } 100% { transform: none; clip-path: none; } }
@media (max-width: 900px) { .imprint { grid-template-columns: 1fr; gap: 12px; } }
/* video panels must not contain layout: the sticky mini player inside is position: fixed and needs the viewport as its frame */
.panel.visualizer, .panel.transmissions, .panel.cam { contain: none; }
/* desktop: the station pad is the instrument, give it real room */
@media (min-width: 901px) { .dubpad { height: clamp(380px, 46vh, 560px); } }
/* ----- nyan gf (easter egg overlay) ----- */
.nyan { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 450; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; }
.boltmark { pointer-events: auto; cursor: pointer; }
/* app feel: no double-tap zoom anywhere (pinch still works); the instruments are tap targets, not text */
body { touch-action: manipulation; }
.vox, .vox *, .club, .dubunit, .dubunit *, .tray, .tray *, .arcade-cab, .arcade-cab *, .marquee, .cam__ctrls, .caps { touch-action: manipulation; }
.dubpad, .vpad, .club__pad--rest, .knob__dial, .wall__frame, .wall__frame * { touch-action: none; }
/* smiley on the holo window, top right */
.holo__smiley { position: absolute; right: 10px; top: 8px; width: 46px; height: 46px; z-index: 3; --r: 12deg; transform: rotate(var(--r)); filter: drop-shadow(0 3px 0 rgba(0,0,0,0.6)); pointer-events: none; animation: smileyBob 3.2s ease-in-out infinite; }
.holo__smiley svg { width: 100%; height: 100%; display: block; }
@keyframes smileyBob { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(calc(var(--r) - 6deg)) translateY(-3px); } }