:root {
  --ink:#ddd9e8;
  --violet:#8669c4;
  --gold:#d3ad67;
  --panel:#171522;
  --deep:#09080e;
  --card-bg:#12101a;
  --deck-bg:#12101ae8;
  --card-border:#30283f;
  --card-muted:#aaa2bd;
}
.gradio-container { width:min(98vw,1680px) !important; max-width:none !important; margin:auto; background:#0c0b12; color:var(--ink); }
.title-block { text-align:center; letter-spacing:.08em; margin-bottom:.25rem; }
.title-block h1 { margin:.1rem 0; color:#eee8ff; font-size:clamp(1.35rem,2vw,1.85rem); }
.title-block p { margin:.15rem 0; }
.backend-badge { display:inline-block; border:1px solid #554872; border-radius:999px; padding:.25rem .65rem; color:#b8a6db; }
.home-panel { max-width:760px; margin:5vh auto; text-align:center; padding:2rem; border:1px solid #3e3553; background:#12101a; }
.setup-panel { max-width:920px; margin:1rem auto; }
.gameplay-shell { align-items:flex-start !important; gap:1rem !important; }
.gameplay-main { min-width:0 !important; }
.character-sidebar {
  flex:0 0 300px !important;
  max-width:320px !important;
  min-width:280px !important;
  position:sticky;
  top:.5rem;
  max-height:calc(100vh - 1rem);
  overflow-y:auto;
}
.sidebar-heading { align-items:center !important; gap:.35rem !important; }
.sidebar-heading h2 { margin:0 !important; }
.sidebar-toggle { max-width:8rem !important; min-width:0 !important; align-self:flex-start; }
.quiz-progress { color:#b8a6db; text-align:center; }
.allocation-grid .stat-card { text-align:center; }
.allocation-grid input { text-align:center !important; font-size:1.2rem !important; font-weight:700; }
.rotate-notice { display:none; padding:1rem; text-align:center; background:#241a31; border:1px solid #8069a5; }
.battle-frame { position:relative; width:min(100%,1250px,calc((100dvh - 300px) * 16 / 9)); aspect-ratio:16/9; overflow:hidden; margin:auto;
  border:3px solid #3e3553; box-shadow:0 0 35px #000, inset 0 0 32px #08060e; background:#111; image-rendering:pixelated; }
.battle-frame.chamber { filter:hue-rotate(25deg) saturate(1.25); }
.battle-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.combatant-wrap { position:absolute; width:34%; height:55%; }
.player-wrap { left:3%; bottom:6%; }
.enemy-wrap { right:3%; top:20%; }
.combatant-wrap.hidden { display:none; }
.combatant-wrap.defeated { opacity:.38; filter:grayscale(.7); }
.combatant { position:absolute; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 10px 5px #000a); }
.player-sprite { width:78%; height:78%; left:0; bottom:0; }
.enemy-sprite { width:84%; height:84%; right:0; bottom:0; }
.stage-hud { position:absolute; width:28%; z-index:3; background:#090812df; border:1px solid #756491; padding:.35rem .5rem; }
.stage-hud.hidden { display:none; }
.player-stage-hud { left:3%; bottom:51%; }
.enemy-stage-hud { right:3%; top:10%; }
.stage-hud strong { display:block; overflow-wrap:anywhere; word-break:break-word; font-size:.9rem; }
.floor-stamp { position:absolute; left:2%; top:2%; z-index:4; background:#090812dd; border:1px solid #756491; padding:.25rem .55rem; font-weight:700; }
.intent-badge { position:absolute; right:2%; top:2%; z-index:4; display:flex; align-items:center; gap:.35rem; background:#090812dd; border:1px solid #756491; padding:.2rem .45rem; }
.intent-badge.hidden { display:none; }
.intent-badge img { width:24px; height:24px; image-rendering:pixelated; }
.attack-fx { position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; overflow:hidden; }
.attack-fx.effect-strike,.attack-fx.effect-signature,.attack-fx.effect-skill { opacity:1; }
.attack-fx::before,.attack-fx::after { content:""; position:absolute; display:block; opacity:0; }
.element-physical::before {
  left:34%; top:42%; width:33%; height:5px;
  background:linear-gradient(90deg,transparent,#aeb8c8 20%,#fff 48%,#8e99aa 78%,transparent);
  box-shadow:0 0 7px #fff,0 0 16px #b9c5d8;
  transform:rotate(-18deg);
  animation:physical-slash .52s ease-out both;
}
.element-physical::after {
  right:18%; top:34%; width:13%; aspect-ratio:1; border:2px solid #e9eef6; border-radius:50%;
  animation:impact-ring .38s .2s ease-out both;
}
.element-magical::before {
  left:32%; top:45%; width:4.2%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#b78cff 28%,#6c38b9 62%,transparent 72%);
  box-shadow:0 0 12px #b076ff,0 0 24px #6d3ab8;
  animation:magic-orb .62s ease-in both;
}
.element-magical::after {
  right:18%; top:38%; width:13%; aspect-ratio:1; border:2px solid #bd8cff; transform:rotate(45deg);
  animation:magic-burst .36s .34s ease-out both;
}
.element-fire::before {
  left:32%; top:45%; width:5%; aspect-ratio:1; border-radius:52% 48% 55% 45%;
  background:radial-gradient(circle at 65% 55%,#fff4ae 0 12%,#ffb11b 30%,#ef4b20 60%,transparent 72%);
  box-shadow:0 0 13px #ff8a18,0 0 25px #e63d15;
  animation:fire-shot .58s ease-in both;
}
.element-fire::after {
  right:16%; top:34%; width:15%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,transparent 18%,#ffd45d 23%,#f25a20 44%,transparent 68%);
  animation:fire-burst .42s .28s ease-out both;
}
.element-water::before {
  left:31%; top:43%; width:13%; height:8%;
  border-top:5px solid #60d9ff; border-radius:50%;
  filter:drop-shadow(0 0 7px #42bde9);
  animation:water-wave .62s ease-in-out both;
}
.element-water::after {
  right:17%; top:39%; width:14%; height:12%;
  border:4px solid #8be6ff; border-left-color:transparent; border-radius:50%;
  animation:water-splash .4s .3s ease-out both;
}
.element-ice::before {
  left:32%; top:44%; width:6%; height:4%;
  background:linear-gradient(90deg,#dfffff,#58d7ff 55%,#178dbf);
  clip-path:polygon(0 50%,72% 0,100% 50%,72% 100%);
  filter:drop-shadow(0 0 8px #7ee8ff);
  animation:ice-shard .58s ease-in both;
}
.element-ice::after {
  right:17%; top:34%; width:14%; height:17%;
  background:linear-gradient(135deg,transparent 20%,#bff8ff 21% 27%,transparent 28% 44%,#58d9ff 45% 52%,transparent 53%);
  animation:ice-burst .35s .31s ease-out both;
}
.element-lightning::before {
  right:21%; top:8%; width:9%; height:45%;
  background:linear-gradient(#efffff,#55e7ff 50%,#fff);
  clip-path:polygon(45% 0,75% 0,55% 39%,83% 39%,22% 100%,40% 55%,12% 55%);
  filter:drop-shadow(0 0 7px #57e9ff) drop-shadow(0 0 15px #49aee8);
  animation:lightning-strike .48s ease-out both;
}
.element-lightning::after {
  right:15%; top:48%; width:21%; height:3px;
  background:radial-gradient(ellipse,#dfffff,#43d7ff 40%,transparent 72%);
  box-shadow:0 0 12px #58e5ff;
  animation:ground-flash .35s .18s ease-out both;
}
.element-earth::before {
  left:32%; top:44%; width:6%; aspect-ratio:1;
  background:linear-gradient(135deg,#c5aa72,#71512e);
  clip-path:polygon(16% 8%,78% 0,100% 48%,66% 100%,8% 82%,0 32%);
  filter:drop-shadow(0 0 5px #d5b378);
  animation:earth-shot .62s cubic-bezier(.2,.7,.25,1) both;
}
.element-earth::after {
  right:14%; top:45%; width:23%; height:10%;
  background:linear-gradient(160deg,transparent 42%,#d0ac65 44% 50%,transparent 52%);
  animation:earth-crack .42s .28s ease-out both;
}
.element-holy::before {
  right:17%; top:6%; width:16%; height:49%;
  background:linear-gradient(90deg,transparent,#fff6b8 30%,#fff 50%,#eecf5b 70%,transparent);
  filter:drop-shadow(0 0 10px #ffe88c);
  animation:holy-beam .56s ease-out both;
}
.element-holy::after {
  right:15%; top:39%; width:20%; aspect-ratio:1; border:2px solid #fff2a1; border-radius:50%;
  box-shadow:0 0 15px #ffdf69;
  animation:holy-ring .42s .18s ease-out both;
}
.element-demonic::before {
  left:34%; top:38%; width:36%; height:15%;
  border-top:7px solid #d7355d; border-radius:50%;
  filter:drop-shadow(0 0 8px #a10c39);
  transform:rotate(-13deg);
  animation:demonic-arc .58s ease-in both;
}
.element-demonic::after {
  right:17%; top:34%; width:14%; aspect-ratio:1;
  background:radial-gradient(circle,transparent 24%,#f14270 28%,#6e0927 46%,transparent 66%);
  animation:demonic-burst .4s .28s ease-out both;
}
.anim-target-strike,.anim-target-signature,.anim-target-skill { animation:hurt .42s .14s; }
@keyframes physical-slash { 0%{opacity:0;transform:translate(-80%,-20%) rotate(-18deg) scaleX(.2)} 35%{opacity:1} 100%{opacity:0;transform:translate(110%,35%) rotate(-18deg) scaleX(1.2)} }
@keyframes impact-ring { 0%{opacity:0;transform:scale(.2)} 35%{opacity:1} 100%{opacity:0;transform:scale(1.7)} }
@keyframes magic-orb { 0%{opacity:0;transform:translate(0,0) scale(.35)} 25%{opacity:1} 100%{opacity:0;transform:translate(900%,-20%) scale(1.2)} }
@keyframes magic-burst { 0%{opacity:0;transform:rotate(0) scale(.25)} 40%{opacity:1} 100%{opacity:0;transform:rotate(135deg) scale(1.5)} }
@keyframes fire-shot { 0%{opacity:0;transform:translateX(0) scale(.35)} 20%{opacity:1} 100%{opacity:0;transform:translateX(820%) scale(1.25)} }
@keyframes fire-burst { 0%{opacity:0;transform:scale(.25)} 40%{opacity:1} 100%{opacity:0;transform:scale(1.6)} }
@keyframes water-wave { 0%{opacity:0;transform:translateX(0) scale(.45)} 25%{opacity:1} 100%{opacity:0;transform:translateX(370%) scale(1.45)} }
@keyframes water-splash { 0%{opacity:0;transform:scale(.3) rotate(-35deg)} 45%{opacity:1} 100%{opacity:0;transform:scale(1.5) rotate(55deg)} }
@keyframes ice-shard { 0%{opacity:0;transform:translateX(0) scale(.45)} 22%{opacity:1} 100%{opacity:0;transform:translateX(690%) scale(1.35)} }
@keyframes ice-burst { 0%{opacity:0;transform:scale(.3)} 45%{opacity:1} 100%{opacity:0;transform:scale(1.45)} }
@keyframes lightning-strike { 0%,12%,28%{opacity:0} 15%,32%,55%{opacity:1} 100%{opacity:0;transform:scaleY(1.08)} }
@keyframes ground-flash { 0%{opacity:0;transform:scaleX(.2)} 35%{opacity:1} 100%{opacity:0;transform:scaleX(1.6)} }
@keyframes earth-shot { 0%{opacity:0;transform:translate(0,-40%) rotate(0) scale(.4)} 20%{opacity:1} 100%{opacity:0;transform:translate(720%,35%) rotate(310deg) scale(1.3)} }
@keyframes earth-crack { 0%{opacity:0;transform:scaleX(.2)} 40%{opacity:1} 100%{opacity:0;transform:scaleX(1.4)} }
@keyframes holy-beam { 0%{opacity:0;transform:scaleY(.05);transform-origin:top} 30%{opacity:1;transform:scaleY(1);transform-origin:top} 100%{opacity:0;transform:scaleY(1)} }
@keyframes holy-ring { 0%{opacity:0;transform:scale(.2)} 40%{opacity:1} 100%{opacity:0;transform:scale(1.7)} }
@keyframes demonic-arc { 0%{opacity:0;transform:translateX(-45%) rotate(-13deg) scaleX(.3)} 28%{opacity:1} 100%{opacity:0;transform:translateX(100%) rotate(-13deg) scaleX(1.3)} }
@keyframes demonic-burst { 0%{opacity:0;transform:scale(.2) rotate(0)} 40%{opacity:1} 100%{opacity:0;transform:scale(1.5) rotate(100deg)} }
@keyframes hurt { 40%{filter:brightness(2) drop-shadow(0 0 14px #fff); transform:translateX(-6%)} }
.meter { position:relative; height:18px; background:#09080e; margin:.22rem 0; overflow:hidden; border:1px solid #393149; }
.meter span { display:block; height:100%; }
.meter b { position:absolute; inset:0; text-align:center; line-height:16px; font-size:.7rem; text-shadow:0 1px 2px #000; }
.player-hp span { background:#8e3150; }.player-ap span { background:#4667bd; }.enemy-hp span { background:#9b343d; }
.stage-stack { position:relative; width:min(100%,1250px,calc((100dvh - 300px) * 16 / 9)); margin:auto; padding-bottom:clamp(2.6rem,6vh,4rem); }
.action-deck {
  position:absolute !important;
  right:2%;
  bottom:0;
  z-index:8;
  width:min(59%,720px) !important;
  height:auto;
  margin:0 !important;
  padding:.55rem !important;
  overflow:hidden;
  border:1px solid var(--card-border) !important;
  border-radius:0 !important;
  background:var(--deck-bg) !important;
  backdrop-filter:blur(3px);
  box-shadow:0 10px 28px #0009, inset 0 1px #8490a31a;
}
.combat-menu { height:112px; }
.primary-actions { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,1fr); gap:.45rem !important; height:100%; }
.action-deck > div,
.action-deck .submenu-row > div,
.action-deck .submenu-back {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.action-deck button {
  --button-secondary-background-fill:var(--card-bg);
  --button-secondary-background-fill-hover:#191522;
  --button-secondary-border-color:var(--card-border);
  min-height:0;
  height:100%;
  min-width:0 !important;
  padding:.38rem .52rem !important;
  white-space:pre-line !important;
  text-align:left !important;
  font-weight:600;
  font-size:clamp(.72rem,.82vw,.88rem) !important;
  line-height:1.12;
  color:#eef3fb !important;
  background:var(--card-bg) !important;
  background-image:none !important;
  border:1px solid var(--card-border) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.action-deck button:hover { background:#191522 !important; border-color:var(--violet) !important; }
.action-deck button:focus-visible {
  outline:2px solid var(--violet) !important;
  outline-offset:1px !important;
  border-color:var(--violet) !important;
}
.action-deck button:disabled {
  color:#746d80 !important;
  background:#0f0d15cc !important;
  border-color:#292333 !important;
}
.latest-log { margin:.4rem 0; min-height:2.5rem; padding:.55rem .8rem; background:#111019; border-left:3px solid var(--violet); color:#f1e4b9; }
.turn-heading { display:block; margin-bottom:.3rem; color:#d9c7ff; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; }
.turn-events { display:grid; gap:.2rem; }
.turn-event { display:grid; grid-template-columns:4.8rem 1fr; gap:.5rem; align-items:start; font-size:.86rem; line-height:1.25; }
.turn-event b { color:#bca8e5; }
.turn-event.actor-enemy b { color:#e6a2a7; }
.turn-event.actor-status b { color:#9fd7ba; }
.turn-event.actor-system b { color:#d8c68e; }
.combat-log { max-height:16rem; overflow:auto; padding:.7rem 1rem .7rem 2.2rem; background:#111019; }
.character-sheet h2,.character-sheet h3 { margin:.45rem 0; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:.35rem; }
.stat-grid span { display:flex; justify-content:space-between; background:var(--card-bg); padding:.35rem .45rem; border:1px solid var(--card-border); }
.stat-bonus { color:#bca8e5; margin-left:.15rem; }
.equipment-card { display:flex; align-items:center; gap:.55rem; margin:.4rem 0; padding:.4rem; background:var(--card-bg); border:1px solid var(--card-border); }
.equipment-card img,.empty-slot { width:44px; height:44px; object-fit:contain; image-rendering:pixelated; }
.empty-slot { display:grid; place-items:center; border:1px dashed #554872; font-size:1.5rem; }
.equipment-card span { display:flex; flex-direction:column; min-width:0; }
.equipment-card small { color:var(--card-muted); }
.status-strip img { width:30px; height:30px; margin-right:.25rem; image-rendering:pixelated; }
.status-rack {
  display:flex;
  flex-wrap:wrap;
  gap:.28rem;
  min-height:24px;
  margin-top:.25rem;
  pointer-events:auto;
}
.enemy-status-rack { justify-content:flex-end; }
.status-icon {
  position:relative;
  width:32px;
  height:32px;
  padding:2px;
  border:1px solid #69577f;
  background:#100d18e8;
  box-shadow:0 2px 8px #000b;
}
.status-icon img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.status-icon .status-fallback { display:grid; place-items:center; width:100%; height:100%; color:#d9c7ff; font-weight:800; }
.status-icon .status-duration {
  position:absolute;
  right:-4px;
  bottom:-5px;
  min-width:15px;
  height:15px;
  padding:0 2px;
  border:1px solid #8b75aa;
  border-radius:8px;
  background:#08070d;
  color:#fff;
  font:700 10px/13px sans-serif;
  text-align:center;
}
.status-icon:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
.enemy-attack-fx {
  position:absolute;
  inset:0;
  z-index:6;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
}
.enemy-attack-fx.enemy-effect-grunt,
.enemy-attack-fx.enemy-effect-boss,
.enemy-attack-fx.enemy-effect-aura { opacity:1; }
.enemy-attack-fx::before,
.enemy-attack-fx::after { content:""; position:absolute; display:block; opacity:0; }
.enemy-variant-silver-slash::before {
  right:31%; top:54%; width:31%; height:5px;
  background:linear-gradient(90deg,transparent,#fff 35%,#9eabbc 65%,transparent);
  box-shadow:0 0 7px #fff,0 0 16px #b8c4d5;
  transform:rotate(19deg);
  animation:enemy-slash .48s .52s ease-out both;
}
.enemy-variant-thrust::before {
  right:28%; top:58%; width:38%; height:4px;
  background:linear-gradient(90deg,transparent,#eef6ff 25%,#a9bad0 70%,transparent);
  box-shadow:0 0 10px #d9ecff;
  animation:enemy-thrust .5s .52s ease-out both;
}
.enemy-variant-triple-claw::before {
  left:22%; top:48%; width:25%; height:24%;
  border-top:4px solid #dfe7f1;
  border-bottom:4px solid #dfe7f1;
  box-shadow:0 9px 0 -5px #dfe7f1;
  transform:rotate(-19deg);
  filter:drop-shadow(0 0 5px #fff);
  animation:enemy-claw .46s .54s ease-out both;
}
.enemy-variant-projectile::before {
  right:30%; top:53%; width:5%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#76d8ff 32%,#315cb6 68%,transparent 72%);
  box-shadow:0 0 12px #6bd7ff,0 0 24px #496bcc;
  animation:enemy-projectile .62s .48s ease-in both;
}
.enemy-variant-hex-pulse::before {
  left:20%; top:41%; width:20%; aspect-ratio:1; border:5px double #c565ec;
  transform:rotate(45deg);
  box-shadow:0 0 16px #8d36b5,inset 0 0 15px #7d2aa8;
  animation:enemy-hex .6s .5s ease-out both;
}
.enemy-variant-heavy-cleave::before {
  left:17%; top:35%; width:34%; height:28%;
  border-top:9px solid #f0e3ca;
  border-radius:50%;
  filter:drop-shadow(0 0 9px #d8b982);
  transform:rotate(-28deg);
  animation:enemy-cleave .68s .55s ease-out both;
}
.enemy-variant-ground-shockwave::before {
  left:8%; bottom:16%; width:52%; height:12%;
  border-top:6px solid #d1a467;
  border-radius:50%;
  box-shadow:0 -5px 15px #9b683c;
  animation:enemy-shockwave .72s .58s ease-out both;
}
.enemy-variant-defup::before,
.enemy-variant-atkup::before {
  right:12%; top:25%; width:24%; aspect-ratio:1; border:4px solid #7cc5ff; border-radius:50%;
  box-shadow:0 0 22px #4f9ed8,inset 0 0 18px #3d76a3;
  animation:enemy-aura .62s .3s ease-out both;
}
.enemy-variant-atkup::before { border-color:#ff877c; box-shadow:0 0 22px #d85049,inset 0 0 18px #9e2f2c; }
.enemy-action-grunt { animation:enemy-lunge .82s .18s ease-in-out; }
.enemy-action-boss { animation:enemy-lunge-boss 1s .18s ease-in-out; }
.enemy-action-aura { animation:enemy-aura-body .72s .1s ease-out; }
.player-hit-grunt { animation:player-impact .35s .9s; }
.player-hit-boss { animation:player-impact-boss .45s 1s; }
@keyframes enemy-lunge { 0%,100%{transform:translateX(0)} 48%{transform:translateX(-10%)} }
@keyframes enemy-lunge-boss { 0%,100%{transform:translateX(0)} 48%{transform:translateX(-13%) scale(1.035)} }
@keyframes enemy-aura-body { 45%{filter:brightness(1.45) drop-shadow(0 0 18px #9abfff)} }
@keyframes player-impact { 45%{filter:brightness(2) drop-shadow(0 0 14px #fff);transform:translateX(-6%)} }
@keyframes player-impact-boss { 45%{filter:brightness(2.3) drop-shadow(0 0 18px #ffd4a1);transform:translateX(-9%)} }
@keyframes enemy-slash { 0%{opacity:0;transform:translate(110%,-35%) rotate(19deg) scaleX(.25)} 35%{opacity:1} 100%{opacity:0;transform:translate(-110%,45%) rotate(19deg) scaleX(1.3)} }
@keyframes enemy-thrust { 0%{opacity:0;transform:translateX(75%) scaleX(.2)} 35%{opacity:1} 100%{opacity:0;transform:translateX(-90%) scaleX(1.25)} }
@keyframes enemy-claw { 0%{opacity:0;transform:translate(90%,-25%) rotate(-19deg) scale(.45)} 40%{opacity:1} 100%{opacity:0;transform:translate(-35%,28%) rotate(-19deg) scale(1.25)} }
@keyframes enemy-projectile { 0%{opacity:0;transform:translateX(0) scale(.35)} 25%{opacity:1} 100%{opacity:0;transform:translateX(-900%) scale(1.25)} }
@keyframes enemy-hex { 0%{opacity:0;transform:rotate(0) scale(.2)} 45%{opacity:1} 100%{opacity:0;transform:rotate(180deg) scale(1.55)} }
@keyframes enemy-cleave { 0%{opacity:0;transform:translate(110%,-50%) rotate(-28deg) scale(.3)} 40%{opacity:1} 100%{opacity:0;transform:translate(-25%,35%) rotate(-28deg) scale(1.4)} }
@keyframes enemy-shockwave { 0%{opacity:0;transform:translateX(100%) scaleX(.25)} 35%{opacity:1} 100%{opacity:0;transform:translateX(-15%) scaleX(1.45)} }
@keyframes enemy-aura { 0%{opacity:0;transform:scale(.25)} 45%{opacity:1} 100%{opacity:0;transform:scale(1.35)} }
.float-text {
  position:absolute; z-index:12; padding:.16rem .42rem; color:#fff; background:#090812d9;
  border:1px solid #c8bddc; font-weight:900; letter-spacing:.04em; pointer-events:none;
  animation:float-result 1.25s .18s ease-out both;
}
.enemy-float { right:17%; top:36%; color:#ffd0d4; }
.player-float { left:17%; bottom:30%; color:#ffd0d4; animation-delay:.92s; }
.heal-float { color:#9ff5c7; }
.critical-float { right:18%; top:28%; color:#ffe28a; }
.status-float { left:42%; top:22%; color:#d9c7ff; }
.status-float-1 { top:28%; }.status-float-2 { top:34%; }
.ap-float { left:32%; bottom:57%; color:#82aeff; animation-delay:.55s; }
.ap-float-loss { color:#ff9f82; }
@keyframes float-result { 0%{opacity:0;transform:translateY(8px) scale(.8)} 25%{opacity:1;transform:translateY(0) scale(1.08)} 100%{opacity:0;transform:translateY(-24px) scale(1)} }
.stage-overlay {
  position:absolute !important;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(.6rem,2vw,2rem) !important;
  background:#05040bd9 !important;
  border:0 !important;
}
.stage-overlay > div,.overlay-card {
  width:100% !important;
  max-width:100%;
  height:100%;
  max-height:100%;
  border-radius:0;
  overflow-y:auto;
  margin:0 !important;
  padding:1.5rem 2rem !important;
  border:0 !important;
  border-top:1px solid #766493 !important;
  background:#17131f !important;
  box-shadow:none;
  box-sizing:border-box;
}
.tower-loading { text-align:center; padding:1rem; }
.loading-rune { display:inline-grid; place-items:center; width:3rem; height:3rem; margin:.25rem auto;
  border:1px solid #8669c4; color:#d9c7ff; font-size:2rem; animation:rune-pulse 1.1s ease-in-out infinite; }
@keyframes rune-pulse { 50%{transform:rotate(45deg) scale(1.08);box-shadow:0 0 20px #8669c477} }
.evolution-reveal { display:grid; gap:.7rem; }
.evolution-heading { display:flex; align-items:center; gap:1rem; }
.evolution-heading img { width:128px; height:128px; object-fit:contain; image-rendering:pixelated; background:#0d0b13; border:1px solid var(--card-border); }
.evolution-heading h2 { margin:.1rem 0; }
.evolution-heading small,.evolution-skill span,.evolution-skill small { color:var(--card-muted); }
.evolution-skill { display:flex; flex-direction:column; gap:.2rem; padding:.65rem; background:var(--card-bg); border:1px solid var(--card-border); }
.boss-thinking { height:112px; display:grid !important; place-items:center; text-align:center; }
.boss-thinking strong { color:#d9c7ff; letter-spacing:.06em; text-transform:uppercase; }
.result-panel { padding:.8rem; border:1px solid #554872; background:#14111d; }
.reward-actions button { min-height:5.7rem; white-space:pre-line; }
.reward-actions img { image-rendering:pixelated; object-fit:contain; }
.submenu { display:flex !important; flex-direction:column; gap:.35rem !important; height:210px; }
.submenu-row { display:flex !important; flex:0 0 76px !important; height:76px !important; gap:.35rem !important; min-height:76px !important; }
.submenu-row > div { flex:1 1 0 !important; min-width:0 !important; }
.submenu-row button { min-height:0; height:100%; font-size:clamp(.76rem,.84vw,.88rem) !important; }
.submenu-back { flex:0 0 2.35rem !important; height:2.35rem !important; min-height:2.35rem !important; margin-top:auto !important; }
.submenu-back button { min-height:2.35rem !important; text-align:center !important; padding:.3rem .55rem !important; }
.starter-panel { max-width:1180px; margin:1rem auto; padding:1rem; border:1px solid #3e3553; background:#12101a; }
.starter-row { gap:.45rem !important; }
.starter-row > div { flex:1 1 0 !important; min-width:0 !important; }
.starter-row button { min-height:6.2rem; white-space:pre-line !important; text-align:left !important; font-size:.84rem !important; }
.allocation-readout { color:#d9c58f; }
#button-tooltip-data { display:none !important; }
.level-skill-actions button { min-height:7rem; white-space:pre-line; }
.stage-stack { padding-bottom:clamp(3.8rem,7vh,4.8rem); }
.basic-actions-deck {
  left:2% !important;
  right:auto !important;
  width:34% !important;
  height:72px;
}
.basic-actions {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.45rem !important;
  height:100%;
}
.skills-deck {
  right:2% !important;
  width:min(59%,720px) !important;
  height:clamp(184px,25vh,224px);
  overflow:hidden !important;
}
.skills-deck > .styler {
  display:flex !important;
  flex-direction:column;
  gap:.35rem !important;
  height:100%;
  min-height:0 !important;
  overflow:hidden !important;
}
.skills-deck > .styler > .block {
  flex:0 0 24px !important;
  min-height:24px !important;
}
.skills-deck .wrap,
.skills-deck .html-container,
.skills-deck .block,
.skills-deck .form,
.skills-deck button {
  min-height:0 !important;
  overflow:hidden !important;
  scrollbar-width:none !important;
}
.skills-deck *::-webkit-scrollbar { display:none !important; }
.skills-deck-title {
  flex:0 0 auto;
  margin:0;
  padding:.12rem .2rem;
  color:#d9c7ff;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  overflow:hidden !important;
  white-space:nowrap;
}
.skills-deck .submenu-row {
  flex:1 1 0 !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
}
.stage-narration-layer {
  position:absolute !important;
  z-index:16;
  top:8%;
  left:20%;
  width:48%;
  pointer-events:none;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}
.stage-narration-layer > .styler,
.stage-narration-layer .block,
.stage-narration-layer .html-container,
.stage-narration-layer .wrap {
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}
.stage-narration {
  padding:.5rem .75rem;
  border:1px solid #6e5a8b;
  background:#090812df;
  color:#f4e9c6;
  font-size:clamp(.82rem,1.1vw,1rem);
  line-height:1.3;
  min-height:2.4rem;
  height:auto;
  overflow:visible;
  overflow-wrap:anywhere;
  white-space:normal;
  box-shadow:0 5px 18px #000a;
  animation:narration-in .22s ease-out both;
}
@keyframes narration-in {
  from { opacity:0; transform:translateY(-6px); }
  to { opacity:1; transform:translateY(0); }
}
.developer-details {
  padding:.45rem .6rem;
  border:1px solid var(--card-border);
  background:#0d0b13;
}
.developer-details summary { cursor:pointer; color:var(--card-muted); }
.boss-diagnostics li { margin:.25rem 0; }
.boss-diagnostics li small { display:block; color:var(--card-muted); }
.allocation-stat-help {
  padding:.3rem;
  border:1px solid var(--card-border);
  background:var(--card-bg);
}
.allocation-stat-help strong { display:block; }
.allocation-stat-help small { color:var(--card-muted); }
.reward-decline { margin-top:.45rem; }
@media(max-width:1000px) and (orientation:landscape) {
  .gradio-container { max-width:100% !important; padding:4px !important; }
  .title-block { display:none; }
  .gameplay-shell { gap:.5rem !important; }
  .character-sidebar { flex-basis:220px !important; min-width:205px !important; max-width:235px !important; }
  .stage-stack,.battle-frame { width:min(100%,840px,calc((100vh - 64px) * 16 / 9)); }
  .stage-stack { padding-bottom:2rem; }
  .stage-hud { width:30%; padding:.18rem .3rem; }
  .player-stage-hud { bottom:52%; }
  .action-deck { right:1%; width:58% !important; padding:.3rem !important; }
  .combat-menu { height:86px; }
  .submenu { height:150px; gap:3px !important; }
  .submenu-row { flex-basis:52px !important; height:52px !important; min-height:52px !important; }
  .primary-actions,.submenu-row { gap:3px !important; }
  .action-card button,.submenu button { padding:.25rem .35rem !important; font-size:.68rem !important; line-height:1.12; }
  .submenu-back,.submenu-back button { height:1.8rem !important; min-height:1.8rem !important; }
  .skills-deck { height:158px; }
  .basic-actions-deck { height:54px; }
  .stage-narration-layer { top:6%; left:18%; width:50%; }
}
@media(max-width:700px) and (orientation:portrait) {
  .rotate-notice { display:block; }
  .gameplay-shell { display:none !important; }
}
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important} }
/* tooltip portal — single fixed div appended to body, escapes overflow:hidden */
#tower-tooltip {
  position:fixed;
  z-index:200;
  max-width:280px;
  min-width:180px;
  background:#12101a;
  border:1px solid #554872;
  color:#ddd9e8;
  padding:.5rem .7rem;
  font-size:.78rem;
  line-height:1.4;
  white-space:pre-wrap;
  word-break:break-word;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s;
  text-align:left;
  font-weight:400;
}
#tower-tooltip.visible { opacity:1; }
/* styled scrollbars */
.combat-log,.character-sheet,.stage-overlay > div,.overlay-card {
  scrollbar-width:thin;
  scrollbar-color:#554872 #09080e;
}
.combat-log::-webkit-scrollbar,.character-sheet::-webkit-scrollbar {
  width:6px;
}
.combat-log::-webkit-scrollbar-track,.character-sheet::-webkit-scrollbar-track {
  background:#09080e;
}
.combat-log::-webkit-scrollbar-thumb,.character-sheet::-webkit-scrollbar-thumb {
  background:#554872;
  border-radius:3px;
}
/* reward preview modal */
.preview-overlay { z-index:30 !important; }
.reward-preview-modal h3 { margin:0 0 .3rem; color:#d9c7ff; font-size:1.05rem; }
.reward-preview-modal .rp-rarity { font-size:.8rem; color:#9fd7ba; margin:.1rem 0 .5rem; }
.reward-preview-modal .rp-new-bonus { font-size:1rem; font-weight:700; margin:.25rem 0 .8rem; }
.reward-preview-modal .rp-comparison { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.5rem; }
.rp-col { padding:.55rem .65rem; border:1px solid #554872; background:#0e0c17; }
.rp-col h4 { margin:0 0 .3rem; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:#a99bc4; }
.rp-col.rp-new { border-color:#8669c4; }
.rp-col .rp-item-name { font-weight:700; color:#e8deff; }
.rp-col .rp-item-bonus { color:#bca8e5; font-size:.9rem; margin-top:.2rem; }
.rp-col .rp-empty { color:#5a5270; font-style:italic; }
.rp-delta { margin-top:.6rem; padding:.4rem .65rem; background:#0a091200; border-left:3px solid #82aeff; color:#c8e4ff; font-size:.88rem; }
.reward-preview-modal.rarity-rare .rp-col.rp-new { border-color:#7ca5ff; }
.reward-preview-modal.rarity-epic .rp-col.rp-new { border-color:#c48bff; }
/* tutorial panel icons */
.tutorial-icons { display:flex; gap:1rem; flex-wrap:wrap; margin-top:.75rem; align-items:flex-end; }
.tutorial-icons figure { display:flex; flex-direction:column; align-items:center; gap:.3rem; margin:0; }
.tutorial-icons img { width:48px; height:48px; object-fit:contain; image-rendering:pixelated; background:#0d0b13; border:1px solid #554872; padding:2px; }
.tutorial-icons figcaption { font-size:.7rem; color:#a99bc4; text-align:center; max-width:60px; line-height:1.25; }
/* tutorial panel */
.tutorial-panel { padding:.5rem 0; }
.tutorial-title { margin:0 0 .6rem; color:#d9c7ff; font-size:1.1rem; }
.tutorial-body { line-height:1.55; }
.tutorial-body ul { margin:.4rem 0 .4rem 1.2rem; padding:0; }
.tutorial-body li { margin:.2rem 0; }
.tutorial-dots { display:flex; gap:.35rem; justify-content:center; margin-top:1rem; flex-wrap:wrap; }
.tutorial-dot { width:8px; height:8px; border-radius:50%; background:#554872; }
.tutorial-dot.active { background:#8669c4; }
/* ascension passives in sidebar */
.sidebar-passives h3 { margin:.7rem 0 .3rem; }
.sidebar-passives ul { padding-left:1rem; margin:.3rem 0; list-style:none; }
.sidebar-passives li { font-size:.78rem; color:#b8afd6; margin-bottom:.4rem; line-height:1.3; }
.sidebar-passives strong { color:#e2d9f3; }
.passive-effect { display:block; font-size:.82rem; color:#82aeff; font-weight:700; margin:.1rem 0; }
.sidebar-passives small { color:#8a83a3; font-size:.73rem; }