/* Zlatý Los: hravý, noc, zlato a červená. Barvy z appky (app_zlatylos/lib/core/theme/theme.dart). */
:root {
  color-scheme: dark;
  --night: #14102a;
  --night-2: #0d0a1e;
  --panel: #1e1840;
  --panel-2: #271f52;
  --gold: #f2b33d;
  --gold-light: #ffe08a;
  --gold-deep: #c98a1e;
  --red: #e0343f;
  --red-deep: #9e1b2a;
  --cream: #f7f3e8;
  --muted: #b3acd0;
  --win: #5bd18f;
  --line: rgba(242,179,61,.22);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--cream); background: var(--night); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(900px 500px at 85% -10%, rgba(224,52,63,.22), transparent 60%), radial-gradient(700px 500px at 0% 20%, rgba(242,179,61,.12), transparent 60%), var(--night); }
a { color: var(--gold-light); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 30; padding: 10px 16px; background: var(--gold); color: var(--night); }
.skip-link:focus { left: 12px; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.container.narrow { width: min(800px, calc(100% - 48px)); }
h1, h2, h3, p { margin-top: 0; }

/* Hlavička */
.topbar { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line); background: rgba(13,10,30,.88); backdrop-filter: blur(10px); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 70px; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--cream); text-decoration: none; font-size: 22px; font-weight: 900; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 55%, var(--gold-deep)); color: var(--night); font-size: 17px; box-shadow: 0 0 18px rgba(242,179,61,.45); }
.brand-accent { background: linear-gradient(180deg, var(--gold-light), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-links a { color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none; transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--gold-light); }
.nav-cta, .button-primary { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 0 18px; border-radius: 999px; color: #2a1600; background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); font-size: 14px; font-weight: 850; text-decoration: none; box-shadow: 0 0 0 1px rgba(255,224,138,.5) inset, 0 8px 24px rgba(242,179,61,.28); transition: transform .2s, box-shadow .2s; }
.button-primary { min-height: 54px; padding: 0 28px; font-size: 16px; }
.nav-cta:hover, .button-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,224,138,.7) inset, 0 12px 30px rgba(242,179,61,.4); }
.button-primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* Hlava stránky: světelný rám jako u automatu */
.page-head { position: relative; padding-block: 58px 40px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(39,31,82,.6), transparent); }
.page-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background-image: radial-gradient(circle, var(--gold-light) 0 2px, transparent 3px); background-size: 22px 6px; opacity: .7; }
.page-head h1 { margin-bottom: 16px; font-size: clamp(32px, 4.8vw, 54px); line-height: 1.08; letter-spacing: -.035em; font-weight: 900; background: linear-gradient(180deg, #fff 20%, var(--gold-light) 70%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-lead { max-width: 660px; margin: 0; color: #dcd6ee; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.65; }
.article-date { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--gold-deep); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-light); }

/* Text */
.prose { padding-block: 44px 76px; font-size: 17px; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 50px 0 14px; color: var(--gold-light); font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; letter-spacing: -.02em; }
.prose h3 { margin: 30px 0 10px; color: var(--cream); font-size: 20px; }
.prose p, .prose li { color: #e2ddf2; }
.prose strong { color: #fff; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--gold); }
.prose blockquote { margin: 26px 0; padding: 16px 20px; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 0 12px 12px 0; background: rgba(30,24,64,.7); }
.prose blockquote p:last-child { margin: 0; }
.table-wrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--line); border-radius: 14px; background: rgba(30,24,64,.6); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 11px 14px; text-align: left; border-bottom: 1px solid rgba(242,179,61,.14); vertical-align: top; }
.prose th { color: var(--gold-light); background: rgba(39,31,82,.9); }
.prose tr:last-child td { border-bottom: 0; }
.cta-row { margin: 36px 0; }

/* Úvodní stránka */
.page-home .page-head { padding-block: 80px 60px; text-align: left; }
.page-home .page-head h1 { max-width: 760px; font-size: clamp(40px, 6vw, 72px); }

/* Patička */
footer { border-top: 1px solid var(--line); background: var(--night-2); }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1.4fr; gap: 28px; padding-block: 38px; align-items: start; }
footer .brand { font-size: 20px; }
.footer-tagline { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a { color: #d6d0ea; font-size: 14px; text-decoration: none; }
.footer-links a:hover { color: var(--gold-light); }
.footer-legal p { margin: 0 0 6px; color: #9d96bd; font-size: 12px; }

@media (max-width: 760px) {
  .container, .container.narrow { width: min(100% - 32px, 620px); }
  .topbar-inner { min-height: 60px; gap: 12px; }
  .nav-links { display: none; }
  .nav-cta { min-height: 38px; padding-inline: 14px; font-size: 13px; }
  .page-head { padding-block: 40px 28px; }
  .prose { font-size: 16px; padding-block: 30px 56px; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ---------- Úvodní stránka ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(700px 420px at 78% 40%, rgba(242,179,61,.16), transparent 65%), linear-gradient(180deg, rgba(39,31,82,.55), transparent); }
.hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background-image: radial-gradient(circle, var(--gold-light) 0 2px, transparent 3px); background-size: 22px 6px; opacity: .75; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: center; gap: clamp(28px,5vw,70px); padding-block: 64px 70px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(30,24,64,.7); color: var(--gold-light); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hero h1 { margin-bottom: 18px; font-size: clamp(40px, 6vw, 70px); line-height: 1.04; letter-spacing: -.035em; font-weight: 900; background: linear-gradient(180deg, #fff 25%, var(--gold-light) 65%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { max-width: 560px; margin-bottom: 22px; color: #efeaff; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; font-weight: 600; }
.hero-extra ul { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.hero-extra li { position: relative; padding: 12px 14px 12px 46px; border: 1px solid var(--line); border-radius: 14px; background: rgba(30,24,64,.72); color: #ddd7ef; font-size: 15px; }
.hero-extra li::before { content: "★"; position: absolute; left: 14px; top: 11px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 60%, var(--gold-deep)); color: #3a2200; font-size: 12px; }
.hero-extra li strong { color: #fff; }
.hero-extra .cta-row { margin: 6px 0 12px; }
.hero-extra p:not(.cta-row) { color: var(--muted); font-size: 14px; }

/* Automat v hlavě stránky */
.hero-visual { position: relative; min-height: 440px; display: grid; place-items: center; }
.slot { position: relative; width: min(400px, 100%); padding: 22px 22px 26px; border-radius: 34px; background: linear-gradient(180deg, #b01f2c, var(--red-deep) 60%, #6d0f1c); box-shadow: 0 0 0 4px var(--gold-deep), 0 0 0 7px #3a0a12, 0 30px 70px rgba(0,0,0,.55), 0 0 80px rgba(224,52,63,.35); }
.slot-lights { position: absolute; inset: 8px; border-radius: 28px; pointer-events: none; background-image: radial-gradient(circle, var(--gold-light) 0 2.5px, transparent 3.5px); background-size: 20px 20px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 6px; animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .45; } }
.slot-top { margin: 4px auto 16px; width: fit-content; padding: 8px 22px; border-radius: 14px; background: linear-gradient(180deg, var(--gold-light), var(--gold) 60%, var(--gold-deep)); color: #3a2200; font-size: 22px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 0 24px rgba(255,224,138,.5); }
.slot-window { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; border-radius: 18px; background: #120d26; box-shadow: inset 0 0 0 3px var(--gold-deep), inset 0 10px 30px rgba(0,0,0,.6); }
.reel { display: grid; gap: 8px; padding: 8px 4px; border-radius: 12px; background: linear-gradient(180deg, #d9d2ec, #fff 45%, #fff 55%, #d9d2ec); }
.sym { display: block; aspect-ratio: 1; border-radius: 10px; background-position: center; background-repeat: no-repeat; background-size: 72%; }
.sym-coin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe08a'/%3E%3Cstop offset='.6' stop-color='%23f2b33d'/%3E%3Cstop offset='1' stop-color='%23c98a1e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='28' fill='url(%23g)' stroke='%238a5a0f' stroke-width='3'/%3E%3Ccircle cx='32' cy='32' r='19' fill='none' stroke='%238a5a0f' stroke-width='2' opacity='.6'/%3E%3Ctext x='32' y='41' font-family='Arial' font-weight='900' font-size='24' text-anchor='middle' fill='%238a5a0f'%3EK%C4%8D%3C/text%3E%3C/svg%3E"); }
.sym-star { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4l8.2 17.6 19.3 2.4-14.2 13.3 3.7 19.1L32 47l-17 9.4 3.7-19.1L4.5 24l19.3-2.4z' fill='%23f2b33d' stroke='%23c98a1e' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sym-chest { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 28h48v26H8z' fill='%239a5b22' stroke='%235a3210' stroke-width='3'/%3E%3Cpath d='M8 28c0-12 10-18 24-18s24 6 24 18z' fill='%23b8702c' stroke='%235a3210' stroke-width='3'/%3E%3Cpath d='M8 28h48' stroke='%23f2b33d' stroke-width='5'/%3E%3Crect x='27' y='24' width='10' height='13' rx='2' fill='%23f2b33d' stroke='%235a3210' stroke-width='2'/%3E%3C/svg%3E"); }
.sym-clover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%2336b36b' stroke='%231d6b3e' stroke-width='2.5'%3E%3Ccircle cx='22' cy='22' r='11'/%3E%3Ccircle cx='42' cy='22' r='11'/%3E%3Ccircle cx='22' cy='40' r='11'/%3E%3Ccircle cx='42' cy='40' r='11'/%3E%3C/g%3E%3Cpath d='M32 34c2 10 6 16 12 22' stroke='%231d6b3e' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.reel .sym:nth-child(2) { background-color: rgba(242,179,61,.18); box-shadow: 0 0 0 2px var(--gold); }
.payline { position: absolute; left: 6px; right: 6px; top: 50%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--red), var(--gold-light), var(--red), transparent); box-shadow: 0 0 12px rgba(242,179,61,.8); }
.slot-foot { margin-top: 16px; text-align: center; }
.chip { display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,224,138,.45); color: var(--gold-light); font-size: 13px; font-weight: 800; }
.float-coin { position: absolute; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 55%, var(--gold-deep)); box-shadow: 0 0 22px rgba(242,179,61,.55); animation: float 5s ease-in-out infinite; }
.float-coin::after { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; color: #7a4c0a; font-size: 22px; }
.float-coin.c1 { left: 2%; top: 12%; }
.float-coin.c2 { right: 0; top: 4%; width: 40px; height: 40px; animation-delay: -1.6s; }
.float-coin.c3 { right: 6%; bottom: 6%; width: 46px; height: 46px; animation-delay: -3s; }
@keyframes float { 50% { transform: translateY(-14px) rotate(12deg); } }

/* Sekce */
.home-block { padding-block: 64px; border-bottom: 1px solid rgba(242,179,61,.1); }
.home-block h2 { margin: 0 0 14px; color: var(--gold-light); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.02em; }
.home-block h2 + p { max-width: 720px; }
.home-block h3 { margin: 34px 0 14px; color: #fff; font-size: 21px; }
.home-block p { color: #e2ddf2; font-size: 17px; max-width: 760px; }
.home-block a { font-weight: 700; }
.home-block ol { counter-reset: krok; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0; padding: 0; list-style: none; }
.home-block ol li { counter-increment: krok; position: relative; padding: 58px 22px 22px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(39,31,82,.9), rgba(30,24,64,.8)); color: #ddd7ef; }
.home-block ol li::before { content: counter(krok); position: absolute; left: 22px; top: 18px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, var(--gold-light), var(--gold-deep)); color: #3a2200; font-weight: 900; }
.home-block ol li strong { display: block; margin-bottom: 6px; color: #fff; font-size: 18px; }
.home-block ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 0 0 14px; padding: 0; list-style: none; }
.home-block ul li { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(30,24,64,.78); color: #d6d0ea; font-size: 15px; transition: transform .2s, border-color .2s; }
.home-block ul li:hover { transform: translateY(-3px); border-color: rgba(242,179,61,.5); }
.home-block ul li strong { display: block; margin-bottom: 4px; color: var(--gold-light); font-size: 18px; }
.home-nic-nevkladas { background: radial-gradient(600px 300px at 10% 50%, rgba(91,209,143,.1), transparent 70%); }
.home-nic-nevkladas h2:first-child::before { content: "✓ "; color: var(--win); }
.home-cta-dole .container { padding: 44px; border: 1px solid rgba(242,179,61,.4); border-radius: 26px; text-align: center; background: linear-gradient(135deg, rgba(158,27,42,.55), rgba(39,31,82,.9)); box-shadow: 0 0 60px rgba(224,52,63,.2); }
.home-cta-dole p { margin-inline: auto; }

/* Obrázky */
.prose figure, .prose p > img { margin: 24px 0; }
.prose img { display: block; max-width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); }
.prose .shot { display: block; width: min(320px, 100%); margin: 22px auto; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; padding-block: 44px 50px; }
  .hero-visual { min-height: 380px; order: -1; }
  .home-block ol { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .slot { width: min(320px, 92%); }
  .home-block { padding-block: 44px; }
  .home-cta-dole .container { padding: 28px 20px; }
}