/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── Dev banner ───────────────────────────────────────────────────────────── */
.site-dev-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: #2A1F00;
  border-bottom: 1px solid #4A3800;
  color: #FFA726;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  text-align: center;
}
.site-dev-banner ion-icon {
  font-size: 15px;
  flex-shrink: 0;
}
[data-theme="light"] .site-dev-banner {
  background: #FFF8E1;
  border-bottom-color: #FFE082;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  background: var(--tab-bar);
  border-bottom: 1px solid var(--tab-bar-border);
  box-shadow: 0 5px 5px rgba(0,0,0,0.4);
  z-index: 10;
  flex-shrink: 0;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-logo {
  width: 28px;
  height: 28px;
  border-radius: 4px;
}
.header-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s;
}
.header-btn:hover { opacity: 0.6; }
.header-btn ion-icon { font-size: 22px; color: var(--text); }

/* Back button for Settings / Drops */
.header-back {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s;
  text-decoration: none;
}
.header-back:hover { opacity: 0.6; }
.header-back ion-icon {
  font-size: 22px;
  color: var(--text);
}

/* Breadcrumb for calculator sub-pages */
.header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
}
.header-breadcrumb .parent {
  color: var(--sub);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.header-breadcrumb .parent:hover { opacity: 0.7; }
.header-breadcrumb .sep {
  color: var(--sub);
  font-size: 15px;
  padding: 0 2px;
}
.header-breadcrumb .current {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

/* ── Drops button ─────────────────────────────────────────────────────────── */
.drops-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.drops-btn:hover { opacity: 0.7; }
.drops-btn .icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.drops-btn .twitch-icon { color: #9146FF; font-size: 14px; }
.drops-btn .kick-icon {
  font-size: 15px;
  font-weight: 900;
  color: #53FC18;
  line-height: 1;
}
.drops-btn .labels {
  display: flex;
  flex-direction: column;
}
.drops-btn .label {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
}
.drops-btn .active-label {
  color: #53FC18;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
}

/* Drops border ring */
.drops-ring {
  position: absolute;
  inset: -5px -8px;
  border-radius: 10px;
  border: 2px solid #555;
  pointer-events: none;
}
.drops-ring.active {
  animation: drops-color 2s ease infinite alternate;
  box-shadow: 0 0 10px currentColor;
}

/* Drops pulse rings */
.drops-pulse {
  position: absolute;
  inset: -5px -8px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  pointer-events: none;
}
.drops-pulse.active.p1 {
  animation: drops-color 2s ease infinite alternate, drops-pulse-anim 1.6s ease-out infinite;
}
.drops-pulse.active.p2 {
  animation: drops-color 2s ease infinite alternate, drops-pulse-anim 1.6s ease-out infinite 0.8s;
}

@keyframes drops-color {
  0% { border-color: #9146FF; color: #9146FF; }
  50% { border-color: #7BE87B; color: #7BE87B; }
  100% { border-color: #53FC18; color: #53FC18; }
}
@keyframes drops-pulse-anim {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Inactive drops */
.drops-btn.inactive .twitch-icon,
.drops-btn.inactive .kick-icon { color: #555; }
.drops-ring.inactive { border-color: #555; }

/* ── Content area ─────────────────────────────────────────────────────────── */
.page-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}


/* ── Tab bar ──────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  height: 68px;
  padding-bottom: 6px;
  padding-top: 8px;
  background: var(--tab-bar);
  border-top: 1px solid var(--tab-bar-border);
  box-shadow: 0 -5px 5px rgba(0,0,0,0.4);
  z-index: 10;
  flex-shrink: 0;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: var(--tab-icon-default);
  cursor: pointer;
  transition: color 0.15s;
}
.tab-item:hover { opacity: 0.8; }
.tab-item.active { color: var(--tab-icon-selected); }
.tab-item ion-icon { font-size: 24px; }
.tab-item span {
  font-size: 11px;
  font-weight: 600;
}

/* ── Splash screen ────────────────────────────────────────────────────────── */
.splash-overlay {
  position: fixed;
  inset: 0;
  background: #111111;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transition: opacity 0.5s ease;
}
.splash-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
.splash-logo-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash-logo {
  width: 120px;
  height: 120px;
  animation: splash-fly-in 0.68s cubic-bezier(0.33, 1, 0.68, 1) forwards,
             splash-spin 0.68s cubic-bezier(0.33, 0.9, 0.68, 1) forwards;
}
@keyframes splash-fly-in {
  0% { translate: 380px -520px; scale: 1; }
  100% { translate: 0 0; scale: 1; }
}
@keyframes splash-spin {
  0% { rotate: 0deg; }
  100% { rotate: 1080deg; }
}
.splash-logo.bounce {
  animation: splash-bounce 0.265s ease forwards;
}
@keyframes splash-bounce {
  0% { scale: 1; }
  28% { scale: 1.22; }
  58% { scale: 0.9; }
  100% { scale: 1; }
}
.splash-logo.wobble {
  animation: splash-wobble 0.48s ease forwards;
}
@keyframes splash-wobble {
  0% { rotate: 900deg; }
  15% { rotate: 913deg; }
  37% { rotate: 891deg; }
  55% { rotate: 905deg; }
  72% { rotate: 897deg; }
  86% { rotate: 901deg; }
  100% { rotate: 900deg; }
}
.splash-logo.to-header {
  animation: splash-to-header 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes splash-to-header {
  0% { translate: 0 0; scale: 1; }
  100% { translate: var(--move-x) var(--move-y); scale: 0.233; }
}
.splash-bottom {
  padding: 0 40px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: opacity 0.4s ease;
}
.splash-bottom.fade-out {
  opacity: 0;
}
.splash-title {
  color: #E8E0D5;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1px;
}
.splash-bar-track {
  width: 100%;
  height: 4px;
  background: #2A2A2A;
  border-radius: 2px;
  overflow: hidden;
}
.splash-bar-fill {
  height: 100%;
  background: #CD4A14;
  border-radius: 2px;
  width: 0%;
  animation: splash-progress 3s ease forwards;
}
@keyframes splash-progress {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* ── Modal overlay (for settings/drops) ───────────────────────────────────── */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  background: var(--tab-bar);
  border-bottom: 1px solid var(--tab-bar-border);
  flex-shrink: 0;
}
.modal-header .modal-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
}
.modal-header .modal-close {
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
}
.modal-header .modal-close ion-icon { font-size: 22px; }