/* ============================================================
   styles.css — ALL THE DESIGN. Edit here to change the look.
   ------------------------------------------------------------
   START with the THEME block right below: change a color or
   font there and it updates everywhere in the game. The rest
   of the file applies those theme values to each element.
   ============================================================ */

/* ====================  THEME  ====================
   These are the dials. Change a value, save, reload. */
:root{
  --app-h: 100vh;   /* play-area reference height; fixed on desktop so the map doesn't scale with the window */
  /* --- COLORS --- */
  --ink:        #e8dfc8;   /* main text */
  --ink-dim:    #a9a08a;   /* faded text */
  --bg:         #1a1510;   /* page background */
  --bg-2:       #221b13;   /* darker panel base */
  --panel:      #2a2017;   /* panel top color */
  --edge:       #4a3a25;   /* borders */
  --gold:       #c9a227;   /* headings / accents */
  --gold-bright:#e8c44a;   /* numbers / highlights */
  --crimson:    #8c2b1f;   /* enemy / danger */
  --crimson-bright:#c2412f;
  --green:      #5a7d3a;   /* positive bonuses */
  --hp:         #a13226;   /* health bar fill */
  --hp-bg:      #3a1410;   /* empty bar track */

  /* --- FONTS --- (loaded in index.html; swap names there too) */
  --font-display:'Cinzel', serif;   /* titles, headings, numbers */
  --font-body:'EB Garamond', Georgia, serif; /* everything else */

  /* --- LAYOUT --- */
  --max-width: 920px;      /* how wide the game column is */
  --radius: 6px;           /* corner rounding */
  --portrait-size: 230px;  /* battle picture size */
  --gap: 16px;             /* space between panels */
}
/* ================  END THEME  ================ */


/* ---- page basics ---- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(201,162,39,.10), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(140,43,31,.12), transparent 55%),
    var(--bg);
  min-height:100%;
  line-height:1.55;
  letter-spacing:.2px;
}
.wrap{max-width:480px;min-width:390px;margin:0 auto;padding:6px 12px 60px;
  min-height:100vh}
.panel.bare{background:none;border:none;padding:0}

/* ===== status bar + bottom nav ===== */
body{padding-top:64px;padding-bottom:62px;min-width:390px}
.status-bar{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:50;display:flex;align-items:center;gap:12px;
  padding:8px 14px;background:linear-gradient(180deg,#241c12,#1a140d);border-bottom:1px solid var(--gold);
  box-shadow:0 2px 10px rgba(0,0,0,.5)}
.sb-portrait{width:46px;height:46px;border-radius:50%;border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:24px;background:#16110b;flex-shrink:0}
.sb-vitals{flex:1;min-width:0;max-width:520px}
.sb-row1{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.sb-name{font-family:var(--font-display);color:var(--gold-bright);font-size:14px;white-space:nowrap}
.sb-level{font-size:12px;color:var(--ink-dim);white-space:nowrap}
.sb-xpwrap{flex:1;height:4px;background:#3a2e18;border-radius:2px;overflow:hidden;min-width:40px}
.sb-xpbar{display:block;height:100%;background:var(--gold);border-radius:2px}
.sb-bar{position:relative;height:11px;border-radius:3px;background:var(--hp-bg);margin-top:3px;overflow:hidden}
.sb-bar.mana{background:#10243a}
.sb-bar span{display:block;height:100%;border-radius:3px}
.sb-bar.hp span{background:linear-gradient(90deg,#7a2018,var(--hp))}
.sb-bar.mana span{background:linear-gradient(90deg,#1d4a78,#2f78c4)}
.sb-bar label{position:absolute;inset:0;text-align:center;font-size:9px;line-height:11px;color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.8);letter-spacing:.5px}
.sb-gold{font-family:var(--font-display);color:var(--gold-bright);font-size:15px;white-space:nowrap;flex-shrink:0}
.sb-gold .coin{color:var(--gold)}
.sb-turns{font-family:var(--font-display);color:var(--gold-bright);font-size:14px;white-space:nowrap;flex-shrink:0}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:50;display:flex;
  background:linear-gradient(0deg,#241c12,#1a140d);border-top:1px solid var(--gold)}
.nav-btn{flex:1;background:none;border:none;color:var(--ink-dim);font-family:var(--font-display);
  font-size:11px;font-weight:700;padding:7px 0 6px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  border-top:2px solid transparent;letter-spacing:.5px}
.nav-btn .nav-ico{font-size:21px;font-weight:700}
.nav-btn.active{color:var(--gold-bright);border-top-color:var(--gold)}
.nav-btn:hover{color:var(--ink)}

/* ---- header ---- */
header{text-align:center;margin-bottom:18px;position:relative}
h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,6vw,46px);letter-spacing:3px;
  color:var(--gold-bright);
  text-shadow:0 2px 0 #000,0 0 18px rgba(201,162,39,.35);
}
.tagline{color:var(--ink-dim);font-style:italic;font-size:15px;margin-top:2px}
.rule{height:2px;margin:14px auto;max-width:340px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ---- panels (the boxes that make up the layout) ---- */
.panel{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--edge);
  border-radius:var(--radius);
  padding:16px 18px;
  margin-bottom:var(--gap);
  box-shadow:inset 0 1px 0 rgba(232,223,200,.05),0 8px 24px rgba(0,0,0,.4);
}
.panel h2{
  font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:1.5px;
  color:var(--gold);text-transform:uppercase;margin-bottom:10px;
  border-bottom:1px solid var(--edge);padding-bottom:6px;
}

/* ---- character sheet ---- */
.sheet-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:baseline}
.charname{font-family:var(--font-display);font-size:20px;color:var(--ink)}
.level{color:var(--gold);font-size:14px;letter-spacing:1px}
.bars{margin:12px 0}
.bar-label{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-dim);margin-bottom:3px}
.bar{height:14px;background:var(--hp-bg);border:1px solid var(--edge);border-radius:3px;overflow:hidden}
.bar > span{display:block;height:100%;transition:width .35s ease}
.bar.hp > span{background:linear-gradient(90deg,#7a221a,var(--hp))}
.bar.xp > span{background:linear-gradient(90deg,#6a5210,var(--gold))}
.bar.mana > span{background:linear-gradient(90deg,#1e3a5a,#3a6ea5)}
.stat .v .plus{margin-left:6px;font-family:var(--font-display);font-size:13px;
  padding:1px 8px;border:1px solid var(--gold);border-radius:4px;background:rgba(201,162,39,.15);
  color:var(--gold-bright);cursor:pointer;vertical-align:middle}
.stat .v .plus:hover{background:var(--gold);color:#1a1510}
.chips{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.chip{font-size:11px;letter-spacing:.5px;padding:2px 8px;border-radius:10px;
  background:rgba(122,36,28,.4);border:1px solid var(--crimson);color:var(--ink)}
.combat-you{text-align:center;margin-top:12px;font-size:14px;color:var(--ink-dim)}
button.skill{background:linear-gradient(180deg,#2a3a52,#16202e);border-color:#3a5a7d;font-size:13px;padding:9px 12px}
button.skill:hover:not(:disabled){border-color:#5a8ad0;color:#bcd6ff}
.portrait.defeated svg, .portrait.defeated .portrait-img{filter:grayscale(.8) brightness(.5);animation:none}
.defeated-x{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:120px;color:var(--crimson-bright);opacity:.55;text-shadow:0 2px 12px #000;pointer-events:none}
.rewards-box{max-width:340px;margin:14px auto 0;display:flex;flex-direction:column;gap:8px}
.reward{padding:9px 14px;border:1px solid var(--edge);border-radius:5px;background:rgba(0,0,0,.25);
  font-size:15px;color:var(--ink);text-align:center}
.reward b{color:var(--gold-bright)}
.reward.loot{border-color:var(--gold);background:rgba(201,162,39,.12)}
.reward.loss{border-color:var(--crimson);background:rgba(140,43,31,.12);color:var(--ink)}
.reward.loss::first-letter{color:var(--crimson-bright)}
.portrait.victor svg, .portrait.victor .portrait-img{filter:drop-shadow(0 0 14px rgba(194,65,47,.5));animation:idle 3.2s ease-in-out infinite}
.portrait.defeated.victor .defeated-x{display:none}
.defeat-tale{max-width:420px;margin:14px auto 0;text-align:center;font-style:italic;
  color:var(--ink-dim);line-height:1.5;padding:0 8px}
.defeat-taunt{max-width:440px;margin:12px auto 0;text-align:center;font-family:var(--font-display);
  font-size:18px;color:var(--crimson-bright);letter-spacing:.3px}
.zone-head{display:flex;align-items:baseline;gap:8px;font-family:var(--font-display);font-size:20px;color:var(--gold-bright)}
.zone-name{letter-spacing:.5px}
.item-row.secret{border-color:var(--gold);background:rgba(201,162,39,.08)}
.reward.none{color:var(--ink-dim);font-style:italic;border-style:dashed}
.levelup-banner{max-width:380px;margin:14px auto 0;text-align:center;padding:12px;border-radius:6px;
  border:1px solid var(--gold);background:rgba(201,162,39,.15);color:var(--gold-bright);
  font-family:var(--font-display);letter-spacing:.5px;line-height:1.4}
.guild-block{border:1px solid var(--edge);border-radius:6px;padding:12px 14px;margin-bottom:12px;background:rgba(0,0,0,.18)}
.guild-head{font-family:var(--font-display);font-size:16px;color:var(--gold)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.stat{background:rgba(0,0,0,.25);border:1px solid var(--edge);border-radius:4px;text-align:center;padding:8px 4px}
.stat .v{font-family:var(--font-display);font-size:22px;color:var(--gold-bright)}
.stat .k{font-size:11px;letter-spacing:1px;color:var(--ink-dim);text-transform:uppercase}
.resources{display:flex;gap:18px;margin-top:12px;flex-wrap:wrap;font-size:15px}
.resources b{color:var(--gold-bright);font-family:var(--font-display)}

/* ---- daily turns ---- */
.turns{display:flex;align-items:center;gap:8px;font-size:15px}
.turn-pips{display:flex;gap:3px;flex-wrap:wrap}
.pip{width:11px;height:11px;border-radius:50%;border:1px solid var(--edge);background:var(--hp-bg)}
.pip.full{background:var(--gold);box-shadow:0 0 6px rgba(201,162,39,.5)}

/* ---- chronicle / log ---- */
#log{max-height:240px;overflow-y:auto;font-size:15px}
#log .entry{padding:6px 0;border-bottom:1px dashed rgba(74,58,37,.5)}
#log .entry:last-child{border-bottom:none}
#log .good{color:var(--gold-bright)}
#log .bad{color:var(--crimson-bright)}
#log .info{color:var(--ink-dim);font-style:italic}
#log .lore{color:#b9c6a0;font-style:italic}

/* ---- buttons ---- */
.actions{display:flex;flex-wrap:wrap;gap:10px}
button{
  font-family:var(--font-display);font-size:14px;letter-spacing:.8px;
  color:var(--ink);cursor:pointer;
  background:linear-gradient(180deg,#3a2c1c,#241a11);
  border:1px solid var(--edge);border-radius:5px;
  padding:11px 16px;transition:.15s;
  box-shadow:inset 0 1px 0 rgba(232,223,200,.06);
}
button:hover:not(:disabled){border-color:var(--gold);color:var(--gold-bright);transform:translateY(-1px)}
button:disabled{opacity:.4;cursor:not-allowed}
button.primary{background:linear-gradient(180deg,#6a2018,#4a140e);border-color:var(--crimson)}
button.primary:hover:not(:disabled){border-color:var(--crimson-bright);color:#fff}
button.gold{background:linear-gradient(180deg,#5a4410,#3a2c08);border-color:var(--gold)}
button.crimson{background:linear-gradient(180deg,#7a1c14,#3a0d08);border-color:var(--crimson-bright);color:#ffd9c8}
button.crimson:hover:not(:disabled){border-color:#e0573f;color:#fff}
.equipped-box{border:1px solid var(--gold);border-radius:var(--radius);padding:4px 10px;margin-bottom:14px;background:rgba(201,162,39,.05)}
.item-row.equipped{border:none;border-bottom:1px solid rgba(74,58,37,.4);border-radius:0;padding:7px 0;background:none}
.item-row.equipped:last-child{border-bottom:none}
.slot-tag{display:inline-block;min-width:74px;font-family:var(--font-display);font-size:11px;
  color:var(--gold);letter-spacing:.5px;text-transform:uppercase}
.inv-label{font-family:var(--font-display);color:var(--gold);font-size:13px;letter-spacing:.5px;
  text-transform:uppercase;margin:4px 0 8px;border-bottom:1px solid var(--edge);padding-bottom:4px}
.mini{font-size:10px;margin-left:3px;font-weight:bold}
.stack{font-size:12px;color:var(--gold-bright);font-weight:bold;margin-left:2px}
.reqfail{font-size:12px;color:var(--crimson-bright)}
.mini.up{color:#6fbf4a}
.mini.down{color:var(--crimson-bright)}
.mini.same{color:var(--ink-dim)}
button.ghost{background:transparent;border-color:rgba(74,58,37,.6);color:var(--ink-dim);
  font-size:12px;padding:7px 12px;letter-spacing:.5px}
button.ghost:hover:not(:disabled){border-color:var(--crimson);color:var(--crimson-bright);transform:none}

/* ---- battle / monster portrait ---- */
.enemy{text-align:center;margin-bottom:10px}
.enemy .ename{font-family:var(--font-display);font-size:20px;color:var(--crimson-bright);margin-top:10px}
.portrait{
  width:var(--portrait-size);height:var(--portrait-size);
  max-width:70vw;max-height:70vw;margin:6px auto;
  border:3px solid var(--edge);border-radius:8px;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(201,162,39,.10), transparent 60%),
    radial-gradient(ellipse at 50% 80%, rgba(0,0,0,.5), transparent 70%),
    linear-gradient(180deg,#2e2418,#140f0a);
  box-shadow:inset 0 0 40px rgba(0,0,0,.7), 0 6px 20px rgba(0,0,0,.5);
  position:relative;overflow:hidden;
}
.portrait::after{ /* gold inner frame line */
  content:"";position:absolute;inset:5px;border:1px solid rgba(201,162,39,.25);
  border-radius:5px;pointer-events:none;
}
.portrait svg, .portrait-img{
  width:100%;height:100%;display:block;object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));
  animation:idle 3.2s ease-in-out infinite;
}
.portrait.hit svg, .portrait.hit .portrait-img{animation:hitShake .3s ease}
@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes hitShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* ---- shop / inventory rows ---- */
.item-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 10px;border:1px solid var(--edge);border-radius:4px;margin-bottom:6px;
  background:rgba(0,0,0,.2)}
.item-row .meta{font-size:13px;color:var(--ink-dim)}
.item-row .iname{color:var(--ink);font-weight:500}
.item-row .iname.equipped{color:var(--gold-bright)}
.bonus{color:var(--green)}
.effpow{color:var(--gold-bright);font-size:13px;font-family:var(--font-display)}
.delta{font-size:12px;font-weight:600;margin-left:4px}
.delta.up{color:#6fbf5a}
.delta.down{color:var(--crimson-bright)}
.delta.same{color:var(--ink-dim);font-style:italic;font-weight:400}
.fit{font-size:11px;letter-spacing:.3px}
.fit.good{color:#6fbf5a}
.fit.ok{color:var(--ink-dim)}
.fit.low{color:#d08a2a}

/* ---- misc helpers ---- */
.hidden{display:none}
.muted{color:var(--ink-dim);font-style:italic;font-size:14px}
.center{text-align:center}
.dragon-banner{text-align:center;padding:10px;border:1px solid var(--crimson);border-radius:5px;
  background:rgba(140,43,31,.15);margin-bottom:12px}
.footnote{font-size:12px;color:var(--ink-dim);text-align:center;margin-top:24px;font-style:italic}

/* ---------- ILLUSTRATED TOWN ---------- */
.town-scene{position:relative;width:100%;max-width:min(100%, calc((var(--app-h) - 122px) * 909 / 1316));aspect-ratio:909/1316;margin:0 auto;border:none;
  border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.5),inset 0 0 60px rgba(0,0,0,.35)}
.town-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none}
.town-pins{position:absolute;inset:0}
.town-leave{display:block; width:auto; max-width:calc(100% - 24px); margin:10px auto 8px; font-family:var(--font-display); letter-spacing:.3px; white-space:nowrap; border-radius:8px; padding-left:18px; padding-right:18px; font-size:14px}

/* ---------- ILLUSTRATED ZONE SCREEN ---------- */
.zone-scene{position:relative;
  /* fill the exact band between the status bar (67px) and nav (55px) so the map
     touches both top and bottom; width follows the 941:1672 ratio and is the only
     limiter on narrower screens (never exceeds the column width) */
  height:calc(var(--app-h) - 67px - 55px);
  width:min(100%, calc((var(--app-h) - 67px - 55px) * 941 / 1672));
  aspect-ratio:941/1672;margin:0 auto;border:none;
  border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.5),inset 0 0 70px rgba(0,0,0,.4)}
.zone-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none}
.zone-pins{position:absolute;inset:0}

/* title banner over the top of the scene */
.zone-banner{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:90%;text-align:center;
  background:rgba(12,10,7,.6);border:1px solid #b9933f;border-radius:6px;padding:8px 10px 9px;backdrop-filter:blur(2px)}
.zb-title{font-family:var(--font-display);font-size:clamp(20px,6vw,30px);letter-spacing:1px;color:#fff;
  text-shadow:0 2px 5px #000;line-height:1.05}
.zb-sub{font-family:var(--font-body);font-style:italic;font-size:13px;color:#fff;opacity:.85;margin-top:3px;
  text-shadow:0 1px 3px #000}

/* medallion hotspots: round gold-ringed icon with the place name beneath */
.zone-sign{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;
  gap:3px;background:none;border:none;padding:0;cursor:pointer;font-family:var(--font-display);
  -webkit-tap-highlight-color:transparent}
.zone-sign:hover,.zone-sign:focus,.zone-sign:active,.zone-sign:hover:not(:disabled){
  transform:translate(-50%,-50%);border:none;color:inherit}
.zs-medallion{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#c2a14e;background:rgba(12,10,7,.62);border:2px solid #b9933f;backdrop-filter:blur(2px);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 3px 9px rgba(0,0,0,.65),inset 0 1px 2px rgba(214,182,108,.18);
  transform-origin:center;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.zs-svg{width:27px;height:27px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))}
.zs-emoji{font-size:22px;line-height:1;filter:drop-shadow(0 1px 2px #000)}
.zs-text{display:flex;flex-direction:column;align-items:center;line-height:1.1;text-align:center;margin-top:1px}
.zs-name{font-size:13px;letter-spacing:.4px;color:#fff;background:rgba(12,10,7,.62);backdrop-filter:blur(2px);
  border:1px solid rgba(185,147,63,.55);padding:1px 8px;border-radius:5px;white-space:nowrap;text-shadow:0 1px 2px #000}
.zs-sub{font-style:italic;font-size:10.5px;letter-spacing:.3px;color:#fff;opacity:.82;
  text-shadow:0 1px 2px #000;margin-top:2px;font-family:var(--font-body)}
.zone-sign.travel .zs-medallion{border-color:#7f9a52;color:#cdb46a}
.zone-sign.secret .zs-medallion{border-color:#c9a85a;background:rgba(20,10,22,.6)}
.zone-sign.util .zs-medallion{border-color:#c9a227;color:var(--gold-bright)}
.zone-sign.locked{opacity:.72}
.zone-sign.locked .zs-medallion{border-color:#6b5a34;color:#8a784a;background:rgba(12,10,7,.55)}
.zone-sign.locked .zs-sub{color:#cdbb8a;opacity:.7}
.zone-sign:hover:not([disabled]) .zs-medallion{border-color:var(--gold-bright);color:var(--gold-bright);
  transform:scale(1.08);box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 16px rgba(232,196,74,.5),0 3px 9px rgba(0,0,0,.65)}
.zone-sign.locked:hover:not([disabled]) .zs-medallion{border-color:#9a854c;color:#b59a5c;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 3px 9px rgba(0,0,0,.65)}
.zone-sign[disabled]{opacity:.5;cursor:default}

/* zone info panel (fills in with progress) */
.zone-info{margin:0 auto;max-width:min(100%, calc((var(--app-h) - 122px) * 941 / 1672));border:1px solid var(--edge);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel),var(--bg-2));overflow:hidden}
.zi-titlewrap{text-align:center;padding:10px 10px 6px;border-bottom:1px solid var(--edge);background:rgba(0,0,0,.18)}
.zi-zonename{font-family:var(--font-display);letter-spacing:1.5px;color:var(--gold-bright);font-size:clamp(15px,3.4vw,22px);line-height:1.05}
.zi-levelbadge{font-family:var(--font-display);font-size:12px;letter-spacing:1px;color:var(--gold);margin-top:2px}
.zi-zoneblurb{font-family:var(--font-body);font-style:italic;font-size:11.5px;color:var(--ink-dim);opacity:.9;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zi-corner-btns{display:flex;justify-content:space-between;align-items:flex-end;padding:6px 12px 10px}
.zi-corner{display:flex;flex-direction:column;align-items:center;gap:1px;background:none;border:none;
  cursor:pointer;color:var(--gold-bright);padding:2px 4px;-webkit-tap-highlight-color:transparent}
.zi-corner .zs-svg{width:22px;height:22px}
.zi-corner span{font-family:var(--font-display);font-size:11px;letter-spacing:.5px;color:var(--ink)}
.zi-corner:hover:not(:disabled){color:var(--gold-bright);transform:none;border:none}
.zi-corner:hover:not(:disabled) span{color:var(--gold-bright)}
.zi-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}
.zi-cols.two{grid-template-columns:1.4fr 1fr}
.zi-col{min-width:0}
.zi-label{font-family:var(--font-display);font-size:12.5px;letter-spacing:.5px;color:var(--gold);margin-bottom:5px}
.zi-count{display:block;font-family:var(--font-body);font-size:10px;color:var(--ink-dim);letter-spacing:0;text-transform:none}
.zi-big{font-family:var(--font-display);font-size:22px;color:var(--gold-bright);line-height:1}
.zi-big.sm{font-size:16px}
.zi-note{font-size:12px;color:var(--ink-dim);font-style:italic;margin:4px 0 0;line-height:1.3}
.zi-unknown{font-size:12px;color:var(--ink-dim);font-style:italic;margin:0;line-height:1.3}
.zi-creatures{list-style:none;margin:0;padding:0;font-size:13px}
.zi-creatures li{padding:1px 0;display:flex;align-items:baseline;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;break-inside:avoid}
.zi-mk{flex:0 0 auto;width:15px;text-align:center;font-size:12px;line-height:1;color:var(--ink-dim)}
.zi-creatures .t-normal{color:var(--ink)}
.zi-creatures .t-elite{color:var(--uncommon, #6fbf5a)}
.zi-creatures .t-secret{color:var(--epic, #a061d1)}
.zi-creatures .t-zone{color:var(--legendary, #e8a13a)}
@media (max-width:560px){
  .zi-cols{grid-template-columns:1fr;gap:12px}
  .zone-sign .zs-name{font-size:11.5px}
  .zb-sub{display:none}
}

/* ---------- RIDDLE CHEST (Wordle-style) ---------- */
.wd-grid{display:flex;flex-direction:column;gap:6px;align-items:center;margin:14px auto}
.wd-row{display:flex;gap:6px}
.wd-cell{width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--ink);
  border:2px solid var(--edge);border-radius:5px;background:rgba(12,10,7,.4);text-transform:uppercase}
.wd-cell.hit{background:#4a6a2a;border-color:#5a7d3a;color:#fff}
.wd-cell.present{background:#9a7d1e;border-color:#c9a227;color:#fff}
.wd-cell.miss{background:#2a2118;border-color:#3a2e1d;color:var(--ink-dim)}
.wd-input{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:6px;flex-wrap:wrap}
.wd-input input{font-family:var(--font-display);font-size:20px;letter-spacing:4px;text-align:center;
  width:200px;max-width:60vw;padding:8px 10px;border-radius:5px;border:2px solid var(--gold);
  background:rgba(12,10,7,.55);color:#fff;text-transform:uppercase}
.wd-input input::placeholder{color:var(--ink-dim);letter-spacing:1px;font-size:14px;text-transform:none}
.wd-input input:focus{outline:none;border-color:var(--gold-bright);box-shadow:0 0 10px rgba(232,196,74,.4)}
@media (max-width:560px){
  .wd-cell{width:40px;height:40px;font-size:19px}
}

/* ---------- SUMMONER WARBAND (adds) ---------- */
.warband{margin:6px 0 4px;padding:8px 10px;border:1px solid var(--edge);border-radius:6px;
  background:rgba(40,20,16,.35);font-size:13px;color:var(--ink)}
.wb-add{display:inline-block;padding:1px 7px;margin:2px 2px;border:1px solid #7a5a3a;border-radius:4px;
  background:rgba(20,12,8,.5);color:#e8c98a;white-space:nowrap}
.wb-note{margin-top:5px;font-size:12px;font-style:italic;color:var(--ink-dim)}
.food-left{display:inline-block;margin-left:6px;font-size:12px;font-style:italic;color:var(--ink-dim);align-self:center}

/* ============================================================
   WIDE-SCREEN PLAYTEST LAYOUT
   On desktop, place the Chronicle beside the main view so nothing
   scrolls out of sight. Phones/narrow screens keep the stacked column.
   ============================================================ */
@media (min-width: 1040px){
  /* On desktop, freeze the play-area height to a fixed phone size so the map and
     layout no longer scale when the window is resized. */
  :root{ --app-h: 844px; }
  /* The play column is a real phone width; the Chronicle floats beside it as its
     own detached window. */
  .wrap{
    max-width: none;
    width: 480px;
    margin: 0 auto;
    margin-left: calc(50% - 420px);   /* shift the phone column left of centre */
    display: block;
  }
  #heroPanel, #mainView, .footnote{ width: 480px; box-sizing: border-box; }

  /* Chronicle becomes a separate floating window to the right of the play column */
  #logPanel{
    position: fixed;
    top: 84px;
    left: calc(50% + 90px);           /* sits just right of the phone column */
    width: clamp(300px, 32vw, 400px);
    max-height: calc(var(--app-h) - 150px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 30;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0,0,0,.55);
  }
  #logPanel #log{ max-height: none; flex: 1; overflow-y: auto; }

  /* header + nav: phone width, aligned over the play column (not the viewport) */
  .status-bar, .bottom-nav{
    max-width: 480px;
    width: 480px;
    left: calc(50% - 420px + 240px);  /* centre of the 480px play column */
    transform: translateX(-50%);
    box-sizing: border-box;
  }
  /* nav sits at the bottom of the fixed phone box, not the window bottom */
  .bottom-nav{ top: var(--app-h); bottom: auto; transform: translate(-50%, -100%); }
  .status-bar{ top: 0; }
}

/* ============================================================
   LOCKED MAP VIEW (illustrated zone): map fills the band between
   the status bar and nav, with no page scroll. Below-map content
   (Chronicle, footnote) is suppressed here on narrow screens.
   ============================================================ */
body.zone-map-view{ overflow:hidden; }
html:has(body.zone-map-view){ overflow:hidden; height:100%; }
body.zone-map-view .wrap{ min-height:0; padding-top:0; padding-bottom:0; }
body.zone-map-view .footnote{ display:none; }
@media (max-width:1039px){
  body.zone-map-view #logPanel{ display:none; }   /* phone: Chronicle hidden on map screen (handled later) */
}

/* ============================================================
   LOCKED TOWN VIEW: map snaps under the status bar and expands to
   touch a border; the "Leave Town" button snaps above the nav.
   No page scroll. (Town map ratio is 941:1362.)
   ============================================================ */
body.town-map-view{ overflow:hidden; }
html:has(body.town-map-view){ overflow:hidden; height:100%; }
body.town-map-view .wrap{ min-height:0; padding-top:0; padding-bottom:0; }
body.town-map-view .footnote{ display:none; }
@media (max-width:1039px){
  body.town-map-view #logPanel{ display:none; }
}
/* Leave Town pinned just above the bottom nav (nav is 55px tall) */
body.town-map-view .town-leave{
  margin:8px auto 6px;
}
/* Town map fills the band between the status bar (67px) and the in-flow Leave Town
   button (~50px) + nav (55px); width follows the 941:1362 ratio, capped to column. */
body.town-map-view .town-scene{
  height:calc(var(--app-h) - 67px - 64px - 55px);
  width:min(100%, calc((var(--app-h) - 67px - 64px - 55px) * 909 / 1316));
  max-width:min(100%, calc((var(--app-h) - 67px - 64px - 55px) * 909 / 1316));
}

/* Wide desktop: the button is in-flow under the image; just center it on the offset column */
@media (min-width: 1040px){
  body.town-map-view .town-leave{
    margin:10px auto 6px;
  }
}

/* ============================================================
   HERO & GEAR SCROLL FIX (v2)
   Confine these two long views to the band between the status bar
   and the bottom nav, with their own vertical scroll. Fixes:
   - last rows hidden behind the fixed nav (now scroll above it)
   - content bleeding out below the nav on desktop (now clipped)
   - the stray horizontal scrollbar + clipped buttons from v1
     (overflow-x hidden; children fill the column so the vertical
     scrollbar no longer pushes content wider than the box)
   Scoped to body.panel-scroll so map/town/combat are untouched.
   ============================================================ */
body.panel-scroll{ overflow:hidden; }
html:has(body.panel-scroll){ overflow:hidden; height:100%; }

body.panel-scroll .wrap{
  height: calc(100dvh - 64px - 62px);   /* viewport - status bar - nav */
  min-height:0;
  box-sizing:border-box;
  overflow-y:auto;
  overflow-x:hidden;                    /* no horizontal scrollbar */
  -webkit-overflow-scrolling:touch;
  padding-bottom:24px;                  /* breathing room above the nav */
  scrollbar-width:thin;                 /* slim themed scrollbar (Firefox) */
  scrollbar-color:rgba(201,162,39,.55) transparent;
}
body.panel-scroll .wrap::-webkit-scrollbar{ width:8px; }
body.panel-scroll .wrap::-webkit-scrollbar-track{ background:transparent; }
body.panel-scroll .wrap::-webkit-scrollbar-thumb{
  background:rgba(201,162,39,.5); border-radius:4px;
}

@media (min-width:1040px){
  body.panel-scroll .wrap{
    height: calc(var(--app-h) - 64px - 62px);   /* bound to the phone box */
  }
  /* children fill the scroll column so the scrollbar can't widen them past the box */
  body.panel-scroll #heroPanel,
  body.panel-scroll #mainView,
  body.panel-scroll .footnote{ width:100%; }
}

/* fully opaque nav so nothing is ever visible through it */
.bottom-nav{ background:#1a140d; }

/* ============================================================
   ILLUSTRATED BOTTOM NAV (user-provided tile art)
   Labels are baked into the images, so the text spans are gone.
   Dark bar to match the tiles, gold top border + vertical dividers
   between cells, centred tiles, subtle active highlight.
   Image height kept <= the 62px reserved for the nav so the
   Hero/Gear scroll math still clears it.
   ============================================================ */
.bottom-nav{
  background:#0a0a0a;
  border-top:2px solid var(--gold);
  box-shadow:0 -3px 12px rgba(0,0,0,.6);
  padding:0;
}
.nav-btn{
  padding:5px 0;
  gap:0;
  border-right:1px solid rgba(201,162,39,.30);   /* gold divider */
}
.nav-btn:last-child{ border-right:none; }
.nav-btn img{
  height:48px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  display:block;
  margin:0 auto;
  pointer-events:none;
}
.nav-btn:hover{ background:rgba(201,162,39,.04); }
.nav-btn.active{ background:rgba(201,162,39,.07); }       /* keeps base gold top-border too */
.nav-btn.active img{ filter:drop-shadow(0 0 5px rgba(201,162,39,.55)); }

/* ============================================================
   ZONE INFO PULL-UP DRAWER (map view)
   A gold tab sits just above the bottom nav showing the zone name.
   Tapping it slides the existing Zone Info panel up. The tab is the
   top child so it reads as a grab handle on top of the panel; the
   body is bottom-anchored above the nav and grows upward.
   ============================================================ */
.zone-drawer{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:62px;                       /* sit on top of the bottom nav */
  width:480px; max-width:100%;
  box-sizing:border-box;
  z-index:52;                        /* above the nav so the tab is never clipped */
  display:flex; flex-direction:column; align-items:stretch;
  pointer-events:none;               /* only the tab + body catch taps */
}
.zone-drawer-tab{
  pointer-events:auto;
  align-self:center;
  display:flex; align-items:center; justify-content:center; gap:7px;
  min-width:130px; max-width:80%; height:27px; padding:0 18px;
  border:1px solid var(--gold); border-bottom:none;
  border-radius:13px 13px 0 0;
  background:linear-gradient(180deg,#d8b43a,#9a7b1e);
  color:#1a140d; cursor:pointer;
  font-family:var(--font-display); font-weight:700;
  font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 -2px 10px rgba(0,0,0,.4);
}
.zone-drawer-tab::before{ content:'\25B4'; font-size:11px; transition:transform .3s ease; }
.zone-drawer.open .zone-drawer-tab::before{ transform:rotate(180deg); }
.zone-drawer-tab .zdt-label{ overflow:hidden; text-overflow:ellipsis; }
.zone-drawer-tab:hover{ background:linear-gradient(180deg,#e7c54b,#a9882a); }

.zone-drawer-body{
  pointer-events:auto;
  max-height:0; overflow:hidden;
  transition:max-height .3s ease;
  background:#15100a;
  border:1px solid var(--gold); border-top:none;
  box-shadow:0 -6px 22px rgba(0,0,0,.55);
}
.zone-drawer.open .zone-drawer-body{ max-height:64vh; overflow-y:auto; }

/* the panel styles its own frame; flatten it inside the drawer */
.zone-drawer-body .zone-info{ margin:0; border:none; border-radius:0; max-width:none; }

/* desktop: align over the offset play column, anchored to the phone box */
@media (min-width:1040px){
  .zone-drawer{
    left: calc(50% - 420px + 240px);
    bottom:auto;
    top: calc(var(--app-h) - 62px);
    transform: translate(-50%, -100%);
    width:480px; max-width:480px;
  }
}

/* ============================================================
   NEW-GAME ONBOARDING: intro + name entry, larger weapon flavor
   ============================================================ */
.intro-box{
  border:1px solid var(--gold);
  border-radius:var(--radius);
  background:rgba(0,0,0,.22);
  padding:16px 16px 18px;
  max-width:460px; margin:0 auto;
}
.intro-lede{
  font-family:var(--font-body);
  font-size:15px; line-height:1.55;
  color:var(--ink); margin:0 0 12px;
}
.intro-namewrap{ margin:16px 0 14px; }
.intro-namelabel{
  display:block;
  font-family:var(--font-display);
  font-size:12px; letter-spacing:1px; text-transform:uppercase;
  color:var(--gold); margin-bottom:6px;
}
.intro-name{
  width:100%; box-sizing:border-box;
  padding:10px 12px;
  font-family:var(--font-display); font-size:18px; letter-spacing:.5px;
  color:var(--gold-bright);
  background:#120d07;
  border:1px solid var(--gold); border-radius:6px;
  outline:none;
}
.intro-name::placeholder{ color:var(--ink-dim); opacity:.7; }
.intro-name:focus{ box-shadow:0 0 0 2px rgba(201,162,39,.35); }
.intro-begin{ width:100%; margin-top:2px; }

/* Weapon-select flavor: a touch larger and clearer than .muted */
.weapon-intro{
  font-family:var(--font-body);
  font-size:14.5px; line-height:1.5;
  color:var(--ink); font-style:italic;
  margin:0 0 14px;
}
.wpick-blurb{
  font-family:var(--font-body);
  font-size:13.5px; line-height:1.45;
  color:var(--ink); font-style:italic;
}

/* ============================================================
   WEAPON-SELECT LAYOUT TWEAKS
   - title clears the status bar (was crammed against it)
   - intro flavor doubled in size
   - the three cards spread evenly down the available page height
   ============================================================ */
.weapon-select{
  display:flex; flex-direction:column;
  box-sizing:border-box;
  min-height: calc(100dvh - 64px - 62px);   /* statusbar -> nav band */
  padding-top:18px;                         /* breathing room under the status bar */
}
@media (min-width:1040px){
  .weapon-select{ min-height: calc(var(--app-h) - 64px - 62px); }
}
.weapon-select .weapon-title{ margin-top:6px; }

.weapon-intro{
  font-family:var(--font-body);
  font-size:28px;            /* doubled from ~14px */
  line-height:1.35;
  color:var(--ink); font-style:italic;
  margin:0 0 18px;
}

.weapon-cards{
  flex:1;
  display:flex; flex-direction:column;
  justify-content:space-evenly;   /* even gaps top/between/bottom */
  gap:12px;
}
.weapon-cards .item-row{
  margin:0;                       /* spacing handled by space-evenly + gap */
  padding:14px 14px;              /* slightly taller cards */
}

/* ============================================================
   ZONE INFO: Level Range column removed; creatures in two columns
   ============================================================ */
.zi-cols.one{ grid-template-columns:1fr; }
.zi-creatures.two-col{ column-count:2; column-gap:20px; }
.zi-creatures.two-col li{
  white-space:normal;        /* allow long names to wrap within a column */
  break-inside:avoid;
  padding-left:12px;
}
@media (max-width:1039px){
  .zi-creatures.two-col{ column-count:2; }   /* keep two columns on narrow too */
}

/* Loot upgrade indicator: green up-arrow shown when a dropped item beats equipped gear */
.up-arrow{ color:#39d353; font-weight:700; font-size:1.05em; margin-left:4px;
  text-shadow:0 0 6px rgba(57,211,83,.55); }

/* ============================================================
   HERO SCREEN (redesigned, locked layout)
   ============================================================ */
#heroPanel{height:100%}
.hs{display:flex; flex-direction:column; gap:5px; height:100%; padding:2px}
.hs-panel{background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--edge);
  border-radius:8px; padding:7px 11px; position:relative; flex:0 0 auto; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,220,150,.05), 0 4px 14px rgba(0,0,0,.35)}
.hs-panel::before{content:''; position:absolute; inset:3px; border:1px solid rgba(201,162,39,.10); border-radius:6px; pointer-events:none}
.hs-sec{font-family:var(--font-display); color:var(--gold); letter-spacing:.12em; font-size:11px; text-transform:uppercase; border-bottom:1px solid var(--edge); padding-bottom:3px; margin:0 0 6px}

.hs-head{display:flex; gap:10px; align-items:flex-start; margin-bottom:7px}
.hs-portrait{width:60px; height:60px; border-radius:50%; flex:0 0 auto; border:2px solid var(--gold);
  background:radial-gradient(circle at 50% 35%, #4a3a25, #1a1510); display:flex; align-items:center; justify-content:center; font-size:27px;
  box-shadow:0 0 14px rgba(201,162,39,.25), inset 0 0 16px rgba(0,0,0,.5); overflow:hidden}
.hs-portrait img{width:100%; height:100%; object-fit:cover}
.hs-id{flex:1; min-width:0}
.hs-name{font-family:var(--font-display); font-size:20px; color:var(--ink); line-height:1}
.hs-sub{color:var(--gold); font-style:italic; font-size:13px; margin-top:1px}
.hs-gold{font-size:11.5px; color:var(--ink-dim); margin-top:4px}
.hs-gold b{color:var(--gold-bright); font-family:var(--font-display)}
.hs-classlist{flex:0 0 auto; display:flex; flex-direction:column; gap:4px}
.hs-cls-chip{display:flex; align-items:center; gap:6px; font-size:11px; background:linear-gradient(180deg,#33271a,var(--bg-2));
  border:1px solid var(--edge); border-radius:5px; padding:3px 8px; min-width:104px}
.hs-cls-chip .ci{color:var(--gold); font-size:11px}
.hs-cls-chip .cn{color:var(--ink-dim); font-family:var(--font-display); letter-spacing:.03em; flex:1}
.hs-cls-chip .cr{color:var(--gold-bright); font-family:var(--font-display); font-weight:600}

.hs-gearwrap{display:grid; grid-template-columns:50px 1fr 50px; gap:8px; align-items:start; padding-bottom:2px}
.hs-slotcol{display:flex; flex-direction:column; gap:6px; position:relative; z-index:5}
.hs-slot{width:50px; height:50px; border-radius:8px; position:relative; cursor:pointer;
  background:radial-gradient(circle at 50% 30%,#33271a,#15110b); border:1px solid var(--edge);
  display:flex; align-items:flex-start; justify-content:center; padding-top:5px; font-size:20px; transition:.15s}
.hs-slot.filled{border-color:var(--edge-hi); box-shadow:inset 0 0 12px rgba(201,162,39,.12)}
.hs-slot.filled:hover, .hs-slot.show-tip{border-color:var(--gold); box-shadow:0 0 12px rgba(201,162,39,.4); transform:translateY(-1px); z-index:20}
.hs-slot .hs-nm{position:absolute; bottom:2px; left:0; right:0; text-align:center; font-size:7px; color:var(--ink-dim); white-space:nowrap; letter-spacing:.02em; text-transform:uppercase; text-shadow:0 1px 2px #000}
.hs-slot.hs-invbtn{cursor:pointer; border-style:dashed; border-color:var(--gold); color:var(--gold-bright);
  background:radial-gradient(circle at 50% 30%,#2c2415,#15110b)}
.hs-slot.hs-invbtn:hover{box-shadow:0 0 12px rgba(201,162,39,.45)}
.hs-slot.hs-invbtn .hs-nm{color:var(--gold)}
.hs-slot .hs-tip{position:absolute; z-index:60; bottom:58px; left:50%; transform:translateX(-50%) translateY(4px); width:160px;
  background:#15110b; border:1px solid var(--gold); border-radius:7px; padding:8px 10px; opacity:0; pointer-events:none; transition:.15s; box-shadow:0 8px 24px #000a; text-align:left}
.hs-slot.filled:hover .hs-tip, .hs-slot.show-tip .hs-tip{opacity:1; transform:translateX(-50%) translateY(0)}
.hs-slotcol:first-child .hs-slot .hs-tip{left:0; transform:translateX(0) translateY(4px)}
.hs-slotcol:first-child .hs-slot.filled:hover .hs-tip, .hs-slotcol:first-child .hs-slot.show-tip .hs-tip{transform:translateX(0) translateY(0)}
.hs-slotcol:last-child .hs-slot .hs-tip{left:auto; right:0; transform:translateX(0) translateY(4px)}
.hs-slotcol:last-child .hs-slot.filled:hover .hs-tip, .hs-slotcol:last-child .hs-slot.show-tip .hs-tip{transform:translateX(0) translateY(0)}
/* The TOP slot in each column (Head / Weapon) opens DOWNWARD so it doesn't go off-screen */
.hs-slotcol .hs-slot:first-child .hs-tip{ bottom:auto; top:58px; }
.hs-slotcol:first-child .hs-slot:first-child .hs-tip{ left:0; right:auto; }
.hs-slotcol:last-child .hs-slot:first-child .hs-tip{ left:auto; right:0; }
.hs-tip .tn{font-family:var(--font-display); color:var(--gold-bright); font-size:12.5px; margin-bottom:4px; line-height:1.15}
.hs-tip .tn .rar{font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; display:block; color:var(--gold); margin-bottom:1px}
.hs-tip .ts{font-size:11.5px; color:#cfc8b6; display:flex; justify-content:space-between; margin:3px 0; gap:8px; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; letter-spacing:.02em}
.hs-tip .ts .sv{color:#dde0e6; font-weight:600; font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.hs-centerfig{border:1px solid var(--edge); border-radius:8px; min-height:150px; position:relative; z-index:1;
  background:radial-gradient(60% 50% at 50% 25%, #33271a 0%, transparent 70%), linear-gradient(180deg,#1f1810,#15110b);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:6px; position:relative; overflow:hidden}
.hs-fig{font-size:48px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.hs-cls{font-family:var(--font-display); color:var(--gold); letter-spacing:.16em; font-size:12px; text-align:center}
.hs-banner{position:absolute; top:0; left:12px; width:26px; height:40px; background:linear-gradient(180deg,var(--crimson),#5a1a12); clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); display:flex; align-items:center; justify-content:center; font-size:13px}

.hs-bars{margin-top:6px; padding-top:7px; border-top:1px solid var(--edge); flex:0 0 auto}
.hs-bar-row{display:flex; align-items:center; margin:4px 0}
.hs-bar{flex:1 1 auto; height:16px; min-height:16px; border-radius:4px; position:relative; overflow:hidden; border:1px solid #00000060}
.hs-fill{position:absolute; left:0; top:0; height:100%; border-radius:3px 0 0 3px}
.hs-blabel{position:absolute; left:7px; top:0; bottom:0; display:flex; align-items:center; font-family:var(--font-display); font-size:9px; color:#fff; opacity:.85; text-shadow:0 1px 2px #000; z-index:3; pointer-events:none}
.hs-txt{position:absolute; left:0; right:0; top:0; bottom:0; width:100%; display:flex; align-items:center; justify-content:center; text-align:center; font-size:9.5px; color:#fff; text-shadow:0 1px 2px #000, 0 0 3px #000; font-family:var(--font-display); z-index:2; pointer-events:none}
.hs-bar.hpb{background:var(--hp-bg)} .hs-fill.hpf{background:#a13226; background:linear-gradient(180deg,#c2412f,#7e2118)}
.hs-bar.mpb{background:var(--mana-bg)} .hs-fill.mpf{background:#3b6ea5; background:linear-gradient(180deg,#5288c4,#2c557f)}
.hs-bar.xpb{background:#2a2017} .hs-fill.xpf{background:var(--gold); background:linear-gradient(180deg,var(--gold-bright),var(--gold))}

.hs-attrs{display:flex; gap:6px}
.hs-attr{flex:1; background:linear-gradient(180deg,#33271a,var(--bg-2)); border:1px solid var(--edge);
  border-radius:6px; padding:6px 3px 5px; text-align:center; cursor:pointer; position:relative}
.hs-attr .ico{font-size:13px}
.hs-attr .v{display:flex; align-items:center; justify-content:center; gap:5px; line-height:1.05; margin-top:1px}
.hs-attr .v .base{font-family:var(--font-display); font-size:17px; color:var(--gold-bright)}
.hs-attr .v .gear{display:flex; flex-direction:column; align-items:center; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; color:#dde0e6; line-height:1}
.hs-attr .v .gear .amt{font-size:10px}
.hs-attr .v .gear .lab{font-size:7px; letter-spacing:.08em; text-transform:uppercase; opacity:.9}
.hs-attr .v .plus{font-size:11px; color:#1a1510; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); border:none; border-radius:4px; cursor:pointer; padding:0 4px; font-family:var(--font-display)}
.hs-attr .k{font-family:var(--font-display); font-size:8.5px; letter-spacing:.05em; color:var(--gold-bright); text-transform:uppercase; margin-top:2px}
.hs-attr .atip{display:none}
.hs-attr:hover .atip, .hs-attr.show-tip .atip{opacity:1}
.hs-attr.sel{border-color:var(--gold); box-shadow:inset 0 0 0 1px rgba(201,162,39,.4)}
.hs-pts{display:inline-block; font-family:var(--font-display); font-size:8.5px; letter-spacing:.08em; color:var(--gold); border:1px solid var(--edge); border-radius:4px; padding:1px 6px; margin-left:6px; text-transform:uppercase}

.hs-cstats{display:grid; grid-template-columns:1fr 1fr; gap:3px 10px}
.hs-cstat{display:flex; justify-content:space-between; align-items:baseline; padding:3px 6px; border-radius:5px; cursor:pointer; transition:.13s; border:1px solid transparent}
.hs-cstat:hover{background:#ffffff08}
.hs-cstat.sel{background:rgba(201,162,39,.10); border-color:var(--edge-hi)}
.hs-cstat .k{font-size:12px; color:var(--ink-dim)}
.hs-cstat .v{font-family:var(--font-display); font-size:14px; color:var(--ink)}
.hs-cstat .v small{color:var(--mana); font-size:10px}
.hs-explain{margin-top:6px; background:rgba(59,110,165,.08); border:1px solid #3b6ea540; border-radius:6px; padding:7px 10px; font-size:11.5px; color:var(--ink-dim)}
.hs-explain .eh{font-family:var(--font-display); display:block; margin-bottom:2px}
.hs-explain.def .eh{color:var(--mana)} .hs-explain.atk .eh{color:var(--crimson-bright)}
.hs-explain.crit .eh, .hs-explain.block .eh, .hs-explain.dodge .eh{color:var(--gold-bright)} .hs-explain.spell .eh{color:#9a7fd0}
.hs-explain em{color:var(--ink)}
.hs-drbar{height:7px; background:var(--mana-bg); border-radius:3px; overflow:hidden; margin-top:6px; border:1px solid #00000050}
.hs-drbar i{display:block; height:100%; background:linear-gradient(90deg,#3b6ea5,#5fa0d8); transition:width .25s}

/* Hero screen fills the contained area and locks (no scroll). */
body.panel-scroll .wrap:has(#heroPanel[style*="display: block"]),
body.panel-scroll .wrap:has(#heroPanel[style*="display:block"]){ overflow:hidden; }
#heroPanel{ height:100%; }

/* ============================================================
   INVENTORY SCREEN (tabbed row list)
   ============================================================ */
.inv-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.inv-title{font-family:var(--font-display); color:var(--gold-bright); letter-spacing:.14em; font-size:18px}
.inv-gold{font-family:var(--font-display); font-size:13px; color:var(--ink-dim)}
.inv-gold b{color:var(--gold-bright)}
.inv-tabs{display:flex; gap:5px; margin-bottom:8px}
.inv-tab{flex:1; font-family:var(--font-display); font-size:10px; letter-spacing:.02em; color:var(--ink-dim);
  background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--edge); border-radius:6px;
  padding:8px 2px; cursor:pointer; text-align:center; text-transform:uppercase; transition:.13s}
.inv-tab.active{color:#1a1510; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); border-color:var(--gold-bright)}
.inv-tab .tc{font-size:9px; opacity:.7}
.inv-list{display:flex; flex-direction:column}
.inv-empty{color:var(--ink-dim); font-style:italic; text-align:center; padding:26px 10px; font-size:13px}
.iv-row{display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; margin-bottom:6px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--edge); position:relative}
.iv-row.up{border-color:#3e5a2e; box-shadow:inset 3px 0 0 var(--green)}
.iv-ic{width:40px; height:40px; flex:0 0 auto; border-radius:8px; border:1.5px solid var(--edge);
  display:flex; align-items:center; justify-content:center; font-size:22px; background:radial-gradient(circle at 50% 30%,#33271a,#15110b)}
.iv-body{flex:1; min-width:0}
.iv-nm{font-size:13.5px; line-height:1.15; display:flex; align-items:center; gap:5px; flex-wrap:wrap}
.iv-arr{color:var(--green); font-size:11px}
.iv-eqd{color:var(--gold-bright); font-size:10px; border:1px solid var(--edge-hi); border-radius:3px; padding:0 3px; font-family:var(--font-display); letter-spacing:.04em}
.iv-reqbad{color:#e0584a; font-size:10px; font-family:var(--font-display); letter-spacing:.04em; border:1px solid #8c2b1f; background:rgba(140,43,31,.18); border-radius:3px; padding:0 4px; white-space:nowrap}
.iv-cnt{color:var(--gold-bright); font-family:var(--font-display); font-size:12px}
.iv-meta{font-size:11px; color:var(--ink-dim); margin-top:2px}
.iv-meta .iv-req{color:#e0584a}
.iv-lock{flex:0 0 auto; width:30px; height:30px; border-radius:7px; border:1px solid var(--edge);
  background:var(--panel-hi); color:var(--ink-dim); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.13s}
.iv-lock.on{color:var(--gold-bright); border-color:var(--edge-hi); background:rgba(201,162,39,.12)}
.iv-lock.forced{color:var(--gold-bright); border-color:var(--edge-hi); background:rgba(201,162,39,.12); cursor:not-allowed; opacity:.8}
.iv-acts{display:flex; flex-direction:column; gap:5px; flex:0 0 auto}
.iv-acts button{font-family:var(--font-display); font-size:11px; padding:6px 10px; border-radius:6px; cursor:pointer; border:1px solid var(--edge); min-width:64px}
.iv-equip{color:#1a1510; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); border-color:var(--gold-bright)}
.iv-equip.alt{background:linear-gradient(180deg,#b9a96a,#8f7d44)}
.iv-equip:disabled{opacity:.4; cursor:not-allowed; filter:grayscale(.5)}
.iv-sell{color:var(--ink-dim); background:var(--panel)}
.iv-sell:disabled{opacity:.35; cursor:not-allowed}
.inv-bulk{margin-top:8px; display:flex; gap:8px; align-items:center}
.iv-sellall{font-family:var(--font-display); font-size:11px; color:#e0a89e; background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid #5a2018; border-radius:6px; padding:9px 14px; cursor:pointer}
.inv-hint{font-size:11px; color:var(--ink-dim); flex:1; text-align:right; font-style:italic}

/* equipped item rows in inventory: subtle gold tint */
.iv-row.equipped{border-color:var(--edge-hi); box-shadow:inset 3px 0 0 var(--gold)}

/* level-up CTA banner on the victory screen */
.levelup-banner.clickable{cursor:pointer; transition:.15s; user-select:none}
.levelup-banner.clickable:hover{background:rgba(201,162,39,.18); box-shadow:0 0 14px rgba(201,162,39,.3)}
.levelup-banner .cta{
  display:inline-block; margin-top:6px; padding:7px 16px; border-radius:6px;
  font-size:13px; font-weight:700; letter-spacing:.1em;
  color:#fff3d6; background:linear-gradient(180deg,#c8341f,#8a1410);
  border:1px solid #5e0d08; text-shadow:0 1px 2px rgba(0,0,0,.6);
  animation:ctaThrob 0.9s ease-in-out infinite;
}
@keyframes ctaThrob{
  0%,100%{ transform:scale(1);    box-shadow:0 0 0 0 rgba(255,90,50,.55), 0 2px 8px rgba(0,0,0,.5) }
  50%    { transform:scale(1.07); box-shadow:0 0 16px 5px rgba(255,90,50,.55), 0 2px 8px rgba(0,0,0,.5) }
}

/* pulsing + allocate buttons while points are unspent */
.hs-attr .plus.pulse{animation:plusGlow 1.1s ease-in-out infinite}
@keyframes plusGlow{0%,100%{box-shadow:0 0 0 0 rgba(232,196,74,.0)}50%{box-shadow:0 0 10px 3px rgba(232,196,74,.65)}}

/* walkthrough tint on the explainer */
.hs-explain.guide{background:rgba(201,162,39,.10); border-color:var(--gold)}

/* PATROL V2: the big patrol button — ON the map, anchored a fixed pixel distance
   above the scene's bottom edge. The scene bottom is pinned to the nav by the band
   calc, so a px anchor cannot drift (the old jump came from a % anchor). Sits just
   above the zone-name drawer tab. */
.patrol-cta{
  /* Lifted into the open meadow band: clears the lower POI pins (dig-site/knight at
     y:74%, subzones at y:62%) and the zone drawer tab. % keeps it clear at any height.
     Centered via margin:auto, NOT transforms (global button rules stomp transforms). */
  position:absolute; left:0; right:0; bottom:42%; margin:0 auto; width:max-content;
  font-family:var(--font-display); font-size:16px; letter-spacing:.1em; white-space:nowrap;
  padding:12px 32px; border-radius:8px; cursor:pointer; z-index:6;
  background:linear-gradient(180deg,#8a1f1f,#5a1010); color:#f2e3c2;
  border:2px solid #3a0c08; box-shadow:0 6px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,170,.25);
}
.patrol-cta:hover{ filter:brightness(1.12) }
.patrol-cta.camp{ background:linear-gradient(180deg,#7a5a1f,#4f3a10); border-color:#33250a }

/* inline Equip on victory loot rows */
.loot-equip{ margin-left:8px; padding:3px 12px; font-size:11px; letter-spacing:.06em;
  font-family:var(--font-display); border-radius:5px; cursor:pointer;
  background:linear-gradient(180deg,#caa53a,#8a6d1d); color:#241c08; border:1px solid #5d490f }
.loot-equip:hover{ filter:brightness(1.1) }

/* rough-camp afflictions strip on the hero explainer */
.afflict-strip{ font-size:12px; color:#d98a6a; border-bottom:1px solid rgba(217,138,106,.3);
  padding-bottom:5px; margin-bottom:6px }
.afflict-strip em{ color:var(--ink-dim); font-style:italic }

/* ============================================================
   CONFIRM MODAL (confirmModal in game.js)
   Replaces native confirm(), which sandboxed iframes (itch.io)
   silently suppress. Overlay centers via flex — NEVER use
   translateX(-50%) centering here (global button transform
   rules fight it; see DEVLOG conventions).
   ============================================================ */
.confirm-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,7,4,0.72);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.confirm-box{
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--gold);
  border-radius:10px;
  box-shadow:0 18px 60px rgba(0,0,0,0.65);
  max-width:420px; width:100%;
  padding:20px 22px;
  text-align:center;
}
.confirm-box h3{
  margin:0 0 10px; color:var(--gold);
  font-variant:small-caps; letter-spacing:0.06em;
}
.confirm-box p{ margin:0 0 16px; color:var(--ink-dim); line-height:1.45; }
.confirm-actions{ display:flex; gap:10px; justify-content:center; }
.confirm-actions button{ min-width:110px; }

/* ============================================================================
   AUTH OVERLAY (auth.js) — full-screen login gate, themed to the game.
   Only ever shown in hosted builds (auth.js with keys configured).
   ========================================================================== */
.auth-overlay{
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(ellipse at 50% 30%, #2a2017 0%, var(--bg) 70%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.auth-card{
  width:min(360px, 92vw);
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--edge); border-radius:10px;
  padding:26px 22px; box-shadow:0 12px 40px rgba(0,0,0,.6);
}
.auth-title{
  font-family:var(--font-display); font-weight:700; letter-spacing:.18em;
  color:var(--gold-bright); text-align:center; font-size:1.5rem;
}
.auth-sub{ color:var(--ink-dim); text-align:center; margin:4px 0 18px; }
.auth-field{ margin-bottom:12px; }
.auth-field label{ display:block; color:var(--ink-dim); font-size:.85rem; margin-bottom:4px; }
.auth-field input{
  width:100%; box-sizing:border-box; padding:10px 12px;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--edge); border-radius:6px;
  font-family:var(--font-body); font-size:1rem;
}
.auth-field input:focus{ outline:none; border-color:var(--gold); }
.auth-err{ color:var(--crimson-bright); min-height:1.2em; font-size:.9rem; margin:4px 0 10px; }
.auth-btn{
  width:100%; padding:11px; cursor:pointer;
  font-family:var(--font-display); font-weight:600; letter-spacing:.06em;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:#1a1510; border:1px solid var(--gold); border-radius:6px;
}
.auth-btn:disabled{ opacity:.6; cursor:wait; }
.auth-links{ display:flex; justify-content:space-between; margin-top:14px; font-size:.88rem; }
.auth-links a{ color:var(--ink-dim); text-decoration:underline; }
.auth-links a:hover{ color:var(--gold-bright); }