[hidden]{display:none!important}:root{color-scheme:dark;--ink: #1b1f2a;--paper: #fffaf0;--brand: #2F7BFF;--pink: #FF5C8A;--gold: #FFC93C;--green: #2FAE5B;--font: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#0d1530;color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none}canvas{position:fixed;inset:0;display:block}.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow-y:auto;touch-action:pan-y}.screen.dim{background:#0d1530b8;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.card{background:var(--paper);border:4px solid var(--ink);border-radius:26px;box-shadow:0 8px 0 var(--ink);padding:22px 26px;max-width:760px;width:100%}h1,h2,h3{margin:0 0 8px;line-height:1.05}h1{font-size:clamp(34px,6vw,64px);font-weight:800;color:#fff;text-shadow:0 4px 0 var(--ink),3px 0 0 var(--ink),-3px 0 0 var(--ink),0 -3px 0 var(--ink);text-align:center}h2{font-size:clamp(24px,3.4vw,36px);font-weight:800}p{margin:6px 0;font-size:19px;line-height:1.35}.btn{font-family:var(--font);font-weight:800;font-size:22px;border:4px solid var(--ink);border-radius:18px;padding:12px 22px;background:var(--gold);color:var(--ink);box-shadow:0 5px 0 var(--ink);cursor:pointer;min-height:56px}.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}.btn.blue{background:var(--brand);color:#fff}.btn.pink{background:var(--pink);color:#fff}.btn.green{background:var(--green);color:#fff}.btn.ghost{background:#fff}.btn[disabled]{opacity:.45}.row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center}.col{display:flex;flex-direction:column;gap:12px;align-items:stretch}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;width:100%}.tile{background:#fff;border:4px solid var(--ink);border-radius:20px;padding:10px;text-align:center;cursor:pointer;box-shadow:0 4px 0 var(--ink)}.tile.sel{outline:5px solid var(--gold);outline-offset:2px}.tile img,.tile canvas{width:96px;height:96px;position:static;display:block;margin:0 auto}.tile b{display:block;font-size:18px}.tile small{display:block;font-size:14px;opacity:.75;line-height:1.2}.muted{opacity:.7}.list{width:100%;border-collapse:collapse;font-size:19px}.list td{padding:4px 8px;border-bottom:2px dashed #e5dcc8}.list tr.me td{background:#fff2c2;font-weight:800}.list img{width:40px;height:40px;vertical-align:middle}.quote{display:flex;gap:10px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:6px 12px;margin:8px 0;text-align:left}.quote img{width:52px;height:52px}.pad{position:fixed;inset:auto 0 0;height:0;pointer-events:none}.pad button{position:fixed;pointer-events:auto;border:4px solid rgba(27,31,42,.85);background:#ffffff52;color:#fff;font-family:var(--font);font-weight:800;border-radius:50%;touch-action:none;text-shadow:0 2px 0 rgba(0,0,0,.5)}.pad button.on{background:#ffffffa6}.pad .left{left:max(18px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));width:110px;height:110px;font-size:48px}.pad .right{left:calc(max(18px,env(safe-area-inset-left)) + 124px);bottom:max(22px,env(safe-area-inset-bottom));width:110px;height:110px;font-size:48px}.pad .item{right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:120px;height:120px;font-size:22px;background:#ff5c8a8c}.pad .drift{right:calc(max(18px,env(safe-area-inset-right)) + 134px);bottom:max(22px,env(safe-area-inset-bottom));width:100px;height:100px;font-size:19px;background:#2f7bff80}.pad .brake{right:calc(max(18px,env(safe-area-inset-right)) + 40px);bottom:calc(max(22px,env(safe-area-inset-bottom)) + 136px);width:74px;height:74px;font-size:15px}.pause{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;transform:translate(-160px);width:52px;height:52px;border-radius:14px;border:3px solid var(--ink);background:#fffc;font-size:22px;font-weight:900}.rotate{display:none}@media(orientation:portrait)and (max-width:900px){.rotate{display:flex;position:fixed;inset:0;z-index:99;background:#0d1530;color:#fff;align-items:center;justify-content:center;text-align:center;font-size:26px;padding:30px;flex-direction:column;gap:14px}}@media(max-height:500px){.pad .left,.pad .right{width:86px;height:86px;font-size:38px}.pad .right{left:calc(max(14px,env(safe-area-inset-left)) + 98px)}.pad .item{width:96px;height:96px}.pad .drift{width:80px;height:80px;right:calc(max(18px,env(safe-area-inset-right)) + 108px)}.pad .brake{bottom:calc(max(22px,env(safe-area-inset-bottom)) + 108px)}p{font-size:16px}}.confetti-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}.confetti-bg i{position:absolute;top:-20px;width:12px;height:8px;animation:fall linear infinite}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}.piggy{font-size:110px;line-height:1;filter:drop-shadow(0 6px 0 var(--ink))}.bar{height:24px;border:3px solid var(--ink);border-radius:12px;background:#fff;overflow:hidden;width:100%}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#FFE082)}
