/* Bridge — what only the bridge table has, on top of the card room's own stylesheet (klaverjas-room.css): the auction
   table with the meaning of every call, the bidding box, and the dummy in the HUD. Same palette: deep green glass, brass edges. */
.zbr-auction { position: absolute; right: 12px; top: var(--zkj-head, 92px); z-index: 4; width: 236px; max-width: calc(100% - 24px); padding: 8px 10px 10px; border-radius: 14px; background: rgba(4, 18, 14, .88); border: 1px solid rgba(201, 162, 74, .5); color: #f3ead2; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.zbr-auction[hidden], .zbr-bidbox[hidden], .zbr-dummy[hidden], .zbr-explain[hidden] { display: none; }
.zbr-auction__head { display: flex; align-items: center; gap: 8px; font-size: .86rem; margin-bottom: 6px; }
.zbr-auction__head span { opacity: .8; font-size: .78rem; }
.zbr-auction__head button { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; font-size: .9rem; opacity: .75; }
.zbr-auction table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.zbr-auction th { font-size: .74rem; font-weight: 600; padding: 3px 2px 5px; border-bottom: 1px solid rgba(201, 162, 74, .35); line-height: 1.15; }
.zbr-auction th small { display: block; font-weight: 400; opacity: .6; font-size: .66rem; }
.zbr-auction th.vul { color: #ff8f7a; }
.zbr-auction th.dealer::after { content: ' ●'; color: #e2c068; font-size: .6rem; vertical-align: middle; }
.zbr-auction td { text-align: center; padding: 2px; height: 28px; }
#zkj.zbr .zbr-call { width: 100%; min-width: 0; padding: 3px 0; border-radius: 7px; border: 1px solid transparent; background: rgba(255, 255, 255, .06); color: #f6efd9; font: inherit; font-size: .9rem; cursor: pointer; }
#zkj.zbr .zbr-call:hover { border-color: rgba(226, 192, 104, .7); }
#zkj.zbr .zbr-call.is-last { background: rgba(226, 192, 104, .2); border-color: rgba(226, 192, 104, .55); }
.zbr-q { color: #e2c068; font-weight: 700; }
.zbr-x { color: #ff7b6b; }
.zbr-explain { margin-top: 8px; padding: 7px 9px; border-radius: 9px; background: rgba(255, 255, 255, .06); font-size: .8rem; line-height: 1.35; }
.zbr .zkj-s.sc0 { color: #3fc477; } .zbr .zkj-s.sc1 { color: #5fa0ff; } .zbr .zkj-s.sc2 { color: #ff5d6c; } .zbr .zkj-s.sc3 { color: #e9edf3; }

/* the bidding box: seven levels of five strains, then pas, doublet, redoublet */
.zbr-bidbox { position: absolute; right: 12px; bottom: 70px; z-index: 5; padding: 8px; border-radius: 14px; background: rgba(4, 18, 14, .92); border: 1px solid rgba(201, 162, 74, .55); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.zbr-bidgrid { display: grid; grid-template-columns: repeat(5, 44px); gap: 3px; }
#zkj.zbr .zbr-bidgrid button, #zkj.zbr .zbr-bidrow button { height: 25px; padding: 0; min-width: 0; border-radius: 7px; border: 1px solid rgba(201, 162, 74, .45); background: linear-gradient(#fbf3df, #e9dcbb); color: #1c1c1c; font: 700 .92rem Georgia, "Times New Roman", serif; cursor: pointer; }
#zkj.zbr .zbr-bidgrid button.s0 { color: #167a3c; } #zkj.zbr .zbr-bidgrid button.s1 { color: #1a5ccc; } #zkj.zbr .zbr-bidgrid button.s2 { color: #c8102e; } #zkj.zbr .zbr-bidgrid button.s3 { color: #16181c; } #zkj.zbr .zbr-bidgrid button.s4 { color: #6d4c10; }
#zkj.zbr .zbr-bidgrid button:hover:not(:disabled), #zkj.zbr .zbr-bidrow button:hover:not(:disabled) { outline: 2px solid #e2c068; }
#zkj.zbr .zbr-bidgrid button:disabled, #zkj.zbr .zbr-bidrow button:disabled { opacity: .18; cursor: default; }
.zbr-bidrow { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; margin-top: 6px; }
#zkj.zbr .zbr-bidrow .zbr-pass { background: linear-gradient(#5fcf8a, #2f9a5c); color: #fff; }
#zkj.zbr .zbr-bidrow .zbr-dbl { background: linear-gradient(#ff6e5e, #c8302a); color: #fff; }
#zkj.zbr .zbr-bidrow .zbr-rdbl { background: linear-gradient(#5f8dff, #2a4fc8); color: #fff; }

/* the dummy, readable at a glance: a row per suit, its cards clickable when you play them */
.zbr-dummy { position: absolute; left: 12px; top: calc(var(--zkj-head, 92px) + 58px); z-index: 3; min-width: 170px; padding: 7px 10px; border-radius: 12px; background: rgba(4, 18, 14, .82); border: 1px solid rgba(201, 162, 74, .45); color: #f3ead2; }
.zbr-dummy__head { font-size: .76rem; opacity: .8; margin-bottom: 3px; }
.zbr-dummy__row { display: flex; align-items: center; gap: 3px; min-height: 26px; }
.zbr-dummy__row .zkj-s { width: 18px; font-size: 1.05rem; }
#zkj.zbr .zbr-dummy__row button { min-width: 24px; height: 24px; padding: 0 4px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .07); color: #f6efd9; font: 700 .86rem Georgia, serif; }
#zkj.zbr .zbr-dummy__row button.ok { background: rgba(226, 192, 104, .3); border-color: #e2c068; cursor: pointer; }
#zkj.zbr .zbr-dummy__row button.ok:hover { background: rgba(226, 192, 104, .55); }
#zkj.zbr .zbr-dummy__row button:disabled { cursor: default; }
.zbr #zkj-sheet td .neg { color: #ff8f7a; }
#zkj.zbr .zbr-auction__head button { min-width: 0; padding: 0 4px; }
@media (max-height: 760px) { .zbr-auction table td { height: 24px; } #zkj.zbr .zbr-bidgrid button { height: 21px; } }

/* ---- the course (bridge-course.js): the golden C at the bottom, and its panel in the handbook's layout ---- */
.zbc-btns { display: flex; gap: 10px; align-items: center; margin: -16px 4px; position: relative; z-index: 6; }
#zkj .zbc-btns button.zbc-cbtn { width: 52px; height: 52px; min-width: 0; padding: 0; border-radius: 50%; border: 2px solid #ffe7a3; background: radial-gradient(circle at 35% 30%, #fff1b8, #e2b64e 45%, #9a7020); color: #3a2506;
  font: 800 1.55rem Georgia, "Times New Roman", serif; cursor: pointer; text-shadow: 0 1px 0 rgba(255, 245, 200, .7); box-shadow: 0 0 14px 3px rgba(255, 205, 90, .75), inset 0 -3px 6px rgba(90, 60, 10, .45); animation: zbc-glow 1.6s ease-in-out infinite; }
#zkj .zbc-btns button.zbc-cbtn:hover { transform: scale(1.07); }
@keyframes zbc-glow { 0%, 100% { box-shadow: 0 0 10px 2px rgba(255, 205, 90, .55), inset 0 -3px 6px rgba(90, 60, 10, .45); filter: brightness(1); } 50% { box-shadow: 0 0 26px 8px rgba(255, 215, 110, .95), inset 0 -3px 6px rgba(90, 60, 10, .45); filter: brightness(1.18); } }
@media (prefers-reduced-motion: reduce) { #zkj .zbc-btns button.zbc-cbtn { animation: none; } }
.zbc { z-index: 12; }
.zbc .zkj-book__no.zbc-ok { background: #2f9a5c; color: #fff; }
.zbc-body section { max-width: 820px; }
.zbc-s0 { color: #4fd38a; } .zbc-s1 { color: #6aa8ff; } .zbc-s2 { color: #ff5a6e; } .zbc-s3 { color: #e9edf3; }
.zbc-small { font-size: .84rem; opacity: .75; }
.zbc-note { margin: 12px 0; padding: 10px 14px; border-radius: 10px; background: rgba(110, 170, 255, .08); border: 1px solid rgba(140, 180, 255, .3); }
.zbc-hand { display: inline-block; vertical-align: top; margin: 8px 14px 10px 0; padding: 8px 14px; border-radius: 10px; background: #f7f0dc; color: #1c1c1c; font: 600 1rem/1.45 Georgia, serif; min-width: 150px; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.zbc-hand .zbc-s3 { color: #16181c; } .zbc-hand .zbc-s2 { color: #c8102e; } .zbc-hand .zbc-s1 { color: #1a5ccc; } .zbc-hand .zbc-s0 { color: #167a3c; }
.zbc-hand__label { font: italic .78rem/1.3 system-ui, sans-serif; color: #5a4a2a; margin-bottom: 4px; }
.zbc-suit { display: inline-block; width: 1.2em; }
.zbc-bar { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 10px; }
.zbc-bar span { display: block; height: 100%; background: linear-gradient(90deg, #e2b64e, #fff1b8); }
.zbc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; max-width: 820px; padding: 10px 0 20px; }
#zkj .zbc-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 12px 10px 48px; min-height: 92px; text-align: left; border-radius: 12px; border: 1px solid rgba(201, 162, 74, .35); background: rgba(255, 255, 255, .04); color: #efe7d0; cursor: pointer; }
#zkj .zbc-card:hover { background: rgba(217, 178, 90, .14); }
#zkj .zbc-card.is-done { border-color: rgba(95, 207, 138, .6); }
#zkj .zbc-card--final { border-color: #e2b64e; background: rgba(226, 182, 78, .12); }
.zbc-card__no { position: absolute; left: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(217, 178, 90, .25); color: #fff6dc; font-weight: 700; font-size: .85rem; }
.zbc-card b { color: #fff6dc; } .zbc-card small { opacity: .7; font-size: .78rem; } .zbc-card i { font-style: normal; font-size: .76rem; color: #e9cf86; margin-top: auto; }
.zbc-card.is-done i { color: #7fe0a6; }
.zbc-nav2 { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
#zkj .zbc-nav2 button, #zkj .zbc-result button { padding: 9px 16px; border-radius: 10px; border: 1px solid rgba(201, 162, 74, .5); background: rgba(255, 255, 255, .06); color: #efe7d0; font: inherit; cursor: pointer; }
#zkj .zbc-nav2 button.zbc-hot { background: linear-gradient(#f0cf78, #c99a2e); color: #2a1a04; font-weight: 700; border-color: #ffe7a3; }
.zbc-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; } .zbc-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .2); } .zbc-dots span.on { background: #e2b64e; }
.zbc-q { font-size: 1.15rem; font-weight: 600; color: #fff6dc; margin: 14px 0; }
.zbc-opts { display: grid; gap: 8px; }
#zkj .zbc-opt { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(201, 162, 74, .35); background: rgba(255, 255, 255, .05); color: #efe7d0; text-align: left; font: inherit; cursor: pointer; }
#zkj .zbc-opt:hover:not(:disabled) { background: rgba(217, 178, 90, .16); border-color: #e2b64e; }
.zbc-opt > span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(217, 178, 90, .25); font-weight: 700; }
#zkj .zbc-opt.is-right { background: rgba(47, 154, 92, .35); border-color: #5fcf8a; }
#zkj .zbc-opt.is-wrong { background: rgba(200, 48, 42, .35); border-color: #ff6e5e; }
#zkj .zbc-opt.is-dim { opacity: .5; }
.zbc-expl { margin-top: 14px; padding: 10px 14px; border-radius: 10px; }
.zbc-expl.ok { background: rgba(47, 154, 92, .18); border: 1px solid rgba(95, 207, 138, .45); } .zbc-expl.no { background: rgba(200, 48, 42, .15); border: 1px solid rgba(255, 110, 94, .4); }
.zbc-result { text-align: center; } .zbc-result .zbc-nav2 { justify-content: center; }
.zbc-score { font: 800 3.4rem Georgia, serif; margin: 10px 0; } .zbc-score.ok { color: #7fe0a6; } .zbc-score.no { color: #ff8f7a; }
.zbc-canvas { width: 100%; max-width: 720px; height: auto; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); margin-top: 10px; }
.zbc-name { display: block; margin: 8px 0; font-size: .9rem; } .zbc-name input { margin-left: 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(201, 162, 74, .5); background: rgba(0, 0, 0, .3); color: #fff; font: inherit; }
.zbc-gamebar { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 162, 74, .35); }
.zbc-hearts i { font-style: normal; color: #ff5a6e; font-size: 1.3rem; margin-right: 2px; text-shadow: 0 0 8px rgba(255, 90, 110, .6); } .zbc-hearts i.lost { color: rgba(255, 255, 255, .2); text-shadow: none; }
.zbc-pts { margin-left: auto; color: #e9cf86; }
.zbc-clock { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .1); margin: 12px 0 4px; overflow: hidden; } .zbc-clock span { display: block; height: 100%; background: linear-gradient(90deg, #ff6e5e, #e2b64e, #5fcf8a); transition: width .1s linear; }

/* ---- IC (bridge-room.js, the coach): its button beside the C, the coach's panel on the left, the call and card it would choose ---- */
#zkj .zbc-btns button.zbc-icbtn { width: 46px; height: 46px; min-width: 0; padding: 0; border-radius: 50%; border: 2px solid #b9f3d3; background: radial-gradient(circle at 35% 30%, #c9ffe2, #2f9a5c 50%, #0e5236); color: #fff;
  font: 800 1rem Georgia, "Times New Roman", serif; cursor: pointer; box-shadow: 0 0 10px 2px rgba(95, 207, 138, .55), inset 0 -3px 6px rgba(0, 40, 20, .45); }
#zkj .zbc-btns button.zbc-icbtn[aria-pressed="true"] { border-color: #ffe7a3; box-shadow: 0 0 20px 6px rgba(95, 207, 138, .9), inset 0 -3px 6px rgba(0, 40, 20, .45); }
#zkj .zbc-btns button.zbc-icbtn:hover { transform: scale(1.07); }
.zbr-coach { position: absolute; left: 12px; top: calc(var(--zkj-head, 92px) + 52px); z-index: 5; width: 300px; max-width: calc(100% - 24px); max-height: calc(60% - var(--zkj-head, 92px) - 52px); display: flex; flex-direction: column;
  border-radius: 14px; background: rgba(4, 18, 14, .9); border: 1px solid rgba(95, 207, 138, .55); color: #f3ead2; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); font-size: .84rem; line-height: 1.4; }
.zbr-coach[hidden] { display: none; }
.zbr-coach__head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid rgba(95, 207, 138, .3); }
.zbr-coach__head b { color: #b9f3d3; margin-right: auto; }
#zkj.zbr .zbr-coach__head button { min-width: 0; padding: 3px 8px; border-radius: 8px; border: 1px solid rgba(95, 207, 138, .45); background: rgba(255, 255, 255, .06); color: #f3ead2; font-size: .76rem; cursor: pointer; }
#zbr-coach-log { overflow-y: auto; padding: 6px 10px 10px; }
.zbr-coach__msg { padding: 6px 8px; margin-top: 6px; border-radius: 9px; background: rgba(255, 255, 255, .05); border-left: 3px solid rgba(255, 255, 255, .25); opacity: .8; }
.zbr-coach__msg.is-new { opacity: 1; background: rgba(95, 207, 138, .12); }
.zbr-coach__msg.tip { border-left-color: #e2c068; } .zbr-coach__msg.good { border-left-color: #5fcf8a; } .zbr-coach__msg.warn { border-left-color: #ff9a6e; }
.zbr-coach__msg.plan { border-left-color: #6aa8ff; } .zbr-coach__msg.partner { border-left-color: #14936a; } .zbr-coach__msg.opp { border-left-color: #b3261e; } .zbr-coach__msg.hand { border-left-color: #c9a24a; }
#zbr-coach-lessons { padding: 8px 10px; border-bottom: 1px solid rgba(95, 207, 138, .3); }
#zbr-coach-lessons[hidden] { display: none; }
#zbr-coach-lessons p { margin: 0 0 6px; opacity: .8; }
#zkj.zbr #zbr-coach-lessons button { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 6px 8px; border-radius: 9px; border: 1px solid rgba(201, 162, 74, .4); background: rgba(255, 255, 255, .05); color: #f3ead2; text-align: left; font-size: .82rem; cursor: pointer; }
#zkj.zbr #zbr-coach-lessons button:hover { background: rgba(95, 207, 138, .18); }
#zbr-coach-lessons button span { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(95, 207, 138, .35); font-weight: 700; font-size: .72rem; }
#zkj.zbr .zbr-bidgrid button.zbr-coachpick, #zkj.zbr .zbr-bidrow button.zbr-coachpick { outline: 3px solid #5fcf8a; box-shadow: 0 0 12px 3px rgba(95, 207, 138, .9); animation: zbr-pick 1s ease-in-out infinite; }
@keyframes zbr-pick { 50% { box-shadow: 0 0 4px 1px rgba(95, 207, 138, .5); } }

/* ---- AI (bridge-room.js): its button right of the C, and the conversation with Cheng Yi on the right ---- */
#zkj .zbc-btns button.zbc-aibtn { width: 46px; height: 46px; min-width: 0; padding: 0; border-radius: 50%; border: 2px solid #c9d8ff; background: radial-gradient(circle at 35% 30%, #dfe8ff, #4f74e0 50%, #1d2f7a); color: #fff;
  font: 800 .95rem Georgia, "Times New Roman", serif; cursor: pointer; box-shadow: 0 0 10px 2px rgba(110, 150, 255, .55), inset 0 -3px 6px rgba(10, 20, 60, .45); }
#zkj .zbc-btns button.zbc-aibtn[aria-pressed="true"] { border-color: #ffe7a3; box-shadow: 0 0 20px 6px rgba(110, 150, 255, .9), inset 0 -3px 6px rgba(10, 20, 60, .45); }
#zkj .zbc-btns button.zbc-aibtn:hover { transform: scale(1.07); }
.zbr-ai { position: absolute; right: 12px; top: calc(var(--zkj-head, 92px) + 52px); z-index: 7; width: 330px; max-width: calc(100% - 24px); max-height: calc(100% - var(--zkj-head, 92px) - 140px); display: flex; flex-direction: column;
  border-radius: 14px; background: rgba(6, 12, 30, .93); border: 1px solid rgba(110, 150, 255, .55); color: #eef1fb; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); font-size: .86rem; line-height: 1.45; }
.zbr-ai[hidden] { display: none; }
.zbr-ai__head { display: flex; align-items: center; padding: 8px 10px; border-bottom: 1px solid rgba(110, 150, 255, .3); }
.zbr-ai__head b { color: #c9d8ff; margin-right: auto; }
#zkj.zbr .zbr-ai__head button { min-width: 0; padding: 2px 8px; border-radius: 8px; border: 1px solid rgba(110, 150, 255, .45); background: rgba(255, 255, 255, .06); color: #eef1fb; cursor: pointer; }
#zbr-ai-log { flex: 1; min-height: 80px; overflow-y: auto; padding: 8px 10px; }
.zbr-ai__q { margin: 8px 0 4px auto; max-width: 85%; width: fit-content; padding: 6px 10px; border-radius: 12px 12px 2px 12px; background: rgba(110, 150, 255, .28); }
.zbr-ai__a { margin: 4px 0; max-width: 92%; padding: 7px 10px; border-radius: 12px 12px 12px 2px; background: rgba(255, 255, 255, .07); border-left: 3px solid #14936a; }
.zbr-ai__a.is-busy span { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #c9d8ff; animation: zbr-dot 1s infinite; }
.zbr-ai__a.is-busy span:nth-child(2) { animation-delay: .15s; } .zbr-ai__a.is-busy span:nth-child(3) { animation-delay: .3s; }
@keyframes zbr-dot { 50% { opacity: .2; transform: translateY(-3px); } }
.zbr-ai__chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 10px 0; }
#zkj.zbr .zbr-ai__chips button { min-width: 0; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(110, 150, 255, .45); background: rgba(110, 150, 255, .12); color: #eef1fb; font-size: .76rem; cursor: pointer; }
.zbr-ai__form { display: flex; gap: 6px; padding: 8px 10px 10px; }
.zbr-ai__form input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(110, 150, 255, .5); background: rgba(0, 0, 0, .35); color: #fff; font: inherit; }
#zkj.zbr .zbr-ai__form button { min-width: 0; padding: 7px 12px; border-radius: 10px; border: 0; background: linear-gradient(#7c9bff, #3a5bd0); color: #fff; font-weight: 700; cursor: pointer; }

/* ---- the course on the game's own page (Views/Games/Detail.cshtml): the C button in the hero, the panel over the page ---- */
#zkj.zbc-page { position: fixed; inset: 0; width: auto; height: auto; min-height: 0; z-index: 2000; border: 0; border-radius: 0; background: transparent; pointer-events: none; touch-action: auto; user-select: auto; -webkit-user-select: auto; overflow: visible; }
#zkj.zbc-page:has(.zbc:not([hidden])) { background: rgba(2, 6, 10, .62); pointer-events: auto; }
#zkj.zbc-page .zbc { pointer-events: auto; top: 24px; bottom: 24px; left: max(12px, calc(50% - 600px)); right: max(12px, calc(50% - 600px)); }
#zkj.zbc-page .zbc-btns { display: none; }
.zbc-tilebtn { display: inline-flex; align-items: center; gap: 10px; }
.zbc-tilec { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -6px 0 -6px -6px; border-radius: 50%; border: 2px solid #ffe7a3;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #e2b64e 45%, #9a7020); color: #3a2506; font: 800 1rem Georgia, "Times New Roman", serif; animation: zbc-glow 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .zbc-tilec { animation: none; } }

/* ---- the course's letter size (A− / A+): everything in the lessons scales with --fs ---- */
.zbc .zbc-fsz { display: inline-flex; gap: 4px; margin-left: auto; margin-right: 10px; }
#zkj .zbc .zbc-fsz button { min-width: 0; padding: 4px 10px; border-radius: 8px; font: 700 .9rem Georgia, serif; }
#zkj .zbc .zbc-fsz button:disabled { opacity: .35; cursor: default; }
.zbc .zbc-body { font-size: calc(1rem * var(--fs, 1.15)); }
.zbc .zkj-book__body h2 { font-size: 1.4em; } .zbc .zkj-book__body h3 { font-size: 1.05em; } .zbc .zkj-book__lead { font-size: 1.08em; }
.zbc .zbc-small { font-size: .86em; } .zbc .zbc-q { font-size: 1.2em; } .zbc .zbc-hand { font-size: 1.02em; } .zbc .zbc-hand__label { font-size: .8em; }
#zkj .zbc .zbc-opt, #zkj .zbc .zbc-nav2 button, #zkj .zbc .zbc-result button, #zkj .zbc .zbc-card { font-size: 1em; }
.zbc .zbc-card small, .zbc .zbc-card i { font-size: .8em; } .zbc .zbc-name { font-size: .92em; }
.zbc .zkj-book__nav { font-size: calc(1rem * min(var(--fs, 1.15), 1.3)); }
.zbc-guest { margin: 14px 0 4px; padding: 10px 14px; border-radius: 12px; background: rgba(226, 182, 78, .12); border: 1px solid rgba(226, 182, 78, .55); }
#zkj .zbc-guest button { margin-left: 8px; padding: 4px 12px; border-radius: 8px; border: 1px solid #ffe7a3; background: linear-gradient(#f0cf78, #c99a2e); color: #2a1a04; font-weight: 700; cursor: pointer; }
#zkj .zbc-card.is-locked { opacity: .62; }
.zbc-lock { margin-left: auto; font-size: .8em; opacity: .8; }