/* Battle is one continuous scene. Rules and animation timing live in games/cards. */
.in-battle {
  background: #102e29;
  color: #f8efd4;
  overflow: hidden;
}
.in-battle .sidebar,
.in-battle .topbar,
.in-battle .footer,
.in-battle .game-side,
.in-battle .game-guide {
  display: none;
}
.in-battle .layout {
  display: block;
}
.in-battle .main {
  width: 100%;
  max-width: 640px;
  height: 100dvh;
  margin: auto;
  padding: 8px;
}
.in-battle .adventure-head {
  height: 40px;
  margin: 0 0 6px;
}
.in-battle .adventure-head .eyebrow {
  display: none;
}
.in-battle .screen-title {
  color: #eee5c6;
  margin: 0;
  font-size: 16px;
}
.in-battle .back {
  background: #1e4438;
  color: #eee5c6;
  border: 1px solid #688269;
  padding: 8px 12px;
}
.in-battle .game-layout {
  display: block;
  height: calc(100% - 46px);
}
.in-battle .game-main {
  height: 100%;
  position: relative;
  border: 2px solid #728565;
  border-radius: 18px;
  background: #244b38;
}
.in-battle .battle-top {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 14px;
  background: #15392cdd;
}
.in-battle .stage-track {
  gap: 6px;
}
.in-battle .stage-dot {
  width: 20px;
  height: 20px;
}
.in-battle .scene {
  position: absolute;
  inset: 0;
  height: 100%;
  background: #244b38;
}
.in-battle .card-map {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.in-battle .scene-label {
  display: none;
}
.in-battle .browser-enemy-intent {
  top: 55px;
  left: 5%;
  right: 5%;
  text-align: left;
  color: #f8ecd2;
  background: #523e28df;
  border-color: #b9a978;
  padding: 10px 14px;
}
.in-battle .combatant {
  width: 32%;
  bottom: 48%;
  z-index: 3;
}
.in-battle .combatant.player {
  left: 4%;
}
.in-battle .combatant.enemy {
  right: 4%;
}
.in-battle .creature {
  width: 130px;
  height: 130px;
  max-width: 100%;
  margin: auto;
}
.in-battle .creature .duel-sprite {
  height: 100%;
}
.in-battle .fighter-name {
  color: #fff6d9;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 4px #173021;
  background: #203e2aad;
  border-radius: 12px;
  width: max-content;
  max-width: 100%;
  padding: 3px 8px;
  margin: auto;
}
.in-battle .health {
  width: 90%;
  height: 8px;
  border: 1px solid #e7eed0;
  background: #233b2bcc;
}
.in-battle .health i {
  background: #b7d974;
}
.in-battle .enemy .health i {
  background: #edc46e;
}
.in-battle .question-zone {
  position: absolute;
  z-index: 7;
  bottom: 10px;
  left: 10px;
  right: 10px;
  height: 40%;
  max-height: 360px;
  padding: 12px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  color: #294535;
  background: #faf9e9f5;
  border: 1px solid #cbd5ae;
  border-radius: 18px;
  box-shadow: 0 6px 22px #0e271b66;
}
.in-battle .question-meta {
  margin-bottom: 4px;
  font-size: 10px;
}
.in-battle .word {
  font-size: clamp(21px, 5.3vw, 31px);
  margin: 4px 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.in-battle .phonetic {
  font-size: 11px;
}
.in-battle .prompt {
  font-size: 11px;
  margin: 5px 0 8px;
}
.in-battle .skills {
  gap: 6px;
  margin-bottom: 8px;
}
.in-battle .skill {
  padding: 6px 4px;
  min-height: 50px;
  border-radius: 10px;
}
.in-battle .skill span {
  display: none;
}
.in-battle .skill b {
  font-size: 12px;
}
.in-battle .skill small {
  font-size: 10px;
  margin-top: 3px;
}
.in-battle .answers {
  gap: 6px;
}
.in-battle .answer {
  min-height: 43px;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 13px;
}
.in-battle .answer .key {
  font-size: 9px;
  margin-right: 6px;
}
.in-battle .feedback {
  margin-top: 9px;
  padding: 10px;
  font-size: 12px;
}
.in-battle .feedback[hidden] {
  display: none;
}
.in-battle .feedback .btn {
  margin-top: 8px;
  padding: 10px;
  width: 100%;
}
.battle-announcement {
  position: absolute;
  z-index: 5;
  top: calc(50% - 25px);
  left: 5%;
  right: 5%;
  text-align: center;
  color: #fff6d4;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 2px 4px #142b20;
}
.battle-motes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.battle-motes i {
  position: absolute;
  left: 18%;
  top: 24%;
  width: 4px;
  height: 4px;
  background: #f8e29c;
  border-radius: 50%;
  box-shadow: 0 0 10px #ffe6a8;
  animation: battle-drift 5s ease-in-out infinite alternate;
}
.battle-motes i:nth-child(2) {
  left: 80%;
  top: 39%;
  animation-delay: -1.7s;
}
.battle-motes i:nth-child(3) {
  left: 46%;
  top: 16%;
  animation-delay: -3s;
}
.battle-motes i:nth-child(4) {
  left: 8%;
  top: 62%;
  animation-delay: -2s;
}
.battle-motes i:nth-child(5) {
  left: 66%;
  top: 74%;
  animation-delay: -4s;
}
.battle-fx {
  position: absolute;
  z-index: 4;
  width: 100px;
  height: 100px;
  right: 11%;
  bottom: calc(48% + 45px);
  pointer-events: none;
  color: #ffe99a;
}
.battle-fx span {
  position: absolute;
  inset: 0;
  font-size: 105px;
  line-height: 100px;
  text-align: center;
  filter: drop-shadow(0 0 10px currentColor);
  animation: battle-slash 0.45s ease-out both;
}
.battle-fx i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  background: currentColor;
  animation: battle-spark 0.65s ease-out both;
  --dx: 48px;
  --dy: 0px;
}
.battle-fx i:nth-of-type(2) {
  --dx: 25px;
  --dy: 38px;
}
.battle-fx i:nth-of-type(3) {
  --dx: -35px;
  --dy: 32px;
}
.battle-fx i:nth-of-type(4) {
  --dx: -45px;
  --dy: -5px;
}
.battle-fx i:nth-of-type(5) {
  --dx: -15px;
  --dy: -45px;
}
.battle-fx i:nth-of-type(6) {
  --dx: 36px;
  --dy: -36px;
}
.fx-shield,
.fx-heal,
.fx-counter,
.fx-block {
  right: auto;
  left: 11%;
}
.fx-shield,
.fx-block {
  color: #9fe4ef;
}
.fx-heal {
  color: #b7ed93;
}
.fx-counter {
  color: #ffae80;
}
.fx-heal span,
.fx-shield span,
.fx-block span {
  font-size: 80px;
  animation: battle-aura 0.65s ease-out both;
}
.scene[data-pose="player-attack"] .player .creature {
  animation: battle-player-strike 0.65s ease-in-out both;
}
.scene[data-pose="player-attack"][data-impact="true"] .enemy .creature {
  animation: battle-enemy-hit 0.3s ease-out both;
}
.scene[data-pose="enemy-ready"] .enemy .creature {
  transform-origin: center bottom;
  animation: battle-enemy-ready 0.2s ease-out both;
}
@keyframes battle-enemy-ready {
  to {
    transform: translateX(6px) scale(1.04, 0.94);
  }
}
.scene[data-pose="enemy-attack"] .enemy .creature {
  animation: battle-enemy-strike 0.38s ease-in-out both;
}
.scene[data-pose="player-hit"] .player .creature {
  animation: battle-player-hit 0.55s ease-out both;
}
.scene[data-pose="player-defend"] .player .creature,
.scene[data-pose="player-block"] .player .creature {
  animation: battle-block 0.55s ease-out both;
}
.scene[data-pose="player-heal"] .player .creature {
  animation: battle-heal 0.65s ease-out both;
}
.scene[data-pose="enemy-defeated"] .enemy .creature {
  animation: battle-defeated 0.45s ease-out both;
}
@keyframes battle-player-strike {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-12px) rotate(-7deg);
  }
  55%,
  65% {
    transform: translateX(65px) rotate(8deg);
  }
  70% {
    transform: translateX(45px);
  }
}
@keyframes battle-enemy-strike {
  0%,
  100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(12px) rotate(5deg);
  }
  65% {
    transform: translateX(-60px) rotate(-8deg);
  }
}
@keyframes battle-enemy-hit {
  0% {
    transform: translateX(20px);
    filter: brightness(1.8);
  }
  45% {
    transform: translateX(8px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes battle-player-hit {
  0% {
    transform: translateX(-20px);
    filter: sepia(0.7) brightness(1.5);
  }
  30% {
    transform: translateX(4px);
  }
  55% {
    transform: translateX(-6px);
  }
  100% {
    transform: translateX(0);
    filter: none;
  }
}
@keyframes battle-block {
  0%,
  100% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-6px);
    filter: drop-shadow(0 0 8px #91e8ff);
  }
}
@keyframes battle-heal {
  50% {
    transform: translateY(-8px);
    filter: drop-shadow(0 0 12px #b2ef8e);
  }
}
@keyframes battle-defeated {
  to {
    transform: translateY(15px) scale(0.85);
    opacity: 0;
  }
}
@keyframes battle-slash {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-25deg);
  }
  45% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes battle-spark {
  from {
    opacity: 1;
    transform: translate(0, 0);
  }
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy));
  }
}
@keyframes battle-aura {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  45% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(1.4);
  }
}
@keyframes battle-drift {
  to {
    transform: translate(12px, -28px);
    opacity: 0.3;
  }
}
.reduce-motion .battle-motes,
.reduce-motion .battle-fx {
  display: none;
}
.reduce-motion .in-battle *,
.reduce-motion .scene .creature {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .battle-motes,
  .battle-fx {
    display: none;
  }
  .in-battle .creature {
    animation: none !important;
  }
}
@media (max-height: 640px) {
  .in-battle .browser-enemy-intent {
    font-size: 11px;
    padding: 7px 10px;
    top: 45px;
  }
  .in-battle .combatant {
    bottom: 46%;
  }
  .in-battle .creature {
    width: 100px;
    height: 100px;
  }
  .in-battle .question-zone {
    height: 41%;
    padding: 9px 12px;
  }
  .battle-fx {
    bottom: calc(46% + 30px);
  }
  .battle-announcement {
    font-size: 12px;
    top: 52%;
  }
  .in-battle .prompt {
    margin: 3px 0 5px;
  }
  .in-battle .skill {
    min-height: 43px;
  }
  .in-battle .answer {
    min-height: 40px;
  }
}
@media (max-width: 360px) {
  .in-battle .stage-track {
    font-size: 10px;
  }
  .in-battle .question-meta {
    font-size: 9px;
  }
  .in-battle .question-zone {
    left: 7px;
    right: 7px;
  }
  .in-battle .answer {
    font-size: 12px;
  }
  .in-battle .fighter-name {
    font-size: 10px;
  }
}

/* Reserve a complete answer panel; actors stay above it on short phones. */
.in-battle .game-main {
  --controls-height: clamp(270px, 43dvh, 360px);
}
.in-battle .question-zone {
  height: var(--controls-height);
  max-height: calc(100% - 160px);
}
.in-battle .combatant {
  bottom: calc(var(--controls-height) + 40px);
}
.in-battle .battle-fx {
  bottom: calc(var(--controls-height) + 90px);
}
.in-battle .battle-announcement {
  top: auto;
  bottom: calc(var(--controls-height) + 20px);
}
@media (max-height: 640px) {
  .in-battle .game-main {
    --controls-height: 255px;
  }
  .in-battle .question-meta {
    display: none;
  }
  .in-battle .skill {
    min-height: 40px;
  }
  .in-battle .creature {
    width: 90px;
    height: 90px;
  }
}

.in-battle .question-zone.resolved .skills,
.in-battle .question-zone.resolved .answers,
.in-battle .question-zone.resolved .prompt {
  display: none;
}
.in-battle .question-zone.resolved .feedback {
  margin-top: 10px;
  background: #edf2df;
  line-height: 1.5;
}

.in-battle .question-zone {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.battle-question-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.battle-next {
  flex-shrink: 0;
  padding-top: 8px;
}
.battle-next .btn {
  width: 100%;
  padding: 10px;
  font-size: 13px;
}
.question-zone:not(.resolved) .battle-next {
  display: none;
}
.combatant:before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 40px;
  height: 14px;
  border-radius: 50%;
  background: #16372355;
  filter: blur(3px);
  z-index: -1;
}
.in-battle .biome-ruins .card-map {
  filter: brightness(0.86) saturate(0.9);
}
.in-battle .biome-ruins .battle-motes i {
  background: #b5f8d7;
  box-shadow: 0 0 14px #a9fadd;
  width: 5px;
  height: 5px;
}
.in-battle .biome-bridge .battle-motes i {
  background: #d7f6fe;
  box-shadow: 0 0 10px #c6efff;
  opacity: 0.6;
}
.in-battle .biome-bridge:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    #d0f5ff12 48%,
    transparent 65%
  );
  animation: battle-waterlight 7s ease-in-out infinite alternate;
}
@keyframes battle-waterlight {
  to {
    opacity: 0.35;
    transform: translateX(20px);
  }
}
.reduce-motion.in-battle * {
  animation: none !important;
  transition: none !important;
}

.duel-sprite .attack-pose {
  visibility: hidden;
}
.scene[data-pose="player-attack"] .player .idle-pose,
.scene[data-pose="enemy-attack"] .enemy .idle-pose {
  visibility: hidden;
}
.scene[data-pose="player-attack"] .player .attack-pose,
.scene[data-pose="enemy-attack"] .enemy .attack-pose {
  visibility: visible;
}

.perk-pane {
  position: absolute;
  z-index: 7;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 20px;
  background: #faf9e9f5;
  border: 1px solid #cbd5ae;
  border-radius: 18px;
  max-height: 58%;
  overflow: auto;
  color: #294535;
  box-shadow: 0 6px 22px #0e271b66;
}
.perk-pane h2 {
  font-size: 23px;
  margin: 6px 0 10px;
}
.perk-pane > p {
  font-size: 12px;
  color: #6a7c5d;
  margin: 0 0 12px;
}
.perk-pane .perk-list {
  margin: 0;
  max-width: none;
  gap: 8px;
}
.perk-pane .perk {
  padding: 12px;
  gap: 12px;
  border-radius: 12px;
  background: #eef2df;
  border-color: #b4c295;
}
.perk-pane .perk-icon {
  font-size: 25px;
}
.perk-pane .perk b {
  font-size: 15px;
}
.perk-pane .perk p {
  font-size: 11px;
  margin: 4px 0 0;
}
.perk-pane .perk:hover {
  background: #dfeac7;
  transform: translateY(-2px);
}
@media (max-height: 640px) {
  .perk-pane {
    padding: 12px;
    max-height: 53%;
  }
  .perk-pane h2 {
    font-size: 18px;
  }
  .perk-pane .perk {
    padding: 9px;
  }
  .perk-pane .perk-icon {
    font-size: 20px;
  }
  .perk-pane .perk b {
    font-size: 13px;
  }
}

.battle-skill-preview {
  font-size: 10px;
  color: #607650;
  line-height: 1.4;
  margin: -2px 0 7px;
  text-align: center;
}
.question-zone.resolved .battle-skill-preview {
  display: none;
}

.perk-stage .combatant {
  bottom: 64%;
}
.perk-stage .health,
.perk-stage .fighter-name {
  display: none;
}
@media (max-height: 640px) {
  .perk-pane {
    max-height: 60%;
  }
  .perk-pane .perk {
    padding: 8px;
    gap: 8px;
  }
  .perk-pane .perk p {
    font-size: 10px;
    line-height: 1.45;
  }
  .perk-pane .perk-icon {
    font-size: 18px;
  }
  .perk-pane > p {
    margin-bottom: 8px;
    font-size: 11px;
  }
  .perk-pane h2 {
    margin: 4px 0 7px;
  }
}

@media (min-height: 641px) and (max-height: 740px) {
  .in-battle .game-main {
    --controls-height: 285px;
  }
  .in-battle .question-meta {
    display: none;
  }
  .in-battle .creature {
    width: 105px;
    height: 105px;
  }
  .in-battle .question-zone {
    padding: 10px 14px;
  }
  .in-battle .prompt {
    margin: 3px 0 6px;
  }
  .in-battle .skill {
    min-height: 43px;
    padding: 5px 4px;
  }
  .in-battle .answer {
    min-height: 40px;
  }
}
.scene.biome-forest[data-pose="enemy-attack"] .enemy .creature {
  animation-name: battle-mushroom-hop;
}
.scene.biome-bridge[data-pose="enemy-attack"] .enemy .creature {
  animation-name: battle-tree-stomp;
}
@keyframes battle-mushroom-hop {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(8px, 5px) scaleY(0.9);
  }
  60% {
    transform: translate(-60px, -24px) rotate(-9deg);
  }
  85% {
    transform: translate(-14px, 0);
  }
}
@keyframes battle-tree-stomp {
  0%,
  100% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(8px, -14px) rotate(6deg);
  }
  65% {
    transform: translate(-45px, 7px) rotate(-6deg);
  }
  85% {
    transform: translate(-10px, 0);
  }
}
.battle-skill-preview.is-risky {
  color: #933d2d;
  background: #fce4d4;
  border: 1px solid #dba589;
  border-radius: 7px;
  padding: 3px 6px;
  font-weight: 650;
}
.reduce-motion .scene[data-pose="enemy-defeated"] .enemy .creature {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .scene[data-pose="enemy-defeated"] .enemy .creature {
    opacity: 0;
  }
}