/* ============ 龙语终端：龙巢物语 ============ */
@font-face {
  font-family: 'RuneHand';
  src: url('../assets/fonts/AaStylishFont_handwrite.ttf') format('truetype');
  font-display: swap;
}

:root {
  --bg: #050a06;
  --panel: #071009;
  --panel2: #0a140c;
  --green: #4be36a;
  --green-dim: #2c8a41;
  --green-dark: #16532a;
  --amber: #ffb24d;
  --amber-dim: #b57d31;
  --gray: #6f8273;
  --red: #ff5e5e;
  --blue: #5ec8ff;
  --purple: #c07dff;
  --gold: #ffd75e;
  --white: #d9e8dc;
  --el-jin: #ff7a45;   /* 火 */
  --el-cang: #58b9ff;  /* 冰 */
  --el-lan: #6ee06e;   /* 风 */
  --el-zhang: #c07dff; /* 雷 */
  --font-mono: 'Cascadia Mono', 'Consolas', 'Sarasa Mono SC', 'Noto Sans Mono CJK SC', '微软雅黑', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
body {
  background: #020503;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 15px;
  overflow: hidden;
}

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

/* ---------- 顶栏 ---------- */
#topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 14px;
  background: linear-gradient(180deg, #0c1a0f, #071009);
  border-bottom: 1px solid var(--green-dark);
  color: var(--green-dim);
  font-size: 13px;
  flex: 0 0 auto;
  text-shadow: 0 0 6px rgba(75, 227, 106, .25);
}
#topbar-logo { color: var(--green); margin-right: 18px; letter-spacing: 1px; }
#topbar-date { color: var(--amber-dim); }
#topbar-net { color: var(--green-dim); }
#topbar-net.offline { color: var(--red); }

/* ---------- 主体 ---------- */
#main-row { display: flex; flex: 1 1 auto; min-height: 0; }

#terminal-panel {
  position: relative;
  flex: 1 1 70%;
  min-width: 0;
  background: radial-gradient(ellipse at 50% 40%, #08130a 0%, var(--bg) 75%);
  border-right: 1px solid var(--green-dark);
}

#term-scroll {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 14px 18px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--green-dark) transparent;
  z-index: 2;
}
#term-scroll::-webkit-scrollbar { width: 8px; }
#term-scroll::-webkit-scrollbar-thumb { background: var(--green-dark); border-radius: 4px; }

#term-output { white-space: pre-wrap; word-break: break-word; line-height: 1.55; }

.t-line { animation: lineIn .12s ease-out; min-height: 1.2em; }
@keyframes lineIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; } }

/* 文本配色体系 */
.c-green  { color: var(--green); }
.c-dim    { color: var(--gray); }
.c-dark   { color: var(--green-dim); }
.c-amber  { color: var(--amber); text-shadow: 0 0 8px rgba(255, 178, 77, .35); }
.c-rune   {
  color: var(--amber);
  font-family: 'RuneHand', var(--font-mono);
  font-size: 1.25em;
  text-shadow: 0 0 10px rgba(255, 178, 77, .45);
  letter-spacing: 1px;
}
.c-white  { color: var(--white); }
/* 伤害/治疗数字：言灵手写体 */
.c-dmg {
  font-family: 'RuneHand', var(--font-mono);
  font-size: 1.35em;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 215, 94, .55);
  letter-spacing: 1px;
  padding: 0 2px;
}
.c-dmg.heal { color: var(--blue); text-shadow: 0 0 10px rgba(94, 200, 255, .5); }
.c-dmg.crit { color: #ff9d3d; text-shadow: 0 0 14px rgba(255, 157, 61, .75); font-size: 1.55em; }
.c-dmg.shield { color: var(--gray); text-shadow: none; font-size: 1.15em; }
.c-red    { color: var(--red); }
.c-blue   { color: var(--blue); }
.c-purple { color: var(--purple); }
.c-gold   { color: var(--gold); }
.c-title  { color: var(--white); font-weight: bold; }
.c-err    { color: var(--red); }
.c-warn   { color: var(--gold); }
.c-hint   { color: var(--gray); font-style: italic; }

.el-jin   { color: var(--el-jin); }
.el-cang  { color: var(--el-cang); }
.el-lan   { color: var(--el-lan); }
.el-zhang { color: var(--el-zhang); }
.el-mix   { color: var(--gold); }

/* 稀有度 */
.r-2 { color: #9fb8a5; }
.r-3 { color: #5ec8ff; }
.r-4 { color: #c07dff; }
.r-5 { color: #ffd75e; text-shadow: 0 0 8px rgba(255, 215, 94, .5); }
.r-6 { color: #ff8a8a; text-shadow: 0 0 10px rgba(255, 138, 138, .6); }

/* 可点击示例指令 */
.cmd-example {
  color: var(--blue);
  text-decoration: underline dotted;
  cursor: pointer;
}
.cmd-example:hover { color: #9fdcff; text-shadow: 0 0 8px rgba(94, 200, 255, .5); }

/* 表格样式输出 */
.t-table { border-collapse: collapse; margin: 2px 0; }
.t-table td, .t-table th {
  border: 1px solid var(--green-dark);
  padding: 1px 10px;
  color: var(--green);
  font-size: 14px;
  text-align: left;
}
.t-table th { color: var(--white); background: rgba(22, 83, 42, .25); }

/* HP条（终端内） */
.bar-outer {
  display: inline-block; width: 120px; height: 10px;
  border: 1px solid var(--green-dim); border-radius: 3px;
  vertical-align: middle; overflow: hidden; background: #06130a;
}
.bar-inner { display: block; height: 100%; background: var(--green); transition: width .3s; }
.bar-inner.low { background: var(--gold); }
.bar-inner.crit { background: var(--red); }
.bar-inner.gauge { background: var(--amber); }

/* ---------- 输入行 ---------- */
#term-input-row { display: flex; align-items: baseline; margin-top: 2px; }
#term-prompt { color: var(--green); white-space: pre; text-shadow: 0 0 6px rgba(75,227,106,.4); }
#term-input-wrap { flex: 1; position: relative; }
#term-input {
  width: 100%;
  background: transparent; border: none; outline: none;
  color: var(--white); font-family: inherit; font-size: inherit;
  caret-color: var(--green);
  text-shadow: 0 0 6px rgba(217, 232, 220, .25);
}
#term-input:disabled { opacity: .4; }

/* ---------- CRT 滤镜 ---------- */
#crt-overlay {
  pointer-events: none;
  position: absolute; inset: 0; z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.16) 0px, rgba(0, 0, 0, 0.16) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode: multiply;
}
#crt-overlay::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.38) 100%);
}
#crt-noise {
  pointer-events: none;
  position: absolute; inset: 0; z-index: 4;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: noiseShift .45s steps(3) infinite;
}
@keyframes noiseShift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-18px, 6px); }
  66% { transform: translate(10px, -12px); }
  100% { transform: translate(0, 0); }
}
body.crt-off #crt-overlay, body.crt-off #crt-noise { display: none; }

/* ---------- 侧边栏 ---------- */
#sidebar {
  flex: 0 0 300px;
  max-width: 300px;
  overflow-y: auto;
  background: var(--panel);
  padding: 10px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--green-dark) transparent;
}
.side-card {
  border: 1px solid var(--green-dark);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(22, 83, 42, .12), transparent);
  padding: 8px 10px;
  font-size: 13px;
}
.side-title {
  color: var(--amber);
  font-size: 12px;
  letter-spacing: 2px;
  border-bottom: 1px dashed var(--green-dark);
  padding-bottom: 4px; margin-bottom: 6px;
}
.side-row { display: flex; justify-content: space-between; margin: 2px 0; color: var(--green); }
.side-row .lbl { color: var(--gray); }

/* 龙伴卡片 */
.dragon-card {
  border: 1px solid var(--green-dark);
  border-radius: 5px;
  padding: 5px 8px;
  margin-bottom: 6px;
  background: rgba(7, 16, 9, .8);
}
.dragon-card .dc-head { display: flex; justify-content: space-between; align-items: baseline; }
.dragon-card .dc-name { color: var(--white); font-weight: bold; }
.dragon-card .dc-lv { color: var(--gray); font-size: 12px; }
.dragon-card .dc-el { font-size: 12px; }
.dc-hpbar {
  height: 8px; border: 1px solid var(--green-dim);
  border-radius: 3px; margin: 4px 0 2px; overflow: hidden; background: #06130a;
}
.dc-hpbar > span { display: block; height: 100%; background: var(--green); transition: width .3s; }
.dc-hpbar > span.low { background: var(--gold); }
.dc-hpbar > span.crit { background: var(--red); }
.dc-sub { display: flex; justify-content: space-between; color: var(--gray); font-size: 11px; }
.dc-status { color: var(--gold); font-size: 11px; min-height: 13px; }
.dragon-card.ko { opacity: .45; }
.dragon-card.active-turn { border-color: var(--amber); box-shadow: 0 0 8px rgba(255, 178, 77, .3); }
.dragon-card.enemy .dc-name { color: #ffb0b0; }

/* 行动顺序条 */
#order-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.order-chip {
  border: 1px solid var(--green-dark); border-radius: 3px;
  padding: 1px 6px; font-size: 11px; color: var(--green);
  background: rgba(7, 16, 9, .8);
}
.order-chip.enemy { color: #ffb0b0; }
.order-chip.now { border-color: var(--amber); color: var(--amber); }

/* 资源条 */
.res-bar-outer {
  height: 9px; border: 1px solid var(--green-dim); border-radius: 3px;
  overflow: hidden; background: #06130a; margin: 3px 0 6px;
}
.res-bar-outer > span { display: block; height: 100%; background: var(--green-dim); }

/* ---------- 备注编辑器 ---------- */
.hidden { display: none !important; }
#editor-modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .7);
  display: flex; align-items: center; justify-content: center;
}
#editor-box {
  width: min(720px, 92vw); height: min(480px, 82vh);
  background: var(--panel2);
  border: 1px solid var(--green);
  display: flex; flex-direction: column;
  box-shadow: 0 0 40px rgba(75, 227, 106, .2);
}
#editor-title { background: var(--green-dark); color: var(--white); padding: 4px 10px; font-size: 13px; }
#editor-text {
  flex: 1; background: transparent; border: none; outline: none; resize: none;
  color: var(--white); font-family: var(--font-mono); font-size: 14px; padding: 10px;
}
#editor-hint { color: var(--gray); font-size: 12px; padding: 4px 10px; border-top: 1px solid var(--green-dark); }

/* ---------- sl 小火车 ---------- */
#sl-train {
  position: fixed; top: 40%; left: 100vw; z-index: 60;
  color: var(--green); white-space: pre; font-family: var(--font-mono);
  font-size: 13px; line-height: 1.2;
  text-shadow: 0 0 8px rgba(75, 227, 106, .5);
  animation: slRun 7s linear forwards;
  pointer-events: none;
}
@keyframes slRun { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 640px)); } }

/* 响应式：窄屏收起侧栏 */
@media (max-width: 860px) {
  #sidebar { display: none; }
}