.tetromino-board{display:inline-flex;flex-direction:column;gap:.5rem;margin:0}.tetromino-board figcaption,.tetromino-preview figcaption{color:#8fa4ba;font-size:.72rem;font-weight:800;letter-spacing:0;text-transform:uppercase}.tetromino-grid,.tetromino-preview-grid{background:#101822;border:1px solid rgba(223,233,243,.34);box-shadow:none;overflow:hidden}.tetromino-board.compact .tetromino-grid{border-width:1px;box-shadow:none}.tetromino-row,.tetromino-piece-row{display:flex}.tetromino-cell{width:var(--block-size);height:var(--block-size);flex:0 0 var(--block-size);background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 45%),#121b26;border-left:1px solid rgba(223,233,243,.045);border-top:1px solid rgba(223,233,243,.045);box-sizing:border-box}.tetromino-cell.filled{background:linear-gradient(color-mix(in srgb,var(--top-glow),transparent 28%),color-mix(in srgb,var(--top-glow),transparent 28%)),linear-gradient(135deg,rgba(255,255,255,.13),transparent 42%),linear-gradient(315deg,rgba(0,0,0,.14),transparent 45%),var(--block-color);border-color:#ffffff24;box-shadow:inset 1px 1px #ffffff1f,inset -1px -1px #00000029}.tetromino-cell.ghost{background:color-mix(in srgb,var(--block-color),transparent 84%);border:1px solid color-mix(in srgb,var(--block-color),transparent 46%);box-shadow:none}.tetromino-cell.garbage{background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 44%),#6b7787}.tetromino-preview{align-items:center;display:flex;flex-direction:column;gap:.45rem;justify-content:center;margin:0;min-height:4.6rem}.tetromino-preview-grid{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:4.3rem;min-width:4.3rem;padding:.45rem}.tetromino-preview.unframed .tetromino-preview-grid{background:transparent;border:0;min-height:0;min-width:0;overflow:visible;padding:0}.tetromino-mark{align-items:center;background:#101822;border:1px solid rgba(223,233,243,.16);display:flex;flex-direction:column;height:3rem;justify-content:center;width:3rem}.tetromino-queue{display:grid;gap:.65rem}.tetromino-stat{background:#101822;border:1px solid rgba(223,233,243,.26);display:grid;gap:.25rem;min-width:5.5rem;padding:.7rem .8rem}.tetromino-stat span{color:#8fa4ba;font-size:.7rem;font-weight:800;letter-spacing:0;text-transform:uppercase}.tetromino-stat strong{color:#f5f8fb;font-size:1.15rem;line-height:1}:root{color:#edf3f8;background:#0d1117;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button{border:0;cursor:pointer;font:inherit}.app-layout{display:flex;flex-direction:column;min-height:100dvh}.lobby-shell{--stage-horizontal-reserve: 28rem;--stage-player-grid-reserve: 0px;--stage-shell-padding: clamp(1rem, 2vw, 2rem);--stage-vertical-reserve: calc(var(--stage-shell-padding) * 2);display:grid;grid-template-rows:minmax(0,1fr);flex:1;min-height:0;padding:var(--stage-shell-padding);background:radial-gradient(circle at 18% 18%,color-mix(in srgb,var(--player-glow-color, #35d6e7),transparent 82%),transparent 28rem),linear-gradient(135deg,#0d1117,#141b24 48%,#181416)}.home-shell{align-items:center;justify-items:center}.home-panel{display:grid;gap:1rem;max-width:28rem;width:min(100%,28rem)}.home-panel h1{font-size:clamp(2.1rem,7vw,4.8rem);line-height:.95;margin:0}.typer{display:inline-block;min-width:11ch;white-space:nowrap}.typer:after{content:"|";animation:blink .8s step-end infinite}@keyframes blink{50%{opacity:0}}.home-panel p{color:#c8d5e1;font-size:1.15rem;font-weight:700;line-height:1.5}.home-panel .primary-action{justify-self:start}.user-chip{align-items:center;display:grid;gap:.7rem;grid-template-columns:minmax(0,1fr) auto;justify-items:end;min-width:12rem}.user-chip-meta{display:grid;gap:.15rem;justify-items:end;min-width:0}.user-chip strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.secondary-action{background:#ffffff14;color:#edf3f8;font-weight:800}.avatar-edit-button{background:transparent;padding:0}.avatar-edit-button:disabled{cursor:default}.user-chip-meta span{color:#9eb0c1;font-size:.82rem;font-weight:700}.connection-row{align-items:center;color:#9eb0c1;display:flex;font-size:.84rem;font-weight:700;gap:.5rem}.panel-status{align-self:end;margin-top:auto}.signal{background:#f04e5f;border-radius:999px;box-shadow:0 0 0 4px #f04e5f24;display:inline-block;height:.58rem;width:.58rem}.signal.online{background:#45d66f;box-shadow:0 0 0 4px #45d66f24}h1,h2,p{margin:0}h2{font-size:clamp(1.4rem,3vw,2.2rem)}.panel-heading{display:grid;gap:.28rem}.primary-action{background:#35d6e7;color:#071016;font-weight:900;padding:.78rem 1rem}.room-panel button,.name-form .primary-action,.primary-action.room-action{background:var(--player-action-color, #35d6e7);color:#071016;font-weight:900;padding:.78rem 1rem}.primary-action:disabled{cursor:not-allowed;opacity:.5}.secondary-action{border:1px solid rgba(223,233,243,.16);padding:.78rem 1rem}.eyebrow{color:#8fa4ba;font-size:.72rem;font-weight:900;letter-spacing:0;text-transform:uppercase}.lobby-layout{display:grid;gap:1rem;grid-template-columns:minmax(13rem,.75fr) minmax(28rem,1.9fr) minmax(13rem,.75fr);height:100%;margin:0 auto;max-width:1240px;min-height:0;width:100%}.lobby-layout.board-landscape{--stage-player-grid-reserve: 10rem;grid-template-columns:minmax(0,1fr) minmax(13rem,.28fr);max-width:min(100%,1520px)}.board-landscape .players-panel{display:none}.side-panel{align-content:start;display:grid;gap:1rem;max-height:calc(100dvh - var(--stage-vertical-reserve));min-height:0;overflow:auto}.match-panel{display:flex;flex-direction:column}.panel-heading{align-items:center;grid-template-columns:1fr auto}.panel-heading .eyebrow{grid-column:1 / -1}.player-list{display:grid;gap:.75rem}.player-row{align-items:center;background:#ffffff09;border:1px solid rgba(223,233,243,.1);display:grid;gap:.7rem;grid-template-columns:auto 1fr;padding:.62rem}.player-meta{display:grid;gap:.18rem}.player-row span{color:#9eb0c1;font-size:.82rem}.player-row .player-score{color:#edf3f8;font-weight:900}.main-stage{align-items:flex-start;container-type:inline-size;display:grid;gap:1rem;grid-template-rows:minmax(0,max-content) auto;height:100%;justify-content:stretch;justify-items:center;min-height:0;overflow:hidden}.board-frame{display:flex;justify-content:center;min-height:0;width:100%}.board-stack{display:inline-flex;position:relative}.stage-players{display:none;min-height:0;width:100%}.board-landscape .stage-players{align-self:stretch;display:grid;gap:.65rem;max-height:var(--stage-player-grid-reserve);overflow:auto}.stage-players-heading{align-items:center;display:flex;justify-content:space-between}.stage-players-heading span:last-child{color:#edf3f8;font-weight:900}.player-grid{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.5rem}.player-grid .player-row{min-width:0;padding:.48rem}.player-grid .player-meta{min-width:0}.player-grid .player-meta strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.countdown-overlay{align-items:center;display:flex;inset:0;justify-content:center;position:absolute;pointer-events:none}.countdown-overlay>span{color:#edf3f8;font-size:clamp(5rem,18vw,13rem);font-weight:900;line-height:.85;text-shadow:0 .08em .3em rgba(0,0,0,.48)}.bomb-confetti-layer{display:block;inset:0;overflow:hidden;pointer-events:none;position:absolute;z-index:2}.bomb-confetti-layer:before{animation:bomb-flash .48s ease-out forwards;background:radial-gradient(circle at var(--bomb-confetti-origin-x, 50%) var(--bomb-confetti-origin-y, 50%),color-mix(in srgb,var(--bomb-confetti-color, #35d6e7),white 28%) 0%,color-mix(in srgb,var(--bomb-confetti-color, #35d6e7),transparent 62%) 26%,transparent 58%);content:"";inset:0;opacity:0;position:absolute;transform-origin:var(--bomb-confetti-origin-x, 50%) var(--bomb-confetti-origin-y, 50%)}.bomb-confetti-piece{animation:bomb-confetti-burst var(--bomb-confetti-duration) cubic-bezier(.16,.8,.2,1) forwards;animation-delay:var(--bomb-confetti-delay);background:linear-gradient(135deg,rgba(255,255,255,.46),transparent 45%),color-mix(in srgb,var(--bomb-confetti-color, #35d6e7),white 6%);display:block;height:calc(var(--bomb-confetti-size) * 1.75);left:var(--bomb-confetti-origin-x, 50%);opacity:0;position:absolute;top:var(--bomb-confetti-origin-y, 50%);transform:translate3d(-50%,-50%,0) scale(.25) rotate(var(--bomb-confetti-rotate));width:var(--bomb-confetti-size)}.bomb-confetti-piece:nth-child(3n){background:color-mix(in srgb,var(--bomb-confetti-color, #35d6e7),white 24%)}.bomb-confetti-piece:nth-child(4n){background:color-mix(in srgb,var(--bomb-confetti-color, #35d6e7),black 16%)}.bomb-confetti-piece:nth-child(5n){border-radius:999px}@keyframes bomb-flash{0%{opacity:.8;transform:scale(.18)}to{opacity:0;transform:scale(1.08)}}@keyframes bomb-confetti-burst{0%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.25) rotate(var(--bomb-confetti-rotate))}12%{opacity:1}72%{opacity:.95}to{opacity:0;transform:translate3d(calc(-50% + var(--bomb-confetti-x)),calc(-50% + var(--bomb-confetti-y)),0) scale(1) rotate(calc(var(--bomb-confetti-rotate) + 420deg))}}.game-over-overlay{overflow:hidden}.winner-panel{align-items:center;aspect-ratio:1;background:linear-gradient(color-mix(in srgb,var(--player-glow-color, #35d6e7),#101822 88%),#101822);border:1px solid color-mix(in srgb,var(--player-glow-color, #35d6e7),transparent 46%);box-shadow:0 1.4rem 5rem #00000057,0 0 5rem color-mix(in srgb,var(--player-glow-color, #35d6e7),transparent 72%);display:grid;gap:clamp(.45rem,1.4vw,.8rem);justify-items:center;width:min(82%,20rem);padding:clamp(1rem,3vw,1.8rem);pointer-events:none;position:relative;text-align:center;z-index:1}.winner-avatar{filter:drop-shadow(0 0 1.4rem color-mix(in srgb,var(--player-glow-color, #35d6e7),transparent 42%))}.winner-avatar .tetromino-preview{min-height:0}.winner-panel strong{color:#edf3f8;font-size:clamp(1.45rem,3vw,1.9rem);font-weight:900;line-height:1.05;max-width:100%;overflow-wrap:anywhere;text-shadow:0 .08em .3em rgba(0,0,0,.48)}.winner-score{color:#edf3f8;font-size:clamp(1rem,2.4vw,1.35rem);font-weight:900}.confetti-layer{inset:0;overflow:hidden;position:absolute}.confetti-piece{animation:confetti-fall var(--confetti-duration) linear infinite;animation-delay:var(--confetti-delay);background:linear-gradient(135deg,rgba(255,255,255,.36),transparent 42%),color-mix(in srgb,var(--player-glow-color, #35d6e7),white 8%);display:block;height:calc(var(--confetti-size) * 1.6);left:var(--confetti-left);opacity:0;position:absolute;top:-12%;transform:translate3d(0,-100%,0) rotate(var(--confetti-rotate));width:var(--confetti-size)}.confetti-piece:nth-child(3n){background:color-mix(in srgb,var(--player-glow-color, #35d6e7),white 26%)}.confetti-piece:nth-child(4n){background:color-mix(in srgb,var(--player-glow-color, #35d6e7),black 18%)}.confetti-piece:nth-child(5n){border-radius:999px}@keyframes confetti-fall{0%{opacity:0;top:-12%;transform:translate3d(0,-120%,0) rotate(var(--confetti-rotate))}12%{opacity:1}to{opacity:.92;top:112%;transform:translate3d(var(--confetti-drift),0,0) rotate(calc(var(--confetti-rotate) + 540deg))}}.room-panel{display:grid;gap:1rem}.next-piece-panel{align-items:start;display:grid;justify-items:start}.next-piece-panel .tetromino-preview{align-items:start}.next-piece-panel .tetromino-preview figcaption{color:#8fa4ba;font-size:.72rem;font-weight:900;letter-spacing:0;text-transform:uppercase}.bomb-panel{border-top:1px solid rgba(223,233,243,.12);display:grid;gap:.25rem;padding-top:.85rem}.bomb-panel strong{color:#edf3f8;font-size:1.15rem;line-height:1.1}.room-panel div{display:grid;gap:.28rem}.room-panel strong{font-size:1.7rem}.lobby-error{color:#ff9aa6;font-size:.9rem;font-weight:700}.keyboard-guide{display:grid;gap:.65rem}.keyboard-guide ul{display:grid;gap:.45rem;list-style:none;margin:0;padding:0}.keyboard-guide li{align-items:center;color:#c8d5e1;display:grid;font-size:.9rem;font-weight:800;gap:.7rem;grid-template-columns:auto minmax(0,1fr)}.keyboard-guide kbd{align-items:center;background:#101822;border:1px solid rgba(223,233,243,.22);color:#edf3f8;display:inline-flex;font:inherit;height:2.15rem;justify-content:center;min-width:2.45rem;width:2.45rem}.keyboard-guide kbd.wide-key{width:4.4rem}.key-pair{display:flex;gap:.3rem}.support-panel{align-items:center;border-top:1px solid rgba(223,233,243,.12);display:grid;gap:.8rem;grid-template-columns:auto minmax(0,1fr);margin-top:auto;padding-top:.9rem;position:relative}.support-panel-icon{align-items:center;background:#101822;border:1px solid rgba(223,233,243,.22);color:#edf3f8;display:inline-flex;font-size:1.15rem;font-weight:900;height:3.1rem;justify-content:center;line-height:1;padding:.38rem;width:3.1rem}.support-panel div{display:grid;gap:.32rem;min-width:0}.support-panel a{color:#c8d5e1;font-size:.88rem;font-weight:800;line-height:1.35;text-decoration-color:#dfe9f373;text-underline-offset:3px}.support-panel a:hover{color:#edf3f8}.support-panel-link:after{background:#101822;border:1px solid rgba(223,233,243,.22);box-sizing:border-box;bottom:calc(100% + .55rem);color:#c8d5e1;content:attr(data-tooltip);font-size:.78rem;font-weight:700;line-height:1.35;opacity:0;padding:.55rem .65rem;pointer-events:none;position:absolute;transform:translateY(.2rem);transition:opacity .14s ease,transform .14s ease;visibility:hidden;left:0;right:0;width:auto;z-index:2}.support-panel-link:hover:after,.support-panel-link:focus-visible:after{opacity:1;transform:translateY(0);visibility:visible}.name-gate{align-items:center;background:#070a0eb8;display:flex;inset:0;justify-content:center;padding:1rem;position:fixed;z-index:10}.name-form{background:#111821;border:1px solid rgba(223,233,243,.16);box-shadow:0 1rem 5rem #0000006b;display:grid;gap:.9rem;max-width:24rem;padding:1.2rem;width:min(100%,24rem)}.name-form h2{font-size:1.35rem;line-height:1.12}.name-form input{background:#0d1117;border:1px solid rgba(223,233,243,.22);color:#edf3f8;font:inherit;min-width:0;padding:.82rem .9rem}.name-form input:focus{border-color:#35d6e7;outline:2px solid rgba(53,214,231,.2)}.color-picker{display:grid;gap:.32rem;grid-template-columns:repeat(15,minmax(0,1fr));padding:.2rem .16rem .28rem}.color-choice{aspect-ratio:1;background:linear-gradient(color-mix(in srgb,var(--choice-color),transparent 28%),color-mix(in srgb,var(--choice-color),transparent 28%)),linear-gradient(135deg,rgba(255,255,255,.22),transparent 42%),linear-gradient(315deg,rgba(0,0,0,.18),transparent 45%),var(--choice-color);border:1px solid rgba(255,255,255,.2);box-shadow:inset 1px 1px #ffffff2e,inset -1px -1px #0003,0 0 0 1px #060a0f57;min-width:0;padding:0;width:100%}.color-choice[data-selected=true]{outline:2px solid rgba(237,243,248,.95);outline-offset:2px}.color-choice[data-taken=true]{background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%),linear-gradient(315deg,rgba(0,0,0,.2),transparent 45%),#404954;box-shadow:inset 1px 1px #ffffff14,inset -1px -1px #00000038,0 0 0 1px #060a0f57;cursor:not-allowed;opacity:.48}.app-footer{align-items:center;display:flex;flex-shrink:0;gap:1rem;justify-content:center;padding:.6rem 1.5rem;border-top:1px solid rgba(223,233,243,.08);background:#0003}.footer-text{color:#8fa4ba;font-size:.7rem;font-weight:700}.footer-links{display:flex;gap:.75rem}.footer-link{background:none;color:#9eb0c1;font-size:.72rem;font-weight:800;padding:0;text-decoration:underline;text-underline-offset:2px}.footer-link:hover{color:#edf3f8}.legal-panel{display:grid;gap:.5rem;max-width:40rem;padding:2rem var(--stage-shell-padding);width:min(100%,40rem);align-self:center;justify-self:center}.legal-panel h1{font-size:clamp(1.6rem,4vw,2.6rem);margin-bottom:.5rem}.legal-panel h2{font-size:clamp(1rem,2vw,1.3rem);margin-top:1.2rem}.legal-panel h3{font-size:.95rem;margin-top:.8rem;color:#c8d5e1}.legal-panel p{color:#c8d5e1;font-size:.88rem;font-weight:400;line-height:1.6}.legal-panel ul{color:#c8d5e1;display:grid;gap:.35rem;font-size:.88rem;line-height:1.5;margin:0;padding-left:1.2rem}.legal-panel a{color:#35d6e7}.legal-back{background:#ffffff14;color:#9eb0c1;font-size:.82rem;font-weight:800;justify-self:start;padding:.45rem .9rem}.legal-back:hover{color:#edf3f8}.data-notice{align-items:center;background:#111821;border-top:1px solid rgba(223,233,243,.12);display:flex;gap:1rem;justify-content:center;padding:.7rem 1.5rem;position:fixed;bottom:0;left:0;right:0;z-index:100;font-size:.8rem;color:#c8d5e1}.data-notice-link{background:none;color:#35d6e7;font-size:inherit;font-weight:800;padding:0;text-decoration:underline;text-underline-offset:2px}.data-notice-close{background:#ffffff1a;border-radius:4px;color:#9eb0c1;flex-shrink:0;font-size:1.2rem;line-height:1;padding:.15rem .5rem}.data-notice-close:hover{background:#ffffff2e;color:#edf3f8}@media(max-width:980px){.lobby-shell{--stage-horizontal-reserve: 2rem;--stage-vertical-reserve: 2rem}.lobby-layout{grid-template-columns:1fr;height:auto}.main-stage{min-height:calc(100dvh - var(--stage-vertical-reserve));order:1}.side-panel{order:2}.match-panel{order:3}.room-panel{grid-template-columns:1fr auto}.user-chip{justify-self:start}.user-chip-meta,.next-piece-panel{justify-items:start}}@media(max-width:560px){.lobby-shell{--stage-horizontal-reserve: 1.5rem;--stage-vertical-reserve: 1.5rem;padding:.75rem}.room-panel{grid-template-columns:1fr}}