/* ============================================================
   THEME: SU VOLT ULTRA — complementary clash
   A Sound Unit colorway: same poster structure — heavy borders,
   hard offset shadows, ticket-stub pills, headliner italics —
   in a different ink run. Volt chartreuse screenprinted on deep violet stock:
   near-complementary inks, the boldest run of the family.
   The score health meter is shared across ALL Sound Unit
   colorways and must not change: 80-100 green / 50-79 yellow /
   30-49 orange / 0-29 red.

   Mechanism: un-layered CSS beats Tailwind v4's @layer utilities.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,500;0,700;0,900;1,900&display=swap");

:root {
  --color-blue-500: #cff000;   /* primary ink: play, guess */
  --color-blue-400: #a6c400;
  --color-blue-100: #31350f;
  --color-white: #171026;      /* stock — also text on primary keys */
  --color-gray-100: #201736;   /* lighter pass of stock */
  --color-gray-200: #3e3260;   /* structural lines */
  --color-gray-400: #efeaf8;
  --color-gray-500: #9c92b4;   /* silkscreen grey */
  --color-gray-900: #efeaf8;   /* text ink */
  --color-green-500: #4cba62;
  --color-green-600: #7fd98f;
  --color-red-500: #ff5c40;
  --color-red-100: #3a1d16;
  --color-orange-100: #3a2c14;
  --color-orange-400: #e8a33d;
  --color-orange-500: #ff8a00;
  --color-slate-100: #221a38;
  --color-slate-400: #6d6390;

  --font-sans: "Archivo", "Helvetica Neue", Helvetica, sans-serif;

  --radius-lg: 3px;
  --radius-xl: 3px;
  color-scheme: dark;
}

body {
  background: #100a1c;
  color: #efeaf8;
}

/* Poster tape-up: hard offset ink. */
.shadow-lg  { box-shadow: 7px 7px 0 #000000; }
.shadow-2xl { box-shadow: 9px 9px 0 #000000; }
.backdrop-blur-md, .backdrop-blur-sm { backdrop-filter: none; }

/* Ink prints heavy. */
.border { border-width: 2px; }
header { border-bottom: 4px solid #efeaf8; }
.border-t.border-gray-200 { border-top: 4px solid #efeaf8; }

/* Pills become ticket stubs. */
.rounded-full { border-radius: 3px; }

button.rounded-full,
button[type="submit"] {
  border: 2px solid #efeaf8;
  box-shadow: 3px 3px 0 #000000;
}
button.rounded-full:active,
button[type="submit"]:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000000;
}

/* Headliner type. */
button[type="submit"] {
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ------------------------------------------------------------
   SHARED SCORE SECTION — identical in every Sound Unit colorway.
   Do not retint per palette. Tier boundaries:
     80-100 green #2e8b46 | 50-79 yellow #f0b400
     30-49 orange #ff6a00 |  0-29 red    #c81e1e
   ------------------------------------------------------------ */
span[aria-label^="Score"] {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  border: 2px solid #191919 !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* green: 80-100 */
span[aria-label^="Score 100"],
span[aria-label^="Score 9"],
span[aria-label^="Score 8"] {
  background-color: #2e8b46 !important;
  color: #ecece8 !important;
}
/* yellow: 50-79 */
span[aria-label^="Score 7"],
span[aria-label^="Score 6"],
span[aria-label^="Score 5"] {
  background-color: #f0b400 !important;
  color: #191919 !important;
}
/* orange: 30-49 */
span[aria-label^="Score 4"],
span[aria-label^="Score 3"] {
  background-color: #ff6a00 !important;
  color: #ecece8 !important;
}
/* red: 0-29 (":not" keeps "Score 1..." from matching "Score 100") */
span[aria-label^="Score 2"],
span[aria-label^="Score 1"]:not([aria-label^="Score 100"]),
span[aria-label^="Score 0"] {
  background-color: #c81e1e !important;
  color: #ecece8 !important;
}
span[aria-label^="Score"] small { color: inherit; opacity: 0.75; }

/* Score-drop alarm: pill enlarges + flashes red; -10 badge floats up.
   Keyed off the badge the app only renders during a drop. */
span.relative > span.absolute[aria-hidden="true"] + span[aria-label^="Score"] {
  animation: su-score-drop 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: 100% 50%;
}
@keyframes su-score-drop {
  0%   { transform: scale(1); }
  12%  { transform: scale(1.45); background-color: #c81e1e; color: #ecece8; box-shadow: 0 0 0 4px rgb(200 30 30 / 0.35); }
  40%  { transform: scale(1.2); background-color: #c81e1e; color: #ecece8; }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

span.relative > span.absolute.bg-red-500[aria-hidden="true"] {
  animation: su-minus-float 0.9s ease-out both;
  background-color: #e03e1a !important; /* pinned: palette-proof */
  border: 2px solid #191919;
  color: #ecece8;
  font-weight: 900;
}
@keyframes su-minus-float {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -26px); }
}

@media (prefers-reduced-motion: reduce) {
  span[aria-label^="Score"],
  span.relative > span.absolute[aria-hidden="true"] { animation: none !important; }
}
/* ---------------- end shared score section ---------------- */

#country-guess { font-weight: 700; }
#country-guess::placeholder { text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.06em; }

[role="listbox"] { border: 3px solid #efeaf8; box-shadow: 7px 7px 0 #000000; }
[role="option"] { border-bottom: 1.5px solid rgb(239 234 248 / 0.25); font-weight: 700; }
[role="option"]:last-child { border-bottom: none; }