:root{--vh: 1vh}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none;background-color:var(--bg, #0b1220)}html,body{touch-action:manipulation;overflow-x:hidden;max-width:100%}body{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box}input,textarea,[contenteditable],.selectable{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}button,[role=button],a,label,summary{touch-action:manipulation}button,input,select,textarea{font-family:inherit;font-size:inherit}input,textarea,select{font-size:max(16px,1em)}button,[role=button]{min-height:44px;min-width:44px;cursor:pointer}.board,.field,canvas,.drag-surface{touch-action:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}[hidden]{display:none!important}:root{--bg: #0b1220;--panel: #16213a;--cell: #1c2b4a;--line: #2a3c63;--p0: #f0a04b;--p1: #2ec4b6;--stone: #e8e6e3;--well: #8a7cff;--fg: #e8ecf5;--muted: #8fa0bf;--danger: #ff6b6b;--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 24px;--s6: 32px;--s7: 48px;--r-sm: 6px;--r-md: 10px;--r-lg: 16px;--r-pill: 999px;--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--shadow-1: 0 1px 2px rgb(0 0 0 / .3);--shadow-2: 0 6px 20px rgb(0 0 0 / .35);--ring: 0 0 0 2px rgb(138 124 255 / .55);--ease: cubic-bezier(.22, .61, .36, 1)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.5;background-image:radial-gradient(120% 80% at 50% 32%,rgb(138 124 255 / .09),transparent 70%);background-attachment:fixed}h1,h2,h3,p{margin:0}#app{min-height:calc(var(--vh) * 100);display:flex;flex-direction:column}.main-content{flex:1 0 auto;display:flex;flex-direction:column;align-items:center}.site-footer{flex-shrink:0;padding:var(--s5) var(--s4);text-align:center;font-size:13px;color:var(--muted)}.site-footer a{color:var(--muted);text-decoration:none}.site-footer a:hover,.site-footer a:focus-visible{color:var(--fg);text-decoration:underline}.screen{width:100%;max-width:560px;margin:0 auto;padding:var(--s5) var(--s4);display:flex;flex-direction:column;align-items:center;gap:var(--s4)}.screen.wide{max-width:760px}.title{margin:0;font-size:clamp(34px,11vw,52px);font-weight:600;line-height:1.05;letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;text-align:center;background:linear-gradient(180deg,var(--fg),#b9c6e2);-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{max-width:34ch;text-align:center;color:var(--muted);font-size:15px;line-height:1.55;text-wrap:balance}.btn{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:inherit;font-weight:550;letter-spacing:.01em;padding:var(--s3) var(--s5);border-radius:var(--r-pill);box-shadow:var(--shadow-1);transition:background .16s var(--ease),border-color .16s var(--ease),transform 90ms var(--ease)}.btn:hover{background:#1d2b4c;border-color:#38508a}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:2px solid var(--well);outline-offset:3px}.btn:disabled{opacity:.4;pointer-events:none}.btn.primary{background:linear-gradient(180deg,#9a8dff,#6f5fe6);border-color:#9a8dff;color:#0b1220;font-weight:650;box-shadow:var(--shadow-1),0 6px 22px #8a7cff4d}.btn.primary:hover{background:linear-gradient(180deg,#a99dff,#7d6df0)}.btn.ghost{background:transparent;border-color:transparent;color:var(--muted);box-shadow:none}.btn.ghost:hover{background:#ffffff0d;color:var(--fg)}.btn-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3)}.board{--n: 5;--h: 40px;--hgap: 6px;--hpad: calc(var(--h) * 2 + var(--hgap) + var(--s1));width:100%;max-width:340px;padding:0 var(--hpad) var(--hpad) 0;margin-inline:auto}.bd-grid{position:relative;width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--n),1fr) 0 0;grid-template-rows:repeat(var(--n),1fr) 0 0;gap:0}.bd-cell{background:var(--cell);border:1px solid var(--line);border-radius:var(--r-sm);margin:1px;box-shadow:inset 0 1px #ffffff0a,inset 0 -2px 6px #00000040;transition:background .18s var(--ease),box-shadow .18s var(--ease)}.bd-cell.is-well{background:color-mix(in srgb,var(--well) 22%,var(--cell));border-color:color-mix(in srgb,var(--well) 55%,var(--line));box-shadow:inset 0 0 0 1px #8a7cff80,inset 0 0 14px #8a7cff59,0 0 18px #8a7cff38}.bd-cell.is-rising{border-style:dashed;border-color:color-mix(in srgb,var(--well) 45%,var(--line));background:color-mix(in srgb,var(--well) 7%,var(--cell))}.bd-cell.is-lit{background:color-mix(in srgb,#ffffff 7%,var(--cell));box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 -2px 6px #00000040}.bd-cell.is-well.is-lit{background:color-mix(in srgb,var(--well) 32%,var(--cell))}.bd-stones{position:relative;grid-area:1 / 1 / span var(--n) / span var(--n);pointer-events:none}.bd-stone{position:absolute;top:0;left:0;width:calc(100% / var(--n));height:calc(100% / var(--n));will-change:transform;transition:transform .22s var(--ease),opacity .22s linear}.bd-stone:before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff,var(--stone) 45%,#b3afa8 100%);box-shadow:0 2px 6px #00000073,inset 0 -2px 4px #0000002e}.bd-ghost{opacity:.4;transition:none}.bd-ghost:before{background:none;box-shadow:none;border:2px dashed var(--stone)}.bd-stone.is-banked{animation:bank .38s var(--ease) forwards}@keyframes bank{0%{opacity:1}45%{opacity:1}to{opacity:0}}.bd-stone.is-banked:before{animation:bank-pop .38s var(--ease) forwards}@keyframes bank-pop{0%{transform:scale(1);box-shadow:0 2px 6px #00000073}45%{transform:scale(1.35);box-shadow:0 0 22px #8a7cffe6}to{transform:scale(.2);box-shadow:0 0 #8a7cff00}}.bd-stone.is-wrapping,.bd-stone.is-arriving{opacity:0}.bd-handle{position:relative;min-width:0;min-height:0;width:var(--h);height:var(--h);padding:0;display:flex;align-items:center;justify-content:center;appearance:none;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--muted);box-shadow:var(--shadow-1);transition:background .14s var(--ease),color .14s var(--ease),border-color .14s var(--ease),opacity .14s var(--ease)}.bd-handle:before{content:"";position:absolute;inset:-4px -2px}.h-top:before,.h-bottom:before{inset:-2px -4px}.h-left,.h-right{justify-self:start;align-self:center}.h-left{left:var(--s1)}.h-right{left:calc(var(--h) + var(--hgap) + var(--s1))}.h-top,.h-bottom{justify-self:center;align-self:start}.h-top{top:var(--s1)}.h-bottom{top:calc(var(--h) + var(--hgap) + var(--s1))}.bd-handle:hover,.bd-handle:focus-visible{background:#21325a;border-color:#3f5a99;color:var(--fg)}.bd-handle:focus-visible{outline:2px solid var(--well);outline-offset:2px;z-index:2}.bd-handle:active{background:#2a3f6f}.bd-handle:disabled{opacity:.25;pointer-events:none}.board.is-idle .bd-handle{opacity:.3}.bd-arrow{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;transition:transform .14s var(--ease)}.h-left .bd-arrow{transform:rotate(0)}.h-right .bd-arrow{transform:rotate(180deg)}.h-top .bd-arrow{transform:rotate(90deg)}.h-bottom .bd-arrow{transform:rotate(-90deg)}.bd-handle.is-locked,.bd-handle.is-locked:disabled{opacity:.8;border-style:dashed;border-color:var(--muted);background:repeating-linear-gradient(-45deg,#16213a,#16213a 4px,#1d2a48 4px 8px)}.bd-handle.is-locked .bd-arrow{opacity:0}.bd-handle.is-locked:after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3.2 6.5V4.2a2.8 2.8 0 0 1 5.6 0v2.3' fill='none' stroke='%238fa0bf' stroke-width='1.5'/%3E%3Crect x='1.6' y='6.3' width='8.8' height='6.6' rx='1.4' fill='%238fa0bf'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:14px 16px}.hud{width:100%;max-width:340px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--s2)}.hud-player{flex:1 1 40%;min-width:0;display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:inset 0 1px #ffffff08;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}.hud-player.is-turn{border-color:var(--well);box-shadow:0 0 0 1px var(--well),0 0 18px #8a7cff47}.hud-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--muted)}.hud-player.is-turn .hud-name{color:var(--fg)}.hud-score{font-size:24px;font-weight:650;line-height:1;font-variant-numeric:tabular-nums}.seat-mark{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.25em;font-size:15px;line-height:1}.seat-mark.seat-0{color:var(--p0)}.seat-mark.seat-1{color:var(--p1)}.hud-tide{flex:1 0 100%;display:flex;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r-pill);background:#8a7cff14;border:1px solid rgb(138 124 255 / .2);font-size:13px;color:var(--muted);letter-spacing:.02em}.tide-pips{display:flex;gap:var(--s1)}.pip{width:8px;height:8px;border-radius:50%;border:1px solid color-mix(in srgb,var(--well) 45%,transparent);background:transparent;transition:background .24s var(--ease),box-shadow .24s var(--ease)}.pip.on{background:var(--well);box-shadow:0 0 8px #8a7cffbf}.countdown{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgb(11 18 32 / .72),rgb(11 18 32 / .35) 70%,transparent)}.cd-num{font-size:clamp(72px,26vw,128px);font-weight:700;line-height:1;letter-spacing:.04em;color:var(--fg);text-shadow:0 0 40px rgb(138 124 255 / .65)}.cd-tick{animation:cd-tick 1s var(--ease) both}.cd-go{color:var(--well);animation:cd-go .45s var(--ease) both}@keyframes cd-tick{0%{transform:scale(1.5);opacity:0}18%{transform:scale(1);opacity:1}to{transform:scale(.86);opacity:.45}}@keyframes cd-go{0%{transform:scale(.6);opacity:0}35%{transform:scale(1.15);opacity:1}to{transform:scale(1);opacity:0}}.countdown.reduced .cd-num{animation:none;opacity:1;transform:none}.lobby,.room-entry{width:100%;max-width:460px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--s4);padding:var(--s5);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2)}.lobby-head,.re-head{display:flex;flex-direction:column;gap:var(--s1);text-align:center}.lobby-title,.re-title{font-size:18px;font-weight:550;color:var(--muted);letter-spacing:.02em}.lobby-code{display:block;margin-top:var(--s2);font-family:var(--font-mono);font-size:clamp(38px,13vw,52px);font-weight:700;letter-spacing:.22em;text-indent:.22em;color:var(--fg);text-shadow:0 0 30px rgb(138 124 255 / .4);user-select:text;-webkit-user-select:text}.lobby-sub,.re-sub{font-size:13px;color:var(--muted)}.lobby-invite{display:flex;gap:var(--s2)}.lobby-link{flex:1;min-width:0;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--muted);font-family:var(--font-mono);text-overflow:ellipsis}.lobby-link:focus-visible{outline:2px solid var(--well);outline-offset:1px;color:var(--fg)}.lobby-btn{appearance:none;border:1px solid var(--line);border-radius:var(--r-pill);background:#1d2b4c;color:var(--fg);font:inherit;font-weight:550;padding:var(--s2) var(--s4);white-space:nowrap;transition:background .15s var(--ease),border-color .15s var(--ease),opacity .15s var(--ease)}.lobby-btn:hover{background:#26385f;border-color:#3f5a99}.lobby-btn:focus-visible{outline:2px solid var(--well);outline-offset:3px}.lobby-btn:disabled{opacity:.4;pointer-events:none}.lobby-btn.primary{background:linear-gradient(180deg,#9a8dff,#6f5fe6);border-color:#9a8dff;color:#0b1220;font-weight:650}.lobby-btn.primary:hover{background:linear-gradient(180deg,#a99dff,#7d6df0)}.lobby-btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}.lobby-btn.ghost:hover{background:#ffffff0d;color:var(--fg)}.lobby-players{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}.lobby-player{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}.lobby-player.is-self{border-color:#3f5a99}.lobby-dot{flex:none;width:10px;height:10px;border-radius:50%;border:1px solid var(--muted);background:transparent;transition:background .2s var(--ease),box-shadow .2s var(--ease)}.lobby-dot.ready{background:var(--p1);border-color:var(--p1);box-shadow:0 0 8px #2ec4b6cc}.lobby-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.lobby-badge{flex:none;padding:2px var(--s2);border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.1em}.lobby-badge.ok{border-color:color-mix(in srgb,var(--p1) 60%,transparent);color:var(--p1);background:color-mix(in srgb,var(--p1) 12%,transparent)}.lobby-searching,.lobby-wait{display:flex;align-items:center;justify-content:center;gap:var(--s2);font-size:13px;color:var(--muted);text-align:center}.lobby-actions{display:flex;flex-direction:column;gap:var(--s2)}.lobby-flash{min-height:18px;text-align:center;font-size:12px;color:var(--p1);opacity:0;transition:opacity .2s var(--ease)}.lobby-flash.show{opacity:1}.spinner{flex:none;display:inline-block;width:16px;height:16px;border:2px solid rgb(138 124 255 / .25);border-top-color:var(--well);border-radius:50%;animation:spin .72s linear infinite}.spinner.sm{width:12px;height:12px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}.re-create{width:100%}.re-divider{display:flex;align-items:center;gap:var(--s3);color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase}.re-divider:before,.re-divider:after{content:"";flex:1;height:1px;background:var(--line)}.re-join{display:flex;gap:var(--s2)}.re-input{flex:1;min-width:0;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--fg);font-family:var(--font-mono);font-size:max(16px,1em);font-weight:600;letter-spacing:.18em;text-align:center;text-transform:uppercase}.re-input::placeholder{color:var(--muted);letter-spacing:.04em;text-transform:none;font-weight:400}.re-input:focus-visible{outline:2px solid var(--well);outline-offset:1px;border-color:var(--well)}.re-go{flex:none}.re-error{min-height:18px;text-align:center;font-size:13px;color:var(--danger)}.re-cancel{align-self:center}.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--s4);background:#060a14b8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.modal-panel{position:relative;width:100%;max-width:420px;max-height:calc(var(--vh) * 84);overflow-y:auto;padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow-2)}.modal h2{margin-bottom:var(--s3);font-size:20px;font-weight:600;letter-spacing:.01em}.modal p{margin-bottom:var(--s3);max-width:46ch;line-height:1.6;color:var(--fg)}.modal p:last-of-type{margin-bottom:var(--s4)}.modal strong{color:#fff;font-weight:620}.modal-close{display:block;width:100%}.results{width:100%;max-width:460px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--s4);text-align:center}.res-title{font-size:clamp(24px,7vw,32px);font-weight:650;letter-spacing:.02em}.res-table{display:flex;flex-direction:column;gap:var(--s2)}.res-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);text-align:left}.res-row.is-you{border-color:var(--well);box-shadow:0 0 0 1px #8a7cff66}.res-cell{flex:1;min-width:0;font-size:14px;font-variant-numeric:tabular-nums}.res-cell:last-child{flex:none;font-size:20px;font-weight:650}.res-note{font-size:13px;color:var(--muted);text-wrap:balance}.res-wait{display:flex;align-items:center;justify-content:center;gap:var(--s2);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.mode-list{width:100%;display:flex;flex-direction:column;gap:var(--s2)}.mode{appearance:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);color:var(--fg);font:inherit;text-align:left;transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease)}.mode:hover{border-color:#3f5a99;background:#1d2b4c}.mode:focus-visible{outline:2px solid var(--well);outline-offset:2px}.mode.is-on{border-color:var(--well);background:color-mix(in srgb,var(--well) 12%,var(--panel));box-shadow:0 0 0 1px var(--well)}.seg{display:inline-flex;gap:var(--s1);padding:var(--s1);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel)}.seg .diff{min-height:40px;padding-inline:var(--s3);border-radius:var(--r-pill);font-size:14px;text-transform:capitalize}.seg .diff.is-on{background:color-mix(in srgb,var(--well) 22%,var(--panel));border-color:var(--well);color:#fff;box-shadow:0 0 0 1px var(--well)}.mode[disabled]{opacity:.45;pointer-events:none}.mode-name{font-size:16px;font-weight:600;letter-spacing:.01em}.mode-blurb{font-size:13px;color:var(--muted);line-height:1.45}@media(prefers-reduced-motion:reduce){.bd-stone,.bd-stone.is-wrapping,.bd-stone.is-arriving{transition:none!important}.bd-stone.is-banked,.bd-stone.is-banked:before{animation:none!important;opacity:0;transform:none}.cd-num,.cd-tick,.cd-go{animation:none!important;transform:none!important;opacity:1}.btn:active,.bd-arrow{transition:none!important}}@media(max-width:420px){.screen{padding:var(--s4) var(--s3);gap:var(--s3)}.title{font-size:clamp(28px,9vw,38px);letter-spacing:.12em;text-indent:.12em}.tagline{font-size:14px}.board,.hud,.hud-tide{max-width:min(340px,100%)}.hud-player{padding:var(--s2);gap:var(--s1)}.hud-name{font-size:12px}.hud-score{font-size:20px}.lobby,.room-entry{padding:var(--s4);gap:var(--s3)}}