:root{--ink:#1d1b3a;--bg1:#fff6e0;--bg2:#e7f5ff;--card:#fff;--brand:#7048e8;--fs:17px}
*{box-sizing:border-box}
html{font-size:var(--fs)}
body{margin:0;font-family:system-ui,"Segoe UI","Arial Hebrew",Arial,sans-serif;color:var(--ink);background:linear-gradient(160deg,#fff3bf 0%,#ffe3e3 30%,#e5dbff 65%,#d0ebff 100%) fixed;line-height:1.6;min-height:100vh}
a{color:#4c2fb5}
:focus-visible{outline:4px solid #f76707;outline-offset:3px;border-radius:8px}
.skip{position:absolute;right:-999px;top:0;background:#000;color:#fff;padding:.6rem 1rem;z-index:99}.skip:focus{right:1rem}
header.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.93);backdrop-filter:blur(6px);box-shadow:0 3px 0 #0001}
.bar{display:flex;align-items:center;gap:.6rem;max-width:1180px;margin:auto;padding:.45rem .8rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:900;text-decoration:none;color:var(--ink);font-size:1.05rem}
.brand img{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 2px 0 #0002}
.tools{margin-inline-start:auto;display:flex;gap:.35rem}
.tools button{border:0;background:#f1f3f5;border-radius:12px;min-width:44px;min-height:44px;font-size:1rem;font-weight:800;cursor:pointer;color:var(--ink)}
.tools button:hover{background:#e5dbff}
nav.main{max-width:1180px;margin:auto;padding:0 .6rem .45rem;display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:thin}
nav.main a{flex:none;text-decoration:none;color:var(--ink);font-weight:800;background:#f8f9fa;border:2px solid #e9ecef;border-radius:99px;padding:.35rem .8rem;min-height:44px;display:flex;align-items:center;font-size:.95rem}
nav.main a[aria-current=page]{background:var(--brand);color:#fff;border-color:var(--brand)}
main{max-width:1180px;margin:auto;padding:1rem .8rem 2rem}
.crumbs{font-size:.9rem;margin:.2rem 0 .8rem}.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;padding:0;margin:0}
.crumbs li+li::before{content:"‹";margin-inline-end:.3rem;color:#868e96}
.hero{background:linear-gradient(135deg,#5f3dc4,#a61e4d 55%,#c2410c);text-shadow:0 1px 2px #0005;color:#fff;border-radius:28px;padding:1.6rem 1.2rem;box-shadow:0 8px 0 #0002;position:relative;overflow:hidden}
.hero h1{font-size:clamp(1.6rem,5vw,2.6rem);margin:.2rem 0 .4rem;line-height:1.2}
.hero p{font-size:1.1rem;margin:.2rem 0 1rem;max-width:760px}
.hero .float{position:absolute;font-size:2.4rem;opacity:.35;pointer-events:none}
.btns{display:flex;flex-wrap:wrap;gap:.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:52px;padding:.6rem 1.1rem;border-radius:18px;border:0;font-weight:900;font-size:1.05rem;text-decoration:none;cursor:pointer;background:#fff;color:var(--ink);box-shadow:0 5px 0 #0003;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #0003}
.btn.p{background:#ffd43b}.btn.v{background:#7048e8;color:#fff}.btn.g{background:#2b8a3e;color:#fff}.btn.r{background:#c2255c;color:#fff}.btn.b{background:#1864ab;color:#fff}.btn.sm{min-height:44px;font-size:.95rem;padding:.4rem .8rem}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tile{background:#fff;border-radius:24px;padding:1.1rem;box-shadow:0 6px 0 #0001,0 1px 8px #0001;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:.3rem;border-top:10px solid var(--c,#7048e8)}
.tile .em{font-size:2.4rem;line-height:1}
.tile h2,.tile h3{margin:.2rem 0;font-size:1.25rem}
.tile p{margin:0;color:#495057}
a.tile:hover{transform:translateY(-3px)}
section.box{background:#fffffff0;border-radius:24px;padding:1.1rem 1.1rem;margin:1rem 0;box-shadow:0 4px 0 #0001}
h1.pg{font-size:clamp(1.5rem,4.5vw,2.2rem);margin:.2rem 0 .6rem}
h2{font-size:1.35rem;margin:.4rem 0 .6rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 .8rem}
.chip{border:2px solid var(--c,#ced4da);background:#fff;color:var(--ink);border-radius:99px;padding:.3rem .8rem;font-weight:800;cursor:pointer;min-height:44px;font-size:.95rem}
.chip[aria-pressed=true]{background:var(--c,#7048e8);color:#fff}
.kgrid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.kcard{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 5px 0 #0002;display:flex;flex-direction:column;border:3px solid var(--c)}
.kcard .kh{background:var(--c);color:#fff;padding:.45rem .8rem;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:.9rem}
.kcard .kb{padding:.7rem .9rem 1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.kcard .ke{font-size:2.2rem;line-height:1}
.kcard h3{margin:0;font-size:1.2rem}
.kcard .kt{margin:0;font-size:1.02rem}
.kcard .ko{margin-top:auto;font-size:.9rem;background:#f8f9fa;border-radius:10px;padding:.25rem .6rem}
.kcard .kid{font-size:.8rem;opacity:.85}
.stage{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:900px){.stage{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.big .kcard{min-height:320px}.big .kcard h3{font-size:1.7rem}.big .kcard .kt{font-size:1.35rem}.big .kcard .ke{font-size:3.6rem}
.flip{animation:flip .5s ease}
@keyframes flip{0%{transform:rotateY(90deg) scale(.9);opacity:.2}100%{transform:none;opacity:1}}
.back{min-height:320px;border-radius:22px;background:repeating-linear-gradient(45deg,#7048e8 0 18px,#845ef7 18px 36px);display:grid;place-items:center;color:#fff;font-size:4rem;box-shadow:0 5px 0 #0002}
.timer{font-size:3rem;font-weight:900;text-align:center;font-variant-numeric:tabular-nums;background:#212529;color:#ffd43b;border-radius:20px;padding:.3rem;margin:.4rem 0}
.timer.end{background:#c92a2a;color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.04)}}
label.sel{display:flex;flex-direction:column;font-weight:800;gap:.25rem}
select{font-size:1rem;min-height:48px;border-radius:14px;border:2px solid #ced4da;padding:.3rem .6rem;background:#fff;color:var(--ink);font-weight:700}
.xo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.xo .cell{position:relative;min-height:170px;border-radius:18px;border:3px solid var(--c);background:#fff;padding:.5rem;text-align:right;cursor:pointer;font:inherit;color:var(--ink);display:flex;flex-direction:column;gap:.2rem}
.xo .cell .e{font-size:1.7rem}.xo .cell b{font-size:1rem}.xo .cell span{font-size:.88rem}
.xo .cell .fm{font-size:.75rem;background:var(--c);color:#fff;border-radius:99px;padding:0 .5rem;align-self:flex-start}
.xo .cell[aria-pressed=true]::after{content:"✔";position:absolute;inset:0;display:grid;place-items:center;font-size:5rem;color:#2b8a3ecc;background:#ebfbeeaa;border-radius:15px}
.xo .cell.center{background:#fff9db}
@media(max-width:600px){.xo .cell{min-height:150px;padding:.35rem}.xo .cell span{font-size:.8rem}.xo .cell b{font-size:.9rem}}
.menu h3{margin:.8rem 0 .4rem}
.note{background:#fff9db;border:2px dashed #f59f00;border-radius:16px;padding:.6rem .9rem;margin:.6rem 0}
.help{background:#e7f5ff;border:2px solid #74c0fc;border-radius:16px;padding:.6rem .9rem}
.story{white-space:pre-line;font-size:1.12rem;line-height:1.9;background:#fff;border-radius:18px;padding:1rem 1.1rem;border-right:8px solid var(--c,#7048e8)}
table{border-collapse:collapse;width:100%;background:#fff;border-radius:12px;overflow:hidden;font-size:.95rem}
th,td{border:1px solid #dee2e6;padding:.5rem;text-align:right;vertical-align:top}th{background:#f3f0ff}
.tblwrap{overflow-x:auto}
.files{display:grid;gap:.6rem}
.file{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;background:#fff;border-radius:16px;padding:.6rem .8rem;box-shadow:0 3px 0 #0001}
.file .t{font-weight:800;flex:1 1 220px}
.tag{font-size:.8rem;font-weight:800;border-radius:99px;padding:.1rem .55rem;background:#f1f3f5}
.tag.who-t{background:#212529;color:#ffd43b}.tag.who-s{background:#d0ebff;color:#0b4a85}.tag.fmt{background:#ffe8cc;color:#7a3300}
.pn{display:flex;justify-content:space-between;gap:.6rem;margin-top:1.4rem;flex-wrap:wrap}
footer{text-align:center;padding:1.2rem .8rem 2rem;font-weight:700}
footer img{width:56px;height:56px;border-radius:50%;vertical-align:middle;background:#fff}
.path{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.35rem;direction:rtl}
.sq{position:relative;aspect-ratio:1;border-radius:14px;background:var(--c);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;font-size:.85rem;box-shadow:0 3px 0 #0003;text-align:center;padding:2px;overflow:hidden;line-height:1.15;word-break:break-word}
.sq .n{position:absolute;top:2px;right:6px;font-size:.7rem;opacity:.9}.sq .ic{font-size:1.4rem}
.sq .tok{position:absolute;bottom:2px;left:2px;right:2px;font-size:1.05rem;line-height:1;display:flex;flex-wrap:wrap;justify-content:center}
.teams{display:flex;flex-wrap:wrap;gap:.5rem}
.team{background:#fff;border-radius:14px;padding:.4rem .7rem;font-weight:800;border:3px solid #dee2e6}
.team.now{border-color:#f76707;box-shadow:0 0 0 3px #ffd8a8}
.dice{font-size:3.2rem;line-height:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media print{header.top,nav,.no-print,footer .tools,.pn,.crumbs{display:none!important}body{background:#fff}main{padding:0}.xo .cell{min-height:58mm;break-inside:avoid}section.box{box-shadow:none}}

@media(max-width:600px){.sq .lb{display:none}.sq .ic{font-size:1.25rem}}
.xo .cell{overflow-wrap:anywhere}
.kgrid{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}.grid{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}

#app:focus{outline:none}