/* ========================================================================
   SNAKE: SURVIVAL ARCADE — Grandmaster Animated Edition
   ©Patrick Clarkson, PAK Studios 2026
   ======================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

:root {
  --wood-top: #f8e0b5;
  --wood-mid: #efcd97;
  --wood-bot: #ddb178;
  --wood-edge: #ad7944;
  --wood-deep: #855629;
  --bark: #49311d;
  --neon-lime: #ccff00;
  --neon-orange: #ff7b00;
  --neon-pink: #ff2a5f;
  --apple-red: #ff2030;
  --sky: #4da4e0;
  --grass: #a4d360;
  --turf: #517a2b;
  --dirt: #6a4f3b;
  --crt-tint: rgba(60, 255, 120, 0.025);
}

body[data-wood="cherry"] {
  --wood-top: #f2c19f;
  --wood-mid: #dfa078;
  --wood-bot: #c77b58;
  --wood-edge: #915033;
  --wood-deep: #673522;
}
body[data-wood="pine"] {
  --wood-top: #f9e8bf;
  --wood-mid: #efd59f;
  --wood-bot: #ddb878;
  --wood-edge: #ae8047;
  --wood-deep: #82582d;
}

body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bark);
  background: linear-gradient(170deg, #4da4e0 0%, #a4d360 40%, #517a2b 75%, #6a4f3b 100%) fixed;
  min-height: 100vh;
  padding: 2rem 1rem 4rem;
  overflow-x: hidden;
  cursor: pointer !important;
}
html, #bg, #cursor, #crt, #vignette, .container, .container * { cursor: pointer !important; }
@media (max-width: 1024px) {
  html, body, .container, .container * { cursor: auto !important; }
}
body.no-cursor-snake { cursor: pointer; }
body.reduced { /* prefers-reduced-motion */ }

/* ============ BACKGROUND CANVAS ============ */
#bg {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* ============ CRT OVERLAY ============ */
#crt {
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.10) 0px,
      rgba(0,0,0,0.10) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: multiply;
  opacity: 0.55;
  transition: opacity .4s ease;
}
body.no-scanlines #crt { opacity: 0; }
#vignette {
  position: fixed; inset: 0;
  z-index: 8999;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ============ BOOT SEQUENCE ============ */
#boot {
  position: fixed; inset: 0;
  z-index: 10000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  font-family: 'Press Start 2P', monospace;
  color: var(--neon-lime);
  transition: opacity .5s ease, transform .5s ease;
}
body:not(.booting) #boot {
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path .6s cubic-bezier(.7,0,.3,1), opacity .3s ease .3s;
}
.boot-inner {
  text-align: center;
  display: flex; flex-direction: column; gap: 2.5rem;
  transform: translateY(-50px);
}
.boot-line {
  opacity: 0;
  transform: translateY(8px);
  font-size: clamp(.9rem, 3.5vw, 1.6rem);
  text-shadow: 0 0 8px var(--neon-lime), 0 0 16px var(--neon-lime);
  letter-spacing: 0.15em;
}
.boot-power  { animation: bootLine 0.6s ease .2s forwards, glowPulse 2s ease-in-out .8s infinite; color: #fff; text-shadow: 0 0 12px #fff; }
.boot-coin   { animation: bootLine 0.5s ease 1.0s forwards; color: var(--neon-orange); text-shadow: 0 0 10px var(--neon-orange); }
.boot-start  { animation: bootLine 0.5s ease 1.6s forwards; }
.boot-credits {
  position: absolute; bottom: 2rem; right: 2rem;
  font-size: .7rem; color: var(--neon-orange);
  opacity: 0; animation: bootLine .4s ease 2s forwards;
}
.blink { animation: bootLine .5s ease 1.6s forwards, blink 1s steps(2) 2s infinite; }
@keyframes bootLine {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes blink { 50% { opacity: .15; } }
@keyframes glowPulse {
  0%,100% { text-shadow: 0 0 6px currentColor, 0 0 12px currentColor; }
  50% { text-shadow: 0 0 18px currentColor, 0 0 32px currentColor; }
}
#boot-skip {
  position: absolute;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  background: transparent;
  border: 2px solid var(--neon-lime);
  color: var(--neon-lime);
  font-family: 'Press Start 2P', monospace;
  font-size: .6rem;
  padding: .5rem .9rem;
  cursor: pointer;
  letter-spacing: .15em;
  opacity: 0; animation: bootLine .4s ease 1.4s forwards;
}
#boot-skip:hover { background: var(--neon-lime); color: #000; }

/* ============ CONTENT (above canvas) ============ */
.container {
  position: relative;
  z-index: 100;
  max-width: 680px;
  margin: 0 auto;
  perspective: 1200px;
}

/* ============ HERO ============ */
.hero {
  text-align: center;
  padding: 4rem 1rem 1.5rem;
  color: #fff;
}
.arcade-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.2rem, 5.5vw, 2.5rem);
  line-height: 1.4;
  margin: 0 0 1rem;
  filter: drop-shadow(0 4px 0 #3e2723) drop-shadow(0 10px 15px rgba(0,0,0,0.4));
  letter-spacing: .03em;
}
.arcade-title .title-line {
  display: block;
  white-space: nowrap;
}
.arcade-title .title-name,
.arcade-title .title-name .char {
  background: linear-gradient(to bottom, #ccff00 0%, #ffdd00 50%, #ff7b00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.arcade-title .title-mode {
  color: #ff344f;
  -webkit-text-fill-color: currentColor;
  animation: titleRgbGlow 16s linear infinite;
}
.arcade-title .title-mode .char {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
@keyframes titleRgbGlow {
  0%, 100% {
    color: #ff344f;
    text-shadow: 0 0 5px rgba(255, 52, 79, .15), 0 0 14px rgba(255, 52, 79, .15), 0 0 28px rgba(255, 52, 79, .15);
  }
  16.667% {
    color: #ff9f1c;
    text-shadow: 0 0 5px rgba(255, 159, 28, .15), 0 0 14px rgba(255, 159, 28, .15), 0 0 28px rgba(255, 159, 28, .15);
  }
  33.333% {
    color: #b9ff21;
    text-shadow: 0 0 5px rgba(185, 255, 33, .15), 0 0 14px rgba(185, 255, 33, .15), 0 0 28px rgba(185, 255, 33, .15);
  }
  50% {
    color: #19eeff;
    text-shadow: 0 0 5px rgba(25, 238, 255, .15), 0 0 14px rgba(25, 238, 255, .15), 0 0 28px rgba(25, 238, 255, .15);
  }
  66.667% {
    color: #3977ff;
    text-shadow: 0 0 5px rgba(57, 119, 255, .15), 0 0 14px rgba(57, 119, 255, .15), 0 0 28px rgba(57, 119, 255, .15);
  }
  83.333% {
    color: #ff3bea;
    text-shadow: 0 0 5px rgba(255, 59, 234, .15), 0 0 14px rgba(255, 59, 234, .15), 0 0 28px rgba(255, 59, 234, .15);
  }
}
.arcade-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(-200px) rotate(-30deg) scale(.5);
}
.arcade-title .char.in {
  animation: charDrop .7s cubic-bezier(.34,1.56,.64,1) forwards, charBob 3.5s ease-in-out infinite;
}
@keyframes charDrop {
  0% { opacity: 0; transform: translateY(-300px) rotate(var(--rot,-30deg)) scale(.5); }
  60% { opacity: 1; transform: translateY(15px) rotate(0deg) scale(1.1); }
  80% { transform: translateY(-5px) scale(.95); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes charBob {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

.hero .tagline {
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: 900;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.3);
  min-height: 1.6em;
}
.tagline .caret {
  display: inline-block;
  width: .55em;
  height: 1em;
  background: var(--neon-lime);
  vertical-align: -2px;
  margin-left: 2px;
  animation: blink 1s steps(2) infinite;
  box-shadow: 0 0 8px var(--neon-lime);
}

.hero .badges {
  margin-top: 1.25rem;
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 0.5rem;
}
.badge {
  background: linear-gradient(135deg, #ff2a5f, #ff7b00);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
  border-radius: 99px;
  border: 3px solid var(--bark);
  box-shadow: 0 4px 0 var(--bark);
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transform: translate3d(0,0,0);
  transition: box-shadow .2s ease;
  will-change: transform;
}
.badge:hover {
  box-shadow: 0 6px 0 var(--bark), 0 0 24px rgba(255,123,0,.6);
}
.badge:active { transform: translateY(2px) scale(.96) !important; }

/* ============ PLANKS ============ */
.plank {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 96px 23px at 16% 17%, rgba(111, 69, 31, .22) 0 6%, rgba(137, 86, 39, .11) 7% 15%, transparent 16%),
    radial-gradient(ellipse 122px 28px at 82% 66%, rgba(115, 70, 31, .16) 0 5%, rgba(139, 88, 40, .09) 6% 14%, transparent 15%),
    linear-gradient(180deg, var(--wood-top) 0%, var(--wood-mid) 48%, var(--wood-bot) 100%);
  border: 2px solid var(--wood-edge);
  border-radius: 13px;
  padding: 2rem 1.5rem;
  margin: 2.5rem 0;
  box-shadow:
    inset 0 2px 0 rgba(255, 248, 228, .8),
    inset 0 -3px 5px rgba(111, 66, 25, .18),
    0 5px 0 var(--wood-deep),
    0 17px 24px rgba(48, 29, 13, .3);
  transform-style: preserve-3d;
  transition: transform .15s ease-out;
}

/* Wood grain — subtle CSS lines */
.plank::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 11px;
  background:
    repeating-linear-gradient(
      2deg,
      transparent 0 7px,
      rgba(111, 66, 28, .07) 8px,
      rgba(255, 247, 222, .18) 9px,
      transparent 10px 19px
    ),
    repeating-linear-gradient(
      -3deg,
      transparent 0 30px,
      rgba(120, 76, 34, .055) 31px 32px,
      transparent 33px 50px
    );
  opacity: .8;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.plank::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 11px;
  background:
    radial-gradient(ellipse 80px 15px at 16% 17%, transparent 0 15%, rgba(110, 68, 29, .15) 16% 20%, transparent 21% 30%, rgba(124, 78, 35, .09) 31% 35%, transparent 36%),
    radial-gradient(ellipse 106px 20px at 82% 66%, transparent 0 15%, rgba(113, 68, 29, .12) 16% 20%, transparent 21% 29%, rgba(128, 78, 34, .08) 30% 34%, transparent 35%),
    linear-gradient(103deg, rgba(255,255,255,.16), transparent 36%, rgba(120,75,32,.04) 73%, rgba(255,255,255,.09));
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Nails */
.plank .nail {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f4eee2 0 10%, #aaa394 22%, #61584c 63%, #342d27 100%);
  box-shadow:
    inset 0 -2px 3px rgba(0,0,0,.45),
    inset 0 2px 3px rgba(255,255,255,.4),
    0 1px 2px rgba(0,0,0,.3);
  z-index: 2;
}
.plank .nail.tl { top: 10px; left: 10px; }
.plank .nail.tr { top: 10px; right: 10px; }
.plank .nail.bl { bottom: 10px; left: 10px; }
.plank .nail.br { bottom: 10px; right: 10px; }

/* Specular highlight that follows mouse */
.plank .spec {
  position: absolute; inset: 0;
  border-radius: 12px;
  background: radial-gradient(
    300px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,250,235,.18),
    transparent 60%
  );
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .3s ease;
}
.plank:hover .spec { opacity: 1; }

/* Swing-in reveal */
.reveal {
  opacity: 0;
  transform: translateY(-80px) rotateZ(-4deg);
  transform-origin: top center;
}
.reveal.in {
  animation: plankSwing 1.2s cubic-bezier(.34,1.56,.4,1) forwards;
}
@keyframes plankSwing {
  0% { opacity: 0; transform: translateY(-120px) rotateZ(-8deg); }
  40% { opacity: 1; transform: translateY(10px) rotateZ(3deg); }
  60% { transform: translateY(-4px) rotateZ(-2deg); }
  80% { transform: translateY(2px) rotateZ(1deg); }
  100% { opacity: 1; transform: translateY(0) rotateZ(0); }
}

.plank h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.95rem, 4vw, 1.4rem);
  line-height: 1.5;
  color: #5d381d;
  margin: 0 0 1.25rem;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,249,231,.8), 0 2px 4px rgba(86,50,21,.16);
  position: relative;
  z-index: 1;
}
.plank p, .plank li {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 1rem;
  position: relative;
  z-index: 1;
}
.plank ul { padding-left: 1.5rem; margin: 0 0 1.5rem; }
.plank li { margin-bottom: 0.5rem; }
.plank a {
  color: #b32400;
  font-weight: 900;
  text-decoration: none;
  border-bottom: 3px solid #b32400;
  transition: all 0.2s ease;
  position: relative;
}
.plank a:hover { color: #ff3300; border-bottom-color: #ff3300; }

/* ============ ACCORDION ============ */
details.accordion {
  background: rgba(255, 249, 232, .38);
  border: 2px solid rgba(140, 94, 44, .65);
  border-radius: 12px;
  margin-bottom: 0.75rem;
  transition: all 0.3s ease, transform .3s cubic-bezier(.34,1.56,.4,1);
  position: relative;
  z-index: 1;
}
details.accordion[open] {
  background: rgba(255, 251, 239, .68);
  border-color: var(--wood-edge);
  transform: scale(1.01);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
/* Domino lean */
details.accordion.lean-up { transform: translateY(-3px) rotateZ(-.5deg); }
details.accordion.lean-down { transform: translateY(3px) rotateZ(.5deg); }

details.accordion > summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 3.5rem 1rem 1.25rem;
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--bark);
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
details.accordion > summary::-webkit-details-marker { display: none; }

details.accordion > summary::after {
  content: "+";
  font-family: 'Press Start 2P', monospace;
  position: absolute;
  right: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  background: var(--neon-orange);
  color: #fff;
  border: 3px solid var(--bark);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--bark);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), background .3s ease;
}
details.accordion[open] > summary::after {
  content: "−";
  transform: translateY(-50%) rotate(360deg);
  background: var(--neon-lime);
  color: var(--bark);
}
details.accordion > summary:hover { background: rgba(255, 252, 239, .42); border-radius: 12px; }

.accordion-body {
  padding: 0 1.25rem 1.25rem;
  overflow: hidden;
}
details.accordion[open] .accordion-body {
  animation: bodyOpen .45s ease;
}
@keyframes bodyOpen {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.accordion-body p:last-child,
.accordion-body ul:last-child { margin-bottom: 0; }

/* Snake-underline on summary when opening */
details.accordion[open] > summary {
  background-image: linear-gradient(90deg, var(--neon-lime) 0%, var(--neon-lime) 100%);
  background-repeat: no-repeat;
  background-size: 0% 3px;
  background-position: 0 95%;
  animation: snakeUnder .6s ease forwards;
}
@keyframes snakeUnder { to { background-size: calc(100% - 4rem) 3px; } }

/* ============ FOOTER ============ */
footer {
  text-align: center;
  color: rgba(255,255,255,0.9);
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 3rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  position: relative;
  z-index: 1;
}
footer p {
  position: relative;
  background: linear-gradient(90deg, transparent 0%, transparent 45%, rgba(255,255,255,0.4) 50%, transparent 55%, transparent 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* ============ CURSOR CANVAS ============ */
#cursor {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 9500;
  pointer-events: none;
}
body.no-cursor-snake #cursor { display: none; }


/* ============ DESKTOP REFINEMENTS ============ */
@media (min-width: 768px) {
  .plank { padding: 2.5rem 3rem; }
  .plank p, .plank li { font-size: 1.1rem; }
  details.accordion > summary { font-size: 1.25rem; }
}

@media (max-width: 600px) {
  .hero { padding-left: 0; padding-right: 0; }
  .arcade-title { font-size: clamp(.9rem, 5.1vw, 1.15rem); }
  #hud { font-size: .55rem; }
  #tweaks { width: calc(100vw - 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  #bg, #cursor, #crt { display: none; }
  body { cursor: auto; }
}