/* The visitor's arrival and in-world interface. */
[hidden] { display: none !important; }
:root { --jade: #84bcae; --cream: #f5ead7; --gold: #d9b171; }
button, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--jade); outline-offset: 4px; }
#museumApp { display:flex; flex-direction:column; width:100%; height:100dvh; min-height:0; }
#museumApp > main { min-height:0; }
#threeCanvas { touch-action:none; }
.arrival { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; padding:36px 6vw 26px; overflow:auto; background:linear-gradient(90deg,rgba(9,18,19,.96),rgba(11,20,20,.83) 42%,rgba(9,17,18,.52)); }
.arrival::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 78% 60%,transparent 10%,rgba(4,12,13,.35) 80%); }
.arrival > * { position:relative; }
.arrival-brand { display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.22em; }
.arrival-monogram { display:grid; place-items:center; width:44px; height:44px; border:1px solid #8f7955; color:var(--gold); font-family:Georgia,serif; font-size:18px; letter-spacing:0; }
.arrival-brand small { display:block; margin-top:6px; font-size:9px; color:#8ba39d; letter-spacing:.2em; }
.arrival-grid { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:9vw; flex:1; margin:38px 0; max-width:1260px; width:100%; align-self:center; }
.arrival-eyebrow { color:var(--jade); font-size:10px; letter-spacing:.2em; text-transform:uppercase; display:flex; align-items:center; gap:12px; }
.arrival-eyebrow::before { content:''; width:34px; height:1px; background:var(--jade); }
.arrival-title { margin:22px 0; font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(46px,5.5vw,82px); font-weight:500; line-height:1.03; letter-spacing:-.025em; color:var(--cream); }
.arrival-title em { color:#cfa96c; font-weight:500; }
.arrival-copy { max-width:430px; font-size:13px; color:#b0bcb2; line-height:1.9; }
.arrival-facts { display:flex; gap:28px; margin-top:34px; padding-top:24px; border-top:1px solid #ffffff20; }
.arrival-facts strong { display:block; font-family:'Cormorant Garamond',serif; font-size:32px; color:var(--cream); font-weight:500; }
.arrival-facts span { display:block; margin-top:3px; font-size:9px; text-transform:uppercase; letter-spacing:.13em; color:#91a39b; }
.visitor-card { padding:30px; background:linear-gradient(135deg,rgba(34,48,44,.96),rgba(15,28,27,.98)); border:1px solid #8c9a793c; box-shadow:0 24px 100px #0007; border-radius:3px; max-width:430px; }
.visitor-card-top { display:flex; align-items:center; justify-content:space-between; color:#adbea9; font-size:9px; letter-spacing:.15em; }
.visitor-symbol { width:58px; height:58px; display:grid; place-items:center; margin:28px 0 20px; background:#94c2b012; border:1px solid #9fb99c30; color:var(--jade); border-radius:50%; }
.visitor-card h2 { font-family:'Cormorant Garamond',Georgia,serif; font-size:34px; font-weight:500; margin:0 0 8px; color:var(--cream); }
.visitor-card p { color:#9bafa4; font-size:12px; line-height:1.8; margin-bottom:25px; }
.name-label { display:flex; justify-content:space-between; font-size:11px; color:#d4ddce; margin-bottom:10px; }
#nameCounter { color:#82958c; font-size:10px; }
#visitorName { width:100%; height:51px; border:1px solid #6f8c7a70; border-radius:2px; background:#0b1817a6; color:var(--cream); padding:0 15px; font:14px 'Be Vietnam Pro',sans-serif; user-select:text; }
#visitorName::placeholder { color:#738b7d; }
.name-error { min-height:19px; margin-top:8px; font-size:11px; color:#f5b5a0; }
.enter-world { width:100%; display:flex; justify-content:space-between; align-items:center; padding:16px 18px; margin-top:6px; background:#d5b078; color:#16231f; border:1px solid #ebc891; font:600 12px 'Be Vietnam Pro',sans-serif; cursor:pointer; transition:background .2s,transform .2s; }
.enter-world:hover { background:#ecd0a0; transform:translateY(-1px); }
.enter-world:disabled { opacity:.5; cursor:wait; }
.name-note { text-align:center; color:#829589; font-size:9px; margin-top:14px; line-height:1.7; }
.arrival-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; color:#91a399; font-size:9px; letter-spacing:.08em; border-top:1px solid #ffffff14; padding-top:18px; }
.arrival-friends { display:flex; align-items:center; gap:7px; }
.arrival-friends b { display:grid; place-items:center; height:23px; width:23px; border-radius:50%; border:1px solid #a1b69a55; background:#263b33; color:#d0c7a4; font-size:8px; font-weight:500; margin-left:-5px; }
.arrival-friends span { margin-left:8px; }
.player-bar { position:absolute; left:16px; top:16px; display:flex; align-items:center; gap:12px; z-index:12; padding:9px 12px; border:1px solid #aab99335; background:#10201ee8; box-shadow:0 7px 22px #0003; border-radius:3px; }
.player-dot { width:8px; height:8px; background:#9fc7af; border-radius:50%; box-shadow:0 0 12px #7cbf98a0; }
.player-bar small { display:block; color:#9ab2a4; font-size:8px; letter-spacing:.14em; margin-bottom:3px; }
.player-bar strong { display:block; max-width:150px; overflow:hidden; text-overflow:ellipsis; font-size:12px; font-weight:500; color:#f2e6cf; }
.player-bar button { background:none; border:0; border-left:1px solid #90a68e40; padding-left:12px; color:#b4cbb7; font:10px 'Be Vietnam Pro',sans-serif; cursor:pointer; }
.experience-tools { display:flex; align-items:center; gap:6px; }
.experience-tools button { padding:7px 9px; border:1px solid #72837060; background:#20302a; color:#d1dfcd; font:10px 'Be Vietnam Pro',sans-serif; cursor:pointer; }
#companionButton span { color:#90c5ac; padding-right:4px; }
.npc-prompt { position:absolute; left:50%; bottom:115px; transform:translateX(-50%); z-index:15; display:flex; align-items:center; gap:10px; border:1px solid #a9c3a370; border-radius:4px; background:#11231ff0; padding:10px 16px; cursor:pointer; color:#e5eddd; box-shadow:0 8px 28px #0005; white-space:nowrap; font:11px 'Be Vietnam Pro',sans-serif; }
.npc-prompt kbd { border:1px solid #a2b39470; background:#b5c4a91a; padding:4px 7px; font:11px monospace; color:#c8d8bc; border-radius:3px; }
.museum-dialog { border:1px solid #76896a70; background:#15231f; color:var(--cream); padding:0; width:min(560px,calc(100% - 30px)); max-height:85dvh; border-radius:4px; box-shadow:0 25px 100px #0009; }
.museum-dialog::backdrop { background:#050c0bd6; backdrop-filter:blur(6px); }
.dialog-head { padding:22px 24px 18px; display:flex; justify-content:space-between; align-items:start; border-bottom:1px solid #a5b18825; }
.dialog-eyebrow { color:#95b9a0; font-size:9px; letter-spacing:.15em; text-transform:uppercase; }
.dialog-head h2 { font-family:'Cormorant Garamond',Georgia,serif; font-size:31px; font-weight:500; margin:6px 0 0; }
.dialog-close { border:1px solid #9bad8e35; background:none; color:#b4c5ad; width:30px; height:30px; font-size:19px; cursor:pointer; }
.companion-list { padding:8px 24px 24px; }
.companion-row { display:flex; align-items:center; gap:13px; padding:17px 0; border-bottom:1px solid #8c9f7c26; }
.companion-avatar { display:grid; place-items:center; width:42px; height:42px; border:1px solid #a2af8250; background:linear-gradient(135deg,#6a735533,#a4936e11); color:#dfcb9a; font-family:'Cormorant Garamond',serif; font-size:23px; }
.companion-row strong { display:block; font-size:13px; font-weight:500; }
.companion-row small { display:block; margin-top:5px; color:#a2b29d; font-size:10px; }
.companion-row button { margin-left:auto; border:1px solid #879b704d; background:#a0ba8012; padding:8px 12px; color:#cfddbd; font:11px 'Be Vietnam Pro',sans-serif; cursor:pointer; }
.dialog-body { padding:24px; }
.dialog-body p { font-size:14px; line-height:1.95; color:#d0d8c8; margin:0 0 22px; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:10px; }
.dialog-actions button { padding:12px 16px; border:1px solid #84927355; background:#26372b; color:#d7e2c9; font:11px 'Be Vietnam Pro',sans-serif; cursor:pointer; }
.dialog-actions .dialog-primary { background:#d4b37c; color:#1e2c22; border-color:#e6c897; }
.experience-toast { position:fixed; left:50%; top:24px; transform:translateX(-50%); padding:12px 20px; border:1px solid #9bad8c60; background:#1c3029; color:#e0e7ce; z-index:110; font-size:12px; max-width:90vw; text-align:center; box-shadow:0 8px 25px #0005; }
.scene-vignette { position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 100px #050b0b5c; }
body[data-entered='false'] #museumApp header, body[data-entered='false'] #museumApp > div, body[data-entered='false'] #view3DContainer > div { visibility:hidden; }
body[data-entered='false'] #museumApp header, body[data-entered='false'] #museumApp > div { height:0; padding:0; border:0; overflow:hidden; }
#storyPlaque { top:84px; width:300px; }
#storyPlaque .glass-panel { background:#15201be3; border-color:#a69a6a44; backdrop-filter:blur(12px); }
#storyPlaque h2 { font-size:25px; }
#storyPlaque #hudStoryShort { display:none; }
#storyPlaque > div:last-child { display:none; }
@media(max-width:850px) { .arrival { padding:24px; } .arrival-grid { gap:35px; } .arrival-title { font-size:54px; } .visitor-card { padding:24px; } .arrival-facts { gap:22px; } #storyPlaque { width:250px; } #storyPlaque .plaque-corners { padding:12px; } .experience-tools button { padding:7px; } }
@media(max-width:640px) { .arrival { padding:22px; background:linear-gradient(160deg,#0c1c1cf2,#12241edb); } .arrival-grid { grid-template-columns:1fr; gap:20px; margin:26px 0; } .arrival-title { font-size:44px; margin:12px 0; } .arrival-copy { font-size:11px; margin:0; } .arrival-facts { display:none; } .visitor-card { max-width:none; padding:20px; } .visitor-symbol { display:none; } .visitor-card h2 { font-size:28px; margin-top:16px; } .visitor-card p { margin-bottom:18px; font-size:11px; } .arrival-footer { font-size:8px; } .arrival-footer > span { display:none; } .arrival-friends span { letter-spacing:0; } #storyPlaque { top:auto; bottom:110px; left:12px; width:208px; } #storyPlaque #hudStoryCategory, #hudIndexBadge, #hudApproachBtn, #hudFavToggleBtn { display:none; } #storyPlaque h2 { font-size:21px; } #storyPlaque #hudRoomTag { font-size:8px; } #storyPlaque #hudOpenDetailBtn { font-size:9px; } #storyPlaque .plaque-corners { padding:9px; } .player-bar { left:12px; top:12px; gap:8px; padding:8px 10px; } .player-bar strong { max-width:112px; font-size:11px; } .npc-prompt { bottom:auto; top:74px; padding:8px 10px; font-size:10px; max-width:95%; } .npc-prompt kbd { display:none; } .museum-dialog { max-height:88dvh; } .dialog-head,.dialog-body { padding:19px; } .companion-list { padding:4px 19px 19px; } .experience-toast { top:12px; font-size:11px; } }
@media(max-width:640px) { #walkPad { bottom:120px; right:12px; } }
@media(max-height:760px) and (min-width:641px) { .arrival { padding-top:24px; padding-bottom:18px; } .arrival-grid { margin:22px 0; } .visitor-card { padding:24px; } .visitor-symbol { margin-top:20px; margin-bottom:14px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }