/* ─────────────────────────────────────────────────────────────
   Nimbus Hollow: the studio's look. Street-signal style in black,
   blue and pink: heavy slanted type, cut corners, halftone dots,
   caution tape, numbered tags. Loaded after each studio page's own
   styles, so it takes over from the old retro look. The motion that
   goes with it lives in the page's fx-theme block.
   ───────────────────────────────────────────────────────────── */
:root {
  --ink: #06070b; --ink-2: #0e1019; --ink-3: #171a28;
  --paper: #f3f5fa; --paper-dim: #9aa2b6;
  --pink: #ff3d9a; --pink-deep: #a3125e;
  --blue: #2fbcff; --blue-deep: #0b5f8f;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Chakra Petch', 'Barlow', monospace;
  --slant: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

body { font: 500 1.08rem/1.6 var(--body); -webkit-font-smoothing: antialiased; background: var(--ink); counter-reset: sec; }
/* Halftone dots in two corners, pink up top and blue down below, behind everything. */
body::before { z-index: -1; background: radial-gradient(circle, rgba(255,61,154,.26) 1.3px, transparent 1.7px) 0 0 / 13px 13px;
  -webkit-mask-image: radial-gradient(65% 55% at 100% 0%, #000, transparent 72%); mask-image: radial-gradient(65% 55% at 100% 0%, #000, transparent 72%); }
body::after { z-index: -1; background: radial-gradient(circle, rgba(47,188,255,.2) 1.3px, transparent 1.7px) 0 0 / 13px 13px;
  -webkit-mask-image: radial-gradient(60% 50% at 0% 100%, #000, transparent 72%); mask-image: radial-gradient(60% 50% at 0% 100%, #000, transparent 72%); }

a { color: var(--blue); }
a:hover, a:focus-visible { color: var(--pink); background: none; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; line-height: .95; letter-spacing: .005em; }
.muted { color: var(--paper-dim); }

/* ── Top bar ── */
.top { background: rgba(6,7,11,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 0; }
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, var(--pink) 0 22%, var(--blue) 22% 44%, transparent 44%); }
.logo { gap: .6rem; font: 900 italic 1.35rem/1 var(--display); letter-spacing: .02em; color: var(--paper); }
.logo svg { display: none; }
.logo img { flex: none; width: auto; height: 44px; margin: -6px 0; filter: drop-shadow(0 0 6px rgba(255,61,154,.25)); transition: filter .25s, rotate .25s; }
.logo:hover img { filter: drop-shadow(0 0 10px rgba(255,61,154,.55)) drop-shadow(0 0 16px rgba(47,188,255,.35)); rotate: -4deg; }
.logo:hover { color: var(--pink); }
.top nav a, .top nav .menu-btn { font: 700 italic 1.08rem/1 var(--display); letter-spacing: .05em; text-transform: uppercase; padding: .5rem .85rem; border: 0; color: var(--paper); }
.top nav a:hover, .top nav .menu-btn:hover, .top nav .menu.open > .menu-btn, .top nav .menu.cur > .menu-btn, .top nav a[aria-current] {
  color: var(--ink); background: var(--pink); clip-path: var(--slant); border: 0; }
.menu-list { background: var(--ink-2); border: 0; border-left: 3px solid var(--pink); box-shadow: 0 20px 44px rgba(0,0,0,.65); padding: .4rem; }
.menu-list a:hover { background: var(--blue) !important; }

/* ── Hero ── */
.hero { border-bottom: 0; padding: clamp(3.4rem, 8vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem); background: linear-gradient(180deg, transparent 40%, rgba(255,61,154,.05)); }
/* Diagonal hazard stripes and a huge outlined word behind the hero. */
.hero .grid { opacity: 1; background: repeating-linear-gradient(-58deg, rgba(47,188,255,.08) 0 2px, transparent 2px 24px);
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 80%); mask-image: linear-gradient(100deg, transparent 30%, #000 80%); }
.hero .grid::after { content: 'HOLLOW'; position: absolute; right: -3%; bottom: -10%; font: 900 italic clamp(7rem, 24vw, 21rem)/.8 var(--display);
  color: transparent; -webkit-text-stroke: 2px rgba(255,61,154,.28); letter-spacing: -.02em; white-space: nowrap; pointer-events: none; }
.kicker { display: inline-block; font: 700 .76rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: var(--blue);
  padding: .42rem 1rem .4rem .7rem; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); margin-bottom: 1.5rem; }
.title { --o: 5px; display: block; font-size: clamp(3rem, 9.4vw, 7.2rem); font-weight: 900; line-height: .86; letter-spacing: -.005em; color: var(--paper);
  text-shadow: var(--o) var(--o) 0 var(--pink), calc(var(--o) * 2) calc(var(--o) * 2) 0 var(--blue); }
@media (max-width: 640px) { .title { --o: 3px; } }
.hero .wrap.split .title { font-size: clamp(3rem, 7.6vw, 6.4rem); }
.tagline { font: 500 clamp(1.1rem, 1.7vw, 1.35rem)/1.55 var(--body); color: var(--paper-dim); max-width: 44ch; margin: 1.8rem 0 2.1rem; padding-left: 1rem; border-left: 3px solid var(--pink); }
.tagline .cursor { display: none; }
.tabs { gap: .5rem; }
.tabs a { font: 700 italic 1rem/1 var(--display); letter-spacing: .05em; padding: .55rem 1.1rem; border: 0; color: var(--paper); background: var(--ink-3); clip-path: var(--slant); }
.tabs a[aria-current], .tabs a[aria-current]:hover { color: var(--ink); background: var(--pink); }
.tabs a:hover { color: var(--ink); background: var(--blue); border: 0; }

/* ── Buttons: slanted plates ── */
.btn { font: 800 italic 1.08rem/1 var(--display); letter-spacing: .05em; text-transform: uppercase; padding: .8rem 1.6rem .8rem 1.4rem;
  color: var(--ink); background: var(--pink); border: 0; box-shadow: none; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: background-color .15s, color .15s, translate .15s; }
.btn:hover, .btn:focus-visible { color: var(--ink); background: var(--paper); border: 0; box-shadow: none; transform: none; translate: 3px -2px; }
.btn.blue, .btn.blue:hover { box-shadow: none; }
.btn.blue { background: var(--blue); }
.btn.blue:hover, .btn.blue:focus-visible { background: var(--paper); }
.btn.ghost { color: var(--paper); background: var(--ink-3); }
.btn.ghost:hover, .btn.ghost:focus-visible { color: var(--ink); background: var(--blue); }
.btn.big { font-size: 1.25rem; padding: 1rem 1.9rem 1rem 1.7rem; }

/* ── The Kickstarter strip: caution tape ── */
.campaign { position: relative; font: 700 italic 1.05rem/1.3 var(--display); letter-spacing: .04em; text-transform: uppercase; padding: .6rem 4rem; color: var(--ink); background-color: var(--pink); border: 0; }
.campaign::before, .campaign::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3rem; background: linear-gradient(45deg, var(--ink) 25%, transparent 25% 50%, var(--ink) 50% 75%, transparent 75%) 0 0 / 18px 18px; }
.campaign::before { left: 0; } .campaign::after { right: 0; }
.campaign b { font: 700 .72rem/1 var(--mono); letter-spacing: .14em; color: var(--pink); background: var(--ink); padding: .25rem .5rem; margin-right: .7rem; vertical-align: .12em; }
.campaign:hover, .campaign:focus-visible { background-color: var(--blue); color: var(--ink); }
.campaign:hover b { color: var(--blue); }

/* ── The ticker: a slanted tape across the page ── */
.ticker { position: relative; z-index: 2; margin: 1.6rem 0 .6rem; border: 0; color: var(--ink); background: var(--blue); transform: skewY(-1.6deg);
  font: 800 italic 1.12rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 9px 0 var(--pink); }
.ticker-track { padding: .55rem 0; }
.ticker b { font: 700 .7rem/1 var(--mono); letter-spacing: .14em; color: var(--blue); background: var(--ink); padding: .25rem .45rem; margin-right: .5rem; vertical-align: .12em; }

/* ── Sections: numbered, with a slash of colour under each title ── */
section { border-bottom: 0; }
.sec-head { position: relative; align-items: center; gap: .7rem 1.1rem; margin-bottom: 1.9rem; counter-increment: sec; }
.sec-head::before { content: counter(sec, decimal-leading-zero); font: 700 .82rem/1 var(--mono); letter-spacing: .1em; color: var(--ink); background: var(--pink); padding: .38rem .6rem .36rem .5rem; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.sec-head h2 { position: relative; z-index: 0; font-size: clamp(2.1rem, 5.2vw, 3.5rem); font-weight: 900; color: var(--paper); }
.sec-head h2::after { content: ''; position: absolute; z-index: -1; left: -.1em; right: -.25em; bottom: .02em; height: .3em; background: var(--blue); opacity: .55; transform: skewX(-20deg); transform-origin: left; }
.sec-head > span, .sec-head > .muted { font: 600 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-dim); }
.status { font: 700 .72rem/1 var(--mono); letter-spacing: .12em; padding: .38rem .7rem; border: 0; color: var(--ink); background: var(--paper); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.status.pink { background: var(--pink); color: var(--ink); }
.status.blue { background: var(--blue); color: var(--ink); }
.status.white { background: var(--paper); color: var(--ink); }
.status.red { background: #ff2f3a; color: var(--ink); }

/* ── Cut-corner frames: the video, the game cards, the link cards, the panels ── */
.video { border: 0; padding: 3px; background: linear-gradient(135deg, var(--pink), var(--blue)); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.video-note { font-size: .98rem; }

.cabinets { gap: 1.4rem; counter-reset: cab; }
.cab { position: relative; counter-increment: cab; border: 0; background: var(--ink-2); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.cab:hover, .cab:focus-visible, .cab.blue:hover, .cab.red:hover { background: var(--ink-3); box-shadow: none; transform: none; border: 0; }
.cab::before { content: 'NO.' counter(cab, decimal-leading-zero); position: absolute; z-index: 2; top: .85rem; left: .85rem; font: 700 .72rem/1 var(--mono); letter-spacing: .12em; color: var(--ink); background: var(--paper); padding: .32rem .5rem; }
.cab img, .cab-art { border-bottom: 0; }
.cab-body { gap: .6rem; padding: 1.1rem 1.3rem 1.6rem; border-top: 4px solid var(--pink); }
.cab.blue .cab-body { border-top-color: var(--blue); }
.cab.red .cab-body { border-top-color: #ff2f3a; }
.cab-body .status { align-self: flex-start; }
.cab-body h3 { font-size: 2.15rem; font-weight: 900; color: var(--paper); }
.cab-body p { font-size: 1rem; line-height: 1.55; color: var(--paper-dim); }
.cab-body b { font: 700 .8rem/1 var(--mono); letter-spacing: .14em; color: var(--pink); padding-top: .7rem; }
.cab.blue .cab-body b { color: var(--blue); }

.links { gap: 1rem; }
.link { position: relative; padding: 1.25rem 3rem 1.35rem 1.3rem; border: 0; border-left: 4px solid var(--pink); background: var(--ink-2); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.link:nth-child(even) { border-left-color: var(--blue); }
.link:hover, .link:focus-visible { background: var(--ink-3); border-color: var(--pink); border-left-width: 4px; }
.link::after { content: '\2197'; position: absolute; top: 1rem; right: 1.5rem; font: 700 1.1rem/1 var(--body); color: var(--pink); transition: translate .2s; }
.link:nth-child(even)::after { color: var(--blue); }
.link:hover::after { translate: 3px -3px; }
.link b { font: 900 italic 1.7rem/1 var(--display); letter-spacing: .01em; text-transform: uppercase; color: var(--paper); margin-bottom: .45rem; }
.link:hover b { color: var(--paper); }
.link span { font-size: 1rem; line-height: 1.5; color: var(--paper-dim); }

.panel { position: relative; border: 0; background: var(--ink-2); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.panel > header { width: fit-content; min-width: 50%; font: 800 italic 1.15rem/1 var(--display); letter-spacing: .04em; color: var(--ink); background-color: var(--paper); border: 0;
  padding: .55rem 1.6rem .55rem 1.1rem; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.panel > header i { display: none; }
.panel .body { padding: 1.4rem 1.4rem .6rem; }
.price { font: 900 italic 2.4rem/1 var(--display) !important; color: var(--pink); }
.lead { font: 700 italic 1.5rem/1.25 var(--display); text-transform: none; }
ul.list li { padding-left: 1.5rem; }
ul.list li::before { content: ''; top: .72em; width: 11px; height: 4px; background: var(--pink); transform: skewX(-20deg); }
.blue ul.list li::before { background: var(--blue); }
.closed, .note { border-radius: 0; }
kbd { font-family: var(--mono); font-size: .9em; border: 1px solid var(--paper-dim); padding: 0 .35rem; }
th { font: 700 .72rem/1.2 var(--mono); letter-spacing: .1em; color: var(--blue); }
th, td { border-bottom: 1px solid var(--ink-3); }
.facts th { color: var(--paper-dim); }
.prose h3 { font-size: 1.5rem; color: var(--paper); }
.prose h3::first-letter { color: var(--pink); }
.downloads a { border: 0; background: var(--ink-2); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.downloads a:hover { background: var(--ink-3); }
.downloads b { font-family: var(--mono); color: var(--blue); }
.gallery a { border: 0; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }

/* ── Footer: a stripe of hazard tape, then the credits ── */
footer { font-size: .98rem; background: linear-gradient(180deg, transparent, rgba(47,188,255,.05)); }
footer .wrap > div > b[style] { font: 900 italic 1.5rem/1 var(--display) !important; letter-spacing: .02em; text-transform: uppercase; }
footer .bar { height: 10px; background: linear-gradient(45deg, var(--pink) 25%, var(--ink) 25% 50%, var(--pink) 50% 75%, var(--ink) 75%) 0 0 / 20px 20px; }
footer .bar b { display: none; }

/* ── Homepage hero: the channel wall. Three screens, one per game, with Pebble out front. ── */
.hero .wrap.split { display: grid; grid-template-columns: 1.08fr .92fr; gap: 2.5rem; align-items: center; }
@media (max-width: 900px) { .hero .wrap.split { grid-template-columns: 1fr; gap: 2rem; } }
.stage { position: relative; aspect-ratio: 1 / .92; width: 100%; max-width: 560px; justify-self: end; }
@media (max-width: 900px) { .stage { justify-self: center; max-width: 440px; } }
.tv { position: absolute; margin: 0; background: var(--ink-2); padding: 6px 6px 30px; }
.tv img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; } /* height: auto, or the size attributes stretch it */
.tv::after { content: ''; position: absolute; inset: 6px 6px 30px; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.tv figcaption { position: absolute; left: 8px; right: 8px; bottom: 7px; display: flex; justify-content: space-between; gap: .5rem; font: 700 .64rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-dim); white-space: nowrap; overflow: hidden; }
.tv figcaption b { color: var(--ink); background: var(--pink); padding: .18rem .35rem; font-weight: 700; }
.tv-1 { width: 66%; left: 0; top: 20%; rotate: -4deg; box-shadow: 9px 9px 0 var(--pink); z-index: 2; }
.tv-2 { width: 56%; right: 4%; top: 0; rotate: 5deg; box-shadow: -8px 8px 0 var(--blue); z-index: 1; }
.tv-2 figcaption b { background: var(--blue); }
.tv-3 { width: 54%; left: 20%; bottom: 0; rotate: 3deg; box-shadow: 8px 8px 0 var(--blue); z-index: 3; }
.tv-3 figcaption b { background: #ff2f3a; }
.mascot { position: absolute; z-index: 4; right: -6%; bottom: -6%; height: 84%; width: auto;
  filter: drop-shadow(4px 0 0 var(--pink)) drop-shadow(-4px 0 0 var(--blue)) drop-shadow(0 18px 24px rgba(0,0,0,.6)); }
.sticker { position: absolute; z-index: 5; left: 0; bottom: 26%; font: 900 italic 1.15rem/1 var(--display); letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink); background: var(--paper); padding: .45rem .75rem; rotate: -8deg; box-shadow: 4px 4px 0 var(--pink); }