/* VK Labz live quiz — ledger-paper look shared by host screen and student phones */
:root{
  --paper:#ECF2EE; --sheet:#FFFFFF; --rule:#C9DCD1; --ink:#16243F; --ink-soft:#526079;
  --ledger:#1F7A55; --ledger-tint:#DDF0E6; --amber:#C77A00; --amber-tint:#FBEBD0;
  --red:#D3202A; --red-tint:#FCE3E3; --opt:#F6F9F7; --gold:#C9971A; --silver:#8A95A8; --bronze:#B06A3B;
  --oA:#2D5BD3; --oB:#1F7A55; --oC:#C77A00; --oD:#7A3FC2;
  --shadow:0 1px 2px rgba(22,36,63,.06),0 10px 30px rgba(22,36,63,.08);
  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;min-height:100%}
body{
  background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;
  background-image:repeating-linear-gradient(to bottom,transparent 0 31px,var(--rule) 31px 32px);
  background-attachment:fixed;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:max(14px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-bottom,0px));
}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:3px solid var(--ledger);outline-offset:2px;border-radius:10px}
.eyebrow{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ledger)}
.sheet{background:var(--sheet);border:1px solid var(--rule);border-radius:18px;box-shadow:var(--shadow);padding:clamp(18px,3vw,30px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:14px 22px;font-weight:700;font-size:1.05rem;cursor:pointer;background:var(--ink);color:#fff;transition:transform .08s,opacity .2s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.go{background:var(--red);box-shadow:0 5px 0 #8E0F16}
.btn.go:active{transform:translateY(3px);box-shadow:0 2px 0 #8E0F16}
.btn.green{background:var(--ledger)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--rule)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:.9rem}
.input{width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--rule);background:#fff;font-size:1.1rem}
.input:focus{border-color:var(--ledger);outline:none;box-shadow:0 0 0 3px var(--ledger-tint)}
.error{color:var(--red);font-weight:600;font-size:.92rem;min-height:1.4em;margin:0}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* answer option colours */
.optc{--oc:var(--oA)}
.optc.o1{--oc:var(--oB)} .optc.o2{--oc:var(--oC)} .optc.o3{--oc:var(--oD)}
.key{flex:none;display:grid;place-items:center;border-radius:10px;font-family:var(--f-mono);font-weight:800;background:var(--oc);color:#fff}

/* buzzer */
.buzz{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(211,32,42,.3);backdrop-filter:blur(2px);pointer-events:none;animation:flash 1s ease-out forwards}
.buzzer{display:flex;flex-direction:column;align-items:center;gap:10px}
.dome{width:clamp(120px,34vw,170px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FF8A8F 0 12%,#E3262F 38%,#9D0E16 100%);box-shadow:0 14px 0 #6E0A10,0 20px 40px rgba(0,0,0,.35),inset 0 -8px 18px rgba(0,0,0,.25);display:grid;place-items:center;animation:press 1s ease-out}
.dome svg{width:44%;height:44%}
.buzz .word{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,6vw,2.2rem);color:#fff;background:#B5141D;padding:4px 18px;border-radius:10px;letter-spacing:.04em;text-transform:uppercase}
@keyframes flash{0%{opacity:0}10%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes press{0%{transform:scale(.6)}25%{transform:scale(1.08) translateY(6px)}45%{transform:scale(1)}}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pop{animation:pop .35s ease-out}
@keyframes pop{0%{transform:scale(.85);opacity:.4}100%{transform:scale(1);opacity:1}}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}
.confetti i{position:absolute;top:-16px;width:9px;height:15px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(600deg);opacity:.2}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  .confetti{display:none}
}