:root{--brown:#79533c;--cream:#fff1cc;--paper:#fff8e6;--green:#66884b;--green-dark:#4d6d38;--red:#df5845;--red-dark:#b2412f;--blue:#8099aa;color:var(--brown);background:var(--cream);font-synthesis:none;font-family:system-ui,-apple-system,Apple SD Gothic Neo,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:none;background:var(--cream);width:100%;height:100%;margin:0;overflow:hidden}body{-webkit-user-select:none;user-select:none;position:fixed;inset:0}#app{--safe-top:0px;transform-origin:50%;touch-action:none;width:390px;height:780px;position:absolute;top:50%;left:50%}#game{width:100%;height:100%}#game,canvas{display:block;width:100%!important;height:100%!important}canvas{touch-action:none}button{color:var(--brown);background:var(--paper);border:2.5px solid var(--brown);cursor:pointer;touch-action:manipulation;border-radius:18px;min-height:56px;padding:10px 16px;font:800 19px system-ui,sans-serif;transition:transform 80ms,box-shadow 80ms,filter 80ms;box-shadow:0 4px #79533c59}button:active{filter:brightness(.96);transform:translateY(3px);box-shadow:0 1px #79533c59}button:focus-visible{outline:4px solid var(--blue);outline-offset:3px}button:disabled{opacity:.6;transform:none}button small{opacity:.85;margin-top:2px;font-size:14px;font-weight:700;line-height:1.2;display:block}.primary{background:var(--green);color:var(--cream);border-color:var(--green-dark);box-shadow:0 4px 0 var(--green-dark)}.primary:active{box-shadow:0 1px 0 var(--green-dark)}.danger{background:var(--red);color:var(--cream);border-color:var(--red-dark);box-shadow:0 4px 0 var(--red-dark)}.danger:active{box-shadow:0 1px 0 var(--red-dark)}.ghost{box-shadow:none;text-underline-offset:4px;opacity:.8;background:0 0;border-color:#0000;font-size:16px;text-decoration:underline}.ghost:active{box-shadow:none;transform:none}.icon-btn{border-radius:50%;place-items:center;width:56px;min-width:56px;height:56px;padding:0;display:grid}.icon-btn svg{display:block}#pause{right:12px;top:calc(6px + var(--safe-top));z-index:3;color:var(--brown);background:#fff8e6e0;position:absolute}#panel{z-index:5;background:#79533c6b;place-items:center;padding:22px;display:grid;position:absolute;inset:0}#panel:empty{display:none}#panel.menu-mode{background:0 0;place-items:stretch stretch;padding:0}.card{background:var(--paper);border:3px solid var(--brown);text-align:center;touch-action:pan-y;border-radius:30px;width:100%;max-width:380px;max-height:calc(100% - 44px);padding:26px 22px 22px;animation:.22s ease-out card-in;overflow-y:auto;box-shadow:0 10px #79533c47}.card h2{margin:0 0 6px;font-size:29px}.card .lead{opacity:.85;white-space:pre-line;margin:6px 0 14px;font-size:16px;line-height:1.55}.card button{width:100%;margin-top:12px;display:block}.card .ghost{margin-top:6px}@keyframes card-in{0%{opacity:0;transform:translateY(14px)scale(.97)}to{opacity:1;transform:none}}.stats{text-align:left;margin:14px 0 6px}.stat{border-bottom:2px dashed #79533c38;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 2px;font-size:17px;display:flex}.stat:last-child{border-bottom:0}.stat span{opacity:.75;flex:none;font-weight:700}.stat b{text-align:right;overflow-wrap:anywhere;font-size:19px}.badge{background:var(--red);color:var(--cream);vertical-align:2px;border-radius:12px;margin-left:6px;padding:2px 9px;font-size:13px;display:inline-block}.cause{opacity:.8;margin:10px 0 2px;font-size:15px}.menu{padding:calc(12px + var(--safe-top)) 22px 46px;pointer-events:none;flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:0}.menu>*{pointer-events:auto}.menu .sound{align-self:flex-end}.logo{left:0;right:0;top:calc(84px + var(--safe-top));text-align:center;pointer-events:none;position:absolute}.logo h1{letter-spacing:-2px;color:var(--brown);text-shadow:0 5px #fffc,0 9px #79533c2e;margin:0;font-size:76px;line-height:1}.logo p{opacity:.85;margin:14px 0 0;font-size:17px;font-weight:700;line-height:1.5}.menu-bottom{flex-direction:column;align-self:center;gap:12px;width:100%;max-width:390px;display:flex}.menu-bottom button{width:100%;min-height:62px;font-size:22px}.record{text-align:center;opacity:.8;margin-top:4px;font-size:15px;font-weight:800}#notice{background:var(--brown);width:calc(100% - 34px);max-width:356px;color:var(--cream);text-align:center;pointer-events:none;white-space:pre-line;z-index:9;border-radius:14px;padding:10px;font-size:15px;position:absolute;bottom:52px;left:50%;transform:translate(-50%)}#notice:empty{display:none}[hidden]{display:none!important}#panel.ending-mode{pointer-events:none;background:0 0;place-items:end stretch;padding:0}.ending-buttons{pointer-events:auto;flex-direction:column;justify-self:center;gap:12px;width:100%;max-width:390px;padding:0 22px 46px;animation:.35s ease-out card-in;display:flex}.ending-buttons button{width:100%;min-height:62px;font-size:22px}.ending-buttons .ghost{min-height:44px;color:var(--cream);opacity:1;text-shadow:0 2px 6px #140a32cc;font-size:17px}.challenge-timer{top:calc(var(--safe-top,0px) + 76px);pointer-events:none;white-space:nowrap;background:#fff1cced;border:1px solid #79533c;border-radius:20px;padding:8px 16px;font-weight:800;position:absolute;left:50%;transform:translate(-50%)}.qa-metrics{white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;max-height:45vh;font-size:11px;overflow:auto}#panel .card:has(#weekly-start){max-height:88%;overflow:auto}.menu-bottom #weekly,.menu-bottom #settings{margin-top:4px;padding:9px;font-size:14px}#panel.challenge-overlay{pointer-events:none;background:0 0;display:block}.ranking-board .stat span{overflow-wrap:anywhere;text-align:left;flex:1;min-width:0}.menu-bottom{max-height:calc(100% - 240px - var(--safe-top));touch-action:pan-y;gap:10px;padding:0 4px 6px;overflow-y:auto}.menu-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.menu-actions button{min-height:56px;padding:8px;font-size:16px}.menu-bottom>.ghost{min-height:40px;font-size:15px}.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.collection-grid button{min-width:0;margin-top:0;padding:8px 2px;font-size:14px}.cosmetics{flex-wrap:wrap;gap:8px;display:flex}.cosmetics button{flex:42%;margin-top:0;padding:8px;font-size:14px}.start-list button{font-size:17px}.card h3{text-align:left;margin:22px 0 10px;font-size:17px}
