/* ======================================================
   📱 Liběchov – QR hra (mobilní verze)
   Kompletní a funkční style.css (verze bez scrollování)
   ====================================================== */

/* 🚫 Zákaz označování textu */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
}

/* 🔧 Reset & layout – žádný scroll */
html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 🚫 zákaz scrollování */
  font-family: 'Poppins', 'Uncial Antiqua', serif;
  color: #2a1a08;
  background-color: #f5e9c8;
  touch-action: none;
}

/* Fix pro mobily s dynamickou výškou adresního řádku */
@supports (height: 100dvh) {
  html, body {
    height: 100dvh;
  }
}

body.hero-active {
  overflow: hidden;
}

/* 🌄 Globální pozadí */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/background_mobile.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Tělo musí být průhledné */
body {
  position: relative;
  background: transparent !important;
  z-index: 1;
  opacity: 0;
  animation: fadeInPage 1.2s ease forwards;
  animation-delay: 0.4s;
}

/* =======================================
   🌍 Horní lišta (jazyk + uživatel)
   ======================================= */
.top-bar {
  position: fixed;
  top: 0.6rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.6rem;
  z-index: 100;
}

/* 🇨🇿 Přepínač jazyků */
.language-switch {
  display: flex;
  gap: 0.3rem;
  background: rgba(250, 240, 210, 0.85);
  border: 2px solid #b79555;
  border-radius: 10px;
  padding: 0.3rem 0.4rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* ======================
   🏳️ Offline vlajky
   ====================== */

.language-switch .fi {
  width: 24px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 4px;
}

/* Hover efekt (zachováno z tvého původního stylu) */
.language-switch .fi:hover {
  transform: scale(1.15);
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

/* 🎌 Odkazy na lokální vlajky */
.language-switch .fi-cz { background-image: url('/images/flags/cz.svg'); }
.language-switch .fi-gb { background-image: url('/images/flags/gb.svg'); }
.language-switch .fi-de { background-image: url('/images/flags/de.svg'); }


/* 👤 Uživatel */
.user-info {
  position: relative;
  background: rgba(250, 240, 210, 0.85);
  border: 2px solid #b79555;
  border-radius: 10px;
  padding: 0.3rem 0.6rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  font-weight: 600;
  color: #3c220a;
  cursor: pointer;
}
.user-info:hover {
  background: rgba(250, 240, 210, 0.95);
}

#connection-status {
  margin-left: 6px;
  transition: transform 0.3s ease;
  display: inline-block;
}
#connection-status:hover {
  transform: scale(1.2);
}

/* 🔽 Menu */
.user-menu {
  position: absolute;
  right: 0;
  top: 120%;
  background: rgba(250, 240, 210, 0.95);
  border: 2px solid #b79555;
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  z-index: 200;
}
.user-menu button {
  background: none;
  border: none;
  color: #3c220a;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0;
}
.user-menu button:hover {
  color: #8b5a1e;
  text-decoration: underline;
}

/* 🌄 Aktualizační sekce – průhledná vrstva nad pozadím */
#update-section {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  /* 🔮 Průhledný závoj přes hero pozadí */
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);

  color: #f7e3a1;
  text-align: center;
  font-family: 'Uncial Antiqua', 'Poppins', serif;
  transition: opacity 0.6s ease;
}

#update-section.hidden {
  display: none;
}

/* 🕯️ Texty */
.update-content h2 {
  font-size: 1.7rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 12px rgba(247, 227, 161, 0.4);
}

.update-content p {
  font-size: 1.1rem;
  color: #e8d7a6;
  margin-bottom: 2rem;
  opacity: 0.9;
}

/* 🌀 Obal spinneru i textu */
.loading-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✨ Velký spinner – rotující kruh */
.loading-spinner {
  width: 90px;
  height: 90px;
  border: 5px solid rgba(255, 255, 255, 0.15);
  border-top: 5px solid #f7e3a1;
  border-radius: 50%;
  animation: slowSpin 3.5s linear infinite;
  box-shadow: 0 0 15px rgba(247, 227, 161, 0.3);
}

/* 💫 Procentuální text – statický uprostřed */
.progress-text {
  position: absolute;
  font-size: 1.3rem;
  font-weight: bold;
  color: #f7e3a1;
  text-shadow: 0 0 8px rgba(0,0,0,0.7);
  pointer-events: none;
  animation: pulse 2s ease-in-out infinite;
}

/* 🌙 Pomalu se točící animace */
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 🌟 Jemné pulzování procent */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.1); }
}

/* ✨ Jemné přechody sekcí */
.fade-in {
  animation: fadeIn 0.8s ease forwards;
}
.fade-out {
  animation: fadeOut 0.8s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.98); }
}

/* ✨ Efekt rozsvícení při dokončení */
.loading-spinner.finish-glow {
  border-top-color: #ffd66b !important;
  box-shadow: 0 0 25px rgba(255, 214, 107, 0.9) !important;
  transform: scale(1.2);
  opacity: 1;
  transition: all 0.8s ease;
}


/* ================================
   🎮 MENU SEKCE – sjednocená s login stylem
   ================================ */

#menu-section {
  position: relative;
  z-index: 5;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  background: transparent; /* žádné pozadí */
  padding-top: 10vh; /* posune nadpis výš */
  animation: fadeIn 1s ease forwards;
}

.menu-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}


.menu-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  max-width: 420px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
}

.menu-logo {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.menu-title {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Uncial Antiqua', cursive;
  font-size: clamp(1.4rem, 5vw, 2rem);
  color: #f7e3a1;
  text-shadow:
    3px 3px 6px rgba(0,0,0,0.8),
    -1px -1px 2px rgba(0,0,0,0.5);
  text-align: center;
  width: 80%;
  line-height: 1.2;
  pointer-events: none;
}


/* Kontejner pro tlačítka */
.menu-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 90%;
  max-width: 300px;
}

/* 🔘 Tlačítka – přesně stejný vzhled jako login */
.menu-buttons .primary-btn {
  background: linear-gradient(180deg, #b16b27 0%, #9a531d 60%, #703714 100%);
  color: #f9e6b5;
  border: 3px solid #3e290d;
  font-family: 'Uncial Antiqua', cursive;
  font-size: 1.1rem;
  border-radius: 14px;
  padding: 0.9rem 1.8rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 100%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 -3px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s;
}

/* Hover efekt */
.menu-buttons .primary-btn:hover {
  background: linear-gradient(180deg, #c47a2f 0%, #a45d21 70%, #7d4113 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.5);
}

/* Aktivní efekt při kliknutí */
.menu-buttons .primary-btn:active {
  transform: scale(0.98);
  background: linear-gradient(180deg, #b67925 0%, #8b4f1a 100%);
}




/* =======================================
   🌄 HERO sekce – Přihlášení / Registrace
   ======================================= */
#hero-section {
  position: relative;
  z-index: 5;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  padding-top: 8vh;
  padding-inline: 1rem;
  box-sizing: border-box;
  overflow: hidden;
  animation: fadeIn 1s ease forwards;
}

.hero-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  max-width: 420px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
}

.hero-logo {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.hero-title {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Uncial Antiqua', cursive;
  font-size: clamp(1.4rem, 5vw, 2rem);
  color: #f7e3a1;
  text-shadow:
    3px 3px 6px rgba(0,0,0,0.8),
    -1px -1px 2px rgba(0,0,0,0.5);
  text-align: center;
  width: 90%;
  line-height: 1.2;
  pointer-events: none;
}



/* ===========================
   🔘 Tlačítka Přihlásit / Registrovat
   =========================== */
.hero-auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 90%;
  max-width: 300px;
  margin: 0 auto 1rem;
}

/* 🔘 Styl tlačítek */
.primary-btn {
  background: linear-gradient(180deg, #b16b27 0%, #9a531d 60%, #703714 100%);
  color: #f9e6b5;
  border: 3px solid #3e290d;
  font-family: 'Uncial Antiqua', cursive;
  font-size: 1.1rem;
  border-radius: 14px;
  padding: 0.9rem 1.8rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 100%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 -3px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s;
}
.primary-btn:hover {
  background: linear-gradient(180deg, #c47a2f 0%, #a45d21 70%, #7d4113 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.5);
}
.primary-btn.active {
  background: linear-gradient(180deg, #dca64a 0%, #b67925 70%, #8b4f1a 100%);
  box-shadow: 0 0 15px rgba(255,210,120,0.8);
  transform: scale(1.05);
}

/* ===========================
   🔐 Formulář
   =========================== */
.hero-auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  padding: 1.4rem;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  width: 90%;
  max-width: 320px;
  margin: 1rem auto 0;
}

.hero-auth-form input {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 2px solid #b79555;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  width: 100%;
}
.hero-auth-form input:focus {
  outline: none;
  border-color: #8b5a1e;
  box-shadow: 0 0 6px rgba(139, 90, 30, 0.4);
}

.hero-auth-form .primary-btn {
  margin-top: 0.4rem;
  width: 100%;
}

/* 🧭 Přepínací text */
.toggle-auth-text {
  color: #fff;
  font-size: 0.9rem;
  margin-top: 0.6rem;
}

.auth-link {
  color: #f7d17a;
  text-decoration: underline;
  cursor: pointer;
}
.auth-link:hover {
  color: #ffe9aa;
  text-shadow: 0 0 4px rgba(255,255,255,0.6);
}

/* 🔔 Zprávy o chybě / úspěchu pod formulářem */
.auth-message {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  margin-top: 0.6rem;
  text-align: center;
  transition: opacity 0.3s ease;
}

.auth-message.error {
  color: #ff4d4d;
  text-shadow: 0 0 6px rgba(255, 0, 0, 0.3);
}

.auth-message.success {
  color: #9efb87;
  text-shadow: 0 0 6px rgba(0, 255, 0, 0.3);
}

.auth-message.hidden {
  opacity: 0;
  visibility: hidden;
}

.auth-message:not(.hidden) {
  opacity: 1;
  visibility: visible;
}


/* ===========================
   🔘 Tlačítka Přihlásit / Registrovat
   =========================== */
.hero-auth-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1rem;
}

/* 🔘 Styl tlačítek */
.primary-btn {
  background: linear-gradient(180deg, #b16b27 0%, #9a531d 60%, #703714 100%);
  color: #f9e6b5;
  border: 3px solid #3e290d;
  font-family: 'Uncial Antiqua', cursive;
  font-size: 1.1rem;
  border-radius: 14px;
  padding: 0.9rem 1.8rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 -3px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s;
}

.primary-btn:hover {
  background: linear-gradient(180deg, #c47a2f 0%, #a45d21 70%, #7d4113 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.5);
}

/* Aktivní tlačítko (přepínání login/register) */
.primary-btn.active {
  background: linear-gradient(180deg, #dca64a 0%, #b67925 70%, #8b4f1a 100%);
  box-shadow: 0 0 15px rgba(255,210,120,0.8);
  transform: scale(1.05);
}

/* ===========================
   🔐 Formulář v hero sekci
   =========================== */
.hero-auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  width: 90%;
  max-width: 300px;
  margin-top: 1rem;
}

.hero-auth-form input {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 2px solid #b79555;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  width: 100%;
}

.hero-auth-form input:focus {
  outline: none;
  border-color: #8b5a1e;
  box-shadow: 0 0 6px rgba(139, 90, 30, 0.4);
}

/* Tlačítko potvrdit v rámci formuláře */
.hero-auth-form .primary-btn {
  margin-top: 0.6rem;
  width: 100%;
  padding: 0.8rem 1rem;
}



/* =======================================
   🗺️ Výběr dobrodružství (finální mobilní verze)
   ======================================= */
#adventure-selection {
  width: 100vw;
  height: 88vh; /* 💡 zvýšeno z 85vh */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 💡 už ne centrovat vertikálně */
  align-items: center;
  text-align: center;
  overflow: hidden;
  padding-top: 7vh; /* 💡 mezera od horního okraje */
  padding-inline: 0.8rem;
}


/* Kontejner pro kartu */
.adventure-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  max-width: 380px;
  height: 75vh;
}

/* Karta s obsahem */
.adventure-card {
  position: relative;
  background: rgba(255, 248, 230, 0.92);
  border: 3px solid #b79555;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  padding: 0.8rem;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Obrázek + šipky */
.adventure-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 0.6rem;
}

.adventure-image-wrapper img {
  width: 50%;
  max-width: 250px;
  max-height: 35vh;
  object-fit: contain;
  border: 3px solid #b79555;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* 🧭 Šipky vedle obrázku */
.adventure-image-wrapper .arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 2px solid transparent;
  color: #3c220a;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  opacity: 0.95;
  transition: transform 0.2s ease;
  z-index: 5;
}

/* 💡 Umístění mimo obrázek, ale v rámci karty */
#prev-adventure {
  left: calc(50% - 38% - 40px);
}
#next-adventure {
  right: calc(50% - 38% - 40px);
}
.adventure-image-wrapper .arrow-btn:hover {
  transform: translateY(-50%) scale(1.1);
}

/* Tečky pod obrázkem */
.dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin: 0.4rem 0 0.6rem;
}
.dot {
  width: 7px;
  height: 7px;
  background: #d0b47c;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.dot.active {
  background: #8b5a1e;
  transform: scale(1.25);
}

/* 🧾 Scrollovatelná textová část */
.adventure-text {
  flex: 1;
  overflow-y: auto;
  padding: 0 0.4rem 0.8rem; /* 👈 větší spodní mezera */
  scrollbar-width: thin;
  scrollbar-color: #b79555 rgba(0,0,0,0.1);
  -webkit-overflow-scrolling: touch;
}

.adventure-text::-webkit-scrollbar {
  width: 6px;
}
.adventure-text::-webkit-scrollbar-thumb {
  background: #b79555;
  border-radius: 10px;
}

/* 🧾 Textový obsah */
.adventure-card h3 {
  color: #3c220a;
  font-family: 'Uncial Antiqua', cursive;
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.adventure-card p {
  color: #4b3418;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

/* 🧭 Blok s časem a vzdáleností vedle sebe */
.adventure-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 0.5rem;
}

#adventure-duration,
#adventure-length {
  font-size: 0.9rem;
  color: #4b3418;
  font-weight: 400; /* normální váha, ne tučné */
}

/* ⚔️ Obtížnost – zvýrazněná */
#adventure-difficulty {
  font-weight: 700;
  color: #3c220a;
  margin-bottom: 0.6rem;
}

/* ✅ Splnění / Nesplnění – zvýrazněné */
#adventure-status {
  font-weight: 700;
  color: #5b320a;
  margin-bottom: 0.6rem;
}

/* 📜 Popis dobrodružství */
#adventure-description {
  margin-top: 0.4rem;
  margin-bottom: 0.3rem;
  color: #4b3418;
  font-weight: 400;
}


/* 🎮 Blok tlačítek dole */
.adventure-buttons {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  z-index: 10;
}

/* Obě tlačítka – přes celou šířku */
.adventure-buttons .primary-btn {
  width: 100%;
  border: none;
  border-radius: 0;
  background: linear-gradient(180deg, #b16b27 0%, #9a531d 60%, #703714 100%);
  color: #f9e6b5;
  font-family: 'Uncial Antiqua', cursive;
  font-size: 1.05rem;
  padding: 1rem 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
  transition: background 0.3s, transform 0.2s ease;
}

/* Efekt hover */
.adventure-buttons .primary-btn:hover {
  background: linear-gradient(180deg, #c47a2f 0%, #a45d21 70%, #7d4113 100%);
  transform: translateY(-2px);
}

/* Horní tlačítko (HRÁT) */
#select-adventure {
  border-top: 2px solid #3e290d;
}

/* Spodní tlačítko (Zpět do menu) */
#back-to-menu-from-adventure {
  border-top: 2px solid #3e290d;
  border-radius: 0 0 12px 12px;
}


#select-adventure,
#back-to-menu-adventure {
  width: 100%;
  background: linear-gradient(180deg, #b16b27 0%, #9a531d 60%, #703714 100%);
  color: #f9e6b5;
  border: none;
  font-family: 'Uncial Antiqua', cursive;
  font-size: 1.05rem;
  padding: 1rem 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
  transition: background 0.3s, transform 0.2s ease;
  border-top: 3px solid #3e290d;
}

#select-adventure:hover,
#back-to-menu-adventure:hover {
  background: linear-gradient(180deg, #c47a2f 0%, #a45d21 70%, #7d4113 100%);
  transform: translateY(-2px);
}




/* =======================================
   ✨ Efekty a pomocné třídy
   ======================================= */
@keyframes fadeInPage {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.hidden {
  display: none !important;
}


/* =======================================
   📲 Sekce – Přidat hru na plochu
   ======================================= */
#add-to-home-section {
  position: relative;
  z-index: 5;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  animation: fadeIn 0.8s ease forwards;
  overflow-y: auto;
  padding: 8vh 0;
}

/* 🧱 Karta s obsahem */
.add-instructions {
  background: rgba(0, 0, 0, 0.55);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  padding: 1.6rem;
  color: #f7e3a1;
  font-family: 'Poppins', sans-serif;
  width: 90%;
  max-width: 420px;
  margin: 0 auto;
  animation: fadeIn 0.6s ease;
}

.add-instructions h2 {
  font-family: 'Uncial Antiqua', cursive;
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
  color: #f7e3a1;
  text-shadow: 0 0 8px rgba(0,0,0,0.7);
}

/* =======================================
   📱 Přepínače zařízení (iOS / Android)
   ======================================= */
.device-switch {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.device-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #b79555;
  border-radius: 10px;
  padding: 0.5rem 1rem;
  color: #f7e3a1;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.device-btn.active {
  background: #b79555;
  color: #2a1a08;
  box-shadow: 0 0 8px rgba(183, 149, 85, 0.7);
}

.device-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* =======================================
   🌐 Přepínače prohlížečů
   ======================================= */
.browser-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.browser-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid #b79555;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  color: #f7e3a1;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.browser-btn.active {
  background: #b79555;
  color: #2a1a08;
  font-weight: 600;
  box-shadow: 0 0 6px rgba(183, 149, 85, 0.7);
}

.browser-btn:hover {
  background: rgba(255,255,255,0.15);
}

/* =======================================
   📖 Obsah návodů
   ======================================= */
.platform-guide {
  text-align: left;
}

.browser-guide {
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 1rem;
  color: #fff3d0;
  line-height: 1.5;
  animation: fadeIn 0.5s ease;
  max-height: 45vh;
  overflow-y: auto;
}

.browser-guide p {
  font-size: 0.95rem;
  margin-bottom: 0.7rem;
  line-height: 1.5;
}

.browser-guide strong {
  color: #f7e3a1;
  font-weight: 600;
}

/* =======================================
   🔼 Sdílecí ikona (SVG)
   ======================================= */
.share-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin: 0 0.2em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23f7e3a1' viewBox='0 0 24 24'><path d='M12 3l4 4h-3v6h-2V7H8l4-4zm-7 9v9h14v-9h2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9h2z'/></svg>") no-repeat center;
  background-size: contain;
}

/* 🔘 Ikona tří teček */
.dots-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
  margin: 0 0.25em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23f7e3a1' viewBox='0 0 24 24'><circle cx='5' cy='12' r='2'/><circle cx='12' cy='12' r='2'/><circle cx='19' cy='12' r='2'/></svg>") no-repeat center;
  background-size: contain;
}


/* =======================================
   ✨ Efekty a přechody
   ======================================= */
.hidden {
  display: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* =======================================
/* ⚙️ Sekce Nastavení */
#settings-section {
  position: relative;
  z-index: 5;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  animation: fadeIn 0.8s ease forwards;
  overflow-y: auto;
  padding: 8vh 0;
}

.settings-container {
  background: rgba(0, 0, 0, 0.55);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  padding: 1.6rem;
  color: #f7e3a1;
  font-family: 'Poppins', sans-serif;
  width: 90%;
  max-width: 420px;
  margin: 0 auto;
  animation: fadeIn 0.6s ease;
}

.settings-container h2 {
  font-family: 'Uncial Antiqua', cursive;
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
  color: #f7e3a1;
  text-shadow: 0 0 8px rgba(0,0,0,0.7);
}

.settings-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

/* 🔒 Formulář pro změnu hesla */
.change-password-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.8rem;
  animation: fadeIn 0.4s ease;
}

.change-password-form input {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  border: 2px solid #b79555;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  width: 100%;
}

.change-password-form input:focus {
  outline: none;
  border-color: #8b5a1e;
  box-shadow: 0 0 6px rgba(139, 90, 30, 0.4);
}

.npc-fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}