/* ============================================================
   法途·山海之间 —— 宪法赛道样式
   闯关 / 擂台 / 宣誓 / 讲宪法
   ============================================================ */

/* ── 宪法屏 ── */
#conScreen{
  background:
    radial-gradient(1200px 620px at 50% -10%, rgba(198,60,48,.13), transparent 60%),
    var(--bg, #14110d);
  padding:0;
}
/* 宪法用朱红，与主作品暖金形成区分（庄重感） */
.con-red{ color:#C63C30; }

.con-body{ padding:26px 20px 90px; max-width:940px; width:100%; margin:0 auto; box-sizing:border-box; }

.con-topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 20px;
  border-bottom:1px solid rgba(198,60,48,.24);
  background:rgba(20,17,13,.75);
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:20;
}
.con-brand{ font-size:.82rem; letter-spacing:.12em; color:#E4572E; font-weight:700; }
.con-brand span{ color:var(--text-3, #8d9aa3); font-weight:400; }

/* ── 主页卡片 ── */
.con-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:22px 0; }
.con-card{
  display:flex; flex-direction:column; gap:8px;
  text-align:left; cursor:pointer; font-family:inherit;
  padding:20px; border-radius:10px; position:relative; overflow:hidden;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(198,60,48,.28);
  color:var(--text-2, #c9c0b2); transition:.2s;
}
.con-card:hover{ border-color:#E4572E; background:rgba(198,60,48,.09); transform:translateY(-2px); }
.con-card-ic{
  position:absolute; top:14px; right:16px;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(198,60,48,.16); color:#E4572E;
  font-family:var(--serif, Georgia, serif); font-size:1.1rem; font-weight:700;
}
.con-card-t{ font-size:1.02rem; font-weight:700; color:var(--text, #efe9dd); }
.con-card-d{ font-size:.84rem; line-height:1.8; flex:1; }
.con-card-m{ font-size:.74rem; color:var(--text-4, #778892); letter-spacing:.04em; }

.con-alt{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin:18px 0; }
.con-alt-btn{
  display:flex; flex-direction:column; gap:5px; text-align:left;
  cursor:pointer; font-family:inherit; padding:15px 17px;
  background:rgba(255,255,255,.022);
  border:1px dashed rgba(198,60,48,.34);
  border-radius:9px; color:var(--text-2, #c9c0b2); transition:.18s;
}
.con-alt-btn:hover{ border-style:solid; border-color:#E4572E; background:rgba(198,60,48,.08); }
.con-alt-btn b{ font-size:.94rem; color:var(--text, #efe9dd); }
.con-alt-btn span{ font-size:.78rem; color:var(--text-4, #778892); }

/* ── 闯关 ── */
.con-progbar{ height:4px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:20px; }
.con-progbar i{ display:block; height:100%; background:#E4572E; transition:width .35s; }

.con-q{ margin-bottom:18px; }
.con-q-no{ font-size:.72rem; letter-spacing:.2em; color:#E4572E; font-weight:700; margin-bottom:9px; }
.con-q-t{ font-size:1rem; line-height:1.9; color:var(--text, #efe9dd); }

.con-opts{ display:grid; gap:9px; margin-bottom:18px; }
.con-opt{
  display:flex; align-items:flex-start; gap:12px; width:100%;
  cursor:pointer; font-family:inherit; text-align:left;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.11);
  border-radius:8px; padding:14px 16px; min-height:48px;
  color:var(--text-2, #c9c0b2); font-size:.88rem; line-height:1.75;
  transition:.18s; position:relative;
}
.con-opt:hover:not([disabled]){ background:rgba(198,60,48,.1); border-color:#E4572E; color:var(--text, #efe9dd); }
.con-opt[disabled]{ cursor:default; }
.con-opt.sel{ background:rgba(240,183,63,.11); border-color:var(--gold, #F0B73F); }
.con-opt.correct{ background:rgba(155,196,155,.13); border-color:#9BC49B; }
.con-opt.wrong{ background:rgba(198,60,48,.14); border-color:#E4572E; }
.con-opt.dim{ opacity:.42; }
.con-opt-k{
  flex:0 0 24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:.74rem; font-weight:700;
  background:rgba(198,60,48,.18); color:#E4572E;
}
.con-opt.correct .con-opt-k{ background:#9BC49B; color:#1a1510; }
.con-opt.wrong .con-opt-k{ background:#E4572E; color:#fff; }
.con-opt-t{ flex:1; }
.con-opt-mk{
  flex:0 0 auto; font-size:.68rem; letter-spacing:.08em;
  padding:2px 8px; border-radius:9px; align-self:center;
  background:rgba(255,255,255,.1); color:var(--text-2, #c9c0b2);
}
.con-opt.correct .con-opt-mk{ background:#9BC49B; color:#1a1510; }

/* ── 答题反馈 ── */
.con-fb{
  margin:18px 0; padding:18px; border-radius:10px;
  background:rgba(255,255,255,.026);
  border:1px solid rgba(255,255,255,.09);
  border-left:3px solid var(--text-4, #778892);
}
.con-fb.ok{ border-left-color:#9BC49B; }
.con-fb.no{ border-left-color:#E4572E; }
.con-fb-head{ font-size:.86rem; font-weight:700; margin-bottom:14px; letter-spacing:.06em; }
.con-fb.ok .con-fb-head{ color:#9BC49B; }
.con-fb.no .con-fb-head{ color:#E4572E; }
.con-fb-x{ font-size:.86rem; line-height:1.95; color:var(--text-2, #c9c0b2); margin-top:12px; }
.con-fb-x b{ color:var(--text, #efe9dd); }
.con-mis{
  margin-top:12px; padding:12px 14px; border-radius:6px;
  background:rgba(198,60,48,.07);
  font-size:.83rem; line-height:1.85; color:var(--text-2, #c9c0b2);
}
.con-mis b{ color:#E4572E; }

.con-hud{
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
  margin-top:22px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.8rem; color:var(--text-4, #778892);
}
.con-hud b{ color:var(--gold, #F0B73F); font-size:.95rem; }

/* ── 结果 ── */
.con-result{ text-align:center; padding:26px 20px; margin-bottom:24px; }
.con-grade{
  font-family:var(--serif, Georgia, serif);
  font-size:1.7rem; font-weight:700; color:#E4572E;
  letter-spacing:.14em; margin-bottom:12px;
}
.con-score{
  font-family:var(--serif, Georgia, serif);
  font-size:3rem; font-weight:700; color:var(--text, #efe9dd); line-height:1;
}
.con-score span{ font-size:1rem; color:var(--text-3, #8d9aa3); margin-left:6px; }
.con-result-sub{ margin-top:12px; font-size:.82rem; color:var(--text-3, #8d9aa3); }

.con-wrong{
  padding:16px; margin-bottom:12px; border-radius:8px;
  background:rgba(255,255,255,.024);
  border:1px solid rgba(255,255,255,.08);
}
.con-wrong-q{ font-size:.86rem; line-height:1.8; color:var(--text-2, #c9c0b2); margin-bottom:9px; }
.con-wrong-a{ font-size:.84rem; color:#9BC49B; margin-bottom:12px; line-height:1.75; }

/* ── 宣誓 ── */
.con-pledge{ display:flex; justify-content:center; margin:24px 0; }
.con-pledge-paper{
  max-width:560px; width:100%; padding:26px 24px;
  background:linear-gradient(175deg, #f6f1e6, #ebe3d3);
  color:#3a2f24; border-radius:4px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  border-top:6px solid #C63C30;
  position:relative;
}
.con-pledge-title{
  text-align:center; font-family:var(--serif, Georgia, serif);
  font-size:1.05rem; font-weight:700; letter-spacing:.1em;
  color:#8c2a20; margin-bottom:16px;
}
.con-pledge-text{ font-size:.95rem; line-height:2.1; text-align:justify; }
.con-pledge-sign{ margin-top:20px; text-align:right; font-size:.86rem; color:#6b5a48; }

.con-pledge-stage{ margin-top:18px; }
.con-pstage{
  padding:24px; border-radius:10px;
  background:linear-gradient(180deg, rgba(198,60,48,.16), rgba(198,60,48,.05));
  border:1px solid rgba(198,60,48,.4);
}
.con-pstage-flag{
  font-size:.78rem; letter-spacing:.14em; color:#E4572E;
  text-align:center; margin-bottom:10px; font-weight:700;
}
.con-pstage-hand{
  text-align:center; font-size:.84rem; color:var(--text-2, #c9c0b2); margin-bottom:18px;
}
.con-pstage-word{
  font-family:var(--serif, Georgia, serif);
  font-size:1.02rem; line-height:2.2; text-align:center;
  color:var(--text, #efe9dd); padding:16px;
  border-top:1px solid rgba(198,60,48,.3);
  border-bottom:1px solid rgba(198,60,48,.3);
}
.con-pstage-hint{ text-align:center; margin-top:16px; font-size:.8rem; color:var(--text-4, #778892); }

/* ── 讲宪法 ── */
.con-field{ margin-bottom:20px; }
.con-field label{
  display:block; font-size:.8rem; font-weight:700;
  color:#E4572E; letter-spacing:.06em; margin-bottom:9px;
}
.con-field textarea{
  width:100%; box-sizing:border-box; resize:vertical;
  font-family:inherit; font-size:.9rem; line-height:1.85;
  padding:13px 15px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px; color:var(--text, #efe9dd);
}
.con-field textarea:focus{ outline:none; border-color:#E4572E; box-shadow:0 0 0 3px rgba(198,60,48,.16); }
.con-field-tip{ margin-top:7px; font-size:.76rem; color:var(--text-4, #778892); line-height:1.75; }

.con-outline{ display:grid; gap:12px; }
.con-ol-item{
  padding:16px; border-radius:8px;
  background:rgba(255,255,255,.026);
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid rgba(198,60,48,.5);
  font-size:.87rem; line-height:1.9; color:var(--text-2, #c9c0b2);
}
.con-ol-item b{ color:var(--gold, #F0B73F); }
.con-ol-k{
  display:block; font-size:.72rem; letter-spacing:.14em;
  color:#E4572E; font-weight:700; margin-bottom:8px;
}
.con-ol-tip{ margin-top:9px; font-size:.78rem; color:var(--text-4, #778892); line-height:1.8; }

/* ── 响应式 ── */
@media (max-width:640px){
  .con-body{ padding:18px 14px 70px; }
  .con-grid, .con-alt{ grid-template-columns:1fr; }
  .con-score{ font-size:2.4rem; }
  .con-result{ padding:20px 12px; }
  .con-pledge-paper{ padding:20px 18px; }
  .con-pledge-text{ font-size:.88rem; line-height:2; }
  .con-brand{ font-size:.74rem; }
}

@media (prefers-reduced-motion:reduce){
  .con-card, .con-opt, .con-alt-btn, .con-progbar i{ transition:none; }
  .con-card:hover{ transform:none; }
}