/* 极简修仙 Web 版 · 水墨国风主题（桌面版图片素材） */
:root {
  --ink: #2e3d3a;            /* 墨色正文 */
  --ink-light: #6b7f7a;     /* 墨色次要 */
  --gold-dark: #7a5c2e;     /* 古铜金（标题） */
  --gold: #b8860b;
  --panel-text: #efe8d4;     /* 面板深色区文字（米白） */
  --panel-dim: #b9ac8d;      /* 面板深色区次要文字 */
  --red: #c0392b;
  --blue: #4a96e2;
  --jade: #7fd1a8;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  background: url(../assets/bg_main.jpg) center top / cover no-repeat fixed;
  background-color: #101817;
  color: var(--panel-text);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  min-height: 100vh;
}
/* 全页深色罩：把浅色水墨压成夜山雾境，面板自然坐进去；山水朦胧保留 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,20,20,.55) 0%, rgba(10,20,20,.55) 100%),
    radial-gradient(120% 90% at 50% 18%, rgba(14,24,22,.43) 0%, rgba(10,17,15,.73) 55%, rgba(6,11,10,.95) 100%),
    linear-gradient(180deg, rgba(12,20,18,.63) 0%, rgba(8,13,12,.77) 100%);
}

#app { max-width: 640px; margin: 0 auto; padding: 6px 14px 40px; position: relative; z-index: 1; }

/* 顶栏：标题横幅图。横幅是实底浅色 parchment，用 multiply 熔进深色背景，变成暗金牌匾 */
#topbar {
  height: 118px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  margin-bottom: 12px;
}
#topbar::before {
  content: ""; position: absolute; inset: 0;
  background: url(../assets/banner_title.png) center / contain no-repeat;
  mix-blend-mode: multiply;
  filter: brightness(.9);
}
#topbar h1 {
  position: relative; z-index: 1;
  font-size: 27px; letter-spacing: 8px; font-weight: 700;
  color: #e8c56b;
  text-shadow: 0 2px 6px rgba(0,0,0,.75), 0 0 12px rgba(0,0,0,.35);
  padding-left: 8px; /* 补偿 letter-spacing 居中 */
  margin-top: -3px;
  transform: translateX(4px); /* 光学校正：右移 4px */
}
#turn-info {
  position: absolute; right: 12px; bottom: 8px; z-index: 1;
  color: var(--panel-dim); font-size: 12px;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  display: flex; align-items: center; gap: 2px;
}

/* 角色面板：panel_character.png 做 border-image 边框（四角不变形，边框宽跟随 border-width） */
#char-panel {
  display: grid; grid-template-columns: 42px 1fr 80px; gap: 16px; align-items: center;
  border: 30px solid transparent;
  border-image: url(../assets/panel_character.png) 54 51 67 51 fill;
  padding: 8px 10px;
  min-height: 148px;
  color: var(--panel-text);
  margin-bottom: 0;
  background: rgba(30,50,50,.82);
  backdrop-filter: blur(8px);
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.5)); /* 坐进夜色 */
}
#avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #1e2a28;
  background: radial-gradient(circle at 35% 30%, #e8f5ee, #7fb9a8 70%);
  border: 2px solid #c9a961;
  box-shadow: 0 0 10px rgba(0,0,0,.35);
}
#char-main { flex: 1; min-width: 0; }
#char-name-line { font-size: 16px; margin-bottom: 6px; color: var(--panel-text); }
#char-name-line .dot { color: var(--panel-dim); }
#char-realm { color: var(--jade); font-weight: 600; }
.bar-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 12px; }
.bar-row label { width: 32px; color: var(--panel-dim); flex-shrink: 0; }
.bar { flex: 1; height: 10px; background: rgba(0,0,0,.45); border-radius: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.fill { height: 100%; width: 100%; border-radius: 5px; transition: width .4s ease; }
.fill.hp { background: linear-gradient(90deg, #d64a56, #ff7a7a); }
.fill.mp { background: linear-gradient(90deg, #4a96e2, #6aa8ff); }
.fill.exp { background: linear-gradient(90deg, #b8860b, #e8c56b); }
.bar-text { font-size: 11px; color: var(--panel-dim); min-width: 62px; text-align: right; }
#char-side { text-align: right; font-size: 13px; flex-shrink: 0; color: var(--panel-text); }
#pills { font-size: 15px; margin-bottom: 4px; }
#combo-line { color: var(--jade); font-size: 12px; min-height: 16px; }
#combo-line.warn { color: #ff8a8a; }
#quota-line { color: var(--panel-dim); font-size: 11px; }

/* 状态栏：淡金渐变细线分隔；状态文字转浅色，另起一行 */
#status-bar {
  margin: 16px 0 8px;
  padding: 0 6px;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  gap: 6px 14px; flex-wrap: wrap;
}
#status-bar::before {
  content: ""; display: block; flex: 0 0 auto;
  width: 580px; max-width: 92%;
  height: 1px; margin: 10px 0;
  background: linear-gradient(90deg, transparent, rgba(232,197,107,.35), transparent);
  opacity: 1;
}
#status-bar > div {
  color: var(--panel-text); white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
/* 潮汐图标 */
#tide-line::before {
  content: ""; display: inline-block; width: 18px; height: 18px;
  background: url(../assets/icon_tide_debuff.png) center / contain no-repeat;
  vertical-align: -3px; margin-right: 3px;
  filter: grayscale(1); opacity: .45;
}
#tide-line.active::before { filter: none; opacity: 1; }
#tide-line.active.buff::before { background-image: url(../assets/icon_tide_buff.png); }
#tide-line.active.debuff::before { background-image: url(../assets/icon_tide_debuff.png); }
#tide-line.active { color: #e8c56b; font-weight: 600; }
#trib-line.ready { color: #e8c56b; font-weight: 600; }

/* 动作按钮：圆形人物图按钮 */
#actions {
  display: flex; justify-content: space-around; align-items: flex-start;
  margin: 0 0 20px; padding: 0 6px 26px; /* 下方留出文字标签空间 */
}
.act-btn {
  width: 72px; height: 72px; border-radius: 50%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: transparent;
  border: none; cursor: pointer;
  font-size: 0; /* 隐藏 emoji，用图片代替 */
  position: relative;
  transition: transform .12s ease, filter .12s ease;
  filter: brightness(.9) drop-shadow(0 3px 6px rgba(60,50,30,.3));
  padding: 0;
}
.act-btn[data-action="meditate"] { background-image: url(../assets/btn_meditate.png); }
.act-btn[data-action="consume_pill"] { background-image: url(../assets/btn_pill.png); }
.act-btn[data-action="cultivate"] { background-image: url(../assets/btn_cultivate.png); }
.act-btn[data-action="wait"] { background-image: url(../assets/btn_wait.png); }
.act-btn span {
  position: absolute; bottom: -21px; left: 50%; transform: translateX(-50%);
  font-size: 13px; letter-spacing: 3px; padding-left: 3px;
  color: var(--panel-text); white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.5);
}
.act-btn:hover:not(:disabled) { filter: brightness(1) drop-shadow(0 3px 12px rgba(184,134,11,.55)); }
/* 特效1：按钮按下缩放回弹（保留） */
.act-btn:active:not(:disabled) { transform: scale(.92); }
.act-btn.active { filter: brightness(1) drop-shadow(0 3px 12px rgba(184,134,11,.55)); }
.act-btn:disabled { filter: grayscale(1); opacity: .4; cursor: not-allowed; }

/* 共同命运：潮汐激活时整组按钮统一发光并脉冲 */
#status-bar:has(#tide-line.active) + #actions .act-btn {
  box-shadow: 0 0 15px rgba(127,185,168,.6);
  animation: tidePulse 1.5s infinite;
}
@keyframes tidePulse {
  0%, 100% { box-shadow: 0 0 8px rgba(127,185,168,.4); }
  50% { box-shadow: 0 0 18px rgba(127,185,168,.8); }
}

.sys-btn {
  padding: 3px 10px; font-size: 12px; background: rgba(10,18,16,.55);
  color: var(--panel-dim); border: 1px solid rgba(255,255,255,.15); border-radius: 13px; cursor: pointer;
  margin-left: 6px;
  transition: all .12s ease;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.sys-btn:hover { border-color: var(--jade); color: var(--jade); }
.sys-btn:active { transform: scale(.94); }

/* 日志面板：panel_log.png */
#log-panel h2 {
  font-size: 15px; color: #e8c56b; letter-spacing: 5px; padding-left: 5px;
  margin: 6px 0 3px; font-weight: 600; text-align: center;
  text-shadow: 0 2px 5px rgba(0,0,0,.8);
}
#game-log {
  height: 120px; overflow-y: auto;
  border: 26px solid transparent;
  border-image: url(../assets/panel_log.png) 47 51 47 70 fill;
  padding: 6px 8px;
  font-size: 13px; line-height: 1.7; color: var(--panel-text);
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(30,50,50,.82);
  backdrop-filter: blur(8px);
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.5)); /* 坐进夜色 */
}
#game-log div { animation: logIn .3s ease; }
#game-log .tide { color: #e8c56b; }
#game-log .warn { color: #ff9a9a; }
#game-log .good { color: var(--jade); }
@keyframes logIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Toast 通知横幅（桌面版时序保留） */
#toast-layer {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
  z-index: 60; pointer-events: none;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: max-content; max-width: 90vw;
}
.toast {
  padding: 10px 20px;
  background: rgba(20, 32, 30, 0.88);
  border: 1px solid #7fb9a8;
  border-radius: 8px;
  color: var(--panel-text); font-size: 14px; letter-spacing: 1px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  animation: toastCycle 3s ease forwards;
}
.toast.warn { border-color: var(--red); color: #ffb3b3; }
.toast.good { border-color: var(--jade); color: var(--jade); }
@keyframes toastCycle {
  0% { opacity: 0; transform: translateY(-8px); }
  6.7% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* 特效层 */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }

/* 特效2：突破青玉扩散圆环（保留） */
.fx-ring {
  position: absolute; left: 50%; top: 32%; width: 40px; height: 40px;
  border: 3px solid var(--jade); border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ringExpand 1.2s ease-out forwards;
}
.fx-ring.r2 { animation-delay: .15s; border-color: var(--gold); }
.fx-ring.r3 { animation-delay: .3s; }
@keyframes ringExpand {
  0% { width: 40px; height: 40px; opacity: .95; }
  100% { width: 340px; height: 340px; opacity: 0; }
}
.fx-breakthrough-text {
  position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%);
  font-size: 30px; letter-spacing: 8px; color: #a5ecc9; font-weight: 700;
  text-shadow: 0 0 24px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.8);
  animation: breakText 1.6s ease-out forwards; white-space: nowrap;
}
@keyframes breakText {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}

/* 特效3：经验数字上浮（保留） */
.fx-exp {
  position: absolute; left: 50%; top: 40%;
  color: #e8c56b; font-size: 20px; font-weight: 700;
  text-shadow: 0 0 12px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.8);
  animation: expFloat 1.1s ease-out forwards; white-space: nowrap;
}
@keyframes expFloat {
  0% { opacity: 0; transform: translate(-50%, 0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -90px); }
}

/* 特效4：走火红色脉冲（保留） */
body.deviation #char-panel { animation: devPulse 1s ease-in-out 3; }
@keyframes devPulse {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 18px rgba(192,57,43,.8)); }
}
.fx-deviation-text {
  position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%);
  font-size: 28px; letter-spacing: 8px; color: #ff8a8a; font-weight: 700;
  text-shadow: 0 0 24px rgba(0,0,0,.9);
  animation: breakText 1.6s ease-out forwards; white-space: nowrap;
}

/* 渡劫特效（保留） */
.fx-trib {
  position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%);
  font-size: 28px; letter-spacing: 6px; font-weight: 700; white-space: nowrap;
  animation: breakText 1.8s ease-out forwards;
}
.fx-trib.ok { color: #e8c56b; text-shadow: 0 0 24px rgba(0,0,0,.9); }
.fx-trib.fail { color: #ff8a8a; text-shadow: 0 0 24px rgba(0,0,0,.9); }

/* 加载遮罩（与主界面同款夜色罩） */
#loading {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background:
    linear-gradient(180deg, rgba(12,20,18,.55) 0%, rgba(8,13,12,.68) 100%),
    url(../assets/bg_main.jpg) center / cover no-repeat;
  background-color: #101817;
  transition: opacity .5s ease;
}
#loading.hide { opacity: 0; pointer-events: none; }
.load-title { font-size: 34px; letter-spacing: 12px; padding-left: 12px; color: #e8c56b; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.load-sub { font-size: 13px; color: var(--panel-dim); }
.load-bar { width: 220px; height: 6px; background: rgba(0,0,0,.4); border-radius: 3px; overflow: hidden; border: 1px solid rgba(127,185,168,.35); }
#load-fill { height: 100%; width: 5%; background: #e8c56b; border-radius: 3px; transition: width .3s ease; }

/* 错误提示 */
#game-log .log-error { color: #ff9a9a; }

/* 小屏适配 */
@media (max-width: 420px) {
  #char-panel { border-width: 22px 20px 26px 20px; padding: 6px 6px; }
  #game-log { border-width: 20px 20px 20px 26px; padding: 4px 6px; height: 140px; }
  #status-bar { font-size: 11px; gap: 4px 8px; }
  .bar-row label { width: 28px; }
  .bar-text { min-width: 54px; font-size: 10px; }
}