.mini-game-page{padding:50px 0 90px}.mini-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.mini-title h1{font-size:52px;letter-spacing:-3px;margin:8px 0}.mini-title p{color:var(--muted);margin:0}.hanzi-shell,.snake-shell{position:relative;background:#081522;border:1px solid rgba(102,247,221,.2);border-radius:22px;overflow:hidden;box-shadow:0 35px 90px #0006}.mini-hud{height:70px;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.mini-hud>div{display:grid;place-content:center;text-align:center;border-right:1px solid var(--line)}.mini-hud>div:last-child{border:0}.mini-hud span{font-size:9px;letter-spacing:1px;color:var(--muted)}.mini-hud b{font-size:18px;margin-top:3px;color:var(--cyan)}.hanzi-board{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;padding:30px;max-width:900px;margin:auto}.hanzi-board button{aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:#0d1d2c;color:#dff6f3;font-family:'Noto Sans SC',sans-serif;font-size:clamp(25px,4vw,46px);font-weight:600;cursor:pointer;animation:cellIn .25s both;transition:.15s}.hanzi-board button:hover{border-color:var(--cyan);background:#122b39;transform:translateY(-2px)}.hanzi-board button.correct{background:var(--cyan);color:#06101d;box-shadow:0 0 25px rgba(102,247,221,.4)}.hanzi-board button.wrong{background:#552032;color:#ff9bab;animation:shake .25s}.mini-overlay{position:absolute;inset:70px 0 0;background:rgba(3,10,17,.86);backdrop-filter:blur(7px);z-index:5;display:none;place-content:center;text-align:center;padding:30px}.mini-overlay.show{display:grid}.mini-overlay h2{font-size:36px;margin:8px}.mini-overlay p{max-width:500px;color:var(--muted);line-height:1.7}.mini-overlay .btn{margin:auto}.big-char{font-size:65px;color:var(--cyan);font-weight:900;text-shadow:0 0 30px rgba(102,247,221,.35)}.mini-tips{display:flex;justify-content:center;gap:40px;margin-top:20px;color:var(--muted);font-size:11px}.snake-stage{position:relative;width:min(100%,720px);margin:auto}.snake-stage canvas{display:block;width:100%;height:auto;touch-action:none}.dpad{display:none}.player-edit{display:flex;align-items:center;gap:8px}.player-edit input{width:130px}.player-edit .tiny-btn{white-space:nowrap}@keyframes cellIn{from{opacity:0;transform:scale(.85)}}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:800px){.mini-game-page{padding-top:30px}.mini-title{display:block}.mini-title h1{font-size:40px}.mini-title .game-user{text-align:left;margin-top:18px}.mini-hud{height:62px}.mini-hud b{font-size:14px}.hanzi-board{grid-template-columns:repeat(6,1fr);gap:5px;padding:14px}.hanzi-board button{font-size:24px;border-radius:7px}.mini-overlay{inset:62px 0 0}.mini-tips{gap:13px;flex-wrap:wrap}.dpad{display:grid;grid-template-columns:repeat(3,62px);justify-content:center;gap:7px;padding:16px}.dpad button{height:52px;background:#10283a;border:1px solid var(--line);border-radius:10px;color:var(--cyan);font-size:22px}.player-edit{min-width:360px}}
.snake-hall{padding:65px 0 0}.snake-rank-list{background:linear-gradient(135deg,#0b1929,#07131f);border:1px solid rgba(202,255,82,.22);border-radius:22px;padding:0 25px;box-shadow:0 25px 70px #0005}.snake-rank-row{display:grid;grid-template-columns:48px 1fr 130px 100px;align-items:center;gap:15px;padding:18px 8px;border-bottom:1px solid var(--line)}.snake-rank-row:last-child{border:0}.snake-rank-row>strong{color:var(--lime);font-size:13px}.snake-rank-row>b{font-size:16px}.snake-rank-row>span{color:var(--cyan)}.snake-rank-row>em{font-style:normal;color:var(--muted);text-align:right}.snake-record-entry{width:min(100%,360px);margin:10px auto;display:grid;gap:9px}.snake-record-entry[hidden]{display:none}.snake-record-entry label{display:grid;gap:6px;color:var(--lime);font-size:12px}.snake-record-entry small{min-height:18px;color:#ff9bab}.snake-record-entry .btn{width:100%}@media(max-width:800px){.snake-hall{padding-top:48px}.snake-rank-list{padding:0 14px}.snake-rank-row{grid-template-columns:34px 1fr auto;padding:15px 4px}.snake-rank-row>em{grid-column:2;text-align:left}.snake-record-entry{max-width:280px}.mini-overlay:has(.snake-record-entry:not([hidden])) .big-char{display:none}}