:root{color:#f7fbff;font-family:Inter,Noto Sans JP,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;background:#0d1b2c;touch-action:none}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button,dialog{font:inherit}button{color:inherit}[hidden]{display:none!important}#game-canvas{position:fixed;inset:0;display:block}.hud{position:fixed;inset:0;pointer-events:none;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}.top-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;max-width:980px;margin:0 auto}.brand{display:flex;align-items:center;gap:8px;padding:0;border:0;background:transparent;color:#cef;cursor:pointer;font-size:11px;font-weight:700;line-height:1.05;letter-spacing:.04em;text-align:left;text-transform:uppercase;pointer-events:auto}.brand b{color:#fff;font-size:16px;letter-spacing:.1em}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#f4d45d,#ef744f);box-shadow:0 8px 26px #f2994a52;color:#102238;font-size:19px;font-weight:900}.stats{justify-self:center;display:flex;align-items:stretch;border:1px solid rgba(211,236,255,.15);border-radius:16px;background:#081727ad;box-shadow:0 10px 35px #0000002e;backdrop-filter:blur(12px)}.stats>div{min-width:92px;padding:8px 15px;text-align:center}.stats>div+div{border-left:1px solid rgba(211,236,255,.13)}.stats small,.piece-panel small{display:block;color:#82a6bf;font-size:8px;font-weight:800;letter-spacing:.15em}.stats strong{display:block;font-size:21px;font-variant-numeric:tabular-nums}.stats em{margin-left:3px;color:#9ab7ca;font-size:9px;font-style:normal}.round-button{pointer-events:auto;width:42px;height:42px;border:1px solid rgba(211,236,255,.28);border-radius:50%;background:#081727ad;cursor:pointer;font-family:Georgia,serif;font-size:20px;font-weight:700;backdrop-filter:blur(10px)}.round-button:hover{background:#254660e6}.piece-panel{display:flex;justify-content:center;gap:8px;margin:10px auto 0}.current-piece,.next-piece{display:flex;align-items:center;min-height:31px;border:1px solid rgba(209,234,255,.12);background:#09192994;backdrop-filter:blur(8px)}.current-piece{gap:9px;padding:5px 11px;border-radius:10px}.current-piece b{font-size:13px}.current-piece span{color:#a9c8dc;font-size:9px}.next-piece{gap:7px;padding:5px 10px;border-radius:10px}.next-piece span{width:10px;height:10px;border:2px solid #fff;border-radius:50%}.next-piece b{max-width:90px;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.seed-label{margin-top:5px;color:#b9d8eb80;font-size:8px;letter-spacing:.13em;text-align:center}.battle-strip{pointer-events:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;width:min(560px,calc(100% - 24px));margin:9px auto 0;padding:6px 10px;border:1px solid rgba(209,234,255,.15);border-radius:12px;background:#081727b8;backdrop-filter:blur(10px)}.battle-strip>span:first-child{color:#83a8c0;font-size:9px}.battle-strip b{font-size:12px}.timer{justify-self:end;position:relative;width:90px;height:22px;overflow:hidden;border-radius:8px;background:#ffffff1a;text-align:center}.timer i{position:absolute;inset:0;transform-origin:left;background:#47c7a2;transition:transform .1s linear}.timer i.urgent{background:#ef6f61}.timer strong{position:relative;color:#fff;font-size:11px;font-variant-numeric:tabular-nums;line-height:22px}.touch-controls{position:fixed;z-index:3;right:50%;bottom:max(18px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,minmax(54px,70px));gap:7px;transform:translate(50%);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.touch-controls *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.touch-controls button{display:grid;place-items:center;min-height:62px;border:1px solid rgba(218,240,255,.22);border-radius:18px;background:#0d2033cc;box-shadow:0 8px 24px #00000038;cursor:pointer;font-size:24px;font-weight:800;backdrop-filter:blur(12px);-webkit-tap-highlight-color:transparent}.touch-controls button:active{transform:translateY(2px);background:#2f5570eb}.touch-controls small{color:#9ab9ce;font-size:8px;font-weight:700}.touch-controls .drop-button{border-color:#ffe174b8;background:linear-gradient(145deg,#f2bf4af5,#ee6b4af5);color:#15273a}.touch-controls .drop-button small{color:#15273a}.touch-controls.disabled{opacity:.35;pointer-events:none}.modal-layer{position:fixed;z-index:6;inset:0;display:grid;place-items:center;padding:max(22px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 24%,rgba(55,116,155,.36),transparent 44%),#050f19b3;backdrop-filter:blur(12px)}.mode-card,.waiting-card{width:min(470px,100%);padding:34px;border:1px solid rgba(225,242,255,.2);border-radius:30px;background:linear-gradient(155deg,#14344efa,#0d2338fa);box-shadow:0 28px 90px #00000073;text-align:center}.mode-card .eyebrow,.waiting-card .eyebrow,.attack-heading small{margin:0;color:#ef9b65;font-size:9px;font-weight:900;letter-spacing:.22em}.mode-card h1,.waiting-card h1{margin:7px 0 10px;font-size:clamp(26px,7vw,38px)}.mode-card h1 span{color:#f2c94c}.mode-card>p:not(.eyebrow),.waiting-card p{color:#b9d1e2;font-size:13px}.mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}.mode-buttons button{display:grid;gap:5px;min-height:100px;padding:18px 10px;border:1px solid rgba(218,240,255,.2);border-radius:18px;background:#1c425e;cursor:pointer}.mode-buttons button.battle-choice{border-color:#f2c94c8f;background:linear-gradient(145deg,#315e72,#6f4d42)}.mode-buttons b{font-size:17px}.mode-buttons span{color:#a9c8dc;font-size:10px}.battle-menu{margin-top:22px}.battle-menu>button:not(.text-button),.waiting-card>button{width:100%;padding:14px;border:0;border-radius:13px;background:#f2c94c;color:#14263a;cursor:pointer;font-weight:800}.join-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin:12px 0}.join-row input,.waiting-card input{min-width:0;padding:13px;border:1px solid rgba(218,240,255,.25);border-radius:12px;outline:none;background:#0003;color:#fff;font-size:16px;font-weight:800;letter-spacing:.18em;text-align:center;text-transform:uppercase}.join-row button{padding:0 20px;border:0;border-radius:12px;background:#59c7a5;color:#102438;cursor:pointer;font-weight:800}.text-button{border:0;background:transparent;color:#a9c8dc;cursor:pointer}.battle-menu [role=alert]{min-height:18px;color:#ff9a8f;font-size:11px}.waiting-card>strong{display:block;margin:4px 0 20px;color:#f2c94c;font-size:38px;letter-spacing:.18em}.waiting-card label{display:grid;gap:7px;margin-bottom:10px;color:#8facbf;font-size:10px;text-align:left}.waiting-card input{width:100%;font-size:11px;letter-spacing:0;text-align:left;text-transform:none}.attack-overlay{position:fixed;z-index:4;inset:0;display:grid;align-content:center;gap:16px;padding:130px max(14px,env(safe-area-inset-right)) 110px max(14px,env(safe-area-inset-left));background:#040d168c;backdrop-filter:blur(3px)}.attack-heading{text-align:center}.attack-heading h2{margin:4px 0;font-size:clamp(19px,5vw,28px)}.attack-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:min(920px,100%);margin:0 auto}.attack-cards button{min-height:150px;padding:16px;border:1px solid rgba(242,201,76,.5);border-radius:17px;background:#112f46f5;box-shadow:0 12px 30px #00000040;cursor:pointer;text-align:left}.attack-cards button:disabled{cursor:default;opacity:1}.attack-cards button:not(:disabled):active{transform:scale(.98);background:#315b72}.attack-cards button.revealed{border-color:#f2c94c;background:#315b72;box-shadow:0 0 0 3px #f2c94c47,0 12px 30px #00000040}.attack-cards button.not-selected{opacity:.48}.attack-cards ul{margin:0;padding-left:18px}.attack-cards li{margin:7px 0;color:#e9f6ff;font-size:12px;line-height:1.45}.attack-answer{display:block;margin-top:14px;color:#ffe08a;font-size:17px;text-align:center}.toast{position:fixed;z-index:20;left:50%;bottom:110px;padding:10px 16px;border-radius:10px;background:#040e18eb;box-shadow:0 10px 35px #0006;transform:translate(-50%);font-size:12px}.game-over{position:fixed;z-index:5;inset:0;display:grid;place-items:center;padding:24px;background:#050f19a3;backdrop-filter:blur(10px)}.game-over[hidden]{display:none}.game-over-card{width:min(390px,100%);padding:32px;border:1px solid rgba(225,242,255,.24);border-radius:28px;background:#112941;box-shadow:0 25px 80px #00000073;text-align:center}.game-over-card>small{color:#ef9b65;font-weight:900;letter-spacing:.22em}.game-over-card h1{margin:8px 0;font-size:36px}.game-over-card p{color:#b9d1e2}.game-over-card button{width:100%;margin-top:10px;padding:13px;border:0;border-radius:13px;background:#f2c94c;color:#14263a;cursor:pointer;font-weight:800}.game-over-card button:disabled{opacity:.62;cursor:wait}.game-over-card button.secondary{border:1px solid rgba(214,237,252,.28);background:transparent;color:#eaf7ff}dialog{width:min(650px,calc(100% - 28px));max-height:min(760px,calc(100% - 28px));padding:0;overflow:hidden;border:1px solid rgba(219,239,252,.2);border-radius:24px;background:#10263c;color:#eaf7ff;box-shadow:0 30px 100px #0000008c}dialog::backdrop{background:#030b13b8;backdrop-filter:blur(8px)}dialog form{position:sticky;z-index:2;top:0;height:0;text-align:right}.dialog-close{margin:14px;width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:#1d3a53;cursor:pointer;font-size:22px}.dialog-body{max-height:min(760px,calc(100vh - 28px));padding:32px 38px 40px;overflow:auto;line-height:1.75}.dialog-body h1{margin:0 0 16px;font-size:32px}.dialog-body h2{margin:28px 0 4px;color:#f4d45d;font-size:15px}.dialog-body p,.dialog-body li{color:#c2d8e6;font-size:13px}.dialog-body a{color:#7bd6f4}.dialog-body .eyebrow{margin:0;color:#ef9b65;font-size:9px;font-weight:900;letter-spacing:.2em}.keyboard-help{padding:12px 14px;border-radius:10px;background:#00000026}.loading{position:fixed;z-index:10;inset:0;display:grid;place-content:center;justify-items:center;background:#0d1b2c;color:#bdd8e9}.loading span{width:42px;height:42px;border:3px solid rgba(255,255,255,.15);border-top-color:#f2c94c;border-radius:50%;animation:spin .8s linear infinite}.loading p{font-size:13px}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:600px){.hud{padding-left:10px;padding-right:10px}.top-bar{gap:7px}.brand{font-size:0}.brand b{display:none}.brand-mark{width:38px;height:38px;border-radius:12px;font-size:17px}.stats{width:100%}.stats>div{flex:1;min-width:0;padding:6px 7px}.stats strong{font-size:18px}.round-button{width:38px;height:38px}.piece-panel{margin-top:8px}.touch-controls{width:calc(100% - 20px);grid-template-columns:repeat(5,1fr);gap:5px}.touch-controls button{min-width:0;min-height:60px;border-radius:16px}.dialog-body{padding:28px 22px 36px}.mode-card,.waiting-card{padding:26px 20px;border-radius:24px}.mode-buttons{grid-template-columns:1fr}.mode-buttons button{min-height:76px}.battle-strip{grid-template-columns:auto 1fr auto}.battle-strip>span:first-child{display:none}.timer{width:74px}.attack-overlay{padding-top:145px;padding-bottom:105px;overflow:auto}.attack-cards{grid-template-columns:1fr 1fr}.attack-cards button{min-height:128px;padding:11px}.attack-cards li{margin:4px 0;font-size:10px}}@media(min-width:900px)and (pointer:fine){.touch-controls{right:24px;bottom:24px;grid-template-columns:repeat(5,54px);transform:none}.touch-controls button{min-height:50px;border-radius:14px;font-size:19px}}@media(prefers-reduced-motion:reduce){.loading span{animation-duration:1.8s}}