:root{--cream:#FFF4D6;--cheese:#FFC93C;--mint:#7ED7C1;--tabby:#F28C28;--ink:#2B2A33}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:Fredoka,sans-serif;background:var(--cream);color:var(--ink);touch-action:none;user-select:none}
#scene-container{position:fixed;inset:0}
.hidden{display:none!important}
#hud{position:fixed;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;gap:8px;pointer-events:none;z-index:5}
.pill{pointer-events:auto;background:rgba(43,42,51,.78);color:var(--cream);border-radius:999px;padding:6px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 0 rgba(0,0,0,.25);font-size:15px}
.pill b{font-size:20px;color:var(--cheese)}
.pill small{opacity:.8}
.pill button{background:var(--mint);border:0;border-radius:999px;font:600 12px Fredoka;padding:5px 9px;cursor:pointer;color:var(--ink)}
.clock b{font-size:22px}
#lives{letter-spacing:2px}
#overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none}
.panel{pointer-events:auto;background:var(--cream);border:4px solid var(--ink);border-radius:28px;padding:26px 30px;max-width:92vw;max-height:88vh;overflow:auto;text-align:center;box-shadow:0 10px 0 var(--ink);animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.title{font-size:clamp(34px,8vw,72px);font-weight:700;line-height:.95;margin:0 0 8px;color:var(--tabby);text-shadow:4px 4px 0 var(--ink),-1px -1px 0 var(--ink)}
.title span{color:var(--cheese)}
.tag{font-size:17px;min-height:24px;margin-bottom:18px;opacity:.85}
.btn{display:block;width:100%;margin:8px 0;padding:12px 20px;font:700 20px Fredoka;border:3px solid var(--ink);border-radius:16px;background:var(--cheese);cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:transform .12s}
.btn:hover{transform:scale(1.04)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn.alt{background:var(--mint)}.btn.org{background:var(--tabby);color:#fff}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0}
.card{border:3px solid var(--ink);border-radius:14px;padding:6px;background:#fff;cursor:pointer;position:relative}
.card.locked{opacity:.45;cursor:not-allowed}
.card canvas{width:100%;image-rendering:pixelated;border-radius:6px}
.card .lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px}
.quote{font-style:italic;color:var(--tabby);margin:10px 0}
.lb{text-align:left;margin:10px 0;min-width:260px}
.lb div{display:flex;justify-content:space-between;padding:4px 8px;border-bottom:2px dashed #e4d5ae}
#dpad{position:fixed;left:14px;bottom:40px;display:grid;grid-template-columns:repeat(3,54px);gap:6px;z-index:6}
#dpad button{width:54px;height:54px;border-radius:50%;border:0;background:rgba(43,42,51,.45);color:#fff;font-size:20px}
#dpad button:active{background:var(--tabby)}
#remix{position:fixed;right:10px;bottom:8px;font-size:13px;color:var(--ink);background:var(--cheese);padding:4px 10px;border-radius:999px;text-decoration:none;z-index:20;border:2px solid var(--ink)}
#auth-status{position:fixed;left:10px;bottom:8px;font-size:12px;opacity:.7;z-index:20}
@media (hover:hover) and (pointer:fine){#dpad{display:none}}
@media(max-width:600px){.grid{grid-template-columns:repeat(3,1fr)}.pill{font-size:12px;padding:5px 9px;gap:6px}.pill b{font-size:16px}}