:root{font-family:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;color:#effff7;background:#071b17}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;overflow-x:hidden;background:radial-gradient(circle at 50% -10%,#1c6e4a 0,transparent 42%),#071b17}body{min-height:100svh;padding:calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 14px);touch-action:manipulation}.snake-app{width:min(480px,100%);margin:auto}.topbar{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:10px;padding:6px 0 10px}.back{display:grid;place-items:center;width:42px;height:42px;border:1px solid #ffffff22;border-radius:14px;background:#ffffff10;color:white;text-decoration:none;font-size:2rem;line-height:1}.topbar small{color:#77e7af;font-size:.58rem;font-weight:900;letter-spacing:.16em}.topbar h1{margin:1px 0 0;font-size:1.35rem}.mode{padding:6px 9px;border:1px solid #62d79c55;border-radius:999px;background:#1c704d55;color:#bff7d8;font-size:.67rem}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:9px}.stats div{text-align:center;padding:8px;border:1px solid #ffffff18;border-radius:14px;background:#06130fd9}.stats small{display:block;color:#8fb6a4;font-size:.64rem}.stats strong{display:block;margin-top:1px;font-size:1.15rem}.board-wrap{position:relative;width:100%;aspect-ratio:20/26;border:1px solid #6effae45;border-radius:20px;overflow:hidden;background:#07130f;box-shadow:0 16px 44px #0007,inset 0 0 40px #125f3930}canvas{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;padding:24px;text-align:center;background:#04120dcc;backdrop-filter:blur(5px)}.overlay.hidden{display:none}.snake-mark{font-size:3.3rem;filter:drop-shadow(0 8px 12px #0008)}.overlay h2{margin:8px 0 6px;font-size:1.55rem}.overlay p{max-width:290px;margin:0 0 18px;color:#a9c8b8;font-size:.84rem;line-height:1.5}.overlay button{min-width:160px;padding:12px 22px;border:0;border-radius:999px;background:linear-gradient(135deg,#76efaa,#25bc79);color:#042016;font-size:1rem;font-weight:900;box-shadow:0 8px 22px #1fbc7460}.hint{min-height:20px;margin:9px 0 6px;text-align:center;color:#91b7a5;font-size:.72rem}.controls{display:grid;justify-items:center;gap:5px;user-select:none}.controls button{display:grid;place-items:center;width:58px;height:42px;border:1px solid #ffffff20;border-radius:14px;background:#ffffff12;color:#dffff0;font-size:1.1rem;font-weight:900}.controls button:active{background:#4dd49355;transform:scale(.96)}.middle-row{display:grid;grid-template-columns:58px 70px 58px;gap:5px;align-items:center}.middle-row span{text-align:center;color:#638b77;font-size:.62rem;line-height:1.15}.hidden{display:none!important}.overlay .secondary{margin-top:9px;background:#ffffff12;color:#dffff0;border:1px solid #ffffff25;box-shadow:none}.ranking{margin-top:14px;padding:12px;border:1px solid #ffffff18;border-radius:16px;background:#06130fd9}.ranking>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.ranking h2{margin:0;font-size:1rem}.ranking button{min-width:48px;min-height:44px;padding:7px 13px;border:1px solid #62d79c55;border-radius:12px;background:#1c704d55;color:#dffff0;font-weight:800}.ranking p{margin:7px 0;color:#9ac5b1;font-size:.76rem}.ranking ol{margin:0;padding-left:1.65rem;color:#dffff0;font-size:.8rem;line-height:1.75}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(max-height:760px){.topbar{padding-bottom:5px}.stats{margin-bottom:5px}.board-wrap{width:min(100%,300px);margin:auto}.controls button{height:36px}.hint{margin:4px 0}.snake-mark{font-size:2.5rem}.overlay h2{font-size:1.3rem}}
/* Unified in-play focus mode */
.controls button{min-width:58px;min-height:48px;touch-action:manipulation}
.snake-app.is-playing [data-player-state],.snake-app.is-playing [data-settlement],.snake-app.is-playing .account,.snake-app.is-playing .ranking,.snake-app.is-playing footer{display:none!important}
.snake-app.is-playing{max-width:560px}.snake-app.is-playing .topbar{padding-bottom:6px}.snake-app.is-playing .board-wrap{box-shadow:0 0 0 1px #73f2ae55,0 18px 60px #000c}.snake-app.is-playing .controls{margin-top:8px}
@media(max-width:380px){.snake-app.is-playing .controls button{min-width:64px;min-height:50px}}

/* snakeMomentFeedback */
.snake-app.snake-eat .board-wrap{animation:snakeEatPulse .28s ease-out}
.snake-app.snake-death .board-wrap{animation:snakeDeathShake .34s ease-out}
@keyframes snakeEatPulse{45%{box-shadow:0 0 0 2px #ffdc6788,0 0 28px #ffdc6755}}
@keyframes snakeDeathShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px);filter:saturate(1.4)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
@media(max-height:620px){
 body{padding-top:4px;padding-bottom:5px}
 .snake-app.is-playing .topbar{padding:2px 0 4px}
 .snake-app.is-playing .topbar h1{font-size:1.04rem}
 .snake-app.is-playing .topbar small{display:none}
 .snake-app.is-playing .stats{gap:5px;margin-bottom:5px}
 .snake-app.is-playing .stats div{padding:4px}
 .snake-app.is-playing .stats small{font-size:.55rem}
 .snake-app.is-playing .stats strong{font-size:.9rem}
 .snake-app.is-playing .board-wrap{height:min(305px,54svh);aspect-ratio:auto;border-radius:14px}
 .snake-app.is-playing .hint{display:none}
 .snake-app.is-playing .controls{margin-top:5px;gap:3px}
 .snake-app.is-playing .controls button{min-width:58px;min-height:46px}
}
@media(prefers-reduced-motion:reduce){.snake-app.snake-eat .board-wrap,.snake-app.snake-death .board-wrap{animation:none}}

/* snakeMediumFocus */
@media (min-height:621px) and (max-height:850px){
 .snake-app.is-playing .board-wrap{height:min(470px,59svh);aspect-ratio:auto}
 .snake-app.is-playing .hint{margin:5px 0}
 .snake-app.is-playing .controls{margin-top:5px;gap:3px}
}