:root{
  --wood-dark:#2b1a12; --wood:#3E2723; --wood-mid:#5D4037;
  --cream:#F5EBDD; --gold:#C9A227; --gold-lt:#E8C547;
  --sq-light:#E8D5B5; --sq-dark:#9C6B3E;
  --bg:#1a120b; --panel:rgba(62,39,35,0.55); --text:#F5EBDD; --muted:#c9b39a;
  --accent:#C9A227; --border:rgba(201,162,39,0.25);
}
:root.light{
  --bg:#f4ede2; --panel:rgba(255,255,255,0.7); --text:#2b1a12; --muted:#6b5744;
  --sq-light:#EFE3CC; --sq-dark:#B58863; --border:rgba(93,64,55,0.2);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Vazirmatn',system-ui,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(201,162,39,0.12), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(93,64,55,0.35), transparent 45%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.015) 0deg 90deg, transparent 90deg 180deg);
  background-size:auto,auto,60px 60px;
  transition:background .4s,color .4s;
}
:root.light body{
  background-image:
    radial-gradient(circle at 15% 10%, rgba(201,162,39,0.18), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(181,136,99,0.25), transparent 45%);
}
.app{max-width:1000px;margin:0 auto;padding:0 16px 120px;}

/* header */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 4px;flex-wrap:wrap;
  backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:8px;}
.brand-king{font-size:32px;color:var(--gold);text-shadow:0 0 12px rgba(201,162,39,.5);}
.brand-name{font-weight:800;font-size:19px;background:linear-gradient(90deg,var(--gold),var(--gold-lt));-webkit-background-clip:text;background-clip:text;color:transparent;}
.nav-tabs{display:flex;gap:4px;}
.nav-tab{
  background:transparent;border:none;color:var(--muted);font-family:inherit;
  padding:8px 14px;border-radius:10px;cursor:pointer;font-size:15px;font-weight:600;transition:.2s;
}
.nav-tab:hover{color:var(--text);background:rgba(201,162,39,.08);}
.nav-tab.active{color:var(--wood-dark);background:linear-gradient(135deg,var(--gold),var(--gold-lt));box-shadow:0 4px 14px rgba(201,162,39,.35);}
:root.light .nav-tab.active{color:#fff;}
.top-right{display:flex;align-items:center;gap:8px;}
.user-chip{background:var(--panel);border:1px solid var(--border);padding:6px 12px;border-radius:20px;font-size:13px;font-weight:600;}
.theme-btn{background:var(--panel);border:1px solid var(--border);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px;}
@media(max-width:640px){ .nav-tabs{display:none;} .brand-name{font-size:16px;} }

.content{margin-top:8px;}
.fade-up{animation:fadeUp .5s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* hero */
.hero{position:relative;text-align:center;padding:36px 20px;border-radius:24px;overflow:hidden;
  background:var(--panel);border:1px solid var(--border);margin-bottom:20px;}
.hero-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% -20%,rgba(201,162,39,.3),transparent 60%);}
.hero-title{font-size:28px;font-weight:800;position:relative;}
.hero-sub{color:var(--muted);margin-top:6px;position:relative;}
.tip-card{margin-top:18px;background:rgba(201,162,39,.1);border:1px solid var(--border);border-radius:14px;padding:14px;position:relative;}
.tip-label{display:inline-block;font-size:12px;font-weight:800;color:var(--gold);margin-bottom:6px;}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
@media(max-width:520px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;text-align:center;transition:.2s;}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.25);}
.stat-num{font-size:26px;font-weight:800;color:var(--gold);}
.stat-lbl{font-size:12px;color:var(--muted);margin-top:4px;}

.rank-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:18px;}
.rank-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.rank-glyph{font-size:40px;color:var(--gold);}
.rank-name{font-weight:800;font-size:17px;}
.rank-next{color:var(--muted);font-size:13px;}
.bar{height:12px;border-radius:8px;background:rgba(0,0,0,.25);overflow:hidden;}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-lt));border-radius:8px;transition:width .6s;}
.rank-card.big{text-align:center;}
.big-rank-glyph{font-size:64px;color:var(--gold);text-shadow:0 0 24px rgba(201,162,39,.4);display:block;}
.big-rank-name{font-weight:800;font-size:20px;margin-top:6px;}
.big-xp{color:var(--muted);margin-top:4px;}

.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:520px){.quick-grid{grid-template-columns:1fr;}}
.quick-btn{border:none;border-radius:16px;padding:20px;font-family:inherit;font-size:16px;font-weight:700;
  cursor:pointer;color:#fff;display:flex;flex-direction:column;align-items:center;gap:8px;transition:.2s;}
.quick-btn:hover{transform:translateY(-4px);}
.qb-ico{font-size:28px;}
.qb1{background:linear-gradient(135deg,#5D4037,#8d6e63);}
.qb2{background:linear-gradient(135deg,#7BB661,#4a7c40);}
.qb3{background:linear-gradient(135deg,#C9A227,#8a6d16);color:var(--wood-dark);}

/* sections */
.sec-title{font-size:24px;font-weight:800;margin-bottom:18px;padding-right:6px;border-right:4px solid var(--gold);}
.sub-title{font-size:18px;font-weight:800;margin:22px 0 12px;}
.tier-block{margin-bottom:22px;}
.tier-head{font-weight:700;color:var(--gold);margin-bottom:10px;font-size:15px;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.lesson-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;cursor:pointer;transition:.2s;}
.lesson-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 8px 20px rgba(0,0,0,.25);}
.lesson-card.done{border-color:#7BB661;}
.lc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.lc-icon{font-size:22px;}
.lc-xp{font-size:12px;font-weight:700;color:var(--gold);background:rgba(201,162,39,.12);padding:3px 8px;border-radius:10px;}
.lc-title{font-weight:700;font-size:15px;margin-bottom:6px;}
.lc-tier{font-size:12px;color:var(--muted);}

.back-btn{background:none;border:none;color:var(--gold);font-family:inherit;font-size:15px;cursor:pointer;margin-bottom:12px;font-weight:600;}
.lesson-title{font-size:22px;font-weight:800;margin-bottom:4px;}
.lesson-progress{color:var(--muted);font-size:13px;margin-bottom:14px;}
.lesson-text{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;line-height:2;margin:16px 0;font-size:15px;}
.lesson-nav{display:flex;gap:10px;justify-content:space-between;}

.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-lt));color:var(--wood-dark);border:none;
  padding:12px 20px;border-radius:12px;font-family:inherit;font-weight:800;cursor:pointer;font-size:15px;transition:.2s;}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(201,162,39,.4);}
.btn-ghost{background:var(--panel);border:1px solid var(--border);color:var(--text);padding:12px 18px;border-radius:12px;
  font-family:inherit;font-weight:600;cursor:pointer;font-size:14px;transition:.2s;}
.btn-ghost:hover{border-color:var(--gold);}
.btn-ghost:disabled{opacity:.4;cursor:not-allowed;}

/* board */
.board-wrap{display:flex;justify-content:center;margin:12px 0;}
.board{display:grid;grid-template-columns:repeat(8,1fr);width:min(92vw,440px);aspect-ratio:1;
  border-radius:12px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5);border:6px solid var(--wood);}
.board-small .board{width:min(80vw,320px);}
.sq{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;}
.sq-light{background:var(--sq-light);}
.sq-dark{background:var(--sq-dark);}
.sq-sel{box-shadow:inset 0 0 0 4px var(--gold);}
.sq-last{background:rgba(201,162,39,.4)!important;}
.sq-check{background:rgba(220,60,60,.6)!important;animation:pulseCheck .8s infinite;}
@keyframes pulseCheck{50%{background:rgba(220,60,60,.35)!important;}}
.piece{font-size:min(9vw,42px);line-height:1;user-select:none;transition:transform .15s;}
.pw{color:#fdfaf3;text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 1px #000;}
.pb{color:#241611;text-shadow:0 1px 2px rgba(255,255,255,.25);}
.sq:hover .piece{transform:scale(1.08);}
.move-dot{position:absolute;width:28%;height:28%;border-radius:50%;background:rgba(30,120,40,.55);}
.capture-ring{position:absolute;inset:8%;border:4px solid rgba(220,60,60,.7);border-radius:50%;}

.shake{animation:shake .45s;}
@keyframes shake{0%,100%{transform:none;}20%{transform:translateX(-8px);}40%{transform:translateX(8px);}60%{transform:translateX(-6px);}80%{transform:translateX(6px);}}

/* puzzles */
.puzzle-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.pz-tab{background:var(--panel);border:1px solid var(--border);color:var(--text);padding:8px 14px;border-radius:20px;
  font-family:inherit;font-weight:600;cursor:pointer;font-size:14px;transition:.2s;}
.pz-tab.active{background:linear-gradient(135deg,var(--gold),var(--gold-lt));color:var(--wood-dark);}
.pz-tab.solved{border-color:#7BB661;}
.puzzle-desc{text-align:center;font-weight:700;margin-bottom:8px;color:var(--muted);}
.daily-frame{border:3px solid var(--gold);border-radius:20px;padding:12px;background:rgba(201,162,39,.06);box-shadow:0 0 24px rgba(201,162,39,.2);}
.msg-ok{text-align:center;background:rgba(123,182,97,.18);border:1px solid #7BB661;border-radius:12px;padding:12px;margin-top:12px;font-weight:700;}
.msg-err{text-align:center;background:rgba(220,60,60,.15);border:1px solid #dc4c4c;border-radius:12px;padding:12px;margin-top:12px;font-weight:700;}
.hint-box{background:rgba(201,162,39,.12);border:1px solid var(--border);border-radius:12px;padding:14px;margin-top:12px;line-height:1.9;}
.puzzle-btns{display:flex;gap:10px;justify-content:center;margin-top:14px;}

/* play */
.play-bar{text-align:center;margin-bottom:10px;}
.turn-ind{background:var(--panel);border:1px solid var(--border);padding:8px 18px;border-radius:20px;font-weight:700;display:inline-block;}
.play-layout{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:flex-start;}
.moves-panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;min-width:200px;flex:1;max-width:260px;}
.mp-head{font-weight:800;margin-bottom:10px;color:var(--gold);}
.mp-list{max-height:340px;overflow-y:auto;}
.mp-row{padding:6px 8px;border-bottom:1px solid var(--border);font-size:14px;direction:ltr;text-align:right;}
.mp-empty{color:var(--muted);font-size:13px;}
.play-btns{display:flex;gap:10px;justify-content:center;margin-top:14px;}

/* progress */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
.badge{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;text-align:center;opacity:.45;filter:grayscale(1);transition:.3s;}
.badge.earned{opacity:1;filter:none;border-color:var(--gold);box-shadow:0 0 18px rgba(201,162,39,.25);}
.badge-g{font-size:34px;}
.badge-t{font-size:13px;font-weight:600;margin-top:6px;}
.lb-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;}
.lb-login{display:inline-block;text-decoration:none;text-align:center;}
.lb-list{margin-top:14px;}
.lb-row{display:flex;align-items:center;gap:12px;padding:10px;border-bottom:1px solid var(--border);}
.lb-row.top{background:rgba(201,162,39,.1);border-radius:10px;}
.lb-rank{font-weight:800;color:var(--gold);width:24px;}
.lb-name{flex:1;font-weight:600;}
.lb-xp{color:var(--muted);font-size:14px;}

/* bottom nav mobile */
.bottom-nav{display:none;}
@media(max-width:640px){
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;
    background:var(--wood);border-top:1px solid var(--border);padding:6px;justify-content:space-around;
    backdrop-filter:blur(10px);}
  :root.light .bottom-nav{background:rgba(255,255,255,.95);}
  .bn-btn{background:none;border:none;color:var(--muted);font-family:inherit;display:flex;flex-direction:column;
    align-items:center;gap:2px;padding:6px 8px;cursor:pointer;border-radius:10px;font-size:11px;}
  .bn-btn.active{color:var(--gold);}
  .bn-ico{font-size:20px;}
  .play-layout{flex-direction:column;align-items:center;}
  .moves-panel{max-width:none;width:min(92vw,440px);}
}

/* mascot */
.mascot{position:fixed;bottom:80px;left:16px;z-index:60;display:flex;align-items:flex-end;gap:8px;animation:pop .4s ease;}
@media(max-width:640px){.mascot{bottom:76px;}}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.8);}to{opacity:1;transform:none;}}
.mascot-knight{font-size:44px;color:var(--gold);animation:bob 1.5s ease-in-out infinite;}
@keyframes bob{50%{transform:translateY(-6px);}}
.mascot-bubble{background:var(--gold);color:var(--wood-dark);padding:12px 16px;border-radius:16px 16px 16px 4px;
  max-width:220px;font-weight:600;font-size:14px;line-height:1.6;box-shadow:0 6px 20px rgba(0,0,0,.3);}

/* confetti */
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden;}
.conf{position:absolute;top:-20px;width:10px;height:14px;border-radius:2px;animation:fall 2.2s linear forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:0;}}

/* footer */
.footer{text-align:center;margin-top:40px;padding:24px 0;border-top:1px solid var(--border);}
.foot-tag{font-style:italic;color:var(--gold);margin-bottom:8px;}
.foot-copy{color:var(--muted);font-size:13px;margin-bottom:10px;}
.remix{color:var(--gold);font-weight:700;text-decoration:none;border:1px solid var(--border);padding:6px 16px;border-radius:20px;transition:.2s;}
.remix:hover{background:var(--gold);color:var(--wood-dark);}