:root{--way-ink:#07090b;--way-steel:#171c20;--way-cold:#b8d7e7;--way-amber:#d9a66e;--way-red:#8f3434}

/* VISUAL PASS V0.3 — presentation layer only. Engine/scoring untouched. */
html,body,#app{background:#030405}
.stage{width:min(100vw,520px);background:#050708;box-shadow:0 0 70px #000;}
.stage:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.03),transparent 38%,rgba(0,0,0,.28) 72%,rgba(0,0,0,.72));}
header{z-index:8;padding-left:20px;padding-right:20px;background:linear-gradient(180deg,rgba(3,5,6,.88),rgba(3,5,6,.24),transparent);}
header strong{color:#c4c7c9;text-shadow:0 1px 10px #000;}
header button{position:relative;z-index:10;color:#b5b7b8;font-size:17px;}
.scene{position:relative;z-index:5;padding:84px 22px calc(70px + env(safe-area-inset-bottom));}
.stack,.moment,.results,.center{position:relative;z-index:5;text-shadow:0 2px 18px #000,0 1px 2px #000;}
.hint{z-index:9;bottom:calc(17px + env(safe-area-inset-bottom));color:#777d80;letter-spacing:.24em;animation:hintPulse 2.4s ease-in-out infinite;}
.grain{z-index:1;opacity:.07;mix-blend-mode:soft-light;}

/* A CSS-drawn last-train interior so the game already feels spatial before final art assets land. */
.bg{z-index:-3;overflow:hidden;background:
linear-gradient(180deg,rgba(4,6,7,.15),rgba(4,6,7,.82)),
radial-gradient(ellipse at 50% 13%,rgba(210,224,227,.13),transparent 28%),
linear-gradient(180deg,#12171a 0,#090c0e 48%,#040506 100%);}
.stage:not([data-type="boot"]):not([data-type="profile_progress"]):not([data-type="profile_cards"]):not([data-type="archetype_reveal"]):not([data-type="share_card"]):not([data-type="teaser"]) .bg:before{content:"";position:absolute;left:7%;right:7%;top:9%;height:48%;border-radius:15px 15px 7px 7px;border:1px solid rgba(196,213,218,.14);background:
linear-gradient(90deg,transparent 0 8%,rgba(109,125,132,.22) 8% 9%,transparent 9% 32%,rgba(109,125,132,.22) 32% 33%,transparent 33% 66%,rgba(109,125,132,.22) 66% 67%,transparent 67% 91%,rgba(109,125,132,.22) 91% 92%,transparent 92%),
linear-gradient(180deg,rgba(172,199,208,.08),rgba(7,11,13,.1) 53%,rgba(0,0,0,.46)),
repeating-linear-gradient(90deg,#071014 0 28px,#10191d 29px 30px,#071014 31px 68px);
box-shadow:0 0 0 7px rgba(16,21,24,.82),0 24px 55px rgba(0,0,0,.58),inset 0 0 42px rgba(0,0,0,.7);opacity:.92;animation:carriageBreath 5.5s ease-in-out infinite;}
.stage:not([data-type="boot"]):not([data-type="profile_progress"]):not([data-type="profile_cards"]):not([data-type="archetype_reveal"]):not([data-type="share_card"]):not([data-type="teaser"]) .bg:after{content:"";position:absolute;left:-8%;right:-8%;top:45%;height:39%;background:
radial-gradient(circle at 25% 13%,rgba(10,12,13,.96) 0 12px,transparent 13px),radial-gradient(ellipse at 25% 39%,rgba(8,10,11,.96) 0 21px,transparent 22px),
radial-gradient(circle at 52% 13%,rgba(8,10,11,.9) 0 11px,transparent 12px),radial-gradient(ellipse at 52% 39%,rgba(7,9,10,.94) 0 20px,transparent 21px),
radial-gradient(circle at 78% 13%,rgba(9,11,12,.94) 0 12px,transparent 13px),radial-gradient(ellipse at 78% 39%,rgba(7,9,10,.96) 0 22px,transparent 23px),
linear-gradient(180deg,transparent 0 49%,rgba(35,41,44,.62) 50% 55%,rgba(12,15,17,.9) 56% 68%,transparent 69%),
linear-gradient(90deg,transparent 0 7%,rgba(71,81,86,.2) 7% 8%,transparent 8% 92%,rgba(71,81,86,.2) 92% 93%,transparent 93%);
filter:blur(.05px);opacity:.78;transform:perspective(500px) rotateX(2deg);}

/* Ceiling light strips and a stronger photographic vignette. */
.stage:not([data-type="boot"]) .scene:before{content:"";position:absolute;z-index:-1;left:18%;right:18%;top:3.5%;height:3px;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(214,229,232,.44),rgba(255,255,255,.58),rgba(214,229,232,.44),transparent);box-shadow:0 0 20px rgba(213,232,238,.18);opacity:.55;}
.stage:not([data-type="boot"]) .scene:after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at center,transparent 32%,rgba(0,0,0,.25) 66%,rgba(0,0,0,.72) 100%);pointer-events:none;}

/* Opening boot — no duplicate logo, deliberate cinematic breathing room. */
.stage[data-type="boot"] header strong{opacity:0;}
.stage[data-type="boot"] .scene{align-items:center;justify-content:center;text-align:center;padding-bottom:110px;}
.stage[data-type="boot"] .bg{background:
radial-gradient(circle at 50% 44%,rgba(164,194,205,.08),transparent 22%),
linear-gradient(115deg,transparent 0 46%,rgba(144,168,176,.055) 47% 47.4%,transparent 47.6% 100%),
#030405;}
.stage[data-type="boot"] .bg:before{content:"";position:absolute;left:50%;top:16%;bottom:20%;width:1px;background:linear-gradient(transparent,rgba(184,213,222,.13),transparent);box-shadow:-120px 0 rgba(184,213,222,.035),120px 0 rgba(184,213,222,.035);}
.stage[data-type="boot"] .copy.system{font-size:12px;color:#d8dde0;letter-spacing:.38em;text-indent:.38em;}

/* 23:47 and chapter title */
.stage[data-type="cinematic"] .scene{align-items:flex-end;padding-bottom:108px;}
.stage[data-type="cinematic"] .copy.time{font-size:68px;line-height:.92;letter-spacing:-.05em;font-weight:180;color:#f3f1ee;text-shadow:0 5px 28px #000;}
.copy.location{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#d0d3d4;margin-top:6px;}
.stage[data-type="title"] .scene{align-items:center;text-align:left;padding-bottom:80px;}
.stage[data-type="title"] .stack{margin-top:auto;margin-bottom:auto;}
.stage[data-type="title"] .copy.title{font-size:11px;letter-spacing:.28em;color:#90989c;text-transform:uppercase;}
.stage[data-type="title"] .copy.title_large{font-size:48px;letter-spacing:-.045em;max-width:340px;text-wrap:balance;}

/* Normal story copy sits on a cinematic lower-third instead of floating in an empty black screen. */
.stage[data-type="environment"] .stack,.stage[data-type="observation"] .stack,.stage[data-type="dialogue"] .stack,.stage[data-type="reaction"] .stack,.stage[data-type="branch_reaction"] .stack,.stage[data-type="short_branch"] .stack,.stage[data-type="exploration"] .stack,.stage[data-type="tutorial"] .stack,.stage[data-type="timed_setup"] .stack,.stage[data-type="cooldown"] .stack,.stage[data-type="reveal_pre"] .stack,.stage[data-type="behavioral_reveal"] .stack{padding:18px 18px 20px;border:1px solid rgba(151,166,171,.12);border-radius:18px;background:linear-gradient(180deg,rgba(10,13,15,.45),rgba(6,8,9,.82));backdrop-filter:blur(9px);box-shadow:0 18px 50px rgba(0,0,0,.32);}
.copy.body,.copy.narration{font-size:21px;line-height:1.42;color:#edeae6;}
.dlg{border-left-color:rgba(176,199,205,.34);padding-left:15px;}
.dlg b{color:#b9c7cb;}
.dlg span{font-size:21px;}
.copy.system{color:#97a6ab;}

/* Phone screens get an actual device silhouette. */
.stage[data-type="phone_ui"] .bg:before{content:""!important;left:50%!important;right:auto!important;top:17%!important;width:205px!important;height:405px!important;transform:translateX(-50%);border:1px solid rgba(183,198,204,.28)!important;border-radius:31px!important;background:linear-gradient(160deg,rgba(30,37,40,.96),rgba(5,8,9,.98))!important;box-shadow:0 25px 80px #000,inset 0 0 0 5px #0d1113!important;animation:phoneFloat 4.5s ease-in-out infinite!important;}
.stage[data-type="phone_ui"] .bg:after{content:""!important;left:calc(50% - 48px)!important;right:auto!important;top:18.8%!important;width:96px!important;height:14px!important;border-radius:0 0 12px 12px!important;background:#050708!important;opacity:1!important;transform:none!important;}
.stage[data-type="phone_ui"] .scene{align-items:center;text-align:center;padding-bottom:60px;}
.stage[data-type="phone_ui"] .stack{align-items:center;justify-content:center;min-height:300px;}
.copy.phone_status{font-size:14px;letter-spacing:.08em;color:#dde3e5;padding:10px 14px;border-radius:999px;border:1px solid rgba(177,198,205,.2);background:rgba(5,8,9,.65);}

/* Decisions feel like tactile glass cards, not a questionnaire page. */
.stage[data-type="behavior_moment"] .scene{align-items:flex-end;padding-bottom:48px;}
.moment{gap:12px;padding:18px;border:1px solid rgba(164,180,185,.14);border-radius:22px;background:linear-gradient(180deg,rgba(12,15,17,.72),rgba(6,8,9,.94));backdrop-filter:blur(13px);box-shadow:0 22px 60px rgba(0,0,0,.48);}
.moment h2{font-size:21px;margin:0 0 5px;line-height:1.38;text-wrap:balance;}
.choices{gap:9px;}
.choices button,.modal button,.center>button{border-color:rgba(177,196,202,.18);background:linear-gradient(180deg,rgba(31,36,39,.86),rgba(18,21,23,.92));box-shadow:inset 0 1px rgba(255,255,255,.025);transition:transform .12s ease,border-color .15s ease,background .15s ease;}
.choices button:active,.center>button:active{transform:scale(.985);background:#23292c;}
.choices button:hover{border-color:rgba(187,211,220,.44);}
.timer{height:3px;border-radius:20px;background:rgba(255,255,255,.08);}
.timer i{border-radius:20px;background:linear-gradient(90deg,#6a2a2a,#bc5e4e);box-shadow:0 0 10px rgba(171,64,53,.35);}
.danger .bg{background:radial-gradient(circle at 50% 20%,rgba(105,35,35,.32),transparent 38%),linear-gradient(180deg,#111315,#060708 70%,#030405);}

/* Maintenance / direct action mood. */
.stage[data-type="direct_action"] .bg,.stage[data-type="timed_setup"] .bg{background:radial-gradient(circle at 50% 31%,rgba(121,47,42,.22),transparent 25%),linear-gradient(180deg,#131516,#080a0b 55%,#030405);}
.hold{border:1px solid rgba(214,174,155,.32)!important;background:radial-gradient(circle at 50% 42%,#2c2020,#121414 72%)!important;box-shadow:0 0 0 8px rgba(255,255,255,.025),0 24px 70px #000,inset 0 0 30px rgba(0,0,0,.6);}
.hold i{background:linear-gradient(180deg,#813b35,#54211f);}

/* Reveal/result screens deliberately leave the train behind. */
.stage[data-type="profile_progress"] .bg,.stage[data-type="profile_cards"] .bg,.stage[data-type="archetype_reveal"] .bg,.stage[data-type="share_card"] .bg,.stage[data-type="teaser"] .bg{background:radial-gradient(circle at 50% 33%,rgba(144,174,185,.1),transparent 28%),linear-gradient(180deg,#090c0e,#030405 70%);}
.stage[data-type="profile_progress"] .scene,.stage[data-type="archetype_reveal"] .scene,.stage[data-type="share_card"] .scene,.stage[data-type="teaser"] .scene{align-items:center;}
.ring{border-color:rgba(184,206,214,.32);box-shadow:0 0 70px rgba(115,151,164,.08),inset 0 0 40px rgba(100,135,147,.06);}
.results article{border-color:rgba(163,185,193,.16);background:linear-gradient(180deg,rgba(26,31,34,.75),rgba(12,15,17,.92));backdrop-filter:blur(8px);}
.arche h1{text-wrap:balance;}

@keyframes carriageBreath{0%,100%{transform:translateY(0);filter:brightness(.92)}50%{transform:translateY(1px);filter:brightness(1.03)}}
@keyframes phoneFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
@keyframes hintPulse{0%,100%{opacity:.42}50%{opacity:.86}}
@media(max-width:360px){.scene{padding-left:18px;padding-right:18px}.stage[data-type="title"] .copy.title_large{font-size:42px}.stage[data-type="cinematic"] .copy.time{font-size:61px}.moment{padding:15px}.copy.body,.copy.narration,.dlg span{font-size:19px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}