:root{--dark: #0b0b0d;--ink: #101114;--card: #14151a;--edge: #25272d;--line: #3f4249;--white: #ffffff;--text: #b9bcc4;--muted: #8f939c;--red: #e11d2e;--red-hi: #f0414f;--text-dim: var(--muted);--text-faint: var(--muted);--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas, monospace;--ease: cubic-bezier(.23, 1, .32, 1)}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:var(--dark);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.45;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}body:after{content:"";position:fixed;inset:0;z-index:90;background:url(/grain.svg);opacity:.05;pointer-events:none}body:focus,body:focus-visible{outline:none}#app{height:100%}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.brand:focus-visible,.legal a:focus-visible,.game:focus-visible,.btn:focus-visible,.hud__back:focus-visible,.hud__pause:focus-visible{outline:2px solid var(--red);outline-offset:2px}.wrap{width:100%;max-width:72rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}.app{display:flex;flex-direction:column;height:100%;min-height:0}.hud{display:flex;align-items:center;gap:12px;min-height:48px;padding:4px 10px 4px 14px;border-bottom:1px solid var(--edge);background:var(--dark);flex:none}.hud__mark{flex:none;width:22px;height:22px}.hud__back,.hud__pause{display:inline-flex;align-items:center;gap:6px;min-height:32px;border-radius:6px;color:var(--text);transition:color .15s ease-out,background-color .15s ease-out,border-color .15s ease-out,transform .16s var(--ease)}.hud__back{padding:0 10px 0 6px}.hud__back svg{width:15px;height:15px;color:var(--red)}.hud__pause{padding:0 12px;border:1px solid var(--line);font-size:13px}.hud__title{padding-left:12px;border-left:1px solid var(--edge);color:var(--white);font-size:15px;font-weight:600;line-height:20px;letter-spacing:-.01em;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}.hud__spacer{flex:1}.hud__stat{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}.hud__stat span{color:var(--muted)}.hud__stat b{color:var(--white);font-weight:600}.hud--tight{gap:10px;min-height:40px;padding-left:8px}.hud--tight .hud__title,.hud--tight .hud__mark{display:none}.body{display:flex;min-height:0;flex:1}.stage{position:relative;z-index:91;display:grid;place-items:center;min-width:0;min-height:0;flex:1;padding:10px;background:var(--dark)}.stage__inner{display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.stage canvas{display:block;max-width:100%;max-height:100%;border-radius:8px;background:var(--dark)}.side{width:272px;flex:none;border-left:1px solid var(--edge);background:var(--ink);overflow-y:auto}.app--narrow .body{flex-direction:column}.app--narrow .side{width:auto;border-left:0;border-top:1px solid var(--edge);max-height:38%}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:#0b0b0dd6;animation:fade .16s ease-out both}.card{width:min(340px,100%);padding:22px 22px 24px;border:1px solid var(--edge);border-radius:14px;background:var(--card);box-shadow:0 1px #ffffff08 inset,0 32px 64px -40px #020206e6;animation:card-in .24s var(--ease) both}.card h2{margin:0 0 6px;color:var(--white);font-size:26px;line-height:1.1;letter-spacing:-.03em}.card p{margin:0 0 20px;font-size:15px}.card__actions{display:flex;flex-wrap:wrap;gap:8px}@media(max-height:400px){.card{padding:14px 16px 16px}.card h2{font-size:20px}.card p{margin-bottom:12px;font-size:14px}}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border-radius:8px;color:var(--white);background:var(--red);font-weight:600;transition:box-shadow .15s ease-out,color .15s ease-out,border-color .15s ease-out,transform .16s var(--ease)}.btn--ghost{color:var(--text);background:none;border:1px solid var(--line);font-weight:500}.btn:disabled{color:var(--muted);background:var(--edge);cursor:default}.board{padding:14px 14px 18px}.board h3{margin:0;padding-bottom:10px;border-bottom:1px solid var(--edge);color:var(--white);font-size:15px;font-weight:600;letter-spacing:-.01em}.board ol{margin:0;padding:0;list-style:none}.board li{display:flex;align-items:baseline;gap:10px;padding:7px 6px;border-bottom:1px solid var(--edge);font-variant-numeric:tabular-nums}.board li.is-me{background:#e11d2e1a;box-shadow:inset 2px 0 var(--red)}.board li i{width:20px;color:var(--muted);font:500 12px var(--mono)}.board li.is-me i{color:var(--red-hi)}.board li em{flex:1;min-width:0;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board li b{color:var(--white);font-family:var(--mono);font-size:13px;font-weight:600}.board__empty{margin:0;color:var(--muted)}.board .board__empty{margin-top:10px}.namebox{display:flex;gap:6px;margin-top:14px}.namebox input{flex:1;min-width:0;padding:7px 10px;color:var(--white);background:var(--dark);border:1px solid var(--line);border-radius:6px;font:inherit;transition:border-color .15s ease-out}.namebox input:focus{outline:none;border-color:var(--red)}.namebox .btn{min-height:0;padding:7px 12px;border-radius:6px}.note{margin:8px 0 0;color:var(--muted);font-size:12px}.note--bad{color:var(--red-hi)}.pad{position:absolute;inset:auto 0 0;display:flex;align-items:flex-end;justify-content:space-between;padding:12px;pointer-events:none}.pad>*{pointer-events:auto}.pad__dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px)}.pad__key{display:grid;place-items:center;border:1px solid var(--edge);border-radius:8px;background:#14151ae0;color:var(--text)}.pad__key:active{border-color:var(--red);background:#e11d2e4d;color:var(--white)}.pad__fire{width:72px;height:72px;border-radius:50%}.menu{height:100%;overflow-y:auto;font-size:16px;line-height:1.6}.top{border-bottom:1px solid var(--edge)}.top__in{display:flex;align-items:center;height:52px}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--white);font-size:17px;font-weight:700;letter-spacing:-.01em;text-decoration:none;transition:transform .16s var(--ease)}.brand img{width:28px;height:28px}.brand__slash{margin:0 .18em;color:var(--red);font-weight:500}.brand__soft{color:var(--text);font-weight:500}.menu__head{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px;margin:clamp(24px,7vh,72px) 0 4px;padding-bottom:18px}.menu__head:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--edge);transform-origin:left}.menu__head h1{margin:0;color:var(--white);font-size:clamp(32px,18px + 3.4vw,56px);font-weight:700;line-height:1;letter-spacing:-.035em}.menu__head h1 span{display:block}.menu__head p{margin:0;color:var(--muted)}@media(max-height:420px){.top__in{height:40px}.brand{gap:8px;font-size:15px}.brand img{width:22px;height:22px}.menu__head{margin-top:14px;padding-bottom:10px}.menu__head h1{font-size:26px}.menu__head p{font-size:14px}}.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));column-gap:32px;margin:0 0 56px;padding:0;list-style:none}.game{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;align-items:center;gap:12px;width:100%;padding:14px 4px 15px;border-bottom:1px solid var(--edge);text-align:left;transition:background-color .15s ease-out,transform .16s var(--ease)}.game__no{align-self:start;padding-top:3px;color:var(--muted);font:500 13px/1.5 var(--mono);transition:color .15s ease-out}.game__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.game b{color:var(--white);font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.01em}.game__dot{display:inline-block;width:7px;height:7px;margin:0 9px 2px 0;border-radius:2px;vertical-align:middle;background:var(--tile-accent)}.game__input{flex:none;color:var(--muted);font:12px var(--mono)}.game__hint{display:block;color:var(--text);font-size:14px;line-height:1.45}.game__go{width:16px;height:16px;color:var(--line);transition:color .15s ease-out,transform .2s var(--ease)}.brand:active,.btn:active:not(:disabled),.hud__back:active,.hud__pause:active{transform:scale(.97)}.game:active{transform:scale(.985)}.legal{margin-top:-32px;padding-bottom:24px;color:var(--muted);font-size:13px}.legal a{color:inherit;text-decoration:none;border-radius:2px;transition:color .15s ease-out}@media(hover:hover)and (pointer:fine){.game:hover{background:#ffffff06}.game:hover .game__no{color:var(--red-hi)}.game:hover .game__go{color:var(--red);transform:translate(3px)}.legal a:hover{color:var(--white)}.btn:hover:not(:disabled){box-shadow:inset 0 0 0 40px #00000024}.btn--ghost:hover{color:var(--white);border-color:var(--muted)}.hud__back:hover{color:var(--white);background:var(--card)}.hud__pause:hover{color:var(--white);border-color:var(--muted)}}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{opacity:0;transform:translateY(14px)}}@keyframes card-in{0%{opacity:0;transform:translateY(6px) scale(.98)}}@keyframes line-up{0%{transform:translateY(110%);clip-path:inset(-.3em -.3em 110% -.3em)}to{clip-path:inset(-.3em)}}@keyframes grow{0%{transform:scaleX(0)}}@media(prefers-reduced-motion:no-preference){.menu--intro .menu__head h1 span{animation:line-up .8s var(--ease) both}.menu--intro .menu__head p{animation:rise .7s var(--ease) .18s both}.menu--intro .menu__head:after{animation:grow 1.1s var(--ease) .12s both}.menu--intro .games>li{animation:rise .6s var(--ease) both;animation-delay:calc(.24s + var(--i) * 35ms)}}@media(prefers-reduced-motion:reduce){.menu--intro .menu__head,.menu--intro .games{animation:fade .3s ease-out both}.card{animation-name:fade}}