*{box-sizing:border-box}body{margin:0;background:#261a14;color:#fff0d1;font-family:system-ui,sans-serif}main{max-width:920px;margin:auto;padding:24px 16px;text-align:center}.eyebrow{color:#efbc56;font-size:12px;letter-spacing:.18em}h1{margin:12px;font-size:clamp(26px,5vw,42px)}h1 small{display:block;font-size:.5em;margin-top:8px}p{line-height:1.7}canvas{display:block;width:100%;aspect-ratio:786.2/620.4;touch-action:none;user-select:none;cursor:crosshair}.toolbar{display:flex;justify-content:center;gap:18px;align-items:center;flex-wrap:wrap}button{border:0;border-radius:24px;padding:12px 24px;background:#efbc56;color:#261a14;font:inherit;font-weight:bold;cursor:pointer}output{display:block;margin:16px;font-size:13px;color:#efbc56}.note{font-size:12px;color:#c4ac98}button:focus-visible{outline:3px solid white;outline-offset:4px}
[hidden]{display:none!important}#message{min-height:2em;color:#ffe39a;font-weight:bold;font-size:clamp(16px,3vw,22px)}button:disabled{opacity:.5;cursor:wait}
dialog{position:fixed;inset:0;margin:auto;width:min(92vw,580px);max-height:90dvh;overflow:auto;border:1px solid #c18d40;border-radius:22px;background:#38251c;color:#fff0d1;padding:24px;text-align:center;box-shadow:0 20px 90px #0009}dialog::backdrop{background:#130d09b8}#preview{max-height:42dvh;object-fit:contain;cursor:default;touch-action:auto}#scores{line-height:2;margin:16px 0}#scores strong{display:block;font-size:40px;color:#efbc56}#message{margin-top:0} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
#title-screen{position:fixed;inset:0;background:#100c09;overflow:hidden}#title-image{display:block;width:100%;height:100%;object-fit:contain}.title-actions{position:absolute;left:50%;bottom:max(7dvh,env(safe-area-inset-bottom,0px));transform:translateX(-50%);text-align:center;width:max-content;max-width:90vw}.title-actions button{font-size:clamp(22px,3vw,32px);min-width:220px;padding:16px 48px;border:2px solid #fff2bb;box-shadow:0 6px 28px #000b;background:linear-gradient(#ffdc70,#ed9d25)}#title-status{background:#261a14d9;padding:8px 16px;border-radius:12px}
#presentation{padding:12px 0;min-height:210px;display:grid;place-content:center;gap:14px;overflow:hidden}#presentation p{margin:0}#formula{font-family:Georgia,serif;font-size:clamp(19px,4vw,30px);color:#ffe1a3;will-change:transform,opacity}#formula-note{font-size:11px;color:#bfa68e}#metric-label{font-size:clamp(22px,4vw,30px);font-weight:700;color:#ffe1a3}#metric-value{font-size:clamp(44px,9vw,74px);font-weight:900;font-variant-numeric:tabular-nums;line-height:1.3;color:#ffcf59;text-shadow:0 3px 18px #f1873455}#earned{font-size:12px;line-height:1.8;color:#cdbba7;max-width:470px}[data-phase="TOTAL"]{border:2px solid #ffd05b;background:radial-gradient(ellipse at 50% 45%,#6b411d,#38251c 75%)}[data-phase="TOTAL"] #metric-value{color:#fff1a0;text-shadow:0 0 24px #ffb72c99}#score-skip{font-size:13px;padding:9px 18px;background:#574130;color:#fff0d1}#scores small{display:block;line-height:1.8}@media(max-width:480px){dialog{padding:20px 14px}.toolbar{gap:12px}#earned{max-width:82vw}}@media(prefers-reduced-motion:reduce){#formula{will-change:auto}}
#export-panel{border-top:1px solid #725239;padding:12px 0;margin:16px 0}#export-status{font-size:13px;line-height:1.6;color:#e7cda3}#export-panel button{font-size:14px;padding:10px 18px}#export-preview{margin-top:14px;text-align:left}#export-preview summary{cursor:pointer;text-align:center;padding:8px;color:#efbc56}#result-image{display:block;width:100%;height:auto;border-radius:10px;margin-top:10px}
#preview-wrap{position:relative;line-height:0;overflow:hidden;max-width:100%}#countdown-overlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;overflow:hidden;max-width:100%;max-height:100%;color:#fff2bf;font-size:clamp(120px,28vw,220px);font-weight:900;line-height:1;text-shadow:0 5px 24px #261a14;opacity:.35}#countdown-overlay.countdown-pop{animation:countdown-pop .92s ease-out both}@keyframes countdown-pop{0%{opacity:0;transform:scale(.55)}35%{opacity:.35;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}#formula-note{display:none}@media(prefers-reduced-motion:reduce){#countdown-overlay.countdown-pop{animation:none;opacity:.35}}
