:root{--bg: #1c1a17;--panel: #2a2722;--panel-raised: #353128;--board: #c9a36a;--line: #4a3a26;--border: #4f4a42;--accent: #e8b04b;--accent-bright: #f0bd62;--text: #f0ead9;--muted: #a89c84;--white-piece: #f5f1e6;--piece-w-stroke: #8a7a55;--black-piece: #2b2b2b;--piece-b-stroke: #000;--danger: #e06c5a;--space-xs: 8px;--space-sm: 12px;--space-md: 16px;--space-lg: 24px;--space-xl: 40px;--ease-out-quint: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}:focus-visible{outline:2px solid var(--text);outline-offset:2px}body{margin:0;background:var(--bg);color:var(--text);font-family:Avenir Next,Segoe UI,system-ui,sans-serif;letter-spacing:.01em;line-height:1.5}.screen{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--space-md);padding:var(--space-lg);padding-top:clamp(48px,14svh,130px);padding-left:max(var(--space-lg),env(safe-area-inset-left));padding-right:max(var(--space-lg),env(safe-area-inset-right));padding-bottom:max(var(--space-lg),env(safe-area-inset-bottom));animation:screen-in .2s ease-out}@keyframes screen-in{0%{opacity:0}to{opacity:1}}h1{font-size:2rem;font-weight:600;letter-spacing:.02em;line-height:1.15;margin:0;margin-bottom:var(--space-sm);text-align:center;text-wrap:balance}.screen>p{margin:0}input{background:var(--panel);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:1rem;padding:10px 14px;text-align:center}input::placeholder{color:var(--muted);opacity:1}button{background:var(--accent);border:none;border-radius:8px;color:#221a08;cursor:pointer;font-size:1rem;font-weight:600;padding:10px 20px;transition:background .15s ease,transform .1s ease}button:hover:not(:disabled){background:var(--accent-bright)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.4;cursor:default}.remembered-name{color:var(--muted);font-size:1rem;text-align:center}.remembered-name strong{color:var(--text)}.home-actions{display:flex;flex-direction:column;gap:var(--space-sm);align-items:center}.join-row{display:flex;gap:var(--space-xs)}.join-row input{width:110px;text-transform:uppercase;letter-spacing:.2em}.manual-join{color:var(--muted);font-size:.95rem;text-align:center}.manual-join summary{cursor:pointer;list-style:none}.manual-join summary::-webkit-details-marker{display:none}.manual-join .join-row{margin-top:var(--space-sm);justify-content:center}.invite-url{background:var(--panel);border-radius:12px;font-size:.85rem;max-width:min(100%,360px);overflow-wrap:anywhere;padding:14px 18px;text-align:center;word-break:break-all}.home-link{margin-top:var(--space-xs)}.room-code{background:var(--panel);border-radius:12px;font-size:2.6rem;font-weight:700;letter-spacing:.35em;padding:16px 28px 16px 40px}.screen>p+.room-code{margin-top:calc(-1 * var(--space-xs))}.error{color:var(--danger)}.notice{color:var(--accent)}.error,.notice,.hint{animation:fade-in .2s var(--ease-out-quint)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.conn-banner{background:var(--panel);border-bottom:1px solid var(--border);color:var(--text);font-size:.9rem;left:0;padding:8px 16px;padding-top:max(8px,env(safe-area-inset-top));position:fixed;right:0;text-align:center;top:0;z-index:1;animation:banner-in .25s var(--ease-out-quint)}@keyframes banner-in{0%{transform:translateY(-100%)}to{transform:none}}button.danger{background:var(--panel);border:1px solid var(--danger);color:var(--danger)}.confirm-note{align-self:center;color:var(--text);font-size:.9rem}.howto{color:var(--muted);font-size:.95rem;margin-top:var(--space-lg);max-width:46ch}.howto summary{cursor:pointer;letter-spacing:.02em;text-align:center;transition:color .15s ease;width:fit-content;margin:0 auto}.howto summary:hover,.howto[open] summary{color:var(--text)}.howto dl{display:flex;flex-direction:column;gap:var(--space-sm);margin:var(--space-sm) 0 0;text-align:left}.howto dl>div{display:grid;gap:var(--space-xs);grid-template-columns:3.5em 1fr}.howto dt{color:var(--text);font-weight:600}.howto dd{line-height:1.5;margin:0;text-wrap:pretty}.waiting-note{color:var(--muted);font-size:.95rem;margin:0}button.copy{border:1px solid transparent;min-width:8.5em;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease}button.copy.copied{background:var(--panel);border-color:var(--border);color:var(--text)}button.copy.copied:hover:not(:disabled){background:var(--panel)}button.copy.failed{background:var(--panel);border-color:var(--danger);color:var(--danger)}button.copy.failed:hover:not(:disabled){background:var(--panel)}.visually-hidden{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.hint{color:var(--muted);font-size:.9rem;line-height:1.5;margin:0;max-width:52ch;min-height:1.5em;text-align:center;text-wrap:pretty}button.link{background:none;border:none;border-radius:0;color:var(--text);font-size:inherit;font-weight:600;margin-left:8px;padding:0;text-decoration:underline;text-underline-offset:3px}@media(max-width:560px){.hud{display:grid;gap:var(--space-sm);grid-template-areas:"status status" "seat-w seat-b";grid-template-columns:1fr 1fr}.hud .status{grid-area:status}.hud .player-card:first-child{grid-area:seat-w}.hud .player-card:last-child{grid-area:seat-b}.player-card{min-width:0}.name-text{max-width:9ch}}@media(pointer:coarse){button{padding:12px 20px}input{padding:12px 14px}button.link{margin-left:4px;padding:6px 8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}button:active:not(:disabled){transform:none}}.game{justify-content:flex-start;padding-top:var(--space-md)}.hud{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);width:min(92vw,700px)}.player-card{background:var(--panel);border:2px solid transparent;border-radius:10px;display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);min-width:160px}.player-card.active{border-color:var(--accent)}.swatch{border-radius:50%;display:inline-block;height:18px;width:18px}.swatch-w{background:var(--white-piece)}.swatch-b{background:var(--black-piece);border:1px solid var(--border)}.player-meta{min-width:0}.player-name{font-weight:600;white-space:nowrap}.offline{color:var(--muted);font-weight:400}.name-text{display:inline-block;max-width:13ch;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}.player-counts{color:var(--muted);font-size:.8rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}.status{text-align:center}.room-tag{color:var(--muted);font-size:.8rem;letter-spacing:.1em}.status-text{font-weight:600}.status-text.my-turn{color:var(--accent)}.status-text.win{animation:win-settle .5s var(--ease-out-quint);color:var(--accent);font-size:1.25rem}.status-text.loss{font-size:1.1rem}@keyframes win-settle{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.board{background:var(--board);border-radius:14px;box-shadow:0 8px 30px #00000073;margin-top:var(--space-sm);width:min(92vw,640px);width:min(92vw,78svh,640px);height:auto}.board-line{stroke:var(--line);stroke-width:5;stroke-linecap:round}.point .point-dot{fill:var(--line);transition:r .15s var(--ease-out-quint),fill .15s var(--ease-out-quint);transform-box:fill-box;transform-origin:center}.point.piece-w .point-dot{fill:var(--white-piece);stroke:var(--piece-w-stroke);stroke-width:2}.point.piece-b .point-dot{fill:var(--black-piece);stroke:var(--piece-b-stroke);stroke-width:2}.point.interactive{cursor:pointer}.point:focus-visible{outline:none}.point:focus-visible .hit{stroke:var(--text);stroke-width:2}.point.target .point-dot{fill:#6f8f5a;r:13}.point.selected .point-dot{stroke:var(--accent);stroke-width:4}.point.removable .point-dot{stroke:var(--danger);stroke-width:4}.point.last-move .point-dot{animation:piece-land .25s var(--ease-out-quint);filter:drop-shadow(0 0 6px rgba(232,176,75,.9))}@keyframes piece-land{0%{transform:scale(1.25)}to{transform:scale(1)}}.point.mill-point .point-dot{animation:mill-pulse .6s var(--ease-out-quint)}@keyframes mill-pulse{0%{filter:drop-shadow(0 0 0 rgba(232,176,75,0))}30%{filter:drop-shadow(0 0 16px rgba(232,176,75,1))}to{filter:drop-shadow(0 0 6px rgba(232,176,75,.9))}}.point.winner-piece .point-dot{animation:winner-glow 1.6s var(--ease-out-quint) forwards}.point.loser-piece .point-dot{opacity:.55;transition:opacity .6s ease}@keyframes winner-glow{0%{filter:none}35%{filter:drop-shadow(0 0 14px rgba(232,176,75,.95))}to{filter:drop-shadow(0 0 5px rgba(232,176,75,.55))}}.game-actions,.waiting-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center;margin-top:var(--space-sm)}button.secondary{background:var(--panel);border:1px solid var(--border);color:var(--text);transition:background .15s ease,border-color .15s ease,transform .1s ease}button.secondary:hover:not(:disabled){background:var(--panel-raised);border-color:var(--muted)}button.danger:hover:not(:disabled){background:#e06c5a1f}button.link:hover:not(:disabled){background:none;color:var(--accent)}