/* ===== Chess ===== */
.game-chess { container-type: size; }
.chess-layout {
  --bar: 44px;
  --fr: 18px; /* width of the frame around the board */
  --board: min(calc(100cqh - 2 * var(--bar) - 52px - 2 * var(--fr)), calc(100cqw - 380px - 2 * var(--fr)), 740px);
  flex: 1; display: flex; gap: 22px; align-items: center; justify-content: center;
  padding: 12px 16px;
}
.cb-col { display: flex; flex-direction: column; gap: 6px; width: calc(var(--board) + 2 * var(--fr)); }

/* Themes: square colours, texture and frame */
.cb-frame {
  --light: #ecdfd2; --dark: #9a4f5b; --tex: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.8%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%271 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .09%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E"); --tex-size: 160px;
  --frame-a: #4a1520; --frame-b: #1c070b; --label: rgba(255, 220, 228, .7);
  position: relative; padding: var(--fr); border-radius: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.8%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%271 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .09%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E"),
    linear-gradient(145deg, var(--frame-a), var(--frame-b));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 6px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.6), 0 0 70px -14px rgba(255, 40, 80, .28), 0 34px 60px -22px rgba(0,0,0,.85);
}
.cb-frame[data-theme="wood"] {
  --light: #f0d6ac; --dark: #b07b4c; --tex: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27400%27 height=%27400%27%3E%3Cfilter id=%27g%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.008 .25%27 numOctaves=%273%27 seed=%275%27/%3E%3CfeColorMatrix values=%270 0 0 0 .25 0 0 0 0 .13 0 0 0 0 .04 0 0 0 -1.3 .9%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23g%29%27/%3E%3C/svg%3E"); --tex-size: 400px;
  --frame-a: #6b3c19; --frame-b: #2a1407; --label: rgba(255, 228, 190, .75);
}
.cb-frame[data-theme="marble"] {
  --light: #eeeeec; --dark: #7b8a91; --tex: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27500%27 height=%27500%27%3E%3Cfilter id=%27v%27%3E%3CfeTurbulence type=%27turbulence%27 baseFrequency=%27.012 .02%27 numOctaves=%274%27 seed=%2711%27/%3E%3CfeColorMatrix values=%270 0 0 0 .3 0 0 0 0 .32 0 0 0 0 .34 0 0 0 -2.4 1.25%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23v%29%27/%3E%3C/svg%3E"); --tex-size: 500px;
  --frame-a: #3a3f46; --frame-b: #121417; --label: rgba(235, 240, 245, .7);
}
.cb-frame[data-theme="green"] {
  --light: #eeeed2; --dark: #769656; --frame-a: #33402a; --frame-b: #121a0d; --label: rgba(230, 240, 210, .7);
}
.cb-frame[data-theme="ocean"] {
  --light: #e3ebf0; --dark: #6f8fa8; --frame-a: #24364a; --frame-b: #0b131c; --label: rgba(220, 235, 250, .7);
}
.cb-files, .cb-ranks { position: absolute; display: flex; pointer-events: none; font-weight: 800; color: var(--label); font-size: clamp(9px, calc(var(--fr) * .62), 12px); text-transform: lowercase; }
.cb-files { left: var(--fr); right: var(--fr); bottom: 0; height: var(--fr); }
.cb-ranks { top: var(--fr); bottom: var(--fr); left: 0; width: var(--fr); flex-direction: column; }
.cb-files span, .cb-ranks span { flex: 1; display: grid; place-items: center; }

.cb-board {
  position: relative; width: var(--board); aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 0 0 3px rgba(255,255,255,.08);
}
.cb-squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
/* texture and highlight over the whole board */
.cb-squares::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 80% 60% at 30% 15%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(180deg, transparent 70%, rgba(0,0,0,.12)),
    var(--tex);
  background-size: auto, auto, var(--tex-size);
  mix-blend-mode: multiply;
}
.cb-frame[data-theme] .cb-squares::after { mix-blend-mode: normal; }
.cb-sq { position: relative; }
.cb-sq.light { background: var(--light); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.cb-sq.dark { background: var(--dark); box-shadow: inset 0 0 calc(var(--board) / 40) rgba(0,0,0,.18); }
.cb-sq.last::before { content: ''; position: absolute; inset: 0; background: rgba(255, 214, 92, .42); box-shadow: inset 0 0 0 2px rgba(255, 214, 92, .55); }
.cb-sq.sel::before { content: ''; position: absolute; inset: 0; background: rgba(255, 214, 92, .55); box-shadow: inset 0 0 calc(var(--board) / 30) rgba(255, 170, 40, .9); }
.cb-sq.check::after { content: ''; position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle, rgba(255, 60, 60, .95) 0%, rgba(230, 20, 20, .55) 40%, transparent 72%); }
.cb-sq.dot::after { content: ''; position: absolute; z-index: 2; left: 50%; top: 50%; width: 28%; height: 28%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(40, 20, 25, .5), rgba(20, 10, 12, .38)); box-shadow: 0 1px 2px rgba(255,255,255,.25); }
.cb-sq.cap::after { content: ''; position: absolute; z-index: 2; inset: 3%; border-radius: 50%; border: calc(var(--board) / 8 * .08) solid rgba(20, 10, 12, .35); }

.cb-pieces { position: absolute; inset: 0; pointer-events: none; }
.cb-piece {
  position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%;
  transition: transform .22s var(--ease), opacity .25s;
  z-index: 3;
  filter: drop-shadow(0 calc(var(--board) / 160) calc(var(--board) / 220) rgba(0,0,0,.5)) drop-shadow(0 0 1px rgba(0,0,0,.35));
  will-change: transform;
}
.cb-piece.no-anim { transition: none; }
.cb-piece.dragging { transition: none; z-index: 10; filter: drop-shadow(0 calc(var(--board) / 40) calc(var(--board) / 60) rgba(0,0,0,.5)); }
.cb-piece.gone { opacity: 0; }

.cb-promo {
  position: absolute; z-index: 20; width: 12.5%; display: flex; flex-direction: column;
  background: #f5f7fb; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); overflow: hidden;
}
.cb-promo button { border: 0; background: transparent; aspect-ratio: 1; padding: 6%; cursor: pointer; }
.cb-promo button:hover { background: #ffe9b0; }
.cb-promo img { width: 100%; height: 100%; }
.cb-promo-shade { position: absolute; inset: 0; z-index: 19; background: rgba(0,0,0,.35); }

.cb-player {
  height: var(--bar); display: flex; align-items: center; gap: 10px;
  padding: 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.cb-player.to-move { border-color: rgba(255, 51, 88, .55); background: var(--accent-soft); }
.cb-swatch { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(255,255,255,.3); flex: none; }
.cb-swatch.w { background: #f4f4f4; }
.cb-swatch.b { background: #222; }
.cb-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-caps { margin-left: auto; display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; }
.cb-caps img { width: 20px; height: 20px; margin-left: -6px; }
.adv { margin-left: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }

.cb-side { width: 320px; align-self: stretch; max-height: calc(var(--board) + 2 * var(--fr) + 2 * var(--bar) + 12px); margin: auto 0; display: flex; flex-direction: column; padding: 14px; box-shadow: none; }
.cb-moves-wrap { flex: 1; overflow: auto; margin: 8px 0; min-height: 60px; }
.cb-moves { margin: 0; padding: 0 0 0 34px; font-variant-numeric: tabular-nums; }
.cb-moves li { padding: 3px 0; color: var(--muted); }
.cb-moves li:nth-child(odd) { background: rgba(255,255,255,.025); }
.mv { display: inline-block; min-width: 72px; color: var(--text); font-weight: 600; padding-left: 8px; }
.cb-side .g-toolbar { padding: 0; justify-content: flex-start; }
.cb-side .g-toolbar .btn { flex: 1 1 auto; }

@container (max-width: 820px) {
  .chess-layout {
    --bar: 38px;
    --fr: 12px;
    --board: min(calc(100cqw - 16px - 2 * var(--fr)), calc(100cqh - 2 * var(--bar) - 150px - 2 * var(--fr)));
    flex-direction: column; gap: 8px; padding: 8px; justify-content: flex-start;
  }
  .cb-side { width: calc(var(--board) + 2 * var(--fr)); max-height: none; flex: 1; padding: 8px; margin: 0; border-radius: 14px; min-height: 0; }
  .cb-moves-wrap { flex: none; margin: 4px 0 8px; overflow-x: auto; overflow-y: hidden; min-height: 0; }
  .cb-moves { display: flex; gap: 2px; padding: 0 0 0 0; list-style-position: inside; white-space: nowrap; }
  .cb-moves li { padding: 2px 6px; background: none !important; }
  .mv { min-width: 0; padding-left: 4px; }
  .cb-side .g-toolbar { gap: 6px; }
  .cb-side .g-toolbar .btn { height: 36px; padding: 0 10px; font-size: 13px; }
  .cb-side .g-status { font-size: 14px; min-height: 20px; }
}

/* Style picker */
.look-box { display: flex; flex-direction: column; gap: 14px; }
.look-box .seg { flex-wrap: wrap; }
.look-pieces { display: flex; justify-content: center; gap: 6px; padding: 10px; border-radius: 14px; background: linear-gradient(135deg, #ecdfd2 50%, #9a4f5b 50%); }
.look-pieces img { width: 48px; height: 48px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); }

/* ===== Help for beginners ===== */
.cb-help { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 13.5px; line-height: 1.4; }
.cb-help p { margin: 0; }
.cb-help .btn { align-self: flex-start; }
.cb-help-piece { display: flex; gap: 10px; align-items: flex-start; }
.cb-help-piece img { width: 40px; height: 40px; flex: none; }
.cb-help-piece p { color: var(--muted, #b0b0bc); margin-top: 2px; }
.cb-help-danger { color: #ff8f98; font-weight: 600; }
.cb-help-hint { color: #ffd36e; }
.cb-sq.danger { box-shadow: inset 0 0 0 4px rgba(255, 77, 94, 0.85); }
.cb-sq.hint-from, .cb-sq.hint-to { box-shadow: inset 0 0 0 4px rgba(95, 224, 160, 0.95); }
.cb-sq.hint-to { background-image: radial-gradient(circle, rgba(95, 224, 160, 0.55) 22%, transparent 24%); }