/* The Training screen: the upgrade map, its popovers and jump arrow, and the "What is training?" guide. */
.node-popover {left:42%;right:10px;top:-9px}
.node-popover:before {content:"";position:absolute;top:calc(var(--arrow-y, 55px) - 6px);left:-8px;width:12px;height:12px;background:#d0e7ee;border-left:2px solid var(--slate-900);border-bottom:2px solid var(--slate-900);transform:rotate(45deg)}
.perk-popover {right:10px;bottom:calc(100% + 12px);width:210px;max-width:70vw}
.perk-popover:after {content:"";position:absolute;bottom:-11px;right:50px;width:18px;height:18px;background:#d0e7ee;border-right:2px solid var(--slate-900);border-bottom:2px solid var(--slate-900);transform:rotate(45deg)}
@media(max-width:360px){.perk-popover{width:185px}
}

.perk-popover.below-node {bottom:auto;top:calc(100% + 12px)}
.perk-popover.below-node:after {bottom:auto;top:-11px;background:var(--header-bg);transform:rotate(225deg)}
.training-guide {background:transparent;border:0;box-shadow:none;overflow:visible}
.training-guide .modal-title {position:relative;isolation:isolate;margin:0 16px 18px;padding:13px 5px;border:2px solid var(--ink);border-radius:9px;background:var(--slate-800);box-shadow:inset 0 4px var(--slate-500),0 var(--button-depth) var(--button-drop);font-size:24px}
.training-guide .close-modal {background:var(--slate-800);color:#fff}
.training-guide .modal-title:before,.training-guide .modal-title:after {content:"";position:absolute;z-index:-1;top:14px;width:25px;height:38px;background:var(--slate-900);border:2px solid var(--ink)}
.training-guide .modal-title:before {left:-18px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,25% 50%)}
.training-guide .modal-title:after {right:-18px;clip-path:polygon(0 0,100% 0,75% 50%,100% 100%,0 100%)}
.training-guide .modal-body {padding:8px 4px 12px}
.training-guide-panels {display:grid;gap:14px}
.training-guide-panel {display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:12px;align-items:center;min-height:124px;text-align:left;background:linear-gradient(100deg,var(--slate-700),var(--slate-300) 75%);border:2px solid var(--ink);border-radius:13px;box-shadow:0 var(--button-depth) var(--button-drop);padding:16px;overflow:hidden}
/* Translucent backing for the copy, like the Starter Pack header. */
.training-guide-panel > div:first-child {padding:10px 12px;border-radius:14px;background:#24213640}
.training-guide-panel h3 {text-align:left;margin:0 0 7px;font-size:22px;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:none}
.training-guide-panel p {margin:0;font-size:16px;line-height:1.4;color:#fff;text-align:left;-webkit-text-stroke:1.5px var(--slate-900);paint-order:stroke fill}
.training-guide-art {display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate;min-height:88px}
/* Same still wedges and white outline as the shop crates. */
.training-guide-art::before {content:"";position:absolute;left:50%;top:50%;z-index:-1;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(from 0deg,#fff0 0deg 18deg,#fff9 18deg 32deg,#fff0 32deg 45deg);mask-image:radial-gradient(black,transparent 70%);pointer-events:none}
.training-guide-art > .painted-sprite {filter:drop-shadow(2px 2px 0 #fffdf0) drop-shadow(-2px -2px 0 #fffdf0)}
.training-guide-art-pair > .painted-sprite:last-child {position:absolute;right:0;bottom:0}
.training-guide-dismiss {display:block;margin:22px auto 0}
@media(max-width:360px){.training-guide .modal-title{font-size:20px}.training-guide-panel{padding:12px;gap:8px;grid-template-columns:minmax(0,1fr) 74px;min-height:116px}.training-guide-panel h3{font-size:19px}.training-guide-panel p{font-size:14px}.training-guide-art > .painted-sprite{max-width:72px}.training-guide-panels{gap:12px}
}

/* Training climbs upward along paired upgrade and perk tracks. */
/* The locked-area tint is #48475b at 85% so, over the cyan .screen, it blends to
   exactly --slate-700 (#41586d), the slate the other screens use. */
.training-map {padding:0 4px 90px}
.training-track {--training-row-height:112px;position:relative;padding:0;background:linear-gradient(to bottom,#48475bd9 0 var(--training-fill-start),#64f0f3 var(--training-fill-start) calc(var(--training-fill-start) + 3px),transparent calc(var(--training-fill-start) + 3px))}
.training-track:before,.training-track:after {content:"";position:absolute;top:0;bottom:0;width:10px;transform:translateX(-50%);background:linear-gradient(to bottom,var(--slate-800) 0 var(--training-fill-start),#279557 var(--training-fill-start));border:2px solid var(--slate-900);box-shadow:inset 2px 0 #a8bed033}
.training-track:before {left:23%}.training-track:after {left:77%}
.training-map-row {position:relative;display:grid;grid-template-columns:46% 8% 46%;align-items:center;min-height:var(--training-row-height)}
/* Bottom sliver of the next tier's first step: breathing room above the map. */
.training-peek {height:40px;overflow:hidden;pointer-events:none}
.training-peek > .training-map-row {margin-top:calc(40px - var(--training-row-height))}
.training-map-node {position:relative;justify-self:center;display:flex;align-items:center;justify-content:center;width:78px;height:78px;padding:8px;border:4px solid var(--slate-900);border-radius:17px;background:linear-gradient(#49e7ef,#00a0d1);box-shadow:inset 0 0 0 3px #b7ff36,0 5px #23324680;cursor:pointer;z-index:1}
.training-map-node:focus-visible {outline:3px solid white;outline-offset:3px}
.training-map-node > .painted-sprite {width:52px;height:52px}
/* Flat green disc with a white check (bought) or up arrow (next), with a dark ink ring
   so it reads against the tiles and the blue page. */
.training-status-badge {
  position:absolute;right:-8px;top:-8px;
  display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;border:2px solid #1d2838;background:#4fb13a;color:#fff;
}
.training-status-badge svg {width:17px;height:17px}
/* The next upgrade to buy is yellow like the buy buttons, so it stands apart from bought (green). */
.training-status-badge.next {background:var(--yellow);color:var(--slate-950)}
.training-map-row.locked > .training-map-node, .training-map-row.next > .training-map-node {background:linear-gradient(var(--slate-200),#738599);box-shadow:inset 0 0 0 3px #d2dbe1,0 5px #23324680}
.training-map-row.locked > .training-map-node > .painted-sprite, .training-map-row.next > .training-map-node > .painted-sprite {filter:grayscale(1)}

/* Every fifth step: a flat diamond with its number and a dark ink edge. */
.training-step-number {position:relative;justify-self:center;z-index:1;width:29px;height:29px;transform:rotate(45deg);border-radius:5px;border:2px solid #1d2838;background:#4fb13a;display:grid;place-items:center}
.training-step-number b {transform:rotate(-45deg);font-size:16px;color:white}
.training-map-row.locked .training-step-number {background:var(--slate-300)}
.training-perk-stop {position:relative;display:flex;align-items:center;flex-direction:column;gap:9px;z-index:2}
.training-perk-node {background:linear-gradient(#ffe35a,#f39b22);box-shadow:inset 0 0 0 3px #ffed9d,0 5px #23324680}
.training-perk-node.complete {box-shadow:inset 0 0 0 3px #b7ff36,0 5px #23324680}
.training-perk-stop > strong {font-size:12px;line-height:1.2;text-align:center;background:#254859;color:white;padding:4px 6px;border-radius:5px;max-width:95%}
.training-map-popover {--header-bg:#ffce37;--header-color:var(--slate-900);position:absolute;z-index:6;background:#d0e7ee;color:var(--slate-900);border:2px solid var(--slate-900);border-radius:12px;box-shadow:0 5px #23354570;text-align:center;overflow:visible}
.training-map-popover.is-purchased {--header-bg:#398344;--header-color:#fff}
.training-map-popover h4 {margin:0;background:var(--header-bg);border-radius:10px 10px 0 0;padding:8px 5px;font-size:16px;line-height:1.1;color:var(--header-color)}
.training-map-popover p {font-size:14px;line-height:1.35;margin:10px 7px}
.training-map-popover small {display:block;font-size:10px;line-height:1.3;padding:0 7px 10px;color:var(--slate-800)}
.training-map-popover .btn {padding:5px 9px;margin:0 auto 10px;max-width:90%}
:is(.training-track > .training-map-row:first-child,.training-peek + .training-map-row) > .node-popover {left:10px;right:auto;top:94px;width:58%}
:is(.training-track > .training-map-row:first-child,.training-peek + .training-map-row) > .node-popover:before {top:-8px;left:calc(40% - 10px);background:var(--header-bg);transform:rotate(135deg)}
@media(max-width:360px){.training-map-node{width:70px;height:70px}.training-track{--training-row-height:105px}.training-map-popover h4{font-size:14px}.training-map-popover p{font-size:13px}.training-step-number{width:25px;height:25px}.training-step-number b{font-size:14px}
}


.training-viewport {position:relative;flex:1;min-height:0;overflow:hidden}
.training-viewport > .screen {height:100%}
.training-floating-controls {position:absolute;inset:0;pointer-events:none;z-index:8}
.training-floating-controls button {pointer-events:auto;cursor:pointer}
/* Cream disc with the up chevron, styled like the info button; it turns to point down when the next step is below. */
.training-jump-arrow {position:absolute;top:18px;left:50%;transform:translateX(-50%);width:48px;height:48px;padding:0;display:grid;place-items:center;background:var(--disc-fill);color:var(--disc-glyph);border:2px solid var(--ink);border-radius:50%;box-shadow:0 var(--button-depth) var(--button-drop)}
.training-jump-arrow svg {width:28px;height:28px}
.training-jump-arrow.points-down svg {transform:rotate(180deg)}
.training-floating-help {position:absolute;right:12px;bottom:12px}
.training-floating-controls button:focus-visible {outline:3px solid #fff;outline-offset:4px}

.training-jump-arrow {transition:transform .3s cubic-bezier(.2,1.8,.5,1)}
button.training-jump-arrow:active:not(:disabled) {transform:translateX(-50%) scale(.86);transition:transform .08s ease-out}
.training-jump-arrow.points-down {top:auto;bottom:18px}
.training-jump-arrow[hidden] {display:none}
@media(prefers-reduced-motion:reduce){.training-jump-arrow{transition:none}
}

.training-track.is-complete {background:none}
.screen.evolution {background-image:var(--pattern-training)}
/* Let the unfinished Training region and its fill line reach both screen edges. */
.screen.evolution {padding-inline:0}
.training-map {padding-inline:0}