/* Brand: Rebels Basketball – černá, klubová červená (nápis REBELS), oranžová (míč), bílá */
:root {
  --red: #dc2626;
  --red-dark: #a91b1b;
  --orange: #f7941d;
  --orange-dark: #d97706;
  --black: #0b0b0b;
  --bg: #0f0f10;
  --bg-alt: #161617;
  --card: #1d1d1f;
  --card-2: #252527;
  --ink: #f4f4f5;
  --muted: #a1a1aa;
  --line: #2e2e31;
  --win: #22c55e;
  --loss: #ef4444;
  --radius: 10px;
  --font-head: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-brush: "Permanent Marker", "Anton", cursive;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg) var(--grain); line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.container { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(11,11,11,.92); backdrop-filter: blur(8px); border-bottom: 2px solid var(--red); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 84px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-head); font-size: 26px; text-transform: uppercase; color: var(--red); line-height: 1; }
.brand img { height: 48px; width: auto; }
.brand small { display: block; font-family: var(--font-body); font-size: 10px; letter-spacing: 3.5px; color: #fff; font-weight: 700; margin-top: 3px; }
.nav { display: flex; align-items: center; gap: 20px; }
.nav a { text-decoration: none; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #d4d4d8; }
.nav a:hover { color: var(--orange); }
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; }
.cart-btn { background: var(--red); color: #fff; border: 0; border-radius: 6px; padding: 7px 14px; font-weight: 800; cursor: pointer; }
.cart-btn:hover { background: var(--orange); color: var(--black); }

/* Hero – diagonální červeno-oranžové tahy jako na zápasových grafikách */
.hero { position: relative; overflow: hidden; padding: 72px 0 88px; background:
  radial-gradient(ellipse at 50% -10%, rgba(255,255,255,.12), transparent 55%),
  radial-gradient(circle at 15% 80%, rgba(220,38,38,.18), transparent 45%),
  radial-gradient(circle at 90% 30%, rgba(247,148,29,.16), transparent 45%),
  var(--black); }
.streaks { position: absolute; inset: -20%; pointer-events: none; background:
  repeating-linear-gradient(115deg, transparent 0 46px, rgba(220,38,38,.55) 46px 52px, transparent 52px 70px, rgba(220,38,38,.25) 70px 73px, transparent 73px 140px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 16%, transparent 34% 66%, #000 84%);
  mask-image: linear-gradient(90deg, #000 0 16%, transparent 34% 66%, #000 84%);
  opacity: .55; }
.streaks::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 60px, rgba(247,148,29,.6) 60px 66px, transparent 66px 150px);
  -webkit-mask-image: linear-gradient(90deg, transparent 70%, #000 90%);
  mask-image: linear-gradient(90deg, transparent 70%, #000 90%); }
.hero-inner { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.hero-logo { width: 100%; height: auto; max-width: 440px; margin-inline: auto; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 20px 40px rgba(0,0,0,.6)); animation: pop .7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop { from { transform: scale(.85) rotate(-4deg); opacity: 0; } }
.eyebrow { color: var(--ink); font-weight: 800; text-transform: uppercase; letter-spacing: 5px; font-size: 12px; margin: 0 0 10px; }
.eyebrow::after { content: ""; display: block; width: 120px; height: 2px; background: var(--red); margin-top: 10px; }
.hero h1 { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(72px, 11vw, 150px); line-height: .88; margin: 0; color: var(--red); text-shadow: 4px 4px 0 #000; transform: skew(-6deg); }
.hero h1 span { display: block; font-family: var(--font-body); font-weight: 800; color: #fff; font-size: clamp(16px, 2.2vw, 26px); letter-spacing: .45em; line-height: 1.6; text-shadow: none; }
.lead { font-size: 18px; max-width: 46ch; color: #d4d4d8; }
.hero-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 12px 24px; border-radius: 6px; font-weight: 800; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; transition: .15s; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--orange); color: var(--black); }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

.hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
.next-match, .last-match { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; text-align: center; }
.last-match { border-color: rgba(247,148,29,.5); }
.hero-cards .label { text-transform: uppercase; font-size: 11px; letter-spacing: 3px; color: var(--orange); font-weight: 800; }
.next-match .label { color: var(--red); }
.hero-cards .teams { font-family: var(--font-head); font-size: 20px; text-transform: uppercase; margin: 6px 0 2px; line-height: 1.15; }
.hero-cards .teams em { font-family: var(--font-brush); font-style: normal; color: var(--red); font-size: 16px; margin: 0 6px; }
.hero-cards .when { font-size: 13px; color: var(--muted); }
.last-match .big { font-family: var(--font-head); font-size: 44px; line-height: 1.05; }
.last-match .big .us { color: var(--orange); }
.last-match .link { background: none; border: 0; color: var(--orange); font-weight: 700; cursor: pointer; font-size: 13px; text-decoration: underline; }
.countdown { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.countdown div { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; min-width: 46px; }
.countdown b { display: block; font-family: var(--font-head); font-size: 24px; font-weight: 400; }
.countdown span { font-size: 10px; text-transform: uppercase; color: var(--muted); }

/* Sections */
.section { padding: 80px 0; position: relative; }
.section-alt { background: var(--bg-alt) var(--grain); border-block: 1px solid var(--line); }
.section-title { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 6vw, 60px); line-height: 1; margin: 0 0 32px; }
.section-title::after { content: ""; display: block; width: 90px; height: 6px; margin-top: 12px; background: linear-gradient(90deg, var(--red) 0 60%, var(--orange) 60%); transform: skew(-20deg); }
.section-title small { font-family: var(--font-body); font-size: 14px; color: var(--muted); text-transform: none; margin-left: 10px; vertical-align: middle; }
.section-lead { color: var(--muted); max-width: 60ch; margin-top: -10px; }
.hint, .muted { color: var(--muted); font-size: 13px; }

/* Matches */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 6px; padding: 7px 16px; font-weight: 700; cursor: pointer; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.chip:hover { border-color: var(--orange); }
.chip.active { background: var(--red); border-color: var(--red); }
.match-list { display: grid; gap: 10px; }
.match { display: grid; grid-template-columns: 140px 1fr auto 1fr 110px; align-items: center; gap: 16px; background: var(--card); border-radius: var(--radius); padding: 14px 20px; border: 1px solid var(--line); }
.match .date { font-size: 13px; color: var(--muted); }
.match .date b { display: block; color: var(--ink); font-size: 15px; }
.match .team { font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .3px; }
.match .team.home { text-align: right; }
.match .team.us { color: var(--red); }
.match .score { font-family: var(--font-head); font-size: 30px; min-width: 100px; text-align: center; }
.match.win .score { color: var(--orange); }
.match .score.vs { font-family: var(--font-brush); color: var(--muted); font-size: 20px; }
.match .side { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.badge { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 4px; background: var(--card-2); text-transform: uppercase; letter-spacing: .5px; }
.badge.win { background: rgba(34,197,94,.15); color: var(--win); }
.badge.loss { background: rgba(239,68,68,.15); color: var(--loss); }
.gfx-btn { background: none; border: 0; padding: 0; color: var(--orange); font-size: 12px; font-weight: 700; cursor: pointer; }
.gfx-btn:hover { text-decoration: underline; }

/* Tables */
.table-wrap { overflow-x: auto; background: var(--card); border-radius: var(--radius); border: 1px solid var(--line); }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table th, .data-table td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table th { background: #000; color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.data-table .left { text-align: left; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tr.us { background: linear-gradient(90deg, rgba(220,38,38,.28), rgba(220,38,38,.06)); font-weight: 800; }
.data-table tr.us td:nth-child(2) { color: var(--ink); }
.data-table tbody tr:hover { background: var(--card-2); }
.sortable th { cursor: pointer; user-select: none; }
.sortable th:hover { color: var(--orange); }
.sortable th.asc::after { content: " ▲"; color: var(--orange); }
.sortable th.desc::after { content: " ▼"; color: var(--orange); }
.pos { color: var(--win); } .neg { color: var(--loss); }

/* Roster – karty ve stylu klubových grafik */
.roster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.player { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--card-2); border: 1px solid var(--line); cursor: default; padding: 0; color: inherit; text-align: left; font: inherit; }
.player.has-photo { cursor: zoom-in; }
.player img.photo { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15); transition: transform .3s; }
.player:hover img.photo { transform: scale(1.04); }
.player .art { position: absolute; inset: 0; background:
  linear-gradient(135deg, transparent 40%, rgba(255,255,255,.06) 40% 41%, transparent 41%),
  linear-gradient(45deg, transparent 60%, rgba(255,255,255,.05) 60% 61%, transparent 61%),
  radial-gradient(circle at 80% 15%, rgba(255,255,255,.12), transparent 40%), #0c0c0c var(--grain); }
.player .art img { position: absolute; right: -8%; top: 6%; width: 62%; opacity: .14; filter: grayscale(1) brightness(2); }
.player .art .num { position: absolute; left: 10%; bottom: 14%; font-family: var(--font-head); font-size: clamp(80px, 11vw, 130px); line-height: .8; color: #fff; -webkit-text-stroke: 2px #000; text-shadow: 4px 4px 0 var(--red); }
.player .art .nm { position: absolute; left: 8%; top: 10%; right: 8%; font-family: var(--font-brush); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.05; color: #fff; transform: rotate(-6deg); }
.player .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(transparent, rgba(0,0,0,.92)); display: flex; justify-content: space-between; align-items: end; font-size: 13px; }
.player .cap b { font-family: var(--font-head); font-weight: 400; font-size: 18px; text-transform: uppercase; }
.player .cap span { color: var(--orange); font-weight: 800; }

/* Leaders */
.leaders { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.leader { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.leader .cat { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); font-weight: 800; }
.leader .val { font-family: var(--font-head); font-size: 52px; line-height: 1; margin: 8px 0 4px; }
.leader:nth-child(even) .val { color: var(--orange); }
.leader .who { font-weight: 700; }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 80px; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--red), var(--orange)); }
.timeline li { display: grid; grid-template-columns: 80px 1fr; gap: 36px; padding-bottom: 30px; position: relative; }
.timeline .year { font-family: var(--font-head); font-size: 32px; color: var(--orange); text-align: right; padding-right: 6px; line-height: 1.1; }
.timeline li::after { content: ""; position: absolute; left: 74px; top: 12px; width: 15px; height: 15px; border-radius: 50%; background: var(--red); border: 3px solid var(--bg); }
.timeline h3 { margin: 4px 0 4px; font-size: 18px; text-transform: uppercase; letter-spacing: .3px; }
.timeline p { margin: 0; color: var(--muted); }

/* Awards */
.awards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.award { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: relative; transition: .15s; }
.award:hover { transform: translateY(-3px); border-color: var(--orange); }
.award .icon { font-size: 36px; }
.award .year { position: absolute; top: 16px; right: 20px; font-family: var(--font-head); font-size: 28px; color: var(--red); }
.award h3 { margin: 10px 0 6px; font-size: 17px; text-transform: uppercase; }
.award p { margin: 0; color: var(--muted); font-size: 14px; }

/* Products */
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.product { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: .15s; }
.product:hover { border-color: var(--red); }
.product .thumb { aspect-ratio: 1; display: grid; place-items: center; font-size: 72px; position: relative;
  background: radial-gradient(circle at 70% 25%, rgba(247,148,29,.25), transparent 50%), radial-gradient(circle at 20% 85%, rgba(220,38,38,.3), transparent 50%), #0c0c0c var(--grain); }
.product .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product .tag { position: absolute; top: 10px; left: 10px; background: var(--orange); color: #000; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; }
.product .body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product h3 { margin: 0; font-size: 15px; text-transform: uppercase; }
.product .price { font-family: var(--font-head); font-size: 24px; font-weight: 400; color: var(--orange); }
.product select, .order-form input, .order-form select { padding: 9px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #111; color: var(--ink); }
.product .btn { margin-top: auto; text-align: center; padding: 10px; }

/* Cart */
.cart { position: fixed; top: 0; right: 0; height: 100%; width: min(380px, 100%); background: var(--bg-alt); z-index: 100; transform: translateX(100%); transition: transform .25s; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.5); border-left: 1px solid var(--line); }
.cart.open { transform: none; }
.cart-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #000; }
.cart-head h3 { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: 28px; text-transform: uppercase; }
.cart-close { background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; }
.cart-items { list-style: none; margin: 0; padding: 12px 20px; flex: 1; overflow-y: auto; }
.cart-items li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cart-items .meta { color: var(--muted); font-size: 13px; }
.cart-items .qty { display: flex; gap: 6px; align-items: center; }
.cart-items .qty button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.cart-empty { color: var(--muted); text-align: center; padding: 40px 0; display: block !important; }
.cart-foot { padding: 16px 20px; border-top: 1px solid var(--line); }
.cart-total { font-size: 18px; margin: 0 0 12px; }
.cart-total strong { color: var(--orange); }
.order-form { display: grid; gap: 8px; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 90; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.9); display: grid; place-items: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 90vh; max-width: 100%; width: auto; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox-close { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; font-size: 30px; cursor: pointer; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--orange); color: #000; padding: 12px 20px; border-radius: 6px; z-index: 400; font-weight: 800; }

/* Footer */
.site-footer { background: #000; color: #a1a1aa; padding: 40px 0; font-size: 14px; border-top: 2px solid var(--red); }
.footer-inner { display: grid; grid-template-columns: auto 1fr 1fr 1.4fr; gap: 24px; align-items: center; }
.footer-inner img { height: 77px; width: auto; }
.brand img, .footer-inner img { object-fit: contain; }
.site-footer strong { color: #fff; }
.site-footer p { margin: 4px 0; }
.site-footer code { color: var(--orange); }

/* Responsive */
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .hero-logo { max-width: 260px; }
  .eyebrow::after { margin-inline: auto; }
  .lead { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .leaders, .products, .roster { grid-template-columns: repeat(2, 1fr); }
  .awards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav { position: absolute; top: 84px; left: 0; right: 0; background: #000; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px; display: none; border-bottom: 2px solid var(--red); }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid #222; }
  .cart-btn { margin-top: 12px; align-self: flex-start; }
  .hero { padding: 40px 0 56px; }
  .hero-cards { grid-template-columns: 1fr; }
  .match { grid-template-columns: 1fr auto 1fr; grid-template-areas: "date date side" "home score away"; gap: 8px; padding: 12px 14px; }
  .match .date { grid-area: date; }
  .match .side { grid-area: side; flex-direction: row; align-items: center; }
  .match .team.home { grid-area: home; }
  .match .team.away { grid-area: away; }
  .match .team { font-size: 13px; }
  .match .score { grid-area: score; min-width: 74px; font-size: 26px; }
  .match .date b { display: inline; margin-right: 6px; }
  .awards { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .timeline::before { left: 54px; }
  .timeline li { grid-template-columns: 54px 1fr; gap: 26px; }
  .timeline li::after { left: 48px; }
  .timeline .year { font-size: 22px; }
}
@media (max-width: 480px) {
  .products, .leaders { grid-template-columns: 1fr; }
}

/* ---------- Individuální statistiky ---------- */
.leader .sub { display: block; color: var(--muted); font-weight: 500; font-size: 13px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin-bottom: 18px; }
.tab { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 16px; color: var(--muted); font: inherit; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.search, .select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; min-width: 220px; }
.search:focus, .select:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.player-chip { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.player-chip.on { border-color: #555; background: var(--card-2); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #555; flex: none; }
.cellbar { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.cellbar i { display: inline-block; height: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--red), var(--orange)); }
.chart-box { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-height: 120px; }
.chart-box svg { display: block; overflow: visible; }
.chart-box .grid { stroke: var(--line); stroke-width: 1; }
.chart-box .axis { fill: var(--muted); font-size: 12px; font-family: var(--font-body); }
.chart-box .rule { stroke: #777; stroke-dasharray: 3 3; }
.tip { position: absolute; top: 12px; background: #000; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; pointer-events: none; min-width: 150px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.tip b { display: block; margin-bottom: 4px; color: var(--orange); }
.tip div { display: flex; align-items: center; gap: 6px; }
.tip em { font-style: normal; margin-left: auto; padding-left: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.data-table td { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* Trofeje */
.trophies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trophy-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.trophy-card.all { border-color: var(--orange); background: linear-gradient(160deg, rgba(247,148,29,.14), transparent 60%), var(--card); }
.trophy-card h3 { margin: 0 0 12px; font-family: var(--font-head); font-weight: 400; font-size: 30px; color: var(--orange); line-height: 1; }
.trophy-card:not(.all) h3 { color: var(--ink); }
.trophy { display: grid; grid-template-columns: 30px 1fr auto; grid-template-areas: "ico cat val" "ico who val"; column-gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); align-items: center; }
.trophy .ico { grid-area: ico; font-size: 22px; }
.trophy .cat { grid-area: cat; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
.trophy .who { grid-area: who; font-weight: 800; }
.trophy .val { grid-area: val; font-family: var(--font-head); font-size: 20px; color: var(--orange); white-space: nowrap; }

/* Soupiska bez čísla dresu: velká přezdívka */
.player .art.no-num .nm { top: auto; bottom: 22%; font-size: clamp(30px, 4vw, 46px); }

@media (max-width: 1000px) { .trophies { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .trophies { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
  .search, .select { min-width: 0; width: 100%; }
}

/* ---------- Profil hráče ---------- */
a.player { display: block; text-decoration: none; cursor: pointer; }
a.player:hover { border-color: var(--orange); }
a.player:hover .art .num, a.player:hover .art .nm { color: var(--orange); }
.roster-small { grid-template-columns: repeat(6, 1fr); gap: 12px; }
.roster-small .art .nm, .roster-small .art.no-num .nm { font-size: clamp(18px, 2vw, 24px); }
.sub-title { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 28px; margin: 36px 0 14px; }
.plink { color: inherit; text-decoration: none; border-bottom: 1px dashed #555; }
.plink:hover { color: var(--orange); border-bottom-color: var(--orange); }
body.no-scroll { overflow: hidden; }

.profile-modal { position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,.8); overflow-y: auto; padding: 32px 16px; backdrop-filter: blur(4px); }
.profile-sheet { position: relative; max-width: 980px; margin: 0 auto; background: var(--bg) var(--grain); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.profile-close { position: absolute; top: 12px; right: 14px; background: var(--card); border: 1px solid var(--line); color: var(--ink); width: 38px; height: 38px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.profile-close:hover { background: var(--red); }
.profile-head { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: center; }
.profile-card { width: 100%; }
.profile-card .art .nm { font-size: 34px; }
.profile-card .art.no-num .nm { font-size: 52px; }
.profile-title { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(48px, 8vw, 84px); line-height: 1.05; margin: 18px 0 4px; color: var(--red); text-shadow: 3px 3px 0 #000; }
.profile-title .no { color: var(--orange); }
.real-name { margin: 0 0 8px; color: var(--muted); font-size: 18px; }
.status { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; padding: 4px 10px; border-radius: 4px; background: var(--card-2); color: var(--muted); }
.status.on { background: rgba(34,197,94,.15); color: var(--win); }
.facts { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.facts b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.facts li { font-weight: 700; }
.bio { color: var(--ink); max-width: 60ch; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 28px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.kpi span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
.kpi b { font-family: var(--font-head); font-weight: 400; font-size: 34px; line-height: 1.1; }
.kpi:nth-child(4n+4) b, .kpi:nth-child(4) b { color: var(--orange); }
.data-table tr.total td { font-weight: 800; background: rgba(247,148,29,.08); border-top: 2px solid var(--orange); }
.chart-box .bar-val { fill: var(--ink); font-family: var(--font-head); font-size: 16px; }
.award-list { display: flex; flex-wrap: wrap; gap: 10px; }
.award-pill { display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.award-pill span { font-size: 24px; }
.award-pill b { display: block; font-size: 14px; }
.award-pill small { color: var(--orange); font-weight: 700; }
.profile-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.profile-nav a { text-decoration: none; font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; color: var(--muted); }
.profile-nav a:hover { color: var(--orange); }

@media (max-width: 1000px) { .roster-small { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) {
  .profile-modal { padding: 0; }
  .profile-sheet { border-radius: 0; padding: 56px 16px 24px; min-height: 100%; }
  .profile-head { grid-template-columns: 1fr; text-align: center; }
  .profile-card { max-width: 240px; margin: 0 auto; }
  .facts { justify-content: center; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .roster-small { grid-template-columns: repeat(3, 1fr); }
}
.chart-box svg.bars .axis { font-size: 15px; }
.chart-box svg.bars .bar-val { font-size: 22px; }

/* ---------- Loga týmů ---------- */
.tlogo { width: 34px; height: 34px; object-fit: contain; flex: none; }
.tlogo-empty { display: inline-grid; place-items: center; border-radius: 50%; background: var(--card-2); font-family: var(--font-head); color: var(--muted); }
.match .team { display: flex; align-items: center; gap: 10px; }
.match .team.home { justify-content: flex-end; }
.team-cell { display: inline-flex; align-items: center; gap: 10px; }
.team-cell .tlogo { width: 28px; height: 28px; }
.duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin: 10px 0 6px; }
.duel em { font-family: var(--font-brush); font-style: normal; color: var(--red); font-size: 18px; }
.side-team { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font-head); text-transform: uppercase; font-size: 15px; line-height: 1.1; }
.side-team .us { color: var(--red); }
.duel-logo { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
@media (max-width: 760px) {
  .match .team { flex-direction: column; gap: 4px; text-align: center; }
  .match .team.home { flex-direction: column-reverse; }
  .match .team .tlink { flex-direction: column; gap: 4px; }
  .match .team.home .tlink { flex-direction: column-reverse; }
  .match .team .tlogo { width: 30px; height: 30px; }
}
.match .team .tlogo { width: 40px; height: 40px; }
@media (max-width: 760px) { .match .team.home, .match .team.away { text-align: center; align-items: center; } }
.roster-note { margin: 0 0 18px; }
.player.no-photo .photo { filter: none; }
.player.no-photo:hover .photo { transform: scale(1.02); }
.profile-card.player .silhouette { filter: none; }

/* ---------- Týmy soutěže ---------- */
.tlink { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.match .team.home .tlink { justify-content: flex-end; }
.team-games td.left.hide-sm { white-space: normal; min-width: 160px; }
.match .badge { white-space: nowrap; }
.tlink:hover span, a.tlink.team-cell:hover { color: var(--orange); }
.duel .tlink { display: block; }
.round-title { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 22px; color: var(--muted); margin: 18px 0 2px; }
.round-title:first-child { margin-top: 0; }
.team-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.team-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 10px; transition: border-color .15s; }
.team-tile:hover { border-color: var(--orange); }
.team-tile.us { border-color: var(--red); }
.team-tile-logo { width: 72px; height: 72px; object-fit: contain; }
.team-tile-name { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; line-height: 1.25; }
.team-tile-meta { color: var(--muted); font-size: 12px; line-height: 1.3; }
.team-head { grid-template-columns: 180px 1fr; }
.team-logo-box { display: grid; place-items: center; }
.team-logo-big { width: 170px; height: 170px; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)); }
.team-name { font-size: clamp(36px, 6vw, 60px) !important; }
.venue-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.venue-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
.venue-card strong { font-size: 17px; }
.btn-sm { padding: 7px 14px; font-size: 12px; margin-top: 8px; }
.nowrap { white-space: nowrap; }
.score-cell { font-family: var(--font-head); font-size: 18px; }
.team-games td .badge { display: inline-block; }
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  .team-head { grid-template-columns: 1fr; }
  .team-logo-big { width: 130px; height: 130px; }
  .venue-card { align-items: center; text-align: center; }
}
@media (max-width: 480px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

/* ================= Vícestránkový web ================= */
.site-header { top: env(safe-area-inset-top, 0px); }
.nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--red); }
@media (max-width: 760px) { .nav a[aria-current="page"] { box-shadow: none; color: var(--orange); } }

/* Hlavička podstránky */
.page-head { padding: 56px 0 8px; }
.page-title { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 8vw, 84px); line-height: .95; margin: 0; text-wrap: balance; }
.page-sub { color: var(--muted); max-width: 70ch; margin: 12px 0 0; }
.section-tight { padding: 28px 0 72px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.section-head .section-title { margin: 0; }
.more-link { color: var(--orange); font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; text-decoration: none; }
.more-link:hover { text-decoration: underline; }
.group-title { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 26px; margin: 28px 0 12px; color: var(--ink); }
.group-title:first-child { margin-top: 0; }
#match-list .match-list, #league-schedule .match-list { margin-bottom: 8px; }
.back-link { display: inline-block; margin-bottom: 18px; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.back-link:hover { color: var(--orange); }

/* Úvod: fotka ze zápasu */
.hero { position: relative; overflow: hidden; padding: 0; background: #000; isolation: isolate; }
.hero .streaks { display: none; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 28%; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.25) 100%), linear-gradient(0deg, rgba(11,11,11,1) 0%, rgba(11,11,11,0) 35%); }
.hero-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; padding: 140px 0 64px; }
.hero-result .eyebrow { margin-bottom: 14px; }
.hero-score { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; }
.hs-num { font-family: var(--font-head); font-size: clamp(76px, 12vw, 150px); line-height: .9; color: #fff; }
.hs-num i { font-style: normal; color: var(--red); margin: 0 8px; }
.hs-team { font-family: var(--font-head); text-transform: uppercase; font-size: clamp(22px, 3vw, 34px); color: #e4e4e7; }
.hs-team.us { color: var(--red); }
.hero-lead { color: #d4d4d8; font-size: 17px; margin: 16px 0 0; max-width: 46ch; }
.hero-title { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(64px, 10vw, 120px); line-height: .9; margin: 0; color: var(--red); }
.hero .next-match { background: rgba(12,12,13,.82); backdrop-filter: blur(6px); }
.hero .eyebrow::after { display: none; }

/* Instagram */
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ig-tile { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--card); max-width: 100%; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
a.ig-tile:hover img { transform: scale(1.05); }

/* Merch */
.merch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.merch-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.merch-photo { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: var(--card-2); max-width: 100%; }
.merch-photo img { width: 100%; height: 100%; object-fit: cover; }
.merch-photo .merch-placeholder { width: 34%; height: auto; opacity: .18; filter: grayscale(1); }
.merch-item.soon .merch-photo img { opacity: .1; }
.soon-tag { position: absolute; top: 12px; left: 12px; background: var(--orange); color: #000; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; border-radius: 4px; }
.merch-body { padding: 14px 16px 18px; }
.merch-body h2 { font-size: 16px; text-transform: uppercase; margin: 0 0 4px; letter-spacing: .3px; }
.merch-body p { margin: 0; color: var(--muted); font-size: 14px; }
.merch-contact { margin-top: 28px; color: var(--muted); }
.merch-contact strong { color: var(--ink); user-select: all; }

/* Patička */
.footer-inner { grid-template-columns: auto 1fr 1fr 1.6fr; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: flex-end; }
.footer-nav a, .site-footer a { color: #d4d4d8; text-decoration: none; font-weight: 600; }
.footer-nav a:hover, .site-footer a:hover { color: var(--orange); }

/* Profily jako stránky */
.profile-head { margin-top: 4px; }

@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 220px; text-align: left; }
  .hero .hero-actions { justify-content: flex-start; }
  .merch-grid { grid-template-columns: repeat(3, 1fr); }
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .hero-inner { padding: 200px 0 40px; text-align: left; }
  .merch-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-nav { justify-content: flex-start; }
  .page-head { padding-top: 36px; }
}
.next-match .label { text-transform: uppercase; font-size: 11px; letter-spacing: 3px; color: var(--red); font-weight: 800; }
.next-match .when { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } .footer-nav { justify-content: flex-start; } }
.chart-box svg.bars { max-width: 760px; margin: 0 auto; }
.ig-tile { position: relative; }
.ig-loading { background: linear-gradient(100deg, var(--card) 40%, var(--card-2) 50%, var(--card) 60%) 0 0 / 200% 100%; animation: ig-shimmer 1.2s linear infinite; }
@keyframes ig-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ig-loading { animation: none; } }
.ig-badge { position: absolute; top: 8px; right: 8px; z-index: 1; background: rgba(0,0,0,.7); color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 3px 6px; border-radius: 4px; }

/* ================= Světlý režim ================= */
:root[data-theme="light"] {
  --bg: #f2f2f4; --bg-alt: #e8e8eb; --card: #ffffff; --card-2: #ececef;
  --ink: #141416; --muted: #5d5d66; --line: #d6d6dc;
  --orange: #c2620a; --win: #15803d; --loss: #dc2626;
  --grain: none;
  color-scheme: light;
}
:root { color-scheme: dark; }
:root[data-theme="light"] .data-table tr.us { background: linear-gradient(90deg, rgba(220,38,38,.14), rgba(220,38,38,.03)); }
:root[data-theme="light"] .player .cap { color: #fff; }
:root[data-theme="light"] .site-footer { color: #a1a1aa; }

/* ================= Hlavička: vyšší, přepínač režimu ================= */
.brand img { height: 56px; }
.brand { font-size: 30px; }
.nav { gap: 22px; margin-left: auto; }
.nav a { font-size: 14px; padding: 8px 0; }
.theme-toggle { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #333; background: transparent; color: #e4e4e7; cursor: pointer; }
.theme-toggle:hover { color: var(--orange); border-color: var(--orange); }
.theme-toggle:focus-visible, .nav a:focus-visible, .chip:focus-visible, .btn:focus-visible, .hero-dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 1100px) { .nav { gap: 14px; } .nav a { font-size: 12px; } }
@media (max-width: 960px) {
  .nav-toggle { display: block; order: 3; }
  .theme-toggle { order: 2; margin-left: auto; }
  .nav { position: absolute; top: 84px; left: 0; right: 0; background: #000; flex-direction: column; align-items: stretch; gap: 0; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); display: none; border-bottom: 2px solid var(--red); margin: 0; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid #222; font-size: 14px; }
}

/* ================= Patička: jen logo + © ================= */
.site-footer .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; grid-template-columns: none; }
.site-footer .footer-inner img { height: 64px; width: auto; }
.site-footer p { margin: 0; color: #a1a1aa; }

/* ================= Úvod ================= */
.hero { min-height: 0; }
.hero-slide { position: relative; isolation: isolate; }
.hero-slide .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 28%; z-index: -2; }
.hero-slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.3) 100%), linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 40%); }
.hero-content { padding: 120px 0 84px; color: #fff; }
.hero-content .eyebrow { color: #fff; }
.hero-content .btn-ghost { border-color: #fff; color: #fff; }
.hero-content .btn-ghost:hover { background: #fff; color: #000; }
.hero-duel { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.hd-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: #e4e4e7; font-family: var(--font-head); text-transform: uppercase; font-size: clamp(16px, 2vw, 22px); min-width: 110px; text-align: center; }
.hd-team.us { color: var(--red); }
.hd-logo { width: clamp(72px, 9vw, 120px); height: clamp(72px, 9vw, 120px); object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)); }
.hero-title { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 7vw, 88px); line-height: .95; margin: 0; color: #fff; max-width: 16ch; text-wrap: balance; }
.hero-lead { color: #d4d4d8; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; gap: 8px; }
.hero-dot { width: 34px; height: 5px; border: 0; border-radius: 3px; background: rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.hero-dot[aria-current="true"] { background: var(--red); }
.home-next { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
.home-next .next-match { text-align: left; padding: 22px 24px; }
.home-next .duel { margin: 16px 0; }
.home-next .duel-logo { width: 84px; height: 84px; }
.home-next .side-team { font-size: 18px; }
.nm-when { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.nm-when b { font-size: 16px; }
.nm-when span { color: var(--muted); font-size: 14px; }
.home-next .countdown { margin: 14px 0 16px; }
.home-next .next-match .more-link { display: block; text-align: center; }
.section-head.small { margin-bottom: 12px; align-items: center; }
.section-head.small .group-title { margin: 0; }
.up-list, .res-list { display: grid; gap: 8px; }
.up-item { display: grid; grid-template-columns: 92px 40px 1fr auto; align-items: center; gap: 12px; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.up-item:hover, .res-item:hover { border-color: var(--orange); }
.up-date { font-size: 13px; color: var(--muted); line-height: 1.3; }
.up-date b { display: block; color: var(--ink); font-size: 16px; }
.up-logo { width: 40px; height: 40px; object-fit: contain; }
.up-team { font-weight: 800; text-transform: uppercase; font-size: 14px; }
.home-league { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.data-table.mini td, .data-table.mini th { padding: 10px 12px; }
.res-item { display: grid; grid-template-columns: 52px 1fr auto 1fr; align-items: center; gap: 10px; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; }
.res-date { color: var(--muted); font-size: 13px; }
.res-team { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.res-team.away { justify-content: flex-end; text-align: right; }
.res-team .tlogo { width: 28px; height: 28px; }
.res-score { font-family: var(--font-head); font-size: 20px; }

/* ================= Zápasy ================= */
.match[data-href] { cursor: pointer; }
.match[data-href]:hover { border-color: var(--orange); }
.match .date .postponed { display: block; color: var(--orange); font-weight: 700; font-size: 12px; }
.detail-link { color: var(--orange); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; text-decoration: none; }
.detail-link:hover { text-decoration: underline; }
.match-toolbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.match-toolbar .filters { margin: 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cal-title { margin: 0; text-transform: capitalize; }
.chip[disabled] { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; padding: 4px 0; }
.cal-cell { min-height: 104px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cal-cell.empty { background: transparent; border-color: transparent; }
.cal-cell.today { border-color: var(--orange); }
.cal-day { font-size: 12px; color: var(--muted); font-weight: 700; }
.cal-match { display: flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; background: var(--card-2); border-radius: 6px; padding: 6px; min-width: 0; }
.cal-match:hover { outline: 1px solid var(--orange); }
.cal-match.win small { color: var(--win); font-weight: 800; }
.cal-match.loss small { color: var(--loss); font-weight: 800; }
.cal-logo { width: 26px; height: 26px; object-fit: contain; flex: none; }
.cal-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cal-text b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-text small { font-size: 12px; color: var(--muted); }
@media (max-width: 700px) {
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 64px; padding: 3px; }
  .cal-text { display: none; }
  .cal-match { justify-content: center; padding: 3px; }
  .cal-logo { width: 24px; height: 24px; }
}

/* Detail zápasu */
.md-head { text-align: center; padding: 8px 0 12px; }
.md-head .eyebrow::after { margin-inline: auto; }
.md-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: 18px 0; }
.md-team { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--font-head); text-transform: uppercase; font-size: clamp(18px, 3vw, 30px); }
.md-team.us { color: var(--red); }
.md-logo { width: clamp(80px, 14vw, 150px); height: clamp(80px, 14vw, 150px); object-fit: contain; }
.md-num { font-family: var(--font-head); font-size: clamp(56px, 11vw, 120px); line-height: 1; }
.md-num i { font-style: normal; color: var(--red); margin: 0 6px; }
.md-vs { font-family: var(--font-brush); color: var(--muted); font-size: 40px; }
.md-meta { color: var(--muted); display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.md-report { max-width: 68ch; margin: 24px auto 0; font-size: 17px; }
.md-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.md-photo { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; }
.md-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ================= Statistiky ================= */
.sub-title.first { margin-top: 0; }
.leaders-photo { grid-template-columns: repeat(4, 1fr); }
.leader-photo { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 12px; text-decoration: none; color: inherit; }
.leader-photo:hover { border-color: var(--orange); }
.leader-photo img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; }
.leader-photo .val { font-size: 40px; margin: 4px 0 2px; color: var(--orange); }
.leader-photo .who { font-weight: 800; }
.leader-photo .sub { color: var(--muted); font-size: 13px; }
.live-tag { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; background: var(--orange); color: #000; padding: 3px 7px; border-radius: 4px; vertical-align: middle; }
@media (max-width: 1000px) { .leaders-photo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .leaders-photo { grid-template-columns: 1fr; } }

/* ================= Historie ================= */
.history-intro { margin-bottom: 12px; }
.history-intro .sub-title { margin-top: 0; }
.hi-lead { font-size: 20px; line-height: 1.55; max-width: 62ch; margin: 0 0 28px; }
.hi-ch { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; padding: 26px 0; border-top: 1px solid var(--line); }
.hi-ch.no-img { grid-template-columns: 1fr; }
.hi-ch.no-img p { max-width: none; }
.hi-ch h3 { font-family: var(--font-head); font-weight: 400; font-size: 30px; text-transform: uppercase; margin: 2px 0 10px; }
.hi-period { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); }
.hi-ch p { font-size: 17px; max-width: 64ch; line-height: 1.65; margin: 0 0 14px; }
.hi-figs { display: grid; gap: 14px; }
.hi-figs.two { grid-template-columns: 1fr 1fr; }
.hi-fig { margin: 0; }
.hi-fig .hi-img { aspect-ratio: 4/3; }
.hi-fig.round { max-width: 280px; justify-self: center; text-align: center; }
.hi-fig.round .hi-img { aspect-ratio: 1; border-radius: 50%; transform: rotate(-8deg); box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.hi-fig figcaption { margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.hi-img { width: 100%; border-radius: var(--radius); aspect-ratio: 3/2; object-fit: cover; }
.tl-body { min-width: 0; }
.tl-facts { color: var(--orange) !important; font-weight: 700; font-size: 14px; margin-top: 6px !important; }
.tl-img { width: min(100%, 460px); border-radius: 8px; margin-top: 12px; aspect-ratio: 3/2; object-fit: cover; }
.timeline .year { font-size: 26px; }
.placements { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; align-items: end; }
.pl-col { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pl-place { font-family: var(--font-head); font-size: 30px; color: var(--ink); }
.pl-bar { width: 100%; max-width: 72px; height: 140px; position: relative; background: var(--card-2); border-radius: 6px; overflow: hidden; }
.pl-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); background: linear-gradient(0deg, var(--red), var(--orange)); }
.pl-season { font-weight: 800; }
.pl-league { color: var(--muted); font-size: 12px; }

/* ================= Kontakt ================= */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.contact-card strong { font-size: 18px; word-break: break-word; }
.selectable { user-select: all; }

@media (max-width: 900px) {
  .home-next, .home-league, .history-intro, .hi-ch { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero-content { padding: 90px 0 70px; }
  .hd-team { min-width: 0; }
  .hero-duel { gap: 10px 14px; }
  .up-item { grid-template-columns: 74px 32px 1fr; }
  .up-item .badge { display: none; }
  .res-item { grid-template-columns: 1fr auto 1fr; }
  .res-date { display: none; }
}
.home-next > *, .home-league > *, .history-intro > *, .hi-ch > * { min-width: 0; }
.timeline::before { left: 104px; }
.timeline li { grid-template-columns: 104px 1fr; }
.timeline li::after { left: 98px; }
@media (max-width: 760px) {
  .timeline::before { left: 76px; }
  .timeline li { grid-template-columns: 76px 1fr; gap: 24px; }
  .timeline li::after { left: 70px; }
  .timeline .year { font-size: 19px; }
  .data-table.mini th:nth-child(3), .data-table.mini td:nth-child(3) { display: none; }
}

/* ================= v8: horní proužek, logo, světlá hlavička ================= */
.site-header { --hdr: 80px; }
.topbar { background: #050505; border-bottom: 1px solid #1c1c1f; }
.topbar-inner { display: flex; justify-content: flex-end; gap: 22px; height: 34px; align-items: center; }
.topbar a { color: #a1a1aa; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.topbar a:hover { color: var(--orange); }
.header-inner { height: var(--hdr); position: relative; }
.brand { position: relative; align-self: flex-start; height: var(--hdr); display: flex; align-items: flex-start; padding-top: 8px; z-index: 2; }
.brand-emblem { height: 104px !important; width: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.brand .brand-wordmark { display: none; height: 58px; width: auto; align-self: center; margin-top: -8px; }
.nav { margin-left: auto; }
@media (max-width: 960px) {
  .site-header { --hdr: 68px; }
  .brand-emblem { height: 82px !important; }
  .nav { top: calc(var(--hdr) + 34px); }
  .topbar-inner { justify-content: center; gap: 16px; }
}
/* Světlý režim: světlá hlavička + wordmark */
:root[data-theme="light"] .site-header { background: rgba(255,255,255,.95); border-bottom-color: var(--red); }
:root[data-theme="light"] .topbar { background: #ececef; border-bottom-color: var(--line); }
:root[data-theme="light"] .topbar a { color: #3f3f46; }
:root[data-theme="light"] .nav a { color: #27272a; }
:root[data-theme="light"] .nav a[aria-current="page"] { color: #000; }
:root[data-theme="light"] .theme-toggle { color: #27272a; border-color: var(--line); }
:root[data-theme="light"] .nav-toggle { color: #27272a; }
:root[data-theme="light"] .brand { padding-top: 0; align-self: center; height: auto; }
:root[data-theme="light"] .brand-emblem { display: none; }
:root[data-theme="light"] .brand .brand-wordmark { display: block; margin: 0; }
@media (max-width: 960px) { :root[data-theme="light"] .nav { background: #fff; } :root[data-theme="light"] .nav a { border-bottom-color: var(--line); } }

/* ================= v8: hero – stejná výška, panel vlevo, barevný obrázek vpravo ================= */
.hero-slide { height: clamp(460px, 56vh, 560px); display: flex; align-items: center; overflow: hidden; background: #050505; }
.hero-slide .hero-photo { left: 38%; width: 62%; object-position: 50% 30%; filter: none; }
.hero-slide::after { background: linear-gradient(90deg, #050505 0%, #050505 36%, rgba(5,5,5,.75) 46%, rgba(5,5,5,.2) 62%, rgba(5,5,5,0) 78%); }
.hero-slide.news .hero-photo.gray { filter: grayscale(1) brightness(.85); z-index: -3; }
.hero-slide.news .hero-photo.color { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 25%, #000 75%); mask-image: linear-gradient(90deg, transparent 0%, transparent 25%, #000 75%); }
.hero-content { padding: 0; width: min(1180px, 100% - 32px); }
.hero-content > * { max-width: 560px; }
.hero-actions { margin-top: 28px; }
.hero-news-logo { width: 64px; height: auto; margin-bottom: 14px; }
.hero-slide.news .hero-title { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.12; max-width: 14ch; }
.hero-slide.news .hero-lead { font-size: 16px; line-height: 1.6; margin-top: 14px; max-width: 42ch; }
.hero-dots { bottom: 22px; }
@media (max-width: 760px) {
  .hero-slide { height: 520px; align-items: flex-end; padding-bottom: 64px; }
  .hero-slide .hero-photo { left: 0; width: 100%; }
  .hero-slide::after { background: linear-gradient(0deg, #050505 0%, #050505 42%, rgba(5,5,5,.7) 62%, rgba(5,5,5,.15) 100%); }
}

/* ================= v8: karta příštího zápasu (kompaktní) ================= */
.nm-card { text-align: left; padding: 0; overflow: hidden; }
.nm-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; text-decoration: none; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line); }
.nm-top:hover { color: var(--ink); }
.nm-pill { border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); }
.nm-team { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 12px 18px; text-decoration: none; color: var(--ink); }
.nm-team:hover b { color: var(--orange); }
.nm-team b { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 24px; letter-spacing: .3px; }
.nm-team.us b { color: var(--red); }
.nm-team span { color: var(--muted); font-size: 14px; }
.nm-logo { width: 44px; height: 44px; object-fit: contain; }
.nm-venue { margin: 4px 18px 0; color: var(--muted); font-size: 13px; }
.nm-card .countdown { justify-content: flex-start; margin: 14px 18px 18px; }
@media (min-width: 901px) { .home-next { grid-template-columns: 1fr 1fr; } }

/* ================= v8: kontakt s mapou ================= */
.contact-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.contact-map { display: grid; grid-template-columns: 2fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.contact-map iframe { width: 100%; height: 380px; border: 0; display: block; }
.map-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px; justify-content: center; }
.map-caption strong { font-size: 18px; }
.map-caption span { color: var(--muted); }
@media (max-width: 760px) { .contact-map { grid-template-columns: 1fr; } .contact-map iframe { height: 280px; } }
.hero-content > .hero-duel { max-width: none; flex-wrap: nowrap; }
.hero-slide { padding-top: 24px; }
.hero-slide .hd-logo { width: clamp(64px, 7vw, 104px); height: clamp(64px, 7vw, 104px); }
.hero-slide .hs-num { font-size: clamp(64px, 9vw, 128px); }
.home-next .nm-card { padding: 0; text-align: left; }
@media (max-width: 760px) { .hero-slide { padding-top: 0; } .hero-slide .hs-num { font-size: 60px; } .hero-content > .hero-duel { gap: 10px; } }
.hero-slide::after { background: linear-gradient(90deg, #050505 0%, #050505 40%, rgba(5,5,5,.8) 47%, rgba(5,5,5,.35) 60%, rgba(5,5,5,0) 76%); }
.hero-slide.news .hero-title { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.2; letter-spacing: .3px; max-width: 20ch; }
.hero-slide.news .hero-lead { line-height: 1.7; }
@media (max-width: 760px) { .hero-slide::after { background: linear-gradient(0deg, #050505 0%, #050505 42%, rgba(5,5,5,.7) 62%, rgba(5,5,5,.15) 100%); } }

/* Světlý režim: wordmark přes oba pruhy, šedý horní proužek doleva přechází do bílé */
:root[data-theme="light"] .site-header { background: #fff; }
:root[data-theme="light"] .topbar { background: linear-gradient(90deg, #fff 0%, #fff 32%, #ececef 72%); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, rgba(214,214,220,0) 30%, var(--line) 72%) 1; }
:root[data-theme="light"] .brand { position: absolute; top: -34px; left: 0; height: calc(var(--hdr) + 34px); display: flex; align-items: center; padding: 0; }
:root[data-theme="light"] .brand .brand-wordmark { height: calc(var(--hdr) + 34px - 22px); width: auto; }
:root[data-theme="light"] .header-inner { justify-content: flex-end; }
:root[data-theme="light"] .topbar-inner { padding-left: 260px; }
@media (max-width: 960px) { :root[data-theme="light"] .topbar-inner { padding-left: 0; justify-content: flex-end; } }
@media (max-width: 480px) { :root[data-theme="light"] .topbar-inner { gap: 12px; } :root[data-theme="light"] .topbar a { font-size: 11px; } :root[data-theme="light"] .brand .brand-wordmark { height: 64px; } }
@media (max-width: 640px) {
  :root[data-theme="light"] .brand { top: 0; height: var(--hdr); }
  :root[data-theme="light"] .brand .brand-wordmark { height: 52px; }
  :root[data-theme="light"] .topbar-inner { justify-content: center; }
  :root[data-theme="light"] .topbar { background: #ececef; border-image: none; border-bottom: 1px solid var(--line); }
}
/* Instagram: formát 4:5 jako na Instagramu */
.ig-grid { grid-template-columns: repeat(var(--ig-cols, 6), 1fr); gap: 10px; }
.ig-tile { aspect-ratio: 4 / 5; }
.ig-tile img { object-position: 50% 30%; }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } .ig-tile:nth-child(5):last-child { grid-column: span 2; aspect-ratio: 8 / 5; } }

/* Světlý režim (klasická hlavička): menší wordmark */
:root[data-theme="light"] .brand .brand-wordmark { height: 64px; }
@media (max-width: 640px) { :root[data-theme="light"] .brand .brand-wordmark { height: 44px; } }

/* ================= Varianta hlavičky: logo uprostřed ================= */
.hdr-center .hc-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 84px; gap: 24px; position: relative; }
.hc-nav { display: flex; align-items: center; gap: 26px; }
.hc-left { justify-content: flex-end; }
.hc-right { justify-content: flex-start; }
.hc-right .theme-toggle { margin-left: auto; }
.hc-nav a { text-decoration: none; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #d4d4d8; padding: 8px 0; }
.hc-nav a:hover { color: var(--orange); }
.hc-nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--red); }
.hc-brand { align-self: start; padding-top: 8px; position: relative; z-index: 2; }
.hc-brand img { height: 118px; width: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); }
.hdr-center .nav-toggle, .hdr-center .hc-mobile { display: none; }
:root[data-theme="light"] .hdr-center { background: #fff; }
:root[data-theme="light"] .hc-nav a { color: #27272a; }
:root[data-theme="light"] .hc-nav a[aria-current="page"] { color: #000; }
:root[data-theme="light"] .hc-brand img { filter: drop-shadow(0 6px 12px rgba(0,0,0,.25)); }
@media (max-width: 1100px) { .hc-nav { gap: 16px; } .hc-nav a { font-size: 12px; } }
@media (max-width: 960px) {
  .hdr-center .hc-inner { grid-template-columns: 1fr auto 1fr; height: 68px; }
  .hc-left { display: none; }
  .hc-right { grid-column: 1; grid-row: 1; justify-content: flex-start; }
  .hc-right a { display: none; }
  .hc-right .theme-toggle { margin-left: 0; }
  .hc-brand { grid-column: 2; grid-row: 1; }
  .hc-brand img { height: 86px; }
  .hdr-center .nav-toggle { display: block; grid-column: 3; grid-row: 1; justify-self: end; }
  .hdr-center .hc-mobile { position: absolute; top: 68px; left: 0; right: 0; background: #000; flex-direction: column; padding: 30px 16px 16px; border-bottom: 2px solid var(--red); }
  .hdr-center .hc-mobile.open { display: flex; }
  .hdr-center .hc-mobile a { padding: 14px 0; border-bottom: 1px solid #222; }
  :root[data-theme="light"] .hdr-center .hc-mobile { background: #fff; }
}
.hero-slide .hd-team { min-width: 0; }
.hero-slide .hd-logo { width: clamp(80px, 9vw, 132px); height: clamp(80px, 9vw, 132px); }
/* Erb Rebels má nad štítem korbel – zvětšíme ho, aby štít odpovídal velikosti loga soupeře */
.hd-logo[src$="teams/rebels.png"], .md-logo[src$="teams/rebels.png"] { transform: scale(1.12); transform-origin: 50% 60%; }

/* ================= Jednotná hlavička pro tmavý i světlý režim =================
   Wordmark přes oba pruhy, horní proužek doleva přechází do barvy hlavičky. Režimy se liší jen barvami. */
.site-header { background: #0b0b0b; }
.topbar { background: linear-gradient(90deg, #0b0b0b 0%, #0b0b0b 32%, #1c1c1f 72%); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, rgba(46,46,49,0) 30%, #2e2e31 72%) 1; }
.brand { position: absolute; top: -34px; left: 0; height: calc(var(--hdr) + 34px); display: flex; align-items: center; padding: 0; align-self: auto; }
.brand-emblem { display: none; }
.brand .brand-wordmark { display: block; margin: 0; height: 64px; width: auto; }
.header-inner { justify-content: flex-end; }
.topbar-inner { padding-left: 260px; }
@media (max-width: 960px) { .topbar-inner { padding-left: 0; justify-content: flex-end; } }
@media (max-width: 640px) {
  .brand { top: 0; height: var(--hdr); }
  .brand .brand-wordmark { height: 44px; }
  .topbar-inner { justify-content: center; }
  .topbar { background: #1c1c1f; border-image: none; border-bottom: 1px solid #2e2e31; }
  :root[data-theme="light"] .topbar { background: #ececef; border-bottom-color: var(--line); }
}
:root[data-theme="light"] .site-header { background: #fff; }

/* Bez horního proužku: wordmark jen v hlavním pruhu */
.brand { top: 0; height: var(--hdr); }
.brand .brand-wordmark { height: 60px; }
@media (max-width: 960px) { .nav { top: var(--hdr); } }
@media (max-width: 640px) { .brand .brand-wordmark { height: 44px; } }
@media (max-width: 960px) { .nav { left: -16px; right: -16px; } }

/* Logo v hlavičce: svisle na střed, nic neořezané */
.brand, :root[data-theme="light"] .brand { position: absolute; top: 0; left: 0; height: var(--hdr); display: flex; align-items: center; padding: 0; }
.brand .brand-wordmark, :root[data-theme="light"] .brand .brand-wordmark { height: 56px; width: auto; margin: 0; }
@media (max-width: 640px) { .brand .brand-wordmark, :root[data-theme="light"] .brand .brand-wordmark { height: 42px; } }

/* Zápasy: štítek Doma/Venku a odkaz na detail vedle sebe */
.match .side { flex-direction: row; align-items: center; gap: 12px; }
@media (min-width: 761px) { .match { grid-template-columns: 140px 1fr auto 1fr 190px; } }

/* Patička */
.site-footer .footer-inner { display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap; }
.footer-logo img { height: 64px; width: auto; }
.footer-copy { margin: 0; color: #a1a1aa; }
.footer-legal { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { color: #d4d4d8; text-decoration: none; font-weight: 600; font-size: 14px; }
.footer-legal a:hover { color: var(--orange); }
@media (max-width: 640px) { .footer-legal { margin-left: 0; width: 100%; } }

/* Právní stránky */
.legal { max-width: 70ch; }
.legal h2 { font-size: 20px; margin: 28px 0 8px; }
.legal p, .legal li { color: var(--ink); line-height: 1.65; }
.legal .note { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; color: var(--muted); }

/* Ocenění: fotky hráčů */
.trophy { grid-template-columns: 64px 1fr auto; column-gap: 14px; padding: 10px 0; }
.trophy .ico { position: relative; width: 64px; height: 56px; display: flex; align-items: center; }
.tro-faces { display: flex; }
.tro-faces img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--card); background: var(--card-2); flex: none; }
.tro-faces img + img { margin-left: -30px; }
.tro-faces img:only-child { width: 56px; height: 56px; }
.tro-badge { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: 13px; box-shadow: 0 0 0 1px var(--line); }
.trophy-card.all .tro-faces img { border-color: var(--card); }
.tro-faces .face { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--card); background-color: var(--card-2); background-size: 190%; background-position: 54% 22%; background-repeat: no-repeat; flex: none; }
.tro-faces .face + .face { margin-left: -28px; }
.tro-faces .face:only-child { width: 56px; height: 56px; }
.tro-faces .face[style*="silhouette"] { background-size: cover; background-position: center; }
/* Box score: obličeje hráčů */
.bs-player { display: inline-flex; align-items: center; gap: 12px; }
.bs-face { width: 40px; height: 40px; border-radius: 50%; flex: none; background-color: var(--card-2); background-size: 190%; background-position: 54% 22%; background-repeat: no-repeat; border: 2px solid var(--line); }
.bs-face[style*="silhouette"] { background-size: cover; background-position: center; }
.home-stats-section { padding-top: 0; }
.home-stats-section .hint { margin: 4px 0 0; }
/* Úvod: statistiky sezóny – lídr s fotkou + další tři */
.home-stats-section { padding-top: 64px; }
#home-stats { align-items: start; }
.hs-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hs-card .leader { border: 0; border-radius: 0; background: transparent; }
.hs-rest { list-style: none; counter-reset: r 1; margin: 0; padding: 4px 14px 10px; border-top: 1px solid var(--line); }
.hs-rest li { counter-increment: r; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 7px 0; font-size: 14px; }
.hs-rest li + li { border-top: 1px solid var(--line); }
.hs-rest li::before { content: counter(r) "."; color: var(--muted); font-size: 12px; font-weight: 700; }
.hs-rest a { color: var(--ink); text-decoration: none; font-weight: 600; }
.hs-rest a:hover { color: var(--orange); }
.hs-rest b { font-variant-numeric: tabular-nums; }
.history-intro { margin-top: 8px; }
.tab-panel .placements { margin-top: 12px; }
/* Ocenění: loga trofejí */
.trophy { grid-template-columns: 76px 60px 1fr auto; grid-template-areas: "logo ico cat val" "logo ico who val"; column-gap: 12px; }
.tro-logo { grid-area: logo; width: 76px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.trophy .ico { width: 60px; }
.award-pill .pill-logo { width: 52px; height: 52px; object-fit: contain; }
@media (max-width: 420px) { .trophy { grid-template-columns: 60px 56px 1fr auto; } .tro-logo { width: 60px; height: 58px; } }
.trophy { grid-template-areas: "logo ico who val"; }
.trophy .cat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.trophy .who { font-size: 16px; }

/* ================= Ocenění: sezóna = jeden řádek ================= */
#trophies.trophies { display: flex; flex-direction: column; gap: 18px; }
.season-awards { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px 24px; }
.sa-title { font-family: var(--font-head); font-weight: 400; font-size: 32px; margin: 0 0 14px; line-height: 1; }
.sa-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sa-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.sa-logo { width: 100%; max-width: 190px; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)); }
.sa-winner { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sa-winner .tro-faces .face { width: 44px; height: 44px; }
.sa-winner .tro-faces .face + .face { margin-left: -22px; }
.sa-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.2; }
.sa-name { font-weight: 800; font-size: 16px; }
.sa-val { font-family: var(--font-head); font-size: 22px; color: var(--orange); }
@media (max-width: 760px) {
  .sa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .season-awards { padding: 16px; }
  .sa-logo { max-width: 150px; }
  .sa-winner { flex-direction: column; gap: 6px; }
  .sa-text { align-items: center; text-align: center; }
}
/* Novinka s grafikou: obrázek celý barevný, bez ořezu log */
.hero-slide.full-color .hero-photo.gray { display: none; }
.hero-slide.full-color .hero-photo.color { -webkit-mask-image: none; mask-image: none; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 761px) { .hero-slide.full-color .hero-photo { left: 40%; width: 60%; } }
@media (min-width: 761px) {
  .hero-slide.full-color .hero-photo { left: 42%; width: 58%; }
  .hero-slide.full-color::after { background: linear-gradient(90deg, #050505 0%, #050505 40%, rgba(5,5,5,.6) 43%, rgba(5,5,5,0) 48%); }
}

/* ================= Hero: tmavé pozadí v barvě obrázku =================
   --hbg (R,G,B) se dopočítá z levé části obrázku (pages.js), výchozí je téměř černá. */
.hero-slide { --hbg: 5, 5, 5; background: rgb(var(--hbg)); transition: background-color .6s; }
.hero-slide::after,
.hero-slide.full-color::after {
  background:
    radial-gradient(ellipse 60% 90% at 0% 50%, rgba(var(--hbg), 1) 0%, rgba(var(--hbg), 0) 70%),
    linear-gradient(90deg, rgb(var(--hbg)) 0%, rgb(var(--hbg)) 38%, rgba(var(--hbg), .78) 46%, rgba(var(--hbg), .3) 60%, rgba(var(--hbg), 0) 76%);
}
@media (min-width: 761px) {
  .hero-slide.full-color::after { background: linear-gradient(90deg, rgb(var(--hbg)) 0%, rgb(var(--hbg)) 40%, rgba(var(--hbg), .6) 43%, rgba(var(--hbg), 0) 49%); }
}
@media (max-width: 760px) {
  .hero-slide::after, .hero-slide.full-color::after { background: linear-gradient(0deg, rgb(var(--hbg)) 0%, rgb(var(--hbg)) 42%, rgba(var(--hbg), .7) 62%, rgba(var(--hbg), .15) 100%); }
}

/* Hero: plynulý přechod panelu do obrázku – okraj obrázku se rozplyne do pozadí, žádná ostrá hrana */
@media (min-width: 761px) {
  .hero-slide .hero-photo { left: 30%; width: 70%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
  .hero-slide.news .hero-photo.color { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, #000 75%); mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, #000 75%); }
  .hero-slide.full-color .hero-photo, .hero-slide.full-color .hero-photo.color { left: 34%; width: 66%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
  .hero-slide::after, .hero-slide.full-color::after { background: linear-gradient(90deg, rgb(var(--hbg)) 0%, rgb(var(--hbg)) 30%, rgba(var(--hbg), 0) 52%); }
}
@media (min-width: 761px) { .hero-slide.full-color .hero-photo, .hero-slide.full-color .hero-photo.color { left: 40%; width: 60%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 25%); mask-image: linear-gradient(90deg, transparent 0%, #000 25%); } }

/* ================= Pás se zápasy pod hero ================= */
.sched-strip { position: relative; background: #141416; border-bottom: 1px solid var(--line); }
:root[data-theme="light"] .sched-strip { background: #fff; }
.ss-track { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 0 40px; }
.ss-track::-webkit-scrollbar { display: none; }
.ss-card { flex: 0 0 240px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 0; border-right: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 150px; }
.ss-card:hover { background: var(--card); }
.ss-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 700; }
.ss-pill { border: 1.5px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); white-space: nowrap; }
.ss-pill.final.win { background: var(--win); border-color: var(--win); color: #fff; }
.ss-pill.final.loss { background: var(--loss); border-color: var(--loss); color: #fff; }
.ss-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.ss-row b { text-transform: uppercase; font-size: 13px; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-row.us b { color: var(--red); }
.ss-logo { width: 26px; height: 26px; object-fit: contain; }
.ss-score { font-family: var(--font-head); font-size: 20px; color: var(--muted); }
.ss-score.won { color: var(--ink); }
.ss-rec { color: var(--muted); font-size: 12px; }
.ss-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 10px 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--orange); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-card.featured { flex-basis: 380px; background: linear-gradient(180deg, rgba(220,38,38,.18), rgba(220,38,38,0) 70%), var(--card); align-items: center; position: relative; }
.ss-card.featured .ss-pill { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); }
.ss-feat { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; width: 100%; margin-top: 26px; }
.ss-ft { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ss-ft b { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 15px; line-height: 1.1; }
.ss-flogo { width: 52px; height: 52px; object-fit: contain; }
.ss-when { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.25; }
.ss-when small { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--red); font-weight: 800; }
.ss-when strong { font-size: 16px; }
.ss-when span { color: var(--muted); font-size: 13px; }
.ss-card.featured .ss-foot { width: 100%; color: var(--muted); }
.ss-all { flex-basis: 150px; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 14px; }
.ss-all:hover { color: var(--orange); }
.ss-arrow { position: absolute; top: 0; bottom: 0; width: 36px; z-index: 2; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 26px; cursor: pointer; }
.ss-arrow.prev { left: 0; } .ss-arrow.next { right: 0; }
.ss-arrow:hover { background: var(--red); }
:root[data-theme="light"] .ss-arrow { background: rgba(255,255,255,.85); color: #111; }
:root[data-theme="light"] .ss-arrow:hover { background: var(--red); color: #fff; }
@media (max-width: 640px) { .ss-arrow { display: none; } .ss-track { padding: 0; } .ss-card { flex-basis: 220px; } .ss-card.featured { flex-basis: 300px; } }
.ss-foot { color: var(--muted); }
.ss-foot.cta { color: var(--orange); }
.ss-track { scroll-padding-left: 40px; }
@media (max-width: 640px) { .ss-track { scroll-padding-left: 0; } }
.hero-slide .hd-logo-us { transform: scale(1.12); transform-origin: 50% 60%; }
.sa-logo[src*="prasak"] { transform: scale(1.2); }

/* ================= Hero varianta: fotka přes celou šířku + záložky ================= */
.hero-fb { position: relative; height: clamp(560px, 78vh, 760px); background: #000; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-fb #hero-slides { position: absolute; inset: 0; }
.fb-slide { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: 210px; }
.fb-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; z-index: 0; animation: fb-zoom 9s ease-out both; }
.fb-slide.contain .fb-photo { object-fit: cover; object-position: 50% 50%; }
@keyframes fb-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.fb-slide::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.7) 32%, rgba(0,0,0,.15) 65%, rgba(0,0,0,.25) 100%); }
.fb-content { position: relative; z-index: 2; color: #fff; }
.fb-content .eyebrow { color: #e4e4e7; }
.fb-content .eyebrow::after { display: none; }
.fb-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; color: #fff; text-decoration: none; font-family: var(--font-head); text-transform: uppercase; font-size: clamp(36px, 5.4vw, 76px); line-height: 1.02; max-width: 22ch; text-wrap: balance; }
.fb-title i { font-style: normal; color: var(--red); }
.fb-logo { width: clamp(52px, 6vw, 84px); height: clamp(52px, 6vw, 84px); object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.fb-arrow { font-family: var(--font-body); font-size: .6em; transition: transform .2s; }
.fb-title:hover .fb-arrow { transform: translateX(8px); }
.fb-title:hover span:not(.fb-arrow) { color: #fff; }
.fb-tabs { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-bottom: 34px; }
.fb-tab { background: none; border: 0; padding: 0; text-align: left; color: #a1a1aa; cursor: pointer; display: flex; flex-direction: column; gap: 14px; font: inherit; }
.fb-tab-title { font-weight: 700; font-size: 16px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.05em; }
.fb-tab[aria-current="true"] { color: #fff; }
.fb-tab:hover { color: #fff; }
.fb-bar { display: block; height: 3px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.fb-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--red); }
.fb-tab[aria-current="true"] .fb-bar { background: #fff; }
.fb-tab[aria-current="true"] .fb-bar i { animation: fb-progress 7s linear forwards; }
@keyframes fb-progress { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .fb-photo { animation: none; } .fb-tab[aria-current="true"] .fb-bar i { animation: none; width: 100%; } }
.fb-meta { font-size: 13px; text-transform: lowercase; }
.fb-meta b { font-size: 10px; margin: 0 4px; vertical-align: middle; }
@media (max-width: 900px) { .fb-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .fb-slide { padding-bottom: 280px; } .fb-tab:nth-child(n+3) { display: none; } }
@media (max-width: 560px) {
  .hero-fb { height: 600px; }
  .fb-slide { padding-bottom: 170px; }
  .fb-tabs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .fb-tab:nth-child(n+3) { display: flex; }
  .fb-tab-title, .fb-meta { display: none; }
}
.fb-title { display: block; max-width: 18ch; }
.fb-arrow { display: inline-block; margin-left: .3em; }
.fb-tabs { grid-template-columns: repeat(var(--fb-n, 4), minmax(0, 1fr)); }
@media (max-width: 900px) { .fb-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fb-tabs { grid-template-columns: repeat(var(--fb-n, 4), 1fr); } }

/* Hero fullbleed v2: menší, skóre v tabulce, kategorie */
.hero-fb { height: clamp(480px, 64vh, 620px); }
.fb-slide { padding-bottom: 150px; }
.fb-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: #e4e4e7; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.fb-cat { background: var(--red); color: #fff; padding: 4px 10px; border-radius: 4px; letter-spacing: 1.5px; font-size: 11px; font-weight: 800; }
.fb-title { font-size: clamp(30px, 4vw, 54px); max-width: 20ch; }
.fb-score { display: inline-grid; grid-template-columns: auto auto; column-gap: clamp(28px, 6vw, 90px); row-gap: 2px; vertical-align: middle; }
.fb-row { display: contents; }
.fb-row > span { color: #d4d4d8; }
.fb-row > b { font-weight: 400; color: rgba(255,255,255,.55); text-align: right; font-variant-numeric: tabular-nums; }
.fb-row.us > span { color: #fff; }
.fb-row.won > b { color: var(--orange); }
.fb-title .fb-arrow { vertical-align: bottom; }
.fb-tabs { gap: 20px; padding-bottom: 22px; }
.fb-tab { gap: 10px; }
.fb-tab-title { font-size: 14px; -webkit-line-clamp: 2; min-height: 2.7em; }
.fb-meta { font-size: 12px; }
@media (max-width: 900px) { .fb-slide { padding-bottom: 190px; } }
@media (max-width: 560px) { .hero-fb { height: 520px; } .fb-slide { padding-bottom: 70px; } }
/* Šipka v titulku svisle na střed řádku */
.fb-title .fb-arrow { vertical-align: middle; position: relative; top: -0.12em; line-height: 1; }
.fb-title .fb-score + .fb-arrow { top: 0; }
/* Merch: produktové fotky na světlém pozadí */
.merch-photo { background: #f4f4f4; }
.merch-photo img:not(.merch-placeholder) { object-fit: contain; padding: 6%; }
.merch-photo { overflow: hidden; }
.merch-photo img:not(.merch-placeholder) { box-sizing: border-box; mix-blend-mode: multiply; }
.merch-photo img:not(.merch-placeholder) { mix-blend-mode: normal; padding: 10%; filter: drop-shadow(0 10px 14px rgba(0,0,0,.18)); }
.merch-photo img:not(.merch-placeholder) { position: absolute; inset: 0; width: 100%; height: 100%; }
.match .date .postponed { display: inline; font-size: 12px; white-space: nowrap; }
@media (min-width: 761px) { .match { grid-template-columns: 220px 1fr auto 1fr 190px; } }
/* Hero fullbleed: skóre s logy místo názvů */
.fb-score { column-gap: clamp(18px, 3vw, 36px); row-gap: 8px; align-items: center; }
.fb-tlogo { width: clamp(52px, 5vw, 72px); height: clamp(52px, 5vw, 72px); object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.fb-tlogo.us { transform: scale(1.3); transform-origin: 50% 65%; }
.fb-row > b { line-height: 1; }

/* ================= Ocenění: logo trofeje jednou, pod ním sezóny ================= */
#trophies.trophies { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }
.aw-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 16px 8px; display: flex; flex-direction: column; align-items: center; }
.aw-logo { width: 100%; max-width: 200px; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)); margin-bottom: 10px; }
.aw-logo[src*="prasak"] { transform: scale(1.15); }
.aw-list { list-style: none; margin: 0; padding: 0; width: 100%; }
.aw-list li { display: grid; grid-template-columns: 58px 40px 1fr auto; align-items: center; gap: 8px; padding: 10px 2px; border-top: 1px solid var(--line); }
.aw-season { font-family: var(--font-head); font-size: 16px; color: var(--muted); }
.aw-list .tro-faces .face { width: 36px; height: 36px; }
.aw-list .tro-faces .face + .face { margin-left: -24px; }
.aw-name { font-weight: 700; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.aw-val { font-family: var(--font-head); font-size: 18px; color: var(--orange); white-space: nowrap; }
@media (max-width: 1100px) { #trophies.trophies { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #trophies.trophies { grid-template-columns: 1fr; } .aw-logo { max-width: 170px; } }
.aw-list li { min-height: 57px; }
/* Hover v menu i ve světlém režimu */
:root[data-theme="light"] .nav a:hover,
:root[data-theme="light"] .hc-nav a:hover { color: var(--red); }
:root[data-theme="light"] .theme-toggle:hover, :root[data-theme="light"] .nav-toggle:hover { color: var(--red); border-color: var(--red); }
.nav a { transition: color .15s; }
/* šipka ve výsledku: třetí sloupec, svisle na středu druhého řádku */
.fb-score { grid-template-columns: auto auto auto; }
.fb-score .fb-arrow { top: 0; align-self: center; margin-left: 0; }
.fb-arrow-slot { display: block; }
.bs-player { display: flex; vertical-align: middle; }
.data-table td:has(> .bs-player) { padding-top: 10px; padding-bottom: 10px; }
.fb-title { line-height: 1.17; }
.fb-title .fb-score { line-height: 1.02; }
/* stejná pozice štítku i titulku u všech příspěvků (min. 2 řádky) */
.fb-title { min-height: 2.34em; }
.fb-title .fb-score { row-gap: 0; }
.fb-title .fb-row > * { line-height: 1.17; }
/* aktivní čip (Seznam/Kalendář, sezóny…) – bílý text i ve světlém režimu */
.chip.active, :root[data-theme="light"] .chip.active, .profile-close:hover { color: #fff; }
/* bohatší patička: logo + sloupce odkazů, dole copyright a právní odkazy */
.site-footer { padding: 56px 0 0; }
.site-footer .footer-top { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 32px; align-items: start; padding-bottom: 44px; }
.site-footer .footer-top .footer-logo img { height: 120px; width: auto; }
.footer-col h3 { margin: 0 0 18px; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; font-family: inherit; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site-footer .footer-col a { color: #d4d4d8; font-weight: 500; font-size: 15px; }
.site-footer .footer-col a:hover { color: var(--orange); }
.site-footer .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 20px 0 28px; border-top: 1px solid #27272a; }
.site-footer .footer-bottom .footer-legal { margin-left: auto; }
@media (max-width: 760px) {
  .site-footer .footer-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .site-footer .footer-top .footer-logo { grid-column: 1 / -1; }
  .site-footer .footer-top .footer-logo img { height: 96px; }
  .site-footer .footer-bottom .footer-legal { margin-left: 0; }
}
/* patička ve stylu NBA: sloupce vlevo, logo uprostřed, Sleduj vpravo */
.site-footer { padding-top: 64px; }
.site-footer .footer-top { grid-template-columns: minmax(150px, auto) minmax(150px, auto) 1fr auto; gap: 40px 72px; padding-bottom: 64px; }
.site-footer .footer-top .footer-logo { justify-self: center; }
.site-footer .footer-top .footer-logo img { height: 170px; }
.footer-col h3 { font-size: 18px; letter-spacing: 1px; margin-bottom: 26px; }
.footer-col ul { gap: 14px; }
.site-footer .footer-col a { font-size: 16px; color: #e4e4e7; display: inline-flex; align-items: center; gap: 12px; }
.footer-col a svg { width: 22px; height: 22px; flex: none; color: #fff; }
.site-footer .footer-col a:hover svg { color: var(--orange); }
.footer-follow ul { gap: 18px; }
.site-footer .footer-bottom { display: block; border-top: 0; padding: 0 0 36px; }
.site-footer .footer-bottom .footer-copy { color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.site-footer .footer-bottom .footer-legal { margin: 0; gap: 0; }
.site-footer .footer-bottom .footer-legal a { font-size: 13px; font-weight: 500; color: #e4e4e7; }
.site-footer .footer-bottom .footer-legal a + a::before { content: "|"; margin: 0 10px; color: #71717a; }
@media (max-width: 900px) {
  .site-footer .footer-top { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .site-footer .footer-top .footer-logo { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .site-footer .footer-top .footer-logo img { height: 110px; }
  .site-footer .footer-follow { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .site-footer .footer-bottom .footer-legal { gap: 8px 18px; }
  .site-footer .footer-bottom .footer-legal a + a::before { content: none; }
}
/* logo vlevo */
.site-footer .footer-top { grid-template-columns: auto minmax(150px, auto) minmax(150px, auto) 1fr; gap: 40px 72px; }
.site-footer .footer-top .footer-logo { justify-self: start; margin-right: 24px; }
.site-footer .footer-top .footer-follow { justify-self: end; }
@media (max-width: 900px) {
  .site-footer .footer-top { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .site-footer .footer-top .footer-logo { margin-right: 0; }
  .site-footer .footer-top .footer-follow { justify-self: start; }
}
/* coming soon s fotkou: fotka zůstává vidět, jen štítek */
.merch-item.soon .merch-photo img:not(.merch-placeholder) { opacity: 1; }
.merch-photo .soon-tag { z-index: 1; }
/* patička: grunge textura ve stylu karet hráčů (škrábance, čáry hřiště, reflektory) */
.site-footer { position: relative; overflow: hidden; isolation: isolate; }
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/footer-grunge.webp") center / cover no-repeat;
}
@media (max-width: 900px) { .site-footer::before { background-position: 62% center; opacity: .7; } }
/* nadpisy stránek (h1) – 65 px, na mobilu menší */
.page-title, .profile-title { font-size: clamp(44px, 9vw, 65px); }
/* patička: textura méně výrazná */
.site-footer::before { opacity: .55; }
@media (max-width: 900px) { .site-footer::before { opacity: .4; } }
/* přepínač světlý/tmavý režim – vpravo dole v patičce */
.site-footer .footer-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.site-footer .theme-toggle, :root[data-theme="light"] .site-footer .theme-toggle { color: #e4e4e7; border-color: #3f3f46; }
.site-footer .theme-toggle:hover, :root[data-theme="light"] .site-footer .theme-toggle:hover { color: var(--orange); border-color: var(--orange); }
.site-footer .footer-bottom .theme-toggle { order: 0; margin-left: 0; }
/* Zápasy: přepínač sezón */
.season-chips { margin: 0 0 16px; flex-wrap: wrap; }
.match.past { cursor: default; }
.sub-title small { font-family: var(--font-body); font-size: 14px; letter-spacing: 0; text-transform: none; margin-left: 8px; }
/* řádky zápasů: Rebels bez zvýraznění, skóre vždy v barvě textu */
.match .team.us, .match .team.us a, .match .team.us span { color: var(--ink); }
.match.win .score, .match.loss .score, .match .score { color: var(--ink); }
/* Detail zápasu: preview nadcházejícího zápasu */
.md-preview { margin-top: 8px; }
.md-preview-text { font-size: 17px; line-height: 1.6; max-width: 820px; margin: 0 0 20px; color: var(--ink); }
.md-preview .kpis { margin-bottom: 20px; }
.form-rows { display: grid; gap: 10px; margin-bottom: 8px; }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; }
.form-team { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; min-width: 0; }
.form-logo { width: 28px; height: 28px; object-fit: contain; flex: none; }
.form-dots { display: inline-flex; gap: 6px; flex: none; }
.form-dot { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.form-dot.win { background: #16a34a; }
.form-dot.loss { background: #dc2626; }

/* ================= Vyřazovačka (hra) ================= */
.ko-lead { margin-top: 14px; }
.ko { display: block; }
.ko-canvas-wrap { position: relative; border-radius: var(--radius); overflow: hidden; border: 2px solid #000; background: #161618; }
#ko-canvas { display: block; cursor: pointer; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#ko-canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: calc(100vh - 330px); min-height: 300px; }
.ko-overlay { position: absolute; inset: 0; z-index: 2; display: grid; justify-items: start; align-items: start; padding: 3% 3%; background: linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,0) 55%); }
/* herní menu (pixel styl) */
.ko-menu { --px: 4px; width: min(460px, 100%); padding: 18px 20px 14px; background: rgba(8,8,10,.92); color: #fff; font-family: "Jersey 10", var(--font-body); text-align: center; image-rendering: pixelated;
  box-shadow: 0 calc(-1 * var(--px)) 0 0 #fff, 0 var(--px) 0 0 #fff, calc(-1 * var(--px)) 0 0 0 #fff, var(--px) 0 0 0 #fff, 0 0 0 calc(2 * var(--px)) #000, 8px 10px 0 calc(2 * var(--px)) rgba(0,0,0,.45); }
.ko-menu h2 { margin: 0 0 6px; font-family: inherit; font-weight: 400; font-size: clamp(36px, 4.6vw, 56px); line-height: .9; letter-spacing: 2px; text-transform: uppercase; color: #ef4444; text-shadow: 3px 3px 0 #000, -1px -1px 0 #7f1d1d; }
.ko-menu .ko-msub { margin: 0 0 14px; font-family: "VT323", monospace; font-size: 21px; line-height: 1.05; color: #d4d4d8; }
.ko-menu .ko-msub strong { color: #fde047; }
.ko-mlist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; text-align: left; }
.ko-mrow { display: grid; grid-template-columns: 18px 100px 28px 1fr 28px; align-items: center; padding: 3px 6px; font-size: 26px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #a1a1aa; }
.ko-mrow.sel { color: #fde047; background: rgba(255,255,255,.07); }
.ko-marrow { visibility: hidden; color: #fde047; font-size: 14px; }
.ko-mrow.sel .ko-marrow { visibility: visible; animation: ko-blink .8s steps(2) infinite; }
@keyframes ko-blink { 50% { opacity: 0; } }
.ko-mval { text-align: center; color: #fff; font-weight: 700; }
.ko-mval i { font-style: normal; font-size: 12px; color: #f97316; letter-spacing: 2px; margin-left: 4px; }
.ko-mstep { background: none; border: 0; padding: 0; font: inherit; font-size: 16px; color: inherit; cursor: pointer; line-height: 1; }
.ko-mstep:hover { color: #fff; }
.ko-mstart { grid-template-columns: 1fr; padding: 8px 0 0; background: none !important; }
.ko-mstart button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px; border: 0; background: #dc2626; color: #fff; font: inherit; font-size: 32px; font-weight: 400; text-transform: uppercase; padding: 4px 10px; letter-spacing: 1px; cursor: pointer; box-shadow: inset 0 -4px 0 #7f1d1d, inset 0 4px 0 #f87171; }
.ko-mstart.sel button, .ko-mstart button:hover { background: #ef4444; }
.ko-mstart .ko-marrow { color: #fff; font-size: 16px; }
.ko-mkeys { margin: 0; font-family: "VT323", monospace; font-size: 17px; color: #8b8b94; }
.ko-overlay[hidden] { display: none; }
.ko-card { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: var(--radius); padding: 20px 22px; max-width: 460px; text-align: center; }
.ko-card h2 { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 36px; line-height: 1; margin: 0 0 8px; }
.ko-card p { margin: 0 0 12px; color: var(--muted); }
.ko-card .ko-opt-label { margin: 0 0 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--ink); }
.ko-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; }
.ko-spots .chip { display: grid; gap: 1px; padding: 6px 10px; }
.ko-spots .chip small { font-size: 9px; letter-spacing: 1px; color: var(--orange); }
.ko-spots .chip.active small { color: #fff; }
/* výsledek střely přes hřiště */
.ko-result { position: absolute; right: 4%; bottom: 8%; z-index: 1; text-align: center; pointer-events: none; font-family: var(--font-head); text-transform: uppercase; line-height: 1; text-shadow: 3px 3px 0 #000; animation: pop .25s cubic-bezier(.2,1.4,.4,1) both; }
.ko-result[hidden] { display: none; }
.ko-result strong { display: block; font-weight: 400; font-size: clamp(34px, 7vw, 64px); }
.ko-result span { display: block; margin-top: 4px; font-size: clamp(14px, 2.4vw, 22px); color: #fff; }
.ko-result.hit strong { color: #22c55e; }
.ko-result.miss strong { color: #f4f4f5; }
.ko-result.out strong, .ko-result.out span { color: #ef4444; }
/* návod pod zaměřovačem (zaměřovač: vpravo 4 %, nahoře 5 %, velikost 36 % výšky) */
.ko-aimhint { position: absolute; right: 4%; top: 42%; width: 20.25%; z-index: 1; pointer-events: none; text-align: center; font-size: clamp(10px, 1.3vw, 15px); font-weight: 700; line-height: 1.25; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.ko-aimhint[hidden] { display: none; }
.ko-aimhint b { color: #fde047; }
/* lišta pod hřištěm: zaměřovač, kdo střílí, Stop */
.ko-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 12px; }
.ko-msg { margin: 0; }
.ko-foot { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ko-btns { display: flex; gap: 10px; }
.ko-new { padding: 14px 18px; }
.ko-new[hidden] { display: none; }
.ko-stop { min-width: 140px; font-size: 18px; padding: 14px 28px; }
.ko-stop:disabled { opacity: .4; cursor: default; }
.ko-shooter { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; background: #0b0b0b; border: 2px solid var(--red); border-radius: 12px; color: #fff; justify-self: start; }
.ko-shooter[hidden] { display: none; }
.ko-shooter.must { border-color: #ef4444; }
.ko-shooter.safe { border-color: #22c55e; }
.ko-shooter > span:last-child { display: grid; line-height: 1.15; }
.ko-shooter small { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #a1a1aa; font-weight: 700; }
.ko-shooter strong { font-family: var(--font-head); font-weight: 400; font-size: 26px; text-transform: uppercase; }
.ko-shooter em { font-style: normal; font-size: 12px; font-weight: 700; color: #a1a1aa; }
.ko-shooter.must em { color: #fca5a5; }
.ko-shooter.safe em { color: #86efac; }
/* dres zezadu: REBELS nad číslem */
.ko-jersey { position: relative; flex: 0 0 auto; width: 54px; height: 60px; display: grid; justify-items: center; align-content: start; padding-top: 12px; background: #111; color: #fff;
  clip-path: polygon(22% 0, 36% 0, 42% 8%, 58% 8%, 64% 0, 78% 0, 80% 22%, 100% 34%, 100% 100%, 0 100%, 0 34%, 20% 22%); }
.ko-jersey i { font-style: normal; font-family: var(--font-head); font-size: 9px; letter-spacing: .5px; line-height: 1; }
.ko-jersey b { font-family: var(--font-head); font-weight: 400; font-size: 28px; line-height: 1; color: #fff; text-shadow: 1px 1px 0 var(--red), -1px -1px 0 var(--red), 1px -1px 0 var(--red), -1px 1px 0 var(--red); }
/* pořadí střelců */
.ko-queue { list-style: none; margin: 0 0 12px; padding: 4px 2px 6px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; }
.ko-queue:empty { display: none; }
.ko-queue li { flex: 0 0 auto; width: 64px; text-align: center; transition: .25s; }
.ko-q-photo { position: relative; display: block; width: 56px; height: 56px; margin: 0 auto 4px; border-radius: 50%; border: 3px solid var(--line); background: var(--card-2); overflow: hidden; transition: .25s; }
.ko-q-photo img { width: 100%; height: 100%; object-fit: cover; }
.ko-q-photo b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; color: #fff; background: rgba(0,0,0,.45); }
.ko-q-name { display: block; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ko-q-tag { display: block; min-height: 15px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.ko-queue li.me .ko-q-photo { border-color: var(--orange); }
.ko-queue li.cur { width: 80px; }
.ko-queue li.cur .ko-q-photo { width: 72px; height: 72px; border-color: var(--win); box-shadow: 0 0 0 3px rgba(34,197,94,.3); }
.ko-queue li.cur .ko-q-name { font-size: 13px; }
.ko-queue li.cur .ko-q-tag { color: var(--win); }
.ko-queue li.cur.must .ko-q-photo { border-color: var(--loss); box-shadow: 0 0 0 4px rgba(239,68,68,.5); animation: ko-pulse 1s ease-in-out infinite; }
.ko-queue li.cur.must .ko-q-tag { color: var(--loss); }
@keyframes ko-pulse { 50% { box-shadow: 0 0 0 8px rgba(239,68,68,.15); } }
.ko-queue li.hit .ko-q-photo { border-color: var(--win); }
.ko-queue li.hit .ko-q-photo b { background: rgba(34,197,94,.55); }
.ko-queue li.hit .ko-q-tag { color: var(--win); }
.ko-queue li.miss .ko-q-photo { border-color: #71717a; }
.ko-queue li.miss .ko-q-photo b { background: rgba(0,0,0,.55); color: #d4d4d8; }
.ko-queue li.out { opacity: .5; }
.ko-queue li.out .ko-q-photo img { filter: grayscale(1); }
.ko-queue li.out .ko-q-photo b { color: var(--loss); font-size: 34px; background: rgba(0,0,0,.35); }
.ko-queue li.out .ko-q-name { text-decoration: line-through; }
.ko-queue li.out .ko-q-tag { color: var(--loss); }
.ko-must { color: var(--loss); }
.ko-safe { color: var(--win); }
.ko-round { font-family: var(--font-head); text-transform: uppercase; font-size: 22px; line-height: 1; }
.ko-round small { font-family: var(--font-body); font-size: 13px; color: var(--muted); text-transform: none; margin-left: 6px; }
@media (max-width: 760px) {
  #ko-canvas { max-height: none; min-height: 0; }
  .ko-bar { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ko-shooter { justify-self: stretch; }
  .ko-btns { width: 100%; }
  .ko-stop { flex: 1; }
}
@media (max-width: 640px) {
  /* menu pod hřištěm, aby se vešlo */
  .ko-overlay { position: static; background: none; padding: 14px 8px 4px; }
  .ko-mrow { grid-template-columns: 16px 84px 26px 1fr 26px; font-size: 22px; }
  .ko-mkeys { display: none; }
  .ko-canvas-wrap { overflow: visible; border: 0; background: none; }
  #ko-canvas { border: 2px solid #000; border-radius: var(--radius); }
  .ko-card { max-width: none; padding: 16px; }
  .ko-card h2 { font-size: 28px; }
  .ko-shooter { padding: 4px 10px 4px 4px; gap: 8px; }
  .ko-jersey { width: 42px; height: 48px; padding-top: 9px; }
  .ko-jersey i { font-size: 7px; }
  .ko-jersey b { font-size: 21px; }
  .ko-shooter strong { font-size: 20px; }
  .ko-shooter em { font-size: 11px; }
  .ko-msg { font-size: 14px; }
}
/* ===== HUD přímo ve hře (kdo střílí, zpráva, tlačítka) ===== */
.ko-hud { position: absolute; inset: 0; z-index: 1; pointer-events: none; font-family: "VT323", monospace; color: #fff; }
.ko-hud-left { position: absolute; top: 3%; left: 2%; max-width: 36%; display: grid; gap: 6px; justify-items: start; }
.ko-hud-left[hidden] { display: none; }
.ko-hud .ko-shooter { --px: 3px; padding: 6px 12px 6px 6px; gap: 10px; border: 0; border-radius: 0; background: rgba(8,8,10,.9);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 #fff, 0 var(--px) 0 0 #fff, calc(-1 * var(--px)) 0 0 0 #fff, var(--px) 0 0 0 #fff, 0 0 0 calc(2 * var(--px)) #000; margin: 6px; }
.ko-hud .ko-shooter.must { box-shadow: 0 -3px 0 0 #ef4444, 0 3px 0 0 #ef4444, -3px 0 0 0 #ef4444, 3px 0 0 0 #ef4444, 0 0 0 6px #000; }
.ko-hud .ko-shooter.safe { box-shadow: 0 -3px 0 0 #22c55e, 0 3px 0 0 #22c55e, -3px 0 0 0 #22c55e, 3px 0 0 0 #22c55e, 0 0 0 6px #000; }
.ko-hud .ko-shooter small { font-family: "Jersey 10", var(--font-body); font-size: 17px; font-weight: 400; letter-spacing: 1px; }
.ko-hud .ko-shooter strong { font-family: "Jersey 10", var(--font-body); font-weight: 400; font-size: 34px; line-height: .9; letter-spacing: 1px; }
.ko-hud .ko-shooter em { font-family: "VT323", monospace; font-size: 18px; font-weight: 400; line-height: 1; }
.ko-hud .ko-msg, .ko-hud .ko-foot { margin: 0 0 0 6px; font-size: 21px; line-height: 1.05; min-height: 0; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.ko-hud .ko-msg strong { font-weight: 400; }
.ko-hud .ko-foot { display: block; font-size: 17px; color: #e4e4e7; }
.ko-hud .ko-round { font-family: "Jersey 10", var(--font-body); font-size: 13px; color: #fde047; margin-right: 8px; }
.ko-hud .ko-round small { font-family: "VT323", monospace; font-size: 17px; color: #e4e4e7; margin-left: 4px; }
.ko-hud .ko-must { color: #f87171; }
.ko-hud .ko-safe { color: #4ade80; }
.ko-btns { position: absolute; right: 2.5%; bottom: 5%; display: flex; gap: 10px; pointer-events: auto; }
.ko-pxbtn { font-family: "Jersey 10", var(--font-body); font-weight: 400; font-size: 26px; text-transform: uppercase; letter-spacing: 1px; padding: 5px 18px; border: 0; cursor: pointer; color: #fff; background: rgba(8,8,10,.9);
  box-shadow: 0 -3px 0 0 #fff, 0 3px 0 0 #fff, -3px 0 0 0 #fff, 3px 0 0 0 #fff, 0 0 0 6px #000; margin: 6px; }
.ko-pxbtn[hidden] { display: none; }
.ko-pxbtn:hover { background: #27272a; }
.ko-pxbtn.ko-stop { min-width: 0; font-size: 32px; padding: 3px 28px; background: #dc2626; box-shadow: inset 0 -4px 0 #7f1d1d, inset 0 4px 0 #f87171, 0 -3px 0 0 #fff, 0 3px 0 0 #fff, -3px 0 0 0 #fff, 3px 0 0 0 #fff, 0 0 0 6px #000; }
.ko-pxbtn.ko-stop:hover:not(:disabled) { background: #ef4444; }
.ko-pxbtn:disabled { opacity: .45; cursor: default; }
.ko-result { bottom: 24%; }
@media (max-width: 640px) {
  .ko-hud { position: static; pointer-events: auto; background: #0b0b0d; padding: 10px 6px 12px; margin-top: 8px; border-radius: var(--radius); }
  .ko-hud-left { position: static; max-width: none; }
  .ko-btns { position: static; margin-top: 8px; }
  .ko-pxbtn { flex: 1; font-size: 22px; }
  .ko-pxbtn.ko-stop { flex: 2; }
  .ko-hud .ko-shooter strong { font-size: 28px; }
  .ko-result { bottom: auto; top: calc((100vw - 32px) * 9 / 16 * 0.45); }
  /* hřiště je nahoře ve wrapu, pod ním HUD – návod počítat z výšky hřiště */
  .ko-aimhint { top: calc((100vw - 32px) * 9 / 16 * 0.42); font-size: 10px; }
  .ko-pxbtn { white-space: nowrap; padding: 10px 8px; }
}
.ko-jersey.white { background: #f4f4f5; color: #b91c1c; }
.ko-foot[hidden] { display: none !important; }
.ko-hud .ko-jersey { align-content: center; padding-top: 6px; }
.ko-hud .ko-jersey b { font-size: 32px; }
/* karta střelce: vždy stejně velká, širší */
.ko-hud .ko-shooter { width: 300px; height: 82px; box-sizing: border-box; }
.ko-hud .ko-shooter > span:last-child { flex: 1; min-width: 0; overflow: hidden; }
.ko-hud .ko-shooter strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .ko-hud .ko-shooter { width: 100%; height: 66px; } }
/* ===== Arkádový nápis po střele ===== */
.ko-result { left: 0; right: 0; top: 34%; bottom: auto; animation: none; font-family: "Jersey 10", var(--font-head); }
.ko-result strong { font-size: clamp(56px, 11vw, 140px); letter-spacing: 4px; line-height: .9; }
.ko-result strong i { display: inline-block; font-style: normal; animation: ko-letter .55s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--i) * 45ms);
  text-shadow: 0 6px 0 #000, 6px 6px 0 #000, -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000; }
.ko-result.hit strong i { color: #fde047; animation-name: ko-letter, ko-glow; animation-duration: .55s, .5s; animation-delay: calc(var(--i) * 45ms), .6s; animation-iteration-count: 1, 3; }
.ko-result.miss strong i { color: #f4f4f5; animation-name: ko-drop; }
.ko-result.out strong i { color: #ef4444; animation-name: ko-drop; }
.ko-result span { font-family: "Jersey 10", var(--font-head); font-size: clamp(22px, 3.4vw, 40px); letter-spacing: 2px; margin-top: 8px; text-shadow: 3px 3px 0 #000, -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000; animation: ko-sub .4s .35s both; }
.ko-result.hit span { color: #4ade80; }
@keyframes ko-letter { 0% { transform: translateY(-60px) scale(.3); opacity: 0; } 60% { transform: translateY(8px) scale(1.25); opacity: 1; } 100% { transform: none; } }
@keyframes ko-glow { 50% { color: #fff; transform: scale(1.12); } }
@keyframes ko-drop { 0% { transform: translateY(-40px) rotate(-12deg); opacity: 0; } 50% { transform: translateY(10px) rotate(6deg); opacity: 1; } 75% { transform: translateY(-4px) rotate(-3deg); } 100% { transform: none; } }
@keyframes ko-sub { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
/* otřes a záblesky hřiště */
.ko-canvas-wrap.ko-shake #ko-canvas { animation: ko-shake .45s steps(9) both; }
@keyframes ko-shake { 0%,100% { transform: none; } 20% { transform: translate(-8px, 3px); } 40% { transform: translate(7px, -4px); } 60% { transform: translate(-5px, 2px); } 80% { transform: translate(3px, -1px); } }
.ko-canvas-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1; }
.ko-canvas-wrap.ko-flash-hit::after { background: radial-gradient(circle at 50% 22%, rgba(253,224,71,.65), rgba(253,224,71,0) 55%); animation: ko-flash .7s ease-out both; }
.ko-canvas-wrap.ko-flash-out::after { background: rgba(220,38,38,.45); box-shadow: inset 0 0 120px 30px rgba(220,38,38,.8); animation: ko-flash .8s ease-out both; }
@keyframes ko-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 640px) { .ko-result { top: calc((100vw - 32px) * 9 / 16 * 0.3); } }

/* ===== Úvodní obrazovka s logem ===== */
.ko-overlay.ko-splash-on { place-items: center; justify-items: center; align-items: center; padding: 0; background: radial-gradient(circle at 50% 40%, #1a1a1d, #000 75%); }
.ko-splash { display: grid; justify-items: center; gap: 8px; cursor: pointer; text-align: center; }
.ko-splash img { width: min(34vh, 260px, 60vw); height: auto; image-rendering: auto; animation: ko-logo .8s cubic-bezier(.2,1.5,.4,1) both, ko-float 3s 1s ease-in-out infinite; filter: drop-shadow(0 10px 0 rgba(0,0,0,.6)); }
.ko-splash h2 { margin: 0; font-family: "Jersey 10", var(--font-head); font-weight: 400; font-size: clamp(36px, 6vw, 64px); letter-spacing: 4px; text-transform: uppercase; color: #fde047; text-shadow: 4px 4px 0 #b91c1c, 8px 8px 0 #000; animation: ko-sub .5s .5s both; }
.ko-load { width: min(320px, 60vw); height: 16px; background: #000; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000; }
.ko-load i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #dc2626 0 10px, #f97316 10px 20px); }
.ko-press { border: 0; background: none; color: #fff; font-family: "Jersey 10", var(--font-head); font-size: clamp(26px, 3.6vw, 40px); letter-spacing: 3px; text-transform: uppercase; cursor: pointer; text-shadow: 3px 3px 0 #000; animation: ko-blink 1s steps(2) infinite; }
.ko-press[hidden] { display: none; }
@keyframes ko-logo { 0% { transform: scale(.2) rotate(-14deg); opacity: 0; } 70% { transform: scale(1.08) rotate(2deg); opacity: 1; } 100% { transform: none; } }
@keyframes ko-float { 50% { transform: translateY(-8px); } }
@media (max-width: 640px) {
  .ko-overlay.ko-splash-on { position: absolute; inset: 0; padding: 0; }
  .ko-splash img { width: 40vw; }
  .ko-splash h2 { font-size: 30px; }
  .ko-load { height: 10px; }
}
/* ===== Menu: vlevo logo + název, vpravo výběr, na pozadí hřiště ===== */
.ko-overlay:not(.ko-splash-on) { grid-template-columns: 1fr minmax(0, 460px); justify-items: center; align-items: center; gap: 4%; padding: 3% 4%;
  background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.35) 50%, rgba(0,0,0,.55)); }
.ko-mbrand { display: grid; justify-items: center; gap: 6px; }
.ko-mbrand img { width: min(52vh, 300px, 30vw); height: auto; filter: drop-shadow(0 8px 0 rgba(0,0,0,.6)); animation: ko-float 3s ease-in-out infinite; }
.ko-mbrand h2 { margin: 0; font-family: "Jersey 10", var(--font-head); font-weight: 400; font-size: clamp(34px, 5vw, 64px); letter-spacing: 4px; text-transform: uppercase; color: #fde047; text-shadow: 4px 4px 0 #b91c1c, 8px 8px 0 #000; }
.ko-overlay:not(.ko-splash-on) .ko-menu { width: 100%; }
@media (max-width: 640px) {
  .ko-overlay:not(.ko-splash-on) { grid-template-columns: 1fr; background: none; padding: 14px 8px 4px; }
  .ko-mbrand { display: none; }
}
.ko-canvas-wrap:has(> .ko-overlay:not([hidden])) .ko-btns { display: none; }
/* karta střelce: číslo, jméno a „střílí“ v jednom řádku */
.ko-hud .ko-shooter > .ko-sline { display: flex; align-items: baseline; gap: 10px; }
.ko-hud .ko-shooter .ko-sline small { font-size: 22px; letter-spacing: 1px; text-transform: lowercase; color: #a1a1aa; white-space: nowrap; }
/* karta střelce: číslo, jméno a „střílí“ svisle na jedné ose */
.ko-hud .ko-shooter { align-items: center; }
.ko-hud .ko-shooter > .ko-sline { align-items: center; align-self: center; }
.ko-hud .ko-shooter .ko-sline strong, .ko-hud .ko-shooter .ko-sline small { line-height: 1; display: block; }
.ko-hud .ko-jersey { display: grid; place-items: center; align-content: center; padding-top: 0; }
.ko-hud .ko-jersey b { line-height: 1; margin-top: 8px; }
/* logo v menu na vlastním panelu, aby vyniklo */
.ko-mbrand { padding: 22px 30px 18px; background: radial-gradient(circle at 50% 38%, #2a0d0d 0%, #120707 55%, #050505 100%);
  box-shadow: 0 -4px 0 0 #dc2626, 0 4px 0 0 #dc2626, -4px 0 0 0 #dc2626, 4px 0 0 0 #dc2626, 0 0 0 8px #000, 10px 12px 0 8px rgba(0,0,0,.45); }
.ko-mbrand img { width: min(42vh, 260px, 26vw); }
/* menu na stejném tmavém pozadí jako úvod, bez rámečků */
.ko-overlay:not(.ko-splash-on) { background: radial-gradient(circle at 50% 40%, #1a1a1d, #000 75%); }
.ko-mbrand { padding: 0; background: none; box-shadow: none; }
.ko-mbrand img { width: min(34vh, 260px, 30vw); animation: ko-float 3s ease-in-out infinite; }
.ko-mbrand h2 { font-size: clamp(36px, 6vw, 64px); }
.ko-overlay:not(.ko-splash-on) .ko-menu { background: none; box-shadow: none; padding: 0; }
.ko-overlay:not(.ko-splash-on) .ko-mrow.sel { background: rgba(255,255,255,.08); }
@media (max-width: 640px) { .ko-overlay:not(.ko-splash-on) { background: #000; } }
/* nastavení: víc vzduchu, užší tlačítko, tečky obtížnosti na ose s textem */
.ko-overlay:not(.ko-splash-on) .ko-menu .ko-msub { margin-bottom: 26px; font-size: 24px; line-height: 1.15; }
.ko-overlay:not(.ko-splash-on) .ko-mlist { gap: 12px; margin-bottom: 18px; }
.ko-overlay:not(.ko-splash-on) .ko-mrow { padding: 8px 10px; }
.ko-mval { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ko-mval i { margin-left: 0; font-size: 13px; line-height: 1; letter-spacing: 3px; transform: translateY(-1px); }
.ko-overlay:not(.ko-splash-on) .ko-mstart { padding-top: 22px; justify-items: center; }
.ko-overlay:not(.ko-splash-on) .ko-mstart button { width: 64%; }
/* kompaktnější nastavení, větší mezera pod nadpisem */
.ko-overlay:not(.ko-splash-on) { grid-template-columns: 1fr minmax(0, 380px); }
.ko-overlay:not(.ko-splash-on) .ko-menu h2 { margin-bottom: 28px; }
.ko-overlay:not(.ko-splash-on) .ko-mrow { grid-template-columns: 16px 96px 22px 1fr 22px; }
.ko-overlay:not(.ko-splash-on) .ko-mstart button { width: 72%; }
.ko-overlay:not(.ko-splash-on) .ko-mrow.ko-mstart { grid-template-columns: 1fr; }
.ko-overlay:not(.ko-splash-on) { grid-template-columns: 1fr minmax(0, 380px); padding-right: 12%; gap: 2%; }
.ko-hud .ko-jersey b { margin-top: 0; transform: translateY(-1px); }
.ko-hud .ko-shooter .ko-sline strong { transform: translateY(1px); }
.ko-pxbtn.ko-mute { padding: 4px 12px; font-family: system-ui, sans-serif; font-size: 22px; line-height: 1.2; }
/* zvuk jde vypnout i v menu – tlačítko zůstane vidět */
.ko-canvas-wrap:has(> .ko-overlay:not([hidden])) .ko-btns { display: flex; z-index: 3; }
.ko-canvas-wrap:has(> .ko-overlay:not([hidden])) .ko-btns > :not(.ko-mute) { display: none; }
.ko-canvas-wrap:has(> .ko-overlay:not([hidden])) .ko-hud { z-index: 3; }
/* tlačítko zvuku = pixelová ikona (má vlastní rámeček) */
.ko-pxbtn.ko-mute { padding: 0; margin: 0 4px 0 0; background: none; box-shadow: none; align-self: center; }
.ko-pxbtn.ko-mute:hover { background: none; filter: brightness(1.2); }
.ko-pxbtn.ko-mute img { display: block; width: 56px; height: auto; image-rendering: pixelated; }
@media (max-width: 640px) { .ko-pxbtn.ko-mute { flex: 0 0 auto; } .ko-pxbtn.ko-mute img { width: 48px; } }
/* obličej hráče na kartě střelce */
.ko-hud .ko-face { width: 60px; height: 60px; flex: 0 0 auto; image-rendering: pixelated; object-fit: cover; box-shadow: 0 0 0 2px #000, 0 0 0 4px #3f3f46; }
@media (max-width: 640px) { .ko-hud .ko-face { width: 48px; height: 48px; } }
/* karta střelce: jeden rámeček (obličej, jméno, info), červený jen po minele */
.ko-hud .ko-scard { --c: #e4e4e7; display: grid; gap: 6px; width: 320px; padding: 10px 14px 10px 10px; margin: 6px; background: rgba(8,8,10,.9);
  box-shadow: 0 -3px 0 0 var(--c), 0 3px 0 0 var(--c), -3px 0 0 0 var(--c), 3px 0 0 0 var(--c), 0 0 0 6px #000; transition: box-shadow .2s; }
.ko-hud .ko-scard.missed { --c: #ef4444; }
.ko-hud .ko-scard:has(.ko-shooter[hidden]) { display: none; }
.ko-hud .ko-scard .ko-shooter, .ko-hud .ko-scard .ko-shooter.must, .ko-hud .ko-scard .ko-shooter.safe { width: auto; height: auto; margin: 0; padding: 0; background: none; box-shadow: none; }
.ko-hud .ko-scard .ko-face { box-shadow: none; width: 56px; height: 56px; }
.ko-hud .ko-scard .ko-msg { margin: 0; text-shadow: none; font-size: 19px; color: #d4d4d8; }
@media (max-width: 640px) { .ko-hud .ko-scard { width: auto; } }
/* ===== Pořadí hráčů jako součást hry (pruh nad hřištěm) ===== */
.ko-field { position: relative; }
.ko-field.ko-shake #ko-canvas { animation: ko-shake .45s steps(9) both; }
.ko-field::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1; }
.ko-field.ko-flash-hit::after { background: radial-gradient(circle at 50% 22%, rgba(253,224,71,.65), rgba(253,224,71,0) 55%); animation: ko-flash .7s ease-out both; }
.ko-field.ko-flash-out::after { background: rgba(220,38,38,.45); box-shadow: inset 0 0 120px 30px rgba(220,38,38,.8); animation: ko-flash .8s ease-out both; }
.ko-canvas-wrap::after { display: none; }
.ko-canvas-wrap > .ko-queue { margin: 0; padding: 10px 12px 8px; gap: 8px; background: #0b0b0d; border-bottom: 3px solid #000; box-shadow: inset 0 -3px 0 #27272a; justify-content: flex-start; }
.ko-canvas-wrap > .ko-queue li { width: 64px; }
.ko-canvas-wrap > .ko-queue .ko-q-photo { width: 52px; height: 52px; border-radius: 0; border: 0; background: #1a1a1d; box-shadow: 0 0 0 3px #3f3f46, 0 0 0 5px #000; margin: 5px auto 8px; overflow: hidden; }
.ko-canvas-wrap > .ko-queue .ko-q-photo img { image-rendering: pixelated; }
.ko-canvas-wrap > .ko-queue li.cur { width: 72px; }
.ko-canvas-wrap > .ko-queue li.cur .ko-q-photo { width: 60px; height: 60px; box-shadow: 0 0 0 3px #e4e4e7, 0 0 0 5px #000; animation: none; }
.ko-canvas-wrap > .ko-queue li.cur.must .ko-q-photo { box-shadow: 0 0 0 3px #ef4444, 0 0 0 5px #000; animation: ko-blinkb 1s steps(2) infinite; }
@keyframes ko-blinkb { 50% { box-shadow: 0 0 0 3px #7f1d1d, 0 0 0 5px #000; } }
.ko-canvas-wrap > .ko-queue li.hit .ko-q-photo { box-shadow: 0 0 0 3px #22c55e, 0 0 0 5px #000; }
.ko-canvas-wrap > .ko-queue li.miss .ko-q-photo { box-shadow: 0 0 0 3px #71717a, 0 0 0 5px #000; }
.ko-canvas-wrap > .ko-queue li.me .ko-q-photo { box-shadow: 0 0 0 3px #f97316, 0 0 0 5px #000; }
.ko-canvas-wrap > .ko-queue li.out .ko-q-photo { box-shadow: 0 0 0 3px #3f3f46, 0 0 0 5px #000; }
.ko-canvas-wrap > .ko-queue .ko-q-photo b { font-family: "Jersey 10", var(--font-head); font-size: 34px; }
.ko-canvas-wrap > .ko-queue .ko-q-name { font-family: "Jersey 10", var(--font-head); font-weight: 400; font-size: 17px; letter-spacing: .5px; color: #e4e4e7; text-transform: uppercase; }
.ko-canvas-wrap > .ko-queue .ko-q-tag { font-family: "Jersey 10", var(--font-head); font-weight: 400; font-size: 14px; letter-spacing: 1px; }
.ko-q-me { display: block; width: 100%; height: 100%; background: #f4f4f5; clip-path: polygon(22% 8%, 36% 8%, 42% 18%, 58% 18%, 64% 8%, 78% 8%, 80% 30%, 96% 40%, 96% 100%, 4% 100%, 4% 40%, 20% 30%); }
@media (max-width: 640px) { .ko-canvas-wrap > .ko-queue { padding: 8px 8px 6px; } }
.ko-canvas-wrap > .ko-queue li.cur .ko-q-name { font-size: 17px; color: #fff; }
/* v menu se zvuk nastavuje řádkem „Zvuk“, ikona je jen ve hře */
.ko-canvas-wrap:has(> .ko-overlay:not([hidden])) .ko-btns { display: none; }
/* výhra */
.ko-result.win { top: 18%; }
.ko-result.win strong { font-size: clamp(80px, 15vw, 190px); }
.ko-result.win strong i { color: #fde047; animation-name: ko-letter, ko-rainbow; animation-duration: .6s, 1.2s; animation-delay: calc(var(--i) * 70ms), calc(.7s + var(--i) * 90ms); animation-iteration-count: 1, infinite; }
.ko-result.win span { color: #fff; font-size: clamp(24px, 3.6vw, 44px); }
@keyframes ko-rainbow { 0%,100% { color: #fde047; transform: translateY(0); } 25% { color: #fb923c; transform: translateY(-10px); } 50% { color: #f87171; } 75% { color: #4ade80; transform: translateY(4px); } }
.ko-result.win strong { line-height: 1.15; padding-top: .1em; }
/* ===== Celá obrazovka ===== */
.ko-pxbtn.ko-fs { padding: 0; width: 52px; height: 52px; display: grid; place-items: center; align-self: center; margin: 0 6px 0 0; }
.ko-pxbtn.ko-fs i { position: relative; width: 24px; height: 24px; }
.ko-pxbtn.ko-fs i::before, .ko-pxbtn.ko-fs i::after { content: ""; position: absolute; inset: 0; }
/* čtyři rohy (otevřít) / rohy dovnitř (zavřít) */
.ko-pxbtn.ko-fs i::before { background:
  linear-gradient(#fff,#fff) 0 0/9px 4px no-repeat, linear-gradient(#fff,#fff) 0 0/4px 9px no-repeat,
  linear-gradient(#fff,#fff) 100% 0/9px 4px no-repeat, linear-gradient(#fff,#fff) 100% 0/4px 9px no-repeat,
  linear-gradient(#fff,#fff) 0 100%/9px 4px no-repeat, linear-gradient(#fff,#fff) 0 100%/4px 9px no-repeat,
  linear-gradient(#fff,#fff) 100% 100%/9px 4px no-repeat, linear-gradient(#fff,#fff) 100% 100%/4px 9px no-repeat; }
.ko-pxbtn.ko-fs.on i::before { background:
  linear-gradient(#fde047,#fde047) 0 6px/10px 4px no-repeat, linear-gradient(#fde047,#fde047) 6px 0/4px 10px no-repeat,
  linear-gradient(#fde047,#fde047) 100% 6px/10px 4px no-repeat, linear-gradient(#fde047,#fde047) calc(100% - 6px) 0/4px 10px no-repeat,
  linear-gradient(#fde047,#fde047) 0 calc(100% - 6px)/10px 4px no-repeat, linear-gradient(#fde047,#fde047) 6px 100%/4px 10px no-repeat,
  linear-gradient(#fde047,#fde047) 100% calc(100% - 6px)/10px 4px no-repeat, linear-gradient(#fde047,#fde047) calc(100% - 6px) 100%/4px 10px no-repeat; }
/* tlačítko celé obrazovky je vidět i v menu */
.ko-canvas-wrap:has(> .ko-overlay:not([hidden])) .ko-btns { display: flex; z-index: 3; }
.ko-canvas-wrap:has(> .ko-overlay:not([hidden])) .ko-btns > :not(.ko-fs) { display: none; }
.ko-canvas-wrap:has(> .ko-overlay:not([hidden])) .ko-hud { z-index: 3; }
/* rozložení na celé obrazovce: pruh hráčů nahoře, hřiště co největší, vycentrované */
.ko-canvas-wrap:fullscreen, .ko-canvas-wrap.ko-full { display: flex; flex-direction: column; width: 100vw; height: 100vh; height: 100dvh; max-width: none; border: 0; border-radius: 0; background: #000; }
.ko-canvas-wrap.ko-full { position: fixed; inset: 0; z-index: 1000; }
.ko-canvas-wrap:-webkit-full-screen { display: flex; flex-direction: column; width: 100vw; height: 100vh; background: #000; }
.ko-canvas-wrap:fullscreen > .ko-queue, .ko-canvas-wrap.ko-full > .ko-queue { flex: 0 0 auto; }
/* hřiště (i s kartou, tlačítky a nápisy) co největší v poměru 16:9 pod pruhem hráčů */
.ko-canvas-wrap:fullscreen .ko-field, .ko-canvas-wrap.ko-full .ko-field { flex: 0 0 auto; width: min(100%, calc((100dvh - 120px) * 16 / 9)); margin: auto; }
.ko-canvas-wrap:fullscreen #ko-canvas, .ko-canvas-wrap.ko-full #ko-canvas { width: 100%; max-height: none; min-height: 0; aspect-ratio: 16 / 9; }
body.ko-noscroll { overflow: hidden; }
@media (max-width: 640px) {
  .ko-canvas-wrap:fullscreen, .ko-canvas-wrap.ko-full { overflow-y: auto; }
  .ko-canvas-wrap:fullscreen .ko-field, .ko-canvas-wrap.ko-full .ko-field { width: 100%; margin: 0; }
  .ko-pxbtn.ko-fs { flex: 0 0 auto; width: 48px; height: 48px; }
}
/* ikony zvuku a celé obrazovky vpravo nahoře v černém pruhu s hráči */
.ko-topbtns { position: absolute; top: 14px; right: 14px; z-index: 4; display: flex; gap: 10px; align-items: center; }
.ko-topbtns .ko-pxbtn { margin: 0; }
.ko-topbtns .ko-pxbtn.ko-fs { width: 48px; height: 48px; margin: 0; }
.ko-topbtns .ko-pxbtn.ko-mute img { width: 52px; }
.ko-canvas-wrap > .ko-queue { padding-right: 140px; }
/* v menu jen celá obrazovka (zvuk je v nastavení) */
.ko-canvas-wrap:has(> .ko-overlay:not([hidden])) .ko-topbtns .ko-mute { display: none; }
@media (max-width: 640px) {
  .ko-topbtns { top: 10px; right: 8px; gap: 6px; }
  .ko-topbtns .ko-pxbtn.ko-fs { width: 40px; height: 40px; }
  .ko-topbtns .ko-pxbtn.ko-mute img { width: 42px; }
  .ko-canvas-wrap > .ko-queue { padding-right: 104px; }
}
/* místo pro ikony: rámeček vpravo (obsah pruhu pod ikony neroluje) */
.ko-canvas-wrap > .ko-queue { padding-right: 12px; border-right: 132px solid #0b0b0d; }
@media (max-width: 640px) { .ko-canvas-wrap > .ko-queue { padding-right: 8px; border-right-width: 100px; } }
/* obě ikony vpravo nahoře stejně velké (obrázky ve stejném stylu) */
.ko-topbtns .ko-pxbtn.ko-fs, .ko-topbtns .ko-pxbtn.ko-mute { width: auto; height: auto; padding: 0; background: none; box-shadow: none; }
.ko-topbtns .ko-pxbtn img { display: block; width: 52px; height: auto; image-rendering: pixelated; }
.ko-topbtns .ko-pxbtn:hover { background: none; filter: brightness(1.25); }
@media (max-width: 640px) { .ko-topbtns .ko-pxbtn img { width: 42px; } }
/* Úvod: blok Merch + Vyřazovák */
.promo-section { padding-top: 0; }
.promo-grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: 20px; }
.promo-card { position: relative; display: flex; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--line); min-height: 340px; transition: transform .15s, border-color .15s; }
.promo-card:hover { transform: translateY(-2px); border-color: var(--orange); }
.promo-merch { flex-direction: column; background: var(--card); }
.promo-merch-photos { display: grid; grid-template-columns: repeat(3, 1fr); background: #f4f4f4; aspect-ratio: 3 / 1.15; }
.promo-merch-photos img { width: 100%; height: 100%; object-fit: contain; padding: 10%; filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); }
.promo-body { padding: 20px 22px 24px; display: grid; gap: 8px; }
.promo-body .group-title { margin: 0; }
.promo-body p { margin: 0; color: var(--muted); }
.promo-kicker { color: var(--orange); font-weight: 800; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
/* Vyřazovák – banner v Atari stylu: herní hřiště, animovaný střelec, fronta hráčů s obličeji */
.ko-banner { background: #0a0a2a; align-items: center; padding: 24px 28px; gap: 22px; color: #fff; font-family: "Jersey 10", var(--font-head); min-height: 390px; }
.ko-stage { position: absolute; left: -12%; top: -10%; width: 170%; aspect-ratio: 1672 / 941; pointer-events: none; }
.ko-stage-court { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.ko-banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5,5,25,.9) 0%, rgba(5,5,25,.66) 42%, rgba(5,5,25,.12) 68%, rgba(5,5,25,0) 100%); }
.ko-banner > .ko-banner-text { position: relative; z-index: 3; }
.ko-banner-scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 4px); }
.ko-banner-logo { width: 150px; height: auto; flex: none; image-rendering: pixelated; filter: drop-shadow(4px 4px 0 #000); animation: ko-float 2.4s steps(4) infinite alternate; }
@keyframes ko-float { to { transform: translateY(-8px); } }
.ko-banner-text { display: grid; gap: 4px; }
.ko-banner-kicker { color: #fde047; font-size: 20px; letter-spacing: 3px; text-transform: uppercase; }
.ko-banner-title { font-size: clamp(54px, 6vw, 86px); line-height: .85; text-transform: uppercase; letter-spacing: 2px; text-shadow: 4px 4px 0 #dc2626, 8px 8px 0 #000; }
.ko-banner-sub { font-size: 24px; line-height: 1.05; color: #f4f4f5; max-width: 360px; text-shadow: 2px 2px 0 #000; }
/* fronta střelců – obličeje hráčů, kdo je na řadě, se rozsvítí */
.ko-queue { display: flex; gap: 6px; margin-top: 10px; }
.ko-queue img { width: 40px; height: 40px; image-rendering: pixelated; border: 3px solid #000; box-shadow: 0 0 0 2px #52525b; filter: grayscale(.6) brightness(.75); animation: ko-turn 7.2s steps(1) infinite; }
.ko-queue img:nth-child(2) { animation-delay: 1.2s; } .ko-queue img:nth-child(3) { animation-delay: 2.4s; }
.ko-queue img:nth-child(4) { animation-delay: 3.6s; } .ko-queue img:nth-child(5) { animation-delay: 4.8s; } .ko-queue img:nth-child(6) { animation-delay: 6s; }
@keyframes ko-turn { 0% { filter: none; box-shadow: 0 0 0 3px #fde047; transform: translateY(-4px); } 16.66% { filter: grayscale(.6) brightness(.75); box-shadow: 0 0 0 2px #52525b; transform: none; } }
/* CTA – plné tlačítko, bliká jen šipka; hover na kartě i na tlačítku */
.ko-banner-start { justify-self: start; margin-top: 14px; background: #dc2626; color: #fff; font-size: 30px; padding: 4px 20px 2px; text-transform: uppercase; letter-spacing: 2px; box-shadow: 4px 4px 0 #000, inset -3px -3px 0 rgba(0,0,0,.35); transition: transform .1s, box-shadow .1s, background .1s; }
.ko-banner-start i { font-style: normal; display: inline-block; animation: ko-blink 1s steps(1) infinite; }
.ko-banner:hover .ko-banner-start, .ko-banner:focus-visible .ko-banner-start { background: #f7941d; color: #000; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000, inset -3px -3px 0 rgba(0,0,0,.25); }
.ko-banner .ko-banner-start:hover { background: #fde047; }
@keyframes ko-blink { 50% { opacity: 0; } }
/* animovaný střelec (sprite 3 snímky) a míč do koše; souřadnice v % obrázku hřiště */
.ko-shooter-anim { position: absolute; left: 50%; top: 36%; width: 10%; aspect-ratio: 256 / 341; transform: translateX(-50%); background: url("../img/hra/hraci/fafa.png") 0 0 / 300% 100% no-repeat; image-rendering: pixelated; animation: ko-shoot 3s steps(1) infinite; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.5)); }
@keyframes ko-shoot { 0% { background-position: 0 0; } 34% { background-position: 50% 0; } 50% { background-position: 100% 0; } 92% { background-position: 0 0; } }
.ko-ball-x { position: absolute; left: 50%; top: 18.5%; width: 3.4%; aspect-ratio: 1; margin-left: -1.7%; animation: ko-ball-x 3s linear infinite; }
.ko-ball-y { display: block; width: 100%; height: 100%; image-rendering: pixelated; animation: ko-ball-y 3s infinite; }
@keyframes ko-ball-x { 0%, 100% { transform: translateX(0); } }
@keyframes ko-ball-y {
  0%, 33% { transform: translateY(330%); opacity: 0; }
  34% { transform: translateY(330%); opacity: 1; animation-timing-function: cubic-bezier(.2,.7,.4,1); }
  50% { transform: translateY(-140%); animation-timing-function: cubic-bezier(.6,0,.8,.4); }
  62% { transform: translateY(30%); }
  72% { transform: translateY(230%); opacity: 1; }
  76%, 100% { transform: translateY(230%); opacity: 0; }
}
.ko-swish { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); font-family: "Jersey 10", var(--font-head); font-size: clamp(22px, 2.4vw, 34px); color: #fde047; text-shadow: 3px 3px 0 #dc2626, 5px 5px 0 #000; opacity: 0; animation: ko-swish 3s steps(1) infinite; }
@keyframes ko-swish { 0%, 62% { opacity: 0; } 63%, 82% { opacity: 1; } 83% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ko-banner *, .ko-banner { animation: none !important; } .ko-ball-y { opacity: 0; } }
@media (max-width: 900px) {
  .promo-grid { grid-template-columns: 1fr; }
  .ko-banner { flex-direction: column; align-items: flex-start; padding: 20px; min-height: 0; padding-bottom: 210px; }
  .ko-stage { top: auto; bottom: -16%; left: -20%; }
  .ko-banner::before { background: linear-gradient(180deg, rgba(5,5,25,.9) 0%, rgba(5,5,25,.7) 55%, rgba(5,5,25,0) 80%); }
  .ko-banner-logo { width: 96px; }
}
/* Vyřazovák banner v2: text vlevo, vpravo detail střelce a efekty koše */
.ko-banner { padding: 28px 32px; }
.ko-banner-text { max-width: 46%; }
.ko-banner::before { background: linear-gradient(90deg, rgba(5,5,25,.92) 0%, rgba(5,5,25,.75) 34%, rgba(5,5,25,.15) 52%, rgba(5,5,25,0) 70%); }
.ko-banner-title { font-size: clamp(52px, 5.4vw, 80px); }
.ko-banner-sub { margin-top: 6px; }
.ko-stage { left: -28%; top: -15%; width: 200%; }
.ko-shooter-anim { top: 27%; width: 12.5%; }
.ko-ball-x { width: 3%; margin-left: -1.5%; }
@keyframes ko-ball-y {
  0%, 33% { transform: translateY(205%); opacity: 0; }
  34% { transform: translateY(205%); opacity: 1; animation-timing-function: cubic-bezier(.2,.7,.4,1); }
  50% { transform: translateY(-160%); animation-timing-function: cubic-bezier(.6,0,.8,.4); }
  62% { transform: translateY(30%); }
  72% { transform: translateY(240%); opacity: 1; }
  76%, 100% { transform: translateY(240%); opacity: 0; }
}
/* efekty při koši: pixelové jiskry, rozpínající se kruh, KOŠ! s „popnutím“ */
.ko-fx { position: absolute; left: 50%; top: 20%; width: 0; height: 0; }
.ko-fx i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: #fde047; box-shadow: 3px 3px 0 #dc2626; opacity: 0; animation: ko-spark 3s steps(6) infinite; }
.ko-fx i:nth-child(2n) { background: #f7941d; width: 8px; height: 8px; }
.ko-fx i:nth-child(1) { --dx: 0px; --dy: -90px; } .ko-fx i:nth-child(2) { --dx: 64px; --dy: -64px; }
.ko-fx i:nth-child(3) { --dx: 92px; --dy: 0px; } .ko-fx i:nth-child(4) { --dx: 64px; --dy: 64px; }
.ko-fx i:nth-child(5) { --dx: 0px; --dy: 90px; } .ko-fx i:nth-child(6) { --dx: -64px; --dy: 64px; }
.ko-fx i:nth-child(7) { --dx: -92px; --dy: 0px; } .ko-fx i:nth-child(8) { --dx: -64px; --dy: -64px; }
@keyframes ko-spark { 0%, 62% { opacity: 0; transform: translate(0, 0); } 63% { opacity: 1; transform: translate(0, 0); } 80% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 81%, 100% { opacity: 0; } }
.ko-ring { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border: 4px solid #fde047; opacity: 0; animation: ko-ring 3s steps(5) infinite; }
@keyframes ko-ring { 0%, 62% { opacity: 0; transform: scale(.5); } 63% { opacity: 1; transform: scale(1); } 78% { opacity: 0; transform: scale(9); } 100% { opacity: 0; } }
.ko-swish { top: 2%; font-size: clamp(30px, 3.2vw, 48px); }
@keyframes ko-swish { 0%, 62% { opacity: 0; transform: translateX(-50%) scale(.4); } 63% { opacity: 1; transform: translateX(-50%) scale(1.25); } 66%, 84% { opacity: 1; transform: translateX(-50%) scale(1); } 85%, 100% { opacity: 0; } }
@media (max-width: 900px) {
  .ko-banner-text { max-width: none; }
  .ko-banner { padding: 22px 20px 260px; }
  .ko-banner::before { background: linear-gradient(180deg, rgba(5,5,25,.92) 0%, rgba(5,5,25,.7) 40%, rgba(5,5,25,0) 62%); }
  .ko-stage { left: -50%; top: auto; bottom: calc(-0.486 * (100vw - 32px) + 10px); }
}
/* v2 doladění: míč letí až po odhodu (bez zdvojení se spritem), KOŠ! vedle koše, kulatý kruh */
@keyframes ko-shoot { 0% { background-position: 0 0; } 30% { background-position: 50% 0; } 46% { background-position: 100% 0; } 92% { background-position: 0 0; } }
@keyframes ko-ball-y {
  0%, 45% { transform: translateY(150%); opacity: 0; }
  46% { transform: translateY(150%); opacity: 1; animation-timing-function: cubic-bezier(.2,.7,.4,1); }
  56% { transform: translateY(-170%); animation-timing-function: cubic-bezier(.6,0,.8,.4); }
  63% { transform: translateY(30%); }
  72% { transform: translateY(240%); opacity: 1; }
  76%, 100% { transform: translateY(240%); opacity: 0; }
}
.ko-swish { left: 57%; top: 11%; }
.ko-ring { border-radius: 50%; border-width: 3px; }
@keyframes ko-ring { 0%, 62% { opacity: 0; transform: scale(.5); } 63% { opacity: .9; transform: scale(1); } 76% { opacity: 0; transform: scale(7); } 100% { opacity: 0; } }
/* zaměřovač je pod bannery mistrů → návod pod ním */
.ko-aimhint { top: 69%; width: 19%; }
@media (max-width: 640px) { .ko-aimhint { top: calc((100vw - 32px) * 9 / 16 * 0.69); } }
/* Nová hra nahoře vedle zvuku a celé obrazovky, stejně vysoká jako ikony */
.ko-topbtns .ko-pxbtn.ko-new { height: 46px; padding: 0 16px; margin: 0 6px 0 0; font-size: 24px; box-shadow: 0 -3px 0 0 #fff, 0 3px 0 0 #fff, -3px 0 0 0 #fff, 3px 0 0 0 #fff, 0 0 0 5px #000; }
.ko-canvas-wrap > .ko-queue { border-right-width: 270px; }
.ko-canvas-wrap:has(> .ko-overlay:not([hidden])) .ko-topbtns .ko-new { display: none; }
@media (max-width: 640px) {
  .ko-topbtns .ko-pxbtn.ko-new { height: 38px; padding: 0 8px; font-size: 18px; flex: 0 0 auto; }
  .ko-canvas-wrap > .ko-queue { border-right-width: 196px; }
}
/* Vyřazovák banner v3: scéna kreslená plátnem (stejná animace jako ve hře), efekty spouští JS */
.ko-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ko-banner::before { z-index: 1; }
.ko-fx, .ko-swish { z-index: 2; }
.ko-fx { position: absolute; width: 0; height: 0; }
.ko-fx i, .ko-ring, .ko-swish { animation: none; opacity: 0; }
.ko-fx.on i { animation: ko-spark2 .9s steps(6) forwards; }
.ko-fx.on .ko-ring { animation: ko-ring2 .7s steps(5) forwards; }
.ko-swish { position: absolute; transform: translateX(-50%); }
.ko-swish.on { animation: ko-swish2 1s steps(1) forwards; }
@keyframes ko-spark2 { 0% { opacity: 1; transform: translate(0, 0); } 90% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes ko-ring2 { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(7); } }
@keyframes ko-swish2 { 0% { opacity: 1; transform: translateX(-50%) scale(1.25); } 8%, 85% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; } }
/* fronta: větší obličeje, rozsvěcí se postupně (bez poskakování) */
.ko-queue { gap: 8px; margin-top: 14px; }
.ko-queue img { width: 54px; height: 54px; animation: none; transition: filter .3s, box-shadow .3s; }
.ko-queue img.on { filter: none; box-shadow: 0 0 0 3px #fde047; }
@media (max-width: 900px) {
  .ko-banner { padding-bottom: 280px; }
  .ko-queue img { width: 46px; height: 46px; }
}
@media (max-width: 900px) {
  .ko-banner { padding-bottom: 270px; }
  .ko-canvas { top: auto; bottom: 0; height: 310px; }
  .ko-banner::before { background: linear-gradient(180deg, rgba(5,5,25,1) 0%, rgba(5,5,25,.95) 38%, rgba(5,5,25,.35) 52%, rgba(5,5,25,0) 64%); }
}
@media (max-width: 900px) { .ko-banner { padding-bottom: 330px; } .ko-canvas { height: 330px; } .ko-banner::before { background: linear-gradient(180deg, rgba(5,5,25,1) 0%, rgba(5,5,25,.9) 40%, rgba(5,5,25,0) 52%); } }
/* STOP pod zaměřovačem, pod ním návod na klávesy (zaměřovač: střed 86,4 % šířky, 34–68 % výšky) */
@media (min-width: 641px) {
  .ko-btns { left: 86.4%; right: auto; bottom: auto; top: 70%; transform: translateX(-50%); }
  .ko-aimhint { top: 84%; }
}
/* Nová hra: stejná výška a rámeček jako ikony zvuku a celé obrazovky (52 × 49 px, tenký bílý rámeček s černým okrajem) */
.ko-topbtns .ko-pxbtn.ko-new { box-sizing: border-box; height: 49px; padding: 0 14px; margin: 0; border: 2px solid #f0f0f0; border-radius: 3px; background: #170f0c; box-shadow: 0 0 0 1px #000; font-size: 22px; line-height: 1; }
@media (max-width: 640px) { .ko-topbtns .ko-pxbtn.ko-new { height: 40px; font-size: 18px; padding: 0 8px; } }
/* Fan zóna: merch karta s bannerem */
.promo-merch-banner { display: block; width: 100%; aspect-ratio: 1540 / 724; object-fit: cover; object-position: center 30%; }
.promo-section { padding-top: 8px; }
/* fronta: jméno pod obličejem */
.ko-q { display: grid; justify-items: center; gap: 6px; }
.ko-q b { font-family: "Jersey 10", var(--font-head); font-weight: 400; font-size: 18px; line-height: 1; letter-spacing: 1px; text-transform: uppercase; color: #a1a1aa; text-shadow: 2px 2px 0 #000; transition: color .3s; }
.ko-q.on img { filter: none; box-shadow: 0 0 0 3px #fde047; }
.ko-q.on b { color: #fde047; }
@media (max-width: 900px) { .ko-q b { font-size: 15px; } }
@media (min-width: 641px) {
  .ko-btns { transform: translateX(-50%); right: auto; bottom: auto; }
  .ko-btns .ko-pxbtn.ko-stop { margin: 6px 0; }
  .ko-aimhint { width: auto; white-space: nowrap; transform: translateX(-50%); right: auto; }
}
/* rámeček Nová hra stejně vysoký jako viditelný rámeček ikon (ikony mají kolem rámečku 2–3 px okraj) */
.ko-topbtns .ko-pxbtn.ko-new { height: 44px; align-self: center; }
@media (max-width: 640px) { .ko-topbtns .ko-pxbtn.ko-new { height: 36px; } }
.ko-topbtns .ko-pxbtn.ko-new { height: 45px; transform: translateY(1px); }
/* trofeje v profilu hráče vedou na stránku Trofeje */
a.award-pill { color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.award-pill:hover { border-color: var(--orange); transform: translateY(-2px); }
/* Profil hráče: kariérní maxima */
.career-max { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cm-card { display: grid; gap: 6px; align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.cm-card:hover { border-color: var(--orange); transform: translateY(-2px); }
.cm-label { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.cm-value { font-family: var(--font-head); font-weight: 400; font-size: 40px; line-height: 1; color: var(--orange); }
.cm-game { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.cm-game small { display: block; font-weight: 500; color: var(--muted); font-size: 13px; }
.cm-logo { width: 32px; height: 32px; object-fit: contain; flex: none; }
@media (max-width: 760px) { .career-max { grid-template-columns: 1fr; } }

/* ===== Mobilní menu hry (tlačítko + vyskakovací okno) – jen na mobilu ===== */
.ko-menubtn, .ko-pop { display: none; }
.ko-menubtn i { position: relative; display: block; width: 22px; height: 18px; margin: auto;
  background: linear-gradient(#fff,#fff) 0 0/100% 4px no-repeat, linear-gradient(#fff,#fff) 0 7px/100% 4px no-repeat, linear-gradient(#fff,#fff) 0 14px/100% 4px no-repeat; }
.ko-pop:not([hidden]) { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0,0,0,.72); }
.ko-pop-box { display: grid; gap: 12px; width: min(300px, 86%); padding: 18px; background: #0b0b0d; font-family: "Jersey 10", var(--font-head); text-align: center;
  box-shadow: 0 -3px 0 0 #fff, 0 3px 0 0 #fff, -3px 0 0 0 #fff, 3px 0 0 0 #fff, 0 0 0 6px #000; }
.ko-pop-box h2 { margin: 0 0 4px; font-family: inherit; font-weight: 400; font-size: 34px; letter-spacing: 2px; text-transform: uppercase; color: #ef4444; }
.ko-pop-btn { padding: 10px; border: 2px solid #f0f0f0; border-radius: 3px; background: #170f0c; color: #fff; font: inherit; font-size: 24px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.ko-pop-btn b { font-weight: 400; color: #fde047; }
.ko-pop-btn.ko-pop-close { background: #dc2626; border-color: #dc2626; }

@media (max-width: 640px) {
  .ko-topbtns { display: none !important; }
  .ko-menubtn { display: grid; position: absolute; z-index: 6; width: 44px; height: 44px; padding: 0; border: 2px solid #f0f0f0; border-radius: 3px; background: #170f0c; box-shadow: 0 0 0 1px #000; cursor: pointer; }
  .ko-canvas-wrap:has(> .ko-overlay:not([hidden])) .ko-menubtn { display: none; }
}

/* ===== Mobil na výšku ===== */
@media (max-width: 640px) {
  .ko-menubtn { top: 12px; right: 10px; }
  .ko-canvas-wrap > .ko-queue { border-right-width: 62px; }
  /* menu hry: vycentrované, přes celou šířku, hodnoty na jednom řádku */
  .ko-overlay:not(.ko-splash-on) { padding: 18px 12px 10px; justify-items: center; }
  .ko-overlay:not(.ko-splash-on) .ko-menu { width: 100%; max-width: 380px; margin: 0 auto; }
  .ko-overlay:not(.ko-splash-on) .ko-mrow { grid-template-columns: 14px 82px 24px 1fr 24px; font-size: 21px; }
  .ko-mval { white-space: nowrap; }
  .ko-overlay:not(.ko-splash-on) .ko-mstart { justify-items: center; }
  .ko-overlay:not(.ko-splash-on) .ko-mstart button { width: 80%; }
  /* když je otevřené menu, schovat prázdný pruh hráčů a panel pod hřištěm */
  .ko-canvas-wrap:has(> .ko-overlay:not([hidden])) > .ko-queue,
  .ko-canvas-wrap:has(> .ko-overlay:not([hidden])) .ko-hud { display: none; }
}


@media (max-width: 640px) {
  .ko-overlay:not(.ko-splash-on) { grid-template-columns: 1fr; padding: 18px 12px 10px; gap: 0; }
}
/* Statistiky: rekordy; profil: kariérní maxima ve 4 sloupcích (s bilancí) */
.records { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#player-records { grid-template-columns: repeat(4, 1fr); }
.career-max { grid-template-columns: repeat(4, 1fr); }
.rec-player { display: flex; align-items: center; gap: 12px; }
.rec-player > span { display: grid; gap: 2px; }
.rec-face { width: 52px; height: 52px; border-radius: 50%; background-size: cover; background-position: center 20%; flex: none; border: 2px solid var(--line); }
.cm-card .plink { font-weight: 800; }
@media (max-width: 1000px) { .records, #player-records, .career-max { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .records, #player-records, .career-max { grid-template-columns: 1fr; } }
.rec-name { font-weight: 800; font-size: 16px; }
.kpi-note { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.career-max { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .career-max { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .career-max { grid-template-columns: 1fr; } }
.kpi-note { display: inline; font-family: var(--font-body); font-size: 14px; margin: 0 0 0 10px; vertical-align: middle; white-space: nowrap; }
/* playoff: štítek fáze v řádku zápasu */
.phase-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 4px; background: #fde047; color: #000; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; vertical-align: 1px; }
/* preview: klíčoví hráči proti soupeři */
.kp-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kp-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; color: inherit; text-decoration: none; transition: border-color .15s; }
.kp-card:hover { border-color: var(--orange); }
.kp-face { width: 52px; height: 52px; border-radius: 50%; background-size: cover; background-position: center 20%; flex: none; border: 2px solid var(--line); }
.kp-card b { display: block; font-size: 16px; }
.kp-card small { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .kp-list { grid-template-columns: 1fr; } }
/* patička: Klub, Tým, Fan zóna */
.site-footer .footer-top { grid-template-columns: auto repeat(3, minmax(130px, auto)) 1fr; gap: 40px 64px; }
@media (max-width: 900px) { .site-footer .footer-top { grid-template-columns: 1fr 1fr; gap: 36px 20px; } }
/* CTA: trojúhelník kreslený CSS (na iOS se znak ▶ mění v emoji) */
.ko-banner-start { display: inline-flex; align-items: center; gap: 12px; }
.ko-banner-start i { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent currentColor; }
@media (max-width: 900px) {
  /* mobil: tlačítko přes celou šířku, odsazené od fronty i od hřiště */
  .ko-banner { padding-bottom: 352px; }
  .ko-banner-start { justify-self: stretch; justify-content: center; margin-top: 18px; padding: 8px 20px 6px; }
}
@media (max-width: 900px) {
  /* mobil: nápis a obličeje na střed, hřiště se střelcem pod nimi, tlačítko Hrát až pod hřištěm */
  .ko-banner { align-items: stretch; padding-bottom: 456px; }
  .ko-banner > .ko-banner-text { position: static; max-width: none; justify-items: center; text-align: center; }
  .ko-banner-text > * { position: relative; z-index: 3; }
  .ko-queue { justify-content: center; }
  .ko-canvas { bottom: 104px; height: 330px; }
  .ko-banner::before { background: linear-gradient(180deg, rgba(5,5,25,1) 0%, rgba(5,5,25,.9) 30%, rgba(5,5,25,0) 40%); }
  .ko-banner .ko-banner-start { position: absolute; left: 20px; right: 20px; bottom: 22px; margin: 0; z-index: 3; }
  .ko-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 104px; background: #05051a; z-index: 1; pointer-events: none; }
}
/* zaměřovač mimo hřiště – jen na mobilu */
.ko-aim2 { display: none; }
@media (max-width: 640px) {
  .ko-hud-left { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; justify-items: stretch; }
  .ko-hud .ko-scard { width: auto; margin: 6px; }
  .ko-aim2 { display: block; width: 116px; height: 116px; image-rendering: pixelated; background: #0b0b0d; cursor: pointer; touch-action: manipulation;
    box-shadow: 0 -3px 0 0 #e4e4e7, 0 3px 0 0 #e4e4e7, -3px 0 0 0 #e4e4e7, 3px 0 0 0 #e4e4e7, 0 0 0 6px #000; margin: 6px 6px 6px 0; }
  .ko-hud-left:has(.ko-shooter[hidden]) .ko-aim2 { display: none; }
  .ko-aimhint { display: none !important; }
  /* úvodní obrazovka celá v jednom boxu: hřiště se při ní schová, logo i „klepni a hraj“ jsou uvnitř */
  .ko-canvas-wrap:has(> .ko-overlay.ko-splash-on) .ko-field,
  .ko-canvas-wrap:has(> .ko-overlay.ko-splash-on) > .ko-queue { display: none; }
  .ko-overlay.ko-splash-on { position: static !important; inset: auto; padding: 28px 12px 24px; }
  .ko-splash img { width: 52vw; }
}
/* rozbalovací výběr místo čipů – jen na mobilu */
.chip-select { display: none; }
@media (max-width: 640px) {
  .has-chip-select { display: none !important; }
  .chip-select { display: block; width: 100%; min-width: 0; margin: 0 0 12px; padding: 12px 40px 12px 14px; font-weight: 700; font-size: 16px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f7941d' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; -webkit-appearance: none; appearance: none; border-radius: var(--radius); }
  .match-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .match-toolbar .chip-select { margin-bottom: 16px; }
}
/* STOP s podtitulkem jen na mobilu */
.ko-stop-sub { display: none; }
@media (max-width: 640px) {
  .ko-pxbtn.ko-stop { display: grid; justify-items: center; gap: 2px; padding: 8px 10px; line-height: 1; }
  .ko-stop-sub { display: block; font-size: 16px; letter-spacing: 1px; text-transform: none; opacity: .9; }
  /* karta hráče a zaměřovač vždy stejně vysoké */
  .ko-hud-left { align-items: stretch; }
  .ko-hud .ko-scard { box-sizing: border-box; height: 128px; overflow: hidden; align-content: center; }
  .ko-aim2 { width: 128px; height: 128px; box-sizing: border-box; align-self: center; }
}
@media (max-width: 640px) {
  .ko-hud .ko-scard .ko-face { width: 44px; height: 44px; }
  .ko-hud .ko-shooter .ko-sline { flex-wrap: wrap; gap: 0 8px; }
  .ko-hud .ko-shooter .ko-sline strong { font-size: 24px; }
  .ko-hud .ko-shooter .ko-sline small { font-size: 17px; }
  .ko-hud .ko-scard .ko-msg { font-size: 16px; }
}
/* vítěz jiný hráč: obličej nad nápisem XY WINS! */
.ko-result.win.other { top: 6%; }
.ko-win-face { display: block; width: clamp(80px, 16%, 150px); margin: 0 auto 10px; image-rendering: pixelated; box-shadow: 0 0 0 4px #fde047, 0 0 0 8px #000; animation: ko-logo .7s cubic-bezier(.2,1.5,.4,1) both; }
.ko-result.win.other strong { font-size: clamp(44px, 9vw, 120px); }
@media (max-width: 640px) { .ko-result.win.other { top: 4%; } .ko-win-face { width: 70px; margin-bottom: 6px; } }
/* vypadlí: stranou za oddělovačem, šedí s černým křížkem */
.ko-canvas-wrap > .ko-queue li.out .ko-q-photo b, .ko-queue li.out .ko-q-photo b { color: #000; background: rgba(160,160,165,.55); text-shadow: 0 0 2px #fff; }
.ko-canvas-wrap > .ko-queue li.out .ko-q-photo img { filter: grayscale(1) brightness(.75); }
.ko-canvas-wrap > .ko-queue li:not(.out) + li.out { margin-left: 18px; position: relative; }
.ko-canvas-wrap > .ko-queue li:not(.out) + li.out::before { content: ""; position: absolute; left: -14px; top: 6px; bottom: 6px; width: 3px; background: #3f3f46; }
/* mobil: tlačítko menu v pravém dolním rohu hřiště, pruh nahoře jen pro hráče */
@media (max-width: 640px) {
  .ko-field .ko-menubtn { top: auto; left: auto; right: 8px; bottom: 8px; z-index: 6; }
  .ko-canvas-wrap > .ko-queue { border-right-width: 0; }
  .ko-canvas-wrap:has(> .ko-overlay:not([hidden])) .ko-field .ko-menubtn { display: none; }
}
@media (max-width: 640px) {
  .ko-field { container-type: inline-size; }
  /* hřiště má poměr 16:9 → spodní okraj hřiště = 100cqw × 9/16 */
  .ko-field .ko-menubtn { bottom: auto; top: calc(100cqw * 9 / 16 - 52px); }
}
/* obličeje v pruhu hráčů přes celý rámeček (styly banneru .ko-queue img na úvodu sem nepatří) */
.ko-canvas-wrap > .ko-queue .ko-q-photo img { width: 100%; height: 100%; border: 0; box-shadow: none; filter: none; animation: none; object-fit: cover; }
.ko-canvas-wrap > .ko-queue li.out .ko-q-photo img { filter: grayscale(1) brightness(.75); }
/* Statistiky: hlavní sekce (Individuální / Týmové / Rekordy / Trofeje) */
.stats-sections { display: flex; gap: 6px; margin: 0 0 28px; border-bottom: 2px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.stats-sections::-webkit-scrollbar { display: none; }
.stab { padding: 12px 18px; font-weight: 800; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.stab:hover { color: var(--ink); }
.stab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }
.stats-sec > .sub-title.first { margin-top: 0; }
@media (max-width: 640px) { .stab { padding: 10px 12px; font-size: 12px; letter-spacing: 1px; } }
@media (max-width: 640px) {
  /* 4 záložky sekcí se vejdou na šířku telefonu */
  .stats-sections { gap: 0; }
  .stab { flex: 1 1 auto; text-align: center; padding: 10px 4px; font-size: 11px; letter-spacing: .5px; }
}
/* Kontakt: logo vlevo, telefon a e-mail jako odkazy */
.contact-logo { align-items: center; justify-content: center; }
.contact-logo { padding: 10px; }
.contact-logo img { width: auto; height: 190px; max-width: 100%; object-fit: contain; }
.contact-link { color: var(--ink); text-decoration: none; font-weight: 600; }
.contact-link:hover { color: var(--orange); }
/* Hero: animovaný slide Vyřazováku (stejná scéna jako banner ve Fan zóně) */
.ko-hero-canvas { animation: none; display: block; }
.fb-slide.ko-slide::after { background: linear-gradient(90deg, rgba(5,5,25,.88) 0%, rgba(5,5,25,.55) 38%, rgba(5,5,25,.05) 70%), linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 45%); }
.fb-slide.ko-slide .ko-fx, .fb-slide.ko-slide .ko-swish { z-index: 2; }
.ko-hero-queue { margin-top: 18px; }
.ko-hero-queue .ko-q img { width: 50px; height: 50px; }
@media (max-width: 560px) {
  .fb-slide.ko-slide::after { background: linear-gradient(0deg, rgba(5,5,25,.95) 0%, rgba(5,5,25,.7) 45%, rgba(5,5,25,0) 75%); }
  .ko-hero-queue .ko-q img { width: 40px; height: 40px; }
  .ko-hero-queue .ko-q b { font-size: 13px; }
}
.ko-hero-queue { justify-content: flex-start !important; }
/* hero Vyřazovák: titulek na klasickém místě, fronta hráčů svisle vpravo od hřiště */
.ko-hero-queue { position: absolute; z-index: 3; right: max(24px, calc((100vw - 1180px) / 2)); top: 50%; transform: translateY(-62%); flex-direction: column; gap: 10px; margin: 0; }
.ko-hero-queue .ko-q { gap: 4px; }
.ko-hero-queue .ko-q img { width: 52px; height: 52px; }
@media (max-width: 900px) {
  .ko-hero-queue { top: 14px; transform: none; right: 12px; gap: 6px; }
  .ko-hero-queue .ko-q img { width: 34px; height: 34px; border-width: 2px; }
  .ko-hero-queue .ko-q b { font-size: 11px; }
}
.team-map { margin: 36px 0 12px; }
/* Historie → Umístění: všechny sezóny od 1997/98, tituly zvýrazněné */
.tab-panel .placements { display: block; }
.pl-titles { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 18px; }
.pl-titles strong { font-family: var(--font-head); font-weight: 400; font-size: 34px; text-transform: uppercase; color: var(--orange); }
.pl-banners { display: flex; gap: 18px; flex-wrap: wrap; }
.pl-banners img { height: 220px; width: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.pl-card { display: grid; gap: 2px; justify-items: center; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 8px; }
.pl-card .pl-season { font-weight: 800; font-size: 14px; }
.pl-card .pl-place { font-family: var(--font-head); font-size: 34px; line-height: 1.1; color: var(--ink); }
.pl-card .pl-league { color: var(--muted); font-size: 12px; }
.pl-card.unknown .pl-place { color: var(--muted); opacity: .5; }
.pl-card.champ { border-color: var(--orange); background: linear-gradient(180deg, rgba(247,148,29,.18), var(--card)); }
.pl-card.champ .pl-place { color: var(--orange); }
.pl-card.champ .pl-league { color: var(--orange); font-weight: 700; }
@media (max-width: 560px) { .pl-grid { grid-template-columns: repeat(3, 1fr); } .pl-banners { gap: 10px; } .pl-banners img { height: 140px; } }