@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/fredoka-latin-500-normal.woff2) format('woff2')}@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fredoka-latin-600-normal.woff2) format('woff2')}@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/fredoka-latin-700-normal.woff2) format('woff2')}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{font-family:'Fredoka','Baloo 2','Comic Sans MS','Trebuchet MS',system-ui,sans-serif;color:var(--ink);background:var(--bg);user-select:none;-webkit-user-select:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.screen{display:none;min-height:100%;flex-direction:column;align-items:center;padding:14px;gap:12px}
.screen.on{display:flex}
.bar{width:100%;max-width:900px;display:flex;align-items:center;gap:10px}
.bar h1{flex:1;margin:0;font-size:clamp(22px,4.5vw,34px);font-weight:700;letter-spacing:.01em}
.btn{font:inherit;font-weight:600;font-size:clamp(17px,3vw,22px);border:0;border-radius:18px;padding:12px 20px;min-height:56px;min-width:56px;background:var(--btn);color:var(--btnInk);box-shadow:0 5px 0 var(--btnShade);cursor:pointer;transition:transform .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--btnShade)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:0 5px 0 var(--cardShade)}
.btn[hidden]{display:none}
.stage{position:relative;width:min(92vw,70vh,620px);aspect-ratio:1;border-radius:28px;background:var(--card);box-shadow:0 8px 0 var(--cardShade),0 18px 40px rgba(0,0,0,.12);overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.msg{font-size:clamp(20px,4vw,28px);font-weight:600;min-height:1.4em;text-align:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:12px;width:100%;max-width:900px}
.tile{font:inherit;font-size:38px;font-weight:700;aspect-ratio:1;border:0;border-radius:20px;background:var(--card);color:var(--ink);box-shadow:0 5px 0 var(--cardShade);cursor:pointer;position:relative}
.tile small{position:absolute;bottom:4px;left:0;right:0;font-size:13px;letter-spacing:1px}
.tile:active{transform:translateY(3px)}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.shake{animation:shake .4s}
.home{text-decoration:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}

/* --- artwork --- */
.hero-img{display:block;width:100%;max-width:900px;aspect-ratio:1200/630;max-height:36vh;object-fit:cover;border-radius:24px;box-shadow:0 6px 0 var(--cardShade),0 14px 30px rgba(0,0,0,.12)}
.hero-thumb{display:block;width:min(56vw,260px);aspect-ratio:1;border-radius:32px;box-shadow:0 6px 0 var(--cardShade),0 14px 30px rgba(0,0,0,.12)}
.card-img{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:18px;margin-bottom:8px}