/* QuizLive "TV game-show stage" theme: gold, red and navy from the QuizLive logo.
   Loaded after style.css; it only restyles, so every layout rule there still applies. */
:root {
  --bg: #060a22; --bg2: #0d1640; --panel: rgba(16, 24, 68, .88); --panel2: #1a2766; --line: rgba(255, 210, 90, .16); --line2: rgba(120, 150, 255, .22);
  --text: #f4f6ff; --muted: #9ea9dd;
  --accent: #ffc928; --accent-ink: #2b1a00; --gold1: #fff1a8; --gold2: #ffc928; --gold3: #c47f00;
  --red: #e5102b; --red2: #ff4757; --good: #22c55e; --bad: #ef3b4f; --blue: #2f7cf6;
  --display: "Gotham Black", "Montserrat", "Avenir Next", "Arial Black", "Segoe UI Black", system-ui, sans-serif;
  --font: "Segoe UI", "Avenir Next", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --stage-bg: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(80, 110, 255, .38), transparent 60%),
              radial-gradient(ellipse 60% 50% at 10% 110%, rgba(229, 16, 43, .22), transparent 60%),
              radial-gradient(ellipse 60% 50% at 90% 110%, rgba(255, 201, 40, .16), transparent 60%),
              linear-gradient(180deg, #0b1440 0%, #060a22 70%);
}
html, body { background: var(--bg); }
body.host, body.editor, body.phone { background: var(--stage-bg) fixed; }

/* ---------- glossy game-show buttons ---------- */
button {
  border-radius: 12px; border: 1px solid var(--line2); color: var(--text); font-weight: 700;
  background: linear-gradient(180deg, #2a3a8e 0%, #1a2766 55%, #131d52 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 0 #0a1035, 0 6px 14px rgba(0, 0, 0, .35);
  transition: transform .06s, box-shadow .06s, filter .15s;
}
button:hover { filter: brightness(1.12); }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 0 #0a1035, 0 3px 8px rgba(0, 0, 0, .35); }
button.primary {
  color: var(--accent-ink); border-color: #ffe27a; text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  background: linear-gradient(180deg, var(--gold1) 0%, var(--gold2) 45%, #f0a800 75%, var(--gold3) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(150, 80, 0, .35), 0 4px 0 #8a5600, 0 8px 18px rgba(255, 180, 0, .25);
}
button.good { color: #fff; border-color: #6df29b; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); background: linear-gradient(180deg, #7cf0a4, #22c55e 50%, #15893f); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 #0c5a28, 0 8px 18px rgba(34, 197, 94, .25); }
button.bad { color: #fff; border-color: #ff8a96; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); background: linear-gradient(180deg, #ff8591, #ef3b4f 50%, #a8172a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 #6b0b17, 0 8px 18px rgba(239, 59, 79, .25); }
button.ghost { background: transparent; box-shadow: none; }
input, select, textarea { background: rgba(5, 8, 28, .85) !important; border: 1px solid var(--line2) !important; color: var(--text); border-radius: 10px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold2) !important; box-shadow: 0 0 0 3px rgba(255, 201, 40, .25); }
.muted { color: var(--muted); }

/* ---------- top bars (host + editor) ---------- */
.topbar { background: linear-gradient(180deg, rgba(20, 30, 84, .96), rgba(10, 16, 52, .96)); border-bottom: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); padding: 8px 14px; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand img { height: 40px; display: block; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.brand .sub { font-family: var(--font); font-weight: 700; font-size: 13px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.roomcode { font-family: var(--display); font-size: 22px; letter-spacing: .18em; color: #ffe27a; background: #05081c; border: 1px solid rgba(255, 201, 40, .45); border-radius: 10px; padding: 3px 10px 3px 13px; text-shadow: 0 0 10px rgba(255, 201, 40, .7); box-shadow: inset 0 0 12px rgba(255, 201, 40, .15); }
#conn { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- host ---------- */
.slides, .side, .ed-slides, .ed-panel { background: rgba(4, 7, 26, .72); border-color: var(--line) !important; }
.thumb, .ed-thumb { border-radius: 10px; border: 2px solid rgba(255, 255, 255, .06); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); transition: transform .12s, border-color .12s; }
.thumb:hover, .ed-thumb:hover { transform: translateY(-1px); border-color: rgba(255, 201, 40, .4); }
.thumb.cur, .ed-thumb.cur { border-color: var(--gold2); box-shadow: 0 0 0 2px rgba(255, 201, 40, .35), 0 0 18px rgba(255, 201, 40, .35); }
.thumb .no, .ed-thumb .no { background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: var(--accent-ink); border-radius: 7px; }
#preview { border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 0 0 4px rgba(255, 201, 40, .08), 0 16px 40px rgba(0, 0, 0, .55); }
.qinfo, .judge { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .35); }
.qinfo .q { font-family: var(--display); font-size: 20px; letter-spacing: .01em; }
.qinfo .ans b { color: #5af08e; }
.phase { color: #ffe27a; opacity: .85; }
#stepBtn { font-family: var(--display); font-size: 21px; letter-spacing: .03em; padding: 15px 26px; min-width: 260px; border-radius: 14px; }
.judge { border: 2px solid var(--gold2); box-shadow: 0 0 24px rgba(255, 201, 40, .25); }
.side h3 { color: #ffe27a; }
.team { background: linear-gradient(180deg, rgba(30, 44, 112, .85), rgba(16, 24, 68, .85)); border: 1px solid var(--line2); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.team .rk { width: 24px; height: 24px; line-height: 24px; border-radius: 50%; font-size: 12px; background: rgba(255, 255, 255, .08); color: var(--muted); }
.team:nth-child(1) .rk { background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: var(--accent-ink); }
.team:nth-child(2) .rk { background: linear-gradient(180deg, #f2f4f8, #aeb6c6); color: #222; }
.team:nth-child(3) .rk { background: linear-gradient(180deg, #f3c08a, #b8732f); color: #2b1300; }
.team .sc { color: #ffe27a; }
.modal { background: rgba(2, 4, 16, .7); backdrop-filter: blur(4px); }
.modal .box { background: linear-gradient(180deg, #16215c, #0c1442); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.modal h2 { font-family: var(--display); color: #ffe27a; }
.game { border-radius: 14px; border: 1px solid var(--line2); background: rgba(10, 16, 52, .9); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); transition: transform .12s, border-color .12s; }
.game:hover { transform: translateY(-2px); border-color: var(--gold2); }
.importbox { border-color: var(--line); background: rgba(4, 7, 26, .5); }
.kbd { border-color: var(--line2); color: #ffe27a; }

/* ---------- editor ---------- */
.ed-tools { background: rgba(10, 16, 52, .9); border-bottom: 1px solid var(--line); }
.ed-canvas { background: radial-gradient(ellipse at center, #121a4a 0%, #04061a 75%); }
.ed-canvas .stage { box-shadow: 0 0 0 1px rgba(255, 201, 40, .25), 0 18px 60px rgba(0, 0, 0, .7); }
.ed-tabs { background: rgba(4, 7, 26, .95); border-bottom-color: var(--line); }
.ed-tabs button { box-shadow: none; background: transparent; border: 0; }
.ed-tabs button.on { color: #ffe27a; box-shadow: inset 0 -3px 0 var(--gold2); }
.pgroup { border-bottom-color: var(--line); }
.pgroup h4 { color: #ffe27a; opacity: .9; }
.prow button.on { background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: var(--accent-ink); }
.menu { background: linear-gradient(180deg, #16215c, #0c1442); border-color: var(--line); }
.menu button { box-shadow: none; background: transparent; border: 0; }
.menu button:hover { background: rgba(255, 201, 40, .12); }
.sel { border-color: var(--gold2); }

/* ---------- big screen ---------- */
.full { background: var(--stage-bg); overflow: hidden; }
.full::before { content: ''; position: absolute; inset: -50%; pointer-events: none; opacity: .5;
  background: conic-gradient(from 0deg at 50% 0%, transparent 0deg, rgba(120, 150, 255, .14) 8deg, transparent 16deg, transparent 40deg, rgba(255, 201, 40, .1) 48deg, transparent 56deg, transparent 300deg, rgba(229, 16, 43, .1) 308deg, transparent 316deg, transparent 330deg, rgba(120, 150, 255, .14) 338deg, transparent 346deg);
  animation: sweep 14s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.full > * { position: relative; }
.full h1 { font-family: var(--display); text-shadow: 0 .06em 0 #0a1035, 0 0 .5em rgba(80, 110, 255, .5); }
.screen-logo { height: 20vh; filter: drop-shadow(0 1.4vh 2.4vh rgba(0, 0, 0, .6)); margin-bottom: 2vh; animation: logoIn .8s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes logoIn { from { transform: scale(.6) translateY(-4vh); opacity: 0; } }
#lobby .qr { background: #fff; border-radius: 2.4vh; padding: 1.8vh; box-shadow: 0 0 0 .7vh #ffc928, 0 0 0 1.2vh #0a1035, 0 0 5vh rgba(255, 201, 40, .45); }
#lobby .how { color: #dfe4ff; }
#lobby .code { background: linear-gradient(180deg, var(--gold1), var(--gold2) 50%, var(--gold3)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .5vh 0 #3a2400) drop-shadow(0 0 2vh rgba(255, 201, 40, .45)); }
#lobby .url { color: #fff; }
.tchip { background: linear-gradient(180deg, rgba(40, 56, 140, .9), rgba(18, 28, 80, .9)); border: 1px solid var(--line2); box-shadow: 0 .4vh 0 #0a1035; }
.chip { background: linear-gradient(180deg, rgba(26, 38, 102, .92), rgba(10, 16, 52, .92)); border: 2px solid rgba(255, 201, 40, .5); box-shadow: 0 .5vh 1.5vh rgba(0, 0, 0, .5); }
#counter, #kochip { font-size: 2.8vh; padding: .5vh 1.4vh; }
/* #timer: the gold clock (clock.js) brings its own look */
#banner .b { border: .35vh solid rgba(255, 255, 255, .7); box-shadow: inset 0 .5vh 0 rgba(255, 255, 255, .45), inset 0 -.8vh 0 rgba(0, 0, 0, .2), 0 1vh 0 rgba(0, 0, 0, .35), 0 2vh 5vh rgba(0, 0, 0, .6); text-shadow: 0 .2vh 0 rgba(255, 255, 255, .35); }
#results .r { background: linear-gradient(180deg, rgba(26, 38, 102, .95), rgba(10, 16, 52, .95)); box-shadow: 0 .4vh 0 rgba(0, 0, 0, .4); }
#board h1 { margin-bottom: 4vh; }
#board li { background: linear-gradient(90deg, rgba(36, 52, 132, .9), rgba(14, 22, 66, .9)); border: 1px solid var(--line2); box-shadow: 0 .5vh 0 #0a1035; }
#board li .rk { width: 6vh; height: 6vh; border-radius: 50%; display: grid; place-items: center; font-size: 3vh; color: #fff; background: rgba(255, 255, 255, .1); }
#board li:nth-child(1) { background: linear-gradient(90deg, rgba(255, 201, 40, .45), rgba(255, 201, 40, .1)); border-color: var(--gold2); transform-origin: left; font-size: 4.2vh; }
#board li:nth-child(1) .rk { background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: var(--accent-ink); }
#board li:nth-child(2) .rk { background: linear-gradient(180deg, #f2f4f8, #aeb6c6); color: #222; }
#board li:nth-child(3) .rk { background: linear-gradient(180deg, #f3c08a, #b8732f); color: #2b1300; }
#board li .sc { color: #ffe27a; text-shadow: 0 .3vh 0 #3a2400; }
#start { background: var(--stage-bg); }
#start h1 { font-family: var(--display); }
#start .screen-logo { height: 26vh; }

/* ---------- phone ---------- */
body.phone { color: var(--text); }
.ph-top { background: linear-gradient(180deg, rgba(22, 32, 90, .97), rgba(10, 16, 52, .97)); border-bottom: 3px solid var(--tc, var(--gold2)); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); padding: 10px 14px; }
.ph-top .dot { width: 14px; height: 14px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.ph-top .nm { font-family: var(--display); font-size: 18px; letter-spacing: .01em; }
.ph-top .rk { font-weight: 700; }
.ph-top .sc { min-width: 54px; text-align: center; color: var(--accent-ink); background: linear-gradient(180deg, var(--gold1), var(--gold2) 55%, var(--gold3)); border-radius: 999px; padding: 3px 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 #8a5600; }
.ph-q { font-family: var(--display); font-size: 21px; line-height: 1.25; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.ph-center h2 { font-family: var(--display); font-size: 26px; text-shadow: 0 2px 0 #0a1035; }
.ph-logo { width: min(86vw, 380px); display: block; margin: 0 auto 6px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); animation: logoIn .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.join { padding-top: 7vh; gap: 14px; }
.join h1 { display: none; }
.join .muted { text-align: center; }
.ph-input { font-size: 22px; padding: 16px 18px; border-radius: 16px !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5) !important; }
.ph-send { font-family: var(--display); font-size: 22px; padding: 17px; border-radius: 16px; letter-spacing: .03em; }
.timerbar { height: 10px; background: rgba(5, 8, 28, .9); border: 1px solid var(--line2); }
.timerbar i { background: linear-gradient(90deg, var(--gold3), var(--gold2), var(--gold1)); box-shadow: 0 0 10px rgba(255, 201, 40, .6); }
.icon { width: 92px; height: 92px; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }

/* glossy answer buttons, coloured like the answer boxes on the big screen */
.opts { gap: 12px; }
.opt { --c1: #5aa2ff; --c2: #2f7cf6; --c3: #174ea8; --edge: #0d3274;
  position: relative; min-height: 70px; padding: 14px 16px; font-size: 20px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
  border: 2px solid rgba(255, 255, 255, .55); border-radius: 18px;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 48%, var(--c3) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .18), 0 6px 0 var(--edge), 0 10px 18px rgba(0, 0, 0, .45);
  transition: transform .07s, box-shadow .07s, opacity .2s, filter .2s; }
.opt::before { content: ''; position: absolute; left: 10px; right: 10px; top: 4px; height: 40%; border-radius: 14px 14px 40px 40px; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); pointer-events: none; }
.opt .l { width: 44px; height: 44px; border-radius: 50%; font-size: 20px; color: #fff; background: rgba(0, 0, 0, .28); border: 3px solid rgba(255, 255, 255, .8); text-shadow: none; }
.opt:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 2px 0 var(--edge), 0 4px 10px rgba(0, 0, 0, .45); }
.opt[data-v="B"] { --c1: #ffc07a; --c2: #f2994a; --c3: #c2621a; --edge: #7a3a08; }
.opt[data-v="C"] { --c1: #6fe39a; --c2: #27ae60; --c3: #157a3e; --edge: #0b4a25; }
.opt[data-v="D"] { --c1: #ffe98a; --c2: #f2c94c; --c3: #c2951a; --edge: #7a5a06; color: #2b1d00; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.opt[data-v="D"] .l { color: #2b1d00; border-color: rgba(43, 29, 0, .6); background: rgba(255, 255, 255, .35); }
.opt[data-v="E"] { --c1: #c69bff; --c2: #9b51e0; --c3: #6a2aa8; --edge: #3d1268; }
.opt[data-v="F"] { --c1: #ff9a9a; --c2: #eb5757; --c3: #b22a2a; --edge: #6b1010; }
.opts:has(.opt.sel) .opt:not(.sel) { opacity: .45; filter: saturate(.6); }
.opt.sel { border-color: #fff; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 0 0 4px var(--gold2), 0 6px 0 var(--edge), 0 0 24px rgba(255, 201, 40, .7); }
.opt.sel::after { content: '\2713'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #15893f; font-size: 20px; font-weight: 900; text-shadow: none; }

/* the buzzer: red dome on a blue ring, drawn in SVG */
.ph-card { background: rgba(244, 246, 255, .96); color: #141a3a; border-radius: 18px; padding: 18px 16px; text-align: center; font-family: var(--display); font-size: 26px; line-height: 1.2; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.ph-card.win { background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: var(--accent-ink); animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.ph-card.lost { background: linear-gradient(180deg, #ff8591, #ef3b4f); color: #fff; }
.ph-card small { display: block; font-family: var(--font); font-size: 15px; font-weight: 700; opacity: .7; margin-top: 4px; }
.buzzer { all: unset; display: block; width: min(96vw, 58vh); aspect-ratio: 400 / 320; margin: 0 auto; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; position: relative; }
.buzzer, .buzzer:disabled, .buzzer:active, .buzzer.down, .buzzer.won { background: none !important; box-shadow: none !important; border-radius: 0; transform: none; opacity: 1; }
.buzzer svg { width: 100%; height: 100%; display: block; overflow: visible; }
.buzzer .dome { transition: transform .06s ease-out; }
.buzzer.down .dome, .buzzer:active:not(:disabled) .dome { transform: translateY(26px); }
.buzzer.armed { animation: armed 1.1s ease-in-out infinite; }
@keyframes armed { 50% { filter: drop-shadow(0 0 22px rgba(255, 60, 60, .75)); } }
.buzzer:disabled { cursor: default; }
.buzzer:disabled .dome { filter: grayscale(.85) brightness(.75); }
.buzzer.won { animation: wonGlow .5s ease-in-out infinite alternate; }
.buzzer.won .dome { filter: none; transform: translateY(26px); }
@keyframes wonGlow { from { filter: drop-shadow(0 0 10px rgba(255, 201, 40, .6)); } to { filter: drop-shadow(0 0 34px rgba(255, 201, 40, 1)); } }

/* result cards */
.result { position: relative; overflow: hidden; border-radius: 22px; padding: 30px 20px; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.result .big { font-family: var(--display); font-size: 44px; text-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.result h2 { font-family: var(--display); font-size: 30px; margin: 8px 0 0; }
.result.ok { background: linear-gradient(180deg, #4ee283, #16a34a 60%, #0f7a36); border: 3px solid #a8ffc6; color: #fff; }
.result.no { background: linear-gradient(180deg, #ff6b7a, #d92c42 60%, #9e1528); border: 3px solid #ffb3bb; color: #fff; }
.result .muted, .result p { color: rgba(255, 255, 255, .88); }
.result.ok::before, .result.ok::after { content: ''; position: absolute; inset: -20px; pointer-events: none; background-image: radial-gradient(circle, #ffe27a 0 4px, transparent 5px), radial-gradient(circle, #fff 0 3px, transparent 4px), radial-gradient(circle, #ff4757 0 3px, transparent 4px), radial-gradient(circle, #5aa2ff 0 3px, transparent 4px); background-size: 90px 70px, 70px 90px, 110px 80px, 80px 110px; background-position: 0 0, 30px 20px, 60px 40px, 20px 60px; animation: confetti 2.4s linear infinite; opacity: .9; }
.result.ok::after { animation-delay: -1.2s; background-position: 45px 10px, 10px 50px, 80px 30px, 50px 80px; }
@keyframes confetti { from { transform: translateY(-80px); } to { transform: translateY(80px); } }
.result > * { position: relative; z-index: 1; }
.ph-out { background: linear-gradient(180deg, rgba(239, 59, 79, .35), rgba(239, 59, 79, .15)); border-color: var(--bad); }
.ph-tip { background: linear-gradient(180deg, #16215c, #0c1442); border-color: var(--gold2); }
/* join screen fits a 16:9 projector even with a full room */
#lobby .screen-logo { height: 13vh; margin-bottom: 1vh; }
#lobby h1 { font-size: 5.5vh; margin-bottom: 2vh; }
#lobby .qr { width: 38vh; height: 38vh; }
#lobby .teams { margin-top: 2.5vh; max-height: 22vh; overflow: hidden; }

/* phone answer buttons coloured like the game's own answer boxes (editor > Game > Phone answer buttons) */
.opt.own { color: var(--ft); border-color: var(--fb); background: linear-gradient(180deg, var(--f1), var(--f2)); text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 6px 0 color-mix(in srgb, var(--f2) 45%, #000), 0 10px 18px rgba(0, 0, 0, .45); }
.opt.own .l { color: var(--fl); border-color: var(--fl); background: rgba(0, 0, 0, .3); }
.opt.own.sel { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 0 0 4px var(--gold2), 0 6px 0 color-mix(in srgb, var(--f2) 45%, #000), 0 0 24px rgba(255, 201, 40, .7); }
.opt.pill { border-radius: 999px; padding-left: 12px; }
/* Millionaire: pointed lozenge with a thin edge; the chosen answer turns orange like on the show */
.opt.loz { --lz: 26px; border: 0; border-radius: 0; background: var(--fb, #c9d4ff); padding: 12px 40px; min-height: 64px;
  clip-path: polygon(0 50%, var(--lz) 0, calc(100% - var(--lz)) 0, 100% 50%, calc(100% - var(--lz)) 100%, var(--lz) 100%); box-shadow: none !important; }
.opt.loz::before { content: ''; display: block; position: absolute; inset: 3px; height: auto; border-radius: 0; z-index: 0;
  clip-path: polygon(0 50%, calc(var(--lz) - 2px) 0, calc(100% - var(--lz) + 2px) 0, 100% 50%, calc(100% - var(--lz) + 2px) 100%, calc(var(--lz) - 2px) 100%);
  background: linear-gradient(180deg, var(--f1, #1b3a8f), var(--f2, #050f3d)); }
.opt.loz > * { position: relative; z-index: 1; }
.opt.loz .l { width: auto; height: auto; border: 0; background: none; font-size: 22px; padding-right: 2px; }
.opt.loz.sel { background: #fff; }
.opt.loz.sel::before { background: linear-gradient(180deg, #ffbe3d, #f28c00 55%, #c46400); }
.opt.loz.sel, .opt.loz.sel .l { color: #1a0d00; text-shadow: none; }
.opt.loz.sel::after { right: 30px; z-index: 2; }
.opt.loz:active:not(:disabled) { transform: scale(.98); }