/* Campaign — world map and zone maps with invisible level hitboxes. */

body.campaign-page { min-height: 100vh; display: flex; flex-direction: column; }
.campaign-main { flex: 1; display: flex; flex-direction: column; }
.campaign-progress { margin-left: auto; }
.topbar .audio-button { background: none; border: 0; font-size: 18px; cursor: pointer; }
.topbar .volume { width: 90px; accent-color: #ff9900; }

/* World view -------------------------------------------------------- */
.world-view { max-width: 1400px; margin: 0 auto; padding: 24px 16px; width: 100%; }
.world-head { text-align: center; margin-bottom: 20px; }
.world-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.zone-card {
  position: relative; border: 0; padding: 0; border-radius: 12px; overflow: hidden;
  cursor: pointer; background: #1c1c24; aspect-ratio: 1880 / 850;
  box-shadow: 0 4px 10px rgba(0,0,0,.35); transition: transform .15s ease, box-shadow .15s ease;
}
.zone-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zone-card:hover:not(.is-locked) { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.zone-card__label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  color: #fff; text-align: left; display: flex; justify-content: space-between; align-items: end; gap: 8px;
}
.zone-card__label strong { font-size: 15px; line-height: 1.2; }
.zone-card__label span { font-size: 12px; opacity: .85; white-space: nowrap; }
.zone-card.is-locked { cursor: default; filter: grayscale(.9) brightness(.55); }
.zone-card.is-locked::after { content: '🔒'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; }
.zone-card.is-current { outline: 3px solid #ffd700; animation: zone-glow 1.6s ease-in-out infinite; }
@keyframes zone-glow { 50% { box-shadow: 0 0 22px 4px rgba(255, 215, 0, .55); } }
.zone-card.is-complete::before {
  content: '✔'; position: absolute; top: 6px; right: 8px; z-index: 2;
  background: #2e7d32; color: #fff; border-radius: 999px; width: 26px; height: 26px;
  display: grid; place-items: center; font-size: 15px; box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.world-foot { display: flex; justify-content: center; margin-top: 22px; }

/* Zone view --------------------------------------------------------- */
.zone-view { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 16px 24px; }
.zone-head { display: flex; align-items: center; gap: 14px; width: min(96vw, 1400px); margin-bottom: 10px; }
.zone-head h1 { margin: 0; font-size: clamp(18px, 2.4vw, 28px); }
.zone-progress { margin-left: auto; font-weight: 700; }

.zone-map {
  position: relative;
  width: min(96vw, calc((100vh - 150px) * 1880 / 850), 1600px);
  aspect-ratio: 1880 / 850;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  background: #223;
}
.zone-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.zone-hitboxes { position: absolute; inset: 0; }

/* Invisible level hitboxes matching the legend rectangles ------------ */
.level-hitbox {
  position: absolute;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 10px;
}
.level-hitbox:hover:not(:disabled), .level-hitbox:focus-visible {
  background: rgba(255, 255, 255, .12);
  outline: 2px solid rgba(255, 255, 255, .6);
  outline-offset: -2px;
}
.level-hitbox:disabled { cursor: default; }
.level-hitbox:disabled::after {
  content: '🔒'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(14px, 2vw, 26px); opacity: .85; text-shadow: 0 1px 4px #000;
}
/* Completion icon */
.level-hitbox.is-complete::before {
  content: '✔';
  position: absolute; top: 4%; right: 4%;
  background: #2e7d32; color: #fff; border-radius: 999px;
  width: clamp(18px, 1.8vw, 30px); height: clamp(18px, 1.8vw, 30px);
  display: grid; place-items: center; font-size: clamp(11px, 1.1vw, 17px);
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
/* Current mission glow */
.level-hitbox.is-current {
  outline: 3px solid #ffd700;
  outline-offset: -3px;
  animation: level-glow 1.5s ease-in-out infinite;
}
@keyframes level-glow {
  50% { box-shadow: inset 0 0 26px rgba(255, 215, 0, .55), 0 0 18px rgba(255, 215, 0, .6); }
}
.level-hitbox.is-boss.is-current { outline-color: #ff5252; }
.level-hitbox.is-boss.is-current { animation-name: boss-glow; }
@keyframes boss-glow {
  50% { box-shadow: inset 0 0 26px rgba(255, 82, 82, .55), 0 0 18px rgba(255, 82, 82, .65); }
}

/* Mission intro / rewards ------------------------------------------- */
.mission-intro .dialog__content { max-width: 560px; }
.reward-dialog .reward-card { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.reward-dialog .reward-card img { max-width: 180px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.4); animation: reward-pop .5s ease; }
@keyframes reward-pop { from { transform: scale(.5) rotate(-6deg); opacity: 0; } 70% { transform: scale(1.08); } to { transform: scale(1); opacity: 1; } }

@media (max-width: 720px) {
  .world-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}


/* Campaign tabs / deck builder ------------------------------------- */
.campaign-tabs { display:flex; justify-content:center; gap:8px; padding:12px 16px 0; }
.campaign-tab { border:1px solid rgba(255,255,255,.18); background:#242432; color:#fff; border-radius:999px; padding:9px 18px; cursor:pointer; font-weight:700; }
.campaign-tab.is-active { background:linear-gradient(135deg,#ff8a00,#ffbf3f); color:#17120a; }
.campaign-deck-view { width:min(1500px,100%); margin:0 auto; padding:24px 16px 40px; }
.deck-builder-head { display:flex; align-items:end; justify-content:space-between; gap:16px; }
.deck-builder-head h1 { margin:.2rem 0; }
.campaign-deck-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:18px; }
.campaign-deck-panel { background:rgba(20,20,30,.82); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:16px; }
.campaign-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); gap:10px; margin:12px 0 18px; }
.campaign-mini-card { position:relative; display:flex; flex-direction:column; gap:5px; border:1px solid rgba(255,255,255,.14); background:#171722; color:#fff; border-radius:10px; padding:6px; text-align:center; overflow:hidden; }
button.campaign-mini-card { cursor:pointer; }
.campaign-mini-card img { width:100%; aspect-ratio:1100/1467; object-fit:cover; border-radius:7px; }
.campaign-mini-card span { font-size:12px; font-weight:700; }
.campaign-mini-card.is-selected { outline:2px solid #ffd54f; }
.campaign-mini-card.is-locked img { filter:grayscale(1) brightness(.35); }
.campaign-category-counts { display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0; }
.campaign-category-counts li { background:#303044; border-radius:999px; padding:5px 9px; font-size:12px; }
@media (max-width:900px){ .campaign-deck-layout{grid-template-columns:1fr;} }

/* Campaign boss trophy cabinet ------------------------------------- */
.boss-trophy-view { width:min(1400px,100%); margin:0 auto; padding:24px 16px 50px; }
.boss-trophy-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.boss-trophy {
  min-height:290px; padding:12px; display:flex; flex-direction:column; align-items:center; text-align:center;
  border:1px solid rgba(255,255,255,.14); border-radius:14px; background:linear-gradient(160deg,rgba(74,48,18,.92),rgba(19,16,14,.96));
}
.boss-trophy img { width:170px; max-width:100%; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 7px 12px rgba(0,0,0,.45)); }
.boss-trophy strong { margin-top:8px; }
.boss-trophy small { color:#ffd27a; }
.boss-trophy.is-locked { background:rgba(20,20,28,.8); }
.boss-trophy.is-locked img { filter:grayscale(1) brightness(.28); }
.boss-trophy--grand { border-color:#ffd86b; background:linear-gradient(160deg,rgba(117,70,9,.98),rgba(35,20,7,.98)); box-shadow:inset 0 0 30px rgba(255,215,84,.18); }
@media(max-width:1100px){ .boss-trophy-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:760px){ .boss-trophy-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }

.campaign-mini-card__preview { display:flex; flex-direction:column; gap:5px; border:0; background:none; color:inherit; padding:0; cursor:pointer; text-align:center; }
.campaign-mini-card__preview:hover img { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.campaign-mini-card__preview img { transition: transform .15s ease, box-shadow .15s ease; }
.campaign-mini-card--interactive { gap:8px; }

.boss-trophy{cursor:pointer}.boss-trophy:focus-visible{outline:3px solid #ffd86b;outline-offset:3px}.campaign-trophy-popup{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:min(86vw,520px)}.campaign-trophy-popup img{width:min(520px,82vw);max-height:68vh;object-fit:contain;filter:drop-shadow(0 18px 26px #0008)}.campaign-trophy-popup.is-locked img{filter:grayscale(1) brightness(.38)}