@charset "UTF-8";
/* Flag Drop — three-lane geography game.
   Page background + rounded card come from the shared .gm-page / .gm-shell
   styling (css/games/games.css); only the board and game internals live here. */

.fd-game { color: var(--ink); }

.fd-topbar { display: flex; align-items: center; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--rule); }
.fd-back { color: var(--ink-faint); text-decoration: none; font-size: 0.85rem; font-weight: 700; }
.fd-back::before { content: '\2190\00A0'; }
.fd-back:hover { color: var(--accent); }
.fd-title-wrap { flex: 1; min-width: 0; }
.fd-kicker { display: block; color: var(--ink-faint); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.fd-h1 { margin: 0; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; line-height: 1.05; }
.fd-brand { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 1.55rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--accent); cursor: pointer; }
.fd-brand:hover { text-decoration: underline; text-underline-offset: 3px; }
.fd-region-tag { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.fd-title-wrap h1 { margin: 1px 0 0; font-size: 1.25rem; line-height: 1.1; }
.fd-stop { border: 1px solid var(--rule); border-radius: 7px; padding: 7px 12px; background: var(--bg-warm); color: var(--ink-soft); font: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer; }
.fd-stop:hover { border-color: var(--accent); color: var(--ink); }
.fd-stop[hidden] { display: none; }

.fd-scorebar { display: flex; align-items: center; gap: 22px; min-height: 68px; padding: 9px 20px; box-sizing: border-box; background: linear-gradient(180deg, #1478bd 0%, #08629f 100%); border-bottom: 1px solid #07598f; color: #fff; box-shadow: inset 0 1px rgba(255,255,255,0.2); }
.fd-stat { display: flex; flex-direction: column; gap: 2px; min-width: 56px; }
.fd-stat span, .fd-progress span { color: rgba(255,255,255,0.72); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.fd-stat strong { color: #fff; font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,46,84,0.35); }
.fd-progress { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 140px; }
.fd-round-dots { display: flex; align-items: center; gap: 5px; min-height: 18px; }
.fd-round-dot { display: grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; box-sizing: border-box; border: 2px solid rgba(255,255,255,0.64); border-radius: 50%; color: #fff; font-size: 0.65rem; font-style: normal; font-weight: 900; line-height: 1; }
.fd-round-dot.is-current { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.2); }
.fd-round-dot.is-correct { border-color: #65d243; background: #49bd2d; }
.fd-round-dot.is-miss { border-color: #ff8d7c; background: #dc4b3f; }
.fd-life { color: #ff6f68; font-size: 1.2rem; font-style: normal; line-height: 1; filter: drop-shadow(0 1px 1px rgba(76,0,0,0.28)); }
.fd-life.is-lost { color: rgba(255,255,255,0.24); filter: none; }

/* Region switcher — crawlable links, one page per region */
.fd-game:not(.is-playing) .fd-scorebar { display: none; }
.fd-regions-panel { padding: 12px 16px; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--bg-warm) 45%, var(--paper)); }
.fd-regions-title { display: block; margin-bottom: 8px; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); }
.fd-regions { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-region {
  padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); text-decoration: none;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.fd-region:hover { border-color: var(--accent); color: var(--ink); }
.fd-region.is-current { background: #0e7490; border-color: #0e7490; color: #fff; }

.fd-board-wrap { padding: 20px; background: color-mix(in srgb, var(--bg-warm) 30%, var(--paper)); }
.fd-board { position: relative; height: min(57vh, 510px); min-height: 410px; overflow: hidden; isolation: isolate; border: 1px solid color-mix(in srgb, #0e7490 28%, var(--rule)); border-radius: 10px; background: #cbe9f1; touch-action: none; }
[data-theme="dark"] .fd-board { background: #0c3040; }
.fd-sky { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent 44%), repeating-linear-gradient(0deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 42px); }
[data-theme="dark"] .fd-sky { background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 45%), repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 42px); }
.fd-lane-lines { position: absolute; inset: 0 0 114px; display: grid; grid-template-columns: repeat(3, 1fr); pointer-events: none; }
.fd-lane-lines i { border-right: 1px dashed rgba(14,116,144,0.28); }
.fd-lane-lines i:last-child { border: 0; }

/* Active-lane highlight */
.fd-lanes { position: absolute; inset: 0 0 114px; display: grid; grid-template-columns: repeat(3, 1fr); z-index: 0; pointer-events: none; }
.fd-lanes i { transition: background 0.15s ease; }
.fd-lanes i.is-active { background: linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.06) 100%); }
[data-theme="dark"] .fd-lanes i.is-active { background: linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.02) 100%); }

.fd-prompt { position: absolute; top: 11px; left: 50%; z-index: 4; display: flex; min-width: 220px; flex-direction: column; align-items: center; color: #fff; pointer-events: none; transform: translateX(-50%); }
.fd-prompt[hidden], .fd-faller[hidden] { display: none; }
.fd-prompt span { color: #286078; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; text-shadow: 0 1px rgba(255,255,255,0.65); }
.fd-prompt i { display: flex; gap: 14px; margin-top: 3px; color: #2a6a8c; font-size: 1rem; font-style: normal; font-weight: 900; line-height: 1; }
.fd-faller { position: absolute; top: 0; z-index: 3; display: flex; width: 112px; flex-direction: column; align-items: center; gap: 6px; will-change: transform, left; transition: left 0.11s ease; }
.fd-faller svg { width: 100px; height: 100px; overflow: visible; filter: drop-shadow(0 0 2px rgba(255,255,255,0.95)) drop-shadow(0 6px 5px rgba(8,47,73,0.3)); }
.fd-faller path { fill: #ec6547; stroke: #fff7ec; stroke-width: 2.6; stroke-linejoin: round; paint-order: stroke fill; }
.fd-piece-kind { max-width: 164px; color: rgba(10, 51, 67, 0.76); font-size: 0.55rem; font-weight: 900; letter-spacing: 0.07em; line-height: 1.25; text-align: center; text-transform: uppercase; }
.fd-country-name { max-width: min(200px, calc(100vw - 80px)); overflow: hidden; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.5); border-radius: 7px; padding: 5px 16px 6px; background: linear-gradient(180deg, #2186cf 0%, #0866aa 100%); color: #fff; font-size: 1.02rem; font-weight: 900; line-height: 1.1; text-align: center; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 3px 0 #075489, 0 6px 12px rgba(4,57,88,0.24); text-shadow: 0 1px 2px rgba(4,45,78,0.35); }
.fd-country-name[hidden] { display: none; }
.fd-faller.is-resolving { transition: opacity 0.18s ease; opacity: 0.22; }
.fd-faller.is-preview { z-index: 7; pointer-events: none; opacity: 0.62; animation: fd-preview-bounce 5.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.fd-faller.is-preview svg { filter: drop-shadow(0 8px 6px rgba(8, 47, 73, 0.28)); }
.fd-faller.is-preview .fd-piece-kind,
.fd-faller.is-preview .fd-country-name { display: none; }
@keyframes fd-preview-bounce {
  0%, 16% { transform: translate3d(-50%, 32px, 0); }
  66% { transform: translate3d(-50%, 196px, 0); }
  77% { transform: translate3d(-50%, 178px, 0); }
  88%, 100% { transform: translate3d(-50%, 196px, 0); }
}

.fd-targets { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: grid; height: 114px; grid-template-columns: repeat(3, 1fr); background: linear-gradient(180deg, rgba(21,96,119,0.88), rgba(10,56,76,0.96)); }
.fd-target { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; padding: 12px 8px; border-right: 1px solid rgba(255,255,255,0.14); color: white; transition: background 0.2s ease, transform 0.2s ease; }
.fd-target:last-child { border-right: 0; }
.fd-target img { display: block; width: 72px; height: 48px; flex-shrink: 0; border-radius: 4px; object-fit: cover; box-shadow: 0 4px 8px rgba(0,0,0,0.28); }
.fd-target.is-correct { background: #16835b; transform: translateY(-4px); }
.fd-target.is-wrong { background: #b23c38; transform: translateY(-4px); }
.fd-feedback { position: absolute; top: 45%; left: 50%; z-index: 5; padding: 7px 13px; border-radius: 7px; color: white; font-size: 1.05rem; font-weight: 900; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.8); transition: opacity 0.14s ease, transform 0.14s ease; }
.fd-feedback.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fd-feedback.is-good { background: #16835b; }
.fd-feedback.is-bad { background: #b23c38; }

/* Pop bubble — the big reaction word over the board. Sits above the feedback
   chip so the two read as a headline and a subtitle. */
.fd-pop {
  position: absolute; top: 32%; left: 50%; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.4);
}
.fd-pop b {
  font-size: clamp(1.6rem, 8vw, 2.4rem); font-weight: 900; line-height: 1;
  letter-spacing: -0.02em; color: #fff;
  -webkit-text-stroke: 3px #0b2545; paint-order: stroke fill;
}
.fd-pop span { font-size: 0.82rem; font-weight: 800; color: #0b2545; text-shadow: 0 1px 0 rgba(255,255,255,0.65); }
.fd-pop span:empty { display: none; }
.fd-pop.is-good b { color: #7dfab4; }
.fd-pop.is-bad b { color: #ff8a80; }
.fd-pop.is-level b { color: #ffd76a; font-size: clamp(1.2rem, 5.5vw, 1.7rem); }
.fd-pop.is-on { animation: fd-pop-in 0.9s cubic-bezier(0.2, 1.1, 0.3, 1) forwards; }

@keyframes fd-pop-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-12deg); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1.16) rotate(4deg); }
  34%  { transform: translate(-50%, -50%) scale(0.97) rotate(0deg); }
  74%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1.25) rotate(0deg); }
}

/* Streak chip — only appears from three in a row. */
.fd-streak {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  border-radius: 999px; padding: 5px 12px;
  background: linear-gradient(180deg, #ffd76a, #f2a33c);
  color: #4a2a00; font-size: 0.85rem; font-weight: 900;
  box-shadow: 0 3px 10px rgba(8, 46, 61, 0.28);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.fd-streak.is-on { opacity: 1; }
.fd-streak.is-bump { animation: fd-streak-bump 0.38s ease-out; }
@keyframes fd-streak-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* Sound toggle in the topbar, styled to match .fd-stop. */
.fd-sound {
  flex: 0 0 auto; border: 1px solid var(--rule); border-radius: 7px;
  width: 34px; height: 32px; padding: 0; background: var(--bg-warm);
  font: inherit; font-size: 0.95rem; line-height: 1; cursor: pointer;
}
.fd-sound:hover { border-color: var(--accent); }
.fd-sound.is-off { opacity: 0.55; }

/* ── Main menu overlay — game-style ── */
.fd-start {
  position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; padding: 15px 22px; text-align: center; overflow: hidden;
  background: radial-gradient(125% 95% at 50% -12%, #c7edff 0%, #86c5ea 34%, #438fc0 64%, #206c9f 100%);
  color: #fff; pointer-events: none;
}
.fd-start[hidden] { display: none; }
[data-theme="dark"] .fd-start { background: radial-gradient(125% 95% at 50% -12%, #1c4d66 0%, #123c53 48%, #0b2a3b 100%); }

/* Decorative sky */
.fd-start-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fd-cloud { position: absolute; height: 22px; background: rgba(255,255,255,0.9); border-radius: 100px; }
.fd-cloud::before, .fd-cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.fd-cloud::before { width: 46%; height: 190%; left: 10%; top: -80%; }
.fd-cloud::after { width: 38%; height: 165%; right: 14%; top: -60%; }
.fd-cloud--a { width: 92px; top: 15%; left: 7%; opacity: 0.85; }
.fd-cloud--b { width: 120px; height: 28px; top: 33%; right: 5%; opacity: 0.7; }
.fd-cloud--c { width: 66px; height: 18px; top: 64%; left: 13%; opacity: 0.5; }
[data-theme="dark"] .fd-cloud { opacity: 0.14 !important; }
/* Drifting clouds during gameplay */
.fd-game-clouds { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fd-cloud--g1 { width: 84px; height: 22px; top: 13%; left: -4%; opacity: 0.72; animation: fd-drift 13s ease-in-out infinite alternate; }
.fd-cloud--g2 { width: 112px; height: 28px; top: 33%; left: 60%; opacity: 0.55; animation: fd-drift 17s ease-in-out infinite alternate-reverse; }
.fd-cloud--g3 { width: 64px; height: 17px; top: 55%; left: 18%; opacity: 0.48; animation: fd-drift 15s ease-in-out infinite alternate; }
@keyframes fd-drift { from { transform: translateX(-12px); } to { transform: translateX(16px); } }
[data-theme="dark"] .fd-game-clouds .fd-cloud { opacity: 0.12 !important; }

/* 3D logo */
.fd-start-logo { position: relative; z-index: 1; }
.fd-logo-word {
  display: block; font-family: 'Nunito', system-ui, sans-serif; font-size: clamp(2.1rem, 6.4vw, 3.3rem);
  font-weight: 900; letter-spacing: -0.02em; line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #ffe9b8 58%, #f4c04e 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 0 #cf9a2f) drop-shadow(0 4px 0 #b9851f) drop-shadow(0 7px 8px rgba(6,32,46,0.45));
}
.fd-logo-tag { display: block; margin-top: 5px; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: #ffe08a; text-shadow: 0 1px 3px rgba(6,32,46,0.55); }

.fd-start h2 { position: relative; z-index: 1; margin: 6px 0 0; font-size: 1.12rem; letter-spacing: 0.03em; text-transform: uppercase; text-shadow: 0 2px 5px rgba(0,0,0,0.28); }
.fd-start p { position: relative; z-index: 1; max-width: 400px; margin: 3px 0 10px; color: rgba(255,255,255,0.92); font-size: 0.85rem; line-height: 1.35; text-shadow: 0 1px 3px rgba(0,0,0,0.32); }

/* Mode cards */
.fd-mode-picker { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(580px, 100%); margin: 2px 0 14px; pointer-events: auto; }
.fd-mode-option {
  position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  padding: 0 0 12px; border: 2px solid rgba(255,255,255,0.55); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #eaf6fb 0%, #cfe8f4 100%); color: #143a4e; font: inherit; text-align: center; cursor: pointer;
  box-shadow: 0 6px 16px rgba(8,46,61,0.22); transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.fd-mode-option:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(8,46,61,0.3); }
.fd-mode-art { display: block; height: 92px; background: linear-gradient(180deg, #c0e7f8 0%, #9ed2ec 100%); }
.fd-mode-art svg { display: block; width: 100%; height: 100%; }
.fd-mode-option b { margin-top: 9px; font-size: 1.06rem; font-weight: 900; }
.fd-mode-option span { margin-top: 1px; color: #3a5f72; font-size: 0.78rem; font-weight: 700; }
.fd-mode-option i {
  position: absolute; top: 8px; right: 8px; z-index: 2; padding: 3px 9px; border-radius: 999px;
  background: #16835b; color: #fff; font-size: 0.6rem; font-style: normal; font-weight: 900; letter-spacing: 0.04em;
  text-transform: uppercase; box-shadow: 0 2px 5px rgba(0,0,0,0.28);
}
.fd-mode-option.is-selected { border-color: #f4bd4f; padding-bottom: 32px; background: linear-gradient(180deg, #fff3d6 0%, #ffe1a3 100%); box-shadow: 0 0 0 3px rgba(244,189,79,0.55), 0 14px 26px rgba(8,46,61,0.3); }
.fd-mode-option.is-selected .fd-mode-art { background: linear-gradient(180deg, #ffe9b8 0%, #ffd579 100%); }
.fd-mode-option.is-selected::after {
  content: '\2713'; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff;
  background: #16835b; color: #fff; font-size: 0.78rem; font-weight: 900; box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Play button */
.fd-start #fdStartButton {
  position: relative; z-index: 1; min-width: 224px; min-height: 56px; padding: 15px 30px; border: 0; border-radius: 12px;
  background: linear-gradient(180deg, #f7c65b, #efa92f); color: #492e06; font: inherit; font-size: 1.05rem; font-weight: 900;
  cursor: pointer; pointer-events: auto; box-shadow: 0 6px 0 #b9781a, 0 12px 22px rgba(8,46,61,0.28);
}
.fd-start #fdStartButton::after { content: '  \2192'; }
.fd-start #fdStartButton:hover { transform: translateY(-1px); box-shadow: 0 7px 0 #b9781a, 0 15px 26px rgba(8,46,61,0.32); }
.fd-start #fdStartButton:active { transform: translateY(4px); box-shadow: 0 2px 0 #b9781a; }
.fd-start #fdStartButton:disabled { opacity: 0.6; cursor: wait; }
.fd-scores-btn {
  position: relative; z-index: 1; margin-top: 10px; border: 0; border-radius: 999px; padding: 8px 18px;
  background: rgba(255,255,255,0.18); color: #fff; font: inherit; font-size: 0.82rem; font-weight: 800;
  cursor: pointer; pointer-events: auto;
}
.fd-scores-btn::before { content: '\1F3C6\00A0'; }
.fd-scores-btn:hover { background: rgba(255,255,255,0.3); }

/* Result-modal buttons keep their own styling */
.fd-result-card button { border: 0; border-radius: 7px; padding: 11px 18px; background: #f2b84b; color: #172e3d; font: inherit; font-size: 0.9rem; font-weight: 900; cursor: pointer; pointer-events: auto; }

.fd-controls { display: none; grid-template-columns: 1fr 1.1fr 1fr; gap: 9px; padding: 14px 20px 3px; }
.fd-control { min-height: 48px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg-warm); color: var(--ink); font: inherit; font-size: 1.4rem; font-weight: 800; touch-action: manipulation; }
.fd-control:active, .fd-control.is-held { background: var(--accent); color: #fff; }
.fd-down { color: #fff; background: #0e7490; }
.fd-help, .fd-rule { margin: 0; padding: 11px 20px 0; color: var(--ink-faint); font-size: 0.78rem; text-align: center; }
.fd-rule { padding: 7px 20px 20px; font-size: 0.72rem; }
.fd-rule b { color: var(--ink-soft); }

/* How to play — Q&A section below the game */
.fd-howto { padding: 16px 20px 24px; border-top: 1px solid var(--rule); }
.fd-howto h2 { margin: 4px 0 12px; font-size: 1.05rem; color: var(--ink); }
.fd-qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 10px; }
.fd-qa-item { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--bg-warm) 30%, var(--paper)); }
.fd-qa-item h3 { margin: 0 0 5px; font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.fd-qa-item p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); }
.fd-qa-item b { color: var(--ink); font-weight: 800; }
kbd { display: inline-block; min-width: 17px; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; padding: 1px 3px; background: var(--paper); color: var(--ink-soft); font: 700 0.7rem 'IBM Plex Mono', monospace; }

.fd-result { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(6, 30, 40, 0.6); }
.fd-result[hidden] { display: none; }
.fd-result-card { position: relative; width: min(360px, 100%); box-sizing: border-box; border: 1px solid var(--rule); border-radius: 12px; padding: 28px; background: var(--paper); text-align: center; box-shadow: var(--popup-shadow); }
.fd-result-close { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink-faint); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.fd-result-close:hover { background: var(--bg-warm); color: var(--ink); }
.fd-result-kicker { color: #0e7490; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.fd-result-card h2 { margin: 7px 0; font-size: 1.35rem; }
.fd-result-card strong { display: block; color: #0e7490; font-size: 3rem; line-height: 1; }
.fd-result-card p { margin: 12px 0 20px; color: var(--ink-soft); }
.fd-result-actions { display: flex; justify-content: center; gap: 8px; }
.fd-result-card .fd-share { border: 1px solid var(--rule); background: var(--bg-warm); color: var(--ink); }
.fd-result-card .fd-share:hover { border-color: #0e7490; color: #0e7490; }

/* High-scores matrix modal */
.fd-scores { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(6, 30, 40, 0.6); }
.fd-scores[hidden] { display: none; }
.fd-scores-card { position: relative; width: min(460px, 100%); box-sizing: border-box; border: 1px solid var(--rule); border-radius: 12px; padding: 24px; background: var(--paper); box-shadow: var(--popup-shadow); }
.fd-scores-card h2 { margin: 0 0 3px; font-size: 1.2rem; text-align: center; color: var(--ink); }
.fd-scores-sub { margin: 0 0 14px; font-size: 0.8rem; text-align: center; color: var(--ink-faint); }
.fd-scores-table-wrap { overflow-x: auto; }
.fd-scores-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.fd-scores-table th, .fd-scores-table td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--rule); }
.fd-scores-table tr:first-child th { color: var(--ink-faint); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.fd-scores-table th[scope="row"] { text-align: left; color: var(--ink); font-weight: 800; }
.fd-scores-table td { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.fd-scores-table tr.is-current { background: color-mix(in srgb, #0e7490 12%, transparent); }
.fd-scores-table tr.is-current th[scope="row"] { color: #0e7490; }

/* Game-report modal — per-round shape, name, flags, pick vs. correct */
.fd-result-card .fd-report-btn { width: 100%; margin-top: 8px; border: 1px solid var(--rule); background: var(--bg-warm); color: var(--ink); }
.fd-result-card .fd-report-btn:hover { border-color: #0e7490; color: #0e7490; }
.fd-report { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; background: rgba(6, 30, 40, 0.6); }
.fd-report[hidden] { display: none; }
.fd-report-card {
  position: relative; width: min(520px, 100%); max-height: min(86vh, 760px);
  box-sizing: border-box; display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: 12px; padding: 22px 22px 16px;
  background: var(--paper); box-shadow: var(--popup-shadow);
}
.fd-report-card h2 { margin: 0 0 3px; font-size: 1.2rem; text-align: center; color: var(--ink); }
.fd-report-sub { margin: 0 0 14px; font-size: 0.8rem; text-align: center; color: var(--ink-faint); }
.fd-report-body { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.fd-report-item {
  border: 1px solid var(--rule); border-left: 4px solid var(--rule); border-radius: 10px;
  padding: 10px 12px; background: color-mix(in srgb, var(--bg-warm) 26%, var(--paper));
}
.fd-report-item.is-correct { border-left-color: #16a34a; }
.fd-report-item.is-wrong { border-left-color: #dc4b3f; }
.fd-report-country { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.fd-report-shape { width: 34px; height: 34px; flex: 0 0 34px; }
.fd-report-shape path { fill: #0e7490; stroke: #fff; stroke-width: 2; stroke-linejoin: round; paint-order: stroke fill; }
.fd-report-name { display: flex; flex-direction: column; line-height: 1.15; }
.fd-report-name b { font-size: 0.98rem; color: var(--ink); }
.fd-report-num { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.fd-report-flags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fd-report-flag {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper);
}
.fd-report-flag img { width: 100%; max-width: 66px; height: auto; border-radius: 3px; border: 1px solid rgba(0,0,0,0.08); }
.fd-report-flag.is-correct { border-color: #16a34a; background: color-mix(in srgb, #16a34a 10%, var(--paper)); }
.fd-report-flag.is-picked:not(.is-correct) { border-color: #dc4b3f; background: color-mix(in srgb, #dc4b3f 10%, var(--paper)); }
.fd-rf-name { font-size: 0.7rem; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.1; }
.fd-rf-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 14px; }
.fd-rf-badge { font-size: 0.58rem; font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; padding: 1px 5px; border-radius: 999px; }
.fd-rf-badge.is-correct { background: #16a34a; color: #fff; }
.fd-rf-badge.is-wrong { background: #dc4b3f; color: #fff; }

@media (pointer: fine) {
  .fd-board { cursor: pointer; }
}

/* Give the menu enough height so the logo and buttons are never clipped. */
@media (min-width: 641px) {
  .fd-game:not(.is-playing) .fd-board { height: min(88vh, 640px); }
}

@media (max-width: 640px) {
  .fd-topbar { padding: 12px 14px; }
  /* The board's own graphic logo is the title on mobile, so hide the duplicate
     text heading in the top bar (kept in the DOM for SEO / screen readers). */
  .fd-h1 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .fd-scorebar { gap: 13px; padding: 8px 14px; }
  .fd-best { display: none; }
  .fd-progress { min-width: 100px; }
  /* Score bar and round dots are meaningless on the menu — hide until playing. */
  .fd-game:not(.is-playing) .fd-scorebar { display: none; }
  .fd-regions-panel { padding: 10px 12px; }
  .fd-regions-title { margin-bottom: 6px; }
  .fd-regions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fd-regions::-webkit-scrollbar { display: none; }
  .fd-region { flex: 0 0 auto; }
  .fd-game.is-playing .fd-regions-panel { display: none; }
  .fd-board-wrap { padding: 6px 10px; }
  .fd-board { height: 452px; min-height: 0; border-radius: 12px; }

  /* While playing, fit the whole game to the viewport so the board AND the
     control arrows are visible without scrolling. The board flexes to fill
     whatever height is left between the score bar and the arrows. The height
     also leaves room for the fixed top header and the mobile bottom nav bar. */
  .gm-main:has(.fd-game.is-playing) { padding: 8px 8px 12px; justify-content: flex-start; }
  .fd-game.is-playing {
    display: flex;
    flex-direction: column;
    height: calc(100svh - var(--nav-h, 64px) - 84px);
    min-height: 400px;
  }
  .fd-game.is-playing .fd-board-wrap { flex: 1 1 auto; min-height: 0; display: flex; }
  .fd-game.is-playing .fd-board { flex: 1 1 auto; height: auto; min-height: 220px; width: 100%; }
  .fd-game.is-playing .fd-controls { flex: 0 0 auto; }
  .fd-game.is-playing .fd-howto { display: none; }
  .fd-faller { width: 92px; }
  .fd-faller svg { width: 72px; height: 72px; }
  .fd-country-name { max-width: min(150px, calc(100vw - 96px)); font-size: 0.9rem; padding: 4px 12px 5px; }
  .fd-targets { height: 100px; }
  .fd-lanes { bottom: 100px; }
  .fd-lane-lines { bottom: 100px; }
  .fd-target { flex-direction: column; gap: 5px; padding: 8px 3px; }
  .fd-target img { width: 58px; height: 39px; }

  /* ── Compact mobile main menu ── */
  .fd-start { justify-content: center; gap: 4px; padding: 14px 16px; }
  .fd-logo-word { font-size: 1.85rem; }
  .fd-logo-tag { display: none; }
  .fd-start p { display: none; }
  .fd-start h2 { margin: 6px 0 2px; font-size: 1.02rem; }
  .fd-mode-picker { grid-template-columns: 1fr; width: min(340px, 100%); gap: 9px; margin: 10px 0 14px; }
  .fd-mode-option {
    display: grid; grid-template-columns: 22px 1fr auto; align-items: center;
    column-gap: 12px; min-height: 56px; padding: 11px 15px; border-radius: 12px; overflow: visible;
    background: rgba(24, 68, 86, 0.94); border: 1px solid rgba(255,255,255,0.16); color: #fff; box-shadow: none;
  }
  .fd-mode-option:hover { transform: none; box-shadow: none; }
  .fd-mode-art { display: none; }
  .fd-mode-option::before {
    content: ''; position: static; grid-column: 1; grid-row: 1 / 3; align-self: center;
    display: block; width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5); background: transparent;
  }
  .fd-mode-option b { grid-column: 2; grid-row: 1; margin: 0; max-width: none; font-size: 0.98rem; white-space: nowrap; }
  .fd-mode-option span { grid-column: 2; grid-row: 2; margin-top: 1px; color: rgba(255,255,255,0.82); font-size: 0.72rem; white-space: nowrap; }
  .fd-mode-option i {
    position: static; grid-column: 3; grid-row: 1 / 3; align-self: center;
    top: auto; right: auto; font-size: 0.62rem;
  }
  .fd-mode-option.is-selected {
    padding: 11px 15px; border: 1px solid rgba(255,255,255,0.5);
    background: #f2b84b; color: #172e3d; box-shadow: 0 3px 12px rgba(8,46,61,0.25);
  }
  .fd-mode-option.is-selected b { margin-bottom: 0; }
  .fd-mode-option.is-selected span { color: rgba(23,46,61,0.74); }
  .fd-mode-option.is-selected::after { display: none; }
  .fd-mode-option.is-selected::before {
    display: grid; place-items: center; top: auto; right: auto; border: 2px solid #16835b;
    background: #16835b; color: #fff; content: '\2713'; font-size: 0.74rem; font-weight: 900; line-height: 1;
  }
  .fd-mode-option.is-selected i { right: auto; }
  .fd-start #fdStartButton { width: min(340px, 100%); min-width: 0; }

  .fd-round-dots { gap: 3px; }
  .fd-round-dot { width: 13px; height: 13px; flex-basis: 13px; border-width: 1px; font-size: 0.55rem; }
  .fd-controls { display: grid; padding: 8px 10px 3px; }
  .fd-game:not(.is-playing) .fd-controls { display: none; }
  .fd-help { display: none; }
  .fd-rule { padding-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .fd-faller, .fd-target, .fd-feedback, .fd-round-dot, .fd-game-clouds .fd-cloud { transition: none; animation: none; }
  .fd-pop, .fd-streak { animation: none; transition: none; }
  .fd-pop.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}