/* 《朱批》——朱墨宫廷。漆黑、宣纸、朱砂、泥金。 */
:root {
  --ink: #0b0806;
  --ink-2: #15100c;
  --ink-3: #221912;
  --lacquer: #1a0f0b;
  --paper: #efe4cc;
  --paper-2: #e2d2ae;
  --paper-ink: #2a1e15;
  --zhu: #b3261e;
  --zhu-bright: #d7392f;
  --zhu-deep: #7a1712;
  --gold: #c9a14a;
  --gold-bright: #f2cf7a;
  --gold-dim: #7d6532;
  --jade: #6f9a8a;
  --steel: #b8bec4;
  --text: #ece0c6;
  --dim: #a8977f;
  --faint: #6b5d4c;
  --line: rgba(201, 161, 74, 0.28);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.22, 1, .36, 1);
  --f-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-brush: "Ma Shan Zheng", "STKaiti", "KaiTi", serif;
  --f-wild: "Zhi Mang Xing", "Ma Shan Zheng", "STKaiti", cursive;
  --cw: 118px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--ink);
  color: var(--text);
  font: 15px/1.7 var(--f-serif);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
input, textarea, .p-body, .benji-text, .verdict, .ri, .feed, .aud-text, .ch-narr, .finale-text { user-select: text; -webkit-user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: rgba(215, 57, 47, 0.45); color: #fff; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(201, 161, 74, 0.3); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ——层次—— */
#stage { position: fixed; inset: 0; z-index: 1; overflow: hidden; will-change: transform; }
#bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--ink); }
#fx-back { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
#screen { position: absolute; inset: 0; z-index: 2; }
#layer { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#layer > * { pointer-events: auto; }
#fx-front { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }
#flash { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
#vignette { position: fixed; inset: 0; z-index: 31; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }
#grain {
  position: fixed; inset: -50%; z-index: 32; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(4) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
#wipe { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; pointer-events: all; }
#toasts { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: min(560px, calc(100vw - 32px)); }

/* ——背景—— */
.bg-pane { position: absolute; inset: -3%; opacity: 0; transition: opacity 1.1s ease; background-size: cover; background-position: center; }
.bg-pane.in { opacity: 1; }
.bg-pane > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bg-pane.kb { animation: kenburns 46s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.07) translate(-1.2%, -0.8%); } }
.fog { position: absolute; left: -50%; width: 200%; height: 40%; pointer-events: none; opacity: 0.35; background: radial-gradient(ellipse at 30% 50%, rgba(200, 190, 175, 0.18), transparent 60%), radial-gradient(ellipse at 70% 60%, rgba(200, 190, 175, 0.12), transparent 55%); filter: blur(10px); }
.fog.f1 { bottom: 12%; animation: fog 60s linear infinite; }
.fog.f2 { bottom: 0; opacity: 0.25; animation: fog 90s linear infinite reverse; }
@keyframes fog { from { transform: translateX(0); } to { transform: translateX(25%); } }
.proc-desk { background: #120c08; }
.desk-wood {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(224, 122, 44, 0.16), transparent 60%),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0) 0 22px, rgba(0, 0, 0, 0.18) 23px 24px, rgba(0, 0, 0, 0) 25px 61px),
    repeating-linear-gradient(88deg, #2a1810 0 140px, #2f1b12 140px 260px, #26150e 260px 380px),
    #2a1810;
}
.desk-silk { position: absolute; left: 50%; top: 4%; bottom: 0; width: min(900px, 76vw); transform: translateX(-50%); background: linear-gradient(180deg, rgba(201, 161, 74, 0.1), rgba(201, 161, 74, 0.04)); border-left: 2px solid rgba(201, 161, 74, 0.18); border-right: 2px solid rgba(201, 161, 74, 0.18); }
.candle-glow { position: absolute; left: 4%; top: 6%; width: 50vmax; height: 50vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255, 170, 80, 0.16), transparent 60%); animation: candle 3.2s ease-in-out infinite alternate; }
@keyframes candle { 0% { opacity: 0.75; transform: scale(1); } 40% { opacity: 1; transform: scale(1.03); } 70% { opacity: 0.85; } 100% { opacity: 0.95; transform: scale(0.99); } }

/* ——通用：印章、按钮、纸—— */
.seal {
  display: inline-grid; place-items: center; width: 64px; height: 64px; padding: 4px;
  border: 3px solid var(--zhu-bright); border-radius: 6px; color: var(--zhu-bright);
  font: 22px/1 var(--f-brush); writing-mode: vertical-rl; letter-spacing: 2px; white-space: nowrap;
  background: radial-gradient(circle at 30% 30%, rgba(215, 57, 47, 0.12), transparent 70%);
  box-shadow: inset 0 0 0 2px rgba(215, 57, 47, 0.25);
  transform: rotate(-4deg);
}
.seal.big { width: 120px; height: 120px; font-size: 46px; border-width: 5px; }
.seal.pulse { animation: sealPulse 2.2s ease-in-out infinite; }
@keyframes sealPulse { 50% { transform: rotate(-4deg) scale(1.06); box-shadow: inset 0 0 0 2px rgba(215, 57, 47, 0.25), 0 0 40px rgba(215, 57, 47, 0.35); } }

.gbtn {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-height: 42px; padding: 7px 22px; border-radius: 4px;
  border: 1px solid var(--gold-dim); background: linear-gradient(180deg, #2a1d14, #18110c);
  color: var(--text); font: 600 15px/1.25 var(--f-serif); letter-spacing: 0.12em;
  box-shadow: 0 2px 0 #0a0604, inset 0 1px 0 rgba(242, 207, 122, 0.12);
  transition: transform 0.15s var(--spring), box-shadow 0.2s, border-color 0.2s, filter 0.2s;
}
.gbtn small { font-size: 11px; font-weight: 400; letter-spacing: 0.04em; opacity: 0.75; }
.gbtn:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(242, 207, 122, 0.2); }
.gbtn:active:not(:disabled) { transform: translateY(1px); }
.gbtn:disabled { opacity: 0.45; filter: grayscale(0.5); }
.gbtn.red { background: linear-gradient(180deg, #c8352a, #8e1d16); border-color: #e2584c; color: #fff4e6; box-shadow: 0 3px 0 #4e0e0a, inset 0 1px 0 rgba(255, 220, 200, 0.3); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.gbtn.red:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(179, 38, 30, 0.45), inset 0 1px 0 rgba(255, 220, 200, 0.35); }
.gbtn.ghost { background: transparent; border-color: rgba(201, 161, 74, 0.3); box-shadow: none; color: var(--dim); }
.gbtn.dark { background: linear-gradient(180deg, #1b1b1d, #0c0c0d); border-color: #3d3d42; }
.gbtn.small { min-height: 32px; padding: 4px 14px; font-size: 13px; }
.gbtn.big { min-height: 56px; padding: 10px 36px; font-size: 19px; letter-spacing: 0.3em; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; margin-top: 18px; }
.row.center { justify-content: center; margin-top: 16px; }
.note { color: var(--dim); font-size: 12.5px; line-height: 1.6; margin: 8px 0; }
.empty { color: var(--faint); font-size: 13px; padding: 14px 4px; text-align: center; }
.paper-card { background: linear-gradient(180deg, rgba(239, 228, 204, 0.97), rgba(226, 210, 174, 0.97)); color: var(--paper-ink); border-radius: 3px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 0 60px rgba(120, 80, 30, 0.18); }
.box-title { margin: 0 0 14px; font: 30px/1.2 var(--f-brush); color: var(--gold-bright); text-align: center; letter-spacing: 0.2em; }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: blink 0.9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ——提示条—— */
.toast {
  padding: 9px 22px; border-radius: 3px; font-size: 14px; letter-spacing: 0.05em;
  background: linear-gradient(180deg, rgba(36, 25, 17, 0.97), rgba(20, 14, 10, 0.97)); border: 1px solid var(--gold-dim); color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(-16px) scale(0.96); transition: opacity 0.25s, transform 0.35s var(--spring);
}
.toast.in { opacity: 1; transform: none; }
.toast.out { opacity: 0; transform: translateY(-10px); }
.toast.err { border-color: var(--zhu-bright); color: #ffd9d2; }

/* ——宫门—— */
.gate { position: fixed; inset: 0; z-index: 5; cursor: pointer; perspective: 1400px; }
.door {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    radial-gradient(circle, #d9b45a 0 5px, #8a6a28 6px, transparent 7.5px) 0 0 / 70px 70px,
    linear-gradient(90deg, rgba(0, 0, 0, 0.25), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.35)),
    linear-gradient(180deg, #8e1f17, #6a140f 60%, #4f0e0a);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.6);
}
.door.l { left: 0; transform-origin: left center; border-right: 3px solid #3a0a07; }
.door.r { right: 0; transform-origin: right center; border-left: 3px solid #3a0a07; }
.door .ring { position: absolute; top: 50%; width: 64px; height: 64px; margin-top: -32px; border-radius: 50%; border: 7px solid #c9a14a; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 0 6px rgba(0, 0, 0, 0.5); }
.door.l .ring { right: 34px; }
.door.r .ring { left: 34px; }
.gate-prompt { position: absolute; left: 50%; top: 64%; transform: translate(-50%, -50%); text-align: center; z-index: 2; }
.gate-prompt .seal { background: rgba(20, 8, 6, 0.75); }
.gate-prompt p { margin: 18px 0 0; color: var(--gold-bright); letter-spacing: 0.5em; font-size: 14px; text-shadow: 0 2px 8px #000; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.45; } }

/* ——标题页—— */
.scr-title { display: flex; flex-direction: column; }
.title-wrap { flex: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 6vw; align-items: center; padding: 6vh 8vw 2vh; }
.logo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.logo .seal.big { margin-bottom: 14px; }
.logo-title { margin: 0; font: clamp(80px, 13vw, 180px)/1 var(--f-brush); color: var(--paper); letter-spacing: 0.06em; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7); }
.logo-title span { display: inline-block; }
.logo-title span:last-child { color: var(--zhu-bright); }
.logo-sub { margin: 4px 0 0; color: var(--gold); letter-spacing: 0.5em; font-size: 15px; }
.logo-tag { margin: 18px 0 0; max-width: 34em; color: var(--dim); font-size: 14px; line-height: 2; }
.menu-col { display: flex; flex-direction: column; align-items: stretch; }
.menu { display: flex; flex-direction: column; gap: 10px; }
.menu-item {
  --rx: 0deg; --ry: 0deg;
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 14px 22px; border: 1px solid rgba(201, 161, 74, 0.25); border-left: 4px solid var(--gold-dim); border-radius: 2px;
  background: linear-gradient(90deg, rgba(26, 15, 11, 0.88), rgba(26, 15, 11, 0.55));
  text-align: left; transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: border-color 0.2s, background 0.25s, padding 0.25s var(--spring);
}
.menu-item b { font: 400 24px/1.2 var(--f-brush); letter-spacing: 0.2em; color: var(--paper); }
.menu-item small { color: var(--dim); font-size: 12px; letter-spacing: 0.08em; }
.menu-item:hover { border-left-color: var(--zhu-bright); padding-left: 32px; background: linear-gradient(90deg, rgba(122, 23, 18, 0.55), rgba(26, 15, 11, 0.5)); }
.menu-item:hover b { color: #fff; }
.menu-item.primary { border-left-color: var(--zhu-bright); background: linear-gradient(90deg, rgba(142, 31, 23, 0.7), rgba(26, 15, 11, 0.5)); }
.menu-item.primary b { color: #fff4e6; font-size: 28px; }
.title-foot { padding: 0 8vw calc(18px + var(--safe-b)); display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--faint); font-size: 12px; }
.title-foot .mock { color: var(--gold); }
.auth { padding: 22px 22px 16px; display: flex; flex-direction: column; gap: 10px; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 4px; }
.auth-tabs button { flex: 1; padding: 6px; border: 0; background: transparent; border-bottom: 2px solid rgba(42, 30, 21, 0.2); font: 18px var(--f-brush); color: rgba(42, 30, 21, 0.55); letter-spacing: 0.2em; }
.auth-tabs button.on { color: var(--zhu); border-bottom-color: var(--zhu); }
.auth input { padding: 10px 12px; border: 1px solid rgba(42, 30, 21, 0.25); border-radius: 2px; background: rgba(255, 255, 255, 0.45); color: var(--paper-ink); outline: none; transition: border-color 0.2s, background 0.2s; }
.auth input:focus { border-color: var(--zhu); background: rgba(255, 255, 255, 0.7); }
.auth .note { color: #6b5a44; }

/* ——御案—— */
.scr-court {
  display: grid; height: 100%;
  grid-template-columns: 250px minmax(0, 1fr) 290px;
  grid-template-rows: auto auto minmax(0, 1fr) calc(196px + var(--safe-b));
  grid-template-areas: "hud hud hud" "realm realm realm" "rail desk feeds" "pile hand dock";
}
.hud {
  grid-area: hud; display: flex; align-items: center; gap: 18px; padding: 10px 16px 8px;
  background: linear-gradient(180deg, rgba(8, 5, 4, 0.92), rgba(8, 5, 4, 0.6)); border-bottom: 1px solid var(--line);
  position: relative; z-index: 3;
}
.plaque {
  display: flex; flex-direction: column; align-items: center; padding: 4px 16px; min-width: 150px;
  background: linear-gradient(180deg, #7a1712, #5a100c); border: 2px solid var(--gold); border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 0 0 3px rgba(0, 0, 0, 0.25); cursor: pointer;
}
.plaque b { font: 400 21px/1.2 var(--f-brush); color: var(--gold-bright); letter-spacing: 0.08em; white-space: nowrap; }
.plaque small { font-size: 11px; color: #f0d9b0; opacity: 0.8; letter-spacing: 0.1em; }
.flames { display: flex; align-items: flex-end; gap: 7px; height: 46px; }
.fl-n { margin-left: 4px; font-size: 11px; color: var(--dim); align-self: center; }
.flame { position: relative; display: block; width: 12px; height: 40px; }
.flame::before { content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 22px; border-radius: 2px 2px 1px 1px; background: linear-gradient(90deg, #c8b89a, #f2e6cc 40%, #b9a582); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4); }
.flame::after { content: ""; position: absolute; left: 50%; bottom: 22px; width: 1.5px; height: 4px; margin-left: -0.75px; background: #2a1e15; }
.flame b {
  position: absolute; left: 50%; bottom: 24px; width: 10px; height: 16px; margin-left: -5px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 72%, #fff6d8 0 18%, #ffcf6a 36%, #f08a2a 62%, rgba(215, 57, 47, 0) 78%);
  box-shadow: 0 0 14px 4px rgba(255, 170, 80, 0.45);
  transform-origin: 50% 100%; animation: flicker 1.3s ease-in-out infinite alternate;
  transition: opacity 0.25s, transform 0.25s;
}
.flame:nth-child(2n) b { animation-duration: 1.1s; animation-delay: -0.4s; }
.flame:nth-child(3n) b { animation-duration: 1.5s; animation-delay: -0.8s; }
@keyframes flicker { 0% { transform: scale(1, 1) rotate(-2deg); } 30% { transform: scale(0.92, 1.08) rotate(2deg); } 60% { transform: scale(1.04, 0.95) rotate(-1deg); } 100% { transform: scale(0.97, 1.04) rotate(1.5deg); } }
.flame.out b { opacity: 0; transform: scale(0.2, 0.1); animation: none; }
.flame.out::before { filter: brightness(0.55); }
.flame.big { width: 40px; height: 150px; }
.flame.big::before { left: 3px; right: 3px; height: 100px; }
.flame.big::after { bottom: 100px; height: 10px; width: 3px; margin-left: -1.5px; }
.flame.big b { bottom: 106px; width: 30px; height: 50px; margin-left: -15px; box-shadow: 0 0 60px 20px rgba(255, 170, 80, 0.4); }

.swords { flex: 1; display: flex; justify-content: center; gap: 16px; min-width: 0; }
.sword { --lv: 0; --amp: calc(0.6deg + var(--lv) * 5deg); --drop: calc(var(--lv) * 10px); position: relative; display: flex; flex-direction: column; align-items: center; width: 40px; }
.sw-art { position: relative; width: 26px; height: 64px; transform-origin: 50% 0; animation: sway calc(4.2s - var(--lv) * 3s) ease-in-out infinite alternate; filter: drop-shadow(0 0 calc(var(--lv) * 7px) rgba(215, 57, 47, calc(var(--lv) * 0.9))); }
.sw-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sword:nth-child(2) .sw-art { animation-delay: -1.1s; }
.sword:nth-child(3) .sw-art { animation-delay: -2.3s; }
.sword:nth-child(4) .sw-art { animation-delay: -0.6s; }
.sword:nth-child(5) .sw-art { animation-delay: -1.7s; }
@keyframes sway { from { transform: translateY(var(--drop)) rotate(calc(var(--amp) * -1)); } to { transform: translateY(var(--drop)) rotate(var(--amp)); } }
.sword .thread { stroke: #cdb98e; stroke-width: 1.4; opacity: 0.8; }
.sword .pommel, .sword .guard { fill: var(--gold); }
.sword .grip { fill: #3a2318; }
.sword .blade { fill: color-mix(in srgb, var(--zhu-bright) calc(var(--lv) * 100%), var(--steel)); }
.sword .fuller { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1; }
.sword .tassel { stroke: var(--zhu); stroke-width: 1.6; fill: none; }
.sword.danger .thread { stroke-dasharray: 3 2; }
.sword.peril .sw-art { animation: sway 0.5s ease-in-out infinite alternate, tremble 0.12s linear infinite; }
@keyframes tremble { 50% { translate: 0.8px 0; } }
.sw-name { margin-top: calc(var(--lv) * 10px + 2px); font-size: 11px; color: var(--dim); letter-spacing: 0.1em; white-space: nowrap; transition: color 0.3s; }
.sword.danger .sw-name { color: #f0a090; }
.sword.peril .sw-name { color: var(--zhu-bright); font-weight: 600; }
.sw-word { display: none; font-size: 11px; color: var(--faint); white-space: nowrap; }
.swords.mini, .swords.big { flex: none; }
.swords.mini .sw-word, .swords.big .sw-word { display: block; }
.swords.mini .sword { width: 64px; }
.swords.mini .sw-art { height: 74px; width: 30px; }
.swords.big { gap: 6vw; }
.swords.big .sword { width: 90px; }
.swords.big .sw-art { height: 220px; width: 60px; }
.swords.big .sw-name { font: 22px var(--f-brush); letter-spacing: 0.2em; margin-top: calc(var(--lv) * 10px + 10px); }
.swords.big .sw-word { font-size: 13px; }
.sword.doomed .sw-art { filter: drop-shadow(0 0 16px rgba(215, 57, 47, 0.95)); }
.sword.snap .thread { opacity: 0; }

.treasury { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.coin { display: flex; align-items: center; gap: 6px; }
.coin i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, transparent 0 2.5px, #d9b45a 3px 100%); box-shadow: inset 0 0 0 1.5px #8a6a28; position: relative; }
.coin i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; transform: translate(-50%, -50%); background: var(--ink); }
.coin.nt i { background: radial-gradient(circle, transparent 0 2.5px, #c0c4c8 3px 100%); box-shadow: inset 0 0 0 1.5px #6b7075; }
.coin b { font: 600 16px var(--f-serif); color: var(--gold-bright); min-width: 2.5em; text-align: right; }
.coin b.warn { color: var(--zhu-bright); animation: breathe 1.4s ease-in-out infinite; }
.hud-btns { position: relative; display: flex; gap: 6px; }
.hud-more { display: contents; }
.ibtn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gold-dim);
  background: radial-gradient(circle at 35% 30%, #3a2618, #160e09); color: var(--gold-bright); font: 18px/1 var(--f-brush);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); transition: transform 0.2s var(--spring), border-color 0.2s;
}
.ibtn:hover { transform: translateY(-2px) rotate(-6deg); border-color: var(--gold-bright); }
.only-narrow { display: none; }

.realm { grid-area: realm; display: flex; gap: 6px; padding: 7px 16px; overflow-x: auto; scrollbar-width: none; background: rgba(8, 5, 4, 0.45); border-bottom: 1px solid rgba(201, 161, 74, 0.12); position: relative; z-index: 2; }
.realm::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(239, 228, 204, 0.05); border: 1px solid rgba(239, 228, 204, 0.08); font-size: 12.5px; }
.chip em { font-style: normal; color: var(--faint); }
.chip b { font-weight: 600; color: var(--text); }
.chip b.warn { color: var(--zhu-bright); }
.chip b.uneasy { color: var(--gold-bright); }
.chip.mock b { color: var(--gold); }

.rail { min-height: 0; overflow-y: auto; padding: 12px 10px 16px; background: linear-gradient(180deg, rgba(10, 7, 5, 0.72), rgba(10, 7, 5, 0.5)); position: relative; z-index: 2; }
.court-rail { grid-area: rail; border-right: 1px solid var(--line); }
.feeds { grid-area: feeds; border-left: 1px solid var(--line); display: flex; flex-direction: column; padding: 0; }
.rail-title { margin: 0 0 10px; text-align: center; font: 20px var(--f-brush); letter-spacing: 0.4em; color: var(--gold); }
.toks { display: flex; flex-direction: column; gap: 5px; }
.tok {
  --rx: 0deg; --ry: 0deg;
  position: relative; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center;
  padding: 5px 8px; border: 1px solid rgba(201, 161, 74, 0.14); border-radius: 3px; background: rgba(239, 228, 204, 0.035); text-align: left;
  transform: perspective(500px) rotateX(var(--rx)) rotateY(var(--ry)); transition: background 0.2s, border-color 0.2s;
}
.tok:hover:not(:disabled) { background: rgba(179, 38, 30, 0.18); border-color: rgba(215, 57, 47, 0.5); }
.tok:disabled { opacity: 0.55; }
.tok.gone { opacity: 0.3; filter: grayscale(1); }
.av { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #1d140e; border: 1px solid var(--gold-dim); }
.av img, .av svg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.av svg { transform: scale(1.9) translateY(18%); }
.av img.av-own { object-position: 50% 50%; }
.tn { font-weight: 600; font-size: 14px; line-height: 1.3; }
.tt { font-size: 11px; color: var(--dim); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tok .tag { position: absolute; right: 6px; top: 5px; font-size: 10px; padding: 0 5px; border-radius: 2px; background: rgba(201, 161, 74, 0.18); color: var(--gold-bright); }
.summon { margin-top: 14px; padding: 10px; border: 1px dashed rgba(201, 161, 74, 0.3); border-radius: 3px; display: flex; flex-direction: column; gap: 7px; }
.summon > label { font-size: 12px; color: var(--dim); }
.summon > label small { font-size: 11px; color: var(--faint); }
.tok.met .tn::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--gold); vertical-align: 2px; }
.summon input { padding: 7px 9px; border: 1px solid rgba(201, 161, 74, 0.25); border-radius: 2px; background: rgba(0, 0, 0, 0.35); outline: none; }
.summon input:focus { border-color: var(--gold); }
.summon-row { display: flex; justify-content: space-between; align-items: center; }
.check { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; color: var(--dim); cursor: pointer; }
.check input { accent-color: var(--zhu); }
.feed-tabs { display: flex; border-bottom: 1px solid var(--line); flex: none; }
.feed-tabs button { flex: 1; padding: 10px 0 8px; border: 0; background: transparent; color: var(--faint); font: 17px var(--f-brush); letter-spacing: 0.2em; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; }
.feed-tabs button.on { color: var(--gold-bright); border-bottom-color: var(--zhu-bright); }
.feed-list { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }
.feed { padding: 8px 2px; border-bottom: 1px solid rgba(239, 228, 204, 0.06); font-size: 13px; line-height: 1.65; color: #d8cbb0; }
.feed.new { color: var(--text); }
.feed.new::before { content: "新"; display: inline-block; margin-right: 6px; padding: 0 4px; font-size: 10px; border-radius: 2px; background: var(--zhu); color: #fff; vertical-align: 1px; }
.feed small { display: block; font-size: 10.5px; color: var(--faint); margin-top: 2px; }
.feed .circle { display: inline-block; margin-right: 6px; padding: 0 5px; font-size: 10.5px; border: 1px solid rgba(201, 161, 74, 0.35); border-radius: 2px; color: var(--gold); }

.desk { grid-area: desk; position: relative; min-height: 0; overflow-y: auto; padding: 22px 26px 30px; }
.desk-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--faint); pointer-events: none; }
.desk-empty-seal { width: 130px; height: 130px; display: grid; place-items: center; border: 4px solid rgba(215, 57, 47, 0.25); border-radius: 8px; font: 46px var(--f-brush); color: rgba(215, 57, 47, 0.3); writing-mode: vertical-rl; white-space: nowrap; transform: rotate(-5deg); }
.desk-empty p { letter-spacing: 0.2em; font-size: 13px; }

/* 奏本：案上展开的宣纸 */
.paper {
  position: relative; max-width: 780px; margin: 0 auto; padding: 30px 40px 34px;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(179, 38, 30, 0.08) 46px 47px),
    linear-gradient(180deg, #f3e9d2, #e8d9b8);
  color: var(--paper-ink); border-radius: 2px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(255, 255, 255, 0.4) inset, inset 0 0 80px rgba(130, 90, 40, 0.22);
  transform-origin: 50% 80%;
}
.paper::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(179, 38, 30, 0.22); pointer-events: none; }
.paper.locked { pointer-events: none; }
.paper.k-tan { background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(179, 38, 30, 0.1) 46px 47px), linear-gradient(180deg, #f3e4d2, #e6cfb4); }
.paper.k-mi, .paper.k-cha { background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(40, 30, 60, 0.08) 46px 47px), linear-gradient(180deg, #ebe4d6, #d9cfbe); }
.paper.k-mi::before, .paper.k-cha::before { border-color: rgba(40, 30, 60, 0.3); }
.p-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.p-kind { padding: 1px 10px; border: 1px solid var(--zhu); color: var(--zhu); font-size: 12.5px; letter-spacing: 0.2em; border-radius: 2px; }
.p-secret { padding: 1px 8px; background: #2b2238; color: #e8dff2; font-size: 12px; border-radius: 2px; letter-spacing: 0.1em; }
.p-x { margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: rgba(42, 30, 21, 0.5); font-size: 24px; line-height: 1; transition: background 0.2s, transform 0.2s var(--spring); }
.p-x:hover { background: rgba(42, 30, 21, 0.1); transform: rotate(90deg); }
.p-title { margin: 8px 0 4px; font: 400 30px/1.35 var(--f-brush); color: #1d140e; letter-spacing: 0.04em; }
.p-from { font-size: 13px; color: #6b5a44; margin-bottom: 14px; }
.p-from b { color: #2a1e15; font-size: 15px; margin-left: 4px; }
.p-body { white-space: pre-wrap; font-size: 15.5px; line-height: 2; color: #2a1e15; text-align: justify; }
.p-piaoni {
  position: relative; margin: 22px 0 6px; padding: 12px 16px 12px 18px; max-width: 560px;
  background: linear-gradient(180deg, #f6e7a8, #e9d48a); color: #3a2a12; transform: rotate(-0.6deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); border-left: 4px solid #c9a14a; transition: transform 0.3s var(--spring), box-shadow 0.3s;
}
.p-piaoni .by { font-size: 11.5px; color: #7d6532; letter-spacing: 0.15em; }
.p-piaoni p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.8; }
.p-piaoni.approved { transform: rotate(-0.6deg) scale(1.02); box-shadow: 0 0 0 2px var(--zhu), 0 6px 16px rgba(179, 38, 30, 0.25); }
.p-zhupi, .p-decided { position: relative; margin-top: 22px; padding-top: 16px; border-top: 1px dashed rgba(179, 38, 30, 0.3); }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.quick button { padding: 3px 12px; border: 1px solid rgba(179, 38, 30, 0.35); border-radius: 999px; background: rgba(255, 255, 255, 0.35); color: var(--zhu); font: 16px var(--f-wild); transition: background 0.15s, transform 0.15s var(--spring); }
.quick button:hover { background: rgba(179, 38, 30, 0.1); transform: translateY(-2px); }
.zp-write { position: relative; }
.zp-ta {
  width: 100%; min-height: 96px; resize: vertical; padding: 10px 14px; border: 1px solid rgba(179, 38, 30, 0.3); border-radius: 2px;
  background: rgba(255, 255, 255, 0.3); color: var(--zhu); font: 26px/1.5 var(--f-wild); outline: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.zp-ta::placeholder { font: 14px/1.7 var(--f-serif); color: rgba(122, 23, 18, 0.45); }
.zp-ta:focus { border-color: var(--zhu); background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.1); }
.zp-ink { position: absolute; inset: 0; padding: 10px 14px; color: var(--zhu); font: 26px/1.5 var(--f-wild); white-space: pre-wrap; word-break: break-all; }
.zp-ink span { display: inline-block; transform: rotate(var(--r, 0deg)); animation: inkIn 0.22s var(--out) both; text-shadow: 0 0 1px rgba(179, 38, 30, 0.5); }
@keyframes inkIn { from { opacity: 0; transform: scale(1.6) rotate(var(--r, 0deg)); filter: blur(3px); } to { opacity: 1; transform: rotate(var(--r, 0deg)); filter: none; } }
.zp-ink.done { position: static; padding: 0 120px 0 0; font-size: 28px; min-height: 60px; }
.p-decided.black .zp-ink { color: #2a2a2e; }
.zp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* 银钱：这本批下去太仓、内帑各动多少 */
.p-money { position: relative; margin: 14px 0 0; padding: 8px 12px 8px 14px; max-width: 600px; border: 1px solid rgba(120, 90, 40, 0.28); border-left: 3px solid #b08a3a; border-radius: 2px; background: rgba(255, 248, 225, 0.45); font-size: 14px; line-height: 1.8; color: #2a1e15; }
.p-money > em { position: absolute; top: -9px; left: 10px; padding: 0 6px; background: #f1e4c4; font: 12px var(--f-serif); font-style: normal; letter-spacing: 0.3em; color: #7d6532; }
.p-money p { margin: 2px 0; }
.p-money p > span:first-child { display: inline-block; width: 6em; color: #7d6532; }
.p-money b { margin: 0 2px 0 6px; font-weight: 700; }
.p-money b.down { color: var(--zhu); }
.p-money b.up { color: #2f7d4f; }
.p-money small { color: #8a7458; font-size: 12px; }
.p-money .none { color: #6b5a44; }
.p-money .other, .p-money .sub { color: #5d4a33; font-size: 13px; }
.p-money .other span:first-child { width: 6em; }
.p-money span.other { margin-left: 8px; }
.p-money .pick b { font-size: 15px; }
.p-money .hint { margin-top: 4px; }
.p-money.quiet { border-left-color: rgba(120, 90, 40, 0.3); background: transparent; }
.hint { margin: 10px 0 0; font-size: 12px; color: #8a7458; }
.seal-imp {
  position: absolute; right: 26px; top: 26px; z-index: 3; width: 78px; height: 78px; display: grid; place-items: center;
  border: 4px solid var(--zhu-bright); border-radius: 6px; color: var(--zhu-bright); font: 30px/1 var(--f-brush); writing-mode: vertical-rl; letter-spacing: 2px; white-space: nowrap;
  transform: rotate(var(--rot, -4deg)); mix-blend-mode: multiply; opacity: 0.92; pointer-events: none;
  background: radial-gradient(circle at 40% 40%, rgba(215, 57, 47, 0.1), transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 30% 70%, rgba(0, 0, 0, 0.75), #000 40%);
}
.seal-imp.black, .p-decided.black .seal-imp { border-color: #2a2a2e; color: #2a2a2e; }

/* 奏匣：一手牌 */
.hand { grid-area: hand; position: relative; z-index: 4; min-width: 0; clip-path: inset(-120px 0 -40px 0); } /* 只裁左右：牌摊不下时不压到两侧的暗匣和按钮 */
.mcard { position: absolute; left: 0; top: 0; width: var(--cw); height: calc(var(--cw) * 1.42); cursor: pointer; transition: transform 0.38s var(--spring); will-change: transform; }
.bob { width: 100%; height: 100%; perspective: 700px; animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.mface {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; padding: 10px 8px 9px; overflow: hidden;
  border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.5);
  background: linear-gradient(160deg, #e9d9b3, #cdb68a); color: #2a1e15;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55), inset 0 0 0 3px rgba(255, 255, 255, 0.18), inset 0 0 0 4px rgba(0, 0, 0, 0.12);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: box-shadow 0.25s;
}
.mcard:hover .mface, .mcard.sel .mface { box-shadow: 0 22px 34px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--gold-bright), 0 0 26px rgba(242, 207, 122, 0.35); }
.mcard.sel .mface { box-shadow: 0 22px 34px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--zhu-bright), 0 0 30px rgba(215, 57, 47, 0.5); }
.shine { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%); mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.25s; }
.mcard:hover .shine { opacity: 1; }
.mk { flex: none; padding: 0 6px; font-size: 11px; letter-spacing: 0.15em; border: 1px solid currentColor; border-radius: 2px; color: var(--zhu); background: rgba(255, 255, 255, 0.35); }
.mt {
  flex: 1; margin: 8px 0 6px; padding: 6px 4px; writing-mode: vertical-rl; max-height: calc(var(--cw) * 0.95); overflow: hidden;
  font: 15px/1.35 var(--f-brush); color: #1d140e; background: rgba(255, 252, 242, 0.85); border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); letter-spacing: 1px;
}
.mf { flex: none; font-size: 11px; color: rgba(42, 30, 21, 0.75); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mface.k-ti { background: linear-gradient(160deg, #e8c96a, #c69b37); }
.mface.k-zou { background: linear-gradient(160deg, #e9d9b3, #cdb68a); }
.mface.k-tan { background: linear-gradient(160deg, #c64a3a, #8e1f17); color: #fff2e4; }
.mface.k-tan .mk { color: #fff2e4; background: rgba(0, 0, 0, 0.2); }
.mface.k-tan .mf { color: rgba(255, 242, 228, 0.85); }
.mface.k-jin { background: linear-gradient(160deg, #f2d98a, #d1a43c); }
.mface.k-mi, .mface.k-cha, .mface.secret { background: linear-gradient(160deg, #3a3048, #1d1726); color: #e8dff2; border-color: #000; }
.mface.k-mi .mk, .mface.k-cha .mk, .mface.secret .mk { color: var(--gold-bright); background: rgba(0, 0, 0, 0.35); }
.mface.k-mi .mf, .mface.k-cha .mf, .mface.secret .mf { color: rgba(232, 223, 242, 0.8); }
.mface.k-mi .mt, .mface.k-cha .mt, .mface.secret .mt { background: rgba(242, 236, 248, 0.92); }
.pile { grid-area: pile; justify-self: center; align-self: center; position: relative; width: 96px; height: 120px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; z-index: 3; }
.pile-stack { --n: 0; position: absolute; left: 50%; top: 8px; width: 70px; height: 86px; margin-left: -35px; border-radius: 3px; background: linear-gradient(160deg, #e9d9b3, #bfa676); box-shadow: 0 calc(var(--n) * -1px) 0 #d8c59c, 0 calc(var(--n) * -2px) 0 #cdb68a, 0 calc(var(--n) * -3px) 0 #d8c59c, 0 8px 16px rgba(0, 0, 0, 0.5); transform: rotate(-4deg); }
.pile-stack::after { content: "已批"; position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--zhu); color: var(--zhu); font: 12px var(--f-brush); writing-mode: vertical-rl; border-radius: 3px; transform: rotate(-8deg); }
.pile-n { position: relative; z-index: 2; margin-top: auto; font: 600 20px var(--f-serif); color: var(--gold-bright); text-shadow: 0 2px 4px #000; }
.pile small { position: relative; z-index: 2; font-size: 11px; color: var(--dim); }
.pile:hover .pile-stack { transform: rotate(-1deg) translateY(-3px); transition: transform 0.2s var(--spring); }
.pile-list { position: absolute; left: 14px; bottom: calc(200px + var(--safe-b)); z-index: 6; width: 300px; max-height: 50vh; overflow-y: auto; padding: 8px; border: 1px solid var(--gold-dim); border-radius: 4px; background: rgba(18, 12, 8, 0.97); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; gap: 4px; }
.pile-list button { display: flex; flex-direction: column; align-items: flex-start; padding: 7px 10px; border: 0; border-radius: 3px; background: rgba(239, 228, 204, 0.04); text-align: left; }
.pile-list button:hover { background: rgba(179, 38, 30, 0.2); }
.pile-list b { font-weight: 600; font-size: 13.5px; }
.pile-list small { color: var(--dim); font-size: 11.5px; }

.dock { grid-area: dock; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 14px calc(10px + var(--safe-b)); z-index: 4; }
.dbtn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 74px; padding: 8px 0 6px;
  border: 1px solid var(--gold-dim); border-radius: 6px; background: linear-gradient(180deg, #2a1d14, #120c08);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); transition: transform 0.2s var(--spring), border-color 0.2s, box-shadow 0.2s;
}
.dbtn i { font: normal 26px/1 var(--f-brush); color: var(--gold-bright); }
.dbtn span { font-size: 12.5px; letter-spacing: 0.15em; }
.dbtn small { font-size: 10px; color: var(--faint); }
.dbtn:hover { transform: translateY(-5px) rotate(-2deg); border-color: var(--gold-bright); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.6), 0 0 20px rgba(242, 207, 122, 0.2); }
.endbtn {
  --hold: 0;
  position: relative; width: 98px; height: 98px; border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle at 40% 35%, #d2463a, #8e1f17 60%, #5a100c); color: #fff4e6;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 220, 200, 0.35), 0 0 calc(var(--hold) * 40px) rgba(215, 57, 47, calc(var(--hold) * 0.9));
  transform: scale(calc(1 - var(--hold) * 0.06)); transition: box-shadow 0.15s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: none;
}
.endbtn b { font: 400 18px/1.15 var(--f-brush); letter-spacing: 0.1em; }
.endbtn small { font-size: 9.5px; opacity: 0.8; margin-top: 2px; max-width: 80px; line-height: 1.2; text-align: center; }
.hold-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; }
.hold-ring circle { fill: none; stroke: var(--gold-bright); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(242, 207, 122, 0.8)); }
.endbtn.holding { animation: holdShake 0.08s linear infinite; }
@keyframes holdShake { 50% { translate: calc(var(--hold) * 1.5px) 0; } }

/* ——降旨、密查—— */
.decree-wrap { position: fixed; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px 16px; background: radial-gradient(ellipse at center, rgba(20, 12, 8, 0.82), rgba(4, 3, 2, 0.95)); overflow-y: auto; }
.scroll { position: relative; display: flex; align-items: stretch; width: min(900px, 94vw); flex: none; }
.roller { flex: none; width: 26px; margin: -16px 0; border-radius: 13px; background: linear-gradient(90deg, #4a2a14, #8a5a2c 40%, #5a3418); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6); position: relative; z-index: 2; }
.roller::before, .roller::after { content: ""; position: absolute; left: -4px; right: -4px; height: 18px; border-radius: 6px; background: linear-gradient(90deg, #8a6a28, #f2cf7a 45%, #8a6a28); }
.roller::before { top: -8px; }
.roller::after { bottom: -8px; }
.silk {
  flex: 1; min-width: 0; position: relative; padding: 22px 34px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.12), transparent 40%),
    repeating-linear-gradient(45deg, rgba(160, 110, 20, 0.07) 0 6px, transparent 6px 14px),
    linear-gradient(180deg, #f0cf6a, #d8a838 60%, #c99528);
  box-shadow: inset 0 0 0 6px rgba(140, 90, 20, 0.35), inset 0 0 50px rgba(120, 70, 10, 0.4);
  transition: background 0.4s;
}
.scroll.secret .silk { background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.06), transparent 40%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 6px, transparent 6px 14px), linear-gradient(180deg, #3a3048, #241d30); box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.35), inset 0 0 50px rgba(0, 0, 0, 0.5); }
.silk-inner { position: relative; display: flex; flex-direction: column; gap: 10px; }
.ed-head { font: 30px/1.3 var(--f-brush); color: #5a1a0c; letter-spacing: 0.2em; }
.scroll.secret .ed-head, .scroll.secret .ed-foot { color: #e8dff2; }
.ed-ta { width: 100%; min-height: 200px; resize: vertical; padding: 12px 14px; border: 1px solid rgba(90, 26, 12, 0.3); border-radius: 2px; background: rgba(255, 248, 225, 0.45); color: #2a1408; font: 17px/1.9 var(--f-serif); outline: none; }
.ed-ta:focus { background: rgba(255, 248, 225, 0.7); border-color: #8e1f17; }
.scroll.secret .ed-ta { background: rgba(255, 255, 255, 0.08); color: #f0e8f8; border-color: rgba(255, 255, 255, 0.2); }
.ed-foot { align-self: flex-end; font: 26px var(--f-brush); color: #5a1a0c; letter-spacing: 0.3em; }
.ed-ctrl { width: min(900px, 94vw); display: flex; flex-direction: column; gap: 8px; }
.ed-ctrl .row { justify-content: flex-end; }
.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; flex-wrap: wrap; }
.toggle input { appearance: none; width: 44px; height: 24px; border-radius: 12px; background: #2a1d14; border: 1px solid var(--gold-dim); position: relative; cursor: pointer; transition: background 0.25s; }
.toggle input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); transition: transform 0.3s var(--spring); }
.toggle input:checked { background: #3a3048; }
.toggle input:checked::after { transform: translateX(20px); background: #e8dff2; }
.toggle span { font: 18px var(--f-brush); letter-spacing: 0.2em; }
.toggle small { color: var(--dim); font-size: 12px; }
.big-seal {
  position: absolute; left: 50%; top: 50%; z-index: 4; width: 170px; height: 170px; display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 6px;
  border: 7px solid #c8251b; border-radius: 10px; color: #c8251b; font: 56px/1 var(--f-brush); pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(circle at 40% 40%, rgba(200, 37, 27, 0.15), transparent 70%); box-shadow: inset 0 0 0 4px rgba(200, 37, 27, 0.25);
}
.big-seal span { writing-mode: vertical-rl; letter-spacing: 4px; }
.big-seal.secret { mix-blend-mode: normal; border-color: var(--gold-bright); color: var(--gold-bright); font-size: 100px; background: rgba(0, 0, 0, 0.3); }
.inv-title { margin: 0; font: 40px var(--f-brush); color: var(--gold-bright); letter-spacing: 0.5em; }
.inv-sub { margin: 0; color: var(--dim); font-size: 13.5px; text-align: center; max-width: 34em; }
.tokens { display: flex; gap: 6vw; justify-content: center; flex-wrap: wrap; perspective: 1200px; }
.ytoken { --rx: 0deg; --ry: 0deg; width: 260px; height: 380px; cursor: pointer; transition: opacity 0.35s, transform 0.35s var(--spring); }
.ytoken.dim { opacity: 0.3; transform: scale(0.9); pointer-events: none; }
.yt-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.6s var(--spring); }
.ytoken.flip .yt-in { transform: rotateY(180deg); }
.yt-front, .yt-back {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 110px 110px 12px 12px; display: flex; flex-direction: column; align-items: center; padding: 50px 22px 24px;
  background: linear-gradient(160deg, #e8d6a8, #bfa36a); color: #3a2410;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 6px rgba(120, 80, 30, 0.35), inset 0 0 0 9px rgba(255, 240, 200, 0.4);
}
.yt-front::before { content: ""; position: absolute; top: 18px; width: 18px; height: 18px; border-radius: 50%; background: #2a1408; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.8); }
.yt-front b { margin-top: 30px; font: 54px/1.1 var(--f-brush); writing-mode: vertical-rl; letter-spacing: 0.15em; }
.yt-front span { margin-top: auto; font-size: 13px; letter-spacing: 0.3em; }
.yt-front small { font-size: 11.5px; opacity: 0.75; }
.yt-back { transform: rotateY(180deg); padding-top: 34px; }
.yt-back b { font: 26px var(--f-brush); letter-spacing: 0.3em; margin-bottom: 12px; }
.yt-back textarea { flex: 1; width: 100%; resize: none; padding: 10px; border: 1px solid rgba(58, 36, 16, 0.3); border-radius: 3px; background: rgba(255, 250, 235, 0.55); color: #2a1408; font: 14.5px/1.8 var(--f-serif); outline: none; }
.ytoken.dark .yt-front, .ytoken.dark .yt-back { background: linear-gradient(160deg, #3a3036, #17121a); color: #e8dcc8; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 6px rgba(201, 161, 74, 0.35), inset 0 0 0 9px rgba(0, 0, 0, 0.4); }
.ytoken.dark .yt-back textarea { background: rgba(255, 255, 255, 0.08); color: #f0e8dc; border-color: rgba(201, 161, 74, 0.3); }
.ytoken:hover:not(.flip) .yt-front { box-shadow: 0 28px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(242, 207, 122, 0.25), inset 0 0 0 6px rgba(120, 80, 30, 0.35), inset 0 0 0 9px rgba(255, 240, 200, 0.4); }

/* ——召对—— */
.aud { position: fixed; inset: 0; z-index: 14; overflow: hidden; background: #000; }
.aud-shake { position: absolute; inset: 0; }
.aud-bg { position: absolute; inset: 0; }
.aud-bg .bg-pane { opacity: 1; }
.aud-tone { position: absolute; inset: 0; pointer-events: none; transition: background 0.8s; }
.aud-tone.red { background: radial-gradient(ellipse at 40% 50%, rgba(179, 38, 30, 0.25), transparent 70%); }
.aud-tone.blue { background: radial-gradient(ellipse at 40% 50%, rgba(60, 90, 130, 0.3), transparent 70%); }
.aud-tone.gold { background: radial-gradient(ellipse at 40% 50%, rgba(242, 207, 122, 0.18), transparent 70%); }
.aud-tone.dim { background: rgba(0, 0, 0, 0.3); }
.aud-stage { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-right: 14vw; }
.tachie { position: relative; height: 88vh; aspect-ratio: 2 / 3; max-width: 70vw; transition: transform 0.6s var(--spring), filter 0.4s; }
/* 没有专门的叩首 / 囚服图时，拿表情图压低一截代替；有图（.pose-art）就照图 */
.tachie[data-pose="kowtow"]:not(.pose-art), .tachie[data-pose="prison"]:not(.pose-art) { transform: translateY(16%) scale(0.92); }
.tachie.thinking { filter: brightness(0.85); }
.tachie-inner { position: absolute; inset: 0; transform-origin: 50% 100%; animation: breath 4.2s ease-in-out infinite; }
@keyframes breath { 50% { transform: scale(1.006, 1.012); } }
.tachie-layer { position: absolute; inset: 0; }
.tachie-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.6)); }
.tachie-sil { position: absolute; inset: 0; }
.tachie-sil .sil { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.7)); }
.sil-name { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); font: 64px/1 var(--f-brush); color: rgba(239, 228, 204, 0.08); writing-mode: vertical-rl; letter-spacing: 0.2em; pointer-events: none; }
.emote { position: absolute; right: 18%; top: 6%; width: 70px; height: 70px; opacity: 0; pointer-events: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); }
.emote svg, .emote img { display: block; width: 100%; height: 100%; object-fit: contain; }
.em-txt { font: 900 60px/70px var(--f-serif); text-align: center; color: var(--text); }
.em-txt.red { color: var(--zhu-bright); }
.bars { position: absolute; left: 0; right: 0; height: 7vh; background: #000; z-index: 2; }
.bars.top { top: 0; }
.bars.bot { bottom: 0; }
.aud-box {
  position: absolute; left: 50%; bottom: calc(3vh + var(--safe-b)); z-index: 3; transform: translateX(-50%);
  width: min(1000px, calc(100vw - 32px)); padding: 26px 28px 12px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(22, 14, 10, 0.94), rgba(10, 7, 5, 0.96)); border: 1px solid var(--gold-dim);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), inset 0 0 0 4px rgba(0, 0, 0, 0.4), inset 0 0 0 5px rgba(201, 161, 74, 0.18);
}
.nameplate { position: absolute; left: 22px; top: -22px; display: flex; align-items: baseline; gap: 10px; padding: 6px 20px; background: linear-gradient(180deg, #a82a20, #7a1712); border: 1px solid var(--gold); border-radius: 2px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
.nameplate b { font: 400 24px/1 var(--f-brush); color: var(--gold-bright); letter-spacing: 0.15em; }
.nameplate small { font-size: 12px; color: #f0d9b0; }
.aud-text { min-height: 5.4em; max-height: 30vh; overflow-y: auto; font-size: 17px; line-height: 1.8; white-space: pre-wrap; color: var(--text); cursor: pointer; }
.me-line { display: block; color: var(--gold); font-size: 14px; margin-bottom: 6px; }
.thinking { color: var(--dim); font-style: italic; }
.thinking i { font-style: normal; animation: blink 1.2s infinite; }
.thinking i:nth-child(2) { animation-delay: 0.2s; }
.thinking i:nth-child(3) { animation-delay: 0.4s; }
.aud-next { position: absolute; right: 26px; top: calc(26px + 5em); font-style: normal; font-size: 12px; color: var(--gold-bright); animation: nextBob 0.9s ease-in-out infinite; }
@keyframes nextBob { 50% { transform: translateY(4px); } }
.aud-form { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(201, 161, 74, 0.15); }
.aud-form .me { font: 20px var(--f-brush); color: var(--zhu-bright); }
.aud-form input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid rgba(201, 161, 74, 0.25); border-radius: 2px; background: rgba(0, 0, 0, 0.4); outline: none; font-size: 15px; }
.aud-form input:focus { border-color: var(--gold); }
.aud-tools { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.tbtn { padding: 3px 10px; border: 0; background: transparent; color: var(--dim); font-size: 12.5px; letter-spacing: 0.15em; border-radius: 2px; transition: color 0.2s, background 0.2s; }
.tbtn:hover { color: var(--gold-bright); background: rgba(201, 161, 74, 0.1); }
.turns { display: flex; gap: 5px; }
.turns i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(242, 207, 122, 0.6); transition: background 0.3s, box-shadow 0.3s; }
.turns i.out { background: #3a2a1e; box-shadow: none; }
.aud-log { position: absolute; right: 16px; top: calc(7vh + 12px); bottom: 40vh; z-index: 4; width: min(380px, calc(100vw - 32px)); overflow-y: auto; padding: 14px 16px; border: 1px solid var(--gold-dim); border-radius: 4px; background: rgba(10, 7, 5, 0.94); }
.aud-log h4 { margin: 0 0 8px; font: 20px var(--f-brush); color: var(--gold); letter-spacing: 0.3em; text-align: center; }
.aud-log p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.7; }
.aud-log p b { display: block; color: var(--gold); font-size: 12px; }
.aud-log p.me b { color: var(--zhu-bright); }
.aud-loading { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(0, 0, 0, 0.88); color: var(--dim); letter-spacing: 0.2em; }
.ld-book { display: flex; gap: 6px; }
.ld-book i { width: 14px; height: 40px; background: var(--paper-2); border-radius: 2px; animation: book 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
.ld-book i:nth-child(2) { animation-delay: 0.15s; }
.ld-book i:nth-child(3) { animation-delay: 0.3s; }
@keyframes book { 50% { transform: scaleY(0.5) skewX(-10deg); opacity: 0.5; } }

/* ——弹窗—— */
.modal-wrap { position: fixed; inset: 0; z-index: 16; display: flex; align-items: center; justify-content: center; padding: 20px 16px; background: rgba(4, 3, 2, 0.78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-box {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 26px 28px 22px; border-radius: 4px;
  background: linear-gradient(180deg, #1e140e, #120c08); border: 1px solid var(--gold-dim);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), inset 0 0 0 4px rgba(0, 0, 0, 0.35), inset 0 0 0 5px rgba(201, 161, 74, 0.2);
}
.modal-wrap.wide .modal-box { width: min(880px, 100%); }
.modal-wrap.small .modal-box { width: min(440px, 100%); }
.modal-box h4 { margin: 18px 0 8px; font: 18px var(--f-brush); color: var(--gold); letter-spacing: 0.25em; }
.confirm p { margin: 4px 0 18px; font-size: 16px; line-height: 1.8; text-align: center; }
.confirm .row { justify-content: center; }
.wallet-alert { margin-bottom: 12px; padding: 10px 14px; border-left: 3px solid var(--zhu-bright); background: rgba(179, 38, 30, 0.15); color: #ffd9d2; }
.w-balance { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid rgba(201, 161, 74, 0.2); border-radius: 3px; background: rgba(0, 0, 0, 0.25); }
.w-balance span { color: var(--dim); font-size: 13px; }
.w-balance b { font: 600 30px var(--f-serif); color: var(--gold-bright); }
.w-balance small { margin-left: auto; color: var(--faint); font-size: 12px; }
.w-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.w-pack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid rgba(201, 161, 74, 0.3); border-radius: 4px; background: linear-gradient(160deg, #2a1d14, #160e09); text-align: left; transition: transform 0.2s var(--spring), border-color 0.2s; }
.w-pack:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--gold-bright); }
.w-pack b { font: 600 24px var(--f-serif); color: var(--gold-bright); }
.w-pack b small { font-size: 11px; color: var(--dim); }
.w-pack .n { font: 17px var(--f-brush); letter-spacing: 0.1em; }
.w-pack span:last-child { font-size: 11.5px; color: var(--dim); }
.w-models { display: flex; flex-direction: column; gap: 6px; }
.w-model { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; padding: 9px 14px; border: 1px solid rgba(201, 161, 74, 0.18); border-radius: 3px; background: rgba(0, 0, 0, 0.2); text-align: left; transition: border-color 0.2s, background 0.2s; }
.w-model span { font-weight: 600; }
.w-model small { grid-row: 2; color: var(--dim); font-size: 12px; }
.w-model em { grid-row: span 2; align-self: center; font-style: normal; font-size: 12px; color: var(--gold); }
.w-model.on { border-color: var(--zhu-bright); background: rgba(179, 38, 30, 0.14); }
.w-model.on span::before { content: "● "; color: var(--zhu-bright); }
.w-details { margin-top: 16px; }
.w-details summary { cursor: pointer; color: var(--dim); font-size: 13px; }
.w-usage { margin: 8px 0; font-size: 12.5px; color: var(--dim); line-height: 1.8; }
.w-usage b { color: var(--text); }
.w-ops > div { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--dim); border-bottom: 1px solid rgba(239, 228, 204, 0.05); }
.w-ops b { color: var(--zhu-bright); }
.w-ops b.plus { color: var(--jade); }
.set-row { display: grid; grid-template-columns: 90px 1fr 48px; gap: 12px; align-items: center; padding: 8px 0; }
.set-row span { font-size: 14px; }
.set-row output { font-size: 12px; color: var(--dim); text-align: right; }
.set-row input[type="range"] { accent-color: var(--zhu-bright); width: 100%; }
.set-row input[type="checkbox"] { accent-color: var(--zhu-bright); width: 18px; height: 18px; }
.rec { display: grid; grid-template-columns: 28px auto 1fr; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid rgba(239, 228, 204, 0.06); font-size: 13px; }
.rec .rk { font: 18px var(--f-brush); color: var(--gold); text-align: center; }
.rec b { font-weight: 600; }
.rec span:last-child { color: var(--dim); font-size: 12px; }
.gallery h4 { margin-top: 16px; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.g-item { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: transparent; text-align: left; }
.g-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; border: 1px solid rgba(201, 161, 74, 0.3); background: #0d0907; transition: transform 0.25s var(--spring), border-color 0.2s; }
button.g-item:hover .g-thumb { transform: translateY(-3px) scale(1.03); border-color: var(--gold-bright); }
.g-thumb .cg-img, .g-thumb .cg-proc { position: absolute; inset: 0; animation: none; }
.g-thumb .cg-proc-title { font-size: 22px; }
.g-item span { font-size: 12.5px; color: var(--text); }
.g-item.locked .g-thumb { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #120c08 0 8px, #170f0a 8px 16px); }
.g-item.locked i { font: normal 28px var(--f-brush); color: rgba(215, 57, 47, 0.35); border: 2px solid rgba(215, 57, 47, 0.3); padding: 0 8px; border-radius: 3px; }
.g-item.locked span { color: var(--faint); }

/* ——天下运转（等待）—— */
.scr-busy { display: flex; align-items: center; justify-content: center; }
.busy-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; width: min(640px, calc(100vw - 32px)); text-align: center; }
.censer { position: relative; width: 200px; height: 220px; display: flex; align-items: flex-end; justify-content: center; }
.censer svg { width: 200px; height: 140px; }
.censer .bowl { fill: #3a2a1a; stroke: var(--gold-dim); stroke-width: 2; }
.censer .rim { fill: #4a3420; stroke: var(--gold); stroke-width: 2; }
.censer .legs, .censer .ears { stroke: var(--gold-dim); stroke-width: 6; fill: none; stroke-linecap: round; }
.stick { position: absolute; left: 50%; bottom: 128px; width: 3px; height: 80px; margin-left: -1.5px; background: linear-gradient(180deg, #8a5a2c, #5a3418); }
.stick .tip { position: absolute; left: -1.5px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #ff8a3a; box-shadow: 0 0 10px 3px rgba(255, 140, 60, 0.75); animation: candle 1.6s ease-in-out infinite alternate; }
.busy-lines { min-height: 7em; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.busy-lines p { margin: 0; font: 22px/1.5 var(--f-brush); color: var(--paper); letter-spacing: 0.08em; transition: opacity 0.6s, font-size 0.4s; }
.busy-lines p.old { opacity: 0.35; font-size: 16px; }
.busy-tip { margin: 0; max-width: 32em; color: var(--dim); font-size: 13px; line-height: 1.8; min-height: 3.6em; }
.busy-tip::before { content: "史官有言："; color: var(--gold-dim); }

/* ——插画—— */
.cgv { position: fixed; inset: 0; z-index: 18; background: #000; cursor: pointer; overflow: hidden; }
.cg-frame { position: absolute; inset: 0; }
.cg-img { position: absolute; inset: -4%; background-size: cover; background-position: center; }
/* 竖屏没有竖版插画：横版放大到主体看得清，底下垫一层同图虚化 */
.cg-blur { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(24px) brightness(0.5); }
.cg-img.fit { inset: 0; background-size: 165% auto; background-position: 50% 42%; background-repeat: no-repeat; }
.kb-slow { animation: kenburnsSlow 22s ease-out both; }
@keyframes kenburnsSlow { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } }
.cg-proc { position: absolute; inset: 0; }
.cg-proc > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-proc-title { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); font: clamp(48px, 9vw, 130px)/1.1 var(--f-wild); color: rgba(239, 228, 204, 0.12); white-space: nowrap; letter-spacing: 0.1em; }
.cg-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 25%, transparent 50%, rgba(0, 0, 0, 0.85)); }
.cg-cap { position: absolute; left: 7vw; right: 7vw; bottom: calc(8vh + var(--safe-b)); max-width: 820px; }
.cg-kind { display: inline-block; padding: 2px 12px; font-size: 12px; letter-spacing: 0.4em; color: var(--paper); border: 1px solid rgba(239, 228, 204, 0.4); border-radius: 2px; }
.kind-decree .cg-kind, .kind-omen .cg-kind { color: #ffd0c8; border-color: var(--zhu-bright); background: rgba(179, 38, 30, 0.3); }
.kind-ending .cg-kind { color: #000; background: var(--paper); }
.cg-title { margin: 10px 0 8px; font: 400 clamp(36px, 5.5vw, 64px)/1.2 var(--f-brush); color: #fff4e6; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.8); letter-spacing: 0.4em; transform-origin: 0 50%; }
.cg-text { margin: 0; min-height: 3.6em; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.9; color: #e8dcc4; text-shadow: 0 2px 10px #000; }
.cg-new { position: absolute; right: 7vw; top: 9vh; width: 90px; height: 90px; display: grid; place-items: center; border: 4px solid var(--zhu-bright); border-radius: 8px; color: var(--zhu-bright); font: 34px var(--f-brush); writing-mode: vertical-rl; background: rgba(0, 0, 0, 0.25); opacity: 0; }
.cg-hint { position: absolute; right: 4vw; bottom: calc(4vh + var(--safe-b)); font-size: 12px; letter-spacing: 0.3em; color: var(--dim); opacity: 0; transition: opacity 0.4s; }
.cg-hint.on { opacity: 1; animation: breathe 1.8s ease-in-out infinite; }

/* ——章节卡与本月邸报—— */
.scr-chapter { overflow-y: auto; }
.ch-wrap { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 6vh 16px calc(6vh + var(--safe-b)); }
.ch-head { position: relative; display: flex; flex-direction: column; align-items: center; }
.ch-year { font-size: 16px; letter-spacing: 0.6em; color: var(--gold); }
.ch-month { display: flex; font: clamp(64px, 11vw, 132px)/1.1 var(--f-brush); color: var(--paper); text-shadow: 0 6px 30px rgba(0, 0, 0, 0.8); }
.ch-month span { display: inline-block; }
.ch-seal { position: absolute; right: -70px; bottom: 6px; width: 62px; height: 62px; display: grid; place-items: center; border: 4px solid var(--zhu-bright); border-radius: 6px; color: var(--zhu-bright); font: 36px var(--f-brush); background: rgba(0, 0, 0, 0.2); opacity: 0; }
.ch-settle { width: min(640px, 100%); padding: 18px 22px; border: 1px solid var(--gold-dim); border-radius: 4px; background: rgba(12, 8, 6, 0.88); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); }
.ch-settle h3 { margin: 0 0 10px; text-align: center; font: 22px var(--f-brush); color: var(--gold); letter-spacing: 0.4em; }
.st-row { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; }
.st-row span { width: 3em; color: var(--dim); }
.st-row b { font: 600 26px var(--f-serif); color: var(--gold-bright); min-width: 3em; text-align: right; display: inline-block; }
.st-row small { color: var(--faint); font-size: 12px; }
.delta { font-style: normal; font-weight: 600; font-size: 15px; display: inline-block; }
.delta.up { color: var(--jade); }
.delta.down { color: var(--zhu-bright); }
.st-swords { justify-content: space-around; margin: 14px 0 6px; width: 100%; }
.st-words { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; perspective: 600px; }
.st-word { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.st-word span { width: 4em; color: var(--dim); }
.st-word s { color: var(--faint); }
.st-word i { font-style: normal; color: var(--gold-dim); }
.st-word b { color: var(--text); }
.st-yield:not(:empty) { margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(201, 161, 74, 0.2); }
.st-yield p { margin: 3px 0; font-size: 13px; line-height: 1.7; color: #d8cbb0; }
.st-yield span { display: inline-block; width: 5.5em; color: var(--dim); }
.st-yield .gave span { color: var(--gold-dim); }
.st-yield .took span { color: var(--zhu); }
.st-flows:not(:empty) { margin: 6px 0 2px; padding: 6px 0 4px; border-top: 1px dashed rgba(201, 161, 74, 0.2); }
.st-flows h4 { margin: 0 0 4px; font: 12px var(--f-serif); letter-spacing: 0.2em; color: var(--dim); }
.fl-group { display: flex; gap: 10px; align-items: baseline; }
.fl-group > span { width: 3em; flex: none; color: var(--dim); font-size: 13px; }
.fl-group ul { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.75; color: #d8cbb0; }
.fl-group b { display: inline-block; min-width: 4.2em; margin-right: 8px; text-align: right; font-weight: 600; }
.fl-group b.up { color: var(--jade); }
.fl-group b.down { color: var(--zhu-bright); }
.st-leak:not(:empty) { margin-top: 6px; }
.st-leak p { margin: 3px 0; font-size: 13px; line-height: 1.7; color: #d8cbb0; }
.st-leak span { display: inline-block; width: 5.5em; color: var(--zhu); }
.st-leak .hint { padding-left: 5.5em; font-size: 12px; color: var(--dim); }
.st-news { margin-top: 10px; border-top: 1px dashed rgba(201, 161, 74, 0.2); padding-top: 8px; }
.st-news p { margin: 4px 0; font-size: 13px; color: #d8cbb0; line-height: 1.7; }
.st-news p::before { content: "◆ "; color: var(--zhu); font-size: 10px; }
.ch-text { width: min(700px, 100%); padding: 26px 30px; transform-origin: 50% 0; }
.ch-narr { white-space: pre-wrap; font-size: 16px; line-height: 2.05; color: #2a1e15; text-align: justify; }
.ch-skip { margin: 0; font-size: 11.5px; color: var(--faint); letter-spacing: 0.3em; }

/* ——终局：剑落—— */
.scr-fall { display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); }
.fall-wrap { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 8vh; }
.fall-candle { margin-top: 6vh; }
.fall-cause { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; font: clamp(72px, 14vw, 180px)/1 var(--f-wild); color: var(--zhu-bright); text-shadow: 0 0 40px rgba(215, 57, 47, 0.5), 0 8px 30px #000; pointer-events: none; }
.fall-cause span { display: inline-block; }
.cracks {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.15s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23efe4cc' stroke-opacity='.35' stroke-width='2'%3E%3Cpath d='M800 650 L740 560 L760 470 L690 380 L705 260'/%3E%3Cpath d='M800 650 L880 580 L870 480 L960 420 L990 300'/%3E%3Cpath d='M800 650 L640 690 L520 660 L400 720'/%3E%3Cpath d='M800 650 L960 700 L1080 670 L1220 740'/%3E%3Cpath d='M800 650 L790 780 L830 900'/%3E%3Cpath d='M740 560 L650 560'/%3E%3Cpath d='M870 480 L800 430'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}
.cracks.on { opacity: 1; }
.finale-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8vh 8vw; background: #050404; cursor: pointer; }
.finale-text { max-width: 760px; margin: 0; white-space: pre-wrap; font-size: 18px; line-height: 2.2; color: #e8dcc4; text-align: justify; }

/* ——终局：本纪与天眼—— */
.scr-ending { overflow-y: auto; overflow-x: hidden; background: rgba(5, 4, 4, 0.7); scroll-behavior: smooth; }
.chron { width: min(980px, 100%); margin: 0 auto; padding: 8vh 20px calc(10vh + var(--safe-b)); }
.ch-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin-bottom: 40px; }
.end-seal { opacity: 0; width: 132px; height: 132px; font-size: 40px; line-height: 1.12; white-space: normal; letter-spacing: 0; }
.end-title { margin: 18px 0 0; font: 400 clamp(40px, 6.5vw, 84px)/1.2 var(--f-brush); color: var(--paper); letter-spacing: 0.14em; text-shadow: 0 6px 30px #000; }
.end-temple { margin: 0; color: var(--gold); font-size: 15px; letter-spacing: 0.3em; }
.end-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin-top: 14px; color: var(--dim); font-size: 13.5px; }
.end-stats b { margin: 0 4px; font: 600 22px var(--f-serif); color: var(--gold-bright); }
.benji-scroll { margin: 0 auto 40px; padding: 28px 24px; overflow-x: auto; direction: rtl; background: linear-gradient(180deg, #efe4cc, #e2d2ae); color: var(--paper-ink); border-radius: 2px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0 80px rgba(130, 90, 40, 0.25); }
.benji-v { direction: ltr; writing-mode: vertical-rl; height: min(520px, 62vh); display: inline-block; }
.benji-v h2 { margin: 0 0 0 26px; padding-left: 16px; font: 400 34px/1 var(--f-brush); color: var(--zhu); letter-spacing: 0.4em; border-left: 1px solid rgba(179, 38, 30, 0.3); }
.benji-text { font-size: 17px; line-height: 2.1; letter-spacing: 0.08em; white-space: pre-wrap; text-align: justify; background: repeating-linear-gradient(90deg, transparent 0 calc(2.1em - 1px), rgba(179, 38, 30, 0.12) calc(2.1em - 1px) 2.1em); }
.rv { margin: 0 0 44px; opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--out), transform 0.8s var(--out); }
.rv.in { opacity: 1; transform: none; }
.rv h2 { margin: 0 0 16px; font: 400 26px/1.3 var(--f-brush); color: var(--gold-bright); letter-spacing: 0.2em; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.rv h2 small { font: 12px var(--f-serif); color: var(--dim); letter-spacing: 0.1em; margin-left: 10px; }
.verdict-box .verdict { margin: 0; padding: 18px 22px; border-left: 4px solid var(--zhu); background: rgba(179, 38, 30, 0.08); font-size: 16px; line-height: 2; white-space: pre-wrap; }
.sw-cmp { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.swc { display: grid; grid-template-columns: 5.6em 1fr 6em; gap: 12px; align-items: center; }
.swc b { font: 18px var(--f-brush); letter-spacing: 0.15em; color: var(--c); white-space: nowrap; }
.swc.fell b::after { content: " 落"; color: var(--zhu-bright); }
.swc em { font-style: normal; color: var(--dim); font-size: 12.5px; text-align: right; }
.swc em .v-real { font-style: normal; color: var(--text); font-weight: 600; }
.bars-x, .swc .bars { position: relative; height: 18px; border-radius: 2px; background: rgba(239, 228, 204, 0.05); overflow: hidden; }
.swc .bars span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width 1.3s var(--out); }
.swc .bars .real { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 50%, transparent), var(--c)); }
.swc .bars .seen { top: 3px; bottom: 3px; border: 1.5px dashed rgba(239, 228, 204, 0.75); background: transparent; transition-delay: 0.5s; }
.rv.in .swc .bars span { width: var(--w); }
.swc.fell .bars { box-shadow: 0 0 0 1px var(--zhu-bright), 0 0 16px rgba(215, 57, 47, 0.4); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--dim); margin: 8px 0; }
.lg { display: inline-block; width: 22px; height: 9px; margin-right: 6px; vertical-align: 0; }
.lg.real { background: var(--gold); }
.lg.seen { border: 1.5px dashed var(--text); }
.curve { width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.curve text { fill: var(--faint); font-size: 11px; font-family: var(--f-serif); }
.curve text.lbl { font-size: 12px; }
.curve .gl { stroke: rgba(201, 161, 74, 0.12); }
.curve path { fill: none; }
.curve path.real { stroke-width: 2.2; }
.curve path.seen { stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0; }
.rv:not(.in) .curve path.real { stroke-dasharray: 3000; stroke-dashoffset: 3000; }
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; perspective: 1200px; }
.tcard { --rx: 0deg; --ry: 0deg; height: 230px; cursor: pointer; }
.tc-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.65s var(--spring); }
.tcard.flip .tc-in { transform: rotateY(180deg); }
.tc-front, .tc-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 6px; overflow: hidden; }
.tc-front { background: linear-gradient(160deg, #e9d9b3, #cdb68a); color: #2a1e15; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), inset 0 0 0 3px rgba(255, 255, 255, 0.2); }
.tc-front::after { content: "?"; position: absolute; right: 12px; bottom: -10px; font: 900 110px/1 var(--f-serif); color: rgba(42, 30, 21, 0.08); }
.tcard:hover:not(.flip) .tc-front { box-shadow: 0 16px 30px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--gold-bright); }
.tc-back { transform: rotateY(180deg); background: linear-gradient(160deg, #241818, #120a0a); color: var(--text); border: 1px solid var(--zhu); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(179, 38, 30, 0.25); }
.tc-back.st-查实 { border-color: var(--jade); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(111, 154, 138, 0.25); }
.tc-back.st-有人提过 { border-color: var(--gold); }
.tc-m { font-size: 11px; color: var(--faint); letter-spacing: 0.1em; }
.tc-back .tc-m { color: var(--dim); }
.tcard b { font-size: 15px; }
.tcard p { margin: 2px 0 0; flex: 1; overflow-y: auto; font-size: 13px; line-height: 1.7; }
.tc-front small { font-size: 11px; color: rgba(42, 30, 21, 0.55); letter-spacing: 0.2em; }
.tc-back em { align-self: flex-end; font-style: normal; font-size: 12px; padding: 1px 8px; border-radius: 2px; background: var(--zhu); color: #fff; }
.tc-back.st-查实 em { background: var(--jade); }
.tc-back.st-有人提过 em { background: var(--gold-dim); }
.ri { padding: 8px 0; border-bottom: 1px solid rgba(239, 228, 204, 0.06); font-size: 14px; line-height: 1.8; }
.ri b { margin-right: 6px; color: var(--gold); }
.ri .m, .ri > .m { display: inline-block; margin-right: 8px; font-size: 11.5px; color: var(--faint); }
.ra-in { display: block; margin-top: 2px; color: #f0a090; font-size: 13px; }
.ra-in::before { content: "◇ "; }
.ra-emp { margin: 6px 0; color: var(--gold); font-size: 14px; }
.ra-say { margin: 6px 0 10px; font-size: 14px; line-height: 1.8; }
.rv details { border-bottom: 1px solid rgba(239, 228, 204, 0.06); }
.rv summary { cursor: pointer; padding: 9px 0; color: var(--text); font-size: 14.5px; list-style: none; }
.rv summary::-webkit-details-marker { display: none; }
.rv summary::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--gold); transition: transform 0.25s var(--spring); }
.rv details[open] summary::before { transform: rotate(90deg); }
.rv details > :not(summary) { padding-left: 18px; }
.final-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fc { padding: 12px 14px; border: 1px solid rgba(201, 161, 74, 0.18); border-radius: 4px; background: rgba(239, 228, 204, 0.03); }
.fc b { font-size: 15px; }
.fc .fs { margin-left: 8px; font-size: 11.5px; padding: 0 6px; border-radius: 2px; background: rgba(201, 161, 74, 0.15); color: var(--gold-bright); }
.fc small { display: block; color: var(--dim); font-size: 12px; }
.fc p { margin: 6px 0 0; font-size: 12.5px; color: #d8cbb0; line-height: 1.7; }
.fc .psy { color: var(--dim); }
.end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }

/* ——窄屏：手机与竖屏平板—— */
@media (max-width: 1100px) {
  .scr-court { grid-template-columns: 220px minmax(0, 1fr) 0; grid-template-areas: "hud hud hud" "realm realm realm" "rail desk desk" "pile hand dock"; }
  .feeds { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); z-index: 8; transform: translateX(105%); transition: transform 0.4s var(--out); box-shadow: -20px 0 50px rgba(0, 0, 0, 0.6); background: #0f0a07; }
  .feeds.open { transform: none; }
  .hud-btns .ibtn[data-h="feeds"] { display: inline-block; }
}
@media (max-width: 860px) {
  :root { --cw: 92px; }
  body { font-size: 14px; }
  .title-wrap { grid-template-columns: 1fr; gap: 26px; padding: 6vh 22px 2vh; overflow-y: auto; align-content: start; }
  .scr-title { overflow-y: auto; }
  .logo { align-items: center; text-align: center; }
  .logo .seal.big { width: 84px; height: 84px; font-size: 32px; }
  .logo-tag { font-size: 13px; }
  .menu-item { padding: 11px 18px; }
  .menu-item b { font-size: 21px; }
  .menu-item.primary b { font-size: 24px; }
  .title-foot { padding: 0 22px calc(14px + var(--safe-b)); justify-content: center; text-align: center; }

  .scr-court { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) calc(150px + var(--safe-b)) auto; grid-template-areas: "hud" "realm" "desk" "hand" "dock"; }
  .hud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "plaque treasury btns" "flames swords swords"; align-items: center; gap: 6px 10px; padding: calc(6px + env(safe-area-inset-top, 0px)) 10px 4px; }
  .plaque { grid-area: plaque; min-width: 0; padding: 2px 10px; }
  .plaque b { font-size: 15px; }
  .plaque small { font-size: 10px; }
  .treasury { grid-area: treasury; justify-self: end; font-size: 11px; }
  .coin b { font-size: 14px; min-width: 2em; }
  .coin small { display: none; }
  .hud-btns { grid-area: btns; gap: 5px; }
  .flames { grid-area: flames; height: 30px; gap: 3px; }
  .fl-n { display: none; }
  .flame { width: 8px; height: 28px; }
  .flame::before { left: 0.5px; right: 0.5px; height: 14px; }
  .flame::after { bottom: 14px; }
  .flame b { bottom: 15px; width: 7px; height: 11px; margin-left: -3.5px; box-shadow: 0 0 8px 2px rgba(255, 170, 80, 0.4); }
  .swords { grid-area: swords; justify-content: space-around; gap: 2px; }
  .sword { width: 34px; }
  .sw-art { height: 38px; width: 16px; }
  .sw-name { font-size: 10px; letter-spacing: 0; margin-top: calc(var(--lv) * 6px); }
  .ibtn { width: 32px; height: 32px; font-size: 15px; }
  .only-narrow { display: inline-block; }
  .hud-more { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 9; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--gold-dim); border-radius: 22px; background: rgba(15, 10, 7, 0.97); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6); }
  .hud-btns.more .hud-more { display: flex; animation: dropIn 0.28s var(--spring); }
  @keyframes dropIn { from { opacity: 0; transform: translateY(-8px) scale(0.9); } }
  .court-rail { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 84vw); z-index: 8; transform: translateX(-105%); transition: transform 0.4s var(--out); box-shadow: 20px 0 50px rgba(0, 0, 0, 0.6); background: #0f0a07; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .court-rail.open { transform: none; }
  .desk { padding: 12px 10px 20px; }
  .paper { padding: 22px 20px 24px; }
  .p-title { font-size: 24px; }
  .p-body { font-size: 15px; line-height: 1.95; }
  .seal-imp { width: 62px; height: 62px; font-size: 24px; right: 14px; }
  .zp-ink.done { padding-right: 76px; font-size: 24px; }
  .pile { position: fixed; left: 8px; bottom: calc(76px + var(--safe-b)); width: 64px; height: 84px; z-index: 5; }
  .pile-stack { width: 48px; height: 60px; margin-left: -24px; }
  .pile-stack::after { width: 22px; height: 22px; font-size: 9px; }
  .pile-n { font-size: 16px; }
  .pile-list { left: 8px; bottom: calc(170px + var(--safe-b)); width: calc(100vw - 16px); }
  .dock { padding: 6px 10px calc(8px + var(--safe-b)); gap: 10px; background: linear-gradient(0deg, rgba(8, 5, 4, 0.95), rgba(8, 5, 4, 0.6)); border-top: 1px solid var(--line); }
  .dbtn { width: 64px; flex-direction: row; justify-content: center; gap: 4px; padding: 8px 0; }
  .dbtn i { font-size: 20px; }
  .dbtn small { display: none; }
  .endbtn { width: 64px; height: 64px; margin-left: auto; }
  .endbtn b { font-size: 14px; }
  .endbtn small { display: none; }

  .tokens { gap: 14px; }
  .ytoken { width: min(44vw, 200px); height: 300px; }
  .yt-front b { font-size: 40px; }
  .silk { padding: 16px 16px; }
  .ed-head { font-size: 22px; }
  .ed-ta { min-height: 150px; font-size: 15.5px; }
  .big-seal { width: 120px; height: 120px; font-size: 40px; }

  .aud-stage { padding-right: 0; }
  .tachie { height: 70vh; max-width: 100vw; }
  .aud-box { padding: 24px 16px 10px; bottom: calc(1vh + var(--safe-b)); }
  .aud-text { font-size: 15.5px; min-height: 4.6em; }
  .nameplate b { font-size: 19px; }
  .bars { height: 4vh; }
  .emote { right: 8%; width: 54px; height: 54px; }

  .ch-seal { right: -52px; width: 48px; height: 48px; font-size: 26px; }
  .ch-text { padding: 20px 18px; }
  .swords.mini .sword { width: 50px; }
  .swords.big { gap: 3vw; }
  .swords.big .sword { width: 56px; }
  .swords.big .sw-art { height: 150px; width: 40px; }
  .swords.big .sw-name { font-size: 16px; }
  .benji-scroll { padding: 20px 14px; }
  .benji-text { font-size: 15.5px; }
  .swc { grid-template-columns: 4.8em 1fr 4.6em; gap: 8px; }
  .end-seal { width: 104px; height: 104px; font-size: 32px; }
  .modal-box { padding: 22px 18px 18px; }
  .set-row { grid-template-columns: 76px 1fr 42px; }
}

/* ——美术槽位：web/assets/ui/ 里的图到位后换上（规格见 web/js/ui-slots.js 与 docs/ART_BIBLE.md）——
   <html> 上有 ui-<key> 表示那张图已到位，--ui-<key> 是它的地址。图不在，这些规则一条都不生效，程序画的照旧。 */

/* 奏匣牌面：只换封皮，标题条与字仍是程序叠的 */
.ui-card-ti .mface.k-ti { background: var(--ui-card-ti) center / 100% 100% no-repeat; }
.ui-card-zou .mface.k-zou { background: var(--ui-card-zou) center / 100% 100% no-repeat; }
.ui-card-tan .mface.k-tan { background: var(--ui-card-tan) center / 100% 100% no-repeat; }
.ui-card-jin .mface.k-jin { background: var(--ui-card-jin) center / 100% 100% no-repeat; }
.ui-card-cha .mface.k-cha { background: var(--ui-card-cha) center / 100% 100% no-repeat; }
.ui-card-mi .mface.k-mi, .ui-card-mi .mface.secret:not(.k-cha) { background: var(--ui-card-mi) center / 100% 100% no-repeat; }

/* 案上的纸：纹理平铺，奏本的朱丝栏仍是程序画的 */
.ui-paper .paper:not(.k-mi):not(.k-cha) { background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(179, 38, 30, 0.08) 46px 47px), var(--ui-paper) 0 0 / 512px auto repeat; }
.ui-paper .paper.k-tan { background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(179, 38, 30, 0.1) 46px 47px), linear-gradient(rgba(214, 120, 90, 0.12), rgba(214, 120, 90, 0.12)), var(--ui-paper) 0 0 / 512px auto repeat; }
.ui-paper-secret .paper.k-mi, .ui-paper-secret .paper.k-cha { background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(40, 30, 60, 0.08) 46px 47px), var(--ui-paper-secret) 0 0 / 512px auto repeat; }
.ui-slip .p-piaoni { background: var(--ui-slip) 0 0 / 256px auto repeat; }

/* 悬剑：剑身贴图，悬线仍是程序画的（断线、虚线都靠它）；越危险，红的那张越不透明 */
.ui-sword .sw-art svg { display: none; }
.ui-sword .sw-art { background: var(--ui-sword) 50% 100% / auto 86% no-repeat; }
.ui-sword .sw-art::before { content: ""; position: absolute; left: 50%; top: 0; width: 1.4px; height: 16%; margin-left: -0.7px; background: #cdb98e; opacity: 0.8; }
.ui-sword .sword.danger .sw-art::before { background: repeating-linear-gradient(180deg, #cdb98e 0 3px, transparent 3px 5px); }
.ui-sword .sword.snap .sw-art::before { opacity: 0; }
.ui-sword.ui-sword-red .sw-art::after { content: ""; position: absolute; inset: 0; background: var(--ui-sword-red) 50% 100% / auto 86% no-repeat; opacity: calc(var(--lv) * 1.15 - 0.1); }

/* 圣旨：绢面平铺；轴杆按九宫格竖向拉伸，上下轴头不变形 */
.ui-edict-silk .silk { background: var(--ui-edict-silk) 0 0 / 512px auto repeat; }
.ui-edict-silk-secret .scroll.secret .silk { background: var(--ui-edict-silk-secret) 0 0 / 512px auto repeat; }
.ui-edict-roller .roller {
  width: 32px; background: none; box-shadow: none; border-radius: 0;
  border-style: solid; border-width: 48px 0; border-image: var(--ui-edict-roller) 96 0 fill / 48px 0 / 0 stretch;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6));
}
.ui-edict-roller .roller::before, .ui-edict-roller .roller::after { display: none; }

/* 密查腰牌：图自带拱顶轮廓，阴影改用 drop-shadow 贴着轮廓走；背面缺图就用正面 */
.ui-token-jinyiwei .ytoken:not(.dark) .yt-front, .ui-token-jinyiwei .ytoken:not(.dark) .yt-back,
.ui-token-dongchang .ytoken.dark .yt-front, .ui-token-dongchang .ytoken.dark .yt-back { border-radius: 0; box-shadow: none; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.6)); }
.ui-token-jinyiwei .ytoken:not(.dark) .yt-front { background: var(--ui-token-jinyiwei) center / 100% 100% no-repeat; }
.ui-token-jinyiwei .ytoken:not(.dark) .yt-back { background: var(--ui-token-jinyiwei-back, var(--ui-token-jinyiwei)) center / 100% 100% no-repeat; }
.ui-token-dongchang .ytoken.dark .yt-front { background: var(--ui-token-dongchang) center / 100% 100% no-repeat; }
.ui-token-dongchang .ytoken.dark .yt-back { background: var(--ui-token-dongchang-back, var(--ui-token-dongchang)) center / 100% 100% no-repeat; }
.ui-token-jinyiwei .ytoken:not(.dark) .yt-front::before, .ui-token-dongchang .ytoken.dark .yt-front::before { display: none; }
.ui-token-jinyiwei .ytoken:not(.dark):hover:not(.flip) .yt-front,
.ui-token-dongchang .ytoken.dark:hover:not(.flip) .yt-front { box-shadow: none; filter: drop-shadow(0 0 16px rgba(242, 207, 122, 0.45)) drop-shadow(0 26px 30px rgba(0, 0, 0, 0.6)); }

/* 宫门：左扇贴图，右扇镜像；门环换成铺首 */
.ui-gate-door .door::before { content: ""; position: absolute; inset: 0; background: var(--ui-gate-door) 100% 50% / cover no-repeat; }
.ui-gate-door .door.r::before { transform: scaleX(-1); }
.ui-gate-ring .door .ring { width: 112px; height: 112px; margin-top: -56px; border: 0; border-radius: 0; background: var(--ui-gate-ring) center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }
.ui-gate-ring .door.l .ring { right: 18px; }
.ui-gate-ring .door.r .ring { left: 18px; }

/* 小物件 */
.ui-candle .flame::before { background: var(--ui-candle) 50% 100% / 100% 100% no-repeat; box-shadow: none; border-radius: 0; }
.ui-censer .censer svg { display: none; }
.ui-censer .censer { background: var(--ui-censer) 50% 100% / 200px 200px no-repeat; }
.ui-censer .stick { bottom: 134px; }
.ui-icon-taicang .coin:not(.nt) i, .ui-icon-neitang .coin.nt i { width: 20px; height: 20px; border-radius: 0; box-shadow: none; }
.ui-icon-taicang .coin:not(.nt) i { background: var(--ui-icon-taicang) center / contain no-repeat; }
.ui-icon-neitang .coin.nt i { background: var(--ui-icon-neitang) center / contain no-repeat; }
.ui-icon-taicang .coin:not(.nt) i::after, .ui-icon-neitang .coin.nt i::after { display: none; }
.ui-btn-end .endbtn { background: var(--ui-btn-end) center / cover no-repeat; }
.ui-btn-end .endbtn b { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
/* 印章：字和框仍是程序写的，只借这张遮罩做出石印斑驳。呼吸发光的那枚不罩，免得光晕被裁掉 */
.ui-seal-grain :is(.seal:not(.pulse), .seal-imp, .big-seal, .ch-seal, .cg-new, .desk-empty-seal) { -webkit-mask: var(--ui-seal-grain) center / 100% 100% no-repeat; mask: var(--ui-seal-grain) center / 100% 100% no-repeat; }

/* 终局与边框 */
.ui-tcard-front .tc-front { background: var(--ui-tcard-front) center / cover no-repeat; }
.ui-tcard-back .tc-back { background: var(--ui-tcard-back) center / cover no-repeat; }
.ui-cracks .cracks { background: var(--ui-cracks) 50% 72% / cover no-repeat; }
.ui-plaque .plaque { background: none; box-shadow: none; border: 2px solid transparent; border-image: var(--ui-plaque) 60 fill / 20px / 6px stretch; }
.ui-frame .modal-box, .ui-frame .aud-box { border-image: var(--ui-frame) 96 / 24px / 10px stretch; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); }
.ui-frame .aud-box { padding-bottom: 18px; }
.logo-title.img img { display: block; height: 1em; width: auto; max-width: 100%; }

@media (max-width: 860px) {
  .ui-gate-ring .door .ring { width: 84px; height: 84px; margin-top: -42px; }
  .ui-gate-ring .door.l .ring { right: 8px; }
  .ui-gate-ring .door.r .ring { left: 8px; }
  .ui-frame .aud-box { padding-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  #grain { display: none; }
}

/* ——嘉靖心声—— */
.jj-head { --s: 26px; position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.jj-head svg, .jj-head img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jj-head.sm { --s: 22px; }
.jj-head.lg { --s: 58px; box-shadow: 0 0 0 2px rgba(217, 180, 90, 0.35), 0 6px 18px rgba(0, 0, 0, 0.5); }
.jj-head.think { animation: jjThink 1.6s ease-in-out infinite; }
@keyframes jjThink { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg) translateY(-2px); } }

.jj-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border-radius: 999px;
  border: 1px solid rgba(179, 38, 30, 0.4); background: rgba(255, 255, 255, 0.4); color: var(--zhu); font: 17px/1 var(--f-brush); letter-spacing: 0.08em;
  transition: transform 0.2s var(--spring), background 0.2s, color 0.2s, box-shadow 0.2s;
}
.jj-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(122, 23, 18, 0.25); }
.jj-btn:hover:not(:disabled) .jj-head { transform: rotate(-8deg); }
.jj-btn .jj-head { transition: transform 0.25s var(--spring); }
.jj-btn.on { background: linear-gradient(180deg, #b3261e, #7a1712); border-color: var(--gold); color: #fbeccb; }
.jj-btn:disabled { opacity: 0.35; }
.jj-btn.hint { animation: jjHint 1.4s ease-in-out infinite; }
.jj-btn.hint::after {
  content: "读不懂？听听朕心里怎么想"; position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; padding: 4px 10px; white-space: nowrap;
  font: 12.5px/1.5 var(--f-serif); letter-spacing: 0.05em; color: #fbeccb; background: #7a1712; border-radius: 3px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); pointer-events: none;
}
@keyframes jjHint { 50% { box-shadow: 0 0 0 6px rgba(215, 57, 47, 0.18), 0 0 18px rgba(215, 57, 47, 0.35); } }
.p-head .jj-btn { margin-left: auto; }
.p-head .jj-btn + .p-x { margin-left: 2px; }

/* 奏本：原文 / 心声两面 */
.p-read { transform-origin: 50% 30%; }
.p-heart { display: none; }
.p-read.heart .p-orig { display: none; }
.p-read.heart .p-heart { display: block; }
.p-heart {
  position: relative; margin-top: 4px; padding: 16px 18px; border-radius: 4px; color: var(--text);
  background: radial-gradient(120% 80% at 0% 0%, rgba(122, 23, 18, 0.35), transparent 60%), linear-gradient(180deg, #23170f, #150e0a);
  border: 1px solid var(--gold-dim); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35), 0 8px 22px rgba(0, 0, 0, 0.3);
}
.ph-voice { display: flex; gap: 14px; align-items: flex-start; }
.ph-bubble { flex: 1; min-width: 0; }
.ph-gist { margin: 0 0 8px; font-size: 13.5px; line-height: 1.75; color: var(--dim); }
.ph-heart { margin: 0; font-size: 17px; line-height: 1.85; color: #f6e8c6; }
.p-heart em, .aud-heart em, .dep em { display: inline-block; margin-right: 8px; padding: 0 6px; font-style: normal; font-size: 11px; letter-spacing: 0.12em; border: 1px solid rgba(201, 161, 74, 0.4); border-radius: 2px; color: var(--gold); vertical-align: 1px; }
.ph-piaoni { margin: 14px 0 0 72px; padding: 8px 12px; border-left: 3px solid var(--gold); background: rgba(233, 212, 138, 0.08); font-size: 13.5px; line-height: 1.75; }
.ph-piaoni q { display: block; margin: 4px 0; color: #e9d48a; quotes: "「" "」"; }
.ph-piaoni p { margin: 0; color: var(--text); }
.ph-lean { margin: 14px 0 0 72px; padding: 8px 12px; border: 1px dashed rgba(215, 57, 47, 0.55); border-radius: 3px; font-size: 14px; line-height: 1.7; }
.ph-lean em { border-color: rgba(215, 57, 47, 0.6); color: var(--zhu-bright); }
.ph-lean b { color: #fbeccb; font-weight: 600; }
.ph-lean small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); }
.ph-wait { display: flex; gap: 14px; align-items: center; min-height: 80px; color: var(--dim); font-size: 14px; }
.ph-wait p { margin: 0; }
.ph-wait i { font-style: normal; animation: blink 1.2s infinite; }
.ph-wait i:nth-child(2) { animation-delay: 0.2s; }
.ph-wait i:nth-child(3) { animation-delay: 0.4s; }
.ph-wait .gbtn { margin-left: 8px; }

/* 风闻 */
.feed.has-heart { position: relative; padding-right: 32px; }
.jj-mini { position: absolute; right: 2px; top: 8px; padding: 0; border: 0; background: none; border-radius: 50%; transition: transform 0.2s var(--spring), filter 0.2s; filter: grayscale(0.5) brightness(0.85); }
.jj-mini:hover, .feed.heart-on .jj-mini { transform: scale(1.12) rotate(-6deg); filter: none; }
.feed-heart { display: none; gap: 8px; align-items: flex-start; margin-top: 6px; padding: 8px 10px; border-left: 2px solid var(--zhu-bright); background: rgba(179, 38, 30, 0.12); color: var(--text); font-size: 13px; line-height: 1.7; transform-origin: 0 0; }
.feed-heart p { margin: 0; }
.feed.heart-on .feed-heart { display: flex; }

/* 召对 */
.aud-jj { position: absolute; right: 22px; top: -20px; z-index: 2; border-color: var(--gold-dim); background: linear-gradient(180deg, #2a1d14, #18110c); color: var(--gold-bright); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
.aud-jj.on { background: linear-gradient(180deg, #a82a20, #7a1712); border-color: var(--gold); color: #fbeccb; }
.aud-jj.hint::after { content: "听听朕怎么看他这句话"; top: auto; bottom: calc(100% + 8px); }
.aud-heart { display: flex; gap: 16px; align-items: flex-start; white-space: normal; }
.ah-body { flex: 1; min-width: 0; }
.ah-gist { margin: 0 0 6px; font-size: 14px; line-height: 1.7; color: var(--dim); }
.ah-heart { margin: 0; color: #f6e8c6; white-space: pre-wrap; }
.ah-ask { margin: 10px 0 0; }
.ah-ask .gbtn { max-width: 100%; height: auto; min-height: 32px; text-align: left; white-space: normal; line-height: 1.5; color: #e9d6a8; }
.log-heart { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; padding: 4px 8px; border-left: 2px solid var(--zhu); background: rgba(179, 38, 30, 0.1); font-size: 12.5px; color: var(--gold-bright); }

/* 月结：一反常态 */
.st-depart:not(:empty) { margin-top: 12px; padding-top: 8px; border-top: 1px dashed rgba(215, 57, 47, 0.35); }
.dep { position: relative; margin-top: 10px; padding: 10px 14px; border: 1px solid rgba(215, 57, 47, 0.45); border-radius: 3px; background: linear-gradient(90deg, rgba(179, 38, 30, 0.14), rgba(179, 38, 30, 0.03)); }
.dep-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding-right: 86px; }
.dep-head b { font: 18px var(--f-brush); color: var(--gold-bright); letter-spacing: 0.06em; }
.dep-seal { position: absolute; right: 10px; top: 8px; padding: 2px 8px; border: 2px solid var(--zhu-bright); border-radius: 3px; color: var(--zhu-bright); font: 16px/1.2 var(--f-brush); letter-spacing: 0.1em; opacity: 0; transform: scale(2.2) rotate(-20deg); transition: opacity 0.15s, transform 0.18s cubic-bezier(.5, 0, .9, .5); }
.dep-seal.on { opacity: 1; transform: rotate(-8deg); }
.dep p { margin: 4px 0; font-size: 13.5px; line-height: 1.7; }
.dep-wont s { text-decoration: none; color: var(--dim); background: linear-gradient(var(--zhu-bright), var(--zhu-bright)) no-repeat 0 55% / 0% 2px; transition: background-size 0.35s var(--out); }
.dep.struck .dep-wont s { background-size: 100% 2px; }
.dep-did { color: #fbeccb; }
.dep-did em { border-color: rgba(215, 57, 47, 0.6); color: var(--zhu-bright); }
.dep-court { color: var(--text); opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s var(--out); }
.dep.show-court .dep-court { opacity: 1; transform: none; }
.ri-sub { display: block; font-size: 12.5px; color: var(--dim); }

@media (max-width: 860px) {
  .ph-piaoni, .ph-lean { margin-left: 0; }
  .jj-head.lg { --s: 44px; }
  .ph-heart { font-size: 15.5px; }
  .jj-btn { font-size: 15px; }
  .aud-jj { right: 12px; }
  /* 名牌给心声按钮让位：官衔太长就截断 */
  .aud-box .nameplate { max-width: calc(100% - 140px); }
  .aud-box .nameplate small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .aud-box .nameplate b { flex: none; }
}

/* ——一期新玩法：握把柄（暗匣）、寿香、大关、成就、谥号评级（docs/GAME_DESIGN.md §1、§3）—— */

/* 寿香：竖着插在匾额右边。燃尽的部分从上往下截掉，火头跟着往下走；熬过大限换成借来的金香 */
.plaque { position: relative; padding-right: 36px; }
.incense { --k: 1; --cut: calc(2% + (1 - var(--k)) * 84%); position: absolute; right: 8px; top: 4px; bottom: 16px; width: 22px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.inc-stick { position: relative; flex: 1; width: 5px; border-radius: 2px; clip-path: inset(var(--cut) 0 0 0); transition: clip-path 1.2s var(--out);
  background: linear-gradient(90deg, #b98a52, #e8c897 45%, #a87a44) top / 100% 86% no-repeat, linear-gradient(180deg, #5a2a18, #3a1a10) bottom / 100% 14% no-repeat; box-shadow: 0 0 0 1px rgba(30, 10, 6, 0.55); }
/* 香插在一道暗槽里，朱红匾上才衬得出来 */
.incense::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 16px; margin-left: -8px; border-radius: 8px; background: linear-gradient(90deg, rgba(10, 4, 2, 0.55), rgba(10, 4, 2, 0.35) 50%, rgba(10, 4, 2, 0.55)); box-shadow: inset 0 0 0 1px rgba(201, 161, 74, 0.25); }
.incense .inc-ember { position: absolute; left: 50%; top: var(--cut); width: 7px; height: 7px; margin: -3px 0 0 -3.5px; border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0 20%, #ff9a3a 45%, rgba(215, 57, 47, 0) 72%); box-shadow: 0 0 8px 3px rgba(255, 150, 60, 0.55); animation: ember 1.6s ease-in-out infinite alternate; transition: top 1.2s var(--out); }
.incense .inc-ember::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 14px; margin-left: -1px; border-radius: 2px; background: linear-gradient(0deg, rgba(220, 210, 200, 0.5), transparent); filter: blur(1px); animation: wisp 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ember { from { opacity: 0.75; transform: scale(0.9); } to { opacity: 1; transform: scale(1.15); } }
@keyframes wisp { 0% { transform: rotate(-8deg) scaleY(0.7); opacity: 0.2; } 50% { transform: rotate(10deg) scaleY(1.1); opacity: 0.7; } 100% { transform: rotate(-4deg) scaleY(0.8); opacity: 0.2; } }
.inc-n { position: absolute; left: 50%; top: 100%; margin-top: 2px; transform: translateX(-50%); white-space: nowrap; font: 600 10px/1 var(--f-serif); color: #f0d9b0; letter-spacing: 0; }
.incense.near .inc-n { color: var(--zhu-bright); animation: breathe 1.4s ease-in-out infinite; }
.incense.near .inc-ember { box-shadow: 0 0 12px 5px rgba(255, 110, 50, 0.7); }
.incense.borrowed .inc-stick { background: linear-gradient(180deg, #e8c46a 0 86%, #c9a46a 86% 100%); }
.incense.borrowed .inc-n { color: var(--gold-bright); }
.ui-incense .inc-stick { width: 11px; border-radius: 0; box-shadow: none; background: var(--ui-incense) center / 100% 100% no-repeat; filter: drop-shadow(0 0 1px #f2cf7a) drop-shadow(0 0 3px rgba(242, 207, 122, 0.55)); }
.ui-incense .incense.borrowed .inc-stick { filter: sepia(0.6) saturate(1.6) brightness(1.15) drop-shadow(0 0 3px rgba(242, 207, 122, 0.8)); }

/* 暗匣：御案左下，和"已批"那一摞并排 */
.scr-court .pile { justify-self: end; margin-right: 14px; }
.anxia { grid-area: pile; justify-self: start; align-self: center; margin-left: 16px; position: relative; z-index: 3; width: 92px; height: 120px; padding: 0; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.ax-box { position: absolute; left: 50%; top: 14px; width: 76px; height: 70px; margin-left: -38px; border-radius: 5px;
  background: linear-gradient(170deg, #3a1714, #170807 60%, #0d0505); border: 1.5px solid #a07a34; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(0, 0, 0, 0.5), inset 0 0 0 4px rgba(201, 161, 74, 0.35); transition: transform 0.25s var(--spring); }
.ax-lid { position: absolute; left: -4px; right: -4px; top: -6px; height: 20px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #4a1e19, #22100c); border: 1.5px solid #b8903e; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6); transition: transform 0.3s var(--spring); transform-origin: 50% 100%; }
.ax-lock { position: absolute; left: 50%; top: 12px; width: 16px; height: 18px; margin-left: -8px; border-radius: 3px 3px 8px 8px; background: radial-gradient(circle at 50% 40%, #0b0504 0 2px, transparent 2.5px), linear-gradient(180deg, #f2cf7a, #9a7428); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
.ax-box::after { content: "密"; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font: 16px var(--f-brush); color: rgba(215, 57, 47, 0.75); }
.anxia:hover .ax-box { transform: translateY(-3px) rotate(-2deg); }
.anxia:hover .ax-lid { transform: translateY(-4px) rotateX(28deg); }
.anxia.has .ax-box { box-shadow: 0 10px 18px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(0, 0, 0, 0.5), inset 0 0 0 4px rgba(201, 161, 74, 0.35), 0 0 22px rgba(170, 110, 220, 0.35); }
.anxia.empty .ax-box { filter: brightness(0.7); }
.ax-n { position: relative; z-index: 2; margin-top: auto; font: 600 20px var(--f-serif); color: #e2c6ff; text-shadow: 0 2px 4px #000; }
.anxia small { position: relative; z-index: 2; padding: 1px 6px; border-radius: 3px; font-size: 11.5px; color: #e6d6f2; letter-spacing: 0.1em; white-space: nowrap; background: rgba(10, 6, 12, 0.6); text-shadow: 0 1px 3px #000; }
.ax-r { font-style: normal; color: #b9a6cc; letter-spacing: 0; }
/* 有图：匣子画得扁宽、四周留白，框放大些；去掉程序画法的内描边，只留投影和紫光 */
.ui-leverage-box .anxia .ax-box { top: -4px; width: 116px; height: 116px; margin-left: -58px; border: 0; border-radius: 0; box-shadow: none; background: var(--ui-leverage-box) center / contain no-repeat; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.65)); }
.ui-leverage-box .anxia.has .ax-box { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 10px rgba(170, 110, 220, 0.55)); }
.ui-leverage-box .ax-lid, .ui-leverage-box .ax-lock, .ui-leverage-box .ax-box::after { display: none; }
/* 有图时数字挪到匣子右上角（图的右上两成是空着的） */
.ui-leverage-box .ax-n { position: absolute; right: -2px; top: 24px; margin: 0; min-width: 22px; padding: 0 5px; border-radius: 11px; font-size: 13px; line-height: 22px; text-align: center; background: #3a1d4f; border: 1px solid #c9a6e8; }

/* 把柄牌：紫黑缎面、暗朱粗边，盖锦衣卫或东厂的印；风闻的是灰的 */
.lcard { --cwl: 104px; position: relative; flex: none; width: var(--cwl); height: calc(var(--cwl) * 1.42); perspective: 700px; cursor: pointer; }
.lc-face { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 10px 6px 8px; border-radius: 6px;
  background: radial-gradient(ellipse at 50% 30%, #3b2350, #1b0f26 70%); border: 3px solid #5a1712; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(201, 161, 74, 0.45), inset 0 0 26px rgba(0, 0, 0, 0.6);
  color: #efe2ff; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: box-shadow 0.25s, filter 0.3s; }
.lc-face::before { content: ""; position: absolute; inset: 4px; border-radius: 3px; border: 1px dashed rgba(201, 166, 232, 0.18); pointer-events: none; }
.lcard:hover .lc-face, .lcard.sel .lc-face { box-shadow: 0 18px 30px rgba(0, 0, 0, 0.6), 0 0 0 2px #c9a6e8, 0 0 26px rgba(170, 110, 220, 0.45), inset 0 0 0 1px rgba(201, 161, 74, 0.45); }
.lcard:hover .shine { opacity: 1; }
.lc-seal { position: absolute; right: 5px; top: 6px; padding: 2px 3px; writing-mode: vertical-rl; border: 1.5px solid var(--zhu-bright); border-radius: 2px; color: var(--zhu-bright); font: 12px/1 var(--f-brush); letter-spacing: 1px; background: rgba(215, 57, 47, 0.08); transform: rotate(6deg); }
.lc-seal.dc { border-color: #9a9aa6; color: #c8c8d4; background: rgba(200, 200, 212, 0.06); }
.lc-name { margin: 4px 14px 4px 0; writing-mode: vertical-rl; font: 400 22px/1.15 var(--f-brush); color: #fff4e6; letter-spacing: 3px; text-shadow: 0 2px 6px #000; max-height: 4.6em; overflow: hidden; }
.lc-kind { margin-top: auto; font-size: 11.5px; color: #d9c6ec; letter-spacing: 0.08em; text-align: center; line-height: 1.3; }
.lc-weight { display: flex; align-items: center; gap: 3px; margin-top: 3px; font-size: 9px; color: var(--zhu-bright); letter-spacing: 1px; }
.lc-weight small { font-size: 10px; color: var(--dim); letter-spacing: 0.1em; }
.lcard.w3 .lc-face { border-color: #9a1f17; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(242, 207, 122, 0.6), inset 0 0 26px rgba(120, 0, 0, 0.5); }
.lc-shown, .lc-chain { position: absolute; left: 5px; top: 6px; padding: 1px 5px; border-radius: 2px; font-size: 10px; background: rgba(242, 207, 122, 0.16); color: var(--gold-bright); border: 1px solid rgba(242, 207, 122, 0.4); }
.lc-chain { top: auto; bottom: 30px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.lcard.rumor .lc-face { filter: grayscale(0.92) brightness(0.72); border-style: dashed; }
.lcard.rumor .lc-seal { border-color: #8a8079; color: #b8aea4; background: none; }
.ui-card-leverage .lc-face { background: var(--ui-card-leverage) center / 100% 100% no-repeat; border: 0; }
.ui-card-leverage .lc-face::before { display: none; }
.lc-verdict { position: absolute; left: 50%; top: 50%; z-index: 4; width: 76px; height: 76px; display: grid; place-items: center; border: 4px solid var(--zhu-bright); border-radius: 6px; font: 22px/1.1 var(--f-brush); color: var(--zhu-bright); text-align: center; background: rgba(40, 6, 4, 0.55); }
.lc-ghost { position: fixed; left: 50%; top: 45%; z-index: 19; pointer-events: none; transform: translate(-50%, -50%); }
.lc-ghost.slam { position: absolute; top: 42%; }

/* 打开的暗匣 */
.anxia-modal .modal-box { background: linear-gradient(180deg, rgba(26, 13, 30, 0.98), rgba(12, 7, 14, 0.98)); }
.lc-row { display: flex; gap: 14px; overflow-x: auto; padding: 14px 6px 18px; scroll-snap-type: x proximity; }
.lc-row .lcard { scroll-snap-align: center; }
.lc-row .lcard.sel { transform: translateY(-8px); transition: transform 0.25s var(--spring); }
.lc-row .empty { flex: 1; }
.lc-detail:not(:empty) { margin-top: 4px; padding: 14px 16px; border: 1px solid rgba(201, 166, 232, 0.25); border-radius: 4px; background: rgba(0, 0, 0, 0.35); }
.ld-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ld-head b { font: 24px var(--f-brush); color: #fff4e6; letter-spacing: 0.1em; }
.ld-head small { color: var(--dim); font-size: 12px; }
.ld-w { margin-left: auto; padding: 1px 8px; border: 1px solid currentColor; border-radius: 2px; font-size: 12px; color: #e0a090; }
.ld-w.w3 { color: var(--zhu-bright); font-weight: 600; }
.ld-w.w1 { color: var(--dim); }
.ld-text { margin: 8px 0 4px; font-size: 15px; line-height: 1.75; color: var(--text); }
.ld-src { margin: 0; font-size: 12px; color: var(--faint); }
.ld-shown { margin: 8px 0 0; font-size: 12.5px; color: var(--gold-bright); }
.ld-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.ld-act { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 4px; background: rgba(239, 228, 204, 0.04); border: 1px solid rgba(239, 228, 204, 0.08); }
.ld-act em { font-style: normal; font: 17px var(--f-brush); color: var(--gold-bright); letter-spacing: 0.15em; }
.ld-act p { margin: 0; flex: 1; font-size: 12.5px; color: var(--dim); line-height: 1.6; }
.ld-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.ld-cost { font-size: 11px; color: var(--faint); }
.gbtn.gold { background: linear-gradient(180deg, #d9b45a, #8f6a22); border-color: #f2cf7a; color: #1d140e; box-shadow: 0 3px 0 #4a360f, inset 0 1px 0 rgba(255, 245, 210, 0.5); }
.anxia-modal .hint { color: #9d8bb0; }

/* 罚赎：铜钱飞进内帑、落进月结那一行 */
.fly-coin, .drop-coin { position: fixed; z-index: 21; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 0 2.5px, #f2cf7a 3px 60%, #b8902e 100%); box-shadow: inset 0 0 0 1.5px #8a6a28, 0 0 8px rgba(242, 207, 122, 0.6); }
.fly-coin::after, .drop-coin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; transform: translate(-50%, -50%); background: #1d140e; }
.st-row.fine { position: relative; }
.st-row.fine b { color: #f7dc8e; }
.st-row.fine span { color: var(--gold); }
.coin-rain { position: absolute; left: 3em; right: 0; top: 0; bottom: 0; pointer-events: none; }
.drop-coin { position: absolute; top: 40%; margin: 0; }

/* 召对里的亮牌 */
.ax-tbtn { color: #d9c6ec; }
.ax-tbtn.hint { animation: axHint 0.9s ease-in-out infinite alternate; }
@keyframes axHint { from { box-shadow: 0 0 0 rgba(170, 110, 220, 0); } to { box-shadow: 0 0 14px rgba(170, 110, 220, 0.7); background: rgba(170, 110, 220, 0.15); } }
.aud-lev { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: calc(1vh + 230px + var(--safe-b)); z-index: 6; width: min(720px, calc(100vw - 24px)); max-height: 56vh; overflow-y: auto; padding: 12px 14px 14px; border: 1px solid rgba(201, 166, 232, 0.4); border-radius: 6px; background: rgba(16, 9, 20, 0.97); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); }
.al-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.al-head b { font: 18px var(--f-brush); color: #e2c6ff; letter-spacing: 0.15em; }
.al-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.al-card { flex: none; width: 200px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.al-card .lcard { --cwl: 90px; }
.al-card p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text); text-align: center; }
.al-btns { display: flex; gap: 6px; }

/* 成就：徽章从天而降 */
.badge { --bw: 128px; position: relative; flex: none; width: var(--bw); height: calc(var(--bw) / 2); display: grid; place-items: center; padding: 0 calc(var(--bw) * 0.14); border-radius: 10px;
  background: radial-gradient(ellipse at 50% 40%, #27342e, #0d1411 75%); border: 2px solid #c9a14a; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(0, 0, 0, 0.6), inset 0 0 0 4px rgba(242, 207, 122, 0.4); }
.badge b { font: 400 calc(var(--bw) * 0.15)/1.15 var(--f-brush); color: var(--gold-bright); text-align: center; letter-spacing: 0.08em; text-shadow: 0 2px 6px #000; }
.badge.locked { filter: grayscale(1) brightness(0.55); }
.badge.locked b { color: var(--faint); }
.ui-badge-frame .badge { border: 0; border-radius: 0; box-shadow: none; background: var(--ui-badge-frame) center / 100% 100% no-repeat; }
.ach-toast { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 52; margin: 0 auto; width: min(520px, calc(100vw - 24px)); display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 6px; cursor: pointer;
  background: linear-gradient(180deg, rgba(40, 30, 14, 0.98), rgba(18, 13, 8, 0.98)); border: 1px solid var(--gold); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(242, 207, 122, 0.25); }
.ach-toast .badge { --bw: 120px; }
.at-text { min-width: 0; }
.at-text small { font-size: 11px; color: var(--gold); letter-spacing: 0.4em; }
.at-text b { display: block; font: 22px var(--f-brush); color: #fff4e6; letter-spacing: 0.12em; }
.at-text p { margin: 2px 0; font-size: 12.5px; color: var(--dim); }
.at-text em { font-style: normal; font-size: 12.5px; color: var(--gold-bright); }
.ach-grid, .ach-run { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ach-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 4px; background: rgba(239, 228, 204, 0.03); border: 1px solid rgba(239, 228, 204, 0.06); }
.ach-item .badge { --bw: 104px; }
.ach-item b { font: 17px var(--f-brush); color: var(--faint); letter-spacing: 0.08em; }
.ach-item p { margin: 2px 0; font-size: 12px; color: var(--faint); line-height: 1.5; }
.ach-item em, .ach-item small { font-style: normal; font-size: 12px; color: var(--gold); }
.ach-item.got b { color: var(--gold-bright); }
.ach-item.got p { color: var(--dim); }

/* 小关与大关 */
.ch-mile { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ch-mile b { padding: 3px 18px; font: 22px var(--f-brush); color: #1d140e; letter-spacing: 0.3em; background: linear-gradient(180deg, #f2cf7a, #c9a14a); border-radius: 2px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 22px rgba(242, 207, 122, 0.3); }
.ch-mile i { width: 60px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ch-mile i:last-child { transform: scaleX(-1); }
.ch-mile.big b { font-size: 32px; padding: 6px 26px; background: linear-gradient(180deg, #ffe7a3, #d4a540); }
.cgv.defy .cg-title { color: #ffe7a3; text-shadow: 0 0 30px rgba(242, 207, 122, 0.8), 0 4px 24px rgba(0, 0, 0, 0.8); }
.cgv.defy .cg-shade { background: radial-gradient(ellipse at 50% 70%, rgba(242, 207, 122, 0.18), transparent 60%), linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent 60%); }

/* 谥号评级：一笔浓墨，大字档次，旁边是史官挑的谥字 */
.tier { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; }
.tier-banner { position: relative; width: min(480px, 86vw); aspect-ratio: 5 / 2; display: flex; align-items: center; justify-content: center; gap: 0.3em;
  background: radial-gradient(ellipse 60% 42% at 50% 52%, rgba(10, 6, 4, 0.92), rgba(10, 6, 4, 0.6) 60%, transparent 72%); }
.tb-grade { font: 400 clamp(64px, 11vw, 120px)/1 var(--f-brush); color: var(--zhu-bright); text-shadow: 0 4px 30px rgba(0, 0, 0, 0.9); }
.tb-shi { font: 400 clamp(46px, 8vw, 84px)/1 var(--f-brush); color: var(--paper); text-shadow: 0 4px 30px rgba(0, 0, 0, 0.9); writing-mode: vertical-rl; }
.tier.g0 .tb-grade, .tier.g1 .tb-grade { color: var(--gold-bright); }
.tier.g4 .tb-grade { color: #8a8079; }
/* 墨笔底在暗底上会糊成一片：图放到伪元素上，描一圈极淡的泥金边，字不跟着被滤 */
.ui-tier-banner .tier-banner { isolation: isolate; background: none; }
.ui-tier-banner .tier-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ui-tier-banner) center / contain no-repeat; filter: drop-shadow(0 0 1px rgba(242, 207, 122, 0.55)) drop-shadow(0 0 18px rgba(201, 161, 74, 0.25)); }
.tier-label { margin: 0; color: var(--text); font-size: 16px; letter-spacing: 0.2em; }
.tier-label small { display: block; margin-top: 2px; font-size: 12px; color: var(--faint); letter-spacing: 0.1em; }
.tier-parts { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; margin: 2px 0 0; font-size: 12px; color: var(--dim); }
.tier-parts b { font: 600 18px var(--f-serif); color: var(--gold-bright); margin-right: 6px; }
.tier-parts span { color: #9fc49a; }
.tier-parts span.neg { color: #e08a7e; }
.rec-tier { margin-right: 8px; padding: 0 6px; border: 1px solid currentColor; border-radius: 2px; font: normal 14px var(--f-brush); color: var(--dim); }
.rec-tier.t0, .rec-tier.t1 { color: var(--gold-bright); }
.rec-tier.t2 { color: var(--text); }

@media (max-width: 1100px) {
  .scr-court .pile { margin-right: 6px; }
  .anxia { margin-left: 8px; }
}
@media (max-width: 860px) {
  .plaque { padding-right: 28px; }
  .incense { right: 5px; top: 3px; bottom: 13px; width: 18px; }
  .inc-n { font-size: 9px; }
  .pl-inc { display: none; }
  .scr-court .pile { margin-right: 0; }
  /* 手机：暗匣放进底栏，夹在"密查"和"结束本月"之间，不压手牌 */
  .anxia { position: fixed; left: auto; right: 90px; bottom: calc(6px + var(--safe-b)); margin: 0; width: 64px; height: 70px; z-index: 5; }
  .ax-box { width: 50px; height: 40px; margin-left: -25px; top: 10px; }
  .ax-lid { height: 15px; }
  .ax-lock { top: 8px; width: 12px; height: 14px; margin-left: -6px; }
  .ax-box::after { font-size: 12px; bottom: 5px; }
  .ax-n { font-size: 16px; }
  .ax-r { display: none; }
  .ui-leverage-box .anxia .ax-box { top: -10px; width: 76px; height: 76px; margin-left: -38px; }
  .ui-leverage-box .ax-n { right: -6px; top: 12px; }
  .lcard { --cwl: 92px; }
  .ld-acts { grid-template-columns: 1fr; }
  .aud-lev { bottom: calc(1vh + 210px + var(--safe-b)); }
  .al-card { width: 160px; }
  .ach-toast { gap: 10px; padding: 10px 12px; }
  .ach-toast .badge { --bw: 96px; }
  .at-text b { font-size: 19px; }
  .ach-grid, .ach-run { grid-template-columns: 1fr; }
  .ch-mile b { font-size: 18px; }
  .ch-mile.big b { font-size: 26px; }
}

/* ——二期新玩法：嘉靖的心愿、《治安疏》（docs/GAME_DESIGN.md §2、§4）—— */

/* 心愿牌：540×768 的竖牌。上半幅是插画，下半幅是米色纸面，字由程序写在纸面上。
   牌面图到位后由 ui-card-wish-<类> 换上，牌背由 ui-card-wish-back 换上；没图时用类别色的边框、大字代替插画 */
.wcard { --ww: 200px; --edge: #2c5170; --edge-hi: #8fb8de; position: relative; flex: none; width: var(--ww); aspect-ratio: 540 / 768; perspective: 900px; cursor: pointer; }
.wcard.c-xiuxuan { --edge: #23675a; --edge-hi: #7fd1b9; }
.wcard.c-yingjian { --edge: #84461f; --edge-hi: #e0a46a; }
.wcard.c-neitang { --edge: #9a7426; --edge-hi: #f2cf7a; }
.wcard.c-yuren { --edge: #4b2a63; --edge-hi: #c9a6e8; }
.wcard.c-tianxia { --edge: #2c5170; --edge-hi: #8fb8de; }
.wcard.c-hougong { --edge: #8e3149; --edge-hi: #f0a0b4; }
.wc-flip { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform 0.6s var(--spring); }
.wcard.open .wc-flip { transform: none; }
.wc-back, .wc-face { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--ww) * 0.04); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6); }
.wc-back { transform: rotateY(180deg); display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, transparent 0 calc(var(--ww) * 0.22), rgba(242, 207, 122, 0.85) calc(var(--ww) * 0.22 + 1px) calc(var(--ww) * 0.235), transparent calc(var(--ww) * 0.235 + 1px)), radial-gradient(ellipse at 50% 40%, #b0261c, #6e140f 75%);
  border: calc(var(--ww) * 0.025) solid #c9a14a; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), inset 0 0 0 calc(var(--ww) * 0.02) #6e140f, inset 0 0 0 calc(var(--ww) * 0.03) rgba(242, 207, 122, 0.6); }
.wc-medal { font: normal calc(var(--ww) * 0.2) / 1 var(--f-brush); color: var(--gold-bright); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.ui-card-wish-back .wc-back { background: var(--ui-card-wish-back) center / 100% 100% no-repeat; border: 0; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6); }
.ui-card-wish-back .wc-medal { display: none; }
.wc-face { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: box-shadow 0.25s, filter 0.5s;
  background: linear-gradient(180deg, var(--edge), color-mix(in srgb, var(--edge) 70%, #000)); border: 1px solid color-mix(in srgb, var(--edge-hi) 60%, transparent); }
.wc-pic { position: absolute; left: 7%; right: 7%; top: 5%; height: 46%; display: grid; place-items: center; border-radius: 3px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--edge-hi) 45%, transparent), transparent 70%), linear-gradient(180deg, #14171c, color-mix(in srgb, var(--edge) 50%, #0b0806)); box-shadow: inset 0 0 0 1px rgba(242, 207, 122, 0.55); }
.wc-pic b { font: normal calc(var(--ww) * 0.3) / 1 var(--f-brush); color: color-mix(in srgb, var(--edge-hi) 80%, #fff); opacity: 0.8; text-shadow: 0 0 calc(var(--ww) * 0.08) color-mix(in srgb, var(--edge-hi) 70%, transparent); }
.wc-paper { position: absolute; left: 8%; right: 8%; top: 55.5%; bottom: 6%; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: calc(var(--ww) * 0.016); padding: calc(var(--ww) * 0.055) calc(var(--ww) * 0.05) calc(var(--ww) * 0.03); border-radius: 2px; text-align: center; color: var(--paper-ink);
  background: linear-gradient(180deg, #f3ead6, #e6d7b5); box-shadow: inset 0 0 0 1px rgba(201, 161, 74, 0.6); }
.wc-title { flex: none; font: normal calc(var(--ww) * 0.09) / 1.15 var(--f-brush); color: #2a1810; letter-spacing: 0.04em; }
.wc-goal { flex: none; margin: 0; font-size: calc(var(--ww) * 0.056); line-height: 1.45; color: #4a3826; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wc-reward { flex: none; margin-top: auto; font-size: calc(var(--ww) * 0.05); color: color-mix(in srgb, var(--edge) 80%, #000); letter-spacing: 0.04em; }
.wc-cat { position: absolute; left: 50%; top: 51.6%; transform: translateX(-50%); padding: 0 calc(var(--ww) * 0.04); border-radius: 2px; font: normal calc(var(--ww) * 0.06) / 1.5 var(--f-brush); letter-spacing: 0.2em; color: #f6ecd2; background: var(--edge); box-shadow: 0 0 0 1px rgba(242, 207, 122, 0.7); white-space: nowrap; z-index: 1; }
.wc-tag { position: absolute; right: 9%; top: 57%; z-index: 1; padding: 0 4px; border: 1px solid var(--zhu); border-radius: 2px; font-size: calc(var(--ww) * 0.045); line-height: 1.5; color: var(--zhu); transform: rotate(6deg); }
.wcard .shine { z-index: 2; }
.wcard:hover .shine, .wcard.sel .shine { opacity: 1; }
.ui-card-wish-xiuxuan .wcard.c-xiuxuan .wc-face { background: var(--ui-card-wish-xiuxuan) center / 100% 100% no-repeat; }
.ui-card-wish-yingjian .wcard.c-yingjian .wc-face { background: var(--ui-card-wish-yingjian) center / 100% 100% no-repeat; }
.ui-card-wish-neitang .wcard.c-neitang .wc-face { background: var(--ui-card-wish-neitang) center / 100% 100% no-repeat; }
.ui-card-wish-yuren .wcard.c-yuren .wc-face { background: var(--ui-card-wish-yuren) center / 100% 100% no-repeat; }
.ui-card-wish-tianxia .wcard.c-tianxia .wc-face { background: var(--ui-card-wish-tianxia) center / 100% 100% no-repeat; }
.ui-card-wish-hougong .wcard.c-hougong .wc-face { background: var(--ui-card-wish-hougong) center / 100% 100% no-repeat; }
:is(.ui-card-wish-xiuxuan .c-xiuxuan, .ui-card-wish-yingjian .c-yingjian, .ui-card-wish-neitang .c-neitang, .ui-card-wish-yuren .c-yuren, .ui-card-wish-tianxia .c-tianxia, .ui-card-wish-hougong .c-hougong) :is(.wc-pic) { display: none; }
:is(.ui-card-wish-xiuxuan .c-xiuxuan, .ui-card-wish-yingjian .c-yingjian, .ui-card-wish-neitang .c-neitang, .ui-card-wish-yuren .c-yuren, .ui-card-wish-tianxia .c-tianxia, .ui-card-wish-hougong .c-hougong) .wc-face { border: 0; }
:is(.ui-card-wish-xiuxuan .c-xiuxuan, .ui-card-wish-yingjian .c-yingjian, .ui-card-wish-neitang .c-neitang, .ui-card-wish-yuren .c-yuren, .ui-card-wish-tianxia .c-tianxia, .ui-card-wish-hougong .c-hougong) .wc-paper { background: none; box-shadow: none; }
.wcard.sel .wc-face { box-shadow: 0 22px 40px rgba(0, 0, 0, 0.65), 0 0 0 2px var(--gold-bright), 0 0 34px color-mix(in srgb, var(--edge-hi) 60%, transparent); }
.wcard.gold .wc-face { box-shadow: 0 0 0 2px var(--gold-bright), 0 0 50px 10px rgba(242, 207, 122, 0.55); animation: wishGlow 1.6s ease-in-out infinite alternate; }
@keyframes wishGlow { to { box-shadow: 0 0 0 2px var(--gold-bright), 0 0 70px 18px rgba(242, 207, 122, 0.35); } }
.wcard.ashen .wc-face { filter: grayscale(1) sepia(0.35) brightness(0.55) contrast(1.1); }
/* 御印：盖在选中的那张牌上 */
.w-seal { position: absolute; right: 6%; bottom: 5%; z-index: 3; display: grid; place-items: center; width: calc(var(--ww) * 0.26); height: calc(var(--ww) * 0.26); border: calc(var(--ww) * 0.016) solid var(--zhu-bright); border-radius: 4px; font: normal calc(var(--ww) * 0.085) / 1.05 var(--f-brush); color: var(--zhu-bright); text-align: center; background: rgba(215, 57, 47, 0.1); transform: rotate(-8deg); }
.w-seal.gold { border-color: #b8860b; color: #9a6a00; background: rgba(242, 207, 122, 0.25); }
.ui-seal-grain .w-seal { -webkit-mask: var(--ui-seal-grain) center / 100% 100% no-repeat; mask: var(--ui-seal-grain) center / 100% 100% no-repeat; }
.w-shard { position: fixed; z-index: 19; pointer-events: none; }
.w-shard > .wcard { width: 100%; height: 100%; aspect-ratio: auto; }

/* 心愿进度条 */
.w-bar { position: relative; display: block; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(239, 228, 204, 0.12); box-shadow: inset 0 0 0 1px rgba(201, 161, 74, 0.3); }
.w-bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p)); transition: transform 0.9s var(--out); background: linear-gradient(90deg, #a8832e, #f2cf7a); }
.w-bar.broken i { background: linear-gradient(90deg, #5a1712, #b3261e); }

/* 匾额旁的心愿条 */
.hud-wish { --edge: #2c5170; --edge-hi: #8fb8de; flex: none; display: flex; align-items: center; gap: 9px; width: 200px; padding: 5px 10px 5px 6px; border: 1px solid var(--gold-dim); border-radius: 4px; background: linear-gradient(180deg, rgba(30, 20, 12, 0.92), rgba(14, 9, 6, 0.92)); text-align: left; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); transition: border-color 0.2s, transform 0.2s var(--spring); }
.hud-wish:hover { border-color: var(--gold-bright); transform: translateY(-1px); }
.hud-wish.c-xiuxuan { --edge: #23675a; --edge-hi: #7fd1b9; }
.hud-wish.c-yingjian { --edge: #84461f; --edge-hi: #e0a46a; }
.hud-wish.c-neitang { --edge: #9a7426; --edge-hi: #f2cf7a; }
.hud-wish.c-yuren { --edge: #4b2a63; --edge-hi: #c9a6e8; }
.hud-wish.c-hougong { --edge: #8e3149; --edge-hi: #f0a0b4; }
.hw-card { flex: none; display: grid; place-items: center; width: 28px; height: 40px; border-radius: 3px; background: linear-gradient(180deg, var(--edge), color-mix(in srgb, var(--edge) 60%, #000)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--edge-hi) 70%, transparent), 0 2px 6px rgba(0, 0, 0, 0.5); }
.hw-card b { font: normal 15px/1 var(--f-brush); color: color-mix(in srgb, var(--edge-hi) 85%, #fff); }
.hw-card.back { background: radial-gradient(ellipse at 50% 40%, #b0261c, #6e140f 75%); box-shadow: inset 0 0 0 1.5px #c9a14a; }
.hw-card.back b { color: var(--gold-bright); }
.hw-card.ash { background: #3a3532; box-shadow: inset 0 0 0 1px #6b6560; }
.hw-card.ash b { color: #a8a29a; }
.ui-card-wish-back .hw-card.back { background: var(--ui-card-wish-back) center / 100% 100% no-repeat; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.ui-card-wish-back .hw-card.back b { display: none; }
.hw-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.hw-body > b { font: 400 14px/1.2 var(--f-brush); color: var(--gold-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.04em; }
.hw-body small { font-size: 10.5px; line-height: 1.3; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-wish.full .hw-card { box-shadow: inset 0 0 0 1px var(--gold-bright), 0 0 14px rgba(242, 207, 122, 0.6); }
.hud-wish.pending, .hud-wish.vent { animation: wishBeckon 1.8s ease-in-out infinite; }
@keyframes wishBeckon { 50% { border-color: var(--gold-bright); box-shadow: 0 0 16px rgba(242, 207, 122, 0.35); } }
/* 仙缘：多出来的那一盏灯是青色的 */
.flames.boon .flame:last-of-type b { filter: hue-rotate(115deg) saturate(1.3); }

/* 季初三选一 */
.wish-deal { position: fixed; inset: 0; z-index: 17; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px calc(24px + var(--safe-b)); overflow-y: auto; background: rgba(5, 3, 2, 0.88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.wd-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(201, 161, 74, 0.16), transparent 60%); }
.wd-head { position: relative; text-align: center; }
.wd-head small { font-size: 12.5px; color: var(--dim); letter-spacing: 0.2em; }
.wd-head h2 { margin: 2px 0 4px; font: normal 40px/1.2 var(--f-brush); color: var(--gold-bright); letter-spacing: 0.5em; text-shadow: 0 0 24px rgba(242, 207, 122, 0.35); }
.wd-head p { margin: 0; font-size: 13.5px; color: var(--dim); }
.wd-row { position: relative; display: flex; justify-content: center; gap: 28px; }
.wish-deal .wcard { --ww: clamp(96px, min(24vw, 34vh), 230px); transition: transform 0.3s var(--spring), opacity 0.3s, filter 0.3s; }
.wish-deal .wcard:hover { transform: translateY(-8px); }
.wd-row.has-sel .wcard:not(.sel) { opacity: 0.6; filter: saturate(0.6); }
.wd-row .wcard.sel { transform: translateY(-14px) scale(1.04); }
.wish-deal.locked .wcard { cursor: default; }
.wd-detail { position: relative; min-height: 64px; width: min(560px, 100%); text-align: center; }
.wd-detail b { font: normal 22px/1.3 var(--f-brush); color: var(--gold-bright); letter-spacing: 0.08em; }
.wd-detail p { margin: 4px 0 0; font-size: 13.5px; color: var(--text); }
.wd-detail .wd-hint { color: var(--faint); }
.wd-reward em, .wp-reward em, .wp-fail em { margin-right: 8px; padding: 0 6px; border: 1px solid currentColor; border-radius: 2px; font-style: normal; font-size: 12px; }
.wd-reward { color: #9fd6c3 !important; }
.wd-acts { position: relative; display: flex; gap: 14px; }
.wd-acts .gbtn.red { min-width: 180px; letter-spacing: 0.3em; }

/* 心愿详情、迁怒 */
.wish-modal .modal-box { width: min(640px, 100%); }
.wp-row { display: flex; gap: 22px; align-items: flex-start; }
.wish-modal .wcard { --ww: 190px; cursor: default; }
.wp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wp-info > small { color: var(--faint); font-size: 12px; letter-spacing: 0.1em; }
.wp-info > b { font: normal 24px/1.3 var(--f-brush); color: var(--gold-bright); }
.wp-info p { margin: 0; font-size: 14px; }
.wp-info .w-bar { height: 8px; margin-top: 6px; }
.wp-prog { display: flex; justify-content: space-between; gap: 10px; color: var(--dim); font-size: 13px !important; }
.wp-prog em { font-style: normal; color: var(--gold); white-space: nowrap; }
.wp-reward { color: #9fd6c3; }
.wp-fail { color: #e08a7e; }
.w-vent { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.w-vent p { margin: 0; font-size: 14.5px; line-height: 1.8; }
.w-vent .row { display: flex; flex-wrap: wrap; gap: 8px; }
.w-vent .gbtn small { margin-left: 6px; font-size: 11px; opacity: 0.75; }
.w-vent .gbtn.chosen { box-shadow: 0 0 0 2px var(--gold-bright); }

/* 章节卡上的心愿结算 */
.ch-wish { width: min(640px, 100%); display: flex; flex-direction: column; gap: 14px; }
.wr-row { display: flex; gap: 20px; align-items: center; padding: 16px 20px; border: 1px solid var(--gold-dim); border-radius: 4px; background: rgba(12, 8, 6, 0.88); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); }
.wr-card { flex: none; }
.wr-row .wcard { --ww: 128px; cursor: default; }
.wr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wr-text > small { color: var(--faint); font-size: 12px; letter-spacing: 0.1em; }
.wr-text > b { font: normal 22px/1.3 var(--f-brush); color: var(--gold-bright); }
.wr-final { margin: 0; font-size: 13.5px; color: var(--dim); }
.wr-verdict { margin: 4px 0 0; font-size: 14.5px; }
.wr-verdict em { margin-right: 8px; padding: 1px 8px; border-radius: 2px; font: normal 16px var(--f-brush); background: rgba(242, 207, 122, 0.16); color: var(--gold-bright); border: 1px solid rgba(242, 207, 122, 0.5); }
.wr-verdict em.neg { background: rgba(120, 110, 100, 0.16); color: #b8aea4; border-color: #6b6560; }
.wr-row .w-vent { margin-top: 8px; }

/* 风向一排最前面的红签：买棺、待覆的疏 */
.chip.alarm { cursor: pointer; border-color: rgba(215, 57, 47, 0.7); background: rgba(122, 23, 18, 0.55); font: inherit; font-size: 12.5px; color: inherit; animation: alarmPulse 1.3s ease-in-out infinite; }
.chip.alarm em { color: #f0a090; }
.chip.alarm b { color: #fff0e0; }
@keyframes alarmPulse { 50% { box-shadow: 0 0 14px rgba(215, 57, 47, 0.75); background: rgba(150, 28, 22, 0.75); } }

/* 买棺：最后一个月 */
.coffin-modal .modal-box { background: linear-gradient(180deg, rgba(24, 8, 6, 0.98), rgba(8, 4, 3, 0.98)); border-color: #7a1712; }
.coffin .box-title { color: #e8564a; }
.cf-lead { margin: 0 0 6px; font-size: 15px; line-height: 1.9; }
.cf-warn { margin: 0 0 16px; color: var(--zhu-bright); font-weight: 600; letter-spacing: 0.05em; }
.cf-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cf-act { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid rgba(215, 57, 47, 0.3); border-radius: 4px; background: rgba(239, 228, 204, 0.03); }
.cf-act em { font: normal 18px var(--f-brush); color: var(--gold-bright); letter-spacing: 0.12em; }
.cf-act p { margin: 0; flex: 1; font-size: 13px; line-height: 1.75; color: var(--dim); }
.cf-act .gbtn { align-self: flex-start; }
.cf-act .gbtn small { margin-left: 8px; font-size: 11px; opacity: 0.75; }
.cf-said { color: #e08a7e !important; flex: none !important; }
.cf-said.ok { color: #9fd6c3 !important; }

/* 《治安疏》：黑底红字，心跳 */
.shu-boss { --beat: 1.2s; position: fixed; inset: 0; z-index: 17; background: #030202; color: #d9362b; overflow: hidden; }
.sb-pulse { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(150, 12, 8, 0.5) 100%); animation: sbBeat var(--beat) ease-in-out infinite; }
@keyframes sbBeat { 0%, 100% { opacity: 0.35; } 12% { opacity: 1; } 24% { opacity: 0.5; } 36% { opacity: 0.85; } }
.sb-scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: thin; }
.sb-inner { width: min(760px, 100%); margin: 0 auto; padding: 9vh 28px calc(16vh + var(--safe-b)); }
.sb-deliver { margin-bottom: 34px; padding: 14px 18px; border-left: 3px solid rgba(201, 161, 74, 0.6); background: rgba(201, 161, 74, 0.05); }
.sb-who { display: block; margin-bottom: 4px; font: normal 18px var(--f-brush); color: var(--gold); letter-spacing: 0.2em; }
.sb-line { margin: 0; color: #d8cbb0; font-size: 15.5px; line-height: 1.9; }
.sb-title { margin: 0; font: normal clamp(40px, 7vw, 76px) / 1.2 var(--f-brush); color: #e3392d; text-align: center; letter-spacing: 0.5em; text-shadow: 0 0 30px rgba(215, 57, 47, 0.55); }
.sb-from { margin: 6px 0 30px; text-align: center; color: #8e3a32; font-size: 13.5px; letter-spacing: 0.2em; }
.sb-paras p { margin: 0 0 22px; font-size: 17.5px; line-height: 2.05; text-indent: 2em; color: #d9362b; text-shadow: 0 0 12px rgba(215, 57, 47, 0.25); user-select: text; -webkit-user-select: text; }
.sb-next { position: absolute; left: 50%; bottom: calc(22px + var(--safe-b)); translate: -50% 0; padding: 8px 26px; border: 1px solid rgba(215, 57, 47, 0.5); border-radius: 999px; background: rgba(20, 4, 3, 0.85); color: #e8564a; font: normal 16px var(--f-brush); letter-spacing: 0.3em; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.sb-next.on { opacity: 1; pointer-events: auto; animation: breathe 1.6s ease-in-out infinite; }
.sb-resp { margin-top: 40px; text-align: center; }
.sb-resp h3 { margin: 0 0 16px; font: normal 26px var(--f-brush); color: var(--gold-bright); letter-spacing: 0.4em; }
.sb-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; text-align: left; }
.sb-opt { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid rgba(215, 57, 47, 0.45); border-radius: 4px; background: rgba(40, 6, 4, 0.75); color: #f0d8c8; transition: transform 0.2s var(--spring), border-color 0.2s, box-shadow 0.2s; }
.sb-opt:hover:not(:disabled) { transform: translateY(-2px); border-color: #e8564a; box-shadow: 0 0 18px rgba(215, 57, 47, 0.4); }
.sb-opt b { font: normal 21px var(--f-brush); color: #ff6a5a; letter-spacing: 0.15em; }
.sb-opt small { font-size: 12.5px; line-height: 1.6; color: #c8a898; }
.sb-opt.kill { border-color: #b3261e; background: rgba(90, 8, 6, 0.85); }
.sb-opt.heed { border-color: rgba(242, 207, 122, 0.55); background: rgba(60, 40, 10, 0.6); }
.sb-opt.heed b { color: var(--gold-bright); }
.sb-opt.chosen { box-shadow: 0 0 0 2px var(--gold-bright), 0 0 26px rgba(242, 207, 122, 0.4); }
.sb-opt:disabled:not(.chosen) { opacity: 0.4; }
.shu-boss.blood { background: #1a0201; }
.shu-boss.dawn { background: radial-gradient(ellipse at 50% 30%, #2a1d08, #050302 70%); }
.shu-boss.dawn .sb-pulse { animation: none; opacity: 0; }

@media (max-width: 1100px) {
  .hud-wish { width: 160px; }
}
@media (max-width: 860px) {
  /* 手机：心愿条收成一张小牌加一道进度，夹在蜡烛和悬剑之间 */
  .hud { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "plaque plaque treasury btns" "flames wish swords swords"; }
  .hud-wish { grid-area: wish; width: auto; padding: 3px; gap: 0; flex-direction: column; border-radius: 3px; }
  .hud-wish .hw-card { width: 20px; height: 28px; }
  .hud-wish .hw-card b { font-size: 11px; }
  .hud-wish .hw-body { width: 20px; flex: none; }
  .hud-wish .hw-body > b, .hud-wish .hw-body small { display: none; }
  .hud-wish .w-bar { height: 3px; margin-top: 2px; }
  .wish-deal { gap: 12px; justify-content: flex-start; padding-top: calc(8vh + env(safe-area-inset-top, 0px)); }
  .wd-head h2 { font-size: 30px; }
  .wd-head p { font-size: 12.5px; }
  .wd-row { gap: 8px; }
  .wish-deal .wcard { --ww: min(29vw, 150px); }
  .wish-deal .wc-goal, .wish-deal .wc-reward { display: none; }
  .wish-deal .wc-title { font-size: calc(var(--ww) * 0.105); }
  .wd-detail b { font-size: 19px; }
  .wd-acts .gbtn.red { min-width: 140px; }
  .wp-row { flex-direction: column; align-items: center; }
  .wish-modal .wcard { --ww: 150px; }
  .wp-info { width: 100%; }
  .wr-row { gap: 14px; padding: 12px 14px; }
  .wr-row .wcard { --ww: 92px; }
  .wr-row .wc-goal, .wr-row .wc-reward { display: none; }
  .wr-text > b { font-size: 18px; }
  .cf-acts { grid-template-columns: 1fr; }
  .sb-inner { padding: 7vh 18px calc(18vh + var(--safe-b)); }
  .sb-paras p { font-size: 16px; line-height: 1.95; }
  .sb-opts { grid-template-columns: 1fr; }
}

/* ——三期：后宫——
   绿头牌、银盘、美人牌背、晨起结局牌的图到位后由 ui-lvtoupai / ui-lvtoupai-tray / ui-card-xiunv / ui-card-night-<档> 换上；
   缺图一律用下面的渐变、描边代替。妃嫔立绘缺图用剪影（art.js）。 */
.night-btn.spent { opacity: 0.55; }
.night-btn.spent i { color: var(--faint); }
.night-btn.ask::after, .ibtn.dot::after { content: ""; position: absolute; top: 4px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #f08aa0; box-shadow: 0 0 8px #f08aa0; animation: breathe 1.4s ease-in-out infinite; }
.ibtn { position: relative; }
.flame.bonus::before { background: linear-gradient(90deg, #d9b45a, #fff0b8 40%, #c99528); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), 0 0 8px rgba(242, 207, 122, 0.5); }
.flame.bonus b { background: radial-gradient(ellipse at 50% 72%, #fffbe8 0 18%, #ffe48a 36%, #f2b43a 62%, rgba(242, 180, 58, 0) 78%); box-shadow: 0 0 18px 6px rgba(255, 210, 110, 0.6); }

.night { position: fixed; inset: 0; z-index: 14; overflow: hidden; background: #000; color: var(--text); }
.nt-bg, .dr-bg, .cr-bg { position: absolute; inset: 0; }
.nt-bg .bg-pane, .dr-bg .bg-pane, .cr-bg .bg-pane, .hp-banner .bg-pane { opacity: 1; }
.nt-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(20, 6, 6, 0.35), rgba(5, 2, 2, 0.82) 75%); transition: background 1.2s; }
.night.dawn .nt-shade { background: radial-gradient(ellipse at 50% 30%, rgba(80, 60, 30, 0.2), rgba(8, 6, 4, 0.78) 70%); }
.nt-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + var(--safe-b)); }
.nt-tray-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-height: 100%; overflow-y: auto; }
.nt-title { margin: 0; font: 400 44px/1.2 var(--f-brush); color: var(--gold-bright); letter-spacing: 0.35em; text-shadow: 0 0 24px rgba(255, 160, 80, 0.35); }
.nt-sub { margin: 0; text-align: center; color: #e8d6b8; font-size: 14px; }
.nt-sub b { color: var(--gold-bright); font-size: 18px; }
.nt-sub small { display: block; margin-top: 4px; color: var(--dim); font-size: 12px; }
.lv-tray {
  position: relative; width: min(920px, 100%); min-height: 300px; padding: 46px 7% 50px; border-radius: 26px;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.18), transparent 60%), linear-gradient(160deg, #dfe3e6, #9aa3aa 45%, #c9cfd3 70%, #8a9298);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7), inset 0 0 0 6px rgba(255, 255, 255, 0.25), inset 0 0 0 9px rgba(60, 66, 72, 0.5);
}
.lv-tray::before { content: ""; position: absolute; inset: 14px; border-radius: 16px; background: radial-gradient(ellipse at 50% 40%, #7a1d24, #4a0d12 70%); box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.6); }
.ui-lvtoupai-tray .lv-tray { background: var(--ui-lvtoupai-tray) center / 100% 100% no-repeat; box-shadow: none; }
.ui-lvtoupai-tray .lv-tray::before { display: none; }
.lv-row { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; perspective: 900px; }
.lvtag {
  position: relative; display: flex; flex-direction: column; align-items: center; width: 56px; height: 224px; padding: 0; border: 0; border-radius: 5px;
  background: linear-gradient(180deg, #2f6b4f 0, #1d4a35 22%, #e9d9b3 22.5%, #d8c39a 100%); box-shadow: 0 8px 14px rgba(0, 0, 0, 0.55), inset 0 0 0 1.5px #2a1e15;
  transition: transform 0.25s var(--spring), box-shadow 0.25s; transform-style: preserve-3d;
}
.ui-lvtoupai .lvtag { background: var(--ui-lvtoupai) center / 100% 100% no-repeat; box-shadow: 0 8px 14px rgba(0, 0, 0, 0.55); }
.lvtag:hover:not(:disabled) { transform: translateY(-14px) rotate(-1.5deg); box-shadow: 0 18px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(127, 209, 160, 0.4); }
.lvtag:disabled { cursor: default; }
.lvtag:disabled:not(.flipped) { filter: brightness(0.75) saturate(0.7); }
.lv-head { height: 22%; }
.lv-name { margin-top: 10px; writing-mode: vertical-rl; font: 400 20px/1.1 var(--f-brush); color: #2a1e15; letter-spacing: 0.12em; }
.lv-memo { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; }
.memo { display: inline-block; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
.memo.m-daji { background: #f2cf7a; } .memo.m-ji { background: #5fb07f; } .memo.m-ping { background: #9a928a; } .memo.m-xiong { background: #d0503f; } .memo.m-daxiong { background: #1a1416; }
.nt-btns { display: flex; gap: 10px; }
.nt-wait { display: flex; flex-direction: column; align-items: center; gap: 22px; color: #e8d6b8; letter-spacing: 0.25em; }

.nt-scene { position: absolute; inset: 0; }
.nt-tachie { position: absolute; left: 50%; bottom: 0; height: 86vh; aspect-ratio: 2 / 3; max-width: 70vw; transform: translateX(-62%); animation: breath 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
.nt-layer { position: absolute; inset: 0; }
.nt-box { position: absolute; left: 50%; bottom: calc(3vh + var(--safe-b)); z-index: 3; transform: translateX(-50%); width: min(980px, calc(100vw - 32px)); padding: 26px 28px 16px; border-radius: 4px; cursor: pointer;
  background: linear-gradient(180deg, rgba(34, 12, 16, 0.94), rgba(14, 6, 8, 0.96)); border: 1px solid #a8606e; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), inset 0 0 0 4px rgba(0, 0, 0, 0.4), inset 0 0 0 5px rgba(240, 160, 180, 0.15); }
.nt-box .nameplate { background: linear-gradient(180deg, #a83a52, #6e2235); }
.nt-text { min-height: 4.6em; font-size: 17px; line-height: 1.8; white-space: pre-wrap; }
.nt-box .aud-next { top: auto; bottom: 12px; }
.nt-fade { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 50%, rgba(60, 20, 10, 0.55), #000 70%); opacity: 0; transition: opacity 0.6s; }
.nt-fade p { max-width: 80vw; margin: 0; font: 400 26px/1.6 var(--f-brush); color: #e8b88a; letter-spacing: 0.25em; text-align: center; text-shadow: 0 0 20px rgba(255, 140, 60, 0.4); }
.nt-fade.gone { opacity: 0 !important; pointer-events: none; }

.nt-morning { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-height: 100%; overflow-y: auto; padding: 8px 0; }
.nm-head { margin: 0; font: 400 26px var(--f-brush); color: #f3dcb0; letter-spacing: 0.6em; }
.ncard { --nw: 230px; position: relative; flex: none; width: var(--nw); height: calc(var(--nw) * 1.4222); perspective: 1000px; }
.ncard.small { --nw: 170px; }
.nc-flip { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); }
.ncard.open .nc-flip { transform: none; }
.nc-back, .nc-face { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7); }
.nc-back { transform: rotateY(180deg); display: grid; place-items: center; background: linear-gradient(160deg, #3a1a22, #170a0e); border: 3px solid #a8606e; }
.nc-back i { font: normal 64px var(--f-brush); color: #f0b4c0; opacity: 0.6; }
.nc-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 22% 14% 15%; text-align: center; border: 4px solid rgba(255, 255, 255, 0.35); color: #fff6e6; }
.nc-daji .nc-face { background: radial-gradient(circle at 50% 35%, #fff2c4, transparent 60%), linear-gradient(160deg, #f2d98a, #c99528); color: #3a2208; border-color: #fff0c0; }
.nc-ji .nc-face { background: linear-gradient(160deg, #3f7a5c, #1d4a35); border-color: #9fe0b8; }
.nc-ping .nc-face { background: linear-gradient(160deg, #8a8178, #4a443f); border-color: #c8c0b6; }
.nc-xiong .nc-face { background: linear-gradient(160deg, #c64a3a, #6e1a14); border-color: #f0a090; }
.nc-daxiong .nc-face { background: radial-gradient(circle at 70% 20%, rgba(150, 20, 20, 0.35), transparent 50%), linear-gradient(160deg, #2a2224, #0d0907); border-color: #6a2a2a; }
.ui-card-night-daji .nc-daji .nc-face { background: var(--ui-card-night-daji) center / 100% 100% no-repeat; border: 0; }
.ui-card-night-ji .nc-ji .nc-face { background: var(--ui-card-night-ji) center / 100% 100% no-repeat; border: 0; }
.ui-card-night-ping .nc-ping .nc-face { background: var(--ui-card-night-ping) center / 100% 100% no-repeat; border: 0; }
.ui-card-night-xiong .nc-xiong .nc-face { background: var(--ui-card-night-xiong) center / 100% 100% no-repeat; border: 0; }
.ui-card-night-daxiong .nc-daxiong .nc-face { background: var(--ui-card-night-daxiong) center / 100% 100% no-repeat; border: 0; }
.nc-tier { font-size: 13px; letter-spacing: 0.5em; opacity: 0.85; }
.nc-name { font: 400 calc(var(--nw) * 0.15) / 1.15 var(--f-brush); letter-spacing: 0.06em; white-space: nowrap; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.nc-daji .nc-name { text-shadow: 0 0 18px rgba(255, 255, 255, 0.7); }
.nc-who { margin: 0; font-size: 12.5px; opacity: 0.85; }
.nc-flames { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 8px; max-width: 100%; }
.nc-flames .flame { width: 7px; height: 26px; }
.nc-flames .flame::before { left: 0.5px; right: 0.5px; height: 13px; }
.nc-flames .flame::after { bottom: 13px; }
.nc-flames .flame b { bottom: 14px; width: 7px; height: 11px; margin-left: -3.5px; box-shadow: 0 0 8px 2px rgba(255, 170, 80, 0.4); }
.nc-delta { margin: 4px 0 0; font-size: 13px; font-weight: 600; }
.nc-fx { margin: 4px 0 0; padding: 0; list-style: none; font-size: 11.5px; line-height: 1.5; opacity: 0.92; }
.nm-acts { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(560px, 100%); }
.nm-ask, .nm-cold { width: 100%; padding: 12px 16px; border: 1px solid #a8606e; border-radius: 4px; background: rgba(30, 10, 14, 0.9); text-align: center; }
.nm-ask p, .nm-cold p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7; }
.nm-ask em { display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 2px; font-style: normal; font-size: 12px; background: #a83a52; color: #fff0f2; }
.nm-ask .row, .nm-cold .row { justify-content: center; }
.nm-ask.answered { opacity: 0.85; }
.nm-ans { font: normal 22px var(--f-brush); color: var(--gold-bright); letter-spacing: 0.3em; }
.nm-cold { border-color: #555; background: rgba(10, 10, 14, 0.92); }
.nm-cold.done p { margin: 0; color: #9aa8b8; }
.nm-end { justify-content: center; }

/* 夜话：召对的对话框换成胭脂色 */
.aud.harem .aud-box { background: linear-gradient(180deg, rgba(34, 12, 16, 0.94), rgba(14, 6, 8, 0.96)); border-color: #a8606e; }
.aud.harem .nameplate { background: linear-gradient(180deg, #a83a52, #6e2235); }
.aud-tone.pink { background: radial-gradient(ellipse at 40% 50%, rgba(240, 138, 160, 0.2), transparent 70%); }

/* 后宫面板 */
.modal-wrap.harem .modal-box { width: min(1040px, 100%); padding: 0 0 18px; overflow-x: hidden; }
.hp-banner { position: relative; height: 120px; overflow: hidden; border-bottom: 1px solid var(--line); }
.hp-banner .bg-pane { position: absolute; inset: 0; }
.hp-ban-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(0deg, rgba(10, 6, 4, 0.85), rgba(10, 6, 4, 0.2)); }
.hp-ban-text .box-title { margin: 0; text-shadow: 0 2px 10px #000; }
.hp-ban-text p { margin: 2px 0 0; font-size: 13px; color: #f0e2c8; text-shadow: 0 1px 4px #000; text-align: center; padding: 0 12px; }
.hp-body { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; padding: 8px 20px 0; }
.hp .row.end { padding: 0 20px; }
.hp-side h4 { margin: 12px 0 6px; }
.hp-ladder { display: flex; flex-direction: column; gap: 3px; }
.hl-row { display: grid; grid-template-columns: 4em 2.6em minmax(0, 1fr); align-items: baseline; gap: 6px; padding: 3px 8px; border-radius: 3px; background: rgba(240, 180, 192, 0.05); font-size: 13px; }
.hl-row.empty { opacity: 0.5; }
.hl-rank { font: normal 15px var(--f-brush); color: #f0b4c0; }
.hl-cap { color: var(--faint); font-size: 11px; }
.hl-who { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.hl-who em { font-style: normal; color: var(--text); }
.hl-who em.cold { color: #8a9aaa; text-decoration: line-through; }
.hl-who em.vacant { color: var(--faint); }
.hp-nights { display: flex; flex-direction: column; gap: 6px; }
.hn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 8px; border-left: 3px solid #888; border-radius: 2px; background: rgba(255, 255, 255, 0.03); font-size: 13px; }
.hn-daji { border-color: #f2cf7a; } .hn-ji { border-color: #5fb07f; } .hn-ping { border-color: #9a928a; } .hn-xiong { border-color: #d0503f; } .hn-daxiong { border-color: #444; }
.hn-tier { font: normal 15px var(--f-brush); color: var(--gold-bright); }
.hp-draft p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; }
.hp-kids { margin: 0; padding-left: 18px; font-size: 13px; }
.hp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; align-content: start; padding-bottom: 4px; }
.hc { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid rgba(240, 180, 192, 0.18); border-radius: 5px; background: linear-gradient(160deg, rgba(60, 20, 28, 0.35), rgba(16, 8, 10, 0.6)); }
.hc.is-cold { filter: saturate(0.3); border-color: rgba(140, 160, 180, 0.25); background: linear-gradient(160deg, rgba(20, 28, 36, 0.5), rgba(8, 10, 14, 0.7)); }
.hc-av { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid #a8606e; background: #1a0c10; }
.hc-av img, .hc-av svg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.hc-av svg { transform: scale(2.2) translateY(14%); }
.hc-main p { margin: 0 0 3px; }
.hc-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.hc-name b { font: normal 20px var(--f-brush); color: #f6d8de; letter-spacing: 0.1em; }
.hc-name small { color: var(--dim); font-size: 12px; }
.hc-tag { padding: 0 6px; border-radius: 2px; font-size: 11px; background: rgba(255, 255, 255, 0.08); color: var(--dim); }
.hc-tag.gold { background: rgba(242, 207, 122, 0.2); color: var(--gold-bright); }
.hc-tag.cold { background: rgba(120, 140, 160, 0.25); color: #b8c8d8; }
.hc-tag.pink { background: rgba(240, 138, 160, 0.25); color: #ffd0da; }
.hc-favor { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: #f0c8d0; }
.pips { display: inline-flex; gap: 2px; }
.pips i { width: 9px; height: 9px; transform: rotate(45deg); background: rgba(255, 255, 255, 0.12); }
.pips i.on { background: #f08aa0; box-shadow: 0 0 6px rgba(240, 138, 160, 0.6); }
.hc-memo { display: inline-flex; gap: 3px; margin-left: 4px; }
.hc-line { font-size: 12.5px; line-height: 1.55; color: #d8c8b0; }
.hc-line.dim { color: var(--dim); }
.hc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* 选秀：一排美人牌 */
.draft { position: fixed; inset: 0; z-index: 14; overflow: hidden; background: #000; }
.dr-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(30, 10, 14, 0.35), rgba(6, 3, 4, 0.85) 75%); }
.dr-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + var(--safe-b)); overflow-y: auto; }
.dr-wrap > * { flex-shrink: 0; }
.dr-title { margin: auto 0 0; font: 400 38px/1.2 var(--f-brush); color: #f6d8de; letter-spacing: 0.3em; text-shadow: 0 0 20px rgba(240, 138, 160, 0.4); }
.dr-sub { margin: 0; color: #e8d6b8; font-size: 14px; text-align: center; }
.dr-sub b { color: var(--gold-bright); }
.dr-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; perspective: 1100px; max-width: 1200px; }
.xcard { --xw: 180px; position: relative; width: var(--xw); height: calc(var(--xw) * 1.85); padding: 0; border: 0; background: transparent; }
.xc-flip { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); }
.xcard.open .xc-flip { transform: none; }
.xc-back, .xc-face { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.6); }
.xc-back { transform: rotateY(180deg); display: grid; place-items: center; background: radial-gradient(circle, #d06a7c 0 18%, transparent 19%), linear-gradient(160deg, #b0485a, #6e2235); border: 5px double #e8c070; }
.xc-back i { font: normal 38px var(--f-brush); color: #ffe8c0; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.ui-card-xiunv .xc-back { background: var(--ui-card-xiunv) center / 100% 100% no-repeat; border: 0; }
.ui-card-xiunv .xc-back i { display: none; }
.xc-face { display: flex; flex-direction: column; align-items: center; padding: 0 0 8px; background: linear-gradient(180deg, #f3e6cf, #d8c4a0); color: #2a1e15; border: 3px solid #b0485a; text-align: center; transition: box-shadow 0.25s, transform 0.25s var(--spring); }
.xcard:hover:not(:disabled) .xc-face { transform: translateY(-6px); box-shadow: 0 20px 34px rgba(0, 0, 0, 0.7), 0 0 20px rgba(240, 138, 160, 0.45); }
.xc-pic { position: relative; width: 100%; height: 61%; flex: 0 0 61%; overflow: hidden; background: linear-gradient(180deg, #4a2a30, #1e1012); }
.xc-pic .tachie-img { position: absolute; left: 50%; top: 0; width: 132%; height: auto; max-width: none; transform: translateX(-50%); object-fit: unset; filter: none; }
.xc-pic .tachie-sil { position: absolute; inset: 0; }
.xc-pic .tachie-sil .sil { position: absolute; left: 50%; top: 0; width: 170%; height: 170%; transform: translateX(-50%); }
.xc-pic .sil-name { display: none; }
.xc-name { margin-top: 6px; font: normal 19px var(--f-brush); letter-spacing: 0.1em; }
.xc-face small { font-size: 11px; color: #6a5440; }
.xc-face p { margin: 3px 8px 0; font-size: 11px; line-height: 1.45; color: #4a3828; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.xc-old { position: absolute; top: 6px; left: 6px; z-index: 2; padding: 0 6px; border-radius: 2px; background: #2f6b4f; color: #e8f6ee; font-size: 11px; }
.xc-seal { position: absolute; right: 8px; top: 46%; width: 44px; height: 44px; display: grid; place-items: center; border: 3px solid var(--zhu); border-radius: 4px; color: var(--zhu); font: normal 22px var(--f-brush); transform: rotate(-8deg); opacity: 0; background: rgba(255, 245, 230, 0.6); }
.xcard.kept .xc-seal { opacity: 1; }
.xcard.kept .xc-face { box-shadow: 0 0 0 3px var(--zhu-bright), 0 14px 30px rgba(0, 0, 0, 0.7), 0 0 26px rgba(215, 57, 47, 0.45); }
.dr-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: auto; }
.dr-n { color: #f0d8c0; font-size: 14px; letter-spacing: 0.1em; }
@media (max-width: 1199px) {
  .dr-row { display: grid; grid-template-columns: repeat(3, auto); }
}

/* 金册：晋封、立后 */
.cere { position: fixed; inset: 0; z-index: 15; overflow: hidden; background: #000; }
.cr-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(80, 50, 10, 0.25), rgba(6, 4, 2, 0.88) 75%); }
.cere.lihou .cr-shade { background: radial-gradient(ellipse at 50% 30%, rgba(242, 207, 122, 0.25), rgba(6, 4, 2, 0.85) 75%); }
.cr-por { position: absolute; left: 4%; bottom: 0; height: 82vh; aspect-ratio: 2 / 3; max-width: 46vw; opacity: 0; }
.cr-por .tachie-img, .cr-por .tachie-sil { position: absolute; inset: 0; }
.cr-por .tachie-img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.cr-book { position: absolute; right: 7%; top: 50%; width: min(520px, 52vw); margin-top: -190px; min-height: 380px; perspective: 1200px; }
.cr-cover { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(160deg, #f2d98a, #b8862a); border: 4px solid #fff0c0; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7); transform-origin: 0 50%; transition: transform 0.9s var(--out), opacity 0.9s; }
.cr-cover b { font: normal 54px var(--f-brush); color: #5a3a08; letter-spacing: 0.4em; }
.cr-book.open .cr-cover { transform: rotateY(-100deg); opacity: 0; }
.cr-page { position: relative; padding: 26px 30px 70px; min-height: 380px; border-radius: 6px; background: linear-gradient(160deg, #f6e7b8, #e2c98a); color: #3a2208; border: 3px solid #c99528; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7), inset 0 0 0 6px rgba(255, 255, 255, 0.25); }
.cr-page h3 { margin: 0 0 12px; text-align: center; font: normal 26px var(--f-brush); letter-spacing: 0.5em; color: #7a1712; }
.cr-text { margin: 0; font-size: 16.5px; line-height: 2; text-indent: 2em; }
.cr-seal { position: absolute; right: 26px; bottom: 18px; width: 72px; height: 72px; display: grid; place-items: center; padding: 4px; border: 4px solid var(--zhu); border-radius: 4px; color: var(--zhu); font: normal 17px/1.1 var(--f-brush); text-align: center; opacity: 0; background: rgba(255, 240, 220, 0.4); }
.cr-hint { position: absolute; left: 50%; bottom: calc(18px + var(--safe-b)); translate: -50% 0; color: var(--dim); font-size: 13px; letter-spacing: 0.3em; opacity: 0; transition: opacity 0.3s; }
.cr-hint.on { opacity: 1; animation: breathe 1.6s ease-in-out infinite; }

@media (max-width: 860px) {
  .nt-title { font-size: 32px; }
  .lv-tray { min-height: 0; padding: 30px 6% 34px; border-radius: 18px; }
  .lv-tray::before { inset: 10px; border-radius: 12px; }
  .lv-row { gap: 10px 8px; }
  .lvtag { width: 40px; height: 160px; }
  .lv-name { margin-top: 6px; font-size: 15px; }
  .memo { width: 5px; height: 5px; }
  .nt-tachie { height: 66vh; max-width: 100vw; transform: translateX(-50%); }
  .nt-box { padding: 24px 16px 14px; }
  .nt-text { font-size: 15.5px; }
  .nt-fade p { font-size: 20px; }
  .ncard { --nw: 210px; }
  .ncard.small { --nw: 150px; }
  .hp-banner { height: 96px; }
  .hp-body { grid-template-columns: 1fr; padding: 8px 14px 0; }
  .hp .row.end { padding: 0 14px; }
  .hp-list { grid-template-columns: 1fr; }
  .hc { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .hc-av { width: 52px; height: 52px; }
  .dr-title { font-size: 28px; }
  .dr-row { gap: 8px; }
  .xcard { --xw: min(calc((100vw - 48px) / 3), 112px); }
  .xc-face p { display: none; }
  .xc-name { font-size: 16px; }
  .xc-seal { width: 34px; height: 34px; font-size: 17px; }
  .cr-por { left: 50%; translate: -50% 0; height: 52vh; max-width: 80vw; }
  .cr-book { left: 16px; right: 16px; width: auto; top: 6vh; margin-top: 0; min-height: 0; }
  .cr-page { padding: 18px 18px 66px; min-height: 0; }
  .cr-cover { min-height: 0; }
  .cr-text { font-size: 15px; line-height: 1.9; }
}

/* ——善后：一刀牵出来的人，一人一张—— */
.fallout-modal .modal-box { background: linear-gradient(180deg, rgba(30, 16, 11, 0.98), rgba(14, 8, 6, 0.98)); border-color: #8a5a2a; }
.fo-lead { margin: 0 0 14px; font-size: 14.5px; line-height: 1.85; color: var(--dim); text-align: center; }
.fo-cause { margin-top: 14px; }
.modal-box .fo-cause h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(215, 57, 47, 0.35); color: #e8564a; letter-spacing: 0.12em; }
.fo-cause h4 small { font: 12px var(--f-serif); color: var(--faint); letter-spacing: 0.05em; }
.fo-item { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: rgba(239, 228, 204, 0.03); }
.fo-item.done { opacity: 0.82; border-style: dashed; }
.fo-who { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; }
.fo-who .av { grid-row: auto; }
.fo-name b { display: block; font: 18px var(--f-brush); color: var(--gold-bright); letter-spacing: 0.08em; }
.fo-name small { display: block; font-size: 12px; color: var(--faint); }
.fo-tie { padding: 2px 8px; border: 1px solid rgba(215, 57, 47, 0.55); border-radius: 2px; font-size: 12px; color: #f0a090; white-space: nowrap; }
.fo-why { margin: 8px 0 10px; font-size: 13.5px; line-height: 1.75; color: var(--text); }
.fo-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fo-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  border: 1px solid var(--gold-dim); border-radius: 3px; background: linear-gradient(180deg, #2a1d14, #18110c); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.fo-opt:hover:not(:disabled) { border-color: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5); }
.fo-opt:disabled { opacity: 0.55; cursor: default; }
.fo-opt.hard { border-color: rgba(215, 57, 47, 0.6); }
.fo-opt em { font: normal 15.5px var(--f-brush); color: var(--gold-bright); letter-spacing: 0.06em; }
.fo-opt small { font-size: 12.5px; line-height: 1.6; color: var(--dim); }
.fo-lean { position: absolute; right: 8px; top: -9px; padding: 0 6px; font: normal 11px/18px var(--f-serif); color: #fbeccb; background: var(--zhu-deep); border-radius: 2px; }
.fo-res { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text); }
.fo-res b { margin-right: 8px; padding: 1px 6px; font-weight: 400; font-size: 12px; color: var(--ink); background: var(--gold); border-radius: 2px; }
@media (max-width: 640px) {
  .fo-opts { grid-template-columns: 1fr; }
  .fo-who { grid-template-columns: 40px 1fr; }
  .fo-tie { grid-column: 2; justify-self: start; }
}
/* 入宫前只缓存压缩画卷；页面中的图片才会被解码。 */
.asset-loading { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: #0b0806; color: #ead9b6; text-align: center; }
.asset-loading > div { width: min(440px, 100%); }
.asset-loading .seal { margin: 0 auto 28px; }
.asset-loading h1 { font-size: 24px; font-weight: 400; letter-spacing: .2em; }
.asset-loading p { line-height: 1.8; font-size: 14px; opacity: .8; }
.asset-loading progress { width: 100%; height: 8px; margin: 20px 0 4px; accent-color: #b3261e; }
.asset-actions button { margin: 8px; padding: 10px 16px; color: inherit; border: 1px solid #806742; background: transparent; cursor: pointer; }