:root{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --sky-top:#5bbfe8;--sky-bottom:#a4e4f8;--ground-light:#58c751;--ground-dark:#48b842;
  --snake-lime-light:#e2fa5c;--snake-lime-body:#a3df27;--snake-lime-shade:#68a715;
  --apple-red:#ff3856;--panel-bg:#fdfbf5;--panel-border:#7cb875;
  --text-forest:#1f381c;--text-leaf:#5c7c56;
  color:var(--text-forest)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:linear-gradient(var(--sky-top),var(--sky-bottom) 28%,#6ed36a 32%,#3fa047 100%)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;color:inherit;border:0;background:none}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,a:focus-visible{outline:2px solid #68a715;outline-offset:3px}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.bar{max-width:520px;margin:0 auto;padding:16px 16px 8px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.bar a,.bar button,.icon-btn{background:#fff;border:1.5px solid var(--panel-border);border-radius:14px;padding:8px 13px;font-size:13px;font-weight:700;color:var(--text-forest);box-shadow:0 6px 14px rgba(35,75,30,.12)}
.bar b{letter-spacing:.08em;font-size:15px;color:var(--text-forest)}
.icon-btn{width:36px;height:36px;padding:0;font-size:18px}
.stage{max-width:520px;margin:0 auto;padding:6px 14px 32px}
.panel{background:var(--panel-bg);border:1.5px solid var(--panel-border);border-radius:22px;padding:16px;box-shadow:0 14px 32px rgba(35,75,30,.12),0 3px 8px rgba(35,75,30,.06)}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.panel-head small{display:block;letter-spacing:.2em;font-size:10px;color:#2e8b3a}
.panel-head h1{margin:4px 0 0;font-size:26px;font-weight:800;color:var(--text-forest)}
.hero{position:relative;border:1.5px solid var(--panel-border);border-radius:16px;overflow:hidden;background:linear-gradient(#5bbfe8,#a4e4f8)}
.hero-art{display:block;width:100%;height:auto}
.hero span{position:absolute;left:12px;bottom:10px;background:var(--apple-red);color:#fff;font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px;box-shadow:0 4px 10px rgba(255,56,86,.3)}
.record{display:flex;justify-content:space-between;align-items:center;margin:16px 0 12px}
.record h2{margin:0;font-size:16px}
.record p{margin:6px 0 0;font-size:12px;color:var(--text-leaf);line-height:1.45}
.record em{font-style:normal;background:var(--snake-lime-light);border-radius:14px;padding:6px 12px;font-weight:800;box-shadow:0 4px 10px rgba(104,167,21,.2)}
.modes{display:grid;gap:8px}
.mode{text-align:left;background:#fff;border:1.5px solid var(--panel-border);border-radius:16px;padding:12px 14px 12px 52px;position:relative;box-shadow:0 6px 14px rgba(35,75,30,.06)}
.mode:before{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:15px}
.mode[data-mode="wrap"]:before{content:"∞";background:#dff6a8}
.mode[data-mode="classic"]:before{content:"⌂";background:#ffe0b2}
.mode[data-mode="sprint"]:before{content:"⏱";background:#ffd6e0}
.mode:hover{background:#f4ffe4}
.mode:active{transform:scale(.98)}
.mode b{display:block;font-size:16px;font-weight:700}
.mode small{display:block;margin-top:5px;font-size:12px;color:var(--text-leaf);line-height:1.45}
.note{text-align:center;font-size:12px;color:var(--text-leaf);margin:14px 0 2px}
.match-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.match-bar h2{margin:3px 0 0;font-size:18px}
.match-bar small{letter-spacing:.16em;font-size:10px;color:#2e8b3a}
.hud{display:grid;grid-template-columns:76px 1fr 76px;gap:8px;align-items:center}
.stat{text-align:center;background:#fff;border:1.5px solid var(--panel-border);border-radius:16px;padding:8px 4px;box-shadow:0 6px 14px rgba(35,75,30,.08)}
.stat b{display:block;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat small{font-size:11px;color:var(--text-leaf)}
.mid{text-align:center;background:#fff;border:1.5px solid var(--panel-border);border-radius:16px;padding:8px;box-shadow:0 6px 14px rgba(35,75,30,.08)}
.mid span{display:block;font-size:12px;color:var(--text-leaf)}
.mid span.urgent{color:#d81b46;font-weight:800;animation:urgent-pulse 1s infinite}
@keyframes urgent-pulse{50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){.mid span.urgent{animation:none}}
.mid strong{display:block;font-size:28px;font-weight:800;font-variant-numeric:tabular-nums}
.board-frame{margin:12px 0;padding:0;border:1.5px solid var(--panel-border);border-radius:16px;overflow:hidden;box-shadow:0 10px 22px rgba(35,75,30,.12);background:#62c85a}
#canvas{display:block;width:100%;height:auto;touch-action:none;user-select:none;background:#62c85a}
.msg{text-align:center;min-height:18px;margin:10px 0;font-size:13px;font-weight:700}
.pad{display:grid;justify-items:center;gap:10px;margin-top:8px}
.pad-mid{display:flex;gap:44px}
.pad button{width:64px;min-width:56px;height:56px;border:1.5px solid var(--panel-border);border-radius:16px;background:linear-gradient(#f7ffe8,#c6e85a);font-size:20px;font-weight:900;color:var(--text-forest);box-shadow:0 5px 0 #68a715,inset 0 1.5px 0 #fff9}
.pad button:active{transform:translateY(2px);box-shadow:0 3px 0 #68a715,inset 0 1.5px 0 #fff9}
dialog{border:1.5px solid var(--panel-border);border-radius:20px;background:var(--panel-bg);color:var(--text-forest);width:min(360px,calc(100% - 28px));padding:22px;text-align:center;box-shadow:0 18px 40px rgba(35,75,30,.2)}
dialog::backdrop{background:#1f381caa}
#dialog-icon{font-size:32px}
dialog h2{margin:10px 0;font-size:22px}
dialog p{margin:0;font-size:14px;line-height:1.8;white-space:pre-line;color:var(--text-leaf)}
#dialog-actions{display:grid;gap:8px;margin-top:18px}
#dialog-actions button{border:1.5px solid var(--panel-border);border-radius:14px;padding:11px;background:#fff;font-weight:700}
#dialog-actions .primary{background:var(--apple-red);color:#fff;border-color:#d81b46}
@media(min-width:900px){.pad{display:none}}
@media(max-width:420px){.stage{padding:4px 10px 22px}.panel{padding:12px}}