/* Profily hráčů (chess-profiles-ui.js), Přehled pokroku a Domácí souboj (chess-progress.js). Proměnné prostředí z chess-workspace.css. */

/* ---- Obrázek hráče: vždy kolečko, rozměr je v CSS, takže načtení nic neposune ---- */
.profile-ava { display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--ui-fill,var(--canvas)); border:2px solid var(--line); box-sizing:border-box; }
.profile-ava-none { color:var(--muted); }
.profile-ava-none .ui-icon { width:60%; height:60%; }

/* ---- Tlačítko hráče: na počítači nad Nastavením, na telefonu v hlavičce vlevo od Nastavení ---- */
.rail-bottom #profileBtn { display:flex; align-items:center; gap:9px; width:100%; min-height:44px; padding:8px 10px; margin-bottom:4px; }
#profileBtn .profile-ava { width:30px; height:30px; border-width:1px; }
#profileBtn .profile-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:1200px) and (min-width:901px) { .rail-bottom #profileBtn { padding:8px 6px; font-size:13px; } }
@media (max-width:900px) {
  .rail-bottom #profileBtn { width:auto; min-width:44px; min-height:44px; padding:7px; margin:0; justify-content:center; border-radius:8px; }
  #profileBtn .profile-label { display:none; }
}

/* ---- Okno Kdo hraje? ---- */
.profile-dialog { width:min(94vw,520px); }
.profile-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.profile-head h2 { margin:0; font-size:20px; }
.profile-close { min-width:44px; min-height:44px; padding:0; font-size:18px; }
.profile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-bottom:12px; }
.profile-card { position:relative; display:flex; border:2px solid var(--line); border-radius:12px; background:var(--ui-fill,var(--canvas)); min-width:0; }
.profile-card.active { border-color:var(--accent); background:var(--ui-selected,#35442b); }
.profile-pick,.profile-add { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; min-height:132px; padding:14px 8px 12px; border:0; background:transparent; color:var(--ink); font:inherit; cursor:pointer; border-radius:10px; text-align:center; }
.profile-add { border:2px dashed var(--line); background:transparent; }
.profile-pick:hover,.profile-add:hover { background:var(--ui-hover,#30392c); }
.profile-pick .profile-ava,.profile-add .profile-ava { width:64px; height:64px; }
.profile-pick strong,.profile-add strong { font-size:15px; max-width:100%; overflow-wrap:anywhere; }
.profile-pick small,.profile-add small { color:var(--muted); font-size:12px; }
.profile-edit { position:absolute; top:4px; right:4px; min-width:44px; min-height:44px; padding:0; display:flex; align-items:center; justify-content:center; }
.profile-edit .ui-icon { width:18px; height:18px; }
.profile-form .profile-name { display:flex; flex-direction:column; gap:6px; font-weight:600; margin-bottom:12px; }
.profile-form .profile-name input { min-height:44px; font-size:16px; padding:8px 12px; border-radius:8px; border:1px solid var(--line); background:var(--ui-fill,var(--canvas)); color:var(--ink); }
.profile-avatars { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px; border:0; padding:0; margin:0 0 10px; }
.profile-avatars legend { font-weight:600; margin-bottom:8px; padding:0; }
.profile-avatar-choice { display:flex; justify-content:center; padding:4px; border-radius:50%; cursor:pointer; }
.profile-avatar-choice input { position:absolute; opacity:0; width:1px; height:1px; }
.profile-avatar-choice .profile-ava { width:56px; height:56px; }
.profile-avatar-choice:has(input:checked) .profile-ava { border:3px solid var(--accent); box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent); }
.profile-avatar-choice:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.profile-error { color:#ff9d7a; min-height:0; margin:4px 0; font-size:14px; }
.profile-error:empty { display:none; }
.profile-actions { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; }
.profile-actions .btn { min-height:44px; }
.profile-actions .danger { margin-left:auto; color:#ffb4a0; }
.profile-dialog .hint { margin-top:4px; }
@media (max-width:420px) { .profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .profile-pick .profile-ava,.profile-add .profile-ava { width:56px; height:56px; } }

/* ---- Domů: kdo hraje (jen s víc hráči) ---- */
.home-who { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 2px; }
.home-who-btn { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:4px 14px 4px 4px; border:2px solid var(--line); border-radius:24px; background:var(--surface); color:var(--ink); font:inherit; font-size:14px; font-weight:600; cursor:pointer; max-width:100%; }
.home-who-btn .profile-ava { width:34px; height:34px; border-width:1px; }
.home-who-btn span:not(.profile-ava) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-who-btn[aria-pressed="true"] { border-color:var(--accent); background:var(--ui-selected,#35442b); }
.home-who-btn:hover { border-color:var(--accent); }

/* ---- Nastavení · Hráči ---- */
.settings-player { display:flex; align-items:center; gap:12px; margin:6px 0 10px; }
.settings-player strong { display:block; font-size:15px; }
.settings-player small { color:var(--muted); font-size:13px; }
#settingsPlayers > .btn { min-height:44px; }

/* ---- Lišta hráče: obrázek hráče jako u soupeře ---- */
.pb-ava-me { overflow:hidden; padding:0; background:var(--ui-fill,var(--canvas)); }
.pb-ava-me img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.pb-player { display:inline-flex; align-items:center; min-width:0; }

/* ---- Okno síly ---- */
.strength-parts { margin:4px 0 8px; padding-left:18px; text-align:left; font-size:14px; line-height:1.6; }
#ratingProgressBtn { min-height:44px; margin:4px 0 12px; }

/* ---- Moje partie: odkaz na Přehled ---- */
.library-progress { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:0 0 14px; }
.library-progress[hidden] { display:none; }
.library-progress .ui-icon { width:20px; height:20px; }

/* ---- Přehled pokroku ---- */
.progress-who { display:flex; align-items:center; gap:10px; margin:14px 0 4px; color:var(--muted); font-size:14px; }
.progress-who strong { color:var(--ink); }
.progress-lead { font-size:19px; font-weight:700; margin:8px 0 16px; line-height:1.4; }
.progress-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; margin-bottom:20px; }
.progress-card { border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:18px 20px; min-width:0; }
.progress-card h2 { font-size:17px; margin:0 0 8px; display:flex; align-items:center; gap:8px; }
.progress-card h3 { font-size:14px; margin:14px 0 6px; color:var(--muted); }
.progress-chart-card,.progress-empty { grid-column:1 / -1; }
.progress-empty { text-align:center; }
.progress-empty .empty-konik { width:96px; height:96px; }
.progress-empty .btn { min-height:44px; margin-top:8px; }
.pg-big { font-size:40px; font-weight:700; margin:2px 0 6px; line-height:1.1; }
.pg-parts { margin:0 0 8px; padding-left:18px; font-size:14px; line-height:1.7; }
.pg-legend { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin:0 0 6px; font-size:13px; color:var(--muted); }
.pg-legend > span { display:inline-flex; align-items:center; gap:6px; }
.pg-key { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--accent); border:2px solid var(--accent); }
.pg-key.coach { background:var(--surface); }
.pg-chart { position:relative; width:100%; min-height:190px; }
.pg-svg { display:block; max-width:100%; height:auto; cursor:pointer; touch-action:pan-y; }
.pg-grid { stroke:var(--line); stroke-width:1; }
.pg-tick { fill:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.pg-end { fill:var(--ink); font-size:13px; font-weight:700; }
.pg-line { fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.pg-dot { fill:var(--accent); stroke:var(--surface); stroke-width:2; }
.pg-dot.coach { fill:var(--surface); stroke:var(--accent); stroke-width:2.5; }
.pg-cross { stroke:var(--muted); stroke-width:1; }
.pg-tip { position:absolute; top:-6px; max-width:100%; padding:6px 10px; border-radius:8px; background:var(--ui-fill,var(--canvas)); border:1px solid var(--line); color:var(--ink); font-size:13px; line-height:1.4; pointer-events:none; box-shadow:0 6px 20px #0006; }
.pg-data { margin-top:8px; }
.pg-data summary { cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--muted); }
.pg-table { width:100%; border-collapse:collapse; font-size:14px; margin:4px 0 10px; }
.pg-table caption { text-align:left; color:var(--muted); font-size:13px; padding:4px 0; }
.pg-table th,.pg-table td { text-align:left; padding:7px 6px; border-top:1px solid var(--line); font-weight:normal; font-variant-numeric:tabular-nums; }
.pg-table thead th { color:var(--muted); font-size:12px; border-top:0; }
.pg-table th small { color:var(--muted); font-size:12px; }
.pg-open { min-height:44px; padding:0 4px; border:0; background:transparent; color:var(--ink); font:inherit; text-decoration:underline; cursor:pointer; text-align:left; }
.pg-bars { display:grid; gap:8px; margin:8px 0; }
.pg-bar-row { display:grid; grid-template-columns:minmax(0,9.5em) minmax(0,1fr) 3.5em; align-items:center; gap:10px; font-size:14px; }
.pg-bar-label { min-width:0; overflow-wrap:anywhere; }
.pg-sym { display:inline-block; min-width:2.2em; font-weight:800; color:var(--muted); }
.pg-bar-track { height:12px; }
.pg-bar { display:block; height:12px; background:var(--accent); border-radius:0 4px 4px 0; }
.pg-bar-value { text-align:right; font-variant-numeric:tabular-nums; }
.pg-note { font-size:14px; line-height:1.6; margin:6px 0; }
.progress-card > .btn { min-height:44px; margin-top:6px; }
.progress-card .btn .ui-emblem { width:28px; height:28px; margin:-6px 4px -6px -4px; }
.progress-duel { grid-column:1 / -1; }
.pg-duel-icon { width:32px; height:32px; }
.pg-duel-table th:last-child { text-align:right; }
.pg-duel-table th:last-child .pg-duel-who { flex-direction:row-reverse; }
.pg-duel-who { display:inline-flex; align-items:center; gap:8px; }
.pg-duel-who .profile-ava { width:32px; height:32px; border-width:1px; }
.pg-duel-score { text-align:center !important; font-size:18px; font-weight:700; white-space:nowrap; }
.pg-duel-list { margin:0 0 10px; padding-left:18px; font-size:14px; line-height:1.7; }
.pg-duel-list li span { color:var(--muted); }
/* Síň slávy a bilance u soupeře (#25) */
.progress-hall { grid-column:1 / -1; scroll-margin-top:calc(var(--top-h,0px) + 12px); }   /* na telefonu pod horní lištou */
.hall-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:10px; list-style:none; margin:8px auto 6px; padding:0; max-width:560px; }
.hall-step { display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; min-width:0; }
.hall-step.s1 { order:2; } .hall-step.s2 { order:1; } .hall-step.s3 { order:3; }
.hall-what { display:flex; align-items:flex-end; justify-content:center; min-height:2.6em; font-size:12px; line-height:1.3; color:var(--muted); }
.hall-step strong { font-size:14px; line-height:1.25; overflow-wrap:break-word; hyphens:auto; max-width:100%; }
.hall-step small { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.hall-face { width:48px; height:48px; flex:none; display:grid; place-items:center; font-size:28px; border-radius:12px; overflow:hidden; }
.hall-step.s1 .hall-face { width:60px; height:60px; border-radius:15px; }
.hall-block { align-self:stretch; display:grid; place-items:center; margin-top:4px; border:1px solid var(--line); border-bottom:0; border-radius:8px 8px 0 0; font-size:18px; font-weight:800; color:var(--ink); }
.s1 .hall-block { height:64px; background:#e6b42259; } .s2 .hall-block { height:46px; background:#b8c0cc59; } .s3 .hall-block { height:32px; background:#c98a4b59; }
.hall-list { list-style:none; margin:0 0 8px; padding:0; }
.hall-list li { display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--line); }
.hall-list .hall-face { width:40px; height:40px; font-size:24px; border-radius:10px; }
.hall-name { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.hall-name strong { font-size:14px; overflow-wrap:anywhere; }
.hall-name small { font-size:12px; color:var(--muted); }
.hall-name small span { white-space:nowrap; }
.hall-score { flex:none; display:flex; flex-direction:column; align-items:flex-end; text-align:right; font-variant-numeric:tabular-nums; }
.hall-score b { font-size:18px; white-space:nowrap; }
.hall-score small { font-size:12px; color:var(--muted); white-space:nowrap; }
.progress-hall > .hint { margin:6px 0 0; }
.progress-hall h2:focus { outline:none; }   /* fokus jen pro čtečku po přechodu z okna soupeřů */
@media (max-width:380px) { .hall-podium { gap:6px; } .hall-step strong { font-size:13px; } }
.bot-card .bc-score { font-weight:700; font-variant-numeric:tabular-nums; }
.setup-score { white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (max-width:900px) {
  .progress-grid { grid-template-columns:minmax(0,1fr); }
  .progress-card { padding:16px; }
  .progress-lead { font-size:17px; }
  .pg-bar-row { grid-template-columns:minmax(0,8em) minmax(0,1fr) 3.2em; gap:8px; }
}

/* ---- Nová partie: Domácí souboj ---- */
.setup-duel { margin:6px 0 4px; }
.setup-duel .setup-label { display:flex; align-items:center; gap:8px; }
.setup-duel-icon { width:28px; height:28px; }
.setup-duel-side { display:grid; grid-template-columns:5em minmax(0,1fr); align-items:center; gap:4px 8px; }
.setup-duel-side .choice-row { margin:6px 0; }
.setup-duel-color { font-weight:600; font-size:14px; }
.setup-duel .choice .profile-ava { width:28px; height:28px; border-width:1px; margin:-4px 0; }
@media (max-width:420px) { .setup-duel-side { grid-template-columns:minmax(0,1fr); } }

/* ---- Moje partie: partie dvou hráčů v souboji ---- */
.game-duel,.game-duel-add { display:flex; align-items:center; gap:8px; font-size:13px; }
.game-duel { color:var(--muted); margin:8px 0 0; }
.game-duel .ui-art,.game-duel-add .ui-art { width:24px; height:24px; }
.game-duel-add { min-height:44px; margin-top:8px; }
.profile-duel-side { border:0; padding:0; margin:6px 0; }
.profile-duel-side legend { font-weight:600; padding:0; }
.profile-duel-side .choice .profile-ava { width:28px; height:28px; border-width:1px; margin:-4px 0; }
.profile-duel-side .choice input { accent-color:var(--accent); width:18px; height:18px; margin:0; }