:root{color-scheme:light dark;--font-base: "Inter", "Manrope", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;--font-display: "Poppins", "Inter", var(--font-base);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 22px;--elev-card: 0 6px 0 rgba(0, 0, 0, .22);--elev-pop: 0 12px 20px rgba(0, 0, 0, .25);--elev-modal: 0 20px 36px rgba(0, 0, 0, .35);--bg: #fff7ea;--surface: #fffef8;--surface-2: #f8f0dd;--text-primary: #2f2a20;--text-secondary: #5e5548;--border: #d6c5a5;--accent: #f88057;--success: #3abf7a;--warning: #ffb240;--danger: #ef5165;--tile-bg: #fff9f0;--tile-dot: #2e2a28;--table: radial-gradient(circle at top, #58bf7f 0%, #2e8f59 60%, #216a43 100%)}@media(prefers-color-scheme:dark){:root:not([data-theme=sunny]):not([data-theme=midnight]){--bg: #1b1c2b;--surface: #2a2e46;--surface-2: #22253a;--text-primary: #f6f2e8;--text-secondary: #d6cdbd;--border: #4b4f68;--accent: #ff8d66;--success: #68dca1;--warning: #ffd36b;--danger: #ff7e8c;--tile-bg: #f4f0e8;--tile-dot: #312f2f;--table: radial-gradient(circle at top, #2f8f5e 0%, #246a48 55%, #154531 100%)}}:root[data-theme=sunny]{--bg: #fff7ea;--surface: #fffef8;--surface-2: #f8f0dd;--text-primary: #2f2a20;--text-secondary: #5e5548;--border: #d6c5a5;--accent: #f88057;--success: #3abf7a;--warning: #ffb240;--danger: #ef5165;--tile-bg: #fff9f0;--tile-dot: #2e2a28;--table: radial-gradient(circle at top, #58bf7f 0%, #2e8f59 60%, #216a43 100%)}:root[data-theme=midnight]{color-scheme:dark;--bg: #171327;--surface: #272242;--surface-2: #1f1a36;--text-primary: #f4ecff;--text-secondary: #d2c4eb;--border: #50437b;--accent: #9e78ff;--success: #44d59f;--warning: #ffd273;--danger: #ff7288;--tile-bg: #f9f6ff;--tile-dot: #2d2940;--table: radial-gradient(circle at top, #3751b0 0%, #283778 58%, #18214a 100%)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:var(--font-base);background:var(--bg);color:var(--text-primary)}#app{min-height:100vh;width:min(100%,750px);margin:0 auto;padding:12px;display:grid;gap:8px;align-content:start}.display{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.4rem);margin:0}.subtitle{margin-top:0;color:var(--text-secondary)}h1,h2,h3,h4{margin:0;line-height:1.15}p{margin:0}small{line-height:1.2}.card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-md);padding:12px;box-shadow:var(--elev-card)}.grid{display:grid;gap:10px}.row{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}.shell-bar{display:flex;gap:var(--space-2);align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}.control{display:inline-flex;gap:var(--space-2);align-items:center;font-weight:600}.control input[type=range]{width:130px}button,input,select{border-radius:var(--radius-sm);border:2px solid var(--border);background:var(--surface-2);color:var(--text-primary);padding:10px 12px;font:inherit}button{cursor:pointer;font-weight:700;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}button:hover:not(:disabled):not(.domino){transform:translateY(-1px);filter:brightness(1.03)}button:active:not(:disabled):not(.domino){transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}.board .domino:disabled,.mini-hand .domino:disabled{opacity:1;filter:none}.btn-primary{background:var(--accent);color:#fff;border-color:transparent}.btn-secondary{background:var(--surface-2)}.btn-ghost{background:transparent}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 65%,white);outline-offset:2px}header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap}.players{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-2)}.player{background:var(--surface-2)}.current-player{border-color:var(--accent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}.badge{font-size:12px;line-height:1.2;padding:4px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border)}.badge.ok{border-color:color-mix(in srgb,var(--success) 65%,var(--border))}.badge.warn{border-color:color-mix(in srgb,var(--warning) 65%,var(--border))}.game-header .timer{font-size:1rem;font-weight:700;background:var(--surface-2);padding:4px 10px;border-radius:999px;border:2px solid var(--border)}.turn{font-weight:800}.turn-active{color:var(--accent);animation:pulse 1.25s ease-in-out infinite}.board{background:var(--table);border-radius:var(--radius-lg);border:2px solid color-mix(in srgb,var(--border) 45%,#2f2d2a);min-height:108px;padding:10px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-2);overflow:hidden}.board-rail{min-width:0;display:flex;align-items:center;gap:var(--space-2);overflow:hidden}.board-tile{flex:0 0 auto;transition:width .14s ease,opacity .14s ease}.board-tile.center-hidden{display:none}.board-hidden-marker{flex:0 0 auto;align-self:center;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:11px;padding:6px 4px;line-height:1;background:color-mix(in srgb,var(--surface) 88%,transparent);border-style:dashed}.drop-zone{flex:0 0 auto;min-width:28px;min-height:92px;border:2px dashed color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 8%,transparent);color:color-mix(in srgb,var(--text-secondary) 80%,transparent);font-weight:700;display:grid;place-items:center;transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}.drop-zone-text{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.65}.drop-zone:hover:not(:disabled),.drop-zone-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--text-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent),inset 0 0 18px color-mix(in srgb,var(--accent) 28%,transparent)}.drop-zone:hover:not(:disabled) .drop-zone-text,.drop-zone-active .drop-zone-text{opacity:.95}.hand{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:var(--space-2)}.domino{--domino-width: 74px;width:var(--domino-width);aspect-ratio:2 / 1;border:2px solid #ece2cf;border-radius:12px;background:var(--tile-bg);position:relative;box-shadow:0 3px #0000003d;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;padding:0;overflow:hidden}.domino:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.03)}.domino:active:not(:disabled){transform:translateY(1px)}.domino.vertical{width:calc(var(--domino-width) / 2);aspect-ratio:1 / 2;grid-template-columns:1fr;grid-template-rows:1fr auto 1fr}.domino .domino-divider{width:2px;background:color-mix(in srgb,var(--tile-dot) 50%,white)}.domino.vertical .domino-divider{width:100%;height:2px}.domino-half{position:relative;display:block}.dot{width:5px;height:5px;background:var(--tile-dot);border-radius:50%;position:absolute}.dot-top-left{left:23%;top:19%}.dot-top-right{right:23%;top:19%}.dot-middle-left{left:23%;top:44%}.dot-middle-right{right:23%;top:44%}.dot-bottom-left{left:23%;bottom:19%}.dot-bottom-right{right:23%;bottom:19%}.dot-center{left:50%;top:50%;transform:translate(-50%,-50%)}.domino.legal{border-color:color-mix(in srgb,var(--success) 70%,white);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 25%,transparent),0 4px #0003}.domino.selected{border-color:color-mix(in srgb,var(--accent) 70%,white);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent),0 4px #0003;transform:translateY(-3px)}.domino.last-placed{animation:pop-in .35s ease-out,glow 1.6s ease-in-out 2}.warning{color:var(--warning)}.error{background:color-mix(in srgb,var(--danger) 18%,var(--surface));border:2px solid color-mix(in srgb,var(--danger) 70%,var(--border));border-radius:var(--radius-sm);padding:var(--space-3)}.state{text-align:center;color:var(--text-secondary);font-weight:600;padding:var(--space-4)}.state-loading:after{content:"";width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 45%,var(--border));border-top-color:var(--accent);display:inline-block;margin-left:8px;animation:spin .8s linear infinite}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#08080e9e;display:grid;place-items:center;padding:var(--space-4)}.modal>.card{max-width:680px;width:100%;box-shadow:var(--elev-modal);max-height:85vh;overflow:auto}.round-summary-by-player{display:grid;gap:var(--space-2)}.round-player{background:var(--surface-2);align-content:center}.mini-hand{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;min-height:58px;gap:var(--space-2)}.mini-hand .domino{--domino-width: 58px}.landscape-note{opacity:.85;font-size:13px}@keyframes pop-in{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes glow{0%,to{box-shadow:0 0 color-mix(in srgb,var(--accent) 25%,transparent),0 4px #0000003d}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent),0 4px #0000003d}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.65}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(max-width:900px)and (orientation:landscape),(max-width:760px){#app{padding:8px}.card{padding:10px}.board{min-height:92px}.domino{--domino-width: 60px}.shell-bar{gap:var(--space-2)}.control{font-size:.9rem}}