/* Fablepaws Adventure Map (handoff 2026-10-17). Chapter art is a background image (assets/map/);
   level nodes, the chapter plaque and the level sheet are real UI over its empty clearings. */
.map2 { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: #1f3d1c; isolation: isolate; }
.map2 > .h2-top { position: relative; z-index: 5; background: linear-gradient(180deg, rgba(8, 20, 28, .92), rgba(8, 20, 28, .55)); }
.mp-wrap { position: relative; flex: 1; min-height: 0; }
.mp-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.mp-scroll::-webkit-scrollbar { display: none; }
.mp-world { position: relative; width: min(100%, 600px); margin: 0 auto; background: #24451f top center / 100% auto no-repeat; }   /* keeps the art aspect, never stretched */

/* corruption haze over the boss lair until the chapter boss falls (TEMPORARY: a CSS haze — the art has the violet lair
   painted in, a separate transparent corruption overlay has been requested in SS_map_art_task.md) */
.mp-corrupt { position: absolute; left: 0; right: 0; pointer-events: none; transition: opacity 1.2s ease; }
.mp-corrupt.boss {
  background:
    radial-gradient(ellipse 40% 30% at 30% 55%, rgba(165, 75, 255, .4), transparent 70%),
    radial-gradient(ellipse 36% 28% at 75% 45%, rgba(165, 75, 255, .38), transparent 70%),
    radial-gradient(ellipse 85% 60% at 50% 50%, rgba(30, 6, 48, .6), rgba(30, 6, 48, .2) 70%, transparent);
  -webkit-mask: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
.mp-corrupt.cleansed { opacity: 0; }
.mp-next { position: absolute; left: 50%; translate: -50% 0; z-index: 2; display: grid; justify-items: center; gap: 1px; padding: 6px 10px; max-width: 42%; border-radius: 14px; text-align: center;
  background: rgba(20, 8, 34, .82); border: 1px solid #7b3fc4; box-shadow: 0 0 18px rgba(165, 75, 255, .4); color: #e6d4ff; }
.mp-next > .i { font-size: 18px; color: #d3adf7; }
.mp-next b { font: 15px/1.1 'Lilita One', var(--display); color: #fff; }
.mp-next small { font-size: 11px; line-height: 1.2; color: #d3adf7; }

/* level nodes */
.mp-node { position: absolute; z-index: 3; translate: -50% -50%; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #ffe7a3, #f5b335 55%, #b86b10); border: 3px solid #5c3208;
  box-shadow: inset 0 -4px 0 rgba(120, 60, 0, .55), inset 0 3px 3px rgba(255, 255, 255, .5), 0 5px 8px rgba(0, 0, 0, .55); transition: transform .15s; }
.mp-node b { font: 22px/1 'Lilita One', var(--display); color: #4a2408; text-shadow: 0 1px 0 rgba(255, 241, 184, .8); }
.mp-node:active { transform: scale(.94); }
.mp-node .mn-check { position: absolute; right: -6px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #3fbf7f; border: 2px solid #0f4d2c; color: #fff; font-size: 13px; }
.mp-node .mn-check .i { stroke-width: 3.5; }
.mp-node.available { width: 64px; height: 64px; animation: nodePulse 1.4s ease-in-out infinite; }
.mp-node.available b { font-size: 26px; }
@keyframes nodePulse { 50% { box-shadow: inset 0 -4px 0 rgba(120, 60, 0, .55), inset 0 3px 3px rgba(255, 255, 255, .5), 0 0 0 6px rgba(255, 209, 102, .45), 0 0 22px 6px rgba(255, 209, 102, .6); } }
.mp-node.locked { background: radial-gradient(circle at 50% 35%, #8c8c8c, #5a5a5a 55%, #343434); border-color: #1c1c1c; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .45), 0 4px 6px rgba(0, 0, 0, .5); }
.mp-node.locked b { position: absolute; bottom: -8px; font-size: 13px; color: #ddd; text-shadow: 0 1px 2px #000; }
.mp-node.locked > .i { font-size: 22px; color: #e8e8e8; }
.mp-node.boss { width: 82px; height: 82px; background: radial-gradient(circle at 50% 40%, #6a2fa0, #2b0f45 70%); border: 4px solid #e0a83a; box-shadow: 0 0 18px rgba(165, 75, 255, .7), 0 6px 10px rgba(0, 0, 0, .6); }
.mp-node.boss .mn-boss { font-size: 44px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.mp-node.boss b { position: absolute; bottom: -12px; min-width: 30px; padding: 3px 6px; border-radius: 10px; font-size: 15px; background: linear-gradient(180deg, var(--gold1), var(--gold4)); border: 2px solid #5c3208; }
.mp-node.boss.locked { filter: grayscale(.6) brightness(.75); }
.mp-node.boss.available { animation: bossPulse 1.6s ease-in-out infinite; }
@keyframes bossPulse { 50% { box-shadow: 0 0 0 6px rgba(165, 75, 255, .35), 0 0 30px 8px rgba(165, 75, 255, .8); } }
.mp-node.sel { outline: 3px solid #fff; outline-offset: 4px; }
.mp-node.boss.sel { outline-offset: 6px; }

/* chapter plaque (top-left, over the map) */
.mp-chapter { position: absolute; z-index: 6; top: 8px; left: max(10px, env(safe-area-inset-left)); display: grid; grid-template-columns: auto auto auto; align-items: center; column-gap: 10px;
  padding: 7px 8px 7px 12px; border-radius: 12px; text-align: left; color: #fff3d6;
  background: linear-gradient(180deg, rgba(110, 70, 34, .95), rgba(60, 36, 16, .95)); border: 2px solid #c58b2c; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.mp-chapter span { display: flex; flex-direction: column; }
.mp-chapter b { font: 16px/1.05 'Lilita One', var(--display); }
.mp-chapter small { font: 12px/1.2 'Lilita One', var(--display); color: #f6dfb0; }
.mp-chapter em { font-style: normal; display: flex; align-items: center; gap: 3px; font: 13px/1 'Lilita One', var(--display); color: var(--gold1); }
.mp-chapter em .i { color: #3fbf7f; stroke-width: 3; }
.mp-chapter > .i { color: var(--gold1); font-size: 16px; }

/* selected level: a compact bottom sheet over the map (never over the top of the map) */
.mp-sheet { position: absolute; z-index: 6; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: 8px;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head play" "row play" "status play"; gap: 4px 10px; align-items: center;
  padding: 10px 10px 10px 12px; border-radius: 16px; color: #f6ecd6;
  background: linear-gradient(180deg, rgba(16, 44, 48, .96), rgba(6, 20, 24, .96)); border: 2px solid #c58b2c; box-shadow: 0 -4px 16px rgba(0, 0, 0, .5); }
.ms-head { grid-area: head; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ms-num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 17px/1 'Lilita One', var(--display); color: #4a2408;
  background: radial-gradient(circle at 50% 35%, #ffe7a3, #f5b335 55%, #b86b10); border: 2px solid #5c3208; }
.ms-num.boss { background: radial-gradient(circle at 50% 40%, #8a4fc0, #2b0f45); color: #fff; border-color: #e0a83a; }
.ms-title { min-width: 0; display: flex; flex-direction: column; }
.ms-title b { font: 17px/1.1 'Lilita One', var(--display); color: var(--gold1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-title small { font-size: 12px; color: var(--t2); }
.ms-row { grid-area: row; display: flex; align-items: center; gap: 8px; }
.ms-foes { font-size: 20px; letter-spacing: 1px; }
.ms-foes .wv { margin: 0 4px; font-size: 14px; color: var(--t3); }
.ms-row small { font-size: 11px; color: var(--t3); }
.ms-status { grid-area: status; font-size: 12px; }
.ms-status span { display: inline-flex; align-items: center; gap: 4px; }
.st-ok { color: #6fdc9f; } .st-now { color: var(--gold1); } .st-lock { color: #ffa39e; }
.ms-status .i { font-size: 13px; }
.ms-play.ui-btn { grid-area: play; width: 116px; height: 62px; border-width: 8px 16px; font: 22px/1 'Lilita One', var(--display); }
.ms-play.ui-btn .i { font-size: 24px; }
.ms-play.ui-btn:disabled { filter: grayscale(.9) brightness(.7); opacity: 1; animation: none; }

/* chapters dialog */
.ch-list { display: flex; flex-direction: column; gap: 8px; }
.ch-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; text-align: left; background: rgba(0, 0, 0, .45); border: 1px solid var(--gold6); }
.ch-item.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(250, 173, 20, .3); }
.ch-item > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ch-item b { font: 16px/1.1 'Lilita One', var(--display); color: #fff3d6; }
.ch-item small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--t2); }
.ch-item.locked { opacity: .6; }
.ch-n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 16px/1 'Lilita One', var(--display); color: #4a2408;
  background: radial-gradient(circle at 50% 35%, #ffe7a3, #f5b335 55%, #b86b10); border: 2px solid #5c3208; }
.ch-item.locked .ch-n { background: #555; color: #ddd; border-color: #222; }

@media (max-height: 700px) {

  .ms-play.ui-btn { width: 104px; height: 56px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .mp-node.available, .mp-node.boss.available { animation: none; } }

/* art slots (assets/art/): skins and faces used once the files are delivered */
.mp-node.has-skin { background: var(--skin) center / contain no-repeat; border: 0; box-shadow: none; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .55)); }
.mp-node.locked.has-skin, .mp-node.boss.locked.has-skin { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5)); }
.mp-node.boss.has-skin { width: 92px; height: 92px; }
.mp-node.available.has-skin { animation: skinPulse 1.4s ease-in-out infinite; }
@keyframes skinPulse { 50% { filter: drop-shadow(0 0 10px #ffd666) drop-shadow(0 0 22px rgba(255, 209, 102, .7)); } }
.mp-node .boss-face { width: 62%; height: 62%; border-radius: 50%; object-fit: cover; }
.ms-foes .art.foe { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; vertical-align: middle; background: rgba(0, 0, 0, .3); margin-right: 2px; }
.mp-corrupt.has-art { background-size: 100% 100%; background-repeat: no-repeat; -webkit-mask: none; mask: none; }
.ch-thumb { flex: none; width: 72px; height: 40px; border-radius: 8px; object-fit: cover; border: 1px solid var(--gold6); }
.ch-item.locked .ch-thumb { filter: grayscale(.7) brightness(.6); }
/* mouse drag-to-pan (screens-map.js) */
.mp-scroll { cursor: grab; }
.mp-scroll.dragging { cursor: grabbing; }
.mp-scroll.dragging .mp-node { pointer-events: none; }

/* ---------------------------------------------------------------- battle stars (src/stars.js, 2026-10-19) */
.stars { display: inline-flex; align-items: flex-end; gap: 2px; line-height: 0; }
.stars i { display: block; width: 16px; height: 16px; }
.stars svg { width: 100%; height: 100%; fill: rgba(20, 14, 6, .75); stroke: rgba(255, 230, 160, .35); stroke-width: 1.2; stroke-linejoin: round; }
.stars i.on svg { fill: #ffcc33; stroke: #8a4b06; filter: drop-shadow(0 0 3px rgba(255, 196, 40, .8)); }
.stars.one i:not(:first-child) { display: none; }
/* result screen: three big stars, the middle one raised, the earned ones pop in one after another */
.stars.big { align-self: center; gap: 6px; margin: 6px 0 -2px; }
.stars.big i { width: 52px; height: 52px; }
.stars.big i:nth-child(2) { width: 64px; height: 64px; translate: 0 -10px; }
.stars.big svg { stroke-width: .9; }
.stars.big i.on { animation: starPop .45s cubic-bezier(.3, 1.7, .5, 1) both; animation-delay: calc(.35s + var(--i) * .28s); }
@keyframes starPop { from { scale: 0; rotate: -40deg; opacity: 0; } to { scale: 1; rotate: 0deg; opacity: 1; } }
.tr2-best { align-self: center; margin: 0; padding: 2px 12px; border-radius: 10px; font: 15px/1.2 'Lilita One', var(--display); color: #3a1a06;
  background: linear-gradient(180deg, var(--gold1), var(--gold4)); border: 1px solid #5c3208; }
@media (prefers-reduced-motion: reduce) { .stars.big i.on { animation: none; } }
@media (max-height: 700px) { .stars.big i { width: 40px; height: 40px; } .stars.big i:nth-child(2) { width: 50px; height: 50px; translate: 0 -7px; } }
/* map: small stars under a completed node, in the level sheet and the chapter plaque */
.mn-stars { position: absolute; left: 50%; top: calc(100% + 1px); translate: -50% 0; gap: 0; padding: 1px 4px 2px; border-radius: 8px; background: rgba(10, 8, 4, .72); box-shadow: 0 0 0 1px rgba(255, 204, 51, .35); pointer-events: none; }
.mn-stars i { width: 13px; height: 13px; }
.mn-stars i:nth-child(2) { translate: 0 2px; }
.ms-stars { margin-left: 8px; vertical-align: -3px; }
.ms-stars i { width: 18px; height: 18px; }
.mp-stars { display: inline-flex; align-items: center; gap: 3px; }
.mp-stars .stars i { width: 14px; height: 14px; }