:root{--bg: #0a120d;--panel: rgba(10, 22, 15, .82);--panel-edge: rgba(126, 214, 142, .28);--ink: #e9f7ee;--ink-dim: #9fbfa8;--green: #5fd37a;--green-deep: #2f8f4b;--amber: #ffd166;--red: #e8574a;--blue: #8ecae6;--pad: clamp(8px, 2.2vw, 18px)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none;-webkit-text-size-adjust:100%}body{overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#16281c,#070d09 75%)}#game-root{position:absolute;inset:0}#game-root canvas{display:block;touch-action:none}#ui-layer{position:absolute;inset:0;pointer-events:none;padding:max(var(--pad),env(safe-area-inset-top)) max(var(--pad),env(safe-area-inset-right)) max(var(--pad),env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left))}#hud{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.hud-panel{min-width:min(46vw,320px);padding:8px 12px 10px;border-radius:12px;background:var(--panel);border:1px solid var(--panel-edge);backdrop-filter:blur(4px)}.hud-name{font-size:clamp(11px,2.6vw,14px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:6px}.meter{position:relative;height:14px;border-radius:7px;background:#22150f;border:1px solid rgba(0,0,0,.5);overflow:hidden}.meter+.meter{margin-top:5px}.meter-stamina{height:8px;border-radius:4px}.meter-fill{height:100%;width:100%;transform-origin:left center;transition:transform .11s linear,background-color .18s linear}.meter-health .meter-fill{background:linear-gradient(90deg,#ff8f6a,var(--red))}.meter-health.is-low .meter-fill{background:linear-gradient(90deg,#ffd166,#ff7a3d)}.meter-stamina .meter-fill{background:linear-gradient(90deg,#7fe08f,var(--green-deep))}.meter-ultimate{height:12px;border-radius:6px}.meter-ultimate .meter-fill{background:linear-gradient(90deg,#ffd166,#f0893c)}.meter-ultimate.is-ready{border-color:var(--amber);box-shadow:0 0 10px #ffd1668c}.meter-ultimate .meter-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}.meter-ultimate.is-ready .meter-label{opacity:1}.status-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;min-height:0}.status-chip{padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;color:#09170e;background:var(--green)}.meter-stamina.is-empty .meter-fill{background:#6b6b5a}.meter-label{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.06em;color:#fff4e6;text-shadow:0 1px 2px rgba(0,0,0,.8)}.hud-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.hud-chip{padding:5px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--panel-edge);font-size:clamp(10px,2.4vw,12px);font-weight:600;letter-spacing:.05em;color:var(--ink-dim)}.top-buttons{position:absolute;top:max(var(--pad),env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;gap:6px}#pause-button,#sound-button{pointer-events:auto;width:44px;height:32px;border-radius:10px;border:1px solid var(--panel-edge);background:var(--panel);color:var(--ink-dim);font-size:13px;font-weight:700;letter-spacing:.2em;cursor:pointer}#sound-button{letter-spacing:0;font-size:15px}#sound-button.is-muted{color:#6f8c78;text-decoration:line-through}#boss-bar{position:absolute;left:50%;transform:translate(-50%);bottom:calc(max(var(--pad),env(safe-area-inset-bottom)) + 4px);width:min(560px,72vw);padding:7px 12px 9px;border-radius:12px;background:var(--panel);border:1px solid rgba(255,209,102,.35);backdrop-filter:blur(4px)}.boss-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px}.boss-name{font-size:clamp(11px,2.6vw,14px);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}.boss-phase{font-size:clamp(9px,2.2vw,11px);letter-spacing:.08em;color:var(--ink-dim)}.meter-boss{height:12px;border-radius:6px}.meter-boss .meter-fill{background:linear-gradient(90deg,#b9a7e8,#e2574a)}.boss-pips{display:flex;gap:4px;margin-top:5px}.boss-pip{flex:1;height:3px;border-radius:2px;background:#ffffff29}.boss-pip.is-done{background:var(--amber)}@media (max-height: 460px){#boss-bar{bottom:auto;top:calc(max(var(--pad),env(safe-area-inset-top)) + 36px);width:min(260px,32vw);padding:4px 9px 5px}.hud-panel{min-width:0;width:min(30vw,220px)}#boss-bar .boss-pips{display:none}#boss-bar .boss-head{margin-bottom:3px}#boss-bar .meter-boss{height:9px}}#touch-controls{position:absolute;left:max(var(--pad),env(safe-area-inset-left));right:max(var(--pad),env(safe-area-inset-right));bottom:max(var(--pad),env(safe-area-inset-bottom));display:none;align-items:flex-end;justify-content:space-between;gap:12px}#touch-controls.is-visible{display:flex}.stick-zone{position:relative;width:clamp(104px,27vw,156px);aspect-ratio:1;pointer-events:auto;touch-action:none;display:grid;place-items:center}.stick-base{position:absolute;inset:12%;border-radius:50%;background:#0a160f80;border:2px solid rgba(126,214,142,.32)}.stick-zone.is-active .stick-base{border-color:#7ed68eb3;background:#0e22159e}.stick-knob{position:relative;width:36%;aspect-ratio:1;border-radius:50%;background:linear-gradient(180deg,#7fe08f,#2f8f4b);border:2px solid rgba(0,0,0,.45);box-shadow:0 3px 10px #00000073;transition:transform 60ms linear}.button-cluster{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(8px,2vw,14px);align-items:end;justify-items:end}.pad-button{pointer-events:auto;touch-action:none;border-radius:50%;border:2px solid rgba(0,0,0,.4);color:#0b1a10;font-weight:800;font-size:clamp(11px,2.6vw,13px);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 12px #00000073;transition:transform 70ms ease,filter 70ms ease}.pad-button.is-pressed{transform:scale(.92);filter:brightness(1.25)}.pad-attack{width:clamp(76px,18vw,104px);height:clamp(76px,18vw,104px);background:linear-gradient(180deg,#ffe08a,#f0a93c);grid-column:3;grid-row:3}.pad-dodge{width:clamp(56px,14vw,76px);height:clamp(56px,14vw,76px);background:linear-gradient(180deg,#a7e8ff,#4fa8d8);grid-column:2;grid-row:3}.pad-block{width:clamp(56px,14vw,76px);height:clamp(56px,14vw,76px);background:linear-gradient(180deg,#d7d2bb,#9a9480);grid-column:3;grid-row:2}.pad-ability{position:relative;overflow:hidden;width:clamp(50px,12vw,66px);height:clamp(50px,12vw,66px);grid-row:1;background:linear-gradient(180deg,#b9a7e8,#6f5ab8);font-size:clamp(9px,2.1vw,11px)}.pad-ability[data-action=ability1]{grid-column:2}.pad-ability[data-action=ability2]{grid-column:3}.pad-ultimate{grid-column:1;background:linear-gradient(180deg,#ffe08a,#e2802c)}.pad-text{position:relative;z-index:1}.pad-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent 0deg,transparent calc(var(--cd, 1) * 360deg),rgba(6,14,9,.74) calc(var(--cd, 1) * 360deg),rgba(6,14,9,.74) 360deg);pointer-events:none}.pad-ability.is-unavailable{filter:grayscale(.7) brightness(.72)}.pad-ability.is-ready.is-ultimate-ready{box-shadow:0 0 14px #ffd166bf,0 4px 12px #00000073}#overlay{position:absolute;inset:0;display:none;place-items:center;padding:16px;background:#040906bd;backdrop-filter:blur(3px);pointer-events:auto}#overlay.is-visible{display:grid}.overlay-card{width:min(520px,92vw);max-height:90vh;overflow-y:auto;padding:clamp(18px,4vw,30px);border-radius:18px;text-align:center;background:linear-gradient(180deg,#122618f7,#09120cf7);border:1px solid var(--panel-edge);box-shadow:0 20px 60px #0009}.overlay-kicker{margin:0 0 6px;font-size:clamp(10px,2.6vw,12px);letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}.overlay-title{margin:0 0 10px;font-size:clamp(30px,8vw,54px);line-height:1;letter-spacing:.04em;color:var(--green);text-shadow:0 3px 0 rgba(0,0,0,.45)}.overlay-body{margin:0 auto 18px;max-width:40ch;font-size:clamp(13px,3.2vw,15px);line-height:1.5;color:var(--ink-dim)}.overlay-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.primary-button,.ghost-button{min-height:52px;padding:0 24px;border-radius:12px;font-size:clamp(14px,3.4vw,16px);font-weight:800;letter-spacing:.04em;cursor:pointer}.primary-button{border:none;color:#09170e;background:linear-gradient(180deg,#7fe08f,#2f8f4b);box-shadow:0 5px #1d6033}.primary-button:active{transform:translateY(2px);box-shadow:0 3px #1d6033}.ghost-button{background:transparent;color:var(--ink-dim);border:1px solid var(--panel-edge)}.overlay-hint{margin:16px 0 0;font-size:clamp(10px,2.6vw,12px);color:#6f8c78;line-height:1.5}#rotate-hint{position:absolute;inset:0;display:none;place-items:center;padding:24px;background:#040906eb;pointer-events:auto;text-align:center}@media (orientation: portrait) and (max-width: 560px){#rotate-hint.is-armed{display:grid}}.rotate-card{max-width:24ch;color:var(--ink-dim);font-size:15px;line-height:1.5}.rotate-icon{font-size:46px;color:var(--green);margin-bottom:10px}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){.meter-fill,.stick-knob,.pad-button{transition:none}}#screen{position:absolute;inset:0;display:grid;place-items:center;padding:12px;background:#040906e0;backdrop-filter:blur(4px);pointer-events:auto;overflow-y:auto}#screen[hidden]{display:none}.screen-card{width:min(680px,96vw);max-height:calc(100vh - 24px);overflow-y:auto;padding:clamp(16px,3.4vw,28px);border-radius:18px;background:linear-gradient(180deg,#122618fa,#09120cfa);border:1px solid var(--panel-edge);box-shadow:0 20px 60px #0009}.screen-head{text-align:center;margin-bottom:16px}.screen-kicker{margin:0 0 4px;font-size:clamp(9px,2.4vw,11px);letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}.screen-title{margin:0;font-size:clamp(22px,5.4vw,34px);line-height:1.05;letter-spacing:.03em;color:var(--green)}.screen-sub{margin:6px auto 0;max-width:46ch;font-size:clamp(12px,3vw,14px);line-height:1.45;color:var(--ink-dim)}.screen-body{display:flex;flex-direction:column;gap:16px}.screen-section-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#6f8c78;margin-bottom:7px}.screen-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}.name-field{display:flex;gap:8px;align-items:center}.name-field input{flex:1;min-width:0;min-height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--panel-edge);background:#060e09cc;color:var(--ink);font-family:inherit;font-size:clamp(14px,3.6vw,17px);font-weight:700;letter-spacing:.04em}.name-field input:focus{outline:2px solid var(--green);outline-offset:1px}.name-hint{margin:6px 0 0;font-size:11px;color:#6f8c78}.pick-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.pick{position:relative;display:flex;flex-direction:column;gap:4px;padding:11px 12px;border-radius:13px;border:1px solid var(--panel-edge);background:#08120cb8;color:var(--ink);text-align:left;font-family:inherit;cursor:pointer;transition:border-color .12s ease,transform 90ms ease,background-color .12s ease}.pick:hover:not(:disabled){border-color:var(--green);transform:translateY(-1px)}.pick.is-selected{border-color:var(--green);background:#2f8f4b38;box-shadow:inset 0 0 0 1px #7fe08f73}.pick:disabled{cursor:not-allowed;opacity:.62}.pick-name{font-size:clamp(13px,3.2vw,15px);font-weight:800;letter-spacing:.03em}.pick-note{font-size:11px;line-height:1.4;color:var(--ink-dim)}.pick-locked{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}.pick-swatch{display:flex;gap:4px;margin-top:2px}.pick-chip{width:16px;height:16px;border-radius:5px;border:1px solid rgba(0,0,0,.45)}.pick-rarity{position:absolute;top:9px;right:10px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:800}.stat-row{display:grid;grid-template-columns:54px 1fr;gap:7px;align-items:center;font-size:10px;color:var(--ink-dim)}.stat-track{height:5px;border-radius:3px;background:#ffffff1f;overflow:hidden}.stat-fill{height:100%;background:linear-gradient(90deg,#7fe08f,var(--green-deep))}.reward-rows{display:flex;flex-direction:column;gap:7px}.reward-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 12px;border-radius:10px;background:#08120cb3;border:1px solid var(--panel-edge);font-size:clamp(12px,3vw,14px)}.reward-row.is-bonus{border-color:#ffd16680}.reward-label{color:var(--ink-dim)}.reward-value{font-weight:800;color:var(--ink)}.reward-value.is-gain{color:var(--green)}.xp-bar{height:10px;border-radius:5px;background:#ffffff1f;overflow:hidden;margin-top:4px}.xp-fill{height:100%;background:linear-gradient(90deg,#7fe08f,var(--green-deep));transition:width .42s ease}.unlock-banner{padding:12px;border-radius:12px;border:1px solid rgba(255,209,102,.55);background:#ffd1661f;text-align:center}.unlock-banner h3{margin:0 0 6px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}.unlock-list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.unlock-list li{padding:4px 10px;border-radius:999px;background:#ffd16633;font-size:12px;font-weight:700;color:#ffeec0}.coin-tally{display:flex;align-items:baseline;justify-content:center;gap:8px;font-size:12px;color:var(--ink-dim)}.coin-tally strong{font-size:clamp(15px,3.8vw,18px);color:var(--amber)}.screen-note{margin:10px 0 0;text-align:center;font-size:11px;line-height:1.5;color:#6f8c78}#crash{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:#040906f5;pointer-events:auto;text-align:center;z-index:10}#crash[hidden]{display:none}.crash-card{max-width:42ch}.crash-card h2{margin:0 0 10px;font-size:clamp(20px,5vw,28px);color:var(--green)}.crash-card p{margin:0 0 16px;font-size:clamp(13px,3.2vw,15px);line-height:1.5;color:var(--ink-dim)}.crash-detail{margin-top:14px!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px!important;color:#6f8c78;word-break:break-word}.hud-chip-emblem{display:flex;align-items:center;gap:6px;border-color:#8ce06a8c;color:#d8f5c8;font-variant-numeric:tabular-nums}.hud-chip-emblem[hidden]{display:none}.hud-chip-emblem img{width:22px;height:auto;image-rendering:auto}.emblem-panel{margin:14px 0 4px;padding:12px 14px;border:1px solid rgba(140,224,106,.4);border-radius:12px;background:#20381c80}.emblem-panel.is-earned{border-color:#ffd166bf;background:#3c36188c}.emblem-panel h3{margin:10px 0 4px;font-size:1rem;color:#ffd166}.emblem-head{display:flex;align-items:center;gap:10px;font-size:1.05rem;color:#d8f5c8}.emblem-head img{width:44px;height:auto}.emblem-code{display:flex;align-items:center;gap:10px;margin:8px 0 2px}.emblem-code strong{padding:4px 12px;border:1px dashed rgba(255,209,102,.8);border-radius:8px;font-family:ui-monospace,monospace;font-size:1.1rem;letter-spacing:.08em;color:#ffe6a6;user-select:all}.emblem-link{display:inline-block;margin-top:8px;color:#8ce06a;font-size:.85rem}
