/* Shared cartoon chrome. The actual game boards and sprites retain their own art. */
:root {
  --result-bg: #fffefb;
  --result-panel: #eef9ff;
  --result-text: #243f60;
  --result-muted: #4b617b;
  --result-accent: #a9e8c7;
  --result-accent-ink: #243f60;
  --result-edge: #243f60;
  --result-glow: #c6ebff;
}
.topbar { border-bottom: 2px solid #b7cbde; }
.brand-icon { border: 2px solid var(--ink); border-radius: 16px; color: var(--ink); background: var(--accent); box-shadow: 0 3px 0 #b9d4e7; }
.brand strong { font-weight: 800; letter-spacing: -.5px; }
.brand strong span { letter-spacing: 1.5px; }
.topbar .nav { min-height: 44px; font-weight: 650; }
.topbar .nav.active { border-color: var(--blue); }
.header-action { border-color: var(--line); background: var(--surface); border-radius: 14px; }
.player-profile { border: 2px solid var(--ink); border-radius: 18px; background: var(--surface); }
.player-avatar { border-color: var(--ink); }
.hero { border-bottom: 2px solid var(--line); }
.hero .hero-title { font-family: var(--display-font); font-weight: 800; letter-spacing: -.065em; line-height: 1.17; }
.hero .accent { color: var(--blue); }
.hero-art {
  height: 370px;
  border: 3px solid var(--ink);
  border-radius: 36px;
  background: #f9feff;
  background-image: radial-gradient(#d8ecf8 1px, transparent 1px);
  background-size: 18px 18px;
  box-shadow: 0 9px 0 #b9d4e7;
  overflow: hidden;
}
.cartoon-hero-scene { display: block; width: 100%; height: 100%; }
.hero-cta, .primary { border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 #83bdac; font-weight: 750; }
.hero-cta:hover, .primary:hover { background: #bff0d4; }
.hero-cta:active, .primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #83bdac; }
.hero-stat { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.hero-stat span { margin: 0 3px; }
.library-head h2 { font-weight: 800; letter-spacing: -.8px; }
.library-head h2 span, #fav-count { border: 1px solid var(--ink); color: var(--ink); background: #ffe1cb; font-weight: 700; }
.search-wrap { border: 2px solid var(--ink); border-radius: 16px; }
.search-wrap kbd { background: var(--soft); border-radius: 5px; }
.filters { min-width: 0; max-width: 100%; }
.filters button { min-height: 44px; border: 2px solid var(--ink); padding: 9px 15px; background: var(--surface); font-weight: 700; }
.filters button.active { background: var(--accent); color: var(--ink); box-shadow: 0 3px 0 #83bdac; }
.filters button:hover { background: #daf2e5; }
.random { min-height: 44px; padding: 7px 12px; border: 2px dashed var(--ink); border-radius: 15px; background: #fff1e5; font-weight: 700; }
.game-card { border: 2px solid var(--ink); border-radius: var(--card-radius); box-shadow: 0 5px 0 #b9d4e7; }
.game-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 8px 0 #b9d4e7; }
.card-art { width: 100%; height: 176px; border-bottom: 2px solid var(--ink); background: var(--stage); }
.card-info { padding: 17px 17px 19px; }
.card-info h3 { font-weight: 800; }
.card-meta { color: var(--muted); font-weight: 650; letter-spacing: .35px; }
.card-info p { font-size: 12px; }
.game-point-cost { border-color: #b7cbde; border-radius: 9px; padding: 4px 8px; background: #edf8f1; }
.card-fav { width: 44px; height: 44px; top: 10px; right: 10px; border: 2px solid var(--ink); font-size: 23px; color: var(--ink); box-shadow: 0 2px 0 #243f6020; }
.card-fav.saved { background: #ffe1cb; color: var(--ink); }
.card-arrow { color: var(--blue); font-size: 23px; }
.site-guide { border: 2px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 #b9d4e7; }
.content-objective { background: #e8f8ef; border: 1px solid #b3d8c5; border-radius: 14px; }
.guide-game-links a { border: 2px solid var(--ink); border-radius: 14px; background: #fff1e5; }
.guide-game-links a:hover { background: #ffe1cb; border-color: var(--ink); }
.site-guide h2, .site-guide h3 { font-weight: 800; }
.game-breadcrumbs { gap: 8px; }
.game-breadcrumbs a { color: var(--blue); }
.game-top .back-link { color: var(--blue); font-weight: 700; }
.game-top #focus-toggle, .text-btn { min-height: 44px; padding: 9px 12px; border: 2px solid var(--ink); border-radius: 14px; background: var(--surface); }
.play-panel { border: 2px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 #b9d4e7; }
.play-heading h1 { font-weight: 800; letter-spacing: -.04em; }
.scores > div { background: #fff1e5; border: 2px solid var(--ink); border-radius: 15px; }
.scores strong { color: var(--ink); font-weight: 700; }
#stage-wrap { border: 3px solid var(--ink); border-radius: 20px; }
.controls button, .toolbar button, .options button, .options select { border: 2px solid var(--ink); border-radius: 12px; background: var(--surface); }
.controls button:hover, .toolbar button:hover, .options button:hover { background: var(--soft); }
.options button.active { background: var(--accent); color: var(--ink); }
.guide-panel { color: var(--ink); }
.guide-panel h2 { font-weight: 800; }
.tip { border: 2px solid var(--ink); border-radius: 20px; background: #e8f8ef; }
.rule-line b { color: var(--blue); }
.game-entry-panel, .points-wallet { border: 2px solid var(--ink); border-radius: 19px; background: #f0faf5; }
.points-buy { border: 2px solid var(--ink); border-radius: 13px; background: var(--accent); color: var(--ink); }
#player-dialog, #history-dialog, #leaderboards-dialog, #analytics-consent { border: 3px solid var(--ink); border-radius: 26px; background: var(--surface); box-shadow: 0 8px 0 #243f602a, 0 20px 70px #243f6033; }
#player-dialog::backdrop, #history-dialog::backdrop, #leaderboards-dialog::backdrop { background: #243f6070; }
#player-dialog input, #history-dialog select, #leaderboards-dialog select { border: 2px solid var(--ink); border-radius: 12px; background: #f6fbff; }
.dialog-close, #player-close, #history-close, #leaderboards-close { border: 2px solid var(--ink); border-radius: 13px; background: var(--soft); }
.provider-list button { border-radius: 14px; }
.provider-list .provider-google { background: #fff; color: #1f1f1f; }
.analytics-actions button { border-radius: 12px; }
.record-scroll { border-radius: 15px; }
.record-list > li { border-radius: 14px; }
#toast { border: 2px solid var(--ink); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 4px 0 #b9d4e7; }

/* Results look like a cheerful sticker sheet rather than a separate visual world. */
#end-overlay.result-overlay { background: #243f6060; backdrop-filter: blur(3px); }
.result-card { color: var(--ink); border: 3px solid var(--ink); border-radius: 28px; background: var(--surface); box-shadow: 0 7px 0 #243f6033, 0 18px 45px #243f6040; }
.result-card::before, .result-card::after { box-shadow: none; height: 7px; top: -4px; background: #ffc39b; border: 1px solid var(--ink); }
.result-emblem .emblem-ring { border: 2px solid var(--ink); background: #e8f8ef; box-shadow: none; }
.result-emblem svg { filter: drop-shadow(0 4px 0 #243f6025); }
.emblem-star { color: var(--ink); }
#end-overlay #end-title { font-family: var(--display-font); font-weight: 800; color: var(--ink); text-shadow: none; }
.result-live { background: var(--blue); }
.result-stats > div { background: var(--soft); border: 1px solid var(--line); border-radius: 15px; }
.result-stats .result-main-score { background: #e8f8ef; border-color: #b3d8c5; }
#result-score { color: var(--ink); }
.result-record { background: #ffc39b; color: var(--ink); border: 1px solid var(--ink); border-radius: 8px; box-shadow: 0 2px 0 #243f6020; }
#end-overlay .result-replay { border: 2px solid var(--ink); border-radius: 15px; background: var(--accent); color: var(--ink); box-shadow: 0 4px 0 #83bdac; }
#end-overlay .result-replay:focus-visible { outline-color: var(--blue); }
.result-bottom { border-color: var(--line); opacity: 1; }
.result-stamp { opacity: 1; }
.result-particles { z-index: 0; opacity: .4; }
.result-particles i { border: 1px solid var(--ink); border-radius: 3px; }
.result-particles ~ * { position: relative; }
body[data-game="bubble"] #stage-wrap { background-color: var(--stage); border-color: var(--ink); box-shadow: none; background-image: none; }
.whack-board { padding: 10px; background: #e8f8ef; border-radius: 20px; }
.whack-board button, .whack-board button.up, .whack-board button.hit { padding: 0; background: transparent; border: 0; border-radius: 12px; box-shadow: none; }
.whack-board svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.game-policy-footer, .arcade-policy-footer { border-top: 2px solid var(--line); }
@media (max-width: 760px) {
  .filters { flex-wrap: wrap; }
  .hero-art { height: 270px; border-radius: 26px; }
  .hero .hero-title { font-size: clamp(36px, 8.5vw, 48px); }
  .hero p { font-size: 14px; }
  .card-art { height: 160px; }
  .play-panel { border-radius: 21px; box-shadow: 0 4px 0 #b9d4e7; }
  .scores > div { border-radius: 12px; }
  #stage-wrap { border-width: 2px; border-radius: 16px; }
  .card-fav { width: 44px; height: 44px; }
  .result-card { border-radius: 23px; }
}
@media (max-width: 400px) {
  .hero-art { height: 245px; }
  .card-art { height: 143px; }
  .card-info { padding: 13px 12px 16px; }
  .card-meta { font-size: 9px; }
  .card-info h3 { font-size: 16px; }
  .card-info p { font-size: 11px; }
}
/* Preserve the full-screen game's geometry; decorations belong outside the stage. */
body.wide-play .play-panel { border: 0; border-radius: 0; box-shadow: none; }
body.wide-play #stage-wrap { border-radius: 14px; }
body.wide-play .game-top .play-settings { min-height: 34px; box-shadow: none; }
body.wide-play .result-card { max-height: calc(100dvh - 20px); overflow: auto; }
@media (prefers-reduced-motion: reduce) {
  .game-card, .hero-cta, .primary { transition: none; }
  .game-card:hover, .hero-cta:active, .primary:active { transform: none; }
  .result-card, .result-particles i { animation: none !important; }
}