/* MiningBoard Pool — the few "Terminal" flourishes Tailwind/app-tokens can't
   express. Everything else is Tailwind utilities + the app's design tokens
   (--bg/--panel/--accent/--border…, theme-aware via .dark). Loaded by layout "pool". */

/* Signature faint grid texture (mission-control). Theme-aware via --accent. */
.pool-grid {
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px),
    radial-gradient(1100px 520px at 80% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent);
  background-size: 26px 26px, 26px 26px, 100% 100%;
}

/* Coin-card animated gradient hairline on hover. */
.coin-card { position: relative; }
.coin-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--accent), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.coin-card:hover::before { opacity: .55; }

/* Sparkline + chart strokes (svg can't take Tailwind color utilities on stroke). */
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.spark-flat { fill: none; stroke: var(--muted); stroke-width: 2; }

/* ── Pool detail + miner dashboard (Refined Terminal) ───────────────────── */
/* One orchestrated page-load: staggered card reveal. */
@keyframes pp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pp-rise { animation: pp-rise .5s both; }
.pp-rise:nth-child(2) { animation-delay: .05s; }
.pp-rise:nth-child(3) { animation-delay: .1s; }
.pp-rise:nth-child(4) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .pp-rise { animation: none; } }

/* Payout / round progress bar. */
.pp-track { height: 9px; border-radius: 999px; background: var(--panel-elev); border: 1px solid var(--border); overflow: hidden; }
.pp-fill  { height: 100%; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent); }

/* Worker online / offline dot. */
.pp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.pp-dot.on  { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.pp-dot.off { background: var(--muted); }

/* "Find your stats" glow card. */
.pp-glow { border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent), 0 18px 50px -28px color-mix(in srgb, var(--accent) 55%, transparent); }

/* Hashrate area chart (paired with <polygon fill="url(#pp-area)"> defined inline). */
.pp-area-line { fill: none; stroke: var(--accent); stroke-width: 2.5; }

/* Self-promo strip under the pool nav — faint accent wash + slow sweep,
   matching the mission-control aesthetic. */
.pool-self-promo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 10%, transparent) 0%,
    color-mix(in srgb, var(--accent) 4%,  transparent) 45%,
    color-mix(in srgb, var(--accent) 12%, transparent) 100%);
}
.pool-self-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%,
    color-mix(in srgb, var(--accent) 15%, transparent) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: pool-self-sweep 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pool-self-sweep {
  0%, 50%   { transform: translateX(-100%); }
  88%, 100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .pool-self-promo::after { animation: none; }
}