:root{
  --bg:#0d0a12;--panel:#17121f;--panel2:#21182b;--ink:#f4ede3;--muted:#a99bab;
  --red:#e3424a;--red2:#8f1f31;--gold:#f0b75a;--purple:#9e63ff;--teal:#4fd7c4;
  --line:rgba(255,255,255,.1);--shadow:0 25px 80px rgba(0,0,0,.48);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif;overflow-x:hidden}button{font:inherit;color:inherit}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% -20%,#3e203b 0,transparent 42%),linear-gradient(#120d18,#09070c);z-index:-3}body:after{content:"";position:fixed;inset:0;opacity:.13;background-image:linear-gradient(90deg,transparent 49%,rgba(255,255,255,.05) 50%,transparent 51%),linear-gradient(transparent 49%,rgba(255,255,255,.03) 50%,transparent 51%);background-size:48px 48px;z-index:-2;pointer-events:none}#fx-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}.topbar{height:72px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(11,8,15,.78);backdrop-filter:blur(14px);position:relative;z-index:30}.brand{display:flex;gap:12px;align-items:center;font-family:Cinzel,Georgia,serif}.brand-mark{width:38px;height:38px;border:1px solid #d2555b;display:grid;place-items:center;transform:rotate(45deg);font-weight:800;background:linear-gradient(145deg,#501827,#18101e);box-shadow:0 0 30px rgba(227,66,74,.25)}.brand-mark::first-letter{transform:rotate(-45deg)}.brand div{display:flex;flex-direction:column;letter-spacing:.12em}.brand small{font-size:9px;color:var(--muted);letter-spacing:.28em}.run-meta{display:flex;gap:26px}.run-meta div{display:flex;gap:7px;align-items:baseline}.run-meta span{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}.run-meta strong{font-family:Cinzel,Georgia,serif;color:var(--gold)}.icon-button{background:transparent;border:1px solid var(--line);border-radius:9px;width:42px;height:42px;cursor:pointer}.screen{display:none;min-height:calc(100vh - 72px);padding:36px clamp(18px,4vw,68px)}.screen.active{display:flex}.eyebrow{font-size:11px;letter-spacing:.26em;color:var(--gold);font-weight:800}.primary-button,.end-turn-button{border:0;border-radius:10px;cursor:pointer;background:linear-gradient(180deg,#ec4e55,#9e2636);box-shadow:0 12px 40px rgba(185,37,53,.36),inset 0 1px rgba(255,255,255,.25);font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:16px 24px;transition:.2s}.primary-button:hover,.end-turn-button:hover{transform:translateY(-2px);filter:brightness(1.12)}.ghost-button{border:1px solid var(--line);background:rgba(255,255,255,.04);padding:13px 18px;border-radius:9px;cursor:pointer}.ghost-button:hover{background:rgba(255,255,255,.09)}
#title-screen{align-items:center;justify-content:space-between;gap:5vw;overflow:hidden}.hero-panel{max-width:680px;z-index:2}.hero-panel h1{font:800 clamp(54px,7vw,104px)/.92 Cinzel,Georgia,serif;margin:20px 0 24px;text-shadow:0 10px 50px #000}.hero-panel h1 span{color:var(--red)}.hero-panel p{font-size:18px;line-height:1.75;color:#c3b7c4;max-width:640px}.hero-panel .primary-button{margin-top:24px}.feature-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:32px;color:#897d8d;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.feature-row span:before{content:"◆";color:var(--red);margin-right:8px}.title-art{width:min(42vw,600px);aspect-ratio:1;position:relative;display:grid;place-items:center}.moon{position:absolute;width:66%;height:66%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff4d6,#e48b78 20%,#782839 54%,#190f1d 72%);box-shadow:0 0 100px rgba(222,68,78,.22)}.ember-ring{position:absolute;width:82%;height:82%;border-radius:50%;border:2px solid rgba(238,87,76,.35);box-shadow:0 0 50px rgba(255,73,58,.25),inset 0 0 60px rgba(255,81,45,.2);animation:pulse 3s infinite}.title-sigil{z-index:2;font-size:140px;filter:drop-shadow(0 10px 20px #000);color:#130d16;text-shadow:0 0 12px #ff634d}.blade{position:absolute;width:15px;height:105%;background:linear-gradient(90deg,#352a38,#f5e8d1 45%,#6c5b6b 58%,#181018);clip-path:polygon(45% 0,65% 10%,57% 83%,78% 91%,55% 100%,35% 91%,48% 83%);z-index:1}.blade-a{transform:rotate(42deg)}.blade-b{transform:rotate(-42deg)}@keyframes pulse{50%{transform:scale(1.04);opacity:.65}}
.section-heading{width:100%;text-align:center;max-width:850px;margin:0 auto 30px}.section-heading h2{font:700 clamp(31px,4vw,52px) Cinzel,Georgia,serif;margin:14px 0}.section-heading p{color:var(--muted);line-height:1.7}.class-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;width:min(1200px,100%);margin:auto}.class-card{min-height:540px;border:1px solid var(--line);border-radius:18px;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--class-a),#15101b 52%);box-shadow:var(--shadow);cursor:pointer;transition:.28s}.class-card:hover{transform:translateY(-8px);border-color:var(--class-b);box-shadow:0 30px 80px rgba(0,0,0,.58),0 0 40px color-mix(in srgb,var(--class-b) 25%,transparent)}.class-art{height:250px;position:relative;background:radial-gradient(circle at 50% 40%,var(--class-b),transparent 60%)}.class-art:before{content:"";position:absolute;left:50%;bottom:-12px;width:145px;height:230px;transform:translateX(-50%);background:linear-gradient(150deg,#2d2434,#09070b);clip-path:polygon(39% 0,65% 4%,80% 25%,75% 45%,95% 100%,3% 100%,24% 46%,18% 24%);filter:drop-shadow(0 15px 18px #000)}.class-art:after{content:attr(data-icon);position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-size:74px;filter:drop-shadow(0 8px 12px #000)}.class-copy{padding:24px}.class-copy h3{font:700 28px Cinzel,Georgia,serif;margin:0 0 6px}.class-role{font-size:11px;color:var(--class-b);text-transform:uppercase;letter-spacing:.15em;font-weight:800}.class-copy p{color:#b3a6b5;line-height:1.6;min-height:76px}.mechanic{background:rgba(255,255,255,.045);border-left:3px solid var(--class-b);padding:12px;margin:18px 0;font-size:13px;line-height:1.5}.class-tags{display:flex;gap:8px;flex-wrap:wrap}.class-tags span{font-size:10px;text-transform:uppercase;letter-spacing:.11em;padding:6px 8px;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:6px}
#battle-screen{padding:18px 28px 12px;flex-direction:column;gap:14px;min-height:calc(100vh - 72px)}.battle-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}.status-card{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,rgba(36,28,44,.94),rgba(18,14,23,.94));border:1px solid var(--line);border-radius:12px;padding:11px 14px;box-shadow:0 10px 35px rgba(0,0,0,.35)}.enemy-card{justify-content:flex-end}.portrait{width:62px;height:62px;border-radius:10px;background:radial-gradient(circle at 50% 30%,var(--accent,#e34a4f),#18101d 68%);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12)}.portrait:after{content:"";position:absolute;left:17px;top:12px;width:28px;height:46px;background:#0e0a11;clip-path:polygon(25% 0,75% 0,100% 25%,78% 44%,95% 100%,5% 100%,22% 44%,0 25%)}.enemy-portrait:after{clip-path:polygon(20% 0,80% 0,100% 28%,82% 100%,18% 100%,0 28%)}.status-main{flex:1;min-width:0}.name-line{display:flex;justify-content:space-between;align-items:center;gap:12px}.name-line h3{margin:0;font:700 15px Cinzel,Georgia,serif;white-space:nowrap}.name-line span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.bar{height:17px;background:#0b080e;border-radius:4px;margin:7px 0;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.07)}.bar i{display:block;height:100%;background:linear-gradient(90deg,#8c2032,#ef4c50);transition:width .35s}.enemy-health i{background:linear-gradient(90deg,#552487,#b457f2)}.bar b{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;text-shadow:0 1px 3px #000}.resource-line{display:flex;gap:12px;align-items:center;color:#c7bdc8;font-size:11px}.turn-info{text-align:center}.turn-info span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.18em}.turn-info strong{font:700 16px Cinzel,Georgia,serif}.arena{flex:1;min-height:285px;border:1px solid var(--line);border-radius:16px;position:relative;overflow:hidden;background:radial-gradient(ellipse at center 85%,rgba(111,45,57,.5),transparent 48%),linear-gradient(180deg,#21172c 0,#110d17 58%,#27151c 59%,#120b10 100%);box-shadow:inset 0 0 100px #000,0 12px 45px rgba(0,0,0,.35)}.arena:before{content:"";position:absolute;left:0;right:0;bottom:40%;height:2px;background:linear-gradient(90deg,transparent,#9f4052,transparent);box-shadow:0 0 18px #d24a53}.arena:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 7%,rgba(255,255,255,.025) 7.1% 7.4%);opacity:.5}.arena-lights{position:absolute;inset:-30% 0 0;background:conic-gradient(from 250deg at 20% 0,transparent 0 12deg,rgba(243,90,75,.12) 13deg 22deg,transparent 23deg 360deg),conic-gradient(from 105deg at 80% 0,transparent 0 12deg,rgba(158,99,255,.13) 13deg 22deg,transparent 23deg 360deg)}.combatant{position:absolute;bottom:12%;width:150px;height:200px;z-index:2}.hero-combatant{left:18%}.enemy-combatant{right:18%}.shadow{position:absolute;width:150px;height:25px;bottom:0;border-radius:50%;background:rgba(0,0,0,.6);filter:blur(7px)}.fighter-body{position:absolute;left:30px;bottom:12px;width:92px;height:165px;background:linear-gradient(135deg,var(--accent,#ad2c42),#1a111e 55%);clip-path:polygon(35% 0,65% 0,84% 18%,77% 42%,100% 100%,0 100%,23% 43%,16% 18%);filter:drop-shadow(0 13px 10px #000)}.fighter-body:before{content:"";position:absolute;width:38px;height:45px;left:27px;top:-10px;background:#100b13;border-radius:50% 50% 35% 35%;box-shadow:0 0 13px var(--accent,#d53d4b)}.fighter-weapon{position:absolute;width:12px;height:145px;background:linear-gradient(90deg,#463848,#e7d8c5,#302638);right:-24px;top:10px;transform:rotate(22deg);clip-path:polygon(40% 0,70% 0,56% 78%,100% 85%,53% 100%,10% 85%,45% 78%)}.enemy-body{background:linear-gradient(135deg,var(--enemy-accent,#6e3b9f),#160e1d 58%);transform:scaleX(-1)}.enemy-core{position:absolute;left:34px;top:42px;width:22px;height:22px;border-radius:50%;background:#f0b75a;box-shadow:0 0 24px #ff6d58}.intent-panel{position:absolute;left:50%;top:24px;transform:translateX(-50%);text-align:center;background:rgba(8,6,11,.78);border:1px solid var(--line);border-radius:10px;padding:9px 18px;z-index:3;min-width:170px}.intent-panel span,.intent-panel small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.12em}.intent-panel strong{display:block;margin:4px 0;color:var(--gold);font:700 18px Cinzel,Georgia,serif}.battle-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.piles{display:flex;gap:8px}.pile{width:58px;height:58px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:8px;cursor:pointer}.pile strong,.pile span{display:block}.pile strong{font:700 18px Cinzel,Georgia,serif}.pile span{font-size:9px;color:var(--muted);text-transform:uppercase}.energy-orb{text-align:center;width:120px;height:58px;border-radius:50%;background:radial-gradient(circle,#6340a4,#21142f 64%,#0c0810 67%);display:flex;justify-content:center;align-items:baseline;gap:4px;box-shadow:0 0 28px rgba(142,86,230,.35);border:1px solid #9e63ff}.energy-orb strong{font:800 25px Cinzel,Georgia,serif}.energy-orb span{font-size:10px}.end-turn-button{justify-self:end;padding:13px 18px}.end-turn-button span{font-size:9px;opacity:.6;margin-left:8px}.hand{height:210px;display:flex;justify-content:center;align-items:flex-end;gap:clamp(3px,.6vw,10px);perspective:1000px;padding:0 70px}.card{width:150px;height:202px;flex:0 0 150px;border-radius:11px;padding:9px;position:relative;background:linear-gradient(160deg,var(--card-a,#37293e),#130f18 60%);border:1px solid var(--rarity,#887d8e);box-shadow:0 12px 24px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.12);cursor:pointer;transition:transform .18s,filter .18s;overflow:hidden;user-select:none}.hand .card:hover{transform:translateY(-28px) scale(1.08);z-index:10;filter:brightness(1.12)}.card.unplayable{filter:saturate(.25) brightness(.6);cursor:not-allowed}.card-head{display:flex;justify-content:space-between;align-items:center}.card-cost{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#8454d2,#2c163c);border:1px solid #c2a6ee;font:800 14px Cinzel,Georgia,serif;box-shadow:0 0 10px rgba(158,99,255,.4)}.card-type{font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:#aaa0ad}.card-art{height:72px;margin:7px 0;border-radius:6px;border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;font-size:34px;background:radial-gradient(circle at 50% 38%,var(--card-glow,#7a324f),#15101a 70%);text-shadow:0 0 16px var(--card-glow,#d45)}.card h4{font:700 13px Cinzel,Georgia,serif;margin:2px 0 7px;text-align:center}.card p{font-size:10px;line-height:1.38;color:#d1c8d3;margin:0;text-align:center}.card-keyword{color:var(--gold);font-weight:700}.card-rarity{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rarity)}.float-text{position:absolute;font:800 26px Cinzel,Georgia,serif;text-shadow:0 3px 8px #000;z-index:8;animation:floatUp 1s forwards;pointer-events:none}.float-damage{color:#ff655e}.float-block{color:#7bc9ff}.float-heal{color:#7cf2b2}.float-resource{color:#d19cff}@keyframes floatUp{to{transform:translateY(-70px) scale(1.2);opacity:0}}.hero-hit{animation:heroHit .35s}.enemy-hit{animation:enemyHit .35s}.hero-attack{animation:heroAttack .38s}.enemy-attack{animation:enemyAttack .5s}@keyframes heroHit{35%{transform:translateX(-18px);filter:brightness(2)}}@keyframes enemyHit{35%{transform:translateX(18px);filter:brightness(2)}}@keyframes heroAttack{45%{transform:translateX(160px) scale(1.08)}}@keyframes enemyAttack{45%{transform:translateX(-160px) scale(1.08)}}
.reward-screen{align-items:center;justify-content:center;flex-direction:column}.section-heading.compact{margin-bottom:18px}.reward-cards{display:flex;justify-content:center;gap:22px;flex-wrap:wrap}.reward-cards .card{width:190px;height:260px;flex-basis:190px;padding:12px}.reward-cards .card-art{height:102px;font-size:48px}.reward-cards .card h4{font-size:16px}.reward-cards .card p{font-size:12px}.reward-cards .card:hover{transform:translateY(-8px);filter:brightness(1.15)}.reward-actions{margin-top:28px}.event-card{width:min(970px,100%);display:grid;grid-template-columns:42% 58%;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#261931,#120e17);box-shadow:var(--shadow)}.event-art{min-height:500px;display:grid;place-items:center;background:radial-gradient(circle,#713750,transparent 48%),linear-gradient(130deg,#1d1425,#0c090f)}.event-sigil{font-size:150px;color:var(--gold);text-shadow:0 0 50px var(--red);animation:pulse 2.7s infinite}.event-copy{padding:54px}.event-copy h2{font:700 38px Cinzel,Georgia,serif;margin:14px 0}.event-copy p{line-height:1.75;color:#bfb3c1}.event-options{display:grid;gap:10px;margin-top:26px}.event-option{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:9px;text-align:left;padding:15px 17px;cursor:pointer}.event-option:hover{border-color:var(--gold);background:rgba(240,183,90,.08)}.event-option strong,.event-option span{display:block}.event-option span{color:var(--muted);font-size:12px;margin-top:5px}.end-card{text-align:center;max-width:680px}.end-sigil{font-size:110px;color:var(--red);filter:drop-shadow(0 0 30px rgba(227,66,74,.45))}.end-card h2{font:700 48px Cinzel,Georgia,serif;margin:12px 0}.end-card p{color:var(--muted);line-height:1.7}.run-stats{display:flex;justify-content:center;gap:12px;margin:24px 0;flex-wrap:wrap}.run-stats div{min-width:120px;padding:13px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.03)}.run-stats strong,.run-stats span{display:block}.run-stats strong{font:700 22px Cinzel,Georgia,serif;color:var(--gold)}.run-stats span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}.tooltip{position:fixed;z-index:100;pointer-events:none;display:none;max-width:280px;background:#120e18;border:1px solid var(--line);border-radius:8px;padding:10px 12px;box-shadow:var(--shadow);font-size:12px;line-height:1.5}.tooltip strong{color:var(--gold)}
@media(max-width:900px){.class-grid{grid-template-columns:1fr;max-width:560px}.class-card{min-height:0}.class-art{height:180px}.battle-header{grid-template-columns:1fr 1fr}.turn-info{display:none}.portrait{display:none}.hand{overflow-x:auto;justify-content:flex-start;padding:0 12px;height:220px}.hero-combatant{left:8%}.enemy-combatant{right:8%}.event-card{grid-template-columns:1fr}.event-art{min-height:210px}.event-copy{padding:30px}}@media(max-width:650px){.topbar{padding:0 12px;height:60px}.brand div,.run-meta span{display:none}.screen{min-height:calc(100vh - 60px);padding:26px 14px}#title-screen{flex-direction:column;justify-content:center;text-align:center}.hero-panel p{font-size:15px}.feature-row{justify-content:center}.title-art{display:none}#battle-screen{padding:8px;gap:8px}.battle-header{gap:6px}.status-card{padding:8px}.name-line h3{font-size:12px}.name-line span{display:none}.arena{min-height:250px}.combatant{transform:scale(.8);transform-origin:bottom}.hero-combatant{left:1%}.enemy-combatant{right:1%}.intent-panel{top:10px;min-width:140px}.battle-controls{grid-template-columns:1fr auto}.energy-orb{order:1;width:86px}.piles{order:2}.end-turn-button{order:3;grid-column:2;padding:10px 12px}.pile{width:45px;height:45px}.hand{height:202px}.card{width:135px;height:185px;flex-basis:135px}.card-art{height:61px}.event-copy h2,.end-card h2{font-size:30px}}

/* --- Visual and combat UI upgrade v2 --- */
.class-card{
  min-height:575px;
  isolation:isolate;
}
.class-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),transparent 24%),
    radial-gradient(circle at 50% 26%,color-mix(in srgb,var(--class-b) 18%,transparent),transparent 48%);
  pointer-events:none;
  z-index:1;
}
.class-art{
  height:285px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--class-b) 42%,transparent),transparent 47%),
    linear-gradient(180deg,color-mix(in srgb,var(--class-a) 82%,#07060a),#0d0911);
  border-bottom:1px solid color-mix(in srgb,var(--class-b) 45%,transparent);
}
.class-art::before,.class-art::after{display:none}
.class-art .character-svg{
  width:88%;
  height:112%;
  margin-top:10px;
  filter:drop-shadow(0 26px 22px rgba(0,0,0,.72));
  transition:transform .32s ease,filter .32s ease;
}
.class-card:hover .class-art .character-svg{
  transform:translateY(-5px) scale(1.045);
  filter:drop-shadow(0 31px 27px rgba(0,0,0,.8)) brightness(1.1);
}
.class-select-hint{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%) translateY(8px);
  width:max-content;
  padding:7px 12px;
  border:1px solid color-mix(in srgb,var(--class-b) 55%,transparent);
  border-radius:999px;
  background:rgba(8,6,11,.76);
  color:#f6edf6;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
  opacity:0;
  transition:.25s;
  backdrop-filter:blur(7px);
}
.class-card:hover .class-select-hint{opacity:1;transform:translateX(-50%) translateY(0)}
.class-copy{position:relative;z-index:2}
.class-role{display:inline-flex;align-items:center;gap:7px}
.class-role::before{content:"";width:19px;height:1px;background:var(--class-b);box-shadow:0 0 8px var(--class-b)}

.status-card{
  min-height:96px;
  border-color:rgba(255,255,255,.14);
  background:
    linear-gradient(180deg,rgba(39,30,48,.97),rgba(16,12,21,.97)),
    radial-gradient(circle at 0 0,var(--accent),transparent 45%);
}
.status-main{overflow:visible}
.status-row{
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
}
.enemy-status-row{flex-direction:row}
.resource-line{gap:6px;flex:0 0 auto}
.readout-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:45px;
  height:25px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:7px;
  background:rgba(0,0,0,.25);
  color:#e8dfe9;
  font-weight:800;
  font-size:10px;
  box-shadow:inset 0 1px rgba(255,255,255,.05);
}
.status-strip{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  flex-wrap:wrap;
}
.enemy-status-strip{justify-content:flex-end}
.status-badge{
  position:relative;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(0,0,0,.35));
  box-shadow:0 5px 12px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.12);
  cursor:help;
}
.status-badge.buff{outline:1px solid rgba(103,208,255,.18);color:#b9edff}
.status-badge.debuff{outline:1px solid rgba(255,93,101,.2);color:#ff9aa2}
.status-badge b{font-size:14px;line-height:1;font-style:normal}
.status-badge em{
  position:absolute;
  right:-4px;
  bottom:-5px;
  min-width:15px;
  height:15px;
  padding:0 3px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#08070b;
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-size:8px;
  font-style:normal;
  font-weight:900;
}
.status-empty{
  color:#746a78;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.bar{
  height:20px;
  border-radius:6px;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.75),0 1px rgba(255,255,255,.04);
}
.bar::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:5px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),transparent 50%);
  pointer-events:none;
}
.bar i{box-shadow:0 0 17px rgba(239,76,80,.38)}
.enemy-health i{box-shadow:0 0 17px rgba(180,87,242,.38)}

.portrait{
  width:78px;
  height:78px;
  flex:0 0 78px;
  padding:0;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--accent,#e34a4f) 45%,transparent),#100b15 70%);
  border-color:color-mix(in srgb,var(--accent,#e34a4f) 45%,rgba(255,255,255,.1));
  box-shadow:inset 0 0 20px rgba(0,0,0,.55),0 0 22px color-mix(in srgb,var(--accent,#e34a4f) 15%,transparent);
}
.portrait::after{display:none}
.portrait .character-svg{width:112%;height:112%;transform:translateY(7px);filter:drop-shadow(0 7px 6px #000)}
.enemy-portrait .character-svg{transform:translateY(7px) scaleX(-1)}

.arena{
  min-height:330px;
  background:
    radial-gradient(ellipse at 50% 102%,rgba(174,61,56,.43),transparent 44%),
    radial-gradient(circle at 18% 12%,rgba(223,76,69,.12),transparent 26%),
    radial-gradient(circle at 82% 12%,rgba(144,83,222,.13),transparent 27%),
    linear-gradient(180deg,#281b31 0,#100c16 56%,#321820 57%,#120b10 100%);
}
.arena::before{
  bottom:38%;
  height:3px;
  box-shadow:0 0 24px #d24a53,0 -80px 100px rgba(185,74,79,.09);
}
.arena::after{
  background:
    repeating-linear-gradient(90deg,transparent 0 6.8%,rgba(255,255,255,.027) 7% 7.25%),
    linear-gradient(90deg,rgba(0,0,0,.42),transparent 18%,transparent 82%,rgba(0,0,0,.42));
}
.arena-lights::before,.arena-lights::after{
  content:"";
  position:absolute;
  bottom:32%;
  width:64px;
  height:180px;
  border:2px solid rgba(255,255,255,.06);
  border-bottom:0;
  background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(255,255,255,.025),rgba(0,0,0,.25));
  box-shadow:inset 0 0 32px rgba(0,0,0,.6);
}
.arena-lights::before{left:4%}
.arena-lights::after{right:4%}
.combatant{
  width:220px;
  height:270px;
  bottom:8%;
  transform-origin:50% 100%;
}
.hero-combatant{left:12%}
.enemy-combatant{right:12%}
.shadow{
  left:18px;
  width:185px;
  height:31px;
  background:rgba(0,0,0,.72);
  filter:blur(9px);
}
.fighter-body,.enemy-body{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  left:0;
  bottom:0;
  background:none;
  clip-path:none;
  filter:none;
  transform:none;
}
.fighter-body::before,.fighter-weapon,.enemy-core{display:none}
.fighter-body .character-svg,.enemy-body .character-svg{
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 18px 13px rgba(0,0,0,.78));
}
.enemy-body .character-svg{transform:scaleX(-1)}
.character-breathe,.enemy-breathe{animation:characterBreathe 2.9s ease-in-out infinite;transform-origin:50% 90%}
.rift-ring{animation:riftSpin 12s linear infinite;transform-origin:50% 50%}
.floating-shards{animation:shardFloat 2.6s ease-in-out infinite;transform-origin:50% 50%}
.moon-sigil{animation:moonPulse 3.4s ease-in-out infinite;transform-origin:50% 50%}
.art-aura{animation:auraPulse 2.5s ease-in-out infinite}
@keyframes characterBreathe{50%{transform:translateY(-4px) scaleY(1.012)}}
@keyframes riftSpin{to{transform:rotate(360deg)}}
@keyframes shardFloat{50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes moonPulse{50%{opacity:.34;transform:scale(1.035)}}
@keyframes auraPulse{50%{opacity:.22;transform:scale(1.04)}}
.intent-panel{
  top:20px;
  min-width:205px;
  padding:10px 18px;
  background:linear-gradient(180deg,rgba(17,12,22,.92),rgba(7,5,10,.88));
  box-shadow:0 12px 35px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.08);
}
.intent-panel strong{font-size:20px}
.float-text{z-index:12}

@media(max-width:1050px){
  .combatant{width:190px;height:242px}
  .hero-combatant{left:8%}
  .enemy-combatant{right:8%}
  .status-badge{width:26px;height:26px}
}
@media(max-width:900px){
  .class-art{height:235px}
  .class-card{min-height:0}
  .arena{min-height:300px}
  .combatant{width:180px;height:230px}
  .hero-combatant{left:4%}
  .enemy-combatant{right:4%}
  .status-row{align-items:flex-start;flex-direction:column}
  .enemy-status-row{align-items:flex-end}
  .status-strip{min-height:24px}
}
@media(max-width:650px){
  .status-card{min-height:89px;padding:7px}
  .status-row{gap:4px}
  .readout-chip{min-width:39px;height:22px;padding:0 5px;font-size:9px}
  .status-badge{width:23px;height:23px;border-radius:6px}
  .status-badge b{font-size:12px}
  .status-empty{display:none}
  .arena{min-height:275px}
  .combatant{width:155px;height:205px;transform:scale(.86)}
  .hero-combatant{left:-2%}
  .enemy-combatant{right:-2%}
  .intent-panel{top:7px;min-width:146px;padding:7px 10px}
  .intent-panel strong{font-size:16px}
}
#class-screen{flex-direction:column;align-items:center;justify-content:flex-start}
#class-screen .section-heading{flex:0 0 auto}
#class-screen .class-grid{margin:0 auto}