:root {
  --purple: #3a1c71; --pink: #ff4fa3; --teal: #2de2d1; --gold: #ffd60a;
  --card: rgba(255,255,255,0.96); --ink: #3b1650;
  --font: "Trebuchet MS", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: var(--font); color: #fff; }
/* touch screens: no pull-to-refresh, no overscroll back/forward swipe */
html, body { overscroll-behavior: none; }
body {
  background: radial-gradient(ellipse at 50% 0%, #6a3fd1 0%, #3a1c71 45%, #1b0b3a 100%) fixed;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
#bubbles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
#bubbles i {
  position: absolute; bottom: -40px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), rgba(255,255,255,0.08) 60%);
  border: 1px solid rgba(255,255,255,0.25);
  animation: rise linear infinite;
}
@keyframes rise { to { transform: translateY(-115vh) translateX(20px); } }
.screen { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; }

/* ---------- buttons ---------- */
.btn {
  border: 0; border-radius: 999px; padding: 12px 22px; font-size: 18px; font-weight: 800; color: #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25), inset 0 2px 0 rgba(255,255,255,0.45); transition: transform .08s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.btn:active { transform: translateY(2px) scale(0.98); }
.btn-primary { background: linear-gradient(#5ef08a, #18b24a); }
.btn-secondary { background: linear-gradient(#ff8bd0, #e2338f); }
.btn-blue { background: linear-gradient(#6fc3ff, #2668e0); }
.btn-grey { background: linear-gradient(#b9b2c9, #7d7494); }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.6); font-size: 20px; color: #fff;
  background: linear-gradient(#8e5cf2, #5b2bb8); box-shadow: 0 3px 0 rgba(0,0,0,0.3); flex: none; line-height: 1; padding: 0;
}
.icon-btn.muted { background: linear-gradient(#9a90ad, #625878); }

/* ---------- login ---------- */
#screen-login { align-items: center; justify-content: center; overflow-y: auto; }
.login-wrap { width: min(420px, 92vw); text-align: center; padding: 20px 0; }
.logo {
  font-size: clamp(48px, 14vw, 76px); margin: 0; line-height: 0.95; letter-spacing: 1px;
  background: linear-gradient(#fff 10%, #ffd1f0 40%, #ff4fa3 75%, #c2187a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #5a0a6e) drop-shadow(0 8px 12px rgba(0,0,0,0.35));
}
.logo span { display: block; background: linear-gradient(#fff 10%, #b8fff6 40%, #2de2d1 75%, #0f8f8a); -webkit-background-clip: text; background-clip: text; }
/* Fizz Fair wordmark: pink "Fizz" with rising bubbles, mint "Fair", and a strip of fairground bunting */
.logo .logo-fizz { position: relative; display: inline-block; background: linear-gradient(#fff 10%, #ffd1f0 40%, #ff4fa3 75%, #c2187a); -webkit-background-clip: text; background-clip: text; }
.logo .logo-fair { margin-top: -0.04em; }
.logo-bub { position: absolute; display: block; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9) 0 18%, rgba(184,255,246,0.35) 40%, rgba(255,255,255,0.05) 70%); animation: logoBub 3.2s ease-in-out infinite; }
.logo-bub.b1 { width: 0.2em; height: 0.2em; right: -0.26em; top: 0.08em; }
.logo-bub.b2 { width: 0.13em; height: 0.13em; right: -0.42em; top: -0.12em; animation-delay: -1.1s; }
.logo-bub.b3 { width: 0.09em; height: 0.09em; right: -0.12em; top: -0.2em; animation-delay: -2.2s; }
@keyframes logoBub { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.08em); } }
.logo-bunting { width: min(260px, 70vw); height: 18px; margin: 8px auto 0; position: relative;
  background: conic-gradient(from 150deg at 50% 0, #ff4fa3 0 60deg, transparent 60deg) 0 2px / 26px 16px repeat-x,
              conic-gradient(from 150deg at 50% 0, #ffd23f 0 60deg, transparent 60deg) 13px 2px / 26px 16px repeat-x;
  filter: drop-shadow(0 2px 0 rgba(90,10,110,0.6)); }
.logo-bunting::before { content: ''; position: absolute; left: 0; right: 0; top: 1px; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.8); }
@media (prefers-reduced-motion: reduce) { .logo-bub { animation: none; } }
.tagline { margin: 10px 0 18px; font-size: 16px; opacity: 0.9; }
.card { background: var(--card); color: var(--ink); border-radius: 22px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); text-align: left; }
.card label { display: block; font-weight: 700; margin-bottom: 12px; font-size: 15px; }
.card input {
  display: block; width: 100%; margin-top: 4px; font-size: 18px; padding: 11px 14px; border-radius: 12px;
  border: 2px solid #d9c6f0; font-family: inherit; color: var(--ink); background: #fbf8ff; user-select: text; -webkit-user-select: text;
}
.card input:focus { outline: none; border-color: #a35cff; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.err { color: #d4145a; min-height: 20px; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chips:empty { display: none; }
.chip { border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 800; color: #fff; background: linear-gradient(#b07bff, #7a3fe0); font-size: 15px; }
.chips .hint { width: 100%; font-size: 13px; color: #7d5a9a; }

/* ---------- map ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top)); background: linear-gradient(rgba(30,10,60,0.85), rgba(30,10,60,0.4)); z-index: 2;
}
.who { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; min-width: 0; }
.who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#ff8bd0, #e2338f); border: 2px solid #fff; flex: none; }
.total-stars { font-weight: 900; font-size: 20px; background: rgba(0,0,0,0.3); padding: 4px 12px; border-radius: 999px; }
.star-ico { color: var(--gold); }
.tools { display: flex; gap: 8px; }
#map-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#map { position: relative; margin: 0 auto; width: min(520px, 100%); }
#map svg { position: absolute; inset: 0; pointer-events: none; }
.node {
  position: absolute; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 4px solid #fff;
  font-size: 26px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.35);
  background: radial-gradient(circle at 35% 30%, #9ff 0%, #2de2d1 35%, #0f8f8a 100%);
  box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 4px rgba(45,226,209,0.25);
}
.node.done { background: radial-gradient(circle at 35% 30%, #ffd1f0 0%, #ff4fa3 40%, #a3106a 100%); box-shadow: 0 5px 0 rgba(0,0,0,0.3); }
.node.current { animation: bob 1.4s ease-in-out infinite; box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 8px rgba(255,214,10,0.55); }
.node.locked { background: radial-gradient(circle at 35% 30%, #ccc, #8a849a 60%, #5c566d); color: #e8e4f0; cursor: default; font-size: 20px; }
@keyframes bob { 50% { transform: translateY(-7px) scale(1.05); } }
.node .stars { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); font-size: 18px; letter-spacing: -2px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.node .stars .on { color: var(--gold); }
.node .stars .off { color: rgba(255,255,255,0.35); }
.node-label { position: absolute; transform: translate(-50%, 0); font-size: 13px; font-weight: 700; opacity: 0.85; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 2px #000; }
.map-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 28px; font-weight: 900; text-align: center; white-space: nowrap; text-shadow: 0 3px 0 #5a0a6e; }

/* ---------- game ---------- */
#screen-game { padding-bottom: env(safe-area-inset-bottom); }
#hud { padding: 8px 10px 4px; padding-top: max(8px, env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 6px; z-index: 2; min-width: 0; container-type: inline-size; }
.hud-row { display: flex; align-items: center; gap: 8px; }
.hud-box {
  background: linear-gradient(rgba(255,255,255,0.22), rgba(255,255,255,0.08)); border: 2px solid rgba(255,255,255,0.45);
  border-radius: 16px; padding: 4px 10px; text-align: center;
}
.lbl { font-size: 12px; font-weight: 700; opacity: 0.85; text-transform: uppercase; letter-spacing: 1px; }
.big { font-size: 30px; font-weight: 900; line-height: 1.05; text-shadow: 0 2px 0 rgba(0,0,0,0.35); }
.moves-box { min-width: 78px; }
.moves-box.low .big { color: #ff9ab8; animation: pulse 0.8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.goals-box { flex: 1; min-width: 0; }
.goals { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.goal { display: flex; align-items: center; gap: 4px; font-weight: 900; font-size: 20px; text-shadow: 0 2px 0 rgba(0,0,0,0.35); }
.goal.done { color: #8dffb0; }
.goal canvas { flex: none; }
.score-row { gap: 12px; }
.score-label { font-size: 16px; white-space: nowrap; min-width: 110px; }
.score-label b { font-size: 20px; }
.starbar { position: relative; flex: 1; height: 16px; border-radius: 99px; background: rgba(0,0,0,0.35); border: 2px solid rgba(255,255,255,0.5); }
.starbar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, #ffd60a, #ff4fa3); transition: width .3s; }
.starbar .mk { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 20px; color: rgba(255,255,255,0.45); text-shadow: 0 1px 2px #000; transition: color .3s, transform .3s; }
.starbar .mk.on { color: var(--gold); transform: translate(-50%, -50%) scale(1.25); }
#board-wrap { flex: 1; position: relative; min-height: 0; }
#board { position: absolute; left: 0; top: 0; touch-action: none; }
/* while a level is open, the whole play area is ours: a swipe that starts beside the board is a
   candy swipe, never a browser gesture (the side panel may still scroll if it is taller than the screen) */
#screen-game { touch-action: none; overscroll-behavior: none; }

@media (orientation: landscape) and (min-width: 700px) {
  /* The panel and the board sit side by side as one centred group: the board area is sized to the
     board's shape (--board-aspect, set per level), so the panel stays right next to the board with a
     margin instead of being pinned to the far left edge of a wide screen. */
  #screen-game { flex-direction: row; justify-content: center; align-items: stretch; gap: clamp(8px, 1.5vw, 32px);
    padding: 0 max(clamp(8px, 1.5vw, 32px), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(clamp(8px, 1.5vw, 32px), env(safe-area-inset-left)); }
  #hud { flex: none; width: clamp(280px, 19vw, 360px); max-height: 100%; overflow-y: auto; overflow-x: hidden; justify-content: safe center; padding: 20px 14px; gap: 18px; }
  #screen-game #hud { touch-action: pan-y; overscroll-behavior: contain; } /* a tall side panel may scroll */
  #board-wrap { flex: 0 1 auto; min-width: 0; width: calc((100vh - 16px) * var(--board-aspect, 1) + 16px); width: calc((100dvh - 16px) * var(--board-aspect, 1) + 16px); }
  .hud-box { padding: 8px 14px; border-radius: 20px; }
  .big { font-size: 42px; }
  .lbl { font-size: 14px; }
  .goal { font-size: 24px; }
  .moves-box { flex: 1; }
  .score-label { font-size: 18px; text-align: center; }
  .score-label b { font-size: 26px; }
  .starbar { height: 20px; margin: 0 10px; }
  #hud .hud-row:first-child { flex-wrap: wrap; justify-content: center; }
  .goals-box { flex-basis: 100%; order: 3; }
  .score-row { flex-direction: column; align-items: stretch; }
  .starbar { flex: none; }
}

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(15,5,35,0.6); backdrop-filter: blur(3px); }
.modal-card {
  width: min(400px, 92vw); max-height: 90vh; overflow-y: auto; background: var(--card); color: var(--ink); border-radius: 26px;
  padding: 22px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.5); animation: popin .28s cubic-bezier(.2,1.6,.4,1);
  border: 4px solid #ffd1f0;
}
@keyframes popin { from { transform: scale(0.6); opacity: 0; } }
.modal-card h2 { margin: 0 0 4px; font-size: 30px; color: #c2187a; }
.modal-card h3 { margin: 0 0 12px; font-size: 18px; color: #7a3fe0; }
.modal-card p { margin: 8px 0; line-height: 1.4; }
.modal-card .small { font-size: 13px; color: #6b5a80; }
.modal-card .seed { font-family: Consolas, monospace; font-size: 12px; background: #f1e8ff; border-radius: 8px; padding: 4px 8px; display: inline-block; user-select: text; -webkit-user-select: text; word-break: break-all; }
.modal-goals { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 12px 0; }
.modal-goals .goal { color: var(--ink); text-shadow: none; font-size: 22px; }
.modal-goals .goal.done { color: #15a34a; }
.big-stars { font-size: 56px; letter-spacing: 4px; margin: 6px 0; }
.big-stars span { color: #ddd3ea; display: inline-block; }
.big-stars span.on { color: var(--gold); animation: starpop .45s cubic-bezier(.2,1.8,.4,1) both; text-shadow: 0 3px 0 #a37f00; }
@keyframes starpop { from { transform: scale(0) rotate(-90deg); } }
.modal-card .row { margin-top: 14px; }
.final-score { font-size: 28px; font-weight: 900; }
.menu-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 20; background: rgba(0,0,0,0.8); padding: 10px 18px; border-radius: 99px; font-weight: 700; }

/* ---------- hamburger (in-level menu) ---------- */
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 20px; height: 20px; vertical-align: middle; }
.burger i { display: block; height: 3px; border-radius: 3px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.3); }
.menu-list .btn { width: 100%; }

/* ---------- map popover ---------- */
.node { -webkit-touch-callout: none; }
.map-pop {
  position: absolute; z-index: 5; width: 250px; max-width: calc(100% - 16px); padding: 12px 14px 10px; border-radius: 18px;
  background: linear-gradient(#fffaff, #f6ecff); color: var(--ink); border: 3px solid #ffd1f0;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 0 3px rgba(255,79,163,0.35); pointer-events: none;
  animation: popfade .16s ease-out; text-align: left; font-size: 14px;
}
@keyframes popfade { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
.map-pop.below { animation-name: popfade-b; }
@keyframes popfade-b { from { opacity: 0; transform: translateY(-6px) scale(0.96); } }
.pop-arrow { position: absolute; bottom: -10px; width: 16px; height: 16px; margin-left: -8px; background: #f6ecff; border-right: 3px solid #ffd1f0; border-bottom: 3px solid #ffd1f0; transform: rotate(45deg); }
.map-pop.below .pop-arrow { bottom: auto; top: -10px; background: #fffaff; transform: rotate(225deg); }
.pop-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.pop-lv { font-weight: 900; font-size: 17px; color: #c2187a; white-space: nowrap; }
.pop-name { font-weight: 800; color: #7a3fe0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-goals { display: flex; flex-direction: column; gap: 3px; }
.pop-goal { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.pop-goal canvas { flex: none; }
.pop-meta { font-size: 12px; color: #6b5a80; margin: 4px 0 6px; }
.pop-best { font-weight: 700; padding: 5px 8px; border-radius: 10px; background: #efe3ff; }
.pop-best b { color: #c2187a; }
.pop-locked { font-weight: 800; color: #6b5a80; padding: 6px 8px; border-radius: 10px; background: #ece8f2; }
.pop-sub { font-weight: 900; font-size: 13px; margin: 8px 0 3px; color: #7a3fe0; text-transform: uppercase; letter-spacing: .5px; }
.star-row { white-space: nowrap; letter-spacing: -1px; }
.star-row .on, .lb-stars .on { color: #f5b800; text-shadow: 0 1px 0 #a37f00; }
.star-row .off, .lb-stars .off { color: #d8cde6; }

/* ---------- leaderboard table ---------- */
.lb { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.lb-row {
  display: grid; grid-template-columns: 34px 1fr auto auto auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px;
  background: #f4ecff; font-weight: 700;
}
.lb-row.me { background: linear-gradient(90deg, #ffe6f4, #fff3c4); box-shadow: inset 0 0 0 2px #ff8bd0; }
.lb-rank { font-size: 20px; text-align: center; font-weight: 900; color: #7a3fe0; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-stars { white-space: nowrap; letter-spacing: -1px; font-size: 15px; }
.lb-score { font-weight: 900; color: #c2187a; text-align: right; min-width: 54px; }
.lb-date { font-size: 11px; color: #8b7aa0; min-width: 40px; text-align: right; }
.lb-compact { gap: 3px; margin: 2px 0 0; }
.lb-compact .lb-row { grid-template-columns: 24px 1fr auto auto; gap: 6px; padding: 3px 7px; border-radius: 8px; font-size: 13px; }
.lb-compact .lb-rank { font-size: 15px; }
.lb-compact .lb-stars { font-size: 12px; }
.lb-empty { font-size: 13px; color: #8b7aa0; font-style: italic; padding: 6px 2px; }
.lb-box .lb-empty { text-align: center; padding: 14px; font-size: 15px; }
.your-best { margin: 8px 0 2px; font-weight: 700; padding: 8px 10px; border-radius: 12px; background: #efe3ff; }
.your-best b { color: #c2187a; font-size: 18px; }
.rank-pill { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: #7a3fe0; color: #fff; font-size: 13px; }
.rank-badge { font-weight: 900; color: #7a3fe0; }

/* ---------- Chocolate Factory (levels 25+) ---------- */
.map-zone { position: absolute; left: -60px; right: -60px; pointer-events: none; }
.zone-factory {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,220,180,0.08) 0 40px, transparent 41px),
    radial-gradient(circle at 80% 70%, rgba(255,220,180,0.06) 0 60px, transparent 61px),
    linear-gradient(180deg, rgba(74,38,18,0.55), rgba(107,58,31,0.35) 85%, rgba(107,58,31,0));
  border-bottom: 6px dashed rgba(243,210,176,0.35);
}
.map-banner {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; white-space: nowrap; pointer-events: none;
  font-size: 22px; font-weight: 900; padding: 6px 18px; border-radius: 99px; border: 3px solid #f3d2b0;
  background: linear-gradient(#9a5a32, #5b3018); color: #fff3e4; text-shadow: 0 2px 0 #2e1608; box-shadow: 0 4px 0 rgba(0,0,0,0.3);
}
.node.world-factory { background: radial-gradient(circle at 35% 30%, #f3d2b0 0%, #a8653a 40%, #4a2612 100%); box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 4px rgba(243,210,176,0.3); }
.node.world-factory.done { background: radial-gradient(circle at 35% 30%, #ffe0f0 0%, #e0407f 40%, #6b1a3a 100%); }
.node.world-factory.locked { background: radial-gradient(circle at 35% 30%, #d9c7b8, #8a7464 60%, #5c4a3e); }
.node.world-factory.current { box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 8px rgba(255,214,10,0.55); }
/* ---------- Butterfly Garden (levels 45+) ---------- */
.zone-garden {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,240,120,0.12) 0 30px, transparent 31px),
    radial-gradient(circle at 85% 45%, rgba(255,160,220,0.12) 0 45px, transparent 46px),
    radial-gradient(circle at 30% 80%, rgba(170,255,200,0.10) 0 55px, transparent 56px),
    linear-gradient(180deg, rgba(30,110,60,0.55), rgba(60,160,90,0.35) 85%, rgba(60,160,90,0));
  border-bottom: 6px dotted rgba(216,255,208,0.45);
}
.map-banner.banner-garden { border-color: #d8ffd0; background: linear-gradient(#4fc26b, #22803c); color: #f4fff0; text-shadow: 0 2px 0 #0e4220; }
.node.world-garden { background: radial-gradient(circle at 35% 30%, #e9ffd8 0%, #4fc26b 40%, #1d5e2e 100%); box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 4px rgba(216,255,208,0.35); }
.node.world-garden.done { background: radial-gradient(circle at 35% 30%, #fff4c2 0%, #f2a33a 40%, #7a3d0a 100%); }
.node.world-garden.locked { background: radial-gradient(circle at 35% 30%, #cfdccb, #7c8f78 60%, #4c5a49); }
.node.world-garden.current { box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 8px rgba(255,214,10,0.55); }
.tip-art { display: flex; justify-content: center; margin: 10px 0 6px; }
.tip-art canvas { border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.tip-list { text-align: left; margin: 8px 0; padding-left: 20px; line-height: 1.4; }
.tip-list li { margin: 6px 0; }
.tip-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.linkish { background: none; border: 0; padding: 2px 4px; font: inherit; color: #7a3fe0; text-decoration: underline; cursor: pointer; }
/* ---------- Cherry Cola Canyon (levels 65+) ---------- */
.zone-canyon {
  background:
    radial-gradient(circle at 20% 25%, rgba(255,90,120,0.16) 0 26px, transparent 27px),
    radial-gradient(circle at 80% 55%, rgba(255,200,140,0.14) 0 40px, transparent 41px),
    radial-gradient(circle at 35% 85%, rgba(255,120,90,0.12) 0 50px, transparent 51px),
    repeating-linear-gradient(170deg, rgba(120,40,30,0.0) 0 60px, rgba(120,40,30,0.18) 60px 64px),
    linear-gradient(180deg, rgba(110,30,40,0.62), rgba(190,90,50,0.38) 85%, rgba(190,90,50,0));
  border-bottom: 6px dashed rgba(255,214,201,0.45);
}
.map-banner.banner-canyon { border-color: #ffd6c9; background: linear-gradient(#e0405a, #8c1830); color: #fff2ee; text-shadow: 0 2px 0 #4a0812; }
.node.world-canyon { background: radial-gradient(circle at 35% 30%, #ffe2dc 0%, #e0405a 40%, #6a0f22 100%); box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 4px rgba(255,214,201,0.35); }
.node.world-canyon.done { background: radial-gradient(circle at 35% 30%, #fff1c9 0%, #d6782a 40%, #5c1e08 100%); }
.node.world-canyon.locked { background: radial-gradient(circle at 35% 30%, #dcc9c6, #8f7470 60%, #5a4441); }
.node.world-canyon.current { box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 8px rgba(255,214,10,0.55); }

/* ---------- Fizzwater Springs (levels 85+) ---------- */
.zone-springs {
  background:
    radial-gradient(circle at 18% 20%, rgba(182,255,240,0.22) 0 10px, transparent 11px),
    radial-gradient(circle at 26% 30%, rgba(182,255,240,0.16) 0 6px, transparent 7px),
    radial-gradient(circle at 78% 45%, rgba(182,255,240,0.2) 0 14px, transparent 15px),
    radial-gradient(circle at 60% 80%, rgba(95,227,192,0.18) 0 44px, transparent 45px),
    radial-gradient(ellipse at 30% 65%, rgba(20,140,120,0.22) 0 60px, transparent 61px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.0) 0 40px, rgba(182,255,240,0.08) 40px 43px),
    linear-gradient(180deg, rgba(8,80,88,0.66), rgba(30,160,140,0.4) 85%, rgba(30,160,140,0));
  border-bottom: 6px dashed rgba(182,255,240,0.45);
}
.map-banner.banner-springs { border-color: #d4fff4; background: linear-gradient(#22c7a3, #0b6e62); color: #effffb; text-shadow: 0 2px 0 #053a33; }
.node.world-springs { background: radial-gradient(circle at 35% 30%, #eafff8 0%, #22c7a3 40%, #07544b 100%); box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 4px rgba(182,255,240,0.35); }
.node.world-springs.done { background: radial-gradient(circle at 35% 30%, #fffbd0 0%, #3fb7e0 40%, #0a3d5c 100%); }
.node.world-springs.locked { background: radial-gradient(circle at 35% 30%, #c9dcd8, #6f8f8a 60%, #445a56); }
.node.world-springs.current { box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 8px rgba(255,214,10,0.55); }

/* ---------- Sundae Glacier (levels 105+) ---------- */
.zone-glacier {
  background:
    radial-gradient(circle at 15% 18%, rgba(255,255,255,0.35) 0 4px, transparent 5px),
    radial-gradient(circle at 72% 12%, rgba(255,255,255,0.3) 0 3px, transparent 4px),
    radial-gradient(circle at 40% 42%, rgba(255,255,255,0.28) 0 5px, transparent 6px),
    radial-gradient(circle at 85% 60%, rgba(255,255,255,0.3) 0 4px, transparent 5px),
    radial-gradient(ellipse at 22% 78%, rgba(255,179,207,0.28) 0 50px, transparent 51px),
    radial-gradient(ellipse at 78% 35%, rgba(201,255,233,0.24) 0 46px, transparent 47px),
    radial-gradient(ellipse at 55% 92%, rgba(255,246,220,0.26) 0 60px, transparent 61px),
    linear-gradient(160deg, rgba(220,236,255,0.0) 0 30%, rgba(220,236,255,0.12) 30% 34%, transparent 34%),
    linear-gradient(180deg, rgba(120,140,230,0.62), rgba(200,220,255,0.42) 85%, rgba(200,220,255,0));
  border-bottom: 6px dotted rgba(255,255,255,0.6);
}
.map-banner.banner-glacier { border-color: #ffffff; background: linear-gradient(#b7a6ff, #5a3fb0); color: #ffffff; text-shadow: 0 2px 0 #2c1a6e; }
.node.world-glacier { background: radial-gradient(circle at 35% 30%, #ffffff 0%, #b9c8ff 35%, #6a52d6 100%); box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 4px rgba(255,179,207,0.45); }
.node.world-glacier.done { background: radial-gradient(circle at 35% 30%, #fff6dc 0%, #ff8fb8 40%, #8a2a5c 100%); }
.node.world-glacier.locked { background: radial-gradient(circle at 35% 30%, #dcdbe8, #8a88a6 60%, #55536e); }
.node.world-glacier.current { box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 8px rgba(255,214,10,0.55); }
/* ---------- Candy Carnival (levels 130+) ---------- */
.zone-carnival {
  background:
    radial-gradient(circle at 12% 15%, rgba(255,214,10,0.55) 0 4px, transparent 5px),
    radial-gradient(circle at 30% 9%, rgba(79,195,255,0.55) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 14%, rgba(111,227,182,0.55) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,0.55) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0 70px, transparent 71px),
    radial-gradient(ellipse at 20% 80%, rgba(255,214,10,0.22) 0 55px, transparent 56px),
    radial-gradient(ellipse at 80% 60%, rgba(79,195,255,0.2) 0 50px, transparent 51px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 26px, rgba(255,79,139,0.10) 26px 52px),
    linear-gradient(180deg, rgba(214,36,110,0.62), rgba(255,159,67,0.45) 85%, rgba(255,159,67,0));
  border-bottom: 6px dashed rgba(255,214,10,0.7);
}
.map-banner.banner-carnival { border-color: #ffd60a; background: repeating-linear-gradient(90deg, #ff4f8b 0 18px, #d6246e 18px 36px); color: #ffffff; text-shadow: 0 2px 0 #6a0a36; }
.node.world-carnival { background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ffd60a 35%, #d6246e 100%); box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 4px rgba(79,195,255,0.5); }
.node.world-carnival.done { background: radial-gradient(circle at 35% 30%, #ffffff 0%, #6fe3b6 40%, #1f7f8f 100%); }
.node.world-carnival.locked { background: radial-gradient(circle at 35% 30%, #e8dbe0, #a6889a 60%, #6e5363); }
.node.world-carnival.current { box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 8px rgba(255,214,10,0.55); }
/* ---------- Fizzworks Night Fair (levels 155+) ---------- */
.zone-fireworks {
  background:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,0.75) 0 2px, transparent 3px),
    radial-gradient(circle at 36% 22%, rgba(255,255,255,0.6) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 62% 8%, rgba(255,255,255,0.7) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 30%, rgba(255,255,255,0.6) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 22% 30%, transparent 0 26px, rgba(255,214,10,0.45) 27px 29px, transparent 30px),
    radial-gradient(circle at 78% 18%, transparent 0 34px, rgba(255,79,163,0.42) 35px 37px, transparent 38px),
    radial-gradient(circle at 60% 55%, transparent 0 22px, rgba(111,227,255,0.4) 23px 25px, transparent 26px),
    radial-gradient(ellipse at 20% 82%, rgba(255,159,67,0.22) 0 55px, transparent 56px),
    radial-gradient(ellipse at 82% 76%, rgba(160,120,255,0.24) 0 50px, transparent 51px),
    linear-gradient(180deg, rgba(20,12,70,0.78), rgba(70,40,160,0.55) 80%, rgba(70,40,160,0));
  border-bottom: 6px dotted rgba(255,214,10,0.75);
}
.map-banner.banner-fireworks { border-color: #ffd60a; background: linear-gradient(#5b3fd6, #1e1460); color: #fff6c9; text-shadow: 0 2px 0 #0c0630; }
.node.world-fireworks { background: radial-gradient(circle at 35% 30%, #ffffff 0%, #b89cff 35%, #3a23a8 100%); box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 4px rgba(255,214,10,0.5); }
.node.world-fireworks.done { background: radial-gradient(circle at 35% 30%, #fffbe0 0%, #ffb03a 40%, #8a3a00 100%); }
.node.world-fireworks.locked { background: radial-gradient(circle at 35% 30%, #d8d4e8, #807a9e 60%, #4e4968); }
.node.world-fireworks.current { box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 8px rgba(255,214,10,0.55); }
/* ---------- Glowfizz Lantern Walk (levels 180+) ---------- */
.zone-lanterns {
  background:
    radial-gradient(ellipse at 16% 14%, rgba(255,150,60,0.55) 0 9px, rgba(255,150,60,0.18) 10px 22px, transparent 23px),
    radial-gradient(ellipse at 44% 26%, rgba(255,90,70,0.5) 0 8px, rgba(255,90,70,0.16) 9px 20px, transparent 21px),
    radial-gradient(ellipse at 74% 12%, rgba(255,205,80,0.55) 0 9px, rgba(255,205,80,0.18) 10px 22px, transparent 23px),
    radial-gradient(ellipse at 88% 48%, rgba(255,140,90,0.45) 0 8px, rgba(255,140,90,0.15) 9px 20px, transparent 21px),
    radial-gradient(ellipse at 10% 62%, rgba(255,190,90,0.45) 0 8px, rgba(255,190,90,0.15) 9px 20px, transparent 21px),
    radial-gradient(ellipse at 30% 86%, rgba(255,110,60,0.22) 0 60px, transparent 61px),
    linear-gradient(180deg, rgba(40,14,40,0.8), rgba(120,40,40,0.55) 80%, rgba(120,40,40,0));
  border-bottom: 6px dashed rgba(255,190,110,0.7);
}
.map-banner.banner-lanterns { border-color: #ffc46b; background: linear-gradient(#ff7a3a, #a2261c); color: #fff4dc; text-shadow: 0 2px 0 #4a0c06; }
.node.world-lanterns { background: radial-gradient(circle at 35% 30%, #fff3d6 0%, #ff9a4a 40%, #9c2a14 100%); box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 4px rgba(255,196,107,0.5), 0 0 18px rgba(255,150,60,0.6); }
.node.world-lanterns.done { background: radial-gradient(circle at 35% 30%, #fffbe0 0%, #ffd60a 40%, #a86400 100%); }
.node.world-lanterns.locked { background: radial-gradient(circle at 35% 30%, #e0d2cc, #8e7670 60%, #5a4642); box-shadow: 0 5px 0 rgba(0,0,0,0.3); }
.node.world-lanterns.current { box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 8px rgba(255,214,10,0.55), 0 0 22px rgba(255,150,60,0.7); }
/* ---------- Ferris Fizz Heights (levels 205+) ---------- */
.zone-ferris {
  background:
    radial-gradient(circle at 78% 30%, transparent 0 70px, rgba(255,255,255,0.35) 71px 74px, transparent 75px),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,0.4) 0 8px, transparent 9px),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.85) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 10%, rgba(255,255,255,0.7) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 56% 40%, rgba(255,230,120,0.8) 0 2px, transparent 3px),
    radial-gradient(circle at 12% 54%, rgba(255,140,220,0.8) 0 2px, transparent 3px),
    radial-gradient(ellipse at 24% 80%, rgba(120,220,255,0.25) 0 55px, transparent 56px),
    linear-gradient(180deg, rgba(20,60,140,0.72), rgba(80,150,230,0.5) 80%, rgba(80,150,230,0));
  border-bottom: 6px dotted rgba(217,243,255,0.8);
}
.map-banner.banner-ferris { border-color: #ffffff; background: linear-gradient(#4aa3ff, #1d4fb3); color: #ffffff; text-shadow: 0 2px 0 #0a2460; }
.node.world-ferris { background: radial-gradient(circle at 35% 30%, #ffffff 0%, #8fd0ff 35%, #1d4fb3 100%); box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 4px rgba(255,255,255,0.45); }
.node.world-ferris.done { background: radial-gradient(circle at 35% 30%, #fff0fb 0%, #ff7ad0 40%, #8a1a66 100%); }
.node.world-ferris.locked { background: radial-gradient(circle at 35% 30%, #d6dfe8, #75849e 60%, #48536a); }
.node.world-ferris.current { box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 8px rgba(255,214,10,0.55); }
/* ---------- Gumball Midway (levels 230+) ---------- */
.zone-gumball {
  background:
    radial-gradient(circle at 16% 22%, rgba(255,80,140,0.85) 0 7px, transparent 8px),
    radial-gradient(circle at 26% 30%, rgba(255,214,10,0.85) 0 6px, transparent 7px),
    radial-gradient(circle at 82% 16%, rgba(80,190,255,0.85) 0 7px, transparent 8px),
    radial-gradient(circle at 72% 62%, rgba(110,227,140,0.8) 0 6px, transparent 7px),
    radial-gradient(circle at 10% 72%, rgba(190,120,255,0.8) 0 6px, transparent 7px),
    radial-gradient(circle at 88% 84%, rgba(255,140,60,0.8) 0 7px, transparent 8px),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 18px, rgba(255,79,139,0.12) 18px 36px),
    linear-gradient(180deg, rgba(150,30,110,0.7), rgba(255,120,190,0.45) 80%, rgba(255,120,190,0));
  border-bottom: 6px dashed rgba(255,224,244,0.85);
}
.map-banner.banner-gumball { border-color: #ffffff; background: repeating-linear-gradient(135deg, #ff4f8b 0 14px, #e0246e 14px 28px); color: #ffffff; text-shadow: 0 2px 0 #6a0a3a; }
.node.world-gumball { background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ff9ccc 35%, #c0186a 100%); box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 4px rgba(255,255,255,0.45); }
.node.world-gumball.done { background: radial-gradient(circle at 35% 30%, #fffbe0 0%, #ffd60a 40%, #b06a00 100%); }
.node.world-gumball.locked { background: radial-gradient(circle at 35% 30%, #e4d6de, #8e7584 60%, #5a4452); }
.node.world-gumball.current { box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 8px rgba(255,214,10,0.55); }
/* section rosette under each map banner (star tally / complete / all 3-starred) */
.map-banner .rosette { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; font-size: 13px; font-weight: 800; line-height: 18px; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.map-banner .rosette-count { color: #fff6c9; }
.map-banner .rosette-badge { font-size: 18px; line-height: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); }
.map-banner .rosette-done .rosette-count { color: #d8ffd0; }
.map-banner .rosette-gold .rosette-count { color: #ffd60a; }
.map-banner .rosette-gold .rosette-badge { animation: rosette-shine 2.4s ease-in-out infinite; }
@keyframes rosette-shine { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.15) rotate(-8deg); } }
.map-banner { text-align: center; }
/* Second Chance continue dialog */
.life-heart { display: flex; justify-content: center; margin: 4px 0 2px; animation: life-beat 1s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(255,61,110,0.45)); }
@keyframes life-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(0.98); } 45% { transform: scale(1.08); } }
.life-offer { color: #ff9fbf; }
.btn.life-yes { background: linear-gradient(#ff6f9f, #d61e5c); box-shadow: 0 4px 0 #8c0f3d; animation: pu-glow 1.4s ease-in-out infinite; }
.pu-menu-row.pu-later { opacity: 0.55; }

/* ---------- powerup bar ---------- */
.pu-bar { --pu-gap: 14px; display: flex; flex-wrap: wrap; justify-content: center; justify-content: safe center; gap: 8px var(--pu-gap); max-width: 100%; }
/* the rings (5, or 6 with the Colour Sparkler; app.js sets --pu-n) shrink to fit the panel's
   width (container query units), and wrap as a fallback */
.pu-bar { --pu-n: 5; --pu-size: clamp(36px, calc((100cqi - (var(--pu-n) - 1) * var(--pu-gap) - 2px) / var(--pu-n)), 50px); }
@media (orientation: landscape) and (min-width: 700px) { .pu-bar { --pu-gap: 8px; } .pu-bar.pu-six { --pu-gap: 6px; } }
.pu-bar.hidden { display: none; }
.pu-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 0; color: #fff; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pu-ring { --p: 0; width: 50px; height: 50px; width: var(--pu-size, 50px); height: var(--pu-size, 50px); border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#ffd60a calc(var(--p) * 1%), rgba(255,255,255,0.18) 0); box-shadow: 0 3px 0 rgba(0,0,0,0.3); transition: transform .15s; }
.pu-icon { width: 42px; height: 42px; width: calc(var(--pu-size, 50px) - 8px); height: calc(var(--pu-size, 50px) - 8px); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #5a4a8a, #241a48); }
.pu-btn:not(.held) .pu-icon canvas { filter: grayscale(0.85) brightness(0.8); opacity: 0.75; }
.pu-btn.held .pu-ring { background: conic-gradient(#7dff9a 100%, transparent 0); animation: pu-glow 1.6s ease-in-out infinite; }
.pu-btn.held:hover .pu-ring { transform: scale(1.08); }
.pu-btn.full:not(.held) .pu-ring { animation: pu-glow 1s ease-in-out infinite; }
.pu-btn.aiming .pu-ring { background: conic-gradient(#ffd60a 100%, transparent 0); transform: scale(1.12); animation: pu-wobble .5s ease-in-out infinite alternate; }
.pu-badge { position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #ff3f7f; font-size: 11px; font-weight: 900; line-height: 18px; text-align: center; box-shadow: 0 2px 0 rgba(0,0,0,0.3); display: none; }
.pu-btn.held .pu-badge { display: block; }
.pu-icon canvas { max-width: 100%; max-height: 100%; }
.pu-meter { font-size: 11px; font-weight: 800; opacity: 0.9; white-space: nowrap; }
.pu-btn.pop .pu-ring { animation: pu-pop .7s cubic-bezier(.3,1.8,.5,1); }
@keyframes pu-glow { 0%,100% { box-shadow: 0 3px 0 rgba(0,0,0,0.3), 0 0 0 0 rgba(125,255,154,0.0); } 50% { box-shadow: 0 3px 0 rgba(0,0,0,0.3), 0 0 14px 4px rgba(125,255,154,0.6); } }
@keyframes pu-wobble { from { transform: scale(1.1) rotate(-6deg); } to { transform: scale(1.14) rotate(6deg); } }
@keyframes pu-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
#board-wrap.aiming canvas { cursor: crosshair; }
.pu-earn { position: fixed; left: 50%; top: 22%; transform: translate(-50%, 0) scale(0.3); z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px;
  border-radius: 20px; background: linear-gradient(135deg, #ff4f8b, #7a3fe0); box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 0 4px rgba(255,255,255,0.35);
  animation: pu-earn-in .6s cubic-bezier(.3,1.7,.5,1) forwards; pointer-events: none; max-width: 90vw; }
.pu-earn.out { animation: pu-earn-out .5s ease-in forwards; }
.pu-earn-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff8d0, #ffd60a 60%, #e08a00); animation: pu-spin 1.2s ease-out; }
.pu-earn-txt { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.pu-earn-txt b { font-size: 18px; }
.pu-earn-txt span { font-size: 13px; opacity: 0.95; }
@keyframes pu-earn-in { to { transform: translate(-50%, 0) scale(1); } }
@keyframes pu-earn-out { to { transform: translate(-50%, -40px) scale(0.8); opacity: 0; } }
@keyframes pu-spin { from { transform: rotate(-360deg) scale(0.2); } to { transform: rotate(0) scale(1); } }
.pu-menu { margin: 12px 0 4px; text-align: left; background: rgba(122,63,224,0.08); border-radius: 14px; padding: 8px 10px; }
.pu-menu-head { font-weight: 900; margin-bottom: 4px; }
.pu-menu-row { display: flex; gap: 10px; align-items: center; padding: 5px 0; }
.pu-menu-row canvas { flex: none; filter: grayscale(0.7); opacity: 0.8; }
.pu-menu-row.held canvas { filter: none; opacity: 1; }
.pu-menu-txt { display: flex; flex-direction: column; font-size: 13px; line-height: 1.25; flex: 1; }
.pu-menu-txt b { font-size: 14px; }
.pu-how { opacity: 0.75; }
.pu-menu-bar { display: block; height: 7px; border-radius: 4px; background: rgba(0,0,0,0.15); margin-top: 3px; overflow: hidden; }
.pu-menu-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd60a, #ff4f8b); border-radius: 4px; }
.pu-teaser { opacity: 0.75; }
@media (prefers-reduced-motion: reduce) { .pu-btn.held .pu-ring, .pu-btn.aiming .pu-ring, .pu-earn, .pu-earn-icon { animation: none; } .pu-earn { transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .map-banner .rosette-gold .rosette-badge { animation: none; } }

/* ---------- household high-score table (map 🏆) ---------- */
/* The card keeps its title, tabs and buttons in view; only the list scrolls (on touch too). */
.modal-card.hs-card {
  width: min(640px, 94vw); max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column; overflow: hidden; padding: 18px 16px 14px;
}
.hs-card h2 { font-size: 28px; }
.hs-card h3 { margin-bottom: 10px; }
.hs-tabs { display: flex; gap: 6px; justify-content: center; margin: 0 0 10px; padding: 4px; border-radius: 999px; background: #efe3ff; align-self: center; }
.hs-tab { border: 0; border-radius: 999px; padding: 8px 18px; font: inherit; font-weight: 800; font-size: 15px; color: #7a3fe0; background: transparent; cursor: pointer; }
.hs-tab.on { color: #fff; background: linear-gradient(#ff8bd0, #e2338f); box-shadow: 0 2px 0 rgba(0,0,0,0.2); }
.hs-body {
  flex: 1 1 auto; min-height: 120px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y;
  -webkit-overflow-scrolling: touch; padding: 2px 4px; margin: 0 -4px; text-align: left;
}
.hs-list { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hs-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "rank name" "rank stats"; align-items: center;
  column-gap: 8px; row-gap: 4px; padding: 8px 10px; border-radius: 14px; background: #f4ecff; font-weight: 700;
}
.hs-row.me { background: linear-gradient(90deg, #ffe6f4, #fff3c4); box-shadow: inset 0 0 0 2px #ff8bd0; }
.hs-rank { grid-area: rank; font-size: 22px; text-align: center; font-weight: 900; color: #7a3fe0; }
.hs-name { grid-area: name; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 17px; }
.hs-name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-firsts { flex: none; font-size: 12px; padding: 1px 7px; border-radius: 99px; background: #fff3c4; color: #8a5a00; }
.hs-stats { grid-area: stats; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.hs-stat { display: flex; flex-direction: column; align-items: center; padding: 3px 2px; border-radius: 10px; background: rgba(255,255,255,0.7); min-width: 0; }
.hs-stat b { font-size: 15px; color: #4a2a80; white-space: nowrap; }
.hs-stat small { font-size: 10.5px; color: #8b7aa0; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.hs-stat.hs-stars b { color: #c48a00; }
.hs-stat.hs-total b { color: #c2187a; }
.hs-picker { display: flex; align-items: center; gap: 8px; }
.hs-step { width: 40px; height: 40px; font-size: 16px; }
.hs-select { flex: 1; min-width: 0; font: inherit; font-weight: 800; font-size: 15px; padding: 9px 10px; border-radius: 12px; border: 2px solid #d8c4f5; background: #fff; color: #4a2a80; }
.hs-world { text-align: center; }
.hs-foot { margin: 8px 0 0 !important; }
.hs-card .row { margin-top: 10px; }
/* wide cards: one line per player */
@media (min-width: 620px) {
  .hs-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "rank name stats"; }
  .hs-stats { grid-template-columns: 76px 64px 68px 104px; }
}
/* big screens (1440p / 4K at 100%): scale the card up so it isn't a postage stamp */
@media (min-width: 1800px) and (min-height: 1000px) { .modal-card.hs-card { zoom: 1.3; } }
@media (min-width: 2800px) and (min-height: 1500px) { .modal-card.hs-card { zoom: 1.8; } }
/* narrow phones: the map header has four round buttons now, so tighten it a little */
.total-stars { white-space: nowrap; }
@media (max-width: 480px) {
  .topbar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .topbar .tools { gap: 6px; }
  .topbar .icon-btn { width: 40px; height: 40px; font-size: 18px; }
  .topbar .total-stars { font-size: 17px; padding: 4px 10px; }
  .topbar .avatar { width: 34px; height: 34px; }
  .who { font-size: 16px; gap: 6px; }
}
@media (max-width: 619px) {
  .hs-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.55fr); }
  .hs-stat b { font-size: 14px; }
  .hs-stat small { font-size: 10px; letter-spacing: 0; }
}