/* PATH: /public/css/stakes.css */
.vx-stakes-page{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:18px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(14,165,233,.16), transparent 52%),
    radial-gradient(110% 95% at 0% 100%, rgba(16,185,129,.12), transparent 58%),
    linear-gradient(168deg,#ffffff 0%,#f6fbff 100%);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 16px 34px rgba(15,23,42,.1);
}

.vx-stakes-atmo{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(260px 140px at 92% 8%, rgba(34,197,94,.14), transparent 66%),
    radial-gradient(220px 150px at 10% 92%, rgba(56,189,248,.12), transparent 70%);
}

.vx-stakes-hero{ position:relative; z-index:1; margin-bottom:14px; }

.vx-stakes-kicker{
  color:#0369a1;
  text-transform:uppercase;
  letter-spacing:.85px;
  font-size:11px;
  font-weight:900;
}

.vx-stakes-title{
  color:#0f172a;
  margin:4px 0 0;
  font-size:30px;
  line-height:1.03;
  letter-spacing:-.45px;
  font-weight:900;
}

.vx-stakes-sub{
  margin:6px 0 0;
  color:rgba(15,23,42,.65);
  font-size:13px;
  font-weight:700;
}

.vx-stakes-trainingSlot,
.vx-stakes-grid,
.vx-stakes-divider{ position:relative; z-index:1; }

.vx-stakes-divider{
  margin:14px 0 10px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(15,23,42,.56);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
}

.vx-stakes-divider::before,
.vx-stakes-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg, transparent, rgba(148,163,184,.55), transparent);
}

.vx-stakes-grid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.vx-stake-card{
  width:100%;
  text-align:left;
  border:1px solid rgba(15,23,42,.1);
  border-radius:18px;
  color:#0f172a;
  padding:14px;
  background:linear-gradient(165deg,#ffffff,#edf6ff);
  transform:translateY(8px);
  opacity:0;
  animation:vxStakeIn .32s ease forwards;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.vx-stake-card:hover{
  transform:translateY(-2px);
  border-color:rgba(14,165,233,.5);
  box-shadow:0 12px 24px rgba(14,165,233,.16);
}

.vx-stake-card.is-disabled{
  opacity:.56;
  cursor:not-allowed;
  filter:grayscale(.22);
}

.vx-stake-tag{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.62px;
  text-transform:uppercase;
  color:#075985;
  border:1px solid rgba(2,132,199,.24);
  background:rgba(2,132,199,.1);
}

.vx-stake-headline{
  margin-top:8px;
  font-size:24px;
  font-weight:900;
  letter-spacing:-.3px;
}

.vx-stake-copy{
  margin-top:4px;
  font-size:13px;
  color:rgba(15,23,42,.72);
  font-weight:600;
}

.vx-stake-training{
  border-color:rgba(2,132,199,.24);
  background:
    radial-gradient(120% 85% at 100% 0%, rgba(56,189,248,.18), transparent 56%),
    linear-gradient(160deg,#ffffff,#edf8ff);
}

.vx-stake-training.is-empty{ cursor:default; }

.vx-stake-trainingRow{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }

.vx-stake-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  color:#0f172a;
  border:1px solid rgba(148,163,184,.34);
  background:rgba(255,255,255,.9);
}

.vx-stake-topLine{ display:flex; align-items:center; justify-content:space-between; }

.vx-stake-mini{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:800;
  color:rgba(15,23,42,.56);
}

.vx-stake-arrow{
  width:30px;
  height:30px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(148,163,184,.18);
  color:#0f172a;
}

.vx-stake-prizeLabel{
  margin-top:10px;
  color:rgba(15,23,42,.68);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.56px;
  font-weight:900;
}

.vx-stake-prizeValue{
  margin-top:2px;
  font-size:30px;
  line-height:1;
  letter-spacing:-.55px;
  font-weight:900;
  color:#0369a1;
}

.vx-stake-entryWrap{
  margin-top:12px;
  padding:10px 11px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.26);
  background:rgba(255,255,255,.88);
}

.vx-stake-entryLabel{
  color:rgba(15,23,42,.58);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.45px;
  font-weight:900;
}

.vx-stake-entryValue{
  margin-top:2px;
  color:#0f172a;
  font-size:20px;
  letter-spacing:-.28px;
  font-weight:900;
}

.vx-stake-foot{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.vx-stake-footItem{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:rgba(15,23,42,.66);
  font-size:12px;
  font-weight:700;
}

.vx-stake-warn{
  margin-top:10px;
  padding:7px 8px;
  border-radius:10px;
  border:1px solid rgba(239,68,68,.28);
  background:rgba(239,68,68,.1);
  color:#991b1b;
  font-size:12px;
  font-weight:700;
}

.vx-stakes-empty{
  border:1px dashed rgba(148,163,184,.55);
  border-radius:14px;
  text-align:center;
  padding:18px 12px;
  color:rgba(15,23,42,.66);
  background:rgba(255,255,255,.72);
  font-size:14px;
  font-weight:600;
}

.vx-stake-skel{
  height:132px;
  border-radius:16px;
  background:linear-gradient(90deg, rgba(203,213,225,.42), rgba(226,232,240,.9), rgba(203,213,225,.42));
  background-size:220% 100%;
  animation:vxStakeSkel 1.2s linear infinite;
}

.vx-stake-skel.is-training{ height:154px; }

@media (max-width: 880px){
  .vx-stakes-grid{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .vx-stakes-page{ border-radius:20px; padding:14px; }
  .vx-stakes-title{ font-size:25px; }
  .vx-stake-prizeValue{ font-size:28px; }
  .vx-stake-entryValue{ font-size:19px; }
}

@keyframes vxStakeIn{
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}

@keyframes vxStakeSkel{
  from { background-position:0% 0; }
  to { background-position:220% 0; }
}