/* Quizbox Music Challenge: a 50s diner with a jukebox. Red walls, chequered floor, chrome and cream. */
:root {
  --red: #b3161b;
  --red-dark: #6e0a0e;
  --cream: #fbf3df;
  --cream-2: #efe0bd;
  --ink: #2a1410;
  --gold: #f6b730;
  --gold-dark: #b46a0c;
  --wood: #4a1d10;
  --ok: #3cb85c;
  --no: #e8423a;
  --font-script: 'Pacifico', 'Brush Script MT', cursive;
  --font-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 16px/1.4 var(--font-body); color: var(--ink); background: var(--red-dark); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.start {
  border: 3px solid #4a0507; border-radius: 999px; padding: .7rem 2rem;
  background: radial-gradient(circle at 35% 30%, #ff7a6c, #e8261d 55%, #8c0c0c);
  color: #fff; font: 800 1.6rem/1 var(--font-cond); letter-spacing: .08em;
  box-shadow: 0 6px 0 #4a0507, 0 0 30px rgba(255, 90, 60, .45);
}
.start:active { transform: translateY(4px); box-shadow: 0 2px 0 #4a0507; }
.start:disabled { filter: grayscale(.7) brightness(.8); cursor: not-allowed; box-shadow: 0 6px 0 #4a0507; transform: none; }

/* ------------------------------------------------------------------ diner */
.diner { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.diner .wall {
  position: absolute; inset: 0 0 38% 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 190, 120, .55), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 80px),
    linear-gradient(#8e1015, #c8262a 70%, #e0a35a 100%);
}
.diner .wall::after { /* chrome counter rail */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
  background: linear-gradient(#fff, #9aa3ad 40%, #e9eef2 60%, #6b737c);
}
.diner .floor {
  position: absolute; left: -50%; right: -50%; bottom: 0; height: 38%;
  background: conic-gradient(#111 25%, #f4efe6 0 50%, #111 0 75%, #f4efe6 0) 0 0 / 90px 90px;
  transform: perspective(500px) rotateX(55deg); transform-origin: top;
}

/* ------------------------------------------------------------------ stage */
.stage {
  min-height: 100vh; display: grid; gap: 18px; padding: 18px;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(200px, 250px);
  align-items: start;
}

/* players */
.players { display: grid; gap: 10px; align-content: start; }
.card {
  position: relative; display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; column-gap: 10px;
  align-items: center; padding: 8px 10px; border-radius: 10px;
  background: linear-gradient(#fffaf0, var(--cream-2)); border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.35);
  transition: transform .3s, box-shadow .3s; cursor: default;
}
.card.good { box-shadow: 0 0 0 3px var(--ok), 0 4px 18px rgba(60, 184, 92, .7); }
.card.bad { opacity: .8; }
.card.empty { opacity: .7; background: rgba(255,255,255,.35); border-style: dashed; }
.avatar {
  grid-row: span 2; position: relative; width: 54px; height: 54px; border-radius: 8px;
  display: grid; place-items: center; font: 800 1.8rem/1 var(--font-cond); color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--k, #999) 70%, #fff), var(--k, #999));
  border: 2px solid #fff; box-shadow: inset 0 -6px 12px rgba(0,0,0,.2);
}
.card.empty .avatar { background: rgba(0,0,0,.15); }
.rank {
  position: absolute; top: -6px; right: -8px; min-width: 22px; height: 22px; border-radius: 99px; padding: 0 5px;
  background: var(--ink); color: #fff; font: 700 .8rem/22px var(--font-cond); text-align: center; font-style: normal;
}
.card-name { font: 800 1.05rem/1.1 var(--font-cond); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-score { font: 700 1.05rem/1.1 var(--font-cond); color: var(--red); }
.card-tag, .card-plus, .card-streak {
  position: absolute; right: 8px; font: 800 .9rem/1 var(--font-cond); border-radius: 99px; padding: 3px 7px;
}
.card-tag { top: 8px; background: var(--ink); color: #fff; }
.card-plus { bottom: 6px; color: #fff; background: var(--ok); animation: pop .4s; }
.card-streak { top: 8px; background: var(--gold); color: var(--ink); }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }

/* ---------------------------------------------------------------- jukebox */
.jukebox { display: grid; justify-items: center; padding-top: 4px; }
.jb-arch {
  position: relative; width: min(100%, 620px); padding: 0 70px 0;
  display: grid; grid-template-rows: auto 1fr auto;
}
/* the big orange arch around everything */
.jb-arch::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 48% 48% 16px 16px / 34% 34% 16px 16px;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(0,0,0,.25) 9% 10%, transparent 10% 90%, rgba(0,0,0,.25) 90% 91%, transparent 91%),
    linear-gradient(90deg, #ff9a1a, #ffd04a 18%, #ff8a10 30%, #c64a06 50%, #ff8a10 70%, #ffd04a 82%, #ff9a1a);
  border: 4px solid #6b2a05; box-shadow: 0 20px 40px rgba(0,0,0,.5), inset 0 0 0 6px rgba(255,255,255,.25);
}
.jb-arch > * { position: relative; z-index: 1; }
/* the glowing tubes left and right */
.jb-tube {
  position: absolute; z-index: 1; top: 30%; bottom: 14%; width: 36px; border-radius: 18px;
  background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.1) 40%, rgba(0,0,0,.2));
  border: 3px solid #f3d6a0; overflow: hidden;
}
.jb-tube.left { left: 18px; } .jb-tube.right { right: 18px; }
.jb-tube i {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fill, 1) * 100%);
  background: linear-gradient(#a855f7, #3b82f6 50%, #22d3ee);
  box-shadow: 0 0 18px #60a5fa; transition: height .25s linear;
}
.jb-tube i::after { /* bubbles */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,.7) 2px, transparent 3px) 0 0 / 18px 26px;
  animation: bubbles 2s linear infinite;
}
@keyframes bubbles { to { background-position: 0 -52px; } }
body.bonus .jb-tube i { background: linear-gradient(#ffe066, #f59f00 60%, #e8590c); box-shadow: 0 0 18px #fcc419; }

.jb-crown {
  height: 190px; margin: 14px 0 0; border-radius: 50% 50% 0 0 / 80% 80% 0 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 100%, #3c1d45, #1a0b1f 70%);
  border: 6px solid #2a1006; border-bottom: 0; display: grid; place-items: center;
}
.record {
  position: absolute; width: 300px; height: 300px; top: 30px; border-radius: 50%;
  background: repeating-radial-gradient(circle, #111 0 2px, #222 2px 4px);
  box-shadow: 0 0 0 4px #000; opacity: .9;
}
.record .label { position: absolute; inset: 38%; border-radius: 50%; background: radial-gradient(circle, #111 0 6%, var(--gold) 7% 100%); }
.record.spin { animation: spin 1.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.banner {
  position: relative; z-index: 2; text-align: center; color: #fff; padding: 0 20px; margin-top: 10px;
  font: 400 2.4rem/1.05 var(--font-script); text-shadow: 0 3px 0 var(--red-dark), 0 0 18px rgba(255, 200, 80, .7);
}
.banner .small { display: block; font: 800 1rem/1.2 var(--font-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); text-shadow: none; }
.banner .logo { font-size: 2.6rem; color: #ffd84a; text-shadow: 0 3px 0 var(--red), 0 5px 0 var(--red-dark), 0 0 22px rgba(255, 210, 80, .6); }
.cover { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 18px 26px 0; animation: pop .4s; }
.cover img, .cover .nocover { width: 120px; height: 120px; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.6); border: 3px solid #fff; object-fit: cover; }
.cover .nocover { display: grid; place-items: center; font-size: 3rem; background: var(--gold); color: var(--ink); }
.cover-text { color: #fff; max-width: 260px; }
.cover-text b { display: block; font: 800 1.5rem/1.1 var(--font-cond); }
.cover-text span { color: var(--gold); font: 600 1.05rem/1.2 var(--font-cond); }
.jb-badge {
  position: absolute; z-index: 3; bottom: -2px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 36px; border-radius: 26px 26px 0 0; background: linear-gradient(#ffe39a, var(--gold-dark));
  display: grid; place-items: center; font-size: 1.3rem; color: var(--wood); border: 3px solid #6b2a05; border-bottom: 0;
}

.jb-face {
  background: linear-gradient(90deg, #2c0f07, var(--wood) 15%, #7a3418 50%, var(--wood) 85%, #2c0f07);
  border: 6px solid #2a1006; border-top: 0; padding: 10px 26px 16px;
}
.headline {
  min-height: 2.2em; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .4em; text-align: center;
  font: 800 1.25rem/1.1 var(--font-cond); color: #ffe7b0; letter-spacing: .04em; text-transform: uppercase;
}
.headline span { color: #ffb84a; }
.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.slot {
  position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  min-height: 58px; padding: 6px 12px; border-radius: 4px;
  background: linear-gradient(#fffdf6, var(--cream) 50%, var(--cream-2));
  border: 2px solid #c9b48a; box-shadow: inset 0 -3px 0 rgba(0,0,0,.08), 0 3px 0 #1b0904;
  font: 800 1.3rem/1.1 var(--font-cond); text-align: center; transition: opacity .35s, filter .35s, transform .2s;
}
.slot > span { padding-right: 34px; }
.lamp {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 1rem/1 var(--font-cond); font-style: normal;
  color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lamp, #888) 50%, #fff), var(--lamp, #888) 60%);
  box-shadow: 0 0 10px var(--lamp, transparent);
}
.slot.gone { opacity: .12; filter: grayscale(1); transform: scaleX(.97); }
.slot.dim { opacity: .45; }
.slot.gone.dim { opacity: .12; }
.slot.right { background: linear-gradient(#e9ffe9, #b8f0c2); border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok), 0 0 26px rgba(60, 184, 92, .8); animation: pop .4s; }
.who { display: flex; gap: 3px; font-style: normal; position: absolute; right: 8px; }
.who b { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: #fff; background: var(--k); font: 800 .9rem/1 var(--font-cond); border: 2px solid #fff; }
/* lobby: the slots are the rounds you can choose */
.slots.lobby { gap: 7px; }
.slots.lobby .slot { min-height: 48px; cursor: pointer; text-align: left; opacity: .65; }
.slots.lobby .slot.on { opacity: 1; box-shadow: 0 0 0 3px var(--gold), 0 3px 0 #1b0904; }
.slots.lobby .slot .lamp { --lamp: #9b8b6b; }
.slots.lobby .slot.on .lamp { --lamp: #e8261d; }
.slots.lobby b { display: block; font-size: 1.15rem; }
.slots.lobby small { display: block; font: 500 .9rem/1.1 var(--font-body); color: #7a5a3a; }
.slots.stand .slot { text-align: left; }
.slots.stand .pts { font-style: normal; text-align: right; color: var(--red); }
.slots.stand .pts small { display: block; font: 500 .8rem/1 var(--font-body); color: #7a5a3a; }
.slot.again { cursor: pointer; --lamp: var(--red); }

.jb-base { height: 54px; margin: 0 -10px; border-radius: 0 0 14px 14px; background: linear-gradient(#ffb12b, #b65a07); border: 4px solid #6b2a05; padding: 8px 60px; }
.grille { height: 100%; border-radius: 6px; background: repeating-linear-gradient(90deg, #3a1406 0 6px, #e0a14a 6px 9px); border: 3px solid #3a1406; }

/* ------------------------------------------------------------------ side */
.side { display: grid; gap: 12px; justify-items: stretch; }
.side-top { display: flex; align-items: center; gap: 8px; }
.side-top input[type=range] { flex: 1; accent-color: var(--gold); }
.chip-btn { width: 38px; height: 38px; border-radius: 50%; border: 3px solid #6b2a05; background: linear-gradient(#ffe39a, var(--gold)); font-size: 1rem; display: grid; place-items: center; }
.lights { display: flex; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 99px; background: linear-gradient(#ffd25a, #c97a0a); border: 3px solid #6b2a05; }
.lights i { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b2f5b9, #2f9e44); box-shadow: inset 0 -2px 3px rgba(0,0,0,.3); }
.lights i.done { background: radial-gradient(circle at 35% 30%, #fff, #f6cf2a); box-shadow: 0 0 8px #f6cf2a; }
.lights i.now { animation: blink .6s steps(2) infinite; }
.lights i.off { opacity: .3; }
@keyframes blink { 50% { filter: brightness(1.8); } }
.pill {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px; border-radius: 99px;
  background: #140805; border: 4px solid var(--gold); box-shadow: 0 0 0 3px #6b2a05;
  color: #ffe8a8; font: 800 2.2rem/1 var(--font-cond); letter-spacing: .04em;
}
.pill.small { font-size: 1.15rem; padding: 10px 14px; }
.pill.hurry { color: #ff6b5a; animation: blink .5s steps(2) infinite; }
.pill-ico { font-size: 1.3rem; }
.setup { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--cream); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.field { display: grid; gap: 4px; font: 700 .95rem/1.2 var(--font-cond); text-transform: uppercase; letter-spacing: .05em; }
.field select { font: inherit; font-size: 1.1rem; padding: 6px; border-radius: 8px; border: 2px solid #c9b48a; background: #fff; }
.field.check { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 1rem; }
.field.check input { width: 20px; height: 20px; accent-color: var(--red); }
.hint { margin: 0; font-size: .9rem; color: #6a4a2a; text-align: center; }
.join { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--cream); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.qr { width: 96px; height: 96px; background: #fff; padding: 4px; border-radius: 6px; }
.qr svg { width: 100%; height: 100%; display: block; }
.join-text span { display: block; font: 700 .85rem/1 var(--font-cond); text-transform: uppercase; letter-spacing: .1em; color: #7a5a3a; }
.join-text b { display: block; font: 800 2.2rem/1.1 var(--font-cond); letter-spacing: .12em; color: var(--red); }
.join-text small { display: block; font-size: .78rem; color: #7a5a3a; word-break: break-all; }
body:not([data-phase=lobby]) .join { grid-template-columns: 64px 1fr; padding: 8px; }
body:not([data-phase=lobby]) .qr { width: 64px; height: 64px; }
body:not([data-phase=lobby]) .join-text b { font-size: 1.5rem; }
.source { margin: 0; text-align: center; font-size: .78rem; color: #ffd9b0; }

/* the "3 op een rij" medal, where the waitress held hers */
.medal { position: fixed; right: 4vw; bottom: 8vh; z-index: 20; display: grid; justify-items: center; animation: medal 2.2s ease-out both; pointer-events: none; }
.medal-disc {
  width: 220px; height: 220px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 40% 35%, #ffe7a3, #f2a33a 55%, #b3530b);
  border: 8px solid #fff3d0; box-shadow: 0 0 0 6px #b3530b, 0 20px 40px rgba(0,0,0,.5);
  color: var(--red); font: 400 1.9rem/1 var(--font-script); text-shadow: 0 2px 0 #fff3d0;
}
.medal-disc b { font: 400 5rem/1 var(--font-script); }
.medal p { margin: 10px 0 0; padding: 6px 14px; border-radius: 99px; background: var(--cream); font: 800 1.2rem/1 var(--font-cond); box-shadow: 0 4px 10px rgba(0,0,0,.4); }
@keyframes medal { 0% { transform: scale(0) rotate(-30deg); } 15% { transform: scale(1.1) rotate(4deg); } 22%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }

.tap { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(0,0,0,.55); }

/* -------------------------------------------------------- smaller screens */
@media (max-width: 1000px) {
  .stage { grid-template-columns: 1fr; }
  .players { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); order: 2; }
  .jukebox { order: 1; }
  .side { order: 3; }
  .jb-arch { padding: 0 54px; }
  .jb-tube { width: 26px; } .jb-tube.left { left: 12px; } .jb-tube.right { right: 12px; }
}
@media (max-width: 560px) {
  .stage { padding: 12px 16px; }
  .jb-arch { padding: 0 34px; }
  .jb-tube { display: none; }
  .slot { font-size: 1.05rem; min-height: 48px; }
  .banner { font-size: 1.8rem; }
}

/* ------------------------------------------------------------- the phone */
body.phone { background: linear-gradient(#8e1015, var(--red-dark)); color: #fff; min-height: 100%; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.phone .wrap { min-height: 100vh; display: grid; align-content: start; gap: 14px; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.phone .logo { font: 400 2.3rem/1.1 var(--font-script); color: #ffd84a; text-align: center; text-shadow: 0 3px 0 var(--red-dark); margin-top: 6vh; }
.phone form { display: grid; gap: 12px; max-width: 360px; width: 100%; margin: 0 auto; }
.phone label { display: grid; gap: 4px; font: 700 .9rem/1 var(--font-cond); text-transform: uppercase; letter-spacing: .1em; color: #ffd9b0; }
.phone input { font: 700 1.3rem/1.2 var(--font-body); padding: 12px; border-radius: 10px; border: 3px solid var(--gold); background: var(--cream); color: var(--ink); user-select: text; -webkit-user-select: text; }
.phone #codeIn { letter-spacing: .3em; text-transform: uppercase; font-family: var(--font-cond); font-size: 1.8rem; }
.phone .err { color: #ffd84a; min-height: 1.3em; margin: 0; text-align: center; }
.me { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--cream); color: var(--ink); }
.me .avatar { width: 48px; height: 48px; font-size: 1.5rem; grid-row: auto; }
.me b { display: block; font: 800 1.2rem/1 var(--font-cond); }
.me small { font: 600 .9rem/1.2 var(--font-cond); color: #7a5a3a; }
.me .sc { font: 800 1.4rem/1 var(--font-cond); color: var(--red); text-align: right; }
.me .sc small { display: block; }
.ask { text-align: center; font: 800 1.3rem/1.1 var(--font-cond); text-transform: uppercase; letter-spacing: .05em; color: #ffe7b0; min-height: 1.2em; }
.ask small { display: block; color: var(--gold); font-size: .95rem; letter-spacing: .15em; }
.opts { display: grid; gap: 9px; }
.opt {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; text-align: left;
  min-height: 60px; padding: 8px 12px; border-radius: 10px; border: 3px solid #c9b48a;
  background: linear-gradient(#fffdf6, var(--cream-2)); color: var(--ink); font: 800 1.2rem/1.1 var(--font-cond);
  box-shadow: 0 4px 0 #3a0a0a; transition: opacity .3s, transform .05s;
}
.opt:active { transform: translateY(3px); box-shadow: 0 1px 0 #3a0a0a; }
.opt:disabled { cursor: default; }
.opt.gone { opacity: .15; }
.opt.locked { opacity: .45; }
.opt.mine { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold), 0 4px 0 #3a0a0a; }
.opt.right { opacity: 1; background: linear-gradient(#e9ffe9, #b8f0c2); border-color: var(--ok); }
.opt.mine.wrong { background: linear-gradient(#ffe9e6, #f5b4ab); border-color: var(--no); box-shadow: 0 0 0 3px var(--no); }
.big { text-align: center; padding: 20px 10px; border-radius: 16px; background: rgba(0,0,0,.25); }
.big .icon { font-size: 4rem; line-height: 1; }
.big b { display: block; font: 800 2rem/1.1 var(--font-cond); margin-top: 6px; }
.big p { margin: 6px 0 0; color: #ffd9b0; }
.big.good { background: rgba(60, 184, 92, .35); }
.big.bad { background: rgba(0, 0, 0, .35); }
.status { text-align: center; font-size: .85rem; color: #ffd9b0; min-height: 1.2em; }
.status.bad { color: #ffd84a; }
.leave { justify-self: center; background: none; border: 2px solid rgba(255,255,255,.4); border-radius: 99px; padding: 6px 14px; color: #ffd9b0; font-size: .9rem; }