/* ============================================================
   Rembayung — Dinner Dash
   Warm amber and gold on deep dark brown. All panels share one
   language: near-black warm fill, gold rim, soft outer glow.
   ============================================================ */

:root{
  --bg:        #14100b;
  --pnl-1:     #1f1810;
  --pnl-2:     #140f07;
  --gold:      #f0c05a;
  --gold-2:    #c9a05a;
  --gold-dim:  #9c7c3c;
  --gold-line: rgba(201,160,90,.72);
  --ember:     #ff9d4d;
  --leaf:      #9ed67a;
  --ink:       #fdf3df;
  --ink-dim:   #b9a684;
  --bad:       #e2664f;
  --warn:      #e8a04a;
  --good:      #86c96b;
  --r-lg: 14px;
  --r-md: 11px;
  --r-sm: 8px;
  --glow: 0 0 8px rgba(240,192,90,.13), 0 2px 8px rgba(0,0,0,.5);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0; height:100%; width:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:"Trebuchet MS","Segoe UI",Verdana,system-ui,-apple-system,sans-serif;
  font-size:15px;
  -webkit-user-select:none; user-select:none;
  overscroll-behavior:none;
  touch-action:manipulation;
}
button{ font-family:inherit; color:inherit; }

#app{ position:fixed; inset:0; }

/* ---------- stage ---------- */
#stage{ position:absolute; inset:0; }
/* the WebGL canvas animates every frame: give it its own compositor layer so
   the HUD above it is not re-rasterised along with the scene */
#scene{ position:absolute; inset:0; width:100%; height:100%; display:block; transform:translateZ(0); }

/* ---------- world-space overlays over the 3D scene ----------
   Speech bubbles, floating coins and the flash live in DOM rather than in the
   scene: only a handful are ever on screen and they stay crisp at any zoom. */
#fx{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
#vig{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 48%, rgba(0,0,0,0) 32%, rgba(6,4,2,.28) 64%, rgba(4,3,2,.66) 100%);
}
#flash{ position:absolute; inset:0; opacity:0; transition:opacity .12s linear; mix-blend-mode:screen; }
#bneck{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  padding:5px 12px; border-radius:12px;
  background:rgba(30,22,14,.86); border:1px solid rgba(240,192,90,.4);
  color:var(--gold); font-size:12px; font-weight:bold; white-space:nowrap;
  opacity:0; transition:opacity .25s;
}
#bneck.on{ opacity:1; }

/* white rounded bubble with a tail, a dish inside and a cook/eat bar under it */
.sb{
  position:absolute; top:0; left:0; will-change:transform;
  margin:-30px 0 0 -19px;
  width:38px; padding:4px 0 5px;
  border-radius:9px;
  background:rgba(250,246,236,.96);
  border:1.4px solid rgba(201,160,90,.85);
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.sb::after{
  content:""; position:absolute; left:50%; bottom:-7px; margin-left:-5px;
  border:5px solid transparent; border-top-color:rgba(250,246,236,.96); border-bottom:0;
}
.sbe{ display:block; font-size:15px; line-height:1; }
.sbp{
  display:block; width:24px; height:4px; margin:4px auto 0;
  border-radius:2px; background:rgba(40,30,18,.2); overflow:hidden;
}
.sbp b{ display:block; height:100%; width:0%; background:#5f9e3f; }
.sbp.o b{ background:#c9902f; }
.sbp.r b{ background:#c2632f; }
.sb.plain{
  width:auto; padding:0; margin:-26px 0 0 -11px;
  background:none; border:0; box-shadow:none;
}
.sb.plain::after{ display:none; }
.sb.plain .sbe{ font-size:17px; text-shadow:0 2px 4px rgba(0,0,0,.8); }
.sb.plain .sbp{ display:none; }

.flt{
  position:absolute; top:0; left:0; will-change:transform;
  margin-left:-40px; width:80px; text-align:center;
  font:bold 14px "Trebuchet MS", sans-serif;
  text-shadow:0 0 3px rgba(10,7,4,.95), 0 2px 3px rgba(10,7,4,.9);
}

/* ============================================================
   Shared panel language
   ============================================================ */
/* The double rim and top sheen are folded into the panel itself: a background
   layer and a zero-blur inset ring. An extra ::after element for them measured
   3.6ms a frame across the HUD, because every panel became its own paint layer
   over the animating canvas. */
.pnl{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,226,171,.07), rgba(255,226,171,0) 46%),
    linear-gradient(180deg, var(--pnl-1) 0%, var(--pnl-2) 100%);
  border:1.5px solid var(--gold-line);
  border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px rgba(240,192,90,.12), var(--glow);
  color:var(--ink);
}

.scap{
  display:block;
  font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold-dim); font-weight:bold; white-space:nowrap;
}
.sval{ font-size:19px; font-weight:bold; color:var(--ink); letter-spacing:.5px; line-height:1; }
.sic{ font-size:15px; line-height:1; text-shadow:0 0 6px rgba(240,192,90,.5); }
.stat-top{ display:flex; align-items:center; justify-content:center; gap:6px; }

.medallion{
  flex:0 0 auto;
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  background:linear-gradient(180deg, rgba(240,192,90,.22), rgba(0,0,0,.42));
  border:1.5px solid var(--gold-line);
}
/* procedural gold tree medallion, no image files */
.medallion.tree::after{
  content:"";
  width:20px; height:20px;
  background:
    radial-gradient(circle at 50% 34%, var(--gold) 0 33%, rgba(0,0,0,0) 34%),
    radial-gradient(circle at 31% 45%, var(--gold) 0 25%, rgba(0,0,0,0) 26%),
    radial-gradient(circle at 69% 45%, var(--gold) 0 25%, rgba(0,0,0,0) 26%),
    linear-gradient(var(--gold),var(--gold)) 50% 78%/3px 9px no-repeat;
}

.bar{
  position:relative; display:block;
  height:15px; border-radius:8px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(201,160,90,.5);
  overflow:hidden;
}
.bar i{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(90deg,#7fae4a,#c9b04a 55%,#f0c05a);
}
.bar em{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:9.5px; font-weight:bold; letter-spacing:.6px;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.9);
}

.starrow{ display:flex; gap:2px; align-items:center; }
.starrow s{ font-size:15px; text-decoration:none; color:#4a3c26; line-height:1; }
.starrow s.on{ color:var(--gold); text-shadow:0 0 4px rgba(240,192,90,.6); }

/* ============================================================
   HUD overlay grid
   ============================================================ */
#hud{
  position:absolute; inset:0; z-index:5;
  pointer-events:none;
}
#hud > *{ position:absolute; pointer-events:none; }
#hud .pnl, #hud button, #hud .card{ pointer-events:auto; }

/* The canvas repaints continuously; giving each HUD region its own
   compositor layer stops it being re-rasterised alongside the scene. */
.hud-tl, .hud-tr, .hud-bl, .hud-br{ will-change:transform; }
.hud-tc{ will-change:transform; transform:translateX(-50%) translateZ(0); }
.hud-left{ will-change:transform; transform:translateY(-50%) translateZ(0); }
.hud-right{ will-change:transform; transform:translateY(-50%) translateZ(0); }
#nav{ will-change:transform; }


.hud-tl{ top:calc(10px + var(--safe-t)); left:12px; display:flex; flex-direction:column; gap:7px; }
.hud-tc{ top:calc(10px + var(--safe-t)); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; }
.hud-tr{ top:calc(10px + var(--safe-t)); right:12px; display:flex; gap:7px; align-items:flex-start; }
.hud-left{ top:50%; left:12px; transform:translateY(-50%); }
.hud-right{ top:50%; right:12px; transform:translateY(-50%); }
.hud-bl{ bottom:calc(12px + var(--safe-b)); left:12px; }
.hud-br{ bottom:calc(12px + var(--safe-b)); right:12px; }

/* ---------- brand ---------- */
.brand{ display:flex; align-items:center; gap:10px; padding:9px 14px 9px 10px; }
.brand-text{ display:flex; flex-direction:column; gap:2px; }
.brand-title{
  font-size:20px; font-weight:bold; letter-spacing:2.5px; line-height:1;
  color:var(--gold);
  text-shadow:0 0 7px rgba(240,192,90,.45);
}
.brand-sub{
  font-size:9px; letter-spacing:4px; color:var(--gold-dim); font-weight:bold; line-height:1;
}
.brand-meta{
  display:flex; gap:8px; align-items:baseline;
  margin-top:3px; font-size:8.5px; letter-spacing:.9px; line-height:1;
  color:#7d6845; text-transform:uppercase;
}
.brand-meta b{ color:var(--gold-2); }

/* ---------- level ---------- */
.levelpnl{ display:flex; align-items:center; gap:9px; padding:7px 11px; }
.lvl-chip{
  flex:0 0 auto;
  font-size:10px; font-weight:bold; letter-spacing:1.2px; color:#241a0c;
  background:linear-gradient(180deg,#f7d281,#cf9a37);
  border-radius:20px; padding:4px 10px;
}
.bar.xp{ width:132px; }
.minipill{
  display:flex; justify-content:space-between; gap:12px;
  padding:4px 10px; font-size:9.5px; letter-spacing:.7px;
}
.minipill span:first-child{ color:var(--gold-dim); text-transform:uppercase; }
.minipill span:last-child{ color:var(--gold); font-weight:bold; }
.qcost em{ font-style:normal; }

/* ---------- stat row ---------- */
.statrow{ display:flex; gap:8px; }
.stat{ min-width:104px; padding:7px 12px 6px; text-align:center; }
.stat .scap{ margin-top:3px; }
.stat.rush{
  border-color:var(--ember);
  animation:rushPulse 1.1s ease-in-out infinite;
}
.stat.rush .sval, .stat.rush .scap{ color:var(--ember); }
@keyframes rushPulse{
  0%,100%{ border-color:rgba(255,157,77,.55); }
  50%{ border-color:#ffb87a; }
}


/* ---------- coins / gear ---------- */
.tr-stack{ display:flex; flex-direction:column; align-items:stretch; gap:5px; }
.coinpnl{
  padding:7px 16px 6px; text-align:center; cursor:pointer;
  border:1.5px solid var(--gold-line);
  font:inherit;
}
.coinpnl .sval{ color:var(--gold); }
.leafchip{
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:3px 9px; border-radius:14px; cursor:pointer; font:inherit;
  background:rgba(20,15,9,.9);
  border:1px solid rgba(158,214,122,.4);
  font-size:10px; color:#7d8f68;
}
.leafchip span{ font-size:10px; }
.leafchip b{ color:var(--leaf); font-size:11px; }
.leafchip i{ font-style:normal; letter-spacing:1px; text-transform:uppercase; font-size:8px; }
.gearbtn{
  width:46px; height:46px; border-radius:var(--r-md);
  font-size:19px; color:var(--gold-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.gearbtn:hover{ color:var(--gold); }
.pnl.pulse{ animation:statPulse .45s ease-out; }
@keyframes statPulse{
  0%{ transform:scale(1) } 40%{ transform:scale(1.06) } 100%{ transform:scale(1) }
}

/* ============================================================
   Left action stack
   ============================================================ */
.actions{ display:flex; flex-direction:column; gap:8px; }
.actbtn{
  position:relative;
  width:66px; height:66px; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  cursor:pointer; font:inherit;
  transition:transform .12s, filter .2s, opacity .2s;
}
.actbtn .aic{
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 38% 28%, rgba(255,226,171,.28), rgba(0,0,0,.5) 72%);
  border:1px solid rgba(201,160,90,.6);
}
/* ---- procedural gold medallion icons (no emoji, no images) ---- */
.mic{ position:relative; display:block; width:24px; height:24px; }
.mic::before, .mic::after{ content:""; position:absolute; }

/* bell */
.mic.bell::before{
  left:3px; top:3px; width:18px; height:14px;
  border-radius:9px 9px 3px 3px;
  background:linear-gradient(180deg,#ffe9bd,#c9902f);
  border:1px solid rgba(58,38,12,.6);
}
.mic.bell::after{
  left:1px; top:16px; width:22px; height:4px; border-radius:2px;
  background:linear-gradient(180deg,#ffeec7,#b8802a);
  border:1px solid rgba(58,38,12,.6);
}
.mic.bell i{
  position:absolute; left:9.5px; top:19.5px; width:5px; height:5px; border-radius:50%;
  background:linear-gradient(180deg,#f7d281,#9c6a1c);
}

/* stacked plates */
.mic.plates{ height:20px; }
.mic.plates i, .mic.plates::before, .mic.plates::after{
  left:0; width:24px; height:6px;
  border-radius:50%;
  background:linear-gradient(180deg,#f6ecd6 40%,#c2b596);
  border:1px solid rgba(70,54,30,.65);
}
.mic.plates::before{ bottom:0; }
.mic.plates i{ position:absolute; bottom:4px; width:21px; left:1.5px; }
.mic.plates::after{ bottom:8px; width:18px; left:3px; }

/* cup and saucer */
.mic.cup::before{
  left:2px; top:5px; width:15px; height:12px;
  border-radius:3px 3px 8px 8px;
  background:linear-gradient(180deg,#ffe9bd,#c9902f);
  border:1px solid rgba(58,38,12,.6);
}
.mic.cup::after{
  right:1px; top:7px; width:8px; height:8px; border-radius:50%;
  border:2px solid #d8a648;
}
.mic.cup i{
  position:absolute; left:0; top:18px; width:20px; height:3.5px; border-radius:2px;
  background:linear-gradient(180deg,#ffeec7,#b8802a);
  border:1px solid rgba(58,38,12,.55);
}

/* cupcake */
.mic.cake::before{
  left:4px; top:12px; width:16px; height:10px;
  background:linear-gradient(180deg,#dfae59,#8f6018);
  clip-path:polygon(0 0,100% 0,84% 100%,16% 100%);
}
.mic.cake::after{
  left:2px; top:4px; width:20px; height:10px; border-radius:10px 10px 3px 3px;
  background:linear-gradient(180deg,#fff2d2,#d9a94f);
  border:1px solid rgba(58,38,12,.4);
}
.mic.cake i{
  position:absolute; left:10px; top:1px; width:4px; height:4px; border-radius:50%;
  background:#e2664f;
}

/* leaf */
.mic.leaf::before{
  left:3px; top:3px; width:18px; height:18px;
  border-radius:2px 100% 2px 100%;
  background:linear-gradient(135deg,#ffe0a0,#a8721f);
  border:1px solid rgba(58,38,12,.45);
}
.mic.leaf i{
  position:absolute; left:4px; top:20px; width:22px; height:1.6px;
  background:rgba(58,38,12,.55);
  transform:rotate(-45deg); transform-origin:0 50%;
}
.actbtn .alab{ font-size:8px; letter-spacing:1.1px; font-weight:bold; color:var(--gold-dim); }
.actbtn.on{ border-color:var(--gold); animation:affordGlow 1.6s ease-in-out infinite; }
.actbtn.on .alab{ color:var(--gold); }
.actbtn.off{ opacity:.46; }
.actbtn:active{ transform:scale(.93); }
.actbtn .badge{
  position:absolute; bottom:-7px; right:-7px;
  min-width:21px; height:21px; padding:0 5px;
  border-radius:11px;
  background:linear-gradient(180deg,#f9d98f,#cf9a37);
  border:1.5px solid #2a1f10;
  color:#241a0c; font-size:11px; font-weight:bold;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 5px rgba(240,192,90,.45);
}
.actbtn .badge.zero{ background:#3a2e1c; color:#7d6a48; box-shadow:none; }
.actbtn .cdring{
  position:absolute; inset:0; border-radius:var(--r-md);
  background:rgba(8,6,3,.7);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:bold; color:var(--gold);
}
@keyframes affordGlow{
  0%,100%{ border-color:var(--gold-line); }
  50%{ border-color:#ffe6ab; }
}

/* ============================================================
   Right table cards
   ============================================================ */
.tablecards{ display:flex; flex-direction:column; gap:7px; width:184px; }
.tcard{ padding:7px 9px 8px; animation:cardIn .22s ease-out; }
@keyframes cardIn{ from{ opacity:0; transform:translateX(14px) } to{ opacity:1; transform:none } }
.tcard-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:10px; letter-spacing:1.2px; font-weight:bold;
  color:var(--gold); text-transform:uppercase; margin-bottom:5px;
}
.tcard-head .tstate{ font-size:7.5px; letter-spacing:.9px; color:#8a7a5c; font-weight:normal; text-transform:lowercase; }
.tcard-foot{ display:flex; align-items:center; gap:7px; }
.tcard-foot .bar{ flex:1 1 auto; }
.tcard-foot .tclock{
  flex:0 0 auto; font-size:10.5px; font-weight:bold; letter-spacing:.4px;
  color:var(--ink); font-variant-numeric:tabular-nums; min-width:30px; text-align:right;
}
.tcard-mid{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:6px; }
.avs{ display:flex; }
/* procedural canvas portraits: real faces, one per seated guest */
.av{ display:block; width:28px; height:28px; margin-right:-7px; border-radius:50%; }
.dishes{ display:flex; gap:4px; }
.dishplate{ display:block; width:26px; height:26px; border-radius:50%; }
.tbar{ height:9px; border-radius:6px; }
.tbar.g i{ background:linear-gradient(90deg,#5f9e3f,#86c96b); }
.tbar.o i{ background:linear-gradient(90deg,#c07a2a,#e8a04a); }
.tbar.r i{ background:linear-gradient(90deg,#a83a26,#e2664f); }
.tbar em{ display:none; }

/* ============================================================
   Bottom-left goal
   ============================================================ */
.goalpnl{ display:flex; gap:10px; align-items:center; padding:9px 13px 9px 10px; width:246px; }
.medallion.trophy{ font-size:18px; }
.goal-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.goal-line{ font-size:12px; font-weight:bold; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.goalpnl.done{ border-color:var(--good); }

/* ============================================================
   Bottom-right coin boosts
   ============================================================ */
.qboosts{ display:flex; gap:8px; }
.qcard{
  width:96px; padding:8px 8px 7px; text-align:center;
  cursor:pointer; font:inherit;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition:transform .12s, opacity .2s;
}
.qcard .qic{ font-size:20px; line-height:1; text-shadow:0 0 6px rgba(240,192,90,.4); }
.qcard .qname{ font-size:9px; letter-spacing:1.1px; font-weight:bold; color:var(--gold-dim); }
.qcard .qcost{
  display:flex; align-items:center; justify-content:center; gap:4px;
  font-size:12px; font-weight:bold; color:var(--gold);
}
.qcard.can{ border-color:var(--gold); animation:affordGlow 1.9s ease-in-out infinite; }
.qcard.can .qname{ color:var(--gold); }
.qcard.no{ opacity:.5; cursor:not-allowed; }
.qcard.active{ border-color:var(--good); opacity:1; }
.qcard.active .qcost{ color:var(--good); }
.qcard:active{ transform:scale(.95); }

/* ============================================================
   Compact floating nav cluster
   ============================================================ */
#nav{
  position:absolute; z-index:6;
  left:50%; transform:translateX(-50%);
  bottom:calc(12px + var(--safe-b));
  display:flex; gap:6px;
  padding:6px;
  background:rgba(20,15,9,.94);
  border:1.5px solid var(--gold-line);
  border-radius:26px;
}
#nav button{
  display:flex; align-items:center; gap:5px;
  padding:6px 11px;
  background:transparent; border:1px solid transparent; border-radius:20px;
  font-size:10px; letter-spacing:.4px; color:var(--ink-dim);
  cursor:pointer; transition:background .18s, color .18s, border-color .18s;
  white-space:nowrap;
}
#nav button .nico{ font-size:14px; line-height:1; opacity:.72; transition:opacity .18s; }
#nav button.active{
  color:var(--gold);
  background:linear-gradient(180deg,rgba(240,192,90,.2),rgba(240,192,90,.06));
  border-color:var(--gold-line);
}
#nav button.active .nico{ opacity:1; }
#nav button.nudge .nico{ animation:nudge 1.5s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }

/* ============================================================
   Toasts
   ============================================================ */
#toasts{
  position:absolute; z-index:7;
  left:50%; transform:translateX(-50%);
  bottom:calc(78px + var(--safe-b));
  display:flex; flex-direction:column; align-items:center; gap:6px;
  pointer-events:none; padding:0 14px; width:100%;
}
.toast{
  max-width:min(92vw,420px);
  background:linear-gradient(180deg,#33261a,#1b1409);
  border:1.5px solid var(--gold-line); border-radius:var(--r-md);
  padding:8px 14px; font-size:12.5px; color:var(--ink);
  box-shadow:0 3px 10px rgba(0,0,0,.6);
  animation:toastIn .3s ease-out; text-align:center;
}
.toast b{ color:var(--gold); }
.toast.bad{ border-color:rgba(226,102,79,.6); }
.toast.bad b{ color:var(--bad); }
.toast.rush{ border-color:var(--ember); }
.toast.rush b{ color:var(--ember); }
@keyframes toastIn{ from{ transform:translateY(14px) scale(.96); opacity:0 } to{ transform:none; opacity:1 } }

/* ============================================================
   Sliding panel (upgrades / land / world / stats / settings)
   ============================================================ */
#scrim{
  position:fixed; inset:0; z-index:8;
  background:rgba(8,6,4,.55);
  opacity:0; pointer-events:none; transition:opacity .22s;
}
#scrim.on{ opacity:1; pointer-events:auto; }

.panel{
  position:fixed; z-index:9;
  left:0; right:0; bottom:0;
  height:min(68vh, 580px);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#2b2115 0%, #16100a 100%);
  border-top:1.5px solid var(--gold-line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -10px 40px rgba(0,0,0,.7);
  transform:translateY(102%);
  transition:transform .26s cubic-bezier(.22,.9,.3,1);
  padding-bottom:var(--safe-b);
}
.panel.on{ transform:none; }
.panel-grip{ width:44px; height:4px; border-radius:4px; background:rgba(240,192,90,.35); margin:8px auto 2px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:4px 14px 8px; }
.panel-head h2{ margin:0; font-size:15px; letter-spacing:1.4px; text-transform:uppercase; color:var(--gold); }
.icon-btn{
  width:30px; height:30px; border-radius:50%;
  background:rgba(0,0,0,.32); border:1px solid var(--gold-line);
  color:var(--ink-dim); font-size:13px; cursor:pointer;
}
.icon-btn:hover{ color:var(--gold); }

.tabs{ display:flex; gap:5px; padding:0 12px 8px; overflow-x:auto; }
.tabs:empty{ display:none; }
.tabs button{
  flex:1 1 auto; white-space:nowrap;
  padding:7px 10px; font-size:11.5px; font-weight:bold;
  background:rgba(0,0,0,.3); border:1px solid rgba(201,160,90,.3);
  border-radius:18px; color:var(--ink-dim); cursor:pointer; transition:.18s;
}
.tabs button.active{
  color:#241a0c; background:linear-gradient(180deg,#f7d281,#cf9a37);
  border-color:#f7d281; box-shadow:0 0 14px rgba(240,192,90,.35);
}

.panel-body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:2px 12px 16px;
  display:flex; flex-direction:column; gap:8px;
}
/* a scrolling flex column shrinks its children by default, which collapses rows */
.panel-body > *{ flex:0 0 auto; }
.panel-body::-webkit-scrollbar{ width:6px; }
.panel-body::-webkit-scrollbar-thumb{ background:rgba(240,192,90,.25); border-radius:6px; }

.row{
  display:flex; align-items:center; gap:10px;
  padding:10px 11px;
  background:linear-gradient(180deg, rgba(58,44,29,.5), rgba(28,21,13,.62));
  border:1px solid rgba(201,160,90,.28);
  border-radius:var(--r-md);
}
.row.locked{ opacity:.55; }
.row.maxed{ border-color:rgba(134,201,107,.35); }
.row-ico{
  flex:0 0 42px; height:42px; border-radius:11px;
  display:flex; align-items:center; justify-content:center; font-size:21px;
  background:radial-gradient(circle at 40% 30%, rgba(240,192,90,.24), rgba(0,0,0,.35));
  border:1px solid rgba(240,192,90,.24);
}
.row-mid{ flex:1 1 auto; min-width:0; }
.row-name{ font-size:13.5px; font-weight:bold; }
.row-sub{ font-size:11px; color:var(--ink-dim); margin-top:2px; line-height:1.35; }
.row-sub .up{ color:var(--good); }
.row-lvl{ font-size:10px; color:var(--gold-dim); margin-top:3px; letter-spacing:.4px; }

.buy{
  flex:0 0 auto; min-width:88px;
  padding:9px 10px; border-radius:11px;
  border:1px solid rgba(240,192,90,.32);
  background:linear-gradient(180deg, rgba(70,53,31,.9), rgba(38,28,17,.9));
  color:var(--ink-dim); font-size:12px; font-weight:bold;
  cursor:pointer; text-align:center; line-height:1.25;
  transition:transform .12s;
}
.buy small{ display:block; font-size:10px; font-weight:normal; opacity:.8; }
.buy.can{ color:#241a0c; background:linear-gradient(180deg,#f9d98f,#d09b35); border-color:#ffe6ab; animation:affordGlow 1.7s ease-in-out infinite; }
.buy.can:active{ transform:scale(.94); }
.buy.no{ opacity:.62; cursor:not-allowed; }
.buy.done{ color:var(--good); border-color:rgba(134,201,107,.35); background:rgba(134,201,107,.1); }
.buy.leaf{ background:linear-gradient(180deg,#c3e79b,#6fa84c); border-color:#d6f0b6; color:#1d2a12; }

.sect-title{ font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--gold-dim); margin:8px 2px 0; }
.note{
  font-size:11.5px; color:var(--ink-dim); line-height:1.5;
  padding:8px 11px; border-radius:var(--r-sm);
  background:rgba(0,0,0,.28); border:1px dashed rgba(201,160,90,.3);
}

.spark{
  position:fixed; z-index:40; pointer-events:none;
  width:6px; height:6px; border-radius:50%;
  background:#ffe6ab; box-shadow:0 0 8px #f0c05a;
  animation:sparkFly .62s ease-out forwards;
}
@keyframes sparkFly{
  from{ transform:translate(0,0) scale(1); opacity:1 }
  to{ transform:translate(var(--dx),var(--dy)) scale(.2); opacity:0 }
}

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.kv{ background:rgba(0,0,0,.3); border:1px solid rgba(201,160,90,.24); border-radius:var(--r-sm); padding:9px 10px; }
.kv .k{ font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-dim); }
.kv .v{ font-size:15px; font-weight:bold; color:var(--gold); margin-top:3px; }

#map{
  position:relative; min-height:230px;
  border-radius:var(--r-md); border:1px solid rgba(201,160,90,.32);
  background:
    radial-gradient(80% 120% at 20% 10%, rgba(240,192,90,.10), transparent 60%),
    radial-gradient(70% 90% at 85% 80%, rgba(255,157,77,.10), transparent 60%),
    linear-gradient(160deg,#1a140d,#0f0b07);
  overflow:hidden; padding:6px;
}
#map .mline{ position:absolute; height:1px; background:repeating-linear-gradient(90deg, rgba(240,192,90,.45) 0 5px, transparent 5px 10px); transform-origin:0 50%; }
.node{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; }
.node .dot{ width:15px; height:15px; border-radius:50%; background:#3a2c1c; border:2px solid var(--gold-dim); box-shadow:0 0 0 3px rgba(0,0,0,.35); }
.node.owned .dot{ background:linear-gradient(180deg,#ffe6ab,#d09b35); border-color:#ffe6ab; box-shadow:0 0 14px rgba(240,192,90,.7); }
.node.here .dot{ animation:hereBeat 1.5s ease-in-out infinite; }
@keyframes hereBeat{ 0%,100%{ box-shadow:0 0 10px rgba(240,192,90,.6) } 50%{ box-shadow:0 0 24px rgba(240,192,90,1) } }
.node .lbl{ font-size:9.5px; white-space:nowrap; color:var(--ink-dim); background:rgba(10,8,5,.72); padding:1px 5px; border-radius:8px; border:1px solid rgba(240,192,90,.16); }
.node.owned .lbl{ color:var(--gold); }

/* ============================================================
   Modals + tutorial
   ============================================================ */
#modalLayer{ position:fixed; inset:0; z-index:20; pointer-events:none; }
.modal-bg{
  position:absolute; inset:0; pointer-events:auto;
  background:rgba(6,4,3,.74);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .2s ease-out;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal{
  width:min(94vw, 400px); max-height:86vh; overflow-y:auto;
  background:linear-gradient(180deg,#3a2c1c 0%, #1a1308 100%);
  border:1.5px solid var(--gold-line); border-radius:var(--r-lg);
  box-shadow:0 20px 60px rgba(0,0,0,.75), 0 0 40px rgba(240,192,90,.16);
  padding:20px 18px 16px; text-align:center;
  animation:modalIn .3s cubic-bezier(.2,1.1,.35,1);
}
@keyframes modalIn{ from{ transform:translateY(24px) scale(.94); opacity:0 } to{ transform:none; opacity:1 } }
.modal h3{ margin:0 0 4px; font-size:18px; color:var(--gold); letter-spacing:.8px; text-transform:uppercase; }
.modal .big-ico{ font-size:44px; line-height:1; text-shadow:0 0 14px rgba(240,192,90,.55); }
.modal p{ margin:8px 0; font-size:13px; color:var(--ink-dim); line-height:1.55; }
.modal .amount{ font-size:28px; font-weight:bold; color:var(--gold); text-shadow:0 0 22px rgba(240,192,90,.55); margin:6px 0; }
.modal .lines{ text-align:left; margin:10px 0; }
.modal .lines div{ display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:5px 0; border-bottom:1px dashed rgba(240,192,90,.14); color:var(--ink-dim); }
.modal .lines div span:last-child{ color:var(--gold); font-weight:bold; }
.modal-btns{ display:flex; gap:8px; margin-top:12px; }
.btn{
  flex:1 1 0; padding:11px 12px; border-radius:12px; cursor:pointer;
  font-size:13px; font-weight:bold; border:1px solid var(--gold-line);
  background:rgba(0,0,0,.3); color:var(--ink-dim); transition:transform .12s;
}
.btn:active{ transform:scale(.96); }
.btn.gold{ color:#241a0c; background:linear-gradient(180deg,#f9d98f,#d09b35); border-color:#ffe6ab; box-shadow:0 0 18px rgba(240,192,90,.35); }
.btn.ghost{ background:transparent; }
.btn.danger{ color:#ffd9d0; border-color:rgba(226,102,79,.5); background:rgba(226,102,79,.14); }

#coach{ position:fixed; inset:0; z-index:30; display:none; }
#coach.on{ display:block; }
#coachRing{
  position:absolute; border-radius:16px; border:2px solid var(--gold);
  box-shadow:0 0 0 9999px rgba(6,4,3,.74), 0 0 26px rgba(240,192,90,.75) inset, 0 0 26px rgba(240,192,90,.5);
  transition:all .3s cubic-bezier(.2,1,.3,1); pointer-events:none;
}
#coachCard{
  position:absolute; left:50%; transform:translateX(-50%);
  width:min(92vw,340px);
  background:linear-gradient(180deg,#3a2c1c,#1a1308);
  border:1.5px solid var(--gold-line); border-radius:var(--r-lg);
  padding:14px 15px 12px; box-shadow:0 16px 44px rgba(0,0,0,.7);
  transition:top .3s cubic-bezier(.2,1,.3,1);
}
.coach-step{ font-size:10px; letter-spacing:1.6px; color:var(--gold-dim); }
#coachCard h3{ margin:3px 0 5px; font-size:15px; color:var(--gold); letter-spacing:.6px; }
#coachCard p{ margin:0; font-size:12.5px; color:var(--ink-dim); line-height:1.55; }
.coach-btns{ display:flex; gap:8px; margin-top:11px; }

/* ============================================================
   Desktop: dock the sliding panel to the right
   ============================================================ */
@media (min-width:1000px){
  .panel{
    top:0; left:auto; right:0; bottom:0;
    width:400px; height:100%;
    border-radius:0; border-top:none; border-left:1.5px solid var(--gold-line);
    transform:translateX(102%); padding-bottom:0;
  }
  .panel-grip{ display:none; }
  .panel-head{ padding-top:18px; }
  #scrim{ display:none; }
  #app.panel-open #hud{ right:400px; }
  #app.panel-open #nav{ transform:translateX(calc(-50% - 200px)); }
  #app.panel-open #toasts{ transform:translateX(calc(-50% - 200px)); }
}

/* ============================================================
   Mobile / narrow: compress the HUD
   ============================================================ */
@media (max-width:999px){
  .hud-tl{ left:8px; top:calc(8px + var(--safe-t)); gap:5px; }
  .hud-tr{ right:8px; top:calc(8px + var(--safe-t)); gap:5px; }
  .brand{ padding:6px 10px 6px 7px; gap:7px; }
  .medallion{ width:28px; height:28px; font-size:14px; }
  .brand-title{ font-size:14px; letter-spacing:1.4px; }
  .brand-meta{ font-size:7.5px; gap:6px; margin-top:2px; }
  .brand-sub{ font-size:7.5px; letter-spacing:2.6px; }
  .levelpnl{ padding:5px 8px; gap:6px; }
  .lvl-chip{ font-size:8.5px; padding:3px 7px; }
  .bar.xp{ width:104px; height:13px; }
  .minipill{ display:none; }
  .bar em{ font-size:7.5px; letter-spacing:.2px; }

  /* the bottom of a phone belongs to the cards, boosts and nav, so the hint
     moves up into the empty sky above the building */
  #bneck{ bottom:auto; top:calc(176px + var(--safe-t)); font-size:11px; max-width:92vw; white-space:normal; text-align:center; }
  /* a bubble that reads at 1920 crowds a 430-wide floor */
  .sb{ width:30px; margin:-24px 0 0 -15px; padding:3px 0 4px; }
  .sbe{ font-size:12px; }
  .sbp{ width:19px; height:3px; margin-top:3px; }
  .sb.plain{ margin:-21px 0 0 -9px; }
  .sb.plain .sbe{ font-size:14px; }

  .hud-tc{ top:calc(112px + var(--safe-t)); left:50%; }
  .statrow{ gap:5px; }
  .stat{ min-width:0; padding:5px 9px 4px; }
  .sval{ font-size:14px; }
  .sic{ font-size:12px; }
  .scap{ font-size:7.5px; letter-spacing:1px; }
  .starrow s{ font-size:11px; }

  .coinpnl{ padding:5px 11px 4px; }
  .leafchip{ padding:2px 7px; font-size:9px; }
  .leafchip i{ display:none; }
  .gearbtn{ width:36px; height:36px; font-size:16px; }

  .hud-left{ left:8px; top:auto; bottom:calc(238px + var(--safe-b)); transform:none; }
  .actions{ gap:6px; }
  .actbtn{ width:50px; height:50px; }
  .actbtn .aic{ width:25px; height:25px; }
  .actbtn .mic{ transform:scale(.76); }
  .actbtn .alab{ font-size:6.5px; letter-spacing:.7px; }
  .actbtn .badge{ min-width:17px; height:17px; font-size:9.5px; bottom:-5px; right:-5px; }

  /* table cards become a horizontally scrollable strip above the nav */
  .hud-right{
    top:auto; right:0; left:0; transform:none;
    bottom:calc(126px + var(--safe-b));
    pointer-events:auto;
  }
  .tablecards{
    flex-direction:row; width:auto;
    gap:6px; padding:0 8px 2px;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none;
  }
  .tablecards::-webkit-scrollbar{ display:none; }
  .tcard{ flex:0 0 152px; }
  .av{ width:24px; height:24px; margin-right:-6px; }
  .dishplate{ width:22px; height:22px; }

  .hud-bl{ left:8px; bottom:calc(70px + var(--safe-b)); }
  .goalpnl{ width:198px; padding:6px 10px 6px 7px; gap:7px; }
  .goal-line{ font-size:10.5px; }
  .bar.goal{ height:12px; }

  .hud-br{ right:8px; bottom:calc(70px + var(--safe-b)); }
  .qboosts{ gap:5px; }
  .qcard{ width:70px; padding:6px 5px 5px; }
  .qcard .qic{ font-size:16px; }
  .qcard .qname{ font-size:7.5px; letter-spacing:.7px; }
  .qcard .qcost{ font-size:10.5px; }

  #nav{ padding:5px; gap:3px; border-radius:22px; }
  #nav button{ padding:6px 8px; font-size:0; gap:0; }
  #nav button .nico{ font-size:17px; }
  #nav button.active{ padding:6px 10px; }

  #toasts{ bottom:calc(196px + var(--safe-b)); }
}

/* very short viewports: drop the goal panel out of the way */
@media (max-height:620px) and (max-width:999px){
  .hud-bl{ display:none; }
}