/* ============================================================
   Ashfell Embervein — drop-in theme (loads AFTER style.css)
   Grim painterly Soulslike: wet obsidian gloom, one ember light.
   Only recolors / restyles — no layout-breaking changes.
   ============================================================ */

:root{
  /* parchment / warm accents */
  --sand:#caa15a; --sand-dark:#8a6a2e;
  /* obsidian surfaces */
  --stone:#16110d; --stone-light:#221912; --stone-line:#3a2e22;
  /* sulfur-gold heading accent */
  --gold:#e9b441; --gold-dim:#a8801f;
  /* clotted blood-crimson danger */
  --blood:#8e2a1e; --blood-light:#c2452c;
  /* metals + ember-orange interactive accent (via --bronze) */
  --steel:#c8ccd0; --bronze:#e8632a;
  /* deep ground + vellum */
  --ink:#0b0a09; --parch:#e8ddc8;
  /* bone-white body text on dark */
  --text:#ece0d0; --muted:#9a8674;
  --good:#7fae5a; --bad:#cf5a4a;
  --shadow:0 10px 36px rgba(0,0,0,.6);
}

/* ---- body: ember-grazed obsidian wall behind everything ---- */
body{
  font-family:var(--bodyFamily,"EB Garamond",Georgia,serif);
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(232,99,42,.10) 0%, transparent 58%),
    linear-gradient(180deg, rgba(11,10,9,.86) 0%, rgba(8,7,6,.94) 100%),
    url('images/web_bg.png');
  background-size:auto, auto, cover;
  background-position:center top, center, center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* ---- display type: carved Cinzel caps with ember glow ---- */
.logo,.brand,h2.section,.champ-name,.loc-name,.preview-name,.create-logo,.combat-result{
  font-family:"Cinzel",serif;
  letter-spacing:.10em;
  text-shadow:0 2px 0 #000, 0 0 22px rgba(233,180,65,.28);
}
.logo{letter-spacing:.20em;text-shadow:0 2px 0 #000,0 0 30px rgba(233,180,65,.40),0 0 50px rgba(232,99,42,.18)}
.brand{letter-spacing:.16em}
.preview-name,.champ-name,.loc-name{text-shadow:0 1px 0 #000,0 0 18px rgba(233,180,65,.30)}
.tagline{font-family:var(--bodyFamily,"EB Garamond",Georgia,serif)}

/* ===================== AUTH / CREATE backdrops ===================== */
#auth,#create{
  background:
    linear-gradient(180deg, rgba(9,8,7,.72) 0%, rgba(9,8,7,.80) 45%, rgba(7,6,5,.92) 100%),
    url('images/web_login.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.auth-card,.create-form{
  background:rgba(18,13,10,.90);
  border:1px solid var(--stone-line);
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(233,180,65,.06),inset 0 0 40px rgba(0,0,0,.5);
}
.create-preview{
  background:
    linear-gradient(180deg, rgba(36,26,16,.92), rgba(20,15,10,.94)),
    url('images/web_panel.png');
  background-size:cover;
  border:1px solid var(--gold-dim);
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(233,180,65,.12);
}

/* ===================== PANELS ===================== */
.panel{
  background:
    linear-gradient(180deg, rgba(28,21,15,.82), rgba(18,13,10,.86)),
    url('images/web_panel.png');
  background-size:cover;
  border:1px solid var(--stone-line);
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(233,180,65,.04);
}

/* ===================== BUTTONS ===================== */
.btn{
  background:linear-gradient(180deg,#241a12,#1a130d);
  border:1px solid var(--stone-line);
  box-shadow:inset 0 1px 0 rgba(233,180,65,.06);
  transition:.16s;
}
.btn:hover{
  filter:brightness(1.12);
  border-color:var(--bronze);
  box-shadow:inset 0 1px 0 rgba(233,180,65,.10),0 0 16px rgba(232,99,42,.22);
}
.btn.primary{
  background:linear-gradient(180deg,var(--blood-light),var(--blood));
  border-color:#5e1a12;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 16px rgba(142,42,30,.35);
}
.btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 22px rgba(194,69,44,.5)}
.btn.gold{
  background:linear-gradient(180deg,var(--gold),var(--gold-dim));
  border-color:#7a5c12;color:#241803;
  text-shadow:0 1px 0 rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 18px rgba(233,180,65,.30);
}
.btn.gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 26px rgba(233,180,65,.5)}

/* ---- tabs ---- */
.tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.tab:hover{color:var(--bronze)}

/* ---- topbar ---- */
.topbar{
  background:rgba(11,10,9,.92);
  border-bottom:1px solid var(--stone-line);
  box-shadow:0 6px 24px rgba(0,0,0,.5);
}

/* ===================== MAP ===================== */
.map-panel{
  background:
    linear-gradient(180deg, rgba(18,13,10,.74), rgba(12,9,7,.80)),
    url('images/web_map.png');
  background-size:cover;
  background-position:center;
  border:1px solid var(--gold-dim);
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(233,180,65,.08);
}
.worldmap{
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(36,26,16,.55) 0%, rgba(12,9,7,.78) 80%),
    url('images/web_map.png');
  background-size:cover;
  background-position:center;
  border:1px solid var(--stone-line);
}

/* ===================== COMBAT OVERLAY ===================== */
.combat-card{
  background:
    linear-gradient(180deg, rgba(36,26,16,.94), rgba(18,13,10,.96)),
    url('images/web_panel.png');
  background-size:cover;
  border:1px solid var(--gold-dim);
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(233,180,65,.10);
}
.vs{color:var(--blood-light);text-shadow:0 0 14px rgba(194,69,44,.6)}
.combat-result{letter-spacing:.06em}

/* form input focus picks up the gold accent (already var-driven; nudge glow) */
form input:focus{border-color:var(--gold-dim);box-shadow:0 0 0 2px rgba(233,180,65,.16)}

/* selected pick / equipped: warm ember-gold emphasis (already var-driven) */
.pick.sel{box-shadow:0 0 0 1px var(--gold),0 0 18px rgba(233,180,65,.22)}
/* ---- heraldic crest mark (web_crest) ---- */
.crest-mark{display:block;width:118px;height:118px;margin:0 auto .5rem;border-radius:50%;
  object-fit:cover;box-shadow:0 6px 24px rgba(0,0,0,.6),0 0 26px rgba(232,99,42,.22);
  border:1px solid var(--gold-dim)}
.brand{display:inline-flex;align-items:center}
.brand-crest{height:28px;width:28px;border-radius:50%;object-fit:cover;margin-right:.5rem;
  border:1px solid var(--gold-dim);filter:drop-shadow(0 0 6px rgba(233,180,65,.4))}
.create-logo{margin-top:.4rem}

/* ===================== CHARACTER PORTRAITS (AI avatars) ===================== */
.champ{align-items:flex-start}
.portrait-col{display:flex;flex-direction:column;gap:.55rem;align-items:center}
.champ .portrait{position:relative;width:240px;height:280px;border-radius:14px;overflow:hidden;
  border:1px solid var(--stone-line);box-shadow:var(--shadow),inset 0 0 0 1px rgba(233,180,65,.08)}
.avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem;background:#15110d;color:var(--gold-dim)}
.portrait.conjuring .avatar-img,.portrait.conjuring svg{filter:brightness(.45) blur(1px)}
.conjure-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;background:rgba(10,8,6,.6);color:var(--gold);text-align:center;padding:1rem}
.conjure-veil small{color:var(--sand);font-style:italic}
.ember-spin{width:36px;height:36px;border-radius:50%;border:3px solid rgba(233,180,65,.18);
  border-top-color:var(--gold);animation:emberspin .8s linear infinite;box-shadow:0 0 18px rgba(232,99,42,.55)}
@keyframes emberspin{to{transform:rotate(360deg)}}
.reroll-btn{white-space:nowrap}
.opt{color:var(--muted);font-weight:400;font-size:.78rem}
/* avatar fills combat/arena .fp frames (reuses .fp-mon sizing) */
.fp .avatar-img{width:100%;height:100%;object-fit:cover}

/* ===================== ITEM ART ICONS ===================== */
.item-ico{width:52px;height:52px;flex:none;border-radius:9px;overflow:hidden;border:1px solid var(--stone-line);
  background:#120d09;display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  box-shadow:inset 0 0 12px rgba(0,0,0,.6)}
.item-ico img{width:100%;height:100%;object-fit:cover}
.itemrow.equipped .item-ico{border-color:var(--gold-dim);box-shadow:0 0 12px rgba(233,180,65,.25)}
@media(max-width:560px){.champ{align-items:center}}

/* ===================== LARGER LIVE MAP ===================== */
.map-stage{position:relative;height:64vh;min-height:440px;padding:0;overflow:hidden;border-radius:14px;
  background:linear-gradient(rgba(10,8,6,.30),rgba(10,8,6,.55)),url('images/web_map.png');
  background-size:cover;background-position:center;box-shadow:var(--shadow),inset 0 0 80px rgba(0,0,0,.6)}
.worldmap-xl{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-legend{position:absolute;left:0;right:0;bottom:6px;margin:0;text-align:center;color:var(--sand);
  font-size:.74rem;text-shadow:0 1px 3px #000;pointer-events:none}
.map-fog{position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:screen;
  background:radial-gradient(160px 100px at 22% 28%,rgba(150,130,90,.12),transparent 70%),
             radial-gradient(200px 120px at 72% 64%,rgba(110,95,70,.12),transparent 70%);
  animation:fogdrift 24s ease-in-out infinite alternate}
@keyframes fogdrift{0%{transform:translate(0,0)}100%{transform:translate(3%,-2%)}}
.worldmap-xl .medge{stroke:#6b5535;stroke-width:.5;stroke-linecap:round;opacity:.65}
.worldmap-xl .medge.live{stroke:var(--gold);stroke-width:.85;opacity:1;stroke-dasharray:2 1.6;animation:dashflow 1s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-3.6}}
.worldmap-xl .mnode{cursor:pointer}
.worldmap-xl .mring{fill:none;stroke:#5b4a30;stroke-width:.7}
.worldmap-xl .mnode.visited .mring{stroke:var(--bronze)}
.worldmap-xl .mnode.reachable .mring{stroke:var(--gold);stroke-width:1.1;filter:drop-shadow(0 0 2px rgba(233,180,65,.8))}
.worldmap-xl .mnode.current .mring{stroke:var(--gold);stroke-width:1.4}
.worldmap-xl .fog-medallion{fill:#1b160f;stroke:#3a2e20;stroke-width:.6;stroke-dasharray:1.5 1.2}
.worldmap-xl .qmark{fill:#6b5d44;font-size:6px;text-anchor:middle;font-weight:700}
.worldmap-xl .mtype{font-size:4px;text-anchor:middle}
.worldmap-xl .mlabel{fill:var(--text);font-size:3.1px;text-anchor:middle;font-family:"Cinzel",serif;
  paint-order:stroke;stroke:#000;stroke-width:.7px}
.worldmap-xl .mnode.fog .mlabel{fill:var(--muted)}
.worldmap-xl .mnode:hover .mring{stroke:#ffd96b}
.worldmap-xl .mhalo{fill:none;stroke:var(--gold);stroke-width:.6;opacity:.6;animation:mpulse 1.9s ease-in-out infinite}
@keyframes mpulse{0%,100%{opacity:.15;stroke-width:.4}50%{opacity:.85;stroke-width:1}}
#player-marker{transition:transform .9s cubic-bezier(.4,0,.2,1);pointer-events:none}
#player-marker .pm-halo{fill:rgba(232,99,42,.18);animation:pmpulse 1.6s ease-in-out infinite}
#player-marker .pm-ring{fill:none;stroke:var(--gold);stroke-width:1;filter:drop-shadow(0 0 3px rgba(244,197,66,.9))}
@keyframes pmpulse{0%,100%{opacity:.3}50%{opacity:.7}}
.oplayer{transition:transform 1.4s cubic-bezier(.4,0,.2,1)}
.oplayer .op-dot{fill:#d14444;stroke:#000;stroke-width:.4;filter:drop-shadow(0 0 3px rgba(209,68,68,.8));animation:opglow 2s ease-in-out infinite}
@keyframes opglow{0%,100%{opacity:.7}50%{opacity:1}}

/* ===================== THEMED ANIMATIONS (ember graphical profile) ===================== */
/* hit impact -> ember burst + shake; crit -> golden flare */
.hit-flash{animation:emberhit .42s ease-out}
@keyframes emberhit{0%{filter:none;transform:none}22%{filter:drop-shadow(0 0 16px var(--bronze)) brightness(1.5);transform:translateX(-2px)}45%{transform:translateX(2px)}100%{filter:none;transform:none}}
.combat-log .line.crit{color:var(--gold);text-shadow:0 0 10px rgba(244,197,66,.5)}
.combat-log .line.end{text-shadow:0 0 14px rgba(244,197,66,.4)}
.bar.hp>span{background:linear-gradient(90deg,#6e1f12,var(--blood-light));box-shadow:0 0 8px rgba(209,68,68,.4)}
.bar>span{transition:width .55s cubic-bezier(.4,0,.2,1)}
.vs{animation:vspulse 2s ease-in-out infinite}
@keyframes vspulse{0%,100%{text-shadow:0 0 12px rgba(209,68,68,.4)}50%{text-shadow:0 0 22px rgba(232,99,42,.7)}}
/* floating damage numbers */
.fighter-col{position:relative}
.dmg-float{position:absolute;left:50%;top:26%;transform:translateX(-50%);font-family:"Cinzel",serif;font-weight:700;
  font-size:1.4rem;color:#ff6a55;text-shadow:0 0 8px #000,0 2px 4px #000;pointer-events:none;z-index:5;animation:dmgfloat 1s ease-out forwards}
.dmg-float.crit{color:var(--gold);font-size:2rem;text-shadow:0 0 16px rgba(244,197,66,.9),0 2px 4px #000}
.dmg-float.miss{color:var(--muted);font-size:1.1rem;font-style:italic}
@keyframes dmgfloat{0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.7)}20%{opacity:1;transform:translateX(-50%) translateY(-2px) scale(1.1)}100%{opacity:0;transform:translateX(-50%) translateY(-38px) scale(1)}}
/* victory/defeat banner flourish */
.combat-result{animation:resultIn .5s ease-out}
@keyframes resultIn{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
/* view transition: ember-tinted rise */
.view{animation:viewrise .3s ease}
@keyframes viewrise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===================== AMBIENT EMBER LAYER ===================== */
.screen{position:relative;z-index:1}
#embers{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#embers .ember{position:absolute;bottom:-12px;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,176,84,.95),rgba(255,120,40,.15));filter:blur(.4px);
  opacity:0;animation:emberrise linear infinite}
@keyframes emberrise{0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.85}80%{opacity:.4}100%{transform:translateY(-104vh) translateX(24px);opacity:0}}

/* ===================== HAPPENINGS (AI events) ===================== */
#happening .hap-card{width:min(560px,94vw);background:linear-gradient(180deg,#2a2017,#15110b);
  border:1px solid var(--gold-dim);border-radius:16px;padding:1.8rem;text-align:center;box-shadow:var(--shadow);animation:resultIn .4s ease-out}
.hap-rune{font-size:2.4rem;margin-bottom:.5rem;filter:drop-shadow(0 0 12px rgba(232,99,42,.5))}
.hap-text{font-family:"EB Garamond",Georgia,serif;font-size:1.16rem;line-height:1.75;color:var(--text);margin-bottom:1rem}
.hap-reward{color:var(--gold);font-weight:700;margin-bottom:1.2rem}
.hap-reward.muted{color:var(--muted);font-weight:400;font-style:italic}
.search-btn{margin-top:.6rem;display:inline-block}

/* ===================== CHRONICLE ===================== */
.focus-panel h3{color:var(--gold);margin-bottom:.2rem}
.focus-row{display:flex;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}
.focus-row input{flex:1;min-width:200px;padding:.7rem .8rem;border-radius:8px;background:#15110d;border:1px solid var(--stone-line);color:var(--text);font:inherit}
.focus-row input:focus{outline:none;border-color:var(--gold-dim);box-shadow:0 0 0 2px rgba(233,180,65,.15)}
.saga-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.9rem;flex-wrap:wrap}
.saga-head h3{color:var(--gold)}
.saga-ch{border-left:2px solid var(--gold-dim);padding:.1rem 0 .5rem 1rem;margin-bottom:1.1rem}
.saga-ch h4{color:var(--gold);font-family:"Cinzel",serif;margin-bottom:.35rem;letter-spacing:.04em;font-size:1.05rem}
.saga-ch p{font-family:"EB Garamond",Georgia,serif;line-height:1.78;color:var(--text)}
.deeds{list-style:none}
.deed{padding:.42rem 0;border-bottom:1px solid var(--stone-line);color:var(--muted);font-size:.92rem}
.deed:last-child{border-bottom:none}
.deed .di{display:inline-block;width:1.5rem;text-align:center}
.deed.kill{color:var(--text)} .deed.level{color:var(--gold)} .deed.defeat{color:var(--bad)} .deed.happening{color:var(--sand)}

/* ===================== INTERACTIVE COMBAT UI ===================== */
.combat-title{font-family:"Cinzel",serif;color:var(--gold);text-align:center;font-size:1.4rem;letter-spacing:.06em;margin-bottom:.2rem}
.prefight-card{padding:1.6rem}
.prefight-sub{text-align:center;color:var(--muted);margin-bottom:1rem}
.pf-h{color:var(--sand);margin:.9rem 0 .5rem;font-size:.95rem;letter-spacing:.03em}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem}
.pf-opt{display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center;cursor:pointer;
  background:#15110d;border:1px solid var(--stone-line);border-radius:10px;padding:.8rem .5rem;color:var(--text);font:inherit;transition:.15s}
.pf-opt:hover{border-color:var(--gold-dim);transform:translateY(-1px)}
.pf-opt.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 16px rgba(233,180,65,.18);background:#1d160e}
.pf-ico{font-size:1.7rem}
.pf-opt b{font-size:.92rem}
.pf-opt small{color:var(--muted);font-size:.74rem;line-height:1.3}

/* stance + buffs on fighter panels */
.stance-chip{font-size:.95rem;margin-left:.2rem;vertical-align:middle}
.buffs{margin-top:.3rem;min-height:1.1rem;display:flex;gap:.25rem;justify-content:center}
.buff{font-size:.85rem;filter:drop-shadow(0 0 4px rgba(233,180,65,.5))}

/* action bar */
.action-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;padding:1rem 1.2rem;border-top:1px solid var(--stone-line)}
.act-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--stone-light);border:1px solid var(--stone-line);
  color:var(--text);border-radius:9px;padding:.55rem .8rem;font:inherit;font-weight:600;cursor:pointer;transition:.12s}
.act-btn:hover:not(:disabled){filter:brightness(1.18);transform:translateY(-1px)}
.act-btn:disabled{opacity:.4;cursor:not-allowed}
.act-btn.primary{background:linear-gradient(180deg,var(--blood-light),var(--blood));border-color:#7a1f1f;color:#fff}
.act-btn.skill{background:linear-gradient(180deg,#3a2c18,#241a10);border-color:var(--gold-dim)}
.act-btn.skill.cooling{filter:grayscale(.5)}
.act-btn.flee{background:transparent}
.act-ico{font-size:1.1rem}
.act-lbl{font-size:.9rem}
.stance-switch{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .5rem;border:1px solid var(--stone-line);border-radius:9px;background:#15110d}
.ss-lbl{color:var(--muted);font-size:.78rem;margin-right:.2rem}
.ss-btn{background:transparent;border:1px solid transparent;border-radius:6px;padding:.25rem .4rem;font-size:1.05rem;cursor:pointer;transition:.12s}
.ss-btn:hover{background:var(--stone-light)}
.ss-btn.on{border-color:var(--gold);box-shadow:0 0 8px rgba(233,180,65,.4)}
.combat-log .line.heal{color:var(--good)}
.combat-log .line.flee{color:var(--muted);font-style:italic}
.dmg-float.heal{color:var(--good)}
@media(max-width:560px){.act-lbl{display:none}.act-btn{padding:.55rem .65rem}}

/* ===================== BAG / LOOT / AUCTION ===================== */
.loot-row{display:flex;align-items:center;gap:1rem;padding:.7rem;border:1px solid var(--stone-line);
  border-left:3px solid var(--rar,var(--stone-line));border-radius:10px;margin-bottom:.6rem;background:rgba(21,17,13,.6)}
.loot-row .item-ico{width:58px;height:58px}
.loot-meta{flex:1;min-width:0}
.loot-meta small{color:var(--muted);display:block;margin-top:.15rem}
.loot-blurb{color:var(--sand);font-size:.82rem;font-style:italic;margin-top:.25rem;opacity:.85;line-height:1.4}
.loot-actions{display:flex;flex-direction:column;gap:.4rem;align-items:flex-end;white-space:nowrap}
.tag.rar{background:transparent;color:var(--good);padding:0;margin-left:.4rem;font-size:.74rem}
.act-btn.item{background:linear-gradient(180deg,#2a3a2c,#18221a);border-color:var(--good)}
@media(max-width:560px){.loot-row{flex-wrap:wrap}.loot-actions{flex-direction:row;width:100%;justify-content:flex-start}}

/* ===================== UI ICONS (generated, replace emoji) ===================== */
.ui-ico{height:1.15em;width:1.15em;object-fit:contain;vertical-align:-0.22em;display:inline-block;border-radius:3px;filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.purse .ui-ico{height:1.3em;width:1.3em;vertical-align:-0.3em}
.statline .k .ui-ico{margin-right:.35rem}

/* ===================== SUB-LOCATIONS (nested map) ===================== */
.sub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin-top:.5rem}
.sub-card{display:flex;flex-direction:column;text-align:left;cursor:pointer;background:#15110d;border:1px solid var(--stone-line);
  border-radius:10px;overflow:hidden;color:var(--text);font:inherit;padding:0;transition:.15s}
.sub-card:hover{border-color:var(--gold-dim);transform:translateY(-2px)}
.sub-card.current{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 16px rgba(233,180,65,.18)}
.sub-thumb{aspect-ratio:16/9;background:#0e0b08;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sub-thumb img{width:100%;height:100%;object-fit:cover}
.sub-glyph{font-size:1.9rem;opacity:.5}
.sub-cap{padding:.5rem .6rem}
.sub-cap b{font-size:.9rem;display:block;line-height:1.2}
.sub-cap small{color:var(--muted);font-size:.72rem}
.danger{color:var(--blood-light);font-weight:700;font-size:.82em;margin-left:.2rem}

/* ===================== INTERIOR (two-level) MAP ===================== */
.interior-stage{background:linear-gradient(rgba(10,8,6,.4),rgba(10,8,6,.66)),url('images/web_bg.png');background-size:cover;background-position:center}
.worldmap-xl.interior .mlabel{font-size:3.3px}
.worldmap-xl .hub-node{fill:#2a2017;stroke:var(--gold-dim);stroke-width:.6}
.worldmap-xl .danger-tag{fill:var(--blood-light);font-size:2.7px;text-anchor:middle;font-weight:700;paint-order:stroke;stroke:#000;stroke-width:.6px}
.map-stage h2 .btn{vertical-align:middle}

/* ============================================================
   SQUARE & FLAT REDESIGN + FULLSCREEN + MOBILE (appended last)
   Requested overhaul: kill the rounded/glossy look, go square &
   flat, make sub-pages fullscreen, and make everything usable
   on a phone. Also stages styles for the new Invest / Timeline /
   Other-Champions features.
   ============================================================ */
:root{ --radius:2px; }

/* ---- square corners everywhere (the flat aesthetic) ---- */
.btn,.auth-card,.auth-tabs,.auth-tabs .tab,form input,.create-form,.pick,.create-preview,
.purse,.panel,.bar,.itemrow,.tag,.foe,.foe .fp,.combat-card,.artbox,.worldmap,.worldmap-xl,
#toast,.fp-mon,.crest-mark,.brand-crest,.champ .portrait,.item-ico,.map-stage,.ui-ico,
#happening .hap-card,.focus-row input,.pf-opt,.act-btn,.stance-switch,.ss-btn,.loot-row,
.sub-card,.sub-thumb,.preview-portrait,.hub-node,.avatar-img,.art-img,.artbox,
.invest-card,.inv-active,.inv-bar,.iv-stake input,.tl-card,.tl-thumb,.other-card,
.other-head .op,.other-tl img,.cv-card,.seg,.seg-btn{
  border-radius:var(--radius) !important;
}

/* ---- flatten the glossy buttons/chips (keep ember identity, drop the sheen) ---- */
.btn{background:#1d150e;box-shadow:none}
.btn:hover{filter:brightness(1.14);border-color:var(--bronze);box-shadow:none}
.btn.primary{background:var(--blood);border-color:#5e1a12;box-shadow:none}
.btn.primary:hover{background:var(--blood-light);box-shadow:none}
.btn.gold{background:var(--gold);border-color:#7a5c12;box-shadow:none}
.btn.gold:hover{background:#f2c452;box-shadow:none}
.act-btn.primary{background:var(--blood)}
.purse{background:#14100b;box-shadow:none}

/* ---- fullscreen sub-pages (no centered column) ---- */
#views{max-width:none;margin:0}

/* ============================================================
   FLAT SVG ICON SYSTEM (inline svg replaces emoji/raster icons)
   ============================================================ */
.svg-ico{width:1.15em;height:1.15em;display:inline-block;vertical-align:-0.2em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svg-ico.solid{fill:currentColor;stroke:none}
.svg-ico.gold{color:var(--gold)}
.purse .svg-ico{width:1.3em;height:1.3em;vertical-align:-0.28em;color:var(--gold)}
.statline .k .svg-ico{margin-right:.4rem;color:var(--sand)}
h3 .svg-ico,h4 .svg-ico{margin-right:.35rem;vertical-align:-0.16em;color:var(--gold)}
.price .svg-ico,.iv-tag .svg-ico{color:var(--gold)}
/* map marker glyphs (drawn inside the world-map svg, in map units) */
.mglyph{fill:currentColor;stroke:none}
.mnode.city .mglyph{color:var(--gold)}
.mnode.cave .mglyph{color:#d98a4a}
.mnode.wild .mglyph{color:#8bbf5f}
.mnode.fog .mglyph{color:var(--muted);opacity:.85}
.map-legend .svg-ico{width:1em;height:1em;vertical-align:-0.15em}

/* ============================================================
   INVEST (Ventures + Trade Routes)
   ============================================================ */
.inv-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.inv-section{margin-bottom:1.1rem}
.inv-section h3{color:var(--sand);font-family:"Cinzel",serif;letter-spacing:.03em;margin-bottom:.5rem;font-size:1.02rem}
.invest-card{display:flex;align-items:center;gap:1rem;padding:.75rem;border:1px solid var(--stone-line);
  background:rgba(21,17,13,.6);margin-bottom:.55rem;flex-wrap:wrap}
.invest-card .iv-meta{flex:1;min-width:190px}
.invest-card .iv-meta b{color:var(--text)}
.invest-card .iv-meta small{color:var(--muted);display:block;margin-top:.15rem;line-height:1.4}
.iv-tags{margin-top:.25rem;display:flex;gap:.4rem;flex-wrap:wrap}
.iv-tag{font-size:.72rem;padding:.12rem .5rem;border:1px solid var(--stone-line);color:var(--sand)}
.iv-risk-low{color:var(--good);border-color:var(--good)}
.iv-risk-med{color:var(--gold);border-color:var(--gold-dim)}
.iv-risk-high{color:var(--blood-light);border-color:var(--blood)}
.iv-stake{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.iv-stake input{width:104px;padding:.5rem .55rem;background:#15110d;border:1px solid var(--stone-line);color:var(--text);font:inherit}
.route-pick{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.7rem}
.route-pick select{padding:.5rem .55rem;background:#15110d;border:1px solid var(--stone-line);color:var(--text);font:inherit}
.inv-active{display:flex;align-items:center;gap:1rem;padding:.7rem .75rem;border:1px solid var(--stone-line);
  border-left:3px solid var(--gold-dim);background:rgba(21,17,13,.6);margin-bottom:.55rem;flex-wrap:wrap}
.inv-active.ready{border-left-color:var(--good);box-shadow:0 0 16px rgba(127,174,90,.14)}
.inv-active .ia-meta{flex:1;min-width:170px}
.inv-active .ia-meta b{color:var(--text)}
.inv-active .ia-meta small{color:var(--muted);display:block}
.inv-count{font-family:ui-monospace,monospace;color:var(--sand);font-weight:600}
.inv-count.ready{color:var(--good)}
.inv-bar{height:6px;background:#15110d;border:1px solid var(--stone-line);overflow:hidden;margin-top:.35rem;max-width:260px}
.inv-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));transition:width 1s linear}

/* ============================================================
   CHRONICLE TIMELINE (generated scene images)
   ============================================================ */
.tl-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem}
.tl-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem;margin-top:.6rem}
.tl-card{border:1px solid var(--stone-line);overflow:hidden;background:rgba(21,17,13,.6)}
.tl-thumb{aspect-ratio:3/2;background:#0e0b08;overflow:hidden}
.tl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tl-cap{padding:.5rem .6rem}
.tl-cap b{font-size:.9rem;color:var(--gold);display:block;font-family:"Cinzel",serif}
.tl-cap small{color:var(--muted);font-size:.72rem;display:block;margin-top:.15rem}
.tl-pending{display:flex;align-items:center;gap:.7rem;color:var(--gold);padding:.7rem;font-style:italic}

/* ============================================================
   OTHER CHAMPIONS (below the Champion page) + character viewer
   ============================================================ */
.others-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.9rem;margin-top:.6rem}
.other-card{border:1px solid var(--stone-line);background:rgba(21,17,13,.6);padding:.7rem;cursor:pointer;transition:.15s}
.other-card:hover{border-color:var(--gold-dim);transform:translateY(-2px)}
.other-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem}
.other-head .op{width:46px;height:54px;flex:none;overflow:hidden;border:1px solid var(--stone-line)}
.other-head .op img{width:100%;height:100%;object-fit:cover;display:block}
.other-head b{color:var(--gold);display:block;line-height:1.2}
.other-head small{color:var(--muted)}
.other-tl{display:flex;gap:.35rem;overflow-x:auto;padding-bottom:.2rem}
.other-tl img{height:62px;width:92px;object-fit:cover;flex:none;border:1px solid var(--stone-line)}
.other-tl .none{color:var(--muted);font-size:.8rem;font-style:italic;padding:.4rem 0}
.cv-card{width:min(780px,96vw);max-height:92vh;overflow-y:auto;padding:1.4rem;
  background:linear-gradient(180deg,rgba(28,21,15,.97),rgba(14,10,8,.98)),url('images/web_panel.png');
  background-size:cover;border:1px solid var(--gold-dim);box-shadow:var(--shadow)}
.cv-head{display:flex;gap:1rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.cv-head .op{width:88px;height:104px;flex:none;overflow:hidden;border:1px solid var(--stone-line)}
.cv-head .op img{width:100%;height:100%;object-fit:cover}
.cv-close{position:sticky;top:0;float:right}

/* small segmented control (used by Invest tabs / filters) */
.seg{display:inline-flex;border:1px solid var(--stone-line);overflow:hidden;flex-wrap:wrap}
.seg-btn{background:transparent;border:none;border-right:1px solid var(--stone-line);color:var(--muted);
  font:inherit;font-weight:600;padding:.45rem .8rem;cursor:pointer}
.seg-btn:last-child{border-right:none}
.seg-btn.on{background:#241a12;color:var(--gold)}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media(max-width:760px){
  .topbar{flex-wrap:wrap;gap:.45rem;padding:.5rem .7rem}
  .topbar .brand{order:1;font-size:.95rem}
  .topbar .purse{order:2;margin-left:auto}
  .topbar #logoutBtn{order:3}
  .topbar .tabs{order:4;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;gap:.1rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:.15rem}
  .topbar .tabs .tab{white-space:nowrap;flex:0 0 auto;padding:.5rem .7rem}
  #views{padding:.85rem}
  h2.section{font-size:1.18rem}
  .panel{padding:1rem}
  .logo{font-size:2rem;letter-spacing:.12em}
  .create-grid{grid-template-columns:1fr}
  .beast-grid,.lore-grid,.cols-2{grid-template-columns:1fr !important}
  .map-stage{height:56vh;min-height:320px}
  .champ .portrait{width:180px;height:210px}
  .others-strip,.tl-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .combat-arena{padding:.7rem;gap:.45rem}
  .fighter-col .fp{width:92px !important;height:108px}
  .fp-mon{width:92px !important}
  .vs{font-size:1.1rem}
  .itemrow{flex-wrap:wrap}
  .itemrow .meta{flex:1 1 55%}
  .pick-grid{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .record{gap:.7rem;flex-wrap:wrap}
  .others-strip,.tl-strip{grid-template-columns:1fr}
  .invest-card,.inv-active{gap:.6rem}
}

/* ===== polish pass (2026-07): purse bump, panel flash, forge nudge, inline auction form ===== */
@keyframes purse-bump-up{0%{transform:scale(1)}30%{transform:scale(1.16);color:#8fdc7a}100%{transform:scale(1)}}
@keyframes purse-bump-down{0%{transform:scale(1)}30%{transform:scale(1.12);color:#e07a68}100%{transform:scale(1)}}
.purse.bump-up{animation:purse-bump-up .8s ease}
.purse.bump-down{animation:purse-bump-down .8s ease}

@keyframes panel-flash{0%{box-shadow:0 0 0 2px rgba(244,197,66,.65)}100%{box-shadow:0 0 0 2px rgba(244,197,66,0)}}
.panel.flash{animation:panel-flash .8s ease}

@keyframes nudge-pulse{50%{transform:scale(1.05);box-shadow:0 0 18px rgba(244,197,66,.45)}}
.btn.nudge{animation:nudge-pulse .6s ease 2}

.auc-form{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.auc-form input{width:96px;padding:.4rem .5rem;background:rgba(0,0,0,.35);border:1px solid rgba(244,197,66,.35);
  border-radius:6px;color:inherit;font:inherit}
.auc-form input:focus{outline:none;border-color:rgba(244,197,66,.8)}

.price.free{color:#8fdc7a;font-weight:700}
.act-btn.speed{opacity:.75}

/* ===== squared grid map (2026-07-02) ===== */
.worldmap-xl .tile-hit{fill:transparent;stroke:none;cursor:pointer}
.worldmap-xl .fog-tile{fill:#1b160f;stroke:#3a2e20;stroke-width:.5;stroke-dasharray:1.6 1.2}
.worldmap-xl .type-chip{fill:rgba(8,7,5,.85);stroke:#3a2e20;stroke-width:.3}
.worldmap-xl.grid .mlabel{font-size:3.2px}
.worldmap-xl.grid.interior .mlabel{font-size:3.4px}
.worldmap-xl.grid .qmark{font-size:7px}
.worldmap-xl.grid rect.mring{transition:stroke .15s ease}
.worldmap-xl.grid .mnode.current rect.mring{stroke:var(--gold);stroke-width:1.3}
.worldmap-xl.grid .danger-tag{font-size:2.6px}

/* flat glyph sizing in dense contexts */
.pick-ico .svg-ico{width:30px;height:30px;color:var(--gold)}
.act-ico .svg-ico{width:19px;height:19px}
.pf-ico .svg-ico{width:24px;height:24px;color:var(--gold)}
.di .svg-ico{width:14px;height:14px;vertical-align:-3px}
.stance-chip .svg-ico,.buffs .svg-ico{width:13px;height:13px;vertical-align:-2px}
.hap-rune .svg-ico{width:34px;height:34px;color:var(--gold)}
.avatar-fallback .svg-ico{width:55%;height:55%;color:var(--gold-dim,#8a6a2f)}
.loc-strip .svg-ico,.den .svg-ico,.loc-conns .svg-ico,.hereNote .svg-ico{vertical-align:-.18em}
.art-ph .svg-ico{width:34px;height:34px;opacity:.75}

/* interior marker glides faster than the 500ms re-render window */
.worldmap-xl.interior #player-marker{transition-duration:.45s}

/* ============================================================
   LIGHTER PASS (2026-07-02) — raise overall luminance so the
   scene reads clearly; art gets a brightness lift via filter.
   Appended block: later rules override the originals above.
   ============================================================ */
:root{
  --stone:#241b12; --stone-light:#332619; --stone-line:#52412e;
  --text:#f3e9d9; --muted:#b5a488;
  --shadow:0 10px 32px rgba(0,0,0,.45);
}
body{
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(232,99,42,.14) 0%, transparent 58%),
    linear-gradient(180deg, rgba(20,17,14,.68) 0%, rgba(14,12,10,.80) 100%),
    url('images/web_bg.png');
  background-size:auto, auto, cover;
  background-position:center top, center, center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
#auth,#create{
  background:
    linear-gradient(180deg, rgba(14,12,10,.52) 0%, rgba(14,12,10,.60) 45%, rgba(10,9,8,.76) 100%),
    url('images/web_login.png');
  background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;
}
.auth-card,.create-form{
  background:rgba(34,25,17,.90);
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(233,180,65,.08),inset 0 0 26px rgba(0,0,0,.32);
}
.panel{
  background:
    linear-gradient(180deg, rgba(48,36,24,.76), rgba(32,24,16,.80)),
    url('images/web_panel.png');
  background-size:cover;
}
.create-preview{
  background:
    linear-gradient(180deg, rgba(52,38,24,.86), rgba(34,25,16,.88)),
    url('images/web_panel.png');
  background-size:cover;
}
.btn{background:linear-gradient(180deg,#34261a,#261c12)}
.focus-row input,.pf-opt,.iv-stake input,.route-pick select,.auc-form input{background:#241b12}

/* the paintings themselves are moody — lift them uniformly */
#views img,.worldmap-xl image,.fp img,.portrait img,.tl-thumb img,.cv-card img,
.preview-portrait img,.other-tl img,.artbox img,.item-ico img{
  filter:brightness(1.22) contrast(1.03) saturate(1.06);
}
.map-fog{opacity:.5}

/* map: stage + detail panel side by side; panel sticky so no scrolling to use the map */
.map-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1rem;align-items:start}
.map-cols #locPanel{position:sticky;top:.8rem;max-height:calc(100vh - 1.6rem);overflow:auto}
.map-cols .map-stage{height:auto;min-height:420px;aspect-ratio:1.08}
@media(max-width:900px){
  .map-cols{grid-template-columns:1fr}
  .map-cols #locPanel{position:static;max-height:none}
  .map-cols .map-stage{aspect-ratio:auto;height:52vh;min-height:330px}
}

/* character selection screen */
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem;max-width:900px;margin:1.4rem auto 0}
.char-card{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1rem .8rem;
  background:linear-gradient(180deg, rgba(48,36,24,.82), rgba(32,24,16,.86));
  border:1px solid var(--stone-line);border-radius:var(--radius,2px);color:var(--text);font:inherit;cursor:pointer;transition:.15s}
.char-card:hover{border-color:var(--gold);box-shadow:0 0 18px rgba(233,180,65,.25);transform:translateY(-2px)}
.char-card b{font-family:"Cinzel",serif;letter-spacing:.06em}
.char-card small{color:var(--muted);font-size:.8rem;text-align:center}
.cc-portrait{width:120px;height:140px;overflow:hidden;border:1px solid var(--stone-line);border-radius:var(--radius,2px);background:#1b140e}
.cc-portrait img{width:100%;height:100%;object-fit:cover}
.cc-portrait.plus{display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--gold-dim)}
.char-card.new{border-style:dashed}

/* review fixes: viewport-capped map, panel clears the sticky topbar, conjuring veil
   survives the brightness lift, signup/charselect get the login backdrop */
.map-cols .map-stage{max-height:calc(100vh - 140px)}
.map-cols #locPanel{top:4.4rem;max-height:calc(100vh - 5.4rem)}
#views .portrait.conjuring img{filter:brightness(.45) blur(1px)}
#signup,#charselect{
  background:
    linear-gradient(180deg, rgba(14,12,10,.52) 0%, rgba(14,12,10,.60) 45%, rgba(10,9,8,.76) 100%),
    url('images/web_login.png');
  background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;
}

/* ===== UI pass (2026-07-02b): centering, pop, hover-zoom, lightbox, legend ===== */
#signup{align-items:center;justify-content:center;gap:1.4rem;padding:1.5rem}
#charselect{justify-content:center;padding:2.5rem 1.5rem}

/* colors pop: warmer gold, hotter ember, clearer good/bad */
:root{--gold:#f2c14e;--bronze:#f06a2e;--good:#8cc763;--bad:#e0604c;--blood-light:#d14e33}
#views img,.worldmap-xl image,.fp img,.portrait img,.tl-thumb img,.cv-card img,
.preview-portrait img,.other-tl img,.artbox img,.item-ico img,.cc-portrait img{
  filter:brightness(1.24) contrast(1.06) saturate(1.16);
}
#views .portrait.conjuring img{filter:brightness(.45) blur(1px)}

/* every piece of art zooms on hover (frames clip it) and expands on click */
.artbox,.item-ico,.tl-thumb,.cc-portrait,.champ .portrait,.ot-thumb{overflow:hidden}
.artbox img,.item-ico img,.tl-thumb img,.cc-portrait img,.champ .portrait img,.other-tl img{
  transition:transform .25s ease;cursor:zoom-in}
.artbox:hover img,.item-ico:hover img,.tl-thumb:hover img,.cc-portrait:hover img,
.champ .portrait:hover img,.ot-thumb:hover img{transform:scale(1.13)}
#lightbox{position:fixed;inset:0;z-index:200;background:rgba(5,4,3,.9);display:flex;
  align-items:center;justify-content:center;cursor:zoom-out;padding:1.6rem}
#lightbox img{max-width:94vw;max-height:94vh;border:1px solid var(--gold-dim);
  box-shadow:0 20px 80px rgba(0,0,0,.85);border-radius:var(--radius,2px)}
#lightbox.hidden{display:none}

.map-legend{font-size:.95rem;color:var(--text)}
.worldmap-xl.grid .mlabel{font-size:3.5px}

/* champion-screen mini inventory */
.inv-mini{display:flex;flex-wrap:wrap;gap:.55rem}
.inv-slot{position:relative;width:58px;height:58px;border:1px solid var(--rar,var(--stone-line));
  border-radius:var(--radius,2px);background:#1b140e;overflow:hidden}
.inv-slot .item-ico{width:100%;height:100%}
.inv-slot .item-ico img{width:100%;height:100%;object-fit:cover}
.inv-slot .q{position:absolute;right:2px;bottom:1px;font-size:.72rem;font-weight:700;
  color:var(--text);text-shadow:0 1px 2px #000;background:rgba(0,0,0,.55);padding:0 .25rem;border-radius:2px}

/* top-bar resource bars + regen tick */
.resbars{display:flex;align-items:center;gap:.6rem;margin-left:auto;margin-right:.6rem}
.rb{display:flex;align-items:center;gap:.28rem}
.rb .svg-ico{width:.95em;height:.95em;flex:none}
.rb-track{width:clamp(40px,5vw,64px);height:8px;background:rgba(0,0,0,.5);border:1px solid var(--stone-line);border-radius:2px;overflow:hidden}
.rb-track span{display:block;height:100%;transition:width .3s ease}
.rb small{font-size:.72rem;color:var(--muted);min-width:2ch}
.rb-hp{color:#e0604c}.rb-hp .rb-track span{background:linear-gradient(90deg,#8e2a1e,#e0604c)}
.rb-mp{color:#5b8fd1}.rb-mp .rb-track span{background:linear-gradient(90deg,#2c4c78,#5b8fd1)}
.rb-sp{color:#8cc763}.rb-sp .rb-track span{background:linear-gradient(90deg,#4d7a34,#8cc763)}
.rb-timer{font-size:.74rem;color:var(--muted);min-width:4ch}
@media(max-width:1020px){
  .topbar{flex-wrap:wrap}
  .resbars{order:5;flex:1 0 100%;margin:0;justify-content:center;padding-bottom:.2rem}
}
@media(max-width:760px){
  .rb-track{width:52px}
}
.bar.mp{height:6px;background:rgba(0,0,0,.5);border-radius:2px;overflow:hidden;margin-top:.25rem}
.bar.mp span{display:block;height:100%;background:linear-gradient(90deg,#2c4c78,#5b8fd1);transition:width .3s ease}
.mpnum{color:#7fa8dd}

/* clipping frame for rival timeline thumbnails (hover-zoom stays inside) */
.ot-thumb{flex:none;display:block;width:92px;height:62px;overflow:hidden;border:1px solid var(--stone-line);border-radius:var(--radius,2px)}
.ot-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== map rebalance: contained stages, quiet tiles, loud you-are-here ===== */
.map-cols .map-stage{max-width:700px;justify-self:center;width:100%}
.map-cols .interior-stage{max-width:520px}
.worldmap-xl.grid.interior .mlabel{font-size:3.1px}
.worldmap-xl.grid.interior .mnode.visited rect.mring{stroke:var(--bronze,#8a6a3f);stroke-opacity:.55;stroke-width:.6;filter:none}
.worldmap-xl.grid.interior .mnode.visited:hover rect.mring{stroke:var(--gold);stroke-opacity:1;stroke-width:1}
.worldmap-xl.grid .mnode.current rect.mring{stroke:var(--gold);stroke-width:1.7;filter:drop-shadow(0 0 3.5px rgba(242,193,78,.95))}
#player-marker .pm-pin{fill:var(--gold);filter:drop-shadow(0 0 3px rgba(242,193,78,.9));animation:pin-bob 1.6s ease-in-out infinite}
@keyframes pin-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4px)}}

/* quests + journeys */
.quest-card h3{color:var(--gold)}
.quest-card.done{border-color:var(--good)}
.quest-progress{margin:.5rem 0}
.quest-reward{margin:.4rem 0}
.journey-choices{display:flex;gap:.8rem;flex-wrap:wrap}
.journey-choice{flex:1 1 240px;text-align:left;white-space:normal;line-height:1.4}
.journey-scene .artbox{max-width:760px}

/* ===== place-first Location screen ===== */
.loc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.loc-blurb{max-width:72ch;margin:.3rem 0 .2rem}
.loc-sec{font-size:1.02rem;margin-top:1.1rem}
.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem}
.loc-card{background:linear-gradient(180deg, rgba(48,36,24,.76), rgba(32,24,16,.8));
  border:1px solid var(--stone-line);border-radius:var(--radius,2px);padding:.65rem;transition:.15s}
.loc-card[data-entersub]{cursor:pointer}
.loc-card[data-entersub]:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.loc-card.current{border:1.5px solid var(--gold);box-shadow:0 0 14px rgba(242,193,78,.22)}
.lc-art{position:relative;height:104px;border-radius:var(--radius,2px);overflow:hidden;background:#14100b;margin-bottom:.5rem}
.lc-art img{width:100%;height:100%;object-fit:cover;display:block}
.lc-ph{display:flex;align-items:center;justify-content:center;height:100%;color:var(--gold-dim)}
.lc-ph .svg-ico{width:30px;height:30px}
.lc-count{position:absolute;right:5px;bottom:5px;background:rgba(8,6,4,.82);border:0.5px solid var(--stone-line);
  border-radius:3px;padding:1px 6px;font-size:.75rem;color:var(--text);display:inline-flex;align-items:center;gap:.25rem}
.lc-count .svg-ico{width:.85em;height:.85em;color:#d14444}
.lc-name{font-family:"Cinzel",serif;font-size:.95rem;color:var(--text);letter-spacing:.04em}
.lc-here{color:var(--gold);border-color:var(--gold)}
.lc-actions{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.55rem}

.roads-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem}
.road-card{display:flex;align-items:center;gap:.7rem;background:linear-gradient(180deg, rgba(48,36,24,.76), rgba(32,24,16,.8));
  border:1px solid var(--stone-line);border-radius:var(--radius,2px);padding:.6rem .7rem}
.rc-art{width:52px;height:52px;flex:none;border-radius:var(--radius,2px);overflow:hidden;background:#14100b}
.rc-art img{width:100%;height:100%;object-fit:cover;display:block}
.rc-art .lc-ph .svg-ico{width:22px;height:22px}
.rc-meta{min-width:0;flex:1}
.rc-meta b{font-family:"Cinzel",serif;font-size:.92rem;letter-spacing:.03em}
.rc-meta small{display:block;color:var(--muted);margin-top:.1rem}
.rc-quest{color:var(--gold)}
.lc-count-inline{font-size:.78rem;color:#d98a7a;white-space:nowrap}
.lc-count-inline .svg-ico{width:.85em;height:.85em}
.loc-den{margin-top:1rem}

/* world map overlay poster */
#worldmap{position:fixed;inset:0;z-index:120;background:rgba(6,5,4,.86);display:flex;align-items:center;justify-content:center;padding:1.2rem}
#worldmap.hidden{display:none}
.wm-card{width:min(860px,96vw);max-height:94vh;overflow:auto;background:#171310;border:1px solid var(--stone-line);
  border-radius:var(--radius,2px);padding:1rem 1.2rem}
.wm-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.7rem;color:var(--gold);font-family:"Cinzel",serif}
.wm-stage{position:relative;height:auto;min-height:380px;aspect-ratio:1.1;max-height:74vh;overflow:hidden;padding:0}

/* painting timers */
.paint-timer{color:var(--gold);font-variant-numeric:tabular-nums;font-weight:700}

/* ===== Location screen scaled to the device (cards were mobile-sized on desktop) ===== */
.view[data-view="map"]{max-width:1400px;margin:0 auto}
.loc-grid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),400px));gap:1rem}
.lc-art{height:clamp(120px,12vw,200px)}
.lc-name{font-size:clamp(.95rem,1.1vw,1.15rem)}
.loc-card{padding:.8rem}
.roads-grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),440px));gap:1rem}
.road-card{padding:.75rem .85rem}
.rc-art{width:clamp(52px,5vw,76px);height:clamp(52px,5vw,76px)}
.rc-meta b{font-size:clamp(.92rem,1vw,1.08rem)}
.loc-sec{font-size:clamp(1.02rem,1.2vw,1.25rem)}

/* ============================================================
   READABILITY PASS (2026-07-03)
   EB Garamond has a tiny x-height, so everything set in it reads
   ~20-25% smaller than it measures — and the theme swap never
   compensated. Scale the root, give the body real leading,
   restore the .muted hierarchy, cap line lengths, and raise the
   micro-text floor. Keep this block LAST in the file.
   ============================================================ */

/* 1. Global size + leading: every rem-based size scales with the root.
      (SVG map text uses px and is unaffected.) */
html{font-size:112.5%}
body{line-height:1.5}

/* 2. The hierarchy class the templates use ~50x but no sheet ever defined. */
.muted{color:var(--muted)}

/* 3. Full-bleed pages (Viktor's call): views span the whole device width.
      Readability is preserved at the element level instead — prose
      paragraphs and key/value rows keep their own caps below. */
.view,.view[data-view="map"]{max-width:none;margin:0}
.saga-ch p,.loc-lore,.quest-card>p,.card-lore,.loc-blurb{max-width:70ch}
.champ>div:last-child{max-width:640px}
.statline,.record{max-width:560px}

/* 4. Micro-text floor: nothing gameplay-relevant below ~14px effective. */
.art-ph small{font-size:.8rem}
.tag,.pick small,.sub-cap small,.tl-cap small,.iv-tag,.rb small,.inv-slot .q{font-size:.8rem}
.pf-opt small,.rb-timer{font-size:.82rem}
.hpwrap .num,.ss-lbl,.opt,.hint{font-size:.85rem}
.card-lore,.combat-log,.deed{font-size:1rem}

/* 5. Disabled buttons carried real information (cooldowns, low mana,
      city gates) at ~3:1 contrast. Dim by desaturating, not by fading. */
.btn:disabled{opacity:.65}
.act-btn:disabled{opacity:.6;filter:saturate(.4)}

/* 6. Danger text was 3.8:1 — decisions get made from this. */
:root{--bad:#e56a55}
.danger,.iv-risk-high{color:var(--bad)}
.art-ph{color:#8a7c63}
.qmark{fill:#93815f;color:#93815f}

/* 7. Cinzel is a hairline caps face — below ~17px it smears on dark.
      Small display slots fall back to the body serif, bolded. */
.tl-cap b,.rc-meta b,.char-card b{font-family:inherit;font-weight:600;letter-spacing:.01em}

/* 8. Glow diet: the ember halo blurred glyph edges on every heading. */
.logo,.brand,h2.section,.champ-name,.loc-name,.preview-name,.create-logo,.combat-result{
  text-shadow:0 1px 0 #000, 0 0 10px rgba(233,180,65,.16);
}
.preview-name,.champ-name,.loc-name{text-shadow:0 1px 0 #000,0 0 8px rgba(233,180,65,.18)}
h2.section{letter-spacing:.06em}

/* 9. The logo and brand must POP — the glow diet above was for small
      headings; at display size the halo is what lifts hairline Cinzel
      off the dark art. Near-parchment gold fill + full ember glow, and
      the crest medallions get a brightness lift too. */
.logo,.create-logo{color:#ffe8ad;
  text-shadow:0 2px 0 #000, 0 0 26px rgba(233,180,65,.60), 0 0 60px rgba(232,99,42,.32)}
.brand{color:#ffe8ad;text-shadow:0 1px 0 #000, 0 0 12px rgba(233,180,65,.45)}
.brand-crest,.crest-mark{filter:brightness(1.4) saturate(1.1)}

/* ---- enemy wind-up telegraph banner (combat) ---- */
.intent-warn{margin:.45rem 0 0;padding:.5rem .75rem;border:1px solid rgba(224,96,76,.55);
  background:rgba(142,42,30,.22);color:#f6cdbd;border-radius:var(--radius,2px);
  animation:intentPulse 1.1s ease-in-out infinite alternate}
.intent-warn i{color:var(--muted)}
@keyframes intentPulse{from{box-shadow:0 0 0 rgba(224,96,76,0)}to{box-shadow:0 0 16px rgba(224,96,76,.38)}}

/* ---- Alpha hunt (location screen) ---- */
.hunt-line{display:flex;align-items:center;gap:.55rem;margin-top:.45rem;color:var(--muted);font-size:.9rem}
.hunt-line .hunt-bar{flex:0 0 90px;height:6px;background:rgba(0,0,0,.45);border:1px solid var(--stone-line);border-radius:var(--radius,2px);overflow:hidden}
.hunt-line .hunt-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold))}
.btn.alpha{border-color:rgba(224,96,76,.6);color:#f6cdbd;background:rgba(142,42,30,.25)}
.btn.alpha:hover{background:rgba(142,42,30,.4)}
.alpha-done{color:var(--gold)}