/* Native pull-to-refresh is available from the battle header. The map and
   card hand keep touch-action: none so their gestures never drag the page. */
.puzzle-root, .puzzle-page { overscroll-behavior: none auto; }
.puzzle-root:has(dialog[open]), .puzzle-page:has(dialog[open]) { overscroll-behavior-y: none; }
.puzzle-page { min-height: 100dvh; background: #100f0f; }
.result-choose { display: block; margin: 8px auto 0; padding: 10px; min-height: 44px; border: 0; background: none; color: var(--gold); font: 400 13px/18px var(--nunito); cursor: pointer; }
.choose-puzzle { position: absolute; top: 2px; left: 7px; z-index: 5; width: 100px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.choose-puzzle img { position: absolute; display: block; pointer-events: none; }
.puzzles-label { position: absolute; left: 43px; top: 10px; color: var(--gold); font: 600 12px/18px var(--nunito); white-space: nowrap; }
.puzzles-icon { position: absolute; left: 0; top: 0; width: 43px; height: 42px; overflow: hidden; pointer-events: none; }
.puzzles-disc { left: 7px; top: 8px; width: 29.05px; height: 27.89px; }
.puzzles-ring { left: 0; top: 0; width: 43px; height: 45.3px; }
.puzzles-arrow { left: 19px; top: 16px; width: 8.55px; height: 7.62px; transform: rotate(225deg); }
.opening-help { font: 400 14px/21px var(--nunito); }
.opening-help strong { color: var(--gold); }
.extra-map-info { position: absolute; z-index: 0; top: 123px; left: 4px; width: 282px; min-height: 44px; pointer-events: none; }
.extra-map-info:not(:has(.attack-preview:not([hidden]))) { display: none; }
.extra-map-info::before { content: ''; position: absolute; z-index: -1; inset: -10px -30px -30px -10px; transform: translateX(15.735px); background: url(assets/v5/extra-map-info.svg) center / 100% 100% no-repeat; }
.attack-preview { box-sizing: border-box; min-height: 44px; margin: 0; padding: 15px 24px; color: var(--parchment); font: 400 12px/14px var(--nunito); text-align: center; }
.attack-preview { padding-left: 32px; padding-right: 16px; }
.attack-preview strong { color: var(--gold-dim); font-weight: 700; }
.extra-map-info-icon { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 23.47px; height: 22.84px; background: url(assets/v6/ring.webp) center / 100% 108% no-repeat, url(assets/v4/card-info-disc.svg) center / 68% 68% no-repeat; color: var(--gold); font: 600 12px/1 var(--nunito); }
.puzzle-canvas {
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 90px;
  width: 100%; min-height: max(100dvh, 540px);
  margin: 0 auto; overflow: clip; background: #1A1616; color: var(--parchment); font-family: var(--nunito);
}
.puzzle-map-viewport {
  position: absolute; z-index: 0; inset: 58px 0 0;
  overflow: visible; touch-action: none; user-select: none; cursor: grab;
}
.puzzle-map-viewport:focus { outline: none; }
.puzzle-map {
  /* Independent insets as percentages of the map image. Tune these to align the grid. */
  --hex-padding-top: 2.2%;
  --hex-padding-right: 1.6%;
  --hex-padding-bottom: 1.875%;
  --hex-padding-left: 1.835%;
  position: absolute; left: 50%; top: 50%; width: 1312px; height: 1027px;
  /* The shared .map class supplies the circular terrain fade and grey backing. */
  transform-origin: center; will-change: transform; container-type: size;
}
.puzzle-grid {
  position: absolute;
  inset: var(--hex-padding-top) var(--hex-padding-right) var(--hex-padding-bottom) var(--hex-padding-left);
  pointer-events: none;
}
.puzzle-hexes { position: absolute; z-index: 0; inset: 0; }
.puzzle-hex { position: absolute; transform: translate(-50%, -50%); container-type: inline-size; opacity: 0; }
.puzzle-hex::before {
  content: ""; position: absolute; inset: -1.72414% -0.24071% -1.72414% 0;
  background: url(assets/hexes/normal.svg?v=1) center / 100% 100% no-repeat;
}
.puzzle-hex.is-highlighted::before { inset: -1.72414% 0; background-image: url(assets/hexes/highlight-v2.svg); }
.puzzle-hex.is-push-destination::before { inset: -1.72414% 0; background-image: url(assets/hexes/highlight-v2.svg); opacity: .55; }
.is-targeting .puzzle-hex.is-push-destination { opacity: 1 !important; }
.puzzle-hex.is-attack-target::before { background-image: url(assets/hexes/attack-v2.svg); }
.puzzle-hex.is-selected::before { display: none; }
.is-targeting .puzzle-hex.is-highlighted { opacity: 1 !important; }
.puzzle-hex.is-drop-target::before { filter: brightness(1.5) drop-shadow(0 0 7px #50e199); }
.hex-target { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; clip-path: polygon(12% 0, 89% 0, 100% 50%, 89% 100%, 12% 100%, 0 50%); }
.hex-target:focus-visible { background: #e4c07344; }
.puzzle-cell-actions { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.puzzle-direction-arrows { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.direction-arrow { position: absolute; display: block; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; }
.direction-arrow img { position: absolute; display: block; max-width: none; transform: translateY(-50%); transform-origin: right center; pointer-events: none; animation: direction-arrow-grow 1400ms ease-in-out infinite; }
.direction-arrow:is(.is-attack, .is-move) img { transform-origin: left center; animation-name: action-arrow-grow; }
.direction-arrow.is-move img { animation-name: move-arrow-grow; }
@keyframes move-arrow-grow {
  0% { transform: translateY(-50%) scale(.08); opacity: .35; }
  65%, 85% { transform: translateY(-50%) scale(1); opacity: 1; }
  100% { transform: translateY(-50%) scale(1); opacity: 0; }
}
@keyframes action-arrow-grow {
  0% { transform: translateY(-50%) scaleX(.08); opacity: .35; }
  65%, 85% { transform: translateY(-50%) scaleX(1); opacity: 1; }
  100% { transform: translateY(-50%) scaleX(1); opacity: 0; }
}
@keyframes direction-arrow-grow {
  0%, 100% { transform: translateY(-50%) scale(.72); opacity: .65; }
  50%, 70% { transform: translateY(-50%) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .direction-arrow img, .direction-arrow:is(.is-attack, .is-move) img { animation: none; }
}
.puzzle-hex-action { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.hex-deploy-arrows { position: absolute; inset: 0; pointer-events: none; animation: deploy-arrows-bounce 750ms ease-in-out infinite alternate; }
.hex-deploy-arrows[hidden] { display: none; }
.hex-deploy-arrows img { position: absolute; top: 0; left: 50%; width: 28%; height: auto; max-width: none; transform: translate(-50%, -50%) rotate(90deg); pointer-events: none; }
.hex-deploy-arrows img:first-child { left: 34%; }
.hex-deploy-arrows img:last-child { left: 66%; }
@keyframes deploy-arrows-bounce {
  from { transform: translateY(-10%); }
  to { transform: translateY(25%); }
}
@media (prefers-reduced-motion: reduce) {
  .hex-deploy-arrows { animation: none; transform: translateY(15%); }
}
.hex-action-icon { inset: auto; left: 50%; top: 50%; width: 35.71429%; height: 68.96552%; transform: translate(-50%, -50%); clip-path: none; }
.hex-action-icon.is-corner { left: 70.71429%; top: -24.13793%; transform: none; }
.hex-action-icon.is-attack { width: 35%; height: 72.86752%; }
.hex-action-art { display: block; position: relative; width: 100%; height: 100%; pointer-events: none; animation: unit-select-float 900ms ease-in-out infinite alternate; }
.hex-action-art img { display: block; position: absolute; pointer-events: none; }
.hex-action-base { left: 6.35%; top: 0; width: 93.65%; height: 100.02%; }
.hex-action-glyph { left: 22.73738%; top: 23.94747%; width: 46.31589%; height: 40.52631%; }
.map-rear-guides { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.rear-edges { position: absolute; width: 140px; height: 58px; transform-origin: top left; }
.rear-line { position: absolute; display: block; }
.rear-line i { position: absolute; display: block; left: 50%; top: 50%; height: 8px; border-radius: 2px; background: #b42529; transform: translate(-50%, -50%); }
.rear-line--top { left: 24px; top: -7px; width: 93px; height: 12px; }
.rear-line--top i { width: 93px; }
.rear-line--left { left: -6.4248px; top: -1.2619px; width: 26.6273px; height: 33.2619px; }
.rear-line--left i { width: 35.136px; height: 7.852px; transform: translate(-50%, -50%) rotate(-54.9deg); }
.rear-line--right { left: 122.0006px; top: 2px; width: 19.602px; height: 26.617px; }
.rear-line--right i { width: 25.998px; transform: translate(-50%, -50%) rotate(61deg); }
.rear-bonus { position: absolute; width: 12px; height: 12px; }
.rear-line--top .rear-bonus { left: 41px; top: 0; }
.rear-line--left .rear-bonus { left: 7.4248px; top: 10.2619px; }
.rear-line--right .rear-bonus { left: 3.9994px; top: 8px; }
.rear-bonus img { display: block; max-width: none; }
.rear-bonus > span { position: absolute; left: 5.5px; top: 7px; transform: translate(-50%, -50%); color: #dcbd88; font: 700 8px/normal var(--trajan); white-space: nowrap; }
.is-attack .hex-action-base { top: 7.09838%; height: 92.29737%; }
.is-attack .hex-action-glyph { left: 30.61224%; top: 30.75965%; width: 34.69388%; height: 40.22416%; }
/* Mobile_Puzzle_V6: two persistent panels and compact header controls. */
.battle-header, .card-hand { z-index: 1; }
.battle-header { position: relative; flex-shrink: 0; width: min(390px, 100%); height: calc(min(100vw, 390px) * 167 / 390); margin-inline: auto; container-type: inline-size; touch-action: pan-y; }
.battle-header-stage { position: relative; width: 390px; height: 167px; }
.battle-brand { position: absolute; z-index: 4; left: 115px; top: 8px; width: 166px; height: 26px; font-family: var(--trajan); text-align: center; white-space: nowrap; text-shadow: var(--shadow); }
.battle-brand::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse, #252525 57%, transparent 72%); }
.battle-brand strong { display: block; font-size: 18px; line-height: 18px; font-weight: 600; color: var(--gold); }
.battle-brand span { display: block; font-size: 10px; line-height: 10px; color: var(--gold-dim); }
.hand-restart { position: absolute; z-index: 4; left: 338px; top: 4px; width: 43px; height: 42px; padding: 0; border: 0; background: none; opacity: 1; overflow: hidden; }
.hand-restart img { position: absolute; display: block; pointer-events: none; }
.restart-disc { left: 5px; top: 4px; width: 32px; height: 31px; }
.restart-ring { left: 0; top: 0; width: 43px; height: 45px; }
.restart-arrow { left: 14px; top: 13px; width: 15px; height: 14px; }
.hand-restart:enabled { cursor: pointer; }
.hand-restart:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }
.battle-help { position: absolute; left: 287px; top: 4px; z-index: 4; width: 43px; height: 42px; padding: 0; border: 0; background: none; opacity: 1; }
.battle-help i { position: absolute; inset: 0; display: grid; place-items: center; background: url(assets/v6/ring.webp) center top / 43px 45px no-repeat, radial-gradient(circle, #27231e 45%, transparent 48%); font: 600 18px/1 var(--trajan); color: var(--gold); }
.choose-puzzle { left: 8px; top: 4px; width: 112px; }
.puzzles-panel { left: 5px; top: 5px; width: 109px; height: 29px; }
.puzzles-label { left: 48px; top: 8px; font-size: 14px; line-height: 21px; }
.enemy-moves { position: absolute; z-index: 2; isolation: isolate; left: 0; top: 48px; width: 390px; height: 119px; pointer-events: none; }
.enemy-moves > :is(.battle-info-panel, .game-status) { pointer-events: auto; }
.battle-info-panel { position: absolute; left: 196px; top: 0; width: 192px; height: 90px; box-sizing: border-box; background: url(assets/victory-v2/email-panel.webp) center / 192px 90px no-repeat; }
.battle-objective { left: 4px; padding: 13px 17px 9px; color: var(--gold); overflow-y: auto; scrollbar-width: thin; }
.battle-objective h1 { margin: 0 0 5px; font: 900 17px/18px var(--trajan); text-transform: uppercase; text-shadow: var(--shadow); }
.battle-objective h1:has(+ .objective-list) { overflow-wrap: anywhere; }
.objective-list { margin: 0; padding: 0; list-style: none; color: var(--gold); font: 400 13px/16px var(--nunito); }
.objective-list .sr-only, .unit-speech .sr-only, .battle-intro .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.battle-objective h1.has-long-title { margin-bottom: 2px; font-size: 13px; line-height: 15px; }
.objective-list li > span:last-child { white-space: nowrap; }
.objective-list li { display: flex; align-items: flex-start; gap: 5px; margin-top: 4px; }
.battle-objective h1.has-long-title + .objective-list li:first-child { margin-top: 0; }
.objective-mark { flex: 0 0 12px; width: 12px; height: 12px; box-sizing: border-box; margin-top: 2px; border: 1px solid currentColor; border-radius: 2px; font: 700 13px/10px var(--nunito); text-align: center; }
.objective-list [data-status="done"] .objective-mark { color: #8ed5a3; }
.objective-list [data-status="failed"] .objective-mark { color: #fa8b73; }
#enemy-moves-title { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--gold); font: 600 16px/22px var(--nunito); }
#enemy-moves-title img { filter: brightness(0) saturate(100%) invert(83%) sepia(22%) saturate(917%) hue-rotate(352deg) brightness(94%) contrast(91%); }
.enemy-move-list { position: absolute; inset: 30px 13px 18px 9px; display: flex; align-items: center; gap: 11px; margin: 0; padding: 0 14px; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; list-style: none; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); touch-action: pan-x; }
.enemy-move-list::-webkit-scrollbar { display: none; }
.enemy-move-list:focus-visible { outline: 1px solid var(--gold); outline-offset: -4px; }
.enemy-move { position: relative; isolation: isolate; flex: 0 0 113px; height: 35px; display: flex; align-items: center; gap: 7px; box-sizing: border-box; padding: 0 5px 0 9px; background: url(assets/v6/next-move.svg) center / 113px 35px no-repeat; }
.enemy-move-icon { display: block; flex: 0 0 27px; width: 27px; height: 20px; object-fit: contain; }
.enemy-move-icon.is-generic { object-fit: contain; }
.enemy-move p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; color: var(--parchment); font: 400 12px/13px var(--nunito); }
.enemy-move-chevron { position: absolute; right: -8px; top: 13px; width: 8px; height: 8px; transform: rotate(-45deg) scaleY(-1); }
.enemy-wave-status { position: absolute; left: 18px; right: 18px; bottom: 1px; margin: 0; color: var(--gold); text-align: center; font: 400 10px/12px var(--nunito); }
.enemy-moves-empty { margin: 3px 16px 0; color: var(--parchment); font: 400 12px/14px var(--nunito); text-align: center; }
.enemy-move p { text-align: center; }
.enemy-move-button { position: absolute; inset: -4px 0; width: 100%; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; touch-action: pan-x; }
.enemy-move-button:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }
.enemy-move-button:disabled { cursor: default; }
.moves-left { position: absolute; left: 4px; top: 90px; width: 108px; height: 29px; box-sizing: border-box; padding-top: 3px; background: url(assets/v6/round-panel.webp) center / 108px 29px no-repeat; color: var(--gold); text-align: center; font: 400 14px/21px var(--nunito); }
.moves-left strong { font-weight: 800; }

/* The 470px Figma composition extends beyond the mobile header. Only the
   browser viewport clips decoration; desktop keeps both sides of the scene. */
.card-hand {
  position: relative; flex-shrink: 0; width: min(390px, 100%);
  height: calc(min(100vw, 390px) * 223 / 390);
  margin: auto auto env(safe-area-inset-bottom, 0px); container-type: inline-size;
  /* Empty space around cards belongs to the game, not native page scrolling. */
  touch-action: none; cursor: grab; user-select: none;
}
/* Move the side controls outward with the viewport from 390px to 720px.
   Keep the card fan's coordinate system and control artwork sizes unchanged. */
.hand-stage { --control-spread: clamp(0px, calc((100vw - 390px) / 2), 165px); position: relative; width: 470px; height: 223px; margin-left: -40px; }
.hand-stage img { display: block; pointer-events: none; }
.hand-background { position: absolute; left: -85px; top: 131px; width: 654px; height: 250px; pointer-events: none; }
.hand-background-oval { position: absolute; left: -10px; top: 25px; }
.hand-background-fog { position: absolute; left: 109px; top: 0; width: 437px; height: 104px; }
.hand-cards {
  /* Fan measurements use the 470px hand-stage coordinate system. Angles are degrees. */
  --card-width: 120px; --card-height: 168px;
  --card-scale: 1.1;
  --selected-scale: 1.2; --selected-lift: 24px; --neighbor-shift: 32px;
  --fan-center-x: 235px; --fan-top: 48px; --fan-width: 390px;
  --fan-radius: 700px; --fan-spacing: 64px; --fan-max-angle: 12;
  position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none;
}
.hand-card { position: absolute; width: var(--card-width); height: var(--card-height); transform-origin: center;
  transform: translate(var(--card-shift-x, 0px), var(--card-lift, 0px)) rotate(var(--fan-angle, 0deg)) scale(var(--selection-scale, 1));
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}
/* Keep the hand free of stacking contexts so only the selected card rises above controls. */
.hand-card.is-selected { isolation: isolate; z-index: calc(var(--hand-count) + 2) !important; }
.card-choice { position: relative; z-index: 1; display: block; pointer-events: auto; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.card-choice { --card-type-color: #746288; }
.card-choice[data-category="movement"] { --card-type-color: #359094; }
.card-choice[data-category="attack"] { --card-type-color: #e32f3b; }
.card-choice[data-category="control"] { --card-type-color: #35944d; }
.card-surface { position: absolute; left: 0; top: 0; width: calc(var(--card-width) / var(--card-scale)); height: calc(var(--card-height) / var(--card-scale)); box-sizing: border-box; transform: scale(var(--card-scale)); transform-origin: top left; overflow: hidden; border: 1.5px solid var(--card-type-color); border-radius: 8px; background: transparent; }
.hand-card .card-choice:not(.is-unaffordable) .card-surface,
.card-drag-preview:not(.is-burning) .card-surface,
.retrieval-preview .card-surface,
.puzzle-popup[data-view="retrieve"] .graveyard-card .card-surface {
  box-shadow: 0 0 0 1px #50e19980, 0 0 4px #48bb8933;
}
@keyframes card-outline-pulse {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .hand-card .card-choice:not(.is-unaffordable) .card-surface,
  .card-drag-preview:not(.is-burning) .card-surface,
  .puzzle-popup[data-view="retrieve"] .graveyard-card .card-surface {
    box-shadow: none;
  }
  /* Fade a separate, fixed glow instead of repainting the printed card's
     box-shadow every frame. Match the scaled surface's rounded corners. */
  .puzzle-canvas:not(.is-tutorial) .hand-card .card-choice:not(.is-unaffordable)::after,
  .card-drag-preview:not(.is-burning) .card-choice::after,
  .puzzle-popup[data-view="retrieve"] .graveyard-card .card-choice::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border-radius: calc(8px * var(--card-scale));
    box-shadow: 0 0 0 calc(1px * var(--card-scale)) #50e199cc, 0 0 calc(6px * var(--card-scale)) #50e19970;
    animation: card-outline-pulse 1.8s ease-in-out infinite;
  }
}
/* CardsV2: category outline, illustration, category bar, decorative overlay, live text. */
.card-outline, .card-overlay, .card-text { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.card-outline { z-index: 0; }
.card-art { position: absolute; z-index: 1; left: 50%; top: 26.48%; width: 84.6%; height: 40.29%; transform: translateX(-50%); object-fit: contain; pointer-events: none; }
.card-bar { position: absolute; z-index: 2; left: 0; right: 0; top: 16.48%; height: 12.38%; background: linear-gradient(#252d2e, #1b353e); pointer-events: none; }
[data-category="attack"] .card-bar { background: linear-gradient(#252121, #44212c); }
[data-category="control"] .card-bar { background: linear-gradient(#252d2e, #1b3e1e); }
[data-category="cards"] .card-bar { background: #252d2e; }
.card-overlay { z-index: 3; }
.card-text { z-index: 4; }
.card-category { position: absolute; left: 9%; right: 9%; top: 22.38%; height: 5.72%; display: flex; align-items: center; justify-content: center; color: #dcc694; font: 900 7.27px/1.1 var(--trajan); text-align: center; }
.card-title { position: absolute; left: 32.13%; right: 7%; top: 4.57%; height: 14.86%; display: flex; align-items: center; color: #dcbd88; font: 900 9.45px/1.1 var(--trajan); text-align: left; text-shadow: .6px .6px .6px #0008; }
.has-long-title .card-title { font-size: 6.75px; }
.card-gem { position: absolute; left: 16.93%; top: 6.48%; width: 12.67%; height: 9.9%; object-fit: contain; }
.card-ap-cost { position: absolute; left: 9%; top: 8.18%; width: 10%; color: #e4c073; font: 600 11.64px/1 var(--trajan); text-align: center; text-shadow: .15px .15px 0 #0004; }
.card-description { position: absolute; left: 8%; right: 8%; top: 62.3%; bottom: 12.1%; display: flex; align-items: center; justify-content: center; color: #2c2220; font: 400 8px/9px var(--nunito); text-align: center; overflow-wrap: anywhere; }
.card-reuse { position: absolute; inset: 0; color: #2c2220; pointer-events: none; }
/* Equal pixel insets on a 750 × 1050 card: 9.73% of width = 6.95% of height. */
.card-reuse-hint { position: absolute; right: 9.73%; bottom: 6.95%; width: 14.27%; height: 7.952%; }
.card-reuse-icon { display: block; width: 100%; height: auto; }
.card-choice:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }
.game-status, .game-noscript { position: absolute; z-index: 2; left: 95px; top: 105px; width: 280px; margin: 0; text-align: center; font: 400 14px/20px var(--nunito); color: var(--gold); }
.game-status p { margin: 0 0 12px; }
.game-status button { padding: 6px 18px; border: 1px solid var(--gold-dim); border-radius: 3px; background: var(--ink); color: var(--gold); font: inherit; cursor: pointer; }
.enemy-moves .game-status { z-index: 3; left: 20px; top: 39px; width: 350px; }
.puzzle-canvas[data-game-state="complete"] .game-status:not([hidden]) { left: 4px; top: 30px; width: 381px; height: 52px; box-sizing: border-box; padding-inline: 12px; display: grid; place-items: center; }
.enemy-moves .game-status p { margin: 0; }
.enemy-moves .game-status button { margin-top: 6px; }
.enemy-moves:has(.game-status:not([hidden])) > :is(.battle-info-panel, .moves-left, .battle-tabs) { display: none; }
/* Gems spent on cards move from the left pile; round rewards fly back to it. */
.action-points { position: absolute; z-index: calc(var(--hand-count) + 1); left: calc(45px - var(--control-spread)); top: 147px; width: 77px; height: 65px; pointer-events: none; }
.action-points img, .hand-end-round > img { position: absolute; }
.action-points .action-disc { left: 9px; top: 9px; width: 48px; height: 45px; }
.action-points .action-ring { left: 0; top: 0; width: 67px; height: 70px; }
.ap-value { position: absolute; left: 14px; top: 19px; width: 38px; text-align: center; color: var(--gold); font: 600 30px/30px var(--trajan); text-shadow: var(--shadow); }
.ap-value.is-empty { color: #999; }
.gem-pile { position: absolute; display: block; width: 29px; height: 59px; pointer-events: none; }
.counter-gems { left: 49px; top: 5px; }
.gem-pile img { position: absolute; width: 28px; height: 31px; left: 0; transform: rotate(-5deg); }
.action-control { position: absolute; z-index: calc(var(--hand-count) + 1); left: calc(249px + var(--control-spread)); top: 135px; width: 183.009px; height: 83px; }
.hand-end-round { position: absolute; inset: 0; width: 183.009px; height: 83px; padding: 0; border: 0; background: none; color: var(--gold); opacity: 1; text-align: left; }
.hand-end-round .end-round-panel { left: 20px; top: 0; width: 149px; height: 69px; object-fit: cover; }
/* NewNextRoundBtn wraps the same FinishTurnBtn artwork and live text. */
.finish-turn-button { position: absolute; left: 0; top: 26px; width: 183.009px; height: 57px; }
.finish-turn-frame { position: absolute; left: 0; top: 0; width: 174px; height: 57px; background: url(assets/rule-panel.webp) -10px 4px / 178px 48px no-repeat; mask: url(assets/v6/finish-turn-mask.svg) 0 0 / 174px 57px no-repeat; }
.hand-end-round .end-round-button-art { position: absolute; left: 11px; top: 11px; }
.hand-end-round .end-round-label { position: absolute; left: 22px; top: 16px; width: 104px; font: 700 16px/.91 var(--trajan); color: #232323; opacity: .9; text-shadow: 1px -.5px #ffe3b3; text-align: center; white-space: nowrap; }
.end-round-progress { position: absolute; left: 74px; top: 27px; width: 52px; color: #38342a; font: 500 11px/1.5 var(--nunito); text-align: center; white-space: nowrap; }
.is-final-round .end-round-label { left: 20px; width: 107px; }
.is-final-round .end-round-progress { left: 75px; }
.finish-turn-disc { position: absolute; left: 138.604px; top: 13.027px; width: 35.811px; height: 34.378px; transform: scaleX(-1); }
.finish-turn-disc img { transform: scale(.778496, .763964); transform-origin: top left; }
.finish-turn-ring { position: absolute; left: 130.009px; top: 3px; width: 53px; height: 51.568px; overflow: hidden; transform: scaleX(-1); }
.finish-turn-ring img { width: 52.947px; height: 55.622px; }
.finish-turn-arrow { position: absolute; left: 149.009px; top: 21px; width: 13px; height: 13px; transform: rotate(90deg); }
.finish-turn-arrow img { position: absolute; left: .871px; top: 0; }
.hand-end-round:not(:disabled) { cursor: pointer; }
.hand-end-round:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }
.round-rewards { position: absolute; inset: 0 0 0 17px; pointer-events: none; color: #e4c073; text-shadow: 1px 1px #0004; }
.round-gems { position: absolute; left: 0; top: 5px; width: 34px; height: 24px; }
.round-gems img { position: absolute; top: 0; width: 21.1px; height: 23.1px; transform: rotate(.39deg); }
.round-gem-gain { position: absolute; left: 29px; top: 11px; width: 21px; font: 600 16px/1 var(--trajan); text-align: center; }
.round-card-reward { position: absolute; left: 59px; top: 6.3px; width: 80px; height: 21px; }
.round-card-reward img { position: absolute; left: 0; top: 0; }
.round-card-reward > span { position: absolute; left: 22px; top: 4.7px; width: 58px; font: 600 11px/16px var(--trajan); text-align: left; white-space: nowrap; }
.round-card-reward strong { font-size: 16px; font-weight: 600; }
/* Center a lone reward on the backing panel (77.5px within .round-rewards). */
.round-rewards:has(.round-card-reward[hidden]) .round-gems { left: 50.5px; }
.round-rewards:has(.round-card-reward[hidden]) .round-gem-gain { left: 83.5px; }
.round-rewards:has(.round-gems[hidden]) .round-card-reward { left: 37.5px; }
.action-control.has-no-rewards :is(.round-rewards, .end-round-panel) { visibility: hidden; }
.action-control.is-exhausted .end-round-button-art { animation: end-round-glow-pulse 1600ms ease-in-out infinite; }
@keyframes end-round-glow-pulse { 0%, 100% { filter: brightness(1) var(--important-button-glow); } 50% { filter: brightness(1.2) var(--important-button-glow); } }
.gem-flight { position: fixed; z-index: 40; width: 28px; height: 31px; pointer-events: none; filter: drop-shadow(0 0 5px #e4a132); }
.card-selection-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.card-ux-info { position: absolute; z-index: 0; left: 50%; bottom: calc(100% - 1px / var(--selected-scale)); box-sizing: border-box; width: 162px; min-height: 44px; display: grid; gap: 2px; padding: 8px 14px; transform: translateX(-50%) scale(calc(1 / var(--selected-scale))); transform-origin: center bottom; color: var(--parchment); pointer-events: none; }
.card-ux-info[hidden] { display: none; }
.card-ux-info { border: 1px solid #977f53; border-radius: 9px; background: linear-gradient(#1a1616, #121111); box-shadow: 10px 10px 20px #0004; }
.card-info-title, .card-info-detail { position: relative; margin: 0; text-align: center; font: 400 12px/14px var(--nunito); overflow-wrap: anywhere; }
.card-info-detail strong { color: var(--gold-dim); font-weight: 700; }

@media (max-width: 389px) {
  .hand-stage { margin-left: calc((100% - 470px) / 2); transform: scale(calc(100cqw / 390px)); transform-origin: 235px 0; }
}
@media (max-width: 389px) {
  .battle-header-stage { transform: scale(calc(100cqw / 390px)); transform-origin: top left; }
}

/* Wider desktops enlarge the existing compositions together; short windows
   cap the scale so the armies still have room between the HUD and hand. */
@media (min-width: 721px) {
  .puzzle-canvas { --battle-ui-width: clamp(390px, min(calc(390px + (100vw - 720px) * .22), 65dvh), 546px); }
  .battle-header, .card-hand { width: var(--battle-ui-width); }
  .battle-header { height: calc(var(--battle-ui-width) * 167 / 390); }
  .card-hand { height: calc(var(--battle-ui-width) * 223 / 390); }
  .battle-header-stage { transform: scale(calc(100cqw / 390px)); transform-origin: top left; }
  .hand-stage { margin-left: calc((100% - 470px) / 2); transform: scale(calc(100cqw / 390px)); transform-origin: 235px 0; }
}

/* CommanderMapIcon shares the padded map coordinates and scales with zoom. */
.puzzle-commanders { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.map-commander { position: absolute; width: 7.3473%; aspect-ratio: 56.9416 / 55.0563; transform: translate(-50%, -50%); container-type: inline-size; transition: left 320ms ease-in-out, top 320ms ease-in-out; }
.commander-stage { position: relative; width: 56.9416px; height: 55.0563px; transform: scale(calc(100cqw / 56.9416px)); transform-origin: top left; }
.commander-toggle { position: absolute; inset: 0; width: 56.9416px; height: 55.0563px; border: 0; padding: 0; background: none; pointer-events: auto; cursor: pointer; }
.commander-artwork { position: absolute; inset: 0; display: block; pointer-events: none; }
.commander-artwork > * { position: absolute; display: block; pointer-events: none; }
.map-commander.is-selectable .commander-artwork { animation: unit-select-float 900ms ease-in-out infinite alternate; }
.commander-disc { left: 0; top: 0; width: 54.75px; height: 54.75px; background: url(assets/units/commander-disc.svg) center / contain no-repeat; }
.commander-ring { left: 0; top: .25px; width: 56.887px; height: 59.115px; clip-path: inset(0 0 4.31px); }
.commander-rim { left: -3px; top: -5px; width: 84.248px; height: 84.248px; background: url(assets/units/commander-rim.svg) center / contain no-repeat; }
.commander-portrait { left: 10.51px; top: 8.5095px; width: 37.2294px; height: 37.2294px; border-radius: 50%; object-fit: cover; }
.commander-nameplate, .commander-name, .commander-index { display: none; }
.map-token { -webkit-tap-highlight-color: transparent; }
.map-token:focus { outline: none; }
.map-tooltip { position: fixed; z-index: 3; box-sizing: border-box; width: max-content; max-width: min(250px, calc(100vw - 24px)); padding: 9px 12px; border: 1px solid var(--gold-dim); border-radius: 12px; background: #181515f2; box-shadow: 0 3px 12px #0008; text-align: center; pointer-events: auto; }
.map-tooltip[hidden] { display: none; }
.map-tooltip::after { content: ''; position: absolute; left: var(--speech-tail, 50%); bottom: -6px; width: 10px; height: 10px; border-right: 1px solid var(--gold-dim); border-bottom: 1px solid var(--gold-dim); background: inherit; transform: translateX(-50%) rotate(45deg); }
.map-tooltip p { margin: 0; font: 400 12px/16px var(--nunito); }
.unit-details p:first-child, .commander-effect { color: var(--gold); }
.unit-details, .commander-description { color: var(--parchment); }

/* V4 pile counters face inward. */
.card-pile { position: absolute; z-index: 2; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms ease, visibility 0s linear 220ms; }
.card-pile.has-cards, .deck-pile.has-deck { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.has-round-arrivals .hand-card { transition: none; }
.has-round-arrivals .end-round-label { font-size: 14px; }
.hand-card.is-round-arriving { visibility: hidden; }
.card-drag-preview.round-card-flight { z-index: 25; transform-origin: center; }
.card-pile img { position: absolute; }
.deck-pile { left: calc(25px - var(--control-spread)); top: -52px; width: 89px; height: 76px; }
.round-card-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.graveyard-pile { left: calc(355px + var(--control-spread)); top: -52px; width: 90px; height: 76px; }
.pile-base { left: 0; top: 0; width: 78px; height: 76px; }
.deck-art { position: absolute; left: 7px; top: 1px; width: 79px; height: 74px; overflow: hidden; filter: drop-shadow(4px 4px 4px #0008); }
.deck-art img { left: 0; top: 0; width: 84.85px; height: 84.71px; }
.graveyard-pile .pile-base { left: 12px; filter: drop-shadow(6px 6px 5px #0008); }
.graveyard-art { width: 33.645px; height: 47.103px; }
.graveyard-art.first { left: 32.27px; top: 7.77px; transform: rotate(-104.94deg); }
.graveyard-art.second { left: 34.21px; top: 16.34px; transform: rotate(-96.32deg); }
.graveyard-art.third { left: 36.52px; top: 13.55px; transform: rotate(-15deg); filter: drop-shadow(-4px -4px 4px #0008); }
.pile-counter { position: absolute; top: 18px; width: 37px; height: 36px; background: url(assets/v6/ring.webp) center top / 100% 108% no-repeat, url(assets/v4/action-disc.svg) 6px 7px / 25px 24px no-repeat; }
.pile-counter strong { position: absolute; left: 5px; top: 11px; width: 27px; text-align: center; color: var(--gold); font: 600 18px/18px var(--trajan); }
.deck-pile .pile-counter { left: 52px; }
.graveyard-pile .pile-counter { left: 0; }
.deck-pile, .graveyard-pile { padding: 0; border: 0; background: none; }
.deck-pile:enabled, .graveyard-pile:enabled, .battle-help { cursor: pointer; }
.deck-pile:focus-visible, .graveyard-pile:focus-visible, .battle-help:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }

/* Popup_How to play / Popup_Graveyard share the Figma frame and native modal focus. */
.has-puzzle-popup { overflow: hidden; }
.puzzle-popup {
  position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
  color: var(--parchment); font-family: var(--nunito);
}
.puzzle-popup[open] { display: grid; place-items: center; }
.puzzle-popup::backdrop { background: #0008; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.popup-stage { position: relative; width: min(390px, 100%); height: min(663px, 100dvh); pointer-events: none; }
.popup-panel {
  position: absolute; left: 4.6154%; right: 5.8974%; top: 50%; transform: translateY(-50%); height: min(462px, calc(100% - 84px));
  box-sizing: border-box; border: 1px solid #977f53; background: linear-gradient(#1a1616, #121111);
  box-shadow: 10px 10px 20px #0004; pointer-events: auto;
}
.puzzle-popup[data-view="help"] .popup-panel { height: calc(100% - 84px); }
.puzzle-popup[data-view="error"] .popup-panel { height: min(280px, calc(100% - 84px)); }
.puzzle-popup[data-view="error"] .popup-scroll { padding-inline: 29px; }
.popup-error { font: 400 14px/21px var(--nunito); }
.puzzle-popup[data-view="enemy-move"] .popup-scroll { top: 80px; padding: 0 25px 24px; }
.enemy-move-content { font: 400 14px/21px var(--nunito); }
.enemy-move-content h3 { margin: 0 0 12px; color: var(--gold); font: 700 17px/22px var(--nunito); }
.enemy-move-content p { margin: 0 0 16px; }
.enemy-move-content p:first-of-type { color: var(--gold-dim); }
.enemy-move-content p:last-child { margin-bottom: 0; }
.popup-error p { margin: 0 0 16px; }
.popup-error p:last-child { color: var(--gold-dim); }
.puzzle-popup[data-view="result"] .popup-panel { height: min(280px, calc(100% - 84px)); }
.puzzle-popup[data-view="result"] .popup-scroll { top: 85px; padding-inline: 29px; }
.popup-result { text-align: center; font: 400 16px/24px var(--nunito); }
.popup-result p { margin: 0 0 24px; }
.result-restart { min-height: 44px; padding: 12px 32px; border: 1px solid var(--gold-dim); border-radius: 4px; background: var(--ink); color: var(--gold); font: 600 16px/20px var(--trajan); cursor: pointer; }
.result-restart:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }
.popup-title { position: absolute; left: 30px; right: 30px; top: 34px; margin: 0; color: var(--gold); font: 600 22px/1 var(--trajan); text-align: center; text-shadow: var(--shadow); }
.popup-description { position: absolute; left: 33px; right: 23px; top: 65px; margin: 0; font: 400 14px/21px var(--nunito); }
.popup-description strong, .how-to-play-content strong { color: #a98236; font-weight: 700; }
.popup-brand { position: absolute; left: 20px; right: 20px; top: 26px; text-align: center; font-family: var(--trajan); }
.popup-brand strong { display: block; color: var(--gold); font-size: 22px; font-weight: 600; line-height: 22px; text-shadow: var(--shadow); }
.popup-brand span { display: block; margin-top: 3px; color: var(--gold-dim); font-size: 12px; line-height: 12px; }
.popup-divider { position: absolute; top: 62px; left: 6px; width: calc(100% - 12px); height: 22px; pointer-events: none; background: url(assets/popups/divider.svg) left 14px / 100% 1px no-repeat; }
.popup-divider img { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 65px; height: 22px; object-fit: cover; object-position: bottom; }
.puzzle-popup[data-view="help"] .popup-title { top: 98px; left: 42px; text-align: left; }
.popup-scroll {
  position: absolute; left: -1px; right: -1px; top: 102px; bottom: 0; padding: 12px 12px 28px;
  box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  mask-image: linear-gradient(#000 calc(100% - 22px), transparent); scrollbar-width: none;
}
.popup-scroll::-webkit-scrollbar { display: none; }
.puzzle-popup[data-view="deck"] .popup-scroll { mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 22px), transparent); }
.popup-scroll-indicator { position: absolute; right: -3px; width: 4px; background: #968063; pointer-events: none; }
.popup-scroll:focus-visible { outline: 1px solid var(--gold-dim); outline-offset: -6px; }
.puzzle-popup[data-view="help"] .popup-scroll { top: 137px; padding: 0 29px 28px; }
.how-to-play-content { font: 400 14px/21px var(--nunito); }
.how-to-play-content p { margin: 0 0 18px; }
.how-to-play-content p:last-child { margin-bottom: 0; }
.graveyard-cards { display: grid; grid-template-columns: repeat(2, 109.28px); gap: 14px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.graveyard-cards[hidden] { display: none; }
.graveyard-card { width: 109.28px; height: 153px; --card-width: 120px; --card-height: 168px; --card-scale: 1.1; }
.graveyard-card .card-choice { width: 120px; height: 168px; transform: scale(.91067); transform-origin: top left; cursor: default; touch-action: pan-y; }
.deck-card { position: relative; height: 178px; }
.deck-card.is-depleted .card-choice { opacity: .5; }
.deck-card-count { position: absolute; top: 157px; left: 0; width: 100%; color: var(--gold); font: 800 14px/20px var(--nunito); text-align: center; }
.retrieval-preview { position: fixed; z-index: 25; margin: 0; list-style: none; pointer-events: none; transform-origin: center; filter: drop-shadow(0 8px 14px #0009); }
.retrieval-preview .card-choice { pointer-events: none; }
.puzzle-popup[data-view="retrieve"] .graveyard-card .card-choice { cursor: pointer; }
.puzzle-popup[data-view="retrieve"] .graveyard-card .card-choice:hover .card-surface { filter: brightness(1.12); }
.graveyard-empty { margin: 34px 15px; text-align: center; font: 400 14px/21px var(--nunito); }

@media (prefers-reduced-motion: reduce) {
  .hand-card, .card-pile { transition: none; }
}

/* Full-width SliderCardsViwer, anchored outside the scaled hand stage. */
.hand-slider { position: fixed; z-index: 4; left: 0; bottom: 0; width: 100%; height: 16px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; touch-action: none; }
.hand-slider::-webkit-slider-runnable-track { height: 3px; border-radius: 0; background: #1e1e1e; transform: translateY(6.5px); }
.hand-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 65.2175%; height: 3px; border: 0; border-radius: 0; background: #968063; }
.hand-slider::-moz-range-track { height: 3px; border-radius: 0; background: #1e1e1e; transform: translateY(6.5px); }
.hand-slider::-moz-range-thumb { width: 65.2175%; height: 3px; border: 0; border-radius: 0; background: #968063; transform: translateY(6.5px); }
.hand-slider:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.hand-slider:disabled { visibility: hidden; }

.enemy-move-list[hidden] { display: none; }

.hand-card.is-picked-up { opacity: 0; pointer-events: none; }
.hand-card.is-picked-up .card-choice { pointer-events: none; }
.card-drag-preview { position: fixed; z-index: 20; pointer-events: none; transform-origin: center; filter: drop-shadow(0 5px 10px #0009); }
.card-drag-preview .card-choice { pointer-events: none; }
.card-target-drag { position: fixed; z-index: 20; inset: 0; width: 100%; height: 100%; pointer-events: none; color: #9ca3af; filter: drop-shadow(0 2px 3px #000b); }
.card-target-curve { fill: none; stroke: none; }
.card-target-trail { fill: currentColor; }
.card-target-circle { fill: #17141140; stroke: currentColor; stroke-width: 2.5; }
.card-target-dot { fill: currentColor; }
.card-target-drag.is-ready { color: #50e199; }

.card-drop-zone { position: fixed; z-index: 10; box-sizing: border-box; inset: 0 0 50%; border-bottom: 1px dashed #a98236; background: linear-gradient(transparent 50%, #a9823626); color: #ead5a8; font: 600 14px/20px var(--nunito); padding: 0 12px 12px; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; text-shadow: 0 1px 3px #000; }
.card-drop-zone[hidden] { display: none; }
.card-drop-zone.is-ready { border-color: #50e199; background: linear-gradient(transparent 50%, #50e19930); }

.card-choice.is-unaffordable .card-surface { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .puzzle-canvas *, .puzzle-canvas *::before, .puzzle-canvas *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* Token taps open details; pointer drags continue to pan the map. */
.unit-toggle { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: none; pointer-events: auto; cursor: pointer; }
.unit-details { overflow-wrap: anywhere; }
.map-unit:has(.map-token[aria-expanded="true"]) { z-index: 3; }
.puzzle-units:has(.map-token[aria-expanded="true"]) { z-index: 3; }

.card-drag-preview.is-burning { filter: sepia(.5) saturate(2) drop-shadow(0 0 12px #fa6420); }
@media (prefers-reduced-motion: reduce) {
  .what-to-do, .map-unit, .map-commander { transition: none; }
  .map-unit.is-selectable .map-unit-content, .map-commander.is-selectable .commander-artwork, .hex-action-art { animation: none; }
}

/* Mobile_BattleIntro3: 390 × 664 composition with independently scrolling armies. */
.puzzle-popup[data-view="intro"] { --intro-scale: min(1, calc(100vw / 390px), calc(100dvh / 664px)); overflow-y: auto; }
.puzzle-popup[data-view="intro"][open] { grid-template-columns: minmax(0, 1fr); align-items: safe center; }
.puzzle-popup[data-view="intro"] .popup-stage { min-width: 0; width: calc(390px * var(--intro-scale)); height: calc(664px * var(--intro-scale)); margin: 0; }
.puzzle-popup[data-view="intro"] .popup-panel { inset: 0 auto auto 0; width: 390px; height: 664px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; transform: scale(var(--intro-scale)); transform-origin: top left; }
.puzzle-popup[data-view="intro"] .popup-panel::before { content: ''; position: absolute; left: 21px; top: 29px; width: 349px; height: 449px; box-sizing: border-box; border: 1px solid #977f53; background: linear-gradient(#1a1616, #121111); box-shadow: 10px 10px 20px #0004; }
.puzzle-popup[data-view="intro"] .popup-title { z-index: 1; left: 43px; right: 43px; top: 54px; padding-bottom: 9px; font-size: var(--intro-title-size, 22px); line-height: 22px; white-space: nowrap; }
.puzzle-popup[data-view="intro"] .popup-title::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 194px; height: 4px; transform: translateX(-50%); background: url(assets/intro/title-separator.svg) center no-repeat; }
.puzzle-popup[data-view="intro"] .popup-banner { left: 13px; top: 18px; width: 364px; height: 121px; }
.puzzle-popup[data-view="intro"] .popup-banner-eagle { width: 100px; height: 34px; top: 0; }
.puzzle-popup[data-view="intro"] .popup-close { z-index: 3; left: 333px; right: auto; top: 11px; }
.battle-intro { position: absolute; inset: 0; }
.battle-intro::before { content: ''; position: absolute; z-index: 1; left: 14px; top: 220px; width: 363px; height: 433px; box-sizing: border-box; border: 1px solid #977f53; border-radius: 10px; background: linear-gradient(#1a1616, #252525 49%, #121111); box-shadow: 10px 10px 20px #0004; }
.battle-intro[hidden], .intro-start[hidden], .intro-tab-content [hidden] { display: none; }
.intro-tabs { position: absolute; left: 11px; top: 177px; width: 366px; height: 70px; display: grid; grid-template-columns: 189px 177px; }
.intro-tab { position: relative; isolation: isolate; display: flex; align-items: flex-start; justify-content: center; gap: 8px; padding: 14px 0 0; border: 0; background: none; color: var(--gold); font: 700 16px/25px var(--nunito); cursor: pointer; }
.intro-tab::before { content: ''; position: absolute; z-index: -1; inset: 5px 2px -15px 5px; background: url(assets/victory-v2/email-panel.webp) center / 100% 100% no-repeat; }
.intro-tab[aria-selected="true"] { color: #1a1616; }
.intro-tab[aria-selected="true"]::before { inset: 0; background-image: url(assets/scroll.webp); transform: scaleX(-1); }
.intro-tab img { flex: none; object-fit: contain; }
.intro-lore-icon { margin-top: 3px; }
.intro-tab[aria-selected="true"] .intro-lore-icon { filter: brightness(.15); }
.intro-tab[aria-selected="false"] .intro-overview-icon { filter: invert(79%) sepia(35%) saturate(658%) hue-rotate(356deg); }
.intro-tab-content { position: absolute; z-index: 1; left: 30px; top: 240px; width: 330px; height: 316px; }
.intro-overview { display: flex; flex-direction: column; height: 100%; }
.intro-objective { position: absolute; left: 44px; top: 91px; box-sizing: border-box; width: 311px; height: 84px; padding: 9px 15px 7px; background: url(assets/rule-panel.webp) center / 100% 100% no-repeat; }
.intro-objective h3 { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 4px; color: var(--gold); font: 700 18px/20px var(--trajan); }
.intro-objective h3::before, .intro-objective h3::after { content: ''; width: 46px; height: 2px; background: url(assets/intro/objective-accent.svg) center no-repeat; }
.intro-objective h3::before { transform: scaleX(-1); }
#intro-objective-text { width: fit-content; max-width: 100%; height: 46px; overflow-y: auto; scrollbar-width: thin; margin: 0 auto; padding: 0; list-style: none; color: var(--gold); font: 400 12px/17px var(--nunito); }
.intro-objective.is-long #intro-objective-text { font-size: 11px; line-height: 13px; }
#intro-objective-text li { position: relative; max-width: 100%; box-sizing: border-box; padding-left: 19px; }
#intro-objective-text li + li { margin-top: 2px; }
#intro-objective-text li::before { content: ''; position: absolute; left: 0; top: 3px; box-sizing: border-box; width: 12px; height: 12px; border: 1px solid var(--gold); border-radius: 1px; }
.intro-armies { position: relative; flex: 0 0 193px; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.intro-armies::before { content: ''; position: absolute; left: 171px; top: 61px; bottom: -8px; width: 1px; background: linear-gradient(#977f53, #977f5300); }
.intro-versus { position: absolute; left: 171px; top: 20px; transform: translateX(-50%); color: var(--gold); font: 600 20px/30px var(--trajan); }
.intro-army { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.intro-army header { position: relative; flex: 0 0 67px; }
.intro-army header::before, .intro-army header::after { content: ''; position: absolute; right: 0; top: 5px; width: 140px; height: 1px; background: url(assets/intro/army-separator.svg) center / 100% 100% no-repeat; transform: rotate(180deg); }
.intro-army header::after { top: 57px; }
.intro-faction { position: relative; display: grid; grid-template-columns: 67px minmax(0, 1fr); align-items: center; gap: 4px; height: 66px; }
.intro-faction--dacian { grid-template-columns: minmax(0, 1fr) 67px; text-align: right; }
.intro-faction--dacian .intro-portrait { grid-column: 2; grid-row: 1; }
.intro-faction--dacian > div:last-child { grid-column: 1; grid-row: 1; }
.intro-portrait { position: relative; width: 67px; height: 66px; background: center / contain no-repeat; }
.intro-portrait--roman { background-image: url(assets/intro/romans-background.webp?v=3); }
.intro-portrait--dacian { background-image: url(assets/intro/dacians-background.webp?v=3); }
.intro-you { position: absolute; z-index: 1; left: 10px; top: -8px; width: 47px; height: 26px; display: grid; place-items: center; color: #232323; font: 700 14px/1 var(--trajan); text-shadow: 1px -.5px #ffe3b3; }
.intro-you::before { content: ''; position: absolute; z-index: -1; left: -10px; top: -10px; width: 87px; height: 66px; background: url(assets/intro/you-label.svg) center / contain no-repeat; }
.intro-faction-name { color: var(--gold); font: 700 14px/18px var(--trajan); }
.intro-faction--dacian .intro-faction-name { color: #dc2951; }
.intro-army-count { margin: 0; color: var(--parchment); font: 400 10px/15px var(--nunito); }
.intro-army-count span, .intro-army-count strong { display: block; }
.intro-army-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: none; user-select: none; cursor: grab; scrollbar-width: thin; scrollbar-color: #968063 transparent; mask-image: linear-gradient(transparent, #000 5px, #000 calc(100% - 5px), transparent); }
.intro-army-scroll.is-dragging { cursor: grabbing; }
.intro-units { display: flow-root; margin: 0; padding: 8px 0 0; list-style: none; }
.intro-unit { position: relative; container-type: inline-size; width: 100%; max-width: 136px; aspect-ratio: 147 / 70; margin: 0 auto 2px; }
.intro-commander { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 4px; margin: 3px 2px 2px; padding: 5px; border: 1px solid #977f53; border-radius: 4px; background: linear-gradient(#30271e, #1b1816); box-shadow: inset 0 0 0 2px #12111188; text-align: left; color: var(--parchment); }
.intro-commander-token { grid-row: span 2; position: relative; display: block; width: 46px; height: 45px; }
.intro-commander-token .commander-artwork { width: 56.9416px; height: 55.0563px; transform: scale(.8); transform-origin: top left; }
.intro-commander > strong { align-self: end; color: var(--gold); font: 700 12px/16px var(--trajan); }
.intro-commander-role { grid-column: 2; font: 400 11px/16px var(--nunito); }
.intro-commander p { grid-column: 1 / -1; text-align: center; margin: 5px 0 0; padding: 5px 0 0; border-top: 1px solid #977f5366; font: 400 11px/15px var(--nunito); }
.intro-briefing { flex: none; padding: 0 10px; }
.intro-section-heading, .intro-round-badge { display: flex; align-items: center; gap: 9px; height: 24px; }
.intro-section-heading h3, .intro-round-badge h3 { display: flex; align-items: center; gap: 12px; flex: 1; margin: 0; color: var(--gold); font: 700 12px/16px var(--trajan); white-space: nowrap; }
.intro-section-heading h3::after, .intro-round-badge h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #977f53, #977f5333); }
.intro-card-count, .intro-rounds { color: var(--parchment); font: 800 16px/24px var(--nunito); white-space: nowrap; }
.intro-starting-cards { margin: 0; }
.intro-card-previews { display: flex; gap: 14px; isolation: isolate; margin: 5px 0 0; padding: 3px 3px 4px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #968063 transparent; }
.intro-card-previews li { position: relative; container-type: inline-size; flex: 0 0 calc(87px * 5 / 7); min-width: 0; aspect-ratio: 5 / 7; --card-width: 120px; --card-height: 168px; --card-scale: 1.1; }
.intro-card-previews .card-choice { position: absolute; left: 0; top: 0; width: 120px; height: 168px; transform: scale(calc(100cqw / 120px)); transform-origin: top left; touch-action: pan-x; }
.intro-card-previews .card-surface { box-shadow: 0 2px 5px #0008; }
.intro-round-badge { position: absolute; z-index: 1; left: 40px; top: 563px; width: 309px; }
.intro-lore { box-sizing: border-box; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px; scrollbar-width: thin; scrollbar-color: #968063 transparent; }
.intro-lore-title { margin: 0 0 14px; color: var(--gold); font: 600 18px/24px var(--trajan); }
.intro-lore-text { font: 400 16px/25px var(--nunito); }
.intro-lore-text p { margin: 0 0 16px; }
.intro-start { position: absolute; z-index: 1; left: 73px; top: 591px; display: block; width: 236px; height: 44px; margin: 0; padding: 0 26px 0 20px; border: 0; background: none; color: #232323; cursor: pointer; font: 700 20px/1 var(--trajan); text-shadow: 1px -.5px #ffe3b3; }
.intro-start-art { position: absolute; left: -10px; top: -6px; width: 276px; height: 76.7489px; pointer-events: none; }
.intro-start span { position: relative; z-index: 1; }
.intro-start-arrow { position: absolute; right: 15px; top: 17px; transform: rotate(-45deg) scaleY(-1); }
.intro-start:focus-visible, .intro-tab:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }
.intro-lore:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.intro-army-scroll:focus { outline: none; }

@media (max-height: 499px) {
  .puzzle-popup[data-view="intro"] { --intro-scale: min(1, calc(100vw / 390px)); }
}

/* Mobile_Puzzle_V6 / Taunt + Brace; scale and float with the unit artwork. */
.unit-statuses { left: 28px; top: 44px; width: 74px; pointer-events: none; }
.unit-status { position: relative; display: block; width: 73px; height: 27px; }
.unit-status::before { content: ''; position: absolute; left: 17px; top: 5px; width: 56px; height: 18px; box-sizing: border-box; border: 1px solid #b98c40; border-radius: 4px; background: linear-gradient(#1a1616, #523e21); }
.unit-status-label { position: absolute; left: 28px; top: 10.5px; width: 41px; color: #d3c5a8; font: 700 10px/10px var(--trajan); text-align: center; white-space: nowrap; }
.unit-status-disc { position: absolute; left: 0; top: 0; width: 28px; height: 28px; }
.unit-status-icon { position: absolute; }
.unit-taunt .unit-status-icon { left: 4.65px; top: 5px; width: 20.087px; height: 15.2174px; }
.unit-brace { margin-left: 1px; }
.unit-brace .unit-status-label { left: 27.5px; }
.unit-brace .unit-status-icon { left: 8px; top: 4px; width: 12.3923px; height: 20.0761px; }

/* Mobile_Rear / VictoryPrePanel and DefeatPanel; the finished map remains interactive. */
.victory-summary { position: fixed; z-index: 9; left: 50%; bottom: max(9px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(390px, 100%); height: calc(min(100vw, 390px) * 191 / 390); container-type: inline-size; }
.victory-summary[hidden] { display: none; }
.puzzle-page:has(dialog[open]) .victory-summary { display: none; }
.victory-summary-stage { position: relative; width: 390px; height: 191px; transform: scale(calc(100cqw / 390px)); transform-origin: top left; }
.victory-summary-frame { position: absolute; left: 7px; top: 13px; pointer-events: none; }
.victory-summary-eagle { position: absolute; left: 50%; top: 0; transform: translateX(-50%); pointer-events: none; }
.victory-summary-status::before { content: ''; position: absolute; left: 80px; top: 34px; width: 229px; height: 38px; border-radius: 5px; background: linear-gradient(270deg, #25252500 1.4423%, #252525 12.388%, #1e1e1e 87.071%, #1a131300 97.115%); }
.victory-summary-status strong { position: absolute; left: 122px; top: 38px; width: 134px; color: var(--gold); font: 600 30px/30px var(--trajan); text-align: center; text-shadow: 1px 1px #0004; }
.victory-summary-status > span { position: absolute; left: 72px; top: 79px; width: 254px; color: var(--gold); font: 600 18px/18px var(--trajan); text-align: center; white-space: nowrap; text-shadow: 1px 1px #0004; }
.victory-show-reward { position: absolute; left: 43px; top: 105px; width: 310px; height: 54px; padding: 0; border: 0; background: none; color: #232323; font: 700 24px/.91 var(--trajan); text-align: left; text-shadow: 1px -.5px #ffe3b3; cursor: pointer; }
.victory-summary-button-art { position: absolute; left: -10px; top: -10px; pointer-events: none; }
.victory-show-reward span { position: absolute; left: 55px; top: 19px; width: 198px; opacity: .9; }
.victory-summary-arrow { position: absolute; left: 256.599px; top: 19.715px; transform: rotate(-45deg) scaleY(-1); pointer-events: none; }
.defeat-summary-retry { display: none; position: absolute; left: 219px; top: 12px; pointer-events: none; }
.victory-summary-note { position: absolute; left: 48px; top: 163px; width: 300px; margin: 0; color: #d3c5a8; font: 400 11px/11px var(--nunito); text-align: center; }
.victory-summary-gems { position: absolute; inset: 0; pointer-events: none; }
.victory-summary-gems img { position: absolute; width: var(--gem-size); height: auto; opacity: .85; transform: rotate(var(--gem-tilt)); filter: drop-shadow(0 0 4px #e4c07366); }
@media (prefers-reduced-motion: no-preference) {
  .victory-summary-gems img { animation: victory-gem-pop var(--gem-duration) ease-in-out var(--gem-delay) infinite both; }
}
@keyframes victory-gem-pop {
  0%, 4% { opacity: 0; transform: translateY(6px) rotate(var(--gem-tilt)) scale(0); }
  14% { opacity: 1; transform: translateY(0) rotate(var(--gem-tilt)) scale(1.18); }
  20% { transform: translateY(0) rotate(var(--gem-tilt)) scale(.94); }
  27% { transform: translateY(0) rotate(var(--gem-tilt)) scale(1); }
  68% { opacity: 1; transform: translate(calc(var(--gem-drift) * .4), -5px) rotate(var(--gem-tilt)) scale(1); }
  82%, 100% { opacity: 0; transform: translate(var(--gem-drift), -13px) rotate(var(--gem-tilt)) scale(.7); }
}
.victory-show-reward:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }
.is-reviewing-result .card-hand, .is-reviewing-result .hand-slider { display: none; }
.battle-summary.is-defeat .victory-summary-stage::before { content: ''; position: absolute; z-index: 1; left: 21px; top: 23px; width: 352px; height: 157px; border-radius: 5px; background: linear-gradient(180deg, #0000, #1c0909d4); pointer-events: none; }
.battle-summary.is-defeat .victory-summary-status { position: relative; z-index: 2; }
.battle-summary.is-defeat .victory-summary-note, .battle-summary.is-defeat .victory-show-reward { z-index: 2; }
.battle-summary.is-defeat .victory-summary-status::before { top: 34.006px; background: linear-gradient(270deg, #25252500 1.4423%, #2d1512 21.154%, #8a2828 72.596%, #1a131300 97.115%); }
.battle-summary.is-defeat .victory-summary-status strong { left: 133px; width: 112px; }
.battle-summary.is-defeat .victory-summary-status > span { left: 39px; width: 321px; font: 600 18px/18px var(--nunito); white-space: normal; }
.battle-summary.is-defeat .victory-show-reward span { left: 66px; top: 16px; width: 135px; line-height: 22px; }
.battle-summary.is-defeat .victory-summary-arrow { display: none; }
.battle-summary.is-defeat .defeat-summary-retry { display: block; }
@media (max-height: 500px) and (min-width: 600px) {
  .battle-summary.is-defeat { left: auto; right: max(12px, env(safe-area-inset-right)); width: min(300px, 40vw); height: calc(min(300px, 40vw) * 191 / 390); transform: none; }
}

/* Mobile_VictoryPopupV5 — Figma's 390px composition with live reward and form. */
.puzzle-popup.is-victory[open] { display: flex; align-items: flex-start; padding: 5px 0; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.is-victory .popup-stage { flex: 0 0 auto; width: calc(390px * var(--victory-scale)); height: calc(var(--victory-height, 655px) * var(--victory-scale)); margin: auto; }
.puzzle-popup.is-victory .popup-panel { left: 0; right: auto; top: 0; width: 390px; height: auto; border: 0; background: none; box-shadow: none; isolation: isolate; transform: scale(var(--victory-scale)); transform-origin: top left; }
.is-victory .popup-panel::before { content: ''; position: absolute; z-index: -1; left: -5px; top: 0; width: 406px; height: 520px; background: url(assets/victory-v2/background.webp) center / 100% 100% no-repeat; pointer-events: none; }
.is-victory .popup-banner { display: none; }
.is-victory .popup-close.info-close { left: 327px; right: auto; top: 11px; }
.is-victory .popup-title { z-index: 1; left: 91px; right: auto; top: 32px; width: 229px; padding: 4px 0; font-size: 30px; background: linear-gradient(90deg, transparent, #1e1e1e 13%, #252525 87%, transparent); }
.is-victory .popup-title:focus { outline: none; }
.victory-content { position: relative; padding-top: 276px; }
.victory-content[hidden] { display: none; }
.victory-ornaments img { position: absolute; pointer-events: none; }
.victory-laurel { top: 13px; width: 148px; height: 93px; }
.victory-laurel--left { left: 49px; top: 14px; transform: scaleX(-1); }
.victory-laurel--right { left: 195px; }
.victory-eagle { left: 156px; top: 10px; width: 100px; height: 34px; }
.victory-heading { position: absolute; z-index: 1; isolation: isolate; left: 78px; top: 66px; width: 250px; margin: 0; color: var(--gold); font: 600 18px/18px var(--trajan); text-align: center; text-shadow: var(--shadow); }
.victory-heading::before { content: ''; position: absolute; z-index: -1; left: -56px; top: -24px; width: 365px; height: 89px; background: radial-gradient(ellipse 50% 50% at 50% 50%, #252525 57.212%, rgb(35 29 18 / 0) 100%); pointer-events: none; }
.victory-reward-glow { position: absolute; left: 27px; top: 133px; pointer-events: none; }
.victory-pdf-info { position: absolute; z-index: 2; isolation: isolate; left: 87px; top: 245px; transform: rotate(-90deg); transform-origin: top left; width: 148px; height: 26px; color: var(--gold); }
.victory-pdf-info::before { content: ''; position: absolute; z-index: -1; left: 0; top: 4px; width: 148px; height: 22px; box-sizing: border-box; border-radius: 5px; pointer-events: none; }
.victory-pdf-info::before { border: 1px solid var(--gold); background: linear-gradient(270deg, #252525, #1a1313 87.0714%); }
.victory-pdf-info img { position: absolute; left: 8px; top: 0; }
.victory-pdf-info span { position: absolute; left: 29px; top: 8px; white-space: nowrap; font: 600 14px/14px var(--trajan); text-shadow: var(--shadow); }
.victory-reward-card { position: absolute; z-index: 2; left: 122px; top: 91px; width: 163px; height: 228.2px; --card-width: 163px; --card-height: 228.2px; --card-scale: 1.49; }
.victory-reward-card .card-choice { cursor: default; pointer-events: none; }
#victory-submit-form { position: relative; display: grid; justify-items: start; padding-left: 2px; box-sizing: border-box; color: var(--parchment); }
#victory-submit-form label { display: block; color: var(--gold); font: 600 12px/17px var(--nunito); }
#victory-submit-form :is(input[type="text"], input[type="email"], select) { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #977f53; border-radius: 5px; background: #ede1cd; color: #2c2220; font: 400 14px/20px var(--nunito); }
#victory-submit-form :is(input, select):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.victory-email { display: grid; grid-template-columns: 303px; grid-template-rows: 17px 40px 24px 57px; gap: 3px; width: 381px; min-height: 179px; box-sizing: border-box; margin-top: -8px; padding: 11px 35px 15px 43px; background: url(assets/victory-v2/email-panel.webp) center / 100% 100% no-repeat; }
.victory-email-field { position: relative; }
.victory-email-field img { position: absolute; left: 9px; top: 13px; pointer-events: none; }
.victory-email input[type="email"] { display: block; height: 40px; padding: 9px 10px 9px 44px; }
#victory-submit-form .victory-email-opt-in { display: flex; align-items: center; gap: 9px; min-height: 18px; color: var(--gold); font: 600 12px/16px var(--nunito); cursor: pointer; }
.victory-email-opt-in input { flex: 0 0 auto; width: 12px; height: 12px; margin: 0 0 0 4px; accent-color: var(--gold); }
.victory-email-submit { position: relative; isolation: isolate; justify-self: center; transform: translateX(-3.5px); width: 328px; height: 57px; margin: 0 0 2px; border: 0; padding: 0; background: none; color: #232323; font: 700 24px/29px var(--trajan); cursor: pointer; }
.victory-email-submit::before { content: ''; position: absolute; z-index: -1; left: -10px; top: -10px; width: 368px; height: 97px; background: url(assets/victory-v5/confirm-button.svg?v=1) no-repeat; pointer-events: none; }
.victory-email-submit > span { display: block; line-height: 24px; padding-top: 2px; }
.victory-email-submit small { display: block; margin-top: 3px; font: 400 11px/11px var(--nunito); color: #373329; }
.victory-email-submit:disabled { opacity: .65; cursor: default; }
#victory-email-status { margin: 8px auto 0; width: 360px; text-align: center; font: 400 11px/13px var(--nunito); overflow-wrap: anywhere; }
.puzzle-popup.is-victory .popup-scroll { position: relative; inset: auto; margin: 0 25px; padding: 0; overflow: visible; }
.is-victory .popup-result { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 38px; }
.is-victory .popup-result::before, .is-victory .popup-result::after { content: ''; position: static; flex: 0 1 46px; width: 46px; height: 2px; background: url(assets/intro/objective-accent.svg) center / 100% 100% no-repeat; pointer-events: none; }
.is-victory .popup-result::before { transform: scaleX(-1); }
.is-victory .result-objectives { display: none; }
.is-victory #popup-result-message { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-victory .result-restart, .is-victory .result-choose { flex: 0 0 auto; min-height: 38px; margin: 0; padding: 8px 0; border: 0; background: none; font: 600 14px/19px var(--nunito); color: var(--gold); }
.is-victory .result-choose:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }

/* Camp art and faction emblems from Mobile_ItemsV2. */
.puzzle-camps { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.map-camp { position: absolute; width: 12.78%; aspect-ratio: 99 / 45; transform: translate(-50%, -50%); container-type: inline-size; border: 3px solid #f6a242; border-radius: 10px; box-shadow: 4px 4px 4px #0008; }
.map-camp--dacian { border-color: #ae282b; }
.map-camp-art { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.map-camp-emblem { position: absolute; left: 0; top: 0; width: 99px; height: 45px; transform: scale(calc(100cqw / 99px)); transform-origin: top left; pointer-events: none; }
.map-camp-emblem img { position: absolute; display: block; max-width: none; }
.map-camp-background { left: 13px; top: -15px; }
.map-camp-logo { left: 23px; top: 2px; width: 53px; height: 18px; object-fit: fill; }
.map-camp--dacian .map-camp-logo { left: 29.8445px; top: 2.339px; width: 45.879px; height: 18.608px; transform: rotate(-174.02deg) scaleY(-1); }
.map-camp > span { position: absolute; left: 4%; bottom: -9%; width: 92%; height: 43%; display: flex; align-items: center; justify-content: center; padding-top: 2%; background: url(assets/units/nameplate.webp) center / 100% 100% no-repeat; color: #232323; font: 700 8cqw/1 var(--trajan); white-space: nowrap; }
.map-camp.is-deploying { box-shadow: 0 0 12px #e7c570, 4px 4px 4px #0008; }
.camp-toggle { position: absolute; inset: -12px -5px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
.camp-toggle:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }
.map-camp.is-showing-facing { box-shadow: 0 0 0 2px #e4c073, 0 0 15px #e4c07399; }
.camp-facing-guide { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.camp-facing-guide line, .camp-facing-guide polyline { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.camp-unit-link { stroke: #f6a243; stroke-width: 1.5px; stroke-dasharray: 5 5; opacity: .8; }
.camp-facing-guide [data-faction="dacian"] .camp-unit-link { stroke: #d96b72; }
.camp-unit-rear { stroke: #ffcc76; stroke-width: 3px; filter: drop-shadow(0 0 2px #321405); }
.puzzle-hex.is-camp { filter: drop-shadow(0 0 3px #e7c570); }
/* CardTemplateDeploy (750 × 1050), with the current shared Roman unit marker. */
.is-deploy-card:not(.is-custom-player) .card-surface { container-type: inline-size; border: 0; border-radius: 6.667%; }
.is-deploy-card:not(.is-custom-player) .card-surface::after { content: ''; position: absolute; z-index: 5; inset: 0; border: 1.333cqw solid #359094; border-radius: inherit; pointer-events: none; }
.is-deploy-card:not(.is-custom-player) .card-title { left: 32.13%; right: 7%; top: 4.57%; height: 14.86%; font-size: 8.667cqw; line-height: 1.2; }
.is-deploy-card.has-long-title:not(.is-custom-player) .card-title { font-size: 7cqw; }
.is-deploy-card:not(.is-custom-player) .card-category { font-size: 6.667cqw; }
.is-deploy-card:not(.is-custom-player) .card-art { top: 26.476%; width: 80%; height: 38.095%; }
.is-deploy-card:not(.is-custom-player) .card-gem { left: 16.8%; top: 13.62%; transform: rotate(.39deg); }
.is-deploy-card:not(.is-custom-player) .card-ap-cost { left: 11.33%; top: 7.52%; width: 7.87%; font-size: 10.667cqw; }
.card-deploy-stats { position: absolute; text-align: center; }
.is-deploy-card:not(.is-custom-player) .card-deploy-stats { left: 12.533%; top: 55.524%; width: 75.067%; height: 24.952%; color: #dcc694; }
.is-deploy-card:not(.is-custom-player) .card-deploy-stats::before { content: ''; position: absolute; inset: 0; background: url(assets/victory-v2/email-panel.webp) left top / 99.18% 100% no-repeat; }
.is-deploy-card:not(.is-custom-player) .card-deploy-stats::after { content: ''; position: absolute; left: 48.668%; top: 34.733%; width: 149px; height: 9.99999px; background: url(assets/cards/deploy-divider.svg?v=1) no-repeat; transform-origin: top left; transform: scale(calc(100cqw / 750px)) rotate(90deg); }
.is-deploy-card:not(.is-custom-player) .card-deploy-values { position: absolute; left: 0; right: 0; top: 45.8%; display: grid; grid-template-columns: 1fr 1fr; }
.card-deploy-value { display: block; font: 600 8.533cqw/1 var(--trajan); text-shadow: .15px .15px #0004; }
.card-deploy-label { display: block; font: 900 5.333cqw/1.375 var(--nunito); }
.card-deploy-marker { position: absolute; left: 22%; top: 48%; width: 56%; aspect-ratio: 139 / 56.282; container-type: inline-size; }
.is-deploy-card:not(.is-custom-player) .card-description { left: 6.4%; right: 5.333%; top: 80.762%; bottom: auto; height: 14.19%; font-size: 6cqw; line-height: 1.36; }
.is-deploy-card:not(.is-custom-player) .card-description [data-card-term="deploy"] { font-weight: 900; }
.card-choice.is-zoom-source ~ .card-deploy-zoom-control { visibility: hidden; }

.card-zoom-button { position: absolute; z-index: 1; left: -13px; top: calc(50% + 3px); transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border: 0; background: url(assets/v6/ring.webp) center / 24px 25px no-repeat, radial-gradient(circle, #27231e 30%, transparent 32%); cursor: zoom-in; pointer-events: auto; touch-action: manipulation; }
.card-zoom-button img { position: absolute; left: 13px; top: 12px; }
.graveyard-cards { padding-top: 8px; }
.graveyard-card { position: relative; }

.victory-reward-card .card-zoom-button { z-index: 2; left: auto; right: -17px; top: -10px; width: 36px; height: 35.03px; transform: none; background-size: 36px 35.03px, auto; }
.victory-card-zoom img { left: 10.74px; top: 9.2px; transform: scale(1.5337); transform-origin: top left; }
.card-zoom-button:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }
.card-zoom { --zoom-width: 300px; --zoom-scale: 2.5; position: fixed; inset: 0; width: var(--zoom-width); height: calc(var(--zoom-width) * 1.4); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; overflow: visible; background: transparent; }
.card-zoom::backdrop { background: #100d0dcc; backdrop-filter: blur(4px); }
.card-zoom-content { position: relative; width: 100%; height: 100%; transform-origin: top left; }
.card-zoom-content .card-choice { --card-width: 120px; --card-height: 168px; --card-scale: 1.1; width: 120px; height: 168px; transform: scale(var(--zoom-scale)); transform-origin: top left; opacity: 1; pointer-events: none; }
.is-zoom-source { visibility: hidden; }
.help-hints { color: var(--parchment); font: 400 14px/21px var(--nunito); }
.help-hints h3 { margin: 0 0 4px; color: var(--gold); font: 700 16px/20px var(--nunito); }
.help-hints p { margin: 0 0 16px; }
.result-objectives { margin: 16px 0 24px; text-align: left; }
@media (prefers-reduced-motion: reduce) { .action-control.is-exhausted .end-round-button-art { animation: none; } }

/* Number the chosen March steps while the unit remains at its origin. */
.puzzle-hex[data-march-step]::after {
  content: attr(data-march-step);
  position: absolute; left: 50%; top: 12%; transform: translate(-50%, -50%);
  z-index: 4; min-width: 24px; height: 24px; border-radius: 50%;
  background: #f2d18b; color: #251e15; border: 2px solid #46341e;
  font: bold 16px/24px Arial, sans-serif; text-align: center; pointer-events: none;
}

/* CardTemplateCustomPlayer (750 × 1050), shared by reward preview and zoom. */
.is-custom-player .card-surface { container-type: inline-size; }
.is-custom-player .card-art { left: 32.27%; top: 26.38%; width: 60.13%; height: 28.63%; transform: none; }
.is-custom-player .card-title { left: 34.13%; right: 15.2%; top: 4.76%; height: 14.86%; justify-content: center; white-space: pre-line; text-align: center; font-size: 8.667cqw; line-height: 1.2; }
.is-custom-player .card-category { left: 46.93%; right: 25.87%; top: 22.29%; height: 5.71%; font-size: 6.667cqw; }
.is-custom-player .card-ap-cost { left: 10.27%; top: 7.52%; width: 7.87%; font-size: 10.667cqw; }
.is-custom-player .card-gem { left: 18.13%; width: 12.67%; height: 9.9%; transform: rotate(.39deg); }
.is-custom-player .card-gem--lower { top: 13.33%; }
.is-custom-player .card-gem--upper { top: 10.57%; }
.is-custom-player .card-description { left: 7.73%; right: 5.6%; top: 53.9%; bottom: auto; height: 12.86%; font-size: 5.333cqw; line-height: 1.36; }
.is-custom-player .card-description b { font-weight: 900; }
.is-custom-player .card-description em { color: #997631; font-style: normal; font-weight: 600; }
.is-custom-player .card-category { font-size: 5.2cqw; }
.is-custom-player .card-deploy-stats { left: 8%; right: 6%; top: 53%; color: #2c2220; font: 900 4.7cqw/1.2 var(--nunito); }
.is-custom-player .card-deploy-stats > span { display: flex; justify-content: space-evenly; gap: 2cqw; white-space: nowrap; }
.is-custom-player.is-deploy-card .card-description { top: 58%; height: 10%; line-height: 1.2; }
.card-chronicle-heading { position: absolute; left: 13%; top: 69.5%; width: 77%; height: 7.7%; display: flex; align-items: center; justify-content: center; color: #dcc694; font: 900 5.333cqw/1.08 var(--trajan); text-align: center; white-space: pre-line; }
.card-chronicle { position: absolute; left: 14%; top: 77.524%; bottom: 0; width: 76.93%; box-sizing: border-box; padding-block: 3%; display: flex; flex-direction: column; justify-content: center; color: #dcbd88; font: 300 5.333cqw/1.2 var(--nunito); text-align: left; }
.last-reward-button { position: absolute; z-index: 1; top: calc(149px + var(--chooser-dev-space, 0px)); left: 50%; transform: translateX(-50%); display: block; margin: 0; white-space: nowrap; padding: 10px 20px; border: 1px solid var(--gold-dim); border-radius: 5px; background: #252525; color: var(--gold); font: 700 14px/20px var(--nunito); cursor: pointer; }
.last-reward-button:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }
.last-reward-button[hidden], .result-restart[hidden] { display: none; }

.chooser-content:has(.last-reward-button:not([hidden])) .puzzle-options { top: calc(204px + var(--chooser-dev-space, 0px)); }

/* Inset the turquoise extraction outline so facing and targeting borders stay distinct. */
.extraction-zone { position: absolute; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; }
.extraction-zone::before, .extraction-zone::after { content: ''; position: absolute; inset: 0; transform: scale(.88); clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%); }
.extraction-zone::before { background: #54d9c7; }
.extraction-zone::after { inset: 3px; background: #173c38; opacity: .85; }
.extraction-label { position: absolute; z-index: 1; top: 100%; left: 50%; transform: translateX(-50%); padding: 3px 7px; border: 1px solid #54d9c7; border-radius: 3px; color: #dffff8; background: #132e2b; font: 700 11px/14px var(--trajan); white-space: nowrap; }
.extraction-zone.is-complete::before { background: #9fda91; }
.unit-rescue-label { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); padding: 2px 7px; border: 1px solid #54d9c7; border-radius: 3px; color: #dffff8; background: #132e2b; font: 700 10px/12px var(--trajan); pointer-events: none; }

/* The faint range ring is informational; only enemies receive target buttons. */
.puzzle-hex.is-volley-range::before { background-image: url(assets/hexes/attack-v2.svg); opacity: .4; }
.puzzle-hex.is-volley-range.is-attack-target::before { opacity: 1; }
.is-targeting .puzzle-hex.is-volley-range { opacity: 1 !important; }
.volley-projectile { position: absolute; z-index: 20; width: 28px; height: 7px; background: #f5d6a0; pointer-events: none; clip-path: polygon(0 30%, 72% 30%, 72% 0, 100% 50%, 72% 100%, 72% 70%, 0 70%); }

/* Rally previews each restored unit without changing its current warrior count. */
.unit-rally-preview { position: absolute; right: -13px; top: 8px; padding: 1px 4px; border: 1px solid #b0e3ba; border-radius: 4px; background: #234431; color: #dcffe4; font: 800 15px/18px var(--nunito); pointer-events: none; }

.victory-verification { margin: 0 35px 24px; padding: 16px; border: 1px solid #977f53; border-radius: 9px; background: #1a1616; color: var(--parchment); font: 14px/1.4 var(--nunito); }
.victory-verification[hidden] { display: none; }
.victory-verification form { display: grid; gap: 10px; }
.victory-verification input { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #977f53; border-radius: 6px; background: #f2e6cb; color: #232323; font: inherit; letter-spacing: .2em; }
.victory-verification button { margin-top: 8px; padding: 10px; border: 1px solid #977f53; border-radius: 6px; background: #e4c073; color: #1a1616; font: 700 14px var(--nunito); cursor: pointer; }
.victory-verification button:disabled { opacity: .6; cursor: default; }
.victory-verification a { color: var(--gold); }

#victory-submit-form button:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }

/* Printed glossary links stay inert in the hand; only zoomed cards expose buttons. */
.card-choice.has-long-description:not(.is-custom-player) .card-description { font-size: 7px; line-height: 8px; }
.card-term { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: .07em; }
.card-zoom-content button.card-term { display: inline; appearance: none; padding: 0; border: 0; border-radius: 2px; background: none; font-family: inherit; font-size: inherit; line-height: inherit; text-align: inherit; cursor: help; pointer-events: auto; touch-action: manipulation; }
.card-zoom-content .card-term:is(:hover, :focus-visible, [aria-expanded="true"]) { color: #754512; background: #f7d47966; outline: none; text-decoration-thickness: .12em; }
.card-term-help { position: fixed; z-index: 5; box-sizing: border-box; width: min(286px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 14px 24px 8px; border: 1px solid #977f53; border-radius: 9px; background: linear-gradient(135deg, #302a21, #171615); color: var(--parchment); box-shadow: 0 8px 28px #000b; font: 400 13px/18px var(--nunito); }
.card-term-help[hidden] { display: none; }
.card-term-help h3 { margin: 0 28px 7px 0; color: var(--gold); font: 700 16px/22px var(--trajan); }
.card-term-help p { margin: 0; }
.card-term-close { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; padding: 0; border: 1px solid #977f5380; border-radius: 50%; background: #201c17; color: var(--gold); cursor: pointer; font: 400 23px/26px var(--nunito); }
.card-term-close:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }
.card-term-diagram svg { display: block; width: 100%; height: auto; margin-top: 4px; }
.term-hex { fill: #302e28; stroke: #83775d; stroke-width: 1.4; stroke-linejoin: round; }
.term-hex.is-valid { fill: #23573d; stroke: #69d699; stroke-width: 2; }
.term-hex.is-rear { fill: #653230; stroke: #ee7772; stroke-width: 2; }
.term-hex.is-center { fill: #41382a; stroke: #e4c073; stroke-width: 2; }
.term-rear-edges { fill: none; stroke: #ff7770; stroke-width: 3.5; stroke-linejoin: round; }
.term-facing-arrow { fill: none; stroke: #e4c073; stroke-width: 1.8; }
.term-unit { fill: #e4c073; }
.term-hex-label, .term-unit-label, .term-map-side { font-family: var(--nunito); font-weight: 800; text-anchor: middle; }
.term-hex-label { fill: #f2e5c8; font-size: 10px; }
.term-unit-label { fill: #251e15; font-size: 11px; }
.term-map-side { fill: #d3c5a8; font-size: 9px; letter-spacing: .4px; }

/* CardTemplateWithZoom → BtnZoomCard (119.638 × 116.405 at 327,915). */
.card-footer-zoom-art { position: absolute; z-index: 5; left: 43.6%; top: 87.1429%; width: 15.9518%; height: 11.0862%; pointer-events: none; }
.card-footer-zoom-art::before { content: ''; position: absolute; left: 16.216%; top: 19.446%; width: 67.568%; height: 66.667%; border-radius: 50%; background: linear-gradient(#423e2f, #110f0a); }
.card-footer-zoom-art::after { content: ''; position: absolute; inset: 0; background: url(assets/v6/ring.webp) center / 100% 100% no-repeat; }
.card-footer-zoom-art img { position: absolute; z-index: 1; left: 29.822%; top: 26.272%; width: 42.604%; height: 43.787%; }
.card-footer-zoom-control { z-index: 3; left: 33%; top: 85%; width: 37%; height: 15%; transform: none; background: none; border-radius: 50%; }
.card-choice.is-zoom-source ~ .card-footer-zoom-control { visibility: hidden; }
.card-footer-zoom-control:is(:hover, :focus-visible) { outline: none; background: radial-gradient(ellipse, #e4c07333, transparent 65%); }
/* Leave the footer clear for zoom and the reusable-card hint. */
.is-reusable .card-description { top: 59.8%; bottom: 15%; font-size: 7px; line-height: 8px; }

.deck-card .card-footer-zoom-control { top: 130.05px; height: 22.95px; }

.card-zoom-content .card-footer-zoom-art { display: none; }

.card-zoom-content .card-title .card-term:is(:hover, :focus-visible, [aria-expanded="true"]) { color: #ffe0a0; background: #e4c07322; }
.card-term-help:has(.card-term-diagram:empty) { padding-bottom: 18px; }

/* V5 team choices share live scores; selection is submitted with the email. */
.victory-teams { position: relative; border: 0; padding: 0; margin: 0; width: 381px; height: 179px; min-width: 0; background: url(assets/victory-v2/email-panel.webp) center / 100% 100% no-repeat; }
.victory-teams legend { position: absolute; top: 49px; left: 0; width: 100%; padding: 0; text-align: center; color: var(--gold); font: 600 18px/18px var(--trajan); text-shadow: var(--shadow); }
.victory-teams legend::before, .victory-teams legend::after { content: ''; position: absolute; top: 7px; width: 46px; height: 2px; background: url(assets/intro/objective-accent.svg) no-repeat; }
.victory-teams legend::before { left: 16px; transform: scaleX(-1); }
.victory-teams legend::after { right: 12px; }
#victory-team-note { position: absolute; top: 67px; left: 0; width: 100%; margin: 0; text-align: center; font: 400 12px/17px var(--nunito); color: var(--gold); }
.victory-team-options { position: absolute; inset: 73px 0 19px; }
#victory-submit-form .victory-team-choice { position: absolute; width: 148px; height: 87px; cursor: pointer; font: 700 16px/16px var(--trajan); }
.victory-team-choice--rome { left: 40px; }
.victory-team-choice--dacia { left: 199px; }
.victory-team-choice::before { content: ''; position: absolute; left: -10px; top: -10px; width: 188px; height: 127px; background: url(assets/victory-v5/team-choice.svg?v=1) no-repeat; pointer-events: none; }
.victory-team-choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
.victory-team-choice:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 4px; }
.victory-team-choice:has(input:disabled) { cursor: default; }
.victory-team-choice strong, .victory-team-score { position: absolute; z-index: 1; right: 9px; top: 45px; white-space: nowrap; }
.victory-team-score { top: 65px; font-size: 16px; }
.victory-team-choice--dacia strong, .victory-team-choice--dacia .victory-team-score { left: 10px; right: auto; }
.victory-team-face { position: absolute; left: -5px; top: 3px; width: 75px; height: 83px; mask: url(assets/victory-v5/rome-mask.svg?v=1) no-repeat; }
.victory-team-face img { position: absolute; left: -27px; top: -19px; width: 107px; height: 107px; max-width: none; }
.victory-team-choice--dacia .victory-team-face { left: 81px; mask-image: url(assets/victory-v5/dacia-mask.svg?v=1); }
.victory-team-choice--dacia .victory-team-face img { left: 6px; top: -5px; width: 88.644px; height: 88.644px; }
.victory-team-check { position: absolute; left: -10px; top: -6px; width: 36px; height: 35.03px; background: url(assets/v6/ring.webp) center / 36px 35.03px no-repeat, radial-gradient(circle, #27231e 40%, transparent 42%); }
.victory-team-choice--dacia .victory-team-check { left: 127px; }
.victory-team-check img { position: absolute; left: 11px; top: 0; display: none; }
.victory-team-choice:has(input:checked) .victory-team-check img { display: block; }
.victory-team-choice:has(input:checked)::after { content: ''; position: absolute; left: 9px; bottom: -1px; width: 129px; height: 5px; transform: scaleY(-1); background: url(assets/victory-v5/team-choice-glow.svg?v=1) no-repeat; }