/* 墨线分镜 · 出击模式页 + 每日挑战页（W1-B 负责） */

/* ---------- 出击页 mode_select ---------- */
.ink-sortie { --slant: 36px; }
.ink-sortie__list { display: flex; flex-direction: column; padding: 2px 12px 24px; }

/* 三个斜切横格：上下边同向倾斜（约 6°），相邻两格错开 6px 露出黑底分镜缝 */
.ink-sortie__cell {
  position: relative; display: block; flex: 1 1 var(--h); width: 100%;
  min-height: var(--min); max-height: var(--max);
  padding: 0; text-align: left; color: var(--white);
}
.ink-sortie__cell + .ink-sortie__cell { margin-top: calc(6px - var(--slant)); }
.ink-sortie__cell:active { filter: brightness(1.18); }
.ink-sortie__cell--quest { --h: 348px; --min: 308px; --max: 404px; --edge: var(--yellow); }
.ink-sortie__cell--nightmare { --h: 196px; --min: 172px; --max: 232px; --edge: #d8325f; }
.ink-sortie__cell--nightmare.is-locked { --edge: #8a8a8a; }
.ink-sortie__cell--daily { --h: 196px; --min: 152px; --max: 232px; --edge: var(--white); }

.ink-sortie__edge,
.ink-sortie__shape { position: absolute; display: block; }
.ink-sortie__edge {
  inset: 0; background: var(--edge, var(--white));
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
.ink-sortie__shape {
  inset: 3px; overflow: hidden; background: var(--ink);
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
.ink-sortie__art, .ink-sortie__tint, .ink-sortie__dots { position: absolute; inset: 0; display: block; pointer-events: none; }
.ink-sortie__dots { opacity: .13; }
.ink-sortie__content {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--slant) + 6px) 14px 30px 18px;
}

/* 标题与副标 */
.ink-sortie__title {
  display: inline-block; align-self: flex-start;
  font-weight: 900; font-size: 46px; line-height: 1; letter-spacing: .04em; white-space: nowrap;
  color: var(--white);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--red);
  transform: skewX(-8deg);
}
.ink-sortie__title--lg { font-size: 60px; -webkit-text-stroke-width: 4px; text-shadow: 5px 5px 0 var(--ink); }
.ink-sortie__sub { font-weight: 900; font-size: 12px; letter-spacing: .04em; color: var(--white); text-shadow: 2px 2px 0 var(--ink); }
.ink-sortie__col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* 征途：整格不是 button（里面有难度控件）。透明的「进入」按钮铺满整格；画面层 pointer-events:none 让点击穿透到它，
 * 只有难度控件把点击接回来。按下反馈改落在画面层上，免得点难度箭头时整格跟着变亮。 */
.ink-sortie__cell--quest:active { filter: none; }
.ink-sortie__enter { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; }
.ink-sortie__enter:active + .ink-sortie__shape { filter: brightness(1.18); }
.ink-sortie__enter:focus-visible { outline: 3px solid var(--yellow); outline-offset: -8px; }
.ink-sortie__cell--quest .ink-sortie__shape { pointer-events: none; }

/* 征途：愚者牌放大裁切并压暗，红色斜条托住标题 */
.ink-sortie__art--fool {
  background: #3a2a22 url("../../assets/tarot/cards/card_0.webp") no-repeat 50% 16% / 132% auto;
}
.ink-sortie__tint { background: rgba(17, 17, 17, .42); }
.ink-sortie__stickers { display: flex; flex-wrap: wrap; gap: 8px; }
.ink-sortie__band { align-self: flex-start; margin-left: -26px; filter: drop-shadow(4px 4px 0 var(--ink)); }
.ink-sortie__band-in {
  display: block; padding: 4px 44px 6px 30px; background: var(--red);
  clip-path: polygon(0 0, 100% 9%, calc(100% - 14px) 100%, 0 100%);
}
.ink-sortie__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.ink-sortie__go {
  flex: none; margin: 0 4px 6px 0; padding: 5px 12px; font-size: 15px; letter-spacing: .06em;
  box-shadow: 3px 3px 0 var(--red);
}

/* 征途里的难度：一行标签（难度 + 当前 A 级 + 规则钮）、一行「箭头 + 11 个小方格 + 箭头」 */
.ink-sortie__diff { display: flex; flex-direction: column; gap: 2px; }
.ink-sortie__diff-head { display: flex; align-items: center; gap: 8px; }
.ink-sortie__lvtag { font-size: 16px; padding: 1px 9px; line-height: 1.15; }
/* 「规则」：贴纸看着是 53×22，但按钮元素本身就是 ≥44 高的透明点按区（审计按元素包围盒量，不认 ::after）。
 * 按钮绝对定位在标签行右下角，底边对齐标签行，向上长出去占用标签行上方的空隙；下面那排难度箭头的热区不被碰到。
 * 贴纸画在里面的 span 上，斜切也落在 span 上，按钮自己不变形，包围盒才是准的 44。 */
.ink-sortie__diff-head { position: relative; }
.ink-sortie__rules-btn {
  position: absolute; right: 0; bottom: 0; pointer-events: auto;
  min-width: 56px; height: 44px; padding: 0 0 1px;
  display: flex; align-items: flex-end; justify-content: flex-end;
  background: transparent; border: 0;
}
.ink-sortie__rules-tag {
  display: block; padding: 2px 10px; background: var(--white); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  font-weight: 900; font-size: 12px; line-height: 1.2; letter-spacing: .06em;
  transform: skewX(-8deg);
}
.ink-sortie__rules-btn:active .ink-sortie__rules-tag { transform: skewX(-8deg) translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.ink-sortie__rules-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.ink-sortie__diff-row { display: flex; align-items: center; gap: 4px; }
.ink-sortie__brief {
  display: block; margin: 0 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-weight: 800; font-size: 12px; line-height: 1.3; color: var(--white); text-shadow: 2px 2px 0 var(--ink);
}
.ink-sortie__arrow {
  flex: none; display: grid; place-items: center; pointer-events: auto;
  width: 44px; height: 44px; padding: 0;
  background: var(--white); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transform: skewX(-8deg);
  transition: transform .1s, box-shadow .1s, opacity .15s;
}
.ink-sortie__arrow:active { transform: skewX(-8deg) translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.ink-sortie__arrow[disabled] { opacity: .4; filter: grayscale(1); box-shadow: none; pointer-events: none; }
.ink-sortie__tri { display: block; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent var(--ink); }
.ink-sortie__tri.is-left { border-width: 8px 12px 8px 0; border-color: transparent var(--ink) transparent transparent; }
.ink-sortie__strip {
  flex: 1; min-width: 0; height: 44px; pointer-events: auto;
  display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; align-items: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ink-sortie__strip:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.ink-sortie__lv {
  aspect-ratio: 1; display: grid; place-items: center;
  background: var(--white); color: var(--ink); border: 2px solid var(--ink);
  font-family: var(--font-num); font-style: normal; font-size: 10.5px; line-height: 1; text-shadow: none;
  transition: transform .15s var(--ease-pop), background .15s;
}
.ink-sortie__lv.is-on {
  background: var(--yellow);
  transform: scale(1.45);
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 11.5px;
  position: relative; z-index: 2;
}

/* 难度规则弹层（挂在 #ui-layer 下，不在 .ink-sortie 里面，所以都写成独立的类选择器） */
.ink-sortie__mini { font-size: 10.5px; padding: 1px 6px; box-shadow: 2px 2px 0 var(--ink); }
.ink-sortie__rules { display: grid; gap: 10px; }
.ink-sortie__rule-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ink-sortie__rule-cells .ink-cell { padding: 4px 5px; text-align: center; }
.ink-sortie__rule-cells .ink-cell__v { font-size: 16px; }
.ink-sortie__rule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ink-sortie__rule { display: flex; align-items: flex-start; gap: 8px; padding-top: 8px; border-top: 2px dashed rgba(17, 17, 17, .35); }
.ink-sortie__rule:first-child { border-top: 0; padding-top: 0; }
.ink-sortie__rule-lv {
  flex: none; min-width: 34px; padding: 2px 4px;
  background: var(--ink); color: var(--yellow);
  font-size: 14px; line-height: 1.2; text-align: center;
  transform: skewX(-10deg);
}
.ink-sortie__rule.is-new .ink-sortie__rule-lv { background: var(--red); color: var(--white); }
.ink-sortie__rule-body { min-width: 0; flex: 1; }
.ink-sortie__rule-name { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.2; }
.ink-sortie__rule-body p { margin: 2px 0 0; font-size: 12px; font-weight: 700; line-height: 1.4; color: #333; }

/* 梦魇：七宗罪剪影拼贴（白底立绘压成黑剪影，multiply 把白底吃掉），锁定时整格灰度 */
.ink-sortie__art--nightmare { overflow: hidden; background: radial-gradient(circle at 62% 38%, #cf3a74 0%, #7a1f55 55%, #3d1233 100%); }
.ink-sortie__sil {
  position: absolute; width: auto;
  mix-blend-mode: multiply;
  filter: grayscale(1) brightness(.56) contrast(30);
  pointer-events: none;
}
.ink-sortie__cell.is-locked .ink-sortie__art { filter: grayscale(1) brightness(1.7); }
.ink-sortie__stampbox { position: absolute; right: 14px; top: 16px; pointer-events: none; }
.ink-sortie__stampbox .ink-stamp { background: rgba(17, 17, 17, .72); }
.ink-sortie__stampbox .ink-stamp.is-slam { animation-delay: .62s; }
.ink-sortie__progress { display: flex; align-items: center; gap: 10px; }
.ink-sortie__squares { display: inline-flex; gap: 3px; }
.ink-sortie__squares i {
  display: block; width: 14px; height: 16px;
  border: 2px solid var(--white); background: rgba(17, 17, 17, .65);
  transform: skewX(-12deg);
}
.ink-sortie__squares i.is-on { background: var(--yellow); border-color: var(--ink); }
.ink-sortie__count { font-weight: 900; font-size: 13px; color: var(--white); text-shadow: 2px 2px 0 var(--ink); white-space: nowrap; }
.ink-sortie__count b { font-size: 19px; color: var(--yellow); }

/* 每日挑战：黄底，左侧大号日期，右侧今日突变与状态 */
.ink-sortie__art--daily { background: var(--yellow); overflow: hidden; }
.ink-sortie__art--daily::after {
  content: ""; position: absolute; top: -20%; right: -8%; width: 46%; height: 150%;
  background: var(--red); transform: skewX(-14deg);
}
.ink-sortie__cell--daily .ink-sortie__content { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 28px; }
.ink-sortie__date {
  display: block; font-size: 78px; line-height: .95; color: var(--ink);
  text-shadow: 4px 4px 0 var(--white); transform: skewX(-8deg); transform-origin: left bottom;
}
.ink-sortie__side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; min-width: 0; }

/* 梦魇未解锁弹层 */
.ink-sortie__lock-text { margin: 0 0 10px; font-weight: 800; font-size: 14px; line-height: 1.5; }
.ink-sortie__lock-count { margin-bottom: 10px; font-weight: 900; font-size: 14px; }
.ink-sortie__lock-count b { font-size: 24px; color: var(--red); }
.ink-sortie__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ink-sortie__chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border: 2.5px solid var(--ink); background: var(--paper-2); color: #6a6354;
  font-weight: 900; font-size: 13px;
}
.ink-sortie__chip b { font-size: 12px; }
.ink-sortie__chip.is-done { background: var(--yellow); color: var(--ink); }

/* 矮屏（360×640 这类）：三格要一屏放下、不出现纵向滚动，所以压格高下限、标题字号、内边距和日期字号。
 * 390×844 的高度够，不触发这一段，版面不变。斜边（--slant）不动，格间咬合的距离保持不变。 */
@media (max-height: 700px) {
  .ink-sortie__list { padding-bottom: 16px; }
  .ink-sortie__cell--quest { --min: 292px; }
  .ink-sortie__cell--nightmare { --min: 158px; }
  .ink-sortie__cell--daily { --min: 138px; }
  .ink-sortie__content { padding: calc(var(--slant) + 4px) 14px 27px 18px; }
  .ink-sortie__title { font-size: 38px; }
  .ink-sortie__title--lg { font-size: 48px; }
  .ink-sortie__band-in { padding: 2px 40px 4px 30px; }
  .ink-sortie__date { font-size: 58px; }
  .ink-sortie__cell--daily .ink-sortie__content { padding-bottom: 24px; }
  .ink-sortie__side { gap: 5px; }
}

/* ---------- 每日挑战页 daily ---------- */
.ink-daily__scroll { display: flex; flex-direction: column; gap: 10px; padding: 2px 16px 20px; }
.ink-daily__scroll > * { flex: none; }
.ink-daily__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 6px 4px 8px; }
.ink-daily__date { font-family: var(--font-num); font-weight: 400; font-size: 17px; letter-spacing: .06em; padding: 4px 12px; }
.ink-daily__code { position: relative; overflow: hidden; padding: 12px 14px 14px; box-shadow: 5px 5px 0 var(--red); }
.ink-daily__code-dots { position: absolute; top: 0; right: 0; width: 46%; height: 100%; opacity: .1; pointer-events: none; }
.ink-daily__code .ink-tape { position: relative; }
.ink-daily__code-name {
  position: relative; margin-top: 6px; font-weight: 900; font-size: 30px; line-height: 1.15; letter-spacing: .06em;
  color: var(--yellow); text-shadow: 3px 3px 0 var(--red); transform: skewX(-6deg); transform-origin: left center;
}
.ink-daily__code-desc { position: relative; margin-top: 6px; font-weight: 700; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.ink-daily__code-tags { position: relative; display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
.ink-daily__label { position: relative; z-index: 2; margin-bottom: -16px; padding-left: 12px; pointer-events: none; }
.ink-daily__mut { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; }
.ink-daily__mut .ink-burst { color: var(--white); }
.ink-daily__mut-text { min-width: 0; }
.ink-daily__mut-name { font-weight: 900; font-size: 17px; line-height: 1.2; }
.ink-daily__mut-desc { margin-top: 2px; font-weight: 700; font-size: 12px; line-height: 1.45; color: #4a4a4a; }
.ink-daily__hero { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.ink-daily__hero-text { flex: 1; min-width: 0; }
.ink-daily__hero-name { font-weight: 900; font-size: 19px; line-height: 1.2; }
.ink-daily__hero-school { margin-top: 2px; font-weight: 700; font-size: 12px; color: #555; }
.ink-daily__dock { flex: none; padding: 8px 18px calc(14px + var(--safe-bottom)); }