/* Pumpkin Smash menus (T258): Title and Pick your smasher. Warm autumn colours, chunky rounded buttons with dark
   outlines, almost no text. Every screen sits in one flex slot of the fit shell and never scrolls. */
:root { --ps-ink: #4a2a14; --ps-cream: #fff3d6; }
.menu-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#title.screen, #pick.screen { position: relative; padding: 0; justify-content: stretch; align-items: stretch; background: #f59a4e; }
.menu-wrap {
  position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px calc(14px + var(--rr-inset-right)) calc(12px + var(--rr-inset-bottom)) calc(14px + var(--rr-inset-left));
}

/* Chunky round buttons */
.big-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 64px; min-height: 64px; padding: 0 28px; border-radius: 24px; border: 4px solid var(--ps-ink);
  background: linear-gradient(#ffc45e, #ff9a2e 55%, #ee7a14); color: #fff; font: 900 1.7rem/1 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase; -webkit-text-stroke: 5px var(--ps-ink); paint-order: stroke fill;
  box-shadow: 0 6px 0 var(--ps-ink), 0 10px 14px rgba(43, 26, 14, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 80ms ease, box-shadow 80ms ease;
}
.big-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ps-ink), 0 3px 6px rgba(43, 26, 14, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.45); }
.big-btn.round { width: 64px; padding: 0; border-radius: 50%; font-size: 1.9rem; }
.big-btn.green { background: linear-gradient(#92e66a, #58b848 55%, #3f9a3a); }
.big-btn.blue { background: linear-gradient(#7fc4ff, #3a8fe0 55%, #2a6cc0); }
.big-btn .tri { width: 0; height: 0; border-style: solid; border-width: 15px 0 15px 26px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 0 0 var(--ps-ink)); margin-left: 2px; }
.big-btn .tri.left { border-width: 12px 20px 12px 0; border-color: transparent #fff transparent transparent; margin: 0 4px 0 0; }
.gear-ic { width: 34px; height: 34px; display: block; }

/* ---- Title ---- */
.title-logo { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 2px; }
.title-logo h1 {
  margin: 0; display: flex; flex-direction: column; align-items: center; line-height: 0.92; text-transform: uppercase; letter-spacing: 0.03em;
  font: 900 clamp(2rem, 11vw, 3.7rem)/0.92 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  -webkit-text-stroke: 0.2em var(--ps-ink); paint-order: stroke fill; color: #ffb347; text-shadow: 0 0.08em 0 var(--ps-ink), 0 0.12em 0.14em rgba(43, 26, 14, 0.4);
}
.title-logo h1 .lg-b { color: #7ee05a; font-size: 1.12em; margin-top: 0.03em; }
.title-logo h1 .lg-a { transform: rotate(-2deg); }
.title-logo h1 .lg-b { transform: rotate(1.5deg); }
#logo-pumpkin { width: clamp(52px, 17vw, 84px); height: clamp(52px, 17vw, 84px); display: block; flex: none; }
.title-stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 640px; }
#title-chars { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
.title-btns { flex: none; display: flex; align-items: center; justify-content: center; gap: 16px; padding-bottom: 6px; }
.title-btns .play { min-width: 190px; font-size: 2rem; }

/* ---- Pick your smasher ---- */
.pick-grid { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 760px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pick-card {
  position: relative; min-width: 64px; min-height: 64px; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; padding: 6px 6px 8px;
  border-radius: 22px; border: 4px solid var(--ps-ink); background: linear-gradient(#fff3d6, #ffd89a);
  box-shadow: 0 5px 0 var(--ps-ink), 0 9px 12px rgba(43, 26, 14, 0.3); cursor: pointer; font-family: inherit; color: var(--ps-ink);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 80ms ease; overflow: hidden; container-type: inline-size;
}
.pick-card:active { transform: translateY(4px); }
.pick-card canvas { flex: 1 1 auto; min-height: 0; width: 100%; display: block; pointer-events: none; }
.pick-name { flex: none; display: block; padding-top: 2px; font: 900 clamp(0.85rem, 4.4vw, 1.2rem)/1.15 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; text-align: center; white-space: nowrap; overflow: hidden; font-size: clamp(0.7rem, 7.6cqw, 1.25rem); }
.pick-card.sel { background: linear-gradient(#fff8c8, #ffe27a); border-color: #b86a0e; box-shadow: 0 5px 0 #b86a0e, 0 0 0 4px #ffe27a, 0 0 18px 6px rgba(255, 226, 122, 0.85); }
.pick-card.sel::after {
  content: "\2605"; position: absolute; right: 8px; top: 4px; font-size: 1.6rem; line-height: 1; color: #ffb000; -webkit-text-stroke: 3px var(--ps-ink); paint-order: stroke fill;
}
.pick-card.glow { animation: pick-glow 1.3s ease-in-out infinite; }
@keyframes pick-glow { 0%, 100% { box-shadow: 0 5px 0 #b86a0e, 0 0 0 4px #ffe27a, 0 0 14px 4px rgba(255, 226, 122, 0.7); } 50% { box-shadow: 0 5px 0 #b86a0e, 0 0 0 6px #fff3a0, 0 0 30px 12px rgba(255, 240, 150, 1); } }
.outfit-row { position: relative; z-index: 1; flex: none; display: flex; justify-content: center; gap: 8px; width: 100%; max-width: 760px; }
.outfit-btn {
  flex: 1 1 0; max-width: 150px; min-width: 64px; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 8px;
  border-radius: 16px; border: 3px solid var(--ps-ink); background: linear-gradient(#fff3d6, #ffd89a); box-shadow: 0 3px 0 var(--ps-ink); color: var(--ps-ink);
  font: 900 0.72rem/1.1 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.outfit-btn:active { transform: translateY(2px); }
.outfit-btn.sel { background: linear-gradient(#fff8c8, #ffe27a); border-color: #b86a0e; box-shadow: 0 3px 0 #b86a0e, 0 0 0 3px #ffe27a; }
.outfit-btn.locked { background: linear-gradient(#e6dccd, #c9bba6); color: #6a5240; }
.outfit-sw { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ps-ink); }
.outfit-btn.locked .outfit-sw { filter: grayscale(1) brightness(0.8); opacity: 0.7; }
.outfit-tx { display: flex; align-items: center; gap: 2px; min-width: 0; text-align: center; overflow: hidden; }
.outfit-tx .ic { width: 16px; height: 16px; flex: none; fill: #fff; stroke: var(--ps-ink); stroke-width: 2; }
.outfit-tx b { font-size: 0.95rem; }
@media (max-width: 420px) and (orientation: portrait) { .outfit-btn { flex-direction: column; gap: 2px; padding: 3px 4px; } .outfit-tx { font-size: 0.66rem; } }
.pick-bar { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; padding-bottom: 6px; }
.pick-bar .go { min-width: 190px; font-size: 2rem; }
@media (max-height: 420px) {
  .menu-wrap { padding-top: 6px; gap: 4px; padding-bottom: calc(8px + var(--rr-inset-bottom)); }
  .big-btn { min-height: 64px; }
  .title-btns .play, .pick-bar .go { font-size: 1.6rem; min-width: 160px; }
  .pick-grid { gap: 8px; }
}
@media (max-height: 340px) { .title-logo h1 { font-size: 1.7rem; } }
@media (prefers-reduced-motion: reduce) { .pick-card.glow { animation: none; } .big-btn, .pick-card { transition: none; } }
.game-shell.reduce-motion .pick-card.glow { animation: none; }
.game-shell.reduce-motion .big-btn, .game-shell.reduce-motion .pick-card { transition: none; }

/* ---- Icons (T259): an inline sprite in index.html; white fill, dark outline ---- */
.ic { width: 40px; height: 40px; display: block; fill: #fff; stroke: var(--ps-ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; paint-order: stroke fill; overflow: visible; }
.ic [fill="none"] { stroke: #fff; stroke-width: 2.4; paint-order: normal; }
.big-btn.xl { width: 92px; min-width: 92px; height: 92px; }
.big-btn.xl .ic { width: 52px; height: 52px; }
.big-btn.xl .tri { margin: 0; }

/* ---- Pause: an overlay over the frozen stage ---- */
.game-shell[data-screen="pause"] > .menu-bar { display: none; }
#pause.screen { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 30; padding: 12px calc(12px + var(--rr-inset-right)) calc(12px + var(--rr-inset-bottom)) calc(12px + var(--rr-inset-left)); background: rgba(43, 26, 14, 0.66); }
.pause-panel {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px 22px; max-width: 520px; padding: 18px 20px;
  border-radius: 28px; border: 4px solid var(--ps-ink); background: linear-gradient(#fff3d6, #ffd89a); box-shadow: 0 6px 0 var(--ps-ink), 0 14px 24px rgba(0, 0, 0, 0.4);
}
.icon-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 96px; }
.cap { font: 900 0.95rem/1 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; color: var(--ps-ink); letter-spacing: 0.02em; }
@media (orientation: portrait) { .pause-panel { max-width: 290px; } }
@media (max-height: 420px) {
  .pause-panel { flex-wrap: nowrap; gap: 14px; padding: 12px 16px; }
  .big-btn.xl { width: 72px; min-width: 72px; height: 72px; }
  .big-btn.xl .ic { width: 42px; height: 42px; }
  .icon-cell { width: 80px; gap: 6px; }
}

/* ---- Settings: big toggle tiles ---- */
#settings.screen { position: relative; padding: 0; justify-content: stretch; align-items: stretch; background: #f59a4e; }
.settings-wrap { justify-content: center; gap: 10px; }
.set-grid { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 560px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 140px)); gap: 12px; align-content: center; }
.set-grid .set-tile:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
.set-tile {
  position: relative; min-width: 64px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px;
  border-radius: 22px; border: 4px solid var(--ps-ink); cursor: pointer; font-family: inherit; color: #fff; container-type: inline-size;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 80ms ease, box-shadow 80ms ease;
  background: linear-gradient(#92e66a, #58b848 55%, #3f9a3a); box-shadow: 0 5px 0 var(--ps-ink), 0 9px 12px rgba(43, 26, 14, 0.3), inset 0 3px 0 rgba(255, 255, 255, 0.4);
}
.set-tile:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ps-ink), 0 3px 6px rgba(43, 26, 14, 0.3); }
.set-tile .ic { width: 48px; height: 48px; flex: none; }
.set-tile[aria-checked="false"] { background: linear-gradient(#e6d9c4, #c9b79a 55%, #b3a083); color: #6b5640; }
.set-tile[aria-checked="false"] .ic { opacity: 0.55; }
.set-tile::after {
  content: "\2713"; position: absolute; right: 8px; top: 6px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 900 1.05rem/1 system-ui, sans-serif; color: #fff; background: #2f9a3a; border: 3px solid var(--ps-ink);
}
.set-tile[aria-checked="false"]::after { content: "\2715"; background: #c0584a; }
.set-name { font: 900 clamp(0.72rem, 10cqw, 1.15rem)/1.05 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; text-align: center; white-space: normal; letter-spacing: 0; text-shadow: 0 2px 0 var(--ps-ink), 0 0 3px var(--ps-ink); }
.set-tile[aria-checked="false"] .set-name { text-shadow: none; }
@media (max-height: 420px) { .set-tile .ic { width: 40px; height: 40px; } .set-tile::after { width: 24px; height: 24px; font-size: 0.9rem; } }
.hud-btn.off { opacity: 0.6; }

/* ---- Level clear (T260): the smasher dances, three stars fill in one by one, the tally, the weapon, Next ---- */
#clear.screen { position: relative; padding: 0; justify-content: stretch; align-items: stretch; background: #f59a4e; }
.clear-wrap { justify-content: space-between; gap: 6px; }
.clear-hero { position: relative; flex: 1 1 0; min-height: 0; width: 100%; max-width: 420px; }
#clear-char { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.clear-panel { flex: none; width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px 10px; border-radius: 26px; border: 4px solid var(--ps-ink); background: linear-gradient(#fff3d6, #ffd89a); box-shadow: 0 5px 0 var(--ps-ink), 0 10px 16px rgba(43, 26, 14, 0.35); }
.clear-stars { display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 2vw, 14px); }
.cstar { position: relative; display: block; width: clamp(64px, 22vw, 96px); height: clamp(64px, 22vw, 96px); }
.cstar:nth-child(2) { margin-bottom: 12px; transform: scale(1.12); transform-origin: 50% 100%; }
.cstar svg { display: block; width: 100%; height: 100%; overflow: visible; fill: rgba(74, 42, 20, 0.22); stroke: var(--ps-ink); stroke-width: 1.6; stroke-linejoin: round; paint-order: stroke fill; }
.cstar.on svg { fill: #ffc21a; filter: drop-shadow(0 0 6px rgba(255, 214, 80, 0.9)); }
.cstar.on::before { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; height: 120%; margin: -60% 0 0 -60%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 160, 0.85), rgba(255, 244, 160, 0) 65%); z-index: -1; opacity: 0; }
.cstar.new::before { opacity: 1; }
.cstar.new svg { fill: #ffd84a; stroke: #b86a0e; filter: drop-shadow(0 0 10px rgba(255, 240, 120, 1)); }
.cstar.new::after { content: ""; position: absolute; right: -4%; top: -6%; width: 26%; height: 26%; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: clear-twinkle 1.1s ease-in-out infinite; }
.cstar.pop { animation: clear-pop 520ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.cstar.settled { animation: none; }
@keyframes clear-pop { 0% { transform: scale(0.1) rotate(-50deg); } 55% { transform: scale(1.5) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes clear-twinkle { 0%, 100% { transform: scale(0.5) rotate(0); opacity: 0.6; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.cstar:nth-child(2).pop { animation-name: clear-pop2; }
@keyframes clear-pop2 { 0% { transform: scale(0.1) rotate(-50deg); } 55% { transform: scale(1.62) rotate(10deg); } 100% { transform: scale(1.12) rotate(0); } }
.clear-tally, .clear-sum { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 22px); }
.tally { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.tally canvas { display: block; flex: none; }
.tally b { font: 900 clamp(1.5rem, 7vw, 2.2rem)/1 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; color: #fff; -webkit-text-stroke: 0.2em var(--ps-ink); paint-order: stroke fill; letter-spacing: 0.02em; min-width: 1.2ch; text-align: left; }
.tally.total { padding: 2px 16px 2px 8px; border-radius: 22px; border: 3px solid var(--ps-ink); background: linear-gradient(#ffe27a, #ffb42e); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5); }
.tally.total b { font-size: clamp(1.9rem, 9vw, 2.9rem); color: #fff; }
.tally.weapon { padding: 2px 8px; border-radius: 22px; border: 3px solid var(--ps-ink); background: linear-gradient(#dff3ff, #a8d4f2); }
.clear-chest { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; border-radius: 20px; border: 3px solid var(--ps-ink); background: linear-gradient(#c98a4a, #8a5326); }
.clear-chest[hidden] { display: none; }
.clear-chest svg { display: block; flex: none; width: 34px; height: 34px; fill: #e0a45c; stroke: var(--ps-ink); stroke-width: 1.5; stroke-linejoin: round; }
.clear-chest b { font: 900 clamp(1.2rem, 5.5vw, 1.7rem)/1 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; color: #fff; -webkit-text-stroke: 0.2em var(--ps-ink); paint-order: stroke fill; }
.clear-chest b.bank { color: #9dff7a; }
.clear-bar { position: relative; z-index: 1; flex: none; display: flex; justify-content: center; padding-bottom: 6px; }
.clear-bar .go { min-width: 200px; font-size: 2rem; }
@media (max-height: 420px) {
  .clear-panel { gap: 2px; padding: 6px 10px 8px; }
  .clear-bar .go { font-size: 1.6rem; min-width: 160px; }
  .tally b { font-size: 1.5rem; }
  .tally.total b { font-size: 1.9rem; }
  .clear-chest { min-height: 34px; }
  .clear-chest svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .cstar.pop, .cstar.new::after { animation: none; } }
.game-shell.reduce-motion .cstar.pop, .game-shell.reduce-motion .cstar.new::after { animation: none; }
@media (max-height: 400px) {
  .clear-wrap { gap: 0; padding-top: 2px; padding-bottom: calc(2px + var(--rr-inset-bottom)); }
  .clear-panel { gap: 2px; padding: 4px 10px 6px; border-width: 3px; border-radius: 20px; }
  .cstar { width: 46px; height: 46px; }
  .cstar:nth-child(2) { margin-bottom: 6px; }
  .tally { min-height: 36px; }
  .tally canvas { width: 30px !important; height: 30px !important; }
  .tally.weapon canvas { width: 40px !important; height: 40px !important; }
  .tally b { font-size: 1.3rem; }
  .tally.total b { font-size: 1.6rem; }
  .tally.total, .tally.weapon { border-width: 2px; min-height: 44px; }
  .clear-chest { min-height: 30px; border-width: 2px; padding: 0 10px 0 6px; }
  .clear-chest svg { width: 24px; height: 24px; }
  .clear-chest b { font-size: 1.1rem; }
  .clear-bar { padding-bottom: 2px; }
}

/* ---- Level map (T261): six worlds on one winding path, never scrolls ---- */
#map.screen { position: relative; padding: 0; justify-content: stretch; align-items: stretch; background: linear-gradient(#f59a4e, #c9732e); }
.map-wrap { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 8px; }
.map-field { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; order: 1; }
.map-field > canvas#map-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.map-nodes { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#map-char { position: absolute; display: block; pointer-events: none; z-index: 5; }
.map-bar { flex: none; order: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 4px; }
.map-total { display: inline-flex; align-items: center; gap: 6px; padding: 4px 16px 4px 10px; border-radius: 24px; border: 3px solid var(--ps-ink); background: linear-gradient(#fff3d6, #ffd89a); box-shadow: 0 4px 0 var(--ps-ink); min-height: 48px; }
.map-total .ic { width: 34px; height: 34px; fill: #ffc21a; }
.map-total b { font: 900 1.5rem/1 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; color: var(--ps-ink); }
.map-smasher canvas, .map-weapon canvas { width: 54px; height: 54px; display: block; pointer-events: none; }
.map-node {
  position: absolute; z-index: 2; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%;
  border: 4px solid var(--ps-ink); cursor: pointer; font-family: inherit; color: #fff; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  background: linear-gradient(#ffc45e, #ff9a2e 55%, #ee7a14); box-shadow: 0 4px 0 var(--ps-ink), 0 7px 10px rgba(43, 26, 14, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.45);
  transition: filter 80ms ease;
}
.map-node:active:not(.locked) { filter: brightness(1.12); }
.map-node .num { font: 900 var(--nf, 1.4rem)/1 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; -webkit-text-stroke: 0.2em var(--ps-ink); paint-order: stroke fill; letter-spacing: 0; }
.map-node.done { background: linear-gradient(#92e66a, #58b848 55%, #3f9a3a); }
.map-node.locked { background: linear-gradient(#cfc4b2, #a89c88 55%, #8f8470); cursor: default; box-shadow: 0 3px 0 var(--ps-ink); color: #efe6d6; }
.map-node.locked .num { opacity: 0.55; }
.map-node.cur { background: linear-gradient(#fff08a, #ffc21a 55%, #f59a0e); animation: map-pulse 1.1s ease-in-out infinite; z-index: 4; }
@keyframes map-pulse { 0%, 100% { box-shadow: 0 4px 0 var(--ps-ink), 0 0 0 4px rgba(255, 244, 150, 0.9), 0 0 14px 6px rgba(255, 240, 130, 0.8); } 50% { box-shadow: 0 4px 0 var(--ps-ink), 0 0 0 8px rgba(255, 250, 190, 0.95), 0 0 30px 14px rgba(255, 244, 150, 1); } }
.map-node:not(.locked) .lock { display: none; }
/* A level that is open on the save but not authored yet (T262): the grey locked look with three small dots instead of a padlock. */
.map-node.soon .lock { display: none; }
.map-node.soon::after { content: ""; position: absolute; left: 50%; bottom: -20%; width: 70%; height: 22%; transform: translateX(-50%);
  background: radial-gradient(circle, var(--ps-ink) 0 40%, transparent 44%) 0 50% / 33.3% 100% repeat-x; opacity: 0.7; pointer-events: none; }
.map-node .lock { position: absolute; right: -14%; bottom: -14%; width: 46%; height: 46%; fill: #ffd23a; stroke: var(--ps-ink); stroke-width: 2.4; stroke-linejoin: round; paint-order: stroke fill; overflow: visible; }
.map-node .lock [fill="none"] { stroke: #ffd23a; stroke-width: 2.6; paint-order: normal; }
.map-node .mstars { position: absolute; left: 50%; bottom: -26%; transform: translateX(-50%); display: flex; gap: 0; width: 118%; justify-content: center; pointer-events: none; }
.map-node .mstars svg { width: 36%; height: auto; aspect-ratio: 1; overflow: visible; fill: rgba(74, 42, 20, 0.35); stroke: var(--ps-ink); stroke-width: 2; stroke-linejoin: round; paint-order: stroke fill; }
.map-node .mstars svg.on { fill: #ffc21a; }
.map-node .mstars svg:nth-child(2) { transform: translateY(-14%); }
.map-node.shake { animation: map-shake 260ms ease; }
@keyframes map-shake { 0%, 100% { transform: translate(-50%, -50%); } 25% { transform: translate(calc(-50% - 5px), -50%); } 75% { transform: translate(calc(-50% + 5px), -50%); } }
@media (max-width: 420px) { .map-bar { gap: 6px; } .map-total { padding: 4px 10px 4px 6px; } .map-total .ic { width: 26px; height: 26px; } }
@media (max-width: 380px) and (orientation: portrait) { .map-bar { gap: 2px; padding: 0 0 4px; } .map-total { padding: 2px 6px 2px 4px; gap: 3px; } .map-total .ic { width: 22px; height: 22px; } .map-total b { font-size: 1.15rem; } }   /* 360 wide with the trophy: five buttons in a row (T376) */
@media (max-height: 420px) { .map-total .ic { width: 28px; height: 28px; } .map-total { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .map-node.cur, .map-node.shake { animation: none; } }
.game-shell.reduce-motion .map-node.cur, .game-shell.reduce-motion .map-node.shake { animation: none; }

/* ---- The ending and the credits (T292): the dance at the open gate, then "Game design: Kailey" ---- */
#ending.screen, #credits.screen { position: relative; padding: 0; justify-content: stretch; align-items: stretch; background: #f59a4e; }
.ending-scene { z-index: 1; pointer-events: none; }
.ending-wrap { z-index: 2; justify-content: space-between; }
.ending-h {
  margin: 4px 0 0; display: flex; flex-direction: column; align-items: center; text-align: center; text-transform: uppercase; letter-spacing: 0.03em;
  font: 900 clamp(1.3rem, 6.5vw, 2.2rem)/1 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  -webkit-text-stroke: 0.2em var(--ps-ink); paint-order: stroke fill; color: #fff3d6; text-shadow: 0 0.08em 0 var(--ps-ink);
}
.ending-h .eh-b { color: #ffd23a; font-size: 1.35em; margin-top: 0.05em; transform: rotate(-1.5deg); }
.ending-wrap .pick-bar .go { min-width: 170px; font-size: 1.8rem; }
.credits-wrap { justify-content: space-between; gap: 8px; }
.credits-card {
  position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 12px 6px;
  border-radius: 28px; border: 4px solid var(--ps-ink); background: linear-gradient(#fff3d6, #ffd89a); box-shadow: 0 6px 0 var(--ps-ink), 0 12px 20px rgba(43, 26, 14, 0.35);
}
.cr-text { flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; color: var(--ps-ink); }
.cr-crown { width: clamp(40px, 11vh, 64px); height: clamp(40px, 11vh, 64px); fill: #ffc21a; stroke: var(--ps-ink); stroke-width: 1.6; stroke-linejoin: round; paint-order: stroke fill; overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 214, 80, 0.8)); margin-bottom: -4px; }
.cr-main { margin: 0; font: 900 clamp(1.5rem, 8.2vw, 2.6rem)/1.05 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; letter-spacing: 0.01em; }
.cr-main .cr-name { display: block; font-size: 1.55em; color: #ee6a14; -webkit-text-stroke: 0.14em var(--ps-ink); paint-order: stroke fill; line-height: 1.05; }
.cr-studio { margin: 6px 0 0; font: 900 clamp(1rem, 4.6vw, 1.35rem)/1.1 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; }
.cr-names { margin: 0; font: 700 clamp(0.78rem, 3.4vw, 1rem)/1.2 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; opacity: 0.85; }
.cr-cast { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; }
#credits-cast { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.credits-wrap .pick-bar .go { min-width: 170px; font-size: 1.8rem; }
.credits-wrap .pick-bar .ic { width: 34px; height: 34px; }
@media (max-height: 420px) {
  .ending-h { font-size: clamp(1.1rem, 7vh, 1.6rem); }
  .ending-wrap .pick-bar .go, .credits-wrap .pick-bar .go { font-size: 1.5rem; min-width: 150px; }
  .credits-card { border-width: 3px; border-radius: 22px; }
}
/* the trophy button on the map (shown once the ending has been seen) */
.map-trophy .ic { width: 38px; height: 38px; fill: #ffd23a; }

/* ---- Weapons (T375): the Treasure Chest strip over four family cards; never scrolls ---- */
#weapons.screen { position: relative; padding: 0; justify-content: stretch; align-items: stretch; background: #f59a4e; }
.weapons-wrap { gap: 8px; }
.chest-ic { fill: #e0a45c; }
.chest-strip {
  position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; gap: clamp(4px, 2vw, 12px); max-width: 100%; min-height: 52px; padding: 4px clamp(8px, 3vw, 16px);
  border-radius: 24px; border: 3px solid var(--ps-ink); background: linear-gradient(#c98a4a, #8a5326); box-shadow: 0 4px 0 var(--ps-ink);
}
.cs-piece { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; }
.cs-piece canvas { display: block; flex: none; }
.chest-strip b { font: 900 clamp(1rem, 4.8vw, 1.5rem)/1 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; color: #fff; -webkit-text-stroke: 0.2em var(--ps-ink); paint-order: stroke fill; letter-spacing: 0.02em; }
.cs-total { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 20px; border: 3px solid var(--ps-ink); background: linear-gradient(#ffe27a, #ffb42e); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5); }
.cs-total .chest-ic { width: 32px; height: 32px; flex: none; }
.cs-total b { font-size: clamp(1.15rem, 5.6vw, 1.7rem); }
.chest-strip.open .cs-total .chest-ic { animation: wp-chest-bounce 900ms ease; }
@keyframes wp-chest-bounce { 0%, 100% { transform: scale(1) rotate(0); } 20% { transform: scale(1.5) rotate(-12deg); } 40% { transform: scale(1.3) rotate(10deg); } 60% { transform: scale(1.4) rotate(-6deg); } }
.wp-grid { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 560px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wp-card {
  position: relative; min-width: 64px; min-height: 64px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 2px; padding: 6px 6px 6px;
  border-radius: 22px; border: 4px solid var(--ps-ink); background: linear-gradient(#fff3d6, #ffd89a);
  box-shadow: 0 5px 0 var(--ps-ink), 0 9px 12px rgba(43, 26, 14, 0.3); cursor: pointer; font-family: inherit; color: var(--ps-ink); overflow: hidden;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; transition: transform 80ms ease; container-type: inline-size;
}
.wp-card:active { transform: translateY(4px); }
.wp-card canvas { display: block; pointer-events: none; }
.wp-big { flex: 1 1 auto; min-height: 0; width: 100%; }
.wp-strip { flex: none; width: 100%; height: clamp(22px, 7vh, 34px); }
.wp-status { flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; pointer-events: none; }
.wp-status .ic { width: 24px; height: 24px; flex: none; }
.wp-status .wp-lock { fill: #ffd23a; }
.wp-status b { font: 900 clamp(0.85rem, 13cqw, 1.5rem)/1 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; color: #fff; -webkit-text-stroke: 0.2em var(--ps-ink); paint-order: stroke fill; }
.wp-tick { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ps-ink); background: #2f9a3a; color: #fff; font: 900 1.2rem/1 system-ui, sans-serif; font-style: normal; }
.wp-card.locked { background: linear-gradient(#e6dccd, #c9bba6); }
.wp-card.locked canvas { filter: grayscale(0.85) brightness(0.7); opacity: 0.8; }
.wp-card.locked .wp-status { padding: 1px 10px; align-self: center; border-radius: 16px; background: rgba(74, 42, 20, 0.55); }
.wp-card.afford { background: linear-gradient(#fff8c8, #ffe27a); border-color: #b86a0e; animation: wp-glow 1.2s ease-in-out infinite; }
.wp-card.afford canvas { filter: none; opacity: 1; }
.wp-card.afford .wp-status { background: rgba(74, 42, 20, 0.7); }
@keyframes wp-glow { 0%, 100% { box-shadow: 0 5px 0 #b86a0e, 0 0 0 4px #ffe27a, 0 0 14px 4px rgba(255, 226, 122, 0.7); transform: scale(1); } 50% { box-shadow: 0 5px 0 #b86a0e, 0 0 0 6px #fff3a0, 0 0 30px 12px rgba(255, 240, 150, 1); transform: scale(1.025); } }
.wp-card.sel { background: linear-gradient(#e4ffd0, #a8e68a); border-color: #2a7a2e; box-shadow: 0 5px 0 #2a7a2e, 0 0 0 3px #bff5a0; }
.wp-card.opening { animation: wp-open 900ms ease; }
.wp-card.opening::after { content: ""; position: absolute; left: -20%; top: -20%; width: 140%; height: 140%; pointer-events: none; background: radial-gradient(circle, rgba(255, 252, 200, 0.95), rgba(255, 230, 120, 0.6) 35%, rgba(255, 230, 120, 0) 65%); animation: wp-rays 900ms ease-out both; }
@keyframes wp-open { 0% { transform: scale(0.9); } 25% { transform: scale(1.1) rotate(-2deg); } 45% { transform: scale(1.06) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes wp-rays { 0% { opacity: 0; transform: scale(0.2); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }
.wp-card.shake { animation: wp-shake 300ms ease; }
@keyframes wp-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@media (max-height: 420px) { .wp-status .ic { width: 20px; height: 20px; } .wp-card.locked .wp-status { padding: 1px 6px; gap: 2px; } .wp-strip { height: clamp(20px, 9vh, 30px); } .wp-status { min-height: 30px; } .wp-tick { width: 30px; height: 30px; } .wp-card { padding: 4px; } }
@media (max-width: 380px) { .title-btns { gap: 10px; } .title-btns .play { min-width: 140px; font-size: 1.7rem; } }
@media (prefers-reduced-motion: reduce) { .wp-card.afford { animation: none; } }
.game-shell.reduce-motion .wp-card.afford { animation: none; }