/* * {
    outline: 1px solid red !important;
} */

body {
    font-family: 'Kiwi Maru', serif;
    background-image: url('./img/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* fixed を削除し、デフォルトの挙動に任せるのがスマホでは安全 */
}

/* ポップフォント指定用 */
.font-pop {
    font-family: 'Mochiy Pop One', sans-serif;
}

#settlement-overlay {
    overflow-y: auto !important;
    /* 👈 モーダル自体の縦スクロールを許可 */
    justify-content: flex-start !important;
    /* 👈 はみ出た時に上部が消えるのを防ぎ、上から順にスクロールさせる */
    padding-top: 2rem !important;
    /* 上下に心地よい余白を作る */
    padding-bottom: 3rem !important;
}


/* レース付きのランチョンマット風デザイン */
.plate-field {
    background-color: #ffffff;
    border: 4px dashed #cbd5e1;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* レースのギザギザ（左右のフチ） */
.plate-field::before,
.plate-field::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    background-image: radial-gradient(circle, #cbd5e1 4px, transparent 5px);
    background-size: 12px 12px;
}

.plate-field::before {
    left: -6px;
}

.plate-field::after {
    right: -6px;
}

.skill-card-hand {
    transition: all 0.2s ease !important;
}

.skill-card-hand:not(.selected):hover {
    transform: translateY(-15px) scale(1.05) !important;
    z-index: 50 !important;
}

/* 🔥 ホバーした時、または「selected」クラスがついている時は表示しっぱなしにする */
/* .skill-card-hand:hover .tooltip-text, */
.skill-card-hand.selected .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.skill-card-hand.selected {
    transform: translateY(-25px) scale(1.20) !important;
    z-index: 100 !important;
}


#btn-start {
    box-shadow: 0 18px 30px rgba(236, 72, 153, 0.24);
}

.animate-bounce-slow {
    animation: bounce-slow 2.4s ease-in-out infinite;
}

@keyframes bounce-slow {

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

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

button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* === CSSツールチップ用の共通設定 === */
.has-tooltip {
    position: relative;
}

.tooltip-text {
    visibility: hidden;
    position: absolute;
    z-index: 100;
    white-space: nowrap;
    transition: opacity 0.15s ease-in-out;
    opacity: 0;
}

.has-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* --- 🎬 汎用カットイン演出の制御 --- */

/* 背景のフェード制御 */
.cutin-bg {
    transition: opacity 0.25s ease;
}

/* 画像のスライド制御 */
.cutin-content {
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

#cutin-overlay,
[id$="-cutin"] {
    position: fixed;
    inset: 0;
    pointer-events: none !important;
    /* カットイン表示中も裏の操作が必要な場合、または終了時に付与 */
    overflow: hidden !important;
}

/* 🔥 【状態1】右外から中央へ突進 */
#game-cutin-overlay.active .cutin-bg {
    opacity: 1;
}

#game-cutin-overlay.active .cutin-content {
    transform: translateX(0);
}

/* 🏃‍♂️ 【状態2】左へ超高速でハケる（-100vwで完全に見切れずハケる設計） */
#game-cutin-overlay.exit .cutin-content {
    transition: transform 0.2s ease-in;
    transform: translateX(-100vw);
}

#game-cutin-overlay.exit .cutin-bg {
    opacity: 0;
}

.cutin-content {
    max-width: 90vw !important;
    /* 画面幅の90%内に収める */
    height: 25vh !important;
    /* スマホ用に高さを少し控えめに */
}

/* JSで #skill-cutin に .active がついたときに発火 */
#skill-cutin.active {
    display: flex !important;
}

/* ① 背景スリット：左から右へ超高速で通り抜ける */
.active .cutin-bg {
    animation: slideBg 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ② イラスト：左から猛スピードで滑り込んできて、中央でジワリと動きながら右へハケる */
.active .cutin-image {
    top: calc(50% - 8rem);
    /* 画面縦中央に固定 (h-64の半分) */
    left: 15%;
    /* 画面左側に配置 */
    animation: slideImg 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ③ スキル名：イラストの出現から一瞬遅れて、右側にボカンと浮き出る */
.active .cutin-text {
    top: calc(50% - 1.5rem);
    /* 画面縦中央付近に固定 */
    right: 15%;
    /* 画面右側に配置 */
    opacity: 0;
    animation: popText 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.15s;
    /* 0.15秒の時間差で気持ちよさMAX */
}

/* --- ⚡ スキルカットイン専用 Keyframes（位置競合を解決版） --- */
@keyframes slideBg {
    0% {
        transform: translateX(-150%) skewX(-12deg);
    }

    12% {
        transform: translateX(0%) skewX(-12deg);
    }

    88% {
        transform: translateX(0%) skewX(-12deg);
        opacity: 1;
    }

    100% {
        transform: translateX(150%) skewX(-12deg);
        opacity: 0;
    }
}

@keyframes slideImg {
    0% {
        transform: translateX(-150%) scale(0.8);
        opacity: 0;
    }

    12% {
        transform: translateX(0%) scale(1);
        opacity: 1;
    }

    88% {
        transform: translateX(8%) scale(1.03);
        opacity: 1;
    }

    /* 中央滞在中に少し右にジワ動 */
    100% {
        transform: translateX(150%) scale(0.9);
        opacity: 0;
    }
}

@keyframes popText {
    0% {
        transform: scale(0.4) rotate(-4deg);
        opacity: 0;
    }

    12% {
        transform: scale(1.1) rotate(2deg);
        opacity: 1;
    }

    15% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    88% {
        transform: scale(1.03) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

/* --- Keyframesの定義 --- */
@keyframes slideBg {
    0% {
        transform: translateX(-150%) -skew-x-12;
    }

    15% {
        transform: translateX(0%) -skew-x-12;
    }

    85% {
        transform: translateX(0%) -skew-x-12;
        opacity: 1;
    }

    100% {
        transform: translateX(150%) -skew-x-12;
        opacity: 0;
    }
}

@keyframes slideImg {
    0% {
        transform: translateX(-200%) -skew-x-12;
        opacity: 0;
    }

    15% {
        transform: translateX(-10%) -skew-x-12;
        opacity: 1;
    }

    85% {
        transform: translateX(10%) -skew-x-12;
        opacity: 1;
    }

    100% {
        transform: translateX(200%) -skew-x-12;
        opacity: 0;
    }
}

@keyframes popText {
    0% {
        transform: translate(50%, 20px) -skew-x-12 scale(0.5);
        opacity: 0;
    }

    12% {
        transform: translate(50%, 0) -skew-x-12 scale(1.1);
        opacity: 1;
    }

    15% {
        transform: translate(50%, 0) -skew-x-12 scale(1);
        opacity: 1;
    }

    85% {
        transform: translate(50%, 0) -skew-x-12 scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(100%, -20px) -skew-x-12 scale(0.8);
        opacity: 0;
    }
}

/* バウンス */
@keyframes drop-bounce {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }

    60% {
        transform: translateY(10px);
        opacity: 1;
    }

    80% {
        transform: translateY(-5px);
    }

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

.animate-drop-bounce {
    animation: drop-bounce 0.8s ease-out forwards;
}


/* PC表示（画面幅768px以上）のとき */

@media (min-width: 768px) {
    #game-container {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        z-index: 10;
    }

    #game-play {
        /* 💡 1280 x 720 に設定 */
        width: 1280px !important;
        height: 720px !important;

        display: flex !important;
        flex-direction: column !important;
        /* 💡 高さが増えた分、要素を上下端に寄せず中央に集める */
        justify-content: center !important;
        /* 💡 要素間の間隔（おやつマットやボタンの距離）を少し広げてゆとりを持たせる */
        gap: 1.0rem !important;
        z-index: 400 !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

    .plate-field:not(.settlement-mat-cpu):not(.settlement-mat-player) {
        height: 7.5rem !important;
        /* 少し高さを出して豪華に */
        border-width: 3px !important;
    }
}


/* ==========================================================
   スマートフォン対応（画面幅 767px 以下のデバイス）
   ========================================================== */
@media (max-width: 767px) {

    #main,
    #chara-select {
        height: 100%;
        width: 100%;
        overflow: hidden;
        /* スクロール禁止 */
        touch-action: none;
        /* スワイプなどのタッチ操作を無効化 */
        overscroll-behavior: none;
        /* バウンス（引っ張り）効果を無効化 */
    }

    /* 1. 背景画像をモバイル専用に切り替え */
    #main>div {
        /* インラインで指定されているPC用背景を !important で強制上書き */
        background-image: url('./img/background_menu_mb.png') !important;

        /* スマホ画面に合わせて画像を綺麗にフィットさせる設定 */
        background-size: cover !important;
        /* 隙間なく画面全体を覆う */
        background-position: center !important;
        /* 画像の中央を基準にする */
    }

    /* 2. ボタン配置エリア（menu-button-area）の調整 */
    #menu-button-area {
        /* 縦長スマホの画面幅に合わせて、横幅を柔軟（％）に変更 */
        width: 85% !important;
        max-width: 320px !important;
        /* 横に広がりすぎないストッパー */
        height: auto !important;
        /* 中身のボタンの数に合わせて高さを自動伸縮 */
        padding: 1.25rem !important;
        /* スマホの狭い画面用に余白を少しだけタイトに */

        /* 
      【微調整のコツ】
      もしスマホ用背景（本の絵など）の「特定の枠」の中にボタンをぴったり乗せたい場合、
      以下のコメントアウトを外して、top（上からの位置）の数値を調整してください。
    */

        position: absolute !important;
        top: 55% !important;
        transform: translateY(-50%) !important;

    }

    /* 3. ボタンのサイズと文字サイズの最適化 */
    #menu-button-area button {
        /* PC用だと少し分厚いので、スマホで押しやすい絶妙な厚みに微調整 */
        padding-top: 0.45rem !important;
        padding-bottom: 0.45rem !important;
        font-size: 1.125rem !important;
        /* テキストを少しだけスマートに（18px相当） */
    }

    /* 4. 控えめにしたい「開発ボタン」や「戻るボタン」の個別調整 */
    #btn-dev-mode {
        font-size: 0.875rem !important;
        /* 開発ボタンは少し小さく */
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    #btn-back-to-main {
        margin-top: 0.5rem !important;
        /* 戻るボタンの余白を少し詰める */
    }
}

/* ========================================================
   2. 【スマホ用設定】画面縮小時にさらにコンパクトにする
   ======================================================== */
@media (max-width: 768px) {

    /* 👈 既存のスマホ用メディアクエリの中に追記してください */
    #sound-control-panel,
    #open-sound-panel {
        left: auto !important;
        /* Tailwindのleft-4を無効化 */
        /* 右側から1rem（right-4相当）の位置に固定 */
    }

    /* 🎵 開くボタン（音符）の縮小 */
    #open-sound-panel {
        right: 0.75rem !important;
        /* スマホの端っこに少し寄せる */
        bottom: 0.75rem !important;
        width: 2.25rem !important;
        /* w-11(44px) ➔ 約36pxへ縮小 */
        height: 2.25rem !important;
        border-radius: 0.5rem !important;
        /* ハコに合わせて角丸も少しシャープに */
    }

    /* ボタンの中の音符アイコンも一回り小さく */
    #open-sound-panel svg {
        width: 1.1rem !important;
        height: 1.1rem !important;
    }

    /* 🎛 サウンドコントロールパネル本体の縮小 */
    #sound-control-panel {
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        width: 14rem !important;
        /* 横幅を w-64(256px) ➔ 224px へスリム化 */
        padding: 0.75rem !important;
        /* 内側の余白を p-4 ➔ p-3 相当へ凝縮 */
        gap: 0.5rem !important;
        /* 要素同士の縦の隙間を詰める */
        border-radius: 1rem !important;
    }

    /* パネル内の各ボリュームエリアの文字やアイコンも微調整 */
    #sound-control-panel svg {
        width: 1.1rem !important;
        /* スピーカー等のアイコンを少し小さく */
        height: 1.1rem !important;
    }

    /* 音量インジケーター（10段階の棒）の隙間もわずかに詰める */
    .bgm-indicator-bars,
    .se-indicator-bars {
        gap: 1.5px !important;
    }
}

/* ==========================================================
   キャラクター選択画面：スマホ専用1画面圧縮レイアウト（エラー修正版）
   ========================================================== */
@media (max-width: 767px) {

    /* 全体を画面サイズ内に収め、外側のスクロールを禁止 */
    #chara-select {
        /* inset-0 (top/bottom/left/right 0) の挙動を高さだけ強制上書き */
        height: 100dvh !important;
        top: 0 !important;
        overflow: hidden !important;
        bottom: auto !important;
        /* 下に突き抜けないようにする */
    }

    /* 上部：詳細エリア（余白を極限まで圧縮） */
    #chara-select .flex-1 {
        padding: 0.4rem 0.75rem !important;
        align-items: flex-start !important;
        /* コンテンツを上寄せ */
    }

    /* コンテナ自体の余白調整 */
    #chara-select .max-w-7xl {
        gap: 0.25rem !important;
        flex-direction: column !important;
    }

    /* --------------------------------------------------------
     1. 好きなおやつ（右ブロック）を最上部に配置
     -------------------------------------------------------- */
    #chara-select .max-w-7xl>div:last-child {
        order: -2 !important;
        /* 最上部に配置 */
        margin-top: 0 !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 「好きなおやつ」ラベル */
    #chara-select .max-w-7xl>div:last-child>div:first-child {
        font-size: 0.75rem !important;
        padding: 0.15rem 0.6rem !important;
        /* 👈 0.6.rem のドットのタイポを修正 */
    }

    /* 巨大なおやつ画像のコンテナを非表示 */
    #chara-select .max-w-7xl>div:last-child>div:nth-child(2) {
        display: none !important;
    }

    /* おやつテキスト */
    #beloved-sweets {
        font-size: 0.95rem !important;
        margin-top: 0 !important;
    }

    /* --------------------------------------------------------
     2. 立ち絵のコンパクト復活 ＆ キャラクタ名
     -------------------------------------------------------- */
    #chara-select .max-w-7xl>div:first-child {
        order: -1 !important;
        /* おやつのすぐ下に配置 */
        width: 100% !important;
        margin: 0 !important;
        gap: 0.1rem !important;
    }

    /* 立ち絵の白い枠線を消し、ただの透明な画像置き場として復活 */
    #chara-select .max-w-7xl>div:first-child>div:first-child {
        display: flex !important;
        width: auto !important;
        height: 85px !important;
        /* 立ち絵の高さをコンパクトに指定してハミ出し防止 */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* 立ち絵画像自体を高さに合わせて綺麗にフィット */
    #chara-standing-img {
        height: 100% !important;
        width: auto !important;
        object-fit: contain !important;
    }

    /* キャラクター名（立ち絵のすぐ下に綺麗に詰める） */
    #chara-name {
        font-size: 1.4rem !important;
        margin-top: 0.1rem !important;
        margin-bottom: 0.1rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* --------------------------------------------------------
     3. 中央ブロック（丸アイコン削除 ＆ スキル画像拡大）
     -------------------------------------------------------- */
    #chara-select .max-w-md {
        max-width: 100% !important;
        gap: 0.4rem !important;
    }

    /* アイコン ＆ プレビュー画像の横並びコンテナ */
    #chara-select .max-w-md>.flex {
        gap: 0 !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* ❌ 詳細エリア内の「丸型アイコン」を完全非表示 */
    #chara-select .max-w-md>.flex>div:first-child {
        display: none !important;
    }

    /* スキル演出プレビュー画像（横幅を少し広げて大きくアピール） */
    #chara-select .max-w-md>.flex>.flex-1 {
        flex: none !important;
        width: 55% !important;
        max-width: 200px !important;
    }

    #skill-img {
        max-height: 85px !important;
        /* 55pxから大幅サイズアップ！ */
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* --------------------------------------------------------
     4. 説明枠 ＆ バッジの位置調整（被り解消）
     -------------------------------------------------------- */
    #chara-select .relative.bg-orange-100:last-of-type {
        padding: 1.0rem 0.65rem 0.6rem 0.65rem !important;
        margin-top: 0.75rem !important;
        border-width: 1px !important;
    }

    /* 「スキル」「キャラ」バッジをさらに上に逃がして文字との被りを解消 */
    #chara-select .relative.bg-orange-100>.absolute {
        font-size: 0.65rem !important;
        padding: 0.05rem 0.5rem !important;
        top: -12px !important;
        /* マイナス値を大きくして枠線の真上に配置 */
    }

    /* スキル名タイトル */
    #skill-name {
        font-size: 0.85rem !important;
        margin-bottom: 0.1rem !important;
    }

    /* 説明テキスト */
    #skill-description,
    #description {
        font-size: 0.725rem !important;
        line-height: 1.3 !important;
    }

    #description {
        max-height: 38px !important;
        overflow-y: auto !important;
    }

    /* --------------------------------------------------------
     5. 下部フッター（木枠 ＆ キャラセレクター）
     -------------------------------------------------------- */
    /* 💡 エラー原因だった「.h-1/3」を、構造指定「> div:last-child」に変更して完全回避！ */
    #chara-select>div:last-child {
        height: auto !important;
        padding: 0.4rem 0.75rem 0.5rem 0.75rem !important;
    }

    #chara-select>div:last-child>div {
        gap: 0.4rem !important;
    }

    #chara-select .flex-wrap {
        gap: 0.25rem !important;
    }

    /* セレクターアイコン（横1列キープ） */
    #chara-select .char-icon {
        width: 3.1rem !important;
        height: 3.1rem !important;
        border-width: 2px !important;
    }

    #chara-select .char-icon img {
        width: 80% !important;
        height: 80% !important;
    }

    #chara-select .char-icon.chara-selected {
        transform: translateY(-3px) !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
    }

    /* --------------------------------------------------------
     6. ボタンの順序入れ替え（開始 ➔ 戻る の縦並び）
     -------------------------------------------------------- */
    /* 💡 ここも「.h-1/3」を使わずに書き換え */
    #chara-select>div:last-child .max-w-md {
        flex-direction: column-reverse !important;
        /* 縦の並び順を強制逆転 */
        gap: 0.35rem !important;
        width: 100% !important;
        margin-top: 0.1rem !important;
    }

    /* 「おやつバトル開始！」ボタン */
    #btn-start-match {
        width: 100% !important;
        padding: 0.6rem 0 !important;
        font-size: 1rem !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 3px 0 #be185d !important;
    }

    /* 「↩ 戻る」ボタン */
    #btn-back-to-menu-from-chara {
        position: static !important;
        width: 100% !important;
        padding: 0.4rem 0 !important;
        font-size: 0.8rem !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 3px 0 #44403c !important;
    }

    /* --------------------------------------------------------
   7. 対戦待機バー（modal-waiting）のスマホ最適化
   -------------------------------------------------------- */
    /* バーの位置をスマホのノッチ（カメラ穴）を避けて少し下げる */
    #modal-waiting {
        top: 12px !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* ------------------------------------
   7-1. 上部：メイン待機カードのスタイル
   ------------------------------------ */
    /* メイン待機カード（1つ目の child div）のみに適用 */
    #modal-waiting>div:first-child {
        padding: 0.5rem 0.65rem !important;
        gap: 0.4rem !important;
    }

    /* 左側のグループ（アイコンや文字）の隙間を詰める */
    #modal-waiting>div:first-child .flex.items-center.gap-3 {
        gap: 0.35rem !important;
    }

    /* 選択キャラの丸アイコンを少しだけ小さくしてスペース確保 */
    #modal-waiting #waiting-chara-icon {
        width: 2.0rem !important;
        height: 2.0rem !important;
    }

    /* ぐるぐるアニメーションを少し細くスマートに */
    #modal-waiting>div:first-child .animate-spin {
        width: 0.9rem !important;
        height: 0.9rem !important;
        border-width: 2px !important;
    }

    /* メッセージの文字サイズとスペース確保 */
    #modal-waiting p.text-stone-700 {
        font-size: 0.75rem !important;
        letter-spacing: -0.02em !important;
        white-space: nowrap !important;
    }

    #modal-waiting .flex-wrap {
        margin-top: 0.15rem !important;
    }

    #modal-waiting #room-id {
        font-size: 0.7rem !important;
        padding-left: 0.2rem !important;
        padding-right: 0.2rem !important;
    }

    /* 🔥【原因箇所の修正】右側のボタン縦並びグループのみ幅を圧縮 */
    #modal-waiting>div:first-child>div.flex-col {
        width: 7.2rem !important;
        /* ボタンエリアのみ 7.2rem に固定 */
        gap: 0.25rem !important;
    }

    /* ボタン自体の縦幅・文字サイズを圧縮 */
    #modal-waiting>div:first-child>div.flex-col button {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
        font-size: 0.7rem !important;
    }

    /* ------------------------------------
   7-2. 下部：TIPSパネル専用スタイル（横長維持）
   ------------------------------------ */
    #tips-panel {
        width: 100% !important;
        /* 横幅を100%いっぱいに確保 */
        max-width: 100% !important;
        padding: 0.5rem 0.75rem !important;
        gap: 0.25rem !important;
    }

    /* TIPSヘッダーの高さ・隙間圧縮 */
    #tips-panel .flex.items-center.justify-between {
        margin-bottom: 0.1rem !important;
    }

    /* TIPSアイコン（💡）のサイズ調整 */
    #tips-panel .w-6.h-6 {
        width: 1.25rem !important;
        height: 1.25rem !important;
        font-size: 0.65rem !important;
    }

    #tips-panel #tips-category {
        font-size: 0.65rem !important;
    }

    /* TIPS本文テキストの領域調整 */
    #tips-panel .min-h-\[40px\] {
        min-height: 32px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #tips-panel #tips-text {
        font-size: 0.7rem !important;
        line-height: 1.25 !important;
    }

    /* キャンセルボタンをスマホ用にスリム化 */
    #btn-cancel-waiting {
        padding: 0.4rem 0.75rem !important;
        /* px-5 py-2.5 から大幅スリム化 */
        font-size: 0.75rem !important;
        /* text-sm から縮小 */
        border-radius: 0.5rem !important;
        /* 角丸をマイルドに */
    }

    /* --------------------------------------------------------
     8. トースト通知（toast-cancel）のスマホ最適化
     -------------------------------------------------------- */
    /* 位置をスマホのノッチを避けて調整 ＆ 画面からはみ出さないガード */
    #toast-cancel {
        top: 12px !important;
        width: auto !important;
        max-width: 90% !important;
        /* 画面の左右に10%ずつの安全マージンを確保 */
    }

    /* 内側の通知メッセージ本体の調整 */
    #toast-cancel>div {
        padding: 0.5rem 1rem !important;
        /* px-6 py-3 からスマホ用にスリム化 */
        font-size: 0.75rem !important;
        /* text-sm から1周り小さくして読みやすく */
        white-space: nowrap !important;
        /* スマホ画面で変なところで2行に折れるのを防止 */
        border-width: 1px !important;
        /* 枠線を少し細くしてスマートに */
    }

    /* --------------------------------------------------------
     8. 各種トースト通知（キャンセル・エラー・成功）のスマホ最適化
     -------------------------------------------------------- */
    /* 位置をスマホのノッチを避けて調整 ＆ 画面からはみ出さないガード */
    #toast-cancel,
    #toast-error,
    #toast-success {
        top: 12px !important;
        width: auto !important;
        max-width: 90% !important;
        z-index: 9999 !important;
        /* 画面の左右に10%ずつの安全マージンを確保 */
    }

    /* 内側の通知メッセージ本体の調整 */
    #toast-cancel>div,
    #toast-error>div,
    #toast-success>div {
        padding: 0.5rem 1rem !important;
        /* px-6 py-3 からスマホ用にスリム化 */
        font-size: 0.75rem !important;
        /* text-sm から1周り小さくして読みやすく */
        white-space: nowrap !important;
        /* スマホ画面で変なところで2行に折れるのを防止 */
        border-width: 1px !important;
        /* 枠線を少し細くしてスマートに */
    }
}

/* === スマホ用メディアクエリ（@media (max-width: 767px)）の中 === */
@media (max-width: 767px) {

    #game-container {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        overflow: hidden !important;
        touch-action: none;
        /* スマホでの貫通スクロールを完全に遮断 */
        z-index: 10;
    }

    #game-play {
        /* --- 背景とスクロール防止（ここはそのまま） --- */
        background-size: cover !important;
        background-position: center !important;
        touch-action: pan-x !important;
        overscroll-behavior-y: none !important;

        /* --- サイズ設定 --- */
        width: 100vw !important;
        height: 100svh !important;
        /* Safariのツールバーを除外した高さをガッチリ確保 */

        /* 🚨 scale(圧縮)は完全に削除！ 等倍で表示させます */
        transform: none !important;
        display: flex !important;
        /* --- 🌟 ここから新技：Flexboxによる縦割りレイアウト --- */
        flex-direction: column !important;
        /* 要素を縦に並べる */
        justify-content: space-evenly !important;
        /* 上下・要素間の「隙間」を均等に割り振る */
        align-items: center !important;
        /* 横方向は中央揃え */

        /* --- ポジショニングとスクロール --- */
        position: absolute !important;
        top: 0;
        left: 0;

        /* iPhoneの下部バー（ホームインジケーター）と被らないように安全な余白を取る */
        padding-bottom: env(safe-area-inset-bottom, 10px) !important;
        box-sizing: border-box;
    }

    /* --------------------------------------------------------
                9. ゲームプレイ画面（#game-play）全体のレイアウト組み替え
                -------------------------------------------------------- */
    /* CPU行（こちらは左右2分割のまま） */
    #game-play>div:has(.cpu-avatar-capsule) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.4rem !important;
        margin-top: 0.4rem !important;
        margin-bottom: 0.4rem !important;
        padding: 0 0.5rem !important;
    }

    /* 💡 自分（プレイヤー）行：3カラムにして、中央にバスケット用の「空き枠」を確保！ */
    #game-play>div:has(.avatar-capsule) {
        display: grid !important;
        grid-template-columns: 1fr 3.8rem 1fr !important;
        /* 👈 中央に3.8remの空間を作ります */
        gap: 0.4rem !important;
        margin-top: 0.4rem !important;
        margin-bottom: 0.4rem !important;
        padding: 0 0.5rem !important;
    }

    /* 📦 左上：アバターコンテナ */
    .cpu-avatar-capsule,
    .avatar-capsule {
        grid-column: 1 !important;
        grid-row: 1 !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        justify-self: start !important;
    }

    #cpu-avatar,
    #player-avatar {
        /* 💡 横幅を高さと同じにして正方形にする */
        width: 3.8rem !important;
        height: 3.8rem !important;
        position: relative !important;
    }

    #cpu-icon,
    #player-icon {
        max-width: 80% !important;
        max-height: 80% !important;
        object-fit: contain !important;
    }

    #cpu-avatar span.text-xs,
    #player-avatar span.text-xs {
        position: absolute !important;
        top: -0.4rem !important;
        left: 0 !important;
        transform: scale(0.8) !important;
        white-space: nowrap !important;
    }

    #cpu-candy-container,
    #user-candy-container {
        flex-wrap: wrap !important;
        max-width: 5rem !important;
        justify-content: flex-start !important;
        gap: 0.1rem !important;
    }

    .candy-icon {
        width: 0.9rem !important;
        height: 0.9rem !important;
    }

    /* 🪙 右上・右下：スコアエリア（枠線を残してミニマル化） */
    /* CPU側・プレイヤー側共通で、横幅をスリムにして右寄せに固定 */
    #game-play>div:has(.cpu-avatar-capsule)>.font-pop,
    #game-play>div:has(.avatar-capsule)>.font-pop {
        grid-column: 2 !important;
        /* CPUは2カラム目 */
        grid-row: 1 !important;
        width: 4.4rem !important;
        /* 👈 w-28(112px)をスマホ用にキュッとスリムに */
        flex-direction: column !important;
        /* 👈 縦並びのドッキング枠を維持！ */
        justify-self: end !important;
        align-self: center !important;
    }

    /* プレイヤー側は3カラム目（バスケットの右側）に綺麗に配置 */
    #game-play>div:has(.avatar-capsule)>.font-pop {
        grid-column: 3 !important;
        /* 👈 3カラム目に明示的に指定 */
    }

    /* 🪙 上半分：「ごうけい」ラベルの横幅調整と改行防止 */
    #cpu-status,
    #player-status-selector {
        /* 必要に応じてプレイヤー側の上のクラス/IDも */
        white-space: nowrap !important;
        /* 絶対に改行させない */
        font-size: 0.75rem !important;
        /* ラベルも少し小ぶりに */
    }

    /* 🪙 下半分：「スコア数字」のトリミング ＆ 改行防止 */
    #cpu-score,
    #player-score {
        /* --- 既存の素晴らしい設定 --- */
        font-size: 1.4rem !important;
        padding-top: 0rem !important;
        padding-bottom: 0.15rem !important;
        line-height: 1.1 !important;

        /* --- 🚨 【新設】改行バグを潰すための特効薬 --- */
        white-space: nowrap !important;
        /* 「５＋？」を絶対に改行させず横一行に固定 */
        letter-spacing: -0.05em !important;
        /* 文字同士の間隔をほんの少し詰めて枠内に収める */
    }

    /* 🍽️ 下段：お皿フィールド＆スキルマット */
    #game-play>div:has(.cpu-avatar-capsule)>.flex-1 {
        grid-column: 1 / span 2 !important;
    }

    #game-play>div:has(.avatar-capsule)>.flex-1 {
        grid-column: 1 / span 3 !important;
        /* 👈 プレイヤー側はお皿を3カラム分ぶち抜き */
        grid-row: 2 !important;
        width: 100% !important;
        gap: 0.3rem !important;
    }

    /* =========================================
   ランチマット（.plate-field）の縦幅をスリム化
========================================= */
    .plate-field {
        /* 元の h-48 (12rem) から大幅にカット！
       ※もしカードが縦にはみ出る場合は 7rem や 7.5rem に微調整してください */
        height: 4.5rem !important;

        /* 上下左右の余白と、中の要素同士の隙間もギュッと詰める */
        padding: 0.4rem !important;
        gap: 0.4rem !important;
    }

    /* マットの中にある「縦の点線（仕切り）」も、マットの縮小に合わせて短くする */
    .plate-field>div.h-32,
    .plate-field .border-dashed {
        height: 3.5rem !important;
        /* 元の h-32 (8rem) からカット */
    }

    #cpu-field {
        /* 1. 上下のマージンをマイナスにして、画面の最上部へ強制的に引き上げる */
        margin-top: -0.5rem !important;
        margin-bottom: 0px !important;

        /* 2. 内側の余白（p-4 ＝ 16px）を上下0、左右も最低限（4px）にして極薄化 */
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;

        /* 3. アイコン・点線・カードの間の隙間（gap-6 ＝ 24px）をギュッと凝縮 */
        gap: 0.3rem !important;
    }


    /* =========================================
   2. CPUフィールド右側の「縦並び」と「スキルマット」の圧縮
========================================= */
    /* ランチマットとスキルマットを包む flex-col */
    #game-play div.flex-1.flex.flex-col.gap-2 {
        gap: 0.2rem !important;
        /* マット同士の間隔を詰める */
    }

    /* CPU個別のスキルマット（h-20）も極薄化 */
    #cpu-skill-mat {
        height: 1.8rem !important;
        /* 2.4remからさらに攻めて極薄に */
        padding-top: 0.1rem !important;
        padding-bottom: 0.1rem !important;
    }

    /* =========================================
   3. 【新設】中央エリア（.center-area）の完全リセット
========================================= */
    /* クラス名が判明したため、ピンポイントで my-4 py-2 を抹殺 */
    #game-play .center-area {
        margin: 0 !important;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    #game-play .center-area>div.flex-col {
        flex-direction: row !important;
        /* 横並びを維持 */
        justify-content: center !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

    /* =========================================
   フードカード（.food-card）もマットに合わせて縮小
========================================= */
    .plate-field .food-card {
        /* 1. 元の w-32 (8rem) / h-44 (11rem) を粉砕してスマホサイズに上書き */
        /* 横幅 4rem (64px) / 高さ 5.5rem (88px) にして 6.5rem のマットに収める */
        width: 4rem !important;
        height: 3.5rem !important;
        /* 2. 「絶対に縮まない」ストッパーを解除して従順にする */
        flex-shrink: 1 !important;
    }

    /* 3. カード内の画像も、小さくなった枠にぴったり追従させる */
    .plate-field .food-card .card-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* 4. HIDEの文字が小さすぎて崩れるのを防ぐ微調整 */
    .plate-field .food-card .hide-overlay span {
        font-size: 8px !important;
        padding: 1px 3px !important;
    }

    /* 1. コンテナ自体の設定（Flexbox化 ＆ 幅いっぱいに使う） */
    #cpu-cards-container,
    #player-cards-container {
        display: flex !important;
        justify-content: flex-start !important;
        /* 左詰めに並べる */
        gap: 0.3rem !important;
        padding: 0 !important;
        width: 100% !important;
        /* 画面幅いっぱいに使う */
    }

    /* 2. カード枠（子要素）を枚数に応じて自動縮小させる */
    #cpu-cards-container .food-card,
    #player-cards-container .food-card {
        flex-shrink: 1 !important;
        /* 枚数が増えたら自動で縮むのを許可 */
        min-width: 0 !important;
        /* 縮小ブレーキを解除 */
    }

    /* 3. 中身の画像を縦横比を保ったまま枠内に収める */
    #cpu-cards-container .food-card img,
    #player-cards-container .food-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        /* 歪ませずにピッタリ収める */
    }

    .food-card {
        width: 4.2rem !important;
        height: 5.6rem !important;
    }

    #cpu-skill-mat,
    #player-skill-mat {
        height: 2.6rem !important;
        padding: 0.2rem 0.5rem !important;
    }

    /* --------------------------------------------------------
   10. 中央エリア（まんぷくライン ＆ グローバルマットの横並び・スリム化）
   -------------------------------------------------------- */
    /* 無駄に広い上下の余白（my-4 py-2）を極限まで圧縮 */
    #game-play>div:has(#bust-limit) {
        margin-top: 0.1rem !important;
        margin-bottom: 0.1rem !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 🌟 看板とマットを包む要素：縦並び(flex-col)から【横並び(row)】へ強制変更！ */
    #game-play>div:has(#bust-limit)>div.flex-col {
        flex-direction: row !important;
        /* これで横並びになります */
        justify-content: center !important;
        /* 中央に寄せる */
        align-items: center !important;
        /* 縦方向のセンターを綺麗に揃える */
        gap: 0.5rem !important;
        /* 看板とマットの間の「左右の隙間」 */
        width: 100% !important;
    }

    /* 💡 看板の巨大化と傾きを解除し、横並び用にシュッと小ぶりに */
    #game-play .bg-gradient-to-b {
        transform: none !important;
        scale: 0.8 !important;
        /* 0.85からさらに少しだけコンパクトに */
        padding: 0.3rem 1rem !important;
        /* 横のパディングを削ってスリムに */
        border-radius: 1rem !important;
        flex-shrink: 0 !important;
        /* 横並びの圧力で潰されるのを防ぐ */
    }

    #bust-limit {
        font-size: 1.6rem !important;
        /* 看板の縮小に合わせて微調整 */
    }

    /* 💡 グローバルマット：横並びになるので w-full(100%) を解除して横幅を固定！ */
    #global-skill-mat {
        width: 11rem !important;
        /* 📐 看板の隣に綺麗に収まる横幅（お好みで調整してください） */
        height: 2.4rem !important;
        /* 縦幅をスリム化 */
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
        flex-shrink: 0 !important;
        /* 潰されるのを防ぐ */
    }

    /* --------------------------------------------------------
                11. 操作ボタンエリア（おかわり ／ ごちそうさまのスマホ最適化）
                -------------------------------------------------------- */
    /* 外枠の縦余白（my-2）を微調整 */
    #game-play>div:has(#btn-hit) {
        margin-top: 0.3rem !important;
        margin-bottom: 0.3rem !important;
        gap: 0 !important;
    }

    /* 左右の隙間（gap-8）を詰め、親指が届く位置へ寄せる */
    #game-play .justify-center.gap-8 {
        gap: 0.6rem !important;
        padding: 0 0.75rem !important;
        width: 100% !important;
    }

    /* =========================================
   HIT・STANDボタン：スマホ実機での肥大化を防止し、
   画面の狭さに合わせて従順に圧縮させる設定
========================================= */
    /* =========================================
   HIT・STANDボタン：縦潰れ防止・レスポンシブ調整
========================================= */
    #btn-hit,
    #btn-stand {
        /* 1. 横幅は親要素の中で綺麗にシェア */
        width: 48% !important;
        /* ※ギャップ用に50%より少し余裕を持たせると安全です */

        /* 2. iOSのフォント自動調整を無効化 */
        -webkit-text-size-adjust: none !important;
        text-size-adjust: none !important;

        /* 3. 【重要】高さは指定せず、上下のpaddingでしっかり「厚み」を確保する */
        height: auto !important;
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
        padding-left: 0.2rem !important;
        padding-right: 0.2rem !important;

        /* 4. 文字サイズ（画面幅に応じて自然に変化） */
        font-size: clamp(0.875rem, 3.5vw, 1.25rem) !important;
        /* ※clampを使うと「小さすぎず・大きすぎず」に収まります */

        /* 5. 【超最重要】Flexboxの縦圧縮命令を完全にブロックする */
        flex-shrink: 0 !important;
        /* 絶対にペシャンコにさせない！ */

        /* 6. 見た目の装飾 */
        border-radius: 9999px !important;
    }

    /* --------------------------------------------------------
                12. おやつバスケット（自分のアイコンとごうけいの間に潜入）
                -------------------------------------------------------- */
    /* ========================================================
       2. おやつバスケットを fixed のまま絶対ズレない中央へ
       ======================================================== */
    #sweets-basket-container {
        position: fixed !important;
        /* fixedを維持！ */
        top: 1rem !important;


        /* 左右が対称になったので、50%が「完全なる中央の穴」になります */
        left: 50% !important;
        transform: translateX(-50%) !important;

        /* スマホ用のジャストサイズ */
        width: 3.8rem !important;
        min-width: 3.8rem !important;
        z-index: 50 !important;
    }

    #sweets-basket {
        animation: slow-glow 5s infinite;
    }

    @keyframes slow-glow {

        0%,
        70%,
        100% {
            opacity: 1;
            filter: brightness(100%);
        }

        /* 85%の時点で少し暗く（またはボヤっと）する */
        85% {
            opacity: 0.3;
            filter: brightness(70%);
        }
    }

    /* 残りおやつ予測リストもバスケットの真上に固定 */
    #basket-prediction-list {
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: auto !important;
        margin-top: 0.5rem !important;
        /* 👈 詰まりすぎ防止のクッション（約8px） */
        top: 100% !important;
        margin-left: 0 !important;
        width: 14rem !important;
        max-height: 50vh !important;
        z-index: 500 !important;
    }

    #fukuro-preview-box {
        left: 100% !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        /* バスケットの高さ中央に合わせる */
        margin-left: 0rem !important;
        /* バスケットとの間のスキマ */
        margin-top: 0 !important;
        z-index: 500 !important;
    }

    /* 🦉 ふくろう予知ボックス（小さくコンパクトに） */
    #fukuro-preview-box {
        width: 4.5rem !important;
        /* 横幅を縮小 */
        padding: 0.4rem !important;
        /* 内側余白を詰める */
    }

    /* 予知ボックス内のカード画像エリアも小さく縮小 */
    #fukuro-preview-box>div:last-child {
        width: 3.5rem !important;
        height: 4.5rem !important;
    }

    #cpu-stand,
    #player-stand {
        /* inset-0 (全域) を無効化し、サイズを 3.8rem に固定する */
        width: 3.8rem !important;
        height: 3.8rem !important;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0.5rem !important;
        /* 親の角丸に合わせる */
    }

    #cpu-stand span,
    #player-stand span {
        font-size: 13px !important;
        /* スマホの枠内に収まるジャストサイズ */
        border-width: 1.5px !important;
        /* 枠線を少し細くしてスタイリッシュに */
        /* padding: 2px 6px !important; */
        /* 内側の余白を詰める */
        /* letter-spacing: 0.05em !important; */
    }

    /* --------------------------------------------------------
               13. 下部スキルボトムシート（z-indexの補強）
               -------------------------------------------------------- */
    /* --------------------------------------------------------
   下部スキルボトムシート（スマホ用メディアクエリ内）
   -------------------------------------------------------- */
    /* 1. ボトムシート化（下からスライド） */
    #skill-sidebar {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 46vh !important;
        /* 高さは固定のままでOK */
        border-left: none !important;
        border-top: 2px solid #334155 !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        z-index: 100 !important;
    }

    /* 縦スライドのアニメーションへ変換 */
    #skill-sidebar.translate-x-full {
        transform: translateY(100%) !important;
    }

    /* 引き出しボタンを上部中央へ */
    #btn-toggle-sidebar {
        left: 50% !important;
        top: -1.8rem !important;
        transform: translateX(-50%) !important;
        width: 6rem !important;
        height: 1.8rem !important;
        border-radius: 0.75rem 0.75rem 0 0 !important;
        border: 2px solid #334155 !important;
        border-bottom: none !important;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2) !important;
    }

    #sidebar-toggle-icon {
        display: inline-block !important;
        transform: rotate(90deg) !important;
        font-size: 1.1rem !important;
    }

    /* --------------------------------------------------------
       内部レイアウト：縦積み＆表示順入れ替え
       -------------------------------------------------------- */
    /* スクロール領域を縦積みに戻す */
    #skill-sidebar .flex-1.overflow-y-auto {
        display: flex !important;
        flex-direction: column !important;
        /* 縦積み */
        align-items: center !important;
        gap: 1.5rem !important;
        /* 各セクション間の余白 */
        padding: 1rem !important;
    }

    /* 🔄 【魔法】HTMLの順番をCSSだけで入れ替える */
    /* 元々2番目にある「もっているスキルカード」を一番上（order: 1）へ */
    #skill-sidebar .flex-1.overflow-y-auto>div:nth-child(2) {
        order: 1 !important;
        width: 100% !important;
    }

    /* 元々1番目にある「キャラ専用スキル」をその下（order: 2）へ */
    #skill-sidebar .flex-1.overflow-y-auto>div:nth-child(1) {
        order: 2 !important;
        width: 100% !important;
    }

    /* 見出しラベルの調整（共通） */
    #skill-sidebar .flex-1.overflow-y-auto>div>span:first-child {
        writing-mode: horizontal-tb !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0.25rem !important;
    }

    /* --------------------------------------------------------
       各ボタンのレイアウト
       -------------------------------------------------------- */

    /* スマホ版のサイドバー内では、元々のホバーツールチップを完全に消す */
    #skill-hand .tooltip-text {
        display: none !important;
    }

    /* 1. 親のグリッド枠（#skill-hand）：中央寄せを粉砕して「引き伸ばし」に変更 */
    #skill-hand {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        /* 綺麗な2列 */
        gap: 0.75rem !important;
        /* カード同士の隙間 */
        width: 100% !important;

        /* 🚨 ここが最重要！中央寄せ(center)を上書きし、マス目いっぱいに広げる */
        justify-items: stretch !important;
        align-items: stretch !important;
    }

    /* 2. サイドバーの中にあるボタンだけを狙い撃ちして巨大化 */
    #skill-hand .skill-card-hand {
        /* 🚨 テンプレートの w-28 h-28 を cssの力で完全に無効化する */
        width: 100% !important;
        /* 横幅をマス目の100%いっぱいにする */
        max-width: 5rem !important;
        /* ← 6rem 〜 8rem あたりでお好みのサイズに調整してください */
        /* ストッパー解除 */
        height: auto !important;
        /* 高さを一旦リセット */
        aspect-ratio: 1 / 1 !important;
        /* 縦横比 1:1 を強制し、横幅と同じ高さの正方形にする */

        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. ボタンの中の画像も、広がったボタンの枠にぴったり追従させる */
    #skill-hand .skill-card-hand img.tooltip-icon {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* 隙間なく綺麗に正方形にはめ込む */
    }

    /* 2. 画像が親枠を絶対に押し広げないようにする魔法 */
    .skill-card-hand img,
    .tooltip-icon {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    /* 3. ツールチップ（ホバーで出てくる黒いポップアップ枠）自体の暴走を止める */
    /* ※HTMLの構成によってクラス名が違う場合は、ツールチップの親クラスに書き換えてください */
    .tooltip,
    .has-tooltip>div,
    [role="tooltip"] {
        width: 16rem !important;
        /* ツールチップの基本幅を指定 */
        max-width: 90vw !important;
        /* スマホ画面幅の90%を絶対に超えないようにする */
        white-space: normal !important;
        /* テキストが横に長すぎる場合に折り返す */
    }

    /* ツールチップ内の巨大画像に対するストッパー */
    .tooltip img,
    .has-tooltip>div img {
        width: 100% !important;
        max-height: 12rem !important;
        /* 画像の縦幅が伸びすぎないように制限 */
        object-fit: contain !important;
    }

    /* 2. 固有スキルの枠（正方形化を解除し、元の横長ボタンに戻す） */
    #skill-sidebar .flex-1.overflow-y-auto>div:nth-child(1) .relative {
        height: 5rem !important;
        /* 縦幅は少し余裕を持たせる */
        width: 100% !important;
        aspect-ratio: auto !important;
    }

    /* ヘッダー・テキストの微調整 */
    #btn-unique-skill {
        font-size: 0.9rem !important;
    }

    #player-skill-name {
        font-size: 1.1rem !important;
    }

    #skill-sidebar h2 {
        font-size: 1.1rem !important;
    }

    #skill-sidebar .shrink-0 {
        padding: 0.5rem !important;
    }


    /* --------------------------------------------------------
               15. スキル説明ツールチップ（画面幅基準のシート中央ポップアップ決定版）
               -------------------------------------------------------- */
    #skill-sidebar .tooltip-text {
        /* 💡 absoluteに戻し、表示位置をタップしたカードの中心にロック */
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        /* 縦横のズレを完全に相殺 */
        bottom: auto !important;
        margin: 0 !important;

        /* スクロールする枠や他のカードより確実に前面へ */
        z-index: 50 !important;

        /* 💡 【大本命】カードの狭い幅を無視し、スマホ画面の横幅（vw）を基準にワイド展開 */
        width: 75vw !important;
        max-width: 18rem !important;
        /* 横に広がりすぎないストッパー */

        /* 🎨 スマホゲームのカード詳細ダイアログ風デザイン */
        padding: 1rem !important;
        border-radius: 1.25rem !important;
        border: 2px solid #475569 !important;
        background-color: rgba(9, 15, 29, 0.98) !important;
        /* 背後のカードを隠す濃い贅沢な黒 */

        /* 影をめちゃくちゃ深くして「浮き出ている感」を大増量 */
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7),
            0 10px 10px -5px rgba(0, 0, 0, 0.7) !important;

        /* 縦書き化を絶対に許さない防衛ライン */
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* 📝 ポップアップ内のテキストサイズ微調整 */
    #player-tooltip-skill-name {
        font-size: 0.95rem !important;
        text-align: center !important;
        padding-bottom: 0.4rem !important;
        margin-bottom: 0.5rem !important;
    }

    #player-tooltip-skill-description,
    #player-sweets {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }

    /* --------------------------------------------------------
                    14. プレイヤーアバターのツールチップ（右方向へ展開）
                    -------------------------------------------------------- */
    .cpu-avatar-capsule .tooltip-text,
    .avatar-capsule .tooltip-text {
        /* 1. アイコンの「真下」に配置（0.5remの隙間） */
        top: calc(100% + 0.5rem) !important;
        bottom: auto !important;

        /* 2. 左端をアイコンと揃える（右側に伸びる） */
        left: 0 !important;

        /* 3. 垂直中央揃え用の translateY を解除 */
        transform: none !important;
    }

    /* --------------------------------------------------------
               16. スキルマット内のカードサイズ最適化（スマホ用）
               -------------------------------------------------------- */

    /* 1. スキルマット自体のレイアウトを維持 */
    #cpu-skill-mat,
    #player-skill-mat {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
        /* h-20(80px)の高さを維持 */
    }

    /* 2. 【最重要】スキルカードとして挿入される画像だけをサイズ固定する */
    /* もしJSで挿入される画像にクラスがない場合、idセレクタで範囲を限定します */
    #cpu-skill-mat img:not(.basket-icon),
    #player-skill-mat img:not(.basket-icon) {
        height: 2.5rem !important;
        /* 2.0remだと少し小さいかも？少しだけ大きく設定 */
        width: 2.5rem !important;
        /* 正方形の箱にフィットさせる */
        object-fit: contain !important;
        opacity: 1 !important;
        /* 半透明化を強制解除 */
        background: transparent !important;
        border-radius: 0.375rem !important;
        flex-shrink: 0 !important;
        /* これで押しつぶされるのを防ぐ */
    }

    /* 1. カードの親ボタンを強制的に小さくする */
    button.skill-card-hand {
        width: 2.5rem !important;
        /* 4rem(w-16)から2.5remに変更 */
        height: 2.5rem !important;
        padding: 0.2rem !important;
        /* 小さくなった分、余白も調整 */
        flex-shrink: 0 !important;
        /* flex内で押しつぶされないようにする */
    }

    /* 2. ボタン直下の画像だけをターゲットにする（ツールチップ内の画像は無視されるので安全！） */
    button.skill-card-hand>img.tooltip-icon {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        border-radius: 0.375rem !important;
    }



    /* --------------------------------------------------------
               17. リザルト画面（settlement-overlay）のスマホ最適化
               -------------------------------------------------------- */

    #settlement-overlay {
        padding-bottom: 25vh !important;
        /* 👈 ここの数値を大きくすると、さらに上へ移動します（例: 15vh, 20vh） */
        box-sizing: border-box !important;
    }

    /* 1. タイトルロゴの縮小と余白の圧縮 */
    #settlement-overlay .text-center.mb-6 {
        margin-bottom: 0.5rem !important;
    }

    #settlement-overlay h2 {
        font-size: 1.8rem !important;
        /* 4xl(36px)からスマホサイズへ */
    }

    /* 2. マット同士の隙間を小さくし、中央寄せ */
    #settlement-overlay .max-w-2xl {
        gap: 1.2rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* 3. 相手・あなたの「お皿マット」自体の高さ・余白をスマートに */
    .settlement-mat-cpu,
    .settlement-mat-player {
        height: 10.5rem !important;
        /* h-65(260px)を、スマホに収まる168pxに凝縮 */
        padding: 0.6rem 0.8rem !important;
        /* 内側の余白をタイトに */
    }

    /* 4. 並んだ「おやつカード」のコンテナとカード自体のサイズ調整 */
    #settlement-cpu-cards,
    #settlement-player-cards {
        display: flex !important;
        justify-content: flex-start !important;
        height: 5.4rem !important;
        gap: 0.3rem !important;

        /* 万が一はみ出しても横スクロールで逃げられる保険（お好みで） */
        /* overflow-x: auto !important; */
    }

    #settlement-cpu-cards .food-card,
    #settlement-player-cards .food-card {
        width: 3.6rem !important;
        height: 4.8rem !important;

        /* 🌟 1. 潰れることを許可する（0から1に変更） */
        flex-shrink: 1 !important;

        /* 🌟 2. Flexboxの「これ以上小さくならないブレーキ」を解除 */
        min-width: 0 !important;
    }

    /* 🌟 3. 中にある画像タグに対して object-fit を指定する */
    #settlement-cpu-cards .food-card img,
    #settlement-player-cards .food-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        /* 画像の変形を防ぎつつ枠内に収める */
    }

    /* 5. スコア、キャンディ、合計ラベルがある行の調整 */
    .settlement-mat-cpu>.flex,
    .settlement-mat-player>.flex {
        display: flex !important;
        flex-direction: row !important;
        /* 👈 強制的に横一列に並べる */
        justify-content: space-between !important;
        align-items: center !important;
        /* 上下の中央をビシッと揃える */
        width: 100% !important;
        padding: 0.2rem 0.5rem !important;
    }

    /* 🪢 「ごうけい」と「数字」を絶対に縦泣きさせないグループ */
    .settlement-mat-cpu>.flex>.flex.items-center,
    .settlement-mat-player>.flex>.flex.items-center {
        display: flex !important;
        flex-direction: row !important;
        /* 👈 横並び */
        align-items: center !important;
        gap: 0.4rem !important;
        flex-shrink: 0 !important;
        /* スコアエリアが潰れるのを防ぐ */
    }

    /* 🏷️ 「ごうけい」ラベル */
    .settlement-mat-cpu .text-xs,
    .settlement-mat-player .text-xs {
        font-size: 0.85rem !important;
        font-weight: bold !important;
        white-space: nowrap !important;
        /* 👈 縦書き化を絶対に禁止！ */
    }

    /* 🪙 「スコア数字」と「スラッシュ・上限値」 */
    #settlement-cpu-score,
    #settlement-player-score,
    .settlement-mat-cpu .bust-limit,
    .settlement-mat-player .bust-limit {
        font-size: 2.2rem !important;
        /* 画面に映える大迫力サイズ */
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    /* 🍬 【大本命】主張の強すぎたキャンディ画像を小さくする */
    #settlement-cpu-candy,
    #settlement-player-candy {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.15rem !important;
        justify-content: flex-end !important;
        flex-grow: 1 !important;
        /* 空いたスペースをキャンディに割り当てる */
    }

    /* 💡 キャンディの中の画像（img）をピンポイントで狙い撃ち */
    #settlement-cpu-candy img,
    #settlement-player-candy img,
    #settlement-cpu-candy .candy-icon,
    #settlement-player-candy .candy-icon {
        width: 1.1rem !important;
        /* 👈 巨大だった画像をキュッと可愛いサイズに縮小！ */
        height: 1.1rem !important;
        object-fit: contain !important;
    }

    /* 6. アバターアイコン（丸枠）の位置とサイズの調整 */
    #settlement-overlay .rounded-full.w-20.h-20 {
        width: 3.2rem !important;
        /* w-20(80px)から51px相当へコンパクトに */
        height: 3.2rem !important;
    }

    /* 相手アバターの位置微調整 */
    .settlement-mat-cpu>div:has(#cpu-result-icon) {
        top: -1.6rem !important;
        right: 0.5rem !important;
        left: auto !important;
    }

    /* あなたアバターの位置微調整 */
    .settlement-mat-player>div:has(#player-result-icon) {
        bottom: -1.6rem !important;
        left: 0.5rem !important;
    }

    /* 7. 「あいてのおやつ」「あなたのおやつ」リボンの位置と文字 */
    .settlement-mat-cpu>div:has(+ div:has([id^="badge-cpu"])) {
        top: -0.8rem !important;
        left: 6.0rem !important;
        font-size: 9px !important;
        padding-left: 5rem !important;
        padding-right: 0.75rem !important;
    }

    .settlement-mat-player>div:has(+ div:has([id^="badge-player"])) {
        bottom: -0.8rem !important;
        right: 4.0rem !important;
        font-size: 9px !important;
        padding-right: 1rem !important;
        padding-left: 0.75rem !important;
    }

    /* 8. 勝敗バッジ（WIN! / LOSE... / DRAW）のサイズダウン */
    [id^="badge-cpu"],
    [id^="badge-player"],
    .badge-draw {
        font-size: 1rem !important;
        /* text-2xlから小さく */
        padding: 0.2rem 0.6rem !important;
        top: -1.2rem !important;
    }

    /* 9. 中央の「VS」バッジのサイズダウンと被り防止 */
    #settlement-overlay .absolute.inset-0.flex.items-center {
        z-index: 40 !important;
        /* マットの裏に隠れないように */
    }

    #settlement-overlay .absolute.inset-0.flex.items-center>div {
        font-size: 1.5rem !important;
        /* text-4xlからスケールダウン */
        padding: 0.25rem 0.75rem !important;
        border-width: 1px !important;
    }

    /* ... 既存のスマホ用設定 ... */

    /* 🐺 スマホ用：ジャッカル演出（右下コンパクト表示） */
    #jackal-event-overlay {
        left: auto !important;
        right: 0.75rem !important;
        /* 右端からの余白 */
        bottom: 1rem !important;
        /* 下端からの余白 */
    }

    /* キャラ画像のサイズダウン（256px -> 140px） */
    #jackal-img {
        height: 8.75rem !important;
        /* 約140px */
    }

    /* 吹き出しのコンパクト化 */
    #jackal-balloon {
        font-size: 0.875rem !important;
        /* テキストを小さく */
        padding: 0.375rem 0.75rem !important;
        /* パディング縮小 */
        margin-bottom: 0.5rem !important;
        /* 画像との余白縮小 */
        border-width: 2px !important;
        /* 枠線を細く */
    }

}

@media (max-width: 640px) {

    /* 1. 全体のパディングを抑えて窮屈さを解消 */
    #final-result-overlay {
        padding: 1rem !important;
    }

    /* 2. タイトルの巨大さを調整 */
    #final-result-title {
        font-size: 2.5rem !important;
    }

    /* 3. 画像の巨大すぎるスケール(scale-150)を無効化 */
    #final-result-overlay .transform.scale-150 {
        transform: scale(1) !important;
        margin: 1rem 0 !important;
        /* 上下に適度な余白 */
    }

    #final-result-img {
        max-width: 85vw !important;
        /* 画面幅に収める */
        max-height: 18rem !important;
        /* 高さを制限 */
    }

    /* 4. ボタンを縦並びに変更して押しやすくする */
    #final-result-actions {
        flex-direction: column !important;
        /* 縦積み */
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
        width: 90% !important;
        /* 画面の幅に合わせる */
    }

    #final-result-actions button {
        width: 100% !important;
        /* ボタンを横幅いっぱいに */
        font-size: 1.1rem !important;
        padding: 0.8rem 1rem !important;
        /* パディングを少し抑える */
    }

    #turn-view {
        top: 0%;
    }

    @media (max-height: 700px) {
        #turn-view {
            top: 160% !important;
        }
    }
}