/* ============================================================
   AI Predicts — public site styles.
   ============================================================ */

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ambient background glow */
body::before {
    content: "";
    position: fixed; inset: 0; z-index: -2;
    background:
        radial-gradient(600px 400px at 12% 0%, rgba(154,108,255,.16), transparent 60%),
        radial-gradient(700px 500px at 90% 8%, rgba(255,46,154,.14), transparent 60%),
        radial-gradient(800px 600px at 50% 100%, rgba(79,141,255,.10), transparent 60%);
    pointer-events: none;
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
.section { padding: var(--sp-8) 0; }
.section-sm { padding: var(--sp-7) 0; }

/* --- Typografie --- */
h1,h2,h3,h4 { font-family: var(--font-head); line-height: 1.12; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; line-height: .98; }
.text-grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700; color: var(--primary-2); }
.lead { font-size: 1.12rem; color: var(--text-dim); }
.muted { color: var(--text-mute); }
.dim { color: var(--text-dim); }

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-family: var(--font-head); font-weight: 700; font-size: .92rem;
    padding: 12px 22px; border-radius: var(--r-pill); border: 1px solid transparent;
    cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t), background var(--t);
    line-height: 1; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; display: block; flex: none; }
.btn-primary { background: var(--grad-primary); color: #fff; box-shadow: var(--glow-primary); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 40px var(--primary-glow); }
.btn-ghost { background: rgba(255,255,255,.05); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.btn-yt { background: #ff0033; color:#fff; }
.btn-yt:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(255,0,51,.4); }
.btn-sm { padding: 8px 16px; font-size: .82rem; }

/* --- Badges / chips --- */
.badge { display:inline-flex; align-items:center; gap:6px; padding: 4px 11px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 700; font-family: var(--font-head); letter-spacing: .03em; line-height:1; }
.badge-soft { background: rgba(255,255,255,.07); color: var(--text-dim); border:1px solid var(--border); }
.badge-live { background: rgba(255,46,154,.16); color: var(--primary-2); border:1px solid rgba(255,46,154,.35); }
.badge-status { text-transform: uppercase; }
.st-draft     { background: rgba(110,114,160,.18); color:#a6a9d4; }
.st-collecting{ background: rgba(79,141,255,.16); color:#7fb0ff; }
.st-evaluating{ background: rgba(154,108,255,.16); color:#bda0ff; }
.st-ready     { background: rgba(251,191,36,.16); color:#fcd34d; }
.st-published { background: rgba(22,199,132,.16); color:#5ee6ad; }
.st-archived  { background: rgba(110,114,160,.12); color:#6e72a0; }

/* --- Header / nav --- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(14px);
    background: rgba(7,7,26,.72);
    border-bottom: 1px solid var(--border);
}
.nav { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; }
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--grad-primary); box-shadow: var(--glow-primary); }
/* Značka pořadu — helma s okem. Průhledné PNG, takže sedí na jakémkoli pozadí hlavičky. */
.brand-mark { width: 34px; height: 34px; display: block; filter: drop-shadow(0 0 10px rgba(255,200,110,.45)); }
.nav-links { display: flex; align-items: center; gap: var(--sp-5); }
.nav-links a { font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--text-dim); transition: color var(--t-fast); }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: var(--sp-3); }
.lang-switch { display:flex; align-items:center; gap:4px; }
.lang-switch a { padding: 5px 9px; border-radius: var(--r-sm); font-size:.8rem; font-weight:700; color: var(--text-mute); }
.lang-switch a.active { background: rgba(255,255,255,.08); color: var(--text); }
.nav-toggle { display:none; background:none;border:none;color:var(--text);cursor:pointer; }

/* --- Hero --- */
.hero { position: relative; padding: var(--sp-9) 0 var(--sp-8); overflow: hidden; }
.hero-bg { position:absolute; inset:0; z-index:-1; background: var(--grad-hero); }
.hero-bg::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 80% at 50% -10%, transparent 40%, rgba(7,7,26,.85) 100%); }
.hero-inner { text-align: center; max-width: 920px; margin: 0 auto; }
.hero h1 { font-size: clamp(2.6rem, 8vw, 6rem); margin-bottom: .15em; }
.hero .sub { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(.95rem,2.4vw,1.4rem); color: var(--text); }
.hero .accent-line { width: 120px; height: 4px; margin: var(--sp-5) auto; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--primary)); }
.hero .lead { max-width: 640px; margin: var(--sp-4) auto var(--sp-6); }
.hero-cta { display:flex; gap: var(--sp-3); justify-content:center; flex-wrap:wrap; }

/* --- AI titan row --- */
.titans { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); margin-top: var(--sp-8); }
.titan {
    position: relative; text-align: center; padding: var(--sp-5) var(--sp-3);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid var(--border); border-radius: var(--r-lg);
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.titan:hover { transform: translateY(-6px); border-color: var(--ai); box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 24px color-mix(in srgb, var(--ai) 35%, transparent); }
.titan .logo { width: 52px; height: 52px; margin: 0 auto var(--sp-3); display:flex; align-items:center; justify-content:center; border-radius: 14px; background: color-mix(in srgb, var(--ai) 16%, transparent); color: var(--ai); }
.titan .logo svg { width: 30px; height: 30px; display:block; }
.titan .name { font-family: var(--font-head); font-weight: 800; font-size: 1rem; }
.titan .person { font-size: .8rem; color: var(--text-mute); }
.titan .tagline { font-size: .74rem; color: var(--text-dim); margin-top: var(--sp-2); min-height: 2.4em; }
.titan .model-chip { margin-top: var(--sp-3); display:inline-block; font-size:.68rem; font-weight:700; padding:3px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ai) 18%, transparent); color: var(--ai); }

/* --- Section header --- */
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.section-head h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin:0; }
.section-head .eyebrow { display:block; margin-bottom: 6px; }

/* --- Cards --- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); transition: transform var(--t), border-color var(--t); }
.card:hover { border-color: var(--border-strong); }
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }

/* episode card */
.ep-card { display:flex; flex-direction:column; overflow:hidden; padding:0; }
.ep-card .ep-cover { aspect-ratio: 16/9; background: var(--grad-hero); position:relative; display:flex;align-items:center;justify-content:center; }
.ep-card .ep-cover .ep-num { font-family: var(--font-display); font-size: 3rem; color: rgba(255,255,255,.85); }
.ep-card .ep-body { padding: var(--sp-5); flex:1; display:flex; flex-direction:column; }
.ep-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.ep-card .ep-meta { display:flex; gap: var(--sp-3); font-size:.78rem; color: var(--text-mute); margin-top:auto; padding-top: var(--sp-4); }

/* --- Prediction card --- */
.pred-card { border-left: 3px solid var(--ai); }
.pred-head { display:flex; align-items:center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ai-avatar { width: 38px; height: 38px; border-radius: 10px; display:flex;align-items:center;justify-content:center; background: color-mix(in srgb, var(--ai) 16%, transparent); color: var(--ai); flex:none; }
.ai-avatar svg { width: 22px; height: 22px; }
.pred-head .who .nm { font-family: var(--font-head); font-weight: 800; font-size:.95rem; }
.pred-head .who .ml { font-size:.72rem; color: var(--text-mute); }
.horizon-tabs { display:flex; gap:6px; margin: var(--sp-3) 0; }
.horizon-tabs button { background: rgba(255,255,255,.05); border:1px solid var(--border); color: var(--text-dim); padding:5px 12px; border-radius: var(--r-pill); font-size:.76rem; font-weight:700; font-family: var(--font-head); cursor:pointer; transition: all var(--t-fast); }
.horizon-tabs button.active { background: var(--ai); color:#0a0a1a; border-color: var(--ai); }
.pred-summary { font-size: 1rem; color: var(--text); margin: var(--sp-2) 0; }
.pred-points { list-style:none; padding:0; margin: var(--sp-3) 0 0; }
.pred-points li { position:relative; padding-left: 18px; font-size:.88rem; color: var(--text-dim); margin-bottom: 6px; }
.pred-points li::before { content:""; position:absolute; left:0; top:.55em; width:7px;height:7px;border-radius:50%; background: var(--ai); }
.pred-foot { display:flex; align-items:center; gap: var(--sp-4); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top:1px solid var(--border); font-size:.78rem; }
.metric-pill { font-family: var(--font-display); font-size: 1.4rem; color: var(--ai); }

/* prediction mini card (v bloku otázky) */
.pred-mini { --ai:#888; background: rgba(255,255,255,.03); border:1px solid var(--border); border-top:2px solid var(--ai); border-radius: var(--r-md); padding: var(--sp-3); text-align:left; transition: border-color var(--t-fast), background var(--t-fast); }
.pred-mini:hover { background: rgba(255,255,255,.06); border-color: color-mix(in srgb, var(--ai) 50%, transparent); }
.pred-mini .ai-avatar { background: color-mix(in srgb, var(--ai) 18%, transparent); color: var(--ai); }
.pred-mini .metric-pill { color: var(--ai); }
.pred-mini .conf > i { background: var(--ai); }

/* sentiment dot */
.senti { display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.senti .d { width:9px;height:9px;border-radius:50%; }

/* confidence bar */
.conf { flex:1; height:6px; background: rgba(255,255,255,.08); border-radius: 6px; overflow:hidden; }
.conf > i { display:block; height:100%; background: var(--ai); border-radius:6px; }

/* --- Stat strip --- */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); }
.stat { text-align:center; padding: var(--sp-5); background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); }
.stat .v { font-family: var(--font-display); font-size: 2.4rem; background: var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .l { font-size:.8rem; color: var(--text-mute); text-transform:uppercase; letter-spacing:.08em; }

/* --- Chart card --- */
.chart-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); }
.chart-wrap { position: relative; height: 360px; }
.chart-legend { display:flex; flex-wrap:wrap; gap: var(--sp-4); margin-top: var(--sp-4); }
.chart-legend .li { display:flex; align-items:center; gap:7px; font-size:.82rem; color: var(--text-dim); }
.chart-legend .sw { width:12px;height:12px;border-radius:3px; }
.chart-controls { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: var(--sp-4); }
.chip-toggle { background: rgba(255,255,255,.05); border:1px solid var(--border); color: var(--text-dim); padding:7px 14px; border-radius: var(--r-pill); font-size:.8rem; font-weight:700; cursor:pointer; transition: all var(--t-fast); font-family: var(--font-head); }
.chip-toggle.active { background: var(--primary); color:#fff; border-color: var(--primary); }

/* --- Footer --- */
.site-footer { border-top:1px solid var(--border); margin-top: var(--sp-9); padding: var(--sp-7) 0 var(--sp-6); background: var(--bg-2); }
.footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-6); }
.footer-grid h4 { font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; color: var(--text-mute); }
.footer-grid a { display:block; color: var(--text-dim); font-size:.9rem; padding: 4px 0; }
.footer-grid a:hover { color: var(--text); }
.footer-bottom { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap: var(--sp-3); font-size:.82rem; color: var(--text-mute); }

/* bottom CTA banner (dle plakátu) */
.cta-banner { text-align:center; margin: var(--sp-8) auto 0; max-width: 760px; padding: var(--sp-6); border-radius: var(--r-xl); background: var(--grad-primary); box-shadow: var(--glow-primary); }
.cta-banner h2 { font-family: var(--font-display); font-size: clamp(1.4rem,4vw,2.2rem); color:#fff; margin:0 0 var(--sp-3); text-transform:uppercase; }
.cta-banner .btn { background:#fff; color:#c41f6b; }

/* table */
.tbl { width:100%; border-collapse: collapse; font-size:.9rem; }
.tbl th, .tbl td { text-align:left; padding: 11px 12px; border-bottom:1px solid var(--border); }
.tbl th { font-family: var(--font-head); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-mute); }

/* utility */
.flex { display:flex; } .between { justify-content:space-between; } .center { align-items:center; }
.gap-2 { gap: var(--sp-2);} .gap-3{gap:var(--sp-3);} .gap-4{gap:var(--sp-4);}
.wrap { flex-wrap: wrap; }
.mt-4 { margin-top: var(--sp-4);} .mt-6{margin-top:var(--sp-6);} .mb-0{margin-bottom:0;}
.tac { text-align:center; }

/* --- Responsive --- */
@media (max-width: 920px) {
    .titans { grid-template-columns: repeat(2,1fr); }
    .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr); }
    .stats { grid-template-columns: repeat(2,1fr); }
    .footer-grid { grid-template-columns: 1fr; }
    .nav-links { display:none; }
    .nav-toggle { display:block; }
    .nav-links.open { display:flex; position:absolute; top: var(--header-h); left:0; right:0; flex-direction:column; background: var(--bg-2); padding: var(--sp-4); border-bottom:1px solid var(--border); }
}
@media (max-width: 560px) {
    .titans { grid-template-columns: 1fr; }
    .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; }
    .stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   ENGAGEMENT LAYER — clashes, leaderboard, spread-o-meter,
   superhero titans, beat-the-AIs, headlines.
   ============================================================ */

/* Headline hooks (auto-generated story bites) */
.hooks { display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; margin-top:var(--sp-6); }
.hook { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-pill);
    background:rgba(255,255,255,.06); border:1px solid var(--border-strong); font-size:.86rem; font-weight:600; }
.hook .ic { width:16px;height:16px;color:var(--primary); flex:none; }
.hook.bold .ic{color:var(--warn)} .hook.clash .ic{color:var(--danger)} .hook.consensus .ic{color:var(--success)}
.hook strong { color:var(--text); }

/* Superhero titan cards (with generated avatars) */
.titan-hero { position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border);
    background:#0c0c20; transition:transform var(--t), box-shadow var(--t), border-color var(--t); display:block; }
.titan-hero:hover { transform:translateY(-6px); border-color:var(--ai); box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 30px color-mix(in srgb,var(--ai) 40%,transparent); }
.titan-hero .ph { position:relative; aspect-ratio:1/1; overflow:hidden; }
.titan-hero .ph img { width:100%; height:100%; object-fit:cover; transition:transform var(--t); }
.titan-hero:hover .ph img { transform:scale(1.05); }
.titan-hero .ph::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, #0c0c20 98%); }
.titan-hero .arch { position:absolute; top:10px; left:10px; z-index:2; font-family:var(--font-head); font-weight:800;
    font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; padding:4px 10px; border-radius:var(--r-pill);
    background:color-mix(in srgb,var(--ai) 88%, #000); color:#0a0a16; }
.titan-hero .logo-badge { position:absolute; top:10px; right:10px; z-index:2; width:30px;height:30px; border-radius:8px;
    display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.45); color:var(--ai); backdrop-filter:blur(4px); }
.titan-hero .logo-badge svg{width:18px;height:18px}
.titan-hero .body { padding:var(--sp-4); margin-top:-40px; position:relative; z-index:2; }
.titan-hero .nm { font-family:var(--font-head); font-weight:900; font-size:1.15rem; }
.titan-hero .pr { font-size:.78rem; color:var(--text-mute); }
.titan-hero .sp { font-size:.82rem; color:var(--text-dim); margin-top:8px; min-height:2.4em; }
.titan-hero .chip { margin-top:10px; display:inline-block; font-size:.68rem; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); background:color-mix(in srgb,var(--ai) 18%,transparent); color:var(--ai); }

/* Clash / VS card */
.clash { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.clash .top { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border); }
.clash .q { font-family:var(--font-head); font-weight:700; font-size:.98rem; }
.clash .heat { font-family:var(--font-display); font-size:1.1rem; color:var(--danger); display:flex; align-items:center; gap:6px; }
.clash .heat svg{width:18px;height:18px}
.versus { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-3); padding:var(--sp-5); }
.vs-side { text-align:center; }
.vs-side .av { width:46px;height:46px;margin:0 auto 8px; border-radius:12px; overflow:hidden; border:2px solid var(--vai); }
.vs-side .av img{width:100%;height:100%;object-fit:cover}
.vs-side .vnm { font-family:var(--font-head); font-weight:800; font-size:.85rem; }
.vs-side .vval { font-family:var(--font-display); font-size:2rem; color:var(--vai); line-height:1; }
.vs-side .vlab { font-size:.66rem; color:var(--text-mute); text-transform:uppercase; letter-spacing:.06em; }
.vs-mid { font-family:var(--font-display); font-size:1.4rem; color:var(--text-mute); }

/* Spread-o-meter */
.spread { padding:var(--sp-2) 0; }
.spread .track { position:relative; height:6px; background:rgba(255,255,255,.08); border-radius:6px; margin:30px 6px 8px; }
.spread .dot { position:absolute; top:50%; width:26px;height:26px; transform:translate(-50%,-50%); border-radius:8px; overflow:hidden; border:2px solid var(--dai); box-shadow:0 2px 8px rgba(0,0,0,.5); }
.spread .dot img{width:100%;height:100%;object-fit:cover}
.spread .dot .v { position:absolute; top:-22px; left:50%; transform:translateX(-50%); font-size:.66rem; font-weight:800; color:var(--dai); white-space:nowrap; font-family:var(--font-head); }
.spread .cons { position:absolute; top:-6px; bottom:-6px; width:2px; background:repeating-linear-gradient(180deg,var(--text-dim) 0 3px,transparent 3px 6px); }
.spread .cons .cl { position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); font-size:.6rem; color:var(--text-mute); white-space:nowrap; }
.spread .ends { display:flex; justify-content:space-between; font-size:.66rem; color:var(--text-mute); margin:0 6px; }

/* Leaderboard */
.lboard { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5); }
.lboard h3 { font-family:var(--font-head); margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.lboard .sub { color:var(--text-mute); font-size:.78rem; margin-bottom:var(--sp-4); }
.lrow { display:flex; align-items:center; gap:var(--sp-3); padding:9px 0; }
.lrow .rank { font-family:var(--font-display); font-size:1.1rem; width:26px; color:var(--text-mute); text-align:center; }
.lrow.first .rank{color:#ffd24a} .lrow.second .rank{color:#cfd3e6} .lrow.third .rank{color:#e0954a}
.lrow .av { width:30px;height:30px;border-radius:8px;overflow:hidden;border:1px solid var(--lai);flex:none }
.lrow .av img{width:100%;height:100%;object-fit:cover}
.lrow .nm { font-family:var(--font-head); font-weight:700; font-size:.88rem; width:84px; flex:none; }
.lrow .bar { flex:1; height:9px; background:rgba(255,255,255,.07); border-radius:6px; overflow:hidden; }
.lrow .bar > i { display:block; height:100%; background:var(--lai); border-radius:6px; width:0; transition:width 1.1s cubic-bezier(.2,.7,.2,1); }
.lrow .sc { font-family:var(--font-display); font-size:1.05rem; width:42px; text-align:right; color:var(--text); }

/* Beat the AIs */
.beat { background:linear-gradient(150deg, rgba(154,108,255,.12), rgba(255,46,154,.1)); border:1px solid rgba(154,108,255,.3); border-radius:var(--r-lg); padding:var(--sp-5); }
.beat h3 { font-family:var(--font-head); margin:0 0 4px; }
.beat .guess-form { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin:var(--sp-4) 0; }
.beat input { background:var(--bg-2); border:1px solid var(--border-strong); border-radius:var(--r-sm); color:var(--text); padding:11px 14px; font:inherit; font-size:.95rem; }
.beat input[type=number]{ width:140px; }
.beat .dist { display:flex; align-items:flex-end; gap:4px; height:90px; margin-top:var(--sp-4); }
.beat .dist .b { flex:1; background:var(--grad-primary); border-radius:4px 4px 0 0; min-height:4px; opacity:.85; }
.beat .dist-meta { display:flex; justify-content:space-between; font-size:.72rem; color:var(--text-mute); margin-top:6px; }
.beat .ai-marks { font-size:.78rem; color:var(--text-dim); margin-top:var(--sp-3); }

/* animated counter helper */
.count { font-variant-numeric:tabular-nums; }

/* icon sizing safety pro nové komponenty */
.lboard h3 svg { width:20px; height:20px; flex:none; }
.beat h3 svg { width:18px; height:18px; flex:none; }
.hook .ic svg { width:16px; height:16px; display:block; }
.clash .heat svg { width:18px; height:18px; }
.spread .dot > span svg, .clash .av span svg, .lrow .av span svg, .pred-mini .ai-avatar svg { width:60%; height:60%; }

/* ============================================================
   INTRO HERO (poster) + animace
   ============================================================ */
.intro { position:relative; padding:var(--sp-7) 0 var(--sp-6); overflow:hidden; }
.intro .glow-bg { position:absolute; inset:0; z-index:-1; background:
    radial-gradient(60% 50% at 50% 30%, rgba(154,108,255,.22), transparent 70%),
    radial-gradient(50% 40% at 80% 10%, rgba(255,46,154,.18), transparent 70%); }
.intro-frame { position:relative; max-width:1060px; margin:0 auto; border-radius:var(--r-xl); overflow:hidden;
    border:1px solid var(--border-strong); aspect-ratio:1536/1024;
    animation: introZoom 1.4s cubic-bezier(.2,.7,.2,1) both, glowPulse 6s ease-in-out 1.4s infinite; }
.intro-frame > img { width:100%; height:100%; object-fit:cover; display:block;
    animation: floatY 9s ease-in-out 1.4s infinite; will-change:transform; }
.intro-frame::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(7,7,26,.55) 100%); }
.intro-frame::after { content:""; position:absolute; top:0; bottom:0; left:0; width:40%; z-index:3; pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent);
    transform:translateX(-130%) skewX(-16deg); animation: sheen 2.4s ease-out .7s 1; }
.intro-cap { text-align:center; max-width:760px; margin:var(--sp-6) auto 0; }
.intro-cap .eyebrow { animation: fadeUp .6s ease both .9s; }
.intro-cap .lead { animation: fadeUp .6s ease both 1.05s; }
.intro-cap .hero-cta { animation: fadeUp .6s ease both 1.2s; margin-top:var(--sp-4); }
.intro-cap .hooks { animation: fadeUp .6s ease both 1.4s; }

@keyframes introZoom { from{opacity:0; transform:scale(1.07)} to{opacity:1; transform:scale(1)} }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes sheen { 0%{transform:translateX(-130%) skewX(-16deg);opacity:0} 35%{opacity:.6} 100%{transform:translateX(330%) skewX(-16deg);opacity:0} }
@keyframes glowPulse { 0%,100%{box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 50px rgba(255,46,154,.20)} 50%{box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 90px rgba(154,108,255,.38)} }
@keyframes fadeUp { from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)} }

@media (prefers-reduced-motion: reduce) {
    .intro-frame, .intro-frame > img, .intro-frame::after, .intro-cap * { animation:none !important; }
}

/* ============================================================
   VYSVĚTLENÍ PROCENT — agreement gauge, tooltip, explainer
   ============================================================ */

/* info tooltip */
.info { position:relative; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
    border-radius:50%; border:1px solid var(--text-mute); color:var(--text-mute); font-size:.62rem; font-weight:800;
    font-family:var(--font-head); cursor:help; flex:none; vertical-align:middle; }
.info::after { content:"i"; }
.info .tip { position:absolute; bottom:140%; left:50%; transform:translateX(-50%) translateY(4px); width:230px;
    background:var(--surface-3); border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:10px 12px;
    font-size:.76rem; font-weight:500; color:var(--text-dim); line-height:1.45; box-shadow:var(--shadow-md);
    opacity:0; visibility:hidden; transition:opacity var(--t-fast), transform var(--t-fast); z-index:20; text-align:left; }
.info .tip::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:6px solid transparent; border-top-color:var(--surface-3); }
.info:hover .tip, .info:focus .tip { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* agreement gauge */
.agree { margin-top:6px; }
.agree .ghead { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); margin-bottom:7px; }
.agree .lvl { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:800; font-size:.82rem; }
.agree .lvl .dot { width:9px; height:9px; border-radius:50%; }
.agree .gap { font-size:.76rem; color:var(--text-dim); font-weight:600; }
.agree .track { position:relative; height:8px; border-radius:6px;
    background:linear-gradient(90deg, #16c784 0%, #4f8dff 33%, #fbbf24 64%, #f0506e 100%); opacity:.85; }
.agree .mark { position:absolute; top:50%; width:4px; height:18px; transform:translate(-50%,-50%); border-radius:3px;
    background:#fff; box-shadow:0 0 0 2px rgba(7,7,26,.85), 0 2px 6px rgba(0,0,0,.6); }
.agree .ends { display:flex; justify-content:space-between; font-size:.64rem; color:var(--text-mute); margin-top:5px;
    text-transform:uppercase; letter-spacing:.05em; }

/* explainer card (how scores work) */
.explain { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5); }
.explain h3 { font-family:var(--font-head); margin:0 0 var(--sp-4); display:flex; align-items:center; gap:8px; }
.explain h3 svg { width:20px; height:20px; }
.exp-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
.exp-item { display:flex; gap:var(--sp-3); }
.exp-item .ei { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none;
    background:rgba(255,255,255,.06); color:var(--primary); }
.exp-item .ei svg { width:18px; height:18px; }
.exp-item .nm { font-family:var(--font-head); font-weight:800; font-size:.9rem; }
.exp-item .ds { font-size:.8rem; color:var(--text-dim); }
.exp-item .scale { display:inline-block; margin-top:4px; font-size:.66rem; font-weight:700; color:var(--text-mute);
    background:rgba(255,255,255,.05); border:1px solid var(--border); padding:2px 8px; border-radius:var(--r-pill); }
@media(max-width:640px){ .exp-grid{ grid-template-columns:1fr; } }

/* ===== Video players (web embed of rendered MP4 / YouTube) ===== */
.video-feature { display:grid; grid-template-columns:1.6fr 1fr; gap:var(--sp-5); align-items:start; }
.vplayer { position:relative; aspect-ratio:16/9; background:#05050f; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-md); }
.vplayer video, .vplayer iframe { width:100%; height:100%; display:block; border:0; }
.video-feature .vinfo { padding-top:var(--sp-2); }
@media (max-width:820px){ .video-feature { grid-template-columns:1fr; } }

/* ===== Video answer (pod konkrétní otázkou/AI) ===== */
.vpill { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-head); font-weight:700;
    font-size:.66rem; padding:4px 9px; border-radius:var(--r-pill); margin-bottom:8px;
    background:color-mix(in srgb,var(--ai) 20%,transparent); color:var(--ai); border:1px solid color-mix(in srgb,var(--ai) 45%,transparent); }
.vpill svg { width:11px; height:11px; }
.vpill:hover { background:color-mix(in srgb,var(--ai) 32%,transparent); }
.answer-video { background:rgba(255,255,255,.03); border:1px solid var(--border); border-top:2px solid var(--ai); border-radius:var(--r-md); overflow:hidden; }
.answer-video .vplayer { border:0; border-radius:0; box-shadow:none; }
.answer-video .av-cap { display:flex; align-items:center; gap:10px; padding:var(--sp-3) var(--sp-4); }
.answer-video .av-cap .ai-avatar { background:color-mix(in srgb,var(--ai) 18%,transparent); color:var(--ai); flex:none; }

/* ============================================================
   EPISODE PAGE — kompaktní layout + levý scroll-spy navigátor
   ============================================================ */
.ep-hero { padding: var(--sp-6) 0 var(--sp-5); position:relative; }
.ep-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(154,108,255,.08), transparent 70%); }

.ep-layout { display:grid; grid-template-columns:248px minmax(0,1fr); gap:var(--sp-6); align-items:start; padding-bottom:var(--sp-9); }

/* --- left side watcher --- */
.ep-nav { position:sticky; top:84px; align-self:start; }
.ep-nav-inner { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-4); }
.ep-nav-progress { height:4px; background:rgba(255,255,255,.07); border-radius:4px; overflow:hidden; margin-bottom:var(--sp-4); }
.ep-nav-progress > i { display:block; height:100%; width:0; background:var(--grad-primary); transition:width .15s linear; }
.ep-nav-label { font-size:.64rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-mute); }
.ep-nav-now { font-family:var(--font-head); font-weight:800; font-size:1.05rem; margin:2px 0 var(--sp-4); color:var(--text);
    background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ep-nav-list { position:relative; display:flex; flex-direction:column; gap:1px; }
.ep-nav-indicator { position:absolute; left:0; width:3px; border-radius:3px; background:var(--grad-primary); top:0; height:0; opacity:0;
    transition:transform .32s cubic-bezier(.5,0,.2,1), height .32s cubic-bezier(.5,0,.2,1); will-change:transform; }
.ep-nav-item { display:flex; align-items:center; gap:10px; padding:9px 10px 9px 14px; border-radius:var(--r-sm); color:var(--text-dim);
    font-weight:600; font-size:.86rem; transition:background var(--t-fast), color var(--t-fast); position:relative; }
.ep-nav-item .ic { width:17px; height:17px; flex:none; color:var(--text-mute); transition:color var(--t-fast); }
.ep-nav-item .ic svg { width:17px; height:17px; }
.ep-nav-item .lbl { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ep-nav-item .cnt { font-size:.66rem; font-weight:800; color:var(--text-mute); background:rgba(255,255,255,.06); padding:2px 7px; border-radius:var(--r-pill); }
.ep-nav-item:hover { background:rgba(255,255,255,.04); color:var(--text); }
.ep-nav-item.active { background:rgba(255,255,255,.06); color:var(--text); }
.ep-nav-item.active .ic { color:var(--c); }
.ep-nav-item.active .cnt { background:color-mix(in srgb,var(--c) 24%,transparent); color:var(--c); }

/* --- content --- */
.ep-main { min-width:0; }
.ep-section { scroll-margin-top:90px; margin-bottom:var(--sp-7); }
.ep-section-h { position:sticky; top:70px; z-index:20; display:flex; align-items:center; gap:10px;
    font-family:var(--font-head); font-weight:800; font-size:1.05rem; padding:12px 0; margin-bottom:var(--sp-3);
    background:rgba(7,7,26,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.ep-section-h .ic { width:20px; height:20px; } .ep-section-h .ic svg { width:20px; height:20px; }
.ep-section-cnt { font-size:.66rem; font-weight:800; color:var(--text-mute); background:rgba(255,255,255,.06); padding:2px 8px; border-radius:var(--r-pill); }
.ep-clash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--sp-4); }
.ep-qgrid { display:flex; flex-direction:column; gap:var(--sp-4); }

/* --- compact question cards uvnitř epizody --- */
.ep-qgrid .card > div:first-child { padding:var(--sp-4) var(--sp-4) var(--sp-3) !important; }
.ep-qgrid .card h3 { font-size:1.02rem !important; }
.ep-qgrid .card > div:last-child { padding:var(--sp-3) var(--sp-4) var(--sp-4) !important; }
.ep-qgrid .pred-mini { padding:10px 9px; }
.ep-qgrid .pred-mini .metric-pill { font-size:1.25rem !important; }
.ep-qgrid .horizon-tabs button { padding:4px 11px; font-size:.72rem; }

@media (max-width:980px){
    .ep-layout { grid-template-columns:1fr; }
    .ep-nav { position:sticky; top:64px; z-index:30; margin-bottom:var(--sp-4); }
    .ep-nav-inner { padding:var(--sp-3); }
    .ep-nav-progress, .ep-nav-label { display:none; }
    .ep-nav-now { display:none; }
    .ep-nav-list { flex-direction:row; overflow-x:auto; gap:6px; scrollbar-width:none; }
    .ep-nav-list::-webkit-scrollbar { display:none; }
    .ep-nav-indicator { display:none; }
    .ep-nav-item { white-space:nowrap; border:1px solid var(--border); }
    .ep-nav-item .cnt { display:none; }
    .ep-nav .btn-yt { display:none; }
    .ep-section-h { top:60px; }
}
@media (max-width:560px){
    .ep-qgrid .grid[style*="repeat(5"] { grid-template-columns:repeat(2,1fr) !important; }
}

/* ============================================================
   VIDEO SWITCHER (5 AI pod otázkou) + LOCKED countdown
   ============================================================ */
.vswitch { margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--border); }
.vswitch-head { display:flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:800; font-size:.82rem;
    text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); margin-bottom:var(--sp-3); }
.vswitch-head .ic { width:16px; height:16px; color:var(--primary); } .vswitch-head .ic svg{width:16px;height:16px;}

.vstage { position:relative; }
.vstage-item { display:none; }
.vstage-item.active { display:block; animation:vfade .25s ease; }
@keyframes vfade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.vstage .vplayer { aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; background:#05050f; border:1px solid var(--border); box-shadow:var(--shadow-md); }
.vstage .vplayer video, .vstage .vplayer iframe { width:100%; height:100%; display:block; border:0; }

.vtabs { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:var(--sp-3); }
.vtab { --ai:#888; display:flex; align-items:center; gap:9px; text-align:left; padding:8px 10px; border-radius:var(--r-md);
    background:rgba(255,255,255,.03); border:1px solid var(--border); cursor:pointer; transition:all var(--t-fast); min-width:0; }
.vtab .vt-av { width:30px; height:30px; border-radius:8px; overflow:hidden; flex:none; border:1px solid var(--border); display:flex;align-items:center;justify-content:center; }
.vtab .vt-av img { width:100%; height:100%; object-fit:cover; }
.vtab .vt-av span { width:60%; height:60%; }
.vtab .vt-info { min-width:0; flex:1; display:flex; flex-direction:column; line-height:1.15; }
.vtab .vt-info strong { font-family:var(--font-head); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vtab .vt-st { font-size:.64rem; color:var(--text-mute); }
.vtab .vt-play { margin-left:auto; color:var(--ai); width:15px; height:15px; flex:none; } .vtab .vt-play svg{width:15px;height:15px;}
.vtab:not(.soon):hover { border-color:color-mix(in srgb,var(--ai) 45%,transparent); background:rgba(255,255,255,.06); }
.vtab.active { border-color:var(--ai); background:color-mix(in srgb,var(--ai) 14%,transparent); }
.vtab.active .vt-st { color:var(--ai); }
.vtab.soon { opacity:.5; cursor:not-allowed; }
.vtab.soon .vt-st { color:var(--warn); }

/* locked + countdown */
.vlocked { text-align:center; padding:var(--sp-6) var(--sp-5); border-radius:var(--r-lg); border:1px dashed var(--border-strong);
    background:linear-gradient(160deg, rgba(154,108,255,.08), rgba(255,46,154,.05)); }
.vlocked .vlock-badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-head); font-weight:800; font-size:.7rem;
    text-transform:uppercase; letter-spacing:.08em; color:var(--warn); background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.3);
    padding:4px 11px; border-radius:var(--r-pill); margin-bottom:var(--sp-3); }
.vlocked .vlock-badge svg{width:13px;height:13px;}
.vlocked h4 { font-family:var(--font-head); margin:0 0 var(--sp-3); font-size:1.05rem; }
.vcount { font-family:var(--font-display); font-size:2.2rem; letter-spacing:.02em; line-height:1;
    background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:8px; }

/* global next-drop banner */
.dropbar { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5); border-radius:var(--r-lg);
    background:linear-gradient(110deg, rgba(255,46,154,.12), rgba(79,141,255,.08)); border:1px solid rgba(255,46,154,.28); margin-bottom:var(--sp-5); flex-wrap:wrap; }
.dropbar .db-ic { width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(255,46,154,.16);color:var(--primary-2);flex:none; }
.dropbar .db-main { flex:1; min-width:200px; }
.dropbar .db-k { font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-mute); }
.dropbar .db-q { font-family:var(--font-head); font-weight:800; font-size:.98rem; }
.dropbar .vcount { font-size:1.5rem; margin:0; }

@media (max-width:680px){ .vtabs { grid-template-columns:repeat(2,1fr); } }

/* ===== prediction grid (auto-fit pro 5-7 AI) + typ otázky ===== */
.pred-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:var(--sp-2); }
.qtype { text-transform:none; letter-spacing:0; }
.qtype-single { color:#7fb0ff; background:rgba(79,141,255,.14); }
.qtype-binary { color:#fcd34d; background:rgba(251,191,36,.14); }
.qtype-horizons { color:#5ee6ad; background:rgba(22,199,132,.14); }
@media(max-width:560px){ .pred-grid { grid-template-columns:repeat(3,1fr); } }

/* ===== Methodology banner ===== */
.method { background:linear-gradient(135deg, rgba(154,108,255,.1), rgba(79,141,255,.06)); border:1px solid var(--border-strong);
    border-radius:var(--r-lg); padding:var(--sp-5); margin:var(--sp-2) 0 var(--sp-5); }
.method-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.method-badge { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:800; font-size:.82rem;
    text-transform:uppercase; letter-spacing:.04em; color:var(--text); }
.method-badge svg { width:18px; height:18px; color:var(--primary-2); }
.method-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.mstep { display:flex; gap:12px; align-items:flex-start; }
.mstep .mnum { width:30px; height:30px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:1rem; color:#0a0a16; background:var(--grad-primary); }
.mstep strong { display:block; font-family:var(--font-head); font-size:.92rem; margin-bottom:2px; }
.mstep span { font-size:.84rem; color:var(--text-dim); line-height:1.45; }
.method-note { display:flex; align-items:flex-start; gap:8px; margin:var(--sp-4) 0 0; padding-top:var(--sp-4);
    border-top:1px solid var(--border); font-size:.84rem; color:var(--text-dim); }
.method-note svg { width:16px; height:16px; color:var(--success); flex:none; margin-top:2px; }
@media(max-width:780px){ .method-steps { grid-template-columns:1fr; gap:var(--sp-3); } }

/* ===== Next-drop card ===== */
.nextcard { display:block; background:linear-gradient(150deg, rgba(255,46,154,.14), rgba(79,141,255,.08));
    border:1px solid rgba(255,46,154,.32); border-radius:var(--r-lg); padding:var(--sp-5); transition:border-color var(--t), transform var(--t); }
.nextcard:hover { border-color:var(--primary); transform:translateY(-2px); }
.nextcard-top { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--sp-3); }
.nextcard-q { font-family:var(--font-head); font-size:1.3rem; margin:0 0 var(--sp-4); color:var(--text); }
.nextcard-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.nextcard-foot .db-k { font-size:.8rem; color:var(--text-dim); }
.nextcard-foot .vcount { font-family:var(--font-display); font-size:2rem; line-height:1;
    background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* Teaser bez prozrazení otázky (překvapení) */
.nextcard-mystery { text-align:center; }
.nextcard-mystery .nextcard-myic { width:54px; height:54px; margin:0 auto var(--sp-3); border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center; color:var(--primary);
    background:color-mix(in srgb,var(--primary) 16%,transparent); border:1px solid color-mix(in srgb,var(--primary) 38%,transparent); }
.nextcard-mystery .nextcard-myic svg { width:26px; height:26px; }

/* ===== Rozbalovací plné odpovědi AI ===== */
.full-answers { margin-top:var(--sp-4); border-top:1px solid var(--border); padding-top:var(--sp-3); }
.full-answers > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; line-height:1;
    font-family:var(--font-head); font-size:.82rem; font-weight:700; color:var(--primary);
    padding:8px 14px; border-radius:999px; background:color-mix(in srgb,var(--primary) 12%,transparent);
    border:1px solid color-mix(in srgb,var(--primary) 30%,transparent); transition:background var(--t); }
.full-answers > summary::-webkit-details-marker { display:none; }
.full-answers > summary:hover { background:color-mix(in srgb,var(--primary) 20%,transparent); }
.full-answers > summary .fa-ic { display:inline-flex; align-items:center; }
.full-answers > summary .fa-ic svg { width:15px; height:15px; display:block; }
.full-answers[open] > summary { margin-bottom:var(--sp-3); }
.fa-body { display:grid; gap:var(--sp-3); }
.fa-ai { border-left:3px solid var(--ai); padding:var(--sp-2) 0 var(--sp-2) var(--sp-3);
    background:color-mix(in srgb,var(--ai) 6%,transparent); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.fa-ai .fa-text { margin:0; font-size:.86rem; line-height:1.55; color:var(--text-dim); }
.fa-ai .fa-kp { margin-top:8px; }
.fa-ai .fa-kp ul { margin:4px 0 0; padding-left:18px; }
.fa-ai .fa-kp li { font-size:.8rem; line-height:1.5; color:var(--text); margin-bottom:2px; }

/* ===== Day separator + upcoming list ===== */
.day-sep { font-family:var(--font-head); font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em;
    color:var(--text-mute); padding:var(--sp-2) 0; margin-top:var(--sp-2); }
.uplist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.upitem { display:flex; align-items:center; gap:var(--sp-3); padding:11px 14px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r-md); transition:border-color var(--t-fast); }
.upitem:hover { border-color:var(--border-strong); }
.upitem .up-date { font-family:var(--font-head); font-weight:800; font-size:.78rem; color:var(--primary-2); width:46px; flex:none; }
.upitem .up-cat { width:24px; height:24px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb,var(--ai) 16%,transparent); color:var(--ai); }
.upitem .up-cat svg { width:15px; height:15px; }
.upitem .up-q { flex:1; font-size:.9rem; min-width:0; }
@media(max-width:560px){ .upitem .up-q { font-size:.84rem; } .upitem .qtype { display:none; } }

/* ============================================================
   HERO LINEUP — poster-style band of all titans (clean labels)
   ============================================================ */
.lineup { position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--border-strong);
    background:var(--grad-hero); padding:var(--sp-6) var(--sp-5) var(--sp-5);
    box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 60px rgba(154,108,255,.18);
    animation: introZoom 1.1s cubic-bezier(.2,.7,.2,1) both; }
.lineup::before { content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(120% 90% at 50% 0%, transparent 50%, rgba(7,7,26,.6) 100%); }
.lineup-title { position:relative; text-align:center; margin-bottom:var(--sp-5); }
.lineup-title h1 { font-size:clamp(2.2rem,6vw,4.4rem); margin:0; }
.lineup-sub { font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:.06em;
    font-size:clamp(.8rem,2vw,1.1rem); color:var(--text); }
.lineup-row { position:relative; display:grid; grid-template-columns:repeat(7,1fr); gap:var(--sp-3); }
.lu-titan { display:flex; flex-direction:column; transition:transform var(--t); }
.lu-titan:hover { transform:translateY(-6px); }
.lu-photo { position:relative; aspect-ratio:3/4; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border-strong);
    background:#0c0c20; }
.lu-photo img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.lu-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, #0c0c20 99%);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ai) 25%,transparent); }
.lu-titan:hover .lu-photo::after { box-shadow:inset 0 0 0 2px var(--ai), inset 0 -30px 40px color-mix(in srgb,var(--ai) 35%,transparent); }
.lu-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--ai); }
.lu-fallback svg { width:46px; height:46px; }
.lu-label { text-align:center; padding-top:10px; }
.lu-brand { display:flex; align-items:center; justify-content:center; gap:6px; }
.lu-logo { width:18px; height:18px; color:var(--ai); flex:none; } .lu-logo svg { width:18px; height:18px; display:block; }
.lu-name { font-family:var(--font-head); font-weight:800; font-size:.92rem; }
.lu-person { font-size:.74rem; color:var(--text-dim); margin-top:1px; }
.lu-tag { font-size:.68rem; color:var(--text-mute); margin-top:5px; line-height:1.3; min-height:2.4em; }

/* Meet the contenders — 7 columns */
.titans-7 { grid-template-columns:repeat(7,1fr); }

@media (max-width:1000px){
    .lineup-row { grid-template-columns:repeat(4,1fr); }
    .titans-7 { grid-template-columns:repeat(4,1fr); }
    .lu-tag { display:none; }
}
@media (max-width:620px){
    .lineup-row { grid-template-columns:repeat(3,1fr); gap:8px; }
    .titans-7 { grid-template-columns:repeat(2,1fr); }
    .lu-person { display:none; }
}

/* ===== Competition teaser card (home) ===== */
.compete-card { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--sp-6); align-items:center;
    background:linear-gradient(140deg, rgba(22,199,132,.1), rgba(79,141,255,.08)); border:1px solid var(--border-strong);
    border-radius:var(--r-xl); padding:var(--sp-6); }
.compete-board { display:flex; flex-direction:column; gap:8px; }
.cb-row { display:flex; align-items:center; gap:12px; padding:10px 12px; background:rgba(255,255,255,.04);
    border:1px solid var(--border); border-left:3px solid var(--ai); border-radius:var(--r-md); }
.cb-rank { font-family:var(--font-display); font-size:1.2rem; width:22px; text-align:center; color:var(--ai); }
.cb-av { width:34px; height:34px; border-radius:9px; overflow:hidden; flex:none; border:1px solid var(--ai); display:flex;align-items:center;justify-content:center; }
.cb-av img { width:100%; height:100%; object-fit:cover; } .cb-av span { width:60%;height:60%; }
.cb-nm { font-family:var(--font-head); font-weight:800; font-size:.92rem; flex:1; }
.cb-lab { font-size:.7rem; color:var(--text-mute); text-transform:uppercase; letter-spacing:.06em; }
@media(max-width:820px){ .compete-card { grid-template-columns:1fr; } }

/* ============================================================
   USER AUTH (frontend) — login / register / account / reactions
   ============================================================ */

/* --- Header user widget --- */
.user-widget { display:inline-flex; align-items:center; gap:var(--sp-3); }
.user-widget-link { font-family:var(--font-head); font-weight:700; font-size:.86rem; color:var(--text);
    max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-widget-link:hover { color:var(--primary-2); }
.user-widget-out { font-size:.78rem; color:var(--text-mute); }
.user-widget-out:hover { color:var(--text-dim); }

/* --- Auth card (login / register) --- */
.auth-wrap { max-width:440px; margin:0 auto; }
.auth-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
    padding:var(--sp-6); box-shadow:var(--shadow-md); }
.auth-title { font-family:var(--font-display); font-size:2rem; line-height:1.05; margin:0 0 var(--sp-2); }
.auth-sub { font-size:.9rem; margin:0 0 var(--sp-5); }
.auth-form { display:flex; flex-direction:column; gap:var(--sp-4); }
.auth-field { display:flex; flex-direction:column; gap:6px; }
.auth-field label { font-size:.82rem; font-weight:600; color:var(--text-dim); }
.auth-opt { font-weight:500; color:var(--text-mute); font-size:.74rem; }
.auth-inp { width:100%; background:var(--bg-2); border:1px solid var(--border-strong); border-radius:var(--r-sm);
    color:var(--text); padding:11px 13px; font:inherit; font-size:.92rem; transition:border-color var(--t-fast); }
.auth-inp:focus { outline:none; border-color:var(--primary); }
.auth-hint { font-size:.74rem; color:var(--text-mute); }
.auth-submit { width:100%; justify-content:center; margin-top:var(--sp-2); }
.auth-google { width:100%; justify-content:center; }
.auth-divider { display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-5) 0; color:var(--text-mute); font-size:.78rem; }
.auth-divider::before, .auth-divider::after { content:""; flex:1; height:1px; background:var(--border); }
.auth-alt { margin:var(--sp-5) 0 0; text-align:center; font-size:.86rem; color:var(--text-dim); }
.auth-alt a { color:var(--primary-2); font-weight:700; }
.auth-alt a:hover { text-decoration:underline; }

.auth-alert { padding:11px 14px; border-radius:var(--r-sm); font-size:.86rem; margin-bottom:var(--sp-4); border:1px solid transparent; }
.auth-alert-err { background:rgba(240,80,110,.12); border-color:rgba(240,80,110,.4); color:#ffb3c2; }
.auth-alert-ok { background:rgba(22,199,132,.12); border-color:rgba(22,199,132,.4); color:#7df0c0; }

/* --- Account page --- */
.account-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
    flex-wrap:wrap; margin-bottom:var(--sp-6); }
.account-id { display:flex; align-items:center; gap:var(--sp-4); }
.account-avatar { width:56px; height:56px; border-radius:50%; flex:none; background:var(--grad-primary);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:1.5rem; box-shadow:var(--glow-primary); }
.account-name { font-family:var(--font-display); font-size:1.7rem; margin:0; line-height:1.05; }
.account-email { font-size:.86rem; margin:2px 0 0; }
.account-sec-h { font-family:var(--font-head); font-weight:800; font-size:1.05rem; text-transform:uppercase;
    letter-spacing:.04em; color:var(--text-dim); margin:0 0 var(--sp-4); }
.account-empty { display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-4); }

.react-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.react-list-item { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 14px;
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); font-size:.9rem; }
.react-tag { font-family:var(--font-head); font-weight:800; font-size:.72rem; text-transform:uppercase;
    letter-spacing:.03em; padding:3px 9px; border-radius:var(--r-pill); }
.react-tag-agree { background:rgba(22,199,132,.16); color:#7df0c0; }
.react-tag-disagree { background:rgba(240,80,110,.16); color:#ffb3c2; }
.react-with { color:var(--text-mute); }
.react-ai { font-family:var(--font-head); font-weight:800; color:var(--ai, var(--primary)); }
.react-q { color:var(--text-dim); }

/* --- React buttons (under predictions) --- */
.react-buttons { display:inline-flex; gap:8px; align-items:center; }
.react-form { margin:0; display:inline; }
.react-btn { display:inline-flex; align-items:center; gap:6px; line-height:1; cursor:pointer;
    font-family:var(--font-head); font-weight:700; font-size:.78rem;
    padding:6px 11px; border-radius:var(--r-pill); border:1px solid var(--border-strong);
    background:rgba(255,255,255,.04); color:var(--text-dim); transition:all var(--t-fast); }
.react-btn svg { width:14px; height:14px; display:block; flex:none; }
.react-btn:hover { background:rgba(255,255,255,.09); color:var(--text); transform:translateY(-1px); }
.react-btn .react-count { font-family:var(--font-body); font-weight:600; font-size:.74rem; color:var(--text-mute);
    background:rgba(0,0,0,.25); padding:1px 7px; border-radius:var(--r-pill); }
.react-btn-agree.is-active { background:rgba(22,199,132,.16); border-color:rgba(22,199,132,.5); color:#7df0c0; }
.react-btn-disagree.is-active { background:rgba(240,80,110,.16); border-color:rgba(240,80,110,.5); color:#ffb3c2; }
.react-btn.is-active .react-count { color:inherit; }

/* ===== Open-answer questions (Presidents etc.) ===== */
.open-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-3); }
.open-ans { background:rgba(255,255,255,.03); border:1px solid var(--border); border-left:3px solid var(--ai); border-radius:var(--r-md); padding:var(--sp-3); }
.open-val { font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--ai); line-height:1.2; }
.qtype-open { color:#f9a8d4; background:rgba(244,114,182,.16); }

/* ===== Arena: accuracy podium + trust ===== */
.podium { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); align-items:end; max-width:760px; margin:0 auto; }
.pod { display:flex; flex-direction:column; align-items:center; text-align:center; padding:var(--sp-5) var(--sp-3) var(--sp-4);
    background:linear-gradient(180deg, color-mix(in srgb,var(--ai) 14%,transparent), rgba(255,255,255,.02));
    border:1px solid var(--border); border-top:3px solid var(--ai); border-radius:var(--r-lg); position:relative; transition:transform var(--t); }
.pod:hover { transform:translateY(-5px); }
.pod-1 { padding-top:var(--sp-7); box-shadow:0 0 40px color-mix(in srgb,var(--ai) 30%,transparent); }
.pod-av { width:74px; height:74px; border-radius:50%; overflow:hidden; border:3px solid var(--ai); margin-bottom:10px; }
.pod-1 .pod-av { width:92px; height:92px; }
.pod-av img { width:100%; height:100%; object-fit:cover; } .pod-av span { width:100%;height:100%;display:flex;align-items:center;justify-content:center; }
.pod-rank { position:absolute; top:10px; right:12px; font-family:var(--font-display); font-size:1.4rem; color:var(--ai); }
.pod-nm { font-family:var(--font-head); font-weight:800; font-size:.95rem; }
.pod-acc { font-family:var(--font-display); font-size:2.4rem; color:var(--ai); line-height:1; }
.pod-1 .pod-acc { font-size:3rem; }
.pod-acc span { font-size:1rem; opacity:.7; }
.pod-base { font-size:.7rem; color:var(--text-mute); }
.trust-bar { height:8px; background:rgba(255,255,255,.08); border-radius:6px; overflow:hidden; }
.trust-bar > i { display:block; height:100%; border-radius:6px; }
@media(max-width:620px){ .podium { grid-template-columns:1fr; } .pod-1 { padding-top:var(--sp-5); } }

/* ===== AI reply toast (after reacting) ===== */
.aip-toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,140%); z-index:200;
    display:flex; align-items:center; gap:12px; max-width:440px; padding:13px 16px;
    background:var(--surface-2); border:1px solid var(--border-strong); border-left:3px solid var(--primary);
    border-radius:var(--r-md); box-shadow:var(--shadow-lg); font-size:.9rem; color:var(--text);
    opacity:0; transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.aip-toast.show { transform:translate(-50%,0); opacity:1; }
.aip-toast-ic { width:26px; height:26px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center;
    background:rgba(255,46,154,.16); color:var(--primary); }
.aip-toast-ic svg { width:16px; height:16px; }
.aip-toast-x { margin-left:auto; background:none; border:none; color:var(--text-mute); font-size:1.3rem; cursor:pointer; line-height:1; padding:0 2px; }
.aip-toast-x:hover { color:var(--text); }

/* ===== Compact reactions on prediction mini-cards ===== */
.react-mini { display:flex; gap:4px; margin-top:7px; }
.react-mini form { flex:1; }
.rm-btn { display:flex; align-items:center; justify-content:center; gap:3px; width:100%; padding:3px 4px;
    background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--r-sm);
    font-size:.66rem; font-weight:700; color:var(--text-mute); cursor:pointer; transition:all var(--t-fast); line-height:1; }
.rm-btn:hover { color:var(--text); background:rgba(255,255,255,.08); }
.rm-agree.on { color:var(--success); border-color:color-mix(in srgb,var(--success) 50%,transparent); background:rgba(22,199,132,.12); }
.rm-disagree.on { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 50%,transparent); background:rgba(240,80,110,.12); }

/* Vnořená celá původní odpověď pod výcucem */
.fa-orig { margin-top:8px; }
.fa-orig > summary { cursor:pointer; font-size:.72rem; font-weight:700; color:var(--text-mute); list-style:none; }
.fa-orig > summary::-webkit-details-marker{display:none}
.fa-orig > summary::before{content:"▸ ";}
.fa-orig[open] > summary::before{content:"▾ ";}
.fa-orig .fa-text { margin-top:6px; opacity:.85; }

/* ============================================================
   Chrome/Edge autofill — nepodbarvovat vyplněná pole namodro
   (tmavý web: světle modré autofill pozadí = rozbité).
   ============================================================ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    transition: background-color 9999999s ease-out, color 9999999s ease-out !important;
}
.auth-inp:-webkit-autofill,
.beat input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 1000px var(--bg-2);
    box-shadow: inset 0 0 0 1000px var(--bg-2);
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
}

/* ── Odpočet do startu kadence (home, než padne první otázka) ── */
.launch-card {
    text-align: center;
    padding: 48px 32px;
    border-radius: 20px;
    border: 1px solid var(--border-strong);
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(255, 46, 154, .16), transparent 62%),
        var(--surface);
}

.launch-card .eyebrow { display: block; margin-bottom: 14px; }

.launch-count {
    font-family: Anton, Archivo, sans-serif;
    font-size: clamp(40px, 9vw, 84px);
    line-height: 1;
    letter-spacing: 2px;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.launch-date {
    margin: 10px 0 20px;
    font-size: clamp(18px, 3vw, 26px);
    color: var(--text);
}

.launch-q {
    max-width: 720px;
    margin: 0 auto 12px;
    font-size: clamp(16px, 2.4vw, 21px);
    line-height: 1.45;
    color: var(--text-dim);
}

.launch-note {
    margin: 0;
    font-size: 14px;
    color: var(--text-mute);
}