/* ==========================================================================
   PHUBBER — styles.css
   Site stylesheet. Rule order is significant where noted
   (equal-specificity overrides). Sections:
     1. Fonts
     2. Tokens (custom properties)
     3. Base / reset (element reset + site base)
     4. Background layers (TV static, sky, CRT lines/flicker)
     5. Splash / loader + CRT power on/off
     6. Nav
     7. Layout boxes (wrap, box, heading glitch, footer)
     8. Hero
     9. Buttons / contract address
    10. Marquee
    11. Rows / plaques / chart
    12. Carousel
    13. Lightbox
    14. Sound button
    15. Responsive (max-width: 640px)
    16. Reduced motion

   Intentionally not included (never reachable from this page's markup/JS):
     - Generic helper classes; the page uses none.
     - Reset rules for elements the page does not contain (forms, lists,
       tables, hr, abbr, sub/sup, small, datetime/spin/file pseudo-elements…).
     - Unused site classes: .blink, .panel, .sect, .chip-on, .tagline,
       .media, .meme-cell, .gate*, and the .hero .tagline / .hero .chip-on
       variants.
   ========================================================================== */


/* 1. Fonts ---------------------------------------------------------------- */

/* cyrillic-ext */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/press-start-2p-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/press-start-2p-cyrillic.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

/* greek */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/press-start-2p-greek.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

/* latin-ext */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/press-start-2p-latin-ext.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/press-start-2p-latin.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallback (keeps layout stable while the webfont loads) */
@font-face {
  font-family: "Press Start 2P Fallback";
  src: local(Arial);
  ascent-override: 44.58%;
  descent-override: 0.0%;
  line-gap-override: 0.0%;
  size-adjust: 224.32%;
}


/* 2. Tokens --------------------------------------------------------------- */
/* Custom property values are inherited verbatim into every element's
   computed style, so their token text is kept exactly as in the original. */

:root {
  /* Design scale: type stacks, spacing, sizes, radii, easing, transitions */
  --font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --spacing:.25rem;
  --container-lg:32rem;
  --container-xl:36rem;
  --container-2xl:42rem;
  --container-3xl:48rem;
  --text-xs:.75rem;
  --text-xs--line-height:calc(1 / .75);
  --text-sm:.875rem;
  --text-sm--line-height:calc(1.25 / .875);
  --text-xl:1.25rem;
  --text-xl--line-height:calc(1.75 / 1.25);
  --font-weight-medium:500;
  --leading-snug:1.375;
  --leading-relaxed:1.625;
  --radius-md:.375rem;
  --radius-lg:.5rem;
  --ease-in-out:cubic-bezier(.4, 0, .2, 1);
  --default-transition-duration:.15s;
  --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
  --default-font-family:var(--font-sans);
  --default-mono-font-family:var(--font-mono);

  /* Pixel font stack (webfont + metrics fallback) */
  --font-press:"Press Start 2P", "Press Start 2P Fallback";

  /* Site palette */
  --a-green:#fff;
  --a-yellow:#9c9c9c;
  --a-red:#d6d6d6;
  --a-blue:#7c7c7c;
  --box:#141414;
  --bar:#1f1f1f;
  --edge:#3a3a3a;
  --ink:#e9e9e9;
  --line:#3a3a3a;
  --splash:#fff;
  --f:var(--font-press), "Press Start 2P", ui-monospace, monospace;
}


/* 3. Base / reset --------------------------------------------------------- */

/* Base reset (box model, margins, borders, element defaults) */
*,
::after,
::before,
::backdrop {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  font-feature-settings: var(--default-font-feature-settings, normal);
  font-variation-settings: var(--default-font-variation-settings, normal);
  -webkit-tap-highlight-color: transparent;
}

h1,
h2 {
  font-size: inherit;
  font-weight: inherit;
}

b {
  font-weight: bolder;
}

code {
  font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-feature-settings: var(--default-mono-font-feature-settings, normal);
  font-variation-settings: var(--default-mono-font-variation-settings, normal);
  font-size: 1em;
}

img,
video,
audio,
iframe {
  vertical-align: middle;
  display: block;
}

img,
video {
  height: auto;
}

button {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: #0000;
  border-radius: 0;
  appearance: button;
}

[hidden]:where(:not([hidden=until-found])) {
  display: none !important;
}

/* Site base */
html {
  scroll-behavior: smooth;
}

body {
  color: var(--ink);
  font-family: var(--f);
  background: #000;
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}


/* 4. Background layers ---------------------------------------------------- */

/* TV static noise overlay */
.static {
  z-index: -1;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  background-size: 320px 320px;
  animation: 80ms steps(6, end) infinite tvStatic;
  position: fixed;
  inset: 0;
}

@keyframes tvStatic {
  0%   { background-position: 0 0; }
  25%  { background-position: -50px 30px; }
  50%  { background-position: 40px -40px; }
  75%  { background-position: -30px -50px; }
  to   { background-position: 50px 40px; }
}

/* Parallax sky (positions driven from main.js) */
.sky {
  z-index: -2;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.sky::before {
  content: "";
  background: linear-gradient(#000 0%, #070707 40%, #121212 75%, #1c1c1c 100%);
  position: absolute;
  inset: 0;
}

.sky-far,
.sky-near {
  will-change: background-position;
  background-image: url("clouds.png");
  background-repeat: repeat;
  position: absolute;
  inset: -12%;
}

.sky-far {
  opacity: .1;
  filter: blur(1px) grayscale();
  background-size: 1500px 1500px;
}

.sky-near {
  opacity: .16;
  filter: grayscale();
  background-size: 900px 900px;
}

/* CRT scanlines + flicker */
.crt-lines {
  z-index: 60;
  pointer-events: none;
  background:
    linear-gradient(#12101000 50%, #00000040 50%) 0 0 / 100% 2px,
    linear-gradient(90deg, #ffffff09, #ffffff03, #ffffff09) 0 0 / 3px 100%;
  position: fixed;
  inset: 0;
}

.crt-flicker {
  z-index: 61;
  pointer-events: none;
  opacity: 0;
  background: #1210101a;
  animation: .15s infinite flicker;
  position: fixed;
  inset: 0;
}

@keyframes flicker {
  0%   { opacity: .183825; }
  5%   { opacity: .342705; }
  10%  { opacity: .965866; }
  15%  { opacity: .720775; }
  20%  { opacity: .23649; }
  25%  { opacity: .709361; }
  30%  { opacity: .00409007; }
  35%  { opacity: .659613; }
  40%  { opacity: .507348; }
  45%  { opacity: .881468; }
  50%  { opacity: .0465525; }
  55%  { opacity: .333153; }
  60%  { opacity: .362039; }
  65%  { opacity: .685758; }
  70%  { opacity: .775222; }
  75%  { opacity: .757579; }
  80%  { opacity: .607991; }
  85%  { opacity: .770767; }
  90%  { opacity: .90847; }
  95%  { opacity: .0231278; }
  to   { opacity: .154317; }
}


/* 5. Splash / loader ------------------------------------------------------ */

.splash {
  z-index: 200;
  transform-origin: 50%;
  background: linear-gradient(#000 0%, #070707 40%, #121212 75%, #1c1c1c 100%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.splash::before,
.splash::after {
  content: "";
  pointer-events: none;
  background-image: url("clouds.png");
  background-repeat: repeat;
  position: absolute;
  inset: -12%;
}

.splash::before {
  opacity: .1;
  filter: blur(1px) grayscale();
  background-size: 1500px 1500px;
}

.splash::after {
  opacity: .16;
  filter: grayscale();
  background-size: 900px 900px;
  animation: 60s linear infinite splashDrift;
}

@keyframes splashDrift {
  to { background-position: -900px 0; }
}

/* Must precede .load-box img (equal specificity; height is overridden there) */
.splash img {
  z-index: 1;
  width: auto;
  height: 30vh;
  position: relative;
}

.splash h2 {
  z-index: 1;
  position: relative;
  cursor: pointer;
  font-family: var(--f);
  color: var(--splash);
  text-shadow: 3px 3px 4px #000, 0 0 16px #bfbfbf8f;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  padding: 60px;
  font-size: 1.6em;
}

.load-box {
  z-index: 1;
  background: var(--box);
  border: 2px solid var(--line);
  text-align: center;
  border-radius: 7px;
  width: min(420px, 86vw);
  padding: 22px 24px 20px;
  position: relative;
  box-shadow: 3px 3px 10px #00000075;
}

.load-box img {
  height: 132px;
  margin: 0 auto 14px;
}

.load-title {
  color: var(--a-red);
  letter-spacing: 2px;
  text-shadow: 1px 2px #000000e6;
  margin: 0 0 14px;
  font-size: 13px;
}

.load-bar {
  border: 2px solid var(--line);
  background: #0b0b0b;
  border-radius: 3px;
  gap: 3px;
  padding: 5px;
  display: flex;
}

.load-bar i {
  background: #262626;
  flex: 1;
  height: 14px;
}

.load-bar i.on:nth-child(4n+1) { background: var(--a-green); }
.load-bar i.on:nth-child(4n+2) { background: var(--a-yellow); }
.load-bar i.on:nth-child(4n+3) { background: var(--a-red); }
.load-bar i.on:nth-child(4n+4) { background: var(--a-blue); }

.load-row {
  justify-content: space-between;
  align-items: baseline;
  margin: 12px 0 0;
  font-size: 9px;
  display: flex;
}

.load-row span {
  color: #9a9a9a;
}

.load-row b {
  color: var(--a-blue);
  font-size: 11px;
}

/* Unused class in the original (.blink); keyframes kept for parity */
@keyframes blinker {
  50% { opacity: 0; }
}

/* CRT power on (main, after splash) / power off (splash) */
@keyframes turn-on {
  0% {
    filter: brightness(30);
    opacity: 1;
    transform: scaleY(.8) translate(0);
  }
  3.5% {
    transform: scaleY(.8) translateY(100%);
  }
  3.6% {
    opacity: 1;
    transform: scaleY(.8) translateY(-100%);
  }
  9% {
    filter: brightness(30);
    opacity: 0;
    transform: scale(1.3, .6) translateY(100%);
  }
  11% {
    filter: contrast(0) brightness(0) saturate();
    opacity: 0;
    transform: scale(1) translate(0);
  }
  to {
    filter: contrast(1.075) brightness(1.14) saturate(1.3);
    opacity: 1;
    transform: scale(1) translate(0);
  }
}

@keyframes turn-off {
  0% {
    filter: brightness();
    opacity: 1;
    transform: scaleY(1.3) translate(0);
  }
  60% {
    filter: brightness(10);
    transform: scale(1.3, .001) translate(0);
  }
  to {
    filter: brightness(50);
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    transform: scale(0, .0001) translate(0);
  }
}

.crt-on {
  animation: 3.4s linear turn-on;
}

.crt-off {
  animation: .55s cubic-bezier(.755, .05, .855, .06) forwards turn-off;
}


/* 6. Nav ------------------------------------------------------------------ */

.nav {
  z-index: 50;
  background: var(--bar);
  border: 3px solid var(--edge);
  border-radius: 4px;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.mark {
  letter-spacing: 1px;
  font-size: clamp(14px, 2.5vw, 26px);
}

.mark span:nth-child(4n+1) { color: var(--a-green); }
.mark span:nth-child(4n+2) { color: var(--a-yellow); }
.mark span:nth-child(4n+3) { color: var(--a-red); }
.mark span:nth-child(4n+4) { color: var(--a-blue); }

.nav-links {
  flex-wrap: wrap;
  gap: 14px;
  margin-left: auto;
  display: flex;
}

.nav-links a {
  text-shadow: 1px 2px #000000e6;
  font-size: 10px;
}

.nav-links a:nth-child(4n+1) { color: var(--a-green); }
.nav-links a:nth-child(4n+2) { color: var(--a-yellow); }
.nav-links a:nth-child(4n+3) { color: var(--a-red); }
.nav-links a:nth-child(4n+4) { color: var(--a-blue); }

.nav-links a:hover {
  text-decoration: underline;
}


/* 7. Layout boxes --------------------------------------------------------- */

.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 100px 16px 40px;
}

.box {
  background: var(--box);
  border: 2px solid var(--line);
  border-radius: 7px;
  margin: 0 0 28px;
  padding: 22px;
  position: relative;
  box-shadow: 3px 3px 10px #00000047;
}

.box-head {
  color: var(--a-red);
  text-shadow: 1px 2px #000000e6;
  margin: 0 0 16px;
  font-size: clamp(13px, 2.2vw, 20px);
  display: inline-block;
}

/* Heading glitch (duplicates text from data-text) */
.glitch {
  display: inline-block;
  position: relative;
}

.glitch::after,
.glitch::before {
  content: attr(data-text);
  color: inherit;
  background: var(--box);
  clip: rect(0, 900px, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.glitch::after {
  text-shadow: -1px 0 red;
  animation: .6s linear infinite alternate-reverse noise-anim;
  left: 2px;
}

.glitch::before {
  text-shadow: 1px 0 #00f;
  animation: .4s linear infinite alternate-reverse noise-anim-2;
  left: -2px;
}

@keyframes noise-anim {
  0%   { clip: rect(22px, 9999px, 74px, 0); }
  50%  { clip: rect(26px, 9999px, 34px, 0); }
  to   { clip: rect(16px, 9999px, 46px, 0); }
}

@keyframes noise-anim-2 {
  0%   { clip: rect(74px, 9999px, 39px, 0); }
  50%  { clip: rect(95px, 9999px, 11px, 0); }
  to   { clip: rect(54px, 9999px, 34px, 0); }
}

.foot {
  text-align: center;
  color: #7c7c7c;
  padding: 10px 0 30px;
  font-size: 8px;
}

.lore-vid {
  border: 2px solid var(--line);
  background: #000;
  border-radius: 4px;
  width: min(360px, 100%);
  margin: 0 auto 24px;
  display: block;
  box-shadow: 3px 3px 10px #00000075;
}

/* Lore image (wide collage): use the full box width so the post text stays readable */
.lore-img {
  width: min(680px, 100%);
  height: auto;
}

/* 8. Hero ----------------------------------------------------------------- */
/* The original stacked three successive .hero overrides; this is the net
   result (it overrides .box padding). */

.hero {
  text-align: center;
  display: flex;
  overflow: hidden;
  align-items: stretch;
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: 78vh;
  padding: 30px 26px 26px;
}

.hero-bg {
  object-fit: cover;
  z-index: 0;
  background: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.hero::after {
  content: "";
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(#0000009e 0%, #00000057 38%, #000000a8 100%);
  position: absolute;
  inset: 0;
}

.hero-in {
  z-index: 2;
  width: 100%;
  position: relative;
  min-height: inherit;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  display: flex;
}

.hero h1 {
  margin: 0;
  font-size: clamp(18px, 5.2vw, 46px);
  line-height: 1.3;
  text-shadow: 2px 3px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}

.hero h1 span:nth-child(4n+1) { color: var(--a-green); }
.hero h1 span:nth-child(4n+2) { color: var(--a-yellow); }
.hero h1 span:nth-child(4n+3) { color: var(--a-red); }
.hero h1 span:nth-child(4n+4) { color: var(--a-blue); }

.hero-foot {
  flex-direction: column;
  gap: 16px;
  display: flex;
}


/* 9. Buttons / contract address ------------------------------------------- */

.btns {
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  display: flex;
}

.btn {
  font-family: var(--f);
  background: var(--bar);
  border: 2px solid var(--line);
  cursor: pointer;
  text-shadow: 1px 2px #000000e6;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 10px;
  box-shadow: 3px 3px #00000059;
}

.btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px #0006;
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px #00000059;
}

.btn:nth-child(4n+1) { color: var(--a-green); }
.btn:nth-child(4n+2) { color: var(--a-yellow); }
.btn:nth-child(4n+3) { color: var(--a-red); }
.btn:nth-child(4n+4) { color: var(--a-blue); }

.btn:disabled {
  opacity: .5;
  cursor: default;
  box-shadow: 2px 2px #00000040;
}

.btn:disabled:hover {
  transform: none;
  box-shadow: 2px 2px #00000040;
}

/* Must follow .btn:hover/:active/:disabled (equal specificity, later wins) */
.hero .btn {
  box-shadow: 3px 3px #0009;
}

.ca {
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin-top: 20px;
  display: flex;
}

.hero-foot .ca {
  margin-top: 0;
}

.ca code {
  min-width: 220px;
  font-family: var(--f);
  border: 2px solid var(--line);
  word-break: break-all;
  text-align: left;
  background: #0b0b0b;
  border-radius: 4px;
  flex: 1;
  padding: 8px 10px;
  font-size: 8px;
  line-height: 2.2;
}

.hero .ca code {
  box-shadow: 3px 3px #00000073;
}

/* "Coming soon" label shown in the CA slot */
.ca-soon {
  color: var(--a-blue);
  letter-spacing: 1px;
}


/* 10. Marquee ------------------------------------------------------------- */

.marq {
  border: 2px solid var(--line);
  background: #000;
  border-radius: 4px;
  margin: 0 0 28px;
  padding: 10px 0;
  overflow: hidden;
  box-shadow: 3px 3px 10px #00000047;
}

.marq-in {
  gap: 40px;
  width: max-content;
  animation: 22s linear infinite slide;
  display: flex;
}

.marq span {
  white-space: nowrap;
  font-size: 11px;
}

.marq span:nth-child(4n+1) { color: var(--a-green); }
.marq span:nth-child(4n+2) { color: var(--a-yellow); }
.marq span:nth-child(4n+3) { color: var(--a-red); }
.marq span:nth-child(4n+4) { color: var(--a-blue); }

@keyframes slide {
  to { transform: translate(-50%); }
}


/* 11. Rows / plaques / chart ---------------------------------------------- */

.row {
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 18px;
  display: flex;
}

.row .n {
  color: var(--a-red);
  text-shadow: 1px 2px #000000e6;
  flex: none;
  font-size: 12px;
}

.row b {
  color: var(--a-blue);
  margin-bottom: 8px;
  font-size: 11px;
  display: block;
}

.row p,
.box p {
  color: #c9c9c9;
  margin: 0;
  font-size: 9px;
  line-height: 2.1;
}

.plaques {
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
  display: flex;
}

.plaque {
  border: 2px solid var(--line);
  text-align: center;
  background: #0b0b0b;
  border-radius: 4px;
  flex: 1;
  min-width: 150px;
  padding: 12px;
}

.plaque span {
  color: #8c8c8c;
  margin-bottom: 8px;
  font-size: 8px;
  display: block;
}

.plaque b {
  color: var(--a-green);
  font-size: 11px;
}

.chart-frame {
  border: 2px solid var(--line);
  background: #000;
  border-radius: 4px;
  width: 100%;
  height: 420px;
}


/* 12. Carousel ------------------------------------------------------------ */

.carousel {
  align-items: center;
  gap: 10px;
  display: flex;
}

.track-win {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.track {
  gap: 0;
  transition: transform .42s cubic-bezier(.22, .8, .3, 1);
  display: flex;
}

.cell {
  cursor: pointer;
  background: 0 0;
  border: 0;
  min-width: 0;
  padding: 0 6px;
}

.cell img {
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid var(--line);
  background: #000;
  border-radius: 4px;
  width: 100%;
  display: block;
  box-shadow: 3px 3px #00000059;
}

.cell:hover img {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px #00000073;
}

.cell:active img {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px #00000059;
}

.arrow {
  font-family: var(--f);
  background: var(--bar);
  border: 2px solid var(--line);
  width: 34px;
  height: 56px;
  color: var(--a-red);
  cursor: pointer;
  text-shadow: 1px 2px #000000e6;
  border-radius: 4px;
  flex: none;
  font-size: 13px;
  box-shadow: 3px 3px #00000059;
}

.arrow:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px #00000059;
}

.dots {
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  display: flex;
}

.dot {
  border: 2px solid var(--line);
  cursor: pointer;
  background: #0b0b0b;
  border-radius: 2px;
  width: 11px;
  height: 11px;
  padding: 0;
}

.dot.on {
  background: var(--a-red);
}


/* 13. Lightbox ------------------------------------------------------------ */

.lb {
  z-index: 120;
  background: #0a0a0ad1;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: fixed;
  inset: 0;
}

.lb-box {
  background: var(--box);
  border: 2px solid var(--line);
  border-radius: 7px;
  width: 100%;
  max-width: min(680px, 94vw);
  padding: 12px;
  box-shadow: 3px 3px 10px #00000075;
}

.lb-bar {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.lb-bar span {
  color: var(--a-blue);
  text-shadow: 1px 2px #000000e6;
  font-size: 10px;
}

.lb-x {
  font-family: var(--f);
  background: var(--bar);
  border: 2px solid var(--line);
  width: 26px;
  height: 26px;
  color: var(--a-red);
  cursor: pointer;
  border-radius: 4px;
  font-size: 10px;
}

.lb-img {
  object-fit: contain;
  border: 2px solid var(--line);
  background: #000;
  border-radius: 4px;
  width: 100%;
  max-height: 62vh;
}

.lb-keys {
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  display: flex;
}

.lb-keys .btn {
  min-width: 96px;
}


/* 14. Sound button -------------------------------------------------------- */

.snd {
  z-index: 70;
  font-family: var(--f);
  background: var(--bar);
  border: 2px solid var(--line);
  color: var(--a-blue);
  cursor: pointer;
  text-shadow: 1px 2px #000000e6;
  border-radius: 4px;
  padding: 11px 14px;
  font-size: 9px;
  position: fixed;
  bottom: 16px;
  right: 16px;
  box-shadow: 3px 3px #00000073;
}

.snd[aria-pressed=true] {
  color: var(--a-green);
}

.snd:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px #00000073;
}


/* 15. Responsive ---------------------------------------------------------- */

@media (max-width: 640px) {
  body {
    font-size: 11px;
  }

  .wrap {
    padding-top: 124px;
  }

  .nav {
    padding: 8px 10px;
  }

  .nav-links a {
    font-size: 8px;
  }

  /* Hero padding stays at the desktop value: in the original, the
     unconditional padding override came after its mobile padding rule. */
  .hero {
    aspect-ratio: auto;
    min-height: 74vh;
    max-height: none;
  }

  .hero-in {
    gap: 26px;
  }

  .chart-frame {
    height: 320px;
  }

  .arrow {
    width: 28px;
    height: 46px;
  }

  .snd {
    font-size: 8px;
    bottom: 10px;
    right: 10px;
  }
}


/* 16. Reduced motion ------------------------------------------------------ */
/* The original also listed .marq-in here, but that declaration came before
   the .marq-in rule in source order and so never took effect: the marquee
   keeps scrolling under reduced motion. Omitted to preserve that outcome. */

@media (prefers-reduced-motion: reduce) {
  .crt-flicker,
  .static {
    animation: none;
  }

  .splash::after {
    animation: none;
  }
}