:root{--board: #a9533d;--board-dot: rgb(255 255 255 / .09);--on-board: #fff2e6;--token: #fff2e6;--token-edge: #dcb08e;--cocoa: #3b1d12;--cocoa-edge: #1d0c06;--cocoa-muted: #7a4a38;--me: #ffa04a;--me-edge: #bb6417;--me-ink: #a5520f;--them: #ffb3c0;--them-edge: #d77588;--them-ink: #b4546a;--error: #8c1d0e;--font-logo: "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;--font-game: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;--font-text: "Figtree", system-ui, sans-serif;--radius: 1rem;--press: cubic-bezier(.2, 1.6, .4, 1);--ink: var(--on-board);--muted: var(--on-board);--line: rgb(255 242 230 / .35);--accent: var(--me);--paper: var(--board);--card: var(--token);color-scheme:light}.card,dialog{--ink: var(--cocoa);--muted: var(--cocoa-muted);--line: var(--token-edge);color:var(--cocoa);background:var(--token);border-radius:var(--radius);box-shadow:0 5px 0 var(--token-edge),0 10px 18px -10px #3b1d1280}.card{padding:.875rem 1rem}*{box-sizing:border-box}html{background:var(--board)}body{margin:0;min-height:100vh;background-color:var(--board);background-image:radial-gradient(circle at 12px 12px,var(--board-dot) 3px,transparent 3.5px);background-size:24px 24px;color:var(--ink);font:500 1rem/1.5 var(--font-text);-webkit-font-smoothing:antialiased}::selection{background:var(--me);color:var(--cocoa)}:focus-visible{outline:3px solid var(--me);outline-offset:3px}h1,h2{font-family:var(--font-game);font-weight:400;line-height:1.1;letter-spacing:.01em;text-wrap:balance}h1{font-size:2rem;margin:.5rem 0 1rem}h2{font-size:1.25rem}a{color:inherit;text-underline-offset:3px;text-decoration-thickness:2px}.page{max-width:32rem;margin:0 auto;padding:1.25rem 1rem 3rem}.page>h1,.page>p{text-align:center}.brand{margin:0;font:400 3rem/.95 var(--font-logo);letter-spacing:-.01em;color:var(--on-board);text-shadow:0 3px 0 var(--cocoa)}.tagline{margin:.25rem 0 0;font-weight:800}.stack{display:grid;gap:.625rem}label{font-weight:800;font-size:.875rem}input,textarea{font:700 1.125rem/1.3 var(--font-text);padding:.75rem .875rem;border:0;border-radius:.875rem;background:var(--token);color:var(--cocoa);box-shadow:inset 0 3px 0 var(--token-edge);caret-color:var(--me-ink)}input::placeholder,textarea::placeholder{color:var(--cocoa-muted)}button,a.button{font:400 1.125rem/1 var(--font-game);letter-spacing:.02em;min-height:3rem;padding:0 1.125rem;border:0;border-radius:.875rem;background:var(--token);color:var(--cocoa);box-shadow:0 5px 0 var(--token-edge);cursor:pointer;transition:transform .12s ease-out,box-shadow .12s ease-out}button:active:not(:disabled),a.button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--token-edge)}button.primary,a.button.primary{background:var(--me);color:var(--cocoa);box-shadow:0 5px 0 var(--me-edge)}button.primary:active:not(:disabled),a.button.primary:active{box-shadow:0 1px 0 var(--me-edge)}button.dark,a.button.dark{background:var(--cocoa);color:var(--token);box-shadow:0 5px 0 var(--cocoa-edge)}button.dark:active:not(:disabled),a.button.dark:active{box-shadow:0 1px 0 var(--cocoa-edge)}button:disabled{opacity:.5;cursor:default}.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px currentColor}.ghost:active:not(:disabled){transform:none;box-shadow:inset 0 0 0 2px currentColor}.link-button{min-height:2.75rem;padding:0 .5rem;font:700 1rem/1 var(--font-text);letter-spacing:0;background:none;box-shadow:none;color:var(--ink);text-decoration:underline;text-underline-offset:3px}.link-button:active:not(:disabled){transform:none;box-shadow:none}a.button{display:grid;place-items:center;text-decoration:none}.error{margin:.5rem 0;padding:.5rem .75rem;border-radius:.75rem;background:var(--token);color:var(--error);font-weight:800}.muted{color:var(--muted);font-weight:500}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.pawn{position:relative;display:inline-block;width:1.375rem;height:1.875rem;color:var(--me);filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}.pawn:before,.pawn:after{content:"";position:absolute;background:currentColor}.pawn:before{left:.3125rem;top:0;width:.75rem;height:.75rem;border-radius:50%}.pawn:after{left:.0625rem;bottom:0;width:1.25rem;height:1.125rem;border-radius:.625rem .625rem .25rem .25rem}.pawn.them{color:var(--them)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.back{display:inline-flex;align-items:center;gap:.25rem;font-weight:800}.back svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
