/* Původní styly hry (deska, figurky, panely hádanek a schopností, souboje, odznaky, dialogy).
 * Načítá se před chess-workspace.css, který je pro nové rozhraní přepisuje. Nepoužívaná pravidla
 * byla odstraněna 28. 10. 2026 (krok 4 revize); kontrola: node testy/css-nepouzite.mjs. */
  :root {
    --light: #eadfc8;        /* světlé pole */
    --dark:  #7c5b3b;        /* tmavé pole */
    --board-edge: #4a3422;   /* rám šachovnice */
    --piece-white: #ffffff;
    --piece-white-edge: #2b2b2b;
    --piece-black: #1d1d1d;
    --piece-black-edge: #f4f4f4;
    --bg: #1a1614;
    --label: #d9c6a5;
  }

  body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at 50% 0%, #2a221c, var(--bg));
    color: #f0e9dd;
    font-family: "Segoe UI", system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px;
  }

  h1 {
    margin: 0;
    font-size: clamp(22px, 4vw, 34px);
    letter-spacing: 0.5px;
    font-weight: 700;
  }
  h1 .emoji { font-size: 0.9em; }

  .controls {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .controls select {
    font: inherit;
    font-size: 14px;
    color: #f0e9dd;
    background: var(--board-edge);
    border: 1px solid #5e4630;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
  }

  /* Šachovnice vlevo + akční panel vpravo; na úzké obrazovce pod sebou */
  .play-area {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
  }
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 240px;
  }

  /* Rám + souřadnice okolo šachovnice */
  .board-frame {
    --frame: clamp(20px, 4vw, 30px);
    display: grid;
    grid-template-columns: var(--frame) auto var(--frame);
    grid-template-rows: var(--frame) auto var(--frame);
    background: var(--board-edge);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  }

  .corner { }

  .files, .ranks {
    display: grid;
    color: var(--label);
    font-size: clamp(11px, 1.6vw, 14px);
    font-weight: 600;
    user-select: none;
  }
  .files { grid-auto-flow: column; }
  .files > span, .ranks > span {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ranks { grid-auto-flow: row; }

  /* Vlastní hrací plocha 8x8 */
  .board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: min(80vw, 70vh, 560px);
    height: min(80vw, 70vh, 560px);
    border: 2px solid var(--board-edge);
    position: relative;
  }
  .arrow-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
  }
  /* Pole nesmí mít vlastní z-index, jeho podklad by zakryl šipku.
     Nad sousední pole a šipku se zvedají jen věci uvnitř pole. */
  .square.mated .piece, .square.victor .piece { z-index: 1; }
  .surrender-flag, .mate-tag, .winner-crown, .winner-tag { z-index: 6; }

  .square {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(28px, 8vw, 52px);
    line-height: 1;
    cursor: default;
    position: relative;
  }
  .quality-badge {
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: clamp(13px, 2.4vw, 20px);
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
    animation: badgePop 0.25s ease-out;
  }
  /* žlutý popisek nad odznakem (skládá popisek + kolečko na sebe vpravo nahoře) */
  .quality-badge-wrap {
    position: absolute;
    top: 1px;
    right: 2px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    pointer-events: none;
    z-index: 3;
  }
  .quality-badge-wrap .quality-badge {
    position: static;
    top: auto;
    right: auto;
  }
  .quality-label {
    font-size: clamp(10px, 1.4vw, 11px);
    font-weight: 800;
    color: #ffd24a;
    background: rgba(20, 14, 8, 0.85);
    border: 1px solid rgba(255, 210, 74, 0.55);
    border-radius: 6px;
    padding: 1px 5px;
    line-height: 1.15;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
    animation: badgePop 0.25s ease-out;
  }
  .quality-label.warn {
    color: #ff7a6e;
    border-color: rgba(255, 122, 110, 0.6);
  }
  .quality-label.miss {
    color: #ffc24a;
    border-color: rgba(255, 194, 74, 0.6);
  }
  /* jantarové „?!" = šlo to o dost líp (nepřesnost) */
  .quality-badge.inaccuracy {
    display: flex; align-items: center; justify-content: center;
    width: clamp(18px, 3.4vw, 27px); height: clamp(18px, 3.4vw, 27px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffce6b, #e08a12);
    color: #2a1500; font-weight: 900; font-size: clamp(11px, 2vw, 16px);
    letter-spacing: -1px;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  }
  /* zelené kolečko s fajfkou „✓" = dobrý (normální) tah — nic nepokazil */
  .quality-badge.ok-mark {
    display: flex; align-items: center; justify-content: center;
    width: clamp(17px, 3.2vw, 25px); height: clamp(17px, 3.2vw, 25px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #9be38f, #3f9b35);
    color: #fff; font-weight: 900; font-size: clamp(11px, 2vw, 15px);
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
  }
  /* dvě fajfky „✓✓" = výborný tah */
  .quality-badge.ok-mark.double { letter-spacing: -2.5px; font-size: clamp(10px, 1.8vw, 14px); padding-right: 2px; box-sizing: border-box; }
  /* modré kolečko = známý tah z knihy zahájení, jediný legální tah */
  .quality-badge.book-mark {
    display: flex; align-items: center; justify-content: center;
    width: clamp(17px, 3.2vw, 25px); height: clamp(17px, 3.2vw, 25px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #a9d0ff, #3a78c9);
    color: #fff; font-weight: 900; font-size: clamp(11px, 2vw, 15px);
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
  }
  /* zelená hvězda „★" = nejlepší tah */
  .quality-badge.star-mark {
    display: flex; align-items: center; justify-content: center;
    width: clamp(18px, 3.4vw, 27px); height: clamp(18px, 3.4vw, 27px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #86e892, #1f9a3a);
    color: #fff; font-weight: 900; font-size: clamp(11px, 2.1vw, 16px);
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
  }
  /* VELKÉ fialové kolečko „!!" = BRILANTNÍ (vidlička na dámu / oběť, která se vyplatí) */
  .quality-badge.brill-mark {
    display: flex; align-items: center; justify-content: center;
    width: clamp(25px, 5vw, 38px); height: clamp(25px, 5vw, 38px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #e3b8ff, #9b30ff 55%, #5a12b8);
    color: #fff; font-weight: 900; font-size: clamp(13px, 2.6vw, 20px);
    letter-spacing: -1.5px; text-shadow: 0 1px 2px rgba(40,0,80,0.7);
    border: 2.5px solid #fff;
    animation: badgePop 0.3s ease-out, brillGlow 1.6s ease-in-out 0.3s 3;
  }
  @keyframes brillGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(170,70,255,0.8), 0 1px 4px rgba(0,0,0,0.6); }
    50%      { box-shadow: 0 0 0 7px rgba(170,70,255,0), 0 0 16px rgba(190,110,255,0.9); }
  }
  /* zlaté „#" = šachmat */
  .quality-badge.mate-mark {
    display: flex; align-items: center; justify-content: center;
    width: clamp(19px, 3.6vw, 28px); height: clamp(19px, 3.6vw, 28px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe680, #d49a00);
    color: #3a2400; font-weight: 900; font-size: clamp(11px, 2.1vw, 16px);
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  }
  /* oranžové „?" = přehlédnutá šance (mat nebo materiál zadarmo) */
  .quality-badge.miss-mark {
    display: flex; align-items: center; justify-content: center;
    width: clamp(18px, 3.4vw, 27px); height: clamp(18px, 3.4vw, 27px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffa766, #e0560f);
    color: #2a0e00; font-weight: 900; font-size: clamp(12px, 2.2vw, 17px);
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  }
  /* ČERVENÉ otazníky v ČERVENÉM kolečku:
     „??"  = velká chyba
     „???" = příšerný tah (dáma zadarmo / soupeř může dát mat jedním tahem) */
  .quality-badge.bad-mark {
    display: flex; align-items: center; justify-content: center;
    width: clamp(19px, 3.6vw, 28px); height: clamp(19px, 3.6vw, 28px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff, #ffe1e1);
    color: #e0101e; font-weight: 900; font-size: clamp(12px, 2.3vw, 18px);
    letter-spacing: -1.5px;
    border: 3px solid #e0101e;
    box-shadow: 0 0 0 1.5px #fff, 0 1px 4px rgba(0,0,0,0.6);
  }
  .quality-badge.bad-mark.double {
    width: clamp(22px, 4.3vw, 33px); height: clamp(22px, 4.3vw, 33px);
    font-size: clamp(11px, 2.3vw, 18px); letter-spacing: -2px;
    animation: badgePop 0.25s ease-out, badPulse 1.3s ease-in-out 0.3s 3;
  }
  @keyframes badPulse {
    0%, 100% { box-shadow: 0 0 0 1.5px #fff, 0 0 0 0 rgba(224,16,30,0.75); }
    50%      { box-shadow: 0 0 0 1.5px #fff, 0 0 0 7px rgba(224,16,30,0); }
  }
  /* ZLATÉ kolečko „!!!" = BOŽSKÝ (brilantní tah, kde se dáma obětuje pěšci) */
  .quality-badge.divine-mark {
    display: flex; align-items: center; justify-content: center;
    width: clamp(25px, 5vw, 38px); height: clamp(25px, 5vw, 38px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fff3b0, #f5c518 55%, #a87400);
    color: #3a2500; font-weight: 900; font-size: clamp(11px, 2.2vw, 17px);
    letter-spacing: -1.5px; text-shadow: 0 1px 0 rgba(255,245,190,0.6);
    border: 2.5px solid #fff; box-shadow: 0 0 10px rgba(255,210,74,0.8);
  }
  .quality-label.good  { color: #9ccbff; border-color: rgba(111,176,255,0.6); }
  .quality-label.star  { color: #8fe39a; border-color: rgba(60,190,90,0.6); }
  .quality-label.brill { color: #e7c6ff; border-color: #b26bff; background: rgba(60,10,110,0.9); font-size: clamp(10px, 1.6vw, 12px); }
  .quality-label.gold  { color: #ffd24a; }
  @keyframes badgePop {
    0% { transform: scale(0); }
    70% { transform: scale(1.25); }
    100% { transform: scale(1); }
  }
  .square.light { background: var(--light); }
  .square.dark  { background: var(--dark); }

  .piece {
    user-select: none;
    pointer-events: none; /* kliky chytá pole, ne figurka */
  }

  /* Interaktivní stavy */
  .square.movable { cursor: grab; touch-action: none; }  /* prst táhne figurku, nescrolluje stránku */
  .board { user-select: none; -webkit-user-select: none; }
  /* přetahování: figurka „v ruce" jede za myší, na původním poli zůstane jen stín */
  .drag-ghost {
    position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    filter: drop-shadow(0 8px 7px rgba(0,0,0,0.45)) !important;
    opacity: 1 !important;
  }
  .piece.drag-origin { opacity: 0.3; }
  .square.drag-over { box-shadow: inset 0 0 0 4px rgba(255,255,255,0.85) !important; }
  body.dragging, body.dragging * { cursor: grabbing !important; }
  .square.selected {
    box-shadow: inset 0 0 0 4px #f5d76e;
    cursor: pointer;
  }
  /* zelená tečka = kam smí táhnout na prázdné pole */
  .square.move::after {
    content: "";
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: rgba(60, 160, 70, 0.85);
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
  }
  /* prstenec = může tu vzít soupeřovu figurku */
  .square.capture {
    cursor: pointer;
    box-shadow: inset 0 0 0 5px rgba(200, 60, 50, 0.85);
  }
  .square.move, .square.capture { cursor: pointer; }
  .square.last-move { box-shadow: inset 0 0 0 4px rgba(245, 215, 110, 0.45); }
  .square.in-check {
    box-shadow: inset 0 0 0 4px rgba(220, 50, 47, 0.95);
    background: radial-gradient(circle, rgba(220,50,47,0.55), transparent 70%), var(--dark);
  }
  .square.in-check.light {
    background: radial-gradient(circle, rgba(220,50,47,0.5), transparent 70%), var(--light);
  }
  /* nápověda — doporučená pole „odkud" a „kam" (zelená) */
  .square.hint-from {
    box-shadow: inset 0 0 0 4px rgba(60, 190, 90, 0.85);
  }
  .square.hint-to {
    box-shadow: inset 0 0 0 4px rgba(60, 190, 90, 0.95);
    background: radial-gradient(circle, rgba(60,190,90,0.4), transparent 72%), var(--dark);
  }
  .square.hint-to.light {
    background: radial-gradient(circle, rgba(60,190,90,0.35), transparent 72%), var(--light);
  }
  /* zmatovaný král — zčervená a pulzuje */
  .square.mated {
    box-shadow: inset 0 0 0 4px rgba(200, 20, 20, 0.95);
    background: radial-gradient(circle, rgba(220,30,30,0.7), transparent 75%), var(--dark);
  }
  .square.mated.light {
    background: radial-gradient(circle, rgba(220,30,30,0.65), transparent 75%), var(--light);
  }
  .square.mated .piece {
    color: #e11d2a !important;
    -webkit-text-stroke: 1px #6b0000;
    text-shadow: 0 0 10px rgba(225, 29, 42, 0.85);
    animation: matedPulse 1s ease-in-out 4;
  }
  /* bílá vlajka = vzdání se poraženého krále */
  .surrender-flag {
    position: absolute;
    top: -6px; right: -4px;
    font-size: clamp(18px, 3.6vw, 30px);
    line-height: 1;
    pointer-events: none;
    transform-origin: bottom left;
    animation: flagWave 1.1s ease-in-out 4;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  }
  @keyframes flagWave {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
  }
  /* nápis „ŠACHMAT" přímo u poraženého krále */
  .mate-tag {
    position: absolute;
    bottom: -10px; left: 50%;
    transform: translateX(-50%);
    background: #c01414;
    color: #fff;
    font-size: clamp(10px, 1.7vw, 13px);
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 7px;
    border: 1.5px solid #fff;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.55);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    animation: badgePop 0.3s ease-out;
  }
  /* vítězný král — zlatavě září */
  .square.victor .piece {
    color: #ffd700 !important;
    -webkit-text-stroke: 1px #8a5a00;
    text-shadow: 0 0 12px rgba(255, 200, 40, 0.95);
    animation: victorGlow 1.2s ease-in-out 4;
  }
  @keyframes victorGlow {
    0%, 100% { filter: brightness(1); transform: scale(1); }
    50%      { filter: brightness(1.4); transform: scale(1.06); }
  }
  /* zlatá korunka nad vítězným králem (~třetina krále) */
  .winner-crown {
    position: absolute;
    top: -16px; left: 50%;
    transform: translateX(-50%);
    font-size: clamp(11px, 2.7vw, 18px);
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(120,80,0,0.7));
    animation: crownBob 1.2s ease-in-out 4;
  }
  @keyframes crownBob {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(-4deg); }
    50%      { transform: translateX(-50%) translateY(-3px) rotate(4deg); }
  }
  /* nápis „VÍTĚZ" přímo u vítězného krále (zelený) */
  .winner-tag {
    position: absolute;
    bottom: -10px; left: 50%;
    transform: translateX(-50%);
    background: #0f7a24;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 7px;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1.5px #06200b;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.55);
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    animation: badgePop 0.3s ease-out;
  }
  /* král zahynul (výbuch) — červené kolečko na jeho poli */
  .square.king-dead::after {
    content: "";
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,80,80,0.95), rgba(180,10,10,0.95));
    border: 2px solid #ff5a5a;
    box-shadow: 0 0 14px rgba(225,29,42,0.9), inset 0 0 8px rgba(120,0,0,0.7);
    animation: matedPulse 1s ease-in-out 4;
  }
  @keyframes matedPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50%      { transform: scale(1.12); filter: brightness(1.35); }
  }
  /* pole, kam lze dosadit bonusovou figurku */
  .square.drop { cursor: pointer; }
  .square.drop::after {
    content: "";
    width: 34%;
    height: 34%;
    border-radius: 50%;
    background: rgba(70, 130, 220, 0.85);
    box-shadow: 0 0 6px rgba(40, 90, 200, 0.7);
  }
  .square.drop:hover { box-shadow: inset 0 0 0 4px rgba(70, 130, 220, 0.9); }
  .piece.white {
    color: var(--piece-white);
    -webkit-text-stroke: 1.4px var(--piece-white-edge);
    paint-order: stroke fill;
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.45));
  }
  .piece.black {
    color: var(--piece-black);
    -webkit-text-stroke: 1px var(--piece-black-edge);
    paint-order: stroke fill;
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.4));
  }

  /* Vtipné figurky (emoji): bez siluetového obrysu, místo toho prstenec majitele */
  .piece.special {
    -webkit-text-stroke: 0;
    border-radius: 50%;
    padding: 0.05em;
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.45));
  }
  .piece.special.white { box-shadow: 0 0 0 3px #f4f4f4; background: rgba(255,255,255,0.42); }
  .piece.special.black { box-shadow: 0 0 0 3px #1b1b1b; background: rgba(20,20,20,0.42); }
  .piece.frozen { filter: drop-shadow(0 0 5px #7fd4ff); opacity: 0.82; }

  /* ---- Kreslené figurky (SVG) ---- */
  .piece-svg {
    width: 90%; height: 90%; display: block; overflow: visible;
    filter: drop-shadow(0 2px 1.5px rgba(0,0,0,0.38));
  }
  .piece-svg.special { width: 78%; height: 78%; padding: 2px; }
  .piece-svg.frozen { filter: drop-shadow(0 0 6px #7fd4ff); opacity: 0.82; }
  .square.mated .piece-svg .body { fill: #e5484d; stroke: #5a0000; }
  .square.mated .piece-svg { filter: drop-shadow(0 0 9px rgba(225,29,42,0.95)); }
  .square.victor .piece-svg .body { fill: url(#pcGold); stroke: #6b4a00; }
  .square.victor .piece-svg { filter: drop-shadow(0 0 10px rgba(255,200,40,0.95)); }

  /* ---- Vzhledy šachovnice ----
     Třída .theme-X je na <body> (hra) i na náhledech v galerii vzhledů, proto selektory bez „body".
     --light / --dark smí být i přechod (vrstvy), barva pak musí být poslední. */
  .theme-wood { --light: #eadfc8; --dark: #7c5b3b; --label: #d9c6a5; }
  /* „jako chess.com": zelená šachovnice, tmavý rám */
  .theme-green { --light: #ebecd0; --dark: #739552; --label: #c9c6bd; }
  .theme-green .board-frame { background: #2b2926; }
  .theme-green .board { border-color: #2b2926; }
  .theme-green .square.last-move { box-shadow: inset 0 0 0 100px rgba(246,246,105,0.42); }
  .theme-green .square.move::after { background: rgba(0,0,0,0.2); box-shadow: none; }

  /* 🍬 Bonbonová: růžová a mátová, čokoládové figurky */
  .theme-candy { --light: #fff0f6; --dark: repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0 6px, transparent 6px 12px), #f29cc4; --label: #ffd1e6; }
  .theme-candy .board-frame { background: linear-gradient(135deg, #8e2f62, #5e1d42); }
  .theme-candy .board { border-color: #5e1d42; }
  .theme-candy .piece-svg.black .body { fill: url(#pcChoco); stroke: #2a1408; }
  .theme-candy .square.last-move { box-shadow: inset 0 0 0 100px rgba(140,230,190,0.45); }

  /* 🌊 Pirátské moře: písek a moře */
  .theme-sea { --light: #f4e3b5; --dark: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.18), transparent 60%), #3c86b4; --label: #cfe6f5; }
  .theme-sea .board-frame { background: linear-gradient(135deg, #2a5274, #16314a); }
  .theme-sea .board { border-color: #16314a; }
  .theme-sea .piece-svg.black .body { fill: url(#pcNavy); stroke: #0b1420; }
  .theme-sea .square.last-move { box-shadow: inset 0 0 0 100px rgba(255,214,90,0.42); }

  /* ❄️ Ledová: bílá a ledově modrá */
  .theme-ice { --light: linear-gradient(135deg, #ffffff, #e3f3ff), #f2faff; --dark: linear-gradient(135deg, #a6d4f2, #78b4de), #8ec5ea; --label: #e0f3ff; }
  .theme-ice .board-frame { background: linear-gradient(135deg, #5f93bb, #2d5a80); box-shadow: 0 0 0 2px #cfeaff inset, 0 18px 40px rgba(0,0,0,0.55); }
  .theme-ice .board { border-color: #2d5a80; }
  .theme-ice .piece-svg.white .body { fill: url(#pcIceW); stroke: #3b5f86; }
  .theme-ice .piece-svg.black .body { fill: url(#pcNavy); stroke: #0b1420; }
  .theme-ice .square.last-move { box-shadow: inset 0 0 0 100px rgba(120,220,255,0.35); }

  /* 🌌 Vesmír: noční obloha s hvězdami */
  .theme-space { --light: #8f84d8; --dark: radial-gradient(circle at 25% 30%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 70% 75%, rgba(255,255,255,0.8) 0 1px, transparent 1.5px), #2f2570; --label: #d9d1ff; }
  .theme-space .board-frame { background: radial-gradient(circle at 20% 20%, #3a2d7c, #0d0826 70%); }
  .theme-space .board { border-color: #0d0826; }
  .theme-space .piece-svg.black .body { fill: url(#pcSpaceB); stroke: #cbbcff; }
  .theme-space .square.last-move { box-shadow: inset 0 0 0 100px rgba(255,220,120,0.35); }

  /* 🤖 Neon: tmavá mřížka, svítící figurky */
  .theme-neon {
    --light: linear-gradient(90deg, rgba(64,240,255,0.22) 1px, transparent 1px), linear-gradient(rgba(64,240,255,0.22) 1px, transparent 1px), #1f2b3d;
    --dark: linear-gradient(90deg, rgba(64,240,255,0.22) 1px, transparent 1px), linear-gradient(rgba(64,240,255,0.22) 1px, transparent 1px), #101824;
    --label: #5ff0ff;
  }
  .theme-neon .board-frame { background: #070b12; box-shadow: 0 0 18px rgba(64,240,255,0.35), 0 18px 40px rgba(0,0,0,0.55); }
  .theme-neon .board { border-color: #40f0ff; }
  .theme-neon .piece-svg.white .body { fill: url(#pcNeonW); stroke: #053b44; }
  .theme-neon .piece-svg.black .body { fill: url(#pcNeonB); stroke: #3d0630; }
  .theme-neon .piece-svg.white { filter: drop-shadow(0 0 5px rgba(64,240,255,0.7)); }
  .theme-neon .piece-svg.black { filter: drop-shadow(0 0 5px rgba(255,80,200,0.7)); }
  .theme-neon .square.last-move { box-shadow: inset 0 0 0 100px rgba(64,240,255,0.18), inset 0 0 0 2px #40f0ff; }

  /* 🏛️ Mramor: bílý a šedý kámen */
  .theme-marble { --light: linear-gradient(125deg, #f7f7f4 0%, #e4e4df 45%, #f2f2ee 55%, #dcdcd6 100%), #eeeeea; --dark: linear-gradient(125deg, #a1a8ae 0%, #7f878e 45%, #979ea5 55%, #737a81 100%), #8d949b; --label: #e7e7e7; }
  .theme-marble .board-frame { background: linear-gradient(135deg, #5a6168, #33383d); }
  .theme-marble .board { border-color: #33383d; }
  .theme-marble .piece-svg.black .body { fill: url(#pcMarbleB); stroke: #111417; }

  /* 🪄 Kouzelná: fialová se zlatem */
  .theme-magic { --light: #ecdcff; --dark: radial-gradient(circle at 70% 25%, rgba(255,215,90,0.55) 0 1px, transparent 2px), #7d4fc6; --label: #ffd24a; }
  .theme-magic .board-frame { background: linear-gradient(135deg, #43207a, #1e0b3d); box-shadow: 0 0 0 2px #c79a16 inset, 0 18px 40px rgba(0,0,0,0.55); }
  .theme-magic .board { border-color: #c79a16; }
  .theme-magic .piece-svg.black .body { fill: url(#pcMagicB); stroke: #12051f; }
  .theme-magic .square.last-move { box-shadow: inset 0 0 0 100px rgba(255,210,74,0.38); }

  /* 🔥 Dračí oheň: láva a uhlí */
  .theme-lava { --light: #f3b77c; --dark: radial-gradient(circle at 50% 120%, rgba(255,120,30,0.55), transparent 65%), #8a2414; --label: #ffb27a; }
  .theme-lava .board-frame { background: linear-gradient(135deg, #2a0f08, #120604); box-shadow: 0 0 22px rgba(255,90,20,0.45), 0 18px 40px rgba(0,0,0,0.55); }
  .theme-lava .board { border-color: #ff6a1a; }
  .theme-lava .piece-svg.black .body { fill: url(#pcLavaB); stroke: #ff7a1a; }
  .theme-lava .square.last-move { box-shadow: inset 0 0 0 100px rgba(255,230,120,0.35); }

  /* 👑 Zlatá: pro šampiony */
  .theme-gold { --light: #fff4cf; --dark: linear-gradient(135deg, #dcb54a, #b48a1f), #c8a033; --label: #fff1c2; }
  .theme-gold .board-frame { background: linear-gradient(135deg, #9a7414, #5c430a); box-shadow: 0 0 0 2px #ffe08a inset, 0 0 24px rgba(255,210,74,0.4), 0 18px 40px rgba(0,0,0,0.55); }
  .theme-gold .board { border-color: #ffe08a; }
  .theme-gold .square.last-move { box-shadow: inset 0 0 0 100px rgba(255,255,255,0.35); }

  /* 🌙 Noční: tlumená šedomodrá, šetří oči večer */
  .theme-night { --light: #a3abb6; --dark: #4d5562; --label: #c5ccd6; }
  .theme-night .board-frame { background: #1c2027; }
  .theme-night .board { border-color: #1c2027; }
  .theme-night .square.last-move { box-shadow: inset 0 0 0 100px rgba(120,170,255,0.32); }

  /* 🌸 Sakura: růžové květy třešní */
  .theme-sakura {
    --light: #fff5f8;
    --dark: radial-gradient(circle at 28% 30%, rgba(255,255,255,0.7) 0 2px, transparent 3px),
            radial-gradient(circle at 72% 70%, rgba(255,255,255,0.5) 0 1.5px, transparent 2.5px), #f2b3c7;
    --label: #ffd9e4;
  }
  .theme-sakura .board-frame { background: linear-gradient(135deg, #5a3330, #331a19); }
  .theme-sakura .board { border-color: #331a19; }
  .theme-sakura .piece-svg.black .body { fill: url(#pcPlum); stroke: #1f0a12; }
  .theme-sakura .square.last-move { box-shadow: inset 0 0 0 100px rgba(255,240,150,0.42); }

  /* 🌿 Džungle: listí a kůra */
  .theme-jungle {
    --light: #d3e6ad;
    --dark: radial-gradient(ellipse at 20% 80%, rgba(20,70,15,0.4), transparent 55%),
            radial-gradient(ellipse at 80% 20%, rgba(150,210,80,0.4), transparent 55%), #4f8a33;
    --label: #e3f0c8;
  }
  .theme-jungle .board-frame { background: repeating-linear-gradient(90deg, #5b3b1c 0 7px, #4a2f15 7px 11px, #63421f 11px 16px); }
  .theme-jungle .board { border-color: #3a2410; }
  .theme-jungle .piece-svg.black .body { fill: url(#pcChoco); stroke: #1e0f05; }
  .theme-jungle .square.last-move { box-shadow: inset 0 0 0 100px rgba(255,230,90,0.4); }

  /* 🍉 Melounová: červená dužina se semínky a zelená kůra */
  .theme-melon {
    --light: radial-gradient(2.5px 4px at 30% 35%, #2a1414 90%, transparent 100%),
             radial-gradient(2.5px 4px at 68% 66%, #2a1414 90%, transparent 100%), #ff8f8f;
    --dark: repeating-linear-gradient(90deg, #2e7d32 0 7px, #43a047 7px 14px);
    --label: #c8f2c9;
  }
  .theme-melon .board-frame { background: linear-gradient(135deg, #1f5c22, #123814); }
  .theme-melon .board { border-color: #a5d6a7; }
  .theme-melon .square.last-move { box-shadow: inset 0 0 0 100px rgba(255,255,160,0.4); }

  /* 🌅 Západ slunce: oranžovo-růžová obloha */
  .theme-sunset { --light: #ffd9ab; --dark: linear-gradient(180deg, #ff8a5c, #c4487a), #e0676a; --label: #ffd9ab; }
  .theme-sunset .board-frame { background: linear-gradient(180deg, #4a2157, #1b0f2e); }
  .theme-sunset .board { border-color: #1b0f2e; }
  .theme-sunset .piece-svg.black .body { fill: url(#pcSpaceB); stroke: #12081f; }
  .theme-sunset .square.last-move { box-shadow: inset 0 0 0 100px rgba(255,250,170,0.4); }

  /* 🎃 Strašidelná: dýně a noc, figurky jako duchové */
  .theme-spooky {
    --light: radial-gradient(circle at 50% 45%, rgba(255,220,120,0.35), transparent 65%), #ff9f2e;
    --dark: radial-gradient(circle at 50% 110%, rgba(140,70,200,0.45), transparent 60%), #2b1a3b;
    --label: #ffb347;
  }
  .theme-spooky .board-frame { background: #120a18; box-shadow: 0 0 20px rgba(255,140,30,0.35), 0 18px 40px rgba(0,0,0,0.55); }
  .theme-spooky .board { border-color: #ff9f2e; }
  .theme-spooky .piece-svg.white .body { fill: #f6f3ff; stroke: #4b3a63; }
  .theme-spooky .piece-svg.white { filter: drop-shadow(0 0 5px rgba(210,255,210,0.7)); }
  .theme-spooky .piece-svg.black .body { fill: url(#pcMagicB); stroke: #ff9f2e; }
  .theme-spooky .square.last-move { box-shadow: inset 0 0 0 100px rgba(160,255,120,0.3); }

  /* 🧱 Kostičková: hranatá tráva a hlína */
  .theme-pixel {
    --light: conic-gradient(#9ccc65 25%, #8bc34a 0 50%, #9ccc65 0 75%, #8bc34a 0) 0 0 / 25% 25%, #8bc34a;
    --dark: conic-gradient(#8d6e63 25%, #795548 0 50%, #8d6e63 0 75%, #795548 0) 0 0 / 25% 25%, #795548;
    --label: #e0e0e0;
  }
  .theme-pixel .board-frame { background: conic-gradient(#757575 25%, #616161 0 50%, #757575 0 75%, #616161 0) 0 0 / 16px 16px; border-radius: 0; }
  .theme-pixel .board { border-color: #424242; }
  .theme-pixel .square.last-move { box-shadow: inset 0 0 0 4px #fff59d; }

  /* ✏️ Kreslená: obrázek tužkou na papíře */
  .theme-sketch {
    --light: repeating-linear-gradient(0deg, transparent 0 7px, rgba(110,140,200,0.2) 7px 8px), #fbf8ef;
    --dark: repeating-linear-gradient(45deg, rgba(50,50,50,0.38) 0 1.5px, transparent 1.5px 6px), #ebe6d8;
    --label: #333;
  }
  .theme-sketch .board-frame { background: #f3efe2; box-shadow: 0 0 0 2px #333 inset, 0 18px 40px rgba(0,0,0,0.55); }
  .theme-sketch .board { border-color: #333; }
  .theme-sketch .piece-svg:not(.frozen) { filter: none; }
  .theme-sketch .piece-svg.white .body { fill: #ffffff; stroke: #222; }
  .theme-sketch .piece-svg.black .body { fill: #3b3b3b; stroke: #111; }
  .theme-sketch .square.last-move { box-shadow: inset 0 0 0 100px rgba(255,235,59,0.35); }

  /* 💎 Diamantová: lesklý křišťál */
  .theme-diamond {
    --light: linear-gradient(135deg, #ffffff 0%, #dbf6ff 40%, #ffffff 55%, #c6edff 100%), #eefaff;
    --dark: linear-gradient(135deg, #86dbf2 0%, #42b4da 45%, #a2e8f8 55%, #2c9dc9 100%), #5fc3e3;
    --label: #0e4a5e;
  }
  .theme-diamond .board-frame { background: linear-gradient(135deg, #f2fdff, #8fd8ee 35%, #ffffff 55%, #63c4e3); box-shadow: 0 0 22px rgba(120,220,255,0.55), 0 18px 40px rgba(0,0,0,0.55); }
  .theme-diamond .board { border-color: #2c9dc9; }
  .theme-diamond .piece-svg.white .body { fill: url(#pcIceW); stroke: #2c6f8c; }
  .theme-diamond .piece-svg.black .body { fill: url(#pcNavy); stroke: #071018; }
  .theme-diamond .square.last-move { box-shadow: inset 0 0 0 100px rgba(255,255,255,0.45); }

  /* 🌈 Duhová: každá řada jinou barvou (proměnné se nastaví přímo polím v řadě) */
  .theme-rainbow { --light: #ffc9c9; --dark: #ef6b6b; --label: #ffffff; }
  .theme-rainbow .board-frame { background: linear-gradient(135deg, #ef6b6b, #f59a3c, #e8c93a, #5cbf4a, #36b5a8, #4d7fe0, #7a5ce0, #b75ad6); }
  .theme-rainbow .board { border-color: #ffffff; }
  .theme-rainbow .files, .theme-rainbow .ranks { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
  .theme-rainbow .square:nth-child(n+1):nth-child(-n+8)   { --light: #ffc9c9; --dark: #ef6b6b; }
  .theme-rainbow .square:nth-child(n+9):nth-child(-n+16)  { --light: #ffe0b8; --dark: #f59a3c; }
  .theme-rainbow .square:nth-child(n+17):nth-child(-n+24) { --light: #fff4b0; --dark: #e0bd2a; }
  .theme-rainbow .square:nth-child(n+25):nth-child(-n+32) { --light: #d4f5c4; --dark: #5cbf4a; }
  .theme-rainbow .square:nth-child(n+33):nth-child(-n+40) { --light: #c8f2ee; --dark: #36b5a8; }
  .theme-rainbow .square:nth-child(n+41):nth-child(-n+48) { --light: #cfe0ff; --dark: #4d7fe0; }
  .theme-rainbow .square:nth-child(n+49):nth-child(-n+56) { --light: #ddd2ff; --dark: #7a5ce0; }
  .theme-rainbow .square:nth-child(n+57):nth-child(-n+64) { --light: #f5d0ff; --dark: #b75ad6; }
  .theme-rainbow .square.last-move { box-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 100px rgba(255,255,255,0.25); }

  /* 🏰 Hrad (rytířský): pískovec a šedý kámen, hradby s cimbuřím, figurky v brnění */
  .theme-castle {
    --light: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 55%), radial-gradient(circle at 70% 70%, rgba(0,0,0,0.07), transparent 40%), #d6c49c;
    --dark: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 50%), radial-gradient(circle at 30% 70%, rgba(0,0,0,0.16), transparent 45%), #7b776d;
    --label: #efe3c4;
  }
  .theme-castle .board-frame {
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0 2px, transparent 2px 15px),
                repeating-linear-gradient(90deg, rgba(0,0,0,0.2) 0 2px, transparent 2px 30px),
                linear-gradient(135deg, #6a655c, #4a463f);
  }
  .theme-castle .board-frame::before {      /* cimbuří nad hradbou */
    content: ''; position: absolute; left: 10px; right: 10px; top: -13px; height: 14px; border-radius: 2px 2px 0 0;
    background: repeating-linear-gradient(90deg, #5d5850 0 18px, transparent 18px 30px);
  }
  .theme-castle .board { border-color: #3b3832; }
  .theme-castle .piece-svg.white .body { fill: url(#pcSilver); stroke: #39434d; }
  .theme-castle .piece-svg.black .body { fill: url(#pcIron); stroke: #000; }
  .theme-castle .square.last-move { box-shadow: inset 0 0 0 100px rgba(255,200,80,0.35); }

  /* ---- ⚔️ Bojové šachy: aréna souboje přes celou šachovnici ---- */
  .board-frame { position: relative; }
  .arena {
    position: absolute; inset: 0; z-index: 40; border-radius: 10px; overflow: hidden; cursor: pointer;
    background: #10131f; opacity: 0; transition: opacity 0.25s ease;
  }
  .arena.show { opacity: 1; }
  .arena[hidden] { display: none; }
  .arena svg { display: block; width: 100%; height: 100%; }
  .ar-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: arFlame 0.16s ease-in-out infinite alternate; }
  @keyframes arFlame { from { transform: scale(1, 1) skewX(-3deg); } to { transform: scale(0.86, 1.14) skewX(4deg); } }

  /* braní / výběr na poli posledního tahu: prstenec musí být vidět i přes zvýraznění tahu (v každém vzhledu) */
  body .square.last-move.capture { box-shadow: inset 0 0 0 5px rgba(200,60,50,0.85), inset 0 0 0 100px rgba(246,246,105,0.25); }
  body .square.last-move.selected { box-shadow: inset 0 0 0 4px #f5d76e, inset 0 0 0 100px rgba(246,246,105,0.25); }

  .piece-badge {
    position: absolute; bottom: 0; right: 2px;
    font-size: clamp(9px, 1.7vw, 13px); line-height: 1; font-weight: 700;
    color: #fff; background: rgba(20,20,20,0.8); border-radius: 7px; padding: 1px 4px;
    pointer-events: none; white-space: nowrap;
  }
  .frost-badge {
    position: absolute; top: 0; left: 2px;
    font-size: clamp(12px, 2.2vw, 18px); line-height: 1; pointer-events: none;
    filter: drop-shadow(0 0 2px #2aa4ff);
  }
  /* pole pro výběr figurky při použití schopnosti */
  .square.pick { cursor: pointer; box-shadow: inset 0 0 0 4px rgba(185,120,230,0.9); }
  .square.pick:hover { box-shadow: inset 0 0 0 5px rgba(205,140,250,1); }

  /* panel schopností */
  /* ---- Hádanky ---- */
  .puzzle-panel {
    display: none; flex-direction: column; gap: 8px;
    background: rgba(0,0,0,0.22); border: 1px solid #5e4630; border-radius: 10px; padding: 10px 12px;
  }
  body.puzzle-mode .puzzle-panel { display: flex; }
  body.puzzle-mode .puzzle-hide, body.puzzle-mode .abil-only { display: none !important; }
  body.puzzle-mode .pb-caps, body.puzzle-mode .pb-adv { display: none; }   /* v hádance nemá smysl */
  .controls label[hidden] { display: none; }   /* skryté volby (úroveň, strana) opravdu schovej */
  .pz-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 16px; }
  .pz-progress { font-size: 12.5px; color: #8fe39a; font-weight: 700; }
  .pz-cat { font-size: 12.5px; color: #c8b89a; font-weight: 700; }
  .pz-task { font-size: 15px; font-weight: 700; color: #f0e9dd; }
  .pz-status { font-size: 14px; font-weight: 700; padding: 7px 9px; border-radius: 7px; line-height: 1.35; }
  .pz-status.info { background: transparent; color: #d9c6a5; padding: 0; font-weight: 500; }
  .pz-status.good { background: rgba(60,160,70,0.22); color: #9ee8a8; }
  .pz-status.bad  { background: rgba(224,16,30,0.2); color: #ffb0aa; }
  .pz-status.win  { background: rgba(212,154,0,0.25); color: #ffe08a; font-size: 15px; }
  .pz-btns { display: flex; gap: 6px; }
  .pz-btns .btn { flex: 1; font-size: 14px; padding: 7px 4px; }
  .pz-btns .btn:disabled { opacity: 0.45; cursor: default; transform: none; }
  #pzNextBtn.ready { background: #2f6b3a; border-color: #4a8f57; animation: badgePop 0.3s ease-out; }
  .pz-list { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; max-height: 158px; overflow-y: auto; padding: 2px; }
  .pz-filter {
    font: inherit; font-size: 14px; font-weight: 700; color: #f0e9dd;
    background: var(--board-edge); border: 1px solid #5e4630; border-radius: 6px; padding: 5px 8px; cursor: pointer;
  }
  .pz-dot {
    font: inherit; font-size: 12px; font-weight: 800; padding: 4px 0; border-radius: 6px; cursor: pointer;
    border: 1px solid #5e4630; background: #3a2e24; color: #d9c6a5;
  }
  .pz-dot.solved { background: #2f6b3a; border-color: #4a8f57; color: #fff; }
  .pz-dot.clean  { background: #c79a16; border-color: #e6bf3a; color: #1a1206; }   /* bez chyby a nápovědy */
  .pz-dot.current { outline: 2px solid #f5d76e; outline-offset: 1px; }
  .mv-dots { color: #8a7a60; padding: 1px 4px; }

  /* klasické šachy (schopnosti vypnuté): bonus i schopnosti zmizí */
  body.no-abilities .abil-only { display: none !important; }
  .abil-title { font-size: 13px; font-weight: 700; color: #c8b89a; align-self: flex-start; margin: 6px 0 -2px; }
  .abil-note { font-size: 11.5px; color: #a8987a; align-self: flex-start; margin: -2px 0 0; line-height: 1.3; }
  .abilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
  .abil-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 3px; font-size: 11.5px; line-height: 1.1;
    background: #3a4d6b; border-color: #52708f7a;
  }
  .abil-btn .ab-ic { font-size: 19px; }
  .abil-btn:hover:not(:disabled) { background: #46607f; }
  .abil-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: auto; }
  .abil-btn.active { background: #b0413a; border-color: #d4655e; }
  .abil-btn.used { opacity: 0.4; }

  /* bublina s popisem schopnosti po najetí myší */
  .abil-btn { position: relative; }
  .abil-btn[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
    background: #1c1410; color: #f4ecdd; border: 1px solid #6b4f36;
    padding: 7px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 600;
    line-height: 1.3; text-align: center; white-space: normal; width: 160px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.55); z-index: 60; pointer-events: none;
  }
  .abil-btn[data-tip]:hover::before {
    content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%;
    transform: translateX(-50%); border: 6px solid transparent;
    border-top-color: #6b4f36; z-index: 60; pointer-events: none;
  }

  .status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
  }
  .turn-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #000;
    background: #fff;
  }
  .turn-dot.b { background: #1d1d1d; border-color: #f4f4f4; }

  .btn {
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #f0e9dd;
    background: var(--board-edge);
    border: 1px solid #5e4630;
    border-radius: 8px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.12s, transform 0.08s;
  }
  .btn:hover { background: #5e4630; transform: translateY(-1px); }
  .bonus-btn { background: #5a3d6b; border-color: #7a52917a; }
  .bonus-btn:hover:not(:disabled) { background: #6e4a85; }
  .bonus-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .bonus-btn.active { background: #b0413a; border-color: #d4655e; }
  /* tlačítko nápovědy */
  .hint-btn { background: #2f6b3a; border-color: #4a8f57; }
  .hint-btn:hover:not(:disabled) { background: #2a6034; }
  .hint-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .hint-btn.active { background: #c79a16; border-color: #e6bf3a; color: #1a1206; }
  .bonus-state { font-size: 13px; color: #b8a888; }

  .quality-msg {
    font-size: 15px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
  }
  .quality-msg[hidden] { display: none; }
  .quality-msg.good {
    background: rgba(60, 160, 70, 0.22);
    color: #8fe39a;
    border: 1px solid rgba(60, 160, 70, 0.5);
  }
  .quality-msg.blunder {
    background: rgba(200, 60, 50, 0.22);
    color: #f3a09a;
    border: 1px solid rgba(200, 60, 50, 0.5);
  }
  .quality-msg.inacc {
    background: rgba(224, 138, 18, 0.20);
    color: #ffce8a;
    border: 1px solid rgba(224, 138, 18, 0.5);
  }

  .hint {
    color: #b8a888;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    margin: 0;
    padding-top: 6px;
    border-top: 1px solid #3a2e24;
    min-height: 20px;
  }
  .hint.warn { color: #f0a07a; font-weight: 600; }

  /* Okénko proměny pěšce */
  /* překryvná okna jsou <dialog>: prohlížeč je vystředí, pozadí kreslí ::backdrop */
  .promo-dialog { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; overflow: visible; z-index: 10; }
  .promo-dialog::backdrop { background: rgba(0,0,0,0.55); }
  .promo-dialog:not([open]) { display: none; }
  .promo-dialog .promo-box { max-height: 90dvh; overflow: auto; }
  .promo-box {
    background: #2a221c;
    border: 2px solid var(--board-edge);
    border-radius: 12px;
    padding: 20px 24px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0,0,0,0.6);
  }
  .promo-box p { margin: 0 0 14px; font-weight: 600; }
  .promo-choices { display: flex; gap: 10px; }
  .promo-btn {
    width: 64px;
    height: 64px;
    font-size: 40px;
    line-height: 1;
    background: var(--light);
    border: 2px solid var(--board-edge);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.08s, background 0.12s;
  }
  .promo-btn:hover { transform: translateY(-2px); background: #f6edd9; }
  .promo-btn .piece-svg { width: 54px; height: 54px; }

  /* ---- Sloupec se šachovnicí: hráči nahoře/dole + ukazatel výhody ---- */
  .board-col { display: flex; flex-direction: column; gap: 8px; }
  .board-row { display: flex; gap: 6px; align-items: stretch; }
  .player-bar {
    display: flex; align-items: center; gap: 8px;
    min-height: 34px; padding: 5px 10px;
    background: rgba(0,0,0,0.22); border: 1px solid #3a2e24; border-radius: 8px;
    font-size: 14px; font-weight: 600; color: #d9c6a5;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .pb-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #000; background: #fff; flex: none; }
  .pb-dot.b { background: #1d1d1d; border-color: #f4f4f4; }
  .pb-name { white-space: nowrap; }
  .pb-caps { display: flex; flex-wrap: wrap; font-size: 17px; line-height: 1; letter-spacing: -3px; margin-left: 4px; }
  .pb-caps .piece { filter: none; }
  .pb-caps .piece.white { -webkit-text-stroke: 1px #2b2b2b; }
  .pb-caps .piece.black { -webkit-text-stroke: 0.6px #bbb; }
  .pb-caps .piece-svg { width: 19px; height: 19px; margin-right: -6px; filter: none; }
  .pb-adv { margin-left: auto; font-size: 13px; color: #8fe39a; }

  .eval-bar {
    position: relative; width: 16px; flex: none;
    border-radius: 6px; overflow: hidden;
    background: #2b2b2b; border: 1px solid #000;
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
  }
  .eval-bar[hidden] { display: none; }
  .eval-fill {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #f2efe8; transition: height 0.45s ease;
  }
  .eval-bar.flipped .eval-fill { bottom: auto; top: 0; }
  .eval-num {
    position: absolute; left: 50%; transform: translateX(-50%) rotate(-90deg);
    font-size: 12px; font-weight: 800; white-space: nowrap; pointer-events: none;
  }

  /* ---- Ovládací přepínače nahoře ---- */
  .tool-btn { font-size: 13px; padding: 4px 10px; }
  .tool-btn.off { opacity: 0.5; }
  /* výrazné tlačítko na hádanky (ať se nehledají jen v nabídce Režim) */
  .puzzle-btn { background: #6d3fb0; border-color: #9a6be0; color: #fff; font-weight: 800; padding: 6px 16px; }
  .puzzle-btn:hover { background: #8150cc; }
  /* úroveň hráče v jeho liště („Bílý · Ty · Úroveň 750") — klik otevře přehled úrovně */
  /* tvoje jméno v liště — klik = změnit */
  .pb-me {
    font: inherit; font-weight: 800; color: inherit; white-space: nowrap;
    background: none; border: none; border-bottom: 1px dashed rgba(255,255,255,0.35);
    padding: 0 1px; cursor: pointer;
  }
  .pb-me:hover { border-bottom-color: #f5d76e; color: #fff; }
  .pb-me .pen { font-size: 12px; opacity: 0.6; margin-left: 2px; }
  .pb-me.empty { font-weight: 600; font-style: italic; opacity: 0.65; }   /* jméno zatím nevyplněné */
  .name-box { text-align: left; min-width: 260px; }
  .name-box input {
    width: 100%; font: inherit; font-size: 18px; font-weight: 700; color: #1a1206;
    padding: 8px 10px; border-radius: 8px; border: 2px solid #a8832a; background: #fff8e6; margin: 4px 0 12px;
  }
  .name-box .row-btns { display: flex; gap: 8px; justify-content: flex-end; }
  .pb-rating {
    font: inherit; font-size: 13px; font-weight: 800; white-space: nowrap;
    color: #ffe08a; background: rgba(168,131,42,0.25);
    border: 1px solid rgba(168,131,42,0.75); border-radius: 999px;
    padding: 1px 9px; cursor: pointer;
  }
  .pb-rating:hover { background: rgba(168,131,42,0.45); }
  /* úroveň počítače (podle obtížnosti) — stříbrná */
  .pb-rating.ai { color: #e3e9f0; background: rgba(150,170,190,0.18); border-color: rgba(170,190,210,0.6); }
  .pb-rating.ai:hover { background: rgba(150,170,190,0.32); }
  .pb-rating.bump { animation: ratingBump 1.4s ease-out; }
  .pb-rating.drop { animation: ratingDrop 1.4s ease-out; }
  @keyframes ratingDrop {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(224,16,30,0.9); }
    25%  { transform: scale(0.88); box-shadow: 0 0 0 8px rgba(224,16,30,0.35); }
    100% { transform: scale(1);    box-shadow: 0 0 0 14px rgba(224,16,30,0); }
  }
  @keyframes ratingBump {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,210,74,0.9); }
    25%  { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(255,210,74,0.35); }
    100% { transform: scale(1);    box-shadow: 0 0 0 14px rgba(255,210,74,0); }
  }
  .rating-box { text-align: left; max-width: 340px; }
  .rating-box h3 { margin: 0 0 4px; font-size: 18px; }
  .rating-big { font-size: 40px; font-weight: 900; color: #ffd24a; margin: 2px 0 10px; }
  .rating-box table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 14px; }
  .rating-box td { padding: 3px 0; }
  .rating-box td.n { text-align: right; font-weight: 800; }
  .rating-box .rules { font-size: 13px; color: #b8a888; line-height: 1.45; margin: 0 0 12px; }
  .rating-box .row-btns { display: flex; gap: 8px; justify-content: flex-end; }
  .summary .sum-rating { margin-top: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(212,154,0,0.18); color: #ffe08a; font-weight: 700; }

  /* ---- Hláška o kvalitě tahu (až dva řádky: tvůj tah + soupeřův) ---- */
  .quality-msg { display: flex; flex-direction: column; gap: 6px; padding: 0; background: none; border: none; text-align: left; }
  .qm-line {
    font-size: 13.5px; font-weight: 600; line-height: 1.35;
    padding: 7px 10px; border-radius: 8px; border: 1px solid transparent;
  }
  .qm-line b { font-weight: 800; }
  .qm-line .qm-who { opacity: 0.75; font-weight: 700; margin-right: 2px; }
  .qm-line.bad    { background: rgba(224,16,30,0.18); color: #ffb0aa; border-color: rgba(224,16,30,0.55); }
  .qm-line.miss   { background: rgba(224,138,18,0.18); color: #ffce8a; border-color: rgba(224,138,18,0.5); }
  .qm-line.good   { background: rgba(31,111,224,0.2); color: #b7d6ff; border-color: rgba(111,176,255,0.5); }
  .qm-line.star   { background: rgba(60,160,70,0.2); color: #9ee8a8; border-color: rgba(60,160,70,0.5); }
  .qm-line.brill  { background: rgba(155,48,255,0.28); color: #f0dcff; border-color: #b26bff; }
  .qm-line.gold   { background: rgba(212,154,0,0.2); color: #ffe08a; border-color: rgba(212,154,0,0.55); }

  /* ---- Zápis tahů ---- */
  .panel-title { font-size: 13px; font-weight: 700; color: #c8b89a; margin: 4px 0 -8px; }
  .moves-panel {
    background: rgba(0,0,0,0.2); border: 1px solid #3a2e24; border-radius: 8px;
    max-height: 170px; overflow-y: auto; padding: 4px; font-size: 13.5px;
  }
  .mv-row { display: grid; grid-template-columns: 30px 1fr 1fr; gap: 4px; padding: 1px 2px; border-radius: 4px; }
  .mv-row:nth-child(odd) { background: rgba(255,255,255,0.035); }
  .mv-num { color: #8a7a60; text-align: right; padding-right: 2px; }
  .mv { padding: 1px 4px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
  .mv-ann { font-weight: 900; margin-left: 2px; }
  .t-bad { color: #ff4655; } .t-miss { color: #ff9d4a; } .t-good { color: #6fb0ff; }
  .t-star { color: #5fd46f; } .t-gold { color: #ffd24a; } .t-brill { color: #c77dff; }
  .mv-empty { color: #7d6e58; font-size: 13px; padding: 4px 6px; }
  .moves-panel { position: relative; }
  .mv[data-idx] { cursor: pointer; }
  .mv[data-idx]:hover { background: rgba(255,255,255,0.09); }
  .mv.viewed { background: rgba(111,176,255,0.32); box-shadow: inset 0 0 0 1px rgba(111,176,255,0.8); }
  .moves-nav { display: flex; gap: 6px; margin-top: -8px; }
  .moves-nav .btn { flex: 1; padding: 4px 0; font-size: 14px; }
  .moves-nav .btn:disabled { opacity: 0.4; cursor: default; transform: none; }

  /* ---- Prohlížení partie (pozice v okamžiku vybraného tahu) ---- */
  .review-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 6px 10px; border-radius: 8px;
    background: rgba(31,111,224,0.18); border: 1px solid rgba(111,176,255,0.6);
    color: #cfe3ff; font-size: 13.5px; font-weight: 600;
  }
  .review-bar[hidden] { display: none; }
  .review-bar .rb-text { flex: 1; min-width: 150px; }
  .review-bar .btn { font-size: 13px; padding: 3px 10px; }
  .board-frame.reviewing { box-shadow: 0 0 0 3px rgba(111,176,255,0.75), 0 18px 40px rgba(0,0,0,0.55); }
  .summary tr.cat td { cursor: pointer; }
  .summary tr.cat:hover td { background: rgba(255,255,255,0.06); }
  .summary tr.cat.active td { background: rgba(111,176,255,0.2); }
  .summary td.n[data-color] { text-decoration: underline dotted rgba(255,255,255,0.4); }
  .summary .sum-tip { margin-top: 6px; color: #9d8e74; font-size: 12px; }

  /* ---- Přehled partie po konci hry ---- */
  .summary {
    background: rgba(0,0,0,0.22); border: 1px solid #5e4630; border-radius: 10px;
    padding: 10px 12px; font-size: 13px;
  }
  .summary[hidden] { display: none; }
  .summary h3 { margin: 0 0 6px; font-size: 14px; }
  .summary table { width: 100%; border-collapse: collapse; }
  .summary td { padding: 2px 0; }
  .summary td.n { text-align: center; width: 44px; font-weight: 800; }
  .summary tr.acc td { border-bottom: 1px solid #3a2e24; padding-bottom: 5px; }
  .summary tr.acc + tr td { padding-top: 5px; }

  /* ---- Graf průběhu partie (v přehledu) ---- */
  .sum-graph { margin: 8px 0 2px; }
  .sum-graph .sg-title { font-size: 12px; color: #9d8e74; margin-bottom: 3px; }
  .sum-graph svg { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid #000; cursor: pointer; }
  .sum-graph rect.hit:hover { fill: rgba(111,176,255,0.25); }

  /* ---- Šachové hodiny v liště hráče ---- */
  .pb-clock {
    flex: none; margin-left: 6px; min-width: 62px; text-align: center;
    font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.5px;
    padding: 2px 8px; border-radius: 6px;
    background: rgba(255,255,255,0.08); color: #a99b86; border: 1px solid rgba(255,255,255,0.08);
  }
  .pb-clock[hidden] { display: none; }
  .pb-clock.running { background: #f2efe8; color: #1a1a1a; border-color: #fff; }
  .pb-clock.low { color: #ff6b6b; }
  .pb-clock.low.running { background: #d63031; color: #fff; border-color: #ff7b7b; animation: clockPulse 1s ease-in-out infinite; }
  .pb-clock.flag { background: #6b0f14; color: #ffb0aa; border-color: #c0392b; }
  @keyframes clockPulse { 50% { box-shadow: 0 0 0 4px rgba(214,48,49,0.35); } }

  /* ---- Název zahájení nad zápisem tahů ---- */

  /* ---- Odznaky ---- */
  .badge-btn { background: #6b4a10; border-color: #c79a16; color: #ffe08a; }
  .badge-btn:hover { background: #8a6014; }
  .badge-btn .bd-new {
    display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px;
    background: #e0101e; color: #fff; font-size: 11px; line-height: 18px; font-weight: 800;
  }
  .badge-box { text-align: left; width: min(94vw, 600px); max-height: 86vh; overflow-y: auto; }
  .bd-head { display: flex; justify-content: space-between; align-items: baseline; }
  .bd-head h3 { margin: 0; font-size: 19px; }
  .bd-total { font-size: 15px; font-weight: 800; color: #ffd24a; }
  .bd-bar, .bd-prog { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; margin: 6px 0 4px; }
  .bd-bar span, .bd-prog span { display: block; height: 100%; background: linear-gradient(90deg, #c79a16, #ffd24a); }
  .bd-lead { margin: 8px 0 2px; font-size: 14px; line-height: 1.4; color: #d9c6a5; }
  .bd-prog { height: 5px; margin: 5px 0 1px; }
  .bd-cat { font-size: 12.5px; font-weight: 800; color: #c8b89a; text-transform: uppercase; letter-spacing: 0.6px; margin: 12px 0 6px; }
  .bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 7px; }
  .bd-card {
    display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: 9px;
    background: rgba(255,255,255,0.04); border: 1px solid #3a2e24;
  }
  .bd-card .bd-ic { font-size: 25px; line-height: 1; filter: grayscale(1); opacity: 0.4; }
  .bd-card b { display: block; font-size: 13.5px; color: #a99b86; }
  .bd-card small { display: block; font-size: 11.5px; color: #8a7a60; line-height: 1.3; }
  .bd-card .bd-pn { font-size: 11px; color: #a99b86; font-weight: 700; }
  .bd-card.got { background: linear-gradient(135deg, rgba(199,154,22,0.28), rgba(90,60,10,0.3)); border-color: #a8832a; }
  .bd-card.got .bd-ic { filter: none; opacity: 1; }
  .bd-card.got b { color: #ffe08a; }
  .bd-card.got small { color: #d9c6a5; }
  .bd-card.got .bd-date { color: #8fe39a; font-weight: 700; margin-top: 2px; }
  .bd-card.fresh { box-shadow: 0 0 0 2px #ffd24a, 0 0 14px rgba(255,210,74,0.45); }
  .badge-box .row-btns { display: flex; justify-content: flex-end; margin-top: 12px; }
  .board-col { position: relative; }
  .bot-bubble {
    position: absolute; top: 46px; left: 14px; z-index: 9; max-width: min(78%, 360px);
    display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 14px;
    background: #fff8e6; color: #2a1d0e; font-size: 14px; font-weight: 700; line-height: 1.3;
    box-shadow: 0 8px 22px rgba(0,0,0,0.5); border: 2px solid #e6bf3a; pointer-events: none;
    animation: bubbleIn 0.35s cubic-bezier(.2,1.5,.4,1);
  }
  .bot-bubble[hidden] { display: none; }
  .bot-bubble::before {               /* ocásek bubliny míří nahoru na lištu soupeře */
    content: ''; position: absolute; top: -9px; left: 22px;
    border: 8px solid transparent; border-top: 0; border-bottom: 9px solid #e6bf3a;
  }
  .bot-bubble .bb-ic { font-size: 24px; line-height: 1; }
  .bot-bubble.out { animation: bubbleOut 0.3s ease-in forwards; }
  @keyframes bubbleIn { from { transform: translateY(-8px) scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes bubbleOut { to { transform: translateY(-6px); opacity: 0; } }
  .pb-bot { font-weight: 800; color: #f0e9dd; }
  .pb-ava {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    font-size: 15px; vertical-align: middle; margin-right: 3px; border: 1px solid rgba(255,255,255,0.35);
  }
  .bots-box { text-align: left; width: min(94vw, 620px); max-height: 88vh; overflow-y: auto; }
  .bots-box h3 { margin: 0 0 2px; font-size: 19px; }
  .bots-box .bots-sub { color: #b8a888; font-size: 13px; margin: 0 0 10px; }
  .bots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 9px; }
  .bot-card {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
    padding: 12px 10px 10px; border-radius: 12px; cursor: pointer; font: inherit; color: inherit;
    background: rgba(255,255,255,0.05); border: 2px solid #3a2e24; transition: transform 0.1s, border-color 0.15s;
  }
  .bot-card:hover:not(.locked) { transform: translateY(-2px); border-color: #a8832a; }
  .bot-card.current { border-color: #f5d76e; box-shadow: 0 0 0 2px rgba(245,215,110,0.3); }
  .bot-card .bc-ava {
    width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 38px; border: 3px solid rgba(255,255,255,0.5); box-shadow: 0 6px 14px rgba(0,0,0,0.4);
  }
  .bot-card b { font-size: 15px; color: #ffe08a; }
  .bot-card .bc-rating { font-size: 12px; font-weight: 800; color: #e3e9f0; background: rgba(150,170,190,0.2); border-radius: 999px; padding: 0 8px; }
  .bot-card small { font-size: 12px; color: #c8b89a; line-height: 1.3; }
  .bot-card .bc-state { font-size: 11.5px; font-weight: 800; margin-top: 2px; }
  .bot-card .bc-state.won { color: #8fe39a; }
  .bot-card .bc-state.next { color: #ffd24a; }
  .bot-card .bc-tired { font-size: 11px; font-weight: 700; color: #ffb27a; }
  .bot-card.locked { cursor: not-allowed; }
  .bot-card.locked .bc-ava { filter: grayscale(1) brightness(0.45); }
  .bot-card.locked b, .bot-card.locked small { opacity: 0.5; }
  .bot-card.locked .bc-state { color: #a99b86; }
  .bots-box .row-btns { display: flex; justify-content: flex-end; margin-top: 12px; }

  /* ---- „Zkus to znovu" (procvičení vlastních chyb) ---- */
  .retry-panel {
    display: none; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px;
    background: rgba(31,111,224,0.12); border: 1px solid rgba(111,176,255,0.55);
  }
  body.retry-mode .retry-panel { display: flex; }
  body.retry-mode .actions, body.retry-mode .abil-only, body.retry-mode .summary,
  body.retry-mode .panel-title, body.retry-mode .moves-panel,
  body.retry-mode .moves-nav, body.retry-mode .quality-msg, body.retry-mode .pb-clock { display: none !important; }
  .rt-orig { font-size: 13px; line-height: 1.4; color: var(--ink,#f0e9dd); background: var(--surface,#2a241d);
             border: 1px solid #c8414a; border-radius: 7px; padding: 6px 9px; }
  .rt-orig b { color: inherit; }
  .rt-exit { font-size: 14px; padding: 6px; }
  #rtNextBtn.ready { background: #2f6b3a; border-color: #4a8f57; animation: badgePop 0.3s ease-out; }
  .retry-panel .pz-btns .btn:disabled { opacity: 0.45; cursor: default; transform: none; }
  .pz-dot.fixed { background: #2f6b3a; border-color: #4a8f57; color: #fff; }
  .pz-dot.fixed.clean { background: #c79a16; border-color: #e6bf3a; color: #1a1206; }
  .summary .sum-retry, .review-bar .rb-retry { background: #1f5fae; border-color: #6fb0ff; color: #fff; font-weight: 800; }
  .summary .sum-retry { width: 100%; margin-top: 8px; padding: 8px; font-size: 14px; }
  .summary .sum-retry:hover, .review-bar .rb-retry:hover { background: #2a73cc; }

  /* oznámení „Nový odznak!" nahoře uprostřed */
  .toasts {
    position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 30;
    display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
    width: min(92vw, 380px);
  }
  .toast {
    pointer-events: auto; cursor: pointer; width: 100%;
    display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 12px;
    background: linear-gradient(135deg, #3b2a0a, #634510); border: 2px solid #e6bf3a; color: #ffe08a;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6); animation: toastIn 0.45s cubic-bezier(.2,1.4,.4,1);
  }
  .toast .t-ic { font-size: 32px; line-height: 1; }
  .toast b { display: block; font-size: 14.5px; }
  .toast small { display: block; font-size: 12px; color: #e9d9b0; font-weight: 600; margin-top: 1px; }
  .toast.out { animation: toastOut 0.4s ease-in forwards; }
  @keyframes toastIn { from { transform: translateY(-40px) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes toastOut { to { transform: translateY(-30px); opacity: 0; } }

  /* omezený pohyb: žádné blikání odznaků, králů ani hodin */
  @media (prefers-reduced-motion: reduce) {
    .quality-badge, .square.mated .piece, .surrender-flag, .square.victor .piece, .winner-crown,
    .king-dead, .pb-clock.low.running, .pb-rating.bump, .pb-rating.drop, .bot-bubble, .toast { animation: none !important; }
  }
  /* úzké obrazovky: šachovnice se musí vejít i s rámem a ukazatelem */
  @media (max-width: 640px) {
    body { padding: 14px 10px; gap: 14px; }
    .board { width: min(calc(100vw - 104px), 70vh, 560px); height: min(calc(100vw - 104px), 70vh, 560px); }
    .eval-bar { width: 11px; }
    .sidebar { width: min(100%, 360px); }
  }
  .bot-card.recommended { border-color:#91c8db; box-shadow:0 0 0 2px rgba(145,200,219,.35); }
  .bot-card .bc-rec { font-size:12px; font-weight:800; color:#10222c; background:#91c8db; border-radius:999px; padding:0 8px; }