/* monthly.css — extracted from inline <style> blocks. Generated by scripts/h1-extract.mjs */
.wrap { max-width: 1200px; margin: 0 auto; padding: 40px 24px 80px; position: relative; z-index: 2; }

      .hero { margin-bottom: 28px; }
      .hero .tag { color: var(--text-dim); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
      .hero h1 {
        font-size: 32px;
        color: var(--green);
        text-shadow: 0 0 16px var(--green-glow-strong);
        margin: 8px 0 12px;
      }
      .hero .lede {
        color: var(--text-dim);
        font-size: 13px;
        line-height: 1.75;
        max-width: 760px;
      }
      .hero .lede strong { color: var(--green); }

      .countdown {
        margin-top: 18px;
        display: inline-flex;
        gap: 18px;
        padding: 14px 20px;
        border: 1px solid var(--green);
        background: var(--bg-terminal);
      }
      .countdown .unit { text-align: center; }
      .countdown .num { font-size: 22px; color: var(--green); font-weight: 700; }
      .countdown .label {
        font-size: 9px;
        color: var(--text-dim);
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-top: 2px;
      }

      .prize-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin: 26px 0;
      }
      @media (max-width: 720px) { .prize-strip { grid-template-columns: 1fr; } }
      .prize {
        border: 1px solid var(--green-dark);
        background: var(--bg-card);
        padding: 18px 20px;
        position: relative;
      }
      .prize.rank-1 { border-color: var(--green); box-shadow: 0 0 18px rgba(67, 232, 130, 0.18) inset; }
      .prize .rank-tag {
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--text-dim);
      }
      .prize.rank-1 .rank-tag { color: var(--green); }
      .prize .position { font-size: 28px; color: var(--green); font-weight: 700; margin: 4px 0 8px; }
      .prize .skill { font-size: 14px; color: var(--white); line-height: 1.5; }
      .prize .note { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

      .tabs {
        display: flex;
        gap: 2px;
        margin-bottom: 0;
        border-bottom: 1px solid var(--green-dark);
      }
      .tab {
        background: transparent;
        border: 1px solid var(--green-dark);
        border-bottom: none;
        color: var(--text-dim);
        padding: 12px 22px;
        font-family: "JetBrains Mono", monospace;
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
      }
      .tab.active {
        background: var(--bg-card);
        color: var(--green);
        border-color: var(--green);
      }
      .tab:hover:not(.active) { color: var(--green); }

      .class-panel {
        border: 1px solid var(--green-dark);
        border-top: none;
        background: var(--bg-card);
        padding: 22px 24px;
      }

      .threshold {
        margin-bottom: 18px;
        padding: 14px 18px;
        background: var(--bg);
        border: 1px solid var(--green-dark);
      }
      .threshold .t-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-size: 11px;
        color: var(--text-dim);
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 8px;
      }
      .threshold .t-row .count { color: var(--green); font-size: 14px; font-weight: 600; }
      .threshold .t-row .count.below { color: var(--red); }
      .threshold .bar {
        height: 6px;
        background: var(--bg-terminal);
        border: 1px solid var(--green-dark);
        position: relative;
        overflow: hidden;
      }
      .threshold .bar .fill {
        position: absolute;
        inset: 0 auto 0 0;
        background: var(--green);
        box-shadow: 0 0 8px var(--green-glow);
        transition: width 0.3s ease;
      }
      .threshold .bar .fill.below { background: var(--red); box-shadow: none; }
      .threshold .hint {
        margin-top: 10px;
        font-size: 10px;
        color: var(--text-dim);
        line-height: 1.6;
      }

      .leaderboard {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
      }
      .leaderboard thead th {
        text-align: left;
        padding: 10px 8px;
        font-size: 10px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-dim);
        border-bottom: 1px solid var(--green-dark);
        font-weight: 600;
      }
      .leaderboard tbody td {
        padding: 10px 8px;
        border-bottom: 1px dotted var(--green-dark);
        color: var(--white);
      }
      .leaderboard tbody tr.medal-1 td { background: rgba(67, 232, 130, 0.06); }
      .leaderboard tbody tr.medal-1 td.rank { color: var(--green); font-weight: 700; }
      .leaderboard tbody tr.medal-2 td.rank { color: #d6d8dc; font-weight: 600; }
      .leaderboard tbody tr.medal-3 td.rank { color: #c79a63; font-weight: 600; }
      .leaderboard td.rank { width: 56px; text-align: center; }
      .leaderboard td.agent { color: var(--green); }
      .leaderboard td.gain.positive { color: var(--green); }
      .leaderboard td.gain.negative { color: var(--red); }
      .leaderboard td.matches { color: var(--text-dim); font-size: 11px; }
      .leaderboard .empty { text-align: center; padding: 30px; color: var(--text-dim); font-size: 11px; }

      .cta-strip {
        display: flex;
        gap: 14px;
        margin-top: 28px;
        flex-wrap: wrap;
      }
      .cta {
        display: inline-block;
        padding: 12px 22px;
        border: 1px solid var(--green);
        color: var(--green);
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
        background: var(--bg-terminal);
      }
      .cta:hover { background: var(--green-dark); }
      .cta.muted { border-color: var(--green-dark); color: var(--text-dim); }
      .cta.muted:hover { color: var(--green); border-color: var(--green); }

      @media (max-width: 720px) {
        .wrap { padding: 28px 14px 60px; }
        .hero h1 { font-size: 24px; }
        .countdown { gap: 12px; padding: 12px 14px; }
        .countdown .num { font-size: 18px; }
        .class-panel { padding: 16px 14px; }
        .leaderboard { font-size: 11px; }
        .leaderboard thead th, .leaderboard tbody td { padding: 8px 4px; }
        .leaderboard td.matches { display: none; }
        .leaderboard td.wld { display: none; }
        .leaderboard thead th.matches, .leaderboard thead th.wld { display: none; }
        .tab { padding: 10px 12px; font-size: 11px; }
      }
      body { padding-top: 64px; }