/* Yoʻl top — doska, donalar va devor tokchasi (umumiy).
 *
 * `yol-top.html` (Telegram oʻyini) ham, `yol-top-test.html` (katalogdagi
 * testli bellashuv) ham shu faylni ulaydi: doska bir xil chiziladi
 * (`yol-top-board.js`). Sahifaning qolgan uslubi — har birining oʻz faylida.
 * Ranglar: `--yt-*` (sahna) va `--s0..s3` (oʻyinchilar) — interfeys
 * tugmalariga ishlatilmaydi.
 */
:root {
  --yt-bg: #F4F0E6;
  --yt-card: #FFFFFF;
  --yt-line: #E6DFD0;
  --yt-seg: #ECE6D8;
  --yt-frame: #E9E1D0;
  --yt-cell: #FFFDF7;
  --yt-grid: #E8DFCC;
  --yt-ink: var(--ll-ink, #0A0A0A);
  --yt-ink2: #4A463E;
  --yt-ink3: #6F695C;                       /* 4.8:1 fonda, 5.4:1 oq kartada */
  --yt-dark: var(--ll-acc-grad, #292929);
  --yt-dark-fg: var(--ll-acc-fg, #FAFAFA);
  --yt-accent: #C25E0B;                     /* «top» sarlavhada, katta matn 4.4:1 */
  --yt-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px -16px rgba(70,50,20,.45);

  --s0: #3D6CF4; --s0-hi: #AFC6FF; --s0-lo: #1B379E; --s0-w: #2D57D8; --s0-soft: rgba(61,108,244,.14);
  --s1: #EC4C3C; --s1-hi: #FFB8AD; --s1-lo: #9C1F18; --s1-w: #CF3626; --s1-soft: rgba(236,76,60,.14);
  --s2: #18A673; --s2-hi: #98EDC9; --s2-lo: #0A6243; --s2-w: #128A5F; --s2-soft: rgba(24,166,115,.15);
  --s3: #F08A1C; --s3-hi: #FFD6A3; --s3-lo: #A24F09; --s3-w: #D06F0E; --s3-soft: rgba(240,138,28,.16);
}
.s0 { --c: var(--s0); --hi: var(--s0-hi); --lo: var(--s0-lo); --w: var(--s0-w); --soft: var(--s0-soft); }
.s1 { --c: var(--s1); --hi: var(--s1-hi); --lo: var(--s1-lo); --w: var(--s1-w); --soft: var(--s1-soft); }
.s2 { --c: var(--s2); --hi: var(--s2-hi); --lo: var(--s2-lo); --w: var(--s2-w); --soft: var(--s2-soft); }
.s3 { --c: var(--s3); --hi: var(--s3-hi); --lo: var(--s3-lo); --w: var(--s3-w); --soft: var(--s3-soft); }
/* 2 kishilik oʻyinda 2-oʻrindiq oʻyinchisi (`yol-top.js` → render): oʻzi — koʻk, raqib — doim
 * qizil. Devor, marra, dona va kartalar rangni `--s0/--s1` dan oladi, shuning uchun
 * palitrani almashtirish yetadi; tomoshabin oʻrindiq ranglarini oʻzgarishsiz koʻradi. */
html.yt-swap {
  --s0: #EC4C3C; --s0-hi: #FFB8AD; --s0-lo: #9C1F18; --s0-w: #CF3626; --s0-soft: rgba(236,76,60,.14);
  --s1: #3D6CF4; --s1-hi: #AFC6FF; --s1-lo: #1B379E; --s1-w: #2D57D8; --s1-soft: rgba(61,108,244,.14);
}

/* ── Doska ────────────────────────────────────────────────────────── */
.yt-frame {
  padding: calc(var(--p, 36px) * .3); border-radius: calc(var(--p, 36px) * .62);
  background: linear-gradient(180deg, #EEE7D8, #E4DAC6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 1px #DCD2BC, 0 22px 40px -26px rgba(70,50,20,.6);
}
.yt-board {
  position: relative; border-radius: calc(var(--p, 36px) * .34); background: var(--yt-cell);
  box-shadow: inset 0 0 0 1px var(--yt-grid), 0 1px 0 rgba(255,255,255,.8); outline: none; touch-action: none;
}
.yt-board:focus-visible { box-shadow: inset 0 0 0 1px var(--yt-grid), 0 0 0 3px var(--ll-acc-ring, rgba(41,41,41,.5)); }
.yt-goals { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.yt-goal { position: absolute; background: var(--soft); opacity: .6; }
.yt-goal.mine { opacity: 1; background: color-mix(in srgb, var(--c) 20%, transparent); }
.yt-goal.side0 { left: 0; right: 0; top: 0; height: var(--p); border-top: 3px solid var(--c); }
.yt-goal.side2 { left: 0; right: 0; bottom: 0; height: var(--p); border-bottom: 3px solid var(--c); }
.yt-goal.side1 { top: 0; bottom: 0; right: 0; width: var(--p); border-right: 3px solid var(--c); }
.yt-goal.side3 { top: 0; bottom: 0; left: 0; width: var(--p); border-left: 3px solid var(--c); }
.yt-grid {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(to right, var(--yt-grid) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--yt-grid) 1px, transparent 1px);
  background-size: var(--p) var(--p); background-position: -.5px -.5px;
}
.yt-marks, .yt-targets, .yt-walls, .yt-pawns { position: absolute; inset: 0; }
.yt-marks, .yt-walls, .yt-pawns { pointer-events: none; }
.yt-trace {
  position: absolute; width: calc(var(--p) * .2); height: calc(var(--p) * .2); margin: calc(var(--p) * -.1) 0 0 calc(var(--p) * -.1);
  border-radius: 50%; background: var(--c); opacity: .22; animation: trace .5s ease both;
}
@keyframes trace { from { transform: scale(2.2); opacity: 0; } }
.yt-target { position: absolute; display: grid; place-items: center; padding: 0; border: 0; background: transparent; border-radius: calc(var(--p) * .2); z-index: 2; transition: background .15s; }
.yt-target i {
  width: calc(var(--p) * .3); height: calc(var(--p) * .3); border-radius: 50%; background: var(--hi);
  box-shadow: 0 0 0 calc(var(--p) * .06) var(--soft); animation: dot-in .36s cubic-bezier(.3,1.6,.5,1) both;
  animation-delay: calc(var(--k) * 35ms); transition: transform .15s;
}
.yt-target:hover, .yt-target.hover, .yt-target:focus-visible { background: var(--soft); }
.yt-target:hover i, .yt-target.hover i { transform: scale(1.25); }
@keyframes dot-in { from { transform: scale(0); opacity: 0; } }
.placing .yt-target { opacity: .2; pointer-events: none; }
.yt-wall {
  position: absolute; border-radius: 99px; background: var(--w);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.18), 0 2px 4px -1px rgba(40,25,5,.4);
  z-index: 3; transition: box-shadow .4s;
}
.yt-wall.fresh { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 4px var(--soft), 0 2px 6px rgba(40,25,5,.35); }
.yt-ghost { z-index: 4; background: var(--w); opacity: .5; box-shadow: 0 0 0 3px var(--soft); transition: left .07s ease-out, top .07s ease-out; pointer-events: none; }
.yt-ghost.pinned { opacity: .85; animation: breathe 1.4s ease-in-out infinite; }
.yt-ghost.bad { background: var(--ll-err, #DC2626); box-shadow: 0 0 0 3px rgba(220,38,38,.18); opacity: .55; animation: none; }
@keyframes breathe { 50% { opacity: .55; } }
.yt-hint-cell { position: absolute; border-radius: calc(var(--p) * .2); box-shadow: inset 0 0 0 3px #E9A800; background: rgba(245,180,0,.16); animation: hint 1.1s ease-in-out infinite; }
.yt-hint-wall { background: #E9A800; opacity: .9; animation: hint 1.1s ease-in-out infinite; }
@keyframes hint { 50% { opacity: .35; } }
.yt-pawn { position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); z-index: 5; will-change: transform; }
.yt-ball {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0 5%, var(--hi) 17%, var(--c) 56%, var(--lo) 100%);
  box-shadow: inset 0 -2px 5px rgba(0,0,0,.2), inset 0 2px 3px rgba(255,255,255,.3);
  transition: box-shadow .3s;
}
.yt-shadow { position: absolute; left: 6%; right: 6%; bottom: -16%; height: 34%; border-radius: 50%; background: radial-gradient(closest-side, rgba(50,35,10,.4), rgba(50,35,10,0)); }
.yt-pawn.on .yt-ball { box-shadow: inset 0 -2px 5px rgba(0,0,0,.2), 0 0 0 calc(var(--p) * .05) #fff, 0 0 0 calc(var(--p) * .095) var(--c); }
.yt-pawn.on::before {
  content: ''; position: absolute; inset: -22%; border-radius: 50%; border: 2px solid var(--c);
  animation: ring 1.8s ease-out infinite; pointer-events: none;
}
@keyframes ring { from { transform: scale(.7); opacity: .7; } to { transform: scale(1.35); opacity: 0; } }
.yt-pawn.dragging { z-index: 9; }
.yt-pawn.dragging .yt-ball { transform: scale(1.18); }
.yt-pawn.dragging .yt-shadow { transform: translateY(35%) scale(1.25); opacity: .55; }
.yt-pawn.won .yt-ball { animation: bounce .8s cubic-bezier(.3,.6,.4,1) infinite; }
.yt-pawn.won::before { border-color: #E9A800; }
/* Doskadagi gʻolib ham toj kiyadi — shar ichida, u bilan birga sakraydi. */
.yt-pawn.won .yt-ball::after {
  content: ''; position: absolute; left: 16%; right: 16%; top: -40%; height: 50%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 50'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFEB94'/%3E%3Cstop offset='.45' stop-color='%23FFC62B'/%3E%3Cstop offset='1' stop-color='%23E08600'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 40 5 15 19 27 32 8 45 27 59 15 56 40Z' fill='url%28%23g%29' stroke='%23C47400' stroke-width='2' stroke-linejoin='round'/%3E%3Crect x='7' y='37' width='50' height='10' rx='3.5' fill='%23E39A00' stroke='%23A65B00' stroke-width='1.6'/%3E%3Cg fill='url%28%23g%29' stroke='%23C47400' stroke-width='1.5'%3E%3Ccircle cx='5' cy='14' r='3.6'/%3E%3Ccircle cx='32' cy='7' r='4'/%3E%3Ccircle cx='59' cy='14' r='3.6'/%3E%3C/g%3E%3Cpath d='M32 21 37 27.5 32 34 27 27.5Z' fill='%23E63950' stroke='%239C1229' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(120,70,0,.4)); animation: yt-crown-in .6s .15s cubic-bezier(.3,1.55,.5,1) both;
}
@keyframes bounce { 0%, 100% { transform: none; } 45% { transform: translateY(-30%) scale(1.05); } 80% { transform: scale(1.1, .9); } }
.yt-drag {
  position: fixed; left: 0; top: 0; z-index: 70; border-radius: 99px; background: var(--w); pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 24px -8px rgba(40,25,5,.5); will-change: transform; transition: opacity .15s;
}
.yt-drag.over { opacity: .45; }

/* ── Devor tokchasi ───────────────────────────────────────────────── */
.tray {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; align-self: center;
  padding: 7px 10px; border-radius: 20px; background: var(--yt-card); border: 1px solid var(--yt-line); box-shadow: var(--yt-shadow);
}
.stock { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 6px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 64px; }
.mini-wall { width: 22px; height: 7px; border-radius: 9px; background: var(--w, #B9AE98); }
.piece {
  width: 88px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 15px;
  background: var(--yt-seg); touch-action: none; transition: transform .15s, opacity .2s, box-shadow .2s, background .2s;
}
.piece i { display: block; border-radius: 99px; background: var(--w, #B9AE98); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 6px -2px rgba(40,25,5,.4); transition: transform .2s; }
.piece[data-axis="h"] i { width: 58px; height: 11px; }
.piece[data-axis="v"] i { width: 11px; height: 36px; }
.piece:active:not(:disabled) i { transform: scale(1.08); }
.piece.sel { background: var(--soft); box-shadow: 0 0 0 2px var(--c); }
.piece.lifted { opacity: .35; }
.piece:disabled { opacity: .4; }
.tray.idle .piece i, .tray.idle .mini-wall { background: #C3B9A5; }