/* 墨线分镜 · 通关 / 失败 / 解锁英灵（W3-B 负责）。规格见 docs/superpowers/specs/2026-10-13-ink-panels-ui-design.md 第 4 节 S14 */

/* ===================== 公共：让出顶部胶囊区，滚动区与底部按钮栏 ===================== */
/* 标题区从胶囊区下方开始（右上 100×56 不放内容），拟声字可以放宽到整屏宽 */
.ink-result__head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: calc(var(--safe-top) + 46px) 14px 0;
}
.ink-result__caption { margin: 0; font-size: 13px; font-weight: 800; line-height: 1.45; color: #d9d4c8; }
.ink-result__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; padding-bottom: 32px; }
.ink-result__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 0 14px; }
/* 屏幕底色是墨黑，文字默认白色；数值格本身是白底，数值要改回墨色 */
.ink-result__stats .ink-cell__v { color: var(--ink); }
.ink-result__stats .ink-cell:nth-child(odd) { transform: rotate(-.6deg); }
.ink-result__stats .ink-cell:nth-child(even) { transform: rotate(.7deg); }
.ink-result__dock {
  position: relative; z-index: 1; flex: none;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px calc(14px + var(--safe-bottom));
  background: var(--ink);
}
.ink-result__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 本局战果外框：旧块是深色底，这里只加一圈白墨线与一个标签；整局复盘共用同一套外框 */
.ink-result__meta,
.ink-result__insights {
  position: relative; flex: none; margin: 8px 14px 0;
  padding: 14px 8px 8px;
  border: 3px solid var(--white);
}
.ink-result__meta > .ink-tape,
.ink-result__insights > .ink-tape { position: absolute; left: 10px; top: -13px; }

/* 本局战果内容：块本身由 browser-main.js 的 buildRunMetaBlock 生成，带旧 class（result-meta-block / rm-*），
 * 旧样式在根目录 styles.css 里（深蓝底、圆角、黄边）。这里用多一层祖先的作用域规则盖掉，不改 buildRunMetaBlock，也不动数据和文案。
 * 与整局复盘同一套语言：黑底、纸色字、无圆角；标题是白色贴纸；成就条目是黄底墨字贴纸；数字走 Anton（InkAnton 没有汉字，汉字自动回落到 CJK 字体）。 */
.ink-result__meta { padding: 18px 12px 12px; font-size: 12px; line-height: 1.5; color: var(--paper); }
.ink-result__meta .result-meta-block {
  margin: 0; padding: 0; gap: 8px;
  background: transparent; border: 0; border-radius: 0;
}
.ink-result__meta .result-meta-block .rm-title,
.ink-result__meta .result-meta-block .rm-chip {
  font-family: "InkAnton", "Anton", "Impact", var(--font-cjk);
  font-synthesis: none; letter-spacing: .02em;
}
.ink-result__meta .result-meta-block .rm-title {
  align-self: flex-start; padding: 3px 9px;
  background: var(--white); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 0; box-shadow: 3px 3px 0 var(--ink);
  font-size: 12px; font-weight: 900; line-height: 1.2;
  transform: skewX(-10deg) rotate(-1deg);
}
.ink-result__meta .result-meta-block .rm-list { gap: 8px 6px; }
.ink-result__meta .result-meta-block .rm-chip {
  padding: 2px 8px; background: var(--yellow); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0;
  font-size: 12px; font-weight: 900; line-height: 1.3;
  transform: skewX(-8deg);
}
.ink-result__meta .result-meta-block .rm-chip--repeat {
  background: transparent; color: var(--paper);
  border: 2px dashed rgba(243, 238, 227, .45);
}
.ink-result__meta .result-meta-block .rm-note {
  margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--paper-3);
}

/* 斜切格：外层描边 + 内层内容，同一条斜边（底边左低右高，斜 34px） */
.ink-result__cell { position: relative; flex: none; height: clamp(196px, 32vh, 262px); margin: 0 14px; }
.ink-result__edge,
.ink-result__shape { position: absolute; display: block; }
.ink-result__edge {
  inset: 0; background: var(--white);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
}
.ink-result__shape {
  inset: 4px; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
}
.ink-result__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%; pointer-events: none;
}
.ink-result__name {
  position: absolute; left: 12px; bottom: 16px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.ink-result__name .ink-tape { margin-left: 6px; }

/* ===================== 失败 death：墨黑底 + 灰度立绘开裂格 ===================== */
.ink-result--death .ink-result__edge { background: var(--white); }
.ink-result--death .ink-result__shape { background: var(--ink); }
.ink-result--death .ink-result__img { filter: grayscale(1) contrast(1.15) brightness(.74); }
.ink-result__cell--fallen { transform: rotate(-1.5deg); }
.ink-result__dots { position: absolute; inset: 0; display: block; opacity: .12; pointer-events: none; }
/* 裂纹：一条白色折线，非缩放描边保证线宽稳定 */
.ink-result__crack { position: absolute; inset: 0; display: block; pointer-events: none; }
.ink-result__crack svg { display: block; width: 100%; height: 100%; }
.ink-result__crack polyline {
  fill: none; stroke: var(--white); stroke-width: 3; stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.ink-result--death .ink-result__caption { color: #cfc6b2; }

/* ===================== 通关 win：墨黑底 + 速度线 + 彩色立绘大格 ===================== */
.ink-result__lines { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; opacity: .9; }
.ink-result--win .ink-result__edge { background: var(--yellow); }
.ink-result--win .ink-result__shape { background: var(--hero, var(--ink)); }
.ink-result--win .ink-result__dock { background: var(--ink); }
.ink-result__cell--win { transform: rotate(1deg); }
.ink-result__title { font-size: clamp(44px, 14vw, 60px); }
.ink-result--win .ink-result__caption { color: var(--white); }

/* ===================== 解锁英灵 unlock：纸面底 + 竖排英灵 ===================== */
.ink-result--unlock .ink-result__head { padding-top: calc(var(--safe-top) + 6px); }
.ink-result--unlock .ink-result__caption { color: var(--ink); }
.ink-result--unlock .ink-result__dock { background: var(--paper); border-top: 3px solid var(--ink); }

.ink-unlock__list {
  display: flex; flex-direction: column; gap: 12px;
  padding: 10px 14px 24px;
}
/* 每位英灵一张白格，墨线外框 + 硬投影；交替微倾 */
.ink-unlock__row {
  position: relative; flex: none; display: flex; align-items: stretch;
  width: 100%; min-height: 104px; padding: 0; text-align: left;
  background: var(--white); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-.7deg);
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.ink-unlock__row:nth-child(even) { transform: rotate(.6deg); }
.ink-unlock__row:active { transform: translate(2px, 2px) rotate(0); box-shadow: 1px 1px 0 var(--ink); }
/* 点选后：整格上浮，硬投影变红，立绘变彩色（见 .ink-unlock__thumb 与 .ink-unlock__img） */
.ink-unlock__row.is-on { transform: translate(-3px, -3px) rotate(0); box-shadow: 7px 7px 0 var(--red); }

.ink-unlock__thumb {
  position: relative; flex: none; width: 84px; overflow: hidden;
  background: var(--paper-3); border-right: 3px solid var(--ink);
}
.ink-unlock__row.is-on .ink-unlock__thumb { background: var(--hero, var(--paper-3)); }
.ink-unlock__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%; pointer-events: none;
  filter: grayscale(1) brightness(.86) contrast(1.1);
}
.ink-unlock__row.is-on .ink-unlock__img { filter: none; }

.ink-unlock__info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 8px 10px 9px;
}
.ink-unlock__name { font-size: 22px; font-weight: 900; line-height: 1.05; transform: skewX(-8deg); }
.ink-unlock__passive { font-size: 11.5px; font-weight: 700; line-height: 1.4; color: #222; }

.ink-unlock__slot { flex: none; align-self: center; padding-right: 8px; }
.ink-unlock__hint { transform: none; }

/* 整局复盘内容：小节标题是纸色描边贴纸，数值用 Anton，行与行之间虚线分隔 */
.ink-result__insights { padding: 18px 12px 12px; font-size: 12px; line-height: 1.5; color: var(--paper); overflow-wrap: anywhere; }
.ink-result__insights .ink-result__insight-note { display: block; margin: 0 0 4px; font-size: 11px; font-weight: 700; color: var(--paper-3); }
.ink-result__insights small.ink-result__insight-note { margin-top: 8px; }
.ink-result__sec { margin: 14px 0 8px; font-size: 12px; line-height: 1; }
.ink-result__sec-tag { transform: skewX(-10deg) rotate(-1deg); }
.ink-result__empty { margin: 0; font-weight: 700; color: var(--paper-3); }
.ink-result__damage, .ink-result__log { margin: 0; padding: 0; list-style: none; }
.ink-result__damage li,
.ink-result__log li { padding: 5px 0; border-bottom: 2px dashed rgba(243, 238, 227, .22); font-weight: 700; }
.ink-result__damage li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ink-result__damage li:last-child,
.ink-result__log li:last-child { border-bottom: 0; }
.ink-result__damage span { min-width: 0; }
.ink-result__damage b { flex: none; font-size: 15px; color: var(--yellow); }

/* 首屏提示：滚动区内容超出一屏且还没往下滚时，在按钮栏上方露一小条胶带。零高度的占位夹在滚动区与按钮栏之间，
 * 胶带绝对定位压在滚动区底部，不占版面、不接点击。滚动超过约 24px 就淡出，内容放得下时整个不显示。 */
.ink-result__hint { position: relative; z-index: 2; flex: none; height: 0; pointer-events: none; }
.ink-result__hint-tape {
  position: absolute; left: 0; right: 0; bottom: 10px; margin: 0 auto; width: fit-content;
  padding: 4px 12px; font-size: 12px; letter-spacing: .04em;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .6));
  opacity: 0; transition: opacity .18s ease-out;
}
.ink-result__hint.is-on .ink-result__hint-tape { opacity: 1; }
.ink-result__hint-arrow { display: inline-block; margin-left: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .ink-result__hint.is-on .ink-result__hint-arrow { animation: ink-result-nudge 1.1s ease-in-out infinite; }
}
@keyframes ink-result-nudge { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }