:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#050606;color:#fffaf0;--felt: #0aa18f;--felt-dark: #067d72;--cream: #eee1ce;--ink: #2a211b;--line: rgba(255, 255, 255, .16);--shadow: 0 18px 50px rgba(0, 0, 0, .36)}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;height:100%;margin:0}body{overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.app-shell,.join-shell{min-height:100%;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.08),transparent 32%),linear-gradient(135deg,#071917,#06110f,#0a0605)}.app-shell{display:flex;align-items:stretch;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.game-stage{width:min(100%,1180px);height:min(100vh - 20px,760px);min-height:560px;display:flex;flex-direction:column;gap:10px}.topbar{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 12px;background:linear-gradient(180deg,#d71922,#9f1218);box-shadow:var(--shadow)}.match-title,.room-pill,.top-actions{display:flex;align-items:center}.match-title{flex-direction:column;align-items:flex-start;min-width:160px;line-height:1.05}.match-title strong{font-size:clamp(1.1rem,2.1vw,1.58rem)}.match-title span,.room-pill span{font-size:.86rem;font-weight:800}.room-pill{gap:8px;padding:7px 10px;border-radius:7px;background:#0000003d}.top-actions{gap:8px}.icon-btn{width:48px;height:48px;border:0;border-radius:8px;color:#fff;background:#fff3;display:inline-grid;place-items:center}.icon-btn.active{background:#18c9b4;color:#062521}.icon-btn.small{width:28px;height:28px}.table-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 188px;gap:10px;min-height:0;flex:1}.felt{position:relative;min-width:0;min-height:0;overflow:hidden;background:linear-gradient(0deg,rgba(0,0,0,.08),transparent 46%),repeating-linear-gradient(105deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),var(--felt);border:3px solid rgba(255,255,255,.08);box-shadow:inset 0 0 80px #0000003d,var(--shadow)}.center-board{position:absolute;inset:18% 13% 22%;border-radius:8px;border:3px solid rgba(0,0,0,.06);box-shadow:inset 0 0 24px #00000014;display:grid;place-items:center;padding:18px}.center-message{display:flex;flex-direction:column;align-items:center;gap:5px;color:#ffffffd1;text-align:center}.center-message strong{font-size:1.3rem}.center-message span{font-weight:700}.domino-track{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(2px,.8vh,8px);overflow:hidden;--tile-short: clamp(30px, 4.2vw, 42px);--tile-long: calc(var(--tile-short) * 1.82);--pip-size: clamp(4px, calc(var(--tile-short) * .16), 7px);--divider-size: clamp(2px, calc(var(--tile-short) * .06), 3px);--board-cell: calc(var(--tile-long) + 6px)}.track-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--row-count),var(--board-cell));place-items:center;min-height:var(--board-cell)}.track-row.reverse{direction:ltr}.board-cell{width:var(--board-cell);height:var(--board-cell);display:grid;place-items:center}.board-cell.double .board-domino{transform:translateY(-1px);box-shadow:0 7px 12px #00000045,0 0 0 2px #ffd45438,inset 0 1px #fff}.player-rail{position:absolute;z-index:4;display:flex;align-items:center;gap:7px;padding:8px;border-radius:8px;background:var(--cream);color:var(--ink);box-shadow:0 9px 18px #00000038}.player-rail.empty{visibility:hidden}.player-rail.active{outline:4px solid #ffd454}.player-rail.top{top:0;left:50%;transform:translate(-50%);width:min(520px,54%)}.player-rail.left,.player-rail.right{top:31%;width:270px}.player-rail.left{left:-124px;transform:rotate(90deg)}.player-rail.right{right:-124px;transform:rotate(-90deg)}.opponent-info{display:flex;align-items:center;min-width:152px;gap:7px}.opponent-info strong{display:block;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}.opponent-info span{font-size:.72rem;font-weight:800}.opponent-hand{display:flex;gap:5px;min-width:0}.tile-back{width:34px;height:54px;border-radius:7px;background:linear-gradient(135deg,rgba(255,255,255,.24),transparent),#f6f1e8;border:2px solid rgba(42,33,27,.22)}.player-console{position:absolute;left:19%;right:19%;bottom:-2px;z-index:6;min-height:100px;display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:9px 12px 7px;border-radius:8px 8px 0 0;background:var(--cream);color:var(--ink);box-shadow:0 -8px 22px #0003}.me-card{height:72px;min-width:174px;border-radius:8px;background:#ffffff9e;display:flex;align-items:center;gap:8px;padding:7px}.me-card.active{outline:4px solid #ffd454}.points{width:48px;min-width:48px;height:62px;border-radius:8px;color:#fff;background:#2b211c;display:grid;place-items:center;line-height:1;padding:6px 4px}.points strong{font-size:1.55rem}.points span{font-size:.64rem;font-weight:900}.avatar{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:#fff;background:var(--avatar);border:3px solid #fff;font-weight:900;box-shadow:0 4px 9px #0000002e}.avatar.large{width:54px;height:54px;font-size:1.45rem}.me-name{min-width:0;display:flex;flex-direction:column}.me-name strong{font-size:.98rem}.me-name span{font-size:.77rem;font-weight:800}.hand{display:flex;align-items:flex-end;gap:clamp(4px,.7vw,8px);min-width:0;overflow-x:auto;padding:4px 2px}.hand-tile{border:0;background:transparent;padding:0;transform-origin:bottom center;transition:transform .14s ease,filter .14s ease}.hand-tile.playable{filter:drop-shadow(0 0 10px rgba(255,212,84,.72))}.hand-tile.selected,.hand-tile.playable:hover{transform:translateY(-10px)}.domino{width:var(--tile-short, 54px);height:var(--tile-long, 98px);border-radius:8px;display:grid;grid-template-rows:1fr var(--divider-size, 3px) 1fr;overflow:hidden;background:linear-gradient(160deg,#fffdf7,#e9e0d4);border:2px solid #bfb5a8;box-shadow:0 4px 7px #0003,inset 0 1px #fff}.domino.horizontal{width:var(--tile-long, 98px);height:var(--tile-short, 54px);grid-template-columns:1fr var(--divider-size, 3px) 1fr;grid-template-rows:none}.board-domino{border-width:1.5px;border-radius:7px;box-shadow:0 5px 9px #0000003d,inset 0 1px #fff}.divider{background:#cfc4b7}.half{position:relative;display:block}.half i{position:absolute;width:var(--pip-size, 8px);height:var(--pip-size, 8px);border-radius:50%;background:#271d19;transform:translate(-50%,-50%)}.pips-1 i:nth-child(1){left:50%;top:50%}.pips-2 i:nth-child(1),.pips-3 i:nth-child(1),.pips-4 i:nth-child(1),.pips-5 i:nth-child(1),.pips-6 i:nth-child(1){left:28%;top:28%}.pips-2 i:nth-child(2),.pips-3 i:nth-child(2),.pips-4 i:nth-child(2),.pips-5 i:nth-child(2),.pips-6 i:nth-child(2){left:72%;top:72%}.pips-3 i:nth-child(3),.pips-5 i:nth-child(3){left:50%;top:50%}.pips-4 i:nth-child(3),.pips-5 i:nth-child(4),.pips-6 i:nth-child(3){left:72%;top:28%}.pips-4 i:nth-child(4),.pips-5 i:nth-child(5),.pips-6 i:nth-child(4){left:28%;top:72%}.pips-6 i:nth-child(5){left:28%;top:50%}.pips-6 i:nth-child(6){left:72%;top:50%}.score-stack,.voice-stack{position:absolute;z-index:5;display:flex;align-items:center;gap:6px}.score-stack{left:12px;bottom:14px;flex-direction:column}.score-chip{width:64px;display:flex;align-items:center;gap:5px;padding:5px;border-radius:8px;background:#0000004d}.score-chip.turn{outline:2px solid #ffd454}.score-chip span{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--avatar);font-size:.76rem;font-weight:900}.voice-stack{right:12px;bottom:14px;border-radius:8px;padding:8px 10px;background:#00000047;font-weight:800}.action-dock{min-width:0;background:#081816d1;border:1px solid var(--line);box-shadow:var(--shadow);padding:12px;display:flex;flex-direction:column;gap:10px}.turn-status{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:8px;background:#ffffff12}.turn-status strong{font-size:1.02rem}.turn-status span:last-child{font-size:.76rem;color:#ffffffb8;font-weight:700}.turn-dot{width:10px;height:10px;border-radius:50%;background:#737373}.turn-dot.live{background:#20e3b2;box-shadow:0 0 12px #20e3b2}.primary-btn,.secondary-btn{min-height:48px;border:0;border-radius:8px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:900}.primary-btn{background:#ffd454;color:#21160c}.secondary-btn{background:#ffffff21;color:#fff;border:1px solid rgba(255,255,255,.13)}.full{width:100%}.round-result{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px;border-radius:8px;background:#ffffff14}.round-result span{color:#ffffffb8;font-size:.82rem;font-weight:800}.side-picker{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:8px;background:#ffffff14}.side-picker span{font-size:.82rem;font-weight:900}.side-picker div{display:grid;grid-template-columns:1fr 1fr;gap:6px}.side-picker button{min-height:38px;border:0;border-radius:8px;font-weight:900}.text-btn{color:#ffffffbd;background:transparent}.join-shell{display:grid;place-items:center;padding:20px}.join-board{width:min(960px,100%);min-height:560px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);overflow:hidden;box-shadow:var(--shadow);background:#0a1f1c}.join-preview{position:relative;background:linear-gradient(#0000000a,#0000002e),repeating-linear-gradient(105deg,rgba(255,255,255,.04) 0 1px,transparent 1px 7px),var(--felt);display:grid;place-items:center}.mini-table{width:min(420px,80%);min-height:250px;border-radius:8px;border:3px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:inset 0 0 30px #00000024}.join-form{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(18px,3vw,34px);background:#ffffff0f}.brand-lockup{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.brand-lockup span{color:#6ee7d8;font-weight:900;text-transform:uppercase;font-size:.78rem}.brand-lockup strong{font-size:clamp(1.8rem,4vw,3.2rem);line-height:1}label{display:flex;flex-direction:column;gap:6px}label span{font-size:.78rem;color:#ffffffc2;font-weight:900}input{width:100%;min-height:48px;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:0 12px;color:#fff;background:#ffffff1a;outline:0}input:focus{border-color:#20e3b2;box-shadow:0 0 0 3px #20e3b22e}.color-row{display:flex;gap:8px}.swatch{width:34px;height:34px;border-radius:8px;border:3px solid transparent;background:var(--swatch)}.swatch.selected{border-color:#fff}.join-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toast{position:fixed;left:50%;bottom:18px;z-index:50;transform:translate(-50%,20px);min-width:min(420px,calc(100% - 28px));padding:12px 14px;border-radius:8px;text-align:center;background:#121212f0;color:#fff;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;font-weight:800}.toast.visible{opacity:1;transform:translate(-50%)}.modal-layer{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:#00000085}.settings-panel{width:min(420px,100%);display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:8px;background:#101d1b;border:1px solid var(--line);box-shadow:var(--shadow)}.settings-panel h2{margin:0 0 4px}.settings-panel p{margin:0;color:#ffffffb8;font-weight:700}.mic-mark{color:#0d766c}@media(max-width:900px),(max-height:650px){body{overflow:auto}.app-shell{min-height:100%}.game-stage{min-height:100vh;height:auto}.table-wrap{grid-template-columns:1fr}.felt{height:68vh;min-height:440px}.action-dock{min-height:92px;display:grid;grid-template-columns:minmax(150px,1fr) minmax(116px,150px);align-items:stretch}.round-result,.side-picker{grid-column:span 2}.player-console{left:11%;right:11%}}@media(max-width:720px){.topbar{gap:6px}.match-title{min-width:110px}.room-pill{max-width:142px}.room-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-btn{width:42px;height:42px}.center-board{inset:16% 6% 23%}.domino-track{--tile-short: clamp(24px, 5.2vw, 34px)}.player-console{left:4%;right:4%;min-height:92px}.me-card{min-width:126px}.points{width:40px;min-width:40px}.avatar.large{width:42px;height:42px}.hand .domino,.mini-table .domino{--tile-short: 46px;--tile-long: 84px;--pip-size: 7px}.player-rail.top{width:min(430px,72%)}.player-rail.left,.player-rail.right{width:222px}.player-rail.left{left:-100px}.player-rail.right{right:-100px}.opponent-info{min-width:118px}.tile-back{width:27px;height:45px}.score-stack{display:none}.join-board{min-height:0;grid-template-columns:1fr}.join-preview{min-height:220px}.join-actions{grid-template-columns:1fr}}