/* ==========================================================================================
   screens/result.css — settlement (js/screens/result.js). Research 06 §10.6: mint 模拟完成 headline,
   huge "通过回合" numerals, boss medallions, per-player cards with lineup, bonds, stats and 评语.
   ========================================================================================== */

.result__bg { position: absolute; inset: 0; z-index: 0; background: var(--result-bg, none) center / cover no-repeat; opacity: .55; filter: saturate(.9); }
.result__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 11, 10, .72), rgba(8, 11, 10, .5) 40%, rgba(8, 11, 10, .88) 62%); }
.result__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(rgba(78, 216, 175, .04) 1px, transparent 1px) 0 0 / .6rem .6rem, linear-gradient(90deg, rgba(78, 216, 175, .04) 1px, transparent 1px) 0 0 / .6rem .6rem;
  -webkit-mask-image: radial-gradient(70% 70% at 25% 50%, #000, transparent); mask-image: radial-gradient(70% 70% at 25% 50%, #000, transparent); }
.result__main { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: 5.6rem 1fr; gap: .5rem; padding: .36rem .5rem .3rem .6rem; }
.result__hero { display: flex; flex-direction: column; align-items: flex-start; gap: .16rem; padding-top: .3rem; min-height: 0; }
.result__summary { display: flex; flex-direction: column; align-items: flex-start; gap: .16rem; min-height: 0; width: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.result__logoimg { height: 1.1rem; width: auto; opacity: .92; }
.result__headline { font-size: calc(.96 * var(--t)); font-weight: 900; letter-spacing: .12em; line-height: 1.05; color: var(--mint-400); text-shadow: 0 0 .4rem rgba(23, 249, 183, .45); animation: head-in 600ms var(--ease-out); }
.result.is-lose .result__headline { color: var(--red-premium); text-shadow: 0 0 .4rem rgba(255, 60, 60, .4); }
@keyframes head-in { from { opacity: 0; letter-spacing: .5em; } }
.result__sub { font-size: calc(.2 * var(--t)); color: var(--text-lo); letter-spacing: .1em; }
.result__rounds { display: flex; align-items: baseline; gap: .12rem; margin-top: .1rem; }
.result__rlabel { font-size: calc(.22 * var(--t)); color: var(--text-md); letter-spacing: .14em; }
.result__rnum { font-size: calc(1.5 * var(--t)); line-height: .9; font-weight: 700; color: #fff; }
.result__rof { font-size: calc(.4 * var(--t)); color: var(--text-dim); }
.result__medals { display: flex; gap: .24rem; margin-top: .12rem; }
.medal { position: relative; width: 1.1rem; display: flex; flex-direction: column; align-items: center; gap: .08rem; }
.medal img { width: .96rem; height: .96rem; object-fit: cover; border-radius: 50%; border: 3px solid var(--line-3); background: #151a18; filter: grayscale(.7) brightness(.7); }
.medal.is-done img { border-color: var(--gold); filter: none; box-shadow: 0 0 .24rem rgba(255, 198, 0, .4); }
.medal--hidden.is-done img { border-color: var(--red-premium); box-shadow: 0 0 .24rem rgba(255, 60, 60, .4); }
.medal__check { position: absolute; right: .04rem; top: .64rem; width: .32rem; height: .32rem; display: grid; place-items: center; background: var(--text-dim); color: #fff; border-radius: 50%; }
.medal.is-done .medal__check { background: var(--gold); color: #1d1400; }
.medal__check .icon { width: .2rem; height: .2rem; }
.medal__label { font-size: calc(.14 * var(--t)); color: var(--text-lo); }
.result__time { font-size: calc(.16 * var(--t)); }
.result__time b { color: var(--text-hi); }

.result__players { display: flex; flex-direction: column; gap: .1rem; min-height: 0; overflow: auto; padding-right: .06rem; }
.result__players > :first-child { margin-top: auto; }
.result__players > :last-child { margin-bottom: auto; }
.rcard {
  display: flex; flex-direction: column; gap: .09rem; padding: .12rem .18rem .14rem; background: rgba(11, 15, 13, .9); border: 1px solid var(--line);
  border-left: 3px solid var(--line-3); animation: card-in var(--t-slow) var(--ease-out) backwards;
}
.rcard:nth-child(3) { animation-delay: 80ms; } .rcard:nth-child(4) { animation-delay: 160ms; } .rcard:nth-child(5) { animation-delay: 240ms; }
@keyframes card-in { from { opacity: 0; transform: translateX(.3rem); } }
.rcard.is-self { border-left-color: var(--mint-500); background: linear-gradient(90deg, rgba(78, 216, 175, .08), rgba(11, 15, 13, .9) 40%); }
.rcard.is-dead { opacity: .8; }
.rcard__head { display: grid; grid-template-columns: auto minmax(1.5rem, 2.1rem) minmax(0, 1fr) auto 2.3rem; gap: .18rem; align-items: center; }
.rcard__head .pavatar { --pa: .6rem; }
.rcard__who { display: flex; flex-direction: column; gap: .03rem; min-width: 0; }
.rcard__name { font-size: calc(.22 * var(--t)); display: flex; align-items: center; gap: .08rem; }
.rcard__ai, .rcard__you { font-size: calc(.11 * var(--t)); padding: 0 .05rem; font-weight: 700; }
.rcard__ai { background: #a9c3d8; color: #0b1520; }
.rcard__you { background: var(--mint-500); color: var(--text-on-mint); }
.rcard__band { display: inline-flex; align-items: center; gap: .06rem; font-size: calc(.15 * var(--t)); color: var(--text-lo); }
.rcard__round { display: flex; flex-direction: column; align-items: center; }
.rcard__round b { font-size: calc(.34 * var(--t)); line-height: 1; color: #fff; }
.rcard__gain { display: flex; gap: .08rem; margin-top: .03rem; font-size: calc(.13 * var(--t)); color: var(--gold); }
.rcard__gain span { display: inline-flex; align-items: center; gap: .02rem; }
.rcard__gain .icon { width: .14rem; height: .14rem; }
.rcard__gain b { font-size: calc(.14 * var(--t)); color: var(--gold); }
.rcard__title { display: flex; align-items: center; gap: .08rem; padding: .06rem .14rem .06rem .06rem; border: 1px solid rgba(255, 198, 0, .4); background: rgba(255, 198, 0, .06); min-width: 0; }
.rcard__title--none { border-style: dashed; border-color: var(--line); background: none; height: .64rem; }
.rcard__title > span { display: flex; flex-direction: column; }
.rcard__title b { font-size: calc(.19 * var(--t)); color: var(--gold); }
.rcard__ticon { width: .5rem; height: .5rem; object-fit: contain; }
.rcard__title .icon { width: .3rem; height: .3rem; color: var(--gold); }
.rcard__mid { display: flex; flex-direction: column; justify-content: center; gap: .06rem; min-width: 0; }
.rcard__lineup .uthumb { --ut: .46rem; }
.rcard__lineup { display: flex; flex-wrap: wrap; gap: .05rem; }
.rcard__noinfo { font-family: var(--font-display); font-size: calc(.14 * var(--t)); letter-spacing: .3em; color: var(--text-dim); padding: .14rem .2rem; border: 1px dashed var(--line-2); }
.rcard__bonds { display: flex; gap: .05rem; flex-wrap: wrap; }
.rbond { display: inline-flex; align-items: center; gap: .04rem; padding: .01rem .07rem .01rem .03rem; border: 1px solid var(--line-2); font-size: calc(.13 * var(--t)); color: var(--text-lo); }
.rbond .bglyph { width: .2rem; height: .2rem; }
.rbond.is-on { border-color: var(--mint-800); color: var(--mint-400); }
.rcard__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; }
.rstat { display: flex; align-items: baseline; justify-content: space-between; gap: .06rem; padding: .05rem .1rem; background: #0e1210; box-shadow: 0 0 0 1px var(--line); font-size: calc(.13 * var(--t)); color: var(--text-lo); white-space: nowrap; min-width: 0; }
.rstat b { font-size: calc(.18 * var(--t)); color: #fff; }
.rstat.is-best b { color: var(--gold); }
.result__foot { flex: 0 0 auto; margin-top: auto; padding-top: .2rem; display: flex; }
.result__foot .btn { min-width: 3.4rem; }

/* ---- 伤害看板（js/screens/dmgBoard.js，移植自工坊包 dmg-board）--------------------------------
   .result__main 是两列网格（hero | players），看板跨满整行贴在底下。
   !!! 布局要点 !!! `.screen { overflow: hidden }`（theme.css）且 `.result__main` 是 `flex:1; min-height:0`，
   加进来的第三行会让总高度超过视口、被外层裁掉 —— 所以：
     * 网格显式声明两行：第一行（hero|players）占满剩余空间，第二行（看板）按内容高度自适应；
     * 看板自身 `overflow: auto` 兜底：表很长（列多 / 人多）时在**它内部**滚动，不把整屏顶掉。
   数字一列列对齐（tabular-nums + 右对齐）；颜色只用主题变量，换主题跟着换。 */
.result__main { grid-template-rows: minmax(0, 1fr) auto; }
.dmg-board {
  grid-column: 1 / -1;
  max-height: 42vh;
  overflow: auto;
  scrollbar-width: thin;
  margin-top: .16rem;
  padding: .1rem .14rem .08rem;
  background: rgba(14, 18, 16, .82);
  border: 1px solid var(--line-2);
  border-radius: max(.06rem, 6px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  color: var(--text-md);
  font-size: max(.14rem, 11px);
}
.dmg-board__head { display: flex; align-items: baseline; gap: .1rem; padding-bottom: .06rem; flex-wrap: wrap; }
.dmg-board__icon { width: max(.2rem, 12px); height: max(.2rem, 12px); color: var(--mint-400); align-self: center; }
.dmg-board__head b { color: var(--text-hi); font-size: max(.17rem, 12px); letter-spacing: .06em; }
.dmg-board__head small { color: var(--text-dim); }
.dmg-board__head .micro { margin-left: auto; }
/* 列多时横向滚动，不把结算屏撑破 */
.dmg-board__wrap { overflow-x: auto; scrollbar-width: thin; }
.dmg-board table { width: 100%; border-collapse: collapse; table-layout: auto; }
.dmg-board th, .dmg-board td { padding: max(.03rem, 3px) max(.07rem, 6px); text-align: right; white-space: nowrap; }
.dmg-board th { color: var(--text-dim); font-weight: 500; font-size: max(.12rem, 10px); border-bottom: 1px solid var(--line); }
.dmg-board td { border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.dmg-board tbody tr:first-child td { border-top: none; }

.dmg-board__rank { width: 1.8em; color: var(--text-dim); text-align: right; }
.dmg-board__name { text-align: left; color: var(--text-hi); max-width: 14em; overflow: hidden; text-overflow: ellipsis; }
.dmg-board__who { font-weight: 700; }
.dmg-board__seat, .dmg-board__tag { margin-left: max(.05rem, 4px); color: var(--text-dim); font-size: max(.11rem, 9px); }
.dmg-board__tag.is-you { color: var(--mint-400); }

/* 第一名与伤害那一列：看板的第一眼 */
.dmg-board tr.is-top .dmg-board__rank { color: var(--gold); font-weight: 700; }
.dmg-board tr.is-top .dmg-board__name { color: var(--mint-400); }
.dmg-board tr.is-self { background: rgba(78, 216, 175, .06); }
.dmg-board tr.is-dead .dmg-board__who { color: var(--text-lo); }
.dmg-board__dmg { position: relative; color: var(--text-hi); }
.dmg-board__bar {
  position: absolute; left: 0; bottom: 1px;
  width: var(--w, 0%); height: 2px; border-radius: 1px;
  background: rgba(89, 244, 202, .55);   /* 兜底（老 WebView 没有 color-mix） */
  background: linear-gradient(90deg, var(--mint-400), rgba(89, 244, 202, .35));
}
.dmg-board__bad { color: var(--amber); }
.dmg-board__hint { margin: max(.04rem, 3px) 0 0; color: var(--text-dim); font-size: max(.11rem, 9px); text-align: right; }

@media (max-width: 900px) {
  .dmg-board { font-size: max(.13rem, 10px); }
  .dmg-board__name { max-width: 8em; }
}