.xd-chess-viewer,
.xd-chess-viewer * { box-sizing: border-box; }

.xd-chess-viewer {
  --xd-navy: #071f35;
  --xd-navy-2: #123b59;
  --xd-gold: #d6a13d;
  --xd-cream: #f8f5ef;
  --xd-paper: #fffefa;
  --xd-border: rgba(7,31,53,.14);
  --xd-light-square: #eeeccf;
  --xd-dark-square: #769656;
  --xd-highlight: rgba(246,230,63,.72);
  width: 100%;
  margin: 30px 0;
  overflow: hidden;
  border: 1px solid var(--xd-border);
  border-radius: 24px;
  background: var(--xd-paper);
  color: var(--xd-navy);
  box-shadow: 0 20px 55px rgba(7,31,53,.13);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

.xd-chess-viewer.is-full-width {
  width: min(1760px, calc(100vw - 32px));
  max-width: none;
  margin-left: calc(50% - 50vw + 16px);
}
.site-shell .xd-chess-viewer.is-full-width {
  width: min(1760px, calc(100vw - 142px));
  margin-left: calc(50% - 50vw + 71px);
}
.xd-chess-viewer.is-contained-width { max-width: 1280px; margin-right: auto; margin-left: auto; }

.xd-chess-header {
  display: flex;
  min-height: 96px;
  padding: 23px 28px;
  background: linear-gradient(135deg,var(--xd-navy),var(--xd-navy-2));
  color: #fff;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.xd-chess-kicker { display:block; margin-bottom:5px; color:var(--xd-gold); font-size:10px; font-weight:800; letter-spacing:.16em; }
.xd-chess-title { margin:0!important; color:#fff!important; font-family:"Playfair Display",Georgia,serif!important; font-size:clamp(25px,3vw,38px)!important; line-height:1.05!important; }
.xd-chess-title:empty { display:none!important; }
.xd-chess-header-tools { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.xd-chess-meta { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.xd-chess-meta span { padding:7px 10px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.78); font-size:11px; }
.xd-chess-score { display:flex; padding:7px 11px; border-radius:999px; background:var(--xd-gold); color:var(--xd-navy); align-items:center; gap:8px; font-size:11px; font-weight:800; }
.xd-chess-score strong { font-size:15px; }

.xd-chess-layout {
  display:grid;
  padding:clamp(16px,1.7vw,28px);
  grid-template-columns:minmax(430px,.82fr) minmax(520px,1.18fr);
  gap:clamp(22px,2.2vw,36px);
  align-items:start;
}
.xd-chess-board-column { position:sticky; top:12px; min-width:0; }
.xd-chess-board-stage {
  display:grid;
  width:min(100%,620px,calc(100svh - 180px));
  max-width:620px;
  margin:0 auto;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
  align-items:stretch;
}
.xd-chess-board-wrap { position:relative; min-width:0; }
.xd-chess-board {
  display:grid;
  width:100%;
  max-width:none;
  margin:0 auto;
  overflow:hidden;
  border:7px solid var(--xd-navy);
  border-radius:15px;
  aspect-ratio:1/1;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  background:var(--xd-navy);
  box-shadow:0 18px 38px rgba(7,31,53,.18);
}
.xd-chess-arrows { position:absolute; z-index:8; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); pointer-events:none; }
.xd-chess-square { position:relative; display:grid; min-width:0; min-height:0; padding:0; border:0; place-items:center; cursor:default; }
.xd-chess-square.light { background:var(--xd-light-square); }
.xd-chess-square.dark { background:var(--xd-dark-square); }
.xd-chess-square.last-move { box-shadow:inset 0 0 0 999px var(--xd-highlight); }
.xd-chess-square.has-annotation::after { position:absolute; z-index:1; inset:5%; border-radius:8px; background:var(--xd-annotation-color); opacity:.45; content:""; }
.xd-chess-square.is-selected { box-shadow:inset 0 0 0 5px #2f80ed; }
.xd-chess-square.is-legal-target::before { position:absolute; z-index:5; width:26%; height:26%; border-radius:50%; background:rgba(7,31,53,.35); content:""; }
.xd-chess-square.is-wrong { animation:xdWrong .6s ease; }
.xd-chess-square.is-correct { animation:xdCorrect .6s ease; }
@keyframes xdWrong { 0%,100%{box-shadow:none} 50%{box-shadow:inset 0 0 0 999px rgba(214,51,51,.62)} }
@keyframes xdCorrect { 0%,100%{box-shadow:none} 50%{box-shadow:inset 0 0 0 999px rgba(47,158,68,.62)} }
.xd-chess-piece { position:relative; z-index:2; display:block; width:94%; height:94%; max-width:94%; max-height:94%; object-fit:contain; object-position:center; user-select:none; pointer-events:none; -webkit-user-drag:none; }
.xd-chess-viewer.has-modern-pieces .xd-chess-piece { width:88%; height:88%; max-width:88%; max-height:88%; }
.xd-chess-coordinate { position:absolute; z-index:6; font-size:clamp(8px,1.1vw,11px); font-weight:800; opacity:.75; pointer-events:none; }
.xd-chess-coordinate.file { right:4px; bottom:2px; }
.xd-chess-coordinate.rank { top:2px; left:4px; }
.xd-chess-square.light .xd-chess-coordinate { color:var(--xd-dark-square); }
.xd-chess-square.dark .xd-chess-coordinate { color:var(--xd-light-square); }

.xd-eval-bar { position:relative; width:28px; min-height:100%; overflow:hidden; border:3px solid var(--xd-navy); border-radius:10px; background:#111; }
.xd-eval-black { position:absolute; inset:0; background:#181818; }
.xd-eval-white { position:absolute; right:0; bottom:0; left:0; height:50%; background:#f6f3e7; transition:height .25s ease; }
.xd-eval-label { position:absolute; z-index:3; right:0; bottom:8px; left:0; color:#111; font-size:9px; font-weight:900; text-align:center; writing-mode:vertical-rl; transform:rotate(180deg); mix-blend-mode:difference; filter:invert(1); }

.xd-chess-controls { display:grid; width:min(100%,620px,calc(100svh - 180px)); max-width:620px; margin:10px auto 0; padding:8px; border-radius:13px; background:var(--xd-navy); grid-template-columns:repeat(2,48px) minmax(70px,1fr) repeat(3,48px) auto auto; gap:6px; }
.xd-chess-controls button { display:grid; min-height:42px; padding:0 10px; border:1px solid rgba(255,255,255,.14); border-radius:9px; background:rgba(255,255,255,.07); color:#fff; font:inherit; font-size:20px; cursor:pointer; place-items:center; }
.xd-chess-controls button:hover,.xd-chess-controls button:focus-visible,.xd-chess-controls button.is-active { border-color:var(--xd-gold); color:var(--xd-gold); outline:none; }
.xd-chess-controls .xd-engine-button,.xd-chess-controls .xd-play-button { font-size:11px; font-weight:800; white-space:nowrap; }
.xd-chess-ply-counter { display:grid; color:rgba(255,255,255,.73); font-size:12px; font-weight:800; place-items:center; }
.xd-quiz-status,.xd-play-status { width:min(100%,620px,calc(100svh - 180px)); max-width:620px; margin:10px auto 0; padding:12px 14px; border-radius:11px; font-size:13px; font-weight:700; }
.xd-quiz-status.is-waiting { background:#fff5d6; color:#775514; }
.xd-quiz-status.is-correct { background:#e8f7ec; color:#176b2c; }
.xd-quiz-status.is-wrong { background:#fdeaea; color:#8b2929; }
.xd-play-status.is-active { background:#e9f2fa; color:#17496c; }

.xd-chess-analysis-column { min-width:0; overflow:hidden; border:1px solid var(--xd-border); border-radius:17px; background:#fff; }
.xd-chess-analysis-heading { padding:18px 20px; border-bottom:1px solid var(--xd-border); background:var(--xd-cream); }
.xd-chess-analysis-heading span { display:block; margin-bottom:4px; color:var(--xd-gold); font-size:9px; font-weight:900; letter-spacing:.14em; }
.xd-chess-analysis-heading strong { font-family:"Playfair Display",Georgia,serif; font-size:22px; }
.xd-chess-moves {
  max-height:min(680px,calc(100svh - 180px));
  padding:16px;
  overflow:auto;
  scroll-behavior:smooth;
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  text-rendering:optimizeLegibility;
}
.xd-move-line { min-width:0; }
.xd-move-line.is-mainline {
  display:grid;
  padding:2px 0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
  align-items:start;
}
.xd-move-line.is-variation {
  display:grid;
  width:100%;
  margin:8px 0 4px;
  padding:10px 11px;
  border-left:3px solid var(--xd-gold);
  border-radius:0 10px 10px 0;
  background:#f5f7f8;
  grid-template-columns:1fr;
  gap:7px;
}
.xd-move-item > .xd-move-line.is-variation { grid-column:1/-1; }
.xd-variation-label { width:100%; color:#8a6a28; font-size:10px; font-weight:800; letter-spacing:.08em; }
.xd-move-item {
  display:grid;
  min-width:0;
  padding:5px 6px 8px;
  border-bottom:1px solid rgba(7,31,53,.07);
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:4px 7px;
}
.xd-move-number { grid-column:1; padding-top:9px; color:#7c8992; font-size:12px; font-weight:700; }
.xd-move-button {
  grid-column:2;
  min-width:0;
  min-height:36px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--xd-navy);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;
  font-weight:800;
  line-height:1.3;
  text-align:left;
  white-space:normal;
  cursor:pointer;
}
.xd-move-button:hover,.xd-move-button:focus-visible { border-color:rgba(214,161,61,.5); background:rgba(214,161,61,.09); outline:none; }
.xd-move-button.is-active { border-color:var(--xd-gold); background:var(--xd-gold); color:var(--xd-navy); }
.xd-move-comment {
  grid-column:1/-1;
  width:auto;
  margin:2px 0 0;
  padding:9px 10px;
  border-left:3px solid var(--xd-gold);
  border-radius:0 8px 8px 0;
  background:#f6f8f9;
  color:#52606a;
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  font-size:13px;
  font-weight:400;
  line-height:1.55;
  overflow-wrap:anywhere;
}
.xd-chess-result { margin:12px 0 0; padding:12px; border-radius:10px; background:var(--xd-navy); color:#fff; font-size:13px; font-weight:800; text-align:center; }
.xd-chess-error { margin:0 24px 24px; padding:15px; border:1px solid rgba(160,40,40,.24); border-radius:12px; background:#fff0f0; color:#842b2b; font-size:13px; }

@media (max-width:1180px) {
  .xd-chess-layout { grid-template-columns:1fr; }
  .xd-chess-board-column { position:static; }
  .xd-chess-moves { max-height:560px; }
}
@media (max-width:1020px) {
  .xd-chess-viewer.is-full-width,.site-shell .xd-chess-viewer.is-full-width { width:calc(100vw - 24px); margin-left:calc(50% - 50vw + 12px); }
}
@media (max-width:720px) {
  .xd-chess-viewer { border-radius:16px; }
  .xd-chess-viewer.is-full-width,.site-shell .xd-chess-viewer.is-full-width { width:calc(100vw - 12px); margin-left:calc(50% - 50vw + 6px); }
  .xd-chess-header { padding:20px; align-items:flex-start; flex-direction:column; }
  .xd-chess-header-tools,.xd-chess-meta { justify-content:flex-start; }
  .xd-chess-layout { padding:12px; gap:14px; }
  .xd-chess-board { border-width:5px; border-radius:10px; }
  .xd-chess-arrows { inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); }
  .xd-eval-bar { width:22px; border-width:2px; }
  .xd-chess-controls { grid-template-columns:repeat(2,42px) minmax(58px,1fr) repeat(3,42px); }
  .xd-chess-controls .xd-engine-button,.xd-chess-controls .xd-play-button { grid-column:span 3; }
  .xd-chess-controls button { min-height:38px; }
  .xd-chess-moves { padding:10px; }
  .xd-move-button { padding:7px 7px; font-size:12px; }
  .xd-move-line.is-variation { margin-left:8px; }
}


/* v0.2.1: καθαρή ελληνική τυπογραφία και πιο πρακτικό ύψος */
.xd-chess-viewer button,
.xd-chess-viewer input,
.xd-chess-viewer select,
.xd-chess-viewer textarea { font-family:inherit; }
.xd-chess-analysis-heading strong,
.xd-chess-title { font-family:Georgia,"Times New Roman",serif!important; font-style:normal!important; }
.xd-chess-analysis-heading strong { line-height:1.25; }
.xd-chess-meta span,
.xd-chess-kicker,
.xd-move-comment { letter-spacing:normal; text-transform:none; }
.xd-chess-score,
.xd-quiz-status { display:none!important; }

@media (min-width:1181px) and (max-height:760px) {
  .xd-chess-board-stage,
  .xd-chess-controls,
  .xd-play-status { width:min(100%,540px,calc(100svh - 155px)); max-width:540px; }
  .xd-chess-moves { max-height:calc(100svh - 155px); }
}

/* =====================================================
   v0.2.2 — Συμπαγής ανάλυση, ξεχωριστό σχόλιο και πληκτρολόγιο
   ===================================================== */

/* v0.2.3: τα στοιχεία της παρτίδας μεταφέρθηκαν στην κορυφή της ανάλυσης. */

.xd-chess-viewer:focus {
  outline: none;
}

.xd-chess-viewer:focus-visible {
  outline: 3px solid rgba(214,161,61,.52);
  outline-offset: 4px;
}

.xd-chess-analysis-column {
  display: grid;
  grid-template-rows: auto minmax(260px, 340px) auto auto;
  align-content: start;
}

.xd-chess-moves {
  width: 100%;
  height: 340px;
  max-height: 340px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--xd-border);
}

.xd-move-line.is-mainline {
  gap: 4px 8px;
}

.xd-move-item {
  padding: 2px 4px 4px;
  gap: 2px 5px;
}

.xd-move-number {
  padding-top: 7px;
  font-size: 11px;
}

.xd-move-button {
  position: relative;
  min-height: 31px;
  padding: 5px 22px 5px 7px;
  font-size: 13px;
  white-space: nowrap;
}

.xd-move-button.has-comment::after {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--xd-gold);
  content: "";
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(214,161,61,.12);
}

.xd-current-comment-panel {
  min-height: 135px;
  max-height: 190px;
  padding: 16px 18px;
  overflow: auto;
  border-bottom: 1px solid var(--xd-border);
  background: linear-gradient(135deg,#fffdf7,#f8f5ef);
}

.xd-current-comment-heading {
  display: flex;
  margin-bottom: 9px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.xd-current-comment-heading > span {
  color: var(--xd-gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.xd-current-comment-heading > strong {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--xd-navy);
  color: #fff;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.xd-current-comment {
  margin: 0!important;
  color: #45545f;
  font-family: "Segoe UI",Roboto,Arial,sans-serif!important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.xd-current-comment.is-empty {
  color: #7b878f;
  font-style: italic;
}

.xd-game-info {
  display: grid;
  padding: 13px 15px;
  border-bottom: 1px solid var(--xd-border);
  background: #fff;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px;
}

.xd-game-info > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(7,31,53,.08);
  border-radius: 10px;
  background: #f7f8f8;
}

.xd-game-info span {
  display: block;
  margin-bottom: 3px;
  color: #7a878f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.xd-game-info strong {
  display: block;
  overflow: hidden;
  color: var(--xd-navy);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xd-keyboard-hint {
  display: flex;
  min-height: 42px;
  padding: 9px 14px;
  background: var(--xd-navy);
  color: rgba(255,255,255,.72);
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.xd-keyboard-hint > span:first-child,
.xd-keyboard-hint > span:last-child {
  display: grid;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 7px;
  color: var(--xd-gold);
  font-size: 16px;
  place-items: center;
}

@media (min-width:1181px) and (max-height:780px) {
  .xd-chess-analysis-column {
    grid-template-rows: auto minmax(220px, 285px) auto auto;
  }

  .xd-chess-moves {
    height: 285px;
    max-height: 285px;
  }

  .xd-current-comment-panel {
    min-height: 112px;
    max-height: 145px;
    padding: 13px 15px;
  }
}

@media (max-width:1180px) {
  .xd-chess-analysis-column {
    grid-template-rows: auto minmax(250px, 360px) auto auto;
  }

  .xd-chess-moves {
    height: 360px;
    max-height: 360px;
  }
}

@media (max-width:720px) {
  .xd-chess-analysis-column {
    grid-template-rows: auto minmax(230px, 320px) auto auto;
  }

  .xd-chess-moves {
    height: 320px;
    max-height: 320px;
  }

  .xd-current-comment-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .xd-game-info {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .xd-keyboard-hint {
    display: none;
  }
}

/* =====================================================
   v0.2.5 — στενότερη λίστα κινήσεων και σχόλιο δεξιά
   ===================================================== */

@media (min-width:721px) {
  .xd-chess-analysis-column {
    grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
    grid-template-rows: auto 340px auto;
  }

  .xd-game-info {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .xd-chess-moves {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 340px;
    max-height: 340px;
    border-right: 1px solid var(--xd-border);
    border-bottom: 0;
  }

  .xd-current-comment-panel {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    height: 340px;
    max-height: 340px;
    border-bottom: 0;
  }

  .xd-keyboard-hint {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (min-width:1181px) and (max-height:780px) {
  .xd-chess-analysis-column {
    grid-template-rows: auto 285px auto;
  }

  .xd-chess-moves,
  .xd-current-comment-panel {
    height: 285px;
    max-height: 285px;
  }
}

@media (min-width:721px) and (max-width:1180px) {
  .xd-chess-analysis-column {
    grid-template-columns: minmax(270px, 40%) minmax(0, 1fr);
    grid-template-rows: auto 360px auto;
  }

  .xd-chess-moves,
  .xd-current-comment-panel {
    height: 360px;
    max-height: 360px;
  }
}

@media (max-width:720px) {
  .xd-chess-analysis-column {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(230px,320px) auto auto;
  }

  .xd-game-info,
  .xd-chess-moves,
  .xd-current-comment-panel,
  .xd-keyboard-hint {
    grid-column: 1;
  }

  .xd-game-info { grid-row: 1; }

  .xd-chess-moves {
    grid-row: 2;
    border-right: 0;
    border-bottom: 1px solid var(--xd-border);
  }

  .xd-current-comment-panel {
    grid-row: 3;
    height: auto;
    min-height: 135px;
    max-height: 190px;
    border-bottom: 1px solid var(--xd-border);
  }

  .xd-keyboard-hint { grid-row: 4; }
}


/* =====================================================
   v0.2.7 — εμφανές κενό πριν από κινήσεις και σχόλια
   ===================================================== */

/* Μεγάλη/μεσαία οθόνη: και τα δύο πλαίσια ξεκινούν 36px χαμηλότερα. */
@media (min-width:721px) {
  .xd-chess-analysis-column {
    grid-template-rows: auto 376px auto;
  }

  .xd-chess-moves,
  .xd-current-comment-panel {
    margin-top: 36px;
    height: 340px;
    max-height: 340px;
  }
}

@media (min-width:1181px) and (max-height:780px) {
  .xd-chess-analysis-column {
    grid-template-rows: auto 321px auto;
  }

  .xd-chess-moves,
  .xd-current-comment-panel {
    margin-top: 36px;
    height: 285px;
    max-height: 285px;
  }
}

@media (min-width:721px) and (max-width:1180px) {
  .xd-chess-analysis-column {
    grid-template-rows: auto 396px auto;
  }

  .xd-chess-moves,
  .xd-current-comment-panel {
    margin-top: 36px;
    height: 360px;
    max-height: 360px;
  }
}

/* Κινητό: το πλαίσιο κινήσεων κατεβαίνει και παρασύρει φυσικά το σχόλιο. */
@media (max-width:720px) {
  .xd-chess-analysis-column {
    grid-template-rows: auto 356px auto auto;
  }

  .xd-chess-moves {
    margin-top: 36px;
    height: 320px;
    max-height: 320px;
  }

  .xd-current-comment-panel {
    margin-top: 0;
  }
}


/* =====================================================
   v0.2.9 — το δεξί πλαίσιο έχει το ύψος όλης της αριστερής στήλης
   ===================================================== */

@media (min-width:1181px) {
  .xd-chess-analysis-column {
    height: var(--xd-board-height, 644px) !important;
    max-height: var(--xd-board-height, 644px) !important;
    grid-template-rows: auto minmax(0,1fr) auto !important;
  }

  .xd-chess-moves,
  .xd-current-comment-panel {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin-top: 36px !important;
    align-self: stretch;
  }
}

/* =====================================================
   v0.2.10 — βαριάντα σε μικρή σκακιέρα αντί για λίστα κινήσεων
   ===================================================== */

.xd-move-button.has-variation {
  padding-right: 38px;
}

.xd-move-button.has-variation::before {
  position: absolute;
  top: 50%;
  right: 20px;
  display: grid;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(214,161,61,.72);
  border-radius: 3px;
  color: #a87517;
  content: "▦";
  font-family: Arial,sans-serif;
  font-size: 10px;
  line-height: 1;
  place-items: center;
  transform: translateY(-50%);
}

.xd-current-comment-panel.has-variation-player {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(176px,210px);
  grid-template-rows: auto minmax(0,1fr);
  gap: 8px 16px;
  align-items: start;
}

.xd-current-comment-panel.has-variation-player .xd-current-comment-heading {
  grid-column: 1;
  grid-row: 1;
}

.xd-current-comment-panel.has-variation-player > .xd-current-comment {
  grid-column: 1;
  grid-row: 2;
}

.xd-variation-player {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(7,31,53,.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(7,31,53,.08);
}

.xd-variation-player[hidden] {
  display: none!important;
}

.xd-variation-player-heading {
  display: flex;
  min-height: 22px;
  margin-bottom: 7px;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.xd-variation-player-heading > span {
  color: var(--xd-gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
}

.xd-variation-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}

.xd-variation-tabs button,
.xd-variation-single-label {
  display: grid;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border: 1px solid rgba(7,31,53,.15);
  border-radius: 6px;
  background: #f7f8f8;
  color: var(--xd-navy);
  font-size: 10px;
  font-weight: 800;
  place-items: center;
}

.xd-variation-tabs button {
  cursor: pointer;
}

.xd-variation-tabs button.is-active {
  border-color: var(--xd-gold);
  background: var(--xd-gold);
}

.xd-mini-board {
  display: grid;
  width: 100%;
  overflow: hidden;
  border: 4px solid var(--xd-navy);
  border-radius: 8px;
  background: var(--xd-navy);
  aspect-ratio: 1 / 1;
  grid-template-columns: repeat(8,1fr);
  grid-template-rows: repeat(8,1fr);
}

.xd-mini-square {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
}

.xd-mini-square.light { background: var(--xd-light-square); }
.xd-mini-square.dark { background: var(--xd-dark-square); }
.xd-mini-square.last-move { box-shadow: inset 0 0 0 999px var(--xd-highlight); }

.xd-mini-piece {
  position: relative;
  z-index: 2;
  display: block;
  width: 92%;
  height: 92%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.xd-chess-viewer.has-modern-pieces .xd-mini-piece {
  width: 86%;
  height: 86%;
}

.xd-variation-move-label {
  min-height: 24px;
  padding: 5px 4px 3px;
  overflow: hidden;
  color: var(--xd-navy);
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xd-variation-controls {
  display: grid;
  grid-template-columns: repeat(2,25px) minmax(64px,1fr) repeat(2,25px);
  gap: 4px;
  align-items: center;
}

.xd-variation-controls button {
  min-width: 0;
  height: 26px;
  padding: 0 4px;
  border: 1px solid rgba(7,31,53,.13);
  border-radius: 6px;
  background: #f5f7f8;
  color: var(--xd-navy);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.xd-variation-controls button:hover,
.xd-variation-controls button:focus-visible {
  border-color: var(--xd-gold);
  outline: none;
}

.xd-variation-controls button:disabled {
  opacity: .38;
  cursor: default;
}

.xd-variation-controls .xd-variation-play-button {
  font-size: 9px;
  white-space: nowrap;
}

.xd-variation-progress {
  grid-column: 1 / -1;
  color: #71808a;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

@media (max-width:900px) and (min-width:721px) {
  .xd-current-comment-panel.has-variation-player {
    grid-template-columns: minmax(0,1fr) minmax(155px,180px);
    gap: 8px 11px;
  }
}

@media (max-width:720px) {
  .xd-current-comment-panel.has-variation-player {
    display: block;
    height: auto!important;
    min-height: 135px!important;
    max-height: none!important;
    overflow: visible;
  }

  .xd-variation-player {
    width: min(100%,270px);
    margin: 14px auto 0;
  }
}


/* =====================================================
   v0.2.12 — καθαρή κεφαλίδα χωρίς επαναλαμβανόμενα στοιχεία
   ===================================================== */

.xd-chess-header {
  min-height: 82px;
  padding: 18px 28px;
  justify-content: flex-start;
}

.xd-chess-header > div:first-child {
  width: 100%;
  min-width: 0;
}

.xd-chess-header-tools {
  display: none !important;
}

@media (max-width: 720px) {
  .xd-chess-header {
    min-height: 74px;
    padding: 16px 20px;
  }
}

/* =====================================================
   v0.2.13 — παιχνίδι με Stockfish και drag & drop στη μικρή σκακιέρα
   ===================================================== */

.xd-variation-controls .xd-variation-engine-button {
  grid-column: 1 / -1;
  width: 100%;
  height: 29px;
  margin-top: 2px;
  border-color: rgba(7,31,53,.22);
  background: var(--xd-navy);
  color: #fff;
  font-size: 9px;
  letter-spacing: .01em;
  white-space: nowrap;
}

.xd-variation-controls .xd-variation-engine-button:hover,
.xd-variation-controls .xd-variation-engine-button:focus-visible,
.xd-variation-controls .xd-variation-engine-button.is-active {
  border-color: var(--xd-gold);
  background: var(--xd-gold);
  color: var(--xd-navy);
}

.xd-variation-engine-status {
  margin-top: 7px;
  padding: 7px 8px;
  border-radius: 7px;
  background: #eef3f6;
  color: #40515d;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.xd-variation-engine-status[hidden] {
  display: none!important;
}

.xd-variation-engine-status.is-active {
  background: #e9f2fa;
  color: #17496c;
}

.xd-variation-engine-status.is-thinking {
  background: #fff5d6;
  color: #775514;
}

.xd-variation-engine-status.is-error {
  background: #fdeaea;
  color: #8b2929;
}

.xd-variation-engine-status.is-finished {
  background: #e8f7ec;
  color: #176b2c;
}

.xd-variation-player.is-engine-play .xd-variation-tabs {
  opacity: .42;
  pointer-events: none;
}

.xd-variation-player.is-engine-play .xd-mini-board {
  box-shadow: 0 0 0 2px rgba(214,161,61,.35);
}

.xd-variation-player.is-engine-play .xd-mini-square {
  cursor: pointer;
}

.xd-variation-player.is-engine-play .xd-mini-piece[draggable="true"] {
  pointer-events: auto;
  cursor: grab;
  -webkit-user-drag: element;
}

.xd-variation-player.is-engine-play .xd-mini-piece[draggable="true"]:active {
  cursor: grabbing;
}

.xd-mini-square.is-selected {
  z-index: 3;
  box-shadow: inset 0 0 0 3px #2f80ed;
}

.xd-mini-square.is-legal-target::before {
  position: absolute;
  z-index: 4;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(7,31,53,.38);
  content: "";
  pointer-events: none;
}

.xd-mini-square.is-legal-target:has(.xd-mini-piece)::before {
  width: 82%;
  height: 82%;
  border: 3px solid rgba(7,31,53,.44);
  background: transparent;
}

.xd-mini-square.is-drag-hover {
  box-shadow: inset 0 0 0 4px var(--xd-gold);
}

.xd-mini-square.is-dragging {
  opacity: .62;
}

.xd-mini-square.is-wrong {
  animation: xdWrong .42s ease;
}

@media (max-width:720px) {
  .xd-variation-controls .xd-variation-engine-button {
    height: 31px;
    font-size: 10px;
  }

  .xd-variation-engine-status {
    font-size: 10px;
  }
}