@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--ink:#302218;--brown:#2d2118;--bronze:#984719;--gold:#ce9445;--cream:#fff6e7;--muted:#9d8068}
*{box-sizing:border-box}
html{background:#1e1510}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0,#5b3a23 0,#2d2118 45%,#1d140f 100%);color:#f5e7d2;font-family:'DM Sans',sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.game-header{height:72px;max-width:1100px;margin:auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:46px;height:46px;border-radius:11px}
.brand b{display:block;color:#fff6e7;font-family:Manrope,sans-serif}
.brand small{display:block;color:#bda386;font-size:10px}
.back-link{font-size:12px;font-weight:700;color:#e7bb77}
.game-shell{width:100%;max-width:980px;margin:auto;padding:10px 20px 28px}
.snake-card{display:flex;flex-direction:column;align-items:center}
.snake-heading,.snake-scores,#snake-message,.snake-actions,.snake-pad,.game-foot{width:min(92vw,720px)}
.snake-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:14px}
.eyebrow{font-size:9px;font-weight:800;letter-spacing:.14em;color:#e6b56f}
.snake-heading h1{font:800 clamp(34px,6vw,64px)/.95 Manrope,sans-serif;letter-spacing:-.06em;color:#fff6e7;margin:10px 0 8px}
.snake-heading p{margin:0;color:#d7c0a5;font-size:13px}
.live-pill{font-size:9px;letter-spacing:.08em;background:#214739;color:#bff4df;padding:6px 9px;border-radius:20px;white-space:nowrap;margin-top:4px}
.snake-scores{display:flex;justify-content:space-between;background:#fff5e6;color:#4b3423;padding:11px 15px;border-radius:10px 10px 0 0}
.snake-scores b{font-size:19px;margin-left:8px;color:#984719}
.board-wrap{width:min(92vw,72vh,720px)}
#snake-board{display:block;width:100%;height:auto;aspect-ratio:1;background:#2d2118;border-radius:0 0 10px 10px;touch-action:none;box-shadow:0 18px 50px #0007}
#snake-board:focus-visible{outline:3px solid #eab96d;outline-offset:3px}
#snake-message{text-align:center;min-height:22px;margin:14px 0 8px;color:#f4dfc2;font-size:13px}
.snake-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.snake-actions button{border:1px solid #8c6845;background:#3b2b21;color:#f7e7d1;border-radius:8px;padding:11px 22px;min-width:120px}
.snake-actions button.primary{background:linear-gradient(110deg,#a65322,#874017);border-color:#b76d35;color:white;font-weight:700}
.snake-actions button:disabled{opacity:.45;cursor:default}
.snake-pad{display:flex;justify-content:center;gap:9px;margin:14px 0}
.snake-pad button{width:52px;height:48px;border:1px solid #bd8c4f;background:#fff3dd;color:#6f3c1e;border-radius:10px;font-size:22px;touch-action:manipulation}
.game-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #5b4435;padding-top:13px;color:#a99178;font-size:10px}
.game-foot a{color:#e5b86f;font-weight:700}
@media(max-width:640px){
  .game-header{height:64px;padding:0 12px}
  .brand img{width:40px;height:40px}
  .game-shell{padding:4px 10px 20px}
  .snake-heading,.snake-scores,#snake-message,.snake-actions,.snake-pad,.game-foot{width:96vw;max-width:100%}
  .board-wrap{width:min(96vw,63vh)}
  .snake-heading h1{font-size:38px}
  .snake-heading p{font-size:12px;max-width:240px}
  .snake-actions button{min-width:0;flex:1;padding-inline:10px}
  .snake-pad button{width:48px;height:46px}
  .game-foot{justify-content:center;text-align:center}
}
@media(max-height:720px) and (orientation:landscape){
  .game-header{height:54px}
  .game-shell{padding-top:0}
  .snake-heading{margin-bottom:7px}
  .snake-heading h1{font-size:30px;margin:4px 0}
  .snake-heading p{display:none}
  .board-wrap{width:min(68vh,620px)}
  #snake-message{margin:7px 0 5px}
  .snake-pad{margin:7px 0}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}