/* Expedition screens keep the charcoal / coral palette of the starter collection. */
.profile-note { color: var(--muted); font: 9px/1.7 var(--mono); max-width: 310px; margin-top: -55px; }
.party-budget { padding: 14px 4px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.party-budget > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 9px var(--mono); }
.party-budget strong { font-size: 19px; color: var(--red); font-weight: 500; }
.party-budget small { font-size: 11px; color: var(--muted); }
.budget-track, .travel-health { height: 4px; margin-top: 9px; background: #393439; border-radius: 4px; overflow: hidden; }
.budget-track i, .travel-health i { display: block; height: 100%; background: var(--red); transition: width .3s; }
.pokemon-tile { padding-bottom: 25px; }
.tile-points { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); color: #f3e9e3; font: 9px var(--mono); background: #353033; border-radius: 3px; padding: 2px 5px; white-space: nowrap; }
.tile-points i { font-style: normal; font-size: 7px; color: #c0b5b6; }
.pokemon-tile.over-budget .tile-points { color: var(--red); }
.pokemon-tile.unlocked-boss .tile-number { color: #eac97e; }
.pokemon-tile.unlocked-boss:after { content: '✦'; position: absolute; top: 6px; right: 7px; color: #eac97e; }
.detail-trait strong { color: var(--red); }
.setup-card:disabled { opacity: .4; }
.trail-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font: 9px/1.5 var(--mono); color: var(--muted); }
.trail-status > span:first-child { color: var(--ink); }
.trail-status .status-dot { margin-right: 8px; }
.run-screen { padding: 36px; max-width: 1500px; margin: auto; }
/* Headings receive focus to announce screen changes; only controls need a focus ring. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
.run-heading { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.run-heading h2, .reward-heading h2, .capture-heading h2, .run-finish h2 { font-weight: 500; font-size: clamp(27px, 3vw, 42px); letter-spacing: -.06em; margin: 9px 0 12px; line-height: 1.15; }
.run-heading h2 span, .reward-heading h2 span, .capture-heading h2 span, .run-finish h2 span, .event-copy h2 span { color: var(--red); }
.run-heading > div > p:last-child, .reward-heading > p:last-child, .capture-heading > p:last-child { color: var(--muted); font-size: 13px; line-height: 1.7; }
.map-progress { display: flex; align-items: center; flex: 0 0 auto; gap: 13px; padding-left: 24px; border-left: 1px solid var(--line); }
.map-progress strong { font: 42px var(--mono); color: var(--red); }
.map-progress > span { font: 8px/1.9 var(--mono); color: var(--muted); }
.map-panel { border: 1px solid #494043; border-radius: 12px; overflow: hidden; background: #1e1d20; }
.map-topline { display: flex; justify-content: space-between; gap: 12px; padding: 19px 24px; border-bottom: 1px solid #383236; color: #c0b4b5; font: 9px var(--mono); letter-spacing: .08em; }
.map-topline .status-dot { margin-right: 8px; }
.map-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #8b4847 #211d21; }
.path-map { position: relative; height: 360px; min-width: 960px; background: radial-gradient(ellipse at 20% 60%, #ef615908, transparent 60%), radial-gradient(#9e77751a 1px, transparent 1px); background-size: auto, 16px 16px; isolation: isolate; }
.path-map > svg { position: absolute; width: 100%; height: 100%; inset: 0; z-index: -1; }
.path-map path { stroke: #595052; stroke-width: 1.7; fill: none; opacity: .65; }
.path-map path.lane-switch { stroke: #927875; stroke-dasharray: 4 5; }
.path-map path.traversed { stroke: #9d8987; stroke-width: 2.5; opacity: .85; }
.path-map path.reachable { stroke: var(--red); stroke-width: 3; opacity: 1; }
.map-contour { position: absolute; z-index: -2; width: 360px; height: 200px; border: 1px solid #ad8b7710; border-radius: 50%; box-shadow: 0 0 0 25px #ad8b7706, 0 0 0 50px #ad8b7704, 0 0 0 75px #ad8b7703; pointer-events: none; }
.contour-one { left: 5%; top: 40px; transform: rotate(-25deg); }
.contour-two { right: 9%; top: 60px; transform: rotate(25deg); }
.path-node { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #786e71; background: #29262b; color: #c2b6bc; transform: translate(-50%, -50%); box-shadow: 0 0 0 5px #1e1d20; font: 23px var(--sans); }
.path-node > small { position: absolute; top: 51px; color: #847a80; font: 8px var(--mono); }
.path-node.node-elite { border-color: #9c787c; color: #d7a5a4; }
.path-node.node-shop { color: #d2c195; border-color: #807655; }
.path-node.node-mystery { color: #b7acd2; border-color: #736885; }
.path-node:hover { background: #423037; border-color: #dba59b; transform: translate(-50%, -50%) scale(1.1); }
.path-node.available { border-color: var(--red); background: #522d31; color: #ffb4a9; box-shadow: 0 0 0 5px #ed62591a, 0 0 22px #ef615928; }
.path-node.available small { color: #edaa9f; }
.path-node.inspected { outline: 2px solid var(--ink); outline-offset: 6px; }
.path-node.visited { background: #302d30; border-color: #796b6b; color: #b9a9a5; }
.path-node.current { background: var(--red); border-color: var(--red); color: #20181a; }
.map-legend { display: flex; align-items: center; gap: 25px; padding: 15px 24px; border-top: 1px solid #383236; color: var(--muted); font: 10px var(--mono); }
.map-legend > span { display: flex; align-items: center; gap: 8px; }
.map-legend b { font: 18px var(--sans); color: #ddd0cd; }
.map-legend .legend-elite b { color: #d7a5a4; }.map-legend .legend-shop b { color: #d2c195; }.map-legend .legend-mystery b { color: #b7acd2; }
.map-legend .map-scroll-note { margin-left: auto; font-size: 8px; color: #898086; }
.guardian-banner { width: 100%; display: flex; align-items: center; gap: 17px; margin: 14px 0 24px; padding: 16px 22px; background: #231e21; border: 1px solid #473436; border-radius: 8px; text-align: left; }
.guardian-sigil { color: var(--red); font-size: 28px; }
.guardian-banner div { display: grid; gap: 5px; }
.guardian-banner strong { font-size: 13px; font-weight: 500; }.guardian-banner div span { color: var(--muted); font-size: 11px; line-height: 1.6; }
.guardian-banner > b { margin-left: auto; font: 10px var(--mono); color: #df8e88; white-space: nowrap; }
.guardian-banner:hover, .guardian-due { border-color: var(--red); background: #352429; }
.map-bottom { display: grid; grid-template-columns: 1.1fr 1.1fr .8fr; gap: 20px; }
.map-bottom > article { min-width: 0; padding: 23px; background: #1d1c1f; border: 1px solid var(--line); border-radius: 8px; }
.route-inspector h3 { display: flex; align-items: center; gap: 10px; margin: 15px 0 10px; font-size: 21px; letter-spacing: -.04em; font-weight: 500; }
.route-inspector h3 span { color: var(--red); }
.route-inspector > p:not(.eyebrow), .map-journal > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.8; }
.node-reward { display: grid; gap: 7px; border-top: 1px solid var(--line); padding: 16px 0; margin-top: 16px; }
.node-reward > span { font: 8px var(--mono); color: var(--muted); }.node-reward strong { font-size: 12px; font-weight: 500; }
.route-inspector .end-turn-button { width: 100%; justify-content: space-between; font-size: 12px; }
.travel-party { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 12px; margin-top: 18px; }
.travel-companion { min-width: 0; display: flex; align-items: center; gap: 8px; }.travel-companion img { width: 40px; height: 40px; image-rendering: pixelated; }.travel-companion > div { flex: 1; min-width: 0; }.travel-companion strong { font-size: 11px; font-weight: 500; display: block; }.travel-companion span { display: block; margin-top: 4px; font: 8px var(--mono); color: var(--muted); }.travel-health { height: 3px; margin-top: 6px; }.travel-companion.exhausted { opacity: .45; }
.satchel-stat { display: flex; gap: 16px; align-items: center; margin: 20px 0; }.satchel-stat strong { color: #dcb6af; font: 29px var(--mono); min-width: 40px; }.satchel-stat span { font: 8px/1.9 var(--mono); color: var(--muted); }
.charm-list { display: flex; flex-wrap: wrap; gap: 6px; }.charm-list span { font: 9px/1.6 var(--mono); border: 1px solid #594043; padding: 6px 8px; border-radius: 4px; }
.deck-inspect { margin-top: 18px; color: var(--muted); font-size: 11px; }.deck-inspect summary { cursor: pointer; color: #dbbbb6; }.deck-inspect > div { max-height: 230px; overflow: auto; margin-top: 10px; }.deck-inspect p { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 10px; }.deck-inspect p span { line-height: 1.6; }
.rarity-common { --rarity: #ada9a7; --rarity-dark: #403d40; }.rarity-rare { --rarity: #7eb4e0; --rarity-dark: #273b50; }.rarity-epic { --rarity: #c39bea; --rarity-dark: #47304f; }.rarity-legendary { --rarity: #efc67a; --rarity-dark: #524126; }
.game-card.rarity-rare, .game-card.rarity-epic, .game-card.rarity-legendary { border-color: var(--rarity); }.game-card.rarity-rare .card-info strong, .game-card.rarity-epic .card-info strong, .game-card.rarity-legendary .card-info strong { color: var(--rarity); }
.deck-inspect b { color: var(--rarity); font-weight: 500; }
.wallet { padding: 15px 22px; border: 1px solid #5b4834; background: #2c251e; border-radius: 8px; flex: 0 0 auto; }.wallet > span { display: block; font: 8px var(--mono); color: #c9b895; }.wallet strong { display: block; font: 26px var(--mono); margin-top: 8px; color: #f0cf8b; }
.merchant-note, .shop-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; color: var(--muted); font-size: 12px; line-height: 1.6; }.shop-footer { margin: 26px 0 0; }
.shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }.shop-item { background: #201f22; border: 1px solid var(--line); padding: 20px; border-radius: 9px; display: flex; flex-direction: column; }.shop-item.sold { opacity: .5; }.shop-art { height: 178px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 5px; background: radial-gradient(ellipse, #66555d27, transparent 75%); }.shop-art > img { width: 85px; height: 85px; image-rendering: pixelated; }.shop-charm { font-size: 70px; color: #dbb9ae; }.shop-item h3 { margin: 8px 0; font-size: 19px; font-weight: 500; letter-spacing: -.04em; }.shop-item > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.7; flex: 1; }.shop-buy { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid #70534a; background: #32282a; border-radius: 5px; font-size: 12px; }.shop-buy strong { font: 12px var(--mono); color: #e2bf7d; }.shop-buy:hover:enabled { background: #4b3034; border-color: var(--red); }.shop-buy:disabled { opacity: .45; }
.pack-art { width: 160px; height: 215px; display: flex; flex-direction: column; align-items: center; position: relative; padding: 24px 12px; color: var(--rarity); background: linear-gradient(120deg, #ffffff08, transparent 45%, #ffffff08), repeating-linear-gradient(35deg, transparent 0 18px, #ffffff03 18px 19px), var(--rarity-dark); border: 1px solid var(--rarity); border-radius: 6px; box-shadow: 0 15px 30px #0004; }
.pack-art:before, .pack-art:after { content: ''; position: absolute; height: 9px; left: 4px; right: 4px; background: repeating-linear-gradient(90deg, var(--rarity) 0 1px, transparent 1px 4px); opacity: .35; }.pack-art:before { top: 5px; }.pack-art:after { bottom: 5px; }.pack-seal { font: 9px var(--mono); letter-spacing: .2em; }.pack-emblem { font-size: 66px; line-height: 1; margin: 15px 0 10px; text-shadow: 0 0 20px #ffffff18; }.pack-art > strong { font: 500 17px var(--sans); letter-spacing: .03em; }.pack-art > small { font: 6px var(--mono); margin-top: 8px; letter-spacing: .05em; }
.shop-art .pack-art { transform: rotate(-7deg) scale(.72); }.shop-item:hover .pack-art { transform: rotate(0deg) scale(.76); transition: transform .25s; }
.reward-screen { max-width: 1100px; }.reward-heading { text-align: center; padding: 18px 0; }.reward-heading h2 { font-size: clamp(27px, 3vw, 39px); }.pack-opening { text-align: center; margin: 20px 0; }.open-pack-button { display: inline-flex; flex-direction: column; align-items: center; gap: 24px; border: 0; background: transparent; padding: 16px 30px; }.open-pack-button .pack-art { width: 192px; height: 254px; transform: rotate(-5deg); transition: transform .25s, box-shadow .25s; }.open-pack-button .pack-emblem { font-size: 88px; margin: 20px 0 17px; }.open-pack-button:hover .pack-art { transform: rotate(0) translateY(-8px); box-shadow: 0 22px 45px #0007, 0 0 30px #b398ac22; }.open-pack-label { display: flex; gap: 30px; align-items: center; font: 11px var(--mono); color: #edbbb2; }.open-pack-label b { font-size: 20px; }.pack-opening > p { color: var(--muted); font: 10px/1.8 var(--mono); }
.coin-reward { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 25px 0; color: #f0c981; }.coin-reward > span { font-size: 29px; }.coin-reward > strong { font: 34px var(--mono); }.coin-reward > div { font: 9px/1.6 var(--mono); }.coin-reward small { display: block; color: var(--muted); font-size: 9px; }
.reward-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }.reward-card { flex: 0 1 235px; border: 1px solid var(--rarity); border-radius: 9px; padding: 20px; background: linear-gradient(160deg, var(--rarity-dark), #222023 70%); box-shadow: 0 10px 30px #0003; }.reward-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--rarity); font: 8px var(--mono); text-transform: uppercase; }.reward-card-top b { font-weight: 400; }.reward-card > img { width: 70px; height: 70px; margin: 28px auto; image-rendering: pixelated; }.reward-card h3 { font-size: 20px; font-weight: 500; letter-spacing: -.04em; }.reward-card p { margin-top: 10px; color: #c8bec2; font-size: 12px; line-height: 1.7; }.reward-added { text-align: center; margin-top: 20px; color: var(--muted); font: 10px/1.7 var(--mono); }.reward-footer { margin: 30px 0; display: grid; justify-items: center; gap: 20px; }.reward-footer > p { color: var(--muted); font-size: 12px; text-align: center; line-height: 1.7; }.reward-claim { background: #d2b178; border-color: #d2b178; }.stage-actions { flex-wrap: wrap; }
.event-screen { padding-top: 65px; padding-bottom: 65px; }.event-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; max-width: 1050px; margin: auto; }.event-illustration { height: 370px; display: grid; place-items: center; position: relative; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse, #6c41433d, #211d21 70%); border: 1px solid #49383d; }.event-illustration > span { font-size: 126px; color: #dcada2; z-index: 1; }.event-illustration > p { position: absolute; bottom: 25px; color: #a48c90; font: 9px var(--mono); letter-spacing: .08em; }.event-orbit { position: absolute; width: 220px; height: 220px; border: 1px solid #b382732e; border-radius: 50%; box-shadow: 0 0 0 30px #b3827309, 0 0 0 60px #b3827306; }.event-copy h2 { font-size: 45px; font-weight: 500; letter-spacing: -.06em; line-height: 1.1; margin: 14px 0 20px; }.event-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.9; font-size: 14px; }.event-reward-note { color: #c9a6a0; font-size: 12px; padding: 20px 0; margin: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.capture-screen { max-width: 1100px; }.capture-heading { text-align: center; }.capture-art { margin: 20px auto; width: 220px; height: 220px; display: grid; place-items: center; position: relative; background: radial-gradient(ellipse, #e8bf7b23, transparent 70%); }.capture-art img { width: 190px; height: 190px; image-rendering: pixelated; }.capture-art span { position: absolute; top: 0; right: 15px; color: #eac786; font-size: 34px; }.capture-stats { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; font: 10px var(--mono); color: #d3b68d; margin: 22px 0 35px; }.capture-choice { text-align: center; padding: 28px; border: 1px solid #58413c; border-radius: 10px; background: #231e21; }.capture-choice h3 { font-size: 22px; font-weight: 500; }.capture-choice > p { margin: 12px auto 25px; color: var(--muted); font-size: 13px; line-height: 1.8; max-width: 630px; }.capture-choice > .text-button { display: block; margin: 25px auto 0; }.capture-replacements { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.capture-replacements > button { display: grid; justify-items: center; gap: 12px; background: #2b252a; border: 1px solid #61464b; border-radius: 7px; padding: 18px 10px; }.capture-replacements > button:hover { border-color: var(--red); background: #3e2b31; }.capture-replacements img { width: 70px; height: 70px; image-rendering: pixelated; }.capture-replacements strong { font-size: 12px; font-weight: 500; }.capture-replacements small { color: var(--muted); font: 9px/1.5 var(--mono); }
.run-finish { max-width: 700px; text-align: center; margin: 15px auto; }.finish-emblem { font-size: 90px; color: var(--red); margin-bottom: 30px; }.run-finish > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 20px 0; }.finish-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding: 25px 0; margin: 25px 0; border-block: 1px solid var(--line); }.finish-stats strong { display: block; font: 32px var(--mono); color: #e1b4a7; }.finish-stats span { display: block; margin-top: 8px; color: var(--muted); font: 8px/1.6 var(--mono); }.run-finish .travel-party { grid-template-columns: repeat(3,minmax(0,1fr)); text-align: left; padding: 15px 0; }
@keyframes pack-reveal { from { opacity: 0; transform: perspective(800px) translateY(35px) rotateY(55deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes coin-reveal { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .topbar-meta .run-stat:nth-child(2) { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
  .topbar-meta .run-stat:nth-child(2) span { font-size: 6px; }
  .topbar-meta .run-stat:nth-child(2) strong { font-size: 12px; color: #eac68b; }
  .topbar-meta .help-button { font-size: 0; display: grid; place-items: center; width: 25px; height: 32px; }
  .topbar-meta .help-button:after { content: '?'; font: 14px var(--mono); }
}
@media (prefers-reduced-motion: no-preference) { .pack-reveal .reward-card { animation: pack-reveal .6s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--reveal-index) * 120ms); }.coin-reward { animation: coin-reveal .45s both; }.capture-art img { animation: companion-idle 3.1s ease-in-out infinite; } }
@media (max-width: 1150px) { .run-screen { padding: 28px 24px; }.map-bottom { grid-template-columns: 1fr 1fr; }.map-journal { grid-column: 1 / -1; }.map-journal .satchel-stat { display: inline-flex; margin-right: 35px; }.shop-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.event-layout { gap: 35px; }.event-copy h2 { font-size: 35px; } }
@media (max-width: 750px) { .map-progress { display: none; }.map-topline > span:last-child { display: none; }.map-legend { gap: 15px; flex-wrap: wrap; }.map-legend .map-scroll-note { width: 100%; margin-left: 0; }.map-bottom { grid-template-columns: 1fr; gap: 14px; }.guardian-banner { gap: 12px; padding: 15px; flex-wrap: wrap; }.guardian-banner > div { flex: 1; min-width: 180px; }.guardian-banner > b { margin-left: 40px; }.shop-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.run-heading { align-items: flex-start; }.wallet { padding: 12px; }.wallet > span { font-size: 6px; }.wallet strong { font-size: 20px; }.merchant-note, .shop-footer { align-items: flex-start; flex-direction: column; gap: 12px; }.event-layout { grid-template-columns: 1fr; }.event-illustration { height: 240px; }.event-copy { padding: 0 10px; }.capture-replacements { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .run-screen { padding: 25px 14px; }.run-heading { gap: 15px; margin-bottom: 22px; }.run-heading h2 { font-size: 30px; }.run-heading > div > p:last-child { font-size: 12px; }.topbar-meta { gap: 12px; }.topbar-meta .run-stat { font-size: 8px; gap: 5px; }.topbar-meta .run-stat:first-child { display: none; }.map-topline, .map-legend { padding: 15px; }.map-bottom > article { padding: 20px; }.trail-status { font-size: 8px; }.trail-status > span:last-child { display: none; }.shop-screen .run-heading { flex-direction: column; }.wallet { display: flex; align-items: center; gap: 20px; }.wallet > span { font-size: 9px; }.wallet strong { margin: 0; }.shop-item { padding: 13px; }.shop-art { height: 145px; }.shop-art .pack-art { transform: rotate(-5deg) scale(.58); margin-top: -25px; }.shop-item:hover .pack-art { transform: rotate(0deg) scale(.6); }.shop-item h3 { font-size: 17px; }.shop-item > p:not(.eyebrow) { font-size: 11px; }.shop-item .eyebrow { font-size: 8px; }.reward-cards { gap: 12px; }.reward-card { flex-basis: min(270px,100%); }.reward-card > img { margin: 20px auto; }.reward-heading { padding-top: 10px; }.capture-choice { padding: 22px 14px; }.capture-replacements strong { font-size: 11px; }.capture-replacements small { font-size: 8px; }.capture-stats { gap: 12px; font-size: 8px; }.finish-stats { gap: 10px; }.run-finish .travel-party { grid-template-columns: repeat(2,minmax(0,1fr)); }.profile-note { font-size: 8px; }.collection-results { font-size: 8px; } }