/* Shared top nav (templates/_topnav.html) - included on every player-
   facing page. Relies on the --panel/--panel-light/--panel-dark/--accent/
   --grass-light/--grass-dark custom properties every page's own CSS
   already declares in its own :root block (same values everywhere,
   verified - see docs/DESIGN.md's "Shared top nav" section) rather than
   redeclaring :root here too.

   Self-contained on purpose (duplicates .action-btn/.modal-close-btn/
   .modal-sub even on pages whose own CSS already has them, e.g. pet.css)
   since dashboard.css/planet.css never defined those at all - same
   "every stylesheet redeclares what it needs" pattern this codebase
   already uses for :root/.link-btn rather than a shared base file. */

/* "The home page for the expedition phase" card follow-up (2026-07-25):
   "The two nav bars and the event banner should show above every page
   on the players' side of the game" - both moved here from pet.css
   (previously pet.html-only) so every page that includes _topnav.html
   gets them for free, instead of each page duplicating its own copy. */

.event-banner {
  padding: 10px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #2b1b00;
  background: linear-gradient(90deg, #ffd76b, #ff9ad1, #6be8ff, #8fd14f, #ffd76b);
  background-size: 300% 100%;
  animation: event-banner-shimmer 6s linear infinite;
  border-bottom: 3px solid #0006;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.event-banner.hidden {
  display: none;
}

@keyframes event-banner-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* 5-game-hub quick-switch bar ("general UI Tweeks" card, 2026-07-25) -
   only Monsters/Expeditions are real per the player's own answer; the
   other 3 are inert placeholders reserved for future modes. `.pet-hub-
   btn-active` is toggled by nav.js based on the current page path, not
   hardcoded per-page, since this bar now appears on every page. */
.pet-hub-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 480px;
  width: 100%;
  margin: 0 auto 14px auto;
}

.pet-hub-btn {
  flex: 1 1 0;
  min-width: 80px;
  text-align: center;
  padding: 8px 6px;
  border: 2px solid;
  border-color: var(--grass-light) var(--grass-dark) var(--grass-dark) var(--grass-light);
  background: #79c94a;
  color: #23360f;
  font-weight: bold;
  font-family: inherit;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}

.pet-hub-btn-placeholder {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--panel-light) var(--panel-dark) var(--panel-dark) var(--panel-light);
  background: var(--panel-dark);
  color: #cbb8ff;
}

/* Toggled by nav.js based on the current page path (see there) - was
   previously only ever hardcoded on pet.html's own Monsters button with
   no distinct styling at all; now that the bar is universal, giving it
   a real visual treatment actually matters. */
.pet-hub-btn.pet-hub-btn-active {
  border-color: var(--accent) var(--accent) var(--accent) var(--accent);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.ls-topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto 14px auto;
  padding: 10px 14px;
  background: var(--panel);
  border: 4px solid;
  border-color: var(--panel-light) var(--panel-dark) var(--panel-dark) var(--panel-light);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.ls-topnav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ls-topnav-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Guest-only "Log In" CTA - keeps the same attention-grabbing pulse the
   old full-bleed .save-cta-btn had, just sized to sit in the nav row
   instead of spanning the whole card. */
.ls-login-btn {
  padding: 6px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  color: #2b1b00;
  background: linear-gradient(135deg, #fff0c2, var(--accent) 55%, #f0a940);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  animation: ls-login-btn-pulse 1.8s ease-out infinite;
}

.ls-login-btn:hover {
  filter: brightness(1.05);
}

.ls-login-btn:active {
  filter: brightness(0.96);
}

@keyframes ls-login-btn-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 215, 107, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(255, 215, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 215, 107, 0); }
}

/* ---------- Level / XP-to-next-level bar ---------- */

.nav-level-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.nav-level-label {
  font-weight: bold;
  color: var(--accent);
  white-space: nowrap;
}

.nav-level-track {
  width: 70px;
  height: 8px;
  background: var(--panel-dark);
  border-radius: 4px;
  overflow: hidden;
}

.nav-level-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--grass-dark), var(--grass-light));
  transition: width 0.3s ease;
}

.nav-level-xp-label {
  color: #cbb8ff;
  white-space: nowrap;
}

/* ---------- Account menu (pill + dropdown) ---------- */

.account-menu-wrap {
  position: relative;
}

.account-pill-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  color: #23360f;
  background: #a8e678;
  border: 2px solid;
  border-color: var(--grass-light) var(--grass-dark) var(--grass-dark) var(--grass-light);
  border-radius: 4px;
  cursor: pointer;
}

.account-pill-btn:hover {
  filter: brightness(1.05);
}

.account-caret {
  font-size: 10px;
  opacity: 0.7;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  background: var(--panel);
  border: 3px solid;
  border-color: var(--panel-light) var(--panel-dark) var(--panel-dark) var(--panel-light);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.account-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  color: #f0e9ff;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.account-dropdown-item:hover {
  background: var(--panel-light);
}

.account-dropdown-danger {
  color: #ff9a9a;
}

/* ---------- Generic modal chrome (close button, subtitle, action button) ----------
   Duplicated from pet.css's part-modal system on purpose - see file
   doc-comment above. */

.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: #cbb8ff;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
}

.modal-close-btn:hover {
  color: #f0e9ff;
}

.modal-sub {
  margin: 0 0 16px;
  font-size: 12px;
  color: #cbb8ff;
  text-align: center;
  line-height: 1.4;
}

.action-btn {
  padding: 10px 16px;
  cursor: pointer;
  border: 3px solid;
  border-color: var(--grass-light) var(--grass-dark) var(--grass-dark) var(--grass-light);
  background: #79c94a;
  color: #23360f;
  font-weight: bold;
  font-family: inherit;
  font-size: 14px;
  border-radius: 8px;
  touch-action: manipulation;
}

.action-btn:active {
  border-color: var(--grass-dark) var(--grass-light) var(--grass-light) var(--grass-dark);
}

/* ---------- Account modal (login/register/forgot-password/add-email) ---------- */

.account-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(10, 5, 25, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.account-modal {
  position: relative;
  background: var(--panel);
  border: 6px solid;
  border-color: var(--panel-light) var(--panel-dark) var(--panel-dark) var(--panel-light);
  border-radius: 12px;
  padding: 24px 22px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.account-modal h2 {
  margin: 0 0 6px;
  font-size: 19px;
  text-align: center;
}

.account-modal .action-btn {
  width: 100%;
  margin-bottom: 8px;
}

.modal-error {
  min-height: 16px;
  font-size: 12px;
  font-weight: bold;
  color: #ff9a9a;
  text-align: center;
  margin-bottom: 8px;
}

.modal-info {
  min-height: 0;
  font-size: 12px;
  font-weight: bold;
  color: var(--grass-light);
  text-align: center;
  margin-bottom: 8px;
}

.modal-info:empty {
  margin-bottom: 0;
}

.modal-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 14px;
  border-radius: 6px;
  border: 2px solid var(--panel-light);
  background: var(--panel-dark);
  color: #f0e9ff;
  transition: border-color 0.12s ease;
}

.modal-input:focus {
  outline: none;
  border-color: var(--accent);
}

.modal-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.modal-toggle {
  margin: 0;
  font-size: 12px;
  text-align: center;
  color: #cbb8ff;
}

.modal-toggle a {
  color: var(--accent);
  text-decoration: none;
}

.modal-toggle a:hover {
  text-decoration: underline;
}

.modal-back {
  margin-top: 10px;
}

/* ---------- Generic small modal (Options modal reuses this - moved from
   battle_arena.css, which used to be the only page with a modal like
   this) ---------- */

.arena-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 6, 28, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.arena-modal {
  max-width: 420px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--panel);
  border: 6px solid;
  border-color: var(--panel-light) var(--panel-dark) var(--panel-dark) var(--panel-light);
  border-radius: 12px;
  padding: 18px;
}

.arena-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.arena-modal-header h2 {
  margin: 0;
  font-size: 17px;
}

.arena-option-slider-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  margin-bottom: 14px;
}

.arena-option-slider-row input[type="range"] {
  width: 100%;
}

.arena-option-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

/* ---------- Desktop wide-screen widening ("Display changes" card, 2026-07-25) ----------
   Shared across every page this partial is included on (dashboard/
   planet/battle-arena/deck/expedition, each with its own differently-
   widened wrap - see their own CSS) - already flex+wrap+space-between,
   so widening just spreads the login-pill/level-bar cluster further
   from the Dashboard/Options cluster rather than breaking anything. */
@media (min-width: 700px) {
  .ls-topnav, .pet-hub-bar {
    max-width: 760px;
  }
}