*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --base:        #ffffff;
      --main:        #000000;
      --accent:      #A7A9AC;
      --accent-lt:   #d0d2d4;
      --accent-dk:   #787a7d;
      --bg:          #f4f4f4;
      --card-bg:     #ffffff;
      --card-shadow: rgba(0,0,0,0.10);
      --border:      #e0e1e3;
      --text-head:   #000000;
      --text-body:   #2a2a2a;
      --text-muted:  #787a7d;
    }

    html, body { height: 100%; }

    body {
      font-family: Outfit, sans-serif;
      background: var(--bg);
      background-image:
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 39px,
          rgba(167,169,172,0.08) 39px,
          rgba(167,169,172,0.08) 40px
        );
      color: var(--text-body);
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      padding: 40px 24px 52px;
    }

    /* ===== Header ===== */
    header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 28px;
      margin-bottom: 36px;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .team-badge {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      padding: 14px 28px;
      background: var(--main);
      border-radius: 14px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    }

    .match-meta-block { text-align: left; }
    .match-meta-date {
      font-size: 0.60rem; font-weight: 700;
      letter-spacing: 0.24em;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    .match-meta-title {
      font-size: 1.25rem; font-weight: 800;
      color: var(--base);
      letter-spacing: 0.06em;
      line-height: 1;
    }

    .exit-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      min-width: 88px;
      padding: 12px 18px;
      border: 1px solid var(--main);
      background: var(--base);
      color: var(--main);
      text-decoration: none;
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      box-shadow: 0 2px 10px var(--card-shadow);
      transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }

    .exit-button:hover {
      background: var(--main);
      color: var(--base);
      transform: translateY(-2px);
    }

    header h1 {
      font-size: clamp(1.6rem, 4vw, 2.5rem);
      font-weight: 900;
      color: var(--text-head);
      letter-spacing: -0.01em;
      margin-top: 18px;
    }
    header h1 em {
      font-style: normal;
      color: var(--accent-dk);
    }

    header p {
      margin-top: 8px;
      font-size: 0.84rem;
      color: var(--text-muted);
      font-weight: 400;
      letter-spacing: 0.04em;
    }

    /* uniform stripe */
    .stripe-deco {
      display: flex; align-items: center; gap: 6px;
      justify-content: center; margin-top: 18px;
    }
    .stripe-deco .line {
      height: 3px; border-radius: 2px;
      background: var(--main);
    }
    .stripe-deco .l1 { width: 48px; }
    .stripe-deco .l2 { width: 6px; background: var(--accent); }
    .stripe-deco .l3 { width: 80px; }
    .stripe-deco .l4 { width: 6px; background: var(--accent); }
    .stripe-deco .l5 { width: 48px; }

    /* ===== Stats ===== */
    .stats-row {
      display: flex; gap: 14px; margin-bottom: 28px;
      flex-wrap: wrap; justify-content: center;
    }

    .stat-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 16px 26px;
      text-align: center;
      min-width: 110px;
      box-shadow: 0 2px 10px var(--card-shadow);
      position: relative;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .stat-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
    }
    .stat-card.wins::before   { background: var(--main); }
    .stat-card.losses::before { background: var(--accent); }
    .stat-card.draws::before  { background: var(--accent-lt); }
    .stat-card.kitchin::before { background: var(--main); }
    .stat-card.games::before  { background: var(--accent-dk); }

    .stat-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 28px rgba(0,0,0,0.14);
    }

    .stat-label {
      font-size: 0.68rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--text-muted); margin-bottom: 6px;
    }
    /* 今年度 小数字 */
    .stat-value { font-size: 1.05rem; font-weight: 700; line-height: 1; }
    .wins    .stat-value { color: var(--main); }
    .losses  .stat-value { color: var(--accent-dk); }
    .draws   .stat-value { color: var(--accent); }
    .kitchin .stat-value { color: var(--main); }
    .games   .stat-value { color: var(--accent-dk); }
    /* 通算 大数字 */
    .stat-divider {
      width: 100%; height: 1px;
      background: var(--border);
      margin: 6px 0 5px;
    }
    .stat-sub-label {
      font-size: 0.58rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--accent-lt); margin-bottom: 3px;
    }
    .stat-sub-value {
      font-size: 1.9rem; font-weight: 900; line-height: 1;
      color: var(--main);
    }
    .losses  .stat-sub-value { color: var(--accent-dk); }
    .draws   .stat-sub-value { color: var(--accent); }
    .games   .stat-sub-value { color: var(--accent-dk); }

    /* ===== Chart Card ===== */
    .chart-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 28px 28px 22px;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      box-shadow: 0 4px 30px var(--card-shadow);
      position: relative;
      overflow: hidden;
    }

    /* uniform stripe top bar */
    .chart-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0;
      height: 5px;
      background: repeating-linear-gradient(
        90deg,
        var(--main)   0px,
        var(--main)   18px,
        var(--accent) 18px,
        var(--accent) 24px,
        var(--main)   24px,
        var(--main)   42px
      );
    }

    .chart-title {
      font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--accent-dk); margin-bottom: 20px; padding-top: 4px;
    }

    .chart-container {
      position: relative;
      width: 100%;
    }
    .chart-panel {
      display: none;
    }
    .chart-panel.is-active {
      display: block;
    }
    .chart-card canvas {
      display: block;
      width: 100%;
      height: auto;
    }

    /* ===== View Switcher ===== */
    .view-switcher {
      display: inline-flex;
      gap: 8px;
      padding: 6px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--card-bg);
      box-shadow: 0 2px 10px var(--card-shadow);
    }

    .view-switch-button {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--text-muted);
      font: inherit;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      padding: 10px 16px;
      border-radius: 999px;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .view-switch-button:hover {
      transform: translateY(-1px);
    }

    .view-switch-button.is-active {
      background: var(--main);
      color: var(--base);
    }

    /* ===== Footer ===== */
    .page-footer {
      margin-top: 18px;
      font-size: 0.78rem;
      color: var(--text-muted);
      letter-spacing: 0.04em;
      text-align: center;
    }