/* 基础布局（皮肤变量在 themes.css） */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--txt); font-family: var(--font); height: 100vh; height: 100dvh; overflow: hidden; transition: background .8s, color .8s; }
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.hidden { display: none !important; }

/* 顶栏 */
#topbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: var(--bg2); border-bottom: var(--border-main); z-index: 10; }
.brand { font-size: 18px; font-weight: bold; color: var(--primary); letter-spacing: 2px; font-family: var(--font-title); }
.player { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.p-title { color: var(--muted); }
.p-level { background: var(--accent); color: var(--accent-txt); padding: 2px 10px; border-radius: 10px; font-weight: bold; }
.p-points b { color: var(--gold); font-size: 16px; }
.p-mode { font-size: 12px; color: var(--muted); border: 1px dashed var(--border); padding: 2px 8px; border-radius: 8px; }
.p-mode.live { color: var(--green); border-color: var(--green); }
#themeSel { background: var(--bg3); color: var(--txt); border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; font-size: 12px; }
.btn-ghost { background: none; border: 1px solid var(--border); color: var(--muted); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; }

/* 地图视图（横版） */
#mapView { flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column; }
#chapterNav { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px; background: var(--bg2); border-bottom: 1px solid var(--border); z-index: 5; }
#chapterNav button { background: var(--bg3); color: var(--txt); border: 1px solid var(--border); border-radius: 8px; width: 36px; height: 30px; cursor: pointer; font-size: 14px; }
#chapterNav .btn-ghost { width: auto !important; height: auto; flex-shrink: 0; }
#chapterName { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
#chapterNav { gap: 10px; }
#chapterNav button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
#chapterNav button:disabled { opacity: .3; cursor: default; }
#chapterName { font-size: 16px; font-weight: bold; color: var(--primary); font-family: var(--font-title); letter-spacing: 2px; min-width: 260px; text-align: center; }
#mapScroll { flex: 1; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; display: flex; align-items: center; }
#mapSvg { display: block; margin: 0 auto; }

/* 诊断之门 */
#diagGate { position: fixed; inset: 0; z-index: 28; background: radial-gradient(ellipse at 50% 30%, #232a48 0%, #141830 55%, #0d1020 100%); display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; }
#diagGateInner { text-align: center; background: var(--bg2); border: 2px solid var(--primary); border-radius: var(--bubble-radius); padding: 36px 48px; box-shadow: 0 0 40px rgba(0,0,0,.5); animation: gatePulse 2s ease-in-out infinite; }
@keyframes gatePulse { 0%,100% { box-shadow: 0 0 24px rgba(0,0,0,.5); } 50% { box-shadow: 0 0 46px var(--primary); } }
#diagGateTitle { font-size: 26px; font-weight: bold; color: var(--primary); font-family: var(--font-title); letter-spacing: 3px; margin-bottom: 14px; }
#diagGateDesc { font-size: 14px; color: var(--muted); line-height: 1.8; margin-bottom: 22px; }
#btnDiagStart { font-size: 18px; font-weight: bold; padding: 12px 44px; background: var(--gold); color: #3a2f05; border: none; border-radius: 10px; cursor: pointer; }
#btnDiagStart:hover { filter: brightness(1.1); }
#diagSkip { margin-top: 14px; font-size: 12px; color: var(--muted); text-decoration: underline; cursor: pointer; }

/* 诊断报告卡 */
.diag-report { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-top: 8px; min-width: 260px; }
.diag-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 13px; }
.diag-row .mname { width: 70px; }
.diag-bar { flex: 1; height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.diag-bar i { display: block; height: 100%; }
.diag-row .mres { width: 56px; text-align: right; font-weight: bold; }

/* 地图节点通用 */
.lvl-node { cursor: default; }
.lvl-node.playable { cursor: pointer; }
.lvl-node.playable:hover .lvl-circle { filter: brightness(1.25); }
.lvl-label { font-size: 12px; fill: var(--txt); text-anchor: middle; font-family: var(--font); }
.lvl-code { font-size: 10px; fill: var(--muted); text-anchor: middle; }
.chapter-banner { font-size: 16px; font-weight: bold; fill: var(--primary); font-family: var(--font-title); }
.pulse { animation: pulse 1.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* 关卡对话视图 */
#stageView { position: fixed; top: 0; left: 0; right: 0; bottom: 22px; z-index: 30; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
#stageView.hidden { display: none !important; }
#stageBanner { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--bg2); border-bottom: var(--border-main); }
#btnBack { background: var(--bg3); color: var(--txt); border: 1px solid var(--border); padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; }
#stageInfo { flex: 1; }
#stageChapter { font-size: 12px; color: var(--muted); }
#stageTitle { font-size: 17px; font-weight: bold; font-family: var(--font-title); color: var(--primary); }
#stageMeta { font-size: 13px; color: var(--gold); }
#bossWarn { text-align: center; padding: 8px; background: repeating-linear-gradient(45deg, #7f1d1d, #7f1d1d 16px, #991b1b 16px, #991b1b 32px); color: #fff; font-weight: bold; letter-spacing: 4px; animation: bossFlash 1s step-start infinite; }
@keyframes bossFlash { 50% { filter: brightness(1.5); } }
#phaseBar { padding: 8px 16px; background: var(--bg2); border-bottom: 1px solid var(--border); }
#phaseBadge { font-size: 12px; background: var(--bg3); border: 1px solid var(--border); padding: 3px 12px; border-radius: 10px; color: var(--accent); }
#messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 10px; max-width: 82%; }
.msg.npc { align-self: flex-start; }
.msg.student { align-self: flex-end; flex-direction: row-reverse; }
.avatar { width: 40px; height: 40px; border-radius: var(--avatar-radius); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; background: var(--bg3); border: var(--avatar-border); }
.bubble { background: var(--bubble-npc-bg); border: var(--bubble-border); border-radius: var(--bubble-radius); padding: 10px 14px; font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.msg.student .bubble { background: var(--bubble-stu-bg); }
.npc-name { font-size: 11px; color: var(--accent); margin-bottom: 3px; }
#composer { display: flex; gap: 10px; padding: 10px 16px; background: var(--bg2); border-top: var(--border-main); align-items: flex-end; }
#inputCol { flex: 1; display: flex; flex-direction: column; gap: 6px; }
#input { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; color: var(--txt); padding: 10px 12px; font-size: 14px; font-family: inherit; resize: none; }
#input:focus { outline: none; border-color: var(--accent); }
#toolbar { display: flex; flex-direction: row; gap: 6px; flex-wrap: wrap; }
#toolbar button { width: 38px; height: 38px; font-size: 17px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; color: var(--txt); }
#toolbar button:hover { border-color: var(--accent); }
#toolbar button.recording { background: #7f1d1d; border-color: #f87171; animation: bossFlash 1s step-start infinite; }
#toolbar button.on { border-color: var(--green); color: var(--green); }
#btnSend { padding: 0 24px; height: 40px; background: var(--accent); color: var(--accent-txt); border: none; border-radius: 10px; font-size: 15px; font-weight: bold; cursor: pointer; }
#btnSend:disabled { opacity: .5; }

/* 符号面板 */
#symPanel { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px; background: var(--bg2); border-top: 1px solid var(--border); }
#symPanel.hidden { display: none; }
#symPanel button { min-width: 36px; height: 34px; font-size: 15px; background: var(--bg3); color: var(--txt); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
#symPanel button:hover { border-color: var(--gold); color: var(--gold); }

/* 图片预览 */
#imgPreview { position: relative; align-self: flex-start; }
#imgThumb { max-height: 90px; max-width: 160px; border-radius: 8px; border: 1px solid var(--border); }
#imgDel { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; background: #7f1d1d; color: #fff; border-radius: 50%; font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.msg .bubble img { max-width: 220px; border-radius: 8px; display: block; margin-bottom: 6px; }

/* 设置弹窗字段 */
.modal-box .fld { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.modal-box select { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--txt); padding: 9px; font-size: 13px; }

/* BOSS 进场震动 */
.shake { animation: shake .5s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

/* 晋升过场 */
#promoteOverlay { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; align-items: center; justify-content: center; animation: promoteBg 3.2s forwards; }
@keyframes promoteBg { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
#promoteInner { text-align: center; animation: promoteTxt 3.2s forwards; }
@keyframes promoteTxt { 0% { transform: scale(.6); opacity: 0; } 25% { transform: scale(1.05); opacity: 1; } 40% { transform: scale(1); } 90% { opacity: 1; } 100% { opacity: 0; } }
#promoteBig { font-size: 52px; font-weight: bold; color: var(--gold); font-family: var(--font-title); text-shadow: 0 0 30px currentColor; letter-spacing: 8px; }
#promoteSub { font-size: 18px; color: #fff; margin-top: 18px; letter-spacing: 3px; }

/* 弹窗 & toast & fx */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-box { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 22px; width: 420px; }
.modal-box h3 { color: var(--primary); margin-bottom: 10px; }
.modal-box .muted { font-size: 12px; color: var(--muted); margin-bottom: 14px; line-height: 1.6; }
.modal-box input { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--txt); padding: 10px; font-size: 14px; margin-bottom: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.btn-primary { background: var(--gold); color: #3a2f05; border: none; padding: 8px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; }
#toast { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #3a2f05; padding: 12px 28px; border-radius: 12px; font-weight: bold; font-size: 16px; z-index: 60; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 55; }

/* ---------- 移动端适配（安卓手机/平板） ---------- */
@media (max-width: 768px) {
  #topbar { padding: 6px 10px; flex-wrap: wrap; gap: 6px; }
  .brand { font-size: 15px; }
  .player { font-size: 12px; gap: 8px; }
  #themeSel { max-width: 110px; }
  #chapterName { min-width: 0; font-size: 14px; flex: 1; }
  #stageBanner { padding: 8px 10px; gap: 8px; }
  #stageTitle { font-size: 15px; }
  #btnBack { padding: 6px 8px; font-size: 12px; }
  #messages { padding: 12px 10px; gap: 10px; }
  .msg { max-width: 94%; }
  .avatar { width: 32px; height: 32px; font-size: 17px; }
  .bubble { font-size: 14px; padding: 8px 10px; }
  #composer { padding: 8px; gap: 6px; }
  #toolbar { flex-direction: row; }
  #toolbar button { width: 34px; height: 34px; font-size: 15px; }
  #inputCol { min-width: 0; }
  #btnSend { padding: 0 14px; height: 38px; font-size: 14px; }
  #diagGateInner { padding: 24px 20px; margin: 0 16px; }
  #diagGateTitle { font-size: 20px; }
  .modal-box { width: 92vw; }
  #symPanel { padding: 6px 8px; gap: 4px; }
  #symPanel button { min-width: 32px; height: 32px; font-size: 14px; }
}

/* ---------- 移动端底部防遮挡修复 ---------- */
#composer { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 768px) {
  #composer { flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  #toolbar { flex-direction: row; order: 1; }
  #inputCol { order: 2; }
  #btnSend { order: 3; width: 100%; height: 42px; }
  #symPanel { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 手机竖屏顶部适配（修复 topbar 换行与大厅重叠） ---------- */
@media (max-width: 640px) {
  /* 顶部条：纵向两行——品牌在上、玩家信息在下，避免挤压重叠 */
  #topbar { flex-direction: column; align-items: stretch; padding: 6px 10px; gap: 3px; }
  .brand { font-size: 13px; letter-spacing: 1px; white-space: nowrap; align-self: flex-start; }
  .player { justify-content: flex-start; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; }
  .p-title { white-space: nowrap; }
  .p-level { padding: 1px 7px; font-size: 11px; }
  .p-points b { font-size: 13px; }
  .p-mode { display: none; }                       /* 手机上省略“DeepSeek已接入”提示 */
  #themeSel { max-width: 84px; font-size: 11px; padding: 3px 4px; }
  .player .btn-ghost { padding: 4px 6px; font-size: 13px; }

  /* 大厅视图：跟随 topbar 实际高度（去掉写死的 fixed top:56px，否则 topbar 换行后与内容重叠） */
  #hallView { position: relative; inset: auto; flex: 1; }

  /* 大厅顶部信息条：紧凑、可换行；topbar 已显示玩家信息，隐藏重复的名字/等级/绩点，只留操作按钮 */
  #hall2dOverlay { padding: 8px; }
  #hall3dInfo { padding: 6px 10px; gap: 8px; font-size: 12px; flex-wrap: wrap; justify-content: center; max-width: 96vw; }
  #hall3dName, #hall3dStats { display: none; }
  #hall3dInfo .btn-ghost { padding: 3px 8px; font-size: 12px; white-space: nowrap; }

  /* 排行榜：收窄并下移，避开信息条 */
  #hallBoards { top: 92px; width: 150px; left: 8px; gap: 6px; }
  .hall-board { padding: 6px 8px; font-size: 12px; }

  /* 形象工坊：手机两列、图片适中（桌面为大图单列 minmax 220px） */
  #cvGrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .shop-card { padding: 10px; }
  .shop-card img { height: 170px; }

  /* 求学板：缩小并内移，避免“任务”角标被右边缘截断 */
  #hallBoard { right: 4%; width: 84px; }
  #hallBoard .hb-icon { font-size: 48px; }
  #hallBoard .hb-badge { right: 4px; }
}

/* ---------- 登录界面 ---------- */
#loginOverlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: var(--bg); }
#loginOverlay.hidden { display: none; }
#loginBox { width: 340px; max-width: 90vw; background: var(--bg2); border: 2px solid var(--primary); border-radius: var(--bubble-radius); padding: 32px 28px; text-align: center; box-shadow: 0 0 40px rgba(0,0,0,.4); }
#loginTitle { font-size: 26px; font-weight: bold; color: var(--primary); font-family: var(--font-title); letter-spacing: 3px; }
#loginSub { font-size: 13px; color: var(--muted); margin: 8px 0 22px; }
#loginBox input { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--txt); padding: 11px 12px; font-size: 14px; margin-bottom: 12px; }
#loginBox input:focus { outline: none; border-color: var(--accent); }
#loginErr { color: #f87171; font-size: 12px; min-height: 18px; margin-bottom: 6px; }
#loginBtns { display: flex; gap: 10px; justify-content: center; }
#loginTip { margin-top: 18px; font-size: 12px; color: var(--muted); }
#loginTip a { color: var(--accent); }

/* ---------- 语音按住说话 ---------- */
#btnHoldTalk { width: 100%; height: 46px; background: var(--bg3); color: var(--txt); border: 1px solid var(--accent); border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
#btnHoldTalk.holding { background: #7f1d1d; color: #fff; border-color: #f87171; }
#btnHoldTalk.hidden { display: none; }

/* ---------- 副本入口节点 ---------- */
.dungeon-node {
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #2b2b3a, #3a2b2b);
  border: 2px solid #c9a227; border-radius: 10px;
  padding: 8px 14px; cursor: pointer; color: #f0e6c8;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: transform .15s;
}
.dungeon-node:hover { transform: scale(1.05); }
.dungeon-node.locked { filter: grayscale(.8); opacity: .65; cursor: not-allowed; }
.dungeon-node .dg-icon { font-size: 26px; }
.dungeon-node .dg-info { display: flex; flex-direction: column; }
.dungeon-node .dg-info b { font-size: 14px; }
.dungeon-node .dg-info span { font-size: 11px; opacity: .85; }
#mapScroll { position: relative; }

/* ---------- 捏脸面板 ---------- */
#avatarPanel { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; }
.ap-title { font-size: 12px; color: var(--muted); margin: 8px 0 6px; }
#apStyles, #apFrames { display: flex; gap: 6px; flex-wrap: wrap; }
.ap-style, .ap-frame { padding: 6px 12px; border-radius: 8px; border: 2px solid var(--border); background: var(--bg3); color: var(--txt); cursor: pointer; font-size: 13px; }
.ap-style.on, .ap-frame.on { border-color: var(--primary); background: var(--bg2); }
#apGallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 220px; overflow-y: auto; }
#apGallery .ap-av { aspect-ratio: 1; border-radius: 10px; border: 2px solid var(--border); cursor: pointer; overflow: hidden; background: var(--bg3); }
#apGallery .ap-av img { width: 100%; height: 100%; object-fit: contain; }
#apGallery .ap-av.on { border-color: var(--primary); box-shadow: 0 0 8px var(--primary); }

/* ---------- 大厅 ---------- */
#hallView { position: fixed; inset: 56px 0 0; overflow-y: auto; background: var(--bg); z-index: 5; }
#hallInner { max-width: 860px; margin: 0 auto; padding: 24px 16px; display: flex; gap: 20px; flex-wrap: wrap; }
#hallMe { flex: 1; min-width: 280px; background: var(--bg2); border: var(--border-main); border-radius: 16px; padding: 22px; text-align: center; }
#hallAvatarWrap { position: relative; width: 150px; height: 150px; margin: 0 auto 10px; }
#hallAvatar { width: 100%; height: 100%; object-fit: contain; }
#hallFrame { position: absolute; inset: -8px; pointer-events: none; }
#hallFrame.gold { border: 4px solid #f0c040; border-radius: 50%; box-shadow: 0 0 14px #f0c04088; }
#hallFrame.leaf { border: 4px solid #4a9e5c; border-radius: 24%; }
#hallFrame.star { border: 4px dashed #7db9f5; border-radius: 50%; animation: spin 12s linear infinite; }
#hallFrame.fire { border: 4px solid #e05555; border-radius: 16%; box-shadow: 0 0 16px #e0555588; }
@keyframes spin { to { transform: rotate(360deg); } }
#hallName { font-size: 20px; font-weight: 700; font-family: var(--font-title); }
#hallStats { display: flex; justify-content: center; gap: 14px; margin: 10px 0 18px; font-size: 15px; }
#hallPortals { display: flex; flex-direction: column; gap: 10px; }
.portal { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: var(--border-main); background: var(--bg3); color: var(--txt); cursor: pointer; text-align: left; transition: transform .15s; }
.portal:hover:not(.locked) { transform: scale(1.03); }
.portal.locked { opacity: .5; cursor: not-allowed; }
.portal-icon { font-size: 30px; }
.portal-name { font-size: 16px; font-weight: 700; }
.portal-desc { font-size: 12px; color: var(--muted); }
#hallOthers { flex: 1; min-width: 260px; background: var(--bg2); border: var(--border-main); border-radius: 16px; padding: 18px; }
#hallOthersTitle { font-size: 15px; font-weight: 700; margin-bottom: 12px; font-family: var(--font-title); }
.ho-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--bg3); margin-bottom: 8px; border: 1px solid var(--border); }
.ho-item img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--bg); }
.ho-item .ho-name { flex: 1; font-size: 14px; }
.ho-item .ho-lv { font-size: 12px; color: var(--muted); }
.ho-cheer { border: 1px solid var(--border); background: var(--bg2); border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 13px; color: var(--txt); }

/* ---------- 光环效果 ---------- */
.ap-glow { padding: 6px 12px; border-radius: 8px; border: 2px solid var(--border); background: var(--bg3); color: var(--txt); cursor: pointer; font-size: 13px; }
.ap-glow.on { border-color: var(--primary); background: var(--bg2); }
#hallGlow { position: absolute; inset: -14px; pointer-events: none; border-radius: 50%; }
#hallGlow.sparkle { background: radial-gradient(circle, transparent 55%, #ffe28a33 70%, transparent 75%); animation: pulse 2.4s infinite; }
#hallGlow.flame { background: radial-gradient(circle, transparent 55%, #ff7a4533 70%, transparent 78%); animation: pulse 1.6s infinite; }
#hallGlow.frost { background: radial-gradient(circle, transparent 55%, #8fd4ff33 70%, transparent 78%); animation: pulse 3s infinite; }
@keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* ---------- 3D 大厅 ---------- */
#hall3d { position: absolute; inset: 0; z-index: 1; }
#hall3d canvas { display: block; }
#hall3dOverlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; }
#hall3dInfo { align-self: center; background: rgba(15,18,30,.72); border: 1px solid #3d5a99; border-radius: 12px; padding: 10px 22px; color: #e8ecf5; display: flex; gap: 16px; font-size: 15px; backdrop-filter: blur(4px); }
#hall3dName { font-weight: 700; color: #f0c040; }
#hall3dHint { align-self: center; background: rgba(15,18,30,.6); border-radius: 999px; padding: 8px 20px; color: #9db8e8; font-size: 13px; }
#hallView.using-3d #hallInner { display: none; }

/* ---------- 3D捏脸面板 ---------- */
#apPreviewWrap { display: flex; justify-content: center; margin: 8px 0; }
#apPreview { border-radius: 12px; background: linear-gradient(#1a2030, #0d1020); }
.ap-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.ap-opt { padding: 5px 10px; border-radius: 8px; border: 2px solid var(--border); background: var(--bg3); color: var(--txt); cursor: pointer; font-size: 12px; }
.ap-opt.on { border-color: var(--primary); background: var(--bg2); }
.ap-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }

/* ---------- 全屏捏人界面 ---------- */
#creatorView { position: fixed; inset: 0; background: #141828; z-index: 30; display: flex; }
#cvLeft { flex: 1.2; position: relative; display: flex; flex-direction: column; }
#cvCanvas { flex: 1; width: 100%; display: block; touch-action: none; }
#cvHint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #8a93b8; font-size: 13px; }
#cvRight { flex: 1; max-width: 460px; background: rgba(20,24,40,.92); border-left: 1px solid #2a3350; padding: 22px 20px; overflow-y: auto; color: #dfe4f2; }
.cv-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: #f0c040; }
#cvTeachers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cv-teacher { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 2px solid #2a3350; cursor: pointer; background: #1a2036; transition: border-color .15s; }
.cv-teacher.on { border-color: #f0c040; background: #20283f; }
.cvt-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.cvt-info b { font-size: 14px; display: block; }
.cvt-info span { font-size: 11px; color: #8a93b8; display: block; }
.cvt-info p { font-size: 12px; color: #aab2d0; margin: 3px 0 0; }
#cvDone { width: 100%; padding: 13px; font-size: 16px; border-radius: 12px; }
@media (max-width: 760px) {
  #creatorView { flex-direction: column; }
  #cvLeft { flex: 0 0 42%; }
  #cvRight { max-width: none; flex: 1; border-left: none; border-top: 1px solid #2a3350; }
}

/* ---------- 关卡 3D 场景条与 NPC 泡泡 ---------- */
#stage3dWrap { position: relative; height: 240px; flex-shrink: 0; background: #12141f; border-bottom: 1px solid var(--border); }
#stage3d { position: absolute; inset: 0; }
#npcBubble {
  position: absolute; top: 14px; left: 8%; max-width: 46%;
  background: #fffdf5; color: #2b2b2b; border-radius: 14px;
  padding: 10px 14px; font-size: 14px; line-height: 1.55;
  box-shadow: 0 3px 12px rgba(0,0,0,.35); z-index: 3;
  animation: bubbleIn .25s ease;
}
#npcBubble::after {
  content: ""; position: absolute; left: 38px; bottom: -10px;
  border: 6px solid transparent; border-top: 10px solid #fffdf5;
}
@keyframes bubbleIn { from { transform: translateY(-8px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 3D 地图容器 ---------- */
#map3d { position: absolute; inset: 0; }

/* ---------- 老师选择弹窗 ---------- */
#teacherModal { position: fixed; inset: 0; background: rgba(10,12,22,.8); z-index: 40; display: flex; align-items: center; justify-content: center; }
#tmBox { background: #1a2036; border: 1px solid #2a3350; border-radius: 18px; padding: 22px 24px; width: min(560px, 92vw); color: #dfe4f2; max-height: 90vh; overflow-y: auto; }
#tmHint { font-size: 12px; color: #8a93b8; margin-bottom: 12px; }
#tmMain { display: flex; gap: 14px; margin-bottom: 14px; }
#tmCanvas { border-radius: 12px; background: #12141f; flex-shrink: 0; }
#tmList { flex: 1; display: flex; flex-direction: column; gap: 8px; }
#tmDone { width: 100%; padding: 12px; font-size: 15px; border-radius: 12px; }
#btnTeacherMap { margin-left: 8px; font-size: 16px; padding: 4px 10px; }
@media (max-width: 560px) {
  #tmMain { flex-direction: column; align-items: center; }
}

/* ---------- 全屏捏人界面 V2（美化） ---------- */
#creatorView { position: fixed; inset: 0; z-index: 30; display: flex;
  background: radial-gradient(ellipse at 32% 42%, #2a3358 0%, #171c30 52%, #0d1020 100%); }
#cvLeft { flex: 1.25; position: relative; display: flex; flex-direction: column; }
#cvLeft::before { content: ""; position: absolute; left: 50%; bottom: 12%;
  width: 320px; height: 60px; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(240,192,64,.22), transparent 70%); pointer-events: none; }
#cvCanvas { flex: 1; width: 100%; display: block; touch-action: none; }
#cvHint { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center;
  color: #7d88b0; font-size: 13px; letter-spacing: 1px; }
#cvRight { flex: 1; max-width: 440px; background: rgba(16,20,36,.88);
  border-left: 1px solid #2a3350; padding: 26px 24px; overflow-y: auto; color: #dfe4f2;
  backdrop-filter: blur(6px); }
.cv-title { font-size: 18px; font-weight: 700; margin-bottom: 14px; color: #f0c040; letter-spacing: 2px; }
#cvRight .ap-title { font-size: 12px; color: #8a93b8; margin: 16px 0 8px; letter-spacing: 1.5px;
  display: flex; align-items: center; gap: 8px; }
#cvRight .ap-title::after { content: ""; flex: 1; height: 1px; background: #2a3350; }
#cvRight .ap-row { gap: 8px; }
#cvRight .ap-opt { padding: 7px 14px; border-radius: 999px; border: 1.5px solid #2f3a5e;
  background: #1c2340; color: #c8cfec; font-size: 13px; transition: all .15s; }
#cvRight .ap-opt:hover { border-color: #4a5b8e; transform: translateY(-1px); }
#cvRight .ap-opt.on { border-color: #f0c040; background: #2a2f4a; color: #f0c040;
  box-shadow: 0 0 10px rgba(240,192,64,.25); }
#cvRight .ap-swatch { width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 1px 4px rgba(0,0,0,.4); }
#cvDone { width: 100%; padding: 14px; font-size: 16px; border-radius: 999px; margin-top: 20px;
  letter-spacing: 2px; box-shadow: 0 4px 18px rgba(240,192,64,.3); }

/* ---------- 2D 大厅 ---------- */
#hallView { background: #0d1020; }
#hall2d { position: absolute; inset: 0; background: url("/static/art/bg/hall.jpg") center/cover no-repeat; cursor: pointer; }
#hallPortalHit { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); width: 200px; height: 220px; cursor: pointer; z-index: 3; }
#hallPortalGlow { position: absolute; inset: 10% 15%; border-radius: 50% 50% 46% 46%; background: radial-gradient(ellipse, rgba(240,192,64,.35), transparent 70%); animation: portalPulse 2.2s ease-in-out infinite; }
@keyframes portalPulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
#hallPortalLabel { position: absolute; bottom: -6px; left: 0; right: 0; text-align: center; color: #f0c040; font-weight: 700; font-size: 16px; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
/* 形象统一：立绘素材画布尺寸不一（1440×2850 与 2048×2018 混用，宽高比差一倍），
   按宽度缩放会让人物视觉高度漂移——改统一显示高度、宽度自适应（与捏人卡 contain 策略一致） */
#hallMeImg { position: absolute; left: 46%; bottom: 10%; height: 200px; width: auto; transform: translateX(-50%); transition: left .8s ease, bottom .8s ease; z-index: 2; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
#hallMeName { position: absolute; left: 46%; bottom: calc(12% + 150px); transform: translateX(-50%); color: #f0c040; font-weight: 700; font-size: 13px; text-shadow: 0 1px 4px #000; z-index: 2; transition: left .8s ease, bottom .8s ease; background: rgba(15,18,30,.7); padding: 2px 10px; border-radius: 999px; }
.hall-other { position: absolute; transform: translateX(-50%); text-align: center; z-index: 1; animation: floatY 3.4s ease-in-out infinite; }
.hall-other img { height: 140px; width: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.hall-other span { display: inline-block; font-size: 11px; color: #c8cfec; background: rgba(15,18,30,.7); padding: 1px 8px; border-radius: 999px; }
@keyframes floatY { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
#hall2dOverlay { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; }
#hall2dOverlay > * { pointer-events: auto; }
#hall2dOverlay #hall3dInfo { align-self: center; }
#hall2dOverlay #hall3dHint { align-self: center; }
/* 捏人 V2 立绘舞台 */
#cvStage { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6%; }
#cvImg { max-height: 78vh; max-width: 90%; filter: drop-shadow(0 12px 24px rgba(0,0,0,.55)); animation: cvIn .4s ease; }
@keyframes cvIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#cvNote { font-size: 12px; color: #7d88b0; margin-top: 14px; line-height: 1.6; }

/* ---------- 关卡 2D 对话场景 ---------- */
#stage2d { position: absolute; inset: 0; background: linear-gradient(#1a2036 0%, #232a40 55%, #2e3654 55.5%, #232a40 100%); overflow: hidden; }
#stageFloor { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: radial-gradient(ellipse at 50% 100%, rgba(240,192,64,.12), transparent 65%); }
#stageTeacher { position: absolute; left: 10%; bottom: 8%; height: 82%; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); animation: stageIn .5s ease; }
#stageMe { position: absolute; right: 12%; bottom: 8%; height: 68%; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); animation: stageIn .5s ease .1s backwards; }
@keyframes stageIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
#stageTeacher.talking { animation: talkBob .6s ease; }
@keyframes talkBob { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
#npcBubble { left: 24%; max-width: 42%; top: 8%; }
/* 2D 地图 */
#mapScroll { background: url("/static/art/bg/math.jpg") center/cover no-repeat, linear-gradient(#1a2440, #2a3358); }
#mapSvg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }

/* 老师弹窗立绘 */
#tmImg { width: 180px; height: 220px; object-fit: contain; border-radius: 12px; background: #12141f; flex-shrink: 0; }

/* 老师弹窗人设区 */
#tmLeft { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; width: 180px; }
#tmBio { font-size: 12px; color: #aab2d0; line-height: 1.65; background: #141a2e; border-radius: 10px; padding: 10px 12px; max-height: 180px; overflow-y: auto; }

/* ---------- TA 美术打磨 ---------- */
/* 大厅角色接触阴影（消除漂浮感） */
#hallMeImg::after, .hall-other::after { content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); width: 70%; height: 14px; background: radial-gradient(ellipse, rgba(0,0,0,.45), transparent 70%); z-index: -1; }
/* 对话场景学生立绘翻转（与老师面对面） */
#stageMe { transform: scaleX(-1); }
#stageTeacher, #stageMe { transition: filter .3s; }
#stageTeacher.talking { filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)) brightness(1.12); }
/* 角色环境光融合（大厅暖色氛围） */
#hallMeImg, .hall-other img { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) saturate(1.05); }

/* ---------- 世界选择弹窗 ---------- */
#worldModal { position: fixed; inset: 0; background: rgba(10,12,22,.82); z-index: 42; display: flex; align-items: center; justify-content: center; }
#worldBox { width: min(760px, 94vw); max-height: 90vh; overflow-y: auto; background: #141828; border: 1px solid #2a3350; border-radius: 20px; padding: 24px 26px; position: relative; }
#worldClose { position: absolute; top: 14px; right: 18px; background: none; border: none; color: #8a93b8; font-size: 22px; cursor: pointer; }
#worldTitle { font-size: 20px; font-weight: 700; color: #f0c040; letter-spacing: 2px; margin-bottom: 4px; }
#worldSub { font-size: 12px; color: #8a93b8; margin-bottom: 16px; }
#worldList { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.world-card { position: relative; border-radius: 14px; overflow: hidden; border: 2px solid #2f3a5e; cursor: pointer; transition: all .18s; min-height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px 10px; }
.world-card:not(.locked):hover { border-color: #f0c040; transform: translateY(-3px); box-shadow: 0 6px 18px rgba(240,192,64,.25); }
.world-card.locked { opacity: .55; cursor: default; filter: grayscale(.6); }
.world-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.world-card > *:not(.world-bg) { position: relative; z-index: 1; }
.world-icon { font-size: 30px; }
.world-name { font-size: 16px; font-weight: 700; color: #fff; margin-top: 6px; text-shadow: 0 2px 6px #000; }
.world-desc { font-size: 11px; color: #c8cfec; margin-top: 3px; text-shadow: 0 1px 4px #000; }
.world-lock { position: absolute; top: 8px; right: 10px; font-size: 15px; }
/* 数学世界地图背景 */
#mapScroll { background: url("/static/art/bg/math.jpg") center/cover no-repeat fixed, linear-gradient(#1a2440, #2a3358); }

/* ---------- 形象工坊（商城） ---------- */
#creatorView { position: fixed; inset: 0; z-index: 30; background: radial-gradient(ellipse at 50% 0%, #232a48 0%, #141830 55%, #0d1020 100%); display: flex; flex-direction: column; padding: 22px 4vw; overflow-y: auto; }
#cvHead { display: flex; align-items: center; justify-content: space-between; }
#cvPoints { font-size: 18px; font-weight: 700; color: #f0c040; }
#cvHint2 { font-size: 12px; color: #8a93b8; margin: 6px 0 16px; }
#cvGrid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.shop-card { background: rgba(22,28,50,.9); border: 2px solid #2f3a5e; border-radius: 14px; padding: 14px; text-align: center; cursor: pointer; transition: all .15s; }
.shop-card:hover { transform: translateY(-3px); border-color: #4a5b8e; }
.shop-card.current { border-color: #f0c040; box-shadow: 0 0 14px rgba(240,192,64,.3); }
.shop-card.locked img { filter: grayscale(.5) brightness(.75); }
.shop-card img { width: 100%; height: 240px; object-fit: contain; }
.shop-name { font-size: 14px; color: #c8cfec; margin-top: 8px; }
.shop-status { font-size: 14px; font-weight: 700; color: #f0c040; margin-top: 4px; }
.shop-card.current .shop-status { color: #6fdc8c; }
.shop-card.locked .shop-status { color: #e8b23a; }
.shop-hot { font-size: 11px; }

/* ---------- 形象工坊：大图预览 ---------- */
#avPreview { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center;
  justify-content: center; background: rgba(6,9,20,.82); backdrop-filter: blur(4px); }
.avp-box { position: relative; background: rgba(22,28,50,.96); border: 2px solid #f0c040;
  border-radius: 18px; padding: 26px 30px 22px; text-align: center; max-width: 90vw;
  box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.avp-box img { height: min(56vh, 420px); max-width: 82vw; object-fit: contain;
  image-rendering: auto; }
.avp-close { position: absolute; top: 8px; right: 10px; background: none; border: none;
  color: #8a93b8; font-size: 18px; cursor: pointer; }
.avp-close:hover { color: #f0c040; }
.avp-name { font-size: 18px; font-weight: 700; color: #e8ecf8; margin-top: 10px; }
.avp-status { font-size: 14px; color: #f0c040; margin: 6px 0 14px; }
.avp-action { min-width: 180px; padding: 9px 18px; font-size: 15px; }
#cvFoot { margin-top: 16px; display: flex; justify-content: center; }
#cvFoot #cvDone { min-width: 220px; padding: 13px; font-size: 16px; border-radius: 999px; }
#cvDone:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 求学板 NPC 与任务面板 ---------- */
#hallBoard { position: absolute; right: 6%; bottom: 26%; width: 120px; cursor: pointer; z-index: 3; text-align: center; transition: transform .15s; }
#hallBoard:hover { transform: translateY(-4px) scale(1.04); }
#hallBoard .hb-icon { font-size: 64px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); animation: floatY 3s ease-in-out infinite; }
#hallBoard .hb-name { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 700; color: #f0c040; background: rgba(15,18,30,.8); padding: 2px 12px; border-radius: 999px; text-shadow: 0 1px 4px #000; }
#hallBoard .hb-badge { position: absolute; top: -4px; right: 12px; background: #e74c3c; color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; animation: portalPulse 2s infinite; }
#boardModal { position: fixed; inset: 0; background: rgba(10,12,22,.85); z-index: 44; display: flex; align-items: center; justify-content: center; }
#boardBox { width: min(680px, 94vw); max-height: 88vh; overflow-y: auto; background: #141828; border: 1px solid #2a3350; border-radius: 20px; padding: 22px 24px; position: relative; }
#boardClose { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #8a93b8; font-size: 22px; cursor: pointer; }
#boardTitle { font-size: 20px; font-weight: 700; color: #f0c040; letter-spacing: 2px; }
#boardStars { margin: 12px 0 16px; background: #10152a; border: 1px solid #2a3350; border-radius: 12px; padding: 10px 14px; }
.bs-label { font-size: 11px; color: #8a93b8; }
.bs-nums { font-size: 18px; font-weight: 700; color: #aab2d0; margin-top: 2px; }
.bs-done { color: #f0c040; font-size: 24px; }
.bs-done.hit { color: #6fdc8c; }
.bs-bar { height: 6px; background: #232a48; border-radius: 3px; margin-top: 8px; overflow: hidden; }
.bs-fill { height: 100%; background: linear-gradient(90deg, #e8b23a, #f0c040); border-radius: 3px; transition: width .4s; }
.board-sec { margin-bottom: 14px; }
.bs-head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 700; color: #dfe4f5; padding: 6px 2px; border-bottom: 1px solid #232a48; }
.bs-soon { font-size: 11px; color: #8a93b8; font-weight: 400; }
.bs-ch { font-size: 12px; color: #f0c040; font-weight: 400; }
.bt-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed #1e2440; font-size: 13px; }
.bt-row.passed { opacity: .55; }
.bt-code { color: #8a93b8; font-size: 11px; min-width: 64px; }
.bt-title { flex: 1; color: #dfe4f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-stars { color: #f0c040; font-size: 12px; letter-spacing: 1px; }
.bt-go { background: linear-gradient(135deg, #b8860b, #f0c040); color: #1a1405; font-weight: 700; border: none; border-radius: 999px; padding: 4px 14px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.bt-go:hover { filter: brightness(1.1); }
.bt-done { color: #6fdc8c; font-size: 12px; }
.bt-lock { font-size: 12px; opacity: .6; }

/* ---------- 排行榜 ---------- */
#hallBoards { position: absolute; left: 14px; top: 70px; z-index: 3; display: flex; flex-direction: column; gap: 10px; width: 210px; }
.hall-board { background: rgba(15,18,30,.82); border: 1px solid #2a3350; border-radius: 12px; padding: 8px 10px; }
.hb-title { font-size: 12px; font-weight: 700; color: #f0c040; margin-bottom: 4px; }
.hb-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #c8cfec; padding: 2px 0; }
.hb-rank { width: 16px; color: #8a93b8; }
.hb-rank.r1 { color: #f0c040; } .hb-rank.r2 { color: #c0c0c0; } .hb-rank.r3 { color: #cd7f32; }
.hb-name2 { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-val { color: #f0c040; font-weight: 700; }
.hb-me { background: rgba(240,192,64,.12); border-radius: 6px; }
/* 单击同学气泡 */
.peer-bubble { position: absolute; transform: translate(-50%, -100%); background: #fff; color: #222; font-size: 12px; padding: 6px 12px; border-radius: 12px; max-width: 180px; z-index: 5; box-shadow: 0 3px 10px rgba(0,0,0,.4); pointer-events: none; }
.peer-bubble::after { content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #fff; border-bottom: none; }
/* ---------- 个人中心 ---------- */
#profileModal, #peerModal { position: fixed; inset: 0; background: rgba(10,12,22,.85); z-index: 46; display: flex; align-items: center; justify-content: center; }
#pcBox, #peerBox { width: min(560px, 94vw); max-height: 88vh; overflow-y: auto; background: #141828; border: 1px solid #2a3350; border-radius: 18px; padding: 20px 22px; position: relative; }
#pcClose, #peerClose { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #8a93b8; font-size: 22px; cursor: pointer; }
.pc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pc-head img { width: 64px; height: 84px; object-fit: contain; }
.pc-head b { font-size: 18px; color: #f0c040; }
.pc-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.pc-tab { background: #1a2036; color: #aab2d0; border: 1px solid #2a3350; border-radius: 999px; padding: 5px 16px; font-size: 13px; cursor: pointer; }
.pc-tab.on { background: #f0c040; color: #1a1405; font-weight: 700; border-color: #f0c040; }
#pcSkins { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.pc-skin { background: #10152a; border: 2px solid #2a3350; border-radius: 10px; padding: 8px; text-align: center; cursor: pointer; }
.pc-skin.current { border-color: #6fdc8c; }
.pc-skin img { width: 100%; height: 88px; object-fit: contain; }
.pc-skin span { font-size: 11px; color: #aab2d0; }
.pc-skin.current span { color: #6fdc8c; font-weight: 700; }
.pc-field { margin-bottom: 10px; }
.pc-field label { font-size: 12px; color: #8a93b8; display: block; margin-bottom: 4px; }
.pc-field input, .pc-field select { width: 100%; background: #10152a; border: 1px solid #2a3350; border-radius: 8px; padding: 8px 10px; color: #e8ecf8; font-size: 13px; }
.pc-pv-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; }
.pc-pv-row label { font-size: 12px; color: #aab2d0; display: flex; align-items: center; gap: 4px; }
#pcSave { width: 100%; padding: 10px; border-radius: 10px; }
.pf-empty { font-size: 12px; color: #8a93b8; text-align: center; padding: 18px 0; }
.pf-title-card { display: flex; align-items: center; gap: 8px; background: #10152a; border: 1px solid; border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.pf-metal { font-size: 16px; }
.pf-tname { flex: 1; font-weight: 700; font-size: 13px; }
.pf-tm { font-size: 11px; color: #8a93b8; }
.peer-row { display: flex; gap: 10px; font-size: 13px; color: #dfe4f5; padding: 6px 2px; border-bottom: 1px dashed #1e2440; }
.peer-row b { color: #8a93b8; min-width: 44px; font-weight: 400; }
.peer-sec { font-size: 13px; font-weight: 700; color: #f0c040; margin: 12px 0 8px; }
/* 关卡星星高亮 */
.lvl-stars { fill: #f0c040; font-size: 11px; text-shadow: 0 0 6px rgba(240,192,64,.8); paint-order: stroke; stroke: rgba(240,192,64,.35); stroke-width: 2px; }
/* 昵称可点击 */
#hallMeName { cursor: pointer; }
#hallMeName:hover { color: #fff; }

/* ---------- 今日计划（求学板接取） ---------- */
#boardPlan { margin-bottom: 14px; background: linear-gradient(135deg, #1a2240, #141a30); border: 1px solid #3a4a7a; border-radius: 12px; padding: 12px 14px; }
.bp-empty { font-size: 12px; color: #8a93b8; text-align: center; padding: 6px 0; }
.bp-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 700; color: #dfe4f5; }
.bp-stars { color: #f0c040; font-size: 16px; }
.bp-goal { font-size: 11px; color: #8a93b8; font-style: normal; font-weight: 400; }
.bp-bar { height: 6px; background: #232a48; border-radius: 3px; margin: 8px 0; overflow: hidden; }
.bp-fill { height: 100%; background: linear-gradient(90deg, #4fc3f7, #6fdc8c); border-radius: 3px; transition: width .4s; }
.bp-item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 5px 2px; border-top: 1px dashed #232a48; }
.bp-item.done { opacity: .6; }
.bp-t { flex: 1; color: #dfe4f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-s { color: #f0c040; font-size: 11px; }
.bp-done { color: #6fdc8c; }
.bp-goto { background: #2a4a8e; color: #cfe0ff; border: none; border-radius: 999px; padding: 2px 10px; font-size: 11px; cursor: pointer; }
.bp-cancel { background: none; border: none; color: #8a93b8; cursor: pointer; font-size: 12px; }
.bt-accept { background: #1a2440; color: #f0c040; border: 1px solid #f0c040; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.bt-accept:hover { background: #f0c040; color: #1a1405; }
.bt-go.accepted { background: linear-gradient(135deg, #2a8a4a, #6fdc8c); color: #06130a; }
.bt-ch2 { display: block; font-size: 10px; color: #8a93b8; font-style: normal; }
.bp-auto { background: linear-gradient(135deg, #b8860b, #f0c040); color: #1a1405; font-weight: 700; border: none; border-radius: 999px; padding: 4px 14px; font-size: 12px; cursor: pointer; }

/* ---------- 完整排行榜弹窗 ---------- */
#lbModal { position: fixed; inset: 0; background: rgba(10,12,22,.85); z-index: 45; display: flex; align-items: center; justify-content: center; }
#lbBox { width: min(480px, 92vw); max-height: 86vh; background: #141828; border: 1px solid #2a3350; border-radius: 18px; padding: 20px 22px; position: relative; display: flex; flex-direction: column; }
#lbClose { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #8a93b8; font-size: 22px; cursor: pointer; }
#lbTitle { font-size: 19px; font-weight: 700; color: #f0c040; letter-spacing: 2px; text-align: center; }
.lb-tabs { display: flex; gap: 8px; justify-content: center; margin: 12px 0 6px; }
.lb-tab { background: #1a2036; color: #aab2d0; border: 1px solid #2a3350; border-radius: 999px; padding: 5px 18px; font-size: 13px; cursor: pointer; }
.lb-tab.on { background: #f0c040; color: #1a1405; font-weight: 700; border-color: #f0c040; }
#lbHint { text-align: center; font-size: 11px; color: #8a93b8; margin-bottom: 8px; }
#lbBody { overflow-y: auto; flex: 1; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px dashed #1e2440; cursor: pointer; border-radius: 8px; position: relative; }
.lb-row:hover { background: #1a2036; }
.lb-row.lb-me { background: rgba(240,192,64,.12); }
.lb-rank { width: 30px; font-weight: 700; color: #8a93b8; font-size: 13px; }
.lb-rank.r1 { color: #f0c040; } .lb-rank.r2 { color: #c0c0c0; } .lb-rank.r3 { color: #cd7f32; }
.lb-name { flex: 1; color: #dfe4f5; font-size: 14px; overflow: hidden; }
.lb-sub { display: block; font-size: 11px; color: #8a93b8; }
.lb-val { font-size: 13px; font-weight: 700; color: #f0c040; white-space: nowrap; }
.lb-empty { text-align: center; color: #8a93b8; padding: 30px 0; font-size: 13px; }
.lb-bubble { position: absolute; right: 60px; top: -8px; background: #fff; color: #222; font-size: 12px; padding: 6px 12px; border-radius: 12px; max-width: 200px; z-index: 5; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.hall-board { cursor: pointer; }
.hall-board:hover { border-color: #f0c040; }
.bt-accept.pre { background: #1a2440; color: #8ab4f0; border: 1px dashed #4a6a9a; }
.bt-accept.pre:hover { background: #4a6a9a; color: #fff; }

/* ---------- 对话气泡浮在人物旁（漫画式） ---------- */
#stage2d #npcBubble { left: auto; right: 52%; top: 12%; max-width: 38%; }
#stage2d #npcBubble::after { left: auto; right: 30px; border-top-color: #fffdf5; }
#meBubble {
  position: absolute; left: 52%; top: 20%; max-width: 36%;
  background: #d6e6ff; color: #1a2436; border-radius: 14px;
  padding: 9px 13px; font-size: 14px; line-height: 1.5;
  box-shadow: 0 3px 12px rgba(0,0,0,.35); z-index: 3;
  animation: bubbleIn .25s ease;
}
#meBubble::after {
  content: ""; position: absolute; right: 36px; bottom: -10px;
  border: 6px solid transparent; border-top: 10px solid #d6e6ff;
}
/* 消息列表折叠为小历史条 */
#messages { max-height: 30%; }
#stage2d { height: 46%; min-height: 240px; position: relative; }

/* ---------- 对话气泡对准立绘 + 移除独立聊天窗口（v61） ---------- */
/* 立绘区占满对话空间 */
#stage3dWrap { flex: 1; position: relative; }
#stage2d { position: absolute; inset: 0; height: auto; min-height: 0; }
/* 老师气泡：老师立绘（左10%）右上，尾巴指向老师 */
#stage2d #npcBubble { left: 23%; right: auto; top: 14%; max-width: 40%; }
#stage2d #npcBubble::after { left: 30px; right: auto; top: auto; bottom: -10px; border-top: 10px solid #fffdf5; }
/* 学生气泡：学生立绘（右12%）左上，尾巴指向学生 */
#meBubble { left: auto; right: 23%; top: 26%; max-width: 36%; }
#meBubble::after { right: 30px; left: auto; top: auto; bottom: -10px; border-top: 10px solid #d6e6ff; }
/* 独立聊天窗口彻底隐藏（对话全在人物旁气泡） */
#messages { display: none !important; }

/* 对话记录浮层 */
#messages.hist-open { display: block !important; position: fixed; right: 16px; bottom: 90px; width: 380px; max-width: 90vw; max-height: 55vh; overflow-y: auto; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; z-index: 50; box-shadow: 0 8px 30px rgba(0,0,0,.5); }

/* ---------- 对话流布局（v62）：人物在底部，气泡向上堆叠 ---------- */
/* 恢复 messages 显示：对话流占满人物上方区域 */
#messages { display: flex !important; flex-direction: column; flex: 1; overflow-y: auto; padding: 16px 20px; gap: 10px; max-height: none !important; position: relative; z-index: 2; }
/* 立绘作为底部背景人物（较小，在对话流后面） */
#stage2d { position: absolute; inset: 0; z-index: 1; pointer-events: none; height: auto; min-height: 0; }
#stageTeacher { left: 3%; bottom: 0; height: 46%; opacity: .92; }
#stageMe { right: 3%; bottom: 0; height: 40%; opacity: .92; }
/* 气泡左右分布：老师靠左、学生靠右 */
#messages .msg { max-width: 62%; display: flex; }
#messages .msg.npc { align-self: flex-start; }
#messages .msg.me { align-self: flex-end; }
/* 单气泡 npcBubble/meBubble 弃用 */
#npcBubble, #meBubble { display: none !important; }

/* 对话流背景透明（融入场景，不是独立窗口感） */
#messages { background: transparent !important; }

/* ---------- 简化：学习界面不显示立绘，只留聊天窗口（v64） ---------- */
#stage2d { display: none !important; }
#messages { flex: 1; max-width: 720px; margin: 0 auto; width: 100%; }
#messages .msg { max-width: 85%; }
.msg-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; flex-shrink: 0; border: 2px solid var(--border); background: var(--bg3); }

/* 头像只显示头肩（v66）：background-image 放大定位到头肩区 */
.msg-avatar { background-size: 300%; background-position: center 6%; background-repeat: no-repeat; }

/* ---------- 通关结算弹窗 ---------- */
#passModal { position: fixed; inset: 0; background: rgba(10,14,26,.72); display: flex; align-items: center; justify-content: center; z-index: 100; }
.pass-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 32px 40px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: passPop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes passPop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.pass-icon { font-size: 52px; animation: passBob 1.2s ease infinite; }
@keyframes passBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.pass-title { font-size: 24px; font-weight: 700; color: var(--gold,#c9a227); margin: 8px 0 4px; font-family: var(--font-title); }
.pass-task { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.pass-gain { font-size: 18px; color: var(--primary); font-weight: 700; margin-bottom: 20px; }
.pass-btns { display: flex; gap: 12px; justify-content: center; }
.pass-btns .btn-primary { padding: 11px 22px; }
.pass-btns .btn-ghost { padding: 11px 22px; }

/* ---------- 单词魔堡 ---------- */
#wgOverlay { position: fixed; inset: 0; background: rgba(10,14,26,.8); z-index: 90; display: flex; align-items: center; justify-content: center; }
.wg-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; width: 640px; max-width: 94vw; max-height: 88vh; overflow-y: auto; padding: 20px 22px; }
.wg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wg-title { font-size: 20px; font-weight: 700; color: var(--primary); font-family: var(--font-title); flex: 1; }
.wg-mastered { font-size: 14px; color: var(--gold,#c9a227); font-weight: 700; }
.wg-tip { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
#wgGroups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wg-group { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; transition: transform .15s; }
.wg-group:hover { transform: translateY(-2px); border-color: var(--primary); }
.wg-gname { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.wg-gbar { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.wg-gfill { height: 100%; background: var(--primary); }
.wg-group.wg-done .wg-gfill { background: #4caf50; }
.wg-gnum { font-size: 11px; color: var(--muted); margin-top: 5px; }
.wg-group.wg-done .wg-gnum { color: #4caf50; }
.wg-playhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.wg-gname2 { font-weight: 700; flex: 1; }
.wg-progwrap { display: flex; align-items: center; gap: 6px; }
.wg-progbar { width: 90px; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
#wgProgFill { height: 100%; background: var(--primary); }
#wgProg { font-size: 12px; color: var(--muted); }
#wgWordArea { text-align: center; padding: 18px; background: var(--bg3); border-radius: 12px; margin-bottom: 14px; }
.wg-phon { font-size: 22px; color: var(--primary); }
.wg-pos { font-size: 13px; color: var(--muted); margin-top: 4px; }
.wg-meaning { font-size: 16px; margin-top: 8px; line-height: 1.5; }
.wg-review { font-size: 11px; color: #e0a030; margin-top: 8px; }
.wg-new { font-size: 11px; color: #4caf50; margin-top: 8px; }
.wg-finish { font-size: 18px; color: var(--gold); padding: 20px; }
#wgPicked { display: flex; gap: 6px; justify-content: center; min-height: 46px; margin-bottom: 8px; flex-wrap: wrap; }
.wg-pcell { width: 40px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--bg3); border: 2px solid var(--border); border-radius: 8px; font-size: 20px; font-weight: 700; }
.wg-cursor { border-style: dashed; color: var(--muted); }
#wgPicked.wg-right .wg-pcell { border-color: #4caf50; background: #1c3a24; }
#wgPicked.wg-wrong .wg-pcell { border-color: #b53a2a; background: #3a1c1c; }
#wgFeedback { text-align: center; min-height: 26px; font-size: 15px; margin-bottom: 12px; }
.wg-gain { color: var(--gold); font-weight: 700; }
.wg-stage { color: var(--muted); font-size: 13px; }
#wgLetters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
.wg-letter { width: 46px; height: 50px; font-size: 22px; font-weight: 700; background: var(--bg3); color: var(--txt); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.wg-letter:hover { border-color: var(--primary); background: var(--bg); }
.wg-letter.wg-used { opacity: .25; cursor: default; }

/* ---------- 单词方块游戏（Web 版，深蓝游戏风） ---------- */
.wg-game-card { background: #1a1f35; border: 1px solid #2a3152; border-radius: 18px; width: 420px; max-width: 94vw; padding: 24px 22px; position: relative; }
.wg-x { position: absolute; top: 12px; right: 12px; z-index: 2; }
.wb-logo { font-size: 28px; font-weight: 700; color: #ffd76a; text-align: center; margin-bottom: 4px; }
.wb-sub { text-align: center; color: #8a93b8; font-size: 13px; margin-bottom: 20px; }
.wb-sub b { color: #ffd76a; }
.wb-btn { display: block; width: 100%; padding: 13px; margin-bottom: 10px; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; color: #fff; }
.wb-primary { background: linear-gradient(135deg,#3a7bd5,#2a5a9a); }
.wb-green { background: linear-gradient(135deg,#3aa56b,#2a7a4a); }
.wb-red { background: linear-gradient(135deg,#c0504a,#8a3532); }
.wb-gold { background: linear-gradient(135deg,#c9a227,#8a6d15); }
.wb-sm { padding: 10px; font-size: 14px; }
.wb-ghost { background: #2a3152; width: auto; }
.wb-row2 { display: flex; gap: 10px; }
.wb-row2 .wb-btn { margin-bottom: 0; }
.wb-hint { text-align: center; color: #6a739a; font-size: 12px; margin-top: 16px; }
.wb-hud { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.wb-hud-item { display: flex; flex-direction: column; align-items: center; flex: 1; }
.wb-hud-item span { font-size: 11px; color: #8a93b8; }
.wb-hud-item b { font-size: 20px; color: #ffd76a; }
.wb-hud .wb-ghost { padding: 6px 12px; margin: 0; }
.wb-wordbox { background: #232a4a; border-radius: 14px; padding: 22px; text-align: center; margin-bottom: 14px; }
.wb-cn { font-size: 34px; font-weight: 700; color: #fff; }
.wb-len { font-size: 13px; color: #8a93b8; margin-top: 6px; }
.wb-phon { font-size: 15px; color: #7ab3f0; margin-top: 4px; }
.wb-slot { display: flex; gap: 6px; justify-content: center; min-height: 46px; margin-bottom: 8px; flex-wrap: wrap; }
.wb-scell { width: 38px; height: 42px; display: flex; align-items: center; justify-content: center; background: #232a4a; border: 2px solid #2a3152; border-radius: 8px; font-size: 20px; font-weight: 700; color: #ffd76a; }
.wb-scell.filled { border-color: #ffd76a; }
.wb-slot.wb-right .wb-scell { border-color: #3aa56b; background: #1c3a24; color: #6de39a; }
.wb-slot.wb-wrong .wb-scell { border-color: #c0504a; background: #3a1c1c; color: #f08a84; }
.wb-fb { text-align: center; min-height: 24px; font-size: 15px; color: #ffd76a; margin-bottom: 12px; font-weight: 700; }
.wb-grid { display: grid; gap: 10px; }
.wb-cell { aspect-ratio: 1; font-size: 26px; font-weight: 700; background: linear-gradient(135deg,#3a4a7a,#2a3560); color: #fff; border: 1px solid #4a5a8a; border-radius: 10px; cursor: pointer; box-shadow: 0 3px 0 #1a2040; transition: transform .1s; }
.wb-cell:hover { transform: translateY(-2px); border-color: #ffd76a; }
.wb-cell.wb-used { opacity: .2; box-shadow: none; cursor: default; }
.wb-subhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wb-subtitle { font-size: 18px; font-weight: 700; color: #ffd76a; }
.wb-subbody { max-height: 50vh; overflow-y: auto; }
.wb-row { display: flex; justify-content: space-between; padding: 10px; background: #232a4a; border-radius: 8px; margin-bottom: 6px; color: #cdd5f0; font-size: 14px; }

/* ---------- 单词方块 1:1 复刻（深蓝游戏风） ---------- */
.wg-game-card { background: #141831; border: 1px solid #2a3152; border-radius: 18px; width: 400px; max-width: 94vw; padding: 26px 22px; position: relative; }
.wb-logo { font-size: 34px; font-weight: 700; color: #fff; text-align: center; letter-spacing: 2px; }
.wb-logo-en { text-align: center; color: #7ab3f0; font-size: 15px; letter-spacing: 3px; margin: 2px 0 6px; }
.wb-slogan { text-align: center; color: #8a93b8; font-size: 12px; margin-bottom: 14px; }
.wb-best { text-align: center; color: #ffd76a; font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.wb-btn { display: block; width: 100%; padding: 13px; margin-bottom: 10px; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.wb-btn:active { transform: translateY(2px); box-shadow: none; }
.wb-primary { background: linear-gradient(135deg,#3a7bd5,#2a5a9a); }
.wb-orange { background: linear-gradient(135deg,#e08a3a,#b56a20); }
.wb-red { background: linear-gradient(135deg,#c0504a,#8a3532); }
.wb-green2 { background: linear-gradient(135deg,#3aa56b,#2a7a4a); }
.wb-purple { background: linear-gradient(135deg,#8a5ac0,#6a3a9a); }
.wb-yellow { background: linear-gradient(135deg,#d5b83a,#a88a20); }
.wb-ghost2 { background: #2a3152; }
.wb-sm { padding: 9px; font-size: 14px; }
.wb-ghost { background: #2a3152; width: auto; box-shadow: none; }
.wb-row2 { display: flex; gap: 10px; }
.wb-row2 .wb-btn { margin-bottom: 0; }
.wb-row2 { margin-bottom: 10px; }
.wb-hud { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wb-hud-item { display: flex; flex-direction: column; align-items: center; flex: 1; }
.wb-hud-item span { font-size: 11px; color: #8a93b8; }
.wb-hud-item b { font-size: 19px; color: #ffd76a; }
.wb-lv { color: #7ab3f0; font-size: 13px; font-weight: 700; justify-content: center; }
.wb-hud .wb-ghost { padding: 6px 12px; margin: 0; }
.wb-wordbox { background: #2a4a8a; border-radius: 14px; padding: 18px; text-align: center; margin-bottom: 10px; }
.wb-cn { font-size: 32px; font-weight: 700; color: #fff; }
.wb-len { font-size: 13px; color: #b8ccf0; margin-top: 4px; }
.wb-phon { font-size: 14px; color: #9ac0f5; margin-top: 3px; }
.wb-timewrap { height: 5px; background: rgba(0,0,0,.3); border-radius: 3px; margin-top: 10px; overflow: hidden; }
#wbTimeBar { height: 100%; background: #3aa56b; width: 100%; transition: width .1s linear; }
.wb-fb { text-align: center; min-height: 24px; font-size: 15px; color: #ffd76a; margin-bottom: 8px; font-weight: 700; }
/* 立体字母块 */
.wb-grid3d { display: grid; gap: 9px; }
.wb3d { aspect-ratio: 1; font-size: 24px; font-weight: 700; background: linear-gradient(180deg,#4a6ab0,#3a4a8a); color: #fff; border: 1px solid #5a7ac0; border-radius: 9px; cursor: pointer; box-shadow: 0 4px 0 #1a2040, inset 0 1px 0 rgba(255,255,255,.2); transition: transform .08s; }
.wb3d:hover { transform: translateY(-2px); border-color: #ffd76a; }
.wb3d:active { transform: translateY(2px); box-shadow: 0 1px 0 #1a2040; }
.wb3d.sel { background: linear-gradient(180deg,#ffd76a,#d5a83a); color: #1a2040; border-color: #ffe89a; }
.wb3d-empty { aspect-ratio: 1; }
.wb-subhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wb-subtitle { font-size: 18px; font-weight: 700; color: #ffd76a; }
.wb-subbody { max-height: 50vh; overflow-y: auto; }
.wb-row { display: flex; justify-content: space-between; padding: 10px; background: #232a4a; border-radius: 8px; margin-bottom: 6px; color: #cdd5f0; font-size: 14px; }

/* ---------- 单词方块：全屏化布局（v89） ---------- */
#wgOverlay { align-items: stretch; justify-content: center; padding: 12px; }
.wg-game-card { width: 440px; max-width: 96vw; height: calc(100vh - 24px); max-height: calc(100vh - 24px); display: flex; flex-direction: column; padding: 16px 16px; overflow: hidden; }
#wgMenu, #wgGame, #wgSub { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#wgGame.hidden, #wgMenu.hidden, #wgSub.hidden { display: none; }
/* 词卡紧凑 */
.wb-wordbox { padding: 12px; margin-bottom: 8px; flex-shrink: 0; }
.wb-cn { font-size: 26px; }
.wb-fb { min-height: 20px; margin-bottom: 6px; flex-shrink: 0; font-size: 14px; }
.wb-hud { margin-bottom: 8px; flex-shrink: 0; }
/* 字母块网格占满剩余空间，字母块自适应填满 */
.wb-grid3d { flex: 1; min-height: 0; display: grid; gap: 8px; align-content: stretch; }
.wb3d { aspect-ratio: auto; height: 100%; min-height: 0; font-size: clamp(18px, 4vw, 28px); display: flex; align-items: center; justify-content: center; }
.wb3d-empty { aspect-ratio: auto; height: 100%; }
.wb-row2 { flex-shrink: 0; }

/* ---------- 字母块正方形（v94，对齐原游戏） ---------- */
.wb-grid3d { display: grid; gap: 8px; align-content: end; flex: 1; min-height: 0; }
.wb3d { aspect-ratio: 1; width: 100%; height: auto; min-height: 0; font-size: clamp(16px, 3.6vw, 26px); display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg,#4a6ab0,#3a4a8a); color: #fff; border: 1px solid #5a7ac0; border-radius: 9px; cursor: pointer; box-shadow: 0 4px 0 #1a2040, inset 0 1px 0 rgba(255,255,255,.2); }
.wb3d-empty { aspect-ratio: 1; width: 100%; height: auto; }

/* ---------- 固定网格 6×3（字母块缩小整齐，v95） ---------- */
.wb-grid3d { display: grid; gap: 10px; justify-content: center; align-content: center; flex: 1; }
.wb3d { width: 52px; height: 52px; aspect-ratio: 1; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg,#4a6ab0,#3a4a8a); color: #fff; border: 1px solid #5a7ac0; border-radius: 9px; cursor: pointer; box-shadow: 0 4px 0 #1a2040, inset 0 1px 0 rgba(255,255,255,.2); transition: transform .08s; }
.wb3d:hover { transform: translateY(-2px); border-color: #ffd76a; }
.wb3d:active { transform: translateY(2px); box-shadow: 0 1px 0 #1a2040; }
.wb3d.wb-used { opacity: .2; box-shadow: none; cursor: default; }
.wb-slot { display: flex; gap: 6px; justify-content: center; min-height: 44px; margin: 10px 0 4px; flex-wrap: wrap; }
.wb-scell { width: 36px; height: 40px; display: flex; align-items: center; justify-content: center; background: #232a4a; border: 2px solid #2a3152; border-radius: 8px; font-size: 19px; font-weight: 700; color: #ffd76a; }
.wb-scell.filled { border-color: #ffd76a; }
.wb-slot.wb-right .wb-scell { border-color: #3aa56b; background: #1c3a24; color: #6de39a; }
.wb-slot.wb-wrong .wb-scell { border-color: #c0504a; background: #3a1c1c; color: #f08a84; }

/* ---------- 下落式网格字母块（正方形缩小整齐，v96） ---------- */
.wb-grid3d { display: grid; gap: 7px; align-content: start; flex: 1; min-height: 0; justify-content: center; }
.wb3d { width: 44px; height: 44px; aspect-ratio: 1; font-size: 21px; font-weight: 700; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg,#4a6ab0,#3a4a8a); color: #fff; border: 1px solid #5a7ac0; border-radius: 8px; cursor: pointer; box-shadow: 0 3px 0 #1a2040, inset 0 1px 0 rgba(255,255,255,.2); transition: transform .08s; }
.wb3d:hover { transform: translateY(-2px); border-color: #ffd76a; }
.wb3d:active { transform: translateY(2px); box-shadow: 0 1px 0 #1a2040; }
.wb3d.sel { background: linear-gradient(180deg,#ffd76a,#d5a83a); color: #1a2040; border-color: #ffe89a; }
.wb3d.wb-used { opacity: .2; box-shadow: none; cursor: default; }
.wb3d-empty { width: 44px; height: 44px; }

/* 视频录制中状态 */
#btnVideo.rec-on { animation: recPulse 1s infinite; border-color: #e74c3c !important; }
@keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(231,76,60,.6); } 50% { box-shadow: 0 0 0 6px rgba(231,76,60,0); } }

/* 错题重练（SRS） */
.bp-srs { margin: 8px 0; padding: 10px 14px; border: 1px solid #4a3f2a; border-radius: 8px;
  background: rgba(255, 190, 90, 0.08); color: #ffd479; cursor: pointer; font-size: 14px; }
.bp-srs:hover { background: rgba(255, 190, 90, 0.15); }
#srsModal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex;
  align-items: center; justify-content: center; z-index: 90; }
#srsModal.hidden { display: none; }
#srsBox { background: #1c2233; border: 1px solid #33405e; border-radius: 10px; padding: 18px 22px;
  width: min(560px, 92vw); max-height: 80vh; overflow-y: auto; position: relative; }
#srsClose { position: absolute; top: 8px; right: 10px; background: none; border: none; color: #8a93b8; cursor: pointer; font-size: 16px; }
#srsTitle { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.srs-meta { font-size: 12px; color: #8a93b8; margin-bottom: 8px; }
.srs-q { background: #232a3f; border-radius: 8px; padding: 12px 14px; line-height: 1.7; margin-bottom: 12px; white-space: pre-wrap; }
#srsFoot { display: flex; gap: 8px; }
#srsAns { flex: 1; background: #232a3f; border: 1px solid #33405e; border-radius: 6px; color: #e8ecf7; padding: 8px 10px; }
#srsSubmit, #srsNext { background: #3b6fe0; color: #fff; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; }
#srsSubmit:disabled { opacity: .5; cursor: default; }
#srsFb { margin-top: 12px; }
.srs-ok { color: #58c98b; font-weight: 700; }
.srs-bad { color: #ff7a7a; font-weight: 700; }
.srs-fbtxt { margin: 6px 0; line-height: 1.6; }
.srs-ans { color: #ffd479; font-size: 13px; margin-bottom: 8px; }
.srs-done { text-align: center; padding: 30px 0; line-height: 2; }

/* 讲解展示板 */
#hallExpl { cursor: pointer; }
.ex-item { background: #232a3f; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.ex-meta { font-size: 12px; color: #8a93b8; margin-bottom: 6px; }
.ex-content { line-height: 1.7; white-space: pre-wrap; margin-bottom: 8px; }
.ex-foot { display: flex; align-items: center; justify-content: space-between; }
.ex-likes { color: #ffd479; font-size: 13px; }
.ex-mine { color: #8a93b8; font-size: 12px; }
.ex-like { background: none; border: 1px solid #33405e; border-radius: 6px; color: #8a93b8;
  padding: 4px 10px; cursor: pointer; font-size: 13px; }
.ex-like.on { border-color: #ffd479; color: #ffd479; }
.ex-empty { text-align: center; color: #8a93b8; padding: 24px 0; }
#exModal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex;
  align-items: center; justify-content: center; z-index: 90; }
#exModal.hidden { display: none; }
#exBox { background: #1c2233; border: 1px solid #33405e; border-radius: 10px; padding: 18px 22px;
  width: min(640px, 94vw); max-height: 82vh; overflow-y: auto; position: relative; }
#exClose { position: absolute; top: 8px; right: 10px; background: none; border: none; color: #8a93b8; cursor: pointer; font-size: 16px; }
#exTitle { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
#exFilters { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
#exFilters select { background: #232a3f; border: 1px solid #33405e; border-radius: 6px; color: #e8ecf7; padding: 6px 8px; }
#exFilters .btn-ghost.on, .btn-ghost.on { border-color: #ffd479; color: #ffd479; }
#exList { max-height: 46vh; overflow-y: auto; }
.ex-post-head { font-weight: 700; margin: 10px 0 6px; }
#exTaskSel { width: 100%; background: #232a3f; border: 1px solid #33405e; border-radius: 6px; color: #e8ecf7; padding: 8px 10px; margin-bottom: 8px; }
#exContent { width: 100%; min-height: 80px; background: #232a3f; border: 1px solid #33405e; border-radius: 6px;
  color: #e8ecf7; padding: 10px; resize: vertical; margin-bottom: 8px; font-family: inherit; }
.ex-draft-tag { color: #ff9f43; }
.ex-draft-tag { color: #ff9f43; }