:root{--ink:#183d39;--green:#187f73;--cream:#faf8ef;--gold:#f4c967}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 ui-rounded,'Trebuchet MS',Arial,sans-serif}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer;border:1px solid #cfdbd5;background:white;color:var(--ink);border-radius:14px;padding:10px 16px}button:hover{border-color:var(--green);background:#eef5ee}button:focus-visible,a:focus-visible{outline:3px solid #bd6d22;outline-offset:3px}header{max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:22px 28px}.brand{position:relative;padding-left:50px;color:var(--ink);font-size:24px;font-weight:900;text-decoration:none;line-height:1.2}.brand img{position:absolute;left:0;top:0;width:40px;height:40px}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:5px}main{max-width:1184px;margin:auto;padding:0 24px}.hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:50px;padding:40px 0 45px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:2px;color:var(--green)}h1{font-size:clamp(44px,5vw,70px);line-height:1.05;letter-spacing:-3px;margin:18px 0 22px}p{color:#546a61}.hero p{max-width:500px;font-size:18px}.pill{display:inline-block;background:#eeefe1;padding:6px 13px;border-radius:30px;font-size:12px}.island{background:#e1ecdb;border-radius:48% 48% 32% 32%;padding:35px;text-align:center;transform:rotate(-3deg);box-shadow:0 12px 0 #c9d9bf}.island span{font-family:serif;font-size:95px;display:inline-block;color:#226c5e;text-shadow:2px 4px white}.island span:nth-child(2){color:#c08435;transform:translateY(-20px)}.island b,.island small{display:block;letter-spacing:3px}.island small{letter-spacing:1px;color:#65775b}.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:10px 0 28px}.tabs button{font-weight:bold;text-align:left;padding:17px}.tabs button.active{background:var(--green);color:white;border-color:var(--green)}.workspace{display:grid;grid-template-columns:0.85fr 1.15fr;gap:40px;background:white;border:1px solid #e1e6db;border-radius:28px;padding:30px}h2{font-size:30px;line-height:1.2;margin:14px 0}aside>p{margin-top:0}#choices{display:flex;flex-wrap:wrap;gap:7px}#choices button{padding:5px 11px}#choices button.selected{background:#f8e5b7;border-color:#d8b45f}.coach{background:#f5f3e8;border-left:4px solid var(--gold);border-radius:12px;padding:16px;margin:22px 0}.coach p{margin:6px 0 0;min-height:70px}#actions{display:flex;gap:8px;flex-wrap:wrap}.primary{background:var(--green);color:white}.progress{margin-top:24px;font-size:12px}progress{display:block;width:100%;accent-color:var(--green);height:10px;margin-top:8px}.boardtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:13px}.boardtop button{font-size:11px;padding:6px 10px}.board{display:grid;grid-template-columns:repeat(8,1fr);border:8px solid #236b5d;border-radius:12px;overflow:hidden;aspect-ratio:1;max-width:560px;width:100%;box-shadow:0 8px 0 #d9e6db}.square{position:relative;aspect-ratio:1;border:0;border-radius:0;padding:0;background:#f1ead5;font-family:'DejaVu Sans',serif;font-size:clamp(23px,4.1vw,47px);line-height:1;color:#163f37;display:grid;place-items:center;font-variant-emoji:text}.square.dark{background:#7fa795}.square:hover{background:#efcd76}.square.chosen{background:#f0be51;box-shadow:inset 0 0 0 3px #946120}.square.legal:after{content:'';position:absolute;width:23%;height:23%;border-radius:50%;background:#28584499}.square.target:before{content:'✦';position:absolute;font:26px Arial;color:#946020}.square small{position:absolute;left:3px;bottom:2px;font:9px Arial;color:#244f43}.square.blackpiece{color:#152d31}.square.whitepiece{color:#fff;text-shadow:1px 1px #163f37,-1px -1px #163f37}.boardnote{font-size:13px;text-align:center}.family{display:flex;gap:24px;align-items:center;padding:28px;margin:35px 0;background:#eeeedd;border-radius:22px}.family>span{font-size:52px;color:#b8842b}.family h2{font-size:22px}.family p{margin:0}.family button{flex-shrink:0}footer{text-align:center;padding:25px;font-size:12px;color:#64766d}dialog{max-width:650px;width:calc(100% - 30px);border:0;border-radius:24px;padding:32px;color:var(--ink)}dialog::backdrop{background:#173e3980}.close{float:right}#stats{padding:15px;background:#eef4ec;border-radius:12px}#reset{color:#8d4528}button:disabled{opacity:.5;cursor:default}@media(max-width:760px){header{padding:18px 16px}.brand{font-size:20px}header>button{font-size:12px}main{padding:0 16px}.hero{gap:20px;padding:25px 0;grid-template-columns:1fr}.island{display:none}h1{font-size:48px}.tabs{grid-template-columns:1fr 1fr}.tabs button{font-size:13px;padding:12px}.workspace{grid-template-columns:1fr;padding:18px;gap:20px}.boardwrap{grid-row:1}.board{max-width:none}.square{font-size:clamp(27px,8vw,49px)}.family{display:block;padding:20px}.family>span{display:none}.family button{margin-top:15px}.coach p{min-height:0}h2{font-size:26px}}@media print{header,.hero,.tabs,.workspace,footer,dialog,.family button{display:none}.family{display:block;background:white}.family:after{content:'1. Kaleyi tahtanın ortasına koy. 2. Gidebileceği tüm kareleri birlikte bul. 3. Bir engel koy: Kale onun üzerinden atlayabilir mi? 4. Bu kez aynı görevi at ile dene. Hatırla: Kale düz gider, at L şeklinde gider ve taşların üzerinden atlayabilir.';display:block;margin-top:25px}.family h2{font-size:28px}}
/* v2 */
.grouplabel{flex-basis:100%;font-size:10px;font-weight:900;letter-spacing:1.5px;color:var(--green);margin-top:6px;text-transform:uppercase}.numrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;flex-basis:100%}.numrow button{min-width:38px;padding:4px 8px!important}.tier{font-weight:bold}.tier-kolay.selected{background:#dff0d6!important;border-color:#7cb36a!important}.tier-orta.selected{background:#f8e5b7!important}.tier-zor.selected{background:#f5d0c2!important;border-color:#c9785a!important}
.tabs{grid-template-columns:repeat(5,1fr)}
.square .pc{display:inline-block}.square.moved .pc{animation:pop .45s ease}.square.last{box-shadow:inset 0 0 0 3px #f0be5199}.square.glow{animation:glow 1.2s ease-in-out infinite}@keyframes glow{50%{background:#f7d980}}@keyframes pop{0%{transform:scale(.4) translateY(10px);opacity:.3}70%{transform:scale(1.15)}100%{transform:none}}
.board.shake{animation:shake .45s}@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.coach.happy{animation:happy .6s}.coach.oops{animation:oops .5s}@keyframes happy{40%{transform:scale(1.03);background:#e5f3dc}}@keyframes oops{40%{background:#f9e2d6}}
.boardwrap{position:relative}.burst{position:absolute;left:50%;top:45%;pointer-events:none}.burst i{position:absolute;font-style:normal;font-size:28px;color:#e2a72e;animation:fly 1s ease-out forwards;transform:rotate(var(--a))}@keyframes fly{from{transform:rotate(var(--a)) translateY(0) scale(.5);opacity:1}to{transform:rotate(var(--a)) translateY(-170px) scale(1.2);opacity:0}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:14px 22px;border-radius:18px;display:flex;gap:12px;align-items:center;z-index:9;animation:toast 4.2s ease forwards;box-shadow:0 8px 24px #0003}.toast span{font-size:30px;animation:spin 1s ease}@keyframes toast{0%{opacity:0;transform:translate(-50%,40px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,20px)}}@keyframes spin{from{transform:rotate(-180deg) scale(.3)}}
body.badgemode .board{display:block;aspect-ratio:auto;border:0;box-shadow:none;overflow:visible}.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}.badge{background:#f3f2e8;border-radius:16px;padding:14px;text-align:center;opacity:.6}.badge.got{opacity:1;background:#fbefcf;box-shadow:0 4px 0 #ecd28f;animation:pop .5s}.badge span{font-size:34px;display:block}.badge b{display:block;font-size:14px}.badge small{font-size:11px;color:#5d6f66;line-height:1.3;display:block}.guide-link{color:var(--green);font-weight:bold}
@media(max-width:760px){.tabs{grid-template-columns:1fr 1fr}.tabs button:last-child{grid-column:span 2}.badges{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}}