:root { --ink:#2b211c; --muted:#75685e; --paper:#f4eddf; --paper-deep:#e9ddca; --card:#fffdf7; --red:#781d18; --red-bright:#a52a21; --gold:#b8893d; --line:#d5c4ad; --green:#315f4f; --shadow:0 18px 55px rgba(67,43,26,.12); color-scheme:light; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--paper); }
body { min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 12% 4%,rgba(184,137,61,.13),transparent 26rem),radial-gradient(circle at 95% 24%,rgba(120,29,24,.09),transparent 30rem),repeating-linear-gradient(0deg,rgba(70,45,25,.018) 0,rgba(70,45,25,.018) 1px,transparent 1px,transparent 5px),var(--paper); font-family:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif; line-height:1.65; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.game-header { width:min(1180px,calc(100% - 36px)); min-height:76px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid rgba(120,29,24,.28); }
.back-link { justify-self:start; color:var(--muted); text-decoration:none; font-size:.9rem; }
.back-link::before { content:"←"; margin-right:.4em; color:var(--red); }
.brand { display:flex; flex-direction:column; align-items:center; letter-spacing:.08em; }
.brand span,.eyebrow { color:var(--red); font:600 .7rem/1.5 "Microsoft YaHei",sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.brand strong { font-size:1.15rem; }
.icon-button { justify-self:end; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; color:var(--red); background:rgba(255,253,247,.65); }
main { width:min(1080px,calc(100% - 36px)); margin:0 auto; padding:28px 0 64px; }
.mode-tabs { width:fit-content; display:flex; gap:4px; margin:0 auto 34px; padding:4px; border:1px solid var(--line); border-radius:999px; background:rgba(255,253,247,.65); }
.mode-tab { min-width:110px; padding:8px 18px; border:0; border-radius:999px; color:var(--muted); background:transparent; }
.mode-tab.active { color:#fff; background:var(--red); box-shadow:0 4px 12px rgba(120,29,24,.2); }
.view { display:none; }
.view.active { display:block; animation:rise .35s ease; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } }
.setup-grid { display:grid; grid-template-columns:1.4fr .8fr; gap:24px; align-items:stretch; }
.hero-card,.control-card,.question-card,.result-card,.flashcard,.rules-grid article { border:1px solid var(--line); background:rgba(255,253,247,.92); box-shadow:var(--shadow); }
.hero-card { min-height:430px; display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,6vw,72px); position:relative; overflow:hidden; }
.hero-card::after { content:"年"; position:absolute; right:-.08em; bottom:-.4em; color:rgba(120,29,24,.055); font-size:19rem; line-height:1; }
.seal { width:fit-content; margin:0 0 18px; padding:3px 9px; color:var(--red); border:1px solid currentColor; font:600 .75rem/1.5 "Microsoft YaHei",sans-serif; letter-spacing:.18em; }
h1,h2,p { margin-top:0; }
.hero-card h1 { max-width:8em; margin-bottom:22px; font-size:clamp(2.2rem,5vw,4.1rem); line-height:1.12; letter-spacing:.05em; }
.hero-card>p:not(.seal) { max-width:34em; color:var(--muted); font-size:1.05rem; }
.archive-note { display:flex; flex-direction:column; margin-top:28px; padding-left:14px; border-left:3px solid var(--gold); }
.archive-note strong { color:var(--red); }
.archive-note span { color:var(--muted); font-size:.83rem; }
.control-card { display:flex; flex-direction:column; justify-content:center; padding:34px; }
fieldset { margin:0 0 27px; padding:0; border:0; }
legend { margin-bottom:10px; color:var(--muted); font-size:.86rem; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); padding:3px; border:1px solid var(--line); background:var(--paper); }
.segmented.two { grid-template-columns:repeat(2,1fr); }
.segmented label { cursor:pointer; }
.segmented input { position:absolute; opacity:0; pointer-events:none; }
.segmented span { display:block; padding:8px 5px; text-align:center; }
.segmented input:checked+span { color:#fff; background:var(--red); }
.best-line { color:var(--muted); font-size:.88rem; }
.best-line strong { color:var(--red); }
.primary-button,.answer-form button { padding:11px 22px; border:1px solid var(--red); color:#fff; background:var(--red); }
.primary-button:hover,.answer-form button:hover { background:var(--red-bright); }
.score-strip { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-bottom:0; background:rgba(255,253,247,.75); }
.score-strip>div { display:flex; align-items:baseline; justify-content:center; gap:9px; padding:13px; border-right:1px solid var(--line); }
.score-strip>div:last-child { border:0; }
.score-strip span { color:var(--muted); font-size:.78rem; }
.score-strip strong { color:var(--red); font-size:1.12rem; }
.timer-track { height:4px; background:var(--paper-deep); }
.timer-track i { display:block; width:100%; height:100%; background:var(--gold); transition:width .2s linear,background .2s; }
.question-card { min-height:470px; padding:clamp(32px,6vw,70px); text-align:center; }
.question-kind { color:var(--muted); letter-spacing:.12em; }
.question-card h2 { margin:24px 0 38px; color:var(--red); font-size:clamp(3.2rem,10vw,6.8rem); font-weight:500; letter-spacing:.08em; }
.question-hint { max-width:700px; margin:-18px auto 26px; padding:12px 16px; color:#665441; background:#f7efdf; border-left:3px solid var(--gold); text-align:left; }
.answer-form { width:min(440px,100%); margin:0 auto; }
.answer-form>label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.answer-form>div { display:grid; grid-template-columns:1fr auto; }
.answer-form input { min-width:0; padding:13px 15px; border:1px solid var(--red); border-right:0; color:var(--ink); background:#fff; font-size:1.2rem; outline:none; }
.answer-form input:focus { box-shadow:inset 0 0 0 2px rgba(120,29,24,.15); }
.text-button { margin-top:20px; border:0; border-bottom:1px dotted currentColor; color:var(--muted); background:transparent; }
.answer-result { width:min(620px,100%); margin:24px auto 0; padding:18px; border-top:1px solid var(--line); }
.answer-result strong { color:var(--red); font-size:1.4rem; }
.result-card { padding:clamp(28px,6vw,64px); text-align:center; }
.result-card .seal { margin-left:auto; margin-right:auto; }
.final-score { display:block; color:var(--red); font-size:clamp(4rem,12vw,8rem); line-height:1; }
.round-review { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:30px 0; }
.review-chip { padding:10px 4px; border:1px solid var(--line); background:var(--paper); font-size:.8rem; }
.review-chip.good { border-color:#97b5aa; background:#edf5f1; }
.review-chip b { display:block; color:var(--red); font-size:1rem; }
.result-actions,.training-controls { display:flex; justify-content:center; gap:10px; }
.result-actions button:not(.primary-button),.training-controls button:not(.primary-button) { padding:10px 20px; border:1px solid var(--line); color:var(--ink); background:#fff; }
.training-toolbar { display:flex; justify-content:space-between; align-items:end; margin-bottom:22px; }
.training-toolbar h1,.rules-view>h1 { margin-bottom:0; font-size:clamp(2rem,5vw,3.5rem); }
.training-toolbar label { display:flex; flex-direction:column; color:var(--muted); font-size:.8rem; }
.training-toolbar select { margin-top:5px; padding:8px 28px 8px 10px; border:1px solid var(--line); background:#fff; }
.flashcard { min-height:490px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(28px,7vw,80px); position:relative; text-align:center; outline:none; }
.flashcard:focus-visible { box-shadow:0 0 0 3px var(--gold),var(--shadow); }
.card-corner { position:absolute; top:22px; left:24px; color:var(--muted); font-size:.78rem; }
.flash-prompt { color:var(--muted); letter-spacing:.16em; }
.flashcard h2 { margin:10px 0 26px; color:var(--red); font-size:clamp(3rem,9vw,6rem); font-weight:500; }
.training-dates { display:flex; align-items:center; justify-content:center; gap:12px; min-height:50px; font-size:1.2rem; }
.training-dates span { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--gold); border-radius:50%; color:#7e5c28; font-size:.75rem; }
.training-dates strong { min-width:4ch; font-size:1.8rem; }
.training-dates i { width:32px; height:1px; background:var(--line); }
.training-dates.concealed strong { color:#b9aa99; letter-spacing:.1em; }
.training-bio { max-width:760px; margin-top:26px; padding-top:24px; border-top:1px solid var(--line); color:#574b42; text-align:justify; }
.training-action { position:absolute; bottom:18px; margin:0; color:var(--muted); font-size:.82rem; }
.training-controls { margin-top:18px; }
.keyboard-note { margin-top:14px; color:var(--muted); text-align:center; font-size:.8rem; }
kbd { margin:0 3px; padding:2px 7px; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; background:#fff; font:inherit; }
.rules-view { max-width:930px; margin:0 auto; }
.rules-view>.eyebrow { margin-bottom:4px; }
.rules-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:30px; }
.rules-grid article { padding:28px; }
.rules-grid article>strong { color:var(--red); font-size:2.2rem; }
.rules-grid h2 { margin:5px 0 8px; }
.rules-grid p,.source-note { color:var(--muted); }
.source-note { margin-top:24px; padding:14px 18px; border-left:3px solid var(--gold); background:rgba(255,253,247,.65); }
.toast { position:fixed; left:50%; bottom:24px; z-index:10; transform:translate(-50%,20px); padding:9px 16px; border-radius:99px; color:#fff; background:rgba(43,33,28,.92); opacity:0; pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:760px) { .game-header { grid-template-columns:1fr auto; }.brand { align-items:flex-start; order:-1; }.back-link { display:none; }.setup-grid { grid-template-columns:1fr; }.hero-card { min-height:340px; }.control-card { padding:25px; }.mode-tab { min-width:auto; padding:8px 13px; }.score-strip span { display:none; }.question-card { min-height:420px; }.round-review { grid-template-columns:repeat(2,1fr); }.training-toolbar { align-items:flex-start; gap:15px; }.rules-grid { grid-template-columns:1fr; } }
@media (max-width:460px) { main,.game-header { width:calc(100% - 20px); }.brand span { display:none; }.mode-tabs { width:100%; }.mode-tab { flex:1; }.hero-card { padding:30px 24px; }.question-card { padding:34px 20px; }.score-strip>div { padding:10px 4px; }.question-card h2 { margin-bottom:30px; }.training-toolbar { flex-direction:column; }.training-toolbar label { width:100%; }.training-toolbar select { width:100%; }.flashcard { min-height:440px; }.training-controls button { padding-left:13px!important; padding-right:13px!important; }.keyboard-note { display:none; } }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }