/* =========================================
   Online Sweeps Ranking - frontend.css
   Smooth jelly version (enhanced)
   ========================================= */

.osr-ranking-wrap{
  position:relative;
  overflow:visible;
}

.osr-fredoka{
  font-family:'Fredoka One',cursive;
  text-shadow:4px 4px 0 rgba(0,0,0,.2);
  -webkit-text-stroke:2px #312e81;
}

/* =========================
   Cards
   ========================= */
.game-card{
  background:#fff;
  border-radius:40px;
  padding:8px;
  box-shadow:0 15px 0 #312e81, 0 25px 50px rgba(0,0,0,.3);
  transition:box-shadow .28s cubic-bezier(.175,.885,.32,1.275), transform .22s cubic-bezier(.175,.885,.32,1.275);
  position:relative;
  z-index:10;

  transform-style:flat;
  transform:translate3d(0,0,0);
  transform-origin:center center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:auto;
}

.game-card:hover{
  transform:translateY(-5px) scale(1.02);
  box-shadow:0 20px 0 #312e81, 0 35px 60px rgba(0,0,0,.4);
}

.card-inner{
  border-radius:32px;
  padding:18px;
  height:100%;
  position:relative;
  overflow:hidden;
  color:#fff;
}
@media (min-width:768px){
  .card-inner{padding:22px 24px;}
}

.bg-purple{background:linear-gradient(180deg,#a855f7 0%,#7c3aed 100%)}
.bg-pink{background:linear-gradient(180deg,#ec4899 0%,#db2777 100%)}
.bg-blue{background:linear-gradient(180deg,#3b82f6 0%,#2563eb 100%)}

/* =========================
   CTA
   ========================= */
.btn-game{
  background:linear-gradient(180deg,#4ade80 0%,#16a34a 100%);
  border-radius:20px;
  box-shadow:0 8px 0 #15803d, 0 10px 20px rgba(22,163,74,.4);
  transition:all .2s cubic-bezier(.175,.885,.32,1.275);
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.3);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  animation:osrButtonBreathe 3s infinite ease-in-out;
}
.btn-game:hover{transform:scale(1.08);filter:brightness(1.08);}
.btn-game:active{transform:translateY(6px) scale(.95);box-shadow:0 2px 0 #15803d;}
@keyframes osrButtonBreathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}

/* =========================
   Rank badge + helpers
   ========================= */
.rank-star{
  position:absolute;
  left:-15px; top:-15px;
  width:60px; height:60px;
  background:#facc15;
  border:4px solid #fff;
  border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fredoka One',cursive;
  font-size:24px; color:#854d0e;
  box-shadow:0 5px 15px rgba(0,0,0,.2);
  z-index:20;
  transform:rotate(-10deg);
}
.rank-star.osr-rank-2{background:#e2e8f0;color:#475569;}
.rank-star.osr-rank-3{background:#f1c27d;color:#7c2d12;}

.particle{
  position:fixed;
  pointer-events:none;
  z-index:100;
}

.divider{
  height:4px;
  background:rgba(0,0,0,.1);
  border-radius:2px;
  margin:20px 0;
}

/* ===== bottom pills visual ===== */
.info-bubble{
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  padding:6px 12px;
  font-size:.85rem;
  font-weight:800;
  text-align:center;
  color:#fff;
  line-height:1.15;
  white-space:nowrap;
  align-items:center;
  justify-content:center;
  min-height:30px;
}

/* =========================
   NEW CARD STRUCTURE (CSS-only)
   Desktop: logo | bonus | points | button
   Mobile: button + points go down
   ========================= */

/* TOP BLOCK (existing first .flex in your markup) */
.osr-ranking-wrap .game-card .card-inner > .flex:first-child{
  display:grid !important;
  grid-template-columns:minmax(110px,150px) minmax(260px,1fr) minmax(240px,340px) minmax(150px,210px);
  align-items:center !important;
  gap:14px !important;
}

/* 1) LOGO BLOCK */
.osr-ranking-wrap .game-card .card-inner > .flex:first-child > :first-child{
  width:auto !important;
  text-align:center !important;
  margin:0 !important;
}
.osr-brand-logo{
  max-width:140px;
  max-height:54px;
  object-fit:contain;
  display:inline-block;
}
.osr-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
}

/* 2) BONUS BLOCK (headline + second line) */
.osr-ranking-wrap .game-card .card-inner > .flex:first-child > :nth-child(2){
  width:auto !important;
  text-align:left !important;
  margin:0 !important;
  min-width:0;
}
.osr-ranking-wrap .game-card h2{
  margin:0 !important;
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  font-weight:900 !important;
  font-style:italic !important;
  font-size:clamp(1.45rem,2vw,2.4rem) !important;
  line-height:1.02 !important;
  letter-spacing:.2px;
  text-transform:uppercase;
}
.osr-ranking-wrap .game-card p.text-lg,
.osr-ranking-wrap .game-card p.font-bold{
  margin:.28rem 0 0 !important;
  color:#fff !important;
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  font-weight:800 !important;
  letter-spacing:.2px;
  opacity:1 !important;
  font-size:1.02rem !important;
  line-height:1.2 !important;
}

/* 3) POINTS BLOCK -> беремо існуючий ряд після .divider і в desktop робимо окремою "колонкою" */
.osr-ranking-wrap .game-card .divider{
  display:none !important;
}
.osr-ranking-wrap .game-card .divider + .flex,
.osr-ranking-wrap .game-card .divider + div.flex{
  position:static !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:10px !important;
  width:100%;
  margin-top:12px !important;
}

/* Візуально "вмонтувати" points в перший ряд на desktop */
@media (min-width:768px){
  .osr-ranking-wrap .game-card .card-inner{
    display:grid;
    grid-template-columns:minmax(110px,150px) minmax(260px,1fr) minmax(240px,340px) minmax(150px,210px);
    grid-template-areas:"logo bonus points cta";
    gap:14px;
    align-items:center;
  }

  .osr-ranking-wrap .game-card .card-inner > .flex:first-child{
    display:contents !important; /* розкладаємо існуючих дітей по grid-areas */
  }

  .osr-ranking-wrap .game-card .card-inner > .flex:first-child > :first-child{ grid-area:logo; }
  .osr-ranking-wrap .game-card .card-inner > .flex:first-child > :nth-child(2){ grid-area:bonus; }
  .osr-ranking-wrap .game-card .card-inner > .flex:first-child > :last-child{ grid-area:cta; }

  .osr-ranking-wrap .game-card .divider + .flex,
  .osr-ranking-wrap .game-card .divider + div.flex{
    grid-area:points;
    margin-top:0 !important;
    justify-content:flex-start !important;
  }

  .osr-ranking-wrap .game-card .card-inner > .flex:first-child > :last-child{
    width:auto !important;
    display:flex !important;
    justify-content:flex-end !important;
    margin:0 !important;
  }

  .osr-ranking-wrap .game-card .card-inner > .flex:first-child > :last-child .btn-game{
    width:auto !important;
    min-width:150px;
    padding:.85rem 1.45rem !important;
    font-size:1.62rem !important;
    line-height:1;
    font-style:italic;
    text-transform:uppercase;
  }

  .osr-ranking-wrap .game-card .divider + .flex > .info-bubble,
  .osr-ranking-wrap .game-card .divider + div.flex > .info-bubble{
    max-width:100%;
    font-size:.9rem;
    padding:8px 12px;
    min-height:34px;
  }
}

/* Plus between points */
.osr-ranking-wrap .game-card .divider + .flex > .info-bubble + .info-bubble::before,
.osr-ranking-wrap .game-card .divider + div.flex > .info-bubble + .info-bubble::before{
  content:"+";
  position:absolute;
  left:-7px;
  top:50%;
  transform:translate(-50%,-50%);
  width:18px;
  height:18px;
  border-radius:999px;
  background:#fff;
  color:#6d28d9;
  font-weight:900;
  font-size:12px;
  line-height:18px;
  text-align:center;
  z-index:3;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  pointer-events:none;
}
.osr-ranking-wrap .game-card .divider + .flex > .info-bubble,
.osr-ranking-wrap .game-card .divider + div.flex > .info-bubble{
  position:relative;
  z-index:2;
}

/* MOBILE: texts smaller, points + button below */
@media (max-width:767px){
  .osr-ranking-wrap .game-card .card-inner{
    display:block !important;
    padding:14px 14px 12px !important;
  }

  .osr-ranking-wrap .game-card .card-inner > .flex:first-child{
    display:grid !important;
    grid-template-columns:64px minmax(0,1fr);
    gap:10px !important;
    align-items:center !important;
  }

  .osr-brand-logo{max-width:62px;max-height:44px;}
  .osr-logo-wrap{min-height:44px;}

  .osr-ranking-wrap .game-card h2{
    font-size:clamp(1rem,6vw,1.3rem) !important;
    line-height:1.06 !important;
    letter-spacing:.1px !important;
  }
  .osr-ranking-wrap .game-card p.text-lg,
  .osr-ranking-wrap .game-card p.font-bold{
    font-size:.82rem !important;
    line-height:1.15 !important;
    margin:.2rem 0 0 !important;
  }

  /* кнопка вниз на всю ширину */
  .osr-ranking-wrap .game-card .card-inner > .flex:first-child > :last-child{
    grid-column:1 / -1 !important;
    width:100% !important;
    margin-top:8px !important;
    display:block !important;
  }
  .osr-ranking-wrap .game-card .card-inner > .flex:first-child > :last-child .btn-game{
    width:100% !important;
    padding:.78rem 1rem !important;
    font-size:1.2rem !important;
    line-height:1 !important;
    border-radius:14px !important;
    box-shadow:0 6px 0 #15803d, 0 8px 14px rgba(22,163,74,.35);
  }

  .osr-ranking-wrap .game-card .divider + .flex,
  .osr-ranking-wrap .game-card .divider + div.flex{
    margin-top:10px !important;
    justify-content:center !important;
    gap:8px !important;
  }
  .osr-ranking-wrap .game-card .divider + .flex > .info-bubble,
  .osr-ranking-wrap .game-card .divider + div.flex > .info-bubble{
    font-size:.72rem !important;
    padding:5px 9px !important;
    min-height:26px !important;
    max-width:100%;
    white-space:normal;
    text-align:center;
  }

  .osr-ranking-wrap .game-card .divider + .flex > .info-bubble + .info-bubble::before,
  .osr-ranking-wrap .game-card .divider + div.flex > .info-bubble + .info-bubble::before{
    left:50% !important;
    top:-7px !important;
    transform:translate(-50%,-50%) !important;
  }
}

/* =========================
   SEO
   ========================= */
.seo-container{
  background:rgba(255,255,255,.95);
  border-radius:50px;
  box-shadow:0 15px 0 #cbd5e1, 0 25px 50px rgba(0,0,0,.15);
  border:8px solid #fff;
  position:relative;
  margin-top:50px;
}

.seo-icon-float{animation:osrFloatingIcon 4s infinite ease-in-out;}
@keyframes osrFloatingIcon{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-15px) rotate(5deg)}
}

/* =========================
   Balloon
   ========================= */
.osr-balloon{
  display:block !important;
  position:fixed;
  top:18%;
  right:9%;
  width:118px;
  z-index:6;
  pointer-events:none;
  transform-origin:50% 75%;
  filter:drop-shadow(0 18px 14px rgba(0,0,0,.22));
  animation:osrBalloonFun 7s ease-in-out infinite;
}

@keyframes osrBalloonFun{
  0%   { transform:translate3d(0,0,0) rotate(1.5deg) scale(1); }
  20%  { transform:translate3d(-4px,-10px,0) rotate(-1.2deg) scale(1.01); }
  40%  { transform:translate3d(3px,-22px,0) rotate(1.8deg) scale(1.015); }
  60%  { transform:translate3d(6px,-14px,0) rotate(-0.8deg) scale(1.005); }
  80%  { transform:translate3d(-3px,-6px,0) rotate(1deg) scale(1.01); }
  100% { transform:translate3d(0,0,0) rotate(1.5deg) scale(1); }
}

/* Mobile: anchored to ranking wrap (NOT fixed) */
@media (max-width:768px){
  .osr-ranking-wrap{ padding-top:62px; }

  .osr-balloon{
    position:absolute !important;
    top:26px !important;
    right:10px !important;
    width:76px !important;
    max-width:23vw !important;
    z-index:3;
    opacity:.95;
    animation:osrBalloonFunMobile 8.2s ease-in-out infinite;
  }

  @keyframes osrBalloonFunMobile{
    0%   { transform:translate3d(0,0,0) rotate(1deg) scale(1); }
    25%  { transform:translate3d(-2px,-6px,0) rotate(-0.8deg) scale(1.008); }
    50%  { transform:translate3d(2px,-11px,0) rotate(1deg) scale(1.012); }
    75%  { transform:translate3d(3px,-5px,0) rotate(-0.6deg) scale(1.006); }
    100% { transform:translate3d(0,0,0) rotate(1deg) scale(1); }
  }
}

@media (max-width:420px){
  .osr-ranking-wrap{ padding-top:58px; }
  .osr-balloon{
    top:22px !important;
    right:8px !important;
    width:64px !important;
    max-width:20vw !important;
  }
}

/* =========================
   Shortcode title hiding
   ========================= */
.osr-shortcode-active .entry-title,
.osr-shortcode-active .wp-block-post-title,
.osr-shortcode-active h1.entry-title{
  display:none !important;
}

/* SEO glass block */
.osr-seo{margin-top:28px;}
.osr-seo-inner{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:34px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  color:rgba(255,255,255,.92);
  overflow:hidden;
}
@media (min-width:768px){
  .osr-seo{margin-top:34px;}
  .osr-seo-inner{padding:30px 34px;border-radius:44px;}
}
.osr-seo-inner a{color:#fde68a;font-weight:900;text-decoration:underline;}
.osr-seo-inner p{margin:0 0 14px;font-weight:800;line-height:1.75;}
.osr-seo-inner h2,.osr-seo-inner h3{
  font-family:'Fredoka One',cursive;
  text-transform:uppercase;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 14px;
}

/* Theme overrides */
.osr-shortcode-active .seo-container{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  margin-top:0 !important;
}
.osr-shortcode-active .seo-container > h1,
.osr-shortcode-active .seo-container h1.fredoka,
.osr-shortcode-active .seo-container .fredoka.h1,
.osr-shortcode-active .seo-container .page-title,
.osr-shortcode-active .seo-container .entry-title,
.osr-shortcode-active .seo-container .wp-block-post-title{
  display:none !important;
}
.osr-shortcode-active .seo-container > .text-slate-700{
  padding:0 !important;
  margin:0 !important;
}
.osr-shortcode-active .page-title,
.osr-shortcode-active .entry-title,
.osr-shortcode-active .wp-block-post-title{
  display:none !important;
}

/* =========================
   Typography fixes
   ========================= */
/* Заголовок бонусу білий, але дозволяємо кастомний колір у span */
.osr-ranking-wrap .game-card h2{
  color:#fff !important;
}
.osr-ranking-wrap .game-card h2 span{
  color:inherit; /* або просто видали цей селектор */
}
.osr-ranking-wrap .game-card .info-bubble{
  color:#fff !important;
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  font-weight:800 !important;
}

/* =========================
   Jelly animation
   ========================= */
.osr-ranking-wrap.is-jelly-ready .game-card{
  animation-name:osrJellyFluidDesktop;
  animation-duration:5.8s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-fill-mode:both;
  animation-play-state:running;
  transform:translate3d(0,0,0) scale3d(1,1,1);
}
.osr-ranking-wrap.is-jelly-ready .game-card:nth-child(1){animation-delay:-0.3s;}
.osr-ranking-wrap.is-jelly-ready .game-card:nth-child(2){animation-delay:-1.0s;}
.osr-ranking-wrap.is-jelly-ready .game-card:nth-child(3){animation-delay:-1.7s;}
.osr-ranking-wrap.is-jelly-ready .game-card:nth-child(4){animation-delay:-2.4s;}
.osr-ranking-wrap.is-jelly-ready .game-card:nth-child(5){animation-delay:-3.1s;}
.osr-ranking-wrap.is-jelly-ready .game-card:nth-child(6){animation-delay:-3.8s;}
.osr-ranking-wrap.is-jelly-ready .game-card:nth-child(7){animation-delay:-4.5s;}
.osr-ranking-wrap.is-jelly-ready .game-card:nth-child(8){animation-delay:-5.2s;}

@keyframes osrJellyFluidDesktop{
  0%   { transform:translate3d(0,0,0) scale3d(1,1,1); }
  12%  { transform:translate3d(0,0,0) scale3d(1.008,0.995,1); }
  24%  { transform:translate3d(0,0,0) scale3d(1.002,1.006,1); }
  36%  { transform:translate3d(0,0,0) scale3d(0.994,1.008,1); }
  48%  { transform:translate3d(0,0,0) scale3d(0.998,1.002,1); }
  60%  { transform:translate3d(0,0,0) scale3d(1.007,0.996,1); }
  72%  { transform:translate3d(0,0,0) scale3d(1.003,1.004,1); }
  84%  { transform:translate3d(0,0,0) scale3d(0.996,1.007,1); }
  100% { transform:translate3d(0,0,0) scale3d(1,1,1); }
}

@media (max-width:767px){
  .osr-ranking-wrap.is-jelly-ready .game-card{
    animation-name:osrJellyFluidMobile;
    animation-duration:4.9s;
  }

  @keyframes osrJellyFluidMobile{
    0%   { transform:translate3d(0,0,0) scale3d(1,1,1); }
    14%  { transform:translate3d(0,0,0) scale3d(1.016,0.988,1); }
    28%  { transform:translate3d(0,0,0) scale3d(0.989,1.016,1); }
    42%  { transform:translate3d(0,0,0) scale3d(1.013,0.991,1); }
    56%  { transform:translate3d(0,0,0) scale3d(0.992,1.013,1); }
    70%  { transform:translate3d(0,0,0) scale3d(1.011,0.993,1); }
    84%  { transform:translate3d(0,0,0) scale3d(0.993,1.011,1); }
    100% { transform:translate3d(0,0,0) scale3d(1,1,1); }
  }
}

@media (hover:hover){
  .osr-ranking-wrap.is-jelly-ready .game-card:hover{
    animation-play-state:paused;
    transform:translateY(-5px) scale(1.02);
  }
}
@media (hover:none){
  .osr-ranking-wrap.is-jelly-ready .game-card:hover{
    transform:translate3d(0,0,0) scale3d(1,1,1);
  }
}
@media (prefers-reduced-motion: reduce){
  .btn-game,.seo-icon-float,.osr-balloon{animation:none !important;}
  .osr-ranking-wrap.is-jelly-ready .game-card{
    animation:none !important;
    transform:translate3d(0,0,0) scale(1) !important;
  }
}

/* Hide rating stars under logo/title */
.osr-ranking-wrap .game-card .text-yellow-300.text-xl.mt-1{
  display:none !important;
}
/* =========================================
   TUNE-UP v2
   - Desktop: remove plus signs, move pills closer to CTA, give bonus more space
   - Mobile: slightly bigger logo
   ========================================= */

/* ---------- Desktop layout rebalance ---------- */
@media (min-width:768px){
  /* більше місця блоку бонусу, менше — блоку пунктів */
  .osr-ranking-wrap .game-card .card-inner{
    grid-template-columns:minmax(110px,150px) minmax(360px,1.45fr) minmax(170px,.75fr) minmax(150px,200px) !important;
    gap:12px !important;
  }

  /* бонус ширше і не стискається занадто */
  .osr-ranking-wrap .game-card .card-inner > .flex:first-child > :nth-child(2){
    min-width:0;
    padding-right:4px;
  }

  /* пункти ближче до кнопки */
  .osr-ranking-wrap .game-card .divider + .flex,
  .osr-ranking-wrap .game-card .divider + div.flex{
    justify-content:flex-end !important;
    align-content:center !important;
    gap:8px !important;
    margin-right:-2px !important;
  }

  /* компактніші пункти */
  .osr-ranking-wrap .game-card .divider + .flex > .info-bubble,
  .osr-ranking-wrap .game-card .divider + div.flex > .info-bubble{
    font-size:.82rem !important;
    padding:6px 10px !important;
    min-height:30px !important;
  }
}

/* ---------- Remove plus signs between pills (desktop + mobile) ---------- */
.osr-ranking-wrap .game-card .divider + .flex > .info-bubble + .info-bubble::before,
.osr-ranking-wrap .game-card .divider + div.flex > .info-bubble + .info-bubble::before{
  content:none !important;
  display:none !important;
}

/* ---------- Mobile: logo slightly bigger ---------- */
@media (max-width:767px){
  .osr-ranking-wrap .osr-brand-logo{
    max-width:84px !important;
    max-height:50px !important;
  }

  .osr-ranking-wrap .osr-logo-wrap{
    min-height:50px !important;
  }

  /* трошки більша колонка під лого */
  .osr-ranking-wrap .game-card .card-inner > .flex:first-child{
    grid-template-columns:74px minmax(0,1fr) !important;
    gap:10px !important;
  }
}
/* =========================================
   TUNE-UP v3
   - Desktop pills: equal width, right-aligned text, bigger font, wrap text
   - Mobile rank badges: 2x smaller
   ========================================= */

/* ---------- Desktop pills ---------- */
@media (min-width:768px){
  .osr-ranking-wrap .game-card .divider + .flex,
  .osr-ranking-wrap .game-card .divider + div.flex{
    justify-content:flex-end !important;
    gap:10px !important;
  }

  .osr-ranking-wrap .game-card .divider + .flex > .info-bubble,
  .osr-ranking-wrap .game-card .divider + div.flex > .info-bubble{
    /* однакова ширина для всіх пунктів */
    width:220px !important;
    min-height:42px !important;

    /* текст більший + перенос */
    font-size:.94rem !important;
    line-height:1.25 !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;

    /* вирівнювання по правій стороні */
    text-align:left !important;
    justify-content:flex-end !important;
    align-items:center !important;

    padding:8px 12px !important;
    border-radius:16px !important;
  }
}

/* ---------- Mobile rank badge: 2x smaller ---------- */
@media (max-width:767px){
  .osr-ranking-wrap .game-card .rank-star{
    width:30px !important;
    height:30px !important;
    border-width:2px !important;
    border-radius:9px !important;
    font-size:12px !important;
    line-height:1 !important;

    /* зберігаємо позицію в куті */
    left:-7px !important;
    top:-7px !important;
    transform:rotate(-10deg) !important;
  }
}
/* Brand name under logo */
.osr-brand-name-under-logo{
  margin-top:8px;
  color:#fff;
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:900;
  font-size:.92rem;
  line-height:1.1;
  letter-spacing:.2px;
  text-transform:uppercase;
  text-align:center;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  max-width:180px;
  margin-left:auto;
  margin-right:auto;
}

@media (max-width:767px){
  .osr-brand-name-under-logo{
    margin-top:6px;
    font-size:.58rem;
    max-width:130px;
  }
}
/* Дозволяємо кольорові частини тексту всередині пунктів */
.osr-ranking-wrap .game-card .info-bubble span{
  color: inherit;
}

/* Готові акцент-класи */
.osr-ranking-wrap .game-card .info-bubble .txt-green{
  color:#4ade80 !important;
  font-weight:900;
}
.osr-ranking-wrap .game-card .info-bubble .txt-yellow{
  color:#facc15 !important;
  font-weight:900;
}
.osr-ranking-wrap .game-card .info-bubble .txt-orange{
  color:#fb923c !important;
  font-weight:900;
}