/* ==========================================================
   MonoPixel – hlavní styl
   Paleta vychází z loga: bílá → azurová → královská modrá
   ========================================================== */
:root {
  --navy-950: #040c22;
  --navy-900: #071536;
  --navy-800: #0b2152;
  --blue-700: #0a4fd6;
  --blue-600: #1466f0;
  --blue-500: #1e88ff;
  --sky-400:  #3cc4ff;
  --sky-300:  #7ad8ff;
  --sky-100:  #e3f4ff;
  --white:    #ffffff;

  --bg:       #f3f7fe;
  --surface:  #ffffff;
  --text:     #0c1a3a;
  --muted:    #5a6b8c;
  --border:   #dbe5f5;

  --radius:   14px;
  --radius-sm: 8px;
  --shadow:   0 1px 2px rgba(7,21,54,.06), 0 8px 24px rgba(7,21,54,.07);
  --shadow-lg: 0 20px 50px rgba(10,79,214,.18);
  --pixel:    'Silkscreen', monospace;
  --font:     'Outfit', system-ui, sans-serif;
  --nav-h:    72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-600); text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p  { margin: 0 0 1em; }

.container { width: min(1180px, 100% - 32px); margin-inline: auto; }
.container--narrow { width: min(820px, 100% - 32px); }

/* ---------- tlačítka ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.5em;
  font: 700 1rem var(--font);
  border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
  white-space: nowrap;
}
.btn svg { width: 1.2em; height: 1.2em; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: .55em 1em; font-size: .92rem; }
.btn--block { width: 100%; }
.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, var(--blue-500), var(--blue-700));
  box-shadow: 0 4px 0 #0838a0, 0 10px 24px rgba(20,102,240,.35);
}
.btn--primary:hover { box-shadow: 0 6px 0 #0838a0, 0 14px 30px rgba(20,102,240,.45); }
.btn--ghost { color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.btn--ghost:hover { background: rgba(255,255,255,.16); }
.btn--white { color: var(--blue-700); background: #fff; box-shadow: 0 4px 0 #b9d4ff; }
.btn--outline { color: var(--blue-600); background: transparent; box-shadow: inset 0 0 0 2px var(--border); }
.btn--outline:hover { box-shadow: inset 0 0 0 2px var(--blue-500); }
.btn--discord { color: #fff; background: #5865f2; }
.btn--discord:hover { background: #4752e0; }
.btn:disabled { cursor: not-allowed; opacity: .6; transform: none; }

.eyebrow {
  display: inline-block;
  font: .8rem var(--pixel);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--blue-600);
  margin-bottom: .6em;
}
.eyebrow--light { color: var(--sky-300); }

/* ---------- navigace ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(4,12,34,.94);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(122,216,255,.12);
}
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__brand img { width: 170px; height: auto; }
.nav__menu { display: flex; align-items: center; gap: 4px; }
.nav__menu a:not(.btn) {
  position: relative;
  padding: .5em .85em;
  color: rgba(255,255,255,.75);
  font-weight: 600; font-size: .98rem;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.nav__menu a:not(.btn):hover { color: #fff; background: rgba(255,255,255,.06); }
.nav__menu a.is-active { color: #fff; }
.nav__menu a.is-active::after {
  content: ''; position: absolute; left: .85em; right: .85em; bottom: -2px; height: 3px;
  background: linear-gradient(90deg, var(--sky-400), var(--blue-500));
  box-shadow: 0 0 10px var(--sky-400);
}
.nav__actions { display: flex; align-items: center; gap: 10px; margin-left: 10px; }
@media (max-width: 1180px) and (min-width: 981px) {
  .nav__discord-label { display: none; }
  .nav__actions .btn--discord { padding: .55em .7em; }
}

/* přihlášený uživatel */
.user-menu { position: relative; }
.user-menu__btn {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 4px;
  font: 600 .95rem var(--font); color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(122,216,255,.25);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.user-menu__btn:hover, .user-menu.is-open .user-menu__btn { border-color: var(--sky-400); background: rgba(255,255,255,.1); }
.user-menu__btn img { width: 30px; height: 30px; border-radius: 6px; image-rendering: pixelated; }
.user-menu__nick { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-chip {
  padding: 2px 8px;
  font: .65rem var(--pixel); text-transform: uppercase;
  color: var(--navy-900); background: var(--sky-300);
  border-radius: 4px;
}
.rank-chip--admin { color: #fff; background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); box-shadow: 0 0 10px rgba(30,136,255,.5); }
/* barva ranku z administrace (Minecraft barvy jsou světlé → tmavý text) */
.rank-chip[style] { color: var(--navy-900); background: var(--rank); box-shadow: 0 0 10px color-mix(in srgb, var(--rank) 45%, transparent); }
.user-menu__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 230px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(4,12,34,.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.user-menu.is-open .user-menu__panel { opacity: 1; visibility: visible; transform: none; }
.user-menu__head { display: flex; flex-direction: column; padding: 8px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.user-menu__head strong { color: var(--text); }
.user-menu__head span { font-size: .85rem; color: var(--muted); }
.user-menu__panel a, .user-menu__panel button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px;
  font: 600 .95rem var(--font); color: var(--text); text-align: left;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.user-menu__panel a:hover, .user-menu__panel button:hover { background: var(--sky-100); color: var(--blue-700); }
.user-menu__panel svg { width: 18px; height: 18px; color: var(--blue-600); }
.user-menu__panel form { margin: 0; }

.nav__toggle { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 10px; }
.nav__toggle span { display: block; height: 3px; background: #fff; margin: 5px 0; transition: transform .2s, opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 16px 20px;
    background: var(--navy-950);
    border-bottom: 1px solid rgba(122,216,255,.15);
    transform: translateY(-110%); visibility: hidden;
    transition: transform .25s ease, visibility .25s;
  }
  .nav__menu.is-open { transform: none; visibility: visible; }
  .nav__menu a:not(.btn) { padding: .8em 1em; }
  .nav__menu a.is-active { background: rgba(60,196,255,.1); }
  .nav__menu a.is-active::after { display: none; }
  .nav__actions { flex-wrap: wrap; margin: 10px 0 0; }
  .nav__actions > * { flex: 1; }
  .user-menu { flex-basis: 100%; }
  .user-menu__btn { width: 100%; }
  .user-menu__panel { position: static; margin-top: 8px; box-shadow: none; display: none; }
  .user-menu.is-open .user-menu__panel { display: block; }
  .nav__brand img { width: 140px; }
}

/* ---------- hero ---------- */
.hero, .page-hero {
  position: relative;
  color: #fff;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30,136,255,.35), transparent 70%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  overflow: hidden;
  isolation: isolate;
}
.hero { margin-top: calc(var(--nav-h) * -1); padding: calc(var(--nav-h) + 56px) 0 120px; }

/* pixelová mřížka v pozadí */
.hero__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(122,216,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,216,255,.07) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 80%);
}
.hero__glow {
  position: absolute; z-index: -1;
  left: 50%; top: 38%; width: 900px; height: 380px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(60,196,255,.28), transparent);
  filter: blur(20px);
}

/* plovoucí kostičky jako v logu */
.hero__blocks i {
  position: absolute; z-index: -1;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  background: linear-gradient(135deg, var(--sky-300), var(--blue-500));
  box-shadow: inset -4px -4px 0 rgba(8,56,160,.45), inset 4px 4px 0 rgba(255,255,255,.4), 0 0 24px rgba(60,196,255,.55);
  animation: float 7s ease-in-out infinite;
  animation-delay: var(--d);
  opacity: .85;
}
.hero__blocks i:nth-child(even) { background: linear-gradient(135deg, #fff, var(--sky-100)); }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(8deg); }
}

.hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__logo { margin: 18px 0 8px; width: min(760px, 100%); }
.hero__logo img {
  width: 100%;
  animation: logo-in .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes logo-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.hero__tagline { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: rgba(255,255,255,.8); max-width: 34em; margin-bottom: 32px; }
.hero__meta { font-size: .9rem; color: rgba(255,255,255,.55); margin: 12px 0 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* stav serveru */
.status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  font-size: .92rem; font-weight: 600;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
}
.status__dot { width: 10px; height: 10px; border-radius: 2px; background: #8a9bbd; }
.status[data-state="online"] .status__dot { background: #3ee07d; box-shadow: 0 0 0 0 rgba(62,224,125,.6); animation: pulse 2s infinite; }
.status[data-state="offline"] .status__dot { background: #ff5d6c; }
.status strong { color: var(--sky-300); }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(62,224,125,0); } 100% { box-shadow: 0 0 0 0 rgba(62,224,125,0); } }

/* velké IP tlačítko */
.ip-big {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  width: min(560px, 100%);
  padding: 12px 12px 12px 22px;
  font-family: var(--font); color: #fff; text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border: 2px solid rgba(122,216,255,.35);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 0 0 6px rgba(60,196,255,.06), 0 20px 50px rgba(0,0,0,.35);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ip-big:hover { border-color: var(--sky-400); transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(60,196,255,.14), 0 24px 60px rgba(0,0,0,.4); }
.ip-big__label { font: .72rem var(--pixel); text-transform: uppercase; color: var(--sky-300); }
.ip-big__ip { font: 1.35rem var(--pixel); letter-spacing: .02em; overflow-wrap: anywhere; }
.ip-big__action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .7em 1.1em;
  font-weight: 700; font-size: .95rem;
  background: linear-gradient(180deg, var(--blue-500), var(--blue-700));
  border-radius: 8px;
  box-shadow: 0 3px 0 #0838a0;
}
.ip-big__action svg { width: 18px; height: 18px; }
.ip-big.is-copied { border-color: #3ee07d; }
@media (max-width: 560px) {
  .ip-big { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 12px 12px 16px; }
  .ip-big__label { grid-column: 1; }
  .ip-big__ip { grid-column: 1; grid-row: 2; font-size: clamp(.8rem, 3.9vw, 1.05rem); letter-spacing: 0; }
  .ip-big__action { grid-column: 2; grid-row: 1 / 3; }
}

/* schodovitý pixelový přechod do obsahu */
.pixel-edge {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23f3f7fe' d='M0 12h16V4h16v8h16v4h16V4h16v8h16v12H0z'/%3E%3C/svg%3E") repeat-x bottom / 96px 24px;
}

/* hlavička podstránek */
.page-hero { margin-top: calc(var(--nav-h) * -1); padding: calc(var(--nav-h) + 64px) 0 88px; text-align: center; }
.page-hero .eyebrow { color: var(--sky-300); }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; }
.page-hero h1 { background: linear-gradient(180deg, #fff 30%, var(--sky-300)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero p { color: rgba(255,255,255,.75); max-width: 36em; margin-inline: auto; }

/* ---------- sekce ---------- */
.section { padding: 88px 0; }
.section--tint { background: linear-gradient(180deg, var(--sky-100), var(--bg)); }
.section__head { text-align: center; margin-bottom: 44px; }
.section__head--row { display: flex; align-items: end; justify-content: space-between; text-align: left; gap: 16px; flex-wrap: wrap; }
.section__head h2 { margin: 0; }
.link-arrow { font-weight: 700; }
.link-arrow::after { content: ' →'; transition: margin .15s; }
.link-arrow:hover::after { margin-left: 4px; }

/* výhody */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.feature {
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #b9d4ff; }
.feature__icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  margin-bottom: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--sky-400), var(--blue-700));
  border-radius: 10px;
  box-shadow: inset -3px -3px 0 rgba(8,56,160,.4), inset 3px 3px 0 rgba(255,255,255,.3);
}
.feature__icon svg { width: 26px; height: 26px; }
.feature p { color: var(--muted); margin: 0; }

/* novinky */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.news-grid--page { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
@media (max-width: 400px) { .news-grid, .news-grid--page { grid-template-columns: 1fr; } }
.news-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.news-card { position: relative; }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #b9d4ff; }
.news-card__link { position: absolute; inset: 0; z-index: 2; }
.news-card__link:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; border-radius: var(--radius); }
.news-card:hover h3 { color: var(--blue-600); }
.news-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--navy-800);
}
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.news-card:hover .news-card__media img { transform: scale(1.05); }
.news-card__media::after { /* jemný přechod do spodní hrany fotky */
  content: ''; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(transparent, rgba(4,12,34,.35));
  pointer-events: none;
}
.news-card__placeholder {
  width: 100%; height: 100%;
  background:
    linear-gradient(rgba(122,216,255,.1) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(122,216,255,.1) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(135deg, var(--blue-600), var(--navy-900));
}
.news-card__media .tag { position: absolute; left: 14px; top: 14px; z-index: 1; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.news-card__body { flex: 1; padding: 20px 24px 24px; border-top: 3px solid var(--blue-500); }
.news-card__body time { display: block; margin-bottom: 6px; font-size: .86rem; color: var(--muted); }
.news-card__body h3 { margin-bottom: 8px; }
.news-card__body p { color: var(--muted); margin: 0; }
.tag {
  display: inline-block;
  padding: 3px 10px;
  font: .7rem var(--pixel); text-transform: uppercase;
  color: var(--blue-700); background: #fff;
  border-radius: 4px;
}
.tag--update { color: #fff; background: var(--blue-600); }
.tag--event  { color: var(--navy-900); background: var(--sky-300); }

/* CTA bloky */
.cta-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
@media (max-width: 860px) { .cta-grid { grid-template-columns: 1fr; } }
.cta {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 20px;
  padding: 40px;
  border-radius: var(--radius);
}
.cta p { margin: 0; }
.cta--discord {
  position: relative; overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-600), var(--navy-800));
  box-shadow: var(--shadow-lg);
}
.cta--discord::after {
  content: ''; position: absolute; right: -40px; bottom: -40px; width: 200px; height: 200px;
  background:
    linear-gradient(var(--sky-400) 0 0) 0 0 / 40px 40px no-repeat,
    linear-gradient(rgba(255,255,255,.8) 0 0) 80px 40px / 40px 40px no-repeat,
    linear-gradient(var(--sky-300) 0 0) 40px 120px / 40px 40px no-repeat;
  opacity: .25;
}
.cta--discord p { color: rgba(255,255,255,.8); }
.cta__count { margin-top: 12px !important; font-weight: 700; color: var(--sky-300) !important; }
.cta--vote { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.cta--vote p { color: var(--muted); }

/* ---------- detail novinky ---------- */
.article__hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: min(62vh, 560px);
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(var(--nav-h) + 40px) 0 72px;
  color: #fff;
  background: var(--navy-900);
}
.article__hero--plain { min-height: 0; background: linear-gradient(180deg, var(--navy-950), var(--navy-800)); }
.article__hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.article__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,12,34,.55) 0%, rgba(4,12,34,.2) 40%, rgba(4,12,34,.92) 100%); }
.article__back { display: inline-block; margin-bottom: 18px; font-weight: 600; color: rgba(255,255,255,.8); }
.article__back:hover { color: #fff; }
.article__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; font-size: .95rem; color: rgba(255,255,255,.8); }
.article__author { display: inline-flex; align-items: center; gap: 8px; }
.article__author img { border-radius: 4px; image-rendering: pixelated; }
.article__head h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; text-shadow: 0 4px 30px rgba(0,0,0,.4); margin: 0; }
.article__body { padding: 56px 0 80px; font-size: 1.12rem; line-height: 1.8; }
.article__body p { margin: 0 0 1.2em; }

/* formátovaný text novinky (web i editor) */
.article-content > :first-child { margin-top: 0; }
.article-content p { margin: 0 0 1.1em; }
.article-content h2 { font-size: 1.6em; font-weight: 800; line-height: 1.25; margin: 1.4em 0 .5em; color: var(--text); }
.article-content h3 { font-size: 1.25em; font-weight: 700; line-height: 1.3; margin: 1.2em 0 .4em; color: var(--blue-700); }
.article-content ul, .article-content ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.article-content li { margin: .25em 0; }
.article-content ul li::marker { color: var(--blue-500); }
.article-content ol li::marker { color: var(--blue-600); font-weight: 700; }
.article-content blockquote { margin: 1.2em 0; padding: .8em 1.2em; color: var(--text); background: var(--sky-100); border-left: 4px solid var(--blue-500); border-radius: 0 10px 10px 0; }
.article-content blockquote p:last-child { margin: 0; }
.article-content a { color: var(--blue-600); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(30,136,255,.35); }
.article-content a:hover { text-decoration-color: var(--blue-500); }
.article-content strong { font-weight: 700; color: var(--text); }

/* ---------- pravidla ---------- */
.rules { display: grid; gap: 14px; }
.rules__group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.rules__group summary {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.12rem;
}
.rules__group summary::-webkit-details-marker { display: none; }
.rules__group summary::after {
  content: ''; width: 10px; height: 10px; margin-left: 8px;
  border-right: 3px solid var(--blue-600); border-bottom: 3px solid var(--blue-600);
  transform: rotate(45deg); transition: transform .2s;
}
.rules__group[open] summary::after { transform: rotate(-135deg); }
.rules__group[open] summary { border-bottom: 1px solid var(--border); }
.rules__num {
  display: grid; place-items: center; width: 40px; height: 40px;
  font: .9rem var(--pixel); color: #fff;
  background: linear-gradient(135deg, var(--sky-400), var(--blue-700));
  border-radius: 8px;
}
.rules__title { flex: 1; }
.rules__count { font-size: .85rem; font-weight: 500; color: var(--muted); }
.rules ol { list-style: none; margin: 0; padding: 10px 24px 20px; }
.rules li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--border); }
.rules li:last-child { border-bottom: 0; }
.rules__id { flex: none; min-width: 34px; font: .8rem/1.9 var(--pixel); color: var(--blue-600); }

/* ---------- A-Team ---------- */
.team-rank + .team-rank { margin-top: 56px; }
.team-rank__title {
  display: flex; align-items: center; gap: 14px;
  font: 1.1rem var(--pixel); text-transform: uppercase;
  margin-bottom: 22px;
}
.team-rank__title::after { content: ''; flex: 1; height: 2px; background: var(--border); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.member {
  --rank: var(--blue-600);
  padding: 26px 18px 22px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--rank);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
}
.member:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.member__head {
  width: 88px; height: 88px; margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--sky-100);
  border-radius: 12px;
}
.member__head img { image-rendering: pixelated; border-radius: 4px; }
.member h3 { margin: 0 0 6px; font-size: 1.1rem; word-break: break-word; }
.member__role {
  display: inline-block; padding: 3px 10px;
  font: .7rem var(--pixel); text-transform: uppercase;
  color: #fff; background: var(--rank); border-radius: 4px;
}
.rank--majitel { --rank: #0a2a78; color: #0a2a78; }
.rank--vedeni  { --rank: #0d3aa8; color: #0d3aa8; }
.rank--admin   { --rank: var(--blue-700); color: var(--blue-700); }
.rank--builder { --rank: #1398d8; color: #1398d8; }
.rank--helper  { --rank: #3cb4e8; color: #1f93c9; }
.member h3 { color: var(--text); }

/* ---------- obchod ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 34px 28px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.plan--featured {
  color: #fff;
  background: linear-gradient(160deg, var(--blue-600), var(--navy-800));
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: scale(1.03);
}
.plan__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 4px 14px;
  font: .72rem var(--pixel); text-transform: uppercase; white-space: nowrap;
  color: var(--navy-900); background: var(--sky-300);
  border-radius: 4px;
}
.plan__name { font: 1.5rem var(--pixel); margin-bottom: 12px; color: var(--blue-600); }
.plan--featured .plan__name { color: var(--sky-300); }
.plan__price { margin-bottom: 22px; color: var(--muted); }
.plan__price strong { font-size: 2.6rem; font-weight: 800; color: var(--text); }
.plan--featured .plan__price, .plan--featured .plan__price strong { color: #fff; }
.plan__price span { font-size: .9rem; }
.plan__perks { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.plan__perks li { position: relative; padding: 8px 0 8px 28px; border-bottom: 1px solid var(--border); }
.plan--featured .plan__perks li { border-color: rgba(255,255,255,.14); }
.plan__perks li::before {
  content: ''; position: absolute; left: 0; top: 14px; width: 12px; height: 12px;
  background: var(--sky-400); box-shadow: inset -2px -2px 0 rgba(8,56,160,.35);
}
.plan--featured .btn--primary { background: #fff; color: var(--blue-700); box-shadow: 0 4px 0 #b9d4ff; }
.note { text-align: center; color: var(--muted); margin-top: 36px; }

/* barvy balíčků: --c text na bílé, --c-strong pozadí, --c-light text na tmavé */
.color--blue   { --c: #1466f0; --c-strong: #1466f0; --c-light: #7ad8ff; --c-glow: rgba(20,102,240,.28); }
.color--green  { --c: #15a34a; --c-strong: #15803d; --c-light: #86efac; --c-glow: rgba(21,163,74,.28); }
.color--purple { --c: #9333ea; --c-strong: #7e22ce; --c-light: #d8b4fe; --c-glow: rgba(147,51,234,.3); }
.color--orange { --c: #ea6c0c; --c-strong: #c2410c; --c-light: #fdba74; --c-glow: rgba(234,108,12,.3); }
.color--red    { --c: #dc2626; --c-strong: #b91c1c; --c-light: #fca5a5; --c-glow: rgba(220,38,38,.28); }
.color--gold   { --c: #c28a04; --c-strong: #a16207; --c-light: #fde047; --c-glow: rgba(202,138,4,.3); }
.plan { border-top: 4px solid var(--c); }
.plan .plan__name { color: var(--c); }
.plan .plan__perks li::before { background: var(--c); box-shadow: inset -2px -2px 0 rgba(0,0,0,.2); }
.plan .btn--outline { color: var(--c); }
.plan .btn--outline:hover { box-shadow: inset 0 0 0 2px var(--c); }
.plan--featured { background: linear-gradient(160deg, var(--c-strong), var(--navy-800) 85%); border-top-color: var(--c-light); box-shadow: 0 20px 50px var(--c-glow); }
.plan--featured .plan__name { color: var(--c-light); }
.plan .plan__badge { color: #fff; background: var(--c); box-shadow: 0 4px 14px var(--c-glow); }
.plan--featured .plan__badge { color: var(--navy-900); background: var(--c-light); }
.plan--featured .plan__perks li::before { background: var(--c-light); }
.plan--featured .btn--primary { color: var(--c-strong); }

/* ---------- hlasování ---------- */
.vote-list { display: grid; gap: 14px; }
.vote {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.vote:hover { transform: translateX(4px); border-color: var(--blue-500); box-shadow: var(--shadow-lg); }
.vote__num {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px;
  font: 1.1rem var(--pixel); color: #fff;
  background: linear-gradient(135deg, var(--sky-400), var(--blue-700));
  border-radius: 8px;
}
.vote__body { flex: 1; display: flex; flex-direction: column; }
.vote__body strong { font-size: 1.15rem; }
.vote__body small { color: var(--muted); font-size: .9rem; }
.vote__go { font-weight: 700; color: var(--blue-600); white-space: nowrap; }
@media (max-width: 520px) { .vote__go { display: none; } }
.vote-tip {
  margin-top: 26px; padding: 18px 22px;
  background: var(--sky-100);
  border-left: 4px solid var(--blue-500);
  border-radius: var(--radius-sm);
}

/* ---------- patička ---------- */
.footer { color: rgba(255,255,255,.7); background: var(--navy-950); padding: 64px 0 0; }
.footer__inner { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-bottom: 44px; }
.footer__brand { max-width: 340px; }
.footer__brand img { width: 170px; margin: -10px 0 8px -8px; }
.footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer h4 { font: .8rem var(--pixel); text-transform: uppercase; color: var(--sky-300); margin-bottom: 14px; }
.footer__cols a { display: block; color: rgba(255,255,255,.7); padding: 4px 0; }
.footer__cols a:hover { color: #fff; }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 20px 0; font-size: .85rem; color: rgba(255,255,255,.45);
  border-top: 1px solid rgba(255,255,255,.08);
}
.ip-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  font-family: var(--font); color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(122,216,255,.25);
  border-radius: 8px; cursor: pointer;
}
.ip-chip:hover { border-color: var(--sky-400); }
.ip-chip__ip { font: .85rem var(--pixel); }
.ip-chip__hint { font-size: .78rem; color: var(--sky-300); }

/* ---------- přihlášení ---------- */
.auth {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  min-height: 100vh;
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(var(--nav-h) + 48px) 16px 72px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30,136,255,.35), transparent 70%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
}
.auth__card {
  width: min(440px, 100%);
  padding: 40px 36px 30px;
  text-align: center;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(122,216,255,.2), 0 30px 80px rgba(0,0,0,.45), 0 0 80px rgba(30,136,255,.25);
}
.auth__avatar {
  width: 96px; height: 96px; margin: -88px auto 18px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--sky-400), var(--blue-700));
  border: 4px solid #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(20,102,240,.45);
}
.auth__avatar img { width: 72px; height: 72px; image-rendering: pixelated; border-radius: 4px; }
.auth h1 { font-size: 1.9rem; font-weight: 800; margin-bottom: 4px; }
.auth__lead { color: var(--muted); margin-bottom: 24px; }
.auth__form { display: grid; gap: 16px; text-align: left; }
.field { display: grid; gap: 6px; }
.field__label { font-weight: 700; font-size: .92rem; }
.field input {
  width: 100%;
  padding: 13px 14px;
  font: 500 1rem var(--font); color: var(--text);
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus { outline: 0; background: #fff; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(30,136,255,.15); }
.field__pw { position: relative; display: block; }
.field__pw input { padding-right: 50px; }
.field__eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  color: var(--muted); background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.field__eye:hover, .field__eye[aria-pressed="true"] { color: var(--blue-600); background: var(--sky-100); }
.field__eye svg { width: 20px; height: 20px; }
.check { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--blue-600); }
.alert { padding: 12px 14px; margin-bottom: 18px; border-radius: 10px; font-weight: 600; font-size: .95rem; text-align: left; }
.alert--error { color: #a3162a; background: #ffeef0; border: 1px solid #ffc9d0; }
.auth__help { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); text-align: left; }
.auth__help details { padding: 4px 0; }
.auth__help summary { cursor: pointer; font-weight: 700; color: var(--blue-600); padding: 6px 0; }
.auth__help p { margin: 8px 0; font-size: .93rem; color: var(--muted); }
.auth__help code {
  display: block; padding: 10px 12px;
  font: .8rem var(--pixel); color: #fff;
  background: var(--navy-900); border-radius: 8px;
}
.ip-inline { padding: 1px 6px; font: .75rem var(--pixel); color: var(--blue-700); background: var(--sky-100); border: 0; border-radius: 4px; cursor: pointer; }
@media (max-width: 480px) { .auth__card { padding: 36px 22px 24px; } }

.admin-soon {
  padding: 40px; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.admin-soon .rank-chip { display: inline-block; margin-bottom: 14px; }
.admin-soon p { color: var(--muted); margin: 0; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 100;
  padding: 12px 20px;
  font-weight: 600; color: #fff;
  background: var(--navy-900);
  border: 1px solid var(--sky-400);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: transform .2s, opacity .2s;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .hero { padding-bottom: 96px; }
  .cta { padding: 28px 24px; }
  .plan--featured { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- denní odměny ---------- */
.alert--ok { color: #0d6b36; background: #e8f9ef; border: 1px solid #b6ebc9; }
.daily-flash { max-width: 760px; margin: 0 auto 22px; text-align: center; }
.daily-status {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  max-width: 760px; margin: 0 auto 22px; padding: 22px 26px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-950));
  border: 1px solid rgba(122,216,255,.2); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.daily-status__streak { display: grid; justify-items: center; flex: none; min-width: 88px; font-size: .85rem; color: var(--sky-300); }
.daily-status__num { font: 2.6rem/1 var(--pixel); color: #fff; text-shadow: 0 0 18px rgba(60,196,255,.6); }
.daily-status__text { flex: 1; min-width: 220px; display: grid; gap: 4px; }
.daily-status__text strong { font-size: 1.15rem; }
.daily-status__text span { color: #b8c8e8; font-size: .95rem; }
.daily-status form { margin: 0; }
.daily-status__btn { animation: daily-pulse 2s ease-in-out infinite; }
@keyframes daily-pulse { 50% { box-shadow: 0 4px 0 #0838a0, 0 0 0 8px rgba(60,196,255,.18), 0 10px 24px rgba(20,102,240,.45); } }
@media (prefers-reduced-motion: reduce) { .daily-status__btn { animation: none; } }

.daily-pending {
  max-width: 760px; margin: 0 auto 22px; padding: 14px 18px;
  color: #7a4b00; background: #fff6e0; border: 1px solid #ffe0a3; border-radius: var(--radius-sm);
}

.daily-track {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px;
}
.daily-day {
  position: relative;
  display: grid; justify-items: center; align-content: start; gap: 10px;
  padding: 18px 10px 16px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.daily-day__num { font: .72rem var(--pixel); text-transform: uppercase; color: var(--muted); }
.daily-day__icon { display: grid; place-items: center; width: 52px; height: 52px; color: var(--blue-600); background: var(--sky-100); border-radius: 12px; }
.daily-day__icon svg { width: 28px; height: 28px; }
.daily-day__label { font-weight: 700; font-size: .92rem; line-height: 1.3; }
.daily-day.is-done { background: #f2fbf5; border-color: #bfe8cf; }
.daily-day.is-done .daily-day__icon { color: #fff; background: #12a150; }
.daily-day.is-done .daily-day__num { color: #12a150; }
.daily-day.is-today { border: 2px solid var(--blue-500); box-shadow: 0 0 0 4px rgba(30,136,255,.15), var(--shadow-lg); transform: translateY(-4px); }
.daily-day.is-today .daily-day__icon { color: #fff; background: linear-gradient(135deg, var(--sky-400), var(--blue-700)); }
.daily-day.is-today::before {
  content: 'Dnes'; position: absolute; top: -11px;
  padding: 2px 8px; font: .6rem var(--pixel); text-transform: uppercase; color: #fff;
  background: var(--blue-600); border-radius: 4px;
}
.daily-day.is-big:not(.is-done) .daily-day__icon { color: #7a4b00; background: linear-gradient(135deg, #ffe27a, #ffb200); box-shadow: 0 0 18px rgba(255,178,0,.45); }
@media (max-width: 900px) {
  .daily-track { grid-template-columns: repeat(4, 1fr); }
  .daily-day.is-big { grid-column: span 4; }
}
@media (max-width: 520px) {
  .daily-track { grid-template-columns: repeat(2, 1fr); }
  .daily-day.is-big { grid-column: span 2; }
  .daily-status { padding: 20px; gap: 16px; }
}

.daily-bonus { max-width: 760px; margin: 44px auto 0; text-align: center; }
.daily-bonus h2 { margin: 0 0 6px; }
.daily-bonus p { margin: 0 0 18px; color: var(--muted); }
.daily-bonus ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; text-align: left; }
.daily-bonus li {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.daily-bonus li span:nth-child(2) { flex: 1; font-weight: 600; }
.daily-bonus li small { font-weight: 700; color: var(--blue-600); }
.daily-bonus li.is-mine { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(30,136,255,.12); }