*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{margin:0;font-family:Rubik,Heebo,Arial,sans-serif;background:#FFF6E8;color:#4A2E1E;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer}
#app{max-width:1240px;margin:0 auto;padding:8px 14px 20px;min-height:100vh;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:10px;min-height:60px}
.back{color:#C85A2E;text-decoration:none;font-weight:700;font-size:16px;white-space:nowrap}
.topinfo{flex:1;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;font-weight:700}
.mute{border:0;background:#fff;border-radius:999px;width:46px;height:46px;font-size:22px;box-shadow:0 3px 0 rgba(0,0,0,.08)}
.logo{width:52px;height:52px}
.pill{background:#fff;border-radius:999px;padding:5px 12px;font-size:15px;box-shadow:0 2px 0 rgba(0,0,0,.06);white-space:nowrap}
.pill.cur{outline:3px solid var(--tc);background:var(--tc);color:#fff}
.pill .dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--tc);margin-left:5px;vertical-align:middle}
.pill.cur .dot{background:#fff}
.scr{display:none;flex:1}
.scr.on{display:block;animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1{font-size:34px;color:#C85A2E;margin:10px 0 6px;text-align:center}
h2{font-size:28px;color:#C85A2E;margin:10px 0 12px;text-align:center}
.sub{color:#8A6E5E;font-size:17px;text-align:center;margin:0 auto 16px;max-width:620px;line-height:1.45}
.modes{display:grid;gap:14px;max-width:760px;margin:0 auto 18px}
@media(min-width:760px){.modes{grid-template-columns:1fr 1fr}}
.mode{border:0;border-radius:24px;padding:22px 16px;color:#fff;text-align:center;box-shadow:0 7px 0 rgba(0,0,0,.14);display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .1s}
.mode:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(0,0,0,.14)}
.mode .big{font-size:52px;line-height:1.1}
.mode b{font-size:25px}
.mode small{font-size:15px;opacity:.95}
.m1{background:linear-gradient(135deg,#E05A8A,#C85A2E)}
.m2{background:linear-gradient(135deg,#2E9C8F,#3D7BD0)}
.teach{max-width:760px;margin:0 auto 10px;background:#fff;border-radius:16px;padding:10px 16px;box-shadow:0 3px 10px rgba(90,58,40,.08);font-size:16px;line-height:1.55}
.teach summary{font-weight:700;font-size:18px;cursor:pointer;padding:4px 0}
.teach a{color:#2E6FB0}
.field{max-width:640px;margin:0 auto 14px}
.lbl{font-weight:700;margin-bottom:6px;font-size:17px}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1 1 0;min-width:70px;border:3px solid #E8D5BF;background:#fff;border-radius:16px;padding:12px 6px;font-size:17px;font-weight:700;color:#4A2E1E}
.seg button.on{background:#4A2E1E;border-color:#4A2E1E;color:#fff}
.seg.avatars button{padding:6px}
.seg.avatars svg{width:64px;height:84px;display:block;margin:0 auto}
.teamnames{max-width:640px;margin:0 auto 10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.teamnames div{background:var(--tc);color:#fff;border-radius:14px;padding:10px;font-weight:700;text-align:center;font-size:17px}
.go{display:block;width:100%;max-width:480px;margin:14px auto 8px;border:0;border-radius:20px;background:#C85A2E;color:#fff;font-size:24px;font-weight:800;padding:18px;box-shadow:0 6px 0 #8E3B1A}
.go:active{transform:translateY(4px);box-shadow:0 2px 0 #8E3B1A}
.go.small{font-size:21px;padding:14px;margin:0}
.link{display:block;margin:4px auto;border:0;background:none;color:#8A6E5E;font-size:17px;text-decoration:underline;padding:10px}
.ghost{border:3px solid #E8D5BF;background:#fff;border-radius:16px;font-size:17px;font-weight:700;padding:12px 10px;color:#4A2E1E}
/* סבב */
.dressgrid{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.stagecol,.wardcol{min-width:0}
@media(min-width:900px){.dressgrid{grid-template-columns:minmax(330px,0.9fr) 1.3fr;align-items:start}}
.sitcard{background:var(--sc,#5B8DEF);color:#fff;border-radius:22px;padding:12px 16px;display:flex;gap:12px;align-items:center;box-shadow:0 6px 0 rgba(0,0,0,.12);position:relative}
.sitcard .sem{font-size:46px;line-height:1}
.sitcard .st{font-size:21px;font-weight:800;line-height:1.2}
.sitcard .sx{font-size:15px;opacity:.95;margin-top:3px;line-height:1.35}
.sitcard .rnd{position:absolute;top:-10px;left:12px;background:#FFD84D;color:#4A2E1E;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:800}
.sitcard .timer{margin:0;font-size:22px;min-width:34px}
.timer{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:800;font-size:20px;margin:8px 0 0}
.tbar{height:10px;border-radius:999px;background:#EBDCCB;overflow:hidden;margin-top:8px}
.tbar i{display:block;height:100%;background:#2E9C8F;width:100%;transition:width 1s linear}
.tbar.low i{background:#E0473A}
.charwrap{display:flex;justify-content:center;margin-top:6px}
.char{position:relative;width:min(230px,58vw);aspect-ratio:2/3;container-type:inline-size}
@media(min-width:900px){.char{width:min(300px,26vw)}}
.charwrap.sm .char{width:min(190px,46vw)}
.char svg{position:absolute;inset:0;width:100%;height:100%}
.char .it{position:absolute;transform:translate(50%,-50%);line-height:1;filter:drop-shadow(0 3px 2px rgba(0,0,0,.18))}
.char .it.fresh{animation:drop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes drop{from{transform:translate(50%,-90%) scale(.4);opacity:0}to{transform:translate(50%,-50%) scale(1);opacity:1}}
.it.head{right:50%;top:9%;font-size:38cqw}
.it.head.face{top:17%;font-size:30cqw}
.it.head.neck{top:37%;font-size:26cqw}
.it.body{right:50%;top:47%;font-size:56cqw}
.it.feet1{right:36%;top:93%;font-size:27cqw}
.it.feet2{right:64%;top:93%;font-size:27cqw;}
.it.feet2 span{display:inline-block;transform:scaleX(-1)}
.it.hand{right:9%;top:57%;font-size:28cqw}
.it.bag{right:91%;top:60%;font-size:28cqw}
.it.pocket{right:66%;top:66%;font-size:16cqw;background:#fff;border-radius:30%;padding:2cqw;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.wardcol{background:#fff;border-radius:22px;padding:10px;box-shadow:0 4px 14px rgba(90,58,40,.1)}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 1 0;min-width:0;border:3px solid #E8D5BF;background:#FFF6E8;border-radius:14px;padding:5px 2px;font-size:13px;font-weight:700;color:#4A2E1E;position:relative}
.tab .te{display:block;font-size:24px}
.tab.on{border-color:#C85A2E;background:#FFE7D6}
.tab.has::after{content:"✓";position:absolute;top:-7px;left:-5px;background:#2E9C8F;color:#fff;border-radius:50%;width:20px;height:20px;font-size:13px;line-height:20px}
.tab.warn::after{content:"!";background:#E0473A}
.wsec{display:none}
.wsec.on{display:block}
.wsec h3{display:none;margin:4px 0;font-size:16px;color:#8A6E5E}
.items{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.item{border:3px solid #F0E3D3;background:#FFFCF7;border-radius:16px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px;font-weight:600;color:#4A2E1E;min-height:84px;justify-content:center;line-height:1.15}
.item .ie{font-size:36px;line-height:1.1}
.item.on{border-color:#2E9C8F;background:#E3F6F3;transform:scale(1.04)}
.dressbtns{display:grid;grid-template-columns:1fr 1fr 2fr;gap:8px;margin-top:10px}
@media(min-width:900px){
 .tabs{display:none}
 .wsec{display:flex;align-items:center;gap:8px;margin-bottom:6px}
 .wsec h3{display:block;width:62px;flex:0 0 62px;text-align:center;margin:0}
 .wsec h3 b{display:block;font-size:24px}
 .items{grid-template-columns:repeat(8,1fr);flex:1;gap:6px}
 .sitcard .sem{font-size:64px}.sitcard .st{font-size:28px}.sitcard .sx{font-size:18px}
 .item{min-height:72px;font-size:12px}
 .item .ie{font-size:32px}
}
/* תוצאה */
.revgrid{display:grid;gap:10px;max-width:900px;margin:0 auto}
@media(min-width:760px){.revgrid{grid-template-columns:260px 1fr;align-items:center}}
.badge{background:linear-gradient(135deg,#FFD84D,#FFB547);border-radius:22px;padding:14px;text-align:center;font-size:24px;font-weight:800;box-shadow:0 6px 0 rgba(0,0,0,.1);animation:pop .5s}
.badge small{display:block;font-size:15px;font-weight:600;margin-top:4px}
.rlist{list-style:none;padding:0;margin:12px 0;display:grid;gap:6px}
.rlist li{background:#fff;border-radius:14px;padding:8px 12px;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:17px;animation:pop .4s both}
.rlist .pt{font-weight:800;min-width:44px;text-align:center;border-radius:999px;padding:2px 8px;direction:ltr}
.pt.p{background:#DDF3E8;color:#1E7A4F}.pt.n{background:#FDE1DE;color:#B4302A}.pt.z{background:#EEE;color:#777}
.rtotal{text-align:center;font-size:22px;font-weight:800}
.extra{background:#FFF0C2;border-radius:14px;padding:10px 12px;font-size:16px;line-height:1.45;margin-top:8px}
/* שאלה */
.qhead{display:flex;justify-content:space-between;align-items:center;max-width:900px;margin:6px auto}
.qtag{background:#4A2E1E;color:#fff;border-radius:999px;padding:6px 14px;font-weight:700}
.qtimer{font-weight:800;font-size:22px;background:#fff;border-radius:999px;padding:4px 14px;min-width:64px;text-align:center}
.qtimer.low{background:#E0473A;color:#fff}
.qtext{max-width:900px;margin:10px auto 14px;background:#fff;border-radius:22px;padding:20px;font-size:26px;font-weight:800;text-align:center;line-height:1.3;box-shadow:0 4px 14px rgba(90,58,40,.1)}
.answers{display:grid;gap:10px;max-width:900px;margin:0 auto}
@media(min-width:760px){.answers{grid-template-columns:1fr 1fr}.qtext{font-size:34px}}
.ans{border:0;border-radius:18px;padding:16px 14px;color:#fff;font-size:21px;font-weight:700;display:flex;align-items:center;gap:12px;text-align:right;box-shadow:0 5px 0 rgba(0,0,0,.15);min-height:70px;line-height:1.25}
.ans .sh{font-size:26px;flex:0 0 auto}
.ans.a0{background:#E0473A}.ans.a1{background:#3D7BD0}.ans.a2{background:#E9A23B}.ans.a3{background:#2E9C8F}
.ans.dim{opacity:.35}
.ans.right{outline:5px solid #1E7A4F;opacity:1}
.ans.right::after{content:"✔";margin-right:auto;font-size:26px}
.ans.wrong::after{content:"✖";margin-right:auto;font-size:26px}
.qex{max-width:900px;margin:12px auto 0;font-size:18px;line-height:1.5;text-align:center;min-height:10px}
.qex b{font-size:22px}
.scoreline{text-align:center;font-weight:800;font-size:20px;margin-top:8px}
/* סוף */
.podium{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:20px auto 10px;max-width:700px;min-height:260px}
.pod{flex:1;max-width:180px;text-align:center}
.pod .pb{border-radius:16px 16px 0 0;background:var(--tc);color:#fff;font-size:34px;font-weight:900;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;animation:grow 1s cubic-bezier(.3,1.3,.5,1) both}
@keyframes grow{from{height:0!important}}
.pod .pn{font-weight:800;font-size:18px;margin-bottom:6px}
.pod .ps{font-size:22px;font-weight:900}
.endbadges{max-width:700px;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.endbadges span{background:#fff;border-radius:999px;padding:6px 12px;font-size:15px;font-weight:600;box-shadow:0 2px 0 rgba(0,0,0,.06)}
.solo-score{font-size:60px;font-weight:900;text-align:center;color:#C85A2E}
/* נכון/לא נכון */
.tfhead{display:flex;justify-content:space-between;align-items:center;max-width:760px;margin:6px auto;font-weight:800;font-size:18px}
.tfbar{max-width:760px;margin:0 auto;height:10px;background:#EBDCCB;border-radius:999px;overflow:hidden}
.tfbar i{display:block;height:100%;width:100%;background:#2E9C8F}
.tfcard{max-width:760px;margin:16px auto;background:#fff;border-radius:26px;padding:28px 20px;min-height:170px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:28px;font-weight:800;line-height:1.35;box-shadow:0 8px 20px rgba(90,58,40,.14);border:6px solid #FFD84D;animation:pop .35s}
@media(min-width:760px){.tfcard{font-size:38px;min-height:220px}}
.tfbtns{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:760px;margin:0 auto}
.tfb{border:0;border-radius:22px;font-size:26px;font-weight:800;padding:18px 8px;color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.15);line-height:1.3}
.tfb.yes{background:#2E9C8F}.tfb.no{background:#E0473A}
.tfb:disabled{opacity:.5}
.tfb.picked{outline:5px solid #4A2E1E}
.tfscore{text-align:center;font-size:22px;line-height:1.6}
.tfscore b{display:block;font-size:64px;color:#C85A2E}
footer{text-align:center;color:#8A6E5E;font-size:14px;margin-top:18px;padding-bottom:8px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50;width:100vw;height:100vh}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}