:root {
  color-scheme: dark;
  --ink: #ecede6;
  --muted: #abb0ad;
  --brass: #c7a864;
  --brass-soft: rgba(199, 168, 100, 0.32);
  --ocean: #07131a;
  --glass: rgba(5, 14, 19, 0.78);
  --line: rgba(227, 220, 193, 0.22);
  --serif: 'Baskerville', 'Iowan Old Style', 'Times New Roman', serif;
  --jp: 'YuMincho', 'Hiragino Mincho ProN', 'Noto Serif CJK JP', serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ocean); }
body { color: var(--ink); font-family: var(--jp); user-select: none; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 1px solid var(--brass); outline-offset: 4px; }
.is-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

#experience, #scene { position: fixed; inset: 0; width: 100%; height: 100%; }
#scene { display: block; background: linear-gradient(#c86d50, #162b37 48%, #071017); }
#experience::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(circle at 50% 46%, transparent 47%, rgba(0, 7, 10, 0.32) 100%);
  mix-blend-mode: multiply;
}
.eyebrow { margin: 0; font: 600 10px/1.4 var(--serif); letter-spacing: .34em; color: var(--brass); }
kbd { padding: 2px 6px; border: 1px solid rgba(255,255,255,.3); border-radius: 2px; background: rgba(255,255,255,.07); font: 600 9px/1 var(--serif); letter-spacing: .08em; box-shadow: 0 1px 0 rgba(255,255,255,.16) inset; }

.boot {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #050b0e; transition: opacity 1.2s ease, visibility 1.2s;
}
.boot::before { content: ''; position: absolute; inset: 0; opacity: .17; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 4px); }
.boot__rule { width: 1px; height: 72px; margin-bottom: 28px; background: linear-gradient(transparent, var(--brass)); }
.boot h1 { margin: 13px 0 0; font: 600 clamp(50px,9vw,112px)/.75 var(--serif); letter-spacing: .14em; color: #f0eee5; text-shadow: 0 0 40px rgba(210,181,112,.16); }
.boot h1 span { font-size: .2em; vertical-align: top; margin-right: .5em; letter-spacing: .2em; color: var(--brass); }
.boot__subtitle { margin: 24px 0 55px; font: 400 13px/1 var(--serif); letter-spacing: .62em; color: #888f8e; }
.boot__status { display: flex; width: min(420px,72vw); justify-content: space-between; font: 10px/1.3 var(--jp); color: #aab1af; letter-spacing: .13em; }
.boot__track { width: min(420px,72vw); height: 1px; margin-top: 12px; background: #263137; }
.boot__track i { display: block; width: 0; height: 100%; background: var(--brass); box-shadow: 0 0 12px var(--brass); transition: width .4s ease; }
.boot__note { position: absolute; bottom: 34px; margin: 0; color: #4e595b; font-size: 9px; letter-spacing: .08em; }

.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; transition: opacity .8s ease, visibility .8s; }
.intro::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1,8,12,.86), rgba(3,10,13,.2) 58%, rgba(3,10,13,.42)); backdrop-filter: blur(2px); }
.intro__glass { position: relative; width: min(570px, calc(100vw - 42px)); margin-right: min(40vw, 530px); padding: 46px 52px 38px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(5,15,20,.88), rgba(7,17,21,.58)); box-shadow: 0 35px 100px rgba(0,0,0,.34); }
.intro__glass::before, .intro__glass::after { content: ''; position: absolute; width: 46px; height: 46px; border-color: var(--brass); opacity: .65; }
.intro__glass::before { left: -1px; top: -1px; border-left: 1px solid; border-top: 1px solid; }
.intro__glass::after { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.intro h2 { margin: 20px 0 16px; font: 400 clamp(42px,6vw,76px)/.92 var(--jp); letter-spacing: -.06em; }
.intro h2 em { color: #e4c98d; font-style: normal; }
.intro__glass > p:not(.eyebrow,.audio-disclosure) { max-width: 430px; color: #bdc1bd; font-size: 13px; line-height: 2; letter-spacing: .08em; }
#embark { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 31px 0 27px; padding: 16px 20px; border: 1px solid rgba(211,184,119,.6); background: rgba(191,157,87,.11); cursor: pointer; transition: background .25s, color .25s; overflow: hidden; }
#embark::before { content: ''; position: absolute; inset: 0; transform: translateX(-102%); background: var(--brass); transition: transform .35s ease; }
#embark:hover::before { transform: translateX(0); }
#embark span, #embark small { position: relative; z-index: 1; }
#embark span { font-weight: 600; letter-spacing: .18em; }
#embark small { font: 600 9px/1 var(--serif); letter-spacing: .2em; }
#embark:hover { color: #091116; }
.intro__keys { display: flex; flex-wrap: wrap; gap: 15px 22px; font: 10px/1 var(--jp); color: #8c9696; }
.intro__keys span { display: flex; align-items: center; gap: 7px; }
.audio-disclosure { margin: 24px 0 0; color: #687374; font-size: 9px; line-height: 1.7; }

.hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; transition: opacity .45s ease, visibility .45s; }
.hud__top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 25px 31px; background: linear-gradient(rgba(2,8,11,.58), transparent); }
.brand { display: flex; flex-direction: column; border-left: 2px solid var(--brass); padding-left: 12px; }
.brand b { font: 600 16px/1 var(--serif); letter-spacing: .13em; }
.brand span { margin-top: 6px; font: 600 7px/1 var(--serif); letter-spacing: .28em; color: #969e9c; }
.voyage { display: flex; align-items: center; gap: 14px; margin-top: 4px; font: 9px/1 var(--jp); color: #8e9999; letter-spacing: .1em; }
.voyage b { margin-left: 5px; color: #e0e2dd; font: 600 10px/1 var(--serif); letter-spacing: .08em; }
.voyage i { width: 1px; height: 16px; background: var(--line); }
.icon-button, .hud__bottom button { pointer-events: auto; border: 1px solid var(--line); background: rgba(5,13,17,.52); padding: 9px 12px; cursor: pointer; font-size: 10px; letter-spacing: .09em; backdrop-filter: blur(8px); }

.location-card { position: absolute; left: 31px; bottom: 77px; width: 315px; padding: 20px 22px; border-left: 1px solid var(--brass); background: linear-gradient(90deg, rgba(3,12,16,.82), rgba(3,12,16,.25)); text-shadow: 0 1px 8px #000; }
.location-card > p:first-child { margin: 0 0 8px; color: var(--brass); font: 600 8px/1 var(--serif); letter-spacing: .28em; }
.location-card h2 { margin: 0 0 7px; font: 400 24px/1.3 var(--jp); letter-spacing: .04em; }
.location-card > p:nth-child(3) { margin: 0; color: #b3b9b6; font-size: 10px; line-height: 1.8; }
.location-card__line { display: flex; align-items: center; gap: 10px; margin-top: 15px; }
.location-card__line i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--brass), transparent); }
.location-card__line span { font: 9px/1 var(--serif); color: #8c9693; letter-spacing: .12em; }

.reticle { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%,-50%); opacity: .65; }
.reticle i { position: absolute; background: #eae7dc; box-shadow: 0 0 4px #000; }
.reticle i:first-child { left: 8px; top: 3px; width: 1px; height: 12px; }
.reticle i:last-child { top: 8px; left: 3px; width: 12px; height: 1px; }
.movement-hint { position: absolute; left: 50%; top: calc(50% + 38px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; opacity: .82; transition: opacity .4s; }
.movement-hint p { margin: 8px 0 0; font-size: 9px; letter-spacing: .12em; text-shadow: 0 1px 4px #000; }
.mouse-glyph { width: 18px; height: 27px; border: 1px solid #ddd; border-radius: 9px; }
.mouse-glyph::before { content: ''; display: block; width: 1px; height: 6px; margin: 4px auto; background: var(--brass); animation: scroll 1.5s infinite; }
@keyframes scroll { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(7px); opacity: 0; } }

.hud__bottom { position: absolute; left: 31px; right: 31px; bottom: 25px; display: flex; justify-content: space-between; align-items: center; font-size: 9px; letter-spacing: .1em; text-shadow: 0 1px 4px #000; }
.hud__bottom > p { color: #aeb6b2; }
.pulse { display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: #bfa66d; box-shadow: 0 0 0 4px rgba(191,166,109,.14); }
.sound-meter { display: flex; align-items: center; gap: 8px; color: #8d9794; pointer-events: auto; }
.sound-meter > i { width: 62px; height: 2px; background: linear-gradient(90deg, var(--brass) 68%, rgba(255,255,255,.16) 68%); }
.sound-meter button { border: 0; padding: 3px; background: transparent; color: var(--brass); font: 600 9px/1 var(--serif); cursor: pointer; }

.map-panel { position: fixed; right: 0; top: 0; bottom: 0; z-index: 40; width: min(560px, 100vw); padding: 34px 38px; overflow-y: auto; background: rgba(4,12,16,.95); border-left: 1px solid var(--line); box-shadow: -30px 0 80px rgba(0,0,0,.46); backdrop-filter: blur(18px); transition: opacity .35s ease, visibility .35s, transform .35s ease; }
.map-panel.is-hidden { transform: translateX(30px); }
.map-panel header { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.map-panel header .eyebrow { position: absolute; top: 30px; }
.map-panel h2 { margin: 17px 0 0; font: 400 38px/1 var(--jp); letter-spacing: .05em; }
.map-panel header button { align-self: center; width: 38px; height: 38px; border: 1px solid var(--line); background: none; cursor: pointer; font: 300 25px/1 var(--serif); }
.map-panel__help { margin: 18px 0 22px; color: #8e9896; font-size: 10px; line-height: 1.8; }
.deck-map { display: grid; gap: 4px; margin: 18px 0 28px; }
.deck-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 11px; }
.deck-row__name { color: #7e8988; font: 600 9px/1 var(--serif); letter-spacing: .12em; text-align: right; }
.deck-row__ship { position: relative; height: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 55% 14% 18% 55%; background: rgba(213,218,209,.04); }
.deck-row__ship::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,.08); }
.deck-dot { position: absolute; top: 50%; width: 7px; height: 7px; transform: translate(-50%,-50%); border: 1px solid var(--brass); border-radius: 50%; background: #091318; cursor: pointer; pointer-events: auto; }
.deck-dot:hover, .deck-dot.is-active { background: var(--brass); box-shadow: 0 0 12px var(--brass); }
.location-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.location-jump { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 13px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }
.location-jump:hover, .location-jump.is-active { border-color: var(--brass-soft); background: rgba(199,168,100,.08); }
.location-jump span { font-size: 11px; letter-spacing: .08em; }
.location-jump small { margin-top: 5px; color: #6f7b7b; font: 600 7px/1 var(--serif); letter-spacing: .15em; }
.legend { display: flex; gap: 18px; margin-top: 24px; color: #7d8987; font-size: 8px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 6px; height: 6px; border-radius: 50%; }
.legend__public { background: #c8ad72; }.legend__service { background: #7aa7aa; }.legend__machinery { background: #b2674c; }

.exterior-label { position: fixed; left: 50px; top: 50%; z-index: 20; transform: translateY(-50%); text-shadow: 0 2px 12px #000; transition: opacity .35s, visibility .35s; pointer-events: none; }
.exterior-label p { margin: 0 0 13px; color: var(--brass); font: 600 9px/1 var(--serif); letter-spacing: .32em; }
.exterior-label h2 { margin: 0 0 18px; font: 400 40px/1.15 var(--jp); }
.exterior-label span { color: #abb4b2; font-size: 9px; letter-spacing: .1em; }
.toast { position: fixed; top: 92px; left: 50%; z-index: 60; transform: translate(-50%,-12px); padding: 10px 17px; opacity: 0; background: rgba(3,11,15,.8); border: 1px solid var(--line); color: #d8d9d2; font-size: 10px; letter-spacing: .08em; transition: opacity .25s, transform .25s; pointer-events: none; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.fatal { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; padding: 40px; background: #081116; text-align: center; transition: opacity .3s; }
.fatal h2 { font: 400 36px/1.3 var(--jp); }.fatal p { color: #aeb5b2; font-size: 12px; }

@media (max-width: 850px) {
  .intro__glass { margin: 0; padding: 36px 30px 30px; }
  .voyage { display: none; }
  .hud__top { padding: 19px; }
  .location-card { left: 18px; bottom: 78px; width: min(315px, calc(100vw - 36px)); }
  .hud__bottom { left: 18px; right: 18px; }
  .sound-meter, .hud__bottom > p { display: none; }
  .hud__bottom { justify-content: flex-end; }
  .map-panel { padding: 30px 22px; }
  .location-list { grid-template-columns: 1fr; }
  .exterior-label { left: 24px; top: auto; bottom: 80px; transform: none; }
  .exterior-label h2 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }

.cabin-link{display:block;color:#edd8aa;margin:16px 0;font-size:15px}.web-note{font-size:12px!important;color:#bfc5c6!important}.switch-cabin{position:fixed;z-index:40;right:22px;top:84px;color:#edd8aa;background:#071118bb;padding:10px 14px;border:1px solid #ac956355;border-radius:4px;font-size:12px}#touch-walk{display:none;position:fixed;bottom:90px;left:20px;z-index:35;text-align:center;touch-action:none}#touch-walk button{width:48px;height:48px;background:#071118bb;color:#ead6ad;border:1px solid #cfb78066;border-radius:8px;margin:2px;touch-action:none}@media(pointer:coarse){body:has(#hud:not(.is-hidden)) #touch-walk{display:block}.movement-hint{display:none}.switch-cabin{top:70px}}

#scene{touch-action:none}