/* Hustle Town — "Sticker Arcade" design system (direction A).
   Die-cut stickers: cream stock, thick warm-ink outline, hard offset shadow (never blurred), slightly crooked. */
:root{
  --ink:#2B1D16;--ink-soft:#5E4A3F;--paper:#FFF6E6;--paper-2:#F4E3C6;
  --brand:#E8402C;--brand-2:#FFC93C;--accent:#2EA8A0;--cash:#3BB55A;--cash-d:#237A3A;
  --warn:#FF8A1F;--error:#D7263D;--dis:#BDB2A6;--dis-bg:#EDE5DA;
  --biz:#E8402C;--biz-2:#FFC93C;--biz-ink:#7A3D1D;
  --line:2.5px;--shadow:0 3px 0 rgba(43,29,22,.16);--r:14px;
  --f-display:'Lilita One','Arial Rounded MT Bold',sans-serif;--f-ui:'Nunito',system-ui,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
}
/* hybrid A+B: comic lettering on clean molded panels (soft highlight on top, gentle lip underneath) */
.stk{background:#FFFDF8;border:var(--line) solid var(--ink);border-radius:16px;color:var(--ink);
  box-shadow:inset 0 2px 0 #fff,inset 0 -4px 0 rgba(43,29,22,.07),0 3px 0 rgba(43,29,22,.14)}
svg.i{width:24px;height:24px;flex:none;display:block}
.num{font-family:var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* buttons (Toy Box style): molded plastic pill — top highlight, bottom lip, presses down 3px */
.btn{--lip:rgba(0,0,0,.13);font:700 18px 'Fredoka',var(--f-display);color:#fff;background:var(--brand);border:0;border-radius:999px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -5px 0 var(--lip),0 3px 0 rgba(43,29,22,.16);
  padding:12px 22px;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;text-decoration:none;transition:transform .09s,box-shadow .09s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:active,.btn.pressed{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -2px 0 var(--lip),0 1px 0 rgba(43,29,22,.16)}
.btn.alt{background:#FFFDF8;color:var(--ink);--lip:rgba(43,29,22,.12);box-shadow:inset 0 2px 0 #fff,inset 0 -5px 0 var(--lip),0 3px 0 rgba(43,29,22,.16),0 0 0 2px rgba(43,29,22,.35)}
.btn.alt:active,.btn.alt.pressed{box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 var(--lip),0 1px 0 rgba(43,29,22,.16),0 0 0 2px rgba(43,29,22,.35)}
.btn.warn{background:var(--error)}
.btn.round{width:50px;height:50px;padding:0;border-radius:50%;min-height:0}
.btn:focus-visible{outline:3px dashed var(--accent);outline-offset:3px}

/* chip / plaque */
.chip{font:16px var(--f-display);background:var(--brand-2);color:var(--ink);border:2px solid var(--ink);border-radius:9px;padding:1px 8px;box-shadow:0 2px 0 rgba(43,29,22,.16);white-space:nowrap}
.plaque{display:inline-block;font:22px var(--f-display);color:var(--paper);background:var(--biz);border:var(--line) solid var(--ink);border-radius:10px;padding:4px 14px;box-shadow:var(--shadow);transform:rotate(-2deg)}

/* progress bar: inset well + eased fill */
.bar{height:10px;background:var(--paper-2);border:2px solid var(--ink);border-radius:6px;overflow:hidden}
.bar>i{display:block;height:100%;width:0;background:var(--cash);border-radius:3px;transition:width .35s cubic-bezier(.3,1.4,.6,1)}

/* speech bubbles (follow characters) */
.say{position:fixed;left:0;top:0;font:900 13px/1.25 var(--f-ui);color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:14px;
  padding:6px 10px;max-width:170px;text-align:center;box-shadow:0 2px 0 rgba(43,29,22,.16);pointer-events:none;will-change:transform,opacity;transition:opacity .25s;z-index:2}
.say:after{content:'';position:absolute;left:50%;bottom:-9px;width:12px;height:12px;margin-left:-7px;background:inherit;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg)}
.say.angry{background:#FFD9D2;animation:shake .35s 2}
.say.vip{background:var(--brand-2)}
@keyframes shake{25%{margin-left:-3px}75%{margin-left:3px}}

/* floating rewards */
.float{position:fixed;left:0;top:0;font:24px var(--f-display);color:var(--brand-2);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;
  pointer-events:none;white-space:nowrap;will-change:transform,opacity;z-index:2}
.float.big{font-size:34px}

/* toasts: shape and colour say what kind of news it is */
.toast{display:flex;align-items:center;gap:9px;font:18px var(--f-display);padding:8px 16px 8px 8px;border:var(--line) solid var(--ink);border-radius:999px;box-shadow:inset 0 2px 0 #fff,inset 0 -4px 0 rgba(43,29,22,.08),0 3px 0 rgba(43,29,22,.14);
  background:#FFFDF8;color:var(--ink);line-height:1.15;max-width:min(400px,calc(100vw - 32px))}
.toast .t-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:2.5px solid var(--ink);background:var(--biz);color:var(--paper);flex:none}
.toast .t-ic svg{width:20px;height:20px}
.toast span{overflow:hidden;text-overflow:ellipsis}
.toast.unlock{background:var(--biz);color:var(--paper)}.toast.unlock .t-ic{background:var(--brand-2);color:var(--ink)}
.toast.hire .t-ic{background:var(--accent)}
.toast.vip{background:var(--brand-2)}.toast.vip .t-ic{background:var(--ink);color:var(--brand-2)}
.toast.event{background:var(--warn);color:var(--ink)}.toast.event .t-ic{background:var(--paper);color:var(--ink)}
.toast.goal .t-ic{background:var(--cash)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}