/* Sbírka (chess-collection.js): stránka, detail věci, odměny na konci partie, dlaždice a štítek na Domů. Proměnné prostředí z chess-workspace.css. */

.col-key,.col-lock { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; }
.col-bar { display:block; height:7px; border-radius:999px; background:var(--ui-control,#ffffff1a); overflow:hidden; margin:6px 0 4px; }
.col-bar i { display:block; height:100%; background:var(--accent); border-radius:inherit; }
@media (prefers-reduced-motion:no-preference) { .col-bar i { transition:width .6s ease; } }

/* ---- Náhled: deska celá, figurky na dvou polích jako v Nastavení ---- */
.col-prev { position:relative; display:block; flex:none; width:64px; height:64px; overflow:hidden; border-radius:8px; border:1px solid var(--ui-border,var(--line)); background:var(--ui-control); }
.col-prev img { position:relative; display:block; width:100%; height:100%; }
.col-prev .look-sq.light { background:var(--light,#ebecd0); }
.col-prev .look-sq.dark { background:var(--dark,#779556); }
.col-prev-big { width:min(60vw,200px); height:min(60vw,200px); margin:4px auto 10px; border-radius:12px; }

/* ---- Horní část: hodnost a klíčky, výzva týdne ---- */
.col-top { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin:12px 0 14px; }
.col-card-box { border:1px solid var(--ui-border,var(--line)); border-radius:12px; background:var(--surface); padding:14px 16px; }
.col-card-box h2 { margin:2px 0 8px; font-size:18px; line-height:1.25; }
.col-card-box p { margin:4px 0; color:var(--muted); font-size:14px; line-height:1.45; }
.col-card-box .btn { min-height:44px; margin-top:6px; }
.col-rank { display:flex; align-items:center; gap:12px; }
.col-rank-text { flex:1; min-width:0; }
.col-rank strong { font-size:19px; }
.col-rank small { color:var(--muted); font-size:13px; }
.col-glyph { flex:none; display:inline-flex; width:56px; height:56px; }
.col-glyph .ui-rank,.col-glyph-toast .ui-rank { width:100%; height:100%; }
.ui-rank.col-rank-mini { width:24px; height:24px; flex:none; margin:-4px 0; }
.col-keys { display:flex; align-items:center; gap:8px; margin-top:10px!important; color:var(--ink)!important; }
.col-keys .col-key { color:var(--accent); width:22px; height:22px; }
.col-count { font-size:13px!important; }
.col-done { color:var(--ink)!important; font-weight:700; }
.col-weekly h2 { font-size:17px; }

/* ---- Skoro hotové ---- */
.col-near { margin-bottom:14px; }
.col-near-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.col-near-item { display:flex; align-items:center; gap:12px; min-height:44px; padding:8px; border:1px solid var(--ui-border,var(--line)); border-radius:10px; background:var(--ui-control); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.col-near-item > span:last-child { flex:1; min-width:0; display:flex; flex-direction:column; }
.col-near-item small { color:var(--muted); font-size:12.5px; line-height:1.35; }
.col-near-item:hover { border-color:var(--accent); }

/* ---- Mřížka věcí: 2 sloupce na telefonu ---- */
.hub-page .col-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; max-width:420px; margin:4px 0 14px; padding:3px; background:var(--ui-fill,#1d2419); border:1px solid var(--line); border-radius:10px; }
.hub-page .col-tabs .ui-button { min-height:44px; padding:4px 2px; border:0; border-radius:7px; background:transparent; color:var(--ui-soft-text,var(--muted)); font-size:14px; box-shadow:none; }
.hub-page .col-tabs .ui-button[aria-selected="true"],.hub-page .col-tabs .ui-button[aria-selected="true"]:hover:enabled { background:var(--accent); color:var(--ui-onaccent,#172016); font-weight:700; }
.col-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.col-item { position:relative; display:flex; flex-direction:column; align-items:stretch; gap:3px; min-width:0; padding:8px 8px 10px; border:1px solid var(--ui-border,var(--line)); border-radius:12px;
  background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.col-item .col-prev { width:100%; height:auto; aspect-ratio:1; margin-bottom:4px; }
.col-item strong { font-size:14px; line-height:1.25; overflow-wrap:anywhere; }
.col-item small { color:var(--muted); font-size:12px; line-height:1.35; }
.col-item .col-need { color:var(--ink); opacity:.85; }
.col-item:hover { border-color:var(--accent); }
.col-item.current { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.col-prev .col-lock { position:absolute; top:50%; left:50%; width:26px; height:26px; margin:-13px 0 0 -13px; color:#fff; filter:drop-shadow(0 1px 2px #000a); }
.col-prev-big .col-lock { width:40px; height:40px; margin:-20px 0 0 -20px; }
.col-prev:has(.col-lock) img { filter:saturate(.75) brightness(.6); }
.col-item.trophy { border-style:dashed; }
.col-item.fresh::after { content:''; position:absolute; top:6px; left:6px; width:11px; height:11px; border-radius:50%; background:#e0101e; box-shadow:0 0 0 2px var(--surface); }
@media (max-width:420px) { .col-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .col-item { padding:6px 6px 8px; } }

.col-rules { margin:16px 0 8px; color:var(--muted); font-size:14px; line-height:1.5; }
.col-rules summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--ink); font-weight:700; }
.col-rules ul { margin:4px 0 10px; padding-left:20px; }
.col-all { display:flex; align-items:center; gap:10px; min-height:44px; color:var(--ink); }
.col-all input { width:20px; height:20px; accent-color:var(--accent); }

/* ---- Detail věci ---- */
.collection-dialog { width:min(94vw,440px); }
.col-detail-state { text-align:center; color:var(--muted); margin:0 0 10px; }
.col-need-big { font-size:16px; font-weight:700; margin:6px 0 2px; }
.collection-dialog .col-n { color:var(--muted); margin:0 0 10px; font-size:13px; }
.collection-dialog .ui-actions { display:flex; flex-wrap:wrap; gap:8px; }
.collection-dialog .ui-actions .btn { flex:1 1 auto; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.collection-dialog .hint { font-size:13px; }

/* ---- Konec partie: krátce v kartě nad deskou, celý souhrn v kartě výsledku ---- */
.end-rewards,.rc-rewards:not(:empty) { border:1px solid var(--ui-border,var(--line)); border-radius:10px; padding:8px 10px; background:var(--ui-control); }
.end-rewards[hidden],.rc-rewards[hidden],.rc-rewards:empty { display:none; }
.rc-rewards { margin:10px 0; }
.er-head { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.er-xp { font-size:17px; color:var(--accent); }
.er-rank,.er-keys { display:inline-flex; align-items:center; gap:4px; font-size:14px; color:var(--ink); }
.er-open { margin-left:auto!important; min-height:44px; padding-inline:12px; }
.end-rewards .col-bar,.rc-rewards .col-bar { margin:4px 0; }
.er-up { margin:4px 0!important; color:var(--ink)!important; font-size:14px!important; font-weight:700; }
.er-lines { list-style:none; margin:4px 0; padding:0; font-size:13px; color:var(--muted); }
.er-lines li { display:flex; justify-content:space-between; gap:10px; padding:2px 0; }
.er-lines b { color:var(--ink); }
.er-new { display:flex; align-items:center; gap:10px; margin-top:6px; }
.er-new .col-prev { width:44px; height:44px; }
.er-new > span:nth-child(2) { flex:1; min-width:0; display:flex; flex-direction:column; }
.er-new small { color:var(--muted); font-size:12px; }
.er-new .btn { min-height:44px; }
.er-near { margin:8px 0 0!important; font-size:13px!important; color:var(--muted)!important; }
.er-near .btn { min-height:44px; padding:4px 8px; margin:0; font-weight:700; color:var(--ink); }
@media (prefers-reduced-motion:no-preference) {
  .er-new,.er-up { animation:colPop .5s cubic-bezier(.2,1.4,.4,1) both; }
  .er-new:nth-of-type(2) { animation-delay:.12s; } .er-new:nth-of-type(3) { animation-delay:.24s; }
}
@keyframes colPop { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:none; } }
/* Znak hodnosti u jména v liště hráče jen na počítači, na telefonu je lišta na jednom řádku bez místa navíc. */
.pb-rank { display:none; }
@media (min-width:901px) { .pb-rank { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; margin-left:4px; border-radius:50%; font-size:13px; line-height:1; color:var(--surface); background:var(--accent); flex:none; } }

/* ---- Domů ---- */
#homeBadges { display:flex; align-items:center; gap:8px; }
.col-chip { display:inline-flex; align-items:center; gap:6px; min-height:44px; white-space:nowrap; }
.col-chip-keys { display:inline-flex; align-items:center; gap:3px; color:var(--accent); }
@media (max-width:899px) { #homeBadges .col-chip { display:none; } }
.home-tile > .col-glyph { grid-row:1 / span 2; width:64px; height:64px; margin:-2px 0; }

/* ---- Oznámení ---- */
.toast .col-toast { width:36px; height:36px; }
.col-glyph-toast { display:inline-flex; width:40px; height:40px; }
.collection-welcome .col-glyph-toast { width:56px; height:56px; }
.collection-welcome { animation:divineIn .45s cubic-bezier(.2,1.4,.4,1); border-color:var(--accent); box-shadow:0 12px 30px #0007; }
@media (prefers-reduced-motion:reduce) { .collection-welcome { animation:none; } }

/* ---- Nastavení: odkaz do Sbírky u vzhledu ---- */
.look-collection { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; margin:4px 0 8px; justify-content:flex-start; }
.ui-rank { width:40px; height:40px; }