/* Scoped additions; the portal, Revision and Points keep their existing styles. */
.games-main { max-width:900px; margin:auto; padding:32px 0 0; }
.games-heading { text-align:center; margin-bottom:28px; }
.games-heading h1 span,.snake-heading h1 span { color:var(--lavender-dark); font-size:.65em; }
.games-heading p { margin-bottom:12px; }
.games-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.games-grid .activity-art { min-height:200px; }
.games-grid .activity-art img { height:160px; }
.games-grid h2 { font-size:1.5rem; }
.game-illustration { font-size:4.5rem; align-self:center; padding:10px; }
.snake-page { background:radial-gradient(ellipse at 10% 10%,#e7f3ed,transparent 55%),var(--paper); }
.snake-main { max-width:1000px; margin:auto; padding-top:22px; }
.snake-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.snake-heading .eyebrow { margin-bottom:4px; }
.snake-heading h1 { margin:0; }
.snake-heading>p { margin:0; font-size:.9rem; }
.snake-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start; }
.arcade { min-width:0; width:100%; max-width:510px; justify-self:center; background:white; padding:16px; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.scoreboard { display:flex; justify-content:space-between; gap:8px; padding:0 4px 12px; }
.scoreboard small { font-size:.72rem; }
.scoreboard strong { display:block; font-size:1.5rem; font-variant-numeric:tabular-nums; line-height:1.3; }
.scoreboard>div:last-child { text-align:right; }
.scoreboard>div:last-child strong { color:var(--mint-dark); font-size:1.1rem; margin-top:6px; }
.board-wrap { position:relative; border:3px solid #32614f; border-radius:12px; overflow:hidden; }
#board { display:block; width:100%; aspect-ratio:1; touch-action:none; }
#board:focus-visible { outline:4px solid #315fa8; outline-offset:-5px; }
#board-message { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#f8f9fca8; font-size:1.8rem; font-weight:750; pointer-events:none; text-align:center; padding:12px; }
#board-message span { font-size:1rem; font-weight:500; }
.snake-page [hidden] { display:none !important; }
.snake-feedback { min-height:29px; margin:10px 0 0; text-align:center; color:var(--mint-dark); font-size:.78rem; font-weight:650; }
.snake-panel { font-size:.82rem; }
.game-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.game-actions label,.game-actions select,.game-actions #start { grid-column:1/-1; }
.game-actions label { margin:0; }
.game-actions button { padding:9px; font-size:.84rem; }
.game-actions button:disabled { opacity:.55; cursor:default; }
.game-actions #pause:only-of-type { grid-column:1/-1; }
#status { min-height:52px; margin:12px 0; color:var(--mint-dark); }
.direction-pad { display:grid; grid-template-columns:repeat(3,52px); gap:6px; justify-content:center; margin-bottom:18px; }
.direction-pad button { width:52px; height:48px; min-height:48px; padding:0; font-size:1.5rem; background:var(--mint-dark); touch-action:manipulation; }
.direction-pad button:first-child { grid-column:2; }
.direction-pad button:nth-child(2) { grid-column:1; }
.snake-instructions { border-top:1px solid var(--line); padding-top:16px; }
.snake-instructions summary { min-height:44px; cursor:pointer; font-weight:650; }
.snake-instructions h2 { font-size:1rem; margin-bottom:10px; }
.snake-instructions h2 small { display:inline; font-weight:400; }
.snake-instructions p { margin-bottom:10px; }
.snake-instructions small,.storage-note small { font-size:.72rem; }
.storage-note { font-size:.72rem; color:var(--muted); margin:16px 0 0; }
.score-pop { animation:score-pop .22s ease-out; }
@keyframes score-pop { 50% { transform:scale(1.18); color:var(--mint-dark); } }
@media(min-width:900px) and (max-height:850px) {
  .snake-page .site-header { min-height:68px; }
  .snake-main { padding-top:16px; }
  .snake-heading h1 { font-size:2rem; }
  .arcade { max-width:410px; }
  .snake-page .site-footer { padding:12px 0; }
  .snake-instructions p { margin-bottom:5px; }
}
@media(max-width:899px) { .snake-layout { grid-template-columns:minmax(0,1fr) 250px; gap:18px; } .arcade { padding:10px; } .snake-heading>p { font-size:.8rem; } }
@media(max-width:700px) {
  .snake-layout { grid-template-columns:1fr; gap:12px; }
  .snake-panel { display:contents; }
  .snake-heading>p { display:none; }
  .game-actions { order:0; grid-template-columns:1fr 1fr; align-items:center; }
  .game-actions label,.game-actions select { grid-column:auto; }
  .game-actions #start { grid-column:1/-1; }
  .arcade { order:1; }
  #status { order:2; min-height:0; margin:0; font-size:.8rem; }
  .direction-pad { order:3; margin:0; }
  .snake-instructions { order:4; font-size:.82rem; }
  .storage-note { order:5; margin:0; }
  .snake-main[data-state=running] .game-actions label,.snake-main[data-state=running] #difficulty,
  .snake-main[data-state=paused] .game-actions label,.snake-main[data-state=paused] #difficulty { display:none; }
}
@media(max-width:599px) { .games-grid { grid-template-columns:1fr; } .games-main { padding-top:24px; } .snake-page .page-shell { padding:0 14px; } .snake-page .brand { font-size:.85rem; } .snake-page .back-link { font-size:.75rem; } .snake-main { padding-top:16px; } .snake-heading { margin-bottom:12px; } .snake-heading h1 { font-size:2rem; } }
@media(prefers-reduced-motion:reduce) { .snake-page *, .games-page * { animation:none !important; transition:none !important; } }