/* Bilgir Live: shared look of the teacher's big screen and the students' phones */
.lv{--qa:#E5484D;--qb:#2E7CE6;--qc:#E0A800;--qd:#18A36F;--lvbg:#2A1B78;
  min-height:100vh;min-height:100dvh;color:#fff;font-family:var(--ui);position:relative;isolation:isolate;overflow-x:hidden;
  background:radial-gradient(900px 600px at 0% 0%,#5B3FE0,transparent 60%),radial-gradient(800px 600px at 100% 100%,#C2410C,transparent 60%),radial-gradient(700px 500px at 100% 0%,#0E7490,transparent 55%),var(--lvbg)}
.lv::before{content:"";position:fixed;inset:0;z-index:-1;opacity:.12;background-image:radial-gradient(#fff 1px,transparent 1.4px);background-size:26px 26px}
.lv .shape-bg{position:fixed;z-index:-1;opacity:.12;font-size:220px;line-height:1;pointer-events:none;user-select:none}
@media (prefers-reduced-motion:no-preference){
  .lv .shape-bg{animation:spin 40s linear infinite}
  @keyframes spin{to{rotate:360deg}}
}
.lv h1,.lv h2,.lv h3{color:#fff}
.lv .btn{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.lv .btn:hover{background:rgba(255,255,255,.2)}
.lv .btn.light{background:#fff;color:#2A1B78;border-color:#fff}
.lv .btn.go{background:#E9631F;border-color:#E9631F;color:#fff;box-shadow:0 5px 0 #9A3412}
.lv input{background:#fff;color:#1D2142;border:0}
.lv .glass{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);border-radius:24px}

/* answer tiles: colour + shape, same on both screens */
.tile4{--c:var(--qa);display:flex;align-items:center;gap:14px;border:0;border-radius:18px;color:#fff;background:var(--c);
  box-shadow:0 6px 0 color-mix(in srgb,var(--c) 55%,#000);font:700 1.15rem/1.25 var(--ui);text-align:left;padding:16px 20px;min-height:84px;position:relative;transition:transform .12s,opacity .3s,filter .3s}
.tile4 .sh{font-size:1.8rem;line-height:1;flex:none;width:1.4em;text-align:center}
.tile4.c1{--c:var(--qb)}.tile4.c2{--c:var(--qc)}.tile4.c3{--c:var(--qd)}
.tile4.tf0{--c:var(--qd)}.tile4.tf1{--c:var(--qa)}
.tile4.dim{opacity:.28;filter:grayscale(.7)}
.tile4.win{outline:5px solid #fff;outline-offset:-5px}
.tile4 .cnt{margin-left:auto;font:800 1.6rem/1 var(--display)}

.timer{--p:1;width:110px;height:110px;border-radius:50%;display:grid;place-items:center;font:800 2.6rem/1 var(--display);
  background:conic-gradient(#fff calc(var(--p)*360deg),rgba(255,255,255,.15) 0);position:relative}
.timer::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#3B2A9A}
.timer span{position:relative}
.timer.low span{color:#FFB4A9}

.ready{position:fixed;inset:0;z-index:40;display:grid;place-items:center;text-align:center;background:rgba(30,18,90,.9)}
.ready .big{font:800 clamp(5rem,10vw,9rem)/1 var(--display)}
@media (prefers-reduced-motion:no-preference){
  .ready .big{animation:beat 1s ease-in-out infinite}
  @keyframes beat{50%{transform:scale(1.12)}}
  .pop-in{animation:popIn .45s cubic-bezier(.3,1.6,.5,1) both}
  @keyframes popIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
  .rise-in{animation:riseIn .6s cubic-bezier(.2,.8,.2,1) both}
  @keyframes riseIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
}

/* a question's picture (a flag, a building…): on a white card so flags with white in them keep their edge */
.qpic{display:grid;justify-items:center;gap:4px;margin:14px auto 0}
.qpic img{display:block;max-width:min(100%,720px);max-height:34vh;object-fit:contain;background:#fff;padding:8px;border-radius:16px;box-shadow:0 20px 50px -24px rgba(0,0,0,.6)}
.qpic small{font-size:.72rem;opacity:.6}
.pq .qpic{margin-top:10px}
.pq .qpic img{max-height:24vh;padding:6px;border-radius:12px}