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

* {
    box-sizing: border-box;
}

body {

    margin: 0;

    background-image: url("images/game-background.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    background-attachment: fixed;

    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;

    color: white;

    min-height: 100vh;

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

}

/*フォント*/

@font-face {

    font-family: "DSEG7";

    src: url("./fonts/DSEG7Modern-Bold.woff2")
         format("woff2");

    font-weight: normal;

    font-style: normal;

}

@font-face {
    font-family: "Noto Sans JP";

    src:
        url("./fonts/NotoSansJP-Bold.woff2")
        format("woff2");

    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   ゲーム画面
========================================================= */

.game-screen {
    width: 1280px;
    height: 720px;

    margin: 0;

    box-sizing: border-box;

    position: relative;

    background: transparent;

    border: none;
    box-shadow: none;
}

/* =========================================================
   上部ステータス
========================================================= */

.top-bar {

    position: relative;

    width: 900px;
    margin: 0 auto;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 30px;

    box-sizing: border-box;

    background:
        linear-gradient(
            #151515,
            #292929,
            #111
        );

    border: 3px solid #a67b2d;

    box-shadow:
        inset 0 0 10px #000,
        0 3px 0 #080808;
}

.question-number {

    font-size: 25px;

    font-weight: bold;

    text-shadow:
        2px 2px 3px #000;

}

.quiz-type {

    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    font-size: 25px;

    font-weight: bold;

    color: #ffffff;

    text-shadow:
        2px 2px 3px #000;

    white-space: nowrap;

}

.accuracy {

    font-size: 25px;

    font-weight: bold;

    text-shadow:
        2px 2px 3px #000;

}

.question-number span,
.accuracy span {

    color: #ffd84d;

    font-size: 25px;
}


/* =========================================================
   メインエリア
========================================================= */

.main-area {

    display: grid;

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

    gap: 20px;

    margin-top: 20px;

    align-items: start;
}


/* =========================================================
   左右エリア
========================================================= */

.left-area {

    display: flex;

    flex-direction: column;

    gap: 20px;
}

.right-area {

    display: flex;

    flex-direction: column;

    gap: 20px;
}


/* =========================================================
   スコアボックス
========================================================= */

.score-box {

    position: relative;

    left: 0px;
    top: 0;

 width: 150px;
    height: 150px;


    background:
        linear-gradient(
            #292929,
            #080808
        );

    border: 4px solid #9b7734;

    box-shadow:
        inset 0 0 12px #000,
        0 5px 0 #0b0805;

    text-align: center;
}

.box-title {

    padding: 8px;

    background:
        linear-gradient(
            #3d3d3d,
            #171717
        );

    border-bottom:
        2px solid #9b7734;

    font-size: 22px;

    font-weight: bold;

    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;
}

.point-value {

    padding: 5px 5px;

    transform: translateY(20px);

    font-size: 35px;

    color: #ffd83d;

    font-weight: bold;

          font-family:
        "DSEG7",
        sans-serif;
}



/* =========================================================
   合計スコア
========================================================= */

.total-score {

    width: 200px;
    height: 200px;

        position: relative;

    left: 0px;
    top: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #153b70,
            #061326
        );
}

.total-score .box-title {

    background: transparent;

    border: none;

        font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;
}

.score-value {

    font-size: 35px;

    font-weight: bold;

    color: white;

    font-family:
        "DSEG7",
        sans-serif;
}


/* =========================================================
   問題エリア
========================================================= */

/* =========================================================
   問題文を最前面に表示
========================================================= */

/*.question-text {

 font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

    position: relative;
    
    transform: translateY(-20px);

    z-index: 9999;

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    text-align: left;

}

/* =========================================================
   問題エリア
========================================================= */

.question-area {

    position: relative;

    width: 100%;

    margin: 0 auto;

    height: 273px;
    min-height: 273px;
    max-height: 273px;

    box-sizing: border-box;

    padding: 20px 30px 55px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #000000 90%,
            #272924 100%
        );

    border: 5px solid #9b7734;

    box-shadow:
        inset 0 0 25px #8f7950,
        0 5px 10px #000;

    color: #271b0e;

}

/* =========================================================
   正解履歴
========================================================= */

.answer-history {

    position: absolute;

    left: 0;
    bottom: 5px;

    width: 100%;

    height: 25px;
    min-height: 25px;

    display: flex;

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

    gap: 8px;

    margin: 0;

    flex-shrink: 0;

    overflow: hidden;

    white-space: nowrap;

    font-size: 18px;
}


.answer-history span {

    width: 10px;

    height: 25px;

    display: inline-flex;

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

    flex-shrink: 0;

    font-size: 20px;

    font-weight: bold;

    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;
}


.answer-history .correct {

    color: #d32929;
}


.answer-history .wrong {

    color: #245bb5;
}


/* =========================================================
   問題文
========================================================= */

.question-text {

    z-index: 100;
    position: absolute;


     /*上から20px移動*/
    top: 20px;
    left: 0;

     /*横幅472pxまで*/
    width: 473px;

    /*height: 192px;*/

    display: flex;

    justify-content: flex-start;
    align-items: flex-start;

    /*padding-left: 10px;*/

    box-sizing: border-box;

    text-align: left;

    font-size: 24px;

    font-weight: bold;

    font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

    line-height: 1.6;

    white-space: pre-line;

    overflow: hidden;

    color: #ffffff;


text-shadow:
    -2px -2px 0 #000,
     0   -2px 0 #000,
     2px -2px 0 #000,
    -2px  0   0 #000,
     2px  0   0 #000,
    -2px  2px 0 #000,
     0    2px 0 #000,
     2px  2px 0 #000;

}
/* =========================================================
   結果表示
========================================================= */

.result {

    min-height: 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 32px;

    font-weight: bold;

    text-shadow:
        2px 2px 3px #000;
}


/* =========================================================
   結果表示
========================================================= */

.result {

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.5);

    min-height: auto;

    display: flex;

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

    font-size: 64px;

    font-weight: bold;

    white-space: nowrap;

    text-shadow:
        3px 3px 0 #000,
        -3px -3px 0 #000,
        3px -3px 0 #000,
        -3px 3px 0 #000,
        0 0 15px rgba(255,255,255,0.7);

    z-index: 200;

    pointer-events: none;

    opacity: 0;

}

/*正解*/

.result.show-correct {

    opacity: 1;

    animation:
        result-correct
        0.35s
        ease-out
        forwards;
}


@keyframes result-correct {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.3);

    }

    60% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.15);

    }

    100% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);

    }

}

/*不正解*/

.result.show-wrong {

    opacity: 1;

    animation:
        result-wrong
        0.4s
        ease-out
        forwards;
}


@keyframes result-wrong {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.5);

    }

    40% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.1);

    }

    60% {

        transform:
            translate(-50%, -50%)
            scale(0.95);

    }

    100% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);

    }

}

.result.show-timeup {

    opacity: 1;

    animation:
        result-timeup
        0.4s
        ease-out
        forwards;

}

/*時間切れ*/
@keyframes result-timeup {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.5);

    }

    60% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.1);

    }

    100% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);

    }

}

/* =========================================================
   ★ 制限時間バー
========================================================= */

/* =========================================================
   円形制限時間ゲージ
========================================================= */

.time-bar-container {

    position: absolute;

    left: 220px;

    top: 300px;

    transform: translateY(-50%);

    width: 130px;
    height: 130px;

    z-index: 5;

}


/* =========================================================
   SVG
========================================================= */

.time-circle {

    width: 130px;
    height: 130px;

    display: block;

    transform: rotate(-90deg);

}


/* =========================================================
   背景の円
========================================================= */

.time-circle-bg {

    fill: #111;

    stroke: #292929;

    stroke-width: 12;

}


.time-circle-progress {

    fill: none;

    /* ★ 色だけ変数にする */
    stroke: var(--timer-color, #00d9ff);

    stroke-width: 8;

    stroke-linecap: round;

    /* ★ ここは今まで通り */
    stroke-dasharray: 276.46;

    /* ★ ここも今まで通り */
    stroke-dashoffset:
        calc(
            276.46 +
            (276.46 * var(--timer-progress, 100) / 100)
        );

    filter:
        drop-shadow(
            0 0 6px var(--timer-color, #00d9ff)
        );

}

/* =========================================================
   中央の数字
========================================================= */

.time-circle-text {

    position: absolute;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 20px;

      text-align: center;

    font-weight: bold;

    pointer-events: none;

    transform: translate(-3px, 0px);

}


/* =========================================================
   中央数字
========================================================= */

#circle-timer {

    font-family: "DSEG7", sans-serif;

    font-size: 20px;

    font-weight: normal;

    color: var(--timer-color, #00d9ff);

    text-align: center;

    text-shadow:
        0 0 5px #000;

}
/* =========================================================
   回答エリア
========================================================= */

.choices {

    /*questionareaの下部分の横幅*/
    width: 1280px;

    margin: 15px auto 0;

    display: flex;

    flex-direction: column;

    gap: 10px;
}

/* =========================================================
   問題画像
========================================================= */

.question-image-container {

    position: absolute;

    left: 50%;
    top: 50%;

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

    display: none;

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

    margin: 0;
    padding: 0;

    width: auto;
    height: auto;

    background: none;
    border: none;
    box-shadow: none;

    z-index: 10;

}


.question-image {

    display: block;

    width: auto;
    height: auto;

    max-width: 500px;
    max-height: 300px;

    object-fit: contain;

    /* 枠なし */
    border: none;
    border-radius: 0;
    box-shadow: none;

}


/* =========================================================
   4択
========================================================= */

#choice-quiz {

    margin-top:62px;

    display: grid;

    gap: 14px;
}

.choice {


    width: 490px;

    margin: 0 auto;

    position: relative;

    height: 50px;

    border: 4px solid #9b7734;

    border-radius: 8px;

    background:
        linear-gradient(
            #173244,
            #07131c
        );

    color: white;

    font-size: 22px;

    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;

    font-weight: bold;

    text-align: center;

    cursor: pointer;

    box-shadow:
        0 5px 0 #050505,
        inset 0 0 10px #000;

    transition:
        transform 0.1s,
        filter 0.1s;
}


/* =========================================================
   4択番号
========================================================= */

.number {

    position: absolute;

    left: -40px;

    top: 50%;

    width: 60px;

    height: 60px;

    display: flex;

    justify-content: center;

    align-items: center;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #244a77,
            #071321
        );

    border: 4px solid #a17a30;

    color: white;

    font-size: 25px;

    font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
}

/* =========================================================
   4択番号：それぞれの色
========================================================= */

.choice:nth-child(1) .number {
    background: radial-gradient(circle, #a83b3b, #3a0f0f);
    border-color: #d96a6a;
}

.choice:nth-child(2) .number {
    background: radial-gradient(circle, #3b6fa8, #0f213a);
    border-color: #6fa8d9;
}

.choice:nth-child(3) .number {
    background: radial-gradient(circle, #3f8a5a, #102d1b);
    border-color: #70c88a;
}

.choice:nth-child(4) .number {
    background: radial-gradient(circle, #7650a8, #241338);
    border-color: #a982d5;
}


.choice.selected {

    filter: brightness(1.5);

    box-shadow:
        0 0 15px rgba(255, 255, 255, 0.7),
        0 0 30px rgba(255, 255, 255, 0.4),
        0 5px 0 #050505,
        inset 0 0 15px rgba(255, 255, 255, 0.25);

}


.choice.selected .number {

    filter: brightness(1.5);

    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.7),
        0 0 25px rgba(255, 255, 255, 0.5);

}

/* =========================================================
   ○×
========================================================= */

#truefalse-quiz {

    display: none;

    width: 500px;

    margin: 62px auto 0;   /* ← これを追加 */

    justify-content: center;

    align-items: center;

    gap: 20px;
}

.true-button,
.false-button {

    width: 240px;

    height: 250px;

    box-sizing: border-box;

    border: 5px solid #9b7734;

    border-radius: 20px;

    align-items: center;

    justify-content: center;

    line-height: 1;

    font-size: 170px;

        font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 8px 0 #050505,
        inset 0 0 20px #000;

    transition:
        transform 0.1s,
        filter 0.1s;
}

.true-button:hover,
.false-button:hover {

    filter: brightness(1.4);
}

.true-button:active,
.false-button:active {

    transform: translateY(7px);

    box-shadow:
        0 1px 0 #050505;
}

.true-button {

    background:
        linear-gradient(
            #173f27,
            #07170d
        );

    color: #ff5555;
}

.false-button {

    background:
        linear-gradient(
            #172d45,
            #07121d
        );

    color: #4c8cff;
}

/* =========================================================
   ○×：選択状態
========================================================= */

.true-button.selected {

    background:
        linear-gradient(
            #5c2020,
            #210707
        );

    border-color:
        #ff5555;

    color:
        #ff7777;

    box-shadow:
        0 0 20px rgba(255, 85, 85, 0.9),
        0 0 40px rgba(255, 85, 85, 0.5),
        inset 0 0 20px rgba(255, 85, 85, 0.4);

}


.false-button.selected {

    background:
        linear-gradient(
            #193f66,
            #071a2d
        );

    border-color:
        #4c8cff;

    color:
        #6fa8ff;

    box-shadow:
        0 0 20px rgba(76, 140, 255, 0.9),
        0 0 40px rgba(76, 140, 255, 0.5),
        inset 0 0 20px rgba(76, 140, 255, 0.4);

}


/* =========================================================
   連想クイズ
========================================================= */

.hint-area {

    display: none;

    flex-direction: column;

    gap: 6px;

    width: 450px;

    margin: 20px auto 20px;

}


/* =========================================================
   ヒント
========================================================= */

.hint {

    width: 100%;

    box-sizing: border-box;

    display: flex;

    justify-content: center;

    align-items: center;

    border: 2px solid #ffffff;

    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            #222222,
            #090909
        );

    color: #ffffff;

    font-size: 22px;

                /* ★ フォント */
font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

    font-weight: bold;

    text-align: center;

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 0.4s,
        transform 0.4s,
        background 0.4s;

    box-shadow:
        inset 0 0 8px rgba(255,255,255,0.15);
}


/* =========================================================
   ヒント表示中
========================================================= */

.hint.show {

    opacity: 1;

    transform: translateY(0);

}

.hint.revealed {

    background: transparent;

    border-color: transparent;

    box-shadow: none;

}

/* =========================================================
   ヒントが切り替わる瞬間
========================================================= */

.hint.reveal-animation {

    opacity: 0;

    transform: translateY(-10px);

}

/* =========================================================
   並べ替え
========================================================= */

#sort-quiz {

    display: none;

    width: 100%;

    flex-direction: column;

    align-items: center;

    gap: 62px;
}

.sort-instruction {

    font-size: 24px;

    font-weight: bold;

    color: #271b0e;

    text-align: center;
}

.sort-panels {

    min-height: 100px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: nowrap;

    gap: 15px;
}

.sort-panel {

    width: 70px;

    height: 95px;

    display: flex;

    justify-content: center;

    align-items: center;

    border: 5px solid #9b7734;

    border-radius: 12px;

    background:#222;

    color: white;

    font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

    font-size: 45px;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 6px 0 #050505,
        inset 0 0 10px #000;
}

.sort-panel:hover {

    filter: brightness(1.4);
}

.sort-panel.selected {

    transform: translateY(-10px);

    border-color: #ffe600;

    background:
        linear-gradient(
            #3d5f8a,
            #10253c
        );

    box-shadow:
        0 8px 0 #050505,
        0 0 15px #ffe600,
        inset 0 0 15px #000;
}

.sort-panel:active {

    transform: translateY(4px);
}

.sort-controls {

    display: flex;

    justify-content: center;

    gap: 20px;
}

.sort-controls button {

    min-width: 150px;

    min-height: 60px;

    padding: 10px 20px;

    border: 4px solid #9b7734;

    border-radius: 8px;

    background:
        linear-gradient(
            #b52b2b,
            #6d0d0d
        );

    color: white;

font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

    font-size: 30px;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 5px 0 #050505;
}

.sort-controls button:hover {

    background:
        linear-gradient(
            #d83b3b,
            #8c1515
        );

    filter: brightness(1.1);
}

.sort-controls button:active {

    transform: translateY(4px);

    box-shadow:
        0 1px 0 #050505;
}



/* ============================================================
   文字パネル
============================================================ */

.panel-quiz {

    display: none;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    width: 100%;

}


/* ============================================================
   回答欄
============================================================ */

.panel-answer {

    display: flex;

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

    gap: 8px;

    min-width: auto;
    min-height: auto;

    padding: 0;

    background: transparent;
    border: none;

    color: white;

    font-size: 32px;
    font-weight: bold;


}

/* ============================================================
   回答欄の4マス
============================================================ */

.panel-answer-box {

    width: 62px;
    height: 62px;

    box-sizing: border-box;

    display: flex;

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

    background: #111;

    border: 4px solid #ffffff;

    border-radius: 6px;

    color: #ffffff;

    font-size: 32px;

    font-weight: bold;

    box-shadow:
        inset 0 0 8px #000;

}



/* ============================================================
   文字パネル
============================================================ */

.panel-key {

    width: 125px;

    height: 125px;

    border: 3px solid #c9a227;

    border-radius: 8px;

    background:
        linear-gradient(
            #222,
            #222
        );

    color: #ffffff;

    font-size: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    cursor: pointer;

    padding-bottom: 6px;

    box-shadow:
        0 0 5px rgba(201, 162, 39, 0.6);

}

/* 押したとき */

.panel-key:active {

    transform:
        translateY(4px);

    box-shadow:
        0 0 0 #777;

}


/* 使用済み */

.panel-key.used {

    opacity: 0.25;

    cursor: default;

}


/* ============================================================
   操作ボタン
============================================================ */

.panel-control {

    display: flex;

    gap: 12px;

}


.panel-control button {

    padding:
        12px 22px;

    font-size: 20px;

    border-radius: 6px;

    border: 2px solid #555;

    background: #eee;

    cursor: pointer;

}


/* ============================================================
   パネル配置
============================================================ */

.panel-grid {

    display: grid;

    grid-template-columns:
        repeat(5, 130px);

    grid-template-rows:
        repeat(2, 130px);

    gap: 14px;

}

/* =========================================================
   タイピングクイズ
========================================================= */

#typing-quiz {

    display: none;

    width: 100%;

    max-width: 900px;

    margin: 20px auto 0;

    padding:
        0
        20px
        30px;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    position: relative;
}


/* =========================================================
  タイピング 回答表示
========================================================= */

.typing-answer-area {

    width: 500px;

    display: flex;

    justify-content: center;

    align-items: center;

}


.typing-answer {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    transform: translateY(-10px);

}

.typing-answer-box {

    width: 62px;

    height: 62px;

    box-sizing: border-box;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #111;

    border: 4px solid #ffffff;

    border-radius: 6px;

    color: #fff;

    font-size: 32px;

    font-weight: bold;

    line-height: 1;

}

/* =========================================================
   QMA風キーボード全体
========================================================= */

.typing-keyboard-layout {

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 6px;

}


/* =========================================================
   基本かなキーボード
========================================================= */

.typing-main-keyboard {

    display: flex;

    flex-direction: column;

    gap: 6px;
}


/* =========================================================
   かな1行
========================================================= */

.typing-keyboard-row {

    display: grid;

    grid-template-columns:
        repeat(10, 60px);

    gap: 6px;
}


/* =========================================================
   通常キー
========================================================= */

.typing-key {

    width: 55px;

    height: 50px;

    border: none;

    border-radius: 6px;

    background: #222;

    color: #ffffff;

    font-size: 26px;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.08s,
        background 0.08s;
}

.typing-key:hover {

    background: #eeeeee;
}

.typing-key:active {

    transform: translateY(2px);

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2);
}


/* =========================================================
   空きキー
========================================================= */

.typing-key-empty {

    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   右側追加列
========================================================= */

.typing-side-column {

    display: flex;

    flex-direction: column;

    gap: 6px;
}


/* =========================================================
   右側キー
========================================================= */

.typing-side-key {

    width: 55px;

    height: 50px;
}


/* =========================================================
   小文字
   「ぁぃぅぇぉ」
========================================================= */

.small-vowel-column {

    margin-left: 2px;
}


/* =========================================================
   「ゃゅょっー」
========================================================= */

.small-y-column {

    margin-left: 2px;
}


/* =========================================================
   「゛゜」
========================================================= */

.mark-column {

    margin-left: 2px;
}


/* =========================================================
   右側の特殊キー文字を少し小さく
========================================================= */

.small-vowel-column .typing-key,
.small-y-column .typing-key,
.mark-column .typing-key {

    font-size: 22px;
}


/* =========================================================
   英数字 QWERTY キーボード
========================================================= */

.typing-qwerty-keyboard {

    display: flex;

    flex-direction: column;

    gap: 6px;

    align-items: center;
}


/* =========================================================
   QWERTY 各行
========================================================= */

.typing-qwerty-row {

    display: flex;

    gap: 6px;

    justify-content: center;
}


/* =========================================================
   各行を少しずつずらす
========================================================= */

.typing-qwerty-row:nth-child(2) {

    margin-left: 0px;
}


.typing-qwerty-row:nth-child(3) {

    margin-left: 0px;
}


.typing-qwerty-row:nth-child(4) {

    margin-left: -60px;
}


/* =========================================================
   タイピング操作ボタン
========================================================= */

.typing-controls {
    position: absolute;

    right: -50px;
    top: 200px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    width: 110px;
}

.typing-controls button {

    padding: 10px 20px;

    border: 3px solid #9b7734;

    border-radius: 8px;

    background:
        linear-gradient(
            #292929,
            #080808
        );

    color: white;

 font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

    font-size: 30px;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 4px 0 #050505;
}

.typing-controls button:hover {

    filter: brightness(1.3);
}

.typing-controls button:active {

    transform: translateY(3px);

    box-shadow:
        0 1px 0 #050505;
}

/*OKボタン*/
.typing-submit {
    background:
        linear-gradient(
            #d83b3b,
            #8c1515
        ) !important;
}

/* =========================================================
   タイピング専用
   時間バーをキーボード上部へ移動
========================================================= */

/*
   JS側で .typing-mode を付けた場合に使用します。
*/

.game-screen.typing-mode .time-bar-container {

    position: fixed;

    left: 50%;

    bottom: 470px;

    right: auto;

    width: min(850px, 70vw);

    height: 25px;

    transform: translateX(-50%);

    z-index: 100;
}


/* =========================================================
   結果画面
========================================================= */

.result-screen {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: none;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: #111;

    color: white;

    z-index: 9999;
}

.result-title {

    font-size: 48px;

    font-weight: bold;

    margin-bottom: 35px;
}

.final-score-label {

    font-size: 22px;

    margin-bottom: 5px;
}

.final-score {

    font-size: 56px;

    font-weight: bold;

    color: #ffe600;

    margin-bottom: 25px;
}

.final-accuracy-label {

    font-size: 22px;

    margin-bottom: 5px;
}

.final-accuracy {

    font-size: 42px;

    font-weight: bold;

    margin-bottom: 20px;
}

.final-correct-count {

    font-size: 22px;

    margin-bottom: 30px;
}

.final-rank {

    font-size: 48px;

    font-weight: bold;

    color: #ffe600;

    margin-bottom: 10px;
}

.next-rank {

    font-size: 22px;

    margin-bottom: 35px;
}

.restart-button {

    padding: 15px 45px;

    font-size: 22px;

    font-weight: bold;

    color: white;

    background: #2563eb;

    border: none;

    border-radius: 10px;

    cursor: pointer;
}

.restart-button:hover {

    background: #3b82f6;
}

.restart-button:active {

    transform: scale(0.97);
}


/* =========================================================
   スマートフォン対応
========================================================= */

@media (max-width: 900px) {

    .game-screen {

        width: 98vw;

        padding: 10px;
    }

    .main-area {

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

        gap: 10px;
    }

    .timer-box {

        width: 120px;
    }

    .question-area {

        padding-left: 15px;

        padding-right: 15px;
    }

    .question-text {

        padding-left: 15px;

        font-size: 24px;
    }

    .typing-keyboard-row {

        grid-template-columns:
            repeat(10, 42px);
    }

    .typing-key {

        width: 42px;

        height: 42px;

        font-size: 18px;
    }

    .typing-side-key {

        width: 42px;

        height: 42px;
    }

    .game-screen.typing-mode .time-bar-container {

        width: 80vw;

        bottom: 430px;
    }
}


/* =========================================================
   小さい画面
========================================================= */

@media (max-width: 650px) {

    .game-screen {

        min-height: 100vh;

        margin: 0;

        width: 100vw;

        border-width: 3px;
    }

    .top-bar {

        gap: 30px;

        height: 65px;
    }

    .question-number,
    .accuracy {

        font-size: 20px;
    }

    .question-number span,
    .accuracy span {

        font-size: 26px;
    }

    .main-area {

        grid-template-columns: 1fr;

    }

    .left-area,
    .right-area {

        display: none;
    }

    .question-area {

        height: 330px;

        min-height: 330px;
    }

    .choices {

        width: 95%;
    }

    .typing-keyboard-layout {

        transform: scale(0.8);

        transform-origin: top center;
    }

    .game-screen.typing-mode .time-bar-container {

        bottom: 390px;

        width: 90vw;
    }
}

/* ============================================================
   キューブクイズ
   ============================================================ */

.cube-quiz {
    width: 490px;

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

    margin-top: 20px;

    perspective: 900px;
}


/* ============================================================
   キューブ本体
   ============================================================ */

.cube {
    position: relative;

    width: 100px;
    height: 100px;

     top: 60px;

    transform-style: preserve-3d;

}


/* ============================================================
   キューブの6面
   ============================================================ */

.cube-face {

    position: absolute;

    width: 100px;
    height: 100px;

    box-sizing: border-box;

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

    /* ★ 文字を少し上へ */
    padding-bottom: 10px;

    border: 3px solid #ffffff;

    background: linear-gradient(
        135deg,
        #252525,
        #080808
    );

    color: #ffffff;

            /* ★ フォント */
font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

    font-size: 70px;
    font-weight: bold;

    text-shadow:
        0 2px 4px #000000;

    backface-visibility: hidden;
}


/* ============================================================
   前面
   ============================================================ */

.cube-front {
    transform:
        translateZ(50px);
}


/* ============================================================
   背面
   ============================================================ */

.cube-back {
    transform:
        rotateY(180deg)
        translateZ(50px);
}


/* ============================================================
   右面
   ============================================================ */

.cube-right {
    transform:
        rotateY(90deg)
        translateZ(50px);
}


/* ============================================================
   左面
   ============================================================ */

.cube-left {
    transform:
        rotateY(-90deg)
        translateZ(50px);
}


/* ============================================================
   上面
   ============================================================ */

.cube-top {
    transform:
        rotateX(90deg)
        translateZ(50px);
}


/* ============================================================
   底面
   ============================================================ */

.cube-bottom {
    transform:
        rotateX(-90deg)
        translateZ(50px);
}

/* ============================================================
   エフェクトクイズ
   ============================================================ */

#effect-quiz {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: none;

}

/* 出題対象 */

#effect-display {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

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

}


/* 読みを答えさせる文字 */

.effect-character {

    color: #FF00FF;

    font-size: 90px;

    font-weight: bold;

    line-height: 1.2;

    text-align: center;

    position: relative;

            /* ★ フォント */
font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;


}


/* 画像 */

.effect-image {

    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

}

/* モザイクCanvas */

.effect-mosaic-canvas {
    position: absolute;

    left: 50%;
    top: 50%;

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

    pointer-events: none;
}

/* 回転させる*/

/* ゆっくり左右に回転 */

/* ============================================================
   1文字ずつ回転
   ============================================================ */

.effect-character-letter {

    display: inline-block;

}


/* 回転アニメーション */

.effect-rotate {

    animation:
        effectRotate
        2.5s
        ease-in-out
        infinite
        alternate;

    transform-origin:
        center center;

}


@keyframes effectRotate {

    from {

        transform:
            rotate(-12deg);

    }

    to {

        transform:
            rotate(12deg);

    }

}

/* ============================================================
   回転エフェクト
============================================================ */

.effect-rotate-clockwise {

    animation:
        effectRotateClockwise
        8s
        linear
        infinite;

}


.effect-rotate-counterclockwise {

    animation:
        effectRotateCounterclockwise
        10s
        linear
        infinite;

}


/* 時計回り */

@keyframes effectRotateClockwise {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* 反時計回り */

@keyframes effectRotateCounterclockwise {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}

/* ============================================================
   文字ごとの拡大・縮小
============================================================ */

.effect-scale-bounce {

    animation:
        effectScaleBounce
        var(--scale-duration)
        ease-in-out
        infinite;

    animation-delay:
        var(--scale-delay);

}


/* ============================================================
   拡大 → 縮小 → 拡大
============================================================ */

@keyframes effectScaleBounce {

    0% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(var(--max-scale));

    }

    100% {

        transform:
            scale(1);

    }

}

.effect-character-letter,
.effect-character-inner {

    display: inline-block;

}

.effect-character {
    position: relative;
}

.effect-character-letter {
    position: relative;
}


/*rotateの時の文字色指定*/

.effect-character.effect-rotate-color .effect-character-inner {

    color: #ffffff;

    -webkit-text-stroke: 3px #000000;

    paint-order: stroke fill;

}


/* =========================================================
   順番当てクイズ
========================================================= */

#order-quiz {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

}


/* =========================================================
   順番当て 回答欄
========================================================= */

.order-selected-area {
    margin-top:10px;

    width: 62px;

    height: 62px;

    display: flex;

    justify-content: center;

    align-items: center;

}


/* =========================================================
   回答欄全体
========================================================= */

.order-selected-list {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 45px;

}


/* =========================================================
   回答ボックス
========================================================= */

.order-selected-letter {

    width: 62px;

    height: 62px;

    box-sizing: border-box;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    background: #111;

    border: 4px solid #ffffff;

    border-radius: 6px;

    color: #ffffff;

    font-size: 32px;

      text-align: center;

    font-weight: bold;

    box-shadow:
        inset 0 0 8px #000;

}


/* =========================================================
   ボックス間の矢印
========================================================= */

.order-selected-letter:not(:last-child)::after {

    content: "▶";

    position: absolute;

    left: calc(100% + 12px);

    top: 50%;

    transform:
        translateY(-50%);

    color: #ffffff;

    font-size: 28px;

    line-height: 1;

}

/* =========================================================
   まだ選択されていない
========================================================= */

.order-selected-empty {

    color: #999;

    font-size: 18px;

}


/* =========================================================
   A / B / C / D の表示
========================================================= */


/* =========================================================
   順番当て選択肢
========================================================= */

.order-choices {

       width: 66%;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 14px;

}


/* =========================================================
   選択肢
========================================================= */

.order-choice {

    position: relative;

    margin:0 auto 0;

    height: 50px;

    width:490px;

    border: 4px solid #9b7734;

    border-radius: 8px;

    background:
        linear-gradient(
            #173244,
            #07131c
        );

    color: white;

    font-size: 22px;

    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;

    font-weight: bold;

    text-align: center;

    cursor: pointer;

    box-shadow:
        0 5px 0 #050505,
        inset 0 0 10px #000;

    transition:
        transform 0.1s,
        filter 0.1s;
}


.order-choice:hover {

    filter: brightness(1.4);

}


.order-choice:active {

    transform: translateY(4px);

    box-shadow:
        0 1px 0 #050505;

}


/* =========================================================
   A / B / C / D
========================================================= */

.order-letter {

    position: absolute;

    left: -40px;

    top: 50%;

    width: 60px;

    height: 60px;

    display: flex;

    justify-content: center;

    align-items: center;

    transform: translateY(-50%);

    margin: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #244a77,
            #071321
        );

    border: 4px solid #a17a30;

    color: white;

    font-size: 25px;

    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;

 font-weight: bold;

}


/* =========================================================
   A / B / C / D それぞれの色
========================================================= */

.order-choice:nth-child(1) .order-letter {

    background:
        radial-gradient(
            circle,
            #e85d04,
            #3a0f0f
        );

    border-color: #e85d04;

}


.order-choice:nth-child(2) .order-letter {

    background:
        radial-gradient(
            circle,
            #f48c06,
            #0f213a
        );

    border-color: #f48c06;

}


.order-choice:nth-child(3) .order-letter {

    background:
        radial-gradient(
            circle,
            #ffba08,
            #102d1b
        );

    border-color: #ffba08;

}


.order-choice:nth-child(4) .order-letter {

    background:
        radial-gradient(
            circle,
            #6a994e,
            #241338
        );

    border-color: #6a994e;

}


/* =========================================================
   選択済み
========================================================= */

.order-choice.selected {

    filter: brightness(1.2);

    box-shadow:
        0 0 15px rgba(255, 255, 255, 0.7),
        0 0 30px rgba(255, 255, 255, 0.4),
        0 5px 0 #050505,
        inset 0 0 15px rgba(255, 255, 255, 0.25);

}


.order-choice.selected .order-letter {

    filter: brightness(1.2);

    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.7),
        0 0 25px rgba(255, 255, 255, 0.5);

}

/* =========================================================
   回答ボタン
========================================================= */

.order-submit {

    min-width: 220px;

    min-height: 60px;

    padding:
        10px 35px;

    border:
        4px solid #9b7734;

    border-radius: 8px;

    background:
        linear-gradient(
            #8d6a25,
            #3d2a0b
        );

    color: white;

    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 24px;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 5px 0 #050505,
        inset 0 0 10px #000;

}


.order-submit:hover {

    filter:
        brightness(1.3);

}


.order-submit:active {

    transform:
        translateY(4px);

}

/* =========================================================
   線結びクイズ
========================================================= */

#matching-quiz {

    margin-top:62px;

    width: 100%;

    display: none;

    justify-content: center;

    align-items: center;

}


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

.matching-container {

    position: relative;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 100px;

    width: 1000px;

}

/* =========================================================
   左右の列
========================================================= */

.matching-column {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 15px;

}


/* =========================================================
   選択肢
========================================================= */

.matching-item {

    position: relative;

    box-sizing: border-box;

    width: 100%;

    height:60px;

    border: 3px solid #555;

    border-radius: 12px;

    background:
        linear-gradient(
            #292929,
            #111111
        );

    color: #ffffff;

    font-size: 22px;

    font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

    font-weight: bold;

    cursor: pointer;

    display: flex;

    align-items: center;

    transition: 0.15s ease;

}


/* =========================================================
   A B C D / 1 2 3 4 の丸
========================================================= */

.matching-label {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 60px;
    height: 60px;

    display: flex;

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

    box-sizing: border-box;

    border: 3px solid #ffe600;

    border-radius: 50%;

    background: #222;

    color: #ffffff;

    font-size: 26px;

    font-weight: bold;

    z-index: 5;

}

/* =========================================================
   左側：A B C D
========================================================= */


.matching-left-label {

    right: -30px;

}


/* =========================================================
   右側：1 2 3 4
========================================================= */

.matching-right-label {

    left: -30px;

}

/* =========================================================
   選択肢本文
========================================================= */

.matching-text {

    flex: 1;

}


/* =========================================================
   A B C D / 1 2 3 4 の丸
========================================================= */

.matching-label {

    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 70px;
    height: 70px;

    display: flex;

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

    box-sizing: border-box;

    border: 4px solid #ffe600;

    border-radius: 50%;

    background: #222;

    color: #ffffff;

    font-size: 30px;

    font-weight: bold;

    z-index: 5;

}


/* =========================================================
   左側：A B C D
   → 四角の右端から丸がはみ出す
========================================================= */

.matching-left-label {
    right: -35px;
}

/* =========================================================
   右側：1 2 3 4
   → 四角の左端から丸がはみ出す
========================================================= */

.matching-right-label {
    left: -35px;
}

/* =========================================================
   ホバー
========================================================= */

.matching-item:hover {

    filter: brightness(1.3);

    transform: translateY(-1px);

}


/* =========================================================
   選択中
========================================================= */

.matching-item.selected {

    border-color:
        #ff3333 !important;

    background:
        linear-gradient(
            #8b2020,
            #3d0808
        ) !important;

    color: #ffffff;

    box-shadow:
        0 0 15px
        rgba(255, 0, 0, 0.9),

        0 0 30px
        rgba(255, 0, 0, 0.5),

        inset 0 0 15px
        rgba(255, 0, 0, 0.4);

}


/* =========================================================
   ペア成立済み
========================================================= */

.matching-item.matched {

    border-color:
        #4cff88;

    background:
        linear-gradient(
            #24583d,
            #10291c
        );

    box-shadow:
        0 5px 0
        #050505,

        0 0 12px
        rgba(76, 255, 136, 0.35),

        inset 0 0 15px
        #000;

}


/* =========================================================
   線結び用SVG
========================================================= */

.matching-lines {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    overflow: visible;

    z-index: 1;

}


.matching-line {

    stroke:
        #ffe600;

    stroke-width:
        5;

    stroke-linecap:
        round;

    filter:
        drop-shadow(
            0 0 5px
            rgba(255, 230, 0, 0.7)
        );

}
/* =========================================================
   一問多答クイズ
========================================================= */

#multi-quiz {

    margin-top:62px;
    position: relative;
}

/* =========================================================
   選択肢全体
========================================================= */

.multi-choices {
    width: 490px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* =========================================================
   選択肢ボタン
========================================================= */

.multi-choice {

    position: relative;

    display: flex;

    width: 490px;
    height:50px;

     align-self: center;

    box-sizing: border-box;

    border: 3px solid #9b7734;

    border-radius: 12px;

    background:
        linear-gradient(
            #173244,
            #07131c
        );

    color: white;

    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;

    font-size: 22px;

    font-weight: bold;

    text-align: center;

     line-height: 1;

    cursor: pointer;

    box-shadow:
        0 5px 0 #050505,
        inset 0 0 10px #000;

    transition:
        transform 0.1s,
        filter 0.1s,
        background 0.15s,
        border-color 0.15s,
        box-shadow 0.15s;

}

/* =========================================================
   ホバー
========================================================= */

.multi-choice:hover {

    filter: brightness(1.35);

}


/* =========================================================
   クリック
========================================================= */

.multi-choice:active {

    transform:
        translateY(4px);

    box-shadow:
        0 1px 0 #050505;

}


/* =========================================================
   A・B・C・D・E・F
========================================================= */

.multi-choice .number {

    position: absolute;

    left: -30px;

    top: 50%;

    transform: translateY(-50%);

    display: flex;

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

    width: 60px;
    height: 60px;

    margin: 0;

    box-sizing: border-box;

    border:
        3px solid #c9a95c;

    border-radius: 50%;

    background:
        linear-gradient(
            #253f50,
            #101e28
        );

    color: #ffe600;

    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;

    font-size: 25px;

    font-weight: bold;

    z-index: 5;

}

/* =========================================================
   選択肢テキスト
========================================================= */

.multi-choice .choice-text {

    vertical-align: middle;

}


/* =========================================================
   選択中
========================================================= */

.multi-choice.selected {

    border-color:
        #ffe600;

    background:
        linear-gradient(
            #3d5f8a,
            #10253c
        );

    box-shadow:
        0 5px 0 #050505,
        0 0 18px
            rgba(
                255,
                230,
                0,
                0.65
            ),
        inset 0 0 15px #000;

}


/* =========================================================
   選択中の A・B・C...
========================================================= */

.multi-choice.selected .number {

    border-color:
        #ffe600;

    background:
        linear-gradient(
            #6b5710,
            #302600
        );

    color:
        #fff700;

    box-shadow:
        0 0 10px
        rgba(
            255,
            230,
            0,
            0.7
        );

}


/* =========================================================
   一問多答の回答ボタン
========================================================= */

#multi-answer-button {

      position: absolute;

    left: calc(50% + 280px);
    bottom: 0;

    min-width: 180px;
    min-height: 65px;

    padding:
        10px
        35px;

    border:
        4px solid #ff3333;

    border-radius: 8px;

    background:
        linear-gradient(
            #a52222,
            #4d0808
        );

    color: #ffffff;

    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;

    font-size: 28px;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 5px 0 #050505,

        0 0 12px
        rgba(255, 0, 0, 0.45),

        inset 0 0 10px #000;

    transition:
        transform 0.1s,
        filter 0.1s,
        box-shadow 0.15s;

}


/* =========================================================
   回答ボタン ホバー
========================================================= */

#multi-answer-button:hover {

    filter:
        brightness(1.35);

    box-shadow:
        0 5px 0 #050505,

        0 0 20px
        rgba(255, 0, 0, 0.75),

        inset 0 0 12px #000;

}


/* =========================================================
   回答ボタン クリック
========================================================= */

#multi-answer-button:active {

    transform:
        translateY(4px);

    box-shadow:
        0 1px 0 #050505,

        0 0 10px
        rgba(255, 0, 0, 0.5),

        inset 0 0 10px #000;

}

/* =========================================================
   スロットクイズ
========================================================= */

#slot-quiz {

    width: 100%;

    display: none;

    flex-direction: column;

    align-items: center;

    margin-top:31px;

}


/* =========================================================
   スロット全体
========================================================= */

.slot-container {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}


/* =========================================================
   スロット列
========================================================= */

.slot-reels {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 0px;

}


/* =========================================================
   1個のスロット
========================================================= */

.slot-reel {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

}


/* =========================================================
   上下ボタン
========================================================= */

.slot-up,
.slot-down {

    width: 50px;
    height: 35px;

    border:
        3px solid #555;

    border-radius: 6px;

    background:
        linear-gradient(
            #292929,
            #111111
        );

    color: #ffffff;

    font-size: 20px;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 4px 0 #050505,

        inset 0 0 8px #000;

    transition:
        transform 0.1s,
        filter 0.1s;

}


.slot-up:hover,
.slot-down:hover {

    filter:
        brightness(1.35);

}


.slot-up:active,
.slot-down:active {

    transform:
        translateY(3px);

    box-shadow:
        0 1px 0 #050505;

}


/* =========================================================
   スロット窓
========================================================= */

.slot-window {

    position: relative;

    width: 90px;
    height: 150px;

    overflow: hidden;

    border:
        3px solid #9b7734;

    border-radius: 10px;

    background:
        linear-gradient(
            #292929,
            #111111
        );

    box-shadow:
        0 5px 0 #050505,

        inset 0 0 18px #000;

}


/* =========================================================
   スロット文字一覧
========================================================= */

.slot-reel-display {

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;

    transform: translateY(-50%);

    transition:
        transform 0.18s ease-out;

}

/* =========================================================
   スロットの各文字
========================================================= */

.slot-character {

    width: 100%;

    height: 60px;

    display: flex;

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

    color: #ffffff;

    font-size: 36px;

    font-weight: bold;

    line-height: 1;

}


.slot-character.neighbor {

    font-size: 36px;

    opacity: 0.4;

}


.slot-character.current {

    font-size: 42px;

    opacity: 1;

    text-shadow:
        0 0 10px
        rgba(255,255,255,0.35);

}

/* =========================================================
   選択中のライン
========================================================= */

.slot-window::before,
.slot-window::after {

    content: "";

    position: absolute;

    left: 0;

    width: 100%;

    height: 3px;

    background:
        #ffe600;

    box-shadow:
        0 0 8px
        rgba(255,230,0,0.7);

    z-index: 2;

}


.slot-window::before {
    top: 45px;
}

.slot-window::after {
    bottom: 45px;
}

/* =========================================================
   OKボタン
========================================================= */
#slot-answer-button {

    position: absolute;

    left: calc(50% + 300px);

    top: 580px;

    transform: translateY(-50%);

    min-width: 140px;

    min-height: 55px;

    padding:
        8px
        25px;

    border:
        4px solid #ff3333;

    border-radius: 8px;

    background:
        linear-gradient(
            #a52222,
            #4d0808
        );

    color: #ffffff;

    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;

    font-size: 24px;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 5px 0 #050505,

        0 0 12px
        rgba(255,0,0,0.45),

        inset 0 0 10px #000;

    transition:
        transform 0.1s,
        filter 0.1s;

}


#slot-answer-button:hover {

    filter:
        brightness(1.35);

}


#slot-answer-button:active {

    transform:

translateY(-50%)
        translateY(4px);

    box-shadow:
        0 1px 0 #050505;

}

/* =========================================================
   スロット回転アニメーション
========================================================= */

.slot-reel-display.slide-up {

    transform:
        translateY(
            calc(-50% - 80px)
        );

}


.slot-reel-display.slide-down {

    transform:
        translateY(
            calc(-50% + 80px)
        );

}