/* 牛夫子直覺道場（國中版）— 專用樣式
 * 疊在 style.css 與 theme-cow.css 之上，戰鬥區用牛夫子的深酒紅。 */
:root {
  --rx-dark: #3f161d;      /* 牛夫子斑塊的深酒紅 */
  --rx-dark2: #5c222b;
  --rx-gold: #f0c987;      /* 書本封面的暖黃 */
  --rx-hp: #e2607c;
  --rx-ok: #6fa04a;
}

.rx-wrap { max-width: 900px; margin: 0 auto; padding: 18px 16px 70px; }
.hide { display: none !important; }

/* ══════════ 選單 ══════════ */
.rx-hero {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(135deg, #fff 0%, var(--cow-pink-soft, #fdebef) 100%);
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; box-shadow: var(--shadow); margin: 14px 0 6px;
}
.rx-hero img { height: 112px; width: auto; flex: 0 0 auto; }
.rx-hero h1 { font-size: 1.75rem; margin: 0 0 4px; color: var(--cow-wine, #5c222b); }
.rx-hero p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }
.rx-hero .hi { color: var(--cow-wine, #5c222b); font-weight: 700; }

.rx-sec { font-size: 1.08rem; font-weight: 800; margin: 26px 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rx-sec small { font-weight: 400; font-size: .82rem; color: var(--ink-soft); }

/* 難度（五級） */
#diffCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rx-diff {
  border: 2.5px solid var(--line); background: #fff; border-radius: 14px;
  padding: 12px 12px 10px; cursor: pointer; text-align: center; font-family: inherit;
  transition: transform .12s, border-color .12s, box-shadow .12s; color: var(--ink);
}
.rx-diff:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(92,34,43,.12); }
.rx-diff.on { border-color: var(--cow-wine, #5c222b); background: var(--blue-soft); box-shadow: 0 6px 18px rgba(92,34,43,.16); }
.rx-diff .d-sec { font-size: 2rem; font-weight: 900; line-height: 1.05; color: var(--rx-dark); font-family: Consolas, monospace; }
.rx-diff .d-sec small { font-size: .85rem; font-weight: 700; margin-left: 2px; font-family: inherit; }
.rx-diff .d-name { font-weight: 800; font-size: 1rem; margin-top: 2px; }
.rx-diff .d-tag { font-size: .85rem; font-weight: 700; color: var(--cow-wine, #5c222b); }
.rx-diff .d-note { font-size: .78rem; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; }
.rx-diff .d-mul { font-size: .74rem; color: var(--ink-soft); margin-top: 6px; opacity: .85; }

/* 範圍 */
#scopeCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.rx-scope {
  border: 2.5px solid var(--line); background: #fff; border-radius: 14px; padding: 11px 14px;
  cursor: pointer; text-align: left; font-family: inherit; color: var(--ink);
  transition: border-color .12s, background .12s;
}
.rx-scope:hover { border-color: var(--cow-pink, #f7a8b8); }
.rx-scope.on { border-color: var(--purple); background: var(--purple-soft); }
.rx-scope .s-name { font-weight: 800; font-size: 1rem; }
.rx-scope .s-desc { font-size: .8rem; color: var(--ink-soft); margin-top: 2px; }
#scopePick {
  margin-top: 10px; background: var(--purple-soft); border: 1px solid var(--cow-pink-line, #f6d2da);
  border-radius: 12px; padding: 10px 12px;
}
#scopePick label { font-weight: 700; font-size: .92rem; }
#scopePick > label { margin-right: 6px; }

/* 單元複選 */
.pick-head {
  display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 700;
  margin-bottom: 8px; flex-wrap: wrap;
}
.pick-head b { color: var(--purple); font-size: 1.05rem; }
.pick-acts { margin-left: auto; display: flex; gap: 6px; }
.pick-acts button {
  border: 1.5px solid var(--cow-pink, #f7a8b8); background: #fff; color: var(--purple);
  border-radius: 999px; padding: 3px 12px; font-size: .8rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.pick-acts button:hover { background: var(--cow-pink-soft, #fdebef); }
.pick-sem { display: grid; grid-template-columns: 104px 1fr; gap: 6px 8px; align-items: start; margin: 5px 0; }
.ps-name {
  font-size: .8rem; font-weight: 800; color: var(--ink-soft); text-align: left;
  background: transparent; border: 1.5px dashed var(--cow-pink, #f7a8b8); border-radius: 8px;
  padding: 4px 6px; cursor: pointer; font-family: inherit;
}
.ps-name:hover { color: var(--purple); }
.ps-name.on { background: var(--purple); color: #fff; border-style: solid; border-color: var(--purple); }
.ps-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ps-chip {
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px;
  padding: 3px 11px; font-size: .82rem; cursor: pointer; font-family: inherit; color: var(--ink-soft);
}
.ps-chip:hover { border-color: var(--purple); color: var(--purple); }
.ps-chip.on { background: var(--purple); border-color: var(--purple); color: #fff; font-weight: 700; }
.ps-chip small { margin-left: 3px; opacity: .7; font-size: .72em; }
.rx-go.off { filter: grayscale(1) opacity(.5); cursor: not-allowed; }
#gradeBtns { display: flex; gap: 8px; flex-wrap: wrap; }
.rx-grade {
  border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 18px;
  cursor: pointer; font-family: inherit; font-weight: 700; color: var(--ink); font-size: .95rem;
}
.rx-grade small { display: block; font-weight: 400; font-size: .72rem; color: var(--ink-soft); }
.rx-grade.on { border-color: var(--purple); background: #fff; color: var(--purple); }

/* 題型 */
#catChips { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.rx-chip {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 10px;
  align-items: center; text-align: left; font-family: inherit; color: var(--ink);
  border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 14px; cursor: pointer;
}
.rx-chip .c-ic { grid-row: 1 / 3; font-size: 1.5rem; }
.rx-chip .c-nm { font-weight: 800; font-size: .98rem; }
.rx-chip .c-ds { font-size: .8rem; color: var(--ink-soft); }
.rx-chip.on { border-color: var(--green); background: var(--green-soft); }
.rx-chip:not(.on) { opacity: .5; }
.rx-chip.dead { opacity: .32; cursor: not-allowed; background: #faf7f5; border-style: dashed; }
.rx-chip.dead .c-ds { color: var(--red); }

/* 摘要 */
.rx-setup {
  margin: 18px 0 0; padding: 10px 14px; border-radius: 10px;
  background: #f7f1ec; border: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft);
}
.rx-setup b { color: var(--ink); }
.rx-setup .warn-src { color: #a15c12; font-weight: 700; }

.rx-go {
  display: block; width: 100%; margin: 22px 0 8px; padding: 16px;
  background: linear-gradient(135deg, var(--rx-dark2), #8e3b62); color: #fff; border: none;
  border-radius: 14px; font-size: 1.2rem; font-weight: 800; cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 18px rgba(92,34,43,.3);
}
.rx-go:hover { filter: brightness(1.1); }
.rx-hint { text-align: center; color: var(--ink-soft); font-size: .84rem; }

/* 怪物陣容 */
.rx-lineup { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.rx-lineup .lu {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px;
  text-align: center; box-shadow: var(--shadow); min-width: 132px;
}
.rx-lineup .lu img { width: 84px; height: 84px; object-fit: contain; display: block; margin: 0 auto 4px; }
.rx-lineup .lu-n { font-weight: 800; font-size: .92rem; }
.rx-lineup .lu-h { font-size: .78rem; color: var(--red); font-weight: 700; }
.rx-lineup .lu-q { font-size: .74rem; color: var(--ink-soft); }
.rx-lineup .lu-ar { color: var(--ink-soft); font-size: 1.2rem; }

/* 紀錄 */
table.rx-rec { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; }
table.rx-rec th, table.rx-rec td { border: 1px solid var(--line); padding: 7px 10px; text-align: center; }
table.rx-rec th { background: var(--blue-soft); color: var(--cow-wine, #5c222b); }
table.rx-rec td:first-child { text-align: left; font-weight: 700; white-space: nowrap; }
table.rx-rec td.rec-scope { font-size: .82rem; color: var(--ink-soft); }

.rx-life { margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.rx-life b { display: block; margin-bottom: 8px; }
.lf { display: grid; grid-template-columns: 140px 1fr; gap: 4px 10px; align-items: center; margin: 6px 0; font-size: .85rem; }
.lf-n { font-weight: 700; }
.lf-bar { height: 9px; background: var(--line); border-radius: 999px; overflow: hidden; }
.lf-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--green)); }
.lf-v { grid-column: 2; color: var(--ink-soft); font-size: .78rem; }

/* ══════════ 戰鬥 ══════════ */
.rx-arena {
  background: linear-gradient(180deg, var(--rx-dark) 0%, var(--rx-dark2) 100%);
  border-radius: 20px; padding: 16px 18px 20px; color: #f7ece6;
  box-shadow: 0 10px 30px rgba(63,22,29,.32); margin-top: 10px;
}
.rx-arena.shake { animation: rxshake .4s; }
@keyframes rxshake {
  0%,100% { transform: translateX(0); }
  15% { transform: translateX(-10px); } 30% { transform: translateX(9px); }
  45% { transform: translateX(-7px); }  60% { transform: translateX(5px); }
  80% { transform: translateX(-3px); }
}

.rx-topline { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: #d8bcc2; }
.rx-topline button {
  background: transparent; border: 1px solid #7d4a53; color: #d8bcc2; border-radius: 999px;
  padding: 2px 12px; font-size: .78rem; cursor: pointer; font-family: inherit;
}
.rx-topline button:hover { color: #fff; border-color: #c99aa3; }

#monBox { position: relative; text-align: center; padding: 6px 0 2px; }
.mon-stage { display: inline-block; position: relative; line-height: 0; padding: 4px 20px 12px; }
.mon-stage::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 300px; height: 210px;
  transform: translate(-50%, -48%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(247,168,184,.24), rgba(247,168,184,0) 70%);
}
.mon-stage::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 190px; height: 18px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.5), rgba(0,0,0,0) 72%);
}
#monImg {
  position: relative; z-index: 1;
  height: 168px; width: auto; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
  transition: opacity .5s, transform .5s;
}
#monImg.hit { animation: rxhit .38s; }
@keyframes rxhit {
  0%   { transform: translateX(0) scale(1); }
  20%  { transform: translateX(-12px) scale(1.05); filter: sepia(1) saturate(7) hue-rotate(-40deg) drop-shadow(0 0 12px rgba(226,96,124,.9)); }
  50%  { transform: translateX(10px) scale(.97); filter: sepia(.7) saturate(5) hue-rotate(-40deg); }
  100% { transform: translateX(0) scale(1); }
}
#monImg.dead { opacity: 0; transform: scale(.6) rotate(12deg); }
#monImg.spawn { animation: rxspawn .5s; }
@keyframes rxspawn { from { opacity: 0; transform: translateY(-24px) scale(.8); } to { opacity: 1; } }

.mon-meta { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; }
#monName { font-weight: 800; font-size: 1rem; color: var(--rx-gold); }
#monQuip { font-size: .78rem; color: #c8a9b0; }
.mon-hp { max-width: 460px; margin: 6px auto 0; }
.mon-hp .bar { height: 12px; background: #2a0e13; border-radius: 999px; overflow: hidden; border: 1px solid #6e404a; }
.mon-hp .bar i { display: block; height: 100%; background: linear-gradient(90deg, #e2607c, #f0c987); transition: width .35s; }
#monHpTxt { font-size: .74rem; color: #c8a9b0; text-align: right; display: block; margin-top: 2px; }

.rx-float {
  position: absolute; top: 42%; font-weight: 900; font-size: 1.5rem; color: var(--rx-gold);
  text-shadow: 0 2px 6px rgba(0,0,0,.6); animation: rxfloat 1s ease-out forwards; pointer-events: none;
}
.rx-float.kill { color: #a8dda0; font-size: 1.25rem; }
@keyframes rxfloat {
  from { opacity: 1; transform: translateY(0) scale(.8); }
  to { opacity: 0; transform: translateY(-70px) scale(1.25); }
}

#timerWrap { margin: 12px 0 4px; display: flex; align-items: center; gap: 10px; }
#timerWrap .track { flex: 1; height: 14px; background: #2a0e13; border-radius: 999px; overflow: hidden; border: 1px solid #6e404a; }
#timerFill { height: 100%; width: 100%; background: linear-gradient(90deg, #8fc97a, #58c3b0); }
#timerNum { font-family: Consolas, monospace; font-weight: 800; font-size: 1.05rem; min-width: 52px; text-align: right; color: #b7e2a8; }
#timerWrap.warn #timerFill { background: linear-gradient(90deg, #f0c987, #e79a4e); }
#timerWrap.warn #timerNum { color: #f5d9a3; }
#timerWrap.danger #timerFill { background: linear-gradient(90deg, #e2607c, #e08a4e); }
#timerWrap.danger #timerNum { color: #f3aab8; animation: rxblink .5s infinite; }
@keyframes rxblink { 50% { opacity: .35; } }

.rx-qcard {
  background: #fff; color: var(--ink); border-radius: 14px; padding: 16px 18px; margin-top: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
#qCat {
  display: inline-block; font-size: .76rem; font-weight: 800; color: #fff;
  background: var(--cow-wine, #5c222b); border-radius: 999px; padding: 2px 12px; margin-bottom: 8px;
}
#qCat .q-ch {
  margin-left: 8px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.45);
  font-weight: 600; opacity: .92;
}
#qText { font-size: 1.3rem; font-weight: 700; line-height: 1.65; }
#qText .katex { font-size: 1.2em; }

#choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.rx-opt {
  display: flex; align-items: center; gap: 10px; text-align: left; font-family: inherit;
  background: #fff; border: 2px solid #e6d8d3; border-radius: 12px; padding: 12px 14px;
  cursor: pointer; font-size: 1.02rem; color: var(--ink); min-height: 58px;
  transition: border-color .1s, background .1s, transform .1s;
}
.rx-opt:hover { border-color: var(--cow-wine, #5c222b); background: var(--blue-soft); transform: translateY(-1px); }
.rx-opt .k {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: #f3ebe8; color: #8a7378;
  font-size: .8rem; font-weight: 800; display: grid; place-items: center;
}
.rx-opt .v { flex: 1; }
.rx-opt .katex { font-size: 1.08em; }
.rx-opt.done { cursor: default; pointer-events: none; }
.rx-opt.right { border-color: var(--rx-ok); background: var(--green-soft); }
.rx-opt.right .k { background: var(--rx-ok); color: #fff; }
.rx-opt.wrong { border-color: var(--rx-hp); background: #fdf0f2; opacity: .85; }
.rx-opt.wrong .k { background: var(--rx-hp); color: #fff; }
.rx-opt.done:not(.right):not(.wrong) { opacity: .45; }

.rx-fb { display: none; margin-top: 12px; border-radius: 12px; padding: 12px 16px; font-size: .93rem; }
.rx-fb.show { display: block; animation: rxpop .18s; }
@keyframes rxpop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
.rx-fb.ok { background: var(--green-soft); border: 1px solid #cfe3bd; color: #3c5f28; }
.rx-fb.no { background: #fdf0f2; border: 1px solid #f6ccd4; color: #8d2a41; }
.rx-fb .fb-h { font-weight: 800; display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.rx-fb .fb-t { font-weight: 600; font-size: .86rem; opacity: .85; }
.rx-fb .fb-bonus { font-size: .82rem; background: #fdf1dc; color: #8a5a15; border-radius: 999px; padding: 1px 10px; }
.rx-fb .fb-tip { margin-top: 5px; color: #4a3a3e; font-size: .88rem; line-height: 1.65; }
.rx-fb .fb-next {
  margin-top: 10px; background: #8d2a41; color: #fff; border: none; border-radius: 9px;
  padding: 7px 18px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: .88rem;
}

.rx-hud {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px;
  font-size: .86rem; color: #e0cdd2;
}
.rx-hud .hp { color: #f08ba0; font-size: 1.1rem; letter-spacing: 1px; }
.rx-hud .hp.off { color: #6b4149; }
.rx-hud .box { background: rgba(255,255,255,.08); border-radius: 8px; padding: 3px 12px; }
#hudScore { font-family: Consolas, monospace; font-weight: 800; color: var(--rx-gold); font-size: 1rem; }
#hudCombo.hot { color: var(--rx-gold); font-weight: 800; }
.rx-hud .grow { flex: 1; min-width: 100px; }
#hudProgBar { height: 6px; background: #2a0e13; border-radius: 999px; overflow: hidden; }
#hudProgFill { height: 100%; background: var(--cow-pink, #f7a8b8); transition: width .3s; }

/* ══════════ 結算 ══════════ */
.rx-end-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.end-cow { height: 132px; width: auto; }
.end-rank { font-size: .95rem; font-weight: 800; color: var(--purple); }
.end-cond { font-weight: 600; font-size: .82rem; color: var(--ink-soft); }
.end-score { font-size: 2.4rem; font-weight: 900; line-height: 1.15; }
.end-word { color: var(--ink-soft); font-size: .93rem; max-width: 460px; }
.rx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 16px 0; }
.rx-stats > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; }
.rx-stats b { display: block; font-size: 1.3rem; }
.rx-stats span { font-size: .78rem; color: var(--ink-soft); }
.rx-h3 { font-size: 1.05rem; margin: 24px 0 10px; }

.rx-diag { display: grid; gap: 10px; }
.dg { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.dg.good { border-left-color: var(--green); }
.dg.mid  { border-left-color: var(--amber); }
.dg.bad  { border-left-color: var(--red); }
.dg-n { font-weight: 800; font-size: .95rem; }
.dg-bar { height: 9px; background: #f3ebe8; border-radius: 999px; overflow: hidden; margin: 6px 0 4px; }
.dg.good .dg-bar i { background: var(--green); }
.dg.mid .dg-bar i  { background: var(--amber); }
.dg.bad .dg-bar i  { background: var(--red); }
.dg-bar i { display: block; height: 100%; }
.dg-v { font-size: .8rem; color: var(--ink-soft); }

.rx-chdiag { display: grid; gap: 8px; }
.chd {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--amber);
  border-radius: 12px; padding: 10px 14px;
}
.chd-n { font-weight: 800; font-size: .95rem; }
.chd-v { font-size: .82rem; color: var(--ink-soft); }
.chd-go { margin-left: auto; font-size: .85rem; font-weight: 700; color: var(--cow-wine, #5c222b); text-decoration: none; }
.chd-go:hover { text-decoration: underline; }

.rx-wrongs { display: grid; gap: 10px; }
.wr { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.wr-c { font-size: .8rem; color: var(--ink-soft); font-weight: 700; display: flex; gap: 8px; align-items: center; }
.wr-to { background: #fdf1dc; color: #8a5a15; border-radius: 999px; padding: 1px 9px; font-size: .74rem; }
.wr-x  { background: #fdf0f2; color: #8d2a41; border-radius: 999px; padding: 1px 9px; font-size: .74rem; }
.wr-ch { margin-left: auto; font-weight: 600; color: var(--ink-soft); font-size: .78rem; }
.wr-q { font-weight: 700; margin: 5px 0 3px; }
.wr-a { color: var(--green); font-weight: 700; font-size: .92rem; }
.wr-t { color: var(--ink-soft); font-size: .86rem; margin-top: 3px; line-height: 1.6; }
.rx-none { color: var(--ink-soft); }

.rx-endbtns { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.rx-endbtns button {
  flex: 1; min-width: 150px; padding: 13px; border-radius: 12px; border: none; cursor: pointer;
  font-weight: 800; font-size: 1rem; font-family: inherit;
}
#btnAgain { background: var(--purple); color: #fff; }
#btnMenu { background: #fff; color: var(--ink); border: 2px solid var(--line); }

/* ══════════ 手機 ══════════ */
@media (max-width: 560px) {
  .rx-wrap { padding: 12px 10px 60px; }
  .rx-hero img { height: 84px; }
  .rx-hero h1 { font-size: 1.4rem; }
  .rx-arena { padding: 10px 12px 14px; border-radius: 16px; }
  .rx-topline { font-size: .74rem; }
  .rx-topline button { padding: 2px 9px; font-size: .72rem; }
  #monBox { padding: 2px 0 0; }
  .mon-stage { padding: 0 12px 8px; }
  .mon-stage::before { width: 190px; height: 130px; }
  .mon-stage::after { width: 120px; height: 12px; }
  #monImg { height: 96px; }
  #monQuip { display: none; }
  #monName { font-size: .9rem; }
  .mon-hp .bar { height: 9px; }
  #timerWrap { margin: 8px 0 2px; }
  .rx-qcard { padding: 12px 14px; }
  #qCat { margin-bottom: 5px; }
  #qCat .q-ch { display: none; }
  #qText { font-size: 1.05rem; }
  #choices { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  .rx-opt { min-height: 46px; padding: 9px 12px; font-size: .97rem; }
  .rx-hud { margin-top: 10px; gap: 10px; font-size: .8rem; }
  #diffCards { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
  .rx-diff { padding: 9px 8px; }
  .rx-diff .d-sec { font-size: 1.5rem; }
  .rx-diff .d-note, .rx-diff .d-mul { display: none; }
  .rx-lineup .lu { min-width: 100px; padding: 8px; }
  .rx-lineup .lu img { width: 62px; height: 62px; }
  .rx-lineup .lu-q { display: none; }
  table.rx-rec { font-size: .8rem; }
  table.rx-rec th, table.rx-rec td { padding: 5px 6px; }
  table.rx-rec td.rec-scope, table.rx-rec th:last-child { display: none; }
  .end-cow { height: 96px; }
  .end-score { font-size: 1.9rem; }
  .lf { grid-template-columns: 1fr; }
  .lf-v { grid-column: 1; }
  .chd-go { margin-left: 0; }
  .pick-sem { grid-template-columns: 1fr; }
  .ps-name { display: inline-block; }
  .ps-chip { font-size: .78rem; padding: 3px 9px; }
}

/* 補充題開關與標記 */
.rx-ext{display:flex;gap:8px;align-items:flex-start;margin:10px 2px 0;padding:9px 12px;border-radius:10px;
  font-size:.9rem;line-height:1.55;color:#6b4a10;background:#fdf6e3;border:1px dashed #e0c070;cursor:pointer}
.rx-ext input{margin-top:4px;flex:none}
.q-ext{color:#8a5a12;background:#fdf0d2;border:1px solid #e8c77e;border-radius:999px;padding:0 7px;font-size:.78em}

/* ── 雲端：帳號與排行榜 ── */
.rx-cloud{background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:6px}
.rx-cloud.end{margin:10px 0 4px;font-size:.95rem;line-height:1.8;background:var(--purple-soft)}
.rx-cloud.end b{color:var(--cow-wine,#5c222b)}
.cl-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.cl-row label{font-weight:700;color:var(--ink-soft)}
.cl-row input{flex:1 1 220px;min-width:0;padding:8px 11px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem}
.cl-row input:focus{outline:none;border-color:var(--cow-pink,#f7a8b8)}
.cl-row button{padding:8px 14px;border-radius:10px;border:1.5px solid var(--cow-wine,#5c222b);background:var(--cow-wine,#5c222b);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.cl-row button:disabled{opacity:.5;cursor:default}
.cl-row button.cl-out{background:#fff;color:var(--ink-soft);border-color:var(--line);font-weight:400}
.cl-who{flex:1 1 auto;font-weight:700}
.cl-mail{font-weight:400;color:var(--ink-soft);word-break:break-all}
.cl-note{font-size:.85rem;color:var(--ink-soft);line-height:1.6}
.bd-tabs{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:10px}
.bd-kind,.bd-diff{display:flex;flex-wrap:wrap;gap:6px}
.bd-tabs button{padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:inherit;font-size:.88rem;cursor:pointer;color:var(--ink)}
.bd-tabs button small{display:block;font-size:.68rem;color:var(--ink-soft);line-height:1.1}
.bd-kind button.on{background:var(--cow-wine,#5c222b);border-color:var(--cow-wine,#5c222b);color:#fff}
.bd-diff button.on{background:var(--purple-soft);border-color:var(--purple);color:var(--purple)}
.bd-diff button.on small{color:var(--purple)}
.bd-body{overflow-x:auto}
.bd-tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.bd-tbl th{text-align:left;font-size:.78rem;color:var(--ink-soft);font-weight:700;padding:4px 8px;border-bottom:1.5px solid var(--line)}
.bd-tbl td{padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.bd-tbl td:first-child{width:2.6em;font-weight:800;text-align:center}
.bd-tbl .bd-s{font-family:Consolas,monospace;font-weight:800;color:var(--rx-dark)}
.bd-tbl .bd-sc{color:var(--ink-soft);font-size:.82rem;white-space:normal}
.bd-tbl tr.me td{background:var(--purple-soft)}
.bd-me{margin-left:6px;font-size:.72rem;background:var(--purple);color:#fff;border-radius:999px;padding:1px 7px;vertical-align:middle}
.bd-new{margin-left:8px;font-size:.8rem;color:#fff;background:var(--rx-hp);border-radius:999px;padding:1px 8px;vertical-align:middle}
.bd-diff button.sum{border-style:dashed}
.bd-diff button.on.sum{border-style:solid}
/* 手機：隱藏「連擊」與「範圍」，留下名次／暱稱／分數／正確率／場次 */
@media (max-width:560px){
  .bd-tbl:not(.sum) th:nth-child(5),.bd-tbl:not(.sum) td:nth-child(5),
  .bd-tbl:not(.sum) th:nth-child(7),.bd-tbl:not(.sum) td:nth-child(7){display:none}
}

/* 看圖反射：題目裡的幾何圖 */
.q-fig{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;margin:0 auto 10px;max-width:340px}
.q-fig > svg{width:100%;height:auto;display:block}
.q-ask{font-size:1.02rem;line-height:1.6}
@media (max-width:560px){.q-fig{max-width:100%}}