/* Hallmark · shape: app screen · genre: playful · theme: Hum (deal 2/3)
 * redesign: full · scope: app · nav: existing compact top bar
 * signature: real Pokémon image and one answer action · states: loading, empty, error, full
 * axes: light/rounded-sans/chromatic-yellow · posture: restrained app adaptation
 * contrast: measured palette, rendered audit unavailable · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R4 V3 · weakest: E, browser unavailable; preserve tested controls and use a single layout grid */
/* Hallmark · app adaptation: Japanese system face, no decorative texture or external fonts. */
@import url("./tokens.5650830af406.css");
@import url("./base.d40aef16afa3.css");

html, body { overflow-x: clip; }
body { background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); }
button, select, textarea { font-family: var(--font-body); }
h1, h2, h3, h4 { color: var(--color-ink); letter-spacing: var(--tracking-display); text-wrap: balance; }
h1 { max-width: none; font-size: var(--text-3xl); line-height: 1.35; font-weight: 800; }
p { line-height: 1.85; }
header { max-width: var(--container); height: 80px; padding: 0 var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.brand { font-size: var(--text-md); letter-spacing: 0; gap: var(--space-sm); }
.tag { border: 0; border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-on-ink); font-size: var(--text-xs); }
main { width: 100%; max-width: var(--container); padding: 0 var(--space-lg); margin: 0 auto var(--space-2xl); min-height: 560px; }
.intro { padding: var(--space-xl) 0 var(--space-lg); }
.intro h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-sm); }
.intro .muted { font-size: var(--text-md); color: var(--color-muted); }
main[data-screen] > .loading-state { display: block; text-align: center; }
main[data-screen] > .loading-state h1 { margin-inline: auto; }
main[data-screen] > .loading-state p { display: block; margin: 0 auto var(--space-lg); }
.eyebrow, .image-label { display: none; }
.muted, .small-note, .info p, .region-card > span:last-child { color: var(--color-muted); }
.small { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; }
.badge { font-size: var(--text-xs); line-height: 1.5; padding: var(--space-2xs) var(--space-sm); color: var(--color-mint-deep); background: var(--color-mint); border-radius: var(--radius-pill); }

/* The image is the game. A clear surface and fixed image box prevent layout jumps. */
.game { grid-template-columns: 1.1fr 1fr; min-height: 400px; border: 2px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-card); box-shadow: none; }
.art { min-width: 0; min-height: 400px; background: var(--color-paper-2); background-image: none; }
.art:before { width: 300px; height: 300px; background: var(--color-accent); }
.art img { width: 88%; max-width: 360px; height: 340px; object-fit: contain; filter: none; }
.info { padding: var(--space-xl); min-width: 0; }
.info h2 { max-width: none; font-size: var(--text-2xl); line-height: 1.5; margin: var(--space-md) 0; }
.info p { font-size: var(--text-md); margin: 0 0 var(--space-lg); }
.actions { gap: var(--space-sm); }
.region-label { font-size: var(--text-sm); color: var(--color-muted); }
select { width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-ink-2); border-radius: var(--radius-input); background: var(--color-card); color: var(--color-ink); font-size: var(--text-md); }
.primary, .secondary { min-height: 52px; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-stock); font-size: var(--text-md); font-weight: 700; line-height: 1.4; transition: transform var(--dur-micro) var(--ease-snap); }
.primary { color: var(--color-accent-ink); background: var(--color-accent); box-shadow: var(--shadow-control); border: 1px solid var(--color-accent-deep); }
.primary:hover { background: var(--color-accent); transform: translateY(-2px); }
.primary:active { transform: translateY(2px); }
.secondary { background: var(--color-card); color: var(--color-ink); border: 1px solid var(--color-edge); box-shadow: none; }
.secondary:hover { background: var(--color-paper-2); transform: none; }
.secondary:active { transform: translateY(1px); }
.primary:disabled, .secondary:disabled { background: var(--color-paper-2); color: var(--color-muted); border-color: var(--color-rule); box-shadow: none; cursor: not-allowed; opacity: 1; transform: none; }
.subtle { color: var(--color-muted); padding: var(--space-sm); font-size: var(--text-sm); min-height: 44px; }
.subtle:hover { color: var(--color-ink); background: var(--color-paper-2); }
.subtle:active { background: var(--color-rule); }
button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

/* Home: launch first, a daily invitation second, quiet exploration after that. */
main[data-screen="home"] > .intro { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; text-align: left; gap: var(--space-xl); padding: var(--space-xl) 0; }
main[data-screen="home"] > .intro h1 { margin: 0; max-width: 12em; font-size: 44px; line-height: 1.35; }
main[data-screen="home"] > .intro p { border-left: 0; max-width: 28em; }
.launch-game .info h2 { font-size: var(--text-2xl); }
.return-modes { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-lg); margin-top: var(--space-xl); }
.return-modes > section { border-radius: var(--radius-card); padding: var(--space-xl); }
.return-modes h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-md); }
.return-modes p { font-size: var(--text-md); margin: 0 0 var(--space-lg); }
.return-modes .daily-panel { background: var(--color-ink); border: 0; color: var(--color-on-ink); }
.daily-panel h2, .daily-panel p { color: var(--color-on-ink); }
.daily-panel .secondary { display: block; width: 100%; border: 1px solid var(--color-on-ink); background: var(--color-ink); color: var(--color-on-ink); }
.daily-panel .secondary:hover { background: var(--color-ink-2); }
.return-modes .review-panel { border: 1px solid var(--color-edge); background: var(--color-paper); }
.review-panel .secondary { width: 100%; }
.return-modes .small-note { margin: var(--space-md) 0 0; font-size: var(--text-sm); }
.region-section { margin: var(--space-2xl) 0 var(--space-xl); }
.region-section h2 { margin: 0 0 var(--space-lg); font-size: var(--text-2xl); }
.region-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-md); }
.region-card { min-width: 0; min-height: 148px; gap: var(--space-xs); padding: var(--space-lg); background: var(--color-card); border: 1px solid var(--color-edge); border-radius: var(--radius-stock); color: var(--color-ink); box-shadow: none; }
.region-card .small { display: none; }
.region-card strong { font-size: var(--text-lg); line-height: 1.55; overflow-wrap: anywhere; }
.region-card > span:last-child { font-size: var(--text-sm); }
.region-card:hover { border-color: var(--color-ink); background: var(--color-paper-2); }
.region-card:active { background: var(--color-mint); }
.utility-links { gap: var(--space-lg); font-size: var(--text-sm); }
.utility-links a { min-height: 44px; display: inline-flex; align-items: center; }

/* In-play copy stays calm; the answer and score carry the emphasis. */
.progress-row { margin: var(--space-lg) 0 var(--space-sm); font-size: var(--text-sm); gap: var(--space-md); }
.progress-row > span { min-width: 0; }
.progress-row .subtle { flex-shrink: 0; }
progress.progress { height: 8px; margin-bottom: var(--space-lg); color: var(--color-ink); background: var(--color-rule); }
progress.progress::-webkit-progress-bar { background: var(--color-rule); }
progress.progress::-webkit-progress-value { background: var(--color-ink); }
progress.progress::-moz-progress-bar { background: var(--color-ink); }
.info .answer-name { font-size: 36px !important; margin-bottom: var(--space-lg) !important; }
.trivia { padding: var(--space-lg); border-radius: var(--radius-stock); background: var(--color-paper-2); }
.trivia h3, .trivia h4, .trivia .name-origin h4 { color: var(--color-ink); font-size: var(--text-md); margin-bottom: var(--space-sm); }
.info .trivia p, .dex-note blockquote { font-size: var(--text-md); color: var(--color-ink-2); line-height: 1.85; }
.name-origin { background: var(--color-card); padding: var(--space-md); border-radius: var(--radius-input); }
.info .name-origin .origin-note, .name-origin small, .dex-note figcaption, .trivia span { color: var(--color-muted); font-size: var(--text-sm); }
.dex-note blockquote { border-left: 0; padding-left: 0; }
.dex-note { padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.image-message { background: var(--color-paper-2); color: var(--color-ink); padding: var(--space-lg); }
.score-box { background: var(--color-card); border: 2px solid var(--color-ink); border-radius: var(--radius-card); padding: var(--space-xl) var(--space-lg); }
.score { display: inline-block; color: var(--color-ink); font-size: 80px; font-variant-numeric: tabular-nums; line-height: 1.2; margin: var(--space-lg) 0; }
.score small { color: var(--color-muted); font-size: var(--text-xl); }
.share-actions, .result-next { gap: var(--space-sm); margin: var(--space-lg) auto; }
.review { gap: var(--space-sm); margin-top: var(--space-xl); }
.review figure { background: var(--color-paper-2); padding: var(--space-md) var(--space-xs); border-radius: var(--radius-stock); }
.review figcaption, .review span { font-size: var(--text-sm); color: var(--color-ink-2); }
.review img { margin-inline: auto; }
.settings-panel, .challenge-invite { border: 1px solid var(--color-edge); background: var(--color-card); border-radius: var(--radius-card); padding: var(--space-xl); }
.settings-panel h1 { font-size: var(--text-2xl); }
.metrics-grid > div { background: var(--color-paper-2); border-radius: var(--radius-stock); }
.metrics-grid dd { font-variant-numeric: tabular-nums; }
.feedback { color: var(--color-mint-deep); font-size: var(--text-md); }
.copy-text { font-size: var(--text-md); border-color: var(--color-ink); }
.game-guide { max-width: 760px; padding: 0 var(--space-lg); margin: var(--space-xl) auto var(--space-2xl); font-size: var(--text-md); color: var(--color-muted); }
.game-guide h2 { font-size: var(--text-lg); }
.game-guide h3 { font-size: var(--text-md); }
footer { max-width: var(--container); padding: var(--space-lg); gap: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
footer > span:first-child { font-size: var(--text-sm); }

@media (max-width: 650px) {
  header { height: 72px; padding-inline: var(--space-md); gap: var(--space-sm); }
  .brand { font-size: var(--text-sm); gap: var(--space-xs); }
  .tag { padding: var(--space-2xs) var(--space-xs); font-size: 11px; }
  main { padding-inline: var(--space-md); margin-bottom: var(--space-xl); }
  main[data-screen="home"] > .intro { grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-lg) 0; }
  main[data-screen="home"] > .intro h1 { font-size: 32px; }
  main[data-screen="home"] > .intro p { display: none; }
  .intro h1 { font-size: var(--text-2xl); }
  .intro { padding: var(--space-lg) 0; }
  .intro .muted { font-size: var(--text-md); }
  .game { grid-template-columns: 1fr; min-height: 0; border-radius: var(--radius-card); }
  .art { min-height: 280px; }
  .art:before { width: 240px; height: 240px; }
  .art img { max-width: 300px; height: 260px; }
  .launch-game .art { min-height: 232px; }
  .launch-game .art img { max-width: 260px; height: 224px; }
  .launch-game .art:before { width: 208px; height: 208px; }
  .info { padding: var(--space-lg); }
  .info h2 { font-size: var(--text-xl); }
  .launch-game .info h2 { font-size: var(--text-xl); margin-block: var(--space-sm); }
  .launch-game .info > h2, .launch-game .info > p { display: none; }
  .launch-game .badge { margin-bottom: var(--space-md); }
  .return-modes { grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
  .return-modes > section { padding: var(--space-lg); }
  .return-modes h2 { font-size: var(--text-xl); }
  .region-section { margin-top: var(--space-xl); }
  .region-section h2 { font-size: var(--text-xl); }
  .region-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-sm); }
  .region-card { padding: var(--space-md); min-height: 132px; }
  .region-card strong { font-size: var(--text-md); }
  .region-card > span:last-child { font-size: var(--text-xs); }
  .review { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .review figcaption, .review span { font-size: var(--text-sm); }
  .settings-panel { padding: var(--space-lg); }
  .settings-panel h1 { font-size: var(--text-xl); }
  .trivia { padding: var(--space-md); }
  .name-origin { padding: var(--space-sm); }
  .progress-row { align-items: flex-start; }
  footer { flex-direction: column; padding: var(--space-lg) var(--space-md); }
}
@media (max-width: 350px) {
  .brand { font-size: var(--text-xs); }
  .tag { font-size: 10px; }
  header .tag { display: none; }
  .region-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Shared X hashtag and community links; no third-party resources load here. */
.community-panel { margin-block: var(--space-xl); padding: var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper-2); }
.community-panel h2 { margin-block: var(--space-md); }
.community-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.community-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-md); border: 1px solid currentColor; border-radius: var(--radius-stock); color: var(--color-ink); font-weight: 700; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.community-link:hover { text-decoration: underline; }
.share-actions .community-link { width: 100%; }
@media (max-width: 650px) { .community-actions { flex-direction: column; } .community-panel { padding: var(--space-md); } }