/* Uses the existing locally hosted pixel face and the original dialogue frame. */
#voyage-ui { --violet:#c5b8e8; --ink:#090a14; --muted:#b6aec7; font-family:"Faith Pixel",monospace; }
.voyage-dialog { width:min(660px,calc(100vw - 30px)); max-height:calc(100dvh - 40px); padding:28px 30px; color:#f4f1ff; border:1px solid #efecffdc; border-radius:12px; background:linear-gradient(180deg,#222234f5,#070811fa); box-shadow:inset 0 0 0 6px #080916,inset 0 0 0 7px #ffffff25,0 0 24px #a699e238,0 26px 70px #000b; font:16px/1.7 "Faith Pixel",monospace; text-align:left; overscroll-behavior:contain; }
.voyage-dialog::backdrop { background:#03041088; backdrop-filter:blur(4px); }
.voyage-dialog header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.voyage-dialog header>button { font:24px/1 monospace; padding:7px 10px; margin:-8px -8px 0 0; }
.voyage-dialog h2 { font:24px/1.35 "Faith Pixel",monospace; margin:0 0 20px; font-weight:400; letter-spacing:.02em; }
.voyage-dialog h3 { font:13px/1.6 "Faith Pixel",monospace; margin:15px 0 9px; font-weight:400; }
.voyage-dialog .voyage-kicker { font:10px/1.7 "Faith Pixel",monospace; color:var(--muted); margin:0 0 10px; letter-spacing:1px; }
.voyage-copy { font:16px/1.75 "Faith Pixel",monospace; margin:8px 0 20px; white-space:pre-line; }
.voyage-small { font:11px/1.9 "Faith Pixel",monospace; color:var(--muted); margin:10px 0 14px; }
.voyage-dialog button { font-family:"Faith Pixel",monospace; -webkit-tap-highlight-color:transparent; }
.voyage-dialog button:focus-visible { outline:2px solid #e7d8ff; outline-offset:3px; }
.voyage-dialog button:disabled { cursor:not-allowed; }
.voyage-primary,.voyage-secondary { display:block; width:100%; min-height:47px; padding:13px 16px; font-size:14px; line-height:1.5; border:1px solid #d9c9fc; color:#f2eaff; background:linear-gradient(180deg,#645976,#343044); box-shadow:inset 0 0 0 3px #ffffff0c; margin:12px 0; }
.voyage-primary:hover:not(:disabled) { background:linear-gradient(180deg,#7a6a94,#483d59); }
.voyage-primary:disabled { color:#7b7983; background:#303139; border-color:#64636c; box-shadow:none; }
.voyage-secondary { background:transparent; border-color:#ffffff4d; }
.voyage-text-button { display:block; min-height:44px; margin:10px auto 0; padding:10px 0; font-size:10px; color:var(--muted); text-decoration:underline; text-underline-offset:4px; }
.voyage-quest { display:grid; grid-template-columns:1fr auto; column-gap:14px; padding:10px 0 16px; border-bottom:1px solid #ffffff26; }
.voyage-quest h3 { margin:3px 0; }
.voyage-quest p { grid-row:2; margin:5px 0 0; }
.voyage-quest button { grid-column:2; grid-row:1/3; align-self:center; padding:12px; font-size:10px; min-height:44px; border:1px solid #bcafce88; }
.voyage-quest button[aria-pressed=true] { background:#d6c6ff22; color:#e4d8ff; }
.voyage-quest button:disabled { border:0; color:#9ab7ad; font-size:9px; }
.voyage-craft-layout { display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.voyage-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.voyage-slot,.voyage-blueprint span { aspect-ratio:1; display:grid; place-items:center; min-height:40px; border:1px solid #857c96; box-shadow:inset 2px 2px 0 #0008,inset -2px -2px 0 #ffffff17; background:#060913; color:#595468; font:23px/1 "Faith Pixel",monospace; padding:0; }
.voyage-slot[data-filled=true] { color:var(--part); background:#393044; border-color:#c6b8da; }
.voyage-slot:hover { background:#302a3a; }
.voyage-blueprint { gap:3px; max-width:168px; }
.voyage-blueprint span { color:#b9abc9; font-size:17px; min-height:30px; border-color:#766a825c; background:#22202d; box-shadow:none; }
#voyage-inventory { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.voyage-part { min-height:44px; padding:10px 8px; font-size:10px; line-height:1.7; text-align:left; border:1px solid #8a809d; color:var(--part); }
.voyage-part:disabled { opacity:.4; border-color:#514b5b; }
.voyage-part[aria-pressed=true] { outline:2px solid #e0d3f5; background:#5a466455; }
#voyage-craft-status { margin-top:22px; font-size:12px; min-height:2em; }
#voyage-tracker { position:fixed; z-index:9; left:max(18px,env(safe-area-inset-left)); top:max(28px,env(safe-area-inset-top)); display:flex; gap:10px; align-items:center; max-width:calc(50vw - 72px); color:#e2d8ef; text-shadow:0 2px 6px #000; text-align:left; background:#080c144d; padding:8px 10px; border:1px solid #b8a6d329; }
#voyage-tracker>span:last-child { display:flex; flex-direction:column; gap:7px; font:9px/1.65 "Faith Pixel",monospace; }
#voyage-count { color:#e7dcf8; }
#voyage-objective { color:#bdb4ca; font-size:8px; }
#voyage-arrow { display:inline-block; font:25px/1 monospace; }
#voyage-fade { position:fixed; inset:0; background:#020208; pointer-events:none; opacity:0; z-index:13; transition:opacity .28s linear; }
#voyage-caption { position:fixed; z-index:14; bottom:max(7vh,30px); left:20px; right:20px; text-align:center; pointer-events:none; font:12px/1.8 "Faith Pixel",monospace; letter-spacing:1px; text-shadow:0 3px 12px #000; color:#e5ddee; }
#voyage-caption:empty { display:none; }
#voyage-continued { position:fixed; inset:0; z-index:15; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:25px; pointer-events:none; color:#e2daef; }
#voyage-continued h1 { font:clamp(20px,4vw,40px)/1.55 "Faith Pixel",monospace; letter-spacing:3px; font-weight:400; }
body[data-voyage]:not([data-voyage=idle]) #world-help,body[data-voyage]:not([data-voyage=idle]) #world-toggle { visibility:hidden; pointer-events:none; }
#voyage-flight { position:fixed; inset:0; z-index:12; touch-action:none; cursor:crosshair; outline:none; user-select:none; }
.voyage-flight-top { position:absolute; top:max(28px,env(safe-area-inset-top)); left:28px; right:28px; display:flex; justify-content:space-between; pointer-events:none; font:11px/1.8 "Faith Pixel",monospace; color:#d6cce8; text-shadow:0 2px 8px #000; }
.voyage-flight-top strong { display:block; font:30px/1.5 "Faith Pixel",monospace; color:#efecff; }
#voyage-progress { position:absolute; left:28px; top:max(108px,calc(env(safe-area-inset-top) + 80px)); width:calc(100% - 56px); height:3px; border:0; appearance:none; background:#ded4ff1f; color:#af9ac8; }
#voyage-progress::-webkit-progress-bar { background:#ded4ff1f; }
#voyage-progress::-webkit-progress-value { background:#af9ac8; }
#voyage-progress::-moz-progress-bar { background:#af9ac8; }
.voyage-flight-bottom { position:absolute; left:25px; right:25px; bottom:max(24px,env(safe-area-inset-bottom)); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; font:10px/1.7 "Faith Pixel",monospace; color:#dcd3e9; }
.voyage-flight-bottom button { font:10px/1.7 "Faith Pixel",monospace; min-height:44px; padding:10px; color:#e3d9ee; border:1px solid #9e91ad55; background:#07081199; margin-left:8px; }
.voyage-tutorial { text-align:center; width:min(530px,calc(100vw - 30px)); }
.voyage-phone-demo { height:150px; perspective:500px; display:grid; place-items:center; }
.voyage-phone { width:69px; height:117px; border:2px solid #c9c0e8aa; border-radius:12px; background:linear-gradient(140deg,#beb5dc1c,#beb5dc03); box-shadow:inset 0 0 0 5px #beb5dc0a,0 0 30px #ae8fee15; color:#c9c0e8aa; display:flex; flex-direction:column; justify-content:space-around; align-items:center; font:21px/1 monospace; animation:voyage-tilt 5s ease-in-out infinite; }
.voyage-tutorial.is-desktop .voyage-phone-demo { display:none; }
@keyframes voyage-tilt { 0%,100% {transform:rotateZ(0) rotateX(0)} 20% {transform:rotateZ(-20deg)} 40% {transform:rotateZ(20deg)} 60% {transform:rotateX(-30deg)} 80% {transform:rotateX(30deg)} }
.voyage-short { width:min(620px,calc(100vw - 30px)); }
#voyage-code-wrap label { display:block; margin:22px 0 9px; font:11px/1.7 "Faith Pixel",monospace; color:#ccc0e0; }
#voyage-code { width:100%; color:#f1e9ff; background:#05060c; border:1px solid #ac9bc4; padding:17px 12px; font:clamp(15px,4vw,24px)/1.3 "Faith Pixel",monospace; text-align:center; letter-spacing:1px; border-radius:0; }
#voyage-reward-copy { min-height:7.4em; }
#voyage-shield.is-hit { animation:voyage-hit .5s ease-out; }
#world-message .world-message__prompt { font-size:10px; letter-spacing:1px; }
#world-message-surface { max-height:76dvh; overflow:auto; padding-bottom:42px; }
@keyframes voyage-hit { from {color:#ffada9;text-shadow:0 0 25px #ff746f} to {color:#d6cce8} }
@media(max-width:600px) {
 .voyage-dialog { padding:23px 22px; }
 .voyage-dialog h2 { font-size:21px; }
 .voyage-copy { font-size:14px; line-height:1.8; }
 .voyage-craft-layout { gap:18px; }
 .voyage-small { font-size:10px; }
 .voyage-part { font-size:9px; }
 .voyage-quest { column-gap:8px; }
 .voyage-quest button { padding:8px; font-size:8px; }
 #voyage-tracker { top:max(99px,calc(env(safe-area-inset-top) + 80px)); left:12px; max-width:78vw; padding:6px 8px; }
 #voyage-tracker>span:last-child { gap:4px; }
 .voyage-flight-bottom { left:14px; right:14px; font-size:9px; }
 .voyage-flight-top { left:20px; right:20px; }
 #voyage-caption { font-size:10px; }
}
@media(max-height:550px) { .voyage-dialog { max-height:calc(100dvh - 20px); margin:10px auto; }.voyage-phone-demo {height:95px}.voyage-phone {height:80px;width:48px}.voyage-tutorial .voyage-copy {margin-bottom:8px} }
@media(prefers-reduced-motion:reduce) { .voyage-phone,#voyage-shield.is-hit {animation:none} }