.toast{left:50%;bottom:max(var(--space-5), env(safe-area-inset-bottom));z-index:var(--z-toast);justify-content:center;align-items:center;gap:var(--space-2);max-width:min(28rem,100% - 2rem);padding:var(--space-3) var(--space-5);border:1px solid var(--line-strong);border-radius:var(--r-pill);background-color:var(--surface-strong);color:var(--ink);text-align:center;box-shadow:var(--shadow-lift);animation:toast-in var(--dur-base) var(--ease-out-quart) both;font-size:.95rem;font-weight:700;display:flex;position:fixed;transform:translate(-50%)}.toast--online,.toast--offline{padding:.45rem .9rem;font-size:.88rem}.toast__dot{border-radius:var(--r-pill);background-color:var(--ink-soft);flex-shrink:0;width:.45rem;height:.45rem}.toast--online .toast__dot{background-color:var(--mark-o);box-shadow:0 0 .55rem var(--mark-o)}.toast--offline .toast__dot{background-color:var(--mark-x);box-shadow:0 0 .55rem var(--mark-x)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(.5rem)}to{opacity:1;transform:translate(-50%)translateY(0)}}@media (prefers-reduced-motion:reduce){.toast{animation-duration:1ms}}.board{border-radius:var(--r-lg);background-color:var(--bg-lift);min-height:0;box-shadow:var(--shadow-lift);touch-action:none;cursor:grab;z-index:var(--z-board);flex:1;position:relative;overflow:hidden}.board:active{cursor:grabbing}.board__plane{transform-origin:0 0;background-color:var(--surface);box-shadow:0 0 0 .125rem var(--line-strong), var(--glow-warm);will-change:transform;border-radius:.75rem;position:absolute;top:0;left:0}.board__grid{border-radius:inherit;background-image:linear-gradient(to right, var(--line) 0 1px, transparent 1px 100%), linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 100%);background-size:var(--cell) var(--cell);opacity:.6;position:absolute;inset:0}.stone,.board__ghost{width:var(--cell);height:var(--cell);font-size:calc(var(--cell) * .62);-webkit-user-select:none;user-select:none;place-items:center;font-weight:800;line-height:1;display:grid;position:absolute}.stone--x{color:var(--mark-x)}.stone--o{color:var(--mark-o)}.stone--last:after{content:"";border-radius:var(--r-pill);opacity:.35;border:2px solid;position:absolute;inset:15%}.stone--win{z-index:2;text-shadow:0 0 .85rem;animation:stone-win .62s var(--ease-out-quart) both;animation-delay:calc(.18s + var(--win-index,0) * 90ms)}.board__plane--gliding{transition:transform .42s var(--ease-out-expo)}.board__plane--result .stone:not(.stone--win){opacity:.32;transition:opacity var(--dur-slow) var(--ease-out-quart)}.win-line{pointer-events:none;position:absolute;top:0;left:0;overflow:visible}.win-line line{stroke:var(--highlight);stroke-width:9px;stroke-linecap:round;opacity:.9;filter:drop-shadow(0 0 .6rem var(--highlight));stroke-dasharray:var(--line-length);stroke-dashoffset:var(--line-length);animation:win-draw .7s var(--ease-out-expo) 60ms forwards}.win-sparks{pointer-events:none;width:0;height:0;position:absolute}.win-sparks i{border-radius:var(--r-pill);background-color:var(--highlight);width:.4rem;height:.85rem;animation:spark-fly .76s var(--ease-out-quart) var(--delay) both;position:absolute}.win-sparks i:nth-child(3n){background-color:var(--mark-x)}.win-sparks i:nth-child(3n+1){background-color:var(--mark-o)}@keyframes stone-win{0%{transform:scale(1)}45%{transform:scale(1.38)}to{transform:scale(1.12)}}@keyframes win-draw{to{stroke-dashoffset:0}}@keyframes spark-fly{0%{transform:rotate(var(--angle)) translateY(-.4rem) scale(.3);opacity:0}25%{opacity:1}to{transform:rotate(var(--angle)) translateY(-6.5rem) scale(.85);opacity:0}}@media (prefers-reduced-motion:reduce){.win-line line{stroke-dashoffset:0}.win-sparks,.stone--enter,.stone--win{animation:none}.board__plane--gliding{transition:none}}.stone--enter{animation:stone-pop var(--dur-base) var(--ease-out-quart) both}.board__ghost{color:var(--ink-faint);opacity:.4}.board__cursor{width:var(--cell);height:var(--cell);border:3px solid var(--highlight);box-shadow:inset 0 0 0 1px var(--bg);pointer-events:none;z-index:3;border-radius:.35rem;position:absolute}.board__keys{left:var(--space-3);bottom:var(--space-3);padding:var(--space-1) var(--space-3);border-radius:var(--r-pill);color:var(--ink-soft);z-index:var(--z-board-ui);pointer-events:none;background-color:oklch(29% .045 40/.92);font-size:.82rem;font-weight:600;display:none;position:absolute}.board:focus-visible .board__keys{display:block}.board:has(.board__controls--left) .board__keys{left:auto;right:var(--space-3)}@keyframes stone-pop{0%{opacity:0;transform:scale(.45)}to{opacity:1;transform:none}}.board__controls{right:max(var(--space-4), env(safe-area-inset-right));bottom:max(var(--space-4), env(safe-area-inset-bottom));z-index:var(--z-board-ui);align-items:stretch;gap:var(--space-2);flex-direction:column;width:min(9.5rem,100% - 2rem);display:flex;position:absolute}.board__controls--left{right:auto;left:max(var(--space-4), env(safe-area-inset-left))}.board__controls-zoom{gap:var(--space-2);display:flex}.board__controls-zoom button{flex:1}.board__controls button{min-height:2.75rem;padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--r-pill);background-color:color-mix(in oklch, var(--bg-lift) 92%, transparent);color:var(--ink-soft);transition:background-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);font-size:.95rem;font-weight:600}.board__controls-zoom button{font-size:1.15rem}.board__controls button:hover:not(:disabled){background-color:var(--surface-strong);color:var(--ink)}.board__controls button:disabled{opacity:.45;cursor:not-allowed}@media (hover:none){.board__ghost{display:none}}.confirm{padding:var(--space-4);animation:confirm-in var(--dur-base) var(--ease-out-quart) both;z-index:var(--z-toast);background-color:oklch(16% .03 34/.72);place-items:end center;display:grid;position:fixed;inset:0}@media (height>=32rem){.confirm{place-items:center}}.confirm__panel{gap:var(--space-4);width:min(26rem,100%);padding:var(--space-6);border:2px solid var(--line-strong);border-radius:var(--r-xl);background-color:var(--surface);box-shadow:var(--shadow-lift), var(--glow-warm);text-align:left;animation:confirm-rise .32s var(--ease-out-expo) both;flex-direction:column;display:flex}.confirm__title{text-wrap:balance;font-size:1.55rem;line-height:1.25}.confirm__body{color:var(--ink-soft);font-size:.98rem}.confirm__actions{gap:var(--space-2);flex-direction:column;display:flex}.confirm__yes,.confirm__no{min-height:3rem;padding:0 var(--space-5);border-radius:var(--r-pill);font-size:1.02rem;font-weight:700}.confirm__yes{background-color:var(--mark-o);color:oklch(24% .045 38);border:none}.confirm__yes:hover{background-color:var(--highlight)}.confirm__yes--danger{background-color:var(--mark-x);color:var(--bg)}.confirm__yes--danger:hover{filter:brightness(1.08)}.confirm__no{border:1px solid var(--line-strong);color:var(--ink-soft);background-color:#0000}.confirm__no:hover{background-color:var(--surface-strong);color:var(--ink)}.confirm__alt{min-height:2.75rem;padding:0 var(--space-3);color:var(--ink-soft);text-underline-offset:3px;background:0 0;border:none;font-size:.92rem;font-weight:600;text-decoration:underline}.confirm__alt:hover{color:var(--ink)}@keyframes confirm-in{0%{opacity:0}to{opacity:1}}@keyframes confirm-rise{0%{opacity:0;transform:translateY(.75rem)scale(.97)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.confirm,.confirm__panel{animation-duration:1ms}}.scoreboard{align-items:baseline;column-gap:var(--space-4);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);justify-self:center;row-gap:.1rem;width:max-content;max-width:min(36rem,100%);display:grid}.scoreboard__player{min-width:0;color:var(--ink-faint);flex-wrap:wrap;align-items:baseline;gap:.15rem .35rem;display:flex}.scoreboard__player--x{justify-content:flex-start}.scoreboard__player--o{text-align:right;justify-content:flex-end}.scoreboard__player--on{color:var(--ink)}.scoreboard__player--on .scoreboard__name{font-weight:800}.scoreboard__mark{font-size:.85rem;font-weight:800;line-height:1}.scoreboard__mark--x{color:var(--mark-x)}.scoreboard__mark--o{color:var(--mark-o)}.scoreboard__name{text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:16ch;font-size:.95rem;font-weight:600;line-height:1.15;overflow:hidden}.scoreboard__you,.scoreboard__note{color:var(--ink-faint);font-size:.7rem;font-weight:600}.scoreboard__mid{flex-direction:column;grid-area:1/2;align-items:center;display:flex}.scoreboard__tally{font-variant-numeric:tabular-nums;align-items:baseline;gap:.35rem;margin:0;line-height:1;display:flex}.scoreboard__pts{letter-spacing:-.03em;font-size:1.45rem;font-weight:800}.scoreboard__pts--x{color:var(--mark-x)}.scoreboard__pts--o{color:var(--mark-o)}.scoreboard__dash{color:var(--ink-faint);font-size:1rem;font-weight:600}.scoreboard__draw{color:var(--ink-faint);margin:0;font-size:.7rem;font-weight:700}.scoreboard__clocks{display:contents}.scoreboard__status{text-overflow:ellipsis;white-space:nowrap;max-width:18ch;color:var(--ink-soft);text-align:center;grid-area:2/2;justify-self:center;font-size:.82rem;font-weight:700;line-height:1.2;overflow:hidden}.scoreboard__status--x{color:var(--mark-x)}.scoreboard__status--o{color:var(--mark-o)}@media (width<=40rem){.scoreboard{column-gap:var(--space-2);width:100%;max-width:none}.scoreboard__pts{font-size:1.25rem}.scoreboard__status{max-width:14ch;font-size:.78rem}}.clocks{justify-content:center;align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.clocks--hud{display:contents}.clocks--hud .clocks__side{background:0 0;border:none;border-radius:0;min-width:0;padding:0}.clocks--hud .clocks__side:first-of-type{grid-area:2/1;justify-self:start}.clocks--hud .clocks__side:nth-of-type(2){grid-area:2/3;justify-self:end}.clocks--hud .clocks__time{font-size:.85rem;font-weight:700}.clocks--hud .clocks__paused{display:none}.clocks__side{align-items:baseline;gap:var(--space-2);min-width:7.5rem;padding:var(--space-2) var(--space-4);border:1px solid var(--line);border-radius:var(--r-pill);background-color:var(--bg-lift);color:var(--ink-faint);font-variant-numeric:tabular-nums;transition:border-color var(--dur-fast) var(--ease-out-quart), background-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);display:flex}.clocks__side--active{border-color:var(--line-strong);background-color:var(--surface);color:var(--ink)}.clocks__side--hurry{border-color:var(--mark-x);color:var(--mark-x);animation:clock-hurry 1s var(--ease-out-quart) infinite}.clocks__mark{font-size:1.05rem;font-weight:800}.clocks__mark--x{color:var(--mark-x)}.clocks__mark--o{color:var(--mark-o)}.clocks__time{letter-spacing:-.01em;font-size:1.35rem;font-weight:800}.clocks__untimed{font-size:.9rem;font-weight:600}.clocks__paused{color:var(--ink-faint);font-size:.9rem;font-weight:600}@keyframes clock-hurry{0%,to{opacity:1}50%{opacity:.55}}@media (prefers-reduced-motion:reduce){.clocks__side--hurry{animation:none}}@media (width<=30rem){.clocks__side{min-width:6.5rem;padding:var(--space-1) var(--space-3)}.clocks__time{font-size:1.15rem}}.result{padding:var(--space-5);animation:result-scrim .34s var(--ease-out-quart) both;z-index:var(--z-overlay);background-color:oklch(16% .03 34/.68);place-items:end center;display:grid;position:fixed;inset:0}@media (height>=34rem){.result{place-items:center}}.result__panel{align-items:flex-start;gap:var(--space-3);width:min(26rem,100%);padding:var(--space-6);border:2px solid var(--line-strong);border-radius:var(--r-xl);background-color:var(--surface);box-shadow:var(--shadow-lift), var(--glow-warm);animation:result-rise .56s var(--ease-out-expo) 80ms both;flex-direction:column;display:flex}.result__title{align-items:baseline;gap:var(--space-3);letter-spacing:-.01em;text-wrap:balance;flex-wrap:wrap;font-size:clamp(1.9rem,7vw,2.6rem);display:flex}.result__mark{animation:result-mark .76s var(--ease-out-quart) .26s both;font-size:1.35em;line-height:.9}.result__mark--x{color:var(--mark-x)}.result__mark--o{color:var(--mark-o)}.result__sides{align-items:baseline;gap:var(--space-2);flex-wrap:wrap;font-size:1.02rem;font-weight:700;display:flex}.result__side--x{color:var(--mark-x)}.result__side--o{color:var(--mark-o)}.result__side-sep{color:var(--ink-faint);font-weight:600}.result__reason{max-width:28ch;color:var(--ink-soft);font-size:1.05rem}.result__meta{color:var(--ink-faint);font-size:.92rem}.result__actions{gap:var(--space-3);width:100%;margin-top:var(--space-2);flex-wrap:wrap;display:flex}.result__primary,.result__ghost{min-height:3rem;padding:0 var(--space-5);border-radius:var(--r-pill);transition:transform var(--dur-fast) var(--ease-out-quart), background-color var(--dur-fast) var(--ease-out-quart);flex:8rem;font-size:1.05rem;font-weight:700}.result__primary{background-color:var(--mark-o);color:oklch(24% .045 38);border:none}.result__primary:hover{background-color:var(--highlight);transform:translateY(-2px)}.result__primary:disabled{opacity:.55;cursor:default;transform:none}.result__ghost{border:1px solid var(--line-strong);color:var(--ink-soft);background-color:#0000}.result__ghost:hover{background-color:var(--surface-strong);color:var(--ink)}.result__review{padding:var(--space-2) var(--space-3);border-radius:var(--r-sm);color:var(--ink-faint);text-underline-offset:4px;background-color:#0000;border:none;align-self:center;font-size:.95rem;font-weight:600;text-decoration:underline;text-decoration-thickness:1px}.result__review:hover{color:var(--ink)}@keyframes result-scrim{0%{opacity:0}to{opacity:1}}@keyframes result-rise{0%{opacity:0;transform:translateY(1.5rem)scale(.96)}to{opacity:1;transform:none}}@keyframes result-mark{0%{opacity:0;transform:scale(.4)rotate(-8deg)}60%{opacity:1;transform:scale(1.18)rotate(2deg)}to{opacity:1;transform:none}}.replay{gap:var(--space-2);width:min(90rem,100%);padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:var(--r-md);background-color:color-mix(in oklch, var(--bg-lift) 88%, transparent);flex-direction:column;margin-inline:auto;display:flex}.replay__caption{color:var(--ink-soft);font-size:.92rem;font-weight:700}.replay__row{align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.replay__transport{align-items:center;gap:var(--space-1);flex-wrap:wrap;display:flex}.replay__transport button,.replay__speed{min-height:2.5rem;padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-soft);transition:background-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart);background-color:#0000;font-size:.95rem;font-weight:700}.replay__play{min-width:6.25rem}.replay__transport button:hover:not(:disabled),.replay__speed:hover{border-color:var(--line-strong);background-color:var(--surface);color:var(--ink)}.replay__transport button:disabled{opacity:.4;cursor:not-allowed}.replay__scrub{flex:10rem;align-items:center;min-width:8rem;display:flex}.replay__scrub input{width:100%;accent-color:var(--mark-o)}.replay__speeds{gap:var(--space-1);flex-wrap:wrap;display:flex}.replay__speed--on{border-color:var(--line-strong);background-color:var(--surface-strong);color:var(--ink)}.replay__transport button:focus-visible,.replay__speed:focus-visible,.replay__scrub input:focus-visible{outline:2px solid var(--highlight);outline-offset:2px}@media (width<=36rem){.replay__play{min-width:5.25rem}.replay__scrub{flex-basis:100%;order:3}}.rule-example{gap:var(--space-2);flex-direction:column;display:flex}.rule-example__cells{display:flex}.rule-example__cell{width:1.6rem;height:1.6rem;box-shadow:inset 0 0 0 1px var(--line);place-items:center;font-size:.95rem;font-weight:800;display:grid}.rule-example__cell--X{color:var(--mark-x)}.rule-example__cell--O{color:var(--ink-faint)}.rule-example__verdict{font-size:.95rem;font-weight:700}.rule-example__verdict--win{color:var(--mark-o)}.rule-example__verdict--lose{color:var(--ink-faint)}.rule-example__caption{color:var(--ink-faint);font-size:.85rem}.rules-chips{gap:var(--space-2);flex-wrap:wrap;display:flex}.rules-chips__item{padding:var(--space-1) var(--space-3);border-radius:var(--r-pill);background-color:var(--bg-lift);color:var(--ink-soft);white-space:nowrap;font-size:.88rem;font-weight:600}.rules-summary{gap:var(--space-5);flex-direction:column;display:flex}.rules-summary__list{gap:var(--space-3);flex-direction:column;margin:0;display:flex}.rules-summary__list>div{align-items:baseline;gap:var(--space-2) var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--line);flex-wrap:wrap;display:flex}.rules-summary__list dt{color:var(--ink-faint);flex:0 0 9rem;font-size:.92rem;font-weight:600}.rules-summary__list dd{flex:14rem;margin:0;font-size:1rem;font-weight:600}.rules-summary__mark{font-size:1.2rem;font-weight:800}.rules-summary__mark--x{color:var(--mark-x)}.rules-summary__mark--o{color:var(--mark-o)}.rules-summary__examples{gap:var(--space-4);flex-wrap:wrap;display:flex}.rules-dialog{padding:var(--space-4);animation:rules-dialog-in var(--dur-base) var(--ease-out-quart) both;z-index:var(--z-overlay);background-color:oklch(16% .03 34/.7);place-items:center;display:grid;position:fixed;inset:0;overflow-y:auto}.rules-dialog__panel{gap:var(--space-5);width:min(30rem,100%);padding:var(--space-6);border:2px solid var(--line-strong);border-radius:var(--r-xl);background-color:var(--surface);box-shadow:var(--shadow-lift);animation:rules-dialog-rise .38s var(--ease-out-expo) both;flex-direction:column;display:flex}.rules-dialog__title{font-size:1.7rem}.rules-dialog__locked{padding:var(--space-4);border:1px solid var(--line-strong);border-radius:var(--r-md);background-color:var(--bg-lift);color:var(--ink-soft);font-size:.95rem}.rules-dialog__actions{gap:var(--space-3);flex-wrap:wrap;display:flex}.rules-dialog__close,.rules-dialog__edit{min-height:3rem;padding:0 var(--space-5);border-radius:var(--r-pill);flex:8rem;font-size:1.02rem;font-weight:700}.rules-dialog__close{background-color:var(--mark-o);color:oklch(24% .045 38);border:none}.rules-dialog__close:hover{background-color:var(--highlight)}.rules-dialog__edit{border:1px solid var(--line-strong);color:var(--ink-soft);background-color:#0000}.rules-dialog__edit:hover{background-color:var(--surface-strong);color:var(--ink)}@keyframes rules-dialog-in{0%{opacity:0}to{opacity:1}}@keyframes rules-dialog-rise{0%{opacity:0;transform:translateY(1rem)scale(.97)}to{opacity:1;transform:none}}.game{gap:var(--space-2);height:100%;padding-top:max(var(--space-3), env(safe-area-inset-top));padding-right:max(var(--space-4), env(safe-area-inset-right));padding-bottom:max(var(--space-4), env(safe-area-inset-bottom));padding-left:max(var(--space-4), env(safe-area-inset-left));flex-direction:column;display:flex;position:relative}.game__bar,.game__foot{width:min(90rem,100%);margin-inline:auto}.game__bar{align-items:center;column-gap:var(--space-2);grid-template-columns:minmax(2.75rem,1fr) auto minmax(2.75rem,1fr);display:grid}.game__back{justify-self:start}.game__reset,.room__code{justify-self:end}.game__back,.game__reset{border:1px solid var(--line);border-radius:var(--r-md);min-height:2.75rem;color:var(--ink-soft);transition:background-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart);background-color:#0000;justify-content:center;align-items:center;font-size:.92rem;font-weight:600;display:inline-flex}.game__back{width:2.75rem;padding:0;font-size:1.2rem}.game__reset{padding:0 var(--space-3)}.game__back:hover,.game__reset:hover{border-color:var(--line-strong);background-color:var(--surface);color:var(--ink)}.game__tools{flex-wrap:wrap;align-items:center;gap:.15rem .85rem;display:flex}.game__tools button{padding:var(--space-1) 0;color:var(--ink-faint);font-size:inherit;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-out-quart);background:0 0;border:none;font-weight:600;text-decoration:underline;text-decoration-thickness:1px}.game__tools button:hover:not(:disabled){color:var(--ink)}.game__tools button:disabled{opacity:.5;text-decoration:none}.game__foot{justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-4);color:var(--ink-faint);flex-wrap:wrap;font-size:.88rem;display:flex}.game__stage{gap:var(--space-2);flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.game__stage .board,.game__board-slot{flex:1;min-width:0;min-height:0}.game__board-slot{flex-direction:column;display:flex;position:relative}.game__board-slot .board{flex:1;min-height:0}.game__stage--chat-open{align-items:stretch;gap:var(--space-3);flex-direction:row}.game__stage--chat-open .room-chat{flex:0 0 min(22rem,36%);align-self:stretch;width:min(22rem,36%);min-height:0;max-height:none}@media (width<=36rem){.game__stage--chat-open{flex-direction:column}.game__stage--chat-open .room-chat{flex-basis:auto;width:100%;max-height:min(40vh,20rem)}}@media (width<=40rem){.game__bar{grid-template-columns:2.5rem 1fr auto}.game__back{grid-area:1/1;width:2.5rem;min-height:2.5rem}.scoreboard{grid-area:2/1/auto/-1}.game__reset,.room__code{grid-area:1/3;min-height:2.5rem;font-size:.82rem}}.home-playfield{z-index:0;background-color:var(--bg-lift);position:fixed;inset:0;overflow:hidden}.home-playfield__plane{border-radius:0}.home-playfield .stone--home-out{animation:home-stone-out var(--dur-slow) var(--ease-out-quart) both}@keyframes home-stone-out{to{opacity:0}}.home{z-index:1;justify-content:center;gap:var(--space-6);width:min(38rem,100%);min-height:100dvh;padding:max(var(--space-7), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-6), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));pointer-events:none;flex-direction:column;margin:0 auto;display:flex;position:relative}.home button{pointer-events:auto}.home--resume{text-align:center;place-items:center;width:100%;display:grid}.home--resume .home__tagline{max-width:none}.home__intro{gap:var(--space-3);flex-direction:column;display:flex}.home__title{letter-spacing:-.02em;text-shadow:0 .2rem 1.4rem var(--bg);font-size:clamp(2.5rem,9vw,4rem)}.home__tagline{max-width:34ch;color:var(--ink-soft);text-shadow:0 .12rem 1rem var(--bg);font-size:1.1rem}.home__primary{justify-content:space-between;align-items:center;gap:var(--space-5);padding:var(--space-5);border:2px solid var(--line-strong);border-radius:var(--r-xl);background-color:var(--surface);text-align:left;box-shadow:var(--shadow-soft);transition:transform var(--dur-base) var(--ease-out-quart), background-color var(--dur-base) var(--ease-out-quart), border-color var(--dur-base) var(--ease-out-quart);display:flex}.home__primary:hover{background-color:var(--surface-strong);border-color:var(--mark-o);transform:translateY(-3px)}.home__primary:active{transform:translateY(0)}.home__primary-text{gap:var(--space-2);flex-direction:column;display:flex}.home__primary-title{font-size:1.55rem;font-weight:800}.home__primary-note{max-width:26ch;color:var(--ink-soft);font-size:.98rem;font-weight:500}.home__second{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border:1px solid var(--line-strong);border-radius:var(--r-lg);text-align:left;transition:transform var(--dur-base) var(--ease-out-quart), background-color var(--dur-base) var(--ease-out-quart), border-color var(--dur-base) var(--ease-out-quart);background-color:oklch(24% .045 38/.78);display:flex}.home__second:hover{border-color:var(--mark-x);background-color:var(--surface);transform:translateY(-2px)}.home__second:active{transform:translateY(0)}.home__second .home__primary-title{font-size:1.25rem}.home__art{object-fit:cover;border-radius:var(--r-md);width:6.5rem;height:6.5rem;box-shadow:inset 0 0 0 1px var(--line);background-color:oklch(42% .06 55);flex-shrink:0}.home__second .home__art{width:5.75rem;height:5.75rem}.home__play{gap:var(--space-3);flex-direction:column;display:flex}.home__rules{align-items:center;gap:var(--space-2) var(--space-3);padding:0 var(--space-2);flex-wrap:wrap;display:flex}.home__rules-label{color:var(--ink-faint);font-size:.9rem;font-weight:600}.home__rules-edit{padding:var(--space-1) var(--space-4);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink-soft);transition:border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);background-color:#0000;font-size:.88rem;font-weight:700}.home__rules-edit:hover{border-color:var(--mark-o);color:var(--mark-o)}.home__install{max-width:42ch;padding:0 var(--space-2);color:var(--ink-soft);font-size:.9rem}.home__about{max-width:46ch;padding:var(--space-2);color:var(--ink-faint);font-size:.88rem;line-height:1.45}.home__about-title{margin-bottom:var(--space-2);color:var(--ink-soft);font-size:.95rem;font-weight:700}@media (prefers-reduced-motion:reduce){.home-playfield .stone--home-out{opacity:0;animation:none}.home__primary:hover,.home__second:hover{transform:none}}@media (width<=30rem){.home__primary,.home__second{gap:var(--space-3)}.home__art,.home__second .home__art{width:5rem;height:5rem}}.setup{z-index:var(--z-sheet);padding:var(--space-3);place-items:end center;display:grid;position:fixed;inset:0}@media (height>=40rem){.setup{place-items:center}}.setup--under{pointer-events:none}.setup__scrim{animation:setup-in var(--dur-base) var(--ease-out-quart) both;background-color:oklch(16% .03 34/.62);border:none;position:absolute;inset:0}.setup__panel{gap:var(--space-5);width:min(32rem,100%);max-height:min(92dvh,52rem);padding:var(--space-5);border:2px solid var(--line-strong);border-radius:var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg);background-color:var(--bg-lift);box-shadow:var(--shadow-lift);animation:setup-rise .32s var(--ease-out-expo) both;flex-direction:column;display:flex;position:relative;overflow:auto}.setup__head{align-items:flex-start;gap:var(--space-2);flex-direction:column;display:flex}.setup__back{padding:var(--space-2) var(--space-4);border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--ink-soft);background-color:#0000;font-size:.95rem;font-weight:600}.setup__back:hover{background-color:var(--surface);color:var(--ink)}.setup__title{letter-spacing:-.02em;text-wrap:balance;font-size:1.7rem}.setup__lead{max-width:40ch;color:var(--ink-soft);font-size:.98rem}.setup__picks,.setup__rules{gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--line);flex-direction:column;display:flex}.setup__picks-title,.setup__rules-label{color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;font-weight:700}.setup__rules-bar{justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.setup__rules-edit,.setup__rules-more{padding:var(--space-1) var(--space-3);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink-soft);background-color:#0000;font-size:.88rem;font-weight:700}.setup__rules-edit:hover,.setup__rules-more:hover{border-color:var(--mark-o);color:var(--mark-o)}.setup__rules-more{text-underline-offset:3px;border:none;align-self:flex-start;text-decoration:underline}.setup__go{border-radius:var(--r-pill);background-color:var(--mark-o);color:oklch(24% .045 38);border:none;min-height:3.2rem;font-size:1.08rem;font-weight:800}.setup__go:hover:not(:disabled){background-color:var(--highlight)}.setup__go:disabled{opacity:.45}.setup__note{color:var(--ink-faint);font-size:.92rem}@keyframes setup-in{0%{opacity:0}to{opacity:1}}@keyframes setup-rise{0%{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.setup__scrim,.setup__panel{animation-duration:1ms}}.online{gap:var(--space-5);width:min(34rem,100%);padding:var(--space-6) var(--space-4) var(--space-7);flex-direction:column;margin:0 auto;display:flex}.online__head{align-items:flex-start;gap:var(--space-3);flex-direction:column;display:flex}.online__back{padding:var(--space-2) var(--space-4);border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--ink-soft);background-color:#0000;font-size:.95rem;font-weight:600}.online__back:hover{background-color:var(--surface);color:var(--ink)}.online__title{letter-spacing:-.02em;font-size:clamp(2rem,7vw,2.75rem)}.online__lead{max-width:42ch;color:var(--ink-soft);font-size:1.02rem}.online__field{gap:var(--space-2);flex-direction:column;display:flex}.online__label{font-weight:600}.online__field input,.online__code{padding:var(--space-3) var(--space-4);border:1px solid var(--line-strong);border-radius:var(--r-md);background-color:var(--surface);color:var(--ink);font-family:inherit;font-size:1.05rem}.online__field input:focus-visible,.online__code:focus-visible{outline:2px solid var(--mark-o);outline-offset:2px}.online__block{gap:var(--space-3);padding:var(--space-5);border:1px solid var(--line);border-radius:var(--r-lg);background-color:var(--surface);flex-direction:column;display:flex}.online__block-title{font-size:1.2rem}.online__chips{gap:var(--space-2);flex-wrap:wrap;display:flex}.online__chip{padding:var(--space-1) var(--space-3);border-radius:var(--r-pill);background-color:var(--bg-lift);color:var(--ink-soft);font-size:.88rem;font-weight:600}.online__actions,.online__join{gap:var(--space-3);flex-wrap:wrap;display:flex}.online__join .online__code{letter-spacing:.22em;text-transform:uppercase;flex:8rem}.online__primary{padding:var(--space-3) var(--space-5);border-radius:var(--r-pill);background-color:var(--mark-o);color:var(--bg);border:none;font-size:1.02rem;font-weight:700}.online__primary:hover:not(:disabled){filter:brightness(1.08)}.online__primary:disabled{opacity:.45}.online__ghost{padding:var(--space-3) var(--space-4);border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--ink-soft);background-color:#0000;font-weight:600}.online__hint,.online__error{color:var(--ink-soft);font-size:.92rem}.online__error{padding:var(--space-3) var(--space-4);border-radius:var(--r-md);background-color:var(--surface-strong);color:var(--ink)}.room__code{padding:var(--space-2) var(--space-3);border-radius:var(--r-pill);background-color:var(--surface);color:inherit;letter-spacing:.16em;border:1px solid #0000;font-size:.95rem;font-weight:700}.room__code:hover{border-color:var(--line-strong)}.room__warning{padding:var(--space-2) var(--space-4);border-radius:var(--r-md);background-color:var(--surface-strong);color:var(--ink);text-align:center;font-size:.92rem}.room__seats{gap:var(--space-2) var(--space-4);color:var(--ink-soft);flex-wrap:wrap;font-size:.95rem;display:flex}.room__seat{align-items:center;gap:var(--space-1);font-weight:600;display:inline-flex}.room__you{color:var(--ink-faint);font-weight:500}.room__offline{color:var(--mark-x)}.room__waiting{z-index:var(--z-board-ui);justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-5);border:1px solid var(--line-strong);border-radius:var(--r-lg);background-color:color-mix(in oklch, var(--bg) 92%, transparent);text-align:center;flex-direction:column;display:flex;position:absolute;inset:0}.room__waiting-lead{color:var(--ink-soft)}.room__waiting-code{letter-spacing:.24em;font-size:clamp(2rem,9vw,2.8rem);font-weight:800}.room__waiting-actions{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.room__copy{padding:var(--space-2) var(--space-4);border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--ink-soft);background-color:#0000;font-weight:600}.room__copy:hover{background-color:var(--bg-lift);color:var(--ink)}.room__vacate{margin-top:var(--space-2);padding:var(--space-1) var(--space-2);color:var(--ink-soft);text-underline-offset:3px;background:0 0;border:none;font-size:.9rem;font-weight:600;text-decoration:underline}.room__vacate:hover{color:var(--ink)}.settings-layer{z-index:var(--z-settings);background-color:var(--bg);animation:settings-in var(--dur-base) var(--ease-out-quart) both;position:fixed;inset:0;overflow:auto}@keyframes settings-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.settings-layer{animation-duration:1ms}}.settings{gap:var(--space-6);width:min(38rem,100%);padding:max(var(--space-6), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-7), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));flex-direction:column;margin:0 auto;display:flex}.settings__head{align-items:flex-start;gap:var(--space-3);flex-direction:column;display:flex}.settings__back{padding:var(--space-2) var(--space-4);border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--ink-soft);background-color:#0000;font-size:.95rem;font-weight:600}.settings__back:hover{background-color:var(--surface);color:var(--ink)}.settings__title{letter-spacing:-.02em;font-size:clamp(2rem,7vw,2.75rem)}.settings__lead{max-width:44ch;color:var(--ink-soft);font-size:1.02rem}.settings__block{gap:var(--space-3);padding-bottom:var(--space-5);border-bottom:1px solid var(--line);flex-direction:column;display:flex}.settings__label{font-size:1.2rem}.settings__sizes{gap:var(--space-2);flex-wrap:wrap;display:flex}.settings__size{padding:var(--space-2) var(--space-4);border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--ink-soft);transition:background-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);background-color:#0000;font-size:1rem;font-weight:700}.settings__size:hover{background-color:var(--surface);color:var(--ink)}.settings__size--on{border-color:var(--mark-o);background-color:var(--mark-o);color:oklch(24% .045 38)}.settings__size--on:hover{background-color:var(--highlight);color:oklch(24% .045 38)}.settings__custom{align-items:center;gap:var(--space-3);color:var(--ink-soft);flex-wrap:wrap;font-size:.98rem;display:flex}.settings__custom input{width:6rem;padding:var(--space-2) var(--space-3);border:1px solid var(--line-strong);border-radius:var(--r-sm);background-color:var(--bg-lift);color:var(--ink);font:inherit;font-weight:700}.settings__row{gap:var(--space-2);flex-direction:column;display:flex}.settings__row-label{color:var(--ink-faint);font-size:.92rem;font-weight:600}.settings__note{max-width:46ch;padding:var(--space-3) var(--space-4);border:1px solid var(--line-strong);border-radius:var(--r-sm);background-color:var(--bg-lift);color:var(--ink-soft);font-size:.92rem}.settings__hint{max-width:46ch;color:var(--ink-faint);font-size:.92rem}.settings__toggle{align-items:flex-start;gap:var(--space-3);cursor:pointer;display:flex}.settings__toggle input{width:1.35rem;height:1.35rem;accent-color:var(--mark-o);flex-shrink:0;margin-top:.15rem}.settings__toggle--off{opacity:.5;cursor:not-allowed}.settings__toggle-text{gap:var(--space-1);flex-direction:column;display:flex}.settings__toggle-name{font-size:1.02rem;font-weight:700}.settings__toggle-note{max-width:44ch;color:var(--ink-faint);font-size:.9rem}.settings__examples{gap:var(--space-4);flex-wrap:wrap;display:flex}.settings__segment{gap:var(--space-1);padding:var(--space-1);border:1px solid var(--line);border-radius:var(--r-pill);flex-wrap:wrap;align-self:flex-start;display:flex}.settings__segment-item{padding:var(--space-2) var(--space-4);border-radius:var(--r-pill);color:var(--ink-soft);background-color:#0000;border:none;font-size:.98rem;font-weight:600}.settings__segment-item:hover{color:var(--ink)}.settings__segment-item--on{background-color:var(--surface-strong);color:var(--ink)}.settings__warning{padding:var(--space-4);border:1px solid var(--mark-x);border-radius:var(--r-md);color:var(--ink);background-color:oklch(30% .06 32);font-size:.95rem}.settings__warning button{margin-top:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--ink-soft);border-radius:var(--r-pill);background-color:#0000;font-size:.9rem;font-weight:700}.settings__warning button:hover{background-color:var(--ink);color:oklch(24% .045 38)}.settings__done{border-radius:var(--r-pill);background-color:var(--mark-o);color:oklch(24% .045 38);border:none;min-height:3.2rem;font-size:1.08rem;font-weight:800}.settings__done:hover{background-color:var(--highlight)}.settings__start{border-radius:var(--r-pill);background-color:var(--mark-o);color:oklch(24% .045 38);min-height:3.4rem;box-shadow:var(--shadow-soft);transition:transform var(--dur-fast) var(--ease-out-quart), background-color var(--dur-fast) var(--ease-out-quart);border:none;font-size:1.15rem;font-weight:800}.settings__start:hover{background-color:var(--highlight);transform:translateY(-2px)}.react-bursts{z-index:var(--z-board-ui);pointer-events:none;position:absolute;inset:0;overflow:hidden}.react-bursts__item{left:var(--react-shift,28%);align-items:center;gap:var(--space-1);max-width:12rem;animation:react-rise 2.2s var(--ease-out-quart) both;flex-direction:column;display:flex;position:absolute;bottom:12%}.react-bursts__item--still{animation:react-fade 1.4s var(--ease-out-quart) both}.react-bursts__emoji{filter:drop-shadow(0 .35rem .6rem oklch(14% .03 35/.45));font-size:2.4rem;line-height:1}.react-bursts__phrase{padding:var(--space-1) var(--space-3);border:1px solid var(--line-strong);border-radius:var(--r-pill);background-color:color-mix(in oklch, var(--surface-strong) 92%, transparent);color:var(--ink);text-align:center;text-wrap:balance;font-size:.95rem;font-weight:800}@keyframes react-rise{0%{opacity:0;transform:translateY(1.5rem)}12%{opacity:1}to{opacity:0;transform:translateY(-42vh)}}@keyframes react-fade{0%{opacity:0}20%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.react-bursts__item{animation:react-fade 1.4s var(--ease-out-quart) both}}.room-chat-fab{z-index:var(--z-sheet);right:max(var(--space-4), env(safe-area-inset-right));bottom:max(var(--space-4), env(safe-area-inset-bottom));border:1px solid color-mix(in oklch, var(--mark-o) 55%, var(--line-strong));border-radius:var(--r-pill);background-color:var(--mark-o);width:2.75rem;height:2.75rem;color:var(--bg);box-shadow:var(--shadow-soft);justify-content:center;align-items:center;display:inline-flex;position:absolute}.room-chat-fab:hover{filter:brightness(1.08)}.room-chat-fab:focus-visible{outline:2px solid var(--highlight);outline-offset:2px}.room-chat-fab__icon{width:1.25rem;height:1.25rem}.room-chat-fab .room-chat__badge{position:absolute;top:-.2rem;right:-.2rem}.room-chat{z-index:var(--z-sheet);border:1px solid var(--line-strong);border-radius:var(--r-lg);background-color:var(--surface-strong);box-shadow:var(--shadow-soft);flex-direction:column;flex:none;display:flex;position:relative}.room-chat--open{animation:room-chat-up var(--dur-base) var(--ease-out-quart) both}.room-chat__dock{align-items:center;gap:var(--space-2) var(--space-3);width:100%;min-height:3.25rem;padding:var(--space-2) var(--space-4);border-radius:inherit;color:var(--ink);text-align:left;background-color:#0000;border:none;grid-template-columns:minmax(0,1fr) auto auto;display:grid}.room-chat--open .room-chat__dock{border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:1px solid var(--line)}.room-chat__dock:hover{background-color:var(--surface)}.room-chat__dock:focus-visible{outline:2px solid var(--mark-o);outline-offset:-2px}.room-chat__dock-copy{flex-direction:column;gap:.1rem;min-width:0;display:flex}.room-chat__dock-title{font-size:.98rem;font-weight:800}.room-chat__dock-hint{color:var(--mark-o);font-size:.82rem;font-weight:700}.room-chat__badge{border-radius:var(--r-pill);background-color:var(--mark-x);min-width:1.35rem;height:1.35rem;color:var(--bg);justify-content:center;align-items:center;padding:0 .35rem;font-size:.75rem;font-weight:800;display:inline-flex}.room-chat__list{gap:var(--space-2);min-height:0;padding:var(--space-2) var(--space-4);flex-direction:column;flex:1;display:flex;overflow-y:auto}.room-chat__empty{color:var(--ink-soft);text-align:center;margin:auto;font-size:.92rem}.room-chat__bubble{max-width:85%;padding:var(--space-2) var(--space-3);border-radius:var(--r-md);background-color:var(--bg-lift);flex-direction:column;gap:.15rem;display:flex}.room-chat__bubble--mine{align-self:flex-end}.room-chat__bubble--theirs{align-self:flex-start}.room-chat__bubble--X{border:1px solid color-mix(in oklch, var(--mark-x) 50%, var(--line))}.room-chat__bubble--O{border:1px solid color-mix(in oklch, var(--mark-o) 50%, var(--line))}.room-chat__who{color:var(--ink-faint);font-size:.75rem;font-weight:600}.room-chat__text{color:var(--ink);overflow-wrap:anywhere}.room-chat__reacts{gap:var(--space-2);padding:0 var(--space-4) var(--space-2);flex-wrap:wrap;display:flex}.room-chat__react{border:1px solid var(--line);border-radius:var(--r-pill);background-color:var(--bg-lift);justify-content:center;align-items:center;width:2.75rem;height:2.75rem;font-size:1.25rem;line-height:1;display:inline-flex}.room-chat__react:hover:not(:disabled){border-color:var(--line-strong);background-color:var(--surface)}.room-chat__react:focus-visible{outline:2px solid var(--mark-o);outline-offset:2px}.room-chat__react:disabled{opacity:.45}.room-chat__form{gap:var(--space-2);padding:var(--space-2) var(--space-4) var(--space-3);grid-template-columns:1fr auto;display:grid}.room-chat__input{min-height:2.75rem;padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--r-pill);background-color:var(--bg);color:var(--ink);font:inherit;font-size:1rem}.room-chat__input:focus-visible{outline:2px solid var(--mark-o);outline-offset:2px}.room-chat__send{min-width:4.5rem;min-height:2.75rem;padding:0 var(--space-4);border-radius:var(--r-pill);background-color:var(--mark-o);color:var(--bg);border:none;font-weight:700}.room-chat__send:hover:not(:disabled){filter:brightness(1.08)}.room-chat__send:disabled{opacity:.45}.room-chat__error{color:var(--mark-x);grid-column:1/-1;font-size:.88rem}@keyframes room-chat-up{0%{opacity:.7;transform:translateY(.4rem)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.room-chat--open{animation:none}}:root{--bg:oklch(24% .045 38);--bg-lift:oklch(29% .045 40);--surface:oklch(33% .042 42);--surface-strong:oklch(38% .045 44);--line:oklch(46% .035 45);--line-strong:oklch(58% .04 48);--ink:oklch(96% .02 82);--ink-soft:oklch(84% .035 72);--ink-faint:oklch(72% .032 66);--mark-x:oklch(70% .19 28);--mark-o:oklch(85% .15 88);--highlight:oklch(92% .12 96);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4.5rem;--r-sm:.625rem;--r-md:1rem;--r-lg:1.5rem;--r-xl:2.125rem;--r-pill:999px;--shadow-soft:0 .75rem 1.75rem oklch(14% .03 35/.45);--shadow-lift:0 1.25rem 3rem oklch(12% .03 35/.55);--glow-warm:0 0 2.5rem oklch(85% .15 88/.22);--font-display:"Baloo 2", "Segoe UI", system-ui, sans-serif;--ease-out-quart:cubic-bezier(.25, 1, .5, 1);--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--dur-fast:.14s;--dur-base:.24s;--dur-slow:.42s;--z-board:1;--z-board-ui:20;--z-sticky:40;--z-sheet:55;--z-overlay:60;--z-settings:70;--z-toast:80}*,:before,:after{box-sizing:border-box}html,body,#root{height:100dvh}body{background-color:var(--bg);color:var(--ink);font-family:var(--font-display);-webkit-font-smoothing:antialiased;overscroll-behavior:none;margin:0;font-size:1rem;font-weight:500;line-height:1.5}body:before{content:"";pointer-events:none;background:radial-gradient(120% 80% at 50% -10%,oklch(85% .15 88/.16),#0000 62%);position:fixed;inset:0}h1,h2,h3{text-wrap:balance;margin:0;font-weight:800;line-height:1.1}p{margin:0}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:3px solid var(--highlight);outline-offset:3px}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}