@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Archivo+Narrow:wght@600;700&display=swap");

:root {
    --garden-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --garden-font-head: "Archivo Narrow", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

html,
body,
input,
button,
select,
textarea {
    font-family: var(--garden-font-sans);
    font-weight: 400;
}

h1,
h2,
h3,
h4 {
    font-family: var(--garden-font-head);
    font-weight: 700;
    letter-spacing: 0.012em;
}

/* Shared visual rules for generator/viewer league table and tournament SVG */
.table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.group-table,
.league-matrix {
    --team-col-w: 98px;
    --stat-col-w: 42px;
    --match-cell-h: 52px;
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid var(--grade-color, #5f8fc4);
    background: #ffffff;
}

.group-table caption,
.league-matrix caption {
    caption-side: top;
    text-align: left;
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    background: var(--grade-color, #5f8fc4);
    padding: 6px 8px;
    border: 1px solid var(--grade-color, #5f8fc4);
    border-bottom: 0;
}

.group-table col.col-team,
.league-matrix col.col-team { width: var(--team-col-w); }

.group-table col.col-stat,
.league-matrix col.col-stat { width: var(--stat-col-w); }

.group-table th,
.group-table td,
.league-matrix th,
.league-matrix td {
    text-align: center;
    font-size: 1.04rem;
    padding: 4px 4px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #c9d7e8;
}

.group-table th,
.league-matrix th,
.group-table td:not(.match-cell):not(.diag):not(.upper),
.league-matrix td:not(.match-cell):not(.diag):not(.upper) {
    padding: 5px 6px;
}

.group-table th:first-child,
.group-table td:first-child,
.league-matrix th:first-child,
.league-matrix td:first-child { text-align: left; }

.group-table th,
.league-matrix th { background: #eef3fb; }

.group-table td.match-cell,
.group-table td.diag,
.group-table td.upper,
.league-matrix td.match-cell,
.league-matrix td.diag,
.league-matrix td.upper {
    height: var(--match-cell-h);
    padding: 0;
}

.match-cell-inner {
    min-height: var(--match-cell-h);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.match-value {
    display: inline-block;
    font-size: 1.02rem;
    font-weight: 700;
    color: #2c425c;
}

.pending-match {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
    font-size: 1rem;
    color: #385472;
    font-weight: 400;
    white-space: nowrap;
}

.pending-match .line2 {
    margin-top: 1px;
    font-size: 0.94rem;
    color: #466482;
    font-weight: 400;
}

.team-name-fit {
    display: inline-block;
    white-space: nowrap;
    transform-origin: left center;
}

.diag {
    position: relative;
    background: #f0f4f8;
    padding: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
}

.diag::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom left,
        transparent calc(50% - 0.8px),
        #9bb0c8 calc(50% - 0.8px),
        #9bb0c8 calc(50% + 0.8px),
        transparent calc(50% + 0.8px)
    );
    pointer-events: none;
}

.upper {
    background: #fafcff;
}

.pair-code .match-value {
    color: #2c425c;
    font-weight: 500;
}

.tournament-wrap,
.tournament-svg-wrap {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--grade-color, #5f8fc4);
    border-radius: 10px;
    background: #f8fbff;
    padding: 8px;
}

.bracket-svg,
.tournament-canvas {
    display: block;
    min-width: 0;
    width: 100%;
    height: auto;
}

.grade-schedule-wrap { margin-top: 12px; }

.grade-schedule-table {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
    border: 1px solid var(--grade-color, #5f8fc4);
    background: #ffffff;
}

.grade-schedule-table col.col-court { width: 88px; }
.grade-schedule-table col.col-slot { width: 90px; }
.grade-schedule-table col.col-time { width: 132px; }
.grade-schedule-table col.col-phase { width: 78px; }
.grade-schedule-table col.col-type { width: 120px; }
.grade-schedule-table col.col-match { width: 260px; }
.grade-schedule-table col.col-ref { width: 340px; }
.grade-schedule-table col.col-score { width: 94px; }

.grade-schedule-table th,
.grade-schedule-table td {
    font-size: 0.95rem;
    padding: 6px 8px;
    text-align: left;
    vertical-align: middle;
}

.grade-schedule-table th {
    text-align: center;
    background: #eef3fb;
}

.grade-schedule-table .center-col { text-align: center; }
.grade-schedule-table .schedule-score-cell {
    font-weight: 400;
    line-height: 1.15;
    white-space: nowrap;
}

.grade-schedule-table tr.schedule-event-row td,
.grade-schedule-table tr.schedule-lunch-row td {
    background: #eef3fb;
    color: inherit;
    font-weight: 400;
}

.overall-tt-wrap {
    margin-top: 2px;
}

.overall-tt-scroll {
    border: 1px solid #c9d7e8;
    border-radius: 10px;
    background: #ffffff;
}

.overall-tt-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #ffffff;
}

.overall-tt-table th,
.overall-tt-table td {
    border: 1px solid #c9d7e8;
    padding: 6px;
    vertical-align: top;
}

.overall-tt-slot-head,
.overall-tt-slot-cell {
    width: 154px;
    min-width: 154px;
    text-align: center;
    background: #eef3fb;
    color: #214261;
    font-weight: 700;
    font-size: 9pt;
}

.overall-tt-court-head {
    min-width: 190px;
    text-align: center;
    background: #eef3fb;
    color: #214261;
    font-weight: 700;
    font-size: 9pt;
}

.overall-tt-slot-cell .slot {
    font-size: 9pt;
    line-height: 1.2;
    font-weight: 800;
}

.overall-tt-slot-cell .time {
    margin-top: 2px;
    font-size: 9pt;
    line-height: 1.2;
    color: #2f4a65;
    font-weight: 600;
}

.overall-tt-cell {
    min-width: 190px;
    background: #ffffff;
}

.overall-tt-empty {
    min-width: 190px;
    text-align: center;
    color: #6a7d92;
    background: #f8fbff;
    font-size: 0.84rem;
}

.overall-tt-break-lunch td,
.overall-tt-break-lunch th,
.overall-tt-break-adjust td,
.overall-tt-break-adjust th {
    background: #eef3fb;
}

.overall-tt-break-cell {
    text-align: center;
    color: #214261;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.overall-tt-card {
    border: 1px solid var(--card-line, #7b8ea4);
    border-radius: 8px;
    background: var(--card-bg, #f5f8fb);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.56);
    overflow: hidden;
    margin: 0;
}

.overall-tt-card:last-child {
    margin-bottom: 0;
}

.overall-tt-card-head {
    background: var(--card-bar, #7b8ea4);
    color: #ffffff;
    font-size: 8.0pt;
    font-weight: 800;
    padding: 4px 6px 3px;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

.overall-tt-card-match {
    padding: 5px 7px 2px;
    font-size: 8.0pt;
    color: #1f364f;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.overall-tt-card-ref {
    padding: 1px 7px 7px;
    font-size: 8.0pt;
    color: #35536f;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.overall-tt-card-result {
    padding: 1px 7px 5px;
    font-size: 14pt;
    color: #1f364f;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.01em;
    word-break: break-word;
    overflow-wrap: anywhere;
}