/* --- START OF FILE quiz.css --- */
/* css/quiz.css */
/* 暗記カードページ用のスタイル */


/* --- 暗記カードページ用にヒーローセクションの配色などを変更 --- */
html,
body {
    background-image: linear-gradient(to bottom, #fff 15.7%, #db2525 15.7%, #db2525 70%, #111 100%);
    background-color: #111; /* グラデーションより下の背景色 */
}
.hero-section {
    background-color: #330505;/* カード全体の背景色 */
	background-image: linear-gradient(to bottom, rgba(28, 2, 2, 0.5) 0%, #330505 12%);
}

.hero-section::before {
    background-image: 
        url(../images/swipeIcon_Left.svg),
        linear-gradient(to right, rgba(28, 2, 2, 0.5), transparent);
}

.hero-section::after {
    right: 0;
    background-image: 
        url(../images/swipeIcon_Right.svg),
        linear-gradient(to left, rgba(28, 2, 2, 0.5), transparent);
}

.hero-character {
    background: url(../images/hero-sectionVispo_quizPage.svg) no-repeat bottom;
	background-size: contain;
}

.btn-nav.prev {
	background-image: url(../images/btn_arrowL.svg), linear-gradient(to bottom, #db2525, #db2525);
}

.btn-nav.next {
	background-image: url(../images/btn_arrowR.svg), linear-gradient(to bottom, #db2525, #db2525);
}

.hero-title-logo {
    background-image: url(../images/hero-sectionTitleLogo_quizPage.svg);
}
.hero-phrase-container::before {
    background: url(../images/hero-section_phrase_quizPage.svg) no-repeat center;
}
/* --- ヒーローセクション 円グラフのグラデーション色定義 --- */
.list-progress-chart-container .grad-start {
    stop-color: #e33636; /* グラデーションの開始色 */
}
.list-progress-chart-container .grad-end {
    stop-color: #b81212; /* グラデーションの終了色 */
}


/* ===============================================
 * ▼▼▼ ヒーローセクション円グラフのスタイル追加 ▼▼▼
 * ===============================================
 */

/* テキストを円グラフより手前に表示する */
.list-progress-chart-container #circle-progress-text {
    z-index: 10;
}

/* クイズの最高記録だけをヒーロー内に表示する。共通ヒーローの配置はそのまま使う。 */
.list-progress-chart-container.quiz-hero-result {
    background: #080808;
    cursor: default;
}

.quiz-hero-result #circle-progress-text {
    inset: 16px 6px 10px;
    transform: none;
    justify-content: center;
    gap: 0;
}

.quiz-hero-result #circle-progress-label {
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    color: #db2525;
    -webkit-text-stroke: 4px #000;
    paint-order: stroke fill;
    margin-bottom: 2px;
}

.quiz-hero-result[data-mode="secondary"] #circle-progress-label { color: #60b6eb; }

.quiz-hero-result:not(.is-unplayed) #circle-progress-label {
    position: absolute;
    top: 2px;
    left: 0;
    width: 100%;
    text-align: center;
    margin: 0;
}

.quiz-hero-result .quiz-hero-reward {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 68px;
    height: 56px;
    flex-shrink: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    margin: 0;
}

.quiz-hero-result .quiz-hero-reward[hidden] { display: none; }

.quiz-hero-result #circle-progress-value {
    position: relative;
    z-index: 1;
    justify-content: center;
    white-space: nowrap;
    -webkit-text-stroke: 4px #000;
    paint-order: stroke fill;
}

.quiz-hero-result:not(.is-unplayed) #circle-progress-value {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.quiz-hero-result #circle-progress-number {
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.quiz-hero-result #circle-progress-symbol {
    font-size: 12px;
    font-weight: 700;
    margin-left: 1px;
    line-height: 1;
}

.quiz-hero-result.is-unplayed .progress-circle-svg { visibility: hidden; }
.list-progress-chart-container.quiz-hero-result.is-unplayed { background: #17140e; }
.quiz-hero-result.is-unplayed #circle-progress-text { inset: 0; }
.quiz-hero-result.is-unplayed #circle-progress-label {
    font-size: 10px;
    font-weight: 400;
    color: #bbb;
    -webkit-text-stroke: 0;
    margin-bottom: 4px;
}


.hero-wrapper > .nav-button-group
 {
    margin-top: 25px;
    background: #262626;
    box-shadow: 0 3px 0px rgba(0, 0, 0, 0.35) inset;
}


/* next-stepの単元一覧アイコンのスタイル */
.button-icon.chapter-icon {
    background-color: #fced47;
}
.next-step-area {
	border-top:1px solid #ccc;
	padding-top:50px;
    margin: 70px 20px 80px; /* 上下の余白を調整 */
    text-align: center;
}

/* ヒントボタン */
.info-btn {
    color: #fff;
    background-color: #000;
    border: 2px solid #333;
    box-shadow: 0 4px 0px #000;
}
.info-btn::before {
    background-image: url(../images/menuPage_icon_question_red.svg);
}

/* --- 共有エリアの変更 --- */
#share-actions-container-inner.is-closed
 {
    border: 4px solid #e33636;
    box-shadow: 0 5px 0px #000;
    background: #000;
}
.share-trigger-icon {
    background: url(../images/iconShareArea_shareNew-W.svg) no-repeat center;
    background-size: 75px;
}
#share-actions-container-inner.is-expanded {
    border: 6px solid #e33636;
}
#share-actions-container-inner {
    background: #222;
}
.share-expanded-content::before {
    background: url(../images/share_phrase-W.svg) no-repeat center;
    background-size: contain;
}
.share-expanded-content::after {
    color: #888;
}
/* 応用クイズ */
html.is-secondary-mode #share-actions-container-inner.is-closed, body.is-secondary-mode #share-actions-container-inner.is-closed {
    border: 4px solid #176ea3;
}
html.is-secondary-mode #share-actions-container-inner.is-expanded, body.is-secondary-mode #share-actions-container-inner.is-expanded {
    border: 6px solid #176ea3;
}


/* --- 全体レイアウト --- */
.quizSetupArea {
    padding: 30px 20px 0;
}

.quizSetupWrapper {
    max-width: 500px;
    margin: 0 auto 20px;
    padding: 0; /* JSで中身を生成するためpaddingをリセット */
	padding-bottom:70px;
	border-bottom:1px solid #444;
}
.share-wrapper {
    margin-top: 70px;
	margin-bottom:30px;
}


/* ===============================================
 * ▼▼▼ スタートボタン（移植）のスタイル ▼▼▼
 * ===============================================
 */

.button-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 500px;
    margin: 20px auto 0;
}

.start-btn {
    padding: 25px 25px 25px 95px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    border-radius: 60px;
    transition: all 0.3s ease;
    border: none;
    color: white;
    cursor: pointer;
    text-decoration: none;
    display: block;
    position: relative;
	border: 6px solid #fff;
	min-height: 100px;
	box-shadow: 0 5px 0px rgba(0, 0, 0, 0.2);
    /* アニメーションの初期状態として、ボタンを非表示にする */
    opacity: 0;
}
@media (min-width: 420px) {
.start-btn {
    padding-left: 110px;
}
}
/* アイコンの共通スタイル */
.start-btn::before {
    content: '';
    position: absolute;
    left: 10px; /* ボタンの左端からの位置 */
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.start-btn b{
    font-size:1.6em;
}

.start-btn b.sky{
    color:#84c0e8;
}

.start-btn b.green{
    color:#f5e96c;
}

.start-btn b.pink{
    color:#f5bfdb;
}

/* 外側に広がるパルスアニメーションのキーフレーム */
@keyframes continuous-pulse {
    0% { box-shadow: 0 0 0 0 rgba(176, 62, 62, 0.3); }
    100% { box-shadow: 0 0 0 22px rgba(181, 58, 58, 0); }
}

/* パルスアニメーション用の擬似要素(::after)の基本設定 */
.start-btn::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 60px; /* ボタンの角丸と合わせる */
    pointer-events: none; /* クリックを妨げないようにする */
}

.btn-sub-text {
    display: block;
    font-size: 0.6em;
    opacity: 0.8;
    font-weight: normal;
    margin-top: 4px;
}

.start-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0, 0.2);
}

.start-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}


/* ハンコを押すようなアニメーションのキーフレーム定義 */
@keyframes stampIn {
    0% { transform: scale(1.15); opacity: 0; }
    50% { transform: scale(0.98); opacity: 1; }
    80% { transform: scale(1.01); }
    100% { transform: scale(1.0); opacity: 1; }
}

/* is-visibleクラスがコンテナに付与されたら、中のボタンにアニメーションを適用 */
.button-container.is-visible .start-btn {
    animation: stampIn 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
}

.button-container.is-visible .start-btn::after {
    animation: continuous-pulse 1.2s linear infinite;
}

/* カード画面と同じ形・余白のSTARTボタン。配色はホームのクイズに合わせる。 */
.quizSetupWrapper .quiz-start-btn {
    --quiz-start-gradient: linear-gradient(90deg, #c93636, #ff4d4d, #ff8080, #ff4d4d, #c93636);
    --glow-color: rgba(201, 54, 54, 0.8);
    padding: 8px 25px 10px 100px;
    border: none;
    border-radius: 66px;
    background: transparent;
    margin: 6px;
    text-align: left;
    font-family: inherit;
    z-index: 1;
}

html.is-secondary-mode .quiz-start-btn {
    --quiz-start-gradient: linear-gradient(90deg, #60b6eb, #294799, #672696, #294799, #60b6eb);
    --glow-color: rgba(103, 38, 150, 0.8);
}

@media (min-width: 420px) {
    .quizSetupWrapper .quiz-start-btn { padding-left: 120px; }
}

.quiz-start-btn > * {
    position: relative;
    z-index: 1;
}

@keyframes quizStartGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes quizStartGlow {
    0%, 100% { box-shadow: 0 0 15px var(--glow-color); filter: brightness(1); }
    50% { box-shadow: 0 0 35px var(--glow-color); filter: brightness(1.2); }
}

.quizSetupWrapper .quiz-start-btn::before {
    top: -6px; left: -6px; right: -6px; bottom: -6px;
    width: auto;
    height: auto;
    transform: none;
    z-index: -2;
    border-radius: 66px;
    background-image: var(--quiz-start-gradient);
    background-size: 200% auto;
    background-repeat: repeat;
    box-shadow: 0 0 15px var(--glow-color);
    animation: quizStartGradient 4s linear infinite, quizStartGlow 1.5s ease-in-out infinite;
    transition: box-shadow 0.3s ease, filter 0.3s ease;
}

.quizSetupWrapper .quiz-start-btn::after {
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    border-radius: 60px;
    background: url('../images/startBtn_arrowR-new.svg') no-repeat calc(100% - 15px) center / 24px 24px, #000;
}

.quizSetupWrapper .button-container.is-visible .quiz-start-btn.is-primary-action::after {
    animation: none;
}

.quizSetupWrapper .quiz-start-btn b {
    font-size: 36px;
    font-weight: 900;
    color: transparent;
    background-image: var(--quiz-start-gradient);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: quizStartGradient 4s linear infinite;
    display: inline-block;
    vertical-align: bottom;
    margin-top: 0;
}

.quiz-start-btn .btn-mode-label {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-top: 2px;
}

.quiz-start-btn .btn-sub-text {
    font-size: 13px;
    font-weight: normal;
    line-height: 1.4;
    color: #bbb;
    opacity: 1;
    margin-top: 6px;
}

.quiz-start-btn .btn-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    border: 5px solid #7c7c7c;
    border-radius: 50%;
    box-shadow: inset 0 0 0 5px #000;
    background: url('../images/indexPageBtn_quiz.svg') no-repeat center / contain;
}

html.is-secondary-mode .quiz-start-btn .btn-icon {
    background-image: url('../images/indexPageBtn_quiz-advanced.svg');
}

.quizSetupWrapper .quiz-start-btn:hover::before {
    box-shadow: 0 0 25px var(--glow-color);
    filter: brightness(1.2);
}

.quiz-start-btn:focus-visible,
.quiz-difficulty-modal .start-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 12px;
}

/* 全画面の難易度選択。黒背景をタップしたボタンの位置から広げる。 */
html.quiz-difficulty-open,
body.quiz-difficulty-open {
    overflow: hidden;
}

.quiz-difficulty-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: max(28px, env(safe-area-inset-top)) max(26px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(26px, env(safe-area-inset-left));
    border: none;
    background: #0c0808;
    color: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    clip-path: circle(0 at var(--quiz-reveal-x, 50%) var(--quiz-reveal-y, 50%));
    transition: clip-path 480ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}

.quiz-difficulty-modal[open] {
    display: flex;
}

.quiz-difficulty-modal.is-open {
    opacity: 1;
    clip-path: circle(150vmax at var(--quiz-reveal-x, 50%) var(--quiz-reveal-y, 50%));
}

.quiz-difficulty-modal::backdrop {
    background: rgba(0, 0, 0, 0.85);
}

.quiz-difficulty-content {
    width: 100%;
    max-width: 500px;
    margin: auto;
    position: relative;
    flex-shrink: 0;
}

.quiz-difficulty-header {
    padding: 0 52px 0 6px;
    margin-bottom: 32px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 300ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.quiz-difficulty-modal.is-open .quiz-difficulty-header {
    opacity: 1;
    transform: translateY(0);
}

.quiz-difficulty-mode {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0;
    color: #e35656;
    margin-bottom: 6px;
}

html.is-secondary-mode .quiz-difficulty-mode { color: #60b6eb; }

#quiz-difficulty-title {
    font-size: 24px;
    font-weight: 900;
    line-height: 1.25;
    margin: 0 0 4px;
}

#quiz-difficulty-description {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-size: 10px;
    line-height: 1.2;
    color: #bbb;
}

.quiz-difficulty-count-number {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.quiz-difficulty-count-unit {
    color: #fff;
    font-size: 10px;
    font-weight: bold;
}

.quiz-difficulty-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid #db2525;
    border-radius: 50%;
    background: #111;
    color: #fff;
    line-height: 1;
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
}

/* 字体による見た目の偏りを避け、交点を円の中心に置く。 */
.quiz-difficulty-close span {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    font-size: 0;
}

.quiz-difficulty-close span::before,
.quiz-difficulty-close span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 3px;
    border-radius: 1px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}

.quiz-difficulty-close span::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.quiz-difficulty-close:hover { background: #333; transform: rotate(90deg); }
.quiz-difficulty-close:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.quiz-difficulty-options {
    margin: 0;
    gap: 22px;
}

.quiz-difficulty-options .start-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 114px;
    padding: 16px 25px 16px 100px;
    opacity: 0;
    transform: translateY(24px) scale(0.96);
}

.quiz-difficulty-options .start-btn b {
    display: block;
    font-size: 28px;
    line-height: 1;
    white-space: nowrap;
}

.quiz-difficulty-options .btn-easy b.green { color: #fff; }

.quiz-difficulty-options .btn-hard {
    background-image: url('../images/startBtn_arrowR.svg'), linear-gradient(to bottom, #612222, #481010);
}

.quiz-difficulty-reading {
    display: block;
    margin-top: 1px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
    color: #fff;
}

.quiz-difficulty-emphasis { color: #db2525; }

html.is-secondary-mode .quiz-difficulty-emphasis,
body.is-secondary-mode .quiz-difficulty-emphasis { color: #60b6eb; }

.quiz-difficulty-details {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 5px;
    line-height: 1.2;
    color: #fff;
    font-weight: bold;
}

.quiz-difficulty-choices { font-size: 12px; }

.quiz-difficulty-detail {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
}

.quiz-difficulty-detail-label {
    font-size: 9px;
    font-weight: normal;
    color: #d0c5c5;
}

.quiz-difficulty-detail-value { font-size: 11px; }

@keyframes quizDifficultyIn {
    from { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.quiz-difficulty-modal.is-open .quiz-difficulty-options .start-btn {
    animation: quizDifficultyIn 550ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.quiz-difficulty-modal.is-open .quiz-difficulty-options .btn-easy { animation-delay: 120ms; }
.quiz-difficulty-modal.is-open .quiz-difficulty-options .btn-normal { animation-delay: 190ms; }
.quiz-difficulty-modal.is-open .quiz-difficulty-options .btn-hard { animation-delay: 260ms; }
.quiz-difficulty-modal.is-open .quiz-difficulty-options .btn-very-hard { animation-delay: 330ms; }

.quiz-difficulty-error {
    margin: 20px 6px 0;
    font-size: 12px;
    line-height: 1.6;
    color: #ff8080;
}

/* 横向き・小さい画面では高さを抑え、収まらない場合はモーダル内をスクロール。 */
@media (max-height: 740px) {
    .quiz-difficulty-header { margin-bottom: 24px; }
    .quiz-difficulty-options { gap: 16px; }
    .quiz-difficulty-options .start-btn { padding-top: 16px; padding-bottom: 16px; min-height: 100px; }
}

@media (max-width: 360px) {
    .quiz-difficulty-modal {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    #quiz-difficulty-title { font-size: 22px; }
    .quiz-difficulty-options .start-btn { padding-left: 82px; padding-right: 20px; }
    .quiz-difficulty-options .start-btn::before { left: 8px; width: 68px; height: 68px; }
    .quiz-difficulty-options .start-btn b { font-size: 24px; }
    .quiz-difficulty-reading { font-size: 14px; }
    .quiz-difficulty-details { column-gap: 6px; }
    .quiz-difficulty-choices { font-size: 11px; }
    .quiz-difficulty-detail-label { font-size: 8px; }
    .quiz-difficulty-detail-value { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-difficulty-modal { clip-path: none; transition: none; }
    .quiz-difficulty-header { transition: none; }
    .quiz-difficulty-modal.is-open .quiz-difficulty-options .start-btn,
    .quizSetupWrapper .button-container.is-visible .quiz-start-btn {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .quizSetupWrapper .quiz-start-btn::before,
    .quizSetupWrapper .quiz-start-btn b,
    .quizSetupWrapper .prompt-start-text { animation: none; }
}


/* ===============================================
 * ▼▼▼ ベースとなるモード選択用スタイルの定義 ▼▼▼
 * ===============================================
 */

.mode-select-inner {
    position: relative;
    z-index: 2;
    max-width: 500px;
    margin: 15px auto 0;
    padding: 20px 0px;
}
@media (min-width: 501px) {
    .mode-select-inner {
		padding: 20px 40px;
    }
}

.mode-wrapper {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0px;
}

.status-lamp-container {
    width: 100%;
    height: 15px;
    margin-bottom: 4px;
    display: flex;
    justify-content: center;
}
.status-lamp {
    width: 45px;
    height: 15px;
    border-radius: 7.5px;
    transition: all 0.4s ease;
}

.mode-description-container {
    flex-grow: 1;
    overflow: hidden;
    padding-left: 10px;
	margin:5px 0 10px;
}

/* ===============================================
 * ▼▼▼ スタートを促すテキストのスタイル ▼▼▼
 * ===============================================
 */
.prompt-start-container {
    margin: 40px 0 -10px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.prompt-start-text {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: #e63939;
    text-shadow: 0 1px 1px rgba(230, 57, 57,0.5);
    letter-spacing: 0em;
    animation: blink 1.8s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1); }
}


/* ===============================================
 * ▼▼▼ 音声モード切替ボタンのスタイル ▼▼▼
 * ===============================================
 */
.setting-toggles-container {
    max-width: 500px;
    margin: 0 auto 5px; /* button-containerに少し被るように配置 */
    padding: 0 0px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    position: relative;
    z-index: 10;
}

.toggle-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.toggle-label {
    font-size: 9px;
    color: #666; /* OFF時の暗い色 */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1;
    transition: color 0.3s ease;
}

.toggle-label[data-state="sound-on"] {
    color: #fff;
}

.sound-toggle-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    background-color: #000;
    border: 3px solid #444;
    box-shadow: 0 4px 0px rgba(0, 0, 0, 1);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

/* タップ時に少し拡大する心地よいアニメーション */
.sound-toggle-btn:active {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}

.sound-toggle-btn .icon {
    width: 28px;
    height: 28px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.3s ease, background-image 0.3s ease;
}

/* OFF状態 */
.sound-toggle-btn[data-state="sound-off"] .icon {
    background-image: url('../images/iconToggle-mini_soundOFF_red.svg');
    opacity: 0.7;
}

/* ON状態 */
.sound-toggle-btn[data-state="sound-on"] {
    background-color: #000;
    border: 4px solid #db2525;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.sound-toggle-btn[data-state="sound-on"]:active {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
.sound-toggle-btn[data-state="sound-on"] .icon {
    background-image: url('../images/iconToggle-cardPage_soundON-red.svg');
    opacity: 1;
}

/* 光る波紋（パルス）エフェクト */
.sound-toggle-btn::after {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    opacity: 0;
    pointer-events: none;
}
.sound-toggle-btn.is-animating::after {
    animation: soundTogglePulse 0.5s ease-out;
}
@keyframes soundTogglePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
        opacity: 1;
    }
    100% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
        opacity: 0;
    }
}


/* ===============================================
 * ▼▼▼ クイズスタート画面用（基本モード）のスタイル ▼▼▼
 * ===============================================
 */

/* --- 難易度ボタンのスタイル --- */
.btn-easy {
    background: url('../images/startBtn_arrowR.svg') no-repeat calc(100% - 15px) center / 10px 20px,
                linear-gradient(to bottom, #9c6d6d, #855959);
    order: 1;
}
.btn-easy::before {
    background-image: url('../images/quizPageBtn_easy.svg');
}
.btn-easy b.green { color: #f5efbf; }

.btn-normal {
    background: url('../images/startBtn_arrowR.svg') no-repeat calc(100% - 15px) center / 10px 20px,
                linear-gradient(to bottom, #db2525, #b30e0e);
    order: 2;
}
.btn-normal::before {
    background-image: url('../images/quizPageBtn_normal.svg');
}
.btn-normal b.sky { color: #fff; }

.btn-hard {
    background: url('../images/startBtn_arrowR.svg') no-repeat calc(100% - 15px) center / 10px 20px,
                linear-gradient(to bottom, #630404, #470101);
    order: 3;
}
.btn-hard::before {
    background-image: url('../images/quizPageBtn_hard.svg');
}
.btn-hard b.pink { color: #edc0c0; }

.btn-very-hard {
    background: url('../images/startBtn_arrowR.svg') no-repeat calc(100% - 15px) center / 10px 20px,
                linear-gradient(to bottom, #111, #000);
    order: 4;
}
.btn-very-hard::before {
    background-image: url('../images/quizPageBtn_veryhard.svg');
}
.btn-very-hard b.red { color: #db2525; }

/* アニメーション遅延の調整 */
.button-container.is-visible .btn-easy { animation-delay: 0.1s; }
.button-container.is-visible .btn-normal { animation-delay: 0.2s; }
.button-container.is-visible .btn-hard { animation-delay: 0.3s; }
.button-container.is-visible .btn-very-hard { animation-delay: 0.4s; }


/* ===============================================
 * ▼▼▼ クイズモード表示用パネルのスタイル ▼▼▼
 * ===============================================
 */

.quiz-mode-select-inner {
    position: relative;
    z-index: 2;
    max-width: 500px;
    margin: 0 auto 14px;
    padding: 0;
}

.quiz-mode-select-inner .status-lamp-container {
    height: auto;
    margin-bottom: 0;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.quiz-mode-caption {
    font-size: 12px;
    font-weight: normal;
    line-height: 1.2;
    color: #ccc;
	margin-bottom:2px;
}


.quiz-mode-panel {
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.quiz-mode-panel .mode-description-container {
    padding-left: 0;
    margin: 14px 10px 0;
	text-align:left;
}
.quiz-mode-panel .mode-description-container p{
	color:#bbb;
	font-size:12px;
	line-height:1.5;
}
.quiz-mode-panel #quiz-mode-description {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.quiz-mode-panel #quiz-mode-description.visible {
    opacity: 1;
    transform: translateY(0);
}

.quiz-mode-select-inner .status-lamp {
    width: auto;
    height: 44px;
    min-height: 15px;
    padding: 0px 20px;
    border-radius: 22px;
    border: none;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease, padding 0.4s ease;
}

/* 基本モードの色設定 */
.quiz-mode-select-inner.state-primary .status-lamp {
    background: linear-gradient(to bottom, #e33636, #b30e0e);
    box-shadow: 0 0 10px rgba(92, 17, 17, 0.8) inset;
}
.quiz-mode-select-inner.state-primary #quiz-mode-description strong {
	font-weight:bold;
	font-size:1.25em;
	margin:0 0.1em;
	color:#e35656;
}


/* アイコン画像の種類 */
.reward-icon.is-crown-gold { background-image: url(../images/quizTrophy-crown.svg); }
.reward-icon.is-gold { background-image: url(../images/quizTrophy-gold.svg); }
.reward-icon.is-silver { background-image: url(../images/quizTrophy-silver.svg); }
.reward-icon.is-bronze { background-image: url(../images/quizTrophy-bronze.svg); }
.reward-icon.is-silhouette { background-image: url(../images/quizTrophy-silhouette.svg); }

.reward-icon.is-medal-crown { background-image: url(../images/quizMedal-gold.svg); }
.reward-icon.is-medal-gold { background-image: url(../images/quizMedal-gold.svg); }
.reward-icon.is-medal-silver { background-image: url(../images/quizMedal-silver.svg); }
.reward-icon.is-medal-bronze { background-image: url(../images/quizMedal-bronze.svg); }
.reward-icon.is-medal { background-image: url(../images/quizMedal-gold.svg); }
.reward-icon.is-medal-weak { background-image: url(../images/quizMedal-weak.svg); }
.reward-icon.is-medal-normal { background-image: url(../images/quizMedal-normal.svg); }

.reward-icon.is-retry {
    width: 44px;
    height: 44px;
    background-image: url('../images/icon_retry_gray.svg');
    opacity: 0.5;
}

/* ===============================================
 * ▼▼▼ もうひとつのモードへ移動するバナーのスタイル ▼▼▼
 * ===============================================
 */

.mode-switch-banner-container {
    margin: 50px auto 0px;
    max-width: 400px;
    padding: 40px 20px 0;
    border-top: 1px solid #444; /* ボタン群とバナーを分ける区切り線 */
}
.mode-switch-description {
    font-size: 12px;
    color: #777;
    text-align: center;
    margin: 0 0 8px 0;
    font-weight: bold;
}
.mode-switch-banner {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 左から自然に並べる */
    padding: 16px 20px 16px 28px; 
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    box-shadow: 0 5px 0px #000;
    opacity: 0; /* アニメーションの初期状態として非表示 */
}
.mode-switch-banner-container.is-visible .mode-switch-banner {
    animation: stampIn 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
}
.mode-switch-banner:active {
    transform: translateY(2px);
    box-shadow: 0 0px 5px rgba(255,255,255,0.3);
}
.mode-switch-banner.banner-blue {
    background: linear-gradient(to bottom, #294799, #1a2e63);
    color: #fff;
    border: 6px solid #0c1836;
}
.mode-switch-banner.banner-red {
    background: linear-gradient(to bottom, #e33636, #b30e0e);
    color: #fff;
    border: 6px solid #630404;
}
.banner-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
    margin-right: 8px; /* 右側に余白 */
}
.banner-main-title {
    font-size: 22px;
}
.banner-sub-title {
    font-size: 12px;
    opacity: 0.75;
}
.banner-action-text {
    font-size: 14px;
    flex-shrink: 0;
}
.mode-switch-banner .banner-arrow {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: url('../images/icon-retry-quizPage-blue.svg') no-repeat center / contain;
    margin-left: auto; /* 矢印だけを右端に押しやる */
}


/* ===============================================
 * ▼▼▼ 応用モード（青基調）にするための上書きスタイル ▼▼▼
 * ===============================================
 */

/* HTML・Bodyにクラスを付けてヒーローセクション＆背景色変更 */
html.is-secondary-mode,
body.is-secondary-mode {
    background-image: linear-gradient(to bottom, #fff 15.7%, #294799 15.7%, #294799 70%, #111 100%);
    background-color: #111;
}
html.is-secondary-mode .hero-section,
body.is-secondary-mode .hero-section {
    background-color: #060e21;
    background-image: linear-gradient(to bottom, rgba(2, 7, 18, 0.5) 0%, #060e21 12%);
}
html.is-secondary-mode .hero-section::before,
body.is-secondary-mode .hero-section::before {
    background-image: url(../images/swipeIcon_Left.svg), linear-gradient(to right, rgba(2, 7, 18, 0.5), transparent);
}
html.is-secondary-mode .hero-section::after,
body.is-secondary-mode .hero-section::after {
    background-image: url(../images/swipeIcon_Right.svg), linear-gradient(to left, rgba(2, 7, 18, 0.5), transparent);
}
html.is-secondary-mode .btn-nav.prev,
body.is-secondary-mode .btn-nav.prev {
    background-image: url(../images/btn_arrowL.svg), linear-gradient(to bottom, #294799, #294799);
}
html.is-secondary-mode .btn-nav.next,
body.is-secondary-mode .btn-nav.next {
    background-image: url(../images/btn_arrowR.svg), linear-gradient(to bottom, #294799, #294799);
}

/* 応用モードのヒーロー画像変更 */
html.is-secondary-mode .hero-character,
body.is-secondary-mode .hero-character {
    background-image: url(../images/hero-sectionVispo_quizPage-advanced.svg);
}
html.is-secondary-mode .hero-phrase-container::before,
body.is-secondary-mode .hero-phrase-container::before {
    background-image: url(../images/hero-section_phrase_quizPage-advanced.svg);
    width: 200px;
}
html.is-secondary-mode .hero-title-logo,
body.is-secondary-mode .hero-title-logo {
    background-image: url(../images/hero-sectionTitleLogo_quizPage-advanced.svg);
}

/* 応用モード用の円グラフ色変更（青グラデーション） */
html.is-secondary-mode .list-progress-chart-container .grad-start,
body.is-secondary-mode .list-progress-chart-container .grad-start {
    stop-color: #60b6eb;
}
html.is-secondary-mode .list-progress-chart-container .grad-end,
body.is-secondary-mode .list-progress-chart-container .grad-end {
    stop-color: #294799;
}

/* 応用モード用のモード名と説明文の色 */
html.is-secondary-mode .quiz-mode-select-inner.state-secondary .status-lamp,
body.is-secondary-mode .quiz-mode-select-inner.state-secondary .status-lamp {
    background: linear-gradient(to bottom, #294799, #13275c);
    box-shadow: 0 0 10px rgba(9, 24, 64, 0.8) inset;
}
html.is-secondary-mode .quiz-mode-select-inner.state-secondary #quiz-mode-description strong,
body.is-secondary-mode .quiz-mode-select-inner.state-secondary #quiz-mode-description strong {
	font-weight:bold;
	font-size:1em;
	margin:0;
	color:#9fb1e3;
}

/* 応用モード用のサウンドボタンON状態 */
html.is-secondary-mode .sound-toggle-btn[data-state="sound-on"],
body.is-secondary-mode .sound-toggle-btn[data-state="sound-on"] {
    border-color: #176ea3;
    box-shadow: 0 4px 10px rgba(96, 182, 235, 0.3);
}
html.is-secondary-mode .sound-toggle-btn[data-state="sound-on"]:active,
body.is-secondary-mode .sound-toggle-btn[data-state="sound-on"]:active {
    box-shadow: 0 6px 15px rgba(96, 182, 235, 0.5);
}
html.is-secondary-mode .sound-toggle-btn[data-state="sound-on"] .icon,
body.is-secondary-mode .sound-toggle-btn[data-state="sound-on"] .icon {
    background-image: url('../images/iconToggle-cardPage_soundON-blue.svg');
}
html.is-secondary-mode .sound-toggle-btn[data-state="sound-off"] .icon,
body.is-secondary-mode .sound-toggle-btn[data-state="sound-off"] .icon {
    background-image: url('../images/iconToggle-mini_soundOFF_blue.svg');
}
html.is-secondary-mode .sound-toggle-btn.is-animating::after,
body.is-secondary-mode .sound-toggle-btn.is-animating::after {
    animation: soundTogglePulseBlue 0.5s ease-out;
}
@keyframes soundTogglePulseBlue {
    0% {
        box-shadow: 0 0 0 0 rgba(96, 182, 235, 0.6);
        opacity: 1;
    }
    100% {
        box-shadow: 0 0 0 20px rgba(96, 182, 235, 0);
        opacity: 0;
    }
}

/* 応用モード用のテキスト変更 */
html.is-secondary-mode .prompt-start-text,
body.is-secondary-mode .prompt-start-text {
    color: #60b6eb;
    text-shadow: 0 1px 1px rgba(96, 182, 235, 0.5);
}

/* 応用モード用の難易度ボタン変更 */
html.is-secondary-mode .btn-easy,
body.is-secondary-mode .btn-easy {
    background: url('../images/startBtn_arrowR.svg') no-repeat calc(100% - 15px) center / 10px 20px,
                linear-gradient(to bottom, #60b6eb, #3583b3);
}
html.is-secondary-mode .btn-easy::before,
body.is-secondary-mode .btn-easy::before {
    background-image: url('../images/quizPageBtn_easy_secondary.svg');
}
html.is-secondary-mode .btn-easy b,
body.is-secondary-mode .btn-easy b { color: #fff; }

html.is-secondary-mode .btn-normal,
body.is-secondary-mode .btn-normal {
    background: url('../images/startBtn_arrowR.svg') no-repeat calc(100% - 15px) center / 10px 20px,
                linear-gradient(to bottom, #294799, #13275c);
}
html.is-secondary-mode .btn-normal::before,
body.is-secondary-mode .btn-normal::before {
    background-image: url('../images/quizPageBtn_normal_secondary.svg');
}
html.is-secondary-mode .btn-normal b,
body.is-secondary-mode .btn-normal b { color: #fff; }

html.is-secondary-mode .btn-hard,
body.is-secondary-mode .btn-hard {
    background: url('../images/startBtn_arrowR.svg') no-repeat calc(100% - 15px) center / 10px 20px,
                linear-gradient(to bottom, #11204d, #060e26);
}
html.is-secondary-mode .btn-hard::before,
body.is-secondary-mode .btn-hard::before {
    background-image: url('../images/quizPageBtn_hard_secondary.svg');
}
html.is-secondary-mode .btn-hard b,
body.is-secondary-mode .btn-hard b { color: #9fb1e3; }

html.is-secondary-mode .btn-very-hard,
body.is-secondary-mode .btn-very-hard {
    background: url('../images/startBtn_arrowR.svg') no-repeat calc(100% - 15px) center / 10px 20px,
                linear-gradient(to bottom, #050a17, #000);
}
html.is-secondary-mode .btn-very-hard::before,
body.is-secondary-mode .btn-very-hard::before {
    background-image: url('../images/quizPageBtn_veryhard_secondary.svg');
}
html.is-secondary-mode .btn-very-hard b,
body.is-secondary-mode .btn-very-hard b { color: #294799; }

/* 応用モード用のパルスアニメーション */
@keyframes continuous-pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(41, 71, 153, 0.4); }
    100% { box-shadow: 0 0 0 22px rgba(41, 71, 153, 0); }
}
html.is-secondary-mode .button-container.is-visible .start-btn::after,
body.is-secondary-mode .button-container.is-visible .start-btn::after {
    animation: continuous-pulse-blue 1.2s linear infinite;
}

/* 応用モード用のヒントボタンアイコン変更 */
html.is-secondary-mode .info-btn::before,
body.is-secondary-mode .info-btn::before {
    background-image: url(../images/menuPage_icon_question_blue.svg);
}

/* 応用モード用のモード切り替えバナーの矢印変更 */
html.is-secondary-mode .mode-switch-banner .banner-arrow,
body.is-secondary-mode .mode-switch-banner .banner-arrow {
    background-image: url('../images/icon-retry-quizPage-red.svg');
}
/* --- END OF FILE quiz.css --- */