/* self-hosted fonts — no fonts.googleapis.com at runtime (native app must work offline) */
@font-face{
  font-family:'Fredoka'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('assets/fonts/fredoka-var-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Press Start 2P'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/press-start-2p-latin.woff2') format('woff2');
}
:root{
  /* Cozy Warm — cream + terracotta + honey wood (palette pulled from the room art) */
  --wall:#f3ead9; --wall-sh:#e4d5bd;
  --wood:#c8763a; --wood-d:#9c4a26; --wood-dd:#7a3720;
  --terra:#e07a2f; --terra-d:#c05f1e;   /* primary CTA */
  --teal:#2f9e93; --teal-d:#237a72;     /* secondary */
  --cream:#fbf4e6; --cream2:#f3e7d0;    /* panels */
  --ink:#4a2f1e; --ink-soft:#8a6b52;    /* text on cream */
  --line:#d9c4a1;
  --good:#4c9f52; --good-d:#2e6b33;
  --bad:#d1544f; --coin:#f2b01e;
  --font-head:'Fredoka',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--wall);
  color:var(--ink);
  font-family:'Trebuchet MS',system-ui,sans-serif;
  font-size:15px;
  display:flex;flex-direction:column;
  position:relative;min-height:100%;
  overscroll-behavior:none;
  user-select:none;-webkit-user-select:none;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;}
button{font-family:inherit;}

/* ---------- soft themed scrollbars ---------- */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:#c9ae82;}

h2,h3{font-family:var(--font-head);}

/* ---------- top HUD (warm wood bar) ---------- */
#topbar{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(#a95f2f,#8a4a24);
  padding:calc(env(safe-area-inset-top) + 10px) 12px 9px;
  border-bottom:3px solid var(--wood-dd);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18);
  position:sticky;top:0;z-index:10;
}
.coinpill{
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.28);border-radius:20px;padding:4px 12px 4px 7px;min-width:0;
}
.coinpill b{font-family:var(--font-head);font-weight:700;color:#fff;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.coinpill .dot{width:18px;height:18px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe07a,var(--coin));border:2px solid #b4820f;}
.coinpill .gem{width:15px;height:15px;flex:none;margin:0 2px;
  background:linear-gradient(#7de3d6,#2f9e93);border:2px solid #1c6b63;transform:rotate(45deg);border-radius:3px;}
.spoolpill{cursor:pointer;background:rgba(233,194,78,.22);border-color:rgba(240,205,90,.55);}
.spoolpill:active{transform:translateY(1px);}
.hud-spool{width:19px;height:19px;flex:none;}
.mini-stat{color:#ffe9d2;font-size:12px;opacity:.92;white-space:nowrap;}
.mini-stat b{font-family:var(--font-head);color:#fff;font-weight:600;}
#topbar .spacer{flex:1;}
.hudbtn{width:34px;height:34px;flex:none;border-radius:10px;border:1.5px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);color:#fff;font-size:15px;display:grid;place-items:center;cursor:pointer;padding:0;}
.hudbtn:active{transform:translateY(1px);}

/* ---------- the world (Phaser shop board = main screen) ---------- */
#board-view{position:relative;flex:1;min-height:120px;overflow:hidden;
  background:linear-gradient(#bcdcea 0%,#d8ecf0 42%,#e9d8b8 62%,#e0b070 100%);}
#board-view canvas{position:absolute;inset:0;display:block;}
.scene-title{
  position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:6px;
  font-family:var(--font-head);font-weight:600;font-size:11.5px;letter-spacing:.3px;color:#fff;
  background:rgba(58,34,18,.62);backdrop-filter:blur(3px);
  border:1.5px solid rgba(255,255,255,.22);border-radius:14px;padding:6px 11px;
  text-shadow:0 1px 2px rgba(0,0,0,.5);cursor:pointer;z-index:3;
}
/* hitbox review mode (dev panel "Show hitboxes"): the pill's DOM hit area */
body.dev-hitboxes .scene-title{outline:2px dashed #f0f;background:rgba(255,0,255,.35);}
.scene-title .pin{color:#ffd27a;}
.scene-title:active{transform:translateY(1px);}
.hq-dot{width:9px;height:9px;background:#6ee86e;border:1px solid #063;border-radius:50%;
  box-shadow:0 0 6px #6ee86e;animation:pulse 1.2s ease-in-out infinite;display:none;}
.inv-readout{
  position:absolute;top:10px;right:10px;
  font-family:var(--font-head);font-weight:600;font-size:11px;color:#fff;
  background:rgba(58,34,18,.5);backdrop-filter:blur(3px);
  border:1.5px solid rgba(255,255,255,.22);border-radius:14px;padding:6px 11px;
  text-shadow:0 1px 2px rgba(0,0,0,.5);z-index:3;
}

/* ---------- bottom drawer (tabs lip + content) ---------- */
/* Overlays the board (absolute, not in flow) so the canvas keeps a constant size —
   the board glides its camera on toggle instead of resizing/restarting. */
#drawer{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  display:flex;flex-direction:column;
  background:var(--cream);
  border-top:4px solid var(--wood-d);
  border-radius:20px 20px 0 0;
  box-shadow:0 -8px 22px rgba(50,25,8,.30);
  padding-bottom:env(safe-area-inset-bottom);
}
#tabs{
  position:relative;display:flex;gap:7px;
  padding:17px 10px 8px;flex-shrink:0;cursor:pointer;
}
#tabs::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:44px;height:5px;border-radius:3px;background:var(--line);}
.tab-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px 5px;border-radius:12px;cursor:pointer;color:var(--ink-soft);
  border:1.5px solid transparent;background:none;min-width:0;
}
.tab-btn .ico{font-size:19px;line-height:1;height:20px;display:grid;place-items:center;}
.tab-btn .ico svg{width:20px;height:20px;display:block;}
.tab-btn .lbl{font-family:var(--font-head);font-weight:600;font-size:9.5px;letter-spacing:.2px;}
.tab-btn:not(.active) .ico{filter:grayscale(.4);opacity:.75;}
.tab-btn.active{background:#fff;border-color:var(--line);color:var(--terra-d);
  box-shadow:0 2px 5px rgba(60,30,10,.12);}
.tab-btn.active .ico{filter:none;opacity:1;}
.tab-btn:active{transform:translateY(1px);}
.tab-modal .ico{filter:none !important;opacity:1 !important;}   /* Market launcher: always lit */

/* Notification dots (v6.13): ONE consistent little green dot — on the tab icon, and on the icon of
   the specific new/ready item inside the panel. No borders, tags, or counts. Green = there's
   something new or ready here (new printer, unlockable filament/model, buyable upgrade, claimable
   contract, ready market); it reflects live state and stays until you act on it. */
.tab-btn{position:relative;}   /* anchor each dot to its OWN button (was falling back to #tabs → all piled on the grab-handle line) */
.tab-dot{position:absolute;top:5px;left:calc(50% + 7px);width:8px;height:8px;border-radius:50%;
  display:none;pointer-events:none;background:#35c63f;border:1px solid #147a1c;box-shadow:0 0 0 2px var(--cream);}
.tab-btn.active .tab-dot{box-shadow:0 0 0 2px #fff;}   /* active tab bg is white — match the halo */
.tab-dot.on{display:block;animation:newdot 1.8s ease-in-out infinite;}
.tab-dot.live{display:block;background:#ff9a2e;border:1px solid #8a4a00;animation:newdot 1s ease-in-out infinite;}
@keyframes newdot{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}

/* the SAME dot, tucked onto the icon of the specific new item */
.printer.is-new .printer-icon::after,
.supply.is-new .swatch::before,
.supply.is-new .cat-ic::after{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;
  background:#35c63f;border:1px solid #147a1c;box-shadow:0 0 0 2px #fff;z-index:3;
  animation:newdot 1.8s ease-in-out infinite;}
.printer.is-new .printer-icon{position:relative;}
.printer.is-new .printer-icon::after{top:3px;right:3px;}     /* inside — .printer-icon clips overflow */
.supply.is-new .swatch::before{top:-3px;right:-3px;}         /* swatch overflow is visible */
.supply.is-new .cat-ic{position:relative;}
.supply.is-new .cat-ic::after{top:-3px;right:-3px;}
/* upgrade rows have no icon — a leading inline dot on the name */
.upg.is-new .upg-name::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#35c63f;border:1px solid #147a1c;margin-right:7px;vertical-align:middle;}
/* the SAME green dot on the Mgr button when it's a Hire (a new crew member is available) */
.btn-mgr.hire-ready{position:relative;}
.btn-mgr.hire-ready::after{content:"";position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;
  background:#35c63f;border:1px solid #147a1c;box-shadow:0 0 0 2px #fff;z-index:3;
  animation:newdot 1.8s ease-in-out infinite;}

/* height animates 0 ↔ 48vh for a smooth slide; padding lives on the panels so height:0 fully closes */
main{display:block;height:0;overflow:hidden;-webkit-overflow-scrolling:touch;background:var(--cream);
  transition:height .3s cubic-bezier(.33,0,.2,1);}
body.drawer-open main{height:48vh;overflow-y:auto;}
.tab-panel{display:none;padding:4px 14px 18px;}
.tab-panel.active{display:block;}

.hint,.empty{color:var(--ink-soft);font-size:12.5px;text-align:center;margin:4px 0 12px;}
.empty{margin-top:28px;}

/* drawer heads (per-tab title + right control) */
.drawer-head{display:flex;align-items:center;gap:8px;padding:4px 2px 10px;}
.drawer-head h2{font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--ink);margin:0;}
.drawer-head .sub{font-size:11px;color:var(--ink-soft);}
.buyseg{display:flex;margin-left:auto;background:var(--cream2);border:1.5px solid var(--line);
  border-radius:10px;overflow:hidden;flex:none;}
.buyamt{border:0;background:transparent;font-family:var(--font-head);font-weight:600;font-size:11px;
  color:var(--ink-soft);padding:6px 9px;cursor:pointer;}
.buyamt.active{background:var(--terra);color:#fff;}

/* section dividers */
.section-title{display:flex;align-items:center;gap:9px;margin:8px 2px 11px;color:var(--ink-soft);
  font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:1px;}
.section-title::before,.section-title::after{content:"";flex:1;height:1.5px;background:var(--line);}
.section-title::before{display:none;}
.ip-wallet{font-size:10px;color:var(--ink-soft);font-weight:500;letter-spacing:0;}

/* ---------- printer cards ---------- */
.printer{
  background:#fff;border:1.5px solid var(--line);border-radius:15px;
  padding:11px;margin-bottom:11px;position:relative;
  box-shadow:0 2px 6px rgba(60,30,10,.08);
}
.printer.locked{opacity:.72;}
.printer.locked .printer-icon{filter:grayscale(.6);}
.printer-top{display:flex;align-items:center;gap:11px;}
.printer-icon{
  width:68px;height:68px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(#f7ecd6,#ecdcbc);border:1.5px solid var(--line);border-radius:12px;
  overflow:hidden;
}
.printer-icon canvas{width:64px;height:64px;}
.printer-icon img{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(60,30,10,.18));}
.printer-info{flex:1;min-width:0;}
.printer-name{font-family:var(--font-head);font-weight:600;font-size:14.5px;color:var(--ink);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.printer-count{background:var(--teal);color:#fff;font-family:var(--font-head);font-size:10.5px;font-weight:700;
  border-radius:8px;padding:1px 7px;}
.printer-count::before{content:"×";}
.qual-tag{background:#fdf1dc;color:#b4820f;font-family:var(--font-head);font-size:9px;font-weight:600;
  padding:1px 6px;border:1px solid #ecd9a8;border-radius:8px;}
.printer-rev{font-size:12px;color:var(--ink-soft);margin-top:4px;}
.mgr-tag{color:var(--teal);font-weight:700;}
.printer-rev .warn{color:var(--bad);font-weight:600;}

.printer-actions{display:flex;gap:8px;margin-top:10px;}
.btn{
  border:0;border-radius:12px;font-family:var(--font-head);font-weight:700;
  font-size:12.5px;cursor:pointer;padding:9px 6px;flex:1;line-height:1.25;
}
.btn:active{transform:translateY(2px);box-shadow:none !important;}
.btn:disabled{filter:grayscale(.5);opacity:.55;cursor:default;transform:none;}
.btn-buy{background:linear-gradient(var(--terra),var(--terra-d));color:#fff;box-shadow:0 3px 0 var(--wood-dd);}
.btn-run{background:linear-gradient(var(--teal),var(--teal-d));color:#fff;box-shadow:0 3px 0 #17564f;flex:0 0 88px;}
.btn-mgr{background:linear-gradient(#fff,#f2e7d1);color:var(--ink);box-shadow:0 3px 0 var(--line);flex:0 0 auto;padding:9px 11px;}
.btn small{display:block;font-weight:500;font-size:9.5px;opacity:.9;margin-top:2px;}

/* item / filament pickers on the card */
.item-pick{display:flex;align-items:center;gap:6px;margin-top:6px;}
.ipk{background:var(--cream2);color:var(--ink-soft);border:1.5px solid var(--line);border-radius:8px;
  font-size:10px;padding:4px 9px;cursor:pointer;line-height:1;}
.ipk:active{transform:translateY(1px);}
.item-cur{flex:1;display:flex;align-items:center;gap:6px;background:var(--cream);border:1.5px solid var(--line);
  border-radius:8px;padding:3px 7px;font-size:12px;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;}
.item-cur canvas{width:24px;height:24px;flex:none;}
.fil-pick{margin-top:5px;}
.fil-swatch{width:15px;height:15px;flex:none;border-radius:50%;border:1.5px solid rgba(0,0,0,.18);}

/* progress bar */
.prog-wrap{height:8px;background:var(--cream2);border:1px solid var(--line);border-radius:5px;
  margin-top:9px;overflow:hidden;}
.prog-bar{height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--teal),#57c9bb);}

/* ---------- upgrade rows ---------- */
.upg{
  background:#fff;border:1.5px solid var(--line);border-radius:13px;
  box-shadow:0 2px 6px rgba(60,30,10,.08);
  padding:10px 11px;margin-bottom:9px;display:flex;align-items:center;gap:10px;
}
.upg-body{flex:1;min-width:0;}
.upg-name{font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--ink);}
.upg-desc{font-size:12px;color:var(--ink-soft);margin-top:3px;}
.upg-buy{background:linear-gradient(var(--terra),var(--terra-d));border:0;border-radius:11px;color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:11.5px;
  padding:9px 12px;cursor:pointer;white-space:nowrap;box-shadow:0 3px 0 var(--wood-dd);}
.upg-buy:active{transform:translateY(2px);box-shadow:none;}
.upg-buy:disabled{filter:grayscale(.5);opacity:.55;transform:none;}
.upg-buy.prestige{background:linear-gradient(var(--teal),var(--teal-d));box-shadow:0 3px 0 #17564f;}
.rd-lvl{color:var(--terra-d);font-size:11px;font-weight:600;}

/* ---------- HQ: location rows ---------- */
.loc-row{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);
  border-radius:13px;padding:9px 11px;margin-bottom:8px;box-shadow:0 2px 6px rgba(60,30,10,.06);}
.loc-row.loc-current{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 2px 6px rgba(60,30,10,.06);}
.loc-row.loc-future{opacity:.65;}
.loc-done{color:var(--good);font-family:var(--font-head);font-weight:700;font-size:14px;}
.loc-lock{color:var(--ink-soft);font-size:11px;white-space:nowrap;}
#hq-location{margin-bottom:6px;}
#hq-modal .prestige-box{margin-top:10px;}

/* ---------- contracts ---------- */
.contract{background:#fff;border:1.5px solid var(--line);border-radius:15px;
  box-shadow:0 2px 6px rgba(60,30,10,.08);
  padding:11px;margin-bottom:11px;}
.con-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.con-client{font-family:var(--font-head);font-weight:600;font-size:12.5px;color:var(--ink);}
.con-reward{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--good);}
.con-stars{color:var(--coin);font-size:10.5px;letter-spacing:1.5px;margin-left:6px;vertical-align:1px;}
.con-flavor{font-size:11px;font-style:italic;color:var(--ink-soft);margin:-4px 0 8px;}
.con-reqs{display:flex;flex-direction:column;gap:5px;margin-bottom:9px;}
.con-req{display:flex;align-items:center;gap:8px;}
.con-bar{height:8px;background:var(--cream2);border:1px solid var(--line);border-radius:5px;
  margin:3px 0 2px;overflow:hidden;}
.con-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--terra),#f2a361);transition:width .2s linear;}
.con-fill.done{background:linear-gradient(90deg,var(--good),#6fc276);}
.con-ic{width:28px;height:28px;flex:none;}
.con-ic canvas{width:28px;height:28px;}
.con-need{flex:1;font-size:12.5px;color:var(--ink);}
.con-need small{color:var(--terra-d);font-size:11px;}
.con-count{font-family:var(--font-head);font-weight:600;font-size:11px;}
.con-count.ok{color:var(--good);}
.con-count.no{color:var(--bad);}
.con-count.locked{color:var(--terra-d);}
.con-fil{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--ink-soft);vertical-align:middle;}
.con-fil i{width:9px;height:9px;border:1px solid rgba(0,0,0,.2);border-radius:50%;display:inline-block;}
.contract-asp{border-color:var(--coin);box-shadow:0 0 0 1px var(--coin),0 2px 10px rgba(242,176,30,.28);}
.contract-asp .con-client{color:#b4820f;}
.con-actions{display:flex;gap:8px;}
.con-deliver{flex:1;font-family:var(--font-head);font-weight:700;font-size:13px;
  background:linear-gradient(#5cb15f,var(--good));border:0;border-radius:12px;
  color:#fff;padding:11px;cursor:pointer;box-shadow:0 3px 0 var(--good-d);}
.con-deliver:active{transform:translateY(2px);box-shadow:none;}
.con-deliver:disabled{filter:grayscale(.5);opacity:.55;transform:none;}
.con-skip{flex:0 0 48px;font-family:var(--font-head);font-weight:700;font-size:13px;
  background:linear-gradient(#fff,#f2e7d1);border:0;border-radius:12px;
  color:var(--ink-soft);cursor:pointer;box-shadow:0 3px 0 var(--line);}
.con-skip:active{transform:translateY(2px);box-shadow:none;}

/* ---------- prestige ---------- */
.prestige-box{background:#fff;border:1.5px solid var(--line);border-radius:15px;
  box-shadow:0 2px 6px rgba(60,30,10,.08);
  padding:15px;text-align:center;margin-bottom:16px;}
.prestige-box h2{margin:0 0 8px;font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--terra-d);}
.prestige-box p{font-size:12.5px;color:var(--ink-soft);margin:6px 0;}
.ip-gain{font-size:14px !important;color:var(--ink) !important;}
.sub{font-size:12px !important;}
#prestige-btn{margin-top:10px;background:linear-gradient(var(--terra),var(--terra-d));border:0;border-radius:13px;
  color:#fff;font-family:var(--font-head);font-weight:700;
  padding:13px;font-size:13.5px;cursor:pointer;width:100%;box-shadow:0 3px 0 var(--wood-dd);}
#prestige-btn:active{transform:translateY(2px);box-shadow:none;}
#prestige-btn:disabled{filter:grayscale(.5);opacity:.55;transform:none;}

/* ---------- supplies tab ---------- */
.supply{background:#fff;border:1.5px solid var(--line);border-radius:13px;
  box-shadow:0 2px 6px rgba(60,30,10,.06);
  padding:9px 10px;margin-bottom:9px;display:flex;align-items:center;gap:10px;}
.supply.active-fil{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 2px 6px rgba(60,30,10,.06);}
/* filament swatch drawn as a spool (colored winding + hub) */
.swatch{width:40px;height:40px;flex:none;border-radius:50%;position:relative;
  border:2px solid rgba(0,0,0,.15);box-shadow:inset 0 0 0 3px rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;font-size:0;}
.swatch::after{content:"";position:absolute;inset:12px;background:var(--cream);border-radius:50%;
  border:2px solid rgba(0,0,0,.15);}
.swatch.locked{filter:grayscale(.35) brightness(.9);}
.swatch.locked::after{content:"🔒";display:grid;place-items:center;font-size:11px;inset:9px;}
.cat-ic{width:36px;height:36px;flex:none;}
.cat-ic canvas{width:36px;height:36px;}
.supply-body{flex:1;min-width:0;}
.supply-name{font-family:var(--font-head);font-weight:600;font-size:12.5px;color:var(--ink);}
.supply-name .mult{color:var(--teal);font-weight:600;}
.supply-sub{font-size:11.5px;color:var(--ink-soft);margin-top:3px;}
.supply-btns{display:flex;flex-direction:column;gap:5px;align-items:stretch;}
.sbtn{font-family:var(--font-head);font-weight:700;font-size:10.5px;border:0;border-radius:10px;
  cursor:pointer;padding:7px 10px;white-space:nowrap;line-height:1.25;}
.sbtn:active{transform:translateY(1px);box-shadow:none;}
.sbtn:disabled{filter:grayscale(.5);opacity:.55;transform:none;}
.sbtn small{display:block;font-weight:500;font-size:9px;opacity:.9;margin-top:2px;}
.sbtn.select{background:linear-gradient(var(--teal),var(--teal-d));color:#fff;box-shadow:0 2px 0 #17564f;}
.sbtn.buy{background:linear-gradient(var(--terra),var(--terra-d));color:#fff;box-shadow:0 2px 0 var(--wood-dd);}
.sbtn.unlock{background:linear-gradient(#fff,#f2e7d1);color:var(--ink);box-shadow:0 2px 0 var(--line);border:1px solid var(--line);}
.owned-tag{font-family:var(--font-head);font-weight:700;font-size:10.5px;color:var(--good);}
.supply.locked{opacity:.82;}
.supply.locked .cat-ic{filter:grayscale(.55) brightness(.95);}
.locked-tag{font-family:var(--font-head);font-weight:700;font-size:9px;color:var(--ink-soft);text-align:center;line-height:1.3;white-space:nowrap;}
.autosupply{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--cream2);border:1.5px dashed var(--line);border-radius:12px;
  padding:10px;font-size:12px;color:var(--ink-soft);margin-bottom:4px;}
.autosupply .as-on{color:var(--good);font-weight:600;}

/* ---------- E5 collection stamps (catalog) ---------- */
.stamp-summary{display:flex;align-items:center;gap:9px;background:linear-gradient(#fff8e2,#f7e7b6);
  border:1.5px solid #e6c96a;border-radius:11px;padding:8px 11px;margin-bottom:9px;}
.stamp-summary .st{font-size:16px;color:#b4820f;}
.stamp-summary .tx{flex:1;min-width:0;font-family:var(--font-head);font-weight:600;font-size:11.5px;color:#b4820f;}
.stamp-summary .tx small{display:block;font-family:'Trebuchet MS',system-ui,sans-serif;font-weight:400;
  font-size:10.5px;color:var(--ink-soft);margin-top:1px;}
.pips{display:flex;gap:5px;margin-top:5px;}
.pip{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(0,0,0,.18);}
.pip.off{background:transparent;border:1.5px dashed #cbb891;}
.stamp-seal{flex:none;width:50px;height:50px;transform:rotate(-10deg);
  border:2.5px solid #b4820f;border-radius:50%;display:grid;place-items:center;text-align:center;
  color:#b4820f;font-family:var(--font-head);font-weight:700;font-size:7px;line-height:1.15;letter-spacing:.4px;
  background:radial-gradient(circle at 50% 38%,#fff8e2 0 60%,#f7e7b6 100%);
  box-shadow:0 0 0 2px #fff inset,0 1px 3px rgba(60,30,10,.2);}
.stamp-seal b{font-size:14px;display:block;line-height:1;}

.mini{background:#fff;color:var(--ink);border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--font-head);font-weight:600;
  padding:6px 12px;font-size:11px;cursor:pointer;box-shadow:0 2px 0 var(--line);}
.mini:active{transform:translateY(1px);box-shadow:none;}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(42,26,12,.55);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal.hidden{display:none;}
.modal-card{background:var(--cream);border:1.5px solid var(--line);border-radius:20px;
  box-shadow:0 14px 40px rgba(50,25,8,.35);
  padding:20px;text-align:center;max-width:340px;width:100%;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.modal-card h2{margin:0 0 10px;font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--terra-d);}
.modal-card p{color:var(--ink-soft);font-size:13px;margin:6px 0;}
.offline-earn{font-size:26px !important;color:var(--good) !important;font-family:var(--font-head);font-weight:700;}
.modal-card button{margin-top:12px;background:linear-gradient(var(--terra),var(--terra-d));border:0;border-radius:13px;
  color:#fff;font-family:var(--font-head);font-weight:700;
  padding:13px;font-size:13.5px;cursor:pointer;width:100%;box-shadow:0 3px 0 var(--wood-dd);}
.modal-card button:active{transform:translateY(2px);box-shadow:none;}

/* ---------- toast ---------- */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:rgba(58,34,18,.92);color:#ffe9d2;padding:10px 18px;
  font-family:var(--font-head);font-weight:600;font-size:12.5px;border-radius:16px;
  box-shadow:0 6px 18px rgba(50,25,8,.35);
  opacity:0;transition:.2s;pointer-events:none;z-index:60;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.float-cash{position:absolute;font-family:var(--font-head);font-weight:700;font-size:12px;color:#6ee86e;pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.6);animation:floatUp 1s ease-out forwards;}
@keyframes floatUp{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-34px);}}
@keyframes pulse{0%,100%{box-shadow:0 0 4px #6ee86e88;}50%{box-shadow:0 0 12px #6ee86e;}}

/* ---------- market mini-game ---------- */
.market-card{background:var(--cream);border:1.5px solid var(--line);border-radius:20px;
  box-shadow:0 14px 40px rgba(50,25,8,.35);
  padding:16px;max-width:440px;width:100%;position:relative;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.market-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.market-top h2{margin:0;font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink);}
#market-close,#hq-close{background:linear-gradient(#e0685f,var(--bad));border:0;border-radius:10px;color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:13px;padding:7px 11px;cursor:pointer;
  box-shadow:0 2px 0 #a13a36;}
#market-close:active,#hq-close:active{transform:translateY(2px);box-shadow:none;}
.market-stats{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:6px;font-size:13px;color:var(--ink-soft);margin-bottom:12px;}
/* keep the stats on ONE line — the "Earned" value grows unbounded late-game and would
   otherwise wrap to a 2nd line on narrow screens, resizing the whole modal on every sale */
.market-stats > span{white-space:nowrap;}
.market-stats > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.market-stats .combo-box{flex:none;}
.combo-box b.combo-hot{color:var(--bad);}
.good{color:var(--good);}

/* Market Day (v6.11): tab badge + the ready-bell / closed-sign gate faces */
#tab-market-btn{position:relative;}
.market-dot{display:none;position:absolute;top:5px;right:16px;width:9px;height:9px;border-radius:50%;}
.market-dot.ready{display:block;background:#6ee86e;border:1px solid #063;animation:mdot-pulse 1.2s infinite;}
.market-dot.live{display:block;background:#ffab3d;border:1px solid #7a4a00;animation:mdot-pulse .55s infinite;}
@keyframes mdot-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
.mtimer b{font-variant-numeric:tabular-nums;color:var(--ink);}
.mtimer b.mt-low{color:var(--bad);}
.mgate{text-align:center;padding:16px 12px 20px;}
.mgate-ico{font-size:42px;line-height:1;margin-bottom:8px;}
.mgate-title{font-family:var(--font-head);font-weight:700;font-size:16px;letter-spacing:.6px;color:var(--terra-d);}
.mgate-sub{font-size:13px;color:var(--ink-soft);margin:7px auto 14px;max-width:300px;}
.mgate-sub b{color:var(--ink);font-variant-numeric:tabular-nums;}
.mgate-btn{width:100%;max-width:280px;}
.mgate-hint{font-size:11.5px;color:var(--ink-soft);margin-top:10px;}

/* shelf strip — what you have to sell */
.inv-strip-label{font-family:var(--font-head);font-weight:600;font-size:10px;letter-spacing:1px;color:var(--ink-soft);margin-bottom:6px;}
#market-inv-strip{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;background:var(--cream2);
  border:1.5px solid var(--line);border-radius:12px;padding:7px;margin-bottom:14px;height:48px;align-items:center;}
.shelf-chip{flex:none;display:flex;align-items:center;gap:3px;background:#fff;border:1.5px solid var(--line);
  border-radius:9px;padding:2px 6px 2px 2px;font-size:12px;color:var(--ink);}
.shelf-chip canvas{width:30px;height:30px;}
.shelf-empty{color:var(--ink-soft);font-size:12px;padding:4px 8px;}

/* single customer */
#market-customer{height:194px;overflow:hidden;position:relative;}
.cust-card{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);
  border-radius:15px;padding:12px;height:84px;overflow:hidden;box-shadow:0 2px 6px rgba(60,30,10,.08);}
.cust-avatar{font-size:36px;flex:none;width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  background:var(--cream2);border:1.5px solid var(--line);border-radius:12px;}
.cust-body{flex:1;min-width:0;}
.cust-line{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cust-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);margin:4px 0;white-space:nowrap;overflow:hidden;}
.cust-item canvas{width:30px;height:30px;flex:none;}
.cust-item b{font-family:var(--font-head);font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;}
.cust-offer{font-size:11.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cust-offer .demand{color:var(--terra-d);font-weight:700;margin-left:4px;}
.cust-offer .demand.demand-hot{color:var(--bad);}
.cust-pay{flex:none;min-width:88px;text-align:right;font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--good);}
.cust-pay small{display:block;font-size:9px;font-weight:500;color:var(--ink-soft);margin-bottom:3px;}
.cust-empty{color:var(--ink-soft);font-size:13px;text-align:center;padding:22px 10px;}
.cust-empty small{font-size:11.5px;display:block;margin-top:8px;}
.pat-wrap{height:9px;background:var(--cream2);border:1px solid var(--line);border-radius:5px;margin:12px 0;overflow:hidden;}
.pat-bar{height:100%;width:100%;border-radius:5px;background:linear-gradient(90deg,var(--coin),#f2c552);transition:width .12s linear;}
.cust-actions{display:flex;gap:8px;}
.cust-sell{flex:1;font-family:var(--font-head);font-weight:700;font-size:15px;
  background:linear-gradient(#5cb15f,var(--good));border:0;border-radius:14px;
  color:#fff;padding:14px 6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 3px 0 var(--good-d);}
.cust-sell:active{transform:translateY(2px);box-shadow:none;}
.cust-sell:disabled{filter:grayscale(.5);opacity:.55;transform:none;}
.cust-skip{flex:0 0 96px;font-family:var(--font-head);font-weight:600;font-size:12px;
  background:linear-gradient(#fff,#f2e7d1);border:0;border-radius:14px;
  color:var(--ink-soft);padding:14px 6px;cursor:pointer;box-shadow:0 3px 0 var(--line);}
.cust-skip:active{transform:translateY(2px);box-shadow:none;}
#market-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.mfloat{position:absolute;left:50%;top:46%;transform:translateX(-50%);font-family:var(--font-head);font-weight:700;
  font-size:14px;color:var(--good);animation:mfloat .9s ease-out forwards;white-space:nowrap;}
.mfloat.t2{font-size:16px;color:#c98a10;}
.mfloat.t3{font-size:18px;color:var(--terra-d);}
.mfloat.t4{font-size:20px;color:var(--bad);}
@keyframes mfloat{from{opacity:1;transform:translate(-50%,0) scale(1);}to{opacity:0;transform:translate(-50%,-52px) scale(1.2);}}

/* combo meter — colour heats up with the streak */
.combo-box{display:flex;align-items:center;gap:7px;}
#market-combo{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:14px;transition:color .15s;}
#market-combo.ct0{color:var(--ink-soft);}
#market-combo.ct1{color:#b4820f;}
#market-combo.ct2{color:#d9930f;}
#market-combo.ct3{color:var(--terra-d);}
#market-combo.ct4{color:var(--bad);}
.combo-bar-wrap{width:54px;height:8px;background:var(--cream2);border:1px solid var(--line);border-radius:5px;overflow:hidden;flex:none;}
#market-combo-bar{display:block;height:100%;width:0;border-radius:5px;background:var(--terra);transition:width .1s linear;}

/* streak callouts — brief centered text on milestones only */
.mcallout{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);font-family:var(--font-head);font-weight:700;
  white-space:nowrap;pointer-events:none;z-index:6;animation:mcallout .7s ease-out forwards;}
.mcallout.t2{font-size:16px;color:#c98a10;}
.mcallout.t3{font-size:18px;color:var(--terra-d);}
.mcallout.t4{font-size:20px;color:var(--bad);}
@keyframes mcallout{0%{opacity:0;transform:translate(-50%,-50%) scale(.7);}30%{opacity:1;transform:translate(-50%,-50%) scale(1);}70%{opacity:1;}100%{opacity:0;transform:translate(-50%,-64px) scale(1);}}