:root{
  --bg:#0a0f18;
  --text:#e9eefc;
  --muted:#b6c2dd;
  --line:rgba(255,255,255,.10);
  --shadow:0 18px 55px rgba(0,0,0,.55);
  --radius:14px;
  --orange:#ff8c28;
  --blue:#4cc3ff;
  --green:#62ff7b;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
  background:#070a11 url("/assets/img/texture_bg.png") center/cover fixed;
}

a{color:inherit;text-decoration:none}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
}

/* ================= TOPBAR ================= */

.topbar{
  background:linear-gradient(to bottom, rgba(20,24,33,.96), rgba(12,15,22,.90));
  border-bottom:1px solid rgba(255,140,40,.35);
  box-shadow:0 10px 35px rgba(0,0,0,.65);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:950;
  letter-spacing:.6px;
}

.brand .t{font-size:26px}
.brand .t b{color:var(--orange)}

.nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.nav a{
  padding:10px 12px;
  border-radius:10px;
  color:rgba(233,238,252,.85);
  font-weight:800;
  font-size:14px;
  border:1px solid transparent;
}

.nav a:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}

.nav a.active{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}

.nav a.cta{
  background:linear-gradient(180deg, rgba(255,140,40,.22), rgba(0,0,0,.18));
  border-color:rgba(255,140,40,.45);
}

/* ================= HERO ================= */

.hero{
  margin-top:18px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#0b0f18;
}

.hero-slide{
  position:relative;
  height:320px;                 /* PEVNÁ VÝŠKA */
  background-size:contain;      /* NEROZTAHUJE (bez ořezu) */
  background-position:center;
  background-repeat:no-repeat;
  background-color:#0b0f18;
}

/* větší obrazovky */
@media (min-width:900px){
  .hero-slide{ height:360px; }
}

/* overlay vypnutý (aby ti to nedělalo tmavý film) */
.hero-slide::after{ display:none; }

/* ================= BUTTONS ================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:12px;
  font-weight:950;
  font-size:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}

.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.10);
}

.btn.primary{
  border-color:rgba(255,140,40,.55);
  background:linear-gradient(180deg, rgba(255,140,40,.35), rgba(0,0,0,.20));
}

.btn.blue{
  border-color:rgba(76,195,255,.55);
  background:linear-gradient(180deg, rgba(76,195,255,.30), rgba(0,0,0,.20));
}

.btn.green{
  border-color:rgba(98,255,123,.55);
  background:linear-gradient(180deg, rgba(98,255,123,.28), rgba(0,0,0,.20));
}

/* ================= SECTIONS ================= */

.section{padding:26px 0 40px}

.h2{
  margin:0 0 14px;
  font-size:22px;
  font-weight:1000;
  letter-spacing:.2px;
  text-transform:uppercase;
}

/* ================= CARDS ================= */

.card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(18,24,37,.88), rgba(9,11,18,.86));
  box-shadow:0 16px 44px rgba(0,0,0,.55);
  overflow:hidden;
}

/* GAME CARDS */

.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

@media(max-width:980px){
  .grid3{grid-template-columns:1fr}
}

.game-card img{
  width:100%;
  display:block;
}

.game-card .body{padding:14px}

.game-card .title{
  font-weight:1000;
  letter-spacing:.2px;
}

.game-card .desc{
  margin-top:6px;
  color:rgba(233,238,252,.82);
  font-size:13.5px;
  line-height:1.45;
}

.game-card .actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ================= FEATURES ================= */

.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

@media(max-width:980px){
  .features{grid-template-columns:1fr}
}

.feature{padding:16px}

.feature .ico{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  margin-bottom:10px;
  font-weight:1000;
}

.feature .t{font-weight:1000}

.feature .d{
  margin-top:6px;
  color:rgba(233,238,252,.78);
  font-size:13.5px;
  line-height:1.45;
}

/* ================= FOOTER ================= */

.footer{
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.35);
  padding:18px 0;
  color:rgba(233,238,252,.78);
  font-size:13px;
}

.small{opacity:.82;font-size:12.5px}

/* ===================================================
   ADMIN UI (pořád v jednom style.css – bez admin.css)
   =================================================== */

/* ať se to v adminu nelepí */
.stack{display:flex;flex-direction:column;gap:14px}

/* hezčí nadpisy v admin kartách */
.h1{
  margin:0 0 6px;
  font-size:20px;
  font-weight:1000;
  letter-spacing:.2px;
}

/* jednoduchá horizontální linka */
.hr{
  height:1px;
  background:rgba(255,255,255,.10);
  margin:12px 0;
}

/* akce vedle sebe */
.actions{display:flex;gap:10px;flex-wrap:wrap}

/* labels + inputy */
.label{
  display:block;
  margin:10px 0 6px;
  font-weight:900;
  font-size:13px;
  color:rgba(233,238,252,.88);
}

.input, textarea.input, select.input{
  width:100%;
  border-radius:14px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:var(--text);
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.input:focus{
  border-color:rgba(255,140,40,.55);
  box-shadow:0 0 0 3px rgba(255,140,40,.18);
}

textarea.input{
  min-height:320px;
  line-height:1.5;
  resize:vertical;
  font-family:ui-monospace,Consolas,monospace;
}

/* tabulka (admin články atd.) */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
}

.table thead th{
  text-align:left;
  font-size:12px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:rgba(233,238,252,.78);
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

.table tbody td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}

.table tbody tr:hover td{background:rgba(255,255,255,.03)}
.table tbody tr:last-child td{border-bottom:none}

/* badge */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}

.badge.on{
  border-color:rgba(98,255,123,.35);
  background:rgba(98,255,123,.10);
}

.badge.off{
  border-color:rgba(255,90,90,.30);
  background:rgba(255,90,90,.08);
}

/* ===== Modern Pricing Matrix (Hernizona) ===== */
.pricing-wrap{ margin-top:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pricing-wrap table{
  width:100%;
  min-width:1020px;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(18,24,37,.88), rgba(9,11,18,.86));
  box-shadow:0 16px 44px rgba(0,0,0,.55);
}

.pricing-wrap thead th{
  position:sticky; top:0; z-index:5;
  padding:14px 12px;
  text-align:center;
  font-size:12.5px;
  font-weight:1000;
  letter-spacing:.35px;
  text-transform:uppercase;
  color:rgba(233,238,252,.92);
  border-bottom:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,140,40,.14), rgba(0,0,0,.12));
}
.pricing-wrap thead th:first-child{
  text-align:left;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
}

.pricing-wrap tbody td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:center;
  color:rgba(233,238,252,.88);
  vertical-align:middle;
}
.pricing-wrap tbody tr:nth-child(even) td{ background:rgba(255,255,255,.03); }
.pricing-wrap tbody tr:hover td{ background:rgba(255,255,255,.06); }

.pricing-wrap tbody td:first-child{
  text-align:left;
  font-weight:950;
  letter-spacing:.15px;
  white-space:nowrap;
  color:rgba(233,238,252,.92);
}

.pricing-wrap .ok, .pricing-wrap .no{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  font-size:15px; line-height:1;
}
.pricing-wrap .ok{
  background:rgba(98,255,123,.12);
  border:1px solid rgba(98,255,123,.35);
}
.pricing-wrap .no{
  background:rgba(255,90,90,.10);
  border:1px solid rgba(255,90,90,.30);
}

.pricing-wrap .price{
  font-weight:1000;
  font-size:15px;
}
.pricing-wrap .price small{
  display:block;
  opacity:.75;
  font-weight:850;
  margin-top:3px;
  font-size:12px;
}

/* zvýrazněný sloupec (např. PROFI) */
.pricing-wrap .col-hot{
  background:linear-gradient(180deg, rgba(76,195,255,.12), rgba(0,0,0,.10)) !important;
}
.pricing-wrap thead .col-hot{
  background:linear-gradient(180deg, rgba(76,195,255,.25), rgba(0,0,0,.12)) !important;
  border-bottom:1px solid rgba(76,195,255,.35);
}

/* badge "Doporučeno" v hlavičce */
.pricing-badge{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.25px;
  text-transform:none;
  color:rgba(233,238,252,.92);
  border:1px solid rgba(76,195,255,.35);
  background:rgba(76,195,255,.12);
}

/* poznámka pod tabulkou */
.pricing-note{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  color:rgba(233,238,252,.80);
  font-size:13px;
  line-height:1.5;
}
/* ===== FIX: aby karty nebyly nalepené na okraj ===== */

/* více vnitřního prostoru kolem obsahu (web i admin) */
.container{
  padding-left: 22px;
  padding-right: 22px;
}

/* na mobilu klidně ještě víc */
@media (max-width: 520px){
  .container{
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* stránky typu contact/pricing/article, když někde nemáš .section wrapper */
.container > .card:first-child{
  margin-top: 18px;
}

/* obecně: když máš uvnitř containeru víc karet pod sebou */
.container .card{
  margin-bottom: 14px;
}

/* lepší “dýchání” sekcí */
.section{
  padding: 28px 0 46px;
}
/* ===== FIX: vnitřní padding pro obsah ===== */

/* základ – každá karta má vnitřní prostor */
.card{
  padding: 20px 22px;
}

/* větší obrazovky – víc vzduchu */
@media (min-width: 900px){
  .card{
    padding: 26px 28px;
  }
}

/* texty uvnitř karet */
.card h1,
.card h2,
.card h3,
.card p,
.card table,
.card form,
.card .small{
  margin-left: 0;
  margin-right: 0;
}

/* aby tabulky a formuláře nebyly nalepené */
.card table,
.card form{
  margin-top: 12px;
}
/* čitelnost textu */
.card p,
.card .content,
.card .newsEx{
  max-width: 760px;
}