/* Grand Final — zlatá podoba stránky finále a upoutávka na úvodu a v lize (kreslí app-final.js).
   Všechna pravidla jsou pod vlastními třídami (.gf, .gfh, .gfb, .gfc…), na ostatní stránky nesahají. */

/* ── stránka finálového zápasu: zlato místo barvy ligy ── */
.dt.gf { --acc: #f2d468; --grad: linear-gradient(90deg, #fff3bf, #f2d468 45%, #d9ae3a); --on: #1a1505; }
/* celá stránka do zlata (horní lišta, pozadí) — stejné hodnoty jako úvodní stránka; prohlížeč bez :has() nechá barvu ligy */
body:has(.dt.gf) { --acc: #f2d468; --grad: var(--gd); --tint: #2b2410; --on: #141414; }
.gfh { text-align: center; padding: 4px 0 30px; }
.gfh-k { color: var(--gold); font: 600 13px/1.3 var(--fm); letter-spacing: .34em; text-transform: uppercase; }
.gfh-t { margin: 14px 0 0; font: 900 96px/.95 var(--fd); font-stretch: 125%; text-transform: uppercase; letter-spacing: .005em;
  background: linear-gradient(180deg, #fff6cf, #f2d468 46%, #c99a2b); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 34px rgba(242,212,104,.22)); }
.gfh-s { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin-top: 20px; color: var(--ink2); font: 600 13px/1.3 var(--fm); letter-spacing: .14em; text-transform: uppercase; }
.gfh-s b { color: #fff; font-weight: 700; }
.gfh-s .gfch { color: var(--gold); font-size: 15px; } .gfh-s .gfch b { color: #fff; }
.gfcd { color: var(--gold); } .gfcd b { color: #fff; font-variant-numeric: tabular-nums; }
.gfh-s .btn.gfw { height: 34px; padding: 0 14px; letter-spacing: .06em; }
.dt.gf .vsb { border-color: rgba(242,212,104,.42); box-shadow: 0 0 0 1px rgba(242,212,104,.10), 0 26px 70px -38px rgba(242,212,104,.45); }
.dt.gf .vsb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #f2d468 18%, #fff3bf 50%, #f2d468 82%, transparent); }

/* ── cesta do finále ── */
.gfc > h3 .rname { color: #fff; font: 700 19px/1 var(--fb); letter-spacing: 0; text-transform: none; }
.gfrl { display: grid; gap: 8px; }
.gfr { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(255,255,255,.025);
  transition: border-color .2s, background-color .2s; }
.gfr:hover { border-color: rgba(242,212,104,.45); background: rgba(242,212,104,.06); }
.gfr-o { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; font: 600 14.5px/1.2 var(--fb); }
.gfr-o > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfr .num { font-size: 20px; }
.gfpl { margin: 22px 0 6px; }
.gft td.gfsv { color: var(--ink2); font: 500 12.5px var(--fm); text-align: right; white-space: nowrap; }

/* ── upoutávka na úvodu a v přehledu ligy ── */
.gfbw { padding: 0 0 6px; }
.gfbw.in { width: auto; padding: 0; margin: 26px 0 34px; }
.gfb { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 30px; padding: 26px 40px 28px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(242,212,104,.42); box-shadow: 0 0 0 1px rgba(242,212,104,.10), 0 26px 70px -40px rgba(242,212,104,.5);
  background: linear-gradient(104deg, color-mix(in srgb, var(--ca) 44%, #0c0c0f) 0, color-mix(in srgb, var(--ca) 12%, #0c0c0f) 36%, #0c0c0f 50%, color-mix(in srgb, var(--cb) 12%, #0c0c0f) 64%, color-mix(in srgb, var(--cb) 44%, #0c0c0f) 100%);
  transition: transform .3s var(--e), box-shadow .3s; }
.gfb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #f2d468 18%, #fff3bf 50%, #f2d468 82%, transparent); }
.gfb:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(242,212,104,.22), 0 30px 80px -36px rgba(242,212,104,.6); }
.gfb-side { display: flex; align-items: center; gap: 20px; min-width: 0; }
.gfb-side.r { flex-direction: row-reverse; text-align: right; }
.gfb-side b { min-width: 0; color: #fff; font: 800 30px/1.06 var(--fb); overflow-wrap: anywhere; }
.gfb-side.out { opacity: .5; }
.gfb-mid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.gfb-k { color: var(--gold); font: 600 11.5px/1.3 var(--fm); letter-spacing: .3em; text-transform: uppercase; }
.gfb-t { margin-top: 10px; font: 900 50px/.95 var(--fd); font-stretch: 125%; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(180deg, #fff6cf, #f2d468 46%, #c99a2b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gfb-s { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; margin-top: 14px; color: var(--ink2); font: 600 12px/1.3 var(--fm); letter-spacing: .14em; text-transform: uppercase; }
.gfb-s b { color: #fff; font-weight: 700; }
.gfb-cta { margin-top: 16px; color: var(--gold); font: 800 12px/1 var(--fd); font-stretch: 115%; letter-spacing: .14em; text-transform: uppercase; transition: letter-spacing .25s var(--e); }
.gfb:hover .gfb-cta { letter-spacing: .2em; }

/* ── tablet ── */
@media (max-width: 900px) {
  .gfh-t { font-size: clamp(54px, 9.4vw, 84px); }
  .gfb { gap: 18px; padding: 22px 24px 24px; }
  .gfb-side { gap: 14px; } .gfb-side b { font-size: 22px; }
  .gfb-side .tl { --s: 54px !important; }
  .gfb-t { font-size: clamp(30px, 5vw, 44px); }
}
/* ── telefon: loga nahoře proti sobě, nadpis pod nimi ── */
@media (max-width: 640px) {
  .gfh { padding-bottom: 22px; }
  .gfh-k { font-size: 10.5px; letter-spacing: .22em; }
  .gfh-t { margin-top: 10px; font-size: clamp(38px, 12.4vw, 60px); }
  .gfh-s { margin-top: 14px; gap: 8px 14px; font-size: 11px; letter-spacing: .1em; }
  .gfr { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 10px 12px; }
  .gfr > .lbl { grid-column: 1 / -1; }
  .gfb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 12px; padding: 20px 16px 22px; }
  .gfb-mid { grid-column: 1 / -1; grid-row: 2; }
  .gfb-side { flex-direction: column; gap: 10px; text-align: center; } .gfb-side.r { flex-direction: column; text-align: center; }
  .gfb-side b { font-size: 16px; }
  .gfb-t { font-size: clamp(30px, 10vw, 40px); }
  .gfb-k { font-size: 10px; letter-spacing: .2em; }
  .gfb-s { font-size: 11px; letter-spacing: .1em; }
  .gfbw.in { margin: 18px 0 26px; }
}
@media (prefers-reduced-motion: reduce) { .gfb, .gfb-cta, .gfr { transition: none; } .gfb:hover { transform: none; } }