:root{--sand:#f7eedd;--sand2:#efe0c2;--terra:#c4553b;--blue:#1d3557;--teal:#23877c;--gold:#e9b949;--ink:#20233a;--card:#fffaf1}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Rubik",Arial,"Segoe UI",sans-serif;background:var(--sand);color:var(--ink);direction:rtl;text-align:right;line-height:1.55;font-size:18px;
background-image:radial-gradient(circle at 12px 12px,rgba(196,85,59,.08) 3px,transparent 4px),radial-gradient(circle at 36px 36px,rgba(35,135,124,.08) 3px,transparent 4px);background-size:48px 48px}
a{color:var(--blue)}
header.top{position:sticky;top:0;z-index:20;background:var(--blue);color:#fff;display:flex;align-items:center;gap:8px;padding:8px 10px;box-shadow:0 2px 8px rgba(0,0,0,.25);flex-wrap:nowrap}
header.top .brand{font-weight:800;font-size:17px;flex:1 1 0;min-width:0;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.top img{width:44px;height:44px;border-radius:50%;background:#fff;object-fit:cover;flex:0 0 44px}
.lv{display:flex;gap:6px;flex-wrap:wrap;padding:10px;justify-content:center;background:var(--sand2);border-bottom:2px solid rgba(0,0,0,.06)}
.lv button{font:inherit;font-size:16px;border:0;border-radius:999px;padding:10px 16px;min-height:46px;background:#fff;color:var(--ink);font-weight:700;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.lv button.on{background:var(--terra);color:#fff}
main{max-width:1000px;margin:0 auto;padding:14px 12px 30px}
h1{font-family:"Secular One","Rubik",Arial,sans-serif;font-size:30px;line-height:1.2;margin:8px 0 6px;color:var(--blue)}
h2{font-family:"Secular One","Rubik",Arial,sans-serif;font-size:26px;line-height:1.25;margin:6px 0 10px;color:var(--blue)}
h3{font-size:21px;margin:14px 0 6px;color:var(--terra)}
.hero{background:linear-gradient(160deg,#1d3557,#23877c);color:#fff;border-radius:24px;padding:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;box-shadow:0 6px 0 #142640}
.hero h1{color:#fff}
.hero p{margin:4px 0;font-size:18px;opacity:.95}
.hero .art{flex:1 1 260px;min-width:0}
.hero .txt{flex:2 1 300px;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;background:var(--card);border-radius:20px;padding:16px 8px;min-height:110px;text-decoration:none;color:var(--ink);font-weight:800;font-size:18px;box-shadow:0 4px 0 rgba(0,0,0,.12);border:2px solid transparent}
.tile:hover,.tile:focus{border-color:var(--terra)}
.tile .e{font-size:34px}
.tile small{font-weight:500;font-size:14px;opacity:.8}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:800;font-size:18px;border:0;border-radius:18px;padding:12px 18px;min-height:52px;background:var(--terra);color:#fff;cursor:pointer;text-decoration:none;box-shadow:0 4px 0 #8f3a26}
.btn.alt{background:var(--blue);box-shadow:0 4px 0 #0f1f36}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.15)}
.btn:disabled{opacity:.45;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.slide{background:var(--card);border-radius:26px;padding:16px;box-shadow:0 6px 0 rgba(0,0,0,.12);position:relative;overflow:hidden}
.slide .band{height:10px;margin:-16px -16px 12px;background:repeating-linear-gradient(90deg,var(--terra) 0 22px,var(--gold) 22px 30px,var(--teal) 30px 52px,var(--gold) 52px 60px)}
.slide .yr{display:inline-block;background:var(--blue);color:#fff;border-radius:999px;padding:4px 14px;font-weight:800;font-size:17px}
.slide .num{float:left;font-weight:800;color:var(--terra);font-size:16px}
.slide h2{font-size:clamp(24px,5.5vw,38px)}
.slide .sub{font-size:20px;color:var(--teal);font-weight:700}
.slide ul{margin:8px 0;padding:0 22px 0 0}
.slide li{font-size:clamp(19px,3.4vw,25px);margin:8px 0;line-height:1.45}
.slide .art{max-width:520px;margin:10px auto}
.slide .art svg{width:100%;height:auto;display:block}
.deep{background:#e8f4f2;border-right:6px solid var(--teal);border-radius:14px;padding:12px 14px;margin-top:12px;font-size:20px}
.deep b{color:var(--teal)}
.easy{font-size:clamp(24px,5vw,32px);line-height:2;background:#fff4d6;border-radius:16px;padding:12px 16px;border-right:6px solid var(--gold)}
.words{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.words span{background:#fff;border:2px solid var(--gold);border-radius:14px;padding:6px 12px;font-size:20px;line-height:1.7}
.notes{background:#fdf0ec;border:2px dashed var(--terra);border-radius:14px;padding:12px;margin-top:12px;font-size:17px}
.scene{background:#eef1fb;border-radius:14px;padding:12px;margin-top:10px;font-size:17px;border-right:6px solid #6c7fd8}
.nav{display:flex;justify-content:space-between;gap:10px;margin-top:14px;align-items:center}
.nav .dots{font-weight:700;color:var(--blue)}
.card{background:var(--card);border-radius:20px;padding:16px;margin:12px 0;box-shadow:0 4px 0 rgba(0,0,0,.1)}
.opts{display:grid;gap:10px;margin-top:10px}
.opt{font:inherit;font-size:19px;text-align:right;border:2px solid #d9cbb0;background:#fff;border-radius:16px;padding:12px 14px;min-height:54px;cursor:pointer;color:var(--ink)}
.opt.ok{background:#d9f2e4;border-color:#2e9d5b}
.opt.no{background:#fbe0da;border-color:var(--terra)}
.fb{margin-top:10px;font-weight:700;font-size:18px}
.prog{height:12px;background:#e6d9bf;border-radius:999px;overflow:hidden;margin:8px 0}
.prog i{display:block;height:100%;background:var(--teal);width:0;transition:width .3s}
.tcards{display:grid;gap:10px}
.tcard{font:inherit;font-size:18px;text-align:right;border:0;border-radius:16px;padding:12px 14px;min-height:54px;background:#fff;box-shadow:0 3px 0 rgba(0,0,0,.15);cursor:pointer;color:var(--ink)}
.tcard.shake{animation:sh .4s;background:#fbe0da}
@keyframes sh{0%,100%{transform:none}25%{transform:translateX(6px)}75%{transform:translateX(-6px)}}
.placed{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.placed li{background:#d9f2e4;border-radius:14px;padding:10px 12px;font-size:18px}
.placed b{color:var(--blue);margin-left:6px}
.mapbox svg{width:100%;height:auto;display:block;background:#bfe0ea;border-radius:16px}
.mapbox path.c{fill:#f2dfb4;stroke:#8a6a3a;stroke-width:2;cursor:pointer;transition:fill .2s}
.mapbox path.c:hover{fill:#ecd08e}
.mapbox path.c.done{fill:#a8dcc0}
.mapbox path.c.bad{fill:#f3b3a5}
.mapbox path.e{fill:#e4ddcc;stroke:#a89a80;stroke-width:1.5}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.tabs button{font:inherit;font-weight:700;border:0;border-radius:999px;padding:10px 16px;min-height:48px;background:#fff;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.tabs button.on{background:var(--teal);color:#fff}
.printnote{background:#fff;border:2px solid var(--blue);border-radius:14px;padding:10px 12px;font-weight:700;margin:10px 0}
table{width:100%;border-collapse:collapse;font-size:17px;background:#fff;border-radius:12px;overflow:hidden}
td,th{border:1px solid #e3d5b8;padding:8px;text-align:right;vertical-align:top}
th{background:var(--sand2)}
footer.site{text-align:center;padding:18px 10px 28px;color:#444;font-size:16px}
footer.site img{width:72px;height:72px;border-radius:50%;object-fit:cover;background:#fff;vertical-align:middle;margin-left:8px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.big{font-size:22px}
@media (max-width:420px){body{font-size:17px}h1{font-size:26px}.slide{padding:14px}.slide .band{margin:-14px -14px 10px}}
@media print{header.top,.lv,.nav,.noprint,footer.site img{display:none!important}body{background:#fff}main{max-width:none;padding:0 15mm}.card,.slide{box-shadow:none;border:1px solid #ccc;break-inside:avoid}}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}