/* Nový web GPM — vrstva aplikace: kostra, načítání, přechody mezi stránkami a efekty při najetí.
   Základ vzhledu je v gpm.css a base-pages.css; věci jednotlivých stránek v css-*.css. */
html { background: #0c0c0f; scrollbar-color: #33343d #0c0c0f; }
body { background: transparent; }
html.still *, html.still *::before, html.still *::after { animation: none !important; transition: none !important; }
::selection { background: color-mix(in srgb, var(--acc) 45%, transparent); color: #fff; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
html.still #view { min-height: 0; } html.still body.adminapp .adm { min-height: 0; } html.still .aside { height: auto; }
#view { min-height: 72vh; }
a { cursor: pointer; }

/* ── načítání ── */
#progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 200; background: #fff; opacity: 0; pointer-events: none; box-shadow: 0 0 12px #fff; }
#progress.on { width: 84%; opacity: .9; transition: width 2.6s cubic-bezier(.1, .7, .1, 1), opacity .1s; }
#progress.done { width: 100%; opacity: 0; transition: width .18s ease, opacity .3s ease .12s; }
.sk { height: 110px; border-radius: 14px; background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 70%); background-size: 300% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── přechody mezi stránkami (View Transitions; kde nejsou, stránka jen najede) ── */
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(22px); } }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
/* Animuje se skutečný obsah (ne snímek stránky), takže jde klikat i během přechodu.
   „backwards“ = po doběhnutí animace na prvku nic nezůstane (transform by jinak držel pevně umístěná okna uvnitř). */
#view.enter { animation: vt-in .34s var(--e) backwards; }
#view.enter-soft { animation: vt-fade-in .2s ease backwards; }
/* ukazatele aktivní položky: přejedou na nové místo */
.main { position: relative; }
.navind { position: absolute; bottom: -1px; left: 0; width: 0; height: 3px; background: var(--acc); opacity: 0; pointer-events: none;
  transition: left .36s var(--e), width .36s var(--e), opacity .2s, background-color .3s; }
.subin { display: contents; }
.sub .slogo { width: 23px; object-fit: contain; }      /* pevná šířka: položky neposkočí, až se logo načte */
.subind { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 99px; background: var(--grad); opacity: 0; pointer-events: none; z-index: 0;
  transition: left .36s var(--e), width .36s var(--e), opacity .2s; }
.sub a, .sub .crumb, .sub .r { position: relative; z-index: 1; }
.subin > a.on { background: none; }

/* ── kostra ── */
.top { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); }
.main a.on::after { display: none; }
.main a:not(.on)::before { content: ""; position: absolute; left: 19px; right: 19px; bottom: -1px; height: 3px; background: rgba(255,255,255,.28); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--e); }
.main a:not(.on):hover::before { transform: scaleX(1); }
.main a { transition: color .18s; } .main a:hover { color: #fff; }
.brand .p { transition: transform .35s var(--e); } .brand:hover .p { transform: rotate(-8deg) scale(1.1); }
.sub a { transition: color .25s, background-color .18s; } .sub a:not(.on):hover { color: #fff; background: rgba(255,255,255,.07); }
.sub .slogo { transition: transform .3s var(--e); } .slogoa:hover .slogo { transform: scale(1.12) rotate(-4deg); } .sub .slogoa { padding: 0; margin: 0; background: none !important; }
.searchw { position: relative; }
input.search { outline: none; color: #fff; font: 500 13.5px var(--fb); transition: width .3s var(--e), border-color .2s, background-color .2s; }
input.search::placeholder { color: #7d8092; } input.search:focus { width: 300px; border-color: var(--acc); background: rgba(255,255,255,.07); }
.sres { position: absolute; right: 0; top: 44px; width: 340px; z-index: 60; padding: 6px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: #121218; box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: vt-in .22s var(--e) both; }
.sres a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; } .sres a:hover, .sres a:first-child { background: rgba(255,255,255,.07); }
.sres b { display: block; color: #fff; font-weight: 700; font-size: 14px; } .sres small { color: var(--mut); font: 500 11px var(--fm); } .sres .none { padding: 12px; color: var(--mut); font-size: 13.5px; }
.livep { cursor: pointer; transition: filter .2s, transform .2s, opacity .2s; } .livep:hover, .mechip:hover, .admlink:hover { filter: brightness(1.25); }
.livep.off { opacity: .5; border-color: var(--line); background: none; color: var(--mut); cursor: default; } .livep.off i { background: var(--mut); animation: none; box-shadow: none; }
.mechip, .admlink { transition: filter .2s, transform .2s; }
.top .dock { top: 66px; right: 48px; animation: vt-in .24s var(--e) both; }
.livebar { animation: vt-fade-in .4s ease both; }
.sitefoot { display: flex; align-items: center; gap: 14px; width: 1280px; margin: 0 auto; padding: 26px 0 44px; border-top: 1px solid var(--line); color: var(--mut); font: 700 12px var(--fd); font-stretch: 118%; letter-spacing: .16em; }
.sitefoot img { height: 26px; } .sitefoot span { color: #fff; } .sitefoot i { margin-right: auto; font: 500 11px var(--fm); font-style: normal; letter-spacing: .08em; } .sitefoot a { transition: color .18s; } .sitefoot a:hover { color: var(--acc); }
body.adminapp .top, body.adminapp .sub, body.adminapp .livebar, body.adminapp .sitefoot { display: none; }

/* ── efekty při najetí ── */
.btn { position: relative; overflow: hidden; transition: transform .22s var(--e), filter .2s, box-shadow .25s, background-color .2s, border-color .2s; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-180%) skewX(-22deg); pointer-events: none; }
.btn:hover { filter: brightness(1.1); box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--acc) 80%, transparent); }
.btn:hover::after { transform: translateX(360%) skewX(-22deg); transition: transform .6s ease; }
.btn:active { transform: translateY(0) scale(.98); }
.btn.ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.42); box-shadow: none; }
.btn.off, .chip.off { opacity: .35; pointer-events: none; }
.chip { transition: transform .2s var(--e), border-color .2s, color .2s, background-color .2s, filter .2s; }
.chip:hover { border-color: rgba(255,255,255,.34); color: #fff; background-color: rgba(255,255,255,.07); } .chip.on:hover { filter: brightness(1.12); }
.card { transition: transform .28s var(--e), border-color .25s, box-shadow .3s, background-color .25s; }
a.card:hover, .card.hov:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acc) 55%, transparent); background: rgba(255,255,255,.055); box-shadow: 0 18px 44px -20px color-mix(in srgb, var(--acc) 70%, transparent); }
.t td { transition: background-color .15s; } .t tr:hover td { background: rgba(255,255,255,.04); } .t tr:hover td.rk { color: var(--acc); }
.who .nm { transition: color .15s; } a.who:hover .nm { color: var(--acc); }
.av { transition: box-shadow .2s, transform .25s var(--e); } a.who:hover .av, a:hover > .av { box-shadow: 0 0 0 2px var(--acc); transform: scale(1.08); }
.tl { transition: transform .25s var(--e); } a.who:hover .tl, a.card:hover .tl, .mc:hover .tl { transform: scale(1.14); }
.lb { transition: transform .25s var(--e), border-color .2s, background-color .2s; } a.lb:hover, .lb.hov:hover { box-shadow: inset 4px 0 0 var(--acc); border-color: color-mix(in srgb, var(--acc) 50%, transparent); background: rgba(255,255,255,.06); }
.pill { transition: filter .2s; }
th[title] { cursor: help; }
th.srt a { display: inline-block; color: inherit; transition: color .15s; } th.srt a:hover { color: #fff; } th.srt.on a { color: var(--acc); }

/* ── drobnosti ── */
.showall { display: block; padding: 14px 0 2px; text-align: center; color: var(--acc); font: 800 12px var(--fd); font-stretch: 115%; letter-spacing: .14em; } .showall:hover { filter: brightness(1.25); }
.pager { margin-top: 18px; gap: 12px; } .pager .chips { flex-wrap: nowrap; flex: none; } .pager .lbl { min-width: 0; }
#userbox { display: flex; align-items: center; gap: 12px; }
.emptyc { padding: 44px 30px; text-align: center; } .emptyc b { display: block; color: #fff; font: 800 19px var(--fb); } .emptyc p { margin: 8px 0 0; color: var(--mut); }
.sec .more { transition: letter-spacing .25s var(--e); } .sec .more:hover { letter-spacing: .2em; }
.crumb a { transition: color .15s; } .crumb a:hover { color: #fff; }

/* ── „Kde jsem?“: můj řádek je vždy zvýrazněný, po skoku se rozsvítí ── */
.chip.where { border-color: color-mix(in srgb, var(--acc) 60%, transparent); color: #fff; background: color-mix(in srgb, var(--acc) 14%, transparent); }
.chip.where b { color: var(--acc); }
.t tr.me td { background: color-mix(in srgb, var(--acc) 13%, transparent); } .t tr.me td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
.lb.me { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.youtag { display: inline-flex; align-items: center; height: 18px; margin-left: 8px; padding: 0 7px; border-radius: 5px; background: var(--grad); color: var(--on); font: 800 10px/1 var(--fd); font-stretch: 112%; letter-spacing: .12em; vertical-align: middle; }
@keyframes meflash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 12%, 60% { box-shadow: 0 0 0 3px var(--acc), 0 0 34px color-mix(in srgb, var(--acc) 60%, transparent); } }
.meflash { animation: meflash 2.2s ease 1; position: relative; z-index: 1; }
tr.meflash td { animation: meflashrow 2.2s ease 1; }
@keyframes meflashrow { 12%, 60% { background: color-mix(in srgb, var(--acc) 34%, transparent); } }

/* řádek, který jde rozkliknout celý */
[data-href] { cursor: pointer; }
.t tr[data-href]:hover td { background: color-mix(in srgb, var(--acc) 9%, transparent); }
a.ml.go { color: var(--acc) !important; font-weight: 600; } a.ml.go i { display: inline-block; font-style: normal; opacity: .6; transition: transform .2s var(--e), opacity .2s; }
tr[data-href]:hover a.ml.go i { transform: translateX(4px); opacity: 1; }

/* odkaz, na který se právě kliklo a jeho stránka se teprve načítá */
.main a.pend { color: #fff; } .sub a.pend { color: #fff; background: rgba(255,255,255,.1); }
/* přechod barev pod rámečkem se nesmí opakovat — jinak je na okraji tenká čára v barvě z druhého konce */
.vsb, .board, .headc, .potm, .vh, .ped, .pped, .pn { background-origin: border-box; background-repeat: no-repeat; }

/* pozadí s logem týmu místo značky P (stránka týmu a hráče) */
.bg i { transition: opacity .5s ease; }
.bg i.logo { -webkit-mask: none; mask: none; right: -150px; top: 150px; width: 820px; height: 820px; opacity: .085;
  background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; filter: saturate(.85); }
/* telefon: tlačítko nabídky, její rozšíření o účet a ztmavení stránky — na počítači a tabletu nejsou vidět (css-mobile.css) */
.burger, .main .mx, .scrim { display: none; }

/* ── archiv uzavřené sezóny (adresa s ?season=N): pruh pod lištou sekce a přepínač sezón. Mimo archiv na stránce nejsou. ── */
.archbar { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px 16px; min-height: 46px; padding: 7px 48px; border-bottom: 1px solid rgba(242,212,104,.26);
  background: linear-gradient(90deg, rgba(242,212,104,.11), rgba(242,212,104,.04) 60%); color: var(--mut); font: 500 13px/1.35 var(--fb); }
.archbar .ab-tag { flex: none; color: var(--gold); font: 800 12px/1 var(--fd); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.archbar .ab-ro { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; border: 1px solid rgba(242,212,104,.45); color: var(--gold);
  font: 600 10px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.archbar .ab-note { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archbar .ab-back { flex: none; margin-left: 2px; color: var(--gold); font: 800 11.5px/1 var(--fd); font-stretch: 115%; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: filter .18s; }
.archbar .ab-back:hover { filter: brightness(1.25); }
.archbar.pre { border-bottom-color: rgba(34,224,255,.3); background: linear-gradient(90deg, rgba(34,224,255,.1), rgba(34,224,255,.03) 60%); }
.archbar.pre .ab-tag, .archbar.pre .ab-back { color: #7fe9ff; } .archbar.pre .ab-ro { color: #7fe9ff; border-color: rgba(34,224,255,.45); }
.archbar.warn { border-bottom-color: rgba(255,93,108,.34); background: linear-gradient(90deg, rgba(255,93,108,.12), rgba(255,93,108,.04) 60%); }
.archbar.warn .ab-tag { color: #ff8a95; }
.archbar.warn .ab-note { color: var(--ink2); white-space: normal; }
.sesw { flex: none; height: 30px; max-width: 100%; padding: 0 30px 0 13px; border-radius: 99px; border: 1px solid rgba(255,255,255,.2); color: #fff; font: 600 12px/1 var(--fm); letter-spacing: .03em; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23c8cad4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5L6 6l4.5-4.5'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 7px;
  transition: border-color .18s, background-color .18s; }
.sesw:hover, .sesw:focus { border-color: rgba(255,255,255,.42); background-color: rgba(255,255,255,.1); outline: none; }
.sesw:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.sesw option { background: #15151b; color: #fff; }
.sub .r .sesw { height: 28px; }