:root{--sand:#f4d58d;--sun:#e8772e;--acacia:#5f7f3a;--choc:#3b2414;--cream:#fff4d6;}
*{box-sizing:border-box}
body{margin:0;font-family:'Fraunces',serif;color:var(--choc);
background:radial-gradient(circle at 80% -10%,#ffb36b 0,transparent 40%),
repeating-radial-gradient(circle at 20% 30%,rgba(59,36,20,.05) 0 14px,transparent 14px 46px),var(--sand);min-height:100vh}
header{text-align:center;padding:20px 10px 6px}
.logo{display:flex;justify-content:center;align-items:center;gap:10px}
h1{font-family:'Silkscreen',monospace;font-size:clamp(32px,7vw,64px);margin:0;letter-spacing:2px;
text-shadow:3px 3px 0 var(--sun);animation:wob 3s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(-1.5deg) translateY(-2px)}}
#mascot{font-size:46px;display:inline-block;transition:.3s}
#mascot.nervous{animation:shake .3s infinite}
@keyframes shake{25%{transform:translateX(-3px) rotate(-6deg)}75%{transform:translateX(3px) rotate(6deg)}}
.tag{font-weight:300;font-style:italic;margin:4px}
nav{display:flex;justify-content:center;gap:6px;margin:10px}
nav button,.btn,.act{font-family:'Silkscreen',monospace;border:3px solid var(--choc);background:var(--cream);color:var(--choc);
padding:9px 14px;border-radius:14px;cursor:pointer;box-shadow:3px 3px 0 var(--choc);font-size:14px}
nav button.active,.btn{background:var(--sun);color:#fff}
.btn.alt{background:var(--cream);color:var(--choc)}
button:hover{background-image:radial-gradient(circle at 30% 40%,rgba(59,36,20,.25) 0 5px,transparent 6px),radial-gradient(circle at 70% 70%,rgba(59,36,20,.25) 0 4px,transparent 5px)}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--choc)}
main{max-width:880px;margin:auto;padding:0 12px}
.panel{display:none;background:var(--cream);border:3px solid var(--choc);border-radius:20px;padding:16px;box-shadow:6px 6px 0 var(--acacia)}
.panel.active{display:block;animation:pop .3s}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}
label{font-family:'Silkscreen',monospace;font-size:13px;display:flex;gap:8px;align-items:center}
.hint{font-size:14px;font-weight:300}
#thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;max-height:340px;overflow:auto}
.thumb{position:relative}
.thumb canvas{width:100%;image-rendering:pixelated;border:2px solid var(--choc);border-radius:6px}
.badge{position:absolute;bottom:4px;left:3px;font:8px 'Silkscreen';color:#fff;padding:1px 3px;border-radius:4px}
.stats{display:flex;flex-wrap:wrap;gap:18px;font-family:'Silkscreen';font-size:13px}
.meter{height:14px;border:2px solid var(--choc);border-radius:8px;margin:8px 0;overflow:hidden}
#meterFill{height:100%;width:0;background:repeating-linear-gradient(45deg,var(--sun) 0 8px,#f0a050 8px 16px);transition:.4s}
#lossChart{width:100%;border:2px solid var(--choc);border-radius:10px;background:#fffaf0}
.screens{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
figure{margin:0;text-align:center}
figure canvas{width:min(320px,42vw);image-rendering:pixelated;border:3px solid var(--choc);border-radius:10px}
figcaption{font:11px 'Silkscreen'}
#caption{text-align:center;font-style:italic;min-height:1.4em}
.pad{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.act{padding:10px 4px;font-size:11px}
@media(max-width:600px){.pad{grid-template-columns:repeat(3,1fr)}}
.chk{font-size:11px}
#film{display:flex;gap:4px;overflow-x:auto;padding:6px 0}
#film canvas{width:48px;height:48px;image-rendering:pixelated;border:2px solid var(--choc);border-radius:4px;cursor:pointer;flex:none}
#status{text-align:center;font:11px 'Silkscreen';margin:12px}
footer{text-align:center;padding:10px 0 24px}
footer a{color:var(--choc);font-family:'Silkscreen'}