/* 星骸残响 · 手机版样式
   竖屏优先，触摸友好（按钮最小 44px），安全区适配刘海屏 */

:root{
  --bg:#0b0e14; --panel:#131a26; --panel2:#1a2434;
  --line:#243044; --text:#e5e7eb; --dim:#94a3b8;
  --cyan:#22d3ee; --warn:#f59e0b; --danger:#f43f5e; --green:#6ee7a0;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;padding:0;height:100%;width:100%;max-width:100vw;
  overflow:hidden;overscroll-behavior:none;
}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  user-select:none;
}
#app{height:100%;width:100%;max-width:100vw;position:relative;overflow:hidden}

.screen{
  position:absolute; inset:0; display:none; flex-direction:column; gap:6px;
  padding:calc(8px + var(--safe-t)) 10px calc(6px + var(--safe-b));
  overflow:hidden; max-width:100vw;
}
.screen.on{display:flex}
/* 任何长文本都不许把布局撑宽 */
.hint,.card .nm,.card .desc,.rival div{overflow-wrap:anywhere;word-break:break-word}

/* ---------- 标题 / 头部 ---------- */
.page-title{
  font-size:19px; text-align:center; margin:0; color:var(--cyan); font-weight:700;
  flex:none; line-height:1.3;
}
.head{display:flex;align-items:center;gap:8px;flex:none}
.head .page-title{flex:1;text-align:left}
.count{font-size:12px;color:var(--cyan);flex:none}

/* ---------- 通用件 ---------- */
.hint{font-size:12.5px;color:var(--dim);margin:0;text-align:center;line-height:1.45;flex:none}
.hint b{color:var(--warn)}
.energy{color:var(--cyan);font-weight:700}

button{
  font:inherit; color:var(--text); background:var(--panel2);
  border:1px solid var(--line); border-radius:10px;
  padding:11px 14px; min-height:44px; cursor:pointer;
}
button:active{transform:scale(.97)}
button:disabled{opacity:.4}
button.primary{background:#1b4a5a;border-color:#2a6b80;color:#fff;font-weight:700}
button.ghost{background:transparent}
button.big{width:100%;margin-top:8px;font-size:17px;padding:14px}
button.wide{flex:1}

/* ---------- 难度：独占一行 ---------- */
.diffs{display:flex;gap:6px;width:100%;flex:none}
.diffs button{flex:1;padding:8px 4px;min-height:38px;font-size:13.5px;border-radius:9px}
.diffs button.on{background:#1b6a7a;border-color:#2a8fa0;color:#fff;font-weight:700}

/* ---------- 卡片网格（选人 / 构筑 / 奖励） ---------- */
.cards,.grid{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; gap:7px; align-content:start; padding-bottom:6px;
  grid-auto-rows:min-content;
}
/* minmax(0,1fr) 才能让列真正等分，否则会被内容撑开导致右侧溢出 */
.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid{grid-template-columns:repeat(3,minmax(0,1fr))}

.card{
  background:var(--panel); border:2px solid transparent; border-radius:12px;
  padding:7px; display:flex; flex-direction:column; align-items:center; gap:4px;
  min-width:0; overflow:hidden;
  transition:border-color .12s, background .12s;
}
.card.pick{border-color:var(--warn);background:var(--panel2)}
.card.partner{border-color:#7fc8ff;background:var(--panel2)}
.card.sel{border-color:var(--cyan);background:var(--panel2)}
.card img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:8px}
.card .nm{font-size:13.5px;font-weight:700;text-align:center;line-height:1.25}
.card .sub{font-size:11px;color:var(--warn);text-align:center}
.card .meta{font-size:10.5px;color:var(--cyan);text-align:center}
.card .mech{font-size:11px;color:var(--warn);text-align:center;font-weight:700}
.card .desc{font-size:10px;color:var(--dim);text-align:center;line-height:1.3}

/* 构筑卡：更紧凑 */
.grid .card{padding:5px;border-radius:9px}
.grid .card .nm{font-size:11.5px}
.grid .card .sub{font-size:10px}
.grid .card .cost{position:absolute;top:4px;left:4px;background:#0b2a36;color:var(--cyan);
  font-size:11px;font-weight:700;padding:1px 6px;border-radius:6px}
.grid .card{position:relative}
.grid .card img{aspect-ratio:4/3}

.rival{
  background:var(--panel);border-radius:10px;padding:8px 10px;margin-bottom:8px;
  font-size:12px;line-height:1.55;
}
.rival .t{color:var(--danger);font-weight:700}
.rival .p{color:#e89aa8}
.rival .d{color:var(--dim)}

.footer{display:flex;gap:8px;padding-top:2px;flex:none}
.footer.center{justify-content:center}

.log{
  font-size:10.5px;color:var(--dim);height:40px;overflow:hidden;
  padding:3px 6px;background:#080c14;border-radius:7px;flex:none;line-height:1.4;
  white-space:pre-wrap;
}

/* ---------- 战斗 ---------- */
.fight-head{
  display:flex;justify-content:space-between;font-size:13px;color:var(--dim);
  flex:none;padding:2px 2px 0;
}
.board{
  flex:1; min-height:0; display:flex; flex-direction:column;
  justify-content:space-evenly; gap:6px; overflow:hidden;
}
.art-row{display:flex;gap:12px;align-items:center}
.art-row img{width:96px;height:96px;object-fit:contain;flex:none}
.art-row .info{flex:1;min-width:0}
.art-row .nm{font-size:16px;font-weight:700}
.art-row.enemy .nm{color:var(--danger)}
.art-row.me .nm{color:var(--cyan)}
.art-row .role{font-size:11.5px;color:var(--dim);margin-bottom:4px}

/* 敌人下三步预告 */
.forecast{
  font-size:11px;line-height:1.35;margin-bottom:4px;
  color:#a9b6c8;overflow-wrap:anywhere;
}
.forecast .now{color:var(--danger);font-weight:700}
.forecast .atk{color:#f0a0ad}
.forecast .def{color:#7fc8ff}
.forecast .sep{color:#4a5568;margin:0 2px}

.bar-wrap{display:flex;align-items:center;gap:6px;margin-top:4px}
.bar{flex:1;height:18px;background:#080c14;border-radius:5px;overflow:hidden;position:relative}
.bar i{display:block;height:100%;width:0;transition:width .25s}
.bar.hp i{background:var(--danger)}
.bar.hp.green i{background:var(--green)}
.bar.sync i{background:var(--cyan)}
.bar-wrap span{font-size:12px;min-width:76px;text-align:right;color:var(--text);
  text-shadow:0 1px 2px #000;white-space:nowrap}

/* 同步率区间说明：新手完全不知道这个系统在干什么 */
.sync-tip{font-size:11px;margin-top:3px;line-height:1.3}
.sync-tip.cold{color:#7fc8ff}
.sync-tip.norm{color:var(--dim)}
.sync-tip.hot{color:var(--warn);font-weight:700}
.sync-tip.max{color:var(--danger);font-weight:700}

.mid{text-align:center;padding:2px 0}
.dist{font-size:30px;font-weight:800;color:var(--cyan);letter-spacing:1px;line-height:1.15}
.dist.near{color:#f88a9b}
.fx{font-size:13px;color:var(--warn);min-height:17px;font-weight:700}

.acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;flex:none}
.act{font-size:14px;padding:13px 4px}
.act.mech{background:#3a2a5a;border-color:#5a3f8a;color:#e9d5ff;font-weight:700}
.act.mech:disabled{background:#1a1622;border-color:#2a2438;color:#5b5470}
.mech-desc{font-size:11px;color:#c9b6ff;text-align:center;min-height:15px;margin:0;flex:none}

.hand{
  display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:2px 0;flex:none;
}
.hcard{
  flex:none;width:106px;background:var(--panel);border:2px solid var(--line);
  border-radius:10px;padding:4px;position:relative;text-align:center;
}
.hcard.can{border-color:#2a6b80}
.hcard.cant{opacity:.42}
.hcard img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.hcard .cn{font-size:12px;font-weight:700;margin-top:3px;line-height:1.2}
.hcard .cs{font-size:10.5px;color:var(--warn)}
.hcard .cost{position:absolute;top:2px;left:2px;background:#0b2a36;color:var(--cyan);
  font-size:12px;font-weight:700;padding:0 6px;border-radius:5px}
.hcard .rg{font-size:10px;color:var(--dim)}

.log{
  font-size:11px;color:var(--dim);height:42px;overflow:hidden;
  padding:4px 7px;background:#080c14;border-radius:7px;flex:none;line-height:1.45;
  white-space:pre-wrap;
}

/* ---------- 受击反馈 ---------- */
.art-row{position:relative}
.art-row img{transition:filter .12s}

/* 受击：立绘闪白 + 整行抖动 */
@keyframes hitShake{
  0%{transform:translateX(0)}
  15%{transform:translateX(-7px)}
  30%{transform:translateX(6px)}
  45%{transform:translateX(-4px)}
  60%{transform:translateX(3px)}
  80%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}
.art-row.hit{animation:hitShake .38s ease-out}
.art-row.hit img{filter:brightness(3) saturate(.2) drop-shadow(0 0 14px #fff)}
.art-row.dying img{filter:brightness(.3) saturate(0);transition:filter .5s}

/* 伤害飘字 */
.float{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  font-size:26px;font-weight:900;pointer-events:none;z-index:20;
  text-shadow:0 2px 6px #000,0 0 10px currentColor;
  animation:floatUp .95s ease-out forwards;
}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,10px) scale(.6)}
  18%{opacity:1;transform:translate(-50%,-6px) scale(1.25)}
  35%{transform:translate(-50%,-14px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58px) scale(.95)}
}
.float.dmg{color:#ff5f76}
.float.miss{color:#94a3b8;font-size:19px}
.float.heal{color:#6ee7a0}
.float.blk{color:#7fc8ff;font-size:19px}
.float.crit{color:#f59e0b;font-size:32px}

/* 屏幕震动（致命一击） */
@keyframes screenShake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-4px,3px)}
  40%{transform:translate(4px,-3px)}
  60%{transform:translate(-3px,-2px)}
  80%{transform:translate(3px,2px)}
}
#app.shake{animation:screenShake .3s}

/* 手牌打出时的高亮脉冲 */
@keyframes cardPulse{
  0%{box-shadow:0 0 0 0 rgba(34,211,238,.7)}
  100%{box-shadow:0 0 0 14px rgba(34,211,238,0)}
}
.hcard.played{animation:cardPulse .4s}

/* ---------- 奖励 ---------- */
#scr-reward .cards{grid-template-columns:repeat(3,1fr);align-content:center}
#scr-reward .card .desc{font-size:10px}

/* 布局诊断条：显示视口宽度与是否横向溢出（点一下隐藏） */
#vp{
  position:fixed;left:0;right:0;bottom:0;z-index:99;
  background:#000c;color:#7dd3fc;font:10px/1.4 monospace;
  padding:2px 6px calc(2px + var(--safe-b));text-align:center;pointer-events:auto;
}
#vp.hide{display:none}
#vp b{color:var(--warn)}

/* 横屏时压缩立绘，让手牌有空间 */
@media (orientation:landscape) and (max-height:520px){
  .art-row img{width:60px;height:60px}
  .dist{font-size:20px}
  .hcard{width:76px}
}