/* The progress map (js/pathmap.js): one walkway through five biomes.
   Everything is flat colour with a thick black outline, like the mascot.
   Sizes are in --u, which is 1px when the map is 600px wide and shrinks a
   little on a phone, so the same layout fits a 340px column. */

.pm-map {
  container-type: inline-size;
  --u: clamp(0.8px, 0.1667cqw, 1.08px);
  --ink: #111;
  border: 4px solid var(--ink);
  border-radius: 28px;
  overflow: hidden;
  background: var(--ink);
  color: #1b1f33;
  text-shadow: none;
  user-select: none;
}

/* ---------- a biome: ground, seam, walkway ---------- */
.pm-biome {
  position: relative;
  background-color: var(--ground);
  background-image: var(--tile);
  background-size: 170px 170px;
}
.pm-flip { background-position: 60px 30px; }

.pm-garden {
  --ground: #b9e27c; --band: #ead9b5; --slab: #c5ccd3;
  --soil: #b98c63; --soil-done: #7d4d2c; --mark: #5f3a1f; --bit: #d9b48c; --lump: #b98c63;
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' fill='none' stroke='%2388c24f' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M28 44l-5-11M31 44V30M34 44l5-11M112 96l-5-11M115 96V82M118 96l5-11M58 150l-5-11M61 150v-14M64 150l5-11M140 30l-4-9M143 30V19'/%3E%3C/svg%3E");
}
.pm-desert {
  --ground: #f8dc9c; --band: #cf9150; --slab: #f6e2b4;
  --soil: #eec274; --soil-done: #e5b05c; --mark: #b98537; --bit: #c9c2b4; --lump: #d9b77a;
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' fill='none' stroke='%23e8c378' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M18 40q9-7 18 0t18 0M96 112q9-7 18 0t18 0M40 146q8-6 16 0M118 28q8-6 16 0'/%3E%3Cpath d='M82 62h.1M140 82h.1M24 100h.1M70 20h.1' stroke-width='6'/%3E%3C/svg%3E");
}
.pm-snow {
  --ground: #eef7fd; --band: #2f7fb0; --slab: #9dd6f2;
  --soil: #cfeaf8; --soil-done: #cfeaf8; --mark: #8fc3de; --bit: #fff; --lump: #fff;
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' fill='none' stroke='%23cfe6f4' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M30 30v14M23 37h14M118 100v14M111 107h14'/%3E%3Cpath d='M84 44h.1M146 34h.1M40 110h.1M70 150h.1M150 150h.1' stroke-width='8'/%3E%3C/svg%3E");
}
.pm-jungle {
  --ground: #49a86a; --band: #c98f52; --slab: #6f4721;
  --soil: #8a6238; --soil-done: #5f3f20; --mark: #3d2812; --bit: #b9824a; --lump: #8a6238;
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' fill='%233c9459'%3E%3Cpath d='M22 52q8-24 28-12q-10 20-28 12zM108 118q8-24 28-12q-10 20-28 12zM120 36q-4-18 12-20q6 16-12 20zM50 150q-4-18 12-20q6 16-12 20z'/%3E%3C/svg%3E");
}
.pm-volcano {
  --ground: #77637d; --band: #ff8f2e; --slab: #37303d;
  --soil: #4a414f; --soil-done: #3a323f; --mark: #29232d; --bit: #6b6170; --lump: #4a414f;
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' fill='none' stroke='%235f4d65' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 40l14 9 7-11 15 6M98 116l14 9 7-11 15 6M112 30l10 8 12-5M36 138l10-8 12 5'/%3E%3Cpath d='M78 70h.1M150 78h.1M30 96h.1' stroke='%23ff9a3c' stroke-width='6'/%3E%3C/svg%3E");
}

.pm-seam { position: absolute; left: 0; top: -1px; width: 100%; height: 26px; }
.pm-seam path { vector-effect: non-scaling-stroke; }
.pm-seam-fill { stroke: none; }
.pm-seam-line { fill: none; stroke: var(--ink); stroke-width: 3.5px; stroke-linecap: round; }
.pm-from-garden .pm-seam-fill { fill: #b9e27c; }
.pm-from-desert .pm-seam-fill { fill: #f8dc9c; }
.pm-from-snow .pm-seam-fill { fill: #eef7fd; }
.pm-from-jungle .pm-seam-fill { fill: #49a86a; }
.pm-from-volcano .pm-seam-fill { fill: #77637d; }

/* The walkway is one path drawn four times: outline, bed, then the paving
   (each slab's outline and the slab) as dashes along it. */
.pm-walk { position: absolute; left: 0; top: 0; width: 100%; overflow: visible; pointer-events: none; }
.pm-walk path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pm-w-edge { stroke: var(--ink); stroke-width: calc(52 * var(--u)); }
.pm-w-band { stroke: var(--band); stroke-width: calc(45 * var(--u)); }
.pm-w-rim { stroke: var(--ink); }
.pm-w-slab { stroke: var(--slab); }

/* garden: round stepping stones on gravel */
.pm-garden .pm-w-rim, .pm-garden .pm-w-slab { stroke-linecap: round; stroke-dasharray: 0.1px calc(39 * var(--u)); }
.pm-garden .pm-w-rim { stroke-width: calc(35 * var(--u)); }
.pm-garden .pm-w-slab { stroke-width: calc(29 * var(--u)); }
/* desert: rounded sandstone pavers on a packed-earth track */
.pm-desert .pm-w-rim, .pm-desert .pm-w-slab { stroke-linecap: round; stroke-dasharray: calc(13 * var(--u)) calc(36 * var(--u)); }
.pm-desert .pm-w-rim { stroke-width: calc(35 * var(--u)); }
.pm-desert .pm-w-slab { stroke-width: calc(29 * var(--u)); }
/* snow: a road of ice blocks; the bed shows through as the joints */
.pm-snow .pm-w-rim, .pm-jungle .pm-w-rim, .pm-volcano .pm-w-rim { display: none; }
.pm-snow .pm-w-slab { stroke-width: calc(45 * var(--u)); stroke-dasharray: calc(21 * var(--u)) calc(4 * var(--u)); }
/* jungle: a boardwalk; here the dashes are the gaps between planks */
.pm-jungle .pm-w-slab { stroke-width: calc(45 * var(--u)); stroke-dasharray: calc(3.5 * var(--u)) calc(13 * var(--u)); }
/* volcano: basalt slabs with lava glowing in the joints */
.pm-volcano .pm-w-slab { stroke-width: calc(45 * var(--u)); stroke-dasharray: calc(25 * var(--u)) calc(5 * var(--u)); }

/* ---------- the unit's sign ---------- */
.pm-sign {
  position: absolute; top: 34px; right: 3.5%; width: min(60%, 350px); z-index: 4;
  background: #f8e2b6; border: 3.5px solid var(--ink); border-radius: 12px 9px 13px 8px;
  padding: 10px 14px 11px; rotate: 1.2deg; color: #1b1f33;
}
.pm-flip .pm-sign { right: auto; left: 3.5%; rotate: -1.2deg; }
.pm-sign::before, .pm-sign::after {
  content: ''; position: absolute; top: 100%; width: 13px; height: 26px; z-index: -1;
  background: #b9824a; border: 3.5px solid var(--ink); border-top: 0; border-radius: 0 0 4px 4px;
}
.pm-sign::before { left: 16%; }
.pm-sign::after { right: 16%; }
.pm-unit {
  display: inline-block; background: var(--c); color: #fff; border: 2.5px solid var(--ink); border-radius: 8px;
  padding: 1px 8px; font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
/* The app's theme styles bare h2/p for its own (dark) surfaces; the sign is light wood, so reset what it adds. */
.pm-sign h2, .pm-sign p { text-shadow: none; -webkit-text-stroke: 0; text-transform: none; padding: 0; }
.pm-sign h2 { font-size: 21px; line-height: 1.15; margin: 5px 0 2px; letter-spacing: 0.01em; color: #1b1f33; text-wrap: balance; }
.pm-sign p { font-size: 13.5px; line-height: 1.3; font-weight: 600; color: #4a3f33; margin: 0; }
.pm-prog { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.pm-prog b { font-weight: 900; }
.pm-prog em { font-style: normal; font-weight: 900; font-size: 12px; letter-spacing: 0.06em; background: #ffc93c; border: 2.5px solid var(--ink); border-radius: 8px; padding: 0 7px; rotate: -4deg; }
.pm-pips { display: flex; gap: 4px; }
.pm-pips i { width: 15px; height: 15px; border: 2.5px solid var(--ink); border-radius: 50% 45% 52% 46%; background: #fff7e6; }
.pm-pips i.on { background: var(--c); }
.pm-critter { position: absolute; right: 12px; bottom: calc(100% - 5px); height: calc(var(--h) * var(--u)); width: auto; }

/* ---------- sprites ---------- */
.pm-sp { display: block; pointer-events: none; transform-origin: 50% 100%; }
/* Some keep moving (transform); new ones also pop out of the ground (scale).
   --t is how far into its pop a sprite already was when it was last redrawn. */
.pm-fly { --idle: pm-flutter 3.2s ease-in-out calc(var(--i, 0) * -700ms) infinite; }
.pm-flicker { --idle: pm-flicker 0.9s ease-in-out calc(var(--i, 0) * -300ms) infinite; }
.pm-waddle { --idle: pm-waddle 1.6s ease-in-out calc(var(--i, 0) * -500ms) infinite; }
.pm-sp { animation: var(--idle, none); }
.pm-grow { animation: pm-sprout 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--i, 0) * 110ms + 80ms - var(--t, 0ms)) both, var(--idle, none); }
@keyframes pm-sprout { from { scale: 0; } }
@keyframes pm-flutter { 25% { transform: translate(5px, -7px) rotate(6deg); } 50% { transform: translate(-3px, -11px) rotate(-5deg); } 75% { transform: translate(-6px, -4px) rotate(4deg); } }
@keyframes pm-flicker { 50% { transform: scale(0.94, 1.07); } }
@keyframes pm-waddle { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }

.pm-extra { position: absolute; z-index: 2; height: calc(var(--h) * var(--u)); width: auto; translate: -50% -100%; }
.pm-lump { position: absolute; z-index: 2; width: calc(36 * var(--u)); translate: -50% -100%; overflow: visible; }
.pm-lump path { fill: var(--lump); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.pm-lump .pm-mark { fill: none; stroke: var(--mark); stroke-width: 2.5; stroke-linecap: round; }

/* ---------- a lesson's plot of land ---------- */
.pm-plot { position: absolute; z-index: 2; width: calc(150 * var(--u)); height: calc(124 * var(--u)); translate: -50% calc(-74 * var(--u)); }
.pm-patch { position: absolute; left: 0; bottom: calc(14 * var(--u)); width: 100%; height: auto; overflow: visible; }
.pm-soil { fill: var(--soil); stroke: var(--ink); stroke-width: 3.2; stroke-linejoin: round; }
.pm-plot.done .pm-soil { fill: var(--soil-done); }
.pm-patch .pm-mark { fill: none; stroke: var(--mark); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.pm-bit { fill: var(--bit); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.pm-twig { fill: none; stroke: #7a5a3a; stroke-width: 3; stroke-linecap: round; }
.pm-hole { fill: #2c6f9c; stroke: var(--ink); stroke-width: 2.6; }
.pm-jungle .pm-top { fill: #e0b98a; }
.pm-volcano .pm-patch .pm-mark { opacity: 1; }
.pm-volcano .pm-plot.done .pm-patch .pm-mark { stroke: #ff8f2e; stroke-width: 3.2; }
.pm-plot .pm-sp { position: absolute; left: var(--x); bottom: calc(37 * var(--u)); height: calc(var(--h) * var(--u)); width: auto; translate: -50% 0; }
.pm-tag {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0; rotate: -2deg; white-space: nowrap;
  background: #fffaf0; color: #1b1f33; border: 2.5px solid var(--ink); border-radius: 9px 7px 10px 6px;
  padding: 1px 9px 2px; font-size: 13px; font-weight: 800; line-height: 1.35;
}
.pm-plot.locked .pm-tag { background: #ece6dc; color: #6f6a62; }
.pm-plot.done .pm-tag { background: #fff3c4; }

/* ---------- a lesson's stone: the button ---------- */
.pm-stone {
  position: absolute; z-index: 3; width: calc(90 * var(--u)); height: calc(70 * var(--u)); padding: 0;
  translate: -50% -50%; rotate: var(--tilt, 0deg);
  display: grid; place-items: center;
  border: 3.5px solid var(--ink); border-radius: 47% 53% 50% 50% / 56% 50% 50% 44%;
  background: #e2dcd2; color: var(--ink);
  transition: scale 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.pm-stone.max { width: calc(112 * var(--u)); height: calc(84 * var(--u)); border-radius: 50% 50% 46% 54% / 52% 56% 44% 48%; }
.pm-stone:hover { scale: 1.06; }
.pm-stone:active { scale: 0.95; }
.pm-stone:focus-visible { outline: 4px solid #7c5cff; outline-offset: 4px; box-shadow: 0 0 0 4px #fff; }
.pm-stone.done { background: #ffc93c; }
.pm-stone.current { background: var(--c); box-shadow: 0 0 0 calc(5 * var(--u)) #fff, 0 0 0 calc(8.5 * var(--u)) var(--ink); z-index: 5; }
.pm-stone.current:focus-visible { box-shadow: 0 0 0 calc(5 * var(--u)) #fff, 0 0 0 calc(8.5 * var(--u)) var(--ink); outline-offset: calc(10 * var(--u)); }
.pm-stone.champion { z-index: 5; }
.pm-glyph { width: calc(40 * var(--u)); height: calc(40 * var(--u)); display: block; }
.pm-stone.max .pm-glyph { width: calc(50 * var(--u)); height: calc(50 * var(--u)); }
.pm-stone.locked .pm-glyph { width: calc(34 * var(--u)); height: calc(34 * var(--u)); opacity: 0.8; }
.pm-flag { position: absolute; right: calc(-6 * var(--u)); bottom: 62%; width: calc(30 * var(--u)); rotate: 8deg; overflow: visible; }
.pm-stone.locked .pm-flag path:last-child { fill: #bdb6aa; }

/* Spud stands on the next lesson's stone. */
.pm-spud { position: absolute; left: 50%; bottom: 40%; translate: -50% 0; rotate: calc(var(--tilt, 0deg) * -1); animation: pm-hop 1.3s ease-in-out infinite; }
.pm-spud svg { display: block; height: calc(74 * var(--u)); width: auto; }
.pm-go {
  position: absolute; left: 50%; top: 100%; translate: -50% -35%; rotate: calc(var(--tilt, 0deg) * -1); white-space: nowrap;
  background: #fff; color: #1b1f33; border: 3px solid var(--ink); border-radius: 99px;
  padding: 1px 12px 2px; font-size: 13px; font-weight: 900; letter-spacing: 0.09em;
  animation: pm-nudge 1.3s ease-in-out infinite;
}
@keyframes pm-hop { 50% { transform: translateY(-6px); } }
@keyframes pm-nudge { 50% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
  .pm-map *, .pm-map *::before, .pm-map *::after { animation: none !important; transition: none !important; }
}