/* css/crane-game-style.css */

/* --- 基本スタイル & 変数定義 --- */
:root {
    /* パステルカラーテーマ */
    --pastel-pink: #fbcfe8;
    /* pink-200 */
    --pastel-pink-dark: #f472b6;
    /* pink-400 */
    --pastel-blue: #bae6fd;
    /* sky-200 */
    --pastel-blue-dark: #38bdf8;
    /* sky-400 */
    --pastel-green: #a7f3d0;
    /* emerald-200 */
    --pastel-green-dark: #34d399;
    /* emerald-400 */
    --pastel-yellow: #fef08a;
    /* yellow-200 */
    --pastel-yellow-dark: #facc15;
    /* yellow-400 */
    --pastel-purple: #d8b4fe;
    /* purple-300 */
    --pastel-purple-dark: #c084fc;
    /* purple-400 */
    --bg-color: #f5f3ff;
    /* violet-50 - 背景色 */
    --container-bg: #ffffff;
    --text-color: #6b7280;
    /* gray-500 */
    --heading-color: #a78bfa;
    /* violet-400 - 見出し色 */
    --border-color: #e5e7eb;
    /* gray-200 */
    --shadow-light: 0 4px 10px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.1);
    --font-family-rounded: 'M PLUS Rounded 1c', sans-serif;

    /* ゲームエリアサイズ (レスポンシブ対応) - JSで動的に更新する場合あり */
    --game-area-max-width: 600px;
    /* 最大幅 */
    --game-area-aspect-ratio: 3 / 2;
    /* 幅に対する高さの比率 */
    /* ★★★ JSから設定される可能性のある変数 (初期値) ★★★ */
    --game-area-width: var(--game-area-max-width);
    /* JSのGAME_AREA_WIDTHに対応想定 */
    --game-area-height: calc(var(--game-area-width) / (var(--game-area-aspect-ratio)));
    /* JSのGAME_AREA_HEIGHTに対応想定 */


    /* ★★★ JS定数と連動する値 ★★★ */
    --drop-zone-height: 50px;
    /* JSのDROP_ZONE_HEIGHT */
    --prize-area-top-margin: 150px;
    /* JSのPRIZE_PLACEMENT_TOP_MARGIN */
    --prize-area-bottom-margin: 50px;
    /* JSのPRIZE_PLACEMENT_BOTTOM_MARGIN */
}

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

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-family-rounded);
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 20px 10px;
    min-height: 100vh;
    overflow-x: hidden;
}

#container {
    width: 100%;
    max-width: var(--game-area-max-width);
    /* 最大幅を設定 */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    /* フッターを一番下に配置するために追加 */
    background-color: var(--container-bg);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--shadow-medium);
}

/* --- ヘッダー --- */
.game-header {
    text-align: center;
    margin-bottom: 15px;
    width: 100%;
}

.game-header h1 {
    font-size: 2.2em;
    color: var(--heading-color);
    margin-bottom: 5px;
    font-weight: 800;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

.game-header h1 i {
    margin: 0 8px;
    color: var(--pastel-pink);
    /* アイコンの色 */
}

.game-header p {
    font-size: 1.0em;
    color: var(--text-color);
    margin: 0;
}

/* --- メインコンテンツ --- */
.game-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    /* フッターを押し下げる */
    margin-bottom: 20px;
    /* フッターとの間に少しマージン */
}

/* --- スコア表示 --- */
.score-container {
    display: flex;
    justify-content: space-evenly;
    /* 中央揃えで均等配置 */
    width: 100%;
    max-width: 450px;
    margin-bottom: 15px;
    font-weight: 700;
    /* ★★★ アクセシビリティ: スクリーンリーダー用 ★★★ */
    /* 必要に応じて aria-live="polite" をJSまたはHTMLで付与 */
}

#score-display,
#highscore-display {
    font-size: 1.2em;
    color: var(--text-color);
    background-color: rgba(230, 230, 250, 0.6);
    /* 少し薄い背景 */
    padding: 6px 18px;
    border-radius: 20px;
    /* 丸みのある形 */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    /* 内側の影で凹み感 */
}

#score,
#highscore {
    display: inline-block;
    font-size: 1.1em;
    font-weight: 800;
    margin-left: 8px;
    transition: transform 0.2s ease-out, color 0.2s ease-out;
}

#score {
    color: var(--pastel-pink-dark);
    /* スコアの色 */
}

#highscore {
    color: var(--pastel-purple-dark);
    /* ハイスコアの色 */
}

/* スコア増加時のアニメーション */
#score.score-increase {
    animation: score-bump 0.3s ease-out;
}

@keyframes score-bump {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
        color: #f43f5e;
        /* より目立つ色に */
    }

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

/* --- ゲームエリア --- */
#game-area {
    position: relative;
    width: 100%;
    /* 親要素に合わせる */
    max-width: var(--game-area-max-width);
    /* 最大幅制限 */
    /* ★★★ 幅と高さはJSで設定されることを想定 (--game-area-width, --game-area-height) ★★★ */
    /*width: var(--game-area-width);*/
    height: var(--game-area-height);
    aspect-ratio: var(--game-area-aspect-ratio);
    /* 念のため維持 */
    background-image: url('../img/background.png');
    background-size: cover;
    background-position: center;
    border: 5px solid var(--pastel-blue);
    /* 枠線 */
    border-radius: 15px;
    /* 角丸 */
    overflow: hidden;
    /* はみ出した要素を隠す */
    box-shadow: var(--shadow-light);
    /* 軽い影 */
    margin: 0 auto;
    /* 中央寄せ */
}

/* --- クレーン --- */
#crane {
    position: absolute;
    top: 0;
    left: 50%;
    /* JSで制御されるが初期位置 */
    transform: translateX(-50%);
    /* 中央揃え */
    width: 100px;
    /* JSのCRANE_WIDTHと合わせる */
    height: 100px;
    background-image: url('../img/crane_body.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
    /* 景品(5) < クレーン(10) < 掴んだ景品(15) < クロー(20) < 演出(50, 60) */
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1));
    /* 軽い影 */
    pointer-events: none;
    /* クレーン自体は操作対象外 */
    /* ★★★ 移動アニメーションを滑らかにするために transition を追加検討 ★★★ */
    /* transition: left 0.05s linear; */
    /* JSの慣性処理と競合しないように注意 */
}

#claw {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    /* JSのCLAW_WIDTHと合わせる */
    height: 60px;
    /* JSのCLAW_HEIGHTと合わせる */
    background-image: url('../img/claw_open.png');
    /* 初期画像 (JSでも変更) */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
    /* ★★★ アニメーションを滑らかにするため transition の easing を変更検討 ★★★ */
    /* transition: bottom 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); */
    /* JSのアニメーションと合わせる */
    transition: bottom 0.1s ease-out;
    /* 元のまま */
    pointer-events: none;
    z-index: 20;
    /* 景品(5) < クレーン(10) < 掴んだ景品(15) < クロー(20) < 演出(50, 60) */
    transform-origin: center top;
    /* アニメーションの基点 */
    /* bottom はJSで制御 */
}

/* --- 景品エリア --- */
#prize-area {
    position: absolute;
    bottom: var(--prize-area-bottom-margin);
    left: 0;
    width: 100%;
    height: calc(100% - var(--prize-area-bottom-margin) - var(--prize-area-top-margin));
    pointer-events: none;
    /* エリア自体は操作対象外 */
}

.prize {
    position: absolute;
    width: 80px;
    /* JSのPRIZE_WIDTH */
    height: 80px;
    /* JSのPRIZE_HEIGHT */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 5;
    /* 通常時の重なり順 */
    cursor: default;
    border-radius: 15px;
    /* 景品にも角丸 */
    /* ★★★ アニメーションを滑らかにするため transition を調整検討 ★★★ */
    transition: transform 0.2s ease-out, bottom 0.5s ease-out, left 0.5s ease-out, filter 0.3s ease;
    pointer-events: none;
    /* background-image はJSで設定 */
}

/* 掴まれている景品 */
.prize.is-caught {
    z-index: 15;
    /* 景品(5) < クレーン(10) < 掴んだ景品(15) < クロー(20) < 演出(50, 60) */
    filter: brightness(1.1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    /* 少し明るく影をつける */
}

/* ドロップゾーンに落ちた時のバウンドアニメーション */
.prize.prize-dropped {
    animation: prize-bounce 0.5s ease-out;
}

@keyframes prize-bounce {
    0% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-15px) scale(1.05);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

/* レア景品のスタイル */
.prize.rare {
    filter: drop-shadow(0 0 8px var(--pastel-yellow));
    animation: rare-pulse 1.5s infinite alternate ease-in-out;
}

@keyframes rare-pulse {
    from {
        filter: drop-shadow(0 0 6px var(--pastel-yellow));
        transform: scale(1);
    }

    to {
        filter: drop-shadow(0 0 12px gold);
        transform: scale(1.03);
    }

    /* より強く光る + 少し拡大 */
}

/* --- 獲得エリア --- */
#drop-zone {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150px;
    /* JSのDROP_ZONE_WIDTH */
    height: var(--drop-zone-height);
    background-color: var(--pastel-green);
    border-top: 4px dashed var(--pastel-green-dark);
    border-bottom-left-radius: 10px;
    /* 左下だけ角丸 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    color: #059669;
    /* emerald-700 */
    font-weight: 700;
    z-index: 1;
    /* 景品より奥 */
    pointer-events: none;
}

/* --- 操作ボタン --- */
.control-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    width: 100%;
    max-width: 350px;
    user-select: none;
    /* テキスト選択を防ぐ */
    -webkit-user-select: none;
}

.control-button {
    padding: 12px 0;
    /* 上下パディング */
    width: 90px;
    height: 70px;
    font-size: 1.0em;
    line-height: 1.2;
    text-align: center;
    background-color: var(--pastel-blue);
    /* ボタン色 */
    color: white;
    border: none;
    border-radius: 15px;
    /* 角丸 */
    cursor: pointer;
    box-shadow: 0 4px 0 #60a5fa;
    /* フラットデザイン風の影 */
    transition: background-color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* ★★★ アクセシビリティ: フォーカス時のスタイル ★★★ */
    outline: none;
    /* デフォルトのアウトラインを消す */
    position: relative;
    /* 疑似要素のため */
}

.control-button::after {
    /* フォーカスリング用の疑似要素 */
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 3px solid transparent;
    border-radius: 18px;
    /* ボタンの角丸 + α */
    transition: border-color 0.2s ease;
    pointer-events: none;
    /* クリックを妨げない */
}

.control-button:focus::after {
    /* キーボードフォーカス時に表示 */
    border-color: var(--pastel-blue-dark);
}

.control-button.catch:focus::after {
    /* キャッチボタンのフォーカス色 */
    border-color: var(--pastel-pink-dark);
}


.control-button i {
    font-size: 1.5em;
    margin-bottom: 3px;
}

.control-button:hover {
    background-color: var(--pastel-blue-dark);
}

.control-button:active {
    background-color: #3b82f6;
    /* sky-500 */
    transform: translateY(2px);
    /* 少し沈む */
    box-shadow: 0 2px 0 #60a5fa;
    /* 押したときの影 */
}

.control-button.catch {
    background-color: var(--pastel-pink);
    box-shadow: 0 4px 0 #f472b6;
    /* ピンク系の影 */
    width: 110px;
    /* キャッチボタンは少し大きく */
}

.control-button.catch:hover {
    background-color: var(--pastel-pink-dark);
}

.control-button.catch:active {
    background-color: #ec4899;
    /* pink-500 */
    box-shadow: 0 2px 0 #f472b6;
}

/* --- ゲームオプションボタン --- */
.game-options {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.game-options button {
    padding: 10px 18px;
    font-size: 0.95em;
    background-color: var(--pastel-purple);
    /* ボタン色 */
    color: white;
    border: none;
    border-radius: 10px;
    /* 角丸 */
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 3px 0 #c084fc;
    /* フラットデザイン風の影 */
    transition: background-color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
    display: inline-flex;
    /* アイコンとテキストを横並び */
    align-items: center;
    gap: 6px;
    /* ★★★ アクセシビリティ: フォーカススタイル追加 ★★★ */
    outline: none;
    position: relative;
}

.game-options button::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 2px solid transparent;
    border-radius: 12px;
    transition: border-color 0.2s ease;
    pointer-events: none;
}

.game-options button:focus::after {
    border-color: var(--pastel-purple-dark);
}


.game-options button:hover {
    background-color: var(--pastel-purple-dark);
}

.game-options button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 0 #c084fc;
}

/* --- 広告コンテナ --- */
.ad-container {
    margin: 25px auto;
    text-align: center;
    width: 100%;
    max-width: var(--game-area-max-width);
}

/* --- フッター --- */
.game-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    width: 100%;
}

.footer-links a {
    margin: 0 10px;
    font-size: 1.4em;
    color: var(--pastel-blue-dark);
    /* リンク色 */
    transition: color 0.2s ease;
    /* ★★★ アクセシビリティ: フォーカススタイル追加 ★★★ */
    outline: none;
    border-radius: 3px;
    /* リンク周りに少し余白 */
}

.footer-links a:focus {
    color: var(--pastel-pink-dark);
    /* ホバー色と同じ */
    box-shadow: 0 0 0 2px var(--pastel-blue-dark);
    /* フォーカスリング */
}

.footer-links a:hover {
    color: var(--pastel-pink-dark);
    /* ホバー色 */
}

.footer-links a:last-child {
    /* 運営会社リンク */
    font-size: 0.9em;
    color: var(--text-color);
    vertical-align: middle;
    margin-left: 15px;
    text-decoration: none;
}

.footer-links a:last-child:hover {
    color: var(--pastel-pink-dark);
    text-decoration: underline;
}

.footer-links a:last-child:focus {
    color: var(--pastel-pink-dark);
    text-decoration: underline;
    box-shadow: 0 0 0 2px var(--pastel-purple);
    /* 運営会社リンクのフォーカス色 */
}


.copyright {
    margin-top: 15px;
    font-size: 0.8em;
    color: #aaa;
    /* 少し薄めの色 */
}


/* --- 演出用スタイル --- */
#effect-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    /* 通常は透明 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
    z-index: 50;
    pointer-events: none;
    border-radius: 15px;
    /* ゲームエリアの角丸に合わせる */
    /* ★★★ 成功演出強化: 紙吹雪用コンテナ ★★★ */
    overflow: hidden;
    /* 紙吹雪がはみ出ないように */
}

#effect-overlay.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease;
    /* 表示時のみトランジション */
}

/* 成功時のエフェクト (CSSのみ) */
#effect-overlay.success {
    background: radial-gradient(ellipse at center, hsla(50, 100%, 85%, 0.7) 0%, hsla(50, 100%, 85%, 0) 70%);
    animation: success-pop 0.5s ease-out forwards;
}

/* ★★★ レア景品獲得時演出用クラス (JSで付与) ★★★ */
#effect-overlay.rare-success {
    background: radial-gradient(ellipse at center,
            hsla(50, 100%, 90%, 0.8) 0%,
            /* より明るいイエロー */
            hsla(50, 100%, 85%, 0) 80%);
    animation: success-pop 0.6s ease-out forwards, rare-flash 1.2s ease-in-out infinite alternate;
}

@keyframes rare-flash {
    from {
        box-shadow: 0 0 20px 10px gold;
    }

    to {
        box-shadow: 0 0 35px 20px gold;
    }
}

/* キラキラエフェクト (簡易版 - success/rare-success 共通でも良いかも) */
#effect-overlay.success::before,
#effect-overlay.success::after,
#effect-overlay.rare-success::before,
#effect-overlay.rare-success::after {
    content: '✨';
    position: absolute;
    font-size: 30px;
    opacity: 0;
    animation: sparkle-fall 0.8s ease-out 0.1s forwards;
}

#effect-overlay.success::before,
#effect-overlay.rare-success::before {
    top: 20%;
    left: 30%;
    animation-delay: 0.2s;
}

#effect-overlay.success::after,
#effect-overlay.rare-success::after {
    top: 40%;
    left: 70%;
    font-size: 40px;
}


@keyframes success-pop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

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

@keyframes sparkle-fall {
    0% {
        opacity: 1;
        transform: translateY(-20px) scale(0.5) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translateY(40px) scale(1.2) rotate(180deg);
    }
}

/* 失敗時のエフェクト */
#effect-overlay.fail {
    background-color: rgba(107, 114, 128, 0.3);
    /* 半透明のグレー */
    animation: fail-fade-in 0.5s ease-out forwards;
}

@keyframes fail-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 紙吹雪エフェクト */
.confetti {
    position: absolute;
    width: 8px;
    height: 15px;
    background-color: var(--pastel-pink);
    /* JSでランダム化 */
    opacity: 0;
    animation: confetti-fall 3s ease-out forwards;
    transform-origin: center;
    pointer-events: none;
    z-index: 55;
    /* オーバーレイより手前、メッセージより奥 */
}

@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(-10%) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translateY(110vh) rotate(720deg);
    }

    /* 画面外まで落ちる */
}


/* メッセージポップアップ */
#message-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    background-color: rgba(255, 255, 255, 0.95);
    padding: 30px 45px;
    border-radius: 20px;
    box-shadow: var(--shadow-medium);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        visibility 0s 0.4s;
    z-index: 60;
    /* 最前面 */
    text-align: center;
    min-width: 220px;
    pointer-events: none;
}

#message-popup.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
    transition: opacity 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

#message-popup span {
    /* メッセージテキスト */
    display: block;
    font-size: 1.9em;
    font-weight: 800;
    line-height: 1.3;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

#message-popup::before {
    /* アイコン表示用 */
    content: '';
    display: block;
    font-size: 45px;
    margin-bottom: 10px;
}

/* 成功時のアイコン */
#message-popup.success::before {
    content: '🎉';
    animation: icon-bounce 0.6s ease-out;
}

/* 失敗時のアイコン */
#message-popup.fail::before {
    content: '😥';
    animation: icon-shake 0.5s ease-in-out;
}

/* ★★★ レア成功時のアイコン ★★★ */
#message-popup.rare-success::before {
    content: '🌟';
    /* 星アイコン */
    animation: icon-bounce 0.6s ease-out, icon-spin 1s linear infinite;
}

@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }

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

/* 成功時テキスト色 */
#message-popup.success span {
    color: var(--pastel-pink-dark);
}

/* 失敗時テキスト色 */
#message-popup.fail span {
    color: var(--pastel-blue-dark);
}

/* ★★★ レア成功時テキスト色 ★★★ */
#message-popup.rare-success span {
    color: gold;
    text-shadow: 0 0 5px black;
}

/* アイコンアニメーション */
@keyframes icon-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes icon-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px) rotate(-3deg);
    }

    75% {
        transform: translateX(5px) rotate(3deg);
    }
}

/* 音声有効化プロンプト */
#audio-prompt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 20px;
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    border-radius: 10px;
    z-index: 100;
    /* 最前面 */
    cursor: pointer;
    font-size: 1.0em;
    text-align: center;
    box-shadow: var(--shadow-medium);
}

/* --- レスポンシブ対応 --- */
@media (max-width: 640px) {
    body {
        padding: 10px 5px;
    }

    #container {
        padding: 15px;
        border-radius: 15px;
    }

    .game-header h1 {
        font-size: 1.8em;
    }

    .game-header p {
        font-size: 0.9em;
    }

    .score-container {
        max-width: 100%;
        margin-bottom: 10px;
        gap: 5px;
    }

    #score-display,
    #highscore-display {
        font-size: 1.0em;
        padding: 5px 12px;
    }

    #score,
    #highscore {
        font-size: 1.0em;
        margin-left: 5px;
    }

    #game-area {
        border-width: 4px;
    }

    #drop-zone {
        font-size: 0.9em;
    }

    .control-buttons {
        max-width: 100%;
        gap: 10px;
        margin-top: 15px;
    }

    .control-button {
        width: 75px;
        height: 60px;
        padding: 8px 0;
        font-size: 0.9em;
        border-radius: 12px;
    }

    .control-button i {
        font-size: 1.3em;
    }

    .control-button.catch {
        width: 90px;
    }

    .control-button::after {
        border-radius: 15px;
    }

    /* フォーカスリング調整 */

    .game-options {
        margin-top: 10px;
        gap: 10px;
    }

    .game-options button {
        font-size: 0.9em;
        padding: 8px 14px;
        gap: 4px;
    }

    .game-options button::after {
        border-radius: 12px;
    }

    /* フォーカスリング調整 */

    #message-popup {
        padding: 20px 30px;
        min-width: 180px;
    }

    #message-popup span {
        font-size: 1.5em;
    }

    #message-popup::before {
        font-size: 35px;
    }

    #audio-prompt {
        font-size: 0.9em;
        padding: 10px 15px;
        width: 80%;
    }

    .game-footer {
        margin-top: 20px;
        padding-top: 15px;
    }

    .footer-links a {
        font-size: 1.3em;
    }

    .copyright {
        font-size: 0.75em;
    }
}

@media (max-width: 360px) {
    .control-button {
        width: 65px;
        height: 55px;
    }

    .control-button.catch {
        width: 80px;
    }

    .game-options button {
        padding: 6px 10px;
        font-size: 0.8em;
    }

    #score-display,
    #highscore-display {
        padding: 4px 10px;
        font-size: 0.9em;
    }
}