:root{--bg:#f2efff;--ink:#1b1340;--pink:#ff4f8b;--yel:#ffd23f;--teal:#2ec4b6}
@media(prefers-color-scheme:dark){:root{--bg:#160f33;--ink:#f2efff}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "Trebuchet MS",Verdana,sans-serif}
main{max-width:920px;margin:0 auto;padding:24px 16px 48px}
h1{font-size:clamp(2rem,8vw,3.8rem);line-height:1;margin:.4em 0 .2em;transform:rotate(-1.5deg)}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
input{width:100%;max-width:420px;padding:10px 14px;font:inherit;color:#1b1340;background:#fff;border:3px solid var(--ink);border-radius:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin:24px 0}
.card{display:block;padding:18px;color:#1b1340;text-decoration:none;border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);background:var(--yel);transition:transform .1s}
.card:nth-child(3n+2){background:var(--teal)}.card:nth-child(3n){background:var(--pink)}
.card:hover{transform:translate(-2px,-2px) rotate(-1deg)}
.card b{display:block;font-size:1.25rem}.card span{font-size:2.4rem}
.back{display:inline-block;margin-bottom:8px;font-weight:bold}
canvas,.board{display:block;max-width:100%;border:3px solid var(--ink);border-radius:10px}
button{font:inherit;color:#1b1340;cursor:pointer}
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border:0;max-width:360px}
.board button{aspect-ratio:1;font-size:2rem;background:var(--yel);border:3px solid var(--ink);border-radius:10px}
.board button:disabled{background:var(--teal);opacity:.8}
.big{width:100%;height:260px;font-size:1.4rem;font-weight:bold;background:var(--yel);border:3px solid var(--ink);border-radius:14px}
.big.wait{background:var(--pink)}.big.go{background:var(--teal)}