:root{--paper: #ffffff;--ink: #111110;--ink-soft: #57544e;--ink-faint: #8d8a83;--rule: #dedbd4;--rule-strong: #111110;--wash: #f6f5f2;--accent: #8c1d33;--good: #1f6b45;--serif: "EB Garamond", Garamond, "Adobe Garamond Pro", Baskerville, "Times New Roman", "Songti SC", "Hiragino Mincho ProN", "Yu Mincho", "Malgun Gothic", serif;--sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;--ease: cubic-bezier(.32, .72, .28, 1);--gutter: 1.25rem}*{box-sizing:border-box}html,body{height:100%;min-height:100dvh}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#app{min-height:100dvh;display:flex;flex-direction:column}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}input,textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}html:not(.keyboard) :focus{outline:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.label{font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}.screen{flex:1;display:flex;flex-direction:column;animation:fade .3s var(--ease) both}@keyframes fade{0%{opacity:0}}.wrap{width:100%;max-width:34rem;margin-inline:auto;padding-inline:var(--gutter)}.masthead{padding-block:1.75rem 1rem;text-align:center;border-bottom:1px solid var(--rule-strong)}.masthead h1{margin:0;font-size:clamp(2rem,11vw,3rem);font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1}.masthead p{margin:.65rem auto 0;max-width:26rem;font-size:.95rem;font-style:italic;color:var(--ink-soft);text-wrap:balance}.picker{display:flex;align-items:baseline;gap:.75rem;padding-block:.3rem}.picker .label{flex:none;min-width:7.5rem}.picker select{flex:1;min-width:0;appearance:none;-webkit-appearance:none;background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:.25rem 1.2rem .3rem 0;font-family:var(--serif);font-size:1.15rem;color:var(--ink);cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:right .45rem center,right .18rem center;background-size:.28rem .28rem,.28rem .28rem;background-repeat:no-repeat}.picker select:focus-visible{outline:none;border-bottom-color:var(--ink)}.field{padding-block:1.1rem;border-bottom:1px solid var(--rule)}.field>.label{display:block;margin-bottom:.6rem}.chosen{font-size:1.3rem;line-height:1.2}.options{display:flex;flex-direction:column}.opt{display:flex;align-items:baseline;gap:.65rem;width:100%;text-align:left;padding:.45rem 0;line-height:1.3}.opt .box{flex:none;width:.78rem;height:.78rem;border:1px solid var(--ink);transform:translateY(.06rem);transition:background .14s var(--ease)}.opt[aria-checked=true] .box{background:var(--ink)}.opt[aria-checked=true] .name{font-weight:600}.opt .name{flex:1}.opt .hint{display:block;font-size:.82rem;font-style:italic;color:var(--ink-faint);margin-top:.1rem}.opt[disabled]{cursor:not-allowed;color:var(--ink-faint)}.opt[disabled] .box{border-color:var(--rule)}.field.split{display:grid;grid-template-columns:1fr;gap:1rem 2rem}.field.split .group>.label{display:block;margin-bottom:.6rem}.options.inline{flex-direction:row;flex-wrap:wrap;gap:.3rem 1.2rem}.options.inline .opt{width:auto}.options.inline .hint{display:none}.disclose{display:flex;align-items:baseline;gap:.6rem;width:100%;padding:1.1rem 0;text-align:left;border-bottom:1px solid var(--rule)}.disclose .label,.disclose .mark{transition:color .16s var(--ease)}.disclose:hover .label,.disclose:hover .mark{color:var(--accent)}.disclose .state{flex:1;font-family:var(--serif);font-size:.95rem;font-style:italic;color:var(--ink-faint)}.disclose .mark{flex:none;font-family:var(--sans);font-size:1rem;line-height:1;color:var(--ink-soft)}.settings[hidden]{display:none}.settings .field:last-child{border-bottom:0}.play{display:block;width:100%;margin-top:1.4rem;padding:1.05rem;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;text-indent:.3em;transition:background .16s var(--ease)}.play:hover{background:var(--accent)}.play[disabled]{background:var(--rule);color:var(--ink-faint);cursor:not-allowed}.secondary{display:grid;grid-template-columns:repeat(3,1fr);margin-top:.9rem;margin-bottom:2rem;border-top:1px solid var(--rule)}.secondary button{padding:.9rem .2rem;font-family:var(--sans);font-size:.58rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border-right:1px solid var(--rule);transition:color .16s var(--ease)}.secondary button:last-child{border-right:0}.secondary button:hover{color:var(--accent)}.board{height:100dvh;padding-block:.7rem 1rem;gap:.6rem;overflow:hidden}.hud{display:flex;align-items:baseline;gap:.9rem;padding-bottom:.55rem;border-bottom:1px solid var(--rule)}.hud-quit,.mute{font-family:var(--sans);font-size:.58rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}.hud-quit:hover,.mute:hover{color:var(--accent)}.mute[aria-pressed=false]{color:var(--ink-faint);text-decoration:line-through}.mute[hidden]{display:none}.hud-stats{margin-left:auto;display:flex;gap:1rem;font-variant-numeric:tabular-nums}.stat{text-align:right;line-height:1.05}.stat b{display:block;font-size:1.2rem;font-weight:500}.stat span{font-family:var(--sans);font-size:.5rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}.timer{height:1px;background:var(--rule)}.timer-fill{height:100%;background:var(--ink);transform-origin:left;transition:transform .25s linear}.timer-fill.low{background:var(--accent)}.timer[hidden]{display:none}.table{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.4rem,2vh,1.1rem);min-height:0}.side-label{font-family:var(--sans);font-size:.55rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0}.reveal{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);margin:0;padding:.3em .5em;background:var(--paper);border-block:1px solid var(--rule-strong);text-align:center;font-size:clamp(1.25rem,6.5vw,2rem);line-height:1.15;overflow-wrap:anywhere;pointer-events:none;z-index:2}.reveal[hidden]{display:none}.reveal.in{animation:reveal .22s var(--ease) both}@keyframes reveal{0%{opacity:0;transform:translateY(-50%) scale(.96)}to{opacity:1;transform:translateY(-50%) scale(1)}}@media(prefers-reduced-motion:reduce){.reveal.in{animation:none}}.card-slot{flex:1 1 0;align-self:stretch;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}.card{position:relative;aspect-ratio:1;container-type:inline-size;height:100%;width:auto;max-width:min(100%,420px);max-height:100%;background:var(--paper);border:1px solid var(--rule);flex:none}.card.deal{animation:deal .3s var(--ease) both}@keyframes deal{0%{opacity:0}}.card.wrong{animation:shake .32s var(--ease)}@keyframes shake{20%{transform:translate(-6px)}45%{transform:translate(5px)}70%{transform:translate(-2px)}}.slot{position:absolute;display:grid;place-items:center;transform-origin:center;transition:filter .16s var(--ease)}.card--interactive .slot:hover{filter:brightness(.9)}.slot img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.slot .emoji{font-size:1em;line-height:1;pointer-events:none}.slot .chip{display:block;padding:.08em .12em .16em;border-bottom:1px solid var(--ink);font-family:var(--serif);font-size:1em;line-height:1.12;text-align:center;pointer-events:none;white-space:nowrap;background:var(--paper)}.slot.hit .chip,.slot.hit img,.slot.hit .emoji{animation:hit .3s var(--ease)}@keyframes hit{50%{transform:scale(1.22)}}.slot.miss .chip,.slot.miss img,.slot.miss .emoji{opacity:.3}.slot .key{position:absolute;inset-block-end:-.55em;inset-inline-end:-.3em;display:none;min-width:1.2em;padding:.05em .2em;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:.55rem;font-weight:600;line-height:1.5;text-align:center}html.keyboard .card--interactive .slot .key{display:block}.results{place-content:center;text-align:center;padding-block:2.5rem}.results h2{margin:0;font-size:clamp(1.8rem,9vw,2.4rem);font-weight:500}.results .lede{margin:.4rem 0 1.8rem;font-style:italic;color:var(--ink-soft)}.scoreboard{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--rule-strong);border-left:1px solid var(--rule);margin-bottom:1.6rem}.score{padding:.9rem .5rem;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}.score b{display:block;font-size:1.6rem;font-weight:500;font-variant-numeric:tabular-nums}.score span{font-family:var(--sans);font-size:.55rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}.score.best b{color:var(--good)}.actions{display:flex;flex-direction:column;gap:.5rem}.ghost{padding:.85rem;border:1px solid var(--ink);font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:background .16s var(--ease),color .16s var(--ease)}.ghost:hover,.ghost[aria-pressed=true]{background:var(--ink);color:var(--paper)}.footnote{margin-top:1.5rem;font-size:.85rem;font-style:italic;color:var(--ink-faint);text-align:center}.share-line{margin-top:.9rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-style:normal;font-size:.7rem;line-height:1.5;color:var(--ink-soft);overflow-wrap:break-word;word-break:break-all;user-select:all}.panel{padding-block:1.6rem 2.5rem}.panel h2{margin:0 0 .2rem;font-size:1.7rem;font-weight:500}.panel .lede{margin:0 0 1.4rem;font-style:italic;color:var(--ink-soft)}.panel textarea{width:100%;min-height:9rem;padding:.7rem;border:1px solid var(--rule);font-family:var(--serif);font-size:.95rem;resize:vertical}.panel input[type=text]{width:100%;padding:.55rem 0;border:0;border-bottom:1px solid var(--rule);font-size:1.05rem;background:none}.panel .row{margin-bottom:1.1rem}.panel .row>.label{display:block;margin-bottom:.35rem}.problem{border-left:2px solid var(--accent);padding:.5rem 0 .5rem .7rem;margin-bottom:1rem;font-size:.9rem;color:var(--accent)}.problem ul{margin:.3rem 0 0;padding-left:1rem}.board-list{border-top:1px solid var(--rule-strong)}.entry{display:flex;align-items:baseline;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--rule)}.entry .who{flex:1}.entry .num{font-variant-numeric:tabular-nums}.entry .num span{font-family:var(--sans);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-left:.25rem}@media(min-width:700px){.field.split{grid-template-columns:2fr 1fr}:root{--gutter: 2rem}body{font-size:18px}.masthead{padding-block:3rem 1.4rem}.scoreboard{grid-template-columns:repeat(4,1fr)}.actions{flex-direction:row;justify-content:center}.actions .ghost{min-width:12rem}}@media(max-height:620px){.side-label{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.timer-fill{transition-duration:.25s!important}}.tabs{display:flex;gap:0;margin:1.2rem 0 .2rem;border-bottom:1px solid var(--rule-strong)}.tab{flex:1;padding:.6rem .4rem;border:0;background:none;font-family:var(--sans);font-size:.58rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .16s var(--ease)}.tab[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--accent)}.entry .place{min-width:1.8rem;font-family:var(--sans);font-size:.7rem;font-variant-numeric:tabular-nums;color:var(--ink-faint)}.entry.you{border-left:2px solid var(--accent);padding-left:.55rem}.entry.you .place,.entry.you .num{color:var(--accent)}.entry .meta{display:block;font-size:.78rem;color:var(--ink-faint)}.standing{margin:.9rem 0 0;text-align:center;font-size:.95rem;color:var(--accent)}.records{margin-top:2.4rem}.records h3{margin:0 0 .15rem;font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.records .footnote{margin-top:.1rem;margin-bottom:.9rem;text-align:left}
