/*
      ___________________________________________
     |  _______________________________________  |
     | |                                       | |
     | |   [][][][][][][][][][][][][][][][][]  | |
     | |   [][][][][][][][]  [][][][][][][][]  | |
     | |                                       | |
     | |                 o                     | |
     | |                                       | |
     | |             ==========                | |
     | |_______________________________________| |
     |___________________________________________|
            SMASHOID 1984  --  INSERT COIN

   Smashoid 1984 landing pages (/smashoid/, /en/smashoid/, /ru/smashoid/).
   A world of its own: these pages load smashoid-fonts.css and this file,
   never styles.css, so nothing leaks into the main site and vice versa.
   Fonts are self-hosted, see assets/fonts/smashoid-fonts.css.
*/

:root {
  --black: #000000;
  --blue: #0000d7;
  --blue-bright: #0000ff;
  --yellow: #ffff00;
  --cyan: #00ffff;
  --magenta: #ff00ff;
  --green: #00ff00;
  --red: #ff2a2a;
  --white: #ffffff;
  --grey: #c8c8c8;
  --pixel: "Press Start 2P", "Courier New", monospace;
  --mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1120px;
  --bar: 60px;   /* sticky top bar, border included */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--mono);
  font-size: clamp(16px, 1.05vw + 12px, 19px);
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }
.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }

a { color: var(--yellow); }
a:hover { color: var(--white); }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--yellow); color: var(--black); padding: 10px 14px;
  font-family: var(--pixel); font-size: 12px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Spam trap: never shown to humans, present for scrapers.
   Same rule as styles.css, which these pages don't load. */
.spam-trap { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Top bar ----------
   Sticky, in the flow above the hero (which is one bar shorter than the
   screen), so it never hides the top of the gameplay. Logo left, sections
   in the middle, language right. Below 1280px the sections fold into a
   burger menu that drops down under the bar; on phones (640px and less)
   the languages move into it too, as its first row, since a one-line
   logo, three language buttons and a burger don't share 320px. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--bar);
  background: var(--black); border-bottom: 3px solid var(--blue-bright);
}
.topbar-inner {
  height: 100%; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 16px;
}
.topbar-home { display: block; flex: none; margin-right: auto; }
.topbar-home img { height: 24px; width: auto; aspect-ratio: 549 / 56; }   /* file is 2x */
.topbar-menu {
  display: flex; gap: 0; margin: 0; padding: 0; list-style: none;
  font: 400 10px/1.3 var(--pixel);
}
.topbar-menu a {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px;
  color: var(--white); text-decoration: none; white-space: nowrap;
}
.topbar-menu a:hover, .topbar-menu a[aria-current="location"] { color: var(--yellow); }
.topbar-menu .key { display: none; color: var(--yellow); }   /* numbered in the burger menu only */
.topbar-burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  color: var(--white); background: var(--black); border: 3px solid var(--white); cursor: pointer;
}
.topbar-burger:hover, .topbar-burger[aria-expanded="true"] { color: var(--black); background: var(--yellow); border-color: var(--yellow); }
.topbar-burger svg { width: 20px; height: 20px; }
.topbar-burger__close, .topbar-burger[aria-expanded="true"] .topbar-burger__open { display: none; }
.topbar-burger[aria-expanded="true"] .topbar-burger__close { display: block; }
.lang { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; font: 400 12px/1 var(--pixel); }
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 8px;
  color: var(--white); text-decoration: none;
}
.lang a:hover { color: var(--yellow); }
.lang a[aria-current="page"] { background: var(--blue-bright); color: var(--yellow); }
.topbar-menu__lang { display: none; }
@media (max-width: 1279px) {
  .topbar-nav { order: 2; }   /* burger goes to the far right, after the languages */
  .topbar-burger { display: inline-flex; }
  .topbar-menu .key { display: inline; }
  .topbar-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    max-height: calc(100vh - var(--bar)); max-height: calc(100dvh - var(--bar)); overflow-y: auto;
    padding: 8px var(--gutter) 16px;
    font-size: 13px;
    background: var(--black); border-bottom: 3px solid var(--blue-bright);
  }
  .topbar.is-open .topbar-menu { display: flex; }
  .topbar-menu a { min-height: 52px; padding: 0 4px; border-bottom: 2px solid #2a2a2a; white-space: normal; }
  .topbar-menu li:last-child a { border-bottom: 0; }
}
@media (max-width: 640px) {
  .lang-nav { display: none; }
  .topbar-menu__lang { display: block; padding: 8px 0 12px; border-bottom: 2px solid #2a2a2a; }
  .topbar-menu .lang a { min-height: 44px; padding: 0 8px; border-bottom: 0; font-size: 12px; }
}
@media (max-width: 400px) {
  .topbar-home img { height: 20px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - var(--bar)); min-height: calc(100svh - var(--bar));
  display: grid; place-items: center;
  padding: 64px var(--gutter) 72px;
  text-align: center;
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* Fit to height, centred: the whole game screen stays in view top to
   bottom. Wide heroes get black side bars (the page is black anyway),
   narrow ones lose a little at the sides. Still and animation share the
   rule, so the fade from one to the other doesn't jump. */
.hero-media img {
  position: absolute; top: 0; left: 50%; z-index: -2;
  width: auto; max-width: none; height: 100%;
  transform: translateX(-50%);
}
/* The gameplay is an animated WebP over the still: an image, so Safari
   scales it with crisp pixels too, which it won't do for <video>. */
.hero-media .anim img { opacity: 0; transition: opacity 0.6s ease; }
.hero-media .anim img.is-playing { opacity: 1; }
.hero::before { /* dimming + scanlines so text stays readable over any frame */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.35) 2px 4px),
    rgba(0, 0, 0, 0.62);
}
.hero-inner { width: 100%; max-width: 860px; display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 32px); }
.hero-logo { width: min(760px, 100%); }
.hero h1 { margin: 0; }
/* A dark oval behind the logo and tagline, so they read over any frame of
   the gameplay. Painted above the scanline overlay, below the text. */
.hero-head {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 32px);
}
.hero-head::before {
  content: ""; position: absolute; inset: -20% -16%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.45) 78%, rgba(0, 0, 0, 0.18) 92%, rgba(0, 0, 0, 0));
}
.tagline {
  margin: 0; max-width: 34ch;
  font-size: clamp(18px, 1.6vw + 12px, 26px); line-height: 1.45; color: var(--white);
  text-shadow: 2px 2px 0 var(--black);
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }

.btn-play {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 18px 30px;
  font-family: var(--pixel); font-size: clamp(16px, 1vw + 12px, 22px); line-height: 1.2;
  color: var(--black); background: var(--yellow); text-decoration: none;
  box-shadow: 6px 6px 0 var(--blue-bright);
  transition: transform 0.08s steps(2), box-shadow 0.08s steps(2);
  animation: flash 0.64s steps(1, end) infinite;
}
/* FLASH, the way 8-bit home computers did it: ink and paper swap places
   every 16 frames (0.32 s at 50 Hz). A yellow outline keeps the button's
   shape while it's the dark one. Holds still while hovered, focused or
   pressed, and for anyone who asked for less motion. */
@keyframes flash {
  50% { color: var(--yellow); background: var(--black); box-shadow: inset 0 0 0 3px var(--yellow), 6px 6px 0 var(--blue-bright); }
}
.btn-play:hover, .btn-play:focus-visible, .btn-play:active { animation: none; }
@media (prefers-reduced-motion: reduce) { .btn-play { animation: none; } }
.btn-play:hover { color: var(--black); background: var(--white); }
.btn-play:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--blue-bright); }
.btn-play svg { width: 20px; height: 20px; flex: none; }

.socials { display: flex; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; color: var(--white); background: rgba(0, 0, 0, 0.7);
  border: 3px solid var(--white);
}
.social svg { width: 28px; height: 28px; }
.social:hover { color: var(--black); background: var(--cyan); border-color: var(--cyan); }

.hero-url { margin: 0; font-family: var(--pixel); font-size: clamp(10px, 0.6vw + 8px, 14px); color: var(--cyan); letter-spacing: 0.04em; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  font-family: var(--pixel); font-size: 18px; color: var(--yellow); text-decoration: none;
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 120px) var(--gutter); }
.section-alt { background: var(--blue); }
.wrap { max-width: var(--max); margin: 0 auto; }

.section-title {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-family: var(--pixel); font-weight: 400;
  font-size: clamp(18px, 2vw + 10px, 34px); line-height: 1.4;
  color: var(--white); text-transform: uppercase;
}
.section-title .key { color: var(--yellow); }
.section-title .dash { color: var(--cyan); }

.lead { margin: 0 0 1em; max-width: 62ch; font-size: 1.12em; }
.prose p { margin: 0 0 1em; max-width: 62ch; }

.two-col { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

.features { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.features li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 14px 16px; border: 2px solid #2a2a2a; background: #0b0b0b;
}
.features li::before { content: "■"; font-family: var(--pixel); font-size: 12px; flex: none; }
.features li:nth-child(5n+1)::before { color: var(--yellow); }
.features li:nth-child(5n+2)::before { color: var(--magenta); }
.features li:nth-child(5n+3)::before { color: var(--cyan); }
.features li:nth-child(5n+4)::before { color: var(--green); }
.features li:nth-child(5n+5)::before { color: var(--red); }

.screen {
  position: relative;
  border: 6px solid var(--white); box-shadow: 12px 12px 0 var(--cyan); background: var(--black);
  margin: 0 12px 12px 0;
}
.screen img { width: 100%; aspect-ratio: 972 / 730; }
@media (orientation: portrait) and (max-width: 760px) and (pointer: coarse) {
  .screen img { aspect-ratio: 276 / 598; }   /* the phone still, same query as its <source> */
}
/* The playthrough (animated WebP) sits on the still and fades in once loaded. */
.screen .anim img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.6s ease;
}
.screen .anim img.is-playing { opacity: 1; }

/* timeline */
.timeline { margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; list-style: none; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.timeline li { padding: 20px 18px 22px; background: #0b0b0b; border-top: 6px solid var(--yellow); }
.timeline li:nth-child(2) { border-top-color: var(--magenta); }
.timeline li:nth-child(3) { border-top-color: var(--cyan); }
.timeline li:nth-child(4) { border-top-color: var(--green); }
.timeline li:nth-child(5) { border-top-color: var(--red); background: #160000; }
.timeline .year { display: block; font-family: var(--pixel); font-size: 20px; color: var(--yellow); margin-bottom: 6px; }
.timeline .name { display: block; font-family: var(--pixel); font-size: 11px; line-height: 1.6; color: var(--cyan); margin-bottom: 10px; }
.timeline p { margin: 0; font-size: 0.92em; line-height: 1.55; color: var(--grey); }

/* build */
.stack { margin: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .stack { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stack div { padding: 22px 20px 24px; background: var(--black); border: 3px solid var(--blue-bright); box-shadow: 6px 6px 0 #000080; }
.stack dt { font-family: var(--pixel); font-size: 14px; line-height: 1.5; color: var(--cyan); text-transform: uppercase; margin-bottom: 20px; }
.stack dd { margin: 0; font-size: 0.88em; line-height: 1.6; color: var(--white); }
.stack code { font: inherit; color: var(--yellow); }

/* author */
.author-card { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 800px) { .author-card { grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); } }
.author-logo { width: min(320px, 80%); aspect-ratio: 404 / 192; }
.author-media { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* 106x130 pixels, transparent round the figure, the shoulders dithered away
   into the page; shown at exactly 3x. */
.author-portrait { width: min(318px, 100%); aspect-ratio: 106 / 130; }

.share { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 4vw, 40px); background: var(--blue-bright); box-shadow: 10px 10px 0 var(--yellow); }
.share h3 { margin: 0 0 12px; font-family: var(--pixel); font-weight: 400; font-size: clamp(16px, 1.2vw + 10px, 22px); line-height: 1.5; color: var(--yellow); }
.share p { margin: 0 0 20px; max-width: 60ch; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 16px;
  font: 400 12px/1.2 var(--pixel); color: var(--white); background: var(--black);
  border: 3px solid var(--white); text-decoration: none; cursor: pointer;
}
.share-btn:hover { color: var(--black); background: var(--yellow); border-color: var(--yellow); }
.share-btn[hidden] { display: none; }
.share-status { min-height: 1.6em; margin: 14px 0 0; font-family: var(--pixel); font-size: 11px; color: var(--yellow); }

/* ---------- Music: the tape deck ----------
   A C-11 that never chews the tape. The cassette is pixel art on a canvas
   (smashoid.js draws it and spins the reels); the rest is HTML. The section
   has its own dark red, and the deck's drop shadows follow it. */
.section-music { --deck-shadow: #2a0000; background: #6b0000; }
.listen-btn {
  display: flex; width: max-content; max-width: 100%; align-items: center; gap: 10px;
  margin-top: 14px; min-height: 44px; padding: 10px 14px;
  font: 400 11px/1.3 var(--pixel); color: var(--black); background: var(--yellow);
  text-decoration: none; box-shadow: 4px 4px 0 var(--blue-bright);
}
.listen-btn:hover { color: var(--black); background: var(--white); }
.listen-btn svg { width: 14px; height: 14px; flex: none; }
#s5 { scroll-margin-top: 24px; }

.deck {
  display: grid; gap: clamp(24px, 4vw, 40px); margin-top: clamp(32px, 5vw, 56px);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start;
}
.deck-main { display: flex; flex-direction: column; gap: 16px; }
.deck-cassette { display: block; width: 100%; height: auto; }

.deck-display {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  background: var(--black); border: 3px solid var(--white); box-shadow: 6px 6px 0 var(--deck-shadow, #000080);
  font-family: var(--pixel); font-size: 12px; line-height: 1.5; color: var(--cyan);
}
.deck-display__top { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.deck-display__n { color: var(--yellow); }
.deck-display__t { color: var(--white); }
.deck-display__w { font-family: var(--mono); font-size: 14px; color: var(--grey); }
.deck-display__time { color: var(--green); }

.deck-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.deck-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0; cursor: pointer;
  color: var(--white); background: var(--black); border: 3px solid var(--white);
  box-shadow: 4px 4px 0 var(--deck-shadow, #000080);
}
.deck-btn svg { width: 22px; height: 22px; }
.deck-btn:hover { color: var(--black); background: var(--yellow); border-color: var(--yellow); }
.deck-btn:active { transform: translate(4px, 4px); box-shadow: none; }
.deck-btn--play[aria-pressed="true"] { color: var(--black); background: var(--green); border-color: var(--green); }

/* The song list: a fixed window onto a ring. smashoid.js gives every row its
   offset from the current tune (--off, -6..6); rows slide one slot per press
   in 8-bit steps, and a row that wraps round the back jumps without sliding. */
.deck-list-box {
  --row: 54px; --rows: 7;
  container-type: inline-size;   /* so the rows can tell how narrow they've got */
  position: relative; height: calc(var(--row) * var(--rows)); overflow: hidden;
  background: var(--black); border: 3px solid var(--white); box-shadow: 6px 6px 0 var(--deck-shadow, #000080);
}
.deck-list-box::after {   /* the "now loaded" slot */
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - var(--row) / 2); height: var(--row);
  border-top: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow); pointer-events: none;
}
.deck-list { margin: 0; padding: 0; list-style: none; }
.deck-list li {
  position: absolute; left: 0; right: 0; top: calc(50% - var(--row) / 2); height: var(--row);
  transform: translateY(calc(var(--off, 0) * var(--row)));
  transition: transform 0.2s steps(4, end), opacity 0.2s steps(4, end);
}
.deck-list li.no-anim { transition: none; }
.deck-list li.is-far { opacity: 0; visibility: hidden; }
.deck-list button {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: 12px; align-content: center; width: 100%; height: 100%; padding: 0 14px;
  text-align: left; cursor: pointer; color: var(--white); background: transparent; border: 0;
  font-family: var(--mono);   /* buttons don't inherit the page font on their own */
}
.deck-n, .deck-t, .deck-d { font-family: var(--pixel); font-size: 11px; line-height: 1.5; }
.deck-n { grid-row: 1 / 3; align-self: center; color: var(--yellow); }
.deck-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-w { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.4; color: var(--grey); }
.deck-d { grid-row: 1 / 3; grid-column: 3; align-self: center; color: var(--cyan); }
.deck-list button:hover .deck-t { color: var(--yellow); }
.deck-list li.is-current button { background: var(--blue-bright); }
.deck-list li.is-current .deck-t { color: var(--yellow); }
.deck.is-playing .deck-list li.is-current .deck-n { color: var(--green); }
/* Under 300px of list (a 320px phone, or the two-column deck just past
   760px) "Title screen and menus" won't fit: tighter padding and gaps, and
   the subtitle a pixel smaller. Fits in all three languages down to 320. */
@container (max-width: 299px) {
  .deck-list button { column-gap: 8px; padding: 0 10px; }
  .deck-w { font-size: 12px; }
}

.deck-copy { margin: 24px 0 0; font-family: var(--pixel); font-size: 10px; line-height: 1.6; color: var(--grey); }

/* Phones and narrow windows: the list goes on top, five rows tall. */
@media (max-width: 760px) {
  .deck { grid-template-columns: minmax(0, 1fr); }
  .deck-list-box { --row: 50px; --rows: 5; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .deck-list li { transition: none; } }

/* footer */
.footer { background: var(--blue-bright); padding: 20px var(--gutter); }
.footer-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.footer-url { font-family: var(--pixel); font-size: clamp(12px, 1vw + 8px, 18px); color: var(--yellow); text-decoration: none; }
.footer-url::before { content: "> "; color: var(--green); }
.footer-copy { display: flex; align-items: center; gap: 12px; font-family: var(--pixel); font-size: 12px; color: var(--yellow); }
.footer-copy img { width: 152px; aspect-ratio: 404 / 192; }
.footer-legal { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--pixel); font-size: 10px; line-height: 1.6; }
.footer-legal a { color: var(--white); }
.footer-legal a:hover { color: var(--yellow); }
@media (max-width: 760px) {   /* phones: one centred column */
  .footer-inner { flex-direction: column; justify-content: center; text-align: center; }
  .footer-copy { justify-content: center; }
  .footer-legal { flex-basis: auto; justify-content: center; }
}

/* ---------- Cookie banner ----------
   The main site's banner in an 8-bit costume: same ids and data attributes,
   so cookies.js (imported by smashoid.js) runs it unchanged, and an answer
   given on micca.dev counts here too. Asks once, bottom right, like a
   high-score table that only wants one entry. */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: flex-end;
  padding: 0 calc(12px + 6px) calc(12px + 6px) 12px;   /* room for the drop shadow */
  pointer-events: none;
}
.cookie[hidden] { display: none; }
.cookie-card {
  pointer-events: auto;
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px 18px;
  background: var(--black); border: 3px solid var(--white); box-shadow: 6px 6px 0 var(--blue-bright);
}
.cookie-title { margin: 0; font: 400 12px/1.6 var(--pixel); color: var(--yellow); }
.cookie-title::before { content: "> "; color: var(--green); }
.cookie-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--grey); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 14px;
  font: 400 11px/1.3 var(--pixel); color: var(--white); background: var(--black);
  border: 3px solid var(--white); cursor: pointer;
}
.cookie-btn:hover { color: var(--black); background: var(--white); }
.cookie-btn--solid { color: var(--black); background: var(--yellow); border-color: var(--yellow); }
.cookie-btn--solid:hover { background: var(--white); border-color: var(--white); }

@media (max-width: 480px) {
  .btn-play { width: 100%; justify-content: center; }
  .hero-actions { width: 100%; }
}