/* Same look as alexv.site: its fonts (self-hosted copies), colours, hairline lists and big condensed headings. */
@font-face{font-family:"Bricolage Display";src:url(/display.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Bricolage Text";src:url(/text.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--bg:#0a111e;--panel:#0a111e;--panel2:#121c30;--line:#1c2840;--edge:#3a4a6c;--text:#eaeef6;--mut:#8995ab;--acc:#86a2ff;--acc-ink:#0a111e;--warn:#ffc247;--bad:#ff6b8b;--blue:#86a2ff;--focus:#86a2ff;
  --disp:"Bricolage Display",system-ui,sans-serif;--ease:cubic-bezier(.2,.8,.2,1)}
@media (prefers-color-scheme:light){:root{--bg:#f1f2ee;--panel:#f1f2ee;--panel2:#e4e6df;--line:#d4d8d0;--edge:#8d9488;--text:#0c1424;--mut:#5a6579;--acc:#2447e0;--acc-ink:#fff;--warn:#a36200;--bad:#c2234a;--blue:#2447e0;--focus:#2447e0}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:17px/1.55 "Bricolage Text",system-ui,sans-serif}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
a{color:var(--blue)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;max-width:1100px;margin:0 auto;padding:16px 20px;border-bottom:1px solid var(--line)}
.brand{font:800 1.7rem/1 var(--disp);font-stretch:75%;letter-spacing:-.02em;color:var(--text);text-decoration:none}
.brand:hover{color:var(--acc)}
#auth{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
main{max-width:1100px;margin:0 auto;padding:28px 20px 48px}
main:focus{outline:0}
.doc{max-width:760px}.doc h1{font-size:clamp(2.8rem,11vw,5rem)}.doc h2{margin-top:32px;color:var(--text);font-size:1.25rem}.doc li{margin:4px 0}
.foot{max-width:1100px;margin:0 auto;padding:20px;border-top:1px solid var(--line);color:var(--mut);font-size:15px}
h1{font:800 clamp(3.2rem,14vw,7.5rem)/.85 var(--disp);font-stretch:75%;letter-spacing:-.04em;margin:.15em 0 .2em -.04em;animation:fade .7s ease-out both}
h2{font:600 1.1rem/1.2 "Bricolage Text",system-ui,sans-serif;margin:0 0 1rem;color:var(--mut)}
.sub{color:var(--mut);margin:0 0 14px}
/* game list: the same rows as the project list on alexv.site */
.hub{margin-top:2rem;border-top:1px solid var(--line)}
.card{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem 1.5rem;padding:1.3rem 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;animation:fade .7s ease-out both;animation-delay:calc(.15s + var(--i,0)*90ms)}
.card::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.card:hover::after,.card:focus-visible::after{transform:none}
.card b{font:700 clamp(1.7rem,5vw,2.8rem)/1.1 var(--disp);font-stretch:80%;letter-spacing:-.02em;transition:color .15s,transform .35s var(--ease)}
.card:hover b,.card:focus-visible b{color:var(--acc);transform:translateX(.6rem)}
.card span{color:var(--mut);text-align:right;transition:color .15s}.card span small{display:block;font-size:.85em}
.card:hover span,.card:focus-visible span{color:var(--text)}
.panel{padding:1.4rem 0 0;border-top:1px solid var(--line);margin-top:2rem}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
button{cursor:pointer}
.primary,.ghost,.danger{padding:9px 18px;border-radius:6px;border:1px solid var(--edge);font-weight:600;min-height:44px}
.primary{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.primary:disabled{opacity:.45;cursor:not-allowed}
.ghost{background:transparent}.ghost:hover{border-color:var(--acc);color:var(--acc)}
.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
input[type=text]{padding:10px 12px;border-radius:6px;border:1px solid var(--edge);background:var(--panel2);min-height:44px;width:100%;max-width:320px}
.chk{display:flex;gap:10px;align-items:flex-start;margin:12px 0}.chk input{width:20px;height:20px;margin-top:3px}
.err{color:var(--bad);min-height:1.4em;margin:8px 0 0}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.bar a{color:var(--mut);text-decoration:none}.bar a:hover{color:var(--acc)}
.stat{color:var(--mut);font-variant-numeric:tabular-nums}.stat b{color:var(--text)}
.stage{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:20px;user-select:none;-webkit-user-select:none}
.note{min-height:1.5em;text-align:center;color:var(--mut)}.note.good{color:var(--acc)}
table.lb{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.lb td,.lb th{padding:.7rem 0;border-bottom:1px solid var(--line);text-align:left}.lb th{color:var(--mut);font-weight:400}.lb td:first-child,.lb th:first-child{width:3rem}.lb td:last-child,.lb th:last-child{text-align:right}
.lb tr.you td{color:var(--acc);font-weight:700}
dialog{border:1px solid var(--edge);border-radius:8px;background:var(--bg);color:var(--text);padding:24px;width:min(94vw,520px)}
dialog h2{color:var(--text);font-size:1.3rem}
dialog::backdrop{background:rgba(0,0,0,.65)}
pre{max-height:40vh;overflow:auto;background:var(--panel2);padding:10px;border-radius:6px;font-size:13px;white-space:pre-wrap;word-break:break-all}
/* games */
canvas{max-width:100%;border-radius:6px;border:1px solid var(--edge);background:var(--panel2);touch-action:none}
.pad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,56px);gap:6px;justify-content:center}
.pad button{border-radius:6px;border:1px solid var(--edge);background:var(--panel2);font-size:22px;touch-action:manipulation}
.pad .u{grid-column:2}.pad .l{grid-row:2;grid-column:1}.pad .d{grid-row:2;grid-column:2}.pad .r{grid-row:2;grid-column:3}
.g2048{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(92vw,400px);aspect-ratio:1;padding:8px;border-radius:8px;background:var(--line);touch-action:none}
.g2048 div{display:flex;align-items:center;justify-content:center;border-radius:5px;background:var(--panel2);font:800 clamp(22px,7vw,38px)/1 var(--disp);font-stretch:80%;color:var(--text)}
.g2048 .v2{background:#3b4a7a;color:#fff}.g2048 .v4{background:#4a5fa0;color:#fff}.g2048 .v8{background:#e08a3c;color:#1b1000}.g2048 .v16{background:#e86b2f;color:#fff}.g2048 .v32{background:#e0483f;color:#fff}
.g2048 .v64{background:#d12f54;color:#fff}.g2048 .v128{background:#f0c23a;color:#1b1000;font-size:clamp(18px,5vw,28px)}.g2048 .v256{background:#e9b712;color:#1b1000;font-size:clamp(18px,5vw,28px)}
.g2048 .v512{background:#8bd13a;color:#10200a;font-size:clamp(18px,5vw,28px)}.g2048 .v1024{background:#35d0a0;color:#05241a;font-size:clamp(16px,4.4vw,24px)}.g2048 .v2048{background:#86a2ff;color:#001238;font-size:clamp(16px,4.4vw,24px)}
.g2048 .big{background:#c77dff;color:#1a0030;font-size:clamp(14px,4vw,22px)}
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(92vw,400px)}
.mem button{aspect-ratio:1;border-radius:6px;border:1px solid var(--edge);background:var(--panel2);font-size:clamp(26px,9vw,44px);touch-action:manipulation}
.mem button.up{background:var(--bg);border-color:var(--acc)}.mem button.done{background:var(--acc);border-color:var(--acc)}
.react{width:min(92vw,520px);min-height:240px;border-radius:8px;border:1px solid var(--edge);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:22px;font-weight:700;text-align:center;padding:18px;touch-action:manipulation;background:var(--panel2)}
.react.wait{background:#7a2b3f;border-color:#ff6b8b;color:#fff}.react.go{background:#1f9d6e;border-color:#35d0a0;color:#fff}.react.fail{background:#7a5a1b;color:#fff}
.react small{font-weight:400;opacity:.9}
@media (prefers-reduced-motion:reduce){*,::after{transition:none!important;animation:none!important}}