/* ============================================================
   LaLanguish — Design System
   Vintage travel / passport stamp aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* ── Warm shell palette (dominant) ── */
  --espresso:  #2C1A0E;   /* main background — dark espresso */
  --cafe:      #3D2215;   /* surface / raised panels */
  --walnut:    #52301C;   /* elevated cards on warm bg */
  --cognac:    #6B3A2A;   /* lightest warm tone — hover states */

  /* ── Navy — accent only, not dominant ── */
  --navy:      #1B2A4A;
  --navy-dark: #0F1C33;
  --navy-mid:  #243560;

  /* ── Content palette ── */
  --parchment: #F5EFE0;
  --parchment-dark: #EDE4CE;
  --gold:      #D4A843;
  --gold-light:#E8C46A;
  --gold-dark: #B8901E;
  --coral:     #A8685C;
  --coral-dark:#8A5248;
  --sky:       #87C1FF;
  --sky-dark:  #5AA8F2;
  --white:     #FFFFFF;
  --ink:       #1B2A4A;

  --font: 'Poppins', sans-serif;

  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;

  /* warm-toned shadows — espresso base, not navy */
  --shadow-sm:   0 2px 8px  rgba(20,12,6,0.28);
  --shadow-md:   0 4px 20px rgba(20,12,6,0.4);
  --shadow-lg:   0 8px 40px rgba(20,12,6,0.55);
  --shadow-gold: 0 4px 20px rgba(212,168,67,0.35);

  --transition: 0.2s ease;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--espresso);
  color: var(--parchment);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
a { color: inherit; text-decoration: none; }
input, textarea { font-family: var(--font); }

/* ── Typography ────────────────────────────────────────────── */
.display-1 { font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.display-2 { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 700; line-height: 1.2; }
.heading-1 { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 700; line-height: 1.3; }
.heading-2 { font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 600; line-height: 1.4; }
.body-lg   { font-size: 1.05rem; font-weight: 400; line-height: 1.7; }
.body-sm   { font-size: 0.875rem; font-weight: 400; line-height: 1.6; }
.label     { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.mono      { font-family: 'Courier New', monospace; }

.text-gold    { color: var(--gold); }
.text-coral   { color: var(--coral); }
.text-sky     { color: var(--sky); }
.text-parchment { color: var(--parchment); }
.text-navy    { color: var(--navy); }

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 90px; /* space for bottom nav */
}

/* ── Bottom Navigation ─────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(22,14,7,0.97);
  border-top: 1px solid rgba(212,168,67,0.18);
  display: flex;
  align-items: stretch;
  height: 62px;
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  transition: var(--transition);
  color: rgba(245,239,224,0.35);
  position: relative;
}

.nav-item:hover,
.nav-item.active {
  color: var(--gold);
}

.nav-icon { font-size: 1.05rem; }
.nav-label { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--parchment);
  color: var(--navy);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.card-navy {
  background: var(--navy-mid);
  color: var(--parchment);
  border: 1px solid rgba(212,168,67,0.2);
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}

/* ── Stamp Component ────────────────────────────────────────── */
.stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 2px dashed currentColor;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
}

.stamp-collected {
  color: var(--gold);
  opacity: 1;
}

.stamp-locked {
  color: rgba(245,239,224,0.2);
  opacity: 0.5;
}

/* Perforated stamp card */
.stamp-card {
  background: var(--parchment);
  color: var(--navy);
  padding: 20px;
  position: relative;
  -webkit-mask:
    radial-gradient(circle at 50% 0,    transparent 8px, #fff 8.5px) top    / 18px 51% repeat-x,
    radial-gradient(circle at 50% 100%, transparent 8px, #fff 8.5px) bottom / 18px 51% repeat-x,
    radial-gradient(circle at 0 50%,    transparent 8px, #fff 8.5px) left   / 51% 18px repeat-y,
    radial-gradient(circle at 100% 50%, transparent 8px, #fff 8.5px) right  / 51% 18px repeat-y;
  mask:
    radial-gradient(circle at 50% 0,    transparent 8px, #fff 8.5px) top    / 18px 51% repeat-x,
    radial-gradient(circle at 50% 100%, transparent 8px, #fff 8.5px) bottom / 18px 51% repeat-x,
    radial-gradient(circle at 0 50%,    transparent 8px, #fff 8.5px) left   / 51% 18px repeat-y,
    radial-gradient(circle at 100% 50%, transparent 8px, #fff 8.5px) right  / 51% 18px repeat-y;
  filter: drop-shadow(0 3px 12px rgba(27,42,74,0.3));
}

/* ── Airmail Stripe ─────────────────────────────────────────── */
.airmail-border {
  border: 3px solid transparent;
  background-image:
    linear-gradient(var(--parchment), var(--parchment)),
    repeating-linear-gradient(
      -45deg,
      var(--coral) 0px, var(--coral) 6px,
      var(--navy) 6px, var(--navy) 12px,
      var(--sky) 12px, var(--sky) 18px,
      var(--navy) 18px, var(--navy) 24px
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: all var(--transition);
  white-space: nowrap;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 2px 12px rgba(212,168,67,0.3);
}
.btn-primary:hover, .btn-primary:active {
  background: var(--gold-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(212,168,67,0.4);
}

.btn-gold {
  background: var(--gold);
  color: var(--navy);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover, .btn-gold:active {
  background: var(--gold-dark);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
}
.btn-outline:hover, .btn-outline:active {
  background: rgba(212,168,67,0.1);
}

.btn-ghost {
  background: rgba(245,239,224,0.07);
  color: rgba(245,239,224,0.75);
  border: 1px solid rgba(245,239,224,0.12);
}
.btn-ghost:hover {
  background: rgba(245,239,224,0.12);
  color: var(--parchment);
}

.btn-lg { padding: 18px 36px; font-size: 1.05rem; border-radius: var(--radius-md); }
.btn-sm { padding: 8px 16px; font-size: 0.8rem; }
.btn-full { width: 100%; }

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ── Form Elements ──────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(245,239,224,0.08);
  border: 1.5px solid rgba(212,168,67,0.3);
  border-radius: var(--radius-sm);
  color: var(--parchment);
  font-family: var(--font);
  font-size: 0.95rem;
  transition: border-color var(--transition), background var(--transition);
  outline: none;
  -webkit-appearance: none;
}

.form-input::placeholder { color: rgba(245,239,224,0.35); }

.form-input:focus {
  border-color: var(--gold);
  background: rgba(245,239,224,0.12);
  box-shadow: 0 0 0 3px rgba(212,168,67,0.15);
}

.form-input.light {
  background: var(--white);
  border-color: rgba(27,42,74,0.2);
  color: var(--navy);
}
.form-input.light::placeholder { color: rgba(27,42,74,0.4); }
.form-input.light:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,42,74,0.1); }

/* ── Decorative Elements ────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(212,168,67,0.5);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(212,168,67,0.25);
}

.coordinates {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(212,168,67,0.6);
  font-variant-numeric: tabular-nums;
}

/* vintage "postmark" circle */
.postmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  position: relative;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  padding: 8px;
}
.postmark::before {
  content: '';
  position: absolute;
  width: 100%;
  border-top: 2px solid currentColor;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Luna Avatar ────────────────────────────────────────────── */
.luna-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(212,168,67,0.3), 0 4px 12px rgba(0,0,0,0.25);
  position: relative;
}
.luna-avatar::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(212,168,67,0.25);
}

.luna-avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 2rem;
}

/* ── Badges & Pills ─────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.badge-gold    { background: rgba(212,168,67,0.2);  color: var(--gold); }
.badge-coral   { background: rgba(232,112,90,0.2);  color: var(--coral); }
.badge-sky     { background: rgba(135,193,255,0.2); color: var(--sky); }
.badge-green   { background: rgba(80,200,120,0.2);  color: #50C878; }

/* ── Progress Bar ───────────────────────────────────────────── */
.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(245,239,224,0.1);
  border-radius: 100px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes stamp-drop {
  0%   { transform: scale(2) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(0.9) rotate(3deg); opacity: 1; }
  80%  { transform: scale(1.05) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.animate-in    { animation: fadeIn 0.4s ease forwards; }
.animate-up    { animation: fadeInUp 0.5s ease forwards; }
.animate-slide { animation: slideIn 0.3s ease forwards; }

/* ── Gold Rule with Fleur-de-lis ────────────────────────────── */
.gold-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 24px;
  pointer-events: none;
}
.gold-rule::before,
.gold-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.35), transparent);
}
.gold-rule-symbol {
  font-size: 0.7rem;
  color: rgba(212,168,67,0.45);
  line-height: 1;
}

/* ── Coffee Cup Watermark (inline SVG, fully opaque strokes) ── */
/* All SVG colors are rgb() (no transparency) so opacity:0.07   */
/* on the element is the sole control — strokes stay visible.   */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Ccircle cx='150' cy='150' r='136' fill='rgb(80,50,25)'/%3E%3Ccircle cx='150' cy='150' r='138' fill='none' stroke='rgb(212,168,67)' stroke-width='3'/%3E%3Ccircle cx='150' cy='150' r='118' fill='none' stroke='rgb(212,168,67)' stroke-width='1.5' stroke-dasharray='4 3'/%3E%3Ccircle cx='150' cy='150' r='106' fill='rgb(55,32,15)'/%3E%3Ccircle cx='150' cy='150' r='106' fill='none' stroke='rgb(212,168,67)' stroke-width='4'/%3E%3Ccircle cx='150' cy='150' r='94' fill='rgb(18,8,3)'/%3E%3Cpath d='M150 180 C130 168 108 158 108 136 C108 122 118 112 130 112 C140 112 147 119 150 126 C153 119 160 112 170 112 C182 112 192 122 192 136 C192 158 170 168 150 180Z' fill='rgb(235,225,200)' stroke='rgb(245,239,224)' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M150 126 L150 176' stroke='rgb(180,155,110)' stroke-width='2' fill='none'/%3E%3Ccircle cx='150' cy='150' r='93' fill='none' stroke='rgb(215,205,180)' stroke-width='6'/%3E%3Cellipse cx='52' cy='82' rx='14' ry='8' transform='rotate(-35 52 82)' fill='rgb(55,32,15)' stroke='rgb(212,168,67)' stroke-width='3'/%3E%3Cpath d='M44 77 Q52 82 60 87' stroke='rgb(212,168,67)' stroke-width='2.5' fill='none'/%3E%3Cellipse cx='248' cy='75' rx='14' ry='8' transform='rotate(25 248 75)' fill='rgb(55,32,15)' stroke='rgb(212,168,67)' stroke-width='3'/%3E%3Cpath d='M240 71 Q248 75 256 79' stroke='rgb(212,168,67)' stroke-width='2.5' fill='none'/%3E%3Cellipse cx='55' cy='230' rx='13' ry='8' transform='rotate(20 55 230)' fill='rgb(55,32,15)' stroke='rgb(212,168,67)' stroke-width='3'/%3E%3Cpath d='M47 226 Q55 230 63 234' stroke='rgb(212,168,67)' stroke-width='2.5' fill='none'/%3E%3Cellipse cx='246' cy='234' rx='13' ry='8' transform='rotate(-30 246 234)' fill='rgb(55,32,15)' stroke='rgb(212,168,67)' stroke-width='3'/%3E%3Cpath d='M238 230 Q246 234 254 238' stroke='rgb(212,168,67)' stroke-width='2.5' fill='none'/%3E%3Cellipse cx='150' cy='26' rx='11' ry='7' transform='rotate(5 150 26)' fill='rgb(55,32,15)' stroke='rgb(212,168,67)' stroke-width='2.5'/%3E%3Cpath d='M142 24 Q150 26 158 28' stroke='rgb(212,168,67)' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(82vmin, 500px);
  opacity: 0.07;
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black 40%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── Warm Background Tint ───────────────────────────────────── */
.map-bg {
  background-image:
    radial-gradient(ellipse at 20% 40%, rgba(212,168,67,0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(168,104,92,0.04) 0%, transparent 50%);
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--espresso); }
::-webkit-scrollbar-thumb { background: rgba(212,168,67,0.35); border-radius: 100px; }

/* ── Utility ────────────────────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.opacity-60 { opacity: 0.6; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 768px) {
  .container { max-width: 560px; }
  .page-wrapper { padding-bottom: 0; }
  .bottom-nav { display: none; }
  .desktop-nav {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    background: var(--espresso);
    border-bottom: 1px solid rgba(212,168,67,0.2);
    align-items: center;
    padding: 0 32px;
    gap: 32px;
    z-index: 100;
  }
  .page-wrapper { padding-top: 64px; }
}

/* ── Toast Notification ─────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--walnut);
  color: var(--parchment);
  border: 1px solid rgba(212,168,67,0.3);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 200;
  opacity: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,12,5,0.88);
  backdrop-filter: blur(6px);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--cafe);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(212,168,67,0.28);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.modal-overlay.open .modal-sheet {
  transform: translateY(0);
}
.modal-handle {
  width: 36px;
  height: 4px;
  background: rgba(245,239,224,0.2);
  border-radius: 100px;
  margin: 0 auto 24px;
}