:root{
  --deep:#041f24; --panel:rgba(5,28,32,.84);
  --mint:#53ffc7; --teal:#0e6b63; --dim:#7fb8ab;
  --coral:#ff6b57; --gold:#ffd166; --red:#ff5c5c;
  --ink:#eafff5;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow:hidden; background:var(--deep);
  font-family:'Chakra Petch',sans-serif; color:var(--ink); user-select:none;
  -webkit-user-select:none; touch-action:none; overscroll-behavior:none;}
canvas{display:block;}
.pix{font-family:'Press Start 2P',monospace;}

#vignette{position:fixed; inset:0; pointer-events:none; z-index:5;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(2,13,15,.6) 100%);}
#scanlines{position:fixed; inset:0; pointer-events:none; z-index:6; opacity:.05;
  background:repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px);}
#flash{position:fixed; inset:0; pointer-events:none; z-index:7; opacity:0;
  background:radial-gradient(ellipse at center, rgba(255,70,70,.2), rgba(255,20,20,.5));}
.flash-on{animation:fl .55s ease-out;}
@keyframes fl{0%{opacity:1}100%{opacity:0}}

.panel{background:var(--panel); border:1px solid rgba(83,255,199,.28);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  padding:12px 18px;}

#hud{position:fixed; top:calc(12px + env(safe-area-inset-top)); left:14px; right:14px; z-index:10;
  display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none;}
.brand{font-size:13px; color:var(--mint); letter-spacing:2px; margin-bottom:8px;
  text-shadow:0 0 10px rgba(83,255,199,.6);}
.brand span{color:var(--coral); text-shadow:0 0 10px rgba(255,107,87,.6);}
.lbl{display:block; font-size:11px; font-weight:600; color:var(--dim); letter-spacing:3px; margin-bottom:4px;}
#score{display:inline-block; font-size:24px; color:var(--gold);
  text-shadow:0 0 12px rgba(255,209,102,.55);}
#score.pop{animation:spop .3s ease;}
@keyframes spop{40%{transform:scale(1.35); color:#fff;}}
#stats{display:flex; gap:10px;}
#stats .panel{min-width:86px; text-align:center; padding:10px 12px;}
#stats .val{font-size:13px; color:var(--ink);}
#stats .val.hot{color:var(--coral);}

/* ===== 中央操控台:功能键一排 + 大号 D-pad ===== */
#dock{position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(8px + env(safe-area-inset-bottom)); z-index:11;
  display:flex; flex-direction:column; align-items:center; gap:10px;}
#btnRow{display:flex; gap:16px;}
.mbtn{width:54px; height:54px; border-radius:50%; border:1px solid rgba(83,255,199,.4);
  background:rgba(5,28,32,.9); color:var(--mint); font-family:'Chakra Petch'; font-weight:700;
  font-size:12px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; touch-action:none; box-shadow:0 3px 10px rgba(0,0,0,.45); transition:all .08s;}
.mbtn b{font-size:15px; margin-top:1px; color:var(--gold);}
.mbtn:active{background:var(--gold); color:#04222a; transform:scale(.92);}
.mbtn:active b{color:#04222a;}
.mbtn.off{opacity:.55; border-style:dashed;}
.mbtn.off b{color:var(--dim);}

#dpad{--dcell:clamp(64px, 22vw, 92px);
  display:grid; gap:8px;
  grid-template-columns:repeat(3, var(--dcell));
  grid-template-rows:repeat(3, var(--dcell));
  grid-template-areas:". up ." "left core right" ". down .";}
.dbtn{display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--dcell) * .4); color:var(--mint);
  background:rgba(5,28,32,.9); border:1px solid rgba(83,255,199,.42); border-radius:14px;
  touch-action:none; cursor:pointer; user-select:none; -webkit-user-select:none;
  box-shadow:0 4px 12px rgba(0,0,0,.45); transition:background .06s, transform .06s;}
.dbtn:active, .dbtn.press{background:var(--gold); color:#04222a; border-color:var(--gold); transform:scale(.93);}
.dbtn.lit{background:var(--gold); color:#04222a; border-color:var(--gold);
  box-shadow:0 0 16px rgba(255,209,102,.7);}
#dUp{grid-area:up} #dLeft{grid-area:left} #dRight{grid-area:right} #dDown{grid-area:down}
#dpadCore{grid-area:core; position:relative; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px dashed rgba(83,255,199,.35); background:rgba(5,28,32,.55);}
#dpadCore .ring{position:absolute; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(83,255,199,.25);}
#tiltDot{width:13px; height:13px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 10px rgba(255,209,102,.85); transition:opacity .25s;}
#tiltDot.dim{opacity:.25;}

/* 矮屏(横屏手机)压缩操控台 */
@media (max-height:520px){
  #dpad{--dcell:52px; gap:6px;}
  .mbtn{width:44px; height:44px; font-size:11px;}
  .mbtn b{font-size:13px;}
  #dock{gap:7px;}
  #dpadCore .ring{width:30px; height:30px;}
}

#toast{position:fixed; top:16%; left:50%; transform:translateX(-50%); z-index:30;
  background:rgba(5,28,32,.94); border:1px solid rgba(83,255,199,.4); color:var(--ink);
  padding:10px 20px; font-size:13px; border-radius:8px; opacity:0; transition:opacity .3s;
  pointer-events:none; white-space:nowrap;}
#toast.show{opacity:1;}

#popups{position:fixed; inset:0; z-index:12; pointer-events:none; overflow:hidden;}
.pop-pt{position:absolute; font-family:'Press Start 2P'; font-size:13px; color:var(--gold);
  text-shadow:0 0 10px rgba(255,209,102,.9); transform:translate(-50%,-50%);
  animation:rise .9s ease-out forwards;}
.pop-pt.big{font-size:18px; color:var(--coral); text-shadow:0 0 12px rgba(255,107,87,.9);}
@keyframes rise{to{transform:translate(-50%,-190%); opacity:0;}}

#banner{position:fixed; top:20%; left:50%; transform:translateX(-50%); z-index:12;
  font-size:20px; color:var(--gold); opacity:0; pointer-events:none;
  text-shadow:3px 3px 0 rgba(255,107,87,.6), 0 0 18px rgba(255,209,102,.7);}
#banner.show{animation:bshow 1.3s ease forwards;}
@keyframes bshow{0%{opacity:0; transform:translateX(-50%) scale(.4)}
  18%{opacity:1; transform:translateX(-50%) scale(1.15)}
  32%{transform:translateX(-50%) scale(1)} 78%{opacity:1}
  100%{opacity:0; transform:translateX(-50%) scale(1)}}

.overlay{position:fixed; inset:0; z-index:20; display:flex; flex-direction:column;
  align-items:center; justify-content:center; background:rgba(3,17,20,.8);
  transition:opacity .35s; padding:20px;}
.overlay.hide{opacity:0; pointer-events:none;}
#attract{gap:6px; text-align:center;}
.game-title{font-size:clamp(28px,8vw,58px); color:var(--mint); letter-spacing:4px;
  text-shadow:4px 4px 0 var(--coral), -4px -4px 0 rgba(46,230,200,.55), 0 0 34px rgba(83,255,199,.5);}
.game-title span{color:var(--gold); text-shadow:4px 4px 0 var(--coral), 0 0 34px rgba(255,209,102,.6);}
.sub-title{font-size:14px; font-weight:600; color:var(--dim); letter-spacing:10px; margin:10px 0 4px;}

.cssnake{display:flex; align-items:center; gap:5px; margin:20px 0 6px;}
.cssnake .fd{width:12px; height:12px; border-radius:50%; background:var(--coral);
  margin-right:14px; box-shadow:0 0 12px var(--coral); animation:fdp 1s ease-in-out infinite;}
@keyframes fdp{50%{transform:scale(1.35);}}
.cssnake i{width:13px; height:13px; border-radius:3px; animation:wig .9s ease-in-out infinite;}
.cssnake i:nth-child(2){width:17px;height:17px;border-radius:5px;background:#8dffb0;animation-delay:0s;}
.cssnake i:nth-child(3){background:#5fe8a4;animation-delay:-.09s;}
.cssnake i:nth-child(4){background:#41d99b;animation-delay:-.18s;}
.cssnake i:nth-child(5){background:#2ec98f;animation-delay:-.27s;}
.cssnake i:nth-child(6){background:#20b583;animation-delay:-.36s;}
.cssnake i:nth-child(7){background:#159e75;animation-delay:-.45s;}
.cssnake i:nth-child(8){background:#0d8766;animation-delay:-.54s;}
.cssnake i:nth-child(9){background:#0a6f57;animation-delay:-.63s;}
@keyframes wig{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

.ctrl-table{display:flex; gap:26px; margin:18px 0 8px; font-size:13px; color:var(--dim);
  flex-wrap:wrap; justify-content:center;}
.ctrl-table .row{margin:4px 0;}
.press{margin-top:18px; font-size:12px; color:var(--ink); letter-spacing:2px;
  animation:blink 1.1s steps(2) infinite;}
@keyframes blink{50%{opacity:0;}}
.attract-best{margin-top:14px; font-size:11px; color:var(--gold); letter-spacing:2px;}

#overPanel .panel{border-color:rgba(255,92,92,.5); text-align:center; padding:30px 40px;
  background:rgba(24,6,8,.88);}
.go-title{font-size:26px; color:var(--red); letter-spacing:3px; margin-bottom:20px;
  text-shadow:3px 3px 0 rgba(0,0,0,.6), 0 0 24px rgba(255,92,92,.7);}
.go-stats{display:flex; gap:22px; justify-content:center; margin-bottom:8px; flex-wrap:wrap;}
.go-stats .lbl{text-align:center;}
.go-stats .v{font-size:15px; color:var(--ink);}
#newRecord{display:none; margin:12px 0 2px; font-size:12px; color:var(--gold);
  animation:blink .8s steps(2) infinite; letter-spacing:2px;}
.btn{margin-top:20px; font-family:'Press Start 2P'; font-size:12px; color:#04222a;
  background:var(--mint); border:none; padding:14px 26px; cursor:pointer; letter-spacing:1px;
  box-shadow:0 5px 0 var(--teal); transition:all .1s;}
.btn:hover{background:#8dffd9;}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--teal);}
.btn-hint{margin-top:12px; font-size:11px; color:var(--dim);}

#pauseOv .go-title{color:var(--gold); text-shadow:0 0 24px rgba(255,209,102,.6);}

@media (max-width:640px){
  .panel{padding:8px 12px;}
  .brand{font-size:11px; margin-bottom:5px;}
  #score{font-size:18px;}
  #stats{gap:6px;}
  #stats .panel{min-width:58px; padding:7px 8px;}
  .lbl{font-size:9px; letter-spacing:1px;}
  #stats .val{font-size:10px;}
}