/* bubbleup.gg — the app's own look, landing-tuned */
:root {
  --purple: #9147ff; --cyan: #36c6ff; --amber: #ffb02e;
  --ink: #08080b; --bg: #0e0e10;
  --line: #26262f; --line-hi: #3a3a47;
  --fg: #f0f0f6; --fg-2: #b9b9c6; --fg-3: #7b7b8b;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, "Cascadia Mono", Consolas, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--fg); font-family: var(--mono);
  overflow: hidden;
}
/* operator-page ground: two radial glows + hairline grid */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(145, 71, 255, 0.13), transparent 60%),
    radial-gradient(ellipse 70% 45% at 50% 108%, rgba(54, 198, 255, 0.07), transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 45px, rgba(58, 58, 71, 0.14) 45px, rgba(58, 58, 71, 0.14) 46px),
    repeating-linear-gradient(90deg, transparent, transparent 45px, rgba(58, 58, 71, 0.14) 45px, rgba(58, 58, 71, 0.14) 46px);
}
#stage { position: fixed; inset: 0; z-index: 1; opacity: 0.9; }

/* bubbles — text anchors mirror the app: label bottom-anchored at the circle's
   center (grows upward), sub-line + count top-anchored at center (grow downward),
   zero gaps between them */
.bub {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  will-change: transform; user-select: none; pointer-events: none;
  overflow: visible;
}
.bub .lbl, .bub img { position: absolute; left: 50%; bottom: 50%; transform: translateX(-50%); }
.bub .low {
  position: absolute; left: 50%; top: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.bub .sub { color: #fff; opacity: 0.6; line-height: 1.15; white-space: nowrap; }
.bub.txt { background: rgba(145, 71, 255, 0.28); border: 2px solid rgba(145, 71, 255, 0.9); }
.bub.num { background: rgba(54, 198, 255, 0.28); border: 2px solid rgba(54, 198, 255, 0.9); }
.bub[data-trend="growing"] { border-width: 3px; }
.bub.txt[data-trend="growing"] { border-color: rgba(145, 71, 255, 1); }
.bub.num[data-trend="growing"] { border-color: rgba(54, 198, 255, 1); }
.bub.txt[data-trend="decaying"] { border-color: rgba(145, 71, 255, 0.55); }
.bub.num[data-trend="decaying"] { border-color: rgba(54, 198, 255, 0.55); }
.bub .lbl { color: #ffffff; font-weight: 700; line-height: 1; white-space: nowrap; }
.bub .cnt { color: #bbbbbb; line-height: 1.1; }
.bub img { display: block; object-fit: contain; }

/* the three-dot mark */
.mark { position: relative; display: inline-block; width: 17px; height: 17px; }
.mark i { position: absolute; border-radius: 50%; display: block; }
.mark i:nth-child(1) { width: 9px; height: 9px; background: var(--purple); left: 5px; top: 7px; }
.mark i:nth-child(2) { width: 5px; height: 5px; background: var(--cyan); left: 0; top: 1px; }
.mark i:nth-child(3) { width: 4px; height: 4px; background: var(--amber); left: 12px; top: 0; }

/* the title card — a reader card (flag shape + purple spine), pinned by main.js */
.card {
  position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 22px 30px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--purple);
  border-radius: 3px 9px 9px 3px;
  background: linear-gradient(180deg, rgba(16, 16, 20, 0.82), rgba(10, 10, 13, 0.82));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 44px rgba(8, 8, 11, 0.55);
  will-change: transform;
}
.card.flip {
  border-left: 1px solid var(--line);
  border-right: 3px solid var(--purple);
  border-radius: 9px 3px 3px 9px;
}
.row { display: flex; align-items: center; gap: 10px; }
.wm { font-size: 26px; font-weight: 700; letter-spacing: 0.22em; }
.tag { color: var(--fg-2); font-size: 13px; letter-spacing: 0.05em; }
.domain { color: var(--fg-3); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-hi); border-radius: 999px;
  padding: 5px 12px; color: var(--fg-2);
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(35, 35, 44, 0.8), rgba(22, 22, 28, 0.8));
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* small screens: the pin-follow has no room to breathe, so the card docks
   bottom-center instead (main.js adds .docked below the width threshold) */
.card.docked {
  left: 50%; top: auto; bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  align-items: center;
  padding: 14px 22px; gap: 8px;
  width: max-content; max-width: calc(100vw - 24px);
}
.card.docked .wm { font-size: 19px; }
.card.docked .tag { font-size: 11px; }
.card.docked .domain { font-size: 9px; }
.card.docked .chip { padding: 4px 10px; font-size: 9px; }
@media (prefers-reduced-motion: reduce) {
  .chip .dot { animation: none; }
}