:root{font-family:Trebuchet MS,Segoe UI,sans-serif;color:#f6efe1;background:#142e35;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at 20% 10%,rgba(112,177,161,.22),transparent 40%),radial-gradient(circle at 85% 16%,rgba(77,131,112,.28),transparent 38%),linear-gradient(180deg,#3b6b6d,#193940 62%,#152f33)}body{display:flex;justify-content:center;align-items:stretch}#app{width:100%;height:100%;display:flex;justify-content:center}#game-shell{position:relative;width:min(100vw,460px);height:100dvh;border-left:2px solid rgba(19,32,30,.6);border-right:2px solid rgba(19,32,30,.6);overflow:hidden;background:#1f4650}#game-stage{width:100%;height:100%;touch-action:none}#game-stage canvas{display:block;width:100%;height:100%}#hud{position:absolute;top:max(12px,env(safe-area-inset-top));right:10px;display:flex;gap:8px;z-index:4}.hud-card{min-width:78px;padding:7px 10px;border-radius:8px;background:linear-gradient(180deg,#564123e6,#402f19e6);border:1px solid rgba(227,188,102,.55);box-shadow:0 2px 12px #14100873}.hud-label{display:block;font-size:10px;letter-spacing:.8px;color:#e7ca88}.hud-card strong{font-size:18px;color:#f9f3d8}#turn-indicator{position:absolute;left:50%;top:max(12px,env(safe-area-inset-top));transform:translate(-50%);padding:8px 14px;border-radius:999px;border:1px solid rgba(216,190,121,.65);background:#382a13b8;color:#f4dfab;font-size:13px;font-weight:700;letter-spacing:1px;opacity:0;transition:opacity .14s ease,transform .14s ease;z-index:5;pointer-events:none}#turn-indicator.show{opacity:1;transform:translate(-50%) translateY(0)}#turn-indicator.active{background:#684715eb;color:#fff7df;box-shadow:0 0 0 2px #edc86d59}#tune-toggle{position:absolute;top:max(12px,env(safe-area-inset-top));left:10px;z-index:12;border:1px solid rgba(184,210,201,.65);border-radius:8px;background:#1b353ac2;color:#dcf0e7;font-size:12px;font-weight:700;letter-spacing:.6px;padding:7px 10px}#tune-panel{position:absolute;left:10px;right:10px;top:max(52px,calc(env(safe-area-inset-top) + 44px));max-height:min(67dvh,540px);overflow:auto;z-index:12;border-radius:12px;border:1px solid rgba(181,212,205,.4);background:#0a1a1ee6;box-shadow:0 10px 24px #01080c8f;padding:12px}#tune-panel.hidden{display:none}.tune-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.tune-head h2{margin:0;font-size:17px;color:#eafaf4}#tune-close{width:30px;height:30px;border:0;border-radius:8px;background:#44636ab3;color:#d5f0ea;font-weight:700}.tune-tip{margin:8px 0 10px;font-size:12px;line-height:1.35;color:#b7d8d0}#tune-controls{display:grid;gap:9px}.tune-row{display:grid;gap:3px}.tune-row-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.tune-label{font-size:12px;color:#d4ebdf;font-weight:700}.tune-value{font-size:12px;color:#f2d897;font-variant-numeric:tabular-nums}.tune-row input[type=range]{width:100%;margin:0}.tune-note{font-size:10px;line-height:1.25;color:#96bdb4}#arc-preview{width:100%;height:auto;margin-top:10px;border-radius:10px}#arc-summary{margin:8px 0 0;font-size:11px;line-height:1.35;color:#c7ddd6}.tune-actions{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tune-actions button{border:1px solid rgba(168,188,184,.5);border-radius:8px;padding:8px;font-size:11px;font-weight:700;background:#224148cc;color:#e2f4ee}#pause-btn{position:absolute;right:12px;bottom:max(14px,env(safe-area-inset-bottom));width:52px;height:52px;border:2px solid rgba(214,186,111,.8);border-radius:12px;background:linear-gradient(180deg,#7a6333,#5a431f);color:#f8eed1;font-size:17px;font-weight:700;cursor:pointer;z-index:4}#overlay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;padding:20px;gap:10px;background:#091619b8;opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:10}#overlay.show{opacity:1;pointer-events:auto}#overlay h1{margin:0;font-size:clamp(24px,5vw,30px);color:#f8f2db}#overlay p{margin:0;max-width:320px;color:#d9d1ba;line-height:1.4}#overlay-btn{border:none;padding:12px 26px;border-radius:10px;background:linear-gradient(180deg,#c39c46,#8a6825);color:#fff8e6;font-size:17px;font-weight:700;cursor:pointer}@media(max-width:480px){#hud{top:max(10px,env(safe-area-inset-top));right:8px;gap:6px}.hud-card{min-width:72px;padding:6px 8px}.hud-card strong{font-size:16px}#tune-panel{left:6px;right:6px;padding:10px}}