/* Mr. Bouyer Science live class games, student phone screen (/play). The Lab look.
   Loaded after /lab/lab.css. Same markup and ids, new skin. Accent follows the game once students join. */

:root{
  --bg:var(--lab-bg1);--ink:var(--lab-ink);--muted:var(--lab-sub);--dim:var(--lab-mute);--gold:var(--lab-gold);--cyan:var(--acc);
  --green:#34d399;--red:#fb7185;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.2);--tc:var(--lab-gold);
  --sans:Poppins,"Segoe UI",system-ui,sans-serif;--mono:Poppins,"Segoe UI",system-ui,sans-serif;--serif:Lora,Georgia,serif;
  --glass:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));--edge:rgba(255,255,255,.16);
}
html,body{margin:0;min-height:100%}
body.lab{font-family:var(--sans);-webkit-font-smoothing:antialiased}
:where(body.lab button,body.lab input){font:inherit;color:inherit}
:where(body.lab button){cursor:pointer}
body.lab p{margin:0}

/* top strip */
body.lab .bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;border-bottom:3px solid var(--tc);background:rgba(7,12,34,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}
body.lab .bar .b{font:700 1.02rem/1.2 var(--serif)}
body.lab .bar .b span{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:99px;font:700 .6rem/1.4 var(--sans);letter-spacing:.16em;vertical-align:2px;color:var(--acc);background:color-mix(in srgb,var(--acc) 16%,transparent);border:1px solid color-mix(in srgb,var(--acc) 55%,transparent)}
body.lab .bar .me{font:600 .85rem/1.2 var(--sans);color:var(--lab-sub);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.lab .bar .me b{color:var(--lab-ink)}
body.lab .bar .leave{appearance:none;flex:none;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);color:#fff;font:700 .7rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:9px 13px;border-radius:999px}
body.lab .bar .leave:hover{border-color:var(--acc);color:var(--acc)}
body.lab .bar .leave.sure{border-color:var(--red);color:#ffc2cb}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);margin-left:8px;vertical-align:1px;box-shadow:0 0 8px var(--green)}
.dot.off{background:var(--red);box-shadow:0 0 8px var(--red)}

body.lab main{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:22px 16px 56px;min-height:calc(100vh - 60px);display:flex;flex-direction:column}
.v[hidden]{display:none}
.v{flex:1;display:flex;flex-direction:column}
.center{justify-content:center;text-align:center}
body.lab h1{font:700 clamp(2.2rem,8vw,3.4rem)/1.05 var(--serif);margin:0 0 6px;letter-spacing:-.01em}
body.lab h1 span{color:var(--acc);font-style:italic}
.lead{color:var(--lab-sub);margin:0 0 20px;font-size:1.05rem;line-height:1.5}

/* join card */
.card{border:1px solid var(--edge);border-top:3px solid var(--acc);border-radius:22px;background:var(--glass);padding:22px;box-shadow:0 22px 56px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08)}
label.f{display:block;font:700 .68rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--lab-mute);margin:14px 0 8px;text-align:left}
label.f em{font-style:normal;color:#ffa7b4;font-weight:600;letter-spacing:.04em;text-transform:none}
input.in{width:100%;border:1.5px solid rgba(255,255,255,.24);background:rgba(3,6,26,.6);border-radius:14px;padding:14px 16px;font:700 1.4rem/1.2 var(--sans);color:var(--lab-ink);outline:none}
input.in::placeholder{color:rgba(201,212,242,.45);font-weight:500}
input.in:focus{border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 28%,transparent)}
input.code{letter-spacing:.4em;text-align:center;font:700 2rem/1.2 var(--serif)}
.btn{display:flex;align-items:center;justify-content:center;width:100%;border:0;border-radius:999px;padding:16px;font:700 1.25rem/1.1 var(--sans);margin-top:18px;color:#241a00;
  background:linear-gradient(180deg,#f7d46a,#e8b63a);box-shadow:0 4px 0 #9a7416,0 12px 24px rgba(0,0,0,.38)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #9a7416}
.btn[disabled]{opacity:.5}
.solo{display:block;max-width:520px;margin:16px auto 0;text-align:center;text-decoration:none;font:700 1.1rem/1.3 var(--sans);padding:14px 18px;border-radius:20px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:var(--lab-ink)}
.solo:hover,.solo:focus-visible{background:rgba(255,255,255,.12);border-color:var(--acc);outline:3px solid var(--lab-gold);outline-offset:2px}
.solo small{display:block;font-weight:500;font-size:.92rem;color:var(--lab-sub);margin-top:3px}
.err{color:var(--red);font:600 .95rem/1.4 var(--sans);min-height:1.3em;margin-top:10px}
.teams{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.teams button{border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);border-radius:999px;padding:13px;font:700 1.05rem/1.1 var(--sans)}
.teams button[aria-pressed="true"]{border-color:var(--tcb);background:color-mix(in srgb,var(--tcb) 22%,transparent);color:#fff}

/* banner and nickname rule */
.banner{text-align:center;margin:4px auto 16px;padding:22px 16px 18px;border-radius:22px;border:1px solid var(--edge);border-top:3px solid var(--acc);
  background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%),var(--glass);box-shadow:0 18px 44px rgba(0,0,0,.38)}
.banner .bn-k{margin:0 0 4px;font:700 .8rem/1.2 var(--sans);letter-spacing:.3em;color:var(--acc)}
.banner h1{margin:0;font-size:clamp(2.3rem,9vw,3.6rem)}
.bn-live{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:700 .72rem/1 var(--sans);letter-spacing:.18em;color:var(--lab-sub)}
.bn-live i{width:9px;height:9px;border-radius:50%;background:var(--green);animation:bnp 1.6s infinite}
@keyframes bnp{0%{box-shadow:0 0 0 0 rgba(52,211,153,.7)}100%{box-shadow:0 0 0 12px rgba(52,211,153,0)}}
.nick{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 auto 18px;padding:14px 16px;border-radius:18px;color:#fff;text-align:center;
  background:linear-gradient(180deg,#f0566d,#cf3350);border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 26px rgba(207,51,80,.32)}
.nick b{font:700 clamp(1.4rem,6vw,2rem)/1.05 var(--serif);text-transform:uppercase;letter-spacing:.03em}
.nick span{font:700 clamp(1rem,4vw,1.25rem)/1.25 var(--sans)}

/* waiting and countdown */
.big{font:700 clamp(4rem,22vw,8rem)/1 var(--serif);color:var(--lab-gold2);text-shadow:0 0 40px color-mix(in srgb,var(--lab-gold) 45%,transparent)}
.wait h2{font:700 2rem/1.15 var(--serif);margin:10px 0 6px}
.wait p{color:var(--lab-sub);font-size:1.1rem}
.badge{display:inline-block;margin:18px auto 0;padding:10px 20px;border-radius:999px;background:var(--tc);color:#0b0f14;font:700 1.15rem/1.2 var(--sans)}
.pulse{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;border:3px solid var(--acc);position:relative}
.pulse::before,.pulse::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--acc);animation:ring 1.8s ease-out infinite}
.pulse::after{animation-delay:.9s}
.pulse i{position:absolute;inset:30px;border-radius:50%;background:var(--acc);box-shadow:0 0 20px var(--acc)}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(2.1);opacity:0}}

/* question */
.qtop{display:flex;justify-content:space-between;align-items:center;font:700 .78rem/1.2 var(--sans);color:var(--acc);letter-spacing:.12em}
.prompt{font:700 clamp(1.5rem,6vw,2.2rem)/1.2 var(--serif);margin:10px 0 12px;text-align:center}
.prompt em{font-style:italic;color:var(--lab-gold2)}
.tbar{height:8px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin-bottom:16px}
.tbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 0 12px var(--acc);transform-origin:left}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1;align-content:start}
.opt{position:relative;border:1px solid var(--edge);border-radius:22px;padding:18px 14px 16px;text-align:center;background:var(--glass);box-shadow:0 12px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
  min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .12s,border-color .12s;color:var(--lab-ink)}
.opt:active{transform:scale(.97)}
.opt:hover{border-color:var(--acc)}
.opt .let{position:absolute;top:10px;left:12px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 1rem/1 var(--sans);
  color:var(--acc)!important;background:color-mix(in srgb,var(--acc) 22%,#0a1230)!important;border:1.5px solid var(--acc)}
.opt .sym{font:700 clamp(3.4rem,15vw,5.6rem)/1 var(--serif);color:#fff;text-shadow:0 0 28px rgba(var(--c),.35)}
.opt .sym sup{font-size:.42em;color:rgb(var(--c))}
.opt .nm{font:600 1.05rem/1.2 var(--sans);margin-top:6px}
.opt .pos{font:500 .78rem/1.3 var(--sans);color:var(--lab-sub);margin-top:3px}
.opts.r4,.opts.r5{grid-template-columns:1fr 1fr}
.opts.r4 .opt,.opts.r5 .opt{min-height:140px}
.opt .ord{position:absolute;top:-12px;right:-8px;width:40px;height:40px;border-radius:50%;background:var(--lab-gold);color:#241a00;font:700 1.2rem/1 var(--sans);display:grid;place-items:center;transform:scale(0);transition:transform .15s}
.opt.picked{border-color:var(--lab-gold);box-shadow:0 0 0 2px rgba(246,199,68,.4),0 12px 28px rgba(0,0,0,.35)}
.opt.picked .ord{transform:scale(1)}
.rk-act{display:flex;gap:10px}
.rk-act .btn{margin-top:14px}
.rk-act .btn.ghost{background:rgba(255,255,255,.07);color:var(--lab-ink);box-shadow:none;border:1px solid rgba(255,255,255,.22);flex:.5}
.scene{margin:0 0 14px}
.scene svg{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--edge)}
.scene .vrph{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#050a1c center/cover no-repeat;border:1px solid var(--edge)}
.scene .vrph::before{content:"";position:absolute;inset:0;background:rgba(3,6,26,.5)}
.scene .vrph svg{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0}
.opts.mc{grid-template-columns:1fr 1fr;gap:12px;grid-auto-rows:minmax(110px,220px)}
.opt.mco{min-height:92px;padding:18px 12px 14px 16px;justify-content:center;border-left:5px solid var(--acc)}
.opt.mco .let{width:32px;height:32px;top:8px;left:10px;font-size:.92rem}
.opt.mco .otext{font:600 clamp(1.05rem,4.4vw,1.35rem)/1.2 var(--sans);color:var(--lab-ink);padding-top:12px}

/* narrow phones: keep the top strip on one line */
@media (max-width:480px){
  body.lab .bar{gap:8px;padding:9px 12px}
  body.lab .bar .b{flex:1 1 auto;min-width:0;font-size:.92rem}
  body.lab .bar .b span{margin-left:4px;padding:2px 7px;font-size:.55rem}
  body.lab .bar .me{flex:0 1 74px;min-width:0;font-size:.8rem}
  body.lab .bar .leave{padding:8px 10px;font-size:.6rem}
}

/* result */
.res{border-radius:26px;padding:34px 20px;text-align:center;border:1px solid var(--edge);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.res.good{background:radial-gradient(400px 300px at 50% 0,rgba(52,211,153,.34),transparent 70%),linear-gradient(180deg,rgba(8,44,34,.92),rgba(5,22,24,.94));border:2px solid var(--green)}
.res.bad{background:radial-gradient(400px 300px at 50% 0,rgba(251,113,133,.28),transparent 70%),linear-gradient(180deg,rgba(48,14,26,.92),rgba(26,8,20,.94));border:2px solid var(--red)}
.res h2{font:700 clamp(2.4rem,10vw,3.6rem)/1.1 var(--serif);margin:0}
.res .pts{font:700 clamp(2.6rem,12vw,4.2rem)/1.1 var(--serif);margin:8px 0}
.res.good .pts{color:var(--green)}
.res p{margin:6px 0;font-size:1.12rem;color:var(--lab-ink)}
.res .sm{font:600 .92rem/1.4 var(--sans);color:var(--lab-sub)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.stats div{border:1px solid var(--edge);border-radius:16px;padding:12px 6px;background:var(--glass);text-align:center}
.stats small{display:block;font:700 .6rem/1.3 var(--sans);letter-spacing:.14em;color:var(--lab-mute)}
.stats b{font:700 1.5rem/1.2 var(--serif)}
.place{font:700 clamp(4.4rem,24vw,8rem)/1 var(--serif);color:var(--lab-gold2);text-shadow:0 0 40px color-mix(in srgb,var(--lab-gold) 45%,transparent)}
.place sup{font-size:.4em}

/* revenge, bonus, lead notes */
.rvbox{margin-top:18px;padding:14px;border-radius:18px;background:rgba(255,193,94,.08);border:1px solid rgba(255,193,94,.45);text-align:left}
.rvbox h3{margin:0 0 10px;font:700 1.05rem/1.3 var(--serif);text-align:center;color:var(--lab-warn)}
.rvbox.done{text-align:center;color:#ffe3b3}
.rvlist{display:grid;gap:8px;max-height:36vh;overflow:auto}
.rtarget{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;font:600 1rem/1.2 var(--sans);cursor:pointer}
.rtarget small{font:600 .8rem var(--sans);color:var(--lab-sub)}
.rtarget:hover:not(:disabled){background:rgba(255,193,94,.22);border-color:var(--lab-warn)}
.rtarget:disabled{opacity:.5}
.rvhit{margin-top:16px;padding:12px 16px;border-radius:16px;background:rgba(251,113,133,.14);border:1px solid var(--red);color:#ffd7de;font-weight:700}
.rvbonus{margin-top:16px;padding:12px 16px;border-radius:16px;background:rgba(52,211,153,.13);border:1px solid var(--green);color:#c9f7de;font-weight:700}
.rvlead{margin-top:16px;padding:12px 16px;border-radius:16px;background:rgba(246,199,68,.14);border:1px solid var(--lab-gold);color:#ffe9b0;font-weight:700}

@media (prefers-reduced-motion:reduce){body.lab *{animation:none!important;transition:none!important}}