/* ============================================================
 * LUXREALM · 小岛日记 —— 战斗页样式
 * ------------------------------------------------------------
 * 与参考模板的差异（有意为之）：
 *  ① 没有倒计时。游戏定位是「不舍得催你」，倒计时是反命题。
 *  ② 血条显示数值，且敌方血条不是纯红 —— 满血红条带压迫感。
 *  ③ 增加克制关系提示 —— 策略信息，不是压力。
 * 色调沿用主站令牌，保持手绘小岛的温润感。
 * ============================================================ */
:root{
  --bg:#F7F7EF; --ink:#304C3F; --text:#4A5C4E; --body:#56685A; --muted:#5C6E5E;
  --green:#486A54; --green-hi:#3D5E48; --green-deep:#345641;
  --accent:#D8925B; --accent-deep:#9A5A20;
  --gold:#C98A4B; --gold-lt:#F2CD94;
  --line:#E5E8DC; --card:#FFFFFF;
  --shadow-sm:0 4px 16px rgba(48,76,63,.08);
  --shadow-md:0 12px 28px rgba(48,76,63,.12);
  --r-sm:14px; --r-md:20px; --r-lg:24px; --r-pill:999px;
  --f-sc:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --tap:44px;
  --hp:#6E9B7A; --hp-en:#7B8FA8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--text); font-family:var(--f-sc);
  font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;color:inherit}
img{display:block}

/* ══════════ 战场 ══════════ */
.field{
  position:relative; flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; overflow:hidden;
}
.bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:opacity .45s ease, transform 8s ease-out;
  transform:scale(1.02);
}
/* 底部渐隐，让控制区与背景自然衔接 */
.vignette{
  position:absolute; inset:auto 0 0 0; height:58%;
  background:linear-gradient(to bottom,transparent,rgba(247,247,239,.55) 46%,rgba(247,247,239,.94));
  pointer-events:none;
}
.vignette::before{
  content:""; position:absolute; inset:0 0 auto 0; height:22%;
  background:linear-gradient(to bottom,rgba(48,76,63,.26),transparent);
}

/* ── 顶部 HUD ── */
.hud{
  position:relative; z-index:3;
  display:flex; align-items:flex-start; gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 0;
}
.icon-btn{
  width:var(--tap); height:var(--tap); flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.55); border-radius:var(--r-pill);
  background:rgba(255,255,255,.72); color:var(--green-deep);
  backdrop-filter:blur(6px); transition:transform .15s, background .2s;
}
.icon-btn:hover{background:rgba(255,255,255,.9)}
.icon-btn:active{transform:scale(.93)}
.icon-btn.ghost{color:var(--muted)}

.stage-name{flex:1; min-width:0; text-align:center; padding-top:3px}
.stage-name .sn{
  display:block; font-size:15px; font-weight:700; color:var(--ink);
  text-shadow:0 1px 3px rgba(255,255,255,.75); letter-spacing:.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stage-name .sr{
  display:inline-block; margin-top:2px; padding:2px 11px;
  background:rgba(255,255,255,.7); border-radius:var(--r-pill);
  font-size:11.5px; color:var(--muted); letter-spacing:.04em;
}
.stage-name .sr b{color:var(--green-deep); font-weight:700}
.stage-name .sep{margin:0 6px; opacity:.5}

/* ── 克制关系提示 ── */
.relation{
  position:relative; z-index:3;
  margin:10px auto 0; max-width:min(92%,420px);
  display:flex; justify-content:center; min-height:0;
}
.relation:not(:empty){padding-bottom:2px}
.rel{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 14px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
  background:rgba(255,255,255,.82); box-shadow:var(--shadow-sm);
  backdrop-filter:blur(4px);
  animation:relIn .35s cubic-bezier(.34,1.4,.64,1);
}
@keyframes relIn{from{opacity:0;transform:translateY(-6px) scale(.94)}to{opacity:1;transform:none}}
.rel.win{color:var(--green-deep)}
.rel.lose{color:var(--accent-deep)}
.rel .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.rel.win .dot{background:var(--green)}
.rel.lose .dot{background:var(--accent)}
.rel.neutral{color:var(--muted)}

/* ── 双方精灵 ── */
.fighters{
  position:relative; z-index:2; flex:1 1 auto; min-height:0;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:8px; padding:8px 6vw 12px;
}
.fighter{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0}
/* 固定容器 + object-fit:contain，让不同尺寸的精灵视觉大小一致，
   不会因为素材留白多少而一只大一只小 */
.sprite{
  position:relative; will-change:transform;
  width:min(34vw,148px); aspect-ratio:1/1;
}
/* 落地阴影：让精灵真正「站」在场景里，而不是浮在画面上 */
.sprite::after{
  content:""; position:absolute; left:50%; bottom:2%;
  width:62%; height:12%; transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(48,76,63,.26),transparent 70%);
  z-index:-1; pointer-events:none;
}
.sprite img{
  width:100%; height:100%; object-fit:contain; position:relative;
  filter:drop-shadow(0 8px 14px rgba(48,76,63,.22));
}
/* 站位：敌右我左，符合横版对峙的阅读顺序 */
.side-enemy .sprite{animation:floaty 4.2s ease-in-out infinite}
.side-player .sprite{animation:floaty 4.2s ease-in-out .5s infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* 出招 / 受击 */
.sprite.attack{animation:atk .42s cubic-bezier(.3,.9,.4,1)}
@keyframes atk{
  0%{transform:translateX(0)} 35%{transform:translateX(var(--dx,26px)) scale(1.06)}
  60%{transform:translateX(var(--dx,26px))} 100%{transform:translateX(0)}
}
.side-player{--dx:30px}
.sprite.hurt{animation:hurt .4s ease}
@keyframes hurt{
  0%,100%{transform:translateX(0); filter:drop-shadow(0 8px 14px rgba(48,76,63,.22))}
  20%{transform:translateX(-8px); filter:drop-shadow(0 8px 14px rgba(180,105,62,.5)) brightness(1.12)}
  45%{transform:translateX(6px)}
  70%{transform:translateX(-3px)}
}
.sprite.down{opacity:.32; filter:grayscale(.85)}
.sprite.heal{animation:healUp .6s ease}
@keyframes healUp{
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px) brightness(1.14)}
}
.sprite.crit{animation:crit .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes crit{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}}

/* 气泡台词 */
.say{
  max-width:min(46vw,190px); min-height:22px;
  padding:4px 12px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.92); box-shadow:var(--shadow-sm);
  font-size:12.5px; color:var(--body); text-align:center;
  opacity:0; transform:translateY(6px) scale(.94);
  transition:opacity .28s, transform .28s;
}
.say.show{opacity:1; transform:none}
.side-player .say{border-radius:var(--r-pill) var(--r-pill) var(--r-pill) 4px}
.side-enemy .say{border-radius:var(--r-pill) var(--r-pill) 4px var(--r-pill)}

/* ── 战斗日志 ── */
.ticker{
  position:relative; z-index:3;
  padding:8px 18px calc(env(safe-area-inset-bottom,0px) + 10px);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  min-height:56px; pointer-events:none;
}
.tk{
  font-size:12.5px; color:var(--body); text-align:center;
  padding:3px 14px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);
  animation:tkIn .3s ease;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tk:first-child{font-weight:600; color:var(--ink); background:rgba(255,255,255,.88)}
.tk.dmg{color:var(--accent-deep)}
.tk.heal{color:var(--green-deep)}
.tk.fade{opacity:.5}
@keyframes tkIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ══════════ 控制区 ══════════ */
.console{
  position:relative; z-index:4; flex-shrink:0;
  background:var(--bg); border-top:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:14px 16px calc(env(safe-area-inset-bottom,0px) + 14px);
  box-shadow:0 -8px 28px rgba(48,76,63,.08);
  display:flex; flex-direction:column; gap:12px;
}

/* ── 血条 ── */
.vitals{display:flex; gap:14px}
.vital{flex:1; min-width:0}
.v-head{display:flex; align-items:baseline; gap:6px; margin-bottom:5px}
.v-name{font-size:13.5px; font-weight:700; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.v-el{
  font-size:10.5px; padding:1px 7px; border-radius:var(--r-pill);
  color:#fff; flex-shrink:0; letter-spacing:.02em;
}
/* 状态值徽章：亲密度的直接视觉锚点 */
.v-bond{
  margin-left:auto; flex-shrink:0;
  font-size:10.5px; font-weight:700; padding:1px 8px; border-radius:var(--r-pill);
  background:rgba(72,106,84,.12); color:var(--green-deep);
  font-variant-numeric:tabular-nums;
}
/* 超过 100% 才用金色强调 —— 让人一眼看出「养得不错」 */
.v-bond.boosted{background:rgba(201,138,75,.2); color:var(--gold-deep)}
.bar{
  height:9px; border-radius:var(--r-pill); overflow:hidden;
  background:rgba(72,106,84,.15);
}
.bar i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--hp),#8FB79A);
  border-radius:var(--r-pill);
  transition:width .6s cubic-bezier(.4,0,.2,1), background .4s;
}
/* 敌方血条用偏蓝的灰调，而非红色 —— 避免压迫感 */
.bar.enemy i{background:linear-gradient(90deg,var(--hp-en),#9AAEC4)}
.bar i.low{background:linear-gradient(90deg,#C89A6E,#D8925B)}
.v-foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:4px; font-size:11.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.shield{
  padding:0 7px; border-radius:var(--r-pill);
  background:rgba(72,106,84,.13); color:var(--green-deep); font-weight:600;
}

/* ── 技能 / 道具 ── */
.skills,.items{display:flex; gap:8px}
.sk{
  flex:1; min-width:0; min-height:56px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:8px 4px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--card);
  box-shadow:var(--shadow-sm);
  transition:transform .15s, box-shadow .2s, border-color .2s, opacity .2s;
}
.sk:hover:not([aria-disabled="true"]){border-color:var(--green); box-shadow:var(--shadow-md)}
.sk:active:not([aria-disabled="true"]){transform:scale(.96)}
.sk[aria-disabled="true"]{opacity:.42; cursor:default}
.sk .n{font-size:12.5px; font-weight:700; color:var(--ink); text-align:center; line-height:1.25}
.sk .r{font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.sk.adv{border-color:var(--gold); background:linear-gradient(160deg,#FFF9EC,#FFF3DC)}

.items{gap:6px; flex-wrap:wrap}
.it{
  flex:1 1 0; min-width:52px; min-height:44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-radius:var(--r-sm); border:1px solid var(--line); background:var(--card);
  transition:transform .15s, border-color .2s, opacity .2s;
}
.it:hover:not([aria-disabled="true"]){border-color:var(--green)}
.it:active:not([aria-disabled="true"]){transform:scale(.94)}
.it[aria-disabled="true"]{opacity:.36; cursor:default}
.it .e{font-size:17px; line-height:1}
.it .n{font-size:10px; color:var(--muted); white-space:nowrap}
.it .c{font-size:10px; color:var(--green-deep); font-weight:700; font-variant-numeric:tabular-nums}

/* ── 自动战斗 ── */
.auto{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:7px;
  min-height:var(--tap); padding:0 18px;
  border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--card); color:var(--green-deep); font-size:13px; font-weight:600;
  transition:background .25s, color .25s, border-color .25s;
}
.auto[aria-pressed="true"]{background:var(--green); border-color:var(--green); color:#fff}

/* ══════════ 浮层 ══════════ */
.sheet{
  position:fixed; inset:0; z-index:50;
  background:rgba(48,76,63,.42); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .25s ease;
}
.sheet[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet-in{
  width:100%; max-width:440px; max-height:88vh; overflow-y:auto;
  background:var(--bg); border-radius:var(--r-lg);
  padding:26px 22px; text-align:center;
  box-shadow:0 24px 60px rgba(48,76,63,.28);
  animation:up .32s cubic-bezier(.34,1.3,.64,1);
}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.sheet-in h1{margin:0 0 6px; font-size:20px; color:var(--ink); font-weight:700}
.sheet-sub{margin:0 0 20px; font-size:13px; color:var(--muted); line-height:1.7}

/* ── 我方出战卡片：接小岛的那只 ── */
.myline{
  display:flex; align-items:center; gap:12px; text-align:left;
  padding:12px 14px; margin-bottom:16px;
  border-radius:var(--r-sm); background:var(--card);
  border:1px solid var(--line);
}
.myline:empty{display:none}
.ml-img{
  width:58px; height:58px; flex-shrink:0; object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(48,76,63,.18));
}
.ml-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.ml-txt b{font-size:15px; color:var(--ink); font-weight:700; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ml-tag{
  align-self:flex-start; font-size:10.5px; padding:1px 8px; border-radius:var(--r-pill);
  background:rgba(72,106,84,.12); color:var(--green-deep); font-weight:600;
}
.ml-tag.borrowed{background:rgba(216,146,91,.16); color:var(--accent-deep)}
.ml-pct{
  font-style:normal; font-size:12px; font-weight:700; color:var(--gold-deep);
  font-variant-numeric:tabular-nums;
}
.ml-say{
  margin:0; font-size:11.5px; color:var(--muted); line-height:1.6; flex-shrink:0;
  max-width:34%; text-align:right; font-style:italic;
}
@media (max-width:400px){ .ml-say{display:none} }

.stage-list{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.stg{
  display:flex; align-items:center; gap:11px; text-align:left;
  padding:11px 14px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--card);
  transition:border-color .2s, background .2s, transform .15s;
}
.stg:hover{border-color:var(--green)}
.stg:active{transform:scale(.985)}
.stg[aria-pressed="true"]{
  border-color:var(--green); background:#EFF4EC;
  box-shadow:inset 0 0 0 1px var(--green);
}
.stg .nm{flex:1; min-width:0}
.stg .nm b{display:block; font-size:13.5px; color:var(--ink); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.stg .nm span{font-size:11.5px; color:var(--muted)}
.stg .tag{
  font-size:10.5px; padding:2px 8px; border-radius:var(--r-pill); flex-shrink:0;
  background:rgba(216,146,91,.16); color:var(--accent-deep); font-weight:600;
}
.stg .tag.ev{background:rgba(201,138,75,.18)}

.pick-row{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:18px}
.pk{
  width:72px; padding:7px 4px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--card);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:border-color .2s, transform .15s, box-shadow .2s;
}
.pk:hover{border-color:var(--green)}
.pk[aria-pressed="true"]{
  border-color:var(--green); background:#EFF4EC; box-shadow:inset 0 0 0 1px var(--green);
}
.pk img{width:42px; height:42px; object-fit:contain}
.pk .n{font-size:10.5px; color:var(--ink); font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:100%}

.primary,.secondary{
  display:block; width:100%; min-height:var(--tap);
  border-radius:var(--r-pill); font-size:15px; font-weight:700;
  transition:transform .15s, filter .2s;
}
.primary{background:var(--green); color:#fff; border:none}
.primary:hover{filter:brightness(1.08)}
.primary:active,.secondary:active{transform:scale(.98)}
.secondary{background:var(--card); color:var(--green-deep); border:1px solid var(--line); margin-top:9px}
.back{display:block; margin-top:16px; font-size:13px; color:var(--muted); text-decoration:none}
.back:hover{color:var(--green-deep)}

.result-emoji{font-size:44px; line-height:1; margin-bottom:10px}
.drops{
  display:flex; flex-direction:column; gap:6px; margin:0 0 18px;
  padding:14px; border-radius:var(--r-sm); background:var(--card); text-align:left;
}
.drops:empty{display:none}
.drop{display:flex; justify-content:space-between; align-items:center; font-size:13px}
.drop .dn{color:var(--body)}
.drop .dv{color:var(--green-deep); font-weight:700; font-variant-numeric:tabular-nums}
/* 结算面板的补充说明 */
.drop-note{font-size:11.5px; color:var(--muted); text-align:center; margin-top:2px; line-height:1.6}
.drop-note.levelup{color:var(--gold-deep); font-weight:600}
.drop-note.lucky{color:var(--accent-deep)}
.result-btns{display:flex; flex-direction:column}

/* ── Toast ── */
.toast{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 96px);
  transform:translateX(-50%) translateY(10px);
  z-index:80; max-width:86vw;
  padding:9px 18px; border-radius:var(--r-pill);
  background:rgba(48,76,63,.94); color:#fff; font-size:13px; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  box-shadow:0 8px 24px rgba(48,76,63,.3);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ══════════ 宽屏：战场与控制区并排 ══════════ */
@media (min-width:900px){
  body{flex-direction:row}
  .field{flex:1 1 58%}
  .console{
    flex:0 0 380px; border-top:none; border-left:1px solid var(--line);
    border-radius:0; justify-content:center; gap:18px; padding:26px 24px;
  }
  .fighters{padding:20px 8vw 10px}
  .sprite{width:min(24vw,168px)}
  .skills{gap:10px}
  .sk{min-height:70px}
  .it{min-height:54px}
  .auto{align-self:center}
}
@media (min-width:1200px){
  .sprite{width:min(20vw,190px)}
}

/* ══════════ 矮屏（横屏手机）：压缩纵向占用 ══════════ */
@media (max-height:560px) and (orientation:landscape){
  .fighters{gap:4px}
  .sprite{width:min(14vw,92px)}
  .ticker{min-height:38px; padding-top:4px}
  .tk:not(:first-child){display:none}
  .console{gap:8px; padding-top:10px}
  .skills{gap:6px}
  .sk{min-height:46px}
}

/* ══════════ 动效偏好 ══════════ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .bg{transform:none}
}
/* ══════════ 调试面板入口 ══════════
 * 战斗页是全屏战场，不能有任何可见元素挤占布局。
 * 用绝对定位 + 0 尺寸把它移出视觉，但仍可接收点击。 */
#dbgTap{
  position:fixed; left:0; bottom:0;
  width:44px; height:44px;
  opacity:0; z-index:1;
  cursor:pointer;
}