/* RMG Code law quiz game — one committed arcade look (works on light or dark hosts) */
#qg{--night:#1B1446;--night2:#2A1F6B;--deep:#130E33;--card:#FFFFFF;--ink:#1D1442;--sub:#6B6596;--gold:#FFC93C;--gold2:#E89B00;
 --ok:#22C55E;--ok2:#15803D;--bad:#F43F5E;--bad2:#BE123C;--sky:#38BDF8;--sky2:#0369A1;--grape:#A855F7;--grape2:#6D28D9;--sun:#FB923C;--sun2:#C2410C;--mint:#2DD4BF;--mint2:#0F766E;
 --fd:"Baloo Da 2","Noto Sans Bengali",system-ui,sans-serif;--fb:"Noto Sans Bengali","Inter",system-ui,sans-serif;
 position:relative;overflow:hidden;border-radius:26px;background:radial-gradient(120% 90% at 50% 0%,var(--night2),var(--night) 55%,var(--deep));color:#fff;font-family:var(--fb);
 padding:22px 18px 26px;min-height:640px;max-width:880px;box-shadow:0 20px 60px rgba(19,14,51,.35);color-scheme:dark}
#qg *{box-sizing:border-box}
#qg button{font:inherit;cursor:pointer;color:inherit}
#qg .bg-stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.5px),radial-gradient(rgba(255,255,255,.3) 1px,transparent 1.5px);background-size:90px 90px,53px 53px;background-position:10px 20px,30px 5px;opacity:.5}
#qg .scr{position:relative;z-index:1;animation:qgIn .35s ease-out}
@keyframes qgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#qg h2{color:#fff}
#qg h2,#qg .disp{font-family:var(--fd);font-weight:800;line-height:1.1;margin:0}
#qg .ic{display:inline-block;vertical-align:-.18em;width:1.2em;height:1.2em}
/* chunky buttons */
#qg .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:18px;padding:14px 24px;font-family:var(--fd);font-weight:800;font-size:20px;
 background:var(--gold);color:#3B2300;box-shadow:0 6px 0 var(--gold2),0 10px 20px rgba(0,0,0,.25);transition:transform .08s,box-shadow .08s;min-height:56px}
#qg .btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--gold2)}
#qg .btn.g{background:var(--ok);color:#fff;box-shadow:0 6px 0 var(--ok2),0 10px 20px rgba(0,0,0,.25)}
#qg .btn.s{background:rgba(255,255,255,.12);color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.35);font-size:17px;padding:10px 18px;min-height:46px}
#qg .btn:disabled{filter:grayscale(.8);opacity:.6;cursor:not-allowed}
#qg .btn:focus-visible,#qg input:focus-visible,#qg .opt:focus-visible{outline:4px solid var(--sky);outline-offset:3px}
/* login */
#qg .logo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin:10px 0 18px}
#qg .logo .badge{width:110px;height:110px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));animation:qgBob 3s ease-in-out infinite}
@keyframes qgBob{50%{transform:translateY(-8px) rotate(-3deg)}}
#qg .logo h2{font-size:40px;background:linear-gradient(180deg,#FFE58A,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 4px 0 rgba(0,0,0,.15)}
#qg .logo p{margin:0;color:#CFC8FF;max-width:34ch}
#qg .panel{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.14);border-radius:22px;padding:18px}
#qg label.f{display:block;font-weight:700;margin:4px 0 8px}
#qg .inp{width:100%;font:inherit;font-size:20px;font-weight:700;letter-spacing:1px;padding:14px 16px;border-radius:16px;border:3px solid rgba(255,255,255,.25);background:var(--deep);color:#fff}
#qg .inp::placeholder{color:#8E86C7;font-weight:400;letter-spacing:0}
#qg .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#qg .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
#qg .chip{background:rgba(255,255,255,.12);border:0;border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px}
#qg .hint{font-size:13px;color:#B9B2EE;margin-top:10px;line-height:1.5}
#qg .err{color:#FFB4C1;font-weight:700;margin-top:8px;font-size:14px}
/* lobby */
#qg .pcard{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:2px solid rgba(255,255,255,.16);border-radius:22px;padding:14px 16px}
#qg .av{flex:none;width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,var(--gold),var(--sun));display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:28px;color:#3B2300;box-shadow:0 5px 0 var(--gold2)}
#qg .pcard .nm{font-family:var(--fd);font-weight:800;font-size:22px;line-height:1.1}
#qg .pcard .id{font-size:13px;color:#CFC8FF;font-family:Inter,sans-serif;letter-spacing:1px}
#qg .lvl{margin-top:6px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
#qg .xpbar{flex:1;height:10px;border-radius:5px;background:rgba(0,0,0,.35);overflow:hidden;min-width:80px}
#qg .xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#FFE58A)}
#qg .stats{margin-left:auto;display:flex;gap:10px;flex:none}
#qg .stat{text-align:center;background:rgba(0,0,0,.25);border-radius:14px;padding:6px 10px;min-width:62px}
#qg .stat b{display:block;font-family:var(--fd);font-size:20px}
#qg .stat small{font-size:11px;color:#CFC8FF}
#qg .worlds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
#qg .world{position:relative;text-align:left;border:0;border-radius:24px;padding:16px;min-height:178px;display:flex;flex-direction:column;gap:8px;overflow:hidden;
 background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 7px 0 var(--c3),0 14px 26px rgba(0,0,0,.3);transition:transform .1s}
#qg .world:hover{transform:translateY(-3px)}#qg .world:active{transform:translateY(4px);box-shadow:0 3px 0 var(--c3)}
#qg .world .wi{width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
#qg .world .wn{font-family:var(--fd);font-weight:800;font-size:24px;line-height:1.1}
#qg .world .wd{font-size:12.5px;opacity:.9;line-height:1.35}
#qg .world .pips{display:flex;gap:4px;margin-top:auto}
#qg .world .pips i{flex:1;height:9px;border-radius:5px;background:rgba(0,0,0,.25)}
#qg .world .pips i.on{background:var(--gold);box-shadow:0 0 8px rgba(255,201,60,.7)}
#qg .world .wp{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:14px}
#qg .world .play{background:rgba(0,0,0,.25);border-radius:999px;padding:4px 12px;display:inline-flex;gap:6px;align-items:center}
#qg .world .deco{position:absolute;right:-18px;top:-18px;width:110px;height:110px;opacity:.16}
#qg .lobby-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}
#qg .rules{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;justify-content:center}
#qg .rules span{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border-radius:999px;padding:6px 12px;font-size:13px}
/* draw */
#qg .draw{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:560px;gap:18px}
#qg .ticket{width:220px;height:280px;border-radius:28px;background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 10px 0 var(--c3),0 30px 60px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
#qg .ticket .n{font-family:var(--fd);font-weight:800;font-size:120px;line-height:1}
#qg .ticket.spin{animation:qgSpin .12s linear infinite}
@keyframes qgSpin{50%{transform:rotateY(25deg) scale(.97)}}
#qg .ticket.land{animation:qgLand .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes qgLand{from{transform:scale(1.25)}to{transform:none}}
#qg .count{font-family:var(--fd);font-weight:800;font-size:90px;color:var(--gold);text-shadow:0 6px 0 rgba(0,0,0,.25);animation:qgPop .9s ease-out}
@keyframes qgPop{from{transform:scale(2);opacity:0}30%{opacity:1}to{transform:scale(1)}}
/* HUD */
#qg .hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
#qg .hearts{display:flex;gap:4px}
#qg .hearts svg{width:30px;height:30px;transition:transform .3s}
#qg .hearts svg.lost{filter:grayscale(1);opacity:.35;transform:scale(.8)}
#qg .hearts svg.hit{animation:qgHit .6s}
@keyframes qgHit{30%{transform:scale(1.5) rotate(-12deg)}}
#qg .pill{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.3);border-radius:999px;padding:6px 12px;font-weight:800;font-family:var(--fd);font-size:18px}
#qg .pill.coin{color:var(--gold)}#qg .pill.fire{color:var(--sun)}
#qg .hud .qn{margin-left:auto}
#qg .track{display:flex;gap:3px;margin-bottom:12px}
#qg .track i{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.14)}
#qg .track i.ok{background:var(--ok)}#qg .track i.no{background:var(--bad)}#qg .track i.cur{background:var(--gold);box-shadow:0 0 10px rgba(255,201,60,.8)}
#qg .timer{height:14px;border-radius:7px;background:rgba(0,0,0,.35);overflow:hidden;margin-bottom:14px;position:relative}
#qg .timer i{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:linear-gradient(90deg,var(--mint),var(--sky))}
#qg .timer.low i{background:linear-gradient(90deg,var(--bad),var(--sun))}
#qg .qcard{background:var(--card);color:var(--ink);border-radius:24px;padding:20px 18px;box-shadow:0 8px 0 #CFC7F5,0 20px 40px rgba(0,0,0,.3);position:relative}
#qg .qcard .tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--grape2);background:#F1E8FF;border-radius:999px;padding:4px 10px;margin-bottom:8px}
#qg .qcard .qt{font-family:var(--fd);font-weight:700;font-size:22px;line-height:1.35}
#qg .qcard .snip{display:block;font-family:"Noto Serif Bengali",var(--fb);font-weight:400;font-size:17px;background:#F5F3FF;border-left:5px solid var(--grape);border-radius:10px;padding:10px 12px;margin-top:10px;line-height:1.55}
#qg .opts{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
#qg .opt{display:flex;align-items:center;gap:12px;text-align:left;border:0;border-radius:18px;padding:12px 14px;min-height:60px;font-weight:700;font-size:17px;line-height:1.4;color:#fff;
 background:var(--o1);box-shadow:0 6px 0 var(--o2);transition:transform .08s,filter .2s}
#qg .opt:nth-child(1){--o1:#6366F1;--o2:#3730A3}#qg .opt:nth-child(2){--o1:#0EA5E9;--o2:#075985}#qg .opt:nth-child(3){--o1:#EC4899;--o2:#9D174D}#qg .opt:nth-child(4){--o1:#F59E0B;--o2:#92400E}
#qg .opt .L{flex:none;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:20px}
#qg .opt:active{transform:translateY(4px);box-shadow:0 2px 0 var(--o2)}
#qg .opts.locked .opt{cursor:default}
#qg .opts.locked .opt.dim{filter:grayscale(.85) brightness(.75);opacity:.6}
#qg .opt.right{--o1:var(--ok);--o2:var(--ok2);animation:qgYes .5s}
#qg .opt.wrong{--o1:var(--bad);--o2:var(--bad2);animation:qgNo .45s}
@keyframes qgYes{40%{transform:scale(1.04)}}
@keyframes qgNo{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
#qg .fb{margin-top:14px;border-radius:18px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;font-weight:700;line-height:1.45}
#qg .fb.ok{background:rgba(34,197,94,.18);color:#BBF7D0}#qg .fb.no{background:rgba(244,63,94,.18);color:#FFE4E6}
#qg .fb a{color:var(--gold);font-weight:800}
#qg .fb .btn{margin-left:auto;flex:none}
#qg .float{position:absolute;right:18px;top:10px;font-family:var(--fd);font-weight:800;font-size:28px;color:var(--ok);animation:qgUp 1s ease-out forwards;pointer-events:none}
@keyframes qgUp{to{transform:translateY(-40px);opacity:0}}
#qg .mute{position:absolute;right:14px;top:14px;z-index:3}
/* result */
#qg .res{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:6px}
#qg .res .big{font-size:46px;color:var(--gold);text-shadow:0 5px 0 rgba(0,0,0,.25)}
#qg .res .big.f{color:#FF8FA3}
#qg .stars{display:flex;gap:6px;align-items:flex-end}
#qg .stars svg{width:62px;height:62px}#qg .stars svg:nth-child(2){width:84px;height:84px}
#qg .stars svg.on{animation:qgStar .6s cubic-bezier(.3,1.7,.5,1) both}
#qg .stars svg:nth-child(2).on{animation-delay:.15s}#qg .stars svg:nth-child(3).on{animation-delay:.3s}
@keyframes qgStar{from{transform:scale(0) rotate(-40deg)}}
#qg .sc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;margin:6px 0}
#qg .sc div{background:rgba(0,0,0,.25);border-radius:16px;padding:10px 4px}
#qg .sc b{display:block;font-family:var(--fd);font-size:24px}
#qg .sc small{font-size:12px;color:#CFC8FF}
#qg .pct{font-family:var(--fd);font-weight:800;font-size:64px;line-height:1}
#qg .verdict{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:800;font-size:26px;border-radius:999px;padding:6px 22px}
#qg .verdict.p{background:var(--ok);box-shadow:0 5px 0 var(--ok2)}#qg .verdict.f{background:var(--bad);box-shadow:0 5px 0 var(--bad2)}
#qg .res p{margin:0;color:#DCD7FF;max-width:40ch;line-height:1.5}
#qg .res .acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
#qg .rv{margin-top:16px;display:flex;flex-direction:column;gap:10px;text-align:left;width:100%}
#qg .rv .it{background:var(--card);color:var(--ink);border-radius:16px;padding:12px 14px;border-left:6px solid var(--bad)}
#qg .rv .it .q{font-weight:700;line-height:1.45;white-space:pre-line}
#qg .rv .it .a{font-size:14px;margin-top:6px}#qg .rv .it .a b{color:var(--ok2)}#qg .rv .it .a s{color:var(--bad2)}
#qg .rv .it a{font-size:14px;font-weight:800;color:var(--grape2)}
#qg canvas.conf{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
#qg .champ{font-size:15px;background:rgba(255,201,60,.15);color:#FFE58A;border-radius:14px;padding:10px 14px;font-weight:700}
@media (max-width:560px){#qg{padding:16px 12px 22px;border-radius:20px}#qg .worlds{grid-template-columns:1fr 1fr;gap:10px}#qg .world{min-height:168px;padding:12px}#qg .world .wn{font-size:20px}#qg .world .wd{display:none}
 #qg .pcard{flex-wrap:wrap}#qg .stats{margin-left:0;width:100%}#qg .stat{flex:1}#qg .qcard .qt{font-size:19px}#qg .opt{font-size:16px}#qg .logo h2{font-size:32px}#qg .sc b{font-size:20px}#qg .fb{flex-wrap:wrap}#qg .fb .btn{margin-left:0;width:100%}}
@media (prefers-reduced-motion:reduce){#qg *{animation:none!important;transition:none!important}}
#qg .btn{white-space:nowrap}
#qg .btn.s.io{padding:8px 12px;min-height:42px;font-size:15px}
@media (max-width:560px){#qg .hud{gap:6px;flex-wrap:nowrap}#qg .hearts svg{width:24px;height:24px}#qg .pill{padding:5px 9px;font-size:16px}#qg .hud .btn.s.io{padding:6px 8px;min-height:38px}#qg .lobby-top h2{font-size:22px}}
#qg .lobby-top h2{white-space:nowrap}
@media (max-width:560px){#qg .hud{gap:4px}#qg .hearts{gap:1px}#qg .hearts svg{width:21px;height:21px}#qg .pill{padding:4px 7px;font-size:15px;gap:4px}#qg .hud .btn.s.io{padding:5px 7px;min-height:36px;border-radius:12px}}
@media (max-width:400px){#qg .hud .hm{display:none}}
#qg .lobby-top{flex-wrap:wrap}#qg .lobby-top .row{flex-wrap:nowrap;margin-left:auto}
#qg .world .wp span{white-space:nowrap}
@media (max-width:400px){#qg .world .wp{flex-wrap:wrap;gap:6px}#qg .world .play{padding:3px 10px}}
#qg .lvl{white-space:nowrap}
#qg{scroll-margin-top:96px}
/* explanations + share */
#qg .ex{display:block;font-weight:500;font-size:15px;line-height:1.55;margin-top:6px;opacity:.95}
#qg .fb.ok .ex{color:#DCFCE7}#qg .rv .it .ex{color:var(--sub);font-size:13.5px;margin-top:6px}
#qg .btn.auto{position:relative;overflow:hidden}#qg .btn.auto i{position:absolute;left:0;bottom:0;height:4px;background:rgba(255,255,255,.7);animation:qgAuto 3.2s linear forwards}
@keyframes qgAuto{from{width:0}to{width:100%}}
#qg .btn.sh{background:linear-gradient(90deg,#38BDF8,#A855F7);color:#fff;box-shadow:0 6px 0 #5B21B6,0 10px 20px rgba(0,0,0,.25);margin-top:6px}
#qg .share{width:100%;text-align:left;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.14);border-radius:22px;padding:16px;margin-top:8px;display:flex;flex-direction:column;gap:12px}
#qg .share .prev{border-radius:14px;overflow:hidden;background:rgba(0,0,0,.3);aspect-ratio:1200/630;display:flex;align-items:center;justify-content:center;color:#CFC8FF}
#qg .share .prev img{width:100%;height:auto;display:block}
#qg .shbtns{display:flex;flex-wrap:wrap;gap:10px}#qg .shbtns .btn{font-size:16px;padding:10px 16px;min-height:48px}
#qg .btn.fbb{background:#1877F2;color:#fff;box-shadow:0 5px 0 #0B4FB3}#qg .btn.lib{background:#0A66C2;color:#fff;box-shadow:0 5px 0 #06407A}
@media (max-width:560px){#qg .shbtns .btn{flex:1 1 45%}}
#qg [hidden]{display:none!important}
#qg .qcard .tag.cmp{color:#9A3412;background:#FFEDD5;margin-left:6px}