:root{--bg:#1b2430;--hud:#10161e;--pill:#263241;--pill-line:#36455a;--text:#f4f1ea;--muted:#9fb0c4;--accent:#f26b1d;--accent-dark:#b9470b;--gold:#ffcf3a;--good:#5cc46a;--bad:#ff5a4f;--shield:#9fd3e6;--card:#f7f1e3;--card-text:#2a2f36;--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);height:100%;color:var(--text);overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;margin:0;font-family:Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}button:disabled{cursor:default}#app{flex-direction:column;max-width:520px;height:100dvh;margin:0 auto;display:flex;position:relative;overflow:hidden}#hud{background:var(--hud);flex:none;align-items:center;gap:6px;padding:8px 10px;display:flex}.pill{background:var(--pill);letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums;border-radius:12px;align-items:center;gap:5px;height:36px;padding:0 12px;font-size:16px;font-weight:800;display:inline-flex}.pill svg{flex:none;width:20px;height:20px}.pill.mission{text-transform:uppercase;font-size:15px}.pill.wave{text-transform:uppercase;font-size:13px}.pill .armor{color:var(--shield);background:#1a2a36;border-radius:8px;align-items:center;gap:2px;margin-left:2px;padding:1px 6px 1px 4px;font-size:13px;display:inline-flex}.pill .armor svg{width:14px;height:14px}.pill .armor.empty{color:#5f7180}.pill.flash-bad{animation:.5s flashBad}.pill.flash-good{animation:.6s flashGood}@keyframes flashBad{0%,to{background:var(--pill)}30%{background:#7a2420;transform:scale(1.08)}}@keyframes flashGood{0%,to{background:var(--pill)}30%{background:#5b4a12;transform:scale(1.1)}}.hud-spacer{flex:1}.icon-btn{background:var(--pill);border:2px solid var(--pill-line);border-radius:12px;place-items:center;width:40px;height:36px;display:grid}.icon-btn svg{width:18px;height:18px}#field-wrap{background:#3f4a5a;flex:1;place-items:center;min-height:0;display:grid;position:relative}#field{touch-action:none;display:block}#panel{padding:10px 12px calc(12px + var(--safe-bottom));background:var(--hud);height:calc(190px + var(--safe-bottom));flex-direction:column;flex:none;justify-content:flex-end;gap:8px;display:flex}.forecast{color:var(--muted);align-items:center;gap:8px;font-size:14px;font-weight:700;display:flex}.forecast b{color:var(--text)}.forecast .foe{color:var(--text);align-items:center;gap:4px;display:inline-flex}.forecast .foe i{border-radius:50%;width:12px;height:12px;display:inline-block}.row{align-items:stretch;gap:8px;height:64px;display:flex}.row .btn{flex-direction:column;flex:none;gap:2px;min-height:0;padding:0 12px;font-size:14px;line-height:1.1}.row .btn .cost{font-size:15px}.card{background:var(--pill);border:2px solid var(--pill-line);min-width:0;color:var(--muted);border-radius:14px;flex:1;align-items:center;gap:10px;padding:8px 10px;font-size:13px;font-weight:600;line-height:1.25;display:flex}.card .title{color:var(--text);font-size:15px;font-weight:800}.card .stats{display:block}.card.empty{text-align:center;justify-content:center}.cost{color:var(--gold);align-items:center;gap:3px;font-weight:800;display:inline-flex}.cost svg{width:14px;height:14px}.btn{text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;border-radius:14px;justify-content:center;align-items:center;gap:6px;min-height:48px;padding:0 16px;font-size:16px;font-weight:800;display:inline-flex}.btn-primary{background:linear-gradient(#ff8a3d, var(--accent));box-shadow:0 4px 0 var(--accent-dark), inset 0 2px 0 #ffffff59;color:#fff;text-shadow:0 2px #00000040}.btn-primary:active:not(:disabled){box-shadow:0 1px 0 var(--accent-dark), inset 0 2px 0 #ffffff59;transform:translateY(3px)}.btn-secondary{color:var(--text);background:#33445a;box-shadow:0 4px #1c2735}.btn-secondary:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #1c2735}.btn:disabled{filter:grayscale(.9)brightness(.7);box-shadow:none}.btn-wide{width:100%}.btn-start{min-height:52px}.strike-btn{letter-spacing:.06em;border-radius:40px;gap:14px;width:100%;min-height:76px;font-size:30px;font-weight:900;position:relative}.strike-btn svg{width:44px;height:44px}.strike-btn.ready{animation:.7s ease-in-out infinite alternate strikeReady}@keyframes strikeReady{0%{box-shadow:0 5px 0 var(--accent-dark), 0 0 0 0 #ff8c3299, inset 0 2px 0 #ffffff59}to{box-shadow:0 5px 0 var(--accent-dark), 0 0 0 10px #ff8c3200, inset 0 2px 0 #ffffff59}}.strike-note{text-align:center;color:var(--muted);min-height:16px;font-size:13px;font-weight:600}#hint-layer{pointer-events:none;z-index:20;position:absolute;inset:0}.hint{background:var(--card);max-width:250px;color:var(--card-text);pointer-events:auto;border-radius:14px;padding:10px 34px 10px 12px;font-size:15px;font-weight:700;line-height:1.3;animation:.25s ease-out hintIn;position:absolute;box-shadow:0 6px 18px #00000059}.hint:after{content:"";left:var(--arrow-x,50%);background:var(--card);width:14px;height:14px;position:absolute;transform:translate(-50%)rotate(45deg)}.hint.below:after{top:-6px}.hint.above:after{bottom:-6px}.hint .close{color:#7a7466;border-radius:8px;width:28px;height:28px;font-size:20px;line-height:1;position:absolute;top:4px;right:4px}@keyframes hintIn{0%{opacity:0;transform:translateY(6px)scale(.96)}}.hint-target{outline:3px solid var(--gold);outline-offset:3px;animation:.9s ease-in-out infinite alternate hintPulse}@keyframes hintPulse{to{outline-color:#ffcf3a40}}#overlay{z-index:30;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0a0e149e;place-items:center;padding:20px;display:grid;position:absolute;inset:0}#overlay[hidden]{display:none}#overlay.solid{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}a.btn{text-decoration:none}.spinner{border:4px solid #d9cdb2;border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;margin:2px auto 4px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.sheet{background:var(--card);width:100%;max-width:340px;color:var(--card-text);text-align:center;border-radius:22px;flex-direction:column;gap:12px;padding:22px 18px 18px;animation:.3s cubic-bezier(.2,1.4,.4,1) sheetIn;display:flex}@keyframes sheetIn{0%{opacity:0;transform:scale(.85)}}.sheet h2{text-transform:uppercase;letter-spacing:.02em;margin:0;font-size:28px;font-weight:900}.sheet h2.win{color:#2f8a3c}.sheet h2.lose{color:#c2362d}.sheet .sub{color:#6b675d;margin:-4px 0 0;font-size:15px;font-weight:600}.sheet .stats{text-align:left;background:#ece3cf;border-radius:14px;gap:6px;padding:12px 14px;font-size:15px;font-weight:600;display:grid}.sheet .stats div{justify-content:space-between;gap:10px;display:flex}.sheet .stats b{text-align:right;font-weight:800}.sheet .note{color:#6b675d;font-size:13px;font-weight:600;line-height:1.35}.sheet .btn-secondary{color:var(--card-text);background:#d9cdb2;box-shadow:0 4px #b3a586}#toast-layer{z-index:25;pointer-events:none;justify-content:center;display:flex;position:absolute;top:64px;left:0;right:0}.toast{background:#10161eeb;border-radius:12px;padding:8px 14px;font-size:15px;font-weight:800;animation:1.8s forwards toast}@keyframes toast{0%{opacity:0;transform:translateY(-8px)}12%,80%{opacity:1;transform:none}to{opacity:0}}@media (width<=430px){#hud{gap:5px;padding:8px}.pill{gap:4px;padding:0 9px;font-size:15px}.pill.mission{display:none}.pill.wave{font-size:12px}}@media (width<=340px){.pill .armor{display:none}}
