:root{--ink:#1f2340;--bg1:#7ee0ff;--bg2:#ffd6f5;--card:#fff;--r:22px;--fs:17px}
*{box-sizing:border-box}
html{font-size:var(--fs)}
body{margin:0;font-family:"Rubik","Heebo","Assistant","Segoe UI",system-ui,Arial,sans-serif;color:var(--ink);direction:rtl;
background:radial-gradient(circle at 10% 10%,#fff6 0 120px,transparent 121px),radial-gradient(circle at 90% 30%,#fff5 0 90px,transparent 91px),linear-gradient(160deg,var(--bg1),#b5f0c9 45%,var(--bg2));background-attachment:fixed;min-height:100vh;line-height:1.55}
a{color:#1b4fd8}
.skip{position:absolute;right:-999px;top:0;background:#000;color:#fff;padding:10px 16px;z-index:99;border-radius:0 0 12px 12px}
.skip:focus{right:12px}
:focus-visible{outline:4px solid #ffbf00;outline-offset:3px}
header.top{position:sticky;top:0;z-index:20;background:linear-gradient(90deg,#5b2bd9,#d6336c 55%,#ff922b);color:#fff;box-shadow:0 4px 0 #0002}
.topin{max-width:1100px;margin:auto;display:flex;align-items:center;gap:10px;padding:8px 12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:900;font-size:1.05rem;text-shadow:0 2px 0 #0003}
.brand .dice{font-size:1.6rem;display:inline-block;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px) rotate(-8deg)}}
nav.main{display:flex;gap:6px;flex-wrap:wrap;margin-inline-start:auto}
nav.main a,nav.main button{background:#ffffff26;color:#fff;border:2px solid #fff6;border-radius:999px;padding:6px 12px;font:inherit;font-weight:700;font-size:.9rem;text-decoration:none;cursor:pointer;min-height:40px;display:inline-flex;align-items:center;gap:4px}
nav.main a[aria-current=page]{background:#fff;color:#5b2bd9}
main{max-width:1100px;margin:auto;padding:14px 12px 40px}
.crumbs{font-size:.88rem;margin:4px 0 12px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.crumbs a{background:#fffc;border-radius:999px;padding:3px 10px;text-decoration:none;font-weight:700;color:#3b3f6b}
.crumbs span.sep{opacity:.6}
.crumbs .here{font-weight:800}
.hero{border-radius:30px;padding:26px 20px;color:#fff;position:relative;overflow:hidden;box-shadow:0 10px 0 #0002,0 18px 30px #0002;margin-bottom:18px}
.hero h1{margin:0 0 6px;font-size:clamp(1.7rem,6vw,2.7rem);line-height:1.15;text-shadow:0 3px 0 #0003}
.hero p{margin:0;font-size:1.05rem;max-width:720px}
.hero .big{position:absolute;left:14px;bottom:-8px;font-size:clamp(4rem,16vw,8rem);opacity:.9;filter:drop-shadow(0 8px 0 #0002);animation:bob 4s ease-in-out infinite}
.hero .chips{margin-top:10px}
.chip{display:inline-block;background:#ffffff33;border:2px solid #fff8;border-radius:999px;padding:3px 11px;margin:3px 0 3px 6px;font-weight:700;font-size:.85rem}
.chip.dark{background:#eef;color:#334;border-color:#ccd}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.grid.sm{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.tile{display:block;background:var(--card);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);box-shadow:0 7px 0 var(--sh,#c9c3ff),0 12px 22px #0001;border:3px solid var(--c,#8b5cf6);transition:transform .12s;position:relative}
.tile:hover{transform:translateY(-3px) rotate(-.4deg)}
.tile:active{transform:translateY(4px);box-shadow:0 3px 0 var(--sh,#c9c3ff)}
.tile .ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:2.1rem;background:radial-gradient(circle at 30% 25%,#fff9,transparent 45%),var(--c,#8b5cf6);box-shadow:inset 0 -6px 0 #0002,0 5px 0 #0002;margin-bottom:8px}
.tile h2,.tile h3{margin:.1em 0 .2em;font-size:1.2rem}
.tile p{margin:0;font-size:.93rem;color:#4a4f73}
.tile .tag{position:absolute;top:10px;left:10px;background:var(--c);color:#fff;border-radius:999px;padding:2px 9px;font-size:.78rem;font-weight:800}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:10px 18px;border-radius:18px;border:0;font:inherit;font-weight:800;font-size:1.02rem;cursor:pointer;text-decoration:none;color:#fff;background:var(--c,#7048e8);box-shadow:0 6px 0 #0003;margin:4px 0 4px 6px;transition:transform .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #0003}
.btn.alt{background:#fff;color:var(--ink);border:3px solid var(--c,#7048e8)}
.btn.y{background:#ffd43b;color:#3d2c00}.btn.g{background:#2fb344}.btn.r{background:#f03e3e}.btn.b{background:#1c7ed6}.btn.p{background:#ae3ec9}.btn.o{background:#f76707}
.btn.sm{min-height:44px;padding:6px 14px;font-size:.92rem}
.panel{background:#fff;border-radius:var(--r);padding:16px 18px;box-shadow:0 7px 0 #0001,0 10px 22px #0001;margin:14px 0;border-top:8px solid var(--c,#7048e8)}
.panel h2{margin:.1em 0 .4em;font-size:1.3rem}
.panel h3{margin:.8em 0 .3em}
.rules{list-style:none;padding:0;margin:0;counter-reset:r}
.rules li{counter-increment:r;padding:8px 46px 8px 8px;position:relative;margin:6px 0;background:#f7f5ff;border-radius:14px}
.rules li::before{content:counter(r);position:absolute;right:8px;top:6px;width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:900}
.steps li{margin:4px 0}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.muted{color:#5c6185;font-size:.92rem}
.note{background:#fff8db;border:2px dashed #fab005;border-radius:16px;padding:10px 14px;margin:10px 0}
.verify{background:#fff0f6;border:2px solid #f783ac;border-radius:16px;padding:10px 14px}
.verify li{margin:4px 0}
.k{background:#f1f3f5;border-radius:14px;padding:10px 12px;margin:8px 0}
.k h4{margin:0 0 6px}
.k table{border-collapse:collapse;width:100%;font-size:.92rem}
.k td,.k th{border-bottom:1px solid #dee2e6;padding:4px 6px;text-align:right;vertical-align:top}
/* games */
.gamebar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;background:#fff;border-radius:18px;padding:8px 12px;box-shadow:0 5px 0 #0001;margin-bottom:12px;font-weight:800}
.stars{font-size:1.6rem;letter-spacing:2px}
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(min-width:700px){.mem{grid-template-columns:repeat(6,1fr)}}
.mc{aspect-ratio:3/4;border-radius:16px;border:0;font:inherit;font-weight:800;font-size:clamp(.78rem,3.4vw,1.05rem);cursor:pointer;padding:4px;color:var(--ink);background:#fff;box-shadow:0 5px 0 #0002;display:grid;place-items:center;text-align:center;word-break:break-word;line-height:1.2}
.mc.down{background:repeating-linear-gradient(45deg,var(--c),var(--c) 10px,#ffffff44 10px,#ffffff44 20px);color:transparent;font-size:2rem}
.mc.down::after{content:"❓";color:#fff}
.mc.done{background:#d3f9d8;outline:3px solid #2fb344;cursor:default}
.mc.no{background:#ffe3e3}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{display:block;width:100%;text-align:right;min-height:52px;border-radius:16px;border:3px solid #dee2e6;background:#fff;font:inherit;font-weight:700;padding:8px 12px;margin:6px 0;cursor:pointer;box-shadow:0 4px 0 #0001}
.opt.sel{border-color:var(--c);background:#f3f0ff}
.opt.ok{border-color:#2fb344;background:#d3f9d8}
.opt.bad{border-color:#f03e3e;background:#ffe3e3;animation:shake .3s}
.opt:disabled{cursor:default;opacity:.95}
@keyframes shake{25%{transform:translateX(6px)}75%{transform:translateX(-6px)}}
.bigcard{background:#fff;border-radius:24px;padding:22px;font-size:1.35rem;font-weight:800;text-align:center;box-shadow:0 8px 0 var(--c),0 14px 26px #0002;margin:10px 0 16px;border:4px solid var(--c);min-height:110px;display:grid;place-items:center}
.catbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.wheelwrap{position:relative;max-width:340px;margin:10px auto}
.wheelwrap svg{width:100%;height:auto;transition:transform 3.2s cubic-bezier(.17,.67,.15,1);filter:drop-shadow(0 8px 0 #0002)}
.pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:2.2rem;z-index:2}
.seq{min-height:56px;background:#f8f9fa;border:3px dashed #adb5bd;border-radius:16px;padding:6px;margin:8px 0}
.seq .opt{margin:4px 0}
.fb{font-weight:800;min-height:1.6em;margin:6px 0}
.fb.ok{color:#2b8a3e}.fb.bad{color:#c92a2a}
.win{text-align:center;padding:20px}
.win .em{font-size:4rem;animation:bob 1.2s infinite}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.confetti i{position:absolute;top:-40px;font-style:normal;font-size:1.8rem;animation:fall 2.4s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
.timer{font-size:clamp(3.5rem,18vw,8rem);font-weight:900;text-align:center;font-variant-numeric:tabular-nums;background:#fff;border-radius:30px;box-shadow:0 10px 0 #0002;margin:10px 0}
table.rot{border-collapse:separate;border-spacing:4px;width:100%;font-size:.9rem}
table.rot td,table.rot th{background:#f1f3f5;border-radius:10px;padding:6px;text-align:center}
.prog{height:16px;background:#e9ecef;border-radius:999px;overflow:hidden}
.prog>i{display:block;height:100%;background:linear-gradient(90deg,#ffd43b,#f76707)}
footer{text-align:center;padding:20px 12px 34px;color:#3b3f6b;font-size:.9rem}
footer img{width:64px;height:64px;border-radius:50%;box-shadow:0 4px 0 #0002;background:#fff}
.a11y{position:fixed;bottom:12px;left:12px;z-index:30}
.a11y>button{width:58px;height:58px;border-radius:50%;border:0;background:#1c7ed6;color:#fff;font-size:1.7rem;box-shadow:0 5px 0 #0003;cursor:pointer}
.a11y .menu{position:absolute;bottom:68px;left:0;background:#fff;border-radius:18px;padding:10px;box-shadow:0 10px 30px #0003;width:230px;display:none}
.a11y.open .menu{display:block}
.a11y .menu button{display:block;width:100%;min-height:44px;margin:4px 0;border-radius:12px;border:2px solid #dee2e6;background:#f8f9fa;font:inherit;font-weight:700;cursor:pointer;text-align:right;padding:6px 10px}
body.hc{background:#000!important;color:#fff}
body.hc .tile,body.hc .panel,body.hc .gamebar,body.hc .bigcard,body.hc .opt,body.hc .mc,body.hc .timer,body.hc .k,body.hc .rules li{background:#000!important;color:#fff!important;border-color:#ffd43b!important}
body.hc a{color:#ffd43b}
body.hc .tile p,body.hc .muted{color:#fff}
body.ul a{text-decoration:underline!important}
body.na *{animation:none!important;transition:none!important}
body.rf{font-family:Arial,sans-serif;letter-spacing:.02em;word-spacing:.12em}
.sitemap ul{columns:2 220px}
.sitemap li{margin:3px 0;break-inside:avoid}
.files li{margin:6px 0}
.slot{display:inline-block;background:#e7f5ff;border-radius:10px;padding:2px 8px;margin:2px;font-size:.88rem}
.center{text-align:center}
h1:focus{outline:none}
@media print{
 @page{margin:15mm}
 header.top,.a11y,.crumbs,.noprint,nav{display:none!important}
 body{background:#fff}
 .panel,.tile{box-shadow:none;border:1px solid #999;break-inside:avoid}
 .hero{box-shadow:none;color:#000;background:#fff!important;border:2px solid #000}
}

.mem{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0}.mem .mc{min-width:0;min-height:70px}@media(min-width:700px){.mem{grid-template-columns:repeat(5,minmax(0,1fr))}}
.mc.down span{display:none}
.ex .ansl,.ex .ansc{visibility:hidden}.ex .ansl{color:#2b8a3e;font-weight:800;margin-top:4px}
#exs.reveal .ansl,#exs.reveal .ansc{visibility:visible}#exs.reveal .chip.ans{background:#d3f9d8;outline:3px solid #2fb344}
.ex ol{padding-inline-start:1.4em;line-height:1.7}.ex li{margin-bottom:8px}.bank{background:#fff9db;border-radius:12px;padding:8px 12px;font-weight:700}
.tip{background:#fff3bf;border-radius:12px;padding:10px 14px;font-weight:700}.tbl{width:100%;border-collapse:collapse}.tbl td{border-bottom:2px solid #f1f3f5;padding:8px}
@media print{.ex .ansl,.ex .ansc{visibility:hidden}}
.tile .em{font-size:2rem;display:block;line-height:1.1}.tile>b{display:block;font-size:1.12rem}.tile>small{display:block;color:#495057;margin-top:2px}
.ladder{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 10px;direction:ltr;justify-content:flex-end}.ladder span{font-size:.72rem;font-weight:800;padding:3px 6px;border-radius:8px;background:#f1f3f5}.ladder .done{background:#d3f9d8}.ladder .cur{background:var(--c,#fab005);color:#fff;transform:scale(1.12)}
.code{display:flex;gap:8px;justify-content:center;margin:8px 0}.code span{width:42px;height:52px;border-radius:10px;background:#212529;color:#ffd43b;display:grid;place-items:center;font-size:1.6rem;font-weight:900}
.inp{font:inherit;font-size:1.15rem;padding:12px;border-radius:12px;border:3px solid var(--c,#7048e8);width:100%;margin:8px 0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.cover{margin:0 0 14px;padding:0}.cover img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 8px 24px rgba(0,0,0,.18);aspect-ratio:1400/764;object-fit:cover}
@media print{.cover{display:none}}

/* v8 – phone tap fixes */
a,button,.tile,.btn,.chip{touch-action:manipulation}
@media (hover:none){.tile:hover{transform:none}}
.hero span.chip{border-color:transparent;background:#ffffff26}
a.chip.go{color:inherit;text-decoration:none;background:#ffffff40;border-color:#fff;cursor:pointer;min-height:36px;display:inline-flex;align-items:center;padding:4px 12px}
a.chip.go::after{content:"←";margin-inline-start:6px;opacity:.85}
a.chip.go:active{background:#fff;color:#333}
.totop{position:fixed;bottom:12px;right:12px;z-index:29;width:48px;height:48px;border-radius:50%;background:#5b2bd9;color:#fff;display:none;align-items:center;justify-content:center;font-size:1.4rem;text-decoration:none;box-shadow:0 4px 0 #0003}
.totop.show{display:flex}
@media (max-width:760px){
 header.top{position:relative}
 .topin{flex-wrap:nowrap;flex-direction:column;align-items:stretch;gap:6px;padding:6px 10px}
 nav.main{flex-wrap:nowrap;overflow-x:auto;margin:0;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 nav.main::-webkit-scrollbar{display:none}
 nav.main a{flex:0 0 auto;white-space:nowrap}
}
@media print{.totop{display:none!important}}