@font-face{font-family:"Fredoka";src:url(fonts/fredoka-heb.woff2) format("woff2");font-weight:300 700;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+200C-2010,U+20AA,U+25CC;font-display:swap}
@font-face{font-family:"NotoHeb";src:url(fonts/notosanshebrew-heb.woff2) format("woff2");font-weight:100 900;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+200C-2010,U+20AA,U+25CC;font-display:swap}
@font-face{font-family:"RubikHeb";src:url(fonts/rubik-heb.woff2) format("woff2");font-weight:300 900;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+200C-2010,U+20AA,U+25CC;font-display:swap}
@font-face{font-family:"RubikLat";src:url(fonts/rubik-lat.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{--coral:#ff6b4a;--sun:#ffc23c;--teal:#12b5a6;--berry:#e6407a;--sky:#3b82f6;--grape:#8b5cf6;--lime:#7cc243;--ink:#2b2140;--muted:#6b6280;--bg:#fff7ec;--card:#fff;--line:#f0e2cf;
--ui:"RubikLat","RubikHeb","NotoHeb",system-ui,sans-serif;--head:"RubikLat","Fredoka","RubikHeb",system-ui,sans-serif;--content:"RubikLat","NotoHeb","RubikHeb",system-ui,sans-serif;
--good:#16a34a;--bad:#e11d48}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:var(--ui);color:var(--ink);background:var(--bg);background-image:radial-gradient(circle at 8% 0,#ffdcc2 0,transparent 38%),radial-gradient(circle at 96% 18%,#ffe7a1 0,transparent 34%),radial-gradient(circle at 50% 100%,#ffd9e6 0,transparent 40%);background-attachment:fixed;min-height:100vh}
[hidden]{display:none!important}
button{font-family:inherit;cursor:pointer;color:inherit}
input,textarea,select{font-family:inherit;color:var(--ink)}
.c{font-family:var(--content)}
/* top bar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;background:linear-gradient(90deg,var(--coral),#ff8a3d 55%,var(--sun));color:#fff;box-shadow:0 2px 12px rgba(200,80,30,.25)}
.brandbtn{display:flex;align-items:center;gap:8px;background:none;border:0;color:#fff;font:700 20px var(--head);padding:4px;min-width:0}
.apptitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo-dot{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.25);font-size:21px;flex:none}
.topacts{display:flex;gap:8px}
.iconbtn{width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.25);color:#fff;font:800 19px var(--ui);display:grid;place-items:center}
.iconbtn:hover{background:rgba(255,255,255,.38)}
/* home */
#home{max-width:1240px;margin:0 auto;padding:14px 16px 40px}
.hero{position:relative;text-align:center;padding:20px 8px 4px}
.hero-deco{position:absolute;inset:0;pointer-events:none}
.hero-deco span{position:absolute;font-size:34px;opacity:.9;animation:bob 4s ease-in-out infinite}
.hero-deco span:nth-child(1){right:4%;top:14px}.hero-deco span:nth-child(2){left:5%;top:24px;animation-delay:-1s}
.hero-deco span:nth-child(3){right:13%;bottom:0;font-size:28px;animation-delay:-2s}.hero-deco span:nth-child(4){left:14%;bottom:4px;font-size:28px;animation-delay:-3s}
.hero-deco span:nth-child(5){left:30%;top:0;font-size:22px;animation-delay:-1.5s}
@keyframes bob{50%{transform:translateY(-8px) rotate(6deg)}}
.hero h1{font:700 clamp(30px,5.2vw,52px)/1.12 var(--head);margin:0 0 10px;background:linear-gradient(90deg,var(--berry),var(--coral),#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 30px}
.lead{font-size:clamp(16px,2.2vw,19px);color:var(--muted);max-width:740px;margin:0 auto 14px;line-height:1.55}
.steps{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px;align-items:center;font-weight:600}
.steps span:not(.arr){background:#fff;border:2px solid var(--line);padding:6px 13px;border-radius:999px}
.steps .arr{color:var(--coral);font-weight:800}
.filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px 0 16px}
.filters button{border:2px solid var(--line);background:#fff;border-radius:999px;padding:8px 15px;font-weight:600;font-size:15px}
.filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.gcard{position:relative;text-align:right;border:0;border-radius:24px;padding:16px 16px 14px;background:#fff;box-shadow:0 5px 0 var(--c2),0 10px 24px rgba(120,60,20,.10);transition:transform .15s,box-shadow .15s;overflow:hidden;display:flex;flex-direction:column;gap:6px;min-height:156px}
.gcard:hover,.gcard:focus-visible{transform:translateY(-4px);box-shadow:0 9px 0 var(--c2),0 16px 28px rgba(120,60,20,.16);outline:none}
.gcard .ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:32px;background:var(--c1);position:relative;z-index:1}
.gcard h3{margin:4px 0 0;font:700 22px var(--head);position:relative;z-index:1}
.gcard p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.45;position:relative;z-index:1}
.gcard .tag{position:absolute;top:14px;left:14px;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--c1);color:var(--c3);z-index:1}
.gcard::after{content:"";position:absolute;left:-34px;bottom:-34px;width:120px;height:120px;border-radius:50%;background:var(--c1);opacity:.6}
.homefoot{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:34px;color:var(--muted);font-size:15px;font-weight:600}
.homefoot img{height:46px}
/* setup */
#setup,#lobby{max-width:1240px;margin:0 auto;padding:12px 16px 110px}
.shead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 0 12px}
.shead .ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:32px;background:var(--c1);box-shadow:0 4px 0 var(--c2);flex:none}
.shead h2{font:700 clamp(24px,3.4vw,32px) var(--head);margin:0}
.shead p{margin:2px 0 0;color:var(--muted);font-size:15px}
.shead .grow{flex:1;min-width:180px}
.btn{border:2px solid var(--line);background:#fff;border-radius:14px;padding:9px 14px;font-weight:700;font-size:15px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;justify-content:center;transition:transform .1s}
.btn:hover{border-color:#e7c9a5}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,#ff7a55,var(--coral));border-color:#e5532f;color:#fff;box-shadow:0 3px 0 #d4471f}
.btn.teal{background:linear-gradient(180deg,#1fcab9,var(--teal));border-color:#0e9488;color:#fff;box-shadow:0 3px 0 #0b7d73}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px;font-size:14px;border-radius:12px}
.btn.big{font-size:21px;padding:14px 26px;border-radius:18px}
.sbody{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.9fr);gap:16px;align-items:start}
.panel{background:#fff;border-radius:22px;box-shadow:0 4px 18px rgba(120,60,20,.08);padding:16px;border:2px solid #fbeedd}
.panel h3{font:700 19px var(--head);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.fld{display:block;margin:0 0 12px}
.fld>span{display:block;font-weight:700;font-size:15px;margin-bottom:5px}
.fld input[type=text],.fld select,.fld input[type=number]{width:100%;border:2px solid var(--line);border-radius:12px;padding:9px 11px;font-size:16px;background:#fffdf9}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:16px 52%,10px 52%;background-size:6px 6px;background-repeat:no-repeat;padding-left:30px}
textarea.list{width:100%;min-height:270px;border:2px solid var(--line);border-radius:14px;padding:11px 13px;font:500 18px/1.65 var(--content);background:#fffdf9;resize:vertical}
textarea.list:focus,.fld input:focus,.fld select:focus{outline:none;border-color:#ffb08f;box-shadow:0 0 0 4px #ffe3d6}
.hint{font-size:14px;color:var(--muted);line-height:1.5;margin:6px 0 0}
.hint b{color:var(--ink)}
.listbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.count{font-size:14px;font-weight:700;color:var(--c3,var(--coral));margin-inline-start:auto;align-self:center}
.chk{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;margin:0 0 12px;cursor:pointer}
.chk input{width:22px;height:22px;accent-color:var(--coral)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:2px solid var(--line);background:#fff;border-radius:12px;padding:7px 12px;font-weight:700;font-size:15px}
.seg button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.teamrows{display:grid;gap:8px}
.teamrow{display:flex;align-items:center;gap:8px}
.teamrow .dot{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:16px;color:#fff;font-weight:800}
.teamrow input{flex:1;border:2px solid var(--line);border-radius:12px;padding:8px 10px;font-size:16px;min-width:0}
.playrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.playrow .btn.big{flex:1}
.warn{background:#fff4d6;border:2px solid #ffd27a;color:#8a5a00;border-radius:12px;padding:8px 12px;font-weight:600;font-size:14.5px;margin:8px 0 0}
.mbar{display:none}
.sharedbanner{background:linear-gradient(90deg,#e8fbf8,#fff7d6);border:2px solid #bdeee8;border-radius:16px;padding:10px 14px;font-weight:600;margin-bottom:12px}
/* lobby */
.lobbycard{max-width:620px;margin:6vh auto 0;text-align:center;background:#fff;border-radius:30px;padding:30px 24px;box-shadow:0 8px 0 var(--c2),0 18px 40px rgba(120,60,20,.14)}
.lobbycard .ic{width:96px;height:96px;font-size:56px;border-radius:28px;margin:0 auto 10px;display:grid;place-items:center;background:var(--c1)}
.lobbycard h2{font:700 clamp(26px,5vw,38px) var(--head);margin:6px 0}
.lobbycard p{color:var(--muted);font-size:17px;margin:4px 0 18px}
/* play */
#play{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:var(--pbg,#fff3e2);background-image:radial-gradient(circle at 0 0,rgba(255,255,255,.7),transparent 40%),radial-gradient(circle at 100% 100%,rgba(255,255,255,.5),transparent 45%);height:100dvh;overflow:hidden}
.pbar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:linear-gradient(90deg,var(--coral),#ff8a3d 55%,var(--sun));color:#fff;flex:none;min-height:52px;box-shadow:0 2px 10px rgba(200,80,30,.25);z-index:3}
.pbtn{width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.25);color:#fff;font:800 19px var(--ui);display:grid;place-items:center;flex:none}
.pbtn:hover{background:rgba(255,255,255,.4)}
.ptitle{display:flex;align-items:center;gap:6px;font:700 20px var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.ptitle #pName{overflow:hidden;text-overflow:ellipsis}
.pacts{display:flex;gap:6px;margin-inline-start:auto}
.scores{display:flex;gap:8px;justify-content:center;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.scores2{display:none}
.chip{display:flex;align-items:center;gap:6px;background:#fff;color:var(--ink);border-radius:14px;padding:3px 5px 3px 10px;font-weight:700;box-shadow:0 2px 0 rgba(0,0,0,.12);border:3px solid transparent;transition:transform .2s,border-color .2s;flex:none}
.chip .em{font-size:20px}
.chip .nm{font-size:17px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .sc{min-width:40px;text-align:center;font:800 23px var(--ui);color:#fff;background:var(--tc);border-radius:10px;padding:2px 7px}
.chip .adj{display:flex;flex-direction:column;gap:1px}
.chip .adj button{border:0;background:#f3ece4;border-radius:6px;width:20px;height:16px;font-size:13px;line-height:1;padding:0;font-weight:800}
.chip.turn{border-color:var(--tc);transform:scale(1.06);box-shadow:0 0 0 3px rgba(255,255,255,.7),0 3px 0 rgba(0,0,0,.15)}
.chip.bump .sc{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.45)}}
.stage{flex:1;min-height:0;position:relative;container-type:size;overflow:hidden}
.turnlabel{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:6px 16px;font:700 clamp(15px,3.2cqmin,26px) var(--head);box-shadow:0 3px 0 rgba(0,0,0,.08);border:3px solid var(--tc,#ddd)}
/* overlay / modal */
.ov{position:fixed;inset:0;z-index:100;background:rgba(43,33,64,.55);backdrop-filter:blur(3px);display:grid;place-items:center;padding:14px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{background:#fff;border-radius:28px;max-width:min(860px,96vw);width:100%;max-height:92dvh;overflow:auto;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:pop .28s cubic-bezier(.2,1.4,.4,1);position:relative}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.modal h3{font:700 24px var(--head);margin:0 0 10px}
.modal .x{position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:12px;border:0;background:#f5ede4;font-size:18px;font-weight:800}
.qcard{text-align:center;padding:10px 4px}
.qcard .qtag{display:inline-block;font-weight:800;font-size:clamp(14px,2vw,18px);padding:4px 14px;border-radius:999px;background:var(--c1,#ffe3d6);color:var(--c3,#c2410c);margin-bottom:12px}
.qtext{font:700 clamp(26px,5.4vw,58px)/1.35 var(--content);margin:4px 0 14px;word-break:break-word}
.atext{font:700 clamp(22px,4.2vw,44px)/1.35 var(--content);color:var(--good);background:#ecfdf3;border:3px dashed #86efac;border-radius:20px;padding:10px 16px;margin:0 auto 14px;max-width:96%;animation:pop .3s}
.qbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.qbtns .btn{font-size:clamp(17px,2.4vw,22px);padding:12px 22px;border-radius:18px}
.btn.yes{background:linear-gradient(180deg,#34d07a,var(--good));border-color:#128a3e;color:#fff;box-shadow:0 3px 0 #0f7a36}
.btn.no{background:linear-gradient(180deg,#fb7185,var(--bad));border-color:#be123c;color:#fff;box-shadow:0 3px 0 #9f1239}
.helpsteps{display:grid;gap:12px;margin:8px 0 16px}
.hstep{display:flex;gap:12px;align-items:flex-start;background:#fff8ef;border-radius:18px;padding:12px 14px;border:2px solid #fbe7cf}
.hstep .n{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:24px;background:var(--c1,#ffe3d6)}
.hstep p{margin:0;font-size:17px;line-height:1.5}
.hstep b{display:block;font:700 18px var(--head);margin-bottom:2px}
.sharebox{display:flex;gap:8px;margin:10px 0}
.sharebox input{flex:1;min-width:0;border:2px solid var(--line);border-radius:12px;padding:10px;font-size:14px;direction:ltr;background:#fffdf9}
.savedlist{display:grid;gap:8px;margin:8px 0}
.saveditem{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:14px;padding:8px 10px}
.saveditem .t{flex:1;font-weight:700}
.saveditem .d{font-size:13px;color:var(--muted);font-weight:500}
/* toast */
.toast{position:fixed;z-index:200;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:16px;font-weight:700;font-size:17px;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:toastin .3s;max-width:90vw;text-align:center}
@keyframes toastin{from{transform:translate(-50%,20px);opacity:0}}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:300;width:100%;height:100%}
/* big end screen */
.endbox{position:absolute;inset:0;display:grid;place-items:center;padding:16px;z-index:5;background:rgba(255,247,236,.72);backdrop-filter:blur(2px);animation:fade .3s}
.endcard{background:#fff;border-radius:30px;padding:clamp(18px,4cqmin,40px);text-align:center;box-shadow:0 10px 0 var(--c2,#ffb08f),0 20px 50px rgba(0,0,0,.18);width:min(560px,94cqw);animation:pop .4s cubic-bezier(.2,1.4,.4,1);max-height:94cqh;overflow:auto}
.endcard .big{font-size:clamp(46px,13cqmin,100px);line-height:1}
.endcard h2{font:700 clamp(26px,7cqmin,52px)/1.2 var(--head);margin:8px 0}
.endcard p{font-size:clamp(16px,3.4cqmin,24px);color:var(--muted);margin:4px 0 14px}
.endcard .rank{display:grid;gap:6px;margin:6px auto 16px;max-width:380px}
.endcard .rank div{display:flex;justify-content:space-between;gap:10px;font-weight:700;font-size:clamp(16px,3.2cqmin,22px);padding:6px 12px;border-radius:12px;background:#fff6ec}
.endcard .rank div:first-child{background:#fff1c2}
.anim-shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.anim-pop{animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
/* responsive */
@media (max-width:860px){
 .sbody{grid-template-columns:1fr}
 .mbar{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:30;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);backdrop-filter:blur(6px);box-shadow:0 -4px 16px rgba(0,0,0,.08)}
 .mbar .btn{flex:1;font-size:17px;padding:12px}
 .desk-only{display:none!important}
 textarea.list{min-height:200px}
}
@media (max-width:640px){
 .pbar{gap:5px;padding:5px 6px;min-height:48px}
 .pbtn{width:36px;height:36px;font-size:17px;border-radius:11px}
 .ptitle{font-size:16px}
 .ptitle #pName{display:none}
 .scores{display:none}
 .scores2{display:flex;gap:6px;justify-content:center;padding:6px;flex:none;flex-wrap:wrap}
 .scores2:empty{display:none}
 .scores2 .chip .nm{max-width:90px;font-size:14px}
 .scores2 .chip .sc{font-size:18px;min-width:30px}
 .apptitle{font-size:17px}
 .gcard{min-height:0}
 .grid{grid-template-columns:1fr 1fr;gap:12px}
 .gcard{padding:12px 12px 12px}
 .gcard h3{font-size:18px}
 .gcard p{font-size:13px}
 .gcard .ic{width:48px;height:48px;font-size:27px;border-radius:15px}
 .gcard .tag{display:none}
 .hero-deco{display:none}
 .hero h1{padding:0}
}
@media (max-height:500px) and (orientation:landscape){
 .pbar{min-height:44px;padding:3px 8px}
 .pbtn{width:34px;height:34px;font-size:16px}
 .scores{display:flex}
 .scores2{display:none!important}
 .ptitle #pName{display:inline}
 .chip .em{display:none}
 .chip .nm{font-size:13px;max-width:90px}
 .chip .sc{font-size:17px}
 .chip .adj{display:none}
}
@media (max-width:640px) and (max-height:500px){.ptitle #pName{display:none}}

/* ===== games: shared ===== */
.stage .c{font-family:var(--content)}
/* ttt */
.ttt-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqmin;padding:2cqmin}
.ttt-top{display:flex;align-items:center;gap:10px}
.ttt-sym{font:900 clamp(22px,5cqmin,44px) var(--ui)}
.ttt-board{--s:min(94cqw,calc(100cqh - 76px));width:var(--s);height:var(--s);display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:calc(var(--s)*.025);padding:calc(var(--s)*.025);background:linear-gradient(135deg,#7fb0f5,#a98bf5);border-radius:calc(var(--s)*.06);box-shadow:0 8px 0 #5b7fd1,0 18px 40px rgba(40,60,140,.22)}
.ttt-cell{border:0;border-radius:calc(var(--s)*.035);background:var(--t);display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:inset 0 -5px 0 rgba(0,0,0,.07);transition:transform .12s;padding:6%}
.ttt-cell:not(.done):hover{transform:scale(1.04)}
.tt-num{font:800 calc(var(--s)/var(--n)*.38) var(--ui);color:#b7a9d6}
.tt-txt{font-weight:700;line-height:1.25;width:100%;height:100%;display:grid;place-items:center;text-align:center;overflow:hidden;word-break:break-word}
.mk{width:82%;height:82%}
.mk path,.mk circle{fill:none;stroke-width:13;stroke-linecap:round}
.mk-x path{stroke:#3b82f6;stroke-dasharray:80;stroke-dashoffset:80;animation:draw .35s forwards}
.mk-x path+path{animation-delay:.2s}
.mk-o circle{stroke:#ff6b4a;stroke-dasharray:180;stroke-dashoffset:180;animation:draw .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ttt-cell.win{background:#fff4b8;animation:winp .7s infinite alternate}
@keyframes winp{to{transform:scale(1.06)}}
/* bomb */
.bomb-wrap{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;align-items:center;padding:2cqmin;gap:1cqmin}
.bomb-card{width:min(92cqw,1300px);min-height:clamp(90px,24cqh,240px);background:#fff;border-radius:26px;box-shadow:0 6px 0 #ffb08f,0 14px 30px rgba(160,60,20,.15);display:grid;cursor:pointer}
.bc-in{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 18px;text-align:center}
.bc-tag{font-weight:800;color:#c2410c;background:#ffe3d6;border-radius:999px;padding:3px 12px;font-size:clamp(13px,2.2cqmin,18px)}
.bc-text{font-weight:700;line-height:1.3;margin-top:8px;max-height:20cqh;overflow:hidden;width:100%;font-size:40px}
.bc-a{color:var(--good);font-weight:700;font-size:clamp(18px,4cqmin,36px)}
.bomb-card.flipin{animation:flipin .35s}
@keyframes flipin{from{transform:rotateX(70deg);opacity:.2}}
.bomb{border:0;background:none;padding:0;height:min(100%,62cqw);aspect-ratio:200/220;min-height:0;filter:drop-shadow(0 12px 18px rgba(43,33,64,.3));transition:transform .1s}
.bomb svg{width:100%;height:100%;display:block}
.bomb .spark{opacity:0}
.bomb.lit .spark{opacity:1;animation:spark .18s infinite alternate;transform-origin:158px 18px}
@keyframes spark{to{transform:scale(1.5)}}
.bomb.beat{animation:beat .18s}
@keyframes beat{50%{transform:scale(1.05)}}
.bomb:not(.lit){animation:bob 3s ease-in-out infinite}
.bomb-ctrl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.bomb-ctrl .btn.big{min-width:min(60cqw,320px);font-size:clamp(20px,4cqmin,30px)}
.bomb-count{font-weight:700;color:var(--muted)}
.boom{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:16px;z-index:4;pointer-events:none}
.boom .btn{pointer-events:auto;animation:pop .4s}
.boom-burst{position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,#fff 0,#ffe066 18%,#ff8a3d 36%,rgba(255,107,74,.0) 62%);animation:burst 1.1s ease-out forwards}
@keyframes burst{0%{transform:scale(.2);opacity:1}60%{opacity:1}100%{transform:scale(1.6);opacity:.0}}
.boom-txt{position:relative;font:900 clamp(60px,22cqmin,200px) var(--head);color:#ff4d2e;text-shadow:3px 3px 0 #fff,-3px 3px 0 #fff,3px -3px 0 #fff,-3px -3px 0 #fff,0 4px 0 #fff,0 -4px 0 #fff,4px 0 0 #fff,-4px 0 0 #fff,0 12px 0 #2b2140;animation:boomtxt .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes boomtxt{from{transform:scale(.2) rotate(-20deg)}}
.stage.boomed .bomb{animation:shake .5s;opacity:.25}
.stage.boomed .bomb-card{box-shadow:0 6px 0 #ff4d2e,0 14px 30px rgba(160,60,20,.2)}
/* wheel */
.wheel-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqmin;padding:2cqmin}
.wheel-wrap.land{flex-direction:row;gap:4cqw}
.wheel-box{position:relative;flex:none}
.wheel-box canvas{display:block;cursor:pointer}
.wheel-ptr{position:absolute;top:-6px;left:50%;width:34px;height:44px;margin-left:-17px;background:var(--ink);clip-path:polygon(50% 100%,0 0,100% 0);filter:drop-shadow(0 3px 2px rgba(0,0,0,.3));transform-origin:50% 0;z-index:2}
.wheel-ptr::after{content:"";position:absolute;inset:5px 8px 14px;background:#ffc23c;clip-path:polygon(50% 100%,0 0,100% 0)}
.wheel-ptr.flick{animation:flick .12s}
@keyframes flick{50%{transform:rotate(-14deg)}}
.wheel-hub{position:absolute;top:50%;left:50%;width:22%;height:22%;transform:translate(-50%,-50%);border-radius:50%;border:5px solid #fff;background:linear-gradient(180deg,#ff7a55,#ff6b4a);color:#fff;font:800 clamp(13px,3cqmin,22px) var(--head);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.wheel-side{display:flex;flex-direction:column;align-items:center;gap:12px}
.wheel-left{color:var(--muted);font-weight:700}
.wheel-side .btn.big{font-size:clamp(18px,3.6cqmin,40px)}
/* cards */
.cards-wrap{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:1.5cqmin;padding:2cqmin;justify-items:center}
.cards-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
.cards-cnt{font-weight:800;color:var(--c3);background:#fff;border-radius:999px;padding:6px 14px;font-size:clamp(14px,2.6cqmin,20px)}
.cards-main{position:relative;width:100%;display:flex;align-items:center;justify-content:center;gap:3cqw;min-height:0}
.deck{position:relative;border:0;background:none;width:clamp(90px,22cqmin,220px);aspect-ratio:3/4;flex:none;transition:width .3s}
.cards-main:not(:has(.fcard:not([hidden]))) .deck{width:clamp(130px,34cqmin,300px)}
.dk{position:absolute;inset:0;border-radius:16px;background:linear-gradient(135deg,#8b5cf6,#e6407a);border:4px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.dk.d3{transform:rotate(-8deg) translate(-6px,4px)}.dk.d2{transform:rotate(-3deg) translate(-3px,2px)}
.dk.d1{display:grid;place-items:center;color:#fff;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 10px,transparent 10px 20px),linear-gradient(135deg,#8b5cf6,#e6407a)}
.dk.d1 b{font:900 clamp(34px,9cqmin,90px) var(--ui);color:rgba(255,255,255,.9);font-style:normal}
.dk.d1 i{position:absolute;bottom:6px;font-style:normal;font-weight:800;background:rgba(0,0,0,.25);border-radius:999px;padding:1px 10px}
.deck.empty .dk{opacity:.25}
.fcard{perspective:1600px;width:min(70cqw,calc(62cqh*1.5),1300px);aspect-ratio:3/2;cursor:pointer}
.fc-in{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.fcard.flipped .fc-in{transform:rotateY(180deg)}
.fcard.dealt{animation:deal .45s cubic-bezier(.2,1.2,.4,1)}
@keyframes deal{from{transform:translateX(30%) rotate(-12deg) scale(.4);opacity:0}}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:28px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5% 6%;box-shadow:0 8px 0 #a98bf5,0 18px 40px rgba(80,40,160,.2);border:5px solid #fff;overflow:hidden}
.fc-front{background:linear-gradient(160deg,#fff,#f6f1ff)}
.fc-back{transform:rotateY(180deg);background:linear-gradient(160deg,#fff,#ecfdf5);box-shadow:0 8px 0 #5fd3a0,0 18px 40px rgba(20,120,80,.2)}
.fc-tag{position:absolute;top:4%;font-weight:800;font-size:clamp(12px,2.2cqmin,18px);color:var(--c3);background:var(--c1);padding:3px 12px;border-radius:999px;max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-back .fc-tag{color:#0f766e;background:#d1fae5}
.fc-text{font-weight:800;text-align:center;line-height:1.3;width:100%;max-height:72%;display:grid;place-items:center;overflow:hidden;word-break:break-word}
.fc-hint{position:absolute;bottom:4%;color:var(--muted);font-size:clamp(12px,2cqmin,16px);font-weight:600}
.cards-ctrl{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;min-height:54px}
.cards-ctrl .btn{font-size:clamp(17px,3cqmin,24px);padding:11px 20px;border-radius:16px}
@container (max-aspect-ratio:1/1){.cards-main{flex-direction:column}.deck{width:clamp(60px,12cqh,110px)}.fcard{width:min(94cqw,calc(50cqh*1.5))}}
/* memory */
.mem-wrap{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:1.2cqmin;padding:1.6cqmin}
.mem-top{display:flex;justify-content:center}
.mem-grid{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;min-height:0;min-width:0;overflow:hidden}
.mc{border:0;background:none;padding:0;perspective:900px;min-width:0;min-height:0}
.mc-in{display:block;position:relative;width:100%;height:100%;transition:transform .45s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.mc.open .mc-in,.mc.got .mc-in{transform:rotateY(180deg)}
.mc-back,.mc-front{position:absolute;inset:0;border-radius:14%/16%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;overflow:hidden}
.mc-back{background:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 8px,transparent 8px 16px),linear-gradient(135deg,#12b5a6,#3b82f6);border:4px solid #fff;box-shadow:0 4px 0 #0e8f84,0 6px 14px rgba(0,0,0,.12)}
.mc-back span{font:900 clamp(18px,5cqmin,48px) var(--ui);color:rgba(255,255,255,.9)}
.mc:hover .mc-back{filter:brightness(1.08)}
.mc-front{transform:rotateY(180deg);background:#fff;border:4px solid #d8f5ef;box-shadow:0 4px 0 #b8e8de;padding:6%}
.mc-t{font-weight:800;text-align:center;line-height:1.2;width:100%;height:100%;display:grid;place-items:center;word-break:break-word;overflow:hidden}
.mc-front.emo .mc-t{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;line-height:1}
.mc.got .mc-front{border-color:var(--tc);box-shadow:0 4px 0 var(--tc),0 0 0 3px var(--tc) inset;background:#fffdf3}
.mc.got .mc-in{animation:gotp .5s}
@keyframes gotp{50%{transform:rotateY(180deg) scale(1.1)}}

/* jeopardy */
.jp-wrap{position:absolute;inset:0;padding:1.6cqmin;display:flex}
.jp-board{flex:1;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:minmax(0,.8fr) repeat(var(--rows),minmax(0,1fr));gap:1.1cqmin}
.jp-cat{background:linear-gradient(180deg,#3730a3,#4f46e5);color:#fff;border-radius:14px;display:grid;place-items:center;padding:4px 6px;text-align:center;overflow:hidden;box-shadow:0 4px 0 #26206e}
.jp-cat span{font:700 22px/1.15 var(--head);width:100%;max-height:100%;overflow:hidden;display:block}
.jp-cell{border:0;border-radius:14px;background:linear-gradient(180deg,#ffd45c,#ffc23c);color:#7a3e00;font:900 clamp(18px,6cqmin,60px) var(--ui);box-shadow:0 5px 0 #d99a12;transition:transform .12s;text-shadow:0 2px 0 rgba(255,255,255,.5)}
.jp-cell:not(:disabled):hover{transform:translateY(-3px) scale(1.03)}
.jp-cell.opening{animation:winp .4s infinite alternate}
.jp-cell:disabled{cursor:default}
.jp-cell.used{background:#ece7f5;color:#b9b0cc;box-shadow:0 3px 0 #d5cde6}
.jp-cell.won{background:var(--tc);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.2);font-size:clamp(18px,5cqmin,48px)}
/* race */
.rc-wrap{position:absolute;inset:0;display:flex;gap:2cqmin;padding:1.6cqmin;align-items:stretch}
.rc-board{position:relative;display:grid;flex:none;margin:auto;align-self:center}
.rc-side{width:clamp(170px,26cqw,400px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqmin;flex:none}
.sq{position:relative;margin:3%;border-radius:22%;background:var(--b);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.06);border:2px solid #fff;overflow:hidden}
.sq .n{font:800 calc(var(--sq)*.24) var(--ui);color:#6b6280;line-height:1}
.sq .ic{font-size:calc(var(--sq)*.3);line-height:1.1}
.sq.start,.sq.end{background:linear-gradient(135deg,#ffc23c,#ff8a3d)}
.sq.start .n,.sq.end .n{color:#fff;font-size:calc(var(--sq)*.17);font-family:var(--head)}
.sq.star{background:#fff4b8}.sq.rocket{background:#dbeafe}.sq.back{background:#f3e8ff}
.tokens{position:absolute;top:0;right:0;width:0;height:0}
.tok{position:absolute;top:0;right:0;border-radius:50%;background:#fff;border:4px solid var(--tc);display:grid;place-items:center;box-shadow:0 4px 8px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.3,1.4,.5,1);z-index:2}
.rc-msg{font-weight:700;text-align:center;font-size:clamp(15px,2.8cqmin,22px);min-height:2.6em}
.rc-side .btn.big{font-size:clamp(16px,3cqmin,24px);padding:12px 16px}
.dice{border:0;background:none;width:clamp(70px,16cqmin,130px);aspect-ratio:1;perspective:600px;padding:0}
.cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,1.4,.5,1);transform:rotateX(-20deg) rotateY(25deg)}
.cube.rolling{animation:roll .7s linear}
@keyframes roll{to{transform:rotateX(700deg) rotateY(520deg)}}
.face{position:absolute;inset:0;background:#fff;border-radius:18%;border:3px solid #f0e2cf;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:14%;box-shadow:inset 0 0 12px rgba(0,0,0,.08)}
.face i{width:70%;height:70%;margin:auto;border-radius:50%;background:#2b2140}
.f1{transform:translateZ(calc(var(--d,1)*50%))}
.cube{--h:calc(clamp(70px,16cqmin,130px)/2)}
.f1{transform:rotateY(0) translateZ(var(--h))}.f2{transform:rotateY(90deg) translateZ(var(--h))}.f3{transform:rotateX(90deg) translateZ(var(--h))}
.f4{transform:rotateX(-90deg) translateZ(var(--h))}.f5{transform:rotateY(-90deg) translateZ(var(--h))}.f6{transform:rotateY(180deg) translateZ(var(--h))}
.f1 i{grid-area:2/2}
.f2 i:nth-child(1){grid-area:1/1}.f2 i:nth-child(2){grid-area:3/3}
.f3 i:nth-child(1){grid-area:1/1}.f3 i:nth-child(2){grid-area:2/2}.f3 i:nth-child(3){grid-area:3/3}
.f4 i:nth-child(1){grid-area:1/1}.f4 i:nth-child(2){grid-area:1/3}.f4 i:nth-child(3){grid-area:3/1}.f4 i:nth-child(4){grid-area:3/3}
.f5 i:nth-child(1){grid-area:1/1}.f5 i:nth-child(2){grid-area:1/3}.f5 i:nth-child(3){grid-area:2/2}.f5 i:nth-child(4){grid-area:3/1}.f5 i:nth-child(5){grid-area:3/3}
.f6 i:nth-child(1){grid-area:1/1}.f6 i:nth-child(2){grid-area:2/1}.f6 i:nth-child(3){grid-area:3/1}.f6 i:nth-child(4){grid-area:1/3}.f6 i:nth-child(5){grid-area:2/3}.f6 i:nth-child(6){grid-area:3/3}
.f1 i{background:#e6407a}
.cube.show1{transform:rotateX(0) rotateY(0)}.cube.show2{transform:rotateY(-90deg)}.cube.show3{transform:rotateX(-90deg)}
.cube.show4{transform:rotateX(90deg)}.cube.show5{transform:rotateY(90deg)}.cube.show6{transform:rotateY(180deg)}
@container (max-aspect-ratio:1/1){.rc-wrap{flex-direction:column}.rc-side{width:100%;flex-direction:row;flex-wrap:wrap;gap:10px}.rc-msg{min-height:0;width:100%;order:5}.dice{width:clamp(56px,10cqh,96px)}.cube{--h:calc(clamp(56px,10cqh,96px)/2)}}
/* mc + tf */
.mq-wrap{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:1.4cqmin;padding:2cqmin;max-width:1300px;margin:0 auto}
.mq-top{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.mq-prog{font-weight:800;background:#fff;border-radius:999px;padding:6px 14px;color:var(--c3);font-size:clamp(14px,2.6cqmin,20px)}
.mq-streak{font-weight:800;font-size:clamp(16px,3cqmin,26px)}
.mq-q{background:#fff;border-radius:28px;box-shadow:0 6px 0 var(--c2),0 14px 34px rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2cqmin 3cqmin;min-height:0;overflow:hidden}
.mq-text{font-weight:800;text-align:center;line-height:1.3;width:100%;max-height:100%;overflow:hidden}
.mq-why{font-weight:600;color:var(--good);font-size:clamp(15px,3cqmin,26px);text-align:center;margin-top:6px}
.mq-why:empty{display:none}
.mq-bar{height:12px;background:rgba(0,0,0,.08);border-radius:99px;overflow:hidden}
.mq-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--teal),var(--lime));border-radius:99px;transition:width .05s linear}
.mq-opts{display:grid;grid-template-columns:1fr 1fr;gap:1.4cqmin}
.mq-o{border:0;border-radius:20px;background:var(--oc);color:#fff;display:flex;align-items:center;gap:12px;padding:1.6cqmin 2cqmin;min-height:clamp(54px,12cqh,120px);box-shadow:0 5px 0 rgba(0,0,0,.2);text-align:right;transition:transform .12s,opacity .2s,filter .2s}
.mq-o:hover{transform:translateY(-2px);filter:brightness(1.05)}
.mq-o .sh{font-size:clamp(18px,4cqmin,34px);opacity:.85;flex:none}
.mq-o .t{font-weight:800;flex:1;line-height:1.25;max-height:100%;overflow:hidden;font-size:28px}
.mq-o.right{outline:6px solid #fff;box-shadow:0 0 0 10px #16a34a,0 5px 0 rgba(0,0,0,.2);animation:winp .4s 2 alternate}
.mq-o.wrong{animation:shake .45s;outline:6px solid #fff;box-shadow:0 0 0 10px #e11d48,0 5px 0 rgba(0,0,0,.2)}
.mq-o.wrong .sh::after{content:' ✗'}
.mq-o.dim{opacity:.35}
.tf .mq-o{justify-content:center;min-height:clamp(70px,20cqh,200px)}
.tf .mq-o .t{flex:none;font:900 clamp(26px,7cqmin,64px) var(--head)}
.tf .mq-o .sh{font-size:clamp(30px,8cqmin,70px);opacity:1}
.mq-next{display:flex;justify-content:center;min-height:50px}
.mq-next .btn{font-size:clamp(18px,3cqmin,24px);padding:10px 26px}
@container (max-width:560px){.quiz .mq-opts{grid-template-columns:1fr}.quiz .mq-o{min-height:52px}}

/* word search */
.ws-wrap{position:absolute;inset:0;display:flex;gap:2cqmin;padding:1.6cqmin}
.ws-gridbox{flex:1;min-width:0;min-height:0;display:grid;place-items:center}
.ws-grid{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);background:#fff;border-radius:18px;box-shadow:0 6px 0 #ffb08f,0 14px 30px rgba(160,60,20,.14);touch-action:none;user-select:none;-webkit-user-select:none;padding:0}
.ws-c{display:grid;place-items:center;font-weight:700;font-family:var(--head);color:#2b2140;position:relative;z-index:2;pointer-events:none;line-height:1}
.ws-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.ws-svg .fl{opacity:.42}
.ws-svg .fl{animation:fade .3s}
.ws-side{width:clamp(190px,28cqw,380px);display:flex;flex-direction:column;gap:10px;align-items:stretch;justify-content:center;flex:none}
.ws-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-content:flex-start;overflow:auto}
.ws-w{background:#fff;border-radius:12px;padding:6px 13px;font-weight:700;font-size:clamp(16px,3.6cqmin,32px);box-shadow:0 2px 0 #f0d8c0;transition:all .3s}
.ws-w.got{text-decoration:line-through;text-decoration-thickness:3px;color:#fff;background:var(--tc);box-shadow:none;opacity:.85}
.ws-cnt{text-align:center;font-weight:800;color:var(--c3)}
.ws-turn{display:flex;justify-content:center}
.nobank .ws-bank{display:none}
@container (max-aspect-ratio:1/1){.ws-wrap{flex-direction:column}.ws-side{width:100%;flex:0 0 auto;max-height:34cqh}.ws-w{font-size:clamp(14px,3.6cqw,20px);padding:4px 10px}}
/* scramble + shared bits */
.sc-wrap,.se-wrap,.bl-wrap,.mt-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqmin;padding:2cqmin}
.sc-top,.se-top,.bl-top,.mt-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.sc-prog{font-weight:800;background:#fff;border-radius:999px;padding:6px 14px;color:var(--c3);font-size:clamp(14px,2.6cqmin,20px)}
.sc-hint,.bl-hint{font-weight:700;font-size:clamp(18px,4.2cqmin,36px);text-align:center;background:#fff;border-radius:18px;padding:8px 18px;box-shadow:0 4px 0 var(--c2);max-width:94cqw}
.sc-hint:empty,.bl-hint:empty{display:none}
.sc-slots{display:flex;gap:calc(var(--sz)*.12);justify-content:center;flex-wrap:nowrap}
.sc-slot{width:var(--sz);height:calc(var(--sz)*1.12);border:3px dashed #e3c9a0;border-radius:calc(var(--sz)*.2);background:rgba(255,255,255,.7);font:800 calc(var(--sz)*.58) var(--head);display:grid;place-items:center;padding:0;line-height:1}
.sc-slot.full{border-style:solid;border-color:#fbbf24;background:#fff;box-shadow:0 4px 0 #f0b429}
.sc-slot.locked{border-color:#a3e635;background:#f7fee7;box-shadow:0 4px 0 #84cc16}
.sc-slot.ok{background:#dcfce7;border-color:#22c55e;box-shadow:0 4px 0 #16a34a;animation:okp .5s both}
@keyframes okp{50%{transform:translateY(-14px) scale(1.08)}}
.sc-gap{width:calc(var(--sz)*.45)}
.sc-tiles{display:flex;gap:calc(var(--sz)*.16);justify-content:center;flex-wrap:wrap;max-width:94cqw}
.sc-tile{width:var(--sz);height:var(--sz);border:0;border-radius:calc(var(--sz)*.22);background:linear-gradient(180deg,#ffd45c,#ffc23c);font:800 calc(var(--sz)*.56) var(--head);color:#5a3200;box-shadow:0 5px 0 #d99a12;display:grid;place-items:center;padding:0;line-height:1;transition:transform .12s,opacity .2s}
.sc-tile:hover{transform:translateY(-3px)}
.sc-tile.used{opacity:.18;transform:scale(.85);pointer-events:none}
.sc-full{font-weight:800;color:var(--good);font-size:clamp(24px,7cqmin,64px);min-height:1.2em;line-height:1.4}
.sc-full:empty{display:none}
.sc-ctrl{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sc-ctrl .btn{font-size:clamp(16px,2.8cqmin,22px);padding:10px 18px}
.sc-ctrl .btn:disabled{opacity:.45}
/* sentences */
.se-wrap{--fs:30px}
.se-ans{width:min(96cqw,1500px);min-height:calc(var(--fs)*2.6);background:#fff;border-radius:22px;border:3px dashed #9fd6f7;display:flex;flex-wrap:wrap;gap:calc(var(--fs)*.3);padding:calc(var(--fs)*.4);align-content:center;justify-content:center;position:relative;transition:border-color .3s,background .3s}
.se-ans.ok{border:3px solid #22c55e;background:#f0fdf4}
.se-ph{position:absolute;inset:0;display:grid;place-items:center;color:#9fb6c8;font-weight:700;font-size:calc(var(--fs)*.65);pointer-events:none}
.se-pool{width:min(96cqw,1500px);min-height:calc(var(--fs)*2.2);display:flex;flex-wrap:wrap;gap:calc(var(--fs)*.35);justify-content:center;align-content:center;padding:calc(var(--fs)*.3)}
.se-t{border:0;border-radius:calc(var(--fs)*.4);background:#fff;font-weight:800;font-size:var(--fs);padding:calc(var(--fs)*.22) calc(var(--fs)*.5);box-shadow:0 4px 0 #7dd3fc,0 6px 12px rgba(3,105,161,.12);touch-action:none;user-select:none;-webkit-user-select:none;line-height:1.45;color:var(--ink)}
.se-pool .se-t{background:linear-gradient(180deg,#e0f2fe,#bae6fd)}
.se-t.ph{opacity:.3}
.se-t.ghost{position:fixed;z-index:400;pointer-events:none;transform:scale(1.08) rotate(-3deg);box-shadow:0 14px 30px rgba(0,0,0,.25);margin:0}
.se-t.wrong{box-shadow:0 4px 0 #e11d48;background:#fff1f2}
.se-t.hinted{box-shadow:0 4px 0 #84cc16;background:#f7fee7}
.se-ans.ok .se-t{box-shadow:0 4px 0 #22c55e}
/* matching */
.mt-area{position:relative;flex:1;width:min(96cqw,1500px);display:flex;justify-content:space-between;gap:12cqw;min-height:0}
.mt-col{flex:1;display:flex;flex-direction:column;gap:1.4cqmin;justify-content:center;z-index:2;min-width:0}
.mt-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.mt-svg .ml{animation:fade .3s}
.mt-it{flex:1;max-height:150px;border:3px solid #fff;border-radius:18px;background:#fff;display:flex;align-items:center;gap:10px;padding:6px 14px;font-weight:800;box-shadow:0 4px 0 #f9c6df;touch-action:none;min-height:0;transition:transform .12s,background .2s;color:var(--ink)}
.mt-it span{flex:1;text-align:center;line-height:1.2;overflow:hidden;max-height:100%}
.mt-it .dot{width:16px;height:16px;border-radius:50%;background:#f9a8d4;flex:none;box-shadow:0 0 0 4px #fff,0 0 0 6px #f9a8d4}
.mt-it.sel{background:#fff7d6;border-color:#ffc23c;transform:scale(1.03)}
.mt-it.sel .dot{background:#ffc23c}
.mt-it.done{border-color:var(--tc);background:#fff;box-shadow:0 4px 0 var(--tc);opacity:.92}
.mt-it.done .dot{background:var(--tc);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--tc)}
.mt-it.bad{background:#ffe4e6;border-color:#e11d48}
/* balloon */
.bl-main{flex:1;width:100%;display:flex;gap:2cqw;align-items:stretch;min-height:0}
.bl-sky{position:relative;width:min(34cqw,300px);flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#dff1ff,#fff6fb);border-radius:26px;overflow:hidden;box-shadow:inset 0 0 0 3px #fff}
.bl-sky::before{content:"☁️";position:absolute;top:12%;right:10%;font-size:clamp(22px,5cqmin,44px);opacity:.8;animation:bob 6s infinite}
.bl-sky::after{content:"☁️";position:absolute;top:40%;left:8%;font-size:clamp(18px,4cqmin,34px);opacity:.6;animation:bob 7s infinite -2s}
.bl-svg{height:min(78%,60cqh);max-width:90%;transition:transform 1.4s cubic-bezier(.5,0,.6,1)}
.bl-ball{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.bl-sky.puff .bl-svg{animation:shake .4s}
.bl-sky.fly .bl-svg{transform:translateY(-140%)}
.bl-sky.flat .bl-svg{transform:translateY(22%) rotate(-12deg)}
.bl-air{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap;justify-content:center;padding:0 6px}
.bl-air i{width:clamp(10px,2cqmin,16px);height:clamp(10px,2cqmin,16px);border-radius:50%;background:#ff4d6d;transition:all .3s}
.bl-air i.gone{background:#e5dbe5;transform:scale(.7)}
.bl-hint{box-shadow:0 4px 0 #fca5a5}
.bl-play{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8cqmin;min-width:0}
.bl-word{display:flex;gap:calc(var(--sz)*.14);justify-content:center;direction:rtl}
.bl-c{width:var(--sz);height:calc(var(--sz)*1.15);border-bottom:5px solid #2b2140;display:grid;place-items:center;font:800 calc(var(--sz)*.66) var(--head);line-height:1}
.bl-c.open{animation:okp .4s}
.bl-c.sym{border-bottom-color:transparent}
.bl-c.reveal{color:#e11d48}
.bl-gap{width:calc(var(--sz)*.5)}
.bl-full{font-weight:800;color:var(--good);font-size:clamp(22px,6cqmin,56px);line-height:1.4;min-height:1.4em}
.bl-full:empty{visibility:hidden}
.bl-kb{display:grid;grid-template-columns:repeat(11,1fr);gap:clamp(4px,.8cqmin,12px);width:min(100%,max(760px,120cqh))}
.bl-k{aspect-ratio:1/1.05;border:0;border-radius:12px;background:#fff;font:800 clamp(16px,3.8cqmin,44px) var(--head);box-shadow:0 4px 0 #f3c4c4;padding:0;color:var(--ink);transition:transform .1s}
.bl-k:hover:not(:disabled){transform:translateY(-2px)}
.bl-k.hit{background:#22c55e;color:#fff;box-shadow:0 3px 0 #15803d}
.bl-k.miss{background:#e5dbe5;color:#a497a8;box-shadow:none}
.bl-k:disabled{cursor:default}
@container (max-aspect-ratio:1/1){.bl-main{flex-direction:column}.bl-sky{width:100%;height:28cqh;flex:none}.bl-svg{height:92%}.bl-kb{grid-template-columns:repeat(8,1fr)}.bl-k{aspect-ratio:1.15/1}}
/* picker */
.pk-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqmin;padding:2cqmin}
.pk-stage{width:min(92cqw,1400px);height:min(42cqh,560px);background:#fff;border-radius:34px;display:grid;place-items:center;box-shadow:0 8px 0 #93c5fd,0 18px 44px rgba(29,78,216,.15);position:relative;overflow:hidden;padding:2cqmin}
.pk-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,#dbeafe,transparent 60%)}
.pk-name{position:relative;font-weight:900;color:var(--ink);text-align:center;line-height:1.15;width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.pk-stage.done{box-shadow:0 8px 0 #ffc23c,0 0 0 8px #fff3c4,0 18px 44px rgba(200,120,0,.25)}
.pk-stage.done .pk-name{animation:pop .5s cubic-bezier(.2,1.6,.4,1);color:#1d4ed8}
.pk-ctrl{display:flex;gap:12px}
.pk-ctrl .btn.big{font-size:clamp(20px,4cqmin,30px)}
.pk-info{font-weight:700;color:var(--muted)}
.pk-list{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:94cqw;max-height:18cqh;overflow:auto}
.pk-list span{background:#fff;border-radius:999px;padding:4px 12px;font-weight:700;box-shadow:0 2px 0 #cfe0fb}
.pk-list span.last{background:#1d4ed8;color:#fff}
.pk-groups{position:absolute;inset:0;display:flex;flex-direction:column;gap:1.6cqmin;padding:1.6cqmin}
.pk-gtop{display:flex;justify-content:center}
.pk-ggrid{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,44cqw),1fr));gap:1.4cqmin;min-height:0;overflow:auto}
.pk-g{background:#fff;border-radius:22px;border-top:10px solid var(--tc);box-shadow:0 4px 14px rgba(0,0,0,.08);padding:10px 14px;animation:pop .45s both;display:flex;flex-direction:column;gap:2px;min-height:0;overflow:hidden}
.pk-g h4{margin:0 0 4px;font:700 clamp(17px,3cqmin,26px) var(--head);color:var(--tc)}
.pk-g div{font-weight:700;line-height:1.35}
/* timer */
.tm-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5cqw;padding:2cqmin}
.tm-ring{position:relative;width:min(80cqh,56cqw);aspect-ratio:1}
.tm-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.tm-bg{fill:#fff;stroke:#e6f7f4;stroke-width:16}
.tm-fg{fill:none;stroke:url(#x);stroke:#12b5a6;stroke-width:16;stroke-linecap:round;stroke-dasharray:1000;transition:stroke-dashoffset .1s linear,stroke .3s}
.tm-time{position:absolute;inset:0;display:grid;place-items:center;font:800 min(17cqh,12cqw) var(--ui);color:var(--ink);font-variant-numeric:tabular-nums;direction:ltr}
.tm-sub{position:absolute;bottom:22%;left:0;right:0;text-align:center;font:700 min(4.4cqh,3.2cqw) var(--head);color:var(--muted)}
.tm-side{display:flex;flex-direction:column;gap:2cqmin;align-items:center}
.tm-presets,.tm-adj,.tm-main{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tm-main .btn.big{font-size:clamp(18px,3.4cqmin,28px);min-width:150px}
.tm-wrap.warn .tm-fg{stroke:#e11d48}
.tm-wrap.warn .tm-time{color:#e11d48;animation:winp .5s infinite alternate}
.tm-wrap.done .tm-ring{animation:flash .8s 4}
@keyframes flash{50%{transform:scale(1.05);filter:drop-shadow(0 0 30px #ffc23c)}}
.tm-wrap.done .tm-sub{color:#e11d48;font-size:min(6cqh,4cqw)}
@container (max-aspect-ratio:1/1){.tm-wrap{flex-direction:column}.tm-ring{width:min(86cqw,52cqh)}.tm-time{font-size:min(20cqw,12cqh)}.tm-sub{font-size:min(5cqw,3cqh)}}
.modal h3{padding-inline-end:44px}

.tm-presets .btn,.tm-adj .btn{font-size:clamp(15px,2.6cqmin,24px);padding:8px 14px}

.sbody .panel{border-top:6px solid var(--c2)}
.shead{background:linear-gradient(90deg,var(--c1),rgba(255,255,255,.6));border-radius:24px;padding:12px 14px;margin:4px 0 14px}
@media (max-width:860px){.toast{bottom:92px}}
@media (max-width:640px){
 .shead{gap:10px;padding:10px 12px}
 .shead #backBtn{order:-2;width:100%;justify-content:flex-start;padding:4px 2px;border:0;font-size:14px}
 .shead .ic{width:48px;height:48px;font-size:27px}
 .shead p{font-size:14px}
 .shead #sHelp{padding:7px 10px;font-size:14px}
 .steps{gap:4px}.steps span:not(.arr){font-size:13px;padding:5px 9px}
 .lead{font-size:15.5px}
}

.stage .btn{font-size:clamp(15px,2.5cqmin,30px);padding:.55em 1.05em;border-radius:.75em}
.stage .btn.big{font-size:clamp(18px,3.4cqmin,40px)}
.stage .btn.small{font-size:clamp(14px,2.2cqmin,26px)}
.stage .turnlabel{font-size:clamp(15px,2.8cqmin,32px)}
.stage .sc-prog,.stage .mq-prog,.stage .cards-cnt{font-size:clamp(14px,2.4cqmin,28px)}
@media (min-width:1600px) and (min-height:900px){
 .pbar{min-height:66px;padding:8px 14px}.pbtn{width:50px;height:50px;font-size:23px;border-radius:14px}.ptitle{font-size:26px}
 .chip{padding:4px 7px 4px 12px}.chip .em{font-size:26px}.chip .nm{font-size:22px;max-width:240px}.chip .sc{font-size:30px;min-width:52px}.chip .adj button{width:24px;height:20px;font-size:15px}
 .qtext{font-size:64px}.atext{font-size:48px}.modal{max-width:1100px}.qbtns .btn{font-size:26px}
}

.toplogo{height:40px;background:#fff;border-radius:12px;padding:2px 8px}
@media (max-width:640px){.toplogo{height:34px;padding:2px 5px}}

@media (max-width:640px){#topbar .apptitle{display:none}}