:root{
  --night:#15171d;
  --asphalt:#252932;
  --asphalt-2:#2f3440;
  --paper:#ece8dc;
  --muted:#a9a79d;
  --rally:#f5c518;
  --pear:#9ccc3c;
  --sky:#5aa9e6;
  --gravel:#b58a56;
  --line:#3b4150;
  --display:Impact,"Arial Narrow Bold","Haettenschweiler","Arial Black",sans-serif;
  --text:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--paper);font:17px/1.6 var(--text)}
a{color:var(--rally)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
code{background:var(--asphalt-2);padding:.1em .4em;border-radius:3px;font-size:.92em}
.small{color:var(--muted);font-size:.92rem}

/* hero: cesta v perspektíve, jediný pohyb na stránke */
.hero{position:relative;min-height:min(86vh,680px);display:flex;align-items:flex-start;overflow:hidden;background:#78b9ec}
.scene{position:absolute;inset:0}
.sun{position:absolute;left:72%;top:8%;width:clamp(70px,10vw,130px);aspect-ratio:1;border-radius:50%;background:#ffe9a3}
.hills{position:absolute;left:0;right:0;bottom:34%;height:20%;background:#5b6e8f;clip-path:polygon(0 100%,0 55%,12% 30%,22% 60%,36% 15%,50% 55%,64% 25%,80% 62%,92% 35%,100% 58%,100% 100%)}
.field{position:absolute;left:0;right:0;bottom:0;height:34%;background:repeating-linear-gradient(0deg,#4f8f34 0 14px,#468a2e 14px 28px)}
.road{position:absolute;left:50%;bottom:0;width:150%;height:34%;transform:translateX(-50%);
  clip-path:polygon(41% 0,59% 0,100% 100%,0 100%);
  background:
    repeating-linear-gradient(0deg,transparent 0 22px,rgba(236,232,220,.9) 22px 40px) center/6% 100% no-repeat,
    repeating-linear-gradient(0deg,#4a4e59 0 24px,#444853 24px 48px);
  animation:drive 1.1s linear infinite}
@keyframes drive{to{background-position:center 48px,0 48px}}
.hero-text{position:relative;z-index:1;width:min(100%,1040px);margin:0 auto;padding:clamp(28px,6vw,64px) 20px 40px}
h1{margin:0;font:italic 400 clamp(3.2rem,11vw,7rem)/.95 var(--display);letter-spacing:.01em;color:#fff;text-shadow:4px 4px 0 #1d3a14,7px 7px 0 var(--pear)}
.lead{max-width:30em;font-size:1.2rem;margin:1.2rem 0 1.3rem;color:#0f1d2b;font-weight:500}
.cta-row .small{color:#1e3a52}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0}
.btn{display:inline-block;background:var(--rally);color:#1a1a1a;font-weight:700;text-decoration:none;padding:.8em 1.4em;border-radius:6px;box-shadow:0 4px 0 #9b7e0c}
.btn:hover{background:#ffd43b}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #9b7e0c}
@media (prefers-reduced-motion:reduce){.road{animation:none}html{scroll-behavior:auto}}

.toc{position:sticky;top:0;z-index:5;display:flex;gap:6px 22px;flex-wrap:wrap;justify-content:center;padding:12px 16px;background:var(--asphalt);border-bottom:3px solid var(--rally)}
.toc a{color:var(--paper);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.toc a:hover{border-bottom-color:var(--rally)}

main{width:min(100%,1040px);margin:0 auto;padding:0 20px 40px}
section{padding:56px 0 8px}
h2{margin:0 0 .6rem;font:400 2.3rem/1.1 var(--display);letter-spacing:.02em;color:var(--rally)}
h3{margin:1.6rem 0 .4rem;font-size:1.15rem}
p{max-width:44em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
@media (max-width:760px){.two{grid-template-columns:1fr}}
ul.plain{list-style:none;margin:.4rem 0;padding:0}
ul.plain li{display:grid;grid-template-columns:9em 1fr;gap:0 .8em;padding:.45em 0;border-bottom:1px solid var(--line)}
ul.plain b{color:var(--paper)}
ul.plain.ach li{grid-template-columns:14em 1fr}
@media (max-width:620px){ul.plain li,ul.plain.ach li{grid-template-columns:1fr}}

/* zmeny: skutočná postupnosť verzií */
.timeline{list-style:none;margin:1.2rem 0 0;padding:0 0 0 26px;border-left:4px solid var(--line)}
.timeline>li{position:relative;padding:0 0 22px}
.timeline>li::before{content:"";position:absolute;left:-36px;top:.45em;width:16px;height:16px;border-radius:50%;background:var(--night);border:4px solid var(--rally)}
.timeline>li:first-child::before{background:var(--rally)}
.timeline h3{margin:0 0 .3rem;font-size:1.25rem}
.timeline ul{margin:.3rem 0;padding-left:1.2rem}
.timeline li li{margin:.15em 0}

/* tabuľky */
.tablewrap{overflow-x:auto;margin:1rem 0;border:1px solid var(--line);border-radius:6px;background:var(--asphalt)}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:.9rem}
th,td{padding:.5em .55em;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
thead th{position:sticky;top:0;background:var(--asphalt-2);color:var(--rally);font-weight:600}
th:first-child,td:first-child,th[scope=row]{text-align:left}
tbody th{font-weight:600;color:var(--paper)}
tbody tr:hover{background:rgba(245,197,24,.07)}
tbody tr:last-child>*{border-bottom:0}
td:nth-last-child(-n+2),thead th:nth-last-child(-n+2){text-align:left}
th small{display:block;font-weight:400;color:var(--muted);white-space:normal;max-width:30em;font-size:.82rem;margin-top:.1em}
.tracks td:nth-child(3){text-align:left;width:34%}
.tracks tr.grp th{background:var(--night);color:var(--rally);text-align:left;font-size:1rem;letter-spacing:.02em;padding-top:.9em}
.tracks tr.grp:hover{background:none}

.lvl,.av{display:inline-block;padding:.05em .6em;border-radius:99px;font-size:.85rem;font-weight:600;border:1px solid currentColor}
.l0,.l1{color:#7fd16b}.l2{color:#f1c84a}.l3{color:#f39a45}.l4{color:#ef6a5a}.l5{color:#8fb6f0}
.av.Štart{color:#7fd16b}.av.Nákup{color:#f1c84a}.av.Achiev{color:#f39a45}

.bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--night);min-width:140px}
.bar i,.key i{display:block}
.s-tarmac{background:#7c818f}.s-gravel{background:var(--gravel)}.s-snow{background:#e9f2fb}.s-sand{background:#e6cd7f}
.key{display:inline-flex;align-items:center;gap:5px;margin-right:12px;white-space:nowrap}
.key i{width:14px;height:14px;border-radius:3px}

footer{padding:30px 20px 50px;text-align:center;color:var(--muted);border-top:1px solid var(--line)}
footer p{margin:0 auto}

/* v15: bahno, efektívny grip, ukážky, požiadavky */
.s-mud{background:#6e4a2e}
table.eff td{text-align:right;font-variant-numeric:tabular-nums}
.e-hi{background:rgba(70,170,90,.28)}.e-mid{background:rgba(240,200,60,.16)}.e-lo{background:rgba(210,70,60,.26)}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid rgba(255,255,255,.12)}
.gallery figcaption{margin-top:6px;color:var(--muted,#a9adb8);font-size:.85rem;line-height:1.3}
@media(max-width:700px){.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px}.gallery figure{flex:0 0 78%;scroll-snap-align:start}}
ul.plain.req li{grid-template-columns:9em 1fr}
@media(max-width:700px){ul.plain.req li{grid-template-columns:1fr}}
table.ram{width:100%}
.fun p{font-size:1.1rem}
ul.plain li span,ul.plain li code{min-width:0;overflow-wrap:anywhere}
ul.plain.req li{grid-template-columns:9em minmax(0,1fr)}
@media(max-width:700px){ul.plain.req li{grid-template-columns:minmax(0,1fr)}}
.two>div{min-width:0}
.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:700px){.two{grid-template-columns:minmax(0,1fr)}}
table.ram td,table.ram th{white-space:normal}
table.ram{min-width:0;border:1px solid var(--line)}
table.ram th,table.ram td{padding:8px 10px;text-align:left}
table.ram tbody tr{border-top:1px solid var(--line)}
table.eff th,table.eff td{text-align:right}
table.eff th:first-child{text-align:left}

.btn-discord{background:#5865f2;color:#fff;box-shadow:0 4px 0 #3b45b8}
.btn-discord:hover{background:#6b77ff}
.btn-discord:active{transform:translateY(3px);box-shadow:0 1px 0 #3b45b8}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:center}
details.older{margin:1.2rem 0 0}
details.older>summary{cursor:pointer;display:inline-block;padding:.55em 1.1em;border:2px solid var(--rally);border-radius:6px;color:var(--rally);font-weight:700;list-style:none}
details.older>summary::-webkit-details-marker{display:none}
details.older>summary::before{content:"\25B8";display:inline-block;margin-right:.55em;transition:transform .15s}
details.older[open]>summary::before{transform:rotate(90deg)}
details.older>summary:hover{background:var(--asphalt-2)}
details.older>summary:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
details.older .timeline>li:first-child::before{background:var(--night)}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){details.older>summary::before{transition:none}}