/* Core theme */
:root { 
  --bg: #06090E; 
  --surface: #10161F; 
  --surface-alt: #17202C; 
  --text: #FFF5EA; 
  --muted: #E7DCCF; 
  --accent: #8FEA6A; 
  --accent-text: #111827; 
  --outline: #364152; 
  --board: #0F1722; 
  --grid: #2E3A49; 
  --snake: #8FEA6A; 
  --snake-head: #A9F58D; 
  --eyes: #111827; 
  --food: #FF8364; 
  --selected: #F4E7B2; 
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.34); 
  color-scheme: dark; 
} 
* { box-sizing: border-box; } 
html, body { margin: 0; min-height: 100%; } 
body { font-family: "Segoe UI", Tahoma, sans-serif; background: radial-gradient(circle at top, #162230 0, var(--bg) 58rem); color: var(--text); overflow-x: hidden; } 
button, canvas { font: inherit; } 
button { border: 0; background: none; color: inherit; } 
canvas { display: block; } 
.site-shell, .screen { min-height: 100svh; } 
.is-hidden { display: none !important; } 
/* Menu layout */
.menu-wrap { width: min(1180px, calc(100vw - 32px)); margin: 0 auto; padding: 24px 0 120px; } 
.card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); border: 1px solid var(--outline); border-radius: 28px; box-shadow: var(--shadow); } 
.hero-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 24px; padding: 28px; align-items: center; }
.eyebrow, .section-kicker { margin: 0 0 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-size: 0.78rem; font-weight: 700; } 
.hero-copy h1 { margin: 0; font: 700 clamp(2.6rem, 5vw, 4.3rem) Georgia, serif; } 
.hero-text, .footer-copy, .support-text, .game-help, .consent-text, .footer-legal, .game-legal { margin: 0; color: var(--muted); line-height: 1.65; } 
.preview-panel { background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 24px; padding: 14px; display: flex; align-items: center; min-height: 232px; } 
.preview-panel canvas { width: 100%; height: clamp(180px, 22vw, 220px); max-height: 220px; } 
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; align-items: start; } 
.appearance-card { grid-column: 1 / -1; } 
.ready-card, .options-card, .appearance-card { padding: 24px; } 
.ready-card h2, .options-card h2, .appearance-card h2 { margin: 0; font: 700 1.32rem Georgia, serif; } 
.score-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0; } 
.score-label { margin: 0 0 6px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.76rem; font-weight: 700; } 
.score-value { margin: 0; font: 700 clamp(2rem, 4vw, 3rem) Georgia, serif; } 
.score-note { margin: 0; font-size: 1rem; color: var(--text); } 
.primary-action, .ghost-action, .chip { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; padding: 0 18px; cursor: pointer; transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease; text-decoration: none; } 
.primary-action:hover, .ghost-action:hover, .chip:hover { transform: translateY(-1px); } 
.primary-action { background: var(--accent); color: var(--accent-text); font-weight: 800; } 
.ghost-action { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--outline); color: var(--text); font-weight: 700; } 
.menu-topbar { display: flex; justify-content: flex-start; margin-bottom: 18px; padding: 0 4px; }
.option-group { margin-top: 18px; } 
.option-group h3 { margin: 0 0 10px; font-size: 1rem; } 
.group-note { margin: 8px 0 0; color: var(--muted); line-height: 1.55; } 
.chip-grid { display: grid; gap: 10px; } 
.chip-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
.chip-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } 
.chip-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } 
.chip-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } 
.chip { width: 100%; background: var(--surface-alt); border: 1px solid var(--outline); color: var(--text); font-weight: 700; } 
.chip.selected { border: 3px solid var(--selected); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22) inset; } 
.chip.color-chip { border-width: 2px; } 
.chip.icon-chip { min-height: 58px; padding: 6px; } 
.chip.icon-chip canvas { width: 38px; height: 38px; }
.menu-footer { display: flex; gap: 16px; justify-content: space-between; align-items: center; margin-top: 22px; padding: 0 4px; } 
.footer-block { display: grid; gap: 10px; }
.footer-legal, .game-legal { font-size: 0.92rem; }
/* Full-screen play layout */
.screen-game { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at top, #162230 0, var(--bg) 58rem); } 
.game-shell { height: 100svh; width: min(1280px, calc(100vw - 20px)); margin: 0 auto; padding: 10px 0 12px; box-sizing: border-box; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; overflow: hidden; } 
.game-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; } 
.game-score-strip { display: flex; justify-content: center; gap: clamp(28px, 6vw, 88px); text-align: center; } 
.game-score-block .score-value { font-size: clamp(2rem, 5vw, 3.4rem); } 
.game-help, .game-legal { text-align: center; font-size: 0.92rem; } 
.board-stage { position: relative; min-height: 0; height: 100%; border-radius: 30px; background: rgba(255, 255, 255, 0.02); overflow: hidden; touch-action: none; } 
.board-stage canvas { width: 100%; height: 100%; min-height: 0; } 
.board-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; text-align: center; pointer-events: none; padding: 24px; } 
.overlay-headline { margin: 0; font: 700 clamp(2rem, 5vw, 3.1rem) Georgia, serif; } 
.overlay-detail { margin: 0; color: var(--muted); font-weight: 700; } 
/* Privacy banner */
.consent-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 18px; border: 1px solid var(--outline); border-radius: 22px; background: rgba(9, 12, 18, 0.96); backdrop-filter: blur(12px); box-shadow: var(--shadow); z-index: 30; } 
.consent-title { margin: 0 0 6px; font-weight: 800; } 
.consent-actions { display: flex; gap: 10px; align-items: center; } 
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } 
/* Small-height tweaks */
@media (max-height: 760px) { 
  .game-help { display: none; } 
} 
/* Tablet and narrow desktop tweaks */
@media (max-width: 980px) { 
  .hero-card, .menu-grid { grid-template-columns: minmax(0, 1fr); } 
  .appearance-card { grid-column: auto; } 
  .menu-footer, .consent-banner { grid-template-columns: minmax(0, 1fr); } 
  .menu-footer { align-items: stretch; } 
  .consent-actions { flex-wrap: wrap; } 
  .chip-grid.cols-4, .chip-grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
} 
/* Phone-sized tweaks */
@media (max-width: 640px) { 
  /* Menu layout */
.menu-wrap { width: calc(100vw - 20px); padding-top: 12px; } 
  .hero-card, .ready-card, .options-card, .appearance-card { padding: 18px; border-radius: 24px; } 
  .chip-grid.cols-3, .chip-grid.cols-4, .chip-grid.cols-5 { grid-template-columns: minmax(0, 1fr); } 
  .game-shell { width: calc(100vw - 10px); } 
  .preview-panel { min-height: 196px; } 
  .preview-panel canvas { height: 180px; max-height: 180px; } 
  .board-stage, .board-stage canvas { min-height: 0; } 
}