/* ゲージとテキストをまとめるコンテナ */
.timer-container {
    /* 親要素に対して絶対位置で配置する */
    position: absolute; 
    
    /* 右下からの位置を指定 */
    right: 10px;    /* 右端から10px離す (調整可能) */
    bottom: 10px;   /* 下端から10px離す (調整可能) */
    
    /* 他の要素の上に重ねて表示する */
    z-index: 1000;

display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center;     /* 縦方向の中央揃え */
}

/* SVGコンポーネント */
.pizza-gauge {
    width: 50%;
    height: 50%;
}

/* 秒数テキスト */
.time-text {
    /* コンテナに対して絶対位置で配置し、ゲージの上に重ねる */
    position: absolute;
    /* ゲージの円弧の内側中央に来るように位置を調整 */
    bottom: 0; /* 下端に寄せる */
   /* 縦方向の中央 */
    top: 50%;
    /* 横方向の中央 */
    left: 50%;
    
    /* 要素自身のサイズを考慮して完全に中央に揃える */
    transform: translate(-50%, -50%);
    
    color: #FFF; /* 白色 */
    font-size: 24px;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* 影をつけて見やすくする */
}

/* タイマーを非表示にするクラス */
.is-hidden {
    display: none; 
    /* または visibility: hidden; を使用する */
}

/* 赤い線に光沢と立体感を与える */
.gauge-arc {
    /* 線の端が丸いことを確認 */
        stroke-linecap: round; 
	stroke-width: 12px; 

    
    /* ★★★ 輝き（白いドロップシャドウ）を追加 ★★★ */
    /* 赤い線が明るく、ぷっくりと浮き上がって見えます */
filter: 
        /* 1. 外側に広がる明るい光 (黄色/オレンジの縁取り効果) */
        drop-shadow(0 0 12px rgba(255, 165, 0, 0.9)) /* 黄みがかった光を強く広げる */
        /* 2. 中心に強いハイライト (白) */
        drop-shadow(0 0 4px rgba(255, 255, 255, 1.0)) 
        !important;

stroke: #ff5722;
}

/* 土台の線（グレーの部分）に影を追加 */
.gauge-track {
    /* 赤い線に合わせて線幅を太くする */
    stroke-width: 12px; 
    
    /* 影の表現を調整 */
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
    
    /* 土台の色を濃く見せる */
    stroke: #333; 
}

#time-text {
    /* ★★★ 2. Flexboxで中央に来るように、絶対位置指定を削除 ★★★ */
    /* top, left, position, transform の設定はすべて削除してください */
    
    /* ★★★ 3. ゲージの上に確実に表示されるようにする ★★★ */
    z-index: 10000; 
    
    /* 見やすいデザインに調整 */
    color: white; 
    font-size: 24px; 
    font-weight: bold; /* 数字を太くすると見やすくなります */
    /* 必要であれば text-shadow: 1px 1px 2px #000; などで影を付けても良い */
text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.5), /* 強い影 */
        0 0 1px #fff;                 /* 白いハイライト */
}

@media (orientation: landscape) and (max-width: 1050px){
/* タイマーを非表示にするクラス */
.is-hidden {
    display: none !important; /* 他のdisplay設定を無視して非表示を強制 */
}

.timer-container {
    position: absolute;
    right: 10px;
    bottom: 15%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

}

@media (max-width: 430px) {
  /* lessonクラスのCSSを指定してください */

#time-text {
    z-index: 10000;
    color: white;
    font-size: 10px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), /* 強い影 */
        0 0 1px #fff;
}

}