/* style.css*/

/* ======== 1. 基本設定 ======== */

body {
margin: 0;
padding: 0;
font-family: "Zen Maru Gothic", sans-serif;

/* ▼ 真ん中に寄せるための設定 */
display: flex;
justify-content: center; /* 左右中央 */
align-items: center; /* 上下中央 */

/* ▼ 重要：高さを「今見えている範囲」に固定する */
height: 100dvh;
width: 100vw;

/* 枠からはみ出た背景などは見せない */
overflow: hidden;
box-sizing: border-box;
background-color: #222;
}

/* ======== 1.5 背景ループアニメーション（完全整列Ver） ======== */

.scrolling-bg {
position: fixed;
top: -100%;
left: -100%;
width: 300%;
height: 300%;
z-index: -1;
background-color: #222;
background-image: url('images/bg-logo.png'), url('images/bg-logo.png');
background-repeat: repeat, repeat;

/* ▼ ここが重要！「幅400px 高さ250px」の枠を強制的に作ります */
/* ※ロゴが伸び縮みして見える場合は、ここの「250px」を変えて調整します */
background-size: 400px 250px, 400px 250px;

opacity: 0.15;
transform: rotate(-15deg);
animation: flow-perfect-brick 20s linear infinite;
}

@keyframes flow-perfect-brick {
/* ▼ 変更点：0%と100%の数値を入れ替えました ▼ */
0% {
/* 元の100%の数値をここに持ってきます（スタート地点をマイナス側にする） */
background-position: -400px 0px, -200px 125px;
}
100% {
/* 元の0%の数値をここに持ってきます（ゴール地点をゼロにする） */
background-position: 0px 0px, 200px 125px;
}
}

/* ======== 2. スマホ画面の「枠」 ======== */

.game-wrapper {
aspect-ratio: 390 / 656;
width: min(100vw, 100dvh * (390 / 656));
height: min(100dvh, 100vw * (656 / 390));
/* ▼ 追加：これを入れることで、bodyの中央に確実に鎮座します */
flex-shrink: 0;
margin: auto; /*念のため*/
position: relative;
background-color: #000;
/* トップページなどはスクロールしたいので y は auto */
overflow-y: auto;
overflow-x: hidden;
}

.game-wrapper.no-scroll {
overflow: hidden !important;
}

/* ======== 3. (旧)トップページ用設定 ======== */

#top-page {
width: 100%; height: 100%;
background-image: url('images/top-bg.png');
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
background-attachment: local;
overflow-y: auto; overflow-x: hidden;
-webkit-overflow-scrolling: touch;
display: flex; flex-direction: column;
justify-content: flex-start; align-items: center;
padding: 60px 20px 40px 20px; box-sizing: border-box;
}

#top-page::after { content: ""; display: block; width: 100%; padding-top: 550%; flex-shrink: 0; }

#top-page h1 {
font-size: 28px; margin-bottom: 20px;
text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
}

#top-page select {
width: 90%; padding: 12px; font-size: 16px; margin: 20px auto;
border-radius: 8px; border: 2px solid #ccc;
background-color: rgba(255, 255, 255, 0.9);
}

#top-page button {
width: 90%; padding: 15px; font-size: 18px; font-weight: bold;
color: white; background-color: #007bff; border: none;
border-radius: 8px; cursor: pointer; margin: 20px auto;
transition: background-color 0.2s;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

#top-page button:hover { background-color: #0056b3; }

/* ======== 4. 漫才ページ用 (`manzai.html`) ======== */

#manzai-page {
width: 100%; height: 100%;
background-image: url('images/manzai-bg.jpg');
background-size: 100% 100%; background-position: center 90%;
transition: filter 0.3s ease-out;
display: flex; flex-direction: column; justify-content: flex-end;
}

/* キャラクターの入れ物（サイズ・位置を％指定に変更） */
.character-container {
position: absolute;
/* 下からどれくらいの位置か（90px → 12% に変更） */
bottom: 5px;
/* 幅と高さも画面に対する％に変更 */
width: 41%; /* 元の約160px相当 */
aspect-ratio: 160 / 550; /* 元の画像比率を維持して、高さは自動計算させる */
/*height: auto; */ /* 元の約550px相当 */
opacity: 0;
transform: scale(0.8);
transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

#player-container {
left: 3%; /* 端からの距離も％に */
}

#yamagata-container {
right: 2%; /* 端からの距離も％に */
}

/* 体の画像 */
.char-body {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
height: 100%; /* 親要素(character-container)いっぱいに広げる */
width: auto; /* 幅はなりゆき */
max-width: 100%; /* はみ出し防止 */
object-fit: contain;
}

/* 頭の画像 */
.char-head {
position: absolute;
left: 50%;
transform: translateX(-50%);
transform-origin: center bottom;
/* 頭の位置とサイズも％で指定し直す */
top: -7%; /* 親(container)の幅に対してこれくらい上に飛び出す、という指定 */
width: 118%; /* 親(container)の幅に対する頭の大きさ */
height: auto; /* 高さは自動（潰れないように） */
object-fit: contain;
}

/* 沖縄の個別設定（!importantをtransformから外す） --- */

.char-head[src*="okinawa"] {
top: -6% !important; /* topからの位置で固定 */
width: 107% !important; /* 横幅基準 */
height: auto !important;
transform: translateX(-22%);
}

/* 沖縄専用の揺れ */
@keyframes okinawaHeadShake {
0%, 100% { transform: translateX(-22%) rotate(0deg) scale(1); }
25% { transform: translateX(-22%) rotate(4deg) scale(1); }
75% { transform: translateX(-22%) rotate(-3deg) scale(1); }
}

/* 沖縄がしゃべる時だけ、標準を上書きして専用アニメを流す */
#player-head[src*="okinawa"].speaking {
animation: okinawaHeadShake 0.15s linear infinite alternate !important;
}

/* 兵庫の個別設定 --- */

.char-head[src*="hyogo"] {
top: -0.5% !important; /* topからの位置で固定 */
width: 107% !important; /* 横幅基準 */
height: auto !important;
transform: translateX(-50%);
}

/* 兵庫専用の揺れ */
@keyframes hyogoHeadShake {
0%, 100% { transform: translateX(-50%) rotate(0deg) scale(1); }
25% { transform: translateX(-50%) rotate(4deg) scale(1); }
75% { transform: translateX(-50%) rotate(-3deg) scale(1); }
}

/* 兵庫がしゃべる時だけ、標準を上書きして専用アニメを流す */
#player-head[src*="hyogo"].speaking {
animation: hyogoHeadShake 0.15s linear infinite alternate !important;
}

/* 1. 北海道専用の揺れを定義（位置を -38% で固定したまま揺らす） */
@keyframes hokkaidoHeadShake {
0%, 100% { transform: translateX(-38%) rotate(0deg) scale(1); }
25% { transform: translateX(-38%) rotate(4deg) scale(1); }
75% { transform: translateX(-38%) rotate(-3deg) scale(1); }
}

/* 北海道：頭の位置とサイズ */
.char-head[src*="hokkaido"] {
top: -5% !important; /* topからの位置で固定 */
width: 130% !important; /* 横幅基準 */
height: auto !important;
transform: translateX(-38%);
}

/* 北海道がしゃべる時（アニメーション時）の設定 */
#player-head[src*="hokkaido"].speaking {
/* 標準の niigataHeadShake ではなく、上で作った専用の hokkaidoHeadShake を使う */
animation: hokkaidoHeadShake 0.15s linear infinite alternate !important;
}

/* 三重の個別設定 --- */

.char-head[src*="mie"] {
top: -2.3% !important; /* topからの位置で固定 */
width: 120% !important; /* 横幅基準 */
height: auto !important;
transform: translateX(-50%);
}

@keyframes mieHeadShake {
0%, 100% { transform: translateX(-50%) rotate(0deg) scale(1); }
25% { transform: translateX(-50%) rotate(4deg) scale(1); }
75% { transform: translateX(-50%) rotate(-3deg) scale(1); }
}

#player-head[src*="mie"].speaking {
animation: mieHeadShake 0.15s linear infinite alternate !important;
}

/* 鹿児島の個別設定 --- */
.char-head[src*="kagoshima"] {
top: 3.3% !important; /* topからの位置で固定 */
width: 130% !important; /* 横幅基準 */
height: auto !important;
transform: translateX(-55%);
}

@keyframes kagoshimaHeadShake {
0%, 100% { transform: translateX(-55%) rotate(0deg) scale(1); }
25% { transform: translateX(-55%) rotate(4deg) scale(1); }
75% { transform: translateX(-55%) rotate(-3deg) scale(1); }
}

#player-head[src*="kagoshima"].speaking {
animation: kagoshimaHeadShake 0.15s linear infinite alternate !important;
}

/* 高知の個別設定 --- */
.char-head[src*="kochi"] {
top: -5% !important; /* topからの位置で固定 */
left:70%;
width: 103% !important; /* 横幅基準 */
height: auto !important;
transform: translateX(-55%);
}

@keyframes kochiHeadShake {
0%, 100% { transform: translateX(-55%) rotate(0deg) scale(1); }
25% { transform: translateX(-55%) rotate(4deg) scale(1); }
75% { transform: translateX(-55%) rotate(-3deg) scale(1); }
}

#player-head[src*="kochi"].speaking {
animation: kochiHeadShake 0.15s linear infinite alternate !important;
}

/*山形*/
#yamagata-head {
transform: translateX(-50%) scale(0.9); transform-origin: center bottom;
}

@keyframes headShake { /* 山形専用 */
0%, 100% { transform: translateX(-50%) rotate(0deg) scale(0.9); }
25% { transform: translateX(-50%) rotate(4deg) scale(0.9); }
75% { transform: translateX(-50%) rotate(-3deg) scale(0.9); }
}

#yamagata-head.speaking { animation: headShake 0.15s linear infinite alternate; }

@keyframes niigataHeadShake { /* 標準（新潟など） */
0%, 100% { transform: translateX(-50%) rotate(0deg) scale(1); }
25% { transform: translateX(-50%) rotate(4deg) scale(1); }
75% { transform: translateX(-50%) rotate(-3deg) scale(1); }
}

#player-head.speaking { animation: niigataHeadShake 0.15s linear infinite alternate; }

#manzai-ui {
display: none; width: 100%; z-index: 10;
transition: opacity 0.3s ease-out;
}

#serifu-box {
    width: 95%;
    /* 高さを固定して、2行目が出ても枠が伸びないようにする */
    height: 150px; 
    margin: 0 auto 40px auto;
    background-image: url('images/fukidashi_default.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
    /* 重要：上からの位置を固定（padding-topで調整） */
    /* 10.5vw（約40px〜）に設定。これで1行目がここから動きません */
    padding: 55px 30px 15px 28px; 
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    
    /* 中央寄せ（flex）を絶対に使わない */
    display: block; 
}

#serifu-box.yamagata { background-image: url('images/fukidashi_yamagata.png'); }

#serifu-box.both {
    background-image: url('images/fukidashi_both.png');
    height: 140px;
    padding-top: 35px; /* 両者吹き出しは名前がない分、少し上げる */
}

#speaker-name {
    /* 絶対配置にして吹き出しの左上にピン留め */
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 5;

    display: inline-block;
    font-size: 16px; /* px固定 */
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-family: "Zen Maru Gothic", sans-serif;
    color: white;
}

#serifu-box.both #speaker-name { display: none; }

#speaker-name.niigata-name-bg { background-color: #FF3F3F; }

#speaker-name.yamagata-name-bg { background-color: #80D34A; }

#serifu-text {
    /* 全画面でも小さすぎないサイズ（px固定） */
    font-size: 14.5px; 
    margin: 0;
    /* 行間を固定。2行目はこの高さ分だけ下に正確に出る */
    line-height: 1.6; 
    font-weight: 700;
    font-family: "Zen Maru Gothic", sans-serif;
    color: #333;
    
    /* 常に左上基準。1行目が動くのを防ぐ */
    text-align: left;
    display: block;
}

#serifu-box.both #serifu-text { color: #171717; }

#serifu-text.niigata-text { color: #461212; }

#serifu-text.yamagata-text { color: #20410A; }

#tap-icon {
position: absolute; bottom: 10px; right: 15px;
font-size: 20px; color: #333; animation: pulse 1.5s infinite;
}

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

#serifu-box.both #tap-icon {
display: none !important;
}


/* =========================================
   ポーズボタン & メニュー画面（修正版）
   ========================================= */

/* 右上のポーズボタン */
#pause-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 9999;

    width: 44px;
    height: 44px;
    border-radius: 10px; /* 角丸 */

    /* ★ここがポイント：背景を透明（少しだけ暗くして白を目立たせる） */
    background-color: rgba(0, 0, 0, 0.2); 
    
    /* ★白の枠線 */
    border: 2px solid #ffffff; 

    /* ★影をつけて浮き上がらせる */
    /* 0 4px 8px は「下に4px、ぼかし8px」の影 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);

    cursor: pointer;

    /* 中の「||」を中央揃え */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;

    /* 押した時のアニメーション用 */
    transition: all 0.1s ease-out;
}

/* 押した時に少し凹んで影が小さくなる演出 */
#pause-btn:active {
    transform: scale(0.95); /* 少し縮む */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 影も小さく */
    background-color: rgba(0, 0, 0, 0.4); /* 背景を少し濃くして「押した感」を出す */
}

/* ▼ 2本の線を「疑似要素」で作る設定 ▼ */
#pause-btn::before,
#pause-btn::after {
    content: "";
    display: block;
    width: 6px;
    height: 18px;
    
    /* 棒の色は白 */
    background-color: #ffffff;
    
    border-radius: 2px;
}

/* メニュー画面背景 */
#pause-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

/* メニューの中身 */
.pause-content {
    width: 85%;
    max-width: 320px;
    
    /* クリーム色×赤枠 */
    background-color: #FFE5B9; 
    border: 3px solid #FF3F3F; 
    border-radius: 12px;
    
    /* タイトルを消したので上側の余白を少し調整 */
    padding: 25px 15px 20px 15px;
    
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    font-family: "Zen Maru Gothic", sans-serif;
}

/* h2の設定は削除しました（HTMLからも消すため） */

/* 会話ログエリア */
#log-container {
    height: 220px; /* タイトルがなくなった分、少し広くしました */
    
    background: #ffffff; 
    border: 2px solid #FF3F3F; 
    border-radius: 8px;
    
    overflow-y: auto;
    text-align: left;
    padding: 15px;
    margin-bottom: 20px;
}

#log-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 1つの発言ごとの設定 */
#log-list li {
    margin-bottom: 15px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
    
    color: #333; 
    font-size: 14px; /* 文字サイズを少しアップ */
    
    /* ▼▼▼ 太さをセリフと統一 ▼▼▼ */
    font-weight: 700; /* 太文字にする */
    
    line-height: 1.6;
}

/* 名前アイコンの設定 */
.log-name {
    display: table;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 11px;
    color: #ffffff !important;
    margin-bottom: 6px;
}

/* アイコンの色 */
.log-name.yamagata { background-color: #80D34A; } 
.log-name.player { background-color: #FF3F3F; }

/* ▼ ボタンエリア ▼ */
.pause-buttons {
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center;    /* 中央揃え */
    gap: 15px;              /* ボタン同士の隙間 */
    margin-top: 10px;
}

.p-btn {
    width: 90%;             /* 横幅広め */
    padding: 12px 0;
    border-radius: 30px;
    border: none;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    font-family: "Zen Maru Gothic", sans-serif;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 再開ボタン：緑背景に白文字 */
#resume-btn {
    background: #00b300; /* 白文字が読みやすい、濃いめの鮮やかな緑 */
    color: #fff;
}

/* 漫才をやめるボタン：赤背景に白文字 */
#quit-btn {
    background: #FF3F3F; /* テーマカラーの赤 */
    border: none;        /* 前回の枠線を消して塗りつぶしに */
    color: #fff;
}
/* ======== 4.5 漫才演出用（ツッコミ選択画面）======== */

#tsukkome-cutin {
position: absolute; top: 50%; left: 50%;
transform: translate(-150%, -40%); z-index: 100; opacity: 0; display: none;
}

#tsukkome-cutin img { width: 400px; }

@keyframes slideInFromLeft { 0% { transform: translate(-150%, -40%); opacity: 0; } 100% { transform: translate(-50%, -50%); opacity: 1; } }

@keyframes shake { 0% { transform: translate(-50%, -50%) rotate(0deg); } 25% { transform: translate(-52%, -48%) rotate(1deg); } 50% { transform: translate(-48%, -52%) rotate(-1deg); } 75% { transform: translate(-52%, -48%) rotate(1deg); } 100% { transform: translate(-50%, -50%) rotate(0deg); } }

#tsukkome-cutin.show { display: block; animation: slideInFromLeft 0.1s ease-out forwards, shake 0.1s linear 0.1s 10 alternate; }

#tsukkomi-options {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.7); z-index: 20; padding: 20px 0;
box-sizing: border-box; display: none; transition: opacity 0.3s ease-out;
flex-direction: column; justify-content: center; align-items: center;
}

.speaker-icon {
margin-top: 10px; width: 90px; height: 90px;
background-color: transparent; border-radius: 0; box-shadow: none;
display: none; justify-content: center; align-items: center;
position: relative; z-index: 1;
}

.speaker-icon img { width: 100%; height: 100%; object-fit: contain; filter: none; }

.tsukkome-logo {
display: block; margin: 0 auto; width: 95%;
position: relative; z-index: 2; margin-bottom: 0;
}

.prompt-serifu-box {
width: 90%; background-image: url('images/prompt_fukidashi.png');
background-size: 100% 100%; background-repeat: no-repeat;
border-radius: 0; margin: 15px auto 20px auto;
padding: 40px 30px 20px 30px; box-sizing: border-box; text-align: center;
min-height: 120px; display: flex; justify-content: center; align-items: center;
}

#prompt-serifu-text {
font-size: 15px; color: #20410A; margin: 0; line-height: 1.5;
font-family: "Zen Maru Gothic", sans-serif; font-weight: 700;
}

.prompt-buttons { width: 100%; display: flex; flex-direction: column; align-items: center; }

.tsukkomi-btn {
display: flex; 
justify-content: center; 
align-items: center;
width: 86.5%; height: 74px; margin: 5px auto; padding: 0 15px;
box-sizing: border-box; 
font-size: 20px; 
line-height: 1.3;
text-align: center; 
letter-spacing: -0.02em;
font-family: "Zen Kaku Gothic New", sans-serif; 
font-weight: 900;
background-color: transparent; 
border: none; 
border-radius: 0;
background-size: 100% 100%; 
background-repeat: no-repeat;
cursor: pointer; 
color: #000000; 
animation: pulse-button 1.5s infinite ease-in-out;
}

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

.tsukkomi-btn:nth-child(1) { 
    background-image: url('images/tsukkomi_btn_pink.png');
    color: #5F0F10
}

.tsukkomi-btn:nth-child(2) { 
    background-image: url('images/tsukkomi_btn_blue.png');
    color: #100C59;
 }

.tsukkomi-btn:nth-child(3) { 
    background-image: url('images/tsukkomi_btn_yellow.png'); 
    color: #512700;
}

/* ======== 5. 結果ページ用 (`result.html`) ======== */

#result-page {
width: 100%; height: 100%; background-color: black;
display: block; position: relative; overflow-y: auto; overflow-x: hidden;
/* ▼▼▼ 追加：ページ全体をふわっと表示するアニメーション ▼▼▼ */
animation: fadeInPage 1.5s ease-out forwards;
}

/* フェードインの動き */

@keyframes fadeInPage {
0% { opacity: 0; }
100% { opacity: 1; }
}

#result-image-container {
width: 100%; height: auto; position: relative; display: block;
}

#result-background-image {
width: 100%; height: auto; object-fit: contain; display: block;
}

/* 頭・標準の位置（ここを基準に微調整） */

#selected-pref-head {
position: absolute;
left: -6%;
bottom: 73%;
width: 57%;
height: auto;
z-index: 10;
}

/* 沖縄の場合：結果画面 */
#selected-pref-head[src*="okinawa"] {
width: 47% !important; /* 少し小さくする場合 */
bottom: 75.5% !important; /* 少し下げる場合 */
left: 13% !important; /* 少し右に寄せる場合 */
}

/* 北海道の場合：結果画面（★新規追加） */
#selected-pref-head[src*="hokkaido"] {
width: 65% !important; /* 少し大きくする場合 */
bottom: 69% !important; /* 位置の高さ調整 */
left: 3% !important; /* 左右位置の調整 */
}

/* 兵庫の場合：結果画面（★新規追加） */
#selected-pref-head[src*="hyogo"] {
bottom: 70.3% !important; /* 位置の高さ調整 */
}

/* 三重の場合：結果画面（★新規追加） */
#selected-pref-head[src*="mie"] {
bottom: 69.5% !important; /* 位置の高さ調整 */
}

/* 鹿児島の場合：結果画面（★新規追加） */
#selected-pref-head[src*="kagoshima"] {
width: 61% !important; 
bottom: 70% !important; /* 位置の高さ調整 */
left: -8% !important;
}

/* 高知の場合：結果画面（★新規追加） */
#selected-pref-head[src*="kochi"] {
width: 55% !important; 
bottom: 74% !important; /* 位置の高さ調整 */
left: 5% !important;
}

#result-button-container {
position: relative; z-index: 20; width: 80%; max-width: 250px;
margin: 20px auto;
/* 縦並びにする設定（既にありましたが念のため確認） */
display: flex; flex-direction: column; gap: 15px;
}

/* ▼ 変更点：aタグだけでなく buttonタグ にも同じ基本スタイルを適用 */

#result-button-container a,

#result-button-container button {
display: block; width: 100%; box-sizing: border-box; padding: 15px;
font-size: 18px; font-weight: bold; color: white; border-radius: 8px;
text-decoration: none; text-align: center;
transition: background-color 0.2s, transform 0.1s;
/* buttonタグ特有の初期値をリセット */
font-family: "Zen Maru Gothic", sans-serif;
border: none;
cursor: pointer;
line-height: 1.2;
}

/* クリック時のへこみ動作 */
#result-button-container a:active,

#result-button-container button:active {
transform: scale(0.98);
}

/* --- 各ボタンの色設定 --- */
/* 1. Xシェアボタン（既存のまま：黒） */
#share-button {
background-color: #000000; border: 2px solid #ffffff;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

#share-button:hover { background-color: #333333; }

/* 2. 【新規】画像保存ボタン */
#qr-button {
background-color: #04FF00 !important; /* 強制的にネオングリーン */
color: #000000 !important; /* 強制的に黒文字 */
border: 2px solid #04FF00 !important;
font-weight: 800; /* 極太文字 */
box-shadow: 0 0 15px rgba(4, 255, 0, 0.6);
/* 念のためポインターカーソルを表示 */
cursor: pointer;
}

#qr-button:hover {
background-color: #33ff33 !important;
box-shadow: 0 0 30px rgba(4, 255, 0, 0.9);
transform: scale(1.05);
}

/* 3. もう一度遊ぶボタン（既存のまま：赤・少し離す） */
#play-again-button {
background-color: #f44336; border: 2px solid #f44336;
margin-top: 10px; /* 少し隙間を調整 */
margin-bottom: 60px; /* 下の余白 */
}

#play-again-button:hover {
background-color: #ff5252; border-color: #ff5252;
box-shadow: 0 0 15px rgba(255, 82, 82, 0.8);
}

@keyframes pulse-button { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* 音声確認UI */
#audio-permission {
display: none; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); width: 80%; max-width: 300px;
background-color: #FFE5B9; color: #333; padding: 15px 30px;
border-radius: 10px; text-align: center; z-index: 200;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); font-family: "Zen Maru Gothic", sans-serif;
border: 3px solid #FF3F3F;
}

#audio-permission p { font-size: 18px; line-height: 1.6; margin-bottom: 25px; font-weight: bold; }

#audio-permission .audio-buttons { display: flex; justify-content: space-around; }

#audio-permission button {
padding: 12px 25px; font-size: 16px; font-weight: bold;
border: none; border-radius: 5px; cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
min-width: 80px; font-family: inherit;
}

#audio-permission button:active { transform: scale(0.95); }

#audio-permission #audio-yes { background-color: #f44336; color: white; }

#audio-permission #audio-no { background-color: #45a049; color: white; }

/* ======== Sランク演出 (完成版：黒→白→巨大化発光) ======== */
/* 1. 入れ物（背景担当） */

#s-rank-trophy-container {
position: absolute; /* これでスクロールしても画面から離れません */
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 9999;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
/* 初期状態：真っ黒 */
background-color: #000000;
/* ▼▼▼ 追加：透明度の変化をなめらかにする設定 ▼▼▼ */
transition: opacity 1.5s ease-out;
opacity: 1; /* 最初は不透明 */
}

#s-rank-trophy-container.fade-out {
opacity: 0;
}

/* ▼ 重要な追加点：第2段階に入ったら背景を「白」で固定する！ */
#s-rank-trophy-container.end-trophy-anim {
background-color: #ffffff !important;
}

/* 2. 背景が「黒 → 白」になるアニメーション（第1段階用） */

@keyframes black-to-white-bg {
0% { background-color: #000000; }
60% { background-color: #000000; } /* 溜め */
100% { background-color: #ffffff; }
}

#s-rank-trophy-container.start-trophy-anim {
animation: black-to-white-bg 3.0s ease-in-out forwards;
}

/* 3. トロフィー画像本体 */
#s-rank-trophy-container img {
width: 65%;
max-width: 280px;
height: auto;
transform: translateY(-80vh) scale(0.3);
opacity: 0;
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1.0));
}

/* 4. 第1段階：降臨アニメーション */

@keyframes trophy-god-descend {
0% { transform: translateY(-80vh) scale(0.3); opacity: 0; }
20% { opacity: 1; }
100% { transform: translateY(0) scale(1.0); opacity: 1; }
}

.start-trophy-anim img {
animation: trophy-god-descend 3.0s ease-out forwards;
}

/* 5. 第2段階：巨大化発光アニメーション（白飛びして消える） */

@keyframes trophy-huge-whiteout {
0% {
transform: scale(1.0);
opacity: 1;
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1.0)) brightness(1);
}
60% {
opacity: 1;
filter: drop-shadow(0 0 50px rgba(255, 255, 255, 1.0)) brightness(10);
}
100% {
transform: scale(20.0);
opacity: 0;
filter: brightness(20);
}
}

/* JavaScriptでこのクラスに切り替わると発動 */
.end-trophy-anim img {
animation: trophy-huge-whiteout 1.0s ease-in-out forwards;
animation-name: trophy-huge-whiteout !important;
animation-duration: 1.0s !important;
animation-timing-function: ease-in-out !important;
}

/* 結果画面の各パーツ（初期状態は透明にしておくためのクラス） */
.result-hidden {
opacity: 0;
transition: opacity 1.0s ease-in; /* 1秒かけてふわっと出る */
}

.result-visible {
opacity: 1;
}

/* ======== 6. 新・トップページ (index.html) 専用スタイル ======== */

.index-scroll-container {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
background-color: #000;
scroll-behavior: smooth;
}

/* ======== スクロールガイド（デザイン版） ======== */
/* 矢印の下に配置するぼんやりした光 */
.scroll-glow {
    position: absolute;
    top: 70px; /* 矢印より少し下に配置（位置は微調整してください） */
    width: 150px;
    height: 50px;
    background: radial-gradient(ellipse at center, rgba(4, 255, 0, 0.4) 0%, transparent 70%);
    filter: blur(10px);
    border-radius: 50%;
    z-index: -1; /* 文字や矢印の背面に配置 */
    /* 矢印の鼓動に合わせて光を明滅させる */
    animation: glow-pulse 2s infinite;
}

@keyframes glow-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.5); /* 矢印が下にくる時に光を広げる */
        opacity: 0.7;
    }
}

.scroll-guide {
    position: fixed;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    overflow: visible;
    transition: opacity 0.5s ease-out;
}

/* 文字部分 */
.scroll-text {
    color: #04FF00;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-shadow: 0 0 10px rgba(4, 255, 0, 0.8);
    margin-bottom: 13px;
}

/* 矢印の入れ物 */
.arrow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px; /* 矢印と矢印の間隔 */
}

/* V字のライン */
.arrow-v {
    width: 15px;
    height: 15px;
    border-right: 3px solid #04FF00;
    border-bottom: 3px solid #04FF00;
    transform: rotate(45deg); /* 傾けてV字にする */
    box-shadow: 2px 2px 10px rgba(4, 255, 0, 0.5);
    
    /* 下に流れるようなアニメーション */
    animation: scroll-arrow-move 2s infinite;
    opacity: 0;
}

/* 2つ目の矢印を少し遅らせる */
.arrow-v:nth-child(2) {
    animation-delay: 0.3s;
}

@keyframes scroll-arrow-move {
    0% {
        transform: rotate(45deg) translate(-5px, -5px);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotate(45deg) translate(5px, 5px);
        opacity: 0;
    }
}

/* スクロール時の非表示用 */
.scroll-guide.fade-out {
    opacity: 0;
}

/* ストーリーエリア全体 */
.story-area {
position: relative;
z-index: 10;
padding-top: 23dvh;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 50px;
text-align: center;
color: #ffffff;
font-family: "Yu Mincho", "YuMincho", serif;
text-shadow: 0 0 10px #04FF00, 0 0 20px rgba(4, 255, 0, 0.5);
}

/* 各文章のブロック */
.story-section {
margin-bottom: 15vh;
font-size: 1.2rem;
line-height: 2.8;
font-weight: 500;
/* ▼ 初期状態：透明にして少し下にずらす */
opacity: 0;
transform: translateY(40px);
/* 通常の文章は1.5秒かけて出る */
transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* ▼▼▼ 重要：ここがないと文字が出ません！ ▼▼▼ */
/* JSで .is-visible または .visible がついたら表示 */

.story-section.is-visible,

.story-section.visible {
opacity: 1;
transform: translateY(0);
}

/* ▼▼▼ 特別演出：山形県セクション ▼▼▼ */
#yamagata-section {
margin-top: 10vh;
margin-bottom: 10vh;
}

/* 山形県だけは、クラスがついた時に「ものすごくゆっくり」出す */
#yamagata-section.is-visible,

#yamagata-section.visible {
/* 3.5秒かけて、じわ〜〜っと出す */
transition: opacity 3.5s ease-out, transform 3.5s ease-out;
opacity: 1;
transform: translateY(0);
}

/* 「−山形県。」の文字デザイン */
.story-highlight {
font-size: 2.5rem;
font-weight: bold;
display: inline-block;
letter-spacing: 0.3em;
margin: 20px 0;
text-shadow: 0 0 15px #04FF00, 0 0 40px #04FF00;
}

/* 最後の「さあ、覚悟はいいか」 */
.story-climax {
font-size: 1.4rem;
font-weight: bold;
/* ロゴとの距離 */
margin-bottom: 10vh;
}

/* 以下、ステージエリア */
.stage-area {
margin-top: -50vh;
padding-top: 50vh;
position: relative; z-index: 1;
background-image:
linear-gradient(to bottom, #000000 0%, rgba(0,0,0,0) 70%),
url('images/top-bg.jpg');
background-size: cover; background-position: center bottom;
background-repeat: no-repeat;
width: 100%; min-height: 80vh;
padding-right: 20px; padding-bottom: 150px; padding-left: 20px;
box-sizing: border-box;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; color: #fff;
overflow: hidden;
}

/* index.html 専用のフォーム部品 */
.stage-area select {
padding: 12px; font-size: 16px; margin-bottom: 30px;
width: 82%; border-radius: 10px; border: 4px solid #eed200; color: #000000; filter: drop-shadow(0 0px 5px rgba(59, 22, 22, 0.5));
}

#start-button {
width: 70%; /* スマホで見やすい幅に */
max-width: 300px; /* PCで大きくなりすぎないように制限 */
height: auto; /* 高さは自動 */
cursor: pointer; /* カーソルを指の形に */
display: block; /* ブロック要素にして安定させる */
/* アニメーション用 */
transition: transform 0.1s;
/* 影をつけて浮いてる感を出す（お好みで削除OK） */
filter: drop-shadow(0 0px 8px rgba(59, 22, 22, 0.5));
}

/* ホバー時（マウスを乗せた時）に少し大きく */

#start-button:hover {
transform: scale(1.05);
}

/* クリックした瞬間に少し凹ませる（押した感） */
#start-button:active {
transform: scale(0.95);
}

/* 都道府県選択のラベルテキスト */
.select-label {
color: #ffffff;
font-size: 20px;
font-weight: bold;
margin-bottom: 15px; /* 下のボックスとの隙間 */
text-shadow: 0 0 8px rgba(0, 0, 0, 1.0); /* 背景と被っても読みやすく */
font-family: "Zen Maru Gothic", sans-serif;
}

/* ======== ロゴ画像とアニメーション設定 (整理版) ======== */

.stage-logo {
width: 110%; /* 90%から100%にして最大化 */
max-width: 450px; /* PCなどで大きくなりすぎないように制限しつつデカく */
height: auto;
margin-top: 50px;
margin-bottom: 50px; /* 下のメニューとの隙間も少し広げて存在感を出す */
margin-bottom: 120px;
/* --- 初期状態 --- */
opacity: 0;
transform: scale(3.0); /* 手前（巨大）に隠しておく */
will-change: opacity, transform;
}

/* --------------------------------------------------
アニメーション定義 (keyframes)
-------------------------------------------------- */
/* 1. バンッ！と叩きつける（直線的） */
@keyframes anime-stamp {
0% { opacity: 0; transform: scale(3.0); }
100% { opacity: 1; transform: scale(1.0); }
}

/* 2. 衝撃で震える (ガガガッ) */
@keyframes anime-impact-shake {
0% { transform: translate(0, 0) rotate(0deg); }
10%, 30%, 50%, 70%, 90% { transform: translate(-3px, -2px) rotate(-2deg); }
20%, 40%, 60%, 80% { transform: translate(3px, 2px) rotate(2deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}

/* 3. 鼓動 (ドクンドクン) 傾きプラスVer */
@keyframes anime-heartbeat {
0% {
transform: scale(1) rotate(0deg);
}

/* 1回目：小さく「ド」（右に2度傾く） */
5% {
transform: scale(1.04) rotate(-1deg);
}
10% {
transform: scale(1) rotate(0deg);
}

/* 2回目：大きく「クン！」（左に3度グイッと傾く） */
20% {
transform: scale(1.1) rotate(2deg);
}
35% {
transform: scale(1) rotate(0deg);
}

/* 溜めの時間（静止） */
100% {
transform: scale(1) rotate(0deg);
}
}

/* --------------------------------------------------
フェーズごとのクラス設定
-------------------------------------------------- */
/* ▼ Phase 1：バンッ！ (0.5秒) ▼ */
.stage-logo.show-phase1 {
opacity: 1;
animation: anime-stamp 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* ▼ Phase Shake：震え (0.5秒) ▼ */
.stage-logo.show-phase-shake {
opacity: 1;
transform: scale(1.0);
animation: anime-impact-shake 0.5s linear forwards;
}

/* ▼ Phase Static：静止 (1.0秒) ▼ */
.stage-logo.show-phase-static {
opacity: 1;
transform: scale(1.0);
animation: none; /* 何もしない（静止） */
}

/* ▼ Phase 2：鼓動 (無限) ▼ */
.stage-logo.show-phase2 {
opacity: 1;
transform: scale(1.0);
/* 数字を小さくするほど、心拍数が上がって速くなります */
animation: anime-heartbeat 2.0s ease-in-out infinite;
}

/* ========================================
7. 展示・キオスクモード専用設定 (仕上げ)
========================================= */

/* 右側のスクロールバーを完全に消す（Chrome/Safari/Edge用） */
::-webkit-scrollbar {
display: none;
}

/* 画面全体の調整 */
body {
/* スクロールバーのスペースを消す */
scrollbar-width: none; /* Firefox用 */
-ms-overflow-style: none; /* IE/Edge用 */
/* 文字や画像を長押ししても「青く選択」されないようにする */
user-select: none;
-webkit-user-select: none;
/* タッチした時の「ハイライト（グレーの枠）」を消す */
-webkit-tap-highlight-color: transparent;
/* タッチ操作の反応を良くする（ダブルタップ拡大の無効化） */
touch-action: manipulation;
/* マウスカーソルを消す（タッチ専用にするなら） */
/* ※設定作業中は不便になるので、本番直前に有効にするのがおすすめ */
/* cursor: none; */
}
/* リンクやボタンを押した時の枠線を消す */
button:focus, a:focus, select:focus {
outline: none;
}

/* ======== 結果ページ：診断・グラフエリア（サイズ固定版） ======== */

#analysis-container {
position: relative; z-index: 20;
width: 90%;
max-width: 500px; /* ← PCで横に伸びすぎないように制限を追加 */
margin: 50px auto;
/* 背景と枠線 */
background: linear-gradient(135deg, rgba(0, 30, 0, 0.9), rgba(0, 10, 0, 0.95));
border: 1px solid rgba(4, 255, 0, 0.5);
border-radius: 15px;
padding: 20px;
box-sizing: border-box;
/* 発光 */
box-shadow: 0 0 20px rgba(4, 255, 0, 0.4), inset 0 0 30px rgba(4, 255, 0, 0.2);
text-align: center;
backdrop-filter: blur(5px);
/* 最初から表示 */
opacity: 1;
transition: none;
}

/* ツッコミ分析（見出し） */
.diagnosis-title {
font-family: "Yu Mincho", "YuMincho", serif;
font-weight: bold; /* 太字に戻す */
font-size: 20px; /* 14pxだと小さすぎたので、20pxにアップ */
color: #04FF00; /* グレーをやめて、テーマカラーの緑に戻す */
margin: 0 auto 10px auto; /* 中央揃え */
display: inline-block; /* 文字の幅に合わせて下線を引く */
border-bottom: 2px solid rgba(4, 255, 0, 0.6); /* 下線を復活 */
padding-bottom: 3px;
/* ほんのり光らせる（下の結果よりは弱めに） */
text-shadow: 0 0 10px rgba(4, 255, 0, 0.4);
}

/* 診断結果（コンビ名） */
#diagnosis-text {
font-family: "Yu Mincho", "YuMincho", serif;
/* ▼▼▼ px指定でサイズを固定・大きく ▼▼▼ */
font-size: 28px;
font-weight: bold;
color: #ffffff;
/* 緑の光彩 */
text-shadow: 0 0 10px #04FF00, 0 0 20px rgba(4, 255, 0, 0.8);
margin: 0 0 15px 0;
line-height: 1.4;
}

/* グラフの入れ物 */
.chart-wrapper {
position: relative;
width: 100%;
aspect-ratio: 1 / 0.8; /* 横：縦 の比率で高さを決める */
height: auto;
display: flex;
justify-content: center;
align-items: center;
}

#myRadarChart {
filter: drop-shadow(0 0 10px rgba(4, 255, 0, 0.8));
}

/* ======== 結果ページ：評価コメントエリア（行間ゆったり版） ======== */

#result-comment {
font-family: "Yu Mincho", "YuMincho", serif;
color: #ffffff;
text-shadow: 0 0 10px #04FF00, 0 0 20px rgba(4, 255, 0, 0.6);
text-align: left;
width: 85%;
max-width: 600px;
margin: 10px auto 30px auto; /* 下のグラフとの距離も少し広げました */
}

/* ▼ 見出し（太く・大きく） */
.comment-head {
font-size: 22px;
font-weight: bold;
/* ▼▼▼ ここを変更：見出しと本文の間を広げる ▼▼▼ */
margin-bottom: 15px;
display: block;
text-shadow: 0 0 15px #04FF00;
}

/* ▼ 本文（細く・小さく・ゆったり） */
.comment-body {
font-size: 15px;
font-weight: normal;
/* ▼▼▼ ここを変更：行間をかなり広めに設定 (1.7 -> 2.2) ▼▼▼ */
line-height: 2.2;
opacity: 0.95;
}

/* スマホ用調整 */
@media (max-width: 400px) {
.comment-head { font-size: 18px; margin-bottom: 10px; }
.comment-body { font-size: 14px; line-height: 2.0; } /* スマホでも少し広めに */
}

/* ======== 8. QRコード表示モーダル用（新規追加） ======== */
/* JSで生成されるQRモーダルのデザイン */
#qr-modal {
/* フェードインアニメーション */
animation: fadeInModal 0.3s ease-out;
}
@keyframes fadeInModal {
from { opacity: 0; }
to { opacity: 1; }
}

/* QRコードが入る白い箱の微調整 */
#qrcode-display img {
display: block; /* 画像の下の隙間を消す */
margin: 0 auto;
}

/* 閉じるボタンのホバー効果 */
#close-qr {
background-color: #04FF00 !important;
color: #000000 !important; /* ここも文字は黒 */
font-weight: bold !important;
}

#close-qr:hover {
box-shadow: 0 0 15px #04FF00;
}

/* =========================================================
   9. 全画面・大型モニター対応パッチ（完成版）
   （画面の高さに合わせて、文字やボタンを自動で巨大化させる設定）
   ========================================================= */

@media screen and (min-height: 800px), screen and (min-width: 1000px) {
    
    /* --- 1. 漫才画面の巨大化 --- */

    /* 吹き出し全体を、画面の高さの20%にする */
    #serifu-box {
        height: 20vh !important; 
        /* 内部の余白も「高さ」に合わせて調整（テキスト位置ズレ防止） */
        padding-top: 7vh !important;  
        padding-bottom: 2vh !important;
        padding-left: 4vh !important;
        padding-right: 4vh !important;
    }
    
    /* 2人同時吹き出しの微調整 */
    #serifu-box.both {
        height: 18vh !important;
        padding-top: 5vh !important;
    }

    /* セリフの文字サイズを「画面高さの2.5%」にする */
    #serifu-text {
        font-size: 2.2vh !important;
        line-height: 1.5 !important;
    }

    /* 名前ラベルのサイズ調整 */
    #speaker-name {
        font-size: 2.2vh !important;
        top: 1.5vh !important;
        left: 3vh !important;
        padding: 0.8vh 2vh !important;
    }

    /* --- 2. ツッコミ選択肢の巨大化 --- */

    /* 選択肢ボタンの高さを画面高さの10%に */
    .tsukkomi-btn {
        height: 10vh !important;
        font-size: 3vh !important; /* 文字も巨大化 */
        width: 90% !important; /* 横幅も広げる */
        margin: 1vh auto !important;
    }

    /* お題の吹き出し */
    .prompt-serifu-box {
        min-height: 15vh !important;
        padding: 5vh 4vh 3vh 4vh !important;
    }
    #prompt-serifu-text {
        font-size: 2.2vh !important;
    }

    /* --- 3. 結果画面の巨大化 --- */

    /* 診断結果の文字（「破壊的コンビ」など） */
    #diagnosis-text {
        font-size: 4vh !important; /* かなり大きく */
        margin-bottom: 2vh !important;
    }
    
    /* 見出し（「ツッコミ分析」） */
    .diagnosis-title {
        font-size: 2.0vh !important;
    }

    /* コメント本文 */
    .comment-head {
        font-size: 3vh !important;
    }
    .comment-body {
        font-size: 2.2vh !important;
        line-height: 2.0 !important;
    }

    /* ボタンエリアの制限解除と巨大化 */
    #result-button-container {
        max-width: 40vh !important; /* px固定を解除して、高さ基準の幅に */
        width: 80% !important;
        gap: 2vh !important;
    }

    #result-button-container button,
    #result-button-container a {
        font-size: 2.5vh !important;
        padding: 2vh !important;
    }

    /* --- 4. トップページの巨大化 --- */

    /* タイトルロゴの制限解除 */
    .stage-logo {
        max-width: 60vh !important; /* 450px制限を解除 */
        margin-top: 5vh !important;
        margin-bottom: 15vh !important;
    }

    /* スタートボタン */
    #start-button {
        max-width: 34vh !important; /* 300px制限を解除 */
    }

    /* 都道府県選択のラベルテキスト */
    .select-label {
        /* 元 3vh → 2.2vh に縮小 */
        font-size: 2.2vh !important;
        margin-bottom: 1vh !important;
    }
    
    /* 都道府県プルダウン */
.stage-area select {
        /* 元 2.5vh → 1.8vh に縮小 */
        font-size: 2.0vh !important;
        
        /* 枠の内側の余白も少し減らす */
        padding: 1.0vh !important;
        
        /* 枠の太さも少し細く */
        border-width: 0.5vh !important;
        
        /* ▼ もし「横幅」も狭くしたい場合は、ここをいじってください */
        width: 70% !important; /* 元は82%くらい */
    }

    /* --- 5. (ここを追加！) スタート画面のストーリー（文字）の巨大化 --- */

    .story-section {
        /* 画面高さの5%：かなりデカいです */
        font-size: 2.5vh !important; 
        line-height: 3.5 !important;
        margin-bottom: 15vh !important; 
        font-weight: 900 !important; /* 太さもMAX */
    }

    /* 「ー山形県。」の強調文字 */
    .story-highlight {
        /* 画面高さの10%超え：超巨大 */
        font-size: 5vh !important;
        letter-spacing: 0.2em !important;
        margin: 3vh 0 !important;
        display: inline-block; 
    }

    /* 「さあ、覚悟はいいか」の文字 */
    .story-climax {
        font-size: 2.8vh !important;
        margin-bottom: 5vh !important;
    }
}

/* ==============================================
   ▼▼▼ ツッコめ！画像の強制巨大化パッチ（修正版） ▼▼▼
   ============================================== */

/* PCや横長画面（幅が768px以上）のときだけ発動 */
@media screen and (min-width: 768px) {
    
    #tsukkome-cutin img {
        /* ▼ 35vw に設定（デカすぎず、小さすぎない絶妙サイズ） */
        width: 35vw !important; 
        
        /* ▼ 念のため「どんなに画面が広くても800px以上にはしない」制限を追加 */
        max-width: 800px !important; 
        
        height: auto !important;
    }

    /* 画像が大きくなると中心がズレやすいので、位置を再補正 */
    #tsukkome-cutin {
        width: auto !important;
        /* アニメーション中の位置ズレを防ぐため、コンテナ自体のサイズ制限も解除 */
        max-width: none !important;
    }
}

/* ==============================================
   ▼▼▼ 10. 縦型モニター専用・ツッコめ巨大化パッチ ▼▼▼
   （15.6インチ縦置きなど、縦に長い画面用）
   ============================================== */

/* 画面が「縦長」かつ「高さが800px以上（大型）」の時だけ発動 */
@media screen and (orientation: portrait) and (min-height: 800px) {
    
    #tsukkome-cutin img {
        /* 元の400px固定を無視して、画面の横幅90%まで広げる */
        width: 101vw !important; 
        
        /* 制限を解除 */
        max-width: none !important; 
        height: auto !important;
    }
    
    /* 画像の位置ズレ補正 */
    #tsukkome-cutin {
        width: auto !important;
        max-width: none !important;
    }
}

/* ==============================================
   ▼▼▼ 11. 展示用モニター・全画面強制フィットパッチ ▼▼▼
   ============================================== */

/* 条件：
   1. 画面が縦向き (orientation: portrait)
   2. 横幅が 600px 以上 (min-width: 600px)
      → これにより、横幅の狭い「普通のスマホ」はこの設定を無視します。
      → 15.6インチモニターやタブレットだけが反応します。
*/
@media screen and (orientation: portrait) and (min-width: 600px) {
    
    .game-wrapper {
        /* スマホ比率の固定を解除 */
        aspect-ratio: auto !important;
        
        /* 強制的に画面いっぱいに広げる */
        width: 100vw !important;
        height: 100dvh !important;
        
        /* 制限を解除 */
        max-width: none !important;
        
        /* 中央寄せなどの余白を削除 */
        margin: 0 !important;
        
        /* 念のため角丸もなくす（モニターの角に合わせる） */
        border-radius: 0 !important;
    }
}

/* --- 6. ポーズ画面（メニュー）の巨大化 --- */
    
    /* メニューの白い箱自体の幅を広げる */
    .pause-content {
        max-width: 50vh !important; /* px制限を解除 */
        width: 90% !important;
        padding: 4vh 3vh !important;
    }

    /* 会話ログの文字を大きくする */
    #log-list li {
        font-size: 2vh !important;
        margin-bottom: 2vh !important;
        padding-bottom: 1.5vh !important;
    }

    /* 名前ラベル（山形/あなた）のサイズ */
    .log-name {
        font-size: 1.6vh !important;
        padding: 0.5vh 1.5vh !important;
        margin-bottom: 1vh !important;
    }

    /* ボタン（再開する/やめる）の巨大化 */
    .p-btn {
        font-size: 2.5vh !important; /* 15pxから大幅アップ */
        padding: 2vh 0 !important;   /* 上下の余白も画面比率に */
        border-radius: 5vh !important; /* 角丸も比率に合わせる */
    }

    .pause-buttons {
        gap: 3vh !important; /* ボタン同士の隙間を広げる */
        margin-top: 2vh !important;
    }