/* =============================================================
   RIFTBOUND — Design system
   Mobile-first, dark, polished, with rarity glows
   ============================================================= */

:root {
  --bg-0: #08080d;
  --bg-1: #0e0e15;
  --bg-2: #14141d;
  --bg-3: #1c1c28;
  --line: #232333;
  --text: #f1f5f9;
  --text-dim: #94a3b8;
  --text-mute: #64748b;

  --r-common:    #9ca3af;
  --r-uncommon:  #22c55e;
  --r-rare:      #3b82f6;
  --r-epic:      #a855f7;
  --r-legendary: #f59e0b;
  --r-mythic:    #ef4444;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);
}

* { -webkit-tap-highlight-color: transparent; }

html, body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--bg-0);
  color: var(--text);
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(168,85,247,0.18), transparent 50%),
    radial-gradient(900px 500px at 10% 110%, rgba(56,189,248,0.15), transparent 50%),
    var(--bg-0);
}

/* Typography */
h1, h2, h3, .display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }

/* =============================================================
   SPLASH
   ============================================================= */
.logo-ring {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, #f97316, #a855f7, #38bdf8, #22c55e, #f97316);
  margin: 0 auto;
  animation: spin 3s linear infinite;
  position: relative;
  filter: drop-shadow(0 0 30px rgba(168,85,247,0.5));
}
.logo-ring::after {
  content: "";
  position: absolute; inset: 6px;
  background: var(--bg-0);
  border-radius: 50%;
}
.logo-mark {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, #f97316, #a855f7, #38bdf8, #22c55e, #f97316);
  filter: drop-shadow(0 0 24px rgba(168,85,247,0.4));
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =============================================================
   AUTH
   ============================================================= */
.field {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 16px;     /* 16px prevents iOS zoom on focus */
  font-family: inherit;
  transition: border-color 150ms, background 150ms;
}
.field:focus { outline: none; border-color: #a855f7; background: var(--bg-3); }

.btn-primary {
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  color: white;
  font-weight: 700;
  padding: 16px;
  border-radius: 16px;
  border: none;
  font-size: 16px;
  transition: transform 100ms, box-shadow 150ms;
  box-shadow: 0 6px 20px rgba(168,85,247,0.35);
}
.btn-primary:active { transform: scale(0.97); }

.btn-ghost {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
  transition: background 120ms;
}
.btn-ghost:active { background: var(--bg-3); }

.tabs .tab {
  color: var(--text-dim);
  transition: all 150ms;
}
.tabs .tab.active {
  background: var(--bg-3);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Faction picker */
.faction-card {
  position: relative;
  border-radius: 18px;
  padding: 14px;
  background: var(--bg-2);
  border: 2px solid transparent;
  transition: all 150ms;
  cursor: pointer;
  overflow: hidden;
}
.faction-card.selected {
  border-color: currentColor;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px currentColor;
}
.faction-card .ico { font-size: 28px; }
.faction-card .nm { font-weight: 700; font-size: 15px; margin-top: 4px; }
.faction-card .tg { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* =============================================================
   APP SHELL
   ============================================================= */
.topbar {
  padding: calc(var(--safe-top) + 10px) 16px 10px;
  display: flex; align-items: center;
  background: linear-gradient(to bottom, rgba(8,8,13,0.95), rgba(8,8,13,0.7));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 10;
}
.avatar-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
  flex-shrink: 0;
}

.currency-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-2);
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid var(--line);
}

.announcement {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  animation: pulse-glow 2s infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.5); }
  50%      { box-shadow: 0 0 20px 4px rgba(245,158,11,0.3); }
}

.bottomnav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(8,8,13,0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-bottom);
}
.bottomnav-6 { grid-template-columns: repeat(6, 1fr); }
.nav-btn {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 0 8px;
  font-size: 10px;
  color: var(--text-mute);
  font-weight: 600;
  transition: color 120ms;
  position: relative;
}
.nav-btn .ico {
  font-size: 22px;
  margin-bottom: 2px;
  transition: transform 150ms;
}
.nav-btn:active .ico { transform: scale(0.85); }
.nav-btn.active { color: var(--text); }
.nav-btn.active::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 30px; height: 3px;
  background: linear-gradient(90deg, #a855f7, #38bdf8);
  border-radius: 0 0 4px 4px;
}

/* Quest notification badge on nav */
.nav-btn .badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 22px);
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* =============================================================
   QUEST CARDS
   ============================================================= */
.quest-card {
  background: linear-gradient(135deg, rgba(30,30,45,0.9), rgba(15,15,25,0.9));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.quest-card.complete {
  border-color: rgba(245, 158, 11, 0.5);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(239, 68, 68, 0.05));
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.15);
}
.quest-card .quest-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  margin-bottom: 6px;
}
.quest-card .quest-type.weekly {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}
.quest-card .quest-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.quest-card .quest-desc {
  font-size: 13px;
  color: var(--text-mute);
  margin-bottom: 12px;
}
.quest-progress-bar {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  transition: width 0.4s ease;
  border-radius: 4px;
}
.quest-card.complete .quest-progress-fill {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  animation: progress-glow 1.5s ease-in-out infinite;
}
@keyframes progress-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 0 16px rgba(245, 158, 11, 0.7); }
}
.quest-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
}
.quest-reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.quest-claim-btn {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: white;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s;
}
.quest-claim-btn:hover { transform: scale(1.02); }
.quest-claim-btn:active { transform: scale(0.98); }

/* =============================================================
   SHARD SHOP / SALVAGE
   ============================================================= */
.shard-shop-card {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.05));
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 12px;
}
.shard-shop-card .price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: #4ade80;
}
.shard-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #4ade80 30%, #16a34a);
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 2px;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}

.salvage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.salvage-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 2px solid transparent;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.15s;
  overflow: hidden;
}
.salvage-tile.selected {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  transform: scale(0.95);
}
.salvage-tile.selected::after {
  content: "✕";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.salvage-tile .name {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.salvage-tile .yield {
  font-size: 11px;
  font-weight: 700;
  color: #4ade80;
}

/* Battle ticket display */
.ticket-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.05));
  border: 1px solid rgba(251, 191, 36, 0.3);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  color: #fbbf24;
  font-size: 13px;
}

/* =============================================================
   PAGES
   ============================================================= */
.page {
  position: absolute; inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 24px;
  display: none;
}
.page.active { display: block; }
.page.entering { animation: slide-in 250ms ease-out; }
@keyframes slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 18px 0 10px;
  letter-spacing: -0.01em;
}
.section-title:first-child { margin-top: 0; }

/* =============================================================
   PACK CARDS
   ============================================================= */
.pack-card {
  position: relative;
  border-radius: 20px;
  padding: 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 100ms;
}
.pack-card:active { transform: scale(0.98); }
.pack-card .pc-art {
  height: 110px;
  border-radius: 14px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #38bdf8 100%);
  position: relative;
  overflow: hidden;
}
.pack-card .pc-art::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.4), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.2), transparent 40%);
}
.pack-card[data-tier="starter"]  .pc-art { background: linear-gradient(135deg, #475569, #1e293b); }
.pack-card[data-tier="standard"] .pc-art { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.pack-card[data-tier="premium"]  .pc-art { background: linear-gradient(135deg, #a855f7, #6366f1); }
.pack-card[data-tier="mythic"]   .pc-art { background: linear-gradient(135deg, #f59e0b, #dc2626); }
.pack-card .pc-name { font-weight: 700; font-size: 15px; }
.pack-card .pc-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.pack-card .pc-price {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-3);
  padding: 6px 12px; border-radius: 999px;
  font-weight: 700; font-size: 13px;
}

/* =============================================================
   COLLECTIBLE TILE (vault grid)
   ============================================================= */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.col-tile {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 100ms;
  cursor: pointer;
}
.col-tile:active { transform: scale(0.96); }

.col-tile .ct-art {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--ct-c1), var(--ct-c2));
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
}
.col-tile .ct-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  padding: 16px 8px 6px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
}
.col-tile .ct-rarity {
  position: absolute; top: 6px; left: 6px;
  font-size: 9px; font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.col-tile .ct-badge {
  position: absolute; top: 6px; right: 6px;
  font-size: 14px;
  filter: drop-shadow(0 0 4px currentColor);
}
.col-tile .ct-fav {
  position: absolute; top: 28px; right: 6px;
  font-size: 12px;
}

/* Rarity glow */
.col-tile[data-r="common"]    { box-shadow: 0 0 0 1px var(--r-common); }
.col-tile[data-r="uncommon"]  { box-shadow: 0 0 0 1px var(--r-uncommon), 0 0 12px -4px var(--r-uncommon); }
.col-tile[data-r="rare"]      { box-shadow: 0 0 0 1px var(--r-rare),     0 0 14px -4px var(--r-rare); }
.col-tile[data-r="epic"]      { box-shadow: 0 0 0 1.5px var(--r-epic),   0 0 18px -4px var(--r-epic); }
.col-tile[data-r="legendary"] {
  box-shadow: 0 0 0 2px var(--r-legendary), 0 0 22px -2px var(--r-legendary);
  animation: glow-leg 2s ease-in-out infinite;
}
.col-tile[data-r="mythic"] {
  box-shadow: 0 0 0 2px var(--r-mythic), 0 0 26px -2px var(--r-mythic);
  animation: glow-myth 1.6s ease-in-out infinite;
}
@keyframes glow-leg {
  0%, 100% { box-shadow: 0 0 0 2px var(--r-legendary), 0 0 16px -4px var(--r-legendary); }
  50%      { box-shadow: 0 0 0 2px var(--r-legendary), 0 0 28px 0px var(--r-legendary); }
}
@keyframes glow-myth {
  0%, 100% { box-shadow: 0 0 0 2px var(--r-mythic), 0 0 18px -4px var(--r-mythic); }
  50%      { box-shadow: 0 0 0 2px var(--r-mythic), 0 0 36px 2px var(--r-mythic); }
}

/* Shiny particle effect */
.col-tile.variant-shiny::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.8) 0%, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,0.8) 0%, transparent 2px),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.8) 0%, transparent 2px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,0.8) 0%, transparent 2px);
  pointer-events: none;
  animation: sparkle 3s linear infinite;
}
@keyframes sparkle {
  0% { opacity: 0.4; transform: rotate(0deg); }
  50% { opacity: 1; }
  100% { opacity: 0.4; transform: rotate(360deg); }
}

/* Corrupted glitch */
.col-tile.variant-corrupted::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(168,85,247,0.15) 3px, rgba(168,85,247,0.15) 4px);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: glitch 0.3s steps(2) infinite;
}
@keyframes glitch { 50% { transform: translateX(1px); } }

/* =============================================================
   PACK OPEN MODAL
   ============================================================= */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fade-in 200ms;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--bg-1);
  border-radius: 24px;
  border: 1px solid var(--line);
  width: 100%; max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: pop-in 250ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  color: var(--text-dim);
}

/* Pack opening sequence */
.pack-opener {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 60vh;
  padding: 24px;
}
.pack-art {
  width: 220px; height: 300px;
  border-radius: 24px;
  position: relative;
  transition: all 600ms cubic-bezier(.34,1.56,.64,1);
  cursor: pointer;
  user-select: none;
}
.pack-art.shake { animation: shake 0.3s ease infinite; }
@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-3deg); }
  75%      { transform: rotate(3deg); }
}
.pack-art.opening {
  animation: pack-burst 800ms forwards;
}
@keyframes pack-burst {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.2); filter: brightness(2); }
  60%  { transform: scale(1.4); filter: brightness(3) blur(2px); opacity: 0.8; }
  100% { transform: scale(2); filter: brightness(4) blur(20px); opacity: 0; }
}

.pack-reveal {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 60vh;
  padding: 24px;
  text-align: center;
}
.pack-reveal-card {
  width: 240px;
  aspect-ratio: 3/4;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  animation: card-pop 500ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes card-pop {
  from { opacity: 0; transform: scale(0.4) rotateY(180deg); }
  to   { opacity: 1; transform: scale(1) rotateY(0); }
}
.pack-reveal-meta {
  margin-top: 18px;
  font-size: 22px; font-weight: 700;
}
.pack-reveal-rarity {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}
.pack-reveal-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: 24px;
}

/* =============================================================
   GLOBAL FEED
   ============================================================= */
.feed-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 8px;
  animation: feed-in 300ms;
}
@keyframes feed-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.feed-item.legendary { border-color: var(--r-legendary); }
.feed-item.mythic { border-color: var(--r-mythic); }
.feed-item.shiny { border-color: #fef08a; }

/* =============================================================
   AUCTION ROW
   ============================================================= */
.auction-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 8px;
}
.auction-row .ar-tile {
  width: 56px; height: 56px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.auction-row .ar-info { flex: 1; min-width: 0; }
.auction-row .ar-name { font-weight: 700; font-size: 14px; }
.auction-row .ar-meta { font-size: 11px; color: var(--text-dim); }
.auction-row .ar-price {
  background: var(--bg-3);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; gap: 4px;
}

/* =============================================================
   WORLD MAP
   ============================================================= */
.world-map {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 30%, rgba(249,115,22,0.2), transparent 40%),
    radial-gradient(circle at 75% 25%, rgba(56,189,248,0.2), transparent 40%),
    radial-gradient(circle at 50% 55%, rgba(34,197,94,0.2), transparent 40%),
    radial-gradient(circle at 60% 80%, rgba(168,85,247,0.2), transparent 40%),
    var(--bg-1);
  border: 1px solid var(--line);
  overflow: hidden;
}
.territory-dot {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 0 12px currentColor;
  transition: transform 150ms;
}
.territory-dot:hover, .territory-dot:active { transform: translate(-50%, -50%) scale(1.4); }
.territory-dot::before {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.4;
  animation: ping 2s infinite;
}
@keyframes ping {
  0% { transform: scale(0.5); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}
.territory-label {
  position: absolute;
  transform: translate(-50%, 12px);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* =============================================================
   TOAST
   ============================================================= */
.toasts {
  position: fixed; top: calc(var(--safe-top) + 12px); left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  animation: toast-in 250ms ease-out, toast-out 250ms ease-in 2.5s forwards;
}
.toast.err { border-color: #dc2626; color: #fca5a5; }
.toast.ok  { border-color: #22c55e; color: #86efac; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(-12px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(-12px); } }

/* =============================================================
   CHIPS & FILTERS
   ============================================================= */
.chip-row {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 12px;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 120ms;
}
.chip.active {
  background: var(--text);
  color: var(--bg-0);
  border-color: var(--text);
}

/* =============================================================
   HORIZONTAL SCROLL CARDS
   ============================================================= */
.hscroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -16px;
  padding: 0 16px 12px;
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 78%;
  max-width: 280px;
}

/* =============================================================
   CHAT
   ============================================================= */
.chat-msg {
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.35;
}
.chat-msg .name { font-weight: 700; }