@charset "UTF-8";

:root {
      --bg: #effdf5;
      --bg2: #e7f8ff;
      --card: rgba(255,255,255,.94);
      --text: #17324d;
      --muted: #5f7184;
      --main: #0877c9;
      --main2: #0ea5e9;
      --green: #9be080;
      --green2: #d8f9c8;
      --line: #b9e7e7;
      --win: #fff5f8;
      --win-text: #e60039;
      --lose: #eaf5ff;
      --lose-text: #0867bd;
      --draw: #fff7df;
      --draw-text: #946200;
      --soon: #eefbe8;
      --soon-text: #16824a;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
      background:
        radial-gradient(circle at 8% 10%, rgba(255,255,255,.9) 0 30px, transparent 31px),
        radial-gradient(circle at 90% 9%, rgba(255,255,255,.72) 0 42px, transparent 43px),
        linear-gradient(120deg, #d9ffc4 0%, #ecffdb 34%, #d9f8ff 68%, #bfeeff 100%);
      color: var(--text);
      line-height: 1.65;
      min-height: 100vh;
    }
    body::before {
      content: "⚾  ★  ⚾  ★";
      position: fixed;
      inset: 10px 16px auto auto;
      color: rgba(8,119,201,.18);
      font-size: 1.3rem;
      letter-spacing: .8rem;
      pointer-events: none;
      z-index: 0;
    }
    body::after {
      content: "";
      position: fixed;
      left: 0; right: 0; bottom: 0;
      height: 28px;
      background: linear-gradient(135deg, #8edb65 25%, transparent 25%) 0 0/18px 18px,
                  linear-gradient(225deg, #8edb65 25%, transparent 25%) 0 0/18px 18px,
                  #a9e978;
      opacity: .65;
      pointer-events: none;
      z-index: 0;
    }
    a { color: var(--main); font-weight: 900; text-decoration: none; border-bottom: 2px solid rgba(8,119,201,.25); }
    a:hover { border-bottom-color: var(--main); }
    .page { position: relative; z-index: 1; width: min(1120px, 100%); margin: 0 auto; padding: 18px 14px 52px; }
    .hero {
      position: relative;
      overflow: hidden;
      background: linear-gradient(110deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
      color: #095aaa;
      border: 2px dashed rgba(40, 178, 117, .45);
      border-radius: 28px;
      padding: 24px 20px;
      box-shadow: 0 14px 32px rgba(48, 150, 190, .18);
      margin-bottom: 16px;
      text-align: center;
    }
    .hero::before { content: "⚾"; position: absolute; left: 18px; top: 16px; font-size: 2.4rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,.12)); }
    .hero::after { content: "⚾"; position: absolute; right: 18px; bottom: 14px; font-size: 2.1rem; opacity: .8; }
    .hero p { margin: 0 0 6px; color: #2f9f6b; font-weight: 900; letter-spacing: .04em; }
    .hero h1 { margin: 0; font-size: clamp(1.5rem, 5.4vw, 2.45rem); line-height: 1.25; text-shadow: 0 2px 0 #fff; }
    .summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 16px 0; }
    .summary div {
      background: var(--card);
      border: 1px solid rgba(67,196,162,.34);
      border-radius: 18px;
      padding: 13px 8px;
      text-align: center;
      box-shadow: 0 6px 18px rgba(0,0,0,.07);
    }
    .summary div:nth-child(1)::before { content: "🧢"; display:block; }
    .summary div:nth-child(2)::before { content: "⭐"; display:block; }
    .summary div:nth-child(3)::before { content: "💧"; display:block; }
    .summary div:nth-child(4)::before { content: "🍀"; display:block; }
    .summary div:nth-child(5)::before { content: "📅"; display:block; }
    .summary strong { display: block; font-size: 1.45rem; line-height: 1.1; }
    .summary span { color: var(--muted); font-size: .82rem; font-weight: 800; }
    .tools { position: sticky; top: 0; z-index: 5; background: rgba(238,253,245,.88); backdrop-filter: blur(10px); padding: 10px 0; }
    .search { width: 100%; border: 2px solid rgba(67,196,162,.32); border-radius: 999px; padding: 13px 16px; font-size: 16px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
    .filters { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; }
    .filter-btn { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 13px; white-space: nowrap; font-weight: 900; color: var(--text); cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.04); }
    .filter-btn.active { background: linear-gradient(135deg, #49c56f, #0877c9); color: #fff; border-color: transparent; }
    .game-list { display: grid; gap: 12px; margin-top: 8px; }
    .game-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 15px; box-shadow: 0 7px 20px rgba(37, 117, 160, .12); }
    .game-card__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
    .game-card__date { margin: 0; color: var(--muted); font-size: .9rem; font-weight: 900; }
    .game-card h2 { margin: 2px 0 0; font-size: 1.12rem; line-height: 1.35; }
    .badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 5px 11px; font-size: .82rem; font-weight: 900; min-width: 50px; border: 1px solid rgba(255,255,255,.7); }
    .badge.win { background: var(--win); color: var(--win-text); }
    .badge.lose { background: var(--lose); color: var(--lose-text); }
    .badge.draw { background: var(--draw); color: var(--draw-text); }
    .badge.soon { background: var(--soon); color: var(--soon-text); }
    .score-line { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); margin: 12px 0; padding: 10px 0; }
    .score { font-size: 1.85rem; font-weight: 950; letter-spacing: .02em; }
    .not-yet { color: #2f9f6b; font-size: 1.05rem; font-weight: 900; }
    .game-no { color: var(--muted); font-size: .85rem; font-weight: 800; }
    .game-detail { margin: 0; display: grid; gap: 7px; }
    .game-detail div { display: grid; grid-template-columns: 4.7em 1fr; gap: 8px; }
    dt { color: var(--muted); font-weight: 900; }
    dd { margin: 0; }
    .table-wrap { display: none; margin-top: 16px; overflow-x: auto; background: rgba(255,255,255,.94); border: 2px solid rgba(67,196,162,.3); border-radius: 22px; box-shadow: 0 10px 26px rgba(37,117,160,.14); }
    table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 900px; }
    th, td { padding: 10px 12px; border-bottom: 1px dashed var(--line); text-align: center; }
    th { background: linear-gradient(180deg, #168edc, #0877c9); color: #fff; position: sticky; top: 0; font-weight: 900; }
    th:first-child { border-top-left-radius: 18px; }
    th:last-child { border-top-right-radius: 18px; }
    td:first-child { font-weight: 900; color: #0f7a4b; }
    td:nth-child(3), td:nth-child(4), td:nth-child(7) { text-align: left; }
    .table-score { font-weight: 900; }
    .empty { display: none; background: #fff; border-radius: 16px; padding: 18px; text-align: center; color: var(--muted); margin-top: 12px; }
    footer { color: var(--muted); font-size: .82rem; text-align: center; margin-top: 24px; font-weight: 800; }
    @media (min-width: 760px) {
      .page { padding: 30px 22px 60px; }
      .game-list { display: none; }
      .table-wrap { display: block; }
      .summary strong { font-size: 1.75rem; }
      .hero { padding: 28px 90px; }
    }
    @media (max-width: 520px) {
      .summary { grid-template-columns: repeat(2, 1fr); }
      .summary div:last-child { grid-column: span 2; }
      .hero { border-radius: 20px; padding: 22px 16px; }
      .hero::before, .hero::after { opacity: .35; }
      .score { font-size: 1.55rem; }
    }