/* ============================================
Pokémon Quiz Hub — Fire Red/Leaf Green Theme v6
GBA-era UI language with parchment, HP bars, and pixel borders
============================================ */
/* ---- Fonts ---- */
/* Press Start 2P, self-hosted (SIL OFL 1.1 — license at assets/fonts/OFL.txt).
No remote font CDN is contacted; the typeface ships in the repo. */
@font-face {
font-family: 'Press Start 2P';
src: url('/assets/fonts/PressStart2P-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root {
/* Parchment / paper palette */
--parchment: #f8f0d8;
--parchment-dark: #e8d8b0;
--parchment-shadow: #d4c088;
--paper-light: #fdf6e3;
/* Earthy GBA tones */
--gba-brown: #5c4033;
--gba-brown-dark: #3d2817;
--gba-brown-light: #8b6f47;
--gba-green: #4a8a3a;
--gba-green-dark: #2d5f1f;
--gba-green-light: #7cb342;
--gba-cream: #f4e4bc;
--gba-stone: #c8b888;
/* Accents */
--fr-red: #c53030;
--fr-red-dark: #9b2222;
--fr-red-light: #e84545;
--lg-green: #3a9c3a;
--lg-green-dark: #1a6b1a;
--gold: #d4a017;
--gold-light: #f0c040;
/* UI */
--text: #2a1a0a;
--text-light: #5a4a2a;
--text-white: #f8f0d8;
--shadow: rgba(60, 40, 20, 0.3);
--shadow-dark: rgba(40, 25, 10, 0.5);
--border-thick: 4px;
/* HP bar colors */
--hp-green: #4ade80;
--hp-yellow: #fbbf24;
--hp-red: #ef4444;
/* Type colors */
--type-normal:#909990; --type-fire:#e8783c; --type-water:#4a90d9;
--type-electric:#e8c820; --type-grass:#5cb84a; --type-ice:#6ec8d8;
--type-fighting:#c84040; --type-poison:#9c3c9c; --type-ground:#d8a850;
--type-flying:#8898e8; --type-psychic:#e84878; --type-bug:#988c1c;
--type-rock:#a89058; --type-ghost:#6850a8; --type-dragon:#6c48c8;
--type-fairy:#e090b8; --type-steel:#98a0b0; --type-dark:#5c4838;
/* Layout */
--ad-bar-height: 90px;
--ad-bar-height-mobile: 60px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
background: var(--gba-green-dark);
color: var(--text);
min-height: 100vh;
min-height: 100dvh; /* iOS/Safari dynamic viewport */
overflow-x: hidden;
line-height: 1.5;
}
/* ---- Background layers ---- */
#bg-canvas {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 0;
}
/* ---- Main layout with ad bar ---- */
#app-wrapper {
position: relative; z-index: 1;
min-height: 100vh;
min-height: 100dvh; /* iOS/Safari dynamic viewport */
padding-bottom: var(--ad-bar-height);
display: flex; flex-direction: column;
}
@media (max-width: 600px) {
#app-wrapper { padding-bottom: var(--ad-bar-height-mobile); }
}
/* ---- Ad bar ---- */
#ad-bar {
position: fixed; bottom: 0; left: 0; width: 100%;
height: var(--ad-bar-height);
background: var(--gba-brown-dark);
border-top: 4px solid var(--gba-brown);
display: flex; align-items: center; justify-content: center;
z-index: 200;
box-shadow: 0 -4px 12px var(--shadow);
}
@media (max-width: 600px) {
#ad-bar { height: var(--ad-bar-height-mobile); }
}
#ad-bar .ad-content {
width: 100%; max-width: 728px; height: 90px;
display: flex; align-items: center; justify-content: center;
background: var(--gba-brown);
border: 2px dashed var(--gba-brown-light);
border-radius: 8px; margin: 4px;
color: var(--gba-cream); font-size: .8rem; text-align: center;
}
@media (max-width: 600px) {
#ad-bar .ad-content { height: 52px; }
}
#ad-bar.ad-live .ad-content {
background: transparent;
border: none;
margin: 0;
overflow: hidden;
}
#ad-bar.ad-live .ad-content .adsbygoogle {
display: block;
width: 100%;
height: 100%;
}
/* ---- Screens ---- */
.screen {
display: none; flex-direction: column; align-items: center;
min-height: calc(100vh - var(--ad-bar-height));
min-height: calc(100dvh - var(--ad-bar-height)); /* iOS/Safari */
padding: 1rem 1rem 1.5rem; position: relative; z-index: 1;
}
@media (max-width: 600px) {
.screen { min-height: calc(100vh - var(--ad-bar-height-mobile)); min-height: calc(100dvh - var(--ad-bar-height-mobile)); }
}
.screen.active { display: flex; }
/* ---- GBA Dialog Box ---- */
.dialog-box {
background: var(--parchment);
border: var(--border-thick) solid var(--gba-brown);
border-radius: 16px;
padding: 1rem 1.5rem;
box-shadow: 0 4px 0 var(--gba-brown-dark), 0 6px 12px var(--shadow);
position: relative;
}
.dialog-box::before {
content: ""; position: absolute; inset: 4px;
border: 2px solid var(--gba-brown-light);
border-radius: 12px; pointer-events: none;
}
/* ---- Titles ---- */
.title-pixel {
font-family: 'Press Start 2P', monospace;
font-size: clamp(1.2rem, 4vw, 2.2rem);
text-align: center; line-height: 1.4;
color: var(--fr-red-dark);
text-shadow: 2px 2px 0 #fff6d8, 4px 4px 0 rgba(83,56,33,.2);
margin-bottom: .4rem; letter-spacing: 1px;
}
.subtitle {
font-family: system-ui, -apple-system, sans-serif;
font-size: .95rem; color: var(--gba-brown); text-align: center;
margin-bottom: .8rem; font-weight: 600; line-height: 1.35;
}
.section-label {
font-family: system-ui, -apple-system, sans-serif;
font-size: .75rem; font-weight: 800; color: var(--gba-brown-light);
text-transform: uppercase; letter-spacing: .08em;
margin-top: .8rem; margin-bottom: .35rem; text-align: center;
}
/* ---- GBA Buttons ---- */
.btn-gba {
font-family: 'Press Start 2P', monospace; font-size: .72rem;
background: linear-gradient(180deg, var(--fr-red-light), var(--fr-red-dark));
color: var(--text-white); border: 4px solid var(--gba-brown-dark);
border-radius: 12px; padding: .65rem 1.4rem; cursor: pointer;
box-shadow: 0 4px 0 var(--gba-brown-dark);
transition: transform .09s ease, box-shadow .09s ease, filter .1s;
text-transform: uppercase; letter-spacing: .5px; min-height: 48px;
display: inline-flex; align-items: center; justify-content: center;
}
.btn-gba:hover:not(:disabled) { filter: brightness(1.1); }
.btn-gba:active:not(:disabled) { transform: scale(0.96) translateY(2px); box-shadow: 0 1px 0 var(--gba-brown-dark); }
.btn-gba:disabled { opacity: .45; cursor: not-allowed; box-shadow: 0 2px 0 var(--gba-brown-dark); filter: grayscale(0.2); }
.btn-gba-green {
background: linear-gradient(180deg, var(--gba-green-light), var(--gba-green-dark));
}
.btn-gba-blue {
background: linear-gradient(180deg, #5ba0e0, #24548b);
}
.btn-ghost {
background: var(--paper-light); border: 3px solid var(--gba-brown);
color: var(--gba-brown-dark); padding: .45rem .9rem;
border-radius: 8px; font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .15s;
min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.btn-ghost:hover { background: var(--gba-cream); border-color: var(--gba-brown-dark); }
.btn-sm { font-size: .68rem; padding: .35rem .6rem; min-height: 44px; }
/* ---- Game type grid (multi-select) ---- */
.gametype-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: .45rem; max-width: 540px; width: 100%; margin-bottom: .2rem;
}
.gametype-card {
background: var(--parchment-dark); border: 3px solid var(--gba-stone);
border-radius: 10px; padding: .5rem .3rem; text-align: center;
cursor: pointer; transition: all .15s; position: relative;
box-shadow: inset 0 2px 3px rgba(61,40,23,.14); min-height: 80px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gametype-card:hover { border-color: var(--gba-brown); transform: translateY(-2px); }
.gametype-card.selected {
border-color: var(--gold); background: var(--gold-light); color: var(--gba-brown-dark);
box-shadow: inset 0 2px 0 rgba(122,92,26,.35), 0 2px 0 var(--gba-brown-dark);
}
.gametype-card.selected::after {
content: "✓"; position: absolute; top: 2px; right: 4px;
font-size: .75rem; color: var(--gba-brown-dark); font-weight: 900;
}
.gametype-icon { font-size: 1.2rem; display: block; margin-bottom: .15rem; }
.gametype-card h2 { font-size: .68rem; margin-bottom: .05rem; color: var(--text); font-weight: 800; }
.gametype-card p { font-size: .6rem; color: var(--text-light); line-height: 1.2; }
.select-all-btn { color: var(--fr-red-dark); cursor: pointer; font-weight: 700; }
/* ---- Gen grid ---- */
.gen-grid { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; }
.gen-btn, .round-btn, .diff-btn, .visdiff-btn {
background: var(--parchment-dark); border: 3px solid var(--gba-stone);
color: var(--text); border-radius: 8px; font-size: .82rem; font-weight: 700;
cursor: pointer; transition: all .15s; padding: .35rem .6rem; min-width: 44px; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: inset 0 2px 3px rgba(61,40,23,.14);
}
.gen-btn:hover, .round-btn:hover, .diff-btn:hover, .visdiff-btn:hover { border-color: var(--gba-brown); }
.gen-btn.selected, .round-btn.selected, .diff-btn.selected, .visdiff-btn.selected {
border-color: var(--gold); background: var(--gold-light); color: var(--gba-brown-dark);
box-shadow: inset 0 2px 0 rgba(122,92,26,.35), 0 2px 0 var(--gba-brown-dark);
}
.gen-btn.gen-all { font-size: .68rem; }
.gen-info { color: var(--gba-brown-light); font-size: .78rem; margin-top: .2rem; text-align: center; font-weight: 600; }
.round-buttons { display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap; }
/* ---- Mode select ---- */
.mode-select { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.mode-card {
background: var(--parchment-dark); border: 3px solid var(--gba-stone);
border-radius: 10px; padding: .5rem .8rem; text-align: center;
cursor: pointer; transition: all .15s; min-width: 95px;
box-shadow: inset 0 2px 3px rgba(61,40,23,.14);
}
.mode-card:hover { border-color: var(--gba-brown); transform: translateY(-2px); }
.mode-card.selected { border-color: var(--gold); background: var(--gold-light); box-shadow: inset 0 2px 0 rgba(122,92,26,.35); }
.mode-icon { font-size: 1.1rem; display: block; margin-bottom: .1rem; }
.mode-card h2 { font-size: .7rem; color: var(--text); }
.mode-card p { font-size: .55rem; color: var(--text-light); }
/* ---- HP Bar (progress/timer/streak) ---- */
.hp-bar {
width: 100%; height: 12px; background: var(--gba-brown-dark);
border: 2px solid var(--gba-brown); border-radius: 6px; overflow: hidden;
position: relative;
}
.hp-bar-fill {
height: 100%; border-radius: 4px; transition: width .3s ease;
background: linear-gradient(180deg, var(--hp-green), #36c468);
}
.hp-bar-fill.yellow { background: linear-gradient(180deg, var(--hp-yellow), #e8a810); }
.hp-bar-fill.red { background: linear-gradient(180deg, var(--hp-red), #c83030); }
/* ---- Game header ---- */
.game-header {
width: 100%; max-width: 520px; display: flex; justify-content: space-between;
align-items: center; margin-bottom: .4rem; gap: .3rem; flex-wrap: wrap;
}
.info-badge {
background: var(--parchment); border: 2px solid var(--gba-brown);
border-radius: 8px; padding: .25rem .6rem;
font-size: .8rem; font-weight: 700; color: var(--text);
box-shadow: 0 2px 0 var(--gba-brown-dark);
}
.info-badge .lbl { font-size: .6rem; color: var(--gba-brown-light); font-weight: 500; margin-right: .15rem; }
/* Combo / streak badge */
.combo-badge {
background: linear-gradient(180deg, #f97316, #c53030);
border: 2px solid var(--gba-brown-dark); border-radius: 8px;
padding: .2rem .5rem; font-size: .75rem; font-weight: 800;
color: #fff; display: none; align-items: center; gap: .2rem;
box-shadow: 0 2px 0 var(--gba-brown-dark);
}
.combo-badge.show { display: flex; animation: combo-pulse .5s ease; }
@keyframes combo-pulse { 0%{transform:scale(.5);opacity:0} 60%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }
.combo-mult { font-family: 'Press Start 2P', monospace; font-size: .65rem; color: var(--gold-light); }
/* ---- Duel timer bar ---- */
.duel-timer-bar { width: 100%; max-width: 420px; margin-bottom: .3rem; position: relative; }
.duel-timer-text { position: absolute; right: 0; top: -16px; font-size: .65rem; font-weight: 700; color: var(--gba-brown-light); }
/* ---- Duel live scores ---- */
.duel-live-scores { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; max-width: 420px; margin-bottom: .3rem; }
.dls-player {
background: var(--parchment); border: 2px solid var(--gba-stone);
border-radius: 6px; padding: .15rem .35rem;
font-size: .65rem; display: flex; align-items: center; gap: .2rem;
}
.dls-dot { width: 8px; height: 8px; border-radius: 50%; }
.dls-score { font-weight: 800; color: var(--fr-red); }
.dls-player.answered { opacity: .5; }
.dls-player.answered .dls-name::after { content: " ✓"; color: var(--gba-green); }
/* ---- Quiz stage ---- */
.quiz-stage {
width: 100%; max-width: 600px; text-align: center;
margin-bottom: .5rem; min-height: 100px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.quiz-question {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 1.05rem; font-weight: 700;
color: var(--gba-brown-dark); margin-bottom: .5rem; line-height: 1.45; text-align: center;
}
/* Battle arena stage */
.arena-stage {
position: relative; width: 200px; height: 180px; margin: 0 auto .4rem;
display: flex; align-items: flex-end; justify-content: center;
}
.arena-platform {
position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
width: 140px; height: 24px; border-radius: 50%;
background: radial-gradient(ellipse, rgba(0,0,0,0.3), transparent);
}
.arena-spotlight {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
width: 0; height: 0;
border-left: 80px solid transparent; border-right: 80px solid transparent;
border-bottom: 200px solid rgba(255,255,200,0.08);
pointer-events: none;
}
.silhouette {
width: 150px; height: 150px; object-fit: contain; image-rendering: pixelated;
position: relative; z-index: 2;
filter: brightness(0) saturate(100%) invert(1) hue-rotate(180deg) brightness(0) ;
animation: sil-idle 3s ease-in-out infinite;
}
/* Better silhouette: just black */
.silhouette { filter: brightness(0); }
.silhouette.vis-rotate { transform: rotate(180deg); animation: sil-rot 3s ease-in-out infinite; }
.silhouette.vis-mirror { transform: scaleX(-1); animation: sil-mir 3s ease-in-out infinite; }
.silhouette.vis-blur { filter: brightness(0) blur(2px); }
.silhouette.vis-chaos { filter: brightness(0) blur(1px); animation: sil-chaos 3s ease-in-out infinite; }
.silhouette.revealed { opacity: 0; transform: scale(.7)!important; animation: none!important; filter: brightness(0)!important; }
@keyframes sil-idle { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes sil-rot { 0%,100%{transform:rotate(170deg) translateY(0)} 50%{transform:rotate(190deg) translateY(-5px)} }
@keyframes sil-mir { 0%,100%{transform:scaleX(-1) translateY(0)} 50%{transform:scaleX(-1) translateY(-5px)} }
@keyframes sil-chaos { 0%{transform:rotate(15deg) scaleX(.9)} 25%{transform:rotate(-20deg) scaleX(1.1)} 50%{transform:rotate(180deg) scale(.95)} 75%{transform:rotate(-5deg) scaleX(-1)} 100%{transform:rotate(15deg) scaleX(.9)} }
.reveal-img {
width: 150px; height: 150px; object-fit: contain; image-rendering: pixelated;
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%) scale(.7);
opacity: 0; z-index: 3; transition: all .5s ease;
}
.reveal-img.show { opacity: 1; transform: translateX(-50%) scale(1); animation: reveal-pop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes reveal-pop { 0%{transform:translateX(-50%) scale(.2);opacity:0} 60%{transform:translateX(-50%) scale(1.15);opacity:1} 100%{transform:translateX(-50%) scale(1);opacity:1} }
/* ============================================
CATCH ANIMATION — Full multi-phase sequence
============================================ */
#catch-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 150; display: none;
}
#catch-overlay.show { display: block; }
/* Pokéball element during catch */
.catch-ball-el {
position: absolute; width: 48px; height: 48px;
transform-origin: center center;
}
.catch-ball-el svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
/* Phase 1: Ball arcs to target (0 → 0.4s) */
.catch-ball-el.flying {
animation: catch-fly 0.4s cubic-bezier(.3,.6,.7,1) forwards;
}
@keyframes catch-fly {
0% { transform: scale(0.3) rotate(0deg); opacity: 0; }
20% { opacity: 1; }
100% { transform: scale(1) rotate(720deg); }
}
/* Phase 2: Ball opens (flash at contact) */
.catch-flash {
position: absolute; width: 100px; height: 100px;
border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,200,0.5) 40%, transparent 70%);
animation: catch-flash-anim 0.3s ease-out forwards;
transform: scale(0);
}
@keyframes catch-flash-anim {
0% { transform: scale(0); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.8; }
100% { transform: scale(2.5); opacity: 0; }
}
/* Pokémon shrinking into ball */
.catch-pokemon-shrink {
position: absolute; width: 48px; height: 48px;
image-rendering: pixelated;
animation: catch-shrink 0.35s ease-in forwards;
transform-origin: center;
}
@keyframes catch-shrink {
0% { transform: scale(1); opacity: 1; filter: brightness(1); }
30% { transform: scale(1.1); filter: brightness(2) saturate(0); }
50% { transform: scale(0.7); opacity: 0.8; filter: brightness(3); }
80% { transform: scale(0.2); opacity: 0.3; filter: brightness(5); }
100% { transform: scale(0.05); opacity: 0; }
}
/* Phase 3: Ball wobbles (like the games — 3 shakes) */
.catch-ball-el.wobbling {
animation: catch-wobble 1.2s ease-in-out forwards;
}
@keyframes catch-wobble {
0% { transform: rotate(0deg) translateY(0); }
8% { transform: rotate(0deg) translateY(0); }
/* Shake 1: right */
12% { transform: rotate(25deg); }
18% { transform: rotate(-20deg); }
24% { transform: rotate(10deg); }
30% { transform: rotate(0deg) translateY(0); }
33% { transform: rotate(0deg) translateY(0); }
/* Pause */
36% { transform: rotate(0deg) translateY(0); }
/* Shake 2: right */
40% { transform: rotate(25deg); }
46% { transform: rotate(-20deg); }
52% { transform: rotate(10deg); }
58% { transform: rotate(0deg) translateY(0); }
/* Pause */
61% { transform: rotate(0deg) translateY(0); }
/* Shake 3: right */
65% { transform: rotate(25deg); }
71% { transform: rotate(-20deg); }
77% { transform: rotate(10deg); }
83% { transform: rotate(0deg) translateY(0); }
/* Still pause — will it break free? */
88% { transform: rotate(0deg) translateY(0) scale(1); }
93% { transform: rotate(0deg) translateY(-3px) scale(1); }
/* CLICK! */
96% { transform: rotate(0deg) translateY(0) scale(0.85); }
100% { transform: rotate(0deg) translateY(0) scale(1); }
}
/* Phase 4: Star burst on successful catch */
.catch-star {
position: absolute; width: 16px; height: 16px;
pointer-events: none;
animation: catch-star-fly 0.6s ease-out forwards;
}
@keyframes catch-star-fly {
0% { transform: translate(0,0) scale(0) rotate(0deg); opacity: 1; }
50% { transform: translate(var(--tx), var(--ty)) scale(1.2) rotate(180deg); opacity: 1; }
100% { transform: translate(calc(var(--tx) * 1.5), calc(var(--ty) * 1.5)) scale(0) rotate(360deg); opacity: 0; }
}
/* Catch success text */
.catch-success-text {
position: absolute; font-family: 'Press Start 2P', monospace;
font-size: .7rem; color: #fbbf24; text-shadow: 2px 2px 0 #000, 0 0 10px rgba(251,191,36,0.8);
white-space: nowrap; pointer-events: none;
animation: catch-text-pop 1s ease-out forwards;
}
@keyframes catch-text-pop {
0% { transform: translateX(-50%) translateY(0) scale(0); opacity: 0; }
30% { transform: translateX(-50%) translateY(-20px) scale(1.2); opacity: 1; }
70% { transform: translateX(-50%) translateY(-30px) scale(1); opacity: 1; }
100% { transform: translateX(-50%) translateY(-50px) scale(0.9); opacity: 0; }
}
/* Ball poof after catch */
.catch-ball-el.caught {
animation: catch-poof 0.4s ease-in forwards;
}
@keyframes catch-poof {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.8; }
100% { transform: scale(0); opacity: 0; }
}
/* ---- Quiz text cards ---- */
.quiz-text-card {
background: var(--parchment); border: 4px solid var(--gba-brown);
border-radius: 12px; padding: .8rem 1rem; margin-bottom: .4rem;
max-width: 360px; text-align: center; position: relative;
box-shadow: 0 3px 0 var(--gba-brown-dark);
}
.quiz-text-card::before { content: ""; position: absolute; inset: 3px; border: 2px solid var(--gba-stone); border-radius: 8px; pointer-events: none; }
.quiz-text-card .qtc-label { font-size: .65rem; color: var(--gba-brown-light); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.quiz-text-card .qtc-name { font-size: 1.2rem; font-weight: 800; color: var(--text); margin-bottom: .2rem; }
.quiz-text-card .qtc-flavor { font-size: .8rem; color: var(--gba-brown); font-style: italic; }
.qtc-type-badge { display: inline-block; padding: .2rem .7rem; border-radius: 16px; font-size: .7rem; font-weight: 700; color: #fff; margin-top: .2rem; }
/* Type badges */
.type-reveal { display: flex; gap: .3rem; justify-content: center; min-height: 24px; opacity: 0; transition: opacity .4s; flex-wrap: wrap; }
.type-reveal.show { opacity: 1; }
.type-badge { padding: .15rem .6rem; border-radius: 14px; font-size: .6rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .03em; border: 1px solid rgba(0,0,0,.2); }
/* ---- Answer area ---- */
.answer-area { width: 100%; max-width: 420px; text-align: center; }
#text-input-area { display: flex; gap: .4rem; margin-bottom: .4rem; }
#guess-input {
flex: 1; background: var(--parchment); border: 3px solid var(--gba-brown);
color: var(--text); padding: .55rem .8rem; border-radius: 10px;
font-size: .95rem; outline: none; transition: border-color .15s;
box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
}
#guess-input:focus { border-color: var(--fr-red); }
#guess-input:disabled { opacity: .5; }
/* Choice grid */
.choice-grid { display: grid; gap: .4rem; margin-bottom: .4rem; }
.choice-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.choice-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.choice-btn {
background: var(--parchment); border: 3px solid var(--gba-stone);
color: var(--text); padding: .55rem .4rem; border-radius: 10px;
font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .1s;
display: flex; align-items: center; justify-content: center; gap: .3rem; min-height: 38px;
box-shadow: 0 2px 0 var(--gba-brown-dark);
}
.choice-btn:hover:not(.locked) { border-color: var(--fr-red); background: var(--gba-cream); transform: translateY(-1px); }
.choice-btn:active:not(.locked) { transform: translateY(1px); box-shadow: none; }
.choice-btn.correct { background: #c8f0c0; border-color: var(--gba-green); color: var(--gba-green-dark); }
.choice-btn.wrong { background: #f0c8c8; border-color: var(--fr-red); color: var(--fr-red-dark); }
.choice-btn.locked { cursor: default; }
.choice-btn img { width: 30px; height: 30px; image-rendering: pixelated; }
/* Hint button */
.hint-row { display: flex; gap: .4rem; justify-content: center; margin-bottom: .4rem; }
.hint-btn {
background: var(--gba-cream); border: 2px solid var(--gba-brown-light);
border-radius: 8px; padding: .3rem .6rem; font-size: .7rem;
font-weight: 700; color: var(--gba-brown); cursor: pointer; transition: all .1s;
}
.hint-btn:hover:not(:disabled) { border-color: var(--fr-red); color: var(--fr-red); }
.hint-btn:disabled { opacity: .3; cursor: not-allowed; }
.hint-count { font-size: .6rem; background: var(--fr-red); color: #fff; padding: 0 .3rem; border-radius: 8px; }
/* Result feedback */
.result-feedback { text-align: center; font-size: .95rem; font-weight: 800; min-height: 24px; opacity: 0; transition: opacity .3s; }
.result-feedback.show { opacity: 1; }
.result-feedback.correct { color: var(--gba-green-dark); }
.result-feedback.wrong { color: var(--fr-red-dark); }
/* Duel waiting */
.duel-waiting { text-align: center; color: var(--gba-brown-light); font-size: .8rem; padding: .3rem; display: flex; align-items: center; justify-content: center; gap: .4rem; }
.waiting-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gba-green); animation: wait-pulse 1s ease infinite; }
@keyframes wait-pulse { 0%,100%{opacity:.3;transform:scale(1)} 50%{opacity:1;transform:scale(1.4)} }
/* Screen shake */
.shake { animation: screen-shake .5s ease; }
@keyframes screen-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px) rotate(-.5deg)} 40%{transform:translateX(6px) rotate(.5deg)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
/* ---- Leaderboard ---- */
.lb-block { min-width: 0; }
.leaderboard-tabs { display: flex; gap: .3rem; }
.lb-tab {
display: inline-flex; align-items: center; gap: .35rem;
background: var(--parchment); border: 2px solid var(--gba-stone); border-bottom: none;
border-radius: 9px 9px 0 0; color: var(--gba-brown);
padding: .42rem .75rem .38rem; min-height: 44px; font-size: .78rem; font-weight: 800; cursor: pointer;
transition: all .15s;
}
.lb-tab .ico { width: 15px; height: 15px; }
.lb-tab.selected {
border-color: var(--gba-brown); background: var(--paper-light); color: var(--fr-red-dark);
}
.lb-panel {
width: 100%; max-width: none; min-height: 132px;
background: var(--paper-light); border: 3px solid var(--gba-brown); border-radius: 0 12px 12px 12px;
padding: .35rem .55rem; font-size: .8rem;
}
/* Rows come from game.js renderLeaderboard() */
.lb-row {
display: flex; align-items: center; gap: .45rem;
padding: .34rem .2rem; border-bottom: 1px dashed rgba(154,132,85,.45);
font-size: .76rem;
}
.lb-row:last-child { border-bottom: none; }
.lb-row.top { background: rgba(240,192,64,.1); }
.lb-rank { flex: none; min-width: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--gba-brown-light); }
.lb-rank.gold { color: #805b00; }
.lb-rank.silver { color: #5f5f5f; }
.lb-rank.bronze { color: #874416; }
.lb-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 -2px 2px rgba(0,0,0,.25); }
.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.lb-game {
flex: none; font-size: .56rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
color: var(--text-light); background: var(--gba-cream);
border: 1px solid var(--gba-stone); border-radius: 4px; padding: .05rem .28rem;
}
.lb-score { flex: none; font-weight: 800; color: var(--fr-red-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-empty-msg { text-align: center; color: var(--text-light); font-size: .78rem; padding: 1.6rem .6rem; line-height: 1.6; }
/* ---- Duel entry ---- */
.duel-entry-buttons { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: .6rem 0; }
.duel-join-form, .duel-name-form { display: flex; flex-direction: column; gap: .4rem; max-width: 260px; width: 100%; align-items: center; }
.duel-join-form input, .duel-name-form input { background: var(--parchment); border: 3px solid var(--gba-brown); color: var(--text); padding: .5rem .7rem; border-radius: 8px; font-size: .95rem; outline: none; text-align: center; width: 100%; box-shadow: inset 0 2px 4px rgba(0,0,0,.06); }
.duel-join-form input:focus, .duel-name-form input:focus { border-color: var(--fr-red); }
#join-room-code { font-size: 1.3rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.duel-error { color: var(--fr-red); font-size: .8rem; margin-top: .3rem; text-align: center; }
/* ---- Duel lobby ---- */
.lobby-title { font-family: 'Press Start 2P', monospace; font-size: 1rem; margin-bottom: .3rem; color: var(--fr-red); }
.room-code-display { display: flex; flex-direction: column; align-items: center; gap: .2rem; margin: .3rem 0; }
.room-code-label { color: var(--gba-brown-light); font-size: .7rem; }
.share-url-row { display: flex; gap: .3rem; align-items: center; width: 100%; max-width: 320px; }
.share-url { flex: 1; background: var(--parchment); border: 2px solid var(--gba-stone); color: var(--fr-red); padding: .3rem .5rem; border-radius: 6px; font-size: .65rem; outline: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-code-subtext { color: var(--gba-brown-light); font-size: .7rem; }
.room-code { font-size: 1rem; font-weight: 800; letter-spacing: .12em; color: var(--fr-red-dark); }
.lobby-hint { color: var(--gba-brown-light); font-size: .7rem; margin-bottom: .2rem; }
.lobby-players { display: flex; flex-direction: column; gap: .2rem; max-width: 280px; width: 100%; margin-bottom: .2rem; }
.lobby-player-row { display: flex; align-items: center; gap: .4rem; background: var(--parchment); border: 2px solid var(--gba-stone); border-radius: 8px; padding: .35rem .6rem; }
.lobby-player-row.host { border-color: var(--fr-red); }
.lp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.lp-name { flex: 1; font-weight: 700; font-size: .8rem; }
.lp-tag { font-size: .55rem; padding: .1rem .3rem; border-radius: 4px; background: var(--gba-cream); color: var(--fr-red-dark); border: 1px solid var(--gba-stone); }
.lobby-gen-btn { background: var(--parchment-dark); border: 3px solid var(--gba-stone); color: var(--text); border-radius: 8px; font-size: .7rem; font-weight: 700; cursor: pointer; transition: all .15s; padding: .3rem .5rem; min-width: 36px; box-shadow: inset 0 2px 3px rgba(61,40,23,.14); }
.lobby-gen-btn:hover { border-color: var(--gba-brown); }
.lobby-gen-btn.selected { border-color: var(--gold); background: var(--gold-light); color: var(--gba-brown-dark); box-shadow: inset 0 2px 0 rgba(122,92,26,.35); }
.lobby-gen-btn.gen-all { font-size: .6rem; }
.lobby-round-btn { background: var(--parchment-dark); border: 3px solid var(--gba-stone); color: var(--text); border-radius: 8px; font-size: .75rem; font-weight: 700; cursor: pointer; transition: all .15s; padding: .3rem .6rem; box-shadow: inset 0 2px 3px rgba(61,40,23,.14); }
.lobby-round-btn:hover { border-color: var(--gba-brown); }
.lobby-round-btn.selected { border-color: var(--gold); background: var(--gold-light); color: var(--gba-brown-dark); box-shadow: inset 0 2px 0 rgba(122,92,26,.35); }
.lobby-mode-btn { background: var(--parchment-dark); border: 3px solid var(--gba-stone); color: var(--text); border-radius: 8px; font-size: .75rem; font-weight: 700; cursor: pointer; padding: .3rem .6rem; box-shadow: inset 0 2px 3px rgba(61,40,23,.14); }
.lobby-mode-btn.selected { border-color: var(--gold); background: var(--gold-light); box-shadow: inset 0 2px 0 rgba(122,92,26,.35); }
.lobby-diff-btn { background: var(--parchment-dark); border: 2px solid var(--gba-stone); color: var(--text); border-radius: 6px; font-size: .7rem; font-weight: 700; cursor: pointer; padding: .25rem .5rem; box-shadow: inset 0 2px 3px rgba(61,40,23,.14); }
.lobby-diff-btn.selected { border-color: var(--gold); background: var(--gold-light); box-shadow: inset 0 2px 0 rgba(122,92,26,.35); }
/* ---- Duel round results ---- */
.duel-result-content { text-align: center; max-width: 400px; width: 100%; }
#duel-result-detail { margin-bottom: .6rem; }
.duel-result-name { font-size: 1.1rem; font-weight: 800; color: var(--fr-red); }
.duel-round-results { display: flex; flex-direction: column; gap: .25rem; }
.drr-row { display: flex; align-items: center; gap: .35rem; background: var(--parchment); border: 2px solid var(--gba-stone); border-radius: 8px; padding: .35rem .6rem; }
.drr-row.correct { border-color: var(--gba-green); }
.drr-icon { font-size: .9rem; }
.drr-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.drr-name { flex: 1; font-weight: 700; text-align: left; font-size: .8rem; }
.drr-speed { font-size: .65rem; color: var(--gba-brown-light); }
.drr-points { font-weight: 800; font-size: .9rem; }
.drr-points.positive { color: var(--gba-green-dark); }
.drr-points.zero { color: var(--gba-brown-light); }
/* ---- Results screen ---- */
.results-content { text-align: center; max-width: 440px; width: 100%; }
#results-title { font-family: 'Press Start 2P', monospace; font-size: 1.1rem; color: var(--fr-red); margin-bottom: .2rem; }
.winner-banner { font-size: 1rem; font-weight: 800; color: var(--gold); margin-bottom: .2rem; min-height: 1.4em; }
.results-score { font-size: 2.2rem; font-weight: 800; margin-bottom: .2rem; }
.results-score #final-score { color: var(--fr-red); }
.results-divider { color: var(--gba-brown-light); margin: 0 .15rem; }
#results-message { color: var(--gba-brown); font-size: .9rem; margin-bottom: .3rem; }
/* Trainer rank / XP bar — see HOME BROADSHEET v10 at end of file */
.name-input-area { margin-bottom: .4rem; }
.name-input-area label { font-size: .75rem; color: var(--gba-brown-light); display: block; margin-bottom: .15rem; }
.name-input-row { display: flex; gap: .3rem; justify-content: center; }
.name-input-row input { background: var(--parchment); border: 2px solid var(--gba-brown); color: var(--text); padding: .35rem .7rem; border-radius: 8px; font-size: .9rem; outline: none; text-align: center; }
.name-input-row input:focus { border-color: var(--fr-red); }
.name-input-row input:disabled { opacity: .5; }
.results-scoreboard { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .4rem; }
.scoreboard-row { display: flex; align-items: center; gap: .4rem; background: var(--parchment); border: 2px solid var(--gba-stone); border-radius: 8px; padding: .35rem .6rem; }
.scoreboard-row.winner { border-color: var(--gold); background: #fef5d8; box-shadow: 0 0 10px rgba(212,160,23,.2); }
.sb-rank { font-weight: 800; width: 1.3rem; text-align: center; }
.sb-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sb-name { flex: 1; font-weight: 700; text-align: left; font-size: .8rem; }
.sb-score { font-weight: 800; color: var(--fr-red); }
.results-breakdown { background: var(--parchment); border: 3px solid var(--gba-brown); border-radius: 10px; padding: .5rem; margin-bottom: .5rem; max-height: 160px; overflow-y: auto; text-align: left; display: none; position: relative; }
.results-breakdown.show { display: block; }
.results-breakdown::before { content: ""; position: absolute; inset: 2px; border: 1px solid var(--gba-stone); border-radius: 7px; pointer-events: none; }
.breakdown-item { display: flex; align-items: center; gap: .35rem; padding: .2rem 0; border-bottom: 1px solid var(--gba-stone); font-size: .75rem; }
.breakdown-item:last-child { border-bottom: none; }
.breakdown-item img { width: 28px; height: 28px; image-rendering: pixelated; }
.breakdown-item .bd-name { flex: 1; font-weight: 700; }
.breakdown-item .bd-result { font-weight: 800; }
.breakdown-item .bd-result.correct { color: var(--gba-green-dark); }
.breakdown-item .bd-result.wrong { color: var(--fr-red); }
.breakdown-player-tag { font-size: .55rem; padding: .05rem .25rem; border-radius: 4px; color: #fff; }
.results-buttons { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
/* ---- Countdown ---- */
.turn-content { text-align: center; }
.turn-pokeball { width: 60px; height: 60px; margin: 0 auto .6rem; background: linear-gradient(to bottom,#dc2626 0%,#dc2626 48%,#1a1a1a 48%,#1a1a1a 52%,#fff 52%,#fff 100%); border: 4px solid #000; border-radius: 50%; position: relative; animation: pokeball-bounce .8s ease-in-out infinite; }
.turn-pokeball::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; background: #fff; border: 4px solid #000; border-radius: 50%; transform: translate(-50%,-50%); }
@keyframes pokeball-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.turn-label { font-size: .9rem; color: var(--gba-brown); }
.turn-countdown { font-size: 4rem; font-weight: 900; color: var(--fr-red); animation: countdown-pop 1s ease; }
@keyframes countdown-pop { 0%{transform:scale(2);opacity:0} 50%{transform:scale(1);opacity:1} 100%{transform:scale(.8);opacity:.5} }
/* ---- Particle canvas (confetti) ---- */
#particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }
/* ---- Pokédex grid ---- */
.pokedex-toggle { font-size: .7rem; color: var(--fr-red); cursor: pointer; text-decoration: underline; margin: .2rem 0; }
.pokedex-grid { display: none; max-width: 360px; width: 100%; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: .2rem; background: var(--parchment); border: 3px solid var(--gba-brown); border-radius: 10px; padding: .5rem; margin: .3rem 0; }
.pokedex-grid.show { display: grid; }
.pokedex-cell { width: 50px; height: 50px; border-radius: 8px; border: 2px solid var(--gba-stone); background: var(--gba-cream); display: flex; align-items: center; justify-content: center; font-size: .5rem; }
.pokedex-cell.seen { background: var(--paper-light); }
.pokedex-cell.caught { border-color: var(--gba-green); background: #d8f0d0; }
.pokedex-cell.caught img { width: 36px; height: 36px; image-rendering: pixelated; }
.pokedex-cell.unseen { background: var(--gba-brown-dark); border-color: var(--gba-brown); }
.pokedex-cell.unseen .pd-num { color: var(--gba-stone); }
/* ---- Responsive ---- */
@media (max-width: 520px) {
.gametype-grid { grid-template-columns: repeat(3, 1fr); }
.gametype-card { padding: .4rem .2rem; }
.gametype-card h2 { font-size: .55rem; }
.gametype-card p { font-size: .5rem; }
.arena-stage, .silhouette, .reveal-img { width: 130px; height: 130px; }
.silhouette, .reveal-img { width: 120px; height: 120px; }
.choice-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.choice-grid.cols-3 { grid-template-columns: 1fr 1fr; }
#text-input-area { flex-direction: column; }
.mode-card { min-width: 80px; padding: .4rem .5rem; }
.gen-btn { min-width: 34px; padding: .3rem .4rem; }
.results-score { font-size: 1.8rem; }
.quiz-question { font-size: .55rem; }
}
/* HERO GAMES — consolidated in HOME BROADSHEET v10 at end of file */
/* ============================================
SCREEN TRANSITIONS
============================================ */
#screen-transition {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 300; opacity: 0;
background: radial-gradient(circle at center, transparent 0%, #000 100%);
transition: opacity .3s ease;
}
#screen-transition.active {
opacity: 1; pointer-events: all;
animation: transition-flash .5s ease forwards;
}
@keyframes transition-flash {
0% { opacity: 0; }
40% { opacity: 1; }
100% { opacity: 0; pointer-events: none; }
}
/* ============================================
GAME TYPE INDICATOR
============================================ */
.game-type-indicator {
font-size: .6rem; color: var(--gba-brown-light); font-weight: 700;
text-transform: uppercase; letter-spacing: .05em;
margin-bottom: .2rem; opacity: .7; text-align: center;
}
/* ============================================
POKÉDEX GRID
============================================ */
.pokedex-view {
max-width: 380px; width: 100%; background: var(--parchment);
border: 4px solid var(--gba-brown); border-radius: 12px;
padding: .6rem; position: relative;
box-shadow: 0 3px 0 var(--gba-brown-dark);
}
.pokedex-view::before { content: ""; position: absolute; inset: 3px; border: 2px solid var(--gba-stone); border-radius: 8px; pointer-events: none; }
.pokedex-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: .4rem; font-size: .75rem;
}
.pokedex-header .dex-count { font-weight: 800; color: var(--fr-red); }
.pokedex-cells {
display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
gap: .2rem; max-height: 280px; overflow-y: auto;
}
.pokedex-cell {
width: 46px; height: 46px; border-radius: 8px;
border: 2px solid var(--gba-stone); background: var(--gba-cream);
display: flex; align-items: center; justify-content: center;
position: relative; transition: all .15s;
}
.pokedex-cell.caught { border-color: var(--gba-green); background: #d8f0d0; }
.pokedex-cell.caught img { width: 36px; height: 36px; image-rendering: pixelated; }
.pokedex-cell.unseen { background: var(--gba-brown-dark); border-color: var(--gba-brown); }
.pokedex-cell.unseen .pd-num { font-size: .5rem; color: var(--gba-stone); font-weight: 700; }
.pokedex-cell .pd-check { position: absolute; bottom: 1px; right: 2px; font-size: .6rem; color: var(--gba-green); }
/* ============================================
POWER-UP INDICATOR
============================================ */
.powerup-banner {
position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
background: linear-gradient(135deg, var(--gold), #b8860b);
color: var(--gba-brown-dark); font-weight: 800; font-size: .8rem;
padding: .5rem 1.2rem; border-radius: 20px; z-index: 250;
box-shadow: 0 4px 12px rgba(0,0,0,.3); display: none;
animation: powerup-pop .5s ease;
}
.powerup-banner.show { display: block; }
@keyframes powerup-pop { 0%{transform:translateX(-50%) scale(0)} 60%{transform:translateX(-50%) scale(1.2)} 100%{transform:translateX(-50%) scale(1)} }
/* ============================================
RANK SUB TEXT
============================================ */
.rank-sub { font-size: .6rem; color: var(--gba-brown-light); text-align: center; margin-top: .15rem; }
.btn-back-home, #pokedle-back, #party-back, #pokedex-back, #duel-entry-back {
position: relative;
align-self: flex-start;
margin-left: max(0px, calc((100% - 680px) / 2));
margin-bottom: .4rem;
z-index: 10;
}
/* HERO GAMES (duel variant) — consolidated in HOME BROADSHEET v10 at end of file */
/* ============================================
SOLO TIMER BAR
============================================ */
.solo-timer-bar {
height: 10px; background: var(--gba-brown-dark);
border: 2px solid var(--gba-brown); border-radius: 6px; overflow: hidden;
position: relative;
}
.solo-timer-bar .hp-bar-fill { transition: width .1s linear; }
/* ============================================
WORDLE-STYLE FEEDBACK
============================================ */
.wordle-feedback {
display: flex; gap: .2rem; justify-content: center; flex-wrap: wrap;
margin: .3rem 0; min-height: 0; max-height: 0; overflow: hidden;
transition: max-height .3s ease;
}
.wordle-feedback.show { max-height: 60px; }
.wf-letter {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 32px; border-radius: 6px; font-size: .9rem; font-weight: 800;
text-transform: uppercase; color: #fff; border: 2px solid rgba(0,0,0,.2);
animation: wf-flip .3s ease;
}
.wf-letter.correct { background: var(--gba-green); }
.wf-letter.partial { background: var(--gold); }
.wf-letter.absent { background: var(--gba-brown-dark); }
@keyframes wf-flip { 0%{transform:rotateX(90deg)} 100%{transform:rotateX(0)} }
/* ============================================
GRASS ABOVE AD BAR
============================================ */
#ad-bar::before {
content: ""; position: absolute; top: -8px; left: 0; width: 100%; height: 12px;
background: repeating-linear-gradient(
90deg, transparent 0, transparent 8px,
rgba(74,138,58,.6) 8px, rgba(74,138,58,.6) 10px,
transparent 10px, transparent 14px,
rgba(90,160,70,.5) 14px, rgba(90,160,70,.5) 16px
);
pointer-events: none; z-index: 1;
}
/* (Daily Challenge banner retired — the Today's Paper section carries dailies.
.streak-fire lives in HOME BROADSHEET v10.) */
/* ============================================
TYPE BURST ANIMATION
============================================ */
#type-burst-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 140; opacity: 0;
}
#type-burst-overlay.show { opacity: 1; }
.type-burst-particle {
position: absolute; width: 8px; height: 8px; border-radius: 50%;
animation: tb-burst .8s ease-out forwards;
}
@keyframes tb-burst {
0% { transform: translate(0,0) scale(1); opacity: 1; }
100% { transform: translate(var(--tx),var(--ty)) scale(0); opacity: 0; }
}
.type-burst-flash {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 300px; height: 300px; border-radius: 50%;
opacity: 0; animation: tb-flash .5s ease-out forwards;
}
@keyframes tb-flash {
0% { opacity: 0.3; transform: translate(-50%,-50%) scale(0.3); }
50% { opacity: 0.15; }
100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); }
}
/* ============================================
BACKGROUND CATCH POPUP
============================================ */
@keyframes catch-popup {
0% { transform: translateX(-50%) translateY(10px) scale(0.5); opacity: 0; }
20% { transform: translateX(-50%) translateY(-15px) scale(1.1); opacity: 1; }
80% { transform: translateX(-50%) translateY(-25px) scale(1); opacity: 1; }
100% { transform: translateX(-50%) translateY(-40px) scale(0.9); opacity: 0; }
}
/* Make bg-canvas clickable but not block UI */
#bg-canvas { z-index: 0; }
#app-wrapper { z-index: 1; }
/* Catch escape animation */
@keyframes catch-escape-pop {
0% { transform: scale(0.1); opacity: 0; filter: brightness(2); }
50% { transform: scale(1.2); opacity: 1; filter: brightness(1.5); }
100% { transform: scale(1); opacity: 0.7; filter: brightness(1); }
}
/* ============================================
ACCESSIBILITY & RESPONSIVE POLISH
============================================ */
.sr-only {
position:absolute!important; width:1px!important; height:1px!important;
padding:0!important; margin:-1px!important; overflow:hidden!important;
clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}
button.hero-card { appearance:none; width:100%; color:var(--text-white); font:inherit; }
.hero-title { display:block; }
.home-tools { position:absolute; top:.9rem; right:clamp(.85rem,3vw,2.5rem); z-index:5; }
.local-play-note {
background:rgba(248,240,216,.92); border:2px solid var(--gba-brown); border-radius:8px;
padding:.25rem .55rem; color:var(--gba-brown); font-size:.62rem; font-weight:700; text-align:center;
}
.select-all-btn { appearance:none; background:transparent; border:0; font:inherit; text-decoration:underline; padding:.2rem; }
:where(button,input,[role="button"]):focus-visible {
outline:3px solid #fff; box-shadow:0 0 0 6px var(--fr-red)!important; z-index:5;
}
.results-summary-line { font-size:.72rem; color:var(--gba-brown); margin:.25rem 0; }
.breakdown-item .bd-name { display:flex; flex:1; flex-direction:column; gap:.12rem; }
.breakdown-item .bd-name small { color:var(--text-light); font-size:.58rem; font-weight:500; }
@media (max-width: 520px) {
.screen { padding-left:.65rem; padding-right:.65rem; }
.gametype-grid { grid-template-columns:repeat(2,1fr); }
.gametype-card, .mode-card, .gen-btn, .round-btn, .diff-btn, .visdiff-btn { min-height:44px; }
input { font-size:16px!important; }
#ad-bar { padding-bottom:env(safe-area-inset-bottom); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration:.01ms!important; animation-iteration-count:1!important;
scroll-behavior:auto!important; transition-duration:.01ms!important;
}
#particle-canvas, #type-burst-overlay, #screen-transition { display:none!important; }
.hero-card:hover, .mode-card:hover, .gametype-card:hover { transform:none; }
}
.duel-error-toast { position:fixed; top:1rem; left:50%; transform:translateX(-50%); z-index:500; background:var(--parchment); border:3px solid var(--fr-red); border-radius:8px; padding:.65rem 1rem; box-shadow:0 4px 12px var(--shadow-dark); }
.setup-error { min-height:1.1rem; max-width:520px; margin:.45rem auto .1rem; color:var(--fr-red-dark); font-size:.68rem; font-weight:700; text-align:center; }
/* ============================================
GBA LEGIBILITY + LARGE-SCREEN UPGRADE v8
Stable opaque UI surfaces over the animated Route 101 canvas.
============================================ */
:root {
--parchment:#fff7df; --paper-light:#fffdf2; --gba-cream:#f7e7b5;
--gba-brown:#533821; --gba-brown-dark:#2e1d12; --gba-brown-light:#735631;
--gba-stone:#9a8455; --text:#21170d; --text-light:#4f3a25;
--fr-red:#a92529; --fr-red-dark:#7e1820; --fr-red-light:#ca3030;
--gba-green:#39752d; --gba-green-dark:#214e25; --gba-green-light:#4f8739;
}
html { font-size:17px; }
body { line-height:1.45; }
.screen { width:100%; padding:1.35rem clamp(.85rem,3vw,2.5rem) calc(var(--ad-bar-height) + 1.8rem); }
.screen:not(#start-screen):not(#game-screen):not(#duel-countdown-screen) > :not(.btn-back-home) { position:relative; z-index:1; }
.screen:not(#start-screen):not(#game-screen):not(#duel-countdown-screen):not(#duel-lobby-screen)::before {
content:""; position:absolute; z-index:0; top:.65rem; bottom:calc(var(--ad-bar-height) + 0.8rem); left:50%; transform:translateX(-50%);
width:min(900px,calc(100% - 1.1rem)); background:rgba(255,247,223,.965);
border:4px solid var(--gba-brown); border-radius:14px;
box-shadow:0 0 0 3px var(--gba-stone),0 7px 0 var(--gba-brown-dark),0 16px 36px rgba(32,22,10,.3);
}
@media (max-width: 600px) {
.screen { padding-bottom: calc(var(--ad-bar-height-mobile) + 1.8rem); }
.screen:not(#start-screen):not(#game-screen):not(#duel-countdown-screen):not(#duel-lobby-screen)::before {
bottom: calc(var(--ad-bar-height-mobile) + 0.8rem);
}
}
/* #duel-lobby-screen is exempt above: .lobby-panel IS its window — a second
generic window behind the panel showed as mismatched cream-on-cream edges. */
#start-screen { padding-top:1.1rem; padding-bottom:calc(2.5rem + var(--ad-bar-height, 0px)); }
#start-screen { padding-bottom:calc(2rem + var(--ad-bar-height-mobile, 0px)); }
#start-screen > * { z-index:1; }
.title-pixel { font-size:clamp(1.45rem,3vw,2.35rem); color:var(--fr-red-dark); background:none; -webkit-text-fill-color:currentColor; text-shadow:2px 2px 0 #fff6d8,4px 4px 0 rgba(83,56,33,.3); }
/* The hub wordmark sits directly on the animated town canvas — it needs a full
light outline to stay legible over the night-sky band, not a single shadow. */
#start-screen .title-pixel {
color: var(--fr-red);
text-shadow:
-2px -2px 0 #fff6d8, 2px -2px 0 #fff6d8,
-2px 2px 0 #fff6d8, 2px 2px 0 #fff6d8,
0 5px 0 rgba(83,56,33,.35);
}
/* Labels are PLAIN TEXT on their screen's GBA window (.screen::before / lobby
panel). The old per-label cream pills (rgba(255,247,223,.96) boxes) were a
near-match-but-different third surface stacked inside the window — the
"background that is not the same as the window". Windows carry readability. */
.section-label { font-size:.8rem; color:var(--gba-brown); }
.gen-info,.game-type-indicator { font-size:.78rem; opacity:1; }
.btn-gba { background:linear-gradient(#ca3030,#8d2027); font-size:.78rem; min-height:48px; }
.btn-gba-green { background:linear-gradient(#39752d,#214e25); }
.btn-gba-blue { background:linear-gradient(#326caa,#24548b); }
.btn-ghost { background:rgba(255,247,223,.96); border-color:var(--gba-brown); color:var(--text); font-weight:700; }
/* Home surfaces (hero games, rank bar, leaderboard, paper) live in
HOME BROADSHEET v10 at the end of this file. */
.noscript-lede { max-width:720px; margin:.4rem auto 0; padding:.55rem .7rem; background:rgba(255,247,223,.94); border:2px solid var(--gba-brown); border-radius:8px; font-size:.78rem; line-height:1.6; color:var(--text); }
.gametype-grid { max-width:760px; gap:.65rem; }.gametype-card { min-height:92px; padding:.7rem .45rem; }.gametype-card h2,.mode-card h2 { font-size:.8rem; }.gametype-card p,.mode-card p { font-size:.72rem; color:var(--text-light); }
.gen-btn,.round-btn,.diff-btn,.visdiff-btn,.lobby-gen-btn,.lobby-mode-btn,.lobby-diff-btn,.lobby-round-btn { min-height:44px; font-size:.86rem; border-color:var(--gba-stone); }
.mode-card { min-width:140px; padding:.7rem 1rem; }
#game-screen { padding-top:1rem; justify-content:flex-start; }
#game-screen::before { content:""; position:absolute; inset:.5rem max(.5rem,calc((100vw - 860px)/2)) 1rem; background:rgba(255,247,223,.97); border:5px solid var(--gba-brown); border-radius:16px; box-shadow:0 0 0 3px var(--gba-stone),0 8px 0 var(--gba-brown-dark); z-index:-1; }
.game-header { max-width:760px; }.info-badge { font-size:.9rem; }.info-badge .lbl { font-size:.7rem; color:var(--gba-brown); }
#round-progress,#solo-timer-bar,.duel-timer-bar,.duel-live-scores { max-width:680px!important; }
.quiz-stage,.answer-area { max-width:680px; }.quiz-stage { min-height:210px; margin:.4rem 0 .75rem; }
.quiz-text-card { width:100%; max-width:600px; padding:1.25rem 1.4rem; }.quiz-text-card .qtc-label { font-size:.78rem; color:var(--gba-brown); }.quiz-text-card .qtc-name { font-size:1.55rem; }.quiz-text-card .qtc-flavor { font-size:1rem; color:var(--text); }
.silhouette,.reveal-img { width:230px!important; height:230px!important; }.quiz-question { font-family: system-ui, -apple-system, sans-serif; font-size: 1rem; font-weight: 700; color: var(--gba-brown-dark); }
#guess-input { min-height:54px; font-size:1rem; }.choice-grid { gap:.65rem; }.choice-btn { min-height:54px; padding:.75rem .65rem; font-size:.92rem; border-color:var(--gba-stone); }
.qtc-type-badge,.type-badge { text-shadow:none; border:2px solid rgba(0,0,0,.35); }
.wf-letter.partial { color:var(--text); }.wf-letter.correct { background:var(--gba-green-dark); }
.results-content { max-width:680px; }#results-title { font-size:1.35rem; }.results-score { font-size:3rem; }#results-message { color:var(--text); }
.winner-banner { color:#805b00; }
:focus-visible {
outline: 3px solid #153e73;
outline-offset: 4px;
box-shadow: none;
}
/* Helpful progressive hint panel */
.hint-panel { width:100%; margin:0 0 .65rem; background:#e7f1d1; border:3px solid var(--gba-green-dark); border-radius:10px; padding:.55rem; box-shadow:inset 0 0 0 2px #fff9df; }
.hint-panel-head { display:flex; justify-content:space-between; gap:.5rem; color:var(--gba-green-dark); font-weight:900; font-size:.78rem; margin:0 .2rem .4rem; }
.hint-stock { background:var(--gba-green-dark); color:#fff; border-radius:12px; padding:.08rem .45rem; }
.hint-actions { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.hint-btn { min-height:52px; display:flex; align-items:center; justify-content:flex-start; gap:.5rem; text-align:left; padding:.45rem .65rem; background:var(--paper-light); border:2px solid var(--gba-green-dark); color:var(--text); }
.hint-btn .hint-icon { font-size:1.25rem; }.hint-btn span:last-child { display:flex; flex-direction:column; }.hint-btn strong { font-size:.76rem; }.hint-btn small { font-size:.65rem; color:var(--text-light); }.hint-btn:disabled { opacity:.58; }
.hint-message { min-height:1.6rem; margin-top:.45rem; padding:.35rem .5rem; background:#fffdf2; border-left:5px solid var(--gold); color:var(--text); font-size:.8rem; font-weight:700; text-align:left; }
#type-burst-overlay { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:140; opacity:1; }
#type-burst-overlay.show { opacity:1; }
@media (max-width:700px) {
html { font-size:16px; }
.screen { padding:.85rem .7rem 1.5rem; }
.title-pixel { font-size:1.35rem; }
/* hero games, badges and rank/leaderboard type: see HOME BROADSHEET v10 */
.gametype-card h2,.mode-card h2 { font-size:.78rem!important; }.quiz-question { font-size:.95rem!important; }.gametype-card p,.mode-card p { font-size:.72rem!important; }
.quiz-stage { min-height:190px; }.silhouette,.reveal-img { width:180px!important; height:180px!important; }.quiz-text-card .qtc-name { font-size:1.3rem; }.quiz-text-card .qtc-flavor { font-size:.9rem; }
#game-screen::before { inset:.35rem .35rem .7rem; }.choice-btn,.btn-gba { min-height:48px; }.btn-sm,.select-all-btn,.hint-btn,.btn-back-home { min-height:44px; min-width:44px; }
}
@media (max-width:390px) { .hint-actions { grid-template-columns:1fr; } }
@media (prefers-contrast:more) {
#bg-canvas { opacity:.45; }
body { font-size: 18px; }
.btn-gba { border-width: 5px; }
.btn-ghost { border-width: 4px; font-weight: 800; }
.gen-btn, .round-btn, .diff-btn, .visdiff-btn { border-width: 4px; font-weight: 800; }
.gametype-card { border-width: 4px; }
.mode-card { border-width: 4px; }.screen::before,.lobby-panel,.trainer-rank-bar,.lb-panel { background:#fffdf2!important; } }
@media (max-width:700px) {
#game-screen { min-height:100dvh; }
#game-screen .quiz-stage { min-height:clamp(175px,35vh,270px); }
#game-screen .silhouette,#game-screen .reveal-img { width:clamp(170px,48vw,220px)!important; height:clamp(170px,48vw,220px)!important; }
#game-screen .hint-panel { margin-bottom:.45rem; }
}
@media (max-width:700px) and (max-height:700px) {
#game-screen .quiz-stage { min-height:150px; }
#game-screen .silhouette,#game-screen .reveal-img { width:145px!important;height:145px!important; }
.hint-btn { min-height:44px; }
}
.nearby-pokemon { background:#e7f1d1; color:var(--gba-green-dark); border:3px solid var(--gba-green-dark); border-radius:9px; min-height:44px; padding:.45rem .8rem; font-weight:900; box-shadow:0 3px 0 var(--gba-brown-dark); cursor:pointer; }
.nearby-pokemon[hidden] { display:none; }
.item-bag { margin-top:.45rem; display:flex; gap:.55rem; align-items:center; justify-content:space-between; background:#fff0bb; border:2px solid #805b00; border-radius:8px; padding:.4rem .5rem; color:var(--text); font-size:.7rem; font-weight:800; }
.item-bag[hidden] { display:none; }.item-bag button { min-height:38px; background:#805b00; color:#fff; border:2px solid var(--gba-brown-dark); border-radius:7px; padding:.3rem .55rem; font-weight:900; cursor:pointer; }
.catch-sequence { position:absolute; inset:0; pointer-events:none; }
/* Mobile catch lane: reserved in HOME BROADSHEET v10 (.paper-sheet margin). */
/* ============================================
NPC DIALOGUE BOX
============================================ */
.npc-dialog-box {
position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
width: min(420px, calc(100vw - 2rem));
background: #fff; border: 4px solid #2a1a0e; border-radius: 6px;
padding: 1rem 1.5rem 1.8rem;
font-family: "Press Start 2P", monospace; font-size: .65rem; line-height: 1.8; color: #2a1a0e;
z-index: 400; display: none; cursor: pointer; user-select: none;
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2a1a0e, 0 8px 20px rgba(0,0,0,.3);
}
.npc-dialog-box.show { display: block; animation: dialog-slide-up .2s ease; }
@keyframes dialog-slide-up { from { transform: translateX(-50%) translateY(20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
.npc-dialog-name { font-size: .5rem; color: #888; margin-bottom: .4rem; }
.npc-dialog-arrow { position: absolute; bottom: .4rem; right: .8rem; font-size: .7rem; animation: dialog-blink .6s steps(1) infinite; }
@keyframes dialog-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
@media (max-width: 520px) { .npc-dialog-box { font-size: .58rem; padding: .8rem 1rem 1.5rem; bottom: 1rem; } }
/* Today's Paper rows: see HOME BROADSHEET v10 at end of file.
.daily-reset-line is shared — it also runs on the Pokédle/Party screens. */
.daily-reset-line {
margin: .1rem 0 .35rem; font-size: .68rem; color: var(--text-light);
font-variant-numeric: tabular-nums; font-weight: 700; cursor: help;
}
@keyframes ct-pop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1); } }
/* ============================================
POKÉDLE — Today's Pokémon
============================================ */
.pkd-modes { margin: .3rem 0; }
.pkd-mode-btn {
border: 3px solid var(--gba-brown); border-radius: 8px;
background: var(--paper-light); color: var(--text);
font-family: 'Press Start 2P', monospace; font-size: .52rem;
padding: .45rem .6rem; cursor: pointer; box-shadow: 0 3px 0 var(--gba-brown-dark);
}
.pkd-mode-btn.selected { background: var(--gold-light); border-color: var(--gold); }
.pkd-mode-btn .pkd-mode-mark { color: var(--gba-green); }
.pkd-rules { font-size: .68rem; color: var(--text-light); margin: .2rem 0 .5rem; }
.pokedle-board {
width: min(100%, 620px); margin: .3rem auto .6rem;
display: flex; flex-direction: column; gap: 5px;
}
.pkd-row {
display: grid; gap: 5px; align-items: stretch;
grid-template-columns: 1.55fr repeat(5, .8fr);
}
.pokedle-board.lean-mode .pkd-row { grid-template-columns: 1.6fr 1fr; }
.pokedle-board.blind-mode .pkd-row { grid-template-columns: 1.6fr 1fr; }
.pkd-row.empty { opacity: .45; }
.pkd-row.pkd-head .pkd-c {
font-family: 'Press Start 2P', monospace; font-size: .44rem; color: var(--text-light);
background: none; border: none; box-shadow: none; padding: .1rem 0;
}
.pkd-c {
display: flex; align-items: center; justify-content: center; gap: 3px;
min-height: 34px; padding: .15rem .25rem;
background: var(--paper-light);
border: 2px solid var(--gba-brown-light); border-radius: 6px;
font-size: .74rem; font-weight: 700; color: var(--text);
overflow: hidden;
}
.pkd-c.name { justify-content: flex-start; font-family: 'Press Start 2P', monospace; font-size: .5rem; }
.pkd-c.name.hit { background: var(--gba-green-light); border-color: var(--gba-green-dark); color: #fff; }
.pkd-chip {
padding: .12rem .3rem; border-radius: 4px; font-size: .56rem;
font-weight: 700; border: 2px solid transparent; color: #fff;
white-space: nowrap;
}
.pkd-chip.miss { background: #78716c; border-color: #57534e; color: #fff; opacity: .8; }
.pkd-chip.hit { box-shadow: 0 0 0 2px var(--gold-light) inset; }
.pkd-chip.near { box-shadow: 0 0 0 2px var(--gold) inset; }
.pkd-val b { font-size: .62rem; }
.pkd-val.hit { color: var(--gba-green-dark); }
.pkd-val.up b { color: var(--fr-red); }
.pkd-val.down b { color: #1d4ed8; }
.pokedle-input-row {
display: flex; gap: .5rem; width: min(100%, 480px); margin: 0 auto .4rem;
}
.pokedle-input-row input {
flex: 1; min-width: 0;
border: 3px solid var(--gba-brown); border-radius: 8px;
background: var(--paper-light); color: var(--text);
font-size: .9rem; padding: .5rem .7rem;
}
.pokedle-input-row input:focus { outline: 3px solid var(--gold-light); outline-offset: 1px; }
.pokedle-feedback { min-height: 1.1rem; font-size: .72rem; color: var(--fr-red-dark); }
.pokedle-feedback.show { animation: pkd-shake .4s; }
.pkd-reveal {
display: flex; gap: .8rem; align-items: center; justify-content: center;
width: min(100%, 480px); margin: .5rem auto; padding: .6rem .8rem;
border: 3px solid var(--gba-brown); border-radius: 12px;
background: var(--paper-light); box-shadow: 0 4px 0 var(--gba-brown-dark);
}
.pkd-reveal img { width: 84px; height: 84px; image-rendering: pixelated; }
.pkd-reveal.won { border-color: var(--gba-green); }
.pkd-reveal.lost { border-color: var(--fr-red); }
.pkd-reveal strong { display: block; font-size: .85rem; }
.pkd-reveal small { display: block; font-size: .68rem; color: var(--text-light); margin-top: .15rem; }
.pkd-reward { color: var(--gba-green-dark); font-weight: 700; }
@keyframes pkd-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
/* ============================================
PARTY OF FIVE
============================================ */
.party-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem;
width: min(100%, 620px); margin: .4rem auto .6rem;
}
.party-card {
position: relative; aspect-ratio: 3 / 4;
border: 3px solid var(--gba-brown); border-radius: 10px;
background: linear-gradient(160deg, var(--parchment), var(--parchment-dark));
box-shadow: 0 4px 0 var(--gba-brown-dark);
cursor: pointer; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: .25rem;
padding: .3rem; transition: transform .12s;
}
.party-card:hover:not(:disabled) { transform: translateY(-3px); }
.party-card:disabled { cursor: default; }
.party-card img { width: 72%; max-width: 74px; image-rendering: pixelated; animation: ct-pop .4s ease-out; }
.party-card strong { font-size: .58rem; font-family: 'Press Start 2P', monospace; }
.party-card-back {
display: flex; flex-direction: column; align-items: center; gap: .35rem;
font-family: 'Press Start 2P', monospace; font-size: 1.1rem; color: var(--gba-brown);
}
.party-ball {
width: 34px; height: 34px; border-radius: 50%;
background: linear-gradient(to bottom, var(--fr-red) 0 46%, #21170d 46% 54%, #fffdf2 54% 100%);
border: 3px solid #21170d;
animation: party-bob 1.6s ease-in-out infinite;
}
@keyframes party-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.party-feedback { min-height: 1.1rem; font-size: .72rem; color: var(--text-light); }
.party-options { width: min(100%, 620px); margin: 0 auto; text-align: left; }
.party-rule-btn {
display: block; width: 100%; margin: .3rem 0; padding: .5rem .7rem;
border: 3px solid var(--gba-brown); border-radius: 8px;
background: var(--paper-light); color: var(--text);
font-size: .8rem; font-weight: 700; cursor: pointer;
box-shadow: 0 3px 0 var(--gba-brown-dark);
}
.party-rule-btn:hover:not(:disabled) { background: var(--gold-light); }
.party-rule-btn.correct { background: var(--gba-green-light); border-color: var(--gba-green-dark); color: #fff; }
.party-rule-btn.wrong { background: var(--fr-red); border-color: var(--fr-red-dark); color: #fff; }
.party-note { font-size: .72rem; color: var(--gba-green-dark); font-weight: 700; }
#party-screen .party-note { margin-top: .4rem; }
/* ============================================
LIVING POKÉDEX
============================================ */
.dex-stats { width: min(100%, 720px); margin: 0 auto .4rem; }
.dex-count-line {
display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap;
font-size: .72rem; color: var(--text-light);
}
.dex-count-line b { color: var(--text); }
.dc-caught b { color: var(--gba-green-dark); }
.dex-progress { max-width: 420px; margin: .35rem auto .5rem; }
.dex-region-tabs {
display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center;
width: min(100%, 720px); margin: 0 auto .4rem;
}
.dex-tab {
border: 2px solid var(--gba-brown); border-radius: 6px;
background: var(--paper-light); color: var(--text);
font-size: .62rem; font-weight: 700; padding: .28rem .5rem; cursor: pointer;
}
.dex-tab small { opacity: .65; font-size: .56rem; }
.dex-tab.selected { background: var(--gold-light); border-color: var(--gold); }
.dex-filter-row {
display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center;
width: min(100%, 720px); margin: 0 auto .5rem;
}
.dex-select, .dex-search {
border: 3px solid var(--gba-brown); border-radius: 8px;
background: var(--paper-light); color: var(--text);
font-size: .75rem; padding: .35rem .5rem;
}
.dex-search { min-width: 150px; }
/* Safari difficulty chips — pick the route next to "Safari →", never a second
screen. Same raised→selected language as the gen chips, icon + tooltip. */
.saf-chips { display: inline-flex; gap: .25rem; align-items: center; }
.saf-chip {
background: var(--parchment); border: 3px solid var(--gba-stone);
border-radius: 8px; font-size: .8rem; line-height: 1; padding: .3rem .45rem;
min-width: 40px; min-height: 40px; cursor: pointer; transition: all .15s;
}
.saf-chip:hover { border-color: var(--gba-brown); }
.saf-chip.selected { border-color: var(--fr-red); background: var(--gba-cream); box-shadow: 0 0 0 2px var(--gold-light) inset; }
.saf-chip:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 1px; }
.dex-select:focus, .dex-search:focus, .dex-tab:focus-visible, .dex-cell:focus-visible,
.pkd-mode-btn:focus-visible, .party-rule-btn:focus-visible, .party-card:focus-visible {
outline: 3px solid var(--gold-light); outline-offset: 1px;
}
.dex-grid-full {
display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
gap: 4px; width: min(100%, 720px); margin: 0 auto;
max-height: 44vh; overflow-y: auto; padding: .3rem;
border: 3px solid var(--gba-brown); border-radius: 10px;
background: var(--parchment);
}
.dex-cell {
position: relative; aspect-ratio: 1;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--gba-brown-light); border-radius: 6px;
background: var(--paper-light); cursor: pointer; padding: 0;
}
.dex-cell img { width: 86%; image-rendering: pixelated; }
.dex-cell.caught { border-color: var(--gba-green); }
.dex-cell.caught.shiny { border-color: var(--gold); box-shadow: 0 0 6px var(--gold-light); }
.dex-cell.seen img { filter: grayscale(1) brightness(.5); opacity: .8; }
.dex-cell.seen { border-style: dashed; }
.dex-cell.missing { background: repeating-linear-gradient(45deg, var(--parchment), var(--parchment) 6px, var(--parchment-dark) 6px, var(--parchment-dark) 12px); }
.dex-q { font-family: 'Press Start 2P', monospace; font-size: .8rem; color: var(--gba-brown); }
.dex-cell.missing:hover .dex-q { color: var(--fr-red); }
.dex-state {
position: absolute; bottom: 0; right: 2px;
font-size: .5rem; font-style: normal; color: var(--text-light);
}
.dex-cell.missing .dex-state { font-size: .42rem; text-transform: uppercase; color: var(--fr-red-dark); }
.dex-stars, .dex-shiny, .dex-ribbon {
position: absolute; font-style: normal; line-height: 1;
}
.dex-stars { bottom: 1px; right: 2px; font-size: .42rem; color: var(--gold); text-shadow: 0 0 2px #21170d; }
.dex-shiny { top: 1px; right: 2px; font-size: .55rem; color: #fff; text-shadow: 0 0 3px var(--gold-light); }
.dex-ribbon { top: 1px; left: 2px; font-size: .5rem; }
.dex-empty { grid-column: 1 / -1; text-align: center; padding: 1rem; font-size: .75rem; color: var(--text-light); }
.dex-detail { width: min(100%, 720px); margin: .5rem auto 0; }
.dex-detail-empty { text-align: center; font-size: .72rem; color: var(--text-light); padding: .4rem; }
.dex-detail-card {
display: flex; gap: .8rem; align-items: flex-start; text-align: left;
border: 3px solid var(--gba-brown); border-radius: 12px;
background: var(--paper-light); box-shadow: 0 4px 0 var(--gba-brown-dark);
padding: .7rem .9rem;
}
.dd-sprite img { width: 96px; height: 96px; image-rendering: pixelated; }
.dd-info { flex: 1; min-width: 0; }
.dd-info h3 { font-size: .8rem; margin-bottom: .25rem; }
.dd-types { display: flex; gap: .3rem; margin-bottom: .35rem; }
.dd-state { font-size: .72rem; color: var(--text-light); margin-bottom: .35rem; }
.dd-tasks { font-size: .72rem; }
.dd-task { padding: .12rem 0; color: var(--text-light); }
.dd-task.done { color: var(--gba-green-dark); font-weight: 700; }
.dd-note { font-size: .65rem; color: var(--text-light); margin-top: .3rem; }
@media (max-width: 560px) {
.dex-detail-card { flex-direction: column; align-items: center; text-align: center; }
.dd-types { justify-content: center; }
.party-grid { gap: .3rem; }
.party-card strong { font-size: .48rem; }
.pkd-row { grid-template-columns: 1.35fr repeat(5, .72fr); }
.pokedle-board.lean-mode .pkd-row, .pokedle-board.blind-mode .pkd-row { grid-template-columns: 1.4fr 1fr; }
.pkd-c { font-size: .62rem; min-height: 30px; }
.pkd-chip { font-size: .48rem; }
}
/* ============================================
RANK-UP SLAM
============================================ */
.rankup-overlay {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
background: rgba(33, 23, 13, .78);
animation: rankup-fade .25s ease-out;
}
.rankup-overlay[hidden] { display: none; }
.rankup-card {
width: min(92vw, 420px);
background: linear-gradient(160deg, var(--paper-light), var(--parchment));
border: 4px solid var(--gold); border-radius: 16px;
box-shadow: 0 8px 0 var(--gba-brown-dark), 0 0 40px rgba(240,192,64,.45);
padding: 1.4rem 1.2rem 1.1rem; text-align: center;
animation: rankup-slam .5s cubic-bezier(.2, 1.6, .4, 1);
}
.rankup-stamp {
display: inline-block; transform: rotate(-6deg);
font-family: 'Press Start 2P', monospace; font-size: .6rem;
color: var(--fr-red); border: 3px solid var(--fr-red); border-radius: 6px;
padding: .3rem .5rem; margin-bottom: .6rem;
animation: rankup-stamp .45s .25s cubic-bezier(.2, 1.8, .4, 1) backwards;
}
.rankup-title {
font-family: 'Press Start 2P', monospace; font-size: .95rem;
color: var(--gba-brown-dark); margin-bottom: .5rem;
}
.rankup-line { font-size: .85rem; color: var(--text); margin-bottom: .3rem; }
.rankup-sub { font-size: .68rem; color: var(--text-light); margin-bottom: .8rem; }
@keyframes rankup-slam { from { transform: scale(1.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rankup-stamp { from { transform: rotate(-6deg) scale(2.4); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }
@keyframes rankup-fade { from { opacity: 0; } to { opacity: 1; } }
/* ============================================
XP FLOATS
============================================ */
.xp-float-global {
position: fixed; left: 50%; top: 22%;
transform: translateX(-50%);
z-index: 190; pointer-events: none;
background: linear-gradient(135deg, var(--gba-green), var(--gba-green-dark));
color: #fff; border: 3px solid var(--gold); border-radius: 10px;
padding: .45rem .9rem; text-align: center;
box-shadow: 0 4px 0 var(--gba-brown-dark);
animation: xp-rise 1.6s ease-out forwards;
}
.xp-float-global strong { font-family: 'Press Start 2P', monospace; font-size: .62rem; display: block; }
.xp-float-global span { font-size: .68rem; display: block; margin-top: .15rem; }
@keyframes xp-rise {
0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.8); }
15% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
75% { opacity: 1; }
100% { opacity: 0; transform: translateX(-50%) translateY(-46px) scale(.95); }
}
.xp-inline {
display: inline-block; margin-left: .45rem; padding: .08rem .4rem;
background: var(--gba-green); color: #fff; border-radius: 4px;
font-size: .62rem; font-family: 'Press Start 2P', monospace;
animation: xp-inline-pop .4s ease-out;
}
@keyframes xp-inline-pop { from { transform: scale(0); } to { transform: scale(1); } }
/* ============================================
ACCESSIBILITY — reduced motion
============================================ */
@media (prefers-reduced-motion: reduce) {
.ct-sprite, .party-ball, .party-card img, .xp-float-global, .xp-inline,
.rankup-card, .rankup-stamp, .rankup-overlay { animation: none !important; }
}
/* ============================================
POKÉDEX AUTOCOMPLETE (all typing games)
============================================ */
#text-input-area { position: relative; }
.ac-dropdown {
position: absolute; left: 0; right: 0; bottom: calc(100% + 6px);
max-height: min(60vh, 364px); overflow-y: auto; z-index: 60;
background: var(--paper-light);
border: 3px solid var(--gba-brown); border-radius: 10px;
box-shadow: 0 5px 0 var(--gba-brown-dark), 0 10px 24px var(--shadow-dark);
padding: .25rem;
}
.ac-row {
display: flex; align-items: center; gap: .5rem;
width: 100%; padding: .3rem .45rem;
background: none; border: 2px solid transparent; border-radius: 7px;
cursor: pointer; text-align: left; font-size: .8rem; color: var(--text);
}
.ac-row.active, .ac-row:hover { background: var(--gold-light); border-color: var(--gold); }
.ac-row img { width: 30px; height: 30px; image-rendering: pixelated; flex: none; }
.ac-row-glyph { width: 30px; text-align: center; flex: none; }
.ac-name { font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-meta { margin-left: auto; display: flex; align-items: center; gap: .25rem; flex-wrap: nowrap; }
.ac-gem {
font-style: normal; font-size: .5rem; font-weight: 700;
padding: .1rem .3rem; border-radius: 4px; border: 1px solid rgba(0,0,0,.35);
white-space: nowrap;
}
.ac-meta-bit { font-style: normal; font-size: .58rem; color: var(--text-light); white-space: nowrap; }
/* ============================================
POKÉDLE v2 — the board is a Pokédex
============================================ */
.pkd-gens {
width: min(100%, 720px); margin: .2rem auto .45rem;
border: 3px solid var(--gba-brown); border-radius: 10px;
background: var(--paper-light); box-shadow: 0 3px 0 var(--gba-brown-dark);
padding: .45rem .55rem;
}
.pkd-gens-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: center; }
.pkd-all-btn {
font-family: 'Press Start 2P', monospace; font-size: .5rem;
color: #21170d; background: linear-gradient(160deg, var(--gold-light), var(--gold));
border: 3px solid var(--gba-brown); border-radius: 8px;
padding: .45rem .6rem; cursor: pointer; box-shadow: 0 3px 0 var(--gba-brown-dark);
}
.pkd-all-btn.selected { outline: 3px solid var(--gold); outline-offset: 1px; }
.pkd-all-btn:disabled, .pkd-gen-chip:disabled { opacity: .55; cursor: not-allowed; }
.pkd-gen-chips { display: flex; gap: .2rem; flex-wrap: wrap; }
.pkd-gen-chip {
min-width: 1.7rem; padding: .28rem .3rem;
border: 2px solid var(--gba-brown); border-radius: 6px;
background: var(--parchment); color: var(--text);
font-weight: 700; font-size: .72rem; cursor: pointer;
}
.pkd-gen-chip.selected { background: var(--fr-red); border-color: var(--fr-red-dark); color: #fff; }
.pkd-gens-meta {
display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
margin-top: .35rem; padding: .2rem .35rem 0; border-top: 2px dashed var(--gba-brown-light);
}
.pkd-pool-readout { font-family: 'Press Start 2P', monospace; font-size: .5rem; color: var(--gba-brown); }
.pkd-gens-hint { font-size: .68rem; color: var(--text-light); }
.pkd-layout {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: .7rem; width: min(100%, 720px); margin: 0 auto; align-items: start;
}
@media (min-width: 860px) {
.pkd-layout { grid-template-columns: minmax(0, 1.6fr) minmax(220px, .9fr); }
}
@media (max-width: 859px) {
/* Mobile: compact mystery silhouette above the board */
.pkd-layout { display: flex; flex-direction: column; }
.pkd-right { order: -1; flex-direction: row; align-items: flex-start; gap: .5rem; }
.pkd-mystery { flex: 0 1 190px; padding: .4rem .5rem; }
.pkd-card-sprite img { width: 84px; height: 84px; }
.pkd-card-info strong { font-size: .72rem; }
.pkd-blanks { font-size: .55rem; }
.pkd-notes { flex: 1; min-width: 0; }
}
.pkd-left { min-width: 0; position: relative; display: flex; flex-direction: column; }
/* --- board v2 --- */
.pokedle-board { width: 100%; margin: .2rem 0 .4rem; display: flex; flex-direction: column; gap: 5px; }
.pkd-row { display: grid; gap: 5px; grid-template-columns: 1.9fr repeat(5, minmax(0, .9fr)); }
.pokedle-board.lean-mode .pkd-row { grid-template-columns: 1.9fr 1.2fr; }
.pokedle-board.blind-mode .pkd-row { grid-template-columns: 1.9fr 1fr; }
.pkd-row.empty { opacity: .8; }
.pkd-row.empty .pkd-c {
background: repeating-linear-gradient(45deg, var(--parchment), var(--parchment) 7px, var(--parchment-dark) 7px, var(--parchment-dark) 14px);
border: 2px dashed var(--gba-brown-light);
}
.pkd-row.empty .pkd-c::after {
content: ""; position: absolute; inset: 0; margin: auto;
width: 16px; height: 16px; border-radius: 50%;
background: linear-gradient(to bottom, rgba(169,37,41,.5) 0 44%, rgba(46,29,18,.6) 44% 56%, rgba(255,253,242,.5) 56% 100%);
border: 2px solid rgba(46,29,18,.4);
}
.pkd-row.landing { animation: pkd-land .3s ease-out; }
@keyframes pkd-land { from { transform: translateY(-8px); opacity: 0; } }
.pkd-c { position: relative; }
.pkd-c.flipping { animation: pkd-flip .48s ease both; animation-delay: var(--flip-delay, 0s); }
@keyframes pkd-flip {
0% { transform: rotateY(90deg); opacity: 0; }
60% { transform: rotateY(-8deg); opacity: 1; }
100% { transform: rotateY(0); }
}
.pkd-name-thumb { width: 26px; height: 26px; image-rendering: pixelated; flex: none; }
.pkd-c.name { gap: .3rem; }
/* type gems */
.pkd-gem {
font-style: normal; font-weight: 700; font-size: .54rem;
padding: .14rem .32rem; border-radius: 999px;
border: 2px solid rgba(0,0,0,.4); white-space: nowrap;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.pkd-gem.hit { box-shadow: 0 0 0 2px var(--gold-light), inset 0 0 0 1px rgba(255,255,255,.25); animation: gem-pulse .5s ease-out; }
.pkd-gem.near { box-shadow: 0 0 0 2px var(--gold), inset 0 0 0 1px rgba(255,255,255,.2); animation: gem-pulse .5s ease-out .1s; }
.pkd-gem.miss { filter: saturate(.15) brightness(.75); }
@keyframes gem-pulse { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
/* arrows */
.pkd-val b.slide { display: inline-block; animation: arrow-up .35s ease-out both; }
.pkd-val.dir-down b.slide { animation-name: arrow-down; }
@keyframes arrow-up { from { transform: translateY(6px); opacity: 0; } }
@keyframes arrow-down { from { transform: translateY(-6px); opacity: 0; } }
.pkd-sparkle { font-style: normal; position: absolute; top: -6px; right: -2px; font-size: .6rem; animation: sparkle-pop .6s ease-out; }
@keyframes sparkle-pop { 0% { transform: scale(0) rotate(-90deg); } 100% { transform: scale(1) rotate(0); } }
/* --- filter chips + remaining --- */
.pkd-chips-row { display: flex; gap: .3rem; flex-wrap: wrap; margin: .1rem 0 .3rem; }
.pkd-chips-row .pkd-chip {
display: inline-flex; align-items: center; gap: .25rem;
background: var(--gba-cream); border: 2px solid var(--gba-brown); border-radius: 999px;
padding: .18rem .5rem; font-size: .66rem; font-weight: 700; color: var(--text); cursor: pointer;
}
.pkd-chips-row .pkd-chip b { color: var(--fr-red); }
.pkd-remaining {
align-self: flex-start; margin: 0 0 .3rem;
background: var(--parchment); border: 2px solid var(--gba-brown); border-radius: 8px;
padding: .3rem .55rem; font-size: .72rem; font-weight: 700; color: var(--text); cursor: pointer;
}
.pkd-remaining b { color: var(--fr-red-dark); }
/* drawer */
.pkd-drawer { margin: 0 0 .4rem; }
.pkd-drawer-card {
border: 3px solid var(--gba-brown); border-radius: 10px;
background: var(--paper-light); box-shadow: 0 4px 0 var(--gba-brown-dark);
padding: .5rem .7rem; text-align: left;
}
.pkd-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pkd-drawer-head strong { font-size: .8rem; }
.pkd-drawer-sub { font-size: .68rem; color: var(--text-light); margin: .2rem 0 .4rem; }
.pkd-gen-bar, .pkd-dist-row { display: flex; align-items: center; gap: .4rem; margin: .15rem 0; }
.pkd-gen-bar span, .pkd-dist-row span { width: 2rem; font-size: .62rem; font-weight: 700; color: var(--text-light); }
.pkd-gen-bar i, .pkd-dist-row i {
display: block; height: 10px; min-width: 2px;
background: linear-gradient(90deg, var(--gba-green), var(--gba-green-dark)); border-radius: 4px;
}
.pkd-gen-bar b, .pkd-dist-row b { font-size: .62rem; color: var(--text); width: 2rem; }
.pkd-drawer-names { display: flex; flex-wrap: wrap; gap: 2px; margin: .4rem 0; }
.pkd-drawer-names img { width: 32px; height: 32px; image-rendering: pixelated; }
.pkd-more { font-size: .62rem; color: var(--text-light); align-self: center; }
.pkd-drawer-warn { font-size: .6rem; color: var(--fr-red-dark); margin: .2rem 0 0; }
.pkd-drawer-stats { border-top: 2px dashed var(--gba-brown-light); margin-top: .45rem; padding-top: .35rem; font-size: .66rem; color: var(--text-light); }
.pkd-drawer-stats strong { color: var(--fr-red-dark); }
/* --- sticky input dock --- */
.pkd-input-zone {
position: sticky; bottom: 0; z-index: 8;
margin-top: .4rem; padding: .5rem .1rem .35rem;
background: linear-gradient(to top, var(--parchment) 65%, rgba(248,240,216,0));
}
.pkd-input-wrap {
display: flex; align-items: center; gap: .45rem;
position: relative;
border: 3px solid var(--gba-brown); border-radius: 10px;
background: var(--paper-light); box-shadow: 0 3px 0 var(--gba-brown-dark);
padding: .3rem .4rem;
}
.pkd-input-sprite { width: 34px; height: 34px; image-rendering: pixelated; flex: none; }
#pokedle-input {
flex: 1; min-width: 0; border: none; background: none;
font-size: .95rem; color: var(--text); padding: .35rem .2rem;
}
#pokedle-input:focus { outline: none; }
.pkd-input-wrap:focus-within { outline: 3px solid var(--gold-light); }
.pkd-go {
position: relative; flex: none;
width: 54px; height: 44px; border-radius: 10px;
border: 3px solid var(--gba-brown); cursor: pointer;
font-family: 'Press Start 2P', monospace; font-size: .55rem; color: #fff;
background:
radial-gradient(circle at 50% 42%, #fffdf2 0 5px, transparent 5px),
linear-gradient(to bottom, var(--fr-red) 0 44%, #21170d 44% 56%, #fffdf2 56% 100%);
box-shadow: 0 3px 0 var(--gba-brown-dark);
text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.pkd-go.pressing { animation: go-press .42s ease-out; }
@keyframes go-press {
0% { transform: scale(1, 1); }
30% { transform: scale(1.15, .8); filter: brightness(1.6); }
60% { transform: scale(.95, 1.08); }
100% { transform: scale(1, 1); }
}
.pkd-input-wrap.shake { animation: pkd-shake .45s; }
.pkd-input-wrap.bounce { animation: pkd-bounce .5s; }
@keyframes pkd-bounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-8px); } 60% { transform: translateY(2px); } }
.pkd-score-line {
margin-top: .3rem; font-size: .68rem; color: var(--text-light); text-align: center;
font-family: 'Press Start 2P', monospace; font-size: .48rem; line-height: 1.7;
}
.pkd-score-line b { color: var(--gba-green-dark); }
/* --- mystery card --- */
.pkd-right { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.pkd-mystery {
border: 3px solid var(--gba-brown); border-radius: 12px;
background: linear-gradient(165deg, var(--parchment), var(--parchment-dark));
box-shadow: 0 4px 0 var(--gba-brown-dark);
padding: .55rem .6rem; text-align: center;
}
.pkd-card-sprite { position: relative; display: inline-block; }
.pkd-card-sprite img { width: 120px; height: 120px; image-rendering: pixelated; }
.pkd-card-sprite.dark img { filter: brightness(0) contrast(2); }
.pkd-card-sprite.dark::after {
content: "???"; position: absolute; inset: 0; display: grid; place-items: center;
font-family: 'Press Start 2P', monospace; font-size: .9rem; color: var(--gba-brown-light);
}
.pkd-mystery.won .pkd-card-sprite { animation: pkd-land .4s ease-out; }
.pkd-mystery.lost .pkd-card-sprite img { filter: brightness(.75) contrast(1.2) grayscale(.4); }
.pkd-card-sprite.cracked::before {
content: ""; position: absolute; inset: 8%;
background:
linear-gradient(105deg, transparent 48.5%, rgba(46,29,18,.85) 49%, transparent 51.5%),
linear-gradient(75deg, transparent 30%, rgba(46,29,18,.7) 31%, transparent 33%);
animation: crack-in .5s ease-out;
}
@keyframes crack-in { from { opacity: 0; transform: scale(1.2); } }
.pkd-burst {
position: absolute; inset: -20px; pointer-events: none;
background: radial-gradient(circle, rgba(240,192,64,.9) 0%, transparent 60%);
animation: burst .7s ease-out both;
}
@keyframes burst { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.pkd-gen-badge {
position: absolute; top: -6px; left: -8px;
background: var(--gba-brown); color: var(--gold-light);
font-family: 'Press Start 2P', monospace; font-size: .5rem;
padding: .25rem .4rem; border-radius: 6px; border: 2px solid var(--gold);
}
.pkd-blind-tag {
position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
background: var(--fr-red-dark); color: #fff; font-size: .58rem; font-weight: 700;
padding: .15rem .45rem; border-radius: 6px; white-space: nowrap;
}
.pkd-card-info strong { display: block; font-size: .85rem; margin-top: .3rem; }
.pkd-blanks { display: block; font-family: 'Press Start 2P', monospace; font-size: .7rem; letter-spacing: .12em; color: var(--gba-brown); margin: .25rem 0; }
.pkd-blanks.unknown { color: var(--gba-brown-light); font-size: .5rem; }
.pkd-card-gems { display: flex; gap: .3rem; justify-content: center; flex-wrap: wrap; margin: .2rem 0; }
.pkd-gem-slot {
font-style: normal; font-size: .6rem; font-weight: 700;
width: 2rem; text-align: center; padding: .15rem 0;
border: 2px dashed var(--gba-brown-light); border-radius: 999px; color: var(--gba-brown-light);
}
#pkd-cry-btn { margin-top: .3rem; }
/* --- trainer notes + meters --- */
.pkd-notes {
border: 3px solid var(--gba-brown); border-radius: 10px;
background: var(--paper-light); box-shadow: 0 3px 0 var(--gba-brown-dark);
padding: .4rem .6rem; text-align: left;
}
.pkd-notes summary { cursor: pointer; font-size: .74rem; font-weight: 700; color: var(--gba-brown); }
.pkd-meter { margin: .45rem 0; }
.pkd-meter label { display: block; font-size: .6rem; font-family: 'Press Start 2P', monospace; color: var(--text-light); margin-bottom: .2rem; }
.pkd-meter small { font-size: .64rem; color: var(--text-light); }
.pkd-thermo {
position: relative; height: 12px; border-radius: 999px;
background: var(--parchment-dark); border: 2px solid var(--gba-brown-light); overflow: visible;
}
.pkd-thermo-fill {
position: absolute; top: 0; bottom: 0;
background: linear-gradient(90deg, #4a90d9, #e8783c); border-radius: 999px;
}
.pkd-thermo-pin {
position: absolute; top: -4px; width: 3px; height: 16px;
background: var(--fr-red); border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.6);
}
.pkd-range { font-size: .72rem; font-weight: 700; color: var(--text); }
.pkd-stage-track { display: flex; gap: .25rem; }
.pkd-stage-track span {
flex: 1; text-align: center; font-size: .6rem; font-weight: 700;
padding: .18rem 0; border-radius: 6px;
border: 2px solid var(--gba-brown-light); color: var(--gba-brown-light);
background: var(--parchment);
}
.pkd-stage-track span.in-range { border-color: var(--gba-brown); color: var(--text); }
.pkd-stage-track span.pinned { background: var(--gold-light); border-color: var(--gold); color: var(--text); }
.pkd-meter-empty { font-size: .68rem; color: var(--text-light); }
/* --- tooltip + toast --- */
.pkd-tooltip {
position: fixed; z-index: 120; max-width: 230px;
background: var(--gba-brown-dark); color: var(--gba-cream);
border: 2px solid var(--gold); border-radius: 8px;
padding: .45rem .55rem; font-size: .68rem; line-height: 1.45;
transform: translateY(-100%);
box-shadow: 0 4px 12px var(--shadow-dark);
}
.pkd-tooltip button { margin-top: .35rem; background: var(--gold-light); }
.pkd-toast {
position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%);
z-index: 130; max-width: 90vw;
background: var(--gba-brown-dark); color: var(--gba-cream);
border: 2px solid var(--gold); border-radius: 10px;
padding: .5rem .8rem; font-size: .74rem;
opacity: 0; pointer-events: none; transition: opacity .25s;
box-shadow: 0 4px 12px var(--shadow-dark);
}
.pkd-toast.show { opacity: 1; }
.pkd-share-row { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .35rem; }
/* --- reduced motion: fades, not flips --- */
@media (prefers-reduced-motion: reduce) {
.pkd-c.flipping { animation: pkd-fade .3s ease both; animation-delay: var(--flip-delay, 0s); }
.pkd-val b.slide, .pkd-gem.hit, .pkd-gem.near, .pkd-row.landing,
.pkd-go.pressing, .pkd-burst, .pkd-sparkle, .gem-pulse { animation: none !important; }
}
@keyframes pkd-fade { from { opacity: 0; } }
/* ============================================
PARTY OF FIVE v3 — information economy
============================================ */
.pof-modes { margin: .25rem 0; }
.pof-mode-btn {
border: 3px solid var(--gba-brown); border-radius: 8px;
background: var(--paper-light); color: var(--text);
font-family: 'Press Start 2P', monospace; font-size: .52rem;
padding: .45rem .6rem; cursor: pointer; box-shadow: 0 3px 0 var(--gba-brown-dark);
}
.pof-mode-btn.selected { background: var(--gold-light); border-color: var(--gold); }
.pof-practice-tag { font-size: .66rem; color: var(--gba-green-dark); font-weight: 700; min-height: 1rem; }
.pof-charges {
display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
width: min(100%, 720px); margin: .1rem auto .45rem;
padding: .3rem .6rem;
background: rgba(255,247,223,.92);
border: 2px solid var(--gba-brown); border-radius: 8px;
}
.pof-charge { font-family: 'Press Start 2P', monospace; font-size: .5rem; color: var(--gba-brown); }
.pof-charge b { color: var(--fr-red-dark); margin-left: .2rem; }
.pof-grid { margin: .2rem auto .4rem; }
.pof-card {
position: relative;
border: 3px solid var(--gba-brown); border-radius: 10px;
box-shadow: 0 4px 0 var(--gba-brown-dark);
padding: .3rem .25rem .45rem;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
min-height: 148px;
}
.pof-card.facedown {
background: repeating-linear-gradient(45deg, var(--gba-cream), var(--gba-cream) 8px, var(--parchment-dark) 8px, var(--parchment-dark) 16px);
}
.pof-card.flipped { background: var(--paper-light); }
.pof-card img { width: 64px; height: 64px; image-rendering: pixelated; }
.pof-card .pof-sil { filter: brightness(0) contrast(2); }
.pof-ball {
width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(to bottom, var(--fr-red) 0 46%, #21170d 46% 54%, #fffdf2 54% 100%);
border: 3px solid #21170d;
animation: party-bob 1.6s ease-in-out infinite;
}
.pof-card strong { font-size: .56rem; font-family: 'Press Start 2P', monospace; }
.pof-card-gems { display: flex; gap: .2rem; flex-wrap: wrap; justify-content: center; }
.pof-stamp {
position: absolute; top: 3px; left: 3px;
font-style: normal; font-size: .42rem; font-weight: 700; letter-spacing: .04em;
font-family: 'Press Start 2P', monospace;
color: var(--fr-red-dark);
border: 2px solid var(--fr-red-dark); border-radius: 4px;
background: rgba(255,253,242,.9);
padding: .12rem .22rem; transform: rotate(-3deg);
}
.pof-card.inspected { border-color: var(--gba-green-dark); }
.pof-flip-btn, .pof-inspect-btn {
font-size: .55rem; font-weight: 700; cursor: pointer;
border: 2px solid var(--gba-brown); border-radius: 6px;
background: var(--gold-light); color: var(--text); padding: .18rem .4rem;
}
.pof-inspect-btn { background: var(--paper-light); }
.pof-flip-btn:disabled, .pof-inspect-btn:disabled { opacity: .4; cursor: not-allowed; }
.pof-pin-btn {
position: absolute; bottom: 2px; right: 3px;
border: none; background: none; cursor: pointer; font-size: .8rem;
}
.pof-card.pinned { outline: 3px solid var(--gold); }
.pof-card.breaker { transform: translateY(-8px); box-shadow: 0 8px 0 var(--fr-red-dark); animation: pof-slam .4s ease-out; }
@keyframes pof-slam { from { transform: translateY(-24px) scale(1.08); } }
.pof-seal {
position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%) rotate(-4deg);
font-style: normal; font-size: .44rem; font-weight: 700;
font-family: 'Press Start 2P', monospace;
color: #fffdf2; background: var(--fr-red); border: 2px solid var(--fr-red-dark);
border-radius: 4px; padding: .14rem .3rem; white-space: nowrap;
}
.pof-rule-badge {
position: absolute; top: 2px; right: 4px; font-style: normal;
width: 1.3rem; height: 1.3rem; display: grid; place-items: center;
background: var(--gold); color: var(--gba-brown-dark);
border: 2px solid var(--gba-brown); border-radius: 50%;
font-weight: 700; font-size: .7rem;
}
.party-notes { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; width: min(100%, 720px); margin: 0 auto .4rem; }
.pof-note {
font-size: .62rem; background: var(--gba-cream); color: var(--gba-brown-dark);
border: 2px solid var(--gba-brown-light); border-radius: 6px; padding: .18rem .4rem;
}
/* rule builder */
.pof-builder {
width: min(100%, 720px); margin: .2rem auto .35rem;
border: 3px solid var(--gba-brown); border-radius: 10px;
background: var(--paper-light); box-shadow: 0 3px 0 var(--gba-brown-dark);
padding: .5rem .6rem; text-align: center;
}
.pof-builder-row { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.pof-all { font-family: 'Press Start 2P', monospace; font-size: .55rem; color: var(--gba-brown); }
.pof-select {
border: 3px solid var(--gba-brown); border-radius: 8px;
background: var(--paper-light); color: var(--text);
font-size: .74rem; padding: .35rem .4rem; max-width: 200px;
}
.pof-fixed-value { font-size: .8rem; }
.pof-no-values { font-size: .66rem; color: var(--text-light); font-style: italic; }
.pof-lock {
font-family: 'Press Start 2P', monospace; font-size: .68rem;
color: var(--text-white); cursor: pointer;
background: linear-gradient(180deg, var(--fr-red-light), var(--fr-red-dark));
border: 4px solid var(--gba-brown-dark); border-radius: 10px;
padding: .6rem 1.1rem; box-shadow: 0 4px 0 var(--gba-brown-dark);
text-transform: uppercase; letter-spacing: .5px; min-height: 48px;
display: inline-flex; align-items: center; justify-content: center;
}
.pof-lock:disabled { opacity: .45; cursor: not-allowed; box-shadow: 0 2px 0 var(--gba-brown-dark); filter: grayscale(0.2); }
.pof-lock:not(:disabled):active { transform: scale(0.96) translateY(2px); box-shadow: 0 1px 0 var(--gba-brown-dark); }
.pof-freetext-row { margin-top: .45rem; position: relative; }
.pof-freetext-row input {
flex: 1; min-width: 180px; max-width: 340px;
border: 3px solid var(--gba-brown); border-radius: 8px;
background: var(--parchment); color: var(--text);
font-size: .8rem; padding: .35rem .5rem;
}
.pof-builder-hint { font-size: .66rem; color: var(--text-light); margin-top: .35rem; }
.pof-lifeline-link {
margin-top: .4rem; background: none; border: none; cursor: pointer;
font-size: .68rem; color: var(--fr-red-dark); text-decoration: underline;
}
.pof-lifeline-opts { margin-top: .45rem; text-align: left; }
.pof-lifeline-note { font-size: .62rem; color: var(--text-light); margin-top: .2rem; }
.pof-lifeline-opts .party-rule-btn { display: block; width: 100%; }
/* graveyard + readout */
.pof-graveyard { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; width: min(100%, 720px); margin: 0 auto .2rem; }
.pof-grave-label { font-size: .62rem; color: var(--text-light); }
.pof-grave {
font-size: .62rem; color: var(--fr-red-dark);
border: 2px dashed var(--fr-red-dark); border-radius: 6px; padding: .12rem .35rem;
text-decoration: line-through;
}
.pof-readout {
font-family: 'Press Start 2P', monospace; font-size: .48rem; line-height: 1.8;
color: var(--text-light); text-align: center; min-height: 1.2rem; margin: .2rem 0 .4rem;
}
.pof-readout b { color: var(--gba-green-dark); }
/* proof round */
.pof-proof { width: min(100%, 720px); margin: .3rem auto; text-align: center; }
.pof-proof .section-label small { font-size: .62rem; color: var(--gba-green-dark); }
.pof-guests { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .4rem 0; }
.pof-guest {
border: 3px solid var(--gba-brown); border-radius: 10px;
background: var(--paper-light); box-shadow: 0 3px 0 var(--gba-brown-dark);
padding: .4rem .3rem; display: flex; flex-direction: column; align-items: center; gap: .25rem;
}
.pof-guest img { width: 64px; height: 64px; image-rendering: pixelated; }
.pof-guest strong { font-size: .56rem; font-family: 'Press Start 2P', monospace; }
.pof-inout { display: flex; gap: .3rem; }
.pof-io {
font-family: 'Press Start 2P', monospace; font-size: .5rem; cursor: pointer;
border: 3px solid var(--gba-brown); border-radius: 8px; padding: .4rem .6rem;
background: var(--parchment); color: var(--text);
}
.pof-io.in.picked { background: var(--gba-green); color: #fff; }
.pof-io.out.picked { background: var(--fr-red); color: #fff; }
.pof-guest.right { border-color: var(--gold); box-shadow: 0 0 10px var(--gold-light), 0 3px 0 var(--gba-brown-dark); }
.pof-guest.wrong { border-color: var(--fr-red-dark); }
.pof-verdict { font-size: .62rem; color: var(--text-light); font-weight: 700; }
/* aftermath */
.pof-bait { display: block; margin-top: .3rem; color: var(--gba-brown); }
.pof-bait b { color: var(--fr-red-dark); }
.pof-aftermath {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: .5rem; width: min(100%, 720px); margin: .5rem auto 0; text-align: left;
}
.pof-aftermath-block {
border: 2px dashed var(--gba-brown-light); border-radius: 8px;
padding: .45rem .55rem; font-size: .68rem; color: var(--text-light);
}
.pof-aftermath-block strong { display: block; font-size: .66rem; color: var(--gba-brown); margin-bottom: .25rem; }
.pof-mini-row { display: flex; flex-wrap: wrap; gap: 2px; margin-top: .25rem; }
.pof-mini-row img { width: 28px; height: 28px; image-rendering: pixelated; }
@media (max-width: 560px) {
.pof-card { min-height: 128px; }
.pof-card img, .pof-guest img { width: 52px; height: 52px; }
.pof-guests { gap: .3rem; }
.pof-lock { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.pof-card.breaker, .pof-ball, .pof-lock:not(:disabled):active { animation: none !important; }
}
/* ============================================
TRIVIA v2 — locked tiles, estimate, gems
============================================ */
.gametype-card.locked {
filter: grayscale(.9) brightness(.85);
opacity: .6;
cursor: not-allowed;
}
.gametype-card .tile-lock {
position: absolute; top: 4px; right: 6px; font-style: normal; font-size: .9rem;
}
.gametype-card { position: relative; }
.trivia-estimate {
font-family: 'Press Start 2P', monospace; font-size: .48rem; line-height: 1.8;
color: var(--gba-brown); text-align: center; min-height: 1.4rem;
max-width: 720px; margin: .2rem auto .35rem;
}
.gem-grid .choice-btn { padding: .25rem .1rem; }
.choice-btn.type-gem-btn .pkd-gem { font-size: .62rem; padding: .3rem .45rem; }
.choice-btn.type-gem-btn.correct { border-color: var(--gba-green-dark); }
.choice-btn.type-gem-btn.wrong { border-color: var(--fr-red-dark); }
.triv-card .triv-tags { display: flex; gap: .3rem; justify-content: center; flex-wrap: wrap; margin-top: .3rem; }
/* Trivia subject sprite — centered, independent of the WTP arena cascade */
.triv-sprite-wrap { display: flex; justify-content: center; margin: .2rem 0 .35rem; }
.triv-sprite {
width: 140px; height: 140px; object-fit: contain; image-rendering: pixelated;
display: block; position: static; transform: none;
}
@media (max-width: 480px) { .triv-sprite { width: 110px; height: 110px; } }
.triv-tag {
font-size: .56rem; font-weight: 700; color: var(--gba-brown);
border: 2px solid var(--gba-brown-light); border-radius: 4px; padding: .08rem .3rem;
background: var(--parchment);
}
.trivia-teach, .trivia-teach-inline {
font-size: .72rem; color: var(--gba-brown-dark);
background: var(--gba-cream);
border: 2px dashed var(--gba-brown-light); border-radius: 6px;
padding: .35rem .5rem; margin-top: .4rem; text-align: center;
}
.trivia-teach-inline { display: block; margin-top: .3rem; }
.bd-cat-icon { width: 28px; text-align: center; font-size: 1.05rem; }
.bd-teach { display: block; color: var(--gba-brown); font-size: .62rem; margin-top: .1rem; }
.bd-wrong { color: var(--fr-red-dark); }
.results-lb-note { font-size: .68rem; color: var(--fr-red-dark); text-align: center; margin-top: .3rem; }
.gametype-card.shake { animation: pkd-shake .45s; }
/* ============================================
LIVING DEX v2 — the book, not the answer key
============================================ */
.dex-cell.unknown {
background:
repeating-linear-gradient(90deg, transparent 0 6px, rgba(115,86,49,.16) 6px 8px),
repeating-linear-gradient(0deg, transparent 0 6px, rgba(115,86,49,.16) 6px 8px),
var(--parchment);
border: 2px solid var(--gba-brown-light);
}
.dex-cell.unknown .dex-grass {
position: absolute; inset: 22% 15% 15%;
background:
radial-gradient(circle at 30% 100%, var(--gba-green) 0 18%, transparent 19%),
radial-gradient(circle at 55% 100%, var(--gba-green-dark) 0 15%, transparent 16%),
radial-gradient(circle at 78% 100%, var(--gba-green) 0 17%, transparent 18%);
opacity: .55;
}
.dex-cell.seen { border: 2px dashed var(--gba-brown); background: var(--parchment-dark); }
.dex-sil, .dex-cell.seen img { filter: brightness(0) contrast(2); opacity: .82; }
.dd-shadow img { filter: brightness(0) contrast(2); width: 96px; height: 96px; image-rendering: pixelated; }
.dex-cell .dex-num {
position: absolute; top: 1px; left: 3px; font-style: normal;
font-size: .42rem; color: var(--gba-brown); font-family: 'Press Start 2P', monospace;
}
.dex-track-pip {
position: absolute; top: 1px; right: 2px; font-style: normal;
font-size: .6rem; color: var(--fr-red); text-shadow: 0 0 3px var(--gold-light);
}
.dex-line-pip {
position: absolute; bottom: 1px; left: 3px; font-style: normal;
font-size: .44rem; color: #fff; background: var(--gba-brown); border-radius: 3px; padding: 0 2px;
}
.dex-progress-honest { position: relative; background: var(--parchment-dark); }
.dex-progress-honest .dex-seen-fill {
position: absolute; top: 0; bottom: 0; left: 0;
background: var(--gold-light); opacity: .65; z-index: 0;
}
.dex-progress-honest .hp-bar-fill { z-index: 1; }
.dd-mystery {
display: grid; place-items: center; width: 96px; height: 96px;
border: 3px dashed var(--gba-brown-light); border-radius: 10px;
font-family: 'Press Start 2P', monospace; color: var(--gba-brown-light); font-size: .7rem;
background: var(--parchment);
}
.unknown-card { border-style: dashed; }
.dd-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; }
.dd-gen-badge {
font-size: .5rem; font-family: 'Press Start 2P', monospace; color: var(--gba-brown);
border: 2px solid var(--gba-brown-light); border-radius: 4px; padding: .12rem .3rem; margin-left: .3rem;
}
.dd-family-row small { display: block; font-size: .6rem; color: var(--text-light); margin: .4rem 0 .2rem; }
.dd-family { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.dd-fam-member { position: relative; width: 44px; height: 44px; border: 2px solid var(--gba-brown-light); border-radius: 8px; display: grid; place-items: center; background: var(--parchment); }
.dd-fam-member img { width: 38px; height: 38px; image-rendering: pixelated; }
.dd-fam-member.shadow img { filter: brightness(0) contrast(2); opacity: .8; }
.dd-fam-arrow { font-style: normal; color: var(--gba-brown-light); font-size: .8rem; }
.dex-shiny-big { position: absolute; top: -6px; right: -6px; font-style: normal; color: var(--gold); text-shadow: 0 0 6px var(--gold-light); font-size: 1rem; }
.hub-fresh-row { display: flex; gap: .3rem; justify-content: center; flex-wrap: wrap; margin: .3rem 0; }
.hub-fresh-row img { width: 44px; height: 44px; image-rendering: pixelated; animation: ct-pop .4s ease-out backwards; }
.hub-fresh-row img:nth-child(2) { animation-delay: .06s; } .hub-fresh-row img:nth-child(3) { animation-delay: .12s; }
.hub-seen-row { display: flex; gap: .25rem; justify-content: center; flex-wrap: wrap; margin: .25rem 0 .1rem; opacity: .8; }
.hub-seen-row img { width: 30px; height: 30px; image-rendering: pixelated; }
/* ============================================
SAFARI — a wild encounter, not a quiz card
============================================ */
.safari-chooser { text-align: center; padding: 1rem 0; }
.saf-mode-btn {
display: block; width: min(420px, 90%); margin: .4rem auto;
border: 3px solid var(--gba-brown); border-radius: 8px;
background: var(--paper-light); color: var(--text); font-size: .78rem; font-weight: 700;
padding: .55rem .7rem; cursor: pointer; box-shadow: 0 3px 0 var(--gba-brown-dark);
}
.saf-mode-btn.selected { background: var(--gold-light); border-color: var(--gold); }
.safari-chooser-note { font-size: .68rem; color: var(--text-light); margin-top: .5rem; }
.safari-stage { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.safari-rustle {
font-family: 'Press Start 2P', monospace; font-size: .56rem; color: var(--gba-green-dark);
animation: rustle-wiggle .8s ease-in-out infinite;
}
@keyframes rustle-wiggle { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.saf-wrap { position: relative; overflow: hidden; border-radius: 10px; }
.saf-sil { transition: filter .5s ease; }
.saf-back .saf-sil { transform: scaleX(-1); }
.saf-rotate .saf-sil { transform: rotate(-14deg) scale(.92); }
.saf-crop { max-width: 180px; max-height: 180px; }
.saf-crop .saf-sil { transform: scale(1.7) translate(8%, 10%); }
.saf-grass::after {
content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
background:
radial-gradient(circle at 20% 100%, var(--gba-green-dark) 0 16%, transparent 17%),
radial-gradient(circle at 40% 100%, var(--gba-green) 0 14%, transparent 15%),
radial-gradient(circle at 60% 100%, var(--gba-green-dark) 0 15%, transparent 16%),
radial-gradient(circle at 80% 100%, var(--gba-green) 0 13%, transparent 14%);
opacity: .85;
}
.saf-sil.blur-peek { filter: none !important; transform: none; }
.saf-sil.fill-in { animation: saf-fill .9s ease forwards; filter: none; transform: none; }
@keyframes saf-fill { 0% { filter: brightness(0); } 40% { filter: brightness(0); } 100% { filter: none; } }
.safari-notes { min-height: 2rem; display: flex; flex-direction: column; gap: .25rem; align-items: center; }
.safari-note-stamp {
font-size: .66rem; color: var(--gba-brown-dark);
background: var(--gba-cream); border: 2px dashed var(--gba-brown-light); border-radius: 6px;
padding: .18rem .45rem;
}
.safari-token-row { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.saf-token-btn {
font-size: .62rem; font-weight: 700; cursor: pointer;
border: 2px solid var(--gba-brown); border-radius: 6px;
background: var(--paper-light); color: var(--text); padding: .22rem .4rem;
}
.saf-token-btn:disabled { opacity: .4; cursor: not-allowed; }
.safari-balls { display: flex; gap: .35rem; }
.saf-ball {
width: 18px; height: 18px; border-radius: 50%; display: inline-block;
background: linear-gradient(to bottom, var(--fr-red) 0 44%, #21170d 44% 56%, #fffdf2 56% 100%);
border: 2px solid #21170d;
}
.saf-ball.spent { filter: grayscale(1) brightness(.7); opacity: .45; }
#guess-input::placeholder { font-size: .8rem; }
@media (prefers-reduced-motion: reduce) {
.saf-sil.fill-in { animation: none; filter: none; }
.safari-rustle, .hub-fresh-row img { animation: none !important; }
}
/* ============================================
BRIEF 04 — type nameplates + class icons
Gen-III plate art carries the type name; the
colored gem text stays as the runtime flake
fallback (.no-plate). A MISSING FILE is a
test failure (ui.test.js), never this CSS.
============================================ */
.tp { display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.tp .tp-img { display: block; width: 100%; height: auto; image-rendering: pixelated; min-width: 0; }
/* Plate art spells the name — the text label is the accessible/fallback text. */
.tp .tp-txt {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: .62rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
opacity: 0; pointer-events: none; white-space: nowrap;
}
/* Runtime flake only: image failed → colored gem with readable text. */
.tp.no-plate .tp-img, .no-plate > .tp-img { display: none; }
.tp.no-plate .tp-txt, i.pkd-gem.no-plate > .tp-txt, i.ac-gem.no-plate > .tp-txt, i.type-badge.no-plate > .tp-txt, i.qtc-type-badge.no-plate > .tp-txt { opacity: 1; }
/* No-url gems (unknown type) render as text gems, not empty plates. */
.tp[data-no-art] .tp-img { display: none; }
.tp[data-no-art] .tp-txt { opacity: 1; }
/* Per-surface sizes — plates never shrink below GBA-readable (mobile floor 48px). */
.pkd-gem.tp { min-width: 56px; padding: .08rem .18rem; }
.pk-card-gems .pkd-gem.tp, .pkd-card-gems .pkd-gem.tp { min-width: 52px; }
.choice-btn.type-gem-btn .pkd-gem.tp { min-width: 72px; padding: .12rem .2rem; }
.qtc-type-badge.tp { min-width: 76px; padding: .14rem .22rem; margin-top: .2rem; }
.type-badge.tp { min-width: 60px; padding: .1rem .2rem; }
.ac-gem.tp { min-width: 48px; padding: .06rem .14rem; }
@media (max-width: 520px) {
.pkd-gem.tp { min-width: 48px; }
.choice-btn.type-gem-btn .pkd-gem.tp { min-width: 60px; }
.qtc-type-badge.tp { min-width: 64px; }
}
/* Miss/near/hit states keep working on plates (desaturated, never blank). */
.pkd-gem.miss.tp .tp-img { filter: saturate(.15) brightness(.75); }
/* Damage-class icons (B1/B2/B3) — local SVG plate + short label. */
.tp-class { display: inline-flex; align-items: center; gap: .22rem; font-style: normal;
font-size: .62rem; font-weight: 700; white-space: nowrap; }
.tp-class .tp-class-img { width: 14px; height: 14px; image-rendering: pixelated; flex: none; }
#hint-message .tp-class { vertical-align: -.15rem; }
/* Party stamps carry plates (A13): keep the stamp frame, art inside. */
.pof-stamp-plate { display: inline-flex; gap: .14rem; align-items: center; padding: .1rem .16rem; }
.pof-stamp-plate .pkd-gem.tp { min-width: 44px; position: static; }
.pof-stamp-plate .tp-txt { position: absolute; }
/* ============================================
HUB FOOTER — about link + build version
Sits directly above the fixed ad bar; present
on every screen without touching game flow.
============================================ */
.hub-footer {
position: fixed; left: 0; right: 0; bottom: var(--ad-bar-height);
z-index: 150; display: flex; gap: .55rem; align-items: center; justify-content: center;
padding: .32rem .5rem calc(.32rem + env(safe-area-inset-bottom, 0px));
background: var(--gba-brown-dark); color: var(--parchment);
border-top: 3px solid var(--gba-brown);
font-family: 'Press Start 2P', monospace;
font-size: .55rem; letter-spacing: .02em;
}
.hub-footer a { color: #ffd7a8; text-decoration: underline; }
.hub-footer a:hover, .hub-footer a:focus { color: #fff; }
#hub-version { opacity: .8; }
@media (max-width: 600px) {
.hub-footer { bottom: var(--ad-bar-height-mobile); font-size: .48rem; gap: .4rem; }
}
/* ============================================
TOUCH & MOBILE POLISH — iPad/phone comfort
- no double-tap-zoom delay on controls
- iOS never zooms on input focus (>=16px on
coarse pointers = readable + no jump)
- dialogs scroll instead of clipping on
short landscape viewports
============================================ */
button, [role="button"], input, a.btn-gba, .btn-gba, .btn-ghost, .hero-card, .answer-area button {
touch-action: manipulation;
}
html { -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) {
#guess-input, #pokedle-input, #pof-freetext, .ac-input, input[type="text"], input[type="number"] {
font-size: max(16px, 1em); /* iOS focus-zoom guard */
min-height: 48px;
}
button, [role="button"] { min-height: 44px; } /* Apple HIG touch floor */
}
/* Overlays must never trap content off-screen (iPhone landscape, iPad split) */
.rankup-card, .npc-dialog-box, .pof-builder, .pkd-drawer {
max-height: min(86vh, 86dvh);
overflow-y: auto;
overscroll-behavior: contain;
}
/* Keyboard users get a clear GBA-gold focus ring (touch keeps :focus-visible quiet) */
:focus-visible { outline: 3px solid #c9a227; outline-offset: 2px; border-radius: 4px; }
/* ============================================
DUEL LOBBY PANEL — one GBA window
The lobby sits in a proper paper window (like
every setup screen); chips are inset wells on
it, selected = gold. No floating rectangles.
============================================ */
.lobby-panel {
width: min(100%, 620px);
background: var(--paper-light);
border: 4px solid var(--gba-brown);
border-radius: 14px;
padding: .9rem 1rem 1.1rem;
position: relative;
box-shadow: 0 4px 0 var(--gba-brown-dark);
display: flex; flex-direction: column; align-items: center;
margin: .4rem 0 1rem;
}
.lobby-panel::before {
content: ""; position: absolute; inset: 4px;
border: 2px solid var(--gba-stone); border-radius: 9px;
pointer-events: none;
}
.lobby-panel .section-label { margin-top: .7rem; }
/* ============================================
MOBILE STICKY ACTION BAR & SAFE AREAS
============================================ */
@media (max-width: 700px) {
.pkd-input-zone, #text-input-area {
position: sticky;
bottom: calc(var(--ad-bar-height-mobile) + env(safe-area-inset-bottom, 0px));
background: var(--parchment);
padding: .45rem .6rem;
border-top: 3px solid var(--gba-brown);
border-radius: 10px 10px 0 0;
z-index: 100;
box-shadow: 0 -4px 12px rgba(42, 26, 14, 0.2);
}
.pkd-go, #submit-guess {
min-width: 54px;
height: 52px;
}
}
/* Button squash feedback animation */
.btn-gba.squashing {
animation: btn-squash 90ms ease-out forwards;
}
@keyframes btn-squash {
0% { transform: scale(1); }
50% { transform: scale(0.93) translateY(2px); }
100% { transform: scale(1); }
}
.lobby-panel #lobby-host-controls { width: 100%; display: flex; flex-direction: column; align-items: center; }
.lobby-panel .gametype-grid {
max-width: 420px;
width: auto;
margin: 0 auto .2rem;
justify-content: center;
}
#lobby-host-controls[style*="display:none"] + .lobby-wait-note,
.lobby-wait-note { display: none; }
.lobby-panel .btn-ghost { margin-top: .8rem; align-self: center; }
#lobby-start-btn { align-self: center; margin: .8rem auto .4rem; min-width: 220px; }
.lobby-panel #lobby-host-controls > * { margin-bottom: .35rem; }
.lobby-panel #lobby-host-controls > *:last-child { margin-bottom: 0; }
/* LIVING POKÉDEX CARD — restyled in HOME BROADSHEET v10 at end of file.
Keep the pop keyframes; sprite trays reuse them. */
@keyframes pokedex-card-pop {
from { transform: scale(0) rotate(-15deg); opacity: 0; }
to { transform: scale(1) rotate(0); opacity: 1; }
}
/* ============================================
HOME POLISH v9 — browser surfaces + paper rows
============================================ */
/* Themed browser chrome: selection, caret, scrollbars, link underlines.
The cheapest signal a page was built, not assembled. */
::selection { background: var(--gold-light); color: var(--gba-brown-dark); }
input, textarea { caret-color: var(--fr-red-dark); }
html { scrollbar-color: var(--gba-brown) var(--parchment-dark); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--parchment-dark); }
::-webkit-scrollbar-thumb {
background: var(--gba-brown);
border: 3px solid var(--parchment-dark); border-radius: 8px;
}
.hub-footer a, .select-all-btn { text-underline-offset: 3px; }
/* Timers and scores align while counting */
.info-badge, .duel-timer-text, .results-score, .pkd-score-line,
.lb-score, .sb-score, .dls-score, .today-reset, .daily-reset-line {
font-variant-numeric: tabular-nums;
}
/* Today's Paper rows are fully clickable (daily-hub.js) — see v10 for styling */
.today-row { cursor: pointer; }
.today-row .btn-gba { min-width: 96px; }
/* Mobile wordmark size is set in HOME BROADSHEET v10 */
/* ════════════════════════════════════════════
HOME BROADSHEET v10
One sheet of paper over the living town.
The masthead sits on the sky; everything
below it is a single parchment broadsheet:
front-page game headlines, the Today's Paper
section, rank + records side by side, and the
Living Pokédex strip — separated by newsprint
rules instead of floating cards.
════════════════════════════════════════════ */
:root {
--sheet-edge: var(--gba-brown);
--rule-dash: rgba(154,132,85,.55); /* stone, dashed newsprint rules */
}
/* ---- shared drawn icons ---- */
.ico {
width: 20px; height: 20px; flex: none;
fill: none; stroke: currentColor; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
/* ---- masthead on the sky band ---- */
.hub-masthead {
display: flex; flex-direction: column; align-items: center;
text-align: center; margin-bottom: .55rem;
}
#start-screen .title-pixel {
font-size: clamp(2.1rem, 6.5vw, 3.4rem);
line-height: 1.2; letter-spacing: .02em;
}
.local-play-note {
font-size: clamp(.74rem, 1.5vw, .86rem);
color: var(--text); background: rgba(255,247,223,.94);
border: 2px solid var(--gba-brown); border-radius: 999px;
padding: .34rem .95rem; margin-top: .65rem; font-weight: 700;
box-shadow: 0 3px 0 var(--gba-brown-dark);
}
/* sound chip */
.snd-btn { gap: .4rem; border-radius: 999px; padding-inline: .75rem; }
.snd-btn .ico { width: 16px; height: 16px; }
.snd-btn .i-snd-off { display: none; }
.snd-btn[aria-pressed="false"] .i-snd-on { display: none; }
.snd-btn[aria-pressed="false"] .i-snd-off { display: block; }
.snd-btn[aria-pressed="false"] { opacity: .8; }
/* ---- the broadsheet itself ---- */
.paper-sheet {
position: relative; z-index: 1;
width:min(100%,960px);
margin: .9rem auto 0;
display: flex; flex-direction: column;
background: linear-gradient(180deg, var(--paper-light) 0%, var(--parchment) 100%);
border: 4px solid var(--sheet-edge); border-radius: 18px;
box-shadow:
0 0 0 3px var(--gba-stone),
0 9px 0 var(--gba-brown-dark),
0 22px 44px rgba(32,22,10,.38);
padding: 1.15rem clamp(.75rem, 2.4vw, 1.5rem) 1.4rem;
}
.paper-sheet::before {
content: ""; position: absolute; inset: 5px;
border: 2px solid var(--gba-stone); border-radius: 13px;
pointer-events: none;
}
.sheet-rule {
width: calc(100% - 1.4rem); margin: 1.1rem auto;
border: none; border-top: 2px dashed var(--rule-dash);
}
/* ---- front page: three games, one anatomy ---- */
.hero-games {
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
width: 100%; margin: .45rem 0 0;
}
.hero-games-3 { grid-template-columns: repeat(3, 1fr); }
.hero-card {
position: relative;
min-height: 208px; padding: 1.35rem 1rem 1.05rem;
border-radius: 14px; border: 4px solid; text-align: center;
cursor: pointer; overflow: visible;
transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s cubic-bezier(.22,1,.36,1), filter .12s;
}
button.hero-card { appearance: none; width: 100%; color: var(--text-white); font: inherit; }
.hero-card:hover:not(:disabled) { transform: translateY(-4px); filter: brightness(1.06); }
.hero-card:active:not(:disabled) { transform: translateY(2px); }
.hero-wtp {
background: linear-gradient(165deg, #2d5f1f 0%, #16330e 100%);
border-color: #4a8a3a;
box-shadow: 0 7px 0 #102a09, 0 16px 26px rgba(0,0,0,.32);
}
.hero-trivia {
background: linear-gradient(165deg, #59402a 0%, #33200f 100%);
border-color: #8b6f47;
box-shadow: 0 7px 0 #241608, 0 16px 26px rgba(0,0,0,.32);
}
.hero-duel {
background: linear-gradient(165deg, #27407c 0%, #101d40 100%);
border-color: #3a5cb8;
box-shadow: 0 7px 0 #0b1430, 0 16px 26px rgba(0,0,0,.32);
}
.hero-card:hover.hero-wtp { box-shadow: 0 11px 0 #102a09, 0 22px 34px rgba(0,0,0,.36); }
.hero-card:hover.hero-trivia { box-shadow: 0 11px 0 #241608, 0 22px 34px rgba(0,0,0,.36); }
.hero-card:hover.hero-duel { box-shadow: 0 11px 0 #0b1430, 0 22px 34px rgba(0,0,0,.36); }
.hero-card:active.hero-wtp { box-shadow: 0 3px 0 #102a09, 0 8px 14px rgba(0,0,0,.3); }
.hero-card:active.hero-trivia { box-shadow: 0 3px 0 #241608, 0 8px 14px rgba(0,0,0,.3); }
.hero-card:active.hero-duel { box-shadow: 0 3px 0 #0b1430, 0 8px 14px rgba(0,0,0,.3); }
/* art slots — each card leads with its own real artifact */
.hero-screen {
width: 108px; height: 84px; margin: 0 auto .7rem;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(180deg, #0d1b12, #071009);
border-radius: 10px;
box-shadow:
inset 0 0 0 3px rgba(255,248,223,.1),
inset 0 5px 14px rgba(0,0,0,.78),
0 0 0 4px #102a09,
0 0 0 6px rgba(255,248,223,.16);
}
.hero-silhouette-preview {
display: block; width: 60px; height: 60px; object-fit: contain;
image-rendering: pixelated;
filter: brightness(0) opacity(.92);
animation: hero-sil-bounce 2.2s ease-in-out infinite;
}
@keyframes hero-sil-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.hero-trivia-icons { display: flex; justify-content: center; align-items: center; height: 84px; margin-bottom: .7rem; }
.hero-trivia-icons img {
width: 64px; image-rendering: pixelated;
filter: drop-shadow(0 3px 4px rgba(0,0,0,.55));
}
.hero-trivia-icons img:nth-child(1) { transform: rotate(-9deg) translateY(6px); z-index: 1; }
.hero-trivia-icons img:nth-child(2) { transform: translateY(-3px); z-index: 2; margin: 0 -10px; }
.hero-trivia-icons img:nth-child(3) { transform: rotate(9deg) translateY(6px); z-index: 1; }
.hero-duel-icon {
font-family: 'Press Start 2P', monospace; font-size: 1.05rem; color: #ffe66d;
width: 76px; height: 76px; margin: 0 auto .7rem;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 50% 36%, #16264d, #0c1734);
border-radius: 50%;
box-shadow:
inset 0 -6px 10px rgba(0,0,0,.55),
inset 0 3px 6px rgba(120,150,255,.28),
0 0 0 4px #0b1430,
0 0 0 6px rgba(255,230,109,.3);
text-shadow: 2px 2px 0 #000;
animation: duel-pulse 2.4s ease-in-out infinite;
}
@keyframes duel-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.hero-title {
display: block;
font-family: 'Press Start 2P', monospace; font-size: .95rem;
color: #fff8df; line-height: 1.55; margin-bottom: .45rem;
text-shadow: 2px 2px 0 rgba(0,0,0,.85);
}
.hero-desc {
font-size: .82rem; line-height: 1.45;
color: #fff8df; text-shadow: 1px 1px 0 rgba(0,0,0,.8);
}
/* corner ribbons punched over the card edge */
.hero-badge, .hero-badge-secondary, .hero-badge-live {
position: absolute; top: -11px; right: 10px;
font-family: 'Press Start 2P', monospace;
font-size: .54rem; letter-spacing: .08em; text-transform: uppercase;
padding: .38rem .5rem .34rem; border-radius: 7px; border: 3px solid;
text-shadow: none; line-height: 1;
}
.hero-badge {
background: var(--gold-light); color: #21170d; border-color: var(--gba-brown-dark);
box-shadow: 0 3px 0 rgba(46,29,18,.9);
}
.hero-badge-secondary {
background: var(--paper-light); color: var(--gba-brown-dark); border-color: var(--gba-brown-dark);
box-shadow: 0 3px 0 rgba(46,29,18,.9);
}
.hero-badge-live {
background: var(--fr-red); color: #fff; border-color: var(--fr-red-dark);
animation: live-blink 1.7s steps(2, start) infinite;
box-shadow: 0 3px 0 rgba(46,29,18,.9);
}
@keyframes live-blink { 0%,100%{opacity:1} 50%{opacity:.62} }
/* one authored entrance for the front page (skipped for reduced motion below) */
@media (prefers-reduced-motion: no-preference) {
.hero-games .hero-card { animation: card-in .55s cubic-bezier(.16,1,.3,1) backwards; }
.hero-games .hero-card:nth-child(2) { animation-delay: .08s; }
.hero-games .hero-card:nth-child(3) { animation-delay: .16s; }
}
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } }
/* ---- Today's Paper section ---- */
.today-panel { width: 100%; text-align: left; }
.today-head {
display: flex; align-items: center; gap: .55rem;
padding: .1rem .1rem .5rem;
border-bottom: 3px double var(--gba-stone);
}
.today-icon { color: var(--fr-red-dark); width: 24px; height: 24px; stroke-width: 1.8; }
.today-title {
font-family: 'Press Start 2P', monospace; font-size: .88rem;
color: var(--gba-brown-dark); letter-spacing: .03em;
}
.today-date { margin-left: auto; font-size: .74rem; font-weight: 700; color: var(--text-light); }
/* UTC daily countdown — one shared zero point for every daily (QA DAILY-UTC-RESET) */
.today-reset {
font-size: .68rem; font-weight: 800; color: var(--fr-red-dark);
font-variant-numeric: tabular-nums; cursor: help; white-space: nowrap;
}
.today-row {
display: flex; align-items: center; gap: .8rem;
padding: .68rem .45rem; border-radius: 12px;
transition: background .15s;
}
.today-row + .today-row { border-top: 1px dashed var(--rule-dash); }
.today-row:hover { background: rgba(240,192,64,.13); }
.tr-icon {
flex: none; width: 44px; height: 44px;
display: grid; place-items: center;
color: var(--gba-brown-light);
background: linear-gradient(180deg, var(--paper-light), var(--gba-cream));
border: 2.5px solid var(--gba-stone); border-radius: 12px;
box-shadow: inset 0 -5px 0 rgba(83,56,33,.1);
}
.tr-icon .ico { width: 23px; height: 23px; }
.tr-icon-gold {
color: #805b00;
background: linear-gradient(180deg, #fff3cf, var(--gold-light));
border-color: var(--gold);
}
.tr-main { flex: 1; min-width: 0; }
.tr-main strong {
display: block; font-family: 'Press Start 2P', monospace;
font-size: .66rem; line-height: 1.6;
color: var(--text); margin-bottom: .22rem;
}
.tr-main small { display: block; font-size: .74rem; line-height: 1.45; color: var(--text-light); }
#today-panel .daily-preview { display: block; font-size: .66rem; color: var(--text-light); margin-top: .12rem; }
.streak-fire { color: var(--fr-red-dark); font-weight: 800; }
.streak-fire::before {
content: "";
display: inline-block; width: .72em; height: 1em; margin-right: .28em;
vertical-align: -.14em;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.today-row .btn-gba { margin-left: auto; flex: none; }
.today-row .btn-gba:disabled {
background: var(--gba-stone); color: #fffdf2;
box-shadow: 0 3px 0 var(--gba-brown-light);
filter: none; opacity: .92; cursor: default;
}
/* Weekend Challenge — special edition of the paper */
.weekend-row {
border: 2.5px solid var(--gold); border-radius: 13px;
background:
linear-gradient(135deg, rgba(240,192,64,.2), rgba(240,192,64,.05));
padding: .55rem .6rem; margin: .55rem 0;
}
.today-head ~ .today-row:first-of-type { margin-top: .35rem; }
#weekend-clock { display: block; }
.weekend-row .tr-main strong { color: #805b00; }
/* ---- rank + records, two columns of one page ---- */
.home-duo {
display: grid; grid-template-columns: 1fr 1.15fr;
gap: 1.1rem; align-items: stretch; width: 100%;
}
.trainer-rank-bar {
min-width: 0;
display: flex; flex-direction: column; justify-content: center;
background: linear-gradient(180deg, var(--paper-light), var(--gba-cream));
border: 3px solid var(--gba-stone); border-radius: 13px;
padding: .8rem .95rem;
}
.trainer-rank-label {
font-size: .78rem; color: var(--text);
display: flex; justify-content: space-between; align-items: baseline;
gap: .5rem; margin-bottom: .45rem;
}
.trk-head {
font-family: 'Press Start 2P', monospace; font-size: .6rem;
color: var(--gba-brown); letter-spacing: .04em;
}
.trainer-rank-label .rank-name { font-weight: 900; color: var(--fr-red-dark); white-space: nowrap; }
.rank-sub { font-size: .72rem; line-height: 1.5; color: var(--text-light); text-align: left; margin-top: .45rem; }
.lb-block { min-width: 0; display: flex; flex-direction: column; }
.leaderboard-tabs { padding-left: .35rem; }
.lb-panel { flex: 1; }
/* ---- Living Pokédex strip ---- */
.pokedex-card {
width: 100%;
display: flex; align-items: center; flex-wrap: wrap; gap: .55rem 1rem;
background: linear-gradient(135deg, var(--parchment), var(--paper-light));
border: 3px solid var(--gba-stone); border-radius: 14px;
padding: .8rem .95rem;
}
.pokedex-card-head {
display: flex; align-items: center; gap: .6rem;
min-width: 216px; flex: 0 1 auto; margin: 0;
}
.pokedex-card-icon {
flex: none; width: 42px; height: 42px;
display: grid; place-items: center;
color: var(--fr-red-dark);
background: linear-gradient(180deg, var(--paper-light), var(--gba-cream));
border: 2.5px solid var(--gba-stone); border-radius: 12px;
}
.pokedex-card-icon .ico { width: 24px; height: 24px; stroke-width: 1.8; }
.pokedex-card-title { flex: 1; min-width: 0; }
.pokedex-card-title strong {
display: block; font-family: 'Press Start 2P', monospace;
font-size: .7rem; color: var(--gba-brown-dark); margin-bottom: .25rem;
}
.pokedex-card-title small {
display: block; font-size: .74rem; color: var(--text-light);
font-weight: 700;
}
.pokedex-card-bar {
flex: 1 1 170px; height: 12px;
background: var(--gba-brown-dark);
border: 2px solid var(--gba-brown); border-radius: 7px;
overflow: hidden;
}
.pokedex-card-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--hp-green), var(--hp-yellow));
transition: width .3s ease;
}
.pokedex-card-sprites {
display: flex; gap: .25rem; flex-wrap: wrap;
flex: 1 2 220px; justify-content: center; min-height: 42px;
}
.pokedex-card-sprites img {
width: 42px; height: 42px;
image-rendering: pixelated;
filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
animation: pokedex-card-pop .4s ease-out backwards;
}
.pokedex-card-sprites img:nth-child(odd) { animation-delay: .08s; }
.pokedex-card-sprites .pd-shadow {
width: 42px; height: 42px; border-radius: 50%;
background: radial-gradient(circle, rgba(46,29,18,.5) 30%, transparent 31%);
}
.pokedex-card-open { margin-left: auto; flex: none; font-size: .68rem; min-height: 48px; }
/* ---- responsive broadsheet ---- */
@media (max-width: 820px) {
.home-duo { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
#start-screen .title-pixel { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
.hero-games { grid-template-columns: 1fr 1fr; gap: .6rem; }
.hero-wtp { grid-column: 1 / -1; min-height: 158px; }
.hero-trivia, .hero-duel { min-height: 128px; padding: 1.1rem .6rem .9rem; }
.hero-screen { width: 92px; height: 70px; margin-bottom: .5rem; }
.hero-silhouette-preview { width: 50px; height: 50px; }
.hero-trivia-icons { height: 70px; margin-bottom: .5rem; }
.hero-trivia-icons img { width: 52px; }
.hero-duel-icon { width: 58px; height: 58px; font-size: .85rem; margin-bottom: .5rem; }
.hero-title { font-size: .8rem; line-height: 1.5; }
.hero-desc { font-size: .72rem; }
.hero-badge, .hero-badge-secondary, .hero-badge-live { font-size: .48rem; top: -9px; right: 8px; padding: .3rem .4rem .26rem; }
.tr-icon { width: 40px; height: 40px; border-radius: 10px; }
.tr-main strong { font-size: .6rem; }
.tr-main small { font-size: .7rem; }
.today-title { font-size: .74rem; }
.today-date { font-size: .68rem; }
}
@media (max-width: 560px) {
/* the paper head folds: title row, then date + countdown beneath it */
.today-head { flex-wrap: wrap; row-gap: .1rem; }
.today-head::after { content: ""; width: 100%; order: 3; height: 0; }
.today-date { margin-left: auto; order: 1; }
.today-reset { margin-left: 0; order: 2; font-size: .62rem; }
}
@media (max-width: 520px) {
/* Reserve open town between the tagline and the sheet so wild Pokémon
stay tappable on phones (bg.js measures note→heroes). */
.paper-sheet { margin-top: 6.6rem; }
.paper-sheet { padding-inline: .7rem; }
.hero-games { gap: .5rem; }
.hero-card { padding-inline: .55rem; }
.today-row { gap: .55rem; padding-inline: .3rem; }
.today-row .btn-gba { min-width: 84px; }
.pokedex-card-open { width: 100%; margin-left: 0; }
}
/* Night expedition homepage. Existing game screens retain their own palette. */
body:has(#start-screen.active) { background: #08172d; }
body:has(#start-screen.active) #bg-canvas { filter: hue-rotate(125deg) brightness(.4) saturate(.8); }
#start-screen {
--text: #f5f8ff;
--text-light: #c4d4e9;
--gba-brown: #a9c5e8;
--gba-brown-dark: #f5f8ff;
--gba-brown-light: #c4d4e9;
--fr-red-dark: #ff9cae;
--rule-dash: #334f72;
padding: 0;
color: var(--text);
background: linear-gradient(#08172d 0%, #0b1e39 85%, transparent 100%);
}
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; transform: translateY(-150%); padding: 12px 20px; background: #f5f8ff; color: #08172d; border-radius: 6px; }
.skip-link:focus { transform: translateY(0); }
.skip-link:focus-visible { outline: 3px solid #ffdc73; outline-offset: 5px; }
#start-screen :focus-visible { outline: 3px solid #ffdc73; outline-offset: 5px; }
#start-screen [id] { scroll-margin-top: 24px; }
#start-screen .hub-masthead { width: 100%; flex-direction: row; justify-content: space-between; gap: 24px; margin: 0; padding: 20px max(24px, calc((100% - 1200px)/2)); border-bottom: 1px solid #334f72; background: #08172d; }
.hub-brand { display: flex; align-items: center; gap: 14px; color: #f5f8ff; text-decoration: none; font-family: 'Press Start 2P', monospace; font-size: 25px; }
.brand-ball { width: 38px; height: 38px; flex: none; position: relative; border: 3px solid #020b19; border-radius: 50%; background: linear-gradient(#ee4f5c 0 44%, #020b19 44% 56%, #f5f8ff 56%); box-shadow: 0 0 0 1px #9fb2cc; }
.brand-ball::after { content: ''; position: absolute; width: 13px; height: 13px; top: 10px; left: 10px; border: 3px solid #020b19; border-radius: 50%; background: #f5f8ff; }
.hub-nav { display: flex; align-items: center; gap: 6px; }
.hub-nav a, .hub-nav button { padding: 12px 14px; min-height: 44px; border: 0; background: transparent; color: #e0eafb; font: 600 14px/1.5 system-ui, sans-serif; text-decoration: none; border-radius: 6px; cursor: pointer; }
.hub-nav [aria-current] { background: #142f50; box-shadow: 0 2px #79d8ff; }
.hub-nav a:hover, .hub-nav button:hover { background: #24476d; }
#start-screen .home-tools { position: static; flex: none; }
#start-screen .snd-btn { color: #e0eafb; background: #142f50; border: 1px solid #6989af; box-shadow: none; min-height: 44px; font: 600 14px/1.5 system-ui, sans-serif; }
#start-screen .paper-sheet { width: min(100% - 48px, 1200px); margin: 0 auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
#start-screen .paper-sheet::before { content: none; }
.feature-hero { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 56px; padding: 58px 12px 48px; isolation: isolate; }
.feature-hero::before { content: ''; position: absolute; z-index: -1; inset: 0 -24px; background: radial-gradient(ellipse at 80% 50%, #164976 0, transparent 65%); }
.feature-copy { max-width: 490px; }
.feature-intro { color: #89ceff; margin-bottom: 18px; font-weight: 600; }
.feature-copy h1 { font: 400 clamp(25px, 3.6vw, 43px)/1.5 'Press Start 2P', monospace; letter-spacing: -1.5px; margin: 0 0 18px; color: #f5f8ff; text-shadow: 0 4px #183f69; }
.feature-copy > p:not(.feature-intro) { font-size: 18px; line-height: 1.7; color: #d5e3f5; max-width: 43ch; }
.feature-play { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; background: #bd2943; color: #fff; border: 2px solid #ff7d91; border-radius: 10px; padding: 16px 24px; margin-top: 24px; font: 700 20px/1.5 system-ui, sans-serif; cursor: pointer; box-shadow: 0 5px 0 #681b30; }
.feature-play:hover { background: #a91e37; }
.feature-benefits { display: flex; flex-wrap: wrap; gap: 12px 20px; list-style: none; margin-top: 30px; color: #d5e3f5; font-size: 14px; }
.feature-benefits li::before { content: '✓'; color: #89ceff; margin-right: 6px; }
.scanner { border: 2px solid #76dfff; border-radius: 20px; padding: 22px; background: #09243f; box-shadow: 0 0 0 8px #132f50, 0 0 0 10px #356087, inset 0 0 28px #14668b, 0 15px 50px #020b1980; transform: rotate(2deg); }
.scanner-top { display: flex; justify-content: space-between; gap: 12px; color: #9de8ff; font: 400 12px/1.6 'Press Start 2P', monospace; }
.scanner-top span:first-child { font-size: 24px; }
.scanner-display { height: 272px; display: grid; place-items: center; position: relative; margin: 14px 0; background: linear-gradient(#54cdff0c 1px, transparent 1px), linear-gradient(90deg, #54cdff0c 1px, transparent 1px); background-size: 24px 24px; }
.scanner-ball { position: absolute; width: 240px; height: 240px; border-radius: 50%; border: 35px solid #67dcff; opacity: .75; box-shadow: 0 0 70px #12beff, inset 0 0 35px #12beff; }
.scanner-ball::after { content: ''; position: absolute; height: 16px; background: #09243f; top: 77px; left: -35px; right: -35px; }
.scanner-display img { position: relative; width: 270px; height: 270px; object-fit: contain; image-rendering: pixelated; filter: brightness(0) drop-shadow(0 0 3px #b1efff); }
.scanner-question { position: absolute; right: 14px; bottom: 8px; color: #a1e9ff; font: 32px 'Press Start 2P', monospace; }
.scanner-bottom { text-align: center; color: #adebff; font: 12px/1.8 'Press Start 2P', monospace; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0 20px; }
.section-heading h2 { display: flex; align-items: center; gap: 10px; font-size: 23px; }
.section-heading .ico { color: #89ceff; width: 28px; height: 28px; }
.section-heading a { color: #a5d9ff; font-size: 14px; text-underline-offset: 4px; padding: 10px 0; }
#start-screen .hero-games { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; margin: 0; }
#start-screen .hero-card { display: flex; flex-direction: column; align-items: center; min-height: 255px; padding: 18px 14px 14px; background: linear-gradient(150deg,#193b68,#0c203d); border: 1px solid #7998bc; box-shadow: 0 4px 8px #020b1940; border-radius: 15px; animation: none; grid-column: auto; }
#start-screen .hero-card:hover { transform: none; filter: none; border-color: #a7e4ff; box-shadow: 0 0 0 2px #89ceff; }
#start-screen .hero-wtp { border: 2px solid #89ceff; background: radial-gradient(ellipse at 50% 25%, #2464a2, #102847 70%); }
#start-screen .hero-screen { width: 100%; height: 100px; border: 0; background: none; box-shadow: none; margin: 0 0 12px; }
#start-screen .hero-silhouette-preview { width: 108px; height: 108px; animation: none; filter: brightness(0) drop-shadow(0 0 2px #9ae8ff); }
#start-screen .hero-trivia-icons, #start-screen .game-art { height: 100px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
#start-screen .hero-trivia-icons img { width: 52px; }
.game-art img { object-fit: contain; image-rendering: pixelated; }
.party-art img { width: 60px; height: 80px; margin: 0 -9px; }
#start-screen .hero-duel-icon { height: 80px; width: 80px; margin: 10px auto 22px; animation: none; color: #89ceff; }
#start-screen .hero-title { font: 750 17px/1.4 system-ui, sans-serif; color: #f5f8ff; text-shadow: none; margin-bottom: 6px; }
#start-screen .hero-title br { display: none; }
#start-screen .hero-title br::after { content: ' '; }
#start-screen .hero-desc { color: #d5e3f5; font-size: 14px; line-height: 1.5; text-shadow: none; margin-bottom: 16px; }
.card-play { width: 100%; margin-top: auto; padding: 8px; border-radius: 8px; background: #deedff; color: #123b72; font-weight: 800; }
.home-dashboard { display: grid; grid-template-columns: 1.45fr 1fr .95fr; align-items: stretch; gap: 18px; margin-top: 24px; }
#start-screen .today-panel, #start-screen .home-duo, #start-screen .pokedex-card { border: 1px solid #466489; border-radius: 16px; background: #0e223d; padding: 18px; min-width: 0; }
#start-screen .today-head { flex-wrap: wrap; border-bottom: 1px solid #334f72; gap: 8px; padding-bottom: 14px; }
#start-screen .today-title, #start-screen .trk-head, #start-screen .pokedex-card-title h2 { font: 750 18px/1.4 system-ui, sans-serif; letter-spacing: 0; color: #f5f8ff; }
#start-screen .today-date { font-size: 12px; }
#start-screen .today-reset { color: #ffafbd; font-size: 12px; white-space: normal; }
#start-screen .today-row { border-radius: 0; gap: 10px; padding: 13px 0; }
#start-screen .today-row + .today-row { border-top: 1px solid #283f5f; }
#start-screen .today-row:hover { background: #152e4d; }
#start-screen .tr-icon, #start-screen .pokedex-card-icon { color: #ffd974; border: 1px solid #647690; background: #243950; border-radius: 9px; width: 36px; height: 40px; box-shadow: none; }
#start-screen .tr-main strong { font: 700 14px/1.5 system-ui, sans-serif; color: #f5f8ff; }
#start-screen .tr-main small, #start-screen #today-panel .daily-preview { font-size: 13px; line-height: 1.5; color: #c4d4e9; }
#start-screen .btn-gba { font: 750 14px/1.5 system-ui, sans-serif; text-shadow: none; border: 1px solid #ff7d91; border-radius: 8px; background: #bd2943; color: #fff; box-shadow: none; min-height: 44px; padding: 8px 14px; }
#start-screen .btn-gba-green { border-color: #7ddfa9; background: #185638; }
#start-screen .btn-gba:hover { filter: brightness(1.1); transform: none; }
#start-screen .btn-gba:disabled { background: #334961; color: #e0eafb; border-color: #7489a4; opacity: 1; box-shadow: none; }
#start-screen .weekend-row { border: 1px solid #907946; padding: 10px 6px; background: #282c30; border-radius: 8px; }
#start-screen .home-duo { display: flex; flex-direction: column; gap: 18px; }
#start-screen .trainer-rank-bar { padding: 0; border: 0; background: none; justify-content: flex-start; }
#start-screen .trainer-rank-label { flex-direction: column; gap: 14px; }
#start-screen .rank-name { color: #ffafbd; font-size: 15px; white-space: normal; }
#start-screen .hp-bar { height: 14px; border: 1px solid #819bb8; background: #08172d; box-shadow: none; margin-top: 8px; }
#start-screen .hp-bar-fill, #start-screen .pokedex-card-bar-fill { background: #69e6a5; }
#start-screen .rank-sub { color: #d5e3f5; font-size: 14px; margin-top: 12px; }
.trainer-companion { display: flex; align-items: center; gap: 6px; margin: 12px 0; }
.trainer-companion img { image-rendering: pixelated; width: 90px; height: 90px; }
.trainer-companion p { color: #e0eafb; font-size: 14px; }
#start-screen .lb-tab { min-height: 44px; font: 600 14px/1.5 system-ui, sans-serif; border: 1px solid #7998bc; color: #d5e3f5; background: #102847; }
#start-screen .lb-tab.selected { background: #deedff; color: #123b72; }
#start-screen .lb-panel { font-size: 14px; padding: 14px; background: #102847; border: 1px solid #557ca9; color: #e0eafb; border-radius: 8px; box-shadow: none; }
#start-screen .pokedex-card { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 16px; }
#start-screen .pokedex-card-head { min-width: 0; }
#start-screen .pokedex-card-title small { font-size: 14px; margin-top: 8px; color: #d5e3f5; }
#start-screen .pokedex-card-bar { flex: none; height: 14px; border: 1px solid #819bb8; background: #08172d; }
#start-screen .pokedex-card-sprites { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; flex: 1; align-content: center; }
#start-screen .pokedex-card-sprites img, #start-screen .pokedex-card-sprites .pd-shadow { width: 100%; height: 82px; object-fit: contain; border-radius: 9px; background: #243e61; animation: none; }
#start-screen .pokedex-card-sprites .pd-shadow::after { content: '?'; display: grid; place-items: center; height: 100%; color: #a9c5e8; font: 24px 'Press Start 2P', monospace; }
#start-screen .pokedex-card-open { width: 100%; margin: auto 0 0; white-space: normal; }
.home-promos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.home-promo { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #102847; border: 1px solid #466e9b; border-radius: 14px; padding: 24px; overflow: hidden; }
.home-promo h2 { color: #a5d9ff; font-size: 23px; line-height: 1.3; margin-bottom: 10px; }
.home-promo p { font-size: 15px; color: #d5e3f5; max-width: 35ch; margin-bottom: 18px; }
.home-promo img { image-rendering: pixelated; object-fit: contain; flex: none; width: 135px; height: 150px; }
.outline-play { background: #173b67; color: #f5f8ff; border: 1px solid #89ceff; border-radius: 7px; min-height: 44px; padding: 10px 16px; font: 700 15px/1.5 system-ui, sans-serif; cursor: pointer; }
.outline-play:hover { background: #244f7f; }
.promo-vs { font: 36px 'Press Start 2P', monospace; color: #89ceff; text-shadow: 4px 4px #08172d; padding: 24px 10px; }
#start-screen .local-play-note { background: #0e223d; color: #c4d4e9; border: none; border-radius: 0; box-shadow: none; text-align: center; font-size: 14px; font-weight: 400; margin: 24px 0 0; padding: 12px; }
.home-landscape { height: 120px; }
body:has(#start-screen.active) .hub-footer { position: relative; bottom: auto; padding: 20px 24px; background: #08172d; color: #c4d4e9; font: 14px/1.5 system-ui, sans-serif; flex-wrap: wrap; }
body:has(#start-screen.active) .hub-footer a { color: #d5e3f5; }
@media (max-width: 1100px) {
#start-screen .hub-masthead { flex-wrap: wrap; gap: 14px; }
.hub-nav { order: 3; width: 100%; justify-content: center; }
.feature-hero { gap: 32px; padding-inline: 0; }
.home-dashboard { grid-template-columns: 1.25fr 1fr; }
#start-screen .pokedex-card { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
#start-screen .pokedex-card-sprites { grid-template-columns: repeat(4,1fr); grid-column: 2; grid-row: 1 / 4; }
.home-promo img { width: 95px; }
}
@media (max-width: 760px) {
#start-screen .paper-sheet { width: calc(100% - 32px); }
#start-screen .hub-masthead { padding: 18px 16px 12px; }
.hub-brand { font-size: 21px; gap: 10px; }
.hub-nav { justify-content: flex-start; overflow-x: auto; gap: 0; }
.hub-nav a, .hub-nav button { padding: 10px; white-space: nowrap; }
.feature-hero { grid-template-columns: 1fr; padding: 30px 4px; gap: 32px; }
.feature-copy { max-width: none; }
.feature-copy h1 { font-size: clamp(25px, 6vw, 40px); }
.feature-copy > p:not(.feature-intro) { font-size: 17px; }
.feature-benefits { margin-top: 22px; }
.scanner { width: min(100% - 12px, 480px); justify-self: center; padding: 18px; transform: none; }
.scanner-display { height: 210px; }
.scanner-display img { width: 230px; height: 230px; }
.scanner-ball { width: 200px; height: 200px; border-width: 28px; }
.scanner-ball::after { top: 62px; left: -28px; right: -28px; }
.scanner-top, .scanner-bottom { font-size: 10px; }
.section-heading { align-items: flex-start; }
.section-heading h2 { font-size: 21px; }
.section-heading a { max-width: 110px; text-align: right; padding-top: 3px; }
#start-screen .hero-games { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#start-screen .hero-card { min-height: 240px; padding: 14px 10px; }
#start-screen .hero-card:last-child { grid-column: 1 / -1; }
.home-dashboard { grid-template-columns: 1fr; }
#start-screen .pokedex-card { grid-column: auto; display: flex; }
#start-screen .pokedex-card-sprites { grid-template-columns: repeat(4, 1fr); }
#start-screen .pokedex-card-sprites img, #start-screen .pokedex-card-sprites .pd-shadow { height: 70px; }
.home-promos { grid-template-columns: 1fr; }
.home-promo { padding: 20px; }
#start-screen .today-row .btn-gba { min-width: 60px; }
#start-screen .today-head::after { content: none; }
}
@media (max-width: 380px) {
.hub-brand { font-size: 18px; }
#start-screen .snd-btn { padding-inline: 8px; }
.feature-copy h1 { font-size: 23px; }
.home-promo img { width: 70px; }
.promo-vs { font-size: 25px; padding-inline: 0; }
#start-screen .tr-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
#start-screen button, #start-screen a, .card-play, .scanner { border: 1px solid ButtonText; }
.scanner-display img { filter: brightness(0); }
}
#start-screen ::selection { background: #ffdc73; color: #08172d; }
body:has(#start-screen.active) .hub-footer { margin-bottom: var(--ad-bar-height); border-top: 1px solid #334f72; }
@media (max-width: 600px) {
body:has(#start-screen.active) .hub-footer { margin-bottom: var(--ad-bar-height-mobile); }
}
@media (prefers-contrast: more) {
#start-screen .trainer-rank-bar, #start-screen .lb-panel { background: #08172d !important; }
#start-screen .hero-card, #start-screen .today-panel, #start-screen .home-duo, #start-screen .pokedex-card { border-color: #c4d4e9; }
}
/* The landscape is decorative; all copy sits over an opaque reading surface. */
.feature-hero::before { background: linear-gradient(90deg, #08172d 5%, #08172dd9 40%, #08172d33), url('../assets/scenes/night-lake.svg') center 75% / cover; }
.home-landscape { height: 260px; margin: 0 calc((1200px - 100vw) / 2); background: #08172d url('../assets/scenes/night-lake.svg') center bottom / cover no-repeat; }
body:has(#start-screen.active) #ad-bar { background: #08172d; border-top: 1px solid #557ca9; box-shadow: none; }
body:has(#start-screen.active) #ad-bar::before, body:has(#start-screen.active) #ad-bar::after { content: none; }
body:has(#start-screen.active) #ad-bar .ad-content { background: #102847; border-color: #7998bc; color: #c4d4e9; }
body:has(#start-screen.active) #app-wrapper { padding-bottom: 0; }
#start-screen [hidden] { display: none; }
@media (max-width: 1248px) { .home-landscape { margin-inline: -24px; } }
@media (max-width: 760px) {
#start-screen .pokedex-card { align-items: stretch; }
#start-screen .pokedex-card-sprites { width: 100%; }
.home-landscape { margin-inline: -16px; height: 180px; }
}
body:not(:has(#start-screen.active)) .skip-link { display: none; }
/* Keep the home advertisement in the reading flow so it cannot cover controls. */
body:has(#start-screen.active) #ad-bar { position: relative; bottom: auto; }
body:has(#start-screen.active) .hub-footer { margin-bottom: 0; }
@media (max-width: 760px) {
.feature-hero::before { inset-inline: -16px; }
.hub-nav { flex-wrap: wrap; overflow: visible; }
}
.feature-copy { background: #08172d; }
#start-screen .lb-rank.gold { color: #ffdc73; }
#start-screen .lb-rank.silver { color: #d5e3f5; }
#start-screen .lb-rank.bronze { color: #ffc191; }
#start-screen .lb-game { background: #243e61; color: #e0eafb; border-color: #7998bc; font-size: 12px; }
#start-screen .lb-row { flex-wrap: wrap; font-size: 14px; }
#start-screen .lb-score { flex-basis: 100%; white-space: normal; text-align: right; }
#start-screen .lb-panel { max-height: 320px; overflow: auto; }
/* Accessibility review: controls, small screens, and user-controlled motion. */
:focus-visible { outline: 3px solid #153e73; outline-offset: 4px; }
.hub-footer :focus-visible { outline-color: #ffdc73; }
.hub-footer .motion-toggle { min-height: 44px; padding: 8px 12px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font: 600 14px/1.5 system-ui, sans-serif; cursor: pointer; }
.hub-footer { position: relative; bottom: auto; flex-wrap: wrap; margin-bottom: var(--ad-bar-height); font: 14px/1.5 system-ui, sans-serif; }
.practice-timing { display: flex; align-items: center; gap: 12px; width: min(100%, 420px); padding: 12px; margin: 12px 0; background: var(--paper-light); border: 1px solid var(--gba-brown); border-radius: 8px; font: 16px/1.5 system-ui, sans-serif; }
.practice-timing input { width: 24px; height: 24px; flex: none; accent-color: #185638; }
.practice-timing small { display: block; font-size: 14px; color: var(--text-light); }
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.motion-paused #particle-canvas, html.motion-paused #type-burst-overlay { visibility: hidden; }
@media (max-width: 600px) {
.hub-footer { margin-bottom: var(--ad-bar-height-mobile); bottom: auto; }
}
@media (max-width: 520px) {
.party-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pof-card { min-width: 0; }
.pof-card:last-child { grid-column: 1 / -1; }
.pof-freetext-row input { min-width: 0; width: 100%; }
.pof-select { max-width: 100%; }
}
.town-controls { padding: 16px; margin: 0 0 20px; color: #e0eafb; background: #102847; border: 1px solid #7998bc; border-radius: 8px; }
.town-controls summary { cursor: pointer; min-height: 44px; padding-block: 10px; font-weight: 700; }
.town-controls p { margin: 12px 0; }
#town-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#town-actions button { min-height: 44px; padding: 10px 14px; color: #f5f8ff; background: #173b67; border: 1px solid #89ceff; border-radius: 6px; font: 14px/1.5 system-ui, sans-serif; cursor: pointer; }
.npc-dialog-close { margin-top: 12px; min-height: 44px; padding: 8px 12px; background: var(--paper-light); color: var(--text); border: 2px solid var(--gba-brown); border-radius: 6px; font: 16px/1.5 system-ui, sans-serif; }
.npc-dialog-box:not(.show) { visibility: hidden; }
.next-question-btn { margin-top: 16px; }
.next-question-btn[hidden] { display: none; }
/* Ads and footer controls remain reachable without covering the active game. */
#ad-bar { position: relative; bottom: auto; }
.hub-footer { margin-bottom: 0; }
#app-wrapper { padding-bottom: 0; }
.npc-dialog-box { font: 16px/1.6 system-ui, sans-serif; user-select: text; cursor: auto; }
.npc-dialog-name { color: #5a4a2a; font-size: 16px; font-weight: 700; }
.wf-letter { position: relative; padding-bottom: 12px; }
.wf-letter small { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font: 700 12px/1 system-ui, sans-serif; }
.wordle-legend { flex-basis: 100%; font: 14px/1.5 system-ui, sans-serif; color: var(--text); background: var(--paper-light); padding: 8px; }
.pkd-type-result { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.pkd-type-result small { color: var(--text); font: 12px/1.3 system-ui, sans-serif; }