/* A small seaside stage for the moment a companion becomes yours. */
body[data-view="choose"], body[data-view="welcome"] { background:#102d3c; color:#f8f3e6; }
body[data-view="choose"] .site-footer, body[data-view="welcome"] .site-footer { display:none; }
body[data-view="choose"] .site-header, body[data-view="welcome"] .site-header { background:#102d3c; border-color:#c7d4c91e; }
.encounter-shell,.welcome-shell { position:relative; isolation:isolate; overflow:hidden; min-height:calc(100svh - 92px); padding:26px max(24px,calc((100vw - 1100px)/2)) 28px; background:radial-gradient(ellipse at 50% 40%,#27616a88,transparent 60%),linear-gradient(180deg,#102d3c,#183d49 72%,#132f3d); }
.encounter-stars { position:absolute; z-index:-1; inset:0; opacity:.55; pointer-events:none; background-image:radial-gradient(circle at 14% 20%,#f4ddb5 0 1px,transparent 2px),radial-gradient(circle at 83% 31%,#a5d9d3 0 1px,transparent 2px),radial-gradient(circle at 31% 52%,#f4ddb5 0 1px,transparent 2px),radial-gradient(circle at 73% 11%,#f4ddb5 0 1px,transparent 2px),radial-gradient(circle at 8% 69%,#92cdc9 0 1px,transparent 2px),radial-gradient(circle at 91% 79%,#f4ddb5 0 1px,transparent 2px); background-size:100% 100%; }
.encounter-heading { text-align:center; position:relative; z-index:2; }
.journey-label { display:flex; align-items:center; justify-content:center; gap:12px; font-size:10px; letter-spacing:.1em; color:#adc3c4; margin:0 0 24px; }
.journey-label b { color:#f0d49d; font-weight:500; }
.journey-label i { width:25px; height:1px; background:#8db9bd66; }
.encounter-heading .eyebrow,.welcome-heading .eyebrow { color:#b8dbd7; font-size:10px; letter-spacing:.23em; margin:0 0 8px; }
.encounter-heading h1 { font-size:clamp(28px,3.4vw,43px); line-height:1.5; margin:0 0 8px; }
.encounter-heading>p:last-child { color:#c5dad7; font-size:13px; margin:0; }
.encounter-heading .encounter-caveat { font-size:11px!important; margin:6px auto 0!important; max-width:44em; }
.encounter-stage { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; width:100%; max-width:930px; margin:4px auto 0; padding:0 22px; }
.stage-horizon { position:absolute; left:-15%; right:-15%; height:110px; bottom:30px; border-radius:50%; background:radial-gradient(ellipse,#91c6b521,transparent 70%); border-top:1px solid #b3d4c817; pointer-events:none; }
.companion-stand { position:relative; isolation:isolate; height:308px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:0 0 9px; border:0; border-radius:40px; color:#f7f1df; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.companion-stand:focus-visible { outline:2px solid #f1d396; outline-offset:2px; }
.companion-stand img { position:absolute; bottom:61px; width:240px; height:240px; max-width:100%; object-fit:contain; filter:drop-shadow(0 10px 10px #03192188); transition:transform .25s ease,filter .25s ease; }
.companion-stand:not(.is-active) img { filter:drop-shadow(0 8px 8px #03192188) brightness(.84); }
.companion-stand.is-active img { transform:translateY(-9px) scale(1.045); }
.stand-plinth { position:absolute; z-index:-1; width:83%; max-width:250px; height:46px; border:1px solid #72a6ab77; border-radius:50%; bottom:55px; background:linear-gradient(#36616a,#1b3d4a); box-shadow:0 9px 0 #122f3d,0 11px 0 #6e94954a,0 19px 30px #071b2a88; }
.stand-ring { position:absolute; width:88%; height:57px; bottom:50px; border-radius:50%; border:1px solid transparent; z-index:-1; transition:border-color .25s,box-shadow .25s; }
.is-active .stand-ring { border-color:#efd4a8; box-shadow:0 0 22px #dfbc6840,inset 0 0 20px #e8d19715; }
.stand-aura { position:absolute; z-index:-2; inset:0 0 70px; background:radial-gradient(ellipse at 50% 65%,#bee2cf33,transparent 70%); opacity:0; transition:opacity .3s; }
.is-active .stand-aura { opacity:1; }
.stand-name { font-size:16px; letter-spacing:.06em; font-weight:600; line-height:1.6; }
.stand-selection { color:#9bb9bd; font-size:10px; height:17px; letter-spacing:.1em; }
.is-active .stand-selection { color:#f1d498; }
.is-single .companion-stand img { width:265px; height:265px; }
.is-single .companion-stand { height:325px; }
.encounter-paging { display:flex; align-items:center; justify-content:center; gap:24px; margin:0 0 10px; }
.encounter-paging p { font-size:11px; color:#c1d1cd; margin:0; }
.encounter-paging p span { color:#e7d3aa; padding-left:12px; }
.page-arrow { width:44px; height:38px; color:#f7edda; background:transparent; border:1px solid #a9c8bc55; border-radius:50%; cursor:pointer; }
.page-arrow:disabled { opacity:.24; cursor:default; }
.encounter-dialogue { position:relative; display:grid; grid-template-columns:1fr 300px; gap:30px; border:1px solid #a7c4b67a; outline:1px solid #e3c89733; outline-offset:5px; border-radius:14px; background:linear-gradient(110deg,#173442f5,#224b54f5); box-shadow:0 16px 50px #05172244; margin:11px auto 0; padding:22px 30px; max-width:960px; }
.encounter-dialogue:before { content:'✦'; position:absolute; color:#e8c888; font-size:10px; top:-9px; left:25px; padding:0 8px; background:#183b46; }
.encounter-detail-copy .eyebrow { color:#afd0c9; font-size:9px; letter-spacing:.14em; margin:0 0 4px; }
.encounter-detail-copy h2 { font-size:25px; margin:0 0 5px; line-height:1.4; }
.encounter-quote { font-size:14px; color:#f7dfb5; margin:0 0 6px; }
.encounter-personality { font-size:12px; color:#c9dcd7; margin:0; line-height:1.9; }
.encounter-decision { border-left:1px solid #bad3bd33; padding-left:27px; display:flex; flex-direction:column; justify-content:center; gap:13px; }
.encounter-decision>p { color:#d2dfd8; font-size:12px; line-height:1.9; margin:0; }
.adopt-button { background:linear-gradient(135deg,#f1dcaa,#d8bd83); color:#193747; border:1px solid #fff2c6; box-shadow:0 4px 0 #907852,0 8px 22px #091e2d50; min-height:49px; gap:30px; justify-content:center; font-weight:700; }
.adopt-button:hover { background:#f5e2b8; transform:translateY(-2px); }
.adopt-button:active { transform:translateY(2px); box-shadow:0 1px 0 #907852; }
.encounter-bottom { max-width:960px; display:flex; align-items:center; justify-content:space-between; margin:16px auto 0; }
.encounter-bottom .text-button,.encounter-bottom .motion-button { font-size:11px; padding:10px 0; }
.motion-button.light { color:#c1d8d3; }
.welcome-shell { text-align:center; padding-top:32px; }
.welcome-heading h1 { font-size:clamp(30px,3.5vw,44px); line-height:1.55; margin:8px 0 8px; }
.welcome-heading>p:last-child { font-size:13px; color:#c5d9d3; margin:0; }
.welcome-film { position:relative; width:min(390px,86vw); margin:22px auto 16px; }
.nm-film-scene { aspect-ratio:1; border-radius:45% 45% 10px 10px; background:#e7f0ec; overflow:hidden; isolation:isolate; }
.nm-affection-video { display:block; width:100%; height:100%; object-fit:contain; transform:none!important; }
.welcome-film .nm-film-scene { border-radius:50%; border:1px solid #e8d4a9; box-shadow:0 0 0 7px #b5dbc10d,0 0 0 8px #aecdb82c,0 18px 50px #03131f55; }
.welcome-orbit { position:absolute; inset:-17px; border:1px solid #cdd7b72e; border-radius:50%; transform:rotate(-14deg); pointer-events:none; }
.welcome-orbit:before,.welcome-orbit:after { content:''; position:absolute; width:6px; height:6px; border-radius:50%; background:#eddaaf; top:15%; left:12%; box-shadow:0 0 20px #e3cd8b; }
.welcome-orbit:after { top:auto; left:auto; bottom:15%; right:12%; width:4px; height:4px; }
.welcome-star { position:absolute; color:#efd9a6; font-size:28px; pointer-events:none; }
.welcome-star-one { top:12%; left:-24px; }
.welcome-star-two { right:-22px; bottom:13%; font-size:36px; }
.welcome-dialogue { min-height:29px; font-size:15px; color:#f1dfb9; margin:21px 0 15px; }
.welcome-actions { display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.welcome-actions .button { min-width:280px; }
.welcome-actions .text-button { font-size:12px; }
.welcome-shell>.motion-button { display:block; margin:13px auto 0; font-size:11px; }
.welcome-back { font-size:11px; display:block; margin:8px auto 0; }
.film-spark { position:absolute; color:#789c87; font-size:15px; opacity:0; pointer-events:none; }
.film-spark-one { top:19%; right:16%; }
.film-spark-two { top:32%; right:10%; font-size:10px; }
.is-playing .film-spark { animation:film-sparkle 2.2s ease-in-out 2; }
.is-playing .film-spark-two { animation-delay:.65s; }
@keyframes film-sparkle { 0%,100%{opacity:0;transform:scale(.7)} 40%,60%{opacity:.8;transform:scale(1)} }
.encounter-replay { display:block; margin:15px auto 0; font-size:12px; }
.affection-controls button:disabled,.welcome-actions button:disabled { opacity:.55; cursor:default; }
body[data-motion="off"] .film-spark { animation:none!important; opacity:0; }
body[data-motion="off"] .companion-stand img { transition:none; }
@media(max-width:700px) {
  .encounter-shell,.welcome-shell { min-height:calc(100svh - 76px); padding:23px 20px 24px; }
  .journey-label { gap:8px; font-size:9px; margin-bottom:19px; }
  .journey-label i { width:15px; }
  .encounter-heading h1 { font-size:27px; line-height:1.55; max-width:13em; margin:0 auto 10px; }
  .encounter-heading>p:last-child { font-size:11px; line-height:1.85; max-width:29em; margin:0 auto; }
  .encounter-stage { gap:2px; padding:0; margin:8px auto 0; }
  .companion-stand { height:213px; border-radius:20px; }
  .companion-stand img { width:150px; height:150px; bottom:53px; }
  .stand-plinth { height:25px; bottom:47px; width:88%; box-shadow:0 6px 0 #122f3d,0 7px 0 #6e94954a,0 13px 20px #071b2a66; }
  .stand-ring { height:34px; bottom:41px; width:98%; }
  .stand-aura { inset:25px -8px 50px; }
  .stand-name { font-size:12px; line-height:1.5; max-width:100%; min-height:18px; }
  .stand-selection { font-size:8px; line-height:1.6; letter-spacing:0; }
  .companion-stand.is-active img { transform:translateY(-5px) scale(1.045); }
  .stage-horizon { bottom:28px; height:70px; }
  .is-single { grid-template-columns:1fr; max-width:270px; }
  .is-single .empty-stand { display:none; }
  .is-single .companion-stand { height:250px; }
  .is-single .companion-stand img { width:205px; height:205px; }
  .is-single .stand-plinth { width:74%; }
  .is-single .stand-ring { width:82%; }
  .is-single .stand-name { font-size:15px; }
  .encounter-dialogue { display:block; padding:20px 20px 18px; margin-top:14px; border-radius:12px; outline-offset:4px; }
  .encounter-detail-copy h2 { font-size:23px; }
  .encounter-quote { font-size:12px; }
  .encounter-personality { font-size:11px; }
  .encounter-decision { border-left:0; padding:13px 0 0; gap:10px; }
  .encounter-decision>p { font-size:11px; }
  .encounter-decision .button { width:100%; }
  .encounter-paging { gap:22px; margin-top:3px; margin-bottom:0; }
  .encounter-bottom { margin-top:13px; }
  .welcome-heading h1 { font-size:30px; }
  .welcome-film { width:min(330px,calc(100vw - 80px)); margin-top:24px; }
  .welcome-star-one { left:-17px; font-size:22px; }
  .welcome-star-two { right:-18px; font-size:28px; }
  .welcome-dialogue { font-size:12px; min-height:24px; margin-bottom:14px; }
  .welcome-actions { gap:10px; }
  .welcome-actions .button { min-width:0; width:100%; max-width:330px; }
  .welcome-actions .text-button { padding:10px; }
}
@media(max-width:360px) {
  .encounter-shell { padding-left:14px; padding-right:14px; }
  .encounter-heading h1 { font-size:25px; }
  .companion-stand { height:193px; }
  .companion-stand img { width:130px; height:130px; bottom:57px; }
  .stand-name { font-size:10px; }
  .encounter-detail-copy h2 { font-size:22px; }
  .encounter-dialogue { padding:17px 15px; }
}
@media(prefers-reduced-motion:reduce) {
  .film-spark,.stand-aura { animation:none!important; }
  .companion-stand img,.stand-ring,.stand-aura { transition:none; }
}