:root{
  --bg:#0f1217; --panel:#161a22; --panel-2:#0d1016;
  --accent:#78a6ff; --accent2:#ffc874; --text:#eef1f7; --muted:#aab3c2;
  --radius:16px; --soft-shadow:0 10px 30px rgba(0,0,0,.25), 0 2px 10px rgba(0,0,0,.2);
}
html,body{height:100%; margin:0; background:#0c1119; color:var(--text); font:16px/1.45 Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;}
#game-wrap{position:relative; width:100vw; height:100vh; display:grid; place-items:center; overflow:hidden;}
canvas{border-radius:20px; box-shadow:var(--soft-shadow); background:#141922; max-width:100%; height:auto;}

/* Fit canvas to viewport without stretch */
@media (max-aspect-ratio: 16/9){ /* tall phones */
  canvas{ width:100vw; height:auto; }
}
@media (min-aspect-ratio: 16/9){ /* wide */
  canvas{ width:auto; height:100vh; }
}

/* HUD coins */
.hud{position:absolute; top:env(safe-area-inset-top,18px); right:env(safe-area-inset-right,18px); display:flex; gap:10px; z-index:5}
.chip{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px); border-radius:14px; padding:8px 12px; color:var(--text); display:flex; align-items:center; gap:8px; box-shadow:var(--soft-shadow);} 
.chip .coin{font-size:18px}
.chip .val{font-weight:600; color:#ffe6a6}

/* Panels (Menu/Shop/Customize) */
.panel{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.35)); z-index:10}
.card{width:min(620px,92vw); background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:28px; box-shadow:var(--soft-shadow)}
/* Snake-styled hero title */
.title{font-weight:900; font-size:48px; letter-spacing:1px; text-align:center; margin:6px 0 6px; color:#e6f0ff; text-shadow:0 2px 18px rgba(120,180,255,.25)}
.subtitle{color:#a9b8d6; text-align:center; margin-bottom:18px; font-size:14px}

/* Snake neon buttons */
.btns{display:flex; flex-direction:column; gap:12px; margin-top:16px}
.btn{position:relative; border:none; padding:14px 18px; border-radius:14px; font-weight:800; font-size:18px; cursor:pointer; color:white;
  background:linear-gradient(180deg, #1f2740, #151b2e);
  border:1px solid rgba(120,160,255,.35);
  box-shadow:0 12px 28px rgba(30,50,120,.35), inset 0 0 16px rgba(100,160,255,.35), inset 0 1px rgba(255,255,255,.15);
  overflow:hidden; isolation:isolate;
}
.btn::before{content:""; position:absolute; inset:-30%; background:radial-gradient(60% 60% at 20% 0%, rgba(120,200,255,.25), transparent 60%); filter:blur(10px); z-index:-1}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{background:linear-gradient(180deg,#2b67ff,#2049d8); border-color:rgba(120,160,255,.5)}
.btn.accent{background:linear-gradient(180deg,#ffb24a,#e6891a); border-color:rgba(255,200,120,.6)}
.btn.secondary{background:linear-gradient(180deg,#232938,#181e2d); border:1px solid rgba(255,255,255,.1); color:#e7ecf7; box-shadow:inset 0 1px rgba(255,255,255,.08)}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.shop-item{display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); padding:12px 14px; border-radius:12px}
.shop-item .name{font-weight:600}
.owned{opacity:.7}
.slider{appearance:none; width:100%; height:10px; border-radius:8px; outline:none; background:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red); border:1px solid rgba(255,255,255,.2)}
.row{display:flex; gap:12px; align-items:center; justify-content:space-between; margin:12px 0}
.pill{padding:6px 10px; border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(255,255,255,.04)}
/* Minimal leaderboard label (top-right) */
.lb-label{position:absolute; top:10px; right:10px; z-index:4; color:#cfe0ff; font-weight:600; font-size:12px; letter-spacing:.3px; text-shadow:none; opacity:.85}
.right-hint{position:absolute; right:24px; bottom:18px; color:#bcd3ff; font-size:14px; opacity:.9}

/* Smaller chat */
.chat{position:absolute; left:env(safe-area-inset-left,10px); bottom:env(safe-area-inset-bottom,10px); width:min(280px, 36vw); max-width:92vw; z-index:12; pointer-events:none}
.chat-log{max-height:140px; overflow:hidden; display:flex; flex-direction:column-reverse; gap:4px; padding:6px}
/* Sign-styled chat bubbles */
.chat-msg{
  color:#eaf1ff; font-size:11px; width:fit-content;
  background:linear-gradient(180deg, rgba(42,54,78,.92), rgba(32,42,62,.88));
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px; padding:6px 8px;
  box-shadow:0 6px 14px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter:blur(3px);
}
.chat-input-wrap{margin-top:6px; display:none}
.chat-input{
  pointer-events:auto; width:100%; padding:8px 10px; border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(42,54,78,.92), rgba(32,42,62,.88));
  color:#fff; outline:none; box-shadow:0 6px 14px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.06);
  font-size:12px
}
.chat-hint{font-size:10px}
.chat-open{pointer-events:auto}
.chat-btn{left:env(safe-area-inset-left,10px); bottom:calc(env(safe-area-inset-bottom,10px) + 10px); padding:5px 6px; font-size:11px}

/* Mobile controls */
.mobile-only{display:none}
.joystick{position:absolute; left:env(safe-area-inset-left,10px); bottom:calc(env(safe-area-inset-bottom,10px) + 10px); width:110px; height:110px; z-index:11; touch-action:none}
.joy-base,.joy-knob{position:absolute; border-radius:50%;}
.joy-base{left:0; top:0; width:110px; height:110px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px)}
.joy-knob{width:48px; height:48px; left:31px; top:31px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.3)}
.mobile-buttons{position:absolute; right:env(safe-area-inset-right,12px); bottom:calc(env(safe-area-inset-bottom,12px) + 12px); display:flex; flex-direction:column; gap:8px; z-index:11}
/* Boost button polished */
.mbtn{position:relative; width:84px; height:84px; border-radius:50%; background:
    radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.22), transparent 42%),
    linear-gradient(180deg,#2e6bff,#1748d7);
  border:1px solid rgba(255,255,255,.28); color:#fff; font-weight:900; font-size:12px; letter-spacing:.5px;
  box-shadow:0 10px 24px rgba(30,80,200,.45), inset 0 1px rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; gap:6px; overflow:hidden;}
.mbtn .icon{font-size:18px; transform:translateY(-1px)}
.mbtn:active{transform:scale(.98)}
.mbtn.pulse{animation:btnpulse .35s ease-out}
@keyframes btnpulse{0%{box-shadow:0 0 0 0 rgba(46,107,255,.6);}100%{box-shadow:0 0 0 18px rgba(46,107,255,0);}}
/* Ripple */
.mbtn .ripple{position:absolute; width:14px; height:14px; border-radius:50%; background:rgba(255,255,255,.55); transform:translate(-50%,-50%) scale(1); opacity:.8; animation:rip .45s ease-out forwards}
@keyframes rip{to{transform:translate(-50%,-50%) scale(8); opacity:0}}

/* Smaller spell buttons */
.mbtn.small{ width:64px; height:64px; background:
    radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(180deg,#3d4b66,#1e2a3d);
}
.mbtn.small .icon{ font-size:20px }
.mbtn .count{
  position:absolute; right:8px; bottom:8px; min-width:20px; height:20px; border-radius:10px; padding:0 6px;
  background:rgba(0,0,0,.45); color:#fff; font:700 12px Inter,Arial; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.25);
}

.btn.snake{
  position:relative; overflow:hidden; border-radius:18px; padding:16px 22px;
  background:linear-gradient(180deg, #12a55f, #0b7d45);
  box-shadow:0 10px 24px rgba(18,165,95,.35), inset 0 1px rgba(255,255,255,.2);
}
.btn.snake::before{
  content:""; position:absolute; inset:-20%; background:conic-gradient(from 0deg, rgba(255,255,255,.12), transparent 60%);
  filter:blur(12px); transform:rotate(0deg); animation:slither 4s linear infinite; opacity:.6;
}
@keyframes slither{ to{ transform:rotate(360deg);} }
.btn.snake:active{ transform:translateY(1px) scale(.99); }

@media (max-width: 900px){
  /* Maintain aspect without stretch and reduce HUD clutter */
  canvas{ max-width:100vw; max-height:100vh; width:auto; height:auto; border-radius:0 }
  .lb-label{display:none}
  .chat{width:min(70vw, 360px)}
}

@media (max-width:780px){
  .title{font-size:34px}
  .btn{font-size:16px}
}