:root{--ink:#1b2a4a;--paper:#f0e9d8;--paper-raised:#faf5e8;--dim:#5b6a86;--pink:#ff4f7b;--teal:#1fb3a6;--ochre:#f2a03d;--blue:#5b7cff;--gold:#ffd93d;--square-plain:var(--paper-raised);--square-goose:var(--teal);--square-move:var(--blue);--square-trap:var(--ochre);--square-death:var(--pink);--square-garden:var(--gold);--on-plain:#1b2a4a;--on-goose:#0a2320;--on-move:#f6f2e6;--on-trap:#2a1c06;--on-death:#2a0713;--on-garden:#1b2a4a;--step--1:.8125rem;--step-0:1rem;--step-1:1.3rem;--step-2:1.85rem;--step-3:2.6rem;--display:"Archivo Black", "Helvetica Neue", Impact, sans-serif;--body:"Archivo", "Helvetica Neue", Helvetica, sans-serif;--data:"Space Mono", SFMono-Regular, Menlo, monospace;--border:2px solid var(--ink);--shadow-hard:6px 6px 0 var(--ink);--shadow-soft:3px 3px 0 var(--ink);--touch:44px}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--step-0);-webkit-font-smoothing:antialiased;margin:0;line-height:1.5}h1,h2,h3{font-family:var(--display);margin:0;font-weight:400;line-height:1.05}h1{font-size:var(--step-3)}h2{font-size:var(--step-2)}h3{font-size:var(--step-1)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.shell{flex-direction:column;gap:1.25rem;max-width:1400px;min-height:100%;margin:0 auto;padding:clamp(.9rem,2.5vw,2rem);display:flex}.masthead{flex-wrap:wrap;align-items:baseline;gap:.75rem 1.25rem;display:flex}.masthead h1{font-size:var(--step-2);letter-spacing:.01em}.masthead p{color:var(--dim);font-size:var(--step--1);margin:0}.connection{font-family:var(--data);font-size:var(--step--1);color:var(--dim);align-items:center;gap:.45rem;margin-left:auto;display:inline-flex}.connection .dot{background:var(--teal);border:2px solid var(--ink);flex:none;width:10px;height:10px}.connection[data-status=connecting] .dot{background:var(--ochre)}.connection[data-status=closed] .dot{background:var(--pink)}.panel{background:var(--paper-raised);border:var(--border);box-shadow:var(--shadow-hard);padding:1.25rem}.panel>h2,.panel>h3{margin-bottom:.75rem}.stack{flex-direction:column;gap:.9rem;display:flex}.row{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.field{flex-direction:column;gap:.35rem;display:flex}.field label{font-family:var(--display);font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase}input[type=text]{font-family:var(--body);font-size:var(--step-0);min-height:var(--touch);color:var(--ink);background:var(--paper);border:var(--border);border-radius:0;padding:.55rem .75rem}input[type=text]:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--pink);outline-offset:2px}input.code{font-family:var(--data);letter-spacing:.28em;text-transform:uppercase}button{font-family:var(--display);font-size:var(--step-0);min-height:var(--touch);min-width:var(--touch);color:var(--ink);background:var(--paper-raised);border:var(--border);cursor:pointer;border-radius:0;padding:.55rem 1.25rem;transition:transform 90ms ease-out,box-shadow 90ms ease-out}button:hover:not(:disabled){box-shadow:var(--shadow-soft);transform:translate(-2px,-2px)}button:active:not(:disabled){box-shadow:none;transform:translate(1px,1px)}button:disabled{color:var(--dim);border-color:var(--dim);cursor:not-allowed;opacity:.65}button.primary{background:var(--pink);color:var(--paper-raised);box-shadow:var(--shadow-soft)}button.primary:disabled{background:var(--paper-raised);color:var(--dim);box-shadow:none}.hint{color:var(--dim);font-size:var(--step--1);margin:0}.alert{background:var(--pink);color:var(--paper-raised);border:var(--border);font-size:var(--step--1);margin:0;padding:.6rem .85rem}.board{width:100%;min-width:0;max-width:min(100%,760px);margin-inline:auto}.board-svg{width:100%;height:auto;display:block}.board-highlight{animation:.9s ease-in-out infinite ring}@keyframes ring{0%,to{opacity:1}50%{opacity:.25}}.legend{font-size:var(--step--1);color:var(--dim);flex-wrap:wrap;gap:.4rem 1rem;display:flex}.legend span{align-items:center;gap:.4rem;display:inline-flex}.legend .swatch{border:2px solid var(--ink);flex:none;width:13px;height:13px}.home{max-width:720px}.home-actions{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start;gap:1.5rem;display:grid}.home-actions h2{font-size:var(--step-1)}.lobby{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start;gap:1.25rem;display:grid}.room-code{background:var(--gold);border:var(--border);flex-wrap:wrap;align-items:center;gap:.5rem .9rem;padding:.9rem 1rem;display:flex}.room-code-label{font-family:var(--display);font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase}.room-code-value{font-family:var(--data);font-size:var(--step-2);letter-spacing:.22em;font-weight:700}.room-code .hint{color:var(--ink);opacity:.7;flex-basis:100%}.seat-list{flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.seat-list li{min-height:var(--touch);border:var(--border);background:var(--paper);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.35rem .6rem;display:flex}.pip{border:2px solid var(--ink);flex:none;width:18px;height:18px}.seat-name{font-family:var(--display)}.tag{font-family:var(--data);font-size:var(--step--1);border:2px solid var(--ink);background:var(--paper-raised);padding:.1rem .4rem}.tag.warn{background:var(--ochre)}.tag.turn{background:var(--pink);color:var(--paper-raised)}.switch{min-height:var(--touch);border:var(--border);background:var(--paper);cursor:pointer;align-items:flex-start;gap:.75rem;padding:.5rem .6rem;display:flex}.switch[data-disabled=true]{cursor:not-allowed;opacity:.6}.switch input[type=radio]{border-radius:50%}.switch input[type=checkbox],.switch input[type=radio]{appearance:none;background:var(--paper-raised);border:var(--border);width:26px;height:26px;cursor:inherit;flex:none;margin:0}.switch input[type=checkbox]:checked,.switch input[type=radio]:checked{background:var(--teal);box-shadow:inset 0 0 0 4px var(--paper-raised)}.switch input[type=checkbox]:focus-visible,.switch input[type=radio]:focus-visible{outline:3px solid var(--pink);outline-offset:2px}.switch-text{flex-direction:column;gap:.1rem;display:flex}.switch-name{font-family:var(--display);font-size:var(--step-0)}.switch-help{color:var(--dim);font-size:var(--step--1)}.choice{border:var(--border);background:var(--paper);flex-direction:column;gap:.4rem;margin:0;padding:.6rem;display:flex}.choice[data-disabled=true]{opacity:.6}.choice legend{font-family:var(--display);font-size:var(--step-0);padding:0 .3rem}.choice>.switch-help{margin:0 0 .2rem}.table{flex-wrap:wrap;align-items:flex-start;gap:1.25rem;display:flex}.table-board{flex-direction:column;flex:320px;gap:.75rem;min-width:0;display:flex}.table-rail{flex-direction:column;flex:0 360px;gap:1rem;min-width:280px;display:flex}.turn-panel h2{font-size:var(--step-1)}.die{flex:none;display:block}.die[data-state=idle]{opacity:.7}.die[data-state=rolling]{animation:.24s linear infinite die-tumble}.die[data-state=result]{animation:.26s cubic-bezier(.2,1.5,.4,1) die-land}@keyframes die-tumble{0%{transform:translateY(0)rotate(0)}25%{transform:translateY(-9px)rotate(-15deg)}50%{transform:translateY(0)rotate(0)}75%{transform:translateY(-7px)rotate(13deg)}to{transform:translateY(0)rotate(0)}}@keyframes die-land{0%{transform:scale(1.24)rotate(-7deg)}55%{transform:scale(.94)rotate(2deg)}to{transform:scale(1)rotate(0)}}.pawn{transition:transform .3s cubic-bezier(.33,.85,.3,1)}.code-line{font-family:var(--data);letter-spacing:.18em}.seat{min-height:var(--touch);border:var(--border);background:var(--paper);align-items:center;gap:.6rem;padding:.35rem .5rem;display:flex}.seat[data-turn=true]{box-shadow:var(--shadow-soft);background:var(--paper-raised)}.seat-badge{border:2px solid var(--ink);width:30px;height:30px;color:var(--paper-raised);font-family:var(--display);font-size:var(--step--1);flex:none;place-items:center;display:grid}.seat-body{flex-direction:column;min-width:0;display:flex}.seat-where{font-family:var(--data);font-size:var(--step--1);color:var(--dim)}.seat-tags{flex-wrap:wrap;justify-content:flex-end;gap:.25rem;margin-left:auto;display:flex}.turn-log,.chat-feed,.ranking{font-size:var(--step--1);flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none;display:flex}.turn-log,.chat-feed{max-height:220px;overflow-y:auto}.turn-log li{border-left:3px solid var(--teal);padding-left:.7rem}.chat-feed li{word-break:break-word}.ranking li{align-items:center;gap:.5rem;display:flex}.chat form{flex-wrap:nowrap;margin-top:.6rem}.chat form input{flex:auto;min-width:0}.game-over{background:var(--gold)}.game-over h2{align-items:center;gap:.5rem;display:flex}.game-over-line{font-family:var(--display);font-size:var(--step-1);margin:.4rem 0 .8rem}.game-over button{background:var(--paper-raised)}.game-over button.primary{background:var(--pink);color:var(--paper-raised)}.rule-card{text-align:left;width:100%;color:var(--ink);background:var(--paper-raised);border:var(--border);border-left-width:10px;border-left-color:var(--card-ink,var(--square-plain));box-shadow:var(--shadow-hard);font-family:var(--body);cursor:pointer;border-radius:0;align-items:flex-start;gap:.7rem;padding:.75rem .8rem;animation:.24s cubic-bezier(.2,1.4,.4,1) card-land;display:flex}.rule-card[data-tone=plain]{--card-ink:var(--square-plain);--card-on:var(--on-plain)}.rule-card[data-tone=goose]{--card-ink:var(--square-goose);--card-on:var(--on-goose)}.rule-card[data-tone=move]{--card-ink:var(--square-move);--card-on:var(--on-move)}.rule-card[data-tone=trap]{--card-ink:var(--square-trap);--card-on:var(--on-trap)}.rule-card[data-tone=death]{--card-ink:var(--square-death);--card-on:var(--on-death)}.rule-card[data-tone=garden]{--card-ink:var(--square-garden);--card-on:var(--on-garden)}.rule-card-mark{border:var(--border);background:var(--card-ink,var(--square-plain));width:42px;height:42px;color:var(--card-on,var(--on-plain));flex:none;place-items:center;display:grid}.rule-card-text{flex-direction:column;gap:.15rem;min-width:0;display:flex}.rule-card-eyebrow{font-family:var(--data);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-size:.6875rem}.rule-card-name{font-family:var(--display);font-size:var(--step-1);line-height:1.1}.rule-card-why{font-size:var(--step--1);line-height:1.4}@keyframes card-land{0%{opacity:0;transform:translate(14px)scale(.96)}to{opacity:1;transform:translate(0)scale(1)}}.board-flight{pointer-events:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}