:root{--bg:#f3ece1;--ink:#3b2f25;--muted:#7a6a59;--panel:#fffaf2;--line:#e3d3bb;--table:#e3d3bb;--set:#f6ecdd;--tile:#fffdf8;--tile-edge:#d4c3a8;--placed:#fde7c7;--rack-top:#c9a275;--rack-bottom:#b88c5c;--accent:#c8553d;--accent-dark:#9c3e2b;--bad:#d64545;--t-red:#b3261e;--t-blue:#1d4e89;--t-orange:#b35900;--t-black:#1f1f1f;--radius:14px;--shadow:0 4px 14px #3b2f2526;--base-w:40px;--base-h:54px;--tile-w:var(--base-w);--tile-h:var(--base-h);--recent:#e7f0fb}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif}body.dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:.6em 1.1em;font-weight:700;transition:transform 80ms,filter .15s,opacity .15s}button:active{transform:translateY(1px)scale(.98)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);color:#fff;box-shadow:0 4px 0 var(--accent-dark)}button.secondary{background:var(--panel);color:var(--ink);box-shadow:0 3px 0 var(--tile-edge);border:1px solid var(--line)}button.danger{background:var(--bad);color:#fff;box-shadow:0 3px #9b2828}button.ghost{color:var(--ink);background:0 0;border:2px solid #3b2f254d}button.ghost:hover{border-color:var(--ink)}button.big{padding:.8em 1.4em;font-size:1.15rem}button.small{padding:.3em .7em;font-size:.85rem}input,select{font:inherit;border:2px solid var(--line);color:var(--ink);background:#fff;border-radius:10px;min-width:0;padding:.7em .9em}select{padding:.4em .6em}input:focus,select:focus{border-color:var(--accent);outline:3px solid #c8553d66}input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent);flex:none}.hidden{display:none!important}.muted{color:var(--muted)}.grow{flex:1}.c0{color:var(--t-red)}.c1{color:var(--t-blue)}.c2{color:var(--t-orange)}.c3{color:var(--t-black)}.topbar{justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;display:flex}.logo{letter-spacing:1px;font-family:Arial Black,Impact,sans-serif;font-size:1.6rem}.logo .c3{color:var(--panel);background:var(--t-black);border-radius:4px;padding:0 2px}.topbar-actions{gap:8px;display:flex}.banner{background:var(--bad);color:#fff;text-align:center;padding:8px;font-weight:700}.screen{padding:8px 16px 24px}.panel{background:var(--panel);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);padding:24px}.home-panel,.lobby-panel{flex-direction:column;gap:14px;max-width:440px;margin:24px auto;display:flex}.lobby-panel{max-width:520px}.lobby-panel h1{margin:0}.lobby-panel h2{margin:8px 0 0;font-size:1.1rem}.lobby-panel p{margin:0}.tagline{text-align:center;margin:0;font-weight:700}.field{flex-direction:column;gap:4px;font-weight:700;display:flex}.divider{text-align:center;color:var(--muted);border-top:1px solid var(--line);margin-top:8px}.divider span{background:var(--panel);padding:0 10px;position:relative;top:-.75em}.join-row,.share-row,.row{flex-wrap:wrap;gap:10px;display:flex}.join-row input,.share-row input{flex:1}.code-input{text-transform:uppercase;letter-spacing:4px;text-align:center;font-weight:800}.code{background:var(--ink);color:var(--panel);letter-spacing:3px;border-radius:8px;padding:0 10px;font-family:Courier New,monospace}.hero-tiles{--tile-w:54px;--tile-h:72px;justify-content:center;gap:4px;display:flex}.lobby-players{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.lobby-players li{background:var(--set);border-radius:10px;align-items:center;gap:8px;padding:8px 10px;display:flex}.lobby-players li .name{flex:1;font-weight:700}.badge{background:var(--line);border-radius:999px;padding:2px 8px;font-size:.75rem;font-weight:800}.badge.host{background:var(--accent);color:#fff}.badge.offline{background:#f3c1c1}.dot{background:#3f9f5f;border-radius:50%;flex:none;width:10px;height:10px}.dot.off{background:#aaa}.settings{flex-direction:column;gap:8px;display:flex}.setting{background:var(--set);border-radius:10px;justify-content:space-between;align-items:center;gap:10px;padding:6px 10px;display:flex}.tile{width:var(--tile-w);height:var(--tile-h);background:var(--tile);border:1px solid var(--tile-edge);box-shadow:0 3px 0 var(--tile-edge), 0 4px 6px #00000026;font-family:Arial Black,Segoe UI Black,system-ui,sans-serif;font-weight:900;font-size:calc(var(--tile-w) * .6);letter-spacing:-1px;-webkit-user-select:none;user-select:none;touch-action:none;cursor:grab;border-radius:6px;flex-direction:column;flex:none;justify-content:center;align-items:center;line-height:1;transition:transform .1s;display:flex}.tile.u span{text-underline-offset:2px;text-decoration:underline;text-decoration-thickness:2px}.tile:after{content:"";background:currentColor;border-radius:50%;width:6px;height:6px;margin-top:3px}.tile.placed{background:var(--placed)}.tile.selected{outline:3px solid var(--accent);outline-offset:1px;transform:translateY(-6px)}.tile.locked{cursor:default;opacity:.75}.tile.mini{--tile-w:24px;--tile-h:32px;box-shadow:0 1px 0 var(--tile-edge);cursor:default;letter-spacing:0}.tile.mini:after{display:none}.drag-ghost{z-index:50;pointer-events:none;filter:drop-shadow(0 8px 12px #0000004d);gap:2px;display:flex;position:fixed;transform:translate(-50%,-70%)rotate(-3deg)}.game-info{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;display:flex}.pill{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.9rem}.pill.timer.low{background:var(--bad);border-color:var(--bad);color:#fff;animation:1s infinite pulse}.code-pill{letter-spacing:2px;font-family:Courier New,monospace;font-weight:800}@keyframes pulse{50%{opacity:.6}}.players{flex-wrap:wrap;gap:8px;margin-bottom:10px;display:flex}.player{background:var(--panel);border:2px solid var(--line);border-radius:12px;align-items:center;gap:8px;padding:6px 10px;display:flex}.player.turn{border-color:var(--accent);box-shadow:0 0 0 3px #c8553d26}.player .name{font-weight:800}.player .count{color:var(--muted);font-size:.9rem}.swap-offer{background:var(--placed);border:2px solid var(--accent);border-radius:12px;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px;padding:8px 12px;font-weight:700;display:flex}.swap-offer span{flex:1;min-width:200px}.game-layout{grid-template-columns:1fr 240px;align-items:start;gap:14px;display:grid}.play-area{flex-direction:column;gap:10px;min-width:0;display:flex}.table{border-radius:var(--radius);background:var(--table);flex-wrap:wrap;align-content:flex-start;gap:12px 14px;min-height:220px;max-height:58vh;padding:12px;display:flex;overflow-y:auto;box-shadow:inset 0 2px 10px #3b2f2526}.table .empty{color:var(--muted);margin:auto}.set{background:var(--set);min-height:calc(var(--tile-h) + 18px);border:2px solid #0000;border-radius:10px;align-items:center;gap:2px;padding:6px 6px 8px;display:flex}.set.invalid{border-color:var(--bad);background:#f8dcd6}.set.target{cursor:pointer}.set.target:hover{border-color:var(--accent)}.set .slot{width:calc(var(--tile-w) * .8);height:var(--tile-h);border:2px dashed var(--accent);color:var(--accent);border-radius:6px;justify-content:center;align-items:center;margin-left:4px;font-size:1.4rem;font-weight:800;display:flex}.set.new-set{color:var(--muted);cursor:pointer;background:0 0;border:2px dashed #3b2f2559;justify-content:center;min-width:120px;padding:0 16px;font-weight:700}.set.new-set.target{border-color:var(--accent);color:var(--accent)}.status{text-align:center;min-height:1.4em;font-weight:700}.status.mine{color:var(--accent)}.rack-box{background:linear-gradient(180deg, var(--rack-top), var(--rack-bottom));border-radius:var(--radius);box-shadow:var(--shadow);padding:10px}.rack{min-height:calc(var(--tile-h) + 12px);border:2px solid #0000;border-radius:10px;flex-wrap:wrap;gap:5px;padding:4px 2px 8px;display:flex}.rack.target{border-color:var(--panel);cursor:pointer}.controls{flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;display:flex}.sidebar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}.sidebar h3{margin:0 0 6px;font-size:1rem}.log{max-height:60vh;margin:0;padding:0;font-size:.85rem;list-style:none;overflow-y:auto}.log li{border-bottom:1px solid var(--line);padding:4px 0}.log li.round{color:var(--accent);font-weight:800}.overlay{z-index:20;background:#3b2f258c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.overlay-panel{width:100%;max-width:620px;max-height:90vh;position:relative;overflow-y:auto}.overlay-panel h2{text-align:center;margin-top:0}.overlay-panel>p{text-align:center}.results{border-collapse:collapse;width:100%;margin:10px 0 18px}.results td,.results th{border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;padding:6px 4px}.results td.n,.results th.n{text-align:right;white-space:nowrap}.results tr.winner{background:var(--placed);font-weight:800}.mini-tiles{flex-wrap:wrap;gap:2px;display:flex}.result-actions{justify-content:center;margin-top:14px}.rules-panel{max-width:720px}.rules-panel h2{color:var(--accent);text-align:left;margin:18px 0 6px;font-size:1.1rem}.rules-panel h2:first-child{margin-top:0}.rules-panel span[class^=c]{font-weight:800}.close{color:var(--ink);background:0 0;padding:0 8px;font-size:1.6rem;position:absolute;top:8px;right:10px}.trophy{text-align:center;font-size:3rem}.toasts{z-index:30;pointer-events:none;flex-direction:column;gap:8px;width:min(92vw,460px);display:flex;position:fixed;top:70px;left:50%;transform:translate(-50%)}.toast{background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);text-align:center;border-radius:12px;padding:8px 12px;font-size:.95rem;font-weight:700;animation:.3s ease-out toastIn,.4s ease-in 2.6s forwards toastOut}.toast.bad{background:var(--bad);border-color:var(--bad);color:#fff}.toast.good{border:2px solid var(--accent);color:var(--accent)}@keyframes toastIn{0%{opacity:0;transform:translateY(-20px)}}@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}.tile.recent{background:var(--recent);box-shadow:0 3px #9fbbe0,0 0 0 2px #6d98d1}.set.changed:not(.invalid){border-color:#9fbbe0}.legend{color:var(--muted);margin-top:-4px;font-size:.8rem}.tool-group{gap:4px;display:flex}button.icon{min-width:34px;padding:.25em .5em;font-size:1rem;line-height:1.2}.player{position:relative}.bubble{background:var(--ink);width:max-content;max-width:220px;color:var(--panel);z-index:5;pointer-events:none;border-radius:12px;padding:4px 10px;font-size:.85rem;font-weight:700;animation:4s forwards bubble;position:absolute;bottom:calc(100% + 6px);left:8px}.bubble:after{content:"";border:6px solid #0000;border-top-color:var(--ink);position:absolute;top:100%;left:14px}.bubble.big{background:var(--panel);border:1px solid var(--line);padding:0 8px;font-size:1.5rem}.bubble.big:after{border-top-color:var(--panel)}@keyframes bubble{0%{opacity:0;transform:translateY(6px)scale(.8)}8%,85%{opacity:1;transform:none}to{opacity:0}}.players{padding-top:4px}.chat{flex-direction:column;gap:6px;margin-bottom:12px;display:flex}.reactions{flex-wrap:wrap;gap:4px;display:flex}button.reaction{background:var(--set);border:1px solid var(--line);border-radius:8px;padding:2px 6px;font-size:1.15rem}.chat-list{max-height:160px;margin:0;padding:0;font-size:.85rem;list-style:none;overflow-y:auto}.chat-list li{overflow-wrap:anywhere;padding:3px 0}.chat-list li.mine b{color:var(--accent)}.chat-list li.reaction-msg{font-size:1rem}.chat-form{gap:6px;display:flex}.chat-form input{flex:1;padding:.4em .6em}.table{--tile-w:calc(var(--base-w) * var(--zoom,1));--tile-h:calc(var(--base-h) * var(--zoom,1))}body.focus .topbar,body.focus .players,body.focus .sidebar,body.focus .game-info .code-pill,body.focus .game-info .leave,body.focus .legend{display:none}body.focus .screen{padding-top:8px}body.focus .game-layout{grid-template-columns:1fr}body.focus .table{height:calc(100dvh - 260px);min-height:160px;max-height:none}@media (orientation:landscape) and (max-height:520px){:root{--base-w:28px;--base-h:39px}.topbar{padding:4px 12px}.game-layout{grid-template-columns:1fr}.play-area{grid-template-rows:auto auto 1fr;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:8px;display:grid}.play-area .table{grid-area:1/1/span 3;height:calc(100dvh - 120px);min-height:0;max-height:none}body.focus .play-area .table{height:calc(100dvh - 60px)}.play-area .legend,.play-area .status,.play-area .rack-box{grid-column:2}.play-area .rack-box{align-self:start}.status{text-align:left;font-size:.85rem}.toasts{width:min(55vw,360px);top:auto;bottom:12px;left:24px;transform:none}}@media (max-width:860px){.game-layout{grid-template-columns:1fr}.sidebar .log{max-height:160px}}@media (max-width:520px){:root{--base-w:31px;--base-h:43px}.screen{padding:4px 8px 16px}.table{gap:8px;max-height:50vh;padding:8px}.set{padding:4px 4px 6px}.logo{font-size:1.25rem}.hero-tiles{--tile-w:46px;--tile-h:62px}}