: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;overscroll-behavior:none}body.is-fullscreen,body.is-soft-fullscreen,body.is-fullscreen #app-shell,body.is-fullscreen #game-root,body.is-fullscreen #touch-controls{touch-action:none;overscroll-behavior:none}body.is-soft-fullscreen #app-shell{height:100dvh}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{width:min(122px,100%);min-width:0;display:grid;grid-template-rows:auto auto;gap:4px;font-size:12px}.hud-group.player{padding-inline:8px;gap:5px;min-width:0}.hud-group.disabled{opacity:.58}.hud-disabled{color:#775f40;font-size:13px}.player-life{min-width:18px;text-align:right}.player-topline,.player-bottomline{min-width:0;display:grid;align-items:center;gap:5px}.player-topline{grid-template-columns:auto auto;justify-content:space-between}.player-bottomline{grid-template-columns:minmax(32px,1fr) auto}.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}.settings-section-title{margin-top:8px;color:#6f4d25;font-size:12px;font-weight:900;letter-spacing:0}.settings-section-title:first-child{margin-top:0}.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}.mobile-setting{display:none}.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)}.touch-controls,.rotate-hint{display:none}body.touch-capable{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}body.touch-capable .mobile-setting{display:flex}@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}}@media (pointer: coarse) and (orientation: landscape){:root{--mobile-side: clamp(112px, 15vw, 160px);--mobile-control: clamp(138px, 17vw, 164px);--mobile-action: clamp(92px, 11.5vw, 118px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}html,body{width:100%;min-width:100%;min-height:100%;overflow:hidden;touch-action:none}#app-shell{height:100dvh;grid-template-columns:var(--mobile-side) minmax(0,1fr) var(--mobile-side);grid-template-rows:minmax(0,1fr);grid-template-areas:"left game right";align-items:center;justify-items:center;gap:4px;padding:max(2px,var(--safe-top)) calc(max(2px,var(--safe-right)) + 2px) max(2px,var(--safe-bottom)) calc(max(2px,var(--safe-left)) + 2px)}.game-frame{grid-area:game;width:min(100%,calc((100dvh - max(4px,var(--safe-top)) - max(4px,var(--safe-bottom))) * 4 / 3));max-height:calc(100dvh - max(4px,var(--safe-top)) - max(4px,var(--safe-bottom)))}.game-root{border-width:2px;border-radius:6px;box-shadow:0 6px #432b1933,0 12px 34px #00000047,inset 0 0 0 2px #ffe9a138}.hud{display:block;position:fixed;inset:0;width:auto;pointer-events:none;z-index:12}.hud-group{width:min(calc(var(--mobile-side) - 8px),132px);min-height:34px;padding:4px 6px;position:fixed;justify-content:space-between;gap:5px;pointer-events:auto;border-width:1px;box-shadow:0 3px #402a1a4d,inset 0 1px #ffffff5c}.hud-label{font-size:10px}.hud strong{font-size:13px}.hud .player strong{width:100%;min-width:0;grid-template-rows:auto auto;gap:3px;font-size:11px}.hud .player .level-badge{min-width:30px}.hp-meter{height:5px}.hp-text{font-size:9px}.hud-group:nth-child(1){left:calc(max(2px,var(--safe-left)) + 6px);top:calc(max(2px,var(--safe-top)) + 4px)}.hud-group:nth-child(2){left:calc(max(2px,var(--safe-left)) + 6px);top:calc(max(2px,var(--safe-top)) + 43px)}.hud-group:nth-child(3){left:calc(max(2px,var(--safe-left)) + 6px);top:calc(max(2px,var(--safe-top)) + 82px)}.hud-group:nth-child(4){right:calc(max(2px,var(--safe-right)) + 6px);top:calc(max(2px,var(--safe-top)) + 4px)}.hud-group:nth-child(5){right:calc(max(2px,var(--safe-right)) + 6px);top:calc(max(2px,var(--safe-top)) + 43px)}.hud-group:nth-child(6){right:calc(max(2px,var(--safe-right)) + 6px);top:calc(max(2px,var(--safe-top)) + 82px)}.touch-controls.enabled{display:block;position:fixed;inset:0;z-index:20;pointer-events:none}.touch-panel{position:fixed;width:var(--mobile-control);pointer-events:auto;touch-action:none;user-select:none}.touch-left{left:calc(max(0px,var(--safe-left)) + 2px);bottom:calc(max(2px,var(--safe-bottom)) + 50px);display:grid;place-items:center}.touch-right{right:calc(max(0px,var(--safe-right)) + 2px);bottom:calc(max(2px,var(--safe-bottom)) + 6px);display:grid;gap:6px;justify-items:center}.touch-controls.pause-only .touch-left,.touch-controls.pause-only .touch-mode-tabs,.touch-controls.pause-only .touch-layout-lock,.touch-controls.pause-only .touch-fire{display:none}.touch-controls.pause-only .touch-right{width:min(112px,var(--mobile-control));right:calc(max(2px,var(--safe-right)) + 6px);top:calc(max(2px,var(--safe-top)) + 121px);bottom:auto;justify-items:stretch}.touch-controls.pause-only .touch-pause{width:100%}.touch-stick{width:min(var(--mobile-control),156px);aspect-ratio:1;position:relative;border-radius:50%;display:grid;place-items:center;background:rgba(255,244,207,.16);border:2px solid rgba(255,238,184,.32);box-shadow:inset 0 0 0 10px #1b241938,0 8px 20px #00000038}.touch-stick-ring{width:68%;height:68%;border-radius:50%;border:2px dashed rgba(255,238,184,.28)}.touch-stick-knob{width:46%;height:46%;position:absolute;border-radius:50%;background:linear-gradient(180deg,#fff1b0,#d09534);border:2px solid rgba(75,50,31,.52);box-shadow:inset 0 2px #ffffff6b,0 5px #4a311e61;transition:transform .12s ease}.touch-stick.active .touch-stick-knob{transition:none}.touch-dpad{width:min(var(--mobile-control),164px);aspect-ratio:1;position:relative}.touch-dir,.touch-fire,.touch-pause,.touch-layout-lock,.touch-mode-tabs button{border:2px solid rgba(72,48,30,.38);color:#2f2618;background:rgba(255,244,207,.92);box-shadow:0 4px #48301e52,inset 0 2px #ffffff6b;font-weight:900;touch-action:none}.touch-dir{position:absolute;display:grid;place-items:center;min-width:0;min-height:0;border-color:#fff4cf1a;border-radius:17px;color:#fff6dc;background:rgba(3,5,4,.9);font-size:clamp(18px,3.4vw,25px);text-shadow:0 2px 0 rgba(0,0,0,.52);box-shadow:0 5px #00000057,inset 0 2px #ffffff21}.touch-dir.up{left:34%;top:0;width:32%;height:43%;clip-path:polygon(0 0,100% 0,100% 68%,62% 100%,38% 100%,0 68%)}.touch-dir.left{left:0;top:34%;width:43%;height:32%;clip-path:polygon(0 0,68% 0,100% 38%,100% 62%,68% 100%,0 100%)}.touch-dir.right{right:0;top:34%;width:43%;height:32%;clip-path:polygon(32% 0,100% 0,100% 100%,32% 100%,0 62%,0 38%)}.touch-dir.down{left:34%;bottom:0;width:32%;height:43%;clip-path:polygon(38% 0,62% 0,100% 32%,100% 100%,0 100%,0 32%)}.touch-fire{width:var(--mobile-action);aspect-ratio:1;border-radius:50%;color:#fff7d5;background:radial-gradient(circle at 35% 28%,#ffdf7b,#d25632 62%,#8f2e22 100%);font-size:clamp(18px,3.2vw,28px);text-shadow:0 1px 0 rgba(0,0,0,.28)}.touch-pause{width:min(var(--mobile-control),128px);min-height:32px;border-radius:8px;font-size:15px}.touch-layout-lock{width:min(var(--mobile-control),128px);min-height:31px;border-radius:8px;font-size:12px}.touch-mode-tabs{width:min(var(--mobile-control),128px);display:grid;grid-template-columns:1fr 1fr;gap:5px}.touch-mode-tabs button{min-height:31px;border-radius:8px;font-size:12px}.touch-mode-tabs button.active,.touch-mode-tabs button[aria-pressed=true],.touch-dir.active,.touch-fire.active{filter:brightness(1.12);transform:translateY(2px);box-shadow:0 2px #48301e52,inset 0 2px #ffffff6b}.touch-controls.layout-unlocked .touch-panel{outline:2px dashed rgba(255,244,207,.7);outline-offset:8px;cursor:grab}.touch-controls.layout-unlocked .touch-panel.dragging{cursor:grabbing;opacity:.84}.touch-controls.layout-unlocked .touch-layout-lock{color:#2f2618;background:linear-gradient(180deg,#ffdf7b,#e5a93c)}.touch-controls[data-touch-mode=dpad] .touch-stick,.touch-controls[data-touch-mode=stick] .touch-dpad{display:none}body.overlay-pause .touch-controls.enabled{z-index:32}body.overlay-open:not(.overlay-pause) .touch-panel{opacity:0;pointer-events:none}body.overlay-open:not(.overlay-pause) .rotate-hint,.touch-controls.pause-only .rotate-hint{display:none}.overlay{z-index:30;padding:12px}.menu-panel{width:min(92%,470px);max-height:calc(100% - 16px);padding:18px}h1{font-size:clamp(34px,6vw,54px)}.mode-list{gap:6px}.toggle-row{min-height:50px;padding:7px 9px}.controls{display:none}.toast{z-index:28;top:42%;min-width:108px;padding:7px 11px;border-width:2px;color:#3a2714db;background:rgba(255,239,178,.58);font-size:clamp(14px,3.4vw,18px);backdrop-filter:blur(4px)}.toast.show{opacity:.82}}@media (pointer: coarse) and (orientation: landscape) and (min-height: 620px){:root{--mobile-side: clamp(104px, 12vw, 126px);--mobile-control: clamp(150px, 16vw, 164px);--mobile-action: clamp(104px, 11vw, 118px)}.touch-left{bottom:calc(max(0px,var(--safe-bottom)) + 8px)}.touch-right{bottom:calc(max(0px,var(--safe-bottom)) + 4px)}}@media (pointer: coarse) and (orientation: portrait){body.touch-capable .touch-controls.enabled{display:block;position:fixed;inset:0;z-index:35;pointer-events:none}.touch-panel{display:none}.rotate-hint{width:min(86vw,360px);min-height:74px;padding:18px 22px;position:fixed;left:50%;top:50%;display:grid;place-items:center;transform:translate(-50%,-50%);color:#2f2618;background:rgba(255,244,207,.94);border:3px solid rgba(74,49,30,.52);border-radius:8px;font-size:20px;font-weight:900;text-align:center;box-shadow:0 12px 40px #00000052}}