:root{--bg:#0f1420;--edge:#263049;--fg:#e8ecf5;--muted:#8f9ab3;--surface:#182033;--p1:#7aa2ff;--p2:#55d68f;--red:#ff4a52;--warp:#b49bff;--font-display:"Russo One", "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;--font-body:"Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(ellipse at 50% 0%, #1c2540 0%, var(--bg) 60%) fixed, var(--bg);color:var(--fg);font:14px/1.5 var(--font-body);padding:max(14px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) 28px max(16px, env(safe-area-inset-left,0px))}[hidden]{display:none!important}.wrap{flex-direction:column;gap:10px;max-width:960px;margin:0 auto;display:flex}.panel{display:contents}header{flex-wrap:wrap;order:1;justify-content:space-between;align-items:center;gap:10px;display:flex}.rule{order:2}.bar{order:3}.board{order:4}.controls{order:5}h1{font-family:var(--font-display);letter-spacing:.06em;margin:0;font-size:clamp(22px,4.6vw,30px);font-weight:400;line-height:1.1}.score{flex-wrap:wrap;gap:8px;display:flex}.chip{background:var(--surface);border:2px solid #0000;border-radius:999px;align-items:center;gap:8px;max-width:100%;padding:5px 12px;font-size:13px;font-weight:700;display:flex}.chip .name{text-overflow:ellipsis;white-space:nowrap;max-width:9em;overflow:hidden}.chip.offline .name{opacity:.5}.chip .dot{border-radius:50%;flex:none;width:10px;height:10px}.chip.p1 .dot{background:var(--p1)}.chip.p2 .dot{background:var(--p2)}.chip.p1.on{border-color:var(--p1)}.chip.p2.on{border-color:var(--p2)}.pips{gap:3px;display:flex}.pips i{border:1.5px solid var(--muted);border-radius:2px;width:9px;height:9px;transform:rotate(45deg)}.chip.p1 .pips i.won{background:var(--p1);border-color:var(--p1)}.chip.p2 .pips i.won{background:var(--p2);border-color:var(--p2)}.life{gap:3px;display:flex}.life i{border:2px solid var(--fg);border-radius:50%;width:10px;height:10px}.life i.down{border-color:var(--red);background:var(--red);opacity:.6}.rule{background:var(--surface);border-left:4px solid var(--warp);border-radius:8px;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 14px;display:flex}.rule .rnd{letter-spacing:.12em;color:var(--warp);font-size:13px;font-weight:700}.rule .stars{color:var(--warp);letter-spacing:.1em}.rule .rname{font-family:var(--font-display);letter-spacing:.06em;flex:auto;min-width:0;font-size:18px}.rule button{padding:4px 12px;font-size:12px}.rule button[aria-pressed=true]{background:var(--warp);border-color:var(--warp);color:#fff}.flash{animation:.9s ease-out flash}@keyframes flash{40%{box-shadow:0 0 0 4px var(--warp);transform:skew(-4deg)}to{transform:none}}.bar{align-items:center;gap:10px;min-width:0;display:flex}.mini{letter-spacing:.08em;color:var(--warp);white-space:nowrap;border-radius:6px;padding:0 4px;font-size:12px;font-weight:800;display:none}#menu{display:none}.status{letter-spacing:.06em;flex-wrap:wrap;flex:auto;align-items:center;gap:10px;min-width:0;min-height:1.6em;font-size:clamp(16px,3.6vw,20px);font-weight:800;display:flex}.status .who{color:#fff;border-radius:6px;padding:1px 10px;font-size:13px}.status .who.p1{background:#3561d6}.status .who.p2{background:#1f8f50}.status .mine{color:var(--red)}.board{aspect-ratio:2;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;position:relative}#field{touch-action:none;width:100%;height:100%;box-shadow:0 0 0 1px var(--edge), 0 12px 32px #00000080, 0 0 40px #8c6eff1f;cursor:crosshair;border-radius:6px;display:block;position:absolute;inset:0}.board.shake{animation:.32s cubic-bezier(.36,.07,.19,.97) shake}@keyframes shake{20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,-1px)}}.pop{z-index:3;pointer-events:none;white-space:nowrap;font-family:var(--font-display);letter-spacing:.2em;color:#e1e8f5d9;text-shadow:0 1px 6px #000000e6;font-size:clamp(12px,2.6vw,18px);animation:1.6s ease-out forwards pop;position:absolute;transform:translate(-50%,-150%)}.pop.head{color:#e0202a;letter-spacing:.24em;text-shadow:0 2px 10px #000000f2;font-size:clamp(18px,4.4vw,32px)}@keyframes pop{0%{opacity:0;transform:translate(-50%,-130%)}12%{opacity:1;transform:translate(-50%,-150%)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-165%)}}.stamp{z-index:4;text-align:center;background:#0609109e;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:12px;display:flex;position:absolute;inset:0}.stamp .big{font-family:var(--font-display);color:#e0202a;letter-spacing:.14em;text-shadow:0 4px 24px #000000e6;font-size:clamp(28px,7vw,60px);line-height:1;animation:.7s ease-out both settle}.stamp .sub{color:var(--muted);letter-spacing:.14em;font-size:clamp(13px,2.6vw,18px);font-weight:800}.stamp button{background:var(--fg);color:var(--bg);border-color:var(--fg)}@keyframes settle{0%{opacity:0;letter-spacing:.3em;transform:scale(1.12)}to{opacity:1;transform:none}}.stamp .big.count{color:var(--fg);font-size:clamp(56px,14vw,120px);animation:1s ease-out both tick}@keyframes tick{0%{transform:scale(1.5)}25%{transform:none}}.votes{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.vote{border:2px solid var(--edge);color:var(--muted);letter-spacing:.08em;white-space:nowrap;text-overflow:ellipsis;border-radius:999px;max-width:100%;padding:3px 12px;font-size:13px;font-weight:800;overflow:hidden}.vote.p1.done{border-color:var(--p1);color:var(--p1)}.vote.p2.done{border-color:var(--p2);color:var(--p2)}.stamp button.waiting{background:var(--surface);color:var(--fg)}.modes{flex-direction:column;align-items:center;gap:6px;display:flex}.mode-row{gap:6px;display:flex}.stamp .mode-row button{background:var(--surface);color:var(--muted);border-color:var(--edge);padding:5px 14px;font-size:13px}.stamp .mode-row button.on{background:var(--warp);color:#fff;border-color:var(--warp)}.stamp .mode-row button:disabled{opacity:1;cursor:default}.mode-info{letter-spacing:.1em;color:var(--warp);font-size:12px;font-weight:800}.ask{z-index:5;border:2px solid var(--red);letter-spacing:.06em;background:#060910e6;border-radius:10px;align-items:center;gap:10px;max-width:calc(100% - 16px);padding:6px 8px 6px 14px;font-size:13px;font-weight:800;display:flex;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.ask span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ask button{flex:none;padding:4px 12px;font-size:12px}.timer{z-index:3;pointer-events:none;text-align:center;border:2px solid var(--muted);min-width:2.2em;font-family:var(--font-display);color:var(--fg);background:#060910bf;border-radius:8px;padding:2px 8px;font-size:18px;line-height:1.2;position:absolute;top:8px;left:50%;transform:translate(-50%)}.timer.p1{border-color:var(--p1)}.timer.p2{border-color:var(--p2)}.timer.urgent{color:#ff4a52cc;text-shadow:0 4px 24px #000000e6;background:0 0;border:none;font-size:clamp(60px,14vw,120px);animation:1s ease-out both urgent;top:50%;transform:translate(-50%,-50%)}@keyframes urgent{0%{opacity:1;transform:translate(-50%,-50%)scale(1.4)}to{opacity:.35;transform:translate(-50%,-50%)}}.controls{flex-wrap:wrap;gap:8px;display:flex}button{font:inherit;letter-spacing:.06em;cursor:pointer;border:2px solid var(--fg);background:var(--surface);color:var(--fg);border-radius:8px;padding:8px 18px;font-size:14px;font-weight:800}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--fg);color:var(--bg)}button.danger{border-color:var(--red);color:var(--red)}button:focus-visible{outline:3px solid var(--red);outline-offset:2px}.title{place-items:center;min-height:calc(100vh - 60px);display:grid}.title-card{text-align:center;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:380px;display:flex}.emblem{filter:drop-shadow(0 0 18px #b49bff4d);width:112px;height:112px}.logo{font-family:var(--font-display);white-space:nowrap;letter-spacing:.06em;margin:0;font-size:clamp(34px,10vw,50px);font-weight:400;line-height:1}.tagline{color:var(--muted);letter-spacing:.1em;margin:0 0 12px}.rejoin{flex-direction:column;gap:6px;width:100%;display:flex}.rejoin button{border-color:var(--p2);color:var(--p2);padding:12px;font-size:17px}.rejoin .note{letter-spacing:.08em;color:var(--muted);margin:0;font-size:12px;font-weight:700}.timeout{border:2px solid var(--red);width:100%;color:var(--red);letter-spacing:.08em;border-radius:8px;margin:0;padding:8px 12px;font-size:13px;font-weight:800}#join{text-align:left;flex-direction:column;gap:6px;width:100%;display:flex}#join label{letter-spacing:.12em;color:var(--muted);margin-top:6px;font-size:12px;font-weight:800}#join input{font:inherit;border:2px solid var(--edge);background:var(--surface);width:100%;color:var(--fg);border-radius:8px;padding:11px 12px;font-size:17px}#join input:focus{border-color:var(--red);outline:none}#join button{margin-top:14px;padding:12px;font-size:17px}#join .or{color:var(--muted);letter-spacing:.12em;align-items:center;gap:10px;margin-top:10px;font-size:12px;font-weight:800;display:flex}#join .or:before,#join .or:after{content:"";background:var(--edge);flex:1;height:1px}#join #quick{border-color:var(--warp);color:var(--warp);margin-top:4px}#join #quick.searching{background:var(--warp);color:#fff;animation:1.2s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.65}}.legal{letter-spacing:.1em;color:var(--muted);margin:18px 0 0;font-size:11px;font-weight:700}.legal a{color:var(--muted)}#join .note{letter-spacing:.08em;color:var(--muted);text-align:center;margin:8px 0 0;font-size:12px;font-weight:700}@media (height<=720px) and (height>=521px){body:not(.ingame){padding-top:8px;padding-bottom:8px}.title{min-height:calc(100vh - 16px)}.title-card{gap:4px}.emblem{width:64px;height:64px}.logo{font-size:38px}.tagline{margin-bottom:4px}#join label{margin-top:2px}#join input{padding:7px 12px;font-size:16px}#join button,.rejoin button{margin-top:8px;padding:9px;font-size:16px}#join .or,#join .note{margin-top:4px}.legal{margin-top:8px}body.ingame{padding-top:8px;padding-bottom:8px}body.ingame .wrap{gap:6px}body.ingame .board{width:min(100%,200vh - 380px);margin:0 auto}}.rotate{display:none}@media (orientation:portrait) and (pointer:coarse) and (width<=600px){body.ingame .rotate{z-index:50;background:var(--bg);color:var(--fg);flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:fixed;inset:0}.rotate svg{width:120px;height:120px}.rotate .phone{transform-origin:60px 52px;animation:2s ease-in-out infinite turn}.rotate p{letter-spacing:.2em;margin:0;font-size:22px;font-weight:900}}@keyframes turn{0%,25%{transform:none}60%,to{transform:rotate(90deg)}}@media (orientation:landscape) and (height<=520px){body{padding-block:8px}body.ingame{height:100dvh;padding:max(4px, env(safe-area-inset-top,0px)) max(8px, env(safe-area-inset-right,0px)) max(4px, env(safe-area-inset-bottom,0px)) max(8px, env(safe-area-inset-left,0px));overflow:hidden}body.ingame .wrap{gap:4px;max-width:none;height:100%}.bar{gap:8px;height:30px}.mini{display:inline-block}.status{white-space:nowrap;flex-wrap:nowrap;gap:6px;min-height:0;font-size:13px;overflow:hidden}.status .who{padding:0 7px;font-size:11px}#menu{border-width:1.5px;flex:none;place-items:center;width:38px;height:30px;padding:0;font-size:17px;line-height:1;display:inline-grid;position:relative}#menu.ready:after{content:"";background:var(--warp);width:10px;height:10px;box-shadow:0 0 0 2px var(--bg);border-radius:50%;animation:1.2s ease-in-out infinite pulse;position:absolute;top:-3px;right:-3px}body.menu-open #menu{background:var(--fg);color:var(--bg)}.board{flex:none;width:min(100%,200dvh - 92px);margin:0 auto}.panel{display:none}body.menu-open .panel{z-index:20;top:calc(max(4px, env(safe-area-inset-top,0px)) + 36px);right:max(8px, env(safe-area-inset-right,0px));background:var(--surface);border:1px solid var(--edge);border-radius:10px;flex-direction:column;gap:10px;width:min(380px,100vw - 16px);max-height:calc(100dvh - 50px);padding:12px;display:flex;position:fixed;overflow:auto;box-shadow:0 16px 40px #0009}body.menu-open header{flex-direction:column;align-items:flex-start;gap:6px}body.menu-open h1{font-size:16px}body.menu-open .score{flex-direction:column;gap:4px}body.menu-open .rule{background:var(--bg)}.controls button{padding:6px 12px;font-size:12px}.title{min-height:calc(100dvh - 16px)}.title-card{flex-flow:wrap;justify-content:center;max-width:640px}.emblem{width:64px;height:64px}.tagline{flex-basis:100%;margin:0}#join{max-width:360px}}@media (prefers-reduced-motion:reduce){.rotate .phone,#menu.ready:after,.stamp .big,.flash,.pop,.board.shake,.timer.urgent{animation:none}}