/* Chessground (Lichess taxtasi) uchun Zehnora mavzusi */

cg-board {
  background-color: var(--light-sq);
  background-image: var(--board-bg);
  background-size: cover;
}

/* Yurish nuqtalari, tanlangan katak, oxirgi yurish, shox — Lichess ranglari */
cg-board square.move-dest {
  background: radial-gradient(rgba(20, 85, 30, .5) 19%, rgba(0, 0, 0, 0) 20%);
}
cg-board square.oc.move-dest {
  background: radial-gradient(transparent 0%, transparent 79%, rgba(20, 85, 0, .3) 80%);
}
cg-board square.premove-dest {
  background: radial-gradient(rgba(20, 30, 85, .45) 22%, rgba(0, 0, 0, 0) 0);
}
cg-board square.oc.premove-dest {
  background: radial-gradient(transparent 0%, transparent 79%, rgba(20, 30, 85, .3) 80%);
}
cg-board square.move-dest:hover { background: rgba(20, 85, 30, .3); }
cg-board square.last-move { background-color: rgba(155, 199, 0, .41); }
cg-board square.selected { background-color: rgba(20, 85, 30, .5); }
cg-board square.current-premove { background-color: rgba(20, 30, 85, .45); }
cg-board square.check {
  background: radial-gradient(ellipse at center, rgba(255, 0, 0, 1) 0%, rgba(231, 0, 0, 1) 25%, rgba(169, 0, 0, 0) 89%, rgba(158, 0, 0, 0) 100%);
}

/* Koordinatalar: katak rangiga qarama-qarshi */
.cg-wrap coords { font-size: 10px; font-weight: 700; font-family: system-ui, sans-serif; }
.orientation-white .ranks :nth-child(odd),
.orientation-white .files :nth-child(even),
.orientation-black .ranks :nth-child(even),
.orientation-black .files :nth-child(odd) { color: var(--light-sq); }
.orientation-white .ranks :nth-child(even),
.orientation-white .files :nth-child(odd),
.orientation-black .ranks :nth-child(odd),
.orientation-black .files :nth-child(even) { color: var(--dark-sq); }

/* Donalar: cburnett to'plami */
.cg-wrap piece.pawn.white { background-image: url('/pieces/wP.svg'); }
.cg-wrap piece.knight.white { background-image: url('/pieces/wN.svg'); }
.cg-wrap piece.bishop.white { background-image: url('/pieces/wB.svg'); }
.cg-wrap piece.rook.white { background-image: url('/pieces/wR.svg'); }
.cg-wrap piece.queen.white { background-image: url('/pieces/wQ.svg'); }
.cg-wrap piece.king.white { background-image: url('/pieces/wK.svg'); }
.cg-wrap piece.pawn.black { background-image: url('/pieces/bP.svg'); }
.cg-wrap piece.knight.black { background-image: url('/pieces/bN.svg'); }
.cg-wrap piece.bishop.black { background-image: url('/pieces/bB.svg'); }
.cg-wrap piece.rook.black { background-image: url('/pieces/bR.svg'); }
.cg-wrap piece.queen.black { background-image: url('/pieces/bQ.svg'); }
.cg-wrap piece.king.black { background-image: url('/pieces/bK.svg'); }

/* ---------- Shashka taxtasi ---------- */
.ck-squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.ck-sq { position: relative; }
.ck-sq.l { background: var(--light-sq); }
.ck-sq.d { background: var(--dark-sq); }
.ck-sq.last { box-shadow: inset 0 0 0 999px rgba(155, 199, 0, .41); }
.ck-sq.sel { box-shadow: inset 0 0 0 999px rgba(20, 85, 30, .5); }
.ck-sq.dest::after { content: ""; position: absolute; left: 39%; top: 39%; width: 22%; height: 22%; border-radius: 50%; background: rgba(20, 85, 30, .55); z-index: 3; }
.ck-sq.must::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; box-shadow: 0 0 0 3px rgba(20, 85, 30, .7); z-index: 3; }
.ck-sq span { position: absolute; font-size: 10px; font-weight: 700; font-family: system-ui, sans-serif; }
.ck-sq .cr { left: 3px; top: 2px; }
.ck-sq .cf { right: 3px; bottom: 1px; }
.ck-sq.d span { color: var(--light-sq); }
.ck-sq.l span { color: var(--dark-sq); }
.ck-pieces { position: absolute; inset: 0; pointer-events: none; }
.ck-pc { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; transition: transform .14s ease-out; z-index: 2;
  background: center / 88% no-repeat url('/pieces/disc/w.svg'); }
.ck-pc.b { background-image: url('/pieces/disc/b.svg'); }
.ck-pc.w.k { background-image: url('/pieces/disc/wk.svg'); }
.ck-pc.b.k { background-image: url('/pieces/disc/bk.svg'); }
.ck-pc.moving { z-index: 4; }

/* ---------- Karvon (7x7) ---------- */
.kv-squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); }
.kv-sq { position: relative; }
.kv-sq.l { background: var(--light-sq); }
.kv-sq.d { background: var(--dark-sq); }
.kv-sq.last { box-shadow: inset 0 0 0 999px rgba(155, 199, 0, .41); }
.kv-sq.sel { box-shadow: inset 0 0 0 999px rgba(20, 85, 30, .5); }
.kv-sq.dest::after { content: ""; position: absolute; left: 39%; top: 39%; width: 22%; height: 22%; border-radius: 50%; background: rgba(20, 85, 30, .55); z-index: 3; }
.kv-sq.cap::after { content: ""; position: absolute; inset: 3%; border-radius: 50%; border: 4px solid rgba(200, 30, 30, .6); z-index: 3; }
.kv-sq span { position: absolute; font-size: 10px; font-weight: 700; font-family: system-ui, sans-serif; }
.kv-sq .cr { left: 3px; top: 2px; }
.kv-sq .cf { right: 3px; bottom: 1px; }
.kv-sq.d span { color: var(--light-sq); }
.kv-sq.l span { color: var(--dark-sq); }
.kv-pieces { position: absolute; inset: 0; pointer-events: none; }
.kv-pc { position: absolute; left: 0; top: 0; width: calc(100% / 7); height: calc(100% / 7); transition: transform .16s ease-out; z-index: 2; }
.kv-pc { background: center / 88% no-repeat url('/pieces/disc/w.svg'); }
.kv-pc.b { background-image: url('/pieces/disc/b.svg'); }
.kv-pc.tuya::after { content: "🐪"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--bw) / 7 * .5); padding-bottom: 6%; }
.kv-pc .pw { position: absolute; right: 4%; top: 4%; min-width: 34%; height: 34%; border-radius: 99px; display: grid; place-items: center;
  font: 800 calc(var(--bw) / 7 * .2) system-ui, sans-serif; color: #1a1a1a; border: 2px solid rgba(0,0,0,.35); padding: 0 2px; }
.kv-pc .pw.p0 { background: #b8bcc6; }
.kv-pc .pw.p1 { background: #6fa8e8; }
.kv-pc .pw.p2 { background: #f2b544; }

/* ---------- Narda: yog'och quti — chap va o'ng yarim, o'rtada ilmoq ---------- */
.board.nd { --tray: calc(var(--bw) * .065); --ck: calc((var(--bw) - 12px - 16px - var(--tray)) / 12 * .86);
  width: var(--bw); height: var(--nd-h, calc(var(--bw) * .66)); display: flex; padding: 6px; gap: 0; border-radius: 12px;
  position: relative; overflow: visible;
  background: repeating-linear-gradient(93deg, rgba(0,0,0,.09) 0 2px, transparent 2px 8px), linear-gradient(150deg, #6e3216, #4b200d 70%, #3d190a);
  box-shadow: inset 0 0 0 2px #2a1006, inset 0 2px 0 rgba(255,255,255,.14), 0 8px 22px rgba(0,0,0,.5); }
.nd-field { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 16px 1fr; border-radius: 4px; overflow: hidden;
  background: repeating-linear-gradient(88deg, rgba(150,100,40,.07) 0 2px, transparent 2px 7px), linear-gradient(#f3e3c0, #e7cf9f);
  box-shadow: inset 0 0 0 2px #2a1006, inset 0 3px 10px rgba(0,0,0,.25); }
.nd-side { display: grid; grid-template-rows: 43% 14% 43%; min-width: 0; }
.nd-row { display: grid; grid-template-columns: repeat(6, 1fr); min-height: 0; }
.nd-pt { position: relative; cursor: pointer; min-width: 0; }
/* Ustun: ingichka, uzun, qora — yog'ochga o'yib ishlangandek; asosida yumaloq uycha */
.nd-pt::before { content: ""; position: absolute; left: 13%; right: 13%; top: 0; height: 100%; clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(#2b211a, #15100c); }
.nd-pt.bot::before { top: auto; bottom: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.nd-pt::after { content: ""; position: absolute; left: 9%; width: 82%; aspect-ratio: 1; top: -41%; border-radius: 50%;
  background: radial-gradient(circle, rgba(120,80,30,.16), rgba(120,80,30,.05) 70%); pointer-events: none; }
.nd-pt.bot::after { top: auto; bottom: -41%; }
.nd-pt.last { background: linear-gradient(rgba(255, 220, 120, .35), transparent 85%); }
.nd-pt.bot.last { background: linear-gradient(transparent 15%, rgba(255, 220, 120, .35)); }
.nd-pt.dest { background: rgba(46, 204, 113, .25); }
.nd-pt.dest::after { background: radial-gradient(circle, #2ecc71 0 30%, rgba(46,204,113,.35) 31% 60%, transparent 61%); top: auto; bottom: 38%; }
.nd-pt.bot.dest::after { bottom: auto; top: 38%; }
.nd-ck { position: absolute; left: 7%; width: 86%; aspect-ratio: 1; z-index: 1; pointer-events: none; }
.nd-pt.top .nd-ck { top: calc(2px + var(--i) * var(--step) * var(--ck)); }
.nd-pt.bot .nd-ck { bottom: calc(2px + var(--i) * var(--step) * var(--ck)); }
.nd-ck.op { filter: drop-shadow(0 0 1.2px rgba(255, 245, 225, .95)); }
.nd-pt.can .nd-ck:last-of-type { filter: drop-shadow(0 0 3px #7CFC00) drop-shadow(0 0 2px #2ecc71); animation: nd-pulse 1.4s ease-in-out infinite; }
.nd-pt.sel .nd-ck:last-of-type { filter: drop-shadow(0 0 6px #2ecc71) drop-shadow(0 0 3px #2ecc71); animation: none; transform: scale(1.06); }
@keyframes nd-pulse { 50% { filter: drop-shadow(0 0 7px #7CFC00) drop-shadow(0 0 3px #2ecc71); } }
.nd-cnt { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; font: 900 calc(var(--ck) * .36 + 2px) system-ui, sans-serif;
  color: #fff; background: #c0392b; border-radius: 8px; padding: 0 5px; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.nd-pt.top .nd-cnt { top: calc(2px + var(--i) * var(--step) * var(--ck) + var(--ck) * .28); }
.nd-pt.bot .nd-cnt { bottom: calc(2px + var(--i) * var(--step) * var(--ck) + var(--ck) * .28); }
.nd-fly { position: absolute; z-index: 10; pointer-events: none; transition: transform .22s ease-in-out; }
/* O'rta oraliq: bezak (zag'izg'on izi), zarlar, qaytarish */
.nd-gap { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 0; }
.nd-emblem { position: absolute; inset: -60% 20%; background: center / contain no-repeat url('/brand/magpie-mark.svg'); opacity: .1; pointer-events: none; }
.nd-undo { position: relative; z-index: 2; width: calc(var(--ck) * .9); height: calc(var(--ck) * .9); max-width: 46px; max-height: 46px; border-radius: 10px;
  background: rgba(60, 30, 12, .85); color: #fff; font-size: 20px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.nd-dice { position: relative; z-index: 2; display: flex; gap: 6px; }
.nd-dice.theirs { opacity: .8; }
.die { width: calc(var(--ck) * .82); height: calc(var(--ck) * .82); max-width: 50px; max-height: 50px; border-radius: 18%;
  background: linear-gradient(145deg, #fff, #ebe4d4); box-shadow: 0 3px 0 #b9ab8c, 0 4px 8px rgba(0,0,0,.4);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 13%; transition: opacity .2s, transform .2s; }
.nd-dice.theirs .die { background: linear-gradient(145deg, #444, #1f1f1f); box-shadow: 0 3px 0 #000, 0 4px 8px rgba(0,0,0,.4); }
.die i { border-radius: 50%; margin: 8%; }
.die i.on { background: #1d1d1d; }
.nd-dice.theirs .die i.on { background: #f0f0f0; }
.die.used { opacity: .3; transform: scale(.88); }
.nd-dice.rolling .die { animation: nd-roll .16s linear infinite; }
.nd-dice.rolling .die:nth-child(2) { animation-duration: .2s; animation-direction: reverse; }
@keyframes nd-roll { 0% { transform: rotate(0) translateY(0); } 50% { transform: rotate(180deg) translateY(-6px); } 100% { transform: rotate(360deg) translateY(0); } }
/* O'rtadagi ilmoq: mis sharnirlar va ochkolar (pip) */
.nd-hinge { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px 0;
  background: linear-gradient(90deg, #3d190a, #6e3216 50%, #3d190a); }
.nd-hinge i { width: 9px; height: 16%; border-radius: 2px; background: linear-gradient(90deg, #8a6420, #e2b04a, #8a6420); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.nd-hinge .pip { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 11px system-ui, sans-serif; color: #f3e3c0; opacity: .85; }
.nd-hinge .pip.me { color: #9bdc3c; }
/* Chiqarilgan toshlar qutisi (o'ng chetda) */
.nd-tray { width: var(--tray); margin-left: 5px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.nd-off { flex: 1; border-radius: 6px; background: rgba(0,0,0,.28); box-shadow: inset 0 2px 6px rgba(0,0,0,.5); color: #f3e3c0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.nd-off b { font-size: calc(var(--ck) * .45 + 4px); }
.nd-off small { font-size: 9px; opacity: .75; writing-mode: vertical-rl; transform: rotate(180deg); }
.nd-off.me b { color: #9bdc3c; }
.nd-off.dest { background: #2ecc71; color: #0e2a12; box-shadow: 0 0 0 3px rgba(46,204,113,.45); }
.nd-off.dest b { color: #0e2a12; }

.help-list { text-align: left; display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.help-row { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.help-row .hp { position: relative; width: 38px; height: 38px; flex: none; --bw: 494px; }
.help-row .hp img { width: 100%; height: 100%; }
.help-row .hp .tag { position: absolute; right: -2px; bottom: -2px; font: 800 10px system-ui; background: #f2b544; color: #111; border-radius: 4px; padding: 0 2px; }
.help-row .hp .disc { position: absolute; inset: 2px; border-radius: 50%; display: grid; place-items: center; }
.help-row .hp .disc.w { background: radial-gradient(circle at 35% 30%, #fffdf6, #eadcbd 65%, #c9b48a); }
.help-row .hp .ic { font-size: 20px; }