/*
 * Match Adventure responsive layout candidate
 *
 * This file is linked by the formal adventure.html entry.
 * It carries the complete current stylesheet and the consolidated responsive
 * policy used by the active adventure page.
 *
 * Responsive contract:
 * - Wide: 1181px and above.
 * - Mid: 541px through 1180px.
 * - Phone: 540px and below.
 * - Phone height is split at 700px into short and tall layouts.
 * - Components consume shared tokens; game logic remains in JavaScript.
 */

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: "Noto Sans SC", "Inter", system-ui, sans-serif;
  background: url("assets/images/backgrounds/adventure/adventure-bg-landscape.jpg") center top / cover fixed no-repeat !important;
  color: #17345f;
}

body.match-adventure-lite-page::before {
  content: none !important;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

.match-adventure-shell {
  width: min(100%, 1220px);
  margin: 0 auto;
  padding: 10px 10px calc(118px + env(safe-area-inset-bottom));
  display: grid;
  gap: 6px;
}

.match-topbar,
.match-control-row,
.match-battle-stage,
.match-board-section {
  width: 100%;
}

.match-battle-stage,
.match-board-section {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.match-control-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
  width: min(100%, 600px);
  margin: 0 auto;
}

.match-deck-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 36px;
  min-height: 36px;
  border: 0;
  color: #f7ebc3;
  text-shadow: 0 2px 0 rgba(17, 32, 69, 0.72);
  box-shadow: none;
}

.match-deck-trigger {
  gap: 6px;
  width: 240px;
  padding: 0 14px 0 10px;
  background: url("assets/images/ui/adventure/select-button-wide.png") center / 100% 100% no-repeat;
}

.match-deck-trigger strong {
  min-width: 0;
  overflow: hidden;
  color: #f7ebc3;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-10px);
}

.match-deck-panel {
  width: min(100%, 600px);
  margin: 0 auto;
  padding: 0;
}

.match-deck-selector-card {
  width: 100%;
  max-height: 82svh;
  padding: 18px;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
  color: #17345f;
  background: rgba(255, 250, 235, 0.96);
  border: 3px solid rgba(218, 166, 78, 0.9);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(4, 15, 39, 0.42), inset 0 0 0 2px rgba(75, 155, 255, 0.2);
}

.match-deck-panel[hidden] {
  display: none;
}

.match-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #17345f;
}

.match-deck-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.match-deck-manage {
  min-height: 34px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #8fc1f4;
  border-radius: 999px;
  color: #17345f;
  background: linear-gradient(180deg, #ffffff 0%, #eaf7ff 100%);
  box-shadow: none;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.match-deck-close {
  min-height: 34px;
  padding: 0 14px;
  border: 2px solid #8fc1f4;
  border-radius: 999px;
  color: #17345f;
  background: linear-gradient(180deg, #ffffff 0%, #eaf7ff 100%);
  font-size: 12px;
  font-weight: 900;
}

.match-picker-head h2 {
  margin: 0;
  font-family: "Source Han Serif SC", "Noto Serif SC", "SimSun", serif;
  font-size: 22px;
  line-height: 1.1;
}

.match-stage-list,
.match-series-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.match-series-list {
  min-width: 0;
}

.match-stage-item,
.match-series-item,
.match-deck-item {
  min-width: 0;
  padding: 10px 8px;
  display: grid;
  gap: 3px;
  text-align: left;
  border: 2px solid rgba(91, 150, 219, 0.72);
  color: #17345f;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(215, 236, 255, 0.94));
  box-shadow: 0 3px 0 rgba(82, 134, 210, 0.18);
  font-family: "Source Han Serif SC", "Noto Serif SC", "SimSun", serif;
  font-weight: 950;
  cursor: pointer;
}

.match-stage-item,
.match-series-item {
  flex: 0 0 clamp(126px, 22vw, 176px);
}

.match-stage-item {
  align-items: center;
  justify-content: center;
  min-height: 62px;
  border-radius: 18px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(228, 241, 255, 0.94));
  box-shadow: 0 3px 0 rgba(82, 134, 210, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.match-series-item {
  min-height: 86px;
  border-radius: 16px;
  padding: 12px 10px 10px;
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.98), rgba(223, 236, 255, 0.95));
}

.match-deck-item {
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(228, 239, 251, 0.94));
}

.match-stage-item span:first-child,
.match-series-item span:first-child {
  white-space: normal;
  word-break: break-word;
}

.match-stage-item.active,
.match-series-item.active,
.match-deck-item.active {
  color: #4b3107;
  border-color: #d99b2f;
  background: linear-gradient(180deg, #fff0a3, #ffd45a);
}

.match-stage-title,
.match-series-title,
.match-deck-title {
  overflow: hidden;
  color: #17345f;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-stage-item .match-stage-title {
  font-size: 16px;
  text-align: center;
}

.match-stage-sub,
.match-series-sub,
.match-deck-total {
  color: rgba(16, 50, 106, 0.68);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
}

.match-grade-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-right: 3px;
}

.match-deck-item {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.battle-sky {
  position: relative;
  min-height: clamp(250px, 39vw, 500px);
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  image-rendering: pixelated;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    url("assets/images/backgrounds/adventure/maps/grade3-starlight-forest.jpg") center 62% / cover no-repeat;
}

.battle-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), transparent 35%),
    radial-gradient(circle at 22% 68%, rgba(87, 230, 255, 0.2), transparent 22%),
    radial-gradient(circle at 82% 64%, rgba(255, 122, 144, 0.16), transparent 24%);
  mix-blend-mode: screen;
}

.battle-hud {
  position: absolute;
  top: 10px;
  z-index: 20;
  display: grid;
  gap: 3px;
  width: min(360px, calc(50% - 16px));
  overflow: visible;
}

.hero-hud {
  left: 10px;
  text-align: left;
}

.monster-hud {
  right: 10px;
  text-align: right;
}

.battle-hud > div:first-child {
  display: grid;
  align-items: center;
}

.hero-hud > div:first-child {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  row-gap: 1px;
}

.monster-hud > div:first-child {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  column-gap: 6px;
}

.monster-rank-icon {
  display: block;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(7, 21, 44, 0.42));
}

.battle-name {
  grid-column: 1;
  color: #ffffff;
  -webkit-text-stroke: 0.8px rgba(5, 12, 24, 0.96);
  paint-order: stroke fill;
  text-shadow: 1px 0 0 rgba(5, 12, 24, 0.96),
    -1px 0 0 rgba(5, 12, 24, 0.96),
    0 1px 0 rgba(5, 12, 24, 0.96),
    0 -1px 0 rgba(5, 12, 24, 0.96),
    1px 1px 0 rgba(5, 12, 24, 0.96),
    -1px 1px 0 rgba(5, 12, 24, 0.96),
    1px -1px 0 rgba(5, 12, 24, 0.96),
    -1px -1px 0 rgba(5, 12, 24, 0.96);
}

.hero-hud .battle-name {
  min-width: 0;
  grid-row: 1;
}

.monster-hud .battle-name {
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  text-align: left;
}

.battle-traits {
  margin: -2px 0 6px;
  font-weight: 900;
  letter-spacing: 0;
  color: #fff4d0;
  text-shadow: 0 1px 0 rgba(5, 12, 24, 0.96);
}

.hero-hud .hero-traits {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}

.monster-hud .battle-traits {
  display: none;
}

.battle-hud strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #fff6df;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.hero-hud strong {
  justify-self: end;
  font-size: 13px;
}

.monster-hud strong {
  grid-column: 3;
  justify-self: end;
  font-size: 13px;
}

.hp-track {
  overflow: hidden;
  height: 20px;
  border: 3px solid #070912;
  border-radius: 999px;
  background: #111827;
  box-shadow: 4px 4px 0 #070912;
}

.hero-hud .hp-track {
  margin: 2px 0 0;
}

.monster-hud .hp-track {
  grid-column: 1 / span 3;
  margin: 2px 0 0;
}

.hp-fill {
  display: block;
  width: 100%;
  height: 100%;
  transition: width 180ms linear;
}

.hero-fill {
  background: linear-gradient(180deg, #ff8465 0%, #e8232b 55%, #b40d1b 100%);
}

.monster-fill {
  background: linear-gradient(180deg, #fa84ab 0%, #ef476f 55%, #b01443 100%);
}

.hero-hud-progress {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.hero-hud-exp-line {
  color: #fff4d0;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.exp-track {
  overflow: hidden;
  height: 9px;
  border: 3px solid #070912;
  border-radius: 3px;
  background: #070912;
}

.exp-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ffe98a, #79f299);
  transition: width 360ms ease;
}

.battle-map-title {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 18;
  max-width: 170px;
  padding: 4px 10px;
  border: 3px solid #070912;
  border-radius: 4px;
  color: #1a1208;
  background: linear-gradient(180deg, #ffe98a 0 50%, #f5b33f 50% 100%);
  box-shadow: 4px 4px 0 #070912;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  transform: translateX(-50%);
}

.battle-rpg-panel {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 19;
  display: grid;
  grid-template-columns: minmax(118px, 1fr) auto;
  column-gap: 7px;
  align-items: center;
  width: 218px;
  padding: 5px 6px;
  border: 3px solid #070912;
  border-radius: 4px;
  background: #111827;
  box-shadow: 4px 4px 0 #070912;
}

.rpg-line {
  grid-column: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px;
  color: #fff4d0;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.rpg-line strong {
  text-align: right;
}

.battle-rpg-panel .exp-track {
  grid-column: 1;
  height: 9px;
  margin: 4px 0;
}

.profile-battle-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  min-width: 42px;
  min-height: 34px;
  padding: 4px 6px;
  border: 3px solid #070912;
  border-radius: 4px;
  color: #1a1208;
  background: linear-gradient(180deg, #95f8ff 0 50%, #43bfdf 50% 100%);
  box-shadow: 4px 4px 0 #070912;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.mobile-battle-button {
  position: absolute;
  top: 18px;
  z-index: 19;
  display: none;
  place-items: center;
  height: 34px;
  min-height: 34px;
  padding: 5px 14px;
  border: 3px solid #070912;
  border-radius: 5px;
  color: #1a1208;
  background: linear-gradient(180deg, #ffe98a 0 50%, #f5b33f 50% 100%);
  box-shadow: 3px 3px 0 #070912;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.mobile-profile-button {
  left: 18px;
  width: 78px;
  min-width: 78px;
}

.mobile-boss-button {
  right: 18px;
}

.fighter {
  position: absolute;
  transform-origin: 50% 100%;
  transition: filter 180ms ease, opacity 260ms ease;
}

.pet-fighter {
  overflow: visible;
  pointer-events: none;
}

.pet-fighter.hidden {
  display: none;
}

.sprite {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: 400% 400%;
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.38));
}

.hero-sprite {
  background-image: url("assets/images/characters/hero/hero-sprite-sheet.png?v=3");
  background-position: 0 0;
  filter: drop-shadow(1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(-1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 -1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 0 6px rgba(111, 214, 255, 0.42))
    drop-shadow(0 12px 8px rgba(0, 0, 0, 0.36));
}

.monster-sprite {
  background-image: url("assets/images/characters/monsters/monster-sprite-sheet-cutout-v3.png?v=3");
  background-position: 0 0;
  filter: drop-shadow(1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(-1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 -1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 0 6px rgba(111, 214, 255, 0.42))
    drop-shadow(0 12px 8px rgba(0, 0, 0, 0.36));
}

.monster-fighter.boss .monster-sprite {
  filter: drop-shadow(1px 0 0 rgba(255, 244, 168, 0.98))
    drop-shadow(-1px 0 0 rgba(255, 244, 168, 0.98))
    drop-shadow(0 1px 0 rgba(255, 244, 168, 0.98))
    drop-shadow(0 -1px 0 rgba(255, 244, 168, 0.98))
    drop-shadow(0 0 10px rgba(255, 203, 71, 0.55))
    drop-shadow(0 12px 10px rgba(0, 0, 0, 0.42));
}

.pet-battle-sprite {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
  transform: scaleX(-1);
  filter: drop-shadow(1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(-1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 -1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 0 6px rgba(111, 214, 255, 0.42))
    drop-shadow(0 10px 8px rgba(0, 0, 0, 0.36));
}

.battle-vfx {
  position: absolute;
  z-index: 12;
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
  background-image: url("assets/images/effects/battle/battle-vfx-sheet.png?v=3");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  pointer-events: none;
}

.battle-vfx.slash {
  background-position: 0 0;
}

.battle-vfx.slash.strong {
  background-position: 0 100%;
}

.battle-vfx.enemy-impact {
  background-position: 66.666% 0;
}

.battle-vfx.hidden {
  display: none;
}

.damage-number {
  position: absolute;
  z-index: 13;
  color: #e53935;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: damageFloat 820ms ease forwards;
}

.damage-number.combo {
  color: #e53935;
}

.damage-number.pet {
  color: #e53935;
}

.damage-number.danger {
  color: #e53935;
}

.damage-number.hidden {
  display: none;
}

.reward-overlay {
  position: fixed;
  inset: 0;
  z-index: 5020;
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: auto;
  background: rgba(55, 118, 178, 0.34);
}

.reward-overlay.hidden {
  display: none;
}

.reward-icon {
  position: relative;
  background: linear-gradient(180deg, #ffe98a 0 50%, #f5b33f 50% 100%);
  image-rendering: pixelated;
  background-position: center;
  background-repeat: no-repeat;
}

.reward-icon::before,
.reward-icon::after {
  position: absolute;
  content: "";
  image-rendering: pixelated;
}

.reward-icon.has-image::before,
.reward-icon.has-image::after {
  display: none;
}

.reward-weapon::before {
  left: 21px;
  top: 6px;
  width: 7px;
  height: 28px;
  background: #eaf6ff;
  box-shadow: -5px 5px 0 #9ad8ff,
    5px 5px 0 #9ad8ff,
    0 28px 0 #70421b,
    -7px 23px 0 #ffd45f,
    7px 23px 0 #ffd45f;
  transform: rotate(42deg);
}

.reward-armor::before {
  left: 11px;
  top: 8px;
  width: 26px;
  height: 32px;
  background: linear-gradient(90deg, #8df7b2 0 35%, #d9e7ff 35% 65%, #43bfdf 65% 100%);
  clip-path: polygon(50% 0, 92% 14%, 84% 70%, 50% 100%, 16% 70%, 8% 14%);
  box-shadow: inset 0 0 0 4px #070912;
}

.reward-stone::before {
  left: 10px;
  top: 16px;
  width: 30px;
  height: 18px;
  background: linear-gradient(135deg, #d9e7ff 0 35%, #8a9bb4 35% 68%, #5e6d84 68% 100%);
  clip-path: polygon(12% 30%, 38% 0, 84% 12%, 100% 52%, 72% 100%, 20% 88%, 0 54%);
  box-shadow: 0 0 0 4px #070912,
    5px 5px 0 rgba(7, 9, 18, 0.35);
}

.reward-plate::before {
  left: 9px;
  top: 10px;
  width: 30px;
  height: 26px;
  border: 4px solid #070912;
  border-radius: 2px;
  background: linear-gradient(180deg, #d9e7ff 0 48%, #7f93ad 48% 100%);
  box-shadow: inset 8px 0 0 rgba(255, 255, 255, 0.28),
    inset -8px 0 0 rgba(7, 9, 18, 0.18);
}

.reward-special::before {
  left: 14px;
  top: 8px;
  width: 20px;
  height: 30px;
  background: linear-gradient(180deg, #9af1ff 0 45%, #a26bff 45% 100%);
  clip-path: polygon(50% 0, 92% 28%, 78% 100%, 22% 100%, 8% 28%);
  box-shadow: 0 0 0 4px #070912,
    0 0 18px #9af1ff;
}

.reward-special::after {
  left: 21px;
  top: 3px;
  width: 7px;
  height: 7px;
  background: #fff4d0;
  box-shadow: -18px 20px 0 #fff4d0,
    18px 22px 0 #fff4d0;
}

.ability-reward-panel {
  box-sizing: border-box;
  width: min(430px, calc(100vw - 32px));
  padding: 24px 22px 22px;
  border: 2px solid rgba(111, 184, 231, 0.82);
  border-radius: 22px;
  color: #24446c;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(236, 249, 255, 0.96));
  box-shadow: 0 20px 46px rgba(48, 116, 178, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.ability-reward-panel .eyebrow {
  margin: 0 0 6px;
  color: #2f8fd0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}

.ability-reward-panel h3 {
  margin: 0 0 8px;
  color: #1f5f9c;
  font-size: clamp(22px, 4.6vw, 32px);
  line-height: 1.14;
  text-shadow: none;
}

.ability-reward-panel p:not(.eyebrow) {
  max-width: 340px;
  margin: 0 auto 16px;
  color: #4b6f91;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.ability-reward-panel .reward-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border: 2px solid rgba(143, 193, 244, 0.88);
  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.9);
  background-size: 74%;
  box-shadow: 0 10px 22px rgba(50, 121, 190, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.ability-reward-panel .reward-icon.has-image {
  background-color: rgba(255, 255, 255, 0.92);
  background-size: contain;
}

.ability-reward-panel .reward-icon::before,
.ability-reward-panel .reward-icon::after {
  filter: none;
}

.ability-reward-panel .primary-button {
  min-width: 96px;
  min-height: 42px;
  padding: 0 18px;
  border: 2px solid rgba(111, 184, 231, 0.88);
  border-radius: 14px;
  color: #1f5f9c;
  background: linear-gradient(180deg, #ffffff, #e7f5ff);
  box-shadow: 0 8px 18px rgba(74, 142, 205, 0.14);
}

.adventure-end-panel {
  position: fixed;
  inset: 0;
  z-index: 5030;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(55, 118, 178, 0.34);
}

.adventure-end-panel.hidden {
  display: none;
}

.adventure-end-panel .result-glow {
  position: absolute;
  inset: -80px;
  z-index: -1;
  background: radial-gradient(circle, rgba(88, 245, 167, 0.28), transparent 62%);
}

.adventure-end-panel {
  overflow: hidden;
}

.adventure-end-card {
  position: relative;
  box-sizing: border-box;
  width: min(410px, calc(100vw - 32px));
  padding: 20px 18px 18px;
  border: 2px solid rgba(111, 184, 231, 0.88);
  border-radius: 20px;
  color: #24446c;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 249, 255, 0.97));
  box-shadow: 0 20px 46px rgba(48, 116, 178, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.adventure-end-panel[data-mode="gameover"] .adventure-end-card {
  width: min(360px, calc(100vw - 32px));
  padding: 18px 16px 16px;
}

.adventure-end-panel[data-mode="gameover"] .eyebrow {
  display: none;
}

.adventure-end-panel h2 {
  margin: 0 0 8px;
  color: #1f5f9c;
  font-size: clamp(22px, 4.6vw, 32px);
  line-height: 1.14;
  text-shadow: none;
}

.adventure-end-panel .eyebrow {
  margin: 0 0 6px;
  color: #2f8fd0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}

.adventure-end-panel p:not(.eyebrow) {
  max-width: 340px;
  margin: 0 auto 16px;
  color: #4b6f91;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
  text-align: center;
}

.adventure-end-panel .deck-name-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  min-height: 46px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  border: 2px solid rgba(111, 184, 231, 0.88);
  border-radius: 14px;
  color: #1f5f9c;
  font: inherit;
  font-weight: 900;
  text-align: center;
  background: linear-gradient(180deg, #ffffff, #e7f5ff);
  box-shadow: 0 8px 18px rgba(74, 142, 205, 0.14);
}

.adventure-end-panel[data-mode="gameover"] .deck-name-input {
  min-height: 42px;
  margin-bottom: 12px;
}

.adventure-name-error {
  margin: -8px auto 10px !important;
  color: #d9534f !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

.adventure-end-panel .adventure-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.adventure-end-panel .icon-button {
  min-width: 86px;
  min-height: 42px;
  padding: 0 18px;
  border: 2px solid rgba(111, 184, 231, 0.88);
  border-radius: 14px;
  color: #1f5f9c;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff, #e7f5ff);
  box-shadow: 0 8px 18px rgba(74, 142, 205, 0.14);
}

.adventure-end-panel .primary-button {
  min-width: 124px;
  min-height: 42px;
  padding: 0 18px;
  border: 2px solid rgba(111, 184, 231, 0.88);
  border-radius: 14px;
  color: #1f5f9c;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff, #e7f5ff);
  box-shadow: 0 8px 18px rgba(74, 142, 205, 0.14);
}

body.name-prompt-open {
  overflow: hidden;
}

.match-board-section {
  padding: 0;
}

.match-board-frame {
  padding: clamp(22px, 2.5vw, 34px);
  border: 6px solid #c78f2a;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.54), transparent 38%),
    linear-gradient(180deg, rgba(255, 246, 207, 0.48), rgba(255, 251, 239, 0.48));
  box-shadow:
    0 16px 30px rgba(30, 72, 119, 0.18),
    inset 0 0 0 2px rgba(255, 255, 255, 0.84),
    inset 0 0 0 6px rgba(250, 215, 124, 0.42);
}

.match-board-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #173a78;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.match-board-title::before,
.match-board-title::after {
  content: "";
  width: clamp(42px, 5vw, 62px);
  height: 20px;
  background:
    url("assets/images/ui/adventure/diamond-divider-small.png") center / contain no-repeat;
}

.match-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.match-card-button {
  display: grid;
  place-items: center;
  min-height: clamp(50px, 5.6vw, 72px);
  padding: 8px 10px;
  border: 2px solid #d8b15c;
  border-radius: 14px;
  color: #18407f;
  background: linear-gradient(180deg, #fff9eb 0%, #f7eccf 100%);
  box-shadow:
    0 4px 0 rgba(190, 140, 39, 0.26),
    inset 0 0 0 2px rgba(255, 255, 255, 0.76);
  font-size: clamp(14px, 1.35vw, 20px);
  font-weight: 900;
  line-height: 1.05;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  transition:
    transform 160ms ease,
    opacity 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    border-color 160ms ease;
}

.match-card-button[hidden] {
  display: none !important;
}

.match-card-button.removed {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.match-card-button:hover {
  transform: translate(-1px, -1px);
}

.match-card-button.selected {
  border-color: #2b69d6;
  box-shadow:
    0 0 0 3px rgba(65, 121, 228, 0.16),
    0 4px 0 rgba(190, 140, 39, 0.26),
    inset 0 0 0 2px rgba(255, 255, 255, 0.86);
  transform: translate(-1px, -1px);
}

.match-card-button.matched {
  opacity: 0;
  transform: scale(0.7);
  filter: saturate(0.72);
  pointer-events: none;
}

.match-card-button.locked {
  pointer-events: none;
}

.hero-fighter.attack {
  animation: heroAttack 520ms cubic-bezier(0.18, 0.82, 0.28, 1);
}

.hero-fighter.attack .hero-sprite {
  background-position: 33.333% 33.333%;
}

.monster-fighter.attack {
  animation: monsterAttack 520ms cubic-bezier(0.18, 0.82, 0.28, 1);
}

.monster-fighter.attack .monster-sprite {
  background-position: 33.333% 33.333%;
}

.fighter.hurt {
  animation: fighterHurt 520ms cubic-bezier(0.18, 0.82, 0.28, 1);
}

.hero-fighter.hurt .hero-sprite {
  background-position: 0 66.666%;
  filter: brightness(1.85) saturate(1.35)
    drop-shadow(1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(-1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 -1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 0 6px rgba(111, 214, 255, 0.42))
    drop-shadow(0 12px 8px rgba(0, 0, 0, 0.36));
}

.monster-fighter.hurt .monster-sprite {
  background-position: 0 66.666%;
  filter: brightness(1.85) saturate(1.35)
    drop-shadow(1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(-1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 -1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 0 6px rgba(111, 214, 255, 0.42))
    drop-shadow(0 12px 8px rgba(0, 0, 0, 0.36));
}

.monster-fighter.defeated .monster-sprite {
  background-position: 100% 100%;
  animation: monsterDefeated 420ms ease forwards;
  filter: grayscale(0.2) brightness(0.82);
  opacity: 0.86;
}

.hero-fighter.defeated {
  animation: heroDefeated 420ms ease forwards;
}

.hero-fighter.defeated .hero-sprite {
  background-position: 100% 100%;
  filter: grayscale(0.2) brightness(0.82);
  opacity: 0.86;
}

.pet-fighter.attack {
  animation: petAssist 520ms cubic-bezier(0.18, 0.82, 0.28, 1);
}

.pet-fighter.guard {
  animation: petGuard 620ms cubic-bezier(0.18, 0.82, 0.28, 1);
}

.match-battle-stage {
  position: relative;
  padding: 0;
}

.match-battle-frame {
  position: relative;
  overflow: hidden;
  border: 3px solid rgba(214, 188, 142, 0.9);
  border-radius: 14px;
  background: url("assets/images/backgrounds/adventure/maps/grade1-morning-meadow.jpg") center center / cover no-repeat;
  box-shadow:
    0 2px 0 rgba(117, 86, 41, 0.16),
    inset 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.match-battle-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.06));
}

.match-hero-status {
  position: absolute;
  top: 8px;
  z-index: 4;
  width: 25%;
}

.match-hero-status {
  left: 14px;
  text-align: left;
}

.match-monster-status {
  position: absolute;
  top: 8px;
  right: 14px;
  z-index: 4;
  width: 25%;
  text-align: right;
}

.match-status-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.match-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 6px;
  border: 2px solid #05070d;
  border-radius: 4px;
  color: #ffffff;
  background: rgba(11, 14, 24, 0.94);
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 900;
  line-height: 1;
  text-shadow:
    1px 0 0 rgba(5, 12, 24, 0.96),
    -1px 0 0 rgba(5, 12, 24, 0.96),
    0 1px 0 rgba(5, 12, 24, 0.96),
    0 -1px 0 rgba(5, 12, 24, 0.96);
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(5, 7, 13, 0.6);
}

.match-hero-status .match-name {
  justify-self: start;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--match-hero-name-height) * 520 / 105 + 8px);
  min-width: 0;
  height: var(--match-hero-name-height);
  min-height: var(--match-hero-name-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #ffffff;
  background: url("assets/images/ui/adventure/small-blue-button.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

.match-monster-status .match-name {
  justify-self: end;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(
    var(--match-hero-name-height) * var(--match-hero-level-scale) * 2152 / 581
  );
  min-width: 0;
  height: calc(var(--match-hero-name-height) * var(--match-hero-level-scale));
  min-height: calc(var(--match-hero-name-height) * var(--match-hero-level-scale));
  aspect-ratio: 2152 / 581;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  color: #ffffff;
  background: url("assets/images/ui/adventure/minion-label-button.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

.match-monster-status.boss .match-name {
  width: calc(
    var(--match-hero-name-height) * var(--match-hero-level-scale) * 2167 / 598
  );
  aspect-ratio: 2167 / 598;
  background-image: url("assets/images/ui/adventure/boss-label-button.png");
}

.match-hero-level {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: calc(var(--match-hero-name-height) * var(--match-hero-level-scale));
  height: calc(var(--match-hero-name-height) * var(--match-hero-level-scale));
  transform: translate(-6px, -50%);
  color: #fff6df;
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(9px, 0.9vw, 11px);
  font-weight: 900;
  line-height: 1;
  text-shadow:
    1px 0 0 rgba(5, 12, 24, 0.96),
    -1px 0 0 rgba(5, 12, 24, 0.96),
    0 1px 0 rgba(5, 12, 24, 0.96),
    0 -1px 0 rgba(5, 12, 24, 0.96);
  pointer-events: none;
  background: url("assets/images/ui/adventure/round-button-left.png") center / 100% 100% no-repeat;
}

.match-hero-text {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: clamp(10px, 0.95vw, 12px);
}

.match-monster-text {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  transform: translateX(10px);
  font-size: clamp(10px, 0.95vw, 12px);
}

.match-hp-track {
  position: relative;
  height: 16px;
  overflow: hidden;
  border: 2px solid #171a28;
  border-radius: 999px;
  background: linear-gradient(180deg, #2b2f49, #141827);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.match-monster-status .match-hp-track {
  margin-top: 2px;
}

.match-hp-fill {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.match-hp-value {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #fffaf0;
  font-size: clamp(9px, 0.85vw, 12px);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  text-shadow:
    1px 0 0 rgba(5, 7, 13, 0.96),
    -1px 0 0 rgba(5, 7, 13, 0.96),
    0 1px 0 rgba(5, 7, 13, 0.96),
    0 -1px 0 rgba(5, 7, 13, 0.96);
}

.hero-fill {
  background: linear-gradient(180deg, #ff687f 0%, #e5173c 55%, #ba1028 100%);
}

.monster-fill {
  background: linear-gradient(180deg, #ff6ca2 0%, #ef2e71 55%, #b31245 100%);
}

.match-boss-button {
  position: absolute;
  top: 4px;
  left: 50%;
  z-index: 5;
  width: 25%;
  max-width: 180px;
  aspect-ratio: 2022 / 577;
  height: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: url("assets/images/ui/adventure/boss-challenge-button.png") center / 100% 100% no-repeat;
  box-shadow: none;
  font-size: 0;
  font-weight: 900;
  line-height: 1;
  transform: translateX(-50%);
}

.match-hero-group {
  position: absolute;
  inset: 0;
  min-height: 0;
}

.fighter {
  position: absolute;
  transform-origin: 50% 100%;
  transition: filter 180ms ease, opacity 260ms ease;
}

.pet-fighter {
  overflow: visible;
  pointer-events: none;
}

.pet-fighter.hidden {
  display: none;
}

.hero-fighter {
  left: 2%;
  bottom: 8px;
  z-index: 3;
}

.pet-fighter {
  left: 20%;
  bottom: 4px;
  z-index: 2;
}

.monster-fighter {
  right: 4%;
  bottom: 6px;
  z-index: 4;
}

.sprite {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: 400% 400%;
}

.hero-sprite {
  background-image: url("assets/images/characters/hero/hero-sprite-sheet.png?v=3");
  background-position: 0 0;
  filter: drop-shadow(1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(-1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 -1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 0 6px rgba(111, 214, 255, 0.42))
    drop-shadow(0 12px 8px rgba(0, 0, 0, 0.36));
}

.monster-sprite {
  background-image: url("assets/images/characters/monsters/monster-slime-sheet-cutout-v3.png?v=3");
  background-position: 0 0;
  filter: drop-shadow(1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(-1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 -1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 0 6px rgba(111, 214, 255, 0.42))
    drop-shadow(0 12px 8px rgba(0, 0, 0, 0.36));
}

.pet-battle-sprite {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: url("assets/images/characters/pets/bubble-octo.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
  transform: scaleX(-1);
  filter: drop-shadow(1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(-1px 0 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 -1px 0 rgba(255, 252, 214, 0.92))
    drop-shadow(0 0 6px rgba(111, 214, 255, 0.42))
    drop-shadow(0 10px 8px rgba(0, 0, 0, 0.36));
}

.pet-battle-name {
  position: absolute;
  left: 50%;
  top: -2px;
  z-index: 8;
  max-width: 132px;
  transform: translateX(-50%);
  border: 2px solid #05070d;
  border-radius: 4px;
  padding: 2px 5px;
  color: #fff4d0;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  background: rgba(18, 25, 38, 0.94);
  box-shadow: 3px 3px 0 #05070d;
}

.app-bottom-tabbar {
  left: 50%;
  right: auto;
  width: min(94.4vw, 53.1svh);
  transform: translateX(-50%);
}

body {
  padding-bottom: calc(82px + env(safe-area-inset-bottom));
}

/*
 * 20. Consolidated responsive policy
 *
 * The rules below are the active responsive policy. All dimension changes
 * should be made through these shared tokens and the current breakpoint rules.
 */
:root {
  --match-page-max-width: 1220px;
  --match-content-max-width: 600px;
  --match-hero-name-height: 24px;
  --match-hero-level-scale: 1.2;
  --match-battle-min-height: 124px;
  --match-fighter-bottom-space: 5%;
  --match-hero-fighter-height: 56px;
  --match-pet-fighter-height: 46px;
  --match-monster-fighter-height: 66px;
  --header-width: 100vw;
  --header-height: 100svh;
  --top-back-width: 16.5%;
  --top-control-height: clamp(28px, 7.16vw, 58px);
  --top-tool-size: 8.7%;
  --match-content-top: calc(2.2svh + var(--top-control-height) * 1.5 + 4px);
  --match-battle-height: 120px;
  --match-board-card-height: 72px;
  --match-board-card-font: 20px;
  --match-board-gap: 12px;
}

.match-adventure-shell {
  width: min(100%, var(--match-page-max-width));
  padding-top: var(--match-content-top);
}

.match-battle-stage,
.match-battle-frame {
  height: max(var(--match-battle-height), var(--match-battle-min-height));
  min-height: var(--match-battle-min-height);
  max-height: none;
}

.match-board-section {
  max-width: var(--match-content-max-width);
}

.match-topbar {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--header-width);
  height: var(--header-height);
  z-index: 21;
  display: block;
  min-height: 0;
  pointer-events: none;
  transform: translateX(-50%);
}

.match-back-button {
  position: absolute;
  left: 2.8%;
  top: 2.2%;
  width: var(--top-back-width);
  height: var(--top-control-height);
  aspect-ratio: 415 / 180;
  display: block;
  padding: 0;
  color: transparent;
  text-decoration: none;
  background: url("assets/images/ui/sentence/back-button.png") center / contain no-repeat;
  pointer-events: auto;
}

.match-title-banner {
  position: absolute;
  left: 50%;
  top: 2.2%;
  width: auto;
  height: calc(var(--top-control-height) * 1.5);
  max-height: none;
  display: block;
  margin: 0;
  transform: translateX(-50%);
}

.match-top-actions {
  display: contents;
}

.match-round-button {
  position: absolute;
  top: 2.1%;
  width: var(--top-tool-size);
  aspect-ratio: 1;
  height: auto;
  padding: 0;
  border: 0;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: auto;
}

.match-guide-button {
  right: 13.6%;
  background-image: url("assets/images/ui/sentence/tutorial-round-button.png");
}

.match-sound-button {
  right: 3.7%;
  background-image: url("assets/images/ui/sentence/sound-round-button.png");
}

.match-sound-button.is-muted {
  filter: grayscale(1);
}

.match-board-grid {
  gap: var(--match-board-gap);
}

.match-card-button {
  min-height: var(--match-board-card-height);
  font-size: var(--match-board-card-font);
}

/* 20.1 Wide width: 1181px and above. */
@media (min-width: 1181px) {
  :root {
    --match-battle-height: 120px;
    --match-board-card-height: 72px;
    --match-board-card-font: 20px;
    --match-board-gap: 12px;
  }
}

/* 20.2 Mid width: 541px-1180px. */
@media (min-width: 541px) and (max-width: 1180px) {
  :root {
    --match-battle-height: 120px;
    --match-board-card-height: 62px;
    --match-board-card-font: 18px;
    --match-board-gap: 10px;
  }
}

/* 20.3 Phone baseline: 540px and below. */
@media (max-width: 540px) {
  :root {
    --match-battle-height: 110px;
    --match-board-card-height: 42px;
    --match-board-card-font: 14px;
    --match-board-gap: 6px;
  }
}

/* 20.4 Short phone: 540px and below, height 700px and below. */
@media (max-width: 540px) and (max-height: 700px) {
  :root {
    --match-battle-height: 100px;
    --match-board-card-height: 38px;
    --match-board-gap: 4px;
  }
}

/* 20.5 Tall phone: 540px and below, height above 700px. */
@media (max-width: 540px) and (min-height: 701px) {
  :root {
    --match-battle-height: 118px;
    --match-board-card-height: 46px;
    --match-board-gap: 7px;
  }
}

/* Runtime fighter sizes are based on the space below the monster HP bar. */
.hero-fighter {
  width: var(--match-hero-fighter-height);
  height: var(--match-hero-fighter-height);
}

.pet-fighter {
  width: var(--match-pet-fighter-height);
  height: var(--match-pet-fighter-height);
}

.monster-fighter {
  width: var(--match-monster-fighter-height);
  height: var(--match-monster-fighter-height);
}

/* Current mobile layout rules. */
@media (max-width: 540px) {
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .match-adventure-shell {
    gap: 6px;
    padding: var(--match-content-top) 6px calc(88px + env(safe-area-inset-bottom));
  }

  .match-board-frame {
    padding: 14px;
    border-width: 4px;
  }

  .match-deck-trigger {
    width: 190px;
    padding-inline: 8px 10px;
  }

  .match-deck-trigger strong {
    font-size: 12px;
  }
}

@media (max-width: 720px) {
  .match-hero-status {
    top: 7px;
    left: 10px;
  }

  .match-monster-status {
    top: 7px;
    right: 10px;
  }

  .match-hp-track {
    height: 14px;
  }

  .hero-fighter {
    bottom: 5px;
  }

  .pet-fighter {
    bottom: 5px;
  }

  .monster-fighter {
    bottom: 5px;
  }
}

@media (max-width: 540px) {
  .match-hero-status {
    left: 8px;
  }

  .match-monster-status {
    right: 8px;
  }

}

@keyframes heroAttack {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }
  46% {
    transform: translateX(52px) scale(1.03);
  }
}

@keyframes monsterAttack {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }
  46% {
    transform: translateX(-44px) scale(1.03);
  }
}

@keyframes fighterHurt {
  0%,
  100% {
    filter: brightness(1);
    transform: translateX(0);
  }
  25% {
    filter: brightness(2.2) saturate(1.4);
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
}

@keyframes monsterDefeated {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(18px) scale(0.82);
  }
}

@keyframes heroDefeated {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(18px) scale(0.82);
  }
}

@keyframes petAssist {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }
  46% {
    transform: translateX(108px) translateY(-8px) scale(1.1);
  }
}

@keyframes petGuard {
  0%,
  100% {
    filter: brightness(1);
    transform: translateX(0) scale(1);
  }
  35% {
    filter: brightness(1.75) saturate(1.25);
    transform: translateX(116px) scale(1.1);
  }
}

@keyframes damageFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.7);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -18px) scale(1.14);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -42px) scale(1);
  }
}

/* Step-by-step tutorial overlay. The four dim panels leave the active target
   uncovered so the highlighted control can still be used when needed. */
.match-guide-overlay.hidden {
  display: none;
}

.match-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  font-family: "Noto Sans SC", "Inter", system-ui, sans-serif;
}

.match-guide-dim {
  position: fixed;
  z-index: 5000;
  pointer-events: auto;
  background: rgba(16, 44, 78, 0.48);
}

.match-guide-spotlight {
  position: fixed;
  z-index: 5001;
  pointer-events: none;
  border: 2px solid rgba(255, 222, 99, 0.98);
  border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9),
    0 0 24px rgba(117, 179, 241, 0.78),
    inset 0 0 18px rgba(255, 255, 255, 0.34);
  animation: matchGuideSpotlightPulse 0.95s ease-in-out infinite alternate;
}

.match-guide-arrow {
  position: fixed;
  z-index: 5003;
  width: 28px;
  height: 28px;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(35, 92, 155, 0.28));
}

.match-guide-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

.match-guide-arrow.up::before {
  border-bottom: 27px solid #6bb6ff;
}

.match-guide-arrow.down::before {
  border-top: 27px solid #6bb6ff;
}

.match-guide-card {
  position: fixed;
  z-index: 5004;
  max-width: calc(100vw - 28px);
  padding: 16px;
  pointer-events: auto;
  border: 2px solid rgba(126, 177, 235, 0.95);
  border-radius: 16px;
  color: #17345f;
  background: #f5fbff;
  box-shadow: 0 18px 34px rgba(37, 92, 150, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.92);
}

.match-guide-step {
  margin: 0 0 4px;
  color: #3b82d6;
  font-size: 12px;
  font-weight: 900;
}

.match-guide-title {
  margin: 0 0 7px;
  color: #1f5ea9;
  font-size: 20px;
  line-height: 1.2;
}

.match-guide-text {
  margin: 0;
  color: #21476f;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.match-guide-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.match-guide-actions button {
  min-height: 36px;
  padding: 7px 14px;
  border: 2px solid rgba(96, 151, 216, 0.9);
  border-radius: 10px;
  color: #1f5ea9;
  background: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.match-guide-next {
  color: #ffffff !important;
  background: #3b82d6 !important;
}

@keyframes matchGuideSpotlightPulse {
  from {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9),
      0 0 18px rgba(117, 179, 241, 0.62),
      inset 0 0 14px rgba(255, 255, 255, 0.28);
  }
  to {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.96),
      0 0 28px rgba(117, 179, 241, 0.9),
      inset 0 0 20px rgba(255, 255, 255, 0.4);
  }
}

@media (max-width: 540px) {
  .match-guide-card {
    padding: 14px;
  }

  .match-guide-title {
    font-size: 18px;
  }

  .match-guide-text {
    font-size: 13px;
  }
}