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; 
}

#numkey{
margin-left:-5vw;
}


/* ------------------------------------ */
/* 1. ボタンコンテナの配置と横並び */
/* ------------------------------------ */
#speed-button-container {
    display: flex;
    gap: 6px;
    margin-top: -40px;
    margin-left: 0vw;
    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;
}

#tutorial1 {
    position: absolute;
    width: 20vw;
    height: auto;
    top: 2.5em;
    left: -12.5vw;
    z-index: 1;

/* アニメーション設定：1.5秒で1ループ、滑らかに無限に繰り返す */
  animation: slideToPizza 1.5s ease-in-out infinite;

}

@keyframes slideToPizza {
  0% {
    /* スタート：元の位置（真ん中） */
    transform: translateX(0);
    opacity: 0; /* 最初はふわっと出す */
  }
  20% {
    opacity: 1; /* すぐにハッキリ見えるようにする */
  }
  80% {
    /* 終盤：左（ピザ側）へ40px移動 */
    transform: translateX(-40px);
    opacity: 1;
  }
  100% {
    /* 最後：さらに少し動いて消える */
    transform: translateX(-60px);
    opacity: 0;
  }
}

#tutorial2 {
    position: absolute;
    width: 25vw;
    height: auto;
    top:10em;
    left: 5vw;
    z-index: 1;
}

#tutorial3 {
    position: absolute;
    width: 20vw;
    height: auto;
    top: 15em;
    left: 30vw;
    z-index: 1;
}

#tutorial4 {
    position: absolute;
    width: 15vw;
    height: auto;
    top: 2em;
    left: 27.5vw;
    z-index: 1;
}

#tutorial5 {
    position: absolute;
    width: 15vw;
    height: auto;
    top: 19em;
    left: -15vw;
    z-index: 1;
}

#nextpizza{
position:absolute;
width:20vw;
height:auto;
top:3em;
left:7vw;
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;
margin-top: -2em;
}

.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 .questtion1-1,
#illust2 .question-text{
font-size:2.5vw;  
text-align:center;  
z-Index:3;
}

#illust2 .questtion1-1{
margin-top:-20%;
font-size:4vw;  
text-align:center;  
z-Index:3;
}

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

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

#answer1_3 {
    position: absolute;
    top: 55%;
    left: 80%;
    transform: translate(-50%, -50%);
    width: 7vw;
    height: 0.3vw;
    font-size: 4vw;
    text-align: center;
}

#answer1_4 {
    position: absolute;
    top: 85%;
    left: 93%;
    transform: translate(-50%, -50%);
    width: 6vw;
    height: 6vw;
    font-size: 4vw;
    text-align: center;
}

#answer1_5 {
    position: absolute;
    top: 55%;
    left: 72%;
    transform: translate(-50%, -50%);
    width: 4vw;
    height: 0.5vw;
    font-size: 4vw;
    text-align: center;
}

#answer1_6 {
    position: absolute;
    top: 40%;
    left: 93%;
    transform: translate(-50%, -50%);
    width: 6vw;
    height: 6vw;
    font-size: 4vw;
    text-align: center;
}


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

font-size:4vw;
}

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

.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: 8%;
}




/* 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; 
}

/* 1. 画面全体の暗い背景 */
.modal-bg {
  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;
}

/* 2. モーダルの白い箱（ベース：最初は小さい） */
.modal-first-content {
  background: white;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  
  /* 初期サイズ */
  width: 450px;
  min-height: 300px;
  
  /* ★サイズ変更をふわっとさせる魔法の一行 */
  transition: all 0.4s ease-in-out;
  
  /* 中身を中央に寄せるための設定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 3. ★練習モードの時に追加する特大サイズクラス */
.modal-large {
  width: 95% !important;   /* 横幅いっぱい */
  height: 90% !important;  /* 高さもしっかり */
  max-width: 1100px;       /* 横に広がりすぎを防止 */
}

/* 4. モーダル内の各画面の共通設定 */
#view-start, #view-tutorial, #view-levels {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* 20pxから12pxに減らして、要素同士を近づける */
}
/* 5. ボタンの見た目（お好みで調整してください） */
.modal-first-content button {
  /* 追加・修正 */
  width: fit-content;        /* 文字の長さに幅を合わせる */
  min-width: 200px;          /* 短すぎると不格好なので最低幅を決める */
  max-width: 280px;          /* 3枚目画像のように広がりすぎるのを防ぐ */
  margin: 10px auto;            /* 念のため中央寄せを確定させる */
  
  /* 既存のスタイル */
  padding: 12px 24px;
  font-size: 1.1rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;

/* 以前提案したブーストカラーのスタイルを適用 */
    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: 8%;

}

.modal-first-content button :active {
  transform: scale(0.95);
}

.btn-guide {
  background-color: #ff6600; /* より鮮やかなオレンジへ */
  color: white;
  font-weight: bold;
  /* 画像のような光るエフェクトを追加 */
  box-shadow: 0 0 15px rgba(255, 102, 0, 0.7); 
}

.btn-level { background-color: #e0e0e0; }