/* ============================================================
   SCUROA scoring view
   紙スコアシートのレイアウトを基準としたV4 scoring UI
   ============================================================ */


/* ============================================================
   Base
   ============================================================ */

.scoring-page {
    font-family:
        'Hiragino Sans',
        'Hiragino Kaku Gothic ProN',
        sans-serif;

    width: 98%;
    max-width: none;

    margin: 0 auto;
    padding: 0 0 1rem;

    background: #ffffff;

    font-weight: 400;
}

.scoring-page,
.scoring-page *,
.scoring-page *::before,
.scoring-page *::after {
    box-sizing: border-box;
}

.scoring-page * {
    font-family: inherit;
    font-weight: 400;
}


/* ============================================================
   Competition live status
   ============================================================ */

.scoring-live-status {
    width: min(92%, 42rem);
    margin: 1.5rem auto;
    padding: 1rem;
    font-family:
        'Hiragino Sans',
        'Hiragino Kaku Gothic ProN',
        sans-serif;
}

.scoring-live-status[hidden] {
    display: none;
}

.scoring-live-status-panel {
    padding: clamp(2rem, 10vh, 5rem) 1.25rem;
    border: 1px solid #999999;
    background: #ffffff;
    text-align: center;
}

.scoring-live-status-panel h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    font-weight: 400;
}

.scoring-live-status-panel p {
    margin: 0 0 1.5rem;
    font-size: clamp(1rem, 4vw, 1.25rem);
}

.scoring-live-status-action {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    background: #08006e;
    color: #ffffff;
    text-decoration: none;
}


/* ============================================================
   Header controls
   70m-1 / 70m-2 / 速報 / 更新
   ============================================================ */

.scoring-header {
    width: 100%;

    margin: 0;
    padding: 5px;

    background: rgba(255, 255, 255, 0.60);
}

.scoring-header-buttons {
    display: flex;

    width: 100%;

    align-items: stretch;
    justify-content: space-evenly;

    gap: 0;
}

.scoring-header button {
    display: block;

    width: 17%;
    min-height: 0;

    padding: 0.1em;

    border: 0;
    border-radius: 8px;

    font-family: inherit;
    font-weight: 400;

    text-align: center;
    text-decoration: none;
}

.scoring-stage-button {
    background: #ec8d8d;
    color: #000000;

    font-size: 29px;
}

.scoring-stage-button.is-current {
    background: #ec8d8d;
    color: #000000;

    box-shadow: inset 0 0 0 2px #7f1d1d;
}

.scoring-report-button {
    background: #08006e;
    color: #ffffff;

    font-size: 30px;
}

.scoring-stage-notice {
    margin: 0;
    padding: 0.25rem;

    border-left: 1px solid #999999;
    border-right: 1px solid #999999;

    text-align: center;
}

.scoring-confirm-button {
    max-width: 100%;
    padding: 0.15rem 0.35rem;
    border: 0;
    background: #e0e0e0;
    font: inherit;
}

.scoring-confirm-button.is-ready {
    background: #d06ae7;
}

.scoring-confirmed-label {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-around;
}

.scoring-practice-actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
}

.practice-session-list {
    display: grid;
    gap: 0.5rem;
}

.practice-session-item {
    display: grid;
    grid-template-columns: 7rem minmax(8rem, 1fr) minmax(6rem, 1fr) minmax(7rem, 1fr) 6rem;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    padding: 0.65rem;
    text-align: left;
}

.scoring-refresh-button {
    background: #1d7a56;
    color: #ffffff;

    font-size: 30px;
}

.scoring-header button:disabled {
    opacity: 1;
}


/* ============================================================
   Competition / participant information
   ============================================================ */

.scoring-info {
    width: 100%;

    margin: 0;

    background: #ffffff;
}


/* ============================================================
   Information tables
   ============================================================ */

.scoring-info-table {
    display: table;

    width: 100%;

    margin: 0;

    border-collapse: collapse;
    table-layout: fixed;

    background: #ffffff;
}

.scoring-info-table + .scoring-info-table {
    margin-top: -1px;
}

.scoring-info-table td {
    padding: 0;

    border: 1px solid #222222;

    background: #ffffff;

    vertical-align: top;

    white-space: normal;
    overflow-wrap: anywhere;
}


/* ============================================================
   Information cell
   ============================================================ */

.scoring-info-stacked-cell {
    padding: 0 !important;

    text-align: center;
    vertical-align: top;
}

.scoring-info-field {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 4.4rem;

    margin: 0;
    padding: 0;
}


/* ============================================================
   Field label
   ============================================================ */

.scoring-info-field-label {
    display: block;

    flex: 0 0 1.15rem;

    width: 100%;
    height: 1.15rem;
    min-height: 1.15rem;

    margin: 0;
    padding: 0.12rem 0.3rem 0;

    color: #000000;

    font-size: 13px;
    font-weight: 400;
    line-height: 1;

    text-align: left;

    white-space: nowrap;
}


/* ============================================================
   Field value
   ============================================================ */

.scoring-info-field-value {
    display: flex;

    flex: 1 1 auto;

    width: 100%;
    min-height: 3.25rem;

    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0.05rem 0.3rem 0.2rem;

    color: #000000;

    font-size: 30px;
    font-weight: 400;
    line-height: 1.1;

    text-align: center;

    white-space: normal;

    overflow-wrap: anywhere;
    word-break: normal;
}


/* ============================================================
   Competition name
   ============================================================ */

.scoring-info-table--competition
.scoring-info-stacked-cell {
    vertical-align: top;
}

.scoring-info-table--competition
.scoring-info-field {
    min-height: 4.4rem;
}

.scoring-info-table--competition
.scoring-info-field-value {
    min-height: 3.25rem;
}

.scoring-info-value--competition {
    font-size: 31px;
    line-height: 1.08;
}


/* ============================================================
   Venue / date
   ============================================================ */

.scoring-info-table--venue
.scoring-info-stacked-cell {
    vertical-align: top;
}

.scoring-info-table--venue
.scoring-info-field {
    min-height: 4.4rem;
}

.scoring-info-table--venue
.scoring-info-field-value {
    min-height: 3.25rem;
}

.scoring-info-value--venue {
    font-size: 30px;
    line-height: 1.05;
}

.scoring-info-value--date {
    font-size: 27px;
    line-height: 1.05;

    white-space: nowrap;
}


/* ============================================================
   Player / category
   ============================================================ */

.scoring-info-table--participant
.scoring-info-stacked-cell {
    vertical-align: top;
}

.scoring-info-table--participant
.scoring-info-field {
    min-height: 4.4rem;
}

.scoring-info-table--participant
.scoring-info-field-value {
    min-height: 3.25rem;
}

.scoring-player-name {
    font-size: 32px;
    line-height: 1.05;
}

.scoring-category {
    font-size: 27px;
    line-height: 1.05;
}


/* ============================================================
   Affiliation / organization / assignment
   ============================================================ */

.scoring-info-table--assignment
.scoring-info-stacked-cell {
    vertical-align: top;
}

.scoring-info-table--assignment
.scoring-info-field {
    min-height: 4.4rem;
}

.scoring-info-table--assignment
.scoring-info-field-value {
    min-height: 3.25rem;

    align-items: center;
    justify-content: center;
}

.scoring-affiliation {
    font-size: 29px;
    line-height: 1.05;
}

.scoring-organization {
    font-size: 26px;
    line-height: 1.05;
}

.scoring-assignment {
    font-size: 32px;
    line-height: 1.05;
}


/* ============================================================
   Score table
   ============================================================ */

.scoring-stage {
    width: 100%;

    margin: -1px 0 0;
    padding: 0;
}

.scoring-table-wrap {
    width: 100%;

    overflow-x: visible;
}

.scoring-score-table {
    display: table;

    width: 100%;
    min-width: 0;

    margin: 0;

    border-collapse: collapse;
    table-layout: fixed;

    background: #ffffff;
}


/* ============================================================
   Score table column widths
   ============================================================ */

.scoring-score-table .scoring-col-input {
    width: 16%;
}

.scoring-score-table .scoring-col-end {
    width: 6%;
}

.scoring-score-table .scoring-col-arrow {
    width: 9%;
}

.scoring-score-table .scoring-col-three {
    width: 9%;
}

.scoring-score-table .scoring-col-end-total {
    width: 9%;
}

.scoring-score-table .scoring-col-cumulative {
    width: 14%;
}

.scoring-score-table .scoring-col-x {
    width: 9%;
}

.scoring-score-table .scoring-col-ten {
    width: 9%;
}


/* ============================================================
   Score table cells
   ============================================================ */

.scoring-score-table td {
    padding: 0;

    border: 1px solid #999999;

    background: #ffffff;

    text-align: center;
    vertical-align: middle;
}


/* ============================================================
   Score table heading
   ============================================================ */

.scoring-table-heading {
    height: auto;

    padding: 0.1em;

    background: #ffffff;

    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;

    text-align: center;
}


/* ============================================================
   Input / submitted button
   ============================================================ */

.scoring-input-cell {
    width: 16%;

    background: #ffffff;

    text-align: center;
}

.scoring-end-input-button {
    display: block;

    width: 80%;

    margin-left: 10%;
    padding: 15px 0;

    border: 0;
    border-radius: 8px;

    background: #d06ae7;
    color: #000000;

    font-family: inherit;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.1;

    text-align: center;
}

.scoring-end-input-button.is-saved {
    background: #e0e0e0;
}


/* ============================================================
   End number
   ============================================================ */

.scoring-end-number {
    width: 6%;

    background: #ffffff;

    font-size: 65px;
    font-weight: 400;
    line-height: 1;

    text-align: center;
}


/* ============================================================
   Arrow score
   ============================================================ */

.scoring-arrow-score {
    width: 9%;
    height: 80px;

    overflow: hidden;

    background: #ffffff;

    font-size: 40px;
    font-weight: 400;
    line-height: 1;

    text-align: center;
    white-space: nowrap;
}


/* ============================================================
   Three-arrow subtotal
   ============================================================ */

.scoring-three-total {
    width: 9%;
    height: 80px;

    overflow: hidden;

    background: #ffffff;

    font-size: 40px;
    font-weight: 400;
    line-height: 1;

    text-align: center;
    white-space: nowrap;
}


/* ============================================================
   End total
   ============================================================ */

.scoring-end-total {
    overflow: hidden;

    background: #ffffff;

    font-size: 40px;
    font-weight: 400;
    line-height: 1;

    text-align: center;
    white-space: nowrap;
}


/* ============================================================
   Cumulative
   ============================================================ */

.scoring-cumulative {
    width: 14%;

    overflow: hidden;

    background: #ffffff;

    font-size: 44px;
    font-weight: 400;
    line-height: 1;

    text-align: center;
    white-space: nowrap;
}


/* ============================================================
   X / 10
   ============================================================ */

.scoring-x-count,
.scoring-ten-count {
    width: 9%;

    overflow: hidden;

    background: #ffffff;

    font-size: 40px;
    font-weight: 400;
    line-height: 1;

    text-align: center;
    white-space: nowrap;
}


/* ============================================================
   Total row
   ============================================================ */

.scoring-total-row td {
    background: #ffffff;
    color: #000000;
}

.scoring-total-label {
    font-size: 48px;
    font-weight: 400;
    line-height: 1;

    text-align: right;
}

.scoring-total-score,
.scoring-total-x,
.scoring-total-ten {
    font-size: 48px;
    font-weight: 400;
    line-height: 1;

    text-align: center;
}


/* ============================================================
   Participant confirmation
   ============================================================ */

.scoring-confirmation {
    width: 100%;

    padding: 1rem;

    background: #ffffff;

    text-align: center;
}

.scoring-confirmation h1 {
    font-weight: 400;
}

.scoring-confirmation-actions {
    display: flex;

    justify-content: center;

    gap: 1rem;
}

.scoring-confirmation button {
    font-family: inherit;
    font-weight: 400;
}


/* ============================================================
   Waiting
   ============================================================ */

.scoring-waiting {
    width: 100%;

    padding: 1.5rem 1rem;

    border: 1px solid #999999;

    background: #ffffff;

    text-align: center;
}

.scoring-waiting h2 {
    margin: 0 0 0.5rem;

    font-weight: 400;
}


/* ============================================================
   Score input modal
   ============================================================ */

.scoring-modal-backdrop {
    position: fixed;

    z-index: 99998;

    inset: 0;

    width: 100vw;
    height: 100dvh;

    background-color: rgba(30, 30, 30, 0.9);
}

.scoring-modal {
    position: fixed;

    z-index: 99999;

    top: 10%;
    left: 50%;

    width: 90%;
    height: 80dvh;

    max-height: calc(100dvh - 1rem);

    padding: 10px 30px;

    overflow: visible;

    transform: translate(-50%, -10%);

    border: 0;

    background-color: #ffffff;
}

.scoring-modal * {
    font-family: inherit;
    font-weight: 400;
}


/* ============================================================
   Modal close bar
   ============================================================ */

.scoring-modal-close {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5vh;

    min-height: 0;

    padding: 5px;

    border: 0;
    border-radius: 0;

    background-color: #c0c0c0;
    color: #000000;

    cursor: pointer;

    font-family: inherit;
    font-size: 3vh;
    font-weight: 400;

    text-align: right;
}


/* ============================================================
   Modal contents
   ============================================================ */

.scoring-modal-contents {
    position: relative;

    width: 100%;
    height: calc(100% - 5vh);

    margin-top: 5vh;
}

.scoring-modal-info {
    position: absolute;

    top: 7vh;
    left: 1%;

    width: 98%;
    height: 43%;
}


/* ============================================================
   Modal score information
   ============================================================ */

.scoring-end-info-table,
.scoring-modal-score-table {
    display: table;

    width: 100%;

    margin: 0;

    border-collapse: collapse;

    background: #ffffff;

    text-align: center;
}

.scoring-end-info-table td,
.scoring-modal-score-table td {
    border: 1px solid #999999;

    background: #ffffff;

    text-align: center;
    vertical-align: middle;
}

.scoring-end-info-stage {
    width: 40%;

    font-size: 3vh;
}

.scoring-end-info-end {
    width: 60%;

    font-size: 3vh;
}

.scoring-modal-arrow-cell {
    width: 20%;
    height: 8vh;

    padding: 0;
}

.scoring-modal-arrow {
    display: block;

    width: 95%;
    height: 100%;

    margin: 0 auto;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: #ffffff;
    color: #000000;

    font-family: inherit;
    font-size: 3vh;
    font-weight: 400;

    text-align: center;

    outline: none;
}

.scoring-modal-arrow.is-selected {
    background: #7cff7c;
    color: #000000;

    outline: none;

    box-shadow: inset 0 0 0 2px #5bcf5b;
}

.scoring-modal-subtotal {
    width: 20%;

    font-size: 3vh;
}

.scoring-modal-total {
    width: 20%;

    font-size: 3vh;
}


/* ============================================================
   Modal keypad
   ============================================================ */

.scoring-modal-button-container {
    position: absolute;

    z-index: 100000;

    bottom: 0;
    left: 2%;

    width: 96%;
    height: 50%;

    font-size: 400%;
}

.scoring-button-table {
    display: table;

    width: 100%;
    height: 100%;

    margin: 0;

    border-collapse: collapse;
}

.scoring-button-cell {
    width: 27%;
    height: 25%;

    padding: 0;
}

.scoring-button-cell--erase {
    width: 19%;
}

.scoring-button-cell--send {
    width: 19%;
}

.scoring-key {
    display: block;

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;
    border-radius: 8px;

    font-family: inherit;
    font-size: 4vh;
    font-weight: 400;

    text-align: center;
    text-decoration: none;

    box-sizing: border-box;

    touch-action: manipulation;
}

.scoring-key--yellow {
    background: #ffd700;
    color: #000000;
}

.scoring-key--red {
    background: #ff0000;
    color: #000000;
}

.scoring-key--blue {
    background: #0000ff;
    color: #ffffff;
}

.scoring-key--black {
    background: #000000;
    color: #ffffff;
}

.scoring-key--white {
    background: #ffffff;
    color: #000000;
}

.scoring-key--erase {
    background: #c0c0c0;
    color: #000000;

    font-size: 2vh;
}

.scoring-key--send {
    background: #c0c0c0;
    color: #000000;

    font-size: 3vh;
}

.scoring-key--disabled {
    background: #e0e0e0;
    color: #888888;
}


/* ============================================================
   Modal message
   ============================================================ */

.scoring-sheet-message {
    position: absolute;

    left: 0;
    bottom: -2.2rem;

    width: 100%;
    min-height: 1.4rem;

    margin: 0;

    color: #b91c1c;

    font-size: 0.9rem;

    text-align: center;
}


/* ============================================================
   Focus
   ============================================================ */

.scoring-header button:focus-visible,
.scoring-score-table button:focus-visible,
.scoring-confirmation button:focus-visible,
.scoring-modal button:focus-visible {
    outline: 3px solid #f97316;
    outline-offset: 2px;
}

.scoring-modal-arrow.is-selected:focus-visible {
    outline: none;

    box-shadow: inset 0 0 0 2px #5bcf5b;
}


/* ============================================================
   Smartphone
   ============================================================ */

@media (max-width: 560px) {

    .practice-session-item {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    html,
    body {
        touch-action: manipulation;
    }

    body.scoring-mode,
    body.scoring-mode .main,
    body.scoring-mode .scoring-page,
    body.scoring-mode .scoring-page * {
        touch-action: manipulation;
    }

    body.scoring-mode {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body.scoring-mode button,
    body.scoring-mode a,
    body.scoring-mode input,
    body.scoring-mode select,
    body.scoring-mode textarea {
        touch-action: manipulation;
    }

    body.scoring-mode .main {
        padding: 0;
    }

    .scoring-page {
        width: 98%;
        max-width: none;

        margin: 0 auto;
    }


    /* ========================================================
       Header controls
       ======================================================== */

    .scoring-header {
        padding: 5px;
    }

    .scoring-header button {
        padding: 0.1em;
    }

    .scoring-stage-button {
        font-size: 18px;
    }

    .scoring-report-button,
    .scoring-refresh-button {
        font-size: 18px;
    }


    /* ========================================================
       Information area common
       ======================================================== */

    .scoring-info-table
    .scoring-info-stacked-cell {
        vertical-align: top;
    }

    .scoring-info-table
    .scoring-info-field {
        min-height: 48px;
    }


    /* ========================================================
       Information label
       ======================================================== */

    .scoring-info-field-label {
        flex: 0 0 10px;

        width: 100%;
        height: 10px;
        min-height: 10px;

        margin: 0;
        padding: 1px 3px 0;

        font-size: 8px;
        line-height: 1;

        text-align: left;

        white-space: nowrap;
    }


    /* ========================================================
       Information value
       ======================================================== */

    .scoring-info-field-value {
        flex: 1 1 auto;

        width: 100%;
        min-height: 38px;

        padding: 0 3px 2px;

        align-items: center;
        justify-content: center;

        font-size: 17px;
        line-height: 1.08;

        white-space: normal;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /* ========================================================
       Competition name
       ======================================================== */

    .scoring-info-table--competition
    .scoring-info-field {
        min-height: 48px;
    }

    .scoring-info-table--competition
    .scoring-info-field-value {
        min-height: 38px;
    }

    .scoring-info-value--competition {
        font-size: 18px;
        line-height: 1.08;
    }


    /* ========================================================
       Venue / date
       ======================================================== */

    .scoring-info-table--venue
    .scoring-info-field {
        min-height: 48px;
    }

    .scoring-info-table--venue
    .scoring-info-field-value {
        min-height: 38px;
    }

    .scoring-info-value--venue {
        font-size: 17px;
        line-height: 1.05;
    }

    .scoring-info-value--date {
        font-size: 16px;
        line-height: 1.05;

        white-space: nowrap;
    }


    /* ========================================================
       Player / category
       ======================================================== */

    .scoring-info-table--participant
    .scoring-info-field {
        min-height: 48px;
    }

    .scoring-info-table--participant
    .scoring-info-field-value {
        min-height: 38px;
    }

    .scoring-player-name {
        font-size: 19px;
        line-height: 1.05;
    }

    .scoring-category {
        font-size: 16px;
        line-height: 1.05;
    }


    /* ========================================================
       Affiliation / organization / assignment
       ======================================================== */

    .scoring-info-table--assignment
    .scoring-info-field {
        min-height: 48px;
    }

    .scoring-info-table--assignment
    .scoring-info-field-value {
        min-height: 38px;

        padding: 0 3px 2px;

        align-items: center;
        justify-content: center;
    }

    .scoring-affiliation {
        font-size: 18px;
        line-height: 1.05;
    }

    .scoring-organization {
        font-size: 15px;
        line-height: 1.05;
    }

    .scoring-assignment {
        font-size: 20px;
        line-height: 1.05;
    }


    /* ========================================================
       Score table heading
       ======================================================== */

    .scoring-table-heading {
        font-size: 14px;
        line-height: 1.05;
    }


    /* ========================================================
       Input button
       ======================================================== */

    .scoring-end-input-button {
        width: 80%;

        margin-left: 10%;
        padding: 6px 0;

        font-size: 12px;
    }


    /* ========================================================
       Scores
       ======================================================== */

    .scoring-end-number {
        font-size: 30px;
    }

    .scoring-arrow-score {
        height: 38px;

        font-size: 20px;
    }

    .scoring-three-total {
        height: 38px;

        font-size: 20px;
    }

    .scoring-end-total {
        font-size: 21px;
    }

    .scoring-cumulative {
        font-size: 22px;
    }

    .scoring-x-count,
    .scoring-ten-count {
        font-size: 20px;
    }

    .scoring-total-label,
    .scoring-total-score,
    .scoring-total-x,
    .scoring-total-ten {
        font-size: 24px;
    }


    /* ========================================================
       Modal
       ======================================================== */

    .scoring-modal {
        width: 90%;
        height: 80dvh;

        max-height: calc(100dvh - 1rem);

        padding: 10px 15px;
    }

    .scoring-modal-contents {
        height: calc(100% - 5vh);

        margin-top: 5vh;
    }

    .scoring-modal-info {
        top: 7vh;

        height: 43%;
    }

    .scoring-end-info-stage,
    .scoring-end-info-end,
    .scoring-modal-arrow,
    .scoring-modal-subtotal,
    .scoring-modal-total {
        font-size: 3vh;
    }

    .scoring-modal-button-container {
        left: 2%;

        width: 96%;
        height: 50%;
    }

    .scoring-key {
        font-size: 4vh;
    }

    .scoring-key--erase {
        font-size: 2vh;
    }

    .scoring-key--send {
        font-size: 3vh;
    }

    .scoring-modal-arrow.is-selected {
        background: #7cff7c;
        color: #000000;

        outline: none;

        box-shadow: inset 0 0 0 2px #5bcf5b;
    }
}


/* ============================================================
   PC / Tablet
   ============================================================ */

@media (min-width: 561px) {

    /*
     * ========================================================
     * 基本方針
     * ========================================================
     *
     * PC / Tabletでは横幅基準にしない。
     *
     * 縦方向の描画領域を基準にスコアシート全体を決定する。
     *
     * 外形比率：
     * 横 : 縦 = 9 : 16
     *
     * CSS aspect-ratioでは
     * width / height = 9 / 16
     *
     * つまり縦長の9:16。
     *
     * 横長PCでも980pxまで広がらず、
     * SPに近い縦長のスコアシート形状を維持する。
     */

    body.scoring-mode .main {
        padding-top: 0;
        padding-bottom: 0;
    }


    /* ========================================================
       Scoring page outer size
       ======================================================== */

    .scoring-page {
        /*
         * SCUROAヘッダー以下で使える領域を想定。
         *
         * 高さを基準とし、その高さの9/16を横幅とする。
         *
         * 100dvhそのものでは上部SCUROAヘッダー分があるため、
         * 約86dvhをスコア描画領域として使用する。
         */

        width: min(
            94vw,
            calc(86dvh * 9 / 16)
        );

        max-width: none;

        min-width: 0;

        margin: 0 auto;
        padding: 0;

        background: #ffffff;
    }


    /* ========================================================
       Header controls
       ======================================================== */

    .scoring-header {
        width: 100%;

        margin: 0;
        padding:
            clamp(3px, 0.45dvh, 5px)
            clamp(3px, 0.5dvh, 6px);
    }

    .scoring-header-buttons {
        display: flex;

        width: 100%;

        align-items: stretch;
        justify-content: space-evenly;

        gap: 0;
    }

    .scoring-header button {
        width: 18%;

        min-height: clamp(31px, 4.7dvh, 45px);

        padding: 0;

        border-radius: clamp(6px, 0.8dvh, 9px);

        line-height: 1;
    }

    .scoring-stage-button {
        font-size: clamp(19px, 2.50dvh, 27px);
    }

    .scoring-report-button,
    .scoring-refresh-button {
        font-size: clamp(19px, 2.55dvh, 28px);
    }


    /* ========================================================
       Information common
       ======================================================== */

    .scoring-info-table
    .scoring-info-stacked-cell {
        vertical-align: top;
    }

    .scoring-info-table
    .scoring-info-field {
        min-height: clamp(43px, 6.2dvh, 58px);
    }


    /* ========================================================
       Information label
       ======================================================== */

    .scoring-info-field-label {
        flex: 0 0 clamp(10px, 1.35dvh, 14px);

        width: 100%;

        height: clamp(10px, 1.35dvh, 14px);
        min-height: clamp(10px, 1.35dvh, 14px);

        margin: 0;

        padding:
            clamp(1px, 0.12dvh, 2px)
            clamp(3px, 0.45dvh, 5px)
            0;

        font-size: clamp(8px, 1.00dvh, 10px);
        line-height: 1;

        text-align: left;

        white-space: nowrap;
    }


    /* ========================================================
       Information value
       ======================================================== */

    .scoring-info-field-value {
        flex: 1 1 auto;

        width: 100%;

        min-height: clamp(33px, 4.85dvh, 44px);

        padding:
            0
            clamp(3px, 0.45dvh, 5px)
            clamp(1px, 0.15dvh, 2px);

        align-items: center;
        justify-content: center;

        font-size: clamp(17px, 2.25dvh, 24px);
        line-height: 1.04;

        white-space: normal;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /* ========================================================
       Competition name
       ======================================================== */

    .scoring-info-table--competition
    .scoring-info-field {
        min-height: clamp(43px, 6.2dvh, 58px);
    }

    .scoring-info-table--competition
    .scoring-info-field-value {
        min-height: clamp(33px, 4.85dvh, 44px);
    }

    .scoring-info-value--competition {
        font-size: clamp(18px, 2.35dvh, 26px);
        line-height: 1.04;
    }


    /* ========================================================
       Venue / date
       ======================================================== */

    .scoring-info-table--venue
    .scoring-info-field {
        min-height: clamp(43px, 6.2dvh, 58px);
    }

    .scoring-info-table--venue
    .scoring-info-field-value {
        min-height: clamp(33px, 4.85dvh, 44px);
    }

    .scoring-info-value--venue {
        font-size: clamp(17px, 2.25dvh, 24px);
        line-height: 1.04;
    }

    .scoring-info-value--date {
        font-size: clamp(16px, 2.10dvh, 22px);
        line-height: 1.04;

        white-space: nowrap;
    }


    /* ========================================================
       Player / category
       ======================================================== */

    .scoring-info-table--participant
    .scoring-info-field {
        min-height: clamp(43px, 6.2dvh, 58px);
    }

    .scoring-info-table--participant
    .scoring-info-field-value {
        min-height: clamp(33px, 4.85dvh, 44px);
    }

    .scoring-player-name {
        font-size: clamp(18px, 2.40dvh, 26px);
        line-height: 1.04;
    }

    .scoring-category {
        font-size: clamp(16px, 2.10dvh, 22px);
        line-height: 1.04;
    }


    /* ========================================================
       Affiliation / organization / assignment
       ======================================================== */

    .scoring-info-table--assignment
    .scoring-info-field {
        min-height: clamp(43px, 6.2dvh, 58px);
    }

    .scoring-info-table--assignment
    .scoring-info-field-value {
        min-height: clamp(33px, 4.85dvh, 44px);

        padding:
            0
            clamp(3px, 0.45dvh, 5px)
            clamp(1px, 0.15dvh, 2px);

        align-items: center;
        justify-content: center;
    }

    .scoring-affiliation {
        font-size: clamp(17px, 2.25dvh, 24px);
        line-height: 1.04;
    }

    .scoring-organization {
        font-size: clamp(14px, 1.90dvh, 20px);
        line-height: 1.04;
    }

    .scoring-assignment {
        font-size: clamp(18px, 2.40dvh, 26px);
        line-height: 1.04;
    }


    /* ========================================================
       Score table heading
       ======================================================== */

    .scoring-table-heading {
        height: clamp(26px, 3.55dvh, 34px);

        padding: 0;

        font-size: clamp(15px, 1.95dvh, 21px);
        font-weight: 600;
        line-height: 1;

        vertical-align: middle;
    }


    /* ========================================================
       Score rows
       ======================================================== */

    .scoring-arrow-score {
        width: 9%;

        height: clamp(33px, 4.45dvh, 43px);

        overflow: hidden;

        font-size: clamp(19px, 2.50dvh, 27px);
        line-height: 1;

        text-align: center;
        white-space: nowrap;
    }

    .scoring-three-total {
        width: 9%;

        height: clamp(33px, 4.45dvh, 43px);

        overflow: hidden;

        font-size: clamp(19px, 2.50dvh, 27px);
        line-height: 1;

        text-align: center;
        white-space: nowrap;
    }


    /* ========================================================
       End number
       ======================================================== */

    .scoring-end-number {
        width: 6%;

        font-size: clamp(30px, 4.15dvh, 44px);
        line-height: 1;

        text-align: center;
        vertical-align: middle;
    }


    /* ========================================================
       Input / submitted button
       ======================================================== */

    .scoring-end-input-button {
        display: block;

        width: 82%;

        margin-left: 9%;

        padding:
            clamp(5px, 0.7dvh, 8px)
            0;

        border: 0;
        border-radius: clamp(6px, 0.8dvh, 9px);

        font-size: clamp(12px, 1.45dvh, 16px);
        line-height: 1;

        text-align: center;
    }


    /* ========================================================
       End total
       ======================================================== */

    .scoring-end-total {
        overflow: hidden;

        font-size: clamp(19px, 2.50dvh, 27px);
        line-height: 1;

        text-align: center;
        white-space: nowrap;
    }


    /* ========================================================
       Cumulative
       ======================================================== */

    .scoring-cumulative {
        width: 14%;

        overflow: hidden;

        font-size: clamp(21px, 2.85dvh, 31px);
        line-height: 1;

        text-align: center;
        white-space: nowrap;
    }


    /* ========================================================
       X / 10
       ======================================================== */

    .scoring-x-count,
    .scoring-ten-count {
        width: 9%;

        overflow: hidden;

        font-size: clamp(19px, 2.50dvh, 27px);
        line-height: 1;

        text-align: center;
        white-space: nowrap;
    }


    /* ========================================================
       Total row
       ======================================================== */

    .scoring-total-row td {
        height: clamp(29px, 3.9dvh, 38px);

        background: #ffffff;
        color: #000000;
    }

    .scoring-total-label {
        font-size: clamp(19px, 2.55dvh, 27px);
        line-height: 1;

        text-align: right;
    }

    .scoring-total-score,
    .scoring-total-x,
    .scoring-total-ten {
        font-size: clamp(19px, 2.55dvh, 27px);
        line-height: 1;

        text-align: center;
    }


    /* ========================================================
       Confirmation
       ======================================================== */

    .scoring-confirmation {
        padding: clamp(8px, 1dvh, 12px);
    }

    .scoring-confirmation h1 {
        margin:
            clamp(4px, 0.5dvh, 7px)
            0;

        font-size: clamp(20px, 2.8dvh, 30px);
    }


    /* ========================================================
       Waiting
       ======================================================== */

    .scoring-waiting {
        padding:
            clamp(8px, 1.2dvh, 14px)
            1rem;
    }

    .scoring-waiting h2 {
        margin: 0 0 clamp(3px, 0.45dvh, 6px);

        font-size: clamp(18px, 2.5dvh, 27px);
    }


    /* ========================================================
       Modal
       ======================================================== */

    .scoring-modal {
        max-width: min(
            94vw,
            calc(95dvh * 9 / 16)
        );
    }
}


/* ============================================================
   Tablet
   ============================================================ */

@media (min-width: 561px) and (max-width: 1100px) {

    /*
     * TabletもPCと同じく縦基準。
     *
     * ただしサイドメニュー等で横幅が不足する場合は
     * viewport幅94%を上限として自然に縮小する。
     */

    .scoring-page {
        width: min(
            94vw,
            calc(86dvh * 9 / 16)
        );

        max-width: none;
    }
}