.voyage-page { background: radial-gradient(circle at 50% 4%,rgba(47,137,145,.32),transparent 34%),linear-gradient(180deg,#102b3b 0%,#0b1427 72%); }
.voyage-hero { padding: 48px 20px 25px; text-align: center; }
.voyage-hero h1 { margin: 0; font-size: clamp(3.5rem,8vw,6rem); line-height: .86; }
.voyage-hero h1 span { color: var(--gold); }
.voyage-hero > p:last-child { max-width: 630px; margin: 20px auto 0; color: var(--muted); line-height: 1.65; }
.voyage-shell { width: min(820px,calc(100% - 24px)); margin: 8px auto 75px; padding: 14px; position: relative; border: 1px solid rgba(191,235,225,.25); border-radius: 30px; background: rgba(10,29,43,.92); box-shadow: 0 30px 85px rgba(0,0,0,.48); }
.voyage-hud { min-height: 68px; padding: 5px 16px 13px; display: grid; grid-template-columns: 110px 1fr 110px; align-items: center; gap: 20px; }
.voyage-stat { display: grid; text-align: center; }
.voyage-stat > span { color: #a9c7cb; font-size: .65rem; font-weight: 900; letter-spacing: .13em; }
.voyage-stat strong { color: #ffdc8b; font: 800 1.35rem "Baloo 2",sans-serif; }
.route-dots { display: flex; align-items: center; justify-content: center; gap: 12px; }
.route-dots::before,.route-dots::after { content: ""; width: min(70px,10vw); height: 2px; background: rgba(173,222,217,.18); }
.route-dots span { width: 13px; height: 13px; border: 2px solid rgba(186,218,220,.42); border-radius: 50%; background: #142d3f; }
.route-dots span.current { border-color: #ffe09a; background: var(--gold); box-shadow: 0 0 16px rgba(255,216,133,.65); }
.route-dots span.done { border-color: #69d6c4; background: #69d6c4; }
.mission-bar { margin-bottom: 12px; padding: 12px 12px 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid rgba(255,224,154,.22); border-radius: 20px; background: linear-gradient(130deg,rgba(29,72,76,.78),rgba(30,34,63,.88)); }
.mission-bar > div { display: flex; align-items: center; gap: 13px; }
.mission-icon { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,224,154,.4); border-radius: 50%; color: #ffe09a; background: rgba(7,23,35,.48); font-size: 27px; }
.mission-bar p { margin: 0; display: grid; }
.mission-bar p strong { font: 800 1.05rem "Baloo 2",sans-serif; }
.mission-bar p small { color: #afc5c8; }
.play-voyage { min-width: 112px; min-height: 54px; padding: 9px 18px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #ffe3a0; border-radius: 16px; color: #1e2230; background: linear-gradient(135deg,#ffe8a5,#eabf64); box-shadow: 0 6px 0 #8e6735,0 13px 28px rgba(0,0,0,.25); cursor: pointer; }
.play-voyage span { font-size: 1.2rem; }
.play-voyage strong { font-size: .85rem; letter-spacing: .08em; }
.play-voyage:hover { filter: brightness(1.06); }
.play-voyage:active { transform: translateY(4px); box-shadow: 0 2px 0 #8e6735; }
.play-voyage:disabled { opacity: .48; filter: grayscale(.35); cursor: default; transform: none; }
.map-stage { width: min(680px,100%); aspect-ratio: 720/900; margin: auto; position: relative; overflow: hidden; border: 1px solid rgba(201,238,230,.34); border-radius: 24px; background: #185065; box-shadow: inset 0 0 38px rgba(3,12,23,.45); }
#gameCanvas { width: 100%; height: 100%; display: block; }
.gate-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.gate-switch { width: clamp(72px,13vw,92px); min-height: 68px; padding: 7px 6px 6px; position: absolute; display: grid; place-items: center; border: 3px solid #ff9a88; border-radius: 18px; color: #fff6dd; background: linear-gradient(145deg,rgba(113,48,50,.96),rgba(58,34,42,.97)); box-shadow: 0 7px 0 #3b2428,0 12px 24px rgba(0,0,0,.35); cursor: pointer; pointer-events: auto; transform: translate(-50%,-50%); transition: border-color .22s,background .22s,box-shadow .22s; }
.gate-switch::after { content:""; width:clamp(28px,7vw,55px); height:3px; position:absolute; top:50%; opacity:.72; background:linear-gradient(90deg,#ffad98,rgba(255,173,152,.12)); box-shadow:0 0 8px rgba(255,154,136,.32); transform:translateY(-50%); pointer-events:none; }
.gate-switch[data-side="left"]::after { left:calc(100% + 3px); }
.gate-switch[data-side="right"]::after { right:calc(100% + 3px); transform:translateY(-50%) rotate(180deg); }
.gate-switch .wheel { font-size: 2rem; line-height: 1; transition: transform .38s ease-out; }
.gate-switch .label { font-size: .64rem; font-weight: 900; letter-spacing: .04em; }
.gate-switch.open { border-color: #7be3ca; background: linear-gradient(145deg,rgba(36,110,94,.97),rgba(24,66,67,.97)); box-shadow: 0 7px 0 #22494a,0 0 22px rgba(104,221,193,.32); }
.gate-switch.open::after { background:linear-gradient(90deg,#7be3ca,rgba(123,227,202,.12)); box-shadow:0 0 9px rgba(104,221,193,.35); }
.gate-switch.open .wheel { transform: rotate(135deg); }
.gate-switch:disabled { cursor: default; }
.gate-switch:not(:disabled):hover { filter: brightness(1.1); }
.gate-switch:not(:disabled):active { margin-top: 4px; box-shadow: 0 3px 0 #3b2428; }
.map-vignette { position: absolute; inset: 0; z-index: 5; pointer-events: none; box-shadow: inset 0 0 38px rgba(4,11,23,.44); }
.map-status { max-width: calc(100% - 24px); min-height: 35px; margin: 0; padding: 7px 16px; position: absolute; left: 50%; bottom: 12px; z-index: 6; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; color: #fff4d5; background: rgba(4,18,30,.76); backdrop-filter: blur(7px); text-align: center; font-size: .8rem; font-weight: 900; transform: translateX(-50%); }
.map-actions { padding: 14px 9px 3px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.reset-gates { min-height: 42px; padding: 8px 14px; flex: 0 0 auto; border: 1px solid rgba(190,223,222,.25); border-radius: 13px; color: #d4e5e5; background: rgba(31,58,72,.62); font-weight: 900; cursor: pointer; }
.reset-gates:disabled { opacity: .45; cursor: default; }
.map-actions p { max-width: 430px; margin: 0; color: #93adb1; font-size: .76rem; line-height: 1.45; }
.voyage-overlay { position: absolute; inset: 0; z-index: 10; padding: 18px; display: grid; place-items: center; border-radius: inherit; background: rgba(4,13,25,.72); backdrop-filter: blur(9px); }
.voyage-overlay.hidden { display: none; }
.voyage-overlay-card { width: min(510px,95%); padding: 24px clamp(22px,5vw,44px) 39px; overflow: hidden; border: 1px solid rgba(255,216,137,.38); border-radius: 28px; text-align: center; background: linear-gradient(155deg,rgba(23,60,67,.99),rgba(29,25,53,.99)); box-shadow: 0 32px 85px rgba(0,0,0,.58); }
.voyage-overlay-card img { width: min(190px,62%); height: 150px; margin: -6px auto 5px; display: block; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(0,0,0,.34)); animation: boat-hover 2.1s ease-in-out infinite alternate; }
@keyframes boat-hover { to { transform: translateY(-6px) rotate(1.5deg); } }
.voyage-overlay-card h2 { margin: 0 0 10px; font-size: clamp(2rem,5vw,2.7rem); line-height: 1.04; }
.voyage-overlay-card > p:not(.eyebrow) { margin: 0 0 24px; color: #bfd1d2; line-height: 1.56; }
.overlay-button { width: 100%; min-height: 57px; display: flex; align-items: center; justify-content: center; gap: 14px; border: 1px solid #ffe39d; border-radius: 16px; color: #20202c; background: linear-gradient(135deg,#ffe8a5,#e8bb60); box-shadow: 0 7px 0 #936c36; font-weight: 900; cursor: pointer; }
.overlay-button:active { transform: translateY(4px); box-shadow: 0 3px 0 #936c36; }
@media(max-width:620px){.voyage-hero{padding-top:40px}.voyage-shell{padding:7px;border-radius:22px}.voyage-hud{grid-template-columns:74px 1fr 74px;gap:8px;padding-inline:5px}.route-dots{gap:6px}.route-dots::before,.route-dots::after{display:none}.mission-bar{padding:10px;gap:8px}.mission-icon{display:none}.mission-bar p small{font-size:.67rem}.play-voyage{min-width:92px;padding-inline:12px}.map-stage{border-radius:18px}.gate-switch{min-height:57px;border-radius:14px}.gate-switch .wheel{font-size:1.6rem}.map-actions{align-items:flex-start;flex-direction:column}.map-actions p{padding-inline:3px}.voyage-overlay{padding:7px}.voyage-overlay-card{padding:20px 18px 31px}.voyage-overlay-card img{height:125px}.map-status{bottom:8px}}
@media(prefers-reduced-motion:reduce){.voyage-overlay-card img{animation:none}}