/* V8: page 06 stages the final handoff as a convincing identity match. */
:root {
  --v8-night:#071e25;
  --v8-teal:#0e3b42;
  --v8-paper:#f4eee2;
  --v8-gold:#e4bd6c;
  --v8-red:#a34740;
  --v8-green:#3f796a;
  --v8-ease:cubic-bezier(.2,.84,.22,1);
}

.handoff-screen {
  height:100%; min-height:0!important; padding:103px 14px max(40px,env(safe-area-inset-bottom));
  display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; overflow:hidden; color:#fff;
}
.handoff-screen::after {
  background:
    linear-gradient(180deg,rgba(5,22,28,.12),rgba(5,22,28,.28) 32%,rgba(5,22,28,.86) 72%,rgba(5,22,28,.98)),
    linear-gradient(90deg,rgba(4,19,24,.4),transparent 62%);
}
.handoff-stage-head { position:relative; z-index:3; margin:0 2px; }
.handoff-stage-head span { color:var(--v8-gold); }
.handoff-stage-head b { color:rgba(255,255,255,.82); }

.handoff-story {
  position:relative; z-index:3; min-height:0; padding:10px 8px 6px; display:flex; flex-direction:column; justify-content:flex-end;
}
.arrival-sign {
  position:absolute; left:8px; top:1px; min-width:104px; padding:7px 28px 7px 10px;
  border:1px solid rgba(255,255,255,.35); border-radius:6px; background:rgba(6,31,37,.68); backdrop-filter:blur(8px);
  box-shadow:0 8px 22px rgba(0,0,0,.18); animation:v8SignIn .42s var(--v8-ease) both;
}
.arrival-sign span { display:block; color:rgba(255,255,255,.58); font-size:9px; }
.arrival-sign b { display:block; margin-top:1px; font-size:13px; }
.arrival-sign i { position:absolute; right:8px; top:50%; width:12px; height:12px; border-right:2px solid var(--v8-gold); border-bottom:2px solid var(--v8-gold); transform:translateY(-65%) rotate(45deg); }

.handoff-title { margin-bottom:8px; text-shadow:0 4px 18px rgba(0,0,0,.72); }
.handoff-title > small { display:flex; align-items:center; gap:7px; color:var(--v8-gold); font-size:10px; font-weight:800; letter-spacing:.12em; }
.handoff-title > small::before { content:""; width:25px; height:1px; background:currentColor; }
.handoff-title h2 { margin:5px 0 0; font-family:"STSong","Songti SC",serif; font-size:28px; line-height:1.14; letter-spacing:-.03em; }
.handoff-title h2 em { color:#fff5df; font-style:normal; }

.handoff-match {
  min-height:82px; display:grid; grid-template-columns:1fr 66px 1fr; align-items:stretch; overflow:hidden;
  border:1px solid rgba(255,255,255,.3); border-radius:12px; color:#17383d; background:rgba(246,240,228,.96);
  box-shadow:0 16px 36px rgba(0,0,0,.28); opacity:0; transform:translateY(12px);
  animation:v8MatchIn .5s .25s var(--v8-ease) forwards;
}
.match-side { min-width:0; padding:10px 9px; display:flex; flex-direction:column; justify-content:center; }
.match-side small { color:#728184; font-size:9px; }
.match-side b { margin:4px 0 3px; color:#153a40; font:700 17px/1 "Times New Roman",serif; letter-spacing:.08em; white-space:nowrap; }
.match-side span { color:#8c5a4d; font-size:9px; font-weight:700; }
.match-recipient { text-align:right; }
.match-center {
  position:relative; display:grid; place-items:center; align-content:center; gap:5px; color:#785d2f;
  background:rgba(228,189,108,.18); border-left:1px dashed rgba(23,56,61,.2); border-right:1px dashed rgba(23,56,61,.2);
}
.match-center i { width:22px; height:22px; border:2px solid #b8893e; border-top-color:transparent; border-radius:50%; animation:v8Spin .75s linear infinite; }
.match-center strong { font-size:9px; white-space:nowrap; }
.handoff-screen.is-matched .match-center { color:#fff; background:var(--v8-green); }
.handoff-screen.is-matched .match-center i { position:relative; border:2px solid rgba(255,255,255,.72); animation:none; }
.handoff-screen.is-matched .match-center i::after { content:""; position:absolute; left:5px; top:4px; width:8px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
.handoff-screen.is-matched .match-side b { animation:v8Digits .36s var(--v8-ease) both; }

.handoff-reward {
  position:relative; width:min(84%,300px); margin:7px 0 0 auto; min-height:42px; padding:6px 53px 6px 10px;
  display:flex; align-items:center; justify-content:space-between; overflow:hidden; border-left:2px solid var(--v8-gold);
  color:#f8efdf; background:linear-gradient(90deg,rgba(5,30,36,.92),rgba(5,30,36,.54)); opacity:0; transform:translateX(18px);
}
.handoff-screen.is-matched .handoff-reward { animation:v8RewardIn .42s .35s var(--v8-ease) forwards; }
.handoff-reward small { display:block; color:rgba(255,255,255,.58); font-size:9px; }
.handoff-reward b { display:block; color:var(--v8-gold); font:700 21px/1.05 "Times New Roman",serif; }
.handoff-reward > span { font-size:11px; font-weight:800; }
.handoff-reward > i { position:absolute; right:-13px; width:55px; height:55px; border:1px solid rgba(228,189,108,.45); border-radius:50%; }
.handoff-reward > i::after { content:""; position:absolute; left:18px; top:17px; width:11px; height:6px; border-left:2px solid rgba(228,189,108,.8); border-bottom:2px solid rgba(228,189,108,.8); transform:rotate(-45deg); }

.handoff-choice-dock {
  position:relative; z-index:5; padding:8px; border:1px solid rgba(255,255,255,.28); border-radius:14px;
  color:#15383d; background:rgba(244,238,226,.98); box-shadow:0 -14px 38px rgba(0,0,0,.3);
  opacity:0; transform:translateY(calc(100% + 22px)); pointer-events:none;
  transition:opacity .26s ease,transform .44s var(--v8-ease);
}
.handoff-screen.is-handoff-ready .handoff-choice-dock { opacity:1; transform:none; pointer-events:auto; }
.handoff-question { min-height:36px; margin-bottom:6px; display:flex; align-items:center; gap:9px; }
.handoff-question > span { flex:0 0 31px; width:31px; height:31px; display:grid; place-items:center; border-radius:8px; color:#fff; background:var(--v8-teal); }
.handoff-question svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.handoff-question small { display:block; margin-bottom:1px; color:var(--v8-red); font-size:9px; font-weight:800; letter-spacing:.06em; }
.handoff-question b { display:block; font-size:13px; line-height:1.3; }
.handoff-choice-dock .choice-grid { gap:6px; }
.handoff-choice-dock .choice { min-height:54px; padding:7px 8px 7px 11px; border-radius:10px; }
.handoff-choice-dock .choice strong { font-size:13px; line-height:1.3; }
.handoff-choice-dock .choice small { margin-top:2px; font-size:10px; }
.handoff-choice-dock .choice-arrow { flex-basis:30px; width:30px; height:30px; border-radius:8px; }
.handoff-choice-dock .choice[data-action="stop"] { border-color:rgba(163,71,64,.35); background:#fffaf1; }
.handoff-choice-dock .choice[data-action="stop"] .choice-arrow { color:#fff; background:var(--v8-red); }

@keyframes v8SignIn { from{opacity:0;transform:translateY(-7px)} to{opacity:1;transform:none} }
@keyframes v8MatchIn { to{opacity:1;transform:none} }
@keyframes v8Spin { to{transform:rotate(360deg)} }
@keyframes v8Digits { 0%{opacity:.45;filter:blur(2px)} 100%{opacity:1;filter:none} }
@keyframes v8RewardIn { to{opacity:1;transform:none} }

@media (max-height:740px) {
  .handoff-screen { padding-top:96px; padding-bottom:max(40px,env(safe-area-inset-bottom)); gap:6px; }
  .handoff-story { padding-top:5px; padding-bottom:2px; }
  .handoff-title { margin-bottom:6px; }
  .handoff-title h2 { margin-top:3px; font-size:24px; }
  .handoff-match { min-height:70px; }
  .match-side { padding-top:7px; padding-bottom:7px; }
  .match-side b { font-size:15px; }
  .handoff-reward { min-height:36px; margin-top:5px; padding-top:4px; padding-bottom:4px; }
  .handoff-reward b { font-size:18px; }
  .handoff-choice-dock { padding:7px; }
  .handoff-question { min-height:31px; margin-bottom:5px; }
  .handoff-question > span { width:28px; height:28px; flex-basis:28px; }
  .handoff-choice-dock .choice { min-height:47px; padding-top:5px; padding-bottom:5px; }
  .handoff-choice-dock .choice small { font-size:9px; }
}

@media (max-width:370px) {
  .handoff-screen { padding-left:10px; padding-right:10px; }
  .handoff-story { padding-left:5px; padding-right:5px; }
  .handoff-match { grid-template-columns:1fr 58px 1fr; }
  .match-side { padding-left:7px; padding-right:7px; }
  .match-side b { font-size:14px; letter-spacing:.04em; }
  .handoff-choice-dock .choice strong { font-size:12px; }
}

@media (hover:hover) and (pointer:fine) {
  .handoff-choice-dock .choice:hover { transform:translateY(-2px); }
}

@media (prefers-reduced-motion:reduce) {
  .arrival-sign,.handoff-match,.match-center i,.match-side b,.handoff-reward,.handoff-choice-dock { animation:none!important; transition:none!important; }
  .arrival-sign,.handoff-match,.handoff-reward { opacity:1!important; transform:none!important; }
  .handoff-screen.is-handoff-ready .handoff-choice-dock { opacity:1!important; transform:none!important; }
}