/* ============================================================
   ILTA Web — battle arena (AAA juice layer)
   ============================================================ */

.arena {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 1.1fr);
  grid-template-areas:
    "enemy log"
    "player player";
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}
.a-enemy { grid-area: enemy; }
.a-log-wrap { grid-area: log; }
.a-player { grid-area: player; }

/* ---------------- cards ---------------- */
.a-card, .p-card {
  position: relative;
  border-radius: 14px;
  padding: 18px;
  background:
    radial-gradient(400px 200px at 20% -20%, rgba(52, 211, 153, .08), transparent),
    linear-gradient(180deg, rgba(17, 21, 30, .94), rgba(10, 12, 18, .96));
  border: 1px solid rgba(200, 170, 110, .28);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.a-card-glow {
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  box-shadow: 0 0 42px rgba(240, 230, 210, .16), inset 0 0 24px rgba(240, 230, 210, .06);
}
.a-card.turn .a-card-glow { opacity: 1; animation: turnPulse 2.2s ease-in-out infinite; }
@keyframes turnPulse {
  50% { box-shadow: 0 0 60px rgba(240, 230, 210, .26), inset 0 0 30px rgba(240, 230, 210, .09); }
}

.a-avatar {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  font-size: 44px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: radial-gradient(circle at 35% 25%, #23283a, #10131c 70%);
  border: 1px solid rgba(255, 255, 255, .09);
}
.a-name {
  font-family: "Beaufort", Georgia, serif;
  font-size: 1.3rem;
  letter-spacing: .04em;
  color: #f0e6d2;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}

/* ---------------- HP bars ---------------- */
.a-hpwrap { position: relative; margin-bottom: 8px; }
.a-hpbar {
  height: 16px;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(0, 0, 0, .55);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}
.a-hpbar span {
  display: block; height: 100%; width: 100%;
  border-radius: 8px;
  transition: width .55s cubic-bezier(.22, 1, .36, 1), background-color .4s ease;
  background: linear-gradient(180deg, #63e6a5, #149d68 60%, #0b7a50);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 14px rgba(52, 211, 153, .35);
}
#enemy-hp-fill { background: linear-gradient(180deg, #ff8f7d, #d33b2f 60%, #a02318) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 14px rgba(211, 59, 47, .4) !important; }
.a-hptext {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
  font-variant-numeric: tabular-nums;
}
.a-hp-low span { background: linear-gradient(180deg, #ffb37d, #e06a2c 60%, #a8431a) !important; }
.a-hp-crit span { animation: hpCrit 1s ease-in-out infinite; }
@keyframes hpCrit { 50% { filter: brightness(1.5); } }

/* ---------------- modifier chips ---------------- */
.a-mods { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; margin-top: 8px; }
.mod-chip {
  font-size: .72rem; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #e8ddc6;
}
.mod-shield { border-color: rgba(110, 231, 183, .5); color: #6ee7b7; }
.mod-defending { border-color: rgba(125, 180, 255, .5); color: #a8c6ff; }
.mod-atk-up { border-color: rgba(240, 230, 210, .5); color: #ffe9a8; }
.mod-atk-down, .mod-def-down, .mod-stun { border-color: rgba(255, 120, 100, .5); color: #ff9d8d; }

/* ---------------- reserve decks ---------------- */
.a-deck, .p-reserve { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.reserve-chip {
  font-size: .74rem; padding: 5px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px dashed rgba(255, 255, 255, .16);
  color: #9aa3ad;
}
.reserve-chip small { opacity: .75; }

/* ---------------- player squad ---------------- */
.a-squadrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.p-card { cursor: default; transition: transform .2s ease, border-color .25s ease, box-shadow .25s ease; }
.p-card.active {
  border-color: var(--t-gold);
  transform: translateY(-6px);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .55), 0 0 34px rgba(200, 170, 110, .22);
}
.p-card.dead { filter: grayscale(.95) brightness(.55); }
.p-card .a-avatar { width: 58px; height: 58px; font-size: 30px; margin-bottom: 6px;
  background: none; border: none; padding: 0; }
.p-name { font-family: "Beaufort", Georgia, serif; color: #f0e6d2; font-size: 1.02rem; margin-bottom: 8px; }
.p-stats { display: flex; gap: 12px; font-size: .78rem; color: #9aa3ad; margin-top: 8px; }
.p-cd { margin-left: auto; }
.cd-badge {
  font-style: normal;
  margin-left: 8px;
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px;
  background: #d33b2f;
  color: #fff; font-weight: 800; font-size: .72rem;
}

/* ---------------- action buttons ---------------- */
.a-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 16px;
}
.act {
  flex: 1 1 auto;
  padding: 11px 16px;
  font-weight: 700;
  font-size: .88rem;
  color: #f0e6d2;
  background: linear-gradient(180deg, rgba(38, 44, 62, .9), rgba(20, 24, 36, .95));
  border: 1px solid rgba(200, 170, 110, .32);
  border-radius: 9px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, border-color .2s;
}
.act:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--t-gold);
  box-shadow: 0 8px 26px rgba(200, 170, 110, .22);
}
.act:active:not(:disabled) { transform: translateY(0) scale(.98); }
.act-attack:hover:not(:disabled) { border-color: #ff9d8d; box-shadow: 0 8px 26px rgba(211, 59, 47, .3); }
.act-ability { border-style: dashed; }
.act-flee:hover:not(:disabled) { border-color: #ff6b6b; color: #ffcdc5; }
.act-busy { animation: busyPulse 1s linear infinite; }
@keyframes busyPulse { 50% { opacity: .55; } }

/* switch panel */
.a-switchpanel {
  margin-top: 12px; padding: 14px;
  border: 1px dashed rgba(200, 170, 110, .4);
  border-radius: 10px;
  background: rgba(10, 12, 18, .8);
  animation: pageIn .25s ease both;
}
.a-switch-title { font-size: .82rem; color: var(--t-gold); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
#switch-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
#switch-options button {
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.06); color: #f0e6d2;
  border: 1px solid rgba(255,255,255,.16);
}
#switch-options button:hover { border-color: var(--t-gold); }

/* ---------------- log ---------------- */
.a-log-wrap {
  display: flex; flex-direction: column;
  padding: 16px;
  border-radius: 14px;
  background: rgba(9, 11, 17, .85);
  border: 1px solid rgba(255, 255, 255, .07);
  min-height: 300px;
}
.a-round {
  font-family: "Beaufort", Georgia, serif;
  letter-spacing: .12em; text-transform: uppercase;
  font-size: .8rem; color: var(--t-gold);
  margin-bottom: 10px;
}
.a-log {
  flex: 1; overflow-y: auto; max-height: 380px;
  display: flex; flex-direction: column; gap: 6px;
  padding-right: 6px;
  scrollbar-width: thin;
}
.log-line {
  font-size: .86rem; line-height: 1.45;
  color: #b9c2cc;
  padding: 7px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  border-left: 2px solid rgba(255, 255, 255, .14);
  animation: logIn .3s ease both;
}
.log-line.player { border-left-color: var(--t-emerald); }
.log-line.enemy { border-left-color: #d33b2f; }
.log-line.sys { border-left-color: var(--t-gold); color: #d9cdb2; }
@keyframes logIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

/* ---------------- combat FX ---------------- */
.float-dmg, .float-heal {
  position: absolute;
  font-family: "Beaufort", Georgia, serif;
  font-size: 1.7rem; font-weight: 700;
  pointer-events: none; z-index: 30;
  animation: floatUp 1.05s cubic-bezier(.2, .7, .3, 1) forwards;
  text-shadow: 0 2px 0 #000, 0 0 18px currentColor;
}
.float-dmg { color: #ff6b57; }
.float-heal { color: #63e6a5; }
.float-crit { font-size: 2.3rem; color: #ffd166; }
@keyframes floatUp {
  0% { opacity: 0; transform: translateY(6px) scale(.6); }
  18% { opacity: 1; transform: translateY(-6px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-64px) scale(1); }
}
.shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.flash-hit::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255, 60, 40, .28);
  animation: flashFade .45s ease forwards; pointer-events: none;
}
.flash-heal::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(80, 220, 150, .22);
  animation: flashFade .5s ease forwards; pointer-events: none;
}
@keyframes flashFade { to { opacity: 0; } }

.screen-shake { animation: screenShake .4s ease; }
@keyframes screenShake {
  25% { transform: translate(3px, -2px); }
  50% { transform: translate(-3px, 2px); }
  75% { transform: translate(2px, 1px); }
}

/* ---------------- result overlay ---------------- */
.a-result {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(4, 5, 9, .82);
  backdrop-filter: blur(8px);
}
.a-result-rays {
  position: absolute; width: 720px; height: 720px;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(240, 230, 210, .07) 12deg, transparent 24deg,
    transparent 36deg, rgba(240, 230, 210, .07) 48deg, transparent 60deg,
    transparent 72deg, rgba(240, 230, 210, .07) 84deg, transparent 96deg,
    transparent 108deg, rgba(240, 230, 210, .07) 120deg, transparent 132deg,
    transparent 144deg, rgba(240, 230, 210, .07) 156deg, transparent 168deg,
    transparent 180deg, rgba(240, 230, 210, .07) 192deg, transparent 204deg,
    transparent 216deg, rgba(240, 230, 210, .07) 228deg, transparent 240deg,
    transparent 252deg, rgba(240, 230, 210, .07) 264deg, transparent 276deg,
    transparent 288deg, rgba(240, 230, 210, .07) 300deg, transparent 312deg,
    transparent 324deg, rgba(240, 230, 210, .07) 336deg, transparent 348deg);
  animation: raysSpin 26s linear infinite;
}
.a-result.defeat .a-result-rays { filter: hue-rotate(140deg) brightness(.7); }
@keyframes raysSpin { to { transform: rotate(360deg); } }
.a-result-box {
  position: relative; text-align: center;
  padding: 46px 56px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20, 23, 34, .96), rgba(11, 13, 20, .98));
  border: 1px solid rgba(200, 170, 110, .4);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65);
  animation: resultIn .55s cubic-bezier(.18, .89, .32, 1.28) both;
}
@keyframes resultIn {
  from { opacity: 0; transform: scale(.7) translateY(30px); }
  to { opacity: 1; transform: none; }
}
#result-title {
  font-size: 2.2rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 8px;
}
.a-result.victory #result-title {
  background: linear-gradient(180deg, #ffe9a8, #f5b84c 60%, #d98c22);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.a-result.defeat #result-title { color: #ff8d7d; }
#result-sub { color: #a99e8a; margin-bottom: 14px; }
#result-rewards { list-style: none; margin-bottom: 22px; }
#result-rewards li {
  padding: 6px 10px; font-size: .92rem; color: #e8ddc6;
  animation: logIn .4s ease both;
}
.a-result-actions { display: flex; gap: 12px; justify-content: center; }
.btn-outline {
  display: inline-block; padding: 11px 26px;
  color: #f0e6d2; text-decoration: none;
  border: 1px solid rgba(200, 170, 110, .45); border-radius: 6px;
  transition: background .2s, border-color .2s;
}
.btn-outline:hover { background: rgba(200, 170, 110, .08); border-color: var(--t-gold); }

/* ---------------- select screen extras ---------------- */
.b-squad-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.b-squad-row { display: flex; gap: 12px; flex-wrap: wrap; }
.b-squad-card {
  width: 132px; padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(200, 170, 110, .25);
  text-align: center;
}
.b-squad-card img { width: 100%; border-radius: 6px; display: block; }
.b-squad-name { display: block; font-size: .76rem; color: #d9cdb2; margin-top: 6px; }
.b-warn { color: #ffb37d; }

.b-search-wrap { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
#enemy-search {
  flex: 0 1 320px;
  padding: 11px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(200, 170, 110, .3);
  color: #f0e6d2;
  outline: none;
}
#enemy-search:focus { border-color: var(--t-gold); box-shadow: 0 0 18px rgba(200, 170, 110, .18); }
.b-search-count { font-size: .78rem; color: #7d948b; }

.b-region { margin-bottom: 14px; border: 1px solid rgba(200, 170, 110, .18); border-radius: 12px; background: rgba(10, 12, 18, .6); }
.b-region summary {
  cursor: pointer; list-style: none;
  padding: 13px 18px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: "Beaufort", Georgia, serif; letter-spacing: .08em;
  color: var(--t-gold-bright);
}
.b-region summary::-webkit-details-marker { display: none; }
.b-region[open] summary { border-bottom: 1px solid rgba(200, 170, 110, .14); }
.b-region-count {
  font-size: .74rem; padding: 2px 10px; border-radius: 999px;
  background: rgba(200, 170, 110, .12); color: var(--t-gold);
}
.b-enemy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px; padding: 16px;
}
.b-enemy-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(24, 28, 40, .9), rgba(12, 14, 22, .95));
  border: 1px solid rgba(255, 255, 255, .09);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.b-enemy-card:hover {
  transform: translateY(-4px);
  border-color: rgba(211, 59, 47, .55);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .5), 0 0 24px rgba(211, 59, 47, .14);
}
.b-enemy-top { display: flex; justify-content: space-between; align-items: center; }
.b-enemy-top-right { display: inline-flex; gap: 6px; align-items: center; }
.b-kills {
  font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .35);
  color: #9fe8c6;
}
.b-enemy-emoji { font-size: 30px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.b-tier {
  font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: #cbd3dc;
}
.b-tier.t1 { color: #9fd8ba; } .b-tier.t2 { color: #7db4ff; }
.b-tier.t3 { color: #c9a2ff; } .b-tier.t4 { color: #ffb37d; }
.b-tier.t5 { color: #ffd166; box-shadow: 0 0 12px rgba(255, 209, 102, .35); }
.b-enemy-name { font-size: .95rem; color: #f0e6d2; font-family: "Beaufort", Georgia, serif; }
.b-enemy-stats { display: flex; gap: 10px; font-size: .74rem; color: #8d97a2; }
.b-fight { margin-top: auto; width: 100%; }
.b-more { padding: 0 18px 14px; font-size: .78rem; color: #66707c; }

/* ---------------- bestiary ---------------- */
.bestiary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  padding: 16px;
}
.bestiary-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 15px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(24, 28, 40, .9), rgba(12, 14, 22, .95));
  border: 1px solid rgba(255, 255, 255, .09);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.bestiary-card:hover {
  transform: translateY(-3px);
  border-color: rgba(52, 211, 153, .5);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .5), 0 0 22px rgba(52, 211, 153, .12);
}
.bestiary-card.unmet { opacity: .62; }
.bestiary-desc {
  font-size: .78rem; line-height: 1.45;
  color: #8d97a2;
  min-height: 34px;
}
.bestiary-fight {
  margin-top: auto;
  text-align: center;
  text-decoration: none;
  color: var(--t-gold-bright) !important;
}

@media (max-width: 900px) {
  .arena {
    grid-template-columns: 1fr;
    grid-template-areas: "enemy" "log" "player";
  }
  .a-log { max-height: 200px; }
}