.streak-page{
  padding:0 0 24px;
}

.streak-header-shell,
.streak-section-shell{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  margin-bottom:24px;
  box-shadow:var(--shadow);
}

.streak-header-shell{
  padding-top:20px;
}

.streak-title-row{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:8px;
}

.streak-title-chip{
  width:82px;
  height:82px;
  flex:0 0 82px;
}

.streak-header-shell h1{
  margin:0;
  font-size:1.5em;
  font-weight:900;
  line-height:1.1;
  color:var(--gold);
}

.streak-accent-line{
  height:4px;
  margin-top:14px;
  width:100%;
  background:linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold) 35%,
    rgba(255, 215, 0, 0.4) 65%,
    transparent 100%
  );
}

.streak-header-shell .page-kicker{
  margin-top:14px;
}

.streak-definition-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}

.streak-definition-pill{
  border:1px solid rgba(255,184,28,.18);
  border-radius:14px;
  padding:14px 16px;
  background:
    radial-gradient(circle at top left, rgba(255,184,28,.12), transparent 40%),
    linear-gradient(135deg, rgba(22,28,38,.98), rgba(14,18,24,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 18px rgba(0,0,0,.16);
}

.streak-definition-pill strong{
  display:block;
  color:#ffe09a;
  margin-bottom:6px;
  font-size:.95rem;
}

.streak-definition-pill span{
  color:var(--muted);
  line-height:1.45;
  font-size:.9rem;
}

.streak-definition-pill:nth-child(1){
  border-color:rgba(239,68,68,.26);
  background:
    radial-gradient(circle at top right, rgba(239,68,68,.14), transparent 30%),
    linear-gradient(135deg, rgba(58,20,26,.98), rgba(16,18,24,.99));
}

.streak-definition-pill:nth-child(1) strong{
  color:#ffb4b4;
}

.streak-definition-pill:nth-child(1) span{
  color:var(--muted);
}

.streak-definition-pill:nth-child(2){
  border-color:rgba(59,130,246,.26);
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.14), transparent 30%),
    linear-gradient(135deg, rgba(18,38,68,.98), rgba(16,18,24,.99));
}

.streak-definition-pill:nth-child(2) strong{
  color:#b9d8ff;
}

.streak-definition-pill:nth-child(2) span{
  color:var(--muted);
}

.streak-definition-pill:nth-child(3){
  border-color:rgba(255,184,28,.26);
  background:
    radial-gradient(circle at top right, rgba(255,184,28,.14), transparent 30%),
    linear-gradient(135deg, rgba(56,42,14,.98), rgba(16,18,24,.99));
}

.streak-definition-pill:nth-child(3) strong{
  color:#ffe09a;
}

.streak-definition-pill:nth-child(3) span{
  color:var(--muted);
}

.streak-two-up{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px;
  margin-bottom:24px;
}

.streak-shell-hot .section-head,
.streak-shell-cold .section-head{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:14px;
}

.streak-title-hot,
.streak-title-cold{
  margin:0;
  font-size:1.08rem;
  font-weight:900;
  letter-spacing:.02em;
}

.streak-title-hot{
  color:#ff6b6b;
  text-shadow:0 0 14px rgba(239,68,68,.16);
}

.streak-title-cold{
  color:#93c5fd;
  text-shadow:0 0 14px rgba(59,130,246,.16);
}

.streak-shell-hot{
  border-color:rgba(239,68,68,.24);
  background:
    radial-gradient(circle at top right, rgba(239,68,68,.12), transparent 30%),
    linear-gradient(135deg, rgba(44,18,24,.98), rgba(15,18,24,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 22px rgba(0,0,0,.18),
    0 0 18px rgba(239,68,68,.08);
}

.streak-shell-cold{
  border-color:rgba(59,130,246,.24);
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 30%),
    linear-gradient(135deg, rgba(18,34,60,.98), rgba(15,18,24,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 22px rgba(0,0,0,.18),
    0 0 18px rgba(59,130,246,.08);
}

.streak-leaderboard{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.streak-row{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:36px 54px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px 14px 18px;
  background:
    radial-gradient(circle at top right, rgba(255,184,28,.08), transparent 28%),
    linear-gradient(135deg, rgba(18,24,34,.98), rgba(11,15,22,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 18px rgba(0,0,0,.16);
}

.streak-row::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:linear-gradient(180deg, rgba(255,184,28,.95), rgba(168,85,247,.78));
}

#active-cash-board .streak-row,
#top-cash-board .streak-row{
  border-color:rgba(239,68,68,.26);
  background:
    radial-gradient(circle at top right, rgba(239,68,68,.14), transparent 30%),
    linear-gradient(135deg, rgba(58,20,26,.98), rgba(16,18,24,.99));
}

#active-cash-board .streak-row::before,
#top-cash-board .streak-row::before{
  background:linear-gradient(180deg, rgba(252,165,165,.96), rgba(239,68,68,.78));
}

#active-drought-board .streak-row,
#top-drought-board .streak-row{
  border-color:rgba(59,130,246,.26);
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.14), transparent 30%),
    linear-gradient(135deg, rgba(18,38,68,.98), rgba(16,18,24,.99));
}

#active-drought-board .streak-row::before,
#top-drought-board .streak-row::before{
  background:linear-gradient(180deg, rgba(147,197,253,.96), rgba(59,130,246,.78));
}

.streak-rank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:999px;
  background:rgba(255,184,28,.12);
  border:1px solid rgba(255,184,28,.24);
  color:#fff0bf;
  font-weight:900;
}

.streak-row .player-avatar.table,
.streak-row .player-avatar-fallback.table,
.streak-player-summary .player-avatar.table,
.streak-player-summary .player-avatar-fallback.table{
  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;
  border-width:2px;
}

.streak-row-main{
  min-width:0;
}

.streak-row-player{
  color:#fff;
  font-size:1rem;
  font-weight:900;
  line-height:1.1;
  margin-bottom:4px;
}

.streak-row-meta{
  color:var(--muted);
  font-size:.86rem;
  line-height:1.4;
}

#active-cash-board .streak-row-player,
#top-cash-board .streak-row-player{
  color:#ffb4b4;
}

#active-cash-board .streak-row-meta,
#top-cash-board .streak-row-meta{
  color:#ffd7d7;
}

#active-drought-board .streak-row-player,
#top-drought-board .streak-row-player{
  color:#b9d8ff;
}

#active-drought-board .streak-row-meta,
#top-drought-board .streak-row-meta{
  color:#d8e8ff;
}

.streak-row-length{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,184,28,.22);
  background:
    radial-gradient(circle at top left, rgba(255,184,28,.14), transparent 50%),
    linear-gradient(135deg, rgba(60,42,12,.96), rgba(28,22,14,.98));
  color:#fff3d1;
  font-weight:900;
  font-size:.84rem;
  white-space:nowrap;
}

#active-cash-board .streak-row-length,
#top-cash-board .streak-row-length{
  border:1px solid rgba(239,68,68,.24);
  background:
    radial-gradient(circle at top left, rgba(239,68,68,.16), transparent 50%),
    linear-gradient(135deg, rgba(72,22,28,.96), rgba(30,18,20,.98));
  color:#ffe1e1;
}

#active-drought-board .streak-row-length,
#top-drought-board .streak-row-length{
  border:1px solid rgba(59,130,246,.24);
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.16), transparent 50%),
    linear-gradient(135deg, rgba(18,42,78,.96), rgba(14,22,32,.98));
  color:#e6f0ff;
}

.streak-empty{
  border:1px dashed rgba(255,255,255,.14);
  border-radius:14px;
  padding:18px;
  color:var(--muted);
  text-align:center;
  background:rgba(255,255,255,.02);
}

.streak-lookup-bar{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.streak-select-label{
  color:#ffe09a;
  font-weight:900;
  font-size:.92rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.streak-player-select{
  min-width:280px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid rgba(255,184,28,.18);
  background:
    radial-gradient(circle at top left, rgba(255,184,28,.10), transparent 45%),
    linear-gradient(135deg, rgba(22,28,38,.98), rgba(14,18,24,.99));
  color:#fff;
  font-size:.95rem;
  font-weight:700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 16px rgba(0,0,0,.14);
}

.streak-player-detail{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.streak-player-summary{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:14px;
  border:1px solid rgba(255,184,28,.18);
  background:
    radial-gradient(circle at top left, rgba(255,184,28,.12), transparent 38%),
    linear-gradient(135deg, rgba(20,26,36,.98), rgba(12,16,22,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 18px rgba(0,0,0,.16);
}

.streak-player-name{
  color:#fff;
  font-size:1.18rem;
  font-weight:900;
  line-height:1.1;
  margin-bottom:4px;
}

.streak-player-sub{
  color:var(--muted);
  font-size:.9rem;
}

.streak-played-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.22);
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.14), transparent 50%),
    linear-gradient(135deg, rgba(18,42,78,.96), rgba(14,22,32,.98));
  color:#e8f1ff;
  font-weight:900;
  font-size:.82rem;
  white-space:nowrap;
}

.streak-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}

.streak-detail-card{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(255,184,28,.08), transparent 28%),
    linear-gradient(135deg, rgba(18,24,34,.98), rgba(11,15,22,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 18px rgba(0,0,0,.16);
  padding:18px;
}

.streak-detail-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:linear-gradient(180deg, rgba(255,184,28,.95), rgba(168,85,247,.78));
}

.streak-detail-card h4{
  margin:0 0 10px;
  color:#ffe09a;
  font-size:.96rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.streak-detail-card-hot{
  border-color:rgba(239,68,68,.26);
  background:
    radial-gradient(circle at top right, rgba(239,68,68,.14), transparent 30%),
    linear-gradient(135deg, rgba(58,20,26,.98), rgba(16,18,24,.99));
}

.streak-detail-card-hot::before{
  background:linear-gradient(180deg, rgba(252,165,165,.96), rgba(239,68,68,.78));
}

.streak-detail-card-hot h4{
  color:#ffb4b4;
}

.streak-detail-card-cold{
  border-color:rgba(59,130,246,.26);
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.14), transparent 30%),
    linear-gradient(135deg, rgba(18,38,68,.98), rgba(16,18,24,.99));
}

.streak-detail-card-cold::before{
  background:linear-gradient(180deg, rgba(147,197,253,.96), rgba(59,130,246,.78));
}

.streak-detail-card-cold h4{
  color:#b9d8ff;
}

.streak-detail-pill-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.streak-detail-length,
.streak-detail-active{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:900;
}

.streak-detail-length{
  border:1px solid rgba(255,184,28,.22);
  background:
    radial-gradient(circle at top left, rgba(255,184,28,.14), transparent 50%),
    linear-gradient(135deg, rgba(60,42,12,.96), rgba(28,22,14,.98));
  color:#fff3d1;
}

.streak-detail-active{
  border:1px solid rgba(61,220,132,.28);
  background:
    radial-gradient(circle at top left, rgba(61,220,132,.14), transparent 50%),
    linear-gradient(135deg, rgba(16,62,34,.96), rgba(14,24,18,.98));
  color:#dffff0;
}

.streak-detail-card-hot .streak-detail-length{
  border:1px solid rgba(239,68,68,.26);
  background:
    radial-gradient(circle at top left, rgba(239,68,68,.16), transparent 50%),
    linear-gradient(135deg, rgba(72,22,28,.96), rgba(30,18,20,.98));
  color:#ffe1e1;
}

.streak-detail-card-cold .streak-detail-length{
  border:1px solid rgba(59,130,246,.26);
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.16), transparent 50%),
    linear-gradient(135deg, rgba(18,42,78,.96), rgba(14,22,32,.98));
  color:#e6f0ff;
}

.streak-detail-line{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.5;
  margin-top:6px;
}

.streak-detail-line strong{
  color:#ffe09a;
}

@media (max-width:980px){
  .streak-definition-grid,
  .streak-two-up,
  .streak-detail-grid{
    grid-template-columns:1fr;
  }

  .streak-player-summary{
    grid-template-columns:56px minmax(0,1fr);
  }

  .streak-played-pill{
    grid-column:1 / -1;
    justify-self:start;
  }
}

@media (max-width:720px){
  .streak-title-row{
    align-items:flex-start;
    gap:14px;
  }

  .streak-title-chip{
    width:64px;
    height:64px;
    flex:0 0 64px;
  }

  .streak-row{
    grid-template-columns:36px 46px minmax(0,1fr);
  }

  .streak-row-length{
    grid-column:1 / -1;
    justify-self:start;
    margin-left:48px;
  }

  .streak-player-select{
    width:100%;
    min-width:0;
  }
}