:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#02050a}html{background:#02050a}body{color:#f8fbff;background:#02050a}:root{--ink:#f8fbff;--muted:#aeb9c9;--chrome-hi:#f4f7ff;--chrome-mid:#bfc3cc;--chrome-low:#6f727e;--well:#00070b;--cyan:#39d8ff;--panel:#010a18db;--danger:#ff3c55;--safe-top:max(10px, env(safe-area-inset-top));--safe-right:max(10px, env(safe-area-inset-right));--safe-bottom:max(10px, env(safe-area-inset-bottom));--safe-left:max(10px, env(safe-area-inset-left))}*{box-sizing:border-box}html,body{overscroll-behavior:none;min-height:100%}body{color:var(--ink);-webkit-font-smoothing:antialiased;background:#02050a;margin:0;font-family:Arial,Noto Sans JP,Yu Gothic,sans-serif;overflow:hidden}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.game-root{isolation:isolate;background:radial-gradient(at 50% 62%,#2c96ff33 0 3%,#0000 34%),repeating-linear-gradient(113deg,#0000 0 34px,#1065d82e 36px 38px,#0000 40px 78px),linear-gradient(90deg,#010207 0%,#07111e 38%,#06101c 62%,#010207 100%);min-height:100svh;position:relative;overflow:hidden}.game-root:before,.game-root:after{z-index:-1;content:"";pointer-events:none;position:absolute;inset:-40% -15%}.game-root:before{background:repeating-linear-gradient(90deg,#0000 0 46px,#1c69e157 48px 50px),repeating-linear-gradient(0deg,#0000 0 26px,#53cdff2e 28px 30px);transform:perspective(420px)rotateX(68deg)translateY(25%);-webkit-mask-image:radial-gradient(#000 0 44%,#0000 74%);mask-image:radial-gradient(#000 0 44%,#0000 74%)}.game-root:after{background:linear-gradient(90deg,#000000c7,#0000 19% 81%,#000000c7),radial-gradient(circle at 50% 68%,#7cd5ff3d,#0000 24%);inset:0}.lobby-shell{min-height:100svh;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);place-items:center;display:grid}.lobby-panel{color:#080a0d;text-align:center;background:linear-gradient(145deg,#ffffff29,#0000 34%),linear-gradient(#bec3cef2,#5f636ff7);border:1px solid #d8dbe4;border-radius:2px;width:min(92vw,560px);padding:clamp(22px,5vw,52px);box-shadow:inset 3px 3px #ffffffa3,inset -4px -4px #1f2127b3,0 22px 80px #000}.brand-kicker{color:#263141;letter-spacing:.22em;margin:0 0 7px;font-size:11px;font-weight:700}.brand-title{color:#fff;letter-spacing:-.065em;text-shadow:0 2px #61656c,0 5px #30333a,0 10px 18px #00000073;margin:0;font-size:clamp(30px,7vw,58px);font-weight:900;font-stretch:75%;line-height:.87}.brand-subtitle{color:#171b22;letter-spacing:.36em;margin:13px 0 32px;font-size:13px;font-weight:800}.room-form{gap:11px;width:min(100%,380px);margin-inline:auto;display:grid}.room-form label{text-align:left;letter-spacing:.12em;font-size:12px;font-weight:700}.room-code{color:#0a0d12;letter-spacing:.22em;text-align:center;text-transform:uppercase;background:#fff;border:2px inset #b9bbc1;border-radius:0;outline:none;width:100%;height:48px;font-weight:800}.room-code:focus-visible{box-shadow:0 0 0 3px #117ed4}.chrome-button{color:#0a0c10;cursor:pointer;letter-spacing:.12em;text-shadow:0 1px #fff;background:linear-gradient(#fafbff 0,#c5c7cd 44%,#91949c 49%,#dfe1e5 100%);border:1px solid #4e5159;border-radius:1px;min-height:50px;font-size:16px;font-weight:800;position:relative;box-shadow:inset 1px 1px #fff,inset -2px -2px #5b5e64,0 3px #25272c}.chrome-button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 2px 2px 4px #565961,0 1px #25272c}.chrome-button:disabled{cursor:wait;opacity:.64}.lobby-status{color:#172232;min-height:22px;margin:19px 0 0;font-size:12px;font-weight:700}.lobby-status.error{color:#800d20}.invite-link{color:#101d2d;cursor:pointer;letter-spacing:.08em;background:0 0;border:0;border-bottom:1px solid;margin-top:4px;font-size:12px;font-weight:800}.invite-link:focus-visible{outline-offset:4px;outline:2px solid #117ed4}.version{top:var(--safe-top);left:var(--safe-left);color:#ffffffb8;letter-spacing:.08em;font-size:11px;position:absolute}.match-shell{min-height:100svh;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);-webkit-user-select:none;user-select:none;grid-template-rows:minmax(0,1fr) auto;display:grid;position:relative}.arena{grid-template-columns:minmax(0,1fr) minmax(104px,.28fr) minmax(0,1fr);align-items:center;gap:clamp(8px,1.8vw,24px);width:min(100%,1280px);min-height:0;margin:0 auto;display:grid}.battle-board{justify-items:center;min-width:0;display:grid}.board-bevel{aspect-ratio:10/24;border:1px solid var(--chrome-hi);clip-path:polygon(4% 0,96% 0,100% 1.8%,100% 98.2%,96% 100%,4% 100%,0 98.2%,0 1.8%);filter:drop-shadow(0 12px 15px #000000b8);background:linear-gradient(135deg,#fbfcff 0 3%,#9da0a8 9%,#eff1f7 17%,#7a7d86 26%,#c7cad2 72%,#62656e 88%,#f8f9fe 100%);width:min(100%,41.6667svh - 62.5px);padding:clamp(5px,.75vw,11px)}.local-board .board-bevel{filter:drop-shadow(0 0 8px #39d8ff3d)drop-shadow(0 14px 18px #000000c2)}.board-well{background:radial-gradient(at 50% 16%,#04233159,#0000 50%),linear-gradient(#000305,#000a0f 68%,#000306);border:clamp(2px,.28vw,4px) ridge #4d515a;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 15px #000}.board-grid{grid-template-rows:repeat(24,1fr);grid-template-columns:repeat(10,1fr);display:grid;position:absolute;inset:0}.board-cell,.next-cell{min-width:0;min-height:0;display:block;position:relative}.tile{z-index:1;border:max(1px, .07vw) solid var(--tile-edge);background:linear-gradient(135deg, #ffffff9e 0 9%, transparent 10% 31%, #ffffff2e 32% 45%, transparent 46% 74%, #00000042 75% 100%), linear-gradient(145deg, var(--tile-hi), var(--tile) 51%, var(--tile-low));box-shadow:inset 1px 1px 0 color-mix(in srgb, white 44%, var(--tile)), inset -1px -1px 0 color-mix(in srgb, black 35%, var(--tile))}.active-tile{filter:saturate(1.28)brightness(1.25)}.tile[style*="--piece: 1"],.tile[style*=--piece\:1]{--tile:#c90300;--tile-hi:#ff5873;--tile-low:#7f0000;--tile-edge:#ef294f}.tile[style*="--piece: 2"],.tile[style*=--piece\:2]{--tile:#00af14;--tile-hi:#52ef60;--tile-low:#006c0d;--tile-edge:#15d72d}.tile[style*="--piece: 3"],.tile[style*=--piece\:3]{--tile:#c238df;--tile-hi:#ef8cff;--tile-low:#73148b;--tile-edge:#dd5ff3}.tile[style*="--piece: 4"],.tile[style*=--piece\:4]{--tile:#d3b42c;--tile-hi:#fff36a;--tile-low:#8e6812;--tile-edge:#f0d44a}.tile[style*="--piece: 5"],.tile[style*=--piece\:5]{--tile:#03a1e6;--tile-hi:#62efff;--tile-low:#0069a7;--tile-edge:#29cef4}.tile[style*="--piece: 6"],.tile[style*=--piece\:6]{--tile:#da8744;--tile-hi:#ffd078;--tile-low:#9a461f;--tile-edge:#f4ac64}.tile[style*="--piece: 7"],.tile[style*=--piece\:7]{--tile:#0035ed;--tile-hi:#1c8cff;--tile-low:#001080;--tile-edge:#1558ff}.tile[style*="--piece: 8"],.tile[style*=--piece\:8]{--tile:#8d8d8d;--tile-hi:#fff;--tile-low:#343434;--tile-edge:#d5d5d5;background:linear-gradient(135deg,#161616 0 16%,#f8f8f8 36%,#777 54%,#f2f2f2 68%,#303030 100%)}.defeat-zone{z-index:3;pointer-events:none;border:1px solid #d2d9e0b8;width:40%;height:16.6667%;position:absolute;top:0;left:30%;box-shadow:0 0 3px #000,inset 0 0 2px #000}.top-out .board-well{animation:.42s steps(2,end) infinite top-out-pulse}.seat-label{color:#d6dbe5;letter-spacing:.16em;align-items:center;gap:7px;margin-top:6px;font-size:10px;font-weight:700;display:flex}.seat-dot{background:#687180;border-radius:50%;width:6px;height:6px;box-shadow:0 0 5px}.local-board .seat-dot{background:var(--cyan)}.versus-column{text-align:center;align-content:center;gap:clamp(8px,1.4svh,18px);min-width:0;display:grid}.vs-mark{color:#232a34;text-shadow:0 1px #fff;background:linear-gradient(90deg,#0000,#e7edf7c2 18%,#ffffffe0 50%,#e7edf7c2 82%,#0000);border-block:1px solid #ffffffb8;place-items:center;min-height:48px;font-size:clamp(22px,3.4vw,44px);font-weight:400;display:grid}.next-panel{justify-items:center;gap:5px;display:grid}.next-label,.metric-label{color:#d8e3ef;letter-spacing:.14em;white-space:nowrap;font-size:clamp(7px,.8vw,10px);font-weight:700}.next-well{aspect-ratio:1;background:#000408d1;border:1px solid #9ba2ab;grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr);width:clamp(42px,6.2vw,74px);display:grid;box-shadow:inset 0 0 7px #000}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;display:grid}.metric{background:#000812ad;border:1px solid #9eabbe5c;gap:2px;min-width:0;padding:5px 3px;display:grid}.metric strong{font-size:clamp(18px,2.8vw,36px);font-weight:400;line-height:1}.connection-status{color:var(--muted);letter-spacing:.08em;justify-content:center;align-items:center;gap:6px;font-size:9px;display:inline-flex}.connection-status:before{content:"";background:#25de7b;border-radius:50%;width:7px;height:7px;box-shadow:0 0 8px #25de7b}.touch-controls{touch-action:none;grid-template-columns:repeat(5,minmax(42px,1fr));gap:clamp(5px,1vw,12px);width:min(46vw,520px);margin-top:5px;display:grid}.controls-left{justify-self:start}.controls-right{justify-self:end}.control-button{color:#edf8ff;cursor:pointer;text-shadow:0 2px #000;background:linear-gradient(145deg,#ffffff3d,#0000 38%),linear-gradient(#28394e,#0d1827 52%,#1d3047);border:1px solid #9ba9bc;border-radius:5px;place-items:center;gap:0;min-height:clamp(50px,10svh,76px);line-height:1;display:grid;box-shadow:inset 1px 1px #ffffff6e,inset -2px -2px #02060b,0 3px #000}.control-button>span{font-size:clamp(23px,3.5vw,39px)}.control-button small{color:#a9b9ca;letter-spacing:.02em;font-size:clamp(7px,.8vw,10px)}.control-button:active:not(:disabled),.control-button.is-held{background:linear-gradient(#1d92c3,#093650 58%,#106386);border-color:#6be1ff;transform:translateY(2px);box-shadow:inset 2px 2px 5px #00141f,0 1px #000,0 0 14px #39d8ff8c}.control-button:disabled{opacity:.35}.controls-row{grid-template-columns:1fr 1fr;gap:8px;width:min(100%,1280px);margin:0 auto;display:grid}.match-overlay{z-index:20;pointer-events:none;color:#f7f7f8;letter-spacing:-.055em;text-shadow:5px 5px #4f5157,9px 9px #0000008f;place-items:center;font-family:Arial,sans-serif;font-size:clamp(72px,16vw,210px);font-weight:900;display:grid;position:fixed;inset:0}.overlay-fight{animation:1.583s linear both fight-display}.overlay-finish{animation:1.417s linear both finish-display}.result-panel{z-index:18;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000207b8;place-items:center;padding:22px;display:grid;position:fixed;inset:0}.result-card{color:#090b10;text-align:center;background:linear-gradient(145deg,#dbe1ebf7,#5b6270fa);border:1px solid #d9dde5;gap:20px;width:min(92vw,420px);padding:31px;display:grid;box-shadow:inset 3px 3px #ffffffb3,inset -4px -4px #1e2026bf,0 28px 100px #000}.result-card h2{color:#fff;letter-spacing:-.05em;text-shadow:0 3px #555a63,0 6px #262930;margin:0;font-size:clamp(36px,9vw,62px)}.result-card p{margin:0;font-weight:700}.connection-ribbon{z-index:22;top:var(--safe-top);color:#d8e6f4;letter-spacing:.08em;background:#000812d6;border:1px solid #cfdae885;padding:7px 12px;font-size:11px;position:fixed;left:50%;transform:translate(-50%)}.portrait-guard{display:none}@keyframes fight-display{0%,84.21%{opacity:1}to{opacity:0}}@keyframes finish-display{0%,82.35%{opacity:1}to{opacity:0}}@keyframes top-out-pulse{0%{filter:none}to{filter:brightness(1.8)sepia()saturate(5)hue-rotate(320deg)}}@media (max-height:620px){.match-shell{grid-template-rows:minmax(0,1fr) 58px}.board-bevel{width:min(100%,41.6667svh - 36.6667px)}.touch-controls{width:min(46vw,470px)}.control-button{min-height:48px}.control-button small{display:none}}@media (orientation:portrait) and (max-width:900px){.portrait-guard{z-index:100;color:#fff;text-align:center;background:#02060b;place-items:center;padding:28px;display:grid;position:fixed;inset:0}.portrait-guard>div{gap:12px;display:grid}.portrait-phone{border:3px solid #c7d0da;border-radius:8px;width:46px;height:72px;margin:0 auto;animation:1.8s ease-in-out infinite rotate-hint;display:block;transform:rotate(90deg)}}@keyframes rotate-hint{0%,to{transform:rotate(0)}50%{transform:rotate(90deg)}}@media (prefers-reduced-motion:reduce){.portrait-phone,.top-out .board-well{animation:none}}