/* ==================================================
   共通設定
================================================== */

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

:root {
    --background: #050c15;

    --panel: #07111e;
    --panel-light: #122237;

    --border: #2d425d;

    --text: #f7f9fc;
    --muted: #91a0b3;

    --red: #ff1738;
    --red-dark: #a90923;

    --blue: #087cff;
    --blue-dark: #0750b7;

    --yellow: #ffd21a;
    --warning-red: #ff304d;
}

body {
    width: 100%;
    min-height: 100vh;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at center,
            #172b43 0%,
            #091525 42%,
            #030811 100%
        );

    color: var(--text);

    font-family:
        Arial,
        "Noto Sans JP",
        Helvetica,
        sans-serif;

    user-select: none;
}


/* ==================================================
   全体
================================================== */

.scoreboard {
    width: min(1500px, 96vw);

    min-height: 100vh;

    margin: 0 auto;

    padding: 22px 0 28px;
}


/* ==================================================
   ヘッダー
================================================== */

.app-header {
    display: flex;

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

    gap: 28px;

    margin-bottom: 20px;

    text-align: center;
}

.header-line {
    width: clamp(40px, 9vw, 140px);

    height: 2px;

    background: #52667f;
}

.header-title h1 {
    font-size: clamp(22px, 3vw, 44px);

    letter-spacing: 4px;

    font-weight: 800;
}

.header-title p {
    margin-top: 4px;

    color: #aebbc9;

    font-size: clamp(12px, 1.3vw, 18px);

    letter-spacing: 4px;
}


/* ==================================================
   赤・中央・青
================================================== */

.board {
    display: grid;

    grid-template-columns:
        minmax(250px, 1fr)
        minmax(300px, 0.75fr)
        minmax(250px, 1fr);

    gap: 22px;

    align-items: start;
}


/* ==================================================
   赤・青の得点板
================================================== */

.fighter {
    min-width: 0;

    overflow: hidden;

    background: var(--panel);

    border: 2px solid;

    border-radius: 18px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.38);
}

.fighter.red {
    border-color: var(--red);
}

.fighter.blue {
    border-color: var(--blue);
}


/* ==================================================
   赤・青タイトル
================================================== */

.fighter-title {
    height: 78px;

    display: flex;

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

    font-size: clamp(34px, 4vw, 58px);

    font-weight: 900;
}

.fighter.red .fighter-title {
    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--red-dark)
        );
}

.fighter.blue .fighter-title {
    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--blue-dark)
        );
}


/* ==================================================
   得点
================================================== */

.score {
    height: clamp(250px, 30vw, 390px);

    display: flex;

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

    background:
        linear-gradient(
            145deg,
            #0a1421,
            #030811
        );

    color: white;

    font-size: clamp(130px, 17vw, 250px);

    font-weight: 800;

    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.08s ease,
        filter 0.15s ease;

    border: none;
}

.fighter.red .score,
.fighter.blue .score {
    border: none;
}

.score:active {
    transform: scale(0.985);

    filter: brightness(1.3);
}


/* ==================================================
   反則部分
================================================== */

.penalty {
    padding: 16px;

    background: #050c15;

    border-top: 2px solid;
}

.fighter.red .penalty {
    border-top-color: var(--red);
}

.fighter.blue .penalty {
    border-top-color: var(--blue);
}

.fighter.red .penalty,
.fighter.blue .penalty {
    border-left: none;
    border-right: none;
    border-bottom: none;
}


/* ==================================================
   C 反則
================================================== */

.penalty-c {
    min-height: 58px;

    display: flex;

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

    gap: 10px;

    cursor: pointer;
}

.penalty-c strong {
    font-size: 102px;

    line-height: 1;
}

.penalty-c span {
    color: var(--muted);

    font-size: 16px;

    font-weight: bold;
}

.red .penalty-c {
    color: white;
}

.blue .penalty-c {
    color: white;
}


/* ==================================================
   反則カード
================================================== */

.cards {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 9px;
}

.card {
    aspect-ratio: 1 / 0.72;

    display: flex;

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

    border-radius: 8px;

    background: #1a2839;

    border: 2px solid #354960;

    color: #728197;

    font-size: clamp(15px, 1.6vw, 25px);

    font-weight: bold;

    transition: 0.15s ease;
}

.red .card.active {
    background: var(--red);

    border-color: #ff7187;

    color: white;

    box-shadow:
        0 0 16px rgba(255, 23, 56, 0.4);
}

.blue .card.active {
    background: var(--blue);

    border-color: #72baff;

    color: white;

    box-shadow:
        0 0 16px rgba(8, 124, 255, 0.4);
}


/* ==================================================
   中央エリア
================================================== */

.center-area {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 18px;
}


/* ==================================================
   先取
================================================== */

.first-point-box {
    width: 100%;

    padding: 18px;

    background:
        linear-gradient(
            145deg,
            #0c1929,
            #050c15
        );

    border: 2px solid var(--border);

    border-radius: 18px;

    text-align: center;
}

.first-point-box h2 {
    margin-bottom: 16px;

    color: #dce4ed;

    font-size: 28px;
}

.first-point-buttons {
    display: flex;

    justify-content: center;

    gap: 45px;
}

.first-point {
    width: 68px;
    height: 68px;

    border-radius: 50%;

    cursor: pointer;

    border: 5px solid #566980;

    box-shadow:
        inset 0 0 0 5px #0b1522;

    transition: 0.15s ease;
}

.red-first {
    background: #571526;
}

.blue-first {
    background: #164779;
}

.red-first.active {
    background: var(--red);

    box-shadow:
        0 0 24px rgba(255, 23, 56, 0.55),
        inset 0 0 0 5px white;
}

.blue-first.active {
    background: var(--blue);

    box-shadow:
        0 0 24px rgba(8, 124, 255, 0.55),
        inset 0 0 0 5px white;
}


/* ==================================================
   タイマー
================================================== */

.timer {
    position: relative;

    width: min(100%, 360px);

    aspect-ratio: 1;

    display: flex;

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

    background:
        radial-gradient(
            circle,
            #102137 0%,
            #07101b 63%,
            #030811 100%
        );

    border: 12px solid #172b42;

    border-radius: 50%;

    box-shadow:
        0 0 0 3px #3a506b,
        inset 0 0 35px rgba(0, 0, 0, 0.8),
        0 18px 45px rgba(0, 0, 0, 0.45);

    color: white;

    font-size: clamp(55px, 6vw, 82px);

    font-weight: 800;

    letter-spacing: 2px;

    cursor: pointer;
}

.timer::before {
    content: "";

    position: absolute;

    inset: -15px;

    border-radius: 50%;

    border: 7px solid var(--yellow);

    pointer-events: none;

    z-index: 1;
}

.timer-warning::before {
    border-color: var(--warning-red);
}

.timer-warning {
    color: var(--warning-red);

    text-shadow:
        0 0 18px rgba(255, 48, 77, 0.55);
}


/* ==================================================
   タイマー操作ボタン
================================================== */

.timer-controls {
    width: 100%;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}

.timer-setting,
.reset-button {
    min-height: 66px;

    display: flex;

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

    gap: 9px;

    border-radius: 13px;

    border: 2px solid #344b65;

    background:
        linear-gradient(
            145deg,
            #182a40,
            #0c1827
        );

    color: white;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.15s ease;
}

.timer-setting span,
.reset-button span {
    font-size: 27px;
}

.timer-setting:hover,
.reset-button:hover {
    filter: brightness(1.3);
}

.reset-button {
    border-color: #713044;
}


/* ==================================================
   タイマー設定モーダル
================================================== */

.timer-modal {
    display: none;

    position: fixed;

    inset: 0;

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

    background:
        rgba(0, 0, 0, 0.78);

    z-index: 100;
}

.timer-setting-box {
    width: min(90vw, 600px);

    min-height: 420px;

    padding: 45px;

    background:
        linear-gradient(
            145deg,
            #142237,
            #091321
        );

    border: 2px solid #526983;

    border-radius: 20px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.6);

    text-align: center;
}

.timer-setting-box h2 {
    margin-bottom: 26px;

    font-size: 28px;
}

.setting-row {
    display: flex;

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

    gap: 18px;

    margin: 16px 0;
}

.setting-row label {
    width: 45px;

    color: #c9d3df;

    font-size: 20px;

    font-weight: bold;
}

.setting-row input,
.setting-row select {
    width: 130px;

    height: 52px;

    padding: 5px;

    background: #07101c;

    color: white;

    border: 2px solid #40546d;

    border-radius: 8px;

    font-size: 25px;

    text-align: center;
}

.setting-buttons {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-top: 28px;
}

.setting-buttons button {
    min-height: 52px;

    border-radius: 9px;

    background: #26384f;

    color: white;

    font-size: 17px;

    font-weight: bold;

    cursor: pointer;
}

#timerSet {
    background: #126dd2;
}

.setting-buttons button:hover {
    filter: brightness(1.2);
}


/* ==================================================
   PC
   画面が低い場合だけ縦方向を調整
   ※通常のPCレイアウトは変更しない
================================================== */

@media screen and (min-width: 1001px) and (max-height: 850px) {

    .scoreboard {
        min-height: 100vh;

        padding-top: 14px;
        padding-bottom: 14px;
    }

    .app-header {
        margin-bottom: 12px;
    }

    /*
       PCの画面高さが低い場合だけ
       得点部分を縮める。
       C・1～5まで画面内に収める。
    */
    .score {
        height: clamp(
            200px,
            calc(100vh - 380px),
            390px
        );
    }
}


/* ==================================================
   タブレット縦向き
   701px ～ 1000px
================================================== */

@media screen and (min-width: 701px)
       and (max-width: 1000px)
       and (orientation: portrait) {

    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .scoreboard {
        width: 96vw;

        min-height: 100vh;

        padding: 16px 0 22px;
    }

    .app-header {
        gap: 18px;

        margin-bottom: 14px;
    }

    .header-line {
        width: clamp(30px, 7vw, 90px);
    }

    .header-title h1 {
        font-size: clamp(22px, 3.2vw, 34px);

        letter-spacing: 3px;
    }

    .header-title p {
        font-size: clamp(11px, 1.5vw, 16px);

        letter-spacing: 2px;
    }

    .board {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(210px, 0.78fr)
            minmax(0, 1fr);

        gap: 12px;

        align-items: start;
    }

    .fighter {
        min-width: 0;
    }

    .fighter-title {
        height: clamp(56px, 7vw, 68px);

        font-size: clamp(30px, 4vw, 46px);
    }

    .score {
        height: clamp(230px, 31vw, 300px);

        font-size: clamp(105px, 15vw, 190px);
    }

    .penalty {
        padding: 10px;
    }

    .penalty-c {
        min-height: 50px;

        gap: 7px;
    }

    .penalty-c strong {
        font-size: clamp(60px, 8vw, 88px);
    }

    .penalty-c span {
        font-size: 13px;
    }

    .cards {
        gap: 6px;
    }

    .card {
        border-width: 1px;

        font-size: clamp(13px, 1.7vw, 20px);
    }

    .center-area {
        width: 100%;

        min-width: 0;

        gap: 12px;
    }

    .first-point-box {
        width: 100%;

        padding: 12px;
    }

    .first-point-box h2 {
        margin-bottom: 10px;

        font-size: clamp(20px, 2.8vw, 26px);
    }

    .first-point-buttons {
        gap: clamp(20px, 3vw, 35px);
    }

    .first-point {
        width: clamp(48px, 6vw, 60px);
        height: clamp(48px, 6vw, 60px);

        border-width: 4px;
    }

    .timer {
        width: min(100%, 270px);

        border-width: 9px;

        font-size: clamp(46px, 6vw, 68px);
    }

    .timer::before {
        inset: -12px;

        border-width: 6px;
    }

    .timer-controls {
        gap: 8px;
    }

    .timer-setting,
    .reset-button {
        min-width: 0;

        min-height: 54px;

        padding: 6px;

        font-size: 13px;
    }

    .timer-setting span,
    .reset-button span {
        font-size: 22px;
    }

    .timer-setting-box {
        width: min(90vw, 560px);

        min-height: 400px;

        padding: 38px;
    }
}


/* ==================================================
   スマートフォン縦向き
   700px以下
================================================== */

@media screen and (max-width: 700px)
       and (orientation: portrait) {

    html {
        width: 100%;

        min-width: 0;
    }

    body {
        width: 100%;

        min-width: 0;

        overflow-x: hidden;
        overflow-y: auto;
    }

    .scoreboard {
        width: 94vw;

        max-width: 100%;

        min-height: 100vh;

        margin: 0 auto;

        padding: 12px 0 20px;
    }

    .app-header {
        width: 100%;

        gap: 8px;

        margin-bottom: 10px;
    }

    .header-line {
        flex: 1 1 auto;

        width: auto;

        max-width: 45px;

        height: 2px;
    }

    .header-title {
        min-width: 0;
    }

    .header-title h1 {
        white-space: nowrap;

        font-size: clamp(16px, 5vw, 20px);

        letter-spacing: 1.5px;
    }

    .header-title p {
        font-size: 10px;

        letter-spacing: 1px;
    }

    /*
       スマホ縦は
       赤・青を左右
       中央エリアを下
    */
    .board {
        width: 100%;

        min-width: 0;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 8px;

        align-items: start;
    }

    .fighter {
        width: 100%;

        min-width: 0;

        border-width: 2px;

        border-radius: 14px;
    }

    .fighter-title {
        height: clamp(44px, 12vw, 52px);

        font-size: clamp(26px, 8vw, 34px);
    }

    .score {
        width: 100%;

        height: clamp(175px, 48vw, 205px);

        font-size: clamp(90px, 25vw, 145px);
    }

    .penalty {
        width: 100%;

        padding: 7px;

        border-top-width: 2px;
    }

    .penalty-c {
        min-height: 42px;

        gap: 5px;
    }

    .penalty-c strong {
        font-size: clamp(32px, 9vw, 46px);
    }

    .penalty-c span {
        font-size: 10px;
    }

    .cards {
        width: 100%;

        gap: 4px;
    }

    .card {
        min-width: 0;

        border-width: 1px;

        border-radius: 5px;

        font-size: clamp(10px, 3vw, 13px);
    }

    /*
       中央エリアは2段目
    */
    .center-area {
        grid-column: 1 / -1;

        grid-row: 2;

        width: 100%;

        min-width: 0;

        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;

        align-items: center;
    }

    .first-point-box {
        width: 100%;

        min-height: 0;

        padding: 10px;

        border-radius: 14px;
    }

    .first-point-box h2 {
        margin-bottom: 8px;

        font-size: 20px;
    }

    .first-point-buttons {
        gap: 24px;
    }

    .first-point {
        width: 46px;
        height: 46px;

        border-width: 4px;
    }

    .timer {
        width: min(58vw, 210px);

        max-width: 100%;

        justify-self: center;

        border-width: 8px;

        font-size: clamp(42px, 12vw, 52px);
    }

    .timer::before {
        inset: -10px;

        border-width: 5px;
    }

    .timer-controls {
        width: 100%;

        gap: 8px;
    }

    .timer-setting,
    .reset-button {
        min-width: 0;

        min-height: 52px;

        padding: 6px;

        border-radius: 10px;

        font-size: 13px;
    }

    .timer-setting span,
    .reset-button span {
        font-size: 21px;
    }

    .timer-setting-box {
        width: min(90vw, 500px);

        max-height: 90dvh;

        min-height: 0;

        padding: 28px 18px;

        overflow-y: auto;
    }

    .timer-setting-box h2 {
        margin-bottom: 20px;

        font-size: 23px;
    }

    .setting-row {
        gap: 12px;

        margin: 12px 0;
    }

    .setting-row label {
        width: 40px;

        font-size: 18px;
    }

    .setting-row input,
    .setting-row select {
        width: 120px;

        height: 48px;

        font-size: 21px;
    }

    .setting-buttons {
        gap: 8px;

        margin-top: 22px;
    }

    .setting-buttons button {
        min-height: 50px;

        font-size: 15px;
    }
}


/* ==================================================
   小さいスマートフォン縦向き
   380px以下
================================================== */

@media screen and (max-width: 380px)
       and (orientation: portrait) {

    .scoreboard {
        width: 94vw;

        padding-top: 10px;
    }

    .app-header {
        gap: 5px;

        margin-bottom: 8px;
    }

    .header-line {
        max-width: 30px;
    }

    .header-title h1 {
        font-size: 16px;

        letter-spacing: 1px;
    }

    .fighter {
        border-radius: 12px;
    }

    .fighter-title {
        height: 42px;

        font-size: 25px;
    }

    .score {
        height: 170px;

        font-size: clamp(82px, 25vw, 115px);
    }

    .penalty {
        padding: 6px;
    }

    .penalty-c {
        min-height: 38px;
    }

    .penalty-c strong {
        font-size: 34px;
    }

    .penalty-c span {
        font-size: 9px;
    }

    .cards {
        gap: 3px;
    }

    .card {
        font-size: 10px;

        border-radius: 4px;
    }

    .center-area {
        gap: 8px;
    }

    .first-point-box {
        padding: 8px;
    }

    .first-point-box h2 {
        font-size: 18px;

        margin-bottom: 7px;
    }

    .first-point-buttons {
        gap: 20px;
    }

    .first-point {
        width: 42px;
        height: 42px;
    }

    .timer {
        width: 175px;

        font-size: 40px;
    }

    .timer-setting,
    .reset-button {
        min-height: 50px;

        font-size: 12px;
    }

    .timer-setting span,
    .reset-button span {
        font-size: 20px;
    }
}


/* ==================================================
   タブレット・スマートフォン横向き
   ★ PCと同じ3列
   ★ 赤｜中央｜青
================================================== */

@media screen and (max-width: 1000px)
       and (orientation: landscape) {

    html,
    body {
        width: 100%;

        min-width: 0;

        height: 100%;
    }

    body {
        min-height: 100dvh;

        height: 100dvh;

        overflow: hidden;
    }

    .scoreboard {
        width: 96vw;

        max-width: 1500px;

        height: 100dvh;

        min-height: 0;

        margin: 0 auto;

        padding: 6px 0;
    }

    .app-header {
        width: 100%;

        gap: 10px;

        margin-bottom: 8px;
    }

    .header-line {
        flex: 1 1 0;

        width: auto;

        min-width: 18px;

        max-width: 90px;
    }

    .header-title {
        min-width: 0;
    }

    .header-title h1 {
        white-space: nowrap;

        font-size: clamp(16px, 3.2vw, 30px);

        letter-spacing: 1.5px;
    }

    .header-title p {
        font-size: clamp(8px, 1.4vw, 13px);

        letter-spacing: 1px;
    }


    /* ==================================================
       ★ ここが横向きの重要部分
       必ず
       赤｜中央｜青
       ================================================== */

    .board {
        width: 100%;

        min-width: 0;

        grid-template-columns:
            minmax(0, 1fr)
            clamp(120px, 22vw, 240px)
            minmax(0, 1fr);

        grid-template-rows: auto;

        gap: clamp(6px, 1vw, 10px);

        align-items: start;
    }


    /* ==================================================
       ★ 左：赤
    ================================================== */

    .fighter.red {
        grid-column: 1;

        grid-row: 1;

        width: 100%;

        min-width: 0;
    }


    /* ==================================================
       ★ 中央
    ================================================== */

    .center-area {
        /*
           スマホ縦向きで指定した
           grid-column: 1 / -1
           grid-row: 2
           をここで完全に解除
        */
        grid-column: 2;

        grid-row: 1;

        width: 100%;

        min-width: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: clamp(5px, 1.2vh, 12px);
    }


    /* ==================================================
       ★ 右：青
    ================================================== */

    .fighter.blue {
        grid-column: 3;

        grid-row: 1;

        width: 100%;

        min-width: 0;
    }


    /* ==================================================
       赤・青タイトル
    ================================================== */

    .fighter-title {
        height: clamp(32px, 7vh, 58px);

        font-size: clamp(20px, 4vw, 42px);
    }


    /* ==================================================
       得点
       高さ基準で調整
    ================================================== */

    .score {
        width: 100%;

        height:
            clamp(
                105px,
                calc(100vh - 215px),
                300px
            );

        font-size: clamp(65px, 17vh, 190px);
    }


    /* ==================================================
       反則
    ================================================== */

    .penalty {
        width: 100%;

        padding: clamp(4px, 1vh, 10px);

        border-top-width: 2px;
    }

    .penalty-c {
        min-height: clamp(28px, 7vh, 58px);

        gap: 5px;
    }

    .penalty-c strong {
        font-size: clamp(34px, 9vh, 92px);
    }

    .penalty-c span {
        font-size: clamp(7px, 1.8vh, 14px);
    }

    .cards {
        width: 100%;

        gap: clamp(2px, 0.7vw, 7px);
    }

    .card {
        min-width: 0;

        border-width: 1px;

        border-radius: 5px;

        font-size: clamp(8px, 2vh, 17px);
    }


    /* ==================================================
       先取
    ================================================== */

    .first-point-box {
        width: 100%;

        min-width: 0;

        padding:
            clamp(5px, 1.3vh, 12px);

        border-radius: 12px;
    }

    .first-point-box h2 {
        margin-bottom:
            clamp(3px, 1vh, 9px);

        font-size:
            clamp(13px, 3vh, 26px);
    }

    .first-point-buttons {
        gap:
            clamp(12px, 3vw, 34px);
    }

    .first-point {
        flex: 0 0 auto;

        width:
            clamp(30px, 7vh, 62px);

        height:
            clamp(30px, 7vh, 62px);

        border-width: 4px;
    }


    /* ==================================================
       タイマー
    ================================================== */

    .timer {
        width:
            min(
                100%,
                clamp(105px, 30vh, 280px)
            );

        flex: 0 0 auto;

        border-width:
            clamp(5px, 1.7vh, 11px);

        font-size:
            clamp(28px, 7vh, 72px);

        letter-spacing: 1px;
    }

    .timer::before {
        inset:
            clamp(-13px, -2vh, -7px);

        border-width:
            clamp(3px, 1.2vh, 7px);
    }


    /* ==================================================
       設定・リセット
    ================================================== */

    .timer-controls {
        width: 100%;

        min-width: 0;

        gap:
            clamp(4px, 0.8vw, 9px);
    }

    .timer-setting,
    .reset-button {
        min-width: 0;

        min-height:
            clamp(32px, 8vh, 58px);

        padding: 3px;

        border-radius: 8px;

        font-size:
            clamp(8px, 1.8vh, 15px);

        gap: 3px;
    }

    .timer-setting span,
    .reset-button span {
        font-size:
            clamp(13px, 3vh, 24px);
    }
}


/* ==================================================
   スマートフォン横向き
   高さが低い場合
================================================== */

@media screen and (max-width: 700px)
       and (orientation: landscape)
       and (max-height: 430px) {

    .scoreboard {
        width: 98vw;

        padding: 3px 0;
    }

    .app-header {
        gap: 6px;

        margin-bottom: 4px;
    }

    .header-line {
        min-width: 12px;

        max-width: 55px;
    }

    .header-title h1 {
        font-size:
            clamp(14px, 3.5vw, 20px);

        letter-spacing: 1px;
    }

    .header-title p {
        display: none;
    }


    /* ==================================================
       横向き3列を維持
       赤｜中央｜青
    ================================================== */

    .board {
        grid-template-columns:
            minmax(0, 1fr)
            clamp(108px, 21vw, 145px)
            minmax(0, 1fr);

        grid-template-rows: auto;

        gap: 5px;
    }

    .fighter.red {
        grid-column: 1;

        grid-row: 1;
    }

    .center-area {
        grid-column: 2;

        grid-row: 1;

        gap: 4px;
    }

    .fighter.blue {
        grid-column: 3;

        grid-row: 1;
    }


    /* ==================================================
       赤・青
    ================================================== */

    .fighter {
        border-radius: 9px;
    }

    .fighter-title {
        height: 28px;

        font-size:
            clamp(17px, 4vw, 25px);
    }

    .score {
        height:
            clamp(
                100px,
                calc(100vh - 150px),
                155px
            );

        font-size:
            clamp(52px, 18vh, 105px);
    }


    /* ==================================================
       反則
    ================================================== */

    .penalty {
        padding: 3px;
    }

    .penalty-c {
        min-height: 24px;

        gap: 3px;
    }

    .penalty-c strong {
        font-size: 30px;
    }

    .penalty-c span {
        font-size: 7px;
    }

    .cards {
        gap: 2px;
    }

    .card {
        font-size: 8px;

        border-radius: 3px;
    }


    /* ==================================================
       中央
    ================================================== */

    .first-point-box {
        padding: 4px;

        border-radius: 8px;
    }

    .first-point-box h2 {
        font-size: 11px;

        margin-bottom: 2px;
    }

    .first-point-buttons {
        gap: 10px;
    }

    .first-point {
        width: 27px;

        height: 27px;

        border-width: 3px;
    }


    /* ==================================================
       タイマー
    ================================================== */

    .timer {
        width:
            min(100%, 110px);

        border-width: 5px;

        font-size: 28px;
    }

    .timer::before {
        inset: -7px;

        border-width: 3px;
    }


    /* ==================================================
       操作
    ================================================== */

    .timer-controls {
        gap: 4px;
    }

    .timer-setting,
    .reset-button {
        min-height: 31px;

        padding: 2px;

        font-size: 8px;

        gap: 2px;

        border-radius: 6px;
    }

    .timer-setting span,
    .reset-button span {
        font-size: 13px;
    }
}