*{box-sizing:border-box}
:root{
  --bg:#0a0c11;
  --panel:#151922;
  --panel2:#0f131a;
  --line:#2c3340;
  --text:#f4f5f7;
  --muted:#aab1bd;
  --accent:#e8e8e8;
  --danger:#b92f2f;
}
body{
  margin:0;
  background:linear-gradient(180deg,#08090c,#0f1118);
  color:var(--text);
  font-family:Arial,"Noto Sans KR",sans-serif;
  min-height:100vh;
}
button{
  border:0;
  border-radius:12px;
  padding:12px 14px;
  font-weight:800;
  cursor:pointer;
}
button:disabled{opacity:.35;cursor:not-allowed}
button:active:not(:disabled){transform:scale(.985)}
.primary{background:#f4f4f4;color:#111}
.secondary{background:#303644;color:#fff}
.danger{background:var(--danger);color:white}
.locked{background:#252a33;color:#777;cursor:not-allowed}
.huge{font-size:18px;padding:16px 20px;width:100%}
.mini{width:42px;background:#333945;color:#fff}

#app{
  width:min(1180px,100%);
  margin:0 auto;
  min-height:100vh;
  padding:18px;
}
.screen{display:none}
.screen.active{display:block}

.title-card,.result-card{
  max-width:560px;
  margin:10vh auto 0;
  text-align:center;
  padding:32px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
}
.title-card h1{font-size:54px;margin:0 0 8px}
.sub{color:var(--muted);margin-bottom:28px}
.meta-box{
  margin:20px 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.meta-box>div{
  background:var(--panel2);
  padding:12px;
  border-radius:10px;
}

.topbar{
  height:58px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
}
.panel-title{
  font-size:13px;
  font-weight:900;
  letter-spacing:1.5px;
  color:#c9d0db;
  margin-bottom:12px;
}
.main-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.reels{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:12px;
}
.reel{
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #3a414e;
  background:#090b10;
  border-radius:15px;
  font-size:38px;
  font-weight:900;
}
.reel.spin{animation:spin .12s linear infinite alternate}
@keyframes spin{
  from{transform:translateY(-4px);filter:blur(.7px)}
  to{transform:translateY(4px)}
}
.log{
  margin-top:12px;
  padding:12px;
  min-height:48px;
  border-radius:10px;
  background:#0d1016;
  color:#c6ccd5;
  font-size:14px;
  line-height:1.5;
}
.image-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px dashed #4a5260;
  background:#0c0f15;
  color:#8d96a5;
  border-radius:14px;
  user-select:none;
}
.sword-placeholder{height:180px}
.boss-placeholder{height:230px}
.stats-row,.boss-stat-grid,.material-grid{
  display:grid;
  gap:8px;
}
.stats-row{grid-template-columns:repeat(2,1fr)}
.stats-row span,.boss-stat-grid div,.material-grid div{
  background:#0d1016;
  padding:10px;
  border-radius:9px;
}
.charge-wrap{
  height:12px;
  background:#090b0f;
  border-radius:999px;
  overflow:hidden;
  margin-top:14px;
}
.charge-bar{
  height:100%;
  width:0%;
  background:#ddd;
}
.charge-help{text-align:center;color:#969eaa;font-size:12px;margin:6px 0}
.sword-button{
  width:100%;
  min-height:62px;
  font-size:19px;
  background:#2c313b;
  color:#fff;
}
.sword-button.charging{
  box-shadow:0 0 25px rgba(255,255,255,.25);
}
.inventory{margin:16px 0}
.material-grid{grid-template-columns:repeat(4,1fr)}
.trait-box{margin-top:10px;color:#c5cad2}
.boss-card{text-align:center}
.boss-stat-grid{
  grid-template-columns:repeat(3,1fr);
  margin-top:14px;
}
.element-badge{
  display:inline-block;
  background:#303746;
  padding:5px 10px;
  border-radius:999px;
}
.effect-text{
  margin-top:12px;
  min-height:28px;
  color:#f1b5a3;
}
#btnBossEntry{margin-top:4px}
#btnFight{margin-top:14px}

.battle-header{
  text-align:center;
  margin-bottom:12px;
}
.hp-shell{
  position:relative;
  width:100%;
  height:30px;
  background:#301010;
  border:1px solid #5a2424;
  border-radius:9px;
  overflow:hidden;
}
.hp-bar{
  position:absolute;
  left:0;top:0;bottom:0;
  width:100%;
  transition:width .25s ease;
}
.boss-hp{background:#b52e2e}
.player-hp{background:#2c74b8}
.hp-text{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;text-shadow:0 1px 2px #000;
}
.arena{
  position:relative;
  min-height:480px;
  display:grid;
  grid-template-columns:1fr 90px 1fr;
  align-items:center;
  gap:18px;
  background:radial-gradient(circle,#25202a,#0a0b0f 70%);
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px;
}
.fighter{text-align:center}
.battle-boss-image{height:280px}
.player-fighter .image-placeholder{height:210px}
.versus{font-size:34px;font-weight:900;text-align:center;color:#777}
.battle-effects{
  margin-top:10px;
  min-height:26px;
  color:#ffb096;
  font-weight:800;
}
.weapon-label{margin-top:10px;font-weight:800}
.battle-bottom{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:12px;
}
.battle-actions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.damage-float{
  position:absolute;
  top:70px;
  left:50%;
  transform:translateX(-50%);
  font-size:40px;
  font-weight:900;
  opacity:0;
  pointer-events:none;
}
.damage-float.show{
  animation:dmg .7s ease-out;
}
@keyframes dmg{
  0%{opacity:0;transform:translate(-50%,20px) scale(.7)}
  20%{opacity:1;transform:translate(-50%,0) scale(1.25)}
  100%{opacity:0;transform:translate(-50%,-40px) scale(1)}
}
.result-card h1{font-size:44px}

@media (max-width:760px){
  #app{padding:10px}
  .main-grid{grid-template-columns:1fr}
  .material-grid{grid-template-columns:repeat(2,1fr)}
  .arena{grid-template-columns:1fr;min-height:620px}
  .versus{font-size:20px}
  .battle-boss-image{height:220px}
  .title-card h1{font-size:40px}
}


/* ===== Battle V2: field combat + action order ===== */
.arena{
  position:relative;
  min-height:560px;
  display:block;
  overflow:hidden;
  background:
    linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.42)),
    radial-gradient(circle at 50% 75%,#303440,#11141b 66%);
  border:1px solid var(--line);
  border-radius:20px;
  padding:0;
}
.arena-map{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#69717e;
  font-size:24px;
  font-weight:900;
  letter-spacing:2px;
  user-select:none;
}
.arena-map::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:34%;
  background:linear-gradient(transparent,rgba(0,0,0,.5));
}

.turn-order-panel{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:30;
  width:min(760px,92%);
  padding:9px 12px;
  border-radius:14px;
  background:rgba(8,10,15,.84);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(6px);
}
.turn-order-title{
  text-align:center;
  font-size:10px;
  letter-spacing:1.8px;
  color:#929aa7;
  margin-bottom:7px;
  font-weight:900;
}
.turn-order{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  min-height:42px;
  overflow:hidden;
}
.turn-chip{
  position:relative;
  min-width:72px;
  padding:7px 9px;
  border-radius:9px;
  background:#252b36;
  border:1px solid #3a4250;
  font-size:11px;
  font-weight:900;
  color:#d5dbe4;
  text-align:center;
}
.turn-chip.player{border-color:#397bb4;background:#162c40}
.turn-chip.boss{border-color:#8b4040;background:#3a1e22}
.turn-chip.current{
  transform:scale(1.08);
  box-shadow:0 0 16px rgba(255,255,255,.22);
  border-color:#fff;
}
.turn-chip .turn-index{
  display:block;
  font-size:9px;
  color:#858e9d;
  margin-bottom:2px;
}
.turn-chip.current .turn-index{color:#ddd}

.field-actor{
  position:absolute;
  bottom:68px;
  width:180px;
  min-height:250px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  z-index:5;
}
.field-player{left:12%}
.field-boss{right:12%}

.actor-image{
  width:155px;
  height:195px;
}
.actor-name{
  font-size:13px;
  font-weight:900;
  margin-bottom:5px;
  text-shadow:0 2px 5px #000;
}
.actor-hp{
  width:155px;
  margin-top:8px;
}
.actor-hp .hp-shell{height:20px}
.actor-hp .hp-text{font-size:11px}
.actor-effects{
  margin-top:6px;
  min-height:18px;
  max-width:175px;
  font-size:11px;
  color:#ffb096;
  text-align:center;
}

.field-player.attack-move{animation:playerLunge .48s ease}
.field-boss.attack-move{animation:bossLunge .48s ease}
.field-player.hit-react,.field-boss.hit-react{animation:hitReact .25s linear}

@keyframes playerLunge{
  0%{transform:translateX(0)}
  45%{transform:translateX(165px) scale(1.05)}
  60%{transform:translateX(165px) scale(1.05)}
  100%{transform:translateX(0)}
}
@keyframes bossLunge{
  0%{transform:translateX(0)}
  45%{transform:translateX(-165px) scale(1.05)}
  60%{transform:translateX(-165px) scale(1.05)}
  100%{transform:translateX(0)}
}
@keyframes hitReact{
  0%{filter:none;transform:translateX(0)}
  30%{filter:brightness(1.9);transform:translateX(11px)}
  60%{transform:translateX(-7px)}
  100%{filter:none;transform:translateX(0)}
}

.turn-gauge-wrap{
  display:grid;
  grid-template-columns:90px 1fr 100px;
  gap:10px;
  align-items:center;
}
.turn-gauge{
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:#0a0d13;
  border:1px solid #303745;
}
.turn-gauge-fill{
  height:100%;
  width:0%;
  transition:width .12s linear;
}
.player-turn-fill{background:#4a97dc}
.boss-turn-fill{background:#d65d5d}
.turn-label{
  font-size:12px;
  color:#b9c0cb;
  font-weight:800;
}
.battle-actions button[disabled]{opacity:.25}
.battle-hint{
  text-align:center;
  color:#8f98a6;
  font-size:12px;
  margin-bottom:8px;
}
.current-turn-banner{
  text-align:center;
  font-size:13px;
  font-weight:900;
  min-height:20px;
  color:#e4e7ed;
}

@media(max-width:760px){
  .arena{min-height:520px}
  .field-player{left:2%}
  .field-boss{right:2%}
  .field-actor{width:140px}
  .actor-image{width:125px;height:170px}
  .actor-hp{width:125px}
  .turn-chip{min-width:58px;padding:6px 5px}
  @keyframes playerLunge{
    0%{transform:translateX(0)}
    50%{transform:translateX(70px) scale(1.03)}
    100%{transform:translateX(0)}
  }
  @keyframes bossLunge{
    0%{transform:translateX(0)}
    50%{transform:translateX(-70px) scale(1.03)}
    100%{transform:translateX(0)}
  }
}


/* ===== Battle V3 layout overrides ===== */
.boss-top-ui{
  position:relative;
  width:min(900px,94%);
  margin:0 auto 14px;
  text-align:center;
}
.battle-boss-title{
  margin:0 0 8px;
  font-size:34px;
  line-height:1.05;
  letter-spacing:.3px;
}
.boss-main-hp{
  width:100%;
}
.boss-main-hp-shell{
  height:34px;
  border-radius:10px;
}
.boss-main-hp-shell .hp-text{
  font-size:14px;
}
.boss-trait-toggle{
  margin-top:8px;
  padding:8px 13px;
  background:#272d38;
  color:#e8ebf0;
  border:1px solid #3c4451;
  font-size:12px;
}
.boss-trait-panel{
  display:none;
  position:absolute;
  z-index:50;
  right:0;
  top:88px;
  width:min(360px,92vw);
  padding:14px;
  background:rgba(12,15,21,.96);
  border:1px solid #3c4451;
  border-radius:13px;
  text-align:left;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.boss-trait-panel.open{display:block}
.trait-panel-title{
  font-size:11px;
  letter-spacing:1.5px;
  font-weight:900;
  color:#9ca6b5;
  margin-bottom:8px;
}
#bossTraitContent{
  line-height:1.55;
  font-size:13px;
  color:#e2e6ec;
}

.arena{
  min-height:560px;
}
.field-boss .actor-hp,
#bossActor .actor-name{
  display:none;
}
.bottom-order-panel{
  position:static;
  transform:none;
  width:100%;
  margin:0;
  top:auto;
  left:auto;
}
.turn-order{
  min-height:54px;
}
.turn-chip{
  min-width:82px;
  padding:9px 10px;
}
.turn-chip.current{
  transform:scale(1.04);
}
.battle-actions{
  grid-template-columns:repeat(2,1fr);
}
.current-turn-banner,
.battle-hint,
.turn-gauge-wrap{
  display:none !important;
}

@media(max-width:760px){
  .battle-boss-title{font-size:26px}
  .boss-main-hp-shell{height:30px}
  .turn-chip{min-width:62px;padding:7px 6px}
  .boss-trait-panel{right:50%;transform:translateX(50%)}
}


/* ===== Battle V4 actions / buffs ===== */
.six-actions{
  grid-template-columns:repeat(3,1fr);
}
.status-strip{
  background:#11151d;
  border:1px solid #2e3542;
  border-radius:12px;
  padding:10px 12px;
}
.status-title{
  font-size:10px;
  letter-spacing:1.4px;
  font-weight:900;
  color:#8f98a7;
  margin-bottom:6px;
}
.status-effects{
  min-height:24px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.status-chip{
  padding:5px 8px;
  border-radius:999px;
  background:#282f3a;
  border:1px solid #3d4655;
  color:#e9edf4;
  font-size:11px;
  font-weight:800;
}
.status-chip.charge{background:#402718;border-color:#7d4b2f}
.status-chip.focus{background:#1c3046;border-color:#355e86}
.status-chip.guard{background:#17384a;border-color:#2e6685}
.status-chip.counter{background:#3b2537;border-color:#704a69}

@media(max-width:760px){
  .six-actions{grid-template-columns:repeat(2,1fr)}
}


/* ===== V5 Boss Slot Room ===== */
.boss-card-horizontal{
  display:grid;
  grid-template-columns:minmax(300px, 1.05fr) minmax(360px, .95fr);
  gap:22px;
  align-items:stretch;
  text-align:left;
}
.boss-visual-column{
  min-width:0;
}
.boss-visual-column .boss-placeholder{
  height:360px;
  width:100%;
}
.boss-info-column{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.boss-info-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.boss-info-head h2{
  margin:0 0 8px;
  font-size:28px;
}
.boss-reward-mini{
  white-space:nowrap;
  background:#0d1016;
  border:1px solid #303745;
  border-radius:10px;
  padding:9px 11px;
  font-size:13px;
  color:#cfd5de;
}
.vertical-boss-stats{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:0;
}
.vertical-boss-stats div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 12px;
}
.vertical-boss-stats span{
  color:#9ca5b3;
  font-size:12px;
  font-weight:900;
  letter-spacing:.8px;
}
.vertical-boss-stats b{
  font-size:18px;
}
.boss-description-box{
  margin-top:12px;
  padding:12px;
  background:#0d1016;
  border-radius:10px;
  border:1px solid #272e39;
  flex:1;
}
.boss-desc-title{
  font-size:10px;
  letter-spacing:1.4px;
  font-weight:900;
  color:#8e97a5;
  margin-bottom:8px;
}
.boss-description-box .effect-text{
  margin:0;
  line-height:1.55;
}
.boss-slot-title-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.boss-slot-title-row .panel-title{
  margin:0;
}
.slot-subtitle{
  display:none;
}
.symbol-help-btn{
  padding:8px 11px;
  background:#2b313c;
  color:#fff;
  border:1px solid #414a58;
  font-size:12px;
}
.symbol-help-panel{
  display:none;
  grid-template-columns:repeat(2,1fr);
  gap:7px 10px;
  padding:12px;
  margin-bottom:12px;
  background:#0c0f15;
  border:1px solid #303745;
  border-radius:11px;
}
.symbol-help-panel.open{
  display:grid;
}
.symbol-help-panel>div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 9px;
  background:#131821;
  border-radius:8px;
  font-size:12px;
}
.symbol-help-panel b{
  white-space:nowrap;
}
.symbol-help-panel span{
  text-align:right;
  color:#b7bfca;
}
.symbol-help-note{
  grid-column:1/-1;
  color:#d4af7a !important;
}
#btnBossSpin.used{
  background:#30343d;
  color:#777;
}

@media(max-width:820px){
  .boss-card-horizontal{
    grid-template-columns:1fr;
  }
  .boss-visual-column .boss-placeholder{
    height:260px;
  }
  .symbol-help-panel{
    grid-template-columns:1fr;
  }
}


/* ===== V6 Main / Forge UI ===== */
.slot-materials{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #303745;
}
.slot-materials-title{
  font-size:10px;
  letter-spacing:1.5px;
  font-weight:900;
  color:#8f98a6;
  margin-bottom:8px;
}
.slot-material-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.slot-material-grid>div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px;
  background:#0d1016;
  border-radius:9px;
}
.slot-material-grid span{
  color:#aeb6c2;
  font-size:12px;
}
.slot-material-grid b{
  font-size:18px;
}

.forge-info-section{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:12px;
}
.forge-info-card{
  min-height:68px;
  padding:10px 12px;
  border-radius:10px;
  background:#0d1016;
  border:1px solid #292f3a;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.forge-info-card span{
  color:#929ba8;
  font-size:11px;
  font-weight:800;
}
.forge-info-card b{
  font-size:17px;
  line-height:1.25;
}
.forge-panel .trait-box{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #303745;
}
.inventory{
  display:none !important;
}

@media(max-width:760px){
  .forge-info-section,
  .slot-material-grid{
    grid-template-columns:1fr 1fr;
  }
}


/* ===== V7 Boss Slot UI ===== */
.boss-card-impact{
  display:block !important;
  text-align:left;
}
.boss-title-impact-wrap{
  text-align:center;
  margin-bottom:18px;
}
.boss-title-impact{
  margin:0 0 8px;
  font-size:36px;
  line-height:1.05;
  letter-spacing:.4px;
  text-shadow:0 3px 12px rgba(0,0,0,.5);
}
.boss-content-row{
  display:grid;
  grid-template-columns:minmax(320px,1.08fr) minmax(330px,.92fr);
  gap:22px;
  align-items:stretch;
}
.boss-visual-column .boss-placeholder{
  width:100%;
  height:360px;
}
.boss-info-column{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.vertical-boss-stats{
  display:flex !important;
  flex-direction:column;
  gap:8px;
  margin:0;
}
.vertical-boss-stats>div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  background:#0d1016;
  border-radius:9px;
}
.vertical-boss-stats span:first-child{
  color:#9da6b3;
  font-size:12px;
  font-weight:900;
  letter-spacing:.7px;
}
.vertical-boss-stats b{
  font-size:19px;
}
.stat-delta{
  color:#55d17c !important;
  font-weight:900 !important;
  margin-right:4px;
  font-size:15px !important;
}
.boss-reward-box{
  margin-top:4px;
  padding:12px 14px;
  background:#0d1016;
  border:1px solid #2d3440;
  border-radius:10px;
  display:flex;
  justify-content:space-between;
  color:#aeb6c2;
  font-size:13px;
}
.boss-reward-box b{
  color:#fff;
  font-size:18px;
}
.boss-description-btn{
  margin-top:auto;
  width:100%;
  background:#2a303a;
  color:#fff;
  border:1px solid #414956;
}

.boss-description-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(3,5,8,.76);
  backdrop-filter:blur(5px);
  align-items:center;
  justify-content:center;
  padding:20px;
}
.boss-description-overlay.open{
  display:flex;
}
.boss-description-modal{
  position:relative;
  width:min(720px,95vw);
  max-height:84vh;
  overflow:auto;
  background:#11151d;
  border:1px solid #3b4350;
  border-radius:18px;
  padding:24px;
  box-shadow:0 20px 70px rgba(0,0,0,.6);
}
.boss-description-modal h2{
  margin:0 0 18px;
  font-size:26px;
}
.overlay-close{
  position:absolute;
  right:14px;
  top:12px;
  width:38px;
  height:38px;
  padding:0;
  border-radius:50%;
  background:#2a3039;
  color:#fff;
  font-size:25px;
  line-height:1;
}
.boss-description-section{
  margin-top:14px;
  padding:14px;
  background:#0c0f15;
  border-radius:12px;
}
.boss-description-section h3{
  margin:0 0 10px;
}
.boss-description-content{
  color:#c8ced7;
  line-height:1.65;
}
.symbol-help-overlay-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.symbol-help-overlay-grid>div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px;
  background:#151a23;
  border-radius:8px;
  font-size:12px;
}
.symbol-help-overlay-grid span{
  color:#aeb6c1;
  text-align:right;
}

@media(max-width:820px){
  .boss-content-row{
    grid-template-columns:1fr;
  }
  .boss-visual-column .boss-placeholder{
    height:270px;
  }
  .boss-title-impact{
    font-size:28px;
  }
  .symbol-help-overlay-grid{
    grid-template-columns:1fr;
  }
}


/* ===== V8 slot/boss cleanup ===== */
.slot-title-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.slot-title-row .panel-title{
  margin:0;
}
.compact-help-btn,
.boss-description-btn-small{
  width:auto !important;
  min-width:54px;
  padding:6px 10px !important;
  font-size:11px !important;
  border-radius:8px !important;
}
.slot-result-hidden{
  display:none !important;
}
.slot-material-grid b{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
}
.slot-material-grid .stat-delta{
  margin-right:4px;
}
.boss-card-impact{
  position:relative;
}
.boss-description-btn-small{
  position:absolute;
  right:16px;
  top:16px;
  margin:0 !important;
  background:#2a303a;
  color:#fff;
  border:1px solid #414956;
  z-index:5;
}
.boss-title-impact-wrap{
  padding:0 64px;
}
.boss-title-impact-wrap .element-badge{
  margin-top:0;
}
.boss-reward-box{
  display:none !important;
}


/* ===== V9 boss title / slot help / forge name ===== */
.boss-title-inline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.boss-title-inline .boss-title-impact{
  margin:0;
}
.boss-title-inline .element-badge{
  margin:0;
  flex:none;
}
.boss-slot-title-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.boss-slot-title-row .panel-title{
  margin:0;
}

/* Forge name stages */
.sword-name-stage{
  text-align:center;
  margin:14px 0 10px;
  transition:all .2s ease;
}
.sword-name-stage.stage-0{
  font-style:italic;
  font-weight:400;
  font-family:Georgia, "Times New Roman", serif;
}
.sword-name-stage.stage-1{
  font-style:normal;
  font-weight:500;
  font-family:Arial, "Noto Sans KR", sans-serif;
}
.sword-name-stage.stage-2{
  font-style:normal;
  font-weight:800;
  font-family:Arial, "Noto Sans KR", sans-serif;
}
.sword-name-stage.stage-3{
  font-style:normal;
  font-weight:900;
  font-family:"Gungsuh", "Batang", "Noto Serif KR", serif;
}
.sword-name-stage.stage-4{
  font-style:normal;
  font-weight:900;
  font-family:"Gungsuh", "Batang", "Noto Serif KR", serif;
  letter-spacing:1.2px;
  text-shadow:0 0 10px rgba(255,220,120,.35);
}


/* ===== V9.1 debug forge ===== */
.sword-name-stage.stage-0{
  font-family:Arial, "Noto Sans KR", sans-serif !important;
  font-style:italic !important;
  font-weight:300 !important;
  letter-spacing:0 !important;
  text-shadow:none !important;
}



.boss-spin-result-hidden{display:none !important;}


/* ===== V10 automatic image assets ===== */
.asset-target{
  overflow:hidden;
  position:relative;
}
.asset-target img.game-asset-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  user-select:none;
  pointer-events:none;
}
.asset-target.has-image{
  border-style:solid;
  border-color:transparent;
  background:transparent;
  color:transparent;
}


/* ===== V11 battle sword name ===== */
#battleSwordLabel.sword-name-stage{
  margin-top:10px;
  text-align:center;
  max-width:220px;
  line-height:1.3;
}

/* 전투에서도 Forge와 동일한 단계별 서체/장식 */
#battleSwordLabel.stage-0{
  font-family:Arial, "Noto Sans KR", sans-serif !important;
  font-style:italic !important;
  font-weight:300 !important;
  letter-spacing:0 !important;
  text-shadow:none !important;
}
#battleSwordLabel.stage-1{
  font-family:Arial, "Noto Sans KR", sans-serif !important;
  font-style:normal !important;
  font-weight:500 !important;
  text-shadow:none !important;
}
#battleSwordLabel.stage-2{
  font-family:Arial, "Noto Sans KR", sans-serif !important;
  font-style:normal !important;
  font-weight:800 !important;
  text-shadow:none !important;
}
#battleSwordLabel.stage-3{
  font-family:"Gungsuh", "Batang", "Noto Serif KR", serif !important;
  font-style:normal !important;
  font-weight:900 !important;
  text-shadow:none !important;
}
#battleSwordLabel.stage-4{
  font-family:"Gungsuh", "Batang", "Noto Serif KR", serif !important;
  font-style:normal !important;
  font-weight:900 !important;
  letter-spacing:1.2px !important;
  text-shadow:
    0 0 6px rgba(255,230,150,.65),
    0 0 14px rgba(255,205,90,.40),
    0 0 24px rgba(255,185,60,.18) !important;
}

.sword-name-stage .sword-bracket{font-weight:900!important;font-style:normal!important}
.sword-name-stage.stage-0{font-family:Arial,"Noto Sans KR",sans-serif!important;font-style:italic!important;font-weight:300!important;color:#f2f2f2!important;text-shadow:none!important}
.sword-name-stage.stage-1{font-family:Arial,"Noto Sans KR",sans-serif!important;font-style:normal!important;font-weight:500!important;color:#f2f2f2!important;text-shadow:none!important}
.sword-name-stage.stage-2{font-family:Arial,"Noto Sans KR",sans-serif!important;font-style:normal!important;font-weight:800!important;color:#fff!important;text-shadow:0 0 5px rgba(255,255,255,.75),0 0 12px rgba(255,255,255,.48),0 0 22px rgba(255,255,255,.2)!important}
.sword-name-stage.stage-3{font-family:"Gungsuh","Batang","Noto Serif KR",serif!important;font-style:normal!important;font-weight:900!important;color:#d9b7ff!important;text-shadow:0 0 5px rgba(204,140,255,.9),0 0 13px rgba(171,75,255,.62),0 0 25px rgba(133,40,220,.32)!important}
.sword-name-stage.stage-4{font-family:"Gungsuh","Batang","Noto Serif KR",serif!important;font-style:normal!important;font-weight:900!important;color:#ffe7a4!important;letter-spacing:1.2px!important;text-shadow:0 0 6px rgba(255,230,150,.75),0 0 15px rgba(255,205,90,.52),0 0 28px rgba(255,180,50,.25)!important}


/* ===== V13 Ornate Boss HP Frame ===== */
.boss-main-hp{
  width:100%;
  display:flex;
  justify-content:center;
}

.boss-hp-frame-wrap{
  position:relative;
  width:min(1050px, 100%);
  height:132px;
  margin:0 auto;
}

/* 실제 체력은 프레임의 안쪽 홈에서만 줄어듦 */
.boss-hp-frame-wrap .boss-main-hp-shell{
  position:absolute;
  z-index:1;
  left:9.6%;
  width:80.8%;
  top:39%;
  height:25px;
  border:0;
  border-radius:999px;
  overflow:hidden;
  background:#220807;
  box-shadow:
    inset 0 0 8px rgba(0,0,0,.85),
    0 0 6px rgba(255,45,15,.28);
}

/* 기존 빨간 HP 게이지 */
.boss-hp-frame-wrap .boss-hp{
  background:
    linear-gradient(
      180deg,
      #ff4c24 0%,
      #d62516 35%,
      #8f100d 72%,
      #4b0505 100%
    );
  box-shadow:
    inset 0 2px 5px rgba(255,220,170,.35),
    0 0 10px rgba(255,52,18,.5);
}

/* 숫자는 장식보다 위 */
.boss-hp-frame-wrap .hp-text{
  z-index:2;
  font-size:13px;
  text-shadow:0 2px 4px #000, 0 0 4px #000;
}

/* 사용자가 준 PNG는 가장 위에서 테두리 역할만 함 */
.boss-hp-frame-image{
  position:absolute;
  z-index:3;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
}

/* 기존 shell 규칙보다 프레임 전용 규칙을 우선 */
.boss-main-hp-shell{
  border-radius:999px !important;
}

@media(max-width:760px){
  .boss-hp-frame-wrap{
    height:96px;
  }
  .boss-hp-frame-wrap .boss-main-hp-shell{
    top:39%;
    height:19px;
  }
  .boss-hp-frame-wrap .hp-text{
    font-size:10px;
  }
}


/* ===== V14 battle HUD: boss name + framed HP at top inside battle section ===== */
#screen-battle{position:relative;overflow:hidden}
#screen-battle .battle-top-hud{
  position:absolute;
  z-index:30;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:min(1120px,96%);
  text-align:center;
  pointer-events:none;
}
#screen-battle .battle-top-hud .battle-boss-title{
  margin:0 0 -14px;
  font-size:clamp(22px,2.2vw,34px);
  font-weight:900;
  letter-spacing:.07em;
  text-shadow:0 3px 8px #000,0 0 12px rgba(255,75,30,.32);
}
#screen-battle .battle-top-hud .boss-main-hp{margin:0}
#screen-battle .battle-top-hud .boss-trait-toggle{
  pointer-events:auto;
  position:absolute;
  right:5%;
  top:102px;
}
#screen-battle .battle-top-hud .boss-trait-panel{
  pointer-events:auto;
}
#screen-battle .arena{padding-top:128px}

/* ===== V14 juicy boss hit feedback ===== */
@keyframes bossHitImpact{
  0%{transform:translate(0,0) scale(1);filter:brightness(1)}
  10%{transform:translate(-13px,2px) scale(1.045);filter:brightness(2.5)}
  23%{transform:translate(10px,-4px) scale(.98);filter:brightness(1.65)}
  40%{transform:translate(-6px,2px) scale(1.02);filter:brightness(1.25)}
  62%{transform:translate(4px,-1px) scale(.995);filter:brightness(1.08)}
  100%{transform:translate(0,0) scale(1);filter:brightness(1)}
}
@keyframes arenaHitShake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-6px,2px)}
  40%{transform:translate(5px,-2px)}
  60%{transform:translate(-3px,1px)}
  80%{transform:translate(2px,0)}
}
@keyframes impactBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
  16%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.85)}
}
#bossActor.boss-hit-impact{animation:bossHitImpact .32s cubic-bezier(.18,.9,.22,1)}
#arena.hit-shake{animation:arenaHitShake .22s linear}
.boss-impact-burst{
  position:absolute;z-index:20;left:50%;top:48%;
  width:190px;height:190px;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.98) 0 5%,rgba(255,224,150,.8) 10%,rgba(255,91,28,.38) 30%,rgba(255,45,8,0) 70%);
  animation:impactBurst .32s ease-out forwards;
}
#damageFloat.hit-pop{
  animation:none!important;
  font-size:clamp(24px,3vw,42px);
  font-weight:1000;
  text-shadow:0 3px 4px #000,0 0 10px rgba(255,80,25,.7);
  transform-origin:center;
}
@keyframes damageHitPop{
  0%{opacity:0;transform:translate(-50%,0) scale(.35)}
  18%{opacity:1;transform:translate(-50%,-12px) scale(1.4)}
  48%{opacity:1;transform:translate(-50%,-26px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-60px) scale(.88)}
}
#damageFloat.hit-pop{animation:damageHitPop .62s cubic-bezier(.16,.8,.22,1)!important}

@media(max-width:760px){
  #screen-battle .battle-top-hud{top:4px;width:99%}
  #screen-battle .battle-top-hud .battle-boss-title{margin-bottom:-21px}
  #screen-battle .arena{padding-top:96px}
  #screen-battle .battle-top-hud .boss-trait-toggle{top:74px}
}


/* ===== V14.1 damage number anchor ===== */
#arena{
  position:relative;
}
#damageFloat{
  position:absolute !important;
  z-index:80 !important;
  pointer-events:none;
  transform:translate(-50%,-100%);
  white-space:nowrap;
}
#bossActor{
  z-index:10;
}
#battleBossImage{
  position:relative;
  z-index:10;
}
.boss-impact-burst{
  z-index:35 !important;
}


/* ===== V14.2 vertical action order ===== */

/* 기존 하단/가로 액션오더 UI 완전 제거 */
.bottom-order-panel{
  display:none !important;
}

/* 플레이어 왼쪽 세로형 액션 오더 */
.vertical-turn-order-panel{
  position:absolute;
  z-index:25;
  left:2.5%;
  bottom:86px;
  width:74px;
  padding:8px 6px;
  border-radius:12px;
  background:rgba(8,10,15,.78);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(5px);
}
.vertical-turn-order-title{
  text-align:center;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.3px;
  color:#8f98a6;
  margin-bottom:6px;
}
.vertical-turn-order{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.vertical-turn-order .turn-chip{
  width:100%;
  min-width:0;
  padding:6px 4px;
  border-radius:8px;
  font-size:9px;
  line-height:1.1;
}
.vertical-turn-order .turn-chip .turn-index{
  font-size:8px;
  margin-bottom:2px;
}
.vertical-turn-order .turn-chip.current{
  transform:scale(1.05);
}

/* 플레이어와 너무 겹치지 않게 약간 오른쪽 */
.field-player{
  left:13%;
}

@media(max-width:760px){
  .vertical-turn-order-panel{
    left:1%;
    bottom:78px;
    width:60px;
    padding:6px 4px;
  }
  .vertical-turn-order{
    gap:4px;
  }
  .vertical-turn-order .turn-chip{
    font-size:8px;
    padding:5px 3px;
  }
  .field-player{
    left:8%;
  }
}


/* ===== V14.3 Damage numbers ===== */
#damageFloat{
  color:#ffffff;
  font-weight:900;
  text-shadow:
    0 3px 5px rgba(0,0,0,.95),
    0 0 7px rgba(255,255,255,.22);
}

#damageFloat.damage-normal{
  font-size:clamp(24px,2.5vw,38px);
  color:#ffffff;
}

#damageFloat.damage-critical{
  font-size:clamp(36px,4vw,58px);
  color:#ff3d32;
  font-weight:1000;
  text-shadow:
    0 3px 6px rgba(0,0,0,1),
    0 0 8px rgba(255,40,30,.95),
    0 0 18px rgba(255,20,10,.65);
}

#damageFloat.damage-weak{
  text-shadow:
    0 3px 5px rgba(0,0,0,.95),
    0 0 9px rgba(255,210,75,.85);
}

/* ===== delayed yellow boss HP trail ===== */
.boss-hp-frame-wrap .boss-hp-trail{
  z-index:0;
  width:100%;
  background:
    linear-gradient(
      180deg,
      #fff07a 0%,
      #f7cf33 38%,
      #d89910 72%,
      #8f5b00 100%
    );
  box-shadow:
    inset 0 2px 4px rgba(255,255,210,.42),
    0 0 8px rgba(255,200,40,.35);
  transition:width 1.0s cubic-bezier(.15,.65,.25,1);
}

.boss-hp-frame-wrap .boss-hp{
  z-index:1;
  transition:width .14s ease-out;
}

.boss-hp-frame-wrap .hp-text{
  z-index:4;
}

/* Current Effects section is gone */
.status-strip{
  display:none !important;
}

#battleSwordLabel{
  white-space:nowrap!important;
  overflow:visible!important;
  max-width:none!important;
  width:max-content;
  font-size:clamp(10px,1.25vw,16px);
}
#battleSwordLabel.long-sword-name{
  font-size:clamp(8px,1vw,13px)!important;
  letter-spacing:-.03em!important;
}
#playerDamageFloat{
  position:absolute!important;
  z-index:80!important;
  pointer-events:none;
  transform:translate(-50%,-100%);
  white-space:nowrap;
  color:#fff;
  font-weight:900;
  text-shadow:0 3px 5px rgba(0,0,0,.95),0 0 7px rgba(255,255,255,.22);
}
#playerDamageFloat.damage-normal{font-size:clamp(23px,2.4vw,36px)}
#playerDamageFloat.damage-critical{
  font-size:clamp(34px,3.8vw,54px);
  color:#ff3d32;
  text-shadow:0 3px 6px #000,0 0 8px rgba(255,40,30,.95),0 0 18px rgba(255,20,10,.65);
}
#playerDamageFloat.hit-pop{animation:damageHitPop .62s cubic-bezier(.16,.8,.22,1)!important}

@keyframes playerHitImpact{
  0%{transform:translate(0,0) scale(1);filter:brightness(1)}
  12%{transform:translate(10px,2px) scale(1.035);filter:brightness(2.15)}
  28%{transform:translate(-8px,-2px) scale(.985);filter:brightness(1.45)}
  48%{transform:translate(4px,1px) scale(1.012);filter:brightness(1.15)}
  100%{transform:translate(0,0) scale(1);filter:brightness(1)}
}
#playerActor.player-hit-impact{animation:playerHitImpact .30s cubic-bezier(.18,.9,.22,1)}
.player-impact-burst{
  position:absolute;z-index:35;left:50%;top:45%;width:150px;height:150px;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.94) 0 6%,rgba(255,205,120,.68) 12%,rgba(255,80,25,.30) 32%,rgba(255,45,8,0) 72%);
  animation:impactBurst .30s ease-out forwards;
}

.field-boss.attack-move{animation:bossHeavyLunge 1.02s cubic-bezier(.18,.72,.18,1)!important}
@keyframes bossHeavyLunge{
  0%{transform:translateX(0) scale(1)}
  18%{transform:translateX(-24px) scale(1.012)}
  46%{transform:translateX(-155px) scale(1.055)}
  61%{transform:translateX(-155px) scale(1.055)}
  73%{transform:translateX(-142px) scale(1.03)}
  83%{transform:translateX(-118px) scale(1.015)}
  100%{transform:translateX(0) scale(1)}
}
@media(max-width:760px){
  @keyframes bossHeavyLunge{
    0%{transform:translateX(0) scale(1)}
    20%{transform:translateX(-12px) scale(1.01)}
    48%{transform:translateX(-68px) scale(1.045)}
    63%{transform:translateX(-68px) scale(1.045)}
    80%{transform:translateX(-52px) scale(1.02)}
    100%{transform:translateX(0) scale(1)}
  }
}


/* ===== V14.5 result overlay fix ===== */
#screen-result{
  position:fixed !important;
  inset:0 !important;
  z-index:3000 !important;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(4,6,10,.80);
  backdrop-filter:blur(6px);
}
#screen-result.active{
  display:flex !important;
}
#screen-result .result-card{
  width:min(520px,92vw);
  max-height:80vh;
  overflow:auto;
  margin:0 !important;
  position:relative;
  top:auto !important;
  left:auto !important;
  transform:none !important;
  box-shadow:0 24px 80px rgba(0,0,0,.65);
}

/* ===== player damage float hard visibility ===== */
#playerDamageFloat{
  display:block !important;
  opacity:0;
}
#playerDamageFloat.show{
  opacity:1;
}


/* ===== V14.6 dynamically spawned player damage ===== */
.player-damage-popup{
  position:absolute;
  z-index:120;
  left:50%;
  top:-18px;
  transform:translate(-50%,0);
  pointer-events:none;
  white-space:nowrap;
  color:#ffffff;
  font-size:34px;
  font-weight:1000;
  text-shadow:
    0 3px 6px rgba(0,0,0,1),
    0 0 8px rgba(255,255,255,.25);
  animation:playerDamagePopup .72s cubic-bezier(.16,.8,.22,1) forwards;
}
.player-damage-popup.critical{
  color:#ff3d32;
  font-size:48px;
  text-shadow:
    0 3px 6px rgba(0,0,0,1),
    0 0 8px rgba(255,40,30,.95),
    0 0 18px rgba(255,20,10,.65);
}
@keyframes playerDamagePopup{
  0%{
    opacity:0;
    transform:translate(-50%,8px) scale(.45);
  }
  18%{
    opacity:1;
    transform:translate(-50%,-8px) scale(1.28);
  }
  52%{
    opacity:1;
    transform:translate(-50%,-24px) scale(1);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-58px) scale(.9);
  }
}
#playerActor{
  overflow:visible !important;
}


/* ===== V14.7 damage popup cleanup ===== */
#damageFloat{
  opacity:0;
}
#damageFloat.show{
  opacity:1;
}

/* playBossHitImpact no longer controls the damage number animation */
#damageFloat:empty{
  display:none;
}

/* ===== Battle log button / popup ===== */
.battle-log-hidden{
  display:none !important;
}
.battle-log-button-row{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}
.battle-log-button{
  min-width:58px;
  padding:7px 12px;
  font-size:11px;
  letter-spacing:1px;
  background:#222833;
  color:#dce1e8;
  border:1px solid #3b4452;
}
.battle-log-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:3500;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(3,5,8,.78);
  backdrop-filter:blur(6px);
}
.battle-log-overlay.open{
  display:flex;
}
.battle-log-modal{
  width:min(620px,94vw);
  max-height:76vh;
  background:#11151d;
  border:1px solid #3b4350;
  border-radius:18px;
  padding:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.65);
}
.battle-log-modal-head{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.battle-log-modal-head h2{
  margin:0;
  font-size:20px;
  letter-spacing:1px;
}
.battle-log-modal-head .overlay-close{
  position:static;
  flex:none;
}
.battle-log-list{
  max-height:58vh;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding-right:4px;
}
.battle-log-entry{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:10px;
  padding:9px 10px;
  border-radius:9px;
  background:#0c1016;
  border:1px solid #252c36;
  font-size:12px;
  line-height:1.45;
}
.battle-log-entry .log-index{
  color:#7f8998;
  font-weight:900;
  text-align:right;
}
.battle-log-entry.player-log{
  border-left:3px solid #3e8ed0;
}
.battle-log-entry.boss-log{
  border-left:3px solid #b74a4a;
}


/* ===== V15 mechanical slot reels ===== */
.reels{
  overflow:visible;
}
.slot-reel-viewport{
  position:relative;
  overflow:hidden !important;
  height:112px;
  min-height:112px !important;
  padding:0 !important;
  display:block !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.12)),
    #090b10 !important;
  border:2px solid #3a414e;
  border-radius:15px;
  box-shadow:
    inset 0 14px 18px rgba(0,0,0,.65),
    inset 0 -14px 18px rgba(0,0,0,.65);
}

/* center selection line */
.slot-reel-viewport::before,
.slot-reel-viewport::after{
  content:"";
  position:absolute;
  z-index:8;
  left:7%;
  right:7%;
  height:1px;
  background:rgba(255,255,255,.16);
  pointer-events:none;
}
.slot-reel-viewport::before{top:8px}
.slot-reel-viewport::after{bottom:8px}

.slot-reel-strip{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  will-change:transform;
  transform:translateY(0);
}

.slot-reel-symbol{
  height:112px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  font-weight:900;
  user-select:none;
  line-height:1;
  text-shadow:0 3px 8px rgba(0,0,0,.55);
}

/* subtle mechanical blur while actually rotating */
.slot-reel-viewport.reel-running .slot-reel-strip{
  filter:blur(.55px);
}
.slot-reel-viewport.reel-braking .slot-reel-strip{
  filter:blur(.2px);
}
.slot-reel-viewport.reel-stopped{
  animation:reelStopKick .18s cubic-bezier(.18,.9,.25,1);
}
@keyframes reelStopKick{
  0%{transform:translateY(0)}
  42%{transform:translateY(5px)}
  72%{transform:translateY(-2px)}
  100%{transform:translateY(0)}
}

/* Dark masks at top/bottom give the illusion of symbols entering/leaving a drum */
.slot-reel-viewport .reel-mask-top,
.slot-reel-viewport .reel-mask-bottom{
  position:absolute;
  left:0;
  right:0;
  height:24px;
  z-index:7;
  pointer-events:none;
}
.slot-reel-viewport .reel-mask-top{
  top:0;
  background:linear-gradient(#06070a,transparent);
}
.slot-reel-viewport .reel-mask-bottom{
  bottom:0;
  background:linear-gradient(transparent,#06070a);
}

@media(max-width:760px){
  .slot-reel-viewport{
    height:96px;
    min-height:96px !important;
  }
  .slot-reel-symbol{
    height:96px;
    font-size:36px;
  }
}

/* V15 overrides the old fake reel animation */
.slot-reel-viewport.spin{
  animation:none !important;
}

#damageFloat:empty{
  display:none !important;
}
#damageFloat:not(:empty){
  display:block;
}


/* ===== V15.2 boss damage popup: fresh DOM per hit ===== */
#damageFloat{
  display:none !important;
}

#bossActor{
  overflow:visible !important;
}

.boss-damage-popup{
  position:absolute;
  z-index:130;
  left:50%;
  top:-18px;
  transform:translate(-50%,0);
  pointer-events:none;
  white-space:nowrap;
  color:#ffffff;
  font-size:34px;
  font-weight:1000;
  text-shadow:
    0 3px 6px rgba(0,0,0,1),
    0 0 7px rgba(255,255,255,.22);
  animation:bossDamagePopupV2 .72s cubic-bezier(.16,.8,.22,1) forwards;
}

.boss-damage-popup.critical{
  color:#ff3d32;
  font-size:52px;
  text-shadow:
    0 3px 6px rgba(0,0,0,1),
    0 0 9px rgba(255,40,30,.95),
    0 0 20px rgba(255,20,10,.68);
}

.boss-damage-popup.weak:not(.critical){
  text-shadow:
    0 3px 6px rgba(0,0,0,1),
    0 0 9px rgba(255,215,70,.85);
}

@keyframes bossDamagePopupV2{
  0%{
    opacity:0;
    transform:translate(-50%,8px) scale(.45);
  }
  18%{
    opacity:1;
    transform:translate(-50%,-8px) scale(1.28);
  }
  52%{
    opacity:1;
    transform:translate(-50%,-24px) scale(1);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-60px) scale(.88);
  }
}


/* ===== V15.3 inline coin ===== */
.slot-coin-inline{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:12px;
  padding-left:12px;
  border-left:1px solid rgba(255,255,255,.18);
  font-size:.72em;
  letter-spacing:.08em;
  color:#aeb7c4;
}
.slot-coin-inline b{color:#fff}

/* ===== V15.3 attack slot ===== */
.attack-slot-panel{
  width:min(360px,72%);
  margin:10px auto 12px;
}
.attack-slot-label{
  text-align:center;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.4px;
  color:#9da6b4;
  margin-bottom:5px;
}
.attack-reels{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}
.attack-reel.slot-reel-viewport{
  height:58px;
  min-height:58px!important;
  border-radius:9px;
}
.attack-reel .slot-reel-symbol{
  height:58px;
  font-size:25px;
}

/* ===== V15.3 tactile slot / attack buttons ===== */
#btnSpin,
#btnBossSpin,
#btnAttack{
  position:relative;
  transform:translateY(0);
  border-bottom-width:5px!important;
  box-shadow:
    0 6px 0 rgba(0,0,0,.52),
    0 9px 18px rgba(0,0,0,.28);
  transition:
    transform 55ms ease,
    box-shadow 55ms ease,
    filter 80ms ease;
  touch-action:manipulation;
}
#btnSpin:not(:disabled):active,
#btnBossSpin:not(:disabled):active,
#btnAttack:not(:disabled):active,
#btnSpin.button-pressed,
#btnBossSpin.button-pressed,
#btnAttack.button-pressed{
  transform:translateY(5px) scale(.995);
  box-shadow:
    0 1px 0 rgba(0,0,0,.55),
    0 3px 7px rgba(0,0,0,.22);
  filter:brightness(1.18);
}
#btnSpin:not(:disabled)::after,
#btnBossSpin:not(:disabled)::after,
#btnAttack:not(:disabled)::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:4px;
  height:1px;
  background:rgba(255,255,255,.28);
  pointer-events:none;
}

@media(max-width:760px){
  .attack-slot-panel{width:82%}
  .attack-reel.slot-reel-viewport{height:50px;min-height:50px!important}
  .attack-reel .slot-reel-symbol{height:50px;font-size:22px}
}


/* =========================================================
   V15.4 fixed boss-room 80:20 split, rebuilt DOM
   ========================================================= */

#screen-boss-slot{
  width:min(1500px,96vw);
  max-width:1500px;
  margin:0 auto;
}

.boss-room-split{
  display:grid;
  grid-template-columns:minmax(0,8fr) minmax(260px,2fr);
  gap:16px;
  width:100%;
  align-items:stretch;
}

.boss-room-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.boss-card-rebuilt{
  position:relative;
  margin:0;
  min-height:500px;
  width:100%;
  box-sizing:border-box;
}

.boss-title-impact-wrap{
  text-align:center;
  margin-bottom:18px;
}

.boss-title-inline{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}

.boss-title-inline .boss-title-impact{
  margin:0;
}

.boss-content-row-rebuilt{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
  gap:22px;
  align-items:stretch;
}

.boss-visual-column{
  min-width:0;
}

.boss-visual-column .boss-placeholder{
  width:100%;
  height:365px;
}

.boss-info-column{
  min-width:0;
}

.vertical-boss-stats{
  display:flex !important;
  flex-direction:column;
  gap:8px;
}

.vertical-boss-stats>div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:44px;
  padding:12px 14px;
  background:#0d1016;
  border-radius:9px;
}

.boss-description-btn-small{
  position:absolute;
  top:16px;
  right:16px;
  width:auto !important;
  min-width:54px;
  padding:6px 10px !important;
  font-size:11px !important;
  z-index:5;
}

.boss-main-fight{
  width:100%;
  min-height:58px;
  margin:0;
}

/* Right 20% */
.boss-room-slot{
  min-width:0;
  margin:0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  padding:16px 14px;
  background:
    linear-gradient(180deg,#171d27 0%,#0d1118 56%,#090c11 100%);
  border:1px solid #303847;
  border-radius:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -20px 30px rgba(0,0,0,.24);
}

.boss-room-slot-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}

.boss-room-slot-head .panel-title{
  margin:0;
  font-size:11px;
}

.boss-room-slot-machine{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}

.boss-room-slot-reels{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  flex:1;
}

.boss-room-slot-reel.slot-reel-viewport{
  width:100%;
  height:118px;
  min-height:118px !important;
  border-radius:13px;
}

.boss-room-slot-reel .slot-reel-symbol{
  height:118px;
  font-size:45px;
}

.boss-room-spin{
  width:100%;
  min-height:54px;
  margin-top:14px;
  font-weight:900;
}

/* Desktop-first */
@media(max-width:900px){
  .boss-room-split{
    grid-template-columns:minmax(0,1fr) 280px;
  }

  .boss-content-row-rebuilt{
    grid-template-columns:minmax(0,1fr) 290px;
  }
}

@media(max-width:720px){
  .boss-room-split{
    grid-template-columns:1fr;
  }

  .boss-content-row-rebuilt{
    grid-template-columns:1fr;
  }

  .boss-room-slot-reels{
    flex-direction:row;
  }

  .boss-room-slot-reel.slot-reel-viewport{
    height:96px;
    min-height:96px !important;
  }

  .boss-room-slot-reel .slot-reel-symbol{
    height:96px;
    font-size:36px;
  }
}


/* =========================================================
   V15.4 CENTERED BOSS ROOM
   Keep 80:20 split, center the whole room as one block.
   ========================================================= */

#screen-boss-slot{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  box-sizing:border-box !important;
}

#screen-boss-slot > .topbar,
#screen-boss-slot > .boss-room-split{
  width:1400px !important;
  max-width:calc(100vw - 80px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

#screen-boss-slot > .boss-room-split{
  display:grid !important;
  grid-template-columns:minmax(0,8fr) minmax(260px,2fr) !important;
  gap:16px !important;
  justify-content:center !important;
}

/* Keep overlays independent from the centered content width. */
#screen-boss-slot .boss-description-overlay{
  width:100vw;
}

/* Laptop widths: preserve centered block rather than pinning it left. */
@media(max-width:1480px){
  #screen-boss-slot > .topbar,
  #screen-boss-slot > .boss-room-split{
    width:calc(100vw - 80px) !important;
    max-width:calc(100vw - 80px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* =========================================================
   V15.4 CENTER SCREEN VISIBILITY FIX
   ========================================================= */

/* inactive boss screen must obey the global screen system */
#screen-boss-slot:not(.active){
  display:none !important;
}

/* centering/flex is enabled ONLY when this screen is active */
#screen-boss-slot.active{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;

  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
}

/* keep the centered 1400px content block */
#screen-boss-slot.active > .topbar,
#screen-boss-slot.active > .boss-room-split{
  width:1400px !important;
  max-width:calc(100vw - 80px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

@media(max-width:1480px){
  #screen-boss-slot.active > .topbar,
  #screen-boss-slot.active > .boss-room-split{
    width:calc(100vw - 80px) !important;
    max-width:calc(100vw - 80px) !important;
  }
}


/* =========================================================
   V15.5 BOSS STATUS SLOT UNDER BOSS STATS
   ========================================================= */

/* No longer split the whole room 80:20. The boss card owns the full centered width. */
#screen-boss-slot.active > .boss-room-split{
  display:block !important;
  width:1400px !important;
  max-width:calc(100vw - 80px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.boss-room-main{
  width:100% !important;
}

/*
  Main card:
  left = larger boss image
  right = boss stats, then status slot underneath
*/
.boss-content-row-rebuilt{
  display:grid !important;
  grid-template-columns:minmax(0,1.45fr) minmax(360px,.55fr) !important;
  gap:24px !important;
  align-items:start !important;
}

/* Make the boss visual substantially larger. */
.boss-card-rebuilt{
  min-height:650px !important;
}

.boss-visual-column .boss-placeholder{
  width:100% !important;
  height:535px !important;
  min-height:535px !important;
  max-height:535px !important;
}

.boss-visual-column .boss-placeholder img,
#bossPlaceholder img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
}

/* Right column is now a vertical stack. */
.boss-info-column{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  min-width:0 !important;
}

.vertical-boss-stats{
  width:100% !important;
}

/* Slot panel sits immediately below the boss stats. */
.boss-room-slot-under-stats{
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:14px !important;
  box-sizing:border-box !important;
}

.boss-room-slot-under-stats .boss-room-slot-head{
  margin-bottom:10px !important;
}

/* Three slot reels are vertical, but more compact so the whole machine fits under stats. */
.boss-room-slot-under-stats .boss-room-slot-reels{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  flex:none !important;
}

.boss-room-slot-under-stats .boss-room-slot-reel.slot-reel-viewport{
  width:100% !important;
  height:72px !important;
  min-height:72px !important;
  max-height:72px !important;
}

.boss-room-slot-under-stats .boss-room-slot-reel .slot-reel-symbol{
  height:72px !important;
  min-height:72px !important;
  max-height:72px !important;
  font-size:34px !important;
}

.boss-room-slot-under-stats .boss-room-spin{
  min-height:48px !important;
  margin-top:10px !important;
}

/* Fight remains full width under the complete boss card. */
.boss-main-fight{
  width:100% !important;
}

@media(max-width:1000px){
  .boss-content-row-rebuilt{
    grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr) !important;
  }

  .boss-visual-column .boss-placeholder{
    height:480px !important;
    min-height:480px !important;
    max-height:480px !important;
  }
}


/* =========================================================
   V15.6 BOSS STATUS SLOT: HORIZONTAL 3 REELS
   ========================================================= */

.boss-room-slot-under-stats .boss-room-slot-reels{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows:96px !important;
  gap:8px !important;
  width:100% !important;
  flex:none !important;
  justify-content:stretch !important;
  align-items:stretch !important;
}

.boss-room-slot-under-stats .boss-room-slot-reel.slot-reel-viewport{
  width:100% !important;
  min-width:0 !important;
  height:96px !important;
  min-height:96px !important;
  max-height:96px !important;
  margin:0 !important;
}

.boss-room-slot-under-stats .boss-room-slot-reel .slot-reel-symbol{
  width:100% !important;
  height:96px !important;
  min-height:96px !important;
  max-height:96px !important;
  font-size:38px !important;
}

.boss-room-slot-under-stats .boss-room-spin{
  width:100% !important;
  min-height:48px !important;
  margin-top:10px !important;
}

/* Prevent older narrow-screen rule from turning these reels vertical/odd again. */
@media(max-width:720px){
  .boss-room-slot-under-stats .boss-room-slot-reels{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows:82px !important;
    gap:6px !important;
  }

  .boss-room-slot-under-stats .boss-room-slot-reel.slot-reel-viewport,
  .boss-room-slot-under-stats .boss-room-slot-reel .slot-reel-symbol{
    height:82px !important;
    min-height:82px !important;
    max-height:82px !important;
  }
}


/* =========================================================
   V15.6.1 BOSS SLOT REEL WIDTH FIX
   Fix "Pepero" reels caused by legacy .reel sizing.
   ========================================================= */

.boss-room-slot-under-stats{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.boss-room-slot-under-stats .boss-room-slot-machine{
  width:100% !important;
  min-width:0 !important;
}

/* Three equal horizontal reel cells */
.boss-room-slot-under-stats .boss-room-slot-reels{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  grid-auto-columns:1fr !important;
  gap:10px !important;

  width:100% !important;
  min-width:0 !important;
  max-width:none !important;

  height:auto !important;
  min-height:0 !important;

  justify-items:stretch !important;
  align-items:stretch !important;
}

/* Kill all legacy fixed/narrow reel width rules */
.boss-room-slot-under-stats .boss-room-slot-reels > .reel,
.boss-room-slot-under-stats .boss-room-slot-reel,
.boss-room-slot-under-stats .boss-room-slot-reel.slot-reel-viewport{
  display:block !important;

  width:100% !important;
  min-width:0 !important;
  max-width:none !important;

  height:104px !important;
  min-height:104px !important;
  max-height:104px !important;

  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  flex:none !important;
}

/* Strip and symbols must fill the reel cell */
.boss-room-slot-under-stats .boss-room-slot-reel .slot-reel-strip{
  width:100% !important;
  min-width:100% !important;
}

.boss-room-slot-under-stats .boss-room-slot-reel .slot-reel-symbol{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;

  height:104px !important;
  min-height:104px !important;
  max-height:104px !important;

  font-size:40px !important;
  box-sizing:border-box !important;
}

/* Keep button aligned to the same full slot width */
.boss-room-slot-under-stats .boss-room-spin{
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  margin-top:10px !important;
}


/* =========================================================
   V15.6.2 REEL MOTION FIX
   ========================================================= */
.boss-room-slot-under-stats .slot-reel-strip{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:auto !important;
  will-change:transform !important;
  transform-style:preserve-3d;
}

.boss-room-slot-under-stats .slot-reel-viewport{
  overflow:hidden !important;
  position:relative !important;
}


/* =========================================================
   V15.6.3 INTERMEDIATE REEL SYMBOL VISIBILITY FIX
   ========================================================= */

.slot-reel-strip{
  display:block !important;
  overflow:visible !important;
  opacity:1 !important;
  visibility:visible !important;
  backface-visibility:hidden;
}

.slot-reel-symbol.reel-spin-cell{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;

  opacity:1 !important;
  visibility:visible !important;

  color:#ffffff !important;
  background:transparent !important;

  position:relative !important;
  z-index:2 !important;

  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif !important;

  line-height:1 !important;
  text-indent:0 !important;
  overflow:visible !important;

  transform:translateZ(0);
}

/* 보스 슬롯의 중간 칸도 결과 칸과 동일한 크기/가시성으로 강제 */
.boss-room-slot-under-stats .slot-reel-symbol.reel-spin-cell{
  font-size:40px !important;
  opacity:1 !important;
  color:#fff !important;
}

/* 회전 중 blur가 너무 강하면 이모지가 검은 잔상처럼 뭉개질 수 있으므로 제거 */
.slot-reel-viewport.reel-running .slot-reel-strip,
.slot-reel-viewport.reel-braking .slot-reel-strip{
  filter:none !important;
}


/* =========================================================
   V15.7 BOSS ROOM GRID WIDTH MATCH
   Same horizontal footprint as PLAYER SLOT / battle screens.
   Boss image grows vertically only.
   ========================================================= */

/* Boss screen outer width matches the rest of the game. */
#screen-boss-slot.active{
  width:100% !important;
  max-width:none !important;
  align-items:center !important;
}

/* Use the same desktop content width as the other main game screens. */
#screen-boss-slot.active > .topbar,
#screen-boss-slot.active > .boss-room-split{
  width:1200px !important;
  max-width:calc(100vw - 80px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* The boss room is now one normal-width card, not an extra-wide 1400px layout. */
#screen-boss-slot.active > .boss-room-split{
  display:block !important;
}

/* Restore a more balanced horizontal split inside the boss card. */
.boss-content-row-rebuilt{
  display:grid !important;
  grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr) !important;
  gap:22px !important;
  align-items:start !important;
}

/* Boss image grows vertically, not horizontally. */
.boss-visual-column{
  min-width:0 !important;
}

.boss-visual-column .boss-placeholder{
  width:100% !important;
  height:600px !important;
  min-height:600px !important;
  max-height:600px !important;
}

#bossPlaceholder img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* Allow the card to accommodate the taller image without changing its width. */
.boss-card-rebuilt{
  min-height:710px !important;
  width:100% !important;
}

/* Stats + status slot remain in the right column. */
.boss-info-column{
  width:100% !important;
  min-width:0 !important;
}

/* Keep slot machine compact so it doesn't force the card wider. */
.boss-room-slot-under-stats{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

.boss-room-slot-under-stats .boss-room-slot-reels{
  width:100% !important;
  min-width:0 !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

/* Fight follows the same 1200px width as the room. */
.boss-main-fight{
  width:100% !important;
}

/* Smaller desktop widths: shrink content but never make boss room wider than other screens. */
@media(max-width:1280px){
  #screen-boss-slot.active > .topbar,
  #screen-boss-slot.active > .boss-room-split{
    width:calc(100vw - 80px) !important;
    max-width:calc(100vw - 80px) !important;
  }

  .boss-content-row-rebuilt{
    grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr) !important;
  }

  .boss-visual-column .boss-placeholder{
    height:560px !important;
    min-height:560px !important;
    max-height:560px !important;
  }
}


/* =========================================================
   V15.8 BATTLE CLEANUP
   ========================================================= */

/* Boss name sits above the battle grid, centered. */
.battle-boss-name-top{
  width:100%;
  text-align:center;
  margin:4px 0 10px;
}

.battle-boss-name-top #battleBossName{
  display:inline-block;
  margin:0;
  font-size:clamp(24px,2.2vw,34px);
  font-weight:900;
  letter-spacing:.06em;
  text-align:center;
  text-shadow:
    0 3px 8px rgba(0,0,0,.95),
    0 0 10px rgba(255,80,35,.28);
}

/* Remove any leftover internal boss-name spacing. */
.battle-top-hud .battle-boss-title,
.boss-top-ui .battle-boss-title{
  display:none !important;
}

/* No "none" / empty status area. */
.status-effects:empty,
.status-strip:empty{
  display:none !important;
}

/* Only the remaining battle action button occupies the row cleanly. */
.battle-actions-single{
  display:grid !important;
  grid-template-columns:1fr !important;
}

.battle-actions-single #btnAttack{
  width:100% !important;
}

/* Hard-hide removed controls in case old CSS/JS tries to revive them. */
#btnCharge,
#btnFocus,
#btnGuard,
#btnCounter,
#btnHeal{
  display:none !important;
}


/* =========================================================
   V15.9 BATTLE HP LAYOUT
   - Player HP above player actor
   - Boss HP remains inside battle grid
   - Actor bottoms aligned
   ========================================================= */

/* Arena is the positioning reference for both actors and boss HP. */
#screen-battle .arena{
  position:relative !important;
}

/* Player and boss share exactly the same floor/bottom line. */
#screen-battle #playerActor,
#screen-battle #bossActor{
  bottom:34px !important;
}

/*
  PLAYER HP
  Keep it attached to the player actor and place it above the character.
  Width stays centered on the player's horizontal center.
*/
#screen-battle #playerActor{
  position:absolute !important;
}

#screen-battle #playerActor .player-hp-wrap,
#screen-battle #playerActor .player-hp,
#screen-battle #playerActor .actor-hp,
#screen-battle #playerActor .hp-wrap{
  position:absolute !important;
  left:50% !important;
  bottom:calc(100% + 12px) !important;
  transform:translateX(-50%) !important;
  width:220px !important;
  z-index:30 !important;
  margin:0 !important;
}

/* If the player HP is a sibling positioned by the old battle CSS. */
#screen-battle .player-hp-wrap{
  z-index:30 !important;
}

/*
  BOSS HP
  It belongs to the battle grid, not the outside title area.
  Pin it to the top inside edge of the arena.
*/
#screen-battle .battle-top-hud{
  position:absolute !important;
  top:12px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:94% !important;
  max-width:none !important;
  z-index:35 !important;
  margin:0 !important;
  pointer-events:none;
}

#screen-battle .battle-top-hud #battleBossName,
#screen-battle .battle-top-hud .battle-boss-title{
  display:none !important;
}

/* Boss name stays outside above the grid as requested previously. */
#screen-battle .battle-boss-name-top{
  position:relative !important;
  width:100% !important;
  text-align:center !important;
  margin:4px 0 10px !important;
  z-index:10;
}

/* Keep enough top breathing room in the arena for the boss HP frame. */
#screen-battle .arena{
  padding-top:132px !important;
  box-sizing:border-box !important;
}


/* =========================================================
   V15.10 PLAYER/BOSS VISUAL ALIGNMENT + TRAIT BUTTON MOVE
   ========================================================= */

/*
  Sword label must NOT contribute to player actor's layout height.
  It is now absolutely positioned below the player image.
*/
#screen-battle #playerActor{
  position:absolute !important;
  overflow:visible !important;
}

#screen-battle #battleSwordLabel{
  position:absolute !important;
  left:50% !important;
  top:100% !important;
  transform:translateX(-50%) !important;

  width:max-content !important;
  max-width:none !important;
  margin:8px 0 0 0 !important;

  white-space:nowrap !important;
  z-index:25 !important;
}

/* Player HP remains above actor image, independent of sword label. */
#screen-battle #playerActor .player-hp-wrap,
#screen-battle #playerActor .player-hp,
#screen-battle #playerActor .actor-hp,
#screen-battle #playerActor .hp-wrap{
  position:absolute !important;
  left:50% !important;
  bottom:calc(100% + 12px) !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
}

/* Force actor image boxes to align on the same baseline. */
#screen-battle #playerActor,
#screen-battle #bossActor{
  bottom:34px !important;
}

#screen-battle #playerActor .actor-image,
#screen-battle #bossActor .actor-image,
#screen-battle #playerBattleImage,
#screen-battle #battleBossImage{
  display:block !important;
  margin:0 !important;
}

/* Boss trait button now lives next to LOG. */
#screen-battle .battle-log-button-row{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
}

#screen-battle #btnBossTraitToggle{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  margin:0 !important;

  min-width:110px;
  padding:7px 12px;
  font-size:11px;
}

/* remove any old top-HUD trait positioning */
#screen-battle .battle-top-hud #btnBossTraitToggle,
#screen-battle .boss-top-ui #btnBossTraitToggle{
  position:static !important;
}


/* =========================================================
   V15.11 BATTLE ALIGNMENT FIX
   ========================================================= */

/* Arena is the sole positioning reference. */
#screen-battle .arena{
  position:relative !important;
  padding-top:150px !important;
  box-sizing:border-box !important;
}

/* Boss HP stays inside the battle grid, but no longer hugs the border. */
#screen-battle .battle-top-hud{
  position:absolute !important;
  top:24px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:90% !important;
  max-width:none !important;
  margin:0 !important;
  z-index:35 !important;
  pointer-events:none !important;
}

/* Boss name remains outside the grid. */
#screen-battle .battle-boss-name-top{
  margin:0 0 14px !important;
  text-align:center !important;
}

/* Both actors share one exact floor line. */
#screen-battle #playerActor,
#screen-battle #bossActor{
  position:absolute !important;
  bottom:36px !important;
  margin:0 !important;
  overflow:visible !important;
}

/* Move player a bit right for better composition. */
#screen-battle #playerActor{
  left:17% !important;
}

#screen-battle #bossActor{
  right:13% !important;
  left:auto !important;
}

/* Actor images themselves define the visual baseline. */
#screen-battle #playerBattleImage,
#screen-battle #battleBossImage,
#screen-battle #playerActor .actor-image,
#screen-battle #bossActor .actor-image{
  display:block !important;
  margin:0 !important;
  position:relative !important;
}

/* PLAYER HP: position relative to the player actor, independent of DOM flow. */
#screen-battle #playerHpWrap,
#screen-battle .player-hp-wrap{
  position:absolute !important;
  left:50% !important;
  bottom:calc(100% + 18px) !important;
  transform:translateX(-50%) !important;
  width:220px !important;
  margin:0 !important;
  z-index:40 !important;
}

/* Fallback for actual HP shell if wrapper doesn't exist. */
#screen-battle #playerActor .hp-shell,
#screen-battle #playerActor .player-hp-shell{
  position:absolute !important;
  left:50% !important;
  bottom:calc(100% + 18px) !important;
  transform:translateX(-50%) !important;
  width:220px !important;
  margin:0 !important;
  z-index:40 !important;
}

/* Sword name does not affect actor layout at all. */
#screen-battle #battleSwordLabel{
  position:absolute !important;
  left:50% !important;
  top:calc(100% + 10px) !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  width:max-content !important;
  max-width:none !important;
  white-space:nowrap !important;
  z-index:30 !important;
}

/* PLAYER label also floats independently. */
#screen-battle #playerActor .actor-label,
#screen-battle #playerActor .player-label{
  position:absolute !important;
  left:50% !important;
  bottom:calc(100% + 2px) !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  white-space:nowrap !important;
  z-index:30 !important;
}

/* Log + boss trait align to battle content edge rather than viewport edge. */
#screen-battle .battle-log-button-row{
  width:100% !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
  box-sizing:border-box !important;
}

/* prevent old positioning rules from reappearing */
#screen-battle .boss-top-ui #btnBossTraitToggle,
#screen-battle .battle-top-hud #btnBossTraitToggle{
  position:static !important;
}


/* =========================================================
   V15.12 PLACEHOLDER + HP POSITION FIX
   ========================================================= */

/*
  Placeholder / image box itself must remain rectangular.
  Attack/hit motion belongs to the actor wrapper, not the image box.
*/
#screen-battle #playerBattleImage,
#screen-battle #battleBossImage,
#screen-battle #playerActor .actor-image,
#screen-battle #bossActor .actor-image{
  transform:none !important;
  rotate:0deg !important;
  skew:0deg !important;
  margin:0 !important;
  box-sizing:border-box !important;
  align-self:auto !important;
}

/* Keep placeholder geometry stable even before real images load. */
#screen-battle .image-placeholder,
#screen-battle .actor-image{
  vertical-align:top !important;
  flex:none !important;
}

/*
  PLAYER HP
  Put it directly above the actual player image area.
  A small 6px gap keeps it visually attached without touching the image.
*/
#screen-battle #playerHpWrap,
#screen-battle .player-hp-wrap,
#screen-battle #playerActor .hp-shell,
#screen-battle #playerActor .player-hp-shell{
  position:absolute !important;
  left:50% !important;
  bottom:calc(100% + 6px) !important;
  transform:translateX(-50%) !important;
  width:220px !important;
  margin:0 !important;
  z-index:45 !important;
}

/* If PLAYER label exists, place it above the HP instead of between HP and image. */
#screen-battle #playerActor .actor-label,
#screen-battle #playerActor .player-label{
  position:absolute !important;
  left:50% !important;
  bottom:calc(100% + 32px) !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  white-space:nowrap !important;
  z-index:46 !important;
}

/*
  BOSS HP
  Still inside the battle grid, but give it much more breathing room
  from the grid's top border.
*/
#screen-battle .battle-top-hud{
  top:42px !important;
  width:88% !important;
}

/* Increase arena top reservation accordingly. */
#screen-battle .arena{
  padding-top:172px !important;
}

/* Keep both visual boxes on one clean baseline. */
#screen-battle #playerActor,
#screen-battle #bossActor{
  bottom:36px !important;
}


/* =========================================================
   V15.13 PLAYER LABEL -> HP -> IMAGE
   ========================================================= */

/* PLAYER label sits highest. */
#screen-battle #playerActor .actor-label,
#screen-battle #playerActor .player-label{
  position:absolute !important;
  left:50% !important;
  bottom:calc(100% + 36px) !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  white-space:nowrap !important;
  z-index:46 !important;
}

/* HP bar sits directly below PLAYER and just above the player image. */
#screen-battle #playerHpWrap,
#screen-battle .player-hp-wrap,
#screen-battle #playerActor .hp-shell,
#screen-battle #playerActor .player-hp-shell{
  position:absolute !important;
  left:50% !important;
  bottom:calc(100% + 6px) !important;
  transform:translateX(-50%) !important;
  width:220px !important;
  margin:0 !important;
  z-index:45 !important;
}


/* =========================================================
   V15.14 REAL PLAYER HP DOM FIX
   PLAYER and HP are now positioned against the same actor.
   ========================================================= */

#screen-battle #playerActor{
  overflow:visible !important;
}

/* PLAYER immediately above HP */
#screen-battle #playerActor .actor-label,
#screen-battle #playerActor .player-label{
  position:absolute !important;
  left:50% !important;
  bottom:calc(100% + 27px) !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  padding:0 !important;
  line-height:16px !important;
  z-index:47 !important;
}

/* Actual HP bar: only ~2px below PLAYER label */
#screen-battle #playerActor #playerHpWrap,
#screen-battle #playerActor .player-hp-wrap,
#screen-battle #playerActor .player-hp{
  position:absolute !important;
  left:50% !important;
  bottom:calc(100% + 5px) !important;
  transform:translateX(-50%) !important;
  width:220px !important;
  margin:0 !important;
  padding:0 !important;
  z-index:46 !important;
}

/* Override old detached HUD positioning with higher specificity. */
#screen-battle .arena #playerActor #playerHpWrap,
#screen-battle .arena #playerActor .player-hp-wrap{
  top:auto !important;
  right:auto !important;
}


/* =========================================================
   V15.15 EXACT PLAYER NAME / HP / IMAGE STACK
   Actual DOM:
   .actor-name
   #playerBattleImage
   #battleSwordLabel
   .actor-hp
   ========================================================= */

#screen-battle #playerActor{
  --player-image-height:195px;
  position:absolute !important;
  overflow:visible !important;
}

/* Make the image define the bottom/base of the actor. */
#screen-battle #playerBattleImage{
  width:155px !important;
  height:var(--player-image-height) !important;
  min-height:var(--player-image-height) !important;
  max-height:var(--player-image-height) !important;
  margin:0 !important;
}

/*
  HP sits 4px above the image.
  195 image + 4 gap = bottom 199.
*/
#screen-battle #playerActor > .actor-hp{
  position:absolute !important;
  left:50% !important;
  bottom:calc(var(--player-image-height) + 4px) !important;
  transform:translateX(-50%) !important;

  width:220px !important;
  height:20px !important;
  margin:0 !important;
  padding:0 !important;

  z-index:50 !important;
}

/* Stop older hp-shell rules from pulling the shell out of .actor-hp. */
#screen-battle #playerActor > .actor-hp > .hp-shell{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;

  width:100% !important;
  height:20px !important;
  margin:0 !important;
}

/*
  PLAYER label is 2px above the HP.
  HP spans bottom 199 -> 219, so label bottom = 221.
*/
#screen-battle #playerActor > .actor-name{
  position:absolute !important;
  left:50% !important;
  bottom:calc(var(--player-image-height) + 30px) !important;
  transform:translateX(-50%) !important;

  margin:0 !important;
  padding:0 !important;
  line-height:16px !important;

  white-space:nowrap !important;
  z-index:51 !important;
}

/* Sword name remains visually below the image and does not affect geometry. */
#screen-battle #battleSwordLabel{
  position:absolute !important;
  left:50% !important;
  top:calc(100% + 8px) !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  white-space:nowrap !important;
}

/* Kill the older generic actor-hp placement with exact higher specificity. */
#screen-battle .arena #playerActor > .actor-hp{
  top:auto !important;
  right:auto !important;
}


/* =========================================================
   V15.16 HP POLISH
   ========================================================= */

/* Boss HP frame/UI about 1.5x thicker */
#screen-battle .boss-hp-frame-wrap{
  height:190px !important;
}
#screen-battle .boss-hp-frame-wrap .boss-main-hp-shell{
  top:36% !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
}
#screen-battle .boss-hp-frame-wrap .hp-text{
  line-height:42px !important;
  font-size:15px !important;
}

/* Player HP width exactly matches the player image width */
#screen-battle #playerActor{
  --player-image-width:155px;
  --player-image-height:195px;
}
#screen-battle #playerBattleImage{
  width:var(--player-image-width) !important;
  min-width:var(--player-image-width) !important;
  max-width:var(--player-image-width) !important;
}
#screen-battle #playerActor > .actor-hp{
  width:var(--player-image-width) !important;
  min-width:var(--player-image-width) !important;
  max-width:var(--player-image-width) !important;
}

/* Player delayed yellow damage trail */
#screen-battle #playerActor > .actor-hp > .hp-shell{
  position:relative !important;
  overflow:hidden !important;
}
#screen-battle #playerHpTrail{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  height:100% !important;
  width:100%;
  z-index:0 !important;
  background:linear-gradient(
    180deg,
    #fff27b 0%,
    #f7d43b 38%,
    #d69a14 72%,
    #8b5b00 100%
  ) !important;
  box-shadow:
    inset 0 2px 4px rgba(255,255,210,.42),
    0 0 8px rgba(255,200,40,.32) !important;
  transition:width 1.0s cubic-bezier(.15,.65,.25,1) !important;
}
#screen-battle #playerHpBar{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  height:100% !important;
  z-index:1 !important;
  transition:width .14s ease-out !important;
}
#screen-battle #playerActor .hp-text{
  position:relative !important;
  z-index:3 !important;
}


/* =========================================================
   V15.17 PLAYER HP HARD FIX
   Explicit 3-layer shell: yellow trail -> blue current -> text
   ========================================================= */

#screen-battle #playerActor > .player-actor-hp{
  position:absolute !important;
  left:50% !important;
  bottom:calc(var(--player-image-height) + 4px) !important;
  transform:translateX(-50%) !important;
  width:var(--player-image-width) !important;
  height:20px !important;
  margin:0 !important;
  padding:0 !important;
  z-index:50 !important;
}

#screen-battle #playerActor .player-hp-shell{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:20px !important;
  min-height:20px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid rgba(120,160,220,.7) !important;
  border-radius:999px !important;
  background:#111722 !important;
  box-sizing:border-box !important;
}

#screen-battle #playerHpTrail{
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:100%;
  height:auto !important;
  z-index:1 !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#fff27b,#f2c52d 55%,#b87900) !important;
  transition:width 1s cubic-bezier(.15,.65,.25,1) !important;
}

#screen-battle #playerHpBar{
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:100%;
  height:auto !important;
  z-index:2 !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#57b8ff,#2587d7 58%,#1762a7) !important;
  transition:width .14s ease-out !important;
}

#screen-battle #playerHpText{
  display:flex !important;
  position:absolute !important;
  inset:0 !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:3 !important;
  width:100% !important;
  height:100% !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-align:center !important;
  pointer-events:none !important;
  text-shadow:0 1px 3px #000,0 0 2px #000 !important;
}

/* PLAYER label almost touches the HP bar */
#screen-battle #playerActor > .actor-name{
  bottom:calc(var(--player-image-height) + 26px) !important;
  line-height:16px !important;
}


/* =========================================================
   V15.18 ATTACK SLOT POSITION FIX
   Keep ATTACK SLOT directly under battle grid regardless of HP spacing.
   ========================================================= */

/* Battle arena should not create giant trailing vertical space. */
#screen-battle .arena{
  margin-bottom:0 !important;
}

/* Attack slot is visually tied to the bottom edge of the battle grid. */
#screen-battle #attackSlotPanel,
#screen-battle .battle-attack-slot-fixed{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;

  width:360px !important;
  max-width:360px !important;

  margin:10px auto 8px !important;
  padding:0 !important;

  transform:none !important;
  z-index:20 !important;
}

/* Reduce any old battle-layout gap that was pushing the slot downward. */
#screen-battle .battle-bottom,
#screen-battle .battle-controls,
#screen-battle .battle-actions-wrap{
  margin-top:8px !important;
  padding-top:0 !important;
}

/* Attack reels stay compact and immediately below the arena. */
#screen-battle #attackSlotPanel .attack-reels{
  margin:0 !important;
}

#screen-battle #attackSlotPanel + .battle-actions,
#screen-battle .battle-actions-single{
  margin-top:8px !important;
}

/* No inherited tall min-height around the attack slot. */
#screen-battle #attackSlotPanel,
#screen-battle #attackSlotPanel *{
  min-height:0;
}

#screen-battle #attackSlotPanel .attack-reel.slot-reel-viewport{
  height:58px !important;
  min-height:58px !important;
}

#screen-battle #attackSlotPanel .attack-reel .slot-reel-symbol{
  height:58px !important;
  min-height:58px !important;
}


/* =========================================================
   V15.19 BATTLE DOM STRUCTURE FIX
   ATTACK SLOT now truly belongs to .battle-bottom.
   ========================================================= */

#screen-battle .battle-bottom{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  width:100% !important;
  margin:8px 0 0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

#screen-battle #attackSlotPanel{
  position:relative !important;
  width:360px !important;
  max-width:360px !important;
  margin:0 auto !important;
  padding:0 !important;
}

#screen-battle .battle-actions-single{
  width:100% !important;
  margin:0 !important;
}

#screen-battle .battle-log-button-row{
  width:100% !important;
  margin:0 !important;
}

/* Keep arena and slot as two consecutive siblings, no phantom gap. */
#screen-battle .arena{
  margin:0 !important;
}


/* =========================================================
   V15.20 BATTLE SLOT UI
   Reels stay untouched. Controls/buffs live below them.
   ========================================================= */

#screen-battle .battle-bottom{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  width:100% !important;
  margin:8px 0 0 !important;
  padding:0 !important;
}

/* Slot machine footprint stays isolated */
#screen-battle #attackSlotPanel{
  width:360px !important;
  max-width:360px !important;
  margin:0 auto !important;
  padding:0 !important;
  position:relative !important;
}

/* Attack button directly under reels */
#screen-battle .battle-actions-single{
  width:360px !important;
  margin:0 auto !important;
}

#screen-battle .battle-actions-single #btnAttack{
  width:100% !important;
}

/* Utility buttons form their own row, never inside slot machine */
#screen-battle .battle-utility-row{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:8px !important;

  width:360px !important;
  margin:0 auto !important;

  position:relative !important;
  z-index:20 !important;
}

#screen-battle .battle-utility-row .battle-log-button{
  width:100% !important;
  min-width:0 !important;
  padding:7px 8px !important;
  font-size:11px !important;
}

/* Buff text is a totally separate row below buttons */
#screen-battle .active-buff-text{
  width:360px !important;
  min-height:18px !important;

  margin:0 auto !important;
  padding:3px 6px !important;
  box-sizing:border-box !important;

  text-align:center !important;
  font-size:11px !important;
  line-height:1.4 !important;
  color:#f0d889 !important;

  white-space:normal !important;
  word-break:keep-all !important;

  background:rgba(15,18,24,.65);
  border-radius:7px;
  border:1px solid rgba(255,255,255,.06);
}

/* Empty buff row stays compact */
#screen-battle .active-buff-text:empty{
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}


/* =========================================================
   V15.21 SPLIT BATTLE PANEL
   left: slot + attack / right: effects + utility buttons
   ========================================================= */

#screen-battle .battle-bottom-split{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:12px !important;
  align-items:stretch !important;
  width:100% !important;
  margin:10px 0 0 !important;
  padding:0 !important;
}

/* Two independent halves: content on one side cannot resize the other. */
#screen-battle .battle-slot-half,
#screen-battle .battle-status-half{
  min-width:0 !important;
  box-sizing:border-box !important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(11,15,21,.68);
}

/* LEFT: intentionally shorter than the right panel. */
#screen-battle .battle-slot-half{
  align-self:start !important;
  min-height:0 !important;
  padding:10px !important;
}

#screen-battle #attackSlotPanel{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  position:relative !important;
}

/* Reels are taller than before, while staying three columns. */
#screen-battle #attackSlotPanel .attack-reels{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  width:100% !important;
  margin:6px 0 0 !important;
}

#screen-battle #attackSlotPanel .attack-reel.slot-reel-viewport{
  width:100% !important;
  height:92px !important;
  min-height:92px !important;
  max-height:92px !important;
}

#screen-battle #attackSlotPanel .attack-reel .slot-reel-symbol{
  width:100% !important;
  height:92px !important;
  min-height:92px !important;
  max-height:92px !important;
  font-size:36px !important;
}

/* Attack button is below the reels, not beside them. */
#screen-battle #btnAttack.battle-attack-button{
  display:block !important;
  width:100% !important;
  height:38px !important;
  margin:8px 0 0 !important;
}

/* RIGHT: taller status panel. */
#screen-battle .battle-status-half{
  min-height:190px !important;
  padding:10px !important;
  display:flex !important;
  flex-direction:column !important;
}

#screen-battle .battle-status-title{
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  opacity:.82;
  margin-bottom:7px;
}

#screen-battle .battle-status-half .active-buff-text{
  flex:1 1 auto !important;
  width:100% !important;
  min-height:105px !important;
  margin:0 !important;
  padding:8px !important;
  box-sizing:border-box !important;
  text-align:left !important;
  white-space:pre-line !important;
  border:1px solid rgba(255,255,255,.06) !important;
  background:rgba(0,0,0,.16) !important;
}

/* Right-side button order: Slot Help -> Boss Trait -> Log */
#screen-battle .battle-status-half .battle-utility-row{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:7px !important;
  width:100% !important;
  margin:8px 0 0 !important;
}

#screen-battle .battle-status-half .battle-log-button{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:7px 5px !important;
  font-size:10px !important;
}

/* ORDER bottom aligns with player/boss visual baseline. */
#screen-battle .vertical-turn-order-panel{
  top:auto !important;
  bottom:36px !important;
  transform:none !important;
}

/* Boss HP slightly upward from the previous 42px position. */
#screen-battle .battle-top-hud{
  top:34px !important;
}


/* =========================================================
   V15.22 SLOT RESULT DESCRIPTION + PANEL BASELINE ALIGN
   ========================================================= */

/* Both left/right cards end on exactly the same baseline. */
#screen-battle .battle-bottom-split{
  align-items:stretch !important;
}

#screen-battle .battle-slot-half,
#screen-battle .battle-status-half{
  height:210px !important;
  min-height:210px !important;
  max-height:210px !important;
  align-self:stretch !important;
}

/* Left card uses its fixed height without changing reel geometry. */
#screen-battle .battle-slot-half{
  display:flex !important;
  flex-direction:column !important;
}

#screen-battle #attackSlotPanel{
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
}

#screen-battle #btnAttack.battle-attack-button{
  margin-top:8px !important;
}

/* Right description area */
#screen-battle .battle-status-half .active-buff-text{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
  padding:9px 10px !important;
}

#screen-battle .slot-result-line{
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  gap:7px;
  min-height:25px;
  padding:3px 0;
  font-size:11px;
  line-height:1.35;
}

#screen-battle .slot-result-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
}

#screen-battle .slot-result-desc{
  color:#f3ead0;
}

#screen-battle .slot-result-empty{
  display:block;
  opacity:.55;
  padding-top:4px;
}

#screen-battle .slot-effect-divider{
  height:1px;
  margin:6px 0;
  background:rgba(255,255,255,.08);
}

#screen-battle .active-effect-line{
  font-size:10px;
  line-height:1.5;
  color:#f0d889;
}


/* =========================================================
   V15.23 RIGHT PANEL = MOST RECENT BATTLE LOG
   ========================================================= */

/* slot-help lines read naturally as "이름: 설명" */
#battleSlotHelpOverlay .action-help-list > div{
  display:flex !important;
  align-items:flex-start !important;
  gap:6px !important;
}

#battleSlotHelpOverlay .action-help-list b{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

#battleSlotHelpOverlay .action-help-list span{
  flex:1 1 auto !important;
}

/* Right battle panel now displays the latest log prominently */
#screen-battle .battle-status-half .active-buff-text{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:8px !important;
}

#screen-battle .last-log-line{
  width:100% !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.5 !important;
  color:#f2f4f8 !important;
  word-break:keep-all !important;
}

#screen-battle .last-log-empty{
  opacity:.5 !important;
  font-size:11px !important;
}

#screen-battle .active-effect-block{
  width:100% !important;
  margin-top:auto !important;
  padding-top:7px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  font-size:10px !important;
  line-height:1.5 !important;
  color:#f0d889 !important;
}


/* =========================================================
   V15.24 3-COLUMN BATTLE SLOT LAYOUT
   ========================================================= */

#screen-battle .battle-bottom-triple{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  width:100% !important;
  margin:10px 0 0 !important;
  padding:0 !important;
  align-items:stretch !important;
}

#screen-battle .battle-slot-column,
#screen-battle .battle-turn-column{
  min-width:0 !important;
  height:220px !important;
  padding:10px !important;
  box-sizing:border-box !important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(11,15,21,.68);
}

#screen-battle .battle-column-title{
  text-align:center;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  opacity:.82;
  margin-bottom:8px;
}

/* Player and Boss slot geometry is intentionally identical. */
#screen-battle .mirrored-slot-panel{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

#screen-battle .mirrored-reels{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:7px !important;
  width:100% !important;
}

#screen-battle .mirrored-reels .slot-reel-viewport{
  width:100% !important;
  height:96px !important;
  min-height:96px !important;
  max-height:96px !important;
}

#screen-battle .mirrored-reels .slot-reel-symbol{
  width:100% !important;
  height:96px !important;
  min-height:96px !important;
  max-height:96px !important;
  font-size:36px !important;
}

#screen-battle .mirrored-slot-button{
  width:100% !important;
  height:40px !important;
  margin:9px 0 0 !important;
}

#screen-battle .boss-auto-button{
  opacity:.55 !important;
  cursor:default !important;
}

#screen-battle .boss-auto-button.auto-running{
  opacity:.85 !important;
  filter:brightness(1.25);
}

/* Center turn text */
#screen-battle .battle-turn-column{
  display:flex !important;
  flex-direction:column !important;
}

#screen-battle .turn-text-panel{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
  padding:8px !important;
  box-sizing:border-box !important;
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  background:rgba(0,0,0,.16);
}

#screen-battle .turn-text-line{
  font-size:10.5px;
  line-height:1.45;
  padding:2px 0;
  word-break:keep-all;
}

#screen-battle .player-turn-text{
  color:#dfeeff;
}

#screen-battle .boss-turn-text{
  color:#ffd9d4;
}

#screen-battle .battle-turn-column .battle-utility-row{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:6px !important;
  width:100% !important;
  margin-top:8px !important;
}

#screen-battle .battle-turn-column .battle-log-button{
  width:100% !important;
  min-width:0 !important;
  padding:6px 4px !important;
  font-size:10px !important;
}

/* ORDER baseline matches actor baseline */
#screen-battle .vertical-turn-order-panel{
  top:auto !important;
  bottom:36px !important;
  transform:none !important;
}

/* Boss HP slightly higher than previous */
#screen-battle .battle-top-hud{
  top:30px !important;
}


/* =========================================================
   V15.25 MAIN/BATTLE/BOSS POLISH
   ========================================================= */

.main-prep-topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.battle-ready-title{
  font-weight:900;
  letter-spacing:.12em;
}

.run-kills-right{
  margin-left:auto;
  text-align:right;
}

/* Main player slot: reels and SPIN use the same full usable width. */
#screen-main .slot-panel .reels{
  width:100% !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

#screen-main .slot-panel .reel{
  width:100% !important;
  min-width:0 !important;
}

#screen-main #btnSpin{
  display:block !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Removed charge UI / tooltip / trait presentation. */
#chargeBarWrap,
.charge-help,
.trait-box{
  display:none !important;
}

.forge-result-empty:empty{
  display:none !important;
}

/* Positive/negative boss status deltas */
.stat-delta.positive,
.stat-delta:not(.negative){
  color:#57e381 !important;
  font-weight:900 !important;
}

.stat-delta.negative{
  color:#ff5c5c !important;
  font-weight:900 !important;
}

/* Random map image occupies exactly the battle grid. */
#screen-battle .arena-map{
  inset:0 !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* Keep dark readability overlay above the background but below actors. */
#screen-battle .arena-map::after{
  content:"";
  position:absolute;
  inset:0 !important;
  height:auto !important;
  background:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.30)) !important;
}


/* =========================================================
   V15.26 PREP BUFFS + TURN FORMULA
   ========================================================= */
.prep-buffs-box{
  margin-top:10px !important;
}

.prep-buff-list{
  font-size:11px;
  line-height:1.55;
  color:#d9f6df;
  word-break:keep-all;
}

#screen-battle .formula-turn-text{
  color:#9ba5b2 !important;
  font-size:9.5px !important;
  padding-left:7px !important;
  margin-bottom:4px;
}


/* =========================================================
   V15.27 SLOT MULTIPLIERS + PREP BUFF ORGANIZATION
   ========================================================= */

.slot-multiplier{
  text-align:center;
  margin-top:4px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  color:#f2d27b;
  line-height:1;
}

/* Keep multiplier labels as their own grid row under each reel. */
#screen-main .slot-panel .reels,
.boss-room-slot-under-stats .boss-room-slot-reels,
#screen-battle .mirrored-reels{
  align-items:start !important;
}

.prep-buff-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:6px;
}

.prep-buff-group{
  min-width:0;
  padding:8px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:rgba(0,0,0,.15);
  font-size:10px;
  line-height:1.55;
}

.prep-buff-group > b{
  display:block;
  margin-bottom:4px;
  font-size:10px;
  letter-spacing:.08em;
  color:#f3df9c;
}

.prep-buff-empty{
  grid-column:1/-1;
  opacity:.55;
  text-align:center;
  padding:8px;
}


/* =========================================================
   V15.28 SLOT ROW NORMALIZATION
   symbols row / multiplier row / button row
   ========================================================= */

/* These containers contain symbol reels ONLY. */
#screen-main .slot-panel .slot-symbol-row,
#screen-boss-slot .boss-room-slot-reels.slot-symbol-row,
#screen-battle .slot-symbol-row{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-auto-flow:row !important;
  gap:8px !important;
  width:100% !important;
  align-items:stretch !important;
}

/* Multiplier row is a separate three-column line. */
.slot-multiplier-row{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  width:100% !important;
  margin:6px 0 0 !important;
  align-items:stretch !important;
}

/* A tiny mechanical reel, not a static label. */
.multiplier-reel-viewport{
  position:relative;
  height:28px;
  min-height:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:7px;
  background:rgba(4,7,12,.9);
  box-sizing:border-box;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.multiplier-reel-strip{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  will-change:transform;
}

.multiplier-reel-cell{
  height:28px;
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  font-size:11px;
  font-weight:950;
  letter-spacing:.04em;
  color:#f2d27b;
  background:rgba(12,15,20,.96);
}

/* 200% */
.multiplier-reel-cell.mult-blue{
  color:#d9eeff;
  background:
    linear-gradient(180deg,rgba(31,121,219,.82),rgba(20,64,126,.9));
}

/* 250-300% */
.multiplier-reel-cell.mult-purple{
  color:#f3e4ff;
  background:
    linear-gradient(180deg,rgba(135,61,205,.88),rgba(67,28,111,.94));
}

/* 350%+ */
.multiplier-reel-cell.mult-gold{
  color:#fff4bd;
  background:
    linear-gradient(180deg,rgba(205,151,27,.96),rgba(112,71,5,.96));
  text-shadow:0 1px 2px rgba(0,0,0,.75);
}

.multiplier-reel-viewport.mult-blue-frame{
  border-color:rgba(77,165,255,.85);
  box-shadow:0 0 9px rgba(44,135,255,.26);
}

.multiplier-reel-viewport.mult-purple-frame{
  border-color:rgba(179,101,255,.9);
  box-shadow:0 0 10px rgba(150,61,235,.34);
}

.multiplier-reel-viewport.mult-gold-frame{
  border-color:rgba(255,207,64,.95);
  box-shadow:
    0 0 11px rgba(255,188,41,.42),
    inset 0 0 7px rgba(255,222,101,.12);
}

.multiplier-reel-viewport.multiplier-running{
  filter:brightness(.92);
}

.multiplier-reel-viewport.multiplier-stopped{
  transform:translateY(1px);
}

/* Keep buttons below both rows. */
#screen-main #btnSpin,
#screen-boss-slot #btnBossSpin,
#screen-battle #btnAttack,
#screen-battle #btnBossAuto{
  margin-top:9px !important;
}

/* Boss status machine must never use staggered masonry-ish placement. */
#screen-boss-slot .boss-room-slot-machine{
  display:block !important;
}

#screen-boss-slot .boss-room-slot-reels{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

/* Battle player and boss use exactly the same reel/multiplier geometry. */
#screen-battle .player-slot-column .mirrored-slot-panel,
#screen-battle .boss-slot-column .mirrored-slot-panel{
  width:100% !important;
}

#screen-battle .battle-multiplier-row{
  width:100% !important;
}


/* =========================================================
   V15.30 MULTIPLIER REEL SINGLE-CELL FIX
   ========================================================= */

/* One clean multiplier row. No second value can peek through. */
.slot-multiplier-row{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:30px !important;
  gap:8px !important;
  width:100% !important;
  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;
  overflow:visible !important;
  margin:7px 0 0 !important;
}

.multiplier-reel-viewport{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  border-radius:7px !important;
}

.multiplier-reel-strip{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

.multiplier-reel-cell{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;

  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-sizing:border-box !important;

  line-height:30px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}

/* Boss status slot specifically: symbol row -> multiplier row -> button. */
#screen-boss-slot .boss-room-slot-machine{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
}

#screen-boss-slot .boss-room-slot-reels.slot-symbol-row{
  order:1 !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  width:100% !important;
}

#screen-boss-slot .boss-status-multiplier-row{
  order:2 !important;
  width:100% !important;
}

#screen-boss-slot #btnBossSpin{
  order:3 !important;
  width:100% !important;
  margin-top:10px !important;
}

#screen-boss-slot #bossSpinResult{
  order:4 !important;
}


/* =========================================================
   V15.31 BATTLE BOSS SIZE
   Boss visual only: 2x. Layout box stays unchanged.
   ========================================================= */
#screen-battle .battle-boss-image,
#screen-battle #battleBossImage,
#screen-battle .boss-image{
  transform:scale(2) !important;
  transform-origin:center bottom !important;
  z-index:4 !important;
}


/* =========================================================
   V15.32 REAL BATTLE BOSS 2X
   Increase the actual visual box, not only CSS scale.
   ========================================================= */

/* Let the oversized boss render outside its original actor box. */
#screen-battle #bossActor{
  overflow:visible !important;
  z-index:5 !important;
}

/* Remove the previous ineffective scale override. */
#screen-battle #battleBossImage{
  transform:none !important;
}

/* Double the actual battle boss image box. */
#screen-battle #bossActor #battleBossImage{
  width:300px !important;
  height:400px !important;
  min-width:300px !important;
  min-height:400px !important;
  max-width:none !important;
  max-height:none !important;

  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;

  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center bottom !important;

  overflow:visible !important;
}

/* If an <img> is injected into the placeholder, enlarge that too. */
#screen-battle #bossActor #battleBossImage > img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}

/* Arena must not clip the enlarged boss. */
#screen-battle #arena,
#screen-battle .arena{
  overflow:visible !important;
}


/* =========================================================
   V15.33 MULTIPLIER DOWNWARD TICKER
   ========================================================= */

.multiplier-reel-viewport{
  contain:layout paint !important;
}

.multiplier-reel-strip{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;
  display:block !important;
  overflow:hidden !important;
}

.multiplier-reel-cell{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:30px !important;
  transform:none;
}

@keyframes multiplierDrop{
  0%{
    transform:translate3d(0,-100%,0);
    opacity:.25;
  }
  30%{
    opacity:1;
  }
  100%{
    transform:translate3d(0,0,0);
    opacity:1;
  }
}

/* Explicitly forbid horizontal animation/scale artifacts in boss prep room. */
#screen-boss-slot .multiplier-reel-strip,
#screen-boss-slot .multiplier-reel-cell{
  writing-mode:horizontal-tb !important;
  scale:none !important;
  rotate:none !important;
}


/* V15.37 victory 3-choice + permanent buff rows */
.permanent-buff-list{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:3px;
}
.permanent-buff-row{
  padding:6px 8px;
  border:1px solid rgba(255,213,79,.20);
  border-radius:7px;
  background:rgba(91,63,5,.18);
  color:#ffe39b;
  font-size:10px;
}
.victory-buff-choices{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:18px 0;
}
.victory-buff-choices.hidden,
#btnResultContinue.hidden{
  display:none !important;
}
.victory-buff-choice{
  min-height:132px;
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(13,17,24,.94);
  color:#f5f6f8;
  cursor:pointer;
}
.victory-buff-choice:hover{
  transform:translateY(-2px);
  border-color:rgba(255,215,85,.55);
  box-shadow:0 0 16px rgba(255,196,50,.12);
}
.victory-buff-icon{font-size:30px;}
.victory-buff-choice b{font-size:13px;}
.victory-buff-choice small{opacity:.55;font-size:10px;}


/* =========================================================
   V15.46 PLAYER ELEMENT ATTACK FX
   ========================================================= */

#screen-battle{
  position:relative !important;
}

#battleElementFxCanvas{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
  z-index:8 !important;
}

#screen-battle #playerActor,
#screen-battle #bossActor{
  z-index:6 !important;
}


/* =========================================================
   V15.47 PLAYER FX LAYERING
   Trail/projectile behind PLAYER, explosion can remain visible.
   ========================================================= */

#screen-battle{
  position:relative !important;
}

/* Element FX canvas goes behind both actors. */
#battleElementFxCanvas{
  z-index:4 !important;
}

/* Actors render above the traveling trail/projectile. */
#screen-battle #playerActor,
#screen-battle #bossActor{
  z-index:6 !important;
}

/* Damage popups / UI should remain above everything. */
#screen-battle .damage-popup,
#screen-battle .player-damage-popup,
#screen-battle .boss-damage-popup{
  z-index:12 !important;
}


#battleElementExplosionCanvas{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
  z-index:7 !important;
}


/* V15.47 HOTFIX
   Keep original actor positioning. FX layering must not overwrite it. */
#screen-battle #playerActor,
#screen-battle #bossActor{
  z-index:6 !important;
}


/* =========================================================
   V15.56 ATTACK LUNGE
   Make melee attacks close distance instead of tiny shuffles.
   ========================================================= */

@keyframes playerAttackLungeV56{
  0%{
    transform:translateX(0) scale(1);
  }
  18%{
    transform:translateX(18px) scale(1.01);
  }
  52%{
    transform:translateX(190px) scale(1.035);
  }
  68%{
    transform:translateX(190px) scale(1.035);
  }
  100%{
    transform:translateX(0) scale(1);
  }
}

@keyframes bossAttackLungeV56{
  0%{
    transform:translateX(0) scale(1);
  }
  18%{
    transform:translateX(-18px) scale(1.01);
  }
  52%{
    transform:translateX(-190px) scale(1.035);
  }
  68%{
    transform:translateX(-190px) scale(1.035);
  }
  100%{
    transform:translateX(0) scale(1);
  }
}

#screen-battle #playerActor.attack-move{
  animation:playerAttackLungeV56 .62s cubic-bezier(.2,.75,.22,1) !important;
}

#screen-battle #bossActor.attack-move{
  animation:bossAttackLungeV56 1.08s cubic-bezier(.2,.75,.22,1) !important;
}


/* =========================================================
   V15.58 DYNAMIC CLOSE LUNGE
   Move based on actual actor distance instead of fixed px.
   ========================================================= */

@keyframes playerAttackLungeV58{
  0%{ transform:translateX(0) scale(1); }
  18%{ transform:translateX(calc(var(--attack-lunge-x) * .18)) scale(1.01); }
  52%{ transform:translateX(var(--attack-lunge-x)) scale(1.035); }
  68%{ transform:translateX(var(--attack-lunge-x)) scale(1.035); }
  100%{ transform:translateX(0) scale(1); }
}

@keyframes bossAttackLungeV58{
  0%{ transform:translateX(0) scale(1); }
  18%{ transform:translateX(calc(var(--attack-lunge-x) * .18)) scale(1.01); }
  52%{ transform:translateX(var(--attack-lunge-x)) scale(1.035); }
  68%{ transform:translateX(var(--attack-lunge-x)) scale(1.035); }
  100%{ transform:translateX(0) scale(1); }
}

#screen-battle #playerActor.attack-move{
  animation:playerAttackLungeV58 .62s cubic-bezier(.2,.75,.22,1) !important;
}

#screen-battle #bossActor.attack-move{
  animation:bossAttackLungeV58 1.08s cubic-bezier(.2,.75,.22,1) !important;
}


/* =========================================================
   V15.59 +20 SWORD 5.PNG ULTIMATE FX
   player center -> through boss -> battle grid right edge
   ========================================================= */

#battleUltimateSwordFx{
  position:absolute !important;
  display:none;
  pointer-events:none !important;
  object-fit:fill !important;
  transform-origin:left center !important;
  opacity:0;
  z-index:5 !important; /* traveling image behind actors */
  mix-blend-mode:screen;
  will-change:opacity;
  user-select:none;
}

#battleUltimateSwordFx.ultimate-visible{
  display:block;
}


/* =========================================================
   V15.70 TITLE / GAME GUIDE / DAMAGE POPUP POLISH
   ========================================================= */

#screen-title .gold-game-title{
  color:#ffe28a !important;
  font-weight:1000 !important;
  letter-spacing:.12em !important;
  text-shadow:
    0 1px 0 #7d5410,
    0 0 7px rgba(255,224,120,.95),
    0 0 18px rgba(255,177,38,.72),
    0 0 36px rgba(255,132,0,.38) !important;
  animation:goldTitleGlow 1.9s ease-in-out infinite alternate;
}
@keyframes goldTitleGlow{
  from{
    filter:brightness(.96);
    text-shadow:
      0 1px 0 #7d5410,
      0 0 6px rgba(255,224,120,.72),
      0 0 14px rgba(255,177,38,.55);
  }
  to{
    filter:brightness(1.15);
    text-shadow:
      0 1px 0 #7d5410,
      0 0 10px rgba(255,240,175,1),
      0 0 24px rgba(255,184,44,.9),
      0 0 44px rgba(255,128,0,.5);
  }
}

#screen-title .meta-box .title-help-toggle{
  appearance:none;
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  padding:0;
  text-align:center;
}
#screen-title .meta-box .title-help-toggle:hover{
  color:#ffe28a;
  text-shadow:0 0 9px rgba(255,196,67,.7);
}

.game-description-modal{
  width:min(820px,92vw) !important;
  max-height:86vh;
  overflow:auto;
}
.game-guide-section>p,
.battle-slot-intro,
.battle-slot-tip{
  color:#c6cfdf;
  line-height:1.7;
}
.game-guide-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:16px 0;
}
.game-guide-grid>div{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:13px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:rgba(255,255,255,.035);
}
.game-guide-grid b{color:#ffe4a0}
.game-guide-grid span{color:#b9c4d7;line-height:1.55;font-size:13px}
.game-guide-tip,.battle-slot-tip{
  padding:12px 14px;
  border-left:3px solid #d4a647;
  background:rgba(212,166,71,.07);
}
.battle-slot-description-modal{
  width:min(850px,92vw) !important;
  max-height:86vh;
  overflow:auto;
}
.battle-symbol-help-grid{
  margin-top:14px;
}

/* Boss grew larger, so damage must float above/in front instead of from its chest. */
#screen-battle #bossActor{
  overflow:visible !important;
}
#screen-battle .boss-damage-popup{
  z-index:9999 !important;
  left:40% !important;
  top:-42px !important;
}
#screen-battle .boss-damage-popup.critical{
  z-index:10000 !important;
}
@keyframes bossDamagePopupV2{
  0%{
    opacity:0;
    transform:translate(-50%,4px) scale(.45);
  }
  18%{
    opacity:1;
    transform:translate(-50%,-14px) scale(1.28);
  }
  52%{
    opacity:1;
    transform:translate(-50%,-34px) scale(1);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-78px) scale(.88);
  }
}
@media(max-width:700px){
  .game-guide-grid{grid-template-columns:1fr}
}


/* =========================================================
   V15.71 title/meta/help polish
   ========================================================= */

/* Never let the decorated game title split into two lines. */
#screen-title .gold-game-title{
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  width:max-content !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  font-size:clamp(28px,5.2vw,52px) !important;
}

/* GAME 설명 should occupy the same visual card/slot as the other meta items. */
#screen-title .meta-box .title-help-toggle{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:100% !important;
  padding:10px 14px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:8px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 4px 12px rgba(0,0,0,.22) !important;
}

/* Battle-slot help: one horizontal row per symbol, scroll inside the modal. */
#battleSlotHelpOverlay .battle-slot-description-modal{
  width:min(780px,92vw) !important;
  height:min(78vh,720px) !important;
  max-height:min(78vh,720px) !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}

#battleSlotHelpOverlay .battle-slot-description-modal > .boss-description-section{
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

#battleSlotHelpOverlay .battle-symbol-help-grid{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  gap:7px !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:8px !important;
  margin:12px 0 10px !important;
}

#battleSlotHelpOverlay .battle-symbol-help-grid > div{
  flex:0 0 auto !important;
  display:grid !important;
  grid-template-columns:150px minmax(0,1fr) !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  min-height:42px !important;
  padding:9px 12px !important;
}

#battleSlotHelpOverlay .battle-symbol-help-grid > div b,
#battleSlotHelpOverlay .battle-symbol-help-grid > div span{
  display:block !important;
  margin:0 !important;
}

#battleSlotHelpOverlay .battle-symbol-help-grid > div span{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#battleSlotHelpOverlay .battle-slot-intro,
#battleSlotHelpOverlay .battle-slot-tip{
  flex:0 0 auto !important;
  margin-top:8px !important;
  margin-bottom:8px !important;
}

@media(max-width:620px){
  #screen-title .gold-game-title{
    font-size:clamp(24px,8vw,38px) !important;
  }
  #battleSlotHelpOverlay .battle-symbol-help-grid > div{
    grid-template-columns:125px minmax(0,1fr) !important;
    font-size:12px !important;
  }
}


/* =========================================================
   V15.72 CUSTOM TITLE BACKGROUND
   assets/images/title_background/0.png
   ========================================================= */

#screen-title.has-custom-title-background{
  position:relative;
  isolation:isolate;
  background-image:
    linear-gradient(180deg,rgba(3,5,10,.30),rgba(3,5,10,.52)),
    var(--title-background-image) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

#screen-title.has-custom-title-background::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%,rgba(0,0,0,.04) 0%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.52) 100%);
}

#screen-title.has-custom-title-background > *{
  position:relative;
  z-index:1;
}


/* =========================================================
   V15.73 OUTER PAGE BACKGROUND
   Decorative only. Does not modify any game screen/grid.
   ========================================================= */

html,
body{
  min-height:100%;
}

body{
  background:
    linear-gradient(rgba(4,6,10,.38), rgba(4,6,10,.38)),
    url("../assets/images/page_background/0.jpeg")
    center center / cover fixed no-repeat !important;
}

/* Keep the existing game surface visually independent from the page skin. */
#app{
  position:relative;
  z-index:1;
}

/* On very wide displays, darken the extreme edges slightly for less visual noise. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.05) 18%,
      rgba(0,0,0,.05) 82%,
      rgba(0,0,0,.34) 100%
    );
}


/* =========================================================
   V15.75 BOSS -> PLAYER HIT FX
   one PNG, boss-specific tint from bosses.js
   ========================================================= */

#screen-battle .boss-player-hit-fx{
  position:absolute !important;
  z-index:8500 !important;
  height:auto !important;
  pointer-events:none !important;
  user-select:none !important;
  transform-origin:24% 76% !important;
  opacity:0;
  mix-blend-mode:screen;
  will-change:transform,opacity,filter;
}

/* Damage number remains above the attack artwork. */
#screen-battle .player-damage-popup{
  z-index:10000 !important;
}

#screen-battle .boss-player-hit-fx.play{
  animation:bossPlayerHitFxV75 .52s cubic-bezier(.12,.72,.18,1) forwards;
}

@keyframes bossPlayerHitFxV75{
  0%{
    opacity:0;
    transform:
      translate(-24%,-76%)
      scale(calc(var(--boss-hit-scale) * .72))
      rotate(-3deg);
  }
  12%{
    opacity:1;
    transform:
      translate(-24%,-76%)
      scale(calc(var(--boss-hit-scale) * 1.08))
      rotate(0deg);
  }
  38%{
    opacity:.98;
    transform:
      translate(-24%,-76%)
      scale(var(--boss-hit-scale))
      rotate(1deg);
  }
  100%{
    opacity:0;
    transform:
      translate(-24%,-76%)
      scale(calc(var(--boss-hit-scale) * 1.13))
      rotate(2deg);
  }
}


/* =========================================================
   V15.79 balance / boss prep layout
   ========================================================= */

/* 강화 버튼을 실제 버튼답게 보이게. 회색 배경 속에서 회색 버튼은 은신술이었다. */
#screen-main #swordButton.sword-button{
  background:#f4f5f7 !important;
  color:#11151c !important;
  border:1px solid #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 5px 16px rgba(0,0,0,.32) !important;
  font-weight:900 !important;
}
#screen-main #swordButton.sword-button:hover{
  background:#ffffff !important;
  filter:brightness(1.04);
}

/* FIGHT sits directly below the boss image and exactly follows its column width. */
#screen-boss .boss-visual-column{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
}
#screen-boss .boss-fight-under-image{
  width:100% !important;
  min-width:0 !important;
  margin:10px 0 0 !important;
  min-height:58px !important;
}


/* =========================================================
   V15.80 COMBAT DEBUFF HUD + HEAVY DAMAGE SHAKE
   ========================================================= */

#screen-battle .combat-debuff-row{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:3px;
  pointer-events:auto;
  min-height:28px;
  z-index:120;
}

#screen-battle .boss-debuff-row{
  width:100%;
  justify-content:flex-start;
  align-items:flex-end;
  margin:0 0 3px 2px;
}

#screen-battle .player-debuff-row{
  width:100%;
  justify-content:center;
  align-items:flex-start;
  margin-top:4px;
}

#screen-battle .combat-debuff-row.empty{
  visibility:hidden;
}

#screen-battle .combat-debuff-badge{
  width:27px;
  height:31px;
  flex:0 0 27px;
  border-radius:7px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.22);
  box-shadow:
    0 2px 5px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.9);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
  color:#111;
  line-height:1;
}

#screen-battle .debuff-emoji{
  display:block;
  height:18px;
  line-height:18px;
  font-size:13px;
  margin-top:1px;
}

#screen-battle .debuff-damage-value{
  display:block;
  width:100%;
  height:10px;
  line-height:10px;
  padding:0 1px;
  text-align:center;
  font-size:8px;
  font-weight:1000;
  color:#b50000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
}

#screen-battle.heavy-damage-shake{
  animation:heavyDamageScreenShakeV80 .36s cubic-bezier(.2,.75,.3,1);
}

@keyframes heavyDamageScreenShakeV80{
  0%{transform:translate(0,0)}
  12%{transform:translate(-10px,4px)}
  25%{transform:translate(9px,-5px)}
  38%{transform:translate(-7px,3px)}
  52%{transform:translate(6px,-3px)}
  67%{transform:translate(-4px,2px)}
  82%{transform:translate(2px,-1px)}
  100%{transform:translate(0,0)}
}


/* =========================================================
   V15.81 HUD repair + slot tooltips
   ========================================================= */

/* Debuff HUD must not consume HP-bar layout space. */
#screen-battle .boss-main-hp{
  position:relative !important;
}
#screen-battle .boss-debuff-row{
  position:absolute !important;
  left:0 !important;
  top:-30px !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 !important;
  justify-content:flex-start !important;
  z-index:150 !important;
}

#screen-battle .player-actor-hp{
  position:relative !important;
}
#screen-battle .player-debuff-row{
  position:absolute !important;
  left:50% !important;
  top:100% !important;
  width:max-content !important;
  max-width:220px !important;
  transform:translateX(-50%) !important;
  margin-top:4px !important;
  justify-content:center !important;
  z-index:150 !important;
}

/* Icon-only debuffs: no white rounded-square background. */
#screen-battle .combat-debuff-badge{
  width:24px !important;
  height:28px !important;
  flex:0 0 24px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.9));
}

#screen-battle .debuff-emoji{
  font-size:15px !important;
  height:18px !important;
  line-height:18px !important;
}

#screen-battle .debuff-damage-value{
  margin-top:1px !important;
  height:9px !important;
  line-height:9px !important;
  font-size:8px !important;
  color:#fff !important;
  text-shadow:
    0 1px 2px #000,
    0 0 3px #000 !important;
}

/* Native title tooltips should feel intentional. */
.slot-reel-symbol,
.multiplier-reel-cell{
  cursor:help;
}


/* =========================================================
   V15.83 result newline / progressive shake / boss status HUD
   ========================================================= */

/* setText()의 \n을 실제 줄바꿈으로 보이게 한다. */
#screen-result #resultText{
  white-space:pre-line !important;
  line-height:1.65 !important;
}

/* 보스 상태이상도 PLAYER처럼 체력바 바로 아래 중앙 정렬. */
#screen-battle .boss-main-hp{
  position:relative !important;
}

#screen-battle .boss-debuff-row{
  position:absolute !important;
  left:50% !important;
  top:100% !important;
  width:max-content !important;
  max-width:100% !important;
  transform:translateX(-50%) !important;
  margin-top:4px !important;
  justify-content:center !important;
  align-items:flex-start !important;
  z-index:150 !important;
}

/* 피해율에 따라 JS가 흔들림 진폭/시간을 바꾼다. */
#screen-battle.heavy-damage-shake{
  animation:
    heavyDamageScreenShakeV83
    var(--heavy-shake-duration, 340ms)
    cubic-bezier(.2,.75,.3,1);
}

@keyframes heavyDamageScreenShakeV83{
  0%{
    transform:translate(0,0);
  }
  10%{
    transform:translate(
      calc(var(--heavy-shake-x, 9px) * -1),
      var(--heavy-shake-y, 4px)
    );
  }
  22%{
    transform:translate(
      var(--heavy-shake-x, 9px),
      calc(var(--heavy-shake-y, 4px) * -1)
    );
  }
  35%{
    transform:translate(
      calc(var(--heavy-shake-x, 9px) * -.78),
      calc(var(--heavy-shake-y, 4px) * .72)
    );
  }
  49%{
    transform:translate(
      calc(var(--heavy-shake-x, 9px) * .68),
      calc(var(--heavy-shake-y, 4px) * -.65)
    );
  }
  63%{
    transform:translate(
      calc(var(--heavy-shake-x, 9px) * -.48),
      calc(var(--heavy-shake-y, 4px) * .48)
    );
  }
  78%{
    transform:translate(
      calc(var(--heavy-shake-x, 9px) * .28),
      calc(var(--heavy-shake-y, 4px) * -.25)
    );
  }
  100%{
    transform:translate(0,0);
  }
}


/* =========================================================
   V15.85 SLOT AUDIO / BOSS DEBUFF POSITION
   ========================================================= */

/* Boss debuffs back above the boss HP bar, but right aligned. */
#screen-battle .boss-main-hp{
  position:relative !important;
}

#screen-battle .boss-debuff-row{
  position:absolute !important;
  left:auto !important;
  right:0 !important;
  top:-30px !important;
  width:max-content !important;
  max-width:100% !important;
  transform:none !important;
  margin:0 !important;
  justify-content:flex-end !important;
  align-items:flex-end !important;
  z-index:150 !important;
}


/* =========================================================
   V15.87 BOSS ROOM / FORGE LAYOUT
   ========================================================= */

/* Keep both boss-room columns the same height so their bottom edges can align. */
#screen-boss-slot .boss-content-row-rebuilt{
  align-items:stretch !important;
}

#screen-boss-slot .boss-visual-column{
  display:flex !important;
  flex-direction:column !important;
  align-self:stretch !important;
  min-height:0 !important;
}

/* Slightly reduce the boss artwork size from the oversized 535px version. */
#screen-boss-slot .boss-visual-column .boss-placeholder{
  height:440px !important;
  min-height:440px !important;
  max-height:440px !important;
}

/* Push FIGHT to the bottom of the left column so its lower edge
   lines up with the bottom of the boss status-slot panel. */
#screen-boss-slot .boss-fight-under-image{
  margin-top:auto !important;
  width:100% !important;
  min-height:58px !important;
}

#screen-boss-slot .boss-info-column{
  height:100% !important;
}

/* Forge result/message is now above the enhancement button. */
#screen-main #forgeResult{
  margin-top:12px !important;
  margin-bottom:10px !important;
}
#screen-main #swordButton{
  margin-top:0 !important;
}

@media(max-width:1000px){
  #screen-boss-slot .boss-visual-column .boss-placeholder{
    height:400px !important;
    min-height:400px !important;
    max-height:400px !important;
  }
}