/* 骑士大冒险 · 2026-10 升级：封面、模式选择、字卡、听音选字、结算与证书 */
:root{--qx-gold:#ffd166;--qx-gold2:#f4a261;--qx-ink:#1d2b44;--qx-teal:#2ec4b6;--qx-red:#e5484d}

/* ── 封面 ── */
#qxCover{position:fixed;inset:0;z-index:6500;display:none;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.2vh,22px);
  padding:clamp(70px,10vh,96px) 16px 28px;overflow-y:auto;color:#fff;text-align:center;
  background:linear-gradient(180deg,rgba(12,22,48,.55) 0%,rgba(12,22,48,.25) 40%,rgba(12,22,48,.78) 100%),url(/adventure/bg1.webp) center/cover no-repeat,#1a2a4a}
#qxCover.show{display:flex}
.qx-top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.qx-brand{display:flex;align-items:center;gap:8px;background:#fff;color:#1b1b1b;border-radius:999px;padding:4px 16px 4px 6px;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.qx-brand img{height:40px;width:auto;display:block}
.qx-brand b{font-size:15px;font-weight:900;line-height:1.1}.qx-brand small{display:block;font-size:11px;font-weight:700;color:#0f766e}
.qx-back{color:#fff;text-decoration:none;font-weight:800;font-size:14px;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.5)}
.qx-heroes{display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,2vw,24px)}
.qx-heroes img{height:clamp(110px,22vh,210px);width:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.qx-heroes img:first-child{transform:rotate(-5deg)}.qx-heroes img:last-child{transform:rotate(5deg) scaleX(-1)}
.qx-title{font-size:clamp(44px,9vw,96px);font-weight:900;letter-spacing:.08em;line-height:1;color:var(--qx-gold);
  -webkit-text-stroke:3px #5a2d0c;paint-order:stroke fill;text-shadow:0 6px 0 #5a2d0c,0 12px 28px rgba(0,0,0,.45)}
.qx-sub{font-size:clamp(16px,2.6vw,22px);font-weight:800;background:rgba(0,0,0,.4);padding:6px 18px;border-radius:999px}
.qx-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:760px}
.qx-steps span{background:rgba(255,255,255,.92);color:var(--qx-ink);font-weight:800;font-size:clamp(13px,1.9vw,16px);padding:8px 14px;border-radius:14px;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.qx-steps b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--qx-gold2);color:#fff;margin-right:6px;font-size:13px}
.qx-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.qx-btn{border:0;border-radius:999px;font:inherit;font-weight:900;cursor:pointer;padding:14px 34px;font-size:clamp(18px,2.6vw,22px);transition:transform .12s}
.qx-btn:active{transform:translateY(3px)}
.qx-btn.gold{background:linear-gradient(180deg,#ffe08a,#f4b740);color:#5a2d0c;box-shadow:0 6px 0 #b9770e,0 12px 24px rgba(0,0,0,.35)}
.qx-btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.7)}
.qx-btn.teal{background:linear-gradient(180deg,#4fd1c5,#2ec4b6);color:#06302c;box-shadow:0 5px 0 #1a8a80}
.qx-btn.sm{padding:10px 20px;font-size:16px}
.qx-progress{font-size:14px;font-weight:700;background:rgba(0,0,0,.45);padding:6px 14px;border-radius:12px}

/* ── 词库页：返回 + 模式 ── */
.qx-lexback{display:inline-block;margin-bottom:8px;color:rgba(255,255,255,.75);font-size:13px;font-weight:700;cursor:pointer;text-decoration:none}
.qx-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 14px}
.qx-mode{border:2px solid rgba(255,255,255,.18);border-radius:16px;padding:10px 12px;cursor:pointer;background:rgba(255,255,255,.05);color:#fff;text-align:left}
.qx-mode b{display:block;font-size:16px}.qx-mode span{font-size:12px;color:rgba(255,255,255,.65)}
.qx-mode.on{border-color:var(--qx-gold);background:rgba(255,209,102,.14)}

/* ── 字卡 ── */
.qx-card{cursor:pointer;min-width:min(300px,70vw)}
.qx-cc{font-size:clamp(72px,14vh,110px);line-height:1.05;color:#d4496a;text-shadow:0 3px 10px rgba(212,73,106,.25)}
.qx-py{font-size:clamp(26px,4vh,38px);color:#2c6fad;font-weight:800;letter-spacing:2px;margin:4px 0 10px}
.qx-word{display:inline-flex;align-items:center;gap:10px;font-size:clamp(22px,3.4vh,30px);color:#334;background:#fff;border-radius:16px;padding:6px 16px;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.qx-word span{font-size:13px;background:#ffe6a6;color:#8a4b00;border-radius:8px;padding:2px 8px}
.qx-hl{color:#d4496a}
.qx-tap{font-size:13px;color:#7a8aa0;margin-top:10px;font-weight:700}

/* ── 听音选字 ── */
#qxQuiz{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:16px;
  background:linear-gradient(160deg,rgba(220,238,252,.97),rgba(252,220,235,.97))}
#qxQuiz.show{display:flex}
.qz-box{background:#fff;border-radius:28px;padding:clamp(18px,3vh,30px) clamp(18px,4vw,40px);width:min(620px,96vw);text-align:center;box-shadow:0 20px 50px rgba(44,95,138,.25)}
.qz-h{font-size:clamp(20px,3vw,26px);font-weight:900;color:#2c5f8a}
.qz-p{font-size:14px;color:#6b7c93;font-weight:700;margin:4px 0 12px}
.qz-play{border:0;width:clamp(96px,16vh,130px);height:clamp(96px,16vh,130px);border-radius:50%;font-size:clamp(40px,7vh,56px);cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,#f4b740);box-shadow:0 8px 0 #b9770e,0 14px 30px rgba(0,0,0,.2);margin:6px 0 18px}
.qz-play.ping{animation:qzPing .5s}
@keyframes qzPing{50%{transform:scale(1.1)}}
.qz-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,2vh,16px)}
.qz-opt{border:3px solid #cfe0f2;border-radius:20px;background:#f6faff;font:inherit;font-size:clamp(46px,9vh,72px);font-weight:900;color:#1d2b44;padding:6px 0;cursor:pointer;line-height:1.2}
.qz-opt small{display:block;font-size:16px;color:#2c6fad;min-height:20px;font-weight:800}
.qz-opt.ok{border-color:#27ae60;background:#dff7e8;color:#1a7a40}
.qz-opt.no{border-color:var(--qx-red);background:#fde8e8;color:#c0392b;animation:qzShake .4s}
@keyframes qzShake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.qz-done{font-size:24px;font-weight:900;color:#27ae60;margin:14px 0 8px}

/* ── 结算 ── */
#qxResult{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;padding:14px;background:rgba(10,18,40,.72);backdrop-filter:blur(6px)}
#qxResult.show{display:flex}
.rs-box{background:linear-gradient(170deg,#fffaf0,#fff3dc);border:4px solid #e9b949;border-radius:28px;width:min(720px,96vw);max-height:94vh;overflow-y:auto;padding:clamp(16px,3vh,28px) clamp(16px,4vw,34px);text-align:center;color:var(--qx-ink);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.rs-h{font-size:clamp(26px,4vw,36px);font-weight:900;color:#b4531a}
.rs-stars{font-size:clamp(40px,7vh,56px);letter-spacing:6px;margin:4px 0}
.rs-stars i{font-style:normal;filter:grayscale(1);opacity:.35}.rs-stars i.on{filter:none;opacity:1}
.rs-note{font-size:13px;color:#8a6a3a;font-weight:700}
.rs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.rs-stats div{background:#fff;border-radius:14px;padding:8px 4px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.rs-stats b{display:block;font-size:clamp(20px,3.4vw,28px);color:#0f766e}.rs-stats span{font-size:12px;color:#6b7280;font-weight:700}
.rs-sec{text-align:left;font-size:14px;font-weight:900;margin:12px 0 6px;color:#5a3a12}
.rs-chars{display:flex;flex-wrap:wrap;gap:6px}
.rs-chars button{border:2px solid #e6d3a3;background:#fff;border-radius:12px;font:inherit;font-size:24px;font-weight:900;padding:2px 10px;cursor:pointer;color:var(--qx-ink);line-height:1.3}
.rs-chars button small{display:block;font-size:11px;color:#2c6fad;font-weight:700}
.rs-chars.miss button{border-color:#f3b3b3;background:#fff5f5;color:#c0392b}
.rs-cert{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0 10px}
.rs-cert input{font:inherit;font-size:16px;padding:10px 14px;border-radius:999px;border:2px solid #e6d3a3;width:min(220px,60vw);text-align:center}
.rs-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.rs-btns a{color:#6b7280;font-weight:800;font-size:14px;align-self:center}
@media (max-width:520px){.rs-stats{grid-template-columns:repeat(2,1fr)}.qx-btn{padding:12px 24px}}

/* 词库页更紧凑，让「单人游戏」按钮留在一屏内 */
#lexiconSetup .lex-box{padding-top:clamp(12px,2.4vh,26px);padding-bottom:clamp(12px,2.4vh,26px)}
#lexiconSetup .lex-title{margin-bottom:2px}
#lexiconSetup .lex-tab{padding:8px 10px}
#lexiconSetup .lex-tab-icon{display:none}
#lexiconSetup .lex-chip{padding-top:6px;padding-bottom:6px}
#lexiconSetup .lex-sub{margin-bottom:12px}
#lexiconSetup .lex-tabs{margin-bottom:14px}
#lexiconSetup .lex-section-label{margin-bottom:6px}
#lexiconSetup .lex-chips{margin-bottom:10px}
#lexiconSetup .lex-title{font-size:clamp(22px,3.4vh,28px)}
#lexiconSetup .lex-sub{display:none}
#lexiconSetup .lex-warning:empty{display:none}
#lexSummary{margin-bottom:4px!important}
.qx-modes{margin:2px 0 10px}
.qx-mode{padding:7px 12px;border-radius:12px}
.qx-mode b{font-size:15px;display:inline}.qx-mode span{display:block}
#lexiconSetup .lex-btns{margin-top:4px}
#lexiconSetup .lex-btns button{padding-top:12px;padding-bottom:12px}

/* 触屏：游戏按钮在右上角，「已学汉字」面板让开 */
@media (pointer:coarse){#learnedPanel{top:calc(clamp(58px,9.5vh,80px) + 48px)}}
/* 矮屏（手机横屏）：封面紧凑 */
#qxCover{justify-content:safe center}
@media (max-height:520px){
  #qxCover{gap:8px;padding-top:62px}
  .qx-heroes img{height:clamp(64px,17vh,96px)}
  .qx-title{font-size:clamp(34px,10vh,54px);-webkit-text-stroke-width:2px;text-shadow:0 4px 0 #5a2d0c}
  .qx-sub{font-size:14px;padding:4px 12px}
  .qx-steps{display:none}
  .qx-btn{padding:10px 26px;font-size:17px}
}