/* Výběr šachovnice, figurek a trenéra v Nastavení (chess-appearance.js). */
.look-head { position:sticky; top:var(--look-head-top,0px); z-index:1; padding:4px 0 8px; background:var(--surface); }
.settings-drawer .settings-heading { z-index:2; }   /* nadpis skupiny zajíždí pod hlavičku Nastavení */
.look-title { margin:0; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.look-note { margin:2px 0 0; font-size:12.5px; line-height:1.35; color:var(--muted); }
.look-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); gap:8px; }
.look-tile { position:relative; display:block; width:100%; aspect-ratio:1; padding:0; overflow:hidden; cursor:pointer; color:var(--ink); background:var(--ui-control); border:1px solid var(--ui-border); border-radius:8px; }
.look-tile img { position:relative; display:block; width:100%; height:100%; }
.look-name { position:relative; display:flex; align-items:center; justify-content:center; height:100%; padding:4px; font-size:11px; line-height:1.2; overflow:hidden; background:var(--ui-control); }
.look-tile:hover { filter:brightness(1.08); }
.look-tile[aria-pressed="true"] { outline:2px solid var(--accent); outline-offset:2px; }

/* Dlaždice figurek stojí na polích právě zvolené šachovnice, aby byla vidět bílá i černá. */
.look-sq { position:absolute; top:0; bottom:0; width:50%; }
.look-sq.light { left:0; background:var(--light); }
.look-sq.dark { right:0; background:var(--dark); }

/* Trenéři jsou všichni na jednom řádku a ukazují hlavu stejně jako okénko v panelu trenéra. */
#lookCoach .look-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.look-tile.look-treneri img { width:150%; height:150%; max-width:none; margin:-5% 0 0 -25%; }
.look-tile.look-treneri[data-look="konik"] img { width:122%; height:122%; margin:-1% 0 0 -19%; }   /* Koník v saku mává rukou u okraje */
.look-tile.look-treneri[data-look="konik"][aria-pressed="true"] .look-check { right:auto; left:3px; }   /* fajfka by zakryla mávající ruku vpravo nahoře */

.look-check,.look-lock { display:none; position:absolute; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.look-tile[aria-pressed="true"] .look-check { display:block; top:3px; right:3px; width:16px; height:16px; padding:2px; border-radius:50%; color:var(--surface); background:var(--accent); stroke-width:3.5; }
.look-tile.locked { cursor:help; }
.look-tile.locked img { filter:saturate(.7) brightness(.55); }
.look-tile.locked .look-lock { display:block; top:50%; left:50%; width:22px; height:22px; margin:-11px 0 0 -11px; color:#fff; stroke-width:2; filter:drop-shadow(0 1px 2px #000a); }
.look-tile.fresh::after { content:''; position:absolute; top:4px; left:4px; width:10px; height:10px; border-radius:50%; background:#e0101e; box-shadow:0 0 0 2px var(--surface); }

/* Po první volbě zmizí ztmavení, aby byla deska v opravdových barvách. Dotyk na ni Nastavení zavře. */
.settings-backdrop { transition:background .2s ease; }
.look-peek .settings-backdrop { background:transparent; }
/* Telefon: Nastavení se stáhne pod desku. */
.settings-drawer { transition:top .22s ease; }
.settings-drawer.look-sheet { top:var(--look-sheet-top,50%); width:100%; padding-top:0; border-top:1px solid var(--ui-border); border-radius:14px 14px 0 0; box-shadow:0 -12px 30px #0007; }
.settings-drawer.look-sheet .settings-heading { top:0; padding:4px 0; }
@media (prefers-reduced-motion:reduce) {
  .settings-drawer,.settings-backdrop { transition:none; }
}