/* ============================================================
   RVW BEER PONG LEAGUE :: authentic 2009 MySpace energy
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Press+Start+2P&display=swap');

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif;
  font-size: 14px;
  color: #f4f4f4;
  /* tiled "glitter" gradient background + checker overlay */
  background-color: #1a0030;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,0,255,.08) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(-45deg, rgba(0,255,255,.08) 0 10px, transparent 10px 20px),
    radial-gradient(circle at 20% 10%, #3a0066 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, #00334d 0%, transparent 45%),
    linear-gradient(135deg, #160026, #003344);
  background-attachment: fixed;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ctext y='22' font-size='22'%3E%F0%9F%8D%BA%3C/text%3E%3C/svg%3E") 4 4, auto;
}

a { color: #00e5ff; text-decoration: none; }
a:hover { color: #ff4df0; text-decoration: underline; }

/* ===================== TOP BAR ===================== */
#topbar {
  background: linear-gradient(#003a8c, #0066ff);
  border-bottom: 3px ridge #ffcc00;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
}
#topbar .logo { font-weight: 700; color: #fff; font-size: 18px; text-shadow: 1px 1px 0 #000; }
#topbar .logo-dot { color: #ffcc00; }
#topbar .nav-links { color: #cfe8ff; }
#topbar .nav-links a { color: #ffffff; }
#topbar .search-box { margin-left: auto; }
#topbar .search-box input { border: 2px inset #ccc; padding: 2px 4px; }
#topbar .search-box button { background: #ffcc00; border: 2px outset #fff; cursor: pointer; font-weight: 700; }

/* ===================== MARQUEE ===================== */
#welcome-marquee {
  background: #000;
  color: #39ff14;
  font-weight: 700;
  font-size: 18px;
  padding: 6px 0;
  border-bottom: 2px solid #39ff14;
  text-shadow: 0 0 6px #39ff14;
  letter-spacing: 2px;
}

/* ===================== CONTAINER ===================== */
#container {
  max-width: 900px;
  margin: 14px auto;
  background: rgba(0,0,0,.35);
  border: 4px double #ff4df0;
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 0 30px rgba(255,77,240,.4);
}

.profile-header { text-align: center; padding: 8px 0 4px; }
#league-name {
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 26px;
  color: #ffcc00;
  text-shadow: 2px 2px 0 #ff0066, 4px 4px 0 #000;
  line-height: 1.5;
}
.tagline { margin: 6px 0 0; color: #ff4df0; font-weight: 700; font-style: italic; font-size: 15px; }

/* ===================== LAYOUT ===================== */
.layout { display: flex; gap: 12px; margin-top: 10px; align-items: flex-start; }
.col-left { width: 260px; flex: none; }
.col-right { flex: 1; min-width: 0; }

@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .col-left { width: 100%; }
  #league-name { font-size: 18px; }
}

/* shared boxes */
.info-box, .blurb-box, .champ-box, .stats-box, .top8-box, .awards-box,
.history-box, .comments-box, .contact-table, .music-player,
.counter-box, .profile-pic-box, .dash-box, .faceoffs-box, .lore-box {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.25));
  border: 2px solid #00e5ff;
  border-radius: 4px;
  margin-bottom: 12px;
  padding: 10px;
}

h2 {
  margin: 0 0 10px;
  background: linear-gradient(#ff0066, #990033);
  color: #fff;
  font-size: 16px;
  padding: 5px 8px;
  border-radius: 3px;
  text-shadow: 1px 1px 0 #000;
}
h3 {
  margin: 0 0 6px;
  color: #ffcc00;
  font-size: 14px;
  border-bottom: 1px dashed #ffcc00;
  padding-bottom: 3px;
}

/* ===================== PROFILE PIC ===================== */
.profile-pic-box { text-align: center; }
.profile-pic {
  position: relative;
  width: 180px; height: 150px;
  margin: 0 auto;
  background: radial-gradient(circle at 50% 120%, #2b2b2b, #000);
  border: 3px ridge #ffcc00;
  border-radius: 4px;
  overflow: hidden;
}
.pyramid {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 2px;
}
.pyramid span { display: block; }
.pyramid span { height: 0; }
.pyramid > span { width: 0; }
/* draw cups as rows */
.pyramid {
  bottom: 14px;
}
.pyramid span {
  width: 22px; height: 26px;
  background: linear-gradient(#e30613, #7a0008);
  border: 1px solid #ff8a8a;
  border-radius: 0 0 7px 7px;
  box-shadow: inset 0 4px 0 rgba(255,255,255,.3);
}
.pyramid {
  display: grid;
  grid-template-columns: repeat(3, 24px);
  grid-auto-rows: 28px;
  justify-content: center;
}
.pyramid span:nth-child(1) { grid-column: 2; }
.pyramid span:nth-child(2) { grid-column: 1; }
.pyramid span:nth-child(3) { grid-column: 3; }
.pyramid span:nth-child(4) { grid-column: 1; }
.pyramid span:nth-child(5) { grid-column: 2; }
.pyramid span:nth-child(6) { grid-column: 3; }
.pong-ball {
  position: absolute; top: 12px; left: 30%;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #d9d9d9);
  box-shadow: 0 0 8px #fff;
  animation: bounce 1.6s ease-in-out infinite;
}
@keyframes bounce {
  0%,100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(70px) translateX(40px); }
}
.pic-caption { font-style: italic; color: #ffcc00; margin: 8px 0 0; }

/* ===================== ONLINE NOW ===================== */
.online-now {
  text-align: center; font-weight: 700; color: #39ff14;
  margin: 8px 0; font-size: 15px;
}
.blink { animation: blink 1s steps(2,start) infinite; color: #39ff14; }
@keyframes blink { to { visibility: hidden; } }

/* ===================== CONTACT TABLE ===================== */
.contact-table { list-style: none; margin: 0 0 12px; padding: 6px; text-align: center; }
.contact-table li { padding: 4px 0; border-bottom: 1px dotted rgba(255,255,255,.2); }
.contact-table .contact-title { font-weight: 700; color: #ffcc00; border-bottom: 1px solid #ffcc00; }

/* ===================== DETAILS ===================== */
.details { width: 100%; border-collapse: collapse; }
.details td { padding: 3px 4px; vertical-align: top; }
.details td:first-child { color: #00e5ff; font-weight: 700; white-space: nowrap; }
.status-online { color: #39ff14; font-weight: 700; }

/* ===================== MUSIC PLAYER ===================== */
.music-player { text-align: center; }
#song-title { font-weight: 700; color: #ff4df0; margin: 4px 0; }
.player-controls { display: flex; align-items: center; justify-content: center; gap: 10px; }
#music-toggle { background: #39ff14; border: 2px outset #fff; font-weight: 700; cursor: pointer; padding: 3px 8px; }
.eq { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.eq span { width: 4px; background: #00e5ff; animation: eq 0.8s ease-in-out infinite; }
.eq span:nth-child(2){ animation-delay:.2s } .eq span:nth-child(3){ animation-delay:.4s }
.eq span:nth-child(4){ animation-delay:.1s } .eq span:nth-child(5){ animation-delay:.3s }
.eq.paused span { animation-play-state: paused; height: 4px; }
@keyframes eq { 0%,100%{height:4px} 50%{height:22px} }

/* ===================== HIT COUNTER ===================== */
.counter-box { text-align: center; }
.hit-counter {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  background: #000; color: #39ff14;
  border: 2px inset #555; padding: 6px 8px;
  letter-spacing: 4px; font-size: 16px;
}

/* ===================== BLURB ===================== */
.blurb-box p { line-height: 1.6; }

/* ===================== CHAMPIONS ===================== */
.champ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 8px; }
.champ-card {
  background: linear-gradient(#3a2d00, #1a1500);
  border: 2px ridge #ffcc00; border-radius: 4px; padding: 8px; text-align: center;
}
.champ-card .yr { font-family: 'Press Start 2P', monospace; color: #ffcc00; font-size: 13px; }
.champ-card .team { font-weight: 700; color: #ff4df0; margin: 4px 0; }
.champ-card .pl { color: #cfe8ff; font-size: 12px; }
.champ-card .rec { color: #39ff14; font-size: 11px; margin-top: 4px; }

/* ===================== PODIUM YEAR TABS ===================== */
.year-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.year-tab {
  font-family: 'Press Start 2P', monospace; font-size: 12px;
  color: #cfe8ff; background: #002b40; border: 2px outset #00557a;
  border-radius: 4px 4px 0 0; padding: 7px 12px; cursor: pointer;
  text-shadow: 1px 1px 0 #000; transition: background .12s, color .12s, transform .12s;
}
.year-tab:hover { background: #004060; color: #fff; }
.year-tab.active {
  background: linear-gradient(#ff0066, #990033); color: #fff;
  border-style: inset; border-color: #ffcc00; transform: translateY(1px);
  box-shadow: 0 0 10px rgba(255,0,102,.5);
}
.year-tab .tab-dot { color: #ffcc00; }
.season-head {
  font-family: 'Press Start 2P', monospace; font-size: 12px; color: #ffcc00;
  text-shadow: 1px 1px 0 #000; margin: 2px 0 10px; padding-bottom: 6px;
  border-bottom: 1px dashed #ffcc00;
}
.season-head .sh-year { color: #00e5ff; }
.podium-placeholder {
  text-align: center; padding: 22px 12px;
  background: rgba(0,0,0,.3); border: 2px dashed #00557a; border-radius: 4px;
}
.podium-placeholder .pp-year {
  font-family: 'Press Start 2P', monospace; font-size: 26px; color: #ff4df0;
  text-shadow: 2px 2px 0 #000; margin-bottom: 8px;
}
.podium-placeholder p { margin: 4px 0; }

/* ===================== PODIUM ===================== */
.podium-card {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.3));
  border: 2px solid #00e5ff; border-left: 6px solid #ffcc00;
  border-radius: 4px; padding: 10px; margin-bottom: 10px;
}
.podium-card.place-1 { border-left-color: #ffd700; box-shadow: 0 0 14px rgba(255,215,0,.4); }
.podium-card.place-2 { border-left-color: #c0c0c0; }
.podium-card.place-3 { border-left-color: #cd7f32; }
.podium-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.podium-trophy { font-size: 22px; }
.podium-place { font-family: 'Press Start 2P', monospace; font-size: 12px; color: #ffcc00; }
.podium-team { font-weight: 700; color: #ff4df0; font-size: 16px; }
.podium-rec { margin-left: auto; color: #39ff14; font-weight: 700; }
.podium-award { color: #00e5ff; font-size: 12px; margin: 4px 0; }
.podium-meta { font-size: 12px; color: #cfe8ff; margin: 2px 0 6px; }
.podium-meta b { color: #ffcc00; }
.podium-note { margin: 0; line-height: 1.55; font-size: 13px; }

/* ===================== LEADERBOARD ===================== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.leaderboard { width: 100%; border-collapse: collapse; font-size: 13px; }
.leaderboard th, .leaderboard td { border: 1px solid #00557a; padding: 5px 6px; text-align: center; }
.leaderboard th { background: #002b40; color: #ffcc00; cursor: pointer; user-select: none; }
.leaderboard th:hover { background: #004060; }
.leaderboard td:nth-child(2) { text-align: left; }
.leaderboard tbody tr:nth-child(odd) { background: rgba(255,255,255,.05); }
.leaderboard tbody tr:hover { background: rgba(255,77,240,.18); }
.rank-1 td:first-child { color: #ffd700; font-weight: 700; }
.rank-2 td:first-child { color: #c0c0c0; font-weight: 700; }
.rank-3 td:first-child { color: #cd7f32; font-weight: 700; }
.pname { font-weight: 700; }
.pnick { color: #9bd; font-size: 11px; font-style: italic; }

/* ===================== TOP 8 ===================== */
.top8-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 760px){ .top8-grid { grid-template-columns: repeat(2,1fr); } }
.friend {
  text-align: center; background: rgba(0,0,0,.3);
  border: 1px solid #00e5ff; border-radius: 3px; padding: 6px;
}
.friend .avatar {
  width: 64px; height: 64px; margin: 0 auto 4px;
  border: 2px solid #ffcc00; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Press Start 2P', monospace; font-size: 18px;
  background: linear-gradient(135deg,#ff0066,#003a8c); color: #fff;
}
.friend .fname { font-weight: 700; font-size: 12px; color: #00e5ff; }
.friend .fnick { font-size: 10px; color: #ffcc00; font-style: italic; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; }
.dot.online{ background:#39ff14 } .dot.away{ background:#ffcc00 } .dot.offline{ background:#888 }

/* ===================== HISTORY ===================== */
.tourney {
  border-left: 4px solid #ff0066; background: rgba(0,0,0,.25);
  padding: 8px 10px; margin-bottom: 8px; border-radius: 0 4px 4px 0;
}
.tourney .tname { font-weight: 700; color: #ffcc00; }
.tourney .tmeta { font-size: 12px; color: #cfe8ff; }
.tourney .twin { color: #39ff14; font-weight: 700; }

/* ===================== COMMENTS ===================== */
.comment {
  display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.2);
}
.comment .c-av {
  width: 40px; height: 40px; flex: none; border-radius: 3px;
  background: linear-gradient(135deg,#003a8c,#ff0066); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.comment .c-from { font-weight: 700; color: #00e5ff; }
.comment .c-date { font-size: 11px; color: #999; }
.comment .c-text { margin: 3px 0 0; }
.add-comment { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.add-comment input, .add-comment textarea {
  background: #00111a; color: #f4f4f4; border: 2px inset #00557a; padding: 5px; font-family: inherit;
}
.add-comment button { align-self: flex-start; background: #ffcc00; border: 2px outset #fff; font-weight: 700; cursor: pointer; padding: 4px 10px; }

/* ===================== PLAYER DASHBOARD ===================== */
.dash-box { position: relative; }
.dash-controls {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px;
}
.dash-controls label { color: #00e5ff; font-weight: 700; }
#player-select {
  background: #00111a; color: #39ff14; font-family: inherit; font-weight: 700;
  font-size: 14px; border: 2px inset #00557a; padding: 4px 6px; border-radius: 3px;
  cursor: pointer; max-width: 100%;
}
.dash-rank { font-size: 12px; color: #ffcc00; font-style: italic; }

.statcards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px;
}
@media (max-width: 760px){ .statcards { grid-template-columns: repeat(2,1fr); } }
.statcard {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.35));
  border: 2px solid var(--ac, #00e5ff);
  border-radius: 4px; padding: 8px 4px; text-align: center;
  box-shadow: 0 0 8px color-mix(in srgb, var(--ac, #00e5ff) 35%, transparent);
}
.statcard .sc-val {
  font-family: 'Press Start 2P', monospace; font-size: 15px; color: var(--ac, #fff);
  text-shadow: 1px 1px 0 #000; word-break: break-word;
}
.statcard .sc-label { font-size: 11px; color: #cfe8ff; margin-top: 5px; }

.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 760px){ .charts-grid { grid-template-columns: 1fr; } }
.chart-card {
  background: rgba(0,0,0,.3); border: 2px solid #00557a; border-radius: 4px; padding: 8px;
}
.chart-host { width: 100%; }
.chart-svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.chart-hint { margin: 4px 0 0; }

/* svg chart bits */
.chart-svg .grid { stroke: rgba(255,255,255,.12); stroke-width: 1; }
.chart-svg .axis { fill: #9bd; font-size: 9px; font-family: 'Comic Neue', sans-serif; }
.chart-svg .avgline { stroke: #ffcc00; stroke-width: 1; stroke-dasharray: 4 3; opacity: .8; }
.chart-svg .avglabel { fill: #ffcc00; font-size: 9px; }
.chart-svg .legend { fill: #cfe8ff; font-size: 11px; dominant-baseline: middle; font-family: 'Comic Neue', sans-serif; }
.chart-svg .bar { cursor: pointer; transition: opacity .12s, filter .12s; outline: none; }
.chart-svg .bar:hover, .chart-svg .bar:focus { filter: brightness(1.25); }
.chart-svg .bar.sel { stroke: #fff; stroke-width: 2; filter: brightness(1.35); }
.chart-svg .slice { cursor: pointer; transition: filter .12s; outline: none; stroke: #160026; stroke-width: 1.5; }
.chart-svg .slice:hover, .chart-svg .slice:focus { filter: brightness(1.2); }
.chart-svg .slice.sel { stroke: #fff; stroke-width: 2.5; filter: brightness(1.3); }
.chart-svg .donut-hole { fill: #120022; }
.chart-svg .donut-top { fill: #39ff14; font-family: 'Press Start 2P', monospace; font-size: 14px; }
.chart-svg .donut-bot { fill: #cfe8ff; font-size: 10px; letter-spacing: 2px; }

.chart-tooltip {
  position: absolute; z-index: 50; pointer-events: none;
  background: #000; color: #39ff14; border: 1px solid #39ff14;
  border-radius: 3px; padding: 4px 7px; font-size: 12px; max-width: 200px;
  box-shadow: 0 0 8px rgba(57,255,20,.5);
}
.chart-tooltip b { color: #ffcc00; }

/* ===================== TEAM FACE-OFFS ===================== */
.faceoff {
  background: rgba(0,0,0,.28); border: 2px solid #00557a; border-left: 6px solid #ff0066;
  border-radius: 0 4px 4px 0; padding: 8px 10px; margin-bottom: 10px;
}
.fo-round { font-family: 'Press Start 2P', monospace; font-size: 10px; color: #ffcc00; margin-bottom: 6px; }
.fo-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.fo-team { width: 130px; flex: none; font-weight: 700; color: #cfe8ff; font-size: 13px; }
.fo-row.fo-win .fo-team { color: #39ff14; }
.fo-bar { flex: 1; height: 16px; background: rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; }
.fo-fill { display: block; height: 100%; border-radius: 8px; transition: width .4s ease; }
.fo-score { width: 24px; text-align: right; font-weight: 700; color: #ffcc00; font-family: 'Press Start 2P', monospace; font-size: 11px; }
.fo-note { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #cfe8ff; }
@media (max-width: 760px){ .fo-team { width: 96px; font-size: 11px; } }

/* ===================== LORE ===================== */
.lore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 760px){ .lore-grid { grid-template-columns: 1fr; } }
.lore-card {
  background: linear-gradient(180deg, rgba(255,77,240,.08), rgba(0,0,0,.3));
  border: 2px ridge #ff4df0; border-radius: 4px; padding: 10px;
}
.lore-era { font-family: 'Press Start 2P', monospace; font-size: 10px; color: #00e5ff; }
.lore-title { font-weight: 700; color: #ffcc00; font-size: 15px; margin: 6px 0; }
.lore-body { margin: 0; line-height: 1.55; font-size: 13px; color: #f4f4f4; }

/* ===================== MISC ===================== */
.tiny { font-size: 11px; color: #9aa; }
code { background: #000; color: #39ff14; padding: 1px 4px; border-radius: 3px; font-size: 12px; }
#site-footer { text-align: center; margin-top: 14px; padding-top: 10px; border-top: 2px ridge #ff4df0; color: #cfe8ff; }