/* VOID R16 — CANLI ODALAR
   Tasarım katmanı: canlı veri / SSE / skor / katıl akışını değiştirmez.
   Bu dosya diğer site stillerinden SONRA yüklenmelidir. */

.live-rooms-section {
  margin: 0 8px 20px !important;
}

.live-rooms-section .live-rooms {
  position: relative !important;
  overflow: hidden !important;
  padding: 16px 16px 18px !important;
  border: 1px solid color-mix(in srgb, var(--void-primary) 38%, rgba(88, 112, 137, .24)) !important;
  border-radius: 13px !important;
  background:
    radial-gradient(90% 130% at 50% -65%, color-mix(in srgb, var(--void-primary) 8%, transparent), transparent 68%),
    linear-gradient(180deg, rgba(7, 17, 28, .985), rgba(4, 12, 20, .995)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 14px 38px rgba(0,0,0,.16),
    0 0 22px color-mix(in srgb, var(--void-primary) 8%, transparent) !important;
}

.live-rooms-section .live-rooms::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,.012), transparent 32%, transparent 76%, rgba(255,255,255,.008));
}

.live-rooms-section .live-rooms .panel-head {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 2px 14px !important;
}

.live-rooms-section .live-rooms .section-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 7px !important;
}

.live-rooms-section .live-rooms .section-title h2 {
  margin: 0 !important;
  color: #f5f7fa !important;
  font-size: 19px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
}

.live-rooms-section .live-rooms .section-title span {
  display: block !important;
  width: 27px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--void-primary) !important;
  box-shadow: 0 0 9px color-mix(in srgb, var(--void-primary) 35%, transparent) !important;
}

.live-rooms-section .live-rooms-all-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: 1px !important;
  color: #aeb9c6 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: color .16s ease, transform .16s ease !important;
}

.live-rooms-section .live-rooms-all-link:hover { color: #fff !important; }
.live-rooms-section .live-rooms-all-link:hover span { transform: translateX(3px) !important; }

.live-rooms-section .live-rooms-grid {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 13px !important;
}

.live-rooms-section .live-room-card {
  --room-accent: color-mix(in srgb, var(--void-primary) 20%, rgba(72, 95, 119, .42));
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 306px !important;
  padding: 13px 14px 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--room-accent) !important;
  border-radius: 11px !important;
  background:
    radial-gradient(82% 68% at 50% 0%, color-mix(in srgb, var(--room-accent) 9%, transparent), transparent 72%),
    linear-gradient(155deg, rgba(12, 23, 34, .99), rgba(4, 13, 21, .997)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 10px 24px rgba(0,0,0,.16) !important;
  opacity: 1 !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.live-rooms-section .live-room-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 28px rgba(0,0,0,.22) !important;
}

.live-rooms-section .live-room-card[data-status='waiting'],
.live-rooms-section .live-room-card[data-status='warmup'] { --room-accent: rgba(223, 151, 19, .72); }
.live-rooms-section .live-room-card[data-status='live'] { --room-accent: rgba(213, 65, 105, .62); }
.live-rooms-section .live-room-card[data-status='penalty'] { --room-accent: rgba(170, 78, 220, .64); }
.live-rooms-section .live-room-card[data-status='offline'] {
  --room-accent: color-mix(in srgb, var(--void-primary) 12%, rgba(72, 96, 121, .37));
}

.live-rooms-section .live-room-card__main {
  order: 1 !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.live-rooms-section .live-room-card__head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 29px !important;
  padding: 0 !important;
  border: 0 !important;
}

.live-rooms-section .live-room-card__name {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #aebac8 !important;
  font-family: Manrope, Inter, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  letter-spacing: .035em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.live-rooms-section .live-room-card__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 24px !important;
  padding: 5px 9px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(104, 124, 145, .18) !important;
  background: rgba(24, 37, 50, .74) !important;
  color: #c9d3dd !important;
  font-size: 8.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  box-shadow: none !important;
}

.live-rooms-section .live-room-card[data-status='waiting'] .live-room-card__badge,
.live-rooms-section .live-room-card[data-status='warmup'] .live-room-card__badge {
  border-color: rgba(225, 151, 11, .34) !important;
  background: rgba(75, 49, 7, .31) !important;
  color: #ffbc17 !important;
}

.live-rooms-section .live-room-card[data-status='live'] .live-room-card__badge {
  border-color: rgba(230, 54, 106, .38) !important;
  background: rgba(78, 11, 34, .28) !important;
  color: #ff4a84 !important;
}

.live-rooms-section .live-room-card[data-status='penalty'] .live-room-card__badge {
  border-color: rgba(187, 74, 236, .4) !important;
  background: rgba(61, 20, 78, .3) !important;
  color: #d786ff !important;
}

.live-rooms-section .live-room-card__badge-dot {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 0 0 8px currentColor !important;
  animation: voidRoomStatusPulse 1.25s ease-in-out infinite !important;
}
.live-rooms-section .live-room-card__badge-dot[hidden] { display: none !important; }

@keyframes voidRoomStatusPulse {
  0%,100% { opacity: .62; transform: scale(.82); box-shadow: 0 0 4px currentColor; }
  50% { opacity: 1; transform: scale(1.08); box-shadow: 0 0 10px currentColor; }
}

.live-rooms-section .live-room-card__top-ping {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 48px !important;
  color: #12df87 !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}
.live-rooms-section .live-room-card__top-ping::before {
  content: "▂▄▆█" !important;
  margin-right: 5px !important;
  color: currentColor !important;
  font-size: 7px !important;
  letter-spacing: -1.25px !important;
}
.live-rooms-section .live-room-card__top-ping[data-ping-tone='unknown'] {
  color: #8796a6 !important;
}
.live-rooms-section .live-room-card__top-ping[data-ping-tone='unknown']::before {
  display: none !important;
}
.live-rooms-section .live-room-card__top-ping[data-ping-tone='bad'] { color:#ff5d6d !important; }
.live-rooms-section .live-room-card__top-ping[data-ping-tone='offline'] { color:#9ba8b6 !important; }
.live-rooms-section .live-room-card__top-ping[data-ping-tone='offline']::before { display:none !important; }

.live-rooms-section .live-room-card__match {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(84px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 121px !important;
  padding: 11px 0 10px !important;
}

.live-rooms-section .live-room-card__team,
.live-rooms-section .live-room-card__team--away {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  text-align: center !important;
}

.live-rooms-section .live-room-card__logo {
  width: 76px !important;
  height: 76px !important;
  flex: 0 0 76px !important;
  max-width: 76px !important;
  max-height: 76px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  object-position: center !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 9px rgba(0,0,0,.34)) !important;
  transform: scale(var(--team-logo-scale, 1)) !important;
  transform-origin: center center !important;
}

/* Monaco arması dar olduğu için aynı kutuda küçük görünür.
   Kutuyu değiştirmeden görsel alanını diğer logolarla eşitler. */
.live-rooms-section .live-room-card__logo[data-team-key='monaco'],
.live-rooms-section .live-room-card__logo[data-team-key='as monaco'],
.live-rooms-section .live-room-card__logo[data-team-key='as monaco fc'] {
  --team-logo-scale: 1.16;
}

.live-rooms-section .live-room-card__logo.is-placeholder {
  width: 66px !important;
  height: 66px !important;
  flex-basis: 66px !important;
  max-width: 66px !important;
  max-height: 66px !important;
  padding: 5px !important;
  opacity: .62 !important;
  filter: grayscale(1) brightness(.72) opacity(.7) !important;
}

.live-rooms-section .live-room-card.has-hidden-team-logos .live-room-card__logo { visibility:hidden !important; }

.live-rooms-section .live-room-card__team-name {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #f0f3f7 !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.live-rooms-section .live-room-card[data-status='offline'] .live-room-card__team-name { color:#8796a6 !important; }

.live-rooms-section .live-room-card__score-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 84px !important;
}

.live-rooms-section .live-room-card__score {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border-inline: 1px solid rgba(131, 152, 173, .12) !important;
  color: #f7f8fb !important;
  font-family: Manrope, Inter, sans-serif !important;
  font-size: clamp(28px, 2vw, 35px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
}
.live-rooms-section .live-room-card__score.is-empty { color:#aab5c1 !important; font-size:28px !important; }
.live-rooms-section .live-room-card__minute-inline { display:none !important; }

.live-rooms-section .live-room-card__penalty {
  margin: -3px auto 6px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 9px !important;
}

.live-rooms-section .live-room-card__stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  min-height: 43px !important;
  margin: 0 !important;
  padding: 8px 7px !important;
  border-top: 1px solid rgba(123, 145, 166, .14) !important;
  border-bottom: 0 !important;
}
.live-rooms-section .live-room-card__stats:has([data-room-minute-wrap][hidden]) { grid-template-columns:1fr !important; }

.live-rooms-section .live-room-card__stat {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding: 0 7px !important;
  color: #dde5ed !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
.live-rooms-section .live-room-card__stat + .live-room-card__stat { border-left:1px solid rgba(123,145,166,.14) !important; }
.live-rooms-section .live-room-card__stat[hidden] { display:none !important; }
.live-rooms-section .live-room-card__stat-icon { font-size:11.5px !important; opacity:.58 !important; filter:grayscale(1) !important; }
.live-rooms-section .live-room-card__stat--minute { color:#cbd4de !important; }
.live-rooms-section .live-room-card__stat--minute [data-room-minute] { font-size:11.5px !important; font-weight:850 !important; }

.live-rooms-section .live-room-card__goal {
  order: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  align-items: center !important;
  gap: 8px 12px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 7px 1px 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(123,145,166,.09) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.live-rooms-section .live-room-card__goal[hidden] { display:none !important; }
.live-rooms-section .live-room-card__goal-label,
.live-rooms-section .live-room-card__goal-minute,
.live-rooms-section .live-room-card__goal-avatar,
.live-rooms-section .live-room-card__goal-deco,
.live-rooms-section .live-room-card__goal-empty { display:none !important; }
.live-rooms-section .live-room-card__goal-body,
.live-rooms-section .live-room-card__goal-text { display:contents !important; }
.live-rooms-section .live-room-card__goal-scorer,
.live-rooms-section .live-room-card__goal-assist {
  margin: 0 !important;
  overflow: hidden !important;
  color: #dce3eb !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.live-rooms-section .live-room-card__goal-scorer { text-align:left !important; }
.live-rooms-section .live-room-card__goal-assist { text-align:right !important; }
.live-rooms-section .live-room-card__goal.is-empty .live-room-card__goal-scorer,
.live-rooms-section .live-room-card__goal.is-empty .live-room-card__goal-assist { color:#788797 !important; font-weight:650 !important; }

.live-rooms-section .live-room-card__aside {
  order: 3 !important;
  display:block !important;
  margin-top: auto !important;
  padding: 8px 0 0 !important;
}

.live-rooms-section .live-room-card__join {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:42px !important;
  padding:8px 14px !important;
  border:1px solid rgba(181,72,151,.42) !important;
  border-radius:6px !important;
  background:linear-gradient(100deg,#ff7623 0%,#de5275 49%,#9929ba 100%) !important;
  color:#fff !important;
  font-size:10.5px !important;
  font-weight:900 !important;
  letter-spacing:.035em !important;
  box-shadow:0 7px 18px rgba(103,27,98,.16) !important;
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease !important;
}
.live-rooms-section .live-room-card__join:hover:not(.is-disabled) {
  transform:translateY(-1px) !important;
  filter:brightness(1.08) saturate(1.05) !important;
  box-shadow:0 10px 23px rgba(128,36,121,.26) !important;
}
.live-rooms-section .live-room-card__join.is-disabled,
.live-rooms-section .live-room-card__join[aria-disabled='true'],
.live-rooms-section .live-room-card__join[data-join-state='offline'],
.live-rooms-section .live-room-card__join[data-join-state='full'],
.live-rooms-section .live-room-card__join[data-join-state='disabled'] {
  border-color:rgba(103,123,143,.29) !important;
  background:linear-gradient(180deg,rgba(22,35,48,.82),rgba(15,26,37,.91)) !important;
  color:#aab6c3 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important;
  opacity:1 !important;
}

@media (max-width: 1320px) {
  .live-rooms-section .live-rooms-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .live-rooms-section .live-room-card { min-height:300px !important; }
}

@media (max-width: 720px) {
  .live-rooms-section { margin-inline:6px !important; }
  .live-rooms-section .live-rooms { padding:14px 11px !important; }
  .live-rooms-section .live-rooms-grid { grid-template-columns:1fr !important; gap:11px !important; }
  .live-rooms-section .live-room-card { min-height:296px !important; padding:13px !important; }
  .live-rooms-section .live-room-card__logo { width:72px !important; height:72px !important; flex-basis:72px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .live-rooms-section .live-room-card__badge-dot { animation:none !important; }
  .live-rooms-section .live-room-card,
  .live-rooms-section .live-room-card__join { transition:none !important; }
}