/* =====================================================================
   SKIN: Geography trivia  -  an old atlas
   Hand-written; tools/build-routes.js links it from this folder's
   index.html but never overwrites it. Loaded after css/style.css, so it
   only needs to override tokens and a few components.
   ===================================================================== */

body.game--geography-trivia {
  --ink: #1F2A33;
  --paper: #EFE6CF;
  --paper-2: #E3D5B3;
  --white: #FBF6E9;
  --coral: #D9643A;   /* terracotta */
  --sun: #E9B949;     /* sand */
  --mint: #6FAE7F;    /* lowland green */
  --sky: #5B9BC4;     /* sea */
  --tomato: #B4472A;
  --accent: #5B9BC4;
  --font-atlas: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;

  /* latitude/longitude grid on old paper */
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(rgba(91,155,196,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,155,196,.18) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  background-attachment: fixed;
}
body.game--geography-trivia .bg-dots { display: none; }

/* the question card: a patch of map with contour lines */
body.game--geography-trivia .polaroid { transform: rotate(-.6deg); }
body.game--geography-trivia .polaroid__text {
  background:
    repeating-radial-gradient(ellipse at 28% 38%, transparent 0 22px, rgba(31,42,51,.09) 22px 24px),
    repeating-radial-gradient(ellipse at 78% 72%, transparent 0 18px, rgba(31,42,51,.07) 18px 20px),
    linear-gradient(160deg, #F7EED6, #E8D9B2);
}
body.game--geography-trivia .polaroid__text .question {
  font-family: var(--font-atlas);
  font-weight: 700;
  letter-spacing: -.01em;
  text-shadow: none;
}
body.game--geography-trivia .polaroid__caption { font-family: var(--font-atlas); font-style: italic; }

/* answer buttons: sea, land, sand, clay */
body.game--geography-trivia .answer--0 { --c: var(--sky); }
body.game--geography-trivia .answer--1 { --c: var(--mint); }
body.game--geography-trivia .answer--2 { --c: var(--sun); }
body.game--geography-trivia .answer--3 { --c: var(--coral); }
body.game--geography-trivia .answer { font-family: var(--font-atlas); font-weight: 700; }

/* "Round N" splash: a sea chart */
body.game--geography-trivia .splash {
  background-color: var(--sky);
  background-image:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 40px, rgba(255,255,255,.12) 40px 42px),
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: auto, 80px 80px, 80px 80px;
}

/* the text below the game */
body.game--geography-trivia .legal h1 { color: var(--sky); font-family: var(--font-atlas); font-weight: 700; }
body.game--geography-trivia .legal h2,
body.game--geography-trivia .answers-list summary { font-family: var(--font-atlas); font-weight: 700; }
body.game--geography-trivia .legal a { color: var(--tomato); }