:root{color-scheme:dark;--bg: #15281f;--surface: rgba(255, 244, 207, .92);--surface-2: rgba(68, 103, 78, .92);--line: rgba(75, 50, 31, .32);--text: #fff6dc;--panel-text: #2d2619;--muted: #775f40;--accent: #f0bd4e;--green: #74c86c;--blue: #66a8d9;--red: #df624b}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:linear-gradient(120deg,rgba(255,231,153,.16) 0 18%,transparent 18% 100%),linear-gradient(24deg,transparent 0 38%,rgba(98,145,89,.18) 38% 58%,transparent 58% 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 18px),linear-gradient(135deg,#173326 0%,#254735 52%,#142820 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;user-select:none}button,input,select{font:inherit}#app-shell{height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr);place-items:center;gap:12px;padding:16px}.hud{width:min(100%,980px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.hud-group{min-height:52px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface);border:2px solid rgba(75,50,31,.42);border-radius:8px;color:var(--panel-text);box-shadow:0 4px #402a1a5c,inset 0 2px #ffffff6b}.hud-label{color:var(--muted);font-size:12px;letter-spacing:0}.hud strong{font-size:19px;line-height:1;white-space:nowrap}.hud .player strong{min-width:122px;display:grid;grid-template-columns:auto 36px auto auto;align-items:center;gap:5px;font-size:14px}.hud-group.player{padding-inline:8px;gap:5px}.hud-group.disabled{opacity:.58}.hud-disabled{color:#775f40;font-size:13px}.player-life{min-width:16px;text-align:right}.hp-meter{height:7px;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.13);outline:1px solid rgba(255,255,255,.12)}.hp-meter span{display:block;height:100%;background:linear-gradient(90deg,#66d06a,#d7ad4d)}.hp-text{color:#6a5035;font-size:10px}.level-badge{min-width:30px;padding:2px 4px;border-radius:4px;color:#2f2618;background:rgba(240,189,78,.44);border:1px solid rgba(112,74,30,.32);font-size:10px;font-weight:900;line-height:1;text-align:center}.swatch{width:14px;height:14px;border-radius:3px;flex:0 0 auto}.swatch.p1{background:var(--green);box-shadow:0 0 14px #74c86c9e}.swatch.p2{background:var(--blue);box-shadow:0 0 14px #66a8d99e}.game-frame{width:min(100%,980px,calc((100svh - 96px) * 4 / 3));max-height:calc(100svh - 96px);min-height:0;aspect-ratio:4 / 3;position:relative;display:grid;place-items:center}.game-root{width:100%;height:100%;position:relative;border:4px solid rgba(76,50,30,.72);border-radius:8px;overflow:hidden;background:#6c8a55;box-shadow:0 16px #432b1947,0 26px 70px #00000057,inset 0 0 0 3px #ffe9a13d}.game-root canvas{width:100%!important;height:100%!important;display:block;image-rendering:crisp-edges}.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:24px;background:linear-gradient(rgba(42,69,45,.36),rgba(31,42,28,.72)),repeating-linear-gradient(90deg,rgba(255,243,193,.06) 0 2px,transparent 2px 12px)}.overlay.active{display:flex}.menu-panel{width:min(92vw,470px);max-height:calc(100% - 28px);overflow:auto;padding:30px;background:rgba(255,244,207,.96);border:3px solid rgba(74,49,30,.62);border-radius:8px;color:var(--panel-text);box-shadow:0 10px #48301e61,0 24px 70px #0006;backdrop-filter:blur(8px);animation:rise-in .36s ease both}.overlay[data-mode=continue] .menu-panel{width:min(92vw,520px)}.overlay[data-mode=continue] .mode-list,.overlay[data-mode=continue] .controls{display:none}.overlay[data-mode=continue] .subtitle{margin-bottom:18px}@keyframes rise-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.kicker{margin:0 0 6px;color:var(--accent);font-size:13px;font-weight:800;letter-spacing:0;text-transform:uppercase}h1{margin:0;font-size:clamp(38px,7vw,66px);line-height:.95}.subtitle{margin:12px 0 22px;color:#6e5738;font-size:15px}.mode-list{display:grid;gap:8px}.toggle-row{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;background:rgba(255,255,255,.45);border:2px solid rgba(100,72,43,.2);border-radius:8px}.toggle-row.disabled{opacity:.55}.toggle-row span{display:grid;gap:3px}.toggle-row small{color:#775f40;font-size:12px}.toggle-row input{width:48px;height:26px;appearance:none;border-radius:999px;background:#43473b;border:1px solid rgba(255,255,255,.16);position:relative;cursor:pointer;transition:background .18s ease}.toggle-row select{min-width:84px;min-height:32px;color:#fdf3d4;background:#48654a;border:2px solid rgba(65,42,24,.28);border-radius:6px;padding:0 8px;font:inherit;font-size:13px;cursor:pointer}.bind-btn{min-width:84px;min-height:32px;color:#fdf3d4;background:#48654a;border:2px solid rgba(65,42,24,.28);border-radius:6px;padding:0 10px;font-weight:900;cursor:pointer}.bind-btn.listening{color:#2d2619;background:var(--accent)}.toggle-row input:after{content:"";width:20px;height:20px;border-radius:50%;position:absolute;left:2px;top:2px;background:#f4ead0;transition:transform .18s ease}.toggle-row input:checked{background:#9f7b2f}.toggle-row input:checked:after{transform:translate(22px)}.actions{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}.primary,.secondary,.icon-btn{min-height:46px;border:0;cursor:pointer;transition:transform .16s ease,filter .16s ease}.primary{flex:1;color:#15130d;background:var(--accent);border-radius:8px;font-weight:900;box-shadow:0 4px #6e4b1a8c}.secondary{color:#fff3d0;background:var(--surface-2);border:2px solid rgba(65,42,24,.28);border-radius:8px;font-weight:800;padding:0 14px;box-shadow:0 4px #2a3e2d80}.icon-btn{width:48px;color:#fff3d0;background:var(--surface-2);border:2px solid rgba(65,42,24,.28);border-radius:8px;font-size:19px;box-shadow:0 4px #2a3e2d80}.primary:hover,.secondary:hover,.icon-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}.hidden{display:none!important}.controls{margin:18px 0 0;display:grid;gap:7px;color:var(--muted);font-size:13px}.controls div{display:grid;grid-template-columns:42px 1fr;gap:10px}.controls dt{color:#a97618;font-weight:900}.controls dd{margin:0}.toast{pointer-events:none;position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.94);opacity:0;min-width:180px;padding:13px 18px;border-radius:8px;text-align:center;color:#3a2714;background:rgba(255,239,178,.92);border:3px solid rgba(74,49,30,.48);font-size:24px;font-weight:900;transition:opacity .18s ease,transform .18s ease}.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}@media (max-width: 780px){#app-shell{justify-content:start;padding:8px;gap:8px}.hud{grid-template-columns:repeat(3,minmax(0,1fr))}.hud-group{min-height:44px;padding:7px 9px}.hud strong{font-size:16px}.game-frame{width:min(100%,calc((100svh - 152px) * 4 / 3));max-height:calc(100svh - 152px)}.menu-panel{padding:22px}}