:root{
  --bg:#05070a; --panel:#0d1518; --panel2:#121e22; --gold:#f0c85b; --text:#f6e8d0;
  --muted:#b8a98c; --red:#d64a4a; --green:#75ee88; --blue:#7db7ff; --line:#5a421c;
  --iron:#26343a; --ink:#030506; --parchment:#d8c39b;
}

/* Phone Playtest 28: Lower Ward hub, trainers, and hard districts. */
.lower-ward-panel{
  display:grid;
  gap:10px;
  margin:10px 0 12px;
}
.lower-ward-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  padding:12px;
  border:1px solid rgba(189,153,88,.42);
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(39,28,19,.92),rgba(8,10,10,.96)),
    radial-gradient(circle at 84% 18%,rgba(76,116,111,.22),transparent 30%);
  box-shadow:inset 0 0 24px rgba(0,0,0,.38);
}
.lower-ward-hero h1{
  margin:6px 0 5px;
  font-size:28px;
  line-height:1.05;
}
.lower-ward-hero p{
  margin:0;
  color:#e2ceb0;
  line-height:1.35;
}
.lower-ward-status,
.lower-ward-trainer-summary,
.lower-ward-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.lower-ward-status{
  justify-content:flex-end;
  max-width:230px;
}
.lower-ward-command-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.lower-ward-command{
  display:grid;
  align-content:center;
  gap:4px;
  min-height:58px;
  padding:10px 9px;
  text-align:left;
  white-space:normal;
}
.lower-ward-command span{
  color:#ffe7b4;
  font-size:14px;
  font-weight:950;
  line-height:1.05;
}
.lower-ward-command small{
  color:#cdbd9f;
  font:800 10px/1.15 system-ui,sans-serif;
}
.lower-ward-trainer-summary{
  padding:8px 9px;
  border:1px solid rgba(94,134,124,.52);
  border-radius:8px;
  background:linear-gradient(90deg,rgba(10,31,30,.82),rgba(7,8,8,.94));
}
.lower-ward-drawer{
  border:1px solid rgba(121,91,45,.52);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(13,11,10,.88),rgba(4,5,5,.95));
  overflow:hidden;
}
.lower-ward-drawer>summary{
  cursor:pointer;
  list-style:none;
  min-height:40px;
  padding:10px 11px;
  color:#f0d49f;
  font:950 12px/1.15 system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:0;
}
.lower-ward-drawer>summary::-webkit-details-marker{
  display:none;
}
.lower-ward-drawer>summary::after{
  content:"+";
  float:right;
  color:#b99054;
  font-size:16px;
}
.lower-ward-drawer[open]>summary::after{
  content:"-";
}
.lower-ward-ledger{
  display:grid;
  gap:6px;
  padding:0 8px 8px;
}
.lower-ward-ledger .entry{
  padding:7px 8px;
  border-left:3px solid rgba(111,172,148,.72);
  background:linear-gradient(90deg,rgba(111,172,148,.1),rgba(0,0,0,.1));
  color:#eadbc0;
  line-height:1.35;
}
.lower-ward-trainer-modal{
  display:grid;
  gap:10px;
}
.lower-ward-trainer-modal p{
  margin:0;
  color:#dfcbae;
  line-height:1.35;
}
.lower-ward-trainer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.lower-ward-trainer-card{
  display:grid;
  gap:7px;
  padding:10px;
  border:1px solid rgba(179,129,62,.45);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(33,24,18,.94),rgba(7,8,8,.98));
}
.lower-ward-trainer-card.is-active{
  border-color:rgba(117,238,136,.7);
  box-shadow:0 0 18px rgba(91,186,123,.14);
}
.lower-ward-trainer-card.is-unlocked{
  border-color:rgba(226,185,98,.68);
}
.lower-ward-trainer-card h3{
  margin:0;
  font-size:19px;
  line-height:1.05;
}
.lower-ward-trainer-card p{
  margin:0;
  color:#d9c4a0;
}
.lower-ward-trainer-card button{
  margin-top:2px;
}
.hard-area-card h3{
  overflow-wrap:anywhere;
}
@media(max-width:700px){
  .lower-ward-hero{
    grid-template-columns:1fr;
  }
  .lower-ward-hero h1{
    font-size:24px;
  }
  .lower-ward-status{
    justify-content:flex-start;
    max-width:none;
  }
  .lower-ward-command-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .lower-ward-command{
    min-height:56px;
  }
  .lower-ward-trainer-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:420px){
  .lower-ward-command span{
    font-size:13px;
  }
  .lower-ward-command small{
    font-size:9px;
  }
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100vh;background:linear-gradient(180deg,#030506,#0b1114 42%,#050608);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 18%,transparent 82%,rgba(0,0,0,.55)),radial-gradient(ellipse at center,transparent 0 45%,rgba(0,0,0,.58) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7px)}
body.start-lock #game{display:none!important}
body.game-lock #setup{display:none!important}
button,input,select{font:inherit}
button{min-height:42px;border:1px solid #6a5128;border-radius:8px;background:linear-gradient(180deg,#243944,#15262d);color:var(--text);padding:8px 10px;font-weight:900;box-shadow:0 3px 0 rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .07s,filter .07s,box-shadow .12s,border-color .12s}
button:hover:not(:disabled){border-color:#cda84d;box-shadow:0 3px 0 rgba(0,0,0,.42),0 0 16px rgba(240,200,91,.12),inset 0 1px 0 rgba(255,255,255,.08)}
button:active{transform:translateY(3px) scale(.98);filter:brightness(.82)}
button:disabled{opacity:.45;filter:grayscale(.5)}
input,select{width:100%;min-height:42px;border:1px solid #344e5b;border-radius:8px;background:#081116;color:var(--text);padding:8px}
.primary{background:linear-gradient(90deg,#b98219,#ffe56c);color:#160e04}
.danger{background:linear-gradient(90deg,#9d1f2c,#ff5050);color:white}
.good{background:linear-gradient(90deg,#248342,#75ee88);color:#061207}
.secondary{background:#203a49;color:var(--text)}
h1,h2,h3{color:var(--gold);margin:.25rem 0 .5rem;line-height:1.1;font-family:Georgia,Times New Roman,serif;text-shadow:0 1px 0 #000,0 0 16px rgba(240,200,91,.1)}
p{color:var(--muted);line-height:1.35}
#app{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:10px 10px 110px}
.topbar{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(8,13,15,.98),rgba(4,7,8,.95));border:1px solid rgba(90,66,28,.72);border-top:0;border-radius:0 0 8px 8px;padding:8px;box-shadow:0 14px 28px rgba(0,0,0,.35)}
.topline{display:flex;gap:6px;overflow:auto;padding-bottom:4px;scrollbar-width:none}
.topline::-webkit-scrollbar{display:none}
.topline button{min-width:max-content;min-height:36px;padding:6px 9px;font-size:13px}
.topline button.active{border-color:var(--gold);box-shadow:0 0 12px rgba(240,200,91,.22)}
.panel{border:1px solid rgba(112,83,35,.9);border-radius:10px;background:linear-gradient(180deg,rgba(18,30,34,.98),rgba(6,9,10,.98));padding:12px;margin:10px 0;box-shadow:0 10px 24px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035)}
.card{border:1px solid #344e5b;border-radius:8px;background:linear-gradient(180deg,#0e191d,#091012);padding:10px;margin:8px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.grid{display:grid;grid-template-columns:1fr;gap:10px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pill{display:inline-block;border:1px solid #4d6878;background:#0b171c;border-radius:999px;padding:3px 8px;margin:2px;color:#e9ddc7;font-size:12px;font-weight:900}
.pill.good{border-color:#427a52;background:#0d2315;color:#9dffad}
.pill.warn{border-color:#8b6b2c;background:#1f1808;color:#ffe08a}
.pill.red{border-color:#8b3a3a;background:#230d0d;color:#ffb0a8}
.bar{height:12px;background:#1b2429;border:1px solid #3e4d55;border-radius:999px;overflow:hidden;margin:5px 0;box-shadow:inset 0 1px 6px rgba(0,0,0,.55)}
.bar>div{height:100%;background:linear-gradient(90deg,#9f1b1b,#ff6a59);width:0%;transition:width .35s ease;position:relative}
.bar>div::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:bar-shimmer 2.8s linear infinite}
.bar.mana>div{background:linear-gradient(90deg,#2d69d8,#7cb3ff)}
.bar.xp>div{background:linear-gradient(90deg,#d7a93a,#ffe56c)}
.screen{display:none}
.screen.active{display:block}
.start-title{text-align:center;font-size:42px;line-height:1.0;margin:20px 0;color:#f6e8d0;text-shadow:0 0 22px rgba(240,200,91,.2)}
.log{white-space:pre-wrap;max-height:170px;overflow:auto;font-size:13px;line-height:1.35;background:#040708;border:1px solid #23323a;border-radius:8px;padding:8px;box-shadow:inset 0 0 18px rgba(0,0,0,.42)}
.unit{border:1px solid #314a56;background:#0d181d;border-radius:8px;padding:7px;font-size:13px}
.enemy{border:1px solid #8b3a3a;background:#240d11;border-radius:8px;padding:7px;font-size:12px}
.enemy.target{border-color:var(--gold);box-shadow:0 0 18px rgba(240,200,91,.25)}
.actions{position:sticky;bottom:0;z-index:40;background:linear-gradient(180deg,rgba(9,14,16,.98),rgba(4,7,8,.98));border:1px solid var(--line);border-radius:10px;padding:7px;margin-top:8px;box-shadow:0 -12px 28px rgba(0,0,0,.38)}
.actions .grid3 button{min-height:42px;font-size:13px;padding:6px}
.skill-drawer{max-height:34vh;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:8px;background:#081116;padding:8px;margin:8px 0}
.shop-card.better{border-color:#75ee88;box-shadow:0 0 12px rgba(117,238,136,.15)}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1000;display:flex;align-items:center;justify-content:center;padding:12px}
.modal{max-width:620px;width:100%;max-height:85vh;overflow:auto;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#101b1f,#070b0e);padding:14px;box-shadow:0 24px 70px rgba(0,0,0,.68)}
.toast{position:fixed;left:12px;right:12px;top:72px;z-index:1500;background:#1f1808;border:1px solid #8b6b2c;color:#ffe08a;border-radius:8px;padding:9px;text-align:center;font-weight:900}
.hero-shell{border:1px solid #694d20;border-radius:10px;background:linear-gradient(145deg,#201116 0%,#111a20 55%,#070a0d 100%);padding:18px;margin:12px 0;box-shadow:0 0 28px rgba(240,200,91,.08), inset 0 0 24px rgba(0,0,0,.35)}
.hero-title{font-size:42px;font-weight:950;color:#f7e8cf;letter-spacing:0;line-height:.95;margin:0 0 8px;text-shadow:0 0 18px rgba(240,200,91,.18)}
.hero-sub{color:#d6c29d;font-size:15px;line-height:1.35;margin:0 0 12px}
.location-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid #45606d;background:#0d1920;border-radius:999px;padding:6px 11px;color:#e9ddc7;font-weight:900}
.world-card{border:1px solid #694d20;border-radius:10px;background:linear-gradient(180deg,rgba(18,33,39,.97),rgba(7,10,13,.98)),repeating-linear-gradient(45deg,rgba(240,200,91,.03) 0 8px,transparent 8px 16px);padding:14px;margin:10px 0}
.choice-card{border:1px solid #344e5b;border-radius:8px;background:linear-gradient(180deg,#0f2027,#091015);padding:13px;margin:9px 0;box-shadow:inset 0 0 18px rgba(255,255,255,.025)}
.story-box{border:1px solid #5a421c;border-radius:8px;background:linear-gradient(180deg,#11171b,#06080b);padding:14px;margin:10px 0;color:#f6e8d0;line-height:1.55;font-size:16px}
.story-line{margin:0 0 12px}
.story-line:last-child{margin-bottom:0}
.event-feed .entry{border:1px solid #243943;background:#081217;border-radius:8px;padding:9px;margin:7px 0;color:#d6c29d}
.class-choice-banner{border:1px solid #8b6b2c;background:#1f1808;color:#ffe08a;border-radius:8px;padding:10px;margin:10px 0}
#setup .panel{background:radial-gradient(circle at 50% 0%, rgba(240,200,91,.16), transparent 32%),linear-gradient(180deg,#111f25,#06080b)}
#topStats{display:grid;grid-template-columns:66px minmax(0,1fr);gap:8px;align-items:center;min-height:82px}
.top-status-portrait{display:block;width:66px;min-width:66px;align-self:stretch}
.top-status-pills{display:flex;gap:6px;flex-wrap:wrap;min-width:0;align-content:center}
.tutorial-frame{border:1px solid #694d20;border-radius:10px;background:linear-gradient(180deg,#121f26,#05080a);padding:14px;margin:10px 0}
.tutorial-title{font-size:34px;font-weight:950;color:#f7e8cf;text-align:center;line-height:1.0;margin-bottom:8px}
.tutorial-note{border:1px solid #8b6b2c;background:#1f1808;color:#ffe08a;border-radius:8px;padding:10px;margin:10px 0}
.battle-arena{display:grid;grid-template-columns:1fr;gap:10px}
.battle-arena{position:relative}
.battle-arena::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,transparent,rgba(240,200,91,.3),transparent);opacity:.8;pointer-events:none}
.tut-unit{border:1px solid #314a56;border-radius:8px;background:#0b171c;padding:12px}
.tut-unit.knight{border-color:#d6c29d}
.tut-unit.dragon,.tut-unit.enemy{border-color:#8b3a3a;background:#230d0d}
.mini-log{border:1px solid #243943;background:#05090b;border-radius:8px;padding:9px;margin:9px 0;max-height:160px;overflow:auto;color:#d6c29d}
.lang-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.lang-active{border-color:#ffe56c;background:linear-gradient(90deg,#b98219,#ffe56c);color:#160e04}
.stat-card{border:1px solid #344e5b;background:#0d181d;border-radius:8px;padding:9px}

.combat-shell{position:relative;display:grid;gap:10px;overflow:hidden;border:1px solid rgba(112,83,35,.7);border-radius:12px;padding:8px;background:#050708;box-shadow:0 18px 44px rgba(0,0,0,.38)}
.combat-shell>.panel,.combat-shell>.actions{position:relative;z-index:2}
.combat-header{display:grid;grid-template-columns:1fr;gap:8px;margin-top:4px}
.turn-order{display:flex;gap:4px;flex-wrap:wrap;align-content:start}
.combat-stage{display:grid;gap:12px;background:linear-gradient(180deg,rgba(18,30,34,.82),rgba(5,8,9,.88)),repeating-linear-gradient(90deg,rgba(240,200,91,.025) 0 1px,transparent 1px 18px);backdrop-filter:blur(1px)}
.combat-area>h2{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.combat-area>h2::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(240,200,91,.42),transparent)}
.combat-party-grid,.combat-enemy-grid{display:grid;grid-template-columns:1fr;gap:10px}
.combat-card{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:stretch;min-height:128px;overflow:hidden;border-radius:8px;padding:8px}
.combat-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 34%),linear-gradient(0deg,rgba(0,0,0,.24),transparent);opacity:.9}
.combat-card-body{position:relative;z-index:1;min-width:0}
.combat-name{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;color:#f8e8c8}
.combat-name b{min-width:0;overflow:hidden;text-overflow:ellipsis}
.combat-name span{color:#d5bf92;font-size:12px;font-weight:900;white-space:nowrap}
.meter-line{display:flex;justify-content:space-between;gap:8px;color:#d9c6a7;font-size:12px;font-weight:900;margin-top:7px}
.portrait-wrap{position:relative;z-index:1;min-height:132px}
.portrait-art{position:relative;height:100%;min-height:132px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0b1012;box-shadow:inset 0 0 34px rgba(0,0,0,.58),0 8px 18px rgba(0,0,0,.25)}
.portrait-art span{position:absolute;display:block;pointer-events:none}
.portrait-wash{inset:0;background:radial-gradient(circle at 48% 22%,rgba(246,232,208,.16),transparent 19%),linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%),linear-gradient(160deg,#1b2428,#080a0b 62%,#241512)}
.portrait-horizon{left:8%;right:8%;bottom:29%;height:1px;background:linear-gradient(90deg,transparent,rgba(240,200,91,.32),transparent)}
.portrait-figure{left:50%;bottom:7%;width:46%;height:68%;transform:translateX(-50%);background:linear-gradient(180deg,#2c3334,#080909);clip-path:polygon(44% 0,58% 0,66% 18%,78% 36%,72% 100%,24% 100%,18% 36%,34% 18%);filter:drop-shadow(0 12px 12px rgba(0,0,0,.68))}
.portrait-face{left:50%;top:19%;width:23%;height:18%;transform:translateX(-50%);border-radius:50% 50% 42% 42%;background:linear-gradient(180deg,#d7c09b,#6f563a);box-shadow:0 0 0 5px rgba(0,0,0,.28)}
.portrait-detail{left:50%;top:42%;width:58%;height:34%;transform:translateX(-50%);background:linear-gradient(90deg,transparent 0 18%,rgba(240,200,91,.46) 18% 21%,transparent 21% 79%,rgba(240,200,91,.34) 79% 82%,transparent 82%);opacity:.75}
.portrait-glow{inset:auto -20% -10% -20%;height:34%;background:radial-gradient(ellipse at center,rgba(240,200,91,.2),transparent 60%)}
.portrait-hero.portrait-warrior .portrait-wash{background:radial-gradient(circle at 70% 24%,rgba(255,112,66,.23),transparent 20%),linear-gradient(160deg,#3a1c19,#10171b 68%,#665126)}
.portrait-hero.portrait-warrior .portrait-detail::after{content:"";position:absolute;right:10%;top:-42%;width:5px;height:116%;background:linear-gradient(#e5d19c,#70401e);transform:rotate(23deg);box-shadow:0 0 8px rgba(240,200,91,.28)}
.portrait-hero.portrait-rogue .portrait-wash{background:radial-gradient(circle at 30% 18%,rgba(84,160,96,.18),transparent 23%),linear-gradient(160deg,#19221a,#0a1013 64%,#344735)}
.portrait-hero.portrait-rogue .portrait-figure{clip-path:polygon(50% 0,68% 16%,74% 100%,22% 100%,28% 16%)}
.portrait-hero.portrait-mage .portrait-wash{background:radial-gradient(circle at 50% 20%,rgba(135,108,255,.3),transparent 23%),linear-gradient(160deg,#151f35,#0a0e17 64%,#4e3b73)}
.portrait-hero.portrait-mage .portrait-glow{background:radial-gradient(ellipse at center,rgba(125,183,255,.36),transparent 62%)}
.portrait-hero.portrait-ranger .portrait-wash{background:radial-gradient(circle at 26% 22%,rgba(149,176,88,.22),transparent 25%),linear-gradient(160deg,#26351f,#091012 64%,#5a4a22)}
.portrait-hero.portrait-ranger .portrait-detail{background:linear-gradient(100deg,transparent 0 42%,rgba(213,191,118,.65) 42% 46%,transparent 46%)}
.portrait-hero.portrait-cleric .portrait-wash{background:radial-gradient(circle at 50% 18%,rgba(255,232,140,.32),transparent 25%),linear-gradient(160deg,#2d2a21,#10161a 64%,#786831)}
.portrait-hero.portrait-cleric .portrait-detail{background:linear-gradient(90deg,transparent 0 47%,rgba(255,232,140,.85) 47% 53%,transparent 53%),linear-gradient(0deg,transparent 0 45%,rgba(255,232,140,.55) 45% 54%,transparent 54%)}
.portrait-companion-art .portrait-wash{background:radial-gradient(circle at 50% 22%,rgba(125,183,255,.14),transparent 23%),linear-gradient(160deg,#1d2d30,#091013 64%,#3a5c5e)}
.portrait-enemy-art .portrait-face{background:linear-gradient(180deg,#cbbba0,#39312a)}
.portrait-skeleton .portrait-wash{background:radial-gradient(circle at 50% 18%,rgba(212,205,181,.22),transparent 23%),linear-gradient(160deg,#302f2a,#090908 68%,#746d58)}
.portrait-skeleton .portrait-face{background:linear-gradient(180deg,#d8d0ba,#7b705f);box-shadow:inset 0 -7px 0 rgba(0,0,0,.32),0 0 0 4px rgba(0,0,0,.24)}
.portrait-skeleton .portrait-detail{background:linear-gradient(90deg,transparent 0 32%,rgba(224,216,190,.58) 32% 36%,transparent 36% 64%,rgba(224,216,190,.48) 64% 68%,transparent 68%)}
.portrait-cultist .portrait-wash{background:radial-gradient(circle at 52% 20%,rgba(174,75,204,.25),transparent 23%),linear-gradient(160deg,#251629,#09070b 68%,#5d355f)}
.portrait-cultist .portrait-face{background:#120912;box-shadow:0 0 18px rgba(174,75,204,.24)}
.portrait-wolf .portrait-wash{background:radial-gradient(circle at 50% 26%,rgba(160,101,54,.2),transparent 25%),linear-gradient(160deg,#251911,#080706 68%,#68462b)}
.portrait-wolf .portrait-figure{clip-path:polygon(28% 22%,38% 4%,50% 22%,62% 4%,72% 22%,78% 100%,22% 100%)}
.portrait-wolf .portrait-face{top:30%;width:36%;height:20%;border-radius:48% 48% 60% 60%;background:linear-gradient(180deg,#7d6751,#221814)}
.portrait-bandit .portrait-wash,.portrait-raider .portrait-wash{background:radial-gradient(circle at 70% 22%,rgba(214,74,74,.18),transparent 23%),linear-gradient(160deg,#341a1b,#0b0b0c 68%,#5a2e2e)}
.portrait-cursed .portrait-wash{background:radial-gradient(circle at 50% 20%,rgba(125,183,255,.18),transparent 22%),linear-gradient(160deg,#18242b,#08090a 66%,#5c6770)}
.portrait-ashen .portrait-wash{background:radial-gradient(circle at 66% 20%,rgba(255,113,48,.26),transparent 25%),linear-gradient(160deg,#3c1712,#08090a 66%,#6e4b28)}
.portrait-boss .portrait-wash{background:radial-gradient(circle at 50% 16%,rgba(214,74,74,.32),transparent 25%),linear-gradient(160deg,#3d1117,#080607 68%,#855230)}
.combat-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;background:#080b0d}
.combat-backdrop span{position:absolute;display:block;pointer-events:none}
.scene-sky{inset:0 0 36% 0;background:linear-gradient(180deg,#182025,#07090a)}
.scene-horizon{left:-6%;right:-6%;bottom:33%;height:28%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.52)),repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 8px,transparent 8px 38px)}
.scene-ground{left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,rgba(43,35,27,.9),#080706)}
.scene-light{right:8%;top:16%;width:34%;height:42%;border-radius:50%;background:radial-gradient(circle,rgba(240,200,91,.18),transparent 66%);filter:blur(2px)}
.scene-fog{left:-18%;right:-18%;height:28%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(220,220,210,.13),transparent 66%);filter:blur(6px);animation:combat-fog 12s ease-in-out infinite}
.scene-fog-a{bottom:19%}
.scene-fog-b{bottom:5%;animation-duration:16s;animation-delay:-5s;opacity:.8}
.scene-vignette{inset:0;background:radial-gradient(ellipse at center,transparent 0 38%,rgba(0,0,0,.72) 100%)}
.backdrop-ashen-fields .scene-sky{background:linear-gradient(180deg,#2d211b,#090807)}
.backdrop-ashen-fields .scene-horizon{background:linear-gradient(180deg,transparent,rgba(0,0,0,.45)),repeating-linear-gradient(88deg,rgba(54,35,22,.75) 0 10px,transparent 10px 52px)}
.backdrop-ashen-fields .scene-ground{background:linear-gradient(180deg,#3a2517,#080605)}
.backdrop-forest .scene-sky{background:linear-gradient(180deg,#16231b,#070b08)}
.backdrop-forest .scene-horizon{background:linear-gradient(180deg,transparent,rgba(0,0,0,.5)),repeating-linear-gradient(90deg,rgba(23,52,31,.82) 0 16px,transparent 16px 42px)}
.backdrop-forest .scene-ground{background:linear-gradient(180deg,#182714,#050806)}
.backdrop-ruins .scene-sky{background:linear-gradient(180deg,#202630,#08090b)}
.backdrop-ruins .scene-horizon{background:linear-gradient(180deg,transparent,rgba(0,0,0,.52)),repeating-linear-gradient(90deg,rgba(96,92,83,.48) 0 18px,transparent 18px 50px)}
.backdrop-ruins .scene-ground{background:linear-gradient(180deg,#2d2c28,#070707)}
.backdrop-road .scene-sky{background:linear-gradient(180deg,#29231d,#090807)}
.backdrop-road .scene-ground{background:linear-gradient(110deg,#19110c 0 34%,#3a2a1c 34% 56%,#140d09 56%)}
.backdrop-town-outskirts .scene-sky{background:linear-gradient(180deg,#211713,#070807)}
.backdrop-town-outskirts .scene-horizon{background:linear-gradient(180deg,transparent,rgba(0,0,0,.5)),repeating-linear-gradient(90deg,rgba(80,50,28,.62) 0 24px,transparent 24px 64px)}
.backdrop-town-outskirts .scene-light{background:radial-gradient(circle,rgba(255,149,66,.26),transparent 62%)}
.backdrop-storm .scene-sky{background:linear-gradient(180deg,#17222d,#06080a)}
.backdrop-storm .scene-light{background:radial-gradient(circle,rgba(125,183,255,.22),transparent 62%)}
.backdrop-hollow .scene-sky{background:linear-gradient(180deg,#17131d,#050507)}
.backdrop-hollow .scene-horizon{background:linear-gradient(180deg,transparent,rgba(0,0,0,.58)),repeating-linear-gradient(90deg,rgba(63,48,80,.55) 0 20px,transparent 20px 48px)}
.backdrop-hollow .scene-ground{background:linear-gradient(180deg,#17111b,#040405)}
.hit-flash{animation:hit-flash .34s ease-out}
.damage-pop{position:absolute;left:50%;top:18px;z-index:3;transform:translateX(-50%);padding:2px 7px;border-radius:999px;background:rgba(30,8,8,.92);border:1px solid #ff6a59;color:#ffe0d6;font-weight:950;font-size:14px;animation:damage-pop .65s ease-out forwards;box-shadow:0 0 16px rgba(214,74,74,.28);white-space:nowrap}
.damage-pop.heal{background:rgba(9,35,19,.95);border-color:#75ee88;color:#caffd1}
.damage-pop.mana{background:rgba(8,22,43,.95);border-color:#7db7ff;color:#d7e9ff}
.damage-pop.miss{background:rgba(28,25,18,.95);border-color:#f0c85b;color:#ffe8a6}
.battle-log{margin-top:8px}
.battle-log h3{margin-bottom:6px}
.result-state{border:1px solid var(--line);border-radius:8px;padding:12px;background:linear-gradient(180deg,#11191c,#060809);box-shadow:inset 0 0 28px rgba(0,0,0,.35)}
.victory-state{border-color:#7c642b;box-shadow:inset 0 0 28px rgba(240,200,91,.08),0 0 28px rgba(240,200,91,.1)}
.defeat-state{border-color:#8b3a3a;box-shadow:inset 0 0 28px rgba(214,74,74,.08),0 0 28px rgba(214,74,74,.1)}

.gear-screen-layout{display:grid;gap:10px}
.gear-hero-panel{display:grid;grid-template-columns:1fr;gap:14px;align-items:start;overflow:hidden;background:radial-gradient(circle at 76% 18%,rgba(240,200,91,.13),transparent 28%),linear-gradient(180deg,rgba(18,30,34,.98),rgba(5,7,8,.98))}
.gear-hero-copy{min-width:0}
.gear-action-row{margin-top:10px}
.gear-doll-wrap{display:grid;gap:8px;align-content:start}
.paper-doll-frame{position:relative;width:100%;max-width:360px;margin:0 auto;border:1px solid rgba(148,105,38,.72);border-radius:8px;background:#050708;box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,232,170,.035);overflow:hidden}
.paper-doll-scene{position:relative;aspect-ratio:320/420;min-height:320px;background:radial-gradient(circle at 42% 14%,rgba(255,230,170,.18),transparent 18%),radial-gradient(circle at 68% 34%,rgba(125,183,255,.08),transparent 22%),linear-gradient(180deg,#182127 0%,#090d0e 54%,#070504 100%);overflow:hidden}
.paper-doll-scene::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 22%,transparent 78%,rgba(0,0,0,.55)),radial-gradient(ellipse at center,transparent 0 48%,rgba(0,0,0,.68) 100%);z-index:4;pointer-events:none}
.paper-doll-scene::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px),linear-gradient(135deg,rgba(255,235,185,.07),transparent 28%,rgba(0,0,0,.18));mix-blend-mode:soft-light}
.paper-doll-haze{position:absolute;left:-20%;right:-20%;bottom:18%;height:34%;background:radial-gradient(ellipse at center,rgba(211,199,176,.14),transparent 66%);filter:blur(9px);animation:paper-doll-haze 11s ease-in-out infinite}
.paper-doll-ground{position:absolute;left:6%;right:6%;bottom:7%;height:18%;background:radial-gradient(ellipse at center,rgba(240,200,91,.16),transparent 64%);filter:blur(4px);transform-origin:50% 50%;animation:paper-doll-shadow-pulse 7.8s ease-in-out infinite}
.paper-doll{position:absolute;inset:0;z-index:3}
.paper-doll-avatar{position:absolute;inset:0;z-index:6;transform-origin:50% 78%;pointer-events:none;will-change:transform}
.paper-doll-root{contain:layout paint}
.paper-doll-state-idle .paper-doll-avatar{animation:paper-doll-root-idle 7.8s ease-in-out infinite}
.paper-doll-state-combatIdle .paper-doll-avatar{animation:paper-doll-combat-idle 5.8s ease-in-out infinite}
.paper-doll-state-hudIdle .paper-doll-avatar{animation:paper-doll-hud-idle 8.4s ease-in-out infinite}
.paper-doll-generated-stack{position:absolute;inset:0;transform-origin:50% 74%;animation:paper-doll-body-breathe 7.8s ease-in-out infinite}
.paper-doll-generated{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;z-index:6;--paper-doll-scale:1;transform:scale(var(--paper-doll-scale));transform-origin:50% 78%;filter:drop-shadow(0 16px 14px rgba(0,0,0,.7)) saturate(1.06) contrast(1.04);animation:paper-doll-visible-breathe 7.8s ease-in-out infinite}
.paper-doll-pose-fallback .paper-doll-generated{filter:drop-shadow(0 16px 14px rgba(0,0,0,.7)) saturate(1.04) contrast(1.04)}
.paper-doll-visual-hurt .paper-doll-generated{filter:drop-shadow(0 16px 14px rgba(0,0,0,.72)) saturate(.92) contrast(1.08) brightness(.9)}
.paper-doll-visual-block .paper-doll-generated{filter:drop-shadow(0 16px 14px rgba(0,0,0,.72)) saturate(.98) contrast(1.08) brightness(.94)}
.paper-doll-visual-defeated .paper-doll-generated{filter:grayscale(.35) drop-shadow(0 16px 14px rgba(0,0,0,.72)) saturate(.72) brightness(.72)}
.paper-doll-generated-base{--paper-doll-scale:.97}
.paper-doll-generated-rusted{--paper-doll-scale:.98}
.paper-doll-generated-road{--paper-doll-scale:.98}
.paper-doll-generated-knight{--paper-doll-scale:.98}
.paper-doll-gear-badges{position:absolute;inset:0;z-index:14;pointer-events:none;transform-origin:50% 74%;animation:paper-doll-gear-follow 7.8s ease-in-out infinite}
.paper-doll-gear-badge{position:absolute;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(216,183,105,.74);border-radius:8px;background:radial-gradient(circle at 35% 22%,rgba(255,232,170,.14),transparent 32%),linear-gradient(145deg,rgba(13,20,22,.94),rgba(4,6,7,.98));box-shadow:0 8px 16px rgba(0,0,0,.42),inset 0 0 12px rgba(0,0,0,.45);overflow:hidden}
.paper-doll-gear-badge img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 4px rgba(0,0,0,.55)) saturate(1.06) contrast(1.05)}
.paper-doll-gear-weapon{left:8px;bottom:9px;animation:paper-doll-weapon-bob 6.9s ease-in-out infinite}
.paper-doll-gear-offhand{right:8px;bottom:9px;animation:paper-doll-offhand-bob 7.2s ease-in-out infinite}
.paper-doll-gear-helmet{left:8px;top:9px}
.paper-doll-gear-chest{right:8px;top:9px}
.paper-doll-gear-shoulders{left:8px;top:59px}
.paper-doll-gear-boots{right:8px;top:59px}
.paper-doll-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 12px 12px rgba(0,0,0,.45)) saturate(1.04) contrast(1.03)}
.paper-doll-motion-body,.paper-doll-motion-armor{transform-origin:50% 75%;animation:paper-doll-body-breathe 7.8s ease-in-out infinite}
.paper-doll-motion-head{transform-origin:50% 42%;animation:paper-doll-head-follow 7.8s ease-in-out infinite}
.paper-doll-motion-weapon{transform-origin:44% 74%;animation:paper-doll-weapon-bob 6.9s ease-in-out infinite}
.paper-doll-motion-offhand{transform-origin:56% 74%;animation:paper-doll-offhand-bob 7.2s ease-in-out infinite}
.paper-doll-motion-cape{transform-origin:50% 22%;animation:paper-doll-cape-sway 9.2s ease-in-out infinite}
.paper-doll-motion-glow{animation:paper-doll-glow-pulse 6.8s ease-in-out infinite}
.paper-doll-layer-base{filter:drop-shadow(0 16px 16px rgba(0,0,0,.68))}
.paper-doll-layer-auraBack{z-index:0}
.paper-doll-layer-cloak{z-index:1}
.paper-doll-layer-base{z-index:2}
.paper-doll-layer-legs{z-index:3}
.paper-doll-layer-boots{z-index:4}
.paper-doll-layer-chest{z-index:5}
.paper-doll-layer-belt{z-index:6}
.paper-doll-layer-gloves{z-index:7}
.paper-doll-layer-shoulders{z-index:8}
.paper-doll-layer-head{z-index:9}
.paper-doll-layer-helmet{z-index:10}
.paper-doll-layer-offhand{z-index:11}
.paper-doll-layer-weapon{z-index:12}
.paper-doll-layer-auraFront,.paper-doll-layer-classOverlay{z-index:13}
.gear-slot-grid,.gear-inventory-grid{display:grid;grid-template-columns:1fr;gap:10px}
.gear-slot-card,.gear-item-card{display:grid;align-content:start;gap:8px;margin:0}
.gear-item-card.better{border-color:#75ee88;box-shadow:0 0 14px rgba(117,238,136,.14),inset 0 1px 0 rgba(255,255,255,.025)}
.gear-item-line{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center}
.gear-item-copy{min-width:0}
.gear-item-copy h3{margin-bottom:3px;overflow-wrap:anywhere}
.gear-item-copy p{margin:0 0 4px;font-size:12px}
.item-icon{position:relative;display:grid;place-items:center;width:64px;height:64px;border:1px solid #344e5b;border-radius:8px;background:radial-gradient(circle at 35% 20%,rgba(255,232,170,.13),transparent 28%),linear-gradient(145deg,#111b1e,#050708 72%);box-shadow:0 8px 18px rgba(0,0,0,.32),inset 0 0 22px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.06)}
.item-icon img{width:100%;height:100%;object-fit:contain;border-radius:8px;filter:drop-shadow(0 7px 5px rgba(0,0,0,.58)) saturate(1.07) contrast(1.05)}
.item-icon::after{content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 34%,rgba(0,0,0,.16))}
.item-icon-empty{opacity:.45}
.quality-pill{border-radius:6px}
.item-icon.quality-poor,.quality-pill.quality-poor{border-color:#5b5b55!important;box-shadow:0 0 10px rgba(0,0,0,.28)}
.item-icon.quality-common,.quality-pill.quality-common{border-color:#6d765f!important;box-shadow:0 0 10px rgba(177,181,126,.08)}
.item-icon.quality-fine,.quality-pill.quality-fine{border-color:#b68d3d!important;box-shadow:0 0 14px rgba(240,200,91,.15)}
.item-icon.quality-rare,.quality-pill.quality-rare{border-color:#d7bd74!important;box-shadow:0 0 18px rgba(240,200,91,.25)}
.item-icon.quality-effect,.quality-pill.quality-effect{border-color:#7db7ff!important;box-shadow:0 0 16px rgba(125,183,255,.18)}
.quality-card-poor{background:linear-gradient(180deg,#0e1517,#090909)}
.quality-card-common{background:linear-gradient(180deg,#0e191d,#091012)}
.quality-card-fine{background:linear-gradient(180deg,#171710,#0a0b0a)}
.quality-card-rare{background:radial-gradient(circle at 82% 18%,rgba(240,200,91,.11),transparent 30%),linear-gradient(180deg,#17150e,#090908)}
.paper-doll-frame-compact{max-width:176px}
.paper-doll-frame-compact .paper-doll-scene{min-height:230px}
.paper-doll-frame-hud{width:58px;max-width:58px;border-radius:8px}
.paper-doll-frame-hud .paper-doll-scene{min-height:74px;aspect-ratio:3/4}
.paper-doll-frame-hud .paper-doll-haze,.paper-doll-frame-hud .paper-doll-ground{display:none}
.paper-doll-frame-hud .paper-doll-avatar{animation:paper-doll-hud-idle 9s ease-in-out infinite;transform-origin:50% 80%}
.paper-doll-frame-hud .paper-doll-generated-stack,
.paper-doll-frame-hud .paper-doll-gear-badges,
.paper-doll-frame-hud .paper-doll-motion-body,
.paper-doll-frame-hud .paper-doll-motion-armor,
.paper-doll-frame-hud .paper-doll-motion-head{
  animation-duration:9s;
}
.paper-doll-frame-hud .paper-doll-generated{--paper-doll-scale:1.18;object-position:center bottom;animation-duration:9s}
.paper-doll-frame-hud .paper-doll-gear-badge{width:15px;height:15px;border-radius:4px}
.paper-doll-frame-hud .paper-doll-gear-weapon{left:2px;bottom:2px}
.paper-doll-frame-hud .paper-doll-gear-offhand{right:2px;bottom:2px}
.paper-doll-frame-hud .paper-doll-gear-helmet{left:2px;top:2px}
.paper-doll-frame-hud .paper-doll-gear-chest{right:2px;top:2px}
.paper-doll-frame-hud .paper-doll-gear-shoulders{display:none}
.paper-doll-frame-hud .paper-doll-gear-boots{display:none}
.paper-doll-frame-combat{width:88px;max-width:88px;border-radius:8px}
.paper-doll-frame-combat .paper-doll-scene{min-height:132px;aspect-ratio:2/3}
.paper-doll-frame-combat .paper-doll-generated{--paper-doll-scale:1.12;object-position:center bottom;animation-duration:6s}
.paper-doll-frame-combat .paper-doll-gear-badge{width:24px;height:24px;border-radius:6px}
.paper-doll-frame-combat .paper-doll-gear-weapon{left:4px;bottom:4px}
.paper-doll-frame-combat .paper-doll-gear-offhand{right:4px;bottom:4px}
.paper-doll-frame-combat .paper-doll-gear-helmet{left:4px;top:4px}
.paper-doll-frame-combat .paper-doll-gear-chest{right:4px;top:4px}

/* Atlas-backed art identity layer. The earlier CSS portrait primitives are left below this layer as fallbacks only. */
.combat-shell{border-color:rgba(148,105,38,.92);background:#030405;box-shadow:0 26px 70px rgba(0,0,0,.62),inset 0 0 0 1px rgba(255,232,170,.035)}
.combat-shell::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.72),transparent 12%,transparent 88%,rgba(0,0,0,.72)),linear-gradient(180deg,rgba(255,226,150,.055),transparent 18%,rgba(0,0,0,.36))}
.combat-header,.combat-stage,.combat-actions{background:linear-gradient(180deg,rgba(10,15,16,.88),rgba(3,5,6,.92));border-color:rgba(137,102,45,.82);backdrop-filter:blur(2px);box-shadow:0 12px 30px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035)}
.combat-stage{background:linear-gradient(180deg,rgba(13,21,22,.74),rgba(4,6,7,.86));box-shadow:0 16px 44px rgba(0,0,0,.36),inset 0 0 28px rgba(0,0,0,.25)}
.combat-card{border-color:rgba(127,98,49,.78);background:linear-gradient(145deg,rgba(20,29,31,.92),rgba(4,7,8,.96));box-shadow:0 12px 28px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,232,170,.035)}
.unit.combat-card{background:linear-gradient(145deg,rgba(18,30,31,.94),rgba(5,8,9,.96))}
.enemy.combat-card{background:linear-gradient(145deg,rgba(33,13,15,.92),rgba(6,5,5,.96));border-color:rgba(139,58,58,.82)}
.enemy.target{border-color:#f0c85b;box-shadow:0 0 0 1px rgba(240,200,91,.55),0 0 24px rgba(240,200,91,.34),0 14px 32px rgba(0,0,0,.38)}
.combat-card::before{background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 28%),radial-gradient(circle at 20% 20%,rgba(240,200,91,.09),transparent 28%),linear-gradient(0deg,rgba(0,0,0,.36),transparent)}
.combat-name b{text-shadow:0 1px 0 #000,0 0 12px rgba(240,200,91,.12)}
.combat-tier-rare .combat-header,.combat-tier-boss .combat-header,.combat-tier-legendary .combat-header{border-color:rgba(226,185,98,.9);box-shadow:0 16px 40px rgba(0,0,0,.44),0 0 28px rgba(240,200,91,.12),inset 0 1px 0 rgba(255,255,255,.05)}
.combat-tier-boss .combat-stage,.combat-tier-legendary .combat-stage{background:linear-gradient(180deg,rgba(27,14,14,.82),rgba(4,5,6,.9));border-color:rgba(139,58,58,.84)}
.combat-shell.combat-tier-legendary::before,.combat-shell.combat-tier-boss::before{background:linear-gradient(90deg,rgba(0,0,0,.76),transparent 12%,transparent 88%,rgba(0,0,0,.76)),radial-gradient(circle at 77% 24%,rgba(112,218,90,.1),transparent 24%),linear-gradient(180deg,rgba(255,226,150,.08),transparent 18%,rgba(0,0,0,.42))}
.major-enemy-card{grid-template-columns:128px minmax(0,1fr);border-color:rgba(226,185,98,.72);box-shadow:0 0 0 1px rgba(240,200,91,.22),0 16px 34px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,232,170,.06)}
.major-enemy-card .portrait-wrap{min-height:154px}
.major-enemy-card .portrait-art{min-height:154px}
.major-legendary{background:linear-gradient(145deg,rgba(40,9,10,.94),rgba(5,5,5,.97));border-color:rgba(137,222,94,.72)}
.major-boss{background:linear-gradient(145deg,rgba(41,16,14,.94),rgba(5,5,5,.97))}
.major-rare{background:linear-gradient(145deg,rgba(17,31,36,.94),rgba(5,6,7,.97));border-color:rgba(139,190,208,.74)}
.battle-log .log{max-height:190px;background:linear-gradient(180deg,rgba(3,5,6,.96),rgba(9,8,7,.96));border-color:rgba(101,77,37,.72);box-shadow:inset 0 0 24px rgba(0,0,0,.62)}
.actions .grid3 button{border-color:rgba(138,106,54,.88)}
.actions .grid3 button.primary{box-shadow:0 3px 0 rgba(0,0,0,.45),0 0 16px rgba(240,200,91,.16),inset 0 1px 0 rgba(255,255,255,.14)}

.portrait-wrap{filter:drop-shadow(0 12px 16px rgba(0,0,0,.5))}
.portrait-art{isolation:isolate;background-color:#060708;background-image:url("./assets/portraits-atlas.png");background-size:400% 400%;background-position:var(--portrait-x) var(--portrait-y);background-repeat:no-repeat;border:1px solid rgba(222,189,112,.38);border-radius:7px;box-shadow:inset 0 0 0 1px rgba(255,246,210,.08),inset 0 -28px 40px rgba(0,0,0,.36),0 10px 24px rgba(0,0,0,.44)}
.portrait-art span{position:absolute;display:block;pointer-events:none}
.portrait-grain{inset:0;z-index:1;background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 6px);mix-blend-mode:overlay;opacity:.5}
.portrait-shadow{inset:0;z-index:2;background:radial-gradient(circle at 50% 28%,transparent 0 24%,rgba(0,0,0,.18) 48%,rgba(0,0,0,.7) 100%),linear-gradient(180deg,rgba(0,0,0,.08),transparent 38%,rgba(0,0,0,.48));box-shadow:inset 0 0 32px rgba(0,0,0,.68)}
.portrait-glow{z-index:3;inset:auto -16% -14% -16%;height:42%;opacity:.78;filter:blur(1px);background:radial-gradient(ellipse at center,rgba(240,200,91,.2),transparent 62%)}
.portrait-frame{z-index:4;inset:0;border-radius:7px;border:1px solid rgba(255,232,170,.18);box-shadow:inset 0 0 0 2px rgba(0,0,0,.45),inset 0 0 18px rgba(255,232,170,.08)}
.portrait-art[data-tone="ember"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(255,108,44,.34),transparent 62%)}
.portrait-art[data-tone="shadow"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(63,125,78,.24),transparent 64%)}
.portrait-art[data-tone="arcane"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(126,100,255,.36),transparent 62%)}
.portrait-art[data-tone="wild"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(116,142,73,.3),transparent 64%)}
.portrait-art[data-tone="gold"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(255,216,111,.35),transparent 62%)}
.portrait-art[data-tone="bone"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(220,213,184,.22),transparent 64%)}
.portrait-art[data-tone="violet"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(166,70,194,.36),transparent 62%)}
.portrait-art[data-tone="beast"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(91,114,119,.28),transparent 64%)}
.portrait-art[data-tone="rust"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(154,87,45,.32),transparent 64%)}
.portrait-art[data-tone="cold"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(104,161,211,.3),transparent 64%)}
.portrait-art[data-tone="blood"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(180,38,38,.42),transparent 64%)}
.portrait-art[data-tone="steel"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(116,158,177,.28),transparent 64%)}
.portrait-art[data-tone="plague"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(115,220,89,.34),transparent 64%)}
.portrait-art[data-tone="radiant"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(255,220,122,.48),transparent 62%)}
.portrait-art[data-tone="ash"] .portrait-glow{background:radial-gradient(ellipse at center,rgba(218,121,55,.26),transparent 64%)}
.portrait-unique{background-image:var(--portrait-image)!important;background-size:cover!important;background-position:center!important;border-color:rgba(226,185,98,.6);box-shadow:inset 0 0 0 1px rgba(255,246,210,.12),inset 0 -30px 46px rgba(0,0,0,.34),0 14px 32px rgba(0,0,0,.55);animation:portrait-breathe 7s ease-in-out infinite}
.portrait-unique .portrait-shadow{background:radial-gradient(circle at 50% 30%,transparent 0 36%,rgba(0,0,0,.16) 54%,rgba(0,0,0,.68) 100%),linear-gradient(180deg,rgba(0,0,0,.02),transparent 42%,rgba(0,0,0,.5))}
.portrait-legendary{border-color:rgba(255,216,118,.82);box-shadow:inset 0 0 0 1px rgba(255,246,210,.18),inset 0 -34px 52px rgba(0,0,0,.36),0 0 26px rgba(240,200,91,.22),0 16px 36px rgba(0,0,0,.6)}
.portrait-diseased-dragon{border-color:rgba(138,218,91,.72);box-shadow:inset 0 0 0 1px rgba(202,255,165,.18),inset 0 -34px 52px rgba(0,0,0,.32),0 0 30px rgba(115,220,89,.16),0 16px 38px rgba(0,0,0,.64)}
.portrait-ser-kael{border-color:rgba(255,223,132,.92)}
.portrait-tutorial-skeleton{border-color:rgba(214,205,176,.62)}
.portrait-boss-tier{border-color:rgba(214,92,66,.72)}
.portrait-story .portrait-frame{box-shadow:inset 0 0 0 2px rgba(0,0,0,.48),inset 0 0 22px rgba(255,232,170,.12),0 0 0 1px rgba(255,246,210,.08)}
.portrait-story::before{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse at 45% 18%,rgba(255,232,170,.08),transparent 24%),radial-gradient(ellipse at 50% 80%,rgba(225,225,210,.08),transparent 45%);mix-blend-mode:screen;opacity:.8;pointer-events:none}
.portrait-story::after{content:"";position:absolute;inset:-30% -60%;z-index:3;background:linear-gradient(115deg,transparent 36%,rgba(255,246,210,.16) 48%,transparent 60%);animation:portrait-sheen 7s ease-in-out infinite;pointer-events:none}
.portrait-diseased-dragon .portrait-glow{height:54%;background:radial-gradient(ellipse at center,rgba(123,235,82,.42),rgba(145,44,28,.16) 44%,transparent 68%)}
.portrait-diseased-dragon{background-size:116%!important;background-position:52% 42%!important}
.portrait-ser-kael .portrait-glow{height:50%;background:radial-gradient(ellipse at center,rgba(255,238,165,.58),rgba(255,190,82,.22) 46%,transparent 70%)}
.portrait-ser-kael{background-size:108%!important;background-position:50% 42%!important}
.portrait-tutorial-skeleton .portrait-glow{background:radial-gradient(ellipse at center,rgba(228,221,198,.3),rgba(80,72,58,.12) 48%,transparent 68%)}
.portrait-tutorial-skeleton{background-size:110%!important;background-position:50% 43%!important}
.portrait-xexe-survivor{background-size:108%!important;background-position:50% 44%!important}
.tutorial-unit-card.visual-story,.tutorial-unit-card.visual-legendary{box-shadow:0 0 22px rgba(240,200,91,.1),inset 0 0 24px rgba(255,232,170,.035)}
.tutorial-unit-card.visual-story::after,.tutorial-unit-card.visual-legendary::after{content:"";position:absolute;inset:0;border-radius:8px;background:linear-gradient(115deg,transparent 0 42%,rgba(255,232,170,.08) 50%,transparent 58%);opacity:.76;pointer-events:none}
.class-path-card .portrait-art{box-shadow:inset 0 0 0 1px rgba(255,246,210,.12),inset 0 -32px 46px rgba(0,0,0,.38),0 0 18px rgba(240,200,91,.12),0 12px 26px rgba(0,0,0,.48)}
.class-path-card:hover .portrait-art{filter:saturate(1.08) brightness(1.05)}

.combat-backdrop{background-color:#060708;background-image:url("./assets/backdrops-atlas.png");background-size:200% 400%;background-position:var(--backdrop-x) var(--backdrop-y);background-repeat:no-repeat;filter:saturate(.95) contrast(1.12) brightness(.82)}
.combat-backdrop::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.34) 62%,rgba(0,0,0,.78)),radial-gradient(ellipse at center,transparent 0 40%,rgba(0,0,0,.64) 100%);pointer-events:none}
.combat-backdrop::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7px);mix-blend-mode:overlay;opacity:.45;pointer-events:none}
.scene-depth,.scene-silhouette,.scene-weather,.scene-fog,.scene-light,.scene-vignette{position:absolute;display:block;pointer-events:none}
.scene-depth{inset:0;background:linear-gradient(90deg,rgba(0,0,0,.58),transparent 22%,transparent 78%,rgba(0,0,0,.58))}
.scene-silhouette{left:0;right:0;bottom:0;height:38%;opacity:.55;background:linear-gradient(180deg,transparent,rgba(0,0,0,.62))}
.scene-weather{inset:0;opacity:.5}
.scene-light{right:4%;top:6%;width:42%;height:48%;border-radius:50%;filter:blur(5px);opacity:.72;background:radial-gradient(circle,rgba(240,200,91,.18),transparent 66%)}
.scene-fog{left:-20%;right:-20%;height:30%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(230,230,220,.16),transparent 68%);filter:blur(8px);animation:combat-fog 13s ease-in-out infinite}
.scene-fog-a{bottom:23%}
.scene-fog-b{bottom:4%;animation-duration:18s;animation-delay:-6s;opacity:.85}
.scene-vignette{inset:0;background:radial-gradient(ellipse at center,transparent 0 36%,rgba(0,0,0,.78) 100%)}
.backdrop-ashen-fields .scene-weather{background:radial-gradient(circle at 18% 62%,rgba(255,83,25,.22) 0 1px,transparent 2px),radial-gradient(circle at 73% 28%,rgba(255,154,53,.18) 0 1px,transparent 2px);background-size:34px 34px,46px 46px}
.backdrop-ashen-fields .scene-light{background:radial-gradient(circle,rgba(255,95,35,.32),transparent 66%);right:10%;top:8%}
.backdrop-forest .scene-depth{background:linear-gradient(90deg,rgba(0,0,0,.66),rgba(12,33,22,.1) 42%,rgba(0,0,0,.5))}
.backdrop-forest .scene-silhouette{height:56%;background:repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 8px,transparent 8px 32px),linear-gradient(180deg,transparent,rgba(0,0,0,.72))}
.backdrop-forest .scene-light{left:58%;top:0;background:radial-gradient(circle,rgba(166,210,194,.2),transparent 66%)}
.backdrop-ruins .scene-silhouette{height:44%;background:repeating-linear-gradient(90deg,rgba(170,178,178,.12) 0 18px,transparent 18px 58px),linear-gradient(180deg,transparent,rgba(0,0,0,.68))}
.backdrop-ruins .scene-light{left:5%;top:2%;background:radial-gradient(circle,rgba(126,181,222,.24),transparent 68%)}
.backdrop-road .scene-depth{background:linear-gradient(90deg,rgba(0,0,0,.62),transparent 32%,transparent 68%,rgba(0,0,0,.64))}
.backdrop-road .scene-silhouette{background:linear-gradient(180deg,transparent,rgba(36,20,12,.56) 55%,rgba(0,0,0,.8))}
.backdrop-town-outskirts .scene-light{left:4%;right:auto;top:34%;background:radial-gradient(circle,rgba(255,145,58,.34),transparent 64%)}
.backdrop-town-outskirts .scene-weather{background:linear-gradient(100deg,transparent 0 45%,rgba(255,178,86,.08) 46% 48%,transparent 50%)}
.backdrop-storm .scene-weather{opacity:.7;background:repeating-linear-gradient(105deg,rgba(196,224,255,.22) 0 1px,transparent 1px 9px)}
.backdrop-storm .scene-light{left:42%;top:0;background:radial-gradient(circle,rgba(157,206,255,.42),transparent 58%)}
.backdrop-hollow .scene-depth{background:linear-gradient(90deg,rgba(18,6,28,.62),transparent 42%,rgba(0,0,0,.66))}
.backdrop-hollow .scene-weather{background:radial-gradient(circle at 28% 48%,rgba(160,85,205,.12),transparent 18%),radial-gradient(circle at 70% 30%,rgba(97,62,144,.16),transparent 22%)}
.backdrop-hollow .scene-light{right:18%;top:12%;background:radial-gradient(circle,rgba(147,74,201,.22),transparent 64%)}
.backdrop-battlefield .scene-light{background:radial-gradient(circle,rgba(214,74,74,.22),transparent 66%)}
.backdrop-dragon-intro{filter:saturate(.82) contrast(1.24) brightness(.68)}
.backdrop-dragon-intro .scene-weather{opacity:.65;background:radial-gradient(circle at 22% 66%,rgba(115,220,89,.16),transparent 18%),radial-gradient(circle at 76% 24%,rgba(214,74,74,.16),transparent 20%),repeating-linear-gradient(104deg,rgba(255,120,70,.08) 0 1px,transparent 1px 10px)}
.backdrop-dragon-intro .scene-light{right:2%;top:0;background:radial-gradient(circle,rgba(115,220,89,.25),transparent 58%)}

.hit-flash{animation:hit-flash .42s ease-out}
.damage-pop{top:12px;padding:3px 9px;border-radius:8px;background:linear-gradient(180deg,rgba(61,9,8,.97),rgba(22,5,5,.97));border-color:#ff7965;color:#fff2e8;font-size:15px;letter-spacing:0;text-shadow:0 1px 0 #000;box-shadow:0 0 18px rgba(255,84,60,.44),0 8px 18px rgba(0,0,0,.42);animation:damage-pop .72s cubic-bezier(.19,.92,.31,1) forwards}
.damage-pop.heal{background:linear-gradient(180deg,rgba(8,56,26,.97),rgba(3,18,9,.97));box-shadow:0 0 18px rgba(117,238,136,.34),0 8px 18px rgba(0,0,0,.42)}
.damage-pop.mana{background:linear-gradient(180deg,rgba(8,35,75,.97),rgba(3,11,26,.97));box-shadow:0 0 18px rgba(125,183,255,.34),0 8px 18px rgba(0,0,0,.42)}
.damage-pop.miss{background:linear-gradient(180deg,rgba(60,45,17,.97),rgba(18,13,5,.97));box-shadow:0 0 18px rgba(240,200,91,.34),0 8px 18px rgba(0,0,0,.42)}

.world-panel{padding:8px}
.world-scene{position:relative;min-height:300px;overflow:hidden;border:1px solid rgba(144,106,42,.86);border-radius:10px;background-color:#070809;background-image:url("./assets/backdrops-atlas.png");background-size:200% 400%;background-position:var(--world-x) var(--world-y);background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(255,232,170,.06),0 18px 44px rgba(0,0,0,.38);isolation:isolate}
.world-scene::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.14) 42%,rgba(0,0,0,.52)),linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.62));pointer-events:none}
.world-scene span{position:absolute;display:block;pointer-events:none}
.world-scene-depth{inset:0;background:radial-gradient(ellipse at 55% 36%,transparent 0 35%,rgba(0,0,0,.72) 100%)}
.world-scene-weather{inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 7px);mix-blend-mode:overlay}
.world-scene-fog{left:-15%;right:-15%;bottom:8%;height:32%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(230,230,220,.14),transparent 68%);filter:blur(9px);animation:combat-fog 16s ease-in-out infinite}
.world-scene-vignette{inset:0;background:radial-gradient(ellipse at center,transparent 0 38%,rgba(0,0,0,.78) 100%)}
.world-scene-copy{position:relative;z-index:1;max-width:720px;padding:24px;text-shadow:0 2px 0 #000,0 0 24px rgba(0,0,0,.65)}
.world-scene-copy .hero-title{margin-top:12px}
.world-columns{display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px}
.world-services{margin-top:14px}
.route-meta{display:block;color:#d5bf92;font-size:12px;margin-top:4px}
.world-return{width:100%;margin-top:8px}
.world-map-grid{display:grid;grid-template-columns:1fr;gap:10px}
.world-map-node.current-node{border-color:#f0c85b;box-shadow:0 0 18px rgba(240,200,91,.18)}
.location-home-head{display:grid;grid-template-columns:1fr;gap:10px;align-items:start;margin-bottom:10px}
.location-home-head h1{margin-bottom:4px}
.location-home-head p{margin:0}
.location-info-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.home-location-panel .location-stage{min-height:64vh}
.map-route-list{display:grid;grid-template-columns:1fr;gap:10px}
.map-route-card{display:grid;gap:6px}
.map-route-card h2{margin-bottom:0}
.map-route-card p{margin:0}
.service-return-panel{padding:8px;background:linear-gradient(180deg,rgba(12,18,20,.98),rgba(5,7,8,.98))}
.overworld-panel{padding:10px}
.overworld-shell{position:relative}
.overworld-map{position:relative;min-height:68vh;max-height:760px;aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(148,105,38,.92);border-radius:10px;background:#060708 url("./assets/overworld-map-v12.png") center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,232,170,.06),0 22px 58px rgba(0,0,0,.48);isolation:isolate}
.overworld-map::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(0,0,0,.5),transparent 20%,transparent 78%,rgba(0,0,0,.58)),radial-gradient(ellipse at center,transparent 0 45%,rgba(0,0,0,.62) 100%);pointer-events:none}
.overworld-map::after{content:"";position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7px);mix-blend-mode:overlay;pointer-events:none}
.overworld-roads{position:absolute;inset:0;z-index:2;width:100%;height:100%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.72));pointer-events:none}
.overworld-route-shadow{fill:none;stroke:rgba(8,5,2,.62);stroke-width:.72;stroke-linecap:round;stroke-linejoin:round;opacity:.66}
.overworld-route-highlight{fill:none;stroke:rgba(241,205,122,.72);stroke-width:.34;stroke-linecap:round;stroke-linejoin:round;opacity:.76;stroke-dasharray:4.2 3.2}
.overworld-route-stones{fill:none;stroke:rgba(255,235,184,.72);stroke-width:.68;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.15 8.8;stroke-dashoffset:2.1;opacity:.7;filter:drop-shadow(0 1px 1px rgba(0,0,0,.72))}
.overworld-map:has(.overworld-node:hover) .overworld-route-highlight,.overworld-map:has(.current-node) .overworld-route-highlight{opacity:.9}
.overworld-map:has(.overworld-node:hover) .overworld-route-stones{opacity:.9;filter:drop-shadow(0 0 3px rgba(240,200,91,.36))}
.route-debug-point{display:none;fill:#75ee88;stroke:#061207;stroke-width:.12;filter:drop-shadow(0 0 2px rgba(117,238,136,.9))}
.route-debug-on .route-debug-point{display:block}
.route-debug-on .overworld-route-highlight{stroke:#75ee88;stroke-width:.55;opacity:.95}
.overworld-node{position:absolute;left:var(--node-x);top:var(--node-y);z-index:4;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:3px;width:112px;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:#f6e8d0;text-shadow:0 2px 2px #000,0 0 12px rgba(0,0,0,.9)}
.overworld-node:disabled{opacity:.62;filter:none}
.overworld-node:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.04);box-shadow:none}
.node-sigil{width:22px;height:22px;border:2px solid rgba(255,232,170,.88);border-radius:50%;background:radial-gradient(circle,#ffe6a2 0 20%,#a06d1e 22% 42%,rgba(18,12,4,.95) 44%);box-shadow:0 0 16px rgba(240,200,91,.52),0 4px 8px rgba(0,0,0,.7)}
.current-node .node-sigil{background:radial-gradient(circle,#ffffff 0 18%,#75ee88 20% 42%,rgba(10,27,13,.95) 44%);box-shadow:0 0 20px rgba(117,238,136,.68),0 4px 8px rgba(0,0,0,.7)}
.node-label{max-width:122px;padding:3px 7px;border:1px solid rgba(116,84,34,.84);border-radius:999px;background:rgba(4,7,8,.8);font-size:12px;font-weight:950;white-space:normal;line-height:1.05}
.node-danger{padding:1px 6px;border-radius:999px;background:rgba(31,24,8,.8);border:1px solid rgba(139,107,44,.75);font-size:10px;color:#ffe08a}
.travel-stop{position:absolute;left:var(--stop-x);top:var(--stop-y);z-index:3;transform:translate(-50%,-50%);width:13px;height:13px;pointer-events:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.78))}
.travel-stop span{position:absolute;inset:2px;border:1px solid rgba(230,200,134,.72);border-radius:50%;background:radial-gradient(circle,#d8b66a 0 18%,#5c421d 22% 58%,rgba(9,7,5,.92) 62%);box-shadow:0 0 7px rgba(230,190,102,.18)}
.travel-stop::after{content:attr(aria-label);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%) translateY(4px);min-width:max-content;max-width:150px;padding:3px 6px;border:1px solid rgba(176,131,61,.82);border-radius:6px;background:rgba(4,7,8,.94);color:#f6e8d0;font-size:10px;font-weight:950;line-height:1.1;text-align:center;text-shadow:none;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;box-shadow:0 8px 16px rgba(0,0,0,.55)}
.travel-stop:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.active-travel-stop span{border-color:rgba(255,232,170,.95);background:radial-gradient(circle,#fff1ba 0 20%,#b9862d 22% 56%,rgba(18,12,4,.95) 60%);box-shadow:0 0 13px rgba(240,200,91,.52)}
.overworld-marker{position:absolute;left:var(--marker-x);top:var(--marker-y);z-index:6;transform:translate(-50%,-120%);width:28px;height:36px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.82))}
.overworld-marker span{position:absolute;inset:0;border:2px solid rgba(255,232,170,.95);border-radius:50% 50% 50% 0;background:linear-gradient(180deg,#d9f1ff,#7db7ff 42%,#1c3c6b);transform:rotate(-45deg);box-shadow:0 0 22px rgba(125,183,255,.75),inset 0 0 8px rgba(255,255,255,.35)}
.overworld-marker span::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#071016;transform:translate(-50%,-50%)}
.marker-traveling{left:var(--marker-x);top:var(--marker-y);transition:left .18s linear,top .18s linear;animation:marker-travel-pulse 1.2s ease-in-out infinite}
.marker-traveling span{transform:rotate(calc(-45deg + var(--marker-angle)))}
.map-activity-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.map-activity-layer span{position:absolute;display:block}
.map-static-atmosphere,.map-events,.map-entities{position:absolute;inset:0;pointer-events:none}
.map-atmosphere{inset:0;z-index:1;pointer-events:none}
.map-mist{background:radial-gradient(ellipse at 18% 32%,rgba(221,226,212,.13),transparent 34%),radial-gradient(ellipse at 72% 58%,rgba(190,205,194,.1),transparent 38%),radial-gradient(ellipse at 46% 72%,rgba(140,154,146,.07),transparent 42%);filter:blur(9px);opacity:.52;animation:map-mist-drift 39s ease-in-out infinite}
.map-mist-b{opacity:.34;animation-duration:44s;animation-delay:-13s;transform:translateX(-7%)}
.map-rain{opacity:.07;background:linear-gradient(108deg,transparent 0 18%,rgba(150,184,206,.32) 19%,transparent 20% 38%,rgba(150,184,206,.18) 39%,transparent 40% 100%);background-size:92px 160px;animation:map-rain-fall 1.55s linear infinite;mask-image:radial-gradient(ellipse at 62% 42%,#000 0 44%,transparent 75%)}
.map-rain::after{content:"";position:absolute;inset:0;background:linear-gradient(104deg,transparent 0 9%,rgba(177,205,222,.22) 10%,transparent 11% 56%,rgba(177,205,222,.14) 57%,transparent 58% 100%);background-size:138px 210px;animation:map-rain-fall-soft 2.35s linear infinite;opacity:.7}
.map-ash{opacity:.16;background:radial-gradient(circle at 12% 18%,rgba(215,145,83,.36) 0 1px,transparent 2px),radial-gradient(circle at 44% 62%,rgba(215,145,83,.24) 0 1px,transparent 2px),radial-gradient(circle at 78% 34%,rgba(218,202,170,.18) 0 1px,transparent 2px),radial-gradient(circle at 25% 86%,rgba(215,145,83,.2) 0 1px,transparent 2px);background-size:108px 132px;animation:map-ash-drift 27s linear infinite}
.map-weather-zone{z-index:2;left:var(--activity-x);top:var(--activity-y);width:var(--weather-size);height:var(--weather-size);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.map-weather-fog{background:radial-gradient(ellipse at center,rgba(225,231,218,.18),rgba(196,206,190,.08) 44%,transparent 72%);filter:blur(7px);animation:weather-fog-breathe 9s ease-in-out infinite}
.map-weather-rain{overflow:hidden;background:radial-gradient(ellipse at center,rgba(96,130,152,.16),rgba(196,206,190,.08) 44%,transparent 73%);opacity:.64;filter:blur(.1px)}
.map-weather-rain::before{content:"";position:absolute;inset:-20%;background:linear-gradient(108deg,transparent 0 18%,rgba(145,185,213,.44) 19%,transparent 20% 46%,rgba(145,185,213,.24) 47%,transparent 48% 100%);background-size:52px 96px;animation:map-rain-fall .82s linear infinite}
.map-weather-rain::after{content:"";position:absolute;inset:-20%;background:linear-gradient(102deg,transparent 0 28%,rgba(190,213,225,.22) 29%,transparent 30% 72%,rgba(190,213,225,.16) 73%,transparent 74% 100%);background-size:78px 132px;animation:map-rain-fall 1.35s linear infinite;opacity:.8}
.map-weather-ash{background:radial-gradient(ellipse at center,rgba(158,71,38,.15),transparent 70%);filter:blur(.2px)}
.map-weather-ash::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 24% 28%,rgba(232,130,72,.42) 0 1px,transparent 2px),radial-gradient(circle at 68% 54%,rgba(210,165,112,.28) 0 1px,transparent 2px),radial-gradient(circle at 42% 78%,rgba(232,130,72,.32) 0 1px,transparent 2px);background-size:48px 54px;animation:map-ash-drift 13s linear infinite}
.map-entity{left:var(--activity-x);top:var(--activity-y);z-index:4;width:28px;height:28px;transform:translate(-50%,-50%);filter:drop-shadow(0 5px 6px rgba(0,0,0,.82));pointer-events:auto;transition:left .44s linear,top .44s linear;animation:entity-idle 2.8s ease-in-out infinite}
.map-entity.is-paused{animation:entity-idle 2.8s ease-in-out infinite,entity-pause 1.6s ease-in-out infinite}
.entity-shadow{left:4px;right:4px;bottom:3px;height:5px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(2px)}
.entity-glow{inset:1px;border-radius:50%;opacity:.55;background:radial-gradient(circle,rgba(240,200,91,.22),transparent 66%);animation:entity-glow-pulse 2.4s ease-in-out infinite}
.entity-glyph{inset:4px;border:1px solid rgba(255,232,170,.78);background:#111;border-radius:4px;box-shadow:0 0 12px rgba(240,200,91,.22),inset 0 0 5px rgba(255,255,255,.16);transform:rotate(var(--entity-heading)) scaleX(var(--entity-flip));transform-origin:center}
.entity-glyph::before,.entity-glyph::after{content:"";position:absolute;display:block}
.entity-dust{right:18px;top:12px;width:22px;height:7px;border-radius:999px;background:radial-gradient(ellipse at center,rgba(180,135,72,.28),transparent 72%);opacity:0;animation:road-dust 1.8s ease-in-out infinite;transform:rotate(var(--entity-heading))}
.map-entity-caravan .entity-glyph{left:2px;right:1px;top:9px;bottom:7px;border-radius:3px 5px 3px 3px;background:linear-gradient(180deg,#be8f48 0 20%,#754b1d 21% 64%,#241408 65%);box-shadow:0 0 8px rgba(255,196,91,.18),inset 0 0 0 1px rgba(236,203,138,.28)}
.map-entity-caravan .entity-glyph::before,.map-entity-caravan .entity-glyph::after{bottom:-6px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,#2b1b0b 0 34%,#070504 36%);border:1px solid #c8994b;box-shadow:0 0 5px rgba(0,0,0,.8)}
.map-entity-caravan .entity-glyph::before{left:0}
.map-entity-caravan .entity-glyph::after{right:1px}
.map-entity-caravan::after{content:"";position:absolute;left:6px;top:4px;width:13px;height:8px;border:1px solid rgba(190,148,82,.78);border-bottom:0;border-radius:8px 8px 0 0;background:linear-gradient(180deg,rgba(67,42,18,.98),rgba(14,9,5,.98));transform:rotate(var(--entity-heading)) scaleX(var(--entity-flip));transform-origin:center}
.map-entity-patrol .entity-glyph{transform:none}
.map-entity-monster .entity-glyph{transform:rotate(var(--entity-heading)) scaleX(var(--entity-flip))}
.map-entity-caravan .entity-dust{opacity:.9}
.map-entity-caravan .entity-glow{background:radial-gradient(circle,rgba(255,190,82,.34),transparent 66%)}
.map-entity-patrol .entity-glyph{inset:2px 9px 4px;border-color:#9f794b;background:linear-gradient(180deg,#e7c47b 0 13%,#a95429 14% 32%,#1b313a 33% 100%);clip-path:polygon(50% 0,72% 32%,68% 100%,32% 100%,28% 32%);box-shadow:0 0 9px rgba(255,151,62,.34),0 0 5px rgba(125,183,255,.18)}
.map-entity-patrol .entity-glyph::before{left:50%;top:-4px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#fff3a9 0 20%,#ff8b32 22% 58%,transparent 62%);transform:translateX(-50%);animation:guard-torch-flicker .8s ease-in-out infinite}
.map-entity-patrol .entity-glyph::after{left:8px;top:6px;width:10px;height:8px;background:linear-gradient(90deg,#6f1f20,#2b1012);clip-path:polygon(0 0,100% 20%,100% 75%,0 100%);box-shadow:0 0 0 1px rgba(214,170,102,.35)}
.map-entity-patrol .entity-glow{background:radial-gradient(circle,rgba(255,148,54,.38),transparent 68%)}
.map-entity-monster .entity-glyph{inset:5px 2px 4px;border-color:rgba(104,35,31,.56);background:radial-gradient(circle at 35% 41%,#a92927 0 7%,transparent 9%),radial-gradient(circle at 62% 41%,#a92927 0 7%,transparent 9%),linear-gradient(180deg,#15100f,#020202);border-radius:52% 48% 38% 45%;clip-path:polygon(12% 42%,24% 13%,39% 31%,52% 14%,70% 35%,92% 43%,77% 100%,21% 100%);box-shadow:0 0 10px rgba(120,24,22,.34),inset 0 -5px 7px rgba(0,0,0,.9)}
.map-entity-monster .entity-glyph::before{left:50%;top:-3px;width:17px;height:10px;border-top:2px solid rgba(166,50,42,.75);border-left:2px solid rgba(166,50,42,.62);transform:translateX(-50%) rotate(45deg);opacity:.8}
.map-entity-monster .entity-glow{background:radial-gradient(circle,rgba(255,65,50,.24),transparent 68%)}
.map-entity-adventurer .entity-glyph{inset:4px;border-color:#d8cba2;background:linear-gradient(180deg,#d8cba2,#3c3320);border-radius:50% 50% 48% 48%}
.map-event{left:var(--activity-x);top:var(--activity-y);z-index:5;width:30px;height:30px;transform:translate(-50%,-50%);filter:drop-shadow(0 7px 8px rgba(0,0,0,.86));pointer-events:auto}
.map-event::after,.map-entity::before{content:attr(aria-label);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%) translateY(4px);min-width:max-content;max-width:150px;padding:3px 6px;border:1px solid rgba(176,131,61,.82);border-radius:6px;background:rgba(4,7,8,.94);color:#f6e8d0;font-size:10px;font-weight:950;line-height:1.1;text-align:center;text-shadow:none;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;box-shadow:0 8px 16px rgba(0,0,0,.55)}
.map-event:hover::after,.map-entity:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
.event-glow{inset:0;border-radius:50%;background:radial-gradient(circle,rgba(240,200,91,.34),transparent 66%);animation:event-glow 2.4s ease-in-out infinite}
.event-glyph{left:50%;top:50%;width:16px;height:16px;transform:translate(-50%,-50%);border:1px solid rgba(255,232,170,.82);background:#140b05;box-shadow:0 0 14px rgba(240,200,91,.28)}
.map-event-campfire .event-glyph{clip-path:polygon(50% 0,74% 42%,64% 100%,36% 100%,26% 42%);background:linear-gradient(180deg,#ffe56c,#ff6a35 54%,#421008)}
.map-event-campfire .event-glow{background:radial-gradient(circle,rgba(255,110,44,.48),transparent 62%);animation:campfire-flicker 1.15s ease-in-out infinite}
.map-event-crashed-caravan .event-glyph{border-color:#caa568;background:linear-gradient(45deg,transparent 0 42%,#caa568 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 0 42%,#8b3a2a 42% 58%,transparent 58%),#120b07;transform:translate(-50%,-50%) rotate(18deg)}
.map-event-strange-glow .event-glyph{border-color:#9e86ff;background:radial-gradient(circle,#d7cbff 0 18%,#7d63ff 20% 44%,#120f28 46%);border-radius:50%;animation:portal-pulse 1.9s ease-in-out infinite}
.map-event-strange-glow .event-glow{background:radial-gradient(circle,rgba(125,99,255,.5),transparent 66%)}
.map-event-burning-village .event-glyph{background:linear-gradient(180deg,#ffb15a,#a92e24 55%,#120606);clip-path:polygon(50% 0,100% 42%,82% 100%,18% 100%,0 42%)}
.map-event-monster-nest .event-glyph{border-color:#79c45e;background:radial-gradient(circle,#79c45e 0 18%,#14200f 20%);border-radius:45% 55% 42% 58%}
.map-event-traveling-merchant .event-glyph{border-color:#ffe08a;background:linear-gradient(180deg,#ffe08a,#6e4a13);border-radius:4px}
.map-cloud{z-index:2;width:24%;height:13%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(220,220,210,.13),transparent 70%);filter:blur(7px);opacity:.62}
.map-cloud-a{left:-8%;top:12%;animation:map-cloud-drift 42s linear infinite}
.map-cloud-b{left:55%;top:26%;animation:map-cloud-drift-b 58s linear infinite}
.map-town-light{z-index:3;left:var(--activity-x);top:var(--activity-y);width:28px;height:28px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,184,76,.34),transparent 68%);animation:town-light-flicker 2.6s ease-in-out infinite}
.map-bird{z-index:4;width:22px;height:9px;border-top:2px solid rgba(20,16,10,.72);border-radius:50%;opacity:.75}
.map-bird::before{content:"";position:absolute;left:50%;top:-2px;width:18px;height:9px;border-top:2px solid rgba(20,16,10,.72);border-radius:50%;transform:translateX(-50%) rotate(18deg)}
.map-bird-a{left:18%;top:19%;animation:bird-cross 24s linear infinite}
.map-bird-b{left:72%;top:38%;animation:bird-cross-b 31s linear infinite}
.travel-banner{position:absolute;left:12px;right:12px;bottom:12px;z-index:7;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;border:1px solid rgba(148,105,38,.9);border-radius:8px;background:linear-gradient(180deg,rgba(8,12,13,.88),rgba(3,5,6,.94));padding:8px 10px;color:#f6e8d0;font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,.38);backdrop-filter:blur(2px)}
.travel-banner-active{border-color:rgba(240,200,91,.9);box-shadow:0 12px 28px rgba(0,0,0,.38),0 0 18px rgba(240,200,91,.12)}
.travel-banner button{min-height:34px;font-size:12px}
.road-stop-panel{border-color:rgba(176,131,61,.86);background:linear-gradient(180deg,rgba(13,15,13,.96),rgba(5,7,7,.98))}
.road-stop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.road-stop-head h2{margin-bottom:6px}
.road-stop-head p{margin:0;max-width:680px}
.road-stop-meta{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.location-panel{padding:10px}
.location-stage{position:relative;min-height:58vh;overflow:hidden;border:1px solid rgba(144,106,42,.86);border-radius:10px;background-color:#070809;background-image:url("./assets/backdrops-atlas.png");background-size:200% 400%;background-position:var(--world-x) var(--world-y);background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(255,232,170,.06),0 18px 44px rgba(0,0,0,.38);isolation:isolate}
.location-stage::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.1) 55%,rgba(0,0,0,.58)),linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.66));pointer-events:none}
.location-stage>span{position:absolute;display:block;pointer-events:none}
.location-stage-copy{position:relative;z-index:2;max-width:690px;padding:22px;text-shadow:0 2px 0 #000,0 0 22px rgba(0,0,0,.72)}
.location-stage-copy h2{font-size:34px}
.location-actions{position:absolute;z-index:5;left:16px;bottom:16px;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100% - 32px)}
.building-hotspot{position:absolute;left:var(--building-x);top:var(--building-y);z-index:4;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:5px;min-width:92px;min-height:0;padding:6px 8px;border:1px solid rgba(223,190,112,.66);background:linear-gradient(180deg,rgba(20,13,5,.82),rgba(4,6,7,.92));border-radius:8px;color:#ffe8bf;font-size:12px;box-shadow:0 10px 24px rgba(0,0,0,.46),0 0 18px rgba(240,200,91,.12)}
.building-hotspot:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.05);box-shadow:0 12px 28px rgba(0,0,0,.5),0 0 24px rgba(240,200,91,.28)}
.building-icon{position:relative;width:38px;height:28px;background:linear-gradient(180deg,#49361b,#15100a);clip-path:polygon(50% 0,100% 36%,88% 36%,88% 100%,12% 100%,12% 36%,0 36%);box-shadow:inset 0 0 0 1px rgba(255,232,170,.2)}
.building-icon::after{content:"";position:absolute;left:43%;bottom:0;width:14%;height:38%;background:#090605;box-shadow:0 0 10px rgba(255,166,68,.35)}
.building-blacksmith .building-icon{background:linear-gradient(180deg,#5d3a1d,#1a0d08)}
.building-tavern .building-icon,.building-inn .building-icon{background:linear-gradient(180deg,#4f3e20,#151007)}
.building-market .building-icon{background:linear-gradient(180deg,#51472a,#121008)}
.building-mine .building-icon{clip-path:polygon(15% 100%,32% 30%,50% 0,68% 30%,85% 100%);background:linear-gradient(180deg,#4d4b41,#11100d)}
.no-buildings{position:absolute;right:16px;bottom:16px;z-index:4;border:1px solid rgba(116,84,34,.84);border-radius:8px;background:rgba(4,7,8,.82);padding:9px;color:#d6c29d}

.overworld-map{border-color:rgba(174,133,62,.95);background:#060708 url("./assets/overworld-map-v12.png") center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,232,170,.08),inset 0 0 76px rgba(0,0,0,.38),0 26px 68px rgba(0,0,0,.56)}
.overworld-map::before{z-index:0;background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 15%,transparent 86%,rgba(0,0,0,.3)),radial-gradient(ellipse at center,transparent 0 63%,rgba(0,0,0,.42) 100%)}
.overworld-map::after{z-index:1;background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 9px),radial-gradient(ellipse at 50% 50%,transparent 0 66%,rgba(0,0,0,.24) 100%);mix-blend-mode:overlay}
.overworld-roads{z-index:2;filter:drop-shadow(0 0 2px rgba(0,0,0,.48))}
.overworld-route-shadow{stroke:rgba(0,0,0,.2);stroke-width:.32;opacity:.22}
.overworld-route-highlight{stroke:rgba(255,224,153,.46);stroke-width:.18;opacity:.24;stroke-dasharray:none;filter:drop-shadow(0 0 2px rgba(255,200,92,.1))}
.overworld-route-stones{stroke:rgba(255,236,190,.36);stroke-width:.24;stroke-dasharray:.06 6.4;stroke-dashoffset:1.4;opacity:.18}
.overworld-shell.is-traveling .overworld-route-highlight{opacity:.46;stroke-width:.24}
.overworld-shell.is-traveling .overworld-route-stones{opacity:.36}
.overworld-map:has(.overworld-node:hover) .overworld-route-highlight{opacity:.68;filter:drop-shadow(0 0 3px rgba(240,200,91,.24))}
.overworld-node{width:118px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.72))}
.overworld-node:disabled{opacity:.84}
.node-sigil{position:relative;width:25px;height:25px;border:1px solid rgba(255,226,151,.82);background:radial-gradient(circle,#f2d894 0 13%,#7c5527 15% 39%,#15100b 41% 100%);box-shadow:0 0 10px rgba(240,200,91,.28),0 4px 10px rgba(0,0,0,.78)}
.node-sigil::before{content:"";position:absolute;left:50%;top:50%;width:36px;height:36px;border:1px solid rgba(202,157,73,.32);border-radius:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 9px rgba(0,0,0,.6)}
.node-sigil::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#0b0805}
.overworld-node-ashen_keep .node-sigil::after{width:15px;height:14px;clip-path:polygon(5% 100%,12% 36%,32% 36%,39% 0,50% 36%,68% 36%,76% 8%,92% 40%,95% 100%);background:#1b130d}
.overworld-node-ashen_fields .node-sigil::after{width:17px;height:10px;border-radius:50%;background:linear-gradient(90deg,#2f170e,#9b4524,#1a0e09)}
.overworld-node-old_road .node-sigil::after{width:5px;height:18px;background:#1c130a;box-shadow:8px -3px 0 -1px #1c130a,-7px 4px 0 -1px #1c130a}
.overworld-node-market_town .node-sigil::after{width:18px;height:13px;clip-path:polygon(0 100%,16% 32%,32% 100%,50% 18%,72% 100%,88% 36%,100% 100%);background:#20140a}
.overworld-node-forest_edge .node-sigil::after{width:19px;height:17px;clip-path:polygon(50% 0,72% 34%,64% 34%,90% 78%,65% 76%,65% 100%,35% 100%,35% 76%,10% 78%,36% 34%,28% 34%);background:#102219}
.overworld-node-ruined_watchtower .node-sigil::after{width:11px;height:20px;clip-path:polygon(18% 100%,10% 22%,34% 14%,40% 0,68% 8%,86% 100%);background:#191512}
.current-node .node-sigil{border-color:rgba(190,232,255,.96);background:radial-gradient(circle,#ffffff 0 13%,#80c7ff 15% 40%,#101926 42% 100%);box-shadow:0 0 18px rgba(125,183,255,.72),0 4px 10px rgba(0,0,0,.78)}
.connected-node:not(.current-node) .node-sigil{box-shadow:0 0 12px rgba(240,200,91,.32),0 4px 10px rgba(0,0,0,.78)}
.node-label{border-color:rgba(176,131,61,.86);border-radius:7px;background:linear-gradient(180deg,rgba(9,12,12,.88),rgba(2,3,3,.94));font-size:11px;letter-spacing:0;box-shadow:0 8px 18px rgba(0,0,0,.5)}
.travel-stop{z-index:4;width:13px;height:13px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.86))}
.travel-stop span{inset:1px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:1px solid rgba(239,212,147,.78);background:radial-gradient(circle at 56% 42%,#f0d98e 0 12%,#805b2b 14% 42%,#14100a 44% 100%);box-shadow:0 0 8px rgba(240,200,91,.28),inset 0 0 4px rgba(0,0,0,.7)}
.travel-stop span::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#080605;transform:translate(-50%,-50%)}
.active-travel-stop span{border-color:#fff0bb;background:radial-gradient(circle at 56% 42%,#fff9d8 0 14%,#d4993a 16% 46%,#1a1007 48% 100%);box-shadow:0 0 13px rgba(255,222,130,.68),0 0 22px rgba(255,222,130,.18),inset 0 0 5px rgba(0,0,0,.55)}
.overworld-marker{z-index:8;width:34px;height:40px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.88))}
.overworld-marker span{border-color:rgba(255,242,191,.98);background:linear-gradient(180deg,#f8efd2 0 18%,#75b9f0 19% 48%,#102844 49% 100%);box-shadow:0 0 22px rgba(125,183,255,.88),0 0 42px rgba(125,183,255,.24),inset 0 0 9px rgba(255,255,255,.42)}
.overworld-marker span::after{width:9px;height:9px;background:#061018;box-shadow:inset 0 0 0 2px rgba(255,232,170,.34)}
.map-activity-layer{z-index:3;opacity:.9;mix-blend-mode:normal}
.map-mist{opacity:.36}
.map-rain{opacity:.045}
.map-ash{opacity:.12}
.map-entity,.map-event{filter:drop-shadow(0 6px 8px rgba(0,0,0,.88)) saturate(.88)}
.travel-banner{border-color:rgba(176,131,61,.86);background:linear-gradient(180deg,rgba(8,10,9,.86),rgba(2,3,3,.94));backdrop-filter:blur(3px)}
.travel-banner-active{border-color:rgba(255,218,128,.9);box-shadow:0 12px 30px rgba(0,0,0,.48),0 0 22px rgba(240,200,91,.18)}
.location-stage{border-color:rgba(173,128,55,.9);box-shadow:inset 0 0 0 1px rgba(255,232,170,.07),inset 0 0 80px rgba(0,0,0,.34),0 22px 56px rgba(0,0,0,.48);filter:saturate(.92) contrast(1.08)}
.location-stage::before{background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.08) 48%,rgba(0,0,0,.56)),linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.68))}
.location-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 28% 18%,rgba(244,188,96,.1),transparent 25%),radial-gradient(ellipse at 80% 58%,rgba(140,180,170,.08),transparent 32%);mix-blend-mode:screen}
.world-scene-town-outskirts{background-color:#080b0a}
.world-scene-ashen-fields{background-color:#120a06}
.world-scene-road{background-color:#0c0d0b}
.world-scene-forest{background-color:#07110f}
.world-scene-ruins{background-color:#0d0d0f}
.road-stop-stage{position:relative;min-height:280px;overflow:hidden;border:1px solid rgba(149,106,43,.86);border-radius:10px;margin:10px 0;background-color:#080a09;background-image:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.12) 52%,rgba(0,0,0,.58)),linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.72)),var(--road-stop-art);background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(255,232,170,.06),0 18px 44px rgba(0,0,0,.38);isolation:isolate}
.road-stop-stage span{position:absolute;display:block;pointer-events:none}
.road-stop-stage::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 30% 18%,rgba(255,210,130,.08),transparent 28%),radial-gradient(ellipse at 74% 58%,rgba(120,160,170,.08),transparent 36%);mix-blend-mode:screen}
.road-stop-stage.has-road-stop-art .road-stop-landmark{display:none}
.road-stop-stage-copy{position:relative;z-index:3;max-width:680px;padding:20px;text-shadow:0 2px 0 #000,0 0 22px rgba(0,0,0,.76)}
.road-stop-stage-copy h2{font-size:32px;margin-bottom:6px}
.road-stop-stage-copy p{margin:0;color:#dfc89d}
.road-stop-depth{inset:0;z-index:0;background:radial-gradient(ellipse at 55% 34%,transparent 0 32%,rgba(0,0,0,.72) 100%)}
.road-stop-weather{inset:0;z-index:1;background:repeating-linear-gradient(100deg,rgba(255,255,255,.028) 0 1px,transparent 1px 9px);opacity:.36;mix-blend-mode:overlay}
.road-stop-fog{left:-12%;right:-12%;bottom:0;height:46%;z-index:2;border-radius:50%;background:radial-gradient(ellipse at center,rgba(220,218,200,.15),transparent 66%);filter:blur(10px);animation:combat-fog 17s ease-in-out infinite}
.road-stop-vignette{inset:0;z-index:2;background:radial-gradient(ellipse at center,transparent 0 42%,rgba(0,0,0,.78) 100%)}
.road-stop-landmark{z-index:1;right:8%;bottom:9%;width:36%;height:48%;filter:drop-shadow(0 14px 16px rgba(0,0,0,.72))}
.road-stop-art-ash .road-stop-weather{background:radial-gradient(circle at 12% 18%,rgba(215,145,83,.22) 0 1px,transparent 2px),radial-gradient(circle at 44% 62%,rgba(215,145,83,.14) 0 1px,transparent 2px),radial-gradient(circle at 78% 34%,rgba(218,202,170,.13) 0 1px,transparent 2px);background-size:86px 104px;animation:map-ash-drift 22s linear infinite;opacity:.34}
.road-stop-art-ember::before{background:radial-gradient(ellipse at 30% 68%,rgba(255,118,52,.16),transparent 32%),radial-gradient(ellipse at 62% 36%,rgba(255,200,112,.08),transparent 28%)}
.road-stop-art-fog .road-stop-fog{height:58%;opacity:.9;filter:blur(13px)}
.road-stop-art-wind .road-stop-weather{background:repeating-linear-gradient(102deg,rgba(220,220,205,.055) 0 1px,transparent 1px 14px);opacity:.42;animation:map-mist-drift 24s ease-in-out infinite}
.road-stop-art-warm::before{background:radial-gradient(ellipse at 70% 64%,rgba(255,169,74,.22),transparent 34%),radial-gradient(ellipse at 42% 28%,rgba(255,214,130,.08),transparent 22%)}
.road-stop-art-strange::before{background:radial-gradient(ellipse at 48% 58%,rgba(104,214,142,.14),transparent 32%),radial-gradient(ellipse at 72% 26%,rgba(155,180,160,.08),transparent 26%)}
.road-stop-art-forest::before{background:radial-gradient(ellipse at 68% 38%,rgba(60,120,140,.16),transparent 40%),radial-gradient(ellipse at 36% 72%,rgba(34,76,52,.13),transparent 34%)}
.road-stop-scene-ashen_gate{background:radial-gradient(ellipse at 24% 72%,rgba(140,80,38,.28),transparent 48%),linear-gradient(180deg,#16130f,#080908)}
.road-stop-scene-ashen_gate .road-stop-landmark{background:linear-gradient(180deg,#2c2116,#080605);clip-path:polygon(8% 100%,15% 28%,31% 28%,36% 0,50% 29%,66% 20%,82% 38%,92% 100%)}
.road-stop-scene-broken_road,.road-stop-scene-abandoned_cart{background:radial-gradient(ellipse at 48% 76%,rgba(116,74,38,.34),transparent 50%),linear-gradient(180deg,#151513,#070807)}
.road-stop-scene-broken_road .road-stop-landmark{background:linear-gradient(135deg,transparent 0 44%,#7a5730 45% 54%,transparent 55%),linear-gradient(30deg,transparent 0 44%,#3b2a18 45% 58%,transparent 59%);clip-path:polygon(0 86%,100% 62%,100% 100%,0 100%)}
.road-stop-scene-abandoned_cart .road-stop-landmark{background:radial-gradient(circle at 22% 82%,#0b0805 0 8%,#b08549 9% 13%,transparent 14%),radial-gradient(circle at 74% 78%,#0b0805 0 8%,#b08549 9% 13%,transparent 14%),linear-gradient(12deg,transparent 0 32%,#5b3519 33% 58%,transparent 59%);clip-path:polygon(4% 82%,84% 52%,96% 62%,84% 92%,4% 100%)}
.road-stop-scene-ruined_waystone,.road-stop-scene-old_crossroads{background:radial-gradient(ellipse at 52% 68%,rgba(104,86,55,.24),transparent 48%),linear-gradient(180deg,#121514,#070807)}
.road-stop-scene-ruined_waystone .road-stop-landmark{background:linear-gradient(180deg,#6a604e,#181512);clip-path:polygon(42% 0,64% 12%,58% 100%,22% 100%,28% 18%)}
.road-stop-scene-old_crossroads .road-stop-landmark{background:linear-gradient(90deg,transparent 0 42%,#7d5c33 43% 55%,transparent 56%),linear-gradient(180deg,transparent 0 20%,#9c7642 21% 36%,transparent 37%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.road-stop-scene-burned_shrine{background:radial-gradient(ellipse at 32% 74%,rgba(126,42,26,.3),transparent 45%),linear-gradient(180deg,#15100d,#060606)}
.road-stop-scene-burned_shrine .road-stop-landmark{background:radial-gradient(circle at 50% 8%,rgba(255,120,58,.35),transparent 18%),linear-gradient(180deg,#2c1710,#090606);clip-path:polygon(48% 0,76% 36%,67% 100%,28% 100%,18% 36%)}
.road-stop-scene-ashen_slope,.road-stop-scene-watchtower_approach,.road-stop-scene-ridge_path{background:radial-gradient(ellipse at 60% 62%,rgba(113,93,62,.28),transparent 48%),linear-gradient(180deg,#131516,#070808)}
.road-stop-scene-ashen_slope .road-stop-landmark,.road-stop-scene-ridge_path .road-stop-landmark{background:linear-gradient(160deg,transparent 0 38%,#5c5141 39% 56%,transparent 57%),linear-gradient(20deg,transparent 0 44%,#2b261f 45% 70%,transparent 71%);clip-path:polygon(0 100%,38% 12%,100% 70%,100% 100%)}
.road-stop-scene-watchtower_approach .road-stop-landmark{background:linear-gradient(180deg,#2a251f,#080706);clip-path:polygon(36% 100%,28% 20%,46% 12%,48% 0,70% 8%,82% 100%)}
.road-stop-scene-traveler_camp,.road-stop-scene-market_outskirts{background:radial-gradient(ellipse at 70% 70%,rgba(198,126,48,.2),transparent 42%),linear-gradient(180deg,#111612,#070807)}
.road-stop-scene-traveler_camp .road-stop-landmark{background:radial-gradient(circle at 48% 60%,#ffb45a 0 5%,#7f2f18 6% 12%,transparent 13%),linear-gradient(180deg,transparent 0 68%,#4a3520 69% 76%,transparent 77%)}
.road-stop-scene-market_outskirts .road-stop-landmark{background:radial-gradient(circle at 18% 36%,rgba(255,180,82,.8) 0 4%,transparent 5%),radial-gradient(circle at 74% 22%,rgba(255,180,82,.65) 0 3%,transparent 4%),linear-gradient(180deg,#2b2114,#0a0705);clip-path:polygon(0 100%,12% 46%,28% 100%,44% 36%,64% 100%,80% 48%,100% 100%)}
.road-stop-scene-forest_trail{background:radial-gradient(ellipse at 75% 54%,rgba(46,81,53,.34),transparent 48%),linear-gradient(180deg,#0b1512,#050606)}
.road-stop-scene-forest_trail .road-stop-landmark{background:linear-gradient(180deg,#213d2d,#08100c);clip-path:polygon(50% 0,68% 28%,58% 28%,86% 76%,63% 72%,62% 100%,38% 100%,37% 72%,14% 76%,42% 28%,32% 28%)}
.road-stop-stage.has-road-stop-art{background-color:#080a09;background-image:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.12) 52%,rgba(0,0,0,.58)),linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.72)),var(--road-stop-art);background-size:cover;background-position:center;background-repeat:no-repeat}

.combat-backdrop.has-combat-art{background-color:#050607;background-image:var(--combat-art);background-size:cover;background-position:center;background-repeat:no-repeat;filter:saturate(.96) contrast(1.1) brightness(.72)}
.combat-backdrop.has-combat-art::before{background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.28) 42%,rgba(0,0,0,.82)),linear-gradient(90deg,rgba(0,0,0,.42),transparent 28%,transparent 72%,rgba(0,0,0,.48)),radial-gradient(ellipse at center,transparent 0 46%,rgba(0,0,0,.66) 100%)}
.combat-backdrop.has-combat-art .scene-silhouette{display:none}
.combat-backdrop.has-combat-art .scene-depth{background:linear-gradient(90deg,rgba(0,0,0,.48),transparent 24%,transparent 76%,rgba(0,0,0,.5))}
.combat-backdrop.has-combat-art .scene-weather{background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 7px);opacity:.42}
.combat-backdrop.has-combat-art .scene-fog{opacity:.72;bottom:0;height:34%;filter:blur(10px)}
.combat-backdrop[data-mood="plague"].has-combat-art .scene-light{background:radial-gradient(circle,rgba(125,205,100,.2),transparent 64%)}
.combat-backdrop[data-mood="campfire"].has-combat-art .scene-light,.combat-backdrop[data-mood="lantern"].has-combat-art .scene-light{background:radial-gradient(circle,rgba(255,159,70,.25),transparent 64%)}
.combat-backdrop[data-mood="siege"].has-combat-art .scene-light,.combat-backdrop[data-mood="ember"].has-combat-art .scene-light{background:radial-gradient(circle,rgba(255,92,46,.24),transparent 64%)}
.combat-backdrop[data-mood="wind"].has-combat-art .scene-weather{background:repeating-linear-gradient(102deg,rgba(225,225,210,.045) 0 1px,transparent 1px 13px);animation:map-mist-drift 22s ease-in-out infinite}

.location-stage.has-location-art{background-color:#060708;background-image:var(--world-art);background-size:cover;background-position:center;background-repeat:no-repeat}
.location-stage.has-location-art::before{background:linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.13) 46%,rgba(0,0,0,.6)),linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.72));}
.location-stage.has-location-art .world-scene-depth{background:radial-gradient(ellipse at 55% 36%,transparent 0 42%,rgba(0,0,0,.72) 100%)}
.location-stage.has-location-art .world-scene-weather{opacity:.42;background:repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 8px)}
.location-stage.has-location-art .world-scene-fog{opacity:.72}
.location-stage.world-state-camp::after{background:radial-gradient(ellipse at 68% 68%,rgba(255,162,74,.18),transparent 34%),radial-gradient(ellipse at 28% 18%,rgba(244,188,96,.08),transparent 25%)}
.location-stage.world-state-plague::after{background:radial-gradient(ellipse at 66% 52%,rgba(116,185,90,.18),transparent 35%),radial-gradient(ellipse at 28% 18%,rgba(120,160,110,.08),transparent 25%)}
.location-stage.world-state-burned::after{background:radial-gradient(ellipse at 58% 70%,rgba(255,80,38,.2),transparent 34%),radial-gradient(ellipse at 28% 18%,rgba(244,120,70,.08),transparent 25%)}
.location-stage.world-state-rebuilt::after{background:radial-gradient(ellipse at 48% 22%,rgba(255,210,120,.14),transparent 32%),radial-gradient(ellipse at 78% 62%,rgba(120,180,160,.08),transparent 32%)}

.road-stop-stage.has-road-stop-art{filter:saturate(.92) contrast(1.08)}
.road-stop-stage.has-road-stop-art::before{background:radial-gradient(ellipse at 30% 18%,rgba(255,210,130,.07),transparent 28%),radial-gradient(ellipse at 74% 58%,rgba(120,160,170,.07),transparent 36%)}
.road-stop-stage.world-state-camp::before{background:radial-gradient(ellipse at 70% 66%,rgba(255,156,72,.22),transparent 36%),radial-gradient(ellipse at 30% 18%,rgba(255,210,130,.08),transparent 28%)}
.road-stop-stage.world-state-plague::before{background:radial-gradient(ellipse at 62% 56%,rgba(116,185,90,.18),transparent 40%),radial-gradient(ellipse at 30% 18%,rgba(120,160,110,.08),transparent 28%)}
.road-stop-stage.world-state-burned::before{background:radial-gradient(ellipse at 66% 64%,rgba(255,80,38,.22),transparent 38%),radial-gradient(ellipse at 30% 18%,rgba(244,120,70,.08),transparent 28%)}

.town-service-hero{position:relative;min-height:190px;display:grid;align-items:end;overflow:hidden;border:1px solid rgba(149,106,43,.72);border-radius:8px;margin-bottom:10px;padding:16px;background:#060708 var(--town-art) center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,232,170,.06),0 16px 38px rgba(0,0,0,.32);isolation:isolate}
.town-service-hero::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.12) 54%,rgba(0,0,0,.58)),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.78));pointer-events:none}
.town-service-hero::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 28% 18%,rgba(255,210,130,.08),transparent 30%);mix-blend-mode:screen;pointer-events:none}
.town-service-hero>*{position:relative;z-index:1;text-shadow:0 2px 0 #000,0 0 22px rgba(0,0,0,.72)}
.town-service-hero h1{margin-top:8px;margin-bottom:0}

.encounter-transition{position:fixed;inset:0;z-index:2200;overflow:hidden;background:radial-gradient(ellipse at center,rgba(61,39,20,.18),rgba(0,0,0,.92) 70%),linear-gradient(180deg,rgba(24,14,9,.2),rgba(0,0,0,.96));display:grid;place-items:center;animation:encounter-darken 4.3s ease-in-out forwards}
.encounter-transition.is-ending{animation:encounter-fade-out .65s ease forwards}
.encounter-ash,.encounter-smoke{position:absolute;inset:-20%;pointer-events:none}
.encounter-ash{background:radial-gradient(circle at 12% 8%,rgba(218,162,91,.65) 0 1px,transparent 2px),radial-gradient(circle at 38% 22%,rgba(190,142,90,.42) 0 1px,transparent 2px),radial-gradient(circle at 72% 14%,rgba(230,210,176,.34) 0 1px,transparent 2px),linear-gradient(100deg,transparent 0 48%,rgba(210,162,93,.16) 49%,transparent 51%);background-size:54px 82px,88px 120px,130px 160px,38px 100%;filter:blur(.2px);animation:encounter-ash-fall 1.35s linear infinite;opacity:.78}
.encounter-ash-b{animation-duration:2.2s;opacity:.42;filter:blur(1px);transform:scale(1.2)}
.encounter-smoke{background:radial-gradient(ellipse at 28% 70%,rgba(154,121,86,.18),transparent 34%),radial-gradient(ellipse at 72% 42%,rgba(190,180,160,.12),transparent 32%);filter:blur(14px);animation:encounter-smoke-drift 4.3s ease-in-out forwards}
.encounter-warning{position:relative;z-index:2;max-width:min(560px,86vw);padding:18px 20px;border:1px solid rgba(182,125,55,.74);border-radius:8px;background:linear-gradient(180deg,rgba(18,10,7,.78),rgba(3,3,3,.88));text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.72),0 0 36px rgba(154,71,33,.16);animation:encounter-warning-rise 4.3s ease forwards}
.encounter-warning h2{font-size:38px;margin:0 0 8px;color:#ffe0a2}
.encounter-warning p{margin:0;color:#d9c2a0;font-weight:800}

.opening-scene{position:relative;overflow:hidden;isolation:isolate;background-image:url("./assets/backdrops-atlas.png");background-size:200% 400%;background-position:var(--opening-x,0%) var(--opening-y,66.667%);background-repeat:no-repeat}
.opening-scene::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.22) 50%,rgba(0,0,0,.68)),radial-gradient(ellipse at center,transparent 0 34%,rgba(0,0,0,.76) 100%);pointer-events:none}
.opening-scene::after{content:"";position:absolute;inset:0;z-index:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7px);mix-blend-mode:overlay;pointer-events:none}
.opening-scene>*{position:relative;z-index:1}
.opening-scene-start{--opening-x:0%;--opening-y:66.667%}
.opening-scene-skeleton{--opening-x:100%;--opening-y:33.333%}
.opening-scene-dragon{--opening-x:100%;--opening-y:100%}
.opening-scene-keep{--opening-x:0%;--opening-y:66.667%}
.opening-scene .hero-shell,.opening-scene .story-box,.opening-scene .tut-unit,.opening-scene .mini-log{background:linear-gradient(180deg,rgba(9,14,16,.84),rgba(4,6,7,.92));backdrop-filter:blur(2px)}
.tutorial-battle-arena{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.battle-arena.dragon-battle-arena{grid-template-columns:minmax(180px,.85fr) minmax(180px,.85fr) minmax(280px,1.35fr)}
.tutorial-unit-card{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:stretch;overflow:hidden}
.tutorial-unit-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 38%),radial-gradient(circle at 18% 18%,rgba(240,200,91,.09),transparent 28%);pointer-events:none}
.tutorial-unit-card.enemy::before,.tutorial-unit-card.dragon::before{background:linear-gradient(135deg,rgba(255,255,255,.045),transparent 38%),radial-gradient(circle at 80% 20%,rgba(214,74,74,.14),transparent 30%)}
.tutorial-unit-card.enemy,.tutorial-unit-card.dragon{box-shadow:inset 0 0 0 1px rgba(214,74,74,.24),0 0 20px rgba(92,17,15,.28)}
.tutorial-unit-card.enemy .tutorial-unit-copy h3,.tutorial-unit-card.dragon .tutorial-unit-copy h3{color:#ffd0c8}
.tutorial-unit-card.survivor{box-shadow:inset 0 0 0 1px rgba(216,117,53,.16)}
.tutorial-unit-card.knight{box-shadow:inset 0 0 0 1px rgba(255,216,118,.18),0 0 22px rgba(240,200,91,.1)}
.tutorial-unit-portrait,.tutorial-unit-copy{position:relative;z-index:1}
.tutorial-unit-portrait .portrait-art{height:100%;min-height:150px}
.tutorial-unit-copy{min-width:0}
.tutorial-unit-copy h3{color:#f6e8d0;margin-top:2px}
.tutorial-unit-card.visual-story{border-color:rgba(201,158,83,.62)}
.tutorial-unit-card.visual-legendary{border-color:rgba(255,216,118,.88);box-shadow:0 0 28px rgba(240,200,91,.13),inset 0 0 20px rgba(255,232,170,.04)}
.dragon-battle-arena .tutorial-unit-card.dragon{grid-template-columns:172px minmax(0,1fr);border-color:#8ada5b;background:linear-gradient(180deg,rgba(28,11,10,.9),rgba(4,5,5,.95));min-height:260px}
.dragon-battle-arena .tutorial-unit-card.dragon .tutorial-unit-portrait .portrait-art{min-height:232px}
.dragon-battle-arena .tutorial-unit-card.dragon .tutorial-unit-portrait{filter:drop-shadow(0 0 18px rgba(115,220,89,.16))}
.dragon-battle-arena .tutorial-unit-card.knight{border-color:rgba(255,216,118,.76)}
.dragon-battle-arena{padding:8px;border:1px solid rgba(122,67,35,.52);border-radius:10px;background:radial-gradient(circle at 72% 22%,rgba(110,220,75,.08),transparent 30%),radial-gradient(circle at 22% 18%,rgba(255,216,118,.1),transparent 28%),linear-gradient(180deg,rgba(9,11,11,.58),rgba(5,5,5,.72))}
.dragon-battle-arena::before{background:linear-gradient(180deg,transparent,rgba(138,218,91,.3),transparent)}
.class-path-grid{display:grid;grid-template-columns:1fr;gap:12px}
.class-path-card{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:stretch;margin:0;background:linear-gradient(135deg,rgba(22,36,41,.94),rgba(5,8,10,.96));overflow:hidden}
.class-path-card:hover{border-color:#cda84d;box-shadow:0 0 22px rgba(240,200,91,.14),inset 0 0 18px rgba(255,255,255,.025)}
.class-card-visual .portrait-art{height:100%;min-height:210px;border-color:rgba(240,200,91,.5)}
.class-card-copy{min-width:0}
.class-card-copy h2{font-size:30px}
.class-flavor{color:#e0c89f;margin-top:0}
.class-path-card .stat-card{background:rgba(7,13,16,.74)}

@keyframes bar-shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
@keyframes hit-flash{
  0%{filter:brightness(1)}
  18%{filter:brightness(2.25) saturate(1.35);box-shadow:0 0 0 1px rgba(255,230,160,.38),0 0 34px rgba(255,100,64,.58)}
  46%{filter:brightness(.82) saturate(.72)}
  100%{filter:brightness(1)}
}
@keyframes damage-pop{
  0%{opacity:0;transform:translate(-50%,12px) scale(.82)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-42px) scale(1.12)}
}
@keyframes combat-fog{
  0%,100%{transform:translateX(-3%) scale(1)}
  50%{transform:translateX(5%) scale(1.08)}
}
@keyframes overworld-travel{
  0%{left:var(--from-x);top:var(--from-y);transform:translate(-50%,-120%) scale(.95)}
  40%{transform:translate(-50%,-135%) scale(1.08)}
  100%{left:var(--to-x);top:var(--to-y);transform:translate(-50%,-120%) scale(1)}
}
@keyframes marker-travel-pulse{
  0%,100%{filter:drop-shadow(0 6px 8px rgba(0,0,0,.82))}
  50%{filter:drop-shadow(0 6px 8px rgba(0,0,0,.82)) brightness(1.18)}
}
@keyframes entity-pause{
  0%,100%{filter:drop-shadow(0 5px 6px rgba(0,0,0,.82)) brightness(.92)}
  50%{filter:drop-shadow(0 5px 6px rgba(0,0,0,.82)) brightness(1.18)}
}
@keyframes entity-idle{
  0%,100%{margin-top:0}
  50%{margin-top:-2px}
}
@keyframes entity-glow-pulse{
  0%,100%{opacity:.38;transform:scale(.82)}
  50%{opacity:.72;transform:scale(1.08)}
}
@keyframes guard-torch-flicker{
  0%,100%{opacity:.7;transform:translateX(-50%) scale(.82)}
  45%{opacity:1;transform:translateX(-50%) scale(1.22)}
  72%{opacity:.8;transform:translateX(-50%) scale(.94)}
}
@keyframes paper-doll-haze{
  0%,100%{opacity:.48;transform:translateX(-4%) translateY(0)}
  50%{opacity:.72;transform:translateX(5%) translateY(-5%)}
}
@keyframes road-dust{
  0%,100%{opacity:.15;transform:translateX(4px) scale(.6)}
  45%{opacity:.82;transform:translateX(-8px) scale(1.08)}
}
@keyframes event-glow{
  0%,100%{opacity:.58;transform:scale(.86)}
  50%{opacity:1;transform:scale(1.16)}
}
@keyframes campfire-flicker{
  0%,100%{opacity:.68;transform:scale(.9)}
  30%{opacity:1;transform:scale(1.18)}
  62%{opacity:.78;transform:scale(.98)}
}
@keyframes portal-pulse{
  0%,100%{box-shadow:0 0 10px rgba(125,99,255,.45);transform:translate(-50%,-50%) scale(.92)}
  50%{box-shadow:0 0 22px rgba(190,176,255,.7);transform:translate(-50%,-50%) scale(1.16)}
}
@keyframes map-cloud-drift{
  0%{transform:translateX(-8%)}
  100%{transform:translateX(470%)}
}
@keyframes map-cloud-drift-b{
  0%{transform:translateX(0)}
  100%{transform:translateX(-420%)}
}
@keyframes town-light-flicker{
  0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.88)}
  44%{opacity:.92;transform:translate(-50%,-50%) scale(1.12)}
  70%{opacity:.62;transform:translate(-50%,-50%) scale(.98)}
}
@keyframes map-mist-drift{
  0%,100%{transform:translateX(-4%) translateY(0) scale(1)}
  50%{transform:translateX(6%) translateY(-2%) scale(1.06)}
}
@keyframes map-rain-fall{
  0%{background-position:0 0}
  100%{background-position:-26px 58px}
}
@keyframes map-rain-fall-soft{
  0%{background-position:0 0}
  100%{background-position:-18px 92px}
}
@keyframes map-ash-drift{
  0%{background-position:0 0}
  100%{background-position:64px 92px}
}
@keyframes weather-fog-breathe{
  0%,100%{opacity:.42;transform:translate(-50%,-50%) scale(.94)}
  50%{opacity:.72;transform:translate(-50%,-50%) scale(1.1)}
}
@keyframes portrait-sheen{
  0%,62%,100%{transform:translateX(-34%) rotate(0deg);opacity:0}
  74%{opacity:.9}
  88%{transform:translateX(34%) rotate(0deg);opacity:0}
}
@keyframes portrait-breathe{
  0%,100%{filter:saturate(1) contrast(1)}
  50%{filter:saturate(1.05) contrast(1.04)}
}
@keyframes encounter-darken{
  0%{opacity:0}
  12%{opacity:1}
  100%{opacity:1}
}
@keyframes encounter-fade-out{
  0%{opacity:1}
  100%{opacity:0}
}
@keyframes encounter-ash-fall{
  0%{background-position:0 -120px,20px -180px,80px -240px,0 0}
  100%{background-position:-34px 180px,42px 260px,110px 320px,26px 100%}
}
@keyframes encounter-smoke-drift{
  0%{opacity:0;transform:translateY(12px) scale(1)}
  28%{opacity:1}
  100%{opacity:.8;transform:translateY(-18px) scale(1.12)}
}
@keyframes encounter-warning-rise{
  0%{opacity:0;transform:translateY(18px) scale(.96)}
  18%{opacity:1;transform:translateY(0) scale(1)}
  82%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:.78;transform:translateY(-5px) scale(1.01)}
}
@keyframes bird-cross{
  0%{transform:translate(-120px,0) scale(.7)}
  100%{transform:translate(900px,-80px) scale(.7)}
}
@keyframes bird-cross-b{
  0%{transform:translate(160px,0) scale(.58)}
  100%{transform:translate(-920px,-50px) scale(.58)}
}
@media(min-width:720px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.wide{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gear-hero-panel{grid-template-columns:minmax(0,1fr) minmax(280px,360px)}
  .gear-slot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gear-inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .battle-arena{grid-template-columns:repeat(3,minmax(0,1fr))}
  .combat-header{grid-template-columns:minmax(220px,.65fr) 1fr;align-items:center}
  .combat-stage{grid-template-columns:minmax(260px,.8fr) 1fr}
  .combat-party-grid{grid-template-columns:1fr}
  .combat-enemy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .world-columns{grid-template-columns:1fr 1fr}
  .world-map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .location-home-head{grid-template-columns:1fr 160px}
  .location-info-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .map-route-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .class-path-grid{grid-template-columns:1fr}
  .tutorial-battle-arena{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}
@media(max-width:430px){
  #app{padding-left:8px;padding-right:8px}
  .combat-card{grid-template-columns:72px minmax(0,1fr);min-height:112px}
  .portrait-art,.portrait-wrap{min-height:104px}
  .combat-name{display:block}
  .actions .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .world-scene{min-height:260px}
  .world-scene-copy{padding:16px}
  .overworld-map{min-height:66vh;aspect-ratio:auto}
  .overworld-node{width:78px}
  .map-entity{width:18px;height:18px}
  .map-event{width:24px;height:24px}
  .event-glyph{width:13px;height:13px}
  .map-town-light{width:22px;height:22px}
  .map-cloud{height:10%;opacity:.46}
  .node-label{font-size:10px;padding:3px 5px}
  .node-danger{display:none}
  .travel-banner{font-size:12px}
  .location-stage{min-height:62vh}
  .location-stage-copy{padding:16px}
  .location-stage-copy h2{font-size:28px}
  .building-hotspot{min-width:74px;font-size:11px;padding:5px}
  .location-actions{left:10px;right:10px;bottom:10px}
  .location-home-head{gap:6px}
  .home-location-panel .location-stage{min-height:66vh}
  .paper-doll-frame-compact{max-width:170px}
  .tutorial-unit-card,.class-path-card,.major-enemy-card{grid-template-columns:1fr}
  .battle-arena.dragon-battle-arena{grid-template-columns:1fr}
  .dragon-battle-arena .tutorial-unit-card.dragon{grid-template-columns:1fr}
  .tutorial-unit-portrait .portrait-art{min-height:190px}
  .dragon-battle-arena .tutorial-unit-card.dragon .tutorial-unit-portrait .portrait-art{min-height:260px}
  .class-card-visual .portrait-art{min-height:240px}
  .class-card-copy h2{font-size:26px}
  .gear-action-row{grid-template-columns:1fr}
  .paper-doll-scene{min-height:300px}
  .gear-item-line{grid-template-columns:56px minmax(0,1fr)}
  .item-icon{width:56px;height:56px}
}

/* v19 ruined-medieval interface skin. Future themes can override these tokens. */
body.ui-theme-ruined,body:not(.ui-theme-imperial):not(.ui-theme-holy):not(.ui-theme-corrupted):not(.ui-theme-nature):not(.ui-theme-royal){
  --ui-stone:#171615;
  --ui-stone-dark:#060606;
  --ui-parchment:#cfb985;
  --ui-parchment-dim:#a9905c;
  --ui-iron:#57452c;
  --ui-iron-bright:#9a7437;
  --ui-banner:#3a1112;
  --ui-ember:#d18435;
  --ui-rune:#d4ad60;
  --ui-vine:#304430;
  --ui-frame-shadow:0 18px 46px rgba(0,0,0,.46),inset 0 0 0 1px rgba(255,232,170,.045),inset 0 0 36px rgba(0,0,0,.24);
  --ui-card-shadow:0 10px 28px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,232,170,.035);
}

body.ui-theme-imperial{--ui-iron-bright:#b99555;--ui-banner:#3f1d16}
body.ui-theme-holy{--ui-iron-bright:#d8bd70;--ui-rune:#efd98f}
body.ui-theme-corrupted{--ui-iron-bright:#8f4f59;--ui-rune:#9e6ed1}
body.ui-theme-nature{--ui-iron-bright:#7d9661;--ui-rune:#9dbb80}
body.ui-theme-royal{--ui-iron-bright:#b693d6;--ui-rune:#d5bdff}

body::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.62),transparent 18%,transparent 82%,rgba(0,0,0,.62)),
    radial-gradient(ellipse at center,transparent 0 45%,rgba(0,0,0,.64) 100%),
    radial-gradient(circle at 16% 10%,rgba(209,132,53,.08),transparent 24%),
    radial-gradient(circle at 88% 18%,rgba(89,63,36,.12),transparent 26%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 7px);
}

#app{position:relative;z-index:1}
#game{position:relative}

.topbar{
  position:sticky;
  top:0;
  z-index:120;
  padding:8px;
  margin:0 -4px 10px;
  border:1px solid rgba(126,93,43,.86);
  border-radius:0 0 10px 10px;
  background:
    linear-gradient(180deg,rgba(22,19,16,.96),rgba(5,6,6,.97)),
    repeating-linear-gradient(90deg,rgba(255,232,170,.035) 0 1px,transparent 1px 22px);
  box-shadow:0 14px 34px rgba(0,0,0,.46),inset 0 -1px 0 rgba(255,232,170,.055);
  backdrop-filter:blur(3px);
}
.topbar::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:4px;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(207,185,133,.6),transparent);
  pointer-events:none;
}
#topStats{
  border:1px solid rgba(91,68,33,.72);
  border-radius:9px;
  padding:7px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.28),transparent 18%),
    linear-gradient(180deg,rgba(19,24,22,.76),rgba(6,7,7,.86));
  box-shadow:inset 0 0 24px rgba(0,0,0,.26);
}
.top-status-pills{align-content:center}
.top-status-portrait .paper-doll-frame{
  border-color:rgba(178,137,67,.86);
  box-shadow:0 6px 18px rgba(0,0,0,.52),0 0 16px rgba(209,132,53,.12),inset 0 0 0 1px rgba(255,232,170,.05);
}

.topline{
  position:relative;
  margin-top:8px;
  padding:8px 2px 5px;
  border-top:1px solid rgba(126,93,43,.42);
}
.topline button{
  min-height:40px;
  border-radius:6px;
  padding:7px 11px;
  background:
    linear-gradient(180deg,rgba(44,35,24,.96),rgba(13,12,10,.98)),
    repeating-linear-gradient(90deg,rgba(255,232,170,.04) 0 1px,transparent 1px 11px);
  border-color:rgba(112,83,35,.86);
  color:#f3dec0;
  text-shadow:0 1px 0 #000;
  box-shadow:0 3px 0 rgba(0,0,0,.52),inset 0 1px 0 rgba(255,232,170,.08);
}
.topline button.active{
  color:#fff0bf;
  border-color:rgba(226,179,85,.96);
  background:
    linear-gradient(180deg,rgba(82,55,24,.98),rgba(23,17,11,.98)),
    radial-gradient(ellipse at center,rgba(209,132,53,.16),transparent 68%);
  box-shadow:0 3px 0 rgba(0,0,0,.55),0 0 18px rgba(209,132,53,.22),inset 0 0 18px rgba(209,132,53,.08);
}

button:not(.overworld-node):not(.building-hotspot){
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:44px;
  border-radius:7px;
  border:1px solid rgba(105,78,37,.95);
  background:
    linear-gradient(180deg,rgba(55,43,29,.98),rgba(14,13,11,.98)),
    repeating-linear-gradient(90deg,rgba(255,232,170,.035) 0 1px,transparent 1px 12px);
  color:#f4dfbd;
  text-shadow:0 1px 0 #000,0 0 12px rgba(0,0,0,.52);
  box-shadow:0 3px 0 rgba(0,0,0,.56),0 10px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,232,170,.1);
}
button:not(.overworld-node):not(.building-hotspot)::before{
  content:"";
  position:absolute;
  inset:2px;
  z-index:-1;
  border-radius:5px;
  border:1px solid rgba(207,185,133,.08);
  background:
    linear-gradient(90deg,rgba(255,232,170,.08),transparent 12%,transparent 88%,rgba(255,232,170,.06)),
    radial-gradient(ellipse at 50% 0,rgba(255,217,136,.12),transparent 54%);
  pointer-events:none;
}
button:not(.overworld-node):not(.building-hotspot)::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:4px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,232,170,.34),transparent);
  pointer-events:none;
}
button:not(.overworld-node):not(.building-hotspot):hover:not(:disabled){
  border-color:rgba(218,170,83,.98);
  filter:brightness(1.05) saturate(1.05);
  box-shadow:0 3px 0 rgba(0,0,0,.58),0 0 18px rgba(209,132,53,.2),inset 0 1px 0 rgba(255,232,170,.15);
}
button.primary:not(.overworld-node):not(.building-hotspot){
  border-color:rgba(200,147,62,.98);
  background:
    linear-gradient(180deg,rgba(96,61,25,.98),rgba(24,17,10,.98)),
    radial-gradient(ellipse at 50% 0,rgba(245,189,83,.18),transparent 62%);
  color:#ffe8ad;
}
button.secondary:not(.overworld-node):not(.building-hotspot){
  background:
    linear-gradient(180deg,rgba(37,35,31,.98),rgba(11,11,10,.98)),
    repeating-linear-gradient(90deg,rgba(255,232,170,.025) 0 1px,transparent 1px 12px);
}
button.danger:not(.overworld-node):not(.building-hotspot){
  border-color:rgba(151,58,48,.98);
  background:
    linear-gradient(180deg,rgba(80,28,24,.98),rgba(20,8,8,.98)),
    radial-gradient(ellipse at 50% 0,rgba(214,74,74,.15),transparent 62%);
  color:#ffd6cc;
}
button.good:not(.overworld-node):not(.building-hotspot){
  border-color:rgba(107,151,91,.95);
  background:linear-gradient(180deg,rgba(37,69,39,.98),rgba(9,18,10,.98));
  color:#d8ffd3;
}
button:disabled{
  opacity:.52;
  filter:grayscale(.35) saturate(.65);
}

.panel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:9px;
  border-color:rgba(122,91,43,.92);
  background:
    linear-gradient(180deg,rgba(24,22,19,.96),rgba(7,8,8,.98)),
    repeating-linear-gradient(90deg,rgba(255,232,170,.025) 0 1px,transparent 1px 18px);
  box-shadow:var(--ui-frame-shadow);
}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.3),transparent 20%,transparent 80%,rgba(0,0,0,.34)),
    radial-gradient(ellipse at 18% 0,rgba(209,132,53,.09),transparent 28%),
    radial-gradient(ellipse at 82% 100%,rgba(207,185,133,.055),transparent 28%);
  pointer-events:none;
}
.panel::after{
  content:"";
  position:absolute;
  inset:5px;
  z-index:-1;
  border:1px solid rgba(207,185,133,.09);
  border-radius:6px;
  pointer-events:none;
}
.card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:7px;
  border-color:rgba(91,75,47,.94);
  background:
    linear-gradient(180deg,rgba(30,25,19,.95),rgba(9,10,9,.98)),
    radial-gradient(ellipse at 15% 12%,rgba(207,185,133,.07),transparent 36%);
  box-shadow:var(--ui-card-shadow);
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(255,232,170,.04),transparent 18%,transparent 82%,rgba(255,232,170,.035)),
    repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 1px,transparent 1px 9px);
  pointer-events:none;
}
.card h2,.card h3,.panel h1,.panel h2{
  color:#ffe3ae;
  text-shadow:0 1px 0 #000,0 0 14px rgba(209,132,53,.12);
}
.panel h1::after,.panel h2::after,.card h3::after{
  content:"";
  display:block;
  width:min(180px,52%);
  height:1px;
  margin-top:6px;
  background:linear-gradient(90deg,rgba(207,185,133,.56),rgba(112,83,35,.28),transparent);
}
.location-home-head h1::after,.combat-name b::after,.topbar h1::after{display:none}
.pill{
  border:1px solid rgba(114,87,45,.82);
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(36,31,23,.92),rgba(9,9,8,.94)),
    radial-gradient(ellipse at center,rgba(207,185,133,.08),transparent 68%);
  box-shadow:inset 0 1px 0 rgba(255,232,170,.06);
}
.pill.good{border-color:rgba(105,138,78,.86);background:linear-gradient(180deg,rgba(36,55,31,.92),rgba(8,13,8,.94))}
.pill.warn,.pill.red{border-color:rgba(156,74,54,.86);background:linear-gradient(180deg,rgba(62,30,20,.92),rgba(15,8,7,.94))}

.actions{
  border-color:rgba(126,93,43,.86);
  background:
    linear-gradient(180deg,rgba(21,18,14,.94),rgba(5,6,6,.98)),
    repeating-linear-gradient(90deg,rgba(255,232,170,.024) 0 1px,transparent 1px 18px);
  box-shadow:0 -16px 34px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,232,170,.06);
}
.modal-back{
  background:
    radial-gradient(ellipse at center,rgba(66,42,20,.18),transparent 40%),
    rgba(0,0,0,.78);
  backdrop-filter:blur(2px);
}
.modal{
  position:relative;
  border-radius:9px;
  border-color:rgba(166,121,54,.94);
  background:
    linear-gradient(180deg,rgba(28,24,18,.98),rgba(5,6,6,.99)),
    radial-gradient(ellipse at 50% 0,rgba(209,132,53,.12),transparent 34%);
  box-shadow:0 30px 86px rgba(0,0,0,.78),inset 0 0 0 1px rgba(255,232,170,.055);
}
.modal::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(207,185,133,.1);
  border-radius:6px;
  pointer-events:none;
}
.toast{
  border:1px solid rgba(198,145,65,.9);
  border-radius:7px;
  background:linear-gradient(180deg,rgba(62,42,20,.96),rgba(12,10,8,.98));
  box-shadow:0 18px 38px rgba(0,0,0,.58),0 0 18px rgba(209,132,53,.16);
}

.location-panel,.road-stop-home-panel,.gear-hero-panel,.service-return-panel,.route-overview-panel{
  border-color:rgba(151,110,48,.9);
}
.location-info-grid .card,.gear-slot-card,.gear-item-card,.map-route-card,.cm-node,.ability-card{
  border-color:rgba(107,82,43,.9);
}
.gear-hero-panel{
  background:
    radial-gradient(circle at 78% 14%,rgba(209,132,53,.14),transparent 28%),
    linear-gradient(180deg,rgba(25,23,20,.97),rgba(6,7,7,.98));
}
.gear-doll-wrap{
  border:1px solid rgba(105,78,37,.68);
  border-radius:8px;
  padding:10px;
  background:linear-gradient(180deg,rgba(8,10,10,.5),rgba(3,4,4,.72));
  box-shadow:inset 0 0 24px rgba(0,0,0,.24);
}
.gear-item-card.better{
  border-color:rgba(119,159,88,.94);
  box-shadow:0 0 18px rgba(117,238,136,.12),var(--ui-card-shadow);
}

.fantasy-panel{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(122,91,43,.92);border-radius:9px;background:linear-gradient(180deg,rgba(24,22,19,.96),rgba(7,8,8,.98));box-shadow:var(--ui-frame-shadow)}
.fantasy-card,.location-card,.service-card{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(91,75,47,.94);border-radius:7px;background:linear-gradient(180deg,rgba(30,25,19,.95),rgba(9,10,9,.98));box-shadow:var(--ui-card-shadow)}
.fantasy-button,.action-button{min-height:44px;border:1px solid rgba(105,78,37,.95);border-radius:7px;background:linear-gradient(180deg,rgba(55,43,29,.98),rgba(14,13,11,.98));color:#f4dfbd;box-shadow:0 3px 0 rgba(0,0,0,.56),0 10px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,232,170,.1)}
.fantasy-button-primary,.action-button.primary{border-color:rgba(200,147,62,.98);background:linear-gradient(180deg,rgba(96,61,25,.98),rgba(24,17,10,.98));color:#ffe8ad}
.location-card::after,.service-card::after,.fantasy-panel::after{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(207,185,133,.08);
  border-radius:5px;
  pointer-events:none;
}

.town-service-hero,.location-stage,.road-stop-stage,.overworld-map,.combat-shell{
  border-radius:9px;
  border-color:rgba(151,110,48,.9);
}
.building-hotspot{
  border-radius:7px;
  background:
    linear-gradient(180deg,rgba(35,25,16,.88),rgba(5,6,6,.94)),
    radial-gradient(ellipse at 50% 0,rgba(209,132,53,.12),transparent 62%);
  border-color:rgba(172,128,60,.82);
}
.combat-header,.combat-stage,.combat-actions{
  border-radius:8px;
}
.combat-card{
  border-radius:7px;
  border-width:1px;
}
.battle-log{
  border-top:1px solid rgba(126,93,43,.46);
  padding-top:8px;
}
.bar{
  border:1px solid rgba(80,62,37,.88);
  background:linear-gradient(180deg,rgba(9,8,7,.96),rgba(3,3,3,.98));
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
}
.bar>div{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 12px rgba(214,74,74,.16);
}

input,select{
  min-height:42px;
  border:1px solid rgba(105,78,37,.95);
  border-radius:7px;
  background:linear-gradient(180deg,rgba(17,15,12,.96),rgba(5,5,5,.98));
  color:#f4dfbd;
  padding:8px 10px;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,232,170,.035);
}
input:focus,select:focus,button:focus-visible{
  outline:2px solid rgba(240,200,91,.7);
  outline-offset:2px;
}

#setup .panel{
  border-color:rgba(151,110,48,.92);
  background:
    radial-gradient(circle at 50% 0%, rgba(209,132,53,.18), transparent 32%),
    linear-gradient(180deg,rgba(28,25,21,.98),rgba(6,7,7,.99));
}
.opening-scene .hero-shell,.opening-scene .story-box,.opening-scene .tut-unit,.opening-scene .mini-log{
  border:1px solid rgba(126,93,43,.72);
  background:linear-gradient(180deg,rgba(18,16,13,.86),rgba(4,5,5,.94));
}

@media(max-width:430px){
  .topbar{padding:7px;margin-left:-2px;margin-right:-2px}
  #topStats{grid-template-columns:58px minmax(0,1fr);min-height:74px;padding:6px}
  .topline{gap:5px;padding-top:7px}
  .topline button{min-height:38px;padding:6px 9px;font-size:12px}
  button:not(.overworld-node):not(.building-hotspot){min-height:44px}
  .panel{padding:10px}
  .card{padding:9px}
  .actions{padding:7px;bottom:0}
  .gear-doll-wrap{padding:8px}
  .town-service-hero{min-height:150px;padding:12px}
}

/* v19b true thematic shape pass: broken stone, banners, plaques, and arches. */
body.ui-theme-ruined{
  --shape-slab:polygon(0 10px,10px 0,calc(100% - 18px) 0,100% 12px,calc(100% - 6px) calc(100% - 10px),calc(100% - 22px) 100%,14px 100%,0 calc(100% - 16px));
  --shape-plaque:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);
  --shape-banner:polygon(0 0,100% 0,calc(100% - 8px) calc(100% - 9px),50% 100%,8px calc(100% - 9px));
  --shape-shield:polygon(50% 0,96% 12%,88% 75%,50% 100%,12% 75%,4% 12%);
  --shape-sign:polygon(10px 0,calc(100% - 10px) 0,100% 18%,calc(100% - 7px) 100%,7px 100%,0 18%);
}
:root{
  --shape-slab:polygon(0 10px,10px 0,calc(100% - 18px) 0,100% 12px,calc(100% - 6px) calc(100% - 10px),calc(100% - 22px) 100%,14px 100%,0 calc(100% - 16px));
  --shape-plaque:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);
  --shape-banner:polygon(0 0,100% 0,calc(100% - 8px) calc(100% - 9px),50% 100%,8px calc(100% - 9px));
  --shape-shield:polygon(50% 0,96% 12%,88% 75%,50% 100%,12% 75%,4% 12%);
  --shape-sign:polygon(10px 0,calc(100% - 10px) 0,100% 18%,calc(100% - 7px) 100%,7px 100%,0 18%);
}

.topbar{
  margin:0 -6px 14px;
  padding:9px 10px 11px;
  border-radius:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 15px),calc(100% - 22px) 100%,78% calc(100% - 8px),52% 100%,24% calc(100% - 8px),22px 100%,0 calc(100% - 15px));
  background:
    linear-gradient(90deg,rgba(0,0,0,.34),transparent 16%,transparent 84%,rgba(0,0,0,.38)),
    repeating-linear-gradient(90deg,rgba(255,232,170,.055) 0 1px,transparent 1px 34px),
    linear-gradient(180deg,rgba(32,28,22,.98),rgba(6,6,5,.98));
}
.topbar::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:5px;
  height:9px;
  background:repeating-linear-gradient(90deg,rgba(143,104,48,.78) 0 18px,rgba(57,42,24,.88) 18px 24px);
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,8px 100%);
  opacity:.76;
  pointer-events:none;
}
#topStats{
  position:relative;
  grid-template-columns:78px minmax(0,1fr);
  gap:12px;
  min-height:92px;
  padding:9px 10px;
  border:0;
  border-radius:0;
  clip-path:var(--shape-slab);
  background:
    linear-gradient(90deg,rgba(0,0,0,.38),transparent 22%,transparent 82%,rgba(0,0,0,.36)),
    radial-gradient(ellipse at 12% 18%,rgba(217,151,70,.16),transparent 24%),
    linear-gradient(180deg,rgba(33,31,27,.94),rgba(7,8,8,.96));
}
#topStats::before,#topStats::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
}
#topStats::before{
  inset:4px;
  border:1px solid rgba(207,185,133,.11);
  clip-path:var(--shape-slab);
}
#topStats::after{
  left:70px;
  top:8px;
  bottom:8px;
  width:10px;
  background:linear-gradient(180deg,transparent,rgba(157,113,51,.82),transparent);
  clip-path:polygon(50% 0,100% 12%,72% 100%,18% 100%,0 12%);
}
.top-status-portrait,.top-status-pills{position:relative;z-index:1}
.top-status-portrait{
  width:78px;
  min-width:78px;
  display:grid;
  place-items:center;
  padding:5px 7px 8px;
  clip-path:polygon(50% 0,93% 9%,100% 50%,83% 100%,17% 100%,0 50%,7% 9%);
  background:
    radial-gradient(ellipse at 50% 16%,rgba(255,222,139,.16),transparent 42%),
    linear-gradient(180deg,rgba(77,60,34,.96),rgba(12,12,10,.98));
  filter:drop-shadow(0 9px 14px rgba(0,0,0,.52));
}
.top-status-portrait .paper-doll-frame{
  width:58px;
  max-width:58px;
  border-radius:0;
  clip-path:polygon(50% 0,92% 10%,92% 78%,50% 100%,8% 78%,8% 10%);
}
.top-status-pills{
  gap:6px 7px;
  padding:2px 0;
}
.hud-token{
  position:relative;
  margin:0;
  border-radius:0;
  padding:5px 10px 5px 12px;
  clip-path:var(--shape-plaque);
  background:
    linear-gradient(90deg,rgba(255,232,170,.08),transparent 18%,transparent 82%,rgba(0,0,0,.2)),
    linear-gradient(180deg,rgba(42,36,25,.96),rgba(10,10,8,.98));
  border-color:transparent;
  box-shadow:0 3px 9px rgba(0,0,0,.22),inset 0 0 0 1px rgba(128,93,42,.88),inset 0 1px 0 rgba(255,232,170,.09);
}
.hud-token::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:6px;
  vertical-align:1px;
  clip-path:var(--shape-shield);
  background:#c99543;
  box-shadow:0 0 8px rgba(209,132,53,.34);
}
.hud-token-vital::before{background:#b94235}
.hud-token-mana::before{background:#5e91d7}
.hud-token-gold::before{background:#d6aa42}
.hud-token-supply::before{background:#7f9255}
.hud-token-craft::before{background:#8f8270}
.hud-token-potion::before{background:#8e5bb3}
.hud-token-day::before{background:#c9b784}

.topline{
  display:flex;
  align-items:flex-end;
  gap:7px;
  margin-top:9px;
  padding:10px 3px 4px;
  border-top:0;
}
.topline::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:2px;
  height:6px;
  background:repeating-linear-gradient(90deg,rgba(95,73,40,.78) 0 26px,rgba(20,18,15,.9) 26px 33px);
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,8px 100%);
}
.topline button{
  border:0;
  border-radius:0;
  min-height:45px;
  padding:9px 13px 13px;
  clip-path:var(--shape-banner);
  background:
    linear-gradient(90deg,rgba(0,0,0,.24),transparent 16%,transparent 84%,rgba(0,0,0,.26)),
    linear-gradient(180deg,rgba(69,45,28,.98),rgba(21,15,11,.98));
  box-shadow:0 8px 14px rgba(0,0,0,.32),inset 0 0 0 1px rgba(135,99,45,.9),inset 0 1px 0 rgba(255,232,170,.1);
  transform-origin:50% 0;
}
.topline button:nth-child(2n){
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),52% 100%,0 calc(100% - 10px));
  background:linear-gradient(180deg,rgba(53,49,39,.98),rgba(15,15,12,.98));
}
.topline button:nth-child(3n){
  clip-path:var(--shape-shield);
  padding-left:15px;
  padding-right:15px;
}
.topline button.active{
  transform:translateY(-2px);
  background:
    radial-gradient(ellipse at 50% 0,rgba(255,213,115,.24),transparent 58%),
    linear-gradient(180deg,rgba(105,67,28,.98),rgba(28,18,10,.99));
  box-shadow:0 10px 18px rgba(0,0,0,.4),0 0 22px rgba(209,132,53,.22),inset 0 0 0 1px rgba(231,181,87,.96);
}

.panel,.card,.fantasy-panel,.fantasy-card,.location-card,.service-card{
  border-radius:0;
  clip-path:var(--shape-slab);
}
.panel::after,.card::before,.location-card::after,.service-card::after,.fantasy-panel::after{
  border-radius:0;
  clip-path:var(--shape-slab);
}
.card,.location-info-grid .card,.map-route-card,.gear-slot-card,.gear-item-card,.ability-card,.cm-node{
  clip-path:var(--shape-sign);
}
.panel h1,.panel h2,.card h3,.road-stop-stage-copy h2,.location-stage-copy h2{
  display:inline-block;
  width:max-content;
  max-width:100%;
  padding:4px 14px 7px;
  clip-path:var(--shape-plaque);
  background:
    linear-gradient(90deg,rgba(0,0,0,.24),transparent 14%,transparent 86%,rgba(0,0,0,.28)),
    linear-gradient(180deg,rgba(66,47,24,.78),rgba(16,13,10,.5));
  box-shadow:inset 0 0 0 1px rgba(150,108,49,.58);
}
.panel h1::after,.panel h2::after,.card h3::after{display:none}

.location-panel,.road-stop-home-panel{
  padding:12px;
  overflow:visible;
  background:
    radial-gradient(ellipse at 50% 0,rgba(161,111,48,.12),transparent 32%),
    linear-gradient(180deg,rgba(18,17,15,.84),rgba(5,6,6,.96));
}
.location-home-head{
  position:relative;
  margin:-2px 10px 12px;
  padding:10px 14px 12px;
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,18px 100%,0 50%);
  background:linear-gradient(180deg,rgba(39,31,20,.96),rgba(10,9,7,.94));
  box-shadow:inset 0 0 0 1px rgba(136,99,45,.78),0 12px 24px rgba(0,0,0,.28);
}
.location-home-head h1{
  margin:0 0 5px;
  padding:0;
  clip-path:none;
  background:none;
  box-shadow:none;
}
.location-stage,.road-stop-stage,.town-service-hero,.overworld-map,.combat-shell{
  border:0;
  border-radius:0;
  clip-path:polygon(0 44px,22px 44px,22px 18px,42px 18px,42px 0,calc(100% - 42px) 0,calc(100% - 42px) 18px,calc(100% - 22px) 18px,calc(100% - 22px) 44px,100% 44px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px));
  box-shadow:inset 0 0 0 2px rgba(80,59,31,.9),inset 0 0 0 7px rgba(13,12,10,.7),inset 0 0 92px rgba(0,0,0,.42),0 24px 58px rgba(0,0,0,.5);
}
.location-stage::after,.road-stop-stage::after,.town-service-hero::after{
  background:
    radial-gradient(ellipse at 28% 18%,rgba(244,188,96,.1),transparent 25%),
    linear-gradient(90deg,rgba(0,0,0,.48) 0 18px,transparent 18px calc(100% - 18px),rgba(0,0,0,.48) calc(100% - 18px)),
    linear-gradient(180deg,rgba(0,0,0,.48) 0 18px,transparent 18px calc(100% - 18px),rgba(0,0,0,.58) calc(100% - 18px));
  mix-blend-mode:normal;
}
.location-stage-copy,.road-stop-stage-copy{
  max-width:min(700px,calc(100% - 24px));
  margin:16px;
  padding:14px 16px 16px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 22px,calc(100% - 10px) 100%,0 100%);
  background:linear-gradient(90deg,rgba(9,8,6,.72),rgba(9,8,6,.34) 72%,transparent);
  box-shadow:inset 3px 0 0 rgba(154,111,51,.78);
}
.location-badge{
  border-radius:0;
  clip-path:var(--shape-plaque);
  background:linear-gradient(180deg,rgba(54,38,21,.96),rgba(13,11,8,.96));
  box-shadow:inset 0 0 0 1px rgba(156,115,52,.8),0 8px 15px rgba(0,0,0,.26);
}
.location-actions{
  left:24px;
  bottom:18px;
  gap:10px;
}
.location-actions button,.actions .grid3 button{
  clip-path:var(--shape-sign);
  border-radius:0;
  padding-left:16px;
  padding-right:16px;
}
.location-actions button{
  min-width:132px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.22),transparent 16%,transparent 84%,rgba(0,0,0,.24)),
    linear-gradient(180deg,rgba(77,52,26,.96),rgba(18,13,9,.98));
  box-shadow:0 12px 20px rgba(0,0,0,.42),inset 0 0 0 1px rgba(176,131,61,.82);
}
.building-hotspot{
  min-width:86px;
  padding:9px 9px 12px;
  border:0;
  border-radius:0;
  clip-path:var(--shape-banner);
  background:
    linear-gradient(180deg,rgba(69,43,22,.9),rgba(12,10,7,.96)),
    radial-gradient(ellipse at 50% 0,rgba(240,200,91,.16),transparent 58%);
  box-shadow:0 14px 22px rgba(0,0,0,.54),0 0 18px rgba(240,200,91,.12),inset 0 0 0 1px rgba(216,173,92,.72);
}
.building-hotspot::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:-10px;
  height:18px;
  border-left:1px solid rgba(191,154,89,.7);
  border-right:1px solid rgba(191,154,89,.7);
  pointer-events:none;
}
.building-icon{
  width:36px;
  height:34px;
  clip-path:var(--shape-shield);
  box-shadow:inset 0 0 0 1px rgba(255,232,170,.22),0 5px 8px rgba(0,0,0,.42);
}
.building-icon::after{display:none}
.no-buildings{
  border-radius:0;
  clip-path:var(--shape-sign);
}

.town-service-hero{
  padding:18px;
  align-items:end;
}
.town-service-hero>div{
  width:max-content;
  max-width:100%;
  padding:10px 14px 12px;
  clip-path:var(--shape-slab);
  background:linear-gradient(90deg,rgba(7,6,5,.78),rgba(7,6,5,.32));
  box-shadow:inset 0 0 0 1px rgba(154,111,51,.58);
}
.service-return-panel{
  width:max-content;
  max-width:100%;
  margin-left:auto;
}
.event-feed .entry,.story-box,.mini-log,.log{
  border-radius:0;
  clip-path:var(--shape-sign);
}

@media(max-width:700px){
  #topStats{grid-template-columns:64px minmax(0,1fr);gap:8px;min-height:84px}
  .top-status-portrait{width:64px;min-width:64px;padding:4px 5px 7px}
  .top-status-portrait .paper-doll-frame{width:50px;max-width:50px}
  .hud-token{font-size:11px;padding:4px 8px 5px 10px}
  .topline button{min-height:42px;padding:8px 11px 12px;font-size:12px}
  .location-home-head{grid-template-columns:1fr!important;margin:0 3px 10px;padding:9px 11px;min-width:0}
  .location-home-head>*{min-width:0}
  .location-home-head button{width:100%;max-width:100%}
  .panel h1,.panel h2,.card h3,.road-stop-stage-copy h2,.location-stage-copy h2{width:auto;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .location-stage,.road-stop-stage{clip-path:polygon(0 28px,14px 28px,14px 12px,28px 12px,28px 0,calc(100% - 28px) 0,calc(100% - 28px) 12px,calc(100% - 14px) 12px,calc(100% - 14px) 28px,100% 28px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px))}
  .location-stage-copy,.road-stop-stage-copy{margin:10px;padding:12px}
  .location-stage-copy h2,.road-stop-stage-copy h2{font-size:26px}
  .location-actions{left:10px;right:10px;bottom:10px;max-width:none}
  .location-actions button{min-width:0;flex:1 1 132px}
  .building-hotspot{min-width:74px;font-size:11px;padding:7px 7px 10px}
  .building-icon{width:30px;height:28px}
}

/* v19c repair: softer ruined-medieval framing without chunky clipping. */
:root{
  --ui-radius:8px;
  --ui-soft-border:rgba(145,106,50,.72);
  --ui-soft-border-dim:rgba(91,68,36,.7);
  --ui-wood:#2a1c12;
  --ui-stone-soft:#191816;
  --ui-bronze-soft:#b9853f;
  --ui-parchment-strip:#c7aa70;
}

.topbar{
  margin:0 0 10px;
  padding:7px 8px 8px;
  border:1px solid rgba(126,93,43,.74);
  border-top:0;
  border-radius:0 0 10px 10px;
  clip-path:none;
  overflow:visible;
  background:
    linear-gradient(90deg,rgba(0,0,0,.28),transparent 18%,transparent 82%,rgba(0,0,0,.3)),
    linear-gradient(180deg,rgba(20,18,15,.98),rgba(5,6,6,.97));
  box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,232,170,.06);
}
.topbar::before{
  left:12px;
  right:12px;
  top:4px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(199,170,112,.5),transparent);
}
.topbar::after{
  left:16px;
  right:16px;
  bottom:2px;
  height:2px;
  clip-path:none;
  opacity:.48;
  background:linear-gradient(90deg,transparent,rgba(154,111,51,.72),transparent);
}

#topStats{
  grid-template-columns:76px minmax(0,1fr);
  min-height:94px;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(98,74,42,.72);
  border-radius:9px;
  clip-path:none;
  overflow:visible;
  background:
    linear-gradient(90deg,rgba(0,0,0,.36),transparent 18%),
    radial-gradient(ellipse at 10% 20%,rgba(185,133,63,.12),transparent 32%),
    linear-gradient(180deg,rgba(23,23,20,.92),rgba(6,7,7,.94));
  box-shadow:inset 0 0 0 1px rgba(255,232,170,.035),inset 0 -20px 42px rgba(0,0,0,.24);
}
#topStats::before{
  inset:5px;
  border:1px solid rgba(207,185,133,.07);
  border-radius:7px;
  clip-path:none;
}
#topStats::after{
  left:83px;
  top:12px;
  bottom:12px;
  width:1px;
  clip-path:none;
  background:linear-gradient(180deg,transparent,rgba(185,133,63,.58),transparent);
}
.top-status-portrait{
  width:76px;
  min-width:76px;
  min-height:78px;
  padding:5px;
  clip-path:none;
  border:1px solid rgba(151,110,48,.72);
  border-radius:8px 8px 13px 13px;
  background:
    radial-gradient(ellipse at 50% 8%,rgba(255,220,135,.12),transparent 45%),
    linear-gradient(180deg,rgba(42,35,23,.96),rgba(8,8,7,.98));
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.45));
}
.top-status-portrait::before{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  top:-3px;
  height:7px;
  border-radius:8px 8px 0 0;
  background:linear-gradient(90deg,transparent,rgba(185,133,63,.85),transparent);
  pointer-events:none;
}
.top-status-portrait .paper-doll-frame,
.paper-doll-frame-hud{
  width:64px;
  max-width:64px;
  border-radius:7px;
  clip-path:none;
  overflow:hidden;
}
.paper-doll-frame-hud .paper-doll-scene{
  min-height:86px;
  aspect-ratio:3/4;
}
.paper-doll-frame-hud .paper-doll-generated{
  inset:1px;
  width:calc(100% - 2px);
  height:calc(100% - 2px);
  object-fit:contain;
  object-position:center bottom;
  transform:scale(1);
}
.top-status-pills{
  gap:5px 6px;
  padding:1px 0;
}
.hud-token{
  border-radius:5px;
  clip-path:none;
  padding:4px 8px;
  background:
    linear-gradient(90deg,rgba(255,232,170,.055),transparent 22%,transparent 78%,rgba(0,0,0,.16)),
    linear-gradient(180deg,rgba(35,30,22,.92),rgba(9,10,9,.95));
  border:1px solid rgba(107,82,43,.7);
  box-shadow:inset 0 1px 0 rgba(255,232,170,.06),0 2px 7px rgba(0,0,0,.18);
}
.hud-token::before{
  width:6px;
  height:6px;
  border-radius:50%;
  clip-path:none;
  margin-right:5px;
}

.topline{
  gap:5px;
  margin-top:6px;
  padding:6px 1px 2px;
  align-items:center;
  border-top:1px solid rgba(126,93,43,.3);
}
.topline::before{
  display:none;
}
.topline button,
.topline button:nth-child(2n),
.topline button:nth-child(3n){
  min-height:34px;
  padding:5px 10px 6px;
  border:1px solid rgba(101,76,39,.82);
  border-radius:7px 7px 4px 4px;
  clip-path:none;
  background:
    linear-gradient(180deg,rgba(46,36,24,.96),rgba(13,12,10,.98));
  box-shadow:0 2px 0 rgba(0,0,0,.5),inset 0 1px 0 rgba(255,232,170,.08);
}
.topline button::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:3px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(231,190,107,.38),transparent);
  pointer-events:none;
}
.topline button.active{
  transform:none;
  border-color:rgba(214,165,78,.92);
  background:
    linear-gradient(180deg,rgba(74,50,25,.98),rgba(17,13,9,.98));
  box-shadow:0 2px 0 rgba(0,0,0,.5),0 0 14px rgba(209,132,53,.14),inset 0 0 0 1px rgba(255,232,170,.05);
}
.topline button:not(.overworld-node):not(.building-hotspot),
.topline button.active:not(.overworld-node):not(.building-hotspot){
  min-height:34px;
}

.panel,.card,.fantasy-panel,.fantasy-card,.location-card,.service-card,
.location-info-grid .card,.map-route-card,.gear-slot-card,.gear-item-card,.ability-card,.cm-node,
.event-feed .entry,.story-box,.mini-log,.log,.no-buildings{
  clip-path:none;
  border-radius:var(--ui-radius);
}
.panel{
  overflow:hidden;
  border-color:var(--ui-soft-border);
  background:
    linear-gradient(90deg,rgba(0,0,0,.22),transparent 18%,transparent 82%,rgba(0,0,0,.24)),
    linear-gradient(180deg,rgba(22,21,18,.94),rgba(6,7,7,.97));
  box-shadow:0 14px 34px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,232,170,.035);
}
.panel::after,.card::before,.location-card::after,.service-card::after,.fantasy-panel::after{
  clip-path:none;
  border-radius:6px;
}
.card{
  background:
    linear-gradient(180deg,rgba(25,24,20,.91),rgba(8,10,10,.96)),
    radial-gradient(ellipse at 16% 0,rgba(185,133,63,.07),transparent 38%);
  border-color:rgba(93,76,50,.76);
}
.panel h1,.panel h2,.card h3,.road-stop-stage-copy h2,.location-stage-copy h2{
  display:block;
  width:auto;
  max-width:100%;
  padding:0 0 6px;
  clip-path:none;
  background:none;
  box-shadow:none;
  overflow-wrap:normal;
}
.panel h1::after,.panel h2::after,.card h3::after{
  display:block;
  width:min(210px,58%);
  height:2px;
  margin-top:6px;
  background:
    linear-gradient(90deg,rgba(185,133,63,.72),rgba(105,78,37,.25),transparent),
    radial-gradient(circle at 8px 50%,rgba(215,170,91,.85) 0 2px,transparent 3px);
}

.location-panel,.road-stop-home-panel{
  padding:10px;
  overflow:hidden;
}
.location-home-head{
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:start;
  margin:0 0 10px;
  padding:11px 12px;
  clip-path:none;
  border:1px solid rgba(116,84,39,.68);
  border-radius:8px;
  background:
    linear-gradient(90deg,rgba(32,22,14,.88),rgba(9,10,9,.64)),
    linear-gradient(180deg,rgba(44,33,20,.4),transparent);
  box-shadow:inset 3px 0 0 rgba(185,133,63,.52),0 8px 18px rgba(0,0,0,.2);
}
.location-home-head h1{
  font-size:clamp(25px,3vw,35px);
  line-height:1.08;
}
.location-stage,.road-stop-stage,.town-service-hero,.overworld-map,.combat-shell{
  border:1px solid rgba(150,110,50,.78);
  border-radius:10px;
  clip-path:none;
  box-shadow:inset 0 0 0 1px rgba(255,232,170,.06),inset 0 0 48px rgba(0,0,0,.24),0 18px 42px rgba(0,0,0,.4);
}
.location-stage::after,.road-stop-stage::after,.town-service-hero::after{
  background:
    radial-gradient(ellipse at 28% 18%,rgba(244,188,96,.08),transparent 25%),
    radial-gradient(ellipse at 82% 62%,rgba(88,120,96,.055),transparent 34%);
  mix-blend-mode:screen;
}
.location-stage.has-location-art::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.64),rgba(0,0,0,.08) 45%,rgba(0,0,0,.44)),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.58));
}
.location-stage-copy,.road-stop-stage-copy{
  max-width:min(650px,calc(100% - 24px));
  margin:14px;
  padding:13px 15px 15px;
  clip-path:none;
  border-left:3px solid rgba(185,133,63,.68);
  border-radius:0 8px 8px 0;
  background:
    linear-gradient(90deg,rgba(8,7,5,.66),rgba(8,7,5,.28) 74%,transparent);
  box-shadow:none;
}
.location-badge{
  border-radius:999px;
  clip-path:none;
  padding:5px 10px;
  background:linear-gradient(180deg,rgba(45,32,18,.9),rgba(10,9,7,.92));
  border-color:rgba(143,104,48,.72);
  box-shadow:0 5px 12px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,232,170,.07);
}
.location-actions{
  left:14px;
  bottom:14px;
  gap:7px;
}
.location-actions button,.actions .grid3 button{
  clip-path:none;
  border-radius:7px;
  padding-left:11px;
  padding-right:11px;
}
.location-actions button{
  min-width:116px;
  min-height:40px;
  background:
    linear-gradient(180deg,rgba(59,40,20,.9),rgba(15,11,8,.96));
  box-shadow:0 8px 16px rgba(0,0,0,.34),inset 0 0 0 1px rgba(176,131,61,.56);
}

.building-hotspot{
  min-width:74px;
  min-height:52px;
  padding:6px 9px 9px;
  gap:3px;
  border:1px solid rgba(182,140,72,.78);
  border-radius:4px 4px 8px 8px;
  clip-path:none;
  background:
    linear-gradient(180deg,rgba(83,52,25,.86),rgba(31,20,12,.94)),
    linear-gradient(90deg,rgba(255,232,170,.08),transparent 22%,transparent 78%,rgba(0,0,0,.18));
  color:#ffe8bf;
  box-shadow:0 9px 18px rgba(0,0,0,.5),0 0 14px rgba(240,200,91,.09),inset 0 1px 0 rgba(255,232,170,.14);
}
.building-hotspot::before{
  left:18px;
  right:18px;
  top:-12px;
  height:14px;
  border-left:1px solid rgba(199,170,112,.7);
  border-right:1px solid rgba(199,170,112,.7);
}
.building-hotspot::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:4px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,232,170,.42),transparent);
  pointer-events:none;
}
.building-hotspot:hover:not(:disabled){
  transform:translate(-50%,-50%) translateY(-2px);
  box-shadow:0 12px 22px rgba(0,0,0,.54),0 0 18px rgba(240,200,91,.2);
}
.building-icon{
  width:22px;
  height:18px;
  clip-path:none;
  border-radius:3px;
  opacity:.82;
  background:
    linear-gradient(180deg,rgba(238,190,99,.22),rgba(54,34,18,.7));
  box-shadow:inset 0 0 0 1px rgba(255,232,170,.14);
}
.building-tavern .building-icon{border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 28%,rgba(255,186,85,.85) 0 3px,transparent 4px),linear-gradient(180deg,rgba(82,48,24,.8),rgba(20,12,7,.8))}
.building-inn .building-icon{background:linear-gradient(90deg,transparent 0 42%,rgba(238,190,99,.7) 43% 57%,transparent 58%),linear-gradient(180deg,rgba(68,43,24,.78),rgba(18,12,8,.82))}
.building-blacksmith .building-icon{background:linear-gradient(135deg,transparent 0 38%,rgba(220,165,82,.78) 39% 55%,transparent 56%),linear-gradient(180deg,rgba(72,45,24,.78),rgba(18,12,8,.82))}
.building-market .building-icon{background:linear-gradient(180deg,rgba(204,170,87,.65) 0 30%,rgba(62,39,20,.82) 31% 100%)}
.building-mine .building-icon{clip-path:none;background:linear-gradient(135deg,transparent 0 35%,rgba(155,146,120,.78) 36% 62%,transparent 63%),linear-gradient(180deg,rgba(50,48,42,.78),rgba(14,13,11,.86))}

.actions{
  border-radius:8px;
  padding:6px;
}
.combat-actions{
  position:sticky;
}
.combat-actions .grid3{
  gap:6px;
}
.combat-actions .grid3 button{
  min-height:38px;
  padding:5px 9px;
  font-size:12px;
  border-radius:6px;
  background:
    linear-gradient(180deg,rgba(42,35,25,.96),rgba(11,11,9,.98));
  box-shadow:0 2px 0 rgba(0,0,0,.48),inset 0 1px 0 rgba(255,232,170,.08);
}
.combat-actions .grid3 button.primary{
  background:linear-gradient(180deg,rgba(88,57,25,.96),rgba(20,14,9,.98));
}

.town-service-hero>div{
  clip-path:none;
  border-left:3px solid rgba(185,133,63,.65);
  border-radius:0 8px 8px 0;
}
.service-return-panel{
  width:auto;
  max-width:none;
}

@media(max-width:700px){
  .topbar{padding:6px 6px 8px;margin:0 -2px 9px}
  #topStats{grid-template-columns:72px minmax(0,1fr);min-height:92px;gap:8px;padding:7px}
  #topStats::after{left:78px}
  .top-status-portrait{width:72px;min-width:72px;min-height:84px;padding:4px}
  .top-status-portrait .paper-doll-frame,.paper-doll-frame-hud{width:62px;max-width:62px}
  .paper-doll-frame-hud .paper-doll-scene{min-height:84px}
  .topline{gap:5px;padding-top:6px}
  .topline button,.topline button:nth-child(2n),.topline button:nth-child(3n){min-height:38px;padding:6px 10px;font-size:12px}
  .topline button:not(.overworld-node):not(.building-hotspot),
  .topline button.active:not(.overworld-node):not(.building-hotspot){min-height:38px}
  .location-home-head{grid-template-columns:1fr!important;margin:0 0 9px;padding:10px}
  .location-home-head button{width:100%;max-width:100%;justify-self:stretch}
  .location-stage,.road-stop-stage{clip-path:none;border-radius:9px}
  .location-stage-copy,.road-stop-stage-copy{margin:10px;padding:11px 12px}
  .location-stage-copy h2,.road-stop-stage-copy h2{font-size:26px}
  .location-actions{left:10px;right:10px;bottom:10px;max-width:none}
  .location-actions button{min-width:0;flex:1 1 128px}
  .building-hotspot{min-width:66px;min-height:48px;font-size:11px;padding:6px 7px 8px}
  .building-icon{width:18px;height:15px}
  .combat-actions .grid3 button{min-height:42px;font-size:12px}
}

/* v19d fantasy UI art kit: generated title art + ornate reusable frame language. */
:root{
  --ui-title-bg:url("./assets/ui/generated/title-bg-v19d.png");
  --ui-ornaments:url("./assets/ui/generated/ui-ornaments-v19d.png");
  --fantasy-gold:#e4bd72;
  --fantasy-bronze:#a97336;
  --fantasy-bronze-dim:#5d3f22;
  --fantasy-ink:#050505;
  --fantasy-parchment:#d8c08a;
  --fantasy-burgundy:#3b1115;
}

body.start-lock{
  background:#020303;
}
body.start-lock::before{
  background:
    radial-gradient(ellipse at 50% 18%,rgba(255,210,130,.08),transparent 28%),
    linear-gradient(90deg,rgba(0,0,0,.78),transparent 22%,transparent 78%,rgba(0,0,0,.78));
}
body.start-lock #app{
  max-width:none;
  min-height:100vh;
  padding:0;
}
#setup{
  min-height:100vh;
}
.fantasy-start-screen{
  position:relative;
  min-height:100vh;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:18px;
  padding:clamp(22px,5vw,58px) 14px;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.26) 28%,rgba(0,0,0,.12) 60%,rgba(0,0,0,.58)),
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.48) 65%,rgba(0,0,0,.92)),
    var(--ui-title-bg) center/cover no-repeat;
}
.fantasy-start-screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(ellipse at 28% 74%,rgba(255,150,62,.18),transparent 22%),
    radial-gradient(ellipse at 78% 44%,rgba(255,204,112,.09),transparent 20%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 8px);
  mix-blend-mode:screen;
}
.fantasy-start-vignette{
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(ellipse at center,transparent 0 42%,rgba(0,0,0,.76) 100%);
  pointer-events:none;
}
.fantasy-title-frame{
  position:relative;
  width:min(850px,94vw);
  padding:30px 22px 22px;
  text-align:center;
  background:
    linear-gradient(180deg,rgba(10,8,6,.56),rgba(3,3,3,.28)),
    radial-gradient(ellipse at 50% 0,rgba(224,178,93,.16),transparent 58%);
  border:1px solid rgba(214,172,91,.55);
  border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,232,170,.06),inset 0 0 48px rgba(0,0,0,.35);
  backdrop-filter:blur(1px);
}
.fantasy-title-frame::before,
.fantasy-title-frame::after{
  content:"";
  position:absolute;
  width:82px;
  height:82px;
  background:
    radial-gradient(circle at 50% 50%,rgba(228,178,91,.34) 0 2px,transparent 3px),
    linear-gradient(135deg,transparent 0 42%,rgba(185,133,63,.66) 43% 48%,transparent 49%),
    linear-gradient(45deg,transparent 0 42%,rgba(185,133,63,.5) 43% 48%,transparent 49%);
  pointer-events:none;
  opacity:.72;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.6));
}
.fantasy-title-frame::before{
  left:14px;
  top:12px;
}
.fantasy-title-frame::after{
  right:14px;
  bottom:12px;
  transform:rotate(180deg);
}
.fantasy-title-crown{
  position:absolute;
  left:50%;
  top:-13px;
  width:min(420px,62%);
  height:3px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(220,172,88,.82),transparent);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.7));
  pointer-events:none;
}
.fantasy-title-text{
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(48px,8vw,92px);
  line-height:.9;
  color:#fff1c6;
  letter-spacing:.01em;
  text-shadow:0 3px 0 #170b05,0 0 18px rgba(255,184,82,.3),0 0 42px rgba(0,0,0,.9);
}
.fantasy-title-sub{
  max-width:680px;
  margin:12px auto 0;
  color:#e6cfab;
  font-weight:700;
  text-shadow:0 2px 0 #000,0 0 16px rgba(0,0,0,.8);
}
.fantasy-divider{
  display:block;
  width:min(420px,72%);
  height:12px;
  margin:14px auto 0;
  background:
    radial-gradient(circle at 50% 50%,rgba(160,42,42,.86) 0 4px,transparent 5px),
    linear-gradient(90deg,transparent,rgba(111,133,75,.5) 16%,rgba(214,166,80,.64) 50%,rgba(111,133,75,.5) 84%,transparent);
  opacity:.9;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.5));
}
.fantasy-start-card{
  position:relative;
  width:min(620px,92vw);
  padding:18px;
  border:1px solid rgba(196,147,68,.68);
  border-radius:10px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.2),transparent 18%,transparent 82%,rgba(0,0,0,.24)),
    linear-gradient(180deg,rgba(24,18,12,.84),rgba(5,5,5,.9));
  box-shadow:0 18px 62px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,232,170,.055),inset 0 0 42px rgba(0,0,0,.32);
  backdrop-filter:blur(3px);
}
.fantasy-start-card::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(216,176,100,.12);
  border-radius:7px;
  pointer-events:none;
}
.fantasy-start-card-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#f5dfb2;
  font-weight:900;
  margin-bottom:12px;
  text-shadow:0 2px 0 #000;
}
.fantasy-column-mark{
  width:44px;
  height:22px;
  background:var(--ui-ornaments) right 0/620px 620px no-repeat;
  opacity:.78;
}
.fantasy-language-row{
  margin:8px 0 14px;
}
.fantasy-language-row button{
  min-height:42px;
}
.fantasy-field-label{
  display:block;
  color:#d9bf8f;
  font-weight:900;
  margin:0 0 6px;
}
.fantasy-name-input{
  margin-bottom:12px;
}
.fantasy-start-note{
  position:relative;
  padding:12px 14px;
  margin:6px 0 12px;
  color:#ead4ad;
  border:1px solid rgba(154,111,51,.56);
  border-radius:8px;
  background:
    linear-gradient(90deg,rgba(76,45,18,.45),rgba(10,8,6,.62)),
    radial-gradient(ellipse at 20% 0,rgba(255,194,98,.1),transparent 54%);
}
.fantasy-start-actions button{
  min-height:48px;
  font-size:15px;
}

.fantasy-shell{}
.fantasy-panel,.fantasy-panel-ornate,.panel,.modal,.tutorial-frame,.hero-shell,.choice-card,.world-card{
  border-color:rgba(162,118,54,.72);
  background:
    linear-gradient(90deg,rgba(0,0,0,.24),transparent 16%,transparent 84%,rgba(0,0,0,.28)),
    radial-gradient(ellipse at 12% 0,rgba(220,162,78,.08),transparent 32%),
    linear-gradient(180deg,rgba(23,21,18,.95),rgba(6,7,7,.98));
  box-shadow:0 16px 38px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,232,170,.045),inset 0 0 28px rgba(0,0,0,.24);
}
.fantasy-panel-ornate::before,.panel::before,.modal::after{
  background:
    linear-gradient(90deg,rgba(255,232,170,.045),transparent 12%,transparent 88%,rgba(255,232,170,.035)),
    repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 1px,transparent 1px 10px);
}
.panel::after,.modal::before{
  border-color:rgba(218,178,99,.1);
}
.fantasy-section-header,.panel h1,.panel h2,.card h3,.modal h2{
  position:relative;
  color:#ffe6ae;
  text-shadow:0 2px 0 #000,0 0 14px rgba(231,170,84,.14);
}
.fantasy-section-header::before,.panel h1::before,.panel h2::before,.card h3::before,.modal h2::before{
  content:"";
  display:inline-block;
  width:22px;
  height:13px;
  margin-right:8px;
  vertical-align:1px;
  background:var(--ui-ornaments) 0 -538px/620px 620px no-repeat;
  opacity:.85;
}
.fantasy-resource-token,.hud-token,.pill{
  background:
    linear-gradient(180deg,rgba(42,32,22,.96),rgba(9,10,9,.96)),
    radial-gradient(ellipse at 50% 0,rgba(255,218,128,.09),transparent 64%);
  border-color:rgba(143,104,48,.72);
}
.fantasy-portrait-frame,.top-status-portrait{
  background:
    radial-gradient(ellipse at 50% 0,rgba(255,202,106,.16),transparent 44%),
    linear-gradient(180deg,rgba(45,34,22,.97),rgba(6,6,6,.98));
  box-shadow:0 10px 22px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,232,170,.08);
}
.fantasy-nav-tab,.topline button,.topline button:nth-child(2n),.topline button:nth-child(3n){
  position:relative;
  border-color:rgba(126,92,43,.82);
  background:
    linear-gradient(180deg,rgba(64,41,22,.96),rgba(14,11,8,.98));
}
.topline button::after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  bottom:3px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,225,150,.24),transparent);
  pointer-events:none;
}
button.fantasy-action-button,
button.fantasy-command-button,
button:not(.overworld-node):not(.building-hotspot){
  border-color:rgba(145,103,45,.84);
  background:
    linear-gradient(180deg,rgba(54,35,19,.98),rgba(12,10,8,.98)),
    radial-gradient(ellipse at 50% 0,rgba(255,194,98,.11),transparent 62%);
}
button.fantasy-action-button.primary,
button.primary:not(.overworld-node):not(.building-hotspot){
  border-color:rgba(216,162,72,.9);
  background:
    linear-gradient(180deg,rgba(99,59,22,.98),rgba(24,14,8,.98)),
    radial-gradient(ellipse at 50% 0,rgba(255,211,116,.18),transparent 64%);
}
.fantasy-command-button,.combat-actions .grid3 button{
  border-radius:6px;
  background:
    linear-gradient(180deg,rgba(47,36,24,.98),rgba(9,9,8,.99)),
    radial-gradient(ellipse at 50% 0,rgba(225,170,85,.1),transparent 60%);
}

.fantasy-location-frame,.location-stage,.road-stop-stage,.town-service-hero,.overworld-map,.combat-shell{
  border-color:rgba(171,124,56,.82);
  background-color:#050505;
  box-shadow:0 20px 52px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,232,170,.08),inset 0 0 54px rgba(0,0,0,.28);
}
.location-stage::before,.road-stop-stage::before,.town-service-hero::before{
  box-shadow:inset 0 0 0 4px rgba(7,7,6,.24),inset 0 0 0 5px rgba(182,133,61,.18);
}
.location-stage-copy,.road-stop-stage-copy{
  background:
    linear-gradient(90deg,rgba(7,6,5,.58),rgba(7,6,5,.22) 72%,transparent);
  border-left-color:rgba(218,168,82,.78);
}
.location-home-head{
  background:
    linear-gradient(90deg,rgba(43,27,15,.9),rgba(9,9,8,.68)),
    radial-gradient(ellipse at 12% 0,rgba(255,192,92,.09),transparent 45%);
}
.fantasy-hanging-sign,.building-hotspot{
  background:
    linear-gradient(180deg,rgba(94,56,24,.9),rgba(33,20,11,.96)),
    radial-gradient(ellipse at 50% 0,rgba(255,202,104,.14),transparent 58%);
  border-color:rgba(204,154,78,.82);
}
.building-hotspot::before{
  border-color:rgba(230,194,124,.72);
}
.building-hotspot span:last-child{
  text-shadow:0 2px 0 #000,0 0 8px rgba(0,0,0,.8);
}
.fantasy-divider-line,.battle-log,.skill-drawer{
  border-color:rgba(126,91,42,.64);
}

@media(max-width:700px){
  .fantasy-start-screen{
    align-content:end;
    gap:12px;
    padding:72px 12px 22px;
    background-position:55% center;
  }
  .fantasy-title-frame{
    padding:24px 14px 16px;
  }
  .fantasy-title-text{
    font-size:clamp(42px,14vw,58px);
  }
  .fantasy-title-sub{
    font-size:13px;
  }
  .fantasy-divider{
    height:24px;
    background-size:500px 500px;
    background-position:0 -392px;
  }
  .fantasy-start-card{
    padding:14px;
  }
  .fantasy-start-actions{
    grid-template-columns:1fr;
  }
}

@media(max-height:520px) and (orientation:landscape){
  body.cinematic-world-home-active .topbar{
    display:flex;
    align-items:center;
    gap:8px;
    width:calc(100vw - 18px);
    padding:4px 6px 5px;
  }

  body.cinematic-world-home-active #topStats{
    flex:1 1 56%;
    min-width:0;
    display:flex !important;
    min-height:38px !important;
    gap:6px !important;
    padding:4px 6px !important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  body.cinematic-world-home-active #topStats::-webkit-scrollbar{
    display:none;
  }

  body.cinematic-world-home-active #topStats::after{
    display:none;
  }

  body.cinematic-world-home-active .top-status-portrait{
    display:none !important;
  }

  body.cinematic-world-home-active .top-status-pills{
    flex-wrap:nowrap !important;
    align-items:center;
    align-content:center;
    padding-right:10px;
  }

  body.cinematic-world-home-active .hud-token{
    white-space:nowrap;
    font-size:10px !important;
    padding:3px 7px 4px 9px !important;
  }

  body.cinematic-world-home-active .topline{
    flex:0 0 min(362px,43vw);
    min-width:0;
    margin-top:3px !important;
    padding:3px 2px 1px !important;
    overflow-x:auto;
  }

  body.cinematic-world-home-active .topline button,
  body.cinematic-world-home-active .topline button:nth-child(2n),
  body.cinematic-world-home-active .topline button:nth-child(3n){
    min-height:29px !important;
    padding:3px 8px !important;
    font-size:10px !important;
  }
}

/* Dynamic battlefield director true final guard. Later milestone styles also touch combat,
   so keep the new staged composition as the last word in the cascade. */
body.cinematic-combat-active .topbar{
  display:none !important;
}

.combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"][data-scene-director="dynamic"]{
  min-height:var(--director-stage-height,clamp(500px,64vh,720px)) !important;
  height:auto !important;
  overflow:hidden !important;
}

@media(max-width:700px){
  body.cinematic-combat-active #app{
    padding:4px 6px 72px !important;
  }

  .combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"][data-scene-director="dynamic"]{
    min-height:var(--director-stage-height-mobile,min(460px,50svh)) !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  body.cinematic-combat-active #app{
    max-width:100vw !important;
    padding:2px 5px 48px !important;
  }

  body.cinematic-combat-active .combat-shell{
    gap:4px !important;
    padding:5px !important;
    border-radius:8px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header{
    grid-template-columns:minmax(0,.48fr) minmax(0,.52fr) !important;
    gap:4px !important;
    margin:0 !important;
    padding:4px 5px !important;
    min-height:0 !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header h2{
    font-size:13px !important;
    line-height:1.05 !important;
    margin:0 !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header p,
  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .battle-log{
    display:none !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order{
    max-height:22px !important;
    gap:3px !important;
    overflow:hidden !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order .pill{
    padding:2px 5px !important;
    font-size:9px !important;
    line-height:1 !important;
  }

  .combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"][data-scene-director="dynamic"]{
    min-height:min(var(--director-stage-height-landscape,220px),54svh) !important;
    height:min(var(--director-stage-height-landscape,220px),54svh) !important;
    max-height:min(var(--director-stage-height-landscape,220px),54svh) !important;
    margin:0 !important;
    padding:6px 8px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-area{
    inset:6px 8px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-area > h2{
    display:none !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor,
  .combat-stage[data-scene-director="dynamic"] .unit.combat-card.combat-actor,
  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor{
    position:absolute !important;
    left:var(--actor-landscape-x,var(--actor-x,50%)) !important;
    bottom:var(--actor-landscape-y,var(--actor-y,0)) !important;
    width:var(--actor-landscape-width,var(--actor-width,140px)) !important;
    min-height:var(--actor-landscape-height,var(--actor-height,208px)) !important;
    transform:translateX(-50%) scale(var(--actor-landscape-scale,var(--actor-scale,1))) !important;
    transform-origin:bottom center !important;
  }

  .combat-stage[data-scene-director="dynamic"] .portrait-wrap{
    min-height:var(--actor-landscape-art-height,var(--actor-art-height,168px)) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .paper-doll-frame-combat,
  .combat-stage[data-scene-director="dynamic"] .enemy-pose-frame,
  .combat-stage[data-scene-director="dynamic"] .portrait-art,
  .combat-stage[data-scene-director="dynamic"] .companion-scene-frame{
    min-height:var(--actor-landscape-art-height,var(--actor-art-height,168px)) !important;
    height:var(--actor-landscape-art-height,var(--actor-art-height,168px)) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card-body{
    max-width:128px !important;
    padding:4px 5px !important;
    gap:3px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-name b{
    font-size:10px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-name span,
  .combat-stage[data-scene-director="dynamic"] .meter-line,
  .combat-stage[data-scene-director="dynamic"] .combat-card-body .pill{
    font-size:8px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-companion .combat-card-body,
  .combat-stage[data-scene-director="dynamic"] [data-director-depth="background"] .combat-card-body{
    display:none !important;
  }

  .combat-stage[data-scene-director="dynamic"][data-boss-presence="true"] .combat-actor-enemy:not(.target) .combat-card-body{
    display:none !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions{
    padding:4px !important;
    margin:0 !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions .grid3{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(44px,1fr)) !important;
    gap:3px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions button{
    min-height:25px !important;
    padding:2px 4px !important;
    font-size:9px !important;
    line-height:1 !important;
  }
}

/* Dynamic battlefield director final cascade guard: keep combat framed in the first viewport. */
body.cinematic-combat-active .topbar{
  display:none !important;
}

.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header{
  display:grid !important;
  grid-template-columns:minmax(0,.42fr) minmax(0,.58fr) !important;
  align-items:center !important;
  gap:8px !important;
  min-height:0 !important;
  margin-top:4px !important;
  padding:6px 8px !important;
}

.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header h2{
  margin:0 !important;
  font-size:clamp(17px,2vw,24px) !important;
  line-height:1.05 !important;
}

.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header p{
  margin:3px 0 0 !important;
  font-size:12px !important;
}

.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:5px !important;
  max-height:32px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none;
}

.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order::-webkit-scrollbar{
  display:none;
}

.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order .pill{
  flex:0 0 auto;
  white-space:nowrap;
  padding:3px 7px !important;
  font-size:10px !important;
}

.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions{
  padding:7px !important;
}

.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .battle-log{
  max-height:76px !important;
  overflow:auto !important;
}

@media(max-width:700px){
  body.cinematic-combat-active .topbar{
    display:none !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header{
    grid-template-columns:1fr !important;
    gap:4px !important;
    margin-top:0 !important;
    padding:6px 7px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header h2{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:15px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header p{
    display:none !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order{
    max-height:28px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order .pill{
    padding:2px 6px !important;
    font-size:9px !important;
  }

  .combat-shell > .combat-stage.combat-battlefield[data-scene-director="dynamic"]{
    min-height:min(420px,50svh) !important;
    margin:5px 0 !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions{
    padding:5px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions .grid3{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .battle-log{
    max-height:42px !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  body.cinematic-combat-active .topbar{
    display:none !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header{
    grid-template-columns:minmax(0,.48fr) minmax(0,.52fr) !important;
    padding:5px 7px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header h2{
    font-size:15px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header p{
    display:none !important;
  }

  .combat-shell > .combat-stage.combat-battlefield[data-scene-director="dynamic"]{
    min-height:min(330px,62svh) !important;
    margin:5px 0 !important;
  }
}

/* Dynamic battlefield scene director: reusable staged composition over fixed slot layouts. */
.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header{
  padding:clamp(8px,1.4vw,12px) !important;
}

.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions{
  margin-top:8px !important;
}

.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .battle-log{
  max-height:110px;
  overflow:auto;
}

.combat-shell > .combat-stage.combat-battlefield[data-scene-director="dynamic"]{
  position:relative !important;
  display:block !important;
  min-height:var(--director-stage-height,clamp(500px,64vh,720px)) !important;
  margin:8px 0 !important;
  padding:clamp(10px,1.8vw,22px) !important;
  overflow:hidden !important;
  contain:layout paint;
  --director-field-shadow:radial-gradient(ellipse at center,rgba(0,0,0,.9),rgba(0,0,0,.38) 48%,transparent 76%);
}

.combat-stage[data-scene-director="dynamic"] .combat-atmosphere-layer{
  z-index:18 !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-atmosphere-layer::before{
  content:"" !important;
  position:absolute !important;
  inset:auto -8% 0 -8% !important;
  height:34% !important;
  opacity:.28 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.28),transparent 16%,transparent 84%,rgba(0,0,0,.3)),
    radial-gradient(ellipse at 28% 70%,rgba(222,216,196,.22),transparent 52%),
    radial-gradient(ellipse at 76% 66%,rgba(143,155,150,.16),transparent 56%) !important;
  filter:blur(18px) !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-atmosphere-layer::after{
  content:"" !important;
  position:absolute !important;
  left:-8% !important;
  right:-8% !important;
  bottom:18% !important;
  height:26% !important;
  opacity:.2 !important;
  pointer-events:none !important;
  background:linear-gradient(92deg,transparent,rgba(224,219,198,.22),transparent) !important;
  filter:blur(22px) !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-area{
  position:absolute !important;
  inset:0 !important;
  z-index:auto !important;
  display:block !important;
  min-height:0 !important;
  overflow:visible !important;
  pointer-events:none !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-area::before,
.combat-stage[data-scene-director="dynamic"] .combat-area::after{
  display:none !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-area > h2{
  top:8px !important;
  z-index:30 !important;
  max-width:36% !important;
  padding:3px 8px !important;
  font-size:12px !important;
  opacity:.62 !important;
  pointer-events:none !important;
}

.combat-stage[data-scene-director="dynamic"] .party-area > h2{
  left:10px !important;
}

.combat-stage[data-scene-director="dynamic"] .enemy-area > h2{
  right:10px !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-party-grid,
.combat-stage[data-scene-director="dynamic"] .combat-enemy-grid{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  pointer-events:none !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor,
.combat-stage[data-scene-director="dynamic"] .unit.combat-card.combat-actor,
.combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor{
  position:absolute !important;
  left:var(--actor-x,50%) !important;
  right:auto !important;
  bottom:var(--actor-y,0) !important;
  z-index:var(--actor-z,5) !important;
  display:block !important;
  width:var(--actor-width,clamp(170px,20vw,280px)) !important;
  min-height:var(--actor-height,clamp(300px,44vh,500px)) !important;
  margin:0 !important;
  padding:0 !important;
  opacity:var(--actor-opacity,1) !important;
  transform:translateX(-50%) scale(var(--actor-scale,1)) !important;
  transform-origin:50% 100% !important;
  transition:left .28s ease,bottom .28s ease,width .28s ease,opacity .2s ease,filter .2s ease !important;
  pointer-events:auto !important;
  will-change:transform,opacity;
}

.combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor::before{
  left:-2% !important;
  right:-2% !important;
  bottom:18px !important;
  height:clamp(46px,9vh,86px) !important;
  z-index:0 !important;
  opacity:.9 !important;
  background:var(--director-field-shadow) !important;
  filter:blur(12px) !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor::after{
  left:-10% !important;
  right:-10% !important;
  bottom:34px !important;
  height:clamp(56px,12vh,112px) !important;
  z-index:3 !important;
  opacity:.32 !important;
  background:
    radial-gradient(ellipse at 50% 76%,rgba(222,218,196,.2),transparent 62%),
    linear-gradient(90deg,transparent,rgba(224,219,198,.16),transparent) !important;
  filter:blur(16px) !important;
}

.combat-stage[data-scene-director="dynamic"] .portrait-wrap{
  left:0 !important;
  right:0 !important;
  bottom:38px !important;
  height:var(--actor-art-height,clamp(240px,36vh,420px)) !important;
  min-height:var(--actor-art-height,clamp(240px,36vh,420px)) !important;
  overflow:visible !important;
  filter:drop-shadow(0 24px 15px rgba(0,0,0,.74)) !important;
}

.combat-stage[data-scene-director="dynamic"] .paper-doll-frame-combat,
.combat-stage[data-scene-director="dynamic"] .enemy-pose-frame,
.combat-stage[data-scene-director="dynamic"] .portrait-art,
.combat-stage[data-scene-director="dynamic"] .companion-scene-frame{
  height:100% !important;
  min-height:100% !important;
  width:100% !important;
  max-width:none !important;
}

.combat-stage[data-scene-director="dynamic"] .paper-doll-frame-combat .paper-doll-scene{
  height:100% !important;
  min-height:100% !important;
}

.combat-stage[data-scene-director="dynamic"] .paper-doll-frame-combat .paper-doll-generated{
  --paper-doll-scale:.98;
}

.combat-stage[data-scene-director="dynamic"] .enemy-pose-art,
.combat-stage[data-scene-director="dynamic"] .companion-scene-art{
  object-fit:contain !important;
  object-position:center bottom !important;
}

.combat-stage[data-scene-director="dynamic"] [data-director-depth="foreground"] .portrait-wrap{
  filter:drop-shadow(0 28px 18px rgba(0,0,0,.78)) saturate(1.02) contrast(1.04) !important;
}

.combat-stage[data-scene-director="dynamic"] [data-director-depth="midground"] .portrait-wrap{
  filter:drop-shadow(0 22px 13px rgba(0,0,0,.68)) saturate(.9) brightness(.88) contrast(1.06) !important;
}

.combat-stage[data-scene-director="dynamic"] [data-director-depth="background"] .portrait-wrap{
  filter:drop-shadow(0 18px 10px rgba(0,0,0,.62)) saturate(.76) brightness(.76) contrast(1.1) !important;
}

.combat-stage[data-scene-director="dynamic"] [data-director-depth="background"] .combat-card-body{
  opacity:.68 !important;
}

.combat-stage[data-scene-director="dynamic"] [data-director-depth="background"]:not(.target) .combat-card-body{
  display:none !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-card-body{
  left:50% !important;
  right:auto !important;
  bottom:4px !important;
  width:min(176px,86%) !important;
  transform:translateX(-50%) !important;
  padding:5px 6px !important;
  border-color:rgba(214,170,82,.18) !important;
  background:linear-gradient(180deg,rgba(5,6,6,.46),rgba(1,2,2,.68)) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter:blur(4px) saturate(.9) !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-name{
  gap:4px !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-name b{
  max-width:112px !important;
  font-size:11px !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-name span,
.combat-stage[data-scene-director="dynamic"] .meter-line,
.combat-stage[data-scene-director="dynamic"] .combat-card-body .pill{
  font-size:9px !important;
}

.combat-stage[data-scene-director="dynamic"] .bar{
  height:7px !important;
  margin:3px 0 !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-card-body button{
  min-width:54px !important;
  min-height:22px !important;
  margin-top:3px !important;
  padding:2px 7px !important;
  font-size:9px !important;
  border-radius:999px !important;
}

.combat-stage[data-scene-director="dynamic"][data-boss-presence="true"] .combat-actor-hero .combat-card-body,
.combat-stage[data-scene-director="dynamic"].director-density-crowded .combat-actor-companion .combat-card-body,
.combat-stage[data-scene-director="dynamic"].director-density-crowded .combat-actor-enemy:not(.target) .combat-card-body{
  width:min(132px,78%) !important;
  opacity:.76 !important;
}

.combat-stage[data-scene-director="dynamic"][data-boss-presence="true"] .enemy-scale-large .combat-card-body{
  width:min(210px,80%) !important;
  opacity:.94 !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-actor-companion .combat-card-body,
.combat-stage[data-scene-director="dynamic"] .combat-actor-enemy:not(.target)[data-director-depth="midground"] .combat-card-body,
.combat-stage[data-scene-director="dynamic"] .combat-actor-enemy:not(.target)[data-director-depth="background"] .combat-card-body{
  width:min(92px,68%) !important;
  opacity:.72 !important;
}

.combat-stage[data-scene-director="dynamic"] .enemy.target .combat-card-body{
  opacity:1 !important;
  border-color:rgba(240,200,91,.42) !important;
  box-shadow:0 0 16px rgba(240,200,91,.16),0 8px 18px rgba(0,0,0,.3) !important;
}

.combat-stage[data-scene-director="dynamic"] .enemy.target .portrait-wrap::after{
  inset:auto 14% 4% 14% !important;
  height:15% !important;
  opacity:.62 !important;
  border:1px solid rgba(243,211,123,.38) !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center,rgba(244,211,123,.18),transparent 70%) !important;
  box-shadow:0 0 22px rgba(240,200,91,.18) !important;
}

@media(max-width:700px){
  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header{
    padding:6px 7px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header h2{
    font-size:15px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header p{
    font-size:11px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order{
    max-height:34px;
    overflow:auto;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .battle-log{
    max-height:56px;
  }

  .combat-shell > .combat-stage.combat-battlefield[data-scene-director="dynamic"]{
    min-height:var(--director-stage-height-mobile,min(540px,58svh)) !important;
    margin:6px 0 !important;
    padding:8px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-area > h2{
    top:5px !important;
    max-width:46% !important;
    font-size:10px !important;
    padding:2px 6px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor,
  .combat-stage[data-scene-director="dynamic"] .unit.combat-card.combat-actor,
  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor{
    left:var(--actor-mobile-x,var(--actor-x,50%)) !important;
    bottom:var(--actor-mobile-y,var(--actor-y,0)) !important;
    width:var(--actor-mobile-width,var(--actor-width,120px)) !important;
    min-height:var(--actor-mobile-height,230px) !important;
    transform:translateX(-50%) scale(var(--actor-mobile-scale,var(--actor-scale,1))) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .portrait-wrap{
    bottom:34px !important;
    height:var(--actor-mobile-art-height,190px) !important;
    min-height:var(--actor-mobile-art-height,190px) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor::before{
    bottom:16px !important;
    height:42px !important;
    filter:blur(9px) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor::after{
    bottom:28px !important;
    height:54px !important;
    opacity:.24 !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card-body{
    width:min(96px,92%) !important;
    padding:3px 4px !important;
    bottom:2px !important;
    border-radius:6px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-hero .combat-card-body,
  .combat-stage[data-scene-director="dynamic"] .combat-actor-enemy.target .combat-card-body{
    width:min(112px,94%) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-name b{
    max-width:68px !important;
    font-size:7.8px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-name span,
  .combat-stage[data-scene-director="dynamic"] .meter-line,
  .combat-stage[data-scene-director="dynamic"] .combat-card-body .pill{
    font-size:6.8px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .bar{
    height:4px !important;
    margin:2px 0 !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card-body button{
    min-width:36px !important;
    min-height:16px !important;
    padding:1px 4px !important;
    font-size:6.8px !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header{
    display:grid !important;
    grid-template-columns:minmax(0,.55fr) minmax(0,.45fr) !important;
    gap:8px !important;
    padding:5px 8px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header h2{
    font-size:15px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header p,
  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .battle-log h3{
    display:none !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions{
    padding:6px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .battle-log{
    max-height:44px;
  }

  .combat-shell > .combat-stage.combat-battlefield[data-scene-director="dynamic"]{
    min-height:var(--director-stage-height-landscape,360px) !important;
    padding:8px 10px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor,
  .combat-stage[data-scene-director="dynamic"] .unit.combat-card.combat-actor,
  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor{
    left:var(--actor-landscape-x,var(--actor-x,50%)) !important;
    bottom:var(--actor-landscape-y,var(--actor-y,0)) !important;
    width:var(--actor-landscape-width,var(--actor-width,140px)) !important;
    min-height:var(--actor-landscape-height,286px) !important;
    transform:translateX(-50%) scale(var(--actor-landscape-scale,var(--actor-scale,1))) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .portrait-wrap{
    bottom:32px !important;
    height:var(--actor-landscape-art-height,238px) !important;
    min-height:var(--actor-landscape-art-height,238px) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card-body{
    width:min(112px,86%) !important;
    padding:3px 4px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-name b{
    max-width:70px !important;
    font-size:8px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-name span,
  .combat-stage[data-scene-director="dynamic"] .meter-line,
  .combat-stage[data-scene-director="dynamic"] .combat-card-body .pill{
    font-size:7px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor{
    transition:none !important;
  }
}

body.cinematic-combat-active .topbar{
  width:min(1220px,calc(100vw - 18px));
  margin:0 auto 6px;
  padding:5px 7px 6px;
}

body.cinematic-combat-active #topStats{
  grid-template-columns:54px minmax(0,1fr) !important;
  min-height:58px !important;
  gap:7px !important;
  padding:5px 7px !important;
}

body.cinematic-combat-active .top-status-portrait{
  width:50px !important;
  min-width:50px !important;
  min-height:54px !important;
  padding:3px !important;
}

body.cinematic-combat-active .top-status-portrait .paper-doll-frame{
  width:38px !important;
  max-width:38px !important;
  height:50px !important;
}

body.cinematic-combat-active .top-status-pills{
  gap:4px 5px !important;
}

body.cinematic-combat-active .hud-token{
  padding:3px 8px 4px 10px !important;
  font-size:11px !important;
}

body.cinematic-combat-active .topline{
  margin-top:4px !important;
  padding:3px 2px 2px !important;
  gap:5px !important;
}

body.cinematic-combat-active .topline button,
body.cinematic-combat-active .topline button:nth-child(2n),
body.cinematic-combat-active .topline button:nth-child(3n){
  min-height:30px !important;
  padding:3px 8px 4px !important;
  font-size:10px !important;
}

@media(max-width:700px){
  body.cinematic-combat-active #app{
    padding-inline:5px;
  }

  body.cinematic-combat-active .topbar{
    width:calc(100vw - 10px);
    margin-bottom:5px;
    padding:4px 5px 5px;
  }

  body.cinematic-combat-active #topStats{
    display:flex !important;
    min-height:34px !important;
    gap:5px !important;
    padding:3px 5px !important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  body.cinematic-combat-active #topStats::-webkit-scrollbar{
    display:none;
  }

  body.cinematic-combat-active #topStats::after{
    display:none;
  }

  body.cinematic-combat-active .top-status-portrait{
    display:none !important;
  }

  body.cinematic-combat-active .top-status-pills{
    flex-wrap:nowrap !important;
    align-items:center;
    padding-right:8px;
  }

  body.cinematic-combat-active .hud-token{
    white-space:nowrap;
    font-size:9.5px !important;
    padding:2px 6px 3px 8px !important;
  }

  body.cinematic-combat-active .topline{
    padding-top:3px !important;
    overflow-x:auto;
  }

  body.cinematic-combat-active .topline button,
  body.cinematic-combat-active .topline button:nth-child(2n),
  body.cinematic-combat-active .topline button:nth-child(3n){
    min-height:27px !important;
    padding:3px 7px !important;
    font-size:9.5px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions .grid3{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions button{
    min-height:31px !important;
    padding:5px 6px !important;
    font-size:9.5px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-companion .combat-card-body,
  .combat-stage[data-scene-director="dynamic"] [data-director-depth="background"] .combat-card-body{
    width:min(42px,82%) !important;
    padding:2px 3px !important;
    opacity:.62 !important;
  }

  .combat-stage[data-scene-director="dynamic"] [data-director-depth="background"] .combat-card-body{
    display:none !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-companion .combat-name span,
  .combat-stage[data-scene-director="dynamic"] .combat-actor-companion .pill,
  .combat-stage[data-scene-director="dynamic"] .combat-actor-companion .bar.mana,
  .combat-stage[data-scene-director="dynamic"] .combat-actor-companion .meter-line:nth-of-type(2),
  .combat-stage[data-scene-director="dynamic"] [data-director-depth="background"] .combat-name span,
  .combat-stage[data-scene-director="dynamic"] [data-director-depth="background"] .pill,
  .combat-stage[data-scene-director="dynamic"] [data-director-depth="background"] .bar.mana,
  .combat-stage[data-scene-director="dynamic"] [data-director-depth="background"] .meter-line:nth-of-type(2){
    display:none !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-companion .combat-name b,
  .combat-stage[data-scene-director="dynamic"] [data-director-depth="background"] .combat-name b{
    max-width:42px !important;
    font-size:6px !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  body.cinematic-combat-active .topbar{
    display:flex;
    align-items:center;
    gap:8px;
    width:calc(100vw - 18px);
    padding:4px 6px 5px;
  }

  body.cinematic-combat-active #topStats{
    flex:1 1 56%;
    min-width:0;
    display:flex !important;
    min-height:34px !important;
    gap:5px !important;
    padding:3px 5px !important;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }

  body.cinematic-combat-active #topStats::after,
  body.cinematic-combat-active .top-status-portrait{
    display:none !important;
  }

  body.cinematic-combat-active .top-status-pills{
    flex-wrap:nowrap !important;
    align-items:center;
    padding-right:8px;
  }

  body.cinematic-combat-active .hud-token{
    white-space:nowrap;
    font-size:9.5px !important;
    padding:2px 6px 3px 8px !important;
  }

  body.cinematic-combat-active .topline{
    flex:0 0 min(352px,42vw);
    min-width:0;
    margin-top:0 !important;
    overflow-x:auto;
  }
}

/* v59 title and tutorial overhaul: cinematic onboarding for Beneath the Throne. */
body.start-lock{
  background:#020303;
}

body.start-lock #app{
  max-width:none;
  padding:0;
}

#setup{
  min-height:100svh;
}

.v59-title-screen,
.v59-prologue-screen,
.v59-tutorial-screen,
.v59-dragon-screen,
.v59-victory-screen,
.v59-keep-wake-screen,
.v59-class-screen{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  background-image:url("./assets/ui/generated/title-bg-v19d.png");
  background-size:cover;
  background-position:center;
}

.v59-title-screen{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,380px);
  align-items:end;
  gap:clamp(18px,3vw,40px);
  padding:clamp(22px,5vw,70px);
}

.v59-title-screen::before,
.v59-prologue-screen::before,
.v59-tutorial-screen::before,
.v59-dragon-screen::before,
.v59-victory-screen::before,
.v59-keep-wake-screen::before,
.v59-class-screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.18) 48%,rgba(0,0,0,.78)),
    radial-gradient(ellipse at center,transparent 0 42%,rgba(0,0,0,.72) 100%);
  pointer-events:none;
}

.v59-title-screen > *,
.v59-prologue-screen > *,
.v59-tutorial-screen > *,
.v59-dragon-screen > *,
.v59-victory-screen > *,
.v59-keep-wake-screen > *,
.v59-class-screen > *{
  position:relative;
  z-index:2;
}

.v59-atmosphere{
  position:absolute;
  display:block;
  pointer-events:none;
  z-index:1;
}

.v59-fog-a,
.v59-fog-b{
  left:-20%;
  right:-20%;
  height:38%;
  filter:blur(18px);
  opacity:.38;
  background:
    radial-gradient(ellipse at 18% 68%,rgba(205,202,184,.28),transparent 48%),
    radial-gradient(ellipse at 74% 52%,rgba(122,137,139,.18),transparent 46%),
    linear-gradient(90deg,transparent,rgba(210,202,180,.14),transparent);
  animation:v59-fog-drift 34s ease-in-out infinite;
}

.v59-fog-a{bottom:0}
.v59-fog-b{top:4%;opacity:.2;animation-duration:42s;animation-direction:reverse}

.v59-embers{
  inset:0;
  opacity:.38;
  background:
    radial-gradient(circle at 11% 72%,rgba(255,186,88,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 34% 45%,rgba(230,224,208,.32) 0 1px,transparent 2px),
    radial-gradient(circle at 67% 61%,rgba(255,154,72,.44) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 32%,rgba(230,224,208,.26) 0 1px,transparent 2px);
  animation:combat-embers-rise 10s linear infinite;
}

.v59-light{
  inset:-12% -10% 18% -10%;
  opacity:.2;
  background:linear-gradient(105deg,transparent 0 36%,rgba(255,217,148,.22) 46%,transparent 58%);
  animation:combat-light-sweep-v45 16s ease-in-out infinite;
}

.v59-vignette{
  inset:0;
  background:radial-gradient(ellipse at center,transparent 0 36%,rgba(0,0,0,.78) 100%);
}

.v59-title-stage{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.v59-title-road{
  position:absolute;
  left:28%;
  right:18%;
  bottom:0;
  height:34%;
  background:linear-gradient(15deg,transparent 0 42%,rgba(239,198,121,.13) 49%,transparent 58%);
  filter:blur(8px);
  opacity:.48;
}

.v59-title-throne{
  position:absolute;
  right:12%;
  bottom:20%;
  width:14%;
  height:38%;
  background:linear-gradient(180deg,rgba(17,16,14,.28),rgba(0,0,0,.02));
  clip-path:polygon(42% 0,58% 0,68% 18%,74% 100%,26% 100%,32% 18%);
  filter:blur(1px);
  opacity:.34;
}

.v59-title-cinders{
  position:absolute;
  left:8%;
  right:8%;
  bottom:10%;
  height:20%;
  background:radial-gradient(ellipse at 30% 70%,rgba(255,119,45,.2),transparent 42%);
  filter:blur(14px);
}

.v59-title-lockup{
  align-self:center;
  max-width:min(720px,100%);
  padding-bottom:clamp(12px,5vh,54px);
  text-shadow:0 2px 0 #000,0 20px 48px rgba(0,0,0,.82);
}

.v59-title-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:#f1d49d;
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.v59-title-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#d2a04e;
  box-shadow:0 0 16px rgba(255,181,78,.45);
}

.v59-title-lockup h1{
  max-width:760px;
  margin:0;
  color:#f8e5bd;
  font-size:clamp(64px,10vw,138px);
  line-height:.78;
  letter-spacing:0;
  text-transform:none;
}

.v59-title-lockup h1 span{
  display:block;
  padding-left:.08em;
}

.v59-title-lockup p,
.v59-prologue-copy p,
.v59-class-copy p{
  max-width:620px;
  color:#d8c29c;
  font-size:clamp(14px,1.5vw,18px);
}

.v59-title-menu{
  align-self:end;
  justify-self:end;
  width:min(380px,100%);
  padding:12px;
  border:1px solid rgba(186,137,65,.36);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(5,7,7,.42),rgba(3,4,4,.72));
  box-shadow:0 22px 70px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,232,170,.05);
  backdrop-filter:blur(3px);
}

.v59-title-command{
  width:100%;
  margin:6px 0;
  justify-content:center;
}

.v59-settings-panel{
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(186,137,65,.28);
  border-radius:8px;
  background:rgba(0,0,0,.34);
}

.v59-settings-panel > span{
  display:block;
  margin-bottom:8px;
  color:#ead3aa;
  font-weight:900;
}

.v59-transition-active .v59-title-lockup,
.v59-transition-active .v59-title-menu{
  animation:v59-title-tear-away 850ms cubic-bezier(.2,.72,.16,1) both;
}

.v59-transition-active .v59-fog-a,
.v59-transition-active .v59-fog-b{
  animation:v59-fog-consume 850ms ease both;
}

.v59-prologue-screen,
.v59-victory-screen,
.v59-keep-wake-screen{
  display:grid;
  place-items:center;
  padding:18px;
}

.v59-prologue-stage,
.v59-keep-wake-stage{
  position:relative;
  width:min(1120px,100%);
  min-height:min(720px,calc(100svh - 36px));
  overflow:hidden;
  border:1px solid rgba(178,132,61,.48);
  border-radius:12px;
  background:#050607;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
}

.v59-prologue-stage .combat-backdrop,
.v59-keep-wake-stage .combat-backdrop,
.v59-class-hero .combat-backdrop{
  position:absolute;
  inset:0;
}

.v59-prologue-copy,
.v59-cinematic-card,
.v59-class-copy{
  position:relative;
  z-index:4;
  width:min(520px,calc(100% - 24px));
  padding:clamp(14px,3vw,24px);
  border:1px solid rgba(196,147,72,.32);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(5,6,6,.58),rgba(2,3,3,.78));
  box-shadow:0 18px 50px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,232,170,.05);
  backdrop-filter:blur(3px);
}

.v59-prologue-copy{
  margin:clamp(18px,5vw,54px);
}

.v59-prologue-copy h1,
.v59-cinematic-card h1,
.v59-class-copy h1{
  font-size:clamp(34px,6vw,72px);
  line-height:.92;
}

.v59-prologue-figure{
  position:absolute;
  right:8%;
  bottom:8%;
  z-index:3;
  width:min(320px,34%);
}

.v59-prologue-figure .combat-card-body{
  display:none;
}

.v59-prologue-figure .combat-card,
.opening-protected-survivor .combat-card{
  display:block;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.v59-prologue-figure .portrait-wrap,
.opening-protected-survivor .portrait-wrap{
  min-height:0;
  height:100%;
}

.v59-hidden-traveler{
  position:relative;
  width:100%;
  height:clamp(250px,42vh,430px);
  filter:drop-shadow(0 24px 18px rgba(0,0,0,.78));
  transform-origin:50% 96%;
  animation:v59TravelerBreath 4.8s ease-in-out infinite;
}

.v59-hidden-traveler::before,
.v59-hidden-traveler::after,
.v59-hidden-traveler span{
  position:absolute;
  display:block;
  pointer-events:none;
}

.v59-hidden-traveler::before{
  content:"";
  left:50%;
  top:23%;
  width:58%;
  height:22%;
  transform:translateX(-50%) rotate(-1deg);
  border-radius:48% 48% 30% 30%;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(94,76,52,.38),transparent 56%),
    linear-gradient(90deg,rgba(4,4,4,.86),rgba(41,36,29,.92) 45%,rgba(9,8,7,.95));
  clip-path:polygon(18% 22%,38% 0,62% 0,84% 24%,78% 100%,22% 100%);
}

.v59-hidden-traveler::after{
  content:"";
  left:38%;
  bottom:8%;
  width:24%;
  height:12%;
  transform:skewX(-9deg);
  border-radius:0 0 42% 42%;
  background:linear-gradient(90deg,rgba(9,8,7,.96),rgba(38,31,24,.82),rgba(4,4,4,.96));
  opacity:.88;
}

.v59-hidden-cloak{
  left:50%;
  bottom:6%;
  width:56%;
  height:70%;
  transform:translateX(-50%);
  border-radius:42% 42% 18% 18% / 18% 18% 10% 10%;
  background:
    linear-gradient(100deg,rgba(0,0,0,.58),transparent 31%,rgba(128,107,73,.14) 49%,transparent 62%,rgba(0,0,0,.68)),
    radial-gradient(ellipse at 50% 15%,rgba(87,72,49,.52),transparent 58%),
    linear-gradient(180deg,rgba(42,38,32,.96),rgba(5,6,6,.98));
  clip-path:polygon(34% 0,66% 0,82% 22%,92% 100%,8% 100%,20% 24%);
}

.v59-hidden-hood{
  left:50%;
  top:7%;
  width:30%;
  height:20%;
  transform:translateX(-50%);
  border-radius:54% 54% 48% 48%;
  background:
    radial-gradient(ellipse at 50% 66%,rgba(2,2,2,.98) 0 33%,rgba(16,14,12,.96) 34% 55%,rgba(66,53,36,.94) 56% 100%),
    linear-gradient(180deg,rgba(105,84,53,.44),rgba(10,9,8,.96));
  clip-path:polygon(50% 0,80% 20%,94% 70%,72% 100%,28% 100%,6% 70%,20% 20%);
  box-shadow:0 0 28px rgba(0,0,0,.76),inset 0 -10px 18px rgba(0,0,0,.68);
}

.v59-hidden-body{
  left:50%;
  top:31%;
  width:34%;
  height:52%;
  transform:translateX(-50%);
  background:
    linear-gradient(96deg,rgba(0,0,0,.46),transparent 34%,rgba(178,148,86,.24) 46%,transparent 55%,rgba(0,0,0,.58)),
    linear-gradient(180deg,rgba(72,60,43,.68),rgba(8,8,7,.82));
  clip-path:polygon(20% 0,80% 0,86% 100%,13% 100%);
}

.v59-hidden-blade{
  left:66%;
  bottom:16%;
  width:3px;
  height:50%;
  transform:rotate(15deg);
  background:linear-gradient(180deg,#cdbb8e,#4f4638);
  opacity:.66;
  box-shadow:0 0 10px rgba(219,191,132,.16);
}

.v59-hidden-ground{
  left:22%;
  right:22%;
  bottom:2%;
  height:9%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.78),transparent 72%);
  filter:blur(5px);
}

.v59-tutorial-screen,
.v59-dragon-screen,
.v59-class-screen{
  padding:clamp(8px,2vw,18px);
}

.opening-combat-shell{
  position:relative;
  width:min(1240px,100%);
  margin:0 auto;
  border-radius:12px;
}

.opening-combat-title{
  position:relative;
  z-index:4;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px 8px;
}

.opening-combat-title span{
  color:#f0d7a8;
  font-weight:950;
  text-transform:uppercase;
  font-size:12px;
}

.opening-combat-title h1{
  margin:0;
  font-size:clamp(28px,4vw,54px);
}

.opening-combat-title p{
  max-width:430px;
  margin:0;
  text-align:right;
}

.opening-combat-stage{
  grid-template-columns:minmax(280px,.8fr) minmax(300px,1fr) !important;
  min-height:clamp(560px,72svh,760px) !important;
}

.opening-guidance-card{
  position:absolute;
  left:50%;
  top:14px;
  z-index:12;
  width:min(430px,72%);
  transform:translateX(-50%);
  padding:10px 12px;
  border:1px solid rgba(221,172,86,.32);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(4,6,7,.62),rgba(2,3,4,.82));
  color:#e8d0a6;
  box-shadow:0 12px 30px rgba(0,0,0,.36);
  backdrop-filter:blur(3px);
}

.opening-guidance-card.opening-guidance-dock{
  position:relative;
  left:auto;
  top:auto;
  z-index:5;
  width:min(720px,calc(100% - 24px));
  transform:none;
  margin:0 auto 8px;
}

.opening-guidance-card span{
  display:block;
  margin-bottom:3px;
  color:#ffe4aa;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
}

.opening-guidance-card p{
  margin:0;
  font-size:13px;
}

.opening-hidden-card .portrait-wrap{
  overflow:visible;
}

.opening-hidden-card .combat-card-body{
  border-color:rgba(200,158,90,.28) !important;
}

.opening-combat-log{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 10px 10px;
  color:#d8c39e;
}

.opening-combat-log span{
  padding:5px 8px;
  border:1px solid rgba(140,105,50,.24);
  border-radius:999px;
  background:rgba(0,0,0,.26);
  font-size:12px;
}

.opening-actions{
  position:relative;
  bottom:auto;
  margin:0;
}

.opening-dragon-stage{
  display:block !important;
  min-height:clamp(620px,76svh,820px) !important;
  overflow:hidden;
}

.opening-dragon-actor,
.opening-kael-actor,
.opening-protected-survivor{
  position:absolute;
  z-index:6;
}

.opening-dragon-actor{
  right:-10%;
  bottom:2%;
  width:min(780px,64%);
  height:92%;
  z-index:7;
}

.opening-dragon-actor img{
  position:absolute;
  right:0;
  bottom:6%;
  width:112%;
  height:94%;
  object-fit:contain;
  object-position:right bottom;
  filter:drop-shadow(0 30px 24px rgba(0,0,0,.82)) saturate(1.04) contrast(1.1);
}

.opening-dragon-shadow{
  position:absolute;
  left:18%;
  right:4%;
  bottom:10%;
  height:12%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.86),transparent 74%);
  filter:blur(8px);
}

.opening-kael-actor{
  left:8%;
  bottom:6%;
  width:min(300px,25%);
  height:64%;
}

.opening-kael-actor img{
  position:absolute;
  left:50%;
  bottom:14%;
  width:82%;
  height:78%;
  object-fit:contain;
  object-position:center bottom;
  transform:translateX(-50%);
  filter:drop-shadow(0 24px 16px rgba(0,0,0,.74)) saturate(1.02);
}

.opening-kael-radiance{
  position:absolute;
  inset:5% 8% 16%;
  background:radial-gradient(ellipse at 50% 28%,rgba(255,235,164,.32),transparent 58%);
  mix-blend-mode:screen;
  animation:v59-radiance-pulse 4s ease-in-out infinite;
}

.opening-protected-survivor{
  left:38%;
  bottom:8%;
  width:min(230px,20%);
  height:48%;
  z-index:5;
}

.opening-protected-survivor .combat-card-body{
  display:none;
}

.opening-protected-survivor .v59-hidden-traveler{
  height:100%;
}

.opening-barrier-ring{
  position:absolute;
  left:50%;
  bottom:16%;
  width:110%;
  height:28%;
  transform:translateX(-50%);
  border-radius:50%;
  border:1px solid rgba(255,229,151,.62);
  box-shadow:0 0 26px rgba(255,216,118,.22),inset 0 0 26px rgba(255,216,118,.12);
  opacity:.76;
}

.opening-dragon-moment{
  left:50%;
  top:auto;
  bottom:20px;
  transform:translateX(-50%);
}

.opening-legend-plate{
  position:absolute;
  left:4%;
  right:4%;
  bottom:0;
  z-index:8;
  padding:8px 9px;
  border:1px solid rgba(232,199,132,.26);
  border-radius:7px;
  background:linear-gradient(180deg,rgba(4,6,7,.72),rgba(2,3,4,.9));
  box-shadow:0 12px 28px rgba(0,0,0,.42);
}

.opening-legend-plate b,
.opening-legend-plate span{
  display:block;
}

.opening-legend-plate b{
  color:#ffe4ae;
}

.opening-legend-plate span{
  color:#d5bd94;
  font-size:12px;
}

.v59-cinematic-card{
  text-align:left;
}

.v59-keep-wake-stage .v59-cinematic-card{
  margin:clamp(20px,6vw,64px);
}

.v59-class-screen{
  overflow:auto;
}

.v59-class-hero{
  position:relative;
  width:min(1220px,100%);
  min-height:360px;
  margin:0 auto 14px;
  overflow:hidden;
  border:1px solid rgba(178,132,61,.42);
  border-radius:12px;
  background:#050607;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}

.v59-class-copy{
  margin:clamp(18px,5vw,52px);
}

.v59-class-path-grid{
  width:min(1220px,100%);
  margin:0 auto;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.v59-class-path-card{
  position:relative;
  grid-template-columns:1fr !important;
  min-height:520px;
  margin:0;
  padding:0;
  overflow:hidden;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(14,17,17,.86),rgba(4,5,5,.96));
}

.v59-class-card-visual{
  position:relative;
  min-height:300px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 20%,rgba(255,216,132,.12),transparent 46%),
    linear-gradient(180deg,rgba(39,31,24,.8),rgba(4,5,5,.92));
}

.v59-class-card-visual .portrait-art{
  position:absolute;
  left:50%;
  bottom:8px;
  width:118%;
  height:100%;
  min-height:0;
  transform:translateX(-50%);
  border:0;
  border-radius:0;
  background-color:transparent;
  box-shadow:none;
  filter:drop-shadow(0 22px 18px rgba(0,0,0,.72));
}

.v59-class-ground{
  position:absolute;
  left:18%;
  right:18%;
  bottom:10px;
  height:30px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.72),transparent 74%);
  filter:blur(5px);
}

.v59-class-path-card .class-card-copy{
  padding:12px;
}

.v59-class-path-card .class-card-copy h2{
  font-size:clamp(24px,3vw,34px);
}

.v59-class-stat-row{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:8px 0;
}

.v59-class-abilities{
  min-height:38px;
  font-size:12px;
}

.class-path-warrior{border-color:rgba(222,141,74,.46)}
.class-path-rogue{border-color:rgba(142,103,178,.46)}
.class-path-mage{border-color:rgba(103,143,220,.46)}
.class-path-ranger{border-color:rgba(125,154,92,.46)}
.class-path-cleric{border-color:rgba(231,207,124,.52)}

@keyframes v59-fog-drift{
  0%,100%{transform:translate3d(-2%,0,0)}
  50%{transform:translate3d(3%,-4%,0)}
}

@keyframes v59-fog-consume{
  from{opacity:.24;transform:scale(1)}
  to{opacity:.86;transform:scale(1.22)}
}

@keyframes v59-title-tear-away{
  0%{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
  45%{opacity:.92;filter:blur(1px);transform:translateY(-4px) scale(1.012)}
  100%{opacity:0;filter:blur(10px);transform:translateY(18px) scale(.96)}
}

@keyframes v59-radiance-pulse{
  0%,100%{opacity:.32;transform:scale(.98)}
  50%{opacity:.62;transform:scale(1.04)}
}

@keyframes v59TravelerBreath{
  0%,100%{transform:translateY(0) rotate(-.25deg)}
  50%{transform:translateY(-3px) rotate(.25deg)}
}

@media(max-width:900px){
  .v59-title-screen{
    grid-template-columns:1fr;
    align-items:end;
    padding:18px;
  }

  .v59-title-menu{
    justify-self:stretch;
    width:100%;
  }

  .v59-title-lockup h1{
    font-size:clamp(58px,18vw,104px);
  }

  .opening-combat-title{
    display:block;
  }

  .opening-combat-title p{
    text-align:left;
  }

  .opening-combat-stage{
    grid-template-columns:1fr !important;
    min-height:720px !important;
  }

  .opening-guidance-card{
    top:10px;
    width:calc(100% - 24px);
  }

  .v59-prologue-stage{
    min-height:760px;
  }

  .v59-prologue-figure{
    right:4%;
    bottom:3%;
    width:42%;
  }

  .opening-dragon-stage{
    min-height:760px !important;
  }

  .opening-dragon-actor{
    right:-26%;
    bottom:14%;
    width:96%;
    height:68%;
  }

  .opening-kael-actor{
    left:2%;
    width:38%;
    height:54%;
  }

  .opening-protected-survivor{
    left:34%;
    bottom:13%;
    width:27%;
    height:38%;
  }

  .opening-dragon-moment{
    bottom:12px;
  }

  .v59-class-path-grid{
    grid-template-columns:1fr;
  }

  .v59-class-path-card{
    min-height:auto;
    grid-template-columns:minmax(130px,.42fr) minmax(0,1fr) !important;
  }

  .v59-class-card-visual{
    min-height:260px;
  }
}

@media(max-width:520px){
  .v59-title-screen{
    min-height:100svh;
    padding:14px;
  }

  .v59-title-lockup{
    padding-bottom:8px;
  }

  .v59-title-lockup h1{
    font-size:clamp(48px,20vw,78px);
  }

  .v59-title-lockup p{
    font-size:13px;
  }

  .v59-prologue-screen,
  .v59-tutorial-screen,
  .v59-dragon-screen,
  .v59-victory-screen,
  .v59-keep-wake-screen,
  .v59-class-screen{
    padding:8px;
  }

  .v59-prologue-stage{
    min-height:760px;
  }

  .v59-prologue-copy{
    margin:12px;
  }

  .v59-prologue-figure{
    right:0;
    width:52%;
    opacity:.9;
  }

  .opening-combat-stage{
    min-height:760px !important;
    padding-top:70px !important;
  }

  .opening-combat-log span{
    border-radius:8px;
  }

  .opening-dragon-stage{
    min-height:760px !important;
  }

  .opening-dragon-actor{
    right:-34%;
    bottom:19%;
    width:112%;
    height:58%;
  }

  .opening-kael-actor{
    left:-4%;
    bottom:17%;
    width:46%;
    height:42%;
  }

  .opening-protected-survivor{
    left:30%;
    bottom:19%;
    width:34%;
    height:32%;
  }

  .opening-legend-plate{
    font-size:11px;
  }

  .v59-class-hero{
    min-height:420px;
  }

  .v59-class-copy{
    margin:12px;
    width:calc(100% - 24px);
  }

  .v59-class-path-card{
    grid-template-columns:1fr !important;
  }

  .v59-class-card-visual{
    min-height:260px;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .v59-title-screen{
    grid-template-columns:minmax(0,1fr) minmax(260px,330px);
    min-height:100svh;
    padding:12px 18px;
  }

  .v59-title-lockup h1{
    font-size:clamp(54px,10vw,92px);
  }

  .v59-title-lockup p{
    max-width:520px;
    font-size:13px;
  }

  .v59-title-menu{
    padding:8px;
  }

  .v59-title-command{
    min-height:34px;
    margin:4px 0;
  }

  .v59-prologue-stage,
  .v59-keep-wake-stage{
    min-height:calc(100svh - 16px);
  }

  .v59-prologue-copy{
    margin:12px;
  }

  .v59-prologue-copy h1,
  .v59-cinematic-card h1,
  .v59-class-copy h1{
    font-size:34px;
  }

  .v59-prologue-figure{
    width:30%;
  }

  .opening-combat-stage{
    min-height:calc(100svh - 160px) !important;
  }

  .opening-dragon-stage{
    min-height:calc(100svh - 160px) !important;
  }

  .opening-dragon-actor{
    right:-16%;
    width:66%;
    height:92%;
  }

  .opening-kael-actor{
    width:26%;
    height:70%;
  }

  .opening-protected-survivor{
    width:18%;
  }

  .opening-combat-title{
    padding:6px 8px;
  }

  .opening-combat-title h1{
    font-size:28px;
  }

  .opening-combat-title p,
  .opening-combat-log{
    display:none;
  }

  .v59-class-hero{
    min-height:250px;
  }

  .v59-class-path-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    overflow-x:visible;
    padding-bottom:8px;
  }

  .v59-class-path-card{
    grid-template-columns:1fr !important;
    min-height:380px;
  }

  .v59-class-card-visual{
    min-height:170px;
  }

  .v59-class-path-card .class-card-copy{
    padding:10px;
  }

  .v59-class-path-card .class-card-copy h2{
    font-size:24px;
  }

  .v59-class-abilities{
    font-size:11px;
  }
}

@media(prefers-reduced-motion:reduce){
  .v59-atmosphere,
  .v59-transition-active .v59-title-lockup,
  .v59-transition-active .v59-title-menu,
  .opening-kael-radiance{
    animation:none !important;
  }
}

/* v19e portrait frame sizing: keep the full paper-doll inside the HUD crest. */
#topStats{
  grid-template-columns:90px minmax(0,1fr);
  min-height:108px;
}

.fantasy-portrait-frame,
.top-status-portrait{
  width:90px;
  min-width:90px;
  min-height:96px;
  padding:5px;
  border-width:8px;
  border-image-width:8px;
  overflow:hidden;
}

.top-status-portrait .paper-doll-frame,
.paper-doll-frame-hud{
  width:64px;
  max-width:64px;
  margin:0 auto;
}

.paper-doll-frame-hud .paper-doll-generated{
  object-fit:contain;
  object-position:center bottom;
}

@media(max-width:700px){
  #topStats{
    grid-template-columns:78px minmax(0,1fr);
    min-height:98px;
  }
  .fantasy-portrait-frame,
  .top-status-portrait{
    width:78px;
    min-width:78px;
    min-height:88px;
    padding:4px;
    border-width:7px;
    border-image-width:7px;
  }
  .top-status-portrait .paper-doll-frame,
  .paper-doll-frame-hud{
    width:56px;
    max-width:56px;
  }
}

/* v19g final cascade guard: this must stay last. */
.overworld-map{
  border-image-slice:104 !important;
  background-color:#100c08 !important;
  background-image:url("./assets/overworld-map-v12.png") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  filter:saturate(1.12) contrast(1.08) brightness(1.18);
}
.overworld-map::before{
  background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 18%,transparent 82%,rgba(0,0,0,.12)),radial-gradient(ellipse at center,transparent 0 72%,rgba(0,0,0,.18) 100%) !important;
  opacity:.72;
}
.overworld-map::after{
  background:repeating-linear-gradient(0deg,rgba(255,246,210,.012) 0 1px,transparent 1px 9px),radial-gradient(ellipse at 20% 84%,rgba(255,180,74,.045),transparent 28%) !important;
  mix-blend-mode:soft-light !important;
  opacity:.45 !important;
}
.fantasy-section-header::before,.panel h1::before,.panel h2::before,.card h3::before,.modal h2::before,.location-stage-copy h2::before,.road-stop-stage-copy h2::before,.combat-name b::before{
  content:"" !important;
  display:inline-block !important;
  width:8px !important;
  height:8px !important;
  margin-right:8px !important;
  vertical-align:.08em !important;
  border-radius:50% !important;
  background:radial-gradient(circle,#f3d58a 0 24%,#8b5e24 28% 58%,rgba(42,25,11,.9) 62%) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.38),0 0 7px rgba(226,176,88,.28) !important;
  opacity:.9 !important;
}
.node-label,.node-danger,.location-badge,.location-stage-copy .location-badge,.map-event::after,.map-entity::before{
  border:0 !important;
  border-radius:2px !important;
  background:linear-gradient(90deg,rgba(82,48,21,.62),rgba(162,112,53,.18) 50%,rgba(82,48,21,.56)),radial-gradient(ellipse at 50% 0,rgba(255,224,154,.1),transparent 72%) !important;
  box-shadow:0 4px 9px rgba(0,0,0,.26) !important;
  line-height:1.18 !important;
}
.pill,.hud-token,.stat-pill,.tag{
  border:0 !important;
  border-radius:2px !important;
  background:linear-gradient(90deg,rgba(72,47,25,.74),rgba(19,15,12,.64)),radial-gradient(ellipse at 12px 50%,rgba(225,168,78,.18) 0 5px,transparent 6px) !important;
  box-shadow:inset 0 0 0 1px rgba(222,176,93,.13),0 4px 8px rgba(0,0,0,.2) !important;
  line-height:1.16 !important;
}
.hud-token{
  min-height:26px;
  padding:5px 10px;
  align-items:center;
}
.building-hotspot{
  width:86px;
  min-width:86px;
  min-height:62px;
  padding:19px 8px 8px;
  border:0 !important;
  border-radius:0;
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.1)),var(--ui-hanging-signs-v19e) center 8%/560px 560px no-repeat !important;
  box-shadow:0 11px 18px rgba(0,0,0,.42),0 0 13px rgba(255,165,72,.12) !important;
}
.building-hotspot::before{
  left:50% !important;
  top:-10px !important;
  width:32px !important;
  height:18px !important;
  transform:translateX(-50%) !important;
  border:0 !important;
  background:linear-gradient(90deg,transparent 0 7px,rgba(31,27,22,.86) 7px 10px,transparent 10px 22px,rgba(31,27,22,.86) 22px 25px,transparent 25px),linear-gradient(180deg,rgba(88,71,50,.86),rgba(20,17,13,.94)) !important;
}
.building-hotspot::after{display:none !important}
.building-hotspot span:first-child{
  display:none;
}
.building-hotspot span:last-child{
  display:block;
  max-width:74px;
  line-height:1.05;
  text-align:center;
  color:#fff0c7;
  text-shadow:0 1px 0 #000,0 0 8px rgba(0,0,0,.85);
}
.building-tavern{background-position:center 8%,center 8% !important}
.building-inn{background-position:center 8%,75% 8% !important}
.building-blacksmith{background-position:center 8%,75% 39% !important}
.building-market{background-position:center 8%,14% 76% !important}
.building-mine{background-position:center 8%,75% 76% !important}
.paper-doll-frame-combat{
  width:98px;
  max-width:98px;
  overflow:hidden;
}
.paper-doll-frame-combat .paper-doll-scene{
  min-height:148px;
  aspect-ratio:2/3;
}
.paper-doll-frame-combat .paper-doll-generated{
  --paper-doll-scale:.96;
  object-fit:contain;
  object-position:center bottom;
}
.combat-card{
  grid-template-columns:106px minmax(0,1fr);
  min-height:150px;
  overflow:visible;
}
@media(max-width:700px){
  .overworld-map{filter:saturate(1.1) contrast(1.08) brightness(1.14)}
  .building-hotspot{
    width:74px;
    min-width:74px;
    min-height:54px;
    padding:16px 6px 7px;
    background-size:475px 475px !important;
  }
  .building-hotspot span:last-child{
    max-width:64px;
    font-size:10px;
  }
  .combat-card{
    grid-template-columns:88px minmax(0,1fr);
    min-height:134px;
  }
  .paper-doll-frame-combat{
    width:82px;
    max-width:82px;
  }
  .paper-doll-frame-combat .paper-doll-scene{min-height:126px}
}

/* v19g focused repair: visible campaign map, cleaner labels, in-world signs, and combat portrait fit. */
.overworld-map{
  border-image-slice:104 !important;
  background-color:#100c08 !important;
  background-image:url("./assets/overworld-map-v12.png") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  filter:saturate(1.12) contrast(1.08) brightness(1.18);
}

.overworld-map::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.08),transparent 18%,transparent 82%,rgba(0,0,0,.12)),
    radial-gradient(ellipse at center,transparent 0 72%,rgba(0,0,0,.18) 100%) !important;
  opacity:.72;
}

.overworld-map::after{
  background:
    repeating-linear-gradient(0deg,rgba(255,246,210,.012) 0 1px,transparent 1px 9px),
    radial-gradient(ellipse at 20% 84%,rgba(255,180,74,.045),transparent 28%) !important;
  mix-blend-mode:soft-light !important;
  opacity:.45 !important;
}

.fantasy-section-header::before,
.panel h1::before,
.panel h2::before,
.card h3::before,
.modal h2::before,
.location-stage-copy h2::before,
.road-stop-stage-copy h2::before,
.combat-name b::before{
  content:"" !important;
  display:inline-block !important;
  width:8px !important;
  height:8px !important;
  margin-right:8px !important;
  vertical-align:.08em !important;
  border-radius:50% !important;
  background:radial-gradient(circle,#f3d58a 0 24%,#8b5e24 28% 58%,rgba(42,25,11,.9) 62%) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.38),0 0 7px rgba(226,176,88,.28) !important;
  opacity:.9 !important;
}

.node-label,
.node-danger,
.location-badge,
.location-stage-copy .location-badge,
.map-event::after,
.map-entity::before{
  border:0 !important;
  border-radius:2px !important;
  background:
    linear-gradient(90deg,rgba(82,48,21,.62),rgba(162,112,53,.18) 50%,rgba(82,48,21,.56)),
    radial-gradient(ellipse at 50% 0,rgba(255,224,154,.1),transparent 72%) !important;
  box-shadow:0 4px 9px rgba(0,0,0,.26) !important;
  line-height:1.18 !important;
}

.pill,
.hud-token,
.stat-pill,
.tag{
  border:0 !important;
  border-radius:2px !important;
  background:
    linear-gradient(90deg,rgba(72,47,25,.74),rgba(19,15,12,.64)),
    radial-gradient(ellipse at 12px 50%,rgba(225,168,78,.18) 0 5px,transparent 6px) !important;
  box-shadow:inset 0 0 0 1px rgba(222,176,93,.13),0 4px 8px rgba(0,0,0,.2) !important;
  line-height:1.16 !important;
}

.hud-token{
  min-height:26px;
  padding:5px 10px;
  align-items:center;
}

.building-hotspot{
  width:86px;
  min-width:86px;
  min-height:62px;
  padding:19px 8px 8px;
  border:0 !important;
  border-radius:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.1)),
    var(--ui-hanging-signs-v19e) center 8%/560px 560px no-repeat !important;
  box-shadow:0 11px 18px rgba(0,0,0,.42),0 0 13px rgba(255,165,72,.12) !important;
}

.building-hotspot::before{
  left:50% !important;
  top:-10px !important;
  width:32px !important;
  height:18px !important;
  transform:translateX(-50%) !important;
  border:0 !important;
  background:
    linear-gradient(90deg,transparent 0 7px,rgba(31,27,22,.86) 7px 10px,transparent 10px 22px,rgba(31,27,22,.86) 22px 25px,transparent 25px),
    linear-gradient(180deg,rgba(88,71,50,.86),rgba(20,17,13,.94)) !important;
}

.building-hotspot::after{
  display:none !important;
}

.building-hotspot span:first-child{
  opacity:.64;
  transform:scale(.72);
  height:13px;
}

.building-hotspot span:last-child{
  display:block;
  max-width:74px;
  line-height:1.05;
  text-align:center;
  color:#fff0c7;
  text-shadow:0 1px 0 #000,0 0 8px rgba(0,0,0,.85);
}

.building-tavern{background-position:center 8%,center 8% !important}
.building-inn{background-position:center 8%,75% 8% !important}
.building-blacksmith{background-position:center 8%,75% 39% !important}
.building-market{background-position:center 8%,14% 76% !important}
.building-mine{background-position:center 8%,75% 76% !important}

.paper-doll-frame-combat{
  width:98px;
  max-width:98px;
  overflow:hidden;
}

.paper-doll-frame-combat .paper-doll-scene{
  min-height:148px;
  aspect-ratio:2/3;
}

.paper-doll-frame-combat .paper-doll-generated{
  --paper-doll-scale:.96;
  object-fit:contain;
  object-position:center bottom;
}

.combat-card{
  grid-template-columns:106px minmax(0,1fr);
  min-height:150px;
  overflow:visible;
}

@media(max-width:700px){
  .overworld-map{
    filter:saturate(1.1) contrast(1.08) brightness(1.14);
  }
  .building-hotspot{
    width:74px;
    min-width:74px;
    min-height:54px;
    padding:16px 6px 7px;
    background-size:475px 475px !important;
  }
  .building-hotspot span:last-child{
    max-width:64px;
    font-size:10px;
  }
  .combat-card{
    grid-template-columns:88px minmax(0,1fr);
    min-height:134px;
  }
  .paper-doll-frame-combat{
    width:82px;
    max-width:82px;
  }
  .paper-doll-frame-combat .paper-doll-scene{
    min-height:126px;
  }
}

/* v19f cascade guard: keep map restoration and label polish after all v19e frame rules. */
.overworld-map{
  border-image-slice:104;
  background-color:#15110b;
  background-image:
    linear-gradient(90deg,rgba(18,10,5,.28),rgba(0,0,0,.04) 18%,rgba(0,0,0,.02) 82%,rgba(18,10,5,.34)),
    radial-gradient(ellipse at 22% 22%,rgba(151,95,45,.18),transparent 34%),
    radial-gradient(ellipse at 70% 64%,rgba(68,52,34,.24),transparent 38%),
    url("./assets/overworld-map-v12.png");
  background-size:cover,cover,cover,cover;
  background-position:center;
  background-repeat:no-repeat;
}

.node-label,
.map-event::after,
.map-entity::before{
  border:0;
  border-radius:2px;
  padding:3px 8px 4px;
  background:
    linear-gradient(90deg,rgba(91,57,25,.68),rgba(178,128,62,.2) 50%,rgba(91,57,25,.64)),
    radial-gradient(ellipse at 50% 0,rgba(255,224,154,.12),transparent 72%);
  color:#fff0c6;
  line-height:1.18;
  box-shadow:0 5px 10px rgba(0,0,0,.34);
}

.location-badge,
.location-stage-copy .location-badge,
.fantasy-start-card-head,
.fantasy-field-label{
  border:0;
  border-radius:2px;
  padding:4px 14px 5px;
  background:
    linear-gradient(90deg,rgba(84,50,23,.72),rgba(166,114,54,.24) 52%,rgba(84,50,23,.66)),
    radial-gradient(ellipse at 50% 0,rgba(255,223,149,.14),transparent 68%);
  line-height:1.22;
}

.pill,
.fantasy-resource-token,
.hud-token,
.stat-pill,
.tag{
  border:0;
  border-radius:2px;
  padding:5px 10px 6px 12px;
  line-height:1.16;
}

.hud-token{
  min-height:27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* v19f cascade guard: keep polish after all v19e frame rules. */
.overworld-map{
  border-image-slice:104;
  background-color:#15110b;
  background-image:
    linear-gradient(90deg,rgba(18,10,5,.28),rgba(0,0,0,.04) 18%,rgba(0,0,0,.02) 82%,rgba(18,10,5,.34)),
    radial-gradient(ellipse at 22% 22%,rgba(151,95,45,.18),transparent 34%),
    radial-gradient(ellipse at 70% 64%,rgba(68,52,34,.24),transparent 38%),
    url("./assets/overworld-map-v12.png");
  background-size:cover,cover,cover,cover;
  background-position:center;
  background-repeat:no-repeat;
}

.node-label,
.map-event::after,
.map-entity::before{
  border:0;
  border-radius:2px;
  padding:3px 8px 4px;
  background:
    linear-gradient(90deg,rgba(91,57,25,.68),rgba(178,128,62,.2) 50%,rgba(91,57,25,.64)),
    radial-gradient(ellipse at 50% 0,rgba(255,224,154,.12),transparent 72%);
  color:#fff0c6;
  line-height:1.18;
  box-shadow:0 5px 10px rgba(0,0,0,.34);
}

.location-badge,
.location-stage-copy .location-badge,
.fantasy-start-card-head,
.fantasy-field-label{
  border:0;
  border-radius:2px;
  padding:4px 14px 5px;
  background:
    linear-gradient(90deg,rgba(84,50,23,.72),rgba(166,114,54,.24) 52%,rgba(84,50,23,.66)),
    radial-gradient(ellipse at 50% 0,rgba(255,223,149,.14),transparent 68%);
  line-height:1.22;
}

.pill,
.fantasy-resource-token,
.hud-token,
.stat-pill,
.tag{
  border:0;
  border-radius:2px;
  padding:5px 10px 6px 12px;
  line-height:1.16;
}

.hud-token{
  min-height:27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* v19f polish: reduce black sticker labels, improve type breathing room, and restore the campaign map surface. */
.overworld-map{
  border-image-slice:104;
  background-color:#15110b;
  background-image:
    linear-gradient(90deg,rgba(18,10,5,.28),rgba(0,0,0,.04) 18%,rgba(0,0,0,.02) 82%,rgba(18,10,5,.34)),
    radial-gradient(ellipse at 22% 22%,rgba(151,95,45,.18),transparent 34%),
    radial-gradient(ellipse at 70% 64%,rgba(68,52,34,.24),transparent 38%),
    url("./assets/overworld-map-v12.png");
  background-size:cover,cover,cover,cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:saturate(1.06) contrast(1.05);
}

.overworld-map::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.18),transparent 16%,transparent 84%,rgba(0,0,0,.22)),
    radial-gradient(ellipse at center,transparent 0 67%,rgba(0,0,0,.28) 100%),
    repeating-linear-gradient(22deg,rgba(92,58,27,.075) 0 1px,transparent 1px 17px);
}

.overworld-map::after{
  background:
    radial-gradient(ellipse at 20% 84%,rgba(255,180,74,.08),transparent 25%),
    repeating-linear-gradient(0deg,rgba(255,246,210,.018) 0 1px,transparent 1px 9px);
  mix-blend-mode:soft-light;
  opacity:.82;
}

.node-label,
.map-event::after,
.map-entity::before{
  border:0;
  border-radius:2px;
  padding:3px 8px 4px;
  background:
    linear-gradient(90deg,rgba(91,57,25,.68),rgba(178,128,62,.2) 50%,rgba(91,57,25,.64)),
    radial-gradient(ellipse at 50% 0,rgba(255,224,154,.12),transparent 72%);
  color:#fff0c6;
  line-height:1.18;
  letter-spacing:0;
  box-shadow:0 5px 10px rgba(0,0,0,.34);
  text-shadow:0 1px 0 #000,0 0 8px rgba(0,0,0,.72);
}

.node-danger{
  margin-top:1px;
  padding:1px 7px 2px;
  border-radius:2px;
  background:rgba(37,22,12,.46);
  color:#d9c095;
  font-size:10px;
  line-height:1.15;
}

.travel-banner{
  border:10px solid transparent;
  border-image-source:var(--ui-command-kit-v19e);
  border-image-slice:96;
  border-image-width:8px;
  border-image-repeat:stretch;
  border-radius:2px;
  padding:8px 12px;
  background:
    linear-gradient(90deg,rgba(46,28,14,.72),rgba(14,11,8,.72) 45%,rgba(46,28,14,.68)),
    radial-gradient(ellipse at 20% 0,rgba(255,207,116,.12),transparent 62%);
  backdrop-filter:blur(1px);
}

.location-badge,
.location-stage-copy .location-badge,
.fantasy-start-card-head,
.fantasy-field-label{
  border:0;
  border-radius:2px;
  padding:4px 14px 5px;
  background:
    linear-gradient(90deg,rgba(84,50,23,.72),rgba(166,114,54,.24) 52%,rgba(84,50,23,.66)),
    radial-gradient(ellipse at 50% 0,rgba(255,223,149,.14),transparent 68%);
  color:#ffe8b7;
  box-shadow:0 5px 10px rgba(0,0,0,.28),inset 0 -1px 0 rgba(0,0,0,.28);
  line-height:1.22;
  text-shadow:0 1px 0 #000,0 0 9px rgba(0,0,0,.7);
}

.fantasy-start-card-head{
  margin-bottom:10px;
}

.fantasy-field-label{
  margin:8px auto 8px;
}

.pill,
.fantasy-resource-token,
.hud-token,
.stat-pill,
.tag{
  border:0;
  border-radius:2px;
  padding:5px 10px 6px 12px;
  background:
    linear-gradient(90deg,rgba(78,50,27,.82),rgba(22,17,13,.76)),
    radial-gradient(ellipse at 12px 50%,rgba(225,168,78,.24) 0 5px,transparent 6px);
  color:#f4ddb0;
  line-height:1.16;
  box-shadow:inset 0 0 0 1px rgba(222,176,93,.18),0 5px 11px rgba(0,0,0,.25);
}

.pill.good,
.hud-token-hero{
  background:
    linear-gradient(90deg,rgba(47,70,41,.78),rgba(17,22,14,.78)),
    radial-gradient(ellipse at 12px 50%,rgba(171,222,112,.2) 0 5px,transparent 6px);
  color:#d7ffc5;
}

.pill.warn{
  background:
    linear-gradient(90deg,rgba(91,64,25,.82),rgba(22,17,10,.78)),
    radial-gradient(ellipse at 12px 50%,rgba(255,202,93,.24) 0 5px,transparent 6px);
  color:#ffe0a2;
}

.pill.red{
  background:
    linear-gradient(90deg,rgba(87,34,28,.82),rgba(23,11,10,.78)),
    radial-gradient(ellipse at 12px 50%,rgba(255,99,80,.2) 0 5px,transparent 6px);
  color:#ffc3b8;
}

.top-status-pills{
  gap:7px 7px;
}

.hud-token{
  min-height:27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.topline button,
.fantasy-nav-tab,
.fantasy-language-row button,
button.fantasy-action-button,
button.fantasy-command-button,
button:not(.overworld-node):not(.building-hotspot){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1.12;
  text-align:center;
  padding-left:14px;
  padding-right:14px;
}

.combat-actions .grid3{
  gap:9px;
}

.combat-actions .grid3 button{
  min-height:46px;
  padding-top:8px;
  padding-bottom:8px;
}

.building-hotspot{
  gap:2px;
  padding:13px 11px 8px;
  background:
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.2)),
    var(--ui-hanging-signs-v19e) center 8%/520px 520px no-repeat;
  text-shadow:0 1px 0 #000,0 0 7px rgba(0,0,0,.78);
}

.building-hotspot span:first-child{
  opacity:.84;
  transform:scale(.92);
}

.building-hotspot span:last-child{
  line-height:1.08;
  padding:0 2px;
}

@media(max-width:700px){
  .hud-token{
    white-space:normal;
    min-height:28px;
  }
  .node-label{
    padding:3px 6px 4px;
    font-size:10px;
  }
  .travel-banner{
    gap:6px;
    padding:7px 9px;
  }
  .topline button,
  .fantasy-nav-tab,
  .fantasy-language-row button,
  button.fantasy-action-button,
  button.fantasy-command-button,
  button:not(.overworld-node):not(.building-hotspot){
    padding-left:10px;
    padding-right:10px;
  }
}

/* Final v19e scene-art guard: art frames get border-only treatment and lighter text plates. */
.fantasy-location-frame,
.location-stage,
.road-stop-stage,
.town-service-hero,
.combat-shell{
  border-image-slice:104;
}

.location-stage-copy,
.road-stop-stage-copy{
  max-width:min(620px,calc(100% - 32px));
  border:0;
  border-left:3px solid rgba(218,168,82,.72);
  background:
    linear-gradient(90deg,rgba(8,7,5,.58),rgba(8,7,5,.22) 76%,transparent),
    radial-gradient(ellipse at 0 0,rgba(255,203,112,.1),transparent 48%);
}

.location-stage-copy h2,
.road-stop-stage-copy h2{
  border:0;
  border-left:3px solid rgba(219,170,88,.78);
  border-image-source:none;
  padding:5px 16px 6px;
  background:
    linear-gradient(90deg,rgba(68,38,17,.72),rgba(29,17,10,.46) 72%,transparent),
    radial-gradient(ellipse at 0 0,rgba(255,211,128,.12),transparent 58%);
  box-shadow:none;
}

/* v19e true fantasy frame kit: original generated ruined-stone frame, command plates, and in-world signs. */
:root{
  --ui-panel-frame-v19e:url("./assets/ui/generated/panel-frame-ruined-v19e.png");
  --ui-command-kit-v19e:url("./assets/ui/generated/ui-command-kit-v19e.png");
  --ui-hanging-signs-v19e:url("./assets/ui/generated/hanging-signs-v19e.png");
  --ui-frame-border:16px;
  --ui-frame-slice:104;
}

.fantasy-shell{
  position:relative;
}

.fantasy-panel-frame,
.fantasy-panel,
.fantasy-panel-ornate,
.fantasy-start-card,
.panel,
.card,
.modal,
.tutorial-frame,
.hero-shell,
.choice-card,
.world-card,
.combat-header,
.combat-stage,
.combat-actions{
  border:var(--ui-frame-border) solid transparent;
  border-image-source:var(--ui-panel-frame-v19e);
  border-image-slice:var(--ui-frame-slice) fill;
  border-image-width:var(--ui-frame-border);
  border-image-outset:2px;
  border-image-repeat:stretch;
  border-radius:4px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.2),transparent 14%,transparent 86%,rgba(0,0,0,.24)),
    radial-gradient(ellipse at 18% 0,rgba(226,177,92,.09),transparent 34%),
    radial-gradient(ellipse at 82% 100%,rgba(90,28,26,.08),transparent 38%),
    linear-gradient(180deg,rgba(24,22,18,.96),rgba(7,8,8,.98));
  background-clip:padding-box;
  box-shadow:0 18px 46px rgba(0,0,0,.43),inset 0 0 28px rgba(0,0,0,.22);
}

.fantasy-panel-inner{
  position:relative;
  padding:clamp(10px,2vw,18px);
  background:
    linear-gradient(180deg,rgba(255,232,170,.035),transparent 18%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 1px,transparent 1px 12px);
}

.fantasy-start-card{
  width:min(650px,92vw);
  padding:20px clamp(16px,3vw,28px);
  border-image-outset:4px;
  background:
    radial-gradient(ellipse at 50% 0,rgba(255,207,118,.13),transparent 46%),
    linear-gradient(180deg,rgba(31,25,18,.9),rgba(7,7,7,.93));
  backdrop-filter:blur(2px);
}

.fantasy-title-frame{
  border:18px solid transparent;
  border-image-source:var(--ui-panel-frame-v19e);
  border-image-slice:112 fill;
  border-image-width:18px;
  border-image-outset:4px;
  border-image-repeat:stretch;
  border-radius:3px;
  background:
    radial-gradient(ellipse at 50% 0,rgba(255,209,118,.16),transparent 46%),
    linear-gradient(180deg,rgba(12,12,11,.48),rgba(0,0,0,.24));
  box-shadow:0 24px 70px rgba(0,0,0,.52);
}

.fantasy-title-frame::before,
.fantasy-title-frame::after{
  width:84px;
  height:84px;
  background:var(--ui-command-kit-v19e) center 88%/720px 720px no-repeat;
  opacity:.84;
}

.fantasy-title-text{
  color:#fff3c8;
  text-shadow:0 3px 0 #120704,0 0 18px rgba(255,177,79,.38),0 0 56px rgba(0,0,0,.95);
}

.fantasy-start-card-head,
.fantasy-field-label,
.fantasy-section-header,
.panel h1,
.panel h2,
.card h3,
.modal h2,
.road-stop-stage-copy h2,
.location-stage-copy h2{
  width:max-content;
  max-width:100%;
  min-height:34px;
  padding:6px 22px 7px;
  border:1px solid transparent;
  border-image-source:var(--ui-command-kit-v19e);
  border-image-slice:92 fill;
  border-image-width:10px;
  border-image-repeat:stretch;
  border-radius:2px;
  background:
    linear-gradient(90deg,rgba(30,18,9,.66),rgba(96,56,23,.28) 50%,rgba(30,18,9,.66)),
    var(--ui-command-kit-v19e) center 5%/760px 760px no-repeat;
  color:#ffe8b4;
  text-shadow:0 2px 0 #000,0 0 14px rgba(255,187,88,.18);
}

.fantasy-start-card-head,
.fantasy-field-label{
  margin-inline:auto;
}

.fantasy-start-note,
input,
select,
textarea{
  border:10px solid transparent;
  border-image-source:var(--ui-command-kit-v19e);
  border-image-slice:92 fill;
  border-image-width:8px;
  border-image-repeat:stretch;
  border-radius:2px;
  background:
    linear-gradient(180deg,rgba(54,38,24,.82),rgba(15,12,9,.88)),
    radial-gradient(ellipse at 50% 0,rgba(255,226,150,.08),transparent 70%);
  background-clip:padding-box;
}

.topbar{
  margin:0 0 12px;
  padding:8px;
  border:16px solid transparent;
  border-image-source:var(--ui-panel-frame-v19e);
  border-image-slice:108 fill;
  border-image-width:14px;
  border-image-outset:0 2px 3px;
  border-image-repeat:stretch;
  border-radius:0 0 4px 4px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.28),transparent 16%,transparent 84%,rgba(0,0,0,.28)),
    linear-gradient(180deg,rgba(25,23,20,.98),rgba(5,6,6,.96));
  box-shadow:0 14px 34px rgba(0,0,0,.48);
}

.topbar::before,
.topbar::after{
  display:none;
}

#topStats{
  gap:8px;
}

.fantasy-portrait-frame,
.top-status-portrait{
  border:12px solid transparent;
  border-image-source:var(--ui-panel-frame-v19e);
  border-image-slice:116 fill;
  border-image-width:10px;
  border-image-repeat:stretch;
  border-radius:4px;
  background:
    radial-gradient(ellipse at 50% 0,rgba(255,205,112,.18),transparent 46%),
    linear-gradient(180deg,rgba(29,24,18,.96),rgba(6,6,6,.98));
  overflow:visible;
}

.top-status-portrait img,
.portrait-card img,
.combat-portrait img{
  object-fit:contain;
}

.fantasy-resource-token,
.hud-token,
.pill,
.stat-pill,
.tag{
  border:9px solid transparent;
  border-image-source:var(--ui-command-kit-v19e);
  border-image-slice:96 fill;
  border-image-width:7px;
  border-image-repeat:stretch;
  border-radius:2px;
  background:
    radial-gradient(circle at 16px 50%,rgba(210,157,72,.18) 0 5px,transparent 6px),
    linear-gradient(180deg,rgba(42,31,20,.96),rgba(10,10,9,.96));
  background-clip:padding-box;
}

.topline{
  gap:6px;
  padding:6px 2px 2px;
}

.fantasy-nav-tab,
.topline button,
.topline button:nth-child(2n),
.topline button:nth-child(3n),
.fantasy-language-row button{
  min-height:36px;
  padding:6px 13px 7px;
  border:10px solid transparent;
  border-image-source:var(--ui-command-kit-v19e);
  border-image-slice:96 fill;
  border-image-width:8px;
  border-image-repeat:stretch;
  border-radius:2px;
  background:
    linear-gradient(180deg,rgba(77,28,23,.78),rgba(21,13,9,.96)),
    var(--ui-command-kit-v19e) center 25%/680px 680px no-repeat;
  background-clip:padding-box;
  color:#f6dcaa;
  box-shadow:0 7px 14px rgba(0,0,0,.28);
}

.topline button.active,
.fantasy-nav-tab.active{
  color:#fff2c8;
  filter:saturate(1.08);
  box-shadow:0 8px 18px rgba(0,0,0,.34),0 0 18px rgba(244,180,85,.18);
}

button.fantasy-action-button,
button.fantasy-command-button,
button:not(.overworld-node):not(.building-hotspot){
  border:11px solid transparent;
  border-image-source:var(--ui-command-kit-v19e);
  border-image-slice:96 fill;
  border-image-width:9px;
  border-image-repeat:stretch;
  border-radius:2px;
  background:
    linear-gradient(180deg,rgba(54,38,24,.96),rgba(12,10,8,.98)),
    var(--ui-command-kit-v19e) center 54%/720px 720px no-repeat;
  background-clip:padding-box;
  color:#f6ddb0;
}

button.primary:not(.overworld-node):not(.building-hotspot),
button.fantasy-action-button.primary,
.fantasy-start-actions button.primary{
  background:
    linear-gradient(180deg,rgba(98,55,24,.98),rgba(24,14,8,.98)),
    var(--ui-command-kit-v19e) center 54%/720px 720px no-repeat;
  color:#fff1c4;
}

.fantasy-command-button,
.combat-actions .grid3 button{
  min-height:42px;
  padding:7px 12px;
  font-size:13px;
  border-radius:2px;
}

.fantasy-location-frame,
.location-stage,
.road-stop-stage,
.town-service-hero,
.overworld-map,
.combat-shell{
  border:18px solid transparent;
  border-image-source:var(--ui-panel-frame-v19e);
  border-image-slice:104 fill;
  border-image-width:17px;
  border-image-outset:3px;
  border-image-repeat:stretch;
  border-radius:3px;
  background-clip:padding-box;
  box-shadow:0 22px 56px rgba(0,0,0,.52),inset 0 0 46px rgba(0,0,0,.18);
}

.fantasy-location-frame,
.location-stage,
.road-stop-stage,
.town-service-hero,
.combat-shell{
  border-image-slice:104;
}

.location-stage::before,
.road-stop-stage::before,
.town-service-hero::before{
  box-shadow:inset 0 0 0 2px rgba(232,184,94,.14),inset 0 0 46px rgba(0,0,0,.42);
}

.location-stage.has-location-art::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.08) 42%,rgba(0,0,0,.44)),
    linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.5));
}

.location-stage-copy,
.road-stop-stage-copy{
  margin:16px;
  max-width:min(620px,calc(100% - 32px));
  padding:11px 14px 12px;
  border:0;
  border-left:3px solid rgba(218,168,82,.72);
  border-radius:2px;
  background:
    linear-gradient(90deg,rgba(8,7,5,.58),rgba(8,7,5,.22) 76%,transparent),
    radial-gradient(ellipse at 0 0,rgba(255,203,112,.1),transparent 48%);
  background-clip:padding-box;
}

.location-stage-copy .location-badge{
  width:max-content;
  max-width:100%;
  padding:3px 12px;
  border:1px solid rgba(211,163,80,.42);
  background:linear-gradient(90deg,rgba(57,35,18,.74),rgba(13,10,7,.44));
  border-radius:2px;
}

.location-stage-copy h2,
.road-stop-stage-copy h2{
  margin-top:8px;
  border:0;
  border-left:3px solid rgba(219,170,88,.78);
  background:
    linear-gradient(90deg,rgba(68,38,17,.72),rgba(29,17,10,.46) 72%,transparent),
    radial-gradient(ellipse at 0 0,rgba(255,211,128,.12),transparent 58%);
  box-shadow:none;
}

.fantasy-hanging-sign,
.building-hotspot{
  min-width:86px;
  min-height:50px;
  padding:14px 13px 8px;
  border:0;
  border-radius:2px;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.3)),
    var(--ui-hanging-signs-v19e) center 8%/520px 520px no-repeat;
  color:#ffe8b8;
  box-shadow:0 12px 22px rgba(0,0,0,.46),0 0 14px rgba(255,167,67,.14);
}

.building-hotspot::before{
  content:"";
  position:absolute;
  left:50%;
  top:-8px;
  width:34px;
  height:14px;
  transform:translateX(-50%);
  border:0;
  border-radius:0;
  background:
    linear-gradient(90deg,transparent 0 6px,rgba(31,26,23,.9) 6px 10px,transparent 10px 24px,rgba(31,26,23,.9) 24px 28px,transparent 28px),
    linear-gradient(180deg,rgba(76,61,48,.9),rgba(13,12,11,.96));
  box-shadow:0 3px 6px rgba(0,0,0,.45);
}

.building-hotspot::after{
  content:"";
  position:absolute;
  inset:8px 10px 7px;
  border:1px solid rgba(244,207,132,.18);
  pointer-events:none;
}

.building-hotspot span:first-child{
  font-size:13px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.8));
}

.building-hotspot span:last-child{
  font-size:12px;
  font-weight:900;
  color:#fff0c9;
}

.building-tavern{background-position:center 7%,center 9%}
.building-inn{background-position:center 7%,78% 9%}
.building-blacksmith{background-position:center 7%,78% 40%}
.building-market{background-position:center 7%,15% 77%}
.building-mine{background-position:center 7%,78% 78%}

.location-upgrade-none{--location-upgrade-glow:rgba(95,95,95,.16)}
.location-upgrade-construction{--location-upgrade-glow:rgba(220,154,80,.18)}
.location-upgrade-basic{--location-upgrade-glow:rgba(240,190,104,.16)}
.location-upgrade-improved{--location-upgrade-glow:rgba(255,214,126,.24)}
.location-upgrade-advanced{--location-upgrade-glow:rgba(255,236,166,.32)}
.location-state-ruined{--location-state-wash:rgba(120,120,110,.16)}
.location-state-burned{--location-state-wash:rgba(255,80,38,.18)}
.location-state-plague{--location-state-wash:rgba(116,185,90,.16)}
.location-state-rebuilt{--location-state-wash:rgba(180,210,190,.16)}
.location-state-prosperous{--location-state-wash:rgba(255,218,126,.2)}

.building-hotspot.location-upgrade-none,
.building-hotspot.location-upgrade-construction,
.building-hotspot.location-upgrade-basic,
.building-hotspot.location-upgrade-improved,
.building-hotspot.location-upgrade-advanced{
  box-shadow:0 12px 22px rgba(0,0,0,.46),0 0 18px var(--location-upgrade-glow,rgba(255,167,67,.14));
}

.fantasy-divider-line,
.fantasy-divider{
  background:
    var(--ui-command-kit-v19e) center 73%/820px 820px no-repeat,
    linear-gradient(90deg,transparent,rgba(214,166,80,.64),transparent);
}

@media(max-width:700px){
  :root{
    --ui-frame-border:13px;
  }
  .topbar{
    padding:6px;
    margin:0 -2px 10px;
    border-image-width:12px;
  }
  .topline{
    gap:5px;
    padding-top:4px;
  }
  .topline button,
  .topline button:nth-child(2n),
  .topline button:nth-child(3n),
  .fantasy-language-row button{
    min-height:39px;
    padding:6px 10px;
    font-size:12px;
  }
  .fantasy-start-card{
    padding:15px;
  }
  .fantasy-title-frame{
    border-width:14px;
    border-image-width:14px;
    padding:22px 12px 15px;
  }
  .fantasy-location-frame,
  .location-stage,
  .road-stop-stage,
  .town-service-hero,
  .overworld-map,
  .combat-shell{
    border-width:14px;
    border-image-width:14px;
    border-image-outset:1px;
  }
  .location-stage-copy,
  .road-stop-stage-copy{
    margin:10px;
    padding:10px 11px;
  }
  .fantasy-start-card-head,
  .fantasy-field-label,
  .fantasy-section-header,
  .panel h1,
  .panel h2,
  .card h3,
  .modal h2,
  .road-stop-stage-copy h2,
  .location-stage-copy h2{
    padding:5px 14px 6px;
    white-space:normal;
  }
  .fantasy-hanging-sign,
  .building-hotspot{
    min-width:70px;
    min-height:46px;
    padding:12px 8px 7px;
    font-size:11px;
    background-size:430px 430px;
  }
  .combat-actions .grid3 button{
    min-height:42px;
    font-size:12px;
  }
}

/* v19e polish: use the generated sheets as frames/trim, while keeping control centers calm and readable. */
.fantasy-start-screen{
  min-height:100svh;
  align-content:center;
  gap:clamp(12px,2vh,18px);
  padding:clamp(16px,3.5vh,34px) 14px;
  overflow-x:hidden;
  overflow-y:auto;
}

.fantasy-title-frame{
  width:min(820px,92vw);
  padding:clamp(18px,3vh,26px) 20px clamp(14px,2.2vh,20px);
}

.fantasy-title-frame::before,
.fantasy-title-frame::after{
  display:none;
}

.fantasy-title-text{
  font-size:clamp(44px,6.6vw,78px);
}

.fantasy-title-sub{
  margin-top:8px;
}

.fantasy-divider{
  margin-top:9px;
}

.fantasy-start-card{
  width:min(600px,92vw);
  padding:clamp(14px,2.4vh,20px) clamp(14px,2.6vw,24px);
}

.fantasy-start-card-head,
.fantasy-field-label,
.fantasy-section-header,
.panel h1,
.panel h2,
.card h3,
.modal h2,
.road-stop-stage-copy h2,
.location-stage-copy h2,
.fantasy-start-note,
input,
select,
textarea,
.fantasy-nav-tab,
.topline button,
.topline button:nth-child(2n),
.topline button:nth-child(3n),
.fantasy-language-row button,
button.fantasy-action-button,
button.fantasy-command-button,
button:not(.overworld-node):not(.building-hotspot){
  border-image-slice:96;
  background-image:
    linear-gradient(180deg,rgba(58,42,27,.94),rgba(12,10,8,.97)),
    radial-gradient(ellipse at 50% 0,rgba(255,218,136,.12),transparent 66%);
}

.fantasy-start-card-head,
.fantasy-field-label,
.fantasy-section-header,
.panel h1,
.panel h2,
.card h3,
.modal h2,
.road-stop-stage-copy h2,
.location-stage-copy h2{
  min-height:30px;
  padding:5px 18px 6px;
  background-image:
    linear-gradient(90deg,rgba(74,43,20,.88),rgba(127,85,41,.42) 50%,rgba(74,43,20,.88)),
    radial-gradient(ellipse at 50% 0,rgba(255,224,154,.16),transparent 70%);
}

.fantasy-start-note,
input,
select,
textarea{
  background-image:
    linear-gradient(180deg,rgba(63,47,31,.86),rgba(17,14,11,.9)),
    radial-gradient(ellipse at 50% 0,rgba(255,226,150,.1),transparent 70%);
}

.fantasy-nav-tab,
.topline button,
.topline button:nth-child(2n),
.topline button:nth-child(3n),
.fantasy-language-row button{
  min-height:34px;
  border-width:8px;
  border-image-width:7px;
  background-image:
    linear-gradient(180deg,rgba(82,34,28,.86),rgba(18,12,9,.97)),
    radial-gradient(ellipse at 50% 0,rgba(255,208,126,.11),transparent 70%);
}

button.fantasy-action-button,
button.fantasy-command-button,
button:not(.overworld-node):not(.building-hotspot){
  border-width:9px;
  border-image-width:8px;
  background-image:
    linear-gradient(180deg,rgba(58,42,27,.96),rgba(12,10,8,.98)),
    radial-gradient(ellipse at 50% 0,rgba(255,206,122,.12),transparent 68%);
}

button.primary:not(.overworld-node):not(.building-hotspot),
button.fantasy-action-button.primary,
.fantasy-start-actions button.primary{
  background-image:
    linear-gradient(180deg,rgba(100,58,26,.97),rgba(25,15,9,.98)),
    radial-gradient(ellipse at 50% 0,rgba(255,222,142,.18),transparent 68%);
}

.fantasy-start-actions button{
  min-height:46px;
}

@media(max-height:760px) and (min-width:701px){
  .fantasy-start-screen{
    align-content:start;
    padding-top:16px;
    padding-bottom:18px;
  }
  .fantasy-title-frame{
    padding:16px 18px 12px;
  }
  .fantasy-title-text{
    font-size:clamp(40px,5.4vw,66px);
  }
  .fantasy-title-sub,
  .fantasy-start-note{
    font-size:14px;
  }
  .fantasy-start-card{
    padding:13px 20px;
  }
  .fantasy-start-actions button,
  .fantasy-language-row button{
    min-height:40px;
  }
}

@media(max-width:700px){
  .fantasy-start-screen{
    align-content:start;
    overflow-y:auto;
  }
  .fantasy-title-text{
    font-size:clamp(38px,12vw,54px);
  }
  .fantasy-start-actions button,
  .fantasy-language-row button{
    min-height:42px;
  }
}

/* v19e final guards: these stay last so portrait fit and scene-art visibility cannot regress. */
#topStats{
  grid-template-columns:90px minmax(0,1fr);
  min-height:108px;
}

.fantasy-portrait-frame,
.top-status-portrait{
  width:90px;
  min-width:90px;
  min-height:96px;
  padding:5px;
  border-width:8px;
  border-image-width:8px;
  overflow:hidden;
}

.top-status-portrait .paper-doll-frame,
.paper-doll-frame-hud{
  width:64px;
  max-width:64px;
  margin:0 auto;
}

.paper-doll-frame-hud .paper-doll-generated{
  object-fit:contain;
  object-position:center bottom;
}

.fantasy-location-frame,
.location-stage,
.road-stop-stage,
.town-service-hero,
.combat-shell{
  border-image-slice:104;
}

.location-stage-copy,
.road-stop-stage-copy{
  max-width:min(620px,calc(100% - 32px));
  border:0;
  border-left:3px solid rgba(218,168,82,.72);
  background:
    linear-gradient(90deg,rgba(8,7,5,.58),rgba(8,7,5,.22) 76%,transparent),
    radial-gradient(ellipse at 0 0,rgba(255,203,112,.1),transparent 48%);
}

.location-stage-copy h2,
.road-stop-stage-copy h2{
  border:0;
  border-left:3px solid rgba(219,170,88,.78);
  border-image-source:none;
  padding:5px 16px 6px;
  background:
    linear-gradient(90deg,rgba(68,38,17,.72),rgba(29,17,10,.46) 72%,transparent),
    radial-gradient(ellipse at 0 0,rgba(255,211,128,.12),transparent 58%);
  box-shadow:none;
}

@media(max-width:700px){
  #topStats{
    grid-template-columns:78px minmax(0,1fr);
    min-height:98px;
  }
  .fantasy-portrait-frame,
  .top-status-portrait{
    width:78px;
    min-width:78px;
    min-height:88px;
    padding:4px;
    border-width:7px;
    border-image-width:7px;
  }
  .top-status-portrait .paper-doll-frame,
  .paper-doll-frame-hud{
    width:56px;
    max-width:56px;
  }
}
/* v19g final cascade guard: this must stay last. */
.overworld-map{
  border-image-slice:104 !important;
  background-color:#100c08 !important;
  background-image:url("./assets/overworld-map-v12.png") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  filter:saturate(1.12) contrast(1.08) brightness(1.18);
}
.overworld-map::before{
  background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 18%,transparent 82%,rgba(0,0,0,.12)),radial-gradient(ellipse at center,transparent 0 72%,rgba(0,0,0,.18) 100%) !important;
  opacity:.72;
}
.overworld-map::after{
  background:repeating-linear-gradient(0deg,rgba(255,246,210,.012) 0 1px,transparent 1px 9px),radial-gradient(ellipse at 20% 84%,rgba(255,180,74,.045),transparent 28%) !important;
  mix-blend-mode:soft-light !important;
  opacity:.45 !important;
}
.fantasy-section-header::before,.panel h1::before,.panel h2::before,.card h3::before,.modal h2::before,.location-stage-copy h2::before,.road-stop-stage-copy h2::before,.combat-name b::before{
  content:"" !important;
  display:inline-block !important;
  width:8px !important;
  height:8px !important;
  margin-right:8px !important;
  vertical-align:.08em !important;
  border-radius:50% !important;
  background:radial-gradient(circle,#f3d58a 0 24%,#8b5e24 28% 58%,rgba(42,25,11,.9) 62%) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.38),0 0 7px rgba(226,176,88,.28) !important;
  opacity:.9 !important;
}
.node-label,.node-danger,.location-badge,.location-stage-copy .location-badge,.map-event::after,.map-entity::before{
  border:0 !important;
  border-radius:2px !important;
  background:linear-gradient(90deg,rgba(82,48,21,.62),rgba(162,112,53,.18) 50%,rgba(82,48,21,.56)),radial-gradient(ellipse at 50% 0,rgba(255,224,154,.1),transparent 72%) !important;
  box-shadow:0 4px 9px rgba(0,0,0,.26) !important;
  line-height:1.18 !important;
}
.pill,.hud-token,.stat-pill,.tag{
  border:0 !important;
  border-radius:2px !important;
  background:linear-gradient(90deg,rgba(72,47,25,.74),rgba(19,15,12,.64)),radial-gradient(ellipse at 12px 50%,rgba(225,168,78,.18) 0 5px,transparent 6px) !important;
  box-shadow:inset 0 0 0 1px rgba(222,176,93,.13),0 4px 8px rgba(0,0,0,.2) !important;
  line-height:1.16 !important;
}
.hud-token{
  min-height:26px;
  padding:5px 10px;
  align-items:center;
}
.building-hotspot{
  width:86px;
  min-width:86px;
  min-height:62px;
  padding:19px 8px 8px;
  border:0 !important;
  border-radius:0;
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.1)),var(--ui-hanging-signs-v19e) center 8%/560px 560px no-repeat !important;
  box-shadow:0 11px 18px rgba(0,0,0,.42),0 0 13px rgba(255,165,72,.12) !important;
}
.building-hotspot::before{
  left:50% !important;
  top:-10px !important;
  width:32px !important;
  height:18px !important;
  transform:translateX(-50%) !important;
  border:0 !important;
  background:linear-gradient(90deg,transparent 0 7px,rgba(31,27,22,.86) 7px 10px,transparent 10px 22px,rgba(31,27,22,.86) 22px 25px,transparent 25px),linear-gradient(180deg,rgba(88,71,50,.86),rgba(20,17,13,.94)) !important;
}
.building-hotspot::after{display:none !important}
.building-hotspot span:first-child{
  display:none;
}
.building-hotspot span:last-child{
  display:block;
  max-width:74px;
  line-height:1.05;
  text-align:center;
  color:#fff0c7;
  text-shadow:0 1px 0 #000,0 0 8px rgba(0,0,0,.85);
}
.building-tavern{background-position:center 8%,center 8% !important}
.building-inn{background-position:center 8%,75% 8% !important}
.building-blacksmith{background-position:center 8%,75% 39% !important}
.building-market{background-position:center 8%,14% 76% !important}
.building-mine{background-position:center 8%,75% 76% !important}
.paper-doll-frame-combat{
  width:98px;
  max-width:98px;
  overflow:hidden;
}
.paper-doll-frame-combat .paper-doll-scene{
  min-height:148px;
  aspect-ratio:2/3;
}
.paper-doll-frame-combat .paper-doll-generated{
  --paper-doll-scale:.96;
  object-fit:contain;
  object-position:center bottom;
}
.combat-card{
  grid-template-columns:106px minmax(0,1fr);
  min-height:150px;
  overflow:visible;
}
@media(max-width:700px){
  .overworld-map{filter:saturate(1.1) contrast(1.08) brightness(1.14)}
  .building-hotspot{
    width:74px;
    min-width:74px;
    min-height:54px;
    padding:16px 6px 7px;
    background-size:475px 475px !important;
  }
  .building-hotspot span:last-child{
    max-width:64px;
    font-size:10px;
  }
  .combat-card{
    grid-template-columns:88px minmax(0,1fr);
    min-height:134px;
  }
  .paper-doll-frame-combat{
    width:82px;
    max-width:82px;
  }
  .paper-doll-frame-combat .paper-doll-scene{min-height:126px}
}
/* v19g service sign finish: compact wood signs instead of cropped UI tags. */
.building-hotspot{
  width:auto !important;
  min-width:76px !important;
  min-height:40px !important;
  padding:10px 12px 8px !important;
  border:1px solid rgba(55,43,32,.92) !important;
  border-radius:4px 4px 9px 9px !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.22),transparent 16%,transparent 84%,rgba(0,0,0,.2)),
    repeating-linear-gradient(0deg,rgba(255,232,170,.055) 0 1px,transparent 1px 11px),
    linear-gradient(180deg,#7a4f27,#3b2414 54%,#20130c) !important;
  box-shadow:0 10px 18px rgba(0,0,0,.48),inset 0 0 0 1px rgba(245,199,115,.18),inset 0 -10px 16px rgba(0,0,0,.2) !important;
}
.building-hotspot::before{
  left:50% !important;
  top:-16px !important;
  width:42px !important;
  height:18px !important;
  transform:translateX(-50%) !important;
  background:
    linear-gradient(90deg,transparent 0 6px,rgba(24,22,20,.9) 6px 9px,transparent 9px 33px,rgba(24,22,20,.9) 33px 36px,transparent 36px),
    linear-gradient(180deg,rgba(85,66,45,.9),rgba(18,16,14,.96)) !important;
  box-shadow:0 4px 7px rgba(0,0,0,.42) !important;
}
.building-hotspot::after{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  inset:4px 6px 5px !important;
  border:1px solid rgba(238,190,106,.18) !important;
  border-radius:3px 3px 7px 7px !important;
  pointer-events:none !important;
}
.building-hotspot span:first-child{display:none !important}
.building-hotspot span:last-child{
  max-width:82px !important;
  font-size:12px !important;
  line-height:1.05 !important;
}
@media(max-width:700px){
  .building-hotspot{
    min-width:66px !important;
    min-height:38px !important;
    padding:9px 8px 7px !important;
  }
  .building-hotspot span:last-child{
    max-width:68px !important;
    font-size:10px !important;
  }
}

/* v20 populated interactive location scenes. */
.service-entry-panel{
  max-width:820px;
  margin:22px auto;
}

.service-entry-panel p{
  font-size:16px;
  line-height:1.55;
}

.populated-scene-shell{
  display:grid;
  gap:12px;
}

.populated-scene-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.populated-scene-head p{
  max-width:760px;
}

.populated-scene{
  position:relative;
  min-height:58vh;
  overflow:hidden;
  border:18px solid transparent;
  border-image-source:var(--ui-panel-frame-v19e);
  border-image-slice:104;
  border-image-width:16px;
  border-image-outset:2px;
  background-color:#080706;
  background-image:var(--interior-art);
  background-size:cover;
  background-position:center;
  box-shadow:0 22px 56px rgba(0,0,0,.52),inset 0 0 48px rgba(0,0,0,.24);
}

.populated-scene::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.46),transparent 30%,transparent 72%,rgba(0,0,0,.46)),
    radial-gradient(ellipse at center,transparent 0 58%,rgba(0,0,0,.45) 100%);
}

.populated-scene-vignette{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 20%,rgba(255,190,94,.08),transparent 28%);
  mix-blend-mode:screen;
}

.scene-ambient-layer{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}

.scene-ambient-effect{
  position:absolute;
  left:var(--effect-x);
  top:var(--effect-y);
  z-index:var(--effect-depth,3);
  width:var(--effect-w);
  height:var(--effect-h);
  opacity:var(--effect-opacity,.28);
  transform:translate(-50%,-50%) scale(var(--effect-scale,1));
  pointer-events:none;
  mix-blend-mode:screen;
  filter:blur(.2px);
}

.scene-effect-fire-flicker,
.scene-effect-candle-glow,
.scene-effect-forge-glow,
.scene-effect-torch-glow,
.scene-effect-light-pulse{
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(255,222,132,calc(.28 + var(--effect-intensity,.5) * .38)),rgba(219,91,37,calc(.16 + var(--effect-intensity,.5) * .24)) 36%,rgba(89,30,18,.06) 58%,transparent 72%);
  animation:ambient-flicker var(--effect-duration,5s) ease-in-out infinite;
}

.scene-effect-forge-glow{
  filter:blur(1.6px) saturate(1.16);
  background:
    radial-gradient(ellipse at 50% 52%,rgba(255,122,48,calc(.36 + var(--effect-intensity,.5) * .4)),rgba(162,40,21,calc(.2 + var(--effect-intensity,.5) * .22)) 44%,transparent 74%);
}

.scene-effect-smoke-drift{
  border-radius:50%;
  background:
    radial-gradient(ellipse at 35% 55%,rgba(186,180,166,.16),transparent 36%),
    radial-gradient(ellipse at 66% 42%,rgba(116,118,111,.12),transparent 42%),
    radial-gradient(ellipse at 48% 68%,rgba(76,79,76,.12),transparent 48%);
  mix-blend-mode:normal;
  filter:blur(5px);
  animation:ambient-drift var(--effect-duration,18s) ease-in-out infinite;
}

.scene-effect-dust-motes{
  opacity:calc(var(--effect-opacity,.18) * .9);
  background:
    radial-gradient(circle at 18% 28%,rgba(229,196,124,.45) 0 1px,transparent 2px),
    radial-gradient(circle at 41% 63%,rgba(229,196,124,.35) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 36%,rgba(229,196,124,.3) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 78%,rgba(229,196,124,.28) 0 1px,transparent 2px);
  filter:blur(.1px);
  animation:ambient-motes var(--effect-duration,20s) linear infinite;
}

.scene-effect-sparks{
  background:
    radial-gradient(circle at 26% 72%,rgba(255,219,133,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 54% 38%,rgba(255,153,66,.75) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 62%,rgba(255,231,164,.7) 0 1px,transparent 2px),
    radial-gradient(circle at 40% 20%,rgba(255,104,49,.68) 0 1px,transparent 2px);
  filter:drop-shadow(0 0 5px rgba(255,114,49,.34));
  animation:ambient-sparks var(--effect-duration,3s) steps(4,end) infinite;
}

.scene-effect-cloth-sway{
  border-radius:2px 2px 6px 6px;
  background:linear-gradient(180deg,rgba(120,55,39,.28),rgba(52,24,22,.18));
  transform-origin:50% 0%;
  mix-blend-mode:normal;
  animation:ambient-cloth-sway var(--effect-duration,8s) ease-in-out infinite;
}

.scene-effect-shadow-grounding{
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.58),transparent 72%);
  mix-blend-mode:multiply;
  filter:blur(2px);
}

.ambient-gold{filter:blur(.6px) saturate(1.05)}
.ambient-ember{filter:blur(1.2px) saturate(1.14)}
.ambient-smoke{mix-blend-mode:normal}
.ambient-dust{mix-blend-mode:screen}
.ambient-cloth{mix-blend-mode:multiply}

.scene-anchor{
  position:absolute;
  left:var(--anchor-x);
  top:var(--anchor-y);
  z-index:var(--anchor-depth,4);
  transform:translate(-50%,-50%) scale(var(--anchor-scale,1));
  min-width:68px;
  min-height:38px;
  padding:7px 10px 8px;
  border:1px solid rgba(87,63,38,.88) !important;
  border-radius:3px 3px 9px 9px !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.14),transparent 18%,transparent 82%,rgba(0,0,0,.16)),
    repeating-linear-gradient(0deg,rgba(255,232,170,.055) 0 1px,transparent 1px 11px),
    linear-gradient(180deg,#8a6034,#4a2f1c 56%,#24170f) !important;
  color:#fff0c7;
  font-size:12px;
  font-weight:900;
  line-height:1.05;
  text-align:center;
  text-shadow:0 1px 0 #000,0 0 8px rgba(0,0,0,.85);
  box-shadow:0 10px 18px rgba(0,0,0,.48),inset 0 0 0 1px rgba(245,199,115,.18);
  transform-origin:50% 88%;
  animation-duration:7s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}

.scene-anchor-shadow{
  position:absolute;
  left:50%;
  bottom:-7px;
  width:78%;
  height:9px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.54),transparent 72%);
  filter:blur(1px);
  pointer-events:none;
}

.scene-anchor::before{
  content:"";
  position:absolute;
  left:50%;
  top:-14px;
  width:34px;
  height:16px;
  transform:translateX(-50%);
  background:
    linear-gradient(90deg,transparent 0 6px,rgba(24,22,20,.9) 6px 9px,transparent 9px 25px,rgba(24,22,20,.9) 25px 28px,transparent 28px),
    linear-gradient(180deg,rgba(85,66,45,.9),rgba(18,16,14,.96));
}

.scene-anchor-presence{
  display:block;
  width:18px;
  height:22px;
  margin:-18px auto 2px;
  border-radius:50% 50% 42% 42%;
  background:
    var(--anchor-model, none),
    radial-gradient(circle at 50% 20%,rgba(255,224,162,.9) 0 3px,transparent 4px),
    linear-gradient(180deg,rgba(47,38,32,.9),rgba(13,11,10,.96));
  background-size:cover;
  background-position:center;
  box-shadow:0 8px 12px rgba(0,0,0,.52),0 0 12px rgba(236,154,73,.16);
  pointer-events:none;
  animation-duration:6.5s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}

.scene-idle-sway{
  animation-name:anchor-idle-sway;
}

.scene-idle-breathe .scene-anchor-presence,
.scene-idle-pulse .scene-anchor-presence,
.scene-presence-soft .scene-anchor-presence{
  animation-name:anchor-presence-breathe;
}

.scene-idle-watch{
  animation-name:anchor-idle-watch;
}

.scene-anchor-object .scene-anchor-presence{
  width:24px;
  height:18px;
  margin:-15px auto 3px;
  border-radius:5px 5px 9px 9px;
  background:
    var(--anchor-model, none),
    linear-gradient(180deg,rgba(126,91,48,.96),rgba(39,27,18,.98));
  background-size:cover;
  background-position:center;
}

.scene-anchor-service{
  border-color:rgba(184,126,48,.96) !important;
}

.scene-anchor-cache .scene-anchor-presence,
.scene-anchor-table .scene-anchor-presence{
  width:30px;
  height:16px;
  border-radius:4px;
}

.scene-anchor-hearth .scene-anchor-presence,
.scene-anchor-threat .scene-anchor-presence{
  border-radius:50% 50% 40% 40%;
}

.presence-ember .scene-anchor-presence{
  box-shadow:0 8px 12px rgba(0,0,0,.52),0 0 18px rgba(255,99,36,.35);
}

.presence-steel .scene-anchor-presence{
  background:
    var(--anchor-model, none),
    linear-gradient(180deg,rgba(159,158,145,.95),rgba(42,45,45,.98));
  background-size:cover;
  background-position:center;
}

.presence-gold .scene-anchor-presence{
  box-shadow:0 8px 12px rgba(0,0,0,.52),0 0 14px rgba(240,200,91,.28);
}

.presence-shadow .scene-anchor-presence{
  filter:saturate(.85) brightness(.78);
}

.presence-stone .scene-anchor-presence{
  background:
    var(--anchor-model, none),
    linear-gradient(180deg,rgba(100,93,78,.92),rgba(32,31,29,.98));
  background-size:cover;
  background-position:center;
}

.scene-anchor-recruit{
  min-width:76px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.12),transparent 20%,transparent 80%,rgba(0,0,0,.14)),
    linear-gradient(180deg,rgba(117,84,48,.96),rgba(54,36,24,.98) 58%,rgba(24,17,13,.98)) !important;
}

.scene-anchor-recruit .scene-anchor-presence{
  width:24px;
  height:34px;
  margin:-30px auto 4px;
  border-radius:48% 48% 38% 38%;
  background:
    var(--anchor-model, none),
    radial-gradient(circle at 50% 14%,rgba(226,190,138,.94) 0 4px,transparent 5px),
    linear-gradient(180deg,rgba(66,55,48,.95) 0 34%,rgba(31,25,24,.98) 35% 100%);
  background-size:cover;
  background-position:center;
}

.scene-anchor:hover:not(:disabled){
  transform:translate(-50%,-50%) scale(calc(var(--anchor-scale,1) * 1.04));
  box-shadow:0 12px 22px rgba(0,0,0,.52),0 0 16px rgba(255,187,91,.2);
}

.scene-hover-presence:hover:not(:disabled) .scene-anchor-presence,
.scene-hover-warm:hover:not(:disabled) .scene-anchor-presence{
  filter:brightness(1.08) saturate(1.08);
}

.scene-hover-warm:hover:not(:disabled){
  box-shadow:0 12px 22px rgba(0,0,0,.52),0 0 18px rgba(255,176,91,.26);
}

.scene-anchor-event{
  border-color:rgba(116,53,43,.9) !important;
}

.scene-lower-grid{
  align-items:start;
}

.scene-dialogue-panel,
.scene-event-panel,
.scene-service-menu{
  margin:0;
}

.scene-service-context{
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(190,139,69,.24);
}

.scene-service-context h2{
  margin:6px 0 5px;
}

.scene-service-note{
  margin:0 0 10px;
  padding:9px 10px;
  border:1px solid rgba(190,139,69,.24);
  border-radius:7px;
  background:rgba(8,10,9,.44);
}

.scene-service-note p{
  margin:7px 0 0;
}

.scene-service-menu{
  max-height:56vh;
  overflow:auto;
}

.scene-service-menu > .panel,
.scene-service-menu .scene-service-menu-body > .panel{
  border-color:rgba(122,91,43,.58);
  background:linear-gradient(180deg,rgba(22,18,14,.9),rgba(6,8,8,.94));
}

.scene-service-menu .grid,
.scene-service-menu .grid2,
.scene-service-menu .grid3{
  gap:8px;
}

.scene-service-menu .card{
  padding:10px;
}

.scene-service-menu .card h3{
  font-size:15px;
  line-height:1.1;
}

.scene-service-menu-market .grid,
.scene-service-menu-blacksmith .grid{
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}

.town-center-service-panel .scene-civic-ledger{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:10px 0;
}

.scene-result{
  color:#ffe4a9;
  font-weight:900;
}

.scene-dialogue-title{
  display:grid;
  gap:2px;
  margin-bottom:8px;
}

.scene-dialogue-title span{
  color:#d8b16b;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.scene-dialogue-title h2{
  margin:0;
}

.scene-character-dossier{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:12px;
  align-items:center;
  margin:10px 0 12px;
  padding:12px;
  background:
    linear-gradient(90deg,rgba(105,74,41,.18),transparent 34%),
    rgba(20,15,12,.46);
  border:1px solid rgba(190,139,69,.28);
  box-shadow:inset 0 0 0 1px rgba(255,230,166,.06);
}

.scene-character-presence{
  width:48px;
  height:66px;
  border-radius:48% 48% 34% 34%;
  background:
    radial-gradient(circle at 50% 13%,rgba(230,191,133,.94) 0 7px,transparent 8px),
    linear-gradient(180deg,rgba(79,62,50,.98) 0 35%,rgba(28,22,21,.98) 36% 100%);
  box-shadow:0 12px 20px rgba(0,0,0,.42),0 0 18px rgba(227,161,82,.12);
  animation:paper-doll-breathe 6.8s ease-in-out infinite;
}

.paper-doll-layered{
  position:absolute;
  inset:0;
  isolation:isolate;
}

.paper-doll-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.paper-doll-layer-base{z-index:2}
.paper-doll-layer-armor,.paper-doll-layer-chest,.paper-doll-layer-shoulders,.paper-doll-layer-gloves,.paper-doll-layer-belt,.paper-doll-layer-legs,.paper-doll-layer-boots{z-index:5}
.paper-doll-layer-head{z-index:9}
.paper-doll-layer-helmet{z-index:10}
.paper-doll-layer-weapon{z-index:12}
.paper-doll-layer-offhand{z-index:11}
.paper-doll-layer-cloak{z-index:1}
.paper-doll-layer-shadow{z-index:-1}
.paper-doll-layer-glow,.paper-doll-layer-auraBack,.paper-doll-layer-auraFront,.paper-doll-layer-classOverlay{z-index:13;mix-blend-mode:screen}

.scene-character-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.scene-hire-cost{
  color:#ffe4a9;
  font-weight:900;
  margin-bottom:0;
}

.tavern-scene-service .tavern-presence-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:10px 0 12px;
}

.scene-service-menu .service-return-panel{
  display:none;
}

/* v85 town UI consolidation: grouped town hub and merged commerce/forge menus. */
.town-hub-panel{
  margin-top:10px;
  border-color:rgba(172,126,62,.62);
  background:
    linear-gradient(180deg,rgba(23,18,13,.92),rgba(7,8,8,.96)),
    rgba(10,10,9,.92);
}

.town-hub-compact{
  margin-top:10px;
  padding:10px;
}

.town-hub-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,.78fr);
  gap:10px;
  align-items:end;
  margin-bottom:10px;
}

.town-hub-head h2{
  margin:5px 0 0;
}

.town-hub-head p{
  margin:0;
  color:#cbb998;
  font-size:12px;
}

.town-hub-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.town-hub-button{
  min-height:58px;
  display:grid;
  align-content:center;
  gap:3px;
  padding:9px 8px;
  text-align:left;
  border-color:rgba(146,105,51,.7);
  background:
    linear-gradient(180deg,rgba(80,53,28,.94),rgba(24,18,14,.98));
}

.town-hub-button span{
  color:#ffe8bd;
  font-size:13px;
  font-weight:950;
  line-height:1.05;
}

.town-hub-button small{
  color:#cdb790;
  font:800 10px/1.15 system-ui,sans-serif;
}

.town-hub-button.active{
  border-color:rgba(252,201,105,.95);
  box-shadow:0 0 18px rgba(231,167,72,.18),inset 0 0 0 1px rgba(255,234,176,.14);
}

.town-service-section-head{
  margin-bottom:10px;
}

.town-service-section-head h2{
  margin:6px 0 5px;
}

.town-service-section-head p{
  margin:0;
  color:#cfbd9d;
}

.town-service-section{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(190,139,69,.22);
}

.town-service-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.town-service-section-title h3{
  margin:0;
  font-size:16px;
}

.town-action-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.town-stock-grid,
.town-forge-grid{
  grid-template-columns:repeat(auto-fit,minmax(152px,1fr));
}

.town-empty-note{
  margin:0;
  padding:10px;
  border:1px dashed rgba(190,139,69,.35);
  border-radius:7px;
  background:rgba(9,10,9,.42);
}

@media(max-width:700px){
  .populated-scene{
    min-height:64vh;
    border-width:14px;
    border-image-width:14px;
  }
  .scene-anchor{
    min-width:64px;
    min-height:40px;
    padding:7px 8px;
    font-size:10px;
  }
  .scene-anchor-recruit .scene-anchor-presence{
    width:21px;
    height:30px;
    margin-top:-26px;
  }
  .scene-character-dossier{
    grid-template-columns:44px minmax(0,1fr);
    padding:10px;
  }
  .scene-character-presence{
    width:40px;
    height:56px;
  }
  .populated-scene-head{
    display:grid;
  }
  .town-hub-head{
    grid-template-columns:1fr;
  }
  .town-hub-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .town-hub-button{
    min-height:52px;
  }
  .town-action-row{
    grid-template-columns:1fr;
  }
  .town-stock-grid,
  .town-forge-grid{
    grid-template-columns:1fr;
  }
}

@keyframes ambient-flicker{
  0%,100%{opacity:calc(var(--effect-opacity,.28) * .82);transform:translate(-50%,-50%) scale(calc(var(--effect-scale,1) * .98))}
  32%{opacity:calc(var(--effect-opacity,.28) * 1.16);transform:translate(-50%,-50%) scale(calc(var(--effect-scale,1) * 1.04))}
  58%{opacity:calc(var(--effect-opacity,.28) * .92);transform:translate(-50%,-50%) scale(calc(var(--effect-scale,1) * 1.01))}
  74%{opacity:calc(var(--effect-opacity,.28) * 1.08)}
}

@keyframes ambient-drift{
  0%,100%{transform:translate(-52%,-50%) scale(var(--effect-scale,1));opacity:calc(var(--effect-opacity,.2) * .76)}
  45%{transform:translate(-47%,-57%) scale(calc(var(--effect-scale,1) * 1.05));opacity:calc(var(--effect-opacity,.2) * 1.08)}
  72%{transform:translate(-50%,-54%) scale(calc(var(--effect-scale,1) * .98))}
}

@keyframes ambient-motes{
  0%{transform:translate(-50%,-50%) scale(var(--effect-scale,1));opacity:calc(var(--effect-opacity,.18) * .62)}
  50%{opacity:calc(var(--effect-opacity,.18) * 1.05)}
  100%{transform:translate(-47%,-56%) scale(var(--effect-scale,1));opacity:calc(var(--effect-opacity,.18) * .62)}
}

@keyframes ambient-sparks{
  0%,100%{opacity:calc(var(--effect-opacity,.4) * .35);transform:translate(-50%,-50%) scale(var(--effect-scale,1))}
  40%{opacity:var(--effect-opacity,.4);transform:translate(-48%,-55%) scale(calc(var(--effect-scale,1) * 1.06))}
  70%{opacity:calc(var(--effect-opacity,.4) * .56);transform:translate(-52%,-61%) scale(calc(var(--effect-scale,1) * .92))}
}

@keyframes ambient-cloth-sway{
  0%,100%{transform:translate(-50%,-50%) scale(var(--effect-scale,1)) rotate(-1.4deg)}
  50%{transform:translate(-50%,-49%) scale(var(--effect-scale,1)) rotate(1.6deg)}
}

@keyframes anchor-idle-sway{
  0%,100%{transform:translate(-50%,-50%) scale(var(--anchor-scale,1)) rotate(-.25deg)}
  50%{transform:translate(-50%,calc(-50% - 1px)) scale(var(--anchor-scale,1)) rotate(.35deg)}
}

@keyframes anchor-idle-watch{
  0%,100%{transform:translate(-50%,-50%) scale(var(--anchor-scale,1))}
  45%{transform:translate(calc(-50% + 1px),-50%) scale(var(--anchor-scale,1))}
}

@keyframes anchor-presence-breathe{
  0%,100%{transform:scaleY(1);filter:brightness(1)}
  50%{transform:scaleY(1.035);filter:brightness(1.05)}
}

@keyframes paper-doll-breathe{
  0%,100%{transform:translateY(0) scaleY(1)}
  50%{transform:translateY(-1px) scaleY(1.018)}
}

@keyframes paper-doll-root-idle{
  0%,100%{transform:translateY(0) rotate(-.22deg)}
  50%{transform:translateY(-3.2px) rotate(.22deg)}
}

@keyframes paper-doll-combat-idle{
  0%,100%{transform:translateY(0) rotate(-.2deg)}
  50%{transform:translateY(-2px) rotate(.22deg)}
}

@keyframes paper-doll-hud-idle{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-.9px) scale(1.006)}
}

@keyframes paper-doll-body-breathe{
  0%,100%{transform:translateY(0) rotate(-.08deg)}
  50%{transform:translateY(-1.7px) rotate(.08deg)}
}

@keyframes paper-doll-visible-breathe{
  0%,100%{transform:translateY(0) rotate(-.08deg) scale(var(--paper-doll-scale));filter:drop-shadow(0 16px 14px rgba(0,0,0,.7)) saturate(1.06) contrast(1.04) brightness(1)}
  50%{transform:translateY(-2.1px) rotate(.12deg) scale(var(--paper-doll-scale));filter:drop-shadow(0 17px 14px rgba(0,0,0,.68)) saturate(1.07) contrast(1.04) brightness(1.035)}
}

@keyframes paper-doll-framed-idle{
  0%,100%{transform:rotate(-.05deg)}
  50%{transform:rotate(.05deg)}
}

@keyframes paper-doll-framed-light{
  0%,100%{filter:drop-shadow(0 13px 12px rgba(0,0,0,.72)) saturate(1.04) contrast(1.04) brightness(1)}
  50%{filter:drop-shadow(0 13px 12px rgba(0,0,0,.7)) saturate(1.045) contrast(1.04) brightness(1.018)}
}

@keyframes paper-doll-head-follow{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-1.1px) rotate(-.12deg)}
}

@keyframes paper-doll-gear-follow{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1.2px)}
}

@keyframes paper-doll-weapon-bob{
  0%,100%{transform:translateY(0) rotate(-.35deg)}
  50%{transform:translateY(-1.8px) rotate(.62deg)}
}

@keyframes paper-doll-offhand-bob{
  0%,100%{transform:translateY(0) rotate(.22deg)}
  50%{transform:translateY(-1.4px) rotate(-.42deg)}
}

@keyframes paper-doll-cape-sway{
  0%,100%{transform:translateX(0) rotate(-.42deg)}
  50%{transform:translateX(1.4px) rotate(.5deg)}
}

@keyframes paper-doll-glow-pulse{
  0%,100%{opacity:.72;filter:saturate(1)}
  50%{opacity:.95;filter:saturate(1.08)}
}

@keyframes paper-doll-shadow-pulse{
  0%,100%{opacity:.82;transform:scaleX(1)}
  50%{opacity:.56;transform:scaleX(.9)}
}

body[data-paper-doll-motion="preview"] .paper-doll-state-idle .paper-doll-avatar,
body[data-paper-doll-motion="preview"] .paper-doll-state-combatIdle .paper-doll-avatar{
  animation-name:paper-doll-preview-idle;
  animation-duration:3.8s;
}

body[data-paper-doll-motion="inspect"] .paper-doll-avatar{
  animation-name:paper-doll-preview-idle !important;
  animation-duration:3.2s !important;
  outline:1px solid rgba(255,214,126,.72);
  outline-offset:-18px;
}

body[data-paper-doll-motion="inspect"] .paper-doll-generated-stack,
body[data-paper-doll-motion="inspect"] .paper-doll-generated,
body[data-paper-doll-motion="inspect"] .paper-doll-motion-body,
body[data-paper-doll-motion="inspect"] .paper-doll-motion-armor{
  animation-name:paper-doll-preview-body !important;
  animation-duration:3.2s !important;
}

body[data-paper-doll-motion="inspect"] .paper-doll-generated-stack::after{
  content:"";
  position:absolute;
  left:28%;
  right:28%;
  bottom:15%;
  height:2px;
  background:rgba(255,214,126,.7);
  box-shadow:0 0 10px rgba(255,190,91,.45);
  pointer-events:none;
}

body[data-paper-doll-motion="preview"] .paper-doll-state-hudIdle .paper-doll-avatar{
  animation-name:paper-doll-preview-hud;
  animation-duration:4.2s;
}

body[data-paper-doll-motion="preview"] .paper-doll-generated-stack,
body[data-paper-doll-motion="preview"] .paper-doll-generated,
body[data-paper-doll-motion="preview"] .paper-doll-motion-body,
body[data-paper-doll-motion="preview"] .paper-doll-motion-armor{
  animation-name:paper-doll-preview-body;
  animation-duration:3.8s;
}

body[data-paper-doll-motion="preview"] .paper-doll-gear-badges{
  animation-name:paper-doll-preview-gear;
  animation-duration:3.8s;
}

body[data-paper-doll-motion="preview"] .paper-doll-gear-weapon,
body[data-paper-doll-motion="preview"] .paper-doll-motion-weapon{
  animation-name:paper-doll-preview-weapon;
  animation-duration:3.4s;
}

body[data-paper-doll-motion="preview"] .paper-doll-gear-offhand,
body[data-paper-doll-motion="preview"] .paper-doll-motion-offhand{
  animation-name:paper-doll-preview-offhand;
  animation-duration:3.6s;
}

body[data-paper-doll-motion="preview"] .paper-doll-shadow{
  animation-name:paper-doll-preview-shadow;
  animation-duration:3.8s;
}

body[data-paper-doll-motion="off"] .paper-doll-avatar,
body[data-paper-doll-motion="off"] .paper-doll-generated-stack,
body[data-paper-doll-motion="off"] .paper-doll-generated,
body[data-paper-doll-motion="off"] .paper-doll-gear-badges,
body[data-paper-doll-motion="off"] .paper-doll-gear-badge,
body[data-paper-doll-motion="off"] .paper-doll-shadow,
body[data-paper-doll-motion="off"] .paper-doll-motion-body,
body[data-paper-doll-motion="off"] .paper-doll-motion-armor,
body[data-paper-doll-motion="off"] .paper-doll-motion-head,
body[data-paper-doll-motion="off"] .paper-doll-motion-weapon,
body[data-paper-doll-motion="off"] .paper-doll-motion-offhand,
body[data-paper-doll-motion="off"] .paper-doll-motion-cape,
body[data-paper-doll-motion="off"] .paper-doll-motion-glow{
  animation:none !important;
}

/* v45 final lock: keep combat as a shared scene after all legacy combat rules. */
.combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"]{
  position:relative !important;
  isolation:isolate;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  align-items:end !important;
  gap:clamp(18px,6vw,86px) !important;
  min-height:clamp(520px,68vh,760px) !important;
  margin:10px 0 !important;
  padding:clamp(16px,3vw,34px) !important;
  overflow:hidden !important;
  border:1px solid rgba(211,166,82,.36) !important;
  border-radius:10px !important;
  border-image-source:none !important;
  border-image-slice:0 !important;
  border-image-width:0 !important;
  background:
    linear-gradient(180deg,rgba(3,4,5,.08),rgba(2,3,4,.2) 42%,rgba(0,0,0,.58)),
    radial-gradient(ellipse at 50% 84%,rgba(0,0,0,.22),rgba(0,0,0,.68) 78%),
    var(--combat-stage-art,none) center 56%/cover no-repeat !important;
  box-shadow:inset 0 0 0 1px rgba(255,232,170,.04),inset 0 -120px 140px rgba(0,0,0,.46),0 22px 54px rgba(0,0,0,.46) !important;
  backdrop-filter:none !important;
}

/* v45 final lock: keep combat as a shared scene after all legacy combat rules. */
.combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"]{
  position:relative !important;
  isolation:isolate;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  align-items:end !important;
  gap:clamp(18px,6vw,86px) !important;
  min-height:clamp(520px,68vh,760px) !important;
  margin:10px 0 !important;
  padding:clamp(16px,3vw,34px) !important;
  overflow:hidden !important;
  border:1px solid rgba(211,166,82,.36) !important;
  border-radius:10px !important;
  border-image-source:none !important;
  border-image-slice:0 !important;
  border-image-width:0 !important;
  background:
    linear-gradient(180deg,rgba(3,4,5,.08),rgba(2,3,4,.2) 42%,rgba(0,0,0,.58)),
    radial-gradient(ellipse at 50% 84%,rgba(0,0,0,.22),rgba(0,0,0,.68) 78%),
    var(--combat-stage-art,none) center 56%/cover no-repeat !important;
  box-shadow:inset 0 0 0 1px rgba(255,232,170,.04),inset 0 -120px 140px rgba(0,0,0,.46),0 22px 54px rgba(0,0,0,.46) !important;
  backdrop-filter:none !important;
}

.combat-stage.combat-battlefield[data-combat-viewport="stable"]::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.52),transparent 18%,transparent 82%,rgba(0,0,0,.56)),
    radial-gradient(ellipse at 50% 72%,transparent 0 46%,rgba(0,0,0,.62) 100%),
    linear-gradient(180deg,rgba(0,0,0,.08),transparent 44%,rgba(0,0,0,.34)) !important;
  filter:none !important;
  opacity:1 !important;
}

.combat-stage.combat-battlefield[data-combat-viewport="stable"]::after{
  content:"" !important;
  position:absolute !important;
  left:-10% !important;
  right:-10% !important;
  bottom:-4% !important;
  height:45% !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:
    radial-gradient(ellipse at 24% 72%,rgba(0,0,0,.76),transparent 34%),
    radial-gradient(ellipse at 74% 70%,rgba(0,0,0,.78),transparent 36%),
    linear-gradient(180deg,transparent,rgba(0,0,0,.42)) !important;
  filter:blur(10px) !important;
  opacity:.88 !important;
}

.combat-battlefield .combat-atmosphere-layer{position:absolute !important;inset:0 !important;z-index:5 !important;pointer-events:none !important;overflow:hidden !important;mix-blend-mode:screen}
.combat-battlefield .combat-fog{position:absolute !important;left:-20% !important;right:-20% !important;bottom:2% !important;height:42% !important;opacity:.52 !important;filter:blur(18px) !important;background:radial-gradient(ellipse at 18% 72%,rgba(223,219,204,.26),transparent 48%),radial-gradient(ellipse at 76% 60%,rgba(156,170,170,.2),transparent 46%),linear-gradient(90deg,transparent,rgba(218,211,190,.16),transparent) !important;animation:combat-fog-drift-v45 30s ease-in-out infinite}
.combat-battlefield .combat-embers{position:absolute !important;inset:0 !important;opacity:.28 !important;background:radial-gradient(circle at 12% 70%,rgba(255,207,128,.55) 0 1px,transparent 2px),radial-gradient(circle at 38% 42%,rgba(220,224,214,.26) 0 1px,transparent 2px),radial-gradient(circle at 66% 64%,rgba(255,201,113,.34) 0 1px,transparent 2px),radial-gradient(circle at 86% 36%,rgba(224,226,217,.22) 0 1px,transparent 2px) !important;animation:combat-embers-rise 9s linear infinite}
.combat-battlefield .combat-light-sweep{position:absolute !important;inset:-20% -8% 18% -8% !important;opacity:.18 !important;background:linear-gradient(105deg,transparent 0 34%,rgba(255,229,166,.18) 45%,transparent 58%) !important;animation:combat-light-sweep-v45 15s ease-in-out infinite}

.combat-battlefield .combat-area{position:relative !important;z-index:4 !important;display:flex !important;flex-direction:column !important;justify-content:flex-end !important;min-width:0 !important;min-height:clamp(350px,48vh,560px) !important;align-self:end !important}
.combat-battlefield .party-area{align-items:flex-start !important}
.combat-battlefield .enemy-area{align-items:flex-end !important}
.combat-battlefield .combat-area > h2{position:absolute !important;z-index:8 !important;top:8px !important;margin:0 !important;max-width:42% !important;padding:3px 8px !important;font-size:13px !important;line-height:1.05 !important;color:#efd79f !important;border:1px solid rgba(226,185,98,.2) !important;border-radius:999px !important;background:rgba(2,3,4,.34) !important;box-shadow:none !important;opacity:.78 !important;backdrop-filter:blur(2px) !important}
.combat-battlefield .party-area > h2{left:0 !important}
.combat-battlefield .enemy-area > h2{right:0 !important}
.combat-battlefield .combat-area > h2::before,.combat-battlefield .combat-area > h2::after{display:none !important}

.combat-battlefield .combat-party-grid,.combat-battlefield .combat-enemy-grid{position:relative !important;z-index:3 !important;display:flex !important;align-items:flex-end !important;gap:clamp(10px,2vw,18px) !important;width:100% !important;min-width:0 !important}
.combat-battlefield .combat-party-grid{justify-content:flex-start !important}
.combat-battlefield .combat-enemy-grid{justify-content:flex-end !important}

.combat-battlefield .combat-card,.combat-battlefield .unit.combat-card,.combat-battlefield .enemy.combat-card{
  position:relative !important;
  display:block !important;
  width:min(100%,clamp(220px,28vw,330px)) !important;
  min-height:clamp(340px,48vh,520px) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  border-image-source:none !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.combat-battlefield .combat-card::before{content:"" !important;position:absolute !important;left:8% !important;right:8% !important;bottom:34px !important;height:54px !important;z-index:0 !important;border-radius:50% !important;background:radial-gradient(ellipse at center,rgba(0,0,0,.84),rgba(0,0,0,.32) 46%,transparent 72%) !important;filter:blur(8px) !important;opacity:.98 !important}
.combat-battlefield .portrait-wrap{position:absolute !important;left:0 !important;right:0 !important;bottom:38px !important;z-index:2 !important;min-height:clamp(280px,42vh,440px) !important;filter:drop-shadow(0 26px 20px rgba(0,0,0,.62)) !important}
.combat-battlefield .paper-doll-frame-combat,.combat-battlefield .enemy-pose-frame,.combat-battlefield .portrait-art{width:100% !important;max-width:none !important;height:clamp(280px,42vh,440px) !important;min-height:0 !important;overflow:visible !important;border:0 !important;border-radius:0 !important;border-image-source:none !important;background:transparent !important;box-shadow:none !important}
.combat-battlefield .paper-doll-frame-combat .paper-doll-scene{min-height:100% !important;height:100% !important;aspect-ratio:auto !important;overflow:visible !important;background:transparent !important}
.combat-battlefield .paper-doll-frame-combat .paper-doll-scene::before,.combat-battlefield .paper-doll-frame-combat .paper-doll-scene::after,.combat-battlefield .enemy-pose-vignette,.combat-battlefield .enemy-pose-frame-line,.combat-battlefield .portrait-frame{display:none !important}
.combat-battlefield .paper-doll-frame-combat .paper-doll-generated{--paper-doll-scale:1.04;object-position:center bottom !important;filter:drop-shadow(0 22px 14px rgba(0,0,0,.78)) saturate(1.02) contrast(1.06) !important}
.combat-battlefield .enemy-pose-art{left:50% !important;bottom:-2% !important;width:128% !important;height:128% !important;object-fit:contain !important;object-position:center bottom !important;filter:drop-shadow(0 24px 15px rgba(0,0,0,.78)) saturate(1.04) contrast(1.07) !important}
.combat-battlefield .enemy-pose-wolf .enemy-pose-art{width:146% !important;height:146% !important;bottom:-8% !important}
.combat-battlefield .enemy-pose-ground,.combat-battlefield .paper-doll-ground{opacity:1 !important;inset:auto 14% 2% 14% !important;height:18% !important;background:radial-gradient(ellipse at center,rgba(0,0,0,.84),rgba(0,0,0,.32) 44%,transparent 72%) !important;filter:blur(7px) !important}
.combat-battlefield .enemy-pose-glow{z-index:1 !important;inset:auto 0 0 0 !important;height:34% !important;opacity:.38 !important;background:radial-gradient(ellipse at center,rgba(232,199,132,.18),transparent 66%) !important}

.combat-battlefield .combat-card-body{position:absolute !important;left:4% !important;bottom:8px !important;z-index:8 !important;width:min(92%,260px) !important;min-width:0 !important;margin:0 !important;padding:7px 8px !important;border:1px solid rgba(232,199,132,.22) !important;border-radius:7px !important;border-image-source:none !important;background:linear-gradient(180deg,rgba(4,6,7,.7),rgba(2,3,4,.84)) !important;box-shadow:0 10px 22px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04) !important;backdrop-filter:blur(3px) !important}
.combat-battlefield .enemy .combat-card-body{left:auto !important;right:4% !important}
.combat-battlefield .combat-name{align-items:center !important;gap:6px !important;flex-wrap:wrap !important}
.combat-battlefield .combat-name b{font-size:13px !important;line-height:1.05 !important;overflow-wrap:anywhere !important}
.combat-battlefield .combat-name span,.combat-battlefield .meter-line{font-size:11px !important}
.combat-battlefield .combat-card-body .pill{margin:2px 2px 1px 0 !important;padding:2px 6px !important;font-size:11px !important;background:rgba(7,15,18,.72) !important}
.combat-battlefield .bar{height:9px !important;margin:4px 0 !important}
.combat-battlefield .combat-card-body button{width:auto !important;min-width:72px !important;min-height:30px !important;margin-top:4px !important;padding:4px 8px !important;font-size:11px !important}
.combat-battlefield .enemy.target .combat-card-body{border-color:rgba(240,200,91,.5) !important;box-shadow:0 0 20px rgba(240,200,91,.18),0 10px 22px rgba(0,0,0,.34) !important}

@media(max-width:700px){
  .combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"]{grid-template-columns:1fr !important;gap:4px !important;min-height:clamp(640px,82vh,860px) !important;padding:10px !important;background-position:center top !important}
  .combat-battlefield .combat-area{min-height:300px !important}
  .combat-battlefield .combat-area > h2{top:4px !important;max-width:54% !important;font-size:12px !important;opacity:.72 !important}
  .combat-battlefield .combat-card,.combat-battlefield .unit.combat-card,.combat-battlefield .enemy.combat-card{width:min(100%,320px) !important;min-height:292px !important}
  .combat-battlefield .party-area,.combat-battlefield .enemy-area{align-items:center !important}
  .combat-battlefield .combat-party-grid,.combat-battlefield .combat-enemy-grid{justify-content:center !important}
  .combat-battlefield .portrait-wrap,.combat-battlefield .paper-doll-frame-combat,.combat-battlefield .enemy-pose-frame,.combat-battlefield .portrait-art{height:238px !important;min-height:238px !important}
  .combat-battlefield .portrait-wrap{bottom:44px !important}
  .combat-battlefield .paper-doll-frame-combat .paper-doll-generated{--paper-doll-scale:1.02}
  .combat-battlefield .enemy-pose-art{width:122% !important;height:122% !important}
  .combat-battlefield .combat-card-body{left:50% !important;right:auto !important;bottom:4px !important;width:min(94%,250px) !important;transform:translateX(-50%) !important;padding:6px 7px !important}
  .combat-battlefield .combat-name b{font-size:12px !important}
  .combat-battlefield .combat-card-body .pill,.combat-battlefield .combat-name span,.combat-battlefield .meter-line{font-size:10px !important}
}

/* v45 scene combat: one battlefield, actors in the battleback, compact floating UI only. */
.combat-shell{
  overflow:hidden;
  border-color:rgba(149,108,45,.42);
  background:#030404;
}

.combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"]{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:end;
  gap:clamp(18px,6vw,86px);
  min-height:clamp(520px,68vh,760px);
  margin:10px 0;
  padding:clamp(16px,3vw,34px);
  overflow:hidden;
  border:1px solid rgba(211,166,82,.36) !important;
  border-radius:10px;
  border-image-source:none !important;
  border-image-slice:0 !important;
  border-image-width:0 !important;
  background:
    linear-gradient(180deg,rgba(3,4,5,.08),rgba(2,3,4,.2) 42%,rgba(0,0,0,.58)),
    radial-gradient(ellipse at 50% 84%,rgba(0,0,0,.22),rgba(0,0,0,.68) 78%),
    var(--combat-stage-art,none) center 56%/cover no-repeat !important;
  box-shadow:inset 0 0 0 1px rgba(255,232,170,.04),inset 0 -120px 140px rgba(0,0,0,.46),0 22px 54px rgba(0,0,0,.46) !important;
  backdrop-filter:none !important;
}

.combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"]::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.52),transparent 18%,transparent 82%,rgba(0,0,0,.56)),
    radial-gradient(ellipse at 50% 72%,transparent 0 46%,rgba(0,0,0,.62) 100%),
    linear-gradient(180deg,rgba(0,0,0,.08),transparent 44%,rgba(0,0,0,.34));
}

.combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"]::after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-4%;
  height:45%;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 24% 72%,rgba(0,0,0,.76),transparent 34%),
    radial-gradient(ellipse at 74% 70%,rgba(0,0,0,.78),transparent 36%),
    linear-gradient(180deg,transparent,rgba(0,0,0,.42));
  filter:blur(10px);
  opacity:.88;
}

.combat-battlefield .combat-atmosphere-layer{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:screen;
}

.combat-battlefield .combat-fog,
.combat-battlefield .combat-embers,
.combat-battlefield .combat-light-sweep{
  position:absolute;
  display:block;
  pointer-events:none;
}

.combat-battlefield .combat-fog{
  left:-20%;
  right:-20%;
  bottom:2%;
  height:42%;
  opacity:.52;
  filter:blur(18px);
  background:
    radial-gradient(ellipse at 18% 72%,rgba(223,219,204,.26),transparent 48%),
    radial-gradient(ellipse at 76% 60%,rgba(156,170,170,.2),transparent 46%),
    linear-gradient(90deg,transparent,rgba(218,211,190,.16),transparent);
  animation:combat-fog-drift-v45 30s ease-in-out infinite;
}

.combat-battlefield .combat-embers{
  inset:0;
  opacity:.28;
  background:
    radial-gradient(circle at 12% 70%,rgba(255,207,128,.55) 0 1px,transparent 2px),
    radial-gradient(circle at 38% 42%,rgba(220,224,214,.26) 0 1px,transparent 2px),
    radial-gradient(circle at 66% 64%,rgba(255,201,113,.34) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 36%,rgba(224,226,217,.22) 0 1px,transparent 2px);
  animation:combat-embers-rise 9s linear infinite;
}

.combat-battlefield .combat-light-sweep{
  inset:-20% -8% 18% -8%;
  opacity:.18;
  background:linear-gradient(105deg,transparent 0 34%,rgba(255,229,166,.18) 45%,transparent 58%);
  animation:combat-light-sweep-v45 15s ease-in-out infinite;
}

.combat-battlefield .combat-area{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
  min-height:clamp(350px,48vh,560px);
  align-self:end;
}

.combat-battlefield .party-area{
  align-items:flex-start;
}

.combat-battlefield .enemy-area{
  align-items:flex-end;
}

.combat-battlefield .combat-area::before,
.combat-battlefield .combat-area::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}

.combat-battlefield .combat-area::before{
  left:2%;
  right:2%;
  bottom:20px;
  height:64px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.72),rgba(0,0,0,.28) 48%,transparent 72%);
  filter:blur(9px);
}

.combat-battlefield .combat-area::after{
  left:8%;
  right:8%;
  bottom:25%;
  height:34%;
  background:linear-gradient(180deg,transparent,rgba(220,214,196,.08),transparent);
  filter:blur(12px);
  opacity:.74;
}

.combat-battlefield .combat-area > h2{
  position:absolute;
  z-index:8;
  top:8px;
  margin:0;
  max-width:42%;
  padding:3px 8px;
  font-size:13px;
  line-height:1.05;
  color:#efd79f;
  border:1px solid rgba(226,185,98,.2);
  border-radius:999px;
  background:rgba(2,3,4,.34);
  box-shadow:none;
  opacity:.78;
  backdrop-filter:blur(2px);
}

.combat-battlefield .party-area > h2{left:0}
.combat-battlefield .enemy-area > h2{right:0}
.combat-battlefield .combat-area > h2::before,
.combat-battlefield .combat-area > h2::after{display:none !important}

.combat-battlefield .combat-party-grid,
.combat-battlefield .combat-enemy-grid{
  position:relative;
  z-index:3;
  display:flex;
  align-items:flex-end;
  gap:clamp(10px,2vw,18px);
  width:100%;
  min-width:0;
}

.combat-battlefield .combat-party-grid{
  justify-content:flex-start;
}

.combat-battlefield .combat-enemy-grid{
  justify-content:flex-end;
}

.combat-battlefield .combat-card,
.combat-battlefield .unit.combat-card,
.combat-battlefield .enemy.combat-card{
  position:relative;
  display:block;
  width:min(100%,clamp(220px,28vw,330px));
  min-height:clamp(340px,48vh,520px);
  margin:0;
  padding:0;
  overflow:visible;
  border:0 !important;
  border-radius:0;
  border-image-source:none !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.combat-battlefield .combat-card::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:34px;
  height:54px;
  z-index:0;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.84),rgba(0,0,0,.32) 46%,transparent 72%);
  filter:blur(8px);
  opacity:.98;
}

.combat-battlefield .portrait-wrap{
  position:absolute;
  left:0;
  right:0;
  bottom:38px;
  z-index:2;
  min-height:clamp(280px,42vh,440px);
  filter:drop-shadow(0 26px 20px rgba(0,0,0,.62));
}

.combat-battlefield .paper-doll-frame-combat,
.combat-battlefield .enemy-pose-frame,
.combat-battlefield .portrait-art{
  width:100% !important;
  max-width:none !important;
  height:clamp(280px,42vh,440px);
  min-height:0 !important;
  overflow:visible;
  border:0 !important;
  border-radius:0 !important;
  border-image-source:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

.combat-battlefield .paper-doll-frame-combat .paper-doll-scene{
  min-height:100% !important;
  height:100%;
  aspect-ratio:auto;
  overflow:visible;
  background:transparent !important;
}

.combat-battlefield .paper-doll-frame-combat .paper-doll-scene::before,
.combat-battlefield .paper-doll-frame-combat .paper-doll-scene::after,
.combat-battlefield .enemy-pose-vignette,
.combat-battlefield .enemy-pose-frame-line,
.combat-battlefield .portrait-frame{
  display:none !important;
}

.combat-battlefield .paper-doll-frame-combat .paper-doll-generated{
  --paper-doll-scale:1.04;
  object-position:center bottom;
  filter:drop-shadow(0 22px 14px rgba(0,0,0,.78)) saturate(1.02) contrast(1.06);
}

.combat-battlefield .enemy-pose-art{
  left:50%;
  bottom:-2%;
  width:128%;
  height:128%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 24px 15px rgba(0,0,0,.78)) saturate(1.04) contrast(1.07);
}

.combat-battlefield .enemy-pose-wolf .enemy-pose-art{
  width:146%;
  height:146%;
  bottom:-8%;
}

.combat-battlefield .enemy-pose-ground,
.combat-battlefield .paper-doll-ground{
  opacity:1;
  inset:auto 14% 2% 14%;
  height:18%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.84),rgba(0,0,0,.32) 44%,transparent 72%);
  filter:blur(7px);
}

.combat-battlefield .enemy-pose-glow{
  z-index:1;
  inset:auto 0 0 0;
  height:34%;
  opacity:.38;
  background:radial-gradient(ellipse at center,rgba(232,199,132,.18),transparent 66%);
}

.combat-battlefield .combat-card-body{
  position:absolute;
  left:4%;
  bottom:8px;
  z-index:8;
  width:min(92%,260px);
  min-width:0;
  margin:0;
  padding:7px 8px;
  border:1px solid rgba(232,199,132,.22) !important;
  border-radius:7px;
  border-image-source:none !important;
  background:linear-gradient(180deg,rgba(4,6,7,.7),rgba(2,3,4,.84)) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter:blur(3px);
}

.combat-battlefield .enemy .combat-card-body{
  left:auto;
  right:4%;
}

.combat-battlefield .combat-name{
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.combat-battlefield .combat-name b{
  font-size:13px;
  line-height:1.05;
  overflow-wrap:anywhere;
}

.combat-battlefield .combat-name span,
.combat-battlefield .meter-line{
  font-size:11px;
}

.combat-battlefield .combat-card-body .pill{
  margin:2px 2px 1px 0;
  padding:2px 6px;
  font-size:11px;
  background:rgba(7,15,18,.72);
}

.combat-battlefield .bar{
  height:9px;
  margin:4px 0;
}

.combat-battlefield .combat-card-body button{
  width:auto;
  min-width:72px;
  min-height:30px;
  margin-top:4px;
  padding:4px 8px;
  font-size:11px;
}

.combat-battlefield .enemy.target .combat-card-body{
  border-color:rgba(240,200,91,.5) !important;
  box-shadow:0 0 20px rgba(240,200,91,.18),0 10px 22px rgba(0,0,0,.34) !important;
}

.combat-battlefield .enemy.target .portrait-wrap::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:2%;
  height:22%;
  z-index:0;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(240,200,91,.28),transparent 68%);
  filter:blur(9px);
  pointer-events:none;
}

.combat-battlefield .damage-pop{
  z-index:12;
}

.combat-shell.combat-impact .combat-battlefield{
  animation:combat-stage-impact-light-v45 .3s ease-out;
}

@keyframes combat-fog-drift-v45{
  0%,100%{transform:translate3d(-4%,0,0);opacity:.42}
  50%{transform:translate3d(4%,-5%,0);opacity:.62}
}

@keyframes combat-light-sweep-v45{
  0%,100%{transform:translateX(-12%);opacity:.12}
  48%{transform:translateX(10%);opacity:.24}
}

@keyframes combat-stage-impact-light-v45{
  0%,100%{filter:none}
  35%{filter:brightness(1.08) saturate(1.08)}
}

@media(max-width:700px){
  .combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"]{
    grid-template-columns:1fr;
    gap:4px;
    min-height:clamp(640px,82vh,860px);
    padding:10px;
    background-position:center top !important;
  }

  .combat-battlefield .combat-area{
    min-height:300px;
  }

  .combat-battlefield .combat-area > h2{
    top:4px;
    max-width:54%;
    font-size:12px;
    opacity:.72;
  }

  .combat-battlefield .combat-card,
  .combat-battlefield .unit.combat-card,
  .combat-battlefield .enemy.combat-card{
    width:min(100%,320px);
    min-height:292px;
  }

  .combat-battlefield .party-area,
  .combat-battlefield .enemy-area{
    align-items:center;
  }

  .combat-battlefield .combat-party-grid,
  .combat-battlefield .combat-enemy-grid{
    justify-content:center;
  }

  .combat-battlefield .portrait-wrap,
  .combat-battlefield .paper-doll-frame-combat,
  .combat-battlefield .enemy-pose-frame,
  .combat-battlefield .portrait-art{
    height:238px;
    min-height:238px !important;
  }

  .combat-battlefield .portrait-wrap{
    bottom:44px;
  }

  .combat-battlefield .paper-doll-frame-combat .paper-doll-generated{
    --paper-doll-scale:1.02;
  }

  .combat-battlefield .enemy-pose-art{
    width:122%;
    height:122%;
  }

  .combat-battlefield .combat-card-body{
    left:50% !important;
    right:auto !important;
    bottom:4px;
    width:min(94%,250px);
    transform:translateX(-50%);
    padding:6px 7px;
  }

  .combat-battlefield .combat-name b{
    font-size:12px;
  }

  .combat-battlefield .combat-card-body .pill,
  .combat-battlefield .combat-name span,
  .combat-battlefield .meter-line{
    font-size:10px;
  }

  .combat-battlefield .combat-card-body button{
    min-height:30px;
  }
}

@media(max-width:380px){
  .combat-battlefield .combat-card,
  .combat-battlefield .unit.combat-card,
  .combat-battlefield .enemy.combat-card{
    min-height:276px;
  }

  .combat-battlefield .portrait-wrap,
  .combat-battlefield .paper-doll-frame-combat,
  .combat-battlefield .enemy-pose-frame,
  .combat-battlefield .portrait-art{
    height:220px;
    min-height:220px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .combat-battlefield .combat-fog,
  .combat-battlefield .combat-embers,
  .combat-battlefield .combat-light-sweep,
  .combat-shell.combat-impact .combat-battlefield{
    animation:none !important;
  }
}

/* v44 combat scene integration: clearer battlefield depth with actors grounded in the environment. */
.combat-shell{
  border-color:rgba(170,128,58,.46);
  background:
    radial-gradient(ellipse at 50% 0,rgba(188,146,74,.11),transparent 36%),
    linear-gradient(180deg,#040607,#030404 70%,#050606);
}

.combat-shell::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.5),transparent 18%,transparent 82%,rgba(0,0,0,.52)),
    radial-gradient(ellipse at 50% 72%,transparent 0 42%,rgba(0,0,0,.48) 100%);
}

.combat-backdrop.backdrop-environmental.has-combat-art{
  background-position:center 58%;
  filter:saturate(1.03) contrast(1.16) brightness(.88);
  transform:scale(1.035);
  animation:combat-environment-drift-v44 38s ease-in-out infinite;
}

.combat-backdrop.backdrop-environmental.has-combat-art::before{
  background:
    linear-gradient(180deg,rgba(2,3,4,.04),rgba(3,4,4,.14) 31%,rgba(0,0,0,.74)),
    linear-gradient(90deg,rgba(0,0,0,.54),transparent 24%,transparent 76%,rgba(0,0,0,.58)),
    radial-gradient(ellipse at 50% 72%,transparent 0 36%,rgba(0,0,0,.62) 100%);
}

.combat-backdrop.backdrop-environmental .scene-depth{
  opacity:.9;
  background:
    linear-gradient(180deg,rgba(0,0,0,.05),transparent 42%,rgba(0,0,0,.44)),
    radial-gradient(ellipse at 20% 84%,rgba(0,0,0,.56),transparent 36%),
    radial-gradient(ellipse at 78% 83%,rgba(0,0,0,.58),transparent 38%);
}

.combat-backdrop.backdrop-environmental .scene-fog{
  opacity:.74;
  bottom:-8%;
  height:48%;
  filter:blur(14px);
  background:
    radial-gradient(ellipse at 18% 70%,rgba(224,220,205,.2),transparent 47%),
    radial-gradient(ellipse at 70% 58%,rgba(165,177,178,.16),transparent 46%),
    linear-gradient(90deg,transparent,rgba(220,214,195,.13),transparent);
  animation:combat-fog-drift-v44 27s ease-in-out infinite;
}

.combat-backdrop.backdrop-environmental .scene-fog-b{
  bottom:11%;
  height:32%;
  opacity:.38;
  animation-duration:43s;
}

.combat-backdrop.backdrop-environmental .scene-weather{
  opacity:.3;
  background:
    radial-gradient(circle at 11% 72%,rgba(255,205,125,.42) 0 1px,transparent 2px),
    radial-gradient(circle at 34% 38%,rgba(225,229,220,.24) 0 1px,transparent 2px),
    radial-gradient(circle at 63% 68%,rgba(255,218,145,.28) 0 1px,transparent 2px),
    radial-gradient(circle at 84% 45%,rgba(221,226,218,.2) 0 1px,transparent 2px);
  animation:combat-embers-rise 10s linear infinite;
}

.combat-backdrop[data-mood="campfire"].backdrop-environmental .scene-light,
.combat-backdrop[data-mood="ember"].backdrop-environmental .scene-light{
  background:radial-gradient(circle at 54% 56%,rgba(255,149,64,.32),transparent 45%);
  animation:combat-torch-flicker-v44 4.6s ease-in-out infinite;
}

.combat-backdrop[data-mood="grave-fog"].backdrop-environmental .scene-light{
  background:radial-gradient(circle at 52% 20%,rgba(188,213,226,.34),transparent 44%);
}

.combat-backdrop[data-mood="deep-woods"].backdrop-environmental .scene-light,
.combat-backdrop[data-mood="road-fog"].backdrop-environmental .scene-light{
  background:radial-gradient(circle at 47% 38%,rgba(205,184,132,.22),transparent 48%);
}

.combat-stage[data-combat-viewport="stable"]{
  position:relative;
  min-height:clamp(430px,60vh,660px);
  overflow:hidden;
  grid-template-columns:minmax(220px,.78fr) minmax(260px,1fr);
  gap:clamp(14px,4vw,46px);
  padding:clamp(14px,2.6vw,24px) clamp(12px,3vw,28px);
  align-items:end;
  background:
    radial-gradient(ellipse at 50% 86%,rgba(0,0,0,.32),transparent 56%),
    linear-gradient(180deg,rgba(8,10,10,.12),rgba(2,3,4,.34));
  border-color:rgba(219,174,91,.3);
  box-shadow:inset 0 0 0 1px rgba(255,232,170,.04),inset 0 -92px 116px rgba(0,0,0,.44),0 20px 46px rgba(0,0,0,.38);
}

.combat-stage[data-combat-viewport="stable"]::before{
  left:-4%;
  right:-4%;
  bottom:0;
  height:42%;
  z-index:1;
  background:
    radial-gradient(ellipse at 25% 76%,rgba(0,0,0,.64),transparent 35%),
    radial-gradient(ellipse at 73% 74%,rgba(0,0,0,.68),transparent 38%),
    linear-gradient(180deg,transparent,rgba(0,0,0,.42));
  filter:blur(10px);
  opacity:.86;
}

.combat-stage[data-combat-viewport="stable"]::after{
  content:"";
  position:absolute;
  left:6%;
  right:6%;
  bottom:12%;
  height:1px;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(232,199,132,.18),transparent);
  box-shadow:0 -32px 80px rgba(225,205,170,.08),0 18px 60px rgba(0,0,0,.44);
}

.combat-atmosphere-layer{
  z-index:4;
  mix-blend-mode:screen;
}

.combat-fog{
  opacity:.32;
  filter:blur(18px);
  animation-duration:24s;
}

.combat-light-sweep{
  opacity:.2;
}

.combat-area{
  position:relative;
  z-index:3;
  min-width:0;
}

.combat-area::after{
  content:"";
  position:absolute;
  left:2%;
  right:2%;
  bottom:42px;
  height:24px;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.72),transparent 68%);
  filter:blur(7px);
}

.combat-area > h2{
  align-self:flex-start;
  margin-bottom:8px;
  color:#efd49e;
  border-color:rgba(226,185,98,.18);
  background:rgba(2,3,4,.34);
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}

.enemy-area > h2{
  align-self:flex-end;
}

.combat-party-grid,
.combat-enemy-grid{
  position:relative;
  z-index:2;
  align-items:end;
}

.combat-card{
  overflow:visible;
  align-items:end;
  grid-template-columns:minmax(112px,148px) minmax(132px,1fr);
  min-height:clamp(170px,27vh,228px);
  padding:0;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}

.combat-card::before{
  inset:auto 4% 8px;
  height:32%;
  border-radius:50%;
  opacity:.88;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.68),transparent 68%);
  filter:blur(6px);
}

.unit.combat-card,
.enemy.combat-card{
  background:transparent;
}

.portrait-wrap{
  align-self:end;
  min-height:clamp(160px,25vh,220px);
  filter:drop-shadow(0 24px 20px rgba(0,0,0,.54));
}

.portrait-art,
.enemy-pose-frame,
.paper-doll-frame-combat{
  border-color:rgba(232,199,132,.14);
  background-color:rgba(3,4,4,.1);
  box-shadow:inset 0 -28px 34px rgba(0,0,0,.32),0 20px 24px rgba(0,0,0,.22);
}

.paper-doll-frame-combat{
  width:clamp(116px,17vw,152px);
  max-width:152px;
  border-radius:10px;
}

.paper-doll-frame-combat .paper-doll-scene{
  min-height:clamp(168px,26vh,222px);
  background:
    radial-gradient(ellipse at 50% 86%,rgba(0,0,0,.36),transparent 52%),
    linear-gradient(180deg,rgba(15,20,22,.2),rgba(4,5,5,.16));
}

.paper-doll-frame-combat .paper-doll-scene::before{
  background:linear-gradient(180deg,rgba(0,0,0,.02),transparent 52%,rgba(0,0,0,.5));
}

.paper-doll-frame-combat .paper-doll-scene::after{
  opacity:.26;
}

.paper-doll-frame-combat .paper-doll-generated{
  --paper-doll-scale:1.08;
  filter:drop-shadow(0 19px 13px rgba(0,0,0,.78)) saturate(1.02) contrast(1.05);
}

.paper-doll-frame-combat .paper-doll-ground,
.enemy-pose-ground{
  opacity:.98;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.68),rgba(0,0,0,.28) 42%,transparent 70%);
  filter:blur(5px);
}

.enemy-pose-frame{
  min-height:clamp(172px,27vh,232px);
  border-radius:10px;
}

.enemy-pose-art{
  width:148%;
  height:148%;
  filter:drop-shadow(0 22px 14px rgba(0,0,0,.72)) saturate(1.03) contrast(1.05);
}

.enemy-pose-wolf .enemy-pose-art{
  width:158%;
  height:158%;
}

.enemy-pose-vignette{
  background:
    radial-gradient(circle at 50% 34%,transparent 0 43%,rgba(0,0,0,.08) 60%,rgba(0,0,0,.54) 100%),
    linear-gradient(180deg,rgba(0,0,0,.02),transparent 48%,rgba(0,0,0,.36));
}

.enemy-pose-frame-line{
  border-color:rgba(255,232,170,.1);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.34),inset 0 0 22px rgba(255,232,170,.04);
}

.combat-card-body{
  align-self:end;
  min-width:0;
  margin-bottom:10px;
  padding:8px;
  border-color:rgba(226,185,98,.2);
  background:linear-gradient(180deg,rgba(4,6,7,.72),rgba(2,3,4,.84));
  box-shadow:0 14px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(3px);
}

.combat-card-body .pill{
  background:rgba(7,15,18,.78);
}

.combat-card-body button{
  width:100%;
  min-height:36px;
  padding:6px 8px;
}

.enemy.target{
  border-color:transparent;
  box-shadow:none;
}

.enemy.target .enemy-pose-frame,
.enemy.target .portrait-art{
  border-color:rgba(240,200,91,.62);
  box-shadow:0 0 0 1px rgba(240,200,91,.45),0 0 30px rgba(240,200,91,.26),inset 0 -28px 34px rgba(0,0,0,.34);
}

.enemy.target .combat-card-body{
  border-color:rgba(240,200,91,.45);
}

.combat-actions{
  border-color:rgba(203,164,91,.42);
  background:linear-gradient(180deg,rgba(6,8,9,.88),rgba(2,3,4,.96));
}

.combat-shell.combat-impact .combat-stage[data-combat-viewport="stable"]{
  animation:combat-stage-impact-light-v44 .3s ease-out;
}

@keyframes combat-environment-drift-v44{
  0%,100%{transform:scale(1.035) translate3d(0,0,0)}
  50%{transform:scale(1.052) translate3d(-.42%,.18%,0)}
}

@keyframes combat-fog-drift-v44{
  0%,100%{transform:translate3d(-3%,0,0);opacity:.68}
  50%{transform:translate3d(4%,-4%,0);opacity:.88}
}

@keyframes combat-torch-flicker-v44{
  0%,100%{opacity:.72;transform:scale(1)}
  35%{opacity:.92;transform:scale(1.035)}
  67%{opacity:.62;transform:scale(.985)}
}

@keyframes combat-stage-impact-light-v44{
  0%,100%{filter:none}
  35%{filter:brightness(1.08) saturate(1.08)}
}

@media(min-width:760px){
  .enemy-area .combat-card{
    width:min(100%,500px);
    grid-template-columns:minmax(138px,178px) minmax(180px,1fr);
  }

  .combat-enemy-grid{
    justify-items:end;
  }

  .party-area .combat-card{
    width:min(100%,460px);
  }
}

@media(max-width:700px){
  .combat-stage[data-combat-viewport="stable"]{
    min-height:clamp(510px,72vh,760px);
    gap:12px;
    padding:10px;
  }

  .combat-area::after{
    bottom:30px;
  }

  .combat-card{
    grid-template-columns:minmax(86px,104px) minmax(0,1fr);
    min-height:146px;
  }

  .portrait-wrap{
    min-height:134px;
  }

  .paper-doll-frame-combat{
    width:96px;
    max-width:96px;
  }

  .paper-doll-frame-combat .paper-doll-scene{
    min-height:138px;
  }

  .paper-doll-frame-combat .paper-doll-generated{
    --paper-doll-scale:1.03;
  }

  .enemy-pose-frame{
    min-height:138px;
  }

  .enemy-pose-art{
    width:142%;
    height:142%;
  }

  .combat-card-body{
    margin-bottom:4px;
    padding:7px;
  }

  .combat-name{
    gap:5px;
    flex-wrap:wrap;
  }

  .combat-name b,
  .combat-name span{
    font-size:12px;
    overflow-wrap:anywhere;
    white-space:normal;
  }

  .meter-line{
    margin-top:5px;
  }

  .bar{
    height:11px;
  }

  .combat-card-body button{
    min-height:34px;
  }

  .combat-backdrop.backdrop-environmental.has-combat-art{
    background-position:center top;
  }
}

@media(max-width:380px){
  .combat-card{
    grid-template-columns:82px minmax(0,1fr);
  }

  .paper-doll-frame-combat{
    width:84px;
    max-width:84px;
  }

  .paper-doll-frame-combat .paper-doll-scene,
  .enemy-pose-frame{
    min-height:122px;
  }

  .combat-card-body{
    font-size:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  .combat-backdrop.backdrop-environmental.has-combat-art,
  .combat-backdrop.backdrop-environmental .scene-fog,
  .combat-backdrop.backdrop-environmental .scene-light,
  .combat-shell.combat-impact .combat-stage[data-combat-viewport="stable"]{
    animation:none !important;
  }
}

/* v43 final scene-size guards: keep actors large after all legacy mobile rules. */
.combat-stage[data-combat-viewport="stable"] .combat-card{
  grid-template-columns:minmax(138px,34%) minmax(0,1fr);
  min-height:clamp(220px,34vh,330px);
  overflow:visible;
}

.combat-stage[data-combat-viewport="stable"] .portrait-wrap{
  min-height:clamp(214px,32vh,318px);
}

.combat-stage[data-combat-viewport="stable"] .paper-doll-frame-combat,
.combat-stage[data-combat-viewport="stable"] .enemy-pose-frame{
  width:100%;
  max-width:none;
  min-height:clamp(214px,32vh,318px);
}

.combat-stage[data-combat-viewport="stable"] .paper-doll-frame-combat .paper-doll-scene{
  min-height:clamp(214px,32vh,318px);
}

.combat-stage[data-combat-viewport="stable"] .enemy-pose-art{
  width:164%;
  height:164%;
  bottom:-13%;
}

.combat-stage[data-combat-viewport="stable"] .enemy-pose-wolf .enemy-pose-art{
  width:178%;
  height:178%;
}

@media(max-width:700px){
  .combat-stage[data-combat-viewport="stable"] .combat-card{
    grid-template-columns:minmax(132px,38%) minmax(0,1fr);
    min-height:clamp(216px,31vh,290px);
  }

  .combat-stage[data-combat-viewport="stable"] .portrait-wrap,
  .combat-stage[data-combat-viewport="stable"] .paper-doll-frame-combat,
  .combat-stage[data-combat-viewport="stable"] .enemy-pose-frame,
  .combat-stage[data-combat-viewport="stable"] .paper-doll-frame-combat .paper-doll-scene{
    min-height:clamp(204px,29vh,270px);
  }
}

@media(max-width:430px){
  .combat-stage[data-combat-viewport="stable"] .combat-card{
    grid-template-columns:minmax(112px,36%) minmax(0,1fr);
    min-height:clamp(188px,29vh,252px);
  }

  .combat-stage[data-combat-viewport="stable"] .portrait-wrap,
  .combat-stage[data-combat-viewport="stable"] .paper-doll-frame-combat,
  .combat-stage[data-combat-viewport="stable"] .enemy-pose-frame,
  .combat-stage[data-combat-viewport="stable"] .paper-doll-frame-combat .paper-doll-scene{
    min-height:clamp(176px,27vh,232px);
  }
}

.combat-shell > .combat-stage.panel[data-combat-viewport="stable"]{
  border-color:rgba(226,185,98,.1) !important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.12) 42%,rgba(0,0,0,.5)),
    linear-gradient(90deg,rgba(0,0,0,.2),transparent 24%,transparent 76%,rgba(0,0,0,.26)),
    var(--combat-stage-art,none) center/cover no-repeat !important;
  box-shadow:inset 0 -90px 130px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,232,170,.025) !important;
}

.combat-shell > .combat-stage.panel[data-combat-viewport="stable"]::before{
  z-index:1;
}

.combat-shell > .combat-stage.panel[data-combat-viewport="stable"]::after{
  z-index:3;
}

.combat-shell > .combat-stage.panel[data-combat-viewport="stable"] > .combat-area{
  z-index:4;
}

.combat-shell > .combat-stage.panel[data-combat-viewport="stable"] > h1::before,
.combat-shell > .combat-stage.panel[data-combat-viewport="stable"] > h2::before,
.combat-shell > .combat-stage.panel[data-combat-viewport="stable"]::before,
.combat-shell > .combat-stage.panel[data-combat-viewport="stable"]::after{
  pointer-events:none;
}

.combat-stage[data-combat-viewport="stable"] .combat-area > h2{
  border-radius:999px;
  background:linear-gradient(180deg,rgba(2,3,4,.28),rgba(2,3,4,.46));
  backdrop-filter:blur(2px);
}

.combat-stage[data-combat-viewport="stable"] .combat-card-body{
  background:linear-gradient(180deg,rgba(2,3,4,.44),rgba(2,3,4,.68));
}

.combat-stage[data-combat-viewport="stable"] .portrait-art,
.combat-stage[data-combat-viewport="stable"] .enemy-pose-frame,
.combat-stage[data-combat-viewport="stable"] .paper-doll-frame-combat{
  border-color:rgba(226,185,98,.05);
  background-color:transparent;
}

.combat-stage[data-combat-viewport="stable"] .paper-doll-frame,
.combat-stage[data-combat-viewport="stable"] .paper-doll-scene{
  background:transparent;
}

/* v43 scene integration: actors read as anchored in the environment, not boxed portraits. */
.combat-shell{
  padding:clamp(6px,1.4vw,12px);
  border-color:rgba(203,164,91,.22);
  background:#020303;
  box-shadow:0 30px 80px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,232,170,.025);
}

.combat-shell::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.38),transparent 16%,transparent 84%,rgba(0,0,0,.42)),
    linear-gradient(180deg,rgba(255,226,150,.035),transparent 24%,rgba(0,0,0,.18));
}

.combat-header{
  background:linear-gradient(180deg,rgba(4,6,7,.52),rgba(2,3,4,.7));
  border-color:rgba(203,164,91,.24);
  box-shadow:0 12px 24px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.03);
}

.combat-stage[data-combat-viewport="stable"]{
  min-height:clamp(520px,68vh,760px);
  grid-template-columns:minmax(250px,.95fr) minmax(300px,1.12fr);
  align-items:end;
  gap:clamp(12px,3vw,34px);
  padding:clamp(20px,4vw,42px) clamp(14px,3vw,34px) clamp(16px,3vw,30px);
  border-color:rgba(226,185,98,.16);
  background:
    linear-gradient(180deg,rgba(4,6,7,.06),rgba(2,3,4,.24) 72%,rgba(0,0,0,.5)),
    radial-gradient(ellipse at 28% 82%,rgba(0,0,0,.26),transparent 38%),
    radial-gradient(ellipse at 72% 82%,rgba(0,0,0,.32),transparent 42%);
  box-shadow:inset 0 0 0 1px rgba(255,232,170,.025),inset 0 -86px 120px rgba(0,0,0,.38),0 18px 44px rgba(0,0,0,.28);
}

.combat-stage[data-combat-viewport="stable"]::before{
  left:2%;
  right:2%;
  bottom:clamp(18px,4vh,40px);
  height:34%;
  background:
    radial-gradient(ellipse at 22% 74%,rgba(0,0,0,.6),transparent 34%),
    radial-gradient(ellipse at 76% 70%,rgba(0,0,0,.66),transparent 38%),
    linear-gradient(90deg,transparent,rgba(210,206,188,.08),transparent);
  filter:blur(10px);
  opacity:.92;
}

.combat-stage[data-combat-viewport="stable"]::after{
  content:"";
  position:absolute;
  inset:auto -8% 0 -8%;
  z-index:3;
  height:34%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 24% 60%,rgba(205,205,190,.18),transparent 48%),
    radial-gradient(ellipse at 76% 58%,rgba(205,205,190,.16),transparent 50%),
    linear-gradient(0deg,rgba(7,8,8,.5),rgba(170,170,155,.08),transparent);
  filter:blur(8px);
  mix-blend-mode:screen;
  opacity:.5;
}

.combat-backdrop.backdrop-environmental.has-combat-art{
  filter:saturate(1.04) contrast(1.1) brightness(.95);
  transform:scale(1.01);
  animation:combat-environment-drift-v43 34s ease-in-out infinite;
}

.combat-backdrop.backdrop-environmental.has-combat-art::before{
  background:
    linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.1) 34%,rgba(0,0,0,.54)),
    linear-gradient(90deg,rgba(0,0,0,.28),transparent 22%,transparent 78%,rgba(0,0,0,.34)),
    radial-gradient(ellipse at 50% 64%,transparent 0 54%,rgba(0,0,0,.54) 100%);
}

.combat-backdrop.backdrop-environmental.has-combat-art::after{
  opacity:.34;
}

.combat-backdrop.backdrop-environmental .scene-depth{
  background:
    linear-gradient(90deg,rgba(0,0,0,.36),transparent 18%,transparent 82%,rgba(0,0,0,.4)),
    radial-gradient(ellipse at 50% 84%,rgba(0,0,0,.36),transparent 50%);
}

.combat-backdrop.backdrop-environmental .scene-fog{
  opacity:1;
  height:48%;
  filter:blur(15px);
}

.combat-backdrop.backdrop-environmental .scene-weather{
  opacity:.42;
}

.combat-area{
  position:relative;
  z-index:4;
  min-height:clamp(220px,34vh,360px);
}

.combat-area::before{
  content:"";
  position:absolute;
  left:-6%;
  right:-6%;
  bottom:0;
  height:44%;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,rgba(0,0,0,.56),transparent 62%),
    linear-gradient(90deg,transparent,rgba(226,185,98,.06),transparent);
  filter:blur(7px);
  opacity:.92;
}

.combat-area > h2{
  position:relative;
  z-index:4;
  margin-left:clamp(2px,1vw,10px);
  background:linear-gradient(180deg,rgba(2,3,4,.42),rgba(2,3,4,.54));
  border-color:rgba(226,185,98,.18);
  color:#f8e8c8;
}

.combat-party-grid,
.combat-enemy-grid{
  position:relative;
  z-index:2;
  display:grid;
  gap:clamp(8px,1.8vw,16px);
  align-items:end;
}

.combat-card{
  overflow:visible;
  grid-template-columns:minmax(118px,168px) minmax(120px,.82fr);
  min-height:clamp(196px,32vh,310px);
  padding:0;
  gap:clamp(8px,1.8vw,14px);
  align-items:end;
  border:0;
  border-radius:12px;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}

.combat-card::before{
  inset:auto -5% -2% -5%;
  height:58%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 64%),
    radial-gradient(ellipse at 50% 35%,rgba(226,185,98,.08),transparent 55%);
  filter:blur(4px);
  opacity:.9;
}

.unit.combat-card,
.enemy.combat-card{
  background:transparent;
  border-color:transparent;
}

.enemy.target{
  border-color:transparent;
  box-shadow:none;
}

.enemy.target::after{
  content:"";
  position:absolute;
  left:-3%;
  right:-3%;
  bottom:4%;
  height:52%;
  z-index:0;
  pointer-events:none;
  border:1px solid rgba(240,200,91,.42);
  border-radius:16px;
  box-shadow:0 0 26px rgba(240,200,91,.18),inset 0 0 26px rgba(240,200,91,.06);
}

.portrait-wrap{
  z-index:2;
  align-self:end;
  filter:drop-shadow(0 24px 18px rgba(0,0,0,.58));
}

.portrait-art,
.enemy-pose-frame,
.paper-doll-frame-combat{
  overflow:hidden;
  min-height:clamp(190px,30vh,300px);
  border:1px solid rgba(226,185,98,.08);
  border-radius:14px;
  background-color:rgba(2,3,4,.08);
  box-shadow:none;
}

.paper-doll-frame-combat{
  width:clamp(132px,17vw,180px);
  max-width:none;
}

.paper-doll-frame-combat .paper-doll-scene{
  min-height:clamp(210px,32vh,320px);
  background:transparent;
}

.paper-doll-frame-combat .paper-doll-scene::before{
  background:linear-gradient(180deg,transparent 0 54%,rgba(0,0,0,.22));
}

.paper-doll-frame-combat .paper-doll-generated{
  --paper-doll-scale:1.24;
}

.enemy-pose-frame{
  width:clamp(132px,18vw,190px);
  min-height:clamp(210px,33vh,326px);
  background:
    linear-gradient(180deg,rgba(3,5,6,.02),rgba(3,5,6,.16) 62%,rgba(0,0,0,.28)),
    radial-gradient(ellipse at 50% 80%,rgba(0,0,0,.42),transparent 54%);
}

.enemy-pose-art{
  width:158%;
  height:158%;
  bottom:-11%;
  filter:drop-shadow(0 28px 19px rgba(0,0,0,.72)) saturate(1.05) contrast(1.05);
}

.enemy-pose-wolf .enemy-pose-art{
  width:172%;
  height:172%;
  bottom:-15%;
}

.enemy-pose-state-defeated .enemy-pose-art{
  width:154%;
  height:154%;
  bottom:-17%;
}

.enemy-pose-vignette,
.enemy-pose-frame-line,
.portrait-frame{
  opacity:.35;
}

.enemy-pose-ground{
  z-index:1;
  inset:auto 2% 0 2%;
  height:22%;
  opacity:.95;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.66),transparent 70%);
}

.enemy-pose-glow{
  opacity:.46;
}

.combat-card-body{
  position:relative;
  z-index:5;
  align-self:end;
  margin-bottom:clamp(2px,.8vh,8px);
  padding:8px;
  max-width:100%;
  border-color:rgba(226,185,98,.16);
  background:linear-gradient(180deg,rgba(2,3,4,.58),rgba(2,3,4,.78));
  box-shadow:0 14px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(3px);
}

.combat-card-body button{
  min-height:36px;
  padding:6px 9px;
}

.combat-actions{
  background:linear-gradient(180deg,rgba(4,6,7,.68),rgba(2,3,4,.88));
  border-color:rgba(203,164,91,.3);
}

.battle-log .log{
  background:linear-gradient(180deg,rgba(2,3,4,.68),rgba(2,3,4,.82));
  border-color:rgba(101,77,37,.38);
}

@keyframes combat-environment-drift-v43{
  0%,100%{transform:scale(1.01) translate3d(0,0,0)}
  50%{transform:scale(1.038) translate3d(-.55%,.2%,0)}
}

@media(min-width:980px){
  .combat-stage[data-combat-viewport="stable"]{
    grid-template-columns:minmax(360px,.92fr) minmax(430px,1.08fr);
  }

  .combat-enemy-grid{
    grid-template-columns:repeat(2,minmax(230px,1fr));
  }
}

@media(max-width:700px){
  .combat-stage[data-combat-viewport="stable"]{
    min-height:clamp(620px,82vh,860px);
    gap:12px;
    padding:16px 10px 12px;
  }

  .combat-area{
    min-height:0;
  }

  .combat-card{
    grid-template-columns:minmax(108px,136px) minmax(0,1fr);
    min-height:clamp(184px,26vh,250px);
  }

  .portrait-art,
  .enemy-pose-frame,
  .paper-doll-frame-combat{
    min-height:clamp(176px,25vh,230px);
  }

  .paper-doll-frame-combat,
  .enemy-pose-frame{
    width:clamp(108px,34vw,136px);
  }

  .combat-card-body{
    padding:7px;
  }
}

@media(max-width:430px){
  .combat-card{
    grid-template-columns:minmax(96px,120px) minmax(0,1fr);
    gap:7px;
  }

  .combat-card-body{
    font-size:11px;
  }

  .combat-name span,
  .meter-line{
    font-size:11px;
  }

  .combat-card-body button{
    min-height:34px;
  }
}

/* v31 stabilization: unified character presentation, weapon-aware combat effects, and living scene motion. */
.combat-stage[data-combat-viewport="stable"]{
  position:relative;
  overflow:hidden;
  align-items:stretch;
  min-height:clamp(320px,52vh,620px);
  contain:layout paint;
}

.combat-stage[data-combat-viewport="stable"] .combat-area{
  position:relative;
  z-index:2;
  min-width:0;
}

.combat-atmosphere-layer{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.combat-fog,
.combat-embers,
.combat-light-sweep{
  position:absolute;
  inset:0;
  opacity:.22;
  pointer-events:none;
}

.combat-fog{
  background:
    radial-gradient(ellipse at 26% 72%,rgba(185,177,158,.16),transparent 42%),
    radial-gradient(ellipse at 76% 28%,rgba(94,106,108,.14),transparent 38%);
  filter:blur(7px);
  animation:combat-fog-drift 18s ease-in-out infinite;
}

.combat-embers{
  opacity:.16;
  background:
    radial-gradient(circle at 18% 66%,rgba(255,161,72,.74) 0 1px,transparent 2px),
    radial-gradient(circle at 42% 38%,rgba(255,218,123,.52) 0 1px,transparent 2px),
    radial-gradient(circle at 70% 58%,rgba(255,102,46,.54) 0 1px,transparent 2px),
    radial-gradient(circle at 88% 34%,rgba(255,218,123,.44) 0 1px,transparent 2px);
  animation:combat-embers-rise 6.4s linear infinite;
}

.combat-light-sweep{
  opacity:.12;
  background:linear-gradient(105deg,transparent 0 32%,rgba(255,226,161,.22) 48%,transparent 64% 100%);
  transform:translateX(-35%);
  animation:combat-light-sweep 12s ease-in-out infinite;
}

.combat-card{
  contain:layout paint;
}

.portrait-wrap{
  position:relative;
  min-height:0;
}

.combat-weapon-effect{
  position:absolute;
  left:50%;
  top:45%;
  z-index:6;
  width:72%;
  height:3px;
  transform:translate(-50%,-50%) rotate(-22deg);
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,231,167,.9),rgba(180,73,45,.48),transparent);
  box-shadow:0 0 13px rgba(255,176,91,.24);
  animation:combat-weapon-sweep .52s cubic-bezier(.18,.82,.26,1) forwards;
  pointer-events:none;
}

.combat-cleave-effect{
  height:8px;
  width:64%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,231,167,.92),rgba(207,78,42,.34) 46%,transparent 72%);
  transform:translate(-50%,-50%) rotate(-33deg);
  animation-name:combat-cleave-sweep;
}

.combat-thrust-effect,
.combat-stab-effect{
  width:58%;
  height:4px;
  background:linear-gradient(90deg,transparent,rgba(255,246,205,.95),rgba(255,246,205,.72),transparent);
  transform:translate(-50%,-50%) rotate(0deg);
  animation-name:combat-thrust-line;
}

.combat-crush-effect{
  width:34%;
  height:34%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,231,167,.42),rgba(130,97,72,.24) 48%,transparent 72%);
  box-shadow:0 0 18px rgba(255,220,150,.18);
  animation-name:combat-crush-pulse;
}

.combat-shot-effect{
  width:62%;
  height:2px;
  background:linear-gradient(90deg,rgba(240,200,91,0),rgba(240,200,91,.95),rgba(240,200,91,0));
  transform:translate(-62%,-50%) rotate(-6deg);
  animation-name:combat-shot-line;
}

.combat-arcane-effect{
  width:46%;
  height:46%;
  border:1px solid rgba(125,183,255,.5);
  border-radius:50%;
  background:radial-gradient(circle,rgba(125,183,255,.25),rgba(108,64,170,.12) 45%,transparent 70%);
  box-shadow:0 0 20px rgba(125,183,255,.22);
  animation-name:combat-arcane-pulse;
}

.scene-idle-hammer .scene-anchor-presence{
  animation-name:anchor-presence-hammer;
  animation-duration:1.4s;
}

.scene-idle-patrol{
  animation-name:anchor-idle-patrol;
  animation-duration:8s;
}

.scene-idle-work .scene-anchor-presence{
  animation-name:anchor-presence-work;
  animation-duration:3.2s;
}

.scene-npc-guard .scene-anchor-presence{
  box-shadow:0 8px 12px rgba(0,0,0,.52),0 0 14px rgba(190,205,195,.2);
}

.scene-npc-blacksmith .scene-anchor-presence{
  box-shadow:0 8px 12px rgba(0,0,0,.52),0 0 20px rgba(255,92,38,.32);
}

.scene-npc-companion .scene-anchor-presence{
  outline:1px solid rgba(240,200,91,.26);
  outline-offset:2px;
}

@keyframes combat-fog-drift{
  0%,100%{transform:translateX(-2%) translateY(0);opacity:.18}
  50%{transform:translateX(3%) translateY(-2%);opacity:.28}
}

@keyframes combat-embers-rise{
  0%{transform:translateY(8%);opacity:.08}
  35%{opacity:.18}
  100%{transform:translateY(-10%);opacity:.06}
}

@keyframes combat-light-sweep{
  0%,100%{transform:translateX(-42%);opacity:.06}
  45%,58%{transform:translateX(38%);opacity:.15}
}

@keyframes combat-weapon-sweep{
  0%{opacity:0;transform:translate(-68%,-50%) rotate(-22deg) scaleX(.22)}
  28%{opacity:.95}
  54%{opacity:.72;transform:translate(-50%,-50%) rotate(-22deg) scaleX(1)}
  100%{opacity:0;transform:translate(-35%,-50%) rotate(-22deg) scaleX(1.16)}
}

@keyframes combat-cleave-sweep{
  0%{opacity:0;transform:translate(-62%,-58%) rotate(-42deg) scale(.6)}
  36%{opacity:.9}
  100%{opacity:0;transform:translate(-38%,-42%) rotate(-18deg) scale(1.18)}
}

@keyframes combat-thrust-line{
  0%{opacity:0;transform:translate(-72%,-50%) rotate(0deg) scaleX(.2)}
  34%{opacity:.95}
  100%{opacity:0;transform:translate(-18%,-50%) rotate(0deg) scaleX(1.08)}
}

@keyframes combat-crush-pulse{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}
  36%{opacity:.8;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.36)}
}

@keyframes combat-shot-line{
  0%{opacity:0;transform:translate(-76%,-50%) rotate(-6deg) scaleX(.18)}
  28%{opacity:.95}
  100%{opacity:0;transform:translate(6%,-50%) rotate(-6deg) scaleX(1)}
}

@keyframes combat-arcane-pulse{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  40%{opacity:.82;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.22)}
}

@keyframes anchor-presence-hammer{
  0%,100%{transform:translateY(0) rotate(0deg)}
  38%{transform:translateY(1px) rotate(-5deg)}
  54%{transform:translateY(-1px) rotate(4deg)}
}

@keyframes anchor-idle-patrol{
  0%,100%{transform:translate(-50%,-50%) scale(var(--anchor-scale,1))}
  50%{transform:translate(calc(-50% + 8px),-50%) scale(var(--anchor-scale,1))}
}

@keyframes anchor-presence-work{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-1px) rotate(2deg)}
}

@media(max-width:700px){
  .combat-stage[data-combat-viewport="stable"]{
    min-height:auto;
  }

  .combat-atmosphere-layer{
    opacity:.75;
  }
}

@media(prefers-reduced-motion:reduce){
  .combat-fog,
  .combat-embers,
  .combat-light-sweep,
  .combat-weapon-effect,
  .scene-idle-hammer .scene-anchor-presence,
  .scene-idle-patrol,
  .scene-idle-work .scene-anchor-presence{
    animation:none !important;
  }
}

/* Character render controller bugfix: all player displays use the layered master paper doll. */
.paper-doll-render-layered .paper-doll-layer{
  transform-origin:50% 78%;
}

.paper-doll-render-layered .paper-doll-layer-base{
  filter:drop-shadow(0 16px 14px rgba(0,0,0,.7)) saturate(1.05) contrast(1.04);
}

.paper-doll-render-layered .paper-doll-layer-chest,
.paper-doll-render-layered .paper-doll-layer-shoulders,
.paper-doll-render-layered .paper-doll-layer-gloves,
.paper-doll-render-layered .paper-doll-layer-boots,
.paper-doll-render-layered .paper-doll-layer-helmet,
.paper-doll-render-layered .paper-doll-layer-cloak,
.paper-doll-render-layered .paper-doll-layer-weapon,
.paper-doll-render-layered .paper-doll-layer-offhand{
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.42)) saturate(1.08) contrast(1.06);
}

.paper-doll-frame-hud.paper-doll-render-layered .paper-doll,
.top-status-portrait .paper-doll-render-layered .paper-doll{
  transform:translateY(24px) scale(1.72);
  transform-origin:50% 20%;
}

.paper-doll-frame-hud.paper-doll-render-layered .paper-doll-scene,
.top-status-portrait .paper-doll-render-layered .paper-doll-scene{
  background:
    radial-gradient(ellipse at 50% 12%,rgba(235,198,125,.2),transparent 34%),
    linear-gradient(180deg,#1b2528 0%,#0a0d0e 58%,#050505 100%);
}

.paper-doll-frame-combat.paper-doll-render-layered .paper-doll{
  transform:translateY(6px) scale(1.05);
  transform-origin:50% 66%;
}

.paper-doll-frame-combat.paper-doll-render-layered .paper-doll-layer-head{
  display:none;
}

.paper-doll-layer-placeholder{
  display:none !important;
}

.paper-doll-missing-overlay{
  position:absolute;
  right:6px;
  bottom:6px;
  z-index:15;
  display:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(240,200,91,.82);
  box-shadow:0 0 8px rgba(240,200,91,.35);
  pointer-events:none;
}

body[data-debug-overlays="true"] .paper-doll-missing-overlay{
  display:block;
}

@media(max-width:700px){
  .paper-doll-frame-hud.paper-doll-render-layered .paper-doll,
  .top-status-portrait .paper-doll-render-layered .paper-doll{
    transform:translateY(22px) scale(1.64);
  }
}

/* v30 mobile showcase and static deployment polish. Keep this final block at the end of the cascade. */
html{
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  touch-action:manipulation;
}

body{
  overflow-x:hidden;
}

#app{
  width:100%;
  max-width:960px;
  padding-left:max(10px,env(safe-area-inset-left));
  padding-right:max(10px,env(safe-area-inset-right));
  padding-bottom:max(110px,calc(96px + env(safe-area-inset-bottom)));
}

button,
.scene-anchor,
.building-hotspot,
.overworld-node{
  -webkit-tap-highlight-color:rgba(240,200,91,.18);
  touch-action:manipulation;
}

img,
canvas,
svg,
video{
  max-width:100%;
}

.panel,
.card,
.fantasy-panel,
.fantasy-card,
.location-card,
.service-card,
.combat-card,
.scene-service-menu,
.modal{
  min-width:0;
}

.topbar{
  max-width:100%;
  margin-left:0;
  margin-right:0;
  padding-top:max(8px,env(safe-area-inset-top));
}

.topline{
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}

.topline button{
  scroll-snap-align:start;
  min-height:44px;
}

.actions{
  bottom:env(safe-area-inset-bottom);
  max-width:100%;
}

.actions .grid3{
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
}

.actions .grid3 button,
.scene-service-menu button,
.service-return-panel button,
.location-actions button,
.modal button,
.gear-item-card button,
.gear-slot-card button,
.market-item-card button{
  min-height:46px;
  padding:9px 10px;
}

.combat-stage,
.combat-party-grid,
.combat-enemy-grid,
.gear-hero-panel,
.gear-slot-grid,
.gear-inventory-grid,
.scene-service-menu .grid,
.scene-service-menu .grid2,
.scene-service-menu .grid3{
  min-width:0;
}

.combat-shell{
  max-width:100%;
}

.combat-card-body,
.gear-item-copy,
.scene-service-context,
.scene-service-note,
.town-service-hero > *,
.location-stage-copy,
.road-stop-stage-copy,
.world-scene-copy{
  min-width:0;
  overflow-wrap:anywhere;
}

.damage-pop{
  max-width:min(180px,80vw);
  text-align:center;
}

.top-status-portrait{
  display:grid;
  place-items:center;
  overflow:hidden;
}

.top-status-portrait .paper-doll-frame{
  width:70px;
  max-width:70px;
  height:92px;
  margin:0 auto;
}

.top-status-portrait .paper-doll-scene{
  min-height:92px;
  height:92px;
  aspect-ratio:auto;
}

.top-status-portrait .paper-doll-avatar,
.paper-doll-frame-hud .paper-doll-avatar{
  animation:paper-doll-home-portrait-idle 12s ease-in-out infinite;
  transform-origin:50% 84%;
}

.top-status-portrait .paper-doll-generated,
.paper-doll-frame-hud .paper-doll-generated{
  --paper-doll-scale:1.2;
  --paper-doll-framed-y:6px;
  object-position:center top;
  transform:translateY(var(--paper-doll-framed-y,0)) scale(var(--paper-doll-scale));
  transform-origin:50% 70%;
  animation:paper-doll-home-portrait-light 12s ease-in-out infinite;
}

.paper-doll-frame-hud{
  width:64px;
  max-width:64px;
}

.paper-doll-frame-hud .paper-doll-scene{
  min-height:86px;
  height:86px;
  aspect-ratio:auto;
}

@keyframes paper-doll-home-portrait-idle{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-.3px) rotate(.01deg)}
}

@keyframes paper-doll-home-portrait-light{
  0%,100%{filter:drop-shadow(0 16px 14px rgba(0,0,0,.7)) saturate(1.05) contrast(1.04) brightness(1)}
  50%{filter:drop-shadow(0 16px 14px rgba(0,0,0,.7)) saturate(1.05) contrast(1.04) brightness(1.012)}
}

@media(max-width:700px){
  body{
    font-size:15px;
  }

  #app{
    padding-left:max(8px,env(safe-area-inset-left));
    padding-right:max(8px,env(safe-area-inset-right));
  }

  #topStats{
    grid-template-columns:82px minmax(0,1fr);
    min-height:102px;
    gap:7px;
  }

  .top-status-portrait{
    width:80px;
    min-width:80px;
    min-height:94px;
    padding:4px;
  }

  .top-status-portrait .paper-doll-frame{
    width:60px;
    max-width:60px;
    height:82px;
  }

  .top-status-portrait .paper-doll-scene{
    min-height:82px;
    height:82px;
  }

  .top-status-pills{
    gap:5px;
  }

  .hud-token{
    padding:5px 7px;
    font-size:12px;
  }

  .combat-shell{
    padding:7px;
    border-radius:10px;
  }

  .combat-header{
    gap:8px;
  }

  .combat-stage{
    grid-template-columns:1fr;
    gap:8px;
    padding:8px;
  }

  .combat-area > h2{
    font-size:16px;
    margin-bottom:6px;
  }

  .combat-party-grid,
  .combat-enemy-grid{
    gap:8px;
  }

  .combat-card{
    grid-template-columns:82px minmax(0,1fr);
    gap:8px;
    min-height:116px;
    padding:7px;
  }

  .portrait-art{
    min-height:112px;
  }

  .paper-doll-frame-combat{
    width:82px;
    max-width:82px;
  }

  .paper-doll-frame-combat .paper-doll-scene{
    min-height:122px;
  }

  .combat-name{
    gap:4px;
  }

  .combat-name b,
  .combat-name span,
  .meter-line,
  .pill{
    font-size:12px;
  }

  .log{
    max-height:138px;
    font-size:12px;
  }

  .populated-scene{
    min-height:62vh;
    border-width:10px;
    border-image-width:10px;
    background-position:center;
  }

  .scene-anchor{
    min-width:68px;
    min-height:44px;
    padding:8px;
    font-size:11px;
  }

  .scene-service-menu{
    max-width:100%;
    padding:10px;
  }

  .scene-service-menu .grid,
  .scene-service-menu .grid2,
  .scene-service-menu .grid3,
  .grid3{
    grid-template-columns:1fr;
  }

  .gear-item-line{
    grid-template-columns:56px minmax(0,1fr);
  }

  .item-icon{
    width:56px;
    height:56px;
  }

  .modal-back{
    align-items:flex-end;
    padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));
  }

  .modal{
    max-height:88dvh;
    border-radius:10px;
  }
}

@media(max-width:430px){
  .topline button{
    min-height:46px;
    padding:8px 10px;
  }

  .actions{
    margin-left:-2px;
    margin-right:-2px;
  }

  .actions .grid3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .combat-card{
    grid-template-columns:76px minmax(0,1fr);
  }

  .paper-doll-frame-combat{
    width:76px;
    max-width:76px;
  }

  .paper-doll-frame-combat .paper-doll-scene{
    min-height:116px;
  }

  .location-actions{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin-top:10px;
    max-width:100%;
  }

  .location-actions button{
    flex:1 1 100%;
  }

  .world-scene,
  .location-stage,
  .road-stop-stage,
  .town-service-hero{
    min-height:260px;
  }
}

@media(prefers-reduced-motion:reduce){
  .top-status-portrait .paper-doll-avatar,
  .top-status-portrait .paper-doll-generated,
  .paper-doll-frame-hud .paper-doll-avatar,
  .paper-doll-frame-hud .paper-doll-generated{
    animation:none !important;
  }
}

/* v29 final polish: stable framed portraits and weightier combat feedback. */
#topStats{
  grid-template-columns:94px minmax(0,1fr);
  min-height:112px;
}

.top-status-portrait{
  width:92px;
  min-width:92px;
  min-height:104px;
  padding:5px;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.top-status-portrait .paper-doll-frame{
  width:70px;
  max-width:70px;
  height:92px;
  margin:0 auto;
}

.top-status-portrait .paper-doll-scene{
  min-height:92px;
  height:92px;
  aspect-ratio:auto;
}

.top-status-portrait .paper-doll-avatar{
  animation:paper-doll-home-portrait-idle 12s ease-in-out infinite;
  transform-origin:50% 84%;
}

.top-status-portrait .paper-doll-generated{
  --paper-doll-scale:1.24;
  --paper-doll-framed-y:7px;
  object-position:center top;
  transform:translateY(var(--paper-doll-framed-y,0)) scale(var(--paper-doll-scale));
  transform-origin:50% 70%;
  animation:paper-doll-home-portrait-light 12s ease-in-out infinite;
}

.top-status-portrait .paper-doll-scene::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.66),transparent 36%,transparent 64%,rgba(0,0,0,.66)),
    radial-gradient(ellipse at center,transparent 0 52%,rgba(0,0,0,.72) 100%),
    linear-gradient(180deg,rgba(0,0,0,.12),transparent 18%,rgba(0,0,0,.46) 100%);
}

.paper-doll-frame-hud{
  width:64px;
  max-width:64px;
}

.paper-doll-frame-hud .paper-doll-scene{
  min-height:86px;
  height:86px;
  aspect-ratio:auto;
}

.paper-doll-frame-hud .paper-doll-avatar{
  animation:paper-doll-home-portrait-idle 12s ease-in-out infinite;
}

.paper-doll-frame-hud .paper-doll-generated{
  --paper-doll-scale:1.18;
  --paper-doll-framed-y:5px;
  object-position:center top;
  transform:translateY(var(--paper-doll-framed-y,0)) scale(var(--paper-doll-scale));
  transform-origin:50% 70%;
  animation:paper-doll-home-portrait-light 12s ease-in-out infinite;
}

.combat-shell.combat-impact{
  animation:combat-impact-settle .26s cubic-bezier(.18,.85,.32,1);
}

.combat-motion-attack .paper-doll-avatar,
.combat-motion-attack .portrait-art{
  animation:combat-player-lunge-v29 .62s cubic-bezier(.17,.86,.25,1);
}

.combat-motion-enemy-attack .portrait-wrap{
  animation:combat-enemy-lunge-v29 .62s cubic-bezier(.17,.86,.25,1);
}

.combat-motion-hurt .paper-doll-frame,
.combat-motion-hurt .portrait-art,
.combat-motion-enemy-hurt .portrait-art{
  animation:combat-hurt-shake-v29 .56s cubic-bezier(.19,.86,.27,1);
}

.combat-motion-enemy-hurt .combat-card-body,
.combat-motion-hurt .combat-card-body{
  animation:combat-impact-meter-v29 .48s ease-out;
}

.damage-pop{
  top:8px;
  animation:damage-pop-v29 .86s cubic-bezier(.16,.9,.25,1) forwards;
}

.combat-slash-effect{
  height:3px;
  animation:combat-slash-v29 .52s cubic-bezier(.18,.82,.26,1) forwards;
}

@keyframes paper-doll-home-portrait-idle{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-.35px) rotate(.015deg)}
}

@keyframes paper-doll-home-portrait-light{
  0%,100%{filter:drop-shadow(0 16px 14px rgba(0,0,0,.7)) saturate(1.05) contrast(1.04) brightness(1)}
  50%{filter:drop-shadow(0 16px 14px rgba(0,0,0,.7)) saturate(1.05) contrast(1.04) brightness(1.015)}
}

@keyframes combat-impact-settle{
  0%,100%{transform:translate(0,0)}
  22%{transform:translate(-1.5px,.8px)}
  45%{transform:translate(1.2px,-.5px)}
}

@keyframes combat-player-lunge-v29{
  0%{transform:translateX(0) translateY(0) scale(1);filter:none}
  28%{transform:translateX(13px) translateY(-2px) scale(1.035) rotate(.45deg);filter:brightness(1.06) saturate(1.08)}
  48%{transform:translateX(9px) translateY(-1px) scale(1.02) rotate(.2deg)}
  100%{transform:translateX(0) translateY(0) scale(1);filter:none}
}

@keyframes combat-enemy-lunge-v29{
  0%{transform:translateX(0) scale(1);filter:none}
  30%{transform:translateX(-12px) scale(1.03) rotate(-.35deg);filter:brightness(1.06) saturate(1.06)}
  52%{transform:translateX(-7px) scale(1.018)}
  100%{transform:translateX(0) scale(1);filter:none}
}

@keyframes combat-hurt-shake-v29{
  0%,100%{transform:translateX(0);filter:none}
  12%{transform:translateX(-5px);filter:brightness(1.32) saturate(1.14)}
  27%{transform:translateX(4px)}
  43%{transform:translateX(-3px)}
  62%{transform:translateX(1px)}
}

@keyframes combat-impact-meter-v29{
  0%,100%{filter:none}
  35%{filter:brightness(1.14) saturate(1.08)}
}

@keyframes damage-pop-v29{
  0%{opacity:0;transform:translate(-50%,8px) scale(.82)}
  18%{opacity:1;transform:translate(-50%,-4px) scale(1.12)}
  42%{opacity:1;transform:translate(-50%,-10px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-34px) scale(.92)}
}

@keyframes combat-slash-v29{
  0%{opacity:0;transform:translate(-68%,-50%) rotate(-22deg) scaleX(.22)}
  28%{opacity:.95}
  54%{opacity:.72;transform:translate(-50%,-50%) rotate(-22deg) scaleX(1)}
  100%{opacity:0;transform:translate(-35%,-50%) rotate(-22deg) scaleX(1.16)}
}

@media(max-width:700px){
  #topStats{
    grid-template-columns:84px minmax(0,1fr);
    min-height:104px;
  }

  .top-status-portrait{
    width:82px;
    min-width:82px;
    min-height:96px;
  }

  .top-status-portrait .paper-doll-frame{
    width:62px;
    max-width:62px;
    height:84px;
  }

  .top-status-portrait .paper-doll-scene{
    min-height:84px;
    height:84px;
  }
}

@media(prefers-reduced-motion:reduce){
  .combat-shell.combat-impact,
  .combat-motion-attack .paper-doll-avatar,
  .combat-motion-attack .portrait-art,
  .combat-motion-enemy-attack .portrait-wrap,
  .combat-motion-hurt .paper-doll-frame,
  .combat-motion-hurt .portrait-art,
  .combat-motion-enemy-hurt .portrait-art,
  .combat-motion-enemy-hurt .combat-card-body,
  .combat-motion-hurt .combat-card-body,
  .damage-pop,
  .combat-slash-effect,
  .top-status-portrait .paper-doll-avatar,
  .top-status-portrait .paper-doll-generated,
  .paper-doll-frame-hud .paper-doll-avatar,
  .paper-doll-frame-hud .paper-doll-generated{
    animation:none !important;
  }
}

.top-status-portrait .paper-doll-avatar,
.paper-doll-frame-hud .paper-doll-avatar{
  animation:paper-doll-framed-idle 10s ease-in-out infinite;
  transform-origin:50% 82%;
}

.top-status-portrait .paper-doll-generated,
.paper-doll-frame-hud .paper-doll-generated{
  animation:paper-doll-framed-light 10s ease-in-out infinite;
  transform:translateY(var(--paper-doll-framed-y,0)) scale(var(--paper-doll-scale));
  transform-origin:50% 86%;
}

.top-status-portrait .paper-doll-scene,
.paper-doll-frame-hud .paper-doll-scene{
  background:
    radial-gradient(ellipse at 50% 18%,rgba(235,198,125,.22),transparent 38%),
    linear-gradient(180deg,#1b2528 0%,#0a0d0e 56%,#050505 100%);
}

.top-status-portrait .paper-doll-scene::before,
.paper-doll-frame-hud .paper-doll-scene::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.62),transparent 32%,transparent 68%,rgba(0,0,0,.62)),
    radial-gradient(ellipse at center,transparent 0 46%,rgba(0,0,0,.7) 100%);
}

.top-status-portrait .paper-doll-generated,
.paper-doll-frame-hud .paper-doll-generated{
  --paper-doll-scale:1.72;
  --paper-doll-framed-y:20px;
  object-position:center top;
}

.paper-doll-frame-hud .paper-doll-gear-badge,
.top-status-portrait .paper-doll-gear-badge{
  display:none;
}

.top-status-portrait .paper-doll-generated-stack,
.paper-doll-frame-hud .paper-doll-generated-stack,
.top-status-portrait .paper-doll-motion-body,
.paper-doll-frame-hud .paper-doll-motion-body,
.top-status-portrait .paper-doll-gear-badges,
.paper-doll-frame-hud .paper-doll-gear-badges{
  animation:none;
}

.paper-doll-frame-compact:not(.paper-doll-frame-combat) .paper-doll-avatar{
  animation:paper-doll-framed-idle 9.5s ease-in-out infinite;
}

body[data-paper-doll-motion="off"] .top-status-portrait .paper-doll-avatar,
body[data-paper-doll-motion="off"] .top-status-portrait .paper-doll-generated,
body[data-paper-doll-motion="off"] .paper-doll-frame-hud .paper-doll-avatar,
body[data-paper-doll-motion="off"] .paper-doll-frame-hud .paper-doll-generated,
body[data-paper-doll-motion="off"] .paper-doll-frame-compact .paper-doll-avatar{
  animation:none !important;
}

.combat-motion-attack .paper-doll-avatar,
.combat-motion-attack .portrait-art{
  animation:combat-player-lunge .44s ease-out;
}

.combat-motion-enemy-attack .portrait-wrap{
  animation:combat-enemy-lunge .44s ease-out;
}

.combat-motion-hurt .paper-doll-frame,
.combat-motion-hurt .portrait-art,
.combat-motion-enemy-hurt .portrait-art{
  animation:combat-hurt-shake .42s ease-out;
}

.combat-motion-hurt .bar:first-of-type,
.combat-motion-enemy-hurt .bar:first-of-type{
  box-shadow:0 0 12px rgba(214,74,74,.35);
}

.combat-motion-brace .paper-doll-frame,
.combat-motion-brace .portrait-art{
  animation:combat-brace .45s ease-out;
}

.combat-motion-cast .paper-doll-frame,
.combat-motion-cast .portrait-art{
  animation:combat-cast-pulse .48s ease-out;
}

.combat-motion-defeated{
  filter:saturate(.55) brightness(.72);
  opacity:.72;
}

.combat-slash-effect{
  position:absolute;
  left:50%;
  top:45%;
  z-index:6;
  width:72%;
  height:2px;
  transform:translate(-50%,-50%) rotate(-22deg);
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,231,167,.9),rgba(180,73,45,.48),transparent);
  box-shadow:0 0 13px rgba(255,176,91,.24);
  animation:combat-slash .38s ease-out forwards;
  pointer-events:none;
}

.enemy-pose-frame{
  position:relative;
  isolation:isolate;
  width:100%;
  height:100%;
  min-height:132px;
  overflow:hidden;
  border:1px solid rgba(222,189,112,.34);
  border-radius:7px;
  background:
    radial-gradient(ellipse at 50% 20%,rgba(235,198,125,.16),transparent 36%),
    linear-gradient(180deg,#171f20 0%,#090b0b 56%,#040404 100%);
  box-shadow:inset 0 0 0 1px rgba(255,246,210,.08),inset 0 -28px 40px rgba(0,0,0,.46),0 10px 24px rgba(0,0,0,.44);
  pointer-events:none;
}

.enemy-pose-art{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:-3%;
  width:126%;
  height:126%;
  object-fit:contain;
  object-position:center bottom;
  transform:translateX(-50%);
  transform-origin:50% 84%;
  filter:drop-shadow(0 16px 13px rgba(0,0,0,.68)) saturate(1.04) contrast(1.04);
  animation:enemy-pose-breathe 7.5s ease-in-out infinite;
  pointer-events:none;
  user-select:none;
}

.enemy-pose-wolf .enemy-pose-art{
  width:136%;
  height:136%;
  bottom:-7%;
}

.enemy-pose-cultist .enemy-pose-art,
.enemy-pose-corrupted_knight .enemy-pose-art{
  width:130%;
  height:130%;
}

.enemy-pose-state-attack .enemy-pose-art{
  width:140%;
  height:140%;
}

.enemy-pose-state-defeated .enemy-pose-art{
  width:134%;
  height:134%;
  bottom:-12%;
  opacity:.76;
  filter:drop-shadow(0 9px 9px rgba(0,0,0,.72)) saturate(.82) brightness(.8);
  animation:none;
}

.enemy-pose-ground,
.enemy-pose-glow,
.enemy-pose-vignette,
.enemy-pose-frame-line{
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
}

.enemy-pose-ground{
  z-index:1;
  inset:auto 10% 3% 10%;
  height:19%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.62),transparent 66%);
  filter:blur(2px);
}

.enemy-pose-glow{
  z-index:3;
  inset:auto -16% -14% -16%;
  height:42%;
  opacity:.74;
  background:radial-gradient(ellipse at center,rgba(240,200,91,.16),transparent 64%);
}

.enemy-pose-frame[data-tone="bone"] .enemy-pose-glow{
  background:radial-gradient(ellipse at center,rgba(220,213,184,.22),transparent 64%);
}

.enemy-pose-frame[data-tone="beast"] .enemy-pose-glow{
  background:radial-gradient(ellipse at center,rgba(91,114,119,.28),transparent 64%);
}

.enemy-pose-frame[data-tone="rust"] .enemy-pose-glow{
  background:radial-gradient(ellipse at center,rgba(154,87,45,.32),transparent 64%);
}

.enemy-pose-frame[data-tone="violet"] .enemy-pose-glow{
  background:radial-gradient(ellipse at center,rgba(166,70,194,.34),transparent 64%);
}

.enemy-pose-frame[data-tone="cold"] .enemy-pose-glow{
  background:radial-gradient(ellipse at center,rgba(104,161,211,.3),rgba(170,34,34,.12) 46%,transparent 66%);
}

/* v42 environmental combat framing: keep turn UI stable while actors sit inside the battleback. */
.combat-backdrop.backdrop-environmental.has-combat-art{
  background-size:cover;
  background-position:center 54%;
  filter:saturate(.98) contrast(1.12) brightness(.82);
  transform:scale(1.018);
  animation:combat-environment-drift 28s ease-in-out infinite;
}

.combat-backdrop.backdrop-environmental.has-combat-art::before{
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.22) 38%,rgba(0,0,0,.76)),
    linear-gradient(90deg,rgba(0,0,0,.55),transparent 28%,transparent 72%,rgba(0,0,0,.58)),
    radial-gradient(ellipse at 50% 62%,transparent 0 42%,rgba(0,0,0,.62) 100%);
}

.combat-backdrop.backdrop-environmental.has-combat-art::after{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7px),
    radial-gradient(ellipse at 50% 78%,rgba(210,206,188,.08),transparent 44%);
  opacity:.55;
}

.combat-backdrop.backdrop-environmental .scene-depth{
  background:
    linear-gradient(90deg,rgba(0,0,0,.58),transparent 18%,transparent 82%,rgba(0,0,0,.6)),
    radial-gradient(ellipse at 50% 86%,rgba(0,0,0,.46),transparent 42%);
}

.combat-backdrop.backdrop-environmental .scene-fog{
  opacity:.86;
  bottom:-4%;
  height:42%;
  filter:blur(12px);
  background:
    radial-gradient(ellipse at 22% 72%,rgba(222,216,197,.18),transparent 48%),
    radial-gradient(ellipse at 72% 62%,rgba(166,177,180,.14),transparent 45%),
    linear-gradient(90deg,transparent,rgba(222,216,197,.11),transparent);
  animation:combat-fog-drift 22s ease-in-out infinite;
}

.combat-backdrop.backdrop-environmental .scene-fog-b{
  animation-duration:31s;
  opacity:.48;
  transform:translateX(-8%);
}

.combat-backdrop.backdrop-environmental .scene-weather{
  opacity:.32;
  background:
    radial-gradient(circle at 14% 68%,rgba(255,210,130,.42) 0 1px,transparent 2px),
    radial-gradient(circle at 42% 42%,rgba(210,220,225,.28) 0 1px,transparent 2px),
    radial-gradient(circle at 78% 58%,rgba(255,210,130,.32) 0 1px,transparent 2px);
  animation:combat-embers-rise 8.5s linear infinite;
}

.combat-backdrop[data-mood="grave-fog"].backdrop-environmental .scene-light{
  background:radial-gradient(circle at 55% 18%,rgba(176,205,231,.32),transparent 42%);
}

.combat-backdrop[data-mood="deep-woods"].backdrop-environmental .scene-light,
.combat-backdrop[data-mood="road-fog"].backdrop-environmental .scene-light{
  background:radial-gradient(circle at 58% 32%,rgba(213,191,143,.18),transparent 48%);
}

.combat-stage[data-combat-viewport="stable"]{
  grid-template-columns:minmax(230px,.82fr) minmax(260px,1fr);
  gap:clamp(10px,2vw,18px);
  align-items:end;
  padding:clamp(10px,2vw,18px);
  background:
    linear-gradient(180deg,rgba(8,12,13,.28),rgba(3,5,6,.5)),
    radial-gradient(ellipse at 50% 86%,rgba(0,0,0,.42),transparent 52%);
  border-color:rgba(203,164,91,.36);
  box-shadow:inset 0 0 0 1px rgba(255,232,170,.05),inset 0 -60px 90px rgba(0,0,0,.32),0 18px 42px rgba(0,0,0,.36);
}

.combat-stage[data-combat-viewport="stable"]::before{
  content:"";
  position:absolute;
  left:4%;
  right:4%;
  bottom:clamp(18px,5vh,46px);
  height:28%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 24% 62%,rgba(0,0,0,.46),transparent 42%),
    radial-gradient(ellipse at 73% 58%,rgba(0,0,0,.5),transparent 45%);
  filter:blur(8px);
  opacity:.8;
}

.combat-area{
  align-self:end;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.combat-area > h2{
  width:max-content;
  max-width:100%;
  padding:4px 9px;
  margin:0 0 7px;
  border:1px solid rgba(226,185,98,.26);
  border-radius:999px;
  background:rgba(4,6,7,.42);
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  backdrop-filter:blur(2px);
}

.combat-area > h2::after{
  display:none;
}

.combat-party-grid,
.combat-enemy-grid{
  align-items:end;
}

.combat-card{
  grid-template-columns:minmax(86px,112px) minmax(0,1fr);
  align-items:end;
  border-color:rgba(226,185,98,.26);
  background:
    linear-gradient(180deg,rgba(7,10,11,.18),rgba(2,3,4,.58)),
    radial-gradient(ellipse at 48% 76%,rgba(0,0,0,.42),transparent 52%);
  box-shadow:0 18px 28px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,232,170,.04);
  backdrop-filter:blur(1px);
}

.unit.combat-card,
.enemy.combat-card{
  background:
    linear-gradient(180deg,rgba(8,11,12,.2),rgba(3,4,5,.58)),
    radial-gradient(ellipse at 48% 82%,rgba(0,0,0,.48),transparent 55%);
}

.combat-card::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),transparent 30%,rgba(0,0,0,.28)),
    radial-gradient(ellipse at 50% 92%,rgba(0,0,0,.52),transparent 48%);
  opacity:.78;
}

.combat-card.target{
  border-color:#f0c85b;
  box-shadow:0 0 0 1px rgba(240,200,91,.58),0 0 26px rgba(240,200,91,.25),0 18px 34px rgba(0,0,0,.34);
}

.portrait-wrap{
  align-self:end;
}

.portrait-art,
.enemy-pose-frame,
.paper-doll-frame-combat{
  background-color:rgba(3,5,6,.26);
  border-color:rgba(226,185,98,.24);
  box-shadow:inset 0 0 0 1px rgba(255,246,210,.06),inset 0 -24px 34px rgba(0,0,0,.34),0 18px 22px rgba(0,0,0,.32);
}

.enemy-pose-frame{
  min-height:152px;
}

.enemy-pose-art{
  width:138%;
  height:138%;
}

.combat-card-body{
  align-self:end;
  padding:7px;
  border:1px solid rgba(226,185,98,.18);
  border-radius:7px;
  background:linear-gradient(180deg,rgba(4,6,7,.58),rgba(2,3,4,.72));
  box-shadow:0 10px 22px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(2px);
}

.combat-header,
.combat-actions{
  background:linear-gradient(180deg,rgba(6,8,9,.76),rgba(2,3,4,.9));
  border-color:rgba(203,164,91,.38);
}

@keyframes combat-environment-drift{
  0%,100%{transform:scale(1.018) translate3d(0,0,0)}
  50%{transform:scale(1.032) translate3d(-.35%,.15%,0)}
}

@media(max-width:700px){
  .combat-stage[data-combat-viewport="stable"]{
    grid-template-columns:1fr;
    min-height:clamp(420px,66vh,680px);
    padding:10px;
  }

  .combat-card{
    grid-template-columns:82px minmax(0,1fr);
  }

  .enemy-pose-frame{
    min-height:116px;
  }

  .combat-backdrop.backdrop-environmental.has-combat-art{
    background-position:center top;
  }
}

.enemy-pose-vignette{
  z-index:4;
  background:
    radial-gradient(circle at 50% 30%,transparent 0 38%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.72) 100%),
    linear-gradient(180deg,rgba(0,0,0,.02),transparent 42%,rgba(0,0,0,.48));
}

.enemy-pose-frame-line{
  z-index:5;
  border-radius:7px;
  border:1px solid rgba(255,232,170,.18);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.45),inset 0 0 18px rgba(255,232,170,.08);
}

.combat-motion-enemy-attack .enemy-pose-art{
  animation:combat-enemy-pose-lunge .44s ease-out;
}

.combat-motion-enemy-hurt .enemy-pose-art{
  animation:combat-enemy-pose-hurt .42s ease-out;
}

@keyframes enemy-pose-breathe{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  50%{transform:translateX(-50%) translateY(-2px) scale(1.012)}
}

@keyframes combat-enemy-pose-lunge{
  0%{transform:translateX(-50%) translateY(0) scale(1);filter:drop-shadow(0 16px 13px rgba(0,0,0,.68)) saturate(1.04) contrast(1.04)}
  42%{transform:translateX(calc(-50% - 10px)) translateY(-2px) scale(1.035) rotate(-.35deg);filter:drop-shadow(0 18px 14px rgba(0,0,0,.72)) brightness(1.08) saturate(1.1)}
  100%{transform:translateX(-50%) translateY(0) scale(1);filter:drop-shadow(0 16px 13px rgba(0,0,0,.68)) saturate(1.04) contrast(1.04)}
}

@keyframes combat-enemy-pose-hurt{
  0%,100%{transform:translateX(-50%);filter:drop-shadow(0 16px 13px rgba(0,0,0,.68)) saturate(1.04) contrast(1.04)}
  18%{transform:translateX(calc(-50% - 4px));filter:drop-shadow(0 16px 13px rgba(0,0,0,.68)) brightness(1.28) saturate(1.14)}
  36%{transform:translateX(calc(-50% + 4px))}
  58%{transform:translateX(calc(-50% - 2px))}
}

@keyframes paper-doll-preview-idle{
  0%,100%{transform:translateY(0) rotate(-.45deg)}
  50%{transform:translateY(-5px) rotate(.45deg)}
}

@keyframes paper-doll-preview-hud{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-1.6px) scale(1.012)}
}

@keyframes paper-doll-preview-body{
  0%,100%{transform:translateY(0) scale(var(--paper-doll-scale,1))}
  50%{transform:translateY(-6px) rotate(.4deg) scale(var(--paper-doll-scale,1))}
}

@keyframes paper-doll-preview-gear{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2.4px)}
}

@keyframes paper-doll-preview-weapon{
  0%,100%{transform:translateY(0) rotate(-.8deg)}
  50%{transform:translateY(-3.4px) rotate(1.25deg)}
}

@keyframes paper-doll-preview-offhand{
  0%,100%{transform:translateY(0) rotate(.55deg)}
  50%{transform:translateY(-2.8px) rotate(-.9deg)}
}

@keyframes paper-doll-preview-shadow{
  0%,100%{opacity:.86;transform:scaleX(1)}
  50%{opacity:.45;transform:scaleX(.82)}
}

@keyframes combat-player-lunge{
  0%{transform:translateX(0) translateY(0) scale(1)}
  42%{transform:translateX(10px) translateY(-2px) scale(1.026) rotate(.45deg)}
  100%{transform:translateX(0) translateY(0) scale(1)}
}

@keyframes combat-enemy-lunge{
  0%{transform:translateX(0) scale(1)}
  42%{transform:translateX(-10px) scale(1.026) rotate(-.4deg)}
  100%{transform:translateX(0) scale(1)}
}

@keyframes combat-hurt-shake{
  0%,100%{transform:translateX(0);filter:none}
  18%{transform:translateX(-4px);filter:brightness(1.25) saturate(1.12)}
  36%{transform:translateX(4px)}
  58%{transform:translateX(-2px)}
}

@keyframes combat-brace{
  0%,100%{transform:scale(1);filter:none}
  45%{transform:scale(.985);filter:brightness(1.08) saturate(1.05)}
}

@keyframes combat-cast-pulse{
  0%,100%{filter:none}
  50%{filter:brightness(1.22) saturate(1.15) drop-shadow(0 0 10px rgba(240,200,91,.2))}
}

@keyframes combat-slash{
  0%{opacity:0;transform:translate(-62%,-50%) rotate(-22deg) scaleX(.32)}
  35%{opacity:.9}
  100%{opacity:0;transform:translate(-42%,-50%) rotate(-22deg) scaleX(1.12)}
}

@media(prefers-reduced-motion:reduce){
  .scene-ambient-effect,
  .scene-anchor,
  .scene-anchor-presence,
  .scene-character-presence,
  .paper-doll-avatar,
  .paper-doll-generated-stack,
  .paper-doll-generated,
  .paper-doll-gear-badges,
  .paper-doll-gear-badge,
  .paper-doll-shadow,
  .paper-doll-motion-body,
  .paper-doll-motion-armor,
  .paper-doll-motion-head,
  .paper-doll-motion-weapon,
  .paper-doll-motion-offhand,
  .paper-doll-motion-cape,
  .paper-doll-motion-glow,
  .combat-motion-attack .paper-doll-avatar,
  .combat-motion-attack .portrait-art,
  .combat-motion-enemy-attack .portrait-wrap,
  .combat-motion-hurt .paper-doll-frame,
  .combat-motion-hurt .portrait-art,
  .combat-motion-enemy-hurt .portrait-art,
  .combat-motion-brace .paper-doll-frame,
  .combat-motion-brace .portrait-art,
  .combat-motion-cast .paper-doll-frame,
  .combat-motion-cast .portrait-art,
  .combat-slash-effect,
  .enemy-pose-art,
  .combat-motion-enemy-attack .enemy-pose-art,
  .combat-motion-enemy-hurt .enemy-pose-art,
  .paper-doll-motion-breathe .paper-doll-layer-base,
  .paper-doll-motion-breathe .paper-doll-layer-armor,
  .paper-doll-motion-breathe .paper-doll-layer-helmet{
    animation:none !important;
  }
  .scene-ambient-effect[data-reduced-motion="hide"]{
    display:none;
  }
  .scene-ambient-effect{
    opacity:calc(var(--effect-opacity,.24) * .45);
  }
}

body[data-paper-doll-motion="off"] .paper-doll-avatar,
body[data-paper-doll-motion="off"] .paper-doll-generated,
body[data-paper-doll-motion="off"] .paper-doll-generated-stack,
body[data-paper-doll-motion="off"] .paper-doll-gear-badges,
body[data-paper-doll-motion="off"] .paper-doll-gear-badge,
body[data-paper-doll-motion="off"] .paper-doll-shadow,
body[data-paper-doll-motion="off"] .paper-doll-motion-body,
body[data-paper-doll-motion="off"] .paper-doll-motion-armor,
body[data-paper-doll-motion="off"] .paper-doll-motion-head,
body[data-paper-doll-motion="off"] .paper-doll-motion-weapon,
body[data-paper-doll-motion="off"] .paper-doll-motion-offhand,
body[data-paper-doll-motion="off"] .paper-doll-motion-cape,
body[data-paper-doll-motion="off"] .paper-doll-motion-glow{
  animation:none !important;
}

/* v45 cascade tail lock: this block must remain last for scene combat. */
.combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"]{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  min-height:clamp(520px,68vh,760px) !important;
  padding:clamp(16px,3vw,34px) !important;
  overflow:hidden !important;
  border:1px solid rgba(211,166,82,.36) !important;
  border-image-source:none !important;
  background:linear-gradient(180deg,rgba(3,4,5,.08),rgba(2,3,4,.2) 42%,rgba(0,0,0,.58)),radial-gradient(ellipse at 50% 84%,rgba(0,0,0,.22),rgba(0,0,0,.68) 78%),var(--combat-stage-art,none) center 56%/cover no-repeat !important;
  box-shadow:inset 0 0 0 1px rgba(255,232,170,.04),inset 0 -120px 140px rgba(0,0,0,.46),0 22px 54px rgba(0,0,0,.46) !important;
}

.combat-battlefield .combat-card,
.combat-battlefield .unit.combat-card,
.combat-battlefield .enemy.combat-card{
  display:block !important;
  width:min(100%,clamp(220px,28vw,330px)) !important;
  min-height:clamp(340px,48vh,520px) !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.combat-battlefield .paper-doll-frame-combat,
.combat-battlefield .enemy-pose-frame,
.combat-battlefield .portrait-art{
  width:100% !important;
  max-width:none !important;
  height:clamp(280px,42vh,440px) !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.combat-battlefield .enemy .portrait-wrap{
  height:clamp(250px,36vh,390px) !important;
  min-height:clamp(250px,36vh,390px) !important;
  bottom:62px !important;
}

.combat-battlefield .enemy-pose-frame{
  height:100% !important;
}

.combat-battlefield .enemy-pose-art{
  width:108% !important;
  height:108% !important;
  bottom:-1% !important;
}

.combat-battlefield .enemy-pose-wolf .enemy-pose-art{
  width:126% !important;
  height:126% !important;
}

@media(max-width:700px){
  .combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"]{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows:1fr !important;
    gap:8px !important;
    min-height:560px !important;
  }

  .combat-battlefield .combat-area{
    min-height:500px !important;
  }

  .combat-battlefield .combat-card,
  .combat-battlefield .unit.combat-card,
  .combat-battlefield .enemy.combat-card{
    width:100% !important;
    min-height:500px !important;
  }

  .combat-battlefield .portrait-wrap,
  .combat-battlefield .paper-doll-frame-combat,
  .combat-battlefield .portrait-art{
    height:230px !important;
    min-height:230px !important;
  }

  .combat-battlefield .enemy .portrait-wrap,
  .combat-battlefield .enemy-pose-frame{
    height:214px !important;
    min-height:214px !important;
    bottom:150px !important;
  }

  .combat-battlefield .unit .portrait-wrap{
    bottom:150px !important;
  }

  .combat-battlefield .enemy-pose-art{
    width:104% !important;
    height:104% !important;
  }

  .combat-battlefield .combat-card-body{
    width:min(100%,154px) !important;
    transform:none !important;
  }

  .combat-battlefield .combat-area > h2{
    display:none !important;
  }

  .combat-battlefield .unit .combat-card-body{
    left:0 !important;
    right:auto !important;
  }

  .combat-battlefield .enemy .combat-card-body{
    left:auto !important;
    right:0 !important;
  }
}

/* v46 stabilization and living-painting atmosphere. */
.combat-shell.combat-impact,
.combat-shell.combat-impact .combat-battlefield,
.combat-shell.combat-impact .combat-stage[data-combat-viewport="stable"]{
  animation:none !important;
  transform:none !important;
}

.combat-battlefield{
  animation:none !important;
}

.combat-battlefield::before{
  animation:combat-v46-haze-breathe 18s ease-in-out infinite !important;
}

.combat-battlefield::after{
  animation:combat-v46-ground-haze 14s ease-in-out infinite !important;
}

.combat-battlefield .combat-atmosphere-layer{
  mix-blend-mode:screen;
}

.combat-battlefield .combat-atmosphere-layer::before,
.combat-battlefield .combat-atmosphere-layer::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.combat-battlefield .combat-atmosphere-layer::before{
  left:-8%;
  right:-8%;
  top:2%;
  height:48%;
  opacity:.17;
  background:
    linear-gradient(105deg,transparent 0 28%,rgba(235,220,178,.2) 36%,transparent 48%),
    linear-gradient(112deg,transparent 0 58%,rgba(175,190,180,.14) 66%,transparent 78%);
  filter:blur(4px);
  animation:combat-v46-light-rays 22s ease-in-out infinite;
}

.combat-battlefield .combat-atmosphere-layer::after{
  left:-18%;
  right:-18%;
  bottom:17%;
  height:22%;
  opacity:.42;
  background:
    radial-gradient(ellipse at 24% 50%,rgba(219,215,196,.2),transparent 54%),
    radial-gradient(ellipse at 70% 58%,rgba(130,145,142,.16),transparent 54%),
    linear-gradient(90deg,transparent,rgba(221,214,195,.13),transparent);
  filter:blur(13px);
  animation:combat-v46-ankle-fog 24s ease-in-out infinite;
}

.combat-battlefield .combat-fog{
  animation:combat-fog-drift-v45 34s ease-in-out infinite !important;
}

.combat-battlefield .combat-embers{
  opacity:.22 !important;
  animation:combat-v46-particles 13s linear infinite !important;
}

.combat-battlefield .portrait-wrap{
  animation:combat-v46-actor-idle 7.5s ease-in-out infinite;
}

.combat-battlefield .paper-doll-generated,
.combat-battlefield .enemy-pose-art{
  filter:drop-shadow(0 24px 15px rgba(0,0,0,.78)) saturate(.96) contrast(1.07) brightness(.93) sepia(.05) !important;
}

.combat-battlefield .paper-doll-generated{
  animation:combat-v46-player-breathe 6.8s ease-in-out infinite !important;
}

.combat-battlefield .enemy-pose-art{
  animation:combat-v46-enemy-breathe 7.2s ease-in-out infinite !important;
}

.combat-battlefield .enemy-pose-wolf .enemy-pose-art{
  animation:combat-v46-wolf-idle 5.8s ease-in-out infinite !important;
}

.combat-battlefield .enemy-pose-glow{
  animation:combat-v46-enemy-glow 4.8s ease-in-out infinite;
}

.combat-battlefield .combat-card::before{
  animation:combat-v46-contact-shadow 7.5s ease-in-out infinite;
}

.combat-battlefield .combat-card-body{
  width:min(88%,230px) !important;
  padding:6px 7px !important;
  background:linear-gradient(180deg,rgba(4,6,7,.58),rgba(2,3,4,.74)) !important;
  border-color:rgba(232,199,132,.18) !important;
}

.combat-battlefield .combat-name b{
  font-size:12px !important;
}

.combat-battlefield .combat-name span,
.combat-battlefield .meter-line,
.combat-battlefield .combat-card-body .pill{
  font-size:10px !important;
}

.combat-battlefield .bar{
  height:8px !important;
}

.combat-battlefield .combat-card-body button{
  min-height:28px !important;
  min-width:64px !important;
  padding:3px 7px !important;
  background:linear-gradient(180deg,rgba(54,42,24,.82),rgba(19,13,8,.88)) !important;
}

.combat-battlefield .damage-pop{
  left:50% !important;
  top:18% !important;
  z-index:20 !important;
  pointer-events:none !important;
  animation:damage-pop-v46 .78s cubic-bezier(.18,.82,.26,1) forwards !important;
}

.combat-battlefield .combat-motion-attack .portrait-wrap,
.combat-battlefield .combat-motion-enemy-attack .portrait-wrap{
  animation:combat-v46-actor-strike .48s ease-out !important;
}

.combat-battlefield .combat-motion-hurt .portrait-wrap,
.combat-battlefield .combat-motion-enemy-hurt .portrait-wrap{
  animation:combat-v46-actor-hurt .38s ease-out !important;
}

.combat-battlefield:has(.combat-motion-enemy-hurt),
.combat-battlefield:has(.combat-motion-hurt){
  filter:brightness(1.035);
}

@keyframes combat-v46-haze-breathe{
  0%,100%{opacity:1}
  50%{opacity:.86}
}

@keyframes combat-v46-ground-haze{
  0%,100%{opacity:.84;transform:translateY(0)}
  50%{opacity:.96;transform:translateY(-1.5%)}
}

@keyframes combat-v46-light-rays{
  0%,100%{transform:translateX(-2%);opacity:.12}
  50%{transform:translateX(3%);opacity:.2}
}

@keyframes combat-v46-ankle-fog{
  0%,100%{transform:translateX(-4%);opacity:.35}
  50%{transform:translateX(5%);opacity:.5}
}

@keyframes combat-v46-particles{
  0%{transform:translateY(4%)}
  100%{transform:translateY(-8%)}
}

@keyframes combat-v46-actor-idle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}

@keyframes combat-v46-player-breathe{
  0%,100%{transform:scale(var(--paper-doll-scale,1.04)) translateY(0)}
  50%{transform:scale(calc(var(--paper-doll-scale,1.04) * 1.006)) translateY(-2px)}
}

@keyframes combat-v46-enemy-breathe{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  50%{transform:translateX(-50%) translateY(-2px) scale(1.006)}
}

@keyframes combat-v46-wolf-idle{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  40%{transform:translateX(-50%) translateY(-1px) scale(1.006) rotate(-.25deg)}
  70%{transform:translateX(-50%) translateY(0) scale(1.003) rotate(.18deg)}
}

@keyframes combat-v46-enemy-glow{
  0%,100%{opacity:.28}
  50%{opacity:.46}
}

@keyframes combat-v46-contact-shadow{
  0%,100%{opacity:.96;transform:scaleX(1)}
  50%{opacity:.82;transform:scaleX(.94)}
}

@keyframes combat-v46-actor-strike{
  0%,100%{transform:translateY(0)}
  42%{transform:translateY(-3px) translateX(8px)}
}

.enemy.combat-motion-enemy-attack .portrait-wrap{
  animation-name:combat-v46-enemy-strike !important;
}

@keyframes combat-v46-enemy-strike{
  0%,100%{transform:translateY(0)}
  42%{transform:translateY(-3px) translateX(-8px)}
}

@keyframes combat-v46-actor-hurt{
  0%,100%{transform:translateX(0)}
  24%{transform:translateX(-3px);filter:brightness(1.16)}
  48%{transform:translateX(3px)}
}

@keyframes damage-pop-v46{
  0%{opacity:0;transform:translate(-50%,4px) scale(.9)}
  20%{opacity:1;transform:translate(-50%,-2px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-28px) scale(.98)}
}

@media(max-width:700px){
  .combat-battlefield .combat-card-body{
    width:min(100%,148px) !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"]{
    min-height:420px !important;
    padding:8px 12px !important;
  }

  .combat-battlefield .combat-area{
    min-height:380px !important;
  }

  .combat-battlefield .combat-card,
  .combat-battlefield .unit.combat-card,
  .combat-battlefield .enemy.combat-card{
    min-height:380px !important;
  }

  .combat-battlefield .portrait-wrap,
  .combat-battlefield .paper-doll-frame-combat,
  .combat-battlefield .enemy-pose-frame,
  .combat-battlefield .portrait-art{
    height:240px !important;
  }

  .combat-battlefield .combat-area > h2{
    display:none !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .combat-battlefield::before,
  .combat-battlefield::after,
  .combat-battlefield .combat-atmosphere-layer::before,
  .combat-battlefield .combat-atmosphere-layer::after,
  .combat-battlefield .combat-fog,
  .combat-battlefield .combat-embers,
  .combat-battlefield .combat-light-sweep,
  .combat-battlefield .portrait-wrap,
  .combat-battlefield .paper-doll-generated,
  .combat-battlefield .enemy-pose-art,
  .combat-battlefield .enemy-pose-glow,
  .combat-battlefield .combat-card::before{
    animation:none !important;
  }
}

/* v47 combat truth pass: keep number popups single-path and make scene UI lighter. */
.combat-battlefield .damage-pop{
  min-width:0 !important;
  padding:2px 8px !important;
  border-radius:999px !important;
  font-size:13px !important;
  line-height:1.1 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.86) !important;
}

.combat-battlefield .combat-card-body{
  width:min(210px,84%) !important;
  padding:7px 8px !important;
  border-color:rgba(214,170,82,.28) !important;
  background:linear-gradient(180deg,rgba(12,13,11,.72),rgba(4,5,5,.82)) !important;
  backdrop-filter:blur(5px) saturate(.92) !important;
}

.combat-battlefield .combat-card::before{
  left:2% !important;
  right:2% !important;
  bottom:24px !important;
  height:72px !important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.92),rgba(0,0,0,.5) 42%,rgba(0,0,0,.16) 65%,transparent 78%) !important;
  filter:blur(10px) !important;
}

.combat-battlefield .portrait-wrap::before{
  opacity:.48 !important;
}

@media(max-width:700px){
  .combat-battlefield .combat-card-body{
    width:min(100%,140px) !important;
    padding:6px 7px !important;
  }
}

/* v50 visual echo lock: one plain numeric popup, no bubble clones or glow echoes. */
.combat-battlefield .damage-pop,
.combat-battlefield .damage-popup,
.combat-battlefield .number-popup,
.combat-battlefield .combat-number{
  position:absolute !important;
  left:50% !important;
  top:18% !important;
  z-index:30 !important;
  display:inline-block !important;
  min-width:0 !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#ff5b4d !important;
  font-family:inherit !important;
  font-size:18px !important;
  font-weight:950 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  text-shadow:none !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  outline:0 !important;
  opacity:0;
  white-space:nowrap !important;
  pointer-events:none !important;
  transform:translate3d(-50%,6px,0) !important;
  animation:damage-pop-v50 .72s linear 0s 1 normal forwards !important;
  will-change:transform,opacity !important;
}

.combat-battlefield .damage-pop::before,
.combat-battlefield .damage-pop::after,
.combat-battlefield .damage-popup::before,
.combat-battlefield .damage-popup::after,
.combat-battlefield .number-popup::before,
.combat-battlefield .number-popup::after,
.combat-battlefield .combat-number::before,
.combat-battlefield .combat-number::after{
  content:none !important;
  display:none !important;
}

.combat-battlefield .damage-pop.heal,
.combat-battlefield .damage-popup.heal,
.combat-battlefield .number-popup.heal,
.combat-battlefield .combat-number.heal{
  color:#63df7a !important;
}

.combat-battlefield .damage-pop.mana,
.combat-battlefield .damage-popup.mana,
.combat-battlefield .number-popup.mana,
.combat-battlefield .combat-number.mana{
  color:#75adff !important;
}

.combat-battlefield .damage-pop.miss,
.combat-battlefield .damage-popup.miss,
.combat-battlefield .number-popup.miss,
.combat-battlefield .combat-number.miss{
  color:#e7c768 !important;
}

@keyframes damage-pop-v50{
  0%{opacity:0;transform:translate3d(-50%,6px,0)}
  14%{opacity:1;transform:translate3d(-50%,0,0)}
  72%{opacity:1;transform:translate3d(-50%,-12px,0)}
  100%{opacity:0;transform:translate3d(-50%,-20px,0)}
}

/* v51 party and multi-enemy staging foundation. Keeps v50 numeric popups untouched. */
.combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"]{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:clamp(8px,2vw,24px) !important;
  align-items:stretch !important;
  min-height:clamp(540px,70vh,780px) !important;
  padding:clamp(14px,2.6vw,30px) !important;
}

.combat-battlefield .combat-area{
  min-height:clamp(380px,54vh,610px) !important;
  overflow:visible !important;
}

.combat-battlefield .combat-party-grid,
.combat-battlefield .combat-enemy-grid{
  position:absolute !important;
  inset:34px 0 0 0 !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  pointer-events:none;
}

.combat-battlefield .combat-card.combat-actor{
  position:absolute !important;
  bottom:0 !important;
  width:clamp(198px,25vw,318px) !important;
  min-height:clamp(330px,47vh,520px) !important;
  pointer-events:auto;
  transform-origin:center bottom !important;
}

.combat-battlefield .combat-actor-hero{
  left:0 !important;
  z-index:6 !important;
}

.combat-battlefield .combat-actor-companion.combat-slot-1{
  left:28% !important;
  bottom:34px !important;
  z-index:4 !important;
  width:clamp(148px,18vw,230px) !important;
  transform:scale(.82) !important;
  opacity:.94;
}

.combat-battlefield .combat-actor-companion.combat-slot-2{
  left:10% !important;
  bottom:82px !important;
  z-index:3 !important;
  width:clamp(138px,16vw,210px) !important;
  transform:scale(.72) !important;
  opacity:.88;
}

.combat-battlefield .combat-actor-enemy.combat-slot-0{
  right:0 !important;
  z-index:6 !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1{
  right:58% !important;
  bottom:38px !important;
  z-index:4 !important;
  width:clamp(150px,18vw,235px) !important;
  transform:scale(.82) !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-2{
  right:46% !important;
  bottom:86px !important;
  z-index:3 !important;
  width:clamp(136px,16vw,212px) !important;
  transform:scale(.72) !important;
}

.combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .combat-actor-enemy.combat-slot-0{
  width:clamp(176px,22vw,276px) !important;
}

.combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .enemy-scale-large.combat-slot-0{
  width:clamp(238px,31vw,392px) !important;
}

.combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .enemy-pose-wolf .enemy-pose-art{
  width:112% !important;
  height:112% !important;
  bottom:-2% !important;
}

.combat-battlefield .enemy-scale-small.combat-slot-0{
  width:clamp(186px,23vw,292px) !important;
}

.combat-battlefield .enemy-scale-medium.combat-slot-0{
  width:clamp(210px,27vw,340px) !important;
}

.combat-battlefield .enemy-scale-large.combat-slot-0{
  right:-4% !important;
  width:clamp(270px,36vw,455px) !important;
  min-height:clamp(360px,52vh,580px) !important;
  z-index:5 !important;
}

.combat-battlefield .enemy-scale-large .portrait-wrap,
.combat-battlefield .enemy-scale-large .enemy-pose-frame{
  height:clamp(292px,45vh,480px) !important;
  min-height:clamp(292px,45vh,480px) !important;
}

.combat-battlefield .enemy-scale-small.combat-slot-1,
.combat-battlefield .enemy-scale-small.combat-slot-2{
  width:clamp(132px,15vw,204px) !important;
}

.combat-battlefield .combat-card.combat-actor::before{
  left:0 !important;
  right:0 !important;
  bottom:18px !important;
  height:82px !important;
  opacity:.96 !important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.88),rgba(0,0,0,.5) 40%,rgba(0,0,0,.16) 66%,transparent 80%) !important;
  filter:blur(12px) !important;
}

.combat-battlefield .combat-card.combat-actor::after{
  content:"" !important;
  position:absolute !important;
  left:3% !important;
  right:3% !important;
  bottom:32px !important;
  height:72px !important;
  z-index:3 !important;
  pointer-events:none !important;
  opacity:.33 !important;
  background:linear-gradient(90deg,transparent,rgba(198,196,178,.23),transparent) !important;
  filter:blur(15px) !important;
}

.combat-battlefield .combat-card-body{
  width:min(190px,78%) !important;
  padding:5px 6px !important;
  border-color:rgba(214,170,82,.2) !important;
  background:linear-gradient(180deg,rgba(7,8,7,.54),rgba(2,3,3,.68)) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter:blur(4px) saturate(.9) !important;
}

.combat-battlefield .combat-name{
  gap:4px !important;
}

.combat-battlefield .combat-name b{
  font-size:11px !important;
}

.combat-battlefield .combat-name span,
.combat-battlefield .meter-line,
.combat-battlefield .combat-card-body .pill{
  font-size:9.5px !important;
}

.combat-battlefield .combat-card-body .pill{
  padding:1px 5px !important;
}

.combat-battlefield .bar{
  height:7px !important;
  margin:3px 0 !important;
}

.combat-battlefield .combat-card-body button{
  min-height:24px !important;
  min-width:58px !important;
  margin-top:3px !important;
  padding:2px 7px !important;
  border-radius:999px !important;
  border-color:rgba(229,196,119,.34) !important;
  background:rgba(15,12,8,.58) !important;
  box-shadow:0 0 0 1px rgba(255,233,174,.04),0 5px 14px rgba(0,0,0,.28) !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-card-body,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-card-body{
  width:min(122px,76%) !important;
  padding:4px 5px !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-name b,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-name b{
  font-size:9px !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-name span,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-name span,
.combat-battlefield .combat-actor-enemy.combat-slot-1 .meter-line,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .meter-line,
.combat-battlefield .combat-actor-enemy.combat-slot-1 .pill,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .pill{
  font-size:8px !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-card-body button,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-card-body button{
  min-width:48px !important;
  min-height:21px !important;
  padding:1px 5px !important;
  font-size:8px !important;
}

.combat-battlefield .enemy.target .combat-card-body{
  border-color:rgba(240,200,91,.36) !important;
  box-shadow:0 0 12px rgba(240,200,91,.13),0 8px 18px rgba(0,0,0,.28) !important;
}

.combat-battlefield .enemy.target .portrait-wrap::after{
  inset:auto 9% 5% 9% !important;
  height:16% !important;
  border:1px solid rgba(243,211,123,.42) !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center,rgba(244,211,123,.18),transparent 68%) !important;
  box-shadow:0 0 24px rgba(240,200,91,.2) !important;
  opacity:.78 !important;
}

.combat-battlefield .combat-atmosphere-layer::before{
  opacity:.19 !important;
}

.combat-battlefield .combat-atmosphere-layer::after{
  bottom:12% !important;
  height:26% !important;
  opacity:.48 !important;
}

.combat-battlefield .combat-fog::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-14% !important;
  height:74% !important;
  opacity:.18 !important;
  background:
    linear-gradient(62deg,transparent 0 12%,rgba(18,18,16,.75) 12.5% 13.2%,transparent 14% 100%),
    linear-gradient(116deg,transparent 0 72%,rgba(14,14,13,.68) 72.4% 73.2%,transparent 74% 100%) !important;
  filter:blur(.4px) !important;
}

@media(max-width:700px){
  .combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"]{
    gap:6px !important;
    min-height:560px !important;
    padding:9px !important;
  }

  .combat-battlefield .combat-area{
    min-height:510px !important;
  }

  .combat-battlefield .combat-party-grid,
  .combat-battlefield .combat-enemy-grid{
    inset:16px 0 0 0 !important;
  }

  .combat-battlefield .combat-card.combat-actor{
    width:min(100%,156px) !important;
    min-height:500px !important;
  }

  .combat-battlefield .combat-actor-hero{
    left:0 !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-0{
    right:0 !important;
  }

  .combat-battlefield .combat-actor-companion.combat-slot-1{
    left:12% !important;
    bottom:88px !important;
    width:108px !important;
    transform:scale(.66) !important;
  }

  .combat-battlefield .combat-actor-companion.combat-slot-2{
    left:-4% !important;
    bottom:138px !important;
    width:96px !important;
    transform:scale(.58) !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-1{
    right:50% !important;
    bottom:88px !important;
    width:110px !important;
    transform:scale(.66) !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-2{
    right:42% !important;
    bottom:146px !important;
    width:92px !important;
    transform:scale(.56) !important;
  }

  .combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .combat-actor-enemy.combat-slot-0{
    width:136px !important;
  }

  .combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .enemy-pose-wolf .enemy-pose-art{
    width:102% !important;
    height:102% !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-card-body,
  .combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-card-body{
    width:68px !important;
    padding:3px 4px !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-card-body{
    left:-8px !important;
    right:auto !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-card-body{
    left:-6px !important;
    right:auto !important;
    bottom:46px !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-name b,
  .combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-name b{
    font-size:7.5px !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-name span,
  .combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-name span,
  .combat-battlefield .combat-actor-enemy.combat-slot-1 .meter-line,
  .combat-battlefield .combat-actor-enemy.combat-slot-2 .meter-line,
  .combat-battlefield .combat-actor-enemy.combat-slot-1 .pill,
  .combat-battlefield .combat-actor-enemy.combat-slot-2 .pill{
    font-size:7px !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-card-body button,
  .combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-card-body button{
    min-width:42px !important;
    min-height:18px !important;
    padding:1px 4px !important;
    font-size:7px !important;
  }

  .combat-battlefield .enemy-scale-large.combat-slot-0{
    right:-14% !important;
    width:190px !important;
  }

  .combat-battlefield .combat-card-body{
    width:min(100%,132px) !important;
    padding:5px 6px !important;
  }

  .combat-battlefield .combat-name b{
    font-size:10.5px !important;
  }

  .combat-battlefield .combat-name span,
  .combat-battlefield .meter-line,
  .combat-battlefield .combat-card-body .pill{
    font-size:9px !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"]{
    min-height:390px !important;
    padding:8px 12px !important;
  }

  .combat-battlefield .combat-area{
    min-height:360px !important;
  }

  .combat-battlefield .combat-card.combat-actor{
    width:clamp(150px,21vw,230px) !important;
    min-height:360px !important;
  }

  .combat-battlefield .combat-actor-companion.combat-slot-1,
  .combat-battlefield .combat-actor-enemy.combat-slot-1{
    bottom:24px !important;
    transform:scale(.72) !important;
  }

  .combat-battlefield .combat-actor-companion.combat-slot-2,
  .combat-battlefield .combat-actor-enemy.combat-slot-2{
    bottom:58px !important;
    transform:scale(.62) !important;
  }

  .combat-battlefield .combat-card-body{
    width:min(176px,78%) !important;
  }
}

/* v52 companion presence prototype: visible party member staged into the shared battlefield. */
.combat-battlefield .combat-party-grid:not(:has(.combat-actor-companion)) .combat-actor-hero{
  left:1% !important;
}

.combat-battlefield .combat-party-grid:has(.combat-actor-companion) .combat-actor-hero{
  left:0 !important;
  z-index:7 !important;
}

.combat-battlefield .combat-actor-companion{
  filter:saturate(.88) brightness(.82) contrast(1.04) !important;
}

.combat-battlefield .combat-actor-companion.combat-slot-1{
  left:34% !important;
  bottom:48px !important;
  z-index:4 !important;
  width:clamp(142px,17vw,218px) !important;
  min-height:clamp(292px,40vh,456px) !important;
  transform:scale(.76) !important;
}

.combat-battlefield .combat-actor-companion.combat-slot-2{
  left:18% !important;
  bottom:118px !important;
  z-index:3 !important;
  width:clamp(124px,14vw,190px) !important;
  min-height:clamp(250px,34vh,390px) !important;
  transform:scale(.64) !important;
  opacity:.78 !important;
}

.combat-battlefield .combat-actor-companion .portrait-wrap{
  bottom:58px !important;
  min-height:clamp(230px,34vh,370px) !important;
  height:clamp(230px,34vh,370px) !important;
  filter:drop-shadow(0 22px 13px rgba(0,0,0,.72)) !important;
}

.combat-battlefield .combat-actor-companion .portrait-art{
  background-color:transparent !important;
  background-image:url("./assets/portraits-atlas.png") !important;
  background-size:520% 520% !important;
  background-position:var(--portrait-x) var(--portrait-y) !important;
  background-repeat:no-repeat !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  opacity:.82 !important;
  filter:drop-shadow(0 20px 12px rgba(0,0,0,.66)) saturate(.84) brightness(.8) contrast(1.08) sepia(.05) !important;
  -webkit-mask-image:radial-gradient(ellipse at 50% 55%,#000 0 34%,rgba(0,0,0,.84) 48%,transparent 72%),linear-gradient(180deg,transparent 0%,#000 17%,#000 78%,transparent 100%);
  mask-image:radial-gradient(ellipse at 50% 55%,#000 0 34%,rgba(0,0,0,.84) 48%,transparent 72%),linear-gradient(180deg,transparent 0%,#000 17%,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  animation:combat-v52-companion-breathe 7.8s ease-in-out infinite !important;
}

.combat-battlefield .combat-actor-companion .portrait-shadow{
  background:radial-gradient(circle at 50% 30%,transparent 0 28%,rgba(0,0,0,.08) 48%,rgba(0,0,0,.42) 100%),linear-gradient(180deg,rgba(0,0,0,.04),transparent 36%,rgba(0,0,0,.34)) !important;
}

.combat-battlefield .combat-actor-companion .portrait-frame{
  display:none !important;
}

.combat-battlefield .combat-actor-companion .portrait-glow{
  height:32% !important;
  opacity:.38 !important;
  filter:blur(2px) !important;
}

.combat-battlefield .combat-actor-companion::before{
  bottom:28px !important;
  height:58px !important;
  left:8% !important;
  right:8% !important;
  opacity:.72 !important;
  filter:blur(11px) !important;
}

.combat-battlefield .combat-actor-companion::after{
  bottom:46px !important;
  height:84px !important;
  opacity:.42 !important;
  background:
    radial-gradient(ellipse at 52% 65%,rgba(205,204,185,.24),transparent 62%),
    linear-gradient(90deg,transparent,rgba(204,202,184,.18),transparent) !important;
}

.combat-battlefield .combat-actor-companion .combat-card-body{
  left:8% !important;
  right:auto !important;
  bottom:8px !important;
  width:min(128px,74%) !important;
  padding:4px 5px !important;
  border-color:rgba(172,170,140,.18) !important;
  background:linear-gradient(180deg,rgba(5,7,7,.42),rgba(1,2,2,.58)) !important;
  opacity:.86 !important;
}

.combat-battlefield .combat-actor-companion .combat-name b{
  font-size:8.5px !important;
}

.combat-battlefield .combat-actor-companion .combat-name span,
.combat-battlefield .combat-actor-companion .meter-line,
.combat-battlefield .combat-actor-companion .pill{
  font-size:7.5px !important;
}

.combat-battlefield .combat-actor-companion .bar{
  height:5px !important;
  margin:2px 0 !important;
}

.combat-battlefield .combat-motion-attack.combat-actor-companion .portrait-wrap{
  animation:combat-v52-companion-lunge .42s ease-out !important;
}

.combat-battlefield .combat-motion-attack.combat-actor-hero .portrait-wrap{
  animation:combat-v52-hero-lunge .42s ease-out !important;
}

.combat-battlefield .combat-atmosphere-layer::after{
  background:
    radial-gradient(ellipse at 26% 56%,rgba(219,215,196,.24),transparent 54%),
    radial-gradient(ellipse at 70% 58%,rgba(130,145,142,.16),transparent 54%),
    linear-gradient(90deg,transparent,rgba(221,214,195,.15),transparent) !important;
}

@keyframes combat-v52-companion-breathe{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  45%{transform:translateY(-2px) rotate(-.18deg) scale(1.004)}
  72%{transform:translateY(-1px) rotate(.12deg) scale(1.002)}
}

@keyframes combat-v52-companion-lunge{
  0%,100%{transform:translateY(0) translateX(0)}
  42%{transform:translateY(-2px) translateX(7px)}
}

@keyframes combat-v52-hero-lunge{
  0%,100%{transform:translateY(0) translateX(0)}
  42%{transform:translateY(-3px) translateX(10px)}
}

@media(max-width:700px){
  .combat-battlefield .combat-party-grid:has(.combat-actor-companion) .combat-actor-hero{
    left:0 !important;
    width:min(100%,150px) !important;
  }

  .combat-battlefield .combat-actor-companion.combat-slot-1{
    left:28% !important;
    bottom:98px !important;
    width:104px !important;
    min-height:330px !important;
    transform:scale(.58) !important;
    opacity:.86 !important;
  }

  .combat-battlefield .combat-actor-companion.combat-slot-2{
    left:3% !important;
    bottom:156px !important;
    width:86px !important;
    min-height:280px !important;
    transform:scale(.5) !important;
    opacity:.66 !important;
  }

  .combat-battlefield .combat-actor-companion .portrait-wrap,
  .combat-battlefield .combat-actor-companion .portrait-art{
    height:190px !important;
    min-height:190px !important;
  }

  .combat-battlefield .combat-actor-companion .portrait-art{
    background-size:560% 560% !important;
  }

  .combat-battlefield .combat-actor-companion .combat-card-body{
    width:62px !important;
    left:0 !important;
    bottom:56px !important;
    padding:3px 4px !important;
  }

  .combat-battlefield .combat-actor-companion .combat-name b{
    font-size:7px !important;
  }

  .combat-battlefield .combat-actor-companion .combat-name span,
  .combat-battlefield .combat-actor-companion .meter-line,
  .combat-battlefield .combat-actor-companion .pill{
    font-size:6.5px !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .combat-battlefield .combat-actor-companion.combat-slot-1{
    left:32% !important;
    bottom:38px !important;
    width:124px !important;
    transform:scale(.66) !important;
  }

  .combat-battlefield .combat-actor-companion.combat-slot-2{
    left:14% !important;
    bottom:82px !important;
    width:104px !important;
    transform:scale(.56) !important;
  }

  .combat-battlefield .combat-actor-companion .combat-card-body{
    width:82px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .combat-battlefield .combat-actor-companion .portrait-art,
  .combat-battlefield .combat-motion-attack.combat-actor-companion .portrait-wrap,
  .combat-battlefield .combat-motion-attack.combat-actor-hero .portrait-wrap{
    animation:none !important;
  }
}

/* v53 companion scene art upgrade: actor-shaped party silhouettes, not portrait cards. */
.combat-battlefield .combat-actor-companion{
  filter:saturate(.82) brightness(.76) contrast(1.08) !important;
}

.combat-battlefield .combat-actor-companion.combat-slot-1{
  left:31% !important;
  bottom:42px !important;
  width:clamp(132px,15vw,202px) !important;
  transform:scale(.78) !important;
}

.combat-battlefield .combat-actor-companion.combat-slot-2{
  left:14% !important;
  bottom:110px !important;
  width:clamp(112px,13vw,176px) !important;
  transform:scale(.62) !important;
}

.combat-battlefield .combat-actor-companion .portrait-wrap{
  bottom:42px !important;
  height:clamp(238px,34vh,386px) !important;
  min-height:clamp(238px,34vh,386px) !important;
  overflow:visible !important;
}

.combat-battlefield .combat-actor-companion .portrait-art{
  left:50% !important;
  width:74% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 auto !important;
  transform:translateX(-50%) !important;
  background-size:760% 760% !important;
  background-position:var(--portrait-x) var(--portrait-y) !important;
  opacity:.9 !important;
  overflow:visible !important;
  clip-path:polygon(47% 2%,58% 4%,64% 17%,75% 38%,69% 100%,31% 100%,24% 38%,36% 17%) !important;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 82%,transparent 100%) !important;
  mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 82%,transparent 100%) !important;
  filter:drop-shadow(0 24px 13px rgba(0,0,0,.76)) saturate(.78) brightness(.74) contrast(1.12) sepia(.08) !important;
  animation:combat-v53-companion-idle 8.2s ease-in-out infinite !important;
}

.combat-battlefield .combat-companion-scout .portrait-art{
  background-position:99% 96% !important;
  clip-path:polygon(46% 2%,58% 4%,66% 18%,78% 42%,70% 100%,30% 100%,22% 42%,35% 18%) !important;
}

.combat-battlefield .combat-companion-healer .portrait-art{
  background-position:66% 98% !important;
  clip-path:polygon(46% 2%,58% 3%,65% 18%,80% 48%,72% 100%,28% 100%,20% 48%,35% 18%) !important;
}

.combat-battlefield .combat-companion-fighter .portrait-art{
  background-position:34% 98% !important;
  clip-path:polygon(45% 2%,59% 4%,68% 20%,76% 39%,71% 100%,29% 100%,24% 39%,34% 20%) !important;
}

.combat-battlefield .combat-actor-companion .portrait-art::before{
  content:"" !important;
  position:absolute !important;
  left:-16% !important;
  right:-18% !important;
  top:16% !important;
  bottom:-2% !important;
  z-index:-1 !important;
  opacity:.72 !important;
  background:
    linear-gradient(100deg,transparent 0 24%,rgba(10,14,13,.82) 30% 42%,rgba(28,34,30,.72) 50%,rgba(8,11,11,.84) 62% 75%,transparent 82%),
    radial-gradient(ellipse at 50% 88%,rgba(189,184,160,.16),transparent 62%) !important;
  clip-path:polygon(40% 0,61% 0,78% 100%,20% 100%) !important;
  filter:blur(.2px) !important;
}

.combat-battlefield .combat-actor-companion .portrait-art::after{
  content:"" !important;
  position:absolute !important;
  left:31% !important;
  right:31% !important;
  top:11% !important;
  height:12% !important;
  z-index:2 !important;
  border-radius:48% 48% 44% 44% !important;
  opacity:.48 !important;
  background:radial-gradient(circle at 50% 34%,rgba(230,218,185,.28),rgba(82,66,47,.5) 58%,transparent 72%) !important;
  filter:blur(.4px) !important;
}

.combat-battlefield .combat-actor-companion .portrait-grain{
  opacity:.26 !important;
  mix-blend-mode:soft-light !important;
}

.combat-battlefield .combat-actor-companion .portrait-shadow{
  inset:-8% -18% -4% -18% !important;
  background:radial-gradient(ellipse at 50% 18%,transparent 0 18%,rgba(0,0,0,.1) 42%,rgba(0,0,0,.48) 100%),linear-gradient(180deg,rgba(4,7,7,.18),transparent 34%,rgba(0,0,0,.42)) !important;
}

.combat-battlefield .combat-actor-companion .portrait-glow{
  left:-28% !important;
  right:-28% !important;
  bottom:2% !important;
  height:34% !important;
  opacity:.2 !important;
  background:radial-gradient(ellipse at center,rgba(188,202,181,.32),transparent 68%) !important;
}

.combat-battlefield .combat-actor-companion::before{
  bottom:24px !important;
  height:66px !important;
  left:2% !important;
  right:2% !important;
  opacity:.88 !important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.86),rgba(0,0,0,.42) 48%,transparent 78%) !important;
}

.combat-battlefield .combat-actor-companion::after{
  left:-10% !important;
  right:-10% !important;
  bottom:38px !important;
  height:96px !important;
  opacity:.5 !important;
  background:
    radial-gradient(ellipse at 45% 74%,rgba(214,211,190,.25),transparent 58%),
    linear-gradient(90deg,transparent 0 8%,rgba(206,204,184,.18) 42%,rgba(151,164,158,.12) 58%,transparent 92%) !important;
  filter:blur(14px) !important;
}

.combat-battlefield .combat-actor-companion .combat-card-body{
  width:min(104px,66%) !important;
  bottom:4px !important;
  padding:3px 5px !important;
  border-color:rgba(174,168,124,.14) !important;
  background:linear-gradient(180deg,rgba(4,5,5,.32),rgba(1,2,2,.48)) !important;
  opacity:.74 !important;
  box-shadow:0 6px 12px rgba(0,0,0,.2) !important;
}

.combat-battlefield .combat-actor-companion .combat-name{
  gap:3px !important;
}

.combat-battlefield .combat-actor-companion .combat-name b{
  max-width:68px !important;
  font-size:7.5px !important;
}

.combat-battlefield .combat-actor-companion .combat-name span,
.combat-battlefield .combat-actor-companion .meter-line,
.combat-battlefield .combat-actor-companion .pill{
  font-size:6.8px !important;
}

.combat-battlefield .combat-actor-companion .bar{
  height:4px !important;
}

.combat-battlefield .combat-motion-attack.combat-actor-companion .portrait-wrap{
  animation:combat-v53-companion-lunge .46s ease-out !important;
}

@keyframes combat-v53-companion-idle{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(1)}
  38%{transform:translateX(-50%) translateY(-2px) rotate(-.22deg) scale(1.006)}
  70%{transform:translateX(-50%) translateY(-1px) rotate(.16deg) scale(1.002)}
}

@keyframes combat-v53-companion-lunge{
  0%,100%{transform:translateY(0) translateX(0)}
  38%{transform:translateY(-2px) translateX(8px)}
  68%{transform:translateY(0) translateX(-1px)}
}

@media(max-width:700px){
  .combat-battlefield .combat-actor-companion.combat-slot-1{
    left:30% !important;
    bottom:106px !important;
    width:96px !important;
    transform:scale(.57) !important;
  }

  .combat-battlefield .combat-actor-companion.combat-slot-2{
    left:4% !important;
    bottom:164px !important;
    width:78px !important;
    transform:scale(.49) !important;
  }

  .combat-battlefield .combat-actor-companion .portrait-wrap,
  .combat-battlefield .combat-actor-companion .portrait-art{
    height:198px !important;
    min-height:198px !important;
  }

  .combat-battlefield .combat-actor-companion .portrait-art{
    width:68% !important;
    background-size:840% 840% !important;
  }

  .combat-battlefield .combat-actor-companion .combat-card-body{
    width:52px !important;
    bottom:48px !important;
    opacity:.68 !important;
  }

  .combat-battlefield .combat-actor-companion .combat-name b{
    max-width:34px !important;
    font-size:6.5px !important;
  }

  .combat-battlefield .combat-actor-companion .combat-name span,
  .combat-battlefield .combat-actor-companion .meter-line,
  .combat-battlefield .combat-actor-companion .pill{
    font-size:6px !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .combat-battlefield .combat-actor-companion.combat-slot-1{
    left:34% !important;
    bottom:46px !important;
    width:112px !important;
    transform:scale(.63) !important;
  }

  .combat-battlefield .combat-actor-companion .portrait-art{
    background-size:780% 780% !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .combat-battlefield .combat-actor-companion .portrait-art,
  .combat-battlefield .combat-motion-attack.combat-actor-companion .portrait-wrap{
    animation:none !important;
  }
}

/* v54 multi-enemy presence prototype: staged encounter groups without changing combat logic. */
.combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .combat-actor-enemy{
  filter:saturate(.92) brightness(.9) contrast(1.08) !important;
}

.combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .combat-actor-enemy.combat-slot-0{
  right:0 !important;
  bottom:0 !important;
  width:clamp(178px,21vw,270px) !important;
  z-index:7 !important;
}

.combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .combat-actor-enemy.combat-slot-1{
  right:61% !important;
  bottom:54px !important;
  width:clamp(126px,14vw,188px) !important;
  min-height:clamp(278px,36vh,430px) !important;
  transform:scale(.78) !important;
  z-index:5 !important;
  opacity:.92 !important;
}

.combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-2) .combat-actor-enemy.combat-slot-2{
  right:34% !important;
  bottom:122px !important;
  width:clamp(108px,12vw,168px) !important;
  min-height:clamp(238px,31vh,380px) !important;
  transform:scale(.66) !important;
  z-index:4 !important;
  opacity:.84 !important;
}

.combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .enemy-scale-medium.combat-slot-0{
  width:clamp(198px,24vw,312px) !important;
}

.combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .enemy-scale-large.combat-slot-0{
  right:-5% !important;
  width:clamp(248px,32vw,410px) !important;
  z-index:6 !important;
}

.combat-battlefield .combat-enemy-grid:has(.enemy-scale-large.combat-slot-0) .combat-actor-enemy.combat-slot-1{
  right:72% !important;
  width:clamp(112px,12vw,166px) !important;
  transform:scale(.7) !important;
}

.combat-battlefield .combat-enemy-grid:has(.enemy-scale-large.combat-slot-0) .combat-actor-enemy.combat-slot-2{
  right:52% !important;
  width:clamp(98px,10vw,144px) !important;
  transform:scale(.58) !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .portrait-wrap{
  bottom:54px !important;
  height:clamp(206px,31vh,330px) !important;
  min-height:clamp(206px,31vh,330px) !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-2 .portrait-wrap{
  bottom:64px !important;
  height:clamp(178px,27vh,300px) !important;
  min-height:clamp(178px,27vh,300px) !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .enemy-pose-frame,
.combat-battlefield .combat-actor-enemy.combat-slot-1 .portrait-art{
  height:100% !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-2 .enemy-pose-frame,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .portrait-art{
  height:100% !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .enemy-pose-art{
  width:112% !important;
  height:112% !important;
  bottom:-2% !important;
  animation:combat-v54-enemy-idle-a 8.6s ease-in-out infinite !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-2 .enemy-pose-art{
  width:106% !important;
  height:106% !important;
  bottom:-1% !important;
  animation:combat-v54-enemy-idle-b 9.4s ease-in-out infinite !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-0 .enemy-pose-art{
  animation-duration:7.4s !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1::before,
.combat-battlefield .combat-actor-enemy.combat-slot-2::before{
  bottom:30px !important;
  height:56px !important;
  left:4% !important;
  right:4% !important;
  opacity:.78 !important;
  filter:blur(10px) !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1::after,
.combat-battlefield .combat-actor-enemy.combat-slot-2::after{
  bottom:44px !important;
  height:82px !important;
  opacity:.38 !important;
  background:radial-gradient(ellipse at 48% 76%,rgba(204,202,184,.22),transparent 62%),linear-gradient(90deg,transparent,rgba(185,194,184,.13),transparent) !important;
  filter:blur(13px) !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-card-body,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-card-body{
  width:min(94px,68%) !important;
  padding:3px 5px !important;
  opacity:.78 !important;
  background:linear-gradient(180deg,rgba(5,6,5,.36),rgba(1,2,2,.54)) !important;
  border-color:rgba(214,170,82,.14) !important;
  box-shadow:0 6px 14px rgba(0,0,0,.22) !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-card-body{
  right:auto !important;
  left:8% !important;
  bottom:8px !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-card-body{
  right:auto !important;
  left:6% !important;
  bottom:14px !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-name b,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-name b{
  max-width:58px !important;
  font-size:7.5px !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-name span,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-name span,
.combat-battlefield .combat-actor-enemy.combat-slot-1 .meter-line,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .meter-line,
.combat-battlefield .combat-actor-enemy.combat-slot-1 .pill,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .pill{
  font-size:6.8px !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .bar,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .bar{
  height:4px !important;
  margin:2px 0 !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-card-body button,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-card-body button{
  min-width:38px !important;
  min-height:17px !important;
  padding:1px 4px !important;
  font-size:6.8px !important;
  opacity:.86 !important;
}

.combat-battlefield .enemy.target .portrait-wrap::after{
  inset:auto 12% 4% 12% !important;
  height:14% !important;
  background:radial-gradient(ellipse at center,rgba(244,211,123,.2),transparent 72%) !important;
  box-shadow:0 0 18px rgba(240,200,91,.18) !important;
}

.combat-battlefield .combat-actor-enemy.target .combat-card-body{
  opacity:.96 !important;
}

.combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-2)::after{
  content:"" !important;
  position:absolute !important;
  left:-14% !important;
  right:-6% !important;
  bottom:18% !important;
  height:22% !important;
  z-index:5 !important;
  pointer-events:none !important;
  opacity:.18 !important;
  background:linear-gradient(92deg,transparent,rgba(211,210,192,.22),transparent) !important;
  filter:blur(18px) !important;
}

@keyframes combat-v54-enemy-idle-a{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  42%{transform:translateX(-50%) translateY(-2px) scale(1.006) rotate(.16deg)}
  72%{transform:translateX(-50%) translateY(-1px) scale(1.002) rotate(-.12deg)}
}

@keyframes combat-v54-enemy-idle-b{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  38%{transform:translateX(-50%) translateY(-1px) scale(1.004) rotate(-.2deg)}
  68%{transform:translateX(-50%) translateY(-2px) scale(1.006) rotate(.12deg)}
}

@media(max-width:700px){
  .combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .combat-actor-enemy.combat-slot-0{
    right:0 !important;
    width:126px !important;
  }

  .combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .combat-actor-enemy.combat-slot-1{
    right:54% !important;
    bottom:94px !important;
    width:80px !important;
    transform:scale(.62) !important;
  }

  .combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-2) .combat-actor-enemy.combat-slot-2{
    right:28% !important;
    bottom:158px !important;
    width:66px !important;
    transform:scale(.52) !important;
    opacity:.76 !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-1 .portrait-wrap{
    bottom:86px !important;
    height:170px !important;
    min-height:170px !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-2 .portrait-wrap{
    bottom:100px !important;
    height:142px !important;
    min-height:142px !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-card-body,
  .combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-card-body{
    width:48px !important;
    padding:2px 3px !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-card-body{
    left:-3px !important;
    bottom:52px !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-card-body{
    left:-4px !important;
    bottom:62px !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-name b,
  .combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-name b{
    max-width:32px !important;
    font-size:6px !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-name span,
  .combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-name span,
  .combat-battlefield .combat-actor-enemy.combat-slot-1 .meter-line,
  .combat-battlefield .combat-actor-enemy.combat-slot-2 .meter-line,
  .combat-battlefield .combat-actor-enemy.combat-slot-1 .pill,
  .combat-battlefield .combat-actor-enemy.combat-slot-2 .pill{
    font-size:5.8px !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-card-body button,
  .combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-card-body button{
    min-width:32px !important;
    min-height:15px !important;
    font-size:5.8px !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .combat-actor-enemy.combat-slot-0{
    width:clamp(142px,18vw,180px) !important;
  }

  .combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .combat-actor-enemy.combat-slot-1{
    right:63% !important;
    bottom:40px !important;
    width:104px !important;
    transform:scale(.68) !important;
  }

  .combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-2) .combat-actor-enemy.combat-slot-2{
    right:38% !important;
    bottom:82px !important;
    width:88px !important;
    transform:scale(.58) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .combat-battlefield .combat-actor-enemy.combat-slot-1 .enemy-pose-art,
  .combat-battlefield .combat-actor-enemy.combat-slot-2 .enemy-pose-art{
    animation:none !important;
  }
}

/* v55 unified battlefield art pipeline: shared actor grading, scale, and scene-art companions. */
.combat-battlefield{
  --actor-grade:drop-shadow(0 24px 15px rgba(0,0,0,.78)) saturate(.88) brightness(.86) contrast(1.1) sepia(.06);
  --actor-grade-secondary:drop-shadow(0 22px 13px rgba(0,0,0,.74)) saturate(.78) brightness(.74) contrast(1.12) sepia(.08);
  --actor-ground:radial-gradient(ellipse at center,rgba(0,0,0,.88),rgba(0,0,0,.46) 44%,rgba(0,0,0,.16) 66%,transparent 80%);
}

.combat-battlefield .paper-doll-generated,
.combat-battlefield .enemy-pose-art,
.combat-battlefield .companion-scene-art{
  filter:var(--actor-grade) !important;
}

.combat-battlefield .combat-actor-companion,
.combat-battlefield .combat-actor-enemy.combat-slot-1,
.combat-battlefield .combat-actor-enemy.combat-slot-2{
  filter:none !important;
}

.combat-battlefield .companion-scene-frame{
  position:absolute !important;
  inset:0 !important;
  overflow:visible !important;
  isolation:isolate !important;
}

.combat-battlefield .companion-scene-art{
  position:absolute !important;
  left:50% !important;
  bottom:-2% !important;
  width:112% !important;
  height:112% !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  transform:translateX(-50%) !important;
  transform-origin:50% 78% !important;
  opacity:.82 !important;
  mix-blend-mode:screen !important;
  animation:combat-v55-companion-scene-idle 8.4s ease-in-out infinite !important;
}

.combat-battlefield .companion-scene-scout .companion-scene-art{
  width:118% !important;
  height:118% !important;
  object-position:48% bottom !important;
}

.combat-battlefield .companion-scene-fighter .companion-scene-art,
.combat-battlefield .companion-scene-warrior .companion-scene-art{
  width:116% !important;
  height:116% !important;
}

.combat-battlefield .companion-scene-healer .companion-scene-art,
.combat-battlefield .companion-scene-cleric .companion-scene-art,
.combat-battlefield .companion-scene-mage .companion-scene-art{
  width:108% !important;
  height:108% !important;
  opacity:.78 !important;
}

.combat-battlefield .companion-scene-ground{
  position:absolute !important;
  left:10% !important;
  right:10% !important;
  bottom:4% !important;
  height:16% !important;
  z-index:-1 !important;
  border-radius:50% !important;
  background:var(--actor-ground) !important;
  filter:blur(9px) !important;
  opacity:.86 !important;
}

.combat-battlefield .companion-scene-haze{
  position:absolute !important;
  left:-12% !important;
  right:-12% !important;
  bottom:8% !important;
  height:28% !important;
  z-index:4 !important;
  background:linear-gradient(90deg,transparent,rgba(214,211,190,.2),transparent) !important;
  filter:blur(14px) !important;
  opacity:.46 !important;
  pointer-events:none !important;
}

.combat-battlefield .combat-actor-companion .portrait-wrap{
  bottom:44px !important;
  height:clamp(252px,36vh,404px) !important;
  min-height:clamp(252px,36vh,404px) !important;
}

.combat-battlefield .combat-actor-companion.combat-slot-1{
  left:30% !important;
  bottom:40px !important;
  width:clamp(128px,14vw,190px) !important;
  transform:scale(.76) !important;
  opacity:.96 !important;
}

.combat-battlefield .combat-actor-companion.combat-slot-2{
  left:11% !important;
  bottom:112px !important;
  width:clamp(110px,12vw,166px) !important;
  transform:scale(.62) !important;
  opacity:.78 !important;
}

.combat-battlefield .combat-actor-companion .combat-card-body{
  width:min(94px,62%) !important;
  bottom:4px !important;
  opacity:.66 !important;
}

.combat-battlefield .combat-card.combat-actor::before{
  background:var(--actor-ground) !important;
}

.combat-battlefield .paper-doll-ground,
.combat-battlefield .enemy-pose-ground,
.combat-battlefield .companion-scene-ground{
  mix-blend-mode:multiply !important;
}

.combat-battlefield .combat-actor-hero{
  width:clamp(212px,25vw,312px) !important;
}

.combat-battlefield .combat-actor-enemy:has(.enemy-pose-wolf).combat-slot-0{
  width:clamp(198px,23vw,292px) !important;
}

.combat-battlefield .combat-actor-enemy:has(.enemy-pose-wolf).combat-slot-0 .enemy-pose-art{
  width:118% !important;
  height:118% !important;
  bottom:-4% !important;
}

.combat-battlefield .combat-actor-enemy:has(.enemy-pose-skeleton).combat-slot-0,
.combat-battlefield .combat-actor-enemy:has(.enemy-pose-cultist).combat-slot-0,
.combat-battlefield .combat-actor-enemy:has(.enemy-pose-bandit).combat-slot-0,
.combat-battlefield .combat-actor-enemy:has(.enemy-pose-raider).combat-slot-0{
  width:clamp(180px,20vw,250px) !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .enemy-pose-art,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .enemy-pose-art{
  filter:var(--actor-grade-secondary) !important;
}

.combat-battlefield .combat-actor-enemy:has(.enemy-pose-wolf).combat-slot-1 .enemy-pose-art{
  width:108% !important;
  height:108% !important;
}

.combat-battlefield .combat-actor-enemy:has(.enemy-pose-wolf).combat-slot-2 .enemy-pose-art{
  width:102% !important;
  height:102% !important;
}

.combat-battlefield .combat-actor-enemy.enemy-scale-medium.combat-slot-0{
  width:clamp(204px,24vw,320px) !important;
}

.combat-battlefield .combat-actor-enemy.enemy-scale-large.combat-slot-0{
  width:clamp(270px,34vw,440px) !important;
  right:-5% !important;
}

.combat-battlefield .enemy-scale-large .enemy-pose-art{
  filter:drop-shadow(0 30px 18px rgba(0,0,0,.82)) saturate(.9) brightness(.88) contrast(1.12) sepia(.06) !important;
}

.combat-battlefield .enemy.target .portrait-wrap::after{
  opacity:.64 !important;
  border-color:rgba(243,211,123,.34) !important;
  box-shadow:0 0 14px rgba(240,200,91,.14) !important;
}

.combat-battlefield .combat-card-body{
  background:linear-gradient(180deg,rgba(4,5,5,.42),rgba(1,2,2,.62)) !important;
  border-color:rgba(214,170,82,.16) !important;
  backdrop-filter:blur(3px) saturate(.88) !important;
}

.combat-battlefield .combat-atmosphere-layer::after{
  opacity:.52 !important;
  background:
    radial-gradient(ellipse at 28% 60%,rgba(219,215,196,.26),transparent 54%),
    radial-gradient(ellipse at 72% 58%,rgba(130,145,142,.18),transparent 56%),
    linear-gradient(90deg,transparent,rgba(221,214,195,.15),transparent) !important;
}

@keyframes combat-v55-companion-scene-idle{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(1)}
  42%{transform:translateX(-50%) translateY(-2px) rotate(-.16deg) scale(1.004)}
  74%{transform:translateX(-50%) translateY(-1px) rotate(.12deg) scale(1.002)}
}

@media(max-width:700px){
  .combat-battlefield .combat-actor-hero{
    width:min(100%,148px) !important;
  }

  .combat-battlefield .combat-actor-companion.combat-slot-1{
    left:28% !important;
    bottom:104px !important;
    width:88px !important;
    transform:scale(.56) !important;
  }

  .combat-battlefield .combat-actor-companion .portrait-wrap{
    height:202px !important;
    min-height:202px !important;
  }

  .combat-battlefield .companion-scene-art{
    width:118% !important;
    height:118% !important;
  }

  .combat-battlefield .combat-actor-enemy:has(.enemy-pose-wolf).combat-slot-0{
    width:124px !important;
  }

  .combat-battlefield .combat-actor-enemy:has(.enemy-pose-wolf).combat-slot-0 .enemy-pose-art{
    width:108% !important;
    height:108% !important;
  }

  .combat-battlefield .combat-actor-enemy:has(.enemy-pose-skeleton).combat-slot-0,
  .combat-battlefield .combat-actor-enemy:has(.enemy-pose-cultist).combat-slot-0,
  .combat-battlefield .combat-actor-enemy:has(.enemy-pose-bandit).combat-slot-0,
  .combat-battlefield .combat-actor-enemy:has(.enemy-pose-raider).combat-slot-0{
    width:116px !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .combat-battlefield .combat-actor-companion.combat-slot-1{
    width:104px !important;
    transform:scale(.62) !important;
  }

  .combat-battlefield .combat-actor-enemy:has(.enemy-pose-wolf).combat-slot-0{
    width:150px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .combat-battlefield .companion-scene-art{
    animation:none !important;
  }
}

/* v56 generated actor art foundation: first pass of new battlefield-ready cutouts. */
.combat-battlefield{
  --actor-grade:drop-shadow(0 24px 15px rgba(0,0,0,.78)) saturate(.92) brightness(.9) contrast(1.08) sepia(.05);
  --actor-grade-secondary:drop-shadow(0 22px 13px rgba(0,0,0,.74)) saturate(.82) brightness(.8) contrast(1.1) sepia(.06);
}

.combat-battlefield .companion-scene-art{
  width:132% !important;
  height:132% !important;
  bottom:-5% !important;
  opacity:.88 !important;
  mix-blend-mode:normal !important;
  filter:var(--actor-grade-secondary) !important;
}

.combat-battlefield .companion-scene-scout .companion-scene-art{
  width:136% !important;
  height:136% !important;
  object-position:center bottom !important;
}

.combat-battlefield .companion-scene-fighter .companion-scene-art,
.combat-battlefield .companion-scene-warrior .companion-scene-art{
  width:130% !important;
  height:130% !important;
}

.combat-battlefield .combat-actor-enemy:has(.enemy-pose-wolf).combat-slot-0{
  width:clamp(190px,22vw,276px) !important;
}

.combat-battlefield .combat-actor-enemy:has(.enemy-pose-wolf).combat-slot-0 .enemy-pose-art{
  width:126% !important;
  height:126% !important;
  bottom:-5% !important;
}

.combat-battlefield .combat-actor-enemy:has(.enemy-pose-skeleton).combat-slot-0,
.combat-battlefield .combat-actor-enemy:has(.enemy-pose-cultist).combat-slot-0,
.combat-battlefield .combat-actor-enemy:has(.enemy-pose-bandit).combat-slot-0{
  width:clamp(172px,19vw,238px) !important;
}

.combat-battlefield .combat-actor-enemy:has(.enemy-pose-corrupted_knight).combat-slot-0{
  width:clamp(222px,27vw,350px) !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .enemy-pose-art{
  width:118% !important;
  height:118% !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-2 .enemy-pose-art{
  width:112% !important;
  height:112% !important;
}

.combat-battlefield .combat-actor-enemy:has(.enemy-pose-skeleton).combat-slot-1 .enemy-pose-art,
.combat-battlefield .combat-actor-enemy:has(.enemy-pose-cultist).combat-slot-1 .enemy-pose-art,
.combat-battlefield .combat-actor-enemy:has(.enemy-pose-bandit).combat-slot-1 .enemy-pose-art{
  width:112% !important;
  height:112% !important;
}

.combat-battlefield .combat-actor-enemy:has(.enemy-pose-skeleton).combat-slot-2 .enemy-pose-art,
.combat-battlefield .combat-actor-enemy:has(.enemy-pose-cultist).combat-slot-2 .enemy-pose-art,
.combat-battlefield .combat-actor-enemy:has(.enemy-pose-bandit).combat-slot-2 .enemy-pose-art{
  width:106% !important;
  height:106% !important;
}

.combat-battlefield .companion-scene-ground,
.combat-battlefield .enemy-pose-ground,
.combat-battlefield .paper-doll-ground{
  opacity:.94 !important;
}

.combat-battlefield .combat-actor-companion.combat-slot-1{
  left:46% !important;
  bottom:58px !important;
  width:clamp(146px,16vw,214px) !important;
  transform:scale(.74) !important;
  opacity:.94 !important;
}

.combat-battlefield .combat-actor-companion .portrait-wrap{
  bottom:38px !important;
}

.combat-battlefield .combat-actor-companion .combat-card-body{
  opacity:.72 !important;
}

.combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .combat-actor-enemy.combat-slot-1{
  right:57% !important;
  bottom:48px !important;
  width:clamp(148px,16vw,216px) !important;
  transform:scale(.86) !important;
  opacity:.94 !important;
}

.combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-2) .combat-actor-enemy.combat-slot-2{
  right:31% !important;
  bottom:106px !important;
  width:clamp(128px,14vw,196px) !important;
  transform:scale(.74) !important;
  opacity:.88 !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .portrait-wrap{
  height:clamp(228px,33vh,356px) !important;
  min-height:clamp(228px,33vh,356px) !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-2 .portrait-wrap{
  height:clamp(202px,29vh,320px) !important;
  min-height:clamp(202px,29vh,320px) !important;
}

.combat-battlefield .combat-actor-enemy.combat-slot-1 .combat-card-body,
.combat-battlefield .combat-actor-enemy.combat-slot-2 .combat-card-body{
  width:min(112px,78%) !important;
  opacity:.82 !important;
}

@media(max-width:700px){
  .combat-battlefield .companion-scene-art{
    width:124% !important;
    height:124% !important;
  }

  .combat-battlefield .combat-actor-companion.combat-slot-1{
    left:44% !important;
    bottom:96px !important;
    width:102px !important;
    transform:scale(.58) !important;
    opacity:.9 !important;
  }

  .combat-battlefield .combat-actor-companion .portrait-wrap{
    bottom:52px !important;
  }

  .combat-battlefield .combat-actor-enemy:has(.enemy-pose-wolf).combat-slot-0{
    width:120px !important;
  }

  .combat-battlefield .combat-actor-enemy:has(.enemy-pose-wolf).combat-slot-0 .enemy-pose-art{
    width:114% !important;
    height:114% !important;
  }

  .combat-battlefield .combat-actor-enemy:has(.enemy-pose-skeleton).combat-slot-0,
  .combat-battlefield .combat-actor-enemy:has(.enemy-pose-cultist).combat-slot-0,
  .combat-battlefield .combat-actor-enemy:has(.enemy-pose-bandit).combat-slot-0{
    width:108px !important;
  }

  .combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .combat-actor-enemy.combat-slot-1{
    right:49% !important;
    bottom:78px !important;
    width:104px !important;
    transform:scale(.72) !important;
    opacity:.9 !important;
  }

  .combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-2) .combat-actor-enemy.combat-slot-2{
    right:23% !important;
    bottom:136px !important;
    width:88px !important;
    transform:scale(.62) !important;
    opacity:.82 !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-1 .portrait-wrap{
    height:184px !important;
    min-height:184px !important;
  }

  .combat-battlefield .combat-actor-enemy.combat-slot-2 .portrait-wrap{
    height:154px !important;
    min-height:154px !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .combat-battlefield .combat-actor-companion.combat-slot-1{
    left:44% !important;
    bottom:46px !important;
    width:116px !important;
    transform:scale(.62) !important;
  }

  .combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-1) .combat-actor-enemy.combat-slot-1{
    right:58% !important;
    bottom:36px !important;
    width:124px !important;
    transform:scale(.76) !important;
  }

  .combat-battlefield .combat-enemy-grid:has(.combat-actor-enemy.combat-slot-2) .combat-actor-enemy.combat-slot-2{
    right:34% !important;
    bottom:74px !important;
    width:104px !important;
    transform:scale(.66) !important;
  }
}

/* v57 Ashen Keep world scene: cinematic, guided settlement traversal. */
.cinematic-home-panel{
  padding:8px;
}

.cinematic-location-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:9px 3px 0;
}

.cinematic-world-stage{
  min-height:clamp(520px,68vh,760px);
  background-position:center;
  contain:layout paint;
}

.road-stop-cinematic-stage{
  margin:10px 0;
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.1) 48%,rgba(0,0,0,.5)),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.62)),
    var(--road-stop-art);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.cinematic-world-stage::before{
  z-index:1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.08) 42%,rgba(0,0,0,.48)),
    linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.28) 50%,rgba(0,0,0,.7));
}

.cinematic-world-stage::after{
  z-index:2;
  background:
    radial-gradient(ellipse at 16% 63%,rgba(255,110,42,.22),transparent 22%),
    radial-gradient(ellipse at 76% 42%,rgba(255,174,83,.16),transparent 24%),
    radial-gradient(ellipse at 48% 52%,rgba(190,190,174,.08),transparent 34%),
    radial-gradient(ellipse at center,transparent 0 54%,rgba(0,0,0,.52) 100%);
  mix-blend-mode:screen;
}

.world-scene-ashen-keep-v57{
  background-color:#080706;
  filter:saturate(.92) contrast(1.07) brightness(.86);
}

.world-scene-ashen-fields-v70,
.road-stop-scene-ashen-gate-v70,
.road-stop-scene-burned-shrine-v70,
.road-stop-scene-ashen-slope-v70{
  background-color:#100907;
  filter:saturate(.9) contrast(1.08) brightness(.84);
}

.world-scene-old-road-v70,
.road-stop-scene-broken-road-v70,
.road-stop-scene-old-crossroads-v70,
.road-stop-scene-abandoned-cart-v70{
  background-color:#0b0a08;
  filter:saturate(.88) contrast(1.06) brightness(.86);
}

.world-scene-forest-edge-v70,
.road-stop-scene-forest-trail-v70{
  background-color:#06100d;
  filter:saturate(.86) contrast(1.08) brightness(.8);
}

.world-scene-ruined-watchtower-v70,
.road-stop-scene-ruined-waystone-v70,
.road-stop-scene-watchtower-approach-v70,
.road-stop-scene-ridge-path-v70{
  background-color:#0a0a0d;
  filter:saturate(.82) contrast(1.1) brightness(.82);
}

.world-scene-market-town-v70,
.road-stop-scene-traveler-camp-v70,
.road-stop-scene-market-outskirts-v70{
  background-color:#100c08;
  filter:saturate(.96) contrast(1.06) brightness(.87);
}

.cinematic-location-title{
  position:absolute;
  left:16px;
  top:14px;
  z-index:12;
  max-width:min(470px,calc(100% - 32px));
  text-shadow:0 2px 0 #000,0 0 22px rgba(0,0,0,.85);
  pointer-events:none;
}

.cinematic-location-title h2{
  margin:7px 0 6px;
  font-size:clamp(28px,4.2vw,46px);
  line-height:1;
}

.cinematic-location-title p{
  max-width:440px;
  margin:0;
  color:#dec59c;
  font-weight:800;
  font-size:14px;
  line-height:1.35;
}

.world-scene-depth,
.world-scene-ash,
.world-scene-smoke,
.world-scene-weather,
.world-scene-fog,
.world-scene-vignette,
.world-road-glow,
.world-scene-effect{
  position:absolute;
  pointer-events:none;
}

.cinematic-world-stage .world-scene-depth{
  inset:0;
  z-index:3;
  background:radial-gradient(ellipse at 50% 58%,transparent 0 42%,rgba(0,0,0,.66) 100%);
}

.world-scene-ash{
  inset:-18%;
  z-index:4;
  opacity:.34;
  background:
    radial-gradient(circle at 12% 18%,rgba(229,176,112,.55) 0 1px,transparent 2px),
    radial-gradient(circle at 44% 58%,rgba(230,211,180,.28) 0 1px,transparent 2px),
    radial-gradient(circle at 78% 34%,rgba(223,158,88,.36) 0 1px,transparent 2px);
  background-size:78px 110px,112px 148px,142px 190px;
  animation:world-ash-drift 20s linear infinite;
}

.world-scene-smoke{
  inset:-8%;
  z-index:4;
  opacity:.32;
  background:
    radial-gradient(ellipse at 18% 16%,rgba(170,166,154,.18),transparent 28%),
    radial-gradient(ellipse at 67% 19%,rgba(116,120,118,.2),transparent 34%),
    radial-gradient(ellipse at 35% 56%,rgba(74,76,73,.16),transparent 30%);
  filter:blur(12px);
  animation:world-smoke-breathe 24s ease-in-out infinite;
}

.cinematic-world-stage .world-scene-weather{
  inset:0;
  z-index:5;
  opacity:.25;
  background:repeating-linear-gradient(100deg,transparent 0 13px,rgba(225,225,210,.048) 14px,transparent 15px 26px);
  mix-blend-mode:overlay;
  animation:world-weather-sheen 18s ease-in-out infinite;
}

.cinematic-world-stage .world-scene-fog{
  left:-12%;
  right:-12%;
  bottom:-8%;
  height:43%;
  z-index:6;
  border-radius:50%;
  opacity:.76;
  background:
    radial-gradient(ellipse at 28% 62%,rgba(210,205,190,.18),transparent 58%),
    radial-gradient(ellipse at 72% 56%,rgba(168,180,184,.14),transparent 62%);
  filter:blur(12px);
  animation:combat-fog 17s ease-in-out infinite;
}

.cinematic-world-stage .world-scene-vignette{
  inset:0;
  z-index:7;
  background:radial-gradient(ellipse at center,transparent 0 52%,rgba(0,0,0,.7) 100%);
}

.world-road-glow{
  left:24%;
  right:22%;
  bottom:8%;
  height:30%;
  z-index:7;
  opacity:.2;
  background:linear-gradient(18deg,transparent 0 36%,rgba(255,210,132,.16) 47%,transparent 58%);
  filter:blur(10px);
}

.world-scene-effect{
  left:var(--effect-x);
  top:var(--effect-y);
  z-index:8;
  width:var(--effect-w);
  height:var(--effect-h);
  transform:translate(-50%,-50%);
  border-radius:50%;
  mix-blend-mode:screen;
  background:radial-gradient(ellipse at center,rgba(255,222,142,.44),rgba(222,88,37,.2) 42%,transparent 72%);
  filter:blur(1.2px);
  animation:ambient-flicker 4.4s ease-in-out infinite;
}

.world-scene-effect-lantern,
.world-scene-effect-hearth{
  background:radial-gradient(ellipse at center,rgba(255,220,142,.34),rgba(207,121,52,.18) 48%,transparent 74%);
}

.world-scene-effect-stone{
  background:radial-gradient(ellipse at center,rgba(255,226,160,.2),rgba(143,126,94,.12) 48%,transparent 74%);
}

.world-hotspot-layer{
  position:absolute;
  inset:0;
  z-index:14;
  pointer-events:none;
}

.world-hotspot{
  position:absolute !important;
  left:var(--hotspot-x);
  top:var(--hotspot-y);
  width:var(--hotspot-w);
  height:var(--hotspot-h);
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:12px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#ffe8b8;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  isolation:isolate;
  overflow:visible;
}

.world-hotspot::before{
  content:"";
  position:absolute;
  inset:9%;
  border:1px solid rgba(255,216,132,.02);
  border-radius:18px;
  background:radial-gradient(ellipse at center,rgba(255,205,114,.13),transparent 62%);
  box-shadow:0 0 24px rgba(255,160,74,.08);
  opacity:.62;
  transition:opacity .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.world-hotspot::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:10%;
  width:42%;
  height:10%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.54),transparent 72%);
  filter:blur(2px);
}

.world-hotspot:hover:not(:disabled)::before,
.world-hotspot:focus-visible::before{
  border-color:rgba(255,226,154,.5);
  opacity:1;
  box-shadow:0 0 26px rgba(255,188,96,.24),inset 0 0 30px rgba(255,188,96,.08);
}

.world-hotspot-ring{
  position:absolute;
  left:50%;
  bottom:15%;
  width:28px;
  height:10px;
  transform:translateX(-50%);
  border-radius:50%;
  border:1px solid rgba(255,220,142,.35);
  background:radial-gradient(ellipse at center,rgba(255,192,99,.12),transparent 70%);
  box-shadow:0 0 14px rgba(255,156,72,.12);
}

.world-hotspot-label,
.world-hotspot-hint{
  position:absolute;
  left:50%;
  z-index:3;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  text-shadow:0 1px 0 #000,0 0 10px rgba(0,0,0,.9);
}

.world-hotspot-label{
  top:50%;
  padding:4px 8px;
  border:1px solid rgba(188,139,65,.64);
  border-radius:6px;
  background:linear-gradient(180deg,rgba(13,12,10,.86),rgba(3,4,4,.92));
  color:#ffe7b5;
  font-size:12px;
  font-weight:900;
  line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,.45);
}

.world-hotspot-hint{
  top:calc(50% + 24px);
  padding:3px 7px;
  border-radius:999px;
  background:rgba(2,3,3,.72);
  color:#cdb88f;
  font-size:10px;
  font-weight:800;
  opacity:0;
  transition:opacity .18s ease;
}

.world-hotspot:hover:not(:disabled) .world-hotspot-hint,
.world-hotspot:focus-visible .world-hotspot-hint{
  opacity:1;
}

.world-hotspot-blacksmith .world-hotspot-label,
.world-hotspot-blacksmith .world-hotspot-hint{
  left:12px;
  transform:translateY(-50%);
}

.world-hotspot-inn .world-hotspot-label,
.world-hotspot-inn .world-hotspot-hint{
  left:auto;
  right:12px;
  transform:translateY(-50%);
}

.world-hotspot-ember::before{
  background:radial-gradient(ellipse at center,rgba(255,108,42,.2),transparent 62%);
}

.world-hotspot-lantern::before,
.world-hotspot-hearth::before{
  background:radial-gradient(ellipse at center,rgba(255,194,96,.17),transparent 64%);
}

.world-hotspot-stone::before{
  background:radial-gradient(ellipse at center,rgba(205,190,156,.1),transparent 64%);
}

.is-guided-traversal .world-hotspot{
  pointer-events:none;
  opacity:.48;
}

.world-player-presence{
  position:absolute;
  left:var(--player-x);
  top:var(--player-y);
  z-index:13;
  width:clamp(58px,8vw,104px);
  transform:translate(-50%,-100%) scale(var(--player-scale,1));
  transform-origin:50% 100%;
  pointer-events:none;
  filter:drop-shadow(0 22px 16px rgba(0,0,0,.78)) saturate(.92) brightness(.88);
}

.is-guided-traversal .world-player-presence{
  animation:world-player-guided-walk var(--traversal-duration,1420ms) cubic-bezier(.3,.02,.18,1) forwards;
}

.world-player-presence .paper-doll-frame{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.world-player-presence .paper-doll-scene{
  min-height:clamp(126px,18vh,214px) !important;
  height:clamp(126px,18vh,214px) !important;
  aspect-ratio:2/3 !important;
  background:transparent !important;
  overflow:visible !important;
}

.world-player-presence .paper-doll-scene::before,
.world-player-presence .paper-doll-scene::after,
.world-player-presence .paper-doll-haze{
  display:none !important;
}

.world-player-presence .paper-doll{
  transform:translateY(10%) scale(1.32);
  transform-origin:50% 86%;
}

.world-player-presence .paper-doll-ground{
  display:block;
  bottom:-3%;
  opacity:.8;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.64),transparent 72%);
}

.world-player-presence .paper-doll-avatar{
  transform-origin:50% 86%;
}

.world-player-presence.is-walking .paper-doll-avatar{
  animation:world-player-walk-cycle .48s ease-in-out infinite !important;
}

.world-player-presence .paper-doll-layer-base,
.world-player-presence .paper-doll-generated{
  filter:drop-shadow(0 18px 13px rgba(0,0,0,.76)) saturate(.96) contrast(1.05) brightness(.88) !important;
}

.world-command-rail{
  position:absolute;
  right:14px;
  bottom:12px;
  z-index:16;
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:7px;
  max-width:min(430px,calc(100% - 28px));
}

.world-command-rail button{
  min-height:36px;
  padding:6px 10px;
  font-size:12px;
}

.is-guided-traversal .world-command-rail{
  opacity:.45;
  pointer-events:none;
}

.world-traversal-caption{
  position:absolute;
  left:50%;
  bottom:58px;
  z-index:17;
  transform:translateX(-50%);
  padding:7px 11px;
  border:1px solid rgba(218,169,83,.58);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(8,8,7,.72),rgba(3,4,4,.86));
  color:#ffe7b5;
  font-size:12px;
  font-weight:900;
  text-shadow:0 1px 0 #000;
  box-shadow:0 10px 24px rgba(0,0,0,.42);
  pointer-events:none;
  animation:world-caption-rise var(--traversal-duration,1420ms) ease forwards;
}

@keyframes world-player-guided-walk{
  0%{
    left:var(--player-x);
    top:var(--player-y);
    transform:translate(-50%,-100%) scale(var(--player-scale,1));
  }
  100%{
    left:var(--player-target-x);
    top:var(--player-target-y);
    transform:translate(-50%,-100%) scale(var(--player-target-scale,1));
  }
}

@keyframes world-player-walk-cycle{
  0%,100%{transform:translateY(0) rotate(-.5deg)}
  50%{transform:translateY(-3px) rotate(.8deg)}
}

@keyframes world-ash-drift{
  0%{transform:translate3d(0,-4%,0)}
  100%{transform:translate3d(-4%,7%,0)}
}

@keyframes world-smoke-breathe{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.24}
  50%{transform:translate3d(2%,-1%,0) scale(1.06);opacity:.38}
}

@keyframes world-weather-sheen{
  0%,100%{transform:translateX(-2%);opacity:.18}
  50%{transform:translateX(3%);opacity:.3}
}

@keyframes world-caption-rise{
  0%{opacity:0;transform:translate(-50%,8px)}
  18%,74%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,-4px)}
}

@media(max-width:700px){
  .cinematic-home-panel{
    padding:6px;
  }

  .cinematic-world-stage{
    min-height:clamp(480px,72svh,660px);
  }

  .cinematic-location-title{
    left:11px;
    top:10px;
    max-width:calc(100% - 22px);
  }

  .cinematic-location-title h2{
    font-size:clamp(27px,8vw,38px);
  }

  .cinematic-location-title p{
    max-width:72vw;
    font-size:12px;
  }

  .world-player-presence{
    width:clamp(52px,15vw,82px);
  }

  .world-hotspot-label{
    bottom:auto;
    padding:4px 6px;
    font-size:10px;
  }

  .world-hotspot-hint{
    display:none;
  }

  .world-command-rail{
    left:10px;
    right:10px;
    bottom:10px;
    max-width:none;
  }

  .world-command-rail button{
    flex:1 1 96px;
    min-width:0;
    min-height:36px;
  }

  .world-traversal-caption{
    bottom:56px;
    max-width:calc(100% - 24px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media(max-width:430px){
  .cinematic-world-stage{
    min-height:500px;
  }

  .cinematic-location-title p{
    display:none;
  }

  .world-player-presence{
    width:58px;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .cinematic-world-stage{
    min-height:78svh;
  }

  .cinematic-location-title p{
    display:none;
  }

  .world-command-rail{
    right:10px;
    bottom:8px;
  }

  .world-command-rail button{
    min-height:32px;
    padding:5px 8px;
  }
}

@media(prefers-reduced-motion:reduce){
  .world-scene-ash,
  .world-scene-smoke,
  .cinematic-world-stage .world-scene-weather,
  .world-scene-effect,
  .is-guided-traversal .world-player-presence,
  .world-player-presence.is-walking .paper-doll-avatar,
  .world-traversal-caption{
    animation:none !important;
  }
}

/* v58 Ashen Keep immersion refinement: wider scene, lighter chrome, integrated story. */
.cinematic-home-panel{
  width:min(1220px,calc(100vw - 18px)) !important;
  max-width:calc(100vw - 18px) !important;
  margin-left:50% !important;
  padding:0 !important;
  transform:translateX(-50%) !important;
  border:0 !important;
  border-image-source:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

.cinematic-location-meta{
  padding:8px 4px 0 !important;
  opacity:.92;
}

.cinematic-world-stage{
  min-height:clamp(600px,76svh,820px) !important;
  border:1px solid rgba(179,131,61,.52) !important;
  border-image-source:none !important;
  border-radius:12px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,232,170,.045),
    inset 0 -170px 180px rgba(0,0,0,.48),
    0 28px 80px rgba(0,0,0,.58) !important;
}

.cinematic-world-stage::after{
  background:
    radial-gradient(ellipse at 16% 63%,rgba(255,110,42,.26),transparent 22%),
    radial-gradient(ellipse at 76% 42%,rgba(255,174,83,.18),transparent 24%),
    radial-gradient(ellipse at 88% 66%,rgba(255,198,115,.14),transparent 22%),
    radial-gradient(ellipse at 48% 52%,rgba(190,190,174,.1),transparent 34%),
    radial-gradient(ellipse at center,transparent 0 54%,rgba(0,0,0,.52) 100%) !important;
}

.world-narration-card{
  position:absolute;
  right:16px;
  top:16px;
  z-index:15;
  width:min(360px,34%);
  padding:10px 12px;
  border:1px solid rgba(183,139,72,.38);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(6,7,7,.56),rgba(4,5,5,.72));
  color:#dfc8a1;
  box-shadow:0 12px 30px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,232,170,.05);
  text-shadow:0 1px 0 #000,0 0 12px rgba(0,0,0,.72);
  backdrop-filter:blur(2px);
  pointer-events:none;
  animation:world-narration-fade 900ms ease both;
}

.world-narration-card span{
  display:block;
  margin-bottom:4px;
  color:#ffe7b5;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.world-narration-card p{
  margin:0;
  font-size:13px;
  line-height:1.35;
}

.world-road-glow{
  left:18% !important;
  right:17% !important;
  bottom:5% !important;
  height:38% !important;
  opacity:.28 !important;
  background:
    linear-gradient(12deg,transparent 0 36%,rgba(255,212,132,.16) 48%,transparent 60%),
    linear-gradient(154deg,transparent 0 42%,rgba(255,150,77,.11) 50%,transparent 61%),
    linear-gradient(42deg,transparent 0 40%,rgba(210,207,184,.09) 48%,transparent 58%) !important;
  filter:blur(12px) !important;
}

.world-road-guidance{
  position:absolute;
  left:18%;
  right:19%;
  bottom:12%;
  height:32%;
  z-index:8;
  opacity:.32;
  background:
    linear-gradient(18deg,transparent 0 45%,rgba(242,211,153,.18) 49%,transparent 53%),
    linear-gradient(132deg,transparent 0 46%,rgba(236,172,98,.14) 50%,transparent 55%);
  filter:blur(5px);
  mix-blend-mode:screen;
  pointer-events:none;
  animation:world-path-breathe 7.5s ease-in-out infinite;
}

.world-scene-effect{
  opacity:var(--effect-opacity,.28);
}

.world-scene-effect-smoke{
  border-radius:50%;
  background:
    radial-gradient(ellipse at 35% 54%,rgba(188,184,170,.18),transparent 38%),
    radial-gradient(ellipse at 68% 36%,rgba(98,102,98,.16),transparent 44%) !important;
  filter:blur(7px) !important;
  mix-blend-mode:normal !important;
  animation:world-smoke-breathe 18s ease-in-out infinite !important;
}

.world-scene-effect-window{
  border-radius:8px !important;
  background:
    linear-gradient(90deg,transparent 0 46%,rgba(75,43,21,.35) 47% 53%,transparent 54%),
    radial-gradient(ellipse at center,rgba(255,210,132,.34),rgba(216,125,53,.16) 58%,transparent 76%) !important;
  filter:blur(.9px) !important;
  animation:ambient-flicker 5.8s ease-in-out infinite !important;
}

.world-scene-effect-sparks{
  background:
    radial-gradient(circle at 22% 72%,rgba(255,222,142,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 54% 38%,rgba(255,129,56,.68) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 62%,rgba(255,232,174,.58) 0 1px,transparent 2px) !important;
  filter:drop-shadow(0 0 6px rgba(255,114,49,.3)) !important;
  animation:ambient-sparks 3.4s steps(4,end) infinite !important;
}

.world-hotspot::before{
  border-color:rgba(255,216,132,0) !important;
  background:radial-gradient(ellipse at center,rgba(255,205,114,.1),transparent 64%) !important;
  box-shadow:0 0 24px rgba(255,160,74,.05) !important;
  opacity:0 !important;
}

.world-hotspot:hover:not(:disabled)::before,
.world-hotspot:focus-visible::before{
  opacity:.92 !important;
}

.world-hotspot-label{
  padding:3px 7px !important;
  border-color:rgba(188,139,65,.48) !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(13,12,10,.72),rgba(3,4,4,.82)) !important;
  font-size:11px !important;
  box-shadow:0 8px 18px rgba(0,0,0,.36),0 0 14px rgba(255,174,82,.08) !important;
}

.world-player-presence{
  width:clamp(52px,6.6vw,92px) !important;
}

.world-player-presence::before,
.world-player-presence::after{
  content:"";
  position:absolute;
  left:50%;
  pointer-events:none;
}

.world-player-presence::before{
  top:18%;
  z-index:-1;
  width:46%;
  height:54%;
  transform:translateX(-50%);
  border-radius:48% 48% 38% 38%;
  background:linear-gradient(180deg,rgba(20,16,13,.32),rgba(6,6,6,.08));
  filter:blur(3px);
}

.world-player-presence::after{
  bottom:-1%;
  z-index:-2;
  width:78%;
  height:9%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.62),transparent 72%);
  filter:blur(2px);
}

.world-player-presence .paper-doll{
  transform:translateY(7%) scale(1.08) !important;
  transform-origin:50% 86% !important;
}

.world-player-presence.is-walking .paper-doll-avatar{
  animation:world-player-walk-cycle .48s ease-in-out infinite !important;
}

.world-player-presence.is-walking::before{
  animation:world-player-cloak-sway .62s ease-in-out infinite;
}

.world-player-presence .paper-doll-generated{
  --paper-doll-scale:1.04;
  object-position:center bottom !important;
  filter:drop-shadow(0 18px 13px rgba(0,0,0,.76)) saturate(.96) contrast(1.05) brightness(.9) !important;
}

.world-player-presence .paper-doll-gear-badges{
  display:none !important;
}

@keyframes world-player-walk-cycle{
  0%,100%{transform:translateY(0) rotate(-.7deg) skewX(-.6deg)}
  50%{transform:translateY(-3px) rotate(.9deg) skewX(.6deg)}
}

@keyframes world-player-cloak-sway{
  0%,100%{transform:translateX(-52%) skewX(-2deg);opacity:.28}
  50%{transform:translateX(-48%) skewX(2deg);opacity:.36}
}

@keyframes world-path-breathe{
  0%,100%{opacity:.2;transform:translateY(0)}
  50%{opacity:.36;transform:translateY(-1%)}
}

@keyframes world-narration-fade{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:700px){
  .cinematic-home-panel{
    width:calc(100vw - 10px) !important;
    max-width:calc(100vw - 10px) !important;
  }

  .cinematic-world-stage{
    min-height:clamp(540px,76svh,700px) !important;
  }

  .world-narration-card{
    left:11px;
    right:11px;
    top:auto;
    bottom:72px;
    width:auto;
    padding:8px 10px;
  }

  .world-narration-card p{
    max-height:38px;
    overflow:hidden;
    font-size:12px;
  }

  .world-player-presence{
    width:clamp(48px,13vw,74px) !important;
  }

  .world-hotspot-label{
    font-size:10px !important;
  }
}

@media(max-width:430px){
  .cinematic-world-stage{
    min-height:560px !important;
  }

  .world-player-presence{
    width:54px !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .cinematic-world-stage{
    min-height:86svh !important;
  }

  .world-narration-card{
    display:none;
  }

  body.cinematic-world-home-active .topbar{
    width:calc(100vw - 18px);
    padding:4px 6px 5px;
  }

  body.cinematic-world-home-active #topStats{
    display:flex !important;
    min-height:38px !important;
    gap:6px !important;
    padding:4px 6px !important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  body.cinematic-world-home-active #topStats::-webkit-scrollbar{
    display:none;
  }

  body.cinematic-world-home-active #topStats::after{
    display:none;
  }

  body.cinematic-world-home-active .top-status-portrait{
    display:none !important;
  }

  body.cinematic-world-home-active .top-status-pills{
    flex-wrap:nowrap !important;
    align-items:center;
    align-content:center;
    padding-right:10px;
  }

  body.cinematic-world-home-active .hud-token{
    white-space:nowrap;
    font-size:10px !important;
    padding:3px 7px 4px 9px !important;
  }

  body.cinematic-world-home-active .topline{
    margin-top:3px !important;
    padding:3px 2px 1px !important;
    overflow-x:auto;
  }

  body.cinematic-world-home-active .topline button,
  body.cinematic-world-home-active .topline button:nth-child(2n),
  body.cinematic-world-home-active .topline button:nth-child(3n){
    min-height:29px !important;
    padding:3px 8px !important;
    font-size:10px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .world-road-guidance,
  .world-narration-card,
  .world-player-presence.is-walking::before{
    animation:none !important;
  }
}

/* v58 cinematic home chrome: keep HUD available without letting it dominate Ashen Keep. */
body.cinematic-world-home-active #app{
  max-width:1220px;
  padding-inline:9px;
}

body.cinematic-world-home-active .topbar{
  width:min(1220px,calc(100vw - 18px));
  margin:0 auto 8px;
  padding:6px 8px 7px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.28),transparent 18%,transparent 82%,rgba(0,0,0,.3)),
    linear-gradient(180deg,rgba(26,23,18,.86),rgba(5,6,6,.9));
  border-color:rgba(120,89,40,.54);
  box-shadow:0 10px 32px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,232,170,.045);
}

body.cinematic-world-home-active #topStats{
  grid-template-columns:56px minmax(0,1fr) !important;
  min-height:62px !important;
  gap:8px !important;
  padding:5px 8px !important;
}

body.cinematic-world-home-active #topStats::after{
  left:58px !important;
  opacity:.42;
}

body.cinematic-world-home-active .top-status-portrait{
  width:52px !important;
  min-width:52px !important;
  min-height:56px !important;
  padding:3px !important;
}

body.cinematic-world-home-active .top-status-portrait .paper-doll-frame{
  width:40px !important;
  max-width:40px !important;
  height:52px !important;
}

body.cinematic-world-home-active .top-status-portrait .paper-doll-scene{
  min-height:52px !important;
  height:52px !important;
}

body.cinematic-world-home-active .top-status-pills{
  gap:4px 5px !important;
  align-content:center !important;
}

body.cinematic-world-home-active .hud-token{
  padding:3px 8px 4px 10px !important;
  font-size:11px !important;
  line-height:1.1 !important;
}

body.cinematic-world-home-active .topline{
  margin-top:5px !important;
  padding:4px 2px 2px !important;
  gap:5px !important;
}

body.cinematic-world-home-active .topline button,
body.cinematic-world-home-active .topline button:nth-child(2n),
body.cinematic-world-home-active .topline button:nth-child(3n){
  min-height:32px !important;
  padding:4px 9px 5px !important;
  font-size:11px !important;
}

@media(max-width:700px){
  body.cinematic-world-home-active #app{
    padding-inline:5px;
  }

  body.cinematic-world-home-active .topbar{
    width:calc(100vw - 10px);
    padding:5px 6px 6px;
  }

  body.cinematic-world-home-active #topStats{
    display:flex !important;
    min-height:38px !important;
    gap:6px !important;
    padding:4px 6px !important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  body.cinematic-world-home-active #topStats::-webkit-scrollbar{
    display:none;
  }

  body.cinematic-world-home-active #topStats::after{
    display:none;
  }

  body.cinematic-world-home-active .top-status-portrait{
    display:none !important;
  }

  body.cinematic-world-home-active .top-status-portrait .paper-doll-frame{
    width:36px !important;
    max-width:36px !important;
    height:48px !important;
  }

  body.cinematic-world-home-active .top-status-portrait .paper-doll-scene{
    min-height:48px !important;
    height:48px !important;
  }

  body.cinematic-world-home-active .top-status-pills{
    flex:1 0 auto;
    flex-wrap:nowrap !important;
    align-items:center;
    align-content:center;
    padding-right:10px;
  }

  body.cinematic-world-home-active .hud-token{
    white-space:nowrap;
    font-size:10px !important;
    padding:3px 7px 4px 9px !important;
  }

  body.cinematic-world-home-active .topline{
    padding-top:3px !important;
    overflow-x:auto;
  }

  body.cinematic-world-home-active .topline button,
  body.cinematic-world-home-active .topline button:nth-child(2n),
  body.cinematic-world-home-active .topline button:nth-child(3n){
    min-height:30px !important;
    padding:4px 8px !important;
    font-size:10px !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  body.cinematic-world-home-active .topbar{
    display:flex;
    align-items:center;
    gap:8px;
    width:calc(100vw - 18px);
    padding:4px 6px 5px;
  }

  body.cinematic-world-home-active #topStats{
    flex:1 1 56%;
    min-width:0;
    display:flex !important;
    min-height:38px !important;
    gap:6px !important;
    padding:4px 6px !important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  body.cinematic-world-home-active #topStats::-webkit-scrollbar{
    display:none;
  }

  body.cinematic-world-home-active #topStats::after{
    display:none;
  }

  body.cinematic-world-home-active .top-status-portrait{
    display:none !important;
  }

  body.cinematic-world-home-active .top-status-pills{
    flex-wrap:nowrap !important;
    align-items:center;
    align-content:center;
    padding-right:10px;
  }

  body.cinematic-world-home-active .hud-token{
    white-space:nowrap;
    font-size:10px !important;
    padding:3px 7px 4px 9px !important;
  }

  body.cinematic-world-home-active .topline{
    flex:0 0 min(362px,43vw);
    min-width:0;
    margin-top:0 !important;
    padding:3px 2px 1px !important;
    overflow-x:auto;
  }

  body.cinematic-world-home-active .topline button,
  body.cinematic-world-home-active .topline button:nth-child(2n),
  body.cinematic-world-home-active .topline button:nth-child(3n){
    min-height:29px !important;
    padding:3px 8px !important;
    font-size:10px !important;
  }
}

/* Dynamic battlefield director true final guard. Later milestone styles also touch combat,
   so keep the new staged composition as the last word in the cascade. */
body.cinematic-combat-active .topbar{
  display:none !important;
}

.combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"][data-scene-director="dynamic"]{
  min-height:var(--director-stage-height,clamp(500px,64vh,720px)) !important;
  height:auto !important;
  overflow:hidden !important;
}

@media(max-width:700px){
  body.cinematic-combat-active #app{
    padding:4px 6px 72px !important;
  }

  .combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"][data-scene-director="dynamic"]{
    min-height:var(--director-stage-height-mobile,min(460px,50svh)) !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  body.cinematic-combat-active #app{
    max-width:100vw !important;
    padding:2px 5px 48px !important;
  }

  body.cinematic-combat-active .combat-shell{
    gap:4px !important;
    padding:5px !important;
    border-radius:8px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header{
    grid-template-columns:minmax(0,.48fr) minmax(0,.52fr) !important;
    gap:4px !important;
    margin:0 !important;
    padding:4px 5px !important;
    min-height:0 !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header h2{
    font-size:13px !important;
    line-height:1.05 !important;
    margin:0 !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header p,
  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .battle-log{
    display:none !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order{
    max-height:22px !important;
    gap:3px !important;
    overflow:hidden !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order .pill{
    padding:2px 5px !important;
    font-size:9px !important;
    line-height:1 !important;
  }

  .combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"][data-scene-director="dynamic"]{
    min-height:min(var(--director-stage-height-landscape,220px),54svh) !important;
    height:min(var(--director-stage-height-landscape,220px),54svh) !important;
    max-height:min(var(--director-stage-height-landscape,220px),54svh) !important;
    margin:0 !important;
    padding:6px 8px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-area{
    inset:6px 8px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-area > h2{
    display:none !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor,
  .combat-stage[data-scene-director="dynamic"] .unit.combat-card.combat-actor,
  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor{
    position:absolute !important;
    left:var(--actor-landscape-x,var(--actor-x,50%)) !important;
    bottom:var(--actor-landscape-y,var(--actor-y,0)) !important;
    width:var(--actor-landscape-width,var(--actor-width,140px)) !important;
    min-height:var(--actor-landscape-height,var(--actor-height,208px)) !important;
    transform:translateX(-50%) scale(var(--actor-landscape-scale,var(--actor-scale,1))) !important;
    transform-origin:bottom center !important;
  }

  .combat-stage[data-scene-director="dynamic"] .portrait-wrap{
    min-height:var(--actor-landscape-art-height,var(--actor-art-height,168px)) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .paper-doll-frame-combat,
  .combat-stage[data-scene-director="dynamic"] .enemy-pose-frame,
  .combat-stage[data-scene-director="dynamic"] .portrait-art,
  .combat-stage[data-scene-director="dynamic"] .companion-scene-frame{
    min-height:var(--actor-landscape-art-height,var(--actor-art-height,168px)) !important;
    height:var(--actor-landscape-art-height,var(--actor-art-height,168px)) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card-body{
    max-width:128px !important;
    padding:4px 5px !important;
    gap:3px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-name b{
    font-size:10px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-name span,
  .combat-stage[data-scene-director="dynamic"] .meter-line,
  .combat-stage[data-scene-director="dynamic"] .combat-card-body .pill{
    font-size:8px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-companion .combat-card-body,
  .combat-stage[data-scene-director="dynamic"] [data-director-depth="background"] .combat-card-body{
    display:none !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions{
    padding:4px !important;
    margin:0 !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions .grid3{
    display:grid !important;
    grid-template-columns:repeat(7,minmax(38px,1fr)) !important;
    gap:3px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions button{
    min-height:23px !important;
    padding:2px 4px !important;
    font-size:9px !important;
    line-height:1 !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .combat-stage[data-scene-director="dynamic"][data-boss-presence="true"] .combat-actor-enemy:not(.target) .combat-card-body{
    display:none !important;
  }
}

/* Journey movement / traversal presence v1: shared staged motion for town entry and road travel. */
.cinematic-world-stage.has-traversal-presence{
  --traversal-depth-drift:0;
}

.cinematic-world-stage .world-parallax-drift,
.cinematic-world-stage .world-traversal-foreground,
.cinematic-world-stage .world-traversal-embers,
.cinematic-world-stage .world-traversal-focus,
.cinematic-world-stage .world-traversal-dust,
.cinematic-world-stage .world-entry-threshold{
  position:absolute;
  display:block;
  pointer-events:none;
}

.cinematic-world-stage .world-parallax-drift{
  inset:-4%;
  z-index:4;
  opacity:0;
  background:
    linear-gradient(100deg,transparent 0 18%,rgba(255,220,154,.04) 48%,transparent 78%),
    radial-gradient(ellipse at 48% 70%,rgba(220,210,186,.1),transparent 50%);
  filter:blur(5px);
}

.cinematic-world-stage .world-traversal-dust{
  left:calc(var(--player-x,50%) - 6%);
  top:calc(var(--player-y,75%) - 4%);
  z-index:12;
  width:22%;
  height:17%;
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(ellipse at 44% 58%,rgba(188,166,124,.16),transparent 56%),
    radial-gradient(ellipse at 66% 42%,rgba(94,91,84,.12),transparent 62%);
  filter:blur(9px);
  mix-blend-mode:screen;
}

.cinematic-world-stage .world-traversal-foreground{
  left:-10%;
  right:-10%;
  bottom:-7%;
  z-index:15;
  height:38%;
  opacity:0;
  background:
    linear-gradient(92deg,transparent 0 18%,rgba(178,174,158,.06) 42%,transparent 68%),
    radial-gradient(ellipse at 18% 82%,rgba(0,0,0,.48),transparent 34%),
    radial-gradient(ellipse at 78% 78%,rgba(0,0,0,.34),transparent 36%),
    linear-gradient(90deg,rgba(20,14,10,.2),transparent 28%,transparent 70%,rgba(21,15,11,.2));
  filter:blur(5px);
}

.cinematic-world-stage .world-traversal-embers{
  inset:0;
  z-index:10;
  opacity:0;
  background:
    radial-gradient(circle at 16% 66%,rgba(255,152,62,.32) 0 1px,transparent 2px),
    radial-gradient(circle at 28% 54%,rgba(245,190,102,.22) 0 1px,transparent 2px),
    radial-gradient(circle at 63% 72%,rgba(255,125,54,.2) 0 1px,transparent 2px),
    radial-gradient(circle at 84% 48%,rgba(238,198,118,.18) 0 1px,transparent 2px);
  background-size:160px 140px,220px 190px,190px 170px,260px 230px;
  mix-blend-mode:screen;
}

.cinematic-world-stage .world-traversal-focus{
  inset:0;
  z-index:8;
  opacity:0;
  background:
    radial-gradient(ellipse at var(--player-x,50%) calc(var(--player-y,74%) - 18%),transparent 0 16%,rgba(0,0,0,.16) 42%,rgba(0,0,0,.38) 100%),
    linear-gradient(90deg,rgba(0,0,0,.18),transparent 34%,transparent 66%,rgba(0,0,0,.16));
}

.cinematic-world-stage .world-entry-threshold{
  inset:0;
  z-index:28;
  opacity:0;
  background:
    radial-gradient(ellipse at var(--player-target-x,50%) var(--player-target-y,70%),rgba(255,198,112,.18),transparent 22%),
    radial-gradient(ellipse at center,transparent 0 46%,rgba(0,0,0,.68) 100%),
    linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.68));
}

.cinematic-world-stage.traversal-phase-walking .world-parallax-drift{
  animation:journey-scene-drift var(--traversal-walk-duration,900ms) ease-in-out both;
}

.cinematic-world-stage.traversal-phase-walking .world-traversal-foreground{
  animation:journey-foreground-drift var(--traversal-walk-duration,900ms) ease-in-out both;
}

.cinematic-world-stage.traversal-phase-walking .world-traversal-embers{
  animation:journey-ember-drift var(--traversal-walk-duration,900ms) linear both;
}

.cinematic-world-stage.traversal-phase-walking .world-traversal-focus{
  animation:journey-focus-breathe var(--traversal-walk-duration,900ms) ease-in-out both;
}

.cinematic-world-stage.traversal-phase-walking .world-traversal-dust{
  animation:journey-travel-dust var(--traversal-walk-duration,900ms) ease-in-out both;
}

.cinematic-world-stage.traversal-phase-entering-location .world-entry-threshold{
  animation:journey-threshold-enter var(--traversal-enter-duration,280ms) ease both;
}

.world-player-presence[data-traversal-kind]{
  left:var(--player-x);
  top:var(--player-y);
  transform:translate(-50%,-100%) scale(var(--player-scale,1));
  transform-origin:50% 100% !important;
  will-change:left,top,transform,filter,opacity;
  --traversal-ground-y:-100%;
  --traversal-contact-shadow-scale:1;
  --traversal-contact-shadow-rest-opacity:.34;
  --traversal-contact-shadow-contact-opacity:.46;
  --traversal-contact-shadow-pass-opacity:.27;
  --traversal-gear-sway-min-opacity:.1;
  --traversal-gear-sway-max-opacity:.18;
  --traversal-weapon-drift-x:0px;
}

.world-player-presence .traversal-pose-layer{
  position:relative;
  width:100%;
  transform-origin:50% 100%;
  will-change:opacity,transform,filter;
}

.world-player-presence .traversal-pose-secondary{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.world-player-presence .traversal-pose-layer:not(.traversal-pose-primary){
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.world-player-presence[data-traversal-rhythm="two-step"].traversal-phase-walking .traversal-pose-primary{
  animation:journey-pose-primary-cycle var(--traversal-step-cycle,.56s) cubic-bezier(.42,0,.28,1) infinite;
}

.world-player-presence[data-traversal-rhythm="two-step"].traversal-phase-walking .traversal-pose-secondary{
  animation:journey-pose-secondary-cycle var(--traversal-step-cycle,.56s) cubic-bezier(.42,0,.28,1) infinite;
}

.world-player-presence[data-traversal-rhythm="4-phase"] .traversal-pose-layer{
  opacity:0;
}

.world-player-presence[data-traversal-rhythm="4-phase"] .traversal-pose-phase-a{
  opacity:1;
}

.world-player-presence[data-traversal-rhythm="4-phase"].traversal-phase-walking .traversal-pose-phase-a{
  animation:journey-pose-phase-a var(--traversal-step-cycle,1.28s) linear infinite;
}

.world-player-presence[data-traversal-rhythm="4-phase"].traversal-phase-walking .traversal-pose-phase-b{
  animation:journey-pose-phase-b var(--traversal-step-cycle,1.28s) linear infinite;
}

.world-player-presence[data-traversal-rhythm="4-phase"].traversal-phase-walking .traversal-pose-phase-c{
  animation:journey-pose-phase-c var(--traversal-step-cycle,1.28s) linear infinite;
}

.world-player-presence[data-traversal-rhythm="4-phase"].traversal-phase-walking .traversal-pose-phase-d{
  animation:journey-pose-phase-d var(--traversal-step-cycle,1.28s) linear infinite;
}

.world-player-presence.traversal-phase-preparing-to-move{
  animation:journey-presence-prepare var(--traversal-prepare-duration,180ms) ease-out both !important;
}

.world-player-presence.traversal-phase-walking{
  animation:journey-presence-walk-to var(--traversal-walk-duration,900ms) cubic-bezier(.22,.03,.08,1) forwards !important;
}

.world-player-presence.traversal-phase-arriving{
  animation:journey-presence-arrive var(--traversal-arrive-duration,260ms) ease-out both !important;
}

.world-player-presence.traversal-phase-entering-location{
  animation:journey-presence-enter var(--traversal-enter-duration,280ms) ease-in forwards !important;
}

.world-player-presence[data-traversal-mirror="safe"].traversal-facing-left .paper-doll{
  transform:translateY(7%) scaleX(-1) scale(1.08) !important;
}

.world-player-presence.traversal-facing-right .paper-doll,
.world-player-presence.traversal-facing-forward .paper-doll,
.world-player-presence.traversal-facing-away .paper-doll{
  transform:translateY(7%) scaleX(1) scale(1.08) !important;
}

.world-player-presence.traversal-facing-away{
  filter:drop-shadow(0 20px 15px rgba(0,0,0,.82)) saturate(.86) brightness(.78) !important;
}

.world-player-presence.traversal-facing-forward{
  filter:drop-shadow(0 24px 17px rgba(0,0,0,.78)) saturate(.96) brightness(.92) !important;
}

.world-player-presence[data-traversal-pose^="walk"] .paper-doll-generated-stack,
.world-player-presence[data-traversal-pose^="walk"] .paper-doll-motion-body,
.world-player-presence[data-traversal-pose^="walk"] .paper-doll-motion-gear{
  animation:none !important;
  transform:translateY(0) !important;
}

.world-player-presence.traversal-phase-walking .paper-doll-avatar{
  animation:journey-body-sway var(--traversal-body-cycle,.72s) cubic-bezier(.42,0,.28,1) infinite !important;
}

.world-player-presence.traversal-phase-walking .paper-doll-frame{
  animation:journey-frame-weight-shift var(--traversal-step-cycle,1.28s) linear infinite !important;
  transform-origin:50% 96% !important;
}

.world-player-presence.traversal-phase-walking .paper-doll-generated{
  animation:journey-image-weight var(--traversal-body-cycle,.72s) cubic-bezier(.42,0,.28,1) infinite !important;
  transform-origin:50% 94% !important;
}

.world-player-presence.traversal-phase-walking .paper-doll-gear-badges{
  animation:journey-gear-badges-weight var(--traversal-step-cycle,1.28s) linear infinite !important;
  transform-origin:50% 72% !important;
}

.world-player-presence.traversal-phase-preparing-to-move .paper-doll-avatar{
  animation:journey-body-prepare var(--traversal-prepare-duration,180ms) ease-out both !important;
}

.world-player-presence.traversal-phase-preparing-to-move .paper-doll-generated{
  animation:journey-image-prepare var(--traversal-prepare-duration,180ms) ease-out both !important;
}

.world-player-presence.traversal-phase-arriving .paper-doll-avatar{
  animation:journey-body-arrive var(--traversal-arrive-duration,260ms) ease-out both !important;
}

.world-player-presence.traversal-phase-arriving .paper-doll-generated{
  animation:journey-image-arrive var(--traversal-arrive-duration,260ms) ease-out both !important;
}

.traversal-footstep-puff{
  position:absolute;
  left:50%;
  bottom:-2%;
  z-index:-1;
  width:84%;
  height:15%;
  transform:translateX(-50%);
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(ellipse at 36% 56%,rgba(197,168,112,.24),transparent 58%),
    radial-gradient(ellipse at 64% 46%,rgba(100,93,76,.18),transparent 62%);
  filter:blur(4px);
  pointer-events:none;
}

.world-player-presence.traversal-phase-walking .traversal-footstep-puff{
  animation:journey-footstep-puff var(--traversal-footstep-cycle,.68s) ease-in-out infinite;
}

.traversal-contact-shadow{
  position:absolute;
  left:50%;
  bottom:-3.5%;
  z-index:-2;
  width:58%;
  height:10%;
  transform:translateX(-50%) scale(var(--traversal-contact-shadow-scale,1));
  border-radius:50%;
  opacity:var(--traversal-contact-shadow-rest-opacity,.34);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.66),rgba(0,0,0,.18) 52%,transparent 76%);
  filter:blur(2px);
  pointer-events:none;
}

.world-player-presence.traversal-phase-walking .traversal-contact-shadow{
  animation:journey-contact-shadow var(--traversal-step-cycle,1.28s) linear infinite;
}

.traversal-gear-sway{
  position:absolute;
  z-index:3;
  top:31%;
  width:16%;
  height:46%;
  opacity:var(--traversal-gear-sway-max-opacity,.18);
  pointer-events:none;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(250,230,176,.2),rgba(0,0,0,.02) 68%);
  filter:blur(2px);
  transform-origin:50% 20%;
}

.traversal-gear-sway-left{
  left:24%;
}

.traversal-gear-sway-right{
  right:24%;
}

.world-player-presence.traversal-phase-walking .traversal-gear-sway-left{
  animation:journey-gear-sway-left var(--traversal-step-cycle,.56s) ease-in-out infinite;
  animation-delay:var(--traversal-cloak-delay,0ms);
}

.world-player-presence.traversal-phase-walking .traversal-gear-sway-right{
  animation:journey-gear-sway-right var(--traversal-step-cycle,.56s) ease-in-out infinite;
  animation-delay:var(--traversal-cloak-delay,0ms);
}

.world-player-presence[data-traversal-armor-profile="heavy"] .traversal-contact-shadow{
  filter:blur(1.8px);
}

.world-player-presence[data-traversal-armor-profile="light"] .traversal-contact-shadow{
  filter:blur(2.4px);
}

.world-player-presence[data-traversal-carry-profile="sword-shield"] .traversal-gear-sway-left,
.world-player-presence[data-traversal-carry-profile="shield"] .traversal-gear-sway-left,
.world-player-presence[data-traversal-carry-profile="two-handed"] .traversal-gear-sway-right,
.world-player-presence[data-traversal-carry-profile="bow"] .traversal-gear-sway-right,
.world-player-presence[data-traversal-carry-profile="staff"] .traversal-gear-sway-right{
  opacity:var(--traversal-gear-sway-max-opacity,.2);
}

.overworld-marker.traversal-map-presence{
  width:32px !important;
  height:42px !important;
  transform:translate(-50%,-100%) scale(.96);
  transform-origin:50% 100%;
  transition:left .22s cubic-bezier(.25,.03,.12,1),top .22s cubic-bezier(.25,.03,.12,1);
  will-change:left,top,transform;
}

.overworld-marker.traversal-map-presence span{
  position:absolute !important;
  display:block !important;
  inset:auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  transform:none !important;
  pointer-events:none !important;
}

.overworld-marker.traversal-map-presence span::after{
  display:none !important;
  content:none !important;
}

.overworld-marker.traversal-map-presence .marker-shadow{
  left:14%;
  right:12%;
  bottom:-2%;
  height:18%;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.72),transparent 72%) !important;
  filter:blur(2px);
}

.overworld-marker.traversal-map-presence .marker-dust{
  left:-22%;
  bottom:2%;
  width:58%;
  height:18%;
  border-radius:50% !important;
  opacity:0;
  background:radial-gradient(ellipse at center,rgba(195,157,90,.28),transparent 72%) !important;
  filter:blur(3px);
}

.overworld-marker.traversal-map-presence .marker-body{
  left:30%;
  bottom:11%;
  width:40%;
  height:56%;
  border-radius:48% 48% 34% 34% !important;
  background:linear-gradient(180deg,#2d251f 0 16%,#12100d 17% 68%,#070605 69% 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(255,232,170,.18),0 0 10px rgba(0,0,0,.8) !important;
}

.overworld-marker.traversal-map-presence .marker-cloak{
  left:22%;
  bottom:8%;
  width:56%;
  height:64%;
  border-radius:52% 52% 42% 42% !important;
  background:linear-gradient(180deg,rgba(52,43,34,.92),rgba(12,10,9,.96) 70%,rgba(5,4,4,.98)) !important;
  clip-path:polygon(50% 0,78% 22%,88% 100%,12% 100%,22% 22%);
  filter:drop-shadow(0 7px 6px rgba(0,0,0,.72));
}

.overworld-marker.traversal-map-presence .marker-hood{
  left:34%;
  bottom:62%;
  width:32%;
  height:25%;
  border-radius:50% 50% 38% 38% !important;
  background:linear-gradient(180deg,#463526,#100d0b 76%) !important;
  box-shadow:inset 0 0 0 1px rgba(255,232,170,.16),0 0 10px rgba(0,0,0,.8) !important;
}

.overworld-marker.traversal-map-presence .marker-step{
  bottom:5%;
  width:16%;
  height:22%;
  border-radius:999px !important;
  background:linear-gradient(180deg,#1b1611,#050403) !important;
  transform-origin:50% 0 !important;
}

.overworld-marker.traversal-map-presence .marker-step-a{
  left:34%;
}

.overworld-marker.traversal-map-presence .marker-step-b{
  right:34%;
}

.overworld-marker.traversal-map-presence.traversal-facing-left .marker-body,
.overworld-marker.traversal-map-presence.traversal-facing-left .marker-cloak,
.overworld-marker.traversal-map-presence.traversal-facing-left .marker-hood{
  transform:scaleX(-1) !important;
}

.overworld-marker.traversal-map-presence.traversal-phase-walking{
  animation:journey-marker-weight var(--journey-marker-cycle,.68s) ease-in-out infinite !important;
}

.overworld-marker.traversal-map-presence.traversal-phase-walking .marker-cloak{
  animation:journey-marker-cloak var(--journey-marker-cycle,.68s) ease-in-out infinite !important;
}

.overworld-marker.traversal-map-presence.traversal-phase-walking .marker-step-a{
  animation:journey-marker-step-a var(--journey-marker-cycle,.68s) ease-in-out infinite !important;
}

.overworld-marker.traversal-map-presence.traversal-phase-walking .marker-step-b{
  animation:journey-marker-step-b var(--journey-marker-cycle,.68s) ease-in-out infinite !important;
}

.overworld-marker.traversal-map-presence.traversal-phase-walking .marker-dust{
  animation:journey-marker-dust var(--journey-marker-cycle,.68s) ease-in-out infinite !important;
}

.overworld-marker.traversal-map-presence.traversal-phase-arriving{
  animation:journey-marker-arrive .34s ease-out both !important;
}

@keyframes journey-presence-prepare{
  0%{left:var(--player-x);top:var(--player-y);transform:translate(-50%,-100%) scale(var(--player-scale,1)) rotate(0deg)}
  38%{left:var(--player-x);top:var(--player-y);transform:translate(-50%,-100%) scale(var(--player-scale,1)) rotate(var(--traversal-pre-turn-angle,0deg))}
  70%{left:var(--player-anticipation-x);top:var(--player-anticipation-y);transform:translate(-50%,-100%) scale(var(--player-anticipation-scale,1)) rotate(var(--traversal-lean-back,0deg))}
  100%{left:var(--player-x);top:var(--player-y);transform:translate(-50%,-100%) scale(var(--player-scale,1)) rotate(var(--traversal-lean-forward,0deg))}
}

@keyframes journey-presence-walk-to{
  0%,7%{left:var(--player-x);top:var(--player-y);transform:translate(-50%,-100%) scale(var(--player-scale,1)) rotate(var(--traversal-pre-turn-angle,0deg))}
  14%{left:var(--player-anticipation-x);top:var(--player-anticipation-y);transform:translate(-50%,-100.01%) scale(var(--player-anticipation-scale,1)) rotate(var(--traversal-lean-back,0deg))}
  24%,31%{left:var(--player-contact-1-x);top:var(--player-contact-1-y);transform:translate(-50%,-100%) scale(var(--player-contact-1-scale,1)) rotate(var(--traversal-lean-forward,0deg))}
  46%,53%{left:var(--player-contact-2-x);top:var(--player-contact-2-y);transform:translate(-50%,-100.01%) scale(var(--player-contact-2-scale,1)) rotate(0deg)}
  68%,75%{left:var(--player-contact-3-x);top:var(--player-contact-3-y);transform:translate(-50%,-100%) scale(var(--player-contact-3-scale,1)) rotate(var(--traversal-lean-forward,0deg))}
  90%{left:var(--player-arrival-x);top:var(--player-arrival-y);transform:translate(-50%,-100.01%) scale(var(--player-arrival-scale,1)) rotate(0deg)}
  100%{left:var(--player-target-x);top:var(--player-target-y);transform:translate(-50%,-100%) scale(var(--player-target-scale,1)) rotate(0deg)}
}

@keyframes journey-presence-arrive{
  0%{transform:translate(-50%,-100.03%) scale(var(--player-target-scale,1)) rotate(0deg)}
  46%{transform:translate(-50%,calc(-100% + var(--traversal-arrival-compress-y,.02px))) scale(var(--player-target-scale,1)) rotate(var(--traversal-lean-back,0deg))}
  78%{transform:translate(-50%,-99.99%) scale(var(--player-target-scale,1)) rotate(0deg)}
  100%{transform:translate(-50%,-100%) scale(var(--player-target-scale,1))}
}

@keyframes journey-presence-enter{
  0%,24%{opacity:1;filter:drop-shadow(0 22px 16px rgba(0,0,0,.78)) brightness(.9);transform:translate(-50%,-100%) scale(var(--player-target-scale,1)) rotate(var(--traversal-lean-forward,0deg))}
  42%{opacity:1;filter:drop-shadow(0 21px 15px rgba(0,0,0,.8)) brightness(.88);transform:translate(-50%,calc(-100% + var(--traversal-entry-compress-y,.02px))) scale(var(--player-target-scale,1)) rotate(var(--traversal-lean-forward,0deg))}
  100%{opacity:0;filter:drop-shadow(0 10px 8px rgba(0,0,0,.6)) brightness(.45);transform:translate(-50%,-100.16%) scale(var(--player-target-scale,1)) rotate(var(--traversal-lean-forward,0deg))}
}

@keyframes journey-body-prepare{
  0%,100%{transform:translateY(0) rotate(0)}
  38%{transform:translate3d(var(--traversal-weight-shift-x,0),0,0) rotate(var(--traversal-pre-turn-angle,0deg))}
  70%{transform:translateY(.12px) rotate(var(--traversal-lean-prepare,0deg))}
}

@keyframes journey-image-prepare{
  0%,100%{transform:scale(var(--paper-doll-scale)) rotate(0deg)}
  38%{transform:translate3d(var(--traversal-weight-shift-x,0),0,0) scale(var(--paper-doll-scale)) rotate(var(--traversal-pre-turn-angle,0deg))}
  70%{transform:translateY(.08px) scale(var(--paper-doll-scale)) rotate(var(--traversal-lean-prepare,0deg))}
}

@keyframes journey-body-sway{
  0%,18%,52%,68%,100%{transform:translate3d(var(--traversal-weight-shift-x,0),0,0) rotate(var(--traversal-upper-counter-sway,0deg)) skewX(-.1deg)}
  34%,84%{transform:translate3d(var(--traversal-weight-counter-x,0),var(--traversal-step-y,-.08px),0) rotate(var(--traversal-upper-sway,0deg)) skewX(.1deg)}
}

@keyframes journey-image-weight{
  0%,18%,52%,68%,100%{transform:translate3d(var(--traversal-weight-shift-x,0),0,0) scale(var(--paper-doll-scale)) rotate(-.045deg)}
  34%,84%{transform:translate3d(var(--traversal-weight-counter-x,0),var(--traversal-image-step-y,-.04px),0) scale(var(--paper-doll-scale)) rotate(.065deg)}
}

@keyframes journey-frame-weight-shift{
  0%,18%,52%,68%,100%{transform:translate3d(var(--traversal-weight-shift-x,0),var(--traversal-contact-y,0),0) rotate(var(--traversal-upper-counter-sway,0deg))}
  34%,84%{transform:translate3d(var(--traversal-weight-counter-x,0),var(--traversal-passing-y,0),0) rotate(var(--traversal-upper-sway,0deg))}
}

@keyframes journey-gear-badges-weight{
  0%,18%,52%,68%,100%{transform:translate3d(calc(var(--traversal-weight-shift-x,0px) + var(--traversal-shoulder-drift-x,0px) + var(--traversal-weapon-drift-x,0px)),0,0) rotate(var(--traversal-upper-counter-sway,0deg))}
  34%,84%{transform:translate3d(calc(var(--traversal-weight-counter-x,0px) - var(--traversal-shoulder-drift-x,0px) - var(--traversal-weapon-drift-x,0px)),var(--traversal-image-step-y,-.04px),0) rotate(var(--traversal-upper-sway,0deg))}
}

@keyframes journey-body-arrive{
  0%{transform:translateY(var(--traversal-step-y,-.2px))}
  65%{transform:translateY(var(--traversal-settle-y,.15px))}
  100%{transform:translateY(0)}
}

@keyframes journey-image-arrive{
  0%{transform:translateY(var(--traversal-image-step-y,-.1px)) scale(var(--paper-doll-scale))}
  65%{transform:translateY(var(--traversal-image-settle-y,.08px)) scale(var(--paper-doll-scale))}
  100%{transform:translateY(0) scale(var(--paper-doll-scale))}
}

@keyframes journey-footstep-puff{
  0%,100%{opacity:0;transform:translateX(-50%) scale(.74)}
  10%{opacity:var(--traversal-dust-contact-opacity,.18);transform:translateX(calc(-50% + var(--traversal-footstep-x,0px))) scale(.96)}
  24%{opacity:.06;transform:translateX(calc(-50% + var(--traversal-footstep-far-x,0px))) scale(1.04)}
  58%{opacity:var(--traversal-dust-contact-opacity,.18);transform:translateX(calc(-50% - var(--traversal-footstep-x,0px))) scale(.96)}
  72%{opacity:.06;transform:translateX(calc(-50% - var(--traversal-footstep-far-x,0px))) scale(1.04)}
}

@keyframes journey-scene-drift{
  0%{opacity:0;transform:translate3d(var(--traversal-drift-start-x,0),0,0)}
  20%,78%{opacity:.58}
  100%{opacity:0;transform:translate3d(var(--traversal-drift-end-x,0),-1%,0)}
}

@keyframes journey-travel-dust{
  0%,8%,100%{opacity:0;transform:translate3d(0,3%,0) scale(.86)}
  18%{opacity:.36;transform:translate3d(var(--traversal-footstep-x,0),1%,0) scale(.98)}
  34%{opacity:.08;transform:translate3d(var(--traversal-dust-end-x,0),-1%,0) scale(1.1)}
  56%{opacity:.32;transform:translate3d(var(--traversal-passing-counter-drift-x,0),1%,0) scale(.98)}
  74%{opacity:.08;transform:translate3d(var(--traversal-dust-end-x,0),-2%,0) scale(1.12)}
}

@keyframes journey-foreground-drift{
  0%{opacity:0;transform:translate3d(var(--traversal-drift-start-x,0),2%,0) scale(1.02)}
  24%,74%{opacity:.52}
  100%{opacity:0;transform:translate3d(var(--traversal-drift-end-x,0),0,0) scale(1)}
}

@keyframes journey-ember-drift{
  0%{opacity:0;transform:translate3d(0,1.5%,0)}
  18%,78%{opacity:.38}
  100%{opacity:0;transform:translate3d(var(--traversal-drift-end-x,0),-3%,0)}
}

@keyframes journey-focus-breathe{
  0%{opacity:0;transform:scale(1.01)}
  24%,74%{opacity:.72}
  100%{opacity:0;transform:scale(1)}
}

@keyframes journey-pose-primary-cycle{
  0%,38%,100%{opacity:1;transform:translateY(0) rotate(-.025deg)}
  56%,84%{opacity:.48;transform:translateY(.04px) rotate(.025deg)}
}

@keyframes journey-pose-secondary-cycle{
  0%,38%,100%{opacity:0;transform:translateY(.04px) rotate(.025deg)}
  56%,84%{opacity:.62;transform:translateY(0) rotate(-.025deg)}
}

@keyframes journey-pose-phase-a{
  0%,18%,100%{opacity:1;transform:translate3d(var(--traversal-weight-shift-x,0),var(--traversal-contact-y,0),0) rotate(-.05deg) skewX(-.08deg)}
  28%,88%{opacity:0;transform:translate3d(var(--traversal-passing-drift-x,0),var(--traversal-passing-y,0),0) rotate(.035deg) skewX(.06deg)}
}

@keyframes journey-pose-phase-b{
  0%,18%,100%{opacity:0;transform:translate3d(0,var(--traversal-contact-y,0),0) rotate(.02deg) skewX(.04deg)}
  30%,42%{opacity:.64;transform:translate3d(var(--traversal-passing-drift-x,0),var(--traversal-passing-y,0),0) rotate(.06deg) skewX(.1deg)}
  50%,92%{opacity:0}
}

@keyframes journey-pose-phase-c{
  0%,42%,86%,100%{opacity:0;transform:translate3d(var(--traversal-passing-counter-drift-x,0),var(--traversal-passing-y,0),0) rotate(-.035deg) skewX(-.06deg)}
  52%,68%{opacity:.9;transform:translate3d(var(--traversal-weight-counter-x,0),var(--traversal-contact-y,0),0) rotate(.05deg) skewX(.08deg)}
}

@keyframes journey-pose-phase-d{
  0%,66%,100%{opacity:0;transform:translate3d(0,var(--traversal-contact-y,0),0) rotate(-.015deg)}
  76%,90%{opacity:.6;transform:translate3d(var(--traversal-passing-counter-drift-x,0),var(--traversal-passing-y,0),0) rotate(-.06deg) skewX(-.1deg)}
}

@keyframes journey-contact-shadow{
  0%,18%,52%,68%,100%{opacity:var(--traversal-contact-shadow-contact-opacity,.46);transform:translateX(calc(-50% + var(--traversal-weight-shift-x,0px))) scaleX(calc(1.07 * var(--traversal-contact-shadow-scale,1))) scaleY(calc(.94 * var(--traversal-contact-shadow-scale,1)))}
  34%,84%{opacity:var(--traversal-contact-shadow-pass-opacity,.27);transform:translateX(calc(-50% + var(--traversal-passing-drift-x,0px))) scaleX(calc(.9 * var(--traversal-contact-shadow-scale,1))) scaleY(calc(.78 * var(--traversal-contact-shadow-scale,1)))}
}

@keyframes journey-gear-sway-left{
  0%,100%{opacity:var(--traversal-gear-sway-min-opacity,.1);transform:rotate(-.45deg) translate3d(0,0,0)}
  50%{opacity:var(--traversal-gear-sway-max-opacity,.17);transform:rotate(.72deg) translate3d(calc(var(--traversal-footstep-x,0px) + var(--traversal-weapon-drift-x,0px)),.16px,0)}
}

@keyframes journey-gear-sway-right{
  0%,100%{opacity:var(--traversal-gear-sway-max-opacity,.17);transform:rotate(.5deg) translate3d(0,.08px,0)}
  50%{opacity:var(--traversal-gear-sway-min-opacity,.1);transform:rotate(-.66deg) translate3d(calc(var(--traversal-footstep-far-x,0px) - var(--traversal-weapon-drift-x,0px)),0,0)}
}

@keyframes journey-threshold-enter{
  0%{opacity:0;transform:scale(1)}
  42%{opacity:.72}
  100%{opacity:1;transform:scale(1.03)}
}

@keyframes journey-marker-weight{
  0%,100%{transform:translate(-50%,-100%) scale(.96)}
  18%,68%{transform:translate(-50%,-100%) scale(.964)}
  42%,86%{transform:translate(-50%,calc(-100% + var(--journey-marker-lift,-.04px))) scale(.96)}
}

@keyframes journey-marker-cloak{
  0%,100%{filter:drop-shadow(0 7px 6px rgba(0,0,0,.72));clip-path:polygon(50% 0,78% 22%,88% 100%,12% 100%,22% 22%)}
  50%{filter:drop-shadow(0 9px 8px rgba(0,0,0,.78));clip-path:polygon(50% 0,82% 24%,84% 100%,16% 100%,18% 24%)}
}

@keyframes journey-marker-step-a{
  0%,18%,100%{transform:rotate(-5deg) translateY(0) !important}
  42%,86%{transform:rotate(5deg) translateY(-.35px) !important}
}

@keyframes journey-marker-step-b{
  0%,18%,100%{transform:rotate(5deg) translateY(-.25px) !important}
  42%,86%{transform:rotate(-5deg) translateY(0) !important}
}

@keyframes journey-marker-dust{
  0%,100%{opacity:0;transform:translateX(0) scale(.7) !important}
  50%{opacity:.36;transform:translateX(-2px) scale(.96) !important}
}

@keyframes journey-marker-arrive{
  0%{transform:translate(-50%,-100.4%) scale(.97)}
  100%{transform:translate(-50%,-100%) scale(.96)}
}

@media(max-width:700px){
  .world-player-presence.traversal-phase-walking .traversal-footstep-puff{
    animation-duration:var(--traversal-footstep-cycle,.7s);
  }

  .overworld-marker.traversal-map-presence{
    width:28px !important;
    height:38px !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .cinematic-world-stage .world-traversal-dust{
    opacity:0 !important;
  }

  .overworld-marker.traversal-map-presence{
    width:26px !important;
    height:34px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .cinematic-world-stage .world-parallax-drift,
  .cinematic-world-stage .world-traversal-foreground,
  .cinematic-world-stage .world-traversal-embers,
  .cinematic-world-stage .world-traversal-focus,
  .cinematic-world-stage .world-traversal-dust,
  .cinematic-world-stage .world-entry-threshold,
  .world-player-presence[data-traversal-kind],
  .world-player-presence[data-traversal-kind] .traversal-pose-layer,
  .world-player-presence[data-traversal-kind] .paper-doll-avatar,
  .world-player-presence[data-traversal-kind] .paper-doll-generated,
  .world-player-presence[data-traversal-kind] .traversal-footstep-puff,
  .world-player-presence[data-traversal-kind] .traversal-contact-shadow,
  .world-player-presence[data-traversal-kind] .traversal-gear-sway,
  .overworld-marker.traversal-map-presence,
  .overworld-marker.traversal-map-presence span{
    animation:none !important;
    transition:none !important;
  }
}

/* v71 visual world expansion: new generated scene art plus physical hotspot objects. */
.world-scene-ashen-keep-v71{
  background-color:#080706;
  filter:saturate(.95) contrast(1.08) brightness(.86);
}

.world-scene-ashen-fields-v71,
.road-stop-scene-ashen-gate-v71,
.road-stop-scene-burned-shrine-v71,
.road-stop-scene-ashen-slope-v71{
  background-color:#110806;
  filter:saturate(.92) contrast(1.1) brightness(.84);
}

.world-scene-old-road-v71,
.road-stop-scene-broken-road-v71,
.road-stop-scene-old-crossroads-v71,
.road-stop-scene-abandoned-cart-v71{
  background-color:#090a0a;
  filter:saturate(.84) contrast(1.08) brightness(.85);
}

.world-scene-forest-edge-v71,
.road-stop-scene-forest-trail-v71{
  background-color:#05100c;
  filter:saturate(.9) contrast(1.09) brightness(.8);
}

.world-scene-ruined-watchtower-v71,
.road-stop-scene-ruined-waystone-v71,
.road-stop-scene-watchtower-approach-v71,
.road-stop-scene-ridge-path-v71{
  background-color:#080a0f;
  filter:saturate(.82) contrast(1.12) brightness(.82);
}

.world-scene-market-town-v71,
.road-stop-scene-traveler-camp-v71,
.road-stop-scene-market-outskirts-v71{
  background-color:#100c08;
  filter:saturate(.98) contrast(1.07) brightness(.87);
}

.world-scene-ashen-fields-v71::after,
.road-stop-scene-ashen-gate-v71::after,
.road-stop-scene-burned-shrine-v71::after,
.road-stop-scene-ashen-slope-v71::after{
  background:
    radial-gradient(ellipse at 22% 62%,rgba(255,91,43,.2),transparent 24%),
    radial-gradient(ellipse at 78% 62%,rgba(255,141,57,.16),transparent 24%),
    radial-gradient(ellipse at 48% 72%,rgba(212,192,156,.09),transparent 34%),
    radial-gradient(ellipse at center,transparent 0 54%,rgba(0,0,0,.58) 100%) !important;
}

.world-scene-old-road-v71::after,
.road-stop-scene-broken-road-v71::after,
.road-stop-scene-old-crossroads-v71::after,
.road-stop-scene-abandoned-cart-v71::after{
  background:
    radial-gradient(ellipse at 50% 54%,rgba(206,190,154,.12),transparent 22%),
    radial-gradient(ellipse at 74% 48%,rgba(255,178,92,.12),transparent 18%),
    radial-gradient(ellipse at center,transparent 0 50%,rgba(0,0,0,.64) 100%) !important;
}

.world-scene-forest-edge-v71::after,
.road-stop-scene-forest-trail-v71::after{
  background:
    radial-gradient(ellipse at 52% 56%,rgba(112,151,112,.16),transparent 28%),
    radial-gradient(ellipse at 82% 62%,rgba(206,219,180,.09),transparent 20%),
    radial-gradient(ellipse at center,transparent 0 48%,rgba(0,0,0,.68) 100%) !important;
}

.world-scene-ruined-watchtower-v71::after,
.road-stop-scene-ruined-waystone-v71::after,
.road-stop-scene-watchtower-approach-v71::after,
.road-stop-scene-ridge-path-v71::after{
  background:
    radial-gradient(ellipse at 51% 48%,rgba(176,186,195,.13),transparent 25%),
    radial-gradient(ellipse at 78% 63%,rgba(255,203,126,.08),transparent 20%),
    radial-gradient(ellipse at center,transparent 0 48%,rgba(0,0,0,.68) 100%) !important;
}

.world-scene-market-town-v71::after,
.road-stop-scene-traveler-camp-v71::after,
.road-stop-scene-market-outskirts-v71::after{
  background:
    radial-gradient(ellipse at 48% 60%,rgba(255,183,85,.18),transparent 28%),
    radial-gradient(ellipse at 80% 58%,rgba(255,97,42,.18),transparent 22%),
    radial-gradient(ellipse at 18% 62%,rgba(255,210,132,.12),transparent 20%),
    radial-gradient(ellipse at center,transparent 0 54%,rgba(0,0,0,.55) 100%) !important;
}

.world-hotspot-icon{
  position:absolute;
  left:50%;
  top:41%;
  z-index:2;
  width:clamp(38px,4.6vw,68px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid rgba(219,166,86,.34);
  border-radius:8px;
  background-image:
    linear-gradient(180deg,rgba(255,224,154,.08),rgba(0,0,0,.2)),
    url("./assets/ui/generated/world-hotspots-v71.png");
  background-size:auto,400% 300%;
  background-repeat:no-repeat;
  box-shadow:0 10px 24px rgba(0,0,0,.44),0 0 22px rgba(255,174,82,.1),inset 0 1px 0 rgba(255,232,170,.08);
  filter:drop-shadow(0 9px 8px rgba(0,0,0,.7)) saturate(.95) contrast(1.08) brightness(.92);
  pointer-events:none;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.world-hotspot:hover:not(:disabled) .world-hotspot-icon,
.world-hotspot:focus-visible .world-hotspot-icon{
  transform:translate(-50%,-52%) scale(1.05);
  box-shadow:0 12px 26px rgba(0,0,0,.48),0 0 28px rgba(255,190,96,.22),inset 0 1px 0 rgba(255,232,170,.1);
  filter:drop-shadow(0 10px 9px rgba(0,0,0,.72)) saturate(1.02) contrast(1.1) brightness(1);
}

.world-hotspot-icon-blacksmith{background-position:center,0% 0%}
.world-hotspot-icon-inn{background-position:center,33.333% 0%}
.world-hotspot-icon-tavern{background-position:center,66.667% 0%}
.world-hotspot-icon-market{background-position:center,100% 0%}
.world-hotspot-icon-healer{background-position:center,0% 50%}
.world-hotspot-icon-gate{background-position:center,33.333% 50%}
.world-hotspot-icon-camp{background-position:center,66.667% 50%}
.world-hotspot-icon-shrine{background-position:center,100% 50%}
.world-hotspot-icon-crossroads{background-position:center,0% 100%}
.world-hotspot-icon-watchtower{background-position:center,33.333% 100%}
.world-hotspot-icon-mine{background-position:center,66.667% 100%}
.world-hotspot-icon-waystone{background-position:center,100% 100%}

.world-hotspot-label{
  top:calc(50% + 34px) !important;
  max-width:min(156px,24vw);
  white-space:normal !important;
  text-align:center;
  line-height:1.08 !important;
}

.world-hotspot-hint{
  top:calc(50% + 58px) !important;
  max-width:min(210px,30vw);
  white-space:normal !important;
  text-align:center;
  line-height:1.12;
}

.world-hotspot-blacksmith .world-hotspot-label,
.world-hotspot-blacksmith .world-hotspot-hint,
.world-hotspot-inn .world-hotspot-label,
.world-hotspot-inn .world-hotspot-hint{
  left:50% !important;
  right:auto !important;
  transform:translate(-50%,-50%) !important;
}

.world-hotspot-ember .world-hotspot-icon{
  box-shadow:0 10px 24px rgba(0,0,0,.44),0 0 22px rgba(255,101,40,.17),inset 0 1px 0 rgba(255,232,170,.08);
}

.world-hotspot-hearth .world-hotspot-icon,
.world-hotspot-lantern .world-hotspot-icon{
  box-shadow:0 10px 24px rgba(0,0,0,.44),0 0 24px rgba(255,194,94,.17),inset 0 1px 0 rgba(255,232,170,.08);
}

.world-hotspot-stone .world-hotspot-icon{
  box-shadow:0 10px 24px rgba(0,0,0,.44),0 0 18px rgba(184,188,170,.12),inset 0 1px 0 rgba(255,232,170,.06);
}

@media(max-width:700px){
  .cinematic-world-stage .world-narration-card{
    display:none !important;
  }

  .world-hotspot-icon{
    top:40%;
    width:clamp(34px,12vw,54px);
    border-radius:7px;
  }

  .world-hotspot-label{
    top:calc(50% + 28px) !important;
    max-width:min(116px,34vw);
    padding:3px 6px !important;
    font-size:9.5px !important;
  }

  .world-hotspot-hint{
    display:none !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .world-hotspot-icon{
    width:clamp(30px,6.4vw,46px);
  }

  .world-hotspot-label{
    top:calc(50% + 25px) !important;
    max-width:112px;
    padding:3px 6px !important;
    font-size:9px !important;
  }
}

/* Beneath the Throne stabilization pass: keep combat cinematic without letting motion reflow the page. */
body.cinematic-combat-active{
  overflow-x:hidden !important;
  overscroll-behavior-x:none;
}

body.cinematic-combat-active #app,
body.cinematic-combat-active #combat,
body.cinematic-combat-active .combat-shell{
  max-width:100% !important;
}

body.cinematic-combat-active .combat-shell{
  gap:8px !important;
  contain:layout paint;
}

body.cinematic-combat-active .combat-shell.combat-impact{
  animation:none !important;
}

.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header{
  min-height:64px !important;
}

.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order{
  min-height:28px !important;
}

.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions{
  min-height:154px !important;
  padding-bottom:max(8px,env(safe-area-inset-bottom)) !important;
}

.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .battle-log .log{
  min-height:72px !important;
  max-height:72px !important;
}

.combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"][data-scene-director="dynamic"]{
  height:var(--director-stage-height,clamp(500px,64vh,720px)) !important;
  max-height:var(--director-stage-height,clamp(500px,64vh,720px)) !important;
  margin:6px 0 !important;
  isolation:isolate;
  transform:translateZ(0);
  will-change:filter;
}

.combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor,
.combat-stage[data-scene-director="dynamic"] .unit.combat-card.combat-actor,
.combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor{
  visibility:visible !important;
  backface-visibility:hidden;
  transform:translate3d(-50%,0,0) scale(var(--actor-scale,1)) !important;
  transition:left .22s cubic-bezier(.24,.74,.22,1),bottom .22s cubic-bezier(.24,.74,.22,1),width .22s ease,filter .16s ease !important;
}

.combat-stage[data-scene-director="dynamic"] .portrait-wrap,
.combat-stage[data-scene-director="dynamic"] .paper-doll-frame-combat,
.combat-stage[data-scene-director="dynamic"] .paper-doll-scene,
.combat-stage[data-scene-director="dynamic"] .paper-doll,
.combat-stage[data-scene-director="dynamic"] .paper-doll-avatar,
.combat-stage[data-scene-director="dynamic"] .enemy-pose-frame,
.combat-stage[data-scene-director="dynamic"] .companion-scene-frame{
  visibility:visible !important;
  opacity:1;
}

.combat-battlefield .damage-pop,
.combat-battlefield .damage-popup,
.combat-battlefield .number-popup,
.combat-battlefield .combat-number{
  left:calc(50% + var(--combat-number-x,0px)) !important;
  top:calc(16% + var(--combat-number-y,0px)) !important;
  max-width:calc(100% - 20px) !important;
  contain:layout paint;
  animation-delay:var(--combat-number-age,0ms) !important;
  animation-duration:760ms !important;
  transform:translate3d(-50%,4px,0) !important;
}

.combat-battlefield .combat-motion-attack.combat-actor-hero .portrait-wrap,
.combat-battlefield .combat-motion-attack.combat-actor-companion .portrait-wrap{
  animation:combat-stable-player-strike .48s cubic-bezier(.2,.72,.22,1) both !important;
}

.combat-battlefield .combat-motion-enemy-attack .portrait-wrap{
  animation:combat-stable-enemy-strike .48s cubic-bezier(.2,.72,.22,1) both !important;
}

.combat-battlefield .combat-motion-hurt .portrait-wrap,
.combat-battlefield .combat-motion-enemy-hurt .portrait-wrap{
  animation:combat-stable-hurt .34s cubic-bezier(.24,.68,.24,1) both !important;
}

@keyframes combat-stable-player-strike{
  0%,100%{transform:translate3d(0,0,0)}
  38%{transform:translate3d(8px,-2px,0) scale(1.012)}
  66%{transform:translate3d(2px,-1px,0)}
}

@keyframes combat-stable-enemy-strike{
  0%,100%{transform:translate3d(0,0,0)}
  38%{transform:translate3d(-8px,-1px,0) scale(1.01)}
  66%{transform:translate3d(-2px,0,0)}
}

@keyframes combat-stable-hurt{
  0%,100%{transform:translate3d(0,0,0);filter:none}
  30%{transform:translate3d(-3px,0,0);filter:brightness(1.18) saturate(1.05)}
  58%{transform:translate3d(2px,0,0)}
}

@media(max-width:700px) and (orientation:portrait){
  body.cinematic-combat-active #app{
    padding:5px max(6px,env(safe-area-inset-right)) calc(86px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)) !important;
  }

  body.cinematic-combat-active .combat-shell{
    gap:7px !important;
    padding:6px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header{
    min-height:58px !important;
    padding:6px 7px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header h2{
    font-size:14px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order{
    min-height:30px !important;
    max-height:38px !important;
  }

  .combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"][data-scene-director="dynamic"]{
    height:var(--director-stage-height-mobile,clamp(410px,58svh,500px)) !important;
    min-height:var(--director-stage-height-mobile,clamp(410px,58svh,500px)) !important;
    max-height:var(--director-stage-height-mobile,clamp(410px,58svh,500px)) !important;
    padding:8px 7px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor,
  .combat-stage[data-scene-director="dynamic"] .unit.combat-card.combat-actor,
  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor{
    transform:translate3d(-50%,0,0) scale(var(--actor-mobile-scale,var(--actor-scale,1))) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-hero .combat-card-body,
  .combat-stage[data-scene-director="dynamic"] .combat-actor-enemy.target .combat-card-body{
    width:min(118px,94%) !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions{
    min-height:132px !important;
    padding:6px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions .grid3{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions button{
    min-height:32px !important;
    padding:5px 6px !important;
    font-size:9.5px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .battle-log .log{
    min-height:48px !important;
    max-height:48px !important;
  }

  .combat-battlefield .damage-pop,
  .combat-battlefield .damage-popup,
  .combat-battlefield .number-popup,
  .combat-battlefield .combat-number{
    top:calc(14% + var(--combat-number-y,0px)) !important;
    font-size:16px !important;
  }
}

@media(max-width:430px) and (orientation:portrait){
  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions{
    min-height:166px !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions .grid3{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-actions button{
    min-height:34px !important;
    font-size:10px !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"][data-scene-director="dynamic"]{
    height:min(var(--director-stage-height-landscape,220px),54svh) !important;
    min-height:min(var(--director-stage-height-landscape,220px),54svh) !important;
    max-height:min(var(--director-stage-height-landscape,220px),54svh) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor,
  .combat-stage[data-scene-director="dynamic"] .unit.combat-card.combat-actor,
  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor{
    transform:translate3d(-50%,0,0) scale(var(--actor-landscape-scale,var(--actor-scale,1))) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .combat-battlefield .combat-motion-attack.combat-actor-hero .portrait-wrap,
  .combat-battlefield .combat-motion-attack.combat-actor-companion .portrait-wrap,
  .combat-battlefield .combat-motion-enemy-attack .portrait-wrap,
  .combat-battlefield .combat-motion-hurt .portrait-wrap,
  .combat-battlefield .combat-motion-enemy-hurt .portrait-wrap{
    animation:none !important;
  }
}

/* Slum Prologue vertical slice */
.slum-prologue-panel{
  position:relative;
  overflow:hidden;
  max-width:100%;
  border-color:rgba(168,93,52,.86);
  background:
    linear-gradient(180deg,rgba(9,13,13,.82),rgba(4,6,7,.98)),
    radial-gradient(circle at 22% 18%,rgba(192,66,42,.18),transparent 28%),
    radial-gradient(circle at 76% 12%,rgba(103,145,125,.14),transparent 24%);
}
.slum-prologue-panel,
.slum-prologue-panel *{
  box-sizing:border-box;
  min-width:0;
}
.slum-prologue-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.18) 48%,rgba(0,0,0,.7)),
    url("./assets/towns/generated/ashen-keep-world-v71.png") center 58%/cover no-repeat;
  opacity:.34;
  pointer-events:none;
}
.slum-prologue-panel>*{
  position:relative;
  z-index:1;
}
.slum-hero{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:end;
  width:100%;
  min-height:190px;
  padding:14px;
  border:1px solid rgba(212,150,72,.52);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(9,13,13,.36),rgba(3,5,6,.78));
  box-shadow:inset 0 0 0 1px rgba(255,232,170,.045);
}
.slum-hero h1{
  display:block;
  width:100%;
  max-width:780px;
  margin:5px 0 6px;
  font-size:52px;
  line-height:.95;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.slum-hero p{
  max-width:760px;
  margin:0;
  color:#ead4af;
  font-size:15px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.slum-goal-card{
  display:grid;
  align-content:center;
  gap:8px;
  min-height:86px;
  padding:10px;
  border:1px solid rgba(103,145,125,.68);
  border-radius:8px;
  background:linear-gradient(160deg,rgba(12,32,28,.9),rgba(5,8,9,.92));
}
.slum-goal-card span,
.slum-status-row .pill{
  max-width:100%;
  overflow-wrap:anywhere;
}
.slum-goal-card span:first-child{
  color:#f4e1bd;
  font-weight:900;
}
.slum-status-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:12px 0 8px;
}
.slum-progress-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:10px 0;
}
.slum-loop-strip{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
  align-items:center;
  margin:10px 0;
  padding:8px 9px;
  border:1px solid rgba(103,145,125,.62);
  border-radius:8px;
  background:linear-gradient(90deg,rgba(12,32,28,.82),rgba(5,8,9,.9));
}
.slum-loop-strip p{
  margin:0;
  color:#e6d2ad;
  font:800 12px/1.3 system-ui,sans-serif;
}
.slum-npc-rail{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:8px;
  margin:10px 0 12px;
}
.slum-npc-card{
  min-height:104px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  grid-template-areas:
    "art role"
    "art name"
    "art label";
  align-items:center;
  gap:2px 8px;
  padding:8px;
  text-align:left;
  border-color:rgba(146,105,51,.72);
  background:
    linear-gradient(180deg,rgba(50,34,22,.92),rgba(12,13,12,.98));
}
.slum-npc-card img{
  grid-area:art;
  width:42px;
  height:86px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.66));
}
.slum-npc-card span{
  grid-area:role;
  color:#cda35f;
  font:950 9px/1 system-ui,sans-serif;
  text-transform:uppercase;
}
.slum-npc-card b{
  grid-area:name;
  color:#ffe8bd;
  font:950 13px/1.08 system-ui,sans-serif;
  overflow-wrap:anywhere;
}
.slum-npc-card small{
  grid-area:label;
  color:#d1bd98;
  font:800 10px/1.15 system-ui,sans-serif;
}
.slum-npc-card:disabled{
  opacity:.58;
}
.slum-meter{
  min-height:54px;
  padding:9px;
  border:1px solid rgba(71,101,109,.75);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(11,21,23,.92),rgba(5,8,9,.95));
}
.slum-meter .bar{
  width:100%;
}
.slum-meter .bar>div{
  max-width:100%;
  overflow:hidden;
}
.slum-meter.danger{
  border-color:rgba(157,50,54,.8);
  background:linear-gradient(180deg,rgba(39,11,13,.92),rgba(6,5,5,.95));
}
.slum-meter.warn{
  border-color:rgba(139,107,44,.8);
}
.slum-action-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:12px 0;
}
.slum-action-grid button{
  min-height:48px;
  white-space:normal;
  line-height:1.12;
}
.slum-action-groups{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.slum-group-button{
  display:grid;
  align-content:center;
  gap:4px;
  padding:10px 9px;
  text-align:left;
}
.slum-group-button span{
  color:#ffe8bd;
  font-size:14px;
  font-weight:950;
  line-height:1.05;
}
.slum-group-button small{
  color:#d0bc97;
  font:800 10px/1.15 system-ui,sans-serif;
}
.slum-log{
  display:grid;
  gap:6px;
  max-height:178px;
  overflow:auto;
  padding:8px;
  border:1px solid rgba(90,66,28,.72);
  border-radius:8px;
  background:rgba(4,7,8,.78);
}
.slum-log .entry{
  padding:7px 8px;
  border-left:3px solid rgba(240,200,91,.72);
  background:linear-gradient(90deg,rgba(240,200,91,.08),rgba(0,0,0,.08));
  color:#eadbc0;
  line-height:1.35;
}
.slum-prologue-complete{
  border-color:rgba(117,238,136,.68);
}
.slum-prologue-complete .slum-hero{
  border-color:rgba(117,238,136,.52);
}
@media(min-width:720px){
  .slum-hero{
    grid-template-columns:minmax(0,1fr) minmax(230px,300px);
  }
  .slum-progress-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .slum-action-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .slum-action-groups{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(max-width:700px){
  .slum-hero{
    min-height:0;
    padding:12px;
    gap:8px;
  }
  .slum-hero h1{
    font-size:30px;
    max-width:100%;
  }
  .slum-hero p{
    font-size:13px;
    line-height:1.32;
  }
  .slum-goal-card{
    min-height:0;
    padding:8px;
    gap:5px;
  }
  .slum-status-row{
    margin:8px 0 6px;
  }
  .slum-progress-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .slum-meter{
    min-height:48px;
    padding:7px;
  }
  .slum-meter .meter-line{
    display:grid;
    gap:2px;
    font-size:10px;
    line-height:1.05;
  }
  .slum-meter .bar{
    height:6px;
  }
  .slum-action-groups{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .slum-loop-strip{
    grid-template-columns:1fr;
  }
  .slum-npc-rail{
    display:flex;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:3px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .slum-npc-rail::-webkit-scrollbar{
    display:none;
  }
  .slum-npc-card{
    flex:0 0 132px;
    min-height:96px;
    padding:7px;
  }
}

/* Phone playtest app controls */
.topline button[data-action="app-update"]{
  border-color:rgba(117,238,136,.72);
  background:linear-gradient(180deg,rgba(21,66,42,.96),rgba(8,28,19,.98));
  color:#c9ffd0;
}
.topline button[data-action="app-update"].app-update-ready{
  border-color:#ffe56c;
  background:linear-gradient(90deg,#b98219,#ffe56c);
  color:#160e04;
  box-shadow:0 0 18px rgba(240,200,91,.22),0 3px 0 rgba(0,0,0,.42);
}
.app-update-panel{
  display:grid;
  gap:10px;
}
.app-update-panel p{
  margin:0;
}
.app-status-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.app-link{
  padding:9px;
  border:1px solid rgba(103,145,125,.6);
  border-radius:8px;
  background:rgba(4,8,9,.72);
  color:#e8dcc2;
  font-size:12px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
@media(max-width:430px){
  .topline button[data-action="app-update"]{
    min-width:86px;
  }
  .app-update-panel{
    font-size:14px;
  }
}

/* Phone combat visibility audit fix */
@media(max-width:700px) and (orientation:portrait){
  body.cinematic-combat-active .combat-shell{
    min-height:auto !important;
  }

  .combat-shell > .combat-stage.combat-battlefield[data-combat-viewport="stable"][data-scene-director="dynamic"]{
    height:clamp(520px,62svh,560px) !important;
    min-height:clamp(520px,62svh,560px) !important;
    max-height:clamp(520px,62svh,560px) !important;
    padding:8px 6px !important;
    overflow:hidden !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-area > h2{
    display:none !important;
  }

  .combat-stage[data-scene-director="dynamic"] .unit.combat-card.combat-actor.combat-actor-hero{
    --actor-mobile-x:30% !important;
    --actor-mobile-y:15% !important;
    --actor-mobile-width:158px !important;
    --actor-mobile-height:288px !important;
    --actor-mobile-art-height:250px !important;
    --actor-mobile-scale:1 !important;
    left:30% !important;
    bottom:15% !important;
    width:158px !important;
    height:288px !important;
    min-height:288px !important;
    transform:translate3d(-50%,0,0) scale(1) !important;
    z-index:10 !important;
  }

  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor.combat-actor-enemy.combat-slot-0{
    --actor-mobile-x:73% !important;
    --actor-mobile-y:14% !important;
    --actor-mobile-width:150px !important;
    --actor-mobile-height:278px !important;
    --actor-mobile-art-height:250px !important;
    --actor-mobile-scale:.98 !important;
    left:73% !important;
    bottom:14% !important;
    width:150px !important;
    height:278px !important;
    min-height:278px !important;
    transform:translate3d(-50%,0,0) scale(.98) !important;
    z-index:9 !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-companion{
    width:110px !important;
    transform:translate3d(-50%,0,0) scale(.75) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .portrait-wrap{
    bottom:48px !important;
    height:250px !important;
    min-height:250px !important;
    overflow:visible !important;
    filter:drop-shadow(0 18px 16px rgba(0,0,0,.88)) saturate(1.18) contrast(1.14) brightness(1.12) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .paper-doll-frame-combat,
  .combat-stage[data-scene-director="dynamic"] .paper-doll-scene,
  .combat-stage[data-scene-director="dynamic"] .paper-doll,
  .combat-stage[data-scene-director="dynamic"] .paper-doll-avatar,
  .combat-stage[data-scene-director="dynamic"] .enemy-pose-frame,
  .combat-stage[data-scene-director="dynamic"] .companion-scene-frame{
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-width:none !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .combat-stage[data-scene-director="dynamic"] .paper-doll-layer,
  .combat-stage[data-scene-director="dynamic"] .paper-doll-generated,
  .combat-stage[data-scene-director="dynamic"] .enemy-pose-art,
  .combat-stage[data-scene-director="dynamic"] .companion-scene-art{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    filter:drop-shadow(0 20px 14px rgba(0,0,0,.86)) saturate(1.18) contrast(1.16) brightness(1.1) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .enemy-pose-art{
    width:118% !important;
    height:118% !important;
    left:50% !important;
    bottom:-2% !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card-body{
    bottom:0 !important;
    width:min(132px,96%) !important;
    padding:4px 5px !important;
    background:linear-gradient(180deg,rgba(5,7,7,.76),rgba(0,0,0,.86)) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-name b{
    max-width:82px !important;
    font-size:9px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-name span,
  .combat-stage[data-scene-director="dynamic"] .meter-line,
  .combat-stage[data-scene-director="dynamic"] .combat-card-body .pill{
    font-size:7.5px !important;
  }
}

@media(max-width:380px) and (orientation:portrait){
  .combat-stage[data-scene-director="dynamic"] .unit.combat-card.combat-actor.combat-actor-hero{
    --actor-mobile-x:29% !important;
    --actor-mobile-width:146px !important;
    left:29% !important;
    width:146px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor.combat-actor-enemy.combat-slot-0{
    --actor-mobile-x:74% !important;
    --actor-mobile-width:138px !important;
    left:74% !important;
    width:138px !important;
  }
}

/* Phone combat readability cascade guard */
@media(max-width:700px) and (orientation:portrait){
  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor.combat-actor-enemy.combat-slot-0 .enemy-pose-frame{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    transform:none !important;
  }

  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor.combat-actor-enemy.combat-slot-0 .enemy-pose-art{
    top:auto !important;
    right:auto !important;
    bottom:-1% !important;
    left:50% !important;
    width:112% !important;
    height:112% !important;
    transform:translateX(-50%) !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    filter:drop-shadow(0 16px 12px rgba(0,0,0,.86)) saturate(1.28) contrast(1.2) brightness(1.18) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor .combat-card-body{
    left:0 !important;
    right:auto !important;
    bottom:0 !important;
    transform:none !important;
    width:min(136px,100%) !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor .combat-name{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:start !important;
    gap:3px !important;
    line-height:1.05 !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-card.combat-actor .combat-name b{
    display:block !important;
    max-width:none !important;
    overflow:visible !important;
    white-space:normal !important;
    line-height:1.05 !important;
  }

  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor .combat-card-body button{
    min-height:20px !important;
    padding:2px 6px !important;
    font-size:7.5px !important;
  }
}

/* Phone village/NPC and monster scale pass */
.world-npc-layer{
  position:absolute;
  inset:0;
  z-index:12;
  pointer-events:none;
}

.world-player-clean-presence{
  height:clamp(144px,19vh,230px);
  filter:drop-shadow(0 18px 14px rgba(0,0,0,.8)) saturate(.98) contrast(1.08) brightness(.96) !important;
}

.world-player-clean-figure{
  position:absolute;
  left:50%;
  bottom:0;
  width:100%;
  height:100%;
  transform:translateX(-50%);
  background-image:var(--world-player-idle-art);
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:contain;
}

.world-npc{
  position:absolute;
  left:var(--npc-x);
  top:var(--npc-y);
  z-index:var(--npc-z,10);
  width:clamp(44px,5.6vw,82px);
  aspect-ratio:3/4;
  transform:translate(-50%,-100%) scale(var(--npc-scale,1));
  transform-origin:50% 100%;
  opacity:.92;
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.72));
}

.world-npc-caravanTrader,
.world-npc-roadTrader{
  width:clamp(60px,7.2vw,106px);
}

.world-npc-figure{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:saturate(.9) contrast(1.06) brightness(.82);
  transform-origin:50% 100%;
  animation:btt-npc-idle 2.8s ease-in-out infinite;
  animation-delay:var(--npc-idle-delay,0ms);
}

.world-npc-shadow{
  position:absolute;
  left:50%;
  bottom:-2%;
  width:72%;
  height:12%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.64),transparent 72%);
  filter:blur(2px);
}

.world-npc-name{
  position:absolute;
  left:50%;
  bottom:-14px;
  transform:translateX(-50%);
  max-width:86px;
  padding:2px 5px;
  border:1px solid rgba(188,139,65,.38);
  border-radius:999px;
  background:rgba(4,5,5,.68);
  color:#e9d5ac;
  font-size:9px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  text-shadow:0 1px 0 #000;
  opacity:0;
}

.world-npc-tone-ember .world-npc-figure{
  filter:saturate(1.06) contrast(1.1) brightness(.9) drop-shadow(0 0 8px rgba(255,94,42,.2));
}

.world-npc-tone-lantern .world-npc-figure,
.world-npc-tone-hearth .world-npc-figure,
.world-npc-tone-market .world-npc-figure{
  filter:saturate(.98) contrast(1.06) brightness(.88) drop-shadow(0 0 8px rgba(255,194,92,.14));
}

.world-hotspot:hover ~ .world-npc-layer .world-npc-name,
.world-npc:hover .world-npc-name{
  opacity:1;
}

@media(max-width:700px) and (orientation:portrait){
  .cinematic-world-stage:not(.is-guided-traversal) .world-player-presence{
    top:min(var(--player-y),76%) !important;
    width:76px !important;
    z-index:13 !important;
  }

  .cinematic-world-stage:not(.is-guided-traversal) .world-player-clean-presence{
    height:190px !important;
  }

  .cinematic-world-stage:not(.is-guided-traversal) .world-player-presence .paper-doll-scene{
    min-height:166px !important;
    height:166px !important;
  }

  .cinematic-world-stage:not(.is-guided-traversal) .world-player-presence .paper-doll{
    transform:translateY(0) scale(1.12) !important;
    transform-origin:50% 100% !important;
  }

  .cinematic-world-stage:not(.is-guided-traversal) .world-player-presence .paper-doll-generated{
    object-position:center bottom !important;
    filter:drop-shadow(0 16px 12px rgba(0,0,0,.78)) saturate(1.02) contrast(1.08) brightness(.98) !important;
  }

  .world-npc{
    width:62px;
    opacity:.9;
  }

  .world-npc-caravanTrader,
  .world-npc-roadTrader{
    width:78px;
  }

  .world-npc-name{
    display:none;
  }

  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor.combat-actor-enemy.combat-slot-0{
    --actor-mobile-x:74% !important;
    --actor-mobile-y:12% !important;
    --actor-mobile-width:174px !important;
    --actor-mobile-height:304px !important;
    --actor-mobile-art-height:264px !important;
    --actor-mobile-scale:1 !important;
    left:74% !important;
    bottom:12% !important;
    width:174px !important;
    height:304px !important;
    min-height:304px !important;
    transform:translate3d(-50%,0,0) scale(1) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor.combat-actor-enemy.combat-slot-0 .portrait-wrap{
    bottom:82px !important;
    height:260px !important;
    min-height:260px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor.combat-actor-enemy.combat-slot-0 .enemy-pose-art{
    bottom:-6% !important;
    width:128% !important;
    height:128% !important;
    filter:drop-shadow(0 18px 13px rgba(0,0,0,.88)) saturate(1.25) contrast(1.18) brightness(1.16) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor.combat-actor-enemy.combat-slot-0 .combat-card-body{
    width:min(142px,94%) !important;
  }
}

@media(max-width:380px) and (orientation:portrait){
  .cinematic-world-stage:not(.is-guided-traversal) .world-player-presence{
    width:70px !important;
  }

  .cinematic-world-stage:not(.is-guided-traversal) .world-player-clean-presence{
    height:178px !important;
  }

  .world-npc{
    width:56px;
  }

  .world-npc-caravanTrader,
  .world-npc-roadTrader{
    width:70px;
  }

  .combat-stage[data-scene-director="dynamic"] .enemy.combat-card.combat-actor.combat-actor-enemy.combat-slot-0{
    --actor-mobile-x:75% !important;
    --actor-mobile-width:158px !important;
    width:158px !important;
  }
}

/* Phone polish v80: faster onboarding art, stable class select, and visible combat enemies. */
.v59-title-screen,
.v59-prologue-screen,
.v59-tutorial-screen,
.v59-dragon-screen,
.v59-victory-screen,
.v59-keep-wake-screen,
.v59-class-screen{
  background-image:url("./assets/tutorial/generated/v80/title-bg-mobile-v80.webp");
}

.opening-hidden-card .portrait-wrap{
  position:relative;
  overflow:visible !important;
}

.opening-survivor-art{
  position:absolute;
  left:50%;
  bottom:0;
  width:auto;
  max-width:100%;
  height:100%;
  transform:translateX(-50%);
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 24px 18px rgba(0,0,0,.8)) saturate(1.03) contrast(1.08);
}

.opening-survivor-ground{
  position:absolute;
  left:19%;
  right:19%;
  bottom:0;
  height:10%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.78),transparent 72%);
  filter:blur(5px);
}

.portrait-class-cutout{
  background-image:var(--portrait-image) !important;
  background-size:contain !important;
  background-position:center bottom !important;
  background-repeat:no-repeat !important;
}

.portrait-class-cutout .portrait-shadow{
  background:
    radial-gradient(circle at 50% 26%,transparent 0 42%,rgba(0,0,0,.1) 56%,rgba(0,0,0,.46) 100%),
    linear-gradient(180deg,rgba(0,0,0,.04),transparent 42%,rgba(0,0,0,.34));
}

.v59-class-screen{
  overflow-x:hidden;
  overscroll-behavior:contain;
  touch-action:pan-y;
}

.v59-class-path-card,
.v59-class-path-card button,
.v59-title-command,
.fantasy-action-button{
  touch-action:manipulation;
}

.combat-stage[data-scene-director="dynamic"] .combat-actor-enemy .enemy-pose-frame{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  overflow:visible !important;
  opacity:1 !important;
  visibility:visible !important;
  background:transparent !important;
  z-index:4 !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-actor-enemy .enemy-pose-art{
  position:absolute !important;
  left:50% !important;
  bottom:-2% !important;
  display:block !important;
  width:122% !important;
  height:122% !important;
  max-width:none !important;
  transform:translateX(-50%) !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  opacity:1 !important;
  visibility:visible !important;
  mix-blend-mode:normal !important;
  filter:drop-shadow(0 18px 13px rgba(0,0,0,.88)) saturate(1.24) contrast(1.18) brightness(1.17) !important;
}

@media(max-width:700px) and (orientation:portrait){
  .combat-shell > .combat-stage.combat-battlefield[data-scene-director="dynamic"]{
    min-height:min(520px,56svh) !important;
    max-height:56svh !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-enemy.combat-slot-0{
    --actor-mobile-x:73% !important;
    --actor-mobile-y:12% !important;
    --actor-mobile-width:178px !important;
    --actor-mobile-height:312px !important;
    --actor-mobile-art-height:272px !important;
    z-index:18 !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-enemy.combat-slot-0 .portrait-wrap{
    bottom:82px !important;
    height:272px !important;
    min-height:272px !important;
    overflow:visible !important;
    z-index:5 !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-hero{
    --actor-mobile-x:29% !important;
    --actor-mobile-width:126px !important;
    z-index:16 !important;
  }

  .v59-class-screen{
    min-height:100svh;
    max-width:100vw;
    padding:6px;
  }

  .v59-class-hero{
    min-height:250px !important;
    margin-bottom:8px;
    border-radius:8px;
  }

  .v59-class-copy{
    margin:10px !important;
    width:calc(100% - 20px) !important;
    padding:12px !important;
  }

  .v59-class-copy h1{
    font-size:30px !important;
  }

  .v59-class-copy p,
  .v59-class-copy span{
    font-size:12px !important;
  }

  .v59-class-path-grid{
    gap:8px;
    padding-bottom:14px;
  }

  .v59-class-path-card{
    min-height:0 !important;
    grid-template-columns:118px minmax(0,1fr) !important;
    align-items:stretch;
    border-radius:8px;
  }

  .v59-class-card-visual{
    min-height:176px !important;
  }

  .v59-class-card-visual .portrait-art{
    width:110% !important;
    height:calc(100% - 8px) !important;
    bottom:4px !important;
  }

  .v59-class-path-card .class-card-copy{
    padding:8px !important;
  }

  .v59-class-path-card .class-card-copy h2{
    font-size:22px !important;
    margin:2px 0 5px;
  }

  .v59-class-path-card .class-flavor{
    font-size:11px !important;
    line-height:1.2;
    margin-bottom:5px;
  }

  .v59-class-stat-row{
    margin:4px 0;
  }

  .v59-class-stat-row .pill{
    padding:2px 5px !important;
    font-size:9px !important;
  }

  .v59-class-abilities{
    min-height:0 !important;
    margin:5px 0 7px;
    font-size:10px !important;
    line-height:1.18;
  }
}

@media(max-width:380px) and (orientation:portrait){
  .combat-stage[data-scene-director="dynamic"] .combat-actor-enemy.combat-slot-0{
    --actor-mobile-x:74% !important;
    --actor-mobile-width:166px !important;
    --actor-mobile-height:298px !important;
    --actor-mobile-art-height:258px !important;
  }

  .v59-class-path-card{
    grid-template-columns:104px minmax(0,1fr) !important;
  }

  .v59-class-card-visual{
    min-height:162px !important;
  }
}

/* Phone polish v81: tutorial enemy grounding and class-select scroll lock. */
@media(max-width:700px) and (orientation:portrait){
  body.start-lock:has(.v59-class-screen){
    overflow:hidden !important;
    height:100dvh;
  }

  body.start-lock:has(.v59-class-screen) #setup{
    height:100dvh;
    max-height:100dvh;
    overflow:hidden !important;
  }

  .v59-class-screen{
    position:fixed !important;
    inset:0 !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    padding:8px 8px calc(18px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;
  }

  .v59-class-path-grid{
    padding-bottom:calc(22px + env(safe-area-inset-bottom)) !important;
  }

  .v59-class-path-card button{
    min-height:42px;
  }

  .opening-combat-stage{
    display:block !important;
    position:relative !important;
    min-height:min(650px,72svh) !important;
    max-height:none !important;
    padding-top:92px !important;
    overflow:hidden !important;
  }

  .opening-combat-stage .opening-guidance-card{
    top:10px !important;
    width:calc(100% - 28px) !important;
    max-width:420px;
  }

  .opening-combat-stage .combat-area{
    position:absolute !important;
    inset:0 !important;
    min-height:0 !important;
    display:block !important;
    pointer-events:none;
  }

  .opening-combat-stage .combat-area > h2{
    display:none !important;
  }

  .opening-combat-stage .combat-party-grid,
  .opening-combat-stage .combat-enemy-grid{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    min-height:0 !important;
    padding:0 !important;
  }

  .opening-combat-stage .opening-hidden-card{
    position:absolute !important;
    left:31% !important;
    bottom:8% !important;
    width:160px !important;
    height:380px !important;
    min-height:380px !important;
    transform:translateX(-50%) !important;
    z-index:7 !important;
  }

  .opening-combat-stage.combat-battlefield .combat-party-grid:not(:has(.combat-actor-companion)) .combat-actor-hero.opening-hidden-card{
    left:38% !important;
    right:auto !important;
    bottom:8% !important;
    width:150px !important;
    height:380px !important;
    min-height:380px !important;
    transform:translateX(-50%) !important;
  }

  .opening-combat-stage .opening-hidden-card .portrait-wrap{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:86px !important;
    height:278px !important;
    min-height:278px !important;
  }

  .opening-combat-stage .opening-hidden-card .combat-card-body{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
  }

  .opening-combat-stage .enemy.combat-card{
    position:absolute !important;
    left:74% !important;
    bottom:9% !important;
    width:154px !important;
    height:302px !important;
    min-height:302px !important;
    transform:translateX(-50%) !important;
    overflow:visible !important;
    z-index:8 !important;
  }

  .opening-combat-stage.combat-battlefield .combat-enemy-grid .combat-actor-enemy.combat-slot-0.enemy-scale-small{
    left:74% !important;
    right:auto !important;
    bottom:9% !important;
    width:150px !important;
    height:302px !important;
    min-height:302px !important;
    transform:translateX(-50%) !important;
  }

  .opening-combat-stage .enemy .portrait-wrap{
    position:absolute !important;
    left:-8% !important;
    right:-8% !important;
    bottom:78px !important;
    height:224px !important;
    min-height:224px !important;
    overflow:visible !important;
    z-index:5 !important;
  }

  .opening-combat-stage .enemy .enemy-pose-frame{
    position:absolute !important;
    inset:0 !important;
    height:100% !important;
    min-height:100% !important;
    display:block !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .opening-combat-stage .enemy .enemy-pose-art{
    position:absolute !important;
    left:50% !important;
    bottom:-4% !important;
    width:132% !important;
    height:132% !important;
    max-width:none !important;
    transform:translateX(-50%) !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:drop-shadow(0 16px 12px rgba(0,0,0,.82)) saturate(1.08) contrast(1.12) brightness(1.06) !important;
  }

  .opening-combat-stage .enemy .combat-card-body{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    transform:none !important;
  }
}

@media(max-width:380px) and (orientation:portrait){
  .opening-combat-stage .opening-hidden-card{
    left:30% !important;
    width:148px !important;
  }

  .opening-combat-stage .enemy.combat-card{
    left:75% !important;
    width:144px !important;
  }
}

/* Phone combat pack audit v83: brighter field art and safe multi-actor staging. */
.combat-backdrop.has-combat-art{
  filter:saturate(1.08) contrast(1.08) brightness(.9) !important;
}

.combat-backdrop.backdrop-environmental.has-combat-art{
  filter:saturate(1.08) contrast(1.08) brightness(.98) !important;
}

.combat-backdrop.has-combat-art::before{
  background:
    linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.18) 44%,rgba(0,0,0,.62)),
    linear-gradient(90deg,rgba(0,0,0,.26),transparent 30%,transparent 70%,rgba(0,0,0,.32)),
    radial-gradient(ellipse at center,transparent 0 52%,rgba(0,0,0,.48) 100%) !important;
}

.combat-shell > .combat-stage.combat-battlefield[data-scene-director="dynamic"]::before{
  background:
    linear-gradient(180deg,rgba(3,4,5,.03),rgba(2,3,4,.14) 44%,rgba(0,0,0,.44)),
    radial-gradient(ellipse at 50% 84%,rgba(0,0,0,.12),rgba(0,0,0,.46) 80%),
    var(--combat-stage-art,none) center 56%/cover no-repeat !important;
}

.combat-shell > .combat-stage.combat-battlefield[data-scene-director="dynamic"]::after{
  opacity:.3 !important;
}

.combat-stage[data-scene-director="dynamic"] .combat-atmosphere-layer{
  opacity:.82 !important;
}

@media(max-width:700px) and (orientation:portrait){
  .combat-shell > .combat-stage.combat-battlefield[data-scene-director="dynamic"].director-density-balanced,
  .combat-shell > .combat-stage.combat-battlefield[data-scene-director="dynamic"].director-density-crowded{
    height:clamp(540px,64svh,592px) !important;
    min-height:clamp(540px,64svh,592px) !important;
    max-height:clamp(540px,64svh,592px) !important;
  }

  .combat-stage[data-scene-director="dynamic"].director-density-balanced .combat-card.combat-actor,
  .combat-stage[data-scene-director="dynamic"].director-density-crowded .combat-card.combat-actor{
    left:var(--actor-mobile-x,var(--actor-x,50%)) !important;
    right:auto !important;
    bottom:var(--actor-mobile-y,var(--actor-y,0)) !important;
    width:var(--actor-mobile-width,var(--actor-width,120px)) !important;
    height:var(--actor-mobile-height,230px) !important;
    min-height:var(--actor-mobile-height,230px) !important;
    transform:translate3d(-50%,0,0) scale(var(--actor-mobile-scale,var(--actor-scale,1))) !important;
    z-index:var(--actor-z,5) !important;
    opacity:var(--actor-opacity,1) !important;
  }

  .combat-stage[data-scene-director="dynamic"].director-density-balanced .combat-card.combat-actor .portrait-wrap,
  .combat-stage[data-scene-director="dynamic"].director-density-crowded .combat-card.combat-actor .portrait-wrap{
    bottom:38px !important;
    height:var(--actor-mobile-art-height,190px) !important;
    min-height:var(--actor-mobile-art-height,190px) !important;
    overflow:visible !important;
  }

  .combat-stage[data-scene-director="dynamic"].director-density-balanced .combat-card.combat-actor .enemy-pose-art,
  .combat-stage[data-scene-director="dynamic"].director-density-crowded .combat-card.combat-actor .enemy-pose-art{
    width:112% !important;
    height:112% !important;
    bottom:-2% !important;
  }

  .combat-stage[data-scene-director="dynamic"].director-density-balanced .combat-actor-hero .combat-card-body,
  .combat-stage[data-scene-director="dynamic"].director-density-crowded .combat-actor-hero .combat-card-body,
  .combat-stage[data-scene-director="dynamic"].director-density-balanced .combat-actor-enemy.target .combat-card-body,
  .combat-stage[data-scene-director="dynamic"].director-density-crowded .combat-actor-enemy.target .combat-card-body{
    display:block !important;
    width:min(118px,94%) !important;
    opacity:1 !important;
  }

  .combat-stage[data-scene-director="dynamic"].director-density-crowded .combat-actor-companion .combat-card-body,
  .combat-stage[data-scene-director="dynamic"].director-density-crowded .combat-actor-enemy:not(.target) .combat-card-body{
    display:none !important;
  }

  .combat-stage[data-scene-director="dynamic"].director-density-balanced .combat-actor-companion .combat-card-body,
  .combat-stage[data-scene-director="dynamic"].director-density-balanced .combat-actor-enemy:not(.target) .combat-card-body{
    width:min(84px,78%) !important;
    opacity:.7 !important;
  }
}

/* Phone combat pack specificity guard v84: beat older 1v1 hero/enemy slot rules. */
@media(max-width:700px) and (orientation:portrait){
  .combat-stage[data-scene-director="dynamic"].director-density-balanced .unit.combat-card.combat-actor.combat-actor-hero,
  .combat-stage[data-scene-director="dynamic"].director-density-balanced .unit.combat-card.combat-actor.combat-actor-companion,
  .combat-stage[data-scene-director="dynamic"].director-density-balanced .enemy.combat-card.combat-actor.combat-actor-enemy,
  .combat-stage[data-scene-director="dynamic"].director-density-crowded .unit.combat-card.combat-actor.combat-actor-hero,
  .combat-stage[data-scene-director="dynamic"].director-density-crowded .unit.combat-card.combat-actor.combat-actor-companion,
  .combat-stage[data-scene-director="dynamic"].director-density-crowded .enemy.combat-card.combat-actor.combat-actor-enemy{
    left:var(--actor-mobile-x,var(--actor-x,50%)) !important;
    right:auto !important;
    bottom:var(--actor-mobile-y,var(--actor-y,0)) !important;
    width:var(--actor-mobile-width,var(--actor-width,120px)) !important;
    height:var(--actor-mobile-height,230px) !important;
    min-height:var(--actor-mobile-height,230px) !important;
    transform:translate3d(-50%,0,0) scale(var(--actor-mobile-scale,var(--actor-scale,1))) !important;
    z-index:var(--actor-z,5) !important;
  }

  .combat-stage[data-scene-director="dynamic"].director-density-balanced .unit.combat-card.combat-actor.combat-actor-hero .portrait-wrap,
  .combat-stage[data-scene-director="dynamic"].director-density-balanced .unit.combat-card.combat-actor.combat-actor-companion .portrait-wrap,
  .combat-stage[data-scene-director="dynamic"].director-density-balanced .enemy.combat-card.combat-actor.combat-actor-enemy .portrait-wrap,
  .combat-stage[data-scene-director="dynamic"].director-density-crowded .unit.combat-card.combat-actor.combat-actor-hero .portrait-wrap,
  .combat-stage[data-scene-director="dynamic"].director-density-crowded .unit.combat-card.combat-actor.combat-actor-companion .portrait-wrap,
  .combat-stage[data-scene-director="dynamic"].director-density-crowded .enemy.combat-card.combat-actor.combat-actor-enemy .portrait-wrap{
    bottom:38px !important;
    height:var(--actor-mobile-art-height,190px) !important;
    min-height:var(--actor-mobile-art-height,190px) !important;
  }
}

/* Phone tutorial polish v88: faster opening, compact combat actions, and safer dragon captions. */
.v59-transition-active .v59-title-lockup,
.v59-transition-active .v59-title-menu{
  animation-duration:420ms !important;
}

.v59-transition-active .v59-fog-a,
.v59-transition-active .v59-fog-b{
  animation-duration:420ms !important;
}

@media(max-width:700px) and (orientation:portrait){
  .v59-title-screen{
    align-content:end;
    min-height:100dvh;
  }

  .v59-title-lockup{
    padding-bottom:0 !important;
  }

  .v59-title-lockup h1{
    font-size:clamp(46px,18vw,70px) !important;
  }

  .v59-title-menu{
    padding:10px;
  }

  .opening-combat-stage{
    height:min(500px,55svh) !important;
    min-height:min(500px,55svh) !important;
    max-height:min(500px,55svh) !important;
    padding-top:64px !important;
  }

  .v59-tutorial-screen .opening-combat-stage.combat-battlefield[data-combat-viewport="stable"]{
    height:min(500px,55svh) !important;
    min-height:min(500px,55svh) !important;
    max-height:min(500px,55svh) !important;
    padding-top:64px !important;
  }

  .opening-combat-stage .opening-guidance-card{
    padding:8px 10px !important;
  }

  .opening-combat-stage .opening-guidance-card p{
    font-size:12px !important;
    line-height:1.25 !important;
  }

  .opening-combat-stage .opening-hidden-card{
    left:34% !important;
    bottom:7% !important;
    width:138px !important;
    height:330px !important;
    min-height:330px !important;
  }

  .opening-combat-stage.combat-battlefield .combat-party-grid:not(:has(.combat-actor-companion)) .combat-actor-hero.opening-hidden-card{
    left:34% !important;
    bottom:7% !important;
    width:138px !important;
    height:330px !important;
    min-height:330px !important;
  }

  .opening-combat-stage .opening-hidden-card .portrait-wrap{
    bottom:72px !important;
    height:236px !important;
    min-height:236px !important;
  }

  .opening-combat-stage .enemy.combat-card,
  .opening-combat-stage.combat-battlefield .combat-enemy-grid .combat-actor-enemy.combat-slot-0.enemy-scale-small{
    left:73% !important;
    bottom:8% !important;
    width:140px !important;
    height:270px !important;
    min-height:270px !important;
  }

  .opening-combat-stage .enemy .portrait-wrap{
    bottom:66px !important;
    height:198px !important;
    min-height:198px !important;
  }

  .opening-tutorial-action-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  .opening-tutorial-action-grid button{
    min-height:38px !important;
    padding:6px 5px !important;
    font-size:12px !important;
    line-height:1.05 !important;
  }

  .v59-tutorial-screen .opening-combat-log{
    display:none !important;
  }

  .opening-dragon-stage .opening-guidance-card.opening-dragon-moment{
    top:auto !important;
    bottom:12px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:92px !important;
    overflow:auto !important;
    padding:8px 10px !important;
  }

  .v59-dragon-screen .opening-dragon-stage.combat-battlefield[data-combat-viewport="stable"]{
    height:min(500px,55svh) !important;
    min-height:min(500px,55svh) !important;
    max-height:min(500px,55svh) !important;
  }

  .v59-dragon-screen .opening-combat-log{
    display:none !important;
  }

  .opening-dragon-stage .opening-guidance-card.opening-dragon-moment p{
    font-size:12px !important;
    line-height:1.25 !important;
  }

  .v59-class-hero{
    min-height:205px !important;
  }

  .v59-class-copy h1{
    font-size:28px !important;
  }
}

@media(max-width:380px) and (orientation:portrait){
  .opening-combat-stage .opening-hidden-card,
  .opening-combat-stage.combat-battlefield .combat-party-grid:not(:has(.combat-actor-companion)) .combat-actor-hero.opening-hidden-card{
    left:33% !important;
    width:128px !important;
  }

  .opening-combat-stage .enemy.combat-card,
  .opening-combat-stage.combat-battlefield .combat-enemy-grid .combat-actor-enemy.combat-slot-0.enemy-scale-small{
    left:74% !important;
    width:132px !important;
  }
}

/* Phone Playtest 21: class paths, weapon mastery, and spell schools. */
.progress-tab-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}

.progress-tab-row button{
  min-height:38px;
  padding:6px 5px;
  font-size:12px;
  line-height:1.08;
}

.progression-summary-grid{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
  margin:6px 0;
}

.progress-class-grid,
.mastery-track-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:9px;
}

.progress-class-card,
.mastery-track-card{
  border-color:rgba(142,111,61,.68);
  background:linear-gradient(180deg,rgba(18,20,18,.92),rgba(6,8,8,.96));
  box-shadow:inset 0 0 18px rgba(230,176,84,.04);
}

.progress-class-card.is-active,
.mastery-track-card.is-active{
  border-color:rgba(228,187,92,.95);
  box-shadow:0 0 18px rgba(227,169,73,.12),inset 0 0 18px rgba(230,176,84,.06);
}

.progress-class-card.is-unlocked{
  border-color:rgba(103,143,86,.8);
}

.progress-class-card h3,
.mastery-track-card h3{
  margin-top:0;
  font-size:18px;
}

.mastery-track-card .bar{
  margin-top:7px;
}

@media(max-width:520px){
  .progress-tab-row{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
  }

  .progress-tab-row button{
    min-height:34px;
    padding:5px 3px;
    font-size:10px;
  }

  .progress-class-grid,
  .mastery-track-grid{
    grid-template-columns:1fr;
  }
}

/* Phone Playtest 22: hard-area fight zones. */
.hard-area-panel{
  border-color:rgba(146,57,43,.74);
  background:linear-gradient(180deg,rgba(24,13,11,.94),rgba(6,7,7,.98));
}

.hard-area-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}

.hard-area-head h2{
  margin:4px 0;
  color:#ffd8a0;
}

.hard-area-head p{
  margin:0;
  color:#d8c0a2;
  font-weight:700;
}

.hard-area-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:9px;
}

.hard-area-card{
  border-color:rgba(154,70,48,.74);
  background:radial-gradient(circle at 74% 10%,rgba(170,54,38,.14),transparent 34%),linear-gradient(180deg,rgba(18,14,12,.94),rgba(5,6,6,.98));
}

.hard-area-card.under-level{
  box-shadow:inset 0 0 0 1px rgba(237,169,74,.12);
}

.hard-area-card h3{
  margin-top:0;
  color:#ffe2b5;
}

.hard-area-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:8px 0;
}

.hard-area-card button.danger{
  width:100%;
  min-height:42px;
  border-color:rgba(196,75,58,.86);
  background:linear-gradient(180deg,#6b2119,#250c09);
}

@media(max-width:520px){
  .hard-area-grid{
    grid-template-columns:1fr;
  }

  .hard-area-card h3{
    font-size:18px;
  }
}

/* Phone Playtest 23: companion roster, tactics, bond, and training. */
.party-command-panel{
  border-color:rgba(129,104,70,.72);
}

.party-command-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.party-command-head h1{
  margin-bottom:5px;
}

.party-command-head p{
  margin:0;
  color:#d9c4a4;
  font-weight:700;
}

.party-summary-pills,
.companion-stat-row,
.hard-area-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
}

.party-roster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px;
}

.companion-card{
  border-color:rgba(127,112,86,.72);
  background:radial-gradient(circle at 80% 6%,rgba(182,126,65,.1),transparent 34%),linear-gradient(180deg,rgba(18,18,16,.94),rgba(5,6,6,.98));
}

.companion-card.is-active{
  border-color:rgba(119,157,85,.82);
  box-shadow:0 0 18px rgba(106,160,88,.1),inset 0 0 18px rgba(230,176,84,.04);
}

.companion-card.is-benched{
  opacity:.86;
}

.companion-card-head{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}

.companion-card-actor{
  width:76px;
  height:104px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 10px 8px rgba(0,0,0,.7));
  transform-origin:50% 100%;
}

.companion-card-head h2{
  margin:4px 0 6px;
  color:#ffe2b8;
}

.companion-meter{
  margin:8px 0;
}

.companion-progress-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:9px 0;
}

.companion-progress-pair b,
.companion-progress-pair small{
  display:block;
}

.companion-progress-pair small{
  color:#d2b894;
  font-weight:800;
  margin-top:3px;
}

.companion-tactics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin:9px 0;
}

.companion-tactics button{
  min-height:34px;
  padding:5px 4px;
  font-size:11px;
}

.companion-actions{
  margin-top:8px;
}

.companion-book p{
  margin:8px 0;
}

@media(max-width:520px){
  .party-command-head{
    display:block;
  }

  .party-summary-pills{
    margin-top:8px;
  }

  .party-roster-grid{
    grid-template-columns:1fr;
  }

  .companion-progress-pair{
    grid-template-columns:1fr;
  }
}

/* Phone Playtest 24: companion attack, spell, weapon, and guard combat motion. */
.combat-battlefield .combat-spell-effect{
  position:absolute;
  left:50%;
  top:48%;
  z-index:7;
  width:62%;
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.64);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  filter:blur(.1px) saturate(1.12);
  animation:combat-spell-burst .58s cubic-bezier(.18,.82,.28,1) forwards;
}

.combat-battlefield .combat-spellFire-effect{
  background:
    radial-gradient(circle,rgba(255,238,166,.86) 0 9%,rgba(255,112,39,.52) 23%,rgba(102,17,10,.16) 52%,transparent 72%),
    conic-gradient(from 18deg,transparent,rgba(255,176,82,.62),transparent,rgba(255,71,38,.45),transparent);
  box-shadow:0 0 22px rgba(255,97,44,.4);
}

.combat-battlefield .combat-spellFrost-effect{
  background:
    radial-gradient(circle,rgba(229,248,255,.78) 0 8%,rgba(120,207,255,.42) 28%,rgba(45,76,112,.14) 54%,transparent 74%),
    conic-gradient(from 45deg,transparent,rgba(186,235,255,.48),transparent,rgba(105,172,255,.34),transparent);
  border:1px solid rgba(194,235,255,.42);
  box-shadow:0 0 22px rgba(117,192,255,.3);
}

.combat-battlefield .combat-spellStorm-effect{
  background:
    radial-gradient(circle,rgba(248,245,166,.78) 0 7%,rgba(125,183,255,.44) 28%,rgba(78,65,160,.16) 56%,transparent 74%),
    linear-gradient(112deg,transparent 0 35%,rgba(255,244,128,.85) 36% 39%,transparent 40% 100%);
  box-shadow:0 0 22px rgba(125,183,255,.34);
}

.combat-battlefield .combat-spellHoly-effect,
.combat-battlefield .combat-spellHeal-effect{
  background:
    radial-gradient(circle,rgba(255,246,210,.88) 0 10%,rgba(240,200,91,.5) 30%,rgba(68,129,91,.18) 54%,transparent 74%),
    conic-gradient(from 0deg,rgba(255,246,210,.18),transparent,rgba(240,200,91,.42),transparent,rgba(255,246,210,.18));
  box-shadow:0 0 24px rgba(240,200,91,.34);
}

.combat-battlefield .combat-spellShadow-effect{
  background:
    radial-gradient(circle,rgba(210,194,255,.52) 0 10%,rgba(81,54,120,.36) 32%,rgba(10,8,18,.2) 56%,transparent 75%),
    conic-gradient(from 32deg,transparent,rgba(142,93,214,.38),transparent,rgba(28,18,50,.42),transparent);
  box-shadow:0 0 22px rgba(125,92,210,.24);
}

.combat-battlefield .combat-spellMana-effect,
.combat-battlefield .combat-spellWard-effect{
  background:
    radial-gradient(circle,rgba(201,224,255,.78) 0 9%,rgba(93,148,205,.42) 31%,rgba(36,67,109,.16) 56%,transparent 75%),
    conic-gradient(from 90deg,rgba(125,183,255,.38),transparent,rgba(199,225,255,.36),transparent,rgba(125,183,255,.38));
  border:1px solid rgba(157,204,255,.4);
  box-shadow:0 0 24px rgba(125,183,255,.3);
}

.combat-battlefield .combat-motion-cast.combat-actor-companion .companion-scene-art{
  animation:combat-companion-cast .58s cubic-bezier(.18,.78,.24,1) both !important;
}

.combat-battlefield .combat-motion-brace.combat-actor-companion .companion-scene-art{
  animation:combat-companion-brace .5s cubic-bezier(.2,.72,.24,1) both !important;
}

.combat-battlefield .combat-motion-hurt.combat-actor-companion .companion-scene-art{
  animation:combat-companion-hurt .38s cubic-bezier(.2,.72,.24,1) both !important;
}

.combat-battlefield .combat-motion-cast.combat-actor-hero .portrait-wrap{
  animation:combat-hero-cast-frame .56s cubic-bezier(.18,.78,.24,1) both !important;
}

.combat-battlefield .combat-motion-brace.combat-actor-hero .portrait-wrap{
  animation:combat-hero-brace-frame .48s cubic-bezier(.2,.72,.24,1) both !important;
}

.combat-battlefield .combat-motion-brace .combat-spellWard-effect{
  animation-name:combat-ward-lock;
}

@keyframes combat-spell-burst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.42) rotate(-18deg)}
  34%{opacity:.9;transform:translate(-50%,-50%) scale(.92) rotate(5deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.18) rotate(26deg)}
}

@keyframes combat-ward-lock{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.62)}
  40%{opacity:.82;transform:translate(-50%,-50%) scale(.98)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}
}

@keyframes combat-companion-cast{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  32%{transform:translateX(-50%) translateY(-7px) scale(1.018);filter:var(--actor-grade-secondary) brightness(1.16)}
  62%{transform:translateX(-50%) translateY(-2px) scale(1.006)}
}

@keyframes combat-companion-brace{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  38%{transform:translateX(calc(-50% - 4px)) translateY(2px) scale(.985);filter:var(--actor-grade-secondary) brightness(1.08)}
  68%{transform:translateX(calc(-50% - 2px)) translateY(1px) scale(.992)}
}

@keyframes combat-companion-hurt{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  26%{transform:translateX(calc(-50% - 5px)) translateY(0) scale(.992);filter:var(--actor-grade-secondary) brightness(1.2) saturate(1.05)}
  56%{transform:translateX(calc(-50% + 3px)) translateY(1px) scale(.996)}
}

@keyframes combat-hero-cast-frame{
  0%,100%{transform:translate3d(0,0,0)}
  36%{transform:translate3d(0,-5px,0) scale(1.01)}
  64%{transform:translate3d(0,-1px,0)}
}

@keyframes combat-hero-brace-frame{
  0%,100%{transform:translate3d(0,0,0)}
  36%{transform:translate3d(-4px,2px,0) scale(.992)}
  66%{transform:translate3d(-1px,1px,0)}
}

@media(max-width:700px) and (orientation:portrait){
  .combat-battlefield .combat-spell-effect{
    width:72%;
    top:44%;
  }
}

@media(prefers-reduced-motion:reduce){
  .combat-battlefield .combat-spell-effect,
  .combat-battlefield .combat-motion-cast.combat-actor-companion .companion-scene-art,
  .combat-battlefield .combat-motion-brace.combat-actor-companion .companion-scene-art,
  .combat-battlefield .combat-motion-hurt.combat-actor-companion .companion-scene-art,
  .combat-battlefield .combat-motion-cast.combat-actor-hero .portrait-wrap,
  .combat-battlefield .combat-motion-brace.combat-actor-hero .portrait-wrap{
    animation:none !important;
  }
}

/* Phone Playtest 25: visible building NPCs and readable combat companions. */
.scene-anchor[data-anchor-visual="npc"][data-anchor-has-model="true"]{
  min-width:92px !important;
  min-height:138px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  text-shadow:0 1px 0 #000,0 0 9px rgba(0,0,0,.95);
}

.scene-anchor[data-anchor-visual="npc"][data-anchor-has-model="true"]::before{
  display:none !important;
}

.scene-anchor[data-anchor-visual="npc"][data-anchor-has-model="true"] .scene-anchor-shadow{
  left:50% !important;
  bottom:18px !important;
  width:64px !important;
  height:14px !important;
  opacity:.72 !important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.74),transparent 72%) !important;
  filter:blur(2px) !important;
}

.scene-anchor[data-anchor-visual="npc"][data-anchor-has-model="true"] .scene-anchor-presence{
  position:absolute !important;
  left:50% !important;
  bottom:17px !important;
  width:82px !important;
  height:122px !important;
  margin:0 !important;
  transform:translateX(-50%) !important;
  border-radius:0 !important;
  background-image:var(--anchor-model) !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center bottom !important;
  box-shadow:none !important;
  filter:drop-shadow(0 14px 11px rgba(0,0,0,.82)) saturate(1.05) contrast(1.08) brightness(.94);
}

.scene-anchor[data-anchor-visual="npc"][data-anchor-has-model="true"] > span:last-child{
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  z-index:3 !important;
  transform:translateX(-50%) !important;
  min-width:76px !important;
  max-width:104px !important;
  padding:6px 7px !important;
  border:1px solid rgba(185,125,55,.78) !important;
  border-radius:7px !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.18),transparent 18%,transparent 82%,rgba(0,0,0,.2)),
    linear-gradient(180deg,rgba(126,86,45,.96),rgba(48,30,19,.98)) !important;
  box-shadow:0 8px 14px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,230,166,.13);
  color:#fff0c7;
  font-size:11px !important;
  line-height:1.05 !important;
  overflow-wrap:anywhere;
}

.scene-anchor-recruit[data-anchor-visual="npc"][data-anchor-has-model="true"] .scene-anchor-presence,
.scene-anchor-companion[data-anchor-visual="npc"][data-anchor-has-model="true"] .scene-anchor-presence{
  width:88px !important;
  height:130px !important;
}

.scene-anchor-guard[data-anchor-visual="npc"][data-anchor-has-model="true"] .scene-anchor-presence,
.scene-npc-guard[data-anchor-visual="npc"][data-anchor-has-model="true"] .scene-anchor-presence,
.scene-npc-blacksmith[data-anchor-visual="npc"][data-anchor-has-model="true"] .scene-anchor-presence{
  width:90px !important;
  height:132px !important;
}

.scene-anchor[data-anchor-visual="npc"][data-anchor-has-model="true"]:hover:not(:disabled){
  transform:translate(-50%,-50%) scale(calc(var(--anchor-scale,1) * 1.05)) !important;
}

.scene-anchor[data-anchor-visual="npc"][data-anchor-has-model="true"]:hover:not(:disabled) .scene-anchor-presence{
  filter:drop-shadow(0 16px 12px rgba(0,0,0,.84)) saturate(1.1) contrast(1.1) brightness(1.02);
}

@media(max-width:700px){
  .scene-anchor[data-anchor-visual="npc"][data-anchor-has-model="true"]{
    min-width:82px !important;
    min-height:124px !important;
  }

  .scene-anchor[data-anchor-visual="npc"][data-anchor-has-model="true"] .scene-anchor-presence{
    width:70px !important;
    height:106px !important;
    bottom:17px !important;
  }

  .scene-anchor[data-anchor-visual="npc"][data-anchor-has-model="true"] > span:last-child{
    min-width:64px !important;
    max-width:88px !important;
    padding:5px 6px !important;
    font-size:10px !important;
  }

  .scene-anchor-recruit[data-anchor-visual="npc"][data-anchor-has-model="true"] .scene-anchor-presence,
  .scene-anchor-companion[data-anchor-visual="npc"][data-anchor-has-model="true"] .scene-anchor-presence{
    width:76px !important;
    height:112px !important;
  }
}

@media(max-width:700px) and (orientation:portrait){
  .combat-stage[data-scene-director="dynamic"] .unit.combat-card.combat-actor.combat-actor-companion.combat-slot-1{
    left:var(--actor-mobile-x,15%) !important;
    bottom:var(--actor-mobile-y,22%) !important;
    width:112px !important;
    height:248px !important;
    min-height:248px !important;
    transform:translate3d(-50%,0,0) scale(var(--actor-mobile-scale,.9)) !important;
    opacity:1 !important;
  }

  .combat-stage[data-scene-director="dynamic"] .unit.combat-card.combat-actor.combat-actor-companion.combat-slot-2{
    width:96px !important;
    height:236px !important;
    min-height:236px !important;
    transform:translate3d(-50%,0,0) scale(var(--actor-mobile-scale,.78)) !important;
    opacity:.96 !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-companion .portrait-wrap{
    bottom:34px !important;
    height:216px !important;
    min-height:216px !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-companion .companion-scene-frame{
    overflow:visible !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-companion .companion-scene-art{
    width:142% !important;
    height:142% !important;
    bottom:-8% !important;
    opacity:.96 !important;
    filter:drop-shadow(0 18px 13px rgba(0,0,0,.84)) saturate(1.02) contrast(1.08) brightness(.98) !important;
  }

  .combat-stage[data-scene-director="dynamic"] .combat-actor-companion.combat-slot-1 .combat-card-body{
    display:block !important;
    width:min(104px,98%) !important;
    opacity:.88 !important;
  }
}

/* Phone Playtest 26: Chapter 1 contracts, companion progression, and supporter store shell. */
.slum-contract-board{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(191,144,78,.34);
  background:linear-gradient(180deg,rgba(20,16,13,.9),rgba(8,8,8,.94));
  box-shadow:inset 0 0 24px rgba(0,0,0,.42);
}
.slum-contract-head,
.supporter-hero{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.slum-contract-head h2,
.supporter-hero h1,
.supporter-roadmap h2{
  margin:5px 0 4px;
}
.slum-contract-head p,
.supporter-hero p,
.supporter-card p,
.supporter-roadmap p{
  margin:0;
  color:var(--muted);
  line-height:1.35;
}
.slum-contract-progress,
.supporter-rules{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.slum-contract-grid,
.supporter-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.slum-contract-active{
  margin-top:10px;
}
.slum-contract-card,
.supporter-card,
.supporter-roadmap{
  border:1px solid rgba(191,144,78,.32);
  background:linear-gradient(180deg,rgba(39,28,19,.9),rgba(10,9,8,.96));
  padding:10px;
  border-radius:6px;
}
.slum-contract-card.is-active{
  border-color:rgba(236,198,113,.66);
  box-shadow:0 0 18px rgba(222,164,82,.18);
}
.slum-contract-card.is-boss{
  border-color:rgba(173,69,63,.68);
}
.slum-contract-card-head,
.supporter-card-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
}
.slum-contract-card h3,
.supporter-card h2{
  font-size:18px;
  margin:8px 0 5px;
}
.slum-contract-card p{
  min-height:54px;
  margin:0 0 8px;
  color:var(--muted);
  line-height:1.32;
}
.slum-contract-card>small{
  display:block;
  min-height:31px;
  color:var(--gold);
  margin-bottom:8px;
  line-height:1.25;
}
.slum-contract-complete-row,
.supporter-includes{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
}
.supporter-shell{
  padding:14px;
}
.supporter-card{
  min-height:286px;
}
.supporter-includes span{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:4px 7px;
  border:1px solid rgba(211,171,95,.22);
  background:rgba(0,0,0,.24);
  border-radius:5px;
  color:#ead6ad;
  font-size:12px;
}
.supporter-roadmap{
  margin-top:10px;
}
.supporter-interest-note{
  margin:10px 0 0;
  color:var(--gold);
}
@media(max-width:520px){
  .slum-contract-head,
  .supporter-hero{
    display:block;
  }
  .slum-contract-progress,
  .supporter-rules{
    justify-content:flex-start;
    margin-top:8px;
  }
  .slum-contract-grid,
  .supporter-grid{
    grid-template-columns:1fr;
  }
  .slum-contract-card,
  .supporter-card{
    min-height:auto;
  }
  .slum-contract-card p{
    min-height:auto;
  }
}

/* Phone Playtest 27: compact Cinderhook command view and safer combat header scrolling. */
.slum-contract-summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(120px,auto);
  gap:10px;
  align-items:center;
  margin:10px 0;
  padding:10px;
  border:1px solid rgba(191,144,78,.38);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(24,18,14,.92),rgba(6,7,7,.96));
  box-shadow:inset 0 0 20px rgba(0,0,0,.38);
}
.slum-contract-summary.is-boss{
  border-color:rgba(173,69,63,.7);
  background:linear-gradient(180deg,rgba(38,16,15,.92),rgba(7,6,6,.96));
}
.slum-contract-summary h2{
  margin:5px 0 4px;
  font-size:22px;
  line-height:1.05;
}
.slum-contract-summary p{
  margin:0;
  color:#dfcaa6;
  line-height:1.32;
}
.slum-contract-summary small{
  display:block;
  margin-top:6px;
  color:#f1c77b;
  line-height:1.25;
}
.slum-summary-actions{
  display:grid;
  gap:7px;
  min-width:120px;
}
.slum-summary-actions .pill,
.slum-summary-actions button{
  width:100%;
}
.slum-drawer{
  margin:8px 0;
  border:1px solid rgba(121,91,45,.52);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(13,11,10,.88),rgba(4,5,5,.95));
  overflow:hidden;
}
.slum-drawer>summary{
  cursor:pointer;
  list-style:none;
  min-height:42px;
  padding:11px 12px;
  color:#f1d6a0;
  font:950 13px/1.15 system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:0;
}
.slum-drawer>summary::-webkit-details-marker{
  display:none;
}
.slum-drawer>summary::after{
  content:"+";
  float:right;
  color:#b99054;
  font-size:16px;
}
.slum-drawer[open]>summary::after{
  content:"-";
}
.slum-drawer[open]{
  padding-bottom:8px;
}
.slum-drawer .slum-loop-strip,
.slum-drawer .slum-npc-rail,
.slum-drawer .slum-log{
  margin-left:8px;
  margin-right:8px;
}
.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header{
  min-width:0 !important;
  overflow:hidden !important;
}
.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header>div{
  min-width:0 !important;
}
.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:4px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  max-height:none !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order::-webkit-scrollbar{
  display:none;
}
.combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order .pill{
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:106px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
@media(max-width:520px){
  .slum-contract-summary{
    grid-template-columns:1fr;
    gap:8px;
  }
  .slum-contract-summary h2{
    font-size:18px;
  }
  .slum-summary-actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
    min-width:0;
  }
  .slum-summary-actions .pill,
  .slum-summary-actions button{
    min-height:34px;
    padding:6px 7px;
    font-size:10px;
  }
  .slum-drawer>summary{
    min-height:38px;
    padding:10px;
    font-size:11px;
  }
  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .combat-header{
    grid-template-columns:1fr !important;
    gap:4px !important;
  }
  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order{
    min-height:28px !important;
    max-height:34px !important;
  }
  .combat-shell:has(.combat-stage[data-scene-director="dynamic"]) .turn-order .pill{
    max-width:82px !important;
    padding:3px 6px !important;
    font-size:9px !important;
  }
}

/* Phone Playtest 29: Lower Ward visible NPCs, building cards, and dialogue polish. */
.lower-ward-scene{
  position:relative;
  min-height:286px;
  overflow:hidden;
  border:1px solid rgba(185,142,76,.46);
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(24,30,31,.9),rgba(8,9,9,.96) 58%,rgba(19,13,10,.98)),
    linear-gradient(90deg,rgba(67,91,91,.28),transparent 42%,rgba(142,88,48,.22));
  box-shadow:inset 0 0 34px rgba(0,0,0,.5),0 14px 28px rgba(0,0,0,.24);
}
.lower-ward-street-art,
.lower-ward-street-art span{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.lower-ward-skyline{
  background:
    linear-gradient(90deg,transparent 0 5%,rgba(0,0,0,.34) 5% 12%,transparent 12% 18%,rgba(0,0,0,.38) 18% 26%,transparent 26% 35%,rgba(0,0,0,.33) 35% 45%,transparent 45% 56%,rgba(0,0,0,.4) 56% 69%,transparent 69% 78%,rgba(0,0,0,.34) 78% 88%,transparent 88%),
    linear-gradient(180deg,rgba(210,170,92,.08),transparent 32%);
  clip-path:polygon(0 34%,10% 29%,16% 35%,22% 24%,32% 36%,43% 25%,51% 37%,61% 28%,70% 39%,82% 26%,90% 34%,100% 30%,100% 100%,0 100%);
  opacity:.72;
}
.lower-ward-gatehouse{
  inset:28% 6% 0 6%;
  border-top:2px solid rgba(196,154,83,.26);
  background:
    linear-gradient(90deg,rgba(0,0,0,.52),transparent 16%,transparent 84%,rgba(0,0,0,.52)),
    repeating-linear-gradient(90deg,rgba(255,229,160,.06) 0 1px,transparent 1px 22px),
    linear-gradient(180deg,rgba(86,63,42,.2),rgba(0,0,0,.18));
  clip-path:polygon(0 18%,18% 9%,32% 16%,50% 4%,67% 15%,83% 8%,100% 20%,100% 100%,0 100%);
}
.lower-ward-lamps{
  background:
    linear-gradient(180deg,transparent 0 44%,rgba(236,189,98,.16) 45% 47%,transparent 49%),
    linear-gradient(90deg,transparent 0 16%,rgba(240,198,105,.24) 16% 17%,transparent 18% 42%,rgba(240,198,105,.2) 42% 43%,transparent 44% 72%,rgba(240,198,105,.22) 72% 73%,transparent 74%);
  opacity:.72;
}
.lower-ward-vignette{
  background:linear-gradient(90deg,rgba(0,0,0,.76),transparent 16%,transparent 84%,rgba(0,0,0,.76)),linear-gradient(180deg,rgba(0,0,0,.18),transparent 35%,rgba(0,0,0,.64));
}
.lower-ward-scene-status{
  position:absolute;
  z-index:3;
  left:9px;
  right:9px;
  top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.lower-ward-npc{
  position:absolute;
  z-index:4;
  left:var(--npc-x);
  top:var(--npc-y);
  width:118px;
  min-height:132px;
  display:grid;
  grid-template-rows:78px auto auto auto;
  justify-items:center;
  gap:2px;
  transform:translate(-50%,-50%);
  padding:6px;
  border:1px solid rgba(185,142,76,.42);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(34,25,18,.78),rgba(5,6,6,.9));
  box-shadow:0 10px 18px rgba(0,0,0,.42);
  white-space:normal;
}
.lower-ward-npc img{
  width:60px;
  height:78px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 9px 8px rgba(0,0,0,.76));
}
.lower-ward-npc span{
  color:#d0a362;
  font:950 9px/1 system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:0;
}
.lower-ward-npc b{
  max-width:100%;
  color:#ffe9bf;
  font:950 12px/1.05 system-ui,sans-serif;
  overflow-wrap:anywhere;
  text-align:center;
}
.lower-ward-npc small{
  color:#cfbea0;
  font:850 9px/1.1 system-ui,sans-serif;
}
.lower-ward-npc:hover:not(:disabled){
  transform:translate(-50%,-50%) scale(1.03);
}
.lower-ward-building-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:0 8px 8px;
}
.lower-ward-building-card{
  display:grid;
  gap:5px;
  min-height:132px;
  padding:9px;
  text-align:left;
  border:1px solid rgba(154,108,54,.48);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(31,24,18,.92),rgba(7,8,8,.98));
  white-space:normal;
}
.lower-ward-building-card b{
  color:#ffe8bd;
  font:950 16px/1.05 system-ui,sans-serif;
}
.lower-ward-building-card small{
  color:#d4c0a0;
  font:800 11px/1.25 system-ui,sans-serif;
}
.lower-ward-building-card em{
  align-self:end;
  color:#86d89b;
  font:950 10px/1.1 system-ui,sans-serif;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:0;
}
.lower-ward-dialogue-stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.lower-ward-quest-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:0 8px 8px;
}
.lower-ward-quest{
  display:grid;
  gap:6px;
  padding:9px;
  border:1px solid rgba(123,91,45,.48);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(26,22,18,.92),rgba(7,8,8,.98));
}
.lower-ward-quest.is-active{
  border-color:rgba(117,238,136,.54);
}
.lower-ward-quest.is-ready{
  border-color:rgba(236,198,113,.7);
  box-shadow:0 0 16px rgba(236,198,113,.12);
}
.lower-ward-quest.is-claimed{
  opacity:.78;
  border-color:rgba(117,238,136,.52);
}
.lower-ward-quest h3{
  margin:0;
  color:#ffe6b5;
  font-size:17px;
  line-height:1.05;
}
.lower-ward-quest p{
  margin:0;
  color:#d7c4a4;
  line-height:1.28;
}
.supporter-readiness-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}
.supporter-readiness-item{
  display:grid;
  gap:6px;
  min-height:128px;
  padding:10px;
  text-align:left;
  white-space:normal;
  border:1px solid rgba(162,116,58,.46);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(32,24,18,.92),rgba(8,8,8,.98));
}
.supporter-readiness-item.is-done{
  border-color:rgba(117,238,136,.58);
  background:linear-gradient(180deg,rgba(19,42,28,.9),rgba(7,8,8,.98));
}
.supporter-readiness-item b{
  color:#ffe8bd;
  font:950 15px/1.05 system-ui,sans-serif;
}
.supporter-readiness-item small{
  color:#d7c4a4;
  font:800 11px/1.25 system-ui,sans-serif;
}
@media(max-width:700px){
  .lower-ward-scene{
    min-height:300px;
  }
  .lower-ward-npc{
    width:96px;
    min-height:118px;
    grid-template-rows:66px auto auto auto;
    padding:5px;
  }
  .lower-ward-npc img{
    width:52px;
    height:66px;
  }
  .lower-ward-npc b{
    font-size:10px;
  }
  .lower-ward-npc small{
    font-size:8px;
  }
  .lower-ward-building-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .lower-ward-quest-list,
  .supporter-readiness-grid{
    grid-template-columns:1fr;
  }
  .lower-ward-building-card{
    min-height:116px;
  }
}
@media(max-width:420px){
  .lower-ward-scene{
    min-height:316px;
  }
  .lower-ward-npc{
    width:88px;
  }
  .lower-ward-npc-clerk{
    --npc-x:18%;
    --npc-y:62%;
  }
  .lower-ward-npc-trainer{
    --npc-x:42%;
  }
  .lower-ward-npc-companion{
    --npc-x:66%;
    --npc-y:64%;
  }
  .lower-ward-npc-bailiff{
    --npc-x:85%;
  }
  .lower-ward-npc b{
    font-size:9px;
  }
}

/* v122: posed tutorial actors, idle NPCs, Kael/dragon motion, party sprites */
@keyframes btt-npc-idle{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-3px) rotate(-1.2deg)}
}
@keyframes btt-npc-idle-centered{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(0deg)}
  50%{transform:translateX(-50%) translateY(-3px) rotate(-1.1deg)}
}
@keyframes btt-kael-idle{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(0deg)}
  50%{transform:translateX(-50%) translateY(-5px) rotate(-0.8deg)}
}
@keyframes btt-dragon-idle{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-6px) rotate(0.4deg)}
}
@keyframes btt-actor-idle{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-4px) rotate(-0.9deg)}
}
@keyframes btt-actor-hit{
  0%{transform:translateX(0)}
  25%{transform:translateX(7px) rotate(1.4deg)}
  50%{transform:translateX(-6px)}
  75%{transform:translateX(3px)}
  100%{transform:translateX(0)}
}
@keyframes btt-kael-hit{
  0%{transform:translateX(-50%)}
  25%{transform:translateX(calc(-50% + 8px)) rotate(1.6deg)}
  50%{transform:translateX(calc(-50% - 7px))}
  75%{transform:translateX(calc(-50% + 3px))}
  100%{transform:translateX(-50%)}
}

.btt-npc-idle{
  transform-origin:50% 100%;
  animation:btt-npc-idle 2.8s ease-in-out infinite;
  animation-delay:var(--npc-idle-delay,0ms);
}

.opening-hidden-card .paper-doll-frame,
.opening-hidden-card .paper-doll-frame-compact,
.opening-hidden-card .paper-doll-frame-combat{
  width:100%;
  max-width:none;
  height:100%;
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
}
.opening-hidden-card .paper-doll-scene{
  min-height:220px;
  height:100%;
}
.v59-prologue-figure .opening-hidden-card,
.opening-protected-survivor .opening-hidden-card{
  height:clamp(250px,42vh,430px);
}
.opening-hidden-card .paper-doll-generated,
.opening-hidden-card .paper-doll-avatar{
  filter:drop-shadow(0 18px 14px rgba(0,0,0,.78));
}

.opening-kael-actor.is-idle img,
.opening-kael-actor:not(.is-hit) img{
  animation:btt-kael-idle 3.4s ease-in-out infinite;
  transform-origin:50% 88%;
}
.opening-dragon-actor.is-idle img,
.opening-dragon-actor:not(.is-hit) img{
  animation:btt-dragon-idle 4.2s ease-in-out infinite;
  transform-origin:70% 86%;
}
.opening-kael-actor.is-hit img{
  animation:btt-kael-hit .46s cubic-bezier(.2,.7,.2,1) both;
  filter:drop-shadow(0 24px 16px rgba(0,0,0,.74)) saturate(1.12) brightness(1.18);
}
.opening-dragon-actor.is-hit img{
  animation:btt-actor-hit .48s cubic-bezier(.2,.7,.2,1) both;
  filter:drop-shadow(0 30px 24px rgba(0,0,0,.82)) saturate(1.1) brightness(1.14);
}

.opening-survivor-plate{
  left:6%;
  right:6%;
  bottom:-6px;
  z-index:9;
}

.scene-anchor-figure{
  object-fit:contain !important;
  object-position:center bottom !important;
  background-image:none !important;
  background-color:transparent !important;
}
.scene-anchor[data-anchor-visual="npc"][data-anchor-has-model="true"] .scene-anchor-figure.btt-npc-idle{
  animation-name:btt-npc-idle-centered;
  animation-duration:2.9s;
}

.slum-npc-card img,
.lower-ward-npc img{
  transform-origin:50% 100%;
}

@media(max-width:700px){
  .companion-card-head{
    grid-template-columns:64px minmax(0,1fr) auto;
  }
  .companion-card-actor{
    width:64px;
    height:88px;
  }
}

@media(max-width:700px) and (orientation:portrait){
  .opening-guidance-card.opening-guidance-dock{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:calc(100% - 16px) !important;
    margin:0 auto 6px !important;
  }
  .opening-combat-stage,
  .v59-tutorial-screen .opening-combat-stage.combat-battlefield[data-combat-viewport="stable"]{
    padding-top:8px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .btt-npc-idle,
  .world-npc-figure,
  .opening-kael-actor img,
  .opening-dragon-actor img,
  .scene-anchor-figure,
  .companion-card-actor,
  .opening-tutorial-action-grid button.is-lesson{
    animation:none !important;
  }
}

/* v124: class trees */
.class-tree-card{
  overflow:auto;
}
.class-tree{
  display:grid;
  justify-items:center;
  gap:0;
}
.class-tree-root{
  width:min(420px,100%);
}
.class-tree-fork{
  width:min(78%,520px);
  height:28px;
  margin:0 auto;
  background:
    linear-gradient(#d4a84b,#d4a84b) center top / 2px 14px no-repeat,
    linear-gradient(#d4a84b,#d4a84b) center 14px / calc(50% + 1px) 2px no-repeat,
    linear-gradient(#d4a84b,#d4a84b) 0 14px / 2px 14px no-repeat,
    linear-gradient(#d4a84b,#d4a84b) 100% 14px / 2px 14px no-repeat;
}
.class-tree-paths{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:start;
}
.class-tree-path{
  min-width:0;
  display:grid;
  gap:0;
}
.class-tree-grid{
  width:100%;
  display:grid;
  gap:0;
}
.class-tree-row{
  width:100%;
  display:grid;
  grid-template-columns:repeat(var(--tree-cols,2),minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}
.class-tree-row .class-tree-node{
  margin-top:16px;
}
.class-tree-row:first-child .class-tree-node{
  margin-top:0;
}
.class-tree-slot{
  min-height:0;
}
.class-tree-ranks,
.class-tree-path-line{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
}
.class-tree-node{
  position:relative;
  display:grid;
  gap:6px;
  padding:10px 10px 12px;
  border:1px solid rgba(185,142,76,.42);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(18,16,12,.94),rgba(6,7,8,.98));
  color:#e8d7b4;
  text-align:left;
}
.class-tree-title{
  color:#ffe7b8;
  font-size:16px;
  line-height:1.1;
  font-weight:800;
}
.class-tree-label{
  color:#d9a451;
  font-weight:700;
}
.class-tree-node p{
  margin:0;
  color:#cbb892;
  font-size:12px;
  line-height:1.35;
}
.class-tree-kicker{
  color:#d9a451;
  font:800 10px/1 system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.class-tree-req{
  color:#e0b070 !important;
}
.class-tree-ranks .class-tree-node{
  margin-top:16px;
}
.class-tree-ranks .class-tree-node::before,
.class-tree-rank.has-parent::before{
  content:"";
  position:absolute;
  left:50%;
  top:-16px;
  width:2px;
  height:16px;
  background:#d4a84b;
  transform:translateX(-50%);
}
.class-tree-ranks .class-tree-node:first-child::before{
  display:none;
}
.class-tree-path .class-tree-ranks .class-tree-node:first-child::before{
  display:block;
}
.class-tree-node.is-active{
  border-color:#f0d48a;
  box-shadow:0 0 16px rgba(212,168,75,.22),inset 0 0 18px rgba(230,176,84,.08);
}
.class-tree-node.is-unlocked{
  border-color:rgba(110,168,108,.7);
}
.class-tree-node.is-bought{
  border-color:rgba(117,238,136,.7);
  box-shadow:inset 0 0 16px rgba(90,160,88,.12);
}
.class-tree-node.is-available{
  border-color:rgba(240,204,106,.55);
}
.class-tree-node.is-locked{
  opacity:.72;
  filter:saturate(.75);
}
.class-tree-node.is-available:not(.class-tree-root){
  animation:btt-tree-available 1.6s ease-in-out infinite;
}
.class-tree-merge-fork{
  margin-top:4px;
}
.class-tree-merge{
  width:min(420px,100%);
  margin:0 auto;
}
.class-tree-merge .class-tree-node{
  margin-top:0;
}
@keyframes btt-tree-available{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.12)}
}
@media(max-width:520px){
  .class-tree-paths,
  .class-tree-row{
    gap:8px;
  }
  .class-tree-title{
    font-size:15px;
  }
  .class-tree-node button{
    min-height:36px;
  }
}
@media(max-width:380px){
  .class-tree-paths,
  .class-tree-row{
    grid-template-columns:1fr;
  }
  .class-tree-slot,
  .class-tree-fork,
  .class-tree-rank.has-parent::before{
    display:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .class-tree-node.is-available:not(.class-tree-root){
    animation:none;
  }
}

/* v125: combat target bar, skill drawer, gear empties */
.combat-target-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.combat-target-stamp{
  margin-top:4px;
}
.skill-drawer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
}
.skill-drawer-btn{
  display:grid;
  gap:6px;
  text-align:left;
  min-height:52px;
}
.skill-drawer-btn b{
  color:#ffe7b8;
}
.skill-drawer-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.skill-drawer-hint{
  margin:8px 0 0;
  color:#cbb892;
  font-size:12px;
}
.gear-slot-card.is-empty{
  padding:8px 10px;
  min-height:0;
}
.gear-slot-card.is-empty p{
  margin:0;
  color:#9a8b6c;
}

/* v126: level-up ceremony */
.top-vital-xp .bar{
  height:6px;
}
.top-vital-xp.is-level-burst .bar>div{
  box-shadow:0 0 10px rgba(240,204,106,.7);
}
.hud-token-hero.is-level-up{
  animation:btt-level-flash 1.35s ease-out;
  border-color:#f0cc6a;
  color:#ffe7b8;
}
body.level-up-open{
  overflow:hidden;
}
.level-up-back{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:18px;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 42%,rgba(48,32,10,.55),rgba(3,4,6,.88) 62%);
  animation:btt-level-jolt .42s ease-out;
}
.level-up-flash{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 40%,rgba(255,236,190,.42),transparent 58%);
  animation:btt-level-wash .7s ease-out forwards;
  pointer-events:none;
}
.level-up-rays{
  position:absolute;
  width:min(140vw,720px);
  height:min(140vw,720px);
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(240,204,106,.16) 0 8deg,transparent 8deg 22deg);
  mask-image:radial-gradient(circle,rgba(0,0,0,.9) 12%,transparent 68%);
  animation:btt-level-spin 9s linear infinite;
  pointer-events:none;
  opacity:.7;
}
.level-up-burst{
  position:absolute;
  width:min(90vw,540px);
  height:min(90vw,540px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(240,204,106,.34),transparent 68%);
  animation:btt-level-burst 1.2s ease-out;
  pointer-events:none;
}
.level-up-embers{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.level-up-embers span{
  position:absolute;
  left:calc(8% + var(--i) * 6.2%);
  bottom:-8%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ffe7b8;
  box-shadow:0 0 10px #f0cc6a;
  opacity:0;
  animation:btt-level-ember 1.8s ease-out forwards;
  animation-delay:calc(var(--i) * .07s);
}
.level-up-card{
  position:relative;
  width:min(420px,100%);
  display:grid;
  justify-items:center;
  gap:10px;
  padding:24px 18px 18px;
  text-align:center;
  border:1px solid rgba(212,168,75,.78);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(36,26,12,.97),rgba(6,7,10,.98));
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 48px rgba(212,168,75,.22),inset 0 1px 0 rgba(255,232,170,.16);
  color:#f3e8d4;
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
}
.level-up-back.is-live .level-up-card{
  animation:btt-level-enter .55s cubic-bezier(.16,1.2,.32,1) both;
}
.level-up-portrait{
  width:104px;
  filter:drop-shadow(0 0 18px rgba(240,204,106,.42));
}
.level-up-portrait .paper-doll-frame{
  width:96px;
  max-width:96px;
}
.level-up-kicker{
  margin:0;
  color:#d9a451;
  font:800 11px/1 system-ui,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.level-up-card h2{
  margin:0;
  color:#ffe7b8;
  font-size:clamp(30px,8vw,46px);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-shadow:0 0 28px rgba(240,204,106,.45);
  animation:btt-level-title .7s ease-out;
}
.level-up-name{
  margin:0;
  color:#f3e8d4;
  font-size:15px;
  font-weight:700;
}
.level-up-count{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:24px;
  font-weight:800;
}
.level-up-from{
  color:#9a8b6c;
}
.level-up-to,
.level-up-to.is-slam{
  color:#ffe7b8;
  animation:btt-level-slam .55s cubic-bezier(.2,1.4,.4,1);
}
.level-up-arrow{
  color:#d9a451;
}
.level-up-multi,
.level-up-note{
  margin:0;
  color:#cbb892;
  font-size:13px;
  line-height:1.35;
}
.level-up-gains{
  list-style:none;
  margin:6px 0 0;
  padding:0;
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.level-up-gains li{
  padding:9px 6px;
  border:1px solid rgba(185,142,76,.35);
  border-radius:8px;
  background:rgba(10,11,14,.7);
  font-size:13px;
  opacity:0;
  animation:btt-level-gain .4s ease-out forwards;
  animation-delay:calc(.48s + var(--i, 0) * .1s);
}
.level-up-gains li b{
  color:#ffe7b8;
}
.level-up-gains li.is-points{
  grid-column:1 / -1;
  border-color:rgba(240,204,106,.55);
  box-shadow:0 0 16px rgba(240,204,106,.12);
}
.level-up-note{
  opacity:0;
  animation:btt-level-gain .4s ease-out .95s forwards;
}
.level-up-continue{
  width:100%;
  min-height:46px;
  margin-top:6px;
  opacity:0;
  pointer-events:none;
}
.level-up-back.is-ready .level-up-continue{
  opacity:1;
  pointer-events:auto;
  animation:btt-level-gain .35s ease-out;
}
@keyframes btt-level-flash{
  0%,100%{filter:brightness(1)}
  35%{filter:brightness(1.55) saturate(1.2)}
}
@keyframes btt-level-wash{
  0%{opacity:1}
  100%{opacity:0}
}
@keyframes btt-level-spin{
  to{transform:rotate(360deg)}
}
@keyframes btt-level-jolt{
  0%{transform:scale(1.02)}
  18%{transform:translate(-3px,2px)}
  36%{transform:translate(3px,-2px)}
  54%{transform:translate(-2px,1px)}
  100%{transform:none}
}
@keyframes btt-level-ember{
  0%{transform:translateY(0) scale(.6);opacity:0}
  18%{opacity:1}
  100%{transform:translateY(-72vh) scale(1.2);opacity:0}
}
@keyframes btt-level-burst{
  0%{transform:scale(.4);opacity:.1}
  55%{opacity:1}
  100%{transform:scale(1.18);opacity:.5}
}
@keyframes btt-level-enter{
  0%{transform:scale(.86);opacity:0}
  100%{transform:scale(1);opacity:1}
}
@keyframes btt-level-title{
  0%{transform:scale(.68);opacity:0;letter-spacing:.32em}
  100%{transform:scale(1);opacity:1;letter-spacing:.14em}
}
@keyframes btt-level-slam{
  0%{transform:scale(1.7);opacity:0}
  100%{transform:scale(1);opacity:1}
}
@keyframes btt-level-gain{
  0%{transform:translateY(8px);opacity:0}
  100%{transform:none;opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .level-up-back,
  .level-up-flash,
  .level-up-rays,
  .level-up-burst,
  .level-up-embers span,
  .level-up-card,
  .level-up-back.is-live .level-up-card,
  .level-up-card h2,
  .level-up-to,
  .level-up-gains li,
  .level-up-note,
  .level-up-continue,
  .hud-token-hero.is-level-up{
    animation:none;
  }
  .level-up-card,
  .level-up-gains li,
  .level-up-note,
  .level-up-continue{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .level-up-rays,
  .level-up-embers,
  .level-up-flash{
    display:none;
  }
}

/* v127: chapter rails, ward now, enemy kits */
.ward-now-banner{
  margin:10px 0 12px;
  padding:12px 14px;
  border:1px solid rgba(212,168,75,.55);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(36,26,12,.92),rgba(8,9,12,.96));
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.ward-now-banner h2{
  margin:6px 0 4px;
  font-size:1.15rem;
  color:#ffe7b8;
}
.ward-now-banner p{
  margin:0 0 10px;
  color:#cbb892;
  font-size:13px;
}
.ward-now-banner button{
  width:100%;
  min-height:42px;
}
.ward-commission-board{
  display:grid;
  gap:10px;
}
.enemy-kit-rat .enemy-pose-art{
  filter:hue-rotate(-18deg) saturate(1.18) contrast(1.05);
}
.enemy-kit-bailiff .enemy-pose-art{
  filter:hue-rotate(195deg) saturate(.72) brightness(1.06);
}
.enemy-kit-knife .enemy-pose-art{
  filter:saturate(1.35) contrast(1.12);
}
.enemy-kit-captain .enemy-pose-art{
  filter:sepia(.38) contrast(1.14) brightness(.96);
}
.enemy-kit-court .enemy-pose-art{
  filter:hue-rotate(268deg) saturate(.8) brightness(1.04);
}