* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f3ee; color: #2c2a26; font-size: 14px; }
.topbar { background: #3a3530; color: #f0ece4; padding: 10px 18px; display: flex; align-items: center; gap: 16px; }
.topbar .brand { font-weight: 700; letter-spacing: 1px; }
/* 品牌名是可点的回首页链接：不能继承普通导航链接的小字号/浅色 */
.topbar a.brand { color: #f7f2e8; font-size: 15px; text-decoration: none; cursor: pointer; }
.topbar a.brand:hover { color: #fff; }
.topbar a, .topbar .logout { color: #d8cfbf; text-decoration: none; cursor: pointer; font-size: 13px; }
.topbar .spacer { flex: 1; }
.topbar .me { color: #c9bfa9; font-size: 13px; }
.wrap { max-width: 640px; margin: 22px auto; padding: 0 16px 60px; }
h2 { margin: 4px 0 16px; }
.card { background: #fff; border: 1px solid #e4ded2; border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
label { display: block; margin: 10px 0 4px; font-weight: 600; color: #4a453d; }
input[type=text], input[type=password], input[type=date], textarea, select {
  width: 100%; padding: 9px 10px; border: 1px solid #cfc7b6; border-radius: 7px; font-size: 14px; background: #fff; font-family: inherit;
}
textarea { min-height: 64px; resize: vertical; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 120px; }
.btn { background: #6b5b45; color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.btn:hover { background: #594b38; }
.btn.ghost { background: #efe9dc; color: #4a453d; }
.btn.sm { padding: 5px 12px; font-size: 13px; }
.meta { color: #8a8377; font-size: 13px; margin-bottom: 10px; }
.section { margin-top: 16px; }
.section .h { font-weight: 700; color: #3a3530; border-left: 4px solid #b89f74; padding-left: 8px; margin-bottom: 8px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { border: 1px solid #e4ded2; padding: 6px 8px; text-align: left; vertical-align: top; }
.tbl th { background: #f3efe6; }
.chip { display: inline-block; background: #efe9dc; border: 1px solid #ddd3bf; border-radius: 6px; padding: 4px 9px; margin: 3px 4px 3px 0; font-size: 13px; }
.chip.hook { background: #fff7e6; border-color: #ffd591; color: #ad6800; cursor: pointer; }
.chip.hook:hover { background: #ffe7ba; }
.chip-sep { color: #9a9488; font-size: 12px; padding: 0 4px; align-self: center; }
.warn { background: #fbf3e6; border-color: #e9d3a8; }
.sub { color: #8a8377; font-size: 13px; margin-top: 6px; }
.rel { color: #9a5b2e; font-weight: 600; }
.pts { margin: 0; padding-left: 18px; }
.pts li { margin: 4px 0; }
.seg { margin: 10px 0; }
.seg.tip { background: #f3f6f1; border-radius: 8px; padding: 8px 12px; }
.result { background: #faf7f0; }
.ziwarn { display: none; background: #fbe9e9; color: #b23b3b; border: 1px solid #eecaca; padding: 10px 14px; border-radius: 8px; margin: 12px 0; }
.feedback-box { background: #f7f4ec; border: 1px solid #e4ded2; border-radius: 8px; padding: 12px 14px; margin-top: 10px; }
.cmt { border-top: 1px solid #ece6da; padding: 8px 0; }
.cmt .who { font-weight: 600; font-size: 13px; }
.cmt.admin .who { color: #9a5b2e; }
.cmt .time { color: #a59c8c; font-size: 12px; margin-left: 8px; }
.cmt .ai { background: #e8eef7; color: #355; font-size: 11px; padding: 1px 6px; border-radius: 4px; margin-left: 6px; }
.err { color: #b23b3b; font-size: 13px; margin-top: 8px; min-height: 16px; }
/* 同一个人话说「成功/中性提示」的场景（如「验证码已发送」）：沿用 .err 的位置，但换成中性绿，别再像报错 */
.err.ok { color: #2f7a4f; }
.center { text-align: center; margin-top: 40px; }
.stat { display: flex; gap: 14px; flex-wrap: wrap; }
.stat .box { flex: 1; min-width: 120px; background: #faf7f0; border: 1px solid #e4ded2; border-radius: 8px; padding: 12px; text-align: center; }
.stat .num { font-size: 24px; font-weight: 700; color: #6b5b45; }
.stat .lab { color: #8a8377; font-size: 12px; }
.case-item { cursor: pointer; }
.case-item:hover { border-color: #c9b48a; }
.tag { display: inline-block; background: #eceae1; border-radius: 4px; padding: 1px 7px; font-size: 12px; margin-right: 4px; }

/* 进度条 / 加载提示 */
.progress { height: 8px; background: #ece6da; border-radius: 6px; overflow: hidden; margin-top: 14px; }
.progress .bar { height: 100%; width: 40%; background: linear-gradient(90deg,#b89f74,#6b5b45); border-radius: 6px; animation: indet 1.1s ease-in-out infinite; }
@keyframes indet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.loading-note { color: #8a8377; font-size: 13px; margin-top: 8px; }

/* 随机抽牌转盘 */
.wheel { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.slot { flex: 1; min-width: 110px; border: 1px solid #ddd3bf; border-radius: 10px; padding: 12px 8px; text-align: center; background: #faf7f0; }
.slot .role { font-size: 12px; color: #8a8377; margin-bottom: 6px; }
.slot .gz { font-size: 16px; font-weight: 700; color: #3a3530; min-height: 24px; line-height: 1.35; }
.slot .na { font-size: 12px; color: #9a5b2e; margin-top: 2px; }
.slot.reveal .gz { animation: pop .5s ease; color: #6b5b45; }
/* 滚轮转动中：轻微虚化+缩放，配合符号高速翻动，像吃角子老虎机转轮 */
.slot.drawing { background: #f3ead8; border-color: #c9b48a; }
.slot.drawing .gz { animation: wheelblur .16s linear infinite; color: #b89f74; }
@keyframes pop { 0% { transform: scale(.6); opacity:.3; } 100% { transform: scale(1); opacity:1; } }
@keyframes wheelblur { 0% { filter: blur(0); transform: translateY(0) scale(1); } 50% { filter: blur(.7px); transform: translateY(-1px) scale(1.06); } 100% { filter: blur(0); transform: translateY(0) scale(1); } }
.timing { margin-top: 10px; font-size: 13px; color: #4a453d; }

/* 实像库标签页 / 徽标 / 弹窗 */
.badge { display: inline-block; border-radius: 4px; padding: 1px 7px; font-size: 11px; margin-left: 6px; vertical-align: middle; }
.badge.seed { background: #e8eef7; color: #355; }
.badge.ai { background: #f3e6f7; color: #7a3a8a; }
.badge.user { background: #eaf3e6; color: #3a7a3a; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.toolbar input, .toolbar select { width: auto; flex: 0 1 auto; }
.pager { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.btn.danger { background: #b23b3b; }
.btn.danger:hover { background: #983131; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: none; align-items: center; justify-content: center; z-index: 50; }
.modal.show { display: flex; }
.modal-box { background: #fff; border-radius: 10px; padding: 18px 20px; width: min(620px, 92vw); max-height: 86vh; overflow: auto; }
.modal-box label { margin-top: 10px; }
.modal-actions { margin-top: 14px; display: flex; gap: 10px; justify-content: flex-end; }

/* 问事页：左任务 / 右聊天 分栏（参考 WorkBuddy） */
.layout { display: flex; gap: 18px; align-items: flex-start; }
.col-left { flex: 1 1 380px; min-width: 0; }
.col-right { flex: 1 1 380px; min-width: 0; }
.chat-panel { background: #fff; border: 1px solid #e4ded2; border-radius: 10px; padding: 14px 16px; position: sticky; top: 14px; display: flex; flex-direction: column; max-height: 84vh; }
.chat-panel .ph { font-weight: 700; color: #3a3530; border-left: 4px solid #b89f74; padding-left: 8px; margin-bottom: 8px; font-size: 15px; }
.chat-scroll { flex: 1; overflow: auto; max-height: 52vh; border: 1px solid #e3ddd0; border-radius: 8px; padding: 8px 10px; background: #fbf9f4; margin-bottom: 8px; }
.chat-empty { color: #8a8377; font-size: 13px; padding: 10px; }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.suggest .chip { cursor: pointer; }
.suggest .chip:hover { background: #e7dcc4; }
.chat-input { display: flex; gap: 8px; align-items: flex-end; }
.chat-input textarea { flex: 1; min-height: 44px; }
.chat-err { color: #b23b3b; font-size: 12px; min-height: 14px; margin-top: 4px; }

/* 聊天消息气泡（问事页 / 我的案例共用） */
.msg { margin: 6px 0; }
.msg .who { font-size: 11px; color: #9a9488; margin-right: 6px; }
.msg.me { text-align: right; }
.msg.me .who { color: #b06a3a; }
.msg.me div { display: inline-block; text-align: left; background: #fff3e6; border: 1px solid #f0d9bf; border-radius: 8px; padding: 6px 9px; max-width: 90%; white-space: pre-wrap; line-height: 1.6; }
.msg.ai div { display: inline-block; background: #eef4ea; border: 1px solid #cfe0c4; border-radius: 8px; padding: 6px 9px; max-width: 90%; white-space: pre-wrap; line-height: 1.6; }
.chat-note { margin: 6px 2px; padding: 7px 11px; border-radius: 8px; font-size: 13px; line-height: 1.6; background: #fff4e5; color: #a05a00; border: 1px solid #f3d9b5; white-space: pre-wrap; }
.chat-note:last-child { background: #eef2fb; color: #5a6aa0; border-color: #cdd6ee; }
/* 每轮会话标签（敏感话题红色高亮） */
.ctag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; margin: 2px 4px 0 0; background: #eef4ea; color: #5a6b54; border: 1px solid #cfe0c4; }
/* 游客：注册引导 / 续聊入口 */
.reg-prompt { background: #fdeaf1 !important; color: #a23b6b !important; border-color: #f3c6d8 !important; }
.reg-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.reg-slogan { margin-top: 6px; font-size: 12px; letter-spacing: 1px; opacity: .85; }
.ctag.danger { background: #ffe3e3; color: #c0392b; border-color: #f0b4b4; font-weight: 600; }
.tags { margin-top: 6px; }

@media (max-width: 780px) {
  .layout { flex-direction: column; }
  .col-right { position: static; }
  .chat-panel { max-height: none; }
  .chat-scroll { max-height: 48vh; }
}

/* ========== 二次元风格背景（仅登录/问事页：<body class="anime-bg">） ========== */
body.anime-bg { background: transparent; min-height: 100vh; }

/* 天空渐变 + 光晕 + 云朵 + 星点（固定底层） */
body.anime-bg::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(165deg, #bfe3ff 0%, #d8c6fb 46%, #fcd3e8 100%),
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.55), transparent 26%),
    radial-gradient(circle at 85% 9%, rgba(255,255,255,.5), transparent 22%),
    radial-gradient(circle at 72% 90%, rgba(255,205,235,.5), transparent 42%),
    radial-gradient(ellipse 110px 38px at 16% 16%, rgba(255,255,255,.6), transparent 72%),
    radial-gradient(ellipse 90px 30px at 78% 24%, rgba(255,255,255,.5), transparent 72%),
    radial-gradient(ellipse 130px 42px at 50% 68%, rgba(255,255,255,.34), transparent 74%),
    radial-gradient(circle 1.6px at 8% 18%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(circle 1.3px at 28% 38%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(circle 1.5px at 62% 14%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(circle 1.2px at 44% 52%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(circle 1.6px at 88% 56%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(circle 1.2px at 72% 78%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(circle 1.4px at 20% 82%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(circle 1.2px at 92% 88%, rgba(255,255,255,.6), transparent 60%);
  background-repeat: no-repeat;
}

/* 飘落花瓣（固定层，缓慢下落循环） */
body.anime-bg::after {
  content: "";
  position: fixed; inset: -20% 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiB2aWV3Qm94PSIwIDAgMjIwIDIyMCI+CiAgPGcgZmlsbD0icmdiKDI1NSwxOTYsMjIyKSIgZmlsbC1vcGFjaXR5PSIwLjkyIj4KICAgIDxlbGxpcHNlIGN4PSI0MCIgY3k9IjUwIiByeD0iOCIgcnk9IjMuNCIgdHJhbnNmb3JtPSJyb3RhdGUoMjUgNDAgNTApIi8+CiAgICA8ZWxsaXBzZSBjeD0iMTUwIiBjeT0iMzAiIHJ4PSI3IiByeT0iMyIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1IDE1MCAzMCkiIGZpbGwtb3BhY2l0eT0iMC43MiIvPgogICAgPGVsbGlwc2UgY3g9Ijk1IiBjeT0iMTIwIiByeD0iOSIgcnk9IjMuNiIgdHJhbnNmb3JtPSJyb3RhdGUoNDAgOTUgMTIwKSIvPgogICAgPGVsbGlwc2UgY3g9IjE4MCIgY3k9IjE1MCIgcng9IjYuNSIgcnk9IjIuOCIgdHJhbnNmb3JtPSJyb3RhdGUoMTAgMTgwIDE1MCkiIGZpbGwtb3BhY2l0eT0iMC44MiIvPgogICAgPGVsbGlwc2UgY3g9IjYwIiBjeT0iMTkwIiByeD0iNy41IiByeT0iMy4yIiB0cmFuc2Zvcm09InJvdGF0ZSgtMzAgNjAgMTkwKSIgZmlsbC1vcGFjaXR5PSIwLjY4Ii8+CiAgPC9nPgo8L3N2Zz4=");
  background-size: 220px 220px;
  background-repeat: repeat;
  opacity: .85;
  animation: petalfall 24s linear infinite;
}
@keyframes petalfall {
  from { background-position: 0 -220px; }
  to   { background-position: 0 100vh; }
}

/* 卡片在二次元背景上「浮起」 */
body.anime-bg .card,
body.anime-bg .chat-panel {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 10px 28px rgba(126,92,165,.20);
}
body.anime-bg .topbar { background: rgba(58,53,48,.92); }
body.anime-bg h2 { color: #4a3f63; text-shadow: 0 1px 2px rgba(255,255,255,.6); }

/* ========== 语音播报条（播音员头像 + 控制） ========== */
.voicebar { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.72); border: 1px solid rgba(184,159,116,.55); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.v-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #b89f74; background: #eee; flex: 0 0 auto; transition: box-shadow .3s; }
.v-avatar.playing { box-shadow: 0 0 0 4px rgba(184,159,116,.35), 0 0 16px rgba(184,159,116,.6); animation: avpulse 1.4s ease-in-out infinite; }
@keyframes avpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.v-mid { flex: 1; min-width: 0; }
.v-name { font-weight: 700; color: #4a3f63; font-size: 14px; }
.v-select { width: auto; margin-top: 4px; font-size: 13px; }
.v-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.v-btns .btn.sm:disabled { opacity: .5; cursor: default; }
.v-btns .btn.sm.v-auto.off { background: #efe9dc; color: #4a453d; }
.v-spk { border: 1px solid #cfc7b6; background: #fff; border-radius: 50%; width: 26px; height: 26px; font-size: 13px; cursor: pointer; margin-left: 6px; vertical-align: middle; line-height: 1; flex: 0 0 auto; }
.v-spk:hover { background: #f3ead8; }

/* 语速滑块（紧挨播音员下拉框） */
.v-speed { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.v-speed .vs-cap { font-size: 12px; color: #7a6f5d; flex: 0 0 auto; }
.v-speed .vs-range { width: 96px; max-width: 34vw; accent-color: #b89f74; cursor: pointer; flex: 0 0 auto; }
.v-speed .vs-val { font-size: 12px; color: #4a3f63; font-weight: 700; min-width: 34px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
  .voicebar { flex-wrap: wrap; }
  .v-btns { width: 100%; justify-content: flex-end; }
}

/* ===== AI 批改作业面板 ===== */
.grading { margin: 12px 0 4px; border: 1px dashed #d8cfbd; border-radius: 10px; padding: 10px 12px; background: #fdfbf6; }
.grading .g-title { font-size: 13px; font-weight: 700; color: #5a5147; margin-bottom: 8px; }
.grading .g-title span { display: block; font-size: 11px; font-weight: 400; color: #9a9488; margin-top: 3px; line-height: 1.5; }
.grading .g-rates { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.grading .g-rate { font-size: 12px; padding: 5px 11px; border: 1px solid #e0d8c8; border-radius: 999px; cursor: pointer; background: #fff; color: #6b6257; user-select: none; }
.grading .g-rate:hover { background: #f6efe1; }
.grading .g-rate.on { background: #b89f74; border-color: #b89f74; color: #fff; }
.grading .g-text { width: 100%; min-height: 56px; font-size: 13px; line-height: 1.6; }
.grading .g-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.grading .g-status { font-size: 12px; color: #8a8275; margin-top: 6px; }

/* 全站页脚：给访客的信 + 免责说明 */
.sitefoot { max-width: 980px; margin: 26px auto 30px; padding: 12px 16px; text-align: center; font-size: 12px; color: #9a9488; line-height: 1.7; border-top: 1px dashed #e3ddd0; }
.sitefoot a { color: #b06a3a; text-decoration: none; }
.sitefoot a:hover { text-decoration: underline; }
.sitefoot .sep { margin: 0 8px; color: #cfc7b8; }
.sitefoot .police-icon { height: 14px; width: auto; vertical-align: -2px; margin-right: 4px; }

/* AI 生成标记 / 人工校验状态 */
.ai-badge { display: inline-block; font-size: 11px; padding: 1px 9px; border-radius: 999px; background: #eef2f7; color: #5b6b80; border: 1px solid #d3deec; margin-left: 6px; vertical-align: middle; }
.review-box { margin-top: 12px; padding: 10px 12px; background: #fbf7ee; border: 1px solid #ecdfc6; border-radius: 10px; line-height: 1.7; }
.review-box .rb-t { font-weight: 600; color: #8a6a3a; margin-bottom: 4px; }
.review-box .rb-status { font-size: 12px; color: #9a9488; }
.review-box textarea { width: 100%; min-height: 60px; font-size: 13px; line-height: 1.6; margin-top: 6px; }
.regen-banner { margin: 10px 0 4px; padding: 10px 14px; background: #eef4ea; border: 1px solid #cfe0c4; border-radius: 10px; font-size: 13px; color: #4d5b46; line-height: 1.7; }
.regen-banner b { color: #3a3530; }
.cmt.ref { border-left: 3px solid #b89f74; }
.cmt.ref .who::after { content: ' · 已纳入AI学习'; color: #b06a3a; font-size: 11px; }

/* 问事页：直给风格提醒 */
.direct-note { margin-top: 8px; font-size: 12px; line-height: 1.6; color: #8a6a3a; background: #fbf7ee; border: 1px solid #ecdfc6; border-radius: 8px; padding: 7px 10px; }
.direct-note b { color: #b06a3a; }

/* 问事页：AI 生成 标记行 */
.ai-gen-note { background: #eef2f7; border: 1px solid #d3deec; color: #5b6b80; }

/* ===== 校准弹窗：发牌员带牌互动 ===== */
.modal.show .modal-box.calib-box { animation: modalIn .38s cubic-bezier(.2,.9,.3,1.25) both; }
.modal.closing .modal-box.calib-box { animation: modalOut .26s ease both; }
@keyframes modalIn { 0% { transform: translateY(18px) scale(.94); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes modalOut { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(12px) scale(.96); opacity: 0; } }

.calib-box { text-align: left; }
.calib-dealer { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.calib-dealer-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #d8c8a4; box-shadow: 0 2px 8px rgba(0,0,0,.18); animation: floaty 3.4s ease-in-out infinite; background: #efe7d6; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.calib-dealer-talk { font-size: 14px; color: #6b5b45; background: linear-gradient(180deg,#f7f1e6,#f3ecdc); border: 1px solid #e6dcc6; border-radius: 12px; padding: 8px 12px; flex: 1; position: relative; line-height: 1.5; }
.calib-dealer-talk:after { content: ''; position: absolute; left: -7px; top: 16px; border: 7px solid transparent; border-right-color: #f3ecdc; }

.calib-step { font-size: 12px; color: #a89e8c; margin-bottom: 8px; letter-spacing: .08em; }
.flip-card { perspective: 900px; margin: 0 0 12px; }
.flip-inner { position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,.8,.3,1); min-height: 98px; }
.flip-inner.flipped { transform: rotateY(180deg); }
.flip-back, .flip-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.flip-back { background: linear-gradient(135deg,#5b4a8a,#3a2e5c); color: #e8defb; box-shadow: inset 0 0 0 3px rgba(255,255,255,.12), 0 6px 18px rgba(60,40,90,.35); cursor: pointer; flex-direction: column; }
.flip-back-art { font-size: 42px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); animation: cardfloat 3s ease-in-out infinite; }
@keyframes cardfloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
.flip-back-tip { position: absolute; bottom: 10px; font-size: 12px; opacity: .82; }
.flip-front { transform: rotateY(180deg); background: linear-gradient(180deg,#fffdf8,#f6efe0); border: 1px solid #e7dcc4; box-shadow: 0 6px 18px rgba(90,70,40,.18); padding: 14px 16px; text-align: left; align-items: flex-start; }
#calibModalStatement { line-height: 1.7; font-size: 15px; color: #3a3328; }
#calibModalStatement .role-tag { display: inline-block; background: #f3e9ff; color: #6a3ea1; border-radius: 6px; padding: 1px 8px; font-size: 13px; margin-right: 6px; }

.calib-ask { font-size: 13px; color: #8a8377; margin: 2px 0 10px; text-align: center; }
.calib-btns { display: flex; gap: 10px; }
.calib-pick { flex: 1; border: none; border-radius: 12px; padding: 11px 0; font-size: 15px; font-weight: 600; cursor: pointer; color: #fff; transition: transform .12s, box-shadow .2s, filter .2s; box-shadow: 0 4px 12px rgba(0,0,0,.15); font-family: inherit; }
.calib-pick .cp-ic { font-size: 17px; margin-right: 4px; }
.cp-hit { background: linear-gradient(135deg,#e0795a,#c85a3c); }
.cp-miss { background: linear-gradient(135deg,#7a6f9c,#5b4a8a); }
.calib-pick:hover { transform: translateY(-2px); filter: brightness(1.05); }
.calib-pick:active { transform: scale(.95); }
.calib-pick.picked { animation: poppick .3s ease; }
@keyframes poppick { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

.calib-hint { display: none; font-size: 12px; color: #c0392b; margin: 8px 0 2px; }
.calib-reason-wrap { max-height: 0; overflow: hidden; transition: max-height .3s ease, opacity .3s ease; opacity: 0; }
.calib-reason-wrap.open { max-height: 170px; opacity: 1; margin-top: 8px; }
.calib-reason-label { font-size: 13px; color: #6b5b45; display: block; margin-bottom: 4px; }
.calib-reason { width: 100%; height: 64px; resize: none; box-sizing: border-box; border: 1px solid #ddd2bb; border-radius: 10px; padding: 9px; font-family: inherit; font-size: 14px; }
.calib-actions { margin-top: 14px; }

/* ===== 发牌员「桌宠」大图角色：桌面端填充两侧空白并展示动作 ===== */
.fp-actor-wrap { position: fixed; z-index: 55; pointer-events: none; }
.fp-actor-wrap.fp-interactive { pointer-events: auto; cursor: pointer; }
.fp-img { display: block; width: auto; filter: drop-shadow(0 14px 26px rgba(0,0,0,.35)); }

/* 气泡 */
.fp-bubble { position: absolute; background: #fff; color: #3a3530; border-radius: 14px; padding: 9px 13px; font-size: 14px; line-height: 1.5; box-shadow: 0 6px 18px rgba(0,0,0,.22); opacity: 0; transform: translateY(8px) scale(.92); transition: opacity .25s, transform .25s; max-width: 230px; }
.fp-bubble:after { content: ''; position: absolute; border: 8px solid transparent; }

/* 桌面端：左右两侧大图（右侧为虚影，不互动） */
@media (min-width: 1100px) {
  .fp-left  { left: 10px; bottom: 0; }
  .fp-right { right: 10px; bottom: 0; opacity: .16; transform: scaleX(-1); }
  .fp-left .fp-img, .fp-right .fp-img {
    height: 84vh; width: auto;
    max-width: calc((100vw - 680px) / 2 - 14px);
    object-fit: contain;
  }
  .fp-left .fp-bubble { left: 14px; top: 5vh; }
  .fp-left .fp-bubble:after { left: 30px; bottom: -14px; border-top-color: #fff; }
  .fp-actor-wrap.fp-left  { animation: fpBob 3.6s ease-in-out infinite; }
  .fp-actor-wrap.fp-right { animation: fpBob 3.6s ease-in-out infinite; }
}

/* 窄屏：右下浮动小宠（桌面大图隐藏） */
.fp-mobile { right: 8px; bottom: 10px; z-index: 60; }
.fp-mobile .fp-img { height: 34vh; max-height: 240px; }
.fp-mobile .fp-bubble { right: 8px; bottom: 35vh; max-width: 180px; font-size: 13px; }
.fp-mobile .fp-bubble:after { right: 24px; bottom: -14px; border-top-color: #fff; }
.fp-actor-wrap.fp-mobile { animation: fpBob 3.4s ease-in-out infinite; }

/* 显隐切换：宽屏只显示侧栏，窄屏只显示浮动宠 */
@media (min-width: 1100px) { .fp-mobile { display: none; } }
@media (max-width: 1099px) { .fp-left, .fp-right { display: none; } }

/* 动作：发牌 / 开心 / 思考（作用于整组角色容器，与 idle 互斥） */
.fp-actor-wrap.fp-deal   { animation: fpDeal .6s ease !important; }
.fp-actor-wrap.fp-happy  { animation: fpHappy .55s ease !important; }
.fp-actor-wrap.fp-think  { animation: fpThink .6s ease !important; }
@keyframes fpBob   { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1.2deg); } }
@keyframes fpDeal  { 0% { transform: rotate(0); } 20% { transform: rotate(-9deg) scale(1.05); } 45% { transform: rotate(9deg) scale(1.05); } 70% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
@keyframes fpHappy { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-20px) scale(1.06); } }
@keyframes fpThink { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 65% { transform: rotate(5deg); } }

/* ===== 校准弹窗：改为「大角色 + 对话」衍生样式 ===== */
.calib-stage { display: flex; gap: 14px; align-items: flex-start; }
.calib-dealer-big { flex: 0 0 42%; max-width: 210px; position: relative; }
.calib-dealer-big img { width: 100%; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.3); display: block; animation: fpBob 3.6s ease-in-out infinite; }
.calib-dealer-big.cd-nod   img { animation: fpHappy .5s ease; }
.calib-dealer-big.cd-think img { animation: fpThink .6s ease; }
.calib-dealer-big.cd-deal  img { animation: fpDeal .6s ease; }
.calib-dealer-talk { font-size: 13px; color: #6b5b45; background: linear-gradient(180deg,#f7f1e6,#f3ecdc); border: 1px solid #e6dcc6; border-radius: 12px; padding: 7px 11px; margin-top: 8px; line-height: 1.5; }
.calib-panel { flex: 1; min-width: 0; }
@media (max-width: 520px) {
  .calib-stage { flex-direction: column; }
  .calib-dealer-big { flex: none; max-width: 170px; margin: 0 auto; }
}