/* ============================================================
   HEARTHWILD — styles
   ============================================================ */
:root{
  /* ===== CARVED HEARTH — committed palette (each hue has ONE role) ===== */
  --bg:#12100b;              /* backdrop */
  --wood:#241a12;            /* surface (charred plank) */
  --wood-deep:#160f09;       /* recessed / socket interior */
  --panel:#241a12;           /* (legacy alias -> wood) */
  --panel-2:#30231a;         /* raised wood */
  --panel-line:#0d0805;      /* carved incised line */
  --carve:#0d0805;
  --edge-light:rgba(255,226,180,.10);   /* top light-catch on carved edges */
  --ink:#f0e4c8;             /* parchment text */
  --ink-dim:#b3a184;
  --ink-faint:#84714f;
  --gold:#e8b24a;            /* COINS only */
  --gold-deep:#a5761f;
  --ember:#ff7a2e;           /* ACCENT — interactive / urgent only */
  --ember-deep:#c2481a;
  --accent:var(--ember);
  --meat:#cf6f52;            /* meat resource (muted) */
  --green:#8fae4e;           /* success / complete (moss) */
  --green-deep:#5f7d31;
  --blue:#7f9a8a;            /* rarely used, muted */
  --danger:#c8402a;          /* blood / HP */
  --blood-low:#7a1f16;
  --radius:8px;
  --radius-sm:6px;
  --shadow:0 3px 0 rgba(0,0,0,.5);        /* grounded, not glow */
  --shadow-lg:0 6px 0 rgba(0,0,0,.55), 0 14px 26px rgba(0,0,0,.5);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --notch:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  --notch-sm:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  --grain:repeating-linear-gradient(94deg, rgba(255,232,196,.028) 0 1px, transparent 1px 5px),
          repeating-linear-gradient(2deg, rgba(0,0,0,.05) 0 1px, transparent 1px 7px);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
/* shared carved-plaque surface — the ONE component language */
.plaque{
  background-color:var(--wood); background-image:var(--grain);
  clip-path:var(--notch);
  box-shadow:inset 0 0 0 2px var(--carve), inset 0 2px 0 var(--edge-light), inset 0 -5px 8px rgba(0,0,0,.35);
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5));
}
.socket{ /* forged inlay socket for icons/glyphs */
  background:var(--wood-deep);
  box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 1px 0 var(--edge-light), inset 0 3px 5px rgba(0,0,0,.5);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);}
body{position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;}

#game-root{position:absolute;inset:0;overflow:hidden;}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto;}

.hidden{display:none !important;}

/* ---------- vignette / damage overlay ---------- */
#vignette{
  position:absolute;inset:0;z-index:9;pointer-events:none;
  box-shadow:inset 0 0 110px 0px rgba(0,0,0,.18);
  transition:box-shadow .25s ease, background .15s ease;
}
#vignette.danger{box-shadow:inset 0 0 130px 30px rgba(200,20,40,.45);animation:dangerPulse 1s ease infinite;}
@keyframes dangerPulse{0%,100%{box-shadow:inset 0 0 130px 30px rgba(200,20,40,.35);}50%{box-shadow:inset 0 0 150px 45px rgba(220,20,40,.6);}}
#vignette.hurt{background:radial-gradient(circle,transparent 40%,rgba(220,20,40,.4) 100%);}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:10;}
#hud > *{pointer-events:auto;}

#corner-utils{position:absolute;top:calc(10px + var(--safe-t));right:10px;display:flex;gap:8px;}
.corner-btn{
  width:38px;height:38px;border:none;cursor:pointer;color:var(--ink);font-size:17px;
  display:flex;align-items:center;justify-content:center;
  background-color:var(--wood); background-image:var(--grain); clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 2px var(--carve), inset 0 2px 0 var(--edge-light), inset 0 -3px 5px rgba(0,0,0,.4);
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5));
  transition:filter .08s ease, transform .08s ease, box-shadow .08s ease;
}
.corner-btn:active{transform:translateY(2px);filter:drop-shadow(0 1px 0 rgba(0,0,0,.5)) brightness(.9);
  box-shadow:inset 0 0 0 2px var(--carve), inset 0 3px 7px rgba(0,0,0,.6);}
.corner-btn.off{opacity:.5;}

#topbar{
  position:absolute;top:calc(10px + var(--safe-t));left:10px;right:100px;
  display:flex;gap:7px;justify-content:flex-start;align-items:flex-start;flex-wrap:nowrap;
}
#chip-biome{min-width:0;}
#chip-biome .chip-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32vw;}
.stat-chip{
  display:flex;align-items:center;gap:8px;
  background-color:var(--wood); background-image:var(--grain);
  clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 2px var(--carve), inset 0 2px 0 var(--edge-light), inset 0 -4px 7px rgba(0,0,0,.35);
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5));
  padding:5px 13px 5px 5px;
  font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;
  min-width:0;
}
.chip-icon{
  font-size:15px;line-height:1;width:26px;height:26px;flex:0 0 26px;
  display:flex;align-items:center;justify-content:center;
  background:var(--wood-deep);clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 1px 0 var(--edge-light), inset 0 2px 4px rgba(0,0,0,.55);
}
.chip-val{color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;}
.chip-sub{color:var(--ink-faint);font-weight:700;font-size:11px;}
#chip-coins .chip-val{color:var(--gold);}
#chip-meat .chip-val #val-meat{color:var(--meat);}
.stat-chip.pulse{animation:chipPulse .34s cubic-bezier(.2,.9,.3,1);}
@keyframes chipPulse{0%{transform:translateY(0);}35%{transform:translateY(-3px) scale(1.05);}100%{transform:translateY(0);}}
.stat-chip.warn{animation:chipWarn .6s ease infinite alternate;}
@keyframes chipWarn{to{box-shadow:inset 0 0 0 2px var(--danger), inset 0 0 14px rgba(200,64,42,.5);}}

/* objective banner */
#objective{
  position:absolute;top:calc(118px + var(--safe-t));left:10px;max-width:min(72vw,340px);
}
#objective-inner{
  display:flex;gap:10px;align-items:center;
  background-color:var(--wood); background-image:var(--grain); clip-path:var(--notch);
  box-shadow:inset 0 0 0 2px var(--carve), inset 0 2px 0 var(--edge-light), inset 0 -4px 7px rgba(0,0,0,.35), inset 5px 0 0 var(--ember);
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5));
  padding:8px 13px 8px 16px;
}
#objective-icon{font-size:16px;width:30px;height:30px;flex:0 0 30px;display:flex;align-items:center;justify-content:center;
  background:var(--wood-deep);clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 1px 0 var(--edge-light), inset 0 2px 4px rgba(0,0,0,.5);}
#objective-title{font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.15;}
#objective-prog{display:flex;align-items:center;gap:7px;margin-top:5px;}
#objective-bar{flex:1;height:8px;background:var(--wood-deep);overflow:hidden;min-width:78px;clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 2px 3px rgba(0,0,0,.55);}
#objective-fill{height:100%;width:0%;background:var(--ember);transition:width .35s ease;box-shadow:inset 0 2px 0 rgba(255,214,176,.4);}

/* material stock bar (cooking ingredients) */
#mat-bar{position:absolute;top:calc(48px + var(--safe-t));left:10px;display:flex;flex-wrap:nowrap;gap:6px;max-width:min(82vw,380px);pointer-events:none;z-index:10;}
.mat-slot{display:flex;align-items:center;gap:3px;padding:3px 8px 3px 5px;
  background:linear-gradient(var(--wood),var(--wood-deep));clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 2px 0 var(--edge-light), 0 2px 0 rgba(0,0,0,.4);}
.mat-slot .mat-n{font-size:12px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.mat-slot.empty{filter:grayscale(.85) brightness(.6);opacity:.72;}
.mat-slot.empty .mat-n{color:var(--ink-faint);}
#objective-count{font-size:11px;font-weight:800;color:var(--ink-dim);white-space:nowrap;font-variant-numeric:tabular-nums;}
#objective.done #objective-inner{box-shadow:inset 0 0 0 2px var(--carve), inset 0 2px 0 var(--edge-light), inset 0 -4px 7px rgba(0,0,0,.35), inset 5px 0 0 var(--green);animation:objDone 1.5s ease infinite;}
#objective.done #objective-fill{background:var(--green);}
@keyframes objDone{0%,100%{filter:drop-shadow(0 3px 0 rgba(0,0,0,.5));}50%{filter:drop-shadow(0 3px 0 rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(143,174,78,.55));}}

/* vitals — carved bone/blood gauge with a lagging damage-ghost */
#vitals{position:absolute;left:10px;top:calc(84px + var(--safe-t));width:min(56vw,224px);
  display:flex;align-items:center;gap:7px;}
#hp-icon{
  flex:0 0 26px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--danger);
  background:var(--wood-deep);clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 1px 0 var(--edge-light), inset 0 2px 4px rgba(0,0,0,.55);
}
#hpbar{position:relative;flex:1;height:20px;overflow:hidden;
  background:var(--wood-deep); background-image:var(--grain); clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 2px var(--carve), inset 0 2px 4px rgba(0,0,0,.6);
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5));}
#hpghost{position:absolute;left:0;top:0;bottom:0;width:100%;
  background:#e8b878;transition:width .5s ease .14s;}       /* pale "recently lost" chunk */
#hpfill{position:absolute;left:0;top:0;bottom:0;width:100%;
  background:var(--danger);box-shadow:inset 0 3px 0 rgba(255,150,120,.4), inset 0 -5px 6px rgba(0,0,0,.35);
  transition:width .08s linear;}
#hp-notches{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 13px, rgba(0,0,0,.42) 13px 15px);}
#hptext{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;
  font-size:11px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;
  text-shadow:0 1px 2px rgba(0,0,0,.9);letter-spacing:.3px;}
#vitals.low #hp-icon{animation:heartbeat .8s ease-in-out infinite;}
#vitals.low #hpbar{box-shadow:inset 0 0 0 2px var(--ember), inset 0 2px 4px rgba(0,0,0,.6), 0 0 12px rgba(255,90,40,.35);}
@keyframes heartbeat{0%,100%{transform:scale(1);}15%{transform:scale(1.22);}30%{transform:scale(1);}45%{transform:scale(1.14);}}

/* side action buttons */
#side-actions{
  position:absolute;right:10px;bottom:calc(18px + var(--safe-b));
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
}
.side-btn{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:60px;height:60px;border:none;cursor:pointer;color:var(--ink);
  background-color:var(--wood); background-image:var(--grain); clip-path:var(--notch);
  box-shadow:inset 0 0 0 2px var(--carve), inset 0 2px 0 var(--edge-light), inset 0 -4px 7px rgba(0,0,0,.4);
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5));
  transition:transform .08s ease, filter .08s ease, box-shadow .08s ease;
}
.side-btn:active{transform:translateY(2px);filter:drop-shadow(0 1px 0 rgba(0,0,0,.5)) brightness(.9);
  box-shadow:inset 0 0 0 2px var(--carve), inset 0 3px 7px rgba(0,0,0,.6);}
.side-btn .sb-ico{font-size:20px;line-height:1;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:var(--wood-deep);clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 1px 0 var(--edge-light), inset 0 2px 4px rgba(0,0,0,.5);}
.side-btn .sb-lbl{font-size:9px;font-weight:800;color:var(--ink-dim);letter-spacing:.06em;text-transform:uppercase;}
.side-btn.glow{box-shadow:inset 0 0 0 2px var(--ember), inset 0 2px 0 var(--edge-light), inset 0 -4px 7px rgba(0,0,0,.4);
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(255,122,46,.45));}
.side-btn.glow .sb-ico{box-shadow:inset 0 0 0 1.5px var(--ember-deep), inset 0 2px 4px rgba(0,0,0,.5);color:#ffd9a8;}
.badge{
  position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;
  background:var(--ember);color:#1a0d04;font-size:11px;font-weight:900;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center;clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 1.5px var(--carve), 0 2px 0 rgba(0,0,0,.55);
}

/* dash / dodge button */
#btn-dash{
  position:absolute;right:calc(84px + var(--safe-b,0px));bottom:calc(26px + var(--safe-b));
  width:70px;height:70px;border-radius:50%;border:none;cursor:pointer;z-index:11;color:var(--ink);
  background-color:var(--wood); background-image:var(--grain);
  box-shadow:inset 0 0 0 3px var(--carve), inset 0 0 0 6px #3a2a1b, inset 0 2px 0 var(--edge-light), inset 0 -5px 9px rgba(0,0,0,.5);
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.55));
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s ease, filter .1s ease;
}
#btn-dash:active{transform:translateY(2px);filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) brightness(.9);}
#btn-dash .dash-ico{font-size:26px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));z-index:2;}
#btn-dash .cd-ring{position:absolute;inset:0;border-radius:50%;z-index:1;
  background:conic-gradient(var(--ember) calc(var(--p,1)*360deg), rgba(10,6,20,.55) 0);
  -webkit-mask:radial-gradient(circle, transparent 57%, #000 60%, #000 73%, transparent 76%);
          mask:radial-gradient(circle, transparent 57%, #000 60%, #000 73%, transparent 76%);}
#btn-dash.ready{box-shadow:inset 0 0 0 3px var(--ember), inset 0 0 0 6px #3a2a1b, inset 0 2px 0 var(--edge-light), inset 0 -5px 9px rgba(0,0,0,.5);
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(255,122,46,.5));}
#btn-dash.ready .dash-ico{animation:dashPulse 1.5s ease infinite;}
@keyframes dashPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}


/* joystick */
#joystick{position:absolute;left:0;bottom:0;width:46%;height:46%;max-width:280px;max-height:280px;touch-action:none;pointer-events:none;}
#joy-base{position:absolute;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle,rgba(36,26,16,.55),rgba(20,14,9,.3));
  border:2px solid rgba(255,200,140,.22);opacity:0;transition:opacity .15s;pointer-events:none;}
#joy-base.active{opacity:1;}
#joy-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#6a4c2c,#2e2016);border:2px solid rgba(255,210,150,.3);
  box-shadow:0 5px 12px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,220,170,.15);}

/* combo meter */
#combo{position:absolute;top:calc(30px + var(--safe-t));left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;width:150px;}
#combo-x{font-family:var(--font-display);font-size:40px;font-weight:900;line-height:1;color:var(--ember);
  text-shadow:0 0 14px rgba(255,122,46,.55),0 3px 0 rgba(60,24,6,.7);font-variant-numeric:tabular-nums;}
#combo-lbl{font-size:11px;font-weight:900;letter-spacing:.28em;color:var(--ink-dim);margin-top:0;text-shadow:0 1px 2px rgba(0,0,0,.7);text-transform:uppercase;}
#combo-bar{height:6px;margin:5px auto 0;width:82px;background:var(--wood-deep);overflow:hidden;clip-path:var(--notch-sm);box-shadow:inset 0 0 0 1.5px var(--carve);}
#combo-fill{height:100%;width:100%;background:var(--ember);transition:width .08s linear;box-shadow:inset 0 2px 0 rgba(255,214,176,.4);}
#combo.bump #combo-x{animation:comboBump .28s cubic-bezier(.2,.9,.3,1);}
@keyframes comboBump{0%{transform:scale(1.45);}60%{transform:scale(.94);}100%{transform:scale(1);}}
#combo.hot #combo-x{color:#ff4a2e;text-shadow:0 0 20px rgba(255,70,30,.85),0 3px 0 rgba(60,10,4,.7);}
#combo.hot #combo-fill{background:#ff4a2e;}

/* toasts */
#toast-layer{position:absolute;top:calc(120px + var(--safe-t));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:60;}
.toast{
  background-color:var(--wood);background-image:var(--grain);clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 2px var(--carve), inset 0 2px 0 var(--edge-light), inset 4px 0 0 var(--ink-faint);
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5));
  padding:8px 15px 8px 16px;
  font-size:13.5px;font-weight:800;color:var(--ink);
  display:flex;align-items:center;gap:8px;animation:toastIn .3s cubic-bezier(.2,.9,.3,1), toastOut .4s ease forwards;animation-delay:0s,1.9s;
  max-width:88vw;
}
.toast .ti{font-size:15px;}
.toast.good{box-shadow:inset 0 0 0 2px var(--carve), inset 0 2px 0 var(--edge-light), inset 4px 0 0 var(--green);} .toast.good .tv{color:var(--green);}
.toast.gold{box-shadow:inset 0 0 0 2px var(--carve), inset 0 2px 0 var(--edge-light), inset 4px 0 0 var(--gold);} .toast.gold .tv{color:var(--gold);}
.toast.bad{box-shadow:inset 0 0 0 2px var(--carve), inset 0 2px 0 var(--edge-light), inset 4px 0 0 var(--danger);} .toast.bad .tv{color:var(--danger);}
@keyframes toastIn{from{transform:translateY(-14px) scale(.9);opacity:0;}to{transform:none;opacity:1;}}
@keyframes toastOut{to{transform:translateY(-10px);opacity:0;}}

/* ---------- Title screen ---------- */
#title-screen{
  position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 75% at 50% 120%, #6a3212 0%, transparent 55%),
    radial-gradient(90% 60% at 50% -12%, #2c2016 0%, transparent 55%),
    #100c07;
  overflow:hidden;
}
.title-art{position:relative;text-align:center;padding:24px;z-index:2;}
.title-embers{position:absolute;inset:-40vh -50vw;z-index:-1;pointer-events:none;overflow:hidden;}
.ember{position:absolute;bottom:-10px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#ffcb57,#ff7a3c);box-shadow:0 0 8px #ff7a3c;opacity:0;
  animation:emberRise linear infinite;}
@keyframes emberRise{
  0%{transform:translateY(0) scale(1);opacity:0;}
  10%{opacity:.9;}
  80%{opacity:.7;}
  100%{transform:translateY(-92vh) translateX(var(--drift,20px)) scale(.4);opacity:0;}
}
.game-title{
  font-family:var(--font-display);
  font-size:clamp(50px,14vw,112px);margin:0;line-height:.92;font-weight:900;letter-spacing:-1px;
  filter:drop-shadow(0 5px 0 rgba(0,0,0,.5));
}
.game-title .t1{color:var(--ember);text-shadow:0 0 16px rgba(255,122,46,.35);}
.game-title .t2{color:var(--gold);text-shadow:0 0 16px rgba(232,178,74,.3);}
.game-sub{font-family:var(--font-display);font-size:clamp(13px,3.2vw,19px);color:var(--ink-dim);letter-spacing:.34em;text-transform:uppercase;margin:12px 0 34px;font-weight:600;}
.title-buttons{display:flex;flex-direction:column;gap:14px;align-items:center;}
.big-btn{
  font-size:20px;font-weight:900;color:#2a1206;letter-spacing:.04em;
  background-color:var(--ember-deep);background-image:linear-gradient(var(--ember),var(--ember-deep));
  border:none;clip-path:var(--notch);padding:16px 52px;cursor:pointer;
  box-shadow:inset 0 0 0 2px var(--carve), inset 0 2px 0 rgba(255,224,188,.5), 0 6px 0 #7a2c10;
  transition:transform .08s, box-shadow .08s;
}
.big-btn:active{transform:translateY(5px);box-shadow:inset 0 0 0 2px var(--carve), inset 0 2px 0 rgba(255,224,188,.5), 0 1px 0 #7a2c10;}
.ghost-btn{background-color:var(--wood);background-image:var(--grain);color:var(--ink-dim);clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 1.5px var(--carve);padding:10px 22px;font-size:13px;font-weight:800;cursor:pointer;
  border:none;text-transform:uppercase;letter-spacing:.06em;}
.ghost-btn:active{transform:translateY(2px);}
.title-foot{margin-top:30px;font-size:12px;color:var(--ink-faint);letter-spacing:.3px;}

/* ---------- Modal ---------- */
#modal-host{position:absolute;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;}
@media(min-width:640px){#modal-host{align-items:center;}}
#modal-scrim{position:absolute;inset:0;background:rgba(8,5,2,.74);animation:fadeIn .2s;}
#modal-panel{
  position:relative;width:100%;max-width:520px;max-height:86vh;display:flex;flex-direction:column;
  background-color:var(--wood);background-image:var(--grain);border-radius:12px 12px 0 0;
  box-shadow:inset 0 0 0 2px var(--carve), inset 0 3px 0 var(--edge-light), 0 -6px 34px rgba(0,0,0,.6);
  animation:sheetUp .28s cubic-bezier(.2,.9,.3,1);
  padding-bottom:var(--safe-b);
}
@media(min-width:640px){#modal-panel{border-radius:12px;animation:popIn .24s cubic-bezier(.2,.9,.3,1);
  box-shadow:inset 0 0 0 2px var(--carve), inset 0 3px 0 var(--edge-light), 0 14px 40px rgba(0,0,0,.6);}}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:none;}}
@keyframes popIn{from{transform:scale(.94);opacity:0;}to{transform:none;opacity:1;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
#modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;
  border-bottom:2px solid var(--carve);background:var(--wood-deep);background-image:var(--grain);border-radius:11px 11px 0 0;}
#modal-title{margin:0;font-family:var(--font-display);font-size:20px;font-weight:900;color:var(--ink);letter-spacing:.01em;}
#modal-close{width:34px;height:34px;border:none;color:var(--ink-dim);font-size:15px;font-weight:900;cursor:pointer;
  background:var(--wood);clip-path:var(--notch-sm);box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 1px 0 var(--edge-light);}
#modal-close:active{transform:translateY(2px);}
#modal-body{overflow-y:auto;padding:14px 16px 20px;-webkit-overflow-scrolling:touch;}

/* modal content pieces (shop/kitchen/etc) */
.tabbar{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.tab{flex:1;min-width:0;padding:9px 6px;border:none;background:var(--wood-deep);color:var(--ink-dim);
  font-weight:800;font-size:12px;cursor:pointer;text-align:center;transition:.12s;
  clip-path:var(--notch-sm);box-shadow:inset 0 0 0 1.5px var(--carve);text-transform:uppercase;letter-spacing:.03em;}
.tab.active{background:var(--panel-2);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 -3px 0 var(--ember);}

.up-card,.recipe-card,.biome-card,.mission-card{
  display:flex;align-items:center;gap:12px;padding:11px 12px;margin-bottom:9px;
  background-color:var(--panel-2);background-image:var(--grain);clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 1px 0 var(--edge-light);
}
.up-ico{font-size:25px;width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:center;
  background:var(--wood-deep);clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 1px 0 var(--edge-light), inset 0 2px 5px rgba(0,0,0,.5);}
.up-main{flex:1;min-width:0;}
.up-name{font-size:14.5px;font-weight:800;color:var(--ink);}
.up-desc{font-size:12px;color:var(--ink-dim);margin-top:2px;line-height:1.3;}
.up-lvl{font-size:11px;color:var(--ink-faint);font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums;}
.up-lvldots{display:inline-flex;gap:2px;margin-left:6px;vertical-align:middle;}
.up-dot{width:6px;height:6px;background:var(--carve);}
.up-dot.on{background:var(--ember);}
.buy-btn{
  flex:0 0 auto;min-width:86px;padding:9px 12px;border:none;cursor:pointer;
  background-color:var(--gold-deep);background-image:linear-gradient(var(--gold),var(--gold-deep));
  color:#2a1a06;font-weight:900;font-size:13px;clip-path:var(--notch-sm);font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 2px 0 rgba(255,240,205,.5), 0 4px 0 #6e4a12;
  transition:transform .07s, box-shadow .07s, filter .12s;
  display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.1;
  /* affordable = actionable: gentle carved sheen so "you can buy this" reads at a glance */
  animation:buyReady 1.7s ease-in-out infinite;
}
@keyframes buyReady{0%,100%{filter:brightness(1);}50%{filter:brightness(1.16);}}
.buy-btn:active{transform:translateY(3px);box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 2px 0 rgba(255,240,205,.5), 0 1px 0 #6e4a12;}
.buy-btn .bc{font-size:11px;display:flex;align-items:center;gap:3px;}
.buy-btn.locked,.buy-btn:disabled{background:var(--wood);background-image:var(--grain);color:var(--ink-faint);
  box-shadow:inset 0 0 0 1.5px var(--carve), 0 4px 0 var(--wood-deep);cursor:not-allowed;}
.buy-btn.maxed{background-color:var(--green-deep);background-image:linear-gradient(var(--green),var(--green-deep));color:#0c1a04;
  box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 2px 0 rgba(220,240,180,.4), 0 4px 0 #3a5020;}
/* can't afford yet — clearly muted, and NOT breathing (so only affordable buttons draw the eye) */
.buy-btn.afford-no{filter:saturate(.18) brightness(.5);opacity:.6;}
.buy-btn.afford-no,.buy-btn.locked,.buy-btn:disabled,.buy-btn.maxed{animation:none;}

.recipe-card.locked,.biome-card.locked{opacity:.68;}
.tag{font-size:10px;font-weight:800;padding:2px 8px;background:var(--wood-deep);color:var(--ink-dim);
  clip-path:var(--notch-sm);box-shadow:inset 0 0 0 1px var(--carve);text-transform:uppercase;letter-spacing:.04em;}
.tag.gold{color:var(--gold);} .tag.green{color:var(--green);} .tag.red{color:var(--danger);}

.mission-card{flex-direction:column;align-items:stretch;gap:8px;}
.mc-top{display:flex;align-items:center;gap:10px;}
.mc-bar{height:9px;background:var(--wood-deep);overflow:hidden;clip-path:var(--notch-sm);box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 2px 3px rgba(0,0,0,.5);}
.mc-fill{height:100%;background:var(--ember);transition:width .4s;box-shadow:inset 0 2px 0 rgba(255,214,176,.4);}
.mc-claim{align-self:flex-end;}

.ach-tile{display:flex;gap:8px;align-items:center;padding:8px 10px;background:var(--wood-deep);background-image:var(--grain);
  clip-path:var(--notch-sm);box-shadow:inset 0 0 0 1.5px var(--carve);opacity:.5;}
.ach-tile.done{opacity:1;box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 -3px 0 var(--gold);}
.ach-ico{font-size:22px;filter:grayscale(1);line-height:1;}
.ach-tile.done .ach-ico{filter:none;}
.ach-name{font-size:12.5px;font-weight:800;color:var(--ink);}
.ach-desc{font-size:10.5px;color:var(--ink-dim);line-height:1.2;margin-top:1px;}
.ach-tile.done .ach-desc{color:var(--gold);}

.toggle-btn{flex:0 0 auto;min-width:104px;padding:9px 14px;border:none;cursor:pointer;font-weight:900;font-size:13px;
  transition:transform .07s;clip-path:var(--notch-sm);text-transform:uppercase;letter-spacing:.04em;}
.toggle-btn:active{transform:translateY(2px);}
.toggle-btn.on{background-color:var(--green-deep);background-image:linear-gradient(var(--green),var(--green-deep));color:#0c1a04;
  box-shadow:inset 0 0 0 1.5px var(--carve), 0 3px 0 #3a5020;}
.toggle-btn.off{background:var(--wood);background-image:var(--grain);color:var(--ink-faint);
  box-shadow:inset 0 0 0 1.5px var(--carve), 0 3px 0 var(--wood-deep);}

.empty-note{text-align:center;color:var(--ink-faint);font-size:13px;padding:24px 10px;}
.section-note{font-size:12px;color:var(--ink-dim);margin:2px 0 12px;line-height:1.4;}

.biome-card .up-ico{font-size:28px;}
.biome-card.current{box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 1px 0 var(--edge-light), inset 0 -3px 0 var(--green);}

/* kitchen specific */
.kitchen-summary{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.ks-pill{flex:1;min-width:120px;background:var(--wood-deep);background-image:var(--grain);clip-path:var(--notch-sm);
  box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 1px 0 var(--edge-light);padding:9px 12px;text-align:center;}
.ks-pill .k{font-size:10.5px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
.ks-pill .v{font-size:18px;font-weight:900;margin-top:2px;font-variant-numeric:tabular-nums;}
.ks-pill.ks-wide{flex:2 1 240px;text-align:left;}
.ks-reslist{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:5px;align-items:center;}
.ks-res{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;}
.ks-res .ks-ic{font-size:15px;}
.station-row{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-bottom:8px;
  background:var(--wood-deep);clip-path:var(--notch-sm);box-shadow:inset 0 0 0 1.5px var(--carve);}
.station-bar{flex:1;height:12px;background:var(--bg);overflow:hidden;clip-path:var(--notch-sm);box-shadow:inset 0 0 0 1.5px var(--carve), inset 0 2px 3px rgba(0,0,0,.5);}
.station-fill{height:100%;background:var(--ember);width:0%;transition:width .2s linear;box-shadow:inset 0 2px 0 rgba(255,214,176,.4);}
.station-idle{color:var(--ink-faint);font-size:12px;font-weight:700;}

/* offline popup */
#offline-pop{position:absolute;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;background:rgba(8,5,2,.76);}
.offline-card{background-color:var(--wood);background-image:var(--grain);clip-path:var(--notch);
  box-shadow:inset 0 0 0 2px var(--carve), inset 0 3px 0 var(--edge-light), 0 12px 40px rgba(0,0,0,.6);
  padding:26px 28px;text-align:center;max-width:340px;animation:popIn .3s;}
.offline-card h3{margin:0 0 8px;font-family:var(--font-display);font-size:22px;color:var(--gold);}
.offline-card p{color:var(--ink-dim);font-size:15px;line-height:1.5;margin:0 0 20px;}
.offline-card p b{color:var(--ink);font-variant-numeric:tabular-nums;}

/* big flash (unlock / boss) */
#flash-layer{position:absolute;inset:0;z-index:35;pointer-events:none;display:flex;align-items:center;justify-content:center;}
.big-flash{text-align:center;animation:flashPop 2.4s ease forwards;}
.big-flash .bf-sub{font-size:13px;font-weight:800;letter-spacing:.26em;color:var(--ember);text-transform:uppercase;}
.big-flash .bf-main{font-family:var(--font-display);font-size:clamp(30px,9vw,58px);font-weight:900;color:var(--ink);text-shadow:0 0 24px rgba(255,122,46,.4),0 4px 0 rgba(0,0,0,.55);margin-top:6px;}
@keyframes flashPop{0%{transform:scale(.6);opacity:0;}12%{transform:scale(1.05);opacity:1;}20%{transform:scale(1);}80%{opacity:1;}100%{opacity:0;transform:scale(1.02);}}

/* small helpers */
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.muted{color:var(--ink-faint);}
.cost-line{font-size:12.5px;font-weight:800;color:var(--ink-dim);display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;}
.cost-line.no{color:var(--danger);}
kbd{background:var(--wood-deep);border:none;box-shadow:inset 0 0 0 1px var(--carve);clip-path:var(--notch-sm);padding:1px 6px;font-size:11px;font-weight:800;color:var(--ink-dim);}

/* scrollbar */
#modal-body::-webkit-scrollbar{width:8px;}
#modal-body::-webkit-scrollbar-thumb{background:var(--carve);}
#modal-body::-webkit-scrollbar-track{background:var(--wood-deep);}

/* ---------- interaction polish (hover/focus) ---------- */
@media(hover:hover){
  .side-btn:hover,.corner-btn:hover{filter:drop-shadow(0 3px 0 rgba(0,0,0,.5)) brightness(1.09);}
  .buy-btn:hover:not(:disabled),.big-btn:hover,.ghost-btn:hover,.toggle-btn:hover{filter:brightness(1.07);}
  #btn-dash:hover{filter:drop-shadow(0 4px 0 rgba(0,0,0,.55)) brightness(1.07);}
  .tab:hover:not(.active){color:var(--ink);background:var(--wood);}
  .up-card:hover,.recipe-card:hover,.mission-card:hover{box-shadow:inset 0 0 0 1.5px var(--ink-faint), inset 0 1px 0 var(--edge-light);}
  #modal-close:hover{color:var(--ember);}
}
button:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--ember);outline-offset:2px;}
button{font-family:var(--font);}