/* /review-entry.css */
#entry-gate{display:flex;align-items:center;justify-content:center;padding:32px 24px;background:linear-gradient(#07121ce8,#050d17f5),url('/ward-media/images/sky-poster-v386.webp') center/cover;overflow:auto;text-align:center;color:#f3efe4}
#entry-gate[hidden]{display:none}
.entry-content{width:min(760px,100%);margin:auto}
.entry-brand{width:260px;max-width:65vw;height:auto;margin:0 auto 42px;display:block}
#entry-title{font:400 clamp(42px,5.2vw,76px)/1.08 Poster,sans-serif;letter-spacing:.025em;color:#ebc471;margin:0 0 24px}
#entry-gate .entry-copy{font:400 18px/1.6 Interface,Arial,sans-serif;margin:0 auto 32px;max-width:580px;color:#e5dfd3}
.entry-modes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 auto;max-width:650px}
#entry-gate .entry-modes button{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;height:auto;aspect-ratio:auto;min-height:66px;min-width:0;padding:18px 20px;border:1px solid #ebc471a0;border-radius:12px;background:linear-gradient(135deg,#21303a,#0b1821);box-shadow:inset 0 0 0 1px #ebc47122;font:400 17px/1.3 Interface,Arial,sans-serif;letter-spacing:.12em;color:#f3efe4;touch-action:manipulation}
#entry-gate .entry-modes button:hover{border-color:#ebc471;background:#253640}
#entry-gate .entry-modes button:focus-visible{outline:2px solid #ebc471;outline-offset:5px}
.entry-modes svg{width:26px;height:26px;fill:none;stroke:#ebc471;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.entry-switch{font-size:14px;color:#a9b7bf;margin:22px 0 0}.review-stage{font-size:12px;color:#8a9eab;margin:18px 0 0}
#entry-gate #entry-note:not(:empty){position:static;margin:18px auto 0;font:14px/1.5 Interface,Arial,sans-serif;color:#ebc471;letter-spacing:0;max-width:540px;background:#071520;padding:12px;border:1px solid #ebc47160;border-radius:8px}
#input-mode{position:fixed;z-index:1090;bottom:max(14px,env(safe-area-inset-bottom));right:16px;padding:10px 14px;min-height:44px;border:1px solid #ebc47170;border-radius:8px;background:#071520ed;color:#ebc471;font:11px/1.3 Interface,Arial,sans-serif;letter-spacing:.06em}
#input-mode[hidden]{display:none}
@media(max-width:600px){#entry-gate{padding:28px 24px}.entry-brand{width:220px;margin-bottom:38px}#entry-title{font-size:clamp(39px,10.5vw,60px);margin-bottom:22px}#entry-gate .entry-copy{font-size:16px;margin-bottom:28px}.entry-modes{grid-template-columns:1fr;max-width:360px;gap:14px}#entry-gate .entry-modes button{min-height:64px;font-size:16px}.review-stage{max-width:290px;margin:18px auto 0}}
@media(max-height:600px) and (min-width:601px){#entry-gate{padding:20px}.entry-brand{width:190px;margin-bottom:18px}#entry-title{font-size:44px;margin-bottom:12px}#entry-gate .entry-copy{font-size:15px;margin-bottom:18px}.entry-switch,.review-stage{margin-top:12px}}
#entry-gate #enter-experience{display:flex;width:100%;height:auto;min-height:66px;aspect-ratio:auto;padding:18px 20px;background:linear-gradient(135deg,#21303a,#0b1821);border:1px solid #ebc471a0;border-radius:12px;box-shadow:inset 0 0 0 1px #ebc47122;font:400 17px/1.3 Interface,Arial,sans-serif;letter-spacing:.12em}
.entry-modes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:600px){.entry-modes{grid-template-columns:minmax(0,1fr)}}
/* One mode switch remains in the same place throughout the scene. */
#input-mode{top:24px;bottom:auto;right:24px;display:flex;align-items:center;gap:6px;padding:8px;min-width:78px;justify-content:center}
#input-mode svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.first-contact-active #shell header{grid-template-columns:60px 1fr 180px}
.first-contact-active #shell header .controls{padding-right:86px}
@media(max-width:900px){#input-mode{top:14px;right:16px;min-width:70px;padding:7px;font-size:10px}.first-contact-active #shell header{grid-template-columns:30px minmax(0,1fr) 135px}.first-contact-active #shell header .controls{padding-right:74px}.first-contact-active #shell header>.logo{width:100%;max-width:220px}}

/* /conversation/contact.css?v=49 */
/* First-contact overlay inherits the live player's typography and sky. */
.contact-ui{position:fixed;z-index:100;left:50%;bottom:max(7dvh,28px);transform:translateX(-50%);width:min(90vw,540px);text-align:center;color:#f3eee2;font-family:Interface,Arial,sans-serif}
.contact-ui[hidden],.contact-ui [hidden]{display:none!important}
.contact-caption{font-size:clamp(17px,2vw,22px);line-height:1.6;text-shadow:0 2px 20px #000,0 0 8px #000;min-height:3.2em;margin:0 0 18px}
.contact-yes{position:relative;min-width:210px;min-height:96px;padding:30px 45px;background:none;border:0;color:#f4efdf;font:400 31.5px Interface,Arial,sans-serif;letter-spacing:.3em;text-indent:.3em;opacity:.86;text-shadow:0 0 18px #e9c27680;animation:contact-arrive 1.5s ease both}
.contact-yes:focus-visible{outline:1px solid #eed6a1;outline-offset:8px;border-radius:50%}
.contact-yes.dissolving{pointer-events:none;animation:contact-dissolve 2s ease forwards}
.contact-dust{position:absolute;inset:0;pointer-events:none}
.contact-dust i{position:absolute;left:50%;top:50%;width:2px;height:2px;border-radius:50%;background:#fff3d6;box-shadow:0 0 5px #efd09b;animation:contact-dust 2s ease-out both}
.contact-options{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.contact-options button,.contact-form button,.contact-transport{min-height:44px;padding:10px 14px;border:1px solid #c6aa7150;border-radius:9px;background:#07121ed9;color:#e8d6af;font:400 12px Interface,Arial,sans-serif}
.contact-form{display:flex;gap:8px;margin-top:12px}.contact-form input{min-width:0;flex:1;border:1px solid #c6aa7150;border-radius:8px;padding:12px;color:#f3eee2;background:#07121ee8;font:400 14px Interface,Arial,sans-serif}
.contact-note{font-size:12px;line-height:1.5;color:#c4c8ce;margin:10px 0 0}
.contact-transport{position:fixed;top:18px;left:18px;z-index:250}.contact-transport[hidden]{display:none}
#choices>.contact-ui{position:relative;left:auto;bottom:auto;transform:none;width:100%;padding:0}
#choices>.contact-ui .contact-caption{font-size:14px;min-height:0;margin:8px 0;max-height:90px;overflow:auto}
#choices>.contact-ui .contact-options{margin-top:4px;gap:6px}#choices>.contact-ui button{padding:8px;min-height:42px;font-size:11px}
#choices>.contact-ui .contact-form{margin-top:6px}#choices>.contact-ui .contact-form input{padding:8px;font-size:12px}
.contact-rehearsal{position:fixed;z-index:300;top:65px;left:50%;transform:translateX(-50%);width:min(90vw,600px);text-align:center;font:12px/1.5 Interface,Arial,sans-serif;color:#e8c88a;background:#07121ee6;padding:8px;border:1px solid #e8c88a50;border-radius:8px}
@keyframes contact-arrive{from{opacity:0;filter:blur(3px)}to{opacity:.86;filter:blur(0)}}
@keyframes contact-dissolve{0%{opacity:.86;filter:blur(0);text-shadow:0 0 18px #e9c27680}18%{opacity:1;text-shadow:0 0 25px #fff1c6}100%{opacity:0;filter:blur(7px);transform:translateY(-8px)}}
@keyframes contact-dust{0%{opacity:0;transform:translate(0,0)}20%{opacity:.8}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@media(prefers-reduced-motion:reduce){.contact-yes{animation:contact-arrive 1.5s ease both!important;filter:none!important}.contact-yes.dissolving{animation:contact-dissolve-reduced 2s ease forwards!important}.contact-dust{display:none}@keyframes contact-dissolve-reduced{to{opacity:0}}}
@media(max-width:480px){.contact-ui{bottom:max(5dvh,24px)}.contact-caption{font-size:17px}.contact-options button{font-size:11px}.contact-form input{font-size:16px}}

.contact-paused *{animation-play-state:paused!important}

/* Let the existing device reserve enough space for conversational controls. */
.first-contact-active #shell{grid-template-rows:auto auto minmax(0,1fr) 0 auto}
.first-contact-active #shell>.readout{display:none!important}
.first-contact-active #shell>footer{height:auto;min-height:0;padding-bottom:45px}
.first-contact-active #shell .choices{display:block;height:auto}
.first-contact-active .command-standby{display:none}
.first-contact-active #shell .stage{min-height:0}
.first-contact-active #shell .orb{width:min(240px,24vh);height:min(240px,24vh)}
@media(max-width:900px){.first-contact-active #shell .orb{width:min(145px,18vh);height:min(145px,18vh)}.first-contact-active #shell .dashboard{min-height:0}.first-contact-active #choices>.contact-ui .contact-note{font-size:10px;margin-top:5px}.first-contact-active #shell>footer{padding-bottom:38px}}
@media(max-height:650px){.first-contact-active #shell{overflow:auto;min-height:100dvh;height:auto}.first-contact-active #shell .dashboard{min-height:240px}}
.first-contact-active #shell{grid-template-rows:auto auto minmax(0,1fr) auto}
.first-contact-active #shell .choices{position:relative;inset:auto;min-height:0}
#shell header>.logo{height:auto;max-height:42px}
.first-contact-active #shell>footer{max-height:none}
.first-contact-active #shell .command-standby{display:none}
.first-contact-active #shell .contact-options button{width:auto;flex:0 1 auto;min-height:44px;font-size:12px;line-height:1.2}
.first-contact-active #shell .contact-form button{width:auto;min-height:44px}
body[data-input-mode="voice"] .contact-yes,body[data-input-mode="voice"] .contact-options{display:none!important}
.voice-indicator{display:inline-grid;place-items:center;width:30px;height:30px;margin:12px auto;color:#efd296}
.voice-indicator i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 13px #e9c27680;animation:voice-listening 2s ease-in-out infinite}
@keyframes voice-listening{50%{opacity:.4;transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){.voice-indicator i{animation:none}}
.contact-note:empty{display:none}

/* Audio leads; optional text and generously spaced choices support it. */
.contact-text-toggle{position:fixed;z-index:250;top:18px;left:98px;min-width:48px;min-height:44px;border:1px solid transparent;border-radius:9px;background:#07121ed9;color:#f3eee2;font:18px Interface,Arial,sans-serif;cursor:pointer}
.contact-text-toggle[hidden]{display:none}
.contact-text-toggle[aria-pressed="true"]{border-color:#eed6a1}
.contact-text-toggle:focus-visible,.contact-options button:focus-visible{outline:2px solid #eed6a1;outline-offset:4px}
.contact-options,#choices>.contact-ui .contact-options{gap:4px 22px;animation:contact-choices-in .35s ease both}
.contact-options button,.first-contact-active #shell .contact-options button,#choices>.contact-ui .contact-options button{min-height:48px;padding:14px 12px;border:0;border-radius:4px;background:transparent;color:#fff4de;font:400 clamp(14px,1.2vw,16px)/1.4 Interface,Arial,sans-serif;letter-spacing:.1em;text-shadow:0 2px 6px #000,0 0 14px #000;cursor:pointer;transition:color .15s,text-shadow .15s}
.contact-options button:hover{color:#fff;text-decoration:underline;text-underline-offset:6px}
.contact-options button:active{color:#fff;text-shadow:0 0 18px #ffe2a0}
#choices>.contact-ui .contact-caption{font-size:clamp(16px,1.5vw,20px);max-height:160px;line-height:1.5;margin:8px 0 18px}
@keyframes contact-choices-in{from{opacity:0}to{opacity:1}}
@media(max-width:480px){.contact-options,#choices>.contact-ui .contact-options{gap:2px 10px}.contact-options button,.first-contact-active #shell .contact-options button{flex:1 1 40%;letter-spacing:.06em}.contact-text-toggle{top:18px;left:94px}}
@media(prefers-reduced-motion:reduce){.contact-options,#choices>.contact-ui .contact-options{animation:none}.contact-options button{transition:none}}

.contact-options button{box-shadow:none!important}
@media(max-width:900px){body:not(.viewing-sky) .contact-text-toggle{top:auto;bottom:12px;left:18px}.first-contact-active #shell>footer{padding-bottom:72px}}

/* Stable device enclosure, with player controls and conversation outside it. */
#player-toolbar{display:none}
.first-contact-active #player-toolbar{position:relative;z-index:250;display:grid;grid-template-columns:1fr auto 1fr;height:76px;width:min(1100px,calc(100% - 40px));margin:0 auto;border:0;box-shadow:none}
#player-toolbar>.logo{grid-column:2;width:260px;max-width:100%;height:auto;margin:auto}
#player-toolbar>#pause{grid-column:1;grid-row:1;justify-self:start}
#player-toolbar>.controls{grid-column:3;grid-row:1;justify-self:end;padding:0 52px 0 0;gap:0}
#player-toolbar #restart{display:none!important}
body.first-contact-active{background:radial-gradient(ellipse at 50% 35%,#10202c,#03090e 75%);overflow-y:auto}
.first-contact-active #shell{width:min(1100px,calc(100% - 40px));height:clamp(420px,62svh,640px);min-height:0;margin:0 auto;padding:18px 28px;grid-template-rows:auto minmax(0,1fr);overflow:hidden;animation:none}
.first-contact-active #shell>footer,.first-contact-active #shell>.readout{display:none!important}
.first-contact-active #shell .dashboard{min-height:0;height:100%}
.first-contact-active #shell .orb{--orb-size:clamp(180px,28svh,290px)}
#conversation-dock{width:min(1000px,calc(100% - 32px));height:240px;margin:0 auto;position:relative}
#conversation-dock>.contact-ui{position:relative;inset:auto;transform:none;width:100%;height:240px;display:grid;grid-template-rows:100px 72px 44px 24px;align-items:center}
#conversation-dock .contact-caption{grid-row:1;max-height:94px;overflow:auto;font-size:18px;line-height:1.5;margin:0 auto;min-height:0;max-width:760px}
#conversation-dock .contact-options{grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0;width:min(700px,100%);justify-self:center}
#conversation-dock .contact-options button{font-size:18px;min-height:60px}
#conversation-dock .voice-indicator{grid-row:2;justify-self:center}
#conversation-dock .contact-more{grid-row:3;justify-self:center}
#conversation-dock .contact-note{grid-row:4;margin:0}
.contact-more{border:0;background:none;box-shadow:none;min-height:44px;padding:10px 18px;font-size:12px;letter-spacing:.12em;color:#c4cbd0}
.contact-more:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
body.first-contact-active #input-mode{top:16px;right:max(20px,calc((100vw - 1100px)/2));min-width:44px;width:44px;height:44px;padding:10px;border:0;background:transparent;font-size:0;gap:0}
#input-mode span{display:none}
body.first-contact-active .contact-transport,body.first-contact-active .contact-text-toggle{display:none!important}
body.viewing-sky #player-toolbar>.logo{visibility:hidden}
body.viewing-sky #conversation-dock{display:none}
@media(max-width:900px){
 .first-contact-active #player-toolbar{height:64px;width:calc(100% - 24px);grid-template-columns:48px 1fr 92px}
 #player-toolbar>.logo{width:210px;max-width:100%}
 body.first-contact-active #input-mode{top:10px;right:12px}
 .first-contact-active #shell{width:calc(100% - 16px);height:clamp(450px,66svh,650px);min-height:0;padding:10px 12px}
 .first-contact-active #shell .dashboard{grid-template-rows:auto minmax(0,1fr) auto;gap:8px}
 .first-contact-active #shell .stage{padding:4px 0;min-height:0}
 .first-contact-active #shell .orb{--orb-size:clamp(130px,24svh,230px)}
 #conversation-dock,#conversation-dock>.contact-ui{height:240px}
 #conversation-dock .contact-options{gap:8px}
 #conversation-dock .contact-options button{font-size:17px;padding:12px 6px;letter-spacing:.06em}
 #conversation-dock .contact-caption{font-size:17px}
}
@media(min-width:901px){#player-toolbar>.logo{position:absolute;left:50%;transform:translateX(-50%);width:280px}}

.contact-options.choice-selected button{opacity:0;transition:opacity .4s ease}
.contact-options.choice-selected button.selected{animation:chosen-response .4s ease forwards}
@keyframes chosen-response{0%{opacity:1;text-shadow:0 0 18px #ffe2a0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.contact-options.choice-selected button{transition:none}.contact-options.choice-selected button.selected{animation:none}}
@media(min-width:901px){#player-toolbar>.logo{grid-area:auto;position:absolute;inset:0;margin:auto;transform:none;width:280px;height:54px;max-height:54px;pointer-events:none}}

/* Use the space immediately below WARD, including short mobile viewports. */
#conversation-dock{height:auto;min-height:152px;padding-bottom:max(16px,env(safe-area-inset-bottom));width:min(1100px,calc(100% - 24px))}
#conversation-dock>.contact-ui{height:auto;min-height:152px;grid-template-rows:12px 72px 44px minmax(24px,auto)}
#conversation-dock>.contact-ui.has-narrative-text{grid-template-rows:92px 72px 44px minmax(24px,auto)}
#conversation-dock .contact-options{width:100%;gap:16px}
#conversation-dock .contact-options button{position:relative;overflow:visible;font-size:20px;padding:14px 16px;line-height:1.4;letter-spacing:.08em}
#conversation-dock .contact-caption{max-height:84px}
.contact-options.choice-selected button{transition:opacity .7s ease}
.contact-options.choice-selected button.selected{animation:contact-dissolve 2s ease forwards;text-decoration:none}
.contact-options.choice-selected button:not(.selected){pointer-events:none}
@media(max-width:900px){
 .first-contact-active #shell{height:clamp(390px,calc(100svh - 264px),600px)}
 .first-contact-active #shell .orb{--orb-size:clamp(130px,21svh,210px)}
 #conversation-dock>.contact-ui{min-height:180px;grid-template-rows:8px 112px 44px minmax(16px,auto)}
 #conversation-dock>.contact-ui.has-narrative-text{grid-template-rows:88px 112px 44px minmax(16px,auto)}
 #conversation-dock .contact-options{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,56px);gap:0}
 #conversation-dock .contact-options button{width:100%;min-height:56px;font-size:18px;padding:10px 12px;letter-spacing:.07em}
 #conversation-dock .contact-more{align-self:start;margin:0;min-height:44px}
}
@media(prefers-reduced-motion:reduce){.contact-options.choice-selected button.selected{animation:contact-dissolve-reduced 2s ease forwards!important;filter:none!important;transform:none!important}.contact-options.choice-selected button{transition:none}}

/* Approved responsive enclosure: an independent wordmark and device control strip. */
.first-contact-active #player-toolbar{display:flex;justify-content:center;align-items:center;height:76px;position:relative}
.first-contact-active #player-toolbar>.logo{position:static;inset:auto;transform:none;grid-area:auto;width:280px;max-width:75%;height:auto;max-height:54px;margin:0 auto;pointer-events:none}
#player-toolbar>.controls{display:none}
.ward-player-controls{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
.ward-player-controls button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px;background:none;border:0;box-shadow:none;color:#dfba72}
.ward-player-controls svg{width:23px;height:23px}
body.first-contact-active .ward-player-controls #input-mode{position:static;inset:auto;min-width:44px;width:44px;height:44px;padding:10px;z-index:auto}
#player-toolbar>.ward-player-controls{position:absolute;right:0;top:16px}
.first-contact-active #shell>.identity{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 0 10px;border-bottom:1px solid #7b6d505f;margin-bottom:16px}
.first-contact-active #shell>.identity:after{display:none}
.first-contact-active #shell .stage{overflow:visible;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:26px 16px;gap:12px;min-width:0}
.first-contact-active #shell .orb{--orb-size:clamp(180px,25svh,280px);flex:none!important;margin:0}
.first-contact-active #shell .scanner{margin:0;flex:none}
@media(max-width:900px){
 .first-contact-active #player-toolbar{height:66px;width:calc(100% - 24px)}
 .first-contact-active #player-toolbar>.logo{width:240px;max-width:75%;height:auto}
 #player-toolbar>.ward-player-controls{top:10px}
 .first-contact-active #shell{height:auto;min-height:0;padding:10px 12px 14px;overflow:visible}
 .first-contact-active #shell>.identity{min-height:50px;gap:6px;margin-bottom:12px;padding-bottom:8px;font-size:9px;letter-spacing:1px;flex-wrap:nowrap}
 .first-contact-active #shell>.identity strong{font-size:10px;letter-spacing:3px;padding:4px 8px}
 .ward-player-controls{gap:0}
 .first-contact-active #shell .dashboard{height:auto;grid-template-rows:auto auto auto;gap:0}
 .first-contact-active #shell .stage{padding:22px 0 18px;gap:8px;overflow:visible}
 .first-contact-active #shell .orb{--orb-size:clamp(150px,45vw,220px)}
 .first-contact-active #shell .stats{gap:8px}
 .first-contact-active #shell .records{gap:8px}
 .first-contact-active #shell .records .card{min-height:64px}
}
@media(max-width:350px){.first-contact-active #shell>.identity{gap:4px}.first-contact-active #shell>.identity strong{letter-spacing:2px;padding:4px 5px}.ward-player-controls button{padding:10px 8px}}

@media(max-width:900px){#conversation-dock>.contact-ui.has-narrative-text{grid-template-rows:64px 112px 44px minmax(16px,auto)}#conversation-dock .contact-caption{max-height:58px}}

/* WARD's spoken check briefly identifies the corresponding control. */
#shell .ward-guided-focus{outline:2px solid transparent;outline-offset:3px}

/* Fictional character vitals: compact, silent, and independent of dialogue. */
.identity .ward-heart{display:inline-block;width:16px;height:16px;flex:none;margin:0 7px 0 9px;vertical-align:middle;fill:#b7dce4;opacity:0;transform-origin:center;transition:opacity .6s}
.vitals-checked .identity .ward-heart{opacity:.85;animation:ward-heartbeat var(--ward-heart-period,1.05s) ease-in-out infinite}
#shell[data-exertion="high"]{--ward-heart-period:.62s}
#shell.paused .ward-heart{animation-play-state:paused}
@keyframes ward-heartbeat{0%,45%,100%{transform:scale(1)}12%{transform:scale(1.15)}24%{transform:scale(1)}34%{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.vitals-checked .identity .ward-heart{animation:none;transition:none}}

/* Contacts share the soundscape bearings: wreck left/front, jungle right/front. */
.scanner-contacts{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:50%}
.scan-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#ed6b64;box-shadow:0 0 7px #ef625baa}
.wreck-one{left:16%;top:35%}.wreck-two{left:21%;top:30%;width:4px;height:4px;opacity:.7}
.creature-dot{background:#e3ba76;box-shadow:0 0 7px #e3ba7699;animation:scanner-roam 9s ease-in-out infinite alternate}
.creature-one{left:82%;top:53%}.creature-two{left:75%;top:66%;animation-duration:13s;animation-delay:-5s;width:4px;height:4px}
@keyframes scanner-roam{0%{transform:translate(0,0)}35%{transform:translate(-7px,5px)}70%{transform:translate(3px,12px)}100%{transform:translate(-4px,18px)}}
#shell.paused .creature-dot{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.creature-dot{animation:none}}

.contact-ui button.consumed{display:none!important;visibility:hidden!important;opacity:0!important;animation:none!important;transition:none!important}
@media(max-width:900px) and (min-height:600px){
 body.first-contact-active:not(.viewing-sky){height:100svh;min-height:0;overflow:hidden;display:grid;grid-template-rows:56px minmax(0,1fr) 184px;padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box}
 .first-contact-active #player-toolbar{height:56px;margin:0 auto}
 .first-contact-active #shell{height:100%;min-height:0;overflow:hidden;padding:8px 12px;display:grid;grid-template-rows:48px minmax(0,1fr)}
 .first-contact-active #shell>.identity{min-height:0;height:48px;margin:0;padding:0 0 6px}
 .first-contact-active #shell .dashboard{height:100%;min-height:0;grid-template-rows:auto minmax(0,1fr) auto;gap:6px}
 .first-contact-active #shell .stage{min-height:0;padding:4px 0;gap:4px;overflow:hidden}
 .first-contact-active #shell .orb{--orb-size:clamp(100px,calc(100svh - 550px),200px)}
 .first-contact-active #shell .stats{gap:6px}
 .first-contact-active #shell .records .card{min-height:56px;padding:8px}
 #conversation-dock{height:184px;min-height:0;padding:0 0 6px;overflow:hidden}
 #conversation-dock>.contact-ui,#conversation-dock>.contact-ui.has-narrative-text{height:178px;min-height:0;grid-template-rows:48px 104px 26px 0}
 #conversation-dock .contact-caption{max-height:44px;font-size:16px;line-height:1.35}
 #conversation-dock .contact-options{grid-template-rows:repeat(2,52px)}
 #conversation-dock .contact-options button{min-height:52px;padding:8px;font-size:18px}
 #conversation-dock .contact-more{min-height:26px;padding:4px 10px}
}

/* One scene clock keeps the sweep and moving contacts in agreement. */
.first-contact-active .radar:before{animation:none;transform:rotate(var(--scan-angle,0deg))}
.scan-dot{scale:var(--scan-scale,1);filter:brightness(var(--scan-brightness,1));transform-origin:center}
@media(prefers-reduced-motion:reduce){.first-contact-active .radar:before{transform:none}.scan-dot{scale:1;filter:none}}

/* Legibility audit: clearer secondary information and a less cramped wordmark. */
.first-contact-active #player-toolbar{height:96px;padding:16px 0}
.first-contact-active #shell .label{font-size:14px;line-height:1.3;letter-spacing:.07em;color:#bed8df}
.first-contact-active #shell .sub{font-size:16px;line-height:1.4;color:#e1e9ec}
.first-contact-active #shell .scanner{font-size:13px;line-height:1.35;letter-spacing:.1em;color:#bed8df}
.first-contact-active #shell .scanner b{font-size:13px;letter-spacing:.08em;margin-top:4px}
.first-contact-active #shell .north{font-size:12px;color:#bed8df}
.first-contact-active #shell>.identity strong{font-size:14px}
#conversation-dock .contact-more{font-size:14px;letter-spacing:.08em}
@media(max-width:900px){
 .first-contact-active #player-toolbar{height:72px;padding:16px 0}
 .first-contact-active #player-toolbar>.logo{width:240px;max-height:40px}
 .first-contact-active #shell .label{font-size:13px;letter-spacing:.025em}
 .first-contact-active #shell .sub{font-size:14px;line-height:1.35}
 .first-contact-active #shell .scanner,.first-contact-active #shell .scanner b{font-size:12px;letter-spacing:.07em}
 .first-contact-active #shell>.identity strong{font-size:12px;letter-spacing:2px}
 .first-contact-active #shell .records .card{gap:7px}
 .first-contact-active #shell .records .glyph{font-size:20px}
}
@media(max-width:900px) and (min-height:600px){
 body.first-contact-active:not(.viewing-sky){grid-template-rows:72px minmax(0,1fr) 184px}
 .first-contact-active #shell .stage{container-type:size}
 .first-contact-active #shell .orb{--orb-size:min(200px,45vw,calc(100cqh - 60px))}
 .first-contact-active #shell .records .card{min-height:64px}
}
@media(min-width:901px){
 .first-contact-active #shell{height:clamp(400px,calc(100svh - 310px),640px)}
 #conversation-dock{height:200px;min-height:200px;padding-bottom:0}
 #conversation-dock>.contact-ui,#conversation-dock>.contact-ui.has-narrative-text{height:200px;min-height:200px;grid-template-rows:56px 72px 44px 24px}
 #conversation-dock .contact-caption{max-height:54px}
}
@media(max-width:900px){
 .first-contact-active #shell .records .card{display:block;padding:8px}
 .first-contact-active #shell .records .glyph{display:none}
 .first-contact-active #shell .records .label{white-space:nowrap}
}
@media(max-width:900px) and (min-height:600px) and (max-height:740px){
 body.first-contact-active:not(.viewing-sky){grid-template-rows:64px minmax(0,1fr) 156px}
 .first-contact-active #player-toolbar{height:64px;padding:12px 0}
 .first-contact-active #shell .records .card{min-height:56px}
 .first-contact-active #shell .orb{--orb-size:min(180px,45vw,calc(100cqh - 48px))}
 .first-contact-active #shell .scanner{padding:0}
 #conversation-dock{height:156px}
 #conversation-dock>.contact-ui,#conversation-dock>.contact-ui.has-narrative-text{height:156px;grid-template-rows:44px 88px 24px 0}
 #conversation-dock .contact-options{grid-template-rows:repeat(2,44px)}
 #conversation-dock .contact-options button{min-height:44px;padding:6px}
 #conversation-dock .contact-more{min-height:24px;padding:3px}
}

/* The scanner itself is the control; its former caption space belongs to the circle. */
.first-contact-active #shell .stage{gap:0;padding:12px 8px;container-type:size}
.first-contact-active #shell .orb{--orb-size:min(320px,100cqw,100cqh);cursor:pointer}
.first-contact-active #shell .orb:focus-visible{outline:2px solid #dfba72;outline-offset:4px;border-radius:50%}
@media(max-width:900px){
 .first-contact-active #shell .stage{padding:8px 0}
 .first-contact-active #shell .orb{--orb-size:min(260px,100cqw,100cqh)}
}
@media(max-width:900px) and (max-height:599px){
 .first-contact-active #shell .stage{container-type:normal}
 .first-contact-active #shell .orb{--orb-size:min(220px,55vw)}
}

/* One slow initial assessment, followed by actual information windows. */
.ward-guided-focus{animation:ward-analysis 2s ease-in-out both}
@keyframes ward-analysis{0%,100%{outline-color:transparent;box-shadow:none}45%,65%{outline-color:#ebc471;box-shadow:0 0 22px #ebc47155}}
#shell.paused .ward-guided-focus{animation-play-state:paused}
.first-contact-active .radar{overflow:hidden}
.storm-front{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:calc(.3 + var(--storm-progress,0)*.45);transform:translateY(calc(-65% + var(--storm-progress,0)*42%));background:radial-gradient(ellipse at 42% 35%,#142331df 0%,#45637980 30%,#7399ac30 48%,transparent 65%);filter:blur(7px)}
.storm-front[hidden]{display:none}
.sky-lightning{animation:sky-lightning 1.4s ease-out}
@keyframes sky-lightning{0%{box-shadow:0 0 45px #e8a96299,inset 0 0 70px #f7b95c44}100%{box-shadow:0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.ward-guided-focus,.sky-lightning{animation:none}.storm-front{transform:translateY(-32%)}}

/* A single sky-image pulse, fired with the post-question lightning crack. */
#skyvideo.contact-sky-flash{animation:contact-sky-flash 1s ease-out both}
@keyframes contact-sky-flash{0%{filter:brightness(1.65) saturate(1.12)}100%{filter:brightness(1) saturate(1)}}
@media(prefers-reduced-motion:reduce){#skyvideo.contact-sky-flash{animation:none}}

/* Compact machined-metal brand plate. */
.first-contact-active #shell>.identity strong{
 display:inline-flex;align-items:center;justify-content:center;position:relative;
 height:28px;padding:0 10px;border:1px solid #8b9ba2;border-radius:0;
 font-family:Interface,Arial,sans-serif;font-size:14px;font-weight:800;line-height:1;
 letter-spacing:.35px;white-space:nowrap;color:#111c22;text-shadow:0 1px #edf3f54d;
 background:linear-gradient(180deg,#c5cfd3 0%,#a4b0b6 47%,#89979e 51%,#adb9bf 100%);
 box-shadow:inset 0 1px #edf3f5a6,inset 0 -1px #56656e,0 2px 3px #0006;
}
.first-contact-active #shell>.identity strong:after{content:none}
@media(max-width:900px){.first-contact-active #shell>.identity strong{height:25px;padding:0 8px;font-size:12px;letter-spacing:.3px}}
/* The tutorial stays over the player, with no frosted blackout. */
#panel[data-tutorial]::backdrop{background:#02080d24;backdrop-filter:none;-webkit-backdrop-filter:none}
#panel[data-tutorial]{background:#0a1922f2;box-shadow:0 12px 42px #0006;border-color:#a28c63;animation:tutorial-reveal .35s ease-out both;max-width:min(440px,calc(100vw - 32px))}
@keyframes tutorial-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#panel[data-tutorial]{animation:none}}

/* A short activation cue precedes every feature window. */
#shell .ward-feature-active{outline:2px solid #e7c484;outline-offset:3px;border-color:#f2d39c;box-shadow:0 0 20px #e6b66166,inset 0 0 18px #e6b66128;filter:brightness(1.18)}

/* Mobile: bold full-width choices, with more depth for the wrist display. */
@media(max-width:900px){
 .first-contact-active #shell>.identity strong{height:32px;min-width:86px;padding:0 11px;font-size:14px;letter-spacing:.4px;flex-shrink:0}
 #conversation-dock{width:calc(100% - 24px)}
 #conversation-dock .contact-options button{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:clamp(21px,6.2vw,28px);letter-spacing:.015em;line-height:1.08;padding:6px 2px;text-wrap:balance}
 .contact-yes{font-family:Arial,Helvetica,sans-serif;font-size:44px;font-weight:800;letter-spacing:.12em}
}
@media(max-width:900px) and (min-height:600px){
 body.first-contact-active:not(.viewing-sky){grid-template-rows:64px minmax(0,1fr) 156px}
 .first-contact-active #player-toolbar{height:64px;padding:12px 0}
 #conversation-dock{height:156px;padding-bottom:4px}
 #conversation-dock>.contact-ui,#conversation-dock>.contact-ui.has-narrative-text{height:152px;grid-template-rows:24px 104px 24px 0}
 #conversation-dock .contact-options{grid-template-rows:repeat(2,52px)}
 #conversation-dock .contact-options button{min-height:52px}
 #conversation-dock .contact-caption{max-height:24px;font-size:15px;line-height:1.4}
 body.first-contact-active:has(.has-narrative-text):not(.viewing-sky){grid-template-rows:64px minmax(0,1fr) 192px}
 #conversation-dock:has(.has-narrative-text){height:192px}
 #conversation-dock>.contact-ui.has-narrative-text{height:188px;grid-template-rows:60px 104px 24px 0}
 #conversation-dock .has-narrative-text .contact-caption{max-height:60px}
}

/* AUDIOWORLDS: 50% larger, centred, with proportional small-screen limits. */
.first-contact-active #player-toolbar>.logo{width:420px;max-width:100%;max-height:81px}
@media(max-width:900px){
 .first-contact-active #player-toolbar>.logo{width:360px;max-width:112.5%;max-height:60px;flex-shrink:0}
}

/* Larger engraved lettering on a clean, brushed-steel rectangular plate. */
.first-contact-active #shell>.identity strong{
 height:36px;min-width:112px;padding:0 10px;box-sizing:border-box;
 font-family:Arial,Helvetica,sans-serif;font-size:21px;font-weight:900;letter-spacing:.15px;
 color:#14212a;border:1px solid #aebec6;border-radius:0;
 background:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 3px),linear-gradient(175deg,#d7e0e5 0%,#a8b8c1 45%,#82949f 49%,#b5c3ca 100%);
 text-shadow:0 1px 0 #f6fbff9c,0 -1px 0 #263b4640;
 box-shadow:inset 0 1px 0 #f2f8fbad,inset 0 -2px 0 #4c606b,0 2px 4px #0008;
}
@media(max-width:900px){.first-contact-active #shell>.identity strong{height:36px;min-width:104px;padding:0 8px;font-size:20px;letter-spacing:0}}

/* Balance the complete WARD device between branding and choices. */
body.first-contact-active:not(.viewing-sky){min-height:100svh;box-sizing:border-box;display:grid;grid-template-rows:112px minmax(0,1fr) 156px;gap:18px;padding-bottom:env(safe-area-inset-bottom)}
.first-contact-active #player-toolbar{height:112px;padding:0;box-sizing:border-box;margin:0 auto}
.first-contact-active:not(.viewing-sky) #shell{align-self:center;margin-top:0;margin-bottom:0;height:100%;max-height:100%;box-sizing:border-box}
.first-contact-active #shell>.identity>span{display:inline-flex;align-items:center;white-space:nowrap;gap:8px;font-size:18px;font-weight:700;letter-spacing:.8px}
.first-contact-active .identity .ward-heart{width:24px;height:24px;margin:0 2px;vertical-align:middle}
@media(max-width:900px){
 .first-contact-active #player-toolbar{height:82px;padding:0}
 .first-contact-active #shell>.identity>span{font-size:16px;letter-spacing:.5px;gap:5px}
 .first-contact-active .identity .ward-heart{width:23px;height:23px;margin:0}
 .first-contact-active .ward-player-controls button{min-width:40px;padding:8px}
 body.first-contact-active .ward-player-controls #input-mode{min-width:40px;width:40px}
}
@media(max-width:900px) and (min-height:600px){
 body.first-contact-active:not(.viewing-sky){height:100svh;grid-template-rows:82px minmax(0,1fr) 156px;gap:12px}
 body.first-contact-active:has(.has-narrative-text):not(.viewing-sky){grid-template-rows:82px minmax(0,1fr) 192px}
}
@media(max-height:599px){body.first-contact-active:not(.viewing-sky){height:auto;grid-template-rows:auto auto auto}.first-contact-active:not(.viewing-sky) #shell{height:auto;max-height:none}}
@media(max-width:350px){
 .first-contact-active #shell>.identity>span{font-size:14px;gap:3px}
 .first-contact-active #shell>.identity strong{min-width:96px;padding:0 6px;font-size:19px}
 .first-contact-active .identity .ward-heart{width:21px;height:21px}
 .first-contact-active .ward-player-controls button{min-width:32px;padding:5px}
 body.first-contact-active .ward-player-controls #input-mode{min-width:32px;width:32px}
}
body.first-contact-active:not(.viewing-sky){grid-template-columns:minmax(0,1fr)}
.first-contact-active #shell,.first-contact-active #player-toolbar,#conversation-dock{min-width:0}
@media(max-width:350px){.first-contact-active .ward-player-controls button{width:32px;box-sizing:border-box}.first-contact-active .ward-player-controls{gap:0}}

/* Laptop choices sit closer to the device; mobile position remains locked. */
@media(min-width:901px){
 body.first-contact-active:not(.viewing-sky) #conversation-dock{top:-24px}
}

/* Voice feedback uses the existing choices row, without moving the device or logo. */
.contact-ui .voice-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:160px;height:68px;margin:0 auto;color:#c6a56a;pointer-events:none}
.voice-indicator svg{width:32px;height:32px;flex-shrink:0;opacity:.7;transition:filter .25s,color .25s,opacity .25s}
.voice-indicator .voice-label{font:600 9px/1.2 Interface,Arial,sans-serif;letter-spacing:.18em;color:inherit}
.voice-indicator[data-state="listening"] svg{opacity:1;animation:mic-listening 2.4s ease-in-out infinite}
.voice-indicator[data-state="speech"]{color:#ffe0a0}
.voice-indicator[data-state="speech"] svg{opacity:1;filter:drop-shadow(0 0 9px #efc16db3)}
.voice-indicator[data-state="unavailable"]{opacity:.45}
@keyframes mic-listening{0%,100%{filter:drop-shadow(0 0 2px #e6b86b40);opacity:.75}50%{filter:drop-shadow(0 0 7px #e6b86b99);opacity:1}}
@media(max-width:900px){.contact-ui .voice-indicator{height:88px;gap:9px}.voice-indicator svg{width:40px;height:40px}.voice-indicator .voice-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){.voice-indicator[data-state="listening"] svg{animation:none;opacity:1;filter:drop-shadow(0 0 4px #e6b86b70)}.voice-indicator svg{transition:none}}

/* Decorative TAP activity shares the mic position and yields to actual choices. */
#conversation-dock>.contact-ui>*{grid-column:1}
#conversation-dock .tap-activity{grid-row:2;justify-self:center}
.tap-activity{display:flex;align-items:center;justify-content:center;gap:7px;width:80px;height:68px;margin:0 auto;pointer-events:none;opacity:.45;transition:opacity .3s ease,visibility .3s ease;color:#d5b271}
.tap-activity i{display:block;width:2px;height:19px;background:currentColor;border-radius:2px;transform:scaleY(.45);transform-origin:center;box-shadow:0 0 8px #d5b27130}
.tap-activity i:nth-child(2){height:29px}
.tap-activity[data-state="speaking"]{opacity:.8}
.tap-activity[data-state="speaking"] i{animation:ward-speaking 1.3s ease-in-out infinite}
.tap-activity i:nth-child(2){animation-delay:-.45s}
.tap-activity i:nth-child(3){animation-delay:-.8s}
.tap-activity[data-state="choices"]{opacity:0;visibility:hidden}
@keyframes ward-speaking{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media(max-width:900px){.tap-activity{height:88px;gap:9px}.tap-activity i{height:24px}.tap-activity i:nth-child(2){height:35px}}
@media(prefers-reduced-motion:reduce){.tap-activity{transition:none}.tap-activity[data-state="speaking"] i{animation:none;transform:scaleY(.75)}}

/* A deeper inner lower edge, with the outer device and surrounding layout fixed. */
.first-contact-active #shell{padding-bottom:26px}
@media(max-width:900px){.first-contact-active #shell{padding-bottom:22px}}
@media(max-width:900px) and (max-height:599px){.first-contact-active #shell{padding-bottom:28px}}

/* Four equal cards frame the scanner, without moving the outer layout. */
.first-contact-active #shell .stats,.first-contact-active #shell .records{gap:14px}
.first-contact-active #shell .card{height:100px;min-height:100px;padding:14px;gap:12px;min-width:0}
.first-contact-active #shell .card>span:last-child{min-width:0}
.first-contact-active #shell .label{white-space:normal;overflow-wrap:normal}
.first-contact-active #shell .orb{--orb-size:min(380px,100cqw,100cqh)}
@media(max-width:900px){
 .first-contact-active #shell .dashboard{grid-template-rows:76px minmax(0,1fr) 76px;gap:8px}
 .first-contact-active #shell .stats,.first-contact-active #shell .records{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .first-contact-active #shell .stats .card,.first-contact-active #shell .records .card{height:76px;min-height:76px;display:flex;align-items:center;padding:8px;gap:6px}
 .first-contact-active #shell .card .glyph{display:none}
 .first-contact-active #shell .card .label{font-size:12px;letter-spacing:0;line-height:1.2;margin-bottom:5px;white-space:normal}
 .first-contact-active #shell .card .sub{font-size:13px;line-height:1.25}
 .first-contact-active #shell .card .value{font-size:23px}
 .first-contact-active #shell .stage{padding:4px 0}
 .first-contact-active #shell .orb{--orb-size:min(320px,100cqw,100cqh)}
 .first-contact-active .ward-player-controls button{min-height:44px}
}
@media(max-width:900px) and (max-height:740px){
 .first-contact-active #shell .dashboard{grid-template-rows:64px minmax(0,1fr) 64px;gap:6px}
 .first-contact-active #shell .stats .card,.first-contact-active #shell .records .card{height:64px;min-height:64px}
}
@media(max-width:900px) and (max-height:599px){
 .first-contact-active #shell .dashboard{grid-template-rows:64px minmax(180px,1fr) 64px}
 .first-contact-active #shell .orb{--orb-size:min(220px,55vw)}
}

/* /conversation/ward-finish.css?v=activation-plate-2 */
/* Cosmetic skin only: no layout, spacing, type-size or hit-area overrides. */
.first-contact-active #shell{
 border-color:#303b42;border-top-color:#58636a;border-bottom-color:#222b32;
 background:linear-gradient(#47cfe906 1px,transparent 1px),linear-gradient(90deg,#47cfe906 1px,transparent 1px),radial-gradient(ellipse at 50% 48%,#06304760,transparent 62%),#020b12;
 background-size:32px 32px,32px 32px,auto,auto;
 box-shadow:inset 0 0 0 1px #a2b3ba8a,inset 0 0 0 4px #111b22,inset 0 0 24px #000b,0 0 0 1px #829096,0 8px 25px #0008;
}
.first-contact-active #shell:before{border-color:#879ba063;box-shadow:inset 0 1px #d3e3e333,inset 0 -1px #000;}
.first-contact-active #shell:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:6;border-radius:inherit;background:linear-gradient(90deg,#b2c2cb60,#131f27 3px,#75858e 5px,transparent 6px) left center/7px 22% no-repeat,linear-gradient(270deg,#b2c2cb60,#131f27 3px,#75858e 5px,transparent 6px) right center/7px 22% no-repeat;}
.ward-hardware{position:absolute;inset:0;z-index:7;pointer-events:none}
.ward-hardware:before,.ward-hardware:after{content:'';position:absolute;left:calc(50% - 15px);width:30px;height:3px;border-radius:2px;background:#ffd267;box-shadow:0 0 0 2px #151c21,0 0 0 3px #5e6668,0 0 8px #ffa22b80;transition:background .2s,box-shadow .2s}
.ward-hardware:before{top:2px}.ward-hardware:after{bottom:2px}
#shell:has(.ward-feature-active) .ward-hardware:before,#shell:has(.ward-feature-active) .ward-hardware:after{background:#fff0ab;box-shadow:0 0 0 2px #151c21,0 0 0 3px #7e745c,0 0 13px #ffb432b0}
.first-contact-active #shell>.identity{border-bottom-color:#57d4df36}
.first-contact-active #shell>.identity strong,
#activation .calibration h1{border-color:#8a9ca4;background:repeating-linear-gradient(0deg,#ffffff09 0 1px,transparent 1px 3px),linear-gradient(170deg,#c4d0d6,#8d9ea8 48%,#6b808c 50%,#adbec7);box-shadow:0 0 0 2px #0a151c,0 0 0 3px #61747c,inset 0 1px #e7f6fc99,inset 0 -2px #374e5c,0 3px 5px #000a}
.first-contact-active .identity .ward-heart{fill:#59e5f4;filter:drop-shadow(0 0 3px #17bada55)}
.first-contact-active #shell .card{border-color:#78c2cf70;border-top-color:#8adce799;background:linear-gradient(145deg,#0a202b,#030e17 70%);box-shadow:inset 0 0 0 1px #02080c,inset 0 1px #b4f4ff12,0 3px 8px #0006}
.first-contact-active #shell .card:before{content:'';position:absolute;top:-1px;left:-1px;width:12px;height:7px;border-top:2px solid #73ebf2;border-left:2px solid #73ebf2;border-top-left-radius:5px;pointer-events:none}
.first-contact-active #shell .card:after{background:#83aab4;box-shadow:0 1px #000}
.first-contact-active #shell .card:hover{border-color:#b1edf2;box-shadow:inset 0 0 14px #25bada15,0 0 9px #50cde51c}
.first-contact-active #shell .glyph{color:#8ce9f2;text-shadow:0 0 8px #21b6d52b}
.first-contact-active #shell .label{color:#b9e8ec}.first-contact-active #shell .value{color:#f5c66d}
.first-contact-active #shell .orb:before{background:repeating-conic-gradient(from 4deg,#b0dce340 0deg .4deg,transparent .5deg 10deg),conic-gradient(#1c2c36,#8fa7af,#263b48,#647d86,#172733,#7f9aa5,#1c2c36);box-shadow:inset 0 0 0 1px #a2bcc6,inset 0 0 0 5px #13232e,inset 0 0 0 6px #7ddcea50,0 5px 16px #0008}
.first-contact-active #shell .orb:after{border-color:#63ddeb80;box-shadow:inset 0 0 12px #000}
.first-contact-active #shell .radar{border-color:#49d7e770;background-color:#010910;background-image:repeating-radial-gradient(circle,transparent 0 23%,#55d6ed36 24% 24.3%,transparent 24.5% 25%)}
.first-contact-active #shell .radar:after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(90deg,transparent calc(50% - .5px),#5ae3ef24 50%,transparent calc(50% + .5px)),linear-gradient(0deg,transparent calc(50% - .5px),#5ae3ef24 50%,transparent calc(50% + .5px))}
.first-contact-active #shell .north{color:#abf0f6}
/* Keep tutorial activation visually dominant over the material treatment. */
.first-contact-active #shell .ward-feature-active{outline:2px solid #e7c484;outline-offset:3px;border-color:#f2d39c;box-shadow:0 0 20px #e6b66166,inset 0 0 18px #e6b66128;filter:brightness(1.18)}
@media(prefers-reduced-motion:reduce){.ward-hardware:before,.ward-hardware:after{transition:none}}

/* Quieter gunmetal casing retains its existing footprint. */
.first-contact-active #shell{border-top-color:#414e56;border-color:#29353d;box-shadow:inset 0 0 0 1px #8da1aa66,inset 0 0 0 3px #111b22,inset 0 0 20px #0009,0 0 0 1px #657780,0 7px 20px #0007}
.first-contact-active #shell:before{border-color:#71889148}

/* Reference finish: materials and optics only; retain enclosure geometry. */
.first-contact-active #shell{
 border-color:transparent;
 background:linear-gradient(#38dce609 1px,transparent 1px) padding-box,
 linear-gradient(90deg,#38dce609 1px,transparent 1px) padding-box,
 radial-gradient(ellipse at 50% 48%,#07304080,#020b10 72%) padding-box,
 repeating-linear-gradient(132deg,#a8b4bb16 0 1px,transparent 1px 5px) border-box,
 linear-gradient(135deg,#151b20 0%,#70797c 2%,#2d3439 10%,#151b20 45%,#51595c 68%,#252b30 94%,#727b7d 100%) border-box;
 background-size:32px 32px,32px 32px,auto,auto,auto;
 box-shadow:inset 0 0 0 1px #bd9c62a6,inset 0 0 0 3px #050b10,inset 0 0 0 4px #64717970,inset 0 0 22px #000a,0 0 0 1px #d2b583a6,0 9px 28px #0009;
}
.first-contact-active #shell:before{border-color:#c5aa7866;box-shadow:inset 0 1px #f4dcac26,inset 0 -1px #000}
.first-contact-active #shell:after{background:linear-gradient(90deg,#c5a56c99,#10171c 2px,#6e797c 4px,#182026 6px) left center/7px 22% no-repeat,linear-gradient(270deg,#c5a56c99,#10171c 2px,#6e797c 4px,#182026 6px) right center/7px 22% no-repeat}
.ward-hardware:before,.ward-hardware:after{background:#ffdf71;box-shadow:0 0 0 1px #ffb92b,0 0 0 3px #11171b,0 0 0 4px #8b744d,0 0 10px #ffb02bb3}
.first-contact-active #shell .orb:before{
 background:repeating-conic-gradient(from 2deg,#e2edf51f 0deg .3deg,transparent .4deg 4deg),conic-gradient(from 25deg,#151d24,#a8b8be 12%,#35434c 23%,#101820 38%,#a5b5bd 54%,#34424b 64%,#131b23 78%,#82969f 92%,#151d24);
 box-shadow:inset 0 0 0 1px #c2d4d9,inset 0 0 0 3px #10212a,inset 0 0 0 4px #91afb8b3,inset 0 0 0 7px #0007,0 5px 18px #000a;
}
.first-contact-active #shell .orb:after{border-color:#55ecf2a6;box-shadow:inset 0 0 12px #000,0 0 0 1px #000b}
.first-contact-active #shell .radar{background:#010b12;border-color:#3ae9f1a6}
.first-contact-active #shell .radar:after{background:url('/conversation/scanner-graticule.svg') center/100% 100% no-repeat;z-index:2}
.first-contact-active #shell .orb canvas{filter:brightness(1.6) saturate(1.35);pointer-events:none}
.first-contact-active #shell .north{color:#c4fbff;text-shadow:0 0 7px #34d9e666}
.first-contact-active #shell .scan-dot{box-shadow:0 0 4px currentColor,0 0 12px #ef625bb3}
.first-contact-active #shell .creature-dot{box-shadow:0 0 4px #fff0b3,0 0 12px #ffc44caa}
@media(min-width:901px){
 #conversation-dock .contact-options button{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:clamp(24px,2.2vw,36px);letter-spacing:.015em;line-height:1.15;text-wrap:balance;color:#fffaf0}
}

/* The startup badge uses the player's metal plate, within the existing reticle. */
#activation .calibration h1{
 display:flex;align-items:center;justify-content:center;
 width:76%;height:25%;padding:0 3%;box-sizing:border-box;
 border-width:1px;border-style:solid;border-radius:0;
 font-family:Arial,Helvetica,sans-serif;font-weight:900;
 font-size:clamp(24px,9vw,46px);line-height:1;letter-spacing:0;
 color:#10212b;text-shadow:0 1px 0 #e2edf4;
}
@media(max-height:550px){#activation .calibration h1{font-size:clamp(20px,7svh,36px)}}

/* /entry-atmosphere.css?v=1 */
#entry-gate{isolation:isolate;background:radial-gradient(ellipse at 50% 42%,#14334488,transparent 64%),linear-gradient(165deg,#030910,#091924 55%,#040910);overflow-x:hidden}
#entry-gate .entry-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;contain:strict;background:radial-gradient(ellipse at 13% 76%,#2a55604a,transparent 40%),radial-gradient(ellipse at 90% 36%,#82613b22,transparent 44%)}
.entry-atmosphere i{position:absolute;display:block;width:130%;height:110%;left:-40%;top:0;background:url('/assets/entry-smoke.svg') center/100% 100% no-repeat;opacity:.7;animation:smoke-drift 32s ease-in-out infinite alternate;will-change:transform}
.entry-atmosphere i:nth-child(2){left:10%;top:-20%;opacity:.45;transform:rotate(170deg);animation:smoke-return 41s ease-in-out infinite alternate;animation-delay:-16s}
.entry-atmosphere i:nth-child(3){left:-15%;top:40%;height:80%;opacity:.6;animation:smoke-low 28s ease-in-out infinite alternate;animation-delay:-12s}
#entry-gate .entry-content{position:relative;max-width:860px;padding:25px 0;z-index:1}
#entry-gate .entry-brand{width:340px;max-width:78vw;margin-bottom:58px;filter:drop-shadow(0 3px 16px #0005)}
#entry-gate #entry-title{font-size:clamp(60px,7vw,98px);line-height:1.02;letter-spacing:.015em;color:#f4f1e7;text-shadow:0 5px 35px #0008;margin-bottom:30px}
#entry-gate #entry-title::after{content:'';display:block;width:54px;height:1px;background:#ebc471;margin:30px auto 0;box-shadow:0 0 18px #ebc47170}
#entry-gate .entry-copy{font-size:24px;line-height:1.4;color:#d5e1e7;margin-bottom:32px;letter-spacing:.01em}
#entry-gate .entry-modes{max-width:550px;gap:22px}
#entry-gate .entry-modes :is(button,#enter-experience){position:relative;min-height:88px;background:linear-gradient(140deg,#253b4688,#091722dd);border:1px solid #d5b06d99;border-radius:7px;box-shadow:inset 0 1px #f1dcaf22,0 12px 32px #0004;color:#f3ead8;font-size:21px;letter-spacing:.15em;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}
#entry-gate .entry-modes :is(button,#enter-experience):hover{transform:translateY(-3px);background:linear-gradient(135deg,#344956cc,#142633);border-color:#f2ce86;box-shadow:inset 0 1px #f5e5ba33,0 12px 40px #ebc47114}
#entry-gate .entry-modes :is(button,#enter-experience):active{transform:translateY(0)}
#entry-gate .entry-modes svg{width:28px;height:28px}
@keyframes smoke-drift{from{transform:translate(-8%,12%) rotate(-8deg) scale(1)}to{transform:translate(26%,-7%) rotate(8deg) scale(1.2)}}
@keyframes smoke-return{from{transform:translate(8%,-5%) rotate(170deg) scale(1.15)}to{transform:translate(-26%,17%) rotate(186deg) scale(.95)}}
@keyframes smoke-low{from{transform:translate(-20%,10%) scale(1.1)}to{transform:translate(20%,-16%) scale(1.4)}}
@media(max-width:600px){#entry-gate{padding:26px 24px}#entry-gate .entry-content{padding:15px 0}#entry-gate .entry-brand{width:280px;margin-bottom:48px}#entry-gate #entry-title{font-size:clamp(48px,12vw,68px);margin-bottom:26px}#entry-gate #entry-title::after{margin-top:27px}#entry-gate .entry-copy{font-size:21px;margin-bottom:28px}#entry-gate .entry-modes{max-width:340px;gap:16px}#entry-gate .entry-modes :is(button,#enter-experience){min-height:76px;font-size:20px}.entry-atmosphere i{width:190%;left:-75%}}
@media(max-height:600px) and (min-width:601px){#entry-gate .entry-content{padding:0}#entry-gate .entry-brand{width:240px;margin-bottom:22px}#entry-gate #entry-title{font-size:55px;margin-bottom:14px}#entry-gate #entry-title::after{margin-top:15px}#entry-gate .entry-copy{font-size:20px;margin-bottom:20px}#entry-gate .entry-modes :is(button,#enter-experience){min-height:64px}}
@media(prefers-reduced-motion:reduce){.entry-atmosphere i{animation:none;will-change:auto}#entry-gate .entry-modes :is(button,#enter-experience){transition:none}}