/* BSC Poker X v17.5.2 · living 3D market board + holographic graph */

.pair-cards{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:13px!important;
  perspective:1300px;
  transform-style:preserve-3d;
}

.market-3d-card{
  min-height:154px!important;
  display:grid!important;
  grid-template-columns:92px 1fr auto!important;
  grid-template-rows:1fr auto!important;
  align-items:center!important;
  gap:5px 12px!important;
  padding:16px!important;
  overflow:hidden!important;
  isolation:isolate;
  transform-style:preserve-3d;
  contain:layout paint;
}
.market-3d-card::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 26% 38%,rgba(65,219,247,.08),transparent 34%),linear-gradient(150deg,rgba(7,34,49,.92),rgba(2,17,27,.96));
  z-index:-2;
}
.market-3d-card::after{
  content:"";
  position:absolute;inset:auto -16% -60% 25%;height:85%;
  background:radial-gradient(ellipse,rgba(51,226,255,.09),transparent 70%);
  z-index:-1;pointer-events:none;
}
.market-3d-card:hover{z-index:2}
.market-3d-card.active{
  border-color:rgba(246,203,76,.9)!important;
  box-shadow:0 0 0 1px rgba(245,199,61,.18),0 0 38px rgba(53,223,255,.12),inset 0 0 42px rgba(32,190,222,.06)!important;
}

.rank-badge{
  position:absolute;left:11px;top:10px;
  min-width:32px;height:32px;padding:0 8px;
  display:grid;place-items:center;
  border-radius:999px;border:1px solid rgba(240,200,79,.45);
  background:rgba(7,18,27,.86);color:#f5d365;font-weight:950;font-size:12px;
  box-shadow:0 0 18px rgba(240,200,79,.08);
}
.market-3d-card[data-rank="1"] .rank-badge{background:linear-gradient(145deg,#ffe48c,#ad7510);color:#1b1000}
.market-3d-card[data-rank="2"] .rank-badge{background:linear-gradient(145deg,#eff6fa,#7d929e);color:#10171b}
.market-3d-card[data-rank="3"] .rank-badge{background:linear-gradient(145deg,#f3b979,#8f4b1d);color:#1b0c03}

.coin-stage{
  grid-row:1/3;
  position:relative;
  width:82px;height:92px;
  display:grid;place-items:center;
  transform-style:preserve-3d;
}
.coin-3d{
  width:72px;height:72px;
  object-fit:contain;
  border-radius:50%;
  transform-style:preserve-3d;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(60,219,242,.16));
  animation:levCoinLive 7.5s ease-in-out infinite;
  will-change:transform;
}
.coin-ring{
  position:absolute;left:4px;right:4px;bottom:0;height:18px;
  border:1px solid rgba(76,224,245,.36);border-radius:50%;
  background:radial-gradient(ellipse,rgba(59,219,243,.18),rgba(6,27,38,.02) 60%,transparent 72%);
  transform:rotateX(68deg);
  box-shadow:0 0 18px rgba(66,217,241,.12);
}
.coin-shadow{
  position:absolute;left:13px;right:13px;bottom:8px;height:12px;border-radius:50%;
  background:rgba(0,0,0,.6);filter:blur(6px);
}
.market-3d-card:hover .coin-3d{animation-play-state:paused;transform:perspective(700px) rotateX(-8deg) rotateY(18deg) translateY(-6px) scale(1.05)}
.market-3d-card.active .coin-3d{filter:drop-shadow(0 11px 14px rgba(0,0,0,.42)) drop-shadow(0 0 22px rgba(241,200,72,.38)) drop-shadow(0 0 34px rgba(65,229,255,.23))}
.market-3d-card.active .coin-ring{border-color:rgba(242,200,73,.72);box-shadow:0 0 24px rgba(242,200,73,.22),0 0 36px rgba(50,218,244,.12)}
@keyframes levCoinLive{
  0%,100%{transform:perspective(700px) rotateX(1deg) rotateY(-7deg) translateY(0)}
  50%{transform:perspective(700px) rotateX(-3deg) rotateY(9deg) translateY(-4px)}
}

.market-3d-card .pair-copy{align-self:end}
.market-3d-card .pair-copy b{font-size:14px}
.market-3d-card .pair-copy small{font-size:10px}
.market-metrics{align-self:end;text-align:right;min-width:78px}
.market-metrics strong{display:block;font-size:14px;white-space:nowrap}
.market-metrics small{display:block;font-size:10px;font-weight:900;letter-spacing:.04em;margin-top:4px}
.market-3d-card[data-market-state="rising"] .market-change{color:#59efbd}
.market-3d-card[data-market-state="falling"] .market-change{color:#ff7898}
.market-3d-card[data-market-state="neutral"] .market-change{color:#b7cad4}
.market-3d-card[data-market-state="stale"] .market-change{color:#f1c95b}
.market-3d-card[data-market-state="unavailable"]{opacity:.58}
.market-3d-card[data-market-state="unavailable"] .coin-3d{filter:grayscale(.65) drop-shadow(0 10px 12px rgba(0,0,0,.4))}
.market-3d-card[data-market-state="rising"]::after{background:radial-gradient(ellipse,rgba(76,236,184,.10),transparent 70%)}
.market-3d-card[data-market-state="falling"]::after{background:radial-gradient(ellipse,rgba(255,85,130,.10),transparent 70%)}

.holo-stage{
  position:relative;
  margin:18px auto 22px;
  min-height:470px;
  perspective:1500px;
  isolation:isolate;
}
.holo-stage[hidden]{display:none!important}
.holo-projector{
  position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotateX(72deg);
  width:min(640px,72%);height:80px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(63,222,255,.22),rgba(11,85,111,.08) 40%,transparent 72%);
  filter:blur(2px);
  box-shadow:0 0 55px rgba(51,215,245,.12);
}
.holo-screen{
  position:relative;
  width:min(1180px,92%);
  margin:auto;
  padding:18px;
  border:1px solid rgba(76,225,249,.48);
  border-radius:25px;
  background:
    radial-gradient(circle at 94% 0,rgba(240,200,79,.12),transparent 24%),
    linear-gradient(145deg,rgba(6,33,48,.78),rgba(2,16,27,.70));
  backdrop-filter:blur(18px) saturate(1.14);
  box-shadow:0 32px 90px rgba(0,0,0,.58),0 0 50px rgba(42,211,239,.12),inset 0 0 45px rgba(67,222,245,.04);
  transform-style:preserve-3d;
  animation:holoOpen .38s cubic-bezier(.2,.78,.2,1) both,holoFloat 6s ease-in-out .5s infinite;
  overflow:hidden;
}
.holo-screen::before,.holo-screen::after{
  content:"";position:absolute;pointer-events:none;opacity:.12;width:180px;height:180px;
  background:
    radial-gradient(ellipse at 50% 22%,transparent 0 24%,rgba(98,230,246,.6) 25% 28%,transparent 29%),
    radial-gradient(ellipse at 23% 52%,transparent 0 24%,rgba(98,230,246,.48) 25% 28%,transparent 29%),
    radial-gradient(ellipse at 77% 52%,transparent 0 24%,rgba(240,200,79,.46) 25% 28%,transparent 29%);
}
.holo-screen::before{left:-55px;bottom:-70px;transform:rotate(-18deg)}
.holo-screen::after{right:-55px;top:-70px;transform:rotate(162deg)}
@keyframes holoOpen{from{opacity:0;transform:rotateX(12deg) translateY(30px) scale(.96)}to{opacity:1;transform:rotateX(0) translateY(0) scale(1)}}
@keyframes holoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.holo-head{display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative;z-index:2}
.holo-identity{display:flex;align-items:center;gap:13px}
.holo-identity h2{margin:3px 0 1px;font-size:28px}
.holo-identity small{color:#85aebe}
.holo-coin{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(67,222,244,.22))}
.holo-controls{display:flex;align-items:center;gap:10px}
.holo-intervals{display:flex;gap:6px}
.holo-intervals button,.holo-close{
  border:1px solid rgba(70,195,223,.28);background:rgba(6,32,47,.78);color:#dff8ff;border-radius:10px;padding:8px 10px;font-weight:850
}
.holo-intervals button.active{border-color:#f0ca53;color:#ffe28b;box-shadow:0 0 16px rgba(240,202,83,.12)}
.holo-close{font-size:23px;line-height:1;width:42px;height:42px}
.holo-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.holo-stats>div{padding:10px 12px;border:1px solid rgba(66,180,207,.15);border-radius:12px;background:rgba(2,17,27,.56)}
.holo-stats span{display:block;color:#789fb1;font-size:9px;font-weight:900;letter-spacing:.08em}
.holo-stats strong{display:block;margin-top:4px;font-size:16px}
.holo-chart-wrap{position:relative;min-height:280px;border:1px solid rgba(65,198,226,.17);border-radius:17px;background:linear-gradient(180deg,rgba(2,13,22,.72),rgba(3,25,37,.52));overflow:hidden}
#holoChart{display:block;width:100%;height:100%;min-height:280px}
.holo-chart-message{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;color:#a1c5d4;background:rgba(2,14,23,.46)}
.holo-chart-message[hidden]{display:none!important}
.holo-foot{padding-top:10px;text-align:center;color:#6f98aa;font-size:10px}

.mini-coin-img{width:31px;height:31px;object-fit:contain;filter:drop-shadow(0 2px 4px #0008)}

@media(max-width:1199px){
  .pair-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .pair-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .holo-stage{min-height:0}
  .holo-screen{width:100%;animation:holoOpen .3s ease both!important;transform:none!important}
}
@media(max-width:600px){
  .market-3d-card{min-height:132px!important;grid-template-columns:64px 1fr!important;grid-template-rows:1fr auto!important;padding:12px!important}
  .coin-stage{width:61px;height:70px}
  .coin-3d{width:54px;height:54px}
  .market-metrics{grid-column:2;text-align:left;display:flex;align-items:center;gap:8px}
  .market-metrics strong,.market-metrics small{font-size:10px}
  .rank-badge{left:7px;top:7px;min-width:27px;height:27px;font-size:10px}
  .holo-head{align-items:flex-start}
  .holo-controls{align-items:flex-end;flex-direction:column-reverse}
  .holo-intervals{flex-wrap:wrap;justify-content:flex-end}
  .holo-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:390px){
  .pair-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .market-3d-card{min-height:122px!important;grid-template-columns:54px 1fr!important;gap:3px 8px!important;padding:10px 8px!important}
  .coin-stage{width:52px;height:61px}
  .coin-3d{width:47px;height:47px}
  .market-3d-card .pair-copy b{font-size:11px}
  .market-ref{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .coin-3d,.holo-screen{animation:none!important}
  .market-3d-card:hover .coin-3d{transform:none!important}
}