/* Cymry Mapper — shared styles */
:root {
  --red: #8a1220;
  --red-dark: #650d18;
  --ink: #1c1a19;
  --paper: #ffffff;
  --paper-line: #e6e6e6;
  --muted: #6f6a63;
  --radius: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  position: relative;
}

/* Homepage: fit header + hero + cards + footer within the viewport */
body:has(.hero) {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body:has(.hero) main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Flag game page: fit header + game + footer within the viewport, no scroll */
body:has(.game-main) {
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body:has(.game-main) .site-header {
  flex-shrink: 0;
}

body:has(.game-main) .site-footer {
  flex-shrink: 0;
}

a { color: inherit; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
}

.site-header .back-link {
  margin-left: auto;
}

.wordmark {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}

.back-link {
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.back-link:hover {
  color: var(--ink);
  border-color: var(--muted);
}

main {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Hero fills the space between the header and the cards, and centers its
   own content within that space */
.hero {
  flex: 1;
  text-align: center;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tagline {
  margin: var(--space-2) 0 clamp(var(--space-4), 3vh, var(--space-6));
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--muted);
}

.tiktok-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--red);
  color: #fff;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.15s ease;
}

.tiktok-btn:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
}

/* Cards */
.cards {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding-bottom: clamp(var(--space-4), 3vh, var(--space-8));
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-3);
  min-height: 160px;
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.card:not(.card--disabled):hover {
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(138, 18, 32, 0.08);
}

.card h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.15;
}

.card-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(138, 18, 32, 0.08);
  padding: 3px 10px;
  border-radius: 999px;
}

.card-tag--muted {
  color: var(--muted);
  background: var(--paper-line);
}

.card-cta {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--red);
}

.card-cta--muted {
  color: var(--muted);
}

.card--disabled {
  cursor: default;
  opacity: 0.72;
}

.site-footer {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 640px) {
  .cards {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .site-header {
    padding: var(--space-3) var(--space-4);
  }
  .card {
    padding: var(--space-4);
  }
  .site-footer {
    padding: var(--space-3) var(--space-4);
  }
}

/* ---- Flag game ---- */
/* Above-the-fold: game-main takes the remaining viewport height after the
   header/footer, and its children share that space without overflowing. */
.game-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(var(--space-2), 2vh, var(--space-4));
}

/* Each of the three screens (settings / game / over) fills the available
   space and centers its own content, matching the game-main flex column. */
.screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.screen[hidden] {
  display: none;
}

/* ---- Settings screen ---- */
#screen-settings {
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-3), 2.4vh, var(--space-6));
  text-align: center;
}

.screen-title {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
}

.setting-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.setting-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.setting-note {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.toggle-group {
  display: inline-flex;
  justify-content: center;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: #fff;
  padding: 3px;
}

.toggle-btn {
  border: none;
  background: transparent;
  padding: 8px 22px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.toggle-btn[aria-pressed="true"] {
  background: var(--red);
  color: #fff;
}

.start-btn {
  border: none;
  background: var(--red);
  color: #fff;
  padding: 12px 32px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.start-btn:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
}

/* ---- Game over screen ---- */
#screen-over {
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-3), 2.4vh, var(--space-6));
  text-align: center;
}

.over-stats {
  display: flex;
  justify-content: center;
  gap: clamp(var(--space-4), 6vw, var(--space-8));
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: clamp(var(--space-3), 2vh, var(--space-4)) var(--space-6);
}

.pb-banner {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--red);
}

/* ---- In-game header ---- */
.game-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: clamp(var(--space-2), 2vh, var(--space-4)) 0 clamp(var(--space-2), 2vh, var(--space-4));
}

.lives {
  display: inline-flex;
  gap: 6px;
  font-size: 1.3rem;
  line-height: 1;
}

.heart {
  color: var(--red);
  transition: color 0.15s ease, opacity 0.15s ease;
}

.heart--lost {
  color: var(--paper-line);
}

.stats-bar {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: clamp(var(--space-4), 6vw, var(--space-8));
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: clamp(var(--space-2), 1.6vh, var(--space-4)) var(--space-6);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--red);
}

.game-board {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-2), 2vh, var(--space-6));
}

.board-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--space-2), 2vh, var(--space-6));
  min-height: 0;
}

.flag-frame {
  width: 100%;
  max-width: 360px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 34vh;
  aspect-ratio: 3 / 2;
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(var(--space-2), 1.6vh, var(--space-4));
}

.flag-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.options {
  width: 100%;
  max-width: 460px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-2), 1.6vh, var(--space-3));
}

.guess-form {
  width: 100%;
  max-width: 460px;
  flex-shrink: 0;
  display: flex;
  gap: var(--space-2);
}

.guess-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: #fff;
  padding: clamp(8px, 1.6vh, 14px) var(--space-4);
  font-size: 0.95rem;
  color: var(--ink);
  font-family: inherit;
}

.guess-input:focus {
  outline: none;
  border-color: var(--red);
}

.guess-input:disabled {
  opacity: 0.7;
}

.submit-btn {
  flex-shrink: 0;
  border: none;
  background: var(--red);
  color: #fff;
  padding: clamp(8px, 1.6vh, 14px) 22px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.submit-btn:hover:not(:disabled) {
  background: var(--red-dark);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Desktop / wide viewports: flags and options sit side by side, using the
   extra horizontal space instead of squeezing everything into one narrow
   centered column. Options stack vertically (single column) so the flag
   itself can grow larger. */
@media (min-width: 800px) {
  .board-row {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-6);
  }

  .flag-frame {
    flex: 1 1 auto;          /* width comes from flex, fills the row */
    width: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;      /* the culprit: stop height driving width */
    height: auto;
  }

  .options {
    flex: 0 0 clamp(240px, 32%, 320px);
    width: auto;
    max-width: none;
    grid-template-columns: 1fr;
  }

  .guess-form {
    flex: 0 0 clamp(240px, 32%, 320px);
    width: auto;
    max-width: none;
    flex-direction: column;
    align-self: center;
  }

  .guess-form .submit-btn {
    width: 100%;
  }
}

.option-btn {
  border: 1px solid var(--paper-line);
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(8px, 1.6vh, 14px) 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.option-btn:hover:not(:disabled) {
  border-color: var(--red);
  transform: translateY(-1px);
}

.option-btn:disabled {
  cursor: default;
}

.option-btn.correct {
  background: rgba(34, 120, 60, 0.12);
  border-color: #22783c;
  color: #1c5c30;
}

.option-btn.incorrect {
  background: rgba(138, 18, 32, 0.1);
  border-color: var(--red);
  color: var(--red-dark);
}

.feedback {
  flex-shrink: 0;
  min-height: 1.4em;
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

.next-btn {
  flex-shrink: 0;
  border: none;
  background: var(--red);
  color: #fff;
  padding: clamp(8px, 1.6vh, 12px) 28px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.next-btn:hover {
  background: var(--red-dark);
}

.next-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (max-width: 480px) {
  .options {
    grid-template-columns: 1fr;
  }
  .stats-bar {
    gap: var(--space-6);
  }
  .guess-form {
    flex-direction: column;
  }
  .guess-form .submit-btn {
    width: 100%;
  }
}

/* Short viewports (landscape phones, small windows): compress further so
   the game still fits entirely above the fold with no scroll. Only forces
   the options back into a row below the desktop breakpoint — on desktop
   widths they stay stacked in a single column next to the (larger) flag. */
@media (max-height: 600px) {
  .game-head,
  .stats-bar,
  .site-footer {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

@media (max-height: 600px) and (max-width: 799px) {
  .flag-frame {
    max-height: 26vh;
  }
  .options {
    grid-template-columns: repeat(4, 1fr);
  }
}