/* V60 Sanal Lig — gece yayın merkezi */
html,
body {
  background-image:
    linear-gradient(180deg, rgba(2,15,31,.16), rgba(2,15,31,.48)),
    url("./backgrounds/webp/sanal-lig-stadium.webp") !important;
  color: #10263a !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  opacity: .22 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  mask-image: linear-gradient(to bottom, #000, transparent 72%) !important;
}

header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5000 !important;
  background: linear-gradient(90deg, rgba(4,21,41,.97), rgba(10,45,72,.95), rgba(4,21,41,.97)) !important;
  border-bottom: 1px solid rgba(239,205,119,.44) !important;
  box-shadow: 0 16px 44px rgba(0,10,25,.36), inset 0 -2px 0 rgba(215,170,75,.16) !important;
}

header .head {
  max-width: 1660px !important;
  min-height: 84px !important;
  padding: 12px 22px !important;
}

header .title h1 {
  color: #fff !important;
  font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important;
  font-size: clamp(26px, 2.1vw, 38px) !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
  text-transform: uppercase !important;
}

header .title p { color: #b9c7d3 !important; font-size: 11px !important; letter-spacing: .035em !important; }
header .pill,
header .languageChoice,
header .howToHeaderBtn {
  background: rgba(255,255,255,.07) !important;
  color: #f6f2e7 !important;
  border: 1px solid rgba(240,208,132,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

header .howToHeaderBtn::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: url("./icons/info.svg") center/contain no-repeat;
}

.layout {
  width: min(1660px, calc(100% - 30px)) !important;
  max-width: 1660px !important;
  gap: 18px !important;
  padding: 22px 0 44px !important;
}

.card,
.realMatchesPage .card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    linear-gradient(145deg, rgba(248,247,241,.90), rgba(214,224,224,.84)) !important;
  border: 1px solid rgba(255,255,255,.52) !important;
  border-radius: 25px !important;
  box-shadow: var(--v60-shadow-card), inset 0 1px 0 rgba(255,255,255,.62) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background-image: radial-gradient(circle at 1px 1px, rgba(11,42,66,.18) 1px, transparent 0);
  background-size: 20px 20px;
  mask-image: linear-gradient(135deg,#000,transparent 68%);
}

.cardTitle {
  min-height: 60px !important;
  padding: 14px 18px !important;
  background: linear-gradient(100deg, rgba(5,28,51,.98), rgba(14,58,85,.96)) !important;
  border-bottom: 1px solid rgba(231,194,104,.50) !important;
  box-shadow: inset 0 -2px 0 rgba(215,170,75,.13) !important;
}
.cardTitle h2 {
  color: #fff !important;
  font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important;
  font-size: 19px !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}
.cardTitle .tag {
  background: rgba(225,187,94,.13) !important;
  color: #f2d78e !important;
  border-color: rgba(225,187,94,.30) !important;
}

main.layout > section.card:first-child {
  border-color: rgba(236,203,122,.58) !important;
}

.v59-sanal-showcase {
  min-height: 222px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(229,193,105,.40) !important;
  background:
    radial-gradient(circle at 70% 18%, rgba(224,183,83,.22), transparent 28%),
    linear-gradient(135deg, rgba(5,28,50,.98), rgba(12,69,91,.94)) !important;
  box-shadow: 0 18px 36px rgba(3,20,36,.26), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.v59-sanal-showcase::before {
  inset: 13px !important;
  border-color: rgba(240,210,139,.18) !important;
}
.v59-sanal-showcase img {
  display: block !important;
  height: 212px !important;
  width: min(100%, 650px) !important;
  filter: drop-shadow(0 24px 20px rgba(0,10,22,.52)) saturate(1.08) !important;
}

.onlineRoomPanel,
.notice,
.slipSummary,
.globalLeaderboard,
.liveHeader,
.eventFeed,
.player,
.fixture,
.scoreRow,
.kpis > div,
.realWalletBox {
  background: rgba(246,246,239,.72) !important;
  color: #102c42 !important;
  border: 1px solid rgba(116,143,151,.52) !important;
  box-shadow: 0 9px 22px rgba(6,28,44,.08), inset 0 1px 0 rgba(255,255,255,.55) !important;
}

.fixture,
.player,
.scoreRow { border-radius: 16px !important; }

.teamLogo,
.pickLogo,
.wcFlagDisc {
  border-radius: 50% !important;
  background: linear-gradient(145deg,#fff,#d6dedd) !important;
  border: 2px solid #d4ad55 !important;
  box-shadow:
    0 0 0 3px rgba(7,34,57,.88),
    0 0 0 5px rgba(232,199,119,.65),
    0 8px 18px rgba(4,24,39,.22) !important;
  overflow: hidden !important;
}
.teamLogo img,
.pickLogo img { border-radius: 50% !important; object-fit: contain !important; }

input,
select,
textarea,
.field input,
.field select,
.stakeField input {
  min-height: 46px !important;
  background: rgba(250,249,243,.92) !important;
  color: #102c42 !important;
  border: 1px solid #9eb0b4 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 5px rgba(5,31,49,.06) !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #b58933 !important;
  box-shadow: 0 0 0 4px rgba(214,171,77,.18) !important;
}

button:not(.languageChoice):not(.arrow),
.activeTab {
  min-height: 44px !important;
  background: linear-gradient(180deg,#173d5e,#0a2845) !important;
  color: #fff !important;
  border: 1px solid rgba(225,188,96,.45) !important;
  box-shadow: 0 10px 22px rgba(3,24,41,.19), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
button.good,
.good {
  background: linear-gradient(180deg,#2c8a67,#1b654d) !important;
  border-color: rgba(160,220,191,.40) !important;
}
button.warn,
.warn {
  background: linear-gradient(180deg,#f0d58c,#c99a3d) !important;
  color: #102943 !important;
  border-color: #f3dc9f !important;
}
button.secondary,
.secondary {
  background: rgba(221,226,222,.88) !important;
  color: #15344d !important;
  border-color: #a7b6b8 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
}

.odd {
  background: rgba(242,243,237,.90) !important;
  color: #132f46 !important;
  border-color: #aab9bb !important;
  box-shadow: 0 5px 12px rgba(5,28,44,.06) !important;
}
.odd.selected {
  background: linear-gradient(180deg,#d8b15b,#b8862b) !important;
  color: #10263d !important;
  border-color: #efd78f !important;
  box-shadow: 0 9px 18px rgba(132,91,20,.22) !important;
}
.clock {
  background: radial-gradient(circle at 35% 25%,#1c5375,#061d36 72%) !important;
  color: #f4d27c !important;
  border: 1px solid rgba(235,203,124,.50) !important;
}
.progress i { background: linear-gradient(90deg,#41c7d2,#e3b54f) !important; }

@media (max-width: 800px) {
  body { background-position: 48% center !important; }
  .layout { width: calc(100% - 14px) !important; padding-top: 10px !important; }
  header .head { min-height: 70px !important; padding: 9px 11px !important; }
  .v59-sanal-showcase { min-height: 150px !important; }
  .v59-sanal-showcase img { height: 144px !important; }
}