* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Quicksand', "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "Noto Sans JP", sans-serif;
    letter-spacing: 0.02em;
    font-weight: 500; /* 💡 疑似ボールド化を防ぐためにベースの太さを明示 */
}

:root {
    --color-berry: #B42F5A;
    --color-peach: #F3D0D8;
    --color-text-normal: #2C2C2C;
    --color-text-dim: #B3B3B3;
    --color-white: #FFFFFF;
}

body {
    background-color: var(--color-peach); /* 初期状態は優しいピーチ背景 */
    color: var(--color-text-normal);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.4s ease-in-out; /* 背景色アニメーション */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

span {
    font-weight: inherit;
}

.app-container {
    width: 100%;
    position: relative;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* 💥 画面外への突き抜けと、透明な無限スクロールを根本から撲滅する修正 */
    height: auto;       /* 💡 縦幅を100vh固定から解放し、中身に合わせて自動伸縮させる */
    min-height: 100vh;  /* 💡 最低限、画面いっぱいの高さはキープして背景色を守る */
    
    /* 💡 上下の中央配置（justify-content: center）を削りました。
       これがあると、縦長になった結果画面が画面の「上」にハミ出て、上にスクロールできなくなるためです */
}
/* 画面セクションの基本スタイル */
.view-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    padding: 2rem 1.5rem;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
}

.view-section.active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
}

/* ─── 📦 ワイヤーフレームの核：浮かび上がる白い大きなカード ─── */
.white-card {
    background-color: var(--color-white);
    width: 100%;
    max-width: 450px;
    min-height: 520px;
    border-radius: 32px;
    padding: 2.5rem 2rem;
    box-shadow: 0 12px 36px rgba(180, 47, 90, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around; /* 上下いっぱいに綺麗に要素を割り振る */
    overflow: hidden;
    position: relative;
}

/* ─── ① トップ画面用 ─── */
.logo-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 0rem;
}

.logo-svg-venn {
    width: 114px;
    height: 114px;
    transform: translateY(2px);
}

.logo-text {
    font-size: 3.8rem;
    font-weight: 700;
    color: var(--color-berry);
    letter-spacing: -0.05em;
    line-height: 1;
}

.lead-text {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 2;
    color: var(--color-text-normal);
    margin: 0 0;
    padding-bottom: 1.6rem;
    word-break: keep-all;
}

.btn-primary {
    background-color: var(--color-berry);
    color: var(--color-white);
    border: none;
    padding: 1.1rem 0;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 16px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 6px 20px rgba(180, 47, 90, 0.15);
    transition: transform 0.1s ease;
}

.btn-primary:active { transform: scale(0.98); }

/* ─── ② オンボーディング画面用 ─── */
.onboarding-panel {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.onboarding-panel.active {
    display: flex;
    animation: panelFadeIn 0.4s ease-in-out forwards;
}

.onboarding-text-white {
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
}

.memphis-illustration {
    width: 100%;
    max-width: 350px;
    height: 100%;
    max-height: 320px;
    background-color: var(--color-peach);
    border-radius: 24px;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.user-avatars { 
    display: flex; 
    gap: 70px; 
    
    /* 💥 上の絶妙な隙間をキュッと上に引き締める修正 */
    margin-top: -1.2rem;   /* 💡 カードの天井側へアイコンの位置を少し吸い寄せます */
    margin-bottom: 0.4rem; /* 💡 下の選択肢カードとの距離も絶妙に整えます */
}
.avatar { font-size: 2.8rem; }
.card-combination-pattern { display: flex; align-items: center; gap: 12px; }
.dim-pattern { opacity: 0.35; }

.mini-card {
    background-color: var(--color-white);
    color: var(--color-text-normal);
    padding: 6px 4px;        /* 💡 左右の無駄な内側余白を14pxから4pxへギュッと削る */
    border-radius: 10px;
    font-size: 0.82rem;      /* 💡 ほんの少しだけフォントサイズを小さくして安全圏にする */
    font-weight: 700;
    width: 8.2rem;           /* 💡 横幅を 8rem から 8.2rem へわずかに広げて領域を確保 */
    white-space: nowrap;     /* 💡 【最強の保険】Safariに絶対に文字の自動折り返しをさせない魔法の命令 */
    text-align: center;      /* 💡 文字を綺麗に中央に寄せる */
}

.match-indicator, .nonmatch-indicator {
    width: 2rem;             /* 💡 記号が占める横幅を統一 */
    height: 2rem;            /* 💡 縦幅も統一 */
    display: inline-flex;    /* 💡 文字を上下左右のド真ん中に配置するモードを起動 */
    align-items: center;     /* 💡 縦方向のド真ん中 */
    justify-content: center; /* 💡 横方向のド真ん中 */
    font-weight: 700;
    line-height: 1;          /* 💡 行間による勝手な浮き上がりを完全にリセット */
}

.match-indicator {
    font-size: 1.4rem;       /* 💡 丸（○）の見た目の大きさを微調整 */
    color: #2e7d32;          /* 💡 少し上品で目に優しい深めのグリーンに */
}

.nonmatch-indicator {
    font-size: 1.4rem;       /* 💡 バツ（×）のサイズを丸と完全に一致させる */
    color: #c62828;          /* 💡 絶妙にマッチするお洒落な赤に */
    transform: translateY(-1px); /* 💡 【Safariの執念】フォント特有のコンマ数ミリの浮きを完全に下へ引きずり下ろすおまじない */
}

/* ─── ③ 設定画面用（ベリー背景用の極太ワイド設計） ─── */
#view-settings {
    justify-content: flex-start;
    overflow-y: auto;
}

#settings-form {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.setting-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-white); /* 背景反転に合わせて白文字 */
    margin: 1.8rem 0 0.8rem 0;
    width: 100%;
    text-align: center;
}

.gender-selector {
    display: flex;
    gap: 14px;
    width: 100%;
}

.btn-gender, .btn-gender-partner {
    flex: 1;
    background-color: var(--color-white);
    border: 2px solid transparent;
    font-size: 1.6rem;
    padding: 0.9rem 0;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    color: var(--color-text-normal);
}

.btn-gender.selected, .btn-gender-partner.selected {
    background-color: var(--color-peach);
    border-color: var(--color-white);
    color: var(--color-berry);
    transform: scale(1.02);
}

.input-field {
    width: 100%;
    padding: 1.1rem;
    border: 2px solid transparent;
    border-radius: 16px;
    background-color: var(--color-white);
    font-size: 1.05rem;
    color: var(--color-text-normal);
    text-align: center;
    outline: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.input-field:focus {
    border-color: var(--color-peach);
}

.genre-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 14px;
    background-color: var(--color-white);
    padding: 22px;
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.genre-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 700;
    user-select: none;
}

.genre-item input { position: absolute; opacity: 0; }

.custom-checkbox {
    height: 22px;
    width: 22px;
    background-color: var(--color-white);
    border: 2px solid var(--color-peach);
    border-radius: 7px;
    margin-right: 14px;
    position: relative;
    display: inline-block;
}

.genre-item input:checked ~ .custom-checkbox {
    border-color: var(--color-berry);
    background-color: #FFF0F3;
}

.genre-item input:checked ~ .custom-checkbox::after {
    content: '✓';
    position: absolute;
    color: var(--color-berry);
    font-size: 16px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn-submit-white {
    background-color: var(--color-white);
    color: var(--color-berry);
    border: none;
    padding: 1.1rem 0;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 16px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* ─── ④ 部屋作成完了画面（未表示・バグ完全修正版） ─── */

/* 部屋作成画面の親コンテナ：不透明な色を剥がして中央配置 */
#view-room-created.view-section.active {
    background-color: transparent !important; /* 💡 透明化して後ろの円を見せる */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    padding: 1.5rem;
}

/* 部屋作成画面の中の白い巨大な角丸カード（トップ画面と対になる正方形比率） */
#view-room-created .white-card {
    background-color: var(--color-white);
    width: 100%;
    max-width: 380px;
    height: 380px; 
    min-height: 380px; /* 縦に余計に伸びるのをがっちりガード */
    
    border-radius: 32px;
    padding: 2rem;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* 上下均等に美しく分散 */
    box-sizing: border-box;
    overflow: hidden;
}

/* カードの中の文字サイズや余白 */
.room-created-header {
    width: 100%;
    text-align: center;
}

.share-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text-normal);
    margin-bottom: 4px;
}

.share-subtitle {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-dim);
}

/* URLコピーボックス */
.url-copy-box {
    display: flex;
    width: 100%;
    background-color: #F5F5F5;
    border: 1px solid var(--color-peach);
    border-radius: 12px;
    padding: 4px 6px;
    box-sizing: border-box;
}

#share-url-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-text-normal);
    padding: 0.4rem;
    font-size: 0.8rem;
    outline: none;
}

#btn-copy-url {
    background-color: var(--color-berry);
    color: var(--color-white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s;
}
#btn-copy-url:active { transform: scale(0.95); }

/* 各種ボタンのレイアウトグループ */
.share-actions-group {
    width: 100%;
}

/* 🔗 好きなアプリでシェアボタン（白背景にベリー枠線のサブデザイン） */
.btn-share-trigger {
    width: 100%;
    background-color: var(--color-white);
    color: var(--color-berry);
    border: 2px solid var(--color-peach);
    padding: 0.9rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 14px;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.btn-share-trigger:active {
    transform: scale(0.98);
    background-color: #FFF0F3;
}

/* 予備用のLINEボタン */
.btn-share-line-backup {
    width: 100%;
    background-color: #06C755;
    color: var(--color-white);
    border: none;
    padding: 0.9rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 14px;
    cursor: pointer;
    margin-top: 10px;
    box-sizing: border-box;
}

/* 🏁 自分の回答に進むボタン（待望のベリー色×白文字のメインアクション） */
.btn-start-my-answer {
    width: 100%;
    background-color: var(--color-berry);
    color: var(--color-white);
    border: none;
    padding: 0.9rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(180, 47, 90, 0.15);
    box-sizing: border-box;
    transition: transform 0.1s;
}
.btn-start-my-answer:active {
    transform: scale(0.98);
    filter: brightness(0.9);
}
/* ─── 質問画面用（縦スクロール＆スナップ特化へ差し替え） ─── */

/* 既存の active スタイルを上書き・拡張 */
.view-section.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100vh;
}

/* 💡 質問画面セクションだけの特別ルール */
#view-questions.view-section.active {
    display: block;      /* flexだとスクロールが干渉するためブロック配置に */
    overflow: hidden;     /* 外側の余計なスクロールを禁止 */
    padding: 0;           /* 画面いっぱいに広げる */
}

/* 縦スクロールを管理するコンテナ */
.questions-scroll-wrapper {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;       /* 縦スクロールを強制有効化 */
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかに */
    scroll-snap-type: y mandatory;     /* 💡 縦方向のスナップを有効化 */
    padding: 40px 20px;       /* 上下に余白を作って最初と最後のカードを中央に寄せやすくする */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 50px;                /* カードとカードの隙間 */
    align-items: center;
}

/* スクロールバーを非表示（デザインをスマートにするため） */
.questions-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

/* 質問カードをスクロールスナップに対応させる */
#view-questions .white-card {
    scroll-snap-align: center; /* 画面の中央にピタッと止まる */
    scroll-snap-stop: normal;  /* スクロール時に一気に飛ばされるのを防ぐ */
    flex-shrink: 0;            /* カードのサイズが潰れないように固定 */
    width: 100%;
    max-width: 380px;          /* スマホサイズにフィット */
    min-height: 75vh;          /* 画面内でのカードの存在感を出す */
    margin: 10px 0;
}

/* 共通パーツ（進捗バー・バッジ・ボタン）の再定義 */
.progress-container {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-dim);
    margin-bottom: 1.2rem;
}

.genre-badge {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-berry);
    background-color: #FFF0F3;
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid var(--color-peach);
}

.question-slider-zone {
    width: 100%;
    margin: 1rem 0;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-main-text {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.65;
    color: var(--color-text-normal);
    word-break: normal;
    width: 100%;
}

.question-action-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 0.5rem;
}

.btn-answer-main {
    background-color: var(--color-berry);
    color: var(--color-white);
    border: none;
    padding: 1.1rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(180, 47, 90, 0.15);
}

.btn-answer-sub {
    background-color: var(--color-white);
    border: 2px solid var(--color-peach);
    color: var(--color-text-normal);
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 16px;
    cursor: pointer;
}

.btn-answer-dim {
    background-color: transparent;
    border: none;
    color: var(--color-text-dim);
    padding: 0.8rem 0;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.m-t-large { margin-top: 2.5rem; }

@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── 🎨 質問ボタンが選択された時のアクティブカラー（追加） ─── */

/* 1. やってみたい（メインボタン）が選択されたとき */
.btn-answer-main.selected {
    transform: scale(0.99);
    filter: brightness(0.85); /* 少し色を濃くして、押し込まれた感を出す */
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 2. 相手に合わせる（サブボタン）が選択されたとき */
.btn-answer-sub.selected {
    background-color: var(--color-peach); /* サブカラーのピーチに */
    border-color: var(--color-peach);
    color: var(--color-berry);            /* 文字はメインカラーのベリーに */
    transform: scale(0.99);
}

/* 3. やりたくない（控えめボタン）が選択されたとき */
.btn-answer-dim.selected {
    color: var(--color-text-normal);       /* 薄いグレーから、はっきりした文字色に */
    background-color: #F5F5F5;             /* 極めて薄いグレーの背景をつけて選択中であることを示す */
    border-radius: 16px;
    font-weight: 700;
}

/* ─── 🔗 汎用シェアボタンのスタイル（追加） ─── */
.share-actions-group {
    width: 100%;
}

.btn-share-trigger {
    width: 100%;
    background-color: var(--color-white);
    color: var(--color-berry);
    border: 2px solid var(--color-white);
    padding: 1.1rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.btn-share-trigger:active {
    transform: scale(0.98);
    background-color: var(--color-peach);
}

/* ─── 🔗 画面左上固定のシェアボタン ─── */
.btn-fixed-share {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 100; /* カードやスクロール領域よりも手前に配置 */
    
    background-color: rgba(255, 255, 255, 0.8); /* うっすら透ける白 */
    border: 1px solid var(--color-peach);
    color: var(--color-berry);
    
    padding: 8px 14px;
    border-radius: 20px; /* 可愛い丸角のカプセル形状 */
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(180, 47, 90, 0.08);
    
    display: flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(4px); /* 背景をほんのりぼかして高級感を演出 */
    transition: all 0.2s ease;
}

.btn-fixed-share:active {
    transform: scale(0.95);
    background-color: var(--color-white);
}

/* スマホの横幅が非常に狭い場合、テキストを隠してアイコンだけにする配慮（任意） */
@media (max-width: 360px) {
    .share-btn-text {
        display: none;
    }
    .btn-fixed-share {
        padding: 8px;
        border-radius: 50%; /* 完全な丸にする */
    }
}

/* 💡 カードの上のパーツ（.card-top-bar）は不要になったので、進捗バーの余白だけ戻しておきます */
.progress-container {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-dim);
    margin-bottom: 1.2rem; /* 元の余白に戻す */
}

/* ─── 🔮 背景ベン図アニメーション（追加） ─── */
/* ─── 🔮 背景ベン図アニメーション（追加） ─── */
#bg-animation-canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;

    /* 💥 JSの気まぐれなサイズ変更を完全に無視して、画面全体にがっちり固定する修正 */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* 💡 画面サイズが変わっても、背景だけは1ミリもズレずに追従させる */
}

/* ─── ⏳ ⑤ パートナー回答待ち画面（新設） ─── */
#view-waiting.view-section.active {
    background-color: transparent !important; /* 確定のベリー色背景 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
}

/* トップやシェア画面と統一された正方形に近いカード */
#view-waiting .white-card {
    background-color: var(--color-white);
    width: 100%;
    max-width: 380px;
    height: 380px;
    min-height: 380px;
    border-radius: 32px;
    padding: 2.2rem 2rem;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

/* ドキドキ動くハートアイコンの演出 */
.waiting-sync-icon {
    font-size: 2.5rem;
    animation: heartBeat 1.2s infinite ease-in-out;
}

.waiting-header {
    text-align: center;
    width: 100%;
}

.waiting-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text-normal);
    margin-bottom: 16px;
}

.waiting-status {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-berry); /* ベリー色で目立たせる */
    background-color: #FFF0F3;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
}

.waiting-hint-text {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-text-dim);
    text-align: center;
}

/* フロントモック用の仮ボタン */
.btn-mock-complete {
    background: transparent;
    border: 1px dashed var(--color-peach);
    color: var(--color-text-dim);
    font-size: 0.75rem;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 4px;
}

/* ハートが脈打つアニメーションの定義 */
@keyframes heartBeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.12); }
    28% { transform: scale(1); }
    42% { transform: scale(1.12); }
    70% { transform: scale(1); }
}
/* アプリ名はベリー背景に映える白文字に */
#view-result .result-top-bar .result-app-title {
    color: var(--color-white);
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

/* 結果スコアなどを白いカードにして見やすく */
.result-status-container {
    background-color: var(--color-white);
    width: 100%;
    max-width: 380px;
    padding: 1.5rem;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    margin-bottom: 1.5rem;
}
.result-celebration { font-size: 1.1rem; font-weight: 700; color: var(--color-berry); margin-bottom: 4px; }
.result-summary { font-size: 0.9rem; font-weight: 700; color: var(--color-text-normal); }
.sync-score-badge { font-size: 3rem; font-weight: 700; color: var(--color-berry); line-height: 1.1; margin-top: 5px; }

/* 💡 style.css のベン図・名前エリアを上書き */
.venn-diagram-container {
    background-color: var(--color-white);
    width: 100%;
    max-width: 380px;
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.venn-svg-wrapper {
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: center;
}

.result-venn-svg {
    height: 100%;
}

/* 🌟 名前を横並びにするオシャレなコンテナ */
.venn-names-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 文字とハートの隙間 */
    width: 100%;
    margin-top: 5px;
}

.venn-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-berry);
    white-space: nowrap; /* 文字の折り返しを禁止 */
}

.venn-crosssign {
    font-size: 0.9rem;
    color: var(--color-berry);
}

/* 💡 style.css の一番下に追記：ベン図の円を公式カラーに強制着色！ */

/* 左の円（あなたのカラー：優しいピンク、またはメインのベリー色） */
.venn-circle-left {
    fill: #F3D0D8 !important;
}

/* 右の円（相手のベース：淡いピーチピンク） */
.venn-circle-right {
    fill: #F3D0D8 !important;
}

/* 🌟 真ん中の重なり部分（ふたりのシンクロエリア：濃いベリー色） */
.venn-circle-intersection {
    fill: #B42F5A !important;
}

/* クリップパス内の円は見た目には影響しないため透明でOK */
.venn-circle-left-clip {
    fill: #FFFFFF;
}

/* 📜 一致したリスト表示 */
.matched-list-container {
    width: 100%;
    max-width: 380px;
    background-color: var(--color-white);
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    margin-bottom: 1.5rem;
    text-align: left;
}
.matched-list-title { font-size: 0.95rem; font-weight: 700; color: var(--color-text-normal); margin-bottom: 1rem; border-bottom: 2px solid var(--color-peach); padding-bottom: 8px; }
.matched-items-scroll { display: flex; flex-direction: column; gap: 12px; max-height: 200px; overflow-y: auto; }
.matched-item-card { background-color: #FFF8F9; border-left: 4px solid var(--color-berry); padding: 10px 14px; border-radius: 0 12px 12px 0; }
.matched-genre { font-size: 0.7rem; font-weight: 700; color: var(--color-berry); background-color: #FFF0F3; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-bottom: 4px; }
.matched-text { font-size: 0.88rem; font-weight: 700; line-height: 1.5; color: var(--color-text-normal); }

/* トップに戻るボタンは白ベースに変更してスッキリさせる */
.btn-restart-app {
    width: 100%; max-width: 380px; background-color: var(--color-white); color: var(--color-berry);
    border: none; padding: 1.1rem; font-size: 1.1rem; font-weight: 700; border-radius: 16px;
    cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.btn-restart-app:active { transform: scale(0.98); }

/* UIがじんわり浮き出るアニメーション */
@keyframes resultUiFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   🌟【MVP用】アフィリエイト広告用のシンプルデザイン（完全復活版）
   ========================================================================== */
.ad-banner-container {
    width: 100%;
    max-width: 380px;
    background-color: var(--color-white) !important; /* 確実に白カードにする */
    border-radius: 24px; /* 他のカードと角丸の丸みを統一 */
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* 浮遊感のある影も統一 */
    text-align: center;
    box-sizing: border-box;
}

.ad-notice {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-dim);
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

/* 実際の広告リンク（テキストや将来のバナー画像が綺麗に収まる枠線） */
.ad-mock-link {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-berry) !important; /* 青文字を打ち消してベリー色に */
    text-decoration: none !important; /* 下線を強制非表示 */
    line-height: 1.5;
    padding: 12px;
    border: 2px dashed var(--color-peach);
    border-radius: 14px;
    background-color: #FFF8F9;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* 指を乗せたとき・タップしたときの可愛いリアクション */
.ad-mock-link:hover, .ad-mock-link:active {
    background-color: var(--color-peach);
    color: var(--color-berry) !important;
    transform: scale(0.98);
}

/* 1. 招待された側のタイトルサイズを1.3remに指定 */
#view-partner-welcome .share-title {
    font-size: 1.3rem;
}

/* 2. 説明文の行間を1.8に、下部マージン（パディング）を0にして元の見た目を再現 */
#view-partner-welcome .lead-text {
    font-size: 0.98rem;
    line-height: 1.8;
    padding-bottom: 1rem;
    font-weight: 700;
}

/* 3. #invited-by-name（お相手の文字）を公式の太文字＆ベリー色に強制指定 */
#view-partner-welcome #invited-by-name {
    color: var(--color-berry) !important;
    font-weight: 700;
}

/* 1行目：公式のベリー色（#B42F5A）にして太文字を適用 */
#view-top .lead-text .lead-line-1 {
    font-size: 1.2rem;
    color: var(--color-berry);
    font-weight: 700;
}

/* ==========================================================================
   🎨 回答画面UX改善：回答済みカードの「ピンクグレー化」＆「シンプル極太強調」
   ========================================================================== */

/* 💡 1. 回答済みのカード全体を、くすみピンクグレーに変更（遅延の黒い線を完全根絶） */
#view-questions .white-card.answered-card {
    background-color: #F6EFF0 !important; /* ほんのり温かみのある絶妙なピンクグレー */
    background-image: none !important;    /* ストライプや余計な装飾を完全に消去 */
    
    /* 💥 解決策：遅れてノイズになる枠線（border）を「完全にゼロ」にして消滅させる */
    border: 0.001px solid transparent !important; /* 0にするとレイアウトが1pxガタつくのを防ぐため、実質ゼロに */
    
    /* ブラウザ固有のアウトラインやタップハイライトも完全に無色透明化 */
    outline: none !important;
    outline-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
    
    /* 影のチラつきも防ぐため、プレーンで非常に薄いピーチの影に固定 */
    box-shadow: 0 4px 20px rgba(243, 208, 216, 0.1) !important;
    
    /* 💥 枠線が消えたので、背景色の変化だけに絞って一瞬（0.1秒）でサッと切り替える */
    transition: background-color 0.1s ease-in-out;
}

/* 子要素にフォーカスが当たった時の親カードへの枠線・影の飛び火も完全ガード */
#view-questions .white-card.answered-card:focus,
#view-questions .white-card.answered-card:focus-within,
#view-questions .white-card.answered-card:active {
    outline: none !important;
    border: 0.001px solid transparent !important;
    box-shadow: 0 4px 20px rgba(243, 208, 216, 0.1) !important;
}

/* 💡 2. 前のバージョンで好評だった、選ばれなかったボタンの綺麗なトーンダウン */
#view-questions .white-card.answered-card .question-action-group button:not(.selected) {
    opacity: 0.35;
    background-color: var(--color-white) !important;
    color: var(--color-text-dim) !important;
    border-color: #E0E0E0 !important;
    box-shadow: none !important;
}

/* 💡 3. 【お気に入り部分】ユーザーが選んだボタンを、大袈裟なネオンなしで超クッキリ強調 */
#view-questions .white-card.answered-card .question-action-group button.selected {
    opacity: 1 !important;
    transform: scale(1.02); /* 選んだボタンだけわずかにぷっくり大きく */
    font-weight: 700 !important;
    transition: all 0.2s ease-in-out;
}

/* 🌟 ①「やってみたい」が選ばれた時のシンプル極太強調 */
#view-questions .white-card.answered-card .btn-answer-main.selected {
    background-color: var(--color-berry) !important; /* 元の鮮やかなベリー色を維持 */
    color: var(--color-white) !important;
    border: 3px solid #911F43 !important; /* ひと回り濃い太枠でガチッと引き締める */
    box-shadow: 0 4px 12px rgba(180, 47, 90, 0.2) !important; /* プレーンで自然な立体感のみ */
}

/* 🌟 ②「相手に合わせる」が選ばれた時のシンプル極太強調 */
#view-questions .white-card.answered-card .btn-answer-sub.selected {
    background-color: var(--color-white) !important; /* 元の白背景を維持 */
    color: var(--color-berry) !important;             /* 元のベリー色文字を維持 */
    border: 3px solid var(--color-peach) !important;   /* ピーチの枠線を「3px」の太枠にしてクッキリ主張 */
    box-shadow: 0 4px 12px rgba(180, 47, 90, 0.05) !important;
}

/* 🌟 ③「やりたくない」が選ばれた時のシンプルクッキリ強調 */
#view-questions .white-card.answered-card .btn-answer-dim.selected {
    background-color: #d4d4d4 !important;             /* ピンクグレーに負けない一段濃いグレー */
    color: var(--color-text-normal) !important;       /* 文字をはっきりさせて選択を主張 */
    border: 2px solid #D9D9D9 !important;             /* しっかりした枠線で確定感を出す */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* ==========================================================================
   🍔 ハンバーガーメニュー：洗練されたスライドインデザイン
   ========================================================================== */

/* 💡 1. 三本線ボタンの配置とデザイン */
.hamburger-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    z-index: 2000; /* 常に一番手前に表示 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 12px rgba(180, 47, 90, 0.05);
    transition: all 0.3s ease;
}

/* 三本線の線のスタイル */
.hamburger-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--color-berry); /* ベリー色の線 */
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* 💡 ボタンがアクティブ（メニュー展開時）になったら三本線を「✕」に変形 */
.hamburger-btn.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.is-active span:nth-child(2) {
    opacity: 0;
}
.hamburger-btn.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* 💡 2. メニュー画面本体（GPU加速を有効化してラグを完全根絶） */
.hamburger-menu {
    position: fixed;
    top: 0;
    left: 0; /* 💥 基準点を0に固定してレイアウト計算を発生させない */
    width: 280px;
    height: 100vh;
    background-color: #F6EFF0; /* 画面と統一感のある上品なピンクグレー */
    z-index: 1900;
    padding-top: 80px;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.05);

    /* 💥 魔法のコード：最初は自分の横幅分（-280px）だけ左外に隠しておく */
    transform: translateX(-280px);
    
    /* 💥 重い「all」を廃止し、位置移動の「transform」だけに限定して0.2秒の神速へ */
    transition: transform 0.2s ease-in-out;
    
    /* 💥 スマホのGPU（グラフィックチップ）を強制起動させてヌルヌル動かす設定 */
    will-change: transform;
    backface-visibility: hidden;
}

/* 💡 メニューが開いた状態（leftを変更するのではなく、transformで右に引き出す） */
.hamburger-menu.is-open {
    transform: translateX(0); /* 💥 元の位置（画面の左端）にスッとスライドイン */
}

/* 💡 3. メニュー内のリストデザイン */
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-list li a {
    display: block;
    padding: 16px 28px;
    color: var(--color-text-normal);
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.2s ease;
}

/* リンクを触ったとき（ホバー）の可愛いリアクション */
.menu-list li a:hover {
    background-color: rgba(180, 47, 90, 0.05);
    color: var(--color-berry);
    padding-left: 34px; /* わずかに右に動く遊び心 */
}

/* 💡 4. 薄い区切り線 */
.menu-divider {
    height: 1px;
    background-color: #E6DCDD; /* 目立ちすぎない馴染むグレー線 */
    margin: 12px 24px;
}

/* 💡 5. 背後を暗くするマスクの初期状態（opacityの変化だけに絞って最速化） */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1800;
    opacity: 0;
    pointer-events: none; /* 通常時はクリックをすり抜ける */
    
    /* 💥 修正：アニメーションの対象を「opacity」だけに限定して負荷を激減 */
    transition: opacity 0.2s ease-in-out;
    will-change: opacity;
}

/* メメニューが開いている時はマスクを表示 */
.menu-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
   🍔 ハンバーガーメニュー：ホーム画面（トップ）限定表示コントロール
   ========================================================================== */

/* 💡 1. 基本ルール：ボタンは原則として「常に非表示」にしておく */
.app-container .hamburger-btn {
    display: none !important;
}

/* 🌟 2. 例外ルール：ホーム画面（#view-top）がアクティブな時だけ、ボタンをクッキリ表示する */
.app-container:has(#view-top.active) .hamburger-btn {
    display: flex !important; /* 💡 ホーム画面にいる時だけ確実に表示されます */
}

/* 💡 3. 【安全対策】メニューが開いたまま画面が進んだ場合の、メニュー本体と黒マスクの強制非表示 */
.app-container:has(#view-questions.active) .hamburger-menu,
.app-container:has(#view-waiting.active) .hamburger-menu,
.app-container:has(#view-result.active) .hamburger-menu,
.app-container:has(#view-questions.active) .menu-overlay,
.app-container:has(#view-waiting.active) .menu-overlay,
.app-container:has(#view-result.active) .menu-overlay {
    display: none !important;
}

/* ==========================================================================
   📦 ハンバーガーメニュー先：共通モーダルUIデザイン
   ========================================================================== */

/* モーダルの背景（画面全体を覆うすりガラス風） */
.common-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(44, 44, 44, 0.4);
    backdrop-filter: blur(5px);
    z-index: 3000;
    display: none; /* 💡 普段は非表示 */
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* アクティブ時 */
.common-modal.is-active {
    display: flex; /* 💡 パッと出す */
}

.common-modal .modal-card {
    background-color: var(--color-white);
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    border-radius: 28px;
    padding: 2.5rem 1.8rem 2rem 1.8rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    position: relative;
    display: flex;
    flex-direction: column;
}

.common-modal.is-active .modal-card {
    transform: translateY(0);
}

/* 右上のバツ（閉じ）ボタン */
.modal-close-btn {
    position: absolute;
    top: 18px;
    right: 22px;
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: var(--color-text-dim);
    cursor: pointer;
    line-height: 1;
}
.modal-close-btn:hover { color: var(--color-berry); }

/* モーダルのメインタイトル */
.modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-berry);
    text-align: center;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #FFF0F3;
    padding-bottom: 12px;
    flex-shrink: 0;
}

/* 中身のテキストが入る、自動縦スクロール領域 */
.modal-body-content {
    overflow-y: auto; /* 💡 文字が溢れたらここだけが縦にスクロールする */
    flex-grow: 1;
    padding-right: 4px;
}
/* スクロールバーをしなやかに */
.modal-body-content::-webkit-scrollbar { width: 4px; }
.modal-body-content::-webkit-scrollbar-thumb { background: var(--color-peach); border-radius: 4px; }

/* モーダル内の文字装飾 */
.modal-body-content .sub-h {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-normal);
    margin-top: 16px;
    margin-bottom: 6px;
}
.modal-body-content .sub-p {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.6;
    color: #555555;
    margin-bottom: 14px;
}

/* ==========================================================================
   🕵️‍♂️ パートナー招待時のトップ画面「チラ見えバグ」完全根絶コントロール
   ========================================================================== */
/* 💡 【超重要】JSが動く前の、1フレーム目のハンバーガーメニューのチラつきを完全に封じる */
.hamburger-menu:not(.is-open) {
    display: none !important;
}
   
/* 💡 アプリが起動した瞬間は、カード型UI全体を一旦「完全に透明」にして裏で待機させる */
.app-container .white-card {
    opacity: 0;
}

/* 🌟 例外：JavaScriptの準備が完了して、画面に「active」クラスがついた瞬間にだけ、カードをパッとクッキリ表示する */
.app-container .view-section.active .white-card {
    opacity: 1;
    animation: fadeInQuick 0.4s ease-in-out forwards; /* タイムラグなしで瞬時に表示 */
}

@keyframes fadeInQuick {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 📱 スマホ画面（横幅が狭い端末）のキモさを完全根絶するハイブリッド決定版ルール */
@media (max-width: 480px) {
    
    /* 1. タイトル、部屋完成、オンボーディングは画面固定。回答画面だけは自然に下までスクロールできるようベースを設定 */
    html, body {
        overflow-x: hidden !important;
        width: 100vw !important;
    }

    /* 2. 最外枠：基本はド真ん中配置。回答画面が来たときだけ自然に縦に伸びる仕様へ自動切り替え */
    .app-container {
        width: 100vw !important;
        height: auto !important;          /* 💡 100vh固定を解除し、タイムライン形式が下に伸びるスペースを作る */
        min-height: 100vh !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* 💡 通常画面は完全に中央ホールド */
        align-items: center !important;
        box-sizing: border-box;
    }

    /* 3. 【基本カード設計】画面に対してドカンと大きく、美しい正方形のベース */
    .white-card {
        width: 94% !important;
        max-width: 390px !important;
        height: 380px !important;
        min-height: 380px !important;
        padding: 1.8rem 1.2rem !important; /* 上下のゆとりを贅沢に確保 */
        justify-content: space-between !important;
        box-sizing: border-box;
        margin: 0 auto !important;          
    }

    /* 4. 👑【部屋完成画面】中身が少なくても「タイトル画面と完全に同じ位置」でド真ん中に綺麗に固定 */
    #view-room-created {
        height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #view-room-created .white-card {
        height: 380px !important;
        min-height: 380px !important;
        margin: 0 auto !important;
        transform: translateY(-2vh) !important; /* 💡 ここで一歩上にホールドしてズリ落ち感を完全に防止 */
    }

    /* 5. 🎨【オンボーディング画面】縦幅個別のロック＆はみ出し完全防衛 */
    #view-onboarding {
        height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #view-onboarding .white-card {
        height: 460px !important;        
        min-height: 460px !important;
        max-height: 460px !important;     /* 💡 縦をガチガチに固定して引き伸ばしを防止 */
        justify-content: flex-start !important; /* 💡 空間を均等に割るのをやめ、上から順に整列 */
        gap: 0 !important;
        margin: 0 auto !important;
        transform: translateY(-2vh) !important; /* 💡 重心の高さを完全同期 */
    }
    .memphis-illustration {
        width: 100% !important;
        height: 190px !important;        
        max-height: 190px !important;
        padding: 10px 0 !important;
        gap: 6px !important;
        margin-top: 0.5rem !important;  /* 💡 上の余白を縮めて全体を引き上げる */
        margin-bottom: 1.8rem !important; /* 💡 下のテキストとの間に上品なゆとりを開ける */
        box-sizing: border-box;
    }
    .user-avatars {
        gap: 40px !important;
        margin-top: 0rem !important;    
        margin-bottom: 0rem !important;
    }
    .card-combination-pattern {
        gap: 6px !important;
        width: 100% !important;
        justify-content: center !important;
    }
    .mini-card {
        width: 6.6rem !important;       
        font-size: 0.74rem !important;
        padding: 4px 2px !important;
        white-space: nowrap !important;
    }

    /* ─── 📝【回答画面】ごっちゃになるバグを永久に追放！パネルをスリムにし、極上のスクロール体験へ ─── */
    #view-questions.view-section.active {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;          /* 💡 タイムライン形式が縦に綺麗に並ぶようにする */
        padding: 4vh 0 60px 0 !important; 
        overflow: visible !important;
    }
    #view-questions .questions-scroll-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 34px !important;             /* カードとカードの心地よい隙間 */
        width: 100% !important;
        height: auto !important;          
        overflow-y: visible !important;
        scroll-snap-type: none !important;
        padding: 0 !important;
        box-sizing: border-box;
    }
    #view-questions .white-card {
        scroll-snap-align: none !important;
        flex-shrink: 0 !important;
        width: 88% !important;            /* 💡 幅をスマートにスリム化 */
        max-width: 340px !important;      /* 💡 340pxに制限して上品なサイズ感に */
        height: 380px !important;         
        min-height: 380px !important;
        margin: 0 auto !important;        
        justify-content: space-between !important;
        transform: none !important;       
    }
    #view-questions .btn-primary {
        position: relative !important;    /* 固定を解除し、最後の質問カードの後に自然に並べる */
        width: 88% !important;            /* 💡 質問パネルの幅（340px）と完全に一致させて美しく整列 */
        max-width: 340px !important;
        margin: 30px auto 10px auto !important; /* 最後のカードの下にポンと置く */
        padding: 1rem 0 !important;
        font-size: 1.1rem !important;
        flex-shrink: 0 !important;
    }
    #view-questions .skip-notice-text {
        position: relative !important;
        margin-top: 10px !important;
        margin-bottom: 80px !important;   
        font-weight: 700;
        text-align: center;
        width: 100% !important;
    }
    .progress-container {
        margin-bottom: 0rem !important;
    }
    .question-slider-zone {
        min-height: 90px !important;
        margin: 0.2rem 0 !important;
    }
    .question-main-text {
        font-size: 1.25rem !important;
        line-height: 1.6 !important;
    }
    .question-action-group {
        gap: 10px !important;
        width: 100% !important;
    }
    .btn-answer-main, .btn-answer-sub, .btn-answer-dim {
        padding: 0.8rem 0 !important;
        font-size: 1rem !important;
    }

    /* 7. 👑【タイトル画面】完璧だったレイアウト・ゆとり比率を100%そのまま完全維持 */
    #view-top {
        height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #view-top .white-card {
        transform: translateY(-2vh) !important;
    }
    .logo-group {
        margin-top: 0.2rem !important;
        gap: 8px !important;
    }
    .logo-text {
        font-size: 2.8rem !important;
    }
    .logo-svg-venn {
        width: 80px !important;
        height: 80px !important;
    }
    .lead-text {
        font-size: 1rem !important;
        line-height: 1.8 !important;
        margin: 1rem 0 !important;
        padding-bottom: 0rem !important;
    }
    .btn-primary {
        padding: 1rem 0 !important;
        font-size: 1.1rem !important;
        margin-bottom: 0.2rem !important;
    }
}