:root{color-scheme:dark;--bg: #080b10;--panel: rgba(16, 22, 31, .88);--panel-strong: rgba(18, 27, 39, .96);--ink: #eef5ff;--muted: #95a7bd;--line: rgba(255, 255, 255, .12);--cyan: #25d9d9;--coral: #ff5d73;--gold: #ffd84a;--green: #74df7b;--button: #1d2b3c;--button-hover: #26394f;--shadow: rgba(0, 0, 0, .32);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px}*{box-sizing:border-box}html,body,#game-root,#game-container,#ui-root{width:100%;height:100%;margin:0}body{overflow:hidden;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}button{min-height:42px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--button);box-shadow:0 12px 28px var(--shadow);cursor:pointer;transition:transform .14s ease,background .14s ease,border-color .14s ease}button:hover:not(:disabled){transform:translateY(-1px);background:var(--button-hover);border-color:#ffffff38}button:disabled{cursor:not-allowed;opacity:.48}button.primary{background:linear-gradient(135deg,#1cb8b8,#2f7de1);border-color:#ffffff38}button.ready{background:linear-gradient(135deg,#2f9d55,#6dbd5a)}button.subtle{min-height:34px;padding:0 12px;background:transparent;box-shadow:none}input,select{width:100%;min-height:42px;border:1px solid var(--line);border-radius:8px;padding:0 12px;color:var(--ink);background:#04080da8;outline:none}input:focus,select:focus{border-color:var(--cyan)}#game-container{position:fixed;top:0;right:0;bottom:0;left:0}#ui-root{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#ui-root *{pointer-events:auto}.shell{position:relative;z-index:2;display:grid;gap:18px;width:min(920px,calc(100vw - 32px));margin:0 auto;padding-top:8vh}.shell-menu{width:min(520px,calc(100vw - 32px))}.lobby-shell{grid-template-columns:minmax(280px,1fr) minmax(300px,380px)}.panel{border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 24px 60px var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.menu-panel,.lobby-panel,.settings-panel{padding:22px}.brand-row,.room-heading,.panel-title{display:flex;align-items:center;justify-content:space-between;gap:14px}.brand-row{justify-content:flex-start;margin-bottom:22px}.brand-mark{width:42px;height:42px;border-radius:8px;background:linear-gradient(90deg,transparent 0 31%,#25d9d9 31% 64%,transparent 64%),linear-gradient(0deg,#ff5d73 0,#ff5d73 31%,#ffd84a 31%,#ffd84a 64%,#74df7b 64%);box-shadow:0 0 0 1px var(--line),0 14px 32px #25d9d92e}.eyebrow{margin:0 0 4px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:0;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{margin-bottom:0;font-size:clamp(2.2rem,6vw,4.4rem);line-height:.92}h2{margin-bottom:0;font-size:1.25rem}h3{margin-bottom:8px}.field{display:grid;gap:8px;color:var(--muted);font-size:.86rem;font-weight:700}.menu-actions,.join-row,.lobby-actions{display:grid;gap:12px;margin-top:16px}.join-row{grid-template-columns:minmax(0,1fr) 100px;align-items:end}.status-line{margin:14px 0 0;color:var(--muted);font-size:.9rem}.player-list{display:grid;gap:10px;margin-top:18px}.player-card{display:grid;grid-template-columns:12px minmax(0,1fr);align-items:center;gap:10px;min-height:58px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#ffffff0d}.player-card.local{border-color:#25d9d999}.player-card p{margin:4px 0 0;color:var(--muted);font-size:.82rem}.player-color{width:12px;height:34px;border-radius:8px;background:var(--player-color)}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.settings-grid .field:first-child,.settings-grid .field:nth-child(2){grid-column:span 2}.play-ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.hud-strip{position:fixed;top:16px;left:16px;z-index:4;display:flex;flex-wrap:wrap;gap:12px;max-width:min(680px,calc(100vw - 32px));padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 18px 48px var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:auto}.hud-strip>div{min-width:88px}.hud-strip strong{font-size:1.05rem}.side-panel{position:fixed;top:16px;right:16px;z-index:4;width:268px;max-height:calc(100vh - 32px);overflow:auto;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 18px 48px var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:auto}.compact{align-items:flex-start}.compact-list{margin-top:12px}.next-panel{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.piece-preview-layout{display:grid;grid-template-columns:82px minmax(0,1fr);gap:12px;align-items:start}.preview-card{display:grid;gap:8px;min-width:0}.next-card{overflow:hidden}.next-stack{display:flex;flex-wrap:wrap;gap:8px}.piece-preview{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:3px;padding:5px;border:1px solid var(--line);border-radius:8px;background:#04080d80}.piece-preview.large{width:68px;height:68px}.piece-preview.small{width:42px;height:42px;gap:2px;padding:4px}.preview-cell{min-width:0;min-height:0;border-radius:3px}.preview-cell.filled{border:1px solid rgba(255,255,255,.34);background:var(--piece-color);box-shadow:inset 0 4px #ffffff38,0 0 10px color-mix(in srgb,var(--piece-color) 42%,transparent)}.mobile-piece-tray{display:none}.touch-controls{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));z-index:5;display:grid;grid-template-columns:repeat(7,minmax(48px,70px));gap:8px;transform:translate(-50%);pointer-events:auto}.touch-controls button{min-height:48px;padding:0 8px;font-size:.78rem;font-weight:800}.touch-controls .wide{background:linear-gradient(135deg,#ff7a4f,#d94b61)}.piece-tray{position:fixed;left:16px;bottom:78px;z-index:4;width:262px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 18px 48px var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:auto}.compact-preview-layout{grid-template-columns:52px minmax(0,1fr);gap:10px}.end-overlay{position:fixed;left:50%;top:50%;z-index:6;width:min(360px,calc(100vw - 32px));padding:22px;text-align:center;transform:translate(-50%,-50%)}.end-overlay h1{margin-bottom:12px}@media(max-width:980px){.side-panel{top:auto;right:12px;bottom:78px;width:min(300px,calc(100vw - 24px));max-height:34vh}.hud-strip{right:12px;left:12px;max-width:none}}@media(max-width:760px){.shell,.lobby-shell{grid-template-columns:1fr;width:calc(100vw - 24px);padding-top:16px}.menu-panel,.lobby-panel,.settings-panel{padding:16px}.settings-grid{grid-template-columns:1fr}.settings-grid .field:first-child,.settings-grid .field:nth-child(2){grid-column:span 1}.hud-strip{gap:8px;padding:10px}.hud-strip>div{min-width:calc(50% - 8px)}.side-panel{display:none}.mobile-piece-tray{display:block;right:12px;left:12px;bottom:calc(128px + env(safe-area-inset-bottom));width:auto;padding:10px}.touch-controls{grid-template-columns:repeat(4,minmax(58px,1fr));width:calc(100vw - 24px)}.touch-controls .wide{grid-column:span 2}}@media(prefers-reduced-motion:reduce){button{transition:none}}