/* base: CSS variables, reset, typography, app shell, nav, cart, sheet, auth */

    :root {
      --bg: #f2ede8;
      --bg-grad: #ffffff;
      --surface: rgba(255,255,255,0.78);
      --surface-solid: #ffffff;
      --surface2: rgba(246,241,236,0.85);
      --surface3: #e8e0d8;
      --border: rgba(200,185,172,0.5);
      --border-solid: #d8cdc4;
      --text: #1a1410;
      --text2: #6b5e55;
      --text3: #a09088;
      --accent: #e85d3a;
      --accent2: #ff7a57;
      --accent-warm: #ff6b4a;
      --accent-glow: rgba(232,93,58,0.15);
      --accent-tint: rgba(232,93,58,0.07);
      --green: #16a34a;
      --green-dim: rgba(22,163,74,0.1);
      --blue: #1d6fb8;
      --purple: #7c3aed;
      --yellow: #c97706;
      --red: #dc2626;
      --glass: rgba(255,255,255,0.72);
      --glass-border: rgba(255,255,255,0.6);
      --glass-strong: rgba(255,255,255,0.94);
      --radius: 16px;
      --radius-sm: 12px;
      --nav-h: 72px;
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
    body {
      font-family: 'Inter', 'Noto Sans JP', sans-serif;
      background: var(--bg);
      background-image: var(--bg-grad);
      color: var(--text);
      overflow: hidden;
      height: 100dvh;
      width: 100vw;
      position: fixed;
      top: 0; left: 0;
    }

    #app {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .screen {
      display: none;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 8px);
    }
    .screen.active { display: flex; flex-direction: column; }
    .screen.no-scroll { overflow: hidden; }

    #bottomNav {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: calc(var(--nav-h) + var(--safe-bottom));
      padding-bottom: var(--safe-bottom);
      background: linear-gradient(to top, rgba(245,238,230,0.97) 0%, rgba(250,244,238,0.92) 100%);
      backdrop-filter: blur(24px) saturate(1.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.6);
      border-top: 1px solid rgba(210,192,178,0.45);
      box-shadow: 0 -1px 0 rgba(255,255,255,0.7) inset;
      display: flex;
      align-items: center;
      justify-content: space-around;
      z-index: 1000;
    }
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 16px;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }
    .nav-item svg { width: 24px; height: 24px; transition: all 0.2s; }
    .nav-item span { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text3); transition: all 0.2s; }
    .nav-item.active svg { color: var(--accent); }
    .nav-item.active span { color: var(--accent); }
    .nav-item .badge {
      position: absolute;
      top: 2px; right: 8px;
      width: 18px; height: 18px;
      background: var(--accent);
      border-radius: 50%;
      font-size: 10px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }

    #mapScreen { padding-bottom: 0; }
    #mapContainer {
      flex: 1;
      width: 100%;
      position: relative;
    }
    #map { width: 100%; height: 100%; z-index: 1; }

    .map-header {
      position: absolute;
      top: 0; left: 0; right: 0;
      z-index: 500;
      padding: 12px 16px;
      padding-top: max(12px, env(safe-area-inset-top, 12px));
      background: linear-gradient(to bottom,
        rgba(242,237,232,0.97) 0%,
        rgba(242,237,232,0.85) 60%,
        rgba(242,237,232,0) 100%);
      pointer-events: none;
    }
    .map-header > * { pointer-events: auto; }

    .map-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .map-logo {
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 900;
      font-size: 20px;
      letter-spacing: -0.5px;
    }
    .map-logo .accent { color: var(--accent); }

    .map-search {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--glass-strong);
      border: 1px solid var(--glass-border);
      border-radius: 14px;
      padding: 10px 14px;
      backdrop-filter: blur(16px) saturate(1.4);
      -webkit-backdrop-filter: blur(16px) saturate(1.4);
      box-shadow: 0 2px 12px rgba(180,140,110,0.1), 0 1px 0 rgba(255,255,255,0.8) inset;
    }
    .map-search input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      color: var(--text);
      font-size: 14px;
      font-family: inherit;
    }
    .map-search input::placeholder { color: var(--text3); }
    .map-search svg { width: 18px; height: 18px; color: var(--text3); flex-shrink: 0; }

    .map-filters {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 4px 0;
      scrollbar-width: none;
    }
    .map-filters::-webkit-scrollbar { display: none; }
    .filter-chip {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      padding: 7px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      background: var(--glass-strong);
      border: 1px solid var(--glass-border);
      color: var(--text2);
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 1px 6px rgba(180,140,110,0.08), 0 1px 0 rgba(255,255,255,0.7) inset;
    }
    .filter-chip.active {
      background: var(--accent);
      border-color: var(--accent);
      color: white;
      box-shadow: 0 2px 12px rgba(232,93,58,0.3);
    }

    .location-preview {
      position: absolute;
      bottom: calc(var(--nav-h) + 12px);
      left: 12px; right: 12px;
      z-index: 500;
      background: linear-gradient(160deg, rgba(255,248,242,0.96) 0%, rgba(255,240,232,0.94) 100%);
      border: 1px solid rgba(232,93,58,0.2);
      border-radius: var(--radius);
      padding: 0;
      transform: translateY(120%);
      transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
      cursor: pointer;
      overflow: hidden;
      backdrop-filter: blur(20px) saturate(1.6);
      -webkit-backdrop-filter: blur(20px) saturate(1.6);
      box-shadow: 0 8px 40px rgba(140,80,50,0.18), 0 1px 0 rgba(255,255,255,0.8) inset;
    }
    .location-preview.show { transform: translateY(0); }

/* ===== FIRST BLOOM MODAL ONLY ===== */

#firstBloomModal {

  position: fixed !important;

  inset: 0 !important;

  z-index: 999999 !important;

}

.fb-overlay {

  position: fixed !important;

  inset: 0 !important;

  background: #070405 !important;

  display: flex !important;

  justify-content: center !important;

}

.fb-reward-sheet,

.fb-welcome-sheet {

  width: 100vw !important;

  max-width: 430px !important;

  height: 100dvh !important;

  overflow: hidden !important;

  background: #090507 !important;

}

.fb-bg-panel {

  height: 100dvh !important;

  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch !important;

  background:

    radial-gradient(circle at 50% 18%, rgba(255,246,220,.42), rgba(255,230,200,.1) 42%, rgba(12,6,6,.62) 78%, rgba(0,0,0,.94) 100%),

    linear-gradient(to bottom, rgba(255,245,225,.04), rgba(0,0,0,.86)),

    url('/images/first-bloom-bg.png') center / cover no-repeat !important;

}

.fb-reward-content,

.fb-content {

  min-height: 100dvh !important;

  padding: calc(52px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)) !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

}

.fb-close {

  position: fixed !important;

  top: calc(18px + env(safe-area-inset-top)) !important;

  right: max(18px, calc((100vw - 430px) / 2 + 18px)) !important;

  width: 46px !important;

  height: 46px !important;

  border-radius: 999px !important;

  border: 1px solid rgba(255,220,150,.55) !important;

  background: rgba(22,14,13,.9) !important;

  color: #fff4e5 !important;

  font-size: 28px !important;

  z-index: 10 !important;

}

.fb-season {

  text-align: center !important;

  font-size: 10px !important;

  font-weight: 900 !important;

  letter-spacing: .32em !important;

  color: #9f3c31 !important;

  margin: 0 0 10px !important;

}

.fb-reward-title {

  width: 100% !important;

  max-width: 380px !important;

  margin: 0 auto 14px !important;

  text-align: center !important;

  font-family: Georgia, 'Times New Roman', serif !important;

  font-size: clamp(38px, 11vw, 54px) !important;

  line-height: .9 !important;

  font-weight: 900 !important;

  color: #201817 !important;

}

.fb-reward-title::before {

  content: none !important;

}

.fb-reward-title::after {

  content: "THE CITY IS NOW YOUR MAP." !important;

  display: block !important;

  margin-top: 12px !important;

  font-family: system-ui, -apple-system, sans-serif !important;

  font-size: 12px !important;

  font-weight: 950 !important;

  letter-spacing: .12em !important;

  color: #2d2421 !important;

}

.fb-content h2 {

  margin: 0 0 12px !important;

  text-align: center !important;

  font-size: 28px !important;

  line-height: 1.15 !important;

  color: #1f1816 !important;

}

.fb-reward-card {

  width: 100% !important;

  max-width: 380px !important;

  min-height: 124px !important;

  margin: 8px auto 14px !important;

  padding: 20px 22px !important;

  display: grid !important;

  grid-template-columns: 100px 1fr !important;

  gap: 18px !important;

  align-items: center !important;

  position: relative !important;

  border-radius: 18px !important;

  background: linear-gradient(135deg, rgba(255,251,230,.98), rgba(255,226,190,.94)) !important;

  border: 2px solid rgba(212,159,70,.92) !important;

  box-shadow: 0 0 26px rgba(255,205,90,.38), 0 16px 34px rgba(45,12,8,.20) !important;

}

.fb-gift {

  width: 92px !important;

  height: 92px !important;

  background: url('/images/first-bloom-gift-badge.png') center / contain no-repeat !important;

  font-size: 0 !important;

  border: 0 !important;

  filter: drop-shadow(0 0 14px rgba(255,210,105,.65)) !important;

  animation: fbGiftFloatStable 3s ease-in-out infinite !important;

}

.fb-reward-text {

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  justify-content: center !important;

}

.fb-discount {

  font-family: Georgia, 'Times New Roman', serif !important;

  font-size: 40px !important;

  font-weight: 950 !important;

  line-height: .95 !important;

  color: #a3322b !important;

}

.fb-discount-sub {

  margin-top: 7px !important;

  font-size: 18px !important;

  line-height: 1.18 !important;

  font-weight: 750 !important;

  color: #211817 !important;

}

.fb-discount-sub strong {

  color: #a3322b !important;

}

.fb-unlocked {

  position: absolute !important;

  top: -15px !important;

  left: 50% !important;

  transform: translateX(-50%) !important;

  padding: 5px 20px !important;

  border-radius: 999px !important;

  background: linear-gradient(90deg, #c99628, #f3d06b, #c99628) !important;

  color: #201409 !important;

  font-size: 11px !important;

  font-weight: 950 !important;

  letter-spacing: .18em !important;

}

.fb-progress-wrap {

  width: 100% !important;

  max-width: 380px !important;

  margin: 0 auto 12px !important;

}

.fb-progress-label {

  display: block !important;

  margin-bottom: 18px !important;

  color: #fff7df !important;

  text-shadow: 0 3px 12px rgba(0,0,0,.72) !important;

  font-size: 15px !important;

  font-weight: 950 !important;

  letter-spacing: .1em !important;

  text-transform: uppercase !important;

}

.fb-progress-label small,

.fb-progress-label strong {

  display: none !important;

}

.fb-progress-track {

  width: 100% !important;

  height: 14px !important;

  margin-top: 6px !important;

  position: relative !important;

  overflow: visible !important;

  border-radius: 999px !important;

  background: rgba(28,20,18,.72) !important;

  border: 1px solid rgba(255,226,170,.3) !important;

}

.fb-progress-fill {

  display: block !important;

  width: 20% !important;

  height: 100% !important;

  border-radius: 999px !important;

  background: linear-gradient(90deg, #ff3e7d, #ff745e) !important;

  animation: fbProgressPulseStable 2.2s ease-in-out infinite !important;

}

.fb-percent-badge {

  position: absolute !important;

  left: 20% !important;

  top: 100% !important;

  transform: translate(-50%, -40%) !important;

  width: 56px !important;

  height: 56px !important;

  display: grid !important;

  place-items: center !important;

  border-radius: 999px !important;

  background: radial-gradient(circle, #6b4a36, #30201b) !important;

  border: 2px solid rgba(255,220,130,.95) !important;

  color: #fff !important;

  font-size: 17px !important;

  font-weight: 950 !important;

  z-index: 4 !important;

}

.fb-progress-wrap p,

.fb-progress-sub {

  margin: 22px 0 0 !important;

  text-align: center !important;

  font-size: 15px !important;

  font-weight: 950 !important;

  color: #fff7df !important;

  text-shadow: 0 3px 12px rgba(0,0,0,.72) !important;

}

.fb-primary-btn,

.fb-secondary-btn {

  width: 100% !important;

  max-width: 380px !important;

  height: 62px !important;

  min-height: 62px !important;

  margin-left: auto !important;

  margin-right: auto !important;

  padding: 0 68px !important;

  position: relative !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 20px !important;

  box-sizing: border-box !important;

  white-space: nowrap !important;

  font-family: Georgia, 'Times New Roman', serif !important;

  font-weight: 900 !important;

  line-height: 1 !important;

}

.fb-primary-btn {

  margin-top: 22px !important;

  background: linear-gradient(135deg, #ff4f79, #d73737) !important;

  color: #fff8eb !important;

  font-size: 26px !important;

  border: 2px solid rgba(255,220,135,.95) !important;

}

.fb-secondary-btn {

  margin-top: 12px !important;

  background: rgba(13,9,9,.86) !important;

  color: #fff1df !important;

  font-size: 23px !important;

  border: 1.5px solid rgba(230,181,92,.86) !important;

}

.fb-primary-btn::before,

.fb-secondary-btn::before {

  content: "" !important;

  position: absolute !important;

  left: 24px !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  width: 40px !important;

  height: 40px !important;

  border-radius: 999px !important;

  background: radial-gradient(circle at 35% 25%, #fff5c8, #d69a31 72%, #8d5d16) !important;

}

.fb-primary-btn::after,

.fb-secondary-btn::after {

  content: "›" !important;

  position: absolute !important;

  right: 26px !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  font-size: 40px !important;

  color: #ffe0a0 !important;

}

.fb-footer-note {

  margin-top: 12px !important;

  text-align: center !important;

  font-size: 9px !important;

  font-weight: 950 !important;

  letter-spacing: .2em !important;

  color: rgba(255,236,198,.9) !important;

}

.fb-feature-card,

.fb-intro,

.fb-kicker,

.fb-handle {

  display: none !important;

}

@keyframes fbGiftFloatStable {

  0%, 100% { transform: translateY(0) scale(1); }

  50% { transform: translateY(-5px) scale(1.03); }

}

@keyframes fbProgressPulseStable {

  0%, 100% { filter: brightness(1); }

  50% { filter: brightness(1.25); }

}

@media (max-height: 740px) {

  .fb-reward-content,

  .fb-content {

    padding-top: calc(38px + env(safe-area-inset-top)) !important;

    padding-left: 22px !important;

    padding-right: 22px !important;

  }

  .fb-reward-title {

    font-size: 36px !important;

    margin-bottom: 10px !important;

  }

  .fb-content h2 {

    font-size: 23px !important;

    margin-bottom: 10px !important;

  }

  .fb-reward-card {

    min-height: 112px !important;

    grid-template-columns: 86px 1fr !important;

    padding: 14px 16px !important;

    margin-bottom: 12px !important;

  }

  .fb-gift {

    width: 80px !important;

    height: 80px !important;

  }

  .fb-discount {

    font-size: 33px !important;

  }

  .fb-discount-sub {

    font-size: 16px !important;

  }

  .fb-percent-badge {

    width: 48px !important;

    height: 48px !important;

    font-size: 15px !important;

  }

  .fb-primary-btn,

  .fb-secondary-btn {

    height: 54px !important;

    min-height: 54px !important;

  }

  .fb-footer-note {

    display: none !important;

  }

}

/* ===== END FIRST BLOOM MODAL ONLY ===== */