/* ============================================================
   ERTENIX.NET — base.css
   Sdílené tokeny + nav + footer + komponenty
   Ručně upečeno. Žádný šablony.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- TOKENY ---------- */
:root {
  --paper:   #f5eedd;
  --paper2:  #ece2cb;
  --card:    #fffcf3;
  --ink:     #2e2418;
  --ink2:    #6f5f4b;
  --ink3:    #a4937c;

  --ember:   #d95d2c;
  --ember2:  #b8481f;
  --grass:   #5f8f3a;
  --gold:    #cf9b36;
  --blood:   #a83232;

  --shadow:  #2e2418;
  --white:   #fffcf3;

  --t-ember: color-mix(in srgb, var(--ember) 16%, var(--card));
  --t-grass: color-mix(in srgb, var(--grass) 18%, var(--card));
  --t-gold:  color-mix(in srgb, var(--gold) 20%, var(--card));
  --t-blood: color-mix(in srgb, var(--blood) 16%, var(--card));

  --f-head: 'Lilita One', 'Rubik', sans-serif;
  --f-body: 'Rubik', system-ui, sans-serif;

  --r: 12px;
  --r-lg: 18px;
  --bw: 2px;
  --tr: .18s cubic-bezier(.3,.7,.4,1);
}

[data-theme="dark"] {
  --paper:   #221a11;
  --paper2:  #1a140c;
  --card:    #2d2416;
  --ink:     #f2e8d3;
  --ink2:    #bfae92;
  --ink3:    #8a7a61;

  --ember:   #e8743f;
  --ember2:  #f28a55;
  --grass:   #84b256;
  --gold:    #e0ad52;
  --blood:   #d05757;

  --shadow:  #120d06;
  --white:   #fff8ea;
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ember); color: var(--white); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* pixel-art rendering pro MC hlavy */
.pxart { image-rendering: pixelated; }

/* ---------- PIXEL DIVIDER ----------
   div s barvou NÁSLEDUJÍCÍ sekce, maska = zubatý terén */
.pxdiv {
  height: 14px;
  margin-bottom: -1px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14'%3E%3Cpath d='M0 14L0 6L7 6L7 10L14 10L14 2L21 2L21 8L28 8L28 0L35 0L35 8L42 8L42 4L49 4L49 10L56 10L56 14Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14'%3E%3Cpath d='M0 14L0 6L7 6L7 10L14 10L14 2L21 2L21 8L28 8L28 0L35 0L35 8L42 8L42 4L49 4L49 10L56 10L56 14Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 56px 14px; mask-size: 56px 14px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}

/* ---------- NAVBAR ---------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--paper);
  border-bottom: var(--bw) solid var(--ink);
  transition: box-shadow var(--tr);
}
.navbar.scrolled { box-shadow: 0 4px 0 color-mix(in srgb, var(--ink) 12%, transparent); }

.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  height: 68px;
  display: flex; align-items: center; gap: 26px;
}

.nav-logo {
  font-family: var(--f-head);
  font-size: 1.45rem;
  letter-spacing: .5px;
  display: flex; align-items: center; gap: 2px;
  flex-shrink: 0;
  transition: transform var(--tr);
}
.nav-logo:hover { transform: rotate(-2deg) scale(1.04); }
.logo-bracket { color: var(--ember); }
.logo-mark { width: 33px; height: 26px; flex-shrink: 0; margin-right: 8px; }

.nav-links {
  display: flex; align-items: center; gap: 4px;
  list-style: none;
  margin-left: auto;
}
.nav-link {
  display: block;
  padding: 7px 13px;
  font-weight: 500;
  border-radius: 9px;
  border: var(--bw) solid transparent;
  transition: all var(--tr);
}
.nav-link:hover { background: var(--paper2); }
.nav-link.active {
  background: var(--card);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--shadow);
}

.nav-shop-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  font-weight: 700;
  background: var(--gold);
  color: #2e2418;
  border: var(--bw) solid var(--ink);
  border-radius: 9px;
  box-shadow: 3px 3px 0 var(--shadow);
  transition: all var(--tr);
}
.nav-shop-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--shadow); }
.nav-shop-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--shadow); }

.nav-tools { display: flex; align-items: center; gap: 12px; }

.lang-switcher {
  display: flex; align-items: center;
  border: var(--bw) solid var(--ink);
  border-radius: 9px;
  overflow: hidden;
  background: var(--card);
}
.lang-btn {
  padding: 5px 9px;
  font-size: .78rem; font-weight: 700;
  color: var(--ink2);
  transition: all var(--tr);
}
.lang-btn + .lang-btn { border-left: var(--bw) solid var(--ink); }
.lang-btn.active { background: var(--ink); color: var(--paper); }

.theme-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: var(--bw) solid var(--ink);
  border-radius: 9px;
  background: var(--card);
  box-shadow: 2px 2px 0 var(--shadow);
  transition: all var(--tr);
}
.theme-btn:hover { transform: rotate(8deg); }
.theme-btn:active { transform: translate(1px,1px); box-shadow: 0 0 0 var(--shadow); }
.theme-btn svg { width: 17px; height: 17px; }
.theme-btn .ic-moon { display: none; }
[data-theme="dark"] .theme-btn .ic-sun { display: none; }
[data-theme="dark"] .theme-btn .ic-moon { display: block; }

.hamburger {
  display: none;
  flex-direction: column; gap: 4px;
  padding: 8px;
}
.hamburger span {
  width: 22px; height: 3px;
  background: var(--ink);
  border-radius: 2px;
  transition: all var(--tr);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column; gap: 6px;
  padding: 14px 24px 20px;
  border-top: var(--bw) solid var(--ink);
  background: var(--paper);
}
.mobile-menu.open { display: flex; }
.mob-link {
  padding: 11px 14px;
  font-weight: 600;
  border-radius: 9px;
  border: var(--bw) solid transparent;
}
.mob-link:hover { border-color: var(--ink); background: var(--card); }
.mob-tools { display: flex; gap: 12px; margin-top: 8px; }

/* ---------- TLAČÍTKA ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px;
  font-weight: 700; font-size: 1rem;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: 4px 4px 0 var(--shadow);
  transition: all var(--tr);
  white-space: nowrap;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--shadow); }
.btn:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--shadow); }
.btn svg { width: 18px; height: 18px; }

.btn--ember { background: var(--ember); color: #fff; }
.btn--ghost { background: var(--card); color: var(--ink); }
.btn--gold  { background: var(--gold); color: #2e2418; }
.btn--ink   { background: var(--ink); color: var(--paper); }
.btn--big   { padding: 16px 30px; font-size: 1.1rem; }

.btn[disabled] {
  opacity: .55; cursor: not-allowed;
  transform: none !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}

/* ---------- CHIPY ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .3px;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  white-space: nowrap;
}
.chip--ember { background: var(--t-ember); }
.chip--grass { background: var(--t-grass); }
.chip--gold  { background: var(--t-gold); }
.chip--blood { background: var(--t-blood); }

/* ---------- KARTY ---------- */
.card {
  background: var(--card);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 5px 5px 0 var(--shadow);
  transition: transform var(--tr), box-shadow var(--tr);
}
.card:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 var(--shadow); }
.tilt-l { transform: rotate(-1deg); }
.tilt-r { transform: rotate(.8deg); }
.tilt-l:hover, .tilt-r:hover { transform: rotate(0) translate(-3px,-3px); }

/* ---------- SEKCE ---------- */
.section { padding: 88px 0; }
.section--alt { background: var(--paper2); }
.section--ink { background: var(--ink); color: var(--paper); }

.sec-head { text-align: center; margin-bottom: 52px; }
.sec-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 14px;
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 3px 3px 0 var(--shadow);
  margin-bottom: 18px;
  transform: rotate(-1.2deg);
}
.sec-title {
  font-family: var(--f-head);
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 1.15;
}
.sec-title .hl { color: var(--ember); }
.sec-sub { color: var(--ink2); margin-top: 12px; max-width: 560px; margin-inline: auto; }

/* ---------- IP PLATE ---------- */
.ipplate {
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 0;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: 4px 4px 0 var(--shadow);
  overflow: hidden;
}
.ipplate-label {
  padding: 12px 14px;
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  background: var(--paper2);
  border-right: var(--bw) solid var(--ink);
  color: var(--ink2);
}
.ipplate-value {
  padding: 12px 18px;
  font-family: var(--f-head);
  font-size: 1.25rem;
  letter-spacing: 1px;
}
.ipplate-btn {
  padding: 12px 16px;
  border-left: var(--bw) solid var(--ink);
  background: var(--ember);
  color: #fff;
  display: grid; place-items: center;
  transition: background var(--tr);
}
.ipplate-btn:hover { background: var(--ember2); }
.ipplate-btn svg { width: 18px; height: 18px; }

/* ---------- TOAST ---------- */
.toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(90px);
  z-index: 200;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  font-weight: 700;
  background: var(--grass); color: #fff;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: 4px 4px 0 var(--shadow);
  transition: transform .3s cubic-bezier(.2,.9,.3,1.2);
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- STATUS CHIP ---------- */
.status-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px;
  font-size: .88rem; font-weight: 700;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 3px 3px 0 var(--shadow);
}
.status-dot {
  width: 10px; height: 10px;
  border-radius: 2px; /* hranatá tečka. minecraft. */
  background: var(--ink3);
  flex-shrink: 0;
}
.status-chip.is-on .status-dot {
  background: var(--grass);
  animation: blink 1.6s ease-in-out infinite;
}
.status-chip.is-off .status-dot { background: var(--blood); }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: 46px 0 30px;
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 28px;
  align-items: flex-start; justify-content: space-between;
}
.footer-logo { font-family: var(--f-head); font-size: 1.5rem; display: flex; align-items: center; gap: 2px; }
.footer-logo .logo-mark { width: 29px; height: 23px; }
.footer-logo .logo-bracket { color: var(--ember); }
.logo-mark { width: 33px; height: 26px; flex-shrink: 0; margin-right: 8px; }
.footer-tag { color: color-mix(in srgb, var(--paper) 55%, transparent); font-size: .88rem; margin-top: 6px; max-width: 300px; }
.footer-nav { display: flex; flex-direction: column; gap: 8px; font-size: .95rem; }
.footer-nav a { opacity: .75; transition: opacity var(--tr); }
.footer-nav a:hover { opacity: 1; }
.footer-col-title {
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  opacity: .5; margin-bottom: 4px;
}
.footer-bottom {
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between;
  font-size: .82rem;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

/* ---------- REVEAL ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .nav-links, .navbar .nav-tools, .navbar .nav-shop-btn { display: none; }
  .hamburger { display: flex; margin-left: auto; }
  .section { padding: 64px 0; }
}