/* ============================================================
 *  style.css — vzhled dashboardu "Útěchovskými lesy"
 *  Paleta (neměnit — navázaný design):
 *    modrá  #005478 | červená #b1063a | zelená #a2cd39
 *    vínová #73101c | olivová #4a4500 | pozadí #fccea8→#fef5ed
 *  Cílové rozlišení: fixních 1920×1080 (projekce na TV).
 * ============================================================ */

* { margin: 0; padding: 0; user-select: none; font-family: "Trebuchet MS", sans-serif; }
html, body { height: 100vh; overflow: hidden; }

body { background: linear-gradient(-10deg, #fccea8, #fef5ed); cursor: none; }
body.show-cursor { cursor: default; }

/* --- Plátno 1920×1080, vycentrované; vše je uvnitř --- */
#view {
    position: absolute; width: 1920px; height: 1080px;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    overflow: hidden;
}
#leaves { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* --- Hlavička (beze změny proti původní verzi) --- */
#date  { position: absolute; left: 60px;  top: 20px; font-size: 36px; font-weight: bold; }
#clock { position: absolute; right: 60px; top: 20px; font-size: 36px; font-weight: bold; }
.blink { animation: blinker 1s step-start infinite; }
@keyframes blinker { 50% { opacity: 0; } }

#title1 { text-align: center; padding-top: 10px; font-size: 36px; font-weight: bold; }
#title2 {
    text-align: center; margin-top: 15px; font-size: 84px; font-weight: bold;
    color: #a2cd39; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #73101c;
}
#head  { font-size: 28px; border-bottom: solid 3px #4a4500; padding: 0 30px 10px 0; margin: 20px 40px 5px 40px; }
/* celkové počítadlo vpravo na řádku hlavičky (končí před razítkem) */
#total   { position: absolute; right: 270px; top: 177px; }
#total b { display: inline-block; min-width: 1.9em; text-align: right; font-size: 36px; color: #005478; position: relative; top: 3px; }
#stamp { position: absolute; top: 100px; right: 50px; transform: rotate(9deg); width: 200px; }

/* --- Seznam členů --- */
#playground { position: relative; width: 1540px; margin: 14px auto 0; font-size: 76px; }

.member {
    position: absolute; z-index: 0; display: block; width: 100%;
    height: 90px; line-height: 90px; white-space: nowrap;   /* řádek 90 px + mezera 12 px = CONFIG.rowHeight */
    font-weight: bold; color: #005478;
    transition: top .9s cubic-bezier(.65, 0, .35, 1);   /* = Anime.MOVE_MS */
}
.member.red { color: #b1063a; }

.number {
    position: relative; display: inline-block; vertical-align: middle;
    width: 104px; margin: 0 48px 0 8px; top: -7px;
    line-height: 70px; text-align: center; font-size: 60px;
    border-radius: 8px; padding: 2px 4px;
    /* barvu lze přebít podle startovního čísla (CONFIG.bibColors → --bib-bg / --bib-fg) */
    color: var(--bib-fg, #fff); background: var(--bib-bg, #005478);
    box-shadow: inset 0 0 0 3px var(--bib-ring, transparent), 0 2px 5px rgba(0, 0, 0, .25);
}
.red .number { background: var(--bib-bg, #b1063a); }

/* délka trati: jednotná barva, km zarovnané doprava, za nimi sloupec fáborků */
.race { position: absolute; right: 0; top: 0; height: 90px; display: flex; align-items: center; color: #4a4500; }
.race .km { text-align: right; }

/* fáborky = barvy značení trati, zkosené jako vlající pásky; sloupec zarovnaný doleva */
.track { display: flex; gap: 7px; min-width: 76px; margin-left: 24px; justify-content: flex-start; position: relative; top: -3px; }
.track i {
    display: block; width: 16px; height: 60px; border-radius: 3px;
    background: var(--c); transform: skewX(-14deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}
.track i { transform-origin: 50% 100%; }
.track i.light { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .25); }

/* písmena jména (kvůli animacím každé zvlášť) */
.name          { position: relative; top: 1px; }
.name .l       { display: inline-block; }
.name .l.fixed { text-align: center; }
.caret {
    display: inline-block; width: 6px; height: .8em; margin-left: 3px;
    vertical-align: -.05em; background: currentColor;
    animation: blinker .5s step-start infinite;
}

/* --- Zvýraznění čerstvě přihlášeného / opraveného --- */
.band {
    position: absolute; z-index: -1; inset: 0 -6px 0 -24px;
    border-radius: 14px; border-left: 10px solid #005478;
    background: rgba(255, 255, 255, .65);
    transform-origin: left center;
    opacity: 0; transition: opacity 4s ease;
}
.red .band { border-left-color: #b1063a; }
.fresh .band { opacity: 1; transition: opacity .3s ease; animation: freshGlow 2.4s ease-in-out infinite; }
@keyframes freshGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(162, 205, 57, .4); }
    50%      { box-shadow: 0 0 10px 3px rgba(162, 205, 57, .95); }
}

/* --- Indikace výpadku spojení (diskrétní) --- */
#status {
    position: absolute; left: 60px; top: 72px;
    display: flex; align-items: center; gap: 10px;
    font-size: 20px; color: #b1063a;
    opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
#status::before {
    content: ''; width: 14px; height: 14px; border-radius: 50%;
    background: #b1063a; animation: blinker 1s step-start infinite;
}
body.offline #status { opacity: 1; }

/* --- Razítko (stamp.js) --- */
.stamp-flyer { position: absolute; z-index: 20; transform: rotate(9deg); pointer-events: none; will-change: transform; }
.imprint {
    position: absolute; z-index: 1; pointer-events: none;
    mix-blend-mode: multiply; opacity: .92;
}
.imprint img { display: block; width: 100%; height: 100%; }
.imprint .label {
    position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%) rotate(-4deg);
    padding: 0 8px; border: 3px solid; border-radius: 5px;
    font-size: 20px; line-height: 26px; letter-spacing: 2px; font-weight: bold;
    background: rgba(255, 255, 255, .8);
}
.ink-drop { position: absolute; z-index: 21; border-radius: 50%; pointer-events: none; }

/* velikonoční vajíčko: list na razítku */
.leaf-egg {
    position: absolute; z-index: 22; width: 34px; height: 52px; margin: -26px 0 0 -17px;
    background: var(--c); border-radius: 0 100% 0 100%; opacity: .9;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .25); pointer-events: none;
}
.leaf-egg::after {
    content: ''; position: absolute; left: 50%; top: 4px; bottom: -8px; width: 2px;
    background: rgba(254, 245, 237, .8); transform: rotate(-33deg); transform-origin: top;
}