/* 《炸翻天斗地主》界面：古风工笔定调（design/炸翻天/style-b2 的主界面示意）。深青底、米黄纸、描金边、楷体。手机竖屏为主。 */
:root {
  --bg: #0f2c33; --deep: #0b2228; --gold: #d9b56a; --gold2: #f6e2a6; --paper: #f0e3c2; --ink: #f0e3c2; --dim: #a9b8ae;
  --mo: #2a2118; --red: #b9392c;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #071a1f; color: var(--ink); font: 700 15px/1.55 "Times New Roman", Times, "KaiTi", "STKaiti", "楷体", "Kaiti SC", "Noto Serif SC", serif; font-variant-numeric: lining-nums; -webkit-tap-highlight-color: transparent; }
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: 120px; position: relative; background: var(--bg) url(/zhafantian/img/pattern.webp) 50% 0/480px auto; box-shadow: 0 0 40px #000a; }
#app.in-table { padding-bottom: 0; }
[hidden] { display: none !important; }
button { font: inherit; color: var(--mo); background: linear-gradient(#fff6dc, #ead9ae); border: 2px solid var(--gold); border-radius: 8px; padding: 7px 14px; cursor: pointer; box-shadow: 0 2px 0 #0005; }
/* 按下沉 1px 用单独的 translate，不覆盖按钮自己的 transform（2026-10-15：关口头像靠 transform 居中，按下就跳开半个身位，松手落空、点不出重打框） */
button:active { translate: 0 1px; }
button:disabled { opacity: .45; cursor: default; }
button.ghost { background: #0004; color: var(--ink); }
button.on { background: linear-gradient(#3b9299, #1d5d67); color: #fff; }
button.link { background: none; border: 0; box-shadow: none; color: var(--dim); text-decoration: underline; padding: 0 4px; }
.loading { padding: 80px 16px; text-align: center; color: var(--dim); }

/* 米黄纸上的东西：字换成墨色 */
.pc, .pool, .stages li, .luck, .goods li, .drop, .soon, .dlg, .seatbox, .ent, .mebox div {
  --ink: #2a2118; --dim: #7a6a52;
  background: var(--paper); color: #2a2118; border: 2px solid var(--gold); outline: 1px solid #2a211866; outline-offset: -5px; border-radius: 8px; box-shadow: 0 3px 8px #0007;
}
.pc button.ghost, .dlg button.ghost, .stages button.ghost { background: #fff8; color: #2a2118; }

/* 顶栏 */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 0 10px; min-height: 58px; background: var(--deep); border-bottom: 2px solid var(--gold); }
.top > b { flex: 1; font-size: 17px; letter-spacing: 2px; }
.top .mult { color: var(--gold2); font-size: 18px; white-space: nowrap; }
.top .back { padding: 3px 10px; font-size: 13px; background: #0004; color: var(--ink); }
.ava { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--gold); background: var(--paper) url(/zhafantian/img/hero.webp) 50% 4%/190% auto no-repeat; box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--gold); }
.who { flex: 1; min-width: 0; font-size: 15px; line-height: 1.2; }
.who u { display: block; margin-top: 5px; height: 5px; border-radius: 3px; background: #0005; text-decoration: none; overflow: hidden; }
.who u i { display: block; height: 100%; background: var(--gold); }
.pill { height: 30px; padding: 0 10px; border-radius: 15px; border: 2px solid var(--gold); background: #0004; font-size: 13px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.pill em { font-style: normal; color: var(--gold2); font-size: 16px; }

/* 主界面：门脸 */
.scene { position: relative; height: 356px; background: url(/zhafantian/img/scene.webp) 50% 100%/cover; border-bottom: 2px solid var(--gold); overflow: hidden; }
.banner { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 5px 18px 6px; background: var(--paper); color: #2a2118; border: 2px solid var(--gold); outline: 1px solid #2a2118; font-size: 17px; white-space: nowrap; text-align: center; box-shadow: 0 2px 6px #0006; }
.banner s { display: flex; gap: 4px; justify-content: center; margin-top: 4px; text-decoration: none; }
.banner s i { width: 9px; height: 9px; border: 1.5px solid var(--red); }
.banner s i.on { background: var(--red); }
.scene .boss { position: absolute; right: 6px; bottom: 0; height: 246px; filter: drop-shadow(0 4px 6px #0007); }
.scene .hero { position: absolute; left: 26px; bottom: 6px; height: 232px; filter: drop-shadow(0 4px 6px #0007); }
.scene .talk { position: absolute; right: 120px; top: 92px; max-width: 160px; padding: 6px 10px; background: var(--paper); color: #2a2118; border: 2px solid var(--gold); border-radius: 10px; font-size: 13px; line-height: 1.35; box-shadow: 0 2px 6px #0006; text-align: left; }
.low { padding: 8px 10px 0; }
.task { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 2px 12px; border: 2px solid var(--gold); border-radius: 16px; background: #0005; font-size: 13px; }
.task .t { flex: 1; }
.task u { flex: none; width: 70px; height: 5px; border-radius: 3px; background: #0006; overflow: hidden; }
.task u i { display: block; height: 100%; background: var(--gold); }
.rdot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--red); border: 1.5px solid var(--gold); }
.drop { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 12px; }
.drop .pic { width: 54px; height: 54px; flex: none; border-radius: 8px; border: 2px solid var(--gold); display: grid; place-items: center; }
.drop .pic img { max-width: 44px; max-height: 44px; }
.drop p { flex: 1; margin: 0; font-size: 12px; line-height: 1.4; font-weight: 400; text-align: left; }
.drop p b { display: block; font-size: 17px; color: var(--red); font-weight: 700; }
.drop .bt { display: grid; gap: 5px; }
.drop .bt button { width: 78px; padding: 2px 0; font-size: 14px; }
.drop .bt button.rec { background: var(--red); color: #fff; } .drop .bt button.ghost { background: #fff8; color: #5a4a3a; }
.drop p span { display: block; } .drop .d-new { color: #2a2118; font-weight: 700; } .drop .d-old { color: #8a7a62; }
.drop .d-rec { margin-top: 1px; font-size: 13px; font-weight: 700; } .drop .d-rec.up { color: #2e7d4f; } .drop .d-rec.down { color: #a8642a; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 9px; }
.slot, .drop .pic { background: linear-gradient(var(--c2), var(--c1)); }
.slot { position: relative; height: 80px; border-radius: 9px; border: 2px solid var(--gold); box-shadow: inset 0 0 0 1.5px #fff6, inset 0 -18px 16px -8px #0007, 0 2px 5px #0007; display: grid; place-items: center; overflow: hidden; }
.slot img { max-width: 60px; max-height: 50px; margin-top: -8px; filter: drop-shadow(0 2px 2px #0006); }
.slot i { position: absolute; left: 0; top: 0; padding: 1px 5px; font-style: normal; font-size: 10px; background: #0007; border-bottom-right-radius: 7px; }
.slot b { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 12px; text-shadow: 0 1px 2px #000; }
.q0 { --c1: #2a3b40; --c2: #4b6066; }
.slot.q0 img { opacity: .35; filter: grayscale(1); }
.q1 { --c1: #8b8f8a; --c2: #c9ccc6; } .q2 { --c1: #3f8f5f; --c2: #9fd6ad; } .q3 { --c1: #2f6fae; --c2: #9cc6ee; } .q4 { --c1: #7a4bb0; --c2: #cdaef0; }
.q5 { --c1: #c9962b; --c2: #f6dc8a; } .q6 { --c1: #d0642a; --c2: #f7b98a; } .q7 { --c1: #c23a2e; --c2: #f59a86; }
.side { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0 0; }
.side button { padding: 5px 0; font-size: 13px; }
h2 { margin: 16px 0 6px; font-size: 16px; color: var(--gold2); display: flex; align-items: center; gap: 8px; }
h2::before { content: ""; width: 8px; height: 8px; background: var(--red); border: 1.5px solid var(--gold); transform: rotate(45deg); }
.note, .dim, .foot { color: var(--dim); font-size: 13px; font-weight: 400; width: fit-content; max-width: 100%; margin: 4px 0; text-align: left; }
.row { display: flex; gap: 10px; margin: 6px 0; font-size: 14px; }
.row .lbl { color: var(--dim); flex: 0 0 4em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: #0005; border: 1.5px solid var(--gold); border-radius: 12px; padding: 0 8px; font-size: 13px; }
.mebox { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 10px 0; }
.mebox div { padding: 6px 4px; text-align: center; outline-offset: -4px; }
.mebox i { display: block; font-style: normal; font-size: 12px; color: var(--dim); font-weight: 400; }
.mebox b { font-size: 18px; color: var(--red); }

/* 列表：关卡、茶馆的桌 */
.stages { list-style: none; margin: 0; padding: 0; }
.stages li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 8px; }
.stages li.now { box-shadow: 0 0 0 2px var(--red), 0 3px 8px #0007; }
.stages li.lock { opacity: .55; }
.stages li.ok { opacity: .85; }
.stages li > div { flex: 1; min-width: 0; }
.stages b { display: block; font-size: 16px; }
.stages span, .stages em { display: block; font-size: 12px; color: var(--dim); font-style: normal; font-weight: 400; }
.stages em { color: var(--red); }
.tag { font-size: 12px; color: var(--dim); white-space: nowrap; }

/* 底栏 */
.nav { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 6; width: min(480px, 100%); height: 88px; background: var(--deep); border-top: 2px solid var(--gold); display: flex; align-items: flex-end; justify-content: space-between; padding: 0 14px calc(8px + env(safe-area-inset-bottom)); }
.nav .tab { position: relative; width: 54px; padding: 0; background: none; border: 0; box-shadow: none; color: var(--ink); text-align: center; font-size: 13px; }
.nav .tab::before { content: attr(data-g); display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto 3px; border-radius: 9px; border: 2px solid var(--gold); background: var(--paper); color: #2a2118; font-size: 19px; }
.nav .tab.on { color: var(--gold2); }
.nav .tab.on::before { background: linear-gradient(#3b9299, #1d5d67); color: #fff; }
.nav .tab .dot { position: absolute; right: 4px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #e23b2e; border: 1.5px solid #fff; }
.nav .gap { width: 104px; }
.go { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 7; width: 94px; height: 94px; padding: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2f7f86, #124a55 70%); border: 4px solid var(--gold); box-shadow: 0 0 0 3px var(--deep), 0 0 0 5px var(--gold), 0 6px 14px #000a, inset 0 3px 8px #fff5; color: var(--gold2); font-size: 29px; letter-spacing: 2px; text-shadow: 0 2px 3px #0006; }
.cnt { position: fixed; left: 50%; bottom: calc(4px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 8; padding: 0 12px; border-radius: 12px; border: 2px solid var(--gold); background: var(--deep); font-size: 12px; white-space: nowrap; }
.cta { position: fixed; left: 0; right: 0; bottom: 128px; z-index: 4; text-align: center; pointer-events: none; }
.cta button { pointer-events: auto; padding: 8px 30px; font-size: 18px; border-radius: 22px; background: var(--red); color: #fff; }

/* 各页 */
.page { padding: 12px 10px; }
.subtabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 2px solid var(--gold); }
.subtabs button { background: #0004; color: var(--ink); border-bottom: 0; border-radius: 8px 8px 0 0; padding: 5px 16px; box-shadow: none; }
.subtabs button.on { background: var(--paper); color: #2a2118; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.big2 { padding: 9px 26px; font-size: 16px; background: var(--red); color: #fff; }
.pcs { display: grid; gap: 10px; }
.pc { padding: 10px 14px; border-left-width: 6px; }
.pc.rL { border-left-color: #c9962b; } .pc.rE { border-left-color: #7a4bb0; } .pc.rR { border-left-color: #2f6fae; } .pc.rN { border-left-color: #8b8f8a; }
.pc.lock { opacity: .6; }
.pc-h { display: flex; justify-content: space-between; align-items: baseline; }
.pc-h b { font-size: 18px; } .pc-h span { font-size: 12px; color: var(--dim); font-weight: 400; }
.pc-s { font-size: 12px; color: #b9862b; }
.pc-j { font-size: 13px; margin-top: 4px; font-weight: 400; }
.pc-j b { color: var(--red); }
.got { padding: 8px 10px; margin: 10px 0; }
.got > p { margin: 0 0 6px; color: var(--red); }
.got .pc { box-shadow: none; }
.altar, .hallhead { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 140px; background: url(/zhafantian/img/scene.webp) 50% 40%/cover; border: 2px solid var(--gold); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.altar::before, .hallhead::before { content: ""; position: absolute; inset: 0; background: #0b2228aa; }
.altar p { position: relative; margin: 0; font-size: 30px; letter-spacing: 12px; color: var(--gold2); } .altar span { position: relative; font-size: 13px; }
.hallhead .plaque { position: relative; padding: 2px 22px; font-size: 26px; letter-spacing: 8px; background: var(--paper); color: #2a2118; border: 2px solid var(--gold); outline: 1px solid #2a2118; }
.hallhead p { position: relative; margin: 6px 0 0; font-size: 13px; }
.seats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.seatbox { flex: 1 1 28%; min-width: 96px; padding: 8px; text-align: center; }
.seatbox.t { flex-basis: 100%; box-shadow: 0 0 0 2px var(--red), 0 3px 8px #0007; }
.seatbox.empty { opacity: .55; border-style: dashed; }
.seatbox i { display: block; font-style: normal; font-size: 12px; color: var(--dim); font-weight: 400; }
.seatbox b { display: block; font-size: 17px; } .seatbox span { font-size: 12px; color: var(--red); }
.luck { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 8px; }
.luck div { flex: 1; } .luck p { margin: 0; font-size: 13px; color: var(--dim); font-weight: 400; }
.luck.off { opacity: .5; }
.ents { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ent { display: block; text-align: left; padding: 10px 12px; }
.ent b { display: block; font-size: 18px; color: var(--red); }
.ent span { display: block; font-size: 12px; color: var(--dim); font-weight: 400; }
.soon { padding: 16px; margin-top: 12px; }
.soon h2 { margin-top: 0; color: var(--red); } .soon p { margin: 6px 0; text-align: left; font-weight: 400; }
.back2 { padding: 3px 12px; font-size: 13px; background: #0004; color: var(--ink); margin-bottom: 8px; }
.goods { list-style: none; margin: 0; padding: 0; }
.goods li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 8px; }
.goods div { flex: 1; } .goods b { display: block; font-size: 17px; color: var(--red); } .goods span { font-size: 12px; color: var(--dim); font-weight: 400; }

/* 牌桌 */
.table { padding: 10px 10px 16px; display: flex; flex-direction: column; gap: 8px; }
.who2 { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--dim); font-weight: 400; }
.who2 b { color: var(--ink); font-size: 17px; font-weight: 700; }
.opp { display: flex; align-items: center; gap: 8px; }
.opp .port { width: 52px; height: 52px; flex: none; border-radius: 50%; border: 2px solid var(--gold); background: var(--paper) url(/zhafantian/img/boss.webp) 50% 6%/170% auto no-repeat; box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--gold); }
.opp .port.t { background: var(--paper); display: grid; place-items: center; color: #2a2118; font-size: 24px; }
.opp > div:last-child { flex: 1; min-width: 0; }
.bar { position: relative; height: 18px; background: #0008; border: 2px solid var(--gold); border-radius: 10px; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; transition: width .5s; }
.bar.b-foe i { background: linear-gradient(#e2604a, #b9392c); } .bar.b-me i { background: linear-gradient(#57b3a0, #2f7f86); }
.bar span { position: relative; display: block; text-align: center; font-size: 12px; line-height: 14px; text-shadow: 0 1px 2px #000; }
.rule { margin: 4px 0 0; font-size: 12px; color: #ffb9a8; text-align: left; font-weight: 400; }
.mid { position: relative; min-height: 180px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 8px; background: radial-gradient(#1f6068, #124a55 75%); border: 2px solid var(--gold); outline: 1px solid var(--gold); outline-offset: -6px; border-radius: 12px; padding: 12px; box-shadow: inset 0 0 30px #0006; }
.seat { min-height: 70px; }
.seat i { display: block; font-style: normal; font-size: 12px; color: #cfe6e0; margin-bottom: 4px; font-weight: 400; }
.seat.s0 { grid-column: 1 / 3; text-align: center; align-self: end; }
.seat.s2 { text-align: right; }
.say { display: inline-block; padding: 2px 10px; border-radius: 12px; background: var(--paper); color: #2a2118; font-size: 13px; }
.reveal { font-size: 12px; color: var(--dim); font-weight: 400; } .reveal p { margin: 2px 0; }
.fx { margin: 0; font-size: 13px; color: var(--gold2); text-align: left; }
.counter { display: grid; grid-template-columns: repeat(15, 1fr); gap: 2px; font-size: 11px; text-align: center; }
.counter span { background: var(--paper); color: #2a2118; border-radius: 4px; padding: 1px 0; }
.counter b { display: block; font-weight: 400; color: #7a6a52; font-size: 10px; }
.counter .zero { opacity: .35; }
.mine { display: flex; flex-direction: column; gap: 6px; }
.hintline { margin: 0; font-size: 13px; color: var(--gold2); text-align: left; }
.jis { display: flex; flex-wrap: wrap; gap: 6px; }
.ji { background: linear-gradient(#d6513f, #9c2c1a); color: #ffe9c4; padding: 4px 10px; font-size: 13px; }
.ji.on { background: linear-gradient(#ffd76a, #d9a441); color: #2a2118; }
.ji.off, #app .ctrl .ji.off { background: #6b7775; color: #c9d2ce; border-color: #8a9692; box-shadow: none; text-shadow: none; cursor: help; }
.mine .btns { justify-content: flex-end; margin: 0; }
.hand { display: flex; flex-wrap: wrap; justify-content: center; padding: 14px 0 6px 18px; row-gap: 12px; }
.cd { display: inline-flex; flex-direction: column; align-items: flex-start; width: 44px; height: 62px; margin-left: -18px; padding: 2px 4px; background: linear-gradient(#fffaf0, #f3e7c9); color: #1c1c1c; border: 1.5px solid #8a6a2a; border-radius: 6px; box-shadow: -1px 1px 2px #0006, inset 0 0 0 2px #fffaf0, inset 0 0 0 3px #d9b56a88; cursor: pointer; user-select: none; transition: transform .1s; line-height: 1.1; }
.cd b { font: 700 17px/1.1 Georgia, "Times New Roman", serif; } .cd i { font-style: normal; font-size: 14px; }
.cd.red { color: #b9392c; }
.cd.on { transform: translateY(-12px); box-shadow: 0 0 0 2px var(--red), -1px 6px 6px #0008; }
.cd.mk { background: linear-gradient(#fff3c9, #f2dc9a); }
.cds { display: inline-flex; flex-wrap: wrap; padding-left: 10px; row-gap: 4px; vertical-align: middle; }
.cd.sm { width: 28px; height: 38px; margin-left: -10px; padding: 1px 3px; cursor: default; box-shadow: -1px 1px 2px #0006; }
.cd.sm b { font-size: 13px; } .cd.sm i { font-size: 10px; }

/* 弹窗、提示 */
.mask { position: fixed; inset: 0; z-index: 20; background: #000a; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dlg { width: min(420px, 100%); max-height: 92vh; overflow: auto; padding: 18px 16px; }
.dlg h3 { margin: 0 0 8px; font-size: 22px; text-align: center; color: var(--red); letter-spacing: 2px; }
.dlg.lose h3 { color: #5a4a3a; }
.dlg p { margin: 4px auto; width: fit-content; max-width: 100%; text-align: left; }
.calc span { display: inline-block; text-align: center; font-size: 19px; }
.calc i { display: block; font-style: normal; font-weight: 400; font-size: 11px; color: #7a6a52; }
.dmg, .big-line { font-size: 19px; color: var(--red); }
.dlg .btns { justify-content: center; margin-top: 12px; }
.toast { position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%); z-index: 30; max-width: 86vw; background: var(--deep); border: 2px solid var(--gold); border-radius: 10px; padding: 8px 14px; font-size: 14px; text-align: left; }

/* 底纹压暗一点，直接写在底纹上的小字才看得清；牌桌再暗一档 */
:root { --dim: #d0ddd6; }
#app { background-image: linear-gradient(#0f2c3366, #0f2c3366), url(/zhafantian/img/pattern.webp); background-size: auto, 480px auto; }
#app.in-table { background-image: linear-gradient(#0b2228d9, #0b2228d9), url(/zhafantian/img/pattern.webp); }

/* 牌放大（2026-10-06 站长：照斗地主把牌做大，久看不花眼）。手牌的宽与每张露出多少由页面按屏宽算好传进来 */
.hand { display: block; padding: 16px 0 6px; touch-action: none; user-select: none; -webkit-user-select: none; }
.hrow { display: flex; justify-content: center; margin-top: 10px; }
.hrow:first-child { margin-top: 0; }
.hand .cd { width: var(--cw); height: calc(var(--cw) * 1.42); margin-left: calc(var(--step) - var(--cw)); padding: calc(var(--cw) * .06) calc(var(--cw) * .1); border-radius: calc(var(--cw) * .12); }
.hand .cd:first-child { margin-left: 0; }
.hand .cd b { font-size: calc(var(--cw) * .44); letter-spacing: -1px; }
.hand .cd i { font-size: calc(var(--cw) * .38); line-height: 1; }
.hand .cd.on { transform: translateY(calc(var(--cw) * -.26)); }
.cd.sm { width: var(--scw, 40px); height: calc(var(--scw, 40px) * 1.4); margin-left: calc(var(--scw, 40px) * -.4); padding: 2px calc(var(--scw, 40px) * .1); }
.cd.sm b { font-size: calc(var(--scw, 40px) * .475); } .cd.sm i { font-size: calc(var(--scw, 40px) * .375); }
.cds { padding-left: calc(var(--scw, 40px) * .4); row-gap: 6px; }
.cd i, .seat .cd i { color: inherit; margin: 0; display: inline; font-size: 14px; }
.seat > i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mid { min-height: 230px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mine .btns button { padding: 10px 16px; font-size: 17px; }
.who2, .fx, .hintline { font-size: 14px; }

/* 全屏键 */
.top .fs { flex: none; white-space: nowrap; }
html:fullscreen, html:fullscreen body { background: #071a1f; overflow-y: auto; }
/* 退出全屏后浏览器报的屏高还不准的那一阵（main.ts 的 vhCapOn）：牌桌底下留一截，页面能往上拉 */
html.fs-out #app.in-table:not(.wide) { margin-bottom: 180px; }
/* 同一阵里，贴着屏幕底边摆的东西都照 --vhx 往上抬（浏览器以为的屏幕比真的高，不抬就落到工具栏底下）：底部导航、圆键和它上下的小牌子、提示条；
   铺满屏幕的层（弹层、获得层、演出层、开场）底边也收上来，弹层最高只到真的屏高 */
html.fs-out #app:not(.wide) .nav { bottom: var(--vhx); }
html.fs-out #app:not(.wide) .go { bottom: calc(18px + env(safe-area-inset-bottom) + var(--vhx)); }
html.fs-out #app:not(.wide) .cnt { bottom: calc(4px + env(safe-area-inset-bottom) + var(--vhx)); }
html.fs-out #app:not(.wide) .tiec { bottom: calc(118px + env(safe-area-inset-bottom) + var(--vhx)); }
html.fs-out #app:not(.wide) .cta { bottom: calc(128px + var(--vhx)); }
html.fs-out #app:not(.wide) .toast, html.fs-out body > .toast { bottom: calc(140px + var(--vhx)); }
html.fs-out #app:not(.wide):not(.in-table) { padding-bottom: calc(120px + var(--vhx)); }
html.fs-out .mask { bottom: calc(var(--vhx) / var(--z, 1)); }
html.fs-out #fx, html.fs-out #gain, html.fs-out #gain-wait, html.fs-out .zin, html.fs-out .zold { bottom: var(--vhx); }
html.fs-out .dlg { max-height: calc(var(--vh) / var(--z, 1) - 24px); }

/* 界面小图（2026-10-06 出图，原先是单字顶着）：页签、顶栏、入口、属性、牌运、商铺、头像、人头牌 */
.ic { object-fit: contain; flex: none; filter: drop-shadow(0 1px 1px #0006); }
.nav .tab::before { content: none; }
.nav .tab .tic { display: grid; place-items: center; width: 50px; height: 42px; margin: 0 auto 1px; border-radius: 10px; }
.nav .tab .tic .ic { max-width: 46px; max-height: 40px; }
.nav .tab.on .tic { background: radial-gradient(closest-side, #f6e2a655, transparent); box-shadow: inset 0 -3px 0 -1px var(--gold2); }
.pill .ic { height: 20px; width: 22px; }
.side button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 0 3px; }
.side .ic { height: 30px; width: 40px; }
.mebox i .ic { height: 17px; width: 18px; vertical-align: -3px; margin-right: 3px; }
.ent { display: flex; align-items: center; gap: 9px; }
.ent .ic { width: 42px; height: 42px; }
.ent > div { min-width: 0; }
.luck .ic, .goods .ic { width: 44px; height: 44px; }
.luck .ic + div { flex: 1; }
.soon > .ic { float: right; width: 64px; height: 64px; margin: 0 0 6px 10px; }
.altar span .ic { height: 20px; width: 24px; vertical-align: -4px; margin-right: 4px; }
.ji .ic { height: 18px; width: 22px; vertical-align: -3px; margin-right: 3px; }
.opp .port.f { background: var(--paper); overflow: hidden; display: grid; place-items: center; }
.opp .port.f img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.opp .port.ico img { width: 74%; height: 74%; object-fit: contain; }
.who2 .bk { height: 17px; width: 12px; vertical-align: -3px; margin-right: 3px; border-radius: 2px; }
.seat > i { display: flex; align-items: center; gap: 5px; }
.seat.s2 > i { flex-direction: row-reverse; }
.seat.s0 > i { justify-content: center; }
.sf { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.5px solid var(--gold); background: var(--paper); overflow: hidden; }
.sf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
/* 馆主的圆头像拿立绘裁：哪张图、裁哪一块，页面按馆写在元素上（main.ts 的 BOSS_ART：--bx、--by 是位置，--bz 是放大倍数） */
.sf.boss { background: var(--paper) var(--bimg, url(/zhafantian/img/boss.webp)) var(--bx, 50%) var(--by, 6%)/var(--bz, 170%) auto no-repeat; }
/* 人头牌、大小王：整张是画，角上的点数花色压在画的留白上 */
.cd { position: relative; }
.cd.art { background: #fffaf0 100% 70%/90% 90% no-repeat; }
.cd.art::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 48%; border-radius: inherit; background: linear-gradient(90deg, #fffaf0 58%, #fffaf000); }
.cd.art b, .cd.art i { position: relative; }
.cd.fj { background-image: url(/zhafantian/img/card/card-j.webp); } .cd.fq { background-image: url(/zhafantian/img/card/card-q.webp); } .cd.fk { background-image: url(/zhafantian/img/card/card-k.webp); }
.cd.js { background-image: url(/zhafantian/img/card/card-joker-s.webp); } .cd.jb { background-image: url(/zhafantian/img/card/card-joker-b.webp); }
.cd.art b, .cd.art i { text-shadow: 0 0 3px #fffaf0, 0 0 3px #fffaf0, 0 0 2px #fffaf0; }
.cd.art.mk { filter: sepia(.45) saturate(1.3); }
/* 大小王：牌角竖排 JOKER（小王黑、大王红），和普通扑克一样 */
.cd b.jk, .hand .cd b.jk, .cd.sm b.jk { writing-mode: vertical-rl; text-orientation: upright; font: 700 10px/1 Georgia, "Times New Roman", serif; letter-spacing: -.1em; }
.hand .cd b.jk { font-size: calc(var(--cw) * .2); }
.cd.sm b.jk { font-size: calc(var(--scw, 40px) * .21); }
/* 数字牌：牌身上照普通扑克的摆法画花色点阵（让开左上角的点数；叠着时被后一张盖住，露出整张才看得全） */
.cd .pp { position: absolute; left: 50%; right: 16%; top: 13%; bottom: 13%; font: 400 11px/1 Georgia, serif; pointer-events: none; }
.cd .pp u { position: absolute; transform: translate(-50%, -50%); text-decoration: none; }
.cd .pp u.dn { transform: translate(-50%, -50%) rotate(180deg); }
.cd .pp.ace u { font-size: 2.6em; }
.hand .cd .pp { font-size: calc(var(--cw) * .24); }
.cd.sm .pp { font-size: calc(var(--scw, 40px) * .23); }

/* 牌桌的几块：竖屏里 .tinfo、.ctrl 不成盒子，顺序照旧（对手、桌面、起手与记牌器、自己）；宽屏才各成一栏 */
.tinfo, .ctrl { display: contents; }
.tinfo > * { order: 2; } .tinfo > .opp { order: 0; } .table > .mid { order: 1; } .table > .mine { order: 3; }
.seat .cd.sm i { font-size: calc(var(--scw, 40px) * .35); }

/* ── 宽屏（电脑、全屏、手机横屏）：左门脸、右养成、最右一条竖排页签；整屏不滚，右栏自己滚。#app.wide 由页面按屏幕加 ── */
#app.wide { max-width: none; height: calc(var(--vh, 100dvh) / var(--z, 1)); min-height: 0; padding: 0; overflow: hidden; display: grid; grid-template: auto minmax(0, 1fr) / minmax(0, 46fr) minmax(0, 54fr) 76px; }
.wide > .top { grid-column: 1 / -1; position: static; }
.wide .left { position: relative; container-type: size; border-right: 2px solid var(--gold); overflow: hidden; }
.wide .scene { height: 100%; border-bottom: 0; }
.wide .scene .hero { height: min(64cqh, 82cqw); left: 4cqw; bottom: 1cqh; }
.wide .scene .boss { height: min(68cqh, 87cqw); right: 1cqw; }
.wide .scene .talk { right: 30cqw; top: 22cqh; max-width: 40cqw; }
.wide .go { position: absolute; bottom: 30px; }
.wide .cnt { position: absolute; bottom: 14px; }
.wide .col { overflow-y: auto; container-type: inline-size; padding-bottom: 16px; }
.wide .nav.rail { position: static; transform: none; width: auto; height: auto; flex-direction: column; justify-content: flex-start; align-items: center; gap: 14px; padding: 14px 0; border-top: 0; border-left: 2px solid var(--gold); overflow-y: auto; }
.wide .cta { position: sticky; bottom: 12px; }
.wide .toast { bottom: auto; top: 70px; }
@container (min-width: 600px) {
  .grid { grid-template-columns: repeat(8, 1fr); }
  .stages, .goods, .pcs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; align-items: start; }
  .pcs { gap: 10px; }
  .ents { grid-template-columns: repeat(3, 1fr); }
}

/* 宽屏牌桌：左桌面、右对手与记牌器，下面通栏是按键和一行手牌 */
#app.in-table.wide { display: flex; flex-direction: column; }
.wide .table { flex: 1; min-height: 0; display: grid; grid-template: minmax(0, 1fr) auto / minmax(0, 1fr) clamp(250px, 32%, 420px); gap: 8px 10px; padding: 8px 10px; }
.wide .tinfo { display: flex; flex-direction: column; gap: 6px; grid-column: 2; grid-row: 1; min-height: 0; overflow-y: auto; }
.wide .tinfo > * { order: 0; flex: none; }
.wide .table > .mid { grid-column: 1; grid-row: 1; min-height: 0; }
.wide .table > .mine { grid-column: 1 / -1; }
.wide .ctrl { display: flex; align-items: center; gap: 10px; }
.wide .ctrl .btns { margin: 0 0 0 auto; flex-wrap: nowrap; }
.wide .hand { padding: calc(var(--cw) * .28) 0 2px; }
.wide .seat .say { font-size: 15px; }
.wide .reveal { --scw: 28px; }
.wide .tinfo .who2 { flex-wrap: wrap; column-gap: 8px; }
.wide .tinfo .who2 b { white-space: nowrap; }
.wide .col, .wide .tinfo, .wide .nav.rail { scrollbar-width: thin; scrollbar-color: #d9b56a88 transparent; }
/* 电脑上屏高：牌桌的字和按键跟着放大 */
@media (min-height: 600px) {
  .wide .table { gap: 12px 14px; padding: 14px; }
  .wide .tinfo { gap: 10px; }
  .wide .tinfo .who2, .wide .tinfo .fx, .wide .rule, .wide .reveal, .wide .hintline { font-size: 16px; }
  .wide .tinfo .who2 b { font-size: 21px; }
  .wide .opp .port { width: 64px; height: 64px; }
  .wide .bar { height: 24px; } .wide .bar span { font-size: 14px; line-height: 20px; }
  .wide .counter { font-size: 14px; } .wide .counter b { font-size: 12px; }
  .wide .seat > i { font-size: 15px; }
  .wide .seat .say { font-size: 17px; padding: 3px 14px; }
  .wide .mine .btns button { padding: 11px 24px; font-size: 19px; }
  .wide .ctrl .ji { padding: 8px 14px; font-size: 16px; }
  .wide .go { bottom: 44px; } .wide .cnt { bottom: 26px; font-size: 14px; }
}
@media (max-height: 520px) {
  .wide .top { min-height: 46px; }
  .wide .scene .boss { height: min(62cqh, 80cqw); }
  .wide .ava { width: 36px; height: 36px; }
  .wide .go { width: 76px; height: 76px; font-size: 23px; bottom: 24px; border-width: 3px; }
  .wide .cnt { bottom: 8px; }
  .wide .nav.rail { gap: 4px; padding: 6px 0; font-size: 12px; }
  .wide .nav.rail .tab { font-size: 12px; }
  .wide .nav.rail .tab .tic { width: 44px; height: 34px; margin-bottom: 0; }
  .wide .nav.rail .tab .tic .ic { max-width: 40px; max-height: 32px; }
  .wide .table > .mid { padding: 8px 12px; }
  .wide .seat { min-height: 0; }
  .wide .seat.s0 > i { display: none; }
  .wide .mine .btns button, .wide .ctrl .ji { padding: 5px 13px; font-size: 15px; }
  .wide .dlg { width: min(560px, 100%); padding: 12px 16px; }
  .wide .dlg h3 { margin-bottom: 4px; font-size: 19px; }
}

/* ── 打牌特效 ──
   #fx 是盖在整页上面的一层（挂在 body 上，不在 #app 里，整块重画碰不到它），字、印、火星、飞的数字都在这层；怎么动由 fx.ts 用 Web Animations 管，这里只管长相。
   --u＝屏幕短边的百分之一。 */
#fx { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; --u: 4px; font-family: "STXingkai", "华文行楷", "KaiTi", "STKaiti", "楷体", "Kaiti SC", serif; }
#fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#fx > div { position: absolute; will-change: transform, opacity; }
.fx-flash { inset: 0; }
.fx-vig { inset: 0; background: radial-gradient(transparent 30%, #000000e6); }
.fx-word { white-space: nowrap; paint-order: stroke fill; font-weight: 900; letter-spacing: .1em; padding-left: .1em; color: #ffe9a8; -webkit-text-stroke: .09em #7a1a00; text-shadow: 0 .06em 0 #7a1a00, 0 0 .25em #ff7a2a, 0 0 .6em #ff3d00; }
.fx-word.rocket { color: #fff7d6; -webkit-text-stroke-color: #a02000; text-shadow: 0 .06em 0 #a02000, 0 0 .2em #ffd76a, 0 0 .5em #ff5a2a, 0 0 1em #ff2a00; }
.fx-word.spring { color: #fff0f3; -webkit-text-stroke-color: #b02a55; text-shadow: 0 .06em 0 #b02a55, 0 0 .3em #ff8fab, 0 0 .7em #ff5c8a; }
.fx-ribbon b { display: block; padding: .12em 1.4em; white-space: nowrap; font-weight: 900; letter-spacing: .3em; color: #fff3c9; text-shadow: 0 .06em 0 #5a0d00; background: linear-gradient(90deg, #b9392c00, #b9392cf2 20%, #b9392cf2 80%, #b9392c00); border-block: .05em solid #ffd76a; }
.fx-ring { border: calc(var(--u) * .7) solid; border-radius: 50%; }
.fx-wind { height: calc(var(--u) * .4); border-radius: 99px; background: linear-gradient(90deg, #fff0, #fffc); }
.fx-mult { white-space: nowrap; paint-order: stroke fill; font: 900 1em/1 Georgia, "Times New Roman", serif; color: #ffe08a; -webkit-text-stroke: .08em #6a2a00; text-shadow: 0 .05em 0 #6a2a00, 0 0 .3em #ffb347; }
.fx-mult i { font-style: normal; font-size: .6em; margin-right: .06em; } .fx-mult b { display: inline-block; }
.fx-mult.hot1 { color: #ffc94d; } .fx-mult.hot2 { color: #ff9a3c; text-shadow: 0 .05em 0 #6a2a00, 0 0 .3em #ff7a2a, 0 0 .6em #ff3d00; }
.fx-mult.hot3 { color: #ff5a3a; -webkit-text-stroke-color: #fff3c9; text-shadow: 0 .05em 0 #7a0000, 0 0 .3em #ff3d00, 0 0 .8em #ff0000; }
.fx-ji { display: flex; align-items: flex-end; gap: .12em; }
.fx-ji b { writing-mode: vertical-rl; font-weight: 900; line-height: 1.05; letter-spacing: .06em; padding: .3em .14em; color: #fdf6e3; text-shadow: 0 .04em 0 #000, 0 0 .2em #000; background: linear-gradient(#0b2228f2, #123a44e6); border-inline: .05em solid #e7b84d; box-shadow: 0 .1em .4em #000a; }
.fx-ji em { display: grid; place-items: center; width: 1.5em; height: 1.5em; margin-bottom: .2em; font-style: normal; font-size: .6em; font-weight: 900; color: #fff3c9; background: #c0392b; border-radius: .14em; box-shadow: inset 0 0 0 .07em #c0392b, inset 0 0 0 .12em #fff3c9aa, 0 .08em .3em #0008; }
.fx-dmg { white-space: nowrap; paint-order: stroke fill; text-align: center; font: 900 1em/1 Georgia, "Times New Roman", serif; color: #fff; -webkit-text-stroke: .08em #7a1400; text-shadow: 0 .05em 0 #7a1400, 0 0 .25em #ff3d00; }
.fx-dmg.crit { color: #ffe08a; text-shadow: 0 .05em 0 #7a1400, 0 0 .2em #ffd76a, 0 0 .6em #ff5a2a; }
.fx-dmg i { display: block; width: fit-content; margin: 0 auto .1em; padding: .1em .5em; font: 900 .36em/1.2 "KaiTi", "STKaiti", serif; letter-spacing: .25em; text-indent: .25em; -webkit-text-stroke: 0; text-shadow: none; color: #fff3c9; background: #c0392b; border: .08em solid #fff3c9; border-radius: .2em; transform: rotate(-6deg); }
.fx-ghost { background: #fff; transform-origin: left center; border-radius: 3px; }
.fx-pop { white-space: nowrap; font: 900 1em/1 Georgia, serif; color: #ff7a60; text-shadow: 0 1px 0 #000, 0 0 5px #000; }
.fx-pop.crit { color: #ffe08a; }
.fx-shard { background: linear-gradient(#e2604a, #b9392c); border: 1px solid #e7b84d; }
.fx-grey { border-radius: 50%; background: #1a1a1ab3; -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1); }
.fx-plaque { display: flex; flex-direction: column; align-items: center; padding: .3em .9em .28em; white-space: nowrap; background: linear-gradient(#6a2012, #3a0f08); border: .07em solid #e7b84d; border-radius: .12em; box-shadow: inset 0 0 0 .05em #3a0f08, inset 0 0 0 .09em #e7b84d88, 0 .15em .6em #000c; }
.fx-plaque b { font-weight: 900; letter-spacing: .25em; text-indent: .25em; color: #ffe08a; text-shadow: 0 .05em 0 #000; }
.fx-plaque span { font-size: .3em; letter-spacing: .15em; color: #f3e7c9; font-family: "KaiTi", "STKaiti", serif; }
.fx-seal { display: grid; place-items: center; box-sizing: border-box; border: .22em solid #e0503c; border-radius: .35em; background: #2a0a06c7; box-shadow: inset 0 0 0 .08em #2a0a06, inset 0 0 0 .14em #e0503c88; }
.fx-seal b { width: 2.2em; text-align: center; line-height: 1.12; word-break: break-all; font-weight: 900; color: #ff7a66; }

/* 桌面上跟着重画走的几样：刚出的牌入场、剩一两张报警、高倍数冒火、结算算式一项一项出 */
.seat.fresh .cd { animation: zft-in .26s cubic-bezier(.2, .9, .3, 1.25) both; }
.seat.s1.fresh .cd { --fx: -30%; --fy: -90%; } .seat.s2.fresh .cd { --fx: 30%; --fy: -90%; } .seat.s0.fresh .cd { --fx: 0%; --fy: 130%; }
@keyframes zft-in { from { transform: translate(var(--fx, 0), var(--fy, 100%)) scale(1.5) rotate(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.seat.fresh.k-straight .cd { animation: zft-in .22s cubic-bezier(.2, .9, .3, 1.25) both, zft-glint .34s ease-out both; animation-delay: calc(var(--i) * 45ms), calc(var(--i) * 60ms + 260ms); }
@keyframes zft-glint { 0% { transform: none; filter: none; } 45% { transform: translateY(-22%); filter: brightness(1.5) drop-shadow(0 0 6px #ffe08a); } 100% { transform: none; filter: none; } }
.seat.fresh.k-pairs .cd { animation: zft-in .22s both, zft-hop .3s ease-out both; }
.seat.fresh.k-pairs .cd:nth-child(4n+1), .seat.fresh.k-pairs .cd:nth-child(4n+2) { --hop: -24%; }
.seat.fresh.k-pairs .cd:nth-child(n+1) { animation-delay: 0s, 260ms; } .seat.fresh.k-pairs .cd:nth-child(n+3) { animation-delay: 0s, 400ms; }
.seat.fresh.k-pairs .cd:nth-child(n+5) { animation-delay: 0s, 540ms; } .seat.fresh.k-pairs .cd:nth-child(n+7) { animation-delay: 0s, 680ms; } .seat.fresh.k-pairs .cd:nth-child(n+9) { animation-delay: 0s, 820ms; }
@keyframes zft-hop { 0% { transform: none; } 45% { transform: translateY(var(--hop, -24%)) rotate(-4deg); filter: brightness(1.35); } 100% { transform: none; } }
.seat.fresh.k-plane .cd, .seat.fresh.k-plane1 .cd, .seat.fresh.k-plane2 .cd { animation: zft-plane .42s cubic-bezier(.1, .8, .2, 1) both; animation-delay: calc(var(--i) * 18ms); }
@keyframes zft-plane { from { transform: translateX(-420%) skewX(-24deg) scale(1.2); opacity: 0; filter: blur(2px); } 70% { transform: translateX(14%) skewX(6deg); opacity: 1; filter: none; } to { transform: none; opacity: 1; } }
.seat.fresh.k-bomb .cd, .seat.fresh.k-rocket .cd { animation: zft-slam .3s cubic-bezier(.6, 0, .9, .4) both; animation-delay: calc(var(--i) * 30ms); }
@keyframes zft-slam { from { transform: translateY(-160%) scale(3.2) rotate(-14deg); opacity: 0; } 80% { transform: scale(.92); opacity: 1; filter: brightness(2); } to { transform: none; opacity: 1; filter: drop-shadow(0 0 8px #ff7a2a); } }
.seat.fresh.k-triple1 .cd:nth-last-child(1), .seat.fresh.k-triple2 .cd:nth-last-child(-n+2), .seat.fresh.k-four2 .cd:nth-last-child(-n+2), .seat.fresh.k-four22 .cd:nth-last-child(-n+4) { animation-delay: 180ms; }
.seat.warn > i { color: #ffb3a3; animation: zft-warn .55s ease-in-out infinite alternate; }
@keyframes zft-warn { from { text-shadow: none; } to { color: #ff5a3a; text-shadow: 0 0 8px #ff3d00; } }
.top .mult.hot { color: #ff7a4a; animation: zft-hot .7s ease-in-out infinite alternate; }
@keyframes zft-hot { from { text-shadow: 0 0 4px #ff3d00, 0 -2px 8px #ff7a2a; } to { text-shadow: 0 0 10px #ff3d00, 0 -5px 16px #ffb347; transform: scale(1.08); } }
.dlg { overflow-x: hidden; }
.dlg .calc span { animation: zft-pop .3s cubic-bezier(.2, .9, .3, 1.4) both; animation-delay: calc(var(--i) * .16s + .15s); }
.dlg .dmg { animation: zft-pop .4s cubic-bezier(.2, .9, .3, 1.5) both; animation-delay: 1s; }
@keyframes zft-pop { from { transform: scale(1.5); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .seat.fresh .cd, .seat.warn > i, .top .mult.hot, .dlg .calc span, .dlg .dmg { animation: none !important; } }

/* 「10」两位数：压窄一点，叠着露一条也看得全 */
.cd b.t { display: inline-block; transform: scaleX(.7); transform-origin: left center; letter-spacing: -.06em; }

/* 声音开关 */
.sndrow { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.sndrow button { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; font-size: 16px; background: #fff8; color: #2a2118; }
.sndrow button span { font-size: 13px; font-weight: 400; } .sndrow button.on span { color: var(--red); font-weight: 700; } .sndrow button.off { opacity: .6; }
/* 竖屏牌桌顶栏：多了「声音」键，标题压成一行，放不下就省略 */
#app.in-table:not(.wide) .top { gap: 6px; }
#app.in-table:not(.wide) .top > b { min-width: 0; font-size: 14px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app.in-table:not(.wide) .top .back { padding: 3px 7px; white-space: nowrap; flex: none; }

/* 牌面照标准扑克：左上、右下各一个牌角（右下的倒着），点阵在牌身正中三列。--w＝这张牌的宽，三种大小的牌共用一套比例 */
.cd { --w: 44px; } .hand .cd { --w: var(--cw); } .cd.sm { --w: var(--scw, 40px); }
#app .cd { padding: calc(var(--w) * .05) calc(var(--w) * .07); }
#app .cd > b, #app .cd .ix2 b { font-size: calc(var(--w) * .19); letter-spacing: -.02em; line-height: 1.05; transform: scaleX(.82); transform-origin: 0 0; }
#app .cd > i, #app .cd .ix2 i { font-size: calc(var(--w) * .15); line-height: 1; margin-top: .08em; }
/* 花色是矢量图形：高一个字、宽 0.84 个字，颜色跟文字走 */
.su { display: block; width: .84em; height: 1em; fill: currentColor; }
#app .cd > b.jk, #app .cd .ix2 b.jk { font-size: calc(var(--w) * .15); line-height: 1; letter-spacing: -.1em; }
#app .cd b.t { transform: scaleX(.68); letter-spacing: -.08em; }
.cd .ix2 { position: absolute; right: calc(var(--w) * .07); bottom: calc(var(--w) * .05); display: flex; flex-direction: column; align-items: flex-start; transform: rotate(180deg); pointer-events: none; }
/* 牌身花色照公版扑克的比例（2026-10-06 对着公版英式牌面量的）：花色宽约牌宽的 18%、是牌角花色的近两倍，两列在牌宽的 32%、68%（比公版的 25%、75% 靠里，给加大的牌角让位） */
#app .cd .pp { left: 32%; right: 32%; top: 17%; bottom: 17%; font-size: calc(var(--w) * .2); }
#app .cd .pp.ace u { font-size: 2.6em; }
/* 齿轮键 */
.top .gearbtn { display: inline-flex; align-items: center; padding: 4px 8px; } .top .gearbtn svg { display: block; }
/* 另外两家出牌前想一小会儿：三个点轮着亮 */
.say.think { display: inline-flex; gap: 5px; align-items: center; min-height: 1.4em; }
.say.think u { width: 6px; height: 6px; border-radius: 50%; background: currentColor; text-decoration: none; animation: zft-think .9s ease-in-out infinite both; }
.say.think u:nth-child(2) { animation-delay: .15s; } .say.think u:nth-child(3) { animation-delay: .3s; }
@keyframes zft-think { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
/* 底牌（当地主拿到的那三张）：不再整张染黄，左下角盖一个小小的「底」字印 */
#app .cd.mk { background: linear-gradient(#fffaf0, #f3e7c9); } #app .cd.art.mk { background: #fffaf0 100% 70%/90% 90% no-repeat; filter: none; }
#app .cd.mk.fj { background-image: url(/zhafantian/img/card/card-j.webp); } #app .cd.mk.fq { background-image: url(/zhafantian/img/card/card-q.webp); } #app .cd.mk.fk { background-image: url(/zhafantian/img/card/card-k.webp); }
#app .cd.mk.js { background-image: url(/zhafantian/img/card/card-joker-s.webp); } #app .cd.mk.jb { background-image: url(/zhafantian/img/card/card-joker-b.webp); }
.cd.mk::after { content: "底"; position: absolute; left: calc(var(--w) * .07); bottom: calc(var(--w) * .07); width: calc(var(--w) * .22); height: calc(var(--w) * .22); display: grid; place-items: center; border-radius: 50%; background: #c0392b; color: #fff3c9; font: 700 calc(var(--w) * .14)/1 "KaiTi", "STKaiti", serif; box-shadow: 0 0 0 1px #fff3c9aa; }
/* 拿底牌的过场：桌子正中亮出底牌，停一下飞向地主；手牌里那几张先空着，到手弹一下 */
.botrow { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); padding: 8px 14px 10px; text-align: center; white-space: nowrap; background: #0b2228e6; border: 2px solid var(--gold); border-radius: 12px; box-shadow: 0 6px 18px #000a; pointer-events: none; }
.botrow em { display: block; margin-bottom: 6px; font-style: normal; font-size: 14px; color: var(--gold2); letter-spacing: 1px; }
.botcards { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
#app .botrow .cd.sm { margin-left: 4px; cursor: default; }
.botrow .tkgrp { position: relative; padding-left: 14px; border-left: 1px dashed var(--gold); }
.botrow .tkgrp u { display: block; margin-bottom: 4px; text-decoration: none; font-size: 12px; color: #9fe0d2; }
.botrow.in { animation: zft-botin .3s ease-out both; }
.botrow.in .cd { animation: zft-flip .42s ease-out both; }
.botrow.in .cd:nth-child(2) { animation-delay: .12s; } .botrow.in .cd:nth-child(3) { animation-delay: .24s; }
.botrow.hold .tkgrp .cd:last-child { animation: zft-flip .4s ease-out both; }
.fx-card img { display: block; width: 100%; border-radius: 6%; box-shadow: 0 4px 12px #000a; }
.botrow.out { animation: zft-botout .36s cubic-bezier(.5, 0, .9, .5) both; }
@keyframes zft-botin { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes zft-fadein { from { opacity: 0; transform: translateY(-40%); } to { opacity: 1; transform: none; } }
@keyframes zft-flip { from { transform: rotateY(90deg) scale(1.2); filter: brightness(.3); } to { transform: none; filter: none; } }
@keyframes zft-botout { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.35); } }
#app .cd.hid { opacity: 0; }
.hand.pulse .cd.mk { animation: zft-got .6s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes zft-got { 0% { opacity: 0; transform: translateY(-70%) scale(1.15); } 55% { opacity: 1; transform: translateY(-14%); filter: brightness(1.35) drop-shadow(0 0 8px #ffe08a); } 100% { transform: none; filter: none; } }
/* 顺手牵羊多拿的那张：小印换成「牵」 */
.cd.mk.tk::after { content: "牵"; background: #2f7f86; }
@media (prefers-reduced-motion: reduce) { .botrow.in, .botrow.in .cd, .botrow.out, .hand.pulse .cd.mk { animation: none !important; } }
/* 小牌上的大小王：右下那个倒着的 JOKER 会压住画，不要 */
#app .cd.sm.js .ix2, #app .cd.sm.jb .ix2 { display: none; }
/* 放计的过场横幅：暗色带子横穿屏幕，小图、计名、是谁放的、红印 */
#fx > .fx-cut { left: 0; right: 0; height: 2.6em; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: .35em; }
.fx-cut .bg { position: absolute; inset: 0 -10%; background: linear-gradient(90deg, #0b222800, #0b2228f2 14%, #123a44f2 50%, #0b2228f2 86%, #0b222800); border-block: .05em solid #e7b84d; box-shadow: 0 0 1em #000a; }
.fx-cut.opp .bg { background: linear-gradient(90deg, #3a0f0800, #4a120af2 14%, #6a2012f2 50%, #4a120af2 86%, #3a0f0800); }
.fx-cut img { position: relative; height: 2.9em; width: auto; max-width: 3.4em; object-fit: contain; filter: drop-shadow(0 .08em .2em #000a); }
.fx-cut .tx { position: relative; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.fx-cut .tx b { font-weight: 900; letter-spacing: .08em; white-space: nowrap; color: #fdf6e3; paint-order: stroke fill; -webkit-text-stroke: .06em #0b2228; text-shadow: 0 .05em 0 #000, 0 0 .3em #e7b84d; }
.fx-cut.opp .tx b { -webkit-text-stroke-color: #3a0f08; text-shadow: 0 .05em 0 #000, 0 0 .3em #ff5a2a; }
.fx-cut .tx span { margin-top: .25em; max-width: 17em; font: 700 .3em/1.3 "KaiTi", "STKaiti", serif; letter-spacing: .05em; color: #ffe08a; white-space: normal; text-align: left; }
.fx-cut em { position: relative; display: grid; place-items: center; width: 1.5em; height: 1.5em; font-style: normal; font-size: .5em; font-weight: 900; color: #fff3c9; background: #c0392b; border-radius: .14em; box-shadow: inset 0 0 0 .07em #c0392b, inset 0 0 0 .12em #fff3c9aa, 0 .08em .3em #0008; }
.fx-prop img { display: block; width: 100%; filter: drop-shadow(0 4px 10px #0009); }
.fx-pop.heal { color: #8ff0a0; }

/* 计的说明：鼠标停上去出气泡（手机点一下出提示条）；气泡相对整行摆，不会伸出屏幕 */
.jirow { position: relative; }
.tip { cursor: help; border-bottom: 1px dotted currentColor; }
/* 主界面「带的计」清单：小图、计名、哪一类、谁带的、详细说明 */
.jilist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.jilist li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #0003; border: 1px solid #e7b84d55; border-radius: 10px; text-align: left; }
.jilist img { flex: none; width: 44px; height: 44px; object-fit: contain; }
.jilist b { font-size: 15px; color: var(--gold2); } .jilist i { font-style: normal; font-size: 12px; font-weight: 400; color: var(--dim); margin-left: 6px; }
.jilist p { margin: 2px 0 0; font-size: 13px; font-weight: 400; text-align: left; width: auto; }
.pc-j .jimg { float: left; width: 34px; height: 34px; object-fit: contain; margin: 0 6px 0 0; }

/* 伙伴小头像、级别筛选 */
.pc .pface { float: left; width: 58px; height: 58px; margin: 0 10px 2px 0; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--paper); border: 2px solid var(--gold); }
.pc.lock .pface { filter: grayscale(1) brightness(.75); }
.pc .btns { clear: both; }
.rarf { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.rarf button { padding: 3px 12px; font-size: 13px; background: #0004; color: var(--ink); box-shadow: none; }
.rarf button.on { background: var(--paper); color: #2a2118; }
/* 行头详情 */
.slot[data-do] { cursor: pointer; }
.dlg.gi { text-align: center; } .dlg.gi .pic { width: 96px; height: 96px; margin: 0 auto 6px; } .dlg.gi .pic img { width: 100%; height: 100%; object-fit: contain; }
.dlg.gi .gi-v { font-size: 18px; color: var(--red); }
.gi-q { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .gi-q i { flex-basis: 100%; font-style: normal; font-size: 12px; font-weight: 400; color: #7a6a52; }
.gi-q span { padding: 1px 7px; border: 1px solid #b89a5a; border-radius: 6px; font-size: 12px; font-weight: 400; color: #5a4a3a; } .gi-q span.on { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
/* 个人资料页 */
.ava[data-do], .who[data-do] { cursor: pointer; }
.mehead { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; }
.ava.big { width: 96px; height: 96px; }
.mehead h2 { margin: 0; font-size: 24px; letter-spacing: 2px; } .mehead p { margin: 2px 0; font-size: 13px; font-weight: 400; color: var(--dim); text-align: left; }
.mehead .pw { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; color: var(--gold2); } .mehead .pw .ic { width: 22px; height: 22px; }
.sec { margin: 14px 0 6px; padding-left: 8px; border-left: 4px solid var(--gold); font-size: 16px; letter-spacing: 2px; text-align: left; }
.mebox.six { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jilist.team .pf2 { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--paper); border: 2px solid var(--gold); }
/* 自己的头像：少馆主小像 */
.ava { background: var(--paper) url(/zhafantian/img/face/me-m.webp) 50% 12%/cover no-repeat; }
/* 竖屏顶栏：多了齿轮键，名字那一行不折行 */
#app:not(.wide) .who { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 阵容座位上的头像、主界面阵容小头像、「带的计」一排小图 */
.seatbox .sface { display: block; width: 64px; height: 64px; margin: 4px auto; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--paper); border: 2px solid var(--gold); }
.seatbox .sface.none { border-style: dashed; background: #0001; }
.chip { display: inline-flex; align-items: center; gap: 5px; } .chip .cface { width: 22px; height: 22px; margin-left: -4px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--paper); }
.jiicons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jiic { border-bottom: 0; display: inline-flex; } .jiic img { width: 40px; height: 40px; object-fit: contain; padding: 3px; background: #0004; border: 1.5px solid var(--gold); border-radius: 10px; }
/* 阵容座位：头像在左、文字在右（座位名与星、名字、计名、计的说明） */
.seatbox { display: flex; align-items: center; gap: 10px; text-align: left; flex: 1 1 240px; }
.seatbox .sface { flex: none; margin: 0; }
.seatbox .stx { min-width: 0; } .seatbox .stx i { color: #7a6a52; }
.seatbox .stx p { margin: 2px 0 0; font-size: 12px; font-weight: 400; line-height: 1.4; color: #5a4a3a; text-align: left; width: auto; }
/* 伙伴卡：升星后计怎么变 */
.pc-up { clear: both; margin-top: 4px; font-size: 12px; font-weight: 400; color: #7a6a52; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.pc-up span { padding: 0 6px; border: 1px solid #b89a5a88; border-radius: 6px; } .pc-up span.on { border-color: var(--red); color: var(--red); font-weight: 700; }
/* 放计之后手牌里指给玩家看的那几张：亮起来、往上顶一下 */
.hand .cd.glow { animation: zft-glow 1.2s ease-in-out both; }
@keyframes zft-glow { 0%, 100% { transform: none; filter: none; box-shadow: -1px 1px 2px #0006; } 25%, 75% { transform: translateY(-22%); filter: brightness(1.15); box-shadow: 0 0 0 2px #ffd76a, 0 0 16px 4px #ffb347; } }
@media (prefers-reduced-motion: reduce) { .hand .cd.glow { animation: none !important; box-shadow: 0 0 0 2px #ffd76a; } }
/* 伙伴卡面：列表里的小卡（点开看大卡）、大卡（边框颜色跟级别走，名牌压在画的最下面一条） */
.rL { --rc: #c9962b; } .rE { --rc: #7a4bb0; } .rR { --rc: #2f6fae; } .rN { --rc: #8b8f8a; }
.pcart { float: left; width: 78px; aspect-ratio: 3 / 4; margin: 0 10px 4px 0; border: 2px solid var(--rc); border-radius: 6px; overflow: hidden; background: var(--paper); box-shadow: 0 1px 4px #0006; cursor: pointer; }
.pcart img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.seatbox .pcart, .jilist.team .pcart { float: none; flex: none; margin: 0; } .seatbox .pcart { width: 84px; } .jilist.team .pcart { width: 60px; }
.chip .pcart { float: none; flex: none; width: 33px; margin: 3px 0 3px -3px; border-width: 1.5px; border-radius: 4px; } .chip:has(.pcart) { border-radius: 8px; }
.pcart.none { border: 2px dashed #b89a5a; background: #0001; box-shadow: none; cursor: default; }
.pcart.lock { cursor: default; } .pcart.lock img { filter: grayscale(1) brightness(.6); }
.bcard { position: relative; width: min(300px, 78vw, 58vh); aspect-ratio: 3 / 4; border: 4px solid var(--rc); border-radius: 14px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 2px #2a2118, 0 0 0 4px var(--gold), 0 10px 30px #000a; }
.bcard img, .bcard video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bcard .bc-r { position: absolute; left: 0; top: 0; padding: 2px 12px 3px 10px; border-radius: 0 0 10px 0; background: var(--rc); color: #fff; font-size: 13px; letter-spacing: 2px; }
.bcard .bc-n { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 4px 10px 5px; background: #f0e3c2ee; color: #2a2118; border: 2px solid var(--gold); border-radius: 8px; text-align: center; line-height: 1.3; }
.bcard .bc-n b { display: block; font-size: 20px; letter-spacing: 3px; } .bcard .bc-n i { display: block; font-style: normal; font-size: 12px; font-weight: 400; color: #5a4a3a; } .bcard .bc-n em { font-style: normal; font-size: 13px; color: #b9862b; }
.bcard.rL::after, .bcard.rE::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, #fff8 50%, transparent 60%); background-size: 300% 100%; animation: zft-shine 3.2s ease-in-out infinite; pointer-events: none; }
.bcard.in { animation: zft-flip .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.bcard.new { box-shadow: 0 0 0 2px #2a2118, 0 0 0 4px var(--gold), 0 0 26px 6px var(--rc); }
@keyframes zft-shine { 0%, 55% { background-position: 120% 0; } 100% { background-position: -60% 0; } }
.mask.cv { cursor: pointer; }
.got .bcard { width: min(240px, 64vw); margin: 4px auto 10px; }
/* 牌桌中间那块：织锦桌毡平铺，四周压暗；茶馆的牌局换绛红 */
.mid { background: radial-gradient(ellipse at 50% 45%, #0000 35%, #0008), url(/zhafantian/img/felt-guan.webp) 50% 50%/360px; }
.table.tea .mid { background-image: radial-gradient(ellipse at 50% 45%, #0000 35%, #0008), url(/zhafantian/img/felt-tea.webp); }
/* 茶馆的座位名字带「队友、地主／农民」，窄屏一行放不下：让它折行，别压到对面那家 */
.seat { min-width: 0; } .table.tea .seat > i { white-space: normal; line-height: 1.3; }
.altar { height: 170px; background: url(/zhafantian/img/scene-fangxian.webp) 50% 58%/cover; }
.hallhead { height: 170px; background: url(/zhafantian/img/scene-chaguan.webp) 50% 50%/cover; }
.altar::before, .hallhead::before { background: #0b222866; }
.altar p, .altar span { text-shadow: 0 1px 4px #000c; }
@media (prefers-reduced-motion: reduce) { .bcard.in, .bcard::after { animation: none !important; } }
#app .cd > b.jk, #app .cd .ix2 b.jk { transform: none; }
/* 宽屏右栏里自己那一块：和上面的对家隔开 */
.opp.me { margin-top: 4px; padding-top: 10px; border-top: 1px solid #d9b56a66; }

/* ══ 公共件（2026-10-06 界面打磨，审核清单〇之 1～5）══ */

/* 弹层底座：遮罩渐暗、弹层由小放大淡入；高度按屏幕封顶，正文在里面滚、按钮固定在弹层底；右上角关闭键 */
.mask { padding: 12px; animation: zft-mask .18s ease-out both; }
.mask > .dlg { animation: zft-dlg .24s cubic-bezier(.2, .9, .3, 1.25) both; }
.mask.still, .mask.still > .dlg, .mask.still > .bcard, .mask.still .calc span, .mask.still .dmg, .mask.still .zhang { animation: none !important; }
@keyframes zft-mask { from { opacity: 0; } to { opacity: 1; } }
@keyframes zft-dlg { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
.dlg { position: relative; display: flex; flex-direction: column; max-height: calc(100dvh / var(--z, 1) - 24px); overflow: hidden; padding: 16px 16px 14px; }
.dlg > h3 { flex: none; }
.dlg:has(> .dx) > h3 { padding: 0 34px; }
.dlg-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px; scrollbar-width: thin; scrollbar-color: #b89a5a88 transparent; }
.dlg .dlg-f { flex: none; margin: 12px 0 0; justify-content: center; }
.dlg-f button { min-width: 104px; }
.dx { position: absolute; right: 8px; top: 8px; z-index: 2; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #2a211812; border: 1.5px solid #b89a5a; box-shadow: none; }
.dx::before, .dx::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px; margin: -1px 0 0 -7.5px; border-radius: 1px; background: #5a4a3a; transform: rotate(45deg); }
.dx::after { transform: rotate(-45deg); }
.askd { width: min(360px, 100%); }
.askd .dlg-b p { font-weight: 400; }
@media (max-height: 520px) { .wide .dlg { padding: 10px 16px; } .wide .dlg .dlg-f { margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .mask, .mask > .dlg { animation: none !important; } }

/* 「？」键与说明弹层 */
.qm, .subtabs button.qm { flex: none; width: 30px; height: 30px; margin-left: auto; padding: 0; border: 2px solid var(--gold); border-radius: 50%; background: #0006; color: var(--gold2); font-size: 17px; line-height: 1; box-shadow: none; }
.subtabs { align-items: flex-end; }
.subtabs button.qm { align-self: center; margin-bottom: 4px; }
.pagehd { display: flex; align-items: center; margin-bottom: 8px; } .pagehd .back2 { margin: 0; }
.help { list-style: none; margin: 0; padding: 0; text-align: left; font-weight: 400; font-size: 15px; }
.help li { position: relative; padding: 6px 0 6px 18px; border-bottom: 1px dashed #b89a5a77; }
.help li:last-child { border-bottom: 0; }
.help li::before { content: ""; position: absolute; left: 3px; top: 14px; width: 6px; height: 6px; background: var(--red); transform: rotate(45deg); }

/* 「未开张」的章（朱文方印，斜着盖） */
.zhang { display: inline-block; padding: 1px 7px 2px; border: 2.5px solid #c0392b; border-radius: 6px; background: #f0e3c2d9; color: #c0392b; font-style: normal; font-size: 15px; font-weight: 700; letter-spacing: 2px; text-indent: 2px; white-space: nowrap; transform: rotate(-10deg); box-shadow: inset 0 0 0 1px #c0392b55; }
/* 未开放的功能：小弹层，上图、中间几句话、盖章 */
.soond { width: min(340px, 100%); text-align: center; }
.soon-pic { position: relative; flex: none; width: 92px; height: 92px; margin: 2px auto 4px; }
.soon-pic .ic { width: 100%; height: 100%; }
.soon-pic .zhang { position: absolute; right: -46px; bottom: 2px; animation: zft-stamp .32s .22s cubic-bezier(.5, 0, .9, .4) both; }
@keyframes zft-stamp { from { opacity: 0; transform: rotate(-10deg) scale(2.6); } to { opacity: 1; transform: rotate(-10deg); } }
.soond .dlg-b p { font-weight: 400; }

/* 三种状态。没解锁（.st-lock，带铜锁角标、写解锁条件）、没开张（.st-soon，贴封条）：实色深底配浅色字；可用但空着（.st-empty）：虚线金框加「＋」 */
#app .st-lock, #app .st-soon { --ink: #e3ece7; --dim: #a9bbb3; position: relative; background: #16343b; color: #e3ece7; border-color: #5f7a78; outline-color: #0005; box-shadow: 0 2px 5px #0006; opacity: 1; }
#app .st-lock b, #app .st-soon b { color: #e9dfc2; }
#app .st-lock em { color: #ffb9a8; }
#app .st-lock .ic, #app .st-soon .ic, #app .st-lock > img, #app .st-lock .pcart img { filter: grayscale(.75) brightness(.72); opacity: 1; }
#app .st-lock::after, #app .st-soon::after { content: ""; position: absolute; right: -6px; top: -8px; z-index: 1; width: 28px; height: 28px; background: url(/zhafantian/img/ji/lock.webp) 50% 50%/contain no-repeat; filter: drop-shadow(0 1px 2px #000a); transform: rotate(10deg); pointer-events: none; }
#app .st-soon::after { width: 30px; height: 30px; background-image: url(/zhafantian/img/ui/fengtiao.webp); transform: none; }
#app .slot.st-lock::after { right: 2px; top: 2px; width: 22px; height: 22px; }
#app .side .st-soon::after { right: -4px; top: -6px; width: 24px; height: 24px; }
.cond { flex: none; padding: 1px 9px; border: 1px solid #ffd9a077; border-radius: 10px; font-size: 12px; font-weight: 400; color: #ffd9a0; white-space: nowrap; }
.pc.st-lock .cond { display: inline-block; margin-top: 6px; }
#app .st-empty { --ink: #f0e3c2; --dim: #a9b8ae; position: relative; background: #0b222899; color: #f0e3c2; border: 2px dashed var(--gold); outline: 0; box-shadow: none; opacity: 1; }
#app .slot.st-empty::after { content: "＋"; position: absolute; right: 5px; top: 1px; font-size: 16px; line-height: 1; color: var(--gold2); }
#app .st-empty .pcart.none, #app .st-lock .pcart.none { position: relative; background: #0004 url(/zhafantian/img/ui/chair.webp) 50% 62%/64% auto no-repeat; }
#app .st-empty .pcart.none::after { content: "＋"; position: absolute; right: 5px; top: 2px; font-size: 20px; line-height: 1; color: var(--gold2); }
#app .st-lock .pcart.none { border: 2px solid #5f7a78; filter: grayscale(1) brightness(.6); }
#app .st-empty .stx i, #app .st-lock .stx i, #app .st-empty .stx p, #app .st-lock .stx p { color: var(--dim); }
/* 打过的关：正常亮度，盖一枚「已胜」朱印 */
.stages li.ok { opacity: 1; }
.won { flex: none; padding: 0 5px; border: 2px solid #c0392b; border-radius: 5px; color: #c0392b; font-style: normal; font-size: 13px; letter-spacing: 1px; transform: rotate(-9deg); }
/* 点不了的按钮：统一成实色灰（原先是半透明，红键会变成暗粉色） */
button:disabled, #app button:disabled { opacity: 1; background: #6b7775; color: #c9d2ce; border-color: #8a9692; box-shadow: none; text-shadow: none; animation: none; }

/* 价钱与进度的小牌子：「现有／要」，不够时变红 */
.price { display: flex; align-items: center; gap: 4px; width: fit-content; margin: 2px auto; padding: 1px 10px; border: 1.5px solid var(--gold); border-radius: 12px; background: #0005; color: var(--gold2); font-size: 13px; white-space: nowrap; }
.price .ic { width: 20px; height: 18px; }
.price.short { color: #ff9a86; border-color: #ff9a86; }
.btns.ctr { justify-content: center; }
.luck div.lkbuy { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.luck .price { margin: 0; background: #2a211814; color: #5a4a3a; border-color: #b89a5a; font-size: 12px; } .luck .price.short { color: var(--red); border-color: var(--red); }
.luck .lv { display: flex; gap: 3px; margin: 3px 0; } .lv i { width: 18px; height: 6px; border: 1px solid #b89a5a; border-radius: 3px; background: #2a21181f; } .lv i.on { background: var(--red); border-color: var(--red); }
.luck .cond { color: #ffd9a0; }
.prog { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; font-size: 13px; }
.prog u { flex: 1; height: 9px; border: 1px solid var(--gold); border-radius: 5px; background: #0006; overflow: hidden; text-decoration: none; }
.prog u i { display: block; height: 100%; background: linear-gradient(90deg, #d9b56a, #f6e2a6); }
.prog b { color: var(--gold2); }
.bond { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 10px; padding: 3px 12px; border: 1.5px solid var(--gold); border-radius: 14px; background: #0005; font-size: 13px; }
.bond span { display: flex; gap: 5px; } .bond span i { width: 9px; height: 9px; border: 1.5px solid var(--gold); transform: rotate(45deg); } .bond span i.on { background: var(--gold2); } .bond span i:nth-child(2) { margin-right: 6px; }
.bond em { font-style: normal; font-weight: 400; color: var(--dim); } .bond.on b { color: var(--gold2); }
.shopbar { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; margin-bottom: 10px; padding: 8px 12px 8px 92px; border: 2px solid var(--gold); border-radius: 10px; background: #0b2228cc; }
.shopbar b { flex: 1; font-size: 15px; text-align: left; }
.shopbar .zhang { position: absolute; left: 10px; top: 50%; margin-top: -14px; }
.pricetag { flex: none; padding: 3px 10px; border: 1.5px dashed #b89a5a; border-radius: 6px; font-style: normal; font-size: 13px; color: #7a6a52; white-space: nowrap; }
.setx { margin: 12px auto 0; } .setx .link { color: #7a6a52; font-size: 13px; }
.stages .sit { padding: 8px 22px; font-size: 16px; background: var(--red); color: #fff; }
.breath { animation: zft-breath 1.8s ease-in-out infinite; }
@keyframes zft-breath { 0%, 100% { box-shadow: 0 2px 0 #0005, 0 0 0 0 #ffd76a00; } 50% { box-shadow: 0 2px 0 #0005, 0 0 14px 3px #ffd76aaa; } }
@media (prefers-reduced-motion: reduce) { .breath, .soon-pic .zhang { animation: none !important; } }

/* ── 「获得」层：过关奖励、行头掉落、访贤请到人的全屏过场（gain.ts）。挂在 body 上，盖住整页、挡点击 ── */
#gain { position: fixed; inset: 0; z-index: 35; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; overflow: hidden; text-align: center; cursor: pointer; color: #f0e3c2; background: radial-gradient(ellipse at 50% 42%, #123a44f5, #061317fa 72%); --gc: #ffe08a; -webkit-tap-highlight-color: transparent; }
#gain.on { display: flex; animation: zft-mask .2s ease-out both; }
#gain.gq2 { --gc: #9fd6ad; } #gain.gq3 { --gc: #9cc6ee; } #gain.gq4 { --gc: #cdaef0; } #gain.gq5 { --gc: #f6dc8a; } #gain.gq6 { --gc: #f7b98a; } #gain.gq7 { --gc: #ff9a86; }
#gain.rN { --gc: #d6dad4; } #gain.rR { --gc: #9cc6ee; } #gain.rE { --gc: #cdaef0; } #gain.rL { --gc: #ffd76a; }
.gn-rays { position: absolute; left: 50%; top: 42%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; pointer-events: none; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gc) 26%, transparent) 0 7deg, transparent 7deg 20deg); -webkit-mask: radial-gradient(closest-side, #000 0, #0009 26%, transparent 60%); mask: radial-gradient(closest-side, #000 0, #0009 26%, transparent 60%); animation: gn-spin 28s linear infinite; }
@keyframes gn-spin { to { transform: rotate(360deg); } }
.gn-title { position: relative; display: flex; flex-direction: column; align-items: center; animation: gn-drop .45s cubic-bezier(.2, .9, .3, 1.3) both; }
.gn-title b { padding: 0 22px 2px; font: 900 42px/1.25 "STXingkai", "华文行楷", "KaiTi", "STKaiti", "楷体", serif; letter-spacing: 12px; text-indent: 12px; color: #ffe9a8; text-shadow: 0 2px 0 #5a2a00, 0 0 14px #ff9a3c, 0 0 30px #ff7a2a88; border-block: 2px solid #e7b84d; background: linear-gradient(90deg, #b9392c00, #b9392ccc 22%, #b9392ccc 78%, #b9392c00); }
.gn-title span { margin-top: 6px; font-size: 14px; font-weight: 400; color: #d0ddd6; }
/* 标题字多（「到账 · 掌柜卡」这一类）：收小字号和字距，一行放下 */
.gn-title b.long { font-size: 30px; letter-spacing: 4px; text-indent: 4px; white-space: nowrap; }
.gn-title b.xl { font-size: 23px; letter-spacing: 2px; text-indent: 2px; }
@keyframes gn-drop { from { opacity: 0; transform: translateY(-40px) scale(1.5); } to { opacity: 1; transform: none; } }
.gn-items { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; max-width: 520px; }
.gn-it { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100px; opacity: 0; }
.gn-it.in { animation: gn-pop .42s cubic-bezier(.2, .9, .3, 1.45) both; }
@keyframes gn-pop { from { opacity: 0; transform: translateY(26px) scale(.3); } to { opacity: 1; transform: none; } }
.gn-it.q0 { --c1: #1d5d67; --c2: #3b9299; }
.gn-pic { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border: 2px solid var(--gold); border-radius: 12px; background: linear-gradient(var(--c2), var(--c1)); box-shadow: inset 0 0 0 1.5px #fff6, inset 0 -18px 16px -8px #0007, 0 0 18px 3px color-mix(in srgb, var(--c2) 65%, transparent); }
.gn-pic img { max-width: 64px; max-height: 60px; filter: drop-shadow(0 2px 2px #0006); }
.gn-it em { font: 700 22px/1.2 Georgia, "Times New Roman", serif; font-style: normal; color: #ffe08a; text-shadow: 0 1px 0 #5a2a00, 0 0 8px #ff9a3c88; white-space: nowrap; min-height: 26px; }
.gn-it b { font-size: 15px; } .gn-it i { font-style: normal; font-size: 12px; font-weight: 400; color: #cfe0da; }
.gn-note { position: relative; margin: 0; font-size: 14px; color: #ffe9a8; }
.gn-btns { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gn-btns button { min-width: 100px; padding: 9px 18px; font-size: 17px; }
.gn-btns button.ghost { background: #ffffff1f; color: #f0e3c2; }
.gn-note, .gn-btns { opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; }
.gn-btns { pointer-events: none; }
#gain.ready .gn-note, #gain.ready .gn-btns { opacity: 1; transform: none; } #gain.ready .gn-btns { pointer-events: auto; }
.gn-skip { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; font-size: 12px; font-weight: 400; color: #a9b8ae; }
#gain.ready .gn-skip { display: none; }
#gain.fast :not(.gn-rays):not(.lp) { animation-duration: .01s !important; animation-delay: 0s !important; transition: none !important; }
/* 访贤的揭示：柴门晃两下推开、门里出光、大卡翻出来、名字和星落款 */
.rv-door { position: absolute; left: 50%; top: 42%; width: min(230px, 46vh); margin: 0; transform: translate(-50%, -50%); animation: rv-doorin .35s ease-out both, rv-knock .5s .4s ease-in-out both; pointer-events: none; }
.rv-door img { display: block; width: 100%; filter: drop-shadow(0 8px 20px #000c); }
@keyframes rv-doorin { from { opacity: 0; transform: translate(-50%, -44%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes rv-knock { 0%, 100% { transform: translate(-50%, -50%); } 25% { transform: translate(-50%, -50%) rotate(-2.5deg); } 50% { transform: translate(-50%, -50%) rotate(2deg); } 75% { transform: translate(-50%, -50%) rotate(-1.5deg); } }
#gain.rv.open .rv-door { animation: rv-doorout .5s ease-in both; }
@keyframes rv-doorout { from { opacity: 1; transform: translate(-50%, -50%); filter: none; } to { opacity: 0; transform: translate(-50%, -50%) scale(2.6); filter: brightness(3); } }
#gain.rv .gn-rays { opacity: 0; transition: opacity .35s; } #gain.rv.open .gn-rays { opacity: 1; }
.rv-card { position: relative; opacity: 0; perspective: 800px; }
#gain.rv.card .rv-card { animation: rv-card .55s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes rv-card { from { opacity: 0; transform: rotateY(90deg) scale(.55); filter: brightness(3); } 60% { opacity: 1; filter: brightness(1.5); } to { opacity: 1; transform: none; filter: none; } }
.rv-card .bcard { width: min(250px, 62vw, 40vh); box-shadow: 0 0 0 2px #2a2118, 0 0 0 4px var(--gold), 0 0 34px 8px var(--rc); }
.rv-card .bc-n em { display: none; }
.rv-tx { position: relative; opacity: 0; transform: translateY(8px); }
#gain.rv.card .rv-tx { opacity: 1; transform: none; transition: opacity .3s .4s, transform .3s .4s; }
.rv-tx p { margin: 0 auto; }
.rv-h { font-size: 22px; letter-spacing: 2px; color: #ffe9a8; text-shadow: 0 0 10px var(--gc); }
.rv-stars { display: flex; justify-content: center; gap: 4px; margin: 5px 0; }
.rv-stars img { width: 26px; height: 26px; filter: grayscale(1) brightness(.4); } .rv-stars img.on { filter: drop-shadow(0 0 4px #ffd76a); } .rv-stars img.pop { animation: rv-star .45s cubic-bezier(.2, .9, .3, 1.6) both; }
@keyframes rv-star { from { transform: scale(3) rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.rv-d { width: fit-content; max-width: min(340px, 100%); font-size: 13px; font-weight: 400; text-align: left; color: #d0ddd6; }
.rv-n { font-size: 14px; color: #8ff0a0; }
/* 2026-10-08 访贤重做：门缝里的光（先蓝，史诗跳紫、传说再跳金）、开门的白光与光点、盖级别的印、金箔、连请十次的翻帖 */
.rv-glow { position: absolute; left: 50%; top: 42%; width: min(520px, 96vh); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--tc, #8fc4f5) 85%, #fff) 0, color-mix(in srgb, var(--tc, #8fc4f5) 55%, transparent) 30%, transparent 70%); opacity: 0; animation: rv-glow 1s .25s ease-in-out infinite alternate; }
@keyframes rv-glow { from { opacity: .35; transform: translate(-50%, -50%) scale(.82); } to { opacity: .85; transform: translate(-50%, -50%) scale(1.04); } }
#gain.rv.open .rv-glow { animation: rv-glowout .5s ease-out both; }
@keyframes rv-glowout { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } }
#gain.jolt:not(.open) .rv-door { animation: rv-jolt .42s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes rv-jolt { 0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); } 18% { transform: translate(-50%, -50%) scale(1.16) rotate(-4deg); filter: brightness(2.2); } 40% { transform: translate(-50%, -50%) scale(1.08) rotate(3.5deg); } 62% { transform: translate(-50%, -50%) scale(1.04) rotate(-2deg); } 100% { transform: translate(-50%, -50%) scale(1.03); filter: brightness(1.25); } }
.rv-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 42%, #fff 0, color-mix(in srgb, var(--gc) 80%, #fff) 22%, color-mix(in srgb, var(--gc) 35%, transparent) 55%, transparent 80%); }
#gain.rv.open .rv-flash { animation: rv-flash .7s ease-out both; }
@keyframes rv-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
#gain.boom { animation: rv-quake .45s linear both; }
@keyframes rv-quake { 0%, 100% { transform: none; } 15% { transform: translate(-7px, 4px); } 30% { transform: translate(6px, -5px); } 45% { transform: translate(-5px, -3px); } 60% { transform: translate(4px, 4px); } 80% { transform: translate(-2px, 1px); } }
.rv-sp { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.rv-sp i { position: absolute; left: 0; top: 0; width: var(--z); height: var(--z); margin: calc(var(--z) / -2); border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px var(--gc); opacity: 0; }
#gain.rv.open .rv-sp i { animation: rv-sp .95s var(--t) cubic-bezier(.1, .7, .3, 1) both; }
@keyframes rv-sp { from { opacity: 1; transform: rotate(var(--a)) translateX(20px) scale(1.4); } to { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(.2); } }
.rv-fall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .4s; }
#gain.rv.card .rv-fall, #gain.mn.gold .rv-fall { opacity: 1; }
.rv-fall i { position: absolute; left: var(--x); top: -14px; width: var(--z); height: calc(var(--z) * 1.5); border-radius: 1px 60% 1px 60%; background: linear-gradient(135deg, #fff6c8, var(--gc) 55%, color-mix(in srgb, var(--gc) 60%, #7a4a00)); animation: rv-fall var(--s) var(--t) linear infinite; }
@keyframes rv-fall { from { transform: translateY(-20px) rotate(var(--r)) rotateX(0); opacity: 0; } 8% { opacity: .95; } 85% { opacity: .9; } to { transform: translate(34px, 102vh) rotate(calc(var(--r) + 300deg)) rotateX(720deg); opacity: 0; } }
/* 史诗、传说的大卡：一道光来回扫 */
#gain.rE .rv-card::after, #gain.rL .rv-card::after { content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 38%, #fffc 50%, transparent 62%) 150% 0 / 260% 100% no-repeat; mix-blend-mode: screen; }
#gain.rE.card .rv-card::after, #gain.rL.card .rv-card::after { opacity: 1; animation: rv-shine 2.6s 1s ease-in-out infinite; }
@keyframes rv-shine { 0% { background-position: 150% 0; } 55%, 100% { background-position: -60% 0; } }
#gain.rL.card .rv-card .bcard { box-shadow: 0 0 0 2px #2a2118, 0 0 0 4px #ffd24a, 0 0 46px 14px #ffb400cc, 0 0 110px 30px #ff8a0066; }
.rv-seal { position: absolute; right: -14px; top: -12px; z-index: 2; padding: 3px 9px 4px; border: 2.5px solid #c8402a; border-radius: 6px; background: #fff6e4f2; color: #c8402a; font: 900 19px/1.15 "STXingkai", "华文行楷", "KaiTi", "STKaiti", "楷体", serif; letter-spacing: 3px; text-indent: 3px; font-style: normal; transform: rotate(12deg); box-shadow: 0 2px 6px #0008; opacity: 0; }
#gain.rE .rv-seal { border-color: #7a3fc0; color: #7a3fc0; } #gain.rL .rv-seal { border-color: #b8860b; color: #a8580a; background: linear-gradient(135deg, #fff3b8, #ffd24a); } #gain.rR .rv-seal { border-color: #2f6fb0; color: #2f6fb0; }
#gain.rv.seal .rv-seal { animation: rv-seal .32s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes rv-seal { from { opacity: 0; transform: rotate(-8deg) scale(3.2); } to { opacity: 1; transform: rotate(12deg) scale(1); } }
.rv-new { position: absolute; left: -12px; bottom: -10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ffe9a8; background: var(--red); color: #fff; font: 700 15px/26px "KaiTi", "STKaiti", "楷体", serif; font-style: normal; text-align: center; box-shadow: 0 2px 5px #0008; opacity: 0; }
#gain.rv.seal .rv-new { opacity: 1; transition: opacity .25s .2s; }
#gain.rv.rL.open .gn-rays, #gain.mn.gold .gn-rays { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gc) 30%, transparent) 0 6deg, transparent 6deg 18deg); animation-duration: 16s; }
/* 连请十次：十张帖子扣着发下来，一张一张翻 */
#gain.mn .gn-title, #gain.mn .mn-grid { visibility: hidden; animation: none; }
#gain.mn.deal .gn-title { visibility: visible; animation: gn-drop .45s cubic-bezier(.2, .9, .3, 1.3) both; } #gain.mn.deal .mn-grid { visibility: visible; }
.mn-grid { position: relative; display: grid; grid-template-columns: repeat(5, var(--mw)); justify-content: center; gap: 10px 8px; --mw: min(64px, calc((100vw - 64px) / 5)); }
.mn-c { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; opacity: 0; --rc2: #aab0aa; }
.mn-c.rR { --rc2: #6fb0ea; } .mn-c.rE { --rc2: #b98af0; } .mn-c.rL { --rc2: #ffd24a; }
#gain.deal .mn-c { animation: mn-deal .34s calc(var(--i) * 60ms) cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes mn-deal { from { opacity: 0; transform: translateY(-60vh) rotate(-24deg) scale(.6); } to { opacity: 1; transform: none; } }
.mn-f { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .46s cubic-bezier(.3, 1.5, .5, 1); }
.mn-c.in .mn-f { transform: none; }
.mn-b, .mn-p { position: absolute; inset: 0; border-radius: 7px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.mn-b { transform: rotateY(180deg); border: 2px solid var(--gold); background: #123a44 url(/zhafantian/img/card/card-back.webp) 50% 50% / cover; box-shadow: 0 3px 8px #000a; }
.mn-p { border: 2px solid var(--rc2); background: #f3e7c9; box-shadow: 0 0 10px 1px var(--rc2), 0 3px 8px #000a; }
.mn-p img { display: block; width: 100%; height: 100%; object-fit: cover; } .mn-c.gr .mn-p img { object-fit: contain; padding: 4px 4px 14px; }
.mn-p u { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 0 1px; background: linear-gradient(transparent, #000c); color: var(--rc2); font-size: 11px; font-weight: 700; line-height: 1.2; text-decoration: none; letter-spacing: 1px; }
.mn-p s { position: absolute; left: 2px; top: 2px; padding: 0 4px; border-radius: 4px; background: var(--red); color: #fff; font-size: 10px; line-height: 15px; text-decoration: none; }
.mn-c b, .mn-c > i { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transition: opacity .25s .25s; }
.mn-c b { margin-top: 3px; font-size: 12px; color: #ffe9a8; } .mn-c > i { font-style: normal; font-size: 10px; font-weight: 400; color: #cfe0da; }
.mn-c.in b, .mn-c.in > i { opacity: 1; }
.mn-c.hot { z-index: 2; } .mn-c.hot .mn-f { animation: mn-hot .62s ease-in both; } .mn-c.hot .mn-b { box-shadow: 0 0 18px 6px var(--rc2); border-color: var(--rc2); }
@keyframes mn-hot { 0% { transform: rotateY(180deg) scale(1); } 20% { transform: rotateY(180deg) rotate(-5deg) scale(1.08); } 40% { transform: rotateY(180deg) rotate(5deg) scale(1.12); } 60% { transform: rotateY(180deg) rotate(-4deg) scale(1.16); } 80% { transform: rotateY(180deg) rotate(4deg) scale(1.2); } 100% { transform: rotateY(180deg) scale(1.24); } }
.mn-c.rE.in .mn-p, .mn-c.rL.in .mn-p { box-shadow: 0 0 16px 5px var(--rc2), 0 3px 8px #000a; }
.mn-c.rE.in .mn-p::after, .mn-c.rL.in .mn-p::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 36%, #fffc 50%, transparent 64%) 150% 0 / 260% 100% no-repeat; mix-blend-mode: screen; animation: rv-shine 2.4s .5s ease-in-out infinite; }
@media (min-width: 700px) and (min-height: 521px) { .mn-grid { --mw: 96px; gap: 14px 14px; } .mn-c b { font-size: 15px; } .mn-c > i { font-size: 12px; } .mn-p u { font-size: 13px; } .mn-p s { font-size: 12px; line-height: 18px; } }
/* 手机横屏：屏幕矮，大卡在左、名字与按钮在右 */
@media (orientation: landscape) and (max-height: 520px) {
  #gain { gap: 8px; padding: 10px 16px; }
  .gn-title b { font-size: 30px; } .gn-title span { margin-top: 2px; } .gn-title b.long { font-size: 26px; } .gn-title b.xl { font-size: 22px; }
  .gn-pic { width: 68px; height: 68px; } .gn-pic img { max-width: 52px; max-height: 48px; }
  #gain.rv.on { display: grid; grid-template: 1fr auto / auto minmax(0, 330px); place-content: center; align-items: center; gap: 10px 26px; }
  .rv-card { grid-row: 1 / 3; } .rv-card .bcard { width: min(250px, calc((100vh - 36px) * .75)); }
  .rv-tx { align-self: end; } #gain.rv .gn-btns { align-self: start; }
  #gain.rv.mn.on { display: flex; gap: 6px; } #gain.rv.mn .gn-btns { align-self: center; } .mn-grid { grid-template-columns: repeat(10, var(--mw)); --mw: min(62px, calc((100vw - 120px) / 10)); } #gain.mn .gn-title b { font-size: 24px; }
  .rv-seal { right: -8px; top: -8px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .gn-rays, .gn-title, .gn-it.in, .rv-door, #gain.rv.card .rv-card, .rv-glow, .rv-flash, .rv-sp i, .rv-fall i, #gain.boom, .mn-c, .mn-f, .rv-seal, .rv-card::after, .mn-p::after { animation: none !important; } .rv-fall, .rv-sp, .rv-glow { display: none; } .mn-c, .rv-seal { opacity: 1; } .gn-it { opacity: 1; } .rv-card { opacity: 1; } #gain.rv .rv-door { display: none; } }
.fx-fly img { display: block; width: 100%; filter: drop-shadow(0 4px 10px #0009); }
#app .cond { color: #ffd9a0; }
.dlg.gi .dlg-b p { font-weight: 400; } .dlg.gi .dlg-b .gi-v { font-weight: 700; }
#gain { background: radial-gradient(ellipse at 50% 42%, #0f3039fc, #061317fd 72%); }
.gn-rays { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gc) 15%, transparent) 0 6deg, transparent 6deg 20deg); }

/* ══ 牌桌与结算（2026-10-06 界面打磨，审核清单一、二）══
   四种屏幕、踢馆与茶馆共用一副骨架：顶栏 → 桌面（吃掉剩下的高度）→ 记牌器 → 自己这一条 → 按键 → 手牌贴底。
   原先宽屏右边那一栏（.tinfo、.opp）不用了：两家的头像、张数、气条都挪到桌面上沿两角。 */
#app.in-table { display: flex; flex-direction: column; height: calc(var(--vh, 100dvh) / var(--z, 1)); min-height: 0; overflow: hidden; }
/* 竖屏的牌桌：屏幕够高就正好一屏；内容比屏幕高（宽屏手机、折叠屏、浏览器工具栏占得多）就让页面能上下拉，不把多出来的切掉（2026-10-10 站长两张截图：手牌第二行落在屏幕外、拉不动）。
   放不下时页面先把手牌缩小（main.ts 的 fitTable），还放不下才要拉；要拉的时候手牌上也能竖着拖页面（tb-scroll） */
#app.in-table:not(.wide) { height: auto; min-height: calc(var(--vh, 100dvh) / var(--z, 1)); overflow: visible; overflow-x: clip; }
html.tb-scroll .hand { touch-action: pan-y; }
/* 没登录的人的「登录」：电脑顶栏里一颗描金的小键；手机竖屏在顶栏底下靠右细细一行 */
#app .top .loginb { flex: none; padding: 4px 14px; border-color: #ffd76a; background: linear-gradient(#ffd76a, #d9a441); color: #2a2118; font-size: 14px; white-space: nowrap; }
/* 手机竖屏没登录的人：登录键是头像上沿的一枚小标（2026-10-13 站长定：顶栏是满的，不再另起一行） */
#app .top .ava { position: relative; }
#app .top .ava .tp-login { position: absolute; left: 50%; top: -8px; z-index: 2; transform: translateX(-50%); min-width: 0; height: 17px; margin: 0; padding: 0 7px; border: 1px solid #2a2118; border-radius: 9px; background: linear-gradient(#ffd76a, #d9a441); box-shadow: 0 1px 0 #0008; color: #2a2118; font-size: 11px; font-weight: 700; line-height: 15px; white-space: nowrap; }
/* 电脑顶栏：名号后面的 logo 和网址，占着中间那一段空位；窗口窄、手机横屏只留空位不出字 */
#app.wide .top .who { flex: none; }
#app .top .tp-brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding-left: 16px; overflow: hidden; white-space: nowrap; }
#app .top .tp-brand img { display: block; height: 36px; width: auto; }
#app .top .tp-brand i { font: normal 14px/1 Georgia, 'Times New Roman', serif; letter-spacing: 1px; color: #f6e2a6; opacity: .85; }
@media (max-width: 1199px), (max-height: 520px) { #app .top .tp-brand img, #app .top .tp-brand i { display: none; } }
/* 露出网址的两处（2026-10-13 站长要：游戏里多露出域名，让人记得住）：进门那一屏、牌桌桌布的左下角。
   桌布上那一块算桌面的一部分（2026-10-14 站长定）：和桌子中间那件摆设同一层（-1），出的牌、座位都盖在它上面 */
.loading .ld-site { display: block; margin-top: 8px; letter-spacing: 1px; }
#app .table .mid .tb-site { position: absolute; left: 14px; bottom: 9px; z-index: -1; display: flex; flex-direction: column; align-items: center; gap: 2px; font: normal 13px/1 Georgia, 'Times New Roman', serif; letter-spacing: 1px; color: #f6e2a6; opacity: .3; pointer-events: none; }
#app .table .mid .tb-site img { display: block; width: 92px; height: auto; }
/* 手机横屏桌布矮，logo 会顶到左边那位的气条：只留网址 */
@media (orientation: landscape) and (max-height: 520px) { #app .table .mid .tb-site img { display: none; } }
/* 代打的起手缓冲（main.ts 的 autoHold）：「收回自己打」那颗键底下一条金线从满走到空，走完替手接手。--ahd＝已经走了多久（负的毫秒数），重画不会从头走 */
#app .ctrl .btns button.ahold { position: relative; overflow: hidden; border-color: #ffd76a; }
#app .ctrl .btns button.ahold::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #ffd76a; transform-origin: 0 50%; animation: zft-ahold 3s linear var(--ahd, 0ms) both; pointer-events: none; }
@keyframes zft-ahold { from { transform: scaleX(1); } to { transform: scaleX(0); } }
#app.in-table .table { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
#app .table > .counter { order: 2; flex: none; width: min(100%, 640px); margin: 0 auto; }
#app .mid { position: relative; flex: 1 1 0; min-height: 200px; display: grid; grid-template: minmax(0, 1fr) auto / minmax(0, 1fr) minmax(0, 1fr); gap: 4px 8px; padding: 10px 12px; }
#app .seat { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
#app .seat.s2 { align-items: flex-end; text-align: right; }
#app .seat.s0 { grid-column: 1 / 3; align-items: center; justify-content: flex-end; pointer-events: none; } /* 窗口矮的时候这一格会压到两位对手的名下，里面只摆自己出的牌、没有要点的东西：不让它接鼠标，不然对手的小牌子移上去、点下去都没反应（2026-10-10） */
#app .seat > i { display: flex; align-items: flex-end; gap: 5px; margin: 0; overflow: visible; }
.sf { position: relative; width: 56px; height: 56px; overflow: visible; }
.sf > img:first-child { border-radius: 50%; }
.sf img.hat { position: absolute; left: 80%; top: -24%; z-index: 1; width: 52%; height: auto; object-fit: contain; transform: translateX(-50%) rotate(18deg); filter: drop-shadow(0 2px 2px #0008); }
.sf img.hat.fall { animation: zft-hat .55s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes zft-hat { from { opacity: 0; transform: translate(-50%, -260%) rotate(-40deg) scale(1.6); } to { opacity: 1; transform: translateX(-50%) rotate(18deg); } }
.role { position: absolute; left: 50%; bottom: -7px; z-index: 1; transform: translateX(-50%); padding: 0 5px; border: 1px solid #fff3c9aa; border-radius: 4px; background: #c0392b; color: #fff3c9; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.role.mate { background: #2f7f86; }
.cn { position: relative; display: inline-block; flex: none; width: 26px; height: 36px; }
.cn img { display: block; width: 100%; height: 100%; border-radius: 3px; box-shadow: 0 1px 3px #0008; }
.cn b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 15px/1 Georgia, "Times New Roman", serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000, 0 0 4px #000; }
.seat.warn .cn b { color: #ffb3a3; animation: zft-warn .55s ease-in-out infinite alternate; }
.sn { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 13px; line-height: 1.2; white-space: nowrap; color: #e9f3ee; }
.seat.s2 .sn { flex-direction: row-reverse; }
/* 对手的身份（牌手、好手、馆主）：名字旁的小徽记 */
.kd { display: inline-block; margin-right: 6px; padding: 0 6px; border: 1px solid currentColor; border-radius: 8px; text-decoration: none; font-size: 11px; font-weight: 400; line-height: 1.45; vertical-align: 2px; color: #7a6a52; }
.kd.k-hao { color: #2f6fae; } .kd.k-zhu { color: #c0392b; font-weight: 700; }
#app .seat .kd { margin: 0; color: #ffe9a8; } #app .st-lock .kd { color: #a9bbb3; }
#app .seat .bar { flex: none; width: min(128px, 100%); height: 16px; } /* flex: none：这一格放不下时（名下挂着身份、规矩两行小牌子的矮屏）气条不许被压扁成一条线（2026-10-12） */ #app .seat .bar span { font-size: 11px; line-height: 12px; }
#app .seat .rule { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; font-size: 11px; }
.rule .tip { padding: 0 6px; border: 1px solid #ffb9a8aa; border-radius: 8px; }
.pl { display: flex; align-items: center; max-width: 100%; min-height: calc(var(--scw) * 1.4); }
.seat.s2 .pl { justify-content: flex-end; }
#app .cds { padding-left: calc(var(--scw) * var(--ov, .4)); row-gap: 4px; }
#app .cds .cd.sm { margin-left: calc(var(--scw) * var(--ov, .4) * -1); }
.cds.topc .cd { box-shadow: 0 0 0 2px #ffd76a, 0 0 10px 1px #ffb347aa; }
.seat.turn .sf, .mebar.turn .sf { animation: zft-turn 1s ease-in-out infinite alternate; }
@keyframes zft-turn { from { box-shadow: 0 0 0 2px #ffd76a66, 0 0 4px 1px #ffd76a44; } to { box-shadow: 0 0 0 2px #ffd76a, 0 0 14px 5px #ffd76acc; } }
/* 桌面上沿正中的底牌位、右下角的倍数牌 */
.bot3 { position: absolute; left: 50%; top: 8px; z-index: 1; transform: translateX(-50%); display: flex; gap: 3px; padding: 3px 5px; border: 1px solid #d9b56a88; border-radius: 6px; background: #0006; }
/* 自己出的牌盖在底牌上面（窗口矮的时候两样会叠在一起；2026-10-10 站长截图：出的牌被底牌挡住了）；倍数的牌子再在它上面 */
#app .seat.s0 { z-index: 2; } #app .table .mid .mult { z-index: 3; }
.bot3 img { display: block; width: var(--scw); height: calc(var(--scw) * 1.4); border-radius: 3px; }
#app .bot3 .cd.sm { margin-left: 0; cursor: default; }
#app .mid .mult { position: absolute; right: 10px; bottom: 10px; z-index: 1; display: flex; align-items: baseline; gap: 3px; padding: 1px 9px 2px; border: 2px solid #e0503c; border-radius: 8px; background: #2a0a06d9; color: #ffb9a8; white-space: nowrap; transform: rotate(-4deg); box-shadow: inset 0 0 0 1px #e0503c66, 0 2px 6px #0008; }
.mid .mult b { font: 900 22px/1.2 Georgia, "Times New Roman", serif; color: #ffe08a; } .mid .mult i { font-style: normal; font-size: 12px; }
.mid .mult.hot b { color: #ff7a4a; animation: zft-hot .7s ease-in-out infinite alternate; }
/* 自己这一条：头像、气条（茶馆是得分与连胜）、带的计（这一局起手生效的亮着） */
#app .mine { order: 3; flex: none; display: flex; flex-direction: column; gap: 6px; }
.mebar { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.mebar .sf { flex: none; width: 46px; height: 46px; }
.mb-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mb-b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; min-height: 22px; }
.jchip { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px 0 3px; border: 1px solid #d9b56a88; border-radius: 10px; background: #0005; color: #cfe0da; font-size: 12px; font-weight: 400; line-height: 1.5; white-space: nowrap; }
.jchip img { width: 18px; height: 18px; object-fit: contain; }
.jchip.on { border-color: #ffe9a8; background: linear-gradient(#ffd76a, #d9a441); color: #2a2118; font-weight: 700; }
.bdg { padding: 0 8px; border: 0; border-radius: 10px; background: #2f7f86; color: #fff; font-size: 12px; line-height: 1.6; white-space: nowrap; }
.bdg.off { background: #5d6b68; color: #c9d2ce; font-weight: 400; }
.teainfo { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; font-weight: 400; color: var(--dim); } .teainfo b { font-size: 16px; color: var(--gold2); }
#app .jis { justify-content: center; }
/* 按键：这一行高度定死（上面留一行给提示语），四颗键等宽居中、紧贴手牌 */
#app .ctrl { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 70px; padding-top: 26px; }
#app .ctrl .hintline, .why { position: absolute; left: 50%; top: 0; z-index: 2; transform: translateX(-50%); margin: 0; padding: 1px 12px; border: 1px solid var(--gold); border-radius: 12px; background: #0b2228e6; color: var(--gold2); font-size: 13px; line-height: 1.5; white-space: nowrap; pointer-events: none; }
.why { border-color: #ff9a86; color: #ffb9a8; } .why.ok { border-color: var(--gold); color: var(--gold2); }
#app .ctrl .btns { flex-wrap: nowrap; justify-content: center; gap: 8px; margin: 0; }
#app .ctrl .btns button { min-width: 72px; padding: 9px 8px; font-size: 16px; white-space: nowrap; }
/* 茶馆叫分那一排有五颗键（不叫、1～3 分、听替手的），竖屏照 72 宽排不下，左右会被切掉：让它们按字数分宽 */
#app:not(.wide) .ctrl .btns:has(.bidb) button { min-width: 54px; flex: 0 1 auto; padding: 9px 6px; }
#app .ctrl .play2 button { width: 84px; }
#app .ctrl button.main { background: linear-gradient(#d6513f, #b9392c); border-color: #ffd76a; color: #fff; box-shadow: 0 2px 0 #0005, 0 0 10px 1px #ffd76a88; }
#app .ctrl button.dull { background: #3c4d4b; color: #d0ddd6; }
#app .ctrl button:disabled { background: #6b7775; color: #c9d2ce; border-color: #8a9692; box-shadow: none; }
/* 手牌：高度不随局面塌（打完没牌了也留着一行的位置）；选中的牌多抬一点、光收窄 */
#app .hand { flex: none; display: block; padding: calc(var(--cw) * .34) 0 2px; min-height: calc(var(--cw) * 1.76 + 2px); }
#app .hrow { margin-top: calc(var(--cw) * .34); } #app .hrow:first-child { margin-top: 0; }
#app .hand .cd { flex: none; }
#app .hand .cd.on { transform: translateY(calc(var(--cw) * -.3)); box-shadow: 0 0 0 2px var(--red), 0 5px 6px #0008; }
.hand.deal .cd { animation: zft-deal .3s cubic-bezier(.2, .9, .3, 1.2) backwards; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes zft-deal { from { opacity: 0; transform: translate(60%, -180%) rotate(24deg) scale(.6); } }
/* 「底」字印放在牌的左下角（站长 2026-10-07 定） */
.cd.mk::after { left: calc(var(--w) * .05); top: auto; bottom: calc(var(--w) * .06); }
/* 宽屏：两家的头像在左、出的牌在旁边；自己这一条在左、按键正中在手牌上方、要点的计在右 */
#app.wide .seat:not(.s0) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: start; column-gap: 12px; row-gap: 3px; }
#app.wide .seat:not(.s0) > * { grid-column: 1; }
#app.wide .seat:not(.s0) > .pl { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
#app.wide .seat.s2 { grid-template-columns: minmax(0, 1fr) auto; }
#app.wide .seat.s2 > * { grid-column: 2; justify-self: end; }
#app.wide .seat.s2 > .pl { grid-column: 1; }
#app.wide .mine { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 4px 16px; }
#app.wide .mebar { grid-column: 1; grid-row: 1; }
#app.wide .ctrl { grid-column: 2; grid-row: 1; min-height: 46px; padding-top: 0; }
#app.wide .ctrl .hintline, #app.wide .why { left: auto; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
.bdg.on { background: var(--red); }
#app.wide .jis { grid-column: 3; grid-row: 1; justify-content: flex-start; align-self: center; }
#app.wide .hand { grid-column: 1 / -1; grid-row: 2; padding-inline: 12px; }
@media (min-height: 600px) {
  #app.wide .table { gap: 10px; padding: 12px 16px; }
  #app.wide .mid { padding: 16px 20px; }
  #app.wide .sf { width: 68px; height: 68px; } #app.wide .mebar .sf { width: 56px; height: 56px; }
  #app.wide .sn { font-size: 16px; } #app.wide .cn { width: 32px; height: 44px; } #app.wide .cn b { font-size: 18px; }
  #app.wide .seat .bar { width: 170px; height: 20px; } #app.wide .seat .bar span { font-size: 13px; line-height: 16px; }
  #app.wide .seat .rule, #app.wide .role { font-size: 13px; }
  #app.wide .mid .mult b { font-size: 30px; } #app.wide .mid .mult i { font-size: 14px; }
  #app.wide .ctrl .btns button { min-width: 104px; padding: 11px 16px; font-size: 19px; } #app.wide .ctrl .play2 button { width: 124px; }
  #app.wide .ctrl .hintline, #app.wide .why { font-size: 15px; }
  #app.wide .jchip, #app.wide .bdg { font-size: 14px; } #app.wide .jchip img { width: 22px; height: 22px; }
  #app.wide .mebar .bar { max-width: 320px; }
}
@media (max-height: 520px) {
  #app.wide .table { gap: 4px; padding: 6px 10px; }
  #app.wide .mid { min-height: 0; padding: 6px 12px; }
  #app.wide .sf { width: 42px; height: 42px; } #app.wide .mebar .sf { width: 36px; height: 36px; }
  #app.wide .sn { margin-top: 5px; font-size: 12px; } #app.wide .cn { width: 22px; height: 30px; } #app.wide .cn b { font-size: 13px; }
  #app.wide .seat .bar { width: 100px; height: 14px; } #app.wide .seat .bar span { font-size: 10px; line-height: 10px; }
  #app.wide .mebar { min-height: 40px; } #app.wide .mebar .bar { max-width: 200px; height: 15px; } #app.wide .mebar .bar span { line-height: 11px; font-size: 11px; }
  #app.wide .ctrl { min-height: 40px; } #app.wide .ctrl .btns button { min-width: 66px; padding: 5px 8px; font-size: 15px; } #app.wide .ctrl .play2 button { width: 78px; }
  #app.wide .hand { padding-top: calc(var(--cw) * .32); min-height: 0; }
  #app.wide .bot3 { top: 4px; } #app.wide .mid .mult { right: 6px; bottom: 6px; }
}
/* 放计的横幅：底下整体压暗；自己这边放的，左边是带这条计的伙伴 */
.fx-dim { inset: 0; background: #000000a8; }
.fx-cut .pf { position: relative; flex: none; width: 2em; height: 2.5em; overflow: hidden; border: .05em solid #e7b84d; border-radius: .12em; box-shadow: 0 .08em .3em #000a; }
.fx-cut .pf img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 15%; filter: none; }
.fx-cut .pf + img.ji { height: 1.9em; }

/* 结算：遮罩加深盖住牌桌；题字（胜、负、过关、惜败）是斜盖的大印，算式一格一项等宽，得的东西是带图标的小牌子 */
.mask.set { background: #000000d9; }
#app:not(.wide) .mask.set { align-items: flex-end; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
.dlg.set { text-align: center; padding-top: 14px; }
.dlg.set.lose { background: #d9d6c6; }
.set-hd { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 4px; }
.set-hd .sf { width: 60px; height: 60px; } .set-hd .sf.ko > img, .set-hd .sf.ko.boss { filter: grayscale(1) brightness(.7); }
.set-t { padding: 2px 14px 4px 18px; border: 2px solid #ffd76a; border-radius: 10px; background: var(--red); color: #fff3c9; font: 900 44px/1.15 "STXingkai", "华文行楷", "KaiTi", "STKaiti", "楷体", serif; letter-spacing: 4px; white-space: nowrap; transform: rotate(-3deg); box-shadow: inset 0 0 0 2px #b9392c, inset 0 0 0 3px #fff3c966, 0 3px 8px #0006; animation: zft-stamp2 .34s .16s cubic-bezier(.5, 0, .9, .4) both; }
@keyframes zft-stamp2 { from { opacity: 0; transform: rotate(-3deg) scale(2.4); } to { opacity: 1; transform: rotate(-3deg); } }
.dlg.lose .set-t { border-color: #aab5b0; background: #5d6b68; color: #e3ece7; box-shadow: inset 0 0 0 2px #5d6b68, inset 0 0 0 3px #e3ece755, 0 3px 8px #0006; }
.mask.still .set-t { animation: none !important; }
.dlg.set > h3 { margin: 6px 0; font-size: 18px; letter-spacing: 1px; }
.dlg .calc { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 4px; margin: 4px 0 6px; }
.dlg .calc span { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 3px 6px 4px; border: 1px solid #b89a5a; border-radius: 8px; background: #ffffff66; font: 700 20px/1.2 Georgia, "Times New Roman", serif; }
.dlg .calc span i { font: 400 11px/1.4 "KaiTi", "STKaiti", "楷体", serif; color: #7a6a52; white-space: nowrap; }
.dlg .calc s { align-self: center; text-decoration: none; color: #7a6a52; }
.dlg.lose .dmg { color: #5a4a3a; }
.dlg p.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rchip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border: 1px solid #b89a5a; border-radius: 12px; background: #ffffff66; font-size: 14px; white-space: nowrap; }
.rchip .ic { width: 20px; height: 18px; } .rchip.off { color: #7a6a52; font-weight: 400; }
@media (max-height: 520px) {
  .wide .dlg.set { display: grid; grid-template: auto minmax(0, 1fr) auto / auto minmax(0, 1fr); column-gap: 20px; width: min(600px, 100%); }
  .wide .dlg.set .set-hd { grid-column: 1; grid-row: 1 / 3; flex-direction: column; align-self: center; margin: 0; }
  .wide .dlg.set > h3 { grid-column: 2; grid-row: 1; } .wide .dlg.set .dlg-b { grid-column: 2; grid-row: 2; }
  .wide .dlg.set .dlg-f { grid-column: 1 / -1; grid-row: 3; }
  .wide .set-t { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { .hand.deal .cd, .sf img.hat.fall, .set-t, .seat.turn .sf, .mebar.turn .sf { animation: none !important; } }

/* ── 难度与产出这一轮跟着改的显示（2026-10-06）：访贤两个池、升星进度、触发率、今天的进度、牌运三档 ── */
/* 访贤：一个池一张纸卡（名字与次数、各档机会、主键），手机竖排、宽屏并排 */
.pools { display: grid; gap: 10px; }
.pool { padding: 10px 12px 12px; }
.pl-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-h b { font-size: 19px; color: var(--red); letter-spacing: 2px; } .pl-h span { font-size: 13px; white-space: nowrap; } .pl-h .ic { width: 24px; height: 20px; vertical-align: -4px; margin-right: 3px; }
.odds { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0; font-size: 12px; font-weight: 400; }
.odds i { font-style: normal; color: var(--dim); }
.odds span { padding: 0 7px; border: 1px solid var(--rc, #b89a5a); border-left-width: 4px; border-radius: 5px; background: #fff6; white-space: nowrap; } .odds span b { font-weight: 700; }
.odds .rG { --rc: #6f8f5a; }
.pl-n { width: fit-content; max-width: 100%; margin: 4px 0; font-size: 13px; font-weight: 400; color: var(--dim); text-align: left; }
.pool .btns { justify-content: flex-start; margin: 8px 0 4px; } .pool .price { margin: 4px 0 0; background: #2a211814; color: #5a4a3a; border-color: #b89a5a; } .pool .price.short { color: var(--red); border-color: var(--red); }
.pool button.ghost { color: var(--mo); background: #2a211814; border-color: #b89a5a; }
.pity { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pity u { flex: 1; height: 8px; border: 1px solid #b89a5a; border-radius: 4px; background: #2a21181f; overflow: hidden; text-decoration: none; } .pity u i { display: block; height: 100%; background: linear-gradient(90deg, #c9962b, #ffd76a); } .pity b { color: #8a5a12; }
#app .pool.st-soon .pl-h b { color: #e9dfc2; } #app .pool button.st-soon { color: #a9bbb3; }
#app .pool button.st-soon::after { right: -8px; top: -10px; width: 22px; height: 22px; }
/* 伙伴卡：升下一星的进度（一格一次）、计的触发率 */
.pc-sp { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; font-weight: 400; color: #7a6a52; }
.pc-sp u { display: flex; gap: 3px; text-decoration: none; } .pc-sp u i { width: 12px; height: 6px; border: 1px solid #b89a5a; border-radius: 3px; background: #2a21181f; } .pc-sp u i.on { background: #c9962b; border-color: #c9962b; }
.pc-sp.full { color: #b9862b; }
.jrate { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--red); border-radius: 8px; font-size: 11px; font-weight: 700; line-height: 1.5; color: var(--red); text-decoration: none; white-space: nowrap; vertical-align: 1px; }
.jrate.all { border-color: #7a6a5288; color: #7a6a52; font-weight: 400; }
#app .seatbox .jrate { margin-left: 4px; }
/* 同门羁绊：现在最多三位上阵 */
.bond span i:nth-child(2) { margin-right: 0; }
/* 牌桌上带了没发动的计：置灰 */
.jchip.idle { border-color: #ffffff2e; background: #0003; color: #8fa09a; } .jchip.idle img { filter: grayscale(1) brightness(.75); opacity: .7; }
/* 今天的进度：三格小牌子（点一下出说明） */
.dayrow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin: 0 0 8px; font-size: 12px; font-weight: 400; }
.dayrow em { font-style: normal; color: var(--dim); }
.dayrow span { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 9px; border: 1px solid #d9b56a88; border-radius: 10px; background: #0005; white-space: nowrap; }
.dayrow i { font-style: normal; color: var(--dim); } .dayrow b { color: var(--gold2); } .dayrow .full b { color: #9fb3ab; }
/* 牌运：十级刻度（三档之间隔开一点）、材料与心得两张价牌、还差什么、三档各用什么 */
.luck .lv { flex-wrap: wrap; } .luck .lv i { width: 14px; } .luck .lv i.gap { margin-left: 5px; }
.lklack { width: fit-content; max-width: 100%; margin: -2px 0 8px auto; padding: 0 10px; border: 1px solid #ff9a86; border-radius: 10px; font-size: 12px; font-weight: 400; color: #ffb9a8; text-align: left; }
.lkmat { display: flex; flex-wrap: wrap; gap: 5px 8px; margin: 0 0 8px; font-size: 12px; font-weight: 400; }
.lkmat span { padding: 1px 9px; border: 1px solid #d9b56a88; border-radius: 10px; background: #0005; white-space: nowrap; } .lkmat i { font-style: normal; color: var(--dim); margin-right: 5px; } .lkmat b { color: var(--gold2); }
.lktier { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; font-size: 13px; }
.lktier li { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid #d9b56a55; border-radius: 8px; background: #0004; font-weight: 400; }
.lktier b { flex: none; width: 5.2em; color: var(--dim); } .lktier span { flex: 1; min-width: 0; text-align: left; }
.lktier li.now { border-color: var(--gold); } .lktier li.now b { color: var(--gold2); } .lktier li.done b::after { content: " ✓"; color: #9fd0a8; }

/* ── 主界面（审核清单三，2026-10-06）── */
/* 顶栏：战力写在名字下面，心得带名字 */
.who .pw { display: flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--dim); } .who .pw .ic { width: 16px; height: 16px; } .who .pw em { font-style: normal; font-weight: 700; color: var(--gold2); font-size: 14px; }
.pill i { font-style: normal; font-weight: 400; color: var(--dim); font-size: 12px; } .pill.tip { cursor: pointer; }
.setx button.ghost { color: var(--mo); background: #2a211814; }
/* 门脸：竖屏压矮到三成，人物跟着缩；馆名牌下一排灯笼，过一关亮一盏 */
#app:not(.wide) .scene { height: 262px; }
#app:not(.wide) .scene .hero { height: 176px; left: 22px; } #app:not(.wide) .scene .boss { height: 190px; }
#app:not(.wide) .scene .talk { top: 78px; right: 104px; }
.banner s { gap: 3px; margin-top: 2px; align-items: flex-start; }
.banner s i { width: 13px; height: 18px; border: 0; background: url(/zhafantian/img/ui/lantern.webp) 50% 0/contain no-repeat; filter: grayscale(1) brightness(.55) opacity(.6); transform-origin: 50% 0; }
.banner s i.on { background: url(/zhafantian/img/ui/lantern.webp) 50% 0/contain no-repeat; filter: drop-shadow(0 0 3px #ffb347); animation: zft-sway 3.2s ease-in-out calc(var(--i) * -.37s) infinite alternate; }
.banner s i.zhu { width: 17px; height: 23px; margin-left: 2px; }
@keyframes zft-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
/* 人物呼吸、递帖键呼吸光 */
.scene .hero, .scene .boss { transform-origin: 50% 100%; animation: zft-breathe 4.2s ease-in-out infinite alternate; } .scene .boss { animation-duration: 4.8s; animation-delay: -1.6s; }
@keyframes zft-breathe { from { transform: none; } to { transform: scaleY(1.012) translateY(-1px); } }
.go[data-do="stage"] { animation: zft-goglow 2s ease-in-out infinite; }
@keyframes zft-goglow { 0%, 100% { box-shadow: 0 0 0 3px var(--deep), 0 0 0 5px var(--gold), 0 6px 14px #000a, inset 0 3px 8px #fff5; } 50% { box-shadow: 0 0 0 3px var(--deep), 0 0 0 5px var(--gold2), 0 0 22px 6px #ffd76a99, inset 0 3px 8px #fff5; } }
/* 老板娘的话：不在词中间断开 */
.scene .talk { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; width: max-content; }
/* 圆键在宽屏挪到两个人物之间的空地 */
.wide .left .go, .wide .left .cnt { left: 43%; }
/* 任务行不再带进度条（进度看灯笼） */
.low .mebox { margin: 8px 0; }
/* 阵容一排：卡面、名字、带的计 */
.teamrow { align-items: center; } .teamrow .chips { align-items: center; }
.teamrow .chip { padding-right: 4px; } .teamrow .chip [data-go] { cursor: pointer; }
.teamrow .jiic img { width: 30px; height: 30px; padding: 2px; border-radius: 8px; }
button.mini { padding: 2px 12px; font-size: 13px; }
/* 主界面的行头只摆已开的四格 */
.grid.g4 { grid-template-columns: repeat(4, 1fr); }
/* 十关：每行带对手头像，馆主关金边加大；对手的计是小标签；正要打的那一关不再放第二颗「递帖」 */
.stages.hall li { gap: 9px; padding: 8px 10px; }
#app .stages.hall.one { display: block; }
.stmap { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 440px; margin: 0 auto 8px; border: 1.5px solid var(--gold); border-radius: 10px; overflow: hidden; background: linear-gradient(#0c2a33cc, #0c2a33a6), var(--scene) 50% 35%/cover no-repeat; }
.stmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stmap polyline { fill: none; stroke: #f0d9a0; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 9; vector-effect: non-scaling-stroke; opacity: .85; }
.stn { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: #f0e3c2; }
#app .stmap .stn .sf { width: 44px; height: 44px; border-width: 2px; }
#app .stmap .stn.zhu .sf { width: 64px; height: 64px; border-width: 3px; border-color: #e8c46a; box-shadow: 0 0 0 1px #8a5a12, 0 0 12px #ffd76a88; }
.stn b { padding: 0 7px; border-radius: 9px; background: #0b2a33d9; font-size: 11px; font-weight: 400; white-space: nowrap; }
.stn.zhu b { font-size: 13px; font-weight: 700; color: #ffe9a8; }
#app .stmap .stn.ok .sf { border-color: var(--red); }
.stn.ok b { color: #ffb9a8; }
#app .stmap .stn.now .sf { animation: zft-turn 1s ease-in-out infinite alternate; }
.stn.now b { background: var(--red); color: #fff; }
#app .stmap .stn.lk .sf { filter: grayscale(.85) brightness(.62); }
.stn.lk b { color: #a9bbb3; }
.stn.sel b { outline: 1.5px solid #ffe9a8; }
@media (prefers-reduced-motion: reduce) { #app .stmap .stn.now .sf { animation: none; } }
.stages.hall .sf { width: 46px; height: 46px; border-width: 2px; }
.stages.hall li.zhu { border-width: 3px; border-color: #e8c46a; box-shadow: 0 0 0 1px #8a5a12, 0 0 12px #ffd76a66, 0 3px 8px #0007; padding: 11px 10px; }
.stages.hall li.zhu .sf { width: 58px; height: 58px; } .stages.hall li.zhu b { font-size: 18px; }
#app .stages.hall li.st-lock .sf { filter: grayscale(.8) brightness(.7); }
.jtags { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 0; }
.stages .jtags em { display: inline-block; padding: 0 7px; border: 1px solid #b9392c99; border-radius: 4px; background: #b9392c14; color: var(--red); font-size: 11px; font-weight: 700; line-height: 1.5; cursor: pointer; }
#app .st-lock .jtags em { border-color: #ffb9a877; background: #0003; color: #ffb9a8; }
.nowtag { flex: none; padding: 1px 8px; border-radius: 10px; background: var(--red); color: #fff; font-style: normal; font-size: 12px; font-weight: 400; white-space: nowrap; }
/* 宽屏右栏：内容滚到底边时渐隐，看得出下面还有 */
.wide .col { -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), #0000); mask-image: linear-gradient(#000 calc(100% - 26px), #0000); padding-bottom: 30px; }
@media (prefers-reduced-motion: reduce) { .banner s i.on, .scene .hero, .scene .boss, .go[data-do="stage"] { animation: none !important; } }
.stages.hall b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stages.hall .kd { vertical-align: 0; }

/* ── 伙伴四页（审核清单四，2026-10-06）── */
/* 阵容：座位横排的竖卡位（卡面在上，名字、星、带的计在下） */
.vseats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.vseat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 9px; background: var(--paper); color: #2a2118; border: 2px solid var(--gold); outline: 1px solid #2a211866; outline-offset: -5px; border-radius: 8px; box-shadow: 0 3px 8px #0007; text-align: center; min-width: 0; }
/* 位子各管什么（2026-10-10）：替手位写「代打、出提示」和牌技，座上客位写「只出计」；上面一句总的 */
.vs-n { align-self: stretch; margin: -1px 0 3px; font-size: 11px; line-height: 1.35; color: #6b5a47; text-align: center; } .vseat.t .vs-n { color: #8a2a1e; }
.vs-tip { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--dim); }
#app .dlg-f button.two { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.25; } #app .dlg-f button.two small { font-size: 11px; font-weight: 400; opacity: .8; }
.vseat[data-do] { cursor: pointer; } .vseat.t { box-shadow: 0 0 0 2px var(--red), 0 3px 8px #0007; }
.vs-r { align-self: flex-start; margin: -2px 0 2px -1px; padding: 0 8px; border-radius: 8px; background: #2a211822; color: #5a4a3a; font-size: 11px; font-weight: 400; text-decoration: none; } .vseat.t .vs-r { background: var(--red); color: #fff; }
.vs-a { display: block; width: 100%; max-width: 118px; aspect-ratio: 3 / 4; border: 2px solid var(--rc, #b89a5a); border-radius: 6px; overflow: hidden; background: #0002; }
.vs-a img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.vseat b { font-size: 16px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vseat em { font-style: normal; font-size: 11px; color: #b9862b; letter-spacing: -1px; }
.vseat > i { font-style: normal; font-size: 12px; color: var(--red); } .vseat .jrate { margin: 0; } .vseat .mini { margin-top: 4px; }
#app .vseat.st-empty .vs-a, #app .vseat.st-lock .vs-a { position: relative; border: 2px dashed var(--gold); background: #0004 url(/zhafantian/img/ui/chair.webp) 50% 62%/64% auto no-repeat; }
#app .vseat.st-lock .vs-a { border: 2px solid #5f7a78; filter: grayscale(1) brightness(.6); }
#app .vseat.st-empty .vs-a::after { content: "＋"; position: absolute; right: 6px; top: 2px; font-size: 22px; line-height: 1; color: var(--gold2); }
#app .vseat.st-empty > i, #app .vseat.st-lock > i { color: var(--dim); } #app .vseat.st-empty .vs-r, #app .vseat.st-lock .vs-r { background: #fff2; color: var(--dim); }
.benchnone { display: flex; align-items: center; gap: 10px; }
/* 卡面墙（图鉴、没上阵的）：竖屏三列，宽屏按宽度多排几列；级别看卡框颜色 */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 5px 6px; background: var(--paper); color: #2a2118; border: 2px solid var(--rc, var(--gold)); border-radius: 8px; box-shadow: 0 2px 6px #0007; min-width: 0; }
.wt-a { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 5px; overflow: hidden; background: #0002; }
.wt-a img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.wt b { font-size: 15px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wt i { font-style: normal; font-size: 11px; font-weight: 400; color: #b9862b; letter-spacing: -1px; }
.wt.rL { box-shadow: 0 0 10px #ffd76a88, 0 2px 6px #0007; }
#app .wt.st-lock { border-color: #5f7a78; } #app .wt.st-lock .wt-a img { filter: grayscale(1) brightness(.5); } #app .wt.st-lock i { color: #a9bbb3; letter-spacing: 0; }
#app .wt.st-lock::after { right: 2px; top: 2px; width: 24px; height: 24px; }
.wt-new { position: absolute; left: -4px; top: -6px; padding: 0 7px; border-radius: 9px; background: var(--red); color: #fff; border: 1.5px solid var(--gold2); font-size: 12px; text-decoration: none; transform: rotate(-8deg); }
/* 访贤页：每个池摆一排能请到的人（没请到的压暗） */
.cands { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.cd-a { width: 38px; aspect-ratio: 3 / 4; border: 2px solid var(--rc); border-radius: 4px; overflow: hidden; background: #0002; cursor: pointer; }
.cd-a img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; } .cd-a.no img { filter: grayscale(.9) brightness(.7); }
/* 大卡：卡面加信息区，右上关闭、两侧翻看；竖屏上下排，宽屏左右排 */
.dlg.cvd { width: min(440px, 100%); padding-top: 14px; }
.cv-a { position: relative; display: flex; justify-content: center; padding: 2px 0 10px; }
.cvd .bcard { width: min(230px, 56vw, 34vh); } .cvd .bcard .bc-n { display: none; }
.cv-nav { position: absolute; top: 50%; width: 36px; height: 52px; margin-top: -26px; padding: 0; border-radius: 10px; background: #2a211822; border: 1.5px solid #b89a5a; box-shadow: none; font-size: 26px; line-height: 1; color: #5a4a3a; }
.cv-nav.prev { left: 0; } .cv-nav.next { right: 0; }
.cv-bio { margin: 4px 0 6px; font-size: 14px; line-height: 1.6; font-weight: 400; color: #5a4a36; }
.cv-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .cv-h b { font-size: 22px; letter-spacing: 2px; color: var(--red); } .cv-h span { font-size: 12px; font-weight: 400; color: #7a6a52; text-align: right; }
.cv-i .pc-j { margin: 6px 0; } .cv-i .pc-j::after { content: ""; display: block; clear: both; }
.cv-st { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; } .cv-st i { font-style: normal; font-weight: 400; color: #7a6a52; } .cv-st span { display: inline-flex; align-items: center; gap: 3px; } .cv-st .ic { width: 18px; height: 18px; }
.dlg.cvd button.on:disabled { opacity: .8; }
@media (orientation: landscape) and (min-width: 640px) {
  .wall { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .vseats { grid-template-columns: repeat(3, minmax(0, 150px)); }
  .wide .dlg.cvd { width: min(680px, 100%); }
  .wide .cvd .dlg-b { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; align-items: start; }
  .wide .cvd .cv-a { padding: 0 42px; } .wide .cvd .bcard { width: min(230px, calc((100vh / var(--z, 1) - 150px) * .75)); }
}
/* 一排摆不下时不再把小像挤成细条、也不把整页撑宽（人多了以后手机竖屏被撑到 532 宽，盖在上面的层全偏右）：小像最窄 30，再多就这一排自己横着滑 */
.pool { min-width: 0; }
.cands { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } .cd-a { flex: 0 1 44px; width: auto; min-width: 30px; }

/* ── 行头、棋品、个人资料、设置（审核清单五，2026-10-06）── */
/* 行头页的装备栏：少馆主站中间，八件分在两边 */
.doll { display: grid; grid-template-columns: 84px minmax(0, 1fr) 84px; gap: 8px; align-items: stretch; margin: 4px 0 10px; }
.doll-s { display: grid; gap: 7px; align-content: space-between; }
.doll-m { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 340px; border: 2px solid var(--gold); border-radius: 10px; background: radial-gradient(ellipse at 50% 38%, #f6e2a655, #0000 62%), #0b222899; overflow: hidden; }
.doll-m img { height: 96%; max-width: 118%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 4px 6px #0008); }
.doll-m span { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 0 12px; border: 1.5px solid var(--gold); border-radius: 12px; background: #0b2228cc; font-size: 13px; font-weight: 400; white-space: nowrap; } .doll-m span b { color: var(--gold2); font-size: 16px; } .doll-m .ic { width: 18px; height: 18px; }
.slot.flash { animation: zft-slotflash .7s ease-out; }
@keyframes zft-slotflash { 0% { filter: brightness(2.2); transform: scale(1.12); } 100% { filter: none; transform: none; } }
/* 行头详情：七档品质各一色（和行头格、掉落的光同一套），部位说明只留图标加一句 */
.gi-q span { border-color: var(--c1); background: color-mix(in srgb, var(--c2) 45%, transparent); color: #2a2118; }
.gi-q span.on { background: var(--c1); border-color: var(--c1); color: #fff; box-shadow: 0 0 0 2px #fff8, 0 0 8px var(--c1); }
.dlg.gi .gi-s { display: flex; align-items: center; gap: 6px; } .gi-s .ic { width: 22px; height: 22px; }
/* 棋品：九等一条阶梯，现在这一等亮着 */
.qp-h { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--paper); color: #2a2118; border: 2px solid var(--gold); outline: 1px solid #2a211866; outline-offset: -5px; border-radius: 8px; box-shadow: 0 3px 8px #0007; }
.qp-h > .ic { width: 60px; height: 60px; flex: none; } .qp-h > div { flex: 1; min-width: 0; } .qp-h b { display: block; font-size: 20px; color: var(--red); letter-spacing: 2px; } .qp-h span { font-size: 13px; font-weight: 400; color: #7a6a52; }
.qp-n { width: fit-content; max-width: 100%; margin: 8px 0; font-size: 13px; font-weight: 400; color: var(--dim); text-align: left; }
.qp-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qp-l li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border: 1.5px solid #5f7a78; border-radius: 8px; background: #16343b; text-align: center; }
.qp-seal { display: grid; place-items: center; width: 46px; height: 46px; border: 3px double #a9bbb3; border-radius: 7px; color: #a9bbb3; font-style: normal; font-size: 24px; line-height: 1; transform: rotate(-4deg); }
.qp-l b { display: block; font-size: 14px; color: #e9dfc2; } .qp-l span { display: block; font-size: 11px; font-weight: 400; color: #a9bbb3; }
.qp-l li.now, .qp-l li.done { background: var(--paper); border-color: var(--gold); } .qp-l li.now { box-shadow: 0 0 0 2px var(--red), 0 0 12px #ffd76a88; }
.qp-l li.now .qp-seal, .qp-l li.done .qp-seal { border-color: var(--red); color: #fff; background: var(--red); } .qp-l li.now b, .qp-l li.done b { color: #2a2118; } .qp-l li.now span, .qp-l li.done span { color: #7a6a52; }
.qp-l u { position: absolute; right: -4px; top: -8px; padding: 0 8px; border-radius: 9px; background: var(--red); color: #fff; border: 1.5px solid var(--gold2); font-size: 11px; text-decoration: none; }
/* 个人资料：阵容那张卡换成和别处一样的米色纸卡；牌运是两格；宽屏左边只留少馆主 */
.jilist.team li { background: var(--paper); color: #2a2118; border: 2px solid var(--gold); outline: 1px solid #2a211866; outline-offset: -5px; border-radius: 8px; box-shadow: 0 3px 8px #0007; padding: 8px 12px; }
.jilist.team b { color: #2a2118; font-size: 16px; } .jilist.team i { color: #7a6a52; } .jilist.team p { color: #5a4a3a; }
.mebox.two { grid-template-columns: repeat(2, 1fr); }
.scene.solo { background-position: 30% 100%; } .wide .scene.solo .hero { left: 50%; transform: translateX(-50%); height: min(78cqh, 100cqw); animation: none; }
/* 设置：开关做成拨杆；弹层收窄 */
.dlg.sndp { width: min(340px, 100%); }
.sndrow button.off { opacity: 1; }
.sw { position: relative; flex: none; width: 46px; height: 24px; border-radius: 12px; border: 1.5px solid #b89a5a; background: #2a211833; transition: background .15s; }
.sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff6dc; border: 1px solid #b89a5a; box-shadow: 0 1px 2px #0006; transition: transform .15s; }
.sndrow button.on .sw { background: var(--red); border-color: var(--red); } .sndrow button.on .sw::after { transform: translateX(22px); }
@media (orientation: landscape) and (min-width: 640px) {
  .doll { grid-template-columns: repeat(2, 84px) minmax(0, 1fr) repeat(2, 84px); } .doll-s { grid-template-columns: 84px 84px; grid-column: span 2; align-content: center; }
  .doll-m { min-height: 190px; grid-column: 3; grid-row: 1; } .doll-s:last-child { grid-column: 4 / 6; grid-row: 1; }
  .qp-l { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ── 江湖、茶馆大堂、商铺（审核清单六，2026-10-06）── */
/* 江湖：茶馆是通栏大卡；别的是三格一排的小卡（图标、名字、一句话），同一排等高 */
.teacard { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; width: 100%; height: 150px; padding: 12px 14px; border: 2px solid var(--gold); border-radius: 10px; background: linear-gradient(90deg, #0b2228dd, #0b222833 70%), url(/zhafantian/img/scene-chaguan.webp) 50% 50%/cover; color: var(--ink); text-align: left; box-shadow: 0 3px 8px #0007; overflow: hidden; }
.teacard .plaque { padding: 1px 18px; font-size: 24px; letter-spacing: 8px; text-indent: 8px; background: var(--paper); color: #2a2118; border: 2px solid var(--gold); outline: 1px solid #2a2118; }
.teacard i { font-style: normal; font-size: 13px; font-weight: 400; text-shadow: 0 1px 3px #000; }
.teacard em { position: absolute; right: 14px; bottom: 14px; padding: 6px 20px; border: 2px solid var(--gold); border-radius: 8px; background: var(--red); color: #fff; font-style: normal; font-size: 17px; box-shadow: 0 2px 0 #0005; animation: zft-breath 1.8s ease-in-out infinite; }
.ents { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } .ents.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#app .ents .ent { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 9px; text-align: center; }
.ents .ent .ic { width: 46px; height: 46px; } .ents .ent b { font-size: 16px; } .ents .ent span { font-size: 11px; line-height: 1.35; text-wrap: balance; }
/* 茶馆大堂：副标题垫深色条；三张桌各带一小幅桌景；手机横屏把横幅压矮 */
.hallhead p { padding: 0 12px; border-radius: 10px; background: #0b2228cc; }
.tb-pic { flex: none; width: 62px; height: 46px; border: 2px solid var(--gold); border-radius: 6px; background: url(/zhafantian/img/scene-chaguan.webp) 12% 70%/320% auto no-repeat; }
.tb-pic.t1 { background-position: 52% 62%; } .tb-pic.t2 { background-position: 90% 40%; }
#app .st-lock .tb-pic { filter: grayscale(.9) brightness(.6); border-color: #5f7a78; }
.stages.tables li { padding: 9px 10px; } .stages.tables b { font-size: 17px; } .stages.tables .sit { padding: 9px 26px; font-size: 17px; }
@media (orientation: landscape) and (max-height: 520px) { .teahall .hallhead { height: 74px; flex-direction: row; gap: 12px; } .teahall .hallhead p { margin: 0; } .teacard { height: 96px; } }
/* 商铺：版面在 shop.ts 自己的样式里；这里只剩掌柜卡那一格外面那层和「未开张」的价牌 */
.goods.shop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.goods.shop li { margin: 0; align-items: flex-start; padding: 10px 12px; }
.goods.shop div { min-width: 0; }
.pricetag { position: relative; align-self: center; } .pricetag .zhang { position: absolute; right: -8px; top: -15px; padding: 0 4px 1px; border-width: 1.5px; font-size: 10px; letter-spacing: 1px; text-indent: 1px; }
@media (orientation: landscape) and (min-width: 640px) { .goods.shop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; align-items: stretch; } }

/* ── 把各节「没做完的」补上（2026-10-06 晚）── */
/* 设置：每一项底下一条音量滑杆 */
.vol { display: block; width: 100%; height: 22px; margin: -2px 0 4px; accent-color: var(--red); } .vol:disabled { opacity: .35; }
/* 新出的小图：价牌、材料小牌子、结算小牌子里的签；茶桌的桌景；牌桌正中的摆件 */
.lkmat .ic { width: 18px; height: 18px; vertical-align: -4px; margin-right: 3px; } .luck .price .ic { width: 16px; height: 18px; }
.tb-pic { display: grid; place-items: center; background: linear-gradient(#f6e2a6, #e4cf9a); } .tb-pic .ic { width: 54px; height: 40px; object-fit: contain; }
.mid .desk { position: absolute; left: 50%; top: 50%; width: clamp(64px, 16%, 120px); transform: translate(-50%, -50%); opacity: .5; filter: drop-shadow(0 3px 4px #0008); pointer-events: none; }
.table.done .mid .desk { opacity: .2; }
/* 老板娘：外面套一层好挂热气，图撑满这一层 */
.scene .boss img { display: block; height: 100%; width: auto; }
.steam { position: absolute; left: 7%; top: 30%; width: 9%; aspect-ratio: 1 / 2.2; border-radius: 50%; background: radial-gradient(ellipse at 50% 80%, #fffc, #fff0 70%); filter: blur(2px); opacity: 0; animation: zft-steam 3.4s ease-out infinite; pointer-events: none; }
.steam.s2 { left: 11%; animation-delay: -1.7s; }
@keyframes zft-steam { 0% { opacity: 0; transform: translateY(40%) scaleX(.6); } 30% { opacity: .75; } 100% { opacity: 0; transform: translateY(-70%) scaleX(1.3) translateX(18%); } }
/* 阵容：新上座的那一张落下来 */
.vseat.in { animation: zft-seatin .45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes zft-seatin { from { opacity: 0; transform: translateY(-36px) scale(1.12); box-shadow: 0 0 0 3px var(--gold2), 0 0 24px #ffd76a; } }
/* 提示：选出来的牌依次弹起 */
#app .hand .cd.hop { animation: zft-hint .28s calc(var(--i) * 45ms) cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes zft-hint { from { transform: none; box-shadow: none; } }
/* 手机横屏的子页面：左边的门脸收起来，地方都给内容，列表排两列 */
@media (orientation: landscape) and (max-height: 520px) {
  #app.wide.sub { grid-template-columns: 0 minmax(0, 1fr) 76px; } #app.wide.sub .left { display: none; }
  #app.wide.sub .vseats { grid-template-columns: repeat(3, minmax(0, 132px)); }
  #app.wide.sub .doll-m { min-height: 170px; }
}
@media (prefers-reduced-motion: reduce) { .steam, .vseat.in, #app .hand .cd.hop { animation: none !important; } .steam { display: none; } }

/* ── 公共件第 8、9、13 条（2026-10-06 晚）── */
/* 第 9 条：数字和拉丁字母用衬线体（在最上面的字体栈里排在楷体前面），和楷体放一起不再跳 */
/* 第 8 条：一套小控件。星是画的金箔花钿 */
.stars { display: inline-flex; gap: 1px; vertical-align: -2px; letter-spacing: 0; } .stars img { width: 1.05em; height: 1.05em; object-fit: contain; filter: grayscale(1) brightness(.75) opacity(.45); } .stars img.on { filter: drop-shadow(0 0 1px #8a5a12); }
#app .st-lock .stars img.on { filter: grayscale(.4); }
/* 设置、全屏：图标键 */
.top .icbtn { display: inline-grid; place-items: center; width: 36px; height: 32px; padding: 0; } .icbtn img { width: 22px; height: 22px; object-fit: contain; display: block; }
/* 返回：前面一枚如意箭头 */
.back2::before { content: ""; display: inline-block; width: 16px; height: 14px; margin-right: 4px; vertical-align: -2px; background: url(/zhafantian/img/ui/c-back.webp) 50% 50%/contain no-repeat; }
/* 「？」和关闭键：圆玉牌作底 */
.qm, .subtabs button.qm { width: 32px; height: 32px; border: 0; background: url(/zhafantian/img/ui/c-plaque.webp) 50% 50%/contain no-repeat; color: #7a2a1e; font-weight: 700; filter: drop-shadow(0 1px 2px #0008); display: inline-grid; place-items: center; text-align: center; font-family: Georgia, 'Times New Roman', serif; }
.dx { border: 0; background: url(/zhafantian/img/ui/c-plaque.webp) 50% 50%/contain no-repeat; filter: drop-shadow(0 1px 2px #0006); }
/* 价牌：小木牌 */
.pricetag { padding: 5px 12px 5px 26px; border: 0; background: url(/zhafantian/img/ui/c-tag.webp) 50% 50%/100% 100% no-repeat; color: #4a3520; font-weight: 700; filter: drop-shadow(0 1px 2px #0006); }
/* 音量滑杆：细槽填朱砂，珠子是画的 */
.vol { -webkit-appearance: none; appearance: none; height: 8px; margin: 6px 0 10px; border: 1px solid #b89a5a; border-radius: 5px; background: linear-gradient(90deg, var(--red) var(--p, 100%), #2a211826 var(--p, 100%)); }
.vol::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border: 0; background: url(/zhafantian/img/ui/c-bead.webp) 50% 50%/contain no-repeat; filter: drop-shadow(0 1px 2px #0008); cursor: pointer; }
.vol::-moz-range-thumb { width: 24px; height: 24px; border: 0; background: url(/zhafantian/img/ui/c-bead.webp) 50% 50%/contain no-repeat; cursor: pointer; }
/* 进度条：槽里有内阴影，填的那一段带一道高光 */
.prog u, .pity u { box-shadow: inset 0 1px 2px #0008; } .prog u i, .pity u i { box-shadow: inset 0 2px 0 #fff6; border-radius: 4px; }
/* 宽屏右栏底边：下面还有内容时浮一枚往下的箭头 */
.colmore { grid-column: 2; grid-row: 2; align-self: end; justify-self: center; z-index: 3; width: 30px; margin-bottom: 4px; pointer-events: none; filter: drop-shadow(0 2px 3px #000a); animation: zft-more 1.4s ease-in-out infinite alternate; }
.colmore.off { display: none; } .wide .col { grid-column: 2; grid-row: 2; } .wide .left { grid-column: 1; grid-row: 2; } .wide .nav.rail { grid-column: 3; grid-row: 2; }
@keyframes zft-more { from { transform: translateY(-4px); opacity: .6; } to { transform: none; opacity: 1; } }
/* 第 13 条：大屏。右边的导航在整条里均匀排开，现在这一页垫一块亮底；成段的字限行宽；大卡的关闭键不压字 */
.wide .nav.rail { justify-content: space-evenly; gap: 6px; }
.wide .nav.rail .tab { width: 64px; padding: 6px 0 4px; border-radius: 10px; }
.wide .nav.rail .tab.on { background: linear-gradient(#f6e2a633, #f6e2a611); box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 10px #ffd76a55; }
.dim, .pl-n, .qp-n, .help li { max-width: 34em; }
.wide .cvd .cv-h { padding-right: 40px; }
@media (prefers-reduced-motion: reduce) { .colmore { animation: none !important; } }
.top .icbtn { color: var(--gold2); }
/* 十关：「已胜」印盖在头像右下；宽屏两列不许撑破右栏 */
.stages.hall .sf { overflow: visible; } .stages.hall .sf > img { border-radius: 50%; }
.stages.hall .sf .won { position: absolute; right: -10px; bottom: -6px; padding: 0 3px; border-width: 1.5px; background: #f0e3c2e6; font-size: 11px; letter-spacing: 0; line-height: 1.3; }
.stages.hall button { flex: none; white-space: nowrap; }
@media (orientation: landscape) and (min-width: 640px) { .stages, .goods, .pcs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wide .stages.hall b { white-space: normal; overflow: visible; }

/* ── 四种屏幕一起看过之后的小修（2026-10-06 晚）── */
/* 老板娘的话：只在标点处换行，句号不许单独掉一行 */
.scene .talk { overflow-wrap: normal; max-width: none; }
/* 十关的关名：「第几关」和名字各是一整块，放不下整块换行 */
.stages.hall b, .wide .stages.hall b { display: flex; flex-wrap: wrap; gap: 0 .7em; white-space: nowrap; overflow: visible; } .stages.hall b span { display: inline; font-size: inherit; color: inherit; font-weight: inherit; }
/* 宽屏行头页：少馆主那一格定高，行头格在两边居中；手机横屏再矮一点 */
@media (orientation: landscape) and (min-width: 640px) { .doll-m { height: 320px; min-height: 0; } .doll-s { align-self: center; } }
@media (orientation: landscape) and (max-height: 520px) { .doll-m, #app.wide.sub .doll-m { height: 236px; min-height: 0; } }
/* 电脑：少馆主那一格不再拉满整栏（原来中间一大片空着，两边的格子两个一排、第三个掉到下一行）；改成两边各一竖列三格、和中间一样高，整块居中（2026-10-10 站长点名） */
@media (orientation: landscape) and (min-height: 521px) and (min-width: 640px) {
  .doll { grid-template-columns: 104px minmax(0, 380px) 104px; justify-content: center; gap: 12px; }
  .doll-s, .doll-s:last-child { grid-template-columns: minmax(0, 1fr); grid-column: 1; grid-row: 1; align-self: stretch; align-content: space-between; }
  .doll-s:last-child { grid-column: 3; }
  .doll-m { grid-column: 2; }
}
/* 手机横屏：两边各三格排成一行、少馆主那一格压矮，六格不用往下滑就看得全 */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 640px) {
  .doll { grid-template-columns: minmax(0, 266px) minmax(0, 1fr) minmax(0, 266px); margin-top: 2px; }
  .doll-s, .doll-s:last-child { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: 1; grid-row: 1; }
  .doll-s:last-child { grid-column: 3; }
  .doll-m, #app.wide.sub .doll-m { grid-column: 2; height: 146px; align-items: flex-start; }
  .doll-m > img { height: 190%; max-width: none; margin-top: 36px; object-position: 50% 0; }
}
/* 牌桌正中的茶盘：小一点、靠下一点，不压底牌 */
.mid .desk { width: clamp(46px, 9%, 92px); top: 40%; opacity: .42; }
/* 茶盘垫在桌面上、压在所有牌的下面：打出来的牌盖住它，不让它挡牌 */
#app .mid { isolation: isolate; } .mid .desk { z-index: -1; }
/* 往下的箭头：小一点、半透明，不挡字 */
.colmore { width: 20px; opacity: .8; }

/* 伙伴等级：大卡上的等级一行、搭档一行，退或传的弹层 */
.cv-lv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 13px; } .cv-lv > b { padding: 0 8px; border: 1.5px solid var(--red); border-radius: 6px; color: var(--red); font-size: 14px; }
.cv-lvn { order: 9; flex: 1 1 100%; min-width: 0; font-size: 12px; font-weight: 400; color: #7a6a52; text-align: left; } .cv-lv .price { margin: 0; padding: 0 8px; border: 1px solid #b89a5a; border-radius: 10px; background: #2a211814; color: #5a4a3a; font-size: 12px; display: inline-flex; align-items: center; gap: 3px; } .cv-lv .price.short { color: var(--red); border-color: var(--red); } .cv-lv .price .ic { width: 16px; height: 18px; }
.cv-lv .link { color: #7a6a52; font-size: 12px; }
.cv-pair { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 4px 0; padding: 3px 8px; border: 1px dashed #b89a5a; border-radius: 6px; font-size: 13px; } .cv-pair b { color: #7a6a52; font-weight: 400; } .cv-pair i { flex: 1 1 8em; font-style: normal; font-size: 12px; font-weight: 400; color: #7a6a52; } .cv-pair span { font-size: 12px; color: #7a6a52; }
.cv-bonds { margin: 6px 0 4px; } .cv-bonds > u { display: block; margin: 0 0 2px; font-size: 12px; font-weight: 400; color: #7a6a52; text-decoration: none; letter-spacing: 2px; } .cv-bonds .cv-pair { margin: 3px 0; }
.cv-pair.on { border-style: solid; border-color: var(--red); } .cv-pair.on span { color: var(--red); font-weight: 700; }
.plv-n { width: fit-content; max-width: 100%; margin: 0 auto 8px; font-size: 13px; font-weight: 400; color: #5a4a3a; text-align: left; }
.plv-l li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; } .plv-l li > div { flex: 1; min-width: 0; } .plv-l li > .pcart { flex: none; float: none; width: 46px; margin: 0; } .plv-l li > .pcart img { display: block; width: 100%; height: auto; }
.plv-l li b, .plv-l li i { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plv-l li i { font-style: normal; font-size: 12px; font-weight: 400; }
.plv-l .price { flex: none; margin: 0; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 400; color: inherit; } .plv-l .price.short { color: var(--red); }
.plv-l li { background: #2a211812; border-color: #b89a5a; color: #5a4a3a; } .plv-l li b { color: #2a2118; } .plv-l li i { margin-left: 0; color: #7a6a52; } .plv-l button.mini { flex: none; }
.set-notes { list-style: none; width: fit-content; max-width: 100%; margin: 4px auto 0; padding: 0; font-size: 13px; font-weight: 400; color: #7a6a52; text-align: left; }
.goods.bag li > div { flex: 1; min-width: 0; } .goods.bag li p { margin: 0; font-size: 13px; font-weight: 400; color: #5a4a3a; text-align: left; } .goods.bag .bag-from { font-size: 12px; color: #7a6a52; } .bag-n { flex: none; min-width: 2.2em; font-style: normal; font-size: 22px; color: var(--red); text-align: right; } .goods.bag li.none .bag-n { color: #a8997c; } .goods.bag li b { color: #2a2118; }
/* 说明气泡：出在点的地方旁边（电脑上鼠标移上去就出），不再统一顶在屏幕上沿 */
/* 对手的计动到了自己：桌上留的那一枚提示，偏红 */
.jchip.hit { border-color: #e0563f; background: #5a1a12; color: #ffd9cf; }
.tipb { position: fixed; z-index: 60; left: 0; top: 0; max-width: min(440px, 92vw); padding: 12px 16px 13px; background: linear-gradient(#fbf3dc, #efe0bb); border: 2px solid var(--gold); border-radius: 10px; box-shadow: 0 0 0 1px #5a431c, 0 6px 16px #000a; color: #3b2f20; font: 400 16px/1.55 system-ui, "PingFang SC", "Microsoft YaHei", sans-serif; text-align: left; pointer-events: none; opacity: 0; transition: opacity .12s; } .tipb.on { opacity: 1; }
/* 伙伴页上两块牌子的进度（2026-10-09） */
.mgoals { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin: 8px 0; font-size: 13px; line-height: 1.5; }
.mgoals .mg { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border: 1px solid #d9b56a66; border-radius: 14px; background: #0b222899; }
.mgoals .mg .ttag { margin: 0; } .mgoals .mg i { font-style: normal; opacity: .85; } .mgoals .mg b { color: var(--gold2); } .mgoals .mg em { font-style: normal; opacity: .7; }
.mgoals .mg.got em { color: #8fe0a8; opacity: 1; }
@media (max-width: 480px) { .mgoals { flex-direction: column; align-items: stretch; } .mgoals .mg { justify-content: flex-start; } }
/* 说明气泡分开排（2026-10-09）：浅纸底深字；标题一行，小标签一栏、正文一栏，数加重 */
.tipb h4 { margin: 0 0 7px; padding: 0 0 6px; border-bottom: 1px solid #c9b282; color: #8f2415; font: 700 19px/1.3 "KaiTi", "STKaiti", "楷体", "Kaiti SC", serif; letter-spacing: 1px; }
.tipb p { margin: 0; } .tipb p + p { margin-top: 6px; } .tipb b { color: #a8320f; font-weight: 700; }
.tipb p.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; align-items: start; font-size: 14.5px; line-height: 1.5; color: #5d4c36; }
.tipb p.kv i { margin-top: 1px; padding: 0 6px; border-radius: 4px; background: #d8c494; color: #4a3716; font-style: normal; font-size: 13px; line-height: 20px; white-space: nowrap; }
.tipb h4 + p:not(.kv) + p.kv, .tipb p:not(.kv) + p.kv { margin-top: 9px; padding-top: 8px; border-top: 1px dashed #c9b282; }
.tipb p.kv.ok i { background: #2f7d4f; color: #fff; } .tipb p.kv.ok span { color: #24663f; font-weight: 600; }
.tipb p.kv.off i { background: #9a9080; color: #fff; } .tipb p.kv.bad i { background: #b23a22; color: #fff; } .tipb p.kv.bad span { color: #a02c16; }

/* ── 行头第一步：拜帖、词条、强化、行头背包 ── */
.pill.tie { padding: 0 8px; gap: 3px; cursor: pointer; } .pill.tie em { font-size: 14px; }
.tiec { position: fixed; left: 50%; bottom: calc(118px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 8; padding: 0 10px; border-radius: 11px; border: 1.5px solid var(--gold); background: var(--deep); color: var(--gold2); font-size: 12px; line-height: 20px; white-space: nowrap; cursor: pointer; }
.wide .tiec { position: absolute; bottom: 130px; } .wide .left .tiec { left: 43%; }
@media (min-height: 600px) { .wide .tiec { bottom: 144px; } }
@media (max-height: 520px) { .wide .tiec { bottom: 104px; } }
.slot .fg { position: absolute; right: 3px; top: 2px; padding: 0 4px; border-radius: 6px; background: #000a; color: var(--gold2); font-size: 11px; text-decoration: none; }
.slot .dot { position: absolute; right: -3px; top: -3px; }
.affs { margin: 4px 0; padding: 0; list-style: none; font-size: 13px; font-weight: 400; text-align: left; } .affs li { padding-left: 12px; position: relative; color: #2e6a4a; } .affs li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #2e7d4f; } .affs li.uq { color: #a8431f; } .affs li.uq::before { background: #c8562a; } .affs li.uq u { text-decoration: none; font-weight: 700; margin-right: 6px; }
p.affs.none { color: #8a7a62; }
.fgbox { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 8px 10px; border: 1.5px solid #b89a5a; border-radius: 8px; background: #2a21180d; text-align: left; }
.fgbox > div:first-child { flex: 1; min-width: 0; } .fgbox b { display: block; font-size: 15px; } .fgbox span { display: block; font-size: 12px; font-weight: 400; color: #5a4a3a; } .fgbox .fg-r { color: var(--red); }
.fgbox .lkbuy { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; } .fgbox .price { display: flex; margin: 0; background: #2a211814; color: #5a4a3a; border-color: #b89a5a; font-size: 12px; } .fgbox .price.short { color: var(--red); border-color: var(--red); }
.gi-h { margin: 10px 0 4px; font-size: 13px; color: #7a6a52; text-align: left; }
.bagrows { margin: 0; padding: 0; list-style: none; } .bagrows li { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; padding: 5px 8px; border: 1.5px solid #b89a5a; border-left: 5px solid var(--c1, #b89a5a); border-radius: 7px; text-align: left; }
.bagrows li > div { flex: 1; min-width: 0; cursor: pointer; } .bagrows b { display: block; font-size: 14px; } .bagrows span { display: block; font-size: 12px; font-weight: 400; color: #5a4a3a; } .bagrows li.up b::after { content: " ↑"; color: #2e7d4f; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cmp-c { padding: 6px 8px; border: 1.5px solid #b89a5a; border-top: 5px solid var(--c1, #b89a5a); border-radius: 7px; text-align: left; }
.cmp-c i { display: block; font-style: normal; font-size: 12px; font-weight: 400; color: #7a6a52; } .cmp-c b { display: block; font-size: 15px; } .cmp-v { display: block; font-size: 14px; color: var(--red); } .cmp-s { display: block; font-size: 12px; font-weight: 400; color: #5a4a3a; } .cmp-s.up { color: #2e7d4f; font-weight: 700; } .cmp-s.down { color: #a8642a; }
.cmp-t { margin: 8px 0 2px; font-size: 14px; } .cmp-t.up { color: #2e7d4f; }
.sec.bagh { display: flex; align-items: center; gap: 8px; } .sec.bagh em { font-style: normal; font-size: 13px; letter-spacing: 0; color: var(--gold2); } .sec.bagh em.full { color: #ff9a86; } .sec.bagh button { margin-left: auto; letter-spacing: 0; }
.bagf { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } .bagf button { padding: 1px 11px; font-size: 13px; background: #0004; color: var(--ink); box-shadow: none; } .bagf button.on { background: var(--paper); color: #2a2118; }
.bagg { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; } .slot.bc { height: 76px; cursor: pointer; } .slot.bc img { max-width: 48px; max-height: 42px; }
.slot.bc u { position: absolute; text-decoration: none; font-size: 10px; padding: 0 3px; border-radius: 5px; background: #000a; } .slot.bc .lk { right: 2px; top: 2px; color: #ffd76a; } .slot.bc .lk:has(~ .upm) { top: 26px; }
/* 背包里比身上好的那一件：右上角一枚亮的「更好」牌子，带向上的箭头，一下一下地亮（站长 2026-10-09：原来那个绿底的「好」看不清） */
.slot.bc .upm { right: 3px; top: 3px; z-index: 2; padding: 2px 7px 2px 6px; border: 1px solid #fff3c4; border-radius: 9px 9px 9px 2px; background: linear-gradient(#ff8a3c, #d8321c); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.25; text-decoration: none; text-shadow: 0 1px 0 #7a1c0c; box-shadow: 0 0 0 2px #ffd76a, 0 0 10px #ffb43c; animation: upm-pop 1.3s ease-in-out infinite; }
.slot.bc .upm::after { content: "↑"; margin-left: 1px; }
@keyframes upm-pop { 50% { transform: scale(1.12); box-shadow: 0 0 0 2px #ffe9a0, 0 0 16px #ffd24a; } }
@media (prefers-reduced-motion: reduce) { .slot.bc .upm { animation: none; } } .slot.bc .an { right: 2px; bottom: 18px; color: #bfe8cf; }
.gearbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; font-size: 14px; } .gearbar span { display: inline-flex; align-items: center; gap: 4px; } .gearbar b { color: var(--gold2); } .gearbar .ic { width: 22px; height: 22px; } .gearbar button { position: relative; }
.drop .bt button { width: 86px; }
/* 竖屏顶栏多了一格拜帖：窄屏上心得只留图标和数，名字那一行才放得下 */
@media (max-width: 430px) { .top .pill.xd i { display: none; } .top .pill { padding: 0 7px; } .top .who { font-size: 13px; } }
/* 手机横屏：行头弹层的大图缩小，把地方让给词条、强化和背包列表 */
@media (max-height: 520px) { .wide .dlg.gi .pic { width: 44px; height: 44px; margin-bottom: 0; } .wide .dlg.gi > h3 { margin: 0 0 2px; } .wide .dlg.gi .gi-v { margin: 2px 0; } .sec.bagh { margin-top: 2px; } }

/* ── 伙伴第三批：情报一栏、换牌的小弹层 ── */
.intel { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 3px 0; font-size: 12px; font-weight: 400; }
.intel span { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border: 1px solid #d9b56a88; border-radius: 9px; background: #0005; }
.intel i { font-style: normal; color: var(--dim); margin-right: 2px; } .intel b { color: var(--gold2); font-weight: 400; }
.traded .tr-out { margin: 0 0 6px; text-align: center; } .traded .tr-out b { font-size: 20px; color: var(--red); } .traded .tr-t { margin: 4px 0; font-size: 13px; color: #7a6a52; }
.tr-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; } .tr-g button { display: flex; flex-direction: column; align-items: center; padding: 4px 0; } .tr-g b { font-size: 18px; } .tr-g i { font-style: normal; font-size: 11px; font-weight: 400; opacity: .7; }

/* ── 多座馆（2026-10-06）：门脸按馆换图、选馆条、牌谱、重洗符 ── */
/* 馆主立绘宽窄不一：--ba＝立绘的宽高比、--tk＝那句话的气泡离立绘右边多远（占立绘宽的几成），页面按馆写在 .scene 上（main.ts 的 BOSS_ART）。
   --bw＝立绘摆出来的宽：宽的立绘按宽度封顶（人就矮一点），不挤少馆主；气泡跟着立绘的宽挪，放不下在标点处折行、折了居左 */
#app:not(.wide) .scene { --bw: min(190px * var(--ba, .8), 156px); }
#app:not(.wide) .scene .boss { height: calc(var(--bw) / var(--ba, .8)); }
#app:not(.wide) .scene .talk { right: calc(6px + var(--bw) * var(--tk, .63)); max-width: calc(100% - 14px - var(--bw) * var(--tk, .63)); text-align: left; }
.wide .scene { --bw: min(68cqh * var(--ba, .8), 66cqw); }
.wide .scene .boss { height: calc(var(--bw) / var(--ba, .8)); }
.wide .scene .talk { right: max(30cqw, calc(1cqw + var(--bw) * var(--tk, .63) - 12cqw)); text-align: left; }
@media (max-height: 520px) { .wide .scene { --bw: min(62cqh * var(--ba, .8), 62cqw); } }
/* 选馆条：一行横排，放不下在条里横向滑（条自己滚，不撑出页面的横向滚动） */
.hstrip { position: relative; display: flex; gap: 8px; min-width: 0; max-width: 100%; margin: 10px 0 2px; padding: 9px 8px 6px 2px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hstrip::-webkit-scrollbar { display: none; }
.hs { position: relative; flex: 0 0 104px; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 3px 3px 4px; border-radius: 8px; line-height: 1.3; }
.hs img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 60%; border-radius: 5px; }
.hs b { font-size: 14px; white-space: nowrap; }
.hs i { font-style: normal; font-size: 11px; font-weight: 400; color: #7a6a52; white-space: nowrap; }
.hs.on { box-shadow: 0 0 0 2px var(--red), 0 3px 8px #0007; }
.hs.ok i { color: var(--red); }
#app .hs.st-lock i { color: #ffd9a0; }
#app .hs.st-lock::after { right: 0; top: -7px; width: 22px; height: 22px; }
/* 牌桌上馆规那一格：声东击西这一局用过了就压暗 */
.rule .tip.used { opacity: .55; border-style: dashed; }
/* 牌谱册子与牌谱的一页 */
.pu-n { width: fit-content; max-width: 100%; margin: 0 auto 8px; font-size: 13px; font-weight: 400; color: #5a4a3a; text-align: left; }
.pul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.pul li { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid #b89a5a; border-radius: 8px; background: #fff6; text-align: left; }
.pul li.got { cursor: pointer; }
.pul li > div { flex: 1; min-width: 0; }
.pul .sf { width: 46px; height: 46px; }
.pul b { display: block; font-size: 16px; }
.pul p { width: auto; margin: 0; font-size: 13px; font-weight: 400; color: #5a4a3a; }
#app .pul li.st-lock .sf { filter: grayscale(.8) brightness(.7); }
#app .pul li.st-lock p { color: #a9bbb3; }
#app .pul li.st-lock::after { right: 6px; top: 6px; width: 22px; height: 22px; }
.pu-pic { flex: none; height: 120px; margin: 0 auto 2px; }
.pu-pic img { display: block; height: 100%; width: auto; margin: 0 auto; filter: drop-shadow(0 3px 4px #0005); }
.pud .pu-who { margin: 0 auto 6px; font-size: 13px; font-weight: 400; color: #7a6a52; }
.pud .pu-say { width: auto; max-width: 30em; margin: 0 auto 8px; font-weight: 400; line-height: 1.7; text-align: left; }
@media (max-height: 520px) { .wide .pu-pic { height: 60px; } }

/* 日常：供奉与驻馆、每日与每周任务、七日目标（都是纸面弹层里的东西） */
.side button { position: relative; }
.side .dot, .svt .dot { position: absolute; right: 2px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #e23b2e; border: 1.5px solid #fff; }
.gf-sum, .act { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #b89a5a; border-radius: 8px; background: #fff6; text-align: left; }
.gf-sum > .ic, .act > .ic { flex: none; width: 60px; height: 60px; object-fit: contain; }
.gf-sum > div, .act > div { flex: 1; min-width: 0; }
.gf-sum b, .act b { display: block; font-size: 16px; }
.gf-sum .qm { align-self: flex-start; }
.dlg .gf-sum p, .dlg .gives { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; width: auto; margin: 4px 0 0; font-size: 13px; }
.dlg .gf-tip { margin: 8px auto 0; font-size: 13px; font-weight: 400; color: #7a4a2a; }
.gfl, .gpl, .tkl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.gfl li, .gpl li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid #b89a5a; border-radius: 8px; background: #fff6; text-align: left; }
.gfl li > div, .gpl li > div { flex: 1; min-width: 0; }
.gf-pic { flex: none; width: 64px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #2a211866; }
.gfl b, .gpl b { display: block; font-size: 16px; }
.dlg .gfl p, .dlg .gpl p { width: auto; margin: 0; font-size: 13px; font-weight: 400; color: #5a4a3a; }
.gf-bar { display: block; height: 8px; margin-top: 5px; border-radius: 4px; background: #2a211833; overflow: hidden; text-decoration: none; }
.gf-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #c9a24a, #e8c56a); }
.dlg button.gf-seat { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 60px; min-width: 0; padding: 4px 0; font-size: 12px; background: #fff8; color: #2a2118; }
.gf-seat img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.gf-seat.none::before { content: ""; width: 40px; height: 40px; background: url(/zhafantian/img/ic/gf-seat.webp) 50% 50%/contain no-repeat; }
.gpl li { cursor: pointer; }
.gpl li.on { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.gpl .pface { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.gpl em { flex: none; font-style: normal; font-weight: 700; color: var(--red); white-space: nowrap; }
.tkl li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #b89a5a; border-radius: 8px; background: #fff6; text-align: left; font-size: 15px; }
.tkl b { flex: 1; min-width: 0; font-weight: 400; }
.tkl span { flex: none; min-width: 3em; text-align: right; font-variant-numeric: tabular-nums; color: #5a4a3a; }
.tkl em { flex: none; font-style: normal; font-size: 12px; color: #7a6a52; white-space: nowrap; }
.tkl li.ok { background: #e9f1dc99; border-color: #7d9a55; }
.tkl li.ok b, .tkl li.ok span { color: #4d6a2a; font-weight: 700; }
.taskd h4 { margin: 14px 0 0; font-size: 16px; color: var(--red); letter-spacing: 1px; text-align: center; }
.act .big2, .wk .big2 { flex: none; min-width: 0; padding: 8px 16px; }
.wk { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.wk .gives { flex: 1; margin: 0; }
.dlg-f .qm { margin: 0 auto 0 0; }
.svt { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 2px 0 8px; }
.dlg .svt button { position: relative; min-width: 0; padding: 6px 0; font-size: 15px; background: #fff8; color: #2a2118; }
.dlg .svt button.on { background: linear-gradient(#3b9299, #1d5d67); color: #fff; }
.dlg .svt button.got:not(.on) { background: #e9f1dc; color: #4d6a2a; }
#app .svt .st-lock::after { right: -4px; top: -6px; width: 18px; height: 18px; }
.sv-pic { flex: none; height: 84px; margin: -16px -16px 8px; overflow: hidden; border-radius: 6px 6px 0 0; }
.sv-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dlg .sv-t { margin: 0 auto; font-size: 16px; }
@media (max-height: 520px) { .wide .sv-pic { display: none; } }
/* 每日切磋：江湖页的三格、点开的小弹层 */
.ent { position: relative; }
.ent .dot { position: absolute; right: 4px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #e23b2e; border: 1.5px solid #fff; }
.ent.qc-done .ic { filter: grayscale(.6); opacity: .8; }
.ent.qc-done span { color: #4d6a2a; }
.dlg .qc-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px auto; font-size: 14px; font-weight: 400; }
.soond .tkl span { min-width: 0; text-align: right; }
/* 少馆主设定：两张立绘挑一位、一排头像 */
.who-sex { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dlg .who-sex button { min-width: 0; padding: 6px 0; font-size: 16px; background: #fff8; color: #2a2118; }
.dlg .who-sex button.on { background: linear-gradient(#3b9299, #1d5d67); color: #fff; }
.who-big { display: flex; justify-content: center; margin: 8px 0; padding: 8px 0 4px; border: 1px solid #b89a5a; border-radius: 8px; background: #fff6; }
.who-big img { height: 230px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 3px 4px #0005); }
.who2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dlg .who2 button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 8px 4px 6px; background: #fff8; color: #2a2118; }
.who2 img { height: 190px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 3px 4px #0005); }
.dlg .who2 button.on, .dlg .who-f button.on { border-color: var(--red); box-shadow: inset 0 0 0 2px var(--red), 0 2px 5px #0006; background: #fff; }
.dlg .who-t { margin: 10px auto 4px; font-size: 14px; }
.who-f { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dlg .who-f button { min-width: 0; padding: 3px; background: #fff8; }
/* 八张头像底边画法不一（有的收成圆弧、有的平着画到边）：统一垫一块圆底、描一圈细边，看上去都是圆的 */
.who-f img { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #f3e7c9; box-shadow: 0 0 0 1px #b89a5a; }
.mehead > div:not(.ava) { flex: 1; min-width: 0; }
.mehead h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.mehead h2 .mini { flex: none; margin-left: auto; white-space: nowrap; }
@media (max-width: 430px) { .mehead h2 { font-size: 20px; letter-spacing: 1px; } }
@media (max-height: 520px) { .wide .who2 img { height: 110px; } .wide .who-big img { height: 120px; } }
/* 手机横屏的「换形象」：屏幕矮，立绘放左边占满高度，男女、四张头像、说明放右边（原来上下排，头像被裁掉一半） */
@media (orientation: landscape) and (max-height: 520px) {
  #app .dlg.whod { width: min(620px, 94vw); max-width: none; }
  .dlg.whod .dlg-b { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 6px 14px; align-items: start; }
  .dlg.whod .who-big { grid-column: 1; grid-row: 1 / 4; align-self: stretch; align-items: center; margin: 0; padding: 4px 10px; min-width: 150px; }
  .dlg.whod .who-big img, .wide .dlg.whod .who-big img { height: min(200px, calc(100vh - 170px)); }
  .dlg.whod .who-sex, .dlg.whod .who-f, .dlg.whod .gf-tip, .dlg.whod .who-look { grid-column: 2; }
  .dlg.whod .who-f { gap: 6px; max-width: 320px; }
  .dlg.whod .gf-tip { margin: 0; font-size: 12px; line-height: 1.5; }
}
/* 地图：一章一张底图，竖着接成一条长卷；门脸小图按百分比摆在路上 */
.dlg.mapd { width: min(480px, 100%); padding: 12px 10px 10px; }
.maproll { border-radius: 6px; overflow: hidden; }
.mapch { position: relative; width: 100%; aspect-ratio: 900 / 1400; background: #16343b 50% 50%/cover no-repeat; }
.mapch.cloud { aspect-ratio: 900 / 420; background-position: 50% 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; -webkit-mask-image: linear-gradient(#000 78%, #0000); mask-image: linear-gradient(#000 78%, #0000); margin-bottom: -8%; z-index: 1; }
.mapname { position: absolute; left: 8px; top: 8px; padding: 2px 10px; border: 1.5px solid var(--gold); border-radius: 6px; background: #f0e3c2e6; color: #7a2a1e; font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.mapch.cloud .mapname { position: static; }
/* 新章包的小牌子：一章的图上是一颗键，贴在右上角；全图上是那一章的牌子角上的一枚 */
#app .dlg .mapch > .chp { position: absolute; right: 8px; top: 7px; padding: 2px 10px; border: 1.5px solid #fff3c4; border-radius: 12px; background: linear-gradient(#ffe08a, #e0a52e); color: #4a2a08; font-size: 13px; font-weight: 700; letter-spacing: 1px; box-shadow: 0 2px 6px #0007; }
.dlg .mapall .ma > .chp { position: absolute; right: -6px; top: -10px; padding: 0 7px; border: 1px solid #fff3c4; border-radius: 9px; background: linear-gradient(#ffe08a, #e0a52e); color: #4a2a08; font-size: 11px; font-style: normal; font-weight: 700; line-height: 17px; white-space: nowrap; box-shadow: 0 1px 3px #0006; }
.dlg .mapall .ma { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 34%; min-width: 0; padding: 5px 4px 6px; border: 1.5px solid var(--gold); border-radius: 8px; background: #f0e3c2f2; color: #5a2a1c; line-height: 1.25; box-shadow: 0 3px 8px #0006; }
.dlg .mapall .ma.big { width: 46%; padding: 8px 6px 9px; }
.ma b { font-size: 14px; white-space: nowrap; }
.ma.big b { font-size: 16px; }
.ma i { font-style: normal; font-size: 11px; font-weight: 400; color: #7a6a52; white-space: nowrap; }
.ma u { display: flex; gap: 4px; margin-top: 2px; text-decoration: none; }
.ma s { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #a08a5c; background: #0000; text-decoration: none; }
.ma s.ok { background: var(--red); border-color: var(--red); }
.ma s.on { background: var(--gold); border-color: #8a6a1c; }
.ma.on { box-shadow: 0 0 0 2px var(--red), 0 3px 8px #0007; }
.ma.ok i { color: var(--red); }
.ma.off { background: #2a3a40e6; color: #d8cfb8; border-color: #6a7a80; }
.ma.off i { color: #ffd9a0; }
/* 没放出的章：上面那条被「.dlg .mapall .ma」的底色压住了，这里补足选择器的分量（章节按时间开之后这种牌子天天见） */
.dlg .mapall .ma.off { background: #2a3a40e6; color: #d8cfb8; border-color: #6a7a80; }
.mapnote { width: fit-content; max-width: 100%; margin: 6px auto 0; text-align: left; font-size: 12px; color: #7a6a52; }
.dlg .mapch .mh { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: stretch; width: 25%; min-width: 0; padding: 3px 3px 4px; border-radius: 8px; line-height: 1.25; background: var(--paper); color: #2a2118; }
.dlg .mapch .mh.big { width: 34%; }
.mh img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 60%; border-radius: 5px; }
.mh b { font-size: 13px; white-space: nowrap; }
.mh i { font-style: normal; font-size: 10px; font-weight: 400; color: #7a6a52; white-space: nowrap; }
.mh.on { box-shadow: 0 0 0 2px var(--red), 0 3px 8px #0007; }
.mh.ok i { color: var(--red); }
#app .mapch .mh.st-lock { position: absolute; }
#app .mh.st-lock i { color: #ffd9a0; }
#app .mh.st-lock::after { right: -4px; top: -7px; width: 22px; height: 22px; }
.hs.mapb img { object-position: 50% 30%; }
/* 第二章的牌桌：靛青桌毡 */
.table.ch1 .mid { background-image: radial-gradient(ellipse at 50% 45%, #0000 35%, #0008), url(/zhafantian/img/felt-ch1.webp); }
.table.ch2 .mid { background-image: radial-gradient(ellipse at 50% 45%, #0000 35%, #0008), url(/zhafantian/img/felt-ch2.webp); }
.table.ch3 .mid { background-image: radial-gradient(ellipse at 50% 45%, #0000 35%, #0008), url(/zhafantian/img/felt-ch3.webp); }
.table.ch4 .mid { background-image: radial-gradient(ellipse at 50% 45%, #0000 35%, #0008), url(/zhafantian/img/felt-ch4.webp); }
.table.ch5 .mid { background-image: radial-gradient(ellipse at 50% 45%, #0000 35%, #0008), url(/zhafantian/img/felt-ch5.webp); }
/* 奇遇的牌桌：苍青灰的流云桌毡 */
.table.qy .mid { background-image: radial-gradient(ellipse at 50% 45%, #0000 35%, #0008), url(/zhafantian/img/felt-qiyu.webp); }
/* ── 养成口径调整（2026-10-07）：等级的经验条说明、强化掉级、一键强化、茶馆选桌写对面带什么 ── */
.lvnote { width: fit-content; max-width: 34em; margin: 4px auto 10px; font-size: 13px; font-weight: 400; color: var(--dim); text-align: left; }
.lvup { width: fit-content; max-width: 100%; margin: 6px auto 0; padding: 2px 12px; border-radius: 10px; background: #ffd76a33; color: #8a5a00; font-size: 14px; font-weight: 700; text-align: left; }
.fgauto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 13px; font-weight: 400; color: #5a4a3a; text-align: left; } .fgauto b { min-width: 3.2em; text-align: center; font-size: 15px; color: #2a2118; } .fgauto .on { margin-left: auto; }
.fgnote { width: fit-content; max-width: 100%; margin: 2px 0 4px; font-size: 12px; font-weight: 400; color: var(--red); text-align: left; }
.fgbox.drop { animation: fgdrop 0.9s ease-out; } .fgbox.drop > div:first-child b { color: var(--red); }
@keyframes fgdrop { 0% { transform: translateY(-6px); background: #ff9a8655; } 30% { transform: translateY(3px); } 100% { transform: none; } }
.lklack .mini { margin-left: 4px; }
.stages.tables .tb-opp { display: block; width: fit-content; max-width: 100%; font-size: 12px; font-weight: 400; color: var(--dim); text-align: left; }
/* 2026-10-08 行囊「材料与道具」两栏并排时：数目和「去用」叠成右边一列，把宽度让给说明（原来说明一行只放得下五六个字） */
@media (min-width: 640px) {
  .goods.bag li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; }
  .goods.bag li > :first-child { grid-row: 1 / 3; }
  .goods.bag li > div { grid-row: 1 / 3; }
  .goods.bag li > .bag-n { grid-column: 3; grid-row: 1; align-self: end; justify-self: end; font-size: 19px; }
  .goods.bag li > button { grid-column: 3; grid-row: 2; align-self: start; justify-self: end; }
}

/* 2026-10-08 红点一路接到底（站长定）：导航上的红点，点进去的分栏、最后要点的那颗键上都得有 */
.hasdot { position: relative; overflow: visible; }
.hasdot > .dot, .go > .dot { position: absolute; right: -4px; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: #e23b2e; border: 1.5px solid #fff; box-shadow: none; pointer-events: none; }
.subtabs .hasdot > .dot { right: 2px; top: -3px; }
.go > .dot { right: 12px; top: 8px; width: 13px; height: 13px; }
/* 羁绊那一行的说明按整句折行，不折出半截数字 */
.cv-pair i q { quotes: none; white-space: nowrap; }

/* ── 注册登录的弹框（acct.ts；挂在 body 上，盖在「获得」层上面） ── */
#acct { display: none; }
#acct.on { display: block; position: relative; z-index: 40; }
#acct .mask { z-index: 40; }
.acd { width: min(380px, 100%); }
.acd .dlg-b p { font-weight: 400; }
.ac-row { display: flex; gap: 8px; margin: 8px 0; }
/* 2026-10-11 手机号邮箱并成一个框，页签撤了：头一行和上面那段话之间留的还是原来页签上面那一档 */
.acd .dlg-b > p + .ac-row { margin-top: 12px; }
.ac-in { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; font: 700 17px/1 Georgia, "Times New Roman", serif; letter-spacing: 1px; color: #2a2118; background: #fffaf0; border: 2px solid #b89a5a; border-radius: 8px; outline: none; }
.ac-in::placeholder { font: 400 15px/1 "KaiTi", "STKaiti", "楷体", serif; letter-spacing: 0; color: #8a7a62; }
.ac-in:focus { border-color: var(--red); box-shadow: 0 0 0 2px #b9392c33; }
/* 号填得不对：红边加一圈红晕、底色带一点红，和平常得了焦点的样子分得开 */
.ac-in.ac-bad, .ac-in.ac-bad:focus { border-color: var(--red); background: #fdeeea; box-shadow: 0 0 0 3px #b9392c55; }
.ac-send, .ac-ok { flex: none; min-width: 108px; padding: 0 10px; font-size: 15px; white-space: nowrap; }
/* 2026-10-11 照 Hi8 的登录框：验证码那一行发了码才出；红的主键先是「发送验证码」，那一行出来以后让给「确认」；框空着时主键淡一档 */
.ac-row[hidden] { display: none; }
.acd button.ac-main { background: var(--red); color: #fff; }
.acd button.ac-main.ac-idle { opacity: .55; }
.dlg p.ac-note, .dlg p.ac-by { margin-top: 4px; font-size: 13px; color: #6b5b45; }
/* 发码渠道那一句放在最下面、居左（站长定） */
.dlg p.ac-by { margin-left: 0; margin-right: 0; font-size: 12px; }
.ac-carry { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 12px 0 8px; padding: 12px; border: 2px solid #b89a5a; border-radius: 8px; background: #fffaf0; }
.ac-carry span { font-size: 13px; font-weight: 400; color: #6b5b45; }
.ac-carry b { font: 700 22px/1.3 Georgia, "Times New Roman", serif; letter-spacing: 1px; color: #2a2118; }
.dlg p.ac-msg { min-height: 1.55em; margin-top: 6px; color: var(--red); }
.dlg p.ac-msg.good { color: #4d6a2a; }
/* 不确定、等一等的话（没等到回话、刚发过一条）：黄，不是人填错了 */
.dlg p.ac-msg.ac-warn { color: #8a5a12; }
.dlg p.ac-legal { margin-top: 2px; font-size: 12px; color: #6b5b45; }
.ac-legal a { color: #8a3a12; }
.acct-line { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 400; color: #5a4a3a; }

/* ══ 界面重排（2026-10-09）：导航五项、商铺进顶栏、踢馆栏主舞台是十关地图、日常栏、角色栏、设置瘦身 ══ */
/* 顶栏：头像、名号与战力、玉符心得拜帖、商铺、公告、设置 */
.top { gap: 6px; }
.top .who { display: flex; flex-direction: column; justify-content: center; gap: 1px; flex: 1; min-width: 0; }
.top .who .nm { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.top .who .pw, .mehead .pw { display: inline-flex; align-items: center; gap: 3px; width: fit-content; margin: 0; padding: 0 8px 0 4px; border: 1.5px solid #d9b56a88; border-radius: 11px; background: #0005; box-shadow: none; color: var(--dim); font-size: 12px; font-weight: 400; white-space: nowrap; }
.top .who .pw em, .mehead .pw em { font-style: normal; font-weight: 700; color: var(--gold2); font-size: 14px; }
.top .who .pw .ic { width: 16px; height: 16px; } .top .who .pw i { font-style: normal; margin-right: 3px; }
#app:not(.wide) .top .who .pw i { display: none; }
.mehead .pw { margin-top: 2px; font-size: 16px; font-weight: 700; color: var(--gold2); padding: 1px 12px 1px 6px; }
button.pill { color: var(--ink); background: #0004; box-shadow: none; flex: none; padding: 0 9px; font-weight: 700; }
button.pill.yu u { text-decoration: none; margin-left: 1px; color: var(--gold2); font-size: 15px; line-height: 1; }
.top .shopb { position: relative; flex: none; display: inline-flex; align-items: center; gap: 3px; height: 34px; padding: 0 10px 0 6px; border-radius: 17px; background: linear-gradient(#c9483a, #9a2c22); color: #fff; border-color: var(--gold2); font-size: 14px; white-space: nowrap; }
.top .shopb .ic { width: 24px; height: 24px; } .top .shopb.on { box-shadow: 0 0 0 2px var(--gold2), 0 2px 0 #0005; }
.top .sndw { position: relative; display: inline-flex; flex: none; } .top .icbtn { position: relative; }
.top .hasdot > .dot { right: -3px; top: -4px; }
#app:not(.wide) .top { padding: 0 6px; gap: 4px; }
#app:not(.wide) .top .ava { width: 38px; height: 38px; }
#app:not(.wide) .top .shopb span { display: none; } #app:not(.wide) .top .shopb { padding: 0 6px; }
#app:not(.wide) button.pill { padding: 0 6px; gap: 2px; height: 28px; } #app:not(.wide) .pill .ic { width: 18px; height: 18px; } #app:not(.wide) .pill em { font-size: 14px; }
#app:not(.wide) .top .who .pw { padding: 0 6px 0 3px; }
@media (max-width: 370px) { #app:not(.wide) .top .who .pw .ic { display: none; } #app:not(.wide) button.pill.yu u { display: none; } }
/* 访贤页的限时访贤（2026-10-11）：当期那一位的卡面、名字，下一位和双倍的两行小字 */
#app .pool.lim { border-color: #a8321f; box-shadow: 0 0 0 1px #f6d98a inset; }
.lim-up { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.lim-up .cd-a { flex: none; width: 54px; min-width: 54px; }
.lim-up > div { min-width: 0; text-align: left; } .lim-up b { font-size: 17px; } .lim-up p { margin: 2px 0 0; font-size: 13px; font-weight: 400; color: #5a4a3a; }
.lim-db { width: fit-content; margin: 4px 0; padding: 1px 8px; border-radius: 5px; background: #a8321f; color: #fff; font-size: 12px; text-align: left; }
.lim-nx { margin: 4px 0 0; font-size: 12px; font-weight: 400; color: #6a5a45; text-align: left; }
.pool.lim .pl-n .ic { width: 20px; height: 17px; vertical-align: -3px; margin-right: 3px; }
/* 商铺的赛季基金（2026-10-11）：九个节点排一行，打到了的亮、领过的打勾 */
.sh-nodes { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; margin: 8px 0 4px; padding: 0; list-style: none; }
.sh-nodes li { padding: 3px 0; border: 1.5px solid #b89a5a; border-radius: 6px; background: #fff5; text-align: center; line-height: 1.25; opacity: .6; }
.sh-nodes li i { display: block; font-style: normal; font-size: 10px; font-weight: 400; white-space: nowrap; } .sh-nodes li b { font-size: 13px; }
.sh-nodes li.on { opacity: 1; border-color: var(--red); background: #fff; } .sh-nodes li.got { opacity: 1; background: #dfe8c8; border-color: #6f8f5a; } .sh-nodes li.got b::after { content: ' ✓'; color: #4d6a2a; }
@media (max-width: 430px) { .sh-nodes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* 手机竖屏的顶栏放不下战力那一格，数字一大就被挤得只剩半个图标（2026-10-11 站长定修）：改成贴在头像下沿的小牌子，不占这一排的宽 */
#app:not(.wide) .top .who { position: absolute; left: 6px; bottom: 2px; width: 38px; height: 16px; flex: none; display: block; overflow: visible; pointer-events: none; }
#app:not(.wide) .top .who .pw { pointer-events: auto; position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 16px; padding: 0 5px 0 3px; gap: 1px; background: #0b2228; border-color: var(--gold); }
#app:not(.wide) .top .who .pw .ic { width: 12px; height: 12px; } #app:not(.wide) .top .who .pw em { font-size: 11px; line-height: 13px; }
#app:not(.wide) .top .pill.yu { margin-left: auto; }
/* 手机竖屏的顶栏这一排没有能缩的格：带全屏键的浏览器上、数再大一点就比屏宽，整页被撑出横向滚动。图标键收窄、间距收一档 */
@media (max-width: 430px) { #app:not(.wide) .top { gap: 3px; } #app:not(.wide) .top .icbtn { width: 30px; } }
@media (max-width: 400px) { #app:not(.wide) .top .pill { padding: 0 4px; } #app:not(.wide) .top .icbtn { width: 28px; } }

/* 外壳：电脑上不再有常驻的左栏，主舞台通栏，最右一条导航 */
#app.wide { grid-template: auto minmax(0, 1fr) / minmax(0, 1fr) 76px; }
.wide .col { grid-column: 1; grid-row: 2; } .wide .nav.rail { grid-column: 2; grid-row: 2; } .colmore { grid-column: 1; }
@media (orientation: landscape) and (max-height: 520px) { #app.wide.sub { grid-template-columns: minmax(0, 1fr) 76px; } }
.wide .col > .page { max-width: 1060px; margin-inline: auto; }
.wide .col.homecol { display: flex; overflow: hidden; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }

/* 踢馆栏：一条任务条，下面主舞台（左门脸与馆主、右十关地图），再下面阵容一排、选馆条、茶馆条 */
.stagebox { position: relative; margin: 8px 0; border: 2px solid var(--gold); border-radius: 10px; background: #0b2228; }
.stagebox .left { overflow: hidden; border-radius: 8px 8px 0 0; } .wide .stagebox .left { border-radius: 8px 0 0 8px; }
.stagebox .left { position: relative; }
.stagebox .scene { border-bottom: 2px solid var(--gold); }
#app:not(.wide) .stagebox .scene { height: 214px; }
#app:not(.wide) .stagebox .scene .hero { height: 150px; left: 14px; }
#app:not(.wide) .stagebox .scene { --bw: min(160px * var(--ba, .8), 140px); }
#app:not(.wide) .stagebox .scene .talk { top: 66px; }
.stagebox .stmap { margin: 0; border: 0; border-radius: 0; max-height: none; overflow: visible; }
.wide .homew { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr) 208px; gap: 0 10px; }
.wide .homew > .low { display: flex; flex-direction: column; min-height: 0; padding: 8px 0 8px 10px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d9b56a88 transparent; }
.wide .homew > .low > * { flex: none; }
.wide .homew > .low > .stagebox { flex: 1 1 300px; min-height: 250px; display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); margin: 6px 0; }
.wide .stagebox .left { grid-column: 1; grid-row: 1; border-right: 2px solid var(--gold); }
.wide .stagebox .scene { border-bottom: 0; }
.wide .stagebox .stmap { grid-column: 2; grid-row: 1; width: auto; height: 100%; aspect-ratio: auto; }
.wide .homew .teamrow { margin: 2px 0; } .wide .homew .hstrip { margin: 4px 0 0; }
.wide .homew .zstrip { margin-top: 6px; }
/* 「今天」窄条 */
.today { display: flex; flex-direction: column; gap: 7px; padding: 8px 10px 8px 0; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.today h3 { margin: 0 0 1px; font-size: 15px; color: var(--gold2); letter-spacing: 3px; text-align: center; }
.today button { position: relative; display: flex; align-items: center; gap: 7px; padding: 6px 8px; text-align: left; background: #0005; color: var(--ink); border-width: 1.5px; box-shadow: none; }
.today button .ic { width: 34px; height: 34px; flex: none; }
.today button span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.today button b { font-size: 14px; } .today button i { font-style: normal; font-weight: 400; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today button.more { justify-content: center; padding: 4px; font-size: 13px; color: var(--gold2); background: none; border-style: dashed; }
.today .hasdot > .dot { right: -3px; top: -4px; }
@container (max-width: 900px) { .wide .homew { grid-template-columns: minmax(0, 1fr); } .wide .homew > .today { display: none; } .wide .homew > .low { padding-right: 10px; } }
@media (orientation: landscape) and (max-height: 520px) {
  .wide .homew { grid-template-columns: minmax(0, 1fr); } .wide .homew > .today { display: none; }
  .wide .homew > .low { padding: 4px 8px 6px 10px; }
  .wide .homew .task { min-height: 26px; font-size: 12px; white-space: nowrap; overflow: hidden; } .wide .homew .task .t { overflow: hidden; text-overflow: ellipsis; }
  .wide .stagebox { flex-basis: 236px; min-height: 236px; margin: 4px 0; }
}
/* 关口的介绍 */
.stn { cursor: pointer; z-index: 1; }
.stpop { position: absolute; z-index: 4; transform: translateX(-50%); width: min(250px, 62%); padding: 8px 10px 9px; border: 2px solid var(--gold); border-radius: 10px; background: var(--paper); color: #2a2118; box-shadow: 0 6px 16px #000b; font-size: 12px; font-weight: 400; line-height: 1.4; text-align: left; animation: zft-pop .14s ease-out both; }
@keyframes zft-pop { from { opacity: 0; transform: translateX(-50%) scale(.94); } }
.stpop > b { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 15px; color: var(--red); }
.stpop p { margin: 2px 0 0; } .stpop .stn-j { color: var(--red); } .stpop .stn-g { color: #7a6a52; }
.stpop .bt { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 7px; }
.stpop .bt button { padding: 4px 14px; font-size: 14px; } .stpop .bt .ghost { background: #fff8; color: #2a2118; }
.stpop .bt .sit { padding: 5px 22px; font-size: 15px; background: var(--red); color: #fff; }
#app .stpop .cond { color: #7a6a52; border-color: #7a6a5288; }
@media (prefers-reduced-motion: reduce) { .stpop { animation: none; } }
/* 重打的确认框里那一行「下次不问」 */
button.chk { display: flex; align-items: center; gap: 8px; margin: 10px auto 0; padding: 2px 4px; background: none; border: 0; box-shadow: none; color: #5a4a3a; font-size: 14px; font-weight: 400; }
button.chk i { width: 18px; height: 18px; border: 2px solid #8a7a62; border-radius: 4px; background: #fff8; }
button.chk.on { background: none; color: #2a2118; } button.chk.on i { background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") 50% 50%/14px no-repeat; border-color: var(--red); }

/* 日常栏 */
.dl-top { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--gold); border-radius: 10px; background: #0005; }
.dl-top p { margin: 0; font-size: 13px; font-weight: 400; color: var(--dim); text-align: left; }
.dl-top .bclaim { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 15px; }
.dl-top .bclaim .ic { width: 28px; height: 28px; } .dl-top .bclaim.off { opacity: .6; }
.dl-top .bclaim > .dot { position: absolute; right: -4px; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: #e23b2e; border: 1.5px solid #fff; }
#app .goods.dll { display: block; }
.goods.dll li { padding: 7px 10px; gap: 9px; margin-bottom: 6px; }
.goods.dll .ic { width: 38px; height: 38px; flex: none; }
.goods.dll .dl-l { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; } .goods.dll .dl-l[data-do] { cursor: pointer; }
.goods.dll .dl-l > span { min-width: 0; } .goods.dll b { font-size: 16px; }
.goods.dll .dl-l i { display: block; font-style: normal; font-size: 12px; font-weight: 400; color: #5a4a3a; text-align: left; }
.goods.dll li > button, .goods.dll li > .cond { flex: none; } .goods.dll li > button { position: relative; padding: 4px 16px; font-size: 14px; }
#app .goods.dll .cond { color: #7a6a52; border-color: #7a6a5277; }
.goods.dll li.done { opacity: .72; } .goods.dll li.lk .ic { filter: grayscale(.8); opacity: .7; }
.dailyp .dayrow { margin: 0 0 6px; }
.dailyp h2 { margin-top: 12px; }
@media (orientation: landscape) and (min-width: 640px) { .dl-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; align-items: start; } }
@container (min-width: 960px) { .dl-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } #app .dl-cols > div:last-child .goods.dll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; } }

/* 顶栏那几张卡（战力、玉符、心得、拜帖）与角色栏的账号页签 */
.resd h4 { margin: 10px 0 4px; font-size: 14px; color: var(--red); text-align: left; }
.resl { list-style: none; margin: 0; padding: 0; }
.resl li { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px dashed #b89a5a88; text-align: left; }
.resl li > div { flex: 1; min-width: 0; } .resl b { font-size: 15px; } .resl p { margin: 0; font-size: 12px; font-weight: 400; color: #5a4a3a; text-align: left; }
.resl li > button { flex: none; }
.resd .mebox { margin: 4px 0 2px; }
.acctl { padding: 4px 12px; border: 2px solid var(--gold); border-radius: 10px; background: var(--paper); color: #2a2118; }
.acctl li:last-child { border-bottom: 0; }
#app .bset.look { padding: 10px; border: 2px solid var(--gold); border-radius: 10px; background: var(--paper); margin-top: 0; }
.mepage .setx { display: flex; justify-content: center; gap: 18px; }
.mepage .mehead { margin-top: 0; }
.mehead .lvgo { display: block; margin: 2px 0 4px; padding: 0; font-size: 13px; font-weight: 400; color: var(--gold2); text-align: left; text-decoration: none; }
.dlg.whod .who-look { margin-top: 8px; } .dlg.whod .who-look .sec { margin: 0 0 6px; }
#app .dlg.whod .who-look .bset.look { padding: 0; border: 0; background: none; gap: 6px; }
#app .dlg.whod .who-look .bset-r { padding: 6px 10px; box-shadow: none; }
#app .dlg.whod .who-look .bseg { display: flex; flex-wrap: wrap; gap: 6px; }
#app .dlg.whod .who-look .bseg button, #app .dlg.whod .who-look .bseg span { display: inline-flex; flex-direction: row; align-items: center; width: auto; min-width: 0; padding: 3px 10px 3px 5px; font-size: 14px; }
#app .dlg.whod .who-look .bseg button.on, #app .dlg.whod .who-look .bseg span.on { color: #2a2118; }
#app .dlg.whod .who-look .bseg img { border: 0; aspect-ratio: auto; object-fit: contain; }
#app .dlg.whod .who-look .bseg.bframe img { width: 30px; height: 30px; } #app .dlg.whod .who-look .bseg:not(.bframe) img { width: 20px; height: 28px; }
@media (orientation: landscape) and (min-width: 640px) {
  .wide .dlg.resd { width: min(640px, 100%); }
  .wide .resd .resl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; }
}

/* 公告 */
.newsl { list-style: none; margin: 0; padding: 0; text-align: left; }
.newsl li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 8px 2px; border-bottom: 1px dashed #b89a5a88; cursor: pointer; }
.newsl time { font-size: 12px; font-weight: 400; color: #7a6a52; } .newsl i { font-style: normal; font-size: 11px; font-weight: 400; padding: 0 6px; border: 1px solid #b9392c99; border-radius: 4px; color: var(--red); }
.newsb { text-align: left; font-weight: 400; font-size: 14px; } .newsb p, .newsb ul { margin: 6px 0; } .newsb ul { padding-left: 1.3em; } .newsb a { color: var(--red); }
.wide .dlg.newsd { width: min(640px, 100%); }

/* 设置：只剩开关；电脑上宽版两栏，一屏看完 */
.setg > div > .sndrow:first-child { margin-top: 0; }
.sndp .setx { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.sndp .setx button { position: relative; }
.sndrow button .sw { flex: none; }
@media (orientation: landscape) and (min-width: 640px) {
  .wide .dlg.sndp { width: min(720px, 100%); }
  .wide .setg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
  .wide .setg #app .bset, .wide .setg .bset { margin-top: 0; }
}

/* 导航五项：手机竖屏四栏加中间的圆键 */
#app:not(.wide) .nav .tab { width: 60px; }

.mepage .subtabs button { white-space: nowrap; } #app:not(.wide) .mepage .subtabs { gap: 4px; } #app:not(.wide) .mepage .subtabs button { padding: 5px 9px; }
@media (max-height: 520px) { .wide .sndp .bset-n { display: none; } .wide .sndp .setx { margin-top: 6px; } }
.wide .homew .zsrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
@container (max-width: 760px) { .wide .homew .zsrow { display: block; } }

/* ══ 牌桌的功能键（2026-10-09）：快进、代打、提示、记牌器、设置收成一排，位置固定 ══
   竖屏：按键上面那一行的右头（提示语靠左）；电脑：按键右边那一栏的右头；手机横屏：顶栏右头。 */
.tools { display: flex; flex: none; gap: 4px; }
#app .tools .tk { flex: none; min-width: 0; height: 30px; padding: 0 7px; border: 1.5px solid #d9b56a88; border-radius: 8px; background: #0b2228cc; color: var(--gold2); font-size: 13px; font-weight: 400; line-height: 1; white-space: nowrap; box-shadow: none; text-shadow: none; }
#app .tools .tk.on { border-color: #ffe9a8; background: linear-gradient(#ffd76a, #d9a441); color: #2a2118; font-weight: 700; }
#app .tools .tk:disabled, #app .tools .tk.off { background: #0b222888; color: #8fa39c; border-color: #8a969266; }
#app .tools .tk.off { cursor: help; }
.rside { display: contents; }
#app:not(.wide) .mine > .rside > .tools { position: relative; z-index: 3; align-self: flex-end; margin-bottom: -36px; }
#app:not(.wide) .ctrl { min-height: 80px; padding-top: 36px; }
#app:not(.wide) .ctrl .hintline, #app:not(.wide) .why { left: 0; top: auto; bottom: 48px; transform: none; max-width: calc(100% - 226px); padding: 2px 10px; white-space: normal; text-align: left; line-height: 1.3; }
#app:not(.wide) .ctrl .play2 button { width: 112px; }
#app.wide .rside { grid-column: 3; grid-row: 1; align-self: center; display: flex; align-items: center; gap: 8px; min-width: 0; }
#app.wide .rside .jis { flex: 1 1 0; min-width: 0; }
#app.wide .rside .tools { margin-left: auto; }
#app.wide .top .tools { margin-right: 4px; }
@media (min-height: 600px) { #app.wide .tools .tk { height: 38px; padding: 0 11px; font-size: 16px; } #app.wide .tools { gap: 6px; } }

/* ══ 牌面字放大（2026-10-09 站长挑的版三）：空间小就拿掉点阵，有空间就留着 ══
   大牌（牌宽 70 以上，main.ts 的 CARD_BIG）：牌角 32%，点阵挪到右半边给牌角让位，不要右下倒着的牌角。
   小牌（带 .np）：牌角 38%、不压窄，不要点阵，右下放一个大花色（人头牌、大小王有画，不放）。 */
#app .cd:not(.np) > b:not(.jk) { font-size: calc(var(--w) * .32); transform: none; letter-spacing: -.03em; line-height: 1; }
#app .cd:not(.np) > i { font-size: calc(var(--w) * .224); }
#app .cd:not(.np) > b.t { transform: scaleX(.85); transform-origin: 0 50%; letter-spacing: -.08em; }
#app .cd:not(.np) .pp { left: 48%; right: 12%; }
#app .cd:not(.np) .ix2 { display: none; }
#app .cd.np .pp { display: none; }
#app .cd.np > b:not(.jk) { font-size: calc(var(--w) * .38); transform: none; letter-spacing: -.03em; line-height: 1; }
#app .cd.np > i { font-size: calc(var(--w) * .258); }
#app .cd.np > b.t { transform: none; letter-spacing: -.1em; }
/* 桌上叠得紧的小牌：10 压窄一点，露一条也看得全 */
#app .cds .cd.np > b.t { transform: scaleX(.74); transform-origin: 0 50%; }
#app .cd.np .ix2 b, #app .cd.np.art .ix2 { display: none; }
#app .cd.np .ix2 { transform: none; right: calc(var(--w) * .08); bottom: calc(var(--w) * .07); }
#app .cd.np .ix2 i { font-size: calc(var(--w) * .46); margin: 0; }

/* ── 「下一步」任务条、前三步的手指、关不掉的注册框（2026-10-09 第三批）── */
button.task.nx { position: relative; width: 100%; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; box-shadow: none; }
.task.nx .tg { flex: none; margin-right: 6px; padding: 0 7px; border-radius: 9px; background: var(--gold); color: #2a2118; font-size: 12px; font-weight: 600; }
.task.nx em { flex: none; padding: 1px 12px; border-radius: 11px; background: #b8321c; color: #fff; font-style: normal; font-size: 12px; }
.task.nx.can { border-color: #ffd76a; background: #7a1c0c66; }
.task.nx.can em { background: linear-gradient(#ff8a3c, #d8321c); box-shadow: 0 0 8px #ffb43c; }
.task.nx > .dot { position: absolute; right: -2px; top: -3px; }
.wide .homew .task.nx .t { white-space: nowrap; }
#fgr { position: fixed; left: 0; top: 0; z-index: 45; width: 0; height: 0; display: none; pointer-events: none; }
#fgr.on { display: block; }
/* 牌桌上当场指一下的那句气泡（main.ts 的 ttipSync）：不挡点击，尖角对着那颗键 */
#ttip { position: fixed; left: 0; top: 0; z-index: 46; display: none; box-sizing: border-box; padding: .5em .8em; border: 2px solid #ffd76a; border-radius: .7em; background: #fff3d6; color: #5a1e12; font-size: 14px; line-height: 1.5; text-align: left; box-shadow: 0 4px 14px #000a; pointer-events: none; }
#ttip.on { display: block; animation: ttip-in .2s ease-out both; }
#ttip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -8px; width: 12px; height: 12px; margin-left: -7px; background: #fff3d6; border: 2px solid #ffd76a; border-left: 0; border-top: 0; rotate: 45deg; }
#ttip.dn::after { bottom: auto; top: -8px; rotate: 225deg; }
@keyframes ttip-in { from { opacity: 0; translate: 0 4px; } }
@media (prefers-reduced-motion: reduce) { #ttip.on { animation: none; } }
#fgr i { position: absolute; left: -19px; top: -3px; width: 46px; height: 46px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M20 4c-2.200 0-4 1.800-4 4v16.500l-2.600-2.300c-1.700-1.500-4.300-1.300-5.700.5-1.200 1.500-1.100 3.600.2 5l9.300 11.200C19.300 41.500 22.500 43 25.900 43H30c6.100 0 11-4.900 11-11V21.500c0-2-1.600-3.500-3.500-3.500-.9 0-1.800.4-2.400 1-.4-1.700-1.900-3-3.700-3-1.100 0-2.100.5-2.800 1.200-.6-1.300-1.900-2.200-3.400-2.200-.4 0-.8.1-1.200.2V8c0-2.200-1.800-4-4-4z' fill='%23fff3d6' stroke='%235a1e12' stroke-width='2.400' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50%/contain no-repeat; filter: drop-shadow(0 2px 3px #000b); animation: fgr-tap .9s ease-in-out infinite; }
#fgr::before { content: ""; position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border: 3px solid #ffd76a; border-radius: 50%; animation: fgr-ring .9s ease-out infinite; }
#fgr.flip i { top: auto; bottom: -3px; transform-origin: 50% 50%; rotate: 180deg; left: -27px; }
@keyframes fgr-tap { 50% { translate: 0 9px; } }
#fgr.flip i { animation-name: fgr-tap2; }
@keyframes fgr-tap2 { 50% { translate: 0 -9px; } }
@keyframes fgr-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #fgr i, #fgr::before { animation: none; } }
.dlg p.ac-out { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: 13px; color: #6b5b45; }
.ac-out a { color: #8a3a12; }
/* 点了「连请」马上出的那一层 */
#gain-wait { position: fixed; inset: 0; z-index: 36; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #120c08e6; color: #f6d98a; }
#gain-wait.on { display: flex; animation: gw-in .15s ease-out both; }
#gain-wait img { width: min(46vw, 260px); filter: drop-shadow(0 0 22px #8fc4f5aa); animation: gw-door 1.1s ease-in-out infinite; }
#gain-wait p { margin: 0; font-size: 18px; letter-spacing: .1em; }
@keyframes gw-in { from { opacity: 0; } }
@keyframes gw-door { 50% { transform: scale(1.03); filter: drop-shadow(0 0 34px #ffd24acc); } }
.pool button.chk.plchk { margin: 6px auto 0; color: var(--ink, #e9dfc2); font-size: 13px; } .pool button.chk.plchk.on { color: #f6d98a; }
/* 手机横屏放不下整个注册框：关不掉的那一种收掉开头那段话、压紧行距，验证码那一行和「收不到验证码」的出路要一屏看得到 */
@media (orientation: landscape) and (max-height: 520px) {
  .acd.locked .dlg-b > p:first-child { display: none; }
  .acd.locked h3 { margin: 0 0 4px; font-size: 18px; }
  .acd.locked .ac-row { margin-top: 5px; }
  .acd.locked .ac-in, .acd.locked .ac-send, .acd.locked .ac-ok { padding-top: 5px; padding-bottom: 5px; min-height: 0; }
  .acd.locked p.ac-note, .acd.locked p.ac-by, .acd.locked p.ac-out, .acd.locked p.ac-legal { margin-top: 2px; }
  .acd.locked p.ac-msg { min-height: 1.2em; margin-top: 2px; }
  .acd.locked .dlg-f { padding-top: 4px; } .acd.locked .dlg-f .big2 { padding-top: 6px; padding-bottom: 6px; }
}
/* 2026-10-09 访贤：史诗、传说门开那一下级别的大字；升了星的那一行大字；连请里史诗、传说单独出场 */
.rv-rank { position: absolute; left: 0; right: 0; top: 42%; z-index: 3; margin: 0; text-align: center; pointer-events: none; opacity: 0; font: 900 min(150px, 30vw, 34vh)/1 "STXingkai", "华文行楷", "KaiTi", "STKaiti", "楷体", serif; letter-spacing: .12em; text-indent: .12em; color: #fff; text-shadow: 0 0 18px var(--gc), 0 0 46px var(--gc), 0 4px 0 #0008; transform: translateY(-50%); }
#gain.rv.open > .rv-rank, .mn-spot.on > .rv-rank { animation: rv-rank 1.05s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes rv-rank { 0% { opacity: 0; transform: translateY(-50%) scale(3.4); } 16% { opacity: 1; transform: translateY(-50%) scale(.94); } 24% { opacity: 1; transform: translateY(-50%) scale(1); } 70% { opacity: 1; transform: translateY(-50%) scale(1.04); } 100% { opacity: 0; transform: translateY(-50%) scale(1.5); } }
.rv-tx p.rv-up { visibility: hidden; width: fit-content; margin: 3px auto 5px; padding: 2px 16px 3px; border: 1.5px solid #ffd24a; border-radius: 999px; background: linear-gradient(#5a3a00d9, #2a1a00d9); color: #ffe9a8; font-size: 17px; letter-spacing: 1px; white-space: nowrap; box-shadow: 0 0 14px 2px #ffb40088; }
.rv-up b { margin-right: 9px; color: #ffd24a; font-size: 19px; letter-spacing: 3px; } .rv-up u { text-decoration: none; color: #ffd24a; }
#gain.up .rv-up, .mn-spot.up .rv-up { visibility: visible; animation: rv-up .5s cubic-bezier(.2, .9, .3, 1.5) both; }
@keyframes rv-up { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: none; } }
#gain.up .rv-card .bcard, .mn-spot.up .rv-card .bcard { animation: rv-upcard .7s ease-out both; }
@keyframes rv-upcard { 30% { filter: brightness(1.9); transform: scale(1.05); } }
#gain.up .rv-stars img.on, .mn-spot.up .rv-stars img.on { filter: drop-shadow(0 0 7px #ffd24a) brightness(1.15); }
.mn-c { position: relative; }
.mn-up { position: absolute; top: -8px; right: -7px; z-index: 2; padding: 0 5px; border: 1.5px solid #fff3b8; border-radius: 9px; background: linear-gradient(#ffd24a, #f09a1a); color: #4a2500; font-style: normal; font-size: 10px; font-weight: 700; line-height: 16px; white-space: nowrap; opacity: 0; transform: scale(0); box-shadow: 0 0 8px 2px #ffb400aa; }
.mn-c.in .mn-up { opacity: 1; transform: none; transition: transform .35s .35s cubic-bezier(.2, .9, .3, 1.8), opacity .2s .35s; }
.mn-c.up.in > i { color: #ffd24a; font-weight: 700; }
.mn-c.up.in .mn-f { animation: mn-upglow 1.3s .45s ease-in-out 2; }
@keyframes mn-upglow { 50% { filter: brightness(1.35) drop-shadow(0 0 9px #ffd24a); } }
@media (min-width: 700px) and (min-height: 521px) { .mn-up { font-size: 12px; line-height: 19px; padding: 0 7px; } }
.mn-spot { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; overflow: hidden; text-align: center; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--gc) 26%, #120c08) 0, #120c08f5 62%); }
.mn-spot.on { display: flex; animation: gw-in .18s ease-out both; }
.mn-spot.out { opacity: 0; transition: opacity .2s; }
.sp-rays { position: absolute; left: 50%; top: 42%; width: 200vmax; height: 200vmax; margin: -100vmax; pointer-events: none; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gc) 24%, transparent) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(closest-side, #000 8%, transparent 42%); mask: radial-gradient(closest-side, #000 8%, transparent 42%); animation: sp-spin 20s linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
.sp-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 42%, #fff 0, color-mix(in srgb, var(--gc) 80%, #fff) 22%, color-mix(in srgb, var(--gc) 35%, transparent) 55%, transparent 80%); animation: rv-flash .7s ease-out both; }
.mn-spot.card .rv-card { animation: rv-card .55s cubic-bezier(.2, .9, .3, 1.2) both; }
.mn-spot.card .rv-tx { opacity: 1; transform: none; transition: opacity .3s .4s, transform .3s .4s; }
.mn-spot.seal .rv-seal { animation: rv-seal .32s cubic-bezier(.3, 1.7, .5, 1) both; }
.mn-spot.seal .rv-new { opacity: 1; transition: opacity .25s .2s; }
.mn-spot.rE .rv-seal { border-color: #7a3fc0; color: #7a3fc0; } .mn-spot.rL .rv-seal { border-color: #b8860b; color: #a8580a; background: linear-gradient(135deg, #fff3b8, #ffd24a); }
.mn-spot .rv-card::after { content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 38%, #fffc 50%, transparent 62%) 150% 0 / 260% 100% no-repeat; mix-blend-mode: screen; }
.mn-spot.card .rv-card::after { opacity: 1; animation: rv-shine 2.6s 1s ease-in-out infinite; }
.mn-spot.rL.card .rv-card .bcard { box-shadow: 0 0 0 2px #2a2118, 0 0 0 4px #ffd24a, 0 0 46px 14px #ffb400cc, 0 0 110px 30px #ff8a0066; }
#gain .mn-spot .gn-skip { display: block; }
@media (orientation: landscape) and (max-height: 520px) {
  .mn-spot.on { display: grid; grid-template: 1fr / auto minmax(0, 330px); place-content: center; align-items: center; gap: 10px 26px; padding: 10px 16px; }
  .rv-rank { font-size: min(110px, 40vh); }
  .rv-tx p.rv-up { font-size: 15px; } .rv-up b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .rv-rank, .sp-rays, .sp-flash { display: none; } .mn-up { opacity: 1; transform: none; } .mn-spot, .rv-up, .mn-c.up.in .mn-f { animation: none !important; } }
/* 2026-10-09 牌技说明、带了没发动的计开局晃一下 */
.rv-tx p.rv-sk { margin: 0 auto 3px; font-size: 13px; color: #f0d9a0; } .rv-sk i { margin-left: 8px; font-style: normal; font-weight: 400; font-size: 12px; color: #a9b8ae; }
.pc-s .skl { border-bottom: 1px dashed currentColor; cursor: help; }
.jchip.miss { position: relative; animation: jmiss .5s .8s ease-in-out both; }
@keyframes jmiss { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.jchip.miss::after { content: '没发动'; position: absolute; left: 50%; top: 100%; z-index: 3; padding: 0 7px; border-radius: 8px; background: #000c; color: #d5ddd9; font-size: 11px; font-weight: 400; line-height: 1.7; white-space: nowrap; opacity: 0; pointer-events: none; animation: jmiss-t 2s .8s ease-out both; }
@keyframes jmiss-t { 0% { opacity: 0; transform: translate(-50%, -4px); } 15%, 70% { opacity: 1; transform: translate(-50%, 3px); } 100% { opacity: 0; transform: translate(-50%, 7px); } }
@media (prefers-reduced-motion: reduce) { .jchip.miss, .jchip.miss::after { animation: none; } }
/* 2026-10-09 第四批：拜帖用完的卡、访贤保底快到了 */
.resd .res-tip { margin: 0 0 6px; font-size: 14px; color: #6a5a3a; }
.pity.near u { border-color: #c8402a; } .pity.near u i { background: linear-gradient(90deg, #e0662a, #ffd24a); animation: pity-near 1.2s ease-in-out infinite; } .pity.near b { color: #c8402a; font-weight: 700; }
@keyframes pity-near { 50% { filter: brightness(1.35); } }
.pl-n.near { color: #c8402a; font-weight: 700; }
.subtabs .stag { margin-left: 5px; padding: 0 6px; border-radius: 8px; background: linear-gradient(#ffd24a, #f09a1a); color: #4a2500; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .pity.near u i { animation: none; } }
/* 2026-10-09 资源不够的键不再点不动：灰一点，点了说差多少、带去换 */
.pool .btns button.dull { opacity: .62; }
/* 2026-10-09 访贤页「次数不够时用玉符补上」的字：原来是浅金色，压在纸色上看不清 */
.pool button.chk.plchk { color: #5a4a3a; } .pool button.chk.plchk.on { color: #a8321f; font-weight: 700; }
/* 2026-10-09 第四批：每关的建议战力（够了绿、差一点黄、不够红）、卡关借帮手 */
.need { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; width: fit-content; margin: 3px 0 0; padding: 1px 9px; border-radius: 9px; border: 1px solid currentColor; font-size: 13px; font-weight: 400; }
.need b { font-weight: 700; } .need i { margin-left: 3px; padding: 0 6px; border-radius: 7px; font-style: normal; font-size: 12px; color: #fff; }
.need.n-ok { color: #1f7a45; background: #1f7a4514; } .need.n-ok i { background: #1f7a45; }
.need.n-mid { color: #a8690a; background: #f0a51a1f; cursor: pointer; } .need.n-mid i { background: #c9820f; }
.need.n-low { color: #b23a2a; background: #b23a2a14; cursor: pointer; } .need.n-low i { background: #b23a2a; }
.stpop p.need { margin-top: 4px; }
.set-pw { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin: 6px 0 0; } .set-pw .need { margin: 0; }
/* 第一座馆第 4 关送的那一位伙伴：结算层上一块深色衬底的板，左边小像、右边名字和两句话 */
.set-gift { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; padding: 8px 12px; border: 1px solid #b89a5a; border-radius: 8px; background: #2a2118; text-align: left; }
.set-gift img { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 2px solid #f6d98a; object-fit: cover; object-position: 50% 12%; background: #f3e7c9; }
.set-gift > div { flex: 1; min-width: 0; }
.set-gift b { display: block; font-size: 17px; color: #f6d98a; }
#app .dlg .set-gift p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #f3e7c9; text-align: left; }
/* 打下第一座馆那一回的「明天来有什么」（2026-10-15，settleHtml 的 tmrHtml）：和上面那块入伙的板同一个样子，不带图 */
.set-tmr { margin: 8px 0 0; padding: 8px 12px; border: 1px solid #b89a5a; border-radius: 8px; background: #2a2118; text-align: left; }
.set-tmr b { display: block; font-size: 15px; color: #f6d98a; }
#app .dlg .set-tmr p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #f3e7c9; text-align: left; }
@media (max-height: 520px) { .set-tmr { padding: 5px 10px; } #app .dlg .set-tmr p { margin-top: 2px; font-size: 12px; } }
@media (max-height: 520px) { .set-gift { padding: 5px 10px; } .set-gift img { width: 48px; height: 48px; } .set-gift b { font-size: 15px; } #app .dlg .set-gift p { margin-top: 2px; font-size: 12px; } }
.lendbox { margin: 8px 0 0; padding: 8px 10px 10px; border: 1.5px solid #c9a24a; border-radius: 10px; background: #fff8e0; color: #2a2118; text-align: center; }
.lendbox > b { display: block; font-size: 15px; color: #a8321f; } .lendbox > p { margin: 2px 0 6px; font-size: 12px; font-weight: 400; color: #5a4a3a; }
.lend3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lend3 button { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 5px 3px 6px; border: 1.5px solid #7a4bb0; border-radius: 8px; background: #fffdf4; color: #2a2118; }
.lend3 button img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.lend3 button b { font-size: 14px; white-space: nowrap; } .lend3 button i { font-style: normal; font-size: 12px; color: #7a4bb0; white-space: nowrap; }
.lend3 button em { font-style: normal; font-size: 10.5px; font-weight: 400; line-height: 1.25; color: #5a4a3a; }
.stpop .lendbox { margin-top: 6px; padding: 6px; } .stpop .lend3 button em { display: none; }
.resd .mebox { flex-wrap: wrap; }
.resd .mebox { grid-template-columns: repeat(3, 1fr); } .resd .res-tip { font-size: 13px; font-weight: 400; line-height: 1.5; }
.stpop .lendbtn { display: block; margin: 5px 0 0; border-color: #7a4bb0; color: #5b2f96; } .lendd .lendbox { margin: 0; border: 0; background: none; padding: 0; }
/* 很窄的手机（350 以下）：顶栏多了一颗全屏键，间距收一收、玉符那颗「＋」收起才放得下 */
@media (max-width: 375px) { #app:not(.wide) .top { gap: 2px; padding: 0 3px; } #app:not(.wide) .top .pill { padding: 0 4px; } #app:not(.wide) .top .pill u { display: none; } }

/* 要月卡、掌柜卡才有的键（2026-10-09 站长定：不做成灰的，灰的没人点）：照常亮着、能点，角上挂一枚小金牌写要哪张卡；点了弹出带购买键的那张卡 */
#app [data-do="payAsk"], #app [data-do="bossShop"], #app .wd-it[data-do="lingBuy"] { position: relative; opacity: 1 !important; filter: none !important; cursor: pointer; }
#app [data-do="bossShop"] .bset-r, #app [data-do="bossShop"] li { opacity: 1 !important; }
#app [data-do="payAsk"]::after, #app [data-do="bossShop"]::after, #app .wd-it[data-do="lingBuy"]::after { content: attr(data-tag); position: absolute; right: -5px; top: -9px; z-index: 2; padding: 0 6px; border: 1px solid #fff3c4; border-radius: 9px; background: linear-gradient(#ffe08a, #e0a52e); color: #4a2a08; font: 900 11px/16px "KaiTi", "STKaiti", "楷体", serif; letter-spacing: 0; white-space: nowrap; box-shadow: 0 1px 3px #0006; pointer-events: none; }
#app [data-do="bossShop"]::after { content: "掌柜卡"; }
#app p[data-do="payAsk"], #app p[data-do="bossShop"] { padding-right: 46px; text-decoration: underline dotted; text-underline-offset: 3px; }
#app p[data-do="payAsk"]::after, #app p[data-do="bossShop"]::after { right: 0; top: 2px; }
#app .tools .tk[data-do="payAsk"]::after { top: -10px; right: -4px; font-size: 10px; line-height: 14px; padding: 0 4px; }
/* 没有掌柜卡的人：快进键角上也挂这块牌子（键自己的动作不变，点了出掌柜卡的介绍） */
#app .tools .tk[data-do="spdKey"][data-tag] { position: relative; }
#app .tools .tk[data-do="spdKey"][data-tag]::after { content: attr(data-tag); position: absolute; right: -4px; top: -10px; z-index: 2; padding: 0 4px; border: 1px solid #fff3c4; border-radius: 9px; background: linear-gradient(#ffe08a, #e0a52e); color: #4a2a08; font: 900 10px/14px "KaiTi", "STKaiti", "楷体", serif; letter-spacing: 0; white-space: nowrap; box-shadow: 0 1px 3px #0006; pointer-events: none; }
/* 点了弹出来的那张卡，最上面那一句「为什么看到它」 */
#app .promod .pay-lead { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #fff6dc; border: 1px solid #e8c46a; color: #5a3a12; font-size: 15px; line-height: 1.5; }

/* ── 江湖页重排（2026-10-10 站长定）：最上面炸翻天桌、茶馆两张通栏大卡；下面分「闯」「比」「每日」三组，卡上的小字说怎么玩，状态（.est）在卡的角上；排行榜放末尾 ── */
.bigcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; width: 100%; min-height: 140px; margin: 0 0 8px; padding: 12px 14px; border: 2px solid #ffb45a; border-radius: 10px; background: linear-gradient(100deg, #5a1408f0, #3a120acc 60%, #1a0d0899), url(/zhafantian/img/felt-big.webp) 50% 50%/240px #1a0d08; color: #f3dcc0; font: inherit; text-align: left; box-shadow: 0 3px 10px #0008, 0 0 14px #ff6a2a44; cursor: pointer; }
.bigcard.done { cursor: default; }
.bigcard .plaque { padding: 1px 16px; font-size: 24px; letter-spacing: 6px; text-indent: 6px; background: linear-gradient(#d8401f, #a82a14); color: #ffe9a8; border: 2px solid #ffd76a; outline: 1px solid #2a2118; }
.bigcard > i { font-style: normal; font-size: 14px; font-weight: 400; color: #ffe2c2; text-shadow: 0 1px 3px #000; }
.bigcard .bigrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding-right: 104px; font-size: 12px; color: #ffb45a; }
#app .bigcard .bigrow .zrk { margin: 0; }
.bigcard > em { position: absolute; right: 14px; bottom: 14px; padding: 6px 24px; border: 2px solid #ffd76a; border-radius: 8px; background: linear-gradient(#ff7a3c, #c8321c); color: #fff; font-style: normal; font-size: 18px; box-shadow: 0 0 10px #ff6a2a88; animation: zft-breath 1.8s ease-in-out infinite; }
.bigcard > em.off { background: #5d6b68; border-color: #aab5b0; box-shadow: none; animation: none; font-size: 15px; }
.bigcard .est, .teacard .est { position: absolute; right: 12px; top: 10px; padding: 2px 10px; border-radius: 10px; background: #0b2228d9; color: #ffe9a8; font-size: 12px; font-weight: 400; text-decoration: none; white-space: nowrap; }
#app .bigcard.st-lock { cursor: pointer; } #app .bigcard.st-lock .plaque { filter: grayscale(.8) brightness(.8); } #app .bigcard.st-lock .est { right: 30px; color: #ffd9a0; }
.world .teacard { height: 108px; }
.world h2 { margin: 10px 0 6px; }
.world .rk-ent { margin-top: 12px; }
.ents.n1 { grid-template-columns: minmax(0, 1fr); }
.ent .est { order: -1; align-self: flex-end; margin: -4px 2px 0 0; padding: 0 7px; border-radius: 8px; background: #2a211814; color: #5a4a3a; font-size: 11px; font-weight: 400; line-height: 1.5; text-decoration: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ent.ent-done .ic { filter: grayscale(.6); opacity: .8; } .ent.ent-done .est { color: #4d6a2a; }
#app .ent.st-lock .est { order: 9; align-self: center; margin: 3px 0 0; padding: 0 8px; border: 1px solid #ffd9a077; background: none; color: #ffd9a0; }
#app .ents.n1 .ent { flex-direction: row; align-items: center; gap: 10px; padding: 9px 14px; text-align: left; }
#app .ents.n1 .ent b { flex: none; } #app .ents.n1 .ent span { flex: 1; min-width: 0; font-size: 12px; } #app .ents.n1 .ent .est { order: 9; align-self: center; margin: 0; flex: none; }
/* 每日切磋选哪一处 */
.qcl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.qcl li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #2a211833; border-radius: 8px; background: #fff7; text-align: left; cursor: pointer; }
.qcl li .ic { flex: none; width: 42px; height: 42px; } .qcl li > div { flex: 1; min-width: 0; }
.qcl b { display: block; font-size: 17px; color: var(--red); } .qcl li > div span { display: block; font-size: 12px; color: #5a4a3a; }
.qcl .sit { flex: none; padding: 6px 20px; border-radius: 8px; background: var(--red); color: #fff; font-size: 15px; }
.qcl li.done .ic { filter: grayscale(.6); opacity: .8; } #app .qcl li.done .cond { color: #4d6a2a; border-color: #4d6a2a77; }
/* 结算层上各处独有的那个数（茶馆：连胜） */
#app .dlg p.set-big { margin: 4px auto 2px; width: auto; max-width: 100%; font-size: 30px; font-weight: 700; text-align: center; color: #b8321c; }
#app .dlg p.set-big small { display: block; font-size: 15px; font-weight: 400; color: #5a4a3a; }
#app .dlg.lose p.set-big { color: #5a4a3a; }
/* 宽屏（电脑、手机横屏）：两张大卡并排，首屏露得出下面三组 */
@media (min-width: 760px) { .world .tops { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; } .world .tops .bigcard { margin: 0; min-height: 0; } .world .tops .teacard { height: auto; min-height: 132px; } }
@media (orientation: landscape) and (max-height: 520px) { .world .tops .teacard, .world .tops .bigcard { min-height: 104px; } }

/* 《炸翻天斗地主》全服播报：页面最上沿那一层（web/feed.ts）。单放一个文件，打包时并进 style.css 后面。
   这一层挂在 body 上、不在 #app 里；配色、字体照 style.css 的那几个变量（深青底、描金边、朱红、米黄纸）。
   四种屏幕：手机竖屏（一条 480 宽的竖栏）、电脑不全屏和电脑全屏（宽屏，整层跟 #app 用同一个放大倍数，由 feed.ts 写在 zoom 上）、
   手机横屏（屏高不到 520：细一号；牌桌上再换成半透明的一行细字）。
   层级：盖过页面里的弹层（20）和提示（30），让着「获得」层（35）和登录框（40）。 */
#feed { position: fixed; left: 0; right: 0; top: 0; z-index: 34; height: 0; pointer-events: none; }
#feed .fd-bar { display: none; position: absolute; left: 50%; top: env(safe-area-inset-top, 0px); transform: translateX(-50%); width: min(480px, 100%); overflow: hidden; box-sizing: border-box; pointer-events: auto; cursor: pointer; white-space: nowrap; }
#feed.on .fd-bar { display: flex; align-items: center; }

/* ── 跑马灯：一行字从右往左走（走多久由 feed.ts 写在动画时长上） ── */
#feed.run .fd-bar { height: 24px; background: linear-gradient(#0b2228f5, #0b2228d9); border-bottom: 1px solid var(--gold); box-shadow: 0 2px 6px #0006; color: var(--gold2); font-size: 13px; font-weight: 400; line-height: 24px; letter-spacing: 1px; }
#feed.run .fd-t { display: inline-block; flex: none; padding-left: 100%; animation: fd-run 6s linear both; will-change: transform; }
@keyframes fd-run { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ── 横幅：朱红底、双金边，带头像和头像框，从上沿落下来停一下 ── */
#feed.ban .fd-bar { justify-content: center; gap: 10px; height: 48px; padding: 0 16px; background: linear-gradient(90deg, #6d1a10, #b9392c 22%, #c8402a 50%, #b9392c 78%, #6d1a10); border: 2px solid var(--gold); border-top: 0; border-radius: 0 0 12px 12px; outline: 1px solid #f6e2a688; outline-offset: -5px; box-shadow: 0 4px 12px #000a; color: #fff3c9; font-size: 16px; letter-spacing: 1px; text-shadow: 0 1px 2px #0009; animation: fd-in .26s cubic-bezier(.2, .9, .3, 1.2) both; }
#feed.ban.out .fd-bar { animation: fd-out .2s ease-in both; }
#feed.ban .fd-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#feed .fd-face { flex: none; display: inline-flex; line-height: 0; }
#feed.ban .fd-face img { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--gold2); background: var(--paper); object-fit: cover; }
#feed.ban .fd-face .bfr img { border-color: transparent; }
@keyframes fd-in { from { transform: translate(-50%, -110%); } to { transform: translate(-50%, 0); } }
@keyframes fd-out { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -110%); opacity: 0; } }

/* ── 牌桌上：压在顶栏中间那一段（标题的位置），不接点击，不挡两边的键、手牌和出牌键 ── */
#feed.tbl .fd-bar { pointer-events: none; cursor: default; width: min(300px, calc(100% - 176px)); border-radius: 0 0 10px 10px; }
#feed.tbl.run .fd-bar { border: 1px solid #d9b56a99; border-top: 0; }
#feed.tbl.ban .fd-bar { height: 40px; padding: 0 10px; gap: 6px; font-size: 14px; }
#feed.tbl.ban .fd-face img { width: 26px; height: 26px; }

/* ── 宽屏（电脑不全屏、电脑全屏、手机横屏）：居中一段，不铺满 ── */
@media (orientation: landscape) and (min-width: 640px) {
  #feed .fd-bar { width: min(620px, 56%); }
  #feed.run .fd-bar { border: 1px solid var(--gold); border-top: 0; border-radius: 0 0 10px 10px; }
  #feed.tbl .fd-bar { width: min(460px, 40%); }
}
/* 电脑上屏够高：大一号 */
@media (orientation: landscape) and (min-width: 640px) and (min-height: 600px) {
  #feed.run .fd-bar { height: 28px; font-size: 15px; line-height: 28px; }
  #feed.ban .fd-bar { height: 54px; font-size: 18px; }
  #feed.ban .fd-face img { width: 36px; height: 36px; }
  #feed.tbl.ban .fd-bar { height: 44px; font-size: 16px; }
  #feed.tbl.ban .fd-face img { width: 30px; height: 30px; }
}
/* 手机横屏：细一号；牌桌上是半透明的一行细字叠在顶栏中间 */
@media (max-height: 520px) {
  #feed.run .fd-bar { height: 20px; font-size: 12px; line-height: 20px; }
  #feed.ban .fd-bar { height: 38px; font-size: 14px; gap: 8px; }
  #feed.ban .fd-face img { width: 26px; height: 26px; }
  #feed.ls.run .fd-bar { height: 18px; background: #0b222899; border: 0; box-shadow: none; font-size: 11px; line-height: 18px; color: #f6e2a6e6; }
  #feed.ls.ban .fd-bar { height: 28px; padding: 0 8px; background: linear-gradient(90deg, #6d1a10cc, #b9392ccc 30%, #b9392ccc 70%, #6d1a10cc); border-width: 1px; outline: 0; box-shadow: none; font-size: 12px; font-weight: 400; }
  #feed.ls.ban .fd-face img { width: 20px; height: 20px; border-width: 1px; }
}
@media (max-width: 350px) { #feed.ban .fd-bar { font-size: 14px; padding: 0 10px; gap: 6px; } #feed.tbl .fd-bar { width: calc(100% - 150px); } }

/* ── 弹框：屏幕中间一张卡（借弹层的底座 .mask、.dlg），金边加一圈朱红 ── */
#feed-pop .mask, #feed-news .mask { z-index: 33; }
.dlg.fd-pop { width: min(340px, 100%); padding: 22px 18px 16px; align-items: center; text-align: center; border-width: 3px; box-shadow: 0 0 0 2px var(--red), 0 0 0 4px var(--gold), 0 10px 30px #000c; background: var(--paper) radial-gradient(circle at 50% 0, #fff6dc, transparent 70%); }
.fd-pk { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); padding: 0 14px; border: 2px solid var(--gold); border-radius: 12px; background: linear-gradient(#c8402a, #8f2415); color: #ffe9a8; font-size: 13px; font-style: normal; line-height: 22px; letter-spacing: 3px; text-indent: 3px; white-space: nowrap; }
.dlg.fd-pop { overflow: visible; }
.fd-pf { display: flex; justify-content: center; margin: 10px 0 6px; line-height: 0; }
.fd-pf img { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--gold); background: #fff8; object-fit: cover; }
.fd-pop.sys .fd-pf img { width: 96px; height: 96px; border-radius: 10px; object-position: 50% 15%; }
.fd-pf .bfr { margin: 12px 0 10px; } .fd-pf .bfr img { border-color: transparent; }
.fd-pf .bfr.f1 { margin-top: 30px; margin-bottom: 56px; } .fd-pf .bfr.f3 { margin-bottom: 20px; }
.fd-pn { display: block; font-size: 19px; color: var(--red); letter-spacing: 1px; }
.dlg.fd-pop .fd-pt { margin: 8px auto 0; font-size: 16px; font-weight: 400; line-height: 1.5; }
.dlg.fd-pop.mine .fd-pt { font-size: 18px; font-weight: 700; color: var(--red); }
/* 因此拿到的称号：做成的事下面一行小金牌 */
.dlg.fd-pop .fd-pg { margin: 8px auto 0; padding: 2px 12px; border: 1.5px solid var(--gold); border-radius: 12px; background: #fff7; font-size: 14px; font-weight: 700; line-height: 1.6; color: #7a5a14; }
.dlg.fd-pop .dlg-f { margin-top: 16px; }
.fd-px { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; width: 100%; margin-top: 12px; padding: 8px 10px; border: 1.5px dashed var(--gold); border-radius: 8px; background: #fff7; text-align: left; line-height: 1.4; }
.fd-px b { grid-column: 1; font-size: 15px; color: var(--red); }
.fd-px span { grid-column: 1; font-size: 13px; }
.fd-px i { grid-column: 1; font-size: 12px; font-style: normal; color: #6a5a40; }
.fd-px button { grid-column: 2; grid-row: 1 / span 3; white-space: nowrap; }

/* ── 江湖见闻：最近五十条 ── */
.dlg.fd-news { width: min(440px, 100%); }
.fd-list { list-style: none; margin: 0; padding: 0; }
.fd-list li { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px dashed #b89a5a88; font-size: 14px; font-weight: 400; line-height: 1.4; text-align: left; }
.fd-list li:last-child { border-bottom: 0; }
.fd-list .fd-face { flex: none; display: inline-flex; line-height: 0; }
.fd-list .fd-face img { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--gold); background: #fff8; object-fit: cover; }
.fd-list .fd-face .bfr { margin: 0 4px; } .fd-list .fd-face .bfr img { border-color: transparent; }
.fd-list .fd-t { flex: 1; min-width: 0; }
.fd-list em { flex: none; font-style: normal; font-size: 12px; color: var(--dim); white-space: nowrap; }
.fd-list li.lv-ban .fd-t, .fd-list li.lv-pop .fd-t { font-weight: 700; }
.fd-list li.lv-pop .fd-t { color: var(--red); }
.fd-list li.me { background: #d9b56a33; }
.fd-list .fd-who { flex: none; padding: 1px 8px; font-size: 12px; box-shadow: none; }
.fd-none { margin: 18px auto; font-weight: 400; color: var(--dim); }
@media (max-height: 520px) { .dlg.fd-pop { padding: 16px 16px 10px; } .fd-pf img { width: 52px; height: 52px; } .fd-pf { margin: 6px 0 2px; } .dlg.fd-pop .dlg-f { margin-top: 8px; } .fd-list li { padding: 5px 2px; } }

@media (prefers-reduced-motion: reduce) {
  /* 不走：整句摆在中间，放不下的截断 */
  #feed.run .fd-bar { justify-content: center; padding: 0 12px; }
  #feed.run .fd-t { padding-left: 0; animation: none !important; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #feed.ban .fd-bar, #feed.ban.out .fd-bar { animation: none !important; }
}

/* ── 名号旁的盟小旗（样式在 meng.css；跑马灯和横幅是深底，旗杆换成浅的，字小的地方让一让） ── */
#feed .mg-f { border-left-color: #d9b56a; margin-right: .22em; }
#feed.ls .mg-f { font-size: .9em; }

/* 《炸翻天斗地主》衣帽间、资料页的「称号」一块、看别人的资料那张卡（web/wardrobe.ts）。并在 style.css 后面打包。
   尺寸和配色照 style.css 现成的来：弹层里是纸色的底、深色的字（--ink、--dim 在 .dlg 里已经换成深的），页面上是深底浅字。
   四种屏幕：手机竖屏（默认）、电脑不全屏和全屏（#app.wide）、手机横屏（横着而且矮于 520px）。 */

/* ── 名号前的称号（榜上、资料页、擂台、播报都用这一个） ── */
.ttl { display: inline-block; margin: 0 5px 0 0; padding: 0 6px; border: 1px solid #b89a5a; border-radius: 4px; background: linear-gradient(#3a2a18, #20160c); color: #f6e2a6; font-size: 11px; font-style: normal; font-weight: 600; line-height: 16px; letter-spacing: 1px; text-decoration: none; white-space: nowrap; vertical-align: middle; }
.who .ttl { margin-right: 4px; font-size: 10px; line-height: 14px; }
.mehead h2 .ttl { letter-spacing: 1px; }

/* ── 衣帽间 ── */
#app .dlg.wardd { width: min(460px, 100%); }
#app.wide .dlg.wardd { width: min(680px, 100%); }
.wd-in { white-space: nowrap; }
.wd-me { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 6px 12px; border: 1px solid #b89a5a; border-radius: 10px; background: #fff6; }
.wd-ava { flex: none; display: grid; place-items: center; width: 92px; height: 92px; }
.wd-ava img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #f3e7c9; }
.wd-ava > img { box-shadow: 0 0 0 2px #b89a5a; }
.wd-nm { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; }
.wd-nm b { font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.wd-nm > i { font-style: normal; font-size: 12px; font-weight: 400; color: var(--dim); }
.wd-bk { flex: none; width: 40px; height: 56px; border-radius: 4px; object-fit: cover; box-shadow: 0 1px 4px #0006; }

.wd-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0 0 10px; }
#app .wd-tabs button { min-width: 0; padding: 5px 2px; border-width: 1.5px; background: #fff8; color: #2a2118; font-size: 14px; white-space: nowrap; box-shadow: none; }
#app .wd-tabs button.on { border-color: #1d5d67; background: linear-gradient(#3b9299, #1d5d67); color: #fff; }
.wd-tabs .hasdot > .dot { right: -3px; top: -4px; }

.wd-pane { min-height: 150px; }
.wd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#app .wd-it { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; box-sizing: border-box; padding: 8px 4px 6px; border: 2px solid #b89a5a; border-radius: 10px; background: #fffaf0; color: #2a2118; font: inherit; text-align: center; box-shadow: 0 2px 0 #0003; }
#app button.wd-it { cursor: pointer; }
#app .wd-it.on { border-color: var(--red); box-shadow: inset 0 0 0 2px var(--red), 0 2px 5px #0006; background: #fff; }
#app .wd-it.lack { border-style: dashed; background: #fff5; box-shadow: none; }
.wd-it b { font-size: 14px; line-height: 1.3; }
.wd-it > i { font-style: normal; font-size: 11px; font-weight: 400; line-height: 1.4; color: #7a6a52; }
.wd-it.on > i { color: var(--red); font-weight: 700; }
.wd-it .mini { margin-top: 2px; }
.wd-it.hasdot > .dot { right: -4px; top: -5px; }
/* 没有的那几件不做成灰的：图照常亮着。要买的那张卡的小金牌（[data-do="payAsk"]::after）是 style.css 现成的。 */
.wd-th { display: grid; place-items: center; width: 100%; height: 76px; }
.wd-th.fr img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #f3e7c9; }
.wd-th.back img { width: 46px; height: 64px; border-radius: 4px; object-fit: cover; box-shadow: 0 1px 4px #0006; }
.wd-th.cloth img { width: 100%; height: 64px; border-radius: 6px; object-fit: cover; }
.wd-th.boom svg { width: 64px; height: 64px; }
/* 炸弹特效换了以后，「炸弹」「王炸」那两个大字跟着换颜色（惊雷青白、烟花桃红） */
.fx-word.b-lei { color: #eafaff; -webkit-text-stroke-color: #14388a; text-shadow: 0 .06em 0 #14388a, 0 0 .25em #5fc8ff, 0 0 .6em #7a5cff; }
.fx-word.b-hua { color: #fff3fa; -webkit-text-stroke-color: #a0186a; text-shadow: 0 .06em 0 #a0186a, 0 0 .25em #ff7ac0, 0 0 .6em #ffb02a; }
.wd-th.pl { height: 48px; }
.wd-th.pl .btag { margin: 0; font-size: 14px; line-height: 22px; padding: 0 10px; }
.wd-n, .wd-none { width: fit-content; max-width: 100%; margin: 8px auto 0; font-size: 12px; font-weight: 400; line-height: 1.6; color: #7a6a52; text-align: left; }
.wd-none { margin: 28px auto; font-size: 14px; color: #5a4a3a; }

/* 「形象」页签：立绘、男女、四位里挑一位（.who-big、.who-sex、.who-f 是 style.css 现成的） */
.wd-face .who-big { margin-top: 0; }
.wd-face .who-big img { height: 190px; }
.wd-face .who-sex { margin-bottom: 8px; }
.wd-face .btns { margin: 8px 0 0; }

/* 电脑（不全屏、全屏）：左边立绘，右边挑人；别的页签一排四件 */
#app.wide .wd-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#app.wide .wd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#app.wide .wd-face { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; align-items: center; }
#app.wide .wd-face .who-big { margin: 0; padding: 8px 18px 4px; }
#app.wide .wd-face .who-big img { height: 250px; }
@media (min-width: 520px) {
  #app:not(.wide) .wd-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 370px) {
  .wd-me { gap: 6px; padding: 4px 8px; } .wd-ava { width: 78px; height: 78px; } .wd-ava img { width: 46px; height: 46px; }
  #app .wd-tabs button { font-size: 13px; }
}
/* 手机横屏（矮）：自己那一条收成窄的一列放左边，页签和东西放右边 */
@media (orientation: landscape) and (max-height: 520px) {
  #app .dlg.wardd, #app.wide .dlg.wardd { width: min(700px, 96vw); max-width: none; }
  .dlg.wardd .dlg-b { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 6px 12px; align-items: start; }
  .dlg.wardd .wd-me { grid-column: 1; grid-row: 1 / 3; flex-direction: column; gap: 4px; margin: 0; padding: 6px 4px; }
  .dlg.wardd .wd-nm { text-align: center; justify-items: center; } .dlg.wardd .wd-nm b { font-size: 14px; }
  .dlg.wardd .wd-ava { width: 84px; height: 84px; } .dlg.wardd .wd-ava img { width: 48px; height: 48px; }
  .dlg.wardd .wd-bk { width: 30px; height: 42px; }
  .dlg.wardd .wd-tabs { grid-column: 2; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; }
  .dlg.wardd .wd-pane { grid-column: 2; min-height: 0; }
  #app .wd-grid, #app.wide .wd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #app .wd-it { padding: 4px 4px; } .wd-th { height: 60px; } .wd-th.back img { width: 38px; height: 53px; }
  #app .wd-face, #app.wide .wd-face { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: center; }
  #app .wd-face .who-big, #app.wide .wd-face .who-big { margin: 0; padding: 4px 10px; }
  #app .wd-face .who-big img, #app.wide .wd-face .who-big img { height: min(150px, calc(100vh - 190px)); }
  .wd-face .who-sex { margin-bottom: 5px; } .wd-face .who-f { gap: 6px; max-width: 300px; } .wd-face .wd-n { margin-top: 4px; }
  .wd-none { margin: 12px auto; }
}

/* ── 资料页的「称号」一块（在页面上：深底浅字） ── */
.tt { margin: 0 0 12px; }
.tt-n { width: fit-content; max-width: 100%; margin: 0 0 8px; font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--dim); text-align: left; }
.tt-n .link { margin-left: 4px; font-size: 13px; }
.tt-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
#app .tt-it { display: grid; gap: 1px; min-width: 0; box-sizing: border-box; padding: 6px 10px; border: 1.5px solid var(--gold); border-radius: 8px; background: var(--paper); color: #2a2118; font: inherit; text-align: left; box-shadow: 0 2px 0 #0005; }
#app button.tt-it { cursor: pointer; }
#app .tt-it.on { border-color: #f6d98a; background: linear-gradient(#c8402a, #8f2415); color: #ffe9a8; }
#app .tt-it.lack { border-style: dashed; border-color: #5f7a78; background: #0b222899; color: var(--ink); box-shadow: none; }
.tt-it b { font-size: 15px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-it i { font-style: normal; font-size: 11px; font-weight: 400; line-height: 1.45; color: #7a6a52; }
.tt-it.on i { color: #ffe9a8cc; }
.tt-it.lack i { color: var(--dim); }
.tt-k { margin: 10px 0 5px; font-size: 13px; font-weight: 400; color: var(--gold2); text-align: left; }
#app .tt-more { display: block; margin: 8px 0 0; padding: 2px 0; font-size: 13px; }
#app.wide .tt-l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 560px) { #app:not(.wide) .tt-l { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (orientation: landscape) and (max-height: 520px) { #app.wide .tt-l { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── 看别人的资料 ── */
#app .dlg.pkd { width: min(320px, 100%); }
.dlg.pkd .pk-face { display: flex; justify-content: center; margin: 0 0 6px; }
.dlg.pkd .pk-face img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #0002; }
.dlg.pkd .pk-face > img { border: 3px solid #b89a5a; }
/* 套了框：框比头像大一圈，四边留出框的位置（第 1 款带流苏，下面多留；数和 boss-mark.ts 里擂台对手那张卡的一样） */
.dlg.pkd .pk-face .bfr { margin: 14px 0 8px; }
.dlg.pkd .pk-face .bfr.f1 { margin-top: 32px; margin-bottom: 66px; }
.dlg.pkd .pk-face .bfr.f3 { margin-bottom: 20px; }
#app .dlg.pkd > h3 { font-size: 19px; letter-spacing: 1px; color: #2a2118; }
.dlg.pkd > h3 .ttl { font-size: 12px; line-height: 18px; }
.dlg.pkd .pk-lv { min-height: 1.6em; margin: 0; font-size: 14px; font-weight: 400; color: #5a4a3a; text-align: center; }
/* 带盟赢了几场盟斗的星（盟主、护法才有）：一行放得下居中，折成两行整段居左 */
.dlg.pkd .pk-star { width: fit-content; max-width: 100%; margin: 2px auto 0; font-size: 13px; font-weight: 400; line-height: 1.5; color: #b9801a; text-align: left; }
@media (orientation: landscape) and (max-height: 520px) {
  .dlg.pkd .pk-face img { width: 60px; height: 60px; }
  .dlg.pkd .pk-face .bfr.f1 { margin-top: 24px; margin-bottom: 50px; }
}

/* 看别人的资料：下半张（在哪个服、上阵、纪录、行头）。卡里 8，卡和卡之间 8，格子之间 6 */
.dlg.pkd .pk-sum { margin: 4px 0 0; font-size: 13px; font-weight: 400; color: #5a4a3a; text-align: center; }
.dlg.pkd .pk-sec { margin: 8px 0 0; padding: 8px; border: 1px solid #cdb98a; border-radius: 8px; background: #fffaf0; text-align: left; }
.dlg.pkd .pk-sec > u { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 400; line-height: 16px; color: #8a7350; text-decoration: none; }
.dlg.pkd .pk-up, .dlg.pkd .pk-gear { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dlg.pkd .pk-up span, .dlg.pkd .pk-gear span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; border-radius: 6px; background: #efe3c4; }
.dlg.pkd .pk-up span { height: 84px; gap: 2px; }
.dlg.pkd .pk-gear span { height: 40px; }
.dlg.pkd .pk-up img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; object-position: 50% 12%; }
.dlg.pkd .pk-sec b, .dlg.pkd .pk-sec i { max-width: 100%; overflow: hidden; font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; color: #2a2118; }
.dlg.pkd .pk-sec i { color: #8a7350; }
.dlg.pkd .pk-gear .pk-q5 i { color: #7a4fb0; }
.dlg.pkd .pk-gear .pk-q6 i { color: #b9801a; }
.dlg.pkd .pk-gear .pk-q7 i { color: #b8372b; }
.dlg.pkd .pk-rec { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
.dlg.pkd .pk-rec > u { grid-column: 1 / -1; }
.dlg.pkd .pk-best p { margin: 0; font-size: 13px; font-weight: 400; line-height: 20px; color: #2a2118; }
.dlg.pkd .pk-back { width: 30px; height: 40px; border-radius: 4px; object-fit: cover; }

/* 《炸翻天斗地主》排行榜那一页（web/ranks.ts）。并进打包（build.mjs）。 */
/* 江湖页上的入口：茶馆大卡下面一张带图标的通栏卡 */
#app .rk-ent { display: flex; align-items: center; gap: 12px; width: 100%; margin: 10px 0 0; padding: 10px 14px; border: 2px solid var(--gold); text-align: left; }
.rk-ent .ic { flex: none; width: 46px; height: 46px; object-fit: contain; }
.rk-ent > div { flex: 1; min-width: 0; }
.rk-ent b { display: block; font-size: 20px; letter-spacing: 2px; color: var(--red); }
.rk-ent span { display: block; font-size: 12px; font-weight: 400; color: #5a4a3a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-ent em { flex: none; padding: 6px 18px; border: 2px solid var(--gold); border-radius: 8px; background: var(--red); color: #fff; font-style: normal; font-size: 16px; box-shadow: 0 2px 0 #0005; }
/* 那一层 */
#app .dlg.rkd { width: min(460px, 100%); }
.rk-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0 0 8px; }
.rk-tabs.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#app .rk-tabs button { min-width: 0; padding: 5px 2px; border-width: 1.5px; background: #fff8; color: #2a2118; font-size: 14px; white-space: nowrap; box-shadow: none; }
#app .rk-tabs.n5 button { font-size: 13px; }
#app .rk-tabs button.on { border-color: #1d5d67; background: linear-gradient(#3b9299, #1d5d67); color: #fff; }
.rkd .rk-n { margin: 0 0 6px; font-size: 12px; font-weight: 400; line-height: 1.5; color: #6a5a45; text-align: left; }
.rkd .rk-me { margin: 0 0 6px; font-size: 14px; color: #2a2118; text-align: left; }
.rkd .rk-reg { margin: 8px 0 0; text-align: center; }
.rkd .rk-wait { margin: 26px 0; font-size: 14px; font-weight: 400; color: #6a5a45; text-align: center; }
.rkl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rkl li { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px 10px 3px 6px; border-radius: 8px; background: #fff7; font-size: 14px; color: #2a2118; cursor: pointer; }
.rkl li:hover { background: #fffc; }
.rkl li em { flex: none; width: 26px; text-align: center; font-style: normal; font-weight: 400; color: #7a6a52; }
.rkl li:nth-child(-n+3) em { color: #a8320f; font-weight: 700; font-size: 16px; }
.rkl li img { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #f3e7c9; }
.rkl li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.rkl li b { flex: none; color: #a8320f; font-weight: 700; }
.rkl li b small { margin-left: 6px; font-size: 12px; font-weight: 400; color: #7a6a52; }
.rkl li.me { background: #f6d98a88; box-shadow: inset 0 0 0 1.5px #b8321c; }
@media (max-width: 350px) { #app .rk-tabs button { font-size: 12px; } .rkl li { gap: 6px; font-size: 13px; } }

/* 《炸翻天斗地主》江湖令那一层（web/ling.ts）。并在 style.css 后面打包（build.mjs）。
   尺寸和配色照 style.css 现成的来：弹层里是纸色的底、深色的字（--ink、--dim 在 .dlg 里已经换成深的）。
   四种屏幕：手机竖屏（默认）、电脑不全屏和全屏（#app.wide）、手机横屏（横着而且矮于 520px）。 */

/* ── 大堂上的入口：一张带图标的通栏卡（和排行榜那一张一个样子） ── */
#app .lg-ent { position: relative; overflow: visible; display: flex; align-items: center; gap: 12px; width: 100%; margin: 10px 0 0; padding: 10px 14px; border: 2px solid var(--gold); text-align: left; }
.lg-ent .ic { flex: none; width: 46px; height: 46px; object-fit: contain; }
.lg-ent > div { flex: 1; min-width: 0; }
.lg-ent b { display: block; font-size: 20px; letter-spacing: 2px; color: var(--red); }
.lg-ent span { display: block; font-size: 12px; font-weight: 400; color: #5a4a3a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-ent em { flex: none; padding: 6px 18px; border: 2px solid var(--gold); border-radius: 8px; background: var(--red); color: #fff; font-style: normal; font-size: 16px; box-shadow: 0 2px 0 #0005; }

/* ── 那一层：顶上级数和进度，下面五十级两排，一级一行 ── */
#app .dlg.lgd { width: min(460px, 100%); }
#app.wide .dlg.lgd { width: min(620px, 100%); }
.lg-top { flex: none; display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.lg-lv { flex: none; display: grid; place-items: center; align-content: center; width: 50px; height: 50px; border: 2px solid var(--gold); border-radius: 50%; background: linear-gradient(#3a2a18, #20160c); color: var(--gold2); line-height: 1; }
.lg-lv b { font-size: 21px; }
.lg-lv i { margin-top: 2px; font-style: normal; font-size: 10px; font-weight: 400; }
.lg-prog { flex: 1; min-width: 0; text-align: left; }
.lg-prog u { display: block; height: 9px; border: 1px solid #b89a5a; border-radius: 5px; background: #0001; text-decoration: none; overflow: hidden; }
.lg-prog u i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--red)); }
.lg-prog span { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--dim); }
.lg-on { flex: none; padding: 3px 10px; border: 1px solid #b89a5a; border-radius: 12px; background: #f6d98a88; color: #7a4a12; font-style: normal; font-size: 12px; white-space: nowrap; }
#app .lg-open { flex: none; padding: 5px 12px; background: var(--red); color: #fff; font-size: 14px; white-space: nowrap; }
.lgd .lg-n, .lgb .lg-n { font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--dim); }
.lgd > .lg-n { flex: none; }
.lg-hd, .lg-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
/* 表头跟着格子那一栏一起放在能滚的那一块里、粘在顶上：两个表头才对得上各自那一栏的正中（放在外面的话，滚动条占掉的那一截会让它偏） */
.lg-hd { position: sticky; top: 0; z-index: 2; margin: 0; padding: 4px 0 5px; background: var(--paper, #f0e2bf); font-size: 13px; line-height: 20px; text-align: center; }
.lg-hd i { font-style: normal; font-weight: 400; color: var(--dim); }
.lg-hd b.pay { color: var(--red); }
/* 每一行一样高（--lg-h），格子、级数牌都撑满这一行 */
.lg-list { --lg-h: 54px; list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.lg-row { align-items: stretch; height: var(--lg-h); }
.lg-row > em { display: grid; place-items: center; border-radius: 6px; background: #0001; color: var(--dim); font-style: normal; font-size: 14px; }
.lg-row.in > em { background: linear-gradient(#3b9299, #1d5d67); color: #fff; }
.lg-row.cur > em { box-shadow: 0 0 0 2px var(--gold); }

/* 一格：左边几样东西，右边一枚小牌子（领取、已领、买了就领）。付费一排没买也不做成灰的 */
#app .lg-c { position: relative; overflow: visible; display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; height: 100%; margin: 0; padding: 0 8px; border: 1.5px solid #b89a5a; border-radius: 8px; background: #fffaf0; color: #2a2118; font-size: 12px; box-shadow: none; }
#app .lg-c.pay { border-color: var(--gold); background: linear-gradient(#fff3d2, #f3dca0); }
#app .lg-c.can { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
/* 领过的：还是纸色的格子，东西淡下去，右边一枚「已领」。不跟全站「点不动的键刷成灰」走；类名 got 和 style.css 里一条老样式撞名，外边距在上面压成 0 了 */
#app .lg-c.got, #app .lg-c.got:disabled { opacity: 1; border-color: #cfbf95; background: #efe6cf; color: #2a2118; }
#app .lg-c.pay.got, #app .lg-c.pay.got:disabled { background: #f1e3bb; }
.lg-c.got .lg-ts { opacity: .5; }
.lg-c.wait .lg-ts { opacity: .85; }
.lg-c s { flex: none; min-width: 58px; padding: 0 6px; border-radius: 10px; font-size: 11px; line-height: 20px; text-align: center; text-decoration: none; white-space: nowrap; }
.lg-c.can s { background: var(--red); color: #fff; }
.lg-c.buy s { background: #3a2a18; color: var(--gold2); }
.lg-c.got s { color: #4d6b45; }
.lg-c.got s::before { content: '✓ '; }
.lg-c.hasdot > .dot { right: -4px; top: -5px; }
/* 一样东西：一只一样大的小托盘，图摆在正中，数压在托盘的右下角（图有长有扁，数跟着托盘走才齐） */
.lg-ts { display: flex; gap: 5px; min-width: 0; }
.lg-t { position: relative; flex: none; width: 40px; height: 40px; border-radius: 7px; background: #5a4a3a14; box-shadow: inset 0 0 0 1px #5a4a3a1f; }
.lg-t img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }
.lg-t i { position: absolute; right: -1px; bottom: -1px; min-width: 18px; padding: 0 3px; border-radius: 7px 0 7px 0; background: #2a2118d9; color: #fff; font-style: normal; font-size: 10px; font-weight: 400; line-height: 14px; text-align: center; white-space: nowrap; }

/* ── 买令的那张卡 ── */
#app .dlg.lgb { width: min(420px, 100%); }
.lgb .lg-bt { margin-top: 6px; font-size: 14px; color: var(--red); }
.lg-its { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 4px 0 8px; }
.lg-its .lg-t { width: 48px; height: 48px; }
.lg-its .lg-t i { font-size: 11px; }

/* 窄的手机：一格里东西在上、小牌子在下 */
@media (max-width: 420px) {
  .lg-list { --lg-h: 68px; }
  #app .lg-c { flex-direction: column; justify-content: center; gap: 3px; padding: 0 3px; }
  .lg-t { width: 34px; height: 34px; }
  .lg-t img { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
  .lg-ts { gap: 4px; }
  .lg-c s { min-width: 0; line-height: 17px; }
  .lg-hd, .lg-row { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
  .lg-ent em { padding: 6px 12px; }
}
/* 手机横屏：屏幕矮，顶上那几行收紧，把地方让给格子 */
@media (orientation: landscape) and (max-height: 520px) {
  .dlg.lgd > h3, .lgd > .lg-n { display: none; }
  .lg-top { margin: 0 34px 2px 0; }
  .lg-lv { width: 38px; height: 38px; }
  .lg-lv b { font-size: 17px; }
  .lg-lv i { display: none; }
  .lg-hd { padding: 2px 0 3px; }
  .lg-list { --lg-h: 46px; }
  #app .lg-c { flex-direction: row; justify-content: space-between; padding: 0 6px; }
  .lg-t { width: 34px; height: 34px; }
}

/* 《炸翻天斗地主》两盟的页面（web/meng.ts）。并在 style.css 后面打包（build.mjs）。类名都带 mg-。
   尺寸和配色照 style.css 现成的来：弹层里是纸色的底、深色的字（--ink、--dim 在 .dlg 里已经换成深的）。
   四种屏幕：手机竖屏（默认）、电脑不全屏和全屏（#app.wide）、手机横屏（横着而且矮于 520px）。 */

/* ── 小旗：纯样式画的一面三角旗，跟着字号走。红的朱雀、青的玄武、灰的是没入盟 ── */
.mg-f { --mgc: #9a958a; position: relative; display: inline-block; flex: none; width: .78em; height: 1em; margin: 0 .28em 0 .08em; vertical-align: -.14em; border-left: .12em solid #6b4a1e; border-radius: 1px; font-style: normal; }
.mg-f::after { content: ""; position: absolute; left: 0; top: .04em; width: 100%; height: .6em; background: var(--mgc); clip-path: polygon(0 0, 100% 0, 68% 50%, 100% 100%, 0 100%); }
.mg-f.zq { --mgc: #c8372b; }
.mg-f.xw { --mgc: #1f8a92; }
#app button.mg-gf { display: inline; margin: 0; padding: 0 .1em; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; line-height: inherit; cursor: pointer; }
#app button.mg-gf .mg-f { margin: 0 .2em 0 0; opacity: .85; }
.mg-f.big { font-size: 40px; margin: 0 6px; border-left-color: #8a6a2e; }
/* 深色底上的（顶栏、牌桌）：旗杆换成浅的 */
.top .mg-f, .table .mg-f, .seat .mg-f { border-left-color: #d9b56a; }

/* 大地图上：盟斗里本盟占下的馆（一章的图上是那座馆的牌子，全图上是那一章的牌子），左上角挂一面小旗，挂到下一场结算。
   右上角是没开的馆的锁，所以挂左边；不接点击，点的还是底下那块牌子 */
#app .mapch .mh > .mg-f, #app .mapall .ma > .mg-f { position: absolute; left: -4px; top: -12px; margin: 0; font-size: 20px; filter: drop-shadow(0 1px 2px #0009); pointer-events: none; }
/* 盟主护法带盟赢了几场盟斗的星：跟在职位的字后面 */
.mg-star { margin-left: 4px; font-style: normal; font-size: 12px; font-weight: 700; color: #b9801a; white-space: nowrap; }

/* ── 各玩法入口上那一小条、结算上那一行 ── */
.mg-hint { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 1px 8px 1px 5px; border: 1px solid #b89a5a; border-radius: 10px; background: #fff8; color: #2a2118; font-size: 12px; font-weight: 400; line-height: 18px; white-space: nowrap; }
.mg-hint b { font-weight: 700; }
.mg-hint i { margin-left: 5px; font-style: normal; color: #7a6a52; font-variant-numeric: tabular-nums; }
.mg-hint.full i { color: #4d6a2a; }
#app button.mg-hint.no { border-style: dashed; background: #0002; color: #8a8478; box-shadow: none; cursor: pointer; }
.mg-st { display: flex; align-items: center; justify-content: center; gap: 2px; margin: 4px 0 0; font-size: 14px; color: #2a2118; }
.mg-st b { color: var(--red); }
.mg-st i { margin-left: 6px; font-style: normal; font-size: 12px; font-weight: 400; color: #7a6a52; }
.mg-st.up .mg-f { animation: mg-up .9s ease-out both; }
@keyframes mg-up { 0% { transform: translateY(8px); opacity: 0; } 55% { transform: translateY(-5px); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mg-st.up .mg-f { animation: none; } }

/* ── 江湖页上的入口：名字前带小旗 ── */
.mg-ent b { display: flex; align-items: center; }

/* ── 盟的页面 ── */
#app .dlg.mgd { width: min(460px, 100%); }
#app.wide .dlg.mgd { width: min(640px, 100%); }
.mg-top { flex: none; display: flex; align-items: center; gap: 4px; margin: 0 38px 8px 0; text-align: left; }
.mg-top > div { flex: 1; min-width: 0; }
.mg-top b { display: block; font-size: 22px; letter-spacing: 2px; color: var(--red); line-height: 1.2; }
.mg-top span { display: block; font-size: 12px; font-weight: 400; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .mg-rule { flex: none; }
.mgd .mg-h, .mgr .mg-h { display: flex; align-items: center; margin: 12px 0 5px; font-size: 15px; color: var(--red); letter-spacing: 1px; text-align: left; }
.mgd .mg-n, .mgr .mg-n, .mgc .mg-n { margin: 4px 0; font-size: 12px; font-weight: 400; line-height: 1.6; color: var(--dim); text-align: left; }
.mgd .mg-none { padding: 8px 10px; border: 1px dashed #b89a5a; border-radius: 8px; text-align: center; }
.mg-wait { margin: 18px 0; font-size: 14px; font-weight: 400; color: var(--dim); text-align: center; }

/* 两盟这一周的盟分合计 */
.mg-tot p { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin: 0 0 4px; font-size: 13px; white-space: nowrap; }
.mg-tot p span { display: flex; align-items: center; min-width: 0; }
.mg-tot p b { margin: 0 4px; font-size: 18px; color: #2a2118; font-variant-numeric: tabular-nums; }
.mg-tot p em { flex: none; padding: 0 8px; border-radius: 9px; background: #3a2a18; color: var(--gold2); font-style: normal; font-size: 12px; font-weight: 400; }
.mg-tot u { display: flex; height: 10px; border: 1px solid #b89a5a; border-radius: 6px; background: #0001; text-decoration: none; overflow: hidden; }
.mg-tot u i { display: block; height: 100%; }
.mg-tot u i.zq { background: linear-gradient(#e0574a, #b9392c); }
.mg-tot u i.xw { background: linear-gradient(#3b9299, #1d5d67); }
.mg-tot small { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: var(--dim); text-align: center; }

/* 盟主和两位护法：三格并排，盟主在中间高一点 */
.mg-chief { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: end; }
.mg-chief li { display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 6px 4px; border: 1.5px solid #b89a5a; border-radius: 8px; background: #fff7; cursor: pointer; }
.mg-chief li.zhu { order: 2; padding: 9px 4px; border-color: var(--gold); background: linear-gradient(#fff3d2, #f3dca0); }
.mg-chief li.zuo { order: 1; }
.mg-chief li.you { order: 3; }
.mg-chief li.me { box-shadow: inset 0 0 0 1.5px var(--red); }
.mg-chief img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #f3e7c9; }
.mg-chief li.zhu img { width: 48px; height: 48px; }
.mg-chief b { font-size: 13px; color: var(--red); white-space: nowrap; }
.mg-chief span { max-width: 100%; font-size: 13px; color: #2a2118; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-chief li > i:last-child { font-style: normal; font-size: 11px; font-weight: 400; color: var(--dim); }

/* 自己的四个数 */
.mg-me { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 10px 0 0; }
.mg-me div { min-width: 0; padding: 5px 2px; border-radius: 8px; background: #2a211812; text-align: center; }
.mg-me i { display: block; font-style: normal; font-size: 11px; font-weight: 400; color: var(--dim); white-space: nowrap; }
.mg-me b { display: block; font-size: 17px; color: var(--red); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 今天的盟分：五样来源一样一行（每日任务页上也用这一块） */
.mg-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mg-src li { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 10px; border: 1px solid #b89a5a; border-radius: 8px; background: #fff6; font-size: 14px; text-align: left; color: #2a2118; }
.mg-src b { flex: none; min-width: 2.4em; }
.mg-src em { flex: 1; min-width: 0; font-style: normal; font-size: 12px; font-weight: 400; color: #7a6a52; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-src span { flex: none; font-size: 13px; font-weight: 400; color: #5a4a3a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-src li.ok { background: #e9f1dc99; border-color: #7d9a55; }
.mg-src li.ok span { color: #4d6a2a; font-weight: 700; }
#app .mg-src .mini { flex: none; }
.taskd .mg-h { display: flex; align-items: center; justify-content: center; margin: 14px 0 6px; font-size: 16px; color: var(--red); letter-spacing: 1px; }

/* 全盟名册 */
.mg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0 0 6px; }
#app .mg-tabs button { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 5px 2px; border-width: 1.5px; background: #fff8; color: #2a2118; font-size: 14px; white-space: nowrap; box-shadow: none; }
#app .mg-tabs button.on { border-color: #1d5d67; background: linear-gradient(#3b9299, #1d5d67); color: #fff; }
.mg-sorts { display: flex; align-items: center; gap: 5px; margin: 0 0 6px; }
.mg-sorts i { font-style: normal; font-size: 12px; font-weight: 400; color: var(--dim); }
#app .mg-sorts button { padding: 1px 12px; border-width: 1px; border-radius: 12px; background: #fff8; color: #5a4a3a; font-size: 12px; font-weight: 400; box-shadow: none; }
#app .mg-sorts button.on { border-color: var(--red); background: var(--red); color: #fff; }
.mg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mg-list li { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 3px 10px 3px 6px; border-radius: 8px; background: #fff7; color: #2a2118; cursor: pointer; }
.mg-list li:hover { background: #fffc; }
.mg-list li.me { background: #f6d98a88; box-shadow: inset 0 0 0 1.5px #b8321c; }
.mg-list li > em { flex: none; width: 24px; text-align: center; font-style: normal; font-size: 13px; font-weight: 400; color: #7a6a52; }
.mg-list li img { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #f3e7c9; }
.mg-list li > div { flex: 1; min-width: 0; text-align: left; }
.mg-list li span { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-list li div small { display: block; font-size: 11px; font-weight: 400; color: #7a6a52; white-space: nowrap; }
.mg-list li > b { flex: none; text-align: right; font-size: 16px; color: #a8320f; font-variant-numeric: tabular-nums; }
.mg-list li > b small { display: block; font-size: 11px; font-weight: 400; color: #7a6a52; }
.mg-on { margin-left: 8px; font-style: normal; }
.mg-on.live { color: #2f7a3a; font-weight: 700; }
.mg-on.live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: #3fa34d; vertical-align: 1px; }
.mg-post { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 4px; background: var(--red); color: #fff; font-size: 11px; font-weight: 600; line-height: 16px; vertical-align: 1px; }
.mg-post.zuo, .mg-post.you { background: #1d5d67; }
.mg-post.top { background: #0000; border: 1px solid #b89a5a; color: #7a4a12; line-height: 14px; }
#app .mg-more { display: block; width: 100%; margin: 6px 0 0; padding: 5px; font-size: 13px; }
/* 名册上盟斗那一栏：守哪座馆、出手用了几次、挣了多少战功、守住几回（手机上另起一行，电脑上和牌力排成一排） */
.mg-list li div small.mg-wr { color: #1d5d67; overflow: hidden; text-overflow: ellipsis; }

/* 置顶的盟主令、这一季历周的胜负（盟斗开了以后才有；数由 web/war.ts 读来） */
.mgd .mg-order { display: flex; align-items: center; gap: 8px; width: auto; margin: 0 0 8px; padding: 5px 10px; border-radius: 8px; background: #3a2a18; color: var(--gold2); text-align: left; }
.mg-order mark { flex: none; padding: 0 6px; border-radius: 4px; background: var(--red); color: #fff; font-size: 11px; line-height: 17px; }
.mg-order b { flex: 1; min-width: 0; font-size: 15px; }
.mg-order i { flex: none; font-style: normal; font-size: 11px; font-weight: 400; opacity: .8; white-space: nowrap; }
.mg-past { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.mg-past li { display: grid; justify-items: center; gap: 1px; min-width: 64px; padding: 4px 8px; border: 1.5px solid #b89a5a; border-radius: 8px; background: #fff6; font-size: 13px; color: #2a2118; }
.mg-past li.zq { border-color: #c8372b; }
.mg-past li.xw { border-color: #1f8a92; }
.mg-past li.w { background: #f6d98a88; }
.mg-past i { font-style: normal; font-size: 11px; font-weight: 400; color: #7a6a52; }
.mg-past b { display: flex; align-items: center; white-space: nowrap; }
.mg-past span { font-size: 12px; font-weight: 400; color: #5a4a3a; font-variant-numeric: tabular-nums; }

/* ── 规则那一页 ── */
#app .dlg.mgr { width: min(440px, 100%); }
#app.wide .dlg.mgr { width: min(560px, 100%); }
.mg-tb { width: 100%; margin: 4px 0; border-collapse: collapse; font-size: 13px; color: #2a2118; }
.mg-tb th, .mg-tb td { padding: 3px 6px; border: 1px solid #b89a5a; text-align: center; font-weight: 400; }
.mg-tb th { background: #2a211812; font-size: 12px; color: #5a4a3a; }
.mg-tb td:first-child, .mg-tb th:first-child { text-align: left; }
.mg-tb td:nth-child(2) { font-weight: 700; color: var(--red); }

/* ── 一屏讲一件事的卡：入盟的三张、上任卡、盟斗的预告、劝注册的那一句 ── */
#app .dlg.mgc { width: min(400px, 100%); }
.mg-vs { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 8px; }
.mg-vs b { font-size: 22px; letter-spacing: 2px; color: var(--red); }
.mgc .mg-big { margin: 0 0 6px; font-size: 17px; line-height: 1.5; color: #2a2118; text-align: center; }
.mgc .mg-n { font-size: 13px; }
.mg-todo { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
.mg-todo li { padding: 5px 10px; border: 1px solid #b89a5a; border-radius: 8px; background: #fff6; font-size: 13px; font-weight: 400; color: #2a2118; text-align: left; }
.mg-todo b { margin-right: 6px; color: var(--red); }
.mg-pg { display: flex; justify-content: center; gap: 6px; margin: 10px 0 0; }
.mg-pg i { width: 7px; height: 7px; border-radius: 50%; background: #b89a5a66; }
.mg-pg i.on { background: var(--red); }

/* 窄的手机：四个数的字收一点，名册一行里的字也收一点 */
@media (max-width: 380px) {
  .mg-me b { font-size: 15px; }
  .mg-list li { gap: 6px; padding-right: 8px; }
  .mg-tot p { font-size: 12px; }
  .mg-tot p b { font-size: 16px; }
}
/* 电脑：名册一行里牌力、在不在和名号排成一排，今天的盟分五样排两列 */
#app.wide .mg-list li > div { display: flex; align-items: center; gap: 10px; }
#app.wide .mg-list li span { flex: 1; min-width: 0; }
#app.wide .mg-list li div small { flex: none; font-size: 12px; }
#app.wide .mg-src { grid-template-columns: 1fr 1fr; }
/* 手机横屏：屏幕矮，顶上那几行收紧，卡上的大旗收小 */
@media (orientation: landscape) and (max-height: 520px) {
  .mg-top { margin-bottom: 4px; }
  .mg-top b { font-size: 18px; }
  .mg-f.big { font-size: 28px; }
  .mgd .mg-h, .mgr .mg-h { margin-top: 8px; }
  .mg-chief li, .mg-chief li.zhu { grid-template-columns: auto 1fr; justify-items: start; column-gap: 6px; padding: 4px 6px; }
  .mg-chief li img, .mg-chief li.zhu img { grid-row: span 3; width: 36px; height: 36px; }
  .mg-vs { margin: 0 0 4px; }
  .mgc .mg-big { font-size: 15px; }
  .mg-src { grid-template-columns: 1fr 1fr; }
}
/* 上任卡上问要不要戴上职位的头像框：左边小样、右边一句话 */
.mg-wear { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .18); }
.mg-wear img { flex: none; width: 56px; height: 56px; object-fit: contain; }
.mg-wear .mg-n { margin: 0; }

/* 《炸翻天斗地主》盟斗的页面（web/war.ts）。并在 meng.css 后面打包（build.mjs）。类名都带 wr-。
   尺寸和配色照 style.css、meng.css 现成的来：弹层里是纸色的底、深色的字；朱雀红、玄武青用 meng.css 里旗子的那两个色。
   四种屏幕：手机竖屏（默认）、电脑不全屏和全屏（#app.wide）、手机横屏（横着而且矮于 520px）。 */

/* ── 通用的几样：小标题、说明的小字（一行放得下居中，折行了整段居左）、等着的那一句 ── */
.wr-h { margin: 12px 0 5px; font-size: 15px; color: var(--red); letter-spacing: 1px; text-align: left; }
.dlg .wr-n { width: fit-content; max-width: 100%; margin: 4px auto; font-size: 12px; font-weight: 400; line-height: 1.6; color: var(--dim); text-align: left; }
.dlg .wr-big { width: fit-content; max-width: 100%; margin: 0 auto 6px; font-size: 16px; line-height: 1.5; color: #2a2118; text-align: left; }
.dlg .wr-wait { margin: 14px auto; font-size: 14px; font-weight: 400; color: var(--dim); }
.dlg .wr-done { margin: 0 auto 8px; padding: 6px 12px; border: 1.5px dashed #b89a5a; border-radius: 10px; font-size: 13px; font-weight: 400; line-height: 1.5; color: #5a4a3a; }
.wr-fl { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; background: #7a6a52; color: #fff; font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; vertical-align: 1px; }
.wr-fl.gong { background: var(--red); }
.wr-fl.bu { background: #0000; border: 1px solid #9a958a; color: #7a6a52; line-height: 14px; }
.wr-fl.gd { background: #3a2a18; color: var(--gold2); }
.wr-fl.my { background: #1d5d67; }

/* ── 盟斗的页面 ── */
#app .dlg.wrd { width: min(460px, 100%); }
#app.wide .dlg.wrd { width: min(760px, 100%); }
.wr-top { flex: none; display: flex; align-items: center; justify-content: center; gap: 2px; margin: 0 38px 2px 0; }
.wr-top .mg-f.big { font-size: 26px; margin: 0 2px; }
.wr-top > div { display: flex; align-items: baseline; justify-content: center; gap: 8px; min-width: 0; white-space: nowrap; }
.wr-top b { font-size: 18px; letter-spacing: 1px; }
.wr-top b.zq { color: #c8372b; }
.wr-top b.xw { color: #1f8a92; }
.wr-top em { padding: 0 10px; border-radius: 10px; background: #3a2a18; color: var(--gold2); font-style: normal; font-size: 18px; font-variant-numeric: tabular-nums; }
#app .wr-rule { flex: none; margin-left: 6px; }
.dlg .wr-sub { flex: none; display: flex; align-items: center; justify-content: center; margin: 0 0 6px; font-size: 12px; font-weight: 400; color: var(--dim); }

/* 状态条：现在哪一段、还剩多久；你现在该做什么，带一颗直接去做的键 */
.wr-bar { padding: 8px 10px; border: 1.5px solid var(--gold); border-radius: 10px; background: linear-gradient(#fff3d2, #f3dca0); text-align: left; }
.dlg .wr-bar-h { width: auto; margin: 0 0 4px; font-size: 13px; font-weight: 400; color: #5a4a3a; }
.wr-bar-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wr-bar-t span { flex: 1; min-width: 0; font-size: 16px; line-height: 1.4; color: #2a2118; }
#app .wr-bar-t .big2 { flex: none; padding: 6px 18px; white-space: nowrap; }
.dlg .wr-bar-m { width: auto; margin: 5px 0 0; padding-top: 5px; border-top: 1px dashed #b89a5a; font-size: 12px; font-weight: 400; line-height: 1.5; color: #5a4a3a; }
.dlg .wr-bar-m + .wr-bar-m { margin-top: 2px; padding-top: 0; border-top: 0; }

/* 置顶的盟主令 */
.dlg .wr-order { display: flex; align-items: center; gap: 8px; width: auto; margin: 6px 0 0; padding: 5px 10px; border-radius: 8px; background: #3a2a18; color: var(--gold2); text-align: left; }
.wr-order mark { flex: none; padding: 0 6px; border-radius: 4px; background: var(--red); color: #fff; font-size: 11px; line-height: 17px; }
.wr-order b { flex: 1; min-width: 0; font-size: 15px; }
.wr-order i { flex: none; font-style: normal; font-size: 11px; font-weight: 400; opacity: .8; white-space: nowrap; }

/* 盟主、护法的清单：三行打钩，没做的带直接去做的键 */
.wr-chief { margin: 8px 0 0; padding: 2px 10px 8px; border: 1.5px solid #1d5d67; border-radius: 10px; background: #e6f1f0aa; }
.wr-chief .wr-h { margin-top: 6px; color: #1d5d67; }
.wr-chief ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wr-chief li { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 6px 2px 8px; border-radius: 8px; background: #fff9; font-size: 14px; color: #2a2118; text-align: left; }
.wr-chief li b { flex: none; min-width: 3.2em; }
.wr-chief li span { flex: 1; min-width: 0; font-size: 12px; font-weight: 400; color: #5a4a3a; line-height: 1.4; }
#app .wr-chief .mini { flex: none; white-space: nowrap; }
.wr-ck { flex: none; position: relative; width: 16px; height: 16px; border: 1.5px solid #9a8a6a; border-radius: 4px; background: #fff; }
.wr-chief li.ok .wr-ck { border-color: #4d6a2a; background: #4d6a2a; }
.wr-chief li.ok .wr-ck::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wr-chief li.ok span { color: #4d6a2a; }

/* 手把手的那一小块说明（不挡操作），和它指着的东西 */
.wr-gd { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 6px 8px 6px 10px; border: 2px solid #ffd76a; border-radius: 10px; background: #fff3d6; color: #5a1e12; text-align: left; box-shadow: 0 2px 6px #0003; }
.wr-gd > i { flex: none; padding: 0 6px; border-radius: 9px; background: var(--red); color: #fff; font-style: normal; font-size: 11px; font-weight: 400; line-height: 18px; }
.dlg .wr-gd p { flex: 1; min-width: 0; width: auto; margin: 0; font-size: 14px; line-height: 1.45; }
#app .wr-gd .mini { flex: none; white-space: nowrap; }
.wr-hl { outline: 2.5px solid #ffb300; outline-offset: 1px; animation: wr-hl 1.2s ease-in-out infinite; }
@keyframes wr-hl { 50% { outline-color: #ffb30055; } }
@media (prefers-reduced-motion: reduce) { .wr-hl { animation: none; } }

/* 六座馆六张牌子：手机竖屏两列三行，电脑和横屏三列两行 */
.wr-halls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 8px 0 0; }
#app.wide .wr-halls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#app .wr-hall { position: relative; overflow: visible; display: grid; align-content: start; gap: 3px; min-width: 0; padding: 7px 8px 6px; border: 2px solid #b89a5a; border-radius: 10px; background: #fffaf0; color: #2a2118; font-size: 13px; text-align: left; box-shadow: 0 1px 3px #0003; cursor: pointer; }
#app .wr-hall.zq { border-color: #c8372b; }
#app .wr-hall.xw { border-color: #1f8a92; }
#app .wr-hall.own.zq { background: linear-gradient(#fdecea, #f6d5cf); }
#app .wr-hall.own.xw { background: linear-gradient(#e6f4f4, #cfe6e8); }
#app .wr-hall.mine { box-shadow: inset 0 0 0 1.5px #1d5d67, 0 1px 3px #0003; }
.wr-hn { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; min-width: 0; }
.wr-hn b { font-size: 16px; color: #2a2118; white-space: nowrap; }
.wr-hall em { display: flex; align-items: center; font-style: normal; font-size: 12px; color: #5a4a3a; white-space: nowrap; }
.wr-hall small { display: block; font-size: 11px; font-weight: 400; line-height: 1.45; color: #7a6a52; }
.wr-hall small .mg-f { margin-right: .15em; }
.wr-hall .wr-can { color: #1d5d67; }
.wr-hall .wr-fol { color: #9a5a12; font-weight: 700; }
.wr-zg { display: flex; align-items: center; gap: 6px; }
.wr-zg b { flex: none; min-width: 1.6em; font-size: 16px; font-variant-numeric: tabular-nums; }
.wr-zg b.zq { color: #c8372b; text-align: right; }
.wr-zg b.xw { color: #1f8a92; text-align: left; }
.wr-zg u { flex: 1; display: flex; min-width: 0; height: 8px; border: 1px solid #b89a5a; border-radius: 5px; background: #0001; text-decoration: none; overflow: hidden; }
.wr-zg u i { display: block; height: 100%; }
.wr-zg u i.zq { background: linear-gradient(#e0574a, #b9392c); }
.wr-zg u i.xw { background: linear-gradient(#3b9299, #1d5d67); }

/* 自己这一场：四个数、战功到了数的三档 */
.wr-me { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.wr-me > div { display: grid; align-content: center; justify-items: center; gap: 1px; min-width: 0; min-height: 46px; padding: 5px 2px; border-radius: 8px; background: #2a211812; text-align: center; }
.wr-me i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--dim); white-space: nowrap; }
.wr-me b { font-size: 17px; color: var(--red); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wr-me b.s { max-width: 100%; font-size: 14px; color: #2a2118; overflow: hidden; text-overflow: ellipsis; }
.wr-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 3px 0; }
.wr-pips u { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #7c1f10; background: #b8321c; }
.wr-pips u.off { border-color: #b8a888; background: #0000; }
.wr-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.wr-steps li { display: grid; gap: 1px; min-width: 0; padding: 4px 6px; border: 1px solid #b89a5a; border-radius: 8px; background: #fff6; font-size: 12px; color: #2a2118; text-align: center; }
.wr-steps li span { font-weight: 400; color: #5a4a3a; line-height: 1.35; }
.wr-steps li i { font-style: normal; font-size: 11px; font-weight: 400; color: #7a6a52; }
.wr-steps li.got { border-color: #7d9a55; background: #e9f1dc99; }
.wr-steps li.got i { color: #4d6a2a; font-weight: 700; }

/* 战报 */
.wr-logs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wr-logs li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 8px; background: #fff7; font-size: 13px; font-weight: 400; line-height: 1.45; color: #2a2118; text-align: left; }
.wr-logs img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #f3e7c9; }
.wr-logs b { color: #a8320f; }
.wr-logs li.flip { background: #f6d98a88; }
.wr-logs li > i { font-style: normal; font-size: 11px; color: #7a6a52; white-space: nowrap; }
#app.wide .wr-logs { grid-template-columns: 1fr 1fr; }

/* ── 点开一座馆：对面的三位 ── */
#app .dlg.wrf { width: min(440px, 100%); }
#app.wide .dlg.wrf { width: min(520px, 100%); }
.dlg .wr-word { width: fit-content; max-width: 100%; margin: 4px auto 6px; padding: 3px 10px; border-radius: 8px; background: #2a211812; font-size: 13px; line-height: 1.5; color: #2a2118; }
.dlg .wr-word.gong { background: var(--red); color: #fff; }
.wr-foes { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 7px; border-radius: 12px; }
.wr-foes li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: stretch; }
#app .wr-foe { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; padding: 6px 8px; border: 2px solid #b89a5a; border-radius: 12px; background: #fffaf0; color: #2a2118; text-align: left; box-shadow: none; cursor: pointer; }
.wr-foe img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; border: 2px solid #b89a5a; background: #f3e7c9; }
.wr-foe b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-foe span { display: block; font-size: 12px; font-weight: 400; color: #5a4a3a; white-space: nowrap; }
.wr-foe em { font-style: normal; font-size: 12px; font-weight: 400; color: #7a6a52; white-space: nowrap; text-decoration: underline dotted; }
.wr-pt { display: grid; align-content: center; justify-items: center; min-width: 54px; padding: 2px 6px; border-radius: 10px; background: #2a211812; text-align: center; }
.wr-pt i { font-style: normal; font-size: 12px; color: #5a4a3a; }
.wr-pt b { font-size: 19px; line-height: 1.1; color: var(--red); font-variant-numeric: tabular-nums; }
.wr-pt small { font-size: 10px; font-weight: 400; color: #7a6a52; white-space: nowrap; }
.wr-pt.t2 { background: #f6d98a88; }
#app .wr-go { position: relative; overflow: visible; padding: 0 14px; border: 2px solid #7c1f10; border-radius: 12px; background: var(--red); color: #fff; font-size: 16px; white-space: nowrap; }

/* 看阵容（照擂台那一层的摆法） */
.wr-face { flex: none; display: flex; justify-content: center; margin: 0 0 6px; }
.wr-face img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; border: 3px solid #b89a5a; background: #f3e7c9; }
.wr-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 4px 10px; align-items: center; margin: 4px 0 10px; font-size: 14px; text-align: center; color: #2a2118; }
.wr-vs i { font-style: normal; font-size: 12px; font-weight: 400; color: #7a6a52; }
.wr-vs b { font-size: 18px; }
.wr-vs b.hi { color: #b8321c; }
.wr-team { display: flex; gap: 14px; justify-content: center; margin: 8px 0 4px; }
.wr-team div { display: grid; justify-items: center; gap: 2px; font-size: 13px; color: #2a2118; }
.wr-team img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #b89a5a; }
.wr-team i { font-style: normal; font-size: 11px; font-weight: 400; color: #7a6a52; }
.wr-ji { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 6px 0 0; }
.wr-ji span { padding: 2px 9px; border: 0; border-radius: 10px; background: #2a5a5a; color: #fff; font-size: 12px; font-weight: 400; white-space: nowrap; }

/* ── 下令的三个弹层，和头一回的一屏图解 ── */
#app .dlg.wrc, #app .dlg.wrt { width: min(420px, 100%); }
.wr-gl { margin: 4px 0 8px; padding-left: 22px; display: grid; gap: 4px; font-size: 13px; line-height: 1.6; color: #2a2118; text-align: left; }
.wr-rows { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 5px; }
.wr-rows li { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px 8px; border: 1px solid #b89a5a; border-radius: 8px; background: #fff6; color: #2a2118; text-align: left; }
.wr-rows li > b { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-rows li > b small { display: block; font-size: 11px; font-weight: 400; color: #7a6a52; }
.wr-rows li > i { flex: none; width: 5.6em; font-style: normal; font-size: 11px; font-weight: 400; color: #7a6a52; text-align: right; white-space: nowrap; }
.wr-seg { flex: none; display: flex; border: 1.5px solid #b89a5a; border-radius: 8px; overflow: hidden; }
#app .wr-seg button { min-width: 0; padding: 5px 10px; border: 0; border-radius: 0; background: #fff8; color: #5a4a3a; font-size: 13px; font-weight: 400; white-space: nowrap; box-shadow: none; }
#app .wr-seg button + button { border-left: 1px solid #b89a5a; }
#app .wr-seg button.on { background: #1d5d67; color: #fff; font-weight: 700; }
#app .wr-seg button.on.gong { background: var(--red); }
#app .wr-seg button.on.bu { background: #7a6a52; }
.wr-says { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 5px; }
#app .wr-says button { display: block; width: 100%; padding: 8px 12px; border: 1.5px solid #b89a5a; background: #fff8; color: #2a2118; font-size: 15px; text-align: left; box-shadow: none; }
#app .wr-says button.on { border-color: var(--red); background: #fdecea; box-shadow: inset 0 0 0 1px var(--red); }
#app .wr-says button.off { border-style: dashed; color: #7a6a52; }
.wr-says i, .wr-dg.o i { font-style: normal; padding: 0 4px; border-bottom: 1.5px dashed currentColor; color: #7a6a52; }
.wr-oh { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 2px 0 6px; }
#app .wr-oh button { padding: 3px 12px; border: 1px solid #b89a5a; border-radius: 14px; background: #fff8; color: #5a4a3a; font-size: 13px; font-weight: 400; box-shadow: none; }
#app .wr-oh button.on { border-color: var(--red); background: var(--red); color: #fff; }
/* 图解：布防三档各分到多少人（大的点是强的）、令旗六座里两座主攻、盟主令那几句 */
.wr-dg { margin: 2px 0 8px; }
.wr-dg.g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: end; }
.wr-dg.g > div { display: grid; justify-items: center; gap: 4px; padding: 6px 4px; border: 1.5px solid #b89a5a; border-radius: 8px; background: #fff6; }
.wr-dg.g > div:first-child { border-color: var(--red); background: #fdecea; }
.wr-dg.g b { font-size: 15px; color: #2a2118; }
.wr-dg.g span { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; max-width: 76px; min-height: 40px; }
.wr-dg.g u { width: 9px; height: 9px; border-radius: 50%; background: #9a8a6a; }
.wr-dg.g u.s { width: 14px; height: 14px; background: #b8321c; }
.wr-dg.g small { font-size: 11px; font-weight: 400; color: #7a6a52; }
.wr-dg.f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.wr-dg.f > div { display: grid; justify-items: center; gap: 2px; min-height: 44px; align-content: center; padding: 4px 2px; border: 1.5px solid #b89a5a; border-radius: 8px; background: #fff6; }
.wr-dg.f > div.on { border-color: var(--red); background: #fdecea; }
.wr-dg.f b { max-width: 100%; font-size: 13px; color: #2a2118; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-dg.f .wr-fl { margin: 0; }
.wr-dg.o { list-style: none; padding: 0; display: grid; gap: 4px; }
.wr-dg.o li { padding: 5px 12px; border: 1px solid #b89a5a; border-radius: 8px; background: #fff6; font-size: 14px; color: #2a2118; text-align: left; }

/* ── 结算的结果、规则里的表 ── */
#app .dlg.wrr, #app .dlg.wrp { width: min(420px, 100%); }
#app .dlg.wru { width: min(460px, 100%); }
#app.wide .dlg.wru { width: min(600px, 100%); }
.wr-tb { width: 100%; margin: 4px 0; border-collapse: collapse; font-size: 13px; color: #2a2118; }
.wr-tb th, .wr-tb td { padding: 3px 6px; border: 1px solid #b89a5a; text-align: center; font-weight: 400; }
.wr-tb th { background: #2a211812; font-size: 12px; color: #5a4a3a; white-space: nowrap; }
.wr-tb td:first-child, .wr-tb th:first-child { text-align: left; }
.wr-tb td.w { font-weight: 700; color: var(--red); background: #f6d98a55; }
.wr-tb.l td { text-align: left; line-height: 1.45; }
.wr-tb.l td:first-child { width: 42%; }
.wr-vs2 { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 6px; }
.wr-vs2 b { font-size: 20px; color: var(--red); }
.wr-got { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.wr-got li { display: flex; align-items: baseline; gap: 8px; padding: 5px 10px; border: 1px solid #b89a5a; border-radius: 8px; background: #fff6; font-size: 13px; color: #2a2118; text-align: left; }
.wr-got b { flex: none; min-width: 4.2em; color: var(--red); }
.wr-got span { flex: 1; min-width: 0; font-weight: 400; line-height: 1.5; }

/* ── 盟铺 ── */
#app .dlg.wrs { width: min(420px, 100%); }
#app.wide .dlg.wrs { width: min(600px, 100%); }
.wr-jg { flex: none; display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 38px 2px; }
.wr-jg i { font-style: normal; font-size: 12px; font-weight: 400; color: var(--dim); }
.wr-jg b { font-size: 22px; color: var(--red); font-variant-numeric: tabular-nums; }
.wr-shop { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; }
#app.wide .wr-shop { grid-template-columns: 1fr 1fr; }
.wr-shop li { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 5px 10px; border: 1.5px solid #b89a5a; border-radius: 10px; background: #fffaf0; color: #2a2118; text-align: left; }
.wr-shop li.ok { border-color: var(--gold); background: linear-gradient(#fff3d2, #f3dca0); }
.wr-shop img { flex: none; width: 38px; height: 38px; object-fit: contain; }
.wr-shop li > div { flex: 1; min-width: 0; }
.wr-shop b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-shop span { display: block; font-size: 12px; font-weight: 400; color: #5a4a3a; white-space: nowrap; }
.wr-shop em { flex: none; font-style: normal; font-size: 12px; font-weight: 400; color: #7a6a52; white-space: nowrap; }
.wr-shop em.lack { color: #a8320f; }
#app .wr-shop .mini { flex: none; padding: 4px 18px; background: var(--red); color: #fff; }

/* ── 擂台结算层里盟斗那几行 ── */
.wr-set { margin: 8px 0 0; }
.dlg .wr-st { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; width: auto; margin: 3px 0 0; font-size: 15px; color: #2a2118; text-align: center; }
.wr-st b { color: var(--red); }
.wr-st i { font-style: normal; font-size: 12px; font-weight: 400; color: #7a6a52; }
.wr-st.up .mg-f { animation: mg-up .9s ease-out both; }
.dlg .wr-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; width: auto; margin: 6px 0 2px; }
.wr-chips span { padding: 1px 10px; border: 1px solid #b89a5a; border-radius: 11px; background: #fff8; font-size: 13px; color: #2a2118; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .wr-st.up .mg-f { animation: none; } }

/* 窄的手机：牌子里的字、对手那一行收一点 */
@media (max-width: 380px) {
  .wr-top b { font-size: 16px; }
  .wr-hn b { font-size: 15px; }
  .wr-me b { font-size: 15px; }
  .wr-foe em { display: none; }
  #app .wr-go { padding: 0 10px; }
  #app .wr-seg button { padding: 5px 7px; }
  .wr-rows li > i { width: auto; }
}
@media (max-width: 440px) {
  #app .wr-foe { grid-template-columns: 40px minmax(0, 1fr); }
  .wr-foe img { width: 40px; height: 40px; }
  .wr-foe em { display: none; }
  .wr-pt { min-width: 46px; padding: 2px 4px; }
}
/* 手机横屏：屏幕矮，顶上那几行收紧，把地方让给六张牌子；六座馆三列 */
@media (orientation: landscape) and (max-height: 520px) {
  .dlg .wr-sub { display: none; }
  .wr-top .mg-f.big { font-size: 20px; }
  .wr-top b, .wr-top em { font-size: 16px; }
  .wr-bar { padding: 5px 10px; }
  .dlg .wr-bar-h { margin-bottom: 2px; }
  .wr-bar-t span { font-size: 15px; }
  .wr-halls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #app .wr-hall { padding: 5px 7px 4px; gap: 2px; }
  .wr-h { margin-top: 8px; }
  .wr-face { display: none; }
  .wr-vs { margin: 2px 0 6px; }
  .wr-dg.g span { min-height: 30px; }
  .wr-jg b { font-size: 18px; }
  .wr-shop { grid-template-columns: 1fr 1fr; }
}

/* 《炸翻天斗地主》牌桌上说的话：气泡层、「说话」键、十句面板（web/chat.ts）。单放一个文件，打包时并进 style.css 后面。
   气泡层（#chat）和面板层（#chat-pan）挂在 body 上、不在 #app 里；配色照 style.css 的那几个变量（深青底、描金边、米黄纸）。
   两层跟 #app 用同一个放大倍数（chat.ts 写在 zoom 上），所以这里的尺寸和牌桌上的字是一个比例。
   层级：压在牌桌上面（顶栏 5、导航 8），让着弹层（.mask 20）、提示（30）、播报（34）、「获得」层（35）。 */
#chat { position: fixed; inset: 0; z-index: 12; overflow: hidden; pointer-events: none; }
#chat .ck-probe { position: absolute; left: 0; top: 0; width: 100px; height: 0; visibility: hidden; }

/* ── 气泡：米黄纸、描金边，一行放完；尾巴是一个转了 45 度的小方块，指着头像正中（--tx、--ty 由 chat.ts 写） ── */
#chat .cb { position: absolute; left: 0; top: 0; padding: 4px 12px 5px; border: 1.5px solid var(--gold); border-radius: 13px; background: var(--paper); color: #2a2118; font-size: 14px; font-weight: 400; line-height: 1.4; white-space: nowrap; box-shadow: 0 3px 8px #0009; transform-origin: var(--tx, 50%) 100%; animation: ck-in .18s cubic-bezier(.2, .9, .3, 1.3) both; }
#chat .cb::after { content: ""; position: absolute; left: calc(var(--tx, 50%) - 5px); bottom: -6px; width: 9px; height: 9px; background: inherit; border: solid var(--gold); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
/* 放在头像下方：尾巴朝上 */
#chat .cb.dn { transform-origin: var(--tx, 50%) 0; }
#chat .cb.dn::after { bottom: auto; top: -6px; border-width: 1.5px 0 0 1.5px; }
/* 放在头像右边（rt）、左边（lf）：尾巴朝着头像 */
#chat .cb.rt { transform-origin: 0 var(--ty, 50%); } #chat .cb.lf { transform-origin: 100% var(--ty, 50%); }
#chat .cb.rt::after { left: -6px; bottom: auto; top: calc(var(--ty, 50%) - 5px); border-width: 0 0 1.5px 1.5px; }
#chat .cb.lf::after { left: auto; right: -6px; bottom: auto; top: calc(var(--ty, 50%) - 5px); border-width: 1.5px 1.5px 0 0; }
/* 玩家自己的那一条：金底，和牌友的分得开 */
#chat .cb.s0 { background: #ffe9a8; border-color: #b8860b; }
#chat .cb.s0::after { border-color: #b8860b; }
#chat .cb.out { animation: ck-out .16s ease-in both; }
@keyframes ck-in { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ck-out { from { opacity: 1; } to { opacity: 0; transform: scale(.9); } }

/* ── 「说话」键：在功能键那一排里（长相跟着 .tk）。歇着的 5 秒键上一块暗色顺时针扫掉；起点由 chat.ts 写在 --ckd 上（负数＝已经走了多久） ── */
@property --cka { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#app .tools .tk.ck { position: relative; overflow: hidden; }
#app .tools .tk.ck.cool { color: #c9d6d0; border-color: #8a969266; cursor: default; }
#app .tools .tk.ck.cool::after { content: ""; position: absolute; inset: 0; background: conic-gradient(transparent var(--cka), #0b222899 0); animation: ck-cd 5s linear var(--ckd, 0s) both; pointer-events: none; }
@keyframes ck-cd { from { --cka: 0deg; } to { --cka: 360deg; } }
/* 这一局说够了：灰着，点了面板里写着原因 */
#app .tools .tk.ck.full { background: #0b222888; color: #8fa39c; border-color: #8a969266; }

/* ── 面板：两列五行，贴着那颗键（位置由 chat.ts 写） ── */
#chat-pan { position: fixed; inset: 0; z-index: 13; display: none; pointer-events: none; }
#chat-pan.on { display: block; }
.ck-pan { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; box-sizing: border-box; width: min(316px, calc(100% - 12px)); padding: 8px; border: 2px solid var(--gold); border-radius: 12px; background: #0b2228f5; box-shadow: 0 6px 18px #000a; pointer-events: auto; animation: ck-pan .14s ease-out both; }
.ck-pan button { min-width: 0; height: 36px; padding: 0 4px; border-width: 1.5px; border-radius: 8px; font-size: 14px; font-weight: 400; line-height: 1; white-space: nowrap; box-shadow: none; }
.ck-pan button:active { background: linear-gradient(#ffd76a, #d9a441); }
.ck-pan button:disabled { opacity: .45; cursor: default; }
.ck-pan p { grid-column: 1 / 3; margin: 2px 0 0; color: var(--gold2); font-size: 13px; font-weight: 400; line-height: 1.4; text-align: center; }
@keyframes ck-pan { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 电脑上屏够高：大一号（和座位旁的小签一起大） */
@media (orientation: landscape) and (min-width: 640px) {
  #chat .cb { font-size: 15px; }
}
@media (orientation: landscape) and (min-width: 640px) and (min-height: 600px) {
  #chat .cb { padding: 5px 14px 6px; border-radius: 15px; font-size: 17px; }
  .ck-pan { width: 372px; gap: 8px; padding: 10px; }
  .ck-pan button { height: 40px; font-size: 16px; }
  .ck-pan p { font-size: 14px; }
}
/* 手机横屏：屏矮，面板的行压低一点 */
@media (max-height: 520px) {
  #chat .cb { padding: 3px 10px 4px; font-size: 13px; }
  .ck-pan { gap: 5px; padding: 6px; }
  .ck-pan button { height: 30px; font-size: 13px; }
}
/* 窄屏：字小一号，两列还放得下 */
@media (max-width: 350px) { .ck-pan button { font-size: 13px; padding: 0 2px; } }

@media (prefers-reduced-motion: reduce) {
  #chat .cb, #chat .cb.out, .ck-pan { animation: none !important; }
  /* 不转圈：歇着的时候整颗键暗着 */
  #app .tools .tk.ck.cool::after { animation: none !important; background: #0b222880; }
}

/* 《炸翻天斗地主》合服的预告横幅（web/merge-card.ts）。单放一个文件，打包时并进 style.css 后面。
   挂在 body 上、不在 #app 里；配色照 style.css 的那几个变量。压在播报那一层（34）下面一格、让着它：播报的横幅最高 54px，这一条从它下面起。
   四种屏幕：手机竖屏铺满一条 480 宽的竖栏；宽屏居中一段；手机横屏（屏高不到 520）细一号。折成两行时整段居左。 */
#mg-pre { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 58px); transform: translateX(-50%); z-index: 33; box-sizing: border-box; width: fit-content; max-width: min(460px, calc(100% - 24px)); padding: 7px 14px; border: 1.5px solid var(--gold); border-radius: 10px; background: linear-gradient(#0b2228f5, #0b2228e0); box-shadow: 0 4px 12px #0009; color: var(--gold2); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: .5px; text-align: left; cursor: pointer; animation: mg-pre-in .26s ease-out both; }
@keyframes mg-pre-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (orientation: landscape) and (min-width: 640px) { #mg-pre { max-width: min(620px, 56%); } }
@media (orientation: landscape) and (min-width: 640px) and (min-height: 600px) { #mg-pre { top: calc(env(safe-area-inset-top, 0px) + 64px); font-size: 16px; padding: 8px 18px; } }
@media (max-height: 520px) { #mg-pre { top: calc(env(safe-area-inset-top, 0px) + 42px); padding: 4px 12px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { #mg-pre { animation: none; } }

/* 《炸翻天斗地主》照版面规矩重排过的页面（2026-10-10 起）。并在 style.css 后面打包（build.mjs）。
   版面规矩（每一页都照这几条做）：
   一、花底上不直接放字和数：内容都放在纸色的卡里；一段的标题用 h2 那一种（红菱形加金字），一页只用这一种。
   二、同一列表里每一行、每一格一样高：字放不下就截成一行（省略号），不靠折行把某一行撑高。
   三、一行的摆法只有一种：左边图标，中间名字加一句现状，右边一颗键或一个记号；键一样宽。
   四、间距只用 4、6、8、12 这几档：卡里 8 或 12，卡和卡之间 6 或 8，段和段之间 12。
   五、状态用同一套：能领＝红键带红点；做完、领过＝绿色打勾、整体淡一档；没开＝图标灰掉、写怎么开。
   六、类名带上这一页的前缀（tk-、pl-、me-），不用 got、buy、can 这种光秃秃的词（会和别处的老样式撞名）。 */

/* ── 任务页（原「日常」）：左栏任务卡，右栏今天能领的、今天还能打的 ── */
.tkc { --ink: #2a2118; --dim: #7a6a52; margin: 0 0 8px; padding: 10px 12px; background: var(--paper); color: #2a2118; border: 2px solid var(--gold); outline: 1px solid #2a211866; outline-offset: -5px; border-radius: 8px; box-shadow: 0 3px 8px #0007; }
.tk-h { display: flex; align-items: center; gap: 10px; }
.tk-h > .ic { flex: none; width: 44px; height: 44px; object-fit: contain; }
.tk-h > div { flex: 1; min-width: 0; text-align: left; }
.tk-h b { font-size: 17px; color: var(--red); }
.tk-h i { margin-left: 8px; font-style: normal; font-size: 12px; font-weight: 400; color: #5a4a3a; }
.tk-h .gf-bar { margin-top: 5px; }
#app .tk-get { position: relative; flex: none; width: 72px; padding: 6px 0; font-size: 15px; text-align: center; }
#app .tk-get.on { background: var(--red); color: #fff; }
#app .tkc.done .tk-get:disabled { background: none; border-color: #7d9a55; color: #4d6a2a; }
#app .tkc.done .tk-get:disabled::before { content: '✓ '; }
.tk-g { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 8px 0 0; font-size: 13px; }
.tk-g > i { font-style: normal; font-weight: 400; color: #7a6a52; }
.tk-g .rchip { font-size: 13px; padding: 0 8px; }
.tkc .tkl { margin: 8px 0 0; gap: 4px; }
.tkc .tkl li { height: 34px; padding: 0 10px; font-size: 14px; }
.tkc .tkl b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkc .tkl li.ok span::before { content: '✓ '; }
.tkc.done { opacity: .85; }

/* 入口那几行（七日目标、供奉、牌谱）：一样高，现状那一句只占一行 */
.dailyp .goods.dll li { min-height: 58px; margin-bottom: 6px; }
.dailyp .goods.dll .dl-l i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dailyp .goods.dll li > button { width: 64px; padding: 4px 0; text-align: center; }
.dailyp h2 { margin: 12px 0 6px; }
.dailyp .dl-top { margin-top: 8px; }

/* 今天还能打的：一处一格，两列（宽了三列） */
.tk-pls { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.tk-pl { --ink: #2a2118; --dim: #7a6a52; height: 58px; background: var(--paper); color: #2a2118; border: 2px solid var(--gold); outline: 1px solid #2a211866; outline-offset: -5px; border-radius: 8px; box-shadow: 0 3px 8px #0007; }
#app .tk-pl > button, .tk-pl.lk { display: flex; align-items: center; gap: 6px; width: 100%; height: 100%; padding: 0 8px; text-align: left; }
#app .tk-pl > button { background: none; border: 0; border-radius: 6px; box-shadow: none; color: inherit; font-size: inherit; }
.tk-pl .ic { flex: none; width: 34px; height: 34px; object-fit: contain; }
.tk-pl span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tk-pl b { font-size: 15px; color: var(--red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-pl i { font-style: normal; font-size: 11.5px; font-weight: 400; color: #5a4a3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-pl u { flex: none; text-decoration: none; font-size: 20px; line-height: 1; color: #b89a5a; }
.tk-pl.done { opacity: .78; } .tk-pl.done u { font-size: 15px; color: #4d6a2a; }
.tk-pl.lk { opacity: .72; } .tk-pl.lk .ic { filter: grayscale(.8); }
/* 电脑：两栏对半分（任务卡一条一行要够宽），右栏的格子还是两列 */
@container (min-width: 960px) { #app .dl-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── 角色页的「行头」页签：立绘和八个部位一块，下面（电脑在右边）三张板：属性、战绩、称号 ── */
/* 板：深色的衬底加金边，里面的小格还是纸色。花底上不直接放字 */
.me-card { margin: 0 0 8px; padding: 10px 12px; border: 1.5px solid #d9b56a99; border-radius: 10px; background: #0b2228cc; }
.me-card > .sec:first-child { margin: 0 0 8px; }
.me-card .mebox { margin: 0; gap: 6px; }
.me-card .mebox + .mebox { margin-top: 6px; }
.me-card .mebox div { display: grid; align-content: center; height: 54px; padding: 0 4px; }
.me-card .mebox i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-card .gearbar { margin: 8px 0 0; }
.me-card .tt-n { margin: 0 0 8px; }
.me-card .tt-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.me-tip { margin: 0 0 8px; font-size: 12px; font-weight: 400; color: var(--dim); text-align: center; }
.mepage .doll { margin-bottom: 6px; }
/* 战力在最上面那一条里已经有了，立绘上不再写一遍 */
.mepage .doll-m > span { display: none; }
/* 电脑：左边立绘，右边三张板，一屏看全 */
@media (orientation: landscape) and (min-height: 521px) {
  @container (min-width: 960px) {
    .me-cols { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 14px; align-items: start; }
    #app.wide .me-card .tt-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}
/* 电脑：供奉、牌谱两行各占一整行（并排的话现状那一句放不下） */
@container (min-width: 960px) { #app .dailyp .dl-cols > div:last-child .goods.dll { display: block; } }

/* ── 角色页另外几个页签：牌运、棋品、行囊。说明的字、小牌子都收进板里，不直接摆在花底上 ── */
.me-card .luck { margin-bottom: 0; }
.me-card .lvnote, .me-card .qp-n { width: auto; max-width: none; margin: 8px 0 0; }
.me-card .qp-n + .qp-l { margin-top: 8px; }
.me-card .lklack { margin: 0 0 8px; }
.me-card .lktier { margin: 0; }
/* 牌运那十格进度：一行排完，不折到第二行 */
.mepage .luck .lv { flex-wrap: nowrap; }
.mepage .luck .lv i { flex: 1 1 0; width: auto; min-width: 5px; max-width: 18px; }
.mepage .luck .lv i.gap { margin-left: 4px; }
/* 还没开张的几样：一样高，一句说明只占一行 */
.me-soon { display: grid; gap: 6px; }
.me-soon .luck { height: 60px; padding: 0 12px; }
.me-soon .luck .ic { width: 38px; height: 38px; }
.me-soon .luck > div { min-width: 0; }
.me-soon .luck p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (min-width: 960px) { .me-soon { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 行囊的材料与道具：每一行一样高。用处、来路各最多两行（电脑够宽，各一行） */
.mepage .goods.bag li { height: 112px; margin-bottom: 6px; padding-block: 0; }
.mepage .goods.bag li p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.4; }
.mepage .goods.bag li > button { width: 64px; padding: 4px 0; text-align: center; }
@container (min-width: 960px) {
  .mepage .goods.bag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
  .mepage .goods.bag li { height: 92px; margin: 0; }
}

/* ── 伙伴页 ── */
/* 访贤的三个池子：键排成两列、一样宽一样高（原来长短不一、有的独占一行） */
.pool .btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 10px 0 6px; }
#app .pool .btns > button { width: 100%; min-width: 0; height: 46px; margin: 0; padding: 0 4px; font-size: 16px; white-space: nowrap; }
.pool .price { width: fit-content; }
#app .pool button.chk.plchk { margin: 8px 0 0; }
/* 两块牌子各差多少：手机上一块一格，牌子、怎么拿、几比几在一行，还差几位另起一行；两格一样高 */
@media (max-width: 480px) {
  .mgoals { gap: 6px; }
  .mgoals .mg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; align-items: center; min-height: 50px; padding: 4px 12px 4px 6px; border-radius: 10px; }
  .mgoals .mg i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mgoals .mg em { grid-column: 2 / 4; font-size: 12px; line-height: 1.3; }
}
/* 阵容页上那句说明：垫一块深色的底，不直接压在花底上 */
.vs-tip { padding: 6px 10px; border: 1px solid #d9b56a55; border-radius: 8px; background: #0b2228cc; }

/* ── 角色页最上面那一条 ── */
/* 衣帽间那颗键做显眼：青底金边，和普通的小键分开 */
#app .mehead [data-do="wardOpen"] { padding: 5px 16px; border-color: var(--gold2); background: linear-gradient(#3b9299, #1d5d67); color: #fff; font-size: 15px; letter-spacing: 1px; box-shadow: 0 2px 0 #0006, 0 0 8px #ffd76a66; }
/* 称号：电脑上放到名字右边那片空位里（五个页签都看得到）；手机竖屏名字旁边没有空位，还在「行头」页签下面那张板里 */
.me-tt { display: none; }
@media (orientation: landscape) and (min-height: 521px) {
  @container (min-width: 960px) {
    #app .mehead > .me-tt { display: block; flex: 1.1 1 0; align-self: stretch; max-height: 132px; overflow-y: auto; padding: 8px 12px; border: 1.5px solid #d9b56a99; border-radius: 10px; background: #0b2228cc; scrollbar-width: thin; scrollbar-color: #d9b56a88 transparent; }
    .me-tt > .sec { margin: 0 0 4px; font-size: 14px; }
    .me-tt .tt-n { margin: 0 0 6px; font-size: 12px; line-height: 1.4; }
    #app.wide .me-tt .tt-l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #app .me-tt .tt-it { padding: 3px 8px; }
    .me-tt .tt-it b { font-size: 14px; }
    #app .me-tt .tt-more { margin-top: 6px; font-size: 12px; }
    .me-r > .me-ttc { display: none; }
  }
}

/* ── 弹层 ── */
/* 底栏：主要的那颗键永远在正中；带「？」的，「？」钉在左边，不把主键挤到右边去 */
.dlg .dlg-f { position: relative; }
.dlg .dlg-f .qm { position: absolute; left: 0; top: 50%; margin: 0; transform: translateY(-50%); }
/* 行头详情里强化那一块：缺什么的那一句在纸色的底上用深红字（原来是给深底配的浅粉字，看不清），一句话在左、键在右 */
.dlg .lklack { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: auto; margin: 6px 0; padding: 6px 10px; border-color: #b9392c99; border-radius: 8px; background: #b9392c12; color: #a8321f; font-size: 13px; line-height: 1.4; }
.dlg .lklack .mini { flex: none; margin: 0; }
/* 一键强化：一句说明占一行，下面一行是减、几级、加，一键强化靠右；整块垫一层底，和上面那一块对齐 */
.dlg .fgauto { display: grid; grid-template-columns: 40px auto 40px minmax(0, 1fr); align-items: center; gap: 6px 8px; margin: 6px 0; padding: 8px 10px; border: 1.5px solid #b89a5a; border-radius: 8px; background: #2a21180d; }
.dlg .fgauto > span { grid-column: 1 / -1; }
#app .dlg .fgauto > button { height: 34px; margin: 0; padding: 0; }
#app .dlg .fgauto > button.on { justify-self: end; margin: 0; padding: 0 16px; }
.dlg .fgnote { width: auto; margin: 4px 0 6px; line-height: 1.5; }

/* ── 踢馆主界面的选馆条：手机竖屏当前这座馆靠左摆（main.ts 里滚的），末尾留一截空，最后几座也滚得到左边 ── */
#app:not(.wide) .hstrip::after { content: ""; flex: none; width: 64%; }

/* ── 一段的标题：各页一个样子。字放大，后面拖一道淡下去的金线 ── */
#app .page h2 { gap: 10px; margin: 14px 0 8px; font-size: 19px; letter-spacing: 3px; }
#app .page h2::before { flex: none; width: 10px; height: 10px; }
#app .page h2::after { content: ""; flex: 1; min-width: 20px; height: 2px; background: linear-gradient(90deg, #d9b56acc, #d9b56a00); }
/* 江湖页的「闯」「比」「每日」：做成一枚朱红的印，比一行小字显眼 */
#app .world h2 { position: relative; width: fit-content; min-width: 38px; height: 38px; margin: 16px 0 8px 2px; padding: 0 7px 0 9px; justify-content: center; border: 2px solid #ffd76a; border-radius: 7px; background: linear-gradient(135deg, #d8401f, #a82a14); color: #fff3c9; font-size: 23px; letter-spacing: 2px; box-shadow: 0 2px 0 #0007, inset 0 0 0 1.5px #2a211855; transform: rotate(-3deg); }
#app .world h2::before { display: none; }
#app .world h2::after { position: absolute; left: calc(100% + 12px); top: 50%; flex: none; width: 180px; transform: rotate(3deg); transform-origin: 0 50%; }

/* ── 伙伴按级别分段排（图鉴、还没上阵的）：段头是这一级颜色的一块小牌子、几位，后面一道同色的线 ── */
.rar-h { --rc: #8b8f8a; display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font-size: 14px; font-weight: 400; }
.rar-h:first-of-type { margin-top: 8px; }
.rar-h.rL { --rc: #d9a93a; } .rar-h.rE { --rc: #9a6bd0; } .rar-h.rR { --rc: #4f8fce; } .rar-h.rN { --rc: #9aa39e; }
.rar-h b { flex: none; padding: 1px 14px; border: 1.5px solid var(--rc); border-radius: 6px; background: #0b2228cc; color: var(--rc); font-size: 16px; letter-spacing: 3px; text-indent: 3px; }
.rar-h i { flex: none; font-style: normal; color: var(--dim); font-size: 13px; }
.rar-h::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--rc), transparent); opacity: .7; }

/* ── 伙伴卡四个级别拉开差距（第一步：只用样式；正式的卡框图另出）──
   普通：素纸、灰边；稀有：蓝色双线边、淡蓝的纸；史诗：紫色厚边加一圈金线、紫调的纸、四角小角花；传说：金色厚边、流光、名字做金字、暗金的底。
   没请到的卡保留这一级的边和底色，只把人压暗（原来统一刷成灰，级别看不出来）。 */
.rL { --rc: #d9a93a; --rc2: #fff0b0; --rbg: linear-gradient(160deg, #4a3410, #2a1c08); --rink: #ffe9a8; }
.rE { --rc: #8a55c8; --rc2: #e2c8ff; --rbg: linear-gradient(160deg, #ead9f7, #d9c2ee); --rink: #3d1f66; }
.rR { --rc: #3b7fc4; --rc2: #cfe4f7; --rbg: linear-gradient(160deg, #e6f0f7, #d2e2ee); --rink: #173a5e; }
.rN { --rc: #8b8f8a; --rc2: #e6e2d6; --rbg: #efe6cf; --rink: #2a2118; }
/* 图鉴、阵容里的小卡 */
#app .wt { border-width: 2px; background: var(--rbg); color: var(--rink); }
#app .wt.rR { box-shadow: 0 0 0 1px var(--rc2), 0 0 0 2.5px var(--rc), 0 2px 6px #0007; }
#app .wt.rE { border-width: 3px; box-shadow: inset 0 0 0 1.5px #f6d98a, 0 0 0 1.5px #f6d98a, 0 0 10px #a56be877, 0 2px 6px #0007; }
#app .wt.rL { border-width: 3px; border-color: #f6d98a; box-shadow: inset 0 0 0 1.5px #a8741a, 0 0 0 2px #a8741a, 0 0 0 3.5px #f6d98a, 0 0 16px #ffd76acc, 0 2px 6px #0007; }
#app .wt.rL b { background: linear-gradient(#fff6c8, #f0b93a); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 2px; filter: drop-shadow(0 1px 0 #0009); }
#app .wt.rL i, #app .wt.rE i { color: inherit; opacity: .85; }
/* 稀有、史诗、传说：画出来的卡框盖在卡面上（图在 img/ui/frame-R／E／L.webp，出图与切图见 scripts/seedream/*70*、cut-zhafantian-card-frames.mjs）。小卡、座位上的卡面、伙伴大卡、访贤揭示的那张都用同一只 */
.wt.rR .wt-a, .wt.rE .wt-a, .wt.rL .wt-a, .vseat.rR .vs-a, .vseat.rE .vs-a, .vseat.rL .vs-a { position: relative; }
.wt.rR .wt-a::before, .vseat.rR .vs-a::before, .bcard.rR::before { background-image: url(/zhafantian/img/ui/frame-R.webp); }
.wt.rE .wt-a::before, .vseat.rE .vs-a::before, .bcard.rE::before { background-image: url(/zhafantian/img/ui/frame-E.webp); }
.wt.rL .wt-a::before, .vseat.rL .vs-a::before, .bcard.rL::before { background-image: url(/zhafantian/img/ui/frame-L.webp); }
.wt.rR .wt-a::before, .wt.rE .wt-a::before, .wt.rL .wt-a::before, .vseat.rR .vs-a::before, .vseat.rE .vs-a::before, .vseat.rL .vs-a::before, .bcard.rR::before, .bcard.rE::before, .bcard.rL::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-size: 100% 100%; background-repeat: no-repeat; }
.wt .wt-a::before, .vseat .vs-a::before { z-index: 1; }
/* 有了卡框，人像往里收一点，脸不被框压住 */
.wt.rE .wt-a img, .vseat.rE .vs-a img { object-position: 50% 8%; }
.wt.rL .wt-a img, .vseat.rL .vs-a img { object-position: 50% 0; transform: scale(.86); transform-origin: 50% 46%; }
.wt.rL .wt-a, .vseat.rL .vs-a { background: #3a2608; }
/* 传说：一道斜着扫过去的流光 */
.wt.rL .wt-a::after, .bcard.rL::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 40%, #fff8 50%, transparent 60%) -150% 0 / 250% 100% no-repeat; animation: rar-sweep 3.6s ease-in-out infinite; }
@keyframes rar-sweep { 0%, 55% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@media (prefers-reduced-motion: reduce) { .wt.rL .wt-a::after, .bcard.rL::after { animation: none; display: none; } }
/* 没请到的：边和底照级别来，只压暗人像 */
#app .wt.st-lock.rL, #app .wt.st-lock.rE, #app .wt.st-lock.rR, #app .wt.st-lock.rN { border-color: var(--rc); background: var(--rbg); color: var(--rink); }
#app .wt.st-lock.rL { border-color: #f6d98a; }
#app .wt.st-lock .wt-a img { filter: grayscale(.85) brightness(.55); }
#app .wt.st-lock b { color: inherit; } #app .wt.st-lock i { color: inherit; opacity: .7; }
#app .wt.st-lock .wt-a::after { display: none; }
/* 访贤池子里的小头像、阵容座位上的卡面、伙伴大卡：边跟着加厚加光 */
.cd-a.rE { box-shadow: 0 0 0 1px #f6d98a, 0 0 6px #a56be877; } .cd-a.rL { border-color: #f6d98a; box-shadow: 0 0 0 1.5px #a8741a, 0 0 8px #ffd76acc; }
.vseat.rE .vs-a { border-width: 3px; box-shadow: 0 0 0 1.5px #f6d98a, 0 0 8px #a56be877; }
.vseat.rL .vs-a { border-width: 3px; border-color: #f6d98a; box-shadow: 0 0 0 2px #a8741a, 0 0 12px #ffd76acc; }
.vseat.rR .vs-a { box-shadow: 0 0 0 1px var(--rc2), 0 0 0 2.5px var(--rc); }
.bcard.rR { box-shadow: 0 0 0 2px #cfe4f7, 0 0 0 4px var(--rc), 0 10px 30px #000a; }
.bcard.rE { border-width: 5px; box-shadow: inset 0 0 0 2px #f6d98a, 0 0 0 2px #f6d98a, 0 0 0 4px var(--rc), 0 0 22px #a56be8aa, 0 10px 30px #000a; }
.bcard.rL { border-width: 6px; border-color: #f6d98a; box-shadow: inset 0 0 0 2px #a8741a, 0 0 0 2px #a8741a, 0 0 0 5px #f6d98a, 0 0 30px #ffd76acc, 0 10px 30px #000a; }

/* ── 江湖下面各处的大堂 ── */
/* 茶馆的桌子：三张一样高，两句说明各只占一行 */
.teahall .stages.tables li { height: 150px; }
.teahall .stages.tables li > div { min-width: 0; }
.teahall .stages.tables li > div > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.45; }
.teahall .stages.tables li > div > .tb-opp { -webkit-line-clamp: 3; line-clamp: 3; }
@media (min-width: 640px) { .teahall .stages.tables li { height: 104px; } }
.teahall .stages.tables .tb-opp { width: auto; }
/* 并排两列时一张桌至少 440 宽，不够就一列（宽屏手机横屏两列会把桌名挤成两行、顶出卡外）；桌名只占一行 */
.teahall .stages.tables { grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); }
.teahall .stages.tables b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 登楼、奇遇：三个数的小格平分一行；下面那一排键一样高；说明的字垫一块深色的底 */
.twhall .mebox { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 8px 0; }
.twhall .mebox div { display: grid; align-content: center; height: 62px; padding: 0 4px; }
.twhall .btns.ctr { gap: 8px; }
#app .twhall .btns.ctr > button { height: 46px; padding-block: 0; }
.twhall .tw-give, .twhall > h4 { margin: 8px 0; padding: 6px 10px; border: 1px solid #d9b56a55; border-radius: 8px; background: #0b2228cc; font-size: 13px; line-height: 1.5; }
/* 擂台挑对手：每一行一样高，名次牌力那一句只占一行 */
#app .arfoe { height: 76px; }
#app .arfoe > * { min-width: 0; }
#app .arfoe b, #app .arfoe i, #app .arfoe span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 阵容页的座位：替手、座上客、空位顶上那一句说明都只占一行，卡面排在同一条线上 ── */
.vseat .vs-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app .vseat.st-empty .vs-n, #app .vseat.st-lock .vs-n { color: var(--dim); }

/* ── 页签：没选中的垫实底（原来半透明，花底透上来字看不清），选中的纸底红字、高出一截 ── */
#app .subtabs button:not(.qm) { background: linear-gradient(#123a42, #0b2a31); color: #f3e6c4; border-color: #d9b56a; text-shadow: 0 1px 0 #000a; }
#app .subtabs button.on:not(.qm) { padding-top: 8px; background: linear-gradient(#fff6dc, var(--paper)); color: var(--red); text-shadow: none; box-shadow: 0 -2px 8px #ffd76a77; }

/* ── 名号：顶栏、账号页里玩家自己的名字用金字，和后面的级别、说明分开 ── */
.top .who .nm .nm-n { color: var(--gold2); font-weight: 700; }
.me-nick { display: block; margin-bottom: 2px; color: var(--red); font-size: 19px; letter-spacing: 1px; }
/* 牌桌上自己这一边：名号写在气条底下那一排的头一个 */
.mb-nm { flex: none; max-width: 8em; color: var(--gold2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000a; }
/* 页签上的小图标：宽屏才出（竖屏一排五个页签放不下） */
.subtabs button .ic { display: none; }
#app.wide .subtabs button:not(.qm) { display: inline-flex; align-items: center; gap: 6px; }
#app.wide .subtabs button .ic { display: block; flex: none; width: 24px; height: 24px; object-fit: contain; }
/* 衣帽间那颗键带一只衣架 */
#app [data-do="wardOpen"] .ic { width: 20px; height: 20px; margin-right: 4px; object-fit: contain; vertical-align: -4px; }
/* 盟主和护法那三张卡：头像上下留出头像框伸出来的那一圈（戴框的不压住下面的职位），戴不戴框三张卡一样高 */
.mg-chief li > img, .mg-chief li > .bfr { margin-block: 8px 10px; }
#app.wide .subtabs button:not(.on) .ic { filter: drop-shadow(0 0 1.5px #ffe9a8) drop-shadow(0 0 1px #ffe9a8); }

/* ── 电脑端的导航：固定在底下一条（2026-10-10 站长定，原来是右边一竖栏）。和手机竖屏一个摆法：任务、江湖｜踢馆大圆键｜伙伴、角色。
   手机横屏屏高不够，还是右边那一竖栏（上面 max-height: 520px 那几条照旧管它）。 ── */
@media (min-height: 521px) {
  #app.wide { grid-template: auto minmax(0, 1fr) 66px / minmax(0, 1fr); }
  #app.wide .col { grid-column: 1; grid-row: 2; padding-bottom: 34px; }
  #app.wide .colmore { grid-column: 1; grid-row: 2; justify-self: end; margin: 0 28px 6px 0; }
  #app.wide .nav.rail { grid-column: 1; grid-row: 3; z-index: 6; flex-direction: row; justify-content: center; align-items: center; gap: 56px; height: 66px; padding: 0; border-left: 0; border-top: 2px solid var(--gold); background: var(--deep); overflow: visible; }
  #app.wide .nav.rail .tab { width: 96px; padding: 3px 0 2px; font-size: 14px; }
  #app.wide .nav.rail .tab .tic { width: 52px; height: 38px; margin-bottom: 0; }
  #app.wide .nav.rail .tab .tic .ic { max-width: 46px; max-height: 36px; }
  #app.wide .nav.rail .tab:nth-child(1) { order: 1; } #app.wide .nav.rail .tab:nth-child(3) { order: 2; }
  #app.wide .nav.rail .tab:nth-child(2) { order: 3; } #app.wide .nav.rail .tab:nth-child(4) { order: 4; } #app.wide .nav.rail .tab:nth-child(5) { order: 5; }
  /* 踢馆：大圆键，高出底栏一截 */
  #app.wide .nav.rail .tab[data-go="home"] { align-self: flex-end; display: grid; place-items: center; width: 98px; height: 98px; margin: 0 4px 6px; padding: 0; border: 4px solid var(--gold); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2f7f86, #124a55 70%); box-shadow: 0 0 0 3px var(--deep), 0 4px 10px #000a; color: #ffe9a8; font-size: 27px; letter-spacing: 2px; text-shadow: 0 2px 0 #0008; }
  #app.wide .nav.rail .tab[data-go="home"] .tic { display: none; }
  #app.wide .nav.rail .tab[data-go="home"].on { background: radial-gradient(circle at 35% 30%, #3b9aa2, #17606c 70%); box-shadow: 0 0 0 3px var(--deep), 0 0 16px #ffd76acc, 0 4px 10px #000a; color: #fff; }
  #app.wide .nav.rail .tab[data-go="home"] .dot { right: 8px; top: 6px; }
}

/* ── 设置弹层：每一行一样高、一样的间距；音量的滑杆收进这一行里（名字、滑杆、开关），不再单独悬在两行中间；
   两栏从同一条线起；掌柜卡那几句说明放在所有开关的后面 ── */
#app .sndp .setg > div { display: flex; flex-direction: column; gap: 6px; }
#app .sndp .sndrow { display: flex; flex-direction: column; gap: 6px; margin: 0; }
#app .sndp .bset { gap: 6px; margin: 0; }
#app .sndp .sndrow > button, #app .sndp .st-vol, #app .sndp .bset .bset-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; box-sizing: border-box; width: 100%; height: 48px; margin: 0; padding: 0 12px; border: 2px solid var(--gold); border-radius: 8px; background: #fff8; color: #2a2118; font-size: 16px; box-shadow: 0 2px 0 #0003; }
#app .sndp .sndrow b, #app .sndp .bset-r > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app .sndp .st-vol > b { flex: none; width: 4.6em; text-align: left; }
#app .sndp .st-vol .vol { flex: 1; min-width: 0; margin: 0; }
#app .sndp .st-swb { flex: none; padding: 0; border: 0; background: none; box-shadow: none; line-height: 0; }
#app .sndp .st-vol.on .sw { background: var(--red); border-color: var(--red); } #app .sndp .st-vol.on .sw::after { transform: translateX(22px); }
/* 开关一个样子（掌柜卡那一块原来另有一套灰的） */
#app .sndp .bset .sw { border: 1.5px solid #b89a5a; background: #2a211833; } #app .sndp .bset .sw::after { background: #fff6dc; border: 1px solid #b89a5a; }
#app .sndp .bset .bset-r.on > .sw { border-color: var(--red); background: var(--red); }
#app .sndp .bset-n { margin: 0; padding: 0 2px; border: 0; font-size: 12px; line-height: 1.5; color: #7a6a52; text-align: left; }
#app .sndp .setx { margin: 6px 0 0; gap: 8px; }
#app .sndp .setx button { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 4px; white-space: nowrap; }
@media (min-width: 600px) { .wide .setg { gap: 0 14px; } }
#app:not(.wide) .sndp .setg > div + div { margin-top: 6px; }
#app .sndp .bset { padding: 0; border: 0; }
#app .sndp .setx { display: flex; flex-wrap: nowrap; width: 100%; box-sizing: border-box; }
#app .sndp .setx button { font-size: 15px; letter-spacing: 0; }

/* ── 信箱（web/mail.ts）：一行一封，行高一样；左图标、中间标题加一句现状、右边一颗键。间距只用 4、6、8、12 ── */
#app .dlg.ml-d { width: min(460px, 100%); }
.ml-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ml-row { display: flex; align-items: center; gap: 8px; height: 56px; box-sizing: border-box; padding: 0 8px; border-radius: 8px; background: #5a4a3a12; box-shadow: inset 0 0 0 1px #5a4a3a1f; }
.ml-row.ml-new { background: #b9392c12; box-shadow: inset 0 0 0 1px #b9392c40; }
.ml-row.ml-done { opacity: .62; }
#app .ml-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ml-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; font-size: 16px; color: #fff; background: #7a6a52; }
.ml-ic.ml-box { background: var(--red); }
.ml-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ml-tx b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-tx i { font-style: normal; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app .ml-get { flex: none; width: 64px; box-sizing: border-box; text-align: center; }
.ml-ok { display: inline-block; font-size: 13px; color: #2f7d4f; }
.ml-ok::before { content: '✓ '; }
#app .dlg .ml-none { margin: 12px auto; color: var(--dim); }
/* 点开的一封 */
#app .dlg .ml-when { margin: 0 auto 8px; font-size: 12px; color: var(--dim); }
.ml-body { padding: 8px 12px; border-radius: 8px; background: #5a4a3a12; font-size: 14px; line-height: 1.7; word-break: break-word; }
.ml-gift { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: #5a4a3a12; box-shadow: inset 0 0 0 1px #5a4a3a1f; }
.ml-gift > b { display: block; font-size: 13px; color: var(--red); }
.ml-gift.ml-done { opacity: .62; }
#app .dlg .ml-gift p { margin: 4px 0 0; width: auto; font-size: 12px; color: var(--dim); }
.ml-ts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ml-t { position: relative; flex: none; width: 48px; height: 48px; border-radius: 7px; background: #5a4a3a14; box-shadow: inset 0 0 0 1px #5a4a3a1f; }
.ml-t.ml-w { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--red); }
.ml-t img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }
.ml-t i { position: absolute; right: -1px; bottom: -1px; min-width: 18px; padding: 0 3px; border-radius: 7px 0 7px 0; background: #2a2118d9; color: #fff; font-style: normal; font-size: 11px; line-height: 16px; text-align: center; }
/* 一行里点开信的那一块不要按键的底和影子；能领的键是红的（版面规矩：能领是红键带红点） */
#app .ml-row .ml-main { box-shadow: none; border-radius: 0; text-shadow: none; transform: none; }
#app .ml-row .ml-get.on { background: var(--red); border-color: #0000; color: #fff; }

/* 游戏内反馈的弹层（web/fb.ts；2026-10-11）。并在 style.css 后面打包（build.mjs）。
   照版面规矩：内容放在卡里（.fb-card）；列表一行一样高（56）；左图标、中间一句话加现状、右边一个一样宽的记号；间距只用 4、6、8、12。
   弹层挂在 body 上（#fbl），不在 #app 里，所以这里的选择器都从 #fbl 起。 */
#fbl { display: none; }
#fbl.on { display: block; position: relative; z-index: 39; }
#fbl .mask { z-index: 39; }
#fbl .fbd { width: min(460px, 100%); }
#fbl .fbd .dlg-b p { font-weight: 400; }

/* 两个页签：提反馈、我的反馈 */
#fbl .fb-tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
#fbl .fb-tabs button { height: 34px; padding: 0; font-size: 15px; background: #fff8; color: #2a2118; }
#fbl .fb-tabs button.on { background: linear-gradient(#3b9299, #1d5d67); color: #fff; }

/* 卡：纸色弹层里再衬一层 */
#fbl .fb-card { margin: 0 0 8px; padding: 8px 12px 12px; border-radius: 8px; background: #5a4a3a12; box-shadow: inset 0 0 0 1px #5a4a3a1f; }
#fbl .fb-h { display: block; margin: 12px 0 6px; font-size: 14px; line-height: 1.4; color: var(--red); text-align: left; }
#fbl .fb-card > .fb-h:first-child { margin-top: 0; }
#fbl .fb-h i { margin-left: 8px; font-style: normal; font-size: 12px; font-weight: 400; color: #7a6a52; }

/* 有奖反馈：三档一样大的小格 */
#fbl .fb-prize ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#fbl .fb-prize li { display: grid; align-content: center; justify-items: center; gap: 4px; height: 52px; padding: 0 4px; border-radius: 8px; background: #fffaf0; box-shadow: inset 0 0 0 1px #b89a5a66; }
#fbl .fb-prize li i { max-width: 100%; font-style: normal; font-size: 12px; line-height: 1.2; color: #5a4a3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fbl .fb-prize li em { display: flex; align-items: center; gap: 4px; font-style: normal; font: 700 17px/1 Georgia, "Times New Roman", serif; color: #7a5a14; }
#fbl .fb-prize li em img { width: 18px; height: 18px; object-fit: contain; }
#fbl .fb-prize p { width: auto; margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #7a6a52; text-align: left; }

/* 类别：一样大的五颗 */
#fbl .fb-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#fbl .fb-chips button { height: 34px; padding: 0 4px; font-size: 14px; background: #fff8; color: #2a2118; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fbl .fb-chips button.on { background: var(--red); border-color: #0000; color: #fff; }

/* 正文 */
#fbl .fb-taw { position: relative; }
#fbl .fb-ta { display: block; width: 100%; box-sizing: border-box; min-height: 104px; padding: 8px 10px 24px; font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.6; color: #2a2118; background: #fffaf0; border: 2px solid #b89a5a; border-radius: 8px; outline: none; resize: none; }
#fbl .fb-ta::placeholder { color: #8a7a62; }
#fbl .fb-ta:focus { border-color: var(--red); box-shadow: 0 0 0 2px #b9392c33; }
#fbl .fb-n { position: absolute; right: 10px; bottom: 6px; font-style: normal; font-size: 12px; color: #8a7a62; pointer-events: none; }

/* 截图：一样大的小托盘，最后一格是「加一张」 */
#fbl .fb-shots { display: flex; gap: 8px; }
#fbl .fb-shot { position: relative; flex: none; width: 64px; height: 64px; box-sizing: border-box; border-radius: 8px; background: #fffaf0; box-shadow: inset 0 0 0 1px #b89a5a; }
#fbl .fb-shot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
#fbl .fb-shot > button { position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; padding: 0; border: 1.5px solid #fff; border-radius: 50%; background: #5a4a3a; box-shadow: none; }
#fbl .fb-shot > button::before, #fbl .fb-shot > button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 1px; background: #fff; transform: rotate(45deg); }
#fbl .fb-shot > button::after { transform: rotate(-45deg); }
#fbl .fb-add { display: grid; align-content: center; justify-items: center; gap: 4px; border: 2px dashed #b89a5a; background: none; box-shadow: none; cursor: pointer; }
#fbl .fb-add b { font-size: 22px; line-height: 1; color: #b89a5a; }
#fbl .fb-add i { font-style: normal; font-size: 11px; line-height: 1; color: #8a7a62; }

#fbl .dlg p.fb-fine { width: auto; margin: 0; font-size: 12px; line-height: 1.5; color: #7a6a52; text-align: left; }
#fbl .fb-fine a { color: #1d5d67; }
#fbl .dlg p.fb-msg { width: auto; min-height: 1.55em; margin: 6px 0 0; font-size: 14px; text-align: center; color: var(--red); }
#fbl .dlg p.fb-msg.good { color: #4d6a2a; }

/* 交完了 */
#fbl .fb-done { display: grid; justify-items: center; gap: 4px; padding: 12px; }
#fbl .fb-tick { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: #4d6a2a; color: #fff; font-size: 24px; line-height: 1; }
#fbl .fb-done b { font-size: 20px; color: var(--red); letter-spacing: 2px; }
#fbl .fb-done p { margin: 0; font-size: 14px; color: #5a4a3a; text-align: center; }

/* 我的反馈：一行一条 */
#fbl .fb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#fbl .fb-row { height: 56px; box-sizing: border-box; border-radius: 8px; background: #5a4a3a12; box-shadow: inset 0 0 0 1px #5a4a3a1f; }
#fbl .fb-row.fb-seen { opacity: .82; }
#fbl .fb-row.fb-ok { opacity: 1; background: #4d6a2a14; box-shadow: inset 0 0 0 1px #4d6a2a40; }
#fbl .fb-main { display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; padding: 0 8px; border: 0; border-radius: 8px; background: none; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transform: none; }
#fbl .fb-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; font-size: 16px; color: #fff; background: #7a6a52; }
#fbl .fb-ic.fb-t-bug { background: var(--red); }
#fbl .fb-ic.fb-t-idea { background: #1d5d67; }
#fbl .fb-ic.fb-t-pay { background: #b9801a; }
#fbl .fb-ic.fb-t-save { background: #5a4a3a; }
#fbl .fb-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#fbl .fb-tx b { font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fbl .fb-tx i { font-style: normal; font-size: 12px; line-height: 1.2; color: #7a6a52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 右边的记号：一样宽 */
#fbl .fb-st { flex: none; width: 78px; height: 22px; box-sizing: border-box; border-radius: 11px; font-size: 12px; line-height: 22px; text-align: center; text-decoration: none; white-space: nowrap; background: #5a4a3a1f; color: #5a4a3a; }
#fbl .fb-st-seen { background: #1d5d6722; color: #1d5d67; }
#fbl .fb-st-ok { background: #4d6a2a26; color: #2f7d4f; }
#fbl .fb-st-ok::before { content: '✓ '; }
#fbl .fb-st-reply { background: #b9392c1c; color: #a8321f; }
#fbl .fb-st-dup { background: none; box-shadow: inset 0 0 0 1px #8a7a6299; color: #7a6a52; }
#fbl .dlg p.fb-none { margin: 12px auto; color: #7a6a52; }

/* 点开一条 */
#fbl .dlg p.fb-when { margin: 0 auto 8px; font-size: 12px; color: #7a6a52; text-align: center; }
#fbl .fb-say { padding: 8px 10px; border-radius: 8px; background: #fffaf0; box-shadow: inset 0 0 0 1px #b89a5a66; font-size: 14px; line-height: 1.7; word-break: break-word; white-space: pre-wrap; text-align: left; }
#fbl .fb-now { display: flex; align-items: center; gap: 8px; min-height: 34px; background: none; }
#fbl .fb-now span { flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; color: #2a2118; text-align: left; }

/* 手机横屏：竖向地方少，标题和页签收紧，奖励那张卡只留三格 */
@media (max-height: 460px) {
  #fbl .fbd { width: min(640px, 100%); padding-top: 10px; }
  #fbl .fbd > h3 { margin: 0 0 4px; font-size: 18px; }
  #fbl .fb-tabs { margin-bottom: 6px; }
  #fbl .fb-tabs button { height: 30px; }
  #fbl .fb-prize { display: flex; align-items: center; gap: 8px; padding: 6px 12px; }
  #fbl .fb-prize > .fb-h { flex: none; margin: 0; }
  #fbl .fb-prize ul { flex: 1; }
  #fbl .fb-prize li { display: flex; justify-content: center; align-items: center; gap: 6px; height: 28px; }
  #fbl .fb-prize li em { font-size: 15px; }
  #fbl .fb-prize p { display: none; }
  #fbl .fb-ta { min-height: 64px; }
  #fbl .fb-chips { display: flex; }
  #fbl .fb-chips button { flex: 1 1 auto; padding: 0 8px; }
  #fbl .dlg .dlg-f { margin-top: 8px; }
}

/* 风头（角色栏的页签，web/ft.ts）。卡和小牌子借任务页那一套（layout.css 的 tkc、tk-h、tk-pls、tk-pl），这里只有它自己多出来的几样。 */
.ft-main { margin: 0 0 8px; }
.ft-lv { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 0; }
.ft-lv i { width: 14px; height: 6px; margin: 0; border: 1px solid #b89a5a; border-radius: 3px; background: #2a21181f; }
.ft-lv i.on { background: var(--red); border-color: var(--red); }
.ft-lv i.ft-shut { opacity: .4; border-style: dashed; }
.ft-say { margin: 8px 0 0; font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left; color: #3a2e22; }
.ft-say b { color: var(--red); }
.ft-say.ft-dim { margin-top: 4px; font-size: 12px; color: #7a6a52; }
.me-card > .ft-say.ft-dim { margin-top: 8px; color: #cdbb93; }
.tk-pl.ft-pk button { cursor: default; }
.tk-pl.ft-off { opacity: .72; } .tk-pl.ft-off .ic { filter: grayscale(.8); }