@charset "UTF-8";
/* ============================================================
   FINAL-POLISH.CSS — Profile stats · Timer ring · Share image
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   PROFILE STATS TAB — lifetime numbers + sparkline
   ───────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.stat-tile {
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(0,0,0,0.5));
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.stat-tile::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-1), var(--accent-warm), transparent);
  opacity: 0.5;
}
.stat-tile.kind-gold::before  { background: linear-gradient(90deg, transparent, var(--accent-warm), transparent); opacity: 0.8; }
.stat-tile.kind-neon::before  { background: linear-gradient(90deg, transparent, var(--neon-1), transparent); opacity: 0.8; }
.stat-tile.kind-cyan::before  { background: linear-gradient(90deg, transparent, var(--neon-2), transparent); opacity: 0.8; }
.stat-tile.kind-green::before { background: linear-gradient(90deg, transparent, var(--good), transparent); opacity: 0.8; }
.stat-label {
  font-family: var(--body-font);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.stat-value {
  font-family: var(--editorial);
  font-size: 1.5rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1;
}
.stat-value.kind-gold  { color: var(--accent-warm); text-shadow: 0 0 12px rgba(var(--accent-warm-rgb), 0.4); }
.stat-value.kind-neon  { color: var(--neon-1); text-shadow: 0 0 12px rgba(var(--neon-1-rgb), 0.4); }
.stat-value.kind-cyan  { color: var(--neon-2); text-shadow: 0 0 12px rgba(var(--neon-2-rgb), 0.4); }
.stat-value.kind-green { color: var(--good); text-shadow: 0 0 12px rgba(40,224,140, 0.4); }
.stat-sub {
  font-family: var(--body-font);
  font-size: 0.6rem;
  color: var(--ink-4);
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* Sparkline section */
.stat-spark {
  grid-column: 1 / -1;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 12px 14px;
}
.stat-spark-title {
  font-family: var(--body-font);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.stat-spark canvas {
  display: block;
  width: 100%;
  height: 60px;
}

/* ─────────────────────────────────────────────────────────────
   BID TIMER POLISH — ring style + countdown number + urgency
   ───────────────────────────────────────────────────────────── */
#timer-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.timer-ring-wrap {
  position: relative;
  width: 44px;
  height: 44px;
}
.timer-ring-wrap svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.timer-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 4;
}
.timer-ring-fg {
  fill: none;
  stroke: url(#timerGrad);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.95s linear;
  filter: drop-shadow(0 0 6px rgba(var(--neon-2-rgb), 0.65));
}
.timer-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--editorial);
  font-size: 1.1rem;
  color: var(--ink-1);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.timer-ring-wrap.urgent .timer-ring-fg {
  stroke: var(--bad) !important;
  filter: drop-shadow(0 0 10px rgba(255,64,112, 0.85));
  animation: timerPulse 0.5s ease-in-out infinite alternate;
}
.timer-ring-wrap.urgent .timer-num {
  color: var(--bad);
  text-shadow: 0 0 12px rgba(255,64,112, 0.7);
  animation: timerNumShake 0.4s ease-in-out infinite alternate;
}
@keyframes timerPulse {
  from { filter: drop-shadow(0 0 10px rgba(255,64,112, 0.85)); }
  to   { filter: drop-shadow(0 0 18px rgba(255,64,112, 1)); }
}
@keyframes timerNumShake {
  from { transform: translateX(-1px) scale(1); }
  to   { transform: translateX(1px)  scale(1.06); }
}

/* Keep the legacy timer-bar hidden when the ring is shown */
#timer-wrap.use-ring #timer-bar { display: none; }

/* ─────────────────────────────────────────────────────────────
   SHARE IMAGE — buttons + canvas preview
   ───────────────────────────────────────────────────────────── */
.gsc-share-row { flex-wrap: wrap; }
.gsc-share-btn[data-act="image"]  { border-color: rgba(var(--neon-1-rgb), 0.4); color: var(--neon-1); }
.gsc-share-btn[data-act="image"]:hover {
  background: rgba(var(--neon-1-rgb), 0.08);
  box-shadow: 0 0 18px rgba(var(--neon-1-rgb), 0.3);
}
.gsc-share-btn.copied[data-act="image"] {
  color: var(--good);
  border-color: var(--good);
}

/* Hidden canvas used for image generation (off-screen) */
#share-canvas {
  position: fixed;
  top: -10000px;
  left: -10000px;
  width: 1200px;
  height: 630px;
}