@font-face{font-family:"Fredoka";src:url("fonts/fredoka.woff") format("woff");font-weight:400 700;font-display:swap}
:root{--ink:#3b2f2a;--paper:#fbf6ea;--kraft:#c9a477;--coral:#e0604e;--sun:#f2c14e;--leaf:#5c9e57;--sky:#7fb6d9;--mat:#2f5d50;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--mat);color:var(--ink);font-family:"Fredoka",ui-rounded,system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}
#app{position:relative;width:100%;height:100%}
#game{display:block;width:100%;height:100%}
.hidden{display:none!important}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.4rem;color:var(--paper);background:var(--mat);z-index:40}
/* paper card look */
.paper,.panel,.chip,#info,.pb,.pause-panel,#coach,#quip,#toast{background:var(--paper);border:2px solid var(--ink);box-shadow:3px 4px 0 rgba(30,20,10,.35)}
.hud{position:absolute;left:0;right:0;top:0;padding:calc(8px + var(--safe-t)) 10px 0;display:flex;flex-direction:column;gap:6px;pointer-events:none;z-index:10}
.hud .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.chip{border-radius:10px;padding:5px 10px;font-weight:700;font-size:1rem;pointer-events:auto;transform:rotate(-0.6deg)}
.chip:nth-child(2n){transform:rotate(0.7deg)}
.chip.name{background:var(--sun)}
.chip.ok{background:#bfe6a6}
.chip.cash{background:#e9f4ff}.chip.low{background:#ffd1c8}
.btn-chip{cursor:pointer;font-size:1.05rem;font-family:inherit}
#goals{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
#goals .g{font-size:.82rem;font-weight:600;background:rgba(251,246,234,.92);border:1.5px dashed var(--ink);border-radius:8px;padding:2px 8px;color:#6b5a50}
#goals .g.ok{background:#e4f6d6;border-style:solid;color:#2d6a2a}
#labels,#floats{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.lb{position:absolute;left:0;top:0;min-width:24px;padding:1px 6px;border-radius:9px;background:var(--paper);border:2px solid var(--ink);font-weight:700;font-size:.85rem;text-align:center}
.lb.happy{background:#c9f0b0}.lb.sad{background:#ffb4a8}.lb.cash{background:#fff1b8}
.float{position:absolute;transform:translate(-50%,-50%);font-weight:700;font-size:1.15rem;white-space:nowrap;text-shadow:2px 2px 0 var(--paper),-2px -2px 0 var(--paper),2px -2px 0 var(--paper),-2px 2px 0 var(--paper);animation:fl 1.3s ease-out forwards}
.float.pos{color:#2d7a2a}.float.neg{color:#c0392b}
@keyframes fl{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
#bottom{position:absolute;left:0;right:0;bottom:0;padding:0 8px calc(8px + var(--safe-b));z-index:10;display:flex;flex-direction:column;gap:6px;align-items:center}
#info{max-width:760px;width:100%;border-radius:10px;padding:5px 10px;font-size:.88rem;font-weight:500;min-height:2.1em}
.brow{display:flex;gap:8px;align-items:stretch;max-width:760px;width:100%}
#palette{display:flex;gap:6px;flex:1;overflow-x:auto}
.pb{flex:1;min-width:58px;border-radius:12px;padding:3px 2px 4px;display:flex;flex-direction:column;align-items:center;cursor:pointer;font-family:inherit;color:var(--ink);transition:transform .12s}
.pb img{width:48px;height:48px;pointer-events:none}
.pb .ico{font-size:1.9rem;height:48px;line-height:48px}
.pb .nm{font-size:.78rem;font-weight:700}
.pb .cost{font-size:.72rem;font-weight:600;color:#8a6a4a}
.pb.sel{background:var(--sun);transform:translateY(-6px) rotate(-1.5deg);box-shadow:3px 8px 0 rgba(30,20,10,.35)}
.acts{display:flex;flex-direction:column;gap:5px}
.btn-finish{flex:1;border-radius:12px;border:2px solid var(--ink);background:#d9d2c3;color:#7a6a5a;font-family:inherit;font-weight:700;font-size:1rem;padding:6px 12px;cursor:pointer;box-shadow:3px 4px 0 rgba(30,20,10,.35)}
.btn-finish.ready{background:var(--coral);color:#fff;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06) rotate(-1deg)}}
.btn-mini{border-radius:10px;border:2px solid var(--ink);background:var(--paper);font-family:inherit;font-size:.78rem;font-weight:600;padding:3px 8px;cursor:pointer}
#toast{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) rotate(-1deg);padding:8px 16px;border-radius:12px;font-weight:700;z-index:20;max-width:86vw;text-align:center}
#coach{position:absolute;left:50%;bottom:calc(150px + var(--safe-b));transform:translateX(-50%) rotate(.6deg);background:#fff1b8;padding:9px 14px;border-radius:12px;font-weight:700;z-index:12;max-width:min(560px,92vw);text-align:center;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{margin-bottom:5px}}
#quip{position:absolute;right:10px;top:calc(120px + var(--safe-t));max-width:min(330px,70vw);padding:8px 12px;border-radius:14px 14px 4px 14px;font-size:.9rem;z-index:11;transform:rotate(1deg)}
#quip b{color:var(--coral)}
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:25;background:rgba(30,40,30,.25);padding:12px}
.screen.active{display:flex}
.panel{border-radius:16px;padding:18px 22px;max-width:440px;width:100%;text-align:center;max-height:96%;overflow-y:auto;transform:rotate(-0.5deg);
  background:linear-gradient(135deg,transparent 49.6%,rgba(0,0,0,.06) 50%,transparent 50.4%),var(--paper)}
.panel.wide{max-width:640px}
.badge{display:inline-block;background:var(--coral);color:#fff;border-radius:999px;padding:3px 12px;font-size:.75rem;font-weight:700;letter-spacing:.06em}
h1{font-size:2.8rem;line-height:1;margin:8px 0 4px;color:var(--ink);text-shadow:3px 3px 0 var(--sun)}
h1 span{color:var(--coral);text-shadow:3px 3px 0 var(--ink)}
h2{font-size:1.6rem;margin:6px 0}
.tagline{font-weight:600;margin-bottom:2px}
.ver{font-size:.75rem;color:#8a7a6a}
.howto{text-align:left;font-size:.88rem;margin:10px 0 12px 20px;display:flex;flex-direction:column;gap:3px}
.btn{display:block;width:100%;margin:6px 0;padding:10px;border-radius:12px;border:2px solid var(--ink);font-family:inherit;font-size:1.05rem;font-weight:700;cursor:pointer;text-decoration:none;color:var(--ink);background:var(--paper);box-shadow:3px 4px 0 rgba(30,20,10,.3)}
.btn:active{transform:translate(2px,3px);box-shadow:1px 1px 0 rgba(30,20,10,.3)}
.btn-play,.btn-primary{background:var(--coral);color:#fff;font-size:1.25rem}
.btn-tip{background:#fff1b8}
.hint{font-size:.85rem;margin-top:8px;color:#6b5a50}
.studio{font-size:.75rem;margin-top:6px;letter-spacing:.12em;color:#8a7a6a}
.lang-picker{display:flex;gap:6px;justify-content:center;margin-bottom:8px}
.lang-btn{border:2px solid var(--ink);background:var(--paper);border-radius:8px;padding:2px 10px;font-family:inherit;font-weight:700;cursor:pointer}
.lang-btn.active{background:var(--sun)}
.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;margin:12px 0}
.lvl{border:2px solid var(--ink);border-radius:12px;background:#fff;padding:6px 4px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:1px;box-shadow:2px 3px 0 rgba(30,20,10,.3)}
.lvl:nth-child(3n){transform:rotate(1deg)}.lvl:nth-child(3n+1){transform:rotate(-1deg)}
.lvl .ln{font-size:1.3rem;font-weight:700}.lvl .lname{font-size:.68rem;font-weight:600;color:#6b5a50;line-height:1.1}.lvl .ls{color:#d89a14;font-size:.9rem}
.lvl.locked{opacity:.5;cursor:default}
.stars-big{font-size:2.6rem;color:#e0a01a;letter-spacing:.1em;text-shadow:2px 2px 0 var(--ink)}
.result{font-size:2rem}
.result-sub{font-size:.9rem;color:#6b5a50}
.verdict{font-style:italic;margin:10px 0;font-weight:600}
#pause-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(30,40,30,.45);z-index:30}
#pause-overlay.show{display:flex}
.pause-panel{border-radius:16px;padding:18px 22px;width:min(340px,90vw);text-align:center}
@media (max-width:600px){
  h1{font-size:2.3rem}
  .chip{font-size:.88rem;padding:4px 8px}
  #goals .g{font-size:.72rem}
  .pb{min-width:50px}.pb img{width:38px;height:38px}.pb .ico{font-size:1.5rem;height:38px;line-height:38px}.pb .nm{font-size:.68rem}
  #info{font-size:.76rem}
  .brow{flex-direction:column}
  .acts{flex-direction:row}.btn-finish{padding:8px}
  #quip{top:calc(150px + var(--safe-t));right:8px;font-size:.8rem;max-width:62vw}
  #coach{bottom:calc(200px + var(--safe-b));font-size:.9rem}
}