:root{--bg:#fff8f1;--ink:#2b2234;--mut:#6b6070;--pri:#e8613c;--pri2:#f59e0b;--teal:#0f9d8a;--blue:#3b6fd8;--card:#fff;--line:#f0e2d6;--g:#22a06b;--y:#f2b705;--r:#e5484d;--shadow:0 6px 18px rgba(120,60,20,.10)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Rubik","Heebo","Assistant","Noto Sans Hebrew","Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.55}
a{color:var(--blue)}
.top{position:sticky;top:0;z-index:20;background:linear-gradient(90deg,#e8613c,#f59e0b);color:#fff;display:flex;align-items:center;gap:8px;padding:8px 12px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.top .home{background:rgba(255,255,255,.22);border:0;color:#fff;font:inherit;font-weight:700;border-radius:12px;min-height:44px;padding:0 14px;cursor:pointer}
.top h1{font-size:1.02rem;margin:0;flex:1;line-height:1.2}
main{max-width:980px;margin:0 auto;padding:14px 14px 30px}
.hero{background:linear-gradient(135deg,#fff 0%,#ffe9d9 100%);border-radius:24px;padding:22px 18px;box-shadow:var(--shadow);margin-bottom:16px;position:relative;overflow:hidden}
.hero h2{font-size:1.75rem;margin:0 0 6px;line-height:1.2}
.hero p{margin:0 0 6px;color:var(--mut)}
.hero .big{font-size:3rem;position:absolute;left:14px;top:10px;opacity:.9}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:14px 12px;text-align:center;font:inherit;color:inherit;cursor:pointer;box-shadow:var(--shadow);min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none}
.tile:active{transform:scale(.98)}
.tile .e{font-size:2.1rem;line-height:1}
.tile b{font-size:1.02rem}
.tile small{color:var(--mut);font-size:.82rem;line-height:1.3}
.tile.wide{grid-column:1/-1;min-height:84px;flex-direction:row;gap:12px;background:linear-gradient(90deg,#fff,#e9f7f4);border-color:#cdeee7}
.card{background:var(--card);border-radius:20px;padding:16px;box-shadow:var(--shadow);margin:0 0 14px;border:1px solid var(--line)}
.card h3{margin:0 0 8px;font-size:1.2rem}
h2.sec{font-size:1.45rem;margin:6px 0 10px}
.lead{color:var(--mut);margin-top:-4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:16px;min-height:52px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer;background:var(--pri);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.12);text-decoration:none}
.btn.sec{background:#fff;color:var(--ink);border:2px solid var(--line)}
.btn.teal{background:var(--teal)}.btn.blue{background:var(--blue)}
.btn:disabled{opacity:.5}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row.c{justify-content:center}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #3b6fd8;outline-offset:2px}
/* plan */
.time{display:inline-block;background:#ffe3d3;color:#a8401c;font-weight:700;border-radius:10px;padding:1px 9px;font-size:.88rem;margin-inline-start:6px}
.step{border-right:5px solid var(--pri2);padding:6px 12px 6px 4px;margin:10px 0;background:#fffaf4;border-radius:12px}
.step h4{margin:0 0 4px;font-size:1.05rem}
.step p,.step ul{margin:4px 0}
ul{padding-inline-start:22px;margin:6px 0}li{margin:3px 0}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:8px 0}
summary{font-weight:700;cursor:pointer;min-height:32px}
.tabs{display:flex;gap:8px;margin-bottom:10px}
.tabs button{flex:1;min-height:48px;border-radius:14px;border:2px solid var(--line);background:#fff;font:inherit;font-weight:700;cursor:pointer}
.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* game */
.stage{background:#2b2234;color:#fff;border-radius:22px;padding:16px;text-align:center}
.stage .rname{font-size:1.25rem;font-weight:800;margin:0 0 8px}
.stage .rule{font-size:1.15rem;background:rgba(255,255,255,.1);border-radius:14px;padding:12px;margin:8px 0}
.letter{font-size:5rem;font-weight:900;line-height:1;margin:6px 0;color:#ffd166}
.timer{font-size:2.6rem;font-weight:900;font-variant-numeric:tabular-nums}
.timer.low{color:#ff7b7b}
.twist{background:#ffd166;color:#2b2234;border-radius:14px;padding:12px;font-weight:800;font-size:1.1rem;margin:10px 0;animation:shake .5s 2}
.reveal{background:#0f9d8a;border-radius:14px;padding:12px;font-weight:700;margin:10px 0}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.dots{display:flex;gap:6px;justify-content:center;margin-bottom:8px}.dots span{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.25)}.dots span.on{background:#ffd166}
.teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:12px 0}
.team{background:rgba(255,255,255,.08);border-radius:14px;padding:8px}
.team .sc{font-size:2rem;font-weight:900}
.team button{width:48px;height:48px;border-radius:12px;border:0;font-size:1.3rem;font-weight:900;cursor:pointer;margin:0 3px}
.mood{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.mood button{background:#fff;border:0;border-radius:14px;min-width:60px;min-height:54px;font-size:1.5rem;cursor:pointer}
.mood button span{display:block;font-size:.85rem;font-weight:800;color:#2b2234}
.debrief{background:#fff;color:var(--ink);border-radius:16px;padding:12px;text-align:right;margin-top:10px}
.debrief h4{margin:0 0 6px}
/* sort */
.qcard{background:#fff;border:3px solid var(--line);border-radius:20px;padding:18px;font-size:1.2rem;font-weight:700;text-align:center;min-height:120px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.bins{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
@media(min-width:560px){.bins{grid-template-columns:repeat(3,1fr)}}
.bin{min-height:58px;border-radius:16px;border:0;font:inherit;font-weight:800;font-size:1.08rem;cursor:pointer;color:#fff}
.bin.fair{background:var(--g)}.bin.unfair{background:var(--r)}.bin.change{background:#d98a00}
.fb{border-radius:16px;padding:12px 14px;margin-top:12px;font-weight:600}
.fb.ok{background:#e3f6ec;border:2px solid #9fd9bb}.fb.no{background:#fff1e6;border:2px solid #f5c39b}
.prog{height:10px;background:#f1e4d8;border-radius:10px;overflow:hidden;margin:8px 0 12px}.prog i{display:block;height:100%;background:linear-gradient(90deg,#e8613c,#f59e0b);width:0;transition:width .3s}
.score{font-weight:800}
/* dilemma */
.dcard{background:linear-gradient(160deg,#fff,#fff3e8);border-radius:22px;padding:18px;box-shadow:var(--shadow);border:2px solid var(--line);min-height:220px}
.dcard .cat{display:inline-block;background:#2b2234;color:#fff;border-radius:999px;padding:2px 12px;font-size:.9rem;font-weight:700}
.dcard .txt{font-size:1.2rem;font-weight:700;margin:12px 0}
.ans{border-radius:14px;padding:10px 12px;margin-top:8px}
.ans.r{background:#e3f6ec}.ans.n{background:#fde8e8}
/* constitution */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:inherit;cursor:pointer;min-height:44px}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
input[type=text],textarea{width:100%;font:inherit;padding:12px;border-radius:14px;border:2px solid var(--line);background:#fff;min-height:50px}
.mylist{list-style:none;padding:0;margin:8px 0}
.mylist li{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid #cdeee7;border-radius:14px;padding:8px 10px;margin:6px 0}
.mylist li span{flex:1;font-weight:700}
.mylist li button{border:0;background:#fde8e8;border-radius:10px;min-width:44px;min-height:44px;font-size:1.1rem;cursor:pointer}
.warn{background:#fff7d6;border:2px solid #f2d36b;border-radius:12px;padding:8px 12px;margin-top:8px;font-size:.95rem}
canvas.prev{width:100%;max-width:420px;border-radius:14px;box-shadow:var(--shadow);display:block;margin:10px auto}
/* quiz */
.opts{display:grid;gap:8px;margin-top:10px}
.opt{text-align:right;border:2px solid var(--line);background:#fff;border-radius:16px;padding:12px 14px;font:inherit;font-weight:600;cursor:pointer;min-height:54px}
.opt.right{background:#e3f6ec;border-color:#22a06b}.opt.wrong{background:#fde8e8;border-color:#e5484d}
/* spinner */
.wheelwrap{position:relative;width:min(88vw,380px);margin:8px auto}
.wheelwrap canvas{width:100%;height:auto;display:block}
.pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:2.2rem;z-index:2}
.spinq{background:#fff;border-radius:18px;padding:16px;font-size:1.25rem;font-weight:800;text-align:center;box-shadow:var(--shadow);min-height:90px;display:flex;align-items:center;justify-content:center;border:3px solid #ffd166}
/* choice board */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cell{border-radius:14px;padding:8px;font-size:.82rem;line-height:1.35;min-height:130px;border:3px solid;background:#fff;cursor:pointer;text-align:right;font-family:inherit;color:inherit}
.cell.g{border-color:var(--g);background:#effaf4}.cell.y{border-color:var(--y);background:#fffbe8}.cell.r{border-color:var(--r);background:#fff0f0}.cell.c{border-color:#2b2234;background:#2b2234;color:#fff;font-weight:700}
.cell.done{outline:4px solid #3b6fd8}
.cell .lv{font-size:1rem}
@media(min-width:600px){.cell{font-size:.95rem;min-height:150px}}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.9rem;margin:8px 0}
/* files */
.flist a.btn{width:100%;justify-content:flex-start;margin:6px 0;min-height:58px}
/* footer */
footer{text-align:center;padding:16px 10px 24px;color:var(--mut);font-size:.95rem;border-top:1px solid var(--line);margin-top:10px;background:#fff}
footer img{width:46px;height:46px;border-radius:50%;vertical-align:middle;margin-inline-end:8px;object-fit:cover}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#2b2234;color:#fff;border-radius:14px;padding:10px 18px;font-weight:700;z-index:50;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.on{opacity:1}
.hidden{display:none!important}
.center{text-align:center}
.note{font-size:.9rem;color:var(--mut)}
@media(max-width:719px){.grid .tile:last-child{grid-column:1/-1;min-height:84px}}