/* =========================================================================
   "Last Orders" — shared design system for the live quiz
   Retro British game-show scoreboard: brass & bulbs on espresso ink.
   Committed dark theme. Vanilla CSS, no build step.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* --- ground & structure (warm espresso-ink) --- */
  --ink-900: #110D07;
  --ink-850: #16110A;
  --ink-800: #1C150C;
  --ink-700: #251C10;
  --line:     #3E3119;
  --line-soft:#2A2013;

  /* --- text (warm ivory / aged brass) --- */
  --cream:     #F7F0DE;
  --cream-dim: #CBB88E;
  --faint:     #8D7D5A;

  /* --- brass, the star --- */
  --brass:    #EBC15A;
  --brass-hi: #FFDD86;
  --brass-dp: #A97C22;
  --brass-sh: #7B5716;

  /* --- signals & option hues (off the red-green axis where possible) --- */
  --good:     #5FC97D;
  --good-dp:  #2E7D46;
  --red:      #E8593F;
  --opt-a:    #EBC15A; /* brass  */
  --opt-b:    #58B9C3; /* teal   */
  --opt-c:    #E88A5A; /* coral  */
  --opt-d:    #B487E2; /* violet */

  /* --- Quiztache --- */
  --baize:    #1E4E3B; /* signature green-baize */
  --baize2:   #153B2C;
  --claret:   #C24A46; /* cheeky pop */
  --tache: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 82'%3E%3Cg fill='%23fff'%3E%3Cpath d='M120 34 C138 28 158 28 176 37 C190 44 202 46 210 41 C221 34 229 39 226 28 C223 20 213 22 212 32 C211 42 201 52 187 51 C167 57 145 57 129 49 C123 46 121 41 120 40 Z'/%3E%3Cpath transform='translate(240,0) scale(-1,1)' d='M120 34 C138 28 158 28 176 37 C190 44 202 46 210 41 C221 34 229 39 226 28 C223 20 213 22 212 32 C211 42 201 52 187 51 C167 57 145 57 129 49 C123 46 121 41 120 40 Z'/%3E%3C/g%3E%3C/svg%3E");

  --radius: 16px;
  --shadow: 0 22px 55px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,220,140,.05);
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-ui: "Hanken Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* Quiztache moustache mark — colour follows `color`, size via `width` */
.tache {
  display: inline-block; aspect-ratio: 240 / 82; background: currentColor;
  -webkit-mask: var(--tache) center / contain no-repeat;
  mask: var(--tache) center / contain no-repeat;
}

/* Quiztache logo lockup — the moustache leads, big and glowing */
.logo-m { display: block; width: min(66%, 260px); margin: 0 auto 2px; color: var(--brass);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)) drop-shadow(0 0 24px rgba(235,193,90,.22)); }
.tagpill { display: inline-block; margin-top: 14px; font-family: var(--font-ui); font-weight: 800;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-hi);
  background: linear-gradient(180deg, var(--baize), var(--baize2)); border: 1px solid var(--brass-dp);
  padding: 6px 15px; border-radius: 22px; }

html, body { height: 100%; }
body {
  margin: 0;
  /* Quiztache: deep green-baize ground, not the old espresso-black */
  background:
    radial-gradient(130% 95% at 50% -8%, #205943, transparent 58%),
    radial-gradient(95% 75% at 50% 120%, #0b1f17, transparent 60%),
    #0E241B;
  background-attachment: fixed;
  color: var(--cream);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* Stage glow — a warm spotlight from above */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(235,193,90,.16), transparent 55%),
    radial-gradient(80% 60% at 50% 120%, rgba(88,185,195,.06), transparent 60%);
  pointer-events: none; z-index: 0;
}
/* Film grain for warmth/depth */
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: overlay;
  pointer-events: none; z-index: 1;
}
main, .stage { position: relative; z-index: 2; }

/* --- marquee bulbs -------------------------------------------------------- */
.bulbs {
  height: 10px;
  background:
    radial-gradient(circle at center, var(--brass-hi) 0 2px, var(--brass) 2px 2.6px, transparent 3px) repeat-x;
  background-size: 20px 10px;
  filter: drop-shadow(0 0 4px rgba(235,193,90,.65));
  animation: bulbGlow 2.4s ease-in-out infinite;
}
@keyframes bulbGlow { 0%,100%{opacity:.9} 50%{opacity:.55} }

/* --- wordmark ------------------------------------------------------------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: .9;
  text-transform: uppercase;
  color: var(--cream);
}
.wordmark b { color: var(--brass); }
.tagline {
  font-family: var(--font-ui);
  font-weight: 700; font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--faint);
}

/* --- flip-board tiles (join code, scores) --------------------------------- */
.tile {
  position: relative;
  background: linear-gradient(#221909, #150f06);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--brass);
  font-family: var(--font-display);
  font-weight: 800; font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,220,140,.10), 0 8px 18px rgba(0,0,0,.55);
  text-shadow: 0 0 18px rgba(235,193,90,.35);
}
.tile::after { /* the hinge line of a split-flap tile */
  content: ""; position: absolute; left: 6%; right: 6%; top: 50%;
  height: 1px; transform: translateY(-.5px);
  background: rgba(0,0,0,.6); box-shadow: 0 1px 0 rgba(255,235,180,.05);
}
@keyframes flipIn {
  0% { transform: rotateX(-90deg); opacity: 0; }
  55% { transform: rotateX(14deg); opacity: 1; }
  100% { transform: rotateX(0); }
}
.tile.flip { transform-origin: top center; animation: flipIn .5s cubic-bezier(.2,.85,.25,1) both; }

/* --- buttons (arcade press) ---------------------------------------------- */
.btn {
  font-family: var(--font-ui); font-weight: 800; font-size: 15px; letter-spacing: .015em;
  border: 0; border-radius: 13px; padding: 15px 24px; cursor: pointer;
  color: #241606; background: linear-gradient(#F6CE6A, #DFAB3C);
  box-shadow: 0 6px 0 var(--brass-sh), 0 12px 22px rgba(0,0,0,.45);
  transition: transform .07s ease, box-shadow .07s ease, filter .15s;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--brass-sh), 0 6px 12px rgba(0,0,0,.45); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: 0 6px 0 var(--brass-sh); }
.btn-ghost {
  font-family: var(--font-ui); font-weight: 700; font-size: 14px; cursor: pointer;
  color: var(--cream); background: #1F1810; border: 1px solid var(--line);
  border-radius: 11px; padding: 11px 16px;
  box-shadow: 0 4px 0 #100b05; transition: transform .07s, box-shadow .07s, border-color .15s;
}
.btn-ghost:hover { border-color: var(--brass-dp); }
.btn-ghost:active { transform: translateY(3px); box-shadow: 0 1px 0 #100b05; }

/* --- card ----------------------------------------------------------------- */
.card {
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* --- inputs --------------------------------------------------------------- */
.field { width: 100%; }
.field label {
  display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; margin: 0 0 7px;
}
input.f {
  width: 100%; padding: 14px 15px; font-family: var(--font-ui); font-size: 16px; font-weight: 600;
  color: var(--cream); background: #0F0B06; border: 1px solid var(--line);
  border-radius: 12px; outline: none; transition: border-color .15s, box-shadow .15s;
}
input.f::placeholder { color: #6b5e42; }
input.f:focus { border-color: var(--brass-dp); box-shadow: 0 0 0 3px rgba(235,193,90,.18); }

/* --- timer bar ------------------------------------------------------------ */
.timer { height: 8px; border-radius: 6px; background: #0F0B06; border: 1px solid var(--line-soft); overflow: hidden; }
.timer i { display: block; height: 100%; width: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--red), var(--brass) 45%, var(--brass-hi)); }

/* --- utilities ------------------------------------------------------------ */
.mono-num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
a { color: var(--brass); }

@media (prefers-reduced-motion: reduce) {
  .tile.flip, .bulbs { animation: none; }
  .btn, .btn-ghost { transition: none; }
}