/* 永恒之骰 — 终端风格文字 UI（无任何图形/emoji，全部文字呈现）
 * 配色规则：除伤害数字（红色）与稀有度色外，全部文字黑底白字 */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #000000;
  --bg2: #0a0a0a;
  --bg3: #141414;
  --fg: #ffffff;
  --dim: #e0e0e0;
  --accent: #ffffff;
  --gold: #ffffff;
  --money: #b8860b; /* 金币暗金色（与稀有度橙金 --r6、亮金 --r7 明确区分） */
  --fp: #ffffff;
  --danger: #ff5252;
  --line: #3a3a3a;
  --r1: #8a8a8a; --r2: #e8e8e8; --r3: #3fd67a; --r4: #4d9fff;
  --r5: #b971ff; --r6: #ff9430; --r7: #ffd94d;
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Cascadia Mono", "JetBrains Mono", Consolas, "Courier New",
               "Noto Sans Mono CJK SC", "Microsoft YaHei UI", monospace;
  font-size: 14px;
  line-height: 1.55;
  overflow: hidden;
}

#app { display: flex; flex-direction: column; height: 100vh; }

/* 顶栏 */
#topbar {
  display: flex; gap: 18px; align-items: baseline;
  padding: 6px 14px; background: var(--bg2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap; overflow: hidden;
}
#tb-title { color: var(--fg); font-weight: bold; letter-spacing: 1px; }
#tb-loc { color: var(--fg); }
#tb-day { color: var(--dim); }
#topbar .spacer { flex: 1; }
#tb-gold { color: var(--money); }
#tb-fp { color: var(--fg); }

/* 主区 */
#main { flex: 1; display: flex; min-height: 0; }
#left { flex: 1; display: flex; flex-direction: column; min-width: 0; }

#screen {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
#screen::-webkit-scrollbar { width: 8px; }
#screen::-webkit-scrollbar-thumb { background: var(--line); }

/* v1.14：格挡反馈——失败：微红色调 + 中幅抖动；成功：仅小幅抖动 */
@keyframes fx-shake-mid {
  0%{ transform: translate(0,0); } 20%{ transform: translate(-7px,4px); }
  40%{ transform: translate(6px,-5px); } 60%{ transform: translate(-5px,3px); }
  80%{ transform: translate(4px,-2px); } 100%{ transform: translate(0,0); }
}
@keyframes fx-shake-sml {
  0%{ transform: translate(0,0); } 30%{ transform: translate(-3px,2px); }
  60%{ transform: translate(3px,-2px); } 100%{ transform: translate(0,0); }
}
@keyframes fx-red-tint {
  0%{ background-color: rgba(220,50,50,0.16); } 100%{ background-color: transparent; }
}
.fx-block-fail { animation: fx-shake-mid 0.25s ease-out, fx-red-tint 0.25s ease-out; }
.fx-block-ok   { animation: fx-shake-sml 0.18s ease-out; }
/* v1.17：玩家攻击反馈——命中小幅晃动，暴击大幅晃动 */
@keyframes fx-shake-hit {
  0%{ transform: translate(0,0); } 25%{ transform: translate(-4px,3px); }
  50%{ transform: translate(4px,-3px); } 75%{ transform: translate(-2px,1px); }
  100%{ transform: translate(0,0); }
}
@keyframes fx-shake-crit {
  0%{ transform: translate(0,0); } 15%{ transform: translate(-12px,7px); }
  30%{ transform: translate(10px,-8px); } 45%{ transform: translate(-9px,6px); }
  60%{ transform: translate(7px,-5px); } 80%{ transform: translate(-3px,2px); }
  100%{ transform: translate(0,0); }
}
.fx-hit  { animation: fx-shake-hit 0.2s ease-out; }
.fx-crit { animation: fx-shake-crit 0.3s ease-out; }
/* v1.17：玩家造成的伤害数字放大显示 */
.dmg-big { font-size: 20px; font-weight: 700; color: var(--danger); }
/* v1.17：魔法伤害数字按元素着色——冰霜亮蓝 / 火焰橙红 / 神圣米黄 / 混沌灰紫 / 雷电亮紫 */
.dmg-ice     { font-size: 20px; font-weight: 700; color: #40c4ff; }
.dmg-fire    { font-size: 20px; font-weight: 700; color: #ff6d3f; }
.dmg-holy    { font-size: 20px; font-weight: 700; color: #e8d5a0; }
.dmg-chaos   { font-size: 20px; font-weight: 700; color: #9c8fb5; }
.dmg-thunder { font-size: 20px; font-weight: 700; color: #b388ff; }
/* v1.17：生命首次低于 10% 的「死亡迫近」警示（大号暗红） */
.death-near { font-size: 26px; font-weight: 800; color: #8b0f0f; letter-spacing: 2px; }
@media (prefers-reduced-motion: reduce){
  .fx-block-fail, .fx-block-ok, .fx-hit, .fx-crit { animation: none; }
  .fx-block-fail { background-color: rgba(220,50,50,0.10); }
}

.line { white-space: pre-wrap; word-break: break-word; color: var(--fg); }
.line.bag-item { font-size: 15.5px; } /* 背包物品名称略增大 */
.line.pre { white-space: pre; overflow-x: auto; }
.line.dim { color: var(--dim); }
.line.sys { color: var(--fg); }
.line.warn { color: var(--danger); }
.line.gold { color: var(--money); }
.line.purple { color: #b971ff; } /* v1.17：紫色（湖中映像 Boss 名称） */
.line.fp { color: var(--fg); }
.line.hr { color: var(--line); }
.line.big { font-size: 15px; font-weight: bold; }
.line.center { text-align: center; }

/* 稀有度（唯一保留颜色的文字类别） */
.r1 { color: var(--r1); } .r2 { color: var(--r2); } .r3 { color: var(--r3); }
.r4 { color: var(--r4); } .r5 { color: var(--r5); } .r6 { color: var(--r6); }
.r7 { color: var(--r7); font-weight: bold; }
/* v1.12 料理品质：一星(白) 二星(绿) 三星(蓝) 四星(紫) 五星(金) */
.rq1 { color: #d0d0d0; }
.rq2 { color: #3fd67a; }
.rq3 { color: #4d9fff; }
.rq4 { color: #b971ff; }
.rq5 { color: #ffd94d; font-weight: bold; }
.curloc { color: #00d2ff; font-weight: bold; } /* 区域地图当前位置高亮 */

/* 伤害数字（唯一保留红色的文字类别） */
.dmg { color: var(--danger); font-weight: bold; }

/* 怪物前缀颜色标识（每种前缀一种颜色；精英为暗紫色） */
.mpfx-elite    { color: #8e44ad; font-weight: bold; } /* 暗紫 */
.mpfx-berserk  { color: #e64a19; } /* 橙红 */
.mpfx-swift    { color: #00acc1; } /* 青 */
.mpfx-ironwall { color: #90a4ae; } /* 灰蓝 */
.mpfx-giant    { color: #a1887f; } /* 棕 */
.mpfx-vampiric { color: #c2185b; } /* 绯红 */
.mpfx-venom    { color: #7cb342; } /* 毒绿 */
.mpfx-mirage   { color: #5c6bc0; } /* 靛蓝 */
.mpfx-cursed   { color: #aa00ff; } /* 亮紫 */
.mpfx-thorny   { color: #2e7d32; } /* 深绿 */
.mpfx-regen    { color: #00897b; } /* 墨绿 */

.hpbar, .mpbar, .expbar, .qtebar, .resbar, .stbar { color: var(--fg); }

/* 格挡倒计时：触发期间以浮层显示在界面正中央，结束后恢复为普通行 */
.line.qte-center {
  position: fixed; top: 38%; left: 50%; transform: translateX(-50%);
  z-index: 70; background: rgba(0, 0, 0, 0.94);
  padding: 14px 26px; border: 1px solid var(--fg);
  font-size: 20px; letter-spacing: 2px; white-space: pre;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.14);
}

/* 动作按钮区（文字按钮） */
#actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 14px; background: var(--bg2);
  border-top: 1px solid var(--line); min-height: 44px;
}
.abtn {
  font: inherit; color: var(--fg);
  background: var(--bg3); border: 1px solid var(--line);
  padding: 3px 10px; cursor: pointer; border-radius: 2px;
  white-space: nowrap;
}
.abtn:hover { border-color: var(--fg); color: var(--fg); }
.abtn.primary { border-color: var(--fg); color: var(--fg); font-weight: bold; }
.abtn.danger { border-color: var(--danger); color: var(--danger); }
/* v1.14 成就：金色页签/按钮（角色面板「成就」入口） */
.abtn.gold { border-color: var(--money); color: var(--money); font-weight: bold; }
.abtn:disabled { opacity: 0.4; cursor: default; }

/* 指令行 */
#cmdline {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--bg2);
}
#cmdline .prompt { color: var(--fg); font-weight: bold; }
#cmd {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--fg); font: inherit; caret-color: var(--fg);
}
#cmd::placeholder { color: var(--dim); opacity: 0.6; }

/* 侧栏 */
#sidebar {
  width: 300px; flex-shrink: 0; overflow-y: auto;
  background: var(--bg2); border-left: 1px solid var(--line);
  padding: 10px 12px; white-space: pre-wrap; word-break: break-word;
  font-size: 13px; color: var(--fg);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
#sidebar::-webkit-scrollbar { width: 6px; }
#sidebar::-webkit-scrollbar-thumb { background: var(--line); }
#sidebar .sb-sec { margin-bottom: 10px; }
#sidebar .sb-title { color: var(--fg); font-weight: bold; }

/* 中部字符画面板（左侧选项与右侧角色信息之间） */
#mapart {
  width: 300px; flex-shrink: 0; overflow: hidden;
  background: var(--bg); border-left: 1px solid var(--line);
  padding: 12px 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
#mapart .ma-title {
  color: var(--fg); font-size: 13px; font-weight: bold;
  letter-spacing: 2px; text-align: center;
}
#mapart .ma-sub { color: var(--dim); font-size: 11px; font-weight: normal; letter-spacing: 1px; }
#mapart pre {
  margin: 0; color: var(--dim); font-size: 12px; line-height: 1.3;
  font-family: inherit; white-space: pre; text-align: left;
}
@media (max-width: 1180px){ #mapart { display: none; } }

/* 底栏 */
#hintbar {
  padding: 4px 14px; color: var(--dim); font-size: 12px;
  background: var(--bg2); border-top: 1px solid var(--line);
  white-space: nowrap; overflow: hidden;
}

/* 右下角日志面板 */
#logbox {
  position: fixed; right: 12px; bottom: 34px; width: 330px; max-height: 210px;
  background: rgba(0, 0, 0, 0.92); border: 1px solid var(--line);
  display: flex; flex-direction: column; z-index: 50; font-size: 12px;
}
#logbox-title {
  padding: 3px 8px; color: var(--fg); border-bottom: 1px solid var(--line);
  cursor: pointer; user-select: none; flex-shrink: 0;
}
#logbox.collapsed #loglines { display: none; }
#loglines {
  overflow-y: auto; padding: 4px 8px; display: flex; flex-direction: column;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
#loglines::-webkit-scrollbar { width: 5px; }
#loglines::-webkit-scrollbar-thumb { background: var(--line); }
#loglines .lg { white-space: pre-wrap; word-break: break-word; color: var(--fg); }
#loglines .lg .t { color: var(--fg); opacity: 0.5; }

@media (max-width: 900px) {
  #sidebar { display: none; }
  #logbox { width: 260px; max-height: 160px; }
}