/* Page chrome shared by every game: full-screen game, HUD pills, question box, overlays, buttons, end-screen stats. */
.ff-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; margin: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #eee3ff 0, transparent 70%) var(--page); }
.ff-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ff-round { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 3px solid #2b1747; border-radius: 50%; background: white; color: #2b1747; cursor: pointer; box-shadow: 0 3px 0 #2b1747; }
.ff-round:active { transform: translateY(2px); box-shadow: 0 1px 0 #2b1747; }
.ff-round svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ff-speaker { fill: currentColor; }
.ff-sound .ff-mute, .ff-sound[aria-pressed="false"] .ff-waves { display: none; }
.ff-sound[aria-pressed="false"] .ff-mute { display: inline; }
.ff-page button:focus-visible, .ff-page .ff-button:focus-visible { outline: 3px solid var(--purple); outline-offset: 6px; } /* clear of the 4px drop shadow, so the ring doesn't cut through it */
.ff-page .ff-resume:focus-visible { outline: none; } /* Resume is focused for you on pause: it's the only button there, so no ring */

/* The game fills the whole screen (software design doc 4.1): everything inside scales with it (container units) */
.ff-main { flex: 1; display: flex; min-height: 0; }
.ff-game { position: relative; flex: 1; overflow: hidden; container-type: size; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ff-game:focus { outline: none; }
.ff-scene { position: absolute; inset: 0; }
.ff-scene canvas { display: block; }
.ff-game.is-missing .ff-hud { display: none; }

/* HUD */
.ff-hud { position: absolute; z-index: 2; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; padding: clamp(10px, 2.2cqmin, 22px); pointer-events: none; }
.ff-hud p { margin: 0; }
.ff-hud button { pointer-events: auto; }
.ff-hud-left { display: grid; justify-items: start; gap: 6px; }
.ff-points, .ff-count { padding: 4px 14px; border: 3px solid #2b1747; border-radius: 999px; background: white; font-size: clamp(16px, 3cqmin, 24px); font-weight: 1000; box-shadow: 0 3px 0 #2b1747; }
.ff-question { display: grid; justify-items: center; min-width: min(240px, 40cqw); max-width: 48cqw; padding: .45em 1.3em .55em; border: 3px solid #2b1747; border-radius: 20px; background: #2b1747; color: white; text-align: center; box-shadow: 0 4px 0 #1a0d2e; }
.ff-ask { color: #ffc93c; font-size: clamp(11px, 2cqmin, 16px); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.ff-english { font-size: clamp(24px, 6.5cqmin, 52px); font-weight: 1000; line-height: 1.1; overflow-wrap: anywhere; }
.ff-hud-right { display: flex; justify-content: end; align-items: center; gap: 8px; }
@container (max-width: 560px) {
  .ff-hud { grid-template-columns: 1fr 1fr; }
  .ff-question { grid-row: 2; grid-column: 1 / -1; justify-self: center; max-width: 90cqw; }
}
.ff-game.is-paused * { animation-play-state: paused !important; }

/* Panels over the game (start, pause, end); the huge spread shadow dims the game behind */
.ff-panel { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; width: min(460px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; padding: 22px 24px; border: 3px solid #2b1747; border-radius: 24px; background: white; box-shadow: 0 6px 0 #2b1747, 0 0 0 100vmax #2b174759; text-align: center; }
.ff-panel[hidden] { display: none; }
.ff-panel p { margin: 0 0 12px; font-size: 17px; font-weight: 650; line-height: 1.45; }
.ff-title { margin: 0 0 8px; font-size: clamp(28px, 6cqmin, 40px); font-weight: 1000; line-height: 1.1; color: var(--purple); }
.ff-title:focus { outline: none; }
.ff-place { font-size: 20px !important; font-weight: 900 !important; }
.ff-place-english { color: var(--purple); font-weight: 750; }
.ff-status:empty { display: none; }
.ff-button { display: inline-block; margin: 6px 4px 0; padding: 12px 26px; border: 3px solid #2b1747; border-radius: 999px; background: var(--purple); color: white; font: inherit; font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 #2b1747; }
.ff-button:active { translate: 0 2px; box-shadow: 0 2px 0 #2b1747; }
.ff-button:disabled { opacity: .5; cursor: wait; }
.ff-go, .ff-resume, .ff-again { padding-inline: 44px; }
.ff-button-soft { background: #eeecf6; color: var(--ink); }
.ff-stats { margin: 0 0 12px; }
.ff-stats div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 2px; border-bottom: 2px dashed #e3dcef; font-size: 17px; }
.ff-stats dt { font-weight: 700; text-align: left; }
.ff-stats dd { margin: 0; font-weight: 1000; }
.ff-lifted { padding: 10px; border-radius: 14px; background: #fff4b8; font-weight: 900 !important; }

@media (max-width: 600px) { .ff-panel { padding: 18px 16px; } }
.ff-count:empty, .ff-question:not(.has-word) { visibility: hidden; }
/* Phones in landscape: a short game card, so a tighter HUD */
@container (max-height: 420px) {
  .ff-hud { padding: 8px 10px; }
  .ff-question { padding: .2em 1em .3em; border-radius: 14px; }
  .ff-english { font-size: 20px; }
}