/* V6: investigative dossier visual system — readable, image-led, viewport-safe. */
:root {
  --v6-ink:#0d3137;
  --v6-deep:#061f25;
  --v6-paper:#f2ecdf;
  --v6-ivory:#fffaf0;
  --v6-gold:#dfbc70;
  --v6-red:#a8443e;
  --v6-muted:#6f7f81;
  --v6-enter:cubic-bezier(.18,.86,.22,1);
}

/* Cover: the title is a physical qualification ticket being pulled into view. */
.start-screen { padding-left:20px; padding-right:20px; }
.start-copy { position:relative; }
.case-title {
  position:relative; width:100%; height:142px; margin:8px 0 5px;
  color:#fff8e8; font-family:"STKaiti","KaiTi","Songti SC",serif;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.34));
}
.case-title-borrow,.case-title-you {
  position:absolute; z-index:3; top:2px; font-size:84px; line-height:1; font-weight:700;
  text-shadow:1px 0 0 rgba(255,231,181,.35);
  animation:v6InkDrop .56s var(--v6-enter) both;
}
.case-title-borrow { left:1px; transform:rotate(-5deg); }
.case-title-you { left:70px; top:18px; transform:rotate(3deg); animation-delay:.08s; }
.case-title-ticket {
  position:absolute; z-index:2; left:116px; right:4px; top:46px; height:79px;
  display:grid; grid-template-columns:48px 1fr; align-items:center; padding:13px 14px 8px 11px;
  color:#fff4dc; background:linear-gradient(105deg,#983d38,#63282c 72%,#3c252a);
  border:1px solid rgba(255,225,167,.48); border-radius:4px 17px 17px 4px;
  box-shadow:0 15px 34px rgba(25,4,6,.4); font-style:normal;
  clip-path:polygon(0 0,100% 0,100% 36%,96% 50%,100% 64%,100% 100%,0 100%,0 63%,4% 50%,0 37%);
  transform-origin:0 50%; animation:v6TicketPull .72s .12s var(--v6-enter) both;
}
.case-title-ticket small { align-self:end; padding-bottom:9px; color:#f2d8a5; font:700 15px/1 "Microsoft YaHei",sans-serif; transform:rotate(-3deg); }
.case-title-ticket b { align-self:end; padding-bottom:1px; font-size:48px; line-height:.9; letter-spacing:.02em; }
.case-title-ticket u { position:absolute; right:13px; top:8px; color:rgba(255,239,205,.52); font:700 8px/1 "Times New Roman",serif; letter-spacing:.1em; text-decoration:none; }
.case-title-ticket > i { position:absolute; top:0; bottom:0; left:-6%; width:2px; background:#ffe1a0; box-shadow:0 0 10px 3px rgba(255,214,125,.66); animation:v6TicketScan 3s 1.1s ease-in-out infinite; }
.case-title-mark { position:absolute; z-index:4; right:-1px; top:-7px; color:var(--v6-gold); font:700 44px/1 "Times New Roman",serif; transform:rotate(9deg); animation:v6MarkIn .42s .74s var(--v6-enter) both; }
.case-title::after { content:""; position:absolute; z-index:1; left:6px; right:7px; bottom:3px; height:1px; background:linear-gradient(90deg,var(--v6-gold),rgba(255,255,255,.24),transparent); transform-origin:left; animation:v6LineDraw .7s .5s ease-out both; }
.start-screen .opening-question { margin-top:4px; }

/* Page 03: the relationship itself occupies the empty middle field. */
.agreement-choice-screen { display:grid; grid-template-rows:auto auto minmax(90px,1fr) auto; }
.purpose-map-v6 {
  min-height:90px; padding:12px 11px 10px; align-self:stretch;
  display:grid; grid-template-columns:minmax(62px,1fr) 26px minmax(92px,1.25fr) 26px minmax(68px,1fr); grid-template-rows:1fr auto;
  align-items:center; gap:6px; font-size:12px; overflow:hidden;
}
.purpose-map-v6 .purpose-node { min-width:0; text-align:center; }
.purpose-map-v6 .purpose-node small { display:block; margin-bottom:5px; color:rgba(255,255,255,.55); font-size:11px; }
.purpose-map-v6 .purpose-node b { display:block; color:#fff; font-size:14px; line-height:1.3; }
.purpose-map-v6 > i { width:100%; min-width:0; }
.purpose-map-v6 .purpose-identity {
  position:relative; padding:12px 7px 10px; border:1px solid rgba(223,188,112,.58); border-radius:8px;
  background:linear-gradient(145deg,rgba(162,66,58,.82),rgba(91,39,41,.72)); box-shadow:0 10px 24px rgba(0,0,0,.2);
  transform:rotate(-1.2deg); animation:v6IdentityPulse 2.8s 1.1s ease-in-out infinite;
}
.purpose-map-v6 .purpose-identity small { color:#f2d7a1; }
.purpose-map-v6 .purpose-identity b { color:#fff8e9; font-size:15px; }
.purpose-map-v6 .purpose-identity em { position:absolute; right:5px; top:4px; color:rgba(255,242,214,.42); font:700 8px/1 "Times New Roman",serif; font-style:normal; }
.purpose-map-v6 > p { grid-column:1/-1; margin:7px 0 0; padding-top:8px; border-top:1px solid rgba(255,255,255,.14); color:#f1ddb1; font-size:12px; line-height:1.4; text-align:center; }
.agreement-choice-panel { margin-top:0; }

/* Page 04: product photography carries the list; text and price stay adjacent. */
.purchase-kicker { font-size:10px; }
.purchase-amount b { font-size:36px; }
.purchase-amount small { font-size:13px; }
.purchase-amount i { font-size:10px; }
.purchase-lead p { font-size:14px; line-height:1.5; }
.purchase-manifest { max-height:none; }
.manifest-head { min-height:26px; padding:2px 5px 5px; }
.manifest-head span { font-size:15px; }
.manifest-head small { font-size:9px; }
.product.product-real {
  min-height:0; padding:8px 10px 8px 7px;
  display:grid; grid-template-columns:minmax(92px,34%) minmax(0,1fr) auto; align-items:center; gap:9px;
}
.product-real .product-shot { width:100%; height:100%; min-height:84px; display:grid; place-items:center; overflow:hidden; }
.product-real .product-shot img {
  position:static; width:clamp(82px,12vh,116px); height:clamp(82px,12vh,116px); max-width:100%; object-fit:contain;
  filter:drop-shadow(0 9px 9px rgba(46,35,24,.2)); opacity:0; transform:scale(.88) translateY(8px);
  animation:v6ProductSet .48s .15s var(--v6-enter) forwards;
}
.product-real:nth-of-type(3) .product-shot img { animation-delay:.23s; }
.product-real .product-info { min-width:0; align-self:center; }
.product-real .product-info > small { display:block; margin:0 0 4px; color:#9b7440; font-size:11px; font-weight:700; }
.product-real .product-info > b { display:block; font-size:17px; line-height:1.2; }
.product-real .product-info > span { display:block; margin:5px 0 0; color:#697a7c; font-size:11px; line-height:1.35; }
.product-real .product-price { align-self:center; font-size:15px; }
.product-real .product-index { left:5px; top:5px; }
.manifest-total { min-height:31px; }
.manifest-total span { font-size:12px; }
.manifest-total b { font-size:16px; }
.purchase-reader-footer { min-height:72px; }
.purchase-reader-footer small { font-size:10px; }
.purchase-reader-footer b { font-size:13px; }

/* Replay is paged evidence, never a long stack with a buried CTA. */
.replay-screen {
  height:100%; min-height:0!important; padding:104px 14px max(28px,env(safe-area-inset-bottom));
  display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:10px; overflow:hidden; color:#fff;
}
.replay-screen::after { background:linear-gradient(180deg,rgba(3,20,24,.38),rgba(3,20,24,.78) 48%,rgba(3,20,24,.97)); }
.replay-head { position:relative; z-index:3; }
.replay-head > div { display:flex; justify-content:space-between; align-items:center; padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.24); }
.replay-head span { color:var(--v6-gold); font-size:11px; letter-spacing:.08em; }
.replay-head b { color:rgba(255,255,255,.66); font:700 11px/1 "Times New Roman",serif; }
.replay-head h2 { margin:8px 0 0; font-family:"STSong","Songti SC",serif; font-size:28px; line-height:1.18; letter-spacing:-.02em; }
.nake-tip {
  position:relative; z-index:3; min-height:69px; padding:8px 12px 8px 78px; display:flex; align-items:center;
  border:1px solid rgba(255,255,255,.22); border-radius:13px; background:rgba(7,40,46,.82);
}
.nake-tip img { position:absolute; left:9px; bottom:0; width:62px; height:72px; object-fit:contain; }
.nake-tip p { margin:0; color:rgba(255,255,255,.85); font-size:13px; line-height:1.5; }
.evidence-focus {
  position:relative; z-index:3; min-height:0; padding:16px 15px 14px; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto 1fr; gap:8px;
  border-radius:16px; color:var(--v6-ink); background:rgba(255,250,240,.98); box-shadow:0 18px 42px rgba(0,0,0,.24);
  animation:v6EvidenceIn .42s var(--v6-enter) both;
}
.evidence-focus::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--v6-red); }
.evidence-focus-number { color:#9a554e; font-size:11px; letter-spacing:.08em; }
.evidence-side { min-height:0; display:flex; flex-direction:column; justify-content:center; }
.evidence-side small { display:block; margin-bottom:7px; color:#6d7d7f; font-size:12px; }
.evidence-side p { margin:0; font-size:17px; font-weight:700; line-height:1.55; }
.evidence-missing p { color:#173f45; }
.evidence-divider { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; color:#a14c45; font-size:10px; }
.evidence-divider i { height:1px; background:rgba(161,76,69,.28); }
.replay-controls {
  position:relative; z-index:4; min-height:58px; padding:7px; display:grid; grid-template-columns:78px 1fr 116px; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.28); border-radius:12px; background:rgba(6,30,36,.92); box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.replay-back,.replay-next { height:44px; border:0; border-radius:8px; cursor:pointer; font-size:13px; font-weight:800; }
.replay-back { color:#e8e1d3; background:rgba(255,255,255,.08); }
.replay-back:disabled { opacity:.34; cursor:default; }
.replay-next { padding:0 9px 0 12px; display:flex; align-items:center; justify-content:space-between; color:#17383c; background:var(--v6-gold); }
.replay-next svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.replay-dots { display:flex; justify-content:center; gap:5px; }
.replay-dots i { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.26); }
.replay-dots i.active { width:17px; border-radius:3px; background:var(--v6-gold); }
.replay-back:focus-visible,.replay-next:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.replay-next:active { transform:scale(.97); }

@keyframes v6InkDrop { from{opacity:0;transform:translateY(-16px) rotate(-8deg) scale(1.08)} to{opacity:1;transform:rotate(-5deg)} }
@keyframes v6TicketPull { from{opacity:0;transform:translateX(-70px) scaleX(.7)} to{opacity:1;transform:none} }
@keyframes v6TicketScan { 0%,16%{left:-6%;opacity:0} 24%{opacity:1} 68%{left:103%;opacity:1} 77%,100%{left:103%;opacity:0} }
@keyframes v6MarkIn { from{opacity:0;transform:scale(1.7) rotate(20deg)} to{opacity:1;transform:rotate(9deg)} }
@keyframes v6LineDraw { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes v6IdentityPulse { 0%,100%{box-shadow:0 10px 24px rgba(0,0,0,.2)} 50%{box-shadow:0 10px 26px rgba(223,188,112,.22)} }
@keyframes v6ProductSet { to{opacity:1;transform:none} }
@keyframes v6EvidenceIn { from{opacity:0;transform:translateX(15px) scale(.985)} to{opacity:1;transform:none} }

@media (max-height:740px) {
  .case-title { height:123px; }
  .case-title-borrow,.case-title-you { font-size:72px; }
  .case-title-you { left:61px; }
  .case-title-ticket { left:102px; top:39px; height:70px; }
  .case-title-ticket b { font-size:43px; }
  .purpose-map-v6 { padding-top:8px; padding-bottom:7px; }
  .purpose-map-v6 .purpose-node small { margin-bottom:3px; font-size:10px; }
  .purpose-map-v6 .purpose-node b { font-size:13px; }
  .purpose-map-v6 .purpose-identity { padding-top:9px; padding-bottom:8px; }
  .purpose-map-v6 > p { margin-top:5px; padding-top:5px; font-size:11px; }
  .purchase-amount b { font-size:31px; }
  .purchase-lead p { font-size:12px; }
  .product.product-real { grid-template-columns:minmax(78px,31%) minmax(0,1fr) auto; gap:7px; }
  .product-real .product-shot img { width:78px; height:78px; }
  .product-real .product-info > b { font-size:15px; }
  .product-real .product-info > span { display:none; }
  .purchase-reader-footer { min-height:62px; }
  .replay-screen { padding-top:96px; gap:7px; }
  .replay-head h2 { margin-top:5px; font-size:24px; }
  .nake-tip { min-height:60px; padding-left:70px; }
  .nake-tip img { width:55px; height:64px; }
  .nake-tip p { font-size:12px; }
  .evidence-focus { padding-top:12px; padding-bottom:11px; gap:5px; }
  .evidence-side small { margin-bottom:4px; }
  .evidence-side p { font-size:15px; line-height:1.45; }
  .replay-controls { min-height:54px; grid-template-columns:72px 1fr 108px; }
  .replay-back,.replay-next { height:42px; }
}

@media (max-width:370px) {
  .case-title-ticket { right:0; }
  .purpose-map-v6 { grid-template-columns:minmax(55px,1fr) 18px minmax(83px,1.2fr) 18px minmax(60px,1fr); padding-left:7px; padding-right:7px; }
  .purpose-map-v6 .purpose-node b { font-size:12px; }
  .product.product-real { grid-template-columns:78px minmax(0,1fr) auto; }
  .product-real .product-info > small { font-size:10px; }
  .product-real .product-price { font-size:13px; }
  .replay-screen { padding-left:10px; padding-right:10px; }
}

@media (hover:hover) and (pointer:fine) {
  .replay-back:not(:disabled):hover { background:rgba(255,255,255,.16); }
  .replay-next:hover { filter:brightness(1.06); box-shadow:0 8px 20px rgba(223,188,112,.2); }
}

@media (prefers-reduced-motion:reduce) {
  .case-title-borrow,.case-title-you,.case-title-ticket,.case-title-mark,.case-title::after,
  .case-title-ticket > i,.purpose-identity,.product-real .product-shot img,.evidence-focus { animation:none!important; opacity:1!important; transform:none!important; }
}