*{box-sizing:border-box}:root{--ink:#1e2521;--muted:#68726c;--cream:#f4efe4;--tile:#fffdf7;--accent:#d3a344;--edge:#f5c85e;--table1:#788f78;--table2:#59705f;--header:#f9f6ee;--line:rgba(36,48,40,.12)}html,body{margin:0;min-height:100%;background:#e7e3da;color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif}button{font:inherit;color:inherit}.game{min-height:100dvh;display:grid;grid-template-rows:70px 82px minmax(330px,1fr) auto 36px;background:var(--cream);overflow:hidden;transition:.35s}.theme-marble{--cream:#e9eceb;--header:#f7f8f7;--table1:#adb7b0;--table2:#818e87;--accent:#967b58;--edge:#d9c39d}.theme-midnight{--cream:#161a1a;--header:#202625;--ink:#ecf0e8;--muted:#9eaaa3;--line:rgba(255,255,255,.1);--table1:#263b35;--table2:#172923;--accent:#d2aa58;--edge:#e6c46e}.theme-pastel{--cream:#f4e9e6;--header:#fff7f3;--table1:#9dafa5;--table2:#718e81;--accent:#c98675;--edge:#efb6a8}header{height:70px;background:var(--header);display:flex;align-items:center;padding:0 4vw;border-bottom:1px solid var(--line);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:10px;min-width:190px}.brand b{display:block;font-family:Georgia,serif;font-size:19px;letter-spacing:2px}.brand small{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}.brand-tile{width:29px;height:43px;border:2px solid var(--ink);border-radius:7px;display:flex;flex-direction:column;padding:6px;gap:7px;transform:rotate(-5deg)}.brand-tile i{width:5px;height:5px;background:var(--ink);border-radius:50%;align-self:center;box-shadow:7px 0 var(--ink),-7px 0 var(--ink)}.brand-tile:after{content:"";position:absolute}.round{margin:auto;font-size:10px;letter-spacing:1.5px;color:var(--muted);font-weight:700}.round span{color:var(--accent);margin:0 7px}.actions{display:flex;gap:8px;align-items:center;min-width:190px;justify-content:flex-end}.actions button{border:1px solid var(--line);background:transparent;border-radius:9px;height:35px;cursor:pointer}.icon-btn{width:35px;font-size:16px}.new-btn{padding:0 18px!important;background:var(--ink)!important;color:var(--header)!important;border:0!important;font-size:12px;font-weight:700}.menu{position:absolute;right:4vw;top:62px;width:190px;padding:12px;background:var(--header);border:1px solid var(--line);box-shadow:0 18px 50px #1e272444;border-radius:14px;display:grid;z-index:20}.menu>b{padding:5px 8px 9px;font-size:11px;text-transform:uppercase;letter-spacing:1px}.menu button{border:0;background:transparent;padding:8px;border-radius:8px;text-align:left;text-transform:capitalize;display:flex;gap:10px;align-items:center;cursor:pointer}.menu button.active{background:color-mix(in srgb,var(--accent) 16%,transparent)}.swatch{width:16px;height:16px;border-radius:50%;background:#607961}.swatch.marble{background:#a9b2ad}.swatch.midnight{background:#1c2b27}.swatch.pastel{background:#d09282}.opponent{height:82px;padding:0 4vw;display:flex;align-items:center;gap:11px;background:var(--cream);border-bottom:1px solid var(--line)}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#c4b5a1;color:#fff;font-family:Georgia,serif;font-size:18px;border:2px solid #fff;box-shadow:0 2px 8px #0002}.identity{min-width:105px}.identity b{font-family:Georgia,serif;display:block;font-size:15px}.identity span{font-size:10px;color:var(--muted)}.identity i,.status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#aeb5b0;margin-right:4px}.identity i.live,.status i.live{background:#62a974;box-shadow:0 0 0 3px #62a97425}.enemy-hand{display:flex;gap:4px;margin:auto;align-items:center}.enemy-hand em{font-size:10px;color:var(--muted)}.score,.you-score{display:flex;align-items:center;gap:6px}.score strong,.you-score strong{font:25px Georgia,serif}.score span,.you-score span{font-size:8px;letter-spacing:1px;color:var(--muted)}.table{position:relative;min-height:330px;overflow:hidden;background:radial-gradient(circle at 50% 35%,var(--table1),var(--table2));display:flex;align-items:center;padding:44px 9vw 74px}.grain{position:absolute;inset:0;opacity:.23;background-image:repeating-linear-gradient(94deg,transparent 0 90px,#dce7da16 91px 92px),linear-gradient(12deg,transparent 20%,#26392d15 21%,transparent 22%);pointer-events:none}.chain{position:relative;z-index:1;display:flex;align-items:center;gap:7px;margin:auto;max-width:calc(100vw - 260px);overflow-x:auto;padding:35px 12px;scrollbar-width:none}.empty-board{min-width:250px;text-align:center;color:#e9f0e9;display:grid;gap:4px}.empty-board span{font-size:28px;color:var(--edge)}.empty-board b{font:17px Georgia,serif}.empty-board small{font-size:10px;opacity:.72}.end{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:69px;height:92px;border:1px dashed #dce7df66;background:#dce7df0b;border-radius:14px;color:#e7eee9;display:grid;place-content:center;gap:7px;cursor:pointer;transition:.25s}.end.left{left:3vw}.end.right{right:3vw}.end span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;margin:auto;border:1px solid #ffffff44;font-family:Georgia,serif}.end small{font-size:7px;letter-spacing:1px}.end.valid,.chain:has(+.end.valid){border-color:var(--edge);background:#f4c8601d;box-shadow:0 0 0 4px #f4c86017,0 0 25px #f4c86022}.end.valid span{background:var(--edge);color:#344039;border:0;box-shadow:0 0 18px #ffe7a6}.status{position:absolute;bottom:25px;left:50%;transform:translate(-50%);background:#31443b99;color:#eff6f1;padding:9px 15px;border:1px solid #ffffff21;border-radius:20px;font-size:10px;white-space:nowrap;backdrop-filter:blur(8px)}.boneyard{position:absolute;right:3vw;bottom:20px;border:1px solid #ffffff23;background:#32483da8;color:#fff;border-radius:10px;padding:7px 11px;display:flex;align-items:center;gap:10px;cursor:pointer}.boneyard:disabled{opacity:.5}.boneyard b,.boneyard small{display:block;text-align:left}.boneyard b{font-size:10px}.boneyard small{font-size:8px;opacity:.7}.mini-stack{width:26px;height:34px;border-radius:5px;background:#eef0e9;border:1px solid #263229;box-shadow:3px -3px #eef0e9,4px -4px #263229}.mobile-layout-toggle{display:none}.domino{width:52px;height:100px;flex:0 0 auto;border:1px solid #d4d0c7;border-radius:9px;background:linear-gradient(145deg,#fff,var(--tile));padding:5px;display:flex;flex-direction:column;box-shadow:0 5px 12px #21302842,0 1px #fff inset;position:relative;transition:transform .22s,box-shadow .22s,border-color .22s;cursor:pointer}.domino:hover{transform:translateY(-5px)}.domino.selected{transform:translateY(-13px);border-color:var(--edge);box-shadow:0 0 0 3px #f2c85b44,0 10px 18px #0003}.domino.playable:after{content:"";position:absolute;inset:-4px;border:1px solid #f2c85bbf;border-radius:12px;box-shadow:0 0 12px #f2c85b66;pointer-events:none}.pip-face{flex:1;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);align-items:center;justify-items:center;padding:4px}.pip-face i{width:5px;height:5px;border-radius:50%;background:#29342e;box-shadow:inset 0 1px 1px #0006}.divider{height:1px;background:#d2cdc2;margin:2px 0}.domino.small{width:27px;height:49px;padding:3px;border-radius:5px}.domino.hidden{background:linear-gradient(135deg,#e7e0d1,#faf6eb);display:grid;place-items:center;border:2px solid #fff;outline:1px solid #c8bfae}.domino.hidden:before{content:"";position:absolute;inset:4px;border:1px solid #b9ad99;border-radius:2px}.tile-mark{font:11px Georgia,serif;color:#9b8d78}.board-tile .domino{width:45px;height:88px;animation:place .3s ease-out}.board-tile.double .domino{transform:rotate(90deg);margin:0 22px}.board-tile.double .domino:hover{transform:rotate(90deg)}@keyframes place{0%{transform:translateY(-20px) scale(.8);opacity:0}}.player-area{min-height:145px;background:var(--cream);padding:16px 5vw 12px;display:grid;grid-template-columns:100px 1fr 75px;align-items:center;border-top:1px solid var(--line)}.your-label span{font:16px Georgia,serif;display:block}.your-label small{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.player-hand{display:flex;justify-content:center;gap:8px;overflow-x:auto;padding:15px 8px 5px;scrollbar-width:none}.you-score{justify-self:end}footer{display:flex;justify-content:center;align-items:center;gap:8px;background:var(--header);font-size:9px;color:var(--muted);border-top:1px solid var(--line)}footer>span{color:var(--accent)}footer i{height:12px;width:1px;background:var(--line);margin:0 5px}.modal-back{position:fixed;inset:0;background:#17221cb8;z-index:50;display:grid;place-items:center;backdrop-filter:blur(8px)}.modal{width:min(380px,90vw);background:var(--header);border-radius:22px;padding:36px;text-align:center;box-shadow:0 25px 80px #0007}.trophy{display:grid;place-items:center;margin:auto;width:52px;height:52px;border-radius:50%;background:#d9ad4c;color:#fff;font-size:23px}.modal small{display:block;margin-top:18px;letter-spacing:2px;color:var(--muted)}.modal h2{font:30px Georgia,serif;margin:8px 0}.modal p{color:var(--muted)}.modal button{border:0;border-radius:10px;background:var(--ink);color:var(--header);padding:12px 24px;font-weight:700;cursor:pointer}@media(max-width:700px){.game{grid-template-rows:58px 68px minmax(300px,1fr) auto 30px}header{height:58px;padding:0 14px}.brand{min-width:0}.brand small,.round,.actions .icon-btn{display:none}.brand-tile{width:24px;height:36px}.actions{min-width:0;margin-left:auto}.new-btn{height:32px!important;padding:0 12px!important}.menu{right:12px;top:53px}.opponent{height:68px;padding:0 14px}.identity{min-width:60px}.enemy-hand{gap:2px}.enemy-hand .domino:nth-child(n+6){display:none}.score span{display:none}.table{padding:66px 64px 74px;min-height:300px}.chain{max-width:calc(100vw - 126px);gap:4px;padding:30px 5px}.end{width:48px;height:76px}.end.left{left:8px}.end.right{right:8px}.end small{font-size:6px}.board-tile .domino{width:39px;height:77px}.board-tile.double .domino{margin:0 19px}.boneyard{right:10px;bottom:15px}.status{bottom:17px;left:10px;transform:none;max-width:58vw;overflow:hidden;text-overflow:ellipsis}.mobile-layout-toggle{display:flex;align-items:center;gap:9px;position:absolute;z-index:4;top:10px;left:50%;transform:translate(-50%);height:44px;min-width:190px;padding:5px 10px;border:1px solid #ffffff45;border-radius:12px;background:#263b32d9;color:#fff;box-shadow:0 5px 16px #1b2b234d;cursor:pointer}.mobile-layout-toggle .toggle-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#ffffff17;font-size:20px}.mobile-layout-toggle span:nth-child(2){display:grid;text-align:left;line-height:1.05}.mobile-layout-toggle b{font-size:14px;letter-spacing:.2px}.mobile-layout-toggle small{font-size:8px;letter-spacing:1.5px;color:#d7dfd9;margin-top:3px}.mobile-layout-toggle i{width:34px;height:19px;border-radius:20px;background:#64736b;margin-left:auto;padding:3px;transition:.2s}.mobile-layout-toggle i:after{content:"";display:block;width:13px;height:13px;border-radius:50%;background:#fff;transition:.2s}.mobile-layout-toggle[aria-pressed=true]{border-color:var(--edge);box-shadow:0 0 0 3px #f2c85b30}.mobile-layout-toggle[aria-pressed=true] i{background:var(--accent)}.mobile-layout-toggle[aria-pressed=true] i:after{transform:translate(15px)}.player-area{grid-template-columns:minmax(0,1fr) 44px;min-height:132px;padding:8px 8px 7px}.your-label{display:none}.player-hand{display:grid;grid-template-columns:repeat(var(--hand-count),minmax(0,1fr));justify-items:center;grid-column:1;width:100%;overflow:visible;padding:18px 4px 4px;gap:3px}.player-hand .domino{width:100%;max-width:48px;height:auto;aspect-ratio:48/91;min-width:0;padding:clamp(2px,1vw,5px)}.player-hand .pip-face{padding:clamp(1px,.7vw,4px)}.player-hand .pip-face i{width:clamp(3px,1.2vw,5px);height:clamp(3px,1.2vw,5px)}.you-score{grid-column:2;grid-row:1}.you-score span{display:none}.vertical-mode .table{padding:128px 58px 112px;min-height:480px}.vertical-mode .chain{flex-direction:column;max-width:100%;max-height:270px;overflow-x:hidden;overflow-y:auto;padding:5px 30px}.vertical-mode .board-tile.double .domino{transform:none;margin:0}.vertical-mode .board-tile.double .domino:hover{transform:translateY(-5px)}.vertical-mode .end{left:50%;right:auto;width:90px;height:48px;transform:translate(-50%)}.vertical-mode .end.left{top:66px}.vertical-mode .end.right{top:auto;bottom:58px}.vertical-mode .end span{width:22px;height:22px}.vertical-mode .status{bottom:13px;max-width:53vw}.vertical-mode .boneyard{bottom:8px}footer{font-size:8px}footer i,footer i~*{display:none}}@media(max-height:650px)and (orientation:landscape){.game{grid-template-rows:50px 55px minmax(220px,1fr) 105px 0}header{height:50px}.opponent{height:55px}.table{min-height:220px;padding-top:25px;padding-bottom:45px}.player-area{min-height:105px}.player-hand .domino{width:42px;height:82px}.status{bottom:8px}.boneyard{bottom:7px}footer{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}