:root{--bg:#eef3f4;--surface:#fff;--text:#1d2b30;--muted:#5f7277;--border:#d4dfe2;--accent:#1f4e5f;--accent-text:#fff;--error:#b3261e;--error-bg:#fbe9e7;--info-bg:#e3eef1;--board-bg:#c9d9dc;--square:#f4f7f6;--tw:#e08a7a;--dw:#f1c4b8;--tl:#6fa3c0;--dl:#bcd8e6;--tile:#f6e7c8;--tile-edge:#d9c49b;--tile-text:#2a2015;--placed:#ffe9a8;--last:#8fc7a6;--pending:#e0a83c;--radius:12px;color:var(--text);background:var(--bg);-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.45}@media (prefers-color-scheme:dark){:root{--bg:#10191c;--surface:#18252a;--text:#e6eef0;--muted:#93a7ac;--border:#2a3b40;--accent:#7fc3d6;--accent-text:#0c1416;--error:#f2928a;--error-bg:#3d2523;--info-bg:#1f3238;--board-bg:#0c1416;--square:#22333a;--tw:#9b4a3e;--dw:#7a4b44;--tl:#2f6584;--dl:#2f4f5f;--tile:#efe0c0;--tile-edge:#b9a479;--placed:#ffe08a}}*{box-sizing:border-box}body{min-height:100dvh;margin:0}a{color:var(--accent)}h1,h2{margin:0 0 .75rem;line-height:1.2}h2{font-size:1.05rem}button,select,input{font:inherit}button{border:1px solid var(--border);background:var(--surface);min-height:44px;color:var(--text);cursor:pointer;touch-action:manipulation;border-radius:10px;padding:.4rem .9rem}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}button.link{min-height:auto;color:var(--accent);background:0 0;border:0;padding:0;text-decoration:underline}button.danger{color:var(--error)}select{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:8px;width:100%;padding:.55rem .6rem}.muted{color:var(--muted)}.small{font-size:.85rem}.notice{background:var(--info-bg);border-radius:8px;padding:.75rem 1rem}.notice.error{background:var(--error-bg);color:var(--error)}.row{align-items:center;gap:.5rem;display:flex}.stack{gap:.85rem;display:grid}.topbar{padding:calc(.75rem + env(safe-area-inset-top)) 1rem .75rem;background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.brand{font-weight:700}.page{max-width:720px;padding:1rem calc(1rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));margin:0 auto}.home{gap:1rem;display:grid}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.15rem}.list{margin:0;padding:0;list-style:none}.list li+li{border-top:1px solid var(--border)}.game-link{color:inherit;justify-content:space-between;gap:1rem;padding:.75rem 0;text-decoration:none;display:flex}.badge{background:var(--info-bg);color:var(--muted);border-radius:999px;margin-left:.5rem;padding:.1rem .45rem;font-size:.75rem}label{gap:.3rem;font-weight:500;display:grid}.choices{border:0;gap:.5rem;margin:0;padding:0;display:grid}.choices legend{margin-bottom:.3rem;font-weight:500}.choice{border:1px solid var(--border);border-radius:10px;align-items:flex-start;gap:.6rem;padding:.6rem .75rem;font-weight:400;display:flex}.choice>span{display:grid}.choice input{margin-top:.3rem}.game{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-user-select:none;user-select:none;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top""board""controls";display:grid;position:fixed;inset:0}.scorebar{background:var(--surface);border-bottom:1px solid var(--border);grid-area:top;align-items:center;gap:.5rem;padding:.35rem .5rem;font-size:.95rem;display:flex}.scorebar .back{padding:0 .4rem;font-size:1.6rem;line-height:1;text-decoration:none}.player{border:2px solid #0000;border-radius:999px;align-items:baseline;gap:.35rem;min-width:0;padding:.2rem .55rem;display:inline-flex}.player .name{text-overflow:ellipsis;white-space:nowrap;max-width:7.5rem;overflow:hidden}.player .score{font-variant-numeric:tabular-nums;font-weight:700}.player.turn{border-color:var(--accent)}.player.resigned{opacity:.5;text-decoration:line-through}.scorebar .bag{color:var(--muted);white-space:nowrap;margin-left:auto;font-size:.85rem}button.icon{min-width:40px;min-height:40px;padding:0}.board-area{grid-area:board;min-height:0;padding:4px}.viewport{touch-action:none;border-radius:6px;width:100%;height:100%;position:relative;overflow:hidden}.board-content{transform-origin:0 0;position:absolute;top:0;left:0}.controls{background:var(--surface);border-top:1px solid var(--border);grid-area:controls;gap:.45rem;padding:.5rem .6rem .6rem;display:grid}.status{color:var(--muted);text-align:center;margin:0;font-size:.9rem}.status.yours{color:var(--accent);font-weight:600}.status.done{color:var(--text);font-weight:600}.hint{-webkit-line-clamp:3;line-clamp:3;text-align:left;-webkit-box-orient:vertical;align-self:center;min-width:0;max-width:16rem;height:44px;padding-top:2px;font-size:.78rem;line-height:1.2;display:-webkit-box;overflow:hidden}.hint.error{color:var(--error)}.respond{background:var(--info-bg);text-align:center;border-radius:10px;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;padding:.5rem;display:flex}.actions{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.6rem;display:grid}.actions .buttons{justify-content:center;align-items:center;gap:.5rem;display:flex}.actions .buttons>*{flex:none}@media (width<=599px){.actions{grid-template-columns:auto;justify-content:center;gap:.25rem}.actions-side{display:none}.actions .hint{text-align:center;-webkit-line-clamp:2;line-clamp:2;max-width:none;height:2.4em}}.actions .play{min-width:6.5rem}.menu{position:relative}.menu-items{background:var(--surface);border:1px solid var(--border);z-index:20;border-radius:12px;gap:4px;min-width:11rem;padding:6px;display:grid;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);box-shadow:0 6px 24px #0000002e}.side{max-height:70dvh;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));background:var(--surface);z-index:30;border-top-left-radius:16px;border-top-right-radius:16px;transition:transform .25s;position:fixed;bottom:0;left:0;right:0;overflow:auto;transform:translateY(105%);box-shadow:0 -8px 32px #0003}.side-open .side{transform:translateY(0)}.side-close{float:right}.history .moves{margin:0 0 1rem;padding:0;list-style:none}.history .moves li{border-bottom:1px solid var(--border);justify-content:space-between;gap:1rem;padding:.45rem 0;font-size:.9rem;display:flex}.history .pts{font-variant-numeric:tabular-nums;font-weight:600}.board{background:var(--board-bg);border-radius:4px;grid-template-rows:repeat(15,1fr);grid-template-columns:repeat(15,1fr);gap:1px;padding:1px;display:grid}.square{background:var(--square);border-radius:calc(var(--cell) * .08);font-size:calc(var(--cell) * .3);color:#0000008c;place-items:center;display:grid;position:relative;overflow:hidden}.p-tw{background:var(--tw)}.p-dw{background:var(--dw)}.p-tl{background:var(--tl);color:#ffffffd9}.p-dl{background:var(--dl)}@media (prefers-color-scheme:dark){.square{color:#fff9}}.square .label{letter-spacing:-.02em;font-weight:700}.square .star{font-size:calc(var(--cell) * .55)}.square.cursor{outline:2px solid var(--accent);outline-offset:-2px}.square.cursor:after{font-size:calc(var(--cell) * .35);color:var(--accent);font-weight:700;position:absolute;top:0;right:4%}.square.cursor-across:after{content:"→"}.square.cursor-down:after{content:"↓"}@media (hover:hover) and (pointer:fine){.square:hover{box-shadow:inset 0 0 0 2px var(--accent)}.rack-slot:hover .tile{filter:brightness(1.04)}button:not(:disabled):hover{filter:brightness(.96)}}.last-move{text-align:center;margin:0}.tile{background:var(--tile);width:100%;height:100%;color:var(--tile-text);border-radius:calc(var(--cell) * .12);box-shadow:inset 0 calc(var(--cell) * -.06) 0 var(--tile-edge);place-items:center;font-weight:700;display:grid;position:relative}.square .tile .letter{font-size:calc(var(--cell) * .6);line-height:1}.tile .value{font-size:.32em;font-weight:600;position:absolute;bottom:6%;right:8%}.square .tile .value{font-size:calc(var(--cell) * .24)}.tile.blank .letter{color:#8a6d3b;font-style:italic}.square.last .tile{box-shadow:inset 0 calc(var(--cell) * -.06) 0 var(--tile-edge), inset 0 0 0 2px var(--last)}.square.pending .tile{box-shadow:inset 0 calc(var(--cell) * -.06) 0 var(--tile-edge), inset 0 0 0 2px var(--pending);opacity:.85}.placed-wrap{display:contents}.tile.placed{background:var(--placed);cursor:grab;touch-action:none}.rack{--rack-tile:min(12.5vw, 64px);min-height:var(--rack-tile);justify-content:center;gap:6px;display:flex}.rack-slot{width:var(--rack-tile);height:var(--rack-tile);font-size:calc(var(--rack-tile) * .58);touch-action:none;cursor:grab;transition:transform .12s}.rack-slot .tile{--cell:var(--rack-tile)}.rack-slot.selected{transform:translateY(-8px)}.rack-slot.selected .tile{outline:3px solid var(--accent);outline-offset:1px}.drag-ghost{--cell:52px;pointer-events:none;z-index:50;filter:drop-shadow(0 6px 10px #0000004d);width:52px;height:52px;font-size:30px;position:fixed;top:-26px;left:-26px}.drag-ghost .tile{transform:translateY(-22px)scale(1.08)}.modal-backdrop{z-index:40;background:#00000073;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.modal{background:var(--surface);border-radius:16px;justify-items:center;gap:.75rem;width:min(420px,100%);padding:1.25rem;display:grid}.letter-grid{grid-template-columns:repeat(7,1fr);gap:6px;width:100%;display:grid}.letter-grid button{padding:0;font-size:1.1rem;font-weight:700}@media (width>=900px) and (aspect-ratio>=1){.game{grid-template-columns:minmax(0,1fr) minmax(280px,340px);grid-template-areas:"top top""board side""controls side"}.side{max-height:none;box-shadow:none;border-left:1px solid var(--border);border-radius:0;grid-area:side;transition:none;position:static;transform:none}.side-toggle,.side-close{display:none}.board-area{padding:12px}}@media (prefers-reduced-motion:reduce){.side,.rack-slot{transition:none}}.friend-picks{flex-wrap:wrap;gap:.5rem;display:flex}.pick{border:1px solid var(--border);cursor:pointer;border-radius:999px;align-items:center;gap:.4rem;padding:.45rem .8rem;font-weight:400;display:inline-flex}.pick.on{border-color:var(--accent);background:var(--info-bg);font-weight:600}.pick input{margin:0}.invitation{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.65rem 0;display:flex}.invitations{border-color:var(--accent)}.scorebar.players-3 .player,.scorebar.players-4 .player{gap:.25rem;padding:.15rem .4rem;font-size:.85rem}.scorebar.players-3 .player .name{max-width:4.5rem}.scorebar.players-4 .player .name{max-width:3.2rem}@media (width<=480px){.scorebar.players-4 .bag{display:none}}