/* ══════════════════════════════════════════════════════════
   MINI PIZZA 8-SLICE  (gateway card visual)
   ══════════════════════════════════════════════════════════ */
.mini-pizza-8 {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  /* 8 slices via conic-gradient, starting aligned to N (from -22.5deg) */
  background: conic-gradient(from -22.5deg,
    rgba(220,150,30,0.13) 0deg   44deg,
    rgba(232,0,138,0.55)  44deg  45deg,
    rgba(200,125,20,0.09) 45deg  89deg,
    rgba(232,0,138,0.55)  89deg  90deg,
    rgba(220,150,30,0.13) 90deg  134deg,
    rgba(232,0,138,0.55)  134deg 135deg,
    rgba(200,125,20,0.09) 135deg 179deg,
    rgba(232,0,138,0.55)  179deg 180deg,
    rgba(220,150,30,0.13) 180deg 224deg,
    rgba(232,0,138,0.55)  224deg 225deg,
    rgba(200,125,20,0.09) 225deg 269deg,
    rgba(232,0,138,0.55)  269deg 270deg,
    rgba(220,150,30,0.13) 270deg 314deg,
    rgba(232,0,138,0.55)  314deg 315deg,
    rgba(200,125,20,0.09) 315deg 359deg,
    rgba(232,0,138,0.55)  359deg 360deg
  );
  box-shadow:
    0 0 0 3px rgba(175, 98, 18, 0.55),
    0 0 0 5px rgba(175, 98, 18, 0.12),
    0 0 28px rgba(220, 150, 30, 0.22);
  animation: miniPizzaSpin 18s linear infinite;
}

/* Center hole */
.mini-pizza-8::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(232,0,138,0.42);
}

@keyframes miniPizzaSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pause spin on hover for better interaction feedback */
.gw-card-pizza:hover .mini-pizza-8 { animation-play-state: paused; }

/* ── Day mode overrides ──────────────────────────────────── */
[data-theme="day"] .pizza-neon {
  color: rgba(130,75,10,0.9);
  border-color: rgba(130,75,10,0.28);
  text-shadow: none;
  background: rgba(130,75,10,0.04);
}

[data-theme="day"] .pslice              { fill: rgba(220,150,30,0.10); }
[data-theme="day"] .pslice-group:hover .pslice,
[data-theme="day"] .pslice-group.pactive .pslice { fill: rgba(210,140,25,0.24); }

[data-theme="day"] .pizza-crust-seg    { fill: rgba(150,85,12,0.72); stroke: rgba(180,110,20,0.3); }
[data-theme="day"] .pslice-group:hover .pizza-crust-seg,
[data-theme="day"] .pslice-group.pactive .pizza-crust-seg { fill: rgba(160,95,15,0.88); }

[data-theme="day"] .pizza-cut          { stroke: rgba(160,90,15,0.50); }
[data-theme="day"] .pizza-outer-ring   { stroke: rgba(150,85,12,0.65); }
[data-theme="day"] .pizza-center-hub   { fill: var(--bg); stroke: rgba(160,90,15,0.55); }
[data-theme="day"] .pizza-center-dot   { fill: rgba(160,90,15,0.75); }

[data-theme="day"] .pizza-slice-num    { fill: rgba(130,75,10,0.60); }
[data-theme="day"] .pizza-slice-name   { fill: rgba(130,75,10,0.42); }
[data-theme="day"] .pslice-group:hover .pizza-slice-num  { fill: rgba(130,75,10,1); }
[data-theme="day"] .pslice-group:hover .pizza-slice-name { fill: rgba(130,75,10,0.80); }

[data-theme="day"] .mini-pizza-8 {
  background: conic-gradient(from -22.5deg,
    rgba(195,140,30,0.22) 0deg   44deg,
    rgba(150,85,12,0.70)  44deg  45deg,
    rgba(175,120,20,0.14) 45deg  89deg,
    rgba(150,85,12,0.70)  89deg  90deg,
    rgba(195,140,30,0.22) 90deg  134deg,
    rgba(150,85,12,0.70)  134deg 135deg,
    rgba(175,120,20,0.14) 135deg 179deg,
    rgba(150,85,12,0.70)  179deg 180deg,
    rgba(195,140,30,0.22) 180deg 224deg,
    rgba(150,85,12,0.70)  224deg 225deg,
    rgba(175,120,20,0.14) 225deg 269deg,
    rgba(150,85,12,0.70)  269deg 270deg,
    rgba(195,140,30,0.22) 270deg 314deg,
    rgba(150,85,12,0.70)  314deg 315deg,
    rgba(175,120,20,0.14) 315deg 359deg,
    rgba(150,85,12,0.70)  359deg 360deg
  );
  box-shadow: 0 0 0 3px rgba(150,85,12,0.65), 0 0 0 5px rgba(150,85,12,0.18), 0 0 28px rgba(195,140,30,0.28);
}


/* ═══════════════════════════════════════════════════════════
   GATEWAY — "SOON" CARDS  (Auction X, Testnet, Giving Onchain)
   ═══════════════════════════════════════════════════════════ */

/* Base soon state — readable but clearly inactive */
.gw-card-soon {
  opacity: 0.52;
  cursor: default;
  pointer-events: none;
  min-height: 268px;   /* slightly shorter than active cards */
  order: 10;           /* auto-rearrange: inactive cards float to the end */
}
.gw-card { order: 0; }

/* Mainnet card — MEZE coin centered in orbit */
.mainnet-vis {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mainnet-icon { width: 100%; height: 100%; color: currentColor; }

/* Disabled-button user-agent style overrides currentColor to a dim grey
   that vanishes against dark bg. Force the theme text color back. */
.gw-card-soon              { color: var(--text) !important; }
.gw-card-soon .mainnet-icon,
.gw-card-soon .auction-icon,
.gw-card-soon .explorer-icon,
.gw-card-soon .giving-icon,
.gw-card-soon .epochx-icon { color: var(--text); }

/* Boost orbit/globe lines so they remain visible through the
   .gw-card-soon (0.52) dimming on both themes */
.gw-card-soon .mainnet-icon circle,
.gw-card-soon .mainnet-icon ellipse {
  opacity: 1 !important;
}
.gw-card-soon .mainnet-icon circle[stroke-dasharray] { opacity: 0.5 !important; }
.mainnet-coin {
  position: absolute;
  width: 42%;
  height: 42%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(232, 0, 138, 0.55));
  animation: mainnetCoinSpin 14s linear infinite;
  transform-origin: center;
}
@keyframes mainnetCoinSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Coin needs to survive the 0.52 card-dim + browser disabled-button dim */
.gw-card-soon .mainnet-coin {
  opacity: 1;
  filter:
    drop-shadow(0 0 12px rgba(232, 0, 138, 0.7))
    drop-shadow(0 0 4px rgba(232, 0, 138, 0.55));
}

/* Icon containers */
.auction-vis,
.explorer-vis,
.giving-vis {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auction-icon,
.explorer-icon,
.giving-icon,
.epochx-icon {
  width: 76px;
  height: 76px;
  color: var(--t2);
}

/* EpochX — front card gently lifts (subtle "presenting itself") */
.epochx-icon {
  animation: epochxLift 3.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes epochxLift {
  0%, 100% { transform: translateY(0) scale(1);    }
  50%       { transform: translateY(-2px) scale(1.02); }
}

/* ── Auction X — gavel swings subtly ────────────────────── */
.auction-icon {
  animation: auctionSwing 4s ease-in-out infinite;
  transform-origin: 30% 28%;   /* pivot near gavel grip */
}

@keyframes auctionSwing {
  0%, 100% { transform: rotate(0deg);   }
  20%       { transform: rotate(-6deg);  }
  50%       { transform: rotate(4deg);   }
  80%       { transform: rotate(-3deg);  }
}

/* ── Testnet Explorer — lens scans left-right ───────────── */
.explorer-icon {
  animation: explorerScan 5s ease-in-out infinite;
}

@keyframes explorerScan {
  0%, 100% { transform: translateX(0);     }
  40%       { transform: translateX(6px);  }
  70%       { transform: translateX(-5px); }
}

/* ── Giving Onchain — heartbeat pulse ───────────────────── */
.giving-icon {
  animation: heartBeat 2.2s ease-in-out infinite;
}

@keyframes heartBeat {
  0%, 100%  { transform: scale(1);    }
  14%        { transform: scale(1.08); }
  28%        { transform: scale(0.97); }
  42%        { transform: scale(1.06); }
  70%        { transform: scale(1);    }
}

/* ── Soon badge on these cards ──────────────────────────── */
.gw-card-soon .gwc-badge {
  margin-top: auto;
}

/* Day mode — icons are darker */
[data-theme="day"] .auction-icon,
[data-theme="day"] .explorer-icon,
[data-theme="day"] .giving-icon {
  color: var(--t3);
}


/* ═══════════════════════════════════════════════════════════
   PIZZA MOBILE LIST  (mirrors compass .mobile-menu-list)
   ═══════════════════════════════════════════════════════════ */

/* Hidden on desktop — shown only below 700px */
.pizza-menu-list {
  display: none;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  padding: 0 4px;
}

.pizza-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(232,0,138,0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  text-align: left;
}

.pizza-menu-item:hover {
  background: rgba(232,0,138,0.07);
  border-color: rgba(232,0,138,0.28);
}

.pml-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mp);
  min-width: 28px;
}

.pml-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t2);
  flex: 1;
}

.pml-arrow {
  font-size: 18px;
  color: var(--t4);
  transition: color 0.2s ease, transform 0.2s ease;
}

.pizza-menu-item:hover .pml-arrow {
  color: var(--mp);
  transform: translateX(3px);
}

/* ── Mobile breakpoint: swap SVG pizza ↔ list ─────────────── */
@media (max-width: 699px) {

  /* Hide the SVG pizza on mobile */
  .pizza-scene .pizza-wrap   { display: none; }
  .pizza-scene .pizza-neon   { margin-top: 80px; margin-bottom: 18px; }

  /* Show the vertical list */
  .pizza-menu-list           { display: flex; }
}

/* ── Day mode ─────────────────────────────────────────────── */
[data-theme="day"] .pizza-menu-item {
  background: rgba(255,255,255,0.60);
  border-color: rgba(28,18,8,0.10);
}

[data-theme="day"] .pizza-menu-item:hover {
  background: rgba(255,255,255,0.88);
  border-color: rgba(64, 37, 132,0.28);
}

[data-theme="day"] .pml-num   { color: var(--amber); }
[data-theme="day"] .pml-arrow { color: var(--t3); }
[data-theme="day"] .pizza-menu-item:hover .pml-arrow { color: var(--amber); }