/* ============================================================
   HUSTLE & HYPE — theme.css
   Cartoon-bright kid palette. Chunky, rounded, playful.
   System fonts only — zero downloads, works offline.
   ============================================================ */
:root{
  --sun:#ffd93d; --sky:#4cc9f0; --grass:#8ac926; --coral:#ff6b6b;
  --grape:#9b5de5; --orange:#ff9f1c; --cream:#fff6e5; --ink:#3a3040;
  --card:#ffffff; --shadow:0 6px 0 rgba(58,48,64,.10);
  --r:22px;
  --font:'Baloo 2','Comic Sans MS','Chalkboard SE','Comic Neue','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; margin:0;}
body{
  font-family:var(--font); color:var(--ink);
  background:linear-gradient(160deg,#7ed6ff 0%,#a8e6b8 55%,#ffe98a 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1.45;
}
button{font-family:var(--font); cursor:pointer; border:none; color:inherit;}
button:active{transform:translateY(2px) scale(.98);}

/* ---------------- phone shell ---------------- */
#phone{
  width:100%; max-width:430px; height:100dvh; max-height:930px;
  background:var(--cream); position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
@media (min-width:480px){
  #phone{ border-radius:40px; border:10px solid #2e2a38; height:92vh;
    box-shadow:0 30px 60px rgba(20,30,60,.35); }
}
#screen{flex:1; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth;}
.screen-pad{padding:12px 14px 20px;}
.screen-t{font-size:1.35rem; font-weight:800; margin:6px 2px 10px;}
.sec-t{font-weight:800; margin:16px 4px 8px; font-size:1.05rem;}
.dim{opacity:.62;} .small{font-size:.82rem;} .center{text-align:center;}
.up{color:#1d9e57; font-weight:800;} .down{color:#d64545;}

/* ---------------- HUD ---------------- */
#hud{
  background:linear-gradient(180deg,var(--sun),#ffc93d);
  padding:10px 12px 8px; box-shadow:0 4px 0 rgba(58,48,64,.08); z-index:5;
}
.hud-row{display:flex; gap:8px; align-items:center; margin-bottom:6px;}
.hud-row:last-child{margin-bottom:0;}
.chip{
  background:rgba(255,255,255,.75); border-radius:999px; padding:5px 12px;
  font-weight:800; font-size:.85rem; box-shadow:0 2px 0 rgba(58,48,64,.08);
}
.energy{letter-spacing:1px; background:rgba(255,255,255,.85);}
.rep-chip{margin-left:auto;}
.cash-big{
  background:var(--ink); color:var(--sun); font-size:1.5rem; font-weight:900;
  border-radius:18px; padding:4px 18px; box-shadow:0 4px 0 rgba(0,0,0,.25);
  letter-spacing:.5px;
}
.net-chip{background:rgba(255,255,255,.75); font-weight:800;}
.tut-hint{
  background:#fff; border:3px dashed var(--coral); border-radius:14px;
  padding:8px 10px; font-size:.9rem; margin-top:6px; animation:wob 1.6s ease-in-out infinite;
}

/* ---------------- dock ---------------- */
#dock{
  display:flex; background:#fff; box-shadow:0 -4px 0 rgba(58,48,64,.08);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom)); z-index:5;
}
.dock-btn{
  flex:1; background:none; border-radius:16px; padding:6px 2px 4px;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  position:relative; font-size:.68rem; font-weight:800; opacity:.55;
}
.dock-btn.active{opacity:1; background:#eaf6ff;}
.dock-btn.active .dock-ico{transform:scale(1.15) rotate(-6deg);}
.dock-ico{font-size:1.45rem; transition:transform .18s;}
.badge{
  position:absolute; top:0; right:14%; background:var(--coral); color:#fff;
  font-size:.65rem; font-weight:900; border-radius:999px; padding:1px 6px;
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}

/* ---------------- cards & buttons ---------------- */
.card{
  background:var(--card); border-radius:var(--r); box-shadow:var(--shadow);
  padding:12px 14px; margin-bottom:12px; animation:pop .25s ease;
}
.card-t{font-weight:900; margin-bottom:4px;}
.big-btn{
  display:block; width:100%; background:var(--grass); color:#fff;
  font-size:1.15rem; font-weight:900; border-radius:18px; padding:14px;
  box-shadow:0 5px 0 #5da313; margin:8px 0; transition:transform .12s;
}
.big-btn:hover{animation:wob .5s ease;}
.big-btn:active{box-shadow:0 1px 0 #5da313;}
.big-btn.small{font-size:.95rem; padding:9px;}
.big-btn.ghost{background:#ece7f5; color:var(--ink); box-shadow:0 5px 0 #cfc6e0;}
.big-btn.danger{background:#ffe3e3; color:#c0392b; box-shadow:0 5px 0 #e6b0b0;}
.sleep-btn{background:var(--grape); box-shadow:0 5px 0 #6d3bb5;}
.sleep-btn:active{box-shadow:0 1px 0 #6d3bb5;}
.ngp-btn{background:var(--orange); box-shadow:0 5px 0 #d97f0a;}
.mini-btn{
  background:var(--sky); color:#fff; font-weight:900; border-radius:12px;
  padding:8px 12px; font-size:.85rem; box-shadow:0 3px 0 #2fa8d0; white-space:nowrap;
}
.mini-btn:active{box-shadow:0 1px 0 #2fa8d0;}
.mini-btn.sell{background:var(--grass); box-shadow:0 3px 0 #5da313;}
.mini-btn.sell:active{box-shadow:0 1px 0 #5da313;}
.mini-btn.max{background:var(--grape); box-shadow:0 3px 0 #6d3bb5;}
.mini-btn.ghost{background:#ece7f5; color:var(--ink); box-shadow:0 3px 0 #cfc6e0;}
.mini-btn.off{opacity:.45; filter:grayscale(.6);}
.mini-btn.sel{outline:3px solid var(--sun);}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:8px;}

/* ---------------- home ---------------- */
.hero-card{display:flex; gap:12px; align-items:center; background:linear-gradient(120deg,#fff,#eaf6ff);}
.hero-av{width:84px; height:84px; flex:none;}
.hero-hi{font-size:1.25rem; font-weight:900;}
.hero-sub{font-size:.9rem;}
.hero-koa{font-size:.85rem; opacity:.7;}
.champ-pill{background:var(--sun); border-radius:999px; padding:1px 8px; font-size:.75rem;}
.trend-card{background:linear-gradient(120deg,#fff,#fff3d6);}
.rae-tip{display:flex; gap:10px; align-items:center; background:#f1ffe4;}
.rae-av{width:48px; height:48px; flex:none;}
.app-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:4px 0 10px;}
.app-icon{
  background:#fff; border-radius:20px; box-shadow:var(--shadow);
  padding:12px 6px 9px; display:flex; flex-direction:column; align-items:center;
  gap:3px; position:relative; transition:transform .15s;
}
.app-icon:hover{transform:scale(1.05) rotate(-2deg);}
.app-ico{font-size:1.9rem;}
.app-name{font-size:.72rem; font-weight:800;}

/* ---------------- map ---------------- */
.dist-grid{display:grid; gap:12px;}
.dist-card{position:relative; padding:0; overflow:hidden;}
.dist-scene{width:100%; display:block;}
.lock-veil{
  position:absolute; inset:0; background:rgba(40,40,70,.55); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:900; border-radius:var(--r) var(--r) 0 0;
}
.dist-name{font-weight:900; font-size:1.05rem; padding:8px 14px 0;}
.dist-card .dim{padding:0 14px;}
.dist-card .big-btn{margin:8px 14px 12px; width:auto;}
.dist-card.locked .dist-scene{filter:saturate(.3) brightness(.8);}
.here-pill{
  background:var(--grass); color:#fff; font-size:.62rem; font-weight:900;
  border-radius:999px; padding:2px 8px; vertical-align:middle;
}

/* ---------------- market rows ---------------- */
.pack-meter{background:linear-gradient(120deg,#fff,#f3ecff);}
.meter{height:12px; background:#e8e2f5; border-radius:999px; overflow:hidden; margin-top:6px;}
.meter-fill{height:100%; background:linear-gradient(90deg,var(--grape),var(--sky)); border-radius:999px; transition:width .4s;}
.row-card{display:flex; gap:10px; align-items:center; padding:10px 12px;}
.row-card.slim{padding:8px 12px;}
.item-ico{width:52px; height:52px; flex:none; border-radius:14px;}
.row-main{flex:1; min-width:0;}
.row-name{font-weight:900;}
.row-name.small{font-size:.95rem;}
.row-btns{display:flex; flex-direction:column; gap:5px; flex:none;}
.qty-pill{background:#ece7f5; border-radius:999px; padding:1px 8px; font-size:.75rem; font-weight:900;}
.deal-pill{
  display:inline-block; background:#e2ffd9; color:#1d7a3f; border-radius:999px;
  font-size:.72rem; font-weight:900; padding:2px 8px; margin-top:3px;
}
.ex-pill{background:var(--sun); border-radius:999px; font-size:.62rem; padding:2px 7px; font-weight:900;}
.biz-ico{font-size:2rem; flex:none;}
.xfer-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 0; border-top:2px dashed #eee6f7; font-size:.9rem;
}

/* ---------------- quests ---------------- */
.quest-card.locked{opacity:.55;}
.quest-card.done{background:#f1ffe4;}
.quest-step{padding:3px 0; font-size:.9rem;}
.reward-pill{
  display:inline-block; background:#fff3d6; border-radius:999px; padding:3px 10px;
  font-size:.78rem; font-weight:800; margin-top:6px;
}

/* ---------------- wallet / profile ---------------- */
.wallet-big{font-size:2.2rem; font-weight:900; color:var(--ink);}
.nw-row{
  display:flex; justify-content:space-between; padding:5px 0;
  border-top:2px dashed #eee6f7; font-size:.95rem;
}
.nw-row:first-of-type{border-top:none;}
.lad-row.you{background:#fff3d6; border-radius:10px; padding:5px 8px; font-weight:900;}

/* ---------------- inbox ---------------- */
.msg-card.unread{border-left:8px solid var(--sky);}
.msg-card{cursor:pointer;}
.msg-head{display:flex; gap:10px; align-items:center; margin-bottom:6px;}
.msg-av{width:36px; height:36px; border-radius:50%; flex:none;}
.msg-emoji{font-size:1.8rem;}

/* ---------------- money words ---------------- */
.mw{
  background:#fff3d6; border-radius:8px; padding:0 5px; font-weight:900;
  color:#8a5a00; border-bottom:3px dotted var(--orange); display:inline-flex;
  align-items:center; gap:2px; font-size:.92em;
}
.mw-dot{
  background:var(--orange); color:#fff; border-radius:50%; width:14px; height:14px;
  font-size:.6rem; display:inline-flex; align-items:center; justify-content:center;
}
.mw-card{cursor:pointer;}
.mw-card.unseen{opacity:.65;}

/* ---------------- toasts ---------------- */
#toasts{
  position:absolute; top:76px; left:0; right:0; display:flex; flex-direction:column;
  align-items:center; gap:6px; z-index:60; pointer-events:none;
}
.toast{
  background:var(--ink); color:#fff; border-radius:999px; padding:8px 18px;
  font-weight:800; font-size:.9rem; box-shadow:0 6px 14px rgba(0,0,0,.25);
  opacity:0; transform:translateY(-8px) scale(.9); transition:all .25s; max-width:88%;
  text-align:center;
}
.toast.show{opacity:1; transform:none;}
.toast.good{background:#1d9e57;}
.toast.bad{background:#d64545;}

/* ---------------- overlays ---------------- */
#overlay{
  position:absolute; inset:0; background:rgba(40,35,60,.55);
  display:none; align-items:center; justify-content:center; padding:22px; z-index:50;
}
#overlay.open{display:flex;}
.overlay-card{
  background:var(--cream); border-radius:28px; padding:22px 20px; width:100%;
  max-width:340px; text-align:center; box-shadow:0 12px 0 rgba(0,0,0,.18);
  animation:pop .3s cubic-bezier(.2,1.6,.4,1); max-height:86%; overflow-y:auto;
}
.ov-emoji{font-size:2.6rem;}
.ov-title{font-weight:900; font-size:1.3rem; margin:4px 0;}
.ov-title.gold{color:#b8860b; text-shadow:0 2px 0 #ffe9a8;}
.ov-big{font-size:1.1rem; font-weight:800; margin-bottom:6px;}
.ov-text{font-size:.95rem;}
.ov-reward{
  background:#fff3d6; border-radius:14px; padding:8px; font-weight:900; margin:10px 0;
}
.recap-line{
  background:#fff; border-radius:12px; padding:7px 10px; margin:6px 0;
  font-size:.9rem; text-align:left; box-shadow:0 2px 0 rgba(58,48,64,.06);
}
.season-banner{
  background:linear-gradient(90deg,var(--orange),var(--sun)); color:#fff;
  border-radius:12px; padding:8px; font-weight:900; margin:8px 0;
}
.choice-list{display:flex; flex-direction:column; gap:10px; margin-top:12px;}
.choice-btn{
  background:#fff; border-radius:16px; padding:12px; font-weight:800;
  font-size:.95rem; box-shadow:0 4px 0 rgba(58,48,64,.10); text-align:left;
}
.risk-chip{
  display:inline-block; border-radius:999px; padding:2px 10px; font-size:.72rem;
  font-weight:900; color:#fff; margin-right:6px;
}
.risk-chip.safe{background:#1d9e57;}
.risk-chip.risky{background:var(--orange);}
.risk-chip.wild{background:#d64545;}
.badge-cv{width:130px; height:130px;}
.overlay-card.celebrate{background:linear-gradient(160deg,#fff6d8,#ffe9f3);}
.overlay-card.win{background:linear-gradient(160deg,#fff6d8,#ffe3c2);}
.overlay-card.encounter{background:linear-gradient(160deg,#eef7ff,#f3ecff);}

/* ---------------- title & intro ---------------- */
#title-screen{
  position:absolute; inset:0; z-index:70; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:26px;
  background:linear-gradient(160deg,#4cc9f0,#8ac926);
  text-align:center;
}
#title-screen.hidden{display:none;}
.game-logo{
  font-size:2.6rem; font-weight:900; color:#fff; line-height:1.05;
  text-shadow:0 4px 0 rgba(0,0,0,.18);
}
.game-logo span{color:var(--sun);}
.logo-sub{color:#fff; font-weight:800; opacity:.95;}
.title-koa{width:130px; height:130px; filter:drop-shadow(0 8px 0 rgba(0,0,0,.15));}
.title-btn{width:min(300px,80%); font-size:1.3rem;}
.title-btn.cont{background:var(--grass); box-shadow:0 5px 0 #5da313;}
.title-btn.new{background:#fff; color:var(--ink); box-shadow:0 5px 0 #c9c2d8;}
.title-note{color:#fff; opacity:.85; font-size:.85rem; font-weight:700;}
#intro{
  position:absolute; inset:0; z-index:75; display:none; align-items:center;
  justify-content:center; background:rgba(40,35,60,.55); padding:22px;
}
#intro.open{display:flex;}
.intro-card{
  background:var(--cream); border-radius:28px; padding:22px 20px; max-width:340px;
  text-align:center; animation:pop .3s cubic-bezier(.2,1.6,.4,1);
}
.intro-av{width:110px; height:110px;}
.pick-row{display:flex; gap:12px; justify-content:center; margin:10px 0;}
.pick-av{
  background:#fff; border-radius:20px; padding:8px; border:4px solid transparent;
  box-shadow:var(--shadow);
}
.pick-av.sel{border-color:var(--sun);}
.pick-av canvas{width:80px; height:80px; display:block;}

/* ---------------- error banner (debug safety net) ---------------- */
#errbox{
  display:none; position:absolute; bottom:70px; left:10px; right:10px; z-index:99;
  background:#d64545; color:#fff; font:12px/1.4 monospace; padding:8px 10px;
  border-radius:10px; white-space:pre-wrap;
}

/* ---------------- acts / festivals / dailies ---------------- */
.act-pill{
  background:linear-gradient(90deg,var(--grape),var(--sky)); color:#fff;
  border-radius:999px; padding:2px 10px; font-size:.72rem; font-weight:900;
  display:inline-block;
}
.act-btn{background:linear-gradient(90deg,var(--grape),var(--sky)); box-shadow:0 5px 0 #4a3f8f;}
.act-btn:active{box-shadow:0 1px 0 #4a3f8f;}
.daily-card{background:linear-gradient(120deg,#fff,#e8fff0);}
.daily-card.done{background:linear-gradient(120deg,#f1ffe4,#d9ffd0);}
.fest-banner{
  background:linear-gradient(120deg,#fff0f6,#fff6d8);
  border:3px dashed var(--orange);
}
.fest-banner.market-day{background:linear-gradient(120deg,#eaf6ff,#e2ffd9); border-color:var(--sky);}
.mystery-card{
  min-height:120px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,#3a3653,#565073); color:#fff; text-align:center;
}
.mystery-body{font-size:1.6rem; font-weight:900; padding:18px;}
.mystery-act{font-size:1rem;}
.mystery-card .dim{color:#fff; opacity:.7;}
.ex-pill.fest{background:var(--coral); color:#fff;}

/* ---------------- stories ---------------- */
.story-row{display:flex; gap:10px; align-items:center; padding:6px 0; border-top:2px dashed #eee6f7;}
.story-row:first-of-type{border-top:none;}
.story-av{width:44px; height:44px; flex:none; border-radius:50%; background:#f6f2ff;}
.enc-char{width:96px; height:96px; border-radius:50%; background:#f6f2ff; box-shadow:var(--shadow);}
.overlay-card.story{background:linear-gradient(160deg,#fff6e5,#f3ecff);}

/* ---------------- team / routes ---------------- */
.team-card{padding:12px 14px;}
.route-row{display:flex; gap:6px; margin-top:8px;}
.route-sel{
  flex:1; min-width:0; font-family:var(--font); font-weight:700; font-size:.78rem;
  border:2px solid #e3dcf2; border-radius:10px; padding:6px 4px; background:#fff;
  color:var(--ink);
}

/* ---------------- album ---------------- */
.album-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px;}
.album-cell{text-align:center;}
.album-cell canvas{width:100%; max-width:64px; border-radius:14px;}
.album-cell.missing{opacity:.75;}
.album-name{font-size:.62rem; font-weight:800; line-height:1.15;}
.tiny{font-size:.58rem;}
.album-gold{
  background:linear-gradient(120deg,#fff6d8,#ffe9a8);
  border:3px solid var(--sun);
}

/* ---------------- badge wall ---------------- */
.badge-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px;}
.badge-cell{
  background:#fff8ec; border-radius:14px; padding:8px 3px 6px; text-align:center;
  box-shadow:0 2px 0 rgba(58,48,64,.08);
}
.badge-cell.locked{filter:grayscale(1); opacity:.45;}
.badge-emoji{font-size:1.5rem;}
.badge-name{font-size:.6rem; font-weight:800; line-height:1.1;}

/* ---------------- NG+ picker ---------------- */
.ng-mods{display:flex; flex-direction:column; gap:8px; margin:10px 0; text-align:left;}
.ng-mod{
  display:flex; gap:10px; align-items:flex-start; background:#fff; border-radius:14px;
  padding:9px 10px; box-shadow:0 3px 0 rgba(58,48,64,.08); cursor:pointer;
}
.ng-mod input{width:20px; height:20px; accent-color:var(--grape); flex:none; margin-top:2px;}

/* ---------------- animations ---------------- */
@keyframes pop{from{transform:scale(.92); opacity:0;} to{transform:scale(1); opacity:1;}}
@keyframes wob{0%,100%{transform:rotate(0);} 25%{transform:rotate(1.2deg);} 75%{transform:rotate(-1.2deg);}}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important;}}