/* ==========================================================================
quiz-theme.css — russian-literature.net/quiz/ 向け override
既存 /quiz/style.css の直後に読み込むことで、白・紺・赤（ロシア国旗・文学調）
にリテーマする。既存CSSの :root 変数を再定義して広範囲を一気に置き換え、
そのうえでハードコードされた色やグラデを個別に上書きする。
/quiz/index.html の で、
の直後に次の1行を置くこと:
========================================================================== */
/* === 1. CSS 変数を書き換えて全体のトーンを白・紺・赤に ==================== */
:root{
--bg: #FFFFFF; /* 元: #1a1410 */
--bg2: #F6F4EF; /* 元: #241c16 */
--bg3: #EEF1F7; /* 元: #2f231a */
--card: #FFFFFF; /* 元: #352820 */
--border: #E2E4EA; /* 元: #5a3e2b */
/* "gold" アクセントを紺に置き換え（CSS全体のメインアクセント） */
--gold: #0B2A59; /* 元: #c9993e */
--gold-light: #193F7A; /* 元: #e0b55a */
/* 赤は保持・微調整 */
--red: #C1272D; /* 元: #b83232 */
--red-light: #D64848; /* 元: #e05050 */
/* 緑は正誤フィードバック用なので残す */
--green: #1F7A3A;
--green-light: #2E9D4D;
--text: #1B1B1B; /* 元: #e8dcc8 */
--text-dim: #4A4A4A; /* 元: #a08060 */
--text-muted: #6B7280; /* 元: #6a5040 */
--white: #FFFFFF; /* 元: #f5ede0 */
}
/* === 2. body / base =================================================== */
body{
background: var(--bg) !important;
color: var(--text) !important;
}
a{color: var(--gold)}
a:hover{color: var(--red)}
/* === 3. Header（グラデ固定値を上書き） ================================ */
header{
background: var(--bg) !important;
border-bottom: 1px solid var(--border) !important;
}
.header-title, .header-title-text{
color: var(--gold) !important; /* 紺 */
font-weight: 700;
}
/* ナビボタン — 未選択は淡い色、選択中は紺 */
.nav-btn{
background: #fff !important;
border: 1px solid var(--border) !important;
color: var(--text-dim) !important;
}
.nav-btn:hover, .nav-btn.active{
border-color: var(--gold) !important;
color: var(--gold) !important;
background: var(--bg3) !important;
}
/* === 4. Hero ========================================================= */
.hero h1{
color: var(--gold) !important;
}
.hero-ornament{
background: linear-gradient(90deg, var(--gold), var(--red)) !important;
opacity: .6;
}
/* === 5. Work card（作品カード） ======================================= */
.work-card{
background: var(--card) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
transition: all .2s;
}
.work-card:hover{
border-color: var(--gold) !important;
box-shadow: 0 8px 24px rgba(11,42,89,.08);
}
.work-card::before{
background: linear-gradient(90deg, var(--gold), var(--red)) !important;
}
.work-card-title{color: var(--gold) !important}
.work-card-year, .work-card-author{color: var(--text-dim) !important}
.work-card-count, .work-card-best span{color: var(--gold) !important}
/* === 6. 汎用ボタン（list / quiz） ==================================== */
.btn-list{
background: transparent !important;
border: 1px solid var(--border) !important;
color: var(--text-dim) !important;
}
.btn-list:hover{
border-color: var(--gold) !important;
color: var(--gold) !important;
background: var(--bg3) !important;
}
.btn-quiz{
background: var(--red) !important;
color: #fff !important;
border: 1px solid var(--red) !important;
}
.btn-quiz:hover{
background: var(--red-light) !important;
border-color: var(--red-light) !important;
}
/* === 7. 画面ヘッダー / 戻るボタン ===================================== */
.back-btn{
background: #fff !important;
border: 1px solid var(--border) !important;
color: var(--text-dim) !important;
}
.back-btn:hover{
border-color: var(--gold) !important;
color: var(--gold) !important;
}
.screen-header-info h2{color: var(--gold) !important}
.btn-quiz-sm{
background: var(--red) !important;
color: #fff !important;
border: 1px solid var(--red) !important;
}
.btn-quiz-sm:hover{
background: var(--red-light) !important;
border-color: var(--red-light) !important;
}
/* === 8. 登場人物カード =============================================== */
.char-card{
background: var(--card) !important;
border: 1px solid var(--border) !important;
}
.char-card:hover{border-color: var(--gold) !important}
.char-main-name{color: var(--gold) !important}
.char-role{color: var(--text-dim) !important}
.char-stat-badge{
background: var(--bg3) !important;
color: var(--text-dim) !important;
}
.char-stat-badge span{color: var(--gold) !important}
.char-full-name{color: var(--text) !important}
.names-label{color: var(--text-muted) !important}
.name-tag{
background: var(--bg3) !important;
color: var(--text-dim) !important;
border: 1px solid var(--border) !important;
}
.name-tag.primary{
background: var(--gold) !important;
color: #fff !important;
border-color: var(--gold) !important;
}
.char-desc{color: var(--text-dim) !important}
/* === 9. クイズ画面 =================================================== */
.quiz-header{
background: var(--bg2) !important;
border-bottom: 1px solid var(--border) !important;
}
.quiz-progress-bar-wrap{
background: var(--border) !important;
}
.quiz-progress-bar{
background: linear-gradient(90deg, var(--gold), var(--red)) !important;
}
.quiz-counter{color: var(--text-dim) !important}
.quiz-score-badge{
background: var(--bg3) !important;
color: var(--gold) !important;
border: 1px solid var(--border) !important;
}
.quiz-card{
background: var(--card) !important;
border: 1px solid var(--border) !important;
box-shadow: 0 4px 16px rgba(11,42,89,.06);
}
.quiz-type-badge{
background: var(--red) !important;
color: #fff !important;
}
.quiz-question{color: var(--text) !important}
.quiz-question em{color: var(--gold) !important; font-style: normal}
/* === 10. 選択肢ボタン =============================================== */
.choice-btn{
background: #fff !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
}
.choice-btn:hover:not(:disabled){
border-color: var(--gold) !important;
background: var(--bg3) !important;
}
.choice-label{
background: var(--bg3) !important;
color: var(--gold) !important;
border: 1px solid var(--border) !important;
}
.choice-btn.correct{
background: #E9F5EE !important;
border-color: var(--green) !important;
color: var(--green) !important;
}
.choice-btn.correct .choice-label{
background: var(--green) !important;
color: #fff !important;
border-color: var(--green) !important;
}
.choice-btn.wrong{
background: #FBEBEC !important;
border-color: var(--red) !important;
color: var(--red) !important;
}
.choice-btn.wrong .choice-label{
background: var(--red) !important;
color: #fff !important;
border-color: var(--red) !important;
}
/* === 11. 正解/不正解フィードバック ================================== */
.quiz-feedback{
background: var(--bg2) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
}
.quiz-feedback.correct-fb{
background: #E9F5EE !important;
border-color: var(--green) !important;
color: var(--green) !important;
}
.quiz-feedback.wrong-fb{
background: #FBEBEC !important;
border-color: var(--red) !important;
color: var(--red) !important;
}
/* === 12. Next ボタン（主CTAは赤） =================================== */
.next-btn{
background: var(--red) !important;
color: #fff !important;
border: 1px solid var(--red) !important;
}
.next-btn:hover{
background: var(--red-light) !important;
border-color: var(--red-light) !important;
}
/* === 13. 成績セクション ============================================= */
.stats-section-title{color: var(--gold) !important}
.stats-work-block{
background: var(--card) !important;
border: 1px solid var(--border) !important;
}
.stats-work-header{border-bottom: 1px solid var(--border) !important}
.stats-work-title{color: var(--gold) !important}
.stats-meta{color: var(--text-muted) !important}
.stats-box{
background: var(--bg2) !important;
border: 1px solid var(--border) !important;
}
.stats-box-val{color: var(--gold) !important}
.stats-box-label{color: var(--text-muted) !important}
.history-item{border-bottom: 1px solid var(--border) !important}
.history-date{color: var(--text-muted) !important}
.history-score{color: var(--text) !important}
.history-score strong{color: var(--gold) !important}
.char-stat-name{color: var(--text-dim) !important}
.char-stat-bar-wrap{background: var(--border) !important}
.char-stat-bar.good{background: var(--green) !important}
.char-stat-bar.mid{background: var(--gold) !important}
.char-stat-bar.bad{background: var(--red) !important}
.char-stat-pct{color: var(--text-muted) !important}
.empty-stats{color: var(--text-dim) !important}
.clear-btn{
background: transparent !important;
border: 1px solid var(--border) !important;
color: var(--text-dim) !important;
}
.clear-btn:hover{
border-color: var(--red) !important;
color: var(--red) !important;
}
/* === 14. 結果画面 =================================================== */
.result-card{
background: var(--card) !important;
border: 1px solid var(--border) !important;
box-shadow: 0 8px 24px rgba(11,42,89,.08);
}
.result-title{color: var(--gold) !important}
.result-score{color: var(--gold) !important}
.result-total{color: var(--text-dim) !important}
.result-rank-title{color: var(--gold) !important}
.result-rank-desc{color: var(--text-dim) !important}
.result-new-best{color: var(--red) !important}
.result-btn.primary{
background: var(--red) !important;
color: #fff !important;
border: 1px solid var(--red) !important;
}
.result-btn.primary:hover{
background: var(--red-light) !important;
border-color: var(--red-light) !important;
}
.result-btn.secondary{
background: #fff !important;
color: var(--gold) !important;
border: 1px solid var(--gold) !important;
}
.result-btn.secondary:hover{
background: var(--bg3) !important;
}
/* === 15. Storage notice（下部のlocalStorage説明） ==================== */
.storage-notice{
background: var(--bg2) !important;
border: 1px solid var(--border) !important;
color: var(--text-dim) !important;
}
.storage-notice-title{color: var(--gold) !important}
.storage-table{background: #fff !important; color: var(--text) !important}
.storage-table th, .storage-table td{border-color: var(--border) !important}
.storage-table tr.danger td:first-child{color: var(--red) !important}
/* === 16. セレクションカラー ========================================= */
::selection{background: var(--gold); color: #fff}