:root{--cream:#fbf1d9;--wood:#8a5a34;--wood2:#5e3a1f;--coral:#ff6f59;--teal:#1b8a8f;--sun:#ffcf4a;--ink:#2b1a0e}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0d3b4a;font-family:Fredoka,sans-serif;color:var(--ink);touch-action:none;user-select:none}
#canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.sign{background:var(--cream);border:4px solid var(--wood);border-radius:14px;box-shadow:0 0 0 3px #d9b77d inset,0 6px 0 var(--wood2),0 10px 20px #0005;padding:10px 14px}
#hud{position:fixed;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;gap:8px}
#hud .sign{pointer-events:auto;font-size:14px}
.hud-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
button{font-family:'Lilita One',cursive;cursor:pointer;border:3px solid var(--wood2);border-radius:12px;background:var(--sun);color:var(--ink);box-shadow:0 4px 0 var(--wood2);transition:transform .1s}
button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--wood2)}
.mini{font-size:13px;padding:3px 8px}
.mid{font-size:18px;padding:8px 16px;margin:4px}
.big{font-size:26px;padding:12px 28px;background:var(--coral);color:#fff}
.alt{background:#9be3d8}
.panel-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0004;padding:16px}
.title-box{text-align:center;color:#fff;text-shadow:0 3px 0 #0006}
h1{font-family:'Lilita One',cursive;font-size:clamp(56px,14vw,130px);margin:0;color:var(--sun);-webkit-text-stroke:3px var(--wood2);letter-spacing:2px}
h2{font-family:'Lilita One',cursive;margin:4px 0 8px;font-size:28px;color:var(--wood2)}
.bob{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.tag{font-size:20px;font-style:italic;margin:6px 0 20px}
.pulse{animation:pulse 1.4s infinite;font-size:18px;margin-bottom:16px}
.pulse.ok{animation:none;color:#9cff9c}
@keyframes pulse{50%{opacity:.4}}
.row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.small{font-size:14px;opacity:.9}
.card{text-align:center;max-width:340px;width:100%;animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.wide{max-width:640px;width:100%;max-height:85vh;overflow:auto;text-align:center;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:translateY(80px) scale(.7);opacity:0}}
#cStars{color:#e0a100;font-size:22px}
#cWeight{font-weight:700}
#cFlavor{font-style:italic}
#dexGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:10px}
.dexItem{background:#fff8e8;border:2px dashed var(--wood);border-radius:10px;padding:6px;font-size:13px}
.dexItem canvas{width:100%;height:auto}
.lbRow{display:flex;justify-content:space-between;padding:6px 10px;border-bottom:2px dotted #d9b77d}
#prompt{position:fixed;bottom:44px;left:50%;transform:translateX(-50%);background:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:16px;white-space:nowrap;pointer-events:none}
#toast{position:fixed;top:90px;left:50%;transform:translateX(-50%);color:#fff;font-family:'Lilita One';font-size:24px;text-shadow:0 3px 0 #0008;pointer-events:none;transition:opacity .4s;opacity:0;text-align:center;width:90%}
label{display:block;margin:10px 0;font-weight:700}
label input[type=range]{width:100%}
.chk input{transform:scale(1.4);margin-right:8px}
footer{position:fixed;bottom:6px;right:10px;font-size:12px}
footer a{color:#fff;opacity:.7}