:root{--c-bg: #0b0e16;--c-panel: rgba(12, 16, 28, .86);--c-line: rgba(255, 255, 255, .14);--c-text: #f2f4f8;--c-sub: #a9b2c3;--c-p0: #56b6ff;--c-p1: #ff5a52;--c-accent: #ffd34a;--c-hp: #3fe08a;--c-hp-low: #ff4d4d;--c-energy: #6fd3ff;--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--c-bg);color:var(--c-text);font-family:Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,Yu Gothic UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none}#game-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}#hud{position:fixed;inset:0;pointer-events:none;z-index:15;display:none}#hud.visible{display:block}.hud-top{position:absolute;top:calc(var(--safe-t) + 8px);left:calc(var(--safe-l) + 12px);right:calc(var(--safe-r) + 12px);display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start}.hud-side{display:flex;flex-direction:column;gap:3px;min-width:0}.hud-side.p1{align-items:flex-end}.hud-name{font-size:clamp(11px,1.8vw,15px);font-weight:800;letter-spacing:.04em;text-shadow:0 1px 3px #000;display:flex;gap:6px;align-items:center}.hud-wins{display:inline-flex;gap:3px}.hud-wins i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--c-accent);display:inline-block}.hud-wins i.on{background:var(--c-accent)}.hud-bar{position:relative;width:min(36vw,360px);height:clamp(10px,2.2vh,16px);background:#0000008c;border:1px solid rgba(255,255,255,.35);border-radius:3px;overflow:hidden;transform:skew(-12deg)}.p1 .hud-bar{transform:skew(12deg)}.hud-bar .lag,.hud-bar .fill{position:absolute;top:0;bottom:0;left:0;width:100%;transform-origin:left center}.p1 .hud-bar .lag,.p1 .hud-bar .fill{transform-origin:right center}.hud-bar .lag{background:#fff3b0}.hud-bar .fill{background:linear-gradient(180deg,#7dffb5,var(--c-hp))}.hud-bar.low .fill{background:linear-gradient(180deg,#ff8a8a,var(--c-hp-low))}.hud-energy{position:relative;width:min(26vw,250px);height:6px;background:#0000008c;border-radius:3px;overflow:hidden}.hud-energy .efill{position:absolute;inset:0;background:var(--c-energy);transform-origin:left center}.p1 .hud-energy .efill{transform-origin:right center}.hud-energy.over .efill{background:#ff7b3a;animation:blink .25s steps(2) infinite}.hud-timer{font-size:clamp(22px,5vh,38px);font-weight:900;min-width:2.2em;text-align:center;text-shadow:0 2px 6px #000;font-variant-numeric:tabular-nums}.hud-timer.low{color:#ff6b5e}.hud-pause{pointer-events:auto;position:absolute;top:calc(var(--safe-t) + 52px);left:50%;transform:translate(-50%);width:40px;height:32px;border-radius:8px;border:1px solid var(--c-line);background:#00000073;color:var(--c-text);font-weight:900;font-size:14px;z-index:25}.hud-guard{position:absolute;top:calc(var(--safe-t) + 54px);left:calc(var(--safe-l) + 12px);color:#aee8ff;background:#081423a6;border:1px solid rgba(174,232,255,.5);border-radius:6px;padding:3px 8px;font-size:12px;font-weight:700;display:none}.hud-guard.on{display:block}.lock-marker{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border:2px solid var(--c-p1);border-radius:4px;transform:rotate(45deg);box-shadow:0 0 10px #ff5046b3;display:none}.lock-marker.on{display:block}.lock-marker.offscreen{border-style:dashed;opacity:.7}.center-msg{position:absolute;top:34%;left:0;right:0;text-align:center;font-size:clamp(34px,10vh,84px);font-weight:900;font-style:italic;letter-spacing:.06em;color:#fff;text-shadow:0 0 14px rgba(255,200,60,.85),0 4px 0 #b23a00;opacity:0;transform:scale(1.4);transition:opacity .18s,transform .18s}.center-msg.show{opacity:1;transform:scale(1)}.center-sub{position:absolute;top:calc(34% + clamp(44px,12vh,100px));left:0;right:0;text-align:center;font-size:clamp(14px,3vh,22px);font-weight:700;text-shadow:0 2px 4px #000}.combo{position:absolute;left:calc(var(--safe-l) + 16px);top:26%;font-size:clamp(18px,5vh,34px);font-weight:900;font-style:italic;color:var(--c-accent);text-shadow:0 2px 4px #000;opacity:0;transition:opacity .2s}.combo.show{opacity:1}.cpu-tag{font-size:10px;padding:1px 5px;border-radius:3px;background:#ffffff26;color:var(--c-sub)}#perf{position:fixed;left:calc(var(--safe-l) + 6px);bottom:calc(var(--safe-b) + 6px);z-index:40;font:11px/1.35 ui-monospace,Consolas,monospace;background:#0009;color:#9effb0;padding:4px 7px;border-radius:4px;pointer-events:none;white-space:pre;display:none}#perf.visible{display:block}#screens{position:fixed;inset:0;z-index:30;pointer-events:none}.screen{position:absolute;inset:0;display:none;pointer-events:auto;padding:calc(var(--safe-t) + 16px) calc(var(--safe-r) + 20px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 20px);touch-action:manipulation}.screen.active{display:flex}.screen.dim{background:#05070cb8}.title-screen{flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#28468c8c,#05070ceb)}.logo{font-size:clamp(30px,9vh,76px);font-weight:900;font-style:italic;letter-spacing:.04em;line-height:1;text-align:center;background:linear-gradient(180deg,#fff 30%,#ffd34a 70%,#ff8a2a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #6a1f00) drop-shadow(0 0 20px rgba(255,160,40,.5))}.logo small{display:block;font-size:.42em;letter-spacing:.4em;margin-top:.3em}.tap-start{margin-top:6vh;font-size:clamp(14px,3vh,20px);font-weight:700;animation:pulse 1.4s ease-in-out infinite}.version{position:absolute;bottom:calc(var(--safe-b) + 8px);right:calc(var(--safe-r) + 12px);font-size:11px;color:var(--c-sub)}.menu-screen,.settings-screen,.pause-screen,.result-screen{align-items:center;justify-content:center}.panel{background:var(--c-panel);border:1px solid var(--c-line);border-radius:14px;padding:clamp(14px,3vh,26px) clamp(16px,3vw,32px);min-width:min(420px,86vw);max-height:100%;overflow-y:auto;touch-action:pan-y;box-shadow:0 12px 40px #00000080}.panel h2{margin:0 0 12px;font-size:clamp(18px,4vh,26px);font-weight:900;letter-spacing:.06em}.btn-col{display:flex;flex-direction:column;gap:8px}.btn{appearance:none;border:1px solid rgba(255,255,255,.2);background:linear-gradient(180deg,#ffffff1f,#ffffff0a);color:var(--c-text);font:inherit;font-weight:800;font-size:clamp(14px,3vh,18px);padding:clamp(9px,2vh,13px) 18px;border-radius:10px;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:12px}.btn:active,.btn:focus-visible{background:#ffd34a40;border-color:var(--c-accent);outline:none}.btn.primary{background:linear-gradient(180deg,#ffd34a,#f09a1a);color:#261300;border-color:#ffe58a}.btn small{font-weight:600;color:var(--c-sub);font-size:.75em}.btn.primary small{color:#5a3500}.seg{display:flex;gap:6px}.seg .btn{flex:1;justify-content:center;padding:8px 6px;font-size:14px}.seg .btn.on{background:#ffd34a4d;border-color:var(--c-accent)}.row{display:grid;grid-template-columns:7em 1fr;gap:10px;align-items:center;margin:8px 0;font-size:14px;font-weight:700}.row input[type=range]{width:100%}.note{font-size:12px;color:var(--c-sub);margin-top:8px;line-height:1.5}.select-screen{flex-direction:column;align-items:stretch;justify-content:center;gap:2vh;background:linear-gradient(160deg,#0a142df2,#28080cf2)}.select-title{text-align:center;font-size:clamp(16px,4vh,26px);font-weight:900;letter-spacing:.1em}.select-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;width:min(100%,1060px);min-height:0;overflow-y:auto;overscroll-behavior:contain;align-self:center;padding:8px 6px;flex:1}.card{appearance:none;position:relative;width:100%;aspect-ratio:3 / 4;min-height:190px;border-radius:14px;overflow:hidden;border:3px solid rgba(255,255,255,.2);background:#111 center / cover no-repeat;color:#fff;font:inherit;cursor:pointer;padding:0;transition:transform .12s,border-color .12s}.card.p0{border-color:var(--c-p0);transform:translateY(-4px);box-shadow:0 0 22px #56b6ff99}.card.p1{border-color:var(--c-p1);box-shadow:0 0 22px #ff5a5299}.card.p0.p1{border-image:linear-gradient(90deg,var(--c-p0),var(--c-p1)) 1}.card .info{position:absolute;left:0;right:0;bottom:0;padding:10px 10px 8px;background:linear-gradient(0deg,#000000eb,#0000);text-align:left}.card .cname{font-size:18px;font-weight:900}.card .cstats{font-size:11px;color:#dfe5ee;margin-top:3px}.card .ctype{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--c-accent)}.card .cmoves{font-size:11px;color:#dfe5ee;margin-top:3px;line-height:1.4}.card .badge{position:absolute;top:8px;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:900}.card .badge.b0{left:8px;background:var(--c-p0);color:#001a2e}.card .badge.b1{right:8px;background:var(--c-p1);color:#2e0300}.select-actions{display:flex;justify-content:center;gap:10px}.select-actions .btn{justify-content:center;min-width:9em}.result-title{font-size:clamp(32px,9vh,70px);font-weight:900;font-style:italic;text-align:center;margin-bottom:10px}.result-title.win{color:var(--c-accent)}.result-title.lose{color:#9aa6ba}@media(orientation:portrait){.hud-top{gap:6px;top:calc(var(--safe-t) + 6px);left:calc(var(--safe-l) + 10px);right:calc(var(--safe-r) + 10px)}.hud-bar{width:min(32vw,360px);height:9px}.hud-energy{height:4px}.hud-timer{font-size:24px}.hud-pause{top:calc(var(--safe-t) + 34px);width:36px;height:26px}.hud-guard{top:var(--portrait-game-top);font-size:10px}.center-msg{top:calc(var(--portrait-game-top) + var(--portrait-game-height) * .3);font-size:clamp(24px,7vw,42px)}.center-sub{top:calc(var(--portrait-game-top) + var(--portrait-game-height) * .3 + 42px);font-size:12px}.combo{top:calc(var(--portrait-game-top) + 16px);font-size:18px}.row{grid-template-columns:1fr;gap:5px}.panel{max-width:100%}.card{width:100%}.card .cname{font-size:18px}.select-actions .btn{min-width:0;flex:1;max-width:10em}}#boot-error{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;padding:24px;background:var(--c-bg);text-align:center;line-height:1.6}@keyframes pulse{50%{opacity:.35}}@keyframes blink{50%{opacity:.3}}.ff3d-touch-root,.ff3d-editor-root{position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}.ff3d-touch-root{z-index:10;pointer-events:none;--ff3d-opacity: 1}.ff3d-touch-root.is-hidden{display:none}.ff3d-safe{position:absolute;top:env(safe-area-inset-top,0px);right:env(safe-area-inset-right,0px);bottom:env(safe-area-inset-bottom,0px);left:env(safe-area-inset-left,0px);pointer-events:none}.ff3d-touch-zone{position:absolute;top:0;bottom:0;width:50%;pointer-events:none;touch-action:none}.ff3d-zone-left{left:0}.ff3d-zone-right{right:0}.ff3d-zone-bottom{display:none}.ff3d-touch-root.is-enabled .ff3d-touch-zone{pointer-events:auto}.ff3d-stick-ring{position:absolute;border-radius:50%;border:2px solid rgba(232,236,245,.35);background:#e8ecf526;opacity:var(--ff3d-opacity);pointer-events:none;display:flex;align-items:center;justify-content:center}.ff3d-stick-ring.is-idle{visibility:hidden}.ff3d-stick-knob{width:40%;height:40%;border-radius:50%;background:#e8ecf538;border:2px solid rgba(232,236,245,.45)}.ff3d-touch-btn,.ff3d-edit-btn{position:absolute;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#e8ecf5;font-family:sans-serif;font-weight:400;--button-fill: rgba(232, 236, 245, .22);background:var(--button-fill);border:3px solid rgba(232,236,245,.45);overflow:hidden;touch-action:none}.ff3d-touch-btn{opacity:var(--ff3d-opacity);pointer-events:none}.ff3d-touch-root.is-enabled .ff3d-touch-btn{pointer-events:auto}.ff3d-touch-btn.is-down{--button-fill: rgba(232, 236, 245, .45);border-color:#e8ecf5e6}.ff3d-touch-btn.is-lit{border-color:#e8ecf5e6}.ff3d-btn-label{position:relative;z-index:1;pointer-events:none;opacity:.6}.ff3d-btn-cooldown{position:absolute;inset:0;border-radius:50%;pointer-events:none;display:none;background:conic-gradient(#0000 calc(var(--cd, 1) * 360deg),#0009 0)}.ff3d-touch-btn.is-cooling .ff3d-btn-cooldown{display:block}.ff3d-editor-root{z-index:1000;background:#080c18d1;color:#fff;font-family:system-ui,sans-serif}.ff3d-editor-safe{pointer-events:none}.ff3d-edit-btn{opacity:var(--ff3d-opacity, 1);cursor:grab;pointer-events:auto}.ff3d-edit-btn.is-selected{border-color:#ffd54a;box-shadow:0 0 0 3px #ffd54a80}.ff3d-edit-stick{position:absolute;border-radius:50%;border:2px dashed rgba(255,255,255,.5);pointer-events:none;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff9}.ff3d-editor-panel{position:absolute;left:12px;top:12px;max-width:calc(100% - 24px);display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:8px 12px;border-radius:10px;background:#141c30eb;border:1px solid rgba(255,255,255,.25);font-size:13px;pointer-events:auto}.ff3d-editor-panel label{display:flex;align-items:center;gap:6px}.ff3d-editor-panel input[type=range]{width:120px}.ff3d-editor-panel button{min-height:36px;padding:4px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.5);background:#ffffff1f;color:#fff;font-size:13px}.ff3d-editor-status{min-width:5em;color:#ffd54a}@media(orientation:landscape){.ff3d-editor-panel{max-width:calc(100% - 128px)}}@media(orientation:portrait){.ff3d-touch-safe,.ff3d-editor-safe{top:var(--portrait-control-top)}.ff3d-zone-left{top:var(--portrait-control-top);left:env(safe-area-inset-left,0px);width:calc((100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))/2);bottom:env(safe-area-inset-bottom,0px)}.ff3d-zone-right{top:var(--portrait-game-top);left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);width:auto;height:var(--portrait-game-height);bottom:auto}.ff3d-zone-bottom{display:block;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);width:auto;top:var(--portrait-move-bottom-top);bottom:env(safe-area-inset-bottom,0px)}.ff3d-touch-safe:before{content:"左側・下側で移動 ／ 上のゲーム画面で視点操作";position:absolute;bottom:12px;left:12px;right:12px;text-align:center;font:11px/1.6 sans-serif;color:#e8ecf58c;pointer-events:none}.ff3d-editor-panel{top:calc(env(safe-area-inset-top,0px) + 12px)}}