/* CSS Custom Properties (Variables) */
:root {
  --font-family-primary: 'Fredoka', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-family-secondary: 'Fredoka', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-family-pixel: 'Fredoka', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Button color sets (replaces pixel-art bg images) */
  --btn-blue: #01ADEE;
  --btn-blue-border: #013267;
  --btn-wrong: #EF4B43;
  --btn-wrong-border: #882D2E;
  --btn-correct: #8AC63E;
  --btn-correct-border: #2F4B27;
  /* Double-points round (last round) */
  --btn-double: #FCCF21;
  --btn-double-border: #D9A629;
  --btn-lip: 8px; /* depth of the dark bottom "lip" */

  /* Question card. Not a button: uniform border all round, never a bottom lip. */
  --card-bg: #25ACE2;
  --card-border: #0078B9;
  --card-border-width: 8px;
}

/* Reusable button skin: flat fill + rounded corners + dark bottom lip */
.btn-skin {
  border: none;
  border-radius: 16px;
  background: var(--btn-blue);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out;
}
.btn-skin:hover:not(:disabled) {
  filter: brightness(1.06);
}
.btn-skin:active:not(:disabled) {
  transform: translateY(var(--btn-lip));
  box-shadow: 0 0 0 var(--btn-blue-border);
}

/* Local Font Declarations */
@font-face {
  font-family: 'Fredoka';
  src: url('fonts/Fredoka-Regular.woff2') format('woff2'),
       url('fonts/Fredoka-Regular.woff') format('woff'),
       url('fonts/Fredoka-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fredoka';
  src: url('fonts/Fredoka-Medium.woff2') format('woff2'),
       url('fonts/Fredoka-Medium.woff') format('woff'),
       url('fonts/Fredoka-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fredoka';
  src: url('fonts/Fredoka-SemiBold.woff2') format('woff2'),
       url('fonts/Fredoka-SemiBold.woff') format('woff'),
       url('fonts/Fredoka-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fredoka';
  src: url('fonts/Fredoka-Bold.woff2') format('woff2'),
       url('fonts/Fredoka-Bold.woff') format('woff'),
       url('fonts/Fredoka-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atma';
  src: url('fonts/Atma-Bold.woff2') format('woff2'),
       url('fonts/Atma-Bold.woff') format('woff'),
       url('fonts/Atma-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jacoby ICG';
  src: url('fonts/Jacoby ICG Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Variable font: carries the full Light→Bold axis in one file, so a weight
   range lets 400 and 700 both resolve without extra downloads. */
@font-face {
  font-family: 'Quicksand';
  src: url('fonts/Quicksand.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Image Preloading */
/* Only the assets actually used at load time; question images load on demand. */
body::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  background-image:
    url('images/gaem-background.jpeg'),
    url('images/categories/bonus/golden-feather.gif');
}

*{
  box-sizing: border-box  ;
}

/* Images start a native drag on mousedown, which user-select does not cover —
   holding on the logo would peel off a ghost image of the frog. There is no
   standard property for this (only WebKit's -webkit-user-drag), so frog.js
   cancels dragstart as well; this just covers WebKit without the JS. */
img {
  -webkit-user-drag: none;
}

/* Background Image */
#background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('images/gaem-background.jpeg') no-repeat center center;
  background-size: cover;
  z-index: -1;
}

/* Reserve the scrollbar's space on both sides at all times, so it appearing
   (e.g. when zoom > 100% overflows the viewport) never reflows or off-centres
   the layout. On overlay-scrollbar platforms (macOS) this reserves nothing.

   The reserved gutters sit outside the fixed #background-image (which covers the
   content box only), so on classic-scrollbar platforms they'd show the bare
   white canvas as a bar down the left/right edge. The root element's background
   is propagated across the whole canvas — gutters included — so this dark tone,
   matched to the artwork's shadowed edges, fills them instead of white. */
html {
  scrollbar-gutter: stable both-edges;
  background-color: #171e16;
}

/* While a full-screen modal is open, lock the page scroll so the zoomed board
   behind it can't show a scrollbar that peeks past the modal's edges. Drop the
   reserved gutter too (no scrollbar to reserve for now), so the modal covers
   the viewport edge-to-edge instead of leaving a strip where the board shows. */
html:has(#question-popup[style*="display: flex"]),
html:has(#question-popup[style*="display: block"]),
html:has(#winner-popup:not(.winner-popup-hidden)),
html:has(#champion-popup.is-open),
html:has(#cta-popup.is-open) {
  overflow: hidden;
  scrollbar-gutter: auto;
}

/* General App Styles */
body {
  font-family: var(--font-family-primary);
  background: transparent;
  color: #fff;
  margin: 0;
  min-height: 100vh;
  text-wrap: balance;
  position: relative;
  /* Holding the mouse to stretch the frog's tongue is a drag gesture, so
     without this it sweeps a text/image selection across the board as it goes.
     Nothing here is meant to be selected — the game is read, not copied. */
  -webkit-user-select: none;
  user-select: none;
  /* Prevent text size adjustment on iOS */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Smooth scrolling for mobile */
  -webkit-overflow-scrolling: touch;
  /* Prevent pull-to-refresh on mobile */
  overscroll-behavior-y: contain;
}

#app, main {
  /* % (not vw) so the width tracks the usable area, not the scrollbar-inclusive
     viewport — otherwise a scrollbar would nudge the centred content sideways. */
  max-width: 90%;
  margin: 0 auto;
  padding: 2.5rem 1rem 2rem 1rem;
}

#menu-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(0.5rem, 2vh, 2rem) 1rem;
  width: 100%;
  max-width: none;
}

/* Two menu screens: splash (logo + options + Start) and the round picker. */
.menu-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.menu-view[hidden] { display: none; }

/* Start: the single call to action on the splash */
#start-btn {
  margin-top: clamp(0.8rem, 2.5vh, 1.8rem);
  background: var(--btn-correct);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-correct-border);
  color: #ffffff;
  font-family: var(--font-family-primary);
  font-size: clamp(1.4rem, 3.2vh, 2rem);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  border-radius: 16px;
  padding: clamp(0.6rem, 1.6vh, 0.95rem) clamp(2.5rem, 8vw, 4.5rem);
  cursor: pointer;
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
#start-btn:hover { filter: brightness(1.06); }
#start-btn:active {
  transform: translateY(var(--btn-lip));
  box-shadow: 0 0 0 var(--btn-correct-border);
}

/* Quiet secondary action back out to the splash */
#back-to-splash {
  margin-top: clamp(0.6rem, 2vh, 1.2rem);
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.65);
  color: #ffffff;
  font-family: var(--font-family-primary);
  font-size: clamp(0.9rem, 2vh, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 12px;
  padding: 0.4rem 1.6rem;
  cursor: pointer;
  transition: background 0.12s ease-out, border-color 0.12s ease-out;
  touch-action: manipulation;
}
#back-to-splash:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
}

body, #app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1, h2, h3 {
  font-family: var(--font-family-secondary);
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 2px 2px 8px #222, 0 0 10px #3ec6ff44;
}

.doors {
  display: flex;
  justify-content: center;
  margin: 2rem 0 1rem 0;
  gap: 2rem;
}
.door {
  margin: 0;
  width: 90px;
  height: 90px;
  background: #222;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px #0008;
  border: 3px solid #ffd700;
}
.boxes {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  transition: transform 1s;
}
.box {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  background: #444;
  border-bottom: 1px solid #333;
  font-weight: bold;
  letter-spacing: 1px;
}
.buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.buttons button {
  background: var(--btn-blue);
  border: none;
  box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 16px;
  padding: 0.7rem 2.2rem;
  cursor: pointer;
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out;
  /* Prevent text selection on mobile */
  -webkit-user-select: none;
  user-select: none;
  /* Prevent double-tap zoom on iOS */
  touch-action: manipulation;
}

#start-round {
  width: 500px !important;
  padding: 1rem 2.2rem;
}

/* Region selector on the splash screen (region only swaps Round 4) */
#region-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: clamp(0.5rem, 1.6vh, 1.2rem);
}
.region-label {
  color: #ffffff;
  font-family: var(--font-family-primary);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
#region-select {
  font-family: var(--font-family-primary);
  font-size: 1.6rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--btn-blue);
  border: none;
  box-shadow: 0 6px 0 var(--btn-blue-border);
  border-radius: 12px;
  padding: 0.7rem 2.5rem 0.7rem 1.2rem;
  cursor: pointer;
  min-width: 320px;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
#region-select:focus {
  outline: none;
  filter: brightness(1.06);
}
#region-select option {
  color: #013267;
  background: #ffffff;
}

/* Reveal-facts toggle */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: clamp(0.5rem, 1.6vh, 1.2rem);
  color: #ffffff;
  font-family: var(--font-family-primary);
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
/* Scores & teams disabled: no scoreboard, no turn prompt, no winner modal */
body.scores-hidden #scoreboard,
body.scores-hidden #winner-popup {
  display: none !important;
}

.toggle-row input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--btn-blue);
  cursor: pointer;
}

/* Pre-game settings grouped into one panel so region and the two toggles read
   as a set rather than three loose controls floating on the artwork. */
/* display:flex below would beat the [hidden] attribute, so hide it explicitly */
.menu-settings[hidden] { display: none; }
.menu-settings {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: clamp(0.6rem, 1.8vh, 1.3rem);
  /* Solid dark panel so the artwork doesn't read through the controls */
  background: rgba(4, 20, 36, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

/* Region collapses to a single label + picker row inside the panel */
.menu-settings #region-selector {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0;
}
.menu-settings .region-label {
  font-size: 1.05rem;
  font-weight: 500;
}
/* A dropdown, not a button: flat field with a chevron, no fill and no lip. */
.menu-settings #region-select {
  flex: 1;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 500;
  text-align: left;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1.5 6 6.5 11 1.5"/></svg>')
    no-repeat right 0.7rem center / 11px auto;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
  border-radius: 8px;
  padding: 0.35rem 2rem 0.35rem 0.7rem;
}
.menu-settings #region-select:hover {
  border-color: rgba(255, 255, 255, 0.5);
}
.menu-settings .toggle-row {
  margin-bottom: 0;
  font-size: 1.05rem;
  font-weight: 500;
}
.menu-settings .toggle-row input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
}

/* Three columns: Team 1's running total | the round button | Team 2's.
   Header row labels the score columns and flags the leader. */
#round-selector {
  display: grid;
  grid-template-columns: minmax(3.5rem, auto) minmax(0, 560px) minmax(3.5rem, auto);
  align-items: center;
  justify-content: center;
  column-gap: clamp(0.8rem, 2.4vw, 1.8rem);
  row-gap: clamp(1.2rem, 3.2vh, 2.2rem);
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 880px;
}

/* Same dark readout panel as the in-game scoreboard */
.round-team-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  justify-self: center;
  padding: 0.3rem 0.9rem;
  background: rgba(3, 18, 34, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  font-family: var(--font-family-primary);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: none;
}
/* The leader is flagged with a bright yellow border on the team label (see
   .round-team-head.is-leader), so the star glyph is no longer used. */
.menu-team-star {
  display: none;
}
/* Leader: bright yellow keyline + soft glow, brighter label. The border is the
   same 1px width as the base so nothing shifts as the leader changes. */
.round-team-head.is-leader {
  border-color: #FFD400;
  box-shadow: 0 0 0 1px #FFD400, 0 0 12px rgba(255, 212, 0, 0.55);
  color: #ffffff;
}

/* Plain numbers, deliberately not chips — they are readouts, not controls */
.round-score {
  font-family: var(--font-family-primary);
  font-size: clamp(1.1rem, 2.4vh, 1.6rem);
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
/* Rounds not played yet */
.round-score.is-empty {
  opacity: 0.4;
  font-weight: 500;
}

/* Scores off: drop the flanking columns and the header row entirely */
body.scores-hidden .round-score,
body.scores-hidden .round-team-head,
body.scores-hidden #round-selector > div[aria-hidden="true"] {
  display: none;
}
body.scores-hidden #round-selector {
  grid-template-columns: minmax(0, 460px);
}

/* Scores on, but no round scored yet: keep the team labels hidden until there
   is a first result to show. visibility (not display) so the grid columns are
   reserved and the buttons don't jump when the labels appear. */
body:not(.scores-started):not(.scores-hidden) .round-team-head {
  visibility: hidden;
}

#round-selector > button.round-btn {
  background: var(--btn-blue);
  border: none;
  box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
  color: #ffffff;
  /* Full-size type for projector legibility; the bulk comes off the padding,
     not the text. Scales down only on short viewports. */
  font-size: clamp(1.7rem, 3.6vh, 2.7rem);
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 16px;
  padding: clamp(0.95rem, 2.6vh, 1.55rem) 1.5rem;
  cursor: pointer;
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out;
  letter-spacing: 0.5px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-family-primary);
  /* Prevent text selection and double-tap zoom on mobile */
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

#round-selector > button.round-btn.selected {
  background: var(--btn-blue);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
  color: #ffffff;
  font-weight: 500;
}
#round-selector > button.round-btn:active:not(:disabled) {
  transform: translateY(var(--btn-lip));
  box-shadow: 0 0 0 var(--btn-blue-border);
}
/* Played and scored: locked so it can't be run (and scored) a second time */
#round-selector > button.round-btn.is-complete {
  background: #7C8B99;
  box-shadow: 0 var(--btn-lip) 0 #4A5560;
  color: rgba(255, 255, 255, 0.75);
  cursor: not-allowed;
}
#round-selector > button.round-btn.is-complete:hover {
  filter: none;
}
#round-selector > button.round-btn:hover:not(.selected) {
  filter: brightness(1.06);
}

.buttons button:hover {
  filter: brightness(1.06);
}
.info {
  text-align: center;
  font-size: 1.2rem;
  margin-top: 1rem;
  color: #ffd700;
  text-shadow: 1px 1px 6px #222;
  font-weight: bold;
}

#points-board {
  display: none;
  margin: clamp(0.4rem, 1.5vh, 2rem) auto;
}
#points-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 1400px;
}

#category-titles-row {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

#points-containers-row {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

/* Single-category round: center the one column */
#category-titles-row .category-title-container {
  max-width: 700px;
}
#points-table-left {
  max-width: 700px;
}
.points-table-content {
  color: #e3f0ff;
  margin: 0;
  padding: clamp(0.5rem, 1.5vh, 1.5rem) 1rem clamp(0.5rem, 2vh, 2rem) 1rem;
  flex: 1;
}
.category-title-container {
  text-align: center;
  background: var(--btn-blue);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
  padding: clamp(0.7rem, 2.2vh, 2rem);
  border-radius: 16px;
  width: 100%;
  display: flex;
justify-content: center;
align-items: center;
}
.category-title-container h3 {
    margin: 0 0 0.3rem 0;
    font-size: clamp(1.3rem, 3.4vh, 2.8rem);
    font-family: var(--font-family-primary);
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 1px;
}
.category-title-container p {
  font-family: var(--font-family-primary);
  color: #7bb7e7;
  font-size: 1rem;
  font-weight: 400;
  margin: 0.2rem 0 0 0;
}
/* 2 columns x 3 rows for the six values; stacks to one column on mobile. */
#points-container {
  display: grid;
  /* Single stacked column at a fixed width: never stretches full-width, never
     gets too wide. Fixed px (not a %) so the board can't collapse to content.
     Phones drop to a full-width single column via the mobile media query. */
  grid-template-columns: 320px;
  justify-content: center;
  /* Still viewport-height based, since all 6 have to fit without scrolling */
  gap: clamp(0.4rem, 1.5vh, 1rem);
  align-items: stretch;
}
#points-container button {
    background: var(--btn-blue);
    box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
    color: #ffffff;
    /* Single stacked column of six, so height (not width) is the constraint —
       keep each row compact enough that all six plus a long title still fit. */
    font-size: clamp(1.4rem, 3.5vh, 2.8rem);
    border: none;
    border-radius: 16px;
    padding: clamp(0.35rem, 1.1vh, 0.85rem) 0;
    cursor: pointer;
    font-weight: 500;
    font-family: var(--font-family-primary);
    transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out;
    letter-spacing: 0.5px;
    position: relative;
    overflow: visible;
    width: 100%;
    /* Prevent text selection and double-tap zoom on mobile */
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}
#points-container button:disabled {
  background: var(--btn-wrong);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-wrong-border);
  color: #ffffff;
  cursor: not-allowed;
}
#points-container button:hover:not(:disabled) {
  filter: brightness(1.06);
}
#points-container button:active:not(:disabled) {
  transform: translateY(var(--btn-lip));
  box-shadow: 0 0 0 var(--btn-blue-border);
}

/* Double-points round: every value is worth twice its face value.
   Declared before the .answered-* rules so an answered button still goes
   green/red — these selectors have equal specificity, so order decides. */
#points-container button.double-points {
  background: var(--btn-double);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-double-border);
  color: #ffffff;
  text-shadow: none;
}
#points-container button.double-points:active:not(:disabled) {
  box-shadow: 0 0 0 var(--btn-double-border);
}

#question-popup {
  display: none;
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh; /* fill available screen, no page scroll */
  /* The round title and scoreboard are hidden while this is open (see the
     :has() rule further down), so the scrim only needs to knock the artwork
     back — it doesn't have to hide the board. */
  background: rgba(0, 0, 0, 0.62);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 2vh 2vw;
  animation: popupBackgroundIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Font Size Controls */
#font-size-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 1001;
}

#font-size-controls button {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: rgba(30, 50, 90, 0.9);
  color: white;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* Prevent double-tap zoom on mobile */
  touch-action: manipulation;
}

#font-size-controls button:hover {
  background: rgba(30, 50, 90, 1);
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

#font-size-controls button:active {
  transform: scale(0.95);
}

@keyframes popupBackgroundIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.98) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
#question-container {
  color: #e3f0ff;
  padding: 0;
  width: 100%;
  max-width: 1500px;
  height: 100%;
  margin: 0 auto;
  font-family: var(--font-family-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  background-color: transparent;
  animation: questionContainerIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
  will-change: opacity, transform;
}

/* Left blue card: image + caption (independent from buttons) */
.question-card {
  flex: 0 0 42%;
  align-self: center; /* don't stretch taller than its content */
  max-height: 100%;
  background: var(--card-bg);
  /* Uniform border on every side — this is a card, not a button */
  border: var(--card-border-width) solid var(--card-border);
  box-shadow: none;
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}

@keyframes questionContainerIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  60% {
    opacity: 0.9;
    transform: translateY(5px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#question-title {
    font-size: 2.2rem;
    font-weight: 500;
    margin: 0;
    color: #ffffff;
    text-align: left;
    font-family: var(--font-family-primary);
    text-shadow: none;
    letter-spacing: 0.5px;
}
#question-content {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 2rem;
  flex: 1;
  min-height: 0; /* let children shrink to fit the viewport */
}
.question-image {
  width: 100%;
  aspect-ratio: 4 / 3; /* fixed box: every image card is the same size */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 1px;
  overflow: hidden;
}
.question-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1px;
  background-color: #1e325a;
  display: block;
}
.answers {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: auto;
}
ul, li {
  display: block;
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}
.answers ul {
  list-style: none;
  padding: 0;
}
.answers li {
    color: #fff;
    background-color: var(--btn-blue);
    border: none;
    box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
    padding: 16px 20px;
    margin: 14px 25px 14px 0;
    font-size: 34px;
    font-family: var(--font-family-primary);
    cursor: pointer;
    transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out, background-color 0.1s;
    text-align: left;
    border-radius: 16px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: 0;
    text-wrap: auto !important;
    /* Two-line button: letter badge + text */
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 2.4em; /* room for two lines */
    /* Prevent text selection and double-tap zoom on mobile */
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}
.answer-letter {
    flex: 0 0 auto;
    font-family: 'Jacoby ICG', var(--font-family-primary);
    /* Fixed px, not em: the answer text can grow without dragging the badge
       size along with it. */
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    min-width: 1.1em;
    text-align: center;
}
.answer-text {
    flex: 1;
    /* Wrap to as many lines as the answer needs — never truncate. Longer
       localized answers (e.g. French Round 3) were being cut by a 2-line clamp;
       min-height on .answers li keeps short answers looking consistent. */
    min-width: 0;
    overflow-wrap: break-word;
}

.answers li:hover {
  filter: brightness(1.06);
}

.answers li:active {
  transform: translateY(var(--btn-lip));
  box-shadow: 0 0 0 var(--btn-blue-border);
}

.answers li.correct {
  background-color: var(--btn-correct);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-correct-border);
  color: #fff;
}

.answers li.incorrect {
  background-color: var(--btn-wrong);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-wrong-border);
  color: #fff;
}



/* Blue Buttons for Menu */
.buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.buttons button {
  background: var(--btn-blue);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  border: none;
  border-radius: 16px;
  padding: 0.7rem 2.2rem;
  cursor: pointer;
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out;
  letter-spacing: 0.5px;
}
.buttons button:disabled {
  background: var(--btn-wrong);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-wrong-border);
  color: #f3d0cd;
  cursor: not-allowed;
}
.buttons button:hover:not(:disabled) {
  filter: brightness(1.06);
}
.buttons button:active:not(:disabled) {
  transform: translateY(var(--btn-lip));
  box-shadow: 0 0 0 var(--btn-blue-border);
}

.info {
  text-align: center;
  font-size: 1.2rem;
  margin-top: 1rem;
  color: #3ec6ff;
  text-shadow: 0 1px 8px #0ff2;
  font-weight: 600;
  letter-spacing: 0.5px;
}

#answer-popup {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2000;
  justify-content: center;
  align-items: center;
}
.answer-popup-content {
  background: var(--btn-blue);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
  border-radius: 16px;
  color: #e3f0ff;
  padding: 1.5rem;
  max-width: 1200px;
  margin: 5% auto;
  font-family: var(--font-family-primary);
  text-align: center;
  position: relative;
}
#answer-popup-message {
  font-size: 2.2rem;
  margin-bottom: 1.2rem;
  color: #000000;
  font-family: var(--font-family-primary);
}
#answer-popup-close {
  width: 100%;
  background: var(--btn-blue);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 600;
  border: none;
  border-radius: 16px;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out;
  letter-spacing: 0.5px;
}
#answer-popup-close:hover {
  filter: brightness(1.06);
}
#answer-popup-close:active {
  transform: translateY(var(--btn-lip));
  box-shadow: 0 0 0 var(--btn-blue-border);
}

#question-close-btn {
  background: var(--btn-blue);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 600;
  border: none;
  border-radius: 16px;
  padding: 0.9rem 4rem;
  cursor: pointer;
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out;
  letter-spacing: 0.5px;
  margin: 2.5rem auto 0 auto;
  display: block;
  /* Prevent text selection and double-tap zoom on mobile */
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
#question-close-btn:hover {
  filter: brightness(1.06);
}
#question-close-btn:active {
  transform: translateY(var(--btn-lip));
  box-shadow: 0 0 0 var(--btn-blue-border);
}

/* Answer button states */
#points-container button.answered-correct {
  background: var(--btn-correct);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-correct-border);
  color: #ffffff !important;
}
#points-container button.answered-incorrect {
  background: var(--btn-wrong);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-wrong-border);
  color: #ffffff !important;
}
#points-container button.double-points::after {
  content: '×2';
  display: none;
  margin-left: 0.5em;
  background: linear-gradient(90deg, #ffe066 0%, #ffd700 100%);
  color: #222;
  font-size: 0.95em;
  font-weight: bold;
  border-radius: 8px;
  padding: 0.1em 0.6em;
  box-shadow: 0 1px 6px #ffd70088;
  vertical-align: middle;
  letter-spacing: 0.5px;
  position: relative;
  top: -1px;
}
body.show-double-badges #points-container button.double-points::after {
  display: inline-block;
}

/* Scoreboard: team scores + whose turn it is */
/* Turn status sits directly under the round title, the two team readouts
   tucked beneath it. */
#scoreboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.35rem, 1vh, 0.7rem);
  margin: 0 auto clamp(0.6rem, 1.8vh, 1.2rem) auto;
  font-family: var(--font-family-primary);
}
.team-readouts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;   /* room for the active card to scale up without touching */
}
/* Readouts, not controls: dark glass panels with a colour rule underneath.
   Deliberately flat — no fill, no 3D lip, no lift — so they read as a
   scoreboard rather than something pressable. Name sits above the number. */
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  min-width: 9rem;
  padding: 0.45rem 1.5rem 0.5rem 1.5rem;
  background: rgba(3, 18, 34, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: none;
  /* The team on turn is bigger; the other recedes. Scaling about the centre
     keeps both panels on the same optical line. */
  opacity: 0.45;
  transform: scale(0.92);
  transform-origin: center;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out,
              background 0.2s ease-out, border-color 0.2s ease-out;
}
.team-card .team-name {
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;   /* "TEAM 2" must never wrap */
}
.team-card .team-score {
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}
/* Team on turn */
.team-card.active-team {
  opacity: 1;
  transform: scale(1.12);
  background: rgba(3, 18, 34, 0.92);
  border-color: rgba(255, 255, 255, 0.32);
}

#reveal-fact {
  width: 90%;
  margin: auto;
}

#winner-popup {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 3000;
  justify-content: center;
  align-items: center;
  /* Keep the card off the screen edges on narrow viewports. */
  padding: 1.5rem;
  box-sizing: border-box;
}
#winner-popup .answer-popup-content {
  background: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border);
  box-shadow: none;
  border-radius: 24px;
  color: #ffffff;
  padding: 2.5rem 3rem;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  font-family: var(--font-family-primary);
  text-align: center;
  position: relative;
}
#winner-popup-message {
  margin-bottom: 1.8rem;
  color: #ffffff;
  font-family: var(--font-family-primary);
}
.winner-icon {
  font-size: 4.5rem;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.winner-headline {
  /* Carries "Team N wins this round!", so it needs room to wrap */
  font-size: clamp(1.6rem, 4vh, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
/* Round result on top, running totals beneath */
.winner-section-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.4rem;
}
.winner-section + .winner-section {
  margin-top: 0.9rem;
}
.winner-standing {
  margin-top: 0.9rem;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #ffffff;
}
/* Score panels inside the result modals — same dark readout as the board */
.winner-scores {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin: 0 auto;
}
.score-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  min-width: 7.5rem;
  padding: 0.45rem 1.3rem 0.5rem 1.3rem;
  background: rgba(3, 18, 34, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
}
.score-panel-name {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}
.score-panel-value {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}
/* The winning side stands out */
.score-panel.is-leader {
  background: rgba(3, 18, 34, 0.92);
  border-color: rgba(255, 255, 255, 0.4);
}
.score-panel.is-leader .score-panel-value { color: #B4EF5A; }

#winner-popup-close {
  background: var(--btn-correct);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-correct-border);
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 16px;
  padding: 0.8rem 2.8rem;
  cursor: pointer;
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out;
  letter-spacing: 0.5px;
}
#winner-popup-close:hover {
  filter: brightness(1.06);
}
#winner-popup-close:active {
  transform: translateY(var(--btn-lip));
  box-shadow: 0 0 0 var(--btn-correct-border);
}
.points-display-menu {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-bottom: 1.5rem;
  font-family: 'Atma', cursive, sans-serif;
  font-size: 1.1rem;
  color: #3ec6ff;
  text-shadow: 2px 2px 8px #222, 0 0 10px #3ec6ff44;
}
.points-display-menu .team-name {
  color: #e3f0ff;
  font-size: 1.05rem;
  margin-right: 0.5rem;
}
.points-display-menu .team-score {
  color: #00c853;
  font-size: 1.2rem;
  font-weight: bold;
}

/* Reveal/fade-in animation for popups */
@keyframes fadeInScale {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
#question-popup[style*="display: block"],
#question-popup[style*="display: flex"],
#answer-popup[style*="display: flex"],
#winner-popup[style*="display: flex"] {
  animation: fadeInScale 0.35s cubic-bezier(.4,1.4,.6,1) both;
}
#question-container, .answer-popup-content {
  animation: fadeInScale 0.35s cubic-bezier(.4,1.4,.6,1) both;
}

/* Fade transition for game sections */
.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.fade-in {
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* Mobile Responsive Design */
@media (max-width: 1024px) {
  /* App container adjustments */
  #app, main {
    width: 100%;
    max-width: 100%;
    padding: 0.8rem 1rem;
  }

  /* Menu section mobile adjustments. The fixed chrome overlaps the menu at both
     ends, so pad clear of the zoom controls above and the FABs below. */
  #menu-section {
    padding: 56px 0.4rem 40px 0.4rem;
  }

  /* Round selector buttons - make touch-friendly */
  /* Narrower score columns so the round button keeps most of the width */
  #round-selector {
    width: 100%;
    max-width: 100%;
    /* Full-width grid. Fixed score gutters wide enough for a 3-4 digit tally
       (Round 4 doubles), and the button column (1fr) capped so the buttons stay
       a comfortable width rather than stretching edge to edge. */
    grid-template-columns: 3.6rem minmax(0, 1fr) 3.6rem;
    column-gap: 0.6rem;
    row-gap: 1.5rem;
    margin-bottom: 0.6rem;
  }

  .round-team-head {
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 0.35rem 0.85rem;
    white-space: nowrap; /* keep "TEAM 1" on one line */
    max-width: 100%;
  }

  .round-score {
    font-size: 1.05rem;
  }

  #round-selector > button.round-btn {
    /* Cap the width and centre in the column so the buttons don't stretch the
       full grid — leaves the score gutters room and looks balanced. */
    justify-self: center;
    width: 100%;
    max-width: 300px;
    font-size: 1.65rem;
    padding: 1.15rem 2.6rem;
    min-height: 72px;
    border-radius: 20px;
    /* "ROUND 1" is short — never let it break onto two lines. */
    white-space: nowrap;
  }

  /* Menu title art (the "ultimate showdown" wordmark) reads too small on a phone
     at 48vw — give it more of the width so it anchors the picker screen. The
     .menu-logo/.menu-title-art base rules come later at equal specificity, so
     these overrides need !important to win. */
  .menu-title-art {
    width: min(340px, 74vw) !important;
    margin: 0.4rem auto 1.4rem auto !important;
  }

  /* Round title on the points board is too dominant on mobile — cap it smaller
     so it doesn't eat the screen when a category name wraps to 3 lines.
     !important because the base .round-name rule is later in the file at equal
     specificity and would otherwise win. */
  .round-name {
    font-size: clamp(1.5rem, 5.2vw, 2.1rem) !important;
  }
  .game-round-title {
    margin-bottom: 1rem !important;
    gap: 0.35rem;
  }

  /* Game section mobile layout. (width/height come from the later base
     #game-section rule, which wins on source order; only padding/min-height
     apply here.) */
  #game-section {
    min-height: 100vh;
    padding: 0.8rem 0.4rem;
  }

  /* Points board mobile layout */
  #points-board {
    width: 100%;
    margin: 0.5rem auto;
  }

  #points-table {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-width: 100%;
    /* Centre each stacked block: .points-table-content is capped at 700px, so
       without this it stretch-aligns flush-left and drags the column off-centre. */
    align-items: center;
  }

  /* Flatten the structure so we can reorder category-title-containers and points-table-content */
  /* This makes the children of these containers appear as direct children of #points-table */
  #category-titles-row {
    display: contents;
  }

  #points-containers-row {
    display: contents;
  }

  /* Ensure reordered elements are full width */
  .category-title-container,
  .points-table-content {
    width: 100%;
  }

  /* Reduce padding on points table content for mobile */
  .points-table-content {
    padding: 0.8rem 0.5rem 1rem 0.5rem;
  }

  /* Now reorder so each category title appears above its points buttons */
  /* When display: contents is used, these become direct flex children of #points-table */
  /* Category 1 title */
  #category-titles-row .category-title-container:first-child {
    order: 1;
  }

  /* Category 1 points */
  #points-containers-row #points-table-left {
    order: 2;
  }

  /* Category 2 title */
  #category-titles-row .category-title-container:last-child {
    order: 3;
  }

  /* Category 2 points */
  #points-containers-row #points-table-right {
    order: 4;
  }

  .category-title-container {
    padding: 1rem 0.8rem;
  }

  .category-title-container h3 {
    font-size: 1.7rem;
  }

  /* Keep the stacked column a fixed, centered width — not full-width. It only
     shrinks below 320px on very narrow phones. (min(...100%) is safe here: the
     flattened .points-table-content has a definite width, so no collapse.) */
  #points-container {
    grid-template-columns: min(320px, 100%);
    justify-content: center;
    gap: 0.9rem;
  }

  #points-container button {
    width: 100%;
    font-size: 1.8rem;
    padding: 0.6rem 0;
    min-height: 52px;
  }

  /* Single column, so an odd count needs no special casing */
  #points-container button:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
  }

  /* Question popup mobile adjustments */
  #question-popup {
    /* Remove background image on mobile - not responsive */
    background-image: none;
    /* Add semi-transparent dark background overlay */
    background-color: rgba(0, 0, 0, 0.62);
    /* Full screen on mobile */
    min-height: 100vh;
    /* Ensure proper display and fill the whole screen */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
  }

  #question-container {
    max-width: 100%;
    width: 100%;
    /* Own the full screen height so the layout has a definite box to fit into
       (no clipping, no page scroll). dvh tracks the mobile URL bar. */
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    /* Room for the top-right close X above the card. */
    padding: 3.5rem 0.9rem 0.9rem;
    /* No panel here: the question card and answer buttons are their own surfaces,
       so a wrapper background would read as a box inside a box. */
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.8rem;
    overflow: hidden; /* the content column scrolls, not the whole popup */
  }

  #question-content {
    flex-direction: column;
    gap: 1.2rem;
    flex: 1 1 auto;
    /* Group the card + answers together and centre them vertically instead of
       leaving a big gap between a top-pinned card and bottom-pinned answers. */
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0; /* Allows flex item to shrink below content size */
  }

  .question-card {
    flex: 0 0 auto;
    width: 100%;
    padding: 16px;
    gap: 12px;
    border-radius: 16px;
  }

  .question-image {
    width: 100%;
    height: auto;
    /* Shorter image → more room for the answers. Track the viewport so it
       shrinks on short screens instead of clipping. */
    max-height: 28dvh;
    min-height: 120px;
  }

  .question-image img {
    object-fit: contain;
  }

  .answers {
    width: 100%;
  }

  #question-title {
    font-size: 1.75rem;
    margin-top: 0;
    margin-bottom: 0.8rem;
  }

  /* Question title within answers section (bonus/no-image layout) */
  .answers #question-title {
    font-size: 1.75rem !important;
    margin-bottom: 0.8rem;
  }

  /* Badge keeps its size while the answer text grows */
  .answer-letter {
    font-size: 28px;
  }

  .answers li {
    font-size: 1.35rem !important;
    padding: 0.8rem;
    margin: 0.5rem 0;
    min-height: 40px;
    display: flex;
    align-items: center;
    /* Clean CSS button for mobile */
    background-color: var(--btn-blue);
    color: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 6px 0 var(--btn-blue-border) !important;
    transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out;
    letter-spacing: normal;
  }

  .answers li:hover {
    transform: translateY(-1px);
  }

  .answers li:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 var(--btn-blue-border) !important;
  }

  .answers li.correct {
    background-color: var(--btn-correct);
    box-shadow: 0 6px 0 var(--btn-correct-border) !important;
  }

  .answers li.incorrect {
    background-color: var(--btn-wrong);
    box-shadow: 0 6px 0 var(--btn-wrong-border) !important;
  }

  /* Hide the answer font-size controls on smaller screens — the layout is
     already tuned there and the extra chrome crowds the popup. */
  #font-size-controls {
    display: none;
  }

  /* Question close button mobile → a compact X pinned to the top-right of the
     popup. Scoped to :not(.in-result-panel) so the big correct/incorrect close
     button in the reveal flow keeps its normal styling. */
  #question-close-btn:not(.in-result-panel) {
    position: fixed;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 1002;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    margin: 0;
    font-size: 0; /* hide the "Close" text; the ✕ glyph is drawn below */
    line-height: 1;
    border-radius: 50%;
    background-color: rgba(20, 40, 75, 0.92);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.06s ease-out, filter 0.1s ease-out;
  }

  #question-close-btn:not(.in-result-panel)::before {
    content: '\2715'; /* ✕ */
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
  }

  #question-close-btn:not(.in-result-panel):hover {
    filter: brightness(1.1);
  }

  #question-close-btn:not(.in-result-panel):active {
    transform: scale(0.92);
  }

  /* No fullscreen button on mobile — the popup is already a full takeover and
     the browser chrome handles fullscreen there. */
  #fullscreen-btn {
    display: none !important;
  }

  /* Smaller reset / home FABs on mobile so they don't dominate the corner.
     !important because the base #reset-fab rule is defined later in the file at
     equal specificity and would otherwise win. */
  #reset-fab,
  #return-home-fab {
    width: 44px !important;
    height: 44px !important;
    bottom: 16px !important;
  }
  #reset-fab { right: 16px !important; }
  #return-home-fab { left: 16px !important; }
  #reset-fab .fab-svg,
  #return-home-fab .fab-svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Zoom controls are not useful on mobile (pinch-zoom exists) and only crowd
     the corner — hide them like the fullscreen button. */
  #zoom-controls {
    display: none !important;
  }

  /* FAB size/position on mobile is set in the reset-fab block above (44px, 16px
     insets, 18px icon) with !important, since the base rules come later. */

  /* Answer wrapper mobile sizing lives in the base rule (source order beats this
     block at equal specificity) — see #question-answer-wrapper further down. */


  #question-answer-wrapper #answer-result {
    font-size: 1.6rem !important;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
  }


  /* Reduce size of indicator images on points buttons */
  #points-container button img {
    width: 60px !important;
    height: 60px !important;
    left: -30px !important;
  }

  /* Reduce size of golden feather in bonus popup */
  #question-content img[src*="golden-feather"] {
    width: 50% !important;
    max-width: 200px !important;
  }

  #question-answer-wrapper #correct-answer {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.7rem;
    padding: 0 0.4rem;
  }

  #question-answer-wrapper #correct-answer .correct-answer-label,
  #question-answer-wrapper #correct-answer .correct-answer-text {
    font-family: 'Quicksand', var(--font-family-primary);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: #fff;
  }

  #question-answer-wrapper #reveal-fact {
    font-size: 1.1rem;
    padding: 0 0.4rem;
  }

  /* Team selector mobile */
  .team-selector-text {
    font-size: 1em;
  }

  #scoreboard {
    width: 100%;
    margin: 0 auto 0.9rem auto;
  }

  .team-readouts { gap: 0.9rem; }

  /* Don't let the panels shrink below their text — that is what wrapped
     "TEAM 2" onto two lines. */
  .team-card {
    flex: 0 0 auto;
    min-width: 7.5rem;
    padding: 0.35rem 0.9rem 0.4rem 0.9rem;
  }

  .team-card .team-name { font-size: 0.85rem; letter-spacing: 1px; }
  .team-card .team-score { font-size: 1.5rem; }
}

/* Narrow / portrait screens: tighten up the stacked question popup. */
@media (max-width: 900px) {
  /* Narrower, centred card so the image fills it as a clean 4:3 crop instead of
     floating in a too-wide box with dark bars down its sides. */
  .question-card {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  .question-image {
    aspect-ratio: 4 / 3;
    height: auto;
    /* Cap with vh so the card + answers + Close still fit without the popup
       scrolling or clipping; cover means the crop never shows side bars. */
    max-height: 34vh;
    min-height: 0;
  }
  .question-image img {
    object-fit: cover;
  }

  /* More breathing room between the answer buttons. */
  .answers li {
    margin-top: 1.15rem;
    margin-bottom: 1.15rem;
  }
}

/* Smaller mobile devices (phones in portrait) */
@media (max-width: 480px) {
  /* Round buttons stay big and tappable on phones — the picker is the whole
     screen here, so they can afford the size. */
  #round-selector > button.round-btn {
    font-size: 1.55rem;
    padding: 1.05rem 2.2rem;
    min-height: 66px;
    white-space: nowrap;
  }

  .menu-title-art {
    width: min(320px, 80vw) !important;
  }

  .round-name {
    font-size: clamp(1.4rem, 6vw, 1.9rem) !important;
  }

  .category-title-container h3 {
    font-size: 1.6rem;
  }

  #points-container button {
    font-size: 1.75rem;
    padding: 0.55rem 0;
  }

  #question-title {
    font-size: 1.5rem;
  }

  /* Question title within answers section (bonus/no-image layout) */
  .answers #question-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.7rem;
  }

  .answer-letter {
    font-size: 25px;
  }

  .answers li {
    font-size: 1.2rem !important;
    padding: 0.7rem;
    background-color: var(--btn-blue);
    border-radius: 12px;
    box-shadow: 0 6px 0 var(--btn-blue-border) !important;
  }

  .answers li.correct {
    background-color: var(--btn-correct);
    box-shadow: 0 6px 0 var(--btn-correct-border) !important;
  }

  .answers li.incorrect {
    background-color: var(--btn-wrong);
    box-shadow: 0 6px 0 var(--btn-wrong-border) !important;
  }

  #question-answer-wrapper {
    font-size: 1rem;
  }

  #question-answer-wrapper #answer-result {
    font-size: 1.6rem !important;
    margin-bottom: 0.4rem;
  }


  #question-answer-wrapper #correct-answer {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.7rem;
    padding: 0 0.4rem;
  }

  #question-answer-wrapper #correct-answer .correct-answer-label,
  #question-answer-wrapper #correct-answer .correct-answer-text {
    font-family: 'Quicksand', var(--font-family-primary);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: #fff;
  }

  /* Reduce size of indicator images on points buttons for small screens */
  #points-container button img {
    width: 50px !important;
    height: 50px !important;
    left: -25px !important;
  }

  /* Reduce size of golden feather in bonus popup for small screens */
  #question-content img[src*="golden-feather"] {
    width: 45% !important;
    max-width: 180px !important;
  }

  /* Result-panel close button (correct/incorrect flow) stays a full button. The
     plain close is a top-right X on mobile — see the ≤1024px block. */
  #question-close-btn.in-result-panel {
    font-size: 1rem;
    padding: 0.8rem 2.5rem;
  }

  /* Smaller FAB buttons for very small screens */
  #reset-fab,
  #return-home-fab {
    width: 44px;
    height: 44px;
    bottom: 16px;
  }

  #reset-fab {
    right: 16px;
  }

  #return-home-fab {
    left: 16px;
  }

  .fab-svg {
    width: 18px;
    height: 18px;
  }

  /* Zoom controls + fullscreen button are hidden on mobile (see ≤1024px block). */
}

/* Landscape mobile orientation */
@media (max-width: 1024px) and (orientation: landscape) {
  #question-popup {
    /* Remove background image on mobile landscape too */
    background-image: none;
    background-color: rgba(0, 0, 0, 0.62);
  }

  #question-container {
    max-height: 95%;
    margin: 2% auto;
    padding: 0.5rem 0.4rem;
    background-color: transparent;
  }

  .question-image {
    max-height: 200px;
  }

  #question-content {
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
  }

  /* Card left, answers right. The portrait ≤1024px block sets both to width:100%
     for its column stack; in this row layout that made the card full-width and
     pushed the answers off-screen. Re-establish the desktop-style split. */
  .question-card {
    flex: 0 0 42%;
    width: auto;
  }

  .question-image {
    width: 100%;
  }

  .answers {
    flex: 1;
    width: auto;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets for touch devices */
  .buttons button,
  #points-container button {
    min-height: 48px;
  }

  #round-selector > button.round-btn {
    min-height: 52px;
  }

  /* Remove hover effects on touch devices */
  .buttons button:hover,
  #points-container button:hover:not(:disabled),
  #round-selector > button.round-btn:hover:not(.selected) {
    transform: none;
  }

  /* Active state for touch feedback */
  .buttons button:active,
  #points-container button:active:not(:disabled),
  #round-selector > button.round-btn:active:not(.selected) {
    transform: scale(0.95);
    opacity: 0.9;
  }
}

/* Utility */
::-webkit-scrollbar {
  width: 8px;
  background: #222;
}
::-webkit-scrollbar-thumb {
  background: #00d5ff;
  border-radius: 4px;
}

#reset-btn { display: none !important; }
#reset-fab {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 4000;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--btn-blue);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
  border: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out;
  /* Prevent double-tap zoom on mobile */
  touch-action: manipulation;
}
#reset-fab:hover, #reset-fab:focus {
  filter: brightness(1.06);
}
#reset-fab:active {
  transform: translateY(var(--btn-lip));
  box-shadow: 0 0 0 var(--btn-blue-border);
}
#reset-fab svg {
  display: block;
}

#menu-section h1 {
  text-align: center;
  font-size: 2.3rem;
  margin-bottom: 0.2em;
}
/* Logo sizing lives on .menu-logo only — see "Menu logo with tracking eyes" */
.points-display-menu .team-score {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1px;
  margin-left: 0.2em;
}
.points-display-menu .team-name {
  color: #ffd700;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 1px;
  margin-right: 0.5rem;
}

#return-home-fab {
  position: fixed;
  bottom: 32px;
  left: 32px;
  z-index: 4000;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--btn-blue);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
  border: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out;
  /* Prevent double-tap zoom on mobile */
  touch-action: manipulation;
}
#return-home-fab:hover, #return-home-fab:focus {
  filter: brightness(1.06);
}
#return-home-fab:active {
  transform: translateY(var(--btn-lip));
  box-shadow: 0 0 0 var(--btn-blue-border);
}
#return-home-fab svg {
  display: block;
}

@keyframes pointsBoardIn {
  0% { opacity: 0; transform: translateY(40px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pointsBoardOut {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(40px) scale(0.98); }
}

#points-board.points-board-animate-in {
  animation: pointsBoardIn 0.5s cubic-bezier(.4,1.4,.6,1) both;
}
#points-board.points-board-animate-out {
  animation: pointsBoardOut 0.4s cubic-bezier(.4,1.4,.6,1) both;
}

/* The round picker reveals the same way the points board does — same keyframes,
   duration and spring curve, so moving between the two screens feels like one
   system rather than two. */
#rounds-view.menu-view-animate-in {
  animation: pointsBoardIn 0.5s cubic-bezier(.4,1.4,.6,1) both;
}
#rounds-view.menu-view-animate-out {
  animation: pointsBoardOut 0.4s cubic-bezier(.4,1.4,.6,1) both;
}

main > h2.game-round-title {
  display: flex;
}
#game-section {
  width: 80vw;
  height: 80vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Zoom Controls */
#zoom-controls {
  position: fixed;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 5000;
  display: flex;
  gap: 8px;
  align-items: center;
}

#zoom-controls button {
  width: 44px;
  height: 44px;
  background: rgba(30, 50, 90, 0.9);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  /* Prevent double-tap zoom on mobile */
  touch-action: manipulation;
}

#zoom-controls button:hover {
  background: rgba(30, 50, 90, 1);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#zoom-controls button:active {
  transform: scale(0.95);
}

#zoom-reset-btn {
  font-size: 14px;
  min-width: 60px;
}

#fullscreen-btn {
  position: fixed;
  top: 1.2rem;
  left: 200px;
  z-index: 5000;
  background: none;
  border: none;
  border-radius: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  padding: 0;
  transition: none;
}

/* Hide fullscreen button when question popup is open */
#question-popup[style*="display: block"] ~ #fullscreen-btn,
#question-popup[style*="display: flex"] ~ #fullscreen-btn {
  display: none;
}

/* Hide the page-zoom controls while the question modal is open — it's a
   full-screen takeover and they'd float on top of it. */
body:has(#question-popup[style*="display: block"]) #zoom-controls,
body:has(#question-popup[style*="display: flex"]) #zoom-controls {
  display: none;
}

/* Hide the reset / return-home FABs while the question modal is open — the
   top-right X is the only control that belongs on the question. */
body:has(#question-popup[style*="display: block"]) #reset-fab,
body:has(#question-popup[style*="display: flex"]) #reset-fab,
body:has(#question-popup[style*="display: block"]) #return-home-fab,
body:has(#question-popup[style*="display: flex"]) #return-home-fab {
  display: none !important;
}

/* The question popup is a full-screen takeover, so the round title and score
   cards behind it must not read through the overlay. visibility (not display)
   keeps the board from reflowing when the popup closes. */
#game-section:has(#question-popup[style*="display: flex"]) > .game-round-title,
#game-section:has(#question-popup[style*="display: flex"]) > #scoreboard,
#game-section:has(#question-popup[style*="display: block"]) > .game-round-title,
#game-section:has(#question-popup[style*="display: block"]) > #scoreboard {
  visibility: hidden;
}
#fullscreen-btn:hover {
  background: none;
  box-shadow: none;
}
#fullscreen-btn img {
  width: 28px;
  height: 28px;
  display: block;
}

/* Consolidated inline styles from HTML */

.menu-logo-container {
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Game title lockup, sits under the Earth Rangers logo. Wide 2.9:1 artwork
   with its own white keyline, so it needs no extra treatment over the forest.
   vh cap keeps the four round buttons above the fold on short screens. */
.menu-title-art {
  display: block;
  width: min(300px, 48vw, 32vh);
  height: auto;
  margin: 0.2rem auto 0.4rem auto;
}

/* ---- Menu logo with tracking eyes --------------------------------------
   The frog's pupils are separate sprites layered over logo-base.webp (the
   logo with the pupils painted out). All offsets are percentages of the logo
   box, so the eyes stay registered to the artwork at any size. The numbers
   come from tools/split-logo-eyes.py — re-run it if the logo changes. */

/* Sized here rather than in a media query: this block comes after the mobile
   queries at equal specificity, so it wins everywhere. The vh/vw caps do the
   responsive work — 280px on desktop, ~200px on a phone, smaller if short. */
.menu-logo {
  max-width: min(280px, 28vh, 42vw);
  width: 100%;
  display: block;
  margin: 0 auto 0.2rem auto;
}

.logo-eyes {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: min(280px, 28vh, 42vw);
  width: 100%;
}

/* Each .eye is the clip circle for that eye — it shapes the blink lid and stops
   the pupil straying onto the black outline. It runs 1 source px wider than the
   drawn iris on every side: sized to the iris exactly, the lid left a pink
   fringe of anti-aliased iris edge showing around it. 1px is about the ceiling
   — the black rim is only ~1.25px thick, so 2px swallowed the rim whole and put
   the lid out on the skin.

   Because the box is no longer the iris, jeopardy.js scales it back down by a
   per-eye ratio before working out pupil travel — see IRIS_RATIO. Change these
   numbers and those have to change with them. */
.logo-eyes .eye {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}

.logo-eyes .eye-l { left: 17%; top: 6.0847%; width: 6.75%; }
.logo-eyes .eye-r { left: 26.75%; top: 4.4974%; width: 5.25%; }

.logo-eyes .pupil {
  position: absolute;
  /* translated by jeopardy.js; rest position is the artwork's own */
  will-change: transform;
}

.logo-eyes .eye-l .pupil { left: 22.2222%; top: 11.1111%; width: 44.4444%; height: 81.4815%; }
.logo-eyes .eye-r .pupil { left: 14.2857%; top: 9.5238%; width: 52.3810%; height: 80.9524%; }

/* Tongue: a zero-size anchor at the middle of the mouth — the mouth line runs
   from src px (72,50) to (129,41), so the midpoint is (100,45) — that rotates
   to face the click. It draws on top of everything so it visibly leaves the
   mouth — layered behind the logo it only appeared once clear of the wordmark,
   which read as a line from nowhere. Hidden at rest, since the tip blob would
   otherwise sit on the snout. Lengths are set in px by jeopardy.js so the
   tongue can reach past the logo box to the cursor. */
/* Zero-sized marker left inside the logo: the only job is to be measurable, so
   frog.js can copy the mouth's viewport position onto the tongue. */
.logo-eyes .mouth {
  position: absolute;
  /* Centroid of the drawn mouth opening in the open-mouth art, src px
     (108.9, 45.3) on the 400x189 canvas. */
  left: 27.2145%;
  top: 23.9484%;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* French splash logo (fr-full-logo-*.png). The frog artwork sits at the same
   source pixels as the English logo, but the canvas is narrower — 318x189 vs
   400x189 — so every HORIZONTAL percentage scales by 400/318; the height is
   unchanged, so the top offsets stay put. Scoped to #logo-eyes (the splash
   frog): the corner frog uses the frog-only, language-neutral small logo and
   keeps its 400-based values. The language is stamped on <html> by
   applyStaticTranslations(), which also swaps the two logo images. */
html[lang="fr"] #logo-eyes .eye-l { left: 21.3836%; width: 8.4906%; }
html[lang="fr"] #logo-eyes .eye-r { left: 33.6478%; width: 6.6038%; }
html[lang="fr"] #logo-eyes .mouth { left: 34.2321%; }

/* Every tongue is re-parented here at startup. Fixed, so #app's zoom does not
   scale its length — inside #app a 122% zoom put the tip ~108px past the
   cursor. Clipped, so a tongue reaching past the window edge cannot grow the
   page and raise scrollbars. */
.tongue-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3000;
}

.tongue-layer .tongue {
  position: absolute;
  /* left/top written in viewport px by frog.js from the .mouth marker */
  width: 0;
  height: 0;
  pointer-events: none;
  visibility: hidden;
  transform: rotate(var(--tongue-angle, 0deg));
}

.tongue-layer .tongue.is-licking { visibility: visible; }

.logo-eyes .menu-logo { position: relative; z-index: 1; }
.logo-eyes .eye { z-index: 2; }

/* The mouth is drawn art now, not a CSS shape: the open-mouth frame is stacked
   exactly over the closed one, and they swap for as long as the tongue is out.
   Both carry .menu-logo so they size identically — which is why this rule has
   to sit *after* .logo-eyes .menu-logo above, same specificity, order decides.
   Ahead of it, `position: relative` won and this frame dropped into flow.

   height stays auto: at 100% it stretched to the container rather than keeping
   the art's 400x189 ratio, which pushed the mouth a few px down the frame and
   made the swap look like the logo jumping. */
.logo-eyes .logo-mouth-open {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  visibility: hidden;
}

/* Exactly one frame is ever visible. The closed one keeps its box (visibility,
   not display) so the container height never changes mid-lick. */
.logo-eyes.is-licking .logo-mouth-open { visibility: visible; }
.logo-eyes.is-licking .logo-mouth-closed { visibility: hidden; }

/* Rounds-page copy, bottom-left corner — free real estate, since the reset FAB
   is bottom-right and the return-home one is hidden. Must come after the
   .logo-eyes rules: same specificity, so source order decides. */
.logo-eyes-corner {
  position: fixed;
  left: 28px;
  bottom: 4px;
  width: 200px;
  max-width: 200px;
  z-index: 900;
}

/* `hidden` only supplies display:none at the UA level, which this rule's
   position:fixed overrides — without this the corner frog stayed on screen
   through the splash and there were two frogs. */
.logo-eyes-corner[hidden] { display: none; }

.logo-eyes-corner .menu-logo {
  max-width: 200px;
  margin: 0;
}

/* Shrink rather than vanish as the round buttons widen towards the corner */
@media (max-width: 1024px) {
  .logo-eyes-corner {
    left: 12px;
    bottom: 2px;
    width: 140px;
    max-width: 140px;
  }
  .logo-eyes-corner .menu-logo { max-width: 140px; }
}

/* Below this the buttons reach the corner and there is nowhere left to put it */
@media (max-width: 600px) {
  .logo-eyes-corner { display: none; }
}

.tongue-layer .tongue-stalk {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: var(--tongue-thickness, 8px);
  margin-top: calc(var(--tongue-thickness, 8px) / -2);
  border-radius: 999px;
  background: linear-gradient(180deg, #ff7d9c, #f0466d 55%, #c92a4f);
  box-shadow: 0 0 0 1.5px rgba(45, 8, 20, 0.55);
}

.tongue-layer .tongue-tip {
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--tongue-tip, 17px);
  height: var(--tongue-tip, 17px);
  margin-top: calc(var(--tongue-tip, 17px) / -2);
  margin-right: calc(var(--tongue-tip, 17px) / -2.6);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9db5, #e63e66 70%, #b52447);
  box-shadow: 0 0 0 1.5px rgba(45, 8, 20, 0.55);
}

/* Blink lid: skin greens sampled from the frog, swept down over the iris.
   The dark band is the lid's leading edge — every other edge in the artwork is
   outlined, so without it the lid reads as a flat wipe. It's a gradient stop
   rather than a border so its thickness stays a fixed share of the eye and
   holds up on both the 280px splash logo and the 200px corner one. */
.logo-eyes .lid {
  position: absolute;
  /* Wider than the eye so a rotated lid still covers the full circle — at
     inset:-1px the corners swing clear and let slivers of iris through. */
  inset: -1px -30%;
  background: linear-gradient(#8fbe2e, #bcd52c 95.6%, #000 96.4%);
  /* --lid-shut: how far down the lid sits, 0% = fully closed.
     --lid-tilt: worried slope, mirrored per eye below.
     Order matters — translate first, then rotate about the lid's own centre,
     so the tilt pivots where the lid actually is rather than swinging the
     whole rect in from off-screen. */
  transform: translateY(var(--lid-shut, -101%)) rotate(var(--lid-tilt, 0deg));
}

.logo-eyes.is-blinking .lid {
  animation: logo-blink 160ms ease-in-out;
}

/* A squint is the same lid travel stopped half way — the frog's reaction once
   the tongue is back in. 1320ms total: 132ms down, 1000ms held half shut,
   188ms back up. Keep the keyframe offsets and the duration in step if either
   changes, or the hold stops being a second. jeopardy.js parks the pupils
   dead centre for the same stretch, so it looks straight at the viewer. */
.logo-eyes.is-squinting .lid {
  animation: logo-squint 1320ms ease-in-out;
}

/* Worried: lids 30% down and sloping, held while the mouse is held. Not an
   animation — it is a state with no end, so it eases in via transition and the
   frog stays that way until release. The inner corners drop and the outer
   corners ride high, the classic worried brow. */
.logo-eyes .lid {
  transition: transform 180ms ease-out;
}

.logo-eyes.is-worried .eye-l .lid {
  --lid-shut: -70%;    /* 30% of the way closed */
  --lid-tilt: -24deg;
}

.logo-eyes.is-worried .eye-r .lid {
  --lid-shut: -70%;
  --lid-tilt: 24deg;   /* mirrored, so the pair is symmetric */
}

/* Bottom lids: same slab mirrored, rising from below. Parked just clear of the
   iris rather than at -101%, since it travels the other way. They stand in for
   the top lid while the tongue is being dragged, so the two never overlap —
   frog.js swaps .is-worried for .is-straining. */
.logo-eyes .lid-bottom {
  position: absolute;
  inset: -1px -30%;
  /* A lid rising from below leads with its TOP edge, so the black band sits at
     0% here — mirrored from the top lid, which leads with its bottom edge. */
  background: linear-gradient(#000 3.6%, #bcd52c 4.4%, #8fbe2e);
  transform: translateY(var(--lid-up, 101%)) rotate(var(--lid-tilt, 0deg));
  transition: transform 180ms ease-out;
}

/* Straining: bottom lids come up 30% while the top lids stay where the worried
   pose put them, so the eye narrows from both directions at once. */
.logo-eyes.is-straining .eye-l .lid {
  --lid-shut: -70%;
  --lid-tilt: -24deg;
}

.logo-eyes.is-straining .eye-r .lid {
  --lid-shut: -70%;
  --lid-tilt: 24deg;
}

.logo-eyes.is-straining .eye-l .lid-bottom {
  --lid-up: 70%;       /* 30% of the way closed, from below */
  --lid-tilt: -24deg;
}

.logo-eyes.is-straining .eye-r .lid-bottom {
  --lid-up: 70%;
  --lid-tilt: 24deg;
}

/* A blink or squint has to sweep a clear eye, so the bottom lid drops away for
   the duration rather than the two meeting in the middle. */
.logo-eyes.is-blinking .lid-bottom,
.logo-eyes.is-squinting .lid-bottom {
  --lid-up: 101%;
  --lid-tilt: 0deg;
}

/* Blink and squint are keyframed, and a transition on the same property would
   fight the animation on every frame. */
.logo-eyes.is-blinking .lid,
.logo-eyes.is-squinting .lid {
  transition: none;
}

/* The far eye trails the near one by a beat — lids moving in dead sync read
   mechanical. jeopardy.js waits for the trailing lid before clearing the
   class, or this one would snap open part-way through. */
.logo-eyes.is-blinking .eye-r .lid,
.logo-eyes.is-squinting .eye-r .lid {
  animation-delay: 35ms;
}

@keyframes logo-blink {
  0%, 100% { transform: translateY(-101%); }
  45%, 55% { transform: translateY(0); }
}

@keyframes logo-squint {
  0%, 100%   { transform: translateY(-101%); }
  10%, 85.7% { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-eyes .pupil { transform: none !important; }
  .logo-eyes .lid,
  .tongue-layer { display: none; }
}

.menu-title {
  margin: 0;
}

.round-selector-container {
  margin: 1rem 0;
}

.x2-label {
  margin-left: 0.2em;
  display: inline-block;
  background: linear-gradient(90deg,#ffd700 60%,#fffbe0 100%);
  color: #222;
  font-size: 0.95em;
  font-weight: bold;
  border-radius: 8px;
  padding: 0.1em 0.7em;
  box-shadow: 0 1px 6px #ffd70088;
  vertical-align: middle;
  letter-spacing: 0.5px;
  position: relative;
  top: -1px;
}

/* Small "Round N" badge stacked above the category name */
.game-round-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.3rem, 1vh, 0.65rem);
  text-align: center;
  margin: 0 auto clamp(1.2rem, 3.4vh, 2.6rem) auto;
  font-family: var(--font-family-primary);
  max-width: 24ch;
}
.round-badge {
  background: rgba(3, 18, 34, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.22em 1.15em;
  font-size: clamp(0.7rem, 1.6vh, 0.95rem);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.round-name {
  font-size: clamp(1.8rem, 4.4vh, 3.3rem);
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 1px;
  line-height: 1.15;
  /* Just enough lift to stay legible over the artwork, without the heavy halo */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.game-bottom-buttons {
  margin: 2rem 0 0 0;
}

.question-close-btn {
  margin-top: 1.2rem;
}

#question-answer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.35rem;
  text-align: left;
  width: 100%;
  /* NOTE: this block sits after the mobile media queries in source order and has
     equal specificity, so the base values here must be the small-screen ones —
     the desktop/projector sizing goes in the min-width rule below. */
  min-height: 0;
  padding: 1.6rem 1.2rem;
  border-radius: 20px;
  border: var(--card-border-width) solid var(--card-border);
  box-shadow: none;
  background: var(--card-bg);
  /* Kept narrow so the verdict + answer read as a compact card, not a banner */
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1025px) {
  #question-answer-wrapper {
    min-height: 50vh;
    padding: 2.5rem 3rem;
    border-radius: 24px;
    /* Full projector sizing here — the base font-size is the small-screen value. */
    font-size: 2rem;
  }
}
/* Result panels use the same dark readout background as the scoreboard;
   the verdict itself carries the colour. */
#question-answer-wrapper.result-correct,
#question-answer-wrapper.result-incorrect {
  background: rgba(3, 18, 34, 0.92);
  border-color: rgba(255, 255, 255, 0.16);
}

#question-answer-wrapper #answer-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: 'Quicksand', var(--font-family-primary);
  font-size: 2.6em;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 0.1em;
  text-align: center;
}
/* Emoji sits to the right of the word */
#question-answer-wrapper #answer-result .result-icon { order: 2; }

#question-answer-wrapper.result-correct #answer-result { color: #B4EF5A; }
#question-answer-wrapper.result-incorrect #answer-result { color: #FF6B61; }

/* Close button when it lives inside the result panel */
#question-close-btn.in-result-panel {
  width: auto;
  margin: 1.6rem auto 0 auto;
  padding: 0.7rem 3rem;
  font-size: 1.3rem;
}
#question-answer-wrapper.result-correct #question-close-btn.in-result-panel {
  background: var(--btn-correct);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-correct-border);
}
#question-answer-wrapper.result-correct #question-close-btn.in-result-panel:active {
  box-shadow: 0 0 0 var(--btn-correct-border);
}
#question-answer-wrapper.result-incorrect #question-close-btn.in-result-panel {
  background: var(--btn-wrong);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-wrong-border);
}
#question-answer-wrapper.result-incorrect #question-close-btn.in-result-panel:active {
  box-shadow: 0 0 0 var(--btn-wrong-border);
}

#question-answer-wrapper #answer-result .result-icon {
  font-size: 70px;
  line-height: 1;
}

#question-answer-wrapper #correct-answer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
  width: 100%;
  max-width: 1000px;
  margin-bottom: 0.7em;
  padding: 0;
}

#question-answer-wrapper #correct-answer .correct-answer-label,
#question-answer-wrapper #correct-answer .correct-answer-text {
  font-family: 'Quicksand', var(--font-family-primary);
  font-size: 1.15em;
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1.3;
  color: #fff;
}

#question-answer-wrapper #reveal-fact {
  text-align: center;
  width: 100%;
  max-width: 1000px;
  text-wrap: auto !important;
  margin: 0;
  padding: 0;
}

/* When answer wrapper is present, switch question-content to column layout */
#question-content:has(#question-answer-wrapper) {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Style question title within answers section */
.answers #question-title {
  font-size: 2.5rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  color: #000000;
  text-align: left;
  font-family: var(--font-family-primary);
  text-shadow: none;
  letter-spacing: 1px;
}

/* Hide question title when answer wrapper is present */
#question-container:has(#question-answer-wrapper) #question-title {
  display: none;
}

/* Answer popup animation */
#question-answer-wrapper {
  animation: answerWrapperIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes answerWrapperIn {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Individual elements animation - all from bottom with consistent timing */
#question-answer-wrapper #answer-result {
  animation: slideInFromBottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

#question-answer-wrapper #correct-answer {
  animation: slideInFromBottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

#question-answer-wrapper #reveal-fact {
  animation: slideInFromBottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}

@keyframes slideInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.answer-popup-hidden {
  display: none;
}

.winner-popup-hidden {
  display: none;
}

/* End-of-game champion modal, shown over the splash screen */
#champion-popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 6000;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  box-sizing: border-box;
}
#champion-popup.is-open {
  display: flex;
}
.champion-popup-hidden {
  display: none;
}
.champion-card {
  background: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border);
  border-radius: 24px;
  color: #ffffff;
  font-family: var(--font-family-primary);
  text-align: center;
  padding: 2.2rem 2.6rem;
  max-width: 560px;
  width: 100%;
  animation: championIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes championIn {
  0% { opacity: 0; transform: scale(0.9) translateY(16px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.champion-icon {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.champion-eyebrow {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.3rem;
}
.champion-headline {
  font-size: clamp(1.8rem, 4.5vh, 2.8rem);
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}
.champion-scores {
  margin-bottom: 1.6rem;
}
#champion-close {
  background: var(--btn-correct);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-correct-border);
  color: #ffffff;
  font-family: var(--font-family-primary);
  font-size: 1.3rem;
  font-weight: 500;
  border: none;
  border-radius: 16px;
  padding: 0.8rem 2.6rem;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out;
  touch-action: manipulation;
}
#champion-close:hover {
  filter: brightness(1.06);
}
#champion-close:active {
  transform: translateY(var(--btn-lip));
  box-shadow: 0 0 0 var(--btn-correct-border);
}

@media (max-width: 480px) {
  .champion-card {
    padding: 1.6rem 1.2rem;
  }
  .champion-icon {
    font-size: 3rem;
  }
  .champion-scores {
    font-size: 1.05rem;
  }
}

/* Optional end-of-game call-to-action, shown when settings.json cta_enabled is
   true and the winner screen's Next button is pressed. Same card treatment as
   the champion modal. */
#cta-popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 6000;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  box-sizing: border-box;
}
#cta-popup.is-open {
  display: flex;
}
.cta-popup-hidden {
  display: none;
}
.cta-card {
  background: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border);
  border-radius: 24px;
  color: #ffffff;
  font-family: var(--font-family-primary);
  text-align: center;
  padding: 2rem 2.2rem 2.2rem 2.2rem;
  max-width: 520px;
  width: 100%;
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  animation: championIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cta-image {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 1.3rem;
  background: rgba(0, 0, 0, 0.12);
}
.cta-title {
  font-size: clamp(1.5rem, 3.6vh, 2.1rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
}
.cta-description {
  font-size: 1.1rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.6rem;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}
.cta-actions button {
  font-family: var(--font-family-primary);
  font-size: 1.2rem;
  font-weight: 500;
  color: #ffffff;
  border: none;
  border-radius: 16px;
  padding: 0.8rem 2rem;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.1s ease-out;
  touch-action: manipulation;
}
.cta-actions button:hover {
  filter: brightness(1.06);
}
.cta-actions button:active {
  transform: translateY(var(--btn-lip));
}
/* Visit is the primary action */
.cta-visit {
  background: var(--btn-correct);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-correct-border);
}
.cta-visit:active {
  box-shadow: 0 0 0 var(--btn-correct-border);
}
/* Play Again is secondary */
.cta-play-again {
  background: var(--btn-blue);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
}
.cta-play-again:active {
  box-shadow: 0 0 0 var(--btn-blue-border);
}

@media (max-width: 480px) {
  .cta-card {
    padding: 1.4rem 1.2rem 1.6rem 1.2rem;
  }
  .cta-image {
    max-height: 190px;
    margin-bottom: 1rem;
  }
  .cta-description {
    font-size: 1rem;
  }
  .cta-actions button {
    font-size: 1.1rem;
    padding: 0.75rem 1.6rem;
  }
}

#game-section.game-section-hidden {
  display: none !important;
}

.reset-fab-styles {
  display: none;
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 4000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--btn-blue);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
  border: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.return-home-fab-styles {
  display: none;
  position: fixed;
  bottom: 32px;
  left: 32px;
  z-index: 4000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--btn-blue);
  box-shadow: 0 var(--btn-lip) 0 var(--btn-blue-border);
  border: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fab-svg {
  width: 32px;
  height: 32px;
  display: block;
  opacity: 1;
  stroke: #fff;
}

.team-selector {
  display: none;
  text-align: center;
  margin: 0.7rem 0 1rem 0;
}

.team-selector-text {
  margin-top: 0.5rem;
  font-size: 1.1em;
  color: #3ec6ff;
  font-family: Atma, cursive;
}