/* World Runner styles. Kit tokens (--rr-*) come from assets/ui.css. */

body { background: #0b1530; }

/* Game wrapper (T159): a fixed backdrop behind the kit fit shell. Wide windows get the kit's centred portrait column (P067). */
.game-wrapper { position: fixed; inset: 0; background: #0b1530; overflow: hidden; }

/* Fit shell (kit ui.css, .game-shell.fit): the shell is pinned to the window, the menu bar sits in flow
   and main is a non-scrolling flex column below it. Here: no text selection or callouts on game UI. */
.game-scroll {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* Stage HUD (P051): the readouts and the pause button sit in a row over the top of the play area; the kit
   bar above holds only the title and the hamburger. A dark translucent pill keeps the numbers legible. */
.stage-hud {
  position: absolute; z-index: 3; top: var(--rr-space-2);
  left: calc(var(--rr-space-2) + var(--rr-inset-left)); right: calc(var(--rr-space-2) + var(--rr-inset-right));
  display: flex; align-items: center; justify-content: space-between; gap: var(--rr-space-2);
  pointer-events: none;
}
.stage-hud .hud {
  display: inline-flex; gap: 6px; min-width: 0; padding: 6px 12px; border-radius: 999px;
  background: rgba(8, 16, 40, 0.55);
  font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stage-hud .hud-btn { pointer-events: auto; background: rgba(8, 16, 40, 0.55); }

/* Stage, pause and summary share one flex slot; one visible at a time. */
#stage, #title, #summary, #pause, #map, #tour {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rr-space-3);
  text-align: center;
  position: relative;
}
#stage { align-items: stretch; justify-content: stretch; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#title, #summary, #pause, #tour { display: none; }

/* Safe-area padding (P032): every full screen pads its sides and bottom by the kit inset tokens, so nothing
   sits under a side notch or the home indicator. Screens tune the base gaps through --wr-pt/--wr-px/--wr-pb
   (top, sides, bottom); never set padding on them directly. The stage stays full bleed (the deck pads itself). */
#title, #summary, #pause, #tour, #passport, #shop, #settings {
  padding: var(--wr-pt, 16px) calc(var(--wr-px, 16px) + var(--rr-inset-right)) calc(var(--wr-pb, 16px) + var(--rr-inset-bottom)) calc(var(--wr-px, 16px) + var(--rr-inset-left));
}
#map { display: none; }
#title.visible, #summary.visible, #pause.visible, #map.visible, #tour.visible { display: flex; }
#pause .btn, #summary .btn, #tour .btn { min-height: 48px; }

#wr-canvas {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  touch-action: none;
}

/* Control deck: four pads, Left/Right on the left, Item/Jump on the right. */
#deck {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rr-space-3);
  min-height: 96px;
  padding: 0 var(--rr-space-3);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--rr-space-2));
  background: var(--rr-panel);
  border-top: 1px solid var(--rr-panel-line);
}
.deck-side { display: flex; gap: var(--rr-space-3); }
.pad {
  min-width: 64px;
  min-height: 64px;
  width: 72px;
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: 16px;
  border: 1px solid var(--rr-panel-line);
  background: rgba(255, 255, 255, 0.08);
  color: var(--rr-ink);
  font-family: inherit;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 60ms ease-out, background 60ms ease-out, filter 60ms ease-out;
}
.pad.pressed, .pad:active, .pad.down {
  background: var(--rr-accent-soft);
  border-color: var(--rr-accent);
  transform: scale(0.94);
  filter: brightness(1.35);
}
/* Item pad (T133): empty is dimmed with the star; holding shows the icon as the background and hides
   the star; a timed effect draws a countdown ring (conic fill masked to a 3px band). */
#pad-item { position: relative; background-repeat: no-repeat; background-position: 50% 38%; background-size: 46px 46px; }
#pad-item.empty { opacity: 0.55; }
#pad-item.holding { border-color: #ffd84a; background-color: rgba(255, 216, 74, 0.14); }
#pad-item.holding .glyph { visibility: hidden; height: 28px; }
#pad-item.holding .lbl { margin-top: 20px; font-size: 0.6rem; }
#pad-item.got { animation: pad-got 260ms ease-out; }
#pad-item.fx::after {
  content: ""; position: absolute; inset: -4px; border-radius: 20px; padding: 3px; pointer-events: none;
  background: conic-gradient(#ffd84a var(--p, 100%), rgba(255, 255, 255, 0.12) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@keyframes pad-got { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
:root[data-motion="reduced"] #pad-item.got { animation: none; }
.pad .glyph { font-size: 1.8rem; line-height: 1; }
.pad .lbl { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 340px) {
  #deck { padding: 0 var(--rr-space-2); gap: var(--rr-space-2); }
  .deck-side { gap: var(--rr-space-2); }
  .pad { width: 66px; height: 66px; }
}

/* One state per screen: the deck hides while paused or on the summary. */
.game-scroll:has(#title.visible) #deck,
.game-scroll:has(#pause.visible) #deck,
.game-scroll:has(#summary.visible) #deck,
.game-scroll:has(#tour.visible) #deck,
.game-scroll:has(#passport.visible) #deck,
.game-scroll:has(#shop.visible) #deck,
.game-scroll:has(#settings.visible) #deck,
.game-scroll:has(#map.visible) #deck { display: none; }

#hud-hearts { color: #ff6b81; letter-spacing: 0.05em; }

/* Score, coin count and multiplier badge (T130). The coin glyph is CSS so the
   number is the only text that changes. */
#hud-score { color: #fff; }
#hud-coins { color: #ffd84a; display: inline-flex; align-items: center; gap: 3px; }
#hud-coins::before {
  content: ""; width: 0.8em; height: 0.8em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3a8 0 22%, #f2b020 60%, #b9780c);
  box-shadow: 0 0 0 1px #6b3f06;
}
#hud-mult {
  padding: 0 5px; border-radius: 8px; background: #ff7a59; color: #2a1200; line-height: 1.35;
  transform-origin: center;
}
#hud-mult[hidden] { display: none; }
.stage-hud .hud.finale { text-shadow: 0 0 8px rgba(255, 140, 50, 0.7); }
.stage-hud .hud.finale #hud-score { color: #ffd84a; }
#hud-mult.pulse { animation: wr-mult-pulse 0.35s ease-out; }
@keyframes wr-mult-pulse { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
:root[data-motion="reduced"] #hud-mult.pulse { animation: none; }
@media (max-width: 399px) {
  .stage-hud .hud { font-size: 0.8rem; gap: 4px; padding: 6px 10px; }
}

/* Screen state (T134): WR_ui.show sets data-screen on .game-shell. The stage is only laid out while
   playing; title and summary hide the HUD and the pause button; incoming screens fade in over 150 ms. */
.game-shell:not([data-screen="play"]) #stage { display: none; }
.game-shell[data-screen="title"] .hud,
.game-shell[data-screen="summary"] .hud,
.game-shell[data-screen="tour"] .hud,
.game-shell[data-screen="map"] .hud,
.game-shell[data-screen="passport"] .hud,
.game-shell[data-screen="shop"] .hud,
.game-shell[data-screen="settings"] .hud,
.game-shell:not([data-screen="play"]) #btn-pause { visibility: hidden; }
#title, #summary, #pause, #passport, #shop, #settings { background: linear-gradient(180deg, #0b1530, #14295c 70%, #1a3a74); }
#tour { background: linear-gradient(180deg, #2b1f4d, #6a3a6a 60%, #c4604a); }
.screen-in { animation: wr-fade-in 150ms ease-out; }
@keyframes wr-fade-in { from { opacity: 0; } to { opacity: 1; } }
:root[data-motion="reduced"] .screen-in { animation: none; }

/* Title: logo canvas fills the free height, the courier, tagline, Play and the link grid sit below. */
#title { gap: var(--rr-space-2); }
#title-logo { flex: 1 1 0; min-height: 0; min-width: 0; width: 100%; max-width: 440px; }
.title-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--rr-space-2); width: 100%; max-width: 360px; min-width: 0; }
#title-courier { width: 120px; height: 96px; }
.tagline { margin: 0; font-size: 1rem; font-weight: 600; color: #cfe0ff; letter-spacing: 0.02em; }
.btn.big { min-height: 56px; min-width: 200px; font-size: 1.2rem; padding: 0 40px; box-shadow: 0 4px 0 #7d3414, 0 8px 18px rgba(0, 0, 0, 0.35); }

/* Summary: result, score, stat row, stamps, buttons. */
#summary { gap: var(--rr-space-3); }
.sum-main, .sum-side { display: flex; flex-direction: column; align-items: center; gap: var(--rr-space-2); min-width: 0; width: 100%; max-width: 420px; }
#sum-title { margin: 0; font-size: 1.7rem; line-height: 1.1; color: #ffd84a; }
#summary.failed #sum-title { color: #ff8a8a; }
.sum-sub { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9db6e8; }
.sum-story { margin: 0; font-size: 0.88rem; line-height: 1.35; color: #e2ebff; }
.sum-finale { margin: 0; padding: 3px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; color: #3a1c00; background: linear-gradient(170deg, #ffe08a, #ffb347); }
.sum-finale[hidden] { display: none; }
.sum-score { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
#sum-score { font-size: 2.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.sum-unit { font-size: 0.8rem; color: #9db6e8; }
.sum-stars { display: flex; justify-content: center; gap: 10px; }
.sum-stars .star { position: relative; width: 34px; height: 34px; }
.sum-stars .star::before { content: "\2605"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; line-height: 1; color: rgba(255, 255, 255, 0.18); }
.sum-stars .star.on::before { color: #ffd84a; text-shadow: 0 0 10px rgba(255, 216, 74, 0.55); }
.sum-stars .star.new { animation: wr-star-pop 520ms cubic-bezier(0.2, 1.6, 0.4, 1) both; animation-delay: calc(var(--i, 0) * 260ms + 350ms); }
@keyframes wr-star-pop { 0% { transform: scale(0.2) rotate(-40deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
:root[data-motion="reduced"] .sum-stars .star.new { animation: none; }
.sum-bank { margin: 0; font-size: 0.78rem; color: #cfe0ff; font-variant-numeric: tabular-nums; }
.sum-stats { margin: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sum-stats div { background: rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 6px 2px; min-width: 0; }
.sum-stats dt { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: #9db6e8; }
.sum-stats dd { margin: 2px 0 0; font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#sum-hearts { color: #ff6b81; letter-spacing: 0.04em; }
.sum-stats small { display: block; font-size: 0.6rem; font-weight: 600; color: #9db6e8; white-space: normal; line-height: 1.1; }
.sum-stamps { display: flex; justify-content: center; gap: 10px; }
.sum-stamps canvas { width: 48px; height: 48px; }
.sum-actions { display: flex; flex-direction: column; gap: var(--rr-space-2); width: 100%; }
.sum-actions .btn { width: 100%; }
#summary.failed .sum-actions { flex-direction: column; }
#summary:not(.failed) #btn-continue { order: -1; }
#summary:not(.failed) #btn-retry, #summary.failed #btn-continue { background: var(--rr-panel); color: var(--rr-ink); border: 1px solid var(--rr-panel-line); }
#summary:not(.failed) #btn-continue, #summary.failed #btn-retry { background: linear-gradient(170deg, var(--rr-accent), #b34d24); color: #14100c; border: 0; }
@media (max-height: 620px) { .sum-main { gap: 5px; } .sum-stars .star { width: 28px; height: 28px; } .sum-stars .star::before { font-size: 28px; } .sum-stars { gap: 8px; } }
/* Endless Tour summary (T150): no stars or stamps, Run again is the primary button. */
#summary.endless .sum-stars, #summary.endless .sum-stamps { display: none; }
#summary.endless #sum-hearts { color: inherit; }
.sum-finale.best { animation: wr-pop 600ms cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes wr-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
:root[data-motion="reduced"] .sum-finale.best { animation: none; }
#summary.endless #btn-retry { order: -1; background: linear-gradient(170deg, var(--rr-accent), #b34d24); color: #14100c; border: 0; }
#summary.endless #btn-continue { order: 0; background: var(--rr-panel); color: var(--rr-ink); border: 1px solid var(--rr-panel-line); }
@media (max-width: 340px) { .sum-stamps { gap: 6px; } .sum-stats dd { font-size: 0.85rem; } }

/* Pause (T151): Resume, Restart leg, Settings, Map. */
#pause { gap: var(--rr-space-3); }
#pause h2 { margin: 0; }
.pause-menu { width: 100%; max-width: 320px; display: grid; grid-template-columns: 1fr; gap: var(--rr-space-2); }
.pause-menu .btn { min-width: 0; }

/* World map (T139): stage (ocean canvas, pins, flight layer) above the card */
#map { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; text-align: left; background: #14477f; overflow: hidden; }
.map-stage { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.map-world { position: absolute; inset: 0; will-change: transform; }
#map-canvas, #map-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#map-fx { pointer-events: none; }
.map-pins { position: absolute; inset: 0; }
.pin { position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: #0f1f45; border: 3px solid #ffd84a; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); cursor: pointer; touch-action: manipulation; }
.pin.locked { border-color: #7886a8; background: #26304d; }
.pin.sel { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 3px 8px rgba(0, 0, 0, 0.4); }
.pin.current::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid #ffd84a; opacity: 0; animation: wr-pin-pulse 1.6s ease-out infinite; pointer-events: none; }
@keyframes wr-pin-pulse { 0% { transform: scale(0.85); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
:root[data-motion="reduced"] .pin.current::after { animation: none; opacity: 0.8; }
.pin-icon { width: 30px; height: 30px; display: block; pointer-events: none; }
.pin-stars { position: absolute; left: 50%; top: calc(100% + 1px); transform: translateX(-50%); display: flex; gap: 2px; pointer-events: none; }
.pin-stars i, .map-cstars i { width: 12px; height: 12px; display: block; background: rgba(255, 255, 255, 0.35); clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
.pin-stars i.on, .map-cstars i.on { background: #ffd84a; }
.pin-stars { padding: 2px 5px; border-radius: 9px; background: rgba(11, 21, 48, 0.72); }
.map-back { position: absolute; left: calc(env(safe-area-inset-left, 0px) + 6px); top: 6px; width: 44px; height: 44px; border-radius: 50%; border: 0; font-size: 1.4rem; line-height: 1;
  color: #fff; background: rgba(11, 21, 48, 0.7); cursor: pointer; z-index: 3; }
.map-skip { position: absolute; left: 0; right: 0; top: 14px; margin: 0; text-align: center; font-size: 0.8rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); pointer-events: none; z-index: 3; }
.map-skip[hidden] { display: none; }
#map.flying .map-back { visibility: hidden; }
#map.flying .map-card { pointer-events: none; opacity: 0.6; }
.map-card { flex: none; display: flex; flex-direction: column; gap: 4px; padding: var(--rr-space-3) var(--rr-space-4) calc(var(--rr-space-3) + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, #0b1530, #14295c); border-top: 1px solid rgba(255, 255, 255, 0.15); }
.map-card h3 { margin: 0; font-size: 1.15rem; color: #ffd84a; }
.map-card p { margin: 0; }
.map-intro { font-size: 0.82rem; font-weight: 700; color: #ffe9a8; }
.map-intro[hidden], .map-lock[hidden], .map-story[hidden], .map-cstars[hidden], #btn-run[hidden] { display: none; }
.map-story { font-size: 0.84rem; line-height: 1.3; color: #e2ebff; }
.map-lock { font-size: 0.9rem; font-weight: 700; color: #c5cfe6; padding: 6px 0; }
.map-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8rem; color: #9db6e8; min-height: 16px; }
.map-cstars { display: flex; gap: 3px; }
#btn-run { min-height: 48px; width: 100%; margin-top: 2px; }

/* Tour complete (T147): the parcel opens and seven postcards fan out. */
#tour { gap: var(--rr-space-2); }
#tour-title { margin: 0; font-size: 1.7rem; line-height: 1.1; color: #ffd84a; }
#tour-art { flex: 1 1 0; min-height: 0; width: 100%; max-width: 400px; display: block; }
.tour-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--rr-space-2); width: 100%; max-width: 420px; min-width: 0; }
.tour-to { margin: 0; font-size: 0.9rem; font-style: italic; color: #ffe9d0; }
.tour-stats { margin: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tour-stats div { background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 6px 2px; }
.tour-stats dt { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: #ffd9c0; }
.tour-stats dd { margin: 2px 0 0; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tour-line { margin: 0; font-size: 0.86rem; line-height: 1.3; color: #fff; }
#tour .btn { width: 100%; background: linear-gradient(170deg, var(--rr-accent), #b34d24); color: #14100c; border: 0; }
@media (max-height: 620px) { #tour-title { font-size: 1.4rem; } .tour-line { font-size: 0.8rem; } }

/* Title links (T148): secondary buttons under Play. */
.title-links { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rr-space-2); }
.title-links .btn { min-height: 44px; min-width: 0; padding: 0 6px; font-size: 0.92rem; }
.title-links #btn-endless { grid-column: 1 / -1; }

/* Map tools (T148): small round buttons at the top right of the map. */
.map-tools { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 6px); top: 6px; display: flex; gap: 6px; z-index: 3; }
.map-tool { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; font-size: 1.25rem; line-height: 1; color: #fff; background: rgba(11, 21, 48, 0.7); cursor: pointer; }
#map.flying .map-tools { visibility: hidden; }
.map-endless-lock { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 156px); top: 6px; height: 44px; display: flex; align-items: center; z-index: 3; margin: 0; width: 104px; padding: 3px 6px; border-radius: 10px; font-size: 0.62rem; font-weight: 800; line-height: 1.2; text-align: center; color: #c5cfe6; background: rgba(11, 21, 48, 0.7); }
.map-endless-lock[hidden], #btn-endless[hidden], .map-tool[hidden] { display: none; }
@media (max-width: 340px) { .map-endless-lock { width: 90px; font-size: 0.58rem; } }
#map.flying .map-endless-lock { visibility: hidden; }

/* Passport (T148): a navy booklet with cream pages. Portrait: left page (header) above the right page (four stamp rows).
   Nothing scrolls. */
#passport { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; text-align: left;
  --wr-pt: 8px; --wr-px: 10px; --wr-pb: 6px; }
#passport.visible { display: flex; }
.pp-book { flex: 1 1 0; min-height: 0; display: flex; padding: 7px; border-radius: 14px; background: linear-gradient(160deg, #1d3a78, #0f2250); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.14); width: 100%; max-width: 560px; margin: 0 auto; }
.pp-pages { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; transform-origin: 50% 50%; }
.pp-pages.flip { animation: pp-flip 260ms ease-out; }
@keyframes pp-flip { from { transform: perspective(700px) rotateY(var(--ang, 28deg)); opacity: 0.25; } to { transform: none; opacity: 1; } }
:root[data-motion="reduced"] .pp-pages.flip { animation: none; }
.pp-page { position: relative; min-height: 0; border-radius: 6px; overflow: hidden; background: #f6ecd2; color: #3b3224; box-shadow: inset 0 0 12px rgba(120, 90, 30, 0.25); }
.pp-guil { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pp-left { flex: none; display: flex; align-items: center; justify-content: center; padding: 6px 50px; min-height: 64px; }
.pp-right { flex: 1 1 0; display: flex; padding: 14px 14px; }
.pp-back { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; font-size: 1.4rem; line-height: 1; color: #fff; background: #1d3a78; cursor: pointer; z-index: 2; }
.pp-head { position: relative; text-align: center; min-width: 0; }
.pp-kicker { margin: 0; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #8a6a24; }
.pp-head h2 { margin: 0; font-size: 1.3rem; line-height: 1.15; color: #1d2f5e; }
.pp-meta { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.74rem; font-weight: 700; color: #5a4a2c; margin-top: 2px; }
.pp-stars { display: inline-flex; gap: 3px; }
.pp-stars i { width: 13px; height: 13px; display: block; background: rgba(60, 50, 30, 0.22); clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
.pp-stars i.on { background: #e5a410; }
.pp-slots { position: relative; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 4px; }
.pp-slot { min-height: 0; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 10px; row-gap: 1px; }
.pp-stamp { grid-column: 1; grid-row: 1; width: 56px; height: 56px; display: block; }
.pp-sname { grid-column: 2; grid-row: 1; align-self: center; font-size: 0.86rem; font-weight: 800; color: #1d2f5e; line-height: 1.15; }
.pp-sname small { display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #7a6f58; margin-top: 1px; }
.pp-slot[data-grade="gold"] .pp-sname small { color: #a8690a; }
.pp-slot[data-grade="silver"] .pp-sname small { color: #56657f; }
.pp-fact { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 0.7rem; line-height: 1.25; color: #3b3224; }
.pp-slot[data-grade="none"] .pp-fact { color: #6f6450; }
.pp-slot[data-grade="none"] .pp-sname { color: #6b6a78; }
.pp-nav { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; }
.pp-arrow { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; font-size: 1.8rem; line-height: 1; color: #fff; background: #1d3a78; box-shadow: 0 2px 0 #0a1840; cursor: pointer; }
.pp-arrow:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
.pp-dots { display: flex; gap: 7px; align-items: center; min-width: 120px; justify-content: center; }
.pp-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.pp-dots i.on { background: #ffd84a; transform: scale(1.3); }
@media (max-height: 640px) {
  #passport { gap: 4px; --wr-pt: 6px; }
  .pp-left { min-height: 56px; padding-top: 4px; padding-bottom: 4px; }
  .pp-head h2 { font-size: 1.1rem; }
  .pp-right { padding: 11px 12px; }
  .pp-stamp { width: 44px; height: 44px; }
  .pp-slots { gap: 2px; }
  .pp-sname { font-size: 0.8rem; }
  .pp-fact { font-size: 0.68rem; }
}

/* Shop (T149): coin bank on top, the detail panel (preview, name, text, Buy or Equip) and a tabbed 2-column card grid
   paged six at a time. Detail above the list. Nothing scrolls. */
#shop { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; text-align: left;
  --wr-pt: 6px; --wr-px: 10px; --wr-pb: 6px; }
#shop.visible { display: flex; }
.sh-top { flex: none; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.sh-top h2 { margin: 0; flex: 1; font-size: 1.3rem; color: #ffd84a; }
.sh-back { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; font-size: 1.4rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, 0.12); cursor: pointer; }
.sh-bank { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); font-size: 1.05rem; font-weight: 800; color: #ffd84a; font-variant-numeric: tabular-nums; }
.sh-bank::before, .sh-card small.coin::before { content: ""; width: 0.85em; height: 0.85em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a8 0 22%, #f2b020 60%, #b9780c); box-shadow: 0 0 0 1px #6b3f06; display: inline-block; }
.sh-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.sh-detail { flex: none; min-height: 140px; display: flex; gap: 10px; align-items: stretch; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); }
.sh-preview { flex: none; width: 104px; height: 108px; border-radius: 10px; display: block; }
.sh-info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.sh-info h3 { margin: 0; font-size: 1.05rem; color: #fff; line-height: 1.15; }
.sh-desc { margin: 0; font-size: 0.76rem; line-height: 1.25; color: #cfe0ff; }
.sh-hint { margin: 0; min-height: 0.95rem; font-size: 0.7rem; font-weight: 700; line-height: 1.2; color: #ffd84a; }
#sh-action { min-height: 44px; width: 100%; margin-top: 2px; padding: 0 8px; }
#sh-action:disabled { opacity: 0.6; }
#sh-action[data-state="equipped"], #sh-action[data-state="owned"]:disabled { background: rgba(255, 255, 255, 0.12); color: #cfe0ff; border: 1px solid rgba(255, 255, 255, 0.2); }
.sh-list { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.sh-tabs { flex: none; display: flex; gap: 4px; }
.sh-tab { flex: 1 1 0; min-height: 44px; padding: 0 4px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: #cfe0ff; font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; }
.sh-tab.on { background: linear-gradient(170deg, var(--rr-accent), #b34d24); color: #14100c; border-color: transparent; }
.sh-grid { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(52px, 1fr)); gap: 6px; }
.sh-card { min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.07); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.sh-card.sel { border-color: #ffd84a; background: rgba(255, 216, 74, 0.14); }
.sh-card.locked { opacity: 0.6; }
.sh-ico { flex: none; width: 38px; height: 48px; display: block; }
.sh-txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sh-txt b { font-size: 0.78rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-txt small { font-size: 0.68rem; font-weight: 700; color: #9db6e8; display: inline-flex; align-items: center; gap: 4px; }
.sh-txt small.coin { color: #ffd84a; }
.sh-txt small.eq { color: #7af0a8; }
.sh-pager { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; }
.sh-page { min-width: 56px; text-align: center; font-size: 0.8rem; font-weight: 700; color: #cfe0ff; }
@media (max-height: 640px) {
  .sh-top h2 { font-size: 1.15rem; }
  .sh-preview { width: 88px; height: 92px; }
  .sh-detail { padding: 6px; }
  .sh-desc { font-size: 0.72rem; }
  .sh-tab { min-height: 44px; }
}

/* Settings (T151): a list of 44 px rows. One column. Nothing scrolls. */
#settings { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; text-align: left;
  --wr-pt: 6px; --wr-px: 12px; --wr-pb: 8px; }
#settings.visible { display: flex; }
.st-top { flex: none; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.st-top h2 { margin: 0; font-size: 1.3rem; color: #ffd84a; }
.st-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.st-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st-row { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); }
.st-label { font-size: 0.95rem; font-weight: 700; color: #fff; min-width: 0; }
.st-toggle { flex: none; min-width: 72px; min-height: 44px; padding: 0 12px; border-radius: 22px; border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #cfe0ff; font: inherit; font-size: 0.9rem; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.st-toggle.on { background: linear-gradient(170deg, var(--rr-accent), #b34d24); color: #14100c; border-color: transparent; }
.st-vol { gap: 12px; }
.st-vol .st-label { flex: none; }
.st-vol input[type="range"] { flex: 1 1 0; min-width: 0; min-height: 44px; }
.st-seg { flex: none; display: inline-flex; border-radius: 22px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.25); }
.st-seg button { min-width: 48px; min-height: 44px; padding: 0 10px; border: 0; background: rgba(255, 255, 255, 0.08); color: #cfe0ff; font: inherit; font-size: 0.85rem; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.st-seg button + button { border-left: 1px solid rgba(255, 255, 255, 0.2); }
.st-seg button.on { background: linear-gradient(170deg, var(--rr-accent), #b34d24); color: #14100c; }
.st-reset { background: none; padding: 0; }
.st-reset .btn { width: 100%; min-height: 48px; }
.st-reset .btn[hidden] { display: none; }
.btn.danger { background: linear-gradient(170deg, #e5484d, #a3262b); color: #fff; border: 0; }
.st-note { margin: 0; min-height: 1.1em; font-size: 0.75rem; line-height: 1.25; color: #cfe0ff; }