:root{font-family:Hiragino Kaku Gothic ProN,Noto Sans JP,system-ui,sans-serif;line-height:1.6;color-scheme:light dark;color:#e6e6e6;background-color:#16181d}*{box-sizing:border-box}body{margin:0;min-height:100vh}h1{font-size:1.8rem;margin:0 0 .25rem}h2{font-size:1.1rem;margin:0 0 .75rem}button{font:inherit;padding:.5rem 1.25rem;border-radius:8px;border:1px solid #3a3f4b;background-color:#262a33;color:inherit;cursor:pointer}button:hover:not(:disabled){background-color:#313644}button:disabled{opacity:.45;cursor:default}input{font:inherit;padding:.5rem .75rem;border-radius:8px;border:1px solid #3a3f4b;background-color:#1d2027;color:inherit}.home{max-width:760px;margin:0 auto;padding:2rem 1rem;display:flex;flex-direction:column;gap:1.25rem}.room{max-width:640px;margin:0 auto;padding:2rem 1rem;display:flex;flex-direction:column;gap:1.25rem}.sub{color:#9aa1ad;margin:0;font-size:.9rem}.portal-header{padding:1rem 0 .25rem}.portal-header h1{font-size:clamp(2rem,8vw,3.25rem);line-height:1.1;letter-spacing:-.04em}.eyebrow{margin:0 0 .25rem;color:#80a8ff;font-size:.72rem;font-weight:800;letter-spacing:.15em}.name-field{border:1px solid #343b49;border-radius:12px;padding:1rem 1.25rem;background:linear-gradient(135deg,#20252f,#1a1d24);font-weight:700}.name-field span{color:#8f97a5;font-size:.75rem;font-weight:400}.portal-section{display:flex;flex-direction:column;gap:.75rem}.section-title{display:flex;align-items:end;justify-content:space-between}.section-title h2{margin:0}.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.75rem}.game-card{min-height:190px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;align-items:center;gap:1rem;padding:1.25rem;border:1px solid #3a4558;border-radius:16px;background:radial-gradient(circle at 100% 0%,rgba(62,99,221,.25),transparent 45%),#1b1e25}.game-card h3{margin:0;font-size:1.35rem}.game-card p{margin:.15rem 0 0;color:#aab1bd}.game-card button{grid-column:1 / -1;width:100%;border-color:#4d6ed8;background-color:#2949ae}.game-card button:hover:not(:disabled),button.primary:hover:not(:disabled){background-color:#3458c9}.game-mark{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:14px;background:linear-gradient(135deg,#6d8fff,#3453ba);color:#fff;font-size:1.35rem;font-weight:900;box-shadow:0 10px 24px #2143ad47}.lobby-callout{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem;border:1px solid #31563f;border-radius:16px;background:radial-gradient(circle at 0% 100%,rgba(48,164,108,.2),transparent 45%),#19221d}.lobby-callout h2{margin:.65rem 0 0}.waiting-badge{display:inline-flex;padding:.2rem .65rem;border:1px solid #367b55;border-radius:999px;background-color:#1d3d2a;color:#91e6b3;font-size:.75rem;font-weight:700}button.primary{border-color:#4d6ed8;background-color:#2949ae;white-space:nowrap}.direct-entry{opacity:.9}.direct-entry h2{color:#b2b7c0;font-size:.95rem}.direct-entry input,.invite-entry input{flex:1 1 12rem}.panel.invite-entry{border-color:#3a4558;background:radial-gradient(circle at 0% 0%,rgba(62,99,221,.22),transparent 45%),#1b1e25}.invite-entry h2{margin:0 0 .75rem;font-size:1.05rem}.list-header{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:1rem;padding-top:.5rem}.list-header h1{line-height:1.25}.back-button{margin-top:.15rem}.room-list{display:flex;flex-direction:column;gap:.65rem}.lobby-room-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;border-color:#353d4c;border-radius:12px;background-color:#1b1e25;text-align:left}.lobby-room-row:hover:not(:disabled){border-color:#526dca;background-color:#202634}.lobby-room-main,.lobby-room-meta{display:flex;align-items:center;gap:.75rem}.lobby-room-main{min-width:0;flex-direction:column;align-items:flex-start;gap:.1rem}.lobby-room-main strong{overflow-wrap:anywhere}.lobby-room-main span{color:#9da5b2;font-size:.82rem}.lobby-room-meta{flex:0 0 auto;color:#b4bac4}.lobby-room-meta code{padding:.15rem .5rem;border:1px solid #414a5a;border-radius:6px;color:#dbe3ff;font-size:.85rem;letter-spacing:.08em}.empty-state{display:grid;place-items:center;min-height:210px;text-align:center}.empty-state p{margin:0 0 1rem}.panel{border:1px solid #2c313c;border-radius:12px;padding:1.25rem;background-color:#1b1e25}.row{display:flex;gap:.75rem;flex-wrap:wrap}.field{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem}.create-room{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.75rem}.create-room select{width:100%;font:inherit;padding:.5rem .75rem;border-radius:8px;border:1px solid #3a3f4b;background-color:#1d2027;color:inherit}.error{color:#ff8a8a}.toast{position:fixed;z-index:20;bottom:1.5rem;left:50%;transform:translate(-50%);background-color:#4a2328;border:1px solid #7a3a42;border-radius:8px;padding:.5rem 1rem;margin:0}.room-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}.room-header>div{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.room-code{font-weight:700;letter-spacing:.08em}.invite-qr{forced-color-adjust:none;align-self:center;width:min(100%,15rem);display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;border:1px solid #3a3f4b;border-radius:12px;background-color:#fff}.invite-qr-code{display:block;width:100%;max-width:100%;height:auto}.invite-qr-url{margin:0;max-width:100%;color:#1b1e25;font-size:.7rem;text-align:center;overflow-wrap:anywhere}.room.is-compact{gap:.75rem}.room-chrome{position:relative}.room-bar{display:flex;align-items:center;gap:.5rem;min-height:2rem}.room-bar-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b2b7c0;font-size:.85rem;font-weight:700}.room-bar .menu-button{flex:0 0 auto;padding:.2rem .6rem;line-height:1.2}.conn-compact{display:inline-flex;align-items:center;gap:.35rem;flex:0 1 auto;min-width:0;font-size:.75rem}.conn-compact:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.conn-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conn-dot{width:9px;height:9px;border-radius:50%;background-color:#6b7280}.conn-compact.tone-ok .conn-dot{background-color:#30a46c}.conn-compact.tone-warn{color:#ffcf8a}.conn-compact.tone-warn .conn-dot{background-color:#f5a623}.room-menu{position:absolute;z-index:5;top:calc(100% + .35rem);right:0;left:0;display:flex;flex-direction:column;gap:.5rem;max-height:min(70vh,24rem);overflow-y:auto;padding:.6rem .75rem;border:1px solid #3a3f4b;border-radius:10px;background-color:#22262f;box-shadow:0 12px 28px #00000073}.room-menu-row{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.room-menu-actions{justify-content:flex-end}.room-menu .room-code{margin-right:auto;font-size:.85rem}.room-menu .player-groups{margin-bottom:0}.room-menu .group-heading{margin:0;font-size:.8rem}.room-menu .players{gap:.25rem}.room-menu .players li{padding:.25rem .4rem;font-size:.85rem}.room-menu .invite-qr{width:min(100%,12.5rem);padding:.5rem}button.small{padding:.3rem .75rem;font-size:.85rem}.badge{font-size:.75rem;padding:.15rem .5rem;border-radius:999px;background-color:#262a33;border:1px solid #3a3f4b}.badge.warn{background-color:#4a3a1d;border-color:#7a6230}.badge.ok{background-color:#1d3d2a;border-color:#2f6a48}.players{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:.4rem}.players li{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.35rem .5rem;border-radius:8px}.players li.is-me{background-color:#252c3a;outline:1px solid #3e63dd}.players li.is-dropped .player-name{text-decoration:line-through;color:#9aa1ad}.player-name{margin-right:auto}.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot.on{background-color:#30a46c}.dot.off{background-color:#6b7280}.count{font-size:3.5rem;font-weight:700;text-align:center;margin:.5rem 0}.lobby-capacity{margin:0 0 .75rem}.lobby-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem}.lobby-options{margin:0 0 .75rem}.lobby-option{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;color:#c8ccd4;cursor:pointer}.lobby-option.is-disabled{opacity:.5;cursor:not-allowed}.lobby-option-group{border:0;padding:0;margin:0;min-width:0}.lobby-option-group>legend{padding:0;font-size:.9rem;color:#c8ccd4}.lobby-option-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:.25rem 0}.section-heading{font-size:.9rem;margin:1rem 0 .5rem;color:#c8ccd4}.turn-order{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0;list-style:none;counter-reset:turn-player}.turn-order li{counter-increment:turn-player;display:flex;align-items:center;gap:.4rem;padding:.35rem .65rem;border:1px solid #3a3f4b;border-radius:8px;background-color:#20232b}.turn-order li:before{content:counter(turn-player);display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background-color:#303541;font-size:.75rem}.turn-order li.is-current{border-color:#30a46c;background-color:#1d3d2a}.turn-order li.is-me{box-shadow:inset 0 0 0 1px #3e63dd}.turn-order li.is-dropped{text-decoration:line-through;color:#7d8490}.turn-message{text-align:center}.turn-message.is-mine{color:#80d9a4;font-weight:700}.game-actions{justify-content:center}.game-actions button{min-width:4rem}.finished{margin-top:1rem;text-align:center}.result{font-size:1.4rem;font-weight:700;margin:0}.finished-actions{display:flex;justify-content:center;margin:.75rem 0 .35rem}.scoreboard{margin-top:1rem;text-align:left}.score-list{list-style:none;padding:0;margin:0 0 .5rem;display:flex;flex-direction:column;gap:.3rem}.score-list li{display:flex;align-items:center;gap:.5rem;padding:.3rem .5rem;border-radius:8px;background-color:#20232b}.score-list li.is-me{outline:1px solid #3e63dd}.score-name{margin-right:auto;overflow-wrap:anywhere}.score-wins{font-weight:700;font-variant-numeric:tabular-nums}.connect4-board{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;width:100%;margin:.75rem 0;padding:.3rem;border:1px solid #3a4558;border-radius:14px;background:linear-gradient(160deg,#1f2738,#171c26)}.connect4-column{display:flex;flex-direction:column;gap:.25rem;min-width:0;padding:.2rem;border:1px solid transparent;border-radius:10px;background-color:transparent;touch-action:manipulation}.connect4-column:disabled{opacity:1}.connect4-column:enabled:hover{border-color:#526dca;background-color:#3e63dd1f}.connect4-cell{display:block;width:100%;aspect-ratio:1 / 1;border-radius:50%;box-shadow:inset 0 1px 3px #00000073}.connect4-cell.is-empty{background-color:#10141c}.connect4-cell.is-stone{background-color:var(--stone-color, #6b7280);background-image:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--stone-color) 45%,#ffffff),var(--stone-color) 60%,color-mix(in srgb,var(--stone-color) 70%,#000000))}.connect4-cell.is-last{box-shadow:inset 0 1px 3px #00000073,0 0 0 2px #f5f7ff}.connect4-cell.is-winning{box-shadow:inset 0 1px 3px #00000073,0 0 0 3px #ffd66b,0 0 14px #ffd66b8c}.hh-board{--hh-piece-size: 2.3rem;position:relative;width:100%;max-width:26rem;aspect-ratio:13 / 8;margin:.75rem auto;padding:0;border:1px solid #2b4257;border-radius:14px;background-color:#0e1526;overflow:hidden;touch-action:manipulation}.hh-scene,.hh-edges,.hh-pieces{position:absolute;inset:0;width:100%;height:100%}.hh-star{fill:#dbe7f7;animation:hh-twinkle 5s ease-in-out infinite}.hh-edge-halo{stroke:#7fa8d9;stroke-width:9;stroke-opacity:.14;stroke-linecap:round}.hh-edge{stroke:#a8c8ea;stroke-width:2.6;stroke-opacity:.45;stroke-linecap:round}.hh-edge-halo.is-last{stroke:#ffd66b;stroke-opacity:.28}.hh-edge.is-last{stroke:#ffd66b;stroke-width:4;stroke-opacity:.95}.hh-trail-flare{stroke:#fff4d2;stroke-width:5;stroke-linecap:round;stroke-opacity:0;animation:hh-flare .7s ease-out}.hh-node{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:50%;background-color:transparent;touch-action:manipulation}.hh-node:disabled{opacity:1}.hh-node:focus-visible{outline:2px solid #cfe0f5;outline-offset:-1px}.hh-node:before,.hh-node:after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;border-radius:50%;pointer-events:none}.hh-dot{width:.9rem;height:.9rem;border-radius:50%;background-color:#0e15268c;box-shadow:inset 0 0 0 1px #a8c8ea8c}.hh-node.is-occupied .hh-dot{opacity:0}.hh-node:enabled:hover{background-color:#7fa8d91f}.hh-node:enabled:hover .hh-dot{background-color:#7fa8d959}.hh-node.is-target .hh-dot{width:1.5rem;height:1.5rem;background-color:#3fd18a38;box-shadow:0 0 0 2px #3fd18a,0 0 0 5px #3fd18a29}.hh-node.is-target:after{width:1.5rem;height:1.5rem;box-shadow:0 0 0 2px #3fd18acc;animation:hh-ripple 1.8s ease-out infinite}.hh-node.is-last:before{width:2.6rem;height:2.6rem;box-shadow:0 0 0 2px #ffd66b,0 0 0 5px #ffd66b29}.hh-node.is-selected:after{width:2.7rem;height:2.7rem;box-shadow:0 0 0 3px #f5f7ff,0 0 0 6px #f5f7ff2e;animation:hh-selected-ring 1.4s ease-in-out infinite}.hh-pieces{pointer-events:none}.hh-piece{position:absolute;width:var(--hh-piece-size);height:var(--hh-piece-size);margin:calc(var(--hh-piece-size) / -2) 0 0 calc(var(--hh-piece-size) / -2);transition:left .38s cubic-bezier(.33,.9,.36,1),top .38s cubic-bezier(.33,.9,.36,1)}.hh-figure{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}.hh-pieces.is-my-turn .hh-piece.is-mine:not(.is-selected) .hh-figure{animation:hh-breathe 2.6s ease-in-out var(--hh-idle-delay, 0s) infinite}.hh-piece.is-selected .hh-figure{animation:hh-piece-pulse 1.4s ease-in-out infinite}.hh-piece.is-winner .hh-figure{animation:hh-winner 1.9s ease-in-out infinite}.hh-spark{fill:#ffeab8;opacity:0;transform-box:fill-box;transform-origin:center}.hh-board.is-finished .hh-spark{animation:hh-spark 2.4s ease-in-out infinite}@keyframes hh-twinkle{0%,to{opacity:.25}50%{opacity:.9}}@keyframes hh-flare{0%{stroke-dashoffset:var(--hh-flare-from, 0);stroke-opacity:0}15%{stroke-opacity:.95}to{stroke-dashoffset:var(--hh-flare-to, 0);stroke-opacity:0}}@keyframes hh-ripple{0%{transform:scale(1);opacity:.85}70%{opacity:0}to{transform:scale(2.1);opacity:0}}@keyframes hh-selected-ring{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.7}}@keyframes hh-breathe{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes hh-piece-pulse{0%,to{transform:scale(1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}50%{transform:scale(1.08);filter:drop-shadow(0 0 6px rgba(245,247,255,.45))}}@keyframes hh-winner{0%,to{transform:translateY(0) scale(1);filter:drop-shadow(0 0 4px rgba(255,214,107,.5))}50%{transform:translateY(-3px) scale(1.06);filter:drop-shadow(0 0 12px rgba(255,214,107,.85))}}@keyframes hh-spark{0%,to{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.hh-piece{transition:none}.hh-star,.hh-node.is-target:after,.hh-node.is-selected:after,.hh-pieces.is-my-turn .hh-piece.is-mine:not(.is-selected) .hh-figure,.hh-piece.is-selected .hh-figure,.hh-piece.is-winner .hh-figure,.hh-board.is-finished .hh-spark{animation:none}.hh-trail-flare{display:none}.hh-board.is-finished .hh-spark{opacity:.85}.hh-piece.is-winner .hh-figure{filter:drop-shadow(0 0 8px rgba(255,214,107,.75))}}.hh-role{margin:.25rem 0 0;font-size:.9rem;color:#c9d1e1}.hh-stall{margin:.25rem 0;font-size:.9rem;font-variant-numeric:tabular-nums;color:#ffd66b}.hh-note{margin-left:.35rem;font-size:.8rem;color:#98a2b8}.speed-table{display:flex;flex-direction:column;gap:.5rem;width:100%;margin:.75rem 0;padding:.5rem;border:1px solid #3a4558;border-radius:14px;background:linear-gradient(160deg,#1f2738,#171c26)}.speed-side{display:flex;flex-direction:column;gap:.3rem}.speed-hand{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem}.speed-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;min-width:0}.speed-slot{display:block;width:100%;padding:0;border:2px solid transparent;border-radius:10px;background-color:transparent;touch-action:pan-y pinch-zoom}.speed-slot:disabled{opacity:1}.speed-slot:enabled:hover{border-color:#526dca;background-color:transparent}.speed-slot.is-playable{border-color:#30a46c}@keyframes speed-hint{0%,to{border-color:#30a46c;box-shadow:none}50%{border-color:#6ee7a8;box-shadow:0 0 0 3px #30a46c59}}.speed-slot.is-playable.is-hint:not(.is-selected){animation:speed-hint 1.2s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.speed-slot.is-playable.is-hint:not(.is-selected){animation:none;border-color:#6ee7a8;box-shadow:0 0 0 3px #30a46c59}}.speed-slot.is-selected{border-color:#f5f7ff;box-shadow:0 0 0 2px #f5f7ff59}.speed-card{display:grid;place-items:center;align-content:center;width:100%;aspect-ratio:5 / 7;border-radius:7px;background-color:#f4f6fb;box-shadow:0 1px 3px #00000080;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}.speed-card.is-red{color:#c62828}.speed-card.is-black{color:#16181d}.speed-card.is-back{background:repeating-linear-gradient(45deg,#2b3a6b,#2b3a6b 4px,#222c52 4px 8px);box-shadow:inset 0 0 0 1px #4a5a92,0 1px 3px #00000080}.speed-card.is-empty{background-color:#ffffff0a;box-shadow:inset 0 0 0 1px #3a4558}.speed-card-rank{font-size:clamp(.95rem,4.4vw,1.35rem)}.speed-card-suit{font-size:clamp(.8rem,3.6vw,1.1rem)}.speed-card.is-large .speed-card-rank{font-size:clamp(1.4rem,7vw,2.1rem)}.speed-card.is-large .speed-card-suit{font-size:clamp(1.1rem,5vw,1.6rem)}.speed-pile{position:relative;display:grid;place-items:center;width:3rem}.speed-pile-count{position:absolute;right:-.2rem;bottom:-.2rem;min-width:1.35rem;padding:0 .25rem;border-radius:999px;background-color:#16181d;box-shadow:inset 0 0 0 1px #4a5a92;color:#cddaff;font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:center}.speed-center{position:relative;display:flex;justify-content:center;gap:.9rem;padding:.2rem 0}.speed-center-pile{position:relative;width:4.5rem;padding:0;border:2px solid transparent;border-radius:12px;background-color:transparent;touch-action:manipulation}.speed-center-pile:disabled{opacity:1}.speed-center-pile:enabled:hover{border-color:#ffe6a6;background-color:transparent}.speed-center-pile.is-target{border-color:#ffd66b;box-shadow:0 0 12px #ffd66b73}.speed-countdown{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#ffd66b;font-size:clamp(2.5rem,14vw,3.5rem);font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.75);pointer-events:none}.speed-stuck{display:flex;align-items:center;gap:.5rem;margin:.35rem 0 0;color:#ffd66b;font-size:.8rem}.speed-stuck-bar{flex:1 1 4rem;height:.35rem;border-radius:999px;background-color:#ffd66b2e;overflow:hidden}.speed-stuck-bar>span{display:block;height:100%;border-radius:999px;background-color:#ffd66b;transition:width .1s linear}.speed-side-head{display:flex;align-items:center;gap:.35rem;margin:0;color:#c9d1e1;font-size:.8rem}.speed-color.is-red{color:#ff8b8b}.speed-color.is-black{color:#aab6d4}.speed-remain{margin-left:auto;color:#98a2b8;font-variant-numeric:tabular-nums}.speed-flash{margin:.35rem 0 0;color:#ffb4b4;font-size:.8rem;text-align:center}@keyframes speed-nudge{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.speed-card.is-nudge{animation:speed-nudge .24s ease-in-out}@media(prefers-reduced-motion:reduce){.speed-card.is-nudge{animation:none}}.royale-panel{padding-block:.75rem}.royale-panel h2{margin-bottom:.35rem;font-size:.95rem}.royale-hud{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 0 .25rem;font-size:.9rem;font-variant-numeric:tabular-nums}.royale-clock{font-size:1.1rem;font-weight:700}.royale-crowns{display:inline-flex;align-items:center;gap:.35rem;color:#98a2b8}.royale-crown{min-width:1.5rem;padding:0 .3rem;border-radius:6px;background-color:#ffffff0f;font-weight:700;text-align:center}.royale-crown.is-mine{color:#9db8ff}.royale-crown.is-theirs{color:#ffb4b4}.royale-sudden{padding:.1rem .4rem;border-radius:999px;background-color:#ff5b5b40;box-shadow:inset 0 0 0 1px #ff5b5b;color:#ffc9c9;font-size:.75rem;font-weight:800;letter-spacing:.04em}.royale-double{padding:.1rem .4rem;border-radius:999px;background-color:#a86cff38;box-shadow:inset 0 0 0 1px #a86cff;color:#d9bcff;font-size:.75rem;font-weight:700}.royale-stage{position:relative;width:min(100%,31.5dvh);aspect-ratio:18 / 32;margin:0 auto;border-radius:12px;background-color:#16181d;overflow:hidden}.royale-canvas{display:block;width:100%;height:100%;touch-action:pan-y}@supports (height: 100dvh){body:has(.room.is-compact .royale-panel){min-height:100dvh;overflow:hidden}.room.is-compact:has(.royale-panel){height:100dvh;overflow-y:auto}.room.is-compact:has(.royale-panel) .royale-panel{display:flex;flex-direction:column;flex:1 1 auto}.room.is-compact:has(.royale-panel) .royale-stage{flex:1 1 auto;min-height:min(45dvh,18rem);align-self:center;width:auto;max-width:100%}.room.is-compact:has(.royale-panel) .royale-canvas{position:absolute;inset:0;touch-action:none}}.royale-loading{position:absolute;top:.4rem;left:50%;transform:translate(-50%);margin:0;padding:.15rem .5rem;border-radius:999px;background-color:#16181dbf;color:#cddaff;font-size:.75rem;pointer-events:none}.royale-outdated{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:1rem;background-color:#0c0e12e0;color:#f5f7ff;font-size:.95rem;font-weight:700;line-height:1.6;text-align:center;pointer-events:none}.royale-countdown{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#f5f7ff;font-size:clamp(2.5rem,14vw,4rem);font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.8);pointer-events:none}.royale-tray{display:flex;flex-direction:column;gap:.3rem;margin:.4rem 0 0}.royale-elixir{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem}.royale-elixir-bar{display:block;height:.7rem;border-radius:999px;background-color:#ffffff14;box-shadow:inset 0 0 0 1px #3a4558;overflow:hidden}.royale-elixir-bar>span{display:block;height:100%;background:linear-gradient(90deg,#b06cff,#e05bd8);transition:width .1s linear}.royale-elixir-bar.is-double>span{background:linear-gradient(90deg,#ffb45b,#ff6bd6)}.royale-elixir-bar.is-triple>span{background:linear-gradient(90deg,#ff6b6b,#ffd166)}.royale-elixir-count{min-width:1.5rem;color:#d9bcff;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}.royale-hand{display:flex;align-items:stretch;gap:.3rem}.royale-cards{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;flex:1 1 auto;gap:.3rem;min-width:0}.royale-next{position:relative;display:block;flex:0 0 auto;width:12%;max-width:2.4rem;margin:0;border:2px dashed #3a4558;border-radius:10px;background-color:#ffffff08;overflow:hidden}.royale-next-art{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 15%;filter:grayscale(.7);opacity:.55}.royale-next-label{position:absolute;inset-inline:0;bottom:0;background-color:#16181de0;color:#9fb0cc;font-size:.6rem;font-weight:700;line-height:1.4;text-align:center}.royale-card{position:relative;display:block;min-height:2.75rem;padding:0;border:2px solid #3a4558;border-radius:10px;background-color:#ffffff0a;touch-action:none;overflow:hidden}.royale-card:disabled{opacity:1}.royale-card-art{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 15%;pointer-events:none}.royale-card-cost{position:absolute;inset-inline:0;bottom:0;background-color:#16181de0;box-shadow:inset 0 1px #a86cff;color:#e4d2ff;font-size:.8rem;font-weight:800;line-height:1.35;text-align:center}.royale-card.is-short{opacity:.45}.royale-card.is-selected{border-color:#f5f7ff;box-shadow:0 0 0 2px #f5f7ff59}.royale-card.is-dragging{border-color:#5fe08a;opacity:.6}.royale-drag-preview{position:fixed;z-index:30;top:0;left:0;width:64px;height:64px;border:2px solid #5fe08a;border-radius:10px;object-fit:cover;object-position:50% 15%;opacity:.85;box-shadow:0 6px 16px #00000080;visibility:hidden;pointer-events:none;will-change:transform}.royale-notice{position:relative;min-height:2.7em;margin:.4rem 0 0;font-size:.85rem}.royale-panel .turn-message{margin:0;font-size:1em;line-height:1.35}.royale-panel .finished-actions{scroll-margin:.75rem 0}.royale-flash{position:absolute;inset:0;display:grid;place-items:center;margin:0;background-color:#1b1e25;color:#ffb4b4;font-size:.95em;line-height:1.35;text-align:center}@keyframes royale-nudge-odd{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes royale-nudge-even{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.royale-tray.is-nudge-odd{animation:royale-nudge-odd .24s ease-in-out}.royale-tray.is-nudge-even{animation:royale-nudge-even .24s ease-in-out}@media(prefers-reduced-motion:reduce){.royale-tray.is-nudge-odd,.royale-tray.is-nudge-even{animation:none}.royale-elixir-bar>span{transition:none}}.player-chip{display:inline-block;width:.85rem;height:.85rem;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px #ffffff40}.arena{position:relative;width:100%;aspect-ratio:16 / 10;border:1px solid #3a3f4b;border-radius:12px;background-color:#14161b;overflow:hidden;touch-action:none;cursor:crosshair}.cursor{position:absolute;top:-8px;left:-8px;width:16px;height:16px;border-radius:50%;pointer-events:none;will-change:transform}.cursor.remote{opacity:.85;box-shadow:0 0 10px #ffffff40}.player-groups{margin-bottom:1rem}.player-groups .players{margin-bottom:0}.group-heading{margin:.5rem 0 .35rem}.player-groups>.group-heading:first-child{margin-top:0}.spectator-badge{position:fixed;z-index:4;left:.75rem;bottom:.75rem;margin:0;padding:.3rem .7rem;border:1px solid #526dca;border-radius:999px;background-color:#1e2842eb;color:#cddaff;font-size:.78rem;font-weight:700;pointer-events:none}.env-badge{position:fixed;z-index:100;right:.75rem;bottom:.75rem;padding:.1rem .45rem;border-radius:5px;background-color:#f5a623e6;color:#1a1206;font-size:.7rem;font-weight:800;letter-spacing:.08em;pointer-events:none}.lobby-room-status{font-weight:700}.lobby-room-main .lobby-room-status.is-open{color:#7fd8a4}.lobby-room-main .lobby-room-status.is-full{color:#ffcf8a}.lobby-room-main .lobby-room-status.is-playing{color:#9db8ff}.lobby-room-main .lobby-room-status.is-closed{color:#ffa9a9}.blokus-panel{--blokus-mini-cell: 6px}.blokus-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem;padding:0;margin:0;list-style:none}.blokus-players li{display:flex;flex-direction:column;min-width:0;border:1px solid #3a3f4b;border-radius:8px;background-color:#20232b;font-size:.78rem}.blokus-players li.is-open{grid-column:1 / -1}.blokus-player-row{display:flex;align-items:center;gap:.35rem;min-width:0;width:100%;padding:.2rem .45rem;border:0;border-radius:8px;background-color:transparent;color:inherit;font-size:inherit;text-align:left;touch-action:manipulation}.blokus-players li>.blokus-player-row:hover:not(:disabled){background-color:#ffffff0f}.blokus-player-caret{flex:none;color:#9aa1ad;font-size:.62rem}.blokus-remaining{--blokus-mini-cell: 4px;display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:0 .45rem .35rem}.blokus-remaining-piece{display:grid;place-items:center;padding:1px;border-radius:3px;background-color:#171a21}.blokus-players li.is-current{border-color:#30a46c;background-color:#1d3d2a}.blokus-players li.is-me{box-shadow:inset 0 0 0 1px #3e63dd}.blokus-players li.is-retired{color:#7d8490}.blokus-swatch{flex:none;width:.8rem;height:.8rem;border-radius:3px;box-shadow:inset 0 0 0 1px #00000059}.blokus-player-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.blokus-player-cells{flex:none;margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}.blokus-board-frame{width:100%;max-width:min(100%,32rem);margin:.5rem auto;padding:3px;border:1px solid #3a4558;border-radius:10px;background:linear-gradient(160deg,#1f2738,#171c26)}.blokus-board{position:relative;display:grid;grid-template-columns:repeat(20,1fr);grid-template-rows:repeat(20,1fr);width:100%;aspect-ratio:1 / 1;border-radius:6px;background-color:#10141c;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}.blokus-board.is-placing{touch-action:none}.blokus-board:focus-visible{outline:2px solid #80a8ff;outline-offset:2px}.blokus-cell{position:relative;box-shadow:inset 0 0 0 1px #ffffff0d}.blokus-cell.is-filled{background-image:linear-gradient(160deg,#ffffff4d,#00000047);box-shadow:inset 0 0 0 1px #0006}.blokus-start{position:absolute;inset:0;border-radius:2px;opacity:.26}.blokus-anchor{position:absolute;top:50%;left:50%;width:36%;height:auto;aspect-ratio:1 / 1;transform:translate(-50%,-50%);border-radius:50%;opacity:.7}.blokus-ghost{position:absolute;inset:0;pointer-events:none}.blokus-ghost-cell{position:absolute;width:5%;height:5%;border-radius:2px;opacity:.85;box-shadow:inset 0 0 0 2px #4ade80,0 0 6px #4ade8080}.blokus-ghost.is-illegal .blokus-ghost-cell{opacity:.55;box-shadow:inset 0 0 0 2px #ff6b6b,0 0 6px #ff6b6b73}.blokus-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}.blokus-controls button{min-width:4.5rem;min-height:2.5rem;touch-action:manipulation}.blokus-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;margin-top:.4rem;padding:.2rem .1rem .4rem}.blokus-piece{flex:none;display:grid;place-items:center;min-width:2.75rem;min-height:2.75rem;padding:.25rem;border-radius:8px;background-color:#20232b;touch-action:manipulation}.blokus-piece.is-selected{border-color:#f5f7ff;background-color:#2b3346;box-shadow:0 0 0 1px #f5f7ff}.blokus-mini{display:grid;gap:1px}.blokus-mini-cell{width:var(--blokus-mini-cell);height:var(--blokus-mini-cell);border-radius:1px}.blokus-note{margin-top:.4rem;text-align:center}.blokus-ranking ol{display:flex;flex-direction:column;gap:.3rem;padding:0;margin:0;list-style:none}.blokus-ranking li{display:flex;align-items:center;gap:.4rem;padding:.35rem .5rem;border-radius:8px;background-color:#20232b;font-size:.85rem}.blokus-ranking li.is-me{outline:1px solid #3e63dd}.blokus-rank{flex:none;font-weight:700}.blokus-ranking .blokus-player-name{margin-right:auto}.blokus-breakdown{color:#9aa1ad;font-size:.75rem;white-space:nowrap}.blokus-score{flex:none;min-width:2.5rem;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}.diamond-board{position:relative;width:100%;max-width:30rem;aspect-ratio:540 / 620;margin:.75rem auto;border:1px solid #3a4558;border-radius:14px;background:radial-gradient(circle at 50% 45%,#1a2233,#10141c 78%);overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none}.diamond-star{position:absolute;inset:0;width:100%;height:100%}.diamond-star-plate{fill:#7e9cd812;stroke:#7e9cd842;stroke-width:2;stroke-linejoin:round}.diamond-cell{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:7.4%;aspect-ratio:1;padding:0;border:0;border-radius:50%;background-color:transparent;touch-action:manipulation}.diamond-cell:disabled{opacity:1}.diamond-cell:focus-visible{outline:2px solid #cfe0f5;outline-offset:-2px}.diamond-cell:enabled:hover{background-color:#7fa8d924}.diamond-dot{width:34%;aspect-ratio:1;border-radius:50%;background-color:#0e152699;box-shadow:inset 0 0 0 1px #a8c8ea66}.diamond-piece{width:82%;aspect-ratio:1;border-radius:50%;background-image:linear-gradient(160deg,#ffffff59,#0000004d);box-shadow:inset 0 0 0 1.5px #ffffff73,0 1px 3px #0000008c}.diamond-cell.is-target .diamond-dot{width:55%;background-color:#3fd18a40;box-shadow:0 0 0 2px #3fd18a,0 0 0 5px #3fd18a2e}.diamond-cell.is-selected .diamond-piece{box-shadow:inset 0 0 0 1.5px #ffffff73,0 0 0 2.5px #f5f7ff,0 0 0 6px #f5f7ff33}.diamond-cell.is-last:after{content:"";position:absolute;inset:6%;border-radius:50%;box-shadow:0 0 0 2px #ffd66bbf;pointer-events:none}.diamond-standings li{max-width:100%}.diamond-standing-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.diamond-standings .badge{flex:none}.diamond-progress{flex:none;font-weight:700;font-variant-numeric:tabular-nums}.diamond-note{margin-top:.4rem;text-align:center}.water-sort-board{position:relative}.water-sort-tubes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;max-width:22rem;margin:.75rem auto 0}.water-sort-tube{position:relative;display:flex;aspect-ratio:1 / 2.2;padding:0;overflow:hidden;border:2px solid #46536b;border-top-color:#8397b8;border-radius:4px 4px 50% 50%/4px 4px 23% 23%;background-color:#0a0e16bf;touch-action:manipulation;transform-origin:50% 74%;transition:transform .28s ease}.water-sort-tube:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background-image:linear-gradient(#e2eeffb3,#e2eeff0d);pointer-events:none}.water-sort-tube:after{content:"";position:absolute;top:4%;bottom:6%;left:15%;width:15%;border-radius:999px;background-image:linear-gradient(#fff6,#ffffff1f 55%,#ffffff05);pointer-events:none}.water-sort-tube:disabled{opacity:1}.water-sort-tube:enabled:hover{background-color:#7fa8d924}.water-sort-tube:focus-visible{outline:2px solid #cfe0f5;outline-offset:2px}.water-sort-tube.is-selected{border-color:#f5f7ff;box-shadow:0 0 0 3px #f5f7ff40}.water-sort-tube.is-target{border-color:#3fd18a;box-shadow:0 0 0 3px #3fd18a38}.water-sort-tube.is-pouring{z-index:2;transition:transform .22s ease-out}.water-sort-tube.is-pouring-right{transform:translateY(-7%) rotate(20deg)}.water-sort-tube.is-pouring-left{transform:translateY(-7%) rotate(-20deg)}.water-sort-tube.is-receiving:not(.is-selected){border-color:#6ff0b3;box-shadow:0 0 0 3px #3fd18a59,0 0 14px #3fd18a73}.water-sort-liquid{position:relative;display:flex;flex-direction:column-reverse;width:100%;height:100%}.water-sort-liquid:after{content:"";position:absolute;left:0;right:0;bottom:var(--ws-surface-bottom);opacity:0;height:.34rem;border-radius:50%;background-color:var(--ws-top-fill);box-shadow:0 2px 4px -2px #00000059;filter:brightness(1.35);transform:translateY(50%);transition:bottom .2s ease,opacity .2s ease,background-color .2s ease;pointer-events:none}.water-sort-liquid.has-liquid:after{opacity:1}.water-sort-liquid.is-top-light:after{box-shadow:inset 0 2px #1e1a0099;filter:brightness(.72)}.water-sort-level{flex:none;transition:height .2s ease,background-color .2s ease}.water-sort-countdown{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#ffd66b;font-size:clamp(2.5rem,14vw,3.5rem);font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.75);pointer-events:none}.water-sort-mine-head,.water-sort-mini-head{display:flex;align-items:center;gap:.35rem;margin:0;color:#c9d1e1;font-size:.8rem}.water-sort-mine-head{margin-top:.5rem}.water-sort-mini-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.water-sort-progress{margin-left:auto;flex:none;font-weight:700;font-variant-numeric:tabular-nums}.water-sort-mini-note{flex:none;margin:.25rem 0 0;color:#98a2b8;font-size:.7rem;font-variant-numeric:tabular-nums}.water-sort-mine-head .water-sort-mini-note{margin-top:0}.water-sort-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin-top:.6rem}.water-sort-confirm{color:#ffd66b;font-size:.8rem}.water-sort-note{margin-top:.25rem;text-align:center;font-size:.78rem}.water-sort-minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.5rem;padding:0;margin:0;list-style:none}.water-sort-mini{padding:.5rem;border:1px solid #333a47;border-radius:10px;background-color:#1a1d24}.water-sort-mini-tubes{display:flex;gap:.2rem;margin-top:.35rem}.water-sort-mini-tube{display:flex;flex:1;flex-direction:column-reverse;height:2.4rem;overflow:hidden;border:1px solid #46536b;border-radius:2px 2px 50% 50%/2px 2px 22% 22%;background-color:#0a0e16bf}.water-sort-mini-fill{flex:none;width:100%;background-color:#5c6780;transition:height .2s ease}.water-sort-mini-tube.is-sorted{border-color:#3fd18a}.water-sort-mini-tube.is-sorted .water-sort-mini-fill{background-color:#3fd18a}.water-sort-mini-tube .water-sort-liquid{flex:1}.water-sort-mini-tube .water-sort-liquid:after{display:none}@media(prefers-reduced-motion:reduce){.water-sort-tube,.water-sort-tube.is-pouring,.water-sort-tube.is-pouring-right,.water-sort-tube.is-pouring-left{transform:none;transition:none}.water-sort-tube.is-receiving:not(.is-selected){border-color:#46536b;border-top-color:#8397b8;box-shadow:none}.water-sort-tube.is-receiving.is-target:not(.is-selected){border-color:#3fd18a;box-shadow:0 0 0 3px #3fd18a38}.water-sort-liquid:after,.water-sort-level,.water-sort-mini-fill{transition:none}}@media(max-width:480px){.home,.room{padding:1rem .75rem}.panel{padding:1rem}.game-grid{grid-template-columns:1fr}.game-card{min-height:170px}.lobby-callout{align-items:stretch;flex-direction:column}.lobby-callout button,.direct-entry button,.invite-entry button{width:100%}.list-header{grid-template-columns:1fr auto}.list-header>div{grid-column:1 / -1;grid-row:1}.list-header .back-button{grid-column:1;grid-row:2;justify-self:start}.list-header>button:last-child{grid-column:2;grid-row:2}.lobby-room-row{align-items:stretch;flex-direction:column}.lobby-room-meta{justify-content:space-between}.create-room{grid-template-columns:1fr}.create-room button,.lobby-actions button{width:100%}.room-header>div{width:100%;justify-content:space-between}.room.is-compact{padding:.5rem .75rem}.finished-actions button{width:100%}.connect4-board{gap:.15rem;padding:.2rem}.connect4-column{gap:.15rem;padding:.1rem}.hh-board{--hh-piece-size: 2.1rem;max-width:none;margin:.5rem 0}.diamond-board{max-width:none;margin:.5rem 0}.speed-table{gap:.4rem;padding:.35rem}.speed-center{gap:.6rem}.royale-stage{width:min(100%,33.75dvh)}.royale-panel{padding-block:.6rem}.royale-hud{gap:.5rem;font-size:.8rem}.royale-cards,.royale-hand{gap:.25rem}.royale-notice{margin:.35rem 0 0;font-size:.8rem}.blokus-panel{padding:.75rem;--blokus-mini-cell: 5px}.blokus-panel h2{font-size:.95rem;margin-bottom:.5rem}.blokus-tray{gap:.25rem}.blokus-piece{min-width:2.1rem;min-height:2.1rem;padding:.15rem}.blokus-board-frame{margin:.4rem auto}.blokus-controls button{min-width:3.75rem;padding-inline:.75rem}.blokus-ranking li{flex-wrap:wrap}.blokus-breakdown{order:1;width:100%;white-space:normal}.toast{bottom:3rem;width:calc(100% - 1.5rem);text-align:center}}