/* Project-specific styles. Everything generic comes from Bootstrap (static/vendor). */
:root{--mq-a:#cf4a5f;--mq-b:#3a70d4;--mq-c:#d9a21b;--mq-d:#2d9a63}
.hidden{display:none!important}
.muted{color:var(--bs-secondary-color)}
.gain{color:var(--bs-success)}.loss{color:var(--bs-danger)}
.score{font-variant-numeric:tabular-nums;font-weight:600}

/* video with click shield (players cannot touch the YouTube iframe) */
.vwrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--bs-border-radius-lg);overflow:hidden}
.vwrap iframe,.vwrap #yt{position:absolute;inset:0;width:100%;height:100%}
.vshield{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;cursor:default;color:#fff;font-weight:600}
.vshield.tap{background:rgba(0,0,0,.7);cursor:pointer}
.vcount{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;font-size:20vmin;font-weight:700;color:#fff;text-shadow:0 0 24px #000;pointer-events:none}

/* answer tiles */
.answers{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.ans{border:0;width:100%;text-align:left;position:relative;display:flex;gap:.75rem;align-items:center;min-height:4.25rem;padding:.8rem 1rem;
  border-radius:var(--bs-border-radius-lg);color:#fff;font-weight:600;font-size:1.05rem}
.ans .l{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.1em;height:2.1em;border-radius:50%;background:rgba(0,0,0,.25);font-weight:700}
.ans .cnt{margin-left:auto;font-weight:700}
.ans.i0{background:var(--mq-a)}.ans.i1{background:var(--mq-b)}.ans.i2{background:var(--mq-c);color:#201700}.ans.i3{background:var(--mq-d)}
.ans.i2 .l{background:rgba(0,0,0,.15)}
.ans.sel{box-shadow:0 0 0 .25rem var(--bs-body-color)}
.ans.is-correct{box-shadow:0 0 0 .3rem #20c06b}
.ans.is-wrong{box-shadow:0 0 0 .3rem #e5484d}
.ans.dim{opacity:.3}
button.ans:disabled{opacity:.5}
button.ans.sel:disabled,button.ans.is-correct:disabled,button.ans.is-wrong:disabled{opacity:1}

/* local volume control on every video */
.vbar{position:absolute;left:.5rem;right:.5rem;bottom:.5rem;z-index:8;display:flex;align-items:center;gap:.6rem;padding:.25rem .5rem;
  background:rgba(0,0,0,.6);border-radius:var(--bs-border-radius);opacity:.35;transition:opacity .2s}
.vwrap:hover .vbar,.vbar:focus-within,.vbar:hover{opacity:1}
.vbar .vmute{padding:.1rem .45rem;font-size:1.1rem;line-height:1.2}
.vbar .vvol{flex:1;margin:0}

.cbar .cfill{height:100%;background:#9146ff;transition:width .8s}
.ans.has-who{flex-wrap:wrap}
.ans .who{flex-basis:100%;display:flex;flex-wrap:wrap;gap:.25rem}
.ans .who .badge{font-weight:500}
.sc{transform-origin:right center;transition:transform .2s}.sc.bump{transform:scale(1.15)}.dl{will-change:transform,opacity}

.jk{border:0;border-radius:var(--bs-border-radius-lg);min-height:3.2rem;font-weight:600}
.jk.fifty{background:#d9a21b;color:#201700}
.jk.phone{background:#1f9fba;color:#00212a}
.jk:disabled{opacity:.5}
.jk.used,.jk.used:disabled{background:var(--bs-tertiary-bg);color:var(--bs-secondary-color);opacity:1}
#jokers{gap:.6rem!important}
.jk{flex:1 1 0!important;min-width:0}