dialog{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(10,16,34,.92);
  color: var(--text);
  box-shadow: var(--shadow);
  width: min(520px, calc(100vw - 24px));
}
dialog::backdrop{ background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.authGrid{
  display:grid; grid-template-columns: 1fr; gap:12px;
}
.authTitle{ font-size: 18px; font-weight: 950; margin: 0; }
.hr{ height:1px; background: var(--line); margin: 10px 0; }
.smallLink{ color: var(--mint); font-weight: 900; cursor:pointer; }
.smallLink:hover{ text-decoration: underline; }

#toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 120;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,26,51,.92);
  box-shadow: var(--shadow);
  color: var(--text);
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}
table{ width:100%; border-collapse: collapse; }
tr{ border-bottom: 1px solid rgba(255,255,255,.08); }


/* Compact auth grid used on account.php */
.compactAuth{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:16px;
}
@media (max-width: 900px){
  .compactAuth{
    grid-template-columns: minmax(0,1fr);
  }
}


/* Reserve space for bottom bar */
.page{
  padding-bottom:84px;
}

/* Bottom fixed navigation bar */


.bottomBar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:64px;
  background:#0E1A32;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-around;
  z-index:80;
  box-shadow: 0 -14px 40px rgba(0,0,0,.55);
}

.bottomBar .bottomItem{
  position:relative;
  flex:1;
  text-align:center;
  font-size:11px;
  text-decoration:none;
  color:rgba(234,243,255,.74);
  padding: 10px 0 8px;
}

.bottomBar .bottomItem .icon{ font-size:20px; line-height:1; }
.bottomBar .bottomItem .label{ font-size:11px; display:flex; align-items:center; justify-content:center; gap:4px; }

.bottomBar .bottomItem:hover{ color: var(--mint); }

.bottomBar .bottomItemActive{
  font-weight:900;
  color: var(--mint);
}

.bottomBar .bottomItemActive::before{
  content:"";
  position:absolute;
  left:50%;
  top:4px;
  transform:translateX(-50%);
  width: 36px;
  height: 3px;
  border-radius: 99px;
  background: rgba(92,255,204,.95);
  box-shadow: 0 0 0 3px rgba(92,255,204,.12);
}

.bottomBar .bottomItemActive .icon{ filter:drop-shadow(0 0 8px rgba(92,255,204,.55)); }

/* Message badge */
.badge{
  min-width:16px;
  height:16px;
  border-radius:999px;
  background:#ff3b4f;
  color:#fff;
  font-size:10px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Hide slip entirely when empty */
.slipHidden{
  display:none !important;
}

/* On mobile, keep slip above bottom bar */
@media (max-width: 900px){
  .slip{
    position:fixed;
    left:0;
    right:0;
    bottom:60px;
  }
}


/* Ensure tables don't force horizontal scrolling */
.card table{
  width:100%;
  border-collapse:collapse;
}
.card table th,
.card table td{
  padding:8px 6px;
  font-size:12px;
}

/* Small screens: tighten padding + table layout to avoid overflow */
@media (max-width: 480px){
  .container{
    padding:0 10px;
  }
  .card table{
    table-layout:fixed;
  }
  .card table th,
  .card table td{
    padding:6px 4px;
    font-size:11px;
    white-space:normal;
    word-wrap:break-word;
  }
}


/* Homepage hero layout */
.heroGrid{
  display:grid;
  grid-template-columns: minmax(0,1.4fr) minmax(260px, 0.9fr);
  gap:18px;
  align-items:stretch;
}
.heroButtons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.heroTicket{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: radial-gradient(circle at top left, rgba(92,255,204,.18), rgba(5,10,24,.98));
  box-shadow: var(--shadow);
  padding:10px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.heroTicket .ticketHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.heroTicket .ticketBody{
  border-radius:14px;
  background: rgba(7,11,20,.85);
  padding:8px 8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
}
.heroTicket .ticketRow{
  display:grid;
  grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) 40px;
  gap:6px;
}
.heroTicket .ticketFooter{
  display:flex;
  justify-content:space-between;
  font-size:12px;
}
.heroTicket .meta{
  font-size:11px;
}
.pill.small{
  padding:4px 8px;
  font-size:10px;
}

/* Stack hero on mobile */
@media (max-width: 720px){
  .heroGrid{
    grid-template-columns:minmax(0,1fr);
  }
}


/* Generic ad slot styling */
.adSlot{
  margin:12px 0;
  padding:10px 12px;
  border-radius:16px;
  border:1px dashed rgba(234,243,255,.28);
  background:rgba(8,14,30,.85);
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.adSlot .label{
  color:rgba(234,243,255,.78);
}
.adSlot .hint{
  font-size:11px;
  text-transform:none;
  color:rgba(234,243,255,.55);
}

/* Rewards layout */
.rewardsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}
.rewardCol h4{
  margin:0 0 4px;
  font-size:15px;
  font-weight:950;
}
.rewardCol .meta{
  font-size:12px;
}
.rewardTiles{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}
.rewardTile{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at top left, rgba(92,255,204,.16), rgba(8,12,24,.95));
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.rewardTile .left{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rewardTile .title{
  font-size:13px;
  font-weight:900;
}
.rewardTile .meta{
  font-size:11px;
  color:rgba(234,243,255,.65);
}
.rewardTile .amount{
  font-size:16px;
  font-weight:950;
}
.rewardTile form{
  margin:0;
}
.rewardTile .btn{
  min-width:92px;
}

/* Stack rewards on mobile */
@media (max-width: 1020px){
  .rewardsGrid{
    grid-template-columns: minmax(0,1fr);
  }
}


@media (max-width: 900px){
  .bottomItemRewards{
    display:none;
  }
}


.homeHow{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:16px;
}
.rewardsSummary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:6px;
}
.fixtureList{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.fixtureRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(5,10,24,.96);
}
.fixtureRow .teams{
  min-width:0;
}
.fixtureRow .teams .home,
.fixtureRow .teams .away{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fixtureRow .teams .away{
  opacity:.80;
}
.fixtureRow .details{
  font-size:11px;
  color:rgba(234,243,255,.70);
  text-align:right;
}
.fixtureRow .cta{
  flex-shrink:0;
}

@media (max-width: 900px){
  .homeHow{
    grid-template-columns:minmax(0,1fr);
  }
  .rewardsSummary{
    grid-template-columns:minmax(0,1fr);
  }
  .fixtureRow{
    flex-direction:column;
    align-items:flex-start;
  }
  .fixtureRow .details{
    text-align:left;
  }
}

/* Leaderboard table */
.leaderboardTable{
  width:100%;
  border-collapse:collapse;
}

.leaderboardTable th,
.leaderboardTable td{
  padding:8px 6px;
  font-size:13px;
}

/* Stack leaderboard rows on small screens */
@media (max-width: 720px){
  .leaderboardTable thead{
    display:none;
  }
  .leaderboardTable tr{
    display:block;
    padding:10px 10px 12px;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .leaderboardTable td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:4px 0;
    font-size:13px;
  }
  .leaderboardTable td[data-label]:before{
    content: attr(data-label);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(234,243,255,.55);
    font-weight:800;
  }
}

/* Header / nav badges */
.navBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  margin-left:8px;
  border-radius:999px;
  background:#ff3b4f;
  color:#fff;
  font-size:11px;
  font-weight:950;
  line-height:1;
}
.pill .navBadge{ background: rgba(2,20,42,.75); color:#fff; }
.mobNav .navBadge{ background: rgba(2,20,42,.75); color:#fff; }