/* 墨线分镜 · 通关 / 失败 / 解锁英灵（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: 20px; }
.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 {
  position: relative; flex: none; margin: 8px 14px 0;
  padding: 14px 8px 8px;
  border: 3px solid var(--white);
}
.ink-result__meta > .ink-tape { position: absolute; left: 10px; top: -13px; }

/* 斜切格：外层描边 + 内层内容，同一条斜边（底边左低右高，斜 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; }

.ink-result__insights { margin: 16px 14px 24px; padding: 12px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 4px 4px 0 var(--yellow); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.ink-result__insights h3 { margin: 14px 0 6px; font-size: 14px; }
.ink-result__insight-note { display: block; margin-top: 8px; font-size: 11px; color: #555; }
.ink-result__damage, .ink-result__log { margin: 0; padding: 0; list-style: none; }
.ink-result__damage li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed #aaa; }
.ink-result__damage span { min-width: 0; }
.ink-result__damage b { flex: none; font-size: 13px; }
.ink-result__log li { padding: 5px 0; border-bottom: 1px dashed #aaa; }