/* GENERATED by build_content.py from the boards' CSS (app_base, pill_states, ui_v09 SOLO, combo_sheet). Do not edit; edit app.css. */

@font-face{font-family:Nunito;src:url('fonts/Nunito-VF.ttf');font-weight:200 1000}
*{box-sizing:border-box;margin:0}
.stage{font-family:Nunito,sans-serif;font-weight:900}
.hud{position:absolute;top:22px;width:62px;height:62px;border-radius:50%;background:rgba(10,10,50,.38);display:grid;place-items:center;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.hud svg{width:28px;height:28px}
/* ---- top bar ---- */
.my{position:absolute;left:50%;top:10px;transform:translateX(-50%);display:flex;align-items:center;gap:18px;padding:10px 44px 10px 12px;border-radius:99px;
 background:linear-gradient(#ffffff,#eef0ff);box-shadow:0 0 0 6px #ffcf3a,0 8px 0 #c98a00,0 16px 26px rgba(0,0,0,.38);white-space:nowrap}
.coin{width:94px;height:94px;border-radius:50%;background:url('assets/i_coin.png') center/cover}
.my .lab{display:block;font-size:24px;letter-spacing:.16em;color:#6a6ea3;line-height:1.05}
.my .amt{display:block;font-size:74px;color:#2a2a6e;line-height:.95}
/* players: one VS bar, names only */
.vs{position:absolute;top:150px;left:50%;transform:translateX(-50%);display:flex;align-items:center}
.h{width:340px;height:70px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 54px 0 28px;color:#fff;
 background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0) 45%,rgba(0,0,40,.22)),var(--c);box-shadow:0 5px 0 rgba(20,20,90,.35),0 10px 18px rgba(0,0,0,.3);
 text-shadow:0 2px 0 rgba(0,0,40,.45),0 0 8px rgba(0,0,40,.35);filter:saturate(.7) brightness(.86)}
.h.L{border-radius:99px 0 0 99px}.h.R{border-radius:0 99px 99px 0;flex-direction:row-reverse;padding:0 28px 0 54px}
.h .nm{font-size:24px;letter-spacing:.14em}.h .amt{font-size:42px}
.h.on{filter:none;box-shadow:inset 0 0 0 5px #ffcf3a,0 5px 0 rgba(20,20,90,.35),0 0 28px rgba(255,207,58,.85)}
.mid{position:relative;z-index:2;width:80px;height:80px;margin:0 -40px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#7a4a00;
 background:linear-gradient(#fff3a8,#ffcf3a 60%,#f2b51c);box-shadow:0 0 0 5px #fff6c8,0 5px 0 #c98a00}
.x2{position:absolute;padding:4px 18px;border-radius:99px;font-size:46px;color:#7a4a00;background:linear-gradient(#fff3a8,#ffcf3a 60%,#f2b51c);
 box-shadow:0 0 0 5px #fff6c8,0 6px 0 #c98a00,0 0 26px rgba(255,207,58,.9)}
/* ---- question panel ---- */
.panel{position:absolute;left:110px;width:860px;bottom:90px;padding:62px 34px 46px;border-radius:40px;
 background:linear-gradient(170deg,#8f9bff 0%,#6a78f5 55%,#4e55d6 100%);   /* the app's own sky (tokens color.sky) */
 box-shadow:0 0 0 5px #ffcf3a,0 0 0 9px rgba(255,246,200,.55),0 10px 0 9px #7a4a00,0 24px 40px rgba(0,0,0,.45)}
.tag{position:absolute;top:-30px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:0;border-radius:99px;overflow:hidden;white-space:nowrap;
 box-shadow:0 0 0 5px #fff6c8,0 6px 0 #b8304f,0 10px 16px rgba(0,0,0,.3);font-size:28px;letter-spacing:.12em}
.tag .q{padding:10px 22px;color:#fff;background:linear-gradient(#ffb0bf,#ff6a8a 42%,#ff4f78 58%,#e8406a)}
.tag .w{padding:10px 22px;color:#fff;background:var(--c)}
.qt{color:#fff;font-size:56px;line-height:1.12;text-align:center;text-shadow:0 3px 0 rgba(30,30,110,.55),0 0 14px rgba(30,30,110,.35);margin:0 6px 30px;height:126px;display:flex;align-items:center;justify-content:center}
.ans{display:grid;gap:24px}
.a{position:relative;height:96px;display:flex;align-items:center;gap:20px;padding:0 22px 0 14px;border-radius:26px;color:#2a2a6e;font-size:46px;
 background:linear-gradient(#ffffff,#eef0ff);box-shadow:inset 0 2px 0 rgba(255,255,255,.9),0 6px 0 #8f98e6,0 10px 14px rgba(0,0,20,.35)}
.a .L{flex:none;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:38px;color:#fff;background:linear-gradient(#7d86ff,#4b55e0);
 box-shadow:0 0 0 3px #ffcf3a}
.a .t{flex:1;white-space:nowrap}
.a .chip{flex:none;padding:5px 16px;border-radius:99px;font-size:24px;letter-spacing:.1em;color:#fff}
.a .chip.who{background:var(--c);box-shadow:0 0 0 3px #fff}
.a.mine{background:linear-gradient(#fff3a8,#ffcf3a 60%,#f2b51c);color:#4a2a00;box-shadow:0 0 0 5px #fff6c8,0 6px 0 #c98a00,0 0 26px rgba(255,207,58,.9)}
.a.cpick{box-shadow:0 0 0 6px var(--c),0 6px 0 rgba(20,20,90,.45),0 10px 14px rgba(0,0,20,.35)}
.a.mine.cpick{box-shadow:0 0 0 6px var(--c),0 6px 0 #c98a00,0 0 26px rgba(255,207,58,.9)}
.a.right{background:linear-gradient(#8dffbd,#2fd27a 55%,#16a55a);color:#fff;text-shadow:0 2px 0 rgba(0,60,20,.35);box-shadow:0 0 0 5px #e4ffef,0 6px 0 #0e7a40,0 0 28px rgba(47,210,122,.9)}
.a.wrong{background:linear-gradient(#ff8a8a,#ff3b3b);color:#fff;box-shadow:0 0 0 5px #ffd0d0,0 6px 0 #b81f2a}
.a.wrong .L,.a.right .L{box-shadow:0 0 0 3px #fff}
.a.dim{opacity:.55}
.trk{position:absolute;left:40px;right:40px;bottom:18px;height:12px;border-radius:99px;background:rgba(255,255,255,.16)}
.bar{position:absolute;left:150px;top:1800px;width:780px;height:12px;border-radius:99px;background:linear-gradient(90deg,#ffcf3a,#ff4f78)}

/* top row 2 (Yaron): players now + my right-answer streak (a green check, never a flame: flames are strikes) + live chat button */
.chips{position:absolute;top:186px;left:0;right:0;display:flex;justify-content:center;gap:14px}
.chip2{display:flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 8px;border-radius:99px;color:#fff;font-size:24px;letter-spacing:.06em;white-space:nowrap;
 background:rgba(18,18,70,.62);box-shadow:0 0 0 3px rgba(255,255,255,.55),0 6px 12px rgba(0,0,0,.25);text-shadow:0 2px 0 rgba(0,0,40,.35)}
.chip2 .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center}
.chip2 .ic svg{width:24px;height:24px}
.chip2 .live{background:#ff4f78;box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.chip2 .ok{background:linear-gradient(#8dffbd,#2fd27a 55%,#16a55a);box-shadow:0 0 0 3px #e4ffef}
.chip2 b{font-size:28px;letter-spacing:0}
.chatb{position:absolute;right:112px;top:172px;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
 background:linear-gradient(#ffffff,#eef0ff);box-shadow:0 0 0 5px #ffcf3a,0 6px 0 #c98a00,0 10px 18px rgba(0,0,0,.3)}
.chatb svg{width:44px;height:44px}
.chatb .n{position:absolute;top:-8px;right:-14px;min-width:40px;height:34px;padding:0 8px;border-radius:99px;display:grid;place-items:center;font-size:20px;color:#fff;
 background:#ff4f78;box-shadow:0 0 0 3px #fff}
.chatb{right:104px !important;top:58px !important;width:96px !important;height:96px !important}
.chatb svg{width:58px !important;height:58px !important}
.chatb .n{font-size:22px !important;height:38px !important;min-width:44px !important}
.chip2.sm{position:absolute;right:110px;top:280px;height:40px;padding:0 14px 0 5px;gap:7px;font-size:18px}
.chip2.sm .ic{width:30px;height:30px}.chip2.sm .ic svg{width:19px;height:19px}.chip2.sm b{font-size:21px}
.my{top:50px !important}
.hud{top:76px !important}
.qt{text-shadow:0 3px 0 rgba(24,24,100,.75),0 0 16px rgba(24,24,100,.5),0 0 4px rgba(24,24,100,.45) !important}
.panel .tag{display:none}
.tg{position:absolute;top:-36px;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;height:68px;white-space:nowrap;
 filter:drop-shadow(0 6px 0 rgba(90,30,70,.45)) drop-shadow(0 10px 14px rgba(0,0,0,.28))}
.sg{position:relative;display:flex;align-items:center;gap:12px;padding:0 28px;color:#fff;font-size:28px;letter-spacing:.12em;
 text-shadow:0 2px 0 rgba(0,0,40,.35),0 0 6px rgba(0,0,40,.25);box-shadow:inset 0 0 0 0 transparent}
.sg:first-child{border-radius:99px 0 0 99px;padding-left:32px}.sg:last-child{border-radius:0 99px 99px 0;padding-right:32px}
.tg:before{content:"";position:absolute;inset:-5px;border-radius:99px;background:#fff6c8;z-index:-1}
.sg.q{background:linear-gradient(#ffb0bf 0%,#ff6a8a 42%,#ff4f78 58%,#e8406a 100%)}
.sg.p{background:linear-gradient(rgba(255,255,255,.30),rgba(255,255,255,0) 48%,rgba(0,0,50,.16)),var(--c)}
.sg .nm{font-size:23px;letter-spacing:.14em}.sg .amt{font-size:38px;letter-spacing:0}
.sg.L{padding-right:62px;padding-left:72px;border-radius:99px 0 0 99px}.sg.R{padding-left:62px;padding-right:72px;border-radius:0 99px 99px 0}
.dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
 font-size:22px;color:#7a4a00;background:linear-gradient(#fff3a8,#ffcf3a 60%,#f2b51c);box-shadow:0 0 0 5px #fff6c8,0 4px 0 #c98a00}
.stk{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:7px 14px;border-radius:99px;
 background:rgba(18,18,70,.62);box-shadow:0 0 0 3px rgba(255,255,255,.55),0 6px 12px rgba(0,0,0,.25)}
.stk img{width:42px;height:42px;object-fit:contain}
.stk img.off{filter:brightness(0) invert(1);opacity:.32}
.sg .amt{font-size:42px !important}
.x2s,.x2b{z-index:5;width:104px;height:104px;padding:0 !important;border-radius:50% !important;display:grid;place-items:center;font-size:52px !important;transform:rotate(-8deg)}
.x2b{position:absolute;color:#7a4a00;background:linear-gradient(#fff3a8,#ffcf3a 60%,#f2b51c);
 box-shadow:0 0 0 6px #fff6c8,0 6px 0 #c98a00,0 0 26px rgba(255,207,58,.9)}
.hud.back{width:56px;height:56px}.hud.back svg{width:30px;height:30px}
.x2s{position:absolute;top:-26px;padding:4px 16px;border-radius:99px;font-size:40px;color:#7a4a00;background:linear-gradient(#fff3a8,#ffcf3a 60%,#f2b51c);
 box-shadow:0 0 0 5px #fff6c8,0 5px 0 #c98a00,0 0 22px rgba(255,207,58,.9)}

.tg{width:780px}
.tg .sg{flex:1;justify-content:center}
.tg.solo .sg{background:linear-gradient(rgba(255,255,255,.30),rgba(255,255,255,0) 48%,rgba(0,0,50,.16)),var(--c)!important}
.tg.solo .sg.L{border-right:2px solid rgba(255,255,255,.35)}
.tg.solo .fl{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.tg.solo .fl.off{filter:brightness(0) invert(1);opacity:.38}
.tg.solo .sl{display:flex;gap:8px}
.panel{padding-top:66px!important}   /* v08 (Yaron): no QUESTION n OF N line, so the panel is lower and hides less */
.qn{position:absolute;top:58px;left:0;right:0;text-align:center;font-size:22px;letter-spacing:.16em;color:#fff;opacity:.9;text-shadow:0 2px 0 rgba(24,24,100,.55)}

.cx{position:absolute;z-index:6;border-radius:50%;display:grid;place-items:center;transform:rotate(-8deg);font-size:var(--fs);line-height:1;
 width:var(--s);height:var(--s);color:var(--ink);background:var(--bg);box-shadow:0 0 0 6px var(--ring),0 6px 0 var(--under),0 0 26px var(--glow)}
.cx.t2{--s:104px;--fs:52px;--ink:#7a4a00;--bg:linear-gradient(#fff3a8,#ffcf3a 60%,#f2b51c);--ring:#fff6c8;--under:#c98a00;--glow:rgba(255,207,58,.9)}
.cx.t3{--s:112px;--fs:56px;--ink:#5a2400;--bg:linear-gradient(#ffe0a8,#ffa23a 58%,#f2780f);--ring:#fff0d8;--under:#b8500a;--glow:rgba(255,150,40,.95)}
.cx.t4{--s:120px;--fs:60px;--ink:#fff;--bg:linear-gradient(#ffc2e0,#ff5fa8 58%,#e0307f);--ring:#ffe6f2;--under:#a01a58;--glow:rgba(255,80,160,.95)}
.cx.t5{--s:128px;--fs:64px;--ink:#fff;--bg:linear-gradient(#e2c8ff,#a066ff 58%,#6c2ee6);--ring:#f2e8ff;--under:#4a18a8;--glow:rgba(160,100,255,1)}
.cx.t4,.cx.t5{text-shadow:0 3px 0 rgba(40,0,60,.45)}
.cx.up{transform:rotate(-8deg) scale(1.16)}
.ray{position:absolute;z-index:5;border-radius:50%;width:196px;height:196px;
 background:repeating-conic-gradient(from 0deg,var(--rc) 0deg 9deg,transparent 9deg 30deg);
 -webkit-mask:radial-gradient(circle,transparent 0 26%,#000 34%,#000 52%,transparent 70%);mask:radial-gradient(circle,transparent 0 26%,#000 34%,#000 52%,transparent 70%)}
.chip2 .sep{width:3px;height:26px;border-radius:2px;background:rgba(255,255,255,.4);margin:0 4px}
.chip2 .nx{font-size:26px;letter-spacing:.05em}
.chip2 .nx i.t2{--ink:#7a4a00;--bg:linear-gradient(#fff3a8,#ffcf3a);--ring:#fff6c8}.chip2 .nx i.t3{--ink:#5a2400;--bg:linear-gradient(#ffe0a8,#ffa23a);--ring:#fff0d8}.chip2 .nx i.t4{--ink:#fff;--bg:linear-gradient(#ffc2e0,#ff5fa8);--ring:#ffe6f2}.chip2 .nx i.t5{--ink:#fff;--bg:linear-gradient(#e2c8ff,#a066ff);--ring:#f2e8ff}.chip2 .nx i{font-style:normal;display:inline-block;padding:1px 10px;margin-left:6px;border-radius:99px;font-size:26px;color:var(--ink);background:var(--bg);box-shadow:0 0 0 2px var(--ring)}
.chip2.lv.t3{--ink:#5a2400;--bg:linear-gradient(#ffe0a8,#ffa23a 58%,#f2780f);--ring:#fff0d8;--under:#b8500a;--glow:rgba(255,150,40,.95)}.chip2.lv.t4{--ink:#fff;--bg:linear-gradient(#ffc2e0,#ff5fa8 58%,#e0307f);--ring:#ffe6f2;--under:#a01a58;--glow:rgba(255,80,160,.95)}.chip2.lv.t5{--ink:#fff;--bg:linear-gradient(#e2c8ff,#a066ff 58%,#6c2ee6);--ring:#f2e8ff;--under:#4a18a8;--glow:rgba(160,100,255,1)}.chip2.lv{height:60px;font-size:28px;padding-right:26px;background:var(--bg);color:var(--ink);box-shadow:0 0 0 4px var(--ring),0 5px 0 var(--under),0 0 30px var(--glow)}
.chip2.lv b{font-size:32px}
.chip2.lv .ic.ok{box-shadow:0 0 0 3px #fff}
.chip2.max{box-shadow:0 0 0 3px #d8c2ff,0 0 22px rgba(160,100,255,.8),0 6px 12px rgba(0,0,0,.25)}
.chip2.lost{background:rgba(70,60,90,.72)}
.chip2 .ic.no{background:linear-gradient(#ff8a8a,#ff3b3b);box-shadow:0 0 0 3px #ffd0d0}
.nx i.t2{}.nx i.t3{}.nx i.t4{}.nx i.t5{}.my{top:92px !important} .hud{top:118px !important} .chips{top:228px !important}
.chatb{top:90px !important;width:115px !important;height:115px !important}
.chatb svg{width:70px !important;height:70px !important}
.chatb .n{font-size:26px !important;height:44px !important;min-width:52px !important;top:-10px !important;right:-16px !important}