/* ============================================================
menus.css - the title's gem menu, the character select, the
Collection, and the pixel pill buttons they share (2026-09-28, after
the user's references: pixel-art pill buttons, glossy hexagon gems,
Slay the Spire's title, character select and compendium).
============================================================ */
/* ---------- pixel pills ----------
A button in two spans so each can be clipped to stepped pixel corners (3-2-1 pixels of --p):
.pxb-o is the dark outline, .pxb-i the face, with a light band on top, a shade band below
and white glint dashes in its corners, over a solid drop shadow. */
.pxb {
--p: 3px;
--base: #2ea84a; --hi: #62d474; --lo: #1c7a34; --ink: #0e2a16; --glint: #fff;
--steps: polygon(calc(3 * var(--p)) 0, calc(100% - 3 * var(--p)) 0, calc(100% - 3 * var(--p)) var(--p), calc(100% - 2 * var(--p)) var(--p), calc(100% - 2 * var(--p)) calc(2 * var(--p)), calc(100% - var(--p)) calc(2 * var(--p)), calc(100% - var(--p)) calc(3 * var(--p)), 100% calc(3 * var(--p)), 100% calc(100% - 3 * var(--p)), calc(100% - var(--p)) calc(100% - 3 * var(--p)), calc(100% - var(--p)) calc(100% - 2 * var(--p)), calc(100% - 2 * var(--p)) calc(100% - 2 * var(--p)), calc(100% - 2 * var(--p)) calc(100% - var(--p)), calc(100% - 3 * var(--p)) calc(100% - var(--p)), calc(100% - 3 * var(--p)) 100%, calc(3 * var(--p)) 100%, calc(3 * var(--p)) calc(100% - var(--p)), calc(2 * var(--p)) calc(100% - var(--p)), calc(2 * var(--p)) calc(100% - 2 * var(--p)), var(--p) calc(100% - 2 * var(--p)), var(--p) calc(100% - 3 * var(--p)), 0 calc(100% - 3 * var(--p)), 0 calc(3 * var(--p)), var(--p) calc(3 * var(--p)), var(--p) calc(2 * var(--p)), calc(2 * var(--p)) calc(2 * var(--p)), calc(2 * var(--p)) var(--p), calc(3 * var(--p)) var(--p));
display: inline-grid;
padding: 0;
border: 0;
background: none;
cursor: pointer;
filter: drop-shadow(0 var(--p) 0 rgba(20, 10, 30, 0.55));
transition: translate 0.08s ease-out, filter 0.1s;
-webkit-tap-highlight-color: transparent;
}
.pxb-o { display: grid; background: #181018; clip-path: var(--steps); }
.pxb-i {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: var(--p);
padding: calc(4 * var(--p)) calc(8 * var(--p));
background: linear-gradient(var(--hi) 0 calc(2 * var(--p)), var(--base) calc(2 * var(--p)) calc(100% - 2 * var(--p)), var(--lo) calc(100% - 2 * var(--p)));
clip-path: var(--steps);
font: 0.95rem/1 var(--pixel-font); font-synthesis-weight: none;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
color: var(--ink);
}
.pxb-i::before, .pxb-i::after { content: ""; position: absolute; width: calc(3 * var(--p)); height: var(--p); background: var(--glint); opacity: 0.85; }
.pxb-i::before { left: calc(3 * var(--p)); top: calc(2 * var(--p)); box-shadow: calc(4 * var(--p)) 0 0 0 var(--glint); width: calc(2 * var(--p)); }
.pxb-i::after { right: calc(3 * var(--p)); bottom: calc(3 * var(--p)); opacity: 0.6; }
.pxb.white .pxb-i { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.pxb.small { --p: 2px; }
.pxb.small .pxb-i { font-size: 0.75rem; padding: calc(4 * var(--p)) calc(8 * var(--p)) calc(3.5 * var(--p)); }
.pxb.green { --base: #2ea84a; --hi: #62d474; --lo: #1c7a34; --ink: #0e2a16; }
.pxb.blue { --base: #2f7de8; --hi: #6aaaf8; --lo: #1c52b0; }
.pxb.purple { --base: #b43ad8; --hi: #d670f0; --lo: #7a2098; }
.pxb.orange { --base: #f07a1e; --hi: #ffa650; --lo: #b85010; --ink: #3a1a06; }
.pxb.sun { --base: #f8c858; --hi: #ffe498; --lo: #c08a20; --ink: #3a2606; }
.pxb.red { --base: #e8483c; --hi: #ff8070; --lo: #a82420; }
.pxb.grey { --base: #8a8a9c; --hi: #b4b4c4; --lo: #5c5c6c; --ink: #1c1c26; }
@media (hover: hover) { .pxb:not(:disabled):hover { translate: 0 -2px; filter: brightness(1.08) drop-shadow(0 calc(var(--p) + 2px) 0 rgba(20, 10, 30, 0.5)); } }
.pxb:not(:disabled):active { translate: 0 var(--p); filter: drop-shadow(0 0 0 transparent); }
.pxb:focus-visible { outline: none; filter: drop-shadow(0 var(--p) 0 rgba(20, 10, 30, 0.55)) drop-shadow(0 0 2px #f8e070) drop-shadow(0 0 1px #f8e070); }
.pxb:disabled { cursor: default; filter: grayscale(0.85) brightness(0.8) drop-shadow(0 var(--p) 0 rgba(20, 10, 30, 0.4)); }
/* a toggle or tab that's on glows; the tab that's off sits back */
.pxb.on { filter: drop-shadow(0 var(--p) 0 rgba(20, 10, 30, 0.55)) drop-shadow(0 0 4px rgba(248, 224, 112, 0.9)); }
.pxb[role="tab"]:not(.on) { filter: saturate(0.45) brightness(0.8) drop-shadow(0 var(--p) 0 rgba(20, 10, 30, 0.45)); }
/* ---------- the title's gem menu ---------- */
.title-menu { display: none; flex-direction: column; align-items: center; gap: 14px; }
.title-screen.menu { cursor: default; }
.title-screen.menu .press-start { display: none; }
.title-screen.menu .title-menu { display: flex; }
.title-corner {
position: absolute; z-index: 3;
top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
display: grid; grid-template-columns: repeat(5, auto); align-items: start; justify-items: center; gap: 6px;
}
.title-account {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 4px 6px; border: 0; background: none; color: #fff; cursor: pointer;
font: inherit; font-size: 12px; letter-spacing: 0.04em;
}
/* Sound: the speaker opens a pop-out under it, the mute speaker and the volume bar on a soft dark backing, no frame
(.sound-ctl in css/base.css; the user's call, 2026-10-02) */
.title-sound { position: relative; }
.title-sound .sound-pop {
position: absolute; z-index: 4; top: calc(100% + 2px); left: 0;
padding: 4px 10px 4px 4px; border-radius: 12px; background: rgba(10, 8, 34, 0.62);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
animation: soundPop 0.16s ease-out both;
}
.title-sound .sound-pop[hidden] { display: none; }
.title-sound .sound-mute { font-size: 26px; color: #fff; filter: drop-shadow(0 2px 0 rgba(10, 8, 40, 0.55)); }
.title-sound .vol-slider { width: 120px; flex: none; }
.title-sound .vol-tag { filter: drop-shadow(0 1px 0 rgba(10, 8, 40, 0.6)); }
@keyframes soundPop { from { opacity: 0; translate: 0 -4px; } }
/* wider screens: the corner is a column, so it opens to the speaker's right instead of over the ❓ under it */
@media (min-width: 601px) { .title-sound .sound-pop { top: 50%; left: calc(100% + 4px); translate: 0 -50%; animation-name: soundPopSide; } }
@keyframes soundPopSide { from { opacity: 0; translate: -4px -50%; } }
/* Refresh: a smooth (not pixel) arrow under the speaker that spins and glows every few seconds, so players can tell
it's a refresh button (the user's call, 2026-10-03: players didn't know); spinning fast while the newest files come
in (refreshGame() in js/title.js) */
.title-refresh .ta-pc { font-size: 24px; }
.refresh-ico { display: block; width: 1em; height: 1em; fill: #fff; stroke: #1c1440; stroke-width: 0.6; paint-order: stroke; }
.title-refresh .refresh-ico { animation: refreshNudge 2s ease-in-out 1s infinite; }
@keyframes refreshNudge {
0%, 70% { rotate: 0deg; scale: 1; filter: none; }
80% { scale: 1.2; filter: drop-shadow(0 0 4px #ffd070); }
92% { rotate: 360deg; scale: 1.2; filter: drop-shadow(0 0 4px #ffd070); }
100% { rotate: 360deg; scale: 1; filter: none; }
}
.title-refresh:hover .refresh-ico, .title-refresh:focus-visible .refresh-ico { fill: #ffd070; }
.title-refresh.spinning .refresh-ico { animation: taSpin 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .title-refresh .refresh-ico { animation: none; } }
.title-sound .title-account { margin-top: 4px; }
/* a quiet word under the refresh arrow, so players know to tap it now and then for the newest version (the user's ask) */
.ta-update { font-size: 0.8em; opacity: 0.6; }
/* phones: one row along the top, refresh centred on the speaker */
/* wider screens have room beside the logo, so one column */
@media (min-width: 601px) { .title-corner { grid-template-columns: auto; } }
@keyframes taSpin { to { rotate: 360deg; } }
@media (max-width: 600px) { .title-refresh .ta-pc { font-size: 20px; } .title-refresh { margin: 11px 0 0 4px; } }
.ta-pc { position: relative; font-size: 40px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(10, 8, 40, 0.55)); }
.ta-label { text-shadow: 2px 2px 0 #1c1440; }
.title-account:hover .ta-label, .title-account:focus-visible .ta-label, .title-account[aria-expanded="true"] .ta-label { color: #ffd070; }
.title-account:active .ta-pc { translate: 0 2px; }
/* signed in: the PC's power light is on */
.title-account.on .ta-pc::after {
content: ''; position: absolute; right: 18%; top: 50%;
width: 4px; height: 4px; background: #58f048; box-shadow: 0 0 6px #58f048;
animation: taLed 1.6s steps(1) infinite;
}
@keyframes taLed { 50% { opacity: 0.35; } }
@keyframes taBob { to { translate: 0 -3px; } }
@media (prefers-reduced-motion: no-preference) {
.title-account:hover .ta-pc, .title-account:focus-visible .ta-pc { animation: taBob 0.4s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) { .title-account.on .ta-pc::after { animation: none; } }
/* phones: a little smaller (the user's call) */
@media (max-width: 600px) {
.ta-pc { font-size: 32px; }
.title-account { font-size: 12px; padding: 2px 4px; }
.title-corner { gap: 2px; top: max(4px, env(safe-area-inset-top)); left: max(2px, env(safe-area-inset-left)); }
.title-account { padding: 2px; }
}
.title-screen:not(.menu) .title-corner { display: none; }
/* the version tag, on the subtitle's line (2026-10-08, the user's call: the corner sticker bobbing and swelling was too much):
opens the Patch notes (js/patchnotes.js). A slow shine passes over it now and then; until this version's notes are read
it is gold with a soft glow breathing round it. */
.title-big { position: relative; }
.title-logo-wrap { position: relative; display: inline-block; }
.title-sub { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.3em 0.7em; margin-top: 0.45em; font-size: clamp(0.75rem, 3vw, 1.1rem); }
.title-sub small { margin-top: 0; }
.title-version {
position: relative;
white-space: nowrap;
overflow: hidden;
padding: 4px 6px 3px;
border: 2px solid #14275e;
border-radius: var(--round-xs);
background: #fff8e0;
box-shadow: 0 2px 0 #0d1a44;
color: #14275e;
font: 0.75em/1 var(--pixel-font);
font-synthesis-weight: none;
-webkit-text-stroke: 0;
cursor: pointer;
animation: versionIn 0.6s ease-out both 1.3s;
}
.title-version::after {
content: "";
position: absolute;
inset: -2px auto -2px -40%;
width: 25%;
background: rgba(255, 255, 255, 0.5);
skew: -20deg;
pointer-events: none;
animation: versionShine 6s ease-in-out infinite 2.5s;
}
.title-version:not(.seen) {
background: var(--gold);
animation: versionIn 0.6s ease-out both 1.3s, versionGlow 2.4s ease-in-out infinite alternate 1.9s;
}
@keyframes versionGlow { from { box-shadow: 0 2px 0 #0d1a44, 0 0 0 0 rgba(255, 224, 96, 0); } to { box-shadow: 0 2px 0 #0d1a44, 0 0 8px 2px rgba(255, 224, 96, 0.55); } }
@keyframes versionShine { 0%, 82% { left: -40%; } 100% { left: 130%; } }
.title-version:hover, .title-version:focus-visible { background: var(--gold); outline: none; }
.title-version:not(.seen):hover, .title-version:not(.seen):focus-visible { background: #fff8e0; }
.title-version:active { translate: 0 2px; box-shadow: 0 0 0 #0d1a44; }
@keyframes versionIn { from { opacity: 0; translate: 0 4px; } }
@media (prefers-reduced-motion: reduce) { .title-version, .title-version::after { animation: none; } .title-version::after { display: none; } }
.title-screen.menu .title-center { justify-content: flex-start; padding-top: max(64px, 9vh); gap: clamp(18px, 4vh, 40px); }
.title-screen.menu .title-big { font-size: clamp(3rem, 14vw, 6rem); }
.title-big { transition: font-size 0.4s ease; }
/* Every sign is a Poké Ball on its side (the user's call, 2026-10-06: Continue's look for them all), smooth CSS, each in
its own colour (--c0 light, --c1 face, --c2 shade, --ink the label's outline, --g0..3 the glow in its button): the
coloured top with the label, the black seam, a white base, and the ball's round button at the left end holding the
sign's icon in a glow that breathes. A band of light sweeps each one in turn. */
.gem {
--gp: 4px; /* a sign's size step (title.js reads the same breakpoint) */
--c0: #ff8a72; --c1: #e03024; --c2: #b41c14; --ink: #6a1008;
--g0: color-mix(in srgb, var(--c0) 35%, #fff); --g1: var(--c0); --g2: var(--c1); --g3: color-mix(in srgb, var(--c2) 55%, #181010);
position: relative;
flex: none;
padding: 0;
border: 3px solid #181010;
border-radius: 999px;
background:
linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)) right 18px top 5px / calc(100% - var(--gp) * 18) 22% no-repeat,
linear-gradient(var(--c0) 0%, color-mix(in srgb, var(--c0), var(--c1)) 16%, var(--c1) 44%, var(--c2) 60%, #181010 60%, #181010 68%, #fff 68%, #f0f0f4 84%, #c4c4ce 100%);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35);
cursor: pointer;
filter: drop-shadow(0 var(--gp) 0 rgba(20, 10, 30, 0.5));
transition: translate 0.08s ease-out, filter 0.1s;
animation: gemIn 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) backwards calc(var(--i) * 70ms);
-webkit-tap-highlight-color: transparent;
}
.gem-new { --c0: #e088f8; --c1: #b848d8; --c2: #7a2098; --ink: #4a1060; }
.gem-dex { --c0: #fff080; --c1: #e0bc28; --c2: #a88410; --ink: #5a4000; }
.gem-corner { --c0: #ff9870; --c1: #f06038; --c2: #b83018; --ink: #6a1808; }
.gem-trainer { --c0: #80e8d8; --c1: #38b0a0; --c2: #1e7468; --ink: #0c4038; }
.gem-safari { --c0: #98e070; --c1: #58a838; --c2: #2e7020; --ink: #183c10; }
.gem-pillar { --c0: #88c8f8; --c1: #4088c8; --c2: #20508a; --ink: #102c50; }
.gem-modes { --c0: #ff90a8; --c1: #d84868; --c2: #902038; --ink: #50101c; }
.gem-back { --c0: #b0bccf; --c1: #78849a; --c2: #4a5468; --ink: #262c38; }
.gem-continue { --g0: #ffe6a0; --g1: #f4a840; --g2: #c85a1c; --g3: #5a1c0c; } /* your run's ball in a warm amber glow */
.gem.locked { --c0: #c8c8d0; --c1: #9a9aa6; --c2: #6c6c78; --ink: #34343c; --g0: #e8e8ee; --g1: #b8b8c2; --g2: #84848e; --g3: #3a3a42; }
@keyframes gemIn { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { transform: translate3d(0, 0, 0); } }
.gem::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.15) 52%, transparent 56%) 0 0 / 250% 100% no-repeat;
}
/* the button: a black ring, a white ring, a thin black ring, then the glow round the icon */
.gem-icon {
position: absolute;
left: -3px;
top: 50%;
z-index: 1;
display: grid;
place-items: center;
height: calc(100% + 6px);
aspect-ratio: 1;
border-radius: 50%;
translate: 0 -50%;
pointer-events: none;
background:
radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.9) 0 6%, transparent 7%),
radial-gradient(circle closest-side, var(--g0) 0%, var(--g1) 34%, var(--g2) 52%, var(--g3) 60%, #181010 61%, #181010 66%, #fff 67%, #ececf2 80%, #b8b8c4 88%, #181010 89%);
filter: drop-shadow(1px 2px 1px rgba(20, 10, 30, 0.35));
}
.gem-icon > * { position: relative; z-index: 1; }
.gem-icon::before {
content: "";
position: absolute;
inset: 18%;
border-radius: 50%;
background: radial-gradient(circle closest-side, color-mix(in srgb, var(--g0) 95%, transparent), color-mix(in srgb, var(--g1) 50%, transparent) 60%, transparent);
opacity: 0.4;
}
/* a dark outline round the icon itself, so it reads on the glow (Continue's ball has its own) */
.gem-icon > :not(.cball) { filter: drop-shadow(2px 0 0 #2a1408) drop-shadow(-2px 0 0 #2a1408) drop-shadow(0 2px 0 #2a1408) drop-shadow(0 -2px 0 #2a1408); }
.gem-icon img { width: 52px; height: 52px; max-width: none; object-fit: contain; image-rendering: pixelated; margin-top: -6px; }
.gem-emoji { font-size: 26px; line-height: 1; }
.gem-label {
position: relative;
display: grid;
justify-items: center;
gap: 7px;
height: 100%;
align-content: center;
padding: 0 0 calc(var(--gp) * 6) calc(var(--gp) * 15); /* on the coloured top, clear of the button */
font: 1rem/1 var(--pixel-font); font-synthesis-weight: none;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 0 3px 2px rgba(20, 10, 30, 0.35);
}
/* a full Safari Pokédex: a gold ✦ in the Safari Zone gem's corner (safariGem() in js/title.js) */
.gem-badge { position: absolute; top: calc(var(--gp) * 1.5); right: calc(var(--gp) * 2.5); z-index: 2; pointer-events: none; font: 1.1rem/1 var(--pixel-font); color: #ffe060; text-shadow: 2px 0 0 #6a4000, -2px 0 0 #6a4000, 0 2px 0 #6a4000, 0 -2px 0 #6a4000; }
/* the day's Safari try: 1/1 still to play, ∞ once only replays are left (the gem and the prep window's Start);
bare pixel text with the gem's own outline, no chip */
.try-count {
font: 1.2rem/1 var(--pixel-font); letter-spacing: 0.08em; color: #ffe060;
text-shadow: 2px 0 0 #3a1c0c, -2px 0 0 #3a1c0c, 0 2px 0 #3a1c0c, 0 -2px 0 #3a1c0c;
}
.inf-px { /* infGlyph() in js/ui.js: --ip is one of its pixels */
--ip: 3px; flex: none; display: inline-block; width: calc(9 * var(--ip)); height: calc(5 * var(--ip)); vertical-align: middle;
color: #a8d8f8; overflow: visible;
filter: drop-shadow(2px 0 0 #3a1c0c) drop-shadow(-2px 0 0 #3a1c0c) drop-shadow(0 2px 0 #3a1c0c) drop-shadow(0 -2px 0 #3a1c0c);
}
.pxb-i .try-count, .pxb-i .inf-px { margin-left: 4px; }
.gem-safari:has(.gem-tries) .gem-label { padding-right: 40px; } /* centred between the icon and the count */
.gem-tries { position: absolute; top: 30%; right: calc(var(--gp) * 6 + 3px); translate: 0 -50%; z-index: 2; pointer-events: none; }
@media (max-width: 600px) { .gem-tries { right: calc(var(--gp) * 5 + 3px); } .try-count.gem-tries { font-size: 1.05rem; } }
.inf-px.gem-tries { right: calc(var(--gp) * 9); } /* the ∞ sat too near the edge (the user's ask) */
@media (max-width: 600px) { .inf-px.gem-tries { right: calc(var(--gp) * 8); } }
/* beside the Safari gem (safariGem() in js/title.js): on its right the day's leaderboard, a bare trophy,
hung off the gem's edge so the gem stays centred in the stack */
.gem-row { position: relative; flex: none; }
.gem-side {
position: absolute; top: 50%; translate: 0 -50%;
display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
border: 3px solid #2a2a30; border-radius: var(--round-sm); background: radial-gradient(circle, rgba(31, 58, 20, 0.1) 1px, transparent 1.5px) 0 0 / 8px 8px, #a8c884;
box-shadow: 0 0 0 3px var(--shell), 0 0 0 5px var(--shell-rim), 0 6px 0 5px rgba(20, 10, 30, 0.5);
font-size: 22px; line-height: 1;
animation: gemIn 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both calc(var(--i) * 70ms + 120ms);
-webkit-tap-highlight-color: transparent;
}
.gem-board { left: calc(100% + 8px); }
.gem-side:active { translate: 0 calc(-50% + 3px); }
/* idle: the trophy bobs and sways a little, and catches the light every few seconds */
.gem-side { overflow: hidden; }
.gem-side-icon { display: grid; place-items: center; transform-origin: 50% 85%; }
@media (prefers-reduced-motion: no-preference) {
.gem-board .gem-side-icon { animation: trophyBob 2.4s ease-in-out infinite, trophyGlint 4.8s ease-in-out infinite 1.2s; }
}
@keyframes trophyBob { 0%, 100% { translate: 0 1px; rotate: -5deg; } 50% { translate: 0 -2px; rotate: 5deg; } }
@keyframes trophyGlint { 0%, 78%, 100% { filter: none; } 87% { filter: brightness(1.6) drop-shadow(0 0 4px #fff4b0); } }
/* the trophy is just the trophy, no box (the user's call, 2026-10-02) */
.gem-side.gem-board { overflow: visible; border: 0; background: none; box-shadow: none; filter: drop-shadow(0 3px 0 rgba(20, 10, 30, 0.5)); }
@media (max-width: 420px) {
.gem-board { left: calc(100% + 4px); }
.gem-side { width: 36px; height: 36px; font-size: 18px; }
}
/* How to play: a white emote bubble with a red ? hung off New game's right end, its tail on the sign (helpRow() in
js/title.js); it hops twice and rings out every few seconds until first tapped (.calm), then only breathes */
.gem-side.gem-help {
left: calc(100% - 10px); top: 4px; translate: 0 -50%;
width: 38px; height: 34px; overflow: visible; z-index: 2;
border: 3px solid #181010; border-radius: 14px; background: linear-gradient(#fff 60%, #e4e4ee);
box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(20, 10, 30, 0.5);
}
.gem-help::before { /* the tail, pointing down-left at the sign */
content: ''; position: absolute; left: 2px; bottom: -9px; width: 10px; height: 10px;
background: #ececf4; border: solid #181010; border-width: 0 0 3px 3px; transform: skewY(-30deg) rotate(-15deg);
}
.gem-help::after { /* the ring that pulses out */
content: ''; position: absolute; inset: -3px; border-radius: 16px; border: 2px solid #fff4b0; opacity: 0; pointer-events: none;
}
.gem-help .gem-side-icon.smooth-icon { width: 24px; height: 24px; }
.gem-help:active { translate: 0 calc(-50% + 2px); }
@media (prefers-reduced-motion: no-preference) {
.gem-help:not(.calm) { animation: gemIn 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both calc(var(--i) * 70ms + 120ms), helpHop 3.2s ease-out infinite 1.4s; }
.gem-help:not(.calm)::after { animation: helpRing 3.2s ease-out infinite 1.4s; }
.gem-help.calm .gem-side-icon { animation: helpBreathe 3s ease-in-out infinite; }
.calm-fx .gem-help::after { animation: none; }
}
@keyframes helpHop {
0%, 70%, 100% { translate: 0 -50%; }
76% { translate: 0 calc(-50% - 7px); }
82% { translate: 0 -50%; }
87% { translate: 0 calc(-50% - 3px); }
92% { translate: 0 -50%; }
}
@keyframes helpRing { 0%, 70% { opacity: 0; scale: 1; } 74% { opacity: 0.9; } 100% { opacity: 0; scale: 1.45; } }
@keyframes helpBreathe { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@media (max-width: 420px) {
.gem-side.gem-help { left: calc(100% - 14px); width: 34px; height: 30px; border-radius: 12px; }
.gem-help .gem-side-icon.smooth-icon { width: 21px; height: 21px; }
}
.gem-side:focus-visible { outline: 3px solid #f8e070; outline-offset: 2px; }
@media (hover: hover) { .gem-side:hover { filter: brightness(1.08); } }
/* the signpost's pop-up: today's three areas and how much of each page is caught, a little window under the gem */
.gem-areas-pop {
position: absolute; left: 0; top: calc(100% + 10px); z-index: 6; width: min(240px, 80vw); padding: 10px 12px;
border: 3px solid #2a2a30; border-radius: var(--round-sm); background: radial-gradient(circle, rgba(31, 58, 20, 0.1) 1px, transparent 1.5px) 0 0 / 8px 8px, #a8c884; color: #1f3a14;
box-shadow: inset 0 3px 0 rgba(31, 58, 20, 0.14), 0 0 0 5px var(--shell), 0 0 0 8px var(--shell-rim), 3px 5px 0 8px rgba(0, 0, 0, 0.35);
font-family: var(--pixel-font); font-synthesis-weight: none; animation: plateIn 0.2s ease-out;
}
.gem-areas-pop[hidden] { display: none; }
/* today's areas' signpost, planted in the grass at the bottom left (plantSign() in js/title.js): it sways on its post every
few seconds under a bouncing "!", so it reads as something to tap; its pop-up opens over it */
.title-signpost {
position: absolute; z-index: 2; bottom: calc(var(--ground) - 22px);
left: max(12px, calc((100vw - min(300px, 80vw)) / 4 - 40px));
display: grid; place-items: end center; width: 80px; height: 86px; padding: 0;
border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.title-screen:not(.menu) .title-signpost, .title-screen:not(.menu) .title-areas { display: none; }
.signpost-art {
display: grid; place-items: center; font-size: 72px; line-height: 1; transform-origin: 50% 100%;
filter: drop-shadow(0 4px 0 rgba(20, 10, 30, 0.45));
}
.signpost-bang {
position: absolute; top: -4px; right: 2px;
font: 22px/1 var(--pixel-font); color: #ffe040;
text-shadow: 2px 0 0 #5a3000, -2px 0 0 #5a3000, 0 2px 0 #5a3000, 0 -2px 0 #5a3000, 2px 2px 0 #5a3000, -2px -2px 0 #5a3000, 2px -2px 0 #5a3000, -2px 2px 0 #5a3000;
}
.title-signpost[aria-expanded="true"] .signpost-bang { visibility: hidden; }
.title-signpost:hover .signpost-art, .title-signpost:focus-visible .signpost-art, .title-signpost[aria-expanded="true"] .signpost-art {
filter: drop-shadow(0 0 3px #f8e070) drop-shadow(0 4px 0 rgba(20, 10, 30, 0.45));
}
.title-signpost:focus-visible { outline: none; }
.title-signpost:active .signpost-art { translate: 0 2px; }
@media (prefers-reduced-motion: no-preference) {
.signpost-art { animation: signSway 4s ease-in-out infinite; }
.signpost-bang { animation: signBang 1.2s ease-in-out infinite; }
}
/* a little wobble on its post, then still; in steps, like a sprite */
@keyframes signSway {
0%, 70%, 100% { rotate: 0deg; }
74% { rotate: -6deg; } 78% { rotate: 5deg; } 82% { rotate: -3deg; } 86% { rotate: 2deg; } 90% { rotate: 0deg; }
}
@keyframes signBang { 50% { translate: 0 -5px; } }
.title-areas { position: absolute; top: auto; left: max(8px, calc((100vw - min(300px, 80vw)) / 4 - 40px)); bottom: calc(var(--ground) + 70px); z-index: 6; }
@media (max-width: 599px) {
.title-signpost { left: 6px; width: 64px; height: 70px; bottom: calc(var(--ground) - 16px); }
.signpost-art { font-size: 56px; }
.signpost-bang { font-size: 18px; }
.title-areas { left: 8px; bottom: calc(var(--ground) + 56px); }
}
.gem-areas-pop strong { display: block; margin-bottom: 8px; font-size: 0.75rem; font-weight: 400; color: #1f3a14; text-align: center; }
.gem-areas-pop ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gem-areas-pop li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 8px; border: 2px solid var(--c2); border-radius: 6px; background: var(--c1); font-size: 0.85rem; color: #102010; }
.gem-areas-pop li small { font-size: 0.75rem; opacity: 0.8; }
.gem-areas-pop .area-meadow { --c1: #d4ecb0; --c2: #4a8a24; }
.gem-areas-pop .area-forest { --c1: #b8dcb4; --c2: #1e5a24; }
.gem-areas-pop .area-wetland { --c1: #c4e0f8; --c2: #2050a0; }
.gem-areas-pop .area-marsh { --c1: #d4dcc8; --c2: #3e5232; }
.gem-areas-pop .area-peak { --c1: #dde4ee; --c2: #4a5878; }
.gem-areas-pop .area-desert { --c1: #f4e2b0; --c2: #9a6a20; }
.gem.locked .gem-icon img { filter: grayscale(1) brightness(0.9) drop-shadow(2px 0 0 #2a1408) drop-shadow(-2px 0 0 #2a1408) drop-shadow(0 2px 0 #2a1408) drop-shadow(0 -2px 0 #2a1408); }
.gem.locked .gem-label { color: #c8c8d0; }
/* today's starter, sized and centred on its visible pixels by fitMon() in js/title.js */
.gem-icon img.gem-mon { position: absolute; max-width: none; margin: 0; object-fit: fill; }
/* 2x, wider than its 44px slot, so negative margins centre it like the other icons */
.gem-icon img.gem-ball { width: 52px; height: 52px; margin: 0; }
.gem.on { translate: 0 -2px; filter: brightness(1.08) drop-shadow(0 calc(var(--gp) + 2px) 0 rgba(20, 10, 30, 0.5)); }
.gem.on::before {
content: "▶";
position: absolute;
left: -26px;
top: 50%;
translate: 0 -50%;
color: #f8e070;
font: 0.8rem var(--pixel-font);
text-shadow: 2px 2px 0 #181018;
animation: cursorBlink 1s steps(1) infinite;
}
.gem:active { translate: 0 var(--gp); filter: brightness(0.96); }
.gem:focus-visible { outline: none; }
/* Continue's icon: the run's Poké Ball, wobbling like a catch in progress (it used to sit on the old Continue card; the user
wanted it back). A press swings the lid open in a flash of light, and your Pokémon on the ledge flashes white and hops. */
.cball { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.cball-ball { position: relative; width: 36px; height: 36px; transform-origin: 50% 90%; }
.cball-top, .cball-bottom { position: absolute; left: 0; width: 100%; height: 50%; background: center / 100% 100% no-repeat; image-rendering: pixelated; }
.cball-top { top: 0; z-index: 2; background-image: url("data:image/svg+xml,"); transform-origin: 6% 100%; transition: transform 0.28s ease-out; }
.cball-bottom { bottom: 0; background-image: url("data:image/svg+xml,"); }
.cball-light { position: absolute; left: 50%; top: 50%; z-index: 1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 6px #fff, 0 0 30px 12px #f8d048; opacity: 0; }
.cball img { position: absolute; left: 50%; bottom: -4px; width: 60px; height: 60px; max-width: none; margin: 0 0 0 -30px; object-fit: contain; image-rendering: pixelated; scale: 0; }
.gem.opening .cball-top { transform: rotate(-38deg); }
.gem.opening .cball-light { animation: cballLight 0.45s ease-out forwards; }
.gem.out .cball-ball { animation: cballAway 0.2s ease-in forwards; }
.gem.out .cball img { animation: cballOut 0.45s ease-out forwards; }
@keyframes cballAway { to { transform: scale(0.2); opacity: 0; } }
@keyframes cballOut { 0% { scale: 0.2; filter: brightness(0) invert(1); } 60% { scale: 1.12; filter: brightness(0) invert(1); } 100% { scale: 1; filter: none; } }
@keyframes cballLight { 0% { opacity: 0; transform: scale(0.3); } 35% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(3.5); } }
/* A saved run: its nameplate right under the gems (name, biome, HP, like battle's); the Pokémon waits in Continue's ball */
.title-run { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.title-run[hidden] { display: none; }
/* more than one run saved (one of each kind): a key on the LCD's greens beside the sign shows the next */
.title-run-top { display: flex; align-items: center; gap: 8px; }
.title-run-next {
padding: 5px 9px; border: 0; border-radius: 999px; font-family: var(--pixel-font); font-synthesis-weight: none; font-size: 0.75rem;
background: #d6e8b8; color: #1f3a14; box-shadow: inset 0 0 0 2px #1f3a14, 0 3px 0 var(--shell-deep); cursor: pointer;
}
.title-run-next[hidden] { display: none; }
.title-run-next:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #1f3a14, 0 1px 0 var(--shell-deep); }
.title-plate, .title-biome { pointer-events: none; }
/* the biome's own map sign, smaller, with a touch of its place: the Clearing's sways, the Shrine's has mist drifting
across, the Wastes' rim flickers like embers */
.title-biome { font-size: 0.85rem; padding: 6px 16px 7px; overflow: hidden; transform-origin: 50% -20px; }
.title-biome.arrive { animation: signDrop 0.7s ease-out both; }
@media (prefers-reduced-motion: no-preference) {
.title-biome[data-biome="clearing"] { animation: signDrop 0.7s ease-out both, signSway 3.2s ease-in-out 0.7s infinite; }
.title-biome[data-biome="shrine"]::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(100deg, transparent 20%, rgba(240, 255, 230, 0.35) 45%, transparent 70%) -100% 0 / 60% 100% no-repeat;
animation: signMist 4s linear infinite;
}
.title-biome[data-biome="wastes"] { animation: signDrop 0.7s ease-out both, signEmber 1.2s steps(2) infinite; }
}
@keyframes signSway { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
@keyframes signMist { to { background-position: 250% 0; } }
@keyframes signEmber { 50% { box-shadow: inset 0 0 0 2px #ffb040, 0 0 10px 2px rgba(248, 120, 40, 0.55), 4px 4px 0 rgba(0, 0, 0, 0.45); } }
/* the floor you stand on, where the games' nameplate has its level: a little pixel staircase, then F7 like the name */
.title-floor { display: inline-flex; align-items: center; flex: none; }
.title-floor::before {
content: ''; width: 0.75em; height: 0.75em; margin-right: 0.35em; background: currentColor; opacity: 0.55;
clip-path: polygon(0 100%, 0 70%, 30% 70%, 30% 40%, 60% 40%, 60% 10%, 100% 10%, 100% 100%);
}
/* Abandon run is battle's Run, a key drawn on the plate's LCD under its HP: tag (it replaced the Escape Rope, the
user's pick, 2026-10-07), where the plate is empty left of the HP numbers. Its ink is the LCD's; hover (a mouse) or a
tap (.armed, which also opens the bubble over it) lights it, the LCD's inverted selection, and the figure runs */
.title-run-row { position: relative; }
.title-rope { position: absolute; left: 6px; bottom: 2px; width: 40px; height: 30px; opacity: 0; }
.title-screen.menu .title-rope { opacity: 1; animation: plateIn 0.3s ease-out; }
.title-abandon {
width: 40px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer;
color: #1f3a14; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none;
}
.title-abandon svg {
width: 30px; height: 22px; padding: 1px 4px; box-sizing: border-box; pointer-events: none; overflow: visible;
border: 2px solid currentColor; border-radius: 4px; background: rgba(31, 58, 20, 0.08);
}
.title-rope.armed .title-abandon, .title-abandon:focus-visible { color: #c8e0a0; }
.title-rope.armed svg, .title-abandon:focus-visible svg { background: #1f3a14; border-color: #1f3a14; }
@media (hover: hover) { .title-abandon:hover { color: #c8e0a0; } .title-abandon:hover svg { background: #1f3a14; border-color: #1f3a14; } }
.title-abandon:focus-visible { outline: none; }
.title-abandon:active svg { translate: 0 1px; }
@media (prefers-reduced-motion: no-preference) {
.title-rope.armed svg { animation: runAway 0.4s steps(2) infinite; }
@media (hover: hover) { .title-abandon:hover svg { animation: runAway 0.4s steps(2) infinite; } }
}
@keyframes runAway { 50% { padding-left: 6px; padding-right: 2px; } }
/* the ask: a little window over the Run key, left-aligned with the plate so it stays on a phone's screen, its tail pointing
down at it */
.rope-ask {
position: absolute; left: -10px; bottom: calc(100% + 10px); z-index: 5; width: 176px; padding: 8px 9px 9px;
border: 3px solid #2a2a30; border-radius: 6px; background: radial-gradient(circle, rgba(31, 58, 20, 0.1) 1px, transparent 1.5px) 0 0 / 8px 8px, #a8c884; color: #1f3a14;
box-shadow: inset 0 3px 0 rgba(31, 58, 20, 0.14), 0 0 0 4px var(--shell), 0 0 0 6px var(--shell-rim), 3px 4px 0 6px rgba(0, 0, 0, 0.35);
font-family: var(--pixel-font); font-synthesis-weight: none; text-align: center;
animation: plateIn 0.2s ease-out;
}
.rope-ask[hidden] { display: none; }
.rope-ask::after {
content: ''; position: absolute; left: 24px; top: 100%; width: 12px; height: 8px; margin-top: 6px;
background: var(--shell-rim); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.rope-ask p { margin: 0 0 8px; font-size: 0.75rem; line-height: 1.5; }
.rope-ask-btns { display: flex; justify-content: center; gap: 8px; }
/* the yes/no window's keys (.dev-window .dialog-actions): No a shell key, Yes the light LCD key */
.rope-ask .btn {
min-width: 64px; padding: 6px 12px; border: 0; border-radius: 999px; font-size: 0.75rem;
background: #d6e8b8; color: #1f3a14; text-shadow: none; box-shadow: inset 0 0 0 2px #1f3a14, 0 3px 0 var(--shell-deep);
}
.rope-ask .btn:hover:not(:disabled) { background: #e4f0cc; }
.rope-ask .btn.secondary { 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); }
.rope-ask .btn.secondary:hover:not(:disabled) { background: var(--shell); }
.rope-ask .btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--shell-rim), 0 1px 0 var(--shell-deep); }
.title-screen:not(.menu) .title-run { display: none; }
/* the plate is the device's: a green LCD in the shell's ring, like the rope's bubble over it (battle's nameplates stay
cream, the classic look; the user's call, 2026-10-07) */
.title-plate {
width: 210px; opacity: 0;
border: 3px solid #2a2a30; border-radius: 6px;
background: radial-gradient(circle, rgba(31, 58, 20, 0.1) 1px, transparent 1.5px) 0 0 / 8px 8px, #a8c884; color: #1f3a14;
box-shadow: inset 0 3px 0 rgba(31, 58, 20, 0.14), 0 0 0 4px var(--shell), 0 0 0 6px var(--shell-rim), 3px 4px 0 6px rgba(0, 0, 0, 0.35);
}
.title-screen.menu .title-plate { opacity: 1; animation: plateIn 0.3s ease-out; }
.title-plate strong { font-size: 0.8rem; }
.title-place { font-size: 0.75rem; color: var(--win-muted); white-space: nowrap; }
.title-plate .gb-hp { width: 100%; margin: 0; }
.title-plate .gb-hp-track { height: 12px; border-color: #1f3a14; background: #f0f8e0; box-shadow: none; }
.title-plate .gb-hp-tag { font-size: 0.75rem; line-height: 12px; border-color: #1f3a14; background: #1f3a14; color: #c8e0a0; }
.title-plate .gb-hp-num { width: 100%; font-size: 0.75rem; }
@keyframes plateIn { from { opacity: 0; translate: 0 8px; } }
@media (max-height: 700px) { .title-plate { width: 190px; padding: 4px 8px; } }
/* Continue holds your run's ball, a smooth SVG one */
.gem-continue .cball { z-index: 1; }
.gem-continue .cball-ball { width: 30px; height: 30px; }
.gem-continue .cball img { bottom: 2px; } /* the user found it sat a touch low once out */
.gem-continue .cball-top { background-image: url("data:image/svg+xml,"); image-rendering: auto; }
.gem-continue .cball-bottom { background-image: url("data:image/svg+xml,"); image-rendering: auto; }
@media (max-height: 700px) { .gem-continue .cball-ball { width: 22px; height: 22px; } }
@media (prefers-reduced-motion: no-preference) {
.gem::after { animation: contSweep 3.5s ease-in-out infinite calc(0.8s + var(--i, 0) * 0.35s); }
.gem-icon::before { animation: knobGlow 2s ease-in-out infinite calc(var(--i, 0) * -0.4s); }
}
@keyframes contSweep { 0% { background-position-x: 0%; } 35%, 100% { background-position-x: 100%; } }
@keyframes knobGlow { 50% { opacity: 1; transform: scale(1.12); } }
/* New game's Egg stirs now and then, like Continue's ball (the user's ask, 2026-10-03): a little hop and a rock, as if
something inside moved; while it's the one picked it wobbles faster, about to hatch */
.gem-egg { transform-origin: 50% 90%; }
@media (prefers-reduced-motion: no-preference) { .gem-egg { animation: eggStir 1.5s ease-in-out infinite; } }
.gem.on .gem-egg { animation: eggWobble 1.6s ease-in-out infinite; }
/* New game: the Egg hatches (hatch() in js/title.js): it shakes harder and harder, cracks, and bursts in a flash of light */
.gem.hatching .gem-egg { animation: eggShake 0.65s ease-in-out forwards; transform-origin: 50% 90%; }
.gem.cracked .gem-egg { animation: eggShake2 0.2s ease-in-out infinite; }
.gem.cracked .gem-icon::after {
content: ''; position: absolute; left: 50%; top: 45%; width: 26px; height: 6px; margin-left: -13px; pointer-events: none;
background: #2a1408;
clip-path: polygon(0 50%, 20% 0, 40% 60%, 60% 0, 80% 60%, 100% 20%, 100% 55%, 80% 100%, 60% 45%, 40% 100%, 20% 45%, 0 90%);
}
.gem.hatched .gem-egg { animation: eggBurst 0.4s ease-out forwards; }
.gem.hatched .gem-icon::before {
content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
background: #fff; box-shadow: 0 0 12px 6px #fff, 0 0 30px 12px #f8e0ff; animation: cballLight 0.45s ease-out forwards;
}
@keyframes eggShake { 0% { rotate: 0deg; } 20% { rotate: -10deg; } 40% { rotate: 10deg; } 60% { rotate: -16deg; } 80% { rotate: 16deg; } 100% { rotate: 0deg; } }
@keyframes eggShake2 { 0%, 100% { translate: -2px 0; } 50% { translate: 2px 0; } }
@keyframes eggBurst { to { scale: 1.8; opacity: 0; filter: brightness(0) invert(1); } }
@keyframes eggWobble { 0%, 50%, 100% { rotate: 0deg; } 60% { rotate: -12deg; } 70% { rotate: 10deg; } 80% { rotate: -6deg; } 90% { rotate: 3deg; } }
@keyframes eggStir {
0%, 42%, 100% { translate: 0 0; rotate: 0deg; }
55% { translate: 0 -4px; rotate: -6deg; }
68% { translate: 0 0; rotate: 6deg; }
79% { rotate: -4deg; }
90% { rotate: 2deg; }
}
@media (prefers-reduced-motion: no-preference) {
.cball-ball { animation: ballWobble 2.4s ease-in-out infinite; }
.gem.opening:not(.out) .cball-ball { animation: none; }
}
@media (max-height: 700px) { .cball { width: 36px; height: 36px; } .cball-ball { width: 28px; height: 28px; } .cball img { width: 48px; height: 48px; margin: 0 0 0 -24px; } }
/* PRESS START flashes white; the title fades out as it's left and back in when you come home */
.title-screen.flash::after { content: ""; position: absolute; inset: 0; background: #fff; animation: titleFlash2 0.26s steps(2) forwards; pointer-events: none; }
@keyframes titleFlash2 { 50% { opacity: 1; } 100% { opacity: 0; } }
.title-screen:not([hidden]) { animation: titleIn 0.35s ease-out; }
.title-screen.away { animation: titleAway 0.38s ease-in forwards; pointer-events: none; }
@keyframes titleIn { from { opacity: 0; } }
@keyframes titleAway { to { opacity: 0; scale: 1.03; } }
/* short windows: smaller gem pixels (title.js reads --gp's value from the same breakpoint) */
@media (max-height: 700px) {
.gem { --gp: 3px; }
.gem-label { font-size: 0.8rem; gap: 4px; }
.gem-icon img { width: 40px; height: 40px; margin-top: -4px; }
.gem-emoji { font-size: 20px; }
.title-menu { gap: 10px; }
.title-screen.menu .title-big { font-size: clamp(2.6rem, 12vw, 5rem); }
.title-screen.menu .title-big small { font-size: 0.75rem; }
}
/* ---------- the character select (js/select.js): the Pokédex device, like the Sky Pillar's lobby (the user's call,
2026-10-07). The lid, bezel, keys and A / B are the tower's (.tdev-*); the window onto the type's scene is see-through,
its own huge shadow painting the shell round it, so every part after it is positioned to paint over that shadow. On
phones the device fills the screen under the top bar; wider, it's a 500px device with the scene round it too. ---------- */
.select-screen {
position: fixed;
inset: 0;
z-index: 1;
max-width: none;
display: flex;
justify-content: center;
padding: env(safe-area-inset-top) 0 0;
overflow: hidden;
animation: screenIn 0.4s ease-out;
}
/* no top bar here (the user's call, 2026-10-07): the device fills to the top, the coins sit on its LCD and a locked
skin's Game Corner button opens the Pokédex's Game Corner app */
body[data-screen="start-screen"] .topbar { display: none; }
@keyframes screenIn { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { transform: translate3d(0, 0, 0); } }
.seldev {
position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 9px; width: 100%; min-height: 0; overflow: hidden;
padding: 6px 12px max(12px, env(safe-area-inset-bottom)); color: #fff;
}
.seldev > :not(.sel-stage) { position: relative; z-index: 1; }
@media (min-width: 560px) {
.select-screen { align-items: flex-start; }
.seldev { width: 500px; height: min(900px, calc(100% - 20px)); margin-top: 6px; border-radius: 26px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); }
.seldev::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 26px; box-shadow: inset 0 0 0 3px var(--shell-rim); }
}
.seldev .tdev-lid { min-height: 44px; }
.seldev .tdev-lid .pdx-lens { width: 36px; height: 36px; }
.select-screen:not([hidden]) .pdx-light { animation: pdxBlink 0.16s steps(1) 5 both; }
.select-screen:not([hidden]) .pdx-light.yellow { animation-delay: 0.08s; }
.select-screen:not([hidden]) .pdx-light.green { animation-delay: 0.16s; }
.seldev .cdev-lcd { min-width: 0; max-width: 64%; }
/* the window onto the scene: the shell is its shadow */
.sel-stage {
position: relative; flex: 1 1 0; width: 100%; min-height: 120px; border: 3px solid #2a2a30; border-radius: 10px;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 0 0 3px var(--shell-rim), 0 0 0 100vmax var(--shell);
}
.sel-stage img {
position: absolute;
z-index: 1;
left: 50%;
bottom: 6px;
max-width: none;
image-rendering: pixelated;
filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.3));
animation: selIn 0.35s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.sel-stage img.locked { filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.6)); opacity: 0.85; }
.sel-sky { position: absolute; left: 0; top: 0; border-radius: 7px; pointer-events: none; }
.sel-stage::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(200px, 50%); height: 16px; translate: -50% 0; border-radius: 50%; background: rgba(0, 0, 0, 0.3); }
@keyframes selIn { from { opacity: 0; scale: 0.9; } }
/* the info on the green LCD (the tower's .tower-base look); it scrolls inside when the window is squeezed */
.sel-glass { flex: 0 1 auto; }
.sel-info {
flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
padding: 10px 12px 12px; border: 3px solid #2a2a30; border-radius: 6px 6px 6px 22px; background: #b6d68e; color: #1f3a14;
box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.12); text-shadow: none;
}
.sel-info::-webkit-scrollbar { display: none; }
.sel-info { position: relative; }
.sel-coins { position: absolute; top: 10px; right: 12px; display: inline-flex; align-items: center; gap: 5px; font: 0.75rem var(--pixel-font); color: #1f3a14; }
.sel-coins .smooth-icon { width: 14px; height: 14px; }
.sel-name { margin: 0 0 8px; padding-right: 76px; font: 1.05rem/1.1 var(--pixel-font); font-synthesis-weight: none; letter-spacing: 1px; text-transform: uppercase; color: #1f3a14; }
.sel-stats { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 2px dashed rgba(31, 58, 20, 0.35); font: 0.75rem var(--pixel-font); }
.sel-stats .smooth-icon, .sel-ability .smooth-icon { width: 14px; height: 14px; }
.sel-type { padding: 2px 8px 2px 5px; border: 2px solid #1f3a14; color: #fff; background: #777; font-size: 0.75rem; text-shadow: none; }
.sel-type.type-fire { background: #c9431f; }
.sel-type.type-grass { background: #2f8f43; }
.sel-type.type-water { background: #2569c7; }
.sel-type.type-psychic { background: #8a6ad8; }
.sel-type.type-electric { background: #c89a10; }
.sel-type.type-ice { background: #3aa0c8; }
.sel-type.type-fighting { background: #b8442c; }
.sel-type.type-ground { background: #a87c38; }
.sel-type.type-flying { background: #7a70d8; }
.sel-type.type-dark { background: #6a5444; }
.sel-blurb { margin: 0 0 8px; font-size: 0.75rem; line-height: 1.7; }
.sel-ability { margin: 0 0 8px; font-size: 0.75rem; line-height: 1.7; }
.sel-ability b { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-weight: 400; text-transform: uppercase; }
.sel-ability b img { width: 22px; height: 22px; image-rendering: pixelated; }
.sel-extras { display: flex; flex-wrap: wrap; gap: 6px; }
.sel-extras:not(:has(> :not([hidden]))) { display: none; }
.sel-lcdbtn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 4px; border: 2px solid #1f3a14; border-radius: 6px; background: none; color: #1f3a14;
font: 0.75rem var(--pixel-font); text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sel-lcdbtn .smooth-icon { width: 14px; height: 14px; }
.sel-lcdbtn.on, .sel-lcdbtn:active { background: #1f3a14; color: #b6d68e; }
.sel-wins { color: inherit; }
.sel-wins.none { opacity: 0.55; }
.sel-name-star { display: inline-block; margin-left: 0.4em; font-size: 0.8em; vertical-align: 0.1em; }
.sel-name-star .smooth-icon { width: 1em; height: 1em; }
/* the portraits (or the starting deck) on a dark screen */
.sel-tray { flex: none; display: flex; justify-content: center; padding: 6px; border: 3px solid #2a2a30; border-radius: 10px; background: #1c2440;
box-shadow: 0 0 0 3px var(--shell-rim), inset 0 2px 8px rgba(0, 0, 0, 0.5); }
.sel-thumbs { display: flex; gap: 6px; max-width: 100%; padding: 4px 2px 2px; overflow-x: auto; scrollbar-width: none; }
.sel-thumbs::-webkit-scrollbar { display: none; }
.sel-thumb {
position: relative;
flex: none;
width: 52px;
height: 52px;
padding: 0;
overflow: hidden;
border: 3px solid #3a4468;
border-radius: 8px;
background: #283258;
cursor: pointer;
transition: translate 0.1s, border-color 0.1s;
}
.sel-thumb img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.sel-thumb.locked img { filter: brightness(0) opacity(0.65); }
.sel-thumb[aria-checked="true"] { border-color: #b6d68e; background: #3a5a3a; box-shadow: 0 0 10px rgba(182, 214, 142, 0.7); }
@media (hover: hover) { .sel-thumb:hover { border-color: #8a94b8; } }
/* choosing, the portraits sit on a green LCD like the Sky Pillar's Practice grid, one swipeable row, a little bigger
(the user's ask, 2026-10-08); the starting deck keeps the dark screen while preparing */
.select-screen:not(.preparing) .sel-tray { background: #b6d68e; box-shadow: 0 0 0 3px var(--shell-rim), inset 0 2px 0 rgba(0, 0, 0, 0.12); }
.select-screen:not(.preparing) .sel-thumbs { gap: 8px; padding: 5px; }
.select-screen:not(.preparing) .sel-thumb {
width: 62px; height: 62px; padding: 3px; border: 2px solid rgba(31, 58, 20, 0.55); border-radius: 6px; background: rgba(31, 58, 20, 0.06);
-webkit-tap-highlight-color: transparent;
}
.select-screen:not(.preparing) .sel-thumb[aria-checked="true"] { border-color: #1f3a14; background: #1f3a14; box-shadow: 0 0 0 2px #b6d68e, 0 0 0 4px #1f3a14; }
@media (hover: hover) { .select-screen:not(.preparing) .sel-thumb:not([aria-checked="true"]):hover { border-color: #1f3a14; background: rgba(31, 58, 20, 0.16); } }
.select-screen:not(.preparing) .sel-thumb.locked img { filter: brightness(0) opacity(0.45); }
.sel-thumb .smooth-icon { width: 12px; height: 12px; }
.sel-lock { position: absolute; right: 1px; bottom: 1px; font-size: 13px; }
.sel-sparkle { position: absolute; right: 1px; top: 1px; font-size: 12px; opacity: 0.55; }
.sel-sparkle.on { opacity: 1; }
.sel-star { position: absolute; left: 1px; top: 1px; font-size: 13px; }
.sel-thumb-wins {
position: absolute; left: 1px; bottom: 1px; display: flex; align-items: center; gap: 1px;
padding: 1px 3px 1px 1px; border-radius: 4px; background: rgba(14, 12, 30, 0.8);
font: 12px/1 var(--pixel-font); color: #f8d048;
}
.sel-thumb-wins svg, .sel-thumb-wins img { width: 12px; height: 12px; }
/* the hardware: the A key greys out on a locked Pokémon, the tab keys while preparing */
.seldev .tdev-key .cdev-btn:disabled { filter: grayscale(1) brightness(0.8); animation: none; cursor: default; }
.seldev .sel-tabs .mdex-btn:disabled { opacity: 0.45; cursor: default; translate: none; }
.seldev .sel-tabs .mdex-count { top: -6px; right: -2px; }
/* short phones: the words get tighter so the Pokémon keeps room */
@media (max-height: 700px) {
.seldev { gap: 7px; }
.seldev .tdev-lid { min-height: 36px; }
.sel-info { padding: 8px 10px 10px; }
.sel-name { font-size: 0.9rem; margin-bottom: 6px; }
.sel-thumb { width: 44px; height: 44px; }
.select-screen:not(.preparing) .sel-thumb { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) { .select-screen .pdx-light { animation: none; } }
/* ---------- Prepare: after Choose, the same screen holds the run's setup (prepare() in js/select.js) ---------- */
.select-screen.preparing :is(.sel-stats, .sel-blurb, .sel-ability, .sel-extras, .sel-thumbs) { display: none; }
.sel-prep, .sel-deck { animation: prepIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; will-change: transform, opacity; }
.sel-deck { animation-delay: 0.06s; }
.sel-prep[hidden], .sel-deck[hidden] { display: none; }
@keyframes prepIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sel-prep, .sel-deck { animation: none; } }
.prep-evo { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin: 0 0 8px; cursor: help; }
.prep-form { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; font-size: 0.75rem; text-align: center; }
.prep-form b { font-size: 0.75rem; font-weight: 400; }
.prep-form img { width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated; }
.prep-form:first-child img { width: 60px; height: 60px; }
.prep-arrow { margin: 0 2px 30px; font-size: 0.75rem; }
.prep-level { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 2px dashed rgba(31, 58, 20, 0.35); }
.prep-level h4 { margin: 0; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.prep-pick { display: flex; align-items: center; gap: 6px; }
.prep-pick b { min-width: 2ch; padding: 2px 6px; border-radius: 4px; background: #1f3a14; color: #b6d68e; font-size: 1.05rem; font-weight: 400; text-align: center; }
.prep-step { width: 32px; height: 32px; padding: 0; border: 0; background: none; color: #1f3a14; font: 0.9rem var(--pixel-font); cursor: pointer; }
.prep-step:disabled { color: rgba(31, 58, 20, 0.25); cursor: default; }
.prep-lname { margin: 6px 0 4px; font-size: 0.75rem; text-transform: uppercase; }
.prep-rule { margin: 0 0 8px; font-size: 0.75rem; line-height: 1.7; }
.prep-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 10px; font-size: 0.75rem; }
.prep-coins { padding: 3px 7px; border-radius: 4px; background: #1f3a14; color: #b6d68e; }
.prep-coins .smooth-icon { width: 12px; height: 12px; }
.prep-coins[hidden] { display: none; }
/* The Champion's Crown a Level 10 win earns, shown from Level 5 up until it's yours (js/ui.js's crownArt()). */
.prep-crown { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem;
line-height: 1.5; color: #f8d048; background: #1f3a14; }
.prep-crown[hidden] { display: none; }
.prep-crown-art { flex: none; width: 24px; filter: drop-shadow(0 0 3px rgba(255, 220, 120, 0.7)); }
.prep-crown-art svg, .tc-crown-mini svg { display: block; width: 100%; }
/* A Level's Super Saiyan aura, from Level 6 up (js/ui.js's auraArt()): its flames beside the line, in the star's colour. */
.prep-aura { color: #ffe8f0; }
.prep-aura-art { position: relative; flex: none; overflow: hidden; }
.prep-all { margin-left: auto; }
.prep-all summary { cursor: pointer; list-style: none; text-align: right; text-transform: uppercase; }
.prep-all summary::-webkit-details-marker { display: none; }
.prep-all summary::after { content: ' ▸'; }
.prep-all[open] summary::after { content: ' ▾'; }
.prep-all ul { margin: 6px 0 0; padding: 0; list-style: none; line-height: 1.7; text-align: left; }
.prep-all .level-locked { opacity: 0.6; }
/* the starting deck, fanned like a hand, copies stacked (×3); every card can be tapped to read */
.sel-deck { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; }
.prep-deckhead { margin: 0; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: #b6d68e; }
.prep-fan { --cw: min(84px, calc((min(100vw, 500px) - 60px) / var(--n) * 1.04)); display: flex; justify-content: center; padding: 4px 0 14px; }
.prep-fan .in-deck { top: auto; bottom: -10px; right: 50%; translate: 50% 0; z-index: 3; } /* under the card: a badge in the corner hid under its neighbour */
.prep-fan .card {
flex: none; width: var(--cw); margin: 0 calc(var(--cw) * -0.06);
rotate: calc(var(--t) * 3deg); translate: 0 calc(var(--t) * var(--t) * 2px);
transform-origin: 50% 110%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45); cursor: zoom-in;
}
@media (hover: hover) { .prep-fan .card:hover { translate: 0 -8px; rotate: 0deg; z-index: 2; } }
@media (max-height: 700px) {
.prep-form img { width: 40px; height: 40px; }
.prep-form:first-child img { width: 46px; height: 46px; }
.prep-arrow { margin-bottom: 26px; }
.prep-fan { --cw: min(72px, calc((min(100vw, 500px) - 60px) / var(--n) * 1.04)); padding-bottom: 10px; }
}
/* ---------- the Collection: a red handheld device (js/device.js), its home screen a grid of apps (js/collection.js) ---------- */
.collection-screen { position: fixed; inset: 0; z-index: 30; max-width: none; padding: 0; display: grid; place-items: center; }
.collection-screen[hidden] { display: none; }
.cdev {
position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%;
padding: max(6px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
background: linear-gradient(180deg, var(--shell-hi), var(--shell) 40%, var(--shell-lo));
box-shadow: inset 0 0 0 3px var(--shell-rim), inset 6px 0 0 rgba(255, 255, 255, 0.08);
font-family: var(--pixel-font); font-synthesis-weight: none;
}
@media (min-width: 560px) {
.cdev { width: 500px; height: min(900px, calc(100dvh - 32px)); padding: 10px 14px 12px; border-radius: 26px;
box-shadow: inset 0 0 0 3px var(--shell-rim), inset 6px 0 0 rgba(255, 255, 255, 0.08), 0 18px 50px rgba(10, 20, 60, 0.45); }
}
.cdev-lid { flex: none; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 2px; }
.cdev-lid .pdx-lens { width: 38px; height: 38px; }
.cdev-lcd {
margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px;
min-width: 128px; max-width: 60%; padding: 5px 10px; border: 3px solid var(--shell-rim); border-radius: 8px;
background: #b6d68e; color: #1f3a14; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.12);
}
.cdev-lcd b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; font-weight: 400; letter-spacing: 1px; }
.cdev-lcd small { font-size: 0.75rem; opacity: 0.75; white-space: nowrap; }
.cdev-lcd small:empty { display: none; }
.cdev.powered .pdx-light { animation: pdxBlink 0.16s steps(1) 5 both; }
.cdev.powered .pdx-light.yellow { animation-delay: 0.08s; }
.cdev.powered .pdx-light.green { animation-delay: 0.16s; }
.cdev.powered .pdx-lens { animation: pdxLens 0.9s ease-out both; }
/* the screen's light-grey bezel, its corner cut like the anime Pokédex's */
.cdev-glass {
flex: 1; min-height: 0; display: flex; padding: 8px; border-radius: 12px 12px 12px 30px;
background: #e4e4ea; box-shadow: inset 0 0 0 3px var(--shell-rim), inset 0 -4px 0 rgba(0, 0, 0, 0.14);
}
.cdev-screen {
position: relative; flex: 1; min-width: 0; overflow: hidden; border: 3px solid #2a2a30; border-radius: 6px 6px 6px 22px;
background:
radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.5px) 0 0 / 10px 10px,
linear-gradient(180deg, #24508a, #10234a);
color: #fff;
}
.cdev-screen.power-on { animation: pdxPowerOn 0.5s steps(8) both; }
.cdev-home { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding: 14px 10px 18px; }
.cdev-home[hidden] { display: none; }
.cdev-app { position: absolute; inset: 0; z-index: 1; overflow: auto; overscroll-behavior: contain; color: var(--win-ink); }
.cdev-win { border: 0; border-radius: 0; box-shadow: none; padding: 14px 12px 20px; background: var(--win-bg); backdrop-filter: none; }
.cdev-win.trainer-dialog { width: auto; padding: 12px; background: repeating-linear-gradient(135deg, var(--tc1) 0 8px, var(--tc2) 8px 10px); }
.cdev-win > :is(.records-label, .records-sub):first-child { margin-top: 0; }
/* the Moves app (movesApp() in js/cardindex.js): the Pokédex's green LCD, type keys, the filter and sort, then the
cards themselves (the user missed seeing them, 2026-10-06); a tap zooms one */
.cdev-win.cdev-moves {
padding: 0 10px 20px; color: #1f3a14;
background: radial-gradient(circle, rgba(31, 58, 20, 0.1) 1px, transparent 1.5px) 0 0 / 8px 8px, #a8c884;
}
.mv-top {
position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 8px;
margin: 0 -10px 4px; padding: 10px 8px 9px; background: #c4dca0; border-bottom: 3px solid var(--shell-rim);
box-shadow: 0 3px 0 rgba(31, 58, 20, 0.18);
}
/* the tabs scroll sideways, every one the same size; the arrows and fades say there's more (2026-10-28) */
.mv-strip { position: relative; margin: -6px -8px -5px; }
.mv-tabs {
display: flex; gap: 6px; padding: 6px 8px 5px; overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x proximity; scroll-padding-inline: 28px; scrollbar-width: none;
}
.mv-tabs::-webkit-scrollbar { display: none; }
.mv-more {
position: absolute; top: 0; bottom: 0; z-index: 3; width: 34px; padding: 0; border: 0; cursor: pointer;
opacity: 0; visibility: hidden; transition: opacity 0.18s, visibility 0.18s;
}
.mv-more.left { left: 0; background: linear-gradient(90deg, #c4dca0 40%, rgba(196, 220, 160, 0)); }
.mv-more.right { right: 0; background: linear-gradient(270deg, #c4dca0 40%, rgba(196, 220, 160, 0)); }
.mv-strip.more-left .mv-more.left, .mv-strip.more-right .mv-more.right { opacity: 1; visibility: visible; }
.mv-more::before {
content: ''; position: absolute; top: 50%; width: 12px; height: 18px; margin-top: -11px; background: #1f3a14;
clip-path: polygon(0 0, 100% 50%, 0 100%); animation: mvNudge 0.9s ease-in-out infinite alternate;
}
.mv-more.right::before { right: 6px; }
.mv-more.left::before { left: 6px; clip-path: polygon(100% 0, 0 50%, 100% 100%); animation-direction: alternate-reverse; }
@keyframes mvNudge { from { translate: -2px 0; } to { translate: 2px 0; } }
.mv-tab {
--c1: #9aa2c8; --c2: #565d84;
flex: 0 0 58px; display: grid; place-items: center; height: 54px; padding: 0;
scroll-snap-align: start;
border: 3px solid var(--shell-rim); border-radius: 9px; background: #e4f0cc; color: #1f3a14; cursor: pointer;
font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none; box-shadow: 0 3px 0 var(--shell-rim);
}
.mv-tab .smooth-icon, .mv-tab .type-badge { width: 32px; height: 32px; flex: none; }
:is(.mv-tab, .mv-plate).type-fire { --c1: #ff8f4d; --c2: #b8321a; }
:is(.mv-tab, .mv-plate).type-grass { --c1: #72dc70; --c2: #257a38; }
:is(.mv-tab, .mv-plate).type-water { --c1: #5cbcff; --c2: #1d58b8; }
:is(.mv-tab, .mv-plate).type-psychic { --c1: #d49aff; --c2: #7138a8; }
:is(.mv-tab, .mv-plate).type-electric { --c1: #ffe066; --c2: #b88a00; }
:is(.mv-tab, .mv-plate).type-ice { --c1: #a8ecff; --c2: #2a8cb8; }
:is(.mv-tab, .mv-plate).type-fighting { --c1: #f49a70; --c2: #a03420; }
:is(.mv-tab, .mv-plate).type-ground { --c1: #e8c878; --c2: #8a6430; }
:is(.mv-tab, .mv-plate).type-flying { --c1: #c8c0ff; --c2: #5a50b0; }
:is(.mv-tab, .mv-plate).type-dark { --c1: #a8907c; --c2: #3e2e26; }
.mv-tab[aria-selected="true"] { background: var(--c1); color: #fff; text-shadow: 1px 1px 0 var(--c2); translate: 0 2px; box-shadow: 0 1px 0 var(--shell-rim), inset 0 0 0 2px rgba(255, 255, 255, 0.4); }
.mv-tab[aria-selected="true"] :is(.smooth-icon, .type-badge) { filter: drop-shadow(0 1px 1px rgba(20, 10, 30, 0.45)); }
.mv-tab:not([aria-selected="true"]) :is(.smooth-icon, .type-badge) { filter: grayscale(0.5) opacity(0.75); }
.mv-tools { display: flex; justify-content: space-between; gap: 8px; }
.mv-keys { display: flex; border: 2px solid #1f3a14; border-radius: 6px; overflow: hidden; background: #d6e8b8; }
.mv-key {
padding: 5px 7px 4px; border: 0; border-left: 2px solid #1f3a14; background: none; color: #1f3a14; cursor: pointer;
font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none;
}
.mv-key:first-child { border-left: 0; }
.mv-key[aria-pressed="true"] { background: #1f3a14; color: #c4dca0; }
.mv-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 16px 0 10px; padding-bottom: 4px;
border-bottom: 2px dashed rgba(31, 58, 20, 0.45); font: 0.75rem var(--pixel-font); font-synthesis-weight: none; color: #1f3a14;
}
.mv-list > .mv-head:first-child { margin-top: 8px; }
/* the picked type's nameplate, set into the top of the cards' window (the tabs carry icons only) */
.mv-plate {
--c1: #9aa2c8; --c2: #565d84;
display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 7px 12px 7px 8px;
border: 3px solid var(--shell-rim); border-radius: 10px; background: var(--c1); color: #fff; text-shadow: 1px 1px 0 var(--c2);
box-shadow: 0 3px 0 var(--shell-rim), inset 0 0 0 2px rgba(255, 255, 255, 0.4); font: 0.875rem/1 var(--pixel-font); font-synthesis-weight: none;
}
.mv-plate :is(.smooth-icon, .type-badge) { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 1px 1px rgba(20, 10, 30, 0.45)); }
.mv-plate-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-plate-count { font-size: 0.75rem; }
.mv-plate + .mv-head { margin-top: 14px; }
.mv-count { font-size: 0.85em; }
.mv-note { margin: -4px 0 10px; font-size: 0.75rem; color: #3a4a2a; }
.mv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 9px; padding: 0 3px 0 2px; }
@media (min-width: 560px) { .mv-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mv-empty { margin: 24px 0; text-align: center; font: 0.75rem var(--pixel-font); color: #3a4a2a; }
/* the Pokédex app: its banners and page (js/pokedex.js) move in here, without their window's top bar or the page's lid */
.cdev-dex { overflow: hidden; background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(180deg, #c8ecf8, #9fd6ec); }
.cdev-dex .pdx-list { padding: 10px; }
.cdev-dex .pdx-top { display: none; }
.cdev-dex .pdx-banners { width: 100%; }
.cdev-dex .pdx-stage { padding: 0; }
.cdev-dex .pdx-device { width: 100%; min-height: 100%; border-radius: 0; box-shadow: none; }
.cdev-dex .pdx-lid { display: none; }
.cdev-dex .pdx-controls { padding-bottom: 10px; border-radius: 0; }
/* the Relics and Items apps (js/bagdex.js): the Pokédex's banners and handheld, each thing blown up on a screen in its group's colours */
.bdx-banner-things { right: 14px; bottom: 14px; gap: 6px; align-items: flex-end; }
.bdx-banner-thing { display: grid; place-items: center; width: 54px; height: 54px; font-size: 2.2rem; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.3)); }
.bdx-banner-thing:nth-child(2) { width: 68px; height: 68px; translate: 0 -8px; }
.bdx-banner-thing img, .bdx-thing img, .bdx-slot-thing img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.bdx-banner-thing.unseen img { filter: brightness(0) opacity(0.55); }
.bdx-banner-mon { width: 70px; height: 70px; margin-left: -14px; object-fit: contain; object-position: bottom; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.25)); }
.bdx-banner-things:has(.bdx-banner-mon) { bottom: 0; right: 2px; }
.bdx-screen { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--b1) 70%, #fff) 0, transparent 60%), linear-gradient(150deg, var(--b1), var(--b2)); }
.bdx-screen.boss { background: radial-gradient(circle at 50% 50%, #ff8a6a 0, transparent 60%), linear-gradient(150deg, #c83838, #2a0810); }
.bdx-dots { width: 100%; clip-path: none; opacity: 0.7; }
.bdx-screen .pdx-pad { background: rgba(0, 0, 0, 0.22); box-shadow: none; }
.bdx-thing {
position: absolute; left: 50%; top: 50%; width: 76cqh; height: 76cqh; translate: -50% -50%; z-index: 2;
display: grid; place-items: center; font-size: 56cqh; pointer-events: none; animation: bdxFloat 2.4s ease-in-out infinite;
filter: drop-shadow(0 0 2cqh rgba(255, 250, 210, 0.7)) drop-shadow(0 2cqh 0 rgba(0, 0, 0, 0.3));
}
@keyframes bdxFloat { 50% { transform: translateY(-3cqh); } }
.bdx-glow {
position: absolute; left: 50%; top: 50%; width: 100cqh; height: 100cqh; translate: -50% -50%; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(255, 248, 200, 0.6), rgba(255, 230, 140, 0.18) 42%, transparent 68%); animation: bdxGlow 2.4s ease-in-out infinite;
}
@keyframes bdxGlow { 50% { opacity: 0.6; scale: 0.92; } }
.bdx-screen.unseen .bdx-thing:not(.pdx-ghost) img, .bdx-thing.pdx-ghost.unseen img { filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.7)) opacity(0.8); }
.bdx-screen.unseen .bdx-thing:not(.pdx-ghost), .bdx-screen.unseen .bdx-glow { filter: none; animation: none; }
.bdx-screen.unseen .bdx-glow { opacity: 0.25; }
.bdx-thing.pdx-ghost { animation: none; }
.bdx-rarity.rarity-common { background: #5a6a7a; }
.bdx-rarity.rarity-uncommon { background: #2c64c8; }
.bdx-rarity.rarity-rare { background: #c08a10; }
.bdx-rarity.rarity-boss { background: #b8322a; }
.bdx-rarity.rarity-special { background: linear-gradient(135deg, #a07820, #5a3a10); }
.bdx-terms { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; line-height: 1.35; }
.bdx-term b { font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none; }
.bdx-slots { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.bdx-slot { background: linear-gradient(180deg, #f4f0e0, #cfc6a8); }
.bdx-slot.on { background: #ffe36b; }
.bdx-slot { display: block; padding: 0; overflow: hidden; }
.bdx-slot .pdx-slot-mon { position: absolute; inset: 6%; width: 88%; height: 88%; }
.bdx-slot-thing { position: absolute; inset: 8%; display: grid; place-items: center; font-size: 1.8rem; line-height: 1; }
.bdx-slot.unseen .bdx-slot-thing img { filter: brightness(0) opacity(0.5); }
.bdx-tally { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; font: 0.75rem/1.3 var(--pixel-font); font-synthesis-weight: none; }
.bdx-tally b { font-weight: 400; }
.bdx-tally .dex-bar { grid-column: 1 / -1; margin: 0; }
.bdx-tally.done { background: #f2dc8a; color: #6a4a00; }
@media (prefers-reduced-motion: reduce) { .bdx-thing, .bdx-glow { animation: none; } }
/* the Achievements app (js/records.js) on the same handheld */
.bdx-banner-mon.unseen { filter: brightness(0) opacity(0.55); }
.ach-icon .smooth-icon { width: 100%; height: 100%; }
.bdx-banner-thing.ach-icon, .bdx-slot-thing.ach-icon { padding: 8%; }
.bdx-thing.ach-icon { width: 48cqh; height: 48cqh; }
.bdx-banner-thing.unseen .smooth-icon, .bdx-slot.unseen .smooth-icon, .bdx-screen.unseen .ach-icon:not(.pdx-ghost) .smooth-icon, .ach-icon.pdx-ghost.unseen .smooth-icon { filter: brightness(0) opacity(0.6); }
.ach-lock { display: inline-flex; align-items: center; gap: 4px; }
.ach-lock .smooth-icon { width: 12px; height: 12px; }
.ach-stamp {
position: absolute; right: 8px; bottom: 10px; padding: 5px 8px; rotate: -10deg; pointer-events: none;
font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none; letter-spacing: 0.06em; color: #fff3b0;
background: rgba(120, 80, 0, 0.55); border: 2px solid #ffd84a; border-radius: 6px; box-shadow: 0 0 10px rgba(255, 216, 74, 0.6);
animation: achStamp 0.42s cubic-bezier(0.3, 1.6, 0.5, 1) both 0.15s;
}
@keyframes achStamp { from { scale: 2.2; opacity: 0; } }
.ach-count { color: #8a5a00; }
.ach-progress { background: #efe6c4; }
@media (prefers-reduced-motion: reduce) { .ach-stamp { animation: none; } }
/* the Gym Leaders app (js/gymdex.js) on the same handheld: a leader on the screen, their badge in its corner */
.pdx-mon.gdx-leader { image-rendering: pixelated; }
.gdx-badge { position: absolute; top: 6px; right: 8px; width: 34px; height: 34px; z-index: 3; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35)); }
.bdx-slot.gdx-gold { background: linear-gradient(180deg, #fff2b0, #e0b030); }
.bdx-slot.gdx-gold.on { background: #ffe36b; box-shadow: inset 0 0 0 2px #b07c10; }
.gdx-top { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; background: linear-gradient(150deg, var(--b1, #9aa2c8), var(--b2, #565d84)); box-shadow: inset 0 0 0 3px var(--rim); }
.gdx-top-pic { flex: none; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 8px; background: rgba(0, 0, 0, 0.2); }
.gdx-top-mon { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.gdx-top-plate { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.gdx-top-plate small { font: 0.75rem/1.2 var(--pixel-font); font-synthesis-weight: none; opacity: 0.85; }
.gdx-top-plate b { font: 0.875rem/1.3 var(--pixel-font); font-synthesis-weight: none; font-weight: 400; overflow-wrap: anywhere; }
.gdx-top-badge { width: 40px; height: 40px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35)); }
.gdx-bio, .gdx-quote { margin: 0; font-size: 0.85rem; line-height: 1.45; }
.gdx-quote { font-style: italic; }
.gdx-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gdx-step { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; text-align: center; opacity: 0.6; }
.gdx-step.got { opacity: 1; background: #f2dc8a; color: #6a4a00; }
.gdx-step-pic { display: grid; place-items: center; width: 40px; height: 40px; }
.gdx-step-pic img { width: 100%; height: 100%; object-fit: contain; }
.gdx-step:not(.got) .gdx-step-pic img { filter: grayscale(1) opacity(0.6); }
.gdx-belt { position: relative; width: 36px; height: 10px; border-radius: 3px; background: var(--belt); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(0, 0, 0, 0.2); }
.gdx-belt::after { content: ''; position: absolute; left: 50%; top: -3px; width: 10px; height: 16px; translate: -50% 0; border-radius: 3px; background: var(--knot); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.gdx-step:not(.got) .gdx-belt { filter: grayscale(1) opacity(0.6); }
.gdx-poster { padding: 2px; border: 2px solid #fff; background: linear-gradient(180deg, #fff4dc, #e8d4a8); image-rendering: pixelated; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.gdx-step b { font: 0.75rem/1.25 var(--pixel-font); font-synthesis-weight: none; font-weight: 400; }
.gdx-step small { font-size: 0.75rem; opacity: 0.8; }
/* the Friends app (js/friendsdex.js) on the same handheld: their hearts on an LCD, their three pieces as the track */
.fdx-hearts { display: flex; align-items: center; gap: 8px; font: 0.75rem/1.2 var(--pixel-font); font-synthesis-weight: none; }
.fdx-hearts .hearts i { width: 16px; height: 15px; }
.fdx-hearts .hearts { color: #7a1424; }
.fdx-role { background: #c83a6a; }
.gdx-step-pic.fdx-pic { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fffdf6, #efe2c4); box-shadow: inset 0 0 0 2px rgba(90, 60, 20, 0.18), 0 2px 0 rgba(0, 0, 0, 0.15); }
.fdx-pic canvas { width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2)); }
.fdx-step:not(.got) .fdx-pic canvas { filter: grayscale(0.9) opacity(0.5); }
/* a banner a friend: their hearts for its sub line, no count or bar (the page's tally has them); one friend a page, so no slots or arrows */
.fdx-banner .pdx-banner-count, .fdx-banner .dex-bar { display: none; }
.fdx-banner-hearts i { width: 15px; height: 14px; }
.fdx-banner-hearts svg { stroke: #fff; stroke-width: 1.4; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.45)); }
.fdx-device .bdx-slots, .fdx-device .pdx-controls { display: none; }
/* the Trainers app (js/trainers.js): your code and the add box on LCDs over the banners, a banner a trainer in their card's
colour, their page the handheld with their Trainer Card; one trainer a page, so no slots or arrows */
.trn-top { margin-bottom: 12px; }
.trn-code { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.trn-code small { font-size: 0.75rem; opacity: 0.75; }
.trn-code-text { font: 400 1rem/1.2 var(--pixel-font); font-synthesis-weight: none; letter-spacing: 0.08em; user-select: all; }
.trn-add { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.trn-add strong { grid-column: 1 / -1; font-weight: 400; font-size: 0.75rem; }
.trn-add .trn-input { width: 100%; min-width: 0; letter-spacing: 0.08em; }
.trn-said { grid-column: 1 / -1; margin: 0; font-size: 0.75rem; line-height: 1.5; }
.trn-none { margin-top: 4px; text-align: center; }
.trn-banner .dex-bar { display: none; }
.trn-device:not(.bdx-added):not(.bdx-plaza) .bdx-slots, .trn-device:not(.bdx-added):not(.bdx-plaza) .pdx-controls { display: none; }
.trn-spot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trn-added .pdx-banner-name::after { content: '!'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 8px; border-radius: 50%; background: #ffe36b; color: #8a3a00; font-size: 0.75rem; vertical-align: 2px; box-shadow: 0 2px 0 #8a3a00; }
.trn-addkey.on { opacity: 0.7; }
.trn-role { background: #1f8a9a; }
.trn-badges { display: grid; gap: 8px; font: 0.75rem/1.2 var(--pixel-font); font-synthesis-weight: none; }
.trn-badges b { font-weight: 400; }
.trn-badges-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.trn-badges-head span { opacity: 0.75; }
.trn-badge-row { display: flex; align-items: center; justify-content: space-between; gap: 3px; }
.trn-badge-row img { width: 26px; height: 26px; }
.trn-more { padding: 4px 5px; border: 2px dashed currentColor; border-radius: 6px; white-space: nowrap; }
/* the six numbers: a 3x2 grid of equal boxes, the gaps drawn in the device's red */
/* two rows show and the next peeks in, so it reads as one that scrolls */
.trn-grid { --trn-row: 59px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: var(--trn-row); gap: 2px; max-height: calc(var(--trn-row) * 2 + 18px); padding: 0; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; background: var(--shell-rim); }
.trn-grid::-webkit-scrollbar { display: none; }
.trn-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 9px 4px; background: #b6d68e; font: 0.75rem/1.2 var(--pixel-font); font-synthesis-weight: none; text-align: center; }
.trn-cell small { font-size: 0.75rem; opacity: 0.7; }
.trn-cell b { font-weight: 400; max-width: 100%; }
.trn-fave { width: 30px; height: 30px; object-fit: contain; margin: -6px 0 -4px; }
.trn-pin { position: absolute; top: 6px; right: 8px; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35)); }
.trn-show { display: grid; gap: 8px; padding: 8px; }
.trn-show-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.trn-show-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 6px 4px; border: 2px solid rgba(0, 0, 0, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.18); color: inherit; font: 0.75rem/1.2 var(--pixel-font); font-synthesis-weight: none; text-align: center; }
button.trn-show-tile { cursor: pointer; }
button.trn-show-tile.on { background: rgba(255, 255, 255, 0.4); border-color: currentColor; }
.trn-show-tile small { font-size: 0.75rem; opacity: 0.7; white-space: nowrap; }
.trn-show-tile b { font-weight: 400; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.trn-show-mon { width: 44px; height: 44px; object-fit: contain; }
.trn-show-deck { font: 0.75rem/1.5 var(--pixel-font); font-synthesis-weight: none; }
.trn-show-deck p { margin: 0 0 4px; }
.trn-show-deck ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; margin: 0; padding: 0; list-style: none; max-height: 9em; overflow: hidden auto; }
.trn-keys { display: flex; gap: 8px; }
.trn-keys .lb-btn { flex: 1; }
.trn-keys .lb-btn:disabled { opacity: 0.5; cursor: default; translate: none; }
.trn-remove.sure { background: #c8384a; color: #fff; }
.trn-device img.unseen, .trn-banner img.unseen { filter: brightness(0) opacity(0.55); }
/* the books (js/halloffame.js) on the same handheld: the Record Book a banner per Trainer Level, a run a screen */
.bdx-banner-mon.lost, .bdx-screen.lost .pdx-mon { filter: grayscale(1) brightness(0.85); }
.bdx-screen.opens { cursor: zoom-in; }
.bdx-screen.depths { background: radial-gradient(circle at 50% 45%, #c8a0ff 0, transparent 60%), linear-gradient(150deg, #7a4ac8, #1a0830); }
.rbk-tag.gold { background: linear-gradient(135deg, #e0a820, #8a5a08); color: #fff8d0; }
.rbk-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px 4px; text-align: center; }
.rbk-quick b { display: block; font: 0.75rem/1.3 var(--pixel-font); font-synthesis-weight: none; }
.rbk-quick small { font-size: 0.75rem; opacity: 0.7; }
.bdx-open { font: 0.75rem/1.3 var(--pixel-font); font-synthesis-weight: none; text-align: left; cursor: pointer; background: #f2dc8a; color: #6a4a00; }
.bdx-open:active { translate: 0 2px; }
/* a run's full page, slid over the handheld (shelfApp()'s sheet): the same red handheld, its run on a screen, its
numbers, relics and items on green LCDs, its deck on a dark panel (the user's call, 2026-10-06) */
.cdev-dex .bdx-sheet {
--rim: var(--shell-rim); --lid: var(--shell); --lcd: #b6d68e; --ink: #1f3a14;
z-index: 2; display: block; padding: 0 12px 24px; color: var(--ink);
background: linear-gradient(180deg, var(--shell-hi), var(--shell) 40%, var(--shell-lo)); box-shadow: inset 0 0 0 3px var(--rim);
}
.cdev-fame .bdx-sheet { --rim: #6a4a08; --lid: #c8960c; background: linear-gradient(180deg, #f0c448, #d8a020 40%, #b07c10); }
.bdx-sheet > * + * { margin-top: 10px; }
/* the lid: Back on the left, the three lights on the right */
.bdx-sheet-back {
position: sticky; top: 0; z-index: 1; display: block; width: calc(100% + 24px); margin: 0 -12px 12px; padding: 12px 14px;
border: 0; border-bottom: 3px solid var(--rim); border-radius: 0; cursor: pointer; text-align: left;
font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none; color: #fff; text-shadow: 1px 1px 0 var(--rim); letter-spacing: 1px;
background:
radial-gradient(circle, #6be36b 0 4px, var(--rim) 4.5px 6px, transparent 6.5px) right 14px center / 14px 14px no-repeat,
radial-gradient(circle, #ffe36b 0 4px, var(--rim) 4.5px 6px, transparent 6.5px) right 32px center / 14px 14px no-repeat,
radial-gradient(circle, #ff5a5a 0 4px, var(--rim) 4.5px 6px, transparent 6.5px) right 50px center / 14px 14px no-repeat,
var(--lid);
box-shadow: none; animation: none;
}
.bdx-sheet-back:active { translate: 0 1px; }
/* the run's screen: its Pokémon on a pad, in its type's colours; the plate under it is an LCD */
.bdx-sheet .hof-entry { --b1: #9aa2c8; --b2: #565d84; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0; border: 0; background: none; box-shadow: none; }
.bdx-sheet .hof-entry.type-fire { --b1: #ff8f4d; --b2: #b8321a; }
.bdx-sheet .hof-entry.type-grass { --b1: #72dc70; --b2: #257a38; }
.bdx-sheet .hof-entry.type-water { --b1: #5cbcff; --b2: #1d58b8; }
.bdx-sheet .hof-entry.type-psychic { --b1: #d49aff; --b2: #7138a8; }
.bdx-sheet .hof-entry.type-electric { --b1: #ffe066; --b2: #b88a00; }
.bdx-sheet .hof-entry.type-ice { --b1: #a8ecff; --b2: #2a8cb8; }
.bdx-sheet .hof-entry.type-fighting { --b1: #f49a70; --b2: #a03420; }
.bdx-sheet .hof-entry.type-ground { --b1: #e8c878; --b2: #8a6430; }
.bdx-sheet .hof-entry.type-flying { --b1: #c8c0ff; --b2: #5a50b0; }
.bdx-sheet .hof-entry.type-dark { --b1: #a8907c; --b2: #3e2e26; }
.bdx-sheet .hof-entry-pic {
position: relative; width: auto; height: auto; aspect-ratio: 2 / 1; container-type: size; overflow: hidden;
border: 4px solid #2a2a30; border-radius: 10px; box-shadow: 0 0 0 3px var(--rim), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
background:
radial-gradient(circle, rgba(255, 255, 255, 0.22) 1px, transparent 1.5px) 0 0 / 10px 10px,
radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--b1) 70%, #fff) 0, transparent 60%),
linear-gradient(150deg, var(--b1), var(--b2));
}
.bdx-sheet .hof-entry-pic::before { content: ''; position: absolute; left: 24cqw; bottom: 5cqh; width: 52cqw; height: 17.3cqw; border-radius: 50%; background: rgba(0, 0, 0, 0.22); }
.bdx-sheet .hof-entry-pic img {
position: absolute; left: 20cqw; bottom: calc(5cqh + 7.5cqw); width: 60cqw; height: 68cqh; max-width: none; max-height: none;
object-fit: contain; object-position: bottom; animation: pdxIdle 1.4s ease-in-out infinite;
}
.bdx-sheet .hof-entry.lost .hof-entry-pic { --b1: #a0a0aa; --b2: #3a3a44; }
.bdx-sheet .hof-entry.lost .hof-entry-pic img { opacity: 1; filter: grayscale(1) brightness(0.85); animation: none; }
.bdx-sheet .hof-entry.depths .hof-entry-pic,
.cdev-fame .bdx-sheet .hof-entry-pic {
background:
radial-gradient(circle, #fff 0.7px, transparent 1.3px) 0 0 / 23px 19px,
radial-gradient(circle, rgba(255, 255, 255, 0.6) 0.6px, transparent 1.2px) 11px 7px / 31px 27px,
radial-gradient(ellipse at 50% 38%, #34489a, #18205a 55%, #0a0e2c);
}
.bdx-sheet .hof-entry.depths .hof-entry-pic { background: radial-gradient(circle, rgba(220, 190, 255, 0.8) 0.7px, transparent 1.3px) 0 0 / 23px 19px, radial-gradient(ellipse at 50% 38%, #6a3aa8, #2a1050 55%, #0e0420); }
.cdev-fame .bdx-sheet .hof-entry-pic::before { background: radial-gradient(ellipse at 50% 40%, #fff6c0, #e8b830 60%, #a8740c); box-shadow: 0 2px 0 #6a4a08; }
.bdx-sheet .hof-entry.depths .hof-entry-pic::before { background: radial-gradient(ellipse at 50% 40%, #f4ecff, #b48ae8 60%, #5a3a98); box-shadow: 0 2px 0 #d8b048; }
.bdx-sheet :is(.hof-plate, .hof-stats .stat-tile, .hof-things, .loss-chart) {
border: 3px solid var(--rim); border-radius: 8px; background: var(--lcd); color: var(--ink); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.12);
}
.bdx-sheet .hof-entry .hof-plate { padding: 8px 10px; border: 3px solid var(--rim); background: var(--lcd); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.12); }
.bdx-sheet .hof-name { font-size: 0.8rem; }
.bdx-sheet .hof-no { color: inherit; opacity: 0.75; }
.bdx-sheet :is(.hof-rule, .loss-biome-tag, .records-empty) { color: var(--ink); opacity: 0.8; }
.bdx-sheet .loss-caption { color: #fff; text-shadow: 1px 1px 0 var(--rim); }
.bdx-sheet .loss-blow { color: #8a1010; }
/* section heads: white pixel text on the casing, a dashed rule under it */
.bdx-sheet .records-label {
margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 2px dashed rgba(255, 255, 255, 0.45);
font: 0.75rem/1.2 var(--pixel-font); font-synthesis-weight: none; letter-spacing: 1px; color: #fff; text-shadow: 1px 1px 0 var(--rim);
}
.bdx-sheet .hof-stats .stat-tile { padding: 6px 4px 5px; }
.bdx-sheet .hof-stats .stat-value { font: 0.78rem/1.3 var(--pixel-font); font-synthesis-weight: none; color: var(--ink); }
.bdx-sheet .hof-stats .stat-label { color: var(--ink); opacity: 0.75; }
.bdx-sheet .hof-things { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 8px; gap: 6px; }
.bdx-sheet .hof-thing { min-width: 0; min-height: 40px; box-sizing: border-box; padding-right: 6px; line-height: 1.4; }
.bdx-sheet .hof-thing-icon { flex: none; }
.bdx-sheet .hof-thing-name { min-width: 0; overflow-wrap: anywhere; }
.bdx-sheet .hof-thing { background: rgba(255, 255, 255, 0.35); box-shadow: inset 0 0 0 2px rgba(31, 58, 20, 0.25); color: var(--ink); }
.bdx-sheet .hof-thing.ability { background: #f2dc8a; box-shadow: inset 0 0 0 2px #b08a20; color: #6a4a00; }
/* HP over the run, drawn in the LCD's own ink */
.bdx-sheet .loss-chart { --hp: var(--ink); margin-top: 10px; }
.bdx-sheet .loss-max, .bdx-sheet .loss-biome { stroke: rgba(31, 58, 20, 0.45); }
.bdx-sheet .loss-area { opacity: 0.22; }
/* the final deck on a dark screen, so the cards stand out */
.bdx-sheet .hof-cards {
padding: 10px 8px; border: 4px solid #2a2a30; border-radius: 10px; box-shadow: 0 0 0 3px var(--rim);
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.5px) 0 0 / 10px 10px, linear-gradient(180deg, #24508a, #10234a);
}
@media (prefers-reduced-motion: reduce) { .bdx-sheet .hof-entry-pic img { animation: none; } }
/* the Hall of Fame: one gold handheld, each champion on Gold/Silver's pedestal under a spotlight on a starry night */
.cdev-fame .pdx-device { background: linear-gradient(180deg, #f0c448, #d8a020 40%, #b07c10); box-shadow: inset 0 0 0 3px #6a4a08; }
.cdev-fame .pdx-screen { box-shadow: 0 0 0 3px #6a4a08, inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.cdev-fame .pdx-lcd { border-color: #6a4a08; }
.cdev-fame .pdx-slots { border-color: #6a4a08; background: #8a5a08; }
.cdev-fame .bdx-slot { background: linear-gradient(180deg, #34489a, #18205a); }
.cdev-fame .bdx-slot.on { background: #ffe36b; }
.cdev-fame .pdx-controls { background: #b07c10; border-top-color: #6a4a08; }
.cdev-fame .pdx-round { border-color: #6a4a08; }
.bdx-screen.hofx {
background:
radial-gradient(circle, #fff 0.7px, transparent 1.3px) 0 0 / 23px 19px,
radial-gradient(circle, rgba(255, 255, 255, 0.6) 0.6px, transparent 1.2px) 11px 7px / 31px 27px,
radial-gradient(ellipse at 50% 38%, #34489a, #18205a 55%, #0a0e2c);
}
.bdx-screen.hofx.depths {
background:
radial-gradient(circle, rgba(220, 190, 255, 0.8) 0.7px, transparent 1.3px) 0 0 / 23px 19px,
radial-gradient(ellipse at 50% 38%, #6a3aa8, #2a1050 55%, #0e0420);
}
.hofx .bdx-dots { display: none; }
.hofx-light {
position: absolute; left: 50%; top: 0; bottom: 0; width: 70cqw; translate: -50% 0; pointer-events: none;
clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255, 250, 210, 0.5), rgba(255, 240, 170, 0.1));
animation: hofxLight 3s ease-in-out infinite;
}
@keyframes hofxLight { 50% { opacity: 0.7; } }
.hofx-pedestal {
position: absolute; left: 27cqw; bottom: -2px; width: 46cqw; height: calc(5cqh + 8.65cqw);
background: linear-gradient(90deg, #8a5a08, #f2c040 35%, #fff0a0 50%, #e0a820 65%, #8a5a08);
}
.hofx-pedestal::before {
content: ''; position: absolute; left: 0; right: 0; top: -6cqw; height: 12cqw; border-radius: 50%;
background: radial-gradient(ellipse at 50% 40%, #fff6c0, #e8b830 60%, #a8740c); box-shadow: 0 2px 0 #6a4a08;
}
.depths .hofx-pedestal { background: linear-gradient(90deg, #3e2482, #9a70e0 35%, #e0d0ff 50%, #8a5ad0 65%, #3e2482); }
.depths .hofx-pedestal::before { background: radial-gradient(ellipse at 50% 40%, #f4ecff, #b48ae8 60%, #5a3a98); box-shadow: 0 2px 0 #d8b048; }
.hofx.master .hofx-pedestal { background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.3) 0 3cqw, transparent 3cqw 8cqw), linear-gradient(90deg, #284a8a, #7ac4ec 35%, #ffffff 50%, #7ac4ec 65%, #284a8a); }
.hofx.master .hofx-pedestal::before { background: radial-gradient(ellipse at 50% 40%, #ffffff, #b8ecff 55%, #5ab0e0); box-shadow: 0 2px 0 #f8d048, 0 4px 0 #b07af0; }
.hofx-replay { text-align: center; }
@media (prefers-reduced-motion: reduce) { .hofx-light { animation: none; } }
/* the hardware: D-pad, speaker grille, B and A */
.cdev-pad { flex: none; display: flex; align-items: center; justify-content: space-between; height: 100px; padding: 0 10px; }
.cdev-dpad { display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px); filter: drop-shadow(0 3px 0 var(--shell-deep)); }
.cdev-dpad > * { background: var(--pad); }
.cdev-dpad button { padding: 0; border: 0; cursor: pointer; }
.cdev-dpad button:active { background: var(--pad-on); }
.cdev-dpad [data-dir="up"] { grid-area: 1 / 2; border-radius: 4px 4px 0 0; }
.cdev-dpad [data-dir="left"] { grid-area: 2 / 1; border-radius: 4px 0 0 4px; }
.cdev-dpad span { grid-area: 2 / 2; }
.cdev-dpad [data-dir="right"] { grid-area: 2 / 3; border-radius: 0 4px 4px 0; }
.cdev-dpad [data-dir="down"] { grid-area: 3 / 2; border-radius: 0 0 4px 4px; }
.cdev-grille { width: 54px; height: 22px; border-radius: 3px; background: repeating-linear-gradient(180deg, var(--shell-rim) 0 4px, transparent 4px 8px); }
.cdev-ab { display: flex; align-items: flex-start; gap: 12px; height: 80px; }
.cdev-btn {
width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--shell-rim); cursor: pointer;
font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none; color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
background: var(--btn-a); box-shadow: 0 4px 0 var(--shell-deep);
}
/* A big, B always smaller (the user's call, 2026-10-08, like the other Pokédex scenes) */
#cdev-a { width: 66px; height: 66px; font-size: 0.95rem; }
#cdev-b { width: 50px; height: 50px; align-self: flex-end; background: radial-gradient(circle at 35% 30%, #f4f4f8 0 12%, #b8b8c4 45%, #6a6a78); color: #2a2a30; text-shadow: none; }
.cdev-btn:active { translate: 0 3px; box-shadow: 0 1px 0 var(--shell-deep); }
/* the cover that swings open on its left hinge, over everything under the lid */
.cdev-cover {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; transform-origin: left center; backface-visibility: hidden;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), transparent 40%), linear-gradient(180deg, var(--shell-hi), var(--shell) 45%, var(--shell-fold));
box-shadow: inset 0 0 0 3px var(--shell-rim), inset -10px 0 0 rgba(0, 0, 0, 0.12);
}
@media (min-width: 560px) { .cdev-cover { border-radius: 0 0 26px 26px; } }
/* its face: an LED for a new badge, your partner in a little window, a nameplate with your badges */
.cdev-led {
position: absolute; top: 14px; right: 18px; width: 12px; height: 12px; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #8a6a5a, #4a2a24); box-shadow: inset 0 0 0 2px var(--shell-deep);
}
.cdev-led.on { background: radial-gradient(circle at 35% 35%, #fffbd0, #ffd23a 50%, #d89a00); animation: cdevLed 0.5s steps(1) infinite; }
@keyframes cdevLed { 50% { background: radial-gradient(circle at 35% 35%, #8a6a5a, #4a2a24); box-shadow: inset 0 0 0 2px var(--shell-deep); } 0% { box-shadow: inset 0 0 0 2px var(--shell-deep), 0 0 12px 3px #ffd23a; } }
.cdev-cover-window {
position: absolute; left: 50%; top: 13%; width: min(48%, 200px); aspect-ratio: 1; translate: -50% 0; display: grid; place-items: center;
border-radius: 18px; border: 5px solid var(--shell-rim); overflow: hidden;
background: radial-gradient(circle at 50% 70%, #3a6a8a, #142838 70%), #142838;
box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.45), inset 0 -18px 0 rgba(0, 0, 0, 0.2), 0 4px 0 rgba(0, 0, 0, 0.25);
}
.cdev-cover-window::after { content: ''; position: absolute; inset: 6px 50% 60% 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.14); transform: skewX(-12deg); }
.cdev-cover-window img { width: 92%; height: 92%; object-fit: contain; image-rendering: pixelated; }
.cdev-cover-plate {
position: absolute; left: 50%; bottom: max(10%, 28px); width: min(82%, 340px); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 8px 10px 10px; border: 3px solid var(--tc3); border-radius: 10px; color: #fff; text-shadow: 1px 1px 0 var(--tc3);
background: repeating-linear-gradient(135deg, var(--tc1) 0 8px, var(--tc2) 8px 10px); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
}
.cdev-cover-plate b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; font-weight: 400; letter-spacing: 1px; }
.cdev-cover-plate small { font-size: 0.75rem; opacity: 0.9; }
.cdev-cover-badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; max-width: 300px; }
.cdev-cover-slot {
display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.38)); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.25);
}
.cdev-cover-slot.full { box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.45), 0 0 0 2px #ffd23a, 0 0 6px 1px rgba(255, 210, 58, 0.6); }
.cdev-cover-slot img { width: 82%; height: 82%; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.35)); }
/* once open, the lid's yellow light carries the LED on */
.cdev.news.powered .pdx-light.yellow { animation: cdevLidLed 1s steps(1) infinite 0.9s; }
@keyframes cdevLidLed { 50% { filter: brightness(0.45); } 0% { filter: brightness(1.4); box-shadow: 0 0 10px #ffd23a; } }
/* over a run (the Poké Ball menu, the Bag) it dims what's under it */
.collection-screen.over { z-index: 100; background: rgba(8, 10, 28, 0.6); }
/* the boot screen: a Poké Ball and a hello, then the home screen's picks pop in */
.cdev-splash {
position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
background: #10234a; pointer-events: none; animation: cdevSplash 1s steps(10) both;
}
.cdev-splash-ball {
width: 54px; height: 54px; border-radius: 50%; border: 4px solid #1a1a22;
background: radial-gradient(circle, #f2f2f2 0 20%, #1a1a22 21% 29%, transparent 30%), linear-gradient(180deg, #e8343a 0 46%, #1a1a22 46% 54%, #f2f2f2 54%);
}
.cdev-splash-text { font-size: 0.75rem; letter-spacing: 1px; color: #b6f08e; }
.cdev-splash.wait { animation-play-state: paused; }
@keyframes cdevSplash { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.cdev-home.boot .cdev-pick { animation: cdevPop 0.36s cubic-bezier(0.2, 1.4, 0.4, 1) both calc(0.7s + var(--i) * 45ms); }
@keyframes cdevPop { from { opacity: 0; transform: scale(0.6); } }
/* the owner's ID strip: the Trainer Card in its colour */
.cdev-owner {
position: relative; flex: none; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
border: 3px solid var(--tc3); border-radius: 12px; cursor: pointer; text-align: left; color: #fff; font-family: inherit;
background: repeating-linear-gradient(135deg, var(--tc1) 0 8px, var(--tc2) 8px 10px); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.cdev-owner-mon { display: grid; place-items: center; height: 64px; border-radius: 8px; background: var(--win-bg); box-shadow: inset 0 0 0 2px var(--tc3); }
.cdev-owner-mon img { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; }
.cdev-owner-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-shadow: 1px 1px 0 var(--tc3); }
.cdev-owner-id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.15rem; font-weight: 400; }
.cdev-owner-id small { font-size: 0.8rem; opacity: 0.9; }
.cdev-owner-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.75rem; text-shadow: 1px 1px 0 var(--tc3); }
.cdev-owner-badge .coll-badge { width: 40px; height: 40px; }
/* the apps */
.cdev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 6px; }
.cdev-icon {
display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 6px 2px; border: 0; border-radius: 12px;
background: none; color: #fff; cursor: pointer; font-family: inherit;
}
.cdev-tile {
--c1: #5868c8; --c2: #303890;
position: relative; display: grid; place-items: center; width: min(72px, 100%); aspect-ratio: 1; overflow: hidden; border-radius: 18px;
background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3), 0 4px 0 rgba(0, 0, 0, 0.4);
transition: translate 0.1s;
}
.cdev-tile::after { content: ''; position: absolute; inset: 3px 3px 50%; border-radius: 15px 15px 40% 40% / 15px 15px 12px 12px; background: rgba(255, 255, 255, 0.16); pointer-events: none; }
.cdev-tile .coll-emoji { position: relative; z-index: 1; font-size: 44px; line-height: 0; }
.cdev-tile .smooth-icon { filter: drop-shadow(0 2px 1px rgba(20, 10, 30, 0.45)); }
.cdev-label { max-width: 100%; font-size: min(0.78rem, 3.2vw); line-height: 1.3; text-align: center; text-shadow: 1px 1px 0 #000; overflow-wrap: anywhere; }
.cdev-count { padding: 3px 8px 2px; border-radius: 999px; font-size: min(0.75rem, 3vw); color: #b6f08e; background: rgba(0, 0, 0, 0.4); white-space: nowrap; }
@media (hover: hover) { .cdev-icon:hover .cdev-tile { translate: 0 -3px; } }
.cdev-icon:active .cdev-tile { translate: 0 2px; }
.cdev.keyed .cdev-pick.sel, .cdev-pick:focus-visible { outline: 3px solid #ffe36b; outline-offset: 2px; }
.app-dex .cdev-tile { --c1: #f05a5a; --c2: #a02c2c; }
.app-safari .cdev-tile { --c1: #6ac458; --c2: #2c6a24; }
.app-moves .cdev-tile { --c1: #5a8ef0; --c2: #2c58b0; }
.app-relics .cdev-tile { --c1: #e8b048; --c2: #9a6a18; }
.app-items .cdev-tile { --c1: #f088c4; --c2: #983068; }
.app-stats .cdev-tile { --c1: #58c070; --c2: #2a7038; }
.app-achievements .cdev-tile { --c1: #a880e4; --c2: #5a3890; }
.app-fame .cdev-tile { --c1: #ecbc40; --c2: #8a5e10; }
.app-record .cdev-tile { --c1: #4a60c0; --c2: #1c2668; }
/* the dock under the apps (collection.js dockRow()): smaller tiles on a shelf, the device's own system buttons */
.cdev-dock {
flex: none; display: flex; justify-content: space-around; gap: 4px; margin-top: auto; padding: 10px 4px 8px;
border-radius: 16px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.25);
}
.cdev-dock-btn {
flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 2px; border: 0; border-radius: 10px;
background: none; color: #fff; cursor: pointer; font-family: inherit;
}
.cdev-dock-btn .cdev-tile { width: 46px; border-radius: 13px; }
.cdev-dock-btn .cdev-tile::after { border-radius: 10px 10px 40% 40% / 10px 10px 8px 8px; }
.cdev-dock-btn .coll-emoji { font-size: 30px; }
.cdev-dock-btn .cdev-label { font-size: min(0.75rem, 2.8vw); }
@media (hover: hover) { .cdev-dock-btn:hover .cdev-tile { translate: 0 -2px; } }
.cdev-dock-btn:active .cdev-tile { translate: 0 2px; }
.app-settings .cdev-tile { --c1: #8a96aa; --c2: #48526a; }
.app-help .cdev-tile { --c1: #48b8d8; --c2: #1e6a8a; }
.app-corner .cdev-tile { --c1: #e86ab0; --c2: #8a2a64; }
.app-menu .cdev-tile { --c1: #e8dcb0; --c2: #9a8c60; }
.cdev-icon.locked { cursor: help; }
.cdev-icon.locked .cdev-tile { --c1: #6a6a7a; --c2: #3a3a48; }
.cdev-icon.locked .cdev-label, .cdev-icon.locked .cdev-count { color: #a8a8b8; }
@media (prefers-reduced-motion: reduce) {
.cdev-screen.power-on, .cdev.powered .pdx-light, .cdev.powered .pdx-lens, .cdev-home.boot .cdev-pick, .cdev-led.on, .cdev.news.powered .pdx-light.yellow { animation: none; }
.cdev-splash { display: none; }
}
.coll-emoji { font-size: 48px; line-height: 1; }
/* ---------- the Trainer Card (js/trainercard.js): its colour steps up with badges ---------- */
[data-tier="green"] { --tc1: #58b048; --tc2: #3c8a30; --tc3: #1e4e18; }
[data-tier="bronze"] { --tc1: #c88040; --tc2: #a06028; --tc3: #5a3010; }
[data-tier="silver"] { --tc1: #a8b0c0; --tc2: #808898; --tc3: #444a58; }
[data-tier="gold"] { --tc1: #e8b830; --tc2: #c09018; --tc3: #6a4a08; }
[data-tier="violet"] { --tc1: #9a60e0; --tc2: #7040b8; --tc3: #361a68; }
.coll-badge { width: 72px; height: 72px; }
.trainer-dialog { width: min(460px, 94vw); padding: 16px; border-color: var(--tc3);
background: repeating-linear-gradient(135deg, var(--tc1) 0 8px, var(--tc2) 8px 10px); }
.trainer-dialog .records-close { margin-top: 12px; }
.tc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.trainer-dialog .tc-title { margin: 0; padding: 0; border: 0; outline: none; font-size: 1rem; color: #fff; text-shadow: 2px 2px 0 var(--tc3); }
.tc-tier { padding: 4px 10px 3px; border-radius: 999px; font-size: 0.75rem; color: #fff; background: var(--tc3); }
.tc-info { display: grid; grid-template-columns: 1fr 112px; align-items: center; gap: 8px; padding: 10px 12px;
border-radius: var(--round-sm); background: radial-gradient(circle, rgba(31, 58, 20, 0.1) 1px, transparent 1.5px) 0 0 / 8px 8px, #a8c884; box-shadow: inset 0 3px 0 rgba(31, 58, 20, 0.14), 0 0 0 3px #2a2a30, 4px 4px 0 3px rgba(0, 0, 0, 0.25); }
.tc-lines { display: grid; grid-template-columns: auto 1fr; gap: 7px 10px; margin: 0; font-size: 0.78rem; }
.tc-lines dt { color: #3a5a28; }
.tc-lines dd { margin: 0; text-align: right; color: #1f3a14; overflow-wrap: anywhere; }
.tc-partner { position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 4px; padding: 6px 6px 7px; border: 0; border-radius: var(--round-sm);
background: none; cursor: pointer; }
.tc-partner:hover, .tc-partner:focus-visible { background: rgba(31, 58, 20, 0.18); outline: none; }
.tc-partner-frame { position: relative; display: grid; gap: 6px; padding-bottom: 6px; border-radius: var(--round-sm); background: rgba(31, 58, 20, 0.1); }
/* the partner's six slots (openTrainerCard()): sockets in the panel, a toggle's icon faded while off and ringed in the
tier's ink while on, a locked one greyed under a padlock */
.tc-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 6px; }
.tc-slot { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0; overflow: hidden; border: 0; border-radius: var(--round-xs);
font: inherit; color: #1f3a14; background: rgba(31, 58, 20, 0.14); box-shadow: inset 0 2px 0 rgba(31, 58, 20, 0.18); cursor: pointer; }
button.tc-slot:hover { background: rgba(31, 58, 20, 0.22); }
.tc-slot:focus-visible { outline: 2px solid var(--tc3); outline-offset: 1px; }
button.tc-slot[aria-pressed="false"] > * { opacity: 0.4; filter: grayscale(0.8); }
.tc-slot.on { background: #e8f0d8; box-shadow: 0 0 0 2px var(--tc3), 0 2px 0 2px rgba(0, 0, 0, 0.25); }
.tc-slot.locked { cursor: default; }
.tc-slot.locked > :not(.tc-slot-lock) { opacity: 0.45; filter: grayscale(1); }
.tc-slot-lock { position: absolute; right: 2px; bottom: 1px; font-size: 0.75rem; line-height: 1; }
.tc-slot-glyph { font-size: 1.5rem; line-height: 1; }
.tc-aura-mini { position: relative; flex: none; overflow: hidden; }
.tc-pin-key .tc-pin-art { width: 36px; height: 36px; font: 1rem/1 var(--pixel-font); color: var(--tc3); }
.tc-pin-key .tc-pin-art img { width: 30px; height: 30px; }
.tc-slot-lv { position: absolute; right: 2px; bottom: 1px; padding: 1px 2px 0; border-radius: 3px; font-size: 0.75rem; line-height: 1; color: #fff; background: #303038; }
.tc-partner-edit { padding: 4px 10px 3px; border-radius: 999px; font-size: 0.75rem; color: #fff; background: var(--tc3); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.tc-pick-back { padding: 5px 12px 4px; border: 0; border-radius: 999px; font: inherit; font-size: 0.75rem; color: #fff; background: var(--tc3); cursor: pointer; }
.tc-pick-note { margin: 0 0 8px; padding: 8px 10px; border-radius: var(--round-sm); font-size: 0.75rem; line-height: 1.6; color: var(--win-ink); background: var(--win-bg); box-shadow: 0 0 0 3px #303038; }
.tc-pick-auto { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--round-sm); font: inherit; font-size: 0.75rem;
text-align: left; color: var(--win-ink); background: var(--win-bg); box-shadow: 0 0 0 3px #303038; cursor: pointer; }
.tc-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; padding: 8px; border-radius: var(--round-sm);
background: var(--win-bg); box-shadow: 0 0 0 3px #303038; }
.tc-pick { position: relative; aspect-ratio: 1; min-width: 0; padding: 0; overflow: hidden; border: 0; border-radius: var(--round-xs);
background: rgba(48, 48, 56, 0.08); cursor: pointer; }
.tc-pick img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; image-rendering: pixelated; }
.tc-pick:hover, .tc-pick:focus-visible { background: rgba(48, 48, 56, 0.18); outline: none; }
.tc-pick.on, .tc-pick-auto.on { box-shadow: 0 0 0 3px var(--tc2), 0 0 0 5px #303038; }
.tc-partner img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; }
/* the ball your partner comes out of (ballPicker() in js/trainercard.js): a 3D ball (js/ball-looks.js) by its name */
.tc-ball-key .ball3d { --b: 30px; flex: none; }
.tc-ball-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.tc-ball { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 2px 6px; overflow: visible; }
.tc-ball .ball3d { --b: 40px; flex: none; }
.tc-ball-name { font: 0.75rem/1 var(--pixel-font); color: var(--win-ink); white-space: nowrap; }
.tc-ball.locked .ball3d { filter: grayscale(1) brightness(0.55); opacity: 0.45; }
.tc-ball.locked .tc-ball-name { opacity: 0.5; }
.tc-ball-now { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tc-ball-away[hidden] { display: none; }
/* the trainer you walk as (lookPicker() in js/trainercard.js): the front frame of its walking sheet, the picked one walking */
.look-art { display: block; flex: none; width: var(--s, 48px); height: var(--s, 48px); background: 0 0 / 400% 400% no-repeat; image-rendering: pixelated; }
.tc-look-key .look-art { --s: 40px; }
.tc-look-key.alone .look-art { filter: brightness(0); opacity: 0.25; }
.tc-look.locked .look-art { filter: grayscale(1) brightness(0.6); opacity: 0.55; }
.tc-look-price { font: 0.75rem/1 var(--pixel-font); color: var(--win-ink); }
.tc-look.on .look-art { animation: look-walk 0.6s steps(4) infinite; }
@keyframes look-walk { to { background-position-x: 133.333%; } }
@media (prefers-reduced-motion: reduce) { .tc-look.on .look-art { animation: none; } }
:root.calm-fx .tc-look.on .look-art { animation: none; }
/* The Champion's Crown (js/data/difficulty.js's wearsCrown(), a Level 10 win) floating over the partner, bobbing like the
walking buddy's. */
.tc-crown { position: absolute; z-index: 2; left: 50%; top: -6px; width: 36px; translate: -50% 0; pointer-events: none;
filter: drop-shadow(0 0 4px rgba(255, 220, 120, 0.8)); animation: tc-crown-bob 2.8s ease-in-out infinite; }
.tc-crown svg { display: block; width: 100%; }
@keyframes tc-crown-bob { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .tc-crown { animation: none; } }
.tc-crown-mini { width: 16px; filter: grayscale(1); }
.tc-crown-key .tc-crown-mini { width: 30px; filter: none; }
.tc-crown-key.on .tc-crown-mini { filter: drop-shadow(0 0 3px rgba(255, 220, 120, 0.9)); }
/* The Super Saiyan aura a Level 6-10 win earns (js/data/difficulty.js's auraWorn()), the walking buddy's frames stepped
behind the partner and, from 9 up, over it: a strip of frames slid one frame at a time. */
.tc-partner img { position: relative; }
.tc-aura { position: absolute; left: 50%; translate: -50% 0; overflow: hidden; pointer-events: none; }
.tc-partner img + .tc-aura { z-index: 1; opacity: 0.9; }
.aura-strip { display: block; width: calc(100% * var(--n)); height: 100%; image-rendering: pixelated;
animation: aura-run var(--ms) steps(var(--n)) infinite; }
@keyframes aura-run { to { transform: translateX(-100%); } }
html.calm-fx .aura-strip { animation: none; }
@media (prefers-reduced-motion: reduce) { .aura-strip { animation: none; } }
.tc-aura.aura-lv6 { filter: drop-shadow(0 0 3px rgba(255, 58, 92, 0.6)); }
.tc-aura.aura-lv7 { filter: drop-shadow(0 0 3px rgba(52, 232, 120, 0.6)); }
.tc-aura.aura-lv8 { filter: drop-shadow(0 0 4px rgba(62, 144, 255, 0.65)); }
.tc-aura.aura-lv9 { filter: drop-shadow(0 0 4px rgba(180, 98, 255, 0.7)); }
.tc-aura.aura-lv10 { filter: drop-shadow(0 0 5px rgba(255, 208, 64, 0.8)); }
.tc-aura-key.on.aura-key-lv6 .tc-slot-lv { background: #d8284a; }
.tc-aura-key.on.aura-key-lv7 .tc-slot-lv { background: #18a052; }
.tc-aura-key.on.aura-key-lv8 .tc-slot-lv { background: #2a6ee0; }
.tc-aura-key.on.aura-key-lv9 .tc-slot-lv { background: #8a3ee0; }
.tc-aura-key.on.aura-key-lv10 .tc-slot-lv { background: linear-gradient(90deg, #e8484a, #e8a020, #38b048, #2a7ee0, #8a3ee0); }
/* A Pokémon Master's title (js/data/difficulty.js's isMaster(), a Level 10 win): a dark chip with a rainbow underline, like the rainbow star. */
.tc-lines dd.tc-master { justify-self: end; padding: 3px 7px 4px; border-radius: 4px; color: #f8d048;
background: linear-gradient(90deg, #ff5a5a, #ffd84a, #6ee86e, #5ac8ff, #b07af0) 0 100% / 100% 2px no-repeat, #1f3a14; }
.tc-case-label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 14px 0 8px; font-size: 0.75rem; color: #fff; text-shadow: 1px 1px 0 var(--tc3); }
.tc-case-label > span:first-child { white-space: nowrap; }
.tc-case-keys { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-left: auto; }
.tc-case { display: grid; gap: 8px; padding: 10px; border-radius: var(--round-sm); background: #2a3048;
box-shadow: 0 0 0 3px #181820, inset 0 3px 0 rgba(0, 0, 0, 0.35); }
.tc-row { display: grid; gap: 4px; }
.tc-group { font-size: 0.75rem; color: #a8b0d0; }
.tc-badges { display: grid; grid-template-columns: repeat(5, minmax(0, 44px)); gap: 4px; }
.tc-badge { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0;
border-radius: var(--round-xs); background: rgba(255, 255, 255, 0.05); cursor: pointer; }
.tc-badge:focus-visible { outline: 2px solid #f8e070; }
.tc-badge-art { width: 36px; height: 36px; }
/* a band of light sweeps over each earned badge, in steps, cut to its shape by its own art */
.tc-badge.earned::after { content: ''; position: absolute; inset: 4px; pointer-events: none;
-webkit-mask: var(--art) center / 36px 36px no-repeat; mask: var(--art) center / 36px 36px no-repeat;
background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.8) 42% 50%, transparent 50% 54%, rgba(255, 255, 255, 0.5) 54% 57%, transparent 57%) 100% 0 / 300% 100% no-repeat;
animation: tcShine 4s ease-in-out infinite; }
.tc-badge.earned:nth-child(3n+2)::after { animation-delay: -1.3s; }
.tc-badge.earned:nth-child(3n)::after { animation-delay: -2.6s; }
@keyframes tcShine { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.tc-badge.locked { background: rgba(0, 0, 0, 0.2); }
/* new since the card last opened: it pops in, flashes white and throws four pixel sparks */
.tc-badge.fresh .tc-badge-art { animation: tcPop 0.5s ease-out calc(0.45s + var(--i) * 0.26s) backwards; }
.tc-badge.fresh::before { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: #fff;
box-shadow: 0 -18px #fff, 0 18px #fff, -18px 0 #fff, 18px 0 #fff, -13px -13px #fff8a0, 13px -13px #fff8a0, -13px 13px #fff8a0, 13px 13px #fff8a0;
opacity: 0; animation: tcSpark 0.7s ease-out calc(0.65s + var(--i) * 0.26s); pointer-events: none; }
.tc-badge.fresh.earned::after { animation: tcFlash 0.6s ease-out calc(0.75s + var(--i) * 0.26s) backwards, tcShine 4s ease-in-out calc(1.35s + var(--i) * 0.26s) infinite;
background-color: transparent; }
@keyframes tcPop { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes tcSpark { 0% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes tcFlash { 0% { background-color: #fff; } 100% { background-color: transparent; } }
.tc-foot { margin: 10px 0 0; text-align: center; font-size: 0.75rem; color: #fff; text-shadow: 1px 1px 0 var(--tc3); }
@media (max-width: 600px) {
.tc-badges { gap: 3px; }
.tc-badge-art { width: 32px; height: 32px; }
.tc-badge.earned::after { inset: 4px; -webkit-mask-size: 32px 32px; mask-size: 32px 32px; }
.tc-lines { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
.tc-badge.earned::after, .tc-badge.fresh .tc-badge-art, .tc-badge.fresh::before { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.gem, .gem-side, .select-screen, .sel-stage img, .title-screen:not([hidden]), .title-screen.away { animation: none; }
.title-screen.away { opacity: 0; }
.gem.on::before, .gem.on .gem-egg { animation: none; }
}
/* ---------- the Trainer Card on the title and in the Bag (cardIcon() / showBadgeNews() in js/trainercard.js) ---------- */
.tc-icon { display: block; width: 1.25em; height: auto; image-rendering: pixelated; }
.tc-icon .o { fill: #1c1440; }
.tc-icon .c1 { fill: var(--tc1, #58b048); }
.tc-icon .c2 { fill: var(--tc2, #3c8a30); }
.tc-icon .c3 { fill: var(--tc3, #1e4e18); }
.tc-icon .hi { fill: #fff; opacity: 0.35; }
.tc-icon .pic { fill: #f8f0d8; }
.tc-icon .gold { fill: #ffd040; }
.gem-icon .tc-icon { width: 40px; }
@media (max-width: 600px) { .gem-icon .tc-icon { width: 32px; } }
/* a new badge waits: a gold "!" bounces on the card (and the Bag) until the card is opened */
.badge-news { position: relative; }
.gem-dex.badge-news .gem-icon::after, .bag-btn.badge-news::after, .bag-pocket.badge-news::before {
content: '!'; position: absolute; top: -6px; right: -8px; z-index: 2;
display: grid; place-items: center; width: 15px; height: 15px; border-radius: 3px;
background: #ffd040; color: #3a1c0c; box-shadow: 0 0 0 2px #3a1c0c, 0 0 8px #ffd040;
font: 12px/1 var(--pixel-font); animation: newsBob 0.8s ease-in-out infinite alternate;
}
.bag-pocket.badge-news::before { top: -9px; left: -9px; right: auto; }
/* and it follows the trail: the home screen's Trainer Card strip, the new badge's group, the badge itself, till it's tapped */
.cdev-owner.badge-news::after, .tc-row.new > .tc-group::after, .tc-new {
content: '!'; position: absolute; top: -6px; right: -6px; z-index: 2;
display: grid; place-items: center; width: 15px; height: 15px; border-radius: 3px;
background: #ffd040; color: #3a1c0c; box-shadow: 0 0 0 2px #3a1c0c, 0 0 8px #ffd040;
font: 12px/1 var(--pixel-font); animation: newsBob 0.8s ease-in-out infinite alternate;
}
.cdev-owner.badge-news::after { top: 4px; right: 4px; }
.tc-row.new > .tc-group { position: relative; justify-self: start; padding-right: 22px; }
.tc-row.new > .tc-group::after { top: -3px; right: 0; width: 13px; height: 13px; font-size: 12px; }
.tc-badge.new { box-shadow: 0 0 0 2px #ffd040, 0 0 10px rgba(255, 208, 64, 0.6); }
.tc-new { top: -5px; right: -5px; width: 13px; height: 13px; font-size: 12px; }
.tc-seen-all { float: right; padding: 3px 7px; border: 0; border-radius: var(--round-xs); font: 0.75rem/1 var(--pixel-font);
color: #3a1c0c; background: #ffd040; box-shadow: 0 0 0 2px #3a1c0c; cursor: pointer; }
/* the pin plate: gold on the card's dark ink, so it reads on every tier's stripes (a faint grey tab was missed, 2026-10-27) */
.tc-pin-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; overflow: hidden; border: 0; border-radius: 999px;
font: 0.75rem/1 var(--pixel-font); color: #fff; background: var(--tc3); box-shadow: 0 0 0 2px #ffd040, 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 12px rgba(255, 208, 64, 0.45);
cursor: pointer; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); }
.tc-pin-btn:hover, .tc-pin-btn:focus-visible { filter: brightness(1.2); outline: none; }
.tc-pin-btn:active { transform: translateY(2px); box-shadow: 0 0 0 2px #ffd040, 0 1px 0 rgba(0, 0, 0, 0.35); }
.tc-pin-art { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffbe8, #f0e0b0);
box-shadow: inset 0 0 0 2px #ffd040; }
.tc-pin-art img { width: 22px; height: 22px; object-fit: contain; }
.tc-cover-btn { padding: 8px 12px 7px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 3px 0 rgba(0, 0, 0, 0.35); }
.tc-cover-btn:active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 1px 0 rgba(0, 0, 0, 0.35); }
.tc-pick-word { font: 0.75rem/1 var(--pixel-font); color: var(--tc3); }
/* the same badge pinned to the partner's portrait, as friends see it beside them */
.tc-tack { position: absolute; top: -6px; left: -6px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fffbe8, #f0e0b0); box-shadow: 0 0 0 2px #ffd040, 0 0 0 4px var(--tc3), 0 3px 4px rgba(0, 0, 0, 0.35);
transform: rotate(-12deg); cursor: pointer; font: 1rem/1 var(--pixel-font); color: var(--tc3); }
.tc-tack img { width: 28px; height: 28px; object-fit: contain; }
.tc-tack:hover, .tc-tack:focus-visible { transform: rotate(-12deg) scale(1.1); outline: none; }
.tc-tack.empty { opacity: 0.85; }
/* a new relic, item or move (newFinds in the save) leaves the same trail: every Pokédex / Home key, the app's tile, its
banner and slot, or the Moves tab and card, till it's been on screen */
:where(.dex-news) { position: relative; }
.dex-news::after, .cdev-icon.badge-news::after, .bdx-banner.news::after, .mv-tab.news::after, .mv-more.news::after {
content: '!'; position: absolute; top: -6px; right: -6px; z-index: 2;
display: grid; place-items: center; width: 15px; height: 15px; border-radius: 3px;
background: #ffd040; color: #3a1c0c; box-shadow: 0 0 0 2px #3a1c0c, 0 0 8px #ffd040;
font: 12px/1 var(--pixel-font); animation: newsBob 0.8s ease-in-out infinite alternate; pointer-events: none;
}
.cdev-icon.badge-news::after { top: 0; right: max(0px, calc(50% - 42px)); }
.bdx-banner.news::after { top: 6px; right: 6px; }
.mv-tab { position: relative; }
.mv-tab.news::after { top: -4px; right: -4px; width: 13px; height: 13px; font-size: 12px; }
.mv-more.news::after { top: 4px; right: auto; left: 50%; margin-left: -7px; width: 13px; height: 13px; font-size: 12px; }
.pdx-slot.news, .card.news { box-shadow: 0 0 0 2px #ffd040, 0 0 10px rgba(255, 208, 64, 0.6); }
.card-new { position: absolute; top: -5px; right: -5px; z-index: 3; }
@media (prefers-reduced-motion: reduce) { .tc-pin-btn.shine::after, .cdev-owner.badge-news::after, .tc-row.new > .tc-group::after, .tc-new, .dex-news::after, .bdx-banner.news::after, .mv-tab.news::after, .mv-more.news::after, .mv-more::before { animation: none !important; } }
@keyframes newsBob { to { translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) { .badge-news::after, .badge-news::before, .badge-news .gem-icon::after { animation: none !important; } }
.bag-pocket .tc-icon { width: 30px; }
.bag-trainer { display: grid; justify-items: center; gap: 12px; text-align: center; }
.bag-trainer .tc-icon { width: 64px; }
.bag-trainer p { margin: 0; }
/* ---------- the sub-menus: Game Modes and Collection slide the stack sideways (renderMenu() in js/title.js) ---------- */
/* the old stack leaves in .title-menu-ghost while the new one comes in. transform, not translate, and will-change, so
phones move the (drop-shadowed) signs on the GPU instead of repainting them every frame */
.title-menu { position: relative; }
.title-menu-ghost { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: inherit; pointer-events: none; }
.title-menu-ghost > * { will-change: transform, opacity; }
.title-menu-ghost .gem-row > .gem { animation: none; } /* moved, it would replay .gem's own entrance */
.title-menu-ghost[data-slide="out-l"] > * { animation: menuOutL 0.3s cubic-bezier(0.3, 0, 0.2, 1) both calc(var(--i) * 25ms); }
.title-menu-ghost[data-slide="out-r"] > * { animation: menuOutR 0.3s cubic-bezier(0.3, 0, 0.2, 1) both calc(var(--i) * 25ms); }
.title-menu[data-slide="in-r"] > .gem, .title-menu[data-slide="in-r"] > .gem-row > .gem { will-change: transform, opacity; animation: menuInR 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards calc(60ms + var(--i) * 30ms); }
.title-menu[data-slide="in-l"] > .gem, .title-menu[data-slide="in-l"] > .gem-row > .gem { will-change: transform, opacity; animation: menuInL 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards calc(60ms + var(--i) * 30ms); }
.title-menu[data-slide="done"] > .gem, .title-menu[data-slide="done"] > .gem-row > .gem { animation: none; }
@keyframes menuOutL { from { transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(-110px, 0, 0); } }
@keyframes menuOutR { from { transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(110px, 0, 0); } }
@keyframes menuInR { from { opacity: 0; transform: translate3d(110px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes menuInL { from { opacity: 0; transform: translate3d(-110px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
/* a sign that opens a sub-menu: a ▶ on its right end */
.gem-arrow {
position: absolute; top: 30%; right: calc(var(--gp) * 7); translate: 0 -50%; z-index: 2; pointer-events: none;
color: #fff8d8; font: 0.75rem/1 var(--pixel-font); text-shadow: 2px 2px 0 #2a1408;
}
@media (prefers-reduced-motion: no-preference) { .gem-more.on .gem-arrow { animation: arrowNudge 0.6s ease-in-out infinite alternate; } }
@keyframes arrowNudge { to { translate: 3px -50%; } }
.gem.locked .gem-arrow { opacity: 0.5; }
/* Back is no sign but a Poké Ball under the signs' balls, "BACK" lettered beside it in the signs'
outlined type (the user's ask, 2026-10-07: the old slate pill looked out of place); sizeGems() in js/title.js sets --ball */
.gem-back {
--c0: #ff7a66; --c1: #e02c20; --c2: #a01810; --ink: #3a1410;
display: flex; align-items: center; gap: calc(var(--gp) * 2.5);
border: 0; border-radius: 0; background: none; box-shadow: none;
padding-left: var(--ball-x, 0);
}
.gem-back::after { content: none; }
.gem-back .gem-icon {
position: relative; left: 0; top: auto; translate: none; flex: none;
width: var(--ball, 52px); height: var(--ball, 52px); box-sizing: border-box;
border: 3px solid #181010;
background:
radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.75) 0 7%, transparent 8%),
radial-gradient(circle closest-side, #fff 0 25%, #d4d4dc 33%, #181010 34% 43%, transparent 44%),
linear-gradient(var(--c0), var(--c1) 26%, var(--c2) 44%, #181010 44% 56%, #fff 56%, #e6e6ee 78%, #a8a8b6);
box-shadow: inset -3px -4px 0 rgba(20, 10, 30, 0.18);
filter: none;
transform-origin: 50% 90%;
}
.gem-back .gem-icon::before { content: none; }
.gem-back .gem-label { height: auto; padding: 0; font-size: 1rem; }
.gem-back.on::before { left: -24px; }
/* always wobbling, like a ball with a Pokémon inside: two rocks and a rest (the user's ask, 2026-10-08) */
@media (prefers-reduced-motion: no-preference) { .gem-back .gem-icon { animation: backRock 1.6s ease-in-out infinite; } }
@keyframes backRock { 0%, 56%, 100% { rotate: 0deg; } 10% { rotate: -16deg; } 22% { rotate: 12deg; } 32% { rotate: -6deg; } 42% { rotate: 3deg; } }
/* a sign's subline (Best F19, Win a run) sits on its white lower band, so the name stays centred on the colour */
.gem-soon {
position: absolute; left: calc(var(--gp) * 15); right: 0; bottom: 0; height: 32%;
display: grid; place-items: center;
font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink); text-shadow: none;
}
/* a badge line in the result window opens the Trainer Card (badgeItem() in js/run.js) */
.result-badge-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.result-badge-btn:hover, .result-badge-btn:focus-visible { color: #c08a10; outline: none; }
/* ---------- the title's icons are smooth vector art (js/smooth-icons.js; the user's call, 2026-10-06: like the Poké Ball
signs, no pixels), with a soft shadow instead of the pixel icons' hard outline ---------- */
.smooth-icon { display: block; width: 1em; height: 1em; overflow: visible; }
.gem-icon > .smooth-icon { width: 34px; height: 34px; filter: drop-shadow(0 1px 1px rgba(20, 10, 30, 0.5)); }
.gem-icon > .smooth-icon.tc-icon { width: 38px; height: 38px; }
.gem-icon > .smooth-icon.gem-ball { width: 32px; height: 32px; }
.gem.locked .gem-icon > .smooth-icon { filter: grayscale(1) brightness(0.95) drop-shadow(0 1px 1px rgba(20, 10, 30, 0.5)); }
.gem-side-icon.smooth-icon { width: 30px; height: 30px; }
.title-sound .vol-tag .smooth-icon { width: 18px; height: 18px; }
@media (max-height: 700px) {
.gem-icon > .smooth-icon { width: 26px; height: 26px; }
.gem-icon > .smooth-icon.tc-icon { width: 30px; height: 30px; }
.gem-icon > .smooth-icon.gem-ball { width: 24px; height: 24px; }
}
@media (max-width: 600px) { .gem-icon > .smooth-icon.tc-icon { width: 32px; height: 32px; } }
/* the pointer beside the picked sign and the ▶ on a sign that opens a sub-menu: smooth triangles, not the pixel font's */
.gem.on::before {
content: ""; left: -24px; width: 14px; height: 16px; background: #f8e070; text-shadow: none;
clip-path: polygon(10% 4%, 96% 50%, 10% 96%, 2% 88%, 2% 12%);
filter: drop-shadow(1px 2px 0 #181018);
}
@media (prefers-reduced-motion: no-preference) { .gem.on::before { animation: cursorPulse 1s ease-in-out infinite; } }
@keyframes cursorPulse { 50% { opacity: 0.35; translate: 3px -50%; } }
.gem-arrow::before {
content: ""; display: block; width: 10px; height: 12px; background: #fff8d8;
clip-path: polygon(10% 4%, 96% 50%, 10% 96%, 2% 88%, 2% 12%);
}
.gem-arrow { text-shadow: none; filter: drop-shadow(1px 2px 0 #2a1408); }
/* the Stats app (js/statsdex.js): the Pokédex's banners and handheld, its numbers in seven-segment LCD digits */
.sdx-podium { right: 22px; width: 110px; height: 100%; justify-content: center; }
.sdx-spot { position: absolute; left: 50%; bottom: 0; width: 120px; height: 100%; translate: -50% 0; background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.55), transparent 62%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); opacity: 0.6; }
.sdx-pedestal { position: absolute; left: 50%; bottom: 0; width: 96px; height: 22px; translate: -50% 0; border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: linear-gradient(180deg, #ffffff, #c4ccd8 40%, #7c8698); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2); }
.sdx-podium-mon { position: relative; z-index: 1; width: 82px; height: 82px; margin-bottom: 14px; object-fit: contain; object-position: bottom; image-rendering: pixelated; }
.sdx-podium-empty { position: relative; z-index: 1; margin: 0 auto 26px; font: 2.6rem/1 var(--pixel-font); color: rgba(255, 255, 255, 0.4); }
.sdx-fan { right: 16px; bottom: 12px; align-items: flex-end; gap: 4px; }
.sdx-fan-card {
display: grid; place-items: center; width: 40px; height: 56px; margin-left: -18px; border: 3px solid #fff; border-radius: 6px;
background: var(--fan, #888); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); transform-origin: 50% 120%;
}
.sdx-fan-card .smooth-icon { width: 24px; height: 24px; }
.sdx-fan-card.type-fire { --fan: #f08030; rotate: -16deg; }
.sdx-fan-card.type-grass { --fan: #58b048; translate: 0 -6px; }
.sdx-fan-card.type-water { --fan: #4a88e0; rotate: 16deg; }
.sdx-fan-thing { display: grid; place-items: center; width: 40px; height: 40px; margin-left: 6px; }
.sdx-fan-thing img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.sdx-coin { right: 30px; bottom: 16px; perspective: 300px; }
.sdx-coin .smooth-icon { width: 76px; height: 76px; animation: sdxSpin 3.2s ease-in-out infinite; }
@keyframes sdxSpin { 0%, 40% { transform: rotateY(0); } 60%, 100% { transform: rotateY(360deg); } }
.sdx-champions {
background:
radial-gradient(circle, #fff 0.8px, transparent 1.4px) 8px 6px / 23px 19px,
radial-gradient(circle, rgba(255, 255, 255, 0.7) 0.6px, transparent 1.2px) 3px 12px / 37px 29px,
linear-gradient(180deg, var(--b2), var(--b1));
}
.sdx-champions .pdx-stripe { display: none; }
.sdx-champ-row .pdx-banner-mon { width: 64px; height: 64px; margin-left: -8px; }
.sdx-champ-row .pdx-banner-mon:nth-child(2) { width: 64px; height: 64px; }
.sdx-champ-row .pdx-banner-mon:last-child { width: 84px; height: 84px; z-index: 1; }
.sdx-head { margin: 4px 2px -2px; font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none; color: #ffe0e2; letter-spacing: 1px; text-transform: uppercase; }
.sdx-readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sdx-readouts.sdx-wide { grid-template-columns: 1fr; }
.sdx-readout {
display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 8px 9px;
border: 3px solid var(--shell-rim); border-radius: 8px; background: #b6d68e; color: #1f3a14; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.12);
}
.sdx-readout-label { display: flex; align-items: center; gap: 5px; font: 0.75rem/1.2 var(--pixel-font); font-synthesis-weight: none; text-transform: uppercase; }
.sdx-readout-label .smooth-icon { width: 16px; height: 16px; flex: none; }
.sdx-seg { display: flex; align-items: flex-end; align-self: flex-end; height: 34px; color: #1f3a14; }
.sdx-wide .sdx-seg { height: 46px; }
.seg-digit { height: 100%; width: auto; margin-left: 2px; }
.seg-digit path { fill: rgba(31, 58, 20, 0.1); }
.seg-digit path.on { fill: currentColor; }
.seg-comma { font: 700 1rem/1 monospace; margin: 0 -1px -2px 1px; }
.sdx-note { align-self: stretch; font-size: 0.75rem; line-height: 1.2; color: #3a5a2a; }
.sdx-stars { display: flex; gap: 1px; font-size: 0.75rem; color: rgba(31, 58, 20, 0.25); }
.sdx-stars .on { color: #b88a00; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
.sdx-types .sdx-readout.type-fire { background: #ecc39a; }
.sdx-types .sdx-readout.type-grass { background: #b6d68e; }
.sdx-types .sdx-readout.type-water { background: #a8c8e8; }
@media (max-width: 400px) { .sdx-seg { height: 28px; } }
/* runs as a battle nameplate's HP bar */
.sdx-hp { display: flex; flex-direction: column; gap: 6px; font-family: var(--pixel-font); font-synthesis-weight: none; }
.sdx-hp-top { display: flex; justify-content: space-between; font-size: 0.8rem; }
.sdx-hp-top b { font-weight: 400; }
.sdx-hp-bar { display: flex; align-items: center; gap: 6px; padding: 3px 5px 3px 4px; border-radius: 6px; background: #3a3a40; }
.sdx-hp-tag { font-size: 0.75rem; color: #f8c830; }
.sdx-hp-track { flex: 1; height: 10px; border-radius: 4px; overflow: hidden; background: #e05050; box-shadow: inset 0 0 0 2px #fff; }
.sdx-hp-fill { display: block; height: 100%; width: var(--to); background: linear-gradient(180deg, #78f088, #38c050); box-shadow: inset 0 0 0 2px #fff; }
.sdx-hp-fill.yellow { background: linear-gradient(180deg, #f8e070, #d8a820); }
.sdx-hp-fill.red { background: linear-gradient(180deg, #f8a070, #e06030); }
.sdx-device.powered .sdx-hp-fill { animation: sdxFill 0.9s cubic-bezier(0.3, 0.8, 0.3, 1) both; }
@keyframes sdxFill { from { width: 0; } }
.sdx-hp-num { align-self: flex-end; font-size: 0.75rem; white-space: pre; }
/* bosses: a badge slot each, a silhouette until beaten */
.sdx-bosses { display: flex; flex-direction: column; gap: 6px; }
.sdx-bosses-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 0.75rem/1.3 var(--pixel-font); font-synthesis-weight: none; }
.sdx-bosses-top b { font-weight: 400; }
.sdx-kills { font-size: 0.75rem; }
.sdx-boss-slots { display: flex; gap: 8px; flex-wrap: wrap; }
.sdx-boss {
display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 3px solid #1f3a14;
background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.35), rgba(31, 58, 20, 0.2));
}
.sdx-boss-mon { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; filter: brightness(0) opacity(0.35); }
.sdx-boss.got { border-color: #b88a00; background: radial-gradient(circle at 50% 35%, #fff8d0, #f2c040 70%, #a8640c); box-shadow: 0 0 0 2px #fff6c8, 0 2px 0 rgba(0, 0, 0, 0.25); }
.sdx-device.powered .sdx-boss.got { animation: sdxLight 0.5s steps(4) both; }
.sdx-device.powered .sdx-boss.got:nth-child(2) { animation-delay: 0.12s; }
.sdx-device.powered .sdx-boss.got:nth-child(3) { animation-delay: 0.24s; }
.sdx-device.powered .sdx-boss.got:nth-child(4) { animation-delay: 0.36s; }
@keyframes sdxLight { from { filter: brightness(0.2) saturate(0); } 60% { filter: brightness(1.6); } }
/* collection: a scan of each line */
.sdx-scan { display: flex; flex-direction: column; gap: 10px; }
.sdx-scan-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; font: 0.75rem/1.3 var(--pixel-font); font-synthesis-weight: none; }
.sdx-scan-row b { font-weight: 400; }
.sdx-scan-row .dex-bar { grid-column: 1 / -1; margin: 0; }
.sdx-scan-row.done { color: #6a4a00; }
/* champions: a PC Box and its summary */
.sdx-summary { display: flex; align-items: center; gap: 12px; min-height: 104px; }
.sdx-summary-pic { flex: none; display: grid; place-items: end center; width: 92px; height: 92px; border-radius: 8px; background: radial-gradient(ellipse at 50% 92%, rgba(31, 58, 20, 0.3) 0 30%, transparent 32%), #d6e8b8; border: 2px solid #1f3a14; }
.sdx-summary-mon { width: 84px; height: 84px; object-fit: contain; object-position: bottom; image-rendering: pixelated; }
.sdx-summary-info { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font-size: 0.82rem; }
.sdx-summary-name { font: 400 0.75rem/1.3 var(--pixel-font); font-synthesis-weight: none; }
.sdx-crown { color: #b88a00; }
.sdx-empty { margin: 0; font-size: 0.85rem; }
.sdx-box { border: 3px solid #2a3a7a; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #a8c8f0, #88a8e0); box-shadow: 0 0 0 3px var(--shell-rim); }
.sdx-box-title { padding: 6px; text-align: center; font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none; color: #fff; background: #3a58b0; text-shadow: 1px 1px 0 #1a2a6a; letter-spacing: 2px; }
.sdx-box-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 8px; }
.sdx-slot {
position: relative; aspect-ratio: 1; padding: 0; cursor: pointer;
border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 6px; background: rgba(255, 255, 255, 0.3);
}
.sdx-slot.empty { cursor: default; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); }
.sdx-slot.on { background: #ffe36b; border-color: #fff; box-shadow: 0 0 0 2px #e0a020; }
.sdx-slot-mon { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; image-rendering: pixelated; }
.sdx-slot-crown { position: absolute; top: -6px; right: -3px; font-size: 0.9rem; color: #f8c830; text-shadow: 0 1px 0 #6a4a00, 0 0 3px #fff; }
.sdx-slot.shiny::after { content: "✨"; position: absolute; left: 1px; top: -2px; font-size: 0.75rem; }
/* the Collection's cover and hello on the other device screens (js/device-boot.js): the select, the map, the lobbies */
.boot-cover, .seldev > .boot-cover { position: absolute; z-index: 70; border-radius: 0 0 0 0; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.boot-splash { z-index: 69; }
.booted .pdx-light { animation: bootBlink 0.16s steps(1) 5 both; }
.booted .pdx-light.yellow { animation-delay: 0.08s; }
.booted .pdx-light.green { animation-delay: 0.16s; }
.booted .pdx-lens { animation: bootLens 0.9s ease-out both; }
@keyframes bootBlink { 50% { filter: brightness(1.8); box-shadow: 0 0 8px 2px currentColor; } }
@keyframes bootLens { 30% { box-shadow: 0 0 0 2px var(--shell-rim), 0 0 16px 6px #7fd8ff; filter: brightness(1.4); } }
@media (prefers-reduced-motion: reduce) { .booted .pdx-light, .booted .pdx-lens { animation: none; } }
/* the Trainer Card's NAME: a tap turns it into a box (nameField() in js/trainercard.js) */
.tc-name-btn { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: right; }
.tc-name-btn > span:first-child { overflow-wrap: anywhere; }
.tc-name-edit { flex: none; padding: 4px 8px 3px; border-radius: 999px; font-size: 0.75rem; color: #fff; background: var(--tc3); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.tc-name-btn:hover .tc-name-edit, .tc-name-btn:focus-visible .tc-name-edit { filter: brightness(1.2); }
.tc-name-btn:focus-visible { outline: 2px solid var(--tc3); outline-offset: 2px; }
.tc-name-form { display: flex; gap: 4px; justify-content: flex-end; }
.tc-name-input { min-width: 0; width: 100%; max-width: 12em; padding: 4px 6px; border: 2px solid #1f3a14; border-radius: 4px; background: #c8e0a0; color: #1f3a14; font: inherit; text-transform: uppercase; }
.tc-name-input:focus { outline: none; box-shadow: 0 0 0 2px var(--tc3); }
.tc-name-ok { flex: none; padding: 4px 8px; border: 0; border-radius: 4px; font: inherit; font-size: 0.8em; color: #fff; background: var(--tc3); cursor: pointer; }
/* the Satchel app (js/satcheldex.js): its key items and materials are glyphs, a silhouette until found */
.sdx-glyph { line-height: 1; }
.sdx-glyph.unseen, .bdx-screen.unseen .sdx-glyph:not(.pdx-ghost) { filter: brightness(0) opacity(0.5); }
.sdx-shadow { filter: brightness(0) opacity(0.55); }
.sdx-count { background: #2c5a1c; }
.sdx-steps .sdx-done { color: #2c8a3a; }
.sdx-steps .sdx-later { color: #8a8a8a; }
/* the Quests app (js/questlog.js): the Clearing's quest board, cork, with one big note on what to do next over a list */
.cdev-win.cdev-quests {
padding: 12px 10px 18px; color: #2a1c10; font-size: 0.75rem; line-height: 1.6;
background:
radial-gradient(circle at 20% 30%, rgba(90, 50, 20, 0.18) 0 1px, transparent 1.5px) 0 0 / 9px 11px,
radial-gradient(circle at 70% 60%, rgba(255, 230, 190, 0.22) 0 1px, transparent 1.5px) 0 0 / 13px 7px,
linear-gradient(160deg, #d8a86a, #c08a50 60%, #b07a44);
box-shadow: inset 0 0 0 6px #7a4a24, inset 0 0 0 8px #5a341a, inset 0 8px 18px rgba(60, 30, 10, 0.35);
}
.qlog p { margin: 0; }
.qlog-top { display: grid; justify-items: center; gap: 4px; margin: 2px 0 12px; }
.qlog-sub { font-size: 0.75rem; color: #fff8e8; text-shadow: 0 1px 0 rgba(60, 30, 10, 0.6); }
.qlog-gems { display: flex; gap: 8px; }
.qlog-gems > span {
width: 14px; height: 20px; clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%);
background: linear-gradient(160deg, #b8b0a8, #6a625a);
}
.qlog-gems > span.lit { background: linear-gradient(160deg, #fff, var(--glow) 45%, color-mix(in srgb, var(--glow) 60%, #000)); filter: drop-shadow(0 0 4px var(--glow)); }
.qlog-pin { position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9a8a, #d8302a 60%, #8a1a14); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.35); }
.qlog-next {
position: relative; display: grid; gap: 8px; margin: 0 4px; padding: 14px 12px 12px; border-radius: 3px; rotate: -0.5deg;
background: #fff8e8; border-top: 6px solid var(--glow);
box-shadow: 0 2px 0 rgba(60, 30, 10, 0.3), 0 8px 16px rgba(60, 30, 10, 0.3);
}
.qlog-kicker { font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: #3a6ad0; text-align: center; }
.qlog-next:has(.qlog-do.ready) .qlog-kicker { color: #c07a00; }
.qlog-who { display: flex; align-items: center; gap: 8px; color: #7a5a3a; }
.qlog-mon { flex: none; width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.qlog-mon.unseen { filter: brightness(0) opacity(0.45); }
.qlog-do { display: grid; gap: 8px; }
.qlog-step { font-size: 0.875rem; line-height: 1.7; color: #2a1c10; }
.qlog-bar { position: relative; height: 20px; border-radius: 10px; background: #e8dcc8; box-shadow: inset 0 1px 2px rgba(60, 30, 10, 0.35); overflow: hidden; }
.qlog-fill { position: absolute; inset: 0 auto 0 0; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--glow) 55%, #fff), var(--glow)); }
.qlog-bar-n { position: relative; display: block; line-height: 20px; text-align: center; font-size: 0.75rem; color: #2a1c10; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
.qlog-row { display: grid; gap: 2px; padding: 6px 8px; border-radius: 4px; background: rgba(216, 168, 106, 0.18); }
.qlog-row small { font-size: 0.75rem; letter-spacing: 0.06em; color: #9a6a3a; }
.qlog-do.ready .qlog-row:last-child { background: #fff0b0; box-shadow: inset 0 0 0 2px #f8c830; }
.qlog-do.ready .qlog-row:last-child small { color: #c07a00; }
.qlog-label { margin: 16px 6px 6px; font-size: 0.75rem; font-weight: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #fff8e8; text-shadow: 0 1px 0 rgba(60, 30, 10, 0.6); }
.qlog-list { display: grid; gap: 6px; padding: 0 4px; }
.qlog-ask { display: grid; gap: 6px; padding: 8px 10px 10px; border-radius: 3px; background: #fff8e8; border-left: 5px solid var(--glow); box-shadow: 0 2px 0 rgba(60, 30, 10, 0.25); }
.qlog-note { font-size: 0.75rem; line-height: 1.6; font-style: italic; color: #7a5a3a; }
.qlog-item { border-radius: 3px; background: #fff8e8; border-left: 5px solid var(--glow); box-shadow: 0 2px 0 rgba(60, 30, 10, 0.25); }
.qlog-item.quiet { background: #ece2d0; border-left-color: #9a8a78; }
.qlog-head {
display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 8px; width: 100%; padding: 4px 8px;
border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.qlog-head:focus-visible { outline: 2px solid #3a6ad0; outline-offset: -2px; }
.qlog-name { display: grid; min-width: 0; }
.qlog-name strong { font-size: 0.75rem; color: #3a2414; overflow-wrap: anywhere; }
.qlog-name small { font-size: 0.75rem; color: #8a6a4a; }
.qlog-chip { padding: 3px 7px 2px; border-radius: 999px; font-size: 0.75rem; white-space: nowrap; color: #fff; background: #3a6ad0; }
.qlog-item.ready .qlog-chip { background: #e89a10; }
.qlog-item.lit .qlog-chip { background: #3a9a4a; }
.qlog-item.quiet .qlog-chip { background: #9a8a78; }
.qlog-caret { color: #9a6a3a; transition: rotate 0.15s; }
.qlog-item.open .qlog-caret { rotate: 180deg; }
.qlog-more { display: none; gap: 8px; padding: 2px 10px 10px; }
.qlog-item.open .qlog-more { display: grid; }
.qlog-story { color: #7a5a3a; }
.qlog-steps { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.qlog-steps li { display: grid; grid-template-columns: 1.2em 1fr; gap: 4px; }
.qlog-steps li b { font-weight: normal; }
.qlog-steps li.done { color: #3a7a44; }
.qlog-steps li.later { color: #9a8a78; }
/* a quest step's choice as it's handed in (askPick() in js/run.js): John's festival */
.quest-pick { width: min(92vw, 380px); }
.quest-pick-list.dev-screen { display: grid; gap: 8px; margin: 10px 4px 4px; padding: 8px; }
.quest-pick-opt {
display: grid; grid-template-columns: 38px 1fr; column-gap: 10px; row-gap: 3px; align-items: center;
padding: 9px 10px; border: 2px solid #1f3a14; border-radius: 12px; background: #e4f0cc; color: #1f3a14;
box-shadow: 0 3px 0 rgba(31, 58, 20, 0.45); font: inherit; font-size: 0.75rem; line-height: 1.45; text-align: left; cursor: pointer;
-webkit-tap-highlight-color: transparent; transition: transform 0.08s, background 0.12s;
}
.quest-pick-opt:hover, .quest-pick-opt:focus-visible { background: #f2f8e4; outline: none; box-shadow: 0 0 0 2px #1f3a14, 0 3px 0 rgba(31, 58, 20, 0.45); }
.quest-pick-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(31, 58, 20, 0.45); }
.quest-pick-opt:focus:not(:focus-visible) { outline: none; }
.quest-pick-icon {
grid-row: 1 / span 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
background: #b6d68e; box-shadow: inset 0 0 0 2px #1f3a14; font-size: 1.2rem; line-height: 1;
}
.quest-pick-opt strong { font-size: 0.875rem; }
.quest-pick-text { color: #2a4a1c; }
.quest-pick-opt small { color: #3a5a28; font-size: 0.75rem; }
.quest-pick-opt small::before { content: '✦ '; }
.qlog-tip { margin: 14px 8px 0; padding: 8px 10px; border-radius: 4px; text-align: center; color: #fff8e8; background: rgba(60, 30, 10, 0.55); }
@media (prefers-reduced-motion: reduce) { .qlog-caret { transition: none; } }
/* ---------- what the run sets out with, packed at the Berry Booth (renderBring() in js/select.js, 2026-10-23): one
read-only line ---------- */
.prep-bring { margin: 8px 0 0; padding: 6px 8px; border: 2px dashed rgba(31, 58, 20, 0.45); border-radius: 6px; font-size: 0.75rem; line-height: 1.4; }
.prep-bring[hidden] { display: none; }
/* ---------- the "added you" pop-up (js/trainer-notice.js): a TRAINER LINK card in the adder's card colour, a Poké Ball
that drops, wobbles and opens on their buddy, a name plate, the games' text box, and A / B keys ---------- */
.tn-scrim {
position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px;
background: radial-gradient(circle at 50% 42%, rgba(30, 50, 110, 0.55), rgba(4, 6, 18, 0.82));
animation: tnFade 0.25s ease-out;
}
.tn-scrim.out { animation: tnFade 0.25s ease-in reverse forwards; }
@keyframes tnFade { from { opacity: 0; } }
.tn-card {
--t1: #5ad08a; --t2: #1e6a48; --t3: #0e3a26;
position: relative; width: min(360px, 100%); padding: 0 0 14px; border-radius: 20px; overflow: hidden; color: #fff;
background: linear-gradient(170deg, var(--t1), var(--t2) 62%, var(--t3));
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), inset 0 0 0 6px var(--t3), 0 0 0 3px var(--t3), 0 0 40px color-mix(in srgb, var(--t1) 55%, transparent), 0 24px 50px rgba(0, 0, 0, 0.55);
animation: tnDrop 0.42s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.tn-card.leave { animation: tnLeave 0.24s ease-in forwards; }
.tn-card.calm, .tn-card.calm * { animation: none !important; transition: none !important; }
@keyframes tnDrop { from { translate: 0 -60px; scale: 0.86; opacity: 0; } }
@keyframes tnLeave { to { translate: 0 40px; scale: 0.92; opacity: 0; } }
.tn-card[data-tier="bronze"] { --t1: #f0b070; --t2: #a0521c; --t3: #4a2008; }
.tn-card[data-tier="silver"] { --t1: #dde6f2; --t2: #6a7890; --t3: #2a3244; }
.tn-card[data-tier="gold"] { --t1: #ffe07a; --t2: #c88a10; --t3: #5a3a02; }
.tn-card[data-tier="violet"] { --t1: #cfa2ff; --t2: #6a34b8; --t3: #2a0e5a; }
.tn-head {
display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; background: linear-gradient(180deg, rgba(10, 16, 40, 0.75), rgba(10, 16, 40, 0.55));
border-bottom: 3px solid rgba(255, 255, 255, 0.7); font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none; letter-spacing: 0.06em;
}
.tn-title { flex: 1; font-weight: 400; text-shadow: 0 0 8px #7ae0ff; }
.tn-count { color: #bfe8ff; }
/* a signal: a dot and three arcs lighting up in turn, like a link coming in */
.tn-signal svg { display: block; width: 24px; height: 20px; overflow: visible; }
.tn-signal circle { fill: #7ae0ff; }
.tn-signal path { fill: none; stroke: #7ae0ff; stroke-width: 2.6; stroke-linecap: round; animation: tnPing 1.2s infinite; }
.tn-signal path:nth-of-type(2) { animation-delay: 0.2s; }
.tn-signal path:nth-of-type(3) { animation-delay: 0.4s; }
@keyframes tnPing { 0%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
.tn-stage {
position: relative; height: 176px; margin: 12px 14px 0; border-radius: 14px; overflow: hidden;
background: radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.95), color-mix(in srgb, var(--t1) 80%, #fff) 30%, var(--t2) 78%);
box-shadow: inset 0 0 0 3px var(--t3), inset 0 -18px 30px rgba(0, 0, 0, 0.18);
}
.tn-rays { position: absolute; left: 50%; top: 62%; width: 320px; height: 320px; margin: -160px 0 0 -160px; opacity: 0; transition: opacity 0.4s; animation: tnSpin 14s linear infinite; }
.tn-card.open .tn-rays { opacity: 1; }
@keyframes tnSpin { to { rotate: 1turn; } }
.tn-ground { position: absolute; left: 50%; bottom: 22px; width: 96px; height: 18px; margin-left: -48px; border-radius: 50%; background: rgba(0, 0, 0, 0.22); }
.tn-mon { position: absolute; left: 50%; bottom: 28px; width: 112px; height: 112px; margin-left: -56px; object-fit: contain; scale: 0; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.2)); }
.tn-mon.unseen { filter: brightness(0) opacity(0.6); }
.tn-card.open .tn-mon { animation: tnPop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) forwards, tnBob 2.4s 0.6s ease-in-out infinite; }
.tn-card.calm.open .tn-mon { scale: 1; }
@keyframes tnPop { from { scale: 0; translate: 0 30px; } to { scale: 1; translate: 0 0; } }
@keyframes tnBob { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 -4px; scale: 1; } }
/* the ball: falls in, bounces, wobbles twice, then splits open in a flash */
.tn-ball { position: absolute; left: 50%; bottom: 30px; width: 40px; height: 40px; margin-left: -20px; animation: tnFall 0.5s cubic-bezier(0.5, 0, 0.8, 0.4), tnBounce 0.3s 0.5s ease-out, tnWobble 0.5s 0.8s ease-in-out; }
.tn-ball i { position: absolute; left: 0; width: 40px; height: 20px; box-sizing: border-box; border: 3px solid #1c1430; }
.tn-ball-top { top: 0; border-radius: 20px 20px 0 0; background: linear-gradient(160deg, #ff8a8a, #e8303a 55%, #a01622); border-bottom-width: 2px !important; transform-origin: 6px 18px; }
.tn-ball-bot { bottom: 0; border-radius: 0 0 20px 20px; background: linear-gradient(180deg, #ffffff, #d8dce8); border-top-width: 2px !important; }
.tn-ball .tn-ball-btn { left: 13px; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border-width: 3px; z-index: 1; }
.tn-card.open .tn-ball-top { animation: tnLid 0.3s ease-out forwards; }
.tn-card.open .tn-ball { animation: tnBallGo 0.45s 0.15s ease-in forwards; }
.tn-card.calm .tn-ball { display: none; }
@keyframes tnFall { from { translate: 0 -170px; } }
@keyframes tnBounce { 50% { translate: 0 -14px; } }
@keyframes tnWobble { 25% { rotate: -18deg; } 75% { rotate: 14deg; } }
@keyframes tnLid { to { rotate: -70deg; translate: -4px -6px; } }
@keyframes tnBallGo { to { opacity: 0; scale: 0.6; } }
.tn-flash { position: absolute; left: 50%; bottom: 50px; width: 20px; height: 20px; margin: 0 0 0 -10px; border-radius: 50%; background: #fff; opacity: 0; }
.tn-card.open:not(.calm) .tn-flash { animation: tnFlash 0.5s ease-out; }
@keyframes tnFlash { 0% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 14; } }
.tn-sparks i { position: absolute; left: 50%; bottom: 80px; width: 8px; height: 8px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; }
.tn-card.open .tn-sparks i { animation: tnSpark 0.9s 0.2s ease-out forwards; }
.tn-sparks i:nth-child(1) { --dx: -70px; --dy: -40px; }
.tn-sparks i:nth-child(2) { --dx: 66px; --dy: -52px; animation-delay: 0.28s; }
.tn-sparks i:nth-child(3) { --dx: -52px; --dy: 22px; animation-delay: 0.34s; }
.tn-sparks i:nth-child(4) { --dx: 58px; --dy: 18px; animation-delay: 0.24s; }
.tn-sparks i:nth-child(5) { --dx: -12px; --dy: -70px; animation-delay: 0.4s; }
.tn-sparks i:nth-child(6) { --dx: 22px; --dy: -64px; animation-delay: 0.3s; }
@keyframes tnSpark { 0% { opacity: 1; translate: 0 0; scale: 0.4; } 60% { opacity: 1; scale: 1.4; } 100% { opacity: 0; translate: var(--dx) var(--dy); scale: 0.6; } }
.tn-plate { position: relative; display: grid; justify-items: center; gap: 6px; margin: -16px 30px 0; padding: 10px 12px 9px; border-radius: 12px; background: #fff; color: #1c1430; box-shadow: 0 0 0 3px var(--t3), 0 4px 0 var(--t3); text-align: center; }
.tn-tier { padding: 3px 8px 2px; border-radius: 6px; background: var(--t2); color: #fff; font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none; }
.tn-name { font: 400 1.25rem/1.1 var(--pixel-font); font-synthesis-weight: none; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.tn-chips { display: flex; gap: 12px; font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none; color: #4a4460; }
.tn-stamp {
position: absolute; right: -14px; top: -14px; padding: 6px 8px 5px; border: 3px solid #d8203a; border-radius: 8px; background: #fff4f0; color: #d8203a;
font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none; rotate: 12deg; animation: tnStamp 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes tnStamp { from { scale: 2.4; opacity: 0; rotate: -10deg; } }
/* the games' text box: white, a double rim, the ▼ blinking once the line is out */
.tn-box {
position: relative; min-height: 64px; margin: 14px 14px 0; padding: 12px 34px 12px 14px; border-radius: 10px; background: #fbfbff; color: #22243a;
box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #5a6aa0, 0 0 0 3px #2a3260;
}
.tn-text { margin: 0; font: 0.8rem/1.75 var(--pixel-font); font-synthesis-weight: none; }
.tn-more { position: absolute; right: 14px; bottom: 9px; color: #d8203a; font-size: 0.75rem; opacity: 0; }
.tn-box.done .tn-more { opacity: 1; animation: tnBlink 0.9s steps(2) infinite; }
@keyframes tnBlink { 50% { opacity: 0; } }
.tn-keys { display: flex; gap: 10px; margin: 12px 14px 0; transition: opacity 0.2s; }
.tn-keys[inert] { opacity: 0.45; }
.tn-key {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px 9px; border: 3px solid #1c1430; border-radius: 12px; cursor: pointer;
font: 0.75rem/1 var(--pixel-font); font-synthesis-weight: none; color: #fff; box-shadow: 0 4px 0 #1c1430;
}
.tn-key:active { translate: 0 3px; box-shadow: 0 1px 0 #1c1430; }
.tn-key:focus-visible { outline: 3px solid #ffe36b; outline-offset: 2px; }
.tn-a { background: linear-gradient(180deg, #ff6a6a, #d0283a); }
.tn-b { background: linear-gradient(180deg, #8a90a8, #4a5068); }
.tn-glyph { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: #1c1430; }
.tn-card.linked .tn-stage { box-shadow: inset 0 0 0 3px var(--t3), inset 0 0 40px #fff; }
/* the welcome (TRAINER NETWORK): your code on the plate, spaced to read out */
.tn-welcome .tn-name { letter-spacing: 0.12em; user-select: all; }
.trn-code { flex-wrap: wrap; }
.trn-help { margin-left: auto; padding: 6px 10px 5px; }
/* A champion's star climbs with the best Trainer Level won (js/data/difficulty.js's starClass()): gold at 5, then ruby,
emerald, sapphire, amethyst, and a rainbow-rimmed star at 10 (still: no repaint a frame). The span tints the ⭐ whether it's the emoji or its smooth icon. */
.star-lv5, .star-lv6, .star-lv7, .star-lv8, .star-lv9, .star-lv10 { display: inline-block; }
.star-lv6 { filter: hue-rotate(-50deg) saturate(1.8); }
.star-lv7 { filter: hue-rotate(80deg) saturate(1.4); }
.star-lv8 { filter: hue-rotate(170deg) saturate(1.6); }
.star-lv9 { filter: hue-rotate(235deg) saturate(1.5); }
.star-lv10 { filter: hue-rotate(300deg) saturate(1.4) drop-shadow(1px 0 0 #ff5a5a) drop-shadow(-1px 0 0 #5ac8ff) drop-shadow(0 1px 0 #6ee86e) drop-shadow(0 -1px 0 #ffd84a); }