/* 熊乾淨 card faces — follows the 2026 redesign (28 faces, 63 × 88 mm).
   Cards keep their printed palette in both themes, like physical cards on a table.
   All sizes inside a card are in cqw so one card renders at any width. */
:root{
  --c-water:#2A78AE; --c-small:#AE7019; --c-mid:#0E7E85; --c-large:#7A3F86;
  --c-gold:#B4822F; --c-navy:#2C4672; --c-red:#A83A47; --c-teal:#2F7B80; --c-mint:#E7F2EF;
  --c-y:#E6C55A; --c-g:#5FA673; --c-w:#DCDFE4; --c-p:#9C6CB9;
  --c-ink:#24262E; --c-mute:#5C5F6A; --c-cream:#FAF1E2; --c-grey:#F1F2F4; --c-paper:#FFFFFF;
  --c-blood:#D63B32; --c-mem:#D9CFE6; --c-arrow:#3E6FB3; --c-dot:#2E8A8C; --c-pdot:#6A2F72;
}
.tc{container-type:inline-size;width:100%;position:relative;display:flex;flex-direction:column}
.tc>.tf{flex:1}
.hc{display:flex;flex-direction:column}.hc>.tc{flex:1}
/* Card type scale, shared by all 28 faces (cqw = 1% of card width):
   eyebrow 5 · code 5 · title 11 · english 4.4 · body 6.4 · label 6.4 bold · answer box 5.4 · footer 4.2 */
.tf{--fs-eb:5cqw;--fs-title:11cqw;--fs-en:4.4cqw;--fs-body:6.4cqw;--fs-box:5.4cqw;--fs-ft:4.2cqw}
.tf{min-height:139.7cqw;width:100%;border-radius:5cqw;overflow:hidden;display:flex;flex-direction:column;
  font-family:"Noto Sans TC",system-ui,"PingFang TC","Microsoft JhengHei",sans-serif;color:var(--c-ink);background:var(--c-paper);
  border:.9cqw solid var(--c);text-align:left;line-height:1.35;position:relative}
.tf *{margin:0}
.tf .eb{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;font-size:var(--fs-eb);font-weight:700;letter-spacing:.02em}
.tf .eb .cd{font-size:var(--fs-eb);letter-spacing:0}
.tf .nm{font-size:var(--fs-title);font-weight:900;line-height:1.15;letter-spacing:.01em}
.tf .en{font-size:var(--fs-en);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.tf .tx{font-size:var(--fs-body);color:var(--c-ink);line-height:1.45}
.tf .box{margin-top:auto;border-radius:3cqw;background:var(--c-grey);padding:3cqw 3.5cqw;font-size:var(--fs-box);font-weight:700;color:var(--c);min-height:13cqw;line-height:1.45}
.tf .box.hide{visibility:hidden}
.tf .ft{display:flex;justify-content:space-between;font-size:var(--fs-ft);font-weight:700;padding:2.4cqw 6cqw 3cqw;color:var(--c-ink)}
.tf svg{display:block;width:100%;height:auto}

/* toxin: graded color block */
.tf.tox .hd{background:var(--c);color:#fff;padding:5cqw 6cqw 4.5cqw;display:grid;gap:1.6cqw}
.tf.tox .bd{flex:1;padding:4.5cqw 6cqw 0;display:flex;flex-direction:column;gap:2cqw;min-height:0}
.tf.tox .row{display:flex;align-items:center;justify-content:space-between;gap:3cqw}
.tf.tox .gr{width:19cqw;height:19cqw;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:9cqw;font-weight:900;flex:none}
.tf.tox .ic{width:42cqw}
.tf.tox .gl{font-size:var(--fs-body);line-height:1.3;font-weight:700;color:var(--c);margin-top:-1cqw}

/* toxin category label and description: 3× the original size */
.tf.tox .gl{margin-top:0}

/* mechanism: gold rail */
.tf.mech{border-left-width:3.4cqw}
.tf.mech .bd{flex:1;padding:5cqw 5.5cqw 0;display:flex;flex-direction:column;gap:1.8cqw;min-height:0}
.tf.mech .eb,.tf.mech .en{color:var(--c)}
.tf.mech .art{background:var(--c-cream);border-radius:4cqw;padding:2cqw 3cqw 1.5cqw;margin-block:1.5cqw}

/* mode: navy header + circuit */
.tf.mode .hd{background:var(--c);color:#fff;padding:3.6cqw 6cqw 2.6cqw}
.tf.mode .hd .eb{font-size:var(--fs-eb)}
.tf.mode .hd .nm{font-size:var(--fs-title)}
.tf.mode .bd{flex:1;padding:3cqw 6cqw 0;display:flex;flex-direction:column;gap:1.4cqw;min-height:0}
.tf.mode .en{color:var(--c)}
.tf.mode .cap{font-size:var(--fs-body);font-weight:700;text-align:center;line-height:1.35}

/* scale: colored frame, white panel */
.tf.scale{background:var(--c);padding:3.4cqw 3.4cqw 0}
.tf.scale .pn{background:var(--c-paper);border-radius:3.6cqw;padding:4cqw 4.5cqw 3cqw;display:flex;flex-direction:column;gap:1.6cqw;flex:1;min-height:0}
.tf.scale .eb{color:var(--c-ink)}
.tf.scale .nm{font-size:var(--fs-title)}
.tf.scale .en{color:var(--c-mute)}
.tf.scale .ic{width:84%;margin:0 auto}
.tf.scale .ic svg{border-radius:2.4cqw}
.tf.scale .box{background:var(--c-paper);color:var(--c-ink);margin:2.4cqw 0 0;min-height:12cqw}
.tf.scale .ft{padding-inline:2.6cqw}
.tf.scale.dark .ft{color:#fff}

/* attack: red frame */
.tf.atk{background:var(--c);padding:0 3.4cqw}
.tf.atk .hd{color:#fff;padding:4.4cqw 2.4cqw 3.4cqw}
.tf.atk .hd .eb{font-size:var(--fs-eb)}
.tf.atk .pn{background:var(--c-paper);border-radius:3.6cqw;padding:4.5cqw 4.5cqw 3cqw;display:flex;flex-direction:column;gap:1.6cqw;flex:1;min-height:0}
.tf.atk .en{color:var(--c)}
.tf.atk .al{position:relative;width:62%;margin:2cqw auto 1cqw;border:.9cqw solid var(--c);border-radius:3cqw;aspect-ratio:2.1/1;display:grid;place-items:center;color:var(--c);font-weight:900;font-size:8.5cqw}
.tf.atk .al b{position:absolute;right:-4.5cqw;top:-4.5cqw;width:9cqw;height:9cqw;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:5.4cqw}
.tf.atk .box{background:var(--c-paper);margin:2.4cqw 0 0;min-height:12cqw}
.tf.atk .ft{color:#fff;padding-inline:2.4cqw}

/* defense: mint, teal shield */
.tf.def{background:var(--c-mint)}
.tf.def .bd{flex:1;padding:5cqw 6cqw 0;display:flex;flex-direction:column;gap:1.8cqw;min-height:0}
.tf.def .eb{color:var(--c);font-size:var(--fs-eb);border-bottom:.7cqw solid var(--c);padding-bottom:2cqw;margin-bottom:2cqw}
.tf.def .en{color:var(--c)}
.tf.def .sh{width:30%;margin:2cqw auto}
.tf.def .box{background:var(--c-paper)}

/* compact chip used inside slots / boards */
.chipcard{display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 4px;border-radius:7px;font-size:12px;font-weight:700;line-height:1.4;background:var(--c-paper);color:var(--c-ink);border:1.5px solid var(--c);white-space:nowrap}
.chipcard i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}