/* ===== RESET & ROOT ===== */
:root {
  --bg:#0d0d12; --bg2:#13131a; --bg3:#1a1a24;
  --surface:#20202e; --surface2:#282838;
  --border:#2e2e45;
  --amber:#f5a623; --amber-d:#f5a62322;
  --teal:#00c9a7; --teal-d:#00c9a722;
  --rose:#ff6b6b; --rose-d:#ff6b6b22;
  --purple:#a78bfa; --purple-d:#a78bfa22;
  --text:#e8e8f2; --text2:#8888aa; --text3:#44445a;
  --r:12px; --r-sm:8px;
  --shadow:0 8px 32px rgba(0,0,0,.5);
  --shadow-lg:0 20px 60px rgba(0,0,0,.7);
  --tr:all .2s cubic-bezier(.4,0,.2,1);
  --sq-light:#ddb98e; --sq-dark:#966848;
  --sq-selected:#7fc97f; --sq-legal:rgba(100,200,100,.35);
  --sq-capture:rgba(220,60,60,.5); --sq-lastmove:rgba(205,210,106,.55);
  --sq-correct:rgba(50,200,100,.55); --sq-wrong:rgba(220,60,60,.55);
  --sq-correct-answer:rgba(140,100,220,.65);
  --sidebar-w: 64px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:hidden}
body{
  font-family:'Vazirmatn','Tahoma','Arial',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  direction:rtl;min-height:100vh;
  overscroll-behavior:none;
  touch-action:pan-y;
}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select{font-family:inherit}
.hidden{display:none!important}

/* ===== CHESS BOARD ===== */
.chess-board{
  position:relative;
  width:100%;
  max-width:420px;
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  border-radius:8px;
  overflow: visible; /* ✅ اجازه نمایش مختصات بیرون برد */
  direction: ltr; /* ✅ ← دقیقاً همین خط */
}


.square{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  user-select:none;
}

.square.light{
  background:var(--sq-light);
}

.square.dark{
  background:var(--sq-dark);
}
/* مربع انتخاب شده */
.square.selected{
  background:var(--sq-selected);
}

/* حرکت قانونی */
.square.legal{
  box-shadow: inset 0 0 0 4px var(--sq-legal);
}

/* گرفتن مهره */
.square.capture{
  box-shadow: inset 0 0 0 4px var(--sq-capture);
}
/* ===== BOARD COORDINATES ===== */

.board-area{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* قاب کلی برد + اعداد کناری */
.board-wrap{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:4px;
  width:100%;
  max-width:420px;
}

/* ستون اعداد 8 تا 1 */
.coord-ranks{
  display:grid;
  grid-template-rows:repeat(8,1fr);
  align-items:center;
  justify-items:center;
  font-size:12px;
  color:var(--text2);
  user-select:none;
}

.coord-ranks span{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ردیف حروف a تا h */
.coord-files{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  width:100%;
  max-width:420px;
  margin-top:4px;
  padding-left:20px;
  font-size:12px;
  color:var(--text2);
  user-select:none;
  direction:ltr;
}

.coord-files span{
  display:flex;
  align-items:center;
  justify-content:center;
}



/* ستون اعداد 1-8 */
.coord-ranks{
  display:grid;
  grid-template-rows:repeat(8,1fr);
  align-items:center;
  justify-items:center;
  font-size:12px;
  font-weight:700;   /* بولد */
  color:var(--text2);
  user-select:none;
}

/* ردیف حروف a-h */
.coord-files{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  max-width:420px;
  margin-top:4px;
  align-items:center;
  justify-items:center;
  font-size:12px;
  color:var(--text2);
  user-select:none;
  direction:ltr;
}

.coord-files span,
.coord-ranks span{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== PIECES ===== */
.piece{
  font-size:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* ===== SPLASH ===== */
.splash{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .5s,transform .5s}
.splash.out{opacity:0;transform:scale(1.04);pointer-events:none}
.splash-inner{text-align:center;padding:2rem}
.splash-logo{font-size:5rem;display:block;animation:float 2s ease-in-out infinite;margin-bottom:1.5rem}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.splash-title{font-size:2.4rem;font-weight:900;background:linear-gradient(135deg,var(--amber),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}
.splash-sub{color:var(--text2);margin-bottom:2rem}
.splash-bar{width:220px;height:4px;background:var(--surface2);border-radius:99px;margin:0 auto;overflow:hidden}
.splash-fill{height:100%;background:linear-gradient(90deg,var(--amber),var(--teal));animation:fill 2s ease forwards}
@keyframes fill{from{width:0}to{width:100%}}

/* ===== APP LAYOUT ===== */
.app{display:flex;min-height:100vh}

/* ===== SIDEBAR ===== */
.sidebar{
  width:var(--sidebar-w);min-height:100vh;
  background:var(--bg2);border-left:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;
  position:fixed;right:0;top:0;bottom:0;z-index:100;
  padding:1rem .5rem;
}

/* بخش بالای سایدبار - آواتار و جداکننده */
.sidebar-top{
  display:flex;flex-direction:column;align-items:center;
  width:100%;padding-bottom:.75rem;
  border-bottom:1px solid var(--border);
  margin-bottom:.5rem;
}
.sidebar-avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--surface2),var(--bg3));
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;border:2px solid var(--border);
  cursor:default;user-select:none;
}
.sidebar-avatar.logged-in{border-color:var(--amber);}

/* بخش پایین سایدبار - آیکون‌های منو */
.sidebar-nav{
  display:flex;flex-direction:column;
  align-items:center;gap:.25rem;
  flex:1;justify-content:flex-end;
  padding-bottom:1rem;
  width:100%;
}
.nav-item{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-sm);
  color:var(--text2);font-size:1.3rem;
  transition:var(--tr);cursor:pointer;
}
.nav-item:hover{background:var(--surface);color:var(--text)}
.nav-item.active{background:var(--amber-d);color:var(--amber)}

/* دایره پیشرفت */
.sidebar-progress{
  width:100%;display:flex;flex-direction:column;align-items:center;
  padding-top:.5rem;border-top:1px solid var(--border);
  margin-top:auto;
}
.progress-ring{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--surface2);stroke-width:5}
.ring-fill{fill:none;stroke:var(--amber);stroke-width:5;stroke-linecap:round;stroke-dasharray:100.5;stroke-dashoffset:100.5;transition:stroke-dashoffset 1s ease}
.ring-label{font-size:.6rem;font-weight:800;color:var(--amber);text-align:center;margin-top:.15rem}

/* ===== MAIN CONTENT ===== */
.main-content{
  margin-right:var(--sidebar-w);flex:1;
  min-height:100vh;overflow-x:hidden;
}

/* ===== HEADER ===== */
.app-header{
  background:var(--bg2);padding:1.25rem 1.5rem 1rem;
  border-bottom:2px solid transparent;
  position:relative;overflow:hidden;
}
.app-header::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--amber),var(--teal),var(--purple),var(--amber));
  background-size:200% 100%;
  animation:shimmer 3s linear infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* جداکننده شطرنجی */
.chess-divider{
  height:20px;overflow:hidden;
  display:flex;
}
.chess-divider-inner{
  display:flex;width:100%;
}
.chess-tile{
  flex:1;height:20px;
}
.chess-tile:nth-child(odd){background:rgba(245,166,35,.15)}
.chess-tile:nth-child(even){background:rgba(0,201,167,.08)}

.header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.25rem}
.header-brand{display:flex;align-items:center;gap:.5rem}
.brand-chess{font-size:1.4rem}
.brand-name{font-size:1rem;font-weight:900;color:var(--amber)}
.header-auth{display:flex;gap:.5rem}
.user-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:.45rem .95rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:800;
  color:var(--text);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  white-space:nowrap;
}
.btn-auth{font-size:.8rem;font-weight:700;padding:.4rem .9rem;border-radius:var(--r-sm);transition:var(--tr);cursor:pointer}
.btn-login{background:var(--surface);color:var(--text2);border:1px solid var(--border)}
.btn-login:hover{border-color:var(--amber);color:var(--amber)}
.btn-register{background:var(--amber);color:#000}
.btn-register:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(245,166,35,.3)}

.welcome-text{font-size:1.5rem;font-weight:900;margin-bottom:.15rem}
.welcome-text span{background:linear-gradient(90deg,var(--amber),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.welcome-sub{color:var(--text2);font-size:.85rem}

/* ===== PAGES ===== */
.page{display:none;animation:pageIn .3s ease;padding:1.5rem}
.page.active{display:block}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.page-header{margin-bottom:1.5rem}
.page-title{font-size:1.7rem;font-weight:900;margin-bottom:.2rem}
.page-sub{color:var(--text2);font-size:.88rem}
.section-title{font-size:.95rem;font-weight:700;color:var(--text2);margin:1.5rem 0 .75rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}

/* ===== HOME GUIDE CARDS ===== */
.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:.5rem}
.guide-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem;transition:var(--tr);cursor:pointer;text-align:center}
.guide-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.guide-icon{font-size:2rem;margin-bottom:.6rem}
.guide-card h3{font-size:.95rem;font-weight:700;margin-bottom:.4rem}
.guide-card p{font-size:.8rem;color:var(--text2);line-height:1.6}
.card-amber{border-top:3px solid var(--amber)}
.card-teal{border-top:3px solid var(--teal)}
.card-rose{border-top:3px solid var(--rose)}
.card-purple{border-top:3px solid var(--purple)}

/* ===== STATS ===== */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1rem}
.stat-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem;text-align:center;min-width:0;overflow-wrap:break-word}
.stat-val{font-size:1.8rem;font-weight:900;color:var(--amber);overflow-wrap:break-word;word-break:break-word}
.stat-lbl{font-size:.75rem;color:var(--text2);margin-top:.2rem;overflow-wrap:break-word;word-break:break-word}

/* ===== MODULES LIST ===== */
.modules-list{display:flex;flex-direction:column;gap:.75rem}
.module-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:1rem 1.25rem;
  display:flex;align-items:center;gap:1rem;
  transition:var(--tr);
  overflow:hidden;
}
.module-card.unlocked{cursor:pointer}
.module-card.unlocked:hover{border-color:var(--amber);box-shadow:var(--shadow)}
.module-card.locked{opacity:.35}
.module-card.done{border-color:var(--teal)}
.m-num{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;flex-shrink:0;background:var(--surface2);
}
.module-card.unlocked .m-num{background:var(--amber-d);color:var(--amber)}
.module-card.done .m-num{background:var(--teal-d);color:var(--teal)}
.m-info{flex:1;min-width:0}
.m-info h3{font-size:.92rem;font-weight:700;margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-info p{font-size:.78rem;color:var(--text2)}
.m-right{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;flex-shrink:0}
.m-badge{font-size:.75rem;font-weight:700;padding:.18rem .65rem;border-radius:99px;white-space:nowrap}
.module-card.locked .m-badge{background:var(--surface2);color:var(--text3)}
.module-card.unlocked .m-badge{background:var(--amber-d);color:var(--amber)}
.module-card.done .m-badge{background:var(--teal-d);color:var(--teal)}

/* ===== PROFILE ===== */
.profile-card{
  max-width:500px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;
  touch-action:pan-y;
  overscroll-behavior:contain;
}
.avatar-wrap{text-align:center;margin-bottom:1.5rem}
.avatar-selector{display:flex;justify-content:center;gap:.75rem;margin-bottom:.75rem;flex-wrap:wrap}
.avatar-opt{
  width:56px;height:56px;border-radius:50%;border:3px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
  cursor:pointer;transition:var(--tr);background:var(--surface2);
}
.avatar-opt.selected,.avatar-opt:hover{border-color:var(--amber);transform:scale(1.08)}
.avatar{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.2rem;margin:0 auto .5rem;background:linear-gradient(135deg,var(--surface2),var(--bg3));border:3px solid var(--amber)}
.profile-form{display:flex;flex-direction:column;gap:1rem}
.form-row{display:flex;flex-direction:column;gap:.3rem}
.form-row label{font-size:.8rem;font-weight:600;color:var(--text2)}
.form-row input,.form-row select{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:.7rem 1rem;color:var(--text);font-size:.92rem;outline:none;transition:var(--tr)}
.form-row input:focus,.form-row select:focus{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-d)}
.form-row select{direction:rtl}
.gender-row{display:flex;gap:.75rem}
.gender-opt{flex:1;padding:.6rem;border-radius:var(--r-sm);border:2px solid var(--border);background:var(--bg3);cursor:pointer;text-align:center;font-size:.85rem;font-weight:600;color:var(--text2);transition:var(--tr)}
.gender-opt.selected,.gender-opt:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-d)}
.btn-primary{background:linear-gradient(135deg,var(--amber),#c07800);color:#000;font-weight:900;font-size:1rem;padding:.8rem;border-radius:var(--r-sm);transition:var(--tr)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,166,35,.3)}
.profile-saved{margin-top:.75rem;text-align:center;color:var(--teal);font-weight:600;font-size:.85rem}

/* ===== SCORES ===== */
.scores-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem;margin-bottom:1.5rem}
.scores-grid{display:flex;flex-direction:column;gap:.75rem}
.score-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.25rem}
.score-row-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.score-lbl{font-weight:700;font-size:.9rem}
.score-badge{font-size:1.2rem;font-weight:900;padding:.25rem .85rem;border-radius:var(--r-sm)}
.sc-a{background:var(--teal-d);color:var(--teal)}.sc-b{background:var(--amber-d);color:var(--amber)}.sc-c{background:var(--rose-d);color:var(--rose)}
.score-row-stats{display:flex;gap:.75rem;flex-wrap:wrap}
.score-stat{font-size:.78rem;color:var(--text2);background:var(--bg3);padding:.25rem .6rem;border-radius:var(--r-sm)}
.score-stat span{font-weight:700;color:var(--text)}
.score-date{font-size:.7rem;color:var(--text3);margin-top:.4rem}
.no-scores{text-align:center;padding:3rem;color:var(--text3);font-size:.9rem}

/* ===== MODAL ===== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.85);
  backdrop-filter:blur(12px);
  display:flex;align-items:flex-start;justify-content:center;
  z-index:1000;padding:1rem;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  width:100%;max-width:680px;
  animation:slideUp .3s ease;
  touch-action:pan-y;
  overscroll-behavior:contain;
  position:relative;
  margin:auto;
}
@keyframes slideUp{from{transform:translateY(28px);opacity:0}to{transform:translateY(0);opacity:1}}
.btn-modal-back{color:var(--text2);font-size:.85rem;padding:.45rem .9rem;border-radius:var(--r-sm);background:var(--surface);transition:var(--tr)}
.btn-modal-back:hover{background:var(--surface2);color:var(--text)}

/* ===== EXIT CONFIRM ===== */
.exit-confirm-modal{max-width:380px;margin:auto}
.exit-confirm-modal .modal-head{padding:1rem 1.25rem;border-bottom:1px solid var(--border)}
.exit-confirm-modal .modal-body{padding:1.5rem 1.25rem}
.exit-confirm-text{color:var(--text2);font-size:.95rem;text-align:center;margin-bottom:1.5rem}
.exit-confirm-btns{display:flex;gap:.75rem}
.exit-confirm-btns .btn{flex:1;padding:.7rem;border:none;border-radius:var(--r-sm);font-size:.9rem;font-weight:700;cursor:pointer;transition:var(--tr)}
.btn-exit{background:#d93025;color:#fff}
.btn-exit:hover{opacity:.85}
.btn-cancel-exit{background:var(--surface);color:var(--text2);border:1px solid var(--border)!important}
.btn-cancel-exit:hover{background:var(--surface2);color:var(--text)}



/* ===== LESSON MODAL ===== */
.lesson-modal{padding:0}
.lesson-topbar{padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center}
#lessonContent{padding:1.25rem 1.5rem 1.5rem;overflow-y:auto}
.lesson-tag{display:inline-block;background:var(--amber-d);color:var(--amber);font-size:.72rem;font-weight:700;padding:.18rem .65rem;border-radius:99px;margin-bottom:.75rem}
.lesson-modal h2{font-size:1.35rem;font-weight:900;margin-bottom:1.25rem}
.lesson-sec{margin-bottom:1.5rem}
.lesson-sec h3{font-size:.9rem;font-weight:700;color:var(--amber);margin-bottom:.6rem;padding-bottom:.35rem;border-bottom:1px solid var(--border)}
.lesson-sec p{font-size:.85rem;color:var(--text2);line-height:1.9}
.lesson-sec ul{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.lesson-sec ul li{font-size:.84rem;color:var(--text2);padding:.45rem .7rem .45rem 1rem;border-right:3px solid var(--amber);background:var(--surface);border-radius:0 var(--r-sm) var(--r-sm) 0}
.keyex-box{background:var(--surface);border:1px solid var(--amber);border-radius:var(--r-sm);padding:.9rem;font-size:.83rem;color:var(--text2);line-height:1.8;margin-bottom:.75rem}
.keyex-box strong{color:var(--amber)}
.example-wrap{text-align:center;margin:1rem 0}
.example-board{display:grid;grid-template-columns:repeat(8,1fr);width:240px;height:240px;margin:0 auto;border:3px solid #2a1a0a;border-radius:3px;overflow:hidden;box-shadow:var(--shadow);direction:ltr}
.example-board-wrap{display:inline-block;text-align:center}
.example-coords-files{display:flex;width:234px;margin:3px auto 0;padding:0;padding-left:3px;direction:ltr}
.example-coords-files span{flex:1;font-size:.6rem;font-weight:900;color:var(--text);text-align:center}
.example-note{font-size:.8rem;color:var(--text2);margin-top:.6rem}
.example-notation{margin-top:.65rem;font-size:1rem;font-weight:900;color:var(--amber);letter-spacing:.02em;text-align:center}
.board-with-ranks{display:flex;align-items:start;gap:4px;margin:0 auto;width:fit-content}
.example-coords-ranks{display:flex;flex-direction:column;width:14px;padding-top:3px;padding-bottom:3px}
.example-coords-ranks span{height:30px;font-size:.6rem;font-weight:900;color:var(--text);display:flex;align-items:center;justify-content:center}
.btn-start-lesson{width:100%;background:linear-gradient(135deg,var(--amber),#c07800);color:#000;font-weight:900;font-size:1rem;padding:.9rem;border-radius:var(--r-sm);transition:var(--tr);margin-top:1.25rem}
.btn-start-lesson:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,166,35,.3)}

/* ===== INTERACTIVE EXAMPLE CONTROLS ===== */
.ex-controls{display:flex;justify-content:center;gap:.75rem;margin-top:.8rem}
.ex-btn{background:var(--surface2);color:var(--text1);border:1px solid var(--border);border-radius:var(--r-sm);padding:.45rem 1.1rem;font-size:.82rem;font-weight:700;cursor:pointer;transition:var(--tr)}
.ex-btn:hover:not(:disabled){background:var(--amber);color:#000;border-color:var(--amber)}
.ex-btn:disabled{opacity:.35;cursor:not-allowed}
.ex-step-info{font-size:.78rem;color:var(--text2);text-align:center;margin-top:.4rem}
.ex-notation-multi{display:flex;justify-content:center;flex-wrap:wrap;gap:.3rem .6rem}
.ex-mv-active{color:var(--amber);font-weight:900;text-decoration:underline;text-underline-offset:3px}
.ex-mv-done{color:var(--teal)}
.ex-mv-pending{color:var(--text3)}
.ex-gif-wrap{margin-top:.8rem;text-align:center}
.ex-gif-img{max-width:240px;width:100%;border-radius:var(--r-sm);border:2px solid var(--border);box-shadow:var(--shadow)}

/* ===== PUZZLE MODAL ===== */
.puzzle-modal{max-width:860px;padding:0}
.puzzle-topbar{display:flex;align-items:center;gap:.75rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.puzzle-title-wrap{flex:1;min-width:0}
.puzzle-title{font-size:.95rem;font-weight:800;display:block}
.puzzle-desc{font-size:.75rem;color:var(--text2)}
.puzzle-meta-row{display:flex;align-items:center;gap:.6rem}
.puzzle-theme{background:var(--purple-d);color:var(--purple);border-radius:var(--r-sm);padding:.35rem .9rem;font-size:.82rem;font-weight:700;white-space:nowrap}
.timer-box{background:var(--surface2);border-radius:var(--r-sm);padding:.35rem .9rem;font-size:.9rem;font-weight:800;color:var(--amber);direction:ltr;font-variant-numeric:tabular-nums}
.score-box{background:var(--teal-d);color:var(--teal);border-radius:var(--r-sm);padding:.35rem .9rem;font-size:.82rem;font-weight:700}

.puzzle-body{display:grid;grid-template-columns:1fr 240px;gap:1.25rem;padding:1rem 1.25rem;align-items:start}

/* نوبت بازی */
.turn-banner{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--surface);border-radius:var(--r-sm);
  padding:.6rem 1rem;margin:.2rem 0 .5rem;
  font-weight:700;font-size:.88rem;
}
.turn-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.turn-dot.white{background:#fefce8;border:2px solid #888}
.turn-dot.black{background:#1a0d05;border:2px solid #8b5e3c}

/* BOARD */
/* BOARD */
.board-area{display:flex;flex-direction:column;align-items:center}


.coord-ranks{
  display:grid;
  grid-template-rows:repeat(8,1fr);
  width:16px;
}

.coord-ranks span{
  font-size:.58rem;
  font-weight:700;
  color:var(--text3);
  display:flex;
  align-items:center;
  justify-content:center;
}

.coord-files{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  padding-left:16px;
  margin-top:2px;
  direction:ltr;
}

.coord-files span{
  font-size:.58rem;
  font-weight:700;
  color:var(--text3);
  text-align:center;
}
.coord-ranks{display:flex;flex-direction:column;width:16px;justify-content:space-around}
.coord-ranks span{font-size:.6rem;font-weight:800;color:rgba(245,240,230,.88);display:flex;align-items:center;justify-content:center;height:12.5%;text-shadow:0 0 1px rgba(0,0,0,.45)}
.coord-files{display:flex;padding-left:16px;margin-top:2px;direction:ltr}
.coord-files span{flex:1;font-size:.6rem;font-weight:800;color:rgba(245,240,230,.88);text-align:center;text-shadow:0 0 1px rgba(0,0,0,.45)}

.chess-board{display:grid;grid-template-columns:repeat(8,1fr);border:3px solid #1a0d05;border-radius:2px;overflow:visible;box-shadow:0 4px 24px rgba(0,0,0,.7);width:100%;max-width:420px;aspect-ratio:1;user-select:none;direction:ltr}
.chess-square{aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.sq-light{background:var(--sq-light)}
.sq-dark{background:var(--sq-dark)}
.sq-selected{background:var(--sq-selected)!important}
.sq-lastmove{background:var(--sq-lastmove)!important}
.sq-correct{background:var(--sq-correct)!important}
.sq-wrong{background:var(--sq-wrong)!important}
.sq-correct-answer{background:var(--sq-correct-answer)!important}
.sq-legal::after{content:'';position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(0,0,0,.22);pointer-events:none}
.sq-capture{outline:3px solid rgba(220,50,50,.7);outline-offset:-3px}

/* PIECES */
.cp{pointer-events:none;line-height:1;display:block;font-size:clamp(1.1rem,2.6vw,1.9rem);transition:transform .1s}
.chess-square:hover .cp{transform:scale(1.08)}
.cp-w{color:#ffffff;font-weight:900;text-shadow:0 0 3px #000,1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,0 0 8px rgba(0,0,0,.95);filter:drop-shadow(0 1px 3px rgba(0,0,0,.9));-webkit-text-stroke:0.5px #000;}
.cp-b{color:#1a0d05;text-shadow:0 0 2px #8b5e3c,1px 1px 0 #7a4a25,-1px -1px 0 #7a4a25,1px -1px 0 #7a4a25,-1px 1px 0 #7a4a25;filter:drop-shadow(0 1px 3px rgba(255,180,100,.15));}

/* BOARD HINT */
.board-hint{font-size:.75rem;color:var(--text2);margin-top:.35rem;text-align:center;padding:.2rem 0;white-space:pre-line;line-height:1.7}

/* PANEL */
.puzzle-panel{display:flex;flex-direction:column;gap:.75rem}
.moves-log-box{background:var(--surface);border-radius:var(--r-sm);padding:.65rem .9rem;min-height:50px}
.moves-log-title{font-size:.68rem;font-weight:700;color:var(--text2);margin-bottom:.4rem}
#movesLog{display:flex;flex-wrap:wrap;gap:.3rem;direction:ltr}
.mv-tag{border-radius:4px;padding:.15rem .5rem;font-size:.75rem;font-weight:700}
.mv-ok{background:var(--teal-d);color:var(--teal)}.mv-err{background:var(--rose-d);color:var(--rose)}.mv-dk{background:var(--purple-d);color:var(--purple)}.mv-auto{background:rgba(180,180,180,.15);color:#aaa;border:1px solid rgba(180,180,180,.3)}
.feedback-box{border-radius:var(--r-sm);padding:.65rem .9rem;font-weight:700;font-size:.85rem;animation:pop .25s ease;line-height:1.7}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.fb-ok{background:var(--teal-d);color:var(--teal)}.fb-err{background:var(--rose-d);color:var(--rose)}.fb-hint{background:var(--purple-d);color:var(--purple)}.fb-dk{background:rgba(140,100,220,.18);color:var(--purple)}
.score-badge{display:inline-block;background:var(--teal);color:#fff;padding:2px 10px;border-radius:20px;font-size:.8rem;font-weight:700;margin-left:.5rem;float:left;direction:ltr}
.solution-gif-wrap{margin-top:.75rem;border-radius:var(--r-sm);background:rgba(200,168,74,.12);border:1px solid rgba(200,168,74,.3);padding:.65rem .9rem;animation:pop .3s ease;text-align:center}
.solution-gif-wrap.hidden{display:none}
.solution-gif-label{font-size:.8rem;font-weight:700;color:var(--amber);margin-bottom:.5rem}
.solution-gif-img{max-width:100%;border-radius:var(--r-sm);border:2px solid var(--amber)}

/* ===== PROMOTION PICKER ===== */
.promotion-picker{position:fixed;z-index:1100;display:flex;flex-direction:column;gap:4px;background:#ddb98e;border:2px solid var(--amber);border-radius:var(--r-sm);padding:4px;box-shadow:var(--shadow);animation:pop .2s ease}
.promotion-picker .promo-btn{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:2rem;cursor:pointer;border:1px solid #966848;border-radius:6px;background:#f0dcc0;transition:var(--tr)}
.promotion-picker .promo-btn:hover{background:#c4a26a;border-color:var(--amber)}
.action-btns{display:flex;flex-direction:column;gap:.45rem}
.btn-hint{background:var(--purple-d);color:var(--purple);border-radius:var(--r-sm);padding:.6rem 1rem;font-weight:700;font-size:.85rem;transition:var(--tr)}
.btn-hint:hover{background:var(--purple);color:#fff}.btn-hint:disabled{opacity:.35;cursor:not-allowed}
.btn-dontknow{background:rgba(140,100,220,.15);color:var(--purple);border:1px solid rgba(140,100,220,.3);border-radius:var(--r-sm);padding:.6rem 1rem;font-weight:700;font-size:.85rem;transition:var(--tr)}
.btn-dontknow:hover{background:var(--purple);color:#fff}
.btn-next{background:var(--amber);color:#000;border-radius:var(--r-sm);padding:.6rem 1rem;font-weight:900;font-size:.85rem;transition:var(--tr)}
.btn-next:hover{transform:translateY(-2px)}
.btn-finish{background:var(--teal);color:#000;border-radius:var(--r-sm);padding:.6rem 1rem;font-weight:900;font-size:.85rem;transition:var(--tr)}
.btn-finish:hover{transform:translateY(-2px)}

/* ===== RESULT MODAL ===== */
.result-modal{max-width:440px}
#resultContent{padding:2rem;text-align:center}
.res-trophy{font-size:3.5rem;margin-bottom:.75rem}
.res-title{font-size:1.5rem;font-weight:900;margin-bottom:.35rem}
.res-sub{color:var(--text2);margin-bottom:1.25rem;font-size:.88rem}
.res-score{font-size:3rem;font-weight:900;background:linear-gradient(135deg,var(--amber),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.res-score-lbl{color:var(--text2);font-size:.85rem;margin-bottom:1.25rem}
.res-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1.25rem}
.res-stat{background:var(--surface);border-radius:var(--r-sm);padding:.85rem}
.res-stat-v{font-size:1.4rem;font-weight:900;color:var(--amber)}.res-stat-l{font-size:.7rem;color:var(--text2);margin-top:.15rem}
.res-stat.stat-correct .res-stat-v{color:var(--teal)}.res-stat.stat-wrong .res-stat-v{color:var(--rose)}.res-stat.stat-dk .res-stat-v{color:var(--purple)}
.res-unlock{background:var(--teal-d);color:var(--teal);border-radius:var(--r-sm);padding:.65rem .9rem;margin-bottom:.9rem;font-weight:700;font-size:.85rem}
.btn-res{background:linear-gradient(135deg,var(--amber),#c07800);color:#000;font-weight:900;font-size:1rem;padding:.85rem 2rem;border-radius:var(--r-sm);transition:var(--tr);width:100%}
.btn-res:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,166,35,.3)}

/* ===== AUTH MODAL ===== */
.auth-modal{max-width:400px;padding:0}
.auth-modal-header{padding:1.25rem 1.5rem 1rem;border-bottom:1px solid var(--border);text-align:center}
.auth-modal-title{font-size:1rem;font-weight:700;color:var(--text2);margin-bottom:.5rem}
.auth-modal-heading{font-size:1.4rem;font-weight:900}
.auth-modal-body{padding:1.25rem 1.5rem 1.5rem}
.auth-tabs{display:flex;gap:.5rem;margin-bottom:1.25rem;background:var(--surface);border-radius:var(--r-sm);padding:.25rem}
.auth-tab{flex:1;padding:.6rem;border-radius:6px;font-weight:700;font-size:.88rem;transition:var(--tr);text-align:center;cursor:pointer;color:var(--text2)}
.auth-tab.active{background:var(--amber);color:#000}
.auth-form{display:flex;flex-direction:column;gap:.9rem}
.auth-divider{text-align:center;color:var(--text3);font-size:.8rem;margin:.25rem 0}
.btn-auth-submit{background:linear-gradient(135deg,var(--amber),#c07800);color:#000;font-weight:900;padding:.8rem;border-radius:var(--r-sm);font-size:1rem;transition:var(--tr);width:100%;margin-top:.25rem}
.btn-auth-submit:hover{transform:translateY(-2px)}
.auth-switch{text-align:center;font-size:.82rem;color:var(--text2);margin-top:.75rem}
.auth-switch a{color:var(--amber);cursor:pointer;font-weight:700}

/* ===== RESPONSIVE MOBILE ===== */
@media(max-width:680px){
  :root{--sidebar-w:52px}
  .nav-item{width:38px;height:38px;font-size:1.1rem}
  .puzzle-body{grid-template-columns:1fr}
  .puzzle-panel{margin-top:.75rem}
  .stats-row{grid-template-columns:1fr}
  .chess-board{max-width:100%}
  .guide-grid{grid-template-columns:1fr 1fr}
  .welcome-text{font-size:1.25rem}
  .page{padding:1rem}
  .app-header{padding:1rem}
  .modal-overlay{padding:.5rem;align-items:flex-start}
  .modal-box{margin:0}
}
@media(max-width:400px){
  .guide-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr}
  .header-auth{gap:.35rem}
  .btn-auth{font-size:.72rem;padding:.35rem .65rem}
}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.piece{
  font-size:38px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  pointer-events:none;
  transition:transform 0.25s ease-out;
}

@media (max-width: 900px){
  .puzzle-body{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .puzzle-panel{
    width:100%;
  }
}

@media (max-width: 768px){
  body{
    padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px));
  }

  .app{
    display:block;
  }

  .sidebar{
    width:100%;
    min-height:auto;
    height:auto;
    right:0;
    left:0;
    top:auto;
    bottom:0;
    border-left:none;
    border-top:1px solid var(--border);
    flex-direction:row;
    justify-content:space-between;
    padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px));
    background:rgba(19,19,26,.96);
    backdrop-filter:blur(12px);
  }

  .sidebar-top,
  .sidebar-progress{
    display:none;
  }

  .sidebar-nav{
    flex-direction:row;
    justify-content:space-around;
    align-items:center;
    gap:.35rem;
    width:100%;
    padding:0;
  }

  .nav-item{
    width:44px;
    height:44px;
    border-radius:12px;
    font-size:1.2rem;
    flex:1;
    max-width:56px;
  }

  .main-content{
    margin-right:0;
    min-height:auto;
  }

  .app-header{
    padding:1rem;
  }

  .header-top{
    gap:.75rem;
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .header-brand{
    min-width:0;
  }

  .header-auth{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .user-pill{
    order:1;
  }

  .welcome-text{
    font-size:1.2rem;
    line-height:1.5;
  }

  .welcome-sub{
    font-size:.8rem;
    line-height:1.7;
  }

  .page{
    padding:1rem .9rem 6rem;
  }

  .page-header{
    margin-bottom:1rem;
  }

  .page-title{
    font-size:1.35rem;
    line-height:1.4;
  }

  .page-sub{
    font-size:.82rem;
    line-height:1.7;
  }

  .guide-grid,
  .stats-row,
  .scores-summary{
    grid-template-columns:1fr;
  }

  .guide-card,
  .stat-box,
  .score-row,
  .profile-card{
    padding:1rem;
  }

  .module-card{
    padding:.9rem 1rem;
    align-items:flex-start;
    gap:.8rem;
    flex-wrap:wrap;
  }

  .m-num{
    width:42px;
    height:42px;
    font-size:1.15rem;
  }

  .m-info{
    min-width:0;
    width:calc(100% - 54px);
  }

  .m-info h3{
    white-space:normal;
    line-height:1.6;
  }

  .m-info p{
    line-height:1.7;
  }

  .m-right{
    width:100%;
    align-items:flex-start;
  }

  .gender-row,
  .score-row-top{
    flex-direction:column;
    align-items:stretch;
    gap:.6rem;
  }

  .score-row-stats{
    gap:.45rem;
  }

  .modal-overlay{
    padding:.55rem;
    align-items:flex-start;
  }

  .modal-box,
  .lesson-modal,
  .puzzle-modal,
  .auth-modal,
  .result-modal{
    max-width:none;
    width:100%;
    border-radius:14px;
  }

  .auth-modal-header,
  .auth-modal-body,
  #lessonContent,
  .puzzle-topbar,
  .puzzle-body,
  #resultContent{
    padding-left:1rem;
    padding-right:1rem;
  }

  .lesson-modal h2{
    font-size:1.15rem;
    line-height:1.5;
  }

  .lesson-sec p,
  .lesson-sec ul li{
    line-height:1.9;
  }

  .example-board{
    width:min(240px, 100%);
    height:auto;
    aspect-ratio:1;
  }

  .example-coords-files{
    width:min(240px, 100%);
  }

  .puzzle-topbar{
    gap:.7rem;
    align-items:stretch;
  }

  .puzzle-title-wrap,
  .puzzle-meta-row{
    width:100%;
  }

  .puzzle-meta-row{
    justify-content:space-between;
    flex-wrap:wrap;
  }

  .timer-box,
  .score-box{
    flex:1 1 120px;
    text-align:center;
  }

  .board-wrap,
  .coord-files,
  .chess-board{
    max-width:min(100%, 360px);
  }

  .board-hint{
    font-size:.72rem;
    line-height:1.8;
    max-width:360px;
  }

  .moves-log-box,
  .feedback-box{
    width:100%;
  }

  .action-btns button{
    min-height:44px;
  }

  .btn-hint,
  .btn-dontknow,
  .btn-next,
  .btn-finish,
  .btn-primary,
  .btn-auth-submit,
  .btn-start-lesson,
  .btn-res{
    width:100%;
  }
}

@media (max-width: 480px){
  body{
    padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px));
  }

  .splash-title{
    font-size:2rem;
  }

  .header-auth{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .user-pill{
    grid-column:1 / -1;
    width:100%;
  }

  .btn-auth{
    width:100%;
    text-align:center;
    padding:.55rem .7rem;
  }

  .profile-card{
    padding:.9rem;
  }

  .avatar-opt{
    width:50px;
    height:50px;
    font-size:1.5rem;
  }

  .avatar{
    width:72px;
    height:72px;
    font-size:2rem;
  }

  .puzzle-title{
    font-size:.9rem;
  }

  .puzzle-desc,
  .moves-log-title,
  .board-hint,
  .score-stat,
  .stat-lbl{
    font-size:.74rem;
  }

  .board-wrap{
    grid-template-columns:14px 1fr;
    gap:3px;
  }

  .coord-ranks{
    width:14px;
  }

  .coord-ranks span,
  .coord-files span{
    font-size:.56rem;
  }

  .coord-files{
    padding-left:14px;
  }

  .cp{
    font-size:clamp(1rem, 7vw, 1.6rem);
  }

  .turn-banner{
    width:100%;
    font-size:.8rem;
    padding:.55rem .75rem;
  }

  .score-row,
  .module-card{
    padding:.85rem;
  }
}