/* Premium selected-green depth.
   Only selected-green graphics receive extra size/depth.
   Opponent red, neutral gray and underlying data values are unchanged. */

:root{
  --selected-green-hi:#c7ffd0;
  --selected-green-mid:#8be19b;
  --selected-green-low:#5ea96f;
  --selected-green-edge:#4f925f;
  --selected-green-halo:rgba(139,225,155,.34);
}

/* ===== Horizontal comparison bars: selected green only ===== */
.bar{overflow:visible!important}

.prediction-card.selected-home .bar-home,
.prediction-card.selected-away .bar-away{
  position:relative;
  z-index:1;
  overflow:hidden;
  transform:scaleY(1.02);
  transform-origin:center;
  background:linear-gradient(
    to bottom,
    var(--selected-green-hi) 0%,
    #aef4b9 18%,
    var(--selected-green-mid) 44%,
    #74c985 72%,
    var(--selected-green-low) 100%
  )!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(29,73,39,.62),
    inset 0 0 0 1px rgba(183,255,195,.08),
    0 1px 2px rgba(0,0,0,.24),
    0 0 6px var(--selected-green-halo)!important;
}

.prediction-card.selected-home .bar-home::before,
.prediction-card.selected-away .bar-away::before{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:1px;
  height:38%;
  border-radius:999px;
  background:linear-gradient(to bottom,rgba(255,255,255,.42),rgba(255,255,255,.05));
  pointer-events:none;
}

.prediction-card.selected-home .bar-home::after,
.prediction-card.selected-away .bar-away::after{
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  bottom:0;
  height:34%;
  border-radius:999px;
  background:linear-gradient(to top,rgba(18,55,27,.24),rgba(18,55,27,0));
  pointer-events:none;
}

/* ===== Win-probability donut: keep the original conic ring. ===== */
.donut.green-emphasis-ready{
  isolation:isolate;
  overflow:visible;
}

/* Selected green gets a 2% visual lift without scaling red or gray. */
.donut.green-emphasis-ready::before{
  content:"";
  position:absolute;
  inset:-1%;
  z-index:1;
  border-radius:50%;
  pointer-events:none;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 17px),#000 calc(100% - 16px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 17px),#000 calc(100% - 16px));
  filter:drop-shadow(0 0 2px rgba(199,255,208,.38)) drop-shadow(0 0 5px rgba(139,225,155,.38));
}

.prediction-card.selected-home .donut.green-emphasis-ready::before{
  background:conic-gradient(
    var(--selected-green-hi) 0 var(--home-end),
    transparent var(--home-end) 100%
  );
}

.prediction-card.selected-away .donut.green-emphasis-ready::before{
  background:conic-gradient(
    transparent 0 var(--away-start),
    var(--selected-green-hi) var(--away-start) 100%
  );
}

.donut.green-emphasis-ready::after{
  content:"";
  position:absolute;
  inset:16px;
  z-index:2;
  border-radius:50%;
  background:#161a16!important;
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,.44),
    inset 0 -1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(255,255,255,.02)!important;
}

.donut.green-emphasis-ready strong,
.donut.green-emphasis-ready small{
  z-index:3!important;
}

.donut.green-emphasis-ready strong{
  text-shadow:0 1px 0 rgba(0,0,0,.42),0 0 7px rgba(139,225,155,.08);
}

@media(max-width:680px){
  .prediction-card.selected-home .bar-home,
  .prediction-card.selected-away .bar-away{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.38),
      inset 0 -1px 0 rgba(29,73,39,.54),
      0 1px 2px rgba(0,0,0,.20),
      0 0 5px rgba(139,225,155,.28)!important;
  }

  .donut.green-emphasis-ready::before{
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 15px),#000 calc(100% - 14px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 15px),#000 calc(100% - 14px));
    filter:drop-shadow(0 0 1.5px rgba(199,255,208,.32)) drop-shadow(0 0 4px rgba(139,225,155,.32));
  }
}