/* ==========================================================================
   REAL Shahnameh — Tap Page Styles (tap.css)
   Layered on top of style.css + home.css
   ========================================================================== */

/* ---- App shell ---- */
.tap-app { padding-bottom: 90px; }

/* ---- Stats bar ---- */
.tap-stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.tsb-cell {
  background: rgba(16, 22, 52, .7);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 10px;
  text-align: center;
}
.tsb-cell .lbl {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tsb-cell .val {
  font-size: 16px;
  font-weight: 800;
  margin-top: 2px;
}
.tsb-cell.gold .val  { color: var(--gold); }
.tsb-cell.jade .val  { color: var(--jade); animation: profit-pulse 4s ease-in-out infinite; }
.tsb-cell.ember .val { color: var(--ember); }

/* ---- Claim banner ---- */
.real-hr-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(83,215,156,.13), rgba(83,215,156,.05));
  border: 1px solid rgba(83,215,156,.32);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.rhb-left .rhb-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 3px;
}
.rhb-left .rhb-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--jade);
  animation: profit-pulse 4s ease-in-out infinite;
  display: flex;
  align-items: center;
  gap: 5px;
}
.rhb-left .rhb-val img {
  height: 18px;
  vertical-align: middle;
}
.rhb-claim {
  background: linear-gradient(135deg, var(--jade), #3fbf88);
  color: #07080f;
  font-size: 13px;
  font-weight: 800;
  border: none;
  border-radius: 20px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(83,215,156,.38);
  flex-shrink: 0;
}
.rhb-claim:active { transform: scale(.97); }

/* ============================================================
   MINTING CORE SECTION — main tap area
   ============================================================ */
.mint-core-section {
  background: rgba(7, 10, 26, .65);
  border: 1px solid rgba(244, 197, 107, .42);
  border-radius: var(--r-xl);
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
}
.mint-core-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 44%, rgba(244,197,107,.11) 0%, transparent 62%);
  pointer-events: none;
}

.mint-core-label {
  text-align: center;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .6;
  margin-bottom: 6px;
}

/* Override core-wrap size — bigger on tap page */
.mint-core-section .core-wrap {
  max-width: 360px;
  margin: 0 auto;
  /* Isolate particle/ring-burst compositing to this layer */
  will-change: contents;
  contain: layout style;
}

/* r4 glow disk stays but feels bigger through the larger wrap */
.mint-core-section .ring.r4 {
  box-shadow:
    0 0 80px rgba(244, 197, 107, .65),
    inset 0 0 80px rgba(255, 220, 160, .45);
}

/* Bigger orb — was inset:33%, now 22% → ~200 px tap target on 360px wrap */
.mint-core-section .energy-orb {
  inset: 22%;
  /* Promote to its own compositor layer to eliminate transform glitch on rapid taps */
  will-change: transform;
  transform: translateZ(0);
  box-shadow:
    inset 0 0 44px rgba(255, 220, 160, .65),
    0 0 70px rgba(244, 197, 107, .7),
    0 0 140px rgba(244, 197, 107, .2);
}
.mint-core-section .energy-orb:active {
  transform: translateZ(0) scale(.91);
  box-shadow:
    inset 0 0 65px rgba(255, 220, 160, .95),
    0 0 120px rgba(244, 197, 107, 1),
    0 0 220px rgba(244, 197, 107, .4);
  /* Use opacity instead of filter:brightness to avoid repaint on every tap */
  opacity: 0.88;
}

/* Bigger inner icon ring */
.mint-core-section .energy-orb .core-icon {
  width: 66%;
  height: 66%;
}

/* Skin image inside orb */
.mint-core-section .energy-orb .core-icon [data-skin-orb] {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.mint-core-section .energy-orb .core-icon [data-skin-orb-text] {
  font-size: 40px;
  line-height: 1;
}

/* Keyumars — sovereign of the first court — royal gold + leopard warmth */
.mint-core-section .energy-orb.skin-keyumars-active {
  z-index: 10;
  box-shadow:
    inset 0 0 60px rgba(255, 210, 80, .82),
    0 0 90px rgba(244, 197, 107, .95),
    0 0 180px rgba(220, 140, 0, .45);
  background: radial-gradient(circle at 38% 32%,
    rgba(255, 235, 120, .22),
    rgba(200, 130, 20, .14) 48%,
    rgba(90, 50, 10, .12));
  border-color: var(--gold);
}
.mint-core-section .energy-orb.skin-keyumars-active:active {
  box-shadow:
    inset 0 0 80px rgba(255, 220, 80, 1),
    0 0 140px rgba(244, 197, 107, 1),
    0 0 260px rgba(220, 140, 0, .6);
}

/* Mint hint below energy bar */
.mint-hint {
  margin-top: 6px;
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .3px;
}

/* ---- Combo display ---- */
.combo-display {
  background: rgba(140, 109, 255, .1);
  border: 1px solid var(--border-violet);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.combo-left .combo-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
}
.combo-left .combo-val {
  font-size: 28px;
  font-weight: 900;
  color: var(--violet);
  line-height: 1;
}
.combo-right { text-align: right; }
.combo-right .streak-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
}
.combo-right .streak-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--ember);
}

/* ---- Boost cards ---- */
.tap-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tap-mini-card {
  background: rgba(16, 22, 52, .7);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.tap-mini-card.gold-edge   { border-color: var(--border-gold); }
.tap-mini-card.violet-edge { border-color: var(--border-violet); }
.tap-mini-card h5 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tap-mini-card .copy {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

/* ============================================================
   TAP SKINS
   ============================================================ */
.skins-section-head { margin-bottom: 10px; }
.skins-section-head h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-dim);
}
.skins-section-head p {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

.skin-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.skin-rail::-webkit-scrollbar { display: none; }

.skin-card {
  flex-shrink: 0;
  width: 82px;
  background: rgba(14, 18, 44, .8);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 8px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.skin-card:active { transform: scale(.96); }
.skin-card.selected {
  border-color: var(--gold);
  box-shadow: 0 0 22px rgba(244,197,107,.32);
  background: rgba(244,197,107,.07);
}
.skin-card.locked { opacity: .62; cursor: default; }
.skin-card.locked:active { transform: none; }

.skin-portrait {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  font-size: 26px;
  position: relative;
}
.skin-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.skin-portrait.r-default { border-color: rgba(244,197,107,.45); background: rgba(244,197,107,.07); }
.skin-portrait.r-rare    { border-color: var(--azure); }
.skin-portrait.r-epic    { border-color: var(--violet); animation: glow-epic 2.8s ease-in-out infinite; }
.skin-portrait.r-legend  { border-color: var(--gold); animation: glow-legend 2.4s ease-in-out infinite; }
.skin-portrait.r-mythic  { border-color: var(--crimson); animation: glow-mythic 2s ease-in-out infinite; }

.skin-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.52);
  display: grid;
  place-items: center;
  font-size: 15px;
  border-radius: inherit;
}
.skin-selected-check {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 11px;
  color: var(--gold);
  font-weight: 900;
  text-shadow: 0 0 6px rgba(244,197,107,.8);
}

.skin-name {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.skin-sub {
  font-size: 9px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.skin-sub.r-default { color: var(--gold); }
.skin-sub.r-rare    { color: var(--azure); }
.skin-sub.r-epic    { color: var(--violet); }
.skin-sub.r-legend  { color: var(--gold); }
.skin-sub.r-mythic  { color: var(--crimson); }

/* ============================================================
   REAL MARKET SECTION
   ============================================================ */
.market-card-wrap {
  border: 1px solid rgba(83,215,156,.22);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(7, 12, 30, .72);
}

.market-price-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.market-price-lbl {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.market-price-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--jade);
  letter-spacing: -.5px;
  line-height: 1;
}
.market-change {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 5px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  color: var(--muted);
}
.market-change[data-dir="up"]   { background: rgba(83,215,156,.15); color: var(--jade); border-color: rgba(83,215,156,.32); }
.market-change[data-dir="down"] { background: rgba(255,82,103,.15); color: var(--crimson); border-color: rgba(255,82,103,.32); }

.market-chart-area {
  width: 110px;
  height: 58px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  align-self: center;
}
.market-chart-area svg { display: block; width: 100%; height: 100%; }
.chart-skeleton {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(83,215,156,.1) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 2.2s linear infinite;
  border-radius: 6px;
}

.market-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.market-status-dot {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .3px;
}
[data-market-card][data-state="live"]  .market-status-dot { color: var(--jade); }
[data-market-card][data-state="stale"] .market-status-dot { color: var(--ember); }
.market-7d-label {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.market-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.market-stat {
  padding: 10px 10px 10px 14px;
}
.market-stat + .market-stat {
  border-left: 1px solid rgba(255,255,255,.06);
}
.ms-lbl {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.ms-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.ms-val.trust { color: var(--gold); }

.market-contract-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.market-contract-lbl {
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
}
.market-contract-addr {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--gold-2);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-copy-btn {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(244,197,107,.1);
  border: 1px solid rgba(244,197,107,.3);
  color: var(--gold);
  cursor: pointer;
  transition: background .15s;
}
.market-copy-btn:active { background: rgba(244,197,107,.22); }

.market-links-row {
  display: flex;
  gap: 8px;
  padding: 10px 14px 12px;
}
.market-link-btn {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  padding: 9px 6px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  color: var(--text-dim);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s, color .15s;
  display: block;
}
.market-link-btn:active { background: rgba(255,255,255,.09); color: var(--text); }

.market-note {
  text-align: center;
  font-size: 10px;
  color: var(--muted-2);
  padding: 0 14px 10px;
  letter-spacing: .2px;
}

/* ---- Tap history ---- */
.tap-history {
  background: rgba(16, 22, 52, .5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.tap-history h5 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.history-rows { display: grid; gap: 6px; }
.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  gap: 8px;
}
.history-row .h-event { flex: 1; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-row .h-gain  { color: var(--jade); font-weight: 700; flex-shrink: 0; }
.history-row .h-time  { color: var(--muted); font-size: 10px; flex-shrink: 0; }

/* ============================================================
   ENHANCED TAP FX ANIMATIONS
   ============================================================ */
@keyframes tap-ring-burst {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: .75; }
  100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
}
/* real-token-pop is handled via Web Animations API in tap.js (no CSS needed) */
@keyframes real-label-float {
  0%   { transform: translateY(0) scale(0.8); opacity: 1; }
  100% { transform: translateY(-72px) scale(1); opacity: 0; }
}
@keyframes xp-label-float {
  0%   { transform: translateY(0) translateX(0) scale(0.75); opacity: 1; }
  100% { transform: translateY(-54px) translateX(14px) scale(.9); opacity: 0; }
}

/* Ring burst */
.tap-ring-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(244, 197, 107, .65);
  pointer-events: none;
  z-index: 5;
  animation: tap-ring-burst .55s ease-out forwards;
}

/* Mini REAL coin particles */
.real-mini-coin {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff9e6, var(--gold) 60%, #c98e2b);
  box-shadow: 0 0 8px rgba(244,197,107,.85), 0 0 3px #fff;
  pointer-events: none;
  z-index: 6;
  animation: real-token-pop .8s cubic-bezier(.22,1,.36,1) forwards;
}

/* +REAL text float */
.real-label-float {
  position: absolute;
  pointer-events: none;
  font-weight: 900;
  font-size: 14px;
  color: var(--jade);
  text-shadow: 0 0 10px rgba(83,215,156,.7);
  animation: real-label-float .9s cubic-bezier(.22,1,.36,1) forwards;
  white-space: nowrap;
  z-index: 7;
}

/* +XP text float */
.xp-label-float {
  position: absolute;
  pointer-events: none;
  font-weight: 800;
  font-size: 12px;
  color: var(--violet);
  text-shadow: 0 0 8px rgba(140,109,255,.65);
  animation: xp-label-float .85s cubic-bezier(.22,1,.36,1) forwards;
  white-space: nowrap;
  z-index: 7;
}