:root{--ink:#1f2340;--b:#7048e8;--d:#1c7ed6;--a:#2f9e44;--s:#e8590c;--bg:#f7f5ff;--fs:1}
*{box-sizing:border-box}html{font-size:calc(17px * var(--fs))}
body{margin:0;font-family:"Heebo","Assistant","Noto Sans Hebrew",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:#1864ab}a:focus-visible,button:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #f59f00;outline-offset:2px}
.skip{position:absolute;right:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:99}.skip:focus{right:1rem}
header.top{background:linear-gradient(135deg,#5f3dc4,#1c7ed6);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 3px 10px #0003}
.tbar{display:flex;align-items:center;gap:.5rem;padding:.45rem .8rem;flex-wrap:wrap;max-width:1200px;margin:auto}
.logo{color:#fff;text-decoration:none;font-weight:900;font-size:1.1rem;white-space:nowrap}
.tools{margin-inline-start:auto;display:flex;gap:.35rem;align-items:center}
.tools button,.trkpill{background:#fff2;color:#fff;border:1.5px solid #fff8;border-radius:99px;padding:.3rem .65rem;font:inherit;font-size:.85rem;cursor:pointer;min-height:40px}
nav.main{max-width:1200px;margin:auto;display:flex;gap:.3rem;overflow-x:auto;padding:0 .8rem .5rem;scrollbar-width:thin}
nav.main a{color:#fff;text-decoration:none;white-space:nowrap;padding:.35rem .7rem;border-radius:99px;background:#fff1;font-size:.88rem}
nav.main a[aria-current=page]{background:#fff;color:#5f3dc4;font-weight:800}
.crumbs{max-width:1200px;margin:.6rem auto 0;padding:0 1rem;font-size:.85rem}.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;padding:0;margin:0}.crumbs li+li::before{content:"‹ ";color:#868e96}
main{max-width:1200px;margin:auto;padding:1rem}
h1{font-size:1.75rem;line-height:1.2;margin:.4rem 0 .6rem}h2{font-size:1.35rem;margin:1.6rem 0 .6rem}h3{margin:.4rem 0}
.hero{border-radius:28px;padding:1.6rem 1.2rem;color:#fff;background:radial-gradient(circle at 15% 20%,#ffd43b55 0 12%,transparent 13%),radial-gradient(circle at 85% 80%,#63e6be55 0 15%,transparent 16%),linear-gradient(135deg,#7048e8,#1c7ed6 60%,#2f9e44);position:relative;overflow:hidden;box-shadow:0 10px 30px #5f3dc433}
.hero h1{font-size:2rem;margin:0 0 .4rem}.hero p{font-size:1.05rem;max-width:40rem;margin:.2rem 0}
.hero .art{font-size:3.4rem;letter-spacing:.3rem;filter:drop-shadow(0 6px 6px #0004);margin-bottom:.4rem}
.btn{display:inline-flex;align-items:center;gap:.35rem;background:#fff;color:#5f3dc4;border:0;border-radius:99px;padding:.6rem 1.1rem;font:inherit;font-weight:800;text-decoration:none;cursor:pointer;min-height:44px;box-shadow:0 3px 0 #0002}
.btn.alt{background:#5f3dc4;color:#fff}.btn.sm{padding:.35rem .8rem;min-height:40px;font-size:.9rem}
.row{display:flex;flex-wrap:wrap;gap:.6rem;margin:.8rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.tile{background:#fff;border-radius:20px;padding:1rem;box-shadow:0 4px 14px #1f234014;text-decoration:none;color:inherit;display:block;border:3px solid transparent;transition:transform .15s}
.tile:hover{transform:translateY(-3px)}.tile .em{font-size:2.2rem}.tile h3{margin:.2rem 0}.tile p{margin:.2rem 0;font-size:.92rem;color:#495057}
.tile.sel{border-color:#f59f00;box-shadow:0 0 0 4px #ffe066}
.route{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;position:relative}
.station{border-radius:22px;padding:1rem;color:#fff;text-decoration:none;position:relative;min-height:120px}
.station .big{font-size:2.4rem}.station b{font-size:1.15rem;display:block}.station small{opacity:.95}
.station .bar{height:10px;background:#fff5;border-radius:99px;margin-top:.5rem;overflow:hidden}.station .bar i{display:block;height:100%;background:#ffe066;width:0}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.chip{border:2px solid #ced4da;background:#fff;border-radius:99px;padding:.35rem .85rem;font:inherit;font-weight:700;cursor:pointer;min-height:42px}
.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.kcard{background:#fff;border-radius:22px;box-shadow:0 5px 16px #1f234018;overflow:hidden;border-top:10px solid;scroll-margin-top:120px}
.kcard .kh{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem .2rem}.kcard .kh .ic{font-size:2.3rem}.kcard .kh h3{font-size:1.15rem}
.tag{font-size:.78rem;font-weight:800;border-radius:99px;padding:.1rem .6rem;color:#fff;white-space:nowrap}.kcard .tag{font-size:.78rem;font-weight:800;border-radius:99px;padding:.1rem .6rem;color:#fff;white-space:nowrap}
.kcard .kb{padding:.2rem 1rem 1rem}.kcard ul{margin:.2rem 0;padding-inline-start:1.2rem}
.kcard .ex{background:#f8f9fa;border-radius:14px;padding:.6rem .8rem;margin:.5rem 0}.kcard .tr{border:2px dashed;border-radius:14px;padding:.5rem .8rem;margin-top:.5rem}
.easy{background:#fff9db;border-radius:12px;padding:.4rem .7rem;font-weight:700;margin:.3rem 0;display:none}
body[data-track=hanam] .easy,body[data-track=olim] .easy{display:block}
.say{background:#e7f5ff;border:0;border-radius:99px;padding:.25rem .7rem;cursor:pointer;font:inherit;font-size:.85rem;min-height:40px;color:#1864ab;font-weight:700}
body[data-track=hanam] .say{background:#2f9e44;color:#fff;font-size:1rem}
/* deck */
.deckwrap{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:900px){.deckwrap{grid-template-columns:2fr 1fr}}
.stage3d{perspective:1200px;display:flex;justify-content:center}
.flip{width:min(92vw,400px);height:520px;position:relative;transform-style:preserve-3d;transition:transform .6s;cursor:pointer}
.flip.on{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:26px;padding:1.1rem;box-shadow:0 12px 30px #1f234033;overflow:auto;background:#fff;border:6px solid}
.face.back{transform:rotateY(180deg)}
.face .ic{font-size:4rem;text-align:center;line-height:1.1}.face h2{text-align:center;margin:.3rem 0}
.counter{text-align:center;font-weight:800;margin:.4rem 0}
.prog{background:#fff;border-radius:20px;padding:1rem;box-shadow:0 4px 14px #1f234014}
.prog .pr{margin:.5rem 0}.prog .pr .bar{height:14px;border-radius:99px;background:#e9ecef;overflow:hidden}.prog .pr .bar i{display:block;height:100%}
/* walk */
.walk{display:grid;gap:1rem}@media(min-width:950px){.walk{grid-template-columns:1.15fr 1fr}.walk .panel{position:sticky;top:120px;align-self:start}}
.text{background:#fff;border-radius:22px;padding:1rem 1.1rem;box-shadow:0 4px 14px #1f234014}
.text .p{display:flex;gap:.6rem;margin:.6rem 0;scroll-margin-top:130px;border-radius:12px;padding:.2rem .3rem}.text .p .n{flex:none;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.text .p.hl{background:#fff3bf}
.simple{display:none;background:#fff4e6;border-radius:10px;padding:.25rem .6rem;color:#862e00;font-size:.95em;margin-top:.25rem}body[data-track=olim] .simple{display:block}
body[data-track=hanam] .text{font-size:1.12rem}body[data-track=hanam] .text .p{border-bottom:2px dashed #ced4da;padding-bottom:.5rem}
.panel{background:#fff;border-radius:22px;padding:1rem;box-shadow:0 6px 18px #1f234022;border:4px solid #e5dbff}
.meter{height:16px;background:#e9ecef;border-radius:99px;overflow:hidden;margin:.4rem 0}.meter i{display:block;height:100%;background:linear-gradient(90deg,#7048e8,#1c7ed6,#2f9e44);width:0;transition:width .4s}
.pop{border-radius:18px;padding:.7rem .9rem;color:#fff;margin:.5rem 0;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}@keyframes pop{from{transform:scale(.6) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
.pop .ic{font-size:2rem}.prompt{font-weight:800;font-size:1.08rem;margin:.6rem 0}
.opts{display:grid;gap:.5rem}.opt{text-align:right;background:#f8f9fa;border:2px solid #ced4da;border-radius:16px;padding:.7rem .9rem;font:inherit;cursor:pointer;min-height:48px}
.opt.ok{background:#d3f9d8;border-color:#2f9e44}.opt.no{background:#ffe3e3;border-color:#e03131}
.fb{min-height:1.5rem;font-weight:700;margin:.4rem 0}.hint{background:#e7f5ff;border-radius:12px;padding:.4rem .7rem;margin:.3rem 0}
textarea{width:100%;min-height:110px;border-radius:14px;border:2px solid #ced4da;padding:.6rem;font:inherit}
.navbtns{display:flex;justify-content:space-between;gap:.5rem;margin-top:.8rem}
.stars{font-size:1.3rem;letter-spacing:.1rem}
/* glossary popup */
.gl{background:#fff4e6;border:0;border-bottom:2px dotted #e8590c;font:inherit;padding:0 .1rem;cursor:pointer;color:inherit;border-radius:4px}
.glpop{position:fixed;z-index:50;background:#fff;border-radius:18px;box-shadow:0 10px 30px #0004;padding:.8rem 1rem;max-width:280px;border:3px solid #e8590c;text-align:center}
.glpop .e{font-size:2.6rem}
.bank{display:none;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}body[data-track=olim] .bank{display:flex}.bank span{border:2px solid;border-radius:99px;padding:.15rem .7rem;font-weight:700;background:#fff}
/* game */
.gbox{background:#fff;border-radius:24px;padding:1.1rem;box-shadow:0 6px 18px #1f234022;max-width:760px;margin:auto}
.situ{font-size:1.2rem;font-weight:800;background:#f3f0ff;border-radius:18px;padding:.9rem;margin:.5rem 0}
.bins{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}@media(min-width:700px){.bins{grid-template-columns:repeat(4,1fr)}}
.bin{border-radius:18px;color:#fff;padding:.8rem;min-height:90px;font:inherit;font-weight:800;border:0;cursor:pointer}
.pool{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0}.pool button{border:2px solid #ced4da;background:#fff;border-radius:14px;padding:.5rem .8rem;font:inherit;cursor:pointer;min-height:46px}.pool button[aria-pressed=true]{border-color:#f59f00;background:#fff9db;box-shadow:0 0 0 3px #ffe066}
body.embed header.top,body.embed .crumbs,body.embed footer,body.embed .pager,body.embed .practice,body.embed .noembed{display:none!important}
/* practice block */
.practice{background:linear-gradient(135deg,#fff9db,#fff);border:3px solid #fcc419;border-radius:22px;padding:1rem;margin:2rem 0 1rem}
.practice h2{margin:0 0 .4rem}.practice table{width:100%;border-collapse:collapse}.practice td{padding:.35rem;border-bottom:1px solid #ffe066}.practice td:first-child{font-weight:800;width:40%}
.files a,.dl{display:inline-flex;align-items:center;gap:.25rem;background:#fff;border:2px solid #1c7ed6;color:#1864ab;border-radius:99px;padding:.3rem .8rem;font-weight:800;text-decoration:none;margin:.15rem;min-height:40px}
.dl.w{border-color:#2f9e44;color:#2b8a3e}
table.t{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}table.t th,table.t td{border:1px solid #dee2e6;padding:.5rem;text-align:right;vertical-align:top}table.t th{background:#f3f0ff}
.wrapx{overflow-x:auto}
details{background:#fff;border-radius:16px;padding:.6rem 1rem;margin:.5rem 0;box-shadow:0 2px 8px #1f234010}summary{cursor:pointer;font-weight:800;min-height:36px}
.pager{display:flex;justify-content:space-between;gap:.5rem;margin:2rem 0 1rem;flex-wrap:wrap}
footer{background:#1f2340;color:#fff;padding:1.5rem 1rem;margin-top:2rem}footer .in{max-width:1200px;margin:auto}footer a{color:#ffe066}
.slide{min-height:60vh;border-radius:26px;padding:2rem 1.4rem;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;box-shadow:0 10px 30px #1f234033}
.slide .vis{font-size:5rem;line-height:1}.slide h2{font-size:1.8rem;margin:.4rem 0}.slide li{font-size:1.15rem;margin:.3rem 0}
.poster{background:linear-gradient(180deg,#f3f0ff,#fff 40%,#ebfbee);border-radius:26px;padding:1.2rem;max-width:820px;margin:auto;box-shadow:0 6px 20px #1f234022}
.pst{border:4px solid;border-radius:22px;background:#fff;padding:.8rem 1rem;margin:.6rem 0}.pst .h{font-weight:900;font-size:1.2rem}.pst .cs span{display:inline-block;background:#f8f9fa;border-radius:99px;padding:.15rem .6rem;margin:.15rem;font-weight:700;font-size:.92rem}
.toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:#1f2340;color:#fff;border-radius:99px;padding:.6rem 1.2rem;z-index:60;display:none}
@media(max-width:700px){header.top{position:static}.tools button,.trkpill{min-height:40px;padding:.25rem .55rem}.kcard,.text .p{scroll-margin-top:10px}h1{font-size:1.45rem}.hero h1{font-size:1.55rem}.hero .art{font-size:2.6rem}.flip{height:560px}}
@media print{header.top,nav,footer,.practice,.pager,.tools{display:none}}
