/* David's Seventieth Superquiz Spectacular: riveted brushed-steel plates, thick black outlines
   and the logo's colours (racing green, United red, gold, neon, guitar amber, race-bib cream).
   Same class and colour names as the old doodle style, so the pages and scripts didn't change. */
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Barlow+Condensed:wght@500;700&display=swap');

:root {
  --ink: #121212; --paper: #E4E7EA; --sand: #0D3B2A; --muted: #4E565E;
  --pink: #D7261E; --salmon: #E3A33A; --teal: #1F7A4D; --yellow: #F6C21C; --blue: #F3ECD9; --lilac: #C6F02A;
  --green: #0D3B2A; --green-dark: #072619; --steel: #C3C9CF; --gold: #F6C21C; --red-dark: #8E1410;
  --wobble: 16px;
  --rivet: radial-gradient(circle, #FFFFFF 0 1.2px, #C9CED3 1.6px 2.7px, #4A5056 3.1px 3.9px, transparent 4.3px);
  --rivets: var(--rivet) 2px 2px / 13px 13px no-repeat, var(--rivet) calc(100% - 2px) 2px / 13px 13px no-repeat,
            var(--rivet) 2px calc(100% - 2px) / 13px 13px no-repeat, var(--rivet) calc(100% - 2px) calc(100% - 2px) / 13px 13px no-repeat;
  --brushed: repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, rgba(0,0,0,0.03) 1px 3px),
             linear-gradient(165deg, #F2F4F6 0%, #C9CED4 42%, #E5E8EB 58%, #B5BBC1 100%);
  --sheen: linear-gradient(170deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.14) 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 500; color: var(--ink); background: var(--sand); -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

/* Block lettering: gold with a black outline and a red side, like a stamped badge. */
.dt, .dt-s { font-family: 'Bungee', 'Arial Black', sans-serif; font-weight: 400; color: var(--fill, var(--gold)); paint-order: stroke fill; line-height: 1.08; letter-spacing: 0.5px; }
.dt { -webkit-text-stroke: 3px var(--ink); text-shadow: 1px 1px 0 var(--ink), 2px 2px 0 var(--side, var(--red-dark)), 3px 3px 0 var(--side, var(--red-dark)), 4px 4px 0 var(--side, var(--red-dark)), 5px 5px 0 var(--side, var(--red-dark)), 6px 6px 0 var(--ink), 7px 7px 0 var(--ink); }
.dt-s { -webkit-text-stroke: 2px var(--ink); text-shadow: 1px 1px 0 var(--side, var(--red-dark)), 2px 2px 0 var(--side, var(--red-dark)), 3px 3px 0 var(--ink); }

/* Riveted plate. Plain = brushed steel; a colour class paints it that colour with a metal sheen. */
.box { --plate: var(--brushed); background: var(--rivets), var(--plate); color: var(--ink); border: 4px solid var(--ink); border-radius: var(--wobble); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 6px 0 var(--ink); }
.btn { font-family: 'Bungee', 'Arial Black', sans-serif; font-size: 20px; letter-spacing: 0.5px; border: 4px solid var(--ink); border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3), 0 5px 0 var(--ink); --plate: var(--brushed); background: var(--rivets), var(--plate); color: var(--ink); padding: 12px 18px; min-height: 58px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; touch-action: manipulation; }
.btn:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3), 0 1px 0 var(--ink); }
.btn.small { font-size: 15px; min-height: 46px; padding: 6px 12px; }
.btn.left { justify-content: flex-start; text-align: left; }
.btn[disabled] { opacity: 0.45; }
.pink   { --plate: var(--sheen), var(--pink);   background: var(--rivets), var(--sheen), var(--pink);   color: #fff; }
.salmon { --plate: var(--sheen), var(--salmon); background: var(--rivets), var(--sheen), var(--salmon); }
.teal   { --plate: var(--sheen), var(--teal);   background: var(--rivets), var(--sheen), var(--teal);   color: #fff; }
.yellow { --plate: var(--sheen), var(--yellow); background: var(--rivets), var(--sheen), var(--yellow); }
.blue   { --plate: var(--blue);                 background: var(--rivets), var(--blue); }
.lilac  { --plate: var(--sheen), var(--lilac);  background: var(--rivets), var(--sheen), var(--lilac); }
.cream  { --plate: var(--brushed);              background: var(--rivets), var(--brushed); }
.pill { display: inline-flex; align-items: center; gap: 8px; border: 3px solid var(--ink); border-radius: 8px; padding: 2px 12px; background: var(--blue); color: var(--ink); white-space: nowrap; font-weight: 700; }
.av { flex: none; width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: 'Bungee', sans-serif; font-size: 30px; color: var(--ink); box-shadow: inset 0 0 0 3px #D9DDE1, inset 0 0 0 5px #6B7278, 0 4px 0 var(--ink); overflow: hidden; position: relative; }
.av.pink, .av.teal { color: #fff; }
.av video, .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av.off { opacity: 0.4; }
.lab { color: var(--muted); font-size: 18px; }
.input { border: 4px solid var(--ink); border-radius: 10px; background: #fff; font-size: 26px; padding: 12px 16px; min-height: 60px; width: 100%; font-weight: 700; }
.row { display: flex; gap: 12px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 14px; }
.grow { flex: 1; }
.center { text-align: center; }
.right-ans { background: var(--rivets), var(--sheen), var(--teal) !important; color: #fff !important; }
.wrong-ans { background: var(--rivets), var(--sheen), #7E8A94 !important; color: #fff !important; }

/* The logo, used on the lobby, the phones' join screen and the final podium. */
.logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 0 rgba(0,0,0,0.35)); }
/* Race-bib number (the "70" bib in the logo): scores and the question count. */
.bib { display: inline-flex; flex-direction: column; align-items: center; background: #F3ECD9; color: var(--ink); border: 3px solid var(--ink); border-radius: 8px; padding: 2px 12px 3px; font-family: 'Bungee', sans-serif; line-height: 1; box-shadow: 0 4px 0 var(--ink); }
.bib::after { content: ''; display: block; width: 70%; height: 5px; margin-top: 3px; background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 2px, var(--ink) 2px 4px, transparent 4px 5px); }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 50; pointer-events: none; }
.overlay .box { padding: 22px 30px; max-width: 90%; text-align: center; pointer-events: auto; animation: pop 0.35s ease-out; }
@keyframes pop { from { transform: scale(0.6) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(-2deg); opacity: 1; } }
@keyframes wobble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(1.5deg); } }
.wobble { animation: wobble 2.4s ease-in-out infinite; }