html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'M PLUS 1p', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
align-items: flex-start;
}

/* 親要素: 全体を横並びに配置 */
.main-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    align-items: flex-start;
    width: 80vw;
    max-width:1200px;
margin: -20 0 0 45px; /* 上 0, 右 0, 下 0, 左 20px */
height:300px;
}

/* 中央のコンテンツ: アライグマの画像などを縦に並べる */
.center-content {
    width:50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position:relative;
}

#illust1{
width:110%;
height:20rem;


}

/* スコア表示の配置 (左上) へ修正 */
/* ------------------------------------ */
#score-display {
    /* ★★★ 必須: 親要素 (.center-content) を基準に重ねる ★★★ */
    position: absolute;
    
    top: 0px;      /* 上端からの距離は維持 */
    
    /* ★★★ ここを修正: 左端からの配置へ変更 ★★★ */
    left: -5px;     /* 左端からの距離 */
    /* right: 15px; */ /* 右端の指定は削除 */
    
    z-index: 50; 
    
    /* スタイル調整 (ネオン/光沢スタイルは維持) */
    color: #ffd700; 
    font-size: 1.5em; 
    font-weight: bold;
    text-shadow: 0 0 5px #ffcc00; 
    background-color: transparent;
}


#game-time-display {
    position: absolute;
    top: 0px;      /* 上端からの距離 */
    right:-5px;    /* ★★★ 右端からの距離 ★★★ */
    z-index: 50; 
    
    /* スタイル調整 (スコア表示と対になるように調整) */
    color: #ffd700; 
    font-size: 1.5em; 
    font-weight: bold;
    text-shadow: 0 0 5px #ffcc00; 
}

/* ------------------------------------ */
/* 1. ボタンコンテナの配置と横並び */
/* ------------------------------------ */
#speed-button-container {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: -40px;
    margin-left: 1vw;
    z-index: 1000;
}

/* ------------------------------------ */
/* 2. 画像ボタン共通のスタイル */
/* ------------------------------------ */
#speed-up-image-button,
#speed-down-image-button {
    /* ★★★ サイズを共通で調整 ★★★ */
    width: 40%;  /* 例: 適切なサイズに調整 */
    height: auto;
    
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}

/* ------------------------------------ */
/* 3. クリック・ホバー時の効果 */
/* ------------------------------------ */
#speed-up-image-button:hover,
#speed-down-image-button:hover {
    transform: scale(1.05); 
}

#speed-up-image-button:active,
#speed-down-image-button:active {
    transform: scale(0.98); 
}

#pizza {
    width: 100px;
    height: auto;
    position: absolute;
    top: 15.4rem;
    left: -2vw;
}

#nextpizza{
position:absolute;
width:20vw;
height:auto;
top:-18vw;
left:26vw;
z-Index:5;
}

/* A. デフォルトの状態 = 光っている状態 */
/* ---------------------------------------------------- */
#ShiningPizza1.selected,
#ShiningPizza2.selected,
#ShiningPizza3.selected {
    /* ピザの要素にIDで直接スタイルを適用し、光らせる */
filter: brightness(1.4) 
            drop-shadow(0 0 25px #FF4500) /* Orangered (より強く広がる炎) */
            drop-shadow(0 0 15px #FF8C00) /* Darkorange (中心の熱い部分) */
            drop-shadow(0 0 5px white);  /* 中心に白い光を少し残して熱さを強調 */
    
    cursor: pointer;
}

#ShiningPizza1.unselected,
#ShiningPizza2.unselected,
#ShiningPizza3.unselected {
    filter: brightness(1.0) drop-shadow(0 0 0 transparent);
}

/* ---------------------------------------------------- */
/* B. 選択された後の状態 = 光っていない状態 */
/* ---------------------------------------------------- */
.unselected {
    /* JSでクリック時に追加され、光を消して通常に戻す */
    filter: brightness(1.0) drop-shadow(0 0 0 transparent); 
}

#ShiningPizza2 {
    /* クリックイベントのブロックを避けるための基本設定 */
    position: relative;
    z-index: 100;
    
    /* ★最も重要: 疑似要素が枠からはみ出さないようにする★ */
    overflow: hidden; 
}

#ShiningPizza3 {
    /* クリックイベントのブロックを避けるための基本設定 */
    position: relative;
    z-index: 100;
    
    /* ★最も重要: 疑似要素が枠からはみ出さないようにする★ */
    overflow: hidden; 
}



.pizza-container {
    width:20%;
    display: flex;
    flex-direction: column;
    gap: 10px;
align-items: center;
}

.pizza-container img{
    width: 70%;
    height: auto;
    z-Index:5;
}


.pizza-rightcontainer {
    width:20%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
align-items: center;
}

.pizza-rightcontainer img{
    width: 100%;
    height: auto;
    z-Index:5;
}


#illust2 {
    position: relative; /* 子要素の絶対配置の基準点にする */
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    margin-top:-40px;
    width:51%;
 
}

.text-group {
    position: absolute; /* 同じ位置に重ねる */
    top: 42%; /* 垂直方向の中央に */
    left: 78%; /* 水平方向の中央に */
    transform: translate(-50%, -50%); /* 中央寄せの微調整 */
    z-index: 1; /* 重ね順の基本 */
    width:60%;
}

illust2 .question-text,
#illust2 .questtion1-1,
#illust2 .questtion1-2,
#illust2 .questtion1-3,{
    text-align: center; /* テキストを中央揃えにする */
    width: 100%;
}

#ep1 {
    position: absolute;
    margin-top: -5rem;
}

#illust2 #question1-4 {
    /* 必要に応じて幅や高さを調整 */
    width: 10%;
    height: auto;
}

#illust2 .question-text{
font-size:2.5vw;  
text-align:center;  
z-Index:3;
}

#illust2 .questtion1-1{
/* 最小 1.2rem、画面に合わせて変動、最大 3rem という設定 */
  font-size: clamp(1.2rem, 8vw, 3rem);
  
  /* 枠からはみ出さないように余白（パディング）を確保 */
  padding: 0 20px;
  box-sizing: border-box; /* パディングを枠の中に含める設定 */
display:flex;
margin-top:-20%;
text-align:center;  
z-Index:3;
justify-content: center;
white-space: nowrap; /* 勝手に改行させない */
}

#answer1{
position: absolute; /* 同じ位置に重ねる */
    top: 59%; /* 垂直方向の中央に */
    left: 75%; /* 水平方向の中央に */
    transform: translate(-50%, -50%); /* 中央寄せの微調整 */
width:10vw;
height:5vw;
font-size:4vw;
text-align:center;
}

#answer1-1{
position: absolute; /* 同じ位置に重ねる */
    top: 60%; /* 垂直方向の中央に */
    left: 56%; /* 水平方向の中央に */
    transform: translate(-50%, -50%); /* 中央寄せの微調整 */

font-size:4vw;
}

#illust2 .waku{
margin-top:0;
margin-left:28vw;
max-width:45vw;
}


#modal p.kekka0{
position: absolute;/*重ねたい子要素にabsolute*/
top:10%;
left: 5%;
right:5%;
font-size:200%;
text-align:center;
font-family: "Nikukyu";
color:black;
font-weight: bold;

}

#modal p.kekka1{
position: absolute;/*重ねたい子要素にabsolute*/
top:25%;
left: 5%;
right:5%;
font-size:250%;
text-align:center;
font-family: "Nikukyu";
color:black;
font-weight: bold;

}
#modal p.reload1{
position: absolute;/*重ねたい子要素にabsolute*/
top:53%;
left: 15.5%;
right: 60.5%;
font-size:140%;
text-align:center;
font-family: "Nikukyu";
color:#ff4500;
font-weight: bold;

}

.detailed-stats {
    display: flex;            /* 横並びにする魔法の言葉 */
    justify-content: center;  /* 中央に寄せる（左右均等なら space-around） */
    gap: 20px;                /* 各項目の間のスキマ */
    color: white;             /* 文字色 */
    font-size: 14px;          /* 少し小さめにすると1行に収まりやすい */
    margin: 10px 0;           /* 上下の余白 */
}

.detailed-stats p {
    margin: 0;                /* 余計な上下の隙間を消す */
    white-space: nowrap;      /* 画面が狭くても勝手に改行させない */
}

.detailed-stats span {
    color: #ffcc00;           /* 数字だけ黄色にする */
    font-weight: bold;
    margin-left: 5px;
}

/* 画面全体を覆う背景 */
#result-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* 濃い半透明の背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* モーダルの中身を囲むボックス */
.modal-content {
    text-align: center;
    padding: 30px;
    
    /* 背景色を透明にして、ネオンの枠線だけが目立つようにする */
    background-color: transparent;
}

/* 外側のネオンリング（マゼンタ系の光） */
.neon-frame-outer {
    position: relative;
    width: 460px; /* サイズ調整 */
    height: 460px; /* サイズ調整 */
    border-radius: 50%; /* 円形 */
    padding: 20px;
    
    /* マゼンタの光 */
    box-shadow: 
        0 0 20px #ff00ff, 
        0 0 40px #ff00ff;
    border: 3px solid #ff00ff;
}

/* 内側のネオンリング（サイバーブルー系の光） */
.neon-frame-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 410px; /* 外側より小さく */
    height: 410px;
    border-radius: 50%;
    padding: 20px;
    
    /* 青の光 */
    box-shadow: 
        0 0 15px #00ffff, 
        0 0 30px #00ffff;
    border: 3px solid #00ffff;
    
    /* テキストを内側に配置するための設定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 達成メッセージ */
.result-message, .result-message-sub {
    color: #ffffff;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 0 0 5px #ffffff;
    margin: 5px 0;
    z-index: 10;
}

/* 最終スコアの値 */
.final-score-value {
    color: #ffd700; /* ゴールド */
    font-size: 6em; /* 非常に大きく */
    font-weight: 900;
    margin: 10px 0 25px 0;
    
    /* 強力なネオン効果 (ゴールド) */
    margin-top: -5%;
    text-shadow: 
        0 0 10px #ffcc00, 
        0 0 20px #ffcc00,
        0 0 40px rgba(255, 165, 0, 0.8);
}

/* 次のステージへボタン */
.modal-content button {
    /* 以前提案したブーストカラーのスタイルを適用 */
    background: #ff6600;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 25px;
    font-size: 1.1em;
    cursor: pointer;
    box-shadow: 
        0 0 15px rgba(255, 102, 0, 1.0),
        0 0 30px rgba(255, 165, 0, 0.6);
    transition: all 0.2s;
    margin-top: -5%;
}




/* MathJaxのHTML出力全体を対象とするセレクタ */

/* 1. すべての数式要素のフォントスタイルを「標準」に設定 */
.mjx-chtml span, 
.mjx-chtml i, 
.mjx-chtml em {
    font-style: normal !important; 
}

/* 2. 変数（b, yなど）は、数学的慣習に従って斜体に戻す */
.mjx-chtml .mi {
    font-style: italic !important; 
}