/* The walkable Clearing over the title (js/hub-3d.js): its canvas covers the sky and the signs (which stay under it as the
   fallback), under the logo and the corner keys. A Pokédex strip along the bottom holds the keys for the place you walk near; standing at its door, a card
   along the bottom says what it is. */

.hub { position: absolute; inset: 0; z-index: 1; animation: hubIn 0.5s ease-out; }
@keyframes hubIn { from { opacity: 0; } }
.hub.shown { animation: none; }
.hub-view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.title-screen.hub-on { cursor: default; }
.title-screen.hub-on .title-menu, .title-screen.hub-on .title-run, .title-screen.hub-on .title-gate,
.title-screen.hub-on .title-signpost, .title-screen.hub-on .title-areas, .title-screen.hub-on .title-flyer { display: none; }
/* the logo, smaller, high over the forest; it lets taps through */
.title-screen.hub-on .title-center { pointer-events: none; padding-top: max(52px, 5vh); }
.title-screen.hub-on .title-big { font-size: clamp(2.2rem, 10vw, 4.4rem); }


/* the bottom bar, the rooms Pokédex bar (#room-bar, the user's pick, 2026-10-08), the place's name on an LCD (no gold
   pill, the user's call); under it a saved run's LCD that folds away without one (js/hub-3d.js's placeBar()). The parts
   are the room bar's own classes */
.hub-bar {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: min(100%, 520px); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 6px; padding: 6px 10px max(8px, env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0;
  background: var(--shell); box-shadow: inset 0 3px 0 var(--shell-hi), inset 0 0 0 3px var(--shell-rim), 0 -4px 14px rgba(0, 0, 0, 0.4);
  animation: hubBarIn 0.35s ease-out;
}
@keyframes hubBarIn { from { translate: -50% 100%; } }
.hbar-pop { animation: hbarPop 0.22s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes hbarPop { from { opacity: 0; scale: 0.85; } }
/* one line along the hinge (the user's layout, 2026-10-09): lens, lights, small Home and How to play, the coins' LCD,
   the place's LCD on the right */
.hub-bar { gap: 0; }
.hub-bar .room-hinge { gap: 7px; padding-bottom: 2px; }
.hub-bar .room-keys { gap: 4px; }
.hub-bar .room-home { width: 34px; min-height: 34px; }
.hub-bar .room-home :is(.round-key, .home-key) { width: 32px; height: 32px; }
.hub-bar .room-home svg { width: 18px; height: 18px; }
.hub-bar .hub-dex.dex-news::after { top: -3px; right: -3px; }
.hub-dex.out, .hub-help.out { visibility: hidden; }
.hub-bar .hbar-cash { flex: none; margin-left: 0; gap: 4px; padding-inline: 7px; font-size: 0.75rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hbar-coin { width: 15px; height: 15px; flex: none; }
/* a saved run's LCD: its Pokémon, where and the floor over the HP bar, the Escape Rope (battle's running figure) on the
   right. With no run it folds down into the bar (grid rows 1fr to 0fr), the bar's top edge sliding down after it */
.hbar-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.hub-bar.no-run .hbar-fold { grid-template-rows: 0fr; }
.hbar-fold-in { min-height: 0; overflow: hidden; }
.hub-bar .hbar-run {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 3px;
  margin: 9px 5px 5px; padding: 5px 8px; font-size: 0.75rem; font-variant-numeric: tabular-nums;
  transition: opacity 0.3s, translate 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.hub-bar.no-run .hbar-run { opacity: 0; translate: 0 12px; }
/* your Pokémon on the left in the LCD's four greens, the map run card's look (#lcd-ink in index.html; the user's ask,
   2026-10-09), inside the LCD (it stood out of the top, the user's call): fitMon() in js/hub-3d.js scales each one's
   visible pixels to this box */
.hbar-mon { grid-column: 1; grid-row: 1 / span 2; align-self: center; position: relative; width: 34px; height: 30px; }
.hbar-mon::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 5px; border-radius: 50%; background: rgba(31, 58, 20, 0.16); }
.hbar-sprite { position: absolute; left: 0; top: 0; width: 100%; height: 100%; filter: url(#lcd-ink); }
.hbar-info { grid-column: 2; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.hbar-name { flex: none; font-weight: 400; }
.hbar-where { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; }
/* the floor right after where you are, behind the title plate's little staircase (the user's ask, 2026-10-09) */
.hbar-floor { flex: none; display: inline-flex; align-items: center; }
.hbar-floor::before {
  content: ''; width: 0.85em; height: 0.85em; margin-right: 0.3em; background: currentColor; opacity: 0.7;
  clip-path: polygon(0 100%, 0 67%, 33% 67%, 33% 33%, 67% 33%, 67% 0, 100% 0, 100% 100%);
}
.hbar-floor:empty { display: none; }
.hbar-hp { grid-column: 2; display: flex; align-items: center; gap: 6px; min-width: 0; }
.hbar-flee {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  display: grid; place-items: center; width: 36px; height: 34px; padding: 4px; border: 2px solid #1f3a14; border-radius: 6px;
  background: rgba(255, 255, 255, 0.3); color: #1f3a14; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hbar-flee svg { width: 100%; height: 100%; display: block; }
.hbar-flee:active { translate: 0 1px; background: rgba(31, 58, 20, 0.2); }
@media (max-width: 380px) {
  .hub-bar { padding-inline: 8px; }
  .hub-bar .room-hinge { gap: 5px; }
  .hub-bar .room-hinge .pdx-lens { width: 24px; height: 24px; }
  .hub-bar .mdex-lights { gap: 3px; }
  .hub-bar .mdex-lights .pdx-light { width: 7px; height: 7px; }
  .hub-bar .hbar-cash, .hub-bar .hbar-sign { padding-inline: 5px; }
  .hub-bar .hbar-sign b { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) { .hbar-fold, .hub-bar .hbar-run { transition: none; } }
@media (prefers-reduced-motion: reduce) { .hub-bar, .hbar-pop { animation: none; } }

.hub-card {
  position: absolute; left: 50%; bottom: calc(var(--hub-bar-h, 110px) + 10px); translate: -50% 0;
  width: min(360px, calc(100% - 32px)); padding: 12px 14px; box-sizing: border-box;
  border: 3px solid #2a2a3a; border-radius: 10px; background: #fff8e8; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  color: #2a2a3a; text-align: left; animation: hubCard 0.2s ease-out;
}
.hub-card[hidden] { display: none; }
@keyframes hubCard { from { opacity: 0; translate: -50% 10px; } }
.hub-card-name { display: block; font: 0.85rem/1.2 var(--pixel-font); font-synthesis-weight: none; }
.hub-card-line { margin: 6px 0 0; font-size: 0.9rem; line-height: 1.35; }
.hub-card-reset { margin: 6px 0 0; font: 0.75rem/1.3 var(--pixel-font); font-synthesis-weight: none; color: #8a5a10; }
.hub-card-reset::before { content: '⏱ '; }
.hub-card-reset[hidden] { display: none; }
.hub-card.locked { background: #eeeae4; }
/* the Pokéstop's question with a saved run: Continue (the rooms' gold pill) or New game */
.hub-card-acts { display: flex; gap: 8px; margin-top: 10px; }
.hub-card-acts:empty { display: none; }
.hub-card-btn {
  flex: 1; padding: 9px 6px 8px; border: 3px solid #2a2a3a; border-radius: 999px; background: #fff; color: #2a2a3a;
  font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none; box-shadow: 0 3px 0 #2a2a3a; cursor: pointer;
}
.hub-card-btn:active { translate: 0 3px; box-shadow: none; }
/* asked, the card is the Pokédex's shell holding just its two keys: Continue the rooms' gold pill, New game a shell key */
.hub-card.ask {
  width: min(300px, calc(100% - 32px)); padding: 10px; border: 0; border-radius: 18px;
  background: linear-gradient(180deg, var(--shell-hi), var(--shell) 40%, var(--shell-lo));
  box-shadow: inset 0 0 0 3px var(--shell-rim), 0 4px 0 var(--shell-deep), 0 12px 30px rgba(0, 0, 0, 0.45);
}
.hub-card.ask :is(.hub-card-name, .hub-card-line, .hub-card-reset) { display: none; }
.hub-card.ask .hub-card-acts { margin: 0; gap: 10px; }
.hub-card.ask .hub-card-btn {
  padding: 12px 6px 11px; border: 0; background: var(--shell-lo); color: #fff; text-shadow: 1px 1px 0 var(--shell-deep);
  box-shadow: inset 0 0 0 2px var(--shell-rim), 0 3px 0 var(--shell-deep);
}
/* Continue is the rooms' glowing gold pill itself (.room-ok), only as big as New game */
.hub-card.ask .hub-card-ok { flex: 1; min-width: 0; height: auto; padding: 12px 6px 11px; }
.hub-card.ask .hub-card-btn:active { box-shadow: inset 0 0 0 2px var(--shell-rim); }
/* the Waystone's menu (2026-10-14): the same shell round a green LCD, a town a row */
.hub-card.way {
  width: min(320px, calc(100% - 32px)); padding: 10px; border: 0; border-radius: 18px;
  background: linear-gradient(180deg, var(--shell-hi), var(--shell) 40%, var(--shell-lo));
  box-shadow: inset 0 0 0 3px var(--shell-rim), 0 4px 0 var(--shell-deep), 0 12px 30px rgba(0, 0, 0, 0.45);
}
.hub-card.way :is(.hub-card-name, .hub-card-line, .hub-card-reset) { display: none; }
.hub-card.way .hub-card-acts { display: block; margin: 0; }
.way-head { margin: 0 0 8px; text-align: center; color: #fff; text-shadow: 1px 1px 0 var(--shell-deep); font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none; letter-spacing: 0.08em; }
.way-head b { font-weight: 400; }
.way-list {
  display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 2px solid #2a2a30; border-radius: 8px;
  background: radial-gradient(120% 140% at 30% 0%, #c2dc9a, #a8c97e); color: #1f3a14;
  box-shadow: inset 0 2px 0 rgba(31, 58, 20, 0.14), 0 0 0 3px #e4e4ea, 0 0 0 5px var(--shell-rim);
}
.way-row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 4px; font: 0.75rem/1.2 var(--pixel-font); font-synthesis-weight: none; }
.way-row + .way-row { border-top: 1px dashed rgba(31, 58, 20, 0.3); }
.way-gem { flex: none; width: 10px; height: 14px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #6a7a5a; }
.way-row.lit .way-gem { background: var(--gem); filter: drop-shadow(0 0 3px var(--gem)); animation: wayGem 1.6s ease-in-out infinite alternate; }
@keyframes wayGem { to { filter: drop-shadow(0 0 6px var(--gem)) brightness(1.25); } }
.way-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.way-row.unmet .way-name { opacity: 0.55; letter-spacing: 0.1em; }
.way-count { flex: none; font-variant-numeric: tabular-nums; }
.way-run { padding: 2px 5px 1px; border: 1px solid currentColor; border-radius: 3px; }
.hub-card.way .way-go { flex: none; min-width: 0; height: auto; padding: 7px 12px 6px; font-size: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .way-row.lit .way-gem { animation: none; } }

.hub-fps { position: absolute; right: 60px; top: 18px; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); color: #8f8; font: 12px/1.2 monospace; }

@media (prefers-reduced-motion: reduce) { .hub, .hub-card { animation: none; } .hub-bar { animation: none; } }

/* the logo greets the hub, then fades so it never hides the Ancient Tree's tag */
.title-screen.hub-on .title-center { animation: hubLogo 5.4s ease-in forwards; }
.title-screen.hub-mode .title-version { visibility: hidden; }   /* the patch notes are on the Clearing's PC there */
@keyframes hubLogo { 0%, 75% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.title-screen.hub-on.hub-greeted .title-center { animation: none; visibility: hidden; }
/* hidden, its letters still waved and the ball wobbled under the logo's glow, every frame behind the Clearing */
.title-screen.hub-on.hub-greeted .title-center * { animation-play-state: paused; }
/* the title's fade in showed the screen under it (the character select) through the Clearing; the walk out of the mall
   or the base is already a fade through black */
.title-screen.hub-mode:not([hidden]) { animation: none; }
@media (prefers-reduced-motion: reduce) { .title-screen.hub-on .title-center { animation: none; display: none; } }

/* the Clearing, and the mall or Secret Base over it, cover the character select and the scenery under it whole: shown,
   they stayed full-screen layers a phone kept in memory (~12 MB each at 3x) and the select's sky painted every frame
   (2026-10-19); the title's fade out (.away) shows them again as the select comes in */
body:has(#title-screen.hub-mode:not([hidden]):not(.away)) :is(#start-screen, #backdrop, #scene-bg, #scene-light),
body:has(> .base3d) :is(#start-screen, #backdrop, #scene-bg, #scene-light) { visibility: hidden; }
/* hidden, its A button's glow still ticked every frame (tools/fps-probe.mjs, 2026-10-23) */
body:has(#title-screen.hub-mode:not([hidden]):not(.away)) #start-screen *,
body:has(> .base3d) #start-screen * { animation-play-state: paused; }

/* the walk between the hub and the Secret Base fades through black (curtain() in js/hd2d.js) */
.hd2d-curtain { position: fixed; inset: 0; z-index: 2000; background: #000; opacity: 0; pointer-events: none; transition: opacity 320ms ease; }
.hd2d-curtain.on { opacity: 1; pointer-events: auto; }


/* behind the shut Pokédex (showHub()'s hold): the Clearing is drawn, but its keys and bar wait for the partner to walk in */
.hub.held .hub-dex, .hub.held .hub-bar, .hub.held .hub-card { visibility: hidden; }
.hub.held .hub-view { pointer-events: none; }
/* the hub is the title from the first frame, so the old pixel sky, its light and the signs never show under it */
.title-screen.hub-mode .title-sky, .title-screen.hub-mode .title-light, .title-screen.hub-mode .title-flyer,
.title-screen.hub-mode .title-menu, .title-screen.hub-mode .title-run, .title-screen.hub-mode .title-gate,
.title-screen.hub-mode .title-signpost, .title-screen.hub-mode .title-areas { display: none; }
/* the cloud save's Sign in moved into the Clearing's PC (js/pc.js), so the corner's PC goes (2026-10-09, the user's call) */
.title-screen.hub-mode #title-account { display: none; }
/* the Clearing's Refresh, top right (the user's ask, 2026-10-19): a quieter take on the round red key of 2026-10-17, in
   the Pokédex's shell colour like the map's Home key, two sizes smaller and a little see-through, its arrow turning once
   every 9 s instead of the title's glow; the Signs title keeps its white arrow under the speaker */
.title-screen.hub-mode .title-refresh {
  position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  margin: 0; padding: 2px; gap: 3px;
}
.title-screen.hub-mode .title-refresh .ta-pc {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 16px;
  background: radial-gradient(circle at 35% 30%, var(--shell-hi), var(--shell) 60%, var(--shell-lo));
  box-shadow: inset 0 0 0 2px var(--shell-rim), inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 2px 0 var(--shell-deep);
  filter: none; opacity: 0.8; transition: opacity 0.15s, translate 0.06s, box-shadow 0.06s;
}
.title-screen.hub-mode .title-refresh .refresh-ico { fill: #fff; stroke: none; filter: drop-shadow(0 1px 0 var(--shell-deep)); animation: refreshTurn 9s ease-in-out 3s infinite; }
@keyframes refreshTurn { 0%, 90% { rotate: 0deg; } 100% { rotate: 360deg; } }
.title-screen.hub-mode .title-refresh:is(:hover, :focus-visible) .ta-pc { opacity: 1; animation: none; }
.title-screen.hub-mode .title-refresh:active .ta-pc { translate: 0 2px; box-shadow: inset 0 0 0 2px var(--shell-rim), 0 0 0 var(--shell-deep); }
.title-screen.hub-mode .title-refresh.spinning .refresh-ico { animation: taSpin 0.7s linear infinite; }
/* "Updates" brightens and swells a moment as the arrow turns, on the same 9 s beat (the user's ask, 2026-10-19) */
.title-screen.hub-mode .title-refresh .ta-update { font-size: 12px; opacity: 0.55; animation: updatesPulse 9s ease-in-out 3s infinite; }
@keyframes updatesPulse { 0%, 86%, 100% { opacity: 0.55; scale: 1; } 93% { opacity: 1; scale: 1.15; } }
.title-screen.hub-mode .title-refresh.spinning .ta-update { animation: none; opacity: 1; }
html.calm-fx .title-screen.hub-mode .title-refresh .ta-update { animation: none; }
@media (prefers-reduced-motion: reduce) { .title-screen.hub-mode .title-refresh:not(.spinning) .refresh-ico, .title-screen.hub-mode .title-refresh .ta-update { animation: none; } }
/* the Clearing's speaker: the same small shell key as Refresh, in the top-left corner (the user's ask, 2026-10-18: the
   big speaker there was too much, but it belongs top left); its pop-out opens under it */
.title-screen.hub-mode .title-sound {
  position: fixed; z-index: 3; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
}
.title-screen.hub-mode .title-sound .title-account { margin: 0; padding: 2px; }
.title-screen.hub-mode #title-sound-btn .ta-pc {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; color: #fff;
  background: radial-gradient(circle at 35% 30%, var(--shell-hi), var(--shell) 60%, var(--shell-lo));
  box-shadow: inset 0 0 0 2px var(--shell-rim), inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 2px 0 var(--shell-deep);
  filter: none; opacity: 0.8; animation: none; transition: opacity 0.15s, translate 0.06s, box-shadow 0.06s;
}
.title-screen.hub-mode #title-sound-btn .ta-pc :is(svg, .smooth-icon) { width: 18px; height: 18px; }
.title-screen.hub-mode #title-sound-btn:is(:hover, :focus-visible, [aria-expanded="true"]) .ta-pc { opacity: 1; }
.title-screen.hub-mode #title-sound-btn:active .ta-pc { translate: 0 2px; box-shadow: inset 0 0 0 2px var(--shell-rim), 0 0 0 var(--shell-deep); }
.title-screen.hub-mode .title-sound .sound-pop { top: calc(100% + 4px); left: 0; right: auto; translate: none; animation-name: soundPop; }

/* The Poké Mall's hall (js/mall-3d.js), on the Secret Base's .base3d frame: the Clearing's Pokédex bar along the bottom
   (2026-10-13, the user's ask), the place's name and the coins on its LCDs, and over it a front's line pops up a moment. */
.mall3d .b3-top h2 { display: none; }
/* the device (Home, How to play) opens over the mall, which stands over every screen */
body:has(.mall3d) .collection-screen.over { z-index: 920; }
.mall-foot {
  position: absolute; left: 50%; bottom: calc(var(--hub-bar-h, 60px) + 12px); translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: calc(100% - 32px); pointer-events: none;
}
/* every line is Animal Crossing's cream speech window (the user's call, 2026-10-09: the dark pill was too small to read) */
.mall-line {
  position: relative; max-width: 460px; width: 100%; box-sizing: border-box; margin: 0; padding: 20px 22px 18px;
  border-radius: 30px / 26px; background: #fbf4df; color: #6a5440; font-size: 15px; line-height: 1.6; text-align: center;
  box-shadow: 0 3px 0 #d8c8a4, 0 6px 16px #0005;
  opacity: 0; translate: 0 6px; transition: opacity 0.25s, translate 0.25s;
}
.mall-line.on { opacity: 1; translate: 0 0; }
.mall-who { display: none; }
/* in the store the shopkeeper speaks, its name on a tilted tag */
.mall-line.talk { margin-top: 16px; padding-top: 22px; text-align: left; }
.mall-line.talk .mall-who {
  display: block; position: absolute; left: 18px; top: -15px; padding: 7px 14px; border-radius: 999px;
  background: #f0a0b0; color: #6a2a3a; font-size: 12px; font-weight: normal; rotate: -4deg; box-shadow: 0 2px 0 #c87888;
}

/* the buy window: the shopkeeper's speech window with the piece's picture, the question and Buy / No, over the line */
.mall-ask {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 460px; box-sizing: border-box;
  padding: 24px 22px 18px; border-radius: 30px / 26px; background: #fbf4df; color: #6a5440; text-align: center;
  box-shadow: 0 3px 0 #d8c8a4, 0 6px 16px #0005; pointer-events: auto;
}
.mall-ask[hidden] { display: none; }
.mall-ask.b3-say { animation: b3Pop 0.25s cubic-bezier(.3, 1.5, .5, 1); }
.mall-ask-who {
  position: absolute; left: 18px; top: -15px; padding: 7px 14px; border-radius: 999px; font-weight: normal; font-size: 12px;
  background: #f0a0b0; color: #6a2a3a; rotate: -4deg; box-shadow: 0 2px 0 #c87888;
}
.mall-ask-who:empty { display: none; }
.mall-ask-pic { display: grid; place-items: center; height: 120px; margin-bottom: 10px; border-radius: 18px; background: #efe4c6; }
.mall-ask-pic[hidden] { display: none; }
.mall-ask-pic canvas { max-width: 86%; max-height: 104px; image-rendering: auto; }
.mall-ask-q { margin: 0 0 16px; font-size: 15px; line-height: 1.6; }
.mall-ask-keys { display: flex; gap: 12px; justify-content: center; }
.mall-ask-keys button {
  min-width: 112px; height: 48px; border: 0; border-radius: 999px; cursor: pointer; font: 13px/1 var(--pixel-font);
  -webkit-tap-highlight-color: transparent;
}
.mall-ask-yes { background: linear-gradient(#ffe070, #f0b020); color: #5a3a08; box-shadow: 0 4px 0 #b07c10, 0 6px 12px #0004; }
.mall-ask-no { background: #e8dcc0; color: #6a5440; box-shadow: 0 4px 0 #c4b290; }
.mall-ask-keys button:active { translate: 0 3px; box-shadow: none; }
.mall-ask-keys.many { flex-wrap: wrap; gap: 10px; }   /* the lift's floors (js/mall-3d.js's choose()) */
.mall-ask-keys.many button { min-width: 0; padding: 0 16px; }
@media (prefers-reduced-motion: reduce) { .mall-ask.b3-say, .mall-shop.b3-say { animation: none; } }

/* the Furniture store's and the Safari Outfitter's buy window (js/mall-3d.js's merchant(); 2026-10-16, the user's ask): a merchant's card in a
   gold frame, the department on a ribbon in its colour, the piece turning on a velvet turntable in a spotlit box you
   drag to turn it, the price big with a coin */
.mall-shop {
  --ink: #4fa45e;
  position: absolute; left: 50%; bottom: calc(var(--hub-bar-h, 60px) + 12px); translate: -50% 0;
  width: min(360px, calc(100% - 32px)); box-sizing: border-box; padding: 24px 18px 18px;
  border: 3px solid #e2b648; border-radius: 28px; outline: 2px solid #fff6dc; outline-offset: -9px;
  background: linear-gradient(#fffaf0, #f4e8cc); color: #6a5440; text-align: center;
  box-shadow: 0 4px 0 #b88a2a, 0 12px 30px #0007;
}
.mall-shop[hidden] { display: none; }
.mall-shop.b3-say { animation: b3Pop 0.25s cubic-bezier(.3, 1.5, .5, 1); }
.mshop-dept {
  display: inline-block; margin: 0 0 8px; padding: 6px 16px 5px; border-radius: 999px; background: var(--ink);
  color: #fff; font: 12px/1 var(--pixel-font); letter-spacing: 0.08em; box-shadow: 0 2px 0 #0003;
}
.mshop-name { margin: 0 0 10px; font: 17px/1.3 var(--pixel-font); color: #4a3424; }
.mshop-stage {
  position: relative; width: min(100%, 240px, 30vh); aspect-ratio: 1; margin: 0 auto 8px; border-radius: 20px;
  overflow: hidden; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
  background: radial-gradient(circle at 50% 36%, #fffbea 0%, color-mix(in srgb, var(--ink) 28%, #fbf0d8) 46%, color-mix(in srgb, var(--ink) 60%, #2a1e24) 100%);
  box-shadow: inset 0 0 0 2px #e2b648, inset 0 8px 20px #0004;
}
.mshop-stage.held { cursor: grabbing; }
.mshop-turn { display: block; width: 100%; height: 100%; }
.mshop-hint {
  position: absolute; left: 50%; bottom: 8px; translate: -50% 0; padding: 4px 10px; border-radius: 999px;
  background: #0007; color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none;
}
.mshop-note { margin: 0 0 8px; font-size: 13px; }
.mshop-price { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0 0 14px; }
.mshop-coin { width: 24px; height: 24px; margin-right: 6px; }
.mshop-price b { font: 24px/1 var(--pixel-font); color: #5a3a10; }
.mshop-price small { flex-basis: 100%; margin-top: 6px; font-size: 13px; color: #8a7458; }
.mall-shop.short .mshop-price b, .mall-shop.short .mshop-price small { color: #c83828; }
.mall-shop.held .mshop-price b { color: #3a7a32; }   /* the Day Pass already held: no price, no Buy */

/* Smeargle's garden catalogue and its buy window (js/garden-shop.js; 2026-10-17, the user's ask): the buy window's
   merchant card, its tabs green ribbons, each piece a still of its 3D model in a little spotlit box with a coin price */
.dialog.gmerch {
  --ink: #5a9a3a;
  position: relative; overflow: visible; box-sizing: border-box; padding: 26px 16px 16px;
  border: 3px solid #e2b648; border-radius: 28px; outline: 2px solid #fff6dc; outline-offset: -9px;
  background: linear-gradient(#fffaf0, #f4e8cc); color: #6a5440; text-align: center;
  box-shadow: 0 4px 0 #b88a2a, 0 12px 30px #0007; font-family: var(--pixel-font);
}
.dialog.gmerch[open] { animation: b3Pop 0.25s cubic-bezier(.3, 1.5, .5, 1); }
.gmerch .mall-ask-who { background: #a8d890; color: #24461a; box-shadow: 0 2px 0 #6a9a50; }
.gmerch .mshop-name { margin: 0 0 10px; }
.garden-shop { width: min(480px, calc(100vw - 32px)); }
.garden-pick { width: min(360px, calc(100vw - 32px)); }
.gcat-say { margin: 0 0 10px; min-height: 2.8em; font-size: 13px; line-height: 1.4; color: #6a5440; }
.gcat-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 10px; }
.gcat-tab {
  padding: 7px 12px 6px; border: 0; border-radius: 999px; background: #e8dcc0; color: #6a5440; cursor: pointer;
  font: 12px/1 var(--pixel-font); box-shadow: 0 2px 0 #c4b290; -webkit-tap-highlight-color: transparent;
}
.gcat-tab.on { background: var(--ink); color: #fff; box-shadow: 0 2px 0 #0003; }
.gcat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-height: min(48vh, 400px); overflow-y: auto;
  margin: 0 0 14px; padding: 4px 4px 6px; border-radius: 18px; background: #efe4c6; box-shadow: inset 0 2px 6px #0002;
}
.gcat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 6px 8px; border: 0; border-radius: 16px;
  background: #fffaf0; color: #4a3424; font: 12px/1.2 var(--pixel-font); cursor: pointer; box-shadow: 0 3px 0 #d8c8a4;
  -webkit-tap-highlight-color: transparent;
}
.gcat-tile:active { translate: 0 2px; box-shadow: 0 1px 0 #d8c8a4; }
.gcat-box {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 12px;
  background: radial-gradient(circle at 50% 36%, #fffbea 0%, color-mix(in srgb, var(--ink) 24%, #fbf0d8) 52%, color-mix(in srgb, var(--ink) 55%, #2a1e24) 100%);
  box-shadow: inset 0 0 0 2px #e2b648, inset 0 5px 12px #0003;
}
.gcat-pic { width: 82%; height: 82%; object-fit: contain; image-rendering: auto; }
.gcat-pic.gcat-3d { width: 100%; height: 100%; }
.gcat-name { text-align: center; }
.gcat-price { display: flex; align-items: center; gap: 4px; color: #5a3a10; font-size: 13px; }
.gcat-coin { width: 16px; height: 16px; }
.gcat-tile.sold { opacity: 0.6; }
.gcat-tile.sold .gcat-price { color: #3a7a32; }
.garden-pick.short .mshop-price b, .garden-pick.short .mshop-price small { color: #c83828; }
@media (prefers-reduced-motion: reduce) { .dialog.gmerch[open] { animation: none; } }

/* each stand's price, on screen at its plinth's front (js/mall-furniture.js's priceTags()), hidden under the buy window */
.mall-tags { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mall3d:has(.mall-shop:not([hidden])) .mall-tags { visibility: hidden; }
.mall-tag {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 5px; padding: 5px 10px 5px 6px;
  transform: translate(-50%, -50%); border: 2px solid var(--ink); border-radius: 999px; background: #fffaf0;
  color: #4a3424; font: 13px/1 var(--pixel-font); white-space: nowrap; box-shadow: 0 2px 0 #0004;
}
.mall-tag[hidden] { display: none; }
.mall-tag-coin { width: 15px; height: 15px; flex: none; }
/* a catalogue's name over its shopkeeper (keeperSign() in js/mall-3d.js): a bigger tag, its point down at the keeper */
.mall-sign {
  position: absolute; left: 0; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px;
  transform: translate(-50%, calc(-100% - 9px)); border: 2px solid var(--ink); border-radius: 999px; background: #fffaf0;
  color: #4a3424; font: 14px/1 var(--pixel-font); white-space: nowrap; box-shadow: 0 3px 0 #0004; pointer-events: none;
}
.mall-sign::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; width: 10px; height: 10px; translate: -50% 0; rotate: 45deg;
  background: #fffaf0; border: solid var(--ink); border-width: 0 2px 2px 0;
}
.mall-sign[hidden], .mall3d:has(.mall-shop:not([hidden])) .mall-sign { display: none; }
.mall-sign-icon { width: 18px; height: 18px; flex: none; color: var(--ink); }

/* ---------- the Clearing's PC (js/pc.js): full screen, the PC by the plaza grown big ---------- */
.pc-screen {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr); /* a definite row, so the unit's 100% height holds and a long page scrolls inside it */
  background: radial-gradient(ellipse at 50% 40%, rgba(20, 60, 80, 0.55), rgba(6, 12, 24, 0.82));
  font-family: var(--pixel-font); font-synthesis-weight: none; -webkit-tap-highlight-color: transparent;
  animation: pcFade 0.25s ease-out;
}
.pc-screen.off { animation: pcFade 0.3s ease-in reverse forwards; pointer-events: none; }
.pc-screen.off .pc-unit { animation: pcGrow 0.3s ease-in reverse forwards; }
.pc-unit {
  position: relative; display: flex; flex-direction: column; width: min(440px, 100%); height: min(800px, 100%);
  animation: pcGrow 0.35s cubic-bezier(0.2, 1.3, 0.4, 1);
}
/* the right side in shade, a little turned, like the one outside */
.pc-unit::before {
  content: ""; position: absolute; top: 14px; right: -12px; bottom: 30px; width: 18px; border-radius: 0 14px 10px 0;
  background: linear-gradient(90deg, #c02830, #8e1c26);
}
.pc-hood {
  position: relative; flex: 1; min-height: 0; display: flex; padding: 22px 16px 16px;
  border-radius: 30px 30px 10px 10px;
  background: linear-gradient(#ffffff, #f0f2f8 60%, #d4d8e2);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.08), inset 3px 3px 0 #fff;
}
.pc-cam {
  position: absolute; top: 12px; left: 50%; z-index: 2; translate: -50% 0; display: flex; align-items: center; gap: 6px;
  padding: 6px 18px 8px; border-radius: 0 0 14px 14px; background: #f4f6fa;
}
.pc-cam i { width: 6px; height: 6px; border-radius: 50%; background: #3a3e4c; }
.pc-cam i:nth-child(2) { width: 10px; height: 10px; background: radial-gradient(circle at 35% 35%, #6a7088, #1a1c26); }
.pc-glass {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  background:
    repeating-linear-gradient(transparent 0 5px, rgba(255, 255, 255, 0.22) 5px 7px),
    linear-gradient(100deg, rgba(150, 120, 200, 0.4) 0 4%, transparent 9%),
    linear-gradient(#a8f4f8, #7ce8f0 50%, #58d6e8);
  box-shadow: inset 0 3px 8px rgba(0, 60, 90, 0.35), 0 0 22px rgba(120, 240, 255, 0.45);
  color: #12384a;
  animation: pcBoot 0.6s steps(6) both;
}
.pc-page { flex: 1; min-height: 0; overflow: auto; padding: 30px 14px 10px; scrollbar-width: thin; }
.pc-say {
  flex: none; min-height: 4.4em; margin: 0 10px 10px; padding: 10px 12px; border: 3px solid #3a78b8; border-radius: 10px;
  background: #fbfdff; color: #1e2a3a; font-size: 0.9rem; line-height: 1.6; box-shadow: inset 0 0 0 2px #cfe6ff;
}
.pc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pc-title { flex: 1; font-size: 0.78rem; letter-spacing: 1px; color: #0e3446; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.pc-back {
  flex: none; width: 34px; height: 34px; border: 2px solid #2a6a98; border-radius: 50%; cursor: pointer;
  background: linear-gradient(#ffffff, #d6eefa); color: #2a6a98; font: 0.75rem var(--pixel-font);
}
.pc-count { font-size: 0.75rem; color: #0e3446; }
.pc-menu { display: flex; flex-direction: column; gap: 8px; }
.pc-row {
  position: relative; padding: 14px 14px 14px 34px; border: 2px solid #3a78b8; border-radius: 10px; cursor: pointer; text-align: left;
  background: #fbfdff; color: #1e2a3a; font: 0.75rem var(--pixel-font); font-synthesis-weight: none;
  box-shadow: 0 3px 0 #2a5a90;
}
/* Gen 3's cursor: a blue arrow on the row pointed at */
.pc-row::before {
  content: ""; position: absolute; left: 12px; top: 50%; translate: 0 -50%; border: 6px solid transparent; border-left: 9px solid #3a78b8;
  opacity: 0; transition: opacity 0.1s;
}
.pc-row:hover::before, .pc-row:focus-visible::before, .pc-row:focus::before { opacity: 1; }
.pc-row:active { translate: 0 2px; box-shadow: 0 1px 0 #2a5a90; }
.pc-sub { display: block; margin-top: 6px; font-size: 0.75rem; letter-spacing: 0.5px; color: #2a6a80; }
/* signed out: the account row in gold with a cloud, glowing, so it's the one to notice */
.pc-row.pc-cloud {
  padding-right: 54px; border-color: #c08a10; background: linear-gradient(#fff6c8, #ffe27a); color: #3a2400; box-shadow: 0 3px 0 #8a5c00;
  animation: pcCloud 1.6s ease-in-out infinite alternate;
}
.pc-row.pc-cloud::before { border-left-color: #c08a10; }
.pc-row.pc-cloud::after {
  content: ""; position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 30px; height: 22px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M8 20a6 6 0 0 1-.6-12A8 8 0 0 1 22.6 6.4 6.8 6.8 0 0 1 23 20z' fill='%23fff' stroke='%233a78b8' stroke-width='2'/%3E%3Cpath d='M15 16V10m-3 3 3-3 3 3' fill='none' stroke='%233a78b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pc-row.pc-cloud .pc-sub { color: #7a4c00; }
.pc-row.pc-cloud:active { box-shadow: 0 1px 0 #8a5c00; }
@keyframes pcCloud { from { box-shadow: 0 3px 0 #8a5c00, 0 0 0 rgba(255, 200, 40, 0); } to { box-shadow: 0 3px 0 #8a5c00, 0 0 14px 2px rgba(255, 200, 40, 0.8); } }
.pc-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: -4px 0 12px; }
.pc-pick-name { font-size: 0.75rem; }
.pc-pick-note { font-size: 0.75rem; color: #2a6a80; }
.pc-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.pc-mon {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 2px solid rgba(42, 106, 152, 0.45); border-radius: 12px; background: rgba(255, 255, 255, 0.55);
  min-width: 0; overflow: hidden;
}
/* Absolute so a sprite's own size never stretches its tile: every box the same square */
.pc-mon img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; image-rendering: pixelated; }
.pc-shiny {
  flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 2px solid #3a78b8; border-radius: 999px;
  cursor: pointer; background: #fbfdff; color: #1e2a3a; font: 0.75rem var(--pixel-font); font-synthesis-weight: none;
}
.pc-shiny::after {
  content: ""; width: 22px; height: 12px; border-radius: 999px; background: #b8c8d8 radial-gradient(circle at 6px 6px, #fff 4px, transparent 4.5px) no-repeat;
  transition: background-color 0.15s, background-position 0.15s;
}
.pc-shiny.on { border-color: #c89418; background: linear-gradient(#fff8d8, #ffe890); }
.pc-shiny.on::after { background-color: #e0a820; background-position: 10px 0; }
.pc-mon.on { border-color: #c89418; background: linear-gradient(#fff8d8, #ffe890); box-shadow: 0 0 0 2px #f8d040, 0 0 12px rgba(255, 210, 60, 0.8); }
.pc-mon:active { translate: 0 2px; }
.pc-mon-tag { position: absolute; top: 3px; right: 5px; font-size: 0.75rem; color: #8e5c06; }
.pc-deco .pc-mon-tag { z-index: 1; top: 2px; right: 2px; padding: 1px 4px; border-radius: 6px; background: rgba(255, 255, 255, 0.9); line-height: 1.3; }
.pc-empty { margin-top: 24px; text-align: center; font-size: 0.75rem; }
/* Patch notes: a white sheet of lines under blue headings on the striped screen */
.pc-notes { padding: 12px 12px 14px; border: 2px solid #3a78b8; border-radius: 10px; background: #fbfdff; color: #1e2a3a; box-shadow: 0 3px 0 #2a5a90; }
.pc-notes .patch-title { margin: 0; font-size: 0.75rem; line-height: 1.5; color: #0e3446; }
.pc-notes .patch-date { margin: 2px 0 4px; font-size: 0.75rem; color: #5a7088; }
.pc-notes .patch-head { margin: 14px 0 6px; font-size: 0.75rem; color: #1e5a96; }
.pc-notes .patch-list { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 7px; font-size: 0.75rem; line-height: 1.6; }
.pc-notes .patch-game { display: flex; flex-direction: column; gap: 10px; }
.pc-notes .patch-row-text { display: flex; flex-direction: column; gap: 3px; font-size: 0.75rem; line-height: 1.6; }
.pc-notes .patch-row-text b { font-size: 0.75rem; color: #1e5a96; }
/* Decorations: the base's furniture, its pictures smooth (never pixelated), gold for what stands in the room */
.pc-screen.in-base { z-index: 910; }
/* The kinds as one tray of equal keys, five a row, so it always fits the screen's width and lines up */
.pc-chips {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin-bottom: 10px; padding: 3px;
  border: 2px solid #3a78b8; border-radius: 12px; background: #dcebf8; box-shadow: inset 0 1px 2px rgba(30, 60, 100, 0.25);
}
.pc-chip {
  min-width: 0; padding: 8px 2px; border: 0; border-radius: 9px; cursor: pointer; overflow: hidden;
  background: transparent; color: #1e2a3a; font: clamp(0.75rem, 2.3vw, 0.75rem) var(--pixel-font); font-synthesis-weight: none;
  white-space: nowrap; text-overflow: clip; text-align: center;
}
.pc-chip.on { background: #3a78b8; color: #fff; box-shadow: 0 1px 0 #24568a, inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.pc-chip:active { translate: 0 1px; }
.pc-decos { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
.pc-deco { padding: 8px; }
.pc-deco canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.pc-deco.picked { outline: 3px solid #3a78b8; outline-offset: 1px; }
/* a piece not looked at yet: the PC's "!" inside the tile's corner (the tile clips), and a small one on its kind's key */
.pc-deco .pc-new { top: 3px; left: 3px; right: auto; width: 18px; height: 18px; font-size: 12px; border-radius: 5px; }
.pc-chip { position: relative; }
.pc-chip.fresh { box-shadow: inset 0 0 0 2px #ffc020; }
.pc-chip.fresh::after { content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #ffc020; box-shadow: 0 0 0 1px #3a1c0c; }
.pc-deco-pick {
  display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto 1fr; column-gap: 12px; row-gap: 4px;
  align-items: start; text-align: left; margin: 0 0 12px; padding: 10px 12px;
  background: rgba(255, 255, 255, 0.85); border: 3px solid #3a78b8; border-radius: 14px;
}
.pc-deco-pick > :not(.pc-deco-big) { grid-column: 2; min-width: 0; }
.pc-deco-pick .pc-pick-name { line-height: 1.4; overflow-wrap: anywhere; }
.pc-deco-pick .pc-dupe, .pc-deco-pick .pc-away { margin: 4px 0 0; justify-self: start; align-self: end; }
.pc-deco-big { grid-row: 1 / -1; position: relative; width: 96px; height: 96px; overflow: hidden; border-radius: 10px; background: #fdf3d0; }
.pc-deco-big canvas { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; image-rendering: auto; filter: drop-shadow(0 3px 0 rgba(0, 60, 90, 0.2)); }
.pc-away { margin-top: 4px; padding: 10px 16px 10px 30px; }
.pc-name { display: flex; gap: 10px; align-items: center; }
.pc-name-box {
  flex: 1; min-width: 0; padding: 12px; border: 3px solid #3a78b8; border-radius: 10px; background: #fbfdff; color: #1e2a3a;
  font: 0.8rem var(--pixel-font); text-transform: uppercase;
}
.pc-name-ok { height: 40px; }
.pc-ledge {
  position: relative; z-index: 1; height: 20px; margin: -4px -8px 0; border-radius: 10px;
  background: linear-gradient(#ffffff, #eef0f6 50%, #c4cad6); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.18);
}
.pc-stand {
  position: relative; flex: none; height: 112px; margin: 0 2px 22px; display: grid; place-items: center;
  border-radius: 0 0 16px 16px; background: linear-gradient(90deg, #f0605a, #e03c3a 40%, #c42a2e);
}
/* the white feet */
.pc-stand::before, .pc-stand::after {
  content: ""; position: absolute; bottom: -20px; width: 26%; height: 30px; border-radius: 12px;
  background: linear-gradient(#ffffff, #e4e8f0 50%, #b8bfcc); z-index: -1;
}
.pc-stand::before { left: 2%; }
.pc-stand::after { right: 2%; }
.pc-ball {
  width: 64px; height: 64px; border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 9px, #c42a2e 9px 11px, #fff 11px 15px, transparent 15px),
    linear-gradient(transparent 46%, #c42a2e 46% 54%, transparent 54%),
    radial-gradient(circle, transparent 0 21px, #fff 21px);
  background-color: #e03c3a;
}
.pc-off {
  position: absolute; left: 14px; bottom: 14px; padding: 8px 12px; cursor: pointer; border: 2px solid #8e1c26; border-radius: 999px;
  background: linear-gradient(#ffffff, #e4e8f0); color: #8e1c26; font: 0.75rem var(--pixel-font); text-transform: uppercase;
  box-shadow: 0 2px 0 #8e1c26;
}
.pc-off:active { translate: 0 2px; box-shadow: none; }
/* Prof. Oak's PC: the rating's three numbers, the next-unlock card (a tap shows another) and every page's bar */
.pc-rate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pc-rate-n {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 2px solid #3a78b8;
  border-radius: 10px; background: #fbfdff; box-shadow: 0 3px 0 #2a5a90;
}
.pc-rate-n small { font-size: 0.75rem; color: #2a6a80; letter-spacing: 0.5px; }
.pc-rate-n b { font-weight: 400; font-size: 1rem; color: #1e2a3a; }
.pc-hint {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; width: 100%;
  margin-bottom: 14px; padding: 10px 12px 12px; cursor: pointer; text-align: left; border: 2px solid #c89418; border-radius: 10px;
  background: linear-gradient(#fffbe6, #fff0b0); color: #3a2a08; font: 0.75rem/1.8 var(--pixel-font); font-synthesis-weight: none;
  box-shadow: 0 3px 0 #a8780c;
}
.pc-hint:disabled { cursor: default; }
.pc-hint:not(:disabled):active { translate: 0 2px; box-shadow: 0 1px 0 #a8780c; }
.pc-hint-top { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 0.75rem; color: #8e5c06; letter-spacing: 0.5px; }
.pc-hint-art { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; filter: brightness(0) opacity(0.7); }
.pc-hint-text { grid-column: auto / -1; }
.pc-done { display: flex; flex-direction: column; gap: 6px; }
.pc-done-head { margin-top: 6px; font-weight: 400; font-size: 0.75rem; color: #0e3446; letter-spacing: 1px; }
.pc-done-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 4.5em; align-items: center; gap: 8px; font-size: 0.75rem; color: #1e2a3a; }
.pc-done-name { line-height: 1.6; }
.pc-done-n { text-align: right; }
.pc-done-bar {
  height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px rgba(42, 106, 152, 0.4);
  background-image: linear-gradient(90deg, #3a9a58, #6ad070); background-size: calc(var(--k) * 100%) 100%; background-repeat: no-repeat;
}
.pc-done-row.star { color: #8e5c06; }
.pc-done-row.star .pc-done-bar { background-image: linear-gradient(90deg, #e0a820, #f8d850); }
/* Missions (js/missions.js): a card each, its goal and PokéCoins over a bar, Claim once done; the bonus for all of them last */
.pc-quests { display: flex; flex-direction: column; gap: 8px; }
.pc-quest-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; font-size: 0.75rem; color: #0e3446; letter-spacing: 1px; }
.pc-quest-head b { font-weight: 400; }
.pc-quest-left { font-size: 0.75rem; letter-spacing: 0; color: #2a6a80; }
.pc-quest {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 8px 10px;
  padding: 10px 12px; border: 2px solid #3a78b8; border-radius: 10px; background: #fbfdff; color: #1e2a3a; font-size: 0.75rem;
  box-shadow: 0 3px 0 #2a5a90;
}
.pc-quest-text { line-height: 1.6; }
.pc-quest-coins { display: flex; align-items: center; gap: 4px; justify-self: end; color: #8e5c06; font-size: 0.75rem; }
.pc-quest-coins b { font-weight: 400; }
.pc-quest-coin { width: 18px; height: 18px; }
.pc-quest-coins.paid { animation: pcPaid 0.5s ease-out; }
.pc-quest-prog { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #2a6a80; }
.pc-quest-prog .pc-done-bar { flex: 1; }
.pc-quest-n { flex: none; }
.pc-quest-claim { grid-column: 2; grid-row: 2; min-width: 70px; height: 28px; font-size: 0.75rem; }
.pc-quest-tag { grid-column: 2; grid-row: 2; justify-self: end; font-size: 0.75rem; color: #c02a2a; letter-spacing: 1px; }
.pc-quest-tag.none { visibility: hidden; }
.pc-quest.done { border-color: #c89018; box-shadow: 0 3px 0 #8e5c06, 0 0 10px rgba(255, 216, 64, 0.5); }
.pc-quest.paid { opacity: 0.6; }
.pc-quest.paid .pc-done-bar { background-image: linear-gradient(90deg, #8aa0b0, #b0c4d0); }
.pc-quest.bonus { background: linear-gradient(#fffbea, #fff3c8); border-style: dashed; }
/* the Mailbox (js/mail.js): envelopes in a list, the newest first; one opened is a letter rising out of its envelope */
.pc-mail { display: flex; flex-direction: column; gap: 10px; }
.pc-env {
  position: relative; display: grid; grid-template-columns: 38px 1fr auto; grid-template-rows: auto auto; align-items: center;
  column-gap: 12px; padding: 10px 12px; cursor: pointer; text-align: left; border: 2px solid var(--ink); border-radius: 8px;
  background: linear-gradient(162deg, transparent 0 49.6%, rgba(0, 0, 0, 0.06) 50%, transparent 50.4%), var(--paper);
  color: #2a2620; font: 0.75rem var(--pixel-font); font-synthesis-weight: none; box-shadow: 0 3px 0 rgba(0, 40, 70, 0.35);
}
.pc-env:active { translate: 0 2px; box-shadow: 0 1px 0 rgba(0, 40, 70, 0.35); }
.pc-env.read { opacity: 0.62; }
.pc-env-stamp {
  grid-row: 1 / span 2; width: 34px; height: 40px; border-radius: 3px; background:
    radial-gradient(circle, #fff 0 5px, var(--ink) 5px 6px, #fff 6px 9px, transparent 9px),
    linear-gradient(transparent 46%, var(--ink) 46% 54%, transparent 54%), var(--ink);
  outline: 2px dashed #fff; outline-offset: -4px;
}
.pc-env-from { font-size: 0.75rem; color: var(--ink); letter-spacing: 0.5px; }
.pc-env-title { grid-column: 2; font-weight: 400; font-size: 0.75rem; }
.pc-env-when { grid-column: 3; grid-row: 1 / span 2; }
.pc-env-when { font-size: 0.75rem; color: #6a6258; }

.pc-letter { position: relative; width: min(300px, 100%); height: 250px; margin: 0 auto 12px; overflow: hidden; perspective: 600px; }
.pc-env-back, .pc-env-front, .pc-env-flap { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; }
.pc-env-back { border-radius: 8px; background: color-mix(in srgb, var(--ink) 70%, #000); }
.pc-env-front {
  z-index: 2; border-radius: 0 0 8px 8px; background:
    linear-gradient(to top right, var(--paper) 49.5%, transparent 50.5%) left / 51% 100% no-repeat,
    linear-gradient(to top left, var(--paper) 49.5%, transparent 50.5%) right / 51% 100% no-repeat,
    linear-gradient(transparent 55%, var(--paper) 55%);
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.12));
}
.pc-env-flap {
  z-index: 0; bottom: 110px; height: 60px; transform-origin: 50% 100%;
  clip-path: polygon(0 100%, 50% 0, 100% 100%); background: color-mix(in srgb, var(--paper) 88%, var(--ink));
}
.pc-sheet {
  position: absolute; z-index: 4; left: 12px; right: 12px; top: 18px; display: flex; flex-direction: column; gap: 8px;
  padding: 14px 14px 16px; border-radius: 6px; background: #fffef9; color: #2a2620; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  background-image: repeating-linear-gradient(transparent 0 19px, rgba(60, 110, 170, 0.12) 19px 20px);
}
.pc-sheet-from { font-size: 0.75rem; color: var(--ink); }
.pc-sheet-title { font-weight: 400; font-size: 0.75rem; }
.pc-sheet-text { margin: 0; font-size: 0.75rem; line-height: 1.8; }
.pc-prize { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; }
.pc-prize-coin { width: 30px; height: 30px; }
.pc-prize-mat { font-size: 1.6rem; line-height: 1; }
.pc-prize-ball { width: 36px; height: 36px; image-rendering: pixelated; }
.pc-prize-n { font-weight: 400; font-size: 0.95rem; color: #8e5c06; }
.pc-prize { flex-wrap: wrap; }
.pc-prize-label { flex-basis: 100%; text-align: center; font-size: 0.75rem; opacity: 0.7; }
.pc-prize-code { font-size: 1.1rem; letter-spacing: 0.1em; color: var(--ink); user-select: all; }
.pc-letter.paid .pc-prize { animation: pcPaid 0.5s ease-out; }
.pc-claimed {
  position: absolute; right: 10px; top: 12px; padding: 4px 8px; border: 3px solid #c02a2a; border-radius: 6px;
  color: #c02a2a; font-size: 0.75rem; rotate: -12deg; opacity: 0.85; animation: pcStamp 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.pc-claim { display: block; margin: 0 auto; min-width: 140px; height: 44px; }
/* opening: the flap swings up and over, the letter rises out of the envelope, then settles in front of it to be read */
.pc-letter.fresh .pc-env-flap { animation: pcFlap 0.45s 0.15s ease-in-out backwards; }
.pc-letter.fresh .pc-sheet { animation: pcRise 1s 0.5s ease-in-out backwards; }
@keyframes pcFlap { from { rotate: x 180deg; z-index: 3; } }
@keyframes pcRise { 0% { translate: 0 220px; z-index: 1; } 55% { translate: 0 -14px; z-index: 1; } 56% { z-index: 4; } 100% { translate: 0 0; z-index: 4; } }
@keyframes pcPaid { 40% { scale: 1.25; } }
@keyframes pcStamp { from { scale: 2.4; opacity: 0; } }
.pc-screen.calm .pc-letter *, .pc-screen.calm .pc-new, .pc-screen.calm .pc-cloud { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .pc-letter *, .pc-new, .pc-cloud { animation: none !important; } }
@keyframes pcFade { from { opacity: 0; } }
@keyframes pcGrow { from { scale: 0.4; translate: 0 30%; opacity: 0; } }
@keyframes pcBoot { 0% { filter: brightness(0.2) saturate(0); } 50% { filter: brightness(1.6); } 100% { filter: none; } }
.pc-screen.calm, .pc-screen.calm .pc-unit, .pc-screen.calm .pc-glass { animation: none; }
@media (prefers-reduced-motion: reduce) { .pc-screen, .pc-unit, .pc-glass { animation: none !important; } }
.pc-screen button:focus:not(:focus-visible) { outline: none; }

/* Halloween's ghosts (js/hub-spooky.js) speak in the Furniture store's speech window (.mall-line), over the bar; a
   tapped talk shows the bouncing arrow, and a place's card takes the spot from them */
.hub .spook-foot { bottom: calc(var(--hub-bar-h, 90px) + 14px); z-index: 6; }
.spook-line.on { pointer-events: auto; cursor: pointer; }
.spook-line i { display: none; }
.spook-line.more i {
  display: block; position: absolute; right: 18px; bottom: 8px; width: 0; height: 0;
  border: 6px solid transparent; border-top: 7px solid #e8a040; border-bottom: 0; animation: b3Nudge 0.8s ease-in-out infinite;
}
/* a passing line floats over the ghost's head in a small one, its name on the same tag, its tail pointing down at it */
.spook-bubble {
  position: absolute; z-index: 5; translate: -50% calc(-100% - 8px); width: max-content; max-width: min(220px, 62vw);
  box-sizing: border-box; margin: 0; padding: 15px 15px 11px; pointer-events: none; border-radius: 20px / 17px;
  background: #fbf4df; color: #6a5440; font-size: 13px; line-height: 1.4; text-align: center;
  box-shadow: 0 3px 0 #d8c8a4, 0 5px 12px #0005; transform-origin: 50% 100%;
}
.spook-bubble .mall-who {
  display: block; position: absolute; left: 12px; top: -11px; padding: 4px 10px; border-radius: 999px;
  background: #f0a0b0; color: #6a2a3a; font-size: 12px; rotate: -4deg; box-shadow: 0 2px 0 #c87888;
}
.spook-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; translate: -50% 0;
  border: 8px solid transparent; border-top: 9px solid #fbf4df; border-bottom: 0; filter: drop-shadow(0 2px 0 #d8c8a4);
}
.spook-bubble[hidden] { display: none; }
.spook-bubble.spook-in { animation: spookPop 0.25s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes spookPop { from { scale: 0.6; opacity: 0; } }
.hub-card:not([hidden]) ~ .spook-foot, .hub.held .spook-foot, .hub.held .spook-bubble, .hub-card:not([hidden]) ~ .spook-bubble { display: none; }
@media (prefers-reduced-motion: reduce) { .spook-line.more i, .spook-bubble.spook-in { animation: none; } }

/* something new to read in the PC: a gold "!" bobbing over the item's corner, like the Pokédex keys' (.dex-news), only bigger */
.pc-new {
  position: absolute; top: -8px; right: -8px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 7px; background: linear-gradient(#ffe070, #ffc020); color: #3a1c0c; font: 13px/1 var(--pixel-font);
  box-shadow: 0 0 0 2px #3a1c0c, 0 3px 0 2px #3a1c0c, 0 0 12px rgba(255, 208, 64, 0.9);
  animation: pcNew 0.7s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes pcNew { from { translate: 0 0; } to { translate: 0 -4px; } }

/* House upgrades: the blueprint, after WoW's housing one, on a dark grid */
.pc-blueprint { margin: 0 0 12px; padding: 6px; border: 2px solid #3a78b8; border-radius: 10px; background: #081a30; box-shadow: 0 3px 0 #2a5a90; }
.pc-blueprint { display: flex; align-items: center; gap: 6px; }
.pc-bp { display: block; flex: 1; min-width: 0; width: 100%; max-height: min(300px, 34vh); touch-action: none; user-select: none; -webkit-user-select: none; }
.pc-blueprint.zoomed .pc-bp { cursor: grab; }
.pc-blueprint.zoomed .pc-bp:active { cursor: grabbing; }
.pc-bp-keys { flex: none; display: flex; flex-direction: column; gap: 6px; }
.pc-bp-zoom { width: 30px; height: 30px; padding: 0; border: 2px solid #a8c4dc; border-radius: 50%; background: #1c3a5c; color: #eef4fa; font: 700 18px/1 sans-serif; cursor: pointer; box-shadow: 0 2px 0 #0a1a2c; }
.pc-bp-zoom:disabled { opacity: 0.35; cursor: default; }
.pc-bp-room .pc-bp-edge { fill: #3c4654; stroke: #a8c4dc; stroke-width: 0.22; }
.pc-bp-room .pc-bp-fill { fill: #3c4654; }
.pc-bp-room { cursor: pointer; }
.pc-bp-room.entry .pc-bp-edge, .pc-bp-room.entry .pc-bp-fill { fill: #2c3440; }
.pc-bp-room.ghost .pc-bp-edge { fill: rgba(88, 216, 88, 0.22); stroke: #58d858; stroke-dasharray: 0.5 0.35; }
.pc-bp-room.ghost .pc-bp-fill { fill: rgba(88, 216, 88, 0.22); }
.pc-bp-name { fill: #eef4fa; text-anchor: middle; dominant-baseline: central; font-family: var(--pixel-font); pointer-events: none; }
.pc-bp-hit { fill: transparent; }
.pc-bp-pip circle:last-child { stroke: #10202c; stroke-width: 0.14; }
.pc-bp-pip.shut circle:last-child { fill: #9aa6b2; }
.pc-bp-pip.open { cursor: pointer; }
.pc-bp-pip.open circle:last-child { fill: #58d858; }
.pc-bp-pip.open.on circle:last-child { fill: #fff; stroke: #58d858; stroke-width: 0.3; animation: pcPip 0.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes pcPip { to { scale: 1.35; } }
.pc-bp-room.below { pointer-events: none; }
.pc-bp-room.below .pc-bp-edge { fill: none; stroke: #4a6a8a; stroke-dasharray: 0.4 0.3; }
.pc-bp-room.below .pc-bp-fill { fill: rgba(60, 70, 84, 0.25); }
.pc-bp-room.picked .pc-bp-edge { stroke: #f0b030; stroke-width: 0.3; }
.pc-bp-room.picked .pc-bp-fill { fill: #5a4a3a; }
.pc-bp-pip.shut.stairs rect { fill: #c8a070; stroke: #10202c; stroke-width: 0.14; }
.pc-bp-pip.join { cursor: pointer; }
.pc-bp-pip.join circle:last-child { fill: #f0b030; }
.pc-bp-pip.join.on circle:last-child { fill: #fff; stroke: #f0b030; stroke-width: 0.3; }
/* the backyard: a lawn once bought, a dashed green plot till then; the path to it from the back door */
.pc-bp-room.yard .pc-bp-edge { fill: #3e6e3a; stroke: #8ad878; }
.pc-bp-room.yard .pc-bp-fill, .pc-bp-room.yard.picked .pc-bp-fill { fill: #3e6e3a; }
.pc-bp-room.yard.plot .pc-bp-edge { fill: rgba(88, 216, 88, 0.12); stroke: #58d858; stroke-dasharray: 0.5 0.35; }
.pc-bp-room.yard.plot .pc-bp-fill { fill: rgba(88, 216, 88, 0.12); }
.pc-bp-room.yard.plot.picked .pc-bp-fill { fill: rgba(88, 216, 88, 0.3); }
.pc-bp-room.yard.picked .pc-bp-edge { stroke: #f0b030; }
/* the page's Build key held at the foot of the scroll, so a tall blueprint never pushes it out of sight */
.pc-act { position: sticky; bottom: -10px; z-index: 1; margin: 0 -14px; padding: 8px 14px 2px; background: linear-gradient(rgba(124, 232, 240, 0), #7ce8f0 10px); }
.pc-act > :last-child { margin-bottom: 10px; }
.pc-build-row { display: flex; justify-content: center; gap: 10px; margin: 0 0 12px; }
.pc-build-row .pc-build { margin: 0; }
.pc-build.pc-turn { min-width: 90px; }
.pc-floors { margin-bottom: 8px; }
.pc-plan { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pc-plan-name { font-weight: 400; font-size: 0.75rem; }
.pc-plan-note { font-size: 0.75rem; color: #2a6a80; line-height: 1.6; }
.pc-build, .pc-dupe { margin: 8px auto 0; height: 40px; }
.pc-build { display: block; margin: 0 auto 12px; }
.pc-kinds { gap: 6px; margin-bottom: 4px; }
.pc-kind { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px 11px 30px; }
.pc-kind.on { border-color: #c89418; background: linear-gradient(#fff8d8, #ffe890); }
.pc-kind:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.pc-kind-size { font-size: 0.75rem; color: #2a6a80; }
.pc-screen.calm .pc-bp-pip { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .pc-bp-pip circle { animation: none !important; } }
/* the Game Corner's regulars (js/corner-crowd.js) share the ghosts' bubble, kept on screen with its tail on the speaker */
.crowd-bubble::after { left: calc(50% + var(--tail, 0px)); }

/* ---------- the Ranger Task Board (js/ranger.js; 2026-10-16, the user's ask: a cool, immersive quest menu) ----------
   A cork board in a bamboo frame under a carved plaque: the rank's badge and bar, three wooden tabs, then pinned
   paper notes, each a little crooked, a Polaroid of the Pokémon (a silhouette till caught) or the ball, a paw-print
   trail and the reward. A ready note wiggles on its pin under a red CLAIM stamp; a claimed one fades under RANGER ✓. */
.ranger-board {
  width: min(760px, 100vw - 16px); max-width: none; max-height: min(92vh, 100dvh - 16px); padding: 0; border: none;
  background: transparent; color: #3a2a18; overflow: visible;
}
.ranger-board::backdrop { background: radial-gradient(circle at 50% 40%, #1a120a99, #0a0604e6); backdrop-filter: blur(2px); }
.ranger-board[open] { animation: rbIn 0.32s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes rbIn { from { transform: translateY(24px) scale(0.94); opacity: 0; } }
.rb-frame {
  position: relative; display: flex; flex-direction: column; max-height: min(92vh, 100dvh - 16px); box-sizing: border-box;
  padding: 10px; border-radius: 18px;
  background: repeating-linear-gradient(90deg, #c8a058 0 11px, #b88e48 11px 13px, #d6b06a 13px 22px);
  box-shadow: inset 0 0 0 3px #7a5428, inset 0 0 0 6px #e0c07a, 0 18px 50px #000a;
}
.rb-head { position: relative; display: flex; justify-content: center; margin: -26px 0 6px; }
.rb-plaque {
  display: flex; align-items: center; gap: 10px; padding: 10px 22px 9px; border-radius: 12px;
  background: linear-gradient(#6a8a3e, #3e6228); border: 3px solid #4a3018; box-shadow: 0 4px 0 #2e1e0c, 0 8px 18px #0007;
}
.rb-plaque h2 { margin: 0; font: 15px/1 var(--pixel-font); letter-spacing: 0.08em; color: #fbf3dc; text-shadow: 0 2px 0 #1e3818; white-space: nowrap; }
.rb-plaque-ball { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 2px solid #26262c; background: linear-gradient(#58a848 0 46%, #26262c 46% 56%, #f4f4f4 56%); }
.rb-close {
  position: absolute; right: 2px; top: 22px; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #4a3018;
  background: radial-gradient(circle at 40% 35%, #d8a868, #8a5a30); color: #fbf3dc; font-size: 15px; cursor: pointer; box-shadow: 0 3px 0 #2e1e0c;
}
.rb-rank {
  display: flex; align-items: center; gap: 12px; margin: 0 4px 8px; padding: 8px 12px; border-radius: 12px;
  background: linear-gradient(#f6ead0, #e8d6b0); box-shadow: inset 0 0 0 2px #b88e48, 0 2px 0 #7a5428;
}
.rb-rank > div { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
.rb-badge {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 24px; color: #ffe890;
  background: radial-gradient(circle at 40% 35%, #6a9a48, #2e5426); border: 3px solid #e0b040; box-shadow: 0 3px 0 #8a6a18, inset 0 0 0 2px #fff6;
}
.rb-rank-lv { font: 12px/1 var(--pixel-font); color: #8a6a3a; }
.rb-rank-name { font: 16px/1.2 var(--pixel-font); color: #2e5426; }
.rb-rank-bar { grid-column: 1 / -1; height: 10px; margin: 6px 0 4px; border-radius: 99px; background: #c8b48a; overflow: hidden; box-shadow: inset 0 1px 2px #0004; }
.rb-rank-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #58a848, #a8d870); transition: width 0.5s; }
.rb-rank-next { grid-column: 1 / -1; font-size: 12px; color: #6a5440; }
.rb-coins { flex: none; padding: 6px 10px; border-radius: 99px; background: #fffaf0; box-shadow: inset 0 0 0 2px #e0b040; font-size: 13px; }
.rb-coins b { font: 13px/1 var(--pixel-font); color: #5a3a10; }
/* the tabs wrap, two to a row on a phone, rather than scroll: a hidden scrollbar hid the last two (the user, 2026-10-18) */
.rb-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin: 0 4px; }
.rb-tab {
  position: relative; min-width: 0; padding: 9px 12px 12px; border: none; border-radius: 10px 10px 0 0; cursor: pointer;
  background: linear-gradient(#a87a44, #8a5e30); color: #f4e8c8; font: 12px/1.2 var(--pixel-font); text-align: center;
  box-shadow: inset 0 2px 0 #c8985a; translate: 0 4px; transition: translate 0.15s;
}
.rb-tab.on { background: linear-gradient(#d8b878, #c49a5a); color: #3a2a18; translate: 0 0; }
.rb-tab small { margin-left: 4px; font: 12px/1 var(--pixel-font); opacity: 0.8; white-space: nowrap; }
.rb-tab-ready {
  position: absolute; top: -6px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 99px;
  display: grid; place-items: center; background: #d84838; color: #fff; font: 12px/1 var(--pixel-font); font-style: normal; box-shadow: 0 2px 0 #0005;
}
.rb-tab-ready[hidden] { display: none; }
.rb-cork {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 4px 4px; padding: 16px 10px 20px; border-radius: 0 0 12px 12px;
  background:
    radial-gradient(circle at 20% 30%, #0000000f 1px, transparent 2px) 0 0 / 9px 11px,
    radial-gradient(circle at 70% 60%, #ffffff14 1px, transparent 2px) 0 0 / 13px 7px,
    linear-gradient(#c8955a, #b8844a);
  box-shadow: inset 0 0 0 3px #7a5428, inset 0 6px 16px #0005;
}
.rb-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px 14px; }
.rb-note {
  position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 14px 12px 12px; rotate: var(--tilt);
  background: linear-gradient(#fffdf4, #f6ecd2); box-shadow: 0 3px 0 #0002, 0 8px 14px #0003; border-radius: 3px;
}
.rb-note::after { content: ''; position: absolute; inset: auto 0 0 auto; width: 22px; height: 22px; background: linear-gradient(135deg, transparent 50%, #e2d2a8 50%); }
.rb-pin {
  position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff9, var(--pin) 45%); box-shadow: 0 3px 2px #0005;
}
.rb-photo {
  width: 72px; height: 80px; box-sizing: border-box; padding: 5px 5px 14px; background: #fff; box-shadow: 0 2px 4px #0003;
  rotate: calc(var(--tilt) * -1.5); display: grid; place-items: center;
}
.rb-photo img { width: 100%; height: 100%; object-fit: contain; background: linear-gradient(#cfe8f4, #e8f0d8); }
.rb-photo.ball img { padding: 10px; box-sizing: border-box; background: linear-gradient(#f6ead0, #e8d6b0); }
.rb-photo.unseen img { filter: brightness(0) opacity(0.55); }
.rb-body { min-width: 0; }
.rb-title { margin: 0 0 4px; font: 13px/1.3 var(--pixel-font); color: #2e2418; }
.rb-text { margin: 0 0 6px; font-size: 13px; line-height: 1.35; color: #5a4a36; }
.rb-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; margin-bottom: 6px; }
.rb-paw { font-size: 12px; filter: grayscale(1) opacity(0.25); }
.rb-paw.on { filter: none; }
.rb-count { margin-left: 6px; font: 12px/1 var(--pixel-font); color: #4a3424; }
.rb-reward { display: flex; align-items: center; gap: 6px; margin: 0; padding: 5px 8px; border-radius: 8px; background: #2e54261a; font-size: 12px; color: #2e5426; }
.rb-reward-ico { flex: none; display: grid; place-items: center; width: 20px; height: 20px; font-size: 15px; }
.rb-reward-ico img { width: 20px; height: 20px; }
.rb-note.ready { animation: rbWiggle 2.4s ease-in-out infinite; box-shadow: 0 0 0 3px #f8d048, 0 8px 18px #0004; }
@keyframes rbWiggle { 0%, 80%, 100% { rotate: var(--tilt); } 85% { rotate: calc(var(--tilt) + 3deg); } 90% { rotate: calc(var(--tilt) - 3deg); } 95% { rotate: calc(var(--tilt) + 1.5deg); } }
.rb-claim {
  position: absolute; right: 10px; top: 8px; padding: 7px 12px; border: 3px solid #c83828; border-radius: 8px; cursor: pointer; rotate: 8deg;
  background: #fff4f0; color: #c83828; font: 13px/1 var(--pixel-font); letter-spacing: 0.08em; box-shadow: 0 2px 0 #c8382855;
}
.rb-claim:hover { background: #ffe0d8; }
.rb-stamp {
  position: absolute; right: 12px; bottom: 10px; padding: 5px 9px; border: 3px solid currentColor; border-radius: 8px; rotate: -10deg;
  font: 13px/1 var(--pixel-font); letter-spacing: 0.06em; color: #3a8a32; background: #fffdf4cc; pointer-events: none;
}
.rb-stamp.slam { animation: rbSlam 0.45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes rbSlam { from { scale: 3; opacity: 0; } 60% { scale: 0.9; opacity: 1; } to { scale: 1; } }
.rb-note.claimed > :not(.rb-stamp):not(.rb-pin) { opacity: 0.5; }
.rb-toast {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px;
  border-radius: 12px; background: linear-gradient(#fffaf0, #f4e8cc); border: 3px solid #e2b648; box-shadow: 0 6px 20px #0007;
  font: 13px/1.3 var(--pixel-font); color: #4a3424; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis;
}
.rb-toast[hidden] { display: none; }
.rb-toast.in { animation: rbToast 0.4s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rbToast { from { translate: -50% 40px; opacity: 0; } }
.ranger-board.calm .rb-note.ready, .ranger-board.calm[open], .ranger-board.calm .rb-toast.in { animation: none; }
@media (prefers-reduced-motion: reduce) { .rb-note.ready, .ranger-board[open], .rb-stamp.slam, .rb-toast.in { animation: none; } }
@media (max-width: 480px) {
  .rb-plaque h2 { font-size: 13px; }
  .rb-note { grid-template-columns: 60px 1fr; }
  .rb-photo { width: 60px; height: 68px; }
  .rb-tab { padding: 8px 9px 11px; }
}
/* the Expeditions tab: a banner for the week, each note's tier on a tag */
.rb-week {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 16px; padding: 10px 14px;
  border-radius: 6px; background: linear-gradient(#f0e0b4, #e4cc98); box-shadow: 0 3px 0 #0002, inset 0 0 0 2px #b88e48; rotate: -0.6deg;
}
.rb-week[hidden] { display: none; }
.rb-week b { font: 13px/1.2 var(--pixel-font); color: #2e5426; letter-spacing: 0.04em; }
.rb-week span { font-size: 12px; color: #6a5440; }
.rb-tier { display: inline-block; margin-bottom: 5px; padding: 3px 7px; border-radius: 4px; font: 12px/1 var(--pixel-font); color: #fff; }
.rb-tier.easy { background: #58a848; }
.rb-tier.medium { background: #d8902a; }
.rb-tier.hard { background: #c83828; }
.rb-tier.bonus { background: #7a3ac0; }
/* a note's photo can be a big emoji (the Trainer's Journal) or a trainer's sprite (a Gym Leader) */
.rb-photo.emoji { background: linear-gradient(#fffaf0, #f0e4c8); }
.rb-emoji { font-size: 34px; line-height: 1; }
.rb-photo.trainer img { background: linear-gradient(#f4e0d0, #e8d0b8); image-rendering: pixelated; }
.rb-photo.shiny img { background: radial-gradient(circle at 50% 45%, #fffbe6, #ffe590 45%, #f0b830); image-rendering: pixelated; }

/* the Trainer's Journal (js/data/journal.js): the same board in a stitched leather frame under a red plaque */
.ranger-board.journal .rb-frame {
  background: radial-gradient(circle at 30% 20%, #8a4a30, #5a2a1a 70%);
  box-shadow: inset 0 0 0 3px #3a1a10, inset 0 0 0 7px #a86040, inset 0 0 0 8px #e8c08a55, 0 18px 50px #000a;
}
.ranger-board.journal .rb-plaque { background: linear-gradient(#d84838, #8a1c14); border-color: #3a1a10; box-shadow: 0 4px 0 #2a0c08, 0 8px 18px #0007; }
.ranger-board.journal .rb-plaque h2 { text-shadow: 0 2px 0 #5a0c08; }
.ranger-board.journal .rb-plaque-ball { border-radius: 3px; border-color: #3a1a10; background: linear-gradient(90deg, #f4e8c8 0 80%, #c84838 80%); }
.ranger-board.journal .rb-badge { background: radial-gradient(circle at 40% 35%, #e05848, #8a1c14); }
.ranger-board.journal .rb-rank-name { color: #8a1c14; }
.ranger-board.journal .rb-rank-bar i { background: linear-gradient(90deg, #c84838, #f0a060); }
.ranger-board.journal .rb-tab { background: linear-gradient(#7a3a24, #5a2a1a); color: #f4e0c8; box-shadow: inset 0 2px 0 #9a5a3a; }
.ranger-board.journal .rb-tab.on { background: linear-gradient(#e8c890, #d4aa6a); color: #3a1a10; }
.ranger-board.journal .rb-stamp { color: #2a5a9a; }

/* the Secret Base's line when a Trainer set case has filled in since you were last home (js/base-3d.js's liveNews()) */
.b3-news {
  position: absolute; left: 50%; top: 64px; translate: -50% 0; z-index: 5; width: max-content; max-width: calc(100% - 32px); box-sizing: border-box;
  margin: 0; padding: 10px 16px; border-radius: 14px; border: 3px solid #e2b648; background: linear-gradient(#fffaf0, #f4e8cc);
  box-shadow: 0 6px 20px #0006; color: #4a3424; font: 13px/1.4 var(--pixel-font); text-align: center; pointer-events: none;
}
.b3-news[hidden] { display: none; }
.b3-news.in { animation: b3NewsIn 0.45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes b3NewsIn { from { translate: -50% -16px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .b3-news.in { animation: none; } }

/* ---------- the Shiny Exchange (js/exchange.js): dark and hi-tech, not the Pokédex's look; its capsules move only by
   transform and opacity, and .calm (calmFx()) stills all of it ---------- */
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+2605-2606;
  src: url(https://fonts.gstatic.com/s/chakrapetch/v13/cIflMapbsEk7TDLdtEz1BwkeQI51R5_F.woff2) format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+2605-2606;
  src: url(https://fonts.gstatic.com/s/chakrapetch/v13/cIflMapbsEk7TDLdtEz1BwkeJI91R5_F.woff2) format("woff2"); }
.shiny-ex {
  --cy: #5ff0ff; --cy2: #b8f9ff; --gold: #ffd36b; --ink0: #0b1020; --ink1: #121a2e; --edge: #2a3a5c; --dim: #a9b3c2;
  --tech: "Chakra Petch", var(--font);
  width: min(430px, 100vw - 16px); max-width: none; height: min(880px, 100dvh - 16px); max-height: none; padding: 0;
  border: 1px solid #2a3a5c; border-radius: 20px; background: var(--ink0); color: #e9edf3; overflow: hidden;
  font-family: var(--font); box-shadow: 0 0 0 1px #5ff0ff22, 0 24px 60px #000c;
}
.shiny-ex::backdrop { background: radial-gradient(circle at 50% 40%, #0b183099, #02040ae8); }
.shiny-ex[open] { animation: sxIn 0.3s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes sxIn { from { transform: translateY(20px) scale(0.95); opacity: 0; } }
.sx-frame { position: relative; display: flex; flex-direction: column; height: 100%;
  background: radial-gradient(circle at 85% -10%, #5ff0ff29, transparent 55%), var(--ink0); }
.sx-top { flex: none; display: flex; align-items: center; gap: 10px; height: 68px; padding: 0 14px; border-bottom: 1px solid var(--edge); }
.sx-key { width: 44px; height: 44px; flex: none; border-radius: 12px; border: 1px solid var(--edge); background: var(--ink1); color: var(--cy);
  font: 700 22px/1 var(--tech); cursor: pointer; }
.sx-close { color: var(--dim); font-size: 18px; }
.sx-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sx-title h2 { margin: 0; font: 700 20px/1.1 var(--tech); letter-spacing: 0.1em; color: var(--cy2); text-shadow: 0 0 10px #5ff0ff66; }
.sx-sub { font-size: 12px; color: var(--dim); }
.sx-coins { flex: none; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--ink1); border: 1px solid #5a4a20; }
.sx-coins b { font: 700 15px var(--tech); color: var(--gold); }
.sx-coin { width: 16px; height: 16px; }
.sx-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 28px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.sx-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--ink1); border: 1px solid var(--edge); }
.sx-card p { margin: 0; font-size: 13px; line-height: 1.45; color: #c4cede; }
.sx-card.machine { border-color: var(--cy); box-shadow: 0 0 20px #5ff0ff1f; }
.sx-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sx-label { font: 600 13px var(--tech); letter-spacing: 0.14em; color: var(--dim); }
.sx-big { font: 700 26px var(--tech); color: var(--gold); }
.sx-big small { font-size: 16px; color: var(--dim); }
.sx-bar { display: block; height: 6px; border-radius: 3px; background: #1f2a44; overflow: hidden; }
.sx-bar i { display: block; height: 100%; background: #fff; }
.sx-bar.gold i { background: var(--gold); }
.sx-stars { display: flex; gap: 3px; }
.sx-stars svg { width: 18px; height: 18px; }
.sx-note { margin: 0; font-size: 13px; color: var(--dim); text-align: center; }
.sx-btn { min-height: 48px; border-radius: 12px; border: none; padding: 6px 14px; font: 700 15px var(--tech); letter-spacing: 0.06em; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--ink0); }
.sx-btn small { font: 600 13px var(--tech); letter-spacing: 0; }
.sx-btn.gold { background: var(--gold); color: #2a1e00; }
.sx-btn.cyan { background: var(--cy); }
.sx-btn.line { background: var(--ink1); border: 1px solid var(--cy); color: var(--cy); }
.sx-btn.ghost { background: var(--ink1); border: 1px solid var(--edge); color: #c4cede; font-weight: 600; }
.sx-btn.small { min-height: 44px; font-size: 14px; }
.sx-btn:disabled { background: #1a2232; border: 1px solid var(--edge); color: #5a6a8a; cursor: default; }
.sx-banner { position: relative; flex: none; height: 108px; border-radius: 16px; border: 1px solid var(--ink); padding: 0; overflow: hidden; cursor: pointer; text-align: left;
  color: #fff; background: linear-gradient(90deg, #05070de6 0%, #05070d8c 55%, #05070d1a 100%), repeating-linear-gradient(135deg, #ffffff12 0 10px, transparent 10px 22px), linear-gradient(120deg, var(--ink), var(--deep));
  animation: sxRise 0.3s ease-out both; }
@keyframes sxRise { from { opacity: 0; transform: translateY(10px); } }
.sx-banner-text { position: absolute; left: 16px; top: 14px; display: flex; flex-direction: column; gap: 6px; }
.sx-banner-text b { font: 700 24px var(--tech); letter-spacing: 0.08em; }
.sx-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-pills i { font-style: normal; padding: 3px 8px; border-radius: 6px; background: #ffffff1f; font-size: 12px; }
.sx-pills i.cy { background: #5ff0ff2e; color: var(--cy2); }
.sx-peek { position: absolute; right: 30px; top: 16px; display: flex; }
.sx-peek img { width: 58px; height: 58px; margin-left: -14px; object-fit: contain; }
img.shade, .sx-mon.unknown img { filter: brightness(0); opacity: 0.75; }
.sx-chev { position: absolute; right: 12px; top: 34px; font: 700 24px var(--tech); }
.sx-banner .sx-bar { position: absolute; left: 16px; right: 16px; bottom: 12px; height: 4px; background: #ffffff2e; }
.sx-head-banner { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 76px; padding: 0 16px; border-radius: 16px;
  background: linear-gradient(90deg, #05070de0, #05070d40), repeating-linear-gradient(135deg, #ffffff12 0 10px, transparent 10px 22px), linear-gradient(120deg, var(--ink), var(--deep)); }
.sx-head-banner b { font: 700 24px var(--tech); letter-spacing: 0.08em; }
.sx-head-banner span { font-size: 13px; }
.sx-machine { display: flex; align-items: center; gap: 12px; }
.sx-machine b { font: 700 17px var(--tech); letter-spacing: 0.08em; color: var(--cy2); }
.sx-icon { width: 54px; height: 54px; flex: none; }
.sx-odds { display: flex; align-items: center; gap: 8px; color: var(--gold) !important; }
.gold-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px #ffd36b; }
.gold-dot.off { background: #3a4660; box-shadow: none; }
.sx-pulls { display: flex; gap: 10px; }
.sx-pulls .sx-btn { flex: 1; min-height: 56px; }
.sx-pulls .sx-btn b { font-size: 16px; letter-spacing: 0.1em; }
.sx-starline { font-size: 12px !important; color: var(--dim) !important; }
.sx-starline.on { color: var(--gold) !important; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chip { height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--edge); background: var(--ink1); color: #c4cede; font: 600 14px var(--tech); cursor: pointer; }
.sx-chip.on { background: var(--cy); border-color: var(--cy); color: var(--ink0); }
.sx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sx-mon { position: relative; height: 148px; border-radius: 14px; border: 1px solid var(--edge); background: var(--ink1); padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; color: #e9edf3; cursor: default; }
.sx-mon img { width: 80px; height: 80px; margin-top: 10px; object-fit: contain; }
.sx-mon.owned img { filter: drop-shadow(0 0 8px #ffd36b80); }
.sx-mon b { font: 600 14px var(--tech); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-mon small { font: 700 12px var(--tech); color: var(--gold); letter-spacing: 0.02em; }
.sx-mon.owned small { color: var(--gold); letter-spacing: 0.08em; }
.sx-mon:not(.owned):not(.unknown) small { color: var(--cy); }
.sx-mon.unknown { background: #0e1424; }
.sx-mon.unknown b, .sx-mon.unknown small { color: #8a96aa; }
.sx-mon.take { cursor: pointer; box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px #ffd36b59; }
.sx-mon.take small { color: var(--gold) !important; }
/* a sealed capsule held: the shadow behind smoked glass, its capsule in the corner */
.sx-mon.sealed { border-color: #3a4a6c; background: linear-gradient(180deg, #161e30, #0b1020); }
.sx-mon.sealed small { color: var(--cy2) !important; letter-spacing: 0.08em; }
.sx-seal { position: absolute; right: 4px; top: 4px; width: 30px; height: 30px; }
.sx-seal .sx-cap { width: 100%; height: 100%; }
.sx-big.cy { color: var(--cy2); }
.sx-rare { position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 5px; background: var(--gold); color: #3a2a00; font: 700 12px var(--tech); }
.sx-toast { position: absolute; left: 24px; right: 24px; top: 80px; z-index: 5; margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--gold); color: #2a1e00;
  font: 700 15px var(--tech); text-align: center; box-shadow: 0 10px 30px #0008; }
.sx-toast.in { animation: sxRise 0.25s ease-out; }

/* the capsule: a see-through top, sparkles drifting inside, a pearl base, a chrome band, a rim light */
.sx-cap { display: block; overflow: visible; }
.sx-turn, .sx-mote, .sx-cap-top, .sx-cap-bot, .sx-cap-band, .sx-crack, .sx-cap-glow { transform-box: fill-box; transform-origin: center; }
.sx-cap-glow { opacity: 0.75; }
.sx-cap.live .sx-cap-glow { animation: sxGlow 1.6s ease-in-out infinite; }
@keyframes sxGlow { 50% { opacity: 1; } }
.sx-mote { opacity: 0; }
.sx-cap.live .sx-mote { animation: sxMote 3.6s ease-in-out infinite; }
@keyframes sxMote { 0% { opacity: 0; transform: translateY(10px) scale(.4); } 35% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-16px) scale(.5); } }
/* the slow turn: two buttons, front and back, pass across the band as a sphere turning would show them */
.sx-cap.live .sx-turn { opacity: 0; animation: sxTurn 6s linear infinite; }
.sx-cap.live .sx-turn.b { animation-delay: -3s; }
@keyframes sxTurn {
  0% { opacity: 0; transform: translateX(-46px) scaleX(0.05); } 6% { opacity: 1; }
  12.5% { transform: translateX(-33px) scaleX(0.7); } 25% { transform: translateX(0) scaleX(1); } 37.5% { transform: translateX(33px) scaleX(0.7); }
  44% { opacity: 1; } 50% { opacity: 0; transform: translateX(46px) scaleX(0.05); } 100% { opacity: 0; transform: translateX(46px) scaleX(0.05); } }
.sx-crack { opacity: 0; transform: scaleX(0); }
.sx-tray.cracking .sx-crack { animation: sxCrack 0.42s ease-in forwards; }
@keyframes sxCrack { 0% { opacity: 0; transform: scaleX(0.05); } 60% { opacity: 1; } 100% { opacity: 1; transform: scaleX(1.06) scaleY(1.6); } }
.sx-tray.cracking .sx-cap-wrap { animation: sxJitter 0.1s linear infinite; }
.sx-tray.opening .sx-cap-top { transform-origin: 50% 100%; animation: sxHalfUp 0.45s ease-in forwards; }
.sx-tray.opening .sx-cap-bot { transform-origin: 50% 0%; animation: sxHalfDown 0.45s ease-in forwards; }
.sx-tray.opening .sx-cap-band, .sx-tray.opening .sx-crack, .sx-tray.opening .sx-cap-glow { animation: sxFade 0.2s ease-out forwards; }
.sx-tray.opening .sx-cap-wrap { animation: none; }
@keyframes sxHalfUp { to { opacity: 0; transform: translate(-30px, -80px) rotate(-38deg); } }
@keyframes sxHalfDown { to { opacity: 0; transform: translate(28px, 52px) rotate(24deg); } }
@keyframes sxFade { to { opacity: 0; } }

/* the reveal: the LED screen over the capsule tray */
.sx-reveal { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; background: #05070df7; }
.sx-rv-top { width: 100%; height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; box-sizing: border-box; }
.sx-rv-top b { font: 700 15px var(--tech); letter-spacing: 0.12em; color: var(--cy2); }
.sx-dots { display: flex; gap: 6px; min-height: 14px; }
.sx-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--cy); box-sizing: border-box; }
.sx-dots i.on { background: var(--cy); }
.sx-dots i.gold { background: var(--gold); border-color: var(--gold); }
.sx-screen { --glow: #5ff0ff33; position: relative; flex: none; margin-top: 16px; width: min(340px, 100% - 32px); height: 290px; border-radius: 20px; padding: 12px;
  box-sizing: border-box; background: #1a2030; border: 2px solid #3a4a6c; overflow: hidden; }
.sx-screen.gold { border-color: var(--gold); }
.sx-led { position: relative; height: 100%; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, var(--glow) 0%, #05070d 75%); }
.sx-scan { position: absolute; left: 12px; right: 12px; top: 12px; height: 40px; pointer-events: none;
  background: linear-gradient(180deg, transparent, #5ff0ff24, transparent); animation: sxScan 2.6s linear infinite; }
@keyframes sxScan { from { transform: translateY(-40px); } to { transform: translateY(266px); } }
.sx-dotmask { position: absolute; inset: 12px; border-radius: 10px; pointer-events: none; background-image: radial-gradient(#00000080 1px, transparent 1.4px); background-size: 4px 4px; }
.sx-screen::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.sx-screen.flash::after { animation: sxFlash 0.5s ease-out; }
@keyframes sxFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
.sx-idle { display: flex; flex-direction: column; align-items: center; }
.sx-idle b { font: 700 64px var(--tech); color: #b8f9ff59; }
.sx-idle span { font: 600 14px var(--tech); letter-spacing: 0.16em; color: var(--cy); }
.sx-shadow { display: flex; flex-direction: column; align-items: center; }
.sx-shadow img { width: 168px; height: 168px; object-fit: contain; filter: brightness(0); }
.sx-shadow b { font: 700 20px var(--tech); letter-spacing: 0.2em; color: #fff; animation: sxBeat 0.5s ease-in-out infinite; }
.sx-shadow.shake { animation: sxJitter 0.12s linear infinite; }
.sx-shadow.shake b { color: #3a2400; }
@keyframes sxBeat { 50% { opacity: 0.55; } }
@keyframes sxJitter { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-3px, 1px); } 50% { transform: translate(2px, -2px); } 75% { transform: translate(3px, 2px); } }
.sx-shown { position: relative; display: flex; flex-direction: column; align-items: center; animation: sxPop 0.45s ease-out; }
.sx-shown img { width: 160px; height: 160px; object-fit: contain; filter: drop-shadow(0 0 14px #ffd36b99); }
.sx-shown > b { font: 700 24px var(--tech); letter-spacing: 0.08em; color: #fff; }
.sx-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.sx-tags i { font: 700 12px var(--tech); font-style: normal; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; color: var(--ink0); }
.sx-tags i.gold { background: var(--gold); color: #2a1e00; }
.sx-sparkle { margin-top: 4px; font: 700 16px var(--tech); letter-spacing: 0.12em; color: var(--gold); }
.sx-twinkles svg { position: absolute; width: 24px; height: 24px; opacity: 0; animation: sxTwinkle 1.4s ease-in-out infinite; }
.sx-twinkles svg:nth-child(1) { left: 10px; top: 12px; } .sx-twinkles svg:nth-child(2) { right: 8px; top: 44px; width: 18px; } .sx-twinkles svg:nth-child(3) { right: 24px; top: 128px; }
@keyframes sxTwinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
@keyframes sxPop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
.sx-tray { position: relative; flex: none; margin-top: 16px; width: 220px; height: 168px; border-radius: 18px; background: var(--ink1); border: 2px solid var(--edge);
  box-sizing: border-box; box-shadow: inset 0 0 24px #5ff0ff2e; display: flex; align-items: center; justify-content: center; }
.sx-tray-label { font: 600 13px var(--tech); letter-spacing: 0.12em; color: #5a6a8a; }
.sx-tray-shadow { position: absolute; left: 60px; bottom: 14px; width: 100px; height: 14px; border-radius: 50%; background: #00000080; }
.sx-tray-cap { position: relative; z-index: 1; width: 132px; height: 132px; padding: 0; border: none; background: none; cursor: pointer; }
.sx-tray-cap:disabled { cursor: default; }
.sx-cap-wrap { position: absolute; inset: 0; display: block; }
.sx-cap-wrap .sx-cap { width: 100%; height: 100%; }
.sx-tray:not(.drop):not(.cracking):not(.opening) .sx-cap-wrap { animation: sxBob 2.4s ease-in-out infinite; }
@keyframes sxBob { 50% { transform: translateY(-4px); } }
.sx-tray.drop .sx-tray-cap { animation: sxFall 0.65s ease-out; }
@keyframes sxFall { 0% { transform: translateY(-300px); } 70% { transform: translateY(8px); } 85% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
.sx-cap-wrap.goldcap { opacity: 0; transform: scale(0.85); transition: opacity 0.45s, transform 0.45s cubic-bezier(.2, 1.6, .4, 1); }
.sx-tray.golden .sx-cap-wrap.goldcap { opacity: 1; transform: none; }
.sx-tray.golden .sx-cap-wrap.plain { opacity: 0; transition: opacity 0.45s; }
/* a catch opening its sealed capsule: the smoked glass clears to the area's colour as it lands */
.sx-cap-wrap.clear { opacity: 0; transition: opacity 0.6s; }
.sx-tray.cleared .sx-cap-wrap.clear { opacity: 1; }
.sx-tray.cleared .sx-cap-wrap.plain { opacity: 0; transition: opacity 0.6s; }
.sx-shown.sealed img { filter: brightness(0) drop-shadow(0 0 10px #5ff0ff99); }
.sx-tags i.dark { background: #2a3a5c; color: var(--cy2); }
.sx-sealnote { margin-top: 6px; font: 600 13px var(--tech); color: var(--cy2); text-align: center; }
.sx-got.sealed { border-color: #3a4a6c; }
.sx-got.sealed img { filter: brightness(0) drop-shadow(0 0 6px #5ff0ff80); }
.sx-got.sealed small { color: var(--cy2); }
.sx-ring { position: absolute; inset: 6px; border-radius: 50%; border: 4px solid var(--gold); opacity: 0; pointer-events: none; }
.sx-tray.golden .sx-ring { animation: sxRing 0.6s ease-out; }
@keyframes sxRing { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.sx-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.sx-rays { position: absolute; left: -120px; top: -120px; width: 240px; height: 240px; opacity: 0; }
.sx-fly { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; opacity: 0; }
.sx-tray.opening .sx-rays { animation: sxRays 0.6s ease-out forwards; }
.sx-tray.opening .sx-fly { animation: sxFly 0.7s ease-out forwards; }
@keyframes sxRays { 0% { opacity: 1; transform: scale(.3) rotate(0); } 100% { opacity: 0; transform: scale(1.15) rotate(25deg); } }
@keyframes sxFly { 0% { opacity: 1; transform: translate(0, 0) scale(1.2); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
.sx-rv-foot { margin-top: auto; width: 100%; padding: 0 16px 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }
.sx-rv-foot p { margin: 0; text-align: center; font-size: 13px; color: var(--gold); }
.sx-all { width: 100%; padding: 16px; box-sizing: border-box; overflow-y: auto; }
.sx-all h3 { margin: 0 0 12px; text-align: center; font: 700 22px var(--tech); letter-spacing: 0.08em; color: var(--gold); }
.sx-all-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sx-got { height: 128px; border-radius: 14px; background: var(--ink1); border: 2px solid var(--edge); box-sizing: border-box; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; animation: sxPop 0.4s ease-out both; }
.sx-got.gold { border-color: var(--gold); }
.sx-got img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 0 8px #ffd36b80); }
.sx-got b { font: 600 13px var(--tech); }
.sx-got small { font: 700 12px var(--tech); color: var(--gold); }
.shiny-ex.calm *, .shiny-ex.calm[open] { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .shiny-ex *, .shiny-ex[open] { animation: none !important; transition: none !important; } }

/* The Buddy Projector's picker (js/holo-pick.js): a narrow panel of cyan light, scan-lined, over the Clearing */
.holo-pick {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: rgba(4, 18, 32, 0.45); animation: holoIn 0.22s ease-out;
}
.holo-pick.off { animation: holoOut 0.22s ease-in forwards; }
.holo-pick.calm, .holo-pick.calm.off { animation: none; }
.holo-panel {
  position: relative; width: min(340px, 100%); max-height: min(560px, 86vh); overflow: auto; padding: 14px;
  border: 2px solid #7ff0ff; border-radius: 16px; color: #e8feff; font: 0.75rem var(--pixel-font);
  background: repeating-linear-gradient(rgba(127, 240, 255, 0.07) 0 1px, transparent 1px 3px), linear-gradient(rgba(16, 70, 104, 0.92), rgba(8, 40, 70, 0.94));
  box-shadow: 0 0 0 1px rgba(127, 240, 255, 0.35), 0 0 22px rgba(80, 220, 255, 0.55), inset 0 0 18px rgba(80, 220, 255, 0.25);
}
.holo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.holo-title { font-size: 0.875rem; letter-spacing: 0.06em; text-shadow: 0 0 8px rgba(127, 240, 255, 0.9); }
.holo-now { margin: 0 0 10px; color: #9ff2ff; }
.holo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.holo-mon {
  position: relative; aspect-ratio: 1; padding: 0; min-width: 0; overflow: hidden; cursor: pointer;
  border: 2px solid rgba(127, 240, 255, 0.45); border-radius: 12px; background: rgba(127, 240, 255, 0.08);
}
.holo-mon img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(127, 240, 255, 0.7)); }
.holo-mon.on { border-color: #bff8ff; background: rgba(127, 240, 255, 0.28); box-shadow: 0 0 12px rgba(127, 240, 255, 0.85); }
.holo-mon:active { translate: 0 2px; }
.holo-mon.locked { cursor: default; border-style: dashed; opacity: 0.55; }
.holo-mon.locked img { filter: grayscale(1) brightness(0.8); }
.holo-mon.locked:active { translate: none; }
.holo-hint { margin: 10px 0 0; color: #9ff2ff; line-height: 1.5; }
@keyframes holoIn { from { opacity: 0; transform: scaleY(0.04); } to { opacity: 1; transform: none; } }
@keyframes holoOut { to { opacity: 0; transform: scaleY(0.04); } }

/* Timburr & Co.'s house catalogue (js/house-kiosk.js): a merchant's card in the shops' look (the garden catalogue's
   `.gmerch`: cream, a gold rim, a white keyline), low on the screen so the lot's try-on shows above it; the crew's
   orange from their awning. The hub's bar and card stand down while it's up. Restyled 2026-10-23 (the user: "doesn't
   look that great", a red Pokédex sheet with a list). */
.hub.browsing .hub-bar, .hub.browsing .hub-card { visibility: hidden; }
.hk-sheet {
  --ink: #e8782a; --ink-deep: #a8501a;
  position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 3;
  width: min(560px, calc(100% - 20px)); box-sizing: border-box; padding: 22px 12px 12px;
  display: flex; flex-direction: column; gap: 8px;
  border: 3px solid #e2b648; border-radius: 28px; outline: 2px solid #fff6dc; outline-offset: -9px;
  background: linear-gradient(#fffaf0, #f4e8cc); color: #6a5440; font-family: var(--pixel-font);
  box-shadow: 0 4px 0 #b88a2a, 0 14px 34px #0008;
  translate: -50% calc(100% + 40px); transition: translate 0.35s cubic-bezier(.2, 1.2, .3, 1);
}
.hk-sheet.up { translate: -50% 0; }
/* the crew's name tag, pinned askew over the top edge like the shopkeepers' */
.hk-who {
  position: absolute; left: 18px; top: -16px; padding: 8px 14px 7px; border-radius: 999px;
  background: linear-gradient(#ffb060, var(--ink)); color: #fff; font-size: 12px; letter-spacing: 0.06em;
  text-shadow: 0 1px 0 var(--ink-deep); rotate: -4deg; box-shadow: 0 3px 0 var(--ink-deep);
}
.hk-coins {
  position: absolute; right: 54px; top: -14px; display: flex; align-items: center; gap: 5px; padding: 6px 12px 5px;
  border-radius: 999px; background: #fffaf0; color: #5a3a10; font-size: 12px; box-shadow: inset 0 0 0 2px #e2b648, 0 3px 0 #c8a04a;
}
.hk-coin { width: 16px; height: 16px; flex: none; }
.hk-x {
  position: absolute; right: 10px; top: -16px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: #fffaf0; color: #8a6a48; font: 14px/1 var(--pixel-font); cursor: pointer;
  box-shadow: inset 0 0 0 3px #e2b648, 0 3px 0 #b88a2a; -webkit-tap-highlight-color: transparent;
}
.hk-x:active { translate: 0 2px; box-shadow: inset 0 0 0 3px #e2b648, 0 1px 0 #b88a2a; }
/* Timburr's line: what the picked house is, or what just happened */
.hk-say {
  margin: 0; min-height: 2.9em; padding: 0 2px; font-size: 12px; line-height: 1.45; line-height: 1.45; color: #6a5440; text-align: left;
}
/* the house cards, one row that scrolls sideways, each a still of the house in a spotlit box */
.hk-cards {
  position: relative; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain;
  margin: 0 -6px; padding: 4px 6px 6px; scroll-snap-type: x proximity; scrollbar-width: none;
}
.hk-cards::-webkit-scrollbar { display: none; }
/* the "more" pill: over the row's right edge on a fade, bobbing toward the houses past it, gone at the row's end */
.hk-shelf { position: relative; }
.hk-more {
  position: absolute; top: 0; bottom: 0; right: -6px; width: 92px; padding: 0 4px 0 0; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: flex-end; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(90deg, #f6ecd400, #f6ecd4 62%); transition: opacity 0.25s;
}
.hk-more.gone { opacity: 0; pointer-events: none; }
.hk-more-pill {
  padding: 6px 9px 5px; border-radius: 999px; font: 12px/1 var(--pixel-font); color: #fff; white-space: nowrap;
  background: linear-gradient(#ffb060, var(--ink)); text-shadow: 0 1px 0 var(--ink-deep); box-shadow: 0 3px 0 var(--ink-deep);
  animation: hkNudge 1.4s ease-in-out infinite;
}
.hk-more:active .hk-more-pill { translate: 0 2px; box-shadow: 0 1px 0 var(--ink-deep); }
@keyframes hkNudge { 50% { transform: translateX(4px); } }
.hk-card {
  flex: none; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 5px 6px;
  border: 0; border-radius: 18px; background: #fffaf0; color: #4a3424; font: 12px/1.2 var(--pixel-font);
  box-shadow: 0 3px 0 #d8c8a4; cursor: pointer; scroll-snap-align: center; -webkit-tap-highlight-color: transparent;
  transition: translate 0.15s, box-shadow 0.15s;
}
.hk-card:active { translate: 0 2px; box-shadow: 0 1px 0 #d8c8a4; }
.hk-card.on { translate: 0 -2px; box-shadow: 0 0 0 3px var(--ink), 0 5px 0 var(--ink-deep), 0 6px 14px #e8782a55; }
.hk-box {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 34%, #fffbea 0%, color-mix(in srgb, var(--ink) 22%, #fbf0d8) 50%, color-mix(in srgb, var(--ink) 50%, #2a1e24) 100%);
  box-shadow: inset 0 0 0 2px #e2b648, inset 0 5px 12px #0003;
}
.hk-pic { width: 100%; height: 100%; display: block; }
.hk-tag {
  display: flex; align-items: center; gap: 4px; padding: 3px 8px 2px; border-radius: 999px; font-size: 12px;
  background: #f4e8cc; color: #5a3a10; white-space: nowrap;
}
.hk-tag.home { background: #3a9a5a; color: #fff; }
.hk-tag.own { background: #d4ecd8; color: #24603a; }
.hk-tag.lock { background: #ece4f2; color: #5a4380; }
/* the picked house's name over its paints, the key beside them */
.hk-pick { display: flex; flex-direction: column; gap: 5px; padding: 8px 2px 0; border-top: 2px dashed #e2cfa0; text-align: left; }
.hk-pick-title { display: block; overflow: hidden; white-space: nowrap; font-size: 15px; font-weight: normal; line-height: 1.2; color: #4a3424; }
.hk-pick-row { display: flex; align-items: flex-end; gap: 10px; }
.hk-pick-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hk-go { height: 38px; min-width: 104px; flex: none; }
.hk-paints {
  position: relative; display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain;
  padding: 7px 7px 10px; margin: -7px -7px -10px; scrollbar-width: none;
}
.hk-paints::-webkit-scrollbar { display: none; }
.hk-sw {
  width: 24px; height: 24px; flex: none; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 2px #0002, 0 0 0 2px #fffaf0, 0 2px 0 2px #d8c8a4; -webkit-tap-highlight-color: transparent;
  transition: translate 0.12s, box-shadow 0.12s;
}
.hk-sw.on { translate: 0 -2px; box-shadow: inset 0 0 0 2px #0002, 0 0 0 2px #fffaf0, 0 0 0 5px var(--ink), 0 3px 0 5px var(--ink-deep); }
.hk-paint-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.2; color: #6a5440; }
.hk-card.locked .hk-pic { filter: saturate(0.3) brightness(0.85); }
@media (prefers-reduced-motion: reduce) { .hk-sheet, .hk-card, .hk-sw, .hk-more { transition: none; } .hk-more-pill { animation: none; } }

/* The trainer window (js/look-window.js, the user's design, 2026-10-28): Timburr's catalogue card crossed with Meowth's
   prize screen. Kecleon's at the Trainer Tailor (`.lw-shop`, low on the screen, the shop and your try-on above it), and
   the Trainer Card's (`.lw-card`, in its body). Kecleon's green, its red stripe on the tag. */
.lw-sheet {
  --ink: #3f9a4a; --ink-deep: #23642c;
  position: relative; box-sizing: border-box; padding: 22px 12px 12px; display: flex; flex-direction: column; gap: 8px;
  border: 3px solid #e2b648; border-radius: 28px; outline: 2px solid #fff6dc; outline-offset: -9px;
  background: linear-gradient(#fffaf0, #f4e8cc); color: #6a5440; font-family: var(--pixel-font); text-align: left;
  box-shadow: 0 4px 0 #b88a2a, 0 14px 34px #0008;
}
.lw-shop {
  position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 6; width: min(520px, calc(100% - 20px));
  translate: -50% calc(100% + 40px); transition: translate 0.35s cubic-bezier(.2, 1.2, .3, 1);
}
.lw-shop.up { translate: -50% 0; }
.lw-card { margin: 20px 2px 4px; box-shadow: 0 4px 0 #b88a2a; }
.lw-who { background: linear-gradient(#7ad070, var(--ink)); box-shadow: 0 3px 0 var(--ink-deep), inset 0 -4px 0 #d8404888; }
.lw-say { min-height: 2.9em; }
.lw-stage { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; }
.lw-arrow {
  height: 56px; padding: 0; border: 0; border-radius: 14px; cursor: pointer; font: 18px/1 var(--pixel-font); color: #fff;
  background: linear-gradient(#7ad070, var(--ink)); box-shadow: 0 3px 0 var(--ink-deep); -webkit-tap-highlight-color: transparent;
}
.lw-arrow:active { translate: 0 2px; box-shadow: 0 1px 0 var(--ink-deep); }
/* the spotlit box: a soft beam from above onto a round floor, the trainer walking in place on it */
.lw-box {
  position: relative; display: grid; place-items: end center; height: clamp(120px, 24vh, 176px); border-radius: 18px; overflow: hidden;
  background: radial-gradient(ellipse 60% 18% at 50% 88%, #ffffffcc, #fff0 70%), linear-gradient(#3a2e48, #5a4a6a 60%, #7a6a80);
  box-shadow: inset 0 0 0 2px #e2b648, inset 0 6px 16px #0006;
}
.lw-spot { position: absolute; inset: 0 22% 0; background: linear-gradient(#fff6d055, #fff6d000 92%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); pointer-events: none; }
.lw-big { --s: clamp(112px, 22vh, 160px); position: relative; margin-bottom: 2px; animation: look-walk 0.6s steps(4) infinite; }
.lw-big.locked { filter: grayscale(1) brightness(0.6); opacity: 0.6; }
.lw-calm .lw-big { animation: none; }
.lw-tag { position: absolute; top: 8px; right: 8px; }
.lw-cards { gap: 8px; }
.lw-mini { width: 64px; }
.lw-mini-box { display: grid; place-items: center; }
.lw-mini .look-art { --s: 52px; }
.lw-mini.locked .look-art { filter: grayscale(1) brightness(0.6); opacity: 0.55; }
.lw-mini.on .look-art { animation: look-walk 0.6s steps(4) infinite; }
.lw-calm .lw-mini.on .look-art { animation: none; }
.lw-keys { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 8px; border-top: 2px dashed #e2cfa0; }
.lw-go { height: 38px; min-width: 120px; }
.lw-alone {
  margin-right: auto; padding: 8px 12px 7px; border: 0; border-radius: 999px; cursor: pointer; font: 12px/1 var(--pixel-font);
  background: #fffaf0; color: #6a5440; box-shadow: inset 0 0 0 2px #e2b648, 0 3px 0 #c8a04a;
}
.lw-alone[hidden] { display: none; }
/* From a fitting room (2026-10-28, the user's ask): the camera zooms in on the booth, which is the window; Kecleon's card
   low down holds the line, the price and the key, and ◀ / ▶ stand either side of the screen by the booth */
.lw-sides { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.lw-side {
  position: absolute; top: 38%; width: 52px; height: 76px; font-size: 22px; pointer-events: auto;
  opacity: 0; transition: opacity 0.3s 0.25s; box-shadow: 0 4px 0 var(--ink-deep), 0 8px 18px #0006;
  --ink: #3f9a4a; --ink-deep: #23642c;
}
.lw-side:first-child { left: max(12px, env(safe-area-inset-left)); }
.lw-side:last-child { right: max(12px, env(safe-area-inset-right)); }
.lw-sides.up .lw-side { opacity: 1; }
.lw-in-booth .lw-tag { position: static; }
.lw-count { margin-right: auto; font-size: 12px; color: #8a6a48; white-space: nowrap; }
.lw-in-booth .lw-keys { align-items: center; padding-top: 6px; }
@media (prefers-reduced-motion: reduce) { .lw-shop, .lw-side { transition: none; } .lw-big, .lw-mini.on .look-art { animation: none; } }

/* A friend's front lawn (js/front-lawn.js, houses on): their house over the full screen, a pill with whose place it is,
   Leave, and the merchant's cream card low down with the house's name and Go in. */
.lawn3d { position: fixed; inset: 0; z-index: 40; background: #000; font-family: var(--pixel-font); }
.lawn-view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.lawn-top {
  position: absolute; left: 12px; right: 12px; top: max(12px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px;
}
.lawn-top h2 {
  margin: 0; flex: 1; text-align: center; padding: 9px 14px 8px; border-radius: 999px; font-size: 14px; color: #5a3a10;
  background: #fffaf0; box-shadow: inset 0 0 0 2px #e2b648, 0 3px 0 #c8a04a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lawn-back {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; color: #fff;
  background: linear-gradient(#ff7a6a, #d8443a); box-shadow: 0 3px 0 #8a2a24; cursor: pointer;
}
.lawn-card {
  position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); translate: -50% 0;
  width: min(460px, calc(100% - 24px)); box-sizing: border-box; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px;
  border: 3px solid #e2b648; border-radius: 24px; outline: 2px solid #fff6dc; outline-offset: -9px;
  background: linear-gradient(#fffaf0, #f4e8cc); color: #6a5440; box-shadow: 0 4px 0 #b88a2a, 0 14px 34px #0008;
  transition: opacity 0.3s, translate 0.3s;
}
.lawn-name { font-size: 15px; color: #4a3010; }
.lawn-line { margin: 0; font-size: 12px; line-height: 1.5; }
.lawn-go { align-self: stretch; }
.lawn3d.going .lawn-card, .lawn3d.going .lawn-top { opacity: 0; pointer-events: none; }
.lawn3d.going .lawn-card { translate: -50% 20px; }

/* Smeargle's wallpaper and floor catalogue (js/paper-shop.js): each tile a corner of a room in it, the day's sale in red */
.pcat-themes { margin-top: -4px; }
.pcat-themes .gcat-tab { padding: 6px 10px 5px; }
.gcat-pic.pcat-pic { width: 86%; height: auto; aspect-ratio: 4 / 3; image-rendering: pixelated; border-radius: 6px; box-shadow: 0 0 0 2px #0002; }
.gcat-tile.pcat-sale { box-shadow: 0 0 0 2px #d83a3a, 0 3px 0 #a82828; }
.gcat-tile.pcat-sale .gcat-price { color: #c02a2a; }
.gcat-tile.pcat-picked { box-shadow: 0 0 0 3px #f8c830, 0 3px 0 #d8a20c; }

/* The Trainer Plaza's board full screen (js/plaza-view.js): Polaroids on cork, one lifted into its card, notes below. */
.pv-veil { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: rgba(10, 16, 28, 0.62); animation: pv-in 0.18s ease-out; font-family: "PokeDB Pixel", "Press Start 2P", monospace; }
@keyframes pv-in { from { opacity: 0; } }
.pv-board { position: relative; width: min(100%, 640px); max-height: 100%; display: flex; flex-direction: column;
  border: 14px solid #8a5a2e; border-radius: 10px; box-shadow: inset 0 0 0 3px #5a3418, 0 10px 30px rgba(0,0,0,0.5);
  background: radial-gradient(ellipse at center, #d4a068 0%, #c8935a 55%, #a87442 100%);
  background-image: radial-gradient(#a46a38 1px, transparent 1.5px), radial-gradient(#e6bc84 1px, transparent 1.5px),
    radial-gradient(ellipse at center, #d4a068 0%, #c8935a 55%, #a87442 100%);
  background-size: 9px 9px, 13px 13px, 100% 100%; background-position: 0 0, 4px 6px, 0 0;
  animation: pv-up 0.28s cubic-bezier(.2,1.3,.4,1); }
@keyframes pv-up { from { transform: translateY(30px) scale(0.92); } }
.pv-head { align-self: center; margin: -26px 0 6px; padding: 8px 22px; color: #ffe070; font-size: 18px; letter-spacing: 1px;
  text-shadow: 2px 2px 0 #0a3a46; background: linear-gradient(#3cc0cc, #1e8a9c 55%, #125a6a); border: 4px solid #0a3a46;
  border-radius: 6px; box-shadow: 0 4px 0 rgba(0,0,0,0.25); white-space: nowrap; }
.pv-head::before, .pv-head::after { content: '●'; color: #ffd84a; font-size: 12px; margin: 0 10px; vertical-align: 3px; }
.pv-close { position: absolute; top: -22px; right: -22px; z-index: 3; }
.pv-sub { text-align: center; color: #4a2a10; font-size: 12px; margin: 0 0 4px; }
.pv-wall { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; padding: 14px 12px 10px; }
@media (max-width: 520px) { .pv-wall { grid-template-columns: repeat(2, 1fr); } }
.pv-pol { position: relative; display: block; width: 100%; background: #fbf8f0; padding: 7px 7px 0; border: 0; cursor: pointer; font: inherit;
  box-shadow: 3px 4px 0 rgba(40,20,5,0.35); transform: rotate(var(--r)); transition: transform 0.15s; }
.pv-pol:hover, .pv-pol:focus-visible { transform: rotate(0deg) scale(1.05); z-index: 2; outline: none; }
.pv-pol.lifted { visibility: hidden; }
.pv-photo { position: relative; aspect-ratio: 1 / 0.82; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(circle at 50% 58%, #fff 0%, var(--hi) 45%, var(--lo) 100%); overflow: hidden; }
.pv-photo::after { content: ''; position: absolute; bottom: 8%; left: 30%; right: 30%; height: 8%; border-radius: 50%; background: rgba(0,0,0,0.16); }
.pv-photo img { position: relative; z-index: 1; width: 78%; height: 92%; object-fit: contain; object-position: bottom; image-rendering: pixelated; margin-bottom: 8%; }
.pv-photo img.unseen { filter: brightness(0) opacity(0.75); }
.pv-name { display: block; color: #2a2238; font-size: 12px; padding: 7px 0 9px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-pin { position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 35%, #fff 0, var(--pin) 35%, #5a0a10 100%); box-shadow: 1px 2px 0 rgba(0,0,0,0.3); }
.pv-you { position: absolute; top: 2px; right: 2px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: #ffd84a; border: 2px solid #8a5a00; color: #6a3a00; font-size: 12px; transform: rotate(12deg); }
.pv-notes { display: flex; align-items: flex-start; gap: 10px; padding: 6px 12px 14px; }
.pv-note { position: relative; flex: 1 1 0; min-width: 0; background: #fffbe8; padding: 16px 10px 10px; color: #2a2238; font-size: 12px;
  box-shadow: 3px 4px 0 rgba(40,20,5,0.3); border-top: 10px solid #e8383a; }
.pv-note:nth-child(1) { transform: rotate(-1.5deg); }
.pv-note:nth-child(2) { transform: rotate(1deg); border-top-color: #3a7ae8; }
.pv-note:nth-child(1) { flex: 0 0 auto; }
.pv-note b { display: block; font-size: 14px; margin: 4px 0 2px; white-space: nowrap; }
.pv-note > span:not(.pv-pin) { display: block; }
.pv-note form { display: flex; gap: 6px; margin-top: 6px; }
.pv-note input { flex: 1; min-width: 0; width: 100%; font: inherit; font-size: 16px; padding: 8px 4px; border: 2px solid #2a2238; background: #fff; text-transform: uppercase; }
.pv-btn { font: inherit; font-size: 12px; padding: 6px 10px; border: 2px solid #1c1430; border-radius: 4px; cursor: pointer;
  background: linear-gradient(#ff6a6a, #d8303a); color: #fff; text-shadow: 1px 1px 0 #6a0a10; box-shadow: 0 3px 0 #6a0a10; }
.pv-btn.blue { background: linear-gradient(#6aa8ff, #2a6ad8); text-shadow: 1px 1px 0 #0a2a6a; box-shadow: 0 3px 0 #0a2a6a; }
.pv-btn:disabled { background: #8ac898; text-shadow: none; box-shadow: 0 3px 0 #2e6a3a; cursor: default; }
.pv-said { margin: 6px 0 0; color: #6a3a10; }
.pv-said:empty { display: none; }
.pv-zoom { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; background: rgba(40,20,5,0.45); }
.pv-big { position: relative; width: min(78%, 300px); background: #fbf8f0; padding: 12px 12px 14px; box-shadow: 6px 8px 0 rgba(0,0,0,0.35);
  animation: pv-lift 0.25s cubic-bezier(.2,1.3,.4,1); transform: rotate(-1.5deg); }
@keyframes pv-lift { from { transform: scale(0.5) rotate(-8deg); opacity: 0; } }
.pv-big .pv-name { font-size: 18px; padding: 10px 0 4px; }
.pv-stats { display: flex; justify-content: space-around; color: #4a3a58; font-size: 12px; margin: 4px 0 10px; text-align: center; }
.pv-stats b { display: block; font-size: 14px; color: #2a2238; }
.pv-big .pv-pol { display: block; width: 100%; }
.pv-keys { display: flex; gap: 8px; justify-content: center; }
.pv-empty { grid-column: 1 / -1; justify-self: center; align-self: center; max-width: 340px; text-align: center; }
.pv-empty span { display: block; }
.pv-empty .pv-btn { margin-top: 8px; }