/* Battle screen layout. */

#screen-battle {
  background:
    linear-gradient(rgba(6, 4, 2, 0.42), rgba(6, 4, 2, 0.66)),
    var(--bfield, url("../assets/battleScene_v001.webp")) center / cover no-repeat;
}

#battle-wrap { flex: 1; display: flex; min-height: 0; }

#arena {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 4px 14px;
  position: relative;
}

#bt-sidebar {
  flex: 0 0 258px;
  border-left: 1px solid var(--gold-line);
  background:
    linear-gradient(rgba(9, 9, 12, 0.9), rgba(6, 6, 9, 0.96)),
    url("../assets/site/war-bg.jpg") center / cover no-repeat;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}
/* gold top accent + faint inner hairline frame, like the site's panels */
#bt-sidebar::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-line-hi), transparent);
  z-index: 3;
}

.hero-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 6px;
}

.field-row {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 0;
  padding: 4px 0;
}

.hand-row {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 2px 0 8px;
  min-height: 118px;
}
.hand-row.ai-hand { min-height: 80px; flex: 1; }
.hand-row .card { width: 108px; }
.hand-row .card.playable { border-color: var(--gold); box-shadow: 0 0 12px rgba(216, 194, 107, 0.45); }
.ai-hand .card-back { width: 52px; }

/* hero plates */
.hero {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 12px;
  position: relative;
  overflow: visible;
}
.hero .portrait {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  background-size: cover;
  background-position: center 15%;
  flex: 0 0 auto;
}
.hero.targetable { border-color: var(--danger); box-shadow: 0 0 12px rgba(226, 84, 62, 0.5); cursor: pointer; }
.hero .name {
  font-family: "Trajan", serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-pale);
  max-width: 130px;
}
.hero .life {
  font-family: "Trajan", serif;
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 0 8px rgba(226, 84, 62, 0.8);
  min-width: 34px;
  text-align: center;
}
.hero .essence { display: flex; gap: 3px; flex-wrap: wrap; max-width: 140px; }
.hero .essence .pip {
  width: 10px; height: 14px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #241c10;
  border: 1px solid var(--gold-dim);
}
.hero .essence .pip.full {
  background: radial-gradient(circle at 35% 30%, #ffefa9, var(--gold-dark));
  box-shadow: 0 0 6px rgba(216, 194, 107, 0.7);
}
.hero .meta { font-size: 11.5px; color: var(--text-dim); }

/* field card states */
.field-row .card.tapped { transform: rotate(6deg) translateY(4px); filter: brightness(0.72); }
.field-row .card.tapped:hover { transform: rotate(6deg) scale(1.03); }
.field-row .card.can-attack { border-color: #ffd76e; box-shadow: 0 0 14px rgba(255, 215, 110, 0.5); }
.field-row .card.attacking { border-color: var(--danger); box-shadow: 0 0 18px rgba(226, 84, 62, 0.8); transform: translateY(-10px); }
.field-row .card.blocking { border-color: #7ed6ff; box-shadow: 0 0 16px rgba(126, 214, 255, 0.8); }
.card.targetable { border-color: var(--danger); box-shadow: 0 0 16px rgba(226, 84, 62, 0.75); }
.card.targetable-friend { border-color: #8fdd4c; box-shadow: 0 0 16px rgba(143, 221, 76, 0.75); }

.card .frost-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  background:
    radial-gradient(circle at 20% 90%, rgba(126, 214, 255, 0.5), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(126, 214, 255, 0.45), transparent 40%),
    linear-gradient(160deg, rgba(126, 214, 255, 0.22), rgba(30, 80, 120, 0.3));
  border: 1px solid rgba(126, 214, 255, 0.7);
  border-radius: 7px;
  pointer-events: none;
  animation: frostIn 0.4s ease-out;
}
@keyframes frostIn { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: none; } }

.block-badge {
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 7px;
  z-index: 8;
  font-family: "Trajan", serif;
}

/* sidebar */
#bt-sidebar .phase { padding: 15px 16px 14px; border-bottom: 1px solid var(--gold-line); position: relative; z-index: 1; }
#bt-sidebar .phase .label {
  font-family: "Trajan", serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 9px;
}
/* small gold diamond ornament before the phase label */
#bt-sidebar .phase .label::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(216, 194, 107, 0.6);
  flex: 0 0 auto;
}
#bt-sidebar .phase .hint { font-size: 12.5px; color: #989286; margin-top: 7px; line-height: 1.45; }
#bt-sidebar .actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gold-line);
  position: relative;
  z-index: 1;
}
#bt-log { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px; font-size: 12px; line-height: 1.55; position: relative; z-index: 1; }
#bt-log .entry { margin-bottom: 5px; color: #8b877c; padding-left: 9px; border-left: 1px solid transparent; }
#bt-log .entry.you { color: var(--gold-pale); border-left-color: var(--gold-line); }
#bt-log .entry.ai { color: #a89ac4; border-left-color: rgba(168, 154, 196, 0.25); }
#bt-log .entry.combat { color: #c8896f; border-left-color: rgba(200, 137, 111, 0.25); }

/* game-over cinematic */
.go-panel { text-align: center; }
.go-panel h1 {
  font-family: "Trajan", serif;
  font-weight: 700;
  font-size: 44px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-bottom: 8px;
  animation: goTitle 0.8s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.go-panel h1.win {
  background: linear-gradient(180deg, #ffefa9, #a17a37);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(216, 194, 107, 0.5));
}
.go-panel h1.lose { color: #7a2c1e; filter: drop-shadow(0 0 20px rgba(226, 84, 62, 0.35)); }
@keyframes goTitle { from { opacity: 0; transform: scale(1.6); letter-spacing: 0.7em; } to { opacity: 1; transform: none; } }
.go-stats { display: flex; gap: 34px; justify-content: center; margin: 22px 0; }
.go-stat { text-align: center; }
.go-stat b { display: block; font-family: "Trajan", serif; font-size: 24px; color: var(--gold-pale); }
.go-stat span { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
.go-reward { margin: 10px 0 20px; font-size: 15px; color: var(--gold-pale); }

/* narrow viewports (side-panel / tablet portrait) */
@media (max-width: 1000px) {
  #bt-sidebar { flex-basis: 190px; }
  .field-row .card { width: 92px; }
  .hand-row .card { width: 84px; }
  .hero .name { max-width: 90px; font-size: 10px; }
  .hero .life { font-size: 18px; }
  .hero .portrait { width: 34px; height: 34px; }
}

/* ---------- edition mechanic UI ---------- */
.btn.hero-action {
  border-color: var(--accent, var(--gold-dim));
  color: var(--mech-accent, var(--gold));
  position: relative;
}
.btn.hero-action:not(:disabled):hover {
  box-shadow: 0 0 16px color-mix(in srgb, var(--mech-accent, var(--gold)) 40%, transparent);
}
.mech-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid var(--accent, var(--gold-dim));
  background: rgba(0, 0, 0, 0.35);
  --accent: var(--gold);
}
.mech-chip-label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.mech-chip-val { font-family: "Trajan", serif; font-weight: 700; font-size: 13px; color: var(--accent); }
.mech-chip.pulse { animation: mechPulse 1.4s ease-in-out infinite; }
@keyframes mechPulse { 50% { box-shadow: 0 0 12px var(--accent); } }