/* Cihelna Club – styly (mobil první) */
:root {
--bg:#07142E;
--bg2:#0B1D42;
--panel:#0F2552;
--panel2:#14306A;
--line:#1F3D7A;
--fg:#F3F6FC;
--muted:#9AA9CF;
--blue:#14478F;
--blue2:#2D6BD1;
--yellow:#FAD600;
--red:#FD0C12;
--green:#3DDC97;
--orange:#FF9F43;
--r:16px;
--f-disp:"Barlow Condensed", "Arial Narrow", sans-serif;
--f-body:Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
--nav:64px;
color-scheme:dark;
}

/* === ZÁKLAD === */
* {box-sizing:border-box;}
[hidden] {display:none !important;}
html {-webkit-text-size-adjust:100%;}
body {margin:0; min-height:100vh; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased;}
body.s-nav {padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom, 0px));}
a {color:var(--yellow);}
img {max-width:100%; display:block;}
button {font:inherit; color:inherit;}
h1, h2, h3 {font-family:var(--f-disp); font-weight:800; line-height:1.02; margin:0; text-transform:uppercase; letter-spacing:.01em;}
h1 {font-size:38px; font-style:italic;}
h2 {font-size:26px;}
h3 {font-size:19px;}
p {margin:0 0 10px;}
.wrap {max-width:560px; margin:0 auto; padding:0 16px;}
.wrap.siroky {max-width:1100px;}
.muted {color:var(--muted);}
.mala {font-size:13px;}
.sr {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:focus-visible {outline:3px solid var(--yellow); outline-offset:2px;}

/* === HLAVIČKA A NAVIGACE === */
.hlava {position:sticky; top:0; z-index:20; background:rgba(7,20,46,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top, 0px);}
.hlava .wrap {display:flex; align-items:center; justify-content:space-between; gap:12px; height:56px;}
.hlava .logo {display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg);}
.hlava .logo img {height:34px; width:auto;}
.hlava .logo span {font-family:var(--f-disp); font-weight:800; font-size:20px; letter-spacing:.04em; text-transform:uppercase;}
.hlava .ja {display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--fg); font-weight:600; font-size:14px;}
.nav {position:fixed; left:0; right:0; bottom:0; z-index:30; background:rgba(9,24,54,.97); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom, 0px);}
.nav ul {list-style:none; margin:0 auto; padding:0; max-width:560px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;}
.nav a {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:var(--nav); color:var(--muted); text-decoration:none; font-size:11px; font-weight:600;}
.nav a .i {font-size:22px; line-height:1;}
.nav a[aria-current="page"] {color:var(--yellow);}
.nav a.hlavni .i {width:46px; height:46px; margin-top:-18px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); color:var(--bg); box-shadow:0 6px 18px rgba(250,214,0,.35);}

/* === STRÁNKA === */
main {padding:18px 0 28px;}
.sekce {margin-top:26px;}
.sekce > h2 {margin-bottom:12px;}
.hlavicka-sekce {display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:12px;}
.hlavicka-sekce a {font-size:14px; font-weight:600; text-decoration:none;}
.karta {background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px;}
.karta + .karta {margin-top:12px;}
.karta.zvyraznena {background:linear-gradient(135deg, var(--blue) 0%, var(--panel) 70%);}
.karta.zluta {background:var(--yellow); color:var(--bg); border-color:var(--yellow);}
.mrizka {display:grid; gap:10px;}
.mrizka.dve {grid-template-columns:1fr 1fr;}
.mrizka.tri {grid-template-columns:repeat(3, 1fr);}
.dlazdice {background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; min-width:0;}
.dlazdice b {display:block; font-family:var(--f-disp); font-weight:800; font-size:30px; line-height:1; font-variant-numeric:tabular-nums;}
.dlazdice span {font-size:12px; color:var(--muted);}
.stitek {display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:99px; background:var(--panel2); color:var(--fg); font-size:12px; font-weight:700; white-space:nowrap;}
.stitek.zluty {background:var(--yellow); color:var(--bg);}
.stitek.zeleny {background:rgba(61,220,151,.16); color:var(--green);}
.stitek.cerveny {background:rgba(253,12,18,.18); color:#FF6B6F;}
.stitek.modry {background:var(--blue); color:#fff;}
.demo-pruh {background:var(--orange); color:#1A1000; text-align:center; font-size:12px; font-weight:700; padding:4px 10px;}

/* === TLAČÍTKA A FORMULÁŘE === */
.btn {display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 18px; border:0; border-radius:14px; background:var(--panel2); color:var(--fg); font-family:var(--f-disp); font-weight:700; font-size:19px; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; cursor:pointer;}
.btn.hlavni {background:var(--yellow); color:var(--bg);}
.btn.cerveny {background:var(--red); color:#fff;}
.btn.obrys {background:transparent; border:1px solid var(--line);}
.btn.velky {width:100%; min-height:60px; font-size:24px;}
.btn.plny {width:100%;}
.btn.maly {min-height:38px; padding:8px 12px; font-size:15px; border-radius:10px;}
.btn[disabled] {opacity:.45; cursor:not-allowed;}
.tlacitka {display:grid; gap:10px; margin-top:16px;}
.tlacitka.vedle {grid-template-columns:1fr 1fr;}
.pole {display:grid; gap:6px; margin-bottom:14px;}
.pole label, .pole .lab {font-size:14px; font-weight:600; color:var(--muted);}
input[type=text], input[type=email], input[type=number], input[type=search], select, textarea
 {width:100%; min-height:50px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg2); color:var(--fg); font:inherit; font-size:17px;}
textarea {min-height:80px; resize:vertical;}
input:focus, select:focus, textarea:focus {border-color:var(--yellow); outline:none;}
.cip-rada {display:flex; flex-wrap:wrap; gap:8px;}
.cip {min-height:42px; padding:9px 14px; border-radius:99px; border:1px solid var(--line); background:var(--bg2); color:var(--fg); font-weight:600; font-size:15px; cursor:pointer;}
.cip[aria-pressed="true"] {background:var(--yellow); color:var(--bg); border-color:var(--yellow);}
.prepinac {display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line); cursor:pointer;}
.prepinac:first-child {border-top:0;}
.prepinac input {width:24px; height:24px; margin:2px 0 0; accent-color:var(--yellow); flex:none;}
.prepinac b {display:block;}
.zalozky {display:flex; gap:6px; padding:4px; background:var(--bg2); border:1px solid var(--line); border-radius:14px; margin-bottom:14px;}
.zalozky button {flex:1; min-height:42px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-weight:700; font-size:14px; cursor:pointer;}
.zalozky button[aria-selected="true"] {background:var(--panel2); color:var(--fg);}
.chyba {background:rgba(253,12,18,.14); border:1px solid rgba(253,12,18,.5); color:#FFB3B5; padding:12px 14px; border-radius:12px; margin:10px 0;}
.ok-zprava {background:rgba(61,220,151,.12); border:1px solid rgba(61,220,151,.4); color:var(--green); padding:12px 14px; border-radius:12px; margin:10px 0;}
.kroky {display:flex; gap:6px; margin-bottom:16px;}
.kroky span {flex:1; height:5px; border-radius:3px; background:var(--line);}
.kroky span.ano {background:var(--yellow);}

/* === ÚVOD === */
.uvod {padding:26px 0 8px; text-align:center;}
.uvod img.znak {width:180px; margin:0 auto 16px;}
.uvod h1 {font-size:54px;}
.uvod h1 em {color:var(--yellow); font-style:italic;}
.uvod .lead {color:var(--muted); font-size:17px; max-width:420px; margin:10px auto 0;}
.vyhody {display:grid; gap:10px; margin-top:22px; text-align:left;}
.vyhoda {display:flex; gap:12px; align-items:flex-start;}
.vyhoda .i {flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--panel2); font-size:22px;}
.demo-role {display:grid; gap:10px; grid-template-columns:1fr 1fr;}
.demo-role button {text-align:left; padding:14px; border-radius:14px; border:1px solid var(--line); background:var(--panel); cursor:pointer; min-height:92px;}
.demo-role button b {display:block; font-family:var(--f-disp); font-size:20px; text-transform:uppercase;}
.demo-role button span {font-size:13px; color:var(--muted);}

/* === DOMŮ === */
.pozdrav {display:flex; justify-content:space-between; align-items:center; gap:12px;}
.uroven-bar {height:8px; border-radius:4px; background:var(--bg2); overflow:hidden; margin-top:8px;}
.uroven-bar i {display:block; height:100%; background:linear-gradient(90deg, var(--yellow), var(--orange));}
.ohen {font-family:var(--f-disp); font-weight:800; font-size:44px; line-height:1;}
.teaser {display:flex; gap:14px; align-items:center; text-decoration:none; color:var(--fg);}
.teaser img {width:56px; height:auto; flex:none;}
.teaser .t {flex:1; min-width:0;}
.teaser .sipka {color:var(--yellow); font-size:22px;}

/* === FEED === */
.prispevek {background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:12px;}
.prispevek .kdo {display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.prispevek .kdo a {color:var(--fg); text-decoration:none; font-weight:700;}
.avatar {flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--blue); color:#fff; font-family:var(--f-disp); font-weight:800; font-size:18px; overflow:hidden;}
.avatar.velky {width:76px; height:76px; font-size:32px;}
.avatar img {width:100%; height:100%; object-fit:cover;}
.prispevek .obsah {display:grid; grid-template-columns:1fr 104px; gap:12px; align-items:center; text-decoration:none; color:var(--fg);}
.vysledek-velky {font-family:var(--f-disp); font-weight:800; font-size:48px; line-height:.95; font-variant-numeric:tabular-nums;}
.vysledek-velky small {font-size:20px; color:var(--muted);}
.prispevek .akce-radek {display:flex; gap:8px; margin-top:12px; border-top:1px solid var(--line); padding-top:10px;}
.reakce {display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:transparent; font-weight:700; font-size:14px; cursor:pointer;}
.reakce[aria-pressed="true"] {background:rgba(250,214,0,.14); border-color:var(--yellow); color:var(--yellow);}
.komentare {margin-top:10px; display:grid; gap:6px;}
.komentar {font-size:14px; background:var(--bg2); border-radius:10px; padding:8px 10px;}
.komentar b {margin-right:6px;}
.novy-komentar {display:flex; gap:8px; margin-top:8px;}
.novy-komentar input {min-height:42px; font-size:15px;}
canvas.mini-terc {width:104px; height:104px;}

/* === TRÉNINK === */
.terc-obal {position:relative; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:10px; touch-action:manipulation;}
.terc-obal canvas {width:100%; height:auto; aspect-ratio:1; display:block; cursor:crosshair;}
.skore-zive {display:flex; justify-content:space-between; align-items:flex-end; margin:10px 2px 0;}
.skore-zive .vysledek-velky {font-size:56px;}
.rany {display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.rany span {min-width:34px; padding:4px 8px; border-radius:8px; background:var(--panel2); text-align:center; font-weight:700; font-variant-numeric:tabular-nums;}
.rany span.x {background:var(--yellow); color:var(--bg);}
.foto-nahled {margin-top:10px; border-radius:12px; overflow:hidden; border:1px solid var(--line);}
.vysledek-hero {text-align:center; padding:8px 0 4px;}
.vysledek-hero .vysledek-velky {font-size:96px;}
.vysledek-hero .vysledek-velky small {font-size:32px;}
.odznak-novy {display:flex; gap:12px; align-items:center; background:linear-gradient(135deg, rgba(250,214,0,.2), rgba(250,214,0,.04)); border:1px solid rgba(250,214,0,.5); border-radius:14px; padding:12px; margin-top:10px;}
.odznak-novy .i {font-size:32px;}
.karta-nahled {display:block; width:100%; max-width:300px; margin:14px auto 0; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.45);}

/* === PROFIL A STATISTIKY === */
.profil-hlava {display:flex; gap:14px; align-items:center;}
.profil-hlava h1 {font-size:32px;}
.graf {width:100%; height:120px; display:block;}
.odznaky {display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;}
.odznak {text-align:center; padding:10px 4px; border-radius:12px; background:var(--panel); border:1px solid var(--line); font-size:11px; font-weight:600; line-height:1.2;}
.odznak .i {display:block; font-size:28px; margin-bottom:4px;}
.odznak.zamceny {opacity:.32; filter:grayscale(1);}
.disc-radek {display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center;}
.disc-radek + .disc-radek {margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}

/* === ŽEBŘÍČKY === */
.zebr {list-style:none; margin:0; padding:0;}
.zebr li {display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center; padding:11px 4px; border-bottom:1px solid var(--line);}
.zebr li.ja {background:rgba(250,214,0,.1); border-radius:10px; padding-inline:8px;}
.zebr .poradi {font-family:var(--f-disp); font-style:italic; font-weight:800; font-size:24px; color:var(--muted); text-align:center;}
.zebr li:nth-child(1) .poradi {color:var(--yellow);}
.zebr li:nth-child(2) .poradi {color:#D9E1F2;}
.zebr li:nth-child(3) .poradi {color:#E39B5B;}
.zebr .jm {font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.zebr .jm a {color:var(--fg); text-decoration:none;}
.zebr .b {font-family:var(--f-disp); font-weight:800; font-size:26px; font-variant-numeric:tabular-nums;}
.zebr .b small {font-size:14px; color:var(--muted); font-weight:600;}

/* === VÝZVY === */
.vyzva-polozka {display:flex; gap:14px; align-items:center; text-decoration:none; color:var(--fg);}
.vyzva-polozka .i {flex:none; width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:var(--panel2); font-size:26px;}
.vyzva-polozka img {width:52px; height:auto;}
.hraci {display:grid; grid-template-columns:repeat(5, 1fr); gap:6px;}
.hrac {text-align:center; font-size:11px; line-height:1.2;}
.hrac img {width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px; margin-bottom:4px; border:1px solid var(--line);}
.hrac b {display:block; font-family:var(--f-disp); font-size:15px; text-transform:uppercase;}
.lat {display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px;}
.verdikt {font-family:var(--f-disp); font-weight:800; font-style:italic; text-transform:uppercase; background:var(--red); color:#fff; padding:2px 10px; border-radius:6px; font-size:14px;}

/* === AKCE === */
.akce-polozka {display:grid; grid-template-columns:62px 1fr; gap:14px; align-items:center; text-decoration:none; color:var(--fg);}
.datum-blok {text-align:center; background:var(--panel2); border-radius:12px; padding:8px 4px; font-family:var(--f-disp); text-transform:uppercase; line-height:1;}
.datum-blok b {display:block; font-size:28px; font-weight:800;}
.datum-blok span {font-size:13px; color:var(--muted); font-weight:700;}
.startovka {list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.startovka li {display:flex; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:10px; background:var(--bg2); font-size:15px;}

/* === SPRÁVA === */
.sprava-menu {display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px; scrollbar-width:none;}
.sprava-menu button {flex:none; min-height:42px; padding:8px 14px; border-radius:99px; border:1px solid var(--line); background:var(--bg2); color:var(--muted); font-weight:700; font-size:14px; cursor:pointer;}
.sprava-menu button[aria-selected="true"] {background:var(--yellow); color:var(--bg); border-color:var(--yellow);}
.sloupce {display:flex; align-items:flex-end; gap:6px; height:140px; padding-top:10px;}
.sloupce div {flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; height:100%; font-size:10px; color:var(--muted);}
.sloupce i {display:block; width:100%; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg, var(--blue2), var(--blue));}
.sloupce div:last-child i {background:linear-gradient(180deg, var(--yellow), var(--orange));}
.fronta-polozka {display:grid; grid-template-columns:96px 1fr; gap:12px;}
.fronta-polozka img, .fronta-polozka canvas {width:96px; height:96px; object-fit:cover; border-radius:10px; background:var(--bg2);}
.rozhodci {display:grid; grid-template-columns:1fr 74px 60px 52px; gap:6px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line);}
.rozhodci input {min-height:44px; padding:8px; text-align:center;}
.obsah-napad {display:grid; gap:12px;}
.obsah-napad img {width:100%; max-width:220px; border-radius:12px; margin:0 auto;}
.obsah-napad .popisek {font-size:14px; background:var(--bg2); border-radius:10px; padding:10px; white-space:pre-wrap;}

/* === PATIČKA === */
.paticka {margin-top:34px; padding:22px 0 10px; border-top:1px solid var(--line); text-align:center; font-size:12px; color:var(--muted);}
.paticka p {margin:0 0 6px;}
.czmm {display:flex; align-items:center; justify-content:center; gap:8px; width:max-content; margin:14px auto 0; color:var(--muted); font-size:12px; letter-spacing:.02em; text-decoration:none; opacity:.8; transition:opacity .2s;}
.czmm:hover {opacity:1;}
.czmm img {width:72px; height:auto;}

/* === PODPIS === */
.podpis-obal {background:#fff; border-radius:12px; position:relative; touch-action:none;}
.podpis-obal canvas {width:100%; height:180px; display:block; border-radius:12px; cursor:crosshair;}
.podpis-obal .hint {position:absolute; left:12px; bottom:10px; color:#8A93A8; font-size:13px; pointer-events:none;}
.rad {background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; max-height:260px; overflow:auto; font-size:15px;}
.rad ol {margin:0; padding-left:20px;}
.rad li {margin-bottom:6px;}

/* === DIALOG === */
.dialog {position:fixed; inset:0; z-index:50; background:rgba(2,8,22,.78); display:flex; align-items:flex-end; justify-content:center;}
.dialog .okno {width:100%; max-width:560px; max-height:92vh; overflow:auto; background:var(--bg2); border:1px solid var(--line); border-radius:22px 22px 0 0; padding:20px 16px calc(20px + env(safe-area-inset-bottom, 0px));}

@media (min-width:769px) {
 body.s-nav {padding-bottom:0;}
 .nav {top:0; bottom:auto; left:auto; right:24px; background:transparent; border:0; width:auto;}
 .nav ul {max-width:none; gap:4px;}
 .nav a {height:56px; padding:0 12px; flex-direction:row; gap:6px; font-size:14px;}
 .nav a .i {font-size:18px;}
 .nav a.hlavni .i {width:auto; height:auto; margin:0; background:transparent; color:inherit; box-shadow:none;}
 .hlava .ja {display:none;}
 h1 {font-size:46px;}
 .odznaky {grid-template-columns:repeat(6, 1fr);}
 .dialog {align-items:center;}
 .dialog .okno {border-radius:22px;}
}