/* ============================================================
   Khan SAT-1600 · Шахматы (v148)
   Author: Xudoyorxon Bunyodov / Худоёрхон Бунёдов
   ============================================================ */
.kc-page, .kc-diagram, .kc-studio, .kc-homecard {
  --kc-l: #EEEED2; --kc-d: #769656; --kc-sel: #F6F669; --kc-last: #F7EC74;
  --kc-chk: #E57373; --kc-hint: #64B5F6; --kc-g: #1B5E20; --kc-gold: #C9A227;
  --kc-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}
.kc-page { max-width: 1180px; margin: 0 auto; padding: 2px 0 40px; font-family: var(--kc-sans); }
.kc-page *, .kc-page *::before, .kc-page *::after { box-sizing: border-box; }
.kc-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.kc-top h1 { margin: 0; font-size: 24px; color: inherit; }
.kc-back { color: var(--kc-g); font-weight: 600; text-decoration: none; }
html[data-theme="dark"] .kc-back { color: #A5D6A7; }
.kc-hero {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 26px; align-items: center;
  background: #fff; color: #1a1a1a; border-radius: 20px; padding: 26px 28px; margin-bottom: 20px;
  border: 1.5px solid #dfe6df; box-shadow: 0 10px 28px rgba(27,94,32,.08);
}
.kc-kicker { color: var(--kc-g); font-weight: 700; font-size: 13.5px; }
.kc-hero h1 { font-size: 28px; margin: 5px 0 10px; color: #1a1a1a; }
.kc-hero p { color: #3c463d; line-height: 1.6; margin: 0 0 14px; font-size: 15px; }
.kc-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.kc-stats span { display: flex; flex-direction: column; background: #f2f7f2; border-radius: 12px; padding: 8px 14px; font-size: 12.5px; color: #4a574c; }
.kc-stats b { font-size: 19px; color: var(--kc-g); }
.kc-stats-sm span { padding: 6px 10px; }
.kc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kc-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; background: #fff; color: #1a1a1a;
  border: 1.5px solid #dfe6df; border-radius: 16px; padding: 16px 18px; transition: transform .15s, border-color .15s;
}
.kc-card:hover { transform: translateY(-2px); border-color: var(--kc-g); }
.kc-card i { font-style: normal; font-size: 30px; line-height: 1; color: var(--kc-g); }
.kc-card b { font-size: 16px; }
.kc-card span { font-size: 13.5px; color: #4a574c; line-height: 1.5; }

/* доска */
.kc-layout { display: grid; grid-template-columns: minmax(300px, 1fr) 330px; gap: 20px; align-items: start; }
/* доска не должна занимать весь экран: держим её в разумных пределах,
   иначе на широком мониторе она уезжает ниже сгиба */
.kc-bwrap { position: relative; width: 100%; max-width: min(560px, calc(100vh - 230px)); margin: 0 auto; }
.kc-board {
  display: grid; grid-template-columns: repeat(8, 1fr); width: 100%; aspect-ratio: 1 / 1;
  border-radius: 10px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.18); user-select: none; touch-action: manipulation;
}
.kc-sq { position: relative; display: grid; place-items: center; }
.kc-sq.l { background: var(--kc-l); }
.kc-sq.d { background: var(--kc-d); }
.kc-sq.last { box-shadow: inset 0 0 0 100px rgba(247,236,116,.45); }
.kc-sq.sel { box-shadow: inset 0 0 0 100px rgba(246,246,105,.55); }
.kc-sq.chk { box-shadow: inset 0 0 0 100px rgba(229,115,115,.6); }
.kc-sq.hint { box-shadow: inset 0 0 0 4px var(--kc-hint); }
.kc-sq.t-dot::after { content: ''; position: absolute; width: 26%; height: 26%; border-radius: 50%; background: rgba(20,30,20,.28); }
.kc-sq.t-cap::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; border: 6px solid rgba(20,30,20,.25); }
.kc-pc { font-size: min(8.5vw, 44px); line-height: 1; cursor: grab; position: relative; z-index: 2; }
.kc-board .kc-pc.w { color: #fff; text-shadow: 0 0 1.5px #2b2b2b, 0 0 1.5px #2b2b2b, 0 1px 2px rgba(0,0,0,.5); }
.kc-board .kc-pc.b { color: #1e1e1e; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.kc-ghost { position: fixed; z-index: 1200; pointer-events: none; display: grid; place-items: center; }
.kc-cf, .kc-cr { position: absolute; font-style: normal; font-size: 10px; font-weight: 700; opacity: .65; color: #2c3a2d; }
.kc-cf { bottom: 1px; right: 3px; }
.kc-cr { top: 1px; left: 3px; }
.kc-sq.d .kc-cf, .kc-sq.d .kc-cr { color: #eef3ea; }
.kc-promo { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,20,10,.45); z-index: 6; }
.kc-promo > div { display: flex; gap: 6px; background: #fff; padding: 8px; border-radius: 14px; }
.kc-promo button { width: 54px; height: 54px; border: 1.5px solid #d7ded7; border-radius: 10px; background: #fff; cursor: pointer; font-size: 32px; }
.kc-promo button:hover { border-color: var(--kc-g); }
.kc-static .kc-pc { cursor: default; }
.kc-diagram { max-width: 420px; }
.kc-diagram.kc-q { max-width: 330px; margin: 0 0 14px; }
.kc-diagram.kc-mini { max-width: 280px; }
.kc-diagram.kc-mid { max-width: 340px; margin: 12px 0; }
.kc-turn { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 13px; color: #5b675c; font-family: var(--kc-sans); }
.kc-turn i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #6b776c; display: inline-block; }
.kc-turn i.w { background: #fff; }
.kc-turn i.b { background: #1e1e1e; }
.kc-err { color: #b3261e; font-size: 13px; }

/* боковая панель */
.kc-side { display: flex; flex-direction: column; gap: 12px; }
.kc-status { background: #fff; border: 1.5px solid #dfe6df; border-radius: 12px; padding: 11px 14px; font-size: 14px; line-height: 1.5; color: #1a1a1a; min-height: 44px; }
.kc-status.ok { border-color: #7cb97f; background: #f1f8f1; }
.kc-status.bad { border-color: #e0a3a0; background: #fdf3f2; }
.kc-task { background: var(--kc-g); color: #fff; border-radius: 12px; padding: 12px 14px; }
.kc-task span { display: block; font-size: 12px; color: #cfe3d1; margin-bottom: 4px; }
.kc-task b { font-size: 14.5px; line-height: 1.45; }
.kc-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: #4a574c; }
.kc-field select, .kc-field input { border: 1.5px solid #cfd8cf; border-radius: 10px; padding: 8px 10px; font: 14px var(--kc-sans); background: #fff; color: #1a1a1a; }
.kc-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.kc-btn {
  border: 1.5px solid #cfd8cf; background: #fff; color: #1a1a1a !important; border-radius: 10px;
  padding: 8px 13px; font: 600 13.5px var(--kc-sans); cursor: pointer; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px;
}
.kc-btn:hover { border-color: var(--kc-g); background: #f2f7f2; }
.kc-btn-p { background: var(--kc-g); border-color: var(--kc-g); color: #fff !important; }
.kc-btn-p:hover { background: #164a1a; }
.kc-sm { font-size: 12.5px; padding: 6px 11px; }
.kc-moves { background: #fff; border: 1.5px solid #dfe6df; border-radius: 12px; padding: 8px 10px; max-height: 230px; overflow: auto; font-size: 13.5px; }
.kc-mrow { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 6px; padding: 2px 0; color: #1a1a1a; }
.kc-mrow b { color: #7b877c; font-weight: 600; }
.kc-muted { color: #7b877c; font-size: 13px; }
.kc-think { display: inline-block; width: 11px; height: 11px; border: 2px solid #cfd8cf; border-top-color: var(--kc-g); border-radius: 50%; animation: kcspin .8s linear infinite; vertical-align: -1px; margin-right: 5px; }
@keyframes kcspin { to { transform: rotate(360deg); } }
.kc-empty { background: #fff; border: 1.5px dashed #cfd8cf; border-radius: 14px; padding: 26px; text-align: center; color: #5b675c; }

/* уроки */
.kc-lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.kc-lesson { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid #dfe6df; border-radius: 14px; padding: 14px 16px; text-decoration: none; color: #1a1a1a; }
.kc-lesson:hover { border-color: var(--kc-g); }
.kc-lesson b { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #f2f7f2; color: var(--kc-g); display: grid; place-items: center; font-size: 14px; }
.kc-lesson span { flex: 1; font-size: 14.5px; }
.kc-lesson i { font-style: normal; color: var(--kc-g); font-weight: 700; }
.kc-lesson-body { max-width: 780px; }
.kc-sec { background: #fff; border: 1.5px solid #dfe6df; border-radius: 16px; padding: 18px 22px; margin-bottom: 14px; }
.kc-sec p { margin: 0 0 10px; line-height: 1.65; font-size: 15px; color: #26302a; }
.kc-taskbox { background: #f5f9f4; border: 1.5px solid #cfe0cd; border-radius: 14px; padding: 14px; margin-top: 12px; }
.kc-taskbox b { display: block; margin-bottom: 10px; font-size: 14.5px; color: var(--kc-g); }
.kc-tboard { max-width: 330px; margin-bottom: 10px; }
.kc-taskbox .kc-status { margin-bottom: 8px; }
.kc-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.kc-homecard {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 18px;
  background: #fff; color: #1a1a1a; border: 1.5px solid #dfe6df; border-left: 6px solid var(--kc-g);
  border-radius: 18px; padding: 18px 22px; font-family: var(--kc-sans);
}
.kc-homecard span { color: var(--kc-g); font-weight: 700; font-size: 13.5px; }
.kc-homecard b { display: block; font-size: 19px; margin: 3px 0 4px; }
.kc-homecard p { margin: 0; color: #45514a; font-size: 14px; }
.kc-homeact { display: flex; gap: 9px; flex-wrap: wrap; }
.kc-solve { margin-left: auto; border: 1.5px solid var(--kc-g); background: #fff; color: var(--kc-g); border-radius: 10px; padding: 3px 10px; font: 700 12.5px var(--kc-sans); cursor: pointer; }
.kc-solve:hover { background: #f2f7f2; }
.topnav a.kc-navlink { font-weight: 700; }

/* доска в студии записи */
.kc-studio { display: grid; grid-template-columns: minmax(300px, 1fr) 250px; gap: 16px; align-items: start; }
.kc-studio .kc-moves { max-height: 260px; }
.kc-studio .kc-sside { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 900px) {
  .kc-cards { grid-template-columns: 1fr 1fr; }
  .kc-hero { grid-template-columns: 1fr; }
  .kc-hero-board { display: none; }
  .kc-layout, .kc-studio { grid-template-columns: 1fr; }
  .kc-pc { font-size: min(11vw, 44px); }
}
@media (max-width: 560px) { .kc-cards { grid-template-columns: 1fr; } }

/* тёмная тема платформы: карточки шахмат остаются светлыми, доска читается одинаково */
html[data-theme="dark"] .kc-page .kc-hero, html[data-theme="dark"] .kc-page .kc-card,
html[data-theme="dark"] .kc-page .kc-status, html[data-theme="dark"] .kc-page .kc-moves,
html[data-theme="dark"] .kc-page .kc-sec, html[data-theme="dark"] .kc-page .kc-lesson { background: #fff; color: #1a1a1a; }
/* диаграмма внутри режима «Тренировка» */
.mr-body .kc-diagram.kc-inrun { max-width: 300px; margin: 0 auto 12px; }
.mr-body .kc-diagram .kc-turn { justify-content: center; }