/* Admin přehled: dlaždice s čísly, graf aktivity, kampaň, obtížnosti bota, seznam hráčů a detail hráče. */

/* Tlačítko dole v menu (vidí ho jen admin) */
.admin-btn { display: inline-flex; align-items: center; gap: 8px; margin: 14px auto 0; padding: 9px 16px 9px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 214, 128, .35); background: rgba(255, 204, 77, .08); color: var(--gold); font: 800 13px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.admin-btn[hidden] { display: none; }
.admin-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-btn:hover { background: rgba(255, 204, 77, .16); }
.admin-btn:active { transform: scale(.96); }

#admin { --ad-panel: rgba(255, 255, 255, .045); --ad-line: rgba(255, 255, 255, .09); --ad-grid: rgba(255, 255, 255, .1); --ad-series: var(--gold);
  --ad-track: rgba(255, 204, 77, .16); padding-bottom: 40px; }
.ad { gap: 18px; }
.ad-refresh svg { width: 20px; height: 20px; fill: none; stroke: var(--paper); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#admin.ad-busy .ad-refresh svg { animation: ad-spin .9s linear infinite; }
@keyframes ad-spin { to { transform: rotate(1turn); } }
.ad-main, .ad-detail { display: flex; flex-direction: column; gap: 18px; }
.ad-main[hidden], .ad-detail[hidden] { display: none; }
.ad-status { margin: -6px 0 0; text-align: center; color: var(--muted); font-size: 12.5px; }
.ad-ok { color: var(--ready); }
.ad-bad { color: #ff9aa6; }
.ad-note { margin: 0; padding: 18px 4px; color: var(--muted); text-align: center; line-height: 1.45; }
.ad-foot { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* Hlavní číslo a kdo je právě online */
.ad-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; padding: 20px 22px; border-radius: 22px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 204, 77, .16), transparent 60%), var(--ad-panel); border: 1px solid rgba(255, 214, 128, .22); }
.ad-hero > div { display: grid; gap: 4px; }
.ad-hero small { color: var(--muted); font-size: 13px; font-weight: 600; }
.ad-hero b { font: 800 clamp(48px, 12vw, 68px)/1 var(--font-body); color: var(--paper); letter-spacing: -.02em; }
.ad-hero span { color: var(--ready); font-size: 13.5px; font-weight: 600; }
.ad-live { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--paper); font-size: 13.5px; }
.ad-live i { width: 9px; height: 9px; border-radius: 50%; background: var(--ready); box-shadow: 0 0 0 3px rgba(125, 255, 178, .18), 0 0 10px rgba(125, 255, 178, .7); animation: ad-pulse 2s ease-in-out infinite; }
@keyframes ad-pulse { 50% { opacity: .45; } }

/* Dlaždice s čísly */
.ad-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .ad-tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ad-tile { display: grid; align-content: start; gap: 5px; padding: 14px 15px; border-radius: 16px; background: var(--ad-panel); border: 1px solid var(--ad-line); min-width: 0; }
.ad-tile small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ad-tile b { font: 700 clamp(20px, 5vw, 26px)/1.1 var(--font-body); color: var(--paper); overflow-wrap: anywhere; }
.ad-tile span { color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }

/* Skupiny */
.ad-group { padding: 16px; border-radius: 20px; background: var(--ad-panel); border: 1px solid var(--ad-line); min-width: 0; }
.ad-group > .ad-tiles .ad-tile { background: rgba(255, 255, 255, .04); }
.ad-group h3 { margin: 0 0 12px; font: 800 13px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.ad-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.ad-group-head h3 { margin: 0 auto 0 0; }
.ad-sub-h { margin-top: 18px !important; }
.ad-h-sub, .ad-count { color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.ad-cols { display: grid; gap: 18px; }
@media (min-width: 820px) { .ad-cols { grid-template-columns: 1.3fr 1fr; } }

/* Přepínače (metrika, období, řazení) */
.ad-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .25); border: 1px solid var(--ad-line); }
.ad-seg button { border: 0; cursor: pointer; padding: 7px 12px; border-radius: 999px; background: transparent; color: var(--muted); font: 700 12.5px/1 var(--font-body); }
.ad-seg button:hover { color: var(--paper); }
.ad-seg button[aria-pressed="true"] { background: rgba(255, 204, 77, .18); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .4); }

/* Graf aktivity */
.ad-chart { position: relative; min-height: 190px; }
.ad-chart svg { display: block; max-width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.ad-grid { stroke: var(--ad-grid); stroke-width: 1; }
.ad-tick { fill: var(--muted); font: 500 11px var(--font-body); font-variant-numeric: tabular-nums; }
.ad-col { fill: var(--ad-series); transition: opacity .15s; }
.ad-col.dim { opacity: .4; }
.ad-hit { fill: transparent; cursor: crosshair; }
.ad-empty { position: absolute; inset: 0 0 24px 40px; display: grid; place-items: center; margin: 0; color: var(--muted); font-size: 13px; pointer-events: none; }
.ad-tip { position: absolute; top: -8px; z-index: 2; display: grid; gap: 4px; min-width: 170px; padding: 10px 12px; border-radius: 12px; pointer-events: none;
  background: rgba(14, 7, 26, .96); border: 1px solid rgba(255, 214, 128, .3); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 12.5px; transform: translateY(-100%); }
.ad-tip b { font-weight: 700; color: var(--paper); text-transform: capitalize; margin-bottom: 2px; }
.ad-tip span { display: flex; justify-content: space-between; gap: 16px; color: var(--paper); font-variant-numeric: tabular-nums; }
.ad-tip i { font-style: normal; color: var(--muted); }

/* Vodorovné pruhy (kampaň, zařízení) a ukazatel úspěšnosti */
.ad-bar-row { display: grid; grid-template-columns: minmax(92px, 34%) 1fr auto; align-items: center; gap: 4px 12px; padding: 7px 0; }
.ad-bar-row + .ad-bar-row { border-top: 1px solid var(--ad-line); }
.ad-bar-label { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-bar { height: 12px; border-radius: 0 4px 4px 0; background: var(--ad-track); overflow: hidden; }
.ad-bar i { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--ad-series); }
.ad-bar-val { min-width: 74px; text-align: right; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ad-bar-val b { color: var(--paper); font-size: 14px; margin-right: 4px; }
.ad-bar-sub { grid-column: 2 / -1; color: var(--muted); font-size: 12px; }
.ad-bar-row.slim .ad-bar { height: 8px; }
.ad-meter { display: block; height: 6px; border-radius: 4px; background: var(--ad-track); overflow: hidden; }
.ad-meter i { display: block; height: 100%; border-radius: 4px; background: var(--ad-series); }

.ad-mode { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 9px 0; }
.ad-mode + .ad-mode { border-top: 1px solid var(--ad-line); }
.ad-mode b { font-size: 14px; }
.ad-mode > span { color: var(--paper); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ad-mode small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.ad-mode .ad-meter { grid-column: 1 / -1; }

/* Tabulky */
.ad-table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.ad-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ad-table th, .ad-table td { padding: 9px 8px; text-align: right; white-space: nowrap; border-top: 1px solid var(--ad-line); }
.ad-table thead th { border-top: 0; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ad-table th:first-child, .ad-table td:first-child { text-align: left; padding-left: 0; }
.ad-table tbody th { font-weight: 700; }
.ad-rate { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ad-rate .ad-meter { width: 70px; }
.ad-rate span { min-width: 38px; }
.ad-yes { color: var(--ready); font-weight: 700; }
.ad-no { color: var(--muted); }

/* Seznam hráčů */
.ad-search { flex: 1 1 220px; min-width: 0; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .25); color: var(--paper); font: 500 14px var(--font-body); }
.ad-search:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 204, 77, .2); }
.ad-players .ad-seg { margin-bottom: 8px; }
.ad-list { display: grid; }
.ad-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 16px; grid-template-areas: 'av who seen chev' 'av meta meta chev'; align-items: center; gap: 2px 12px;
  width: 100%; padding: 11px 6px; border: 0; border-top: 1px solid var(--ad-line); background: transparent; color: var(--paper); text-align: left; cursor: pointer; border-radius: 12px; font: inherit; }
.ad-row:first-child { border-top: 0; }
.ad-row:hover { background: rgba(255, 255, 255, .05); }
.ad-row:active { transform: scale(.99); }
.ad-av { grid-area: av; position: relative; }
.ad-av::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--night); display: none; }
.ad-av.online::after { display: block; background: var(--ready); }
.ad-av.queue::after { display: block; background: var(--gold); }
.ad-av.match::after { display: block; background: var(--hot); }
.ad-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--plum); box-shadow: 0 0 0 2px rgba(255, 255, 255, .14); font-size: 22px; }
.ad-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ad-avatar.big { width: 76px; height: 76px; font-size: 38px; flex: 0 0 auto; box-shadow: 0 0 0 3px var(--gold), 0 0 24px rgba(255, 204, 77, .35); }
.ad-who { grid-area: who; display: grid; gap: 2px; min-width: 0; }
.ad-who b, .ad-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-who b { font-size: 15px; }
.ad-who small { color: var(--muted); font-size: 12.5px; }
.ad-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ad-paid { color: var(--ready); font-weight: 700; }
.ad-seen { grid-area: seen; color: var(--muted); font-size: 12px; white-space: nowrap; }
.ad-chev { grid-area: chev; color: var(--muted); font-size: 22px; }
.ad-pips { display: inline-flex; gap: 3px; }
.ad-pips i { width: 9px; height: 9px; border-radius: 3px; background: var(--ad-track); }
.ad-pips i.on { background: var(--ad-series); }

/* Detail hráče */
.ad-person { display: flex; align-items: center; gap: 16px; padding: 4px 4px 0; }
.ad-person h3 { margin: 0; font: 900 clamp(22px, 6vw, 30px)/1.1 var(--font-display); }
.ad-person p { margin: 4px 0 8px; color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.ad-person a { color: var(--paper); }
.ad-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-badge { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid var(--ad-line); font-size: 12px; font-weight: 700; color: var(--paper); }
.ad-badge.ok { color: var(--ready); border-color: rgba(125, 255, 178, .35); }
.ad-badge.gold { color: var(--gold); border-color: rgba(255, 214, 128, .4); }
.ad-badge.hot { color: #ff9ccd; border-color: rgba(255, 46, 136, .45); }

.ad-check { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; cursor: pointer; }
.ad-check input { accent-color: var(--gold); width: 16px; height: 16px; }
.ad-collection .ad-foot { margin: -4px 0 12px; }
.ad-cards-group + .ad-cards-group { margin-top: 14px; }
.ad-cards-group h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.ad-cards-group h4 small { color: var(--muted); font-weight: 600; margin-left: 4px; }
.ad-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.ad-card { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: var(--plum); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.ad-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ad-card figcaption { position: absolute; inset: auto 0 0; padding: 14px 5px 5px; font-size: 10.5px; font-weight: 700; line-height: 1.15; text-align: center;
  background: linear-gradient(transparent, rgba(8, 4, 16, .92) 45%); color: #fff; }
.ad-cost { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--font-body); font-style: normal;
  color: #fff; background: var(--hype); box-shadow: 0 0 0 1.5px var(--hype-hi); }
.ad-copies { position: absolute; top: 4px; right: 4px; padding: 3px 6px; border-radius: 999px; font: 800 11px/1 var(--font-body); font-style: normal; color: #2a1400; background: var(--gold); }
.ad-card.missing { display: none; filter: grayscale(1) brightness(.6); opacity: .65; }
.ad-collection.show-missing .ad-card.missing { display: block; }
.ad-none { margin: -2px 0 0; color: var(--muted); font-size: 12.5px; }
.ad-collection.show-missing .ad-none { display: none; }

.ad-deck { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 0; }
.ad-deck + .ad-deck { border-top: 1px solid var(--ad-line); }
.ad-deck small { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
.ad-uid { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 12px; }
.ad-uid code { color: var(--paper); font-size: 12px; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .ad-group { padding: 14px 12px; }
  .ad-bar-row { grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 4px 8px; }
  .ad-seg button { padding: 7px 10px; }
}