* {
    box-sizing: border-box;
}

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

* {
box-sizing: border-box;
}

body {
margin: 0;

font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;

/* 全体をクリーム色に */
background: #fff8e7;

/* 基本文字色をダークブラウンに */
color: #5a4032;

text-align: center;
}


/* =========================================
ゲーム全体
========================================= */

.game-container {
width: min(1000px, 100%);
margin: 0 auto;
padding: 24px 16px 40px;
}


/* =========================================
タイトル
========================================= */

h1 {
margin: 0 0 16px;

font-size: 32px;

color: #6b4636;
}


/* =========================================
ゲーム本体
========================================= */

.game-body {
position: relative;
}


/* =========================================
スコア
========================================= */

.status {
display: flex;
justify-content: center;
align-items: center;

gap: 40px;

margin-bottom: 20px;

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

color: #6b4636;
}


/* =========================================
タイマー
デバッグ時は block にする
========================================= */

#timer-display {
display: none;
}

#timer {
color: #d86f52;
}


/* =========================================
カード表示エリア
========================================= */
.card-area {
min-height: 350px;

display: flex;
flex-wrap: wrap;

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

gap: 12px;

padding: 20px;
margin-bottom: 24px;

/* 薄いクリーム色 */
background: #fffdf7;

/* 淡いブラウンの枠 */
border: 2px solid #ead8c5;

border-radius: 18px;

box-shadow:
    0 4px 14px rgba(90, 64, 50, 0.08);
}


/* =========================================
カード
========================================= */

.card {
width: 150px;
height: 150px;

flex-shrink: 0;

overflow: hidden;

border-radius: 14px;

background: white;

box-shadow:
    0 5px 12px rgba(90, 64, 50, 0.18);

animation: cardAppear 0.25s ease;
}


.card img {
width: 100%;
height: 100%;

display: block;

object-fit: contain;
}


@keyframes cardAppear {

from {
    transform:
    scale(0.6)
    rotateY(90deg);

    opacity: 0;
}

to {
    transform:
    scale(1)
    rotateY(0deg);

    opacity: 1;
}
}


/* =========================================
ボタンのカテゴリー名
========================================= */

.button-title {
margin: 18px 0 9px;

color: #9a7865;

font-size: 15px;
font-weight: bold;
}


/* =========================================
スイーツボタン
========================================= */

.food-buttons {
display: grid;

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

gap: 10px;
}


.food-button {
min-height: 64px;

padding: 10px;

/* 白～クリーム */
background: #ffffff;

color: #604536;

border: 2px solid #ead8c5;

font-size: 18px;
font-weight: bold;
}


/* =========================================
フレーバーボタン
========================================= */

.color-buttons {
display: grid;

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

gap: 10px;
}


.color-button {
min-height: 64px;

padding: 10px;

border: 2px solid rgba(90, 64, 50, 0.12);

font-size: 18px;
font-weight: bold;
}


/* ストロベリー */

.color-button[data-color="strawberry"] {
background: #f5a6b5;
color: #713b46;
}


/* ホワイト */

.color-button[data-color="white"] {
background: #fffdf7;
color: #604536;

border: 2px solid #dfd1bf;
}


/* チョコ */

.color-button[data-color="choco"] {
background: #9a6b55;
color: white;
}


/* 抹茶 */

.color-button[data-color="matcha"] {
background: #a9bd86;
color: #354527;
}


/* =========================================
ドッチモ！
========================================= */

#both-button {
width: 100%;

min-height: 72px;

margin-top: 16px;

padding: 10px;

/* カスタードっぽい黄色 */
background: #f4cf72;

color: #604536;

border: 2px solid #e3b950;

font-size: 28px;
font-weight: 900;
}


/* =========================================
全ボタン共通
========================================= */

button {
border-radius: 12px;

cursor: pointer;

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


button:hover {
transform: translateY(-2px);

filter: brightness(1.03);

box-shadow:
    0 4px 10px rgba(90, 64, 50, 0.15);
}


button:active {
transform: translateY(1px) scale(0.98);

box-shadow: none;
}

/* =========================================
スタート画面
========================================= */

#start-screen {
position: absolute;

inset: 0;

display: flex;

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

padding: 20px;

background: rgba(255, 248, 231, 0.97);

border-radius: 18px;

z-index: 1100;
}


.start-box {
width: min(600px, 90%);

padding: 40px 28px;

background: #ffffff;

border: 2px solid #ead8c5;

border-radius: 18px;

box-shadow:
0 10px 30px rgba(90, 64, 50, 0.18);
}


.start-box h2 {
margin: 0 0 20px;

color: #6b4636;

font-size: 32px;
}


.start-description {
margin: 0 0 28px;

color: #604536;

font-size: 18px;

line-height: 1.8;
}


#start-button {
padding: 18px 60px;

background: #e98b9d;
color: white;

border: none;
border-radius: 14px;

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

cursor: pointer;
}

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

#game-over {
position: absolute;

inset: 0;

display: none;

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

padding: 20px;

/*
    真っ黒ではなく、
    クリーム色の半透明にする
*/
background: rgba(255, 248, 231, 0.94);

border-radius: 18px;

z-index: 1000;
}


/* =========================================
ゲームオーバーBOX
========================================= */

.game-over-box {
width: min(600px, 90%);

padding: 36px 28px;

background: #ffffff;

border: 2px solid #ead8c5;

border-radius: 18px;

box-shadow:
    0 10px 30px rgba(90, 64, 50, 0.18);
}


.game-over-box h2 {
margin: 0 0 20px;

/* ストロベリー系 */
color: #d85f76;

font-size: 44px;
}


.final-score {
color: #604536;

font-size: 24px;
font-weight: bold;
}


/* =========================================
正解説明
========================================= */

#answer-message {
margin-top: 20px;

padding: 18px;

/* 淡いクリーム */
background: #fff8e7;

color: #604536;

border: 1px solid #ead8c5;

border-radius: 12px;

font-size: 19px;

line-height: 1.7;
}


/* =========================================
RETRY
========================================= */

#retry-button {
margin-top: 24px;

padding: 16px 40px;

background: #e98b9d;

color: white;

border: none;

font-size: 22px;
font-weight: bold;
}

#timer-display {
display: none;
}

/* =========================================
ゲーム開始カウントダウン
========================================= */

.countdown-text {
width: 100%;

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

color: #6b4636;

font-size: 72px;
font-weight: 900;

animation: countdownPop 0.4s ease;
}

.countdown-text.start {
font-size: 48px;
color: #e98b9d;
}

@keyframes countdownPop {

from {
    transform: scale(0.5);
    opacity: 0;
}

to {
    transform: scale(1);
    opacity: 1;
}
}

/* =========================================
正解表示
========================================= */

.correct-display {
width: 100%;

display: flex;
flex-direction: column;

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

gap: 4px;

color: #e98b9d;

font-weight: 900;

animation: correctPop 0.5s ease;
}


.correct-mark {
font-size: 60px;
line-height: 1;
}


.correct-score {
font-size: 30px;
}


.bonus-score {
margin-top: 4px;

color: #d49a22;

font-size: 20px;
font-weight: 900;
}


@keyframes correctPop {

0% {
    transform: scale(0.5);
    opacity: 0;
}

60% {
    transform: scale(1.15);
    opacity: 1;
}

100% {
    transform: scale(1);
    opacity: 1;
}

}

#tutorial-button {
padding: 18px 60px;

background: #a9bd86;
color: #354527;

border: none;
border-radius: 14px;

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

cursor: pointer;
}

.tutorial-card-wrapper {
position: relative;
}

#tutorial-message,
#tutorial-next-button {
display: none;
}


.card-area-wrapper {
  position: relative;
}
/* =========================================
チュートリアル説明文
========================================= */
.tutorial-message {
display: none;

position: absolute;

top: 12px;
left: 12px;
justify-content: center;
align-items: center;

margin-bottom: 10px;
padding: 12px 16px;

/*
background: #fffdf7;
border: 2px solid #ead8c5;
border-radius: 12px;
*/
background: transparent;
border: none;

color: #604536;

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

line-height: 1.6;

text-align: left;
}

/* =========================================
チュートリアル「次へ」ボタン
========================================= */
#tutorial-next-button {
  display: none;

  position: absolute;

  right: 12px;
  bottom: 12px;

  z-index: 50;

  padding: 10px 22px;

  background: #e98b9d;
  color: white;

  border: none;
  border-radius: 10px;

  font-size: 17px;
  font-weight: bold;
}

.tutorial-highlight {
position: relative;

z-index: 20;

animation:
    tutorialGlow 0.8s ease-in-out infinite alternate;
}

@keyframes tutorialGlow {

from {
    transform: scale(1);
    box-shadow:
    0 0 0 3px rgba(233, 139, 157, 0.35);
}

to {
    transform: scale(1.06);
    box-shadow:
    0 0 0 7px rgba(233, 139, 157, 0.65);
}

}

/* =========================================
スマートフォン版
========================================= */

@media (max-width: 700px) {

    /* 全体の余白を小さく */
    .game-container {
        padding: 8px 8px 12px;
    }


    /* タイトル */
    h1 {
        font-size: 20px;
        margin-bottom: 6px;
    }


    /* SCORE */
    .status {
        margin-bottom: 6px;

        gap: 12px;

        font-size: 15px;
    }


    /* =========================
        カードエリア
        ========================= */

    .card-area {
        min-height: 180px;

        padding: 6px;

        gap: 5px;

        margin-bottom: 8px;

        border-radius: 10px;
    }


    /* カードを小さく */
    .card {
        width: 72px;
        height: 72px;

        border-radius: 8px;
    }


    /* =========================
        「スイーツ」
        「フレーバー」の文字
        ========================= */

    .button-title {
        margin: 6px 0 4px;

        font-size: 11px;
    }


    /* =========================
        スイーツボタン
        2列 → 3列
        ========================= */

    .food-buttons {
        grid-template-columns:
        repeat(3, 1fr);

        gap: 5px;
    }


    .food-button {
        min-height: 40px;

        padding: 4px 2px;

        font-size: 12px;

        border-radius: 7px;
    }


    /* =========================
        フレーバーボタン
        2列 → 4列
        ========================= */

    .color-buttons {
        grid-template-columns:
        repeat(4, 1fr);

        gap: 5px;
    }


    .color-button {
        min-height: 40px;

        padding: 4px 1px;

        font-size: 11px;

        border-radius: 7px;
    }


    /* =========================
        ドッチモ！
        ========================= */

    #both-button {
        min-height: 44px;

        margin-top: 6px;

        padding: 4px;

        font-size: 17px;

        border-radius: 8px;
    }


    /* =========================
        ゲームオーバー
        ========================= */

    .game-over-box {
        width: 94%;

        padding: 20px 14px;

        border-radius: 12px;
    }


    .game-over-box h2 {
        margin-bottom: 10px;

        font-size: 28px;
    }


    .final-score {
        font-size: 18px;
    }


    #answer-message {
        margin-top: 10px;

        padding: 10px;

        font-size: 14px;

        line-height: 1.5;
    }


    #retry-button {
        margin-top: 12px;

        padding: 10px 22px;

        font-size: 16px;
    }


    /* =========================
        スタート画面
        ========================= */

    .start-box {
        width: 94%;

        padding: 20px 14px;

        border-radius: 12px;
    }


    .start-box h2 {
        margin-bottom: 10px;

        font-size: 24px;
    }


    .start-description {
        margin-bottom: 15px;

        font-size: 13px;

        line-height: 1.5;
    }


    #start-button {
        padding: 11px 35px;

        font-size: 19px;
    }

    #tutorial-button {
        padding: 11px 35px;

        font-size: 19px;
    }

    .countdown-text {
        font-size: 56px;
    }

    .countdown-text.start {
        font-size: 32px;
    }

    .correct-display {
        gap: 8px;
    }

    .correct-mark {
        font-size: 52px;
    }

    .correct-score {
        font-size: 26px;
    }

    .tutorial-message {
        top: 0px;
        left: 0px;
        margin-bottom: 6px;
        padding: 9px 11px;

        font-size: 13px;
        line-height: 1.5;
    }

    #tutorial-next-button {
        right: 8px;
        bottom: 8px;

        padding: 8px 14px;

        font-size: 13px;
    }

}