/* DraftForge — reusable UI components */

.tip-banner {
  background:
    radial-gradient(ellipse at top, rgba(212, 162, 76, 0.22), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(41, 211, 197, 0.06), transparent 50%),
    linear-gradient(180deg, rgba(22, 34, 54, 0.78), rgba(14, 26, 46, 0.78));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  position: relative;
  margin-bottom: 32px;
  text-align: center;
  min-height: 260px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tip-banner::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 40%;
  height: 60%;
  background: radial-gradient(circle, rgba(212, 162, 76, 0.10), transparent 60%);
  pointer-events: none;
}
.tip-banner__icon {
  font-size: 2.6rem;
  margin-bottom: 20px;
  opacity: 0.95;
  filter: drop-shadow(0 0 18px rgba(212, 162, 76, 0.45));
}
.tip-banner__text {
  color: var(--gold-2);
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.005em;
  min-height: 1.5em;
  animation: tip-fade 0.5s ease;
  max-width: 980px;
  margin: 0 auto;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.tip-banner__author {
  color: var(--gold-1);
  font-size: 1.05rem;
  margin-top: 20px;
  letter-spacing: 0.04em;
  opacity: 0.9;
  font-weight: 500;
}

/* Akční tlačítka v pravém horním rohu banneru — přidat / seznam tipů. */
.tip-banner__actions {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  z-index: 4;
}
.tip-banner__action {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(10, 22, 38, 0.65);
  border: 1px solid var(--gold-line);
  color: var(--gold-1);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0;
  font-family: var(--font-body);
  text-transform: none;
  box-shadow: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s;
}
.tip-banner__action:hover:not(:disabled) {
  background: var(--gold-soft);
  color: var(--gold-2);
  border-color: var(--gold-1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.tip-banner__action:active { transform: translateY(0); }
/* Klikatelný banner: hover lift + cursor pointer + jemný outline. */
.tip-banner.is-clickable {
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.tip-banner.is-clickable:hover {
  border-color: rgba(212, 162, 76, 0.55);
  box-shadow:
    var(--shadow-card),
    0 0 28px rgba(212, 162, 76, 0.16);
  transform: translateY(-1px);
}

/* Pause indikátor — viditelný jen při hoveru (CSS hover). */
.tip-banner__pause-hint {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-1);
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
  font-weight: 600;
}
.tip-banner.is-paused .tip-banner__pause-hint {
  opacity: 0.85;
}

/* Progress bar — animuje se tip-progress @keyframes shadnoucí ke 100%
   během ROTATE_MS. Pause přes animation-play-state. */
.tip-banner__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(212, 162, 76, 0.08);
  pointer-events: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}
.tip-banner__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-1), rgba(41, 211, 197, 0.7));
  box-shadow: 0 0 12px rgba(212, 162, 76, 0.55);
  transform-origin: left center;
  /* animation-name: tip-progress (set via JS na render); paused via JS too */
}
@keyframes tip-progress {
  from { width: 0%; }
  to   { width: 100%; }
}
/* Pause: animation paused via inline style. Add visual cue: stop-glow shimmer. */
.tip-banner.is-paused .tip-banner__progress-fill {
  filter: saturate(0.5) brightness(0.7);
}

/* Empty state — also prominent so users know it's the focal point. */
.tip-banner.is-empty {
  min-height: 220px;
}
.tip-banner.is-empty .tip-banner__text {
  font-size: 1.6rem;
  color: var(--text-secondary);
  font-weight: 400;
}

@media (max-width: 900px) {
  .tip-banner { padding: 56px 24px 44px; min-height: 200px; }
  .tip-banner__text { font-size: 1.6rem; }
  .tip-banner__icon { font-size: 2rem; margin-bottom: 14px; }
  .tip-banner__author { font-size: 0.92rem; margin-top: 14px; }
  .tip-banner__actions { top: 10px; right: 10px; }
  .tip-banner__action { width: 34px; height: 34px; min-height: 34px; font-size: 1rem; }
  .tip-banner__pause-hint { top: 12px; left: 14px; font-size: 0.65rem; }
}

@keyframes tip-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Champion Tags page (#/tags) ====================================== */

.champ-tags__header {
  margin-bottom: 18px;
}
.champ-tags__header h1 {
  font-size: 1.7rem;
  margin: 0 0 6px 0;
  background: linear-gradient(180deg, var(--gold-2) 30%, var(--gold-1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.02em;
}
.champ-tags__sub {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 880px;
}
.champ-tags__sub em {
  color: var(--gold-1);
  font-style: normal;
  font-weight: 600;
}

.champ-tags__toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 80px;
  z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.champ-tags__chips {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(10, 22, 38, 0.55);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  flex-wrap: wrap;
}
.champ-tags__chip {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  min-height: 0;
  box-shadow: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.champ-tags__chip:hover:not(.is-active) {
  color: var(--gold-2);
  background: var(--gold-soft);
  box-shadow: none;
}
.champ-tags__chip.is-active {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color: #1A1306;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(212, 162, 76, 0.35);
}

/* Layout: 2 sloupce — grid s tile-ikonami vlevo, detail vpravo.
   Grid column je široký ~540 px (= ~8 tiles per row × 62 px). Sticky na top
   aby zůstal viditelný při scrollu detailu. */
.champ-tags__layout {
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.champ-tags__grid-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 168px;
}
.champ-tags__grid-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 4px;
}
.champ-tags__grid-host {
  background: var(--bg-card);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-card);
}

/* Override default .champion-grid pro tag-browser context — větší max-height
   aby se vešlo víc tiles bez nutnosti scrollu (na desktopu).
   Selected tile má výraznější gold glow než výchozí champion-tile.is-selected. */
.champ-tags__grid-host .champion-grid {
  max-height: calc(100vh - 240px);
  min-height: 360px;
  grid-template-columns: repeat(auto-fill, 56px);
  justify-content: start;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
}
.champ-tags__grid-host .champion-grid::-webkit-scrollbar { width: 10px; }
.champ-tags__grid-host .champion-grid::-webkit-scrollbar-thumb {
  background: var(--gold-line);
  border-radius: 5px;
  border: 2px solid var(--bg-card-solid);
}
.champ-tags__grid-host .champion-grid::-webkit-scrollbar-thumb:hover { background: var(--gold-3); }
.champ-tags__grid-host .champion-tile.is-selected {
  border-color: var(--gold-1);
  box-shadow:
    0 0 0 2px var(--gold-1) inset,
    0 0 18px rgba(212, 162, 76, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.4);
  transform: scale(1.04);
}
.champ-tags__grid-host .champion-tile.is-selected img {
  filter: none;
}

/* Search bar v toolbaru — zúžíme aby nezabíral celou šířku. */
.champ-tags__search {
  flex: 1;
  min-width: 220px;
  max-width: 360px;
  margin-bottom: 0;
}

/* Detail */
.champ-tags__detail-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.champ-tags__detail {
  background: var(--bg-card);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.champ-tags__detail-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gold-line);
}
.champ-tags__detail-icon {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  border: 2px solid var(--gold-1);
  box-shadow: 0 0 0 1px rgba(212, 162, 76, 0.3), 0 8px 22px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.champ-tags__detail-title h2 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--gold-2);
}
.champ-tags__detail-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
  flex-wrap: wrap;
}
.champ-tags__detail-id {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.champ-tags__detail-class {
  font-size: 0.78rem;
  color: var(--gold-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 10px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
}

/* Dimensions grid: 2 columns na desktopu, 1 na tabletu/mobilu */
.champ-tags__dims {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
}
.champ-tags__dim,
.champ-tags__extras {
  padding: 12px 14px;
  background: rgba(10, 22, 38, 0.5);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.18s;
}
.champ-tags__dim:hover,
.champ-tags__extras:hover {
  border-color: rgba(212, 162, 76, 0.4);
}
.champ-tags__extras {
  grid-column: 1 / -1;
}
.champ-tags__dim-key {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.champ-tags__dim-label {
  font-size: 0.74rem;
  color: var(--gold-1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.champ-tags__dim-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
}
.champ-tags__dim-value {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.champ-tags__dim-value-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  flex: 1;
  min-width: 140px;
}
.champ-tags__extras-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Pill — barevný tag s glowem v identitě dimenze */
.champ-tags__pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(7, 16, 28, 0.7);
  border: 1.5px solid currentColor;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 0 12px color-mix(in srgb, var(--pill-color, currentColor) 18%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--pill-color, currentColor) 50%, transparent);
}
.champ-tags__pill.is-unknown {
  color: var(--text-muted);
  border-color: var(--text-muted);
  box-shadow: none;
  text-shadow: none;
}

/* Legenda — collapsable <details> element. */
.champ-tags__legend {
  background: var(--bg-card);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.champ-tags__legend-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--gold-2);
  transition: background 0.15s;
}
.champ-tags__legend-summary::-webkit-details-marker { display: none; }
.champ-tags__legend-summary:hover {
  background: rgba(212, 162, 76, 0.05);
}
.champ-tags__legend-summary::after {
  content: '▸';
  margin-left: auto;
  color: var(--gold-1);
  transition: transform 0.18s;
}
.champ-tags__legend[open] .champ-tags__legend-summary::after {
  transform: rotate(90deg);
}
.champ-tags__legend-icon {
  font-size: 1.1rem;
}
.champ-tags__legend-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0;
}
.champ-tags__legend[open] .champ-tags__legend-hint { display: none; }

.champ-tags__legend-body {
  padding: 6px 18px 22px;
  border-top: 1px solid var(--gold-line);
}
.champ-tags__legend-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(212, 162, 76, 0.16);
}
.champ-tags__legend-section:first-child {
  margin-top: 16px;
  padding-top: 0;
  border-top: none;
}
.champ-tags__legend-title {
  font-size: 0.92rem;
  color: var(--gold-2);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.champ-tags__legend-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-style: italic;
}
.champ-tags__legend-pills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.champ-tags__legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}
.champ-tags__legend-pill-desc {
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
}

/* Responsive */
@media (max-width: 1300px) {
  .champ-tags__layout {
    grid-template-columns: 440px minmax(0, 1fr);
  }
}
@media (max-width: 1100px) {
  .champ-tags__layout {
    grid-template-columns: 380px minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .champ-tags__toolbar {
    position: static;
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .champ-tags__search { max-width: none; }
  .champ-tags__layout {
    grid-template-columns: 1fr;
  }
  .champ-tags__grid-col {
    position: static;
  }
  .champ-tags__grid-host .champion-grid {
    max-height: 320px;
    min-height: 0;
  }
  .champ-tags__dims {
    grid-template-columns: 1fr;
  }
  .champ-tags__detail {
    padding: 16px;
  }
  .champ-tags__detail-icon {
    width: 64px;
    height: 64px;
  }
  .champ-tags__detail-title h2 { font-size: 1.3rem; }
}

/* Tip-manager modal sekce (přidat / seznam) — sdílené utility pro hlavičku
   a counter. Třídy mají historický prefix `sidebar-panel__*` (původně z
   bočního panelu, který už neexistuje); ponecháno kvůli kompatibilitě. */
.sidebar-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.sidebar-panel__header h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.04em;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--gold-2);
}
.sidebar-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  font-size: 0.95rem;
}
.sidebar-panel__count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(10, 22, 38, 0.6);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
}

.tip-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tip-form textarea {
  min-height: 80px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.tip-form input { font-size: 0.85rem; }
.tip-form .char-counter {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: -6px;
}
.tip-form button { width: 100%; }

.tip-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.tip-list::-webkit-scrollbar { width: 8px; }
.tip-list::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 4px; }
.tip-item {
  background: rgba(7, 16, 28, 0.45);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  padding: 14px 14px 14px 16px;
  position: relative;
  font-size: 0.86rem;
  color: var(--text-primary);
  line-height: 1.5;
  transition: border-color 0.18s, background 0.18s;
}
.tip-item:hover {
  border-color: rgba(212, 162, 76, 0.35);
  background: rgba(7, 16, 28, 0.6);
}
.tip-item::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  opacity: 0.6;
}
.tip-item__author {
  color: var(--gold-1);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  font-weight: 500;
  opacity: 0.85;
}
.tip-item__delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 4px 8px;
  min-height: 0;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.18s, color 0.18s, background 0.18s;
  box-shadow: none;
}
.tip-item:hover .tip-item__delete { opacity: 1; }
.tip-item__delete:hover {
  color: var(--red-1);
  background: rgba(215, 65, 88, 0.12);
  box-shadow: none;
}
.tip-list__empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px 14px;
  border: 1px dashed var(--gold-line);
  border-radius: 12px;
  font-style: italic;
}

.player-card {
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s, background 0.18s;
  cursor: pointer;
  position: relative;
  min-width: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.player-card:hover {
  border-color: rgba(212, 162, 76, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.player-card.is-selected {
  border-color: var(--gold-1);
  box-shadow: 0 0 0 1px var(--gold-1) inset, 0 8px 22px rgba(212, 162, 76, 0.18);
  background:
    linear-gradient(135deg, rgba(212, 162, 76, 0.08), transparent 60%),
    var(--bg-card);
}
.player-card__role {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-3);
  border-radius: 50%;
  color: var(--gold-1);
}
.player-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  background: var(--bg-elevated);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.player-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.player-card__avatar--placeholder img {
  width: 56%;
  height: 56%;
  object-fit: contain;
  opacity: 0.7;
}
.player-card.is-selected .player-card__avatar {
  border-color: var(--gold-1);
  box-shadow: 0 0 0 2px rgba(212, 162, 76, 0.4), 0 4px 10px rgba(0, 0, 0, 0.4);
}
.player-card .role-icon {
  width: 16px;
  height: 16px;
}
.player-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.player-card__name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--gold-2);
  letter-spacing: 0.02em;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
  /* DŮLEŽITÉ: žádný overflow tady, jinak ellipsis sebere i early-mark. */
  min-width: 0;
}
.player-card__name-text {
  /* Vnitřní text — tady ellipsis. flex-1 → bere zbylou šířku, shrinkne se. */
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-card__early-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(41, 211, 197, 0.22);
  border: 1px solid var(--blue-3);
  color: var(--blue-3);
  flex-shrink: 0;
  letter-spacing: 0;
  text-shadow: 0 0 6px rgba(41, 211, 197, 0.6);
  box-shadow: 0 0 8px rgba(41, 211, 197, 0.45);
  animation: early-pulse 2.4s ease-in-out infinite;
}
@keyframes early-pulse {
  0%, 100% { box-shadow: 0 0 8px  rgba(41, 211, 197, 0.40); }
  50%      { box-shadow: 0 0 16px rgba(41, 211, 197, 0.85); }
}

/* Early picker — slightly more visible: stronger cyan tint, bigger glowing
   left-edge stripe, subtle cyan-fade background. */
.player-card.is-early-picker {
  border-color: rgba(41, 211, 197, 0.6);
  background:
    linear-gradient(90deg, rgba(41, 211, 197, 0.08), transparent 35%),
    var(--bg-card);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.3),
    0 0 22px rgba(41, 211, 197, 0.2);
}
.player-card.is-early-picker:hover {
  border-color: rgba(41, 211, 197, 0.9);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.4),
    0 0 28px rgba(41, 211, 197, 0.32);
}
.player-card.is-early-picker::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--blue-3), rgba(41, 211, 197, 0.4));
  box-shadow: 0 0 14px rgba(41, 211, 197, 0.7);
  pointer-events: none;
}
/* Selected + early picker: gold dominates the selection signal, cyan stripe
   stays visible on the left as a quiet "still an early picker" marker. */
.player-card.is-early-picker.is-selected {
  border-color: var(--gold-1);
  background:
    linear-gradient(90deg, rgba(41, 211, 197, 0.05), transparent 25%),
    linear-gradient(135deg, rgba(212, 162, 76, 0.12), transparent 60%),
    var(--bg-card);
  box-shadow:
    0 0 0 1px var(--gold-1) inset,
    0 0 0 3px rgba(212, 162, 76, 0.25),
    0 0 24px rgba(212, 162, 76, 0.3),
    0 8px 22px rgba(0, 0, 0, 0.4);
}
.player-card__role-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.player-card__role-line .role-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.player-card__role-label {
  color: var(--gold-1);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.player-card__pool {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(7, 16, 28, 0.5);
  border: 1px solid var(--gold-line);
  white-space: nowrap;
  flex-shrink: 0;
}
.player-card {
  /* Reserve room in the right padding for the absolute action button so it
     never overlaps the pool badge inside .player-card__body. */
  padding-right: 56px;
}
.player-card__actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
}

.role-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  padding: 4px;
  background: rgba(7, 16, 28, 0.4);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  width: fit-content;
}
.role-tab {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  box-shadow: none;
  text-transform: none;
}
.role-tab:hover { color: var(--gold-2); background: var(--gold-soft); box-shadow: none; }
.role-tab.is-active {
  color: var(--gold-2);
  background: linear-gradient(180deg, rgba(212, 162, 76, 0.18), rgba(212, 162, 76, 0.08));
  border: 1px solid var(--gold-line);
}
.role-tab.is-main::after {
  content: "★";
  color: var(--gold-1);
  font-size: 0.7rem;
  margin-left: 4px;
}

.champion-search-bar {
  position: relative;
  margin-bottom: 14px;
}
.champion-search-bar input { padding-left: 36px; }
.champion-search-bar::before {
  content: "🔍";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  pointer-events: none;
  opacity: 0.55;
}

.champion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 56px);
  grid-auto-rows: 56px;
  gap: 6px;
  /* 8 rows × 56px + 7 × 6px gap = 490px → no partial-row cutoff. */
  max-height: 490px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  justify-content: start;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  background: rgba(10, 22, 38, 0.35);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-1) transparent;
}
.champion-grid::-webkit-scrollbar { width: 10px; }
.champion-grid::-webkit-scrollbar-track { background: transparent; }
.champion-grid::-webkit-scrollbar-thumb {
  background: var(--gold-line);
  border-radius: 6px;
  border: 2px solid rgba(10, 22, 38, 0.6);
}
.champion-grid::-webkit-scrollbar-thumb:hover { background: var(--gold-1); }
.champion-tile {
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--bg-card-solid);
  transition: transform 0.14s, border-color 0.14s, box-shadow 0.14s;
  width: 56px;
  height: 56px;
}
.champion-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: filter 0.15s;
}
.champion-tile:not(.is-selected):not(.is-banned):not(.is-picked) img { filter: grayscale(70%) brightness(0.7); }
.champion-tile:hover { transform: scale(1.04); border-color: var(--gold-1); }
.champion-tile.is-selected {
  border-color: var(--gold-1);
  box-shadow: 0 0 0 1px var(--gold-1) inset, var(--glow-gold);
}
.champion-tile.is-selected img { filter: none; }
.champion-tile.is-banned {
  border-color: var(--red-1);
  position: relative;
}
.champion-tile.is-banned img { filter: grayscale(100%) brightness(0.4); }
.champion-tile.is-banned::after {
  content: "✖";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red-1);
  font-size: 1.5rem;
  font-weight: bold;
  pointer-events: none;
}
.champion-tile.is-picked { opacity: 0.5; pointer-events: none; }
.champion-tile.is-picked img { filter: grayscale(80%); }
.champion-tile__name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.6rem;
  padding: 1px 3px;
  background: linear-gradient(180deg, transparent, rgba(7, 16, 28, 0.92) 40%);
  color: var(--gold-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.champion-tile:hover .champion-tile__name { opacity: 1; }

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 12px;
  background: rgba(7, 16, 28, 0.4);
  border: 1px dashed var(--gold-line);
  border-radius: 12px;
  min-height: 56px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: rgba(38, 48, 68, 0.85);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--gold-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.chip img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.chip__name { white-space: nowrap; }
.chip:hover {
  border-color: var(--gold-1);
  color: var(--gold-2);
  background: rgba(212, 162, 76, 0.12);
}

/* Pool chip tags (Early / Comfort badges next to champion name). */
.chip__tags {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
}
.chip__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0;
  font-family: var(--font-display);
}
.chip__tag--comfort {
  background: rgba(212, 162, 76, 0.18);
  border: 1px solid var(--gold-1);
  color: var(--gold-2);
}
.chip--comfort { border-color: var(--gold-1); }

/* Pool entry editor modal — header + tag toggles. */
.pool-edit-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--gold-line);
  margin-bottom: 16px;
}
.pool-edit-header__avatar {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--gold-line);
  object-fit: cover;
}
.pool-edit-header__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--gold-2);
  letter-spacing: 0.02em;
}
.pool-edit-header__role {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.04em;
}

.pool-edit-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pool-tag-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(7, 16, 28, 0.45);
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  user-select: none;
}
.pool-tag-toggle:hover {
  background: rgba(7, 16, 28, 0.65);
  border-color: rgba(212, 162, 76, 0.4);
}
.pool-tag-toggle.is-active {
  background: rgba(212, 162, 76, 0.06);
}
.pool-tag-toggle--early.is-active {
  border-color: rgba(41, 211, 197, 0.55);
  background: rgba(41, 211, 197, 0.06);
}
.pool-tag-toggle--comfort.is-active {
  border-color: var(--gold-1);
  background: rgba(212, 162, 76, 0.08);
}
.pool-tag-toggle__copy { flex: 1; min-width: 0; }
.pool-tag-toggle__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold-2);
  letter-spacing: 0.02em;
}
.pool-tag-toggle__hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 4px;
}

/* Recommendation tile tag badges (Early / Comfort indicators). */
.rec-tile { position: relative; }
.rec-tile__badges {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 3px;
  pointer-events: none;
  z-index: 2;
}
.rec-tile__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-display);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.rec-tile__badge--comfort {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color: #1A1306;
  border: 1px solid var(--gold-1);
}
.rec-tile.is-comfort {
  border-color: var(--gold-1);
  box-shadow: 0 0 0 1px rgba(212, 162, 76, 0.35) inset, 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 720px) {
  .pool-edit-header__avatar { width: 48px; height: 48px; }
  .pool-edit-header__name { font-size: 1.05rem; }
  .pool-tag-toggle { padding: 12px 14px; gap: 12px; }
  .pool-tag-toggle__hint { font-size: 0.72rem; }
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.form-row label {
  font-size: 0.8rem;
  color: var(--gold-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.form-row .field-row {
  display: flex;
  gap: 8px;
}

.role-picker {
  display: flex;
  gap: 8px;
}
.role-picker__option {
  flex: 1;
  background: rgba(7, 16, 28, 0.5);
  border: 1px solid var(--gold-line);
  color: var(--text-secondary);
  padding: 12px 8px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  font-weight: 500;
  transition: all 0.18s;
}
.role-picker__option:hover {
  color: var(--gold-2);
  border-color: rgba(212, 162, 76, 0.35);
  background: rgba(7, 16, 28, 0.7);
}
.role-picker__option.is-active {
  background:
    linear-gradient(180deg, rgba(212, 162, 76, 0.22), rgba(212, 162, 76, 0.08));
  border-color: var(--gold-1);
  color: var(--gold-2);
  box-shadow: 0 0 0 1px rgba(212, 162, 76, 0.4) inset;
}
.role-picker__option svg, .role-picker__option img { color: inherit; width: 24px; height: 24px; }

.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.toggle-switch__track {
  width: 56px;
  height: 28px;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-3);
  border-radius: 16px;
  position: relative;
  transition: background 0.2s;
}
.toggle-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: var(--blue-1);
  border-radius: 50%;
  transition: left 0.2s, background 0.2s;
  box-shadow: var(--glow-blue);
}
.toggle-switch.is-red .toggle-switch__thumb {
  left: 30px;
  background: var(--red-1);
  box-shadow: var(--glow-red);
}
.toggle-switch.is-on .toggle-switch__thumb {
  left: 30px;
  background: var(--blue-3);
  box-shadow: var(--glow-blue);
}
.toggle-switch.is-on .toggle-switch__track {
  background: rgba(41, 211, 197, 0.16);
  border-color: var(--blue-3);
}
.toggle-switch__label {
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.tooltip {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--gold-1);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--text-primary);
  z-index: 200;
  pointer-events: none;
  max-width: 280px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.import-export {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.avatar-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.avatar-suggest__item {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--gold-3);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.avatar-suggest__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-suggest__item:hover { border-color: var(--gold-1); transform: scale(1.05); }
.avatar-suggest__item.is-active { border-color: var(--gold-1); box-shadow: var(--glow-gold); }

/* LCU Bridge status indicator (in navbar) -------------------------------- */

/* Status pill — výrazný badge. Velikost se škáluje s důležitostí stavu:
   offline = klidný, online = zelený se subtle pulse, live = zlatý a větší. */
.lcu-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(7, 16, 28, 0.6);
  border: 1.5px solid var(--gold-line);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  user-select: none;
  cursor: help;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.25s, transform 0.18s;
}
.lcu-status__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.lcu-status.is-offline { /* default — klidný stav */ }
.lcu-status.is-online {
  color: #4FE3A8;
  border-color: rgba(79, 227, 168, 0.55);
  background: rgba(79, 227, 168, 0.1);
  box-shadow: 0 0 16px rgba(79, 227, 168, 0.18);
}
.lcu-status.is-online .lcu-status__dot {
  background: #4FE3A8;
  box-shadow: 0 0 8px #4FE3A8, 0 0 16px rgba(79, 227, 168, 0.55);
  animation: lcu-pulse 2s ease-in-out infinite;
}
/* Champ select detected — zlatý, větší, "křičí" že je akce: */
.lcu-status.is-live {
  color: var(--gold-2);
  border-color: var(--gold-1);
  background: linear-gradient(180deg, var(--gold-soft), rgba(212, 162, 76, 0.15));
  font-size: 0.86rem;
  padding: 9px 18px;
  box-shadow:
    0 0 0 1px rgba(212, 162, 76, 0.3),
    0 0 22px rgba(212, 162, 76, 0.32);
  animation: lcu-status-attention 2.6s ease-in-out infinite;
}
.lcu-status.is-live .lcu-status__dot {
  background: var(--gold-1);
  width: 11px;
  height: 11px;
  box-shadow:
    0 0 10px var(--gold-1),
    0 0 22px rgba(212, 162, 76, 0.7);
  animation: lcu-pulse 1.2s ease-in-out infinite;
}
@keyframes lcu-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@keyframes lcu-status-attention {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(212, 162, 76, 0.3),
      0 0 18px rgba(212, 162, 76, 0.25);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(212, 162, 76, 0.55),
      0 0 32px rgba(212, 162, 76, 0.5);
  }
}

/* LCU Live Launcher button (in navbar, left of status indicator) ---------- */

/* Live Launcher — primární CTA. Zobrazuje se jen když je champ select
   detekovaný, takže si zaslouží prominent placement: větší, výraznější
   než status pill. */
.lcu-launcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: linear-gradient(180deg, #4FE3A8, #2BA876);
  color: #07101C;
  border: 1.5px solid rgba(79, 227, 168, 0.7);
  border-radius: 999px;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 0;
  flex-shrink: 0;
  box-shadow:
    0 0 0 1px rgba(79, 227, 168, 0.4),
    0 4px 16px rgba(79, 227, 168, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: lcu-launcher-pulse 2.2s ease-in-out infinite;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.lcu-launcher:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(79, 227, 168, 0.7),
    0 6px 22px rgba(79, 227, 168, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.lcu-launcher:active { transform: translateY(0); }
.lcu-launcher__icon { font-size: 1.1rem; }
@keyframes lcu-launcher-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(79, 227, 168, 0.4),
      0 4px 16px rgba(79, 227, 168, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(79, 227, 168, 0.6),
      0 6px 26px rgba(79, 227, 168, 0.7),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}
@media (max-width: 1100px) {
  .lcu-launcher { padding: 8px 16px; font-size: 0.78rem; }
}
@media (max-width: 900px) {
  .lcu-launcher { padding: 6px 12px; font-size: 0.72rem; }
  .lcu-launcher__label { display: none; } /* na mobilu jen ikonka */
}

/* Live mode topbar accent */
.draft-topbar.is-live {
  border-color: #4FE3A8;
  box-shadow: 0 0 0 1px rgba(79, 227, 168, 0.4), 0 0 18px rgba(79, 227, 168, 0.18);
}
.draft-topbar.is-live .draft-topbar__phase-label {
  color: #4FE3A8;
  text-shadow: 0 0 8px rgba(79, 227, 168, 0.4);
}
.btn-ghost.is-active-toggle {
  background: rgba(212, 65, 88, 0.18);
  border-color: var(--red-1);
  color: var(--red-1);
  box-shadow: 0 0 0 1px var(--red-1), 0 0 14px rgba(215, 65, 88, 0.4);
}
.btn-ghost.is-active-toggle:hover {
  background: rgba(212, 65, 88, 0.28);
}

@media (max-width: 900px) {
  .lcu-status { padding: 3px 7px; font-size: 0.65rem; }
  .lcu-status__label { display: none; } /* na mobilu jen tečka, ušetří místo */
}

/* Composition Needs Panel ------------------------------------------------- */

.comp-panel {
  padding: 28px 0 80px 0;
  position: sticky;
  top: 72px;
  align-self: start;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.comp-panel::-webkit-scrollbar { width: 8px; }
.comp-panel::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 4px; }

.comp-panel__inner {
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  padding: 18px 16px 20px;
  box-shadow: var(--shadow-card);
}
.comp-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gold-line);
}
.comp-panel__icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--gold-1);
  background: var(--gold-soft);
  border-radius: 50%;
}
.comp-panel__header h3 {
  margin: 0;
  color: var(--gold-2);
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.comp-panel__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.comp-panel__tiles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comp-tile {
  --tile-color: var(--gold-1);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(7, 16, 28, 0.6), rgba(7, 16, 28, 0.4));
  border: 1px solid var(--tile-color);
  position: relative;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.comp-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tile-color);
  opacity: 0.10;
  pointer-events: none;
}
.comp-tile.is-critical {
  box-shadow: 0 0 0 1px var(--tile-color), 0 0 18px color-mix(in srgb, var(--tile-color) 40%, transparent);
}
.comp-tile.is-critical::before { opacity: 0.20; }
.comp-tile.is-important::before { opacity: 0.14; }
.comp-tile__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--tile-color);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.5),
    0 0 10px var(--tile-color),
    0 0 18px color-mix(in srgb, var(--tile-color) 50%, transparent);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
/* Label and severity both render in the tile color so the user can immediately
   match a tile to its dot on a recommendation candidate. */
.comp-tile__label {
  flex: 1;
  font-weight: 700;
  color: var(--tile-color);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
  text-shadow: 0 0 6px color-mix(in srgb, var(--tile-color) 35%, transparent);
}
.comp-tile.is-critical .comp-tile__label {
  font-size: 1rem;
  text-shadow: 0 0 10px color-mix(in srgb, var(--tile-color) 60%, transparent);
}
.comp-tile__sev {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tile-color);
  opacity: 0.7;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.comp-tile.is-critical .comp-tile__sev {
  opacity: 1;
  text-shadow: 0 0 6px color-mix(in srgb, var(--tile-color) 60%, transparent);
}

.comp-panel__empty {
  text-align: center;
  color: var(--text-muted);
  padding: 24px 8px;
  font-size: 0.88rem;
}
.comp-panel__empty-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  opacity: 0.5;
}
.comp-panel__legend {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--gold-line);
}
.comp-panel__legend-title {
  color: var(--text-secondary);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-align: left;
}
.comp-panel__legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
  text-align: left;
}
.comp-panel__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.comp-panel__footer {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--gold-line);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}
.comp-panel__progress { letter-spacing: 0.04em; }

/* Mobile bottom-sheet variants for the composition panel — hidden on desktop. */
.comp-panel__close,
.comp-panel-fab,
.comp-panel-backdrop {
  display: none;
}

/* Composition-need dots on recommendation tiles --------------------------- */

/* Wrap around the icon so dots can be positioned without being clipped by
   .rec-tile__icon's overflow:hidden (which is needed for image rounding). */
.rec-tile__icon-col {
  position: relative;
  flex-shrink: 0;
  padding-bottom: 8px;  /* room for the dot pill that hangs below */
}
/* Pill-shaped container holds 1-N dots. Solid dark background + glow makes
   it readable against any champion portrait. */
.rec-tile__need-dots {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 11px;
  background: #07101C;
  border: 1px solid rgba(212, 162, 76, 0.55);
  box-shadow:
    0 0 0 2px rgba(7, 16, 28, 0.95),    /* dark halo to separate from champ image */
    0 2px 8px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
  z-index: 3;
}
.rec-tile__need-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--dot-color, var(--gold-1));
  /* Two-layer ring + glow: a tight white-ish core border + an outer color halo.
     The white inner ring keeps the dot recognisable on dark images, the halo
     bleeds the tile color so the user can pair "this dot = this tile". */
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 8px var(--dot-color, var(--gold-1)),
    0 0 14px color-mix(in srgb, var(--dot-color, var(--gold-1)) 60%, transparent);
}

/* Tablet: stack composition above main. */
@media (max-width: 1100px) and (min-width: 901px) {
  body.draft-active .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "navbar"
      "composition"
      "main";
  }
  .comp-panel {
    position: relative;
    top: 0;
    max-height: none;
    padding: 16px 0 0 0;
  }
}

/* Mobile: composition panel as inline section at the bottom (under main). */
@media (max-width: 900px) {
  body.draft-active .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "navbar"
      "main"
      "composition";
  }
  .comp-panel {
    position: relative;
    top: 0;
    max-height: none;
    padding: 8px 0 24px 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Download page (heslem chráněný download Bridge instalátoru)
   ───────────────────────────────────────────────────────────────────────── */

.download-version-card { margin-top: 16px; }
.download-version-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.download-version-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: linear-gradient(180deg, var(--gold-soft), rgba(212, 162, 76, 0.18));
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold-2);
  font-size: 1rem;
}
.download-changelog {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border-left: 3px solid var(--gold-1);
  border-radius: 4px;
  font-size: 0.88rem;
  line-height: 1.55;
}
.download-changelog__body {
  margin-top: 6px;
  white-space: pre-wrap;
  color: var(--text-secondary);
}

.download-form-card { margin-top: 16px; }
.download-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 12px;
}
.download-password-input {
  flex: 1;
  min-width: 200px;
  padding: 12px 16px;
  font-size: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.download-password-input:focus {
  outline: none;
  border-color: var(--gold-1);
  box-shadow: 0 0 0 3px rgba(212, 162, 76, 0.15);
}
.download-status {
  min-height: 0;
}
.download-install-note {
  margin-top: 18px;
  padding: 12px 14px;
  background: rgba(70, 130, 180, 0.06);
  border: 1px dashed rgba(70, 130, 180, 0.3);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.download-install-note ol {
  margin: 8px 0 0 22px;
  padding: 0;
}
.download-install-note ol li {
  margin-bottom: 4px;
}

@media (max-width: 600px) {
  .download-form { flex-direction: column; }
  .download-password-input { width: 100%; }
}


/* ===== Login screen ====================================================== */
/* Full-page takeover when user has no session. Replaces .app-shell entirely
   so navbar + main content area aren't even mounted while logged out. */

/* Login wrapper centers the card inside the main content area (no longer a
   full-page takeover — public routes stay accessible while logged out). */
.login-wrap {
  display: flex;
  justify-content: center;
  padding: 24px 0 48px;
}

.login-card {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(180deg, rgba(22, 34, 54, 0.92), rgba(14, 26, 46, 0.92));
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-card);
  text-align: center;
}

.login-logo {
  height: 56px;
  width: auto;
  margin-bottom: 8px;
  border-radius: 8px;
  display: inline-block;
}

.login-title {
  font-size: 2rem;
  margin: 8px 0 4px;
  color: var(--gold-2);
}

.login-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 24px;
}

.login-intro {
  font-size: 0.95rem;
  margin: 0 0 16px;
  color: var(--text-secondary);
}

.login-steps {
  text-align: left;
  margin: 0 auto 20px;
  padding-left: 24px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.login-steps li { margin-bottom: 6px; }

.login-status {
  font-size: 0.88rem;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 16px 0;
  background: rgba(10, 22, 38, 0.5);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
}
.login-status--ok   { border-color: rgba(91, 195, 122, 0.5); color: #8FD9A4; }
.login-status--warn { border-color: rgba(212, 162, 76, 0.5); color: #E8C97A; }
.login-status--err  { border-color: rgba(255, 95, 95, 0.5); color: #F08989; }

.login-btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 4px;
}

.login-error {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 70, 85, 0.10);
  border: 1px solid rgba(255, 70, 85, 0.45);
  color: #F08989;
  font-size: 0.88rem;
}

.login-hint {
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.login-hint a { color: var(--gold-2); }

/* ===== Navbar user pill ================================================== */

.navbar__user-slot {
  display: flex;
  align-items: center;
  margin-left: 4px;
}
.navbar__user {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 12px;
  background: rgba(10, 22, 38, 0.55);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.navbar__login-btn {
  padding: 7px 16px;
  font-size: 0.82rem;
  border-radius: 999px;
  background: rgba(212, 162, 76, 0.14);
  border: 1px solid var(--gold-line);
  color: var(--gold-2);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: 0;
  transition: background 0.15s, color 0.15s;
}
.navbar__login-btn:hover {
  background: rgba(212, 162, 76, 0.22);
  color: #FFE0A8;
}

/* Skeleton placeholder shown while the first Auth.restore() is in flight.
   Keeps the layout stable + prevents a flash of "Přihlásit" before the
   logged-in user pill replaces it. */
.navbar__user-skeleton {
  display: inline-block;
  width: 110px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: navbar-skeleton-shimmer 1.2s linear infinite;
}
@keyframes navbar-skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.navbar__user-name {
  font-weight: 500;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navbar__user-tag {
  color: var(--text-muted);
  margin-left: 2px;
  font-weight: 400;
}
.navbar__user-logout {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  min-height: 0;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.navbar__user-logout:hover {
  color: var(--gold-2);
  border-color: var(--gold-line);
  background: rgba(212, 162, 76, 0.08);
}

@media (max-width: 900px) {
  .navbar__user-slot,
  .navbar__user,
  .navbar__login-btn { display: none; } /* meta block is hidden on mobile anyway */
  .login-card { padding: 28px 22px; }
  .login-title { font-size: 1.6rem; }
}

/* ===== Champ Pools (new API-backed Settings page) ======================== */

.cp-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.cp-title {
  margin: 0;
  font-size: 1.4rem;
}
/* Top-of-page tab strip in Champ Pools — Můj profil + every team + "Přidat tým"
   CTA. Each tab is bigger / more readable than the legacy 999px-pill row, so
   icons sit visually next to names. Pill container is gone — each tab is
   its own rounded box. Flex wraps on narrow screens. */
.cp-viewtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  align-items: stretch;
}
.cp-viewtab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: rgba(10, 22, 38, 0.55);
  border: 1px solid var(--gold-line);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  min-height: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  position: relative;
}
.cp-viewtab:hover {
  color: var(--gold-2);
  border-color: var(--gold-1);
  transform: translateY(-1px);
}
/* Emoji icon container — circular bg + subtle border so monochrome emojis
   (🛡 ⚔ 🗡 …) don't disappear into the dark theme. Drop-shadow adds a faint
   gold glow that makes any glyph pop regardless of its rendered colour. */
.cp-viewtab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 1rem;
  line-height: 1;
  border-radius: 50%;
  background: rgba(212, 162, 76, 0.10);
  border: 1px solid var(--gold-line);
  filter: drop-shadow(0 0 2px rgba(255, 224, 168, 0.4));
  flex-shrink: 0;
}
.cp-viewtab.is-active .cp-viewtab__icon {
  background: rgba(26, 19, 6, 0.25);
  border-color: rgba(26, 19, 6, 0.4);
}
.cp-viewtab__label {
  letter-spacing: 0.02em;
}
.cp-viewtab__owner-badge {
  margin-left: 4px;
  font-size: 0.78rem;
  color: var(--gold-1);
  text-shadow: 0 0 4px rgba(212, 162, 76, 0.6);
}
/* Plus icon built from two centered bars via pseudo-elements — bulletproof
   centering, no font-metric drift (no glyph in DOM at all). */
.cp-viewtab__plus {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold-1);
  flex-shrink: 0;
  display: inline-block;
}
.cp-viewtab__plus::before,
.cp-viewtab__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #1A1306;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.cp-viewtab__plus::before { width: 10px; height: 2px; }
.cp-viewtab__plus::after  { width: 2px;  height: 10px; }
/* CTA-style "Přidat tým" tab — dashed border + plus icon, stands apart from
   the regular tabs visually so the user can find the add action quickly. */
.cp-viewtab--add {
  border-style: dashed;
  border-color: var(--gold-1);
  color: var(--gold-2);
}
.cp-viewtab--add:hover {
  background: rgba(212, 162, 76, 0.12);
  border-style: dashed;
}
.cp-viewtab--add.is-active {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color: #1A1306;
  font-weight: 700;
  border-style: solid;
}
.cp-viewtab--add.is-active .cp-viewtab__plus { background: #1A1306; }
.cp-viewtab--add.is-active .cp-viewtab__plus::before,
.cp-viewtab--add.is-active .cp-viewtab__plus::after { background: var(--gold-1); }
.cp-viewtab.is-active {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color: #1A1306;
  font-weight: 700;
  border-color: var(--gold-1);
  box-shadow: 0 0 0 1px var(--gold-1) inset, 0 2px 10px rgba(212, 162, 76, 0.25);
}
.cp-viewtab.is-active .cp-viewtab__owner-badge { color: #1A1306; text-shadow: none; }

.cp-flash {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
}
.cp-flash--ok  { background: rgba(91,195,122,0.10); border: 1px solid rgba(91,195,122,0.45); color: #8FD9A4; }
.cp-flash--err { background: rgba(255,70,85,0.10);  border: 1px solid rgba(255,70,85,0.45);  color: #F08989; }

.cp-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cp-section-header h3 { margin: 0 0 6px; }
.cp-section-header p { margin: 0; max-width: 56ch; }

.cp-mainrole {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.cp-mainrole-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 22, 38, 0.55);
  border: 1px solid var(--gold-line);
  color: var(--text-secondary);
  font-size: 0.84rem;
  cursor: pointer;
  min-height: 0;
}
.cp-mainrole-btn:hover { color: var(--gold-2); }
.cp-mainrole-btn.is-active {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color: #1A1306;
  font-weight: 600;
}
.cp-mainrole-icon { width: 18px; height: 18px; display: block; }

/* Team header */
.cp-team-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--gold-line);
  background: rgba(10, 22, 38, 0.4);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cp-team-header h3 { margin: 0; font-size: 1.1rem; }
.cp-invite-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.88rem;
}
.cp-invite-code {
  background: rgba(212, 162, 76, 0.10);
  border: 1px solid var(--gold-line);
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--gold-2);
  font-family: monospace;
  letter-spacing: 0.05em;
}
.cp-team-actions { flex-wrap: wrap; }

/* Badges */
.cp-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 4px;
}
.cp-badge--owner  { background: rgba(212,162,76,0.18); color: var(--gold-2); border: 1px solid var(--gold-line); }
.cp-badge--member { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.cp-badge--team   { background: rgba(125,140,255,0.14); color: #B0B8FF; font-size: 0.6rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-badge--you    { background: rgba(91,195,122,0.18); color: #8FD9A4; }
.cp-badge--pre    { background: rgba(125,140,255,0.18); color: #B0B8FF; }
.cp-badge--early  { background: rgba(255,180,80,0.18); color: #FFD68C; }
.cp-badge--lock   { background: transparent; color: var(--text-muted); }

/* Roster grid — uses the existing .player-pick-list responsive grid + the
   PlayerCard component for visuals. Each card is wrapped in .cp-card-wrap so
   we can overlay status badges (TY / OWNER / PRE / 🔒) in the top-right
   corner without modifying the shared PlayerCard markup. */
.cp-roster-grid { margin-top: 12px; }

.cp-card-wrap {
  position: relative;
  /* Wrapper is itself a grid item; the contained .player-card fills it. */
}
.cp-card-wrap > .player-card {
  /* PlayerCard already has all visual styling — this just ensures the
     overlay badges are positioned against the wrapper, not the page. */
  width: 100%;
}
.cp-card-badges {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  pointer-events: none;
  z-index: 2;
}
.cp-card-badges .cp-badge { margin-left: 0; }

/* Detail panel — full-width card shown below the roster grid when a player
   card is expanded. Holds the editor controls + pool/comfort UI. */
.cp-detail-panel { padding: 18px 22px 22px; }
.cp-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.cp-detail-header h3 { font-size: 1.1rem; }
.cp-detail-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}
.cp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.88rem;
}
.cp-rolepick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
}
.cp-rolepick select {
  background: rgba(10, 22, 38, 0.55);
  border: 1px solid var(--gold-line);
  color: var(--text-secondary);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.86rem;
}
.cp-readonly-note {
  font-size: 0.85rem;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(125,140,255,0.06);
  border-left: 3px solid rgba(125,140,255,0.5);
  border-radius: 4px;
}

/* Add player form — redesigned to match the player detail panel visual
   language: header with circular plus icon, section blocks with labels, role
   icon picker (not a dropdown), and a full-width gold CTA at the bottom. */
.cp-add-player {
  padding: 24px;
}
.cp-add-player__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gold-line);
}
.cp-add-player__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color: #1A1306;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(212, 162, 76, 0.35);
}
.cp-add-player__title {
  margin: 0 0 4px;
  color: var(--gold-2);
  font-family: var(--font-heading);
}
.cp-add-player__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.cp-add-player__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
.cp-add-player__cta {
  padding: 12px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  min-width: 200px;
}
.cp-add-player h4 { margin: 0 0 4px; }
.cp-input {
  background: rgba(10, 22, 38, 0.55);
  border: 1px solid var(--gold-line);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.92rem;
  width: 100%;
}
.cp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-field label { font-size: 0.78rem; }
.flex-1 { flex: 1; }

/* Pool editor (in profile or per-team-player) */
.cp-pool-editor { margin-top: 10px; }
.cp-pool-chips {
  margin: 10px 0 12px;
  min-height: 36px;
}
.cp-search {
  width: 100%;
  background: rgba(10, 22, 38, 0.55);
  border: 1px solid var(--gold-line);
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin: 10px 0;
}

.chip.is-readonly {
  cursor: not-allowed;
  opacity: 0.7;
}

@media (max-width: 700px) {
  .cp-section-header { flex-direction: column; }
  .cp-team-header { flex-direction: column; }
  .cp-viewtabs { font-size: 0.78rem; }
  .cp-viewtab { padding: 6px 10px; }
}

/* ===== App-level footer =================================================== */

/* Banner: spans the FULL viewport width (out of .app-shell so it isn't caught
   in draft-active 2-col grid). Content within is centered + max-width matched
   to navbar so it lines up nicely on all pages. */
.app-footer {
  width: 100%;
  margin-top: 56px;
  padding: 28px 0 32px;
  border-top: 1px solid var(--gold-line);
  background: linear-gradient(180deg, transparent, rgba(7, 16, 28, 0.55));
}
.app-footer__inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
/* In draft mode the main column widens to 1820px — match footer to keep the
   visual rhythm consistent on draft screens too. */
body.draft-active .app-footer__inner { max-width: 1820px; }

.app-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-footer__logo {
  height: 32px;
  width: auto;
  border-radius: 6px;
  opacity: 0.85;
}
.app-footer__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold-2);
  letter-spacing: 0.04em;
}
.app-footer__tagline {
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.app-footer__legal {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 60ch;
}

@media (max-width: 700px) {
  .app-footer { padding: 20px 16px; }
  .app-footer__inner { padding: 0; }
}

/* ===== Landing page (unauthenticated home) ============================== */

.landing-hero {
  padding: 56px 24px 40px;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(212, 162, 76, 0.10), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(41, 211, 197, 0.06), transparent 50%);
  border-radius: var(--radius-lg);
  margin-bottom: 32px;
  border: 1px solid var(--gold-line);
}
.landing-hero__brand {
  margin-bottom: 12px;
}
.landing-hero__logo {
  height: 72px;
  width: auto;
  border-radius: 12px;
}
.landing-hero__title {
  margin: 4px 0 6px;
  font-size: 3rem;
  font-family: var(--font-heading);
  color: var(--gold-2);
  letter-spacing: 0.02em;
}
.landing-hero__tagline {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0 auto 28px;
  line-height: 1.5;
}
.landing-hero__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.landing-hero__cta-primary,
.landing-hero__cta-secondary {
  padding: 14px 24px;
  font-size: 1rem;
}

.landing-section {
  margin: 48px 0;
}
.landing-section__title {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 24px;
  color: var(--gold-2);
}

.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.landing-feature {
  background: linear-gradient(180deg, rgba(22, 34, 54, 0.55), rgba(14, 26, 46, 0.55));
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  padding: 24px 22px;
  text-align: left;
  transition: border-color 0.18s, transform 0.18s;
}
.landing-feature:hover {
  border-color: var(--gold-1);
  transform: translateY(-2px);
}
.landing-feature__icon {
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: var(--gold-2);
}
.landing-feature h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}
.landing-feature p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
  font-size: 0.92rem;
}

.landing-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.landing-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  background: rgba(10, 22, 38, 0.45);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
}
.landing-step__num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color: #1A1306;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
}
.landing-step__body h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}
.landing-step__body p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.landing-cta-strip {
  margin-top: 56px;
  padding: 32px 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(212, 162, 76, 0.06), transparent 70%);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
}
.landing-cta-strip h3 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  color: var(--gold-2);
}
.landing-cta-strip p {
  margin: 0 0 16px;
  color: var(--text-secondary);
}
.landing-cta-strip .flex {
  justify-content: center;
}

@media (max-width: 700px) {
  .landing-hero { padding: 36px 16px 28px; }
  .landing-hero__title { font-size: 2.2rem; }
  .landing-hero__tagline { font-size: 0.95rem; }
  .landing-step { padding: 16px; }
  .landing-section { margin: 32px 0; }
}

/* ===== Card detail panel — section blocks (overhauled #5) =============== */

.cp-section-block {
  margin: 18px 0;
  padding: 14px 16px;
  background: rgba(10, 22, 38, 0.4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.cp-section-block:first-of-type { margin-top: 6px; }
.cp-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-2);
  margin-bottom: 10px;
}

/* Role v týmu — icon picker. Each button has role icon + label, large hit area. */
.cp-role-iconpicker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cp-role-iconpicker-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 80px;
  min-width: 72px;
  padding: 10px 8px;
  background: rgba(10, 22, 38, 0.55);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  min-height: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.cp-role-iconpicker-btn:hover {
  border-color: var(--gold-1);
  color: var(--gold-2);
}
.cp-role-iconpicker-btn.is-active {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color: #1A1306;
  font-weight: 700;
  border-color: var(--gold-1);
  box-shadow: 0 0 0 1px var(--gold-1) inset;
}
.cp-role-iconpicker-icon {
  width: 28px;
  height: 28px;
  display: block;
}
.cp-role-iconpicker-btn.is-active .cp-role-iconpicker-icon {
  filter: drop-shadow(0 0 4px rgba(255, 224, 168, 0.6));
}

/* Early picker section — toggle + descriptive help text */
.cp-early-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}
.cp-early-help {
  font-size: 0.84rem;
  line-height: 1.4;
}

/* Detail panel actions row */
.cp-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}
.cp-btn-danger {
  color: #F08989 !important;
  border-color: rgba(255,70,85,0.5) !important;
}
.cp-btn-danger:hover {
  background: rgba(255,70,85,0.08) !important;
  border-color: rgba(255,70,85,0.8) !important;
}

@media (max-width: 700px) {
  .cp-role-iconpicker-btn {
    flex: 1 1 60px;
    min-width: 56px;
    padding: 8px 4px;
    font-size: 0.74rem;
  }
  .cp-role-iconpicker-icon { width: 22px; height: 22px; }
  .cp-early-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ===== Chip editor modal (#6 — comfort + remove popup) ================== */

.chip-editor {
  text-align: center;
  padding: 4px 8px 8px;
}
.chip-editor__portrait {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.chip-editor__portrait img {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  border: 2px solid var(--gold-1);
  box-shadow: 0 0 24px rgba(212, 162, 76, 0.35);
  object-fit: cover;
}
.chip-editor__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold-2);
  margin-bottom: 4px;
}
.chip-editor__role {
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.chip-editor__toggle-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 18px;
  background: rgba(10, 22, 38, 0.45);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.chip-editor__toggle-help {
  font-size: 0.84rem;
  text-align: center;
  max-width: 40ch;
  line-height: 1.45;
}
.chip-editor__actions {
  display: flex;
  justify-content: center;
}

/* ===== Download page (redesigned #9) ==================================== */

.download-hero {
  text-align: center;
  padding: 32px 20px 20px;
  margin-bottom: 20px;
}
.download-hero__icon { margin-bottom: 8px; }
.download-hero__logo {
  height: 56px;
  width: auto;
  border-radius: 10px;
}
.download-hero__title {
  margin: 8px 0 8px;
  font-size: 1.8rem;
  color: var(--gold-2);
}
.download-hero__sub {
  margin: 0 auto;
  color: var(--text-secondary);
  max-width: 56ch;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Windows logo — pure CSS 4-quadrant grid, no SVG / no asset dependency. */
.win-logo {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.win-logo__cell {
  background: #FFFFFF;
  border-radius: 1px;
  display: block;
}
/* Microsoft 4-color (used on dark CTA background — sticks out nicely) */
.download-btn .win-logo__cell:nth-child(1) { background: #F25022; }
.download-btn .win-logo__cell:nth-child(2) { background: #7FBA00; }
.download-btn .win-logo__cell:nth-child(3) { background: #00A4EF; }
.download-btn .win-logo__cell:nth-child(4) { background: #FFB900; }

.download-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 24px 0 36px;
}
.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 32px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color: #1A1306 !important;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  border: none;
  box-shadow:
    0 4px 14px rgba(212, 162, 76, 0.35),
    0 0 0 1px rgba(255, 224, 168, 0.4) inset;
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.download-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 22px rgba(212, 162, 76, 0.5),
    0 0 0 1px rgba(255, 224, 168, 0.6) inset;
}
.download-btn:active { transform: translateY(0); }
.download-btn__main {
  letter-spacing: 0.04em;
}
.download-btn__sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  opacity: 0.78;
  letter-spacing: 0.03em;
  margin-left: -6px;
}
.download-cta__meta {
  font-size: 0.82rem;
  text-align: center;
}

.download-version-host {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.download-changelog-details {
  background: rgba(10, 22, 38, 0.45);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  width: 100%;
  max-width: 640px;
  text-align: left;
}
.download-changelog-details[open] {
  background: rgba(10, 22, 38, 0.6);
}
.download-changelog-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--gold-2);
  font-size: 0.92rem;
}
.download-changelog__body {
  margin-top: 10px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
  white-space: pre-line;
}

.download-steps-section { margin-top: 32px; }
.download-steps-title {
  font-size: 1.2rem;
  margin-bottom: 16px;
  text-align: center;
}
.download-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.download-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  background: rgba(10, 22, 38, 0.45);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  transition: border-color 0.18s;
}
.download-step:hover { border-color: var(--gold-line); }
.download-step__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color: #1A1306;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.download-step__body h4 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.download-step__body p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: 0.9rem;
}

.download-auto-update {
  margin-top: 24px;
  padding: 12px 16px;
  text-align: center;
  font-size: 0.86rem;
  background: rgba(91, 195, 122, 0.07);
  border: 1px solid rgba(91, 195, 122, 0.3);
  border-radius: var(--radius-md);
}

@media (max-width: 700px) {
  .download-hero__title { font-size: 1.4rem; }
  .download-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 1rem;
  }
  .download-btn__sub { display: block; margin-left: 0; margin-top: 2px; }
  .download-step { padding: 14px 16px; gap: 12px; }
}

/* ===== Live champ-select detection popup (#10) ========================== */

.live-popup {
  text-align: center;
  padding: 4px 4px 8px;
}
.live-popup__pulse {
  font-size: 2.5rem;
  margin-bottom: 8px;
  animation: live-popup-pulse 1.6s ease-in-out infinite;
}
@keyframes live-popup-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}
.live-popup__title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: #4FE3A8;
  letter-spacing: 0.02em;
}
.live-popup__sub {
  margin: 0 auto 12px;
  max-width: 48ch;
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: 0.94rem;
}
.live-popup__side {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  display: inline-block;
  background: rgba(79, 227, 168, 0.10);
  border: 1px solid rgba(79, 227, 168, 0.4);
  border-radius: 999px;
  margin-top: 4px;
}
.live-popup__accept {
  background: linear-gradient(180deg, #4FE3A8, #2BA876) !important;
  color: #07101C !important;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 14px rgba(79, 227, 168, 0.35);
}
.live-popup__accept:hover {
  box-shadow: 0 8px 22px rgba(79, 227, 168, 0.5);
  transform: translateY(-1px);
}

/* ===== Copy icon — pure CSS, two overlapping rounded squares (#4) ======== */
.icon-copy {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}
.icon-copy__back,
.icon-copy__front {
  position: absolute;
  display: block;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background: transparent;
}
.icon-copy__back {
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
}
.icon-copy__front {
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  /* Front sheet sits OVER the back — paint a tiny background-color in the
     button's own color so the overlap looks "stacked" rather than crossed. */
  background: var(--bg-card-solid, #0E1A2E);
}

/* ===== Setup view — 2-tile create/join layout (#5) ====================== */

.cp-setup-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
}
.cp-setup-tile {
  display: flex;
  flex-direction: column;
  padding: 34px 28px;
  background: linear-gradient(180deg, rgba(22, 34, 54, 0.65), rgba(14, 26, 46, 0.65));
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
/* Header block (icon + title + description) sits at the top with comfortable
   spacing. The description grows (flex:1) so the form sticks to the bottom
   while the header stays anchored — keeps headings readable and prevents the
   "description glued to title" look. */
.cp-setup-tile__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  flex: 1;
}
.cp-setup-tile__form {
  display: flex;
  flex-direction: column;
}
.cp-setup-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-1), transparent);
  opacity: 0.5;
}
.cp-setup-tile:hover {
  border-color: var(--gold-1);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 24px rgba(212, 162, 76, 0.15);
}

/* Join tile gets cyan accent — "joining is friendly" feel */
.cp-setup-tile--join::before {
  background: linear-gradient(90deg, transparent, var(--blue-3), transparent);
}
.cp-setup-tile--join:hover {
  border-color: var(--blue-3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 24px rgba(41, 211, 197, 0.18);
}

.cp-setup-tile__icon {
  font-size: 3.2rem;
  margin-bottom: 16px;
  line-height: 1;
}
.cp-setup-tile__title {
  margin: 0 0 14px;
  font-size: 1.6rem;
  color: var(--gold-2);
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.cp-setup-tile__desc {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.95rem;
  max-width: 38ch;
}
.cp-setup-tile__label {
  display: block;
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.cp-setup-tile__input {
  text-align: center;
  font-size: 1rem;
  padding: 12px;
  margin-bottom: 16px;
}
.cp-setup-tile__cta {
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
}
.cp-setup-tile--join .cp-setup-tile__cta {
  background: linear-gradient(180deg, var(--blue-3), #1F8B82) !important;
  color: #07101C !important;
  border: none;
  box-shadow: 0 4px 14px rgba(41, 211, 197, 0.3);
}
.cp-setup-tile--join .cp-setup-tile__cta:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(41, 211, 197, 0.45);
  transform: translateY(-1px);
}

@media (max-width: 800px) {
  .cp-setup-tiles { grid-template-columns: 1fr; gap: 14px; }
  .cp-setup-tile { padding: 22px 18px; }
  .cp-setup-tile__icon { font-size: 2.4rem; }
  .cp-setup-tile__title { font-size: 1.1rem; }
}

/* ===== Emoji picker for team icon (#3) ================================== */

.cp-emoji-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  padding: 12px;
  background: rgba(10, 22, 38, 0.5);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
}
/* Each emoji sits on a near-white tile — dark icons (sword/shield/skull) need a
   light background to be visible at all. The slight cream tint matches the gold
   theme so it doesn't look like a foreign component dropped onto the page.
   The inset shadow + drop-shadow filter on the glyph create a subtle frame so
   light-colored emojis (sparkle, sun, diamond) don't blend INTO the cream. */
.cp-emoji-picker__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  font-size: 1.55rem;
  padding: 0;
  min-height: 0;
  background: linear-gradient(180deg, #F3E7D3, #E2D2B5);
  border: 1px solid rgba(212, 162, 76, 0.55);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
  line-height: 1;
  color: #2A1F0E;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              inset 0 -1px 0 rgba(0, 0, 0, 0.10),
              0 1px 2px rgba(0, 0, 0, 0.25);
  /* Drop-shadow on the glyph itself: gives pale emojis a soft edge so they
     don't dissolve into the cream background. */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.cp-emoji-picker__btn:hover {
  border-color: var(--gold-1);
  transform: scale(1.08);
  box-shadow: inset 0 0 0 1px var(--gold-1),
              inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 4px 10px rgba(0, 0, 0, 0.30);
}
.cp-emoji-picker__btn.is-active {
  border-color: var(--gold-1);
  background: linear-gradient(180deg, #FFE9B8, #F0CE85);
  box-shadow: inset 0 0 0 2px var(--gold-1),
              inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 0 12px rgba(255, 224, 168, 0.5);
}
/* "Žádná ikona" tile — distinguish via dark theme background + dashed border
   so it doesn't read as a "blank emoji" (which is what the white cream tile
   looked like with just a ∅ glyph). */
.cp-emoji-picker__btn--clear {
  background: rgba(10, 22, 38, 0.65);
  color: rgba(220, 220, 230, 0.55);
  font-size: 1.4rem;
  border: 1px dashed rgba(212, 162, 76, 0.6);
  box-shadow: none;
  filter: none;
}
.cp-emoji-picker__btn--clear:hover {
  background: rgba(10, 22, 38, 0.75);
  border-style: solid;
  border-color: var(--gold-1);
  color: var(--gold-2);
  box-shadow: inset 0 0 0 1px var(--gold-1);
}
.cp-emoji-picker__btn--clear.is-active {
  background: rgba(212, 162, 76, 0.18);
  color: var(--gold-2);
  border-style: solid;
  border-color: var(--gold-1);
  box-shadow: inset 0 0 0 2px var(--gold-1);
}

/* Team header icon — show alongside team name */
.cp-team-header__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  margin: 0;
}
.cp-team-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 1.7rem;
  line-height: 1;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(212, 162, 76, 0.12);
  border: 1px solid var(--gold-line);
  filter: drop-shadow(0 0 4px rgba(255, 224, 168, 0.3));
}
.cp-team-header__name {
  letter-spacing: 0.02em;
}

/* Icon picker expander — collapsed trigger that shows the currently-chosen
   icon + chevron, expands the full grid on click. Used in the Create-tile so
   both setup tiles default to the same height. */
.cp-icon-expander {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-icon-expander__trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(10, 22, 38, 0.55);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  color: var(--text-primary);
  cursor: pointer;
  min-height: 0;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.cp-icon-expander__trigger:hover {
  border-color: var(--gold-1);
  background: rgba(212, 162, 76, 0.08);
}
.cp-icon-expander__trigger.is-open {
  border-color: var(--gold-1);
  background: rgba(212, 162, 76, 0.10);
}
.cp-icon-expander__preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #F3E7D3, #E2D2B5);
  border: 1px solid rgba(212, 162, 76, 0.55);
  font-size: 1.35rem;
  line-height: 1;
  color: #2A1F0E;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.cp-icon-expander__text {
  flex: 1;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}
.cp-icon-expander__chevron {
  color: var(--gold-2);
  font-size: 0.85rem;
  transition: transform 0.15s;
}
.cp-icon-expander__trigger.is-open .cp-icon-expander__chevron {
  transform: rotate(180deg);
}

/* Rename modal form layout */
.cp-rename-form .cp-input { width: 100%; }

@media (max-width: 600px) {
  .cp-emoji-picker { grid-template-columns: repeat(6, 1fr); }
  .cp-emoji-picker__btn { font-size: 1.2rem; }
}

/* On very narrow screens collapse tabs to icons only — labels reappear on hover */
@media (max-width: 700px) {
  .cp-viewtab { padding: 8px 12px; font-size: 0.82rem; }
  .cp-viewtab__icon { font-size: 1rem; }
}