.snake-game{--snake-primary:#4f6ef7;--snake-primary-light:#eef1ff;--snake-red:#e03131;--snake-yellow:#f59f00;--snake-green:#2f9e44;--snake-surface:#ffffff;--snake-surface-2:#f4f6fa;--snake-border:#dde2ea;--snake-text:#1e293b;--snake-text-soft:#64748b;--snake-shadow-sm:0 2px 8px rgba(0,0,0,0.06);--snake-shadow-md:0 8px 24px -8px rgba(30,41,59,0.15);--snake-radius:20px;--snake-radius-sm:12px;--snake-panel-w:300px}.snake-face{font-size:1.45rem;line-height:1;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;background:var(--snake-primary);color:#fff;border-radius:30px;box-shadow:0 4px 12px -4px var(--snake-primary);transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s;flex-shrink:0}.snake-face:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 20px -6px var(--snake-primary)}.snake-face:active{transform:scale(0.92)}.snake-face.paused{background:var(--snake-yellow);box-shadow:0 4px 12px -4px var(--snake-yellow)}.snake-face.over{background:var(--snake-red);box-shadow:0 4px 12px -4px var(--snake-red)}.snake-tool{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:0.8rem;font-weight:600;color:var(--snake-text);background:var(--snake-surface);border:1.5px solid var(--snake-border);border-radius:999px;padding:0.5rem 1.2rem;cursor:pointer;box-shadow:var(--snake-shadow-sm);transition:all 0.25s ease;white-space:nowrap}.snake-tool .fas{color:var(--snake-primary);transition:color 0.25s}.snake-tool:hover{border-color:var(--snake-primary);transform:translateY(-2px);box-shadow:var(--snake-shadow-md)}.snake-tool:active{transform:scale(0.95)}.snake-tool.active{background:var(--snake-primary-light);border-color:var(--snake-primary);color:var(--snake-primary)}.snake-tool.active .fas{color:var(--snake-primary)}.snake-board-wrap{overflow:hidden;border-radius:var(--snake-radius-sm);background:#e9edf3;border:1px solid var(--snake-border);box-shadow:var(--snake-shadow-md);padding:6px;transition:background 0.25s ease,border-color 0.25s ease;line-height:0;width:100%;box-sizing:border-box}.snake-board-wrap.snake-dark{background:#2b313b;border-color:#3a4250}#snakeCanvas{display:block;width:100%;height:auto;border-radius:8px;touch-action:none;background:#f8fafc}.snake-dpad{display:none;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:8px;justify-content:center;margin:4px auto 0}.snake-dpad button{border:1.5px solid var(--snake-border);background:var(--snake-surface);color:var(--snake-primary);border-radius:14px;font-size:1.2rem;cursor:pointer;box-shadow:var(--snake-shadow-sm);transition:all 0.15s ease;display:flex;align-items:center;justify-content:center}.snake-dpad button:active{transform:scale(0.92);background:var(--snake-primary);color:#fff}.snake-dpad .snake-up{grid-column:2;grid-row:1}.snake-dpad .snake-left{grid-column:1;grid-row:2}.snake-dpad .snake-right{grid-column:3;grid-row:2}.snake-dpad .snake-down{grid-column:2;grid-row:3}.snake-layout{display:flex;gap:16px;align-items:flex-start}.snake-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;gap:14px}.snake-stage{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}.snake-panel{flex:0 0 var(--snake-panel-w);display:flex;flex-direction:column;gap:12px;min-width:0}.snake-panel-card{background:#fff;border:1px solid var(--snake-border);border-radius:16px;padding:13px 14px;box-shadow:var(--snake-shadow-sm);width:100%;box-sizing:border-box}.snake-panel-label{position:relative;display:flex;align-items:center;font-size:0.82rem;font-weight:700;color:var(--snake-primary);margin-bottom:10px;padding-left:10px}.snake-panel-label::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:14px;border-radius:3px;background:var(--snake-primary)}.snake-speed{width:100%;text-align:center;text-align-last:center;cursor:pointer}.snake-help-simple{margin:0;font-size:0.8rem;line-height:1.6;color:var(--snake-text-soft)}.snake-controls{display:flex;gap:8px;width:100%}.snake-controls > button{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 6px;border:1px solid var(--snake-border);border-radius:30px;background:var(--snake-surface);color:var(--snake-text);font-size:0.8rem;cursor:pointer;transition:transform 0.15s ease,box-shadow 0.2s ease,background 0.2s,color 0.2s,border-color 0.2s}.snake-controls > button i{font-size:1rem}.snake-controls > button span{font-weight:700;font-size:0.85rem;line-height:1}.snake-controls .snake-face{width:auto;background:var(--snake-primary);border-color:transparent;color:#fff;box-shadow:0 4px 12px -4px var(--snake-primary)}.snake-controls .snake-face::after{content:" 重开";font-weight:700;font-size:0.85rem;line-height:1}.snake-controls .snake-face.over{background:var(--snake-red);box-shadow:0 4px 12px -4px var(--snake-red)}.snake-controls .snake-tool[aria-pressed="true"]{background:var(--snake-primary-light);border-color:var(--snake-primary);color:var(--snake-primary)}.snake-controls > button:hover{transform:translateY(-1px);box-shadow:var(--snake-shadow-sm)}.snake-controls > button:focus-visible{outline:3px solid rgba(79,110,247,0.4);outline-offset:2px}.snake-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.snake-stat{display:flex;align-items:center;gap:9px;padding:9px 10px;background:var(--snake-surface-2);border:1px solid var(--snake-border);border-radius:12px;min-width:0;overflow:hidden}.snake-stat-ico{flex:0 0 auto;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}.snake-ico-score{background:var(--snake-red)}.snake-ico-best{background:var(--snake-yellow)}.snake-ico-len{background:var(--snake-green)}.snake-ico-step{background:var(--snake-primary)}.snake-ico-food{background:#e8590c}.snake-ico-speed{background:#7048e8}.snake-stat-info{display:flex;flex-direction:column;line-height:1.15;min-width:0}.snake-stat-val{font-size:1.15rem;font-weight:800;color:var(--snake-text);line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.snake-stat-lbl{font-size:0.68rem;color:var(--snake-text-soft);margin-top:1px}.snake-best-band{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding:9px 12px;background:linear-gradient(135deg,#eef1ff,#e7ecff);border:1px solid #dbe2ff;border-radius:12px}.snake-best-title{display:inline-flex;align-items:center;font-size:0.78rem;font-weight:700;color:var(--snake-primary)}.snake-best-val{font-size:1.2rem;font-weight:800;color:var(--snake-text);font-variant-numeric:tabular-nums}@media (max-width:992px){.snake-layout{flex-direction:column;align-items:stretch}.snake-main{align-items:stretch}.snake-panel{flex:1 1 auto;width:100%}.snake-dpad{display:grid}}@media (max-width:560px){.snake-controls{flex-wrap:wrap;gap:8px}.snake-controls > button{flex:1 1 calc(50% - 8px)}.snake-stats-grid{grid-template-columns:repeat(3,1fr)}.snake-stat{padding:8px}.snake-stat-ico{width:28px;height:28px;font-size:12px}.snake-stat-val{font-size:1rem}.snake-best-band{padding:8px 10px}.snake-best-val{font-size:1.05rem}}@media (max-width:380px){.snake-panel-card{padding:11px 12px}.snake-stats-grid{gap:6px}.snake-stat{padding:7px}.snake-stat-lbl{font-size:0.62rem}.snake-stat-val{font-size:0.95rem}.snake-controls > button{flex:1 1 100%}.snake-controls > button span{font-size:0.8rem}}