@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@400;500;600&display=swap');

:root { background: #071a36; --isekari-font-display: "Cormorant Garamond", Georgia, serif; --isekari-font-ui: "Montserrat", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: #071a36; font-family: "Cormorant Garamond", Georgia, serif; }
button, input, select, textarea { font: inherit; }
body { overflow: hidden; }
.isekari, .screen, .art-picture, .approved-art, .map-scene, .world-background, .back-atmosphere, .island-world, .front-atmosphere, .ship-deck, .map-targets { position: absolute; inset: 0; }
.isekari { width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; background: #071a36; }
.screen { overflow: hidden; transition: opacity 420ms ease, transform 560ms cubic-bezier(.2,.8,.2,1); }
.art-picture { display: block; }
.approved-art { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; user-select: none; -webkit-user-drag: none; }
.map-screen { opacity: 0; pointer-events: none; transform: scale(1.035); }
html[data-isekari-initial-view="map"] .gate-screen { display: none; }
html[data-isekari-initial-view="map"] .map-screen { opacity: 1; pointer-events: auto; transform: none; transition: none; }
.map-scene { overflow: hidden; }
.isekari:not(.is-map-scene-ready) .map-scene,
.isekari:not(.is-map-scene-ready) .map-ui-layer { visibility: hidden; }

/* The initial desktop composition is assigned by app.js before it is shown.
   Suppress journey transitions only for that first paint. */
@media (min-width: 1101px) and (min-aspect-ratio: 1 / 1) {
  .isekari.is-initializing .island-world [data-journey-state] {
    transition: none !important;
  }
}
.world-background { z-index: 1; }
.world-background .approved-art { object-fit: cover; object-position: center; }
.back-atmosphere { z-index: 2; pointer-events: none; }
.island-world { z-index: 3; pointer-events: none; }
.front-atmosphere { z-index: 4; pointer-events: none; }
.ship-deck { z-index: 5; pointer-events: none; }
.island { position: absolute; left: var(--mobile-left); top: var(--mobile-top); width: var(--mobile-width); height: var(--mobile-height); transform: translate3d(var(--mobile-translate-x, 0px), calc(var(--mobile-translate-y, 0px) + var(--journey-translate-y, 0px)), 0) scale(var(--journey-scale, var(--mobile-scale, 1))); transform-origin: center; border: 0; background: transparent; opacity: var(--island-opacity, 1); filter: var(--island-filter, none); pointer-events: none; will-change: transform, opacity, filter; }
.island-asset { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.island-hitbox { position: absolute; z-index: 1; left: 14%; top: 15%; width: 72%; height: 70%; margin: 0; padding: 0; border: 0; background: transparent; clip-path: polygon(50% 0, 84% 12%, 100% 44%, 83% 80%, 50% 100%, 17% 80%, 0 44%, 16% 12%); cursor: pointer; pointer-events: auto; }
.island-hitbox:focus-visible { outline: 2px solid #ffe0a0; outline-offset: 5px; }
.island-03 .island-hitbox { left: 20%; top: 15%; width: 60%; height: 70%; clip-path: polygon(50% 0, 82% 13%, 100% 45%, 80% 82%, 50% 100%, 20% 82%, 0 45%, 18% 13%); }
.island-02 .island-hitbox { left: 16%; top: 16%; width: 68%; height: 68%; }
.island-08 .island-hitbox { left: 10%; top: 18%; width: 80%; height: 65%; clip-path: polygon(8% 28%, 28% 5%, 52% 0, 78% 11%, 96% 32%, 91% 70%, 74% 92%, 48% 100%, 22% 91%, 4% 68%); }
.island-09 .island-hitbox { left: 8%; top: 11%; width: 84%; height: 78%; clip-path: polygon(7% 48%, 18% 16%, 49% 2%, 82% 12%, 98% 42%, 93% 74%, 72% 96%, 36% 100%, 12% 82%); }
.island-10 .island-hitbox { left: 7%; top: 10%; width: 86%; height: 80%; clip-path: polygon(8% 36%, 28% 8%, 52% 1%, 80% 12%, 97% 39%, 91% 73%, 70% 96%, 38% 100%, 13% 82%, 2% 58%); }
.island-11 .island-hitbox { left: 6%; top: 8%; width: 88%; height: 84%; clip-path: polygon(8% 38%, 25% 9%, 53% 1%, 81% 11%, 98% 39%, 93% 75%, 72% 97%, 38% 100%, 12% 84%, 2% 60%); }
.island-12 .island-hitbox { left: 6%; top: 8%; width: 88%; height: 84%; clip-path: polygon(7% 39%, 26% 9%, 53% 1%, 82% 12%, 98% 40%, 93% 75%, 71% 97%, 38% 100%, 12% 84%, 2% 60%); }
.island[data-island-state="locked"] { cursor: default; pointer-events: none; }
.story-island-ui { position: absolute; left: 3%; top: 12%; width: 94%; height: 40%; z-index: 2; pointer-events: none; opacity: var(--story-ui-opacity, 1); transform: translate3d(0, var(--story-ui-translate-y, 0), 0) scale(var(--story-ui-scale, 1)); transform-origin: center; transition: opacity 120ms linear; will-change: transform, opacity; }
.artifacts-island-ui { position: absolute; left: 3%; top: 72%; width: 94%; height: 40%; z-index: 2; pointer-events: none; transform: translate3d(0, var(--artifacts-ui-translate-y, 0), 0) scale(var(--artifacts-ui-scale, .72)); transform-origin: center; will-change: transform; }
.lights-island-ui { position: absolute; left: 3%; top: 252%; width: 94%; height: 40%; z-index: 2; pointer-events: none; opacity: var(--lights-ui-opacity, 0); transform: translate3d(0, var(--lights-ui-translate-y, 0), 0) scale(var(--lights-ui-scale, .72)); transform-origin: center; transition: opacity 180ms ease-out; will-change: transform, opacity; }
.story-island-ui h2, .story-island-title, .artifacts-island-title, .archipelago-island-title, .creators-bay-island-title, .lights-island-title, .sources-island-title, .ink-waters-island-title { position: absolute; margin: 0; color: #fff8e8; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(14px, 4vw, 18px); font-weight: 600; letter-spacing: .1em; line-height: 1.1; text-align: center; text-shadow: 0 1px 3px rgba(20, 28, 54, .9), 0 0 9px rgba(255, 226, 158, .38); }
.story-island-ui h2 { top: 4%; left: 50%; width: max-content; max-width: 84%; transform: translateX(-50%); }
.story-island-title { display: none; }
.artifacts-island-title { top: 3%; left: 50%; width: max-content; max-width: 88%; transform: translateX(-50%); opacity: var(--artifacts-title-opacity, 0); transition: opacity 180ms ease-out; }
.archipelago-island-title { left: 50%; top: 134%; width: 94%; transform: translate(-50%, var(--archipelago-title-translate-y, 0)); opacity: var(--archipelago-title-opacity, 0); pointer-events: none; transition: opacity 180ms ease-out; }
.creators-bay-island-title { left: 50%; top: 194%; width: 94%; transform: translate(-50%, var(--creators-bay-title-translate-y, 0)); opacity: var(--creators-bay-title-opacity, 0); pointer-events: none; transition: opacity 180ms ease-out; }
.creators-bay-island-ui { position: absolute; left: 3%; top: 192%; width: 94%; height: 40%; z-index: 7; pointer-events: none; opacity: var(--creators-bay-ui-opacity, 0); transform: translate3d(0, var(--creators-bay-ui-y, 0), 0) scale(var(--creators-bay-ui-scale, .66)); transform-origin: center; transition: opacity 180ms ease-out; }
.creators-bay-categories { position: absolute; inset: 0; }
.creators-bay-categories > :nth-child(1) { left: 14%; top: 29%; }
.creators-bay-categories > :nth-child(2) { left: 50%; top: 18%; }
.creators-bay-categories > :nth-child(3) { left: 84%; top: 29%; }
.creators-bay-categories > :nth-child(4) { left: 12%; top: 60%; }
.creators-bay-categories > :nth-child(5) { left: 88%; top: 60%; }
.creators-bay-categories > :nth-child(6) { left: 31%; top: 82%; }
.creators-bay-categories > :nth-child(7) { left: 69%; top: 82%; }
.sources-island-title { left: 50%; top: 314%; width: 90%; transform: translate(-50%, var(--sources-title-translate-y, 0)); opacity: var(--sources-title-opacity, 0); pointer-events: none; transition: opacity 180ms ease-out; }
.sources-island-ui { position: absolute; left: 3%; top: 312%; width: 94%; height: 40%; z-index: 7; pointer-events: none; opacity: var(--sources-ui-opacity, 0); transform: translate3d(0, var(--sources-ui-y, 0), 0) scale(var(--sources-ui-scale, .6)); transform-origin: center; transition: opacity 180ms ease-out; }
.sources-categories { position: absolute; inset: 0; }
.sources-categories > :nth-child(1) { left: 16%; top: 31%; }
.sources-categories > :nth-child(2) { left: 84%; top: 31%; }
.sources-categories > :nth-child(3) { left: 22%; top: 72%; }
.sources-categories > :nth-child(4) { left: 78%; top: 72%; }
.ink-waters-island-title { left: 50%; top: 374%; width: 90%; transform: translate(-50%, var(--ink-waters-title-translate-y, 0)); opacity: var(--ink-waters-title-opacity, 0); pointer-events: none; transition: opacity 180ms ease-out; }
.ink-waters-island-ui { position: absolute; left: 3%; top: 372%; width: 94%; height: 40%; z-index: 7; pointer-events: none; opacity: var(--ink-waters-ui-opacity, 0); transform: translate3d(0, var(--ink-waters-ui-y, 0), 0) scale(var(--ink-waters-ui-scale, .6)); transform-origin: center; transition: opacity 180ms ease-out; }
.ink-waters-categories { position: absolute; inset: 0; }
.ink-waters-categories > :nth-child(1) { left: 14%; top: 29%; }
.ink-waters-categories > :nth-child(2) { left: 50%; top: 18%; }
.ink-waters-categories > :nth-child(3) { left: 85%; top: 29%; }
.ink-waters-categories > :nth-child(4) { left: 14%; top: 70%; }
.ink-waters-categories > :nth-child(5) { left: 50%; top: 80%; }
.ink-waters-categories > :nth-child(6) { left: 85%; top: 70%; }
.flavor-marketplaces-island-title { position: absolute; left: 50%; top: 434%; width: 90%; margin: 0; color: #fff2d2; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(14px, 4vw, 18px); font-weight: 600; letter-spacing: .1em; line-height: 1.1; text-align: center; text-shadow: 0 1px 2px rgba(15, 10, 12, .92), 0 2px 9px rgba(5, 15, 34, .82); transform: translate(-50%, var(--flavor-marketplaces-title-translate-y, 0)); opacity: var(--flavor-marketplaces-title-opacity, 0); pointer-events: none; transition: opacity 180ms ease-out; }
.flavor-marketplaces-island-ui { position: absolute; left: 3%; top: 432%; width: 94%; height: 40%; z-index: 7; pointer-events: none; opacity: var(--flavor-marketplaces-ui-opacity, 0); transform: translate3d(0, var(--flavor-marketplaces-ui-y, 0), 0) scale(var(--flavor-marketplaces-ui-scale, .6)); transform-origin: center; transition: opacity 180ms ease-out; }
.flavor-marketplaces-categories { position: absolute; inset: 0; }
.flavor-marketplaces-categories > :nth-child(1) { left: 14%; top: 29%; }
.flavor-marketplaces-categories > :nth-child(2) { left: 50%; top: 18%; }
.flavor-marketplaces-categories > :nth-child(3) { left: 85%; top: 29%; }
.flavor-marketplaces-categories > :nth-child(4) { left: 14%; top: 70%; }
.flavor-marketplaces-categories > :nth-child(5) { left: 50%; top: 80%; }
.flavor-marketplaces-categories > :nth-child(6) { left: 85%; top: 70%; }
.island-13 { --mobile-left: 3%; --mobile-top: 492%; --mobile-width: 94%; --mobile-height: 40%; --mobile-scale: .6; --island-opacity: .58; --island-filter: saturate(.82) contrast(.92); }
.melody-cape-island-title { position:absolute; left:50%; top:494%; width:90%; margin:0; color:#fff2d2; font-family:"Cormorant Garamond", Georgia, serif; font-size:clamp(14px,4vw,18px); font-weight:600; letter-spacing:.1em; line-height:1.1; text-align:center; text-shadow:0 1px 2px rgba(15,10,12,.92),0 2px 9px rgba(5,15,34,.82); transform:translate(-50%,var(--melody-cape-title-y,0)); opacity:var(--melody-cape-title-opacity,0); pointer-events:none; }
.melody-cape-island-ui { position:absolute; left:3%; top:492%; width:94%; height:40%; z-index:7; pointer-events:none; opacity:var(--melody-cape-ui-opacity,0); transform:translate3d(0,var(--melody-cape-ui-y,0),0) scale(var(--melody-cape-ui-scale,.6)); transform-origin:center; }
.island-14 { --mobile-left: 3%; --mobile-top: 552%; --mobile-width: 94%; --mobile-height: 40%; --mobile-scale: .6; --island-opacity: .58; --island-filter: saturate(.82) contrast(.92); }
.island-14[data-island-state="locked"] { pointer-events:auto; cursor:pointer; }
.gamers-frontiers-island-title { position:absolute; left:50%; top:554%; width:90%; margin:0; color:#fff2d2; font-family:"Cormorant Garamond", Georgia, serif; font-size:clamp(14px,4vw,18px); font-weight:600; letter-spacing:.1em; line-height:1.1; text-align:center; text-shadow:0 1px 2px rgba(15,10,12,.92),0 2px 9px rgba(5,15,34,.82); transform:translate(-50%,var(--gamers-frontiers-title-y,0)); opacity:var(--gamers-frontiers-title-opacity,0); pointer-events:none; }
.gamers-frontiers-island-ui { position:absolute; left:9%; top:564%; width:82%; z-index:7; pointer-events:none; text-align:center; color:#f5ebd5; font:400 clamp(12px,3.2vw,16px)/1.45 "Cormorant Garamond", Georgia, serif; letter-spacing:.02em; text-shadow:0 2px 10px rgba(5,10,30,.95); opacity:var(--gamers-frontiers-ui-opacity,0); transform:translate3d(0,var(--gamers-frontiers-ui-y,0),0) scale(var(--gamers-frontiers-ui-scale,.6)); transform-origin:center; }
.gamers-frontiers-island-ui p { margin:0; padding:18px 20px 10px; background:radial-gradient(ellipse at center,rgba(7,18,48,.62) 0%,rgba(7,18,48,.34) 48%,rgba(7,18,48,0) 76%); }
.gamers-frontiers-island-ui small { display:block; color:#ddc9ef; font-size:.84em; letter-spacing:.05em; }
.melody-cape-categories { position:absolute; inset:0; }.melody-cape-categories > :nth-child(1){left:14%;top:29%;}.melody-cape-categories > :nth-child(2){left:50%;top:18%;}.melody-cape-categories > :nth-child(3){left:85%;top:29%;}.melody-cape-categories > :nth-child(4){left:14%;top:70%;}.melody-cape-categories > :nth-child(5){left:50%;top:80%;}.melody-cape-categories > :nth-child(6){left:85%;top:70%;}
.story-categories { position: absolute; inset: 0; }
.artifacts-categories { position: absolute; inset: 0; opacity: var(--artifacts-categories-opacity, 0); transition: opacity 180ms ease-out; }
.lights-categories { position: absolute; inset: 0; }
.story-category { position: absolute; display: grid; grid-template-rows: 38px auto; width: 70px; min-height: 62px; place-items: center; align-content: center; gap: 0; border: 0; padding: 2px; background: transparent; color: #fff8e8; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(11px, 3vw, 12.5px); font-weight: 600; line-height: 1.05; text-align: center; text-shadow: 0 1px 3px rgba(20, 28, 54, .9), 0 0 9px rgba(255, 226, 158, .38); transform: translate(-50%, -50%); transform-origin: center; transition: transform 200ms ease-out, color 200ms ease-out, text-shadow 200ms ease-out; cursor: pointer; pointer-events: auto; }


.story-category-manga { left: 37%; top: 27%; }.story-category-manhwa { left: 63%; top: 27%; }.story-category-manhua { left: 88%; top: 31%; }.story-category-webtoony { left: 12%; top: 69%; }.story-category-novel { left: 37%; top: 75%; }.story-category-creators { left: 63%; top: 75%; }.story-category-discover { left: 88%; top: 69%; }
.lights-category { pointer-events: auto; }.lights-category-kdrama { left: 16%; top: 31%; }.lights-category-jdrama { left: 50%; top: 25%; }.lights-category-cdrama { left: 84%; top: 31%; }.lights-category-films { left: 18%; top: 69%; }.lights-category-actors { left: 50%; top: 76%; }.lights-category-discover { left: 82%; top: 69%; }
.artifacts-category { pointer-events: auto; }
.artifacts-category-figures { left: 50%; top: 42%; }
.artifacts-category-cards { left: 18%; top: 30%; }
.artifacts-category-gadgets { left: 82%; top: 30%; }
.artifacts-category-artbooks { left: 19%; top: 64%; }
.artifacts-category-special { left: 50%; top: 69%; }
.artifacts-category-collections { left: 81%; top: 64%; }
.artifacts-category-discover { left: 50%; top: 85%; }
.story-category:focus-visible { z-index: 3; outline: 2px solid #ffe0a0; outline-offset: 3px; border-radius: 50%; }
.lights-island-title { left: 50%; top: 254%; width: 90%; transform: translate(-50%, var(--lights-title-translate-y, 0)); opacity: var(--lights-title-opacity, .82); pointer-events: none; }
.island-01 { --mobile-left: 3%; --mobile-top: 12%; --mobile-width: 94%; --mobile-height: 40%; --mobile-scale: 1; }
.island-02 { --mobile-left: 3%; --mobile-top: 252%; --mobile-width: 94%; --mobile-height: 40%; --mobile-scale: .6; --island-opacity: .45; --island-filter: saturate(.76) contrast(.88); }
.island-03 { --mobile-left: 3%; --mobile-top: 72%; --mobile-width: 94%; --mobile-height: 40%; --mobile-scale: .72; --island-opacity: .58; --island-filter: saturate(.82) contrast(.9); }
.island-08 { --mobile-left: 2%; --mobile-top: 132%; --mobile-width: 96%; --mobile-height: 38%; --mobile-scale: .68; --island-opacity: .6; --island-filter: saturate(.8) contrast(.9); }
.island-09 { --mobile-left: 3%; --mobile-top: 192%; --mobile-width: 94%; --mobile-height: 40%; --mobile-scale: .66; --island-opacity: .6; --island-filter: saturate(.8) contrast(.9); }
.island-10 { --mobile-left: 3%; --mobile-top: 312%; --mobile-width: 94%; --mobile-height: 40%; --mobile-scale: .6; --island-opacity: .58; --island-filter: saturate(.82) contrast(.92); }
.island-11 { --mobile-left: 3%; --mobile-top: 372%; --mobile-width: 94%; --mobile-height: 40%; --mobile-scale: .6; --island-opacity: .58; --island-filter: saturate(.82) contrast(.92); }
.island-12 { --mobile-left: 3%; --mobile-top: 432%; --mobile-width: 94%; --mobile-height: 40%; --mobile-scale: .6; --island-opacity: .58; --island-filter: saturate(.82) contrast(.92); }
.island-04 { --mobile-left: 50%; --mobile-top: 29%; --mobile-width: 31%; --mobile-height: 22%; --mobile-scale: 1; --island-opacity: .72; --island-filter: saturate(.82); }
.island-05 { --mobile-left: 66%; --mobile-top: 46%; --mobile-width: 31%; --mobile-height: 24%; --mobile-scale: 1; --island-opacity: .72; --island-filter: saturate(.82); }
.island-06 { --mobile-left: 12%; --mobile-top: 50%; --mobile-width: 29%; --mobile-height: 20%; --mobile-scale: 1; --island-opacity: .72; --island-filter: saturate(.82); }
.island-07 { --mobile-left: 63%; --mobile-top: 61%; --mobile-width: 34%; --mobile-height: 25%; --mobile-scale: 1; --island-opacity: .72; --island-filter: saturate(.82); }
.map-target { position: absolute; z-index: 2; border: 0; background: transparent; padding: 0; cursor: pointer; }
.map-target:focus-visible { outline: 3px solid #f4ca76; outline-offset: 4px; border-radius: 14px; }
.gate-screen { min-height: 100vh; min-height: 100dvh; }
.gate-screen .approved-art { object-fit: cover; object-position: center; }
.gate-screen .art-picture { transition: transform 1050ms cubic-bezier(.25,.7,.2,1); transform-origin: center; }
.gate-transition-light { position: absolute; inset: -6%; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(255, 231, 191, 0) 16%, rgba(255, 238, 205, .08) 38%, rgba(255, 242, 216, .18) 50%, rgba(255, 229, 190, .08) 63%, rgba(255, 231, 191, 0) 84%), linear-gradient(180deg, rgba(255, 235, 203, 0) 20%, rgba(255, 229, 193, .1) 51%, rgba(255, 232, 200, 0) 84%); transition: opacity 500ms ease; }
.gate-ui { position: absolute; z-index: 2; top: 37%; left: 50%; width: min(72vw, 520px); transform: translateX(-50%); text-align: center; color: #fff0c9; text-shadow: 0 2px 12px rgba(16, 23, 53, .48); }
.gate-ui h1, .gate-ui p, .gate-enter { opacity: 0; animation: gate-reveal 720ms cubic-bezier(.22,.8,.3,1) forwards; }
.gate-ui h1 { position: relative; margin: 0; padding-left: .19em; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(43px, 3.9vw, 74px); font-weight: 400; letter-spacing: .19em; line-height: 1; color: #fff0c9; text-shadow: 0 1px 10px rgba(255, 218, 149, .18); transform-origin: center center; animation: gate-reveal 720ms cubic-bezier(.22,.8,.3,1) 140ms forwards, gate-logo-breathe 5.8s ease-in-out 1s infinite; }
.gate-ui h1::after { content: attr(data-title); position: absolute; inset: 0; padding-left: .19em; color: transparent; background: linear-gradient(105deg, rgba(255, 246, 222, 0) 38%, rgba(255, 250, 230, .68) 49%, rgba(255, 238, 195, .22) 55%, rgba(255, 246, 222, 0) 64%); background-repeat: no-repeat; background-size: 45% 100%; background-position: -55% 0; -webkit-background-clip: text; background-clip: text; pointer-events: none; animation: gate-shimmer 2200ms 1900ms ease-in-out 1 both; }
.gate-ui p { margin: 14px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(16px, 1.3vw, 22px); letter-spacing: .07em; color: rgba(255, 244, 215, .96); text-shadow: 0 1px 8px rgba(15, 23, 49, .32); animation-delay: 500ms; }
.gate-enter { position: relative; isolation: isolate; display: inline-flex; min-width: 136px; min-height: 50px; align-items: center; justify-content: center; margin: 28px auto 0; padding: 0 22px; border: 1px solid rgba(214, 169, 87, .72); border-radius: 50% / 56%; background: radial-gradient(ellipse at 50% 0%, rgba(42, 57, 86, .56), rgba(5, 14, 33, .84) 58%, rgba(3, 10, 26, .9)); color: #fff0c9; box-shadow: inset 0 1px 0 rgba(255, 244, 211, .19), inset 0 -1px 0 rgba(116, 73, 31, .28), 0 4px 15px rgba(6, 15, 35, .24); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(14px, 1.05vw, 18px); font-weight: 500; letter-spacing: .045em; cursor: pointer; animation-delay: 820ms; transition: transform 340ms ease, border-color 340ms ease, box-shadow 340ms ease, background-color 340ms ease, color 340ms ease; }
.gate-enter::before, .gate-enter::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border: 1px solid rgba(221, 179, 98, .68); background: rgba(12, 22, 43, .88); box-shadow: 0 0 5px rgba(233, 185, 95, .16); transform: translateY(-50%) rotate(45deg); pointer-events: none; }
.gate-enter::before { left: -5px; }
.gate-enter::after { right: -5px; }
.gate-enter:focus-visible { outline: 3px solid #fff0bd; outline-offset: 5px; }
.gate-enter:active { transform: scale(.985); border-color: #e6bc70; box-shadow: inset 0 1px 0 rgba(255, 242, 204, .1), 0 2px 8px rgba(6, 15, 35, .18); }
@keyframes gate-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gate-shimmer { from { background-position: -55% 0; } to { background-position: 155% 0; } }
@keyframes gate-logo-breathe { 0%, 100% { transform: scale(1); color: #fff0c9; text-shadow: 0 1px 10px rgba(255, 218, 149, .18), 0 0 8px rgba(232, 183, 97, .1); } 50% { transform: scale(1.018); color: #fff7e3; text-shadow: 0 1px 11px rgba(255, 224, 164, .24), 0 0 13px rgba(234, 185, 98, .18); } }
.gate-screen.is-entering .gate-ui { opacity: 0; transform: translate(-50%, -3px); transition: opacity 320ms ease, transform 320ms ease; pointer-events: none; }
.gate-screen.is-entering .gate-ui h1, .gate-screen.is-entering .gate-ui p, .gate-screen.is-entering .gate-enter { animation-play-state: paused; }
.gate-screen.is-entering .gate-transition-light { opacity: .18; }
.gate-screen.is-entering .art-picture { transform: scale(1.22); }
.map-visible .gate-screen { opacity: 0; pointer-events: none; transform: none; }
.map-visible .map-screen { opacity: 1; pointer-events: auto; transform: scale(1); }
.is-transitioning .map-screen { transform: scale(1.015); }
.is-transitioning.map-visible .map-screen { transform: scale(1); }
.world-transition-atmosphere { position: absolute; inset: -8%; z-index: 10; pointer-events: none; opacity: 0; background: linear-gradient(172deg, rgba(236, 221, 235, 0) 10%, rgba(235, 215, 229, .1) 35%, rgba(255, 239, 209, .22) 53%, rgba(210, 207, 232, .14) 69%, rgba(175, 188, 224, 0) 92%), linear-gradient(7deg, rgba(255, 239, 211, 0) 14%, rgba(243, 220, 226, .14) 47%, rgba(217, 209, 233, .08) 72%, rgba(215, 220, 238, 0) 94%); transition: opacity 300ms ease; }
.is-transitioning .world-transition-atmosphere { opacity: .32; }
.is-transitioning .gate-screen .art-picture, .is-transitioning .gate-screen, .is-transitioning .map-screen, .is-transitioning .world-transition-atmosphere { will-change: transform, opacity; }
.ship-deck { overflow: hidden; }
.ship-art { position: absolute; left: 50%; bottom: 0; width: 104vw; height: auto; transform: translateX(-50%); }
.ship-art img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
@media (orientation: portrait) {
  .ship-deck .ship-art { isolation: isolate; }
  .ship-deck .ship-art::before { content: ""; position: absolute; inset: 70% 0 0; z-index: -1; background: #8a5b36; pointer-events: none; }
}
@media (max-width: 699px) and (orientation: portrait) {
  .ship-deck .ship-art { position: absolute; left: auto; right: 0; bottom: calc(138px + env(safe-area-inset-bottom) - 53.7vw); width: 100vw; height: auto; transform: none; }
  .map-ui-layer .ship-navigation { bottom: calc(12px + env(safe-area-inset-bottom)); --seal-inner-offset: 0px; }
}
@media (min-width: 700px) and (orientation: portrait) {
  .ship-deck .ship-art { position: absolute; left: auto; right: 0; bottom: calc(156px + env(safe-area-inset-bottom) - 53.7vw); width: 100vw; height: auto; transform: none; }
  .map-ui-layer .ship-navigation { bottom: calc(20px + env(safe-area-inset-bottom)); --seal-inner-offset: 0px; }
}
.map-ui-layer { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; transition: opacity 220ms ease; }
.map-visible .map-ui-layer { opacity: 1; }
.journey-onboarding { position: absolute; z-index: 8; top: 65%; left: 50%; width: min(34vw, 420px); margin: 0; transform: translateX(-50%); pointer-events: none; color: rgba(255, 239, 202, .9); font: 400 clamp(13px, 1vw, 16px)/1.35 var(--isekari-font-ui); letter-spacing: .035em; text-align: center; text-shadow: 0 1px 6px rgba(4, 13, 34, .82), 0 0 8px rgba(246, 204, 130, .16); opacity: .78; transition: opacity 360ms ease; animation: journey-onboarding-breathe 2.8s ease-in-out infinite; }
.journey-onboarding::before { content: ""; position: absolute; inset: -12px -24px; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(4, 14, 38, .62) 0%, rgba(4, 14, 38, .34) 48%, rgba(4, 14, 38, 0) 100%); filter: blur(7px); }
.journey-onboarding-touch { display: none; }
.journey-onboarding.is-complete { opacity: 0; animation: none; }
@keyframes journey-onboarding-breathe { 0%, 100% { opacity: .72; text-shadow: 0 1px 6px rgba(4, 13, 34, .82), 0 0 7px rgba(246, 204, 130, .12); } 50% { opacity: .94; text-shadow: 0 1px 6px rgba(4, 13, 34, .82), 0 0 11px rgba(246, 204, 130, .26); } }
.top-ui { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 0; width: 100%; min-height: 44px; pointer-events: none; }
.map-brand { position: absolute; top: 0; left: 50%; display: grid; justify-items: center; gap: 2px; transform: translateX(-50%); color: #fff0ca; font-family: "Cormorant Garamond", Georgia, serif; font-size: 14px; letter-spacing: .23em; line-height: 1; text-shadow: 0 1px 8px rgba(6, 18, 43, .5); }
.map-brand img { width: 29px; height: 29px; object-fit: contain; filter: drop-shadow(0 1px 5px rgba(17, 21, 49, .36)); }
.map-actions { position: absolute; top: 0; right: max(16px, env(safe-area-inset-right)); display: flex; gap: 4px; pointer-events: auto; }
.map-actions button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; padding: 0; background: transparent; color: #fff0ca; cursor: pointer; }
.map-actions .map-global-button { width: auto; min-width: 58px; padding: 0 8px; color: rgba(255, 240, 202, .92); font-family: "Cormorant Garamond", Georgia, serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; line-height: 1; text-shadow: 0 1px 5px rgba(6, 18, 43, .56); }
.map-actions .map-global-button:hover { color: #f6d98d; text-shadow: none; }
.map-actions svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 5px rgba(6, 18, 43, .48)); }
.map-actions button:focus-visible, .ship-nav-item:focus-visible { outline: 2px solid #f7d58d; outline-offset: 3px; }
.ship-navigation { position: absolute; right: 0; bottom: max(8px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; min-height: 74px; padding: 6px 3px; transform: none; isolation: isolate; border: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: auto; }
.ship-navigation::before { content: none; }
.ship-nav-item { display: grid; min-width: 0; min-height: 60px; place-items: center; align-content: end; border: 0; padding: 2px 4px 5px; background: transparent; color: #fff3d7; font-family: "Cormorant Garamond", Georgia, serif; font-size: 11px; font-weight: 600; line-height: 1.08; text-align: center; text-shadow: 0 1px 2px rgba(15, 10, 12, .88), 0 2px 7px rgba(5, 15, 34, .72); cursor: pointer; }
.ship-nav-item span { max-width: 110px; white-space: nowrap; }
.ship-nav-item--with-seal { grid-template-rows: auto auto; align-content: center; gap: 2px; padding-bottom: 2px; }
.ship-navigation > :nth-child(2) { translate: calc(-1 * var(--seal-inner-offset, 0px)) 0; }
.ship-navigation > :nth-child(3) { translate: var(--seal-inner-offset, 0px) 0; }
.ship-nav-seal { display: block; width: 88px; height: auto; aspect-ratio: 1 / 1; filter: drop-shadow(0 1px 2px rgba(16, 11, 11, .76)) drop-shadow(0 2px 5px rgba(4, 15, 35, .48)); transition: transform 220ms ease, filter 220ms ease; }
.search { left: 3%; top: 2%; width: 11%; height: 6%; }.menu { right: 2%; top: 2%; width: 10%; height: 6%; }
.category { width: 12%; height: 7%; }.manga { left: 18%; top: 28%; }.manhwa { left: 31%; top: 28%; }.manhua { left: 44%; top: 28%; }.webtoony { left: 5%; top: 36%; }.novel { left: 18%; top: 36%; }.creators { left: 31%; top: 36%; }.discover { left: 44%; top: 36%; }
.ship { bottom: 1%; height: 10%; width: 18%; }.crew { left: 1%; }.inventory { left: 20%; }.map { left: 41%; }.news { left: 60%; }.captain { left: 80%; }
@media (min-width: 700px) {
  .approved-art { object-fit: cover; }
  .map-screen .map-targets { transform: scale(.98); transform-origin: center; }
  .map-screen .world-background .art-picture { transform: none; }
  .gate-enter:hover { transform: scale(1.02); border-color: #f1ca81; background: rgba(11, 24, 48, .86); color: #fff8e6; box-shadow: inset 0 1px 0 rgba(255, 245, 212, .22), inset 0 -1px 0 rgba(150, 98, 44, .3), 0 5px 17px rgba(229, 178, 88, .18); }
  .search { left: 79%; top: 2%; width: 5%; height: 8%; }.menu { right: 2%; top: 2%; width: 5%; height: 8%; }
  .category { width: 5.1%; height: 8%; }.manga { left: 30.3%; top: 33%; }.manhwa { left: 35.6%; top: 33%; }.manhua { left: 40.9%; top: 33%; }.webtoony { left: 25%; top: 41.5%; }.novel { left: 30.3%; top: 41.5%; }.creators { left: 35.6%; top: 41.5%; }.discover { left: 40.9%; top: 41.5%; }
  .ship { bottom: 1%; height: 13%; width: 11%; }.crew { left: 31%; }.inventory { left: 42%; }.map { left: 53%; }.news { left: 64%; }.captain { left: 75%; }
}
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .gate-ui { top: 34%; left: 22%; width: min(32vw, 460px); }
  .isekari { --island-travel-duration: 1500ms; }
  .ship-navigation { left: 50%; right: auto; width: min(82vw, 1600px); transform: translateX(-50%); padding: 6px 0; }
  .ship-nav-item { min-height: 68px; padding: 2px 8px 6px; font-size: 15px; }
  .ship-nav-seal { width: 104px; }
  .story-island-ui { left: 9%; top: 16%; width: 38%; height: 40%; }
  .artifacts-island-ui { left: 49%; top: 10%; width: 26%; height: 33%; transform: none; }
  .lights-island-ui { left: 72%; top: 43%; width: 27%; height: 33%; transform: none; opacity: 0; }
  .lights-active .story-island-ui { opacity: 0; pointer-events: none; }
  .lights-active .lights-island-ui { opacity: 1; pointer-events: auto; }
  .story-island-ui h2 { display: none; }
  .story-island-title { display: block; left: 28%; top: 17%; width: 38%; font-size: clamp(16px, 1.5vw, 24px); letter-spacing: .12em; transform: translateX(-50%); opacity: 1; transition: transform var(--island-travel-duration) cubic-bezier(.22,.72,.2,1), opacity 460ms ease; }
  .artifacts-island-title { left: 50%; top: -2%; width: 100%; font-size: clamp(16px, 1.5vw, 24px); letter-spacing: .12em; opacity: .68; transition: transform var(--island-travel-duration) cubic-bezier(.22,.72,.2,1), opacity 460ms ease; }
  .story-category { grid-template-rows: 46px auto; width: 88px; min-height: 74px; gap: 0; font-size: clamp(12px, 1vw, 14px); }
  
  
  .story-category-manga { left: 36%; top: 23%; }.story-category-manhwa { left: 64%; top: 23%; }.story-category-manhua { left: 83%; top: 38%; }.story-category-webtoony { left: 17%; top: 66%; }.story-category-novel { left: 36%; top: 79%; }.story-category-creators { left: 64%; top: 79%; }.story-category-discover { left: 83%; top: 66%; }
  .lights-category-kdrama { left: 21%; top: 34%; }.lights-category-jdrama { left: 50%; top: 20%; }.lights-category-cdrama { left: 79%; top: 34%; }.lights-category-films { left: 24%; top: 60%; }.lights-category-actors { left: 50%; top: 69%; }.lights-category-discover { left: 76%; top: 60%; }
  .lights-island-title { left: 85.5%; top: 37%; width: 27%; font-size: clamp(16px, 1.5vw, 24px); letter-spacing: .12em; }
  .island { transition: transform var(--island-travel-duration) cubic-bezier(.22,.72,.2,1), opacity 520ms ease, filter 520ms ease; }
  .story-island-ui, .artifacts-island-ui, .lights-island-ui { transition: transform var(--island-travel-duration) cubic-bezier(.22,.72,.2,1), opacity 360ms ease-out; }
  .lights-island-title { transition: transform var(--island-travel-duration) cubic-bezier(.22,.72,.2,1), opacity 460ms ease; }
  .island-01 .island-hitbox, .island-02 .island-hitbox, .island-03 .island-hitbox { cursor: pointer; }
  .is-stories-active .story-island-ui { opacity: 1; pointer-events: auto; transition-delay: 0ms, 820ms; }
  .is-stories-active .lights-island-ui { opacity: 0; pointer-events: none; transition-delay: 0ms, 0ms; }
  .is-artifacts-active .story-island-ui, .is-artifacts-active .lights-island-ui { opacity: 0; pointer-events: none; transition-delay: 0ms, 0ms; }
  .is-stories-active .artifacts-island-ui, .is-lights-active .artifacts-island-ui, .is-stories-active .artifacts-categories, .is-lights-active .artifacts-categories { pointer-events: none; }
  .is-artifacts-active .artifacts-island-ui { pointer-events: auto; transform: translate3d(-11vw, 4vh, 0) scale(1); }
  .is-artifacts-active .artifacts-categories { pointer-events: auto; }
  .is-artifacts-active .artifacts-island-title { opacity: 1; transition-delay: 560ms; }
  .is-artifacts-active .artifacts-categories { opacity: 1; transition-delay: 820ms; }
  .is-stories-active .story-categories { pointer-events: auto; }
  .is-artifacts-active .story-categories, .is-lights-active .story-categories, .is-artifacts-active .lights-categories, .is-stories-active .lights-categories { pointer-events: none; }
  .is-lights-active .lights-categories { pointer-events: auto; }
  .is-lights-active .story-island-ui { opacity: 0; pointer-events: none; transition-delay: 0ms, 0ms; }
  .is-lights-active .lights-island-ui { opacity: 1; pointer-events: auto; transform: translate3d(-28vw, -15vh, 0) scale(1.02); transition-delay: 0ms, 820ms; }
  .is-lights-active .island-01 { transform: translate3d(-14vw, 4vh, 0) scale(.82); opacity: .72; filter: blur(.7px) saturate(.78) contrast(.89) brightness(.89); }
  .is-artifacts-active .island-01 { transform: translate3d(-6vw, 3vh, 0) scale(.91); opacity: .8; filter: blur(.45px) saturate(.86) contrast(.94) brightness(.93); }
  .is-artifacts-active .island-03 { transform: translate3d(-11vw, 4vh, 0) scale(1); opacity: 1; filter: saturate(1.02) contrast(1.02) brightness(1.02); }
  .is-artifacts-active .island-02 { transform: translate3d(-8vw, -1vh, 0) scale(.88); opacity: .8; filter: blur(.5px) saturate(.84) contrast(.92) brightness(.92); }
  .is-lights-active .island-02 { transform: translate3d(-28vw, -15vh, 0) scale(1.02); opacity: 1; filter: saturate(1.02) contrast(1.02) brightness(1.02); }
  .is-lights-active .island-03 { transform: translate3d(-19vw, 3vh, 0) scale(.8); opacity: .76; filter: blur(.7px) saturate(.82) contrast(.9) brightness(.9); }
  .is-stories-active .lights-island-title { font-size: clamp(13px, 1.15vw, 18px); opacity: .48; }
  .is-artifacts-active .lights-island-title { font-size: clamp(13px, 1.15vw, 18px); opacity: .5; transform: translate3d(calc(-50% - 8vw), -1vh, 0); }
  .is-lights-active .lights-island-title { opacity: 1; transform: translate3d(calc(-50% - 28vw), -15vh, 0); }
  .is-artifacts-active .story-island-title { left: 28%; width: 30%; font-size: clamp(13px, 1.15vw, 18px); opacity: .58; transform: translate3d(calc(-50% - 6vw), 3vh, 0); }
  .is-lights-active .story-island-title { left: 28%; width: 28%; font-size: clamp(13px, 1.15vw, 18px); opacity: .44; transform: translate3d(calc(-50% - 10vw), 4vh, 0); }
  .is-stories-active .artifacts-island-title { font-size: clamp(13px, 1.15vw, 18px); opacity: .52; transform: translate3d(calc(-50% + 1vw), 2vh); }
  .is-artifacts-active .artifacts-island-title { opacity: 1; transform: translate3d(-50%, 5vh, 0); }
  .is-lights-active .artifacts-island-title { font-size: clamp(13px, 1.15vw, 18px); opacity: .46; transform: translate3d(calc(-50% - 19vw), 3vh, 0); }
  .island-asset { transition: filter 260ms ease; }
  .island:has(.island-hitbox:hover) .island-asset { filter: brightness(1.06) saturate(1.07) contrast(1.03); }
  .island { left: var(--desktop-left); top: var(--desktop-top); width: var(--desktop-width); height: var(--desktop-height); transform: translate3d(var(--desktop-translate-x, 0), var(--desktop-translate-y, 0), 0) scale(var(--desktop-scale, 1)); }
  .island-01 { --desktop-left: 9%; --desktop-top: 16%; --desktop-width: 38%; --desktop-height: 40%; --desktop-scale: 1; }
  .island-02 { --desktop-left: 72%; --desktop-top: 43%; --desktop-width: 27%; --desktop-height: 33%; --desktop-scale: .8; --island-opacity: .68; --island-filter: blur(1px) saturate(.72) contrast(.86) brightness(.87); }
  .island-03 { --desktop-left: 49%; --desktop-top: 10%; --desktop-width: 26%; --desktop-height: 33%; --desktop-scale: .86; --island-opacity: .78; --island-filter: blur(.6px) saturate(.8) contrast(.9) brightness(.9); }
  .island-04 { --desktop-left: 57%; --desktop-top: 29%; --desktop-width: 17%; --desktop-height: 25%; --desktop-scale: .9; }
  .island-05 { --desktop-left: 72%; --desktop-top: 42%; --desktop-width: 20%; --desktop-height: 26%; --desktop-scale: .9; }
  .island-06 { --desktop-left: 25%; --desktop-top: 48%; --desktop-width: 18%; --desktop-height: 23%; --desktop-scale: .9; }
  .island-07 { --desktop-left: 67%; --desktop-top: 58%; --desktop-width: 21%; --desktop-height: 27%; --desktop-scale: .9; }
  .front-atmosphere::before, .front-atmosphere::after { content: ""; position: absolute; pointer-events: none; transition: transform var(--island-travel-duration) cubic-bezier(.22,.72,.2,1), opacity 600ms ease; }
  .front-atmosphere::before { left: 42%; top: 31%; width: 34%; height: 35%; opacity: .18; background: linear-gradient(158deg, rgba(192, 190, 229, 0) 0%, rgba(237, 212, 231, .2) 34%, rgba(255, 222, 213, .34) 55%, rgba(175, 188, 224, .12) 75%, rgba(142, 164, 213, 0) 100%); filter: blur(25px); transform: skewY(-4deg) scale(1.08); }
  .front-atmosphere::after { left: 55%; top: 43%; width: 27%; height: 22%; opacity: .12; background: linear-gradient(12deg, rgba(164, 178, 220, 0), rgba(240, 211, 228, .28) 50%, rgba(159, 176, 218, 0)); filter: blur(22px); transform: skewY(3deg) scaleX(1.14); }
  .is-lights-active .front-atmosphere::before { transform: translateX(11vw) skewY(-4deg) scale(1.08); opacity: .14; }
  .is-lights-active .front-atmosphere::after { transform: translateX(9vw) skewY(3deg) scaleX(1.14); opacity: .1; }
}

/* Compact travel scene: one stable island frame between the controls and ship. */
@media (max-width: 1100px) {
  .island-world {
    /* A single realm frame: title slot, artwork, and category layer share
       one vertical reference between the controls and the ship. */
    --compact-safe-top: max(78px, calc(env(safe-area-inset-top) + 78px));
    --compact-safe-bottom: 66svh;
    --compact-title-slot: clamp(46px, 13vw, 56px);
    --compact-title-gap: clamp(20px, 5vw, 24px);
    --compact-realm-height: calc(36svh + var(--compact-title-slot) + var(--compact-title-gap));
    --compact-realm-top: calc((var(--compact-safe-top) + var(--compact-safe-bottom) - var(--compact-realm-height)) / 2);
    --compact-title-top: var(--compact-realm-top);
    --compact-island-top: calc(var(--compact-realm-top) + var(--compact-title-slot) + var(--compact-title-gap));
    --compact-locked-message-top: var(--compact-island-top);
    overflow: hidden;
  }

  .island-world .island[data-journey-state] {
    left: 3vw !important;
    top: var(--compact-island-top) !important;
    width: 94vw !important;
    height: 36svh !important;
    transform: translate3d(var(--phone-island-x, 0), 0, 0) scale(var(--phone-island-scale, 1)) !important;
    transform-origin: center;
    opacity: var(--phone-island-opacity, 0) !important;
    filter: none !important;
    transition: transform 520ms cubic-bezier(.22,.61,.24,1), opacity 260ms ease !important;
    will-change: transform, opacity;
  }
  .island-world .island[data-journey-state="hidden"] { pointer-events: none !important; }
  .island-world .island-asset { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }

  .story-island-title,
  .landscape-region-title,
  .archipelago-island-title,
  .creators-bay-island-title,
  .lights-island-title,
  .sources-island-title,
  .ink-waters-island-title,
  .flavor-marketplaces-island-title,
  .melody-cape-island-title,
  .gamers-frontiers-island-title,
  .wanderers-city-island-title,
  .isekari-portal-island-title {
    display: block !important;
    left: 3vw !important;
    top: var(--compact-title-top) !important;
    bottom: auto !important;
    width: 94vw !important;
    height: var(--compact-title-slot) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
    transform: translate3d(var(--phone-group-x, 0), 0, 0) scale(var(--phone-group-scale, 1)) !important;
    transform-origin: center;
    opacity: var(--phone-title-opacity, 0) !important;
    transition: transform 520ms cubic-bezier(.22,.61,.24,1), opacity 260ms ease !important;
    pointer-events: none !important;
    z-index: 8;
  }
  .artifacts-island-ui > .artifacts-island-title,
  .story-island-ui > h2 { display: none !important; }

  /* Direct title children inherit the artwork transform, so the title, asset,
     and its categories travel as one realm block. */
  .island-world .island > .world-island-title {
    left: 50% !important;
    top: auto !important;
    bottom: calc(100% + var(--compact-title-gap)) !important;
    width: 100% !important;
    max-width: 100%;
    height: var(--compact-title-slot) !important;
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
    transform: translateX(-50%) !important;
    transform-origin: center bottom;
    opacity: 1 !important;
  }

  .story-island-ui,
  .artifacts-island-ui,
  .archipelago-island-ui,
  .creators-bay-island-ui,
  .lights-island-ui,
  .sources-island-ui,
  .ink-waters-island-ui,
  .flavor-marketplaces-island-ui,
  .melody-cape-island-ui {
    left: 3vw !important;
    top: var(--compact-island-top) !important;
    width: 94vw !important;
    height: 36svh !important;
    opacity: var(--phone-ui-opacity, 0) !important;
    transform: translate3d(var(--phone-group-x, 0), 0, 0) scale(var(--phone-group-scale, 1)) !important;
    transform-origin: center;
    transition: transform 520ms cubic-bezier(.22,.61,.24,1), opacity 260ms ease !important;
    pointer-events: none !important;
    z-index: 8;
  }
  .story-categories,
  .artifacts-categories,
  .archipelago-categories,
  .creators-bay-categories,
  .lights-categories,
  .sources-categories,
  .ink-waters-categories,
  .flavor-marketplaces-categories,
  .melody-cape-categories {
    position: absolute !important;
    display: block;
    inset: 0;
    opacity: 1 !important;
  }
  .story-category {
    position: absolute !important;
    width: 70px !important;
    min-height: 62px;
    padding: 2px;
    transform: translate(-50%, -50%) !important;
    font-size: clamp(11px, 3vw, 12.5px);
    pointer-events: none;
  }
  .gamers-frontiers-island-ui,
  .wanderers-city-island-ui,
  .isekari-portal-island-ui {
    left: 3vw !important;
    top: var(--compact-locked-message-top) !important;
    width: 94vw !important;
    height: 36svh !important;
    opacity: var(--phone-ui-opacity, 0) !important;
    transform: translate3d(var(--phone-group-x, 0), 0, 0) scale(var(--phone-group-scale, 1)) !important;
    transform-origin: center;
    transition: transform 520ms cubic-bezier(.22,.61,.24,1), opacity 260ms ease !important;
    pointer-events: none !important;
  }
  .gamers-frontiers-island-ui p,
  .wanderers-city-island-ui p,
  .isekari-portal-island-ui p { margin-top: 58%; padding: 12px 14px 8px; }
}
@media (min-width: 700px) and (max-width: 1100px) {
  .island-world { --compact-safe-top: max(88px, calc(env(safe-area-inset-top) + 88px)); }
}
@media (min-width: 700px) and (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .ship-navigation { width: min(76vw, 900px); --seal-inner-offset: 4vw; }
  .ship-nav-item { font-size: 13.5px; }
  .story-category { grid-template-rows: 42px auto; width: 82px; min-height: 66px; font-size: 13px; }
  
  
  .story-category-manga { left: 36%; top: 25%; }.story-category-manhwa { left: 64%; top: 25%; }.story-category-manhua { left: 82%; top: 39%; }.story-category-webtoony { left: 18%; top: 67%; }.story-category-novel { left: 36%; top: 79%; }.story-category-creators { left: 64%; top: 79%; }.story-category-discover { left: 82%; top: 67%; }
  .artifacts-island-ui { left: 49%; top: 10%; width: 26%; height: 33%; }
  .lights-island-ui { left: 72%; top: 43%; width: 27%; height: 33%; }
  .lights-category-kdrama { left: 21%; top: 37%; }.lights-category-jdrama { left: 50%; top: 23%; }.lights-category-cdrama { left: 79%; top: 37%; }.lights-category-films { left: 24%; top: 60%; }.lights-category-actors { left: 50%; top: 69%; }.lights-category-discover { left: 76%; top: 60%; }
  .is-artifacts-active .island-01 { transform: translate3d(-6vw, 3vh, 0) scale(.91); }
  .is-artifacts-active .island-03 { transform: translate3d(-9vw, 4vh, 0) scale(.99); }
  .is-artifacts-active .artifacts-island-ui { transform: translate3d(-9vw, 4vh, 0) scale(.99); }
  .is-artifacts-active .island-02 { transform: translate3d(-8vw, -1vh, 0) scale(.88); }
  .is-artifacts-active .lights-island-title { transform: translate3d(calc(-50% - 8vw), -1vh, 0); }
  .is-artifacts-active .story-island-title { transform: translate3d(calc(-50% - 6vw), 3vh, 0); }
  .is-lights-active .story-island-title { left: 28%; width: 28%; font-size: clamp(13px, 1.35vw, 17px); transform: translate3d(calc(-50% - 11vw), 3vh, 0); }
  .is-artifacts-active .artifacts-island-title { transform: translate3d(-50%, 5vh, 0); }
  .is-lights-active .artifacts-island-title { transform: translate3d(calc(-50% - 19vw), 3vh, 0); }
  .is-lights-active .lights-island-ui { transform: translate3d(-25vw, -13vh, 0) scale(1.01); }
  .is-lights-active .island-01 { transform: translate3d(-14vw, 3vh, 0) scale(.82); }
  .is-lights-active .island-03 { transform: translate3d(-19vw, 3vh, 0) scale(.8); }
  .is-lights-active .island-02 { transform: translate3d(-25vw, -13vh, 0) scale(1.01); }
  .is-lights-active .lights-island-title { transform: translate3d(calc(-50% - 25vw), -13vh, 0); }
  .island-02 { --desktop-left: 72%; --desktop-top: 43%; --desktop-width: 27%; --desktop-height: 33%; --desktop-scale: .8; }
}
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .island-08 { --desktop-left: 59%; --desktop-top: 25%; --desktop-width: 25%; --desktop-height: 31%; --desktop-scale: .76; --island-opacity: .72; --island-filter: blur(.8px) saturate(.78) contrast(.88) brightness(.9); }
  .island-02 { --desktop-left: 78%; --desktop-top: 43%; --desktop-width: 23%; --desktop-height: 31%; --desktop-scale: .8; }
  .lights-island-ui { left: 78%; top: 43%; width: 23%; height: 31%; }
  .lights-island-title { left: 89.5%; top: 37%; width: 26%; }
  .archipelago-island-title { left: 71.5%; top: 20%; width: 30%; font-size: clamp(16px, 1.5vw, 24px); letter-spacing: .12em; opacity: .52; transform: translateX(-50%); transition: transform var(--island-travel-duration) cubic-bezier(.22,.72,.2,1), opacity 460ms ease, font-size 460ms ease; }
  .island-08 .island-hitbox { cursor: pointer; }
  .is-stories-active .archipelago-island-title { font-size: clamp(13px, 1.15vw, 18px); opacity: .42; transform: translate3d(calc(-50% - 1vw), 1vh, 0); }
  .is-artifacts-active .archipelago-island-title { font-size: clamp(13px, 1.15vw, 18px); opacity: .54; transform: translate3d(calc(-50% - 6vw), 4vh, 0); }
  .is-archipelago-active .archipelago-island-title { opacity: 1; transform: translate3d(calc(-50% - 19vw), -1vh, 0); }
  .is-lights-active .archipelago-island-title { font-size: clamp(13px, 1.15vw, 18px); opacity: .46; transform: translate3d(calc(-50% - 17vw), 2vh, 0); }
  .is-stories-active .island-08 { transform: translate3d(-1vw, 1vh, 0) scale(.76); opacity: .7; filter: blur(.8px) saturate(.78) contrast(.88) brightness(.9); }
  .is-artifacts-active .island-08 { transform: translate3d(-6vw, 4vh, 0) scale(.84); opacity: .8; filter: blur(.45px) saturate(.86) contrast(.94) brightness(.93); }
  .is-archipelago-active .island-08 { transform: translate3d(-19vw, -1vh, 0) scale(1.02); opacity: 1; filter: saturate(1.02) contrast(1.02) brightness(1.02); }
  .is-lights-active .island-08 { transform: translate3d(-17vw, 2vh, 0) scale(.8); opacity: .74; filter: blur(.65px) saturate(.8) contrast(.89) brightness(.9); }
  .is-archipelago-active .island-01 { transform: translate3d(-10vw, 4vh, 0) scale(.85); opacity: .75; filter: blur(.65px) saturate(.8) contrast(.9) brightness(.9); }
  .is-archipelago-active .island-03 { transform: translate3d(-14vw, 3vh, 0) scale(.82); opacity: .77; filter: blur(.6px) saturate(.82) contrast(.91) brightness(.91); }
  .is-archipelago-active .island-02 { transform: translate3d(-18vw, -5vh, 0) scale(.85); opacity: .78; filter: blur(.55px) saturate(.83) contrast(.91) brightness(.91); }
  .is-lights-active .island-02 { transform: translate3d(-32vw, -15vh, 0) scale(1.02); }
  .is-lights-active .lights-island-ui { transform: translate3d(-32vw, -15vh, 0) scale(1.02); }
  .is-lights-active .lights-island-title { transform: translate3d(calc(-50% - 32vw), -15vh, 0); }
  .is-archipelago-active .story-island-ui, .is-archipelago-active .artifacts-island-ui, .is-archipelago-active .lights-island-ui { opacity: 0; pointer-events: none; }
  .is-archipelago-active .story-categories, .is-archipelago-active .artifacts-categories, .is-archipelago-active .lights-categories { pointer-events: none; }
  .is-archipelago-active .story-island-title { left: 28%; width: 28%; font-size: clamp(13px, 1.15vw, 18px); opacity: .48; transform: translate3d(calc(-50% - 10vw), 4vh, 0); }
  .is-archipelago-active .artifacts-island-title { font-size: clamp(13px, 1.15vw, 18px); opacity: .5; transform: translate3d(calc(-50% - 14vw), 3vh, 0); }
  .is-archipelago-active .lights-island-title { font-size: clamp(13px, 1.15vw, 18px); opacity: .48; transform: translate3d(calc(-50% - 18vw), -5vh, 0); }
  .is-archipelago-active .front-atmosphere::before { transform: translateX(5vw) skewY(-4deg) scale(1.08); opacity: .16; }
  .is-archipelago-active .front-atmosphere::after { transform: translateX(4vw) skewY(3deg) scaleX(1.14); opacity: .11; }
}
@media (min-width: 700px) and (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .island-08 { --desktop-left: 58%; --desktop-top: 26%; --desktop-width: 27%; --desktop-height: 31%; }
  .island-02 { --desktop-left: 77%; --desktop-top: 43%; --desktop-width: 24%; --desktop-height: 31%; }
  .lights-island-ui { left: 77%; top: 43%; width: 24%; height: 31%; }
  .lights-island-title { left: 89%; }
  .is-archipelago-active .island-08 { transform: translate3d(-17vw, -1vh, 0) scale(1.01); }
  .is-archipelago-active .archipelago-island-title { transform: translate3d(calc(-50% - 17vw), -1vh, 0); }
  .is-lights-active .island-02, .is-lights-active .lights-island-ui { transform: translate3d(-29vw, -13vh, 0) scale(1.01); }
  .is-lights-active .lights-island-title { transform: translate3d(calc(-50% - 29vw), -13vh, 0); }
}
/* Desktop / landscape map camera: every active state owns a complete, spaced composition. */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .island-01 { --desktop-left: 8%; --desktop-top: 18%; --desktop-width: 36%; --desktop-height: 38%; --desktop-scale: .82; }
  .island-03 { --desktop-left: 49%; --desktop-top: 8%; --desktop-width: 24%; --desktop-height: 30%; --desktop-scale: .7; --island-opacity: .78; --island-filter: blur(.7px) saturate(.78) contrast(.88) brightness(.9); }
  .island-08 { --desktop-left: 68%; --desktop-top: 29%; --desktop-width: 25%; --desktop-height: 29%; --desktop-scale: .62; --island-opacity: .68; --island-filter: blur(1px) saturate(.74) contrast(.85) brightness(.88); }
  .island-02 { --desktop-left: 82%; --desktop-top: 47%; --desktop-width: 19%; --desktop-height: 25%; --desktop-scale: .6; --island-opacity: .62; --island-filter: blur(1.1px) saturate(.7) contrast(.84) brightness(.87); }

  .story-island-ui { left: 8%; top: 18%; width: 36%; height: 38%; }
  .artifacts-island-ui { left: 49%; top: 8%; width: 24%; height: 30%; }
  .lights-island-ui { left: 82%; top: 47%; width: 19%; height: 25%; }
  .story-island-title { left: 26%; top: 15%; width: 34%; }
  .artifacts-island-title { top: -8.5%; left: 50%; width: 118%; }
  .archipelago-island-title { left: 80.5%; top: 29%; width: 30%; }
  .lights-island-title { left: 83%; top: 41%; width: 24%; }
  .story-island-title, .artifacts-island-title, .archipelago-island-title, .lights-island-title { z-index: 7; }
  .story-island-ui, .artifacts-island-ui, .lights-island-ui { z-index: 8; }

  .island-01, .island-03, .island-08, .island-02 { transition: transform var(--island-travel-duration) cubic-bezier(.22,.72,.2,1), opacity 520ms ease, filter 520ms ease, z-index 0ms linear 1500ms; }
  .is-stories-active .island-01 { z-index: 5; transform: translate3d(0, 0, 0) scale(1); opacity: 1; filter: saturate(1.02) contrast(1.02) brightness(1.02); }
  .is-stories-active .island-03 { z-index: 3; transform: translate3d(0, 0, 0) scale(.7); opacity: .78; filter: blur(.7px) saturate(.78) contrast(.88) brightness(.9); }
  .is-stories-active .island-08 { z-index: 2; transform: translate3d(0, 0, 0) scale(.62); opacity: .68; filter: blur(1px) saturate(.74) contrast(.85) brightness(.88); }
  .is-stories-active .island-02 { z-index: 1; transform: translate3d(0, 0, 0) scale(.6); opacity: .62; filter: blur(1.1px) saturate(.7) contrast(.84) brightness(.87); }

  .is-artifacts-active .island-01 { z-index: 2; transform: translate3d(-4vw, 3vh, 0) scale(.68); opacity: .67; filter: blur(1px) saturate(.74) contrast(.85) brightness(.88); }
  .is-artifacts-active .island-03 { z-index: 5; transform: translate3d(-4vw, 1vh, 0) scale(1); opacity: 1; filter: saturate(1.02) contrast(1.02) brightness(1.02); }
  .is-artifacts-active .island-08 { z-index: 2; transform: translate3d(9vw, 9vh, 0) scale(.46); opacity: .58; filter: blur(1.15px) saturate(.7) contrast(.83) brightness(.87); }
  .is-artifacts-active .island-02 { z-index: 1; transform: translate3d(6vw, 7vh, 0) scale(.47); opacity: .55; filter: blur(1.25px) saturate(.67) contrast(.81) brightness(.85); }

  .is-archipelago-active .island-01 { z-index: 1; transform: translate3d(-12vw, 5vh, 0) scale(.58); opacity: .56; filter: blur(1.25px) saturate(.68) contrast(.81) brightness(.85); }
  .is-archipelago-active .island-03 { z-index: 3; transform: translate3d(-12vw, -2vh, 0) scale(.6); opacity: .65; filter: blur(1px) saturate(.72) contrast(.84) brightness(.87); }
  .is-archipelago-active .island-08 { z-index: 5; transform: translate3d(-12vw, 0, 0) scale(1); opacity: 1; filter: saturate(1.02) contrast(1.02) brightness(1.02); }
  .is-archipelago-active .island-02 { z-index: 2; transform: translate3d(6vw, 7vh, 0) scale(.48); opacity: .56; filter: blur(1.2px) saturate(.68) contrast(.82) brightness(.86); }

  .is-lights-active .island-01 { z-index: 1; transform: translate3d(-18vw, 5vh, 0) scale(.52); opacity: .5; filter: blur(1.4px) saturate(.65) contrast(.8) brightness(.84); }
  .is-lights-active .island-03 { z-index: 2; transform: translate3d(-15vw, -2vh, 0) scale(.54); opacity: .57; filter: blur(1.2px) saturate(.68) contrast(.82) brightness(.86); }
  .is-lights-active .island-08 { z-index: 3; transform: translate3d(-24vw, -9vh, 0) scale(.45); opacity: .56; filter: blur(1.2px) saturate(.68) contrast(.82) brightness(.86); }
  .is-lights-active .island-02 { z-index: 5; transform: translate3d(-12vw, -6vh, 0) scale(1); opacity: 1; filter: saturate(1.02) contrast(1.02) brightness(1.02); }

  .is-stories-active .story-island-title { font-size: clamp(16px, 1.5vw, 24px); opacity: 1; transform: translateX(-50%); }
  .is-artifacts-active .story-island-title { font-size: clamp(13px, 1.1vw, 17px); opacity: .48; transform: translate3d(calc(-50% - 4vw), 3vh, 0); }
  .is-archipelago-active .story-island-title { font-size: clamp(13px, 1.1vw, 17px); opacity: .4; transform: translate3d(calc(-50% - 12vw), 5vh, 0); }
  .is-lights-active .story-island-title { font-size: clamp(13px, 1.1vw, 17px); opacity: .36; transform: translate3d(calc(-50% - 18vw), 5vh, 0); }

  .is-stories-active .artifacts-island-title { font-size: clamp(13px, 1.1vw, 17px); opacity: .52; transform: translateX(-50%); }
  .is-artifacts-active .artifacts-island-title { font-size: clamp(16px, 1.5vw, 24px); opacity: 1; transform: translateX(-50%); }
  .is-archipelago-active .artifacts-island-title { font-size: clamp(13px, 1.1vw, 17px); opacity: .48; transform: translate3d(calc(-50% - 12vw), 2vh, 0); }
  .is-lights-active .artifacts-island-title { font-size: clamp(13px, 1.1vw, 17px); opacity: .4; transform: translate3d(calc(-50% - 15vw), -2vh, 0); }

  .is-stories-active .archipelago-island-title { font-size: clamp(13px, 1.1vw, 17px); opacity: .42; transform: translateX(-50%); }
  .is-artifacts-active .archipelago-island-title { font-size: clamp(13px, 1.1vw, 17px); opacity: .44; transform: translate3d(calc(-50% + 9vw), 9vh, 0); }
  .is-archipelago-active .archipelago-island-title { font-size: clamp(16px, 1.5vw, 24px); opacity: 1; transform: translate3d(calc(-50% - 12vw), -10vh, 0); }
  .is-lights-active .archipelago-island-title { font-size: clamp(13px, 1.1vw, 17px); opacity: .46; transform: translate3d(calc(-50% - 24vw), -15vh, 0); }

  .is-stories-active .lights-island-title { font-size: clamp(13px, 1.1vw, 17px); opacity: .38; transform: translateX(-50%); }
  .is-artifacts-active .lights-island-title { font-size: clamp(13px, 1.1vw, 17px); opacity: .4; transform: translate3d(calc(-50% + 4vw), 2vh, 0); }
  .is-archipelago-active .lights-island-title { font-size: clamp(13px, 1.1vw, 17px); opacity: .42; transform: translate3d(calc(-50% + 6vw), 7vh, 0); }
  .is-lights-active .lights-island-title { font-size: clamp(16px, 1.5vw, 24px); opacity: 1; transform: translate3d(calc(-50% - 12vw), -6vh, 0); }

  .is-stories-active .story-island-ui { opacity: 1; pointer-events: auto; transform: none; }
  .is-artifacts-active .artifacts-island-ui { opacity: 1; pointer-events: auto; transform: translate3d(-4vw, 1vh, 0) scale(1); }
  .is-lights-active .lights-island-ui { opacity: 1; pointer-events: auto; transform: translate3d(-12vw, -6vh, 0) scale(1); }
  .is-artifacts-active .story-island-ui, .is-archipelago-active .story-island-ui, .is-lights-active .story-island-ui,
  .is-stories-active .artifacts-island-ui, .is-archipelago-active .artifacts-island-ui, .is-lights-active .artifacts-island-ui,
  .is-stories-active .lights-island-ui, .is-artifacts-active .lights-island-ui, .is-archipelago-active .lights-island-ui { opacity: 0; pointer-events: none; }
  .is-stories-active .story-categories, .is-artifacts-active .artifacts-categories, .is-lights-active .lights-categories { pointer-events: auto; }
  .is-artifacts-active .story-categories, .is-archipelago-active .story-categories, .is-lights-active .story-categories,
  .is-stories-active .artifacts-categories, .is-archipelago-active .artifacts-categories, .is-lights-active .artifacts-categories,
  .is-stories-active .lights-categories, .is-artifacts-active .lights-categories, .is-archipelago-active .lights-categories { pointer-events: none; }
}
@media (min-width: 1920px) and (min-aspect-ratio: 1/1) {
  .ship-nav-item { font-size: 16px; }
}
@media (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .ship-navigation { width: min(70vw, 1250px); --seal-inner-offset: 4vw; }
  .ship-navigation::before { inset: -18px -40px; filter: blur(20px); opacity: .72; }
  .ship-nav-item { font-size: clamp(15px, 1.1vw, 17px); color: #fff7e4; text-shadow: 0 1px 2px rgba(15, 10, 12, .92), 0 2px 8px rgba(5, 15, 34, .8); }
  .ship-nav-seal { width: max(112px, 7vw); }
  .story-category { grid-template-rows: clamp(42px, 2.45vw, 47px) auto; width: 96px; min-height: 76px; gap: 0; color: #fff9e9; font-size: clamp(12px, .9vw, 14px); text-shadow: 0 1px 2px rgba(15, 10, 12, .97), 0 2px 9px rgba(5, 15, 34, .9); }
  
  .story-category-manga { left: 36%; top: 23%; }.story-category-manhwa { left: 64%; top: 23%; }.story-category-manhua { left: 83%; top: 38%; }.story-category-webtoony { left: 17%; top: 66%; }.story-category-novel { left: 36%; top: 79%; }.story-category-creators { left: 64%; top: 79%; }.story-category-discover { left: 83%; top: 66%; }
}

@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .melody-cape-island-ui { left:33% !important; top:24% !important; width:34% !important; height:42% !important; opacity:0 !important; pointer-events:none !important; transform:translate3d(0,0,0) scale(1) !important; z-index:7; transition:opacity 220ms ease !important; }
  .melody-cape-island-ui[data-journey-state="active"] { opacity:1 !important; pointer-events:auto !important; }
  .melody-cape-island-title { left:50% !important; top:15.5% !important; width:42% !important; transform:translateX(-50%) !important; opacity:0; z-index:8; font-size:clamp(16px,1.5vw,24px) !important; transition:left 1700ms cubic-bezier(.22,.61,.24,1),top 1700ms cubic-bezier(.22,.61,.24,1),width 1700ms cubic-bezier(.22,.61,.24,1),font-size 420ms ease,opacity 360ms ease !important; }
  .melody-cape-island-title[data-journey-state="active"] { opacity:1; }.melody-cape-island-title[data-journey-state="previous"]{left:15.5% !important;top:29% !important;width:18% !important;opacity:.72;font-size:clamp(12px,1vw,16px) !important;}.melody-cape-island-title[data-journey-state="next"]{left:84.5% !important;top:29% !important;width:18% !important;opacity:.72;font-size:clamp(12px,1vw,16px) !important;}.melody-cape-island-title[data-journey-state="hidden"]{opacity:0 !important;}
  .is-island-traveling .melody-cape-island-ui { opacity:0 !important; pointer-events:none !important; }
}
@media (min-width: 700px) and (max-aspect-ratio: 1/1) {
  .gate-screen .approved-art { object-position: center 28%; }
}
.gate-ui { isolation: isolate; }
.gate-ui::before { content: ""; position: absolute; inset: -42px -64px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(3, 9, 23, .94) 0%, rgba(3, 9, 23, .82) 42%, rgba(3, 9, 23, .42) 68%, rgba(3, 9, 23, 0) 100%); filter: blur(5px); opacity: .72; }
@media (max-width: 699px) {
  .gate-ui { top: 39%; width: min(82vw, 350px); }
  .gate-ui h1 { font-size: clamp(34px, 10.6vw, 46px); letter-spacing: .17em; }
  .gate-ui p { margin-top: 11px; font-size: clamp(14px, 4.1vw, 18px); letter-spacing: .06em; }
  .gate-enter { min-height: 48px; margin-top: 23px; padding: 0 22px; font-size: clamp(14px, 4.2vw, 17px); }
  .gate-screen.is-entering .art-picture { transform: scale(1.18); }
  .ship-art { left: auto; right: 0; bottom: 0; width: 100vw; height: auto; transform: none; }
  .ship-art img { width: 100%; height: auto; }
  .top-ui { top: max(10px, env(safe-area-inset-top)); }
  .map-brand { gap: 1px; font-size: 11px; letter-spacing: .2em; }
  .map-brand img { width: 22px; height: 22px; }
  .map-actions { right: max(7px, env(safe-area-inset-right)); gap: 0; }
  .map-actions button { width: 42px; height: 42px; }
  .map-actions .map-global-button { min-width: 50px; padding: 0 4px; font-size: 10.5px; letter-spacing: .11em; transform: translateY(3px); }
  .map-actions svg { width: 22px; height: 22px; }
  .ship-navigation { bottom: max(2px, env(safe-area-inset-bottom)); width: 100%; min-height: 74px; padding: 6px 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .ship-nav-item { min-height: 60px; padding: 2px 2px 5px; border-right-color: transparent; font-size: clamp(10.5px, 2.9vw, 12px); }
  .ship-nav-seal { width: 88px; }
  .ship-nav-item span { max-width: 64px; }
  .lights-island-title { opacity: var(--lights-title-opacity, 0); }
}
@media (max-width: 699px) and (orientation: portrait) {
  .gate-ui { top: calc(39% - clamp(70px, 12svh, 90px)); }
}
@media (min-width: 700px) and (max-aspect-ratio: 1/1) {
  .ship-nav-item { min-height: 64px; font-size: 13px; }
  .ship-navigation { --seal-inner-offset: 8vw; }
  .ship-nav-item span { max-width: 112px; }
  .ship-nav-seal { width: 96px; }
}
@media (max-width: 1100px) {
  .map-screen { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .map-screen::-webkit-scrollbar { display: none; }
  .map-scene { position: sticky; inset: auto; top: 0; width: 100%; height: 100svh; }
  .map-journey-spacer { position: relative; height: 540svh; pointer-events: none; }
  .front-atmosphere::before, .front-atmosphere::after { content: none; }
}
@media (min-width: 700px) and (max-aspect-ratio: 1/1) {
  .map-actions .map-global-button { min-width: 56px; padding: 0 6px; font-size: 11px; letter-spacing: .12em; transform: translateY(2px); }
  .map-journey-spacer { height: 540svh; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 699px), (prefers-reduced-motion: reduce) and (max-aspect-ratio: 1/1) {
  .island { will-change: auto; }
  .island-02 { --mobile-top: 252%; --mobile-scale: .86; --island-opacity: 1; --island-filter: none; }
  .island-08 { --mobile-top: 132%; --mobile-scale: .9; --island-opacity: 1; --island-filter: none; }
  .island-09 { --mobile-top: 192%; --mobile-scale: .9; --island-opacity: 1; --island-filter: none; }
  .island-10 { --mobile-top: 312%; --mobile-scale: .9; --island-opacity: 1; --island-filter: none; }
  .island-11 { --mobile-top: 372%; --mobile-scale: .9; --island-opacity: 1; --island-filter: none; }
  .front-atmosphere::before, .front-atmosphere::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gate-screen .art-picture, .gate-transition-light, .gate-ui, .gate-enter { transition-duration: 1ms; }
  .world-transition-atmosphere { transition-duration: 160ms; }
  .gate-ui h1, .gate-ui p, .gate-enter { animation: gate-reveal 1ms linear forwards; transform: none; }
  .gate-ui h1::after { animation: none; }
  .gate-ui h1 { animation-delay: 0ms; }
  .gate-ui p { animation-delay: 80ms; }
  .gate-enter { animation-delay: 160ms; }
  .gate-enter:hover, .gate-enter:active { transform: none; }
  .gate-screen.is-entering .art-picture { transform: none; }
  .gate-screen.is-entering .gate-transition-light { opacity: .1; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .island, .story-island-ui, .artifacts-island-ui, .lights-island-ui, .artifacts-island-title, .artifacts-categories, .archipelago-island-title, .lights-island-title { transition-duration: 160ms !important; transition-delay: 0ms !important; }
}

/* Desktop / landscape journey model — implemented, awaiting visual approval. */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .isekari { --island-travel-duration: 1700ms; }
  .island[data-journey-state] {
    left: 35% !important;
    top: 18% !important;
    width: 30% !important;
    height: 38% !important;
    z-index: 3;
    transition: left 1700ms cubic-bezier(.22,.61,.24,1), top 1700ms cubic-bezier(.22,.61,.24,1), width 1700ms cubic-bezier(.22,.61,.24,1), height 1700ms cubic-bezier(.22,.61,.24,1), transform 1700ms cubic-bezier(.22,.61,.24,1), opacity 420ms ease, filter 520ms ease !important;
  }
  .island[data-journey-state="active"] { transform: translate3d(0, 0, 0) scale(1) !important; opacity: 1 !important; filter: saturate(1.02) contrast(1.02) brightness(1.02) !important; z-index: 5; pointer-events: auto; }
  .island[data-journey-state="previous"] { left: 5% !important; top: 30% !important; width: 20% !important; height: 25% !important; transform: translate3d(0, 0, 0) scale(.72) !important; opacity: .7 !important; filter: blur(1px) saturate(.76) contrast(.86) brightness(.88) !important; z-index: 2; pointer-events: auto; }
  .island[data-journey-state="next"] { left: 75% !important; top: 30% !important; width: 20% !important; height: 25% !important; transform: translate3d(0, 0, 0) scale(.72) !important; opacity: .7 !important; filter: blur(1px) saturate(.76) contrast(.86) brightness(.88) !important; z-index: 2; pointer-events: auto; }
  .island[data-journey-state="hidden"] { transform: translate3d(0, 7vh, 0) scale(.38) !important; opacity: 0 !important; filter: blur(2px) saturate(.62) contrast(.75) brightness(.8) !important; z-index: 1; pointer-events: none; }
  .island-08[data-journey-state="active"] { width: 35% !important; height: 40% !important; left: 32.5% !important; }
  .island-08[data-journey-state="previous"], .island-08[data-journey-state="next"] { width: 18% !important; height: 23% !important; }
  .island--interactive .island-hitbox { cursor: pointer; }

  .story-island-ui, .artifacts-island-ui, .creators-bay-island-ui, .lights-island-ui, .sources-island-ui, .ink-waters-island-ui {
    left: 35% !important; top: 18% !important; width: 30% !important; height: 38% !important;
    z-index: 7; opacity: 0 !important; pointer-events: none !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    transition: left 900ms cubic-bezier(.22,.72,.2,1), top 900ms cubic-bezier(.22,.72,.2,1), width 900ms cubic-bezier(.22,.72,.2,1), height 900ms cubic-bezier(.22,.72,.2,1), opacity 220ms ease 690ms !important;
  }
  .story-island-ui[data-journey-state="active"], .artifacts-island-ui[data-journey-state="active"], .creators-bay-island-ui[data-journey-state="active"], .lights-island-ui[data-journey-state="active"], .sources-island-ui[data-journey-state="active"], .ink-waters-island-ui[data-journey-state="active"] { opacity: 1 !important; pointer-events: auto !important; }
  .city-lights-ui[data-journey-state="active"] { z-index: 9; }
  .artifacts-island-ui > .artifacts-island-title { display: none; }

  .story-island-title, .landscape-region-title, .archipelago-island-title, .creators-bay-island-title, .lights-island-title, .sources-island-title, .ink-waters-island-title {
    position: absolute; left: 50% !important; top: 10% !important; width: 42% !important;
    margin: 0; transform: translateX(-50%) !important; opacity: 0; z-index: 8;
    font-size: clamp(16px, 1.5vw, 24px) !important; letter-spacing: .12em !important;
    transition: left 900ms cubic-bezier(.22,.72,.2,1), top 900ms cubic-bezier(.22,.72,.2,1), font-size 420ms ease, opacity 360ms ease !important;
    pointer-events: none;
  }
  .story-island-title[data-journey-state="active"], .landscape-region-title[data-journey-state="active"], .archipelago-island-title[data-journey-state="active"], .creators-bay-island-title[data-journey-state="active"], .lights-island-title[data-journey-state="active"], .sources-island-title[data-journey-state="active"], .ink-waters-island-title[data-journey-state="active"] { opacity: 1; }
  .story-island-title[data-journey-state="previous"], .landscape-region-title[data-journey-state="previous"], .archipelago-island-title[data-journey-state="previous"], .creators-bay-island-title[data-journey-state="previous"], .lights-island-title[data-journey-state="previous"], .sources-island-title[data-journey-state="previous"], .ink-waters-island-title[data-journey-state="previous"] { left: 15% !important; top: 22% !important; width: 22% !important; opacity: .62; font-size: clamp(12px, 1vw, 16px) !important; }
  .story-island-title[data-journey-state="next"], .landscape-region-title[data-journey-state="next"], .archipelago-island-title[data-journey-state="next"], .creators-bay-island-title[data-journey-state="next"], .lights-island-title[data-journey-state="next"], .sources-island-title[data-journey-state="next"], .ink-waters-island-title[data-journey-state="next"] { left: 85% !important; top: 22% !important; width: 22% !important; opacity: .62; font-size: clamp(12px, 1vw, 16px) !important; }
  .story-island-title[data-journey-state="hidden"], .landscape-region-title[data-journey-state="hidden"], .archipelago-island-title[data-journey-state="hidden"], .creators-bay-island-title[data-journey-state="hidden"], .lights-island-title[data-journey-state="hidden"], .sources-island-title[data-journey-state="hidden"], .ink-waters-island-title[data-journey-state="hidden"] { opacity: 0 !important; }

  .journey-navigation { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
  .journey-arrow { position: absolute; top: 43%; width: 76px; height: 96px; border: 0; background: transparent; color: #f7d59a; font: 400 clamp(38px, 4vw, 58px)/1 "Cormorant Garamond", Georgia, serif; text-shadow: 0 1px 2px rgba(10, 12, 30, .9), 0 0 14px rgba(245, 193, 105, .28); cursor: pointer; pointer-events: auto; opacity: .82; transition: color 260ms ease, text-shadow 260ms ease, opacity 260ms ease; }
  .journey-arrow::after { content: ""; position: absolute; inset: 20px 25px; border-top: 1px solid rgba(247, 213, 154, .55); border-bottom: 1px solid rgba(247, 213, 154, .3); opacity: .55; }
  .journey-arrow-prev { left: 2%; }.journey-arrow-next { right: 2%; }
  .journey-arrow:disabled { opacity: .18; cursor: default; }
  .journey-arrow:not(:disabled):hover { color: #fff1c9; text-shadow: 0 1px 2px rgba(10, 12, 30, .9), 0 0 20px rgba(255, 210, 126, .52); }

  .full-world-map { position: absolute; inset: 0; z-index: 6; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 92px 10vw 150px; background: linear-gradient(120deg, rgba(5, 16, 38, .78), rgba(17, 35, 69, .42), rgba(5, 16, 38, .78)); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 360ms ease; text-align: center; color: #fff1d0; font-family: "Cormorant Garamond", Georgia, serif; }
.full-map-open .full-world-map { opacity: 1; pointer-events: auto; }
  .full-world-map h2 { margin: 0; font-size: clamp(20px, 2vw, 32px); letter-spacing: .16em; text-shadow: 0 2px 9px rgba(4, 11, 28, .9); }
  .full-map-note, .full-map-future { margin: 0; font-size: 14px; letter-spacing: .08em; text-shadow: 0 1px 4px rgba(4, 11, 28, .9); }
  .full-map-future { opacity: .74; }
  .full-map-future { margin-top: clamp(24px, 2vw, 36px); margin-bottom: clamp(16px, 1.5vw, 24px); }
  .full-map-close { position: absolute; top: 92px; right: 7vw; border: 1px solid rgba(244, 203, 132, .72); border-radius: 999px; padding: 10px 18px; background: rgba(7, 17, 35, .66); color: #ffedc9; font: 600 14px "Cormorant Garamond", Georgia, serif; letter-spacing: .06em; box-shadow: 0 0 14px rgba(250, 201, 111, .16); cursor: pointer; }
  .full-map-regions, .full-map-locked-regions { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); width: min(88vw, 1320px); gap: clamp(18px, 2vw, 32px); align-items: end; }
  .full-map-regions button, .full-map-locked-regions button { display: grid; gap: 8px; place-items: center; border: 0; background: transparent; color: #fff2d2; font: 600 clamp(11px, .95vw, 14px)/1.2 "Cormorant Garamond", Georgia, serif; letter-spacing: .08em; text-shadow: 0 2px 8px rgba(4, 11, 28, .92); cursor: pointer; }
  .full-map-regions img, .full-map-locked-regions img { width: 100%; height: 150px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(3, 11, 28, .48)); transition: filter 220ms ease, transform 220ms ease; }
  .full-map-regions button:hover img, .full-map-locked-regions button:hover img { transform: translateY(-3px); filter: drop-shadow(0 8px 17px rgba(255, 213, 134, .35)); }
  .full-map-regions button.is-locked img, .full-map-locked-regions button.is-locked img { opacity: .78; }
  .full-map-open .journey-navigation { opacity: 0; pointer-events: none; }
}

@media (min-width: 700px) and (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .full-map-regions, .full-map-locked-regions { grid-template-columns: repeat(3, minmax(150px, 1fr)); width: min(82vw, 760px); gap: 18px 24px; }
}

@media (max-width: 699px), (max-aspect-ratio: 1/1) {
  .landscape-region-title, .journey-navigation { display: none !important; }
  .full-map-open .map-screen { z-index: 8; }
  .full-world-map { position: fixed; inset: 0; z-index: 6; display: grid; align-content: center; justify-items: center; gap: 10px; padding: max(76px, env(safe-area-inset-top)) 8vw max(100px, env(safe-area-inset-bottom)); background: linear-gradient(120deg, rgba(5, 16, 38, .82), rgba(17, 35, 69, .5), rgba(5, 16, 38, .82)); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 360ms ease; text-align: center; color: #fff1d0; font-family: "Cormorant Garamond", Georgia, serif; }
  .full-map-open .full-world-map { opacity: 1; pointer-events: auto; }
  .full-world-map h2 { margin: 0; font-size: clamp(19px, 5.4vw, 28px); letter-spacing: .14em; text-shadow: 0 2px 9px rgba(4, 11, 28, .9); }
  .full-map-note, .full-map-future { margin: 0; font-size: 12px; letter-spacing: .07em; text-shadow: 0 1px 4px rgba(4, 11, 28, .9); }
  .full-map-future { opacity: .74; }
  .full-map-future { margin-top: clamp(28px, 6vw, 40px); margin-bottom: clamp(18px, 4vw, 28px); }
  .full-map-close { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(5vw, env(safe-area-inset-right)); border: 1px solid rgba(244, 203, 132, .72); border-radius: 999px; padding: 9px 14px; background: rgba(7, 17, 35, .66); color: #ffedc9; font: 600 12px "Cormorant Garamond", Georgia, serif; letter-spacing: .05em; box-shadow: 0 0 14px rgba(250, 201, 111, .16); cursor: pointer; }
  .full-map-regions, .full-map-locked-regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(90vw, 560px); gap: 12px 18px; align-items: end; }
  .full-map-regions button, .full-map-locked-regions button { display: grid; gap: 5px; place-items: center; border: 0; background: transparent; color: #fff2d2; font: 600 11px/1.2 "Cormorant Garamond", Georgia, serif; letter-spacing: .06em; text-shadow: 0 2px 8px rgba(4, 11, 28, .92); cursor: pointer; }
  .full-map-regions img, .full-map-locked-regions img { width: 100%; height: min(11svh, 96px); object-fit: contain; filter: drop-shadow(0 8px 14px rgba(3, 11, 28, .48)); }
}

@media (min-width: 700px) and (max-aspect-ratio: 1/1) {
  .full-map-regions, .full-map-locked-regions { grid-template-columns: repeat(3, minmax(96px, 1fr)); width: min(90vw, 560px); gap: 14px; }
}

/* Refined desktop / landscape travel composition. Mobile and portrait remain untouched. */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .isekari { --island-travel-duration: 1700ms; }

  .island[data-journey-state] {
    left: 33% !important;
    top: 24% !important;
    width: 34% !important;
    height: 42% !important;
    transition-duration: 1700ms, 1700ms, 1700ms, 1700ms, 1700ms, 420ms, 520ms !important;
  }
  .island-01[data-journey-state="active"], .island-03[data-journey-state="active"] { left: 16% !important; top: 14% !important; width: 68% !important; height: 55% !important; }
  .island-08[data-journey-state="active"] { left: 28% !important; top: 22% !important; width: 44% !important; height: 44% !important; }
  .island-02[data-journey-state="active"] { left: 33% !important; top: 24.5% !important; width: 34% !important; height: 42% !important; }

  .island[data-journey-state="previous"], .island[data-journey-state="next"] {
    top: 35% !important;
    width: 15% !important;
    height: 19% !important;
    transform: translate3d(0, 0, 0) scale(.76) !important;
    opacity: .78 !important;
    filter: blur(.7px) saturate(.78) contrast(.88) brightness(.9) !important;
  }
  .island[data-journey-state="previous"] { left: 8% !important; }
  .island[data-journey-state="next"] { left: 77% !important; }
  .island-08[data-journey-state="previous"], .island-08[data-journey-state="next"] { width: 18% !important; height: 20% !important; }

  .story-island-ui, .artifacts-island-ui, .creators-bay-island-ui, .lights-island-ui, .sources-island-ui, .ink-waters-island-ui {
    left: 33% !important;
    top: 24% !important;
    width: 34% !important;
    height: 42% !important;
    transition: left 1700ms cubic-bezier(.22,.61,.24,1), top 1700ms cubic-bezier(.22,.61,.24,1), width 1700ms cubic-bezier(.22,.61,.24,1), height 1700ms cubic-bezier(.22,.61,.24,1), opacity 220ms ease, transform 220ms ease !important;
    transition-delay: 0ms !important;
  }
  .story-island-ui:not(.city-lights-ui)[data-journey-state="active"], .artifacts-island-ui[data-journey-state="active"] { left: 16% !important; top: 14% !important; width: 68% !important; height: 55% !important; }
  .lights-island-ui[data-journey-state="active"] { left: 33% !important; top: 24.5% !important; width: 34% !important; height: 42% !important; }
  .is-island-traveling .story-island-ui, .is-island-traveling .artifacts-island-ui, .is-island-traveling .archipelago-island-ui, .is-island-traveling .creators-bay-island-ui, .is-island-traveling .lights-island-ui, .is-island-traveling .sources-island-ui, .is-island-traveling .ink-waters-island-ui {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(0, -8px, 0) !important;
    transition-delay: 0ms !important;
  }

  .story-island-title, .landscape-region-title, .archipelago-island-title, .creators-bay-island-title, .lights-island-title, .sources-island-title, .ink-waters-island-title {
    top: 15.5% !important;
    transition: left 1700ms cubic-bezier(.22,.61,.24,1), top 1700ms cubic-bezier(.22,.61,.24,1), width 1700ms cubic-bezier(.22,.61,.24,1), font-size 420ms ease, opacity 360ms ease !important;
  }
  .landscape-region-title[data-journey-state="active"] { top: 14.5% !important; }
  .archipelago-island-title[data-journey-state="active"] { top: 14% !important; }
  .story-island-title[data-journey-state="previous"], .landscape-region-title[data-journey-state="previous"], .archipelago-island-title[data-journey-state="previous"], .creators-bay-island-title[data-journey-state="previous"], .lights-island-title[data-journey-state="previous"], .sources-island-title[data-journey-state="previous"], .ink-waters-island-title[data-journey-state="previous"],
  .story-island-title[data-journey-state="next"], .landscape-region-title[data-journey-state="next"], .archipelago-island-title[data-journey-state="next"], .creators-bay-island-title[data-journey-state="next"], .lights-island-title[data-journey-state="next"], .sources-island-title[data-journey-state="next"], .ink-waters-island-title[data-journey-state="next"] {
    top: 29% !important;
    width: 18% !important;
    opacity: .72 !important;
    font-size: clamp(12px, 1vw, 16px) !important;
  }
  .story-island-title[data-journey-state="previous"], .landscape-region-title[data-journey-state="previous"], .archipelago-island-title[data-journey-state="previous"], .creators-bay-island-title[data-journey-state="previous"], .lights-island-title[data-journey-state="previous"], .sources-island-title[data-journey-state="previous"], .ink-waters-island-title[data-journey-state="previous"] { left: 15.5% !important; }
  .story-island-title[data-journey-state="next"], .landscape-region-title[data-journey-state="next"], .archipelago-island-title[data-journey-state="next"], .creators-bay-island-title[data-journey-state="next"], .lights-island-title[data-journey-state="next"], .sources-island-title[data-journey-state="next"], .ink-waters-island-title[data-journey-state="next"] { left: 84.5% !important; }
  .landscape-region-title[data-journey-state="previous"], .landscape-region-title[data-journey-state="next"] { top: 27.5% !important; }

  .journey-navigation { z-index: 9; transition: opacity 180ms ease; }
  .journey-arrow {
    top: 42%;
    width: 118px;
    height: 132px;
    padding: 0;
    display: grid;
    place-items: center;
    color: transparent;
    text-shadow: none;
    opacity: .92;
    transition: opacity 220ms ease, transform 300ms ease, filter 300ms ease;
  }
  .journey-arrow::after { content: none; }
  .journey-arrow img {
    display: block;
    width: 92px;
    height: auto;
    filter: drop-shadow(0 1px 2px rgba(10, 12, 30, .9)) drop-shadow(0 0 8px rgba(245, 193, 105, .2));
    transition: transform 300ms ease, filter 300ms ease;
    animation: journey-arrow-glow 3.2s ease-in-out infinite;
  }
  .journey-arrow-prev { left: 21.5%; }
  .journey-arrow-next { right: 21.5%; }
  .journey-arrow:not(:disabled):hover img { filter: drop-shadow(0 1px 2px rgba(10, 12, 30, .9)) drop-shadow(0 0 13px rgba(255, 218, 143, .48)); }
  .journey-arrow-prev:not(:disabled):hover img { transform: translateX(-3px); }
  .journey-arrow-next:not(:disabled):hover img { transform: translateX(3px); }
  .journey-arrow:disabled { opacity: .16; pointer-events: none; }
  .is-island-traveling .journey-navigation { opacity: .34; pointer-events: none; }
  .is-island-traveling .journey-arrow img { animation-play-state: paused; }

  .journey-onboarding { display: block; visibility: visible; z-index: 10; top: 20%; left: 26%; right: auto; width: min(27vw, 360px); transform: translateX(-50%); opacity: .78; animation: none; }
  .journey-onboarding::before { content: none; }
  .journey-onboarding-desktop { display: inline-block; will-change: opacity; animation: navigationHintPulse 2.8s ease-in-out infinite; }
}

@keyframes navigationHintPulse {
  0%, 100% { opacity: .82; }
  50% { opacity: 1; }
}
@keyframes journey-onboarding-desktop-breathe {
  0%, 100% { opacity: .65; color: rgba(255, 239, 202, .84); text-shadow: 0 1px 6px rgba(4, 13, 34, .82), 0 0 7px rgba(246, 204, 130, .12); }
  50% { opacity: 1; color: #fff5d8; text-shadow: 0 1px 6px rgba(4, 13, 34, .84), 0 0 12px rgba(246, 204, 130, .32); }
}

@keyframes journey-arrow-glow {
  0%, 100% { filter: drop-shadow(0 1px 2px rgba(10, 12, 30, .9)) drop-shadow(0 0 6px rgba(245, 193, 105, .14)); }
  50% { filter: drop-shadow(0 1px 2px rgba(10, 12, 30, .9)) drop-shadow(0 0 11px rgba(245, 193, 105, .3)); }
}

@media (prefers-reduced-motion: reduce) and (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .journey-arrow img { animation: none; }
  .journey-onboarding-desktop { animation: none; opacity: 1; }
}

/* Shared category presentation; existing island/category anchor positions remain intact. */
.story-category.category-link { display: flex; flex-direction: row; align-items: center; justify-content: center; width: max-content; max-width: 112px; min-width: 44px; min-height: 44px; gap: 0; padding: 5px 3px; border: 0; border-radius: 3px; background: transparent; box-shadow: none; color: #fff0d3; font-size: 12px; line-height: 1.15; text-shadow: 0 1px 3px rgba(12, 18, 30, .65); transition: transform 275ms cubic-bezier(.22, 1, .36, 1), text-shadow 275ms ease; }
.story-category.category-link .category-label { width: auto; max-width: 80px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; white-space: normal; text-align: center; }
.category-link .category-label { position: relative; display: inline-block; isolation: isolate; z-index: 1; text-shadow: 0 2px 4px rgba(7, 15, 35, .95), 0 0 8px rgba(7, 15, 35, .75), 0 0 12px rgba(255, 226, 158, .24); transition: text-shadow 275ms ease; }
.category-link .category-label::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: calc(100% + 36px); height: calc(100% + 20px); transform: translate(-50%, -50%); border-radius: 999px; pointer-events: none; background: radial-gradient(ellipse at center, rgba(8, 20, 48, .55) 0%, rgba(15, 31, 65, .35) 46%, rgba(15, 31, 65, 0) 78%); filter: blur(6px); opacity: 1; transition: transform 275ms cubic-bezier(.22, 1, .36, 1), opacity 275ms ease; }
.story-category.category-link:active { transform: translate(-50%, -50%) scale(1.02); text-shadow: 0 1px 3px rgba(12, 18, 30, .65); }
@media (min-width: 700px) and (max-aspect-ratio: 1/1) {
  .story-category.category-link { max-width: 140px; min-height: 48px; padding: 6px; font-size: 14px; }
}
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .story-category.category-link { max-width: 140px; min-height: 44px; padding: 5px; font-size: 14px; }
}
@media (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .story-category.category-link { max-width: 160px; min-height: 46px; padding: 6px; font-size: 18px; }
  .story-category.category-link .category-label { max-width: 106px; }
}
.archipelago-island-ui { position: absolute; left: 3%; top: 132%; width: 94%; height: 40%; z-index: 7; pointer-events: none; opacity: var(--archipelago-ui-opacity, 1); transform: translate3d(0, var(--archipelago-ui-y, 0px), 0) scale(var(--archipelago-ui-scale, .68)); transform-origin: center; }
.archipelago-categories { position: absolute; inset: 0; }
.archipelago-categories > :nth-child(1) { left: 14%; top: 30%; }
.archipelago-categories > :nth-child(2) { left: 37%; top: 20%; }
.archipelago-categories > :nth-child(3) { left: 63%; top: 20%; }
.archipelago-categories > :nth-child(4) { left: 86%; top: 30%; }
.archipelago-categories > :nth-child(5) { left: 14%; top: 68%; }
.archipelago-categories > :nth-child(6) { left: 37%; top: 82%; }
.archipelago-categories > :nth-child(7) { left: 63%; top: 82%; }
.archipelago-categories > :nth-child(8) { left: 86%; top: 68%; }
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .archipelago-island-ui { left: 28%; top: 22%; width: 44%; height: 44%; transform: none; opacity: 0; visibility: hidden; transition: opacity 360ms ease; }
  .archipelago-island-ui[data-journey-state="active"] { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .category-link .category-label::before { transition: none; }
  .story-category.category-link, .archipelago-island-ui { transition: none; }
}

/* Compact linear controls for the upper-right map tools. */
.map-actions { right: max(32px, env(safe-area-inset-right)); gap: 10px; }
.map-actions button,
.map-actions .map-global-button {
  display: grid;
  width: 50px;
  min-width: 44px;
  height: 50px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(232, 198, 117, .55);
  border-radius: 50%;
  background: rgba(10, 27, 57, .16);
  backdrop-filter: blur(3px);
  color: #e8c675;
  box-shadow: none;
  transform: none;
  transition: color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.map-actions .map-global-button { font-size: 0; letter-spacing: 0; text-shadow: none; }
.map-actions .top-control-icon {
  display: block;
  width: 56%;
  height: 56%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none;
  pointer-events: none;
}
@media (min-width: 700px) and (max-width: 1100px) {
  .map-actions { right: max(24px, env(safe-area-inset-right)); gap: 9px; }
  .map-actions button,
  .map-actions .map-global-button { width: 48px; height: 48px; }
}
@media (max-width: 699px), (max-aspect-ratio: 1/1) {
  .map-actions { right: max(10px, env(safe-area-inset-right)); gap: 7px; }
  .map-actions button,
  .map-actions .map-global-button { width: 44px; height: 44px; }
}
@media (min-width: 700px) and (max-width: 1100px) {
  .map-actions { right: max(24px, env(safe-area-inset-right)); gap: 9px; }
  .map-actions button,
  .map-actions .map-global-button { width: 48px; height: 48px; }
}
@media (hover: hover) and (pointer: fine) {
  .map-actions button:hover,
  .map-actions button:focus-visible {
    color: #f6d98d;
    border-color: rgba(246, 217, 141, .85);
    background: rgba(10, 27, 57, .24);
    box-shadow: 0 0 12px rgba(255, 203, 92, .22);
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-actions button,
  .map-actions .map-global-button { transition: none; }
}

/* Hamburger menu: an independent, light-weight panel over the existing world. */
.hamburger-menu { --hamburger-surface: rgba(7, 25, 48, .72); --hamburger-item-size: 17px; --hamburger-divider: rgba(215, 171, 91, .2); position: fixed; z-index: 20; top: 0; right: 0; width: clamp(380px, 31vw, 420px); height: 100dvh; overflow: hidden; color: #f3d69d; background: var(--hamburger-surface); border-left: 1px solid rgba(230, 194, 116, .22); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .04), -10px 0 35px rgba(3, 12, 28, .18); backdrop-filter: blur(24px) saturate(115%); -webkit-backdrop-filter: blur(24px) saturate(115%); transform: translateX(28px); opacity: 0; transition: transform 340ms cubic-bezier(.22, 1, .36, 1), opacity 340ms cubic-bezier(.22, 1, .36, 1); pointer-events: none; font-family: var(--isekari-font-ui); }
.hamburger-menu.is-open { transform: translateX(0); opacity: 1; transition-duration: 480ms; pointer-events: auto; }
.hamburger-menu__backdrop { position: fixed; z-index: 19; inset: 0; background: rgba(3, 12, 28, .32); opacity: 0; pointer-events: none; transition: opacity 380ms cubic-bezier(.22, 1, .36, 1); }
.hamburger-menu__backdrop.is-open { opacity: 1; pointer-events: auto; }
.is-hamburger-open .map-screen { overflow: hidden !important; }
.hamburger-menu__screens { width: 100%; height: 100%; }
.hamburger-menu__screen { box-sizing: border-box; display: flex; flex-direction: column; min-height: 100%; height: 100%; padding: max(22px, env(safe-area-inset-top)) clamp(28px, 3vw, 40px) max(22px, env(safe-area-inset-bottom)); overflow-y: auto; scrollbar-color: rgba(213, 163, 80, .65) transparent; }
.hamburger-menu__screen > * { opacity: 0; transform: translateY(6px); transition: transform 240ms cubic-bezier(.22, 1, .36, 1), opacity 240ms cubic-bezier(.22, 1, .36, 1); }
.hamburger-menu.is-open .hamburger-menu__screen > * { opacity: 1; transform: translateY(0); }
.hamburger-menu.is-open .hamburger-menu__screen > :nth-child(1) { transition-delay: 70ms; }
.hamburger-menu.is-open .hamburger-menu__screen > :nth-child(2) { transition-delay: 105ms; }
.hamburger-menu.is-open .hamburger-menu__screen > :nth-child(3) { transition-delay: 140ms; }
.hamburger-menu.is-open .hamburger-menu__screen > :nth-child(4) { transition-delay: 175ms; }
.hamburger-menu.is-open .hamburger-menu__screen > :nth-child(5) { transition-delay: 210ms; }
.hamburger-menu.is-open .hamburger-menu__screen > :nth-child(n + 6) { transition-delay: 230ms; }
.hamburger-menu__header { position: sticky; z-index: 1; top: calc(-1 * max(22px, env(safe-area-inset-top))); flex: none; margin: calc(-1 * max(22px, env(safe-area-inset-top))) 0 12px; padding: max(22px, env(safe-area-inset-top)) 0 16px; border-bottom: 1px solid var(--hamburger-divider); background: transparent; }
.hamburger-menu__brand { display: grid; grid-template-columns: 66px minmax(0, 1fr) 44px; align-items: center; gap: 12px; color: #f5d79b; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hamburger-menu__brand img { width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,.45)); }
.hamburger-menu__brand strong { display: block; font-size: clamp(25px, 2.1vw, 31px); font-weight: 400; letter-spacing: .306em; line-height: 1; text-shadow: 0 1px 10px rgba(255, 218, 149, .18); }
.hamburger-menu__brand strong { font-family: var(--isekari-font-display); }
.hamburger-menu__brand small { display: block; margin-top: 7px; color: rgba(242, 210, 154, .82); font-size: 10px; letter-spacing: .22em; line-height: 1; white-space: nowrap; }
.hamburger-menu__close { justify-self: end; width: 44px; height: 44px; border: 0; padding: 0; background: transparent; color: #f4cd83; font: 300 37px/1 "Cormorant Garamond", Georgia, serif; cursor: pointer; }
.hamburger-menu__level { padding-top: 20px; }
.hamburger-menu__header h2 { margin: 14px 0 0; color: #f6ddb1; font-size: 21px; font-weight: 400; letter-spacing: .075em; line-height: 1.2; }
.hamburger-menu__back { border: 0; padding: 0; background: transparent; color: #e7bf7e; font: inherit; font-size: 13px; letter-spacing: .1em; cursor: pointer; }
.hamburger-menu__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 44px; border: 0; padding: 3px 0; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; }
.hamburger-menu__row.has-divider, .hamburger-menu__level + .hamburger-menu__row { margin-bottom: 8px; border-bottom: 1px solid rgba(213, 170, 95, .28); }
.hamburger-menu__row-title { color: #f4e7cb; font-size: var(--hamburger-item-size); font-weight: 500; letter-spacing: .01em; line-height: 1.2; }
.hamburger-menu__row.is-current .hamburger-menu__row-title { color: #ffe1a9; }
.hamburger-menu__row.is-discover .hamburger-menu__row-title { color: #f7dba7; }
.hamburger-menu__row:not(span) { cursor: pointer; }
.hamburger-menu__row:not(.is-locked):not(.is-muted):hover .hamburger-menu__row-title, .hamburger-menu__row:not(.is-locked):not(.is-muted):focus-visible .hamburger-menu__row-title { color: #fff1ce; }
.hamburger-menu__row:focus-visible, .hamburger-menu__back:focus-visible { outline: 2px solid #f7d58d; outline-offset: 3px; }
.hamburger-menu__chevron { padding-left: 14px; color: #f3c678; font-size: 34px; font-weight: 300; line-height: .7; }
.hamburger-menu__lock { padding-left: 12px; font-size: 12px; filter: grayscale(.5) opacity(.65); }
.hamburger-menu__row.is-locked .hamburger-menu__row-title { color: rgba(220, 207, 183, .72); }
.hamburger-menu__row.is-discover.is-locked .hamburger-menu__row-title { color: rgba(238, 207, 150, .82); }
.hamburger-menu__badge { grid-column: 2; grid-row: 1; display: flex; width: 27px; height: 27px; margin-left: 14px; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid rgba(229, 186, 102, .78); border-radius: 50%; background: #071a36; color: #f3d69d; font: 400 15px/1 "Cormorant Garamond", Georgia, serif; box-shadow: 0 1px 6px rgba(0,0,0,.28); }
.hamburger-menu__info { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hamburger-divider); }
.hamburger-menu__info .hamburger-menu__row { min-height: 44px; }
.hamburger-menu__footer { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hamburger-divider); color: rgba(221, 205, 180, .7); font-size: 13.5px; line-height: 1.4; }
.hamburger-menu__footer i { margin: 0 8px; color: rgba(226, 183, 101, .65); font-style: normal; }
.map-actions #open-hamburger-menu.is-menu-open .top-control-icon { opacity: 0; }
.map-actions #open-hamburger-menu.is-menu-open::after { content: '×'; position: absolute; display: grid; width: 100%; height: 100%; place-items: center; color: currentColor; font: 400 28px/1 "Cormorant Garamond", Georgia, serif; text-shadow: none; }
@media (min-width: 700px) and (max-aspect-ratio: 1/1) { .hamburger-menu { width: min(58vw, 500px); } }
@media (max-width: 699px), (max-aspect-ratio: 1/1) { .hamburger-menu { width: 100vw; } .hamburger-menu__screen { padding-right: 28px; padding-left: 28px; } .hamburger-menu__brand { grid-template-columns: 60px minmax(0, 1fr) 44px; gap: 10px; } .hamburger-menu__brand img { width: 60px; height: 60px; } .hamburger-menu__brand strong { font-size: 24px; } .hamburger-menu__brand small { font-size: 8.5px; letter-spacing: .18em; } }
@media (prefers-reduced-motion: reduce) { .hamburger-menu { transform: none; transition: opacity 120ms ease; } .hamburger-menu__backdrop { transition-duration: 120ms; } .hamburger-menu__screen > * { transform: none; transition: opacity 100ms ease; transition-delay: 0ms !important; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hamburger-menu { background: rgba(7, 25, 48, .94); }
}
@media (max-width: 699px), (max-aspect-ratio: 1/1) {
  .journey-onboarding { top: 53%; width: min(82vw, 360px); font-size: clamp(12px, 3.5vw, 15px); animation: journey-onboarding-desktop-breathe 2.8s ease-in-out infinite; animation-iteration-count: infinite; }
  .journey-onboarding-desktop { display: none; }
  .journey-onboarding-touch { display: inline; }
}
@media (min-width: 700px) and (max-aspect-ratio: 1/1) {
  .journey-onboarding { top: 54%; width: min(64vw, 460px); font-size: clamp(14px, 2vw, 17px); }
}
@media (prefers-reduced-motion: reduce) {
  .journey-onboarding { animation: none; }
}

.full-map-open .ship-deck, .full-map-open .ship-navigation { visibility: hidden; pointer-events: none; }
.full-world-map { overflow: hidden; overscroll-behavior: contain; }

@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .flavor-marketplaces-island-ui { left: 33% !important; top: 24% !important; width: 34% !important; height: 42% !important; z-index: 7; opacity: 0 !important; pointer-events: none !important; transform: translate3d(0, 0, 0) scale(1) !important; transition: left 1700ms cubic-bezier(.22,.61,.24,1), top 1700ms cubic-bezier(.22,.61,.24,1), width 1700ms cubic-bezier(.22,.61,.24,1), height 1700ms cubic-bezier(.22,.61,.24,1), opacity 220ms ease !important; }
  .flavor-marketplaces-island-ui[data-journey-state="active"] { opacity: 1 !important; pointer-events: auto !important; }
  .flavor-marketplaces-island-title { left: 50% !important; top: 15.5% !important; width: 42% !important; transform: translateX(-50%) !important; opacity: 0; z-index: 8; font-size: clamp(16px, 1.5vw, 24px) !important; letter-spacing: .12em !important; transition: left 1700ms cubic-bezier(.22,.61,.24,1), top 1700ms cubic-bezier(.22,.61,.24,1), width 1700ms cubic-bezier(.22,.61,.24,1), font-size 420ms ease, opacity 360ms ease !important; }
  .flavor-marketplaces-island-title[data-journey-state="active"] { opacity: 1; }
  .flavor-marketplaces-island-title[data-journey-state="previous"], .flavor-marketplaces-island-title[data-journey-state="next"] { top: 29% !important; width: 18% !important; opacity: .72 !important; font-size: clamp(12px, 1vw, 16px) !important; }
  .flavor-marketplaces-island-title[data-journey-state="previous"] { left: 15.5% !important; }
  .flavor-marketplaces-island-title[data-journey-state="next"] { left: 84.5% !important; }
  .flavor-marketplaces-island-title[data-journey-state="hidden"] { opacity: 0 !important; }
  .is-island-traveling .flavor-marketplaces-island-ui { opacity: 0 !important; pointer-events: none !important; }
}

@media (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .gate-ui h1 { opacity: 1; transform: none; animation: none; }
  .gate-ui h1::after { animation: none; }
  .gate-ui::before { inset: -70px -110px; background: radial-gradient(ellipse 72% 58% at 50% 46%, rgba(3, 9, 23, .68) 0%, rgba(3, 9, 23, .48) 36%, rgba(3, 9, 23, .2) 64%, rgba(3, 9, 23, 0) 100%); filter: blur(18px); opacity: .58; }
}

@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .gamers-frontiers-island-title { left:50% !important; top:15.5% !important; width:42% !important; transform:translateX(-50%) !important; opacity:0; z-index:8; font-size:clamp(16px,1.5vw,24px) !important; letter-spacing:.12em !important; transition:left 1700ms cubic-bezier(.22,.61,.24,1),top 1700ms cubic-bezier(.22,.61,.24,1),width 1700ms cubic-bezier(.22,.61,.24,1),font-size 420ms ease,opacity 360ms ease !important; }
  .gamers-frontiers-island-title[data-journey-state="active"] { opacity:1; }
  .gamers-frontiers-island-title[data-journey-state="previous"], .gamers-frontiers-island-title[data-journey-state="next"] { top:29% !important; width:18% !important; opacity:.72 !important; font-size:clamp(12px,1vw,16px) !important; }
  .gamers-frontiers-island-title[data-journey-state="previous"] { left:15.5% !important; }
  .gamers-frontiers-island-title[data-journey-state="next"] { left:84.5% !important; }
  .gamers-frontiers-island-title[data-journey-state="hidden"] { opacity:0 !important; }
  .gamers-frontiers-island-ui { left:33% !important; top:26% !important; width:34% !important; z-index:7; opacity:0 !important; transform:translate3d(0,0,0) scale(1) !important; transition:opacity 320ms ease !important; }
  .gamers-frontiers-island-ui[data-journey-state="active"] { opacity:1 !important; }
  .is-island-traveling .gamers-frontiers-island-ui { opacity:0 !important; }
}

@media (max-width: 699px) {
  .landscape-region-title { display: block !important; }
}

/* Full World Map: spacious, centered landscape composition. */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  /* Keep the map grid independent of the fixed title hierarchy above it. */
  .full-world-map { align-content: start; }
  .full-map-regions {
    margin-top: clamp(40px, 5svh, 52px);
    row-gap: clamp(6px, .7vw, 12px);
  }
  .full-map-open .journey-onboarding { display: none; }
  .full-map-regions,
  .full-map-locked-regions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-self: center;
    align-items: flex-start;
    width: 100%;
    gap: clamp(30px, 3vw, 48px) clamp(28px, 2.8vw, 46px);
  }
  .full-map-regions button,
  .full-map-locked-regions button {
    flex: 0 0 clamp(150px, 12.5vw, 190px);
    gap: clamp(12px, 1.1vw, 16px);
    font-size: clamp(13px, 1.1vw, 17px);
  }
  .full-map-regions img,
  .full-map-locked-regions img { height: clamp(160px, 18vh, 200px); }
  .full-map-future { margin-top: clamp(42px, 4vw, 64px); margin-bottom: clamp(28px, 2.8vw, 44px); }
}

@media (min-width: 700px) and (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .full-map-regions,
  .full-map-locked-regions { width: 100%; gap: 26px 24px; }
  .full-map-regions button,
  .full-map-locked-regions button { flex-basis: clamp(130px, 15.5vw, 165px); font-size: clamp(12px, 1.3vw, 15px); }
  .full-map-regions img,
  .full-map-locked-regions img { height: clamp(140px, 18vh, 165px); }
}

/* Full World Map title hierarchy, borrowing the Gate's exact type family and glow. */
.full-world-map h2 {
  position: absolute;
  top: clamp(26px, 4svh, 48px);
  left: 50%;
  width: min(88vw, 940px);
  margin: 0;
  padding-left: .19em;
  transform: translateX(-50%);
  color: #fff0c9;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(28px, 3.2vw, 50px);
  font-weight: 400;
  letter-spacing: .19em;
  line-height: 1;
  text-shadow: 0 1px 10px rgba(255, 218, 149, .18), 0 0 13px rgba(234, 185, 98, .14);
  z-index: 1;
}
.full-map-note {
  position: absolute;
  top: clamp(88px, 12svh, 126px);
  left: 50%;
  width: min(82vw, 760px);
  margin: 0;
  transform: translateX(-50%);
  color: #fff1d0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.2;
  text-shadow: 0 1px 7px rgba(4, 11, 28, .92), 0 0 9px rgba(246, 204, 130, .14);
  z-index: 1;
}
.full-map-note::before,
.full-map-note::after,
.full-map-future::before,
.full-map-future::after {
  content: "";
  display: inline-block;
  width: clamp(28px, 4vw, 58px);
  margin: 0 .7em .25em;
  border-top: 1px solid rgba(237, 195, 119, .4);
  box-shadow: 0 0 6px rgba(239, 196, 115, .16);
  vertical-align: middle;
}
.full-map-future {
  color: rgba(255, 237, 202, .9);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.35;
  letter-spacing: .08em;
  text-shadow: 0 1px 7px rgba(4, 11, 28, .92), 0 0 8px rgba(246, 204, 130, .12);
}

@media (max-width: 699px), (max-aspect-ratio: 1/1) {
  .full-world-map h2 { top: max(64px, env(safe-area-inset-top)); width: min(86vw, 560px); font-size: clamp(24px, 7.2vw, 34px); }
  .full-map-note { top: max(142px, calc(env(safe-area-inset-top) + 78px)); font-size: clamp(14px, 4vw, 18px); }
  .full-map-future { font-size: clamp(14px, 3.8vw, 17px); }
}

/* Tablet landscape uses the same grouped compact-travel renderer as phone. */
@media (min-width: 700px) and (max-width: 1100px) {
  .island-world .island[data-journey-state] {
    left: 3vw !important;
    top: var(--compact-island-top) !important;
    width: 94vw !important;
    height: 36svh !important;
    transform: translate3d(var(--phone-island-x, 0), 0, 0) scale(var(--phone-island-scale, 1)) !important;
    opacity: var(--phone-island-opacity, 0) !important;
    filter: none !important;
  }
  .story-island-title,
  .landscape-region-title,
  .archipelago-island-title,
  .creators-bay-island-title,
  .lights-island-title,
  .sources-island-title,
  .ink-waters-island-title,
  .flavor-marketplaces-island-title,
  .melody-cape-island-title,
  .gamers-frontiers-island-title,
  .wanderers-city-island-title,
  .isekari-portal-island-title {
    display: block !important;
    left: 3vw !important;
    top: var(--compact-title-top) !important;
    width: 94vw !important;
    margin: 0 !important;
    transform: translate3d(var(--phone-group-x, 0), 0, 0) scale(var(--phone-group-scale, 1)) !important;
    opacity: var(--phone-title-opacity, 0) !important;
  }
  .story-island-ui,
  .artifacts-island-ui,
  .archipelago-island-ui,
  .creators-bay-island-ui,
  .lights-island-ui,
  .sources-island-ui,
  .ink-waters-island-ui,
  .flavor-marketplaces-island-ui,
  .melody-cape-island-ui {
    left: 3vw !important;
    top: var(--compact-island-top) !important;
    width: 94vw !important;
    height: 36svh !important;
    opacity: var(--phone-ui-opacity, 0) !important;
    transform: translate3d(var(--phone-group-x, 0), 0, 0) scale(var(--phone-group-scale, 1)) !important;
  }
  .gamers-frontiers-island-ui,
  .wanderers-city-island-ui,
  .isekari-portal-island-ui {
    left: 3vw !important;
    top: var(--compact-locked-message-top) !important;
    width: 94vw !important;
    height: 36svh !important;
    opacity: var(--phone-ui-opacity, 0) !important;
    transform: translate3d(var(--phone-group-x, 0), 0, 0) scale(var(--phone-group-scale, 1)) !important;
  }
}

/* The locked Wanderers City uses the existing locked-region presentation. */
.island-15 { --mobile-left: 3%; --mobile-top: 612%; --mobile-width: 94%; --mobile-height: 40%; --mobile-scale: .6; --island-opacity: .58; --island-filter: saturate(.82) contrast(.92); }
.island-15[data-island-state="locked"] { pointer-events: auto; cursor: pointer; }
.wanderers-city-island-title { position:absolute; left:50%; top:614%; width:90%; margin:0; color:#fff2d2; font-family:"Cormorant Garamond", Georgia, serif; font-size:clamp(14px,4vw,18px); font-weight:600; letter-spacing:.1em; line-height:1.1; text-align:center; text-shadow:0 1px 2px rgba(15,10,12,.92),0 2px 9px rgba(5,15,34,.82); pointer-events:none; }
.wanderers-city-island-ui { position:absolute; left:9%; top:624%; width:82%; z-index:7; pointer-events:none; text-align:center; color:#f5ebd5; font:400 clamp(12px,3.2vw,16px)/1.45 "Cormorant Garamond", Georgia, serif; letter-spacing:.02em; text-shadow:0 2px 10px rgba(5,10,30,.95); }
.wanderers-city-island-ui p { margin:0; padding:18px 20px 10px; background:radial-gradient(ellipse at center,rgba(7,18,48,.62) 0%,rgba(7,18,48,.34) 48%,rgba(7,18,48,0) 76%); }
.wanderers-city-island-ui small { display:block; color:#ddc9ef; font-size:.84em; letter-spacing:.05em; }

.island-16 { --mobile-left: 3%; --mobile-top: 672%; --mobile-width: 94%; --mobile-height: 40%; --mobile-scale: .6; --island-opacity: .58; --island-filter: saturate(.82) contrast(.92); }
.island-16[data-island-state="locked"] { pointer-events: auto; cursor: pointer; }
.isekari-portal-island-title { position:absolute; left:50%; top:674%; width:90%; margin:0; color:#fff2d2; font-family:"Cormorant Garamond", Georgia, serif; font-size:clamp(14px,4vw,18px); font-weight:600; letter-spacing:.1em; line-height:1.1; text-align:center; text-shadow:0 1px 2px rgba(15,10,12,.92),0 2px 9px rgba(5,15,34,.82); pointer-events:none; }
.isekari-portal-island-ui { position:absolute; left:9%; top:684%; width:82%; z-index:7; pointer-events:none; text-align:center; color:#f5ebd5; font:400 clamp(12px,3.2vw,16px)/1.45 "Cormorant Garamond", Georgia, serif; letter-spacing:.02em; text-shadow:0 2px 10px rgba(5,10,30,.95); }

/* Island labels sit directly on the artwork and share the same warm, restrained glow. */
.flavor-marketplaces-island-title,
.melody-cape-island-title,
.gamers-frontiers-island-title,
.wanderers-city-island-title,
.isekari-portal-island-title {
  color: #fff8e8;
  text-shadow: 0 1px 3px rgba(20, 28, 54, .9), 0 0 9px rgba(255, 226, 158, .38);
}
.isekari-portal-island-ui p { margin:0; padding:18px 20px 10px; background:radial-gradient(ellipse at center,rgba(7,18,48,.62) 0%,rgba(7,18,48,.34) 48%,rgba(7,18,48,0) 76%); }
.isekari-portal-island-ui p strong { color:#fff1d4; font-weight:600; text-shadow:0 1px 5px rgba(246,207,142,.2); }
.isekari-portal-island-ui small { display:block; color:#ddc9ef; font-size:.84em; letter-spacing:.05em; }

@media (max-width: 1100px) {
  .wanderers-city-island-ui p { margin-top: 58%; padding: 12px 14px 8px; }
  .isekari-portal-island-ui p { margin-top: 58%; padding: 12px 14px 8px; }
}

@media (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .wanderers-city-island-title { left:50% !important; top:15.5% !important; width:42% !important; transform:translateX(-50%) !important; opacity:0; z-index:8; font-size:clamp(16px,1.5vw,24px) !important; letter-spacing:.12em !important; transition:left 1700ms cubic-bezier(.22,.61,.24,1),top 1700ms cubic-bezier(.22,.61,.24,1),width 1700ms cubic-bezier(.22,.61,.24,1),font-size 420ms ease,opacity 360ms ease !important; }
  .wanderers-city-island-title[data-journey-state="active"] { opacity:1; }
  .wanderers-city-island-title[data-journey-state="previous"], .wanderers-city-island-title[data-journey-state="next"] { top:29% !important; width:18% !important; opacity:.72 !important; font-size:clamp(12px,1vw,16px) !important; }
  .wanderers-city-island-title[data-journey-state="previous"] { left:15.5% !important; }
  .wanderers-city-island-title[data-journey-state="next"] { left:84.5% !important; }
  .wanderers-city-island-title[data-journey-state="hidden"] { opacity:0 !important; }
  .wanderers-city-island-ui { left:33% !important; top:26% !important; width:34% !important; z-index:7; opacity:0 !important; transform:translate3d(0,0,0) scale(1) !important; transition:opacity 320ms ease !important; }
  .wanderers-city-island-ui[data-journey-state="active"] { opacity:1 !important; }
  .is-island-traveling .wanderers-city-island-ui { opacity:0 !important; pointer-events:none !important; }
  .isekari-portal-island-title { left:50% !important; top:15.5% !important; width:42% !important; transform:translateX(-50%) !important; opacity:0; z-index:8; font-size:clamp(16px,1.5vw,24px) !important; letter-spacing:.12em !important; transition:left 1700ms cubic-bezier(.22,.61,.24,1),top 1700ms cubic-bezier(.22,.61,.24,1),width 1700ms cubic-bezier(.22,.61,.24,1),font-size 420ms ease,opacity 360ms ease !important; }
  .isekari-portal-island-title[data-journey-state="active"] { opacity:1; }
  .isekari-portal-island-title[data-journey-state="previous"], .isekari-portal-island-title[data-journey-state="next"] { top:29% !important; width:18% !important; opacity:.72 !important; font-size:clamp(12px,1vw,16px) !important; }
  .isekari-portal-island-title[data-journey-state="previous"] { left:15.5% !important; }
  .isekari-portal-island-title[data-journey-state="next"] { left:84.5% !important; }
  .isekari-portal-island-title[data-journey-state="hidden"] { opacity:0 !important; }
  .isekari-portal-island-ui { left:33% !important; top:26% !important; width:34% !important; z-index:7; opacity:0 !important; transform:translate3d(0,0,0) scale(1) !important; transition:opacity 320ms ease !important; }
  .isekari-portal-island-ui[data-journey-state="active"] { opacity:1 !important; }
  .is-island-traveling .isekari-portal-island-ui { opacity:0 !important; pointer-events:none !important; }
}

/* Desktop Full World Map is a naturally scrollable atlas, not a compressed viewport. */
@media (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .full-map-viewport,
  .full-map-world-layer { display: contents; }

  .full-world-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: initial;
    height: auto;
    padding: clamp(104px, 12vh, 132px) 6vw clamp(96px, 10vh, 132px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: auto;
  }
  .full-map-close {
    position: sticky;
    top: calc(92px - clamp(104px, 12vh, 132px));
    right: auto;
    align-self: flex-end;
    margin-top: -12px;
    margin-bottom: -26px;
    margin-right: 1vw;
    z-index: 12;
  }
  .full-world-map h2 {
    position: static;
    width: min(88vw, 940px);
    margin: 0;
    transform: none;
    flex: none;
  }
  .full-map-note {
    position: static;
    width: min(82vw, 760px);
    margin: clamp(24px, 3vh, 34px) 0 0;
    transform: none;
    flex: none;
  }
  .full-map-regions,
  .full-map-locked-regions {
    width: min(90vw, 1280px);
    margin-right: 0;
    margin-left: 0;
    gap: clamp(54px, 6vh, 76px) clamp(30px, 3vw, 48px);
  }
  .full-map-regions {
    margin-top: clamp(44px, 6vh, 68px);
  }
  .full-map-regions button,
  .full-map-locked-regions button {
    flex-basis: clamp(170px, 14vw, 200px);
    gap: clamp(14px, 1.4vw, 20px);
    font-size: clamp(14px, 1.15vw, 17px);
  }
  .full-map-regions img,
  .full-map-locked-regions img {
    height: clamp(185px, 16vw, 230px);
  }
  .full-map-future {
    margin-top: clamp(76px, 10vh, 112px);
    margin-bottom: clamp(44px, 6vh, 68px);
    font-size: clamp(15px, 1.15vw, 18px);
    flex: none;
  }
}

/* Compact Full World Map: a stable scene with an independently pannable island layer. */
@media (max-width: 1100px) {
  .full-map-open .island-world,
  .full-map-open .front-atmosphere,
  .full-map-open .map-ui-layer {
    visibility: hidden;
    pointer-events: none;
  }

  .full-map-open .map-screen { z-index: 8; }

  .full-world-map {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: block;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(120deg, rgba(5, 16, 38, .97), rgba(17, 35, 69, .94), rgba(5, 16, 38, .97));
    backdrop-filter: blur(8px);
    touch-action: auto;
  }

  .full-map-close {
    top: max(14px, env(safe-area-inset-top));
    right: max(5vw, env(safe-area-inset-right));
    z-index: 2;
  }

  .full-world-map h2 {
    position: static;
    width: min(86vw, 560px);
    margin: 0;
    transform: none;
    flex: none;
  }

  .full-map-note {
    position: static;
    width: min(82vw, 560px);
    margin: clamp(16px, 2.5svh, 24px) 0 0;
    transform: none;
    flex: none;
  }

  .full-map-viewport {
    position: absolute;
    top: max(52px, calc(env(safe-area-inset-top) + 50px));
    right: 4vw;
    bottom: max(22px, env(safe-area-inset-bottom));
    left: 4vw;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .full-map-viewport::-webkit-scrollbar { display: none; }

  .full-map-viewport img {
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
  }

  .full-map-world-layer {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    padding: 14px 0 48px;
  }

  .full-map-regions,
  .full-map-locked-regions {
    display: grid;
    width: min(90vw, 760px);
    margin: 0;
    align-items: end;
  }

  .full-map-regions { margin-top: clamp(30px, 4svh, 42px); }

  .full-map-regions button,
  .full-map-locked-regions button {
    display: grid;
    min-width: 0;
    place-items: center;
  }

  .full-map-regions img,
  .full-map-locked-regions img { width: 100%; object-fit: contain; }

  .full-map-future {
    flex: none;
    margin: clamp(34px, 6vh, 54px) 0 clamp(28px, 5vh, 44px);
  }
}

@media (max-width: 699px) {
  .full-map-regions,
  .full-map-locked-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
  .full-map-regions button,
  .full-map-locked-regions button { gap: 7px; font-size: 11px; }
  .full-map-regions img,
  .full-map-locked-regions img { height: min(15svh, 122px); }
}

@media (min-width: 700px) and (max-width: 1100px) {
  .full-map-viewport { right: 6vw; left: 6vw; }
  .full-map-regions,
  .full-map-locked-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; }
  .full-map-regions button,
  .full-map-locked-regions button { gap: 9px; font-size: clamp(12px, 1.8vw, 15px); }
  .full-map-regions img,
  .full-map-locked-regions img { height: min(20svh, 154px); }
}

/* A transformed scroll container captures the fixed Full World Map on compact viewports. */
@media (max-width: 1100px) {
  .map-visible:not(.is-transitioning) .map-screen { transform: none; }
}

/* Wyspa Opowieści: label coordinates follow each island in the new 1662:946 artwork. */
.story-island-ui:not(.city-lights-ui) { container-type: size; }
.story-categories {
  inset: auto;
  left: 50%;
  top: 50%;
  width: min(100cqw, 175.687cqh);
  height: min(56.919cqw, 100cqh);
  transform: translate(-50%, -50%);
}
.story-island-ui .story-category-manhwa { left: 26%; top: 25%; }
.story-island-ui .story-category-manhua { left: 76%; top: 25%; }
.story-island-ui .story-category-manga { left: 51%; top: 46%; }
.story-island-ui .story-category-creators { left: 15%; top: 51%; }
.story-island-ui .story-category-discover { left: 86%; top: 51%; }
.story-island-ui .story-category-webtoony { left: 34%; top: 76%; }
.story-island-ui .story-category-novel { left: 67%; top: 76%; }

/* Przystań Kolekcjonerów: hotspots share the exact visible 3:2 artwork area. */
.artifacts-island-ui { container-type: size; }
.artifacts-categories {
  inset: auto;
  left: 50%;
  top: 50%;
  width: min(100cqw, 150cqh);
  height: min(66.6667cqw, 100cqh);
  transform: translate(-50%, -50%);
}
/* Załoga remains on the ship as a locked future area. */
.crew-nav-label { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.crew-nav-lock { width: .78em; height: .78em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; color: rgba(246, 211, 141, .94); filter: drop-shadow(0 0 3px rgba(245, 198, 107, .2)); }

.crew-dialog {
  position: relative;
  box-sizing: border-box;
  width: min(620px, calc(100vw - 40px));
  max-height: min(82dvh, 640px);
  margin: auto;
  overflow: auto;
  border: 1px solid rgba(222, 177, 95, .72);
  border-radius: 10px;
  padding: clamp(28px, 4vw, 44px);
  color: #fff0d3;
  background: radial-gradient(ellipse at 50% 0%, rgba(42, 58, 94, .92), rgba(8, 19, 43, .97) 58%, rgba(4, 12, 29, .99));
  box-shadow: inset 0 1px 0 rgba(255, 239, 194, .14), 0 0 0 1px rgba(95, 63, 30, .34), 0 16px 48px rgba(1, 7, 21, .68), 0 0 28px rgba(226, 175, 89, .14);
  font-family: "Cormorant Garamond", Georgia, serif;
  text-align: center;
  pointer-events: auto;
}
.crew-dialog::backdrop { background: rgba(2, 9, 25, .72); backdrop-filter: blur(4px); }
.crew-dialog form { position: absolute; top: 12px; right: 14px; margin: 0; }
.crew-dialog-close { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(222, 177, 95, .48); border-radius: 50%; padding: 0; background: rgba(7, 18, 41, .58); color: #ffeac0; font: 400 25px/1 "Cormorant Garamond", Georgia, serif; cursor: pointer; transition: color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.crew-dialog-close:hover { color: #fff6de; border-color: rgba(248, 205, 128, .9); box-shadow: 0 0 10px rgba(244, 195, 105, .18); }
.crew-dialog-close:focus-visible { outline: 2px solid #f7d58d; outline-offset: 3px; }
.crew-dialog-content { max-width: 520px; margin: 0 auto; }
.crew-dialog h2 { margin: 0 38px 22px; color: #fff0c9; font-size: clamp(24px, 3.2vw, 34px); font-weight: 400; letter-spacing: .06em; line-height: 1.15; text-shadow: 0 1px 8px rgba(255, 215, 139, .16); }
.crew-dialog p { margin: 0 0 16px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; letter-spacing: .01em; text-shadow: 0 1px 4px rgba(2, 8, 23, .84); }
.crew-dialog p:last-child { margin-bottom: 0; }
.crew-dialog strong { color: #fff3d8; font-weight: 600; }

/* Miasto Świateł: one approved illustration and one route-sized interaction. */
.island-city-lights { --mobile-left: 3%; --mobile-top: 12%; --mobile-width: 94%; --mobile-height: 40%; --mobile-scale: 1; }
.island-city-lights[data-journey-state="active"] { z-index: 10; }
.island-city-lights .island-hitbox { left: 3%; top: 4%; width: 94%; height: 92%; clip-path: polygon(7% 20%, 22% 8%, 42% 4%, 50% 0, 58% 4%, 78% 8%, 93% 20%, 100% 62%, 91% 83%, 68% 95%, 50% 100%, 32% 95%, 9% 83%, 0 62%); touch-action: manipulation; }

/* Wyspa Opowieści follows the same single-destination interaction as Miasto Świateł. */
.island-01[data-journey-state="active"] { z-index: 10; }
.island-01 .island-hitbox { left: 2%; top: 3%; width: 96%; height: 94%; clip-path: polygon(5% 37%, 15% 17%, 31% 8%, 45% 5%, 56% 0, 69% 8%, 84% 14%, 96% 30%, 100% 57%, 91% 78%, 76% 91%, 56% 100%, 35% 96%, 18% 87%, 5% 70%, 0 51%); touch-action: manipulation; }

/* Active Anime hub: the only published route in this first iteration. */
.anime-hub-page { overflow: auto; min-height: 100vh; background: radial-gradient(circle at 50% 0%, #173b75 0%, #071a36 54%, #040d22 100%); color: #fff1d0; }
.anime-hub { width: min(920px, 92vw); margin: 0 auto; padding: clamp(42px, 8vw, 88px) 0; font-family: "Cormorant Garamond", Georgia, serif; }
.anime-hub-breadcrumb, .anime-hub-breadcrumb a { color: #f3cf8d; font-size: 14px; letter-spacing: .06em; }
.anime-hub h1 { margin: 18px 0 14px; font-size: clamp(30px, 5vw, 52px); font-weight: 400; line-height: 1.08; text-shadow: 0 2px 12px rgba(255, 208, 119, .25); }
.anime-hub-intro { max-width: 680px; font-size: clamp(17px, 2vw, 20px); line-height: 1.55; }
.anime-hub > img { display: block; width: 100%; height: auto; margin: clamp(26px, 4vw, 42px) 0; }
.anime-hub h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 400; }
.anime-hub li { margin: 10px 0; font-size: 17px; }
.anime-hub li span { color: #d9c3a0; font-size: 14px; }

@media (max-width: 699px), (max-aspect-ratio: 1/1) {
  .crew-nav-label { gap: 3px; }
  .crew-nav-lock { width: .72em; height: .72em; }
  .crew-dialog { width: min(92vw, 440px); max-height: 84dvh; padding: 28px 22px 24px; }
  .crew-dialog form { top: 10px; right: 10px; }
  .crew-dialog-close { width: 32px; height: 32px; font-size: 23px; }
  .crew-dialog h2 { margin: 2px 34px 18px; font-size: clamp(22px, 6.3vw, 28px); }
  .crew-dialog p { margin-bottom: 14px; font-size: clamp(15px, 4vw, 17px); line-height: 1.48; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .crew-dialog { max-height: 86dvh; padding: 22px 30px; }
  .crew-dialog h2 { margin-bottom: 14px; font-size: clamp(21px, 4.5vh, 28px); }
  .crew-dialog p { margin-bottom: 10px; font-size: clamp(14px, 3.2vh, 17px); line-height: 1.4; }
}

.ship-navigation a.ship-nav-item { text-decoration: none; }

/* Ekwipunek is a standalone route; approved artwork is its only visible content. */
.inventory-page { min-height: 100vh; min-height: 100dvh; overflow: hidden; background: #07080d; }
.inventory-page-main { width: 100vw; height: 100vh; height: 100dvh; }
.inventory-page.is-loading .inventory-categories-layer,
.inventory-page.is-loading .world-return-button { visibility: hidden; }
.inventory-page-art, .inventory-page-art img { display: block; width: 100%; height: 100%; }
.inventory-page-art img { object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; }
@media (max-width: 699px), (max-aspect-ratio: 1/1) {
  .inventory-page-art img { object-position: center; }
}

/* WorldReturnButton — a reusable overlay link for immersive ISEKARI views. */
.inventory-page .world-return-button {
  position: fixed;
  top: auto;
  right: max(48px, env(safe-area-inset-right));
  bottom: max(40px, env(safe-area-inset-bottom));
  left: auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 100px;
  gap: 9px;
  padding: 0 10px 0 0;
  border: 1px solid rgb(214 162 74 / 72%);
  border-radius: 999px;
  background: rgb(12 15 27 / 84%);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.world-return-button__label {
  display: block;
  padding-right: 1px;
  color: #f8d68e;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(0.72rem, 0.88vw, 0.9rem);
  line-height: 1.1;
  text-shadow: 0 1px 2px rgb(0 0 0 / 78%);
  white-space: nowrap;
}

.world-return-button img {
  display: block;
  width: 100px;
  height: 100px;
  flex: 0 0 100px;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgb(0 0 0 / 42%));
  transition: transform 180ms ease, filter 180ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.world-return-button:focus-visible {
  outline: 2px solid #f8d68e;
  outline-offset: 4px;
  box-shadow: 0 0 14px rgb(246 196 94 / 55%);
}

@media (hover: hover) and (pointer: fine) {
  .world-return-button:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px rgb(246 196 94 / 52%));
  }

  .world-return-button::after { content: none; }
}

@media (max-width: 1200px) {
  .inventory-page .world-return-button {
    right: max(28px, env(safe-area-inset-right));
    bottom: max(28px, env(safe-area-inset-bottom));
    min-height: 78px;
  }

  .world-return-button img {
    width: 78px;
    height: 78px;
    flex-basis: 78px;
  }
}

@media (max-width: 699px) {
  .inventory-page .world-return-button {
    right: max(22px, env(safe-area-inset-right));
    bottom: max(22px, env(safe-area-inset-bottom));
    min-height: 64px;
  }

  .world-return-button img {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
}

@media (hover: none), (pointer: coarse) {
  .inventory-page .world-return-button {
    top: auto;
    right: max(28px, env(safe-area-inset-right));
    bottom: max(28px, env(safe-area-inset-bottom));
    left: auto;
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 74px;
    gap: 7px;
    padding: 0 7px 0 0;
    border: 1px solid rgb(214 162 74 / 72%);
    border-radius: 999px;
    background: rgb(12 15 27 / 84%);
  }

  .world-return-button img {
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
  }

  .world-return-button__label {
    display: block;
    padding-right: 1px;
    color: #f8d68e;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(0.66rem, 2vw, 0.78rem);
    line-height: 1.1;
    text-shadow: 0 1px 2px rgb(0 0 0 / 78%);
    white-space: nowrap;
  }

  .world-return-button:focus-visible { border-color: #f8d68e; }
}

@media (max-width: 699px) {
  @media (hover: none), (pointer: coarse) {
    .inventory-page .world-return-button {
      right: max(20px, env(safe-area-inset-right));
      bottom: max(20px, env(safe-area-inset-bottom));
      min-height: 64px;
      gap: 6px;
      padding-right: 6px;
    }

    .world-return-button img {
      width: 64px;
      height: 64px;
      flex-basis: 64px;
    }
  }
}

/* InventoryCategoriesLayer uses the same cover-sized artboard as the page artwork. */
.inventory-categories-layer {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.inventory-categories-artboard {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.68dvh);
  height: max(100dvh, 56.28vw);
  transform: translate(-50%, -50%);
}

.inventory-category-slot {
  --icon-width: 62%;
  --icon-scale: 1;
  --icon-x: 0%;
  --icon-y: 0%;
  position: absolute;
  display: block;
  pointer-events: auto;
  width: 12.5%;
  height: 25.5%;
  color: #f5d693;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(0.52rem, 0.76vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgb(0 0 0 / 78%);
  text-transform: uppercase;
  text-decoration: none;
}

.inventory-category-slot img {
  position: absolute;
  top: 7%;
  left: 50%;
  display: block;
  width: var(--icon-width);
  max-width: none;
  height: auto;
  max-height: 60%;
  object-fit: contain;
  transform: translate(calc(-50% + var(--icon-x)), var(--icon-y)) scale(var(--icon-scale));
  user-select: none;
  -webkit-user-drag: none;
  transition: filter 180ms ease;
}

.inventory-category-slot span {
  position: absolute;
  right: 0;
  bottom: 12%;
  left: 0;
}

.inventory-category-slot--przedmioty { --icon-width: 58%; --icon-scale: .94; --icon-x: -2%; --icon-y: 18%; top: 40.7%; left: 22.4%; }
.inventory-category-slot--odznaki { --icon-width: 56%; --icon-scale: .93; --icon-x: -3%; --icon-y: 19%; top: 40.7%; left: 36.6%; }
.inventory-category-slot--artefakty { --icon-width: 55%; --icon-scale: .92; --icon-x: 0%; --icon-y: 18%; top: 40.7%; left: 50.6%; }
.inventory-category-slot--sakiewka { --icon-width: 54%; --icon-scale: .91; --icon-x: -2%; --icon-y: 20%; top: 40.7%; left: 64.7%; }

@media (hover: hover) and (pointer: fine) {
  .inventory-category-slot:hover img {
    filter: drop-shadow(0 0 10px rgb(246 196 94 / 52%));
  }
}

@media (max-width: 699px), (max-aspect-ratio: 1/1) {
  .inventory-categories-artboard {
    width: max(100vw, 56.28dvh);
    height: max(100dvh, 177.68vw);
  }

  .inventory-category-slot {
    width: 30%;
    height: 19.5%;
    font-size: clamp(0.48rem, 1.55vw, 0.68rem);
  }

  .inventory-category-slot img {
    max-height: 57%;
  }

  .inventory-category-slot--przedmioty { top: 28.5%; left: 18.4%; }
  .inventory-category-slot--odznaki { top: 28.5%; left: 52.2%; }
  .inventory-category-slot--artefakty { top: 49.2%; left: 18.4%; }
  .inventory-category-slot--sakiewka { top: 49.2%; left: 52.2%; }
}

/* Tablet portrait: 2 × 2 cards receive smaller, individually balanced objects. */
@media (min-width: 700px) and (max-aspect-ratio: 1/1) {
  .inventory-category-slot { font-size: clamp(0.5rem, 1.25vw, 0.68rem); }
  .inventory-category-slot--przedmioty { --icon-width: 61.33%; --icon-scale: .90; --icon-x: -1%; --icon-y: 16%; }
  .inventory-category-slot--odznaki { --icon-width: 54.67%; --icon-scale: .89; --icon-x: -3%; --icon-y: 17%; }
  .inventory-category-slot--artefakty { --icon-width: 52%; --icon-scale: .88; --icon-x: 0%; --icon-y: 16%; }
  .inventory-category-slot--sakiewka { --icon-width: 56%; --icon-scale: .87; --icon-x: -2%; --icon-y: 18%; }
}

/* Tablet landscape retains four cards, but uses a lighter visual weight than desktop. */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) {
  .inventory-category-slot { font-size: clamp(0.5rem, 0.72vw, 0.68rem); }
  .inventory-category-slot--przedmioty { --icon-width: 52%; --icon-scale: .94; --icon-x: -1%; --icon-y: 14%; }
  .inventory-category-slot--odznaki { --icon-width: 49%; --icon-scale: .92; --icon-x: -3%; --icon-y: 16%; }
  .inventory-category-slot--artefakty { --icon-width: 48%; --icon-scale: .91; --icon-x: 0%; --icon-y: 15%; }
  .inventory-category-slot--sakiewka { --icon-width: 47%; --icon-scale: .90; --icon-x: -2%; --icon-y: 17%; }
}

/* Phone: further reduce each silhouette while preserving its individual optical centre. */
@media (max-width: 699px) {
  .inventory-category-slot { font-size: clamp(0.46rem, 1.75vw, 0.6rem); }
  .inventory-category-slot--przedmioty { --icon-width: 60%; --icon-scale: .89; --icon-x: 3%; --icon-y: 16%; }
  .inventory-category-slot--odznaki { --icon-width: 54.67%; --icon-scale: .88; --icon-x: -4%; --icon-y: 17%; }
  .inventory-category-slot--artefakty { --icon-width: 53.33%; --icon-scale: .88; --icon-x: 1%; --icon-y: 16%; }
  .inventory-category-slot--sakiewka { --icon-width: 53.33%; --icon-scale: .85; --icon-x: -4%; --icon-y: 18%; }
}

/* Schowek Wędrowca: an independent scene and a data-driven collection. */
.stash-page { overflow: hidden; width: 100%; height: 100dvh; background: #090b14; color: #f4dfb2; font-family: "Cormorant Garamond", Georgia, serif; }
.stash-page.is-loading .stash-stage { visibility: hidden; }
.stash-stage { position: relative; isolation: isolate; width: 100vw; height: 100dvh; overflow: hidden; }
.stash-art, .stash-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.stash-art img { object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; }
.stash-panel {
  position: absolute; top: 48%; left: 45%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; width: min(37vw, 560px); height: min(52dvh, 520px);
  min-width: 360px; padding: clamp(16px, 2vw, 25px); overflow: hidden;
  border: 1px solid rgba(219, 171, 86, .72); border-radius: 7px;
  background: rgba(9, 12, 27, .88); box-shadow: inset 0 0 0 1px rgba(92, 64, 33, .75), inset 0 0 28px rgba(220, 157, 67, .08), 0 15px 38px rgba(0, 0, 0, .5);
}
.stash-panel__header { flex: none; text-align: center; }
.stash-panel__eyebrow, .stash-panel__notice, .stash-detail__eyebrow { margin: 0; color: #cfaa6b; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.stash-panel h1 { margin: 6px 0 7px; color: #f9e6be; font-size: clamp(22px, 2.1vw, 31px); font-weight: 400; letter-spacing: .045em; text-transform: uppercase; text-shadow: 0 2px 6px #000; }
.stash-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 9px; flex: 1; min-height: 0; margin-top: 13px; overflow: auto; scrollbar-color: #9a6c36 #101727; }
.stash-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 94px; padding: 8px 5px; border: 1px solid rgba(160, 119, 62, .67); border-radius: 4px; background: rgba(7, 13, 31, .76); color: #f1d39b; font: inherit; cursor: pointer; text-align: center; box-shadow: inset 0 0 13px rgba(185, 125, 50, .06); }
.stash-slot--unknown { color: #aa9b86; border-color: rgba(131, 113, 88, .5); }
.stash-slot--empty { color: #80796f; border-style: dashed; }
.stash-slot[aria-pressed="true"] { border-color: #f6d18b; box-shadow: inset 0 0 17px rgba(228, 162, 63, .17), 0 0 11px rgba(230, 174, 79, .3); }
.stash-slot__mark { color: #eac27b; font-size: 24px; line-height: 1; }
.stash-slot--unknown .stash-slot__mark, .stash-slot--empty .stash-slot__mark { color: inherit; }
.stash-slot__name { margin-top: 8px; font-size: 11px; line-height: 1.15; }
.stash-slot__quantity { position: absolute; right: 5px; top: 5px; font-size: 11px; }
.stash-slot:focus-visible, .stash-return:focus-visible, .stash-detail__close:focus-visible { outline: 2px solid #f6d18b; outline-offset: 3px; }
.stash-return { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(23px, env(safe-area-inset-bottom)); z-index: 1; min-height: 44px; display: inline-flex; align-items: center; padding: 8px 17px; border: 1px solid rgba(225, 173, 84, .76); border-radius: 999px; background: rgba(10, 13, 30, .86); color: #f6d494; font-size: 13px; text-decoration: none; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.stash-detail { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px; border: 1px solid #c99d58; border-radius: 8px; background: #10172b; color: #f5dfb5; font-family: "Cormorant Garamond", Georgia, serif; box-shadow: inset 0 0 24px rgba(191, 127, 55, .13), 0 20px 50px rgba(0, 0, 0, .72); }
.stash-detail::backdrop { background: rgba(2, 5, 15, .78); }
.stash-detail__close { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; background: transparent; color: #f4d7a1; font: 30px/1 "Cormorant Garamond", Georgia, serif; cursor: pointer; }
.stash-detail__title { margin: 9px 36px 12px 0; font-size: 27px; font-weight: 400; }
.stash-detail__meta, .stash-detail__source { color: #d1b27c; font-size: 14px; }
.stash-detail__description { font-size: 16px; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) {
  .stash-slot:hover { border-color: #dfb36e; box-shadow: inset 0 0 17px rgba(228, 162, 63, .15); }
  .stash-return:hover { border-color: #f4d391; box-shadow: 0 0 13px rgba(235, 184, 91, .32); }
}
@media (min-width: 700px) and (max-width: 1199px) {
  .stash-panel { left: 52%; width: min(48vw, 520px); min-width: 340px; height: min(51dvh, 560px); }
  .stash-panel h1 { font-size: clamp(22px, 2.7vw, 28px); }
}
@media (min-width: 700px) and (max-width: 1199px) and (orientation: portrait) {
  .stash-panel { top: 49%; left: 52%; width: min(53vw, 520px); height: min(49dvh, 580px); }
}
@media (max-width: 699px) {
  .stash-panel { top: 48%; left: 50%; width: min(79vw, 420px); min-width: 0; height: min(51dvh, 490px); padding: 14px; }
  .stash-panel h1 { font-size: clamp(19px, 5.3vw, 25px); }
  .stash-panel__eyebrow, .stash-panel__notice { font-size: 9px; }
  .stash-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
  .stash-slot { min-height: 84px; }
  .stash-slot__name { font-size: 10px; }
  .stash-return { right: max(12px, env(safe-area-inset-right)); bottom: max(13px, env(safe-area-inset-bottom)); font-size: 12px; }
}

/* Desktop labels are attached to their islands. Compact layouts use the shared
   safe-area frame declared above so every realm keeps the same title slot. */
@media (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .island > .world-island-title {
  position: absolute !important;
  z-index: 3 !important;
  top: auto !important;
  bottom: calc(100% + 28px) !important;
  left: 50% !important;
  display: block !important;
  width: 118% !important;
  max-width: 24ch;
  margin: 0 !important;
  color: #fff8e8 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(14px, 1.55vw, 24px) !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  line-height: 1.12;
  text-align: center;
  text-shadow: 0 1px 3px rgba(20, 28, 54, .95), 0 0 9px rgba(255, 226, 158, .4) !important;
  transform: translateX(-50%) !important;
  transform-origin: center bottom;
  opacity: 1 !important;
  pointer-events: none;
    transition: none !important;
  }
}

@media (max-width: 699px) {
  .map-screen,
  .map-ui-layer,
  .ship-navigation { --world-navigation-font-size: clamp(17px, 4.5vw, 19px); }
  .island > .world-island-title {
    font-size: clamp(13px, 4vw, 18px) !important;
    letter-spacing: .1em !important;
  }
}

/* Text-only ship navigation: controls remain full-size tap targets without the former medalions. */
.ship-navigation {
  min-height: 48px !important;
  padding: 0 3px !important;
}
.ship-navigation > :nth-child(2),
.ship-navigation > :nth-child(3) { translate: none !important; }
.ship-nav-item,
.ship-nav-item--with-seal {
  min-height: 44px !important;
  padding: 4px !important;
  align-content: center !important;
  color: #fff8e8;
  font-size: clamp(14px, 1.25vw, 18px) !important;
  font-weight: 600;
  line-height: 1.1;
  text-shadow: 0 1px 3px rgba(20, 28, 54, .9), 0 0 9px rgba(255, 226, 158, .38);
  transition: color 220ms ease, text-shadow 220ms ease;
}
.ship-nav-item--with-seal { grid-template-rows: none; gap: 0; }
.ship-nav-item span { max-width: none; }
.ship-nav-label { position: relative; display: inline-flex; align-items: center; }
.ship-nav-news-badge {
  position: absolute;
  top: -.55em;
  right: -1.25em;
  display: flex;
  width: 1.22em;
  height: 1.22em;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(229, 186, 102, .8);
  border-radius: 50%;
  background: #071a36;
  color: #f3d69d;
  font-size: .66em;
  line-height: 1;
  text-shadow: none;
}
@media (min-width: 1101px) and (min-aspect-ratio: 1/1) and (hover: hover) and (pointer: fine) {
  .ship-nav-item > span {
    transform-origin: center;
    transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
  }
  .ship-nav-item:hover > span,
  .ship-nav-item:focus-visible > span { transform: scale(1.06); }
}
@media (hover: none), (pointer: coarse) {
  .ship-nav-item:active { color: #f4cf78; }
}
@media (max-width: 699px), (max-aspect-ratio: 1/1) {
  .journey-onboarding { top: clamp(64svh, 65svh, 66svh); }
  .ship-navigation { bottom: max(8px, env(safe-area-inset-bottom)) !important; }
  .ship-nav-item,
  .ship-nav-item--with-seal { font-size: clamp(14px, 4vw, 17px) !important; }
}
@media (min-width: 700px) and (max-aspect-ratio: 1/1) {
  .journey-onboarding { top: clamp(63svh, 64svh, 65svh); }
  .ship-nav-item,
  .ship-nav-item--with-seal { font-size: clamp(16px, 2.35vw, 20px) !important; }
}

/* Main-world type scale: device-specific sizes without moving the island artwork. */
.ship-nav-item,
.ship-nav-item--with-seal {
  text-shadow: 0 1px 2px rgba(15, 10, 12, .78);
}

@media (max-width: 699px) {
  .island > .world-island-title {
    font-size: clamp(28px, 7.45vw, 30px) !important;
    line-height: 1.04;
  }
  .story-category.category-link {
    max-width: 148px;
    min-height: 48px;
    font-size: var(--world-navigation-font-size) !important;
    line-height: 1.05;
  }
  .story-category.category-link .category-label { max-width: 138px; }
  .story-category.category-link.is-central-category { font-size: calc(var(--world-navigation-font-size) * 1.14) !important; }
  .journey-onboarding { font-size: clamp(17px, 4.6vw, 18px) !important; }
  .ship-nav-item,
  .ship-nav-item--with-seal { font-size: var(--world-navigation-font-size) !important; }
  .gamers-frontiers-island-ui,
  .wanderers-city-island-ui,
  .isekari-portal-island-ui { font-size: clamp(17px, 4.55vw, 18px) !important; }
  .gamers-frontiers-island-ui small,
  .wanderers-city-island-ui small,
  .isekari-portal-island-ui small { font-size: 16px !important; }
}

@media (min-width: 700px) and (max-width: 1100px) {
  .map-screen,
  .map-ui-layer,
  .ship-navigation { --world-navigation-font-size: clamp(19px, 2.5vw, 22px); }
  .island > .world-island-title {
    font-size: clamp(32px, 4.35vw, 36px) !important;
    line-height: 1.06;
  }
  .story-category.category-link {
    max-width: 174px;
    min-height: 52px;
    font-size: var(--world-navigation-font-size) !important;
    line-height: 1.08;
  }
  .story-category.category-link .category-label { max-width: 164px; }
  .story-category.category-link.is-central-category { font-size: calc(var(--world-navigation-font-size) * 1.14) !important; }
  .journey-onboarding { font-size: clamp(19px, 2.55vw, 21px) !important; }
  .ship-nav-item,
  .ship-nav-item--with-seal { font-size: var(--world-navigation-font-size) !important; }
  .gamers-frontiers-island-ui,
  .wanderers-city-island-ui,
  .isekari-portal-island-ui { font-size: clamp(19px, 2.6vw, 21px) !important; }
  .gamers-frontiers-island-ui small,
  .wanderers-city-island-ui small,
  .isekari-portal-island-ui small { font-size: 18px !important; }
}

@media (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .journey-onboarding {
    top: 13.5%;
    left: 22%;
    width: min(24vw, 380px);
    opacity: 1;
    padding: 10px 15px;
    border: 1px solid rgba(235, 210, 164, .15);
    border-radius: 14px;
    background: rgba(7, 25, 48, .24);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(3, 12, 28, .1), inset 0 1px 0 rgba(255, 255, 255, .07);
    color: #fff4e2;
    text-shadow: 0 1px 5px rgba(5, 17, 38, .48);
    animation: journey-onboarding-desktop-hint 4.2s ease-in-out infinite;
    transition: opacity 300ms ease, visibility 0s linear;
  }
  .journey-onboarding-desktop { animation: none; }
  .journey-onboarding.is-complete {
    visibility: hidden;
    pointer-events: none;
    animation: none;
    opacity: 0;
    transition: opacity 300ms ease, visibility 0s linear 300ms;
  }
  .island > .world-island-title {
    font-size: clamp(36px, 2.45vw, 42px) !important;
    line-height: 1.08;
  }
  .story-category.category-link {
    max-width: 184px;
    min-height: 54px;
    font-size: clamp(22px, 1.55vw, 25px) !important;
    line-height: 1.08;
  }
  .story-category.category-link .category-label { max-width: 174px; }
  .story-category.category-link.is-central-category { font-size: clamp(34px, 2.45vw, 38px) !important; }
  .journey-onboarding { font-size: clamp(20px, 1.35vw, 22px) !important; }
  .ship-nav-item,
  .ship-nav-item--with-seal { font-size: clamp(22px, 1.55vw, 25px) !important; }
  .gamers-frontiers-island-ui,
  .wanderers-city-island-ui,
  .isekari-portal-island-ui { font-size: clamp(20px, 1.4vw, 22px) !important; }
  .gamers-frontiers-island-ui small,
  .wanderers-city-island-ui small,
  .isekari-portal-island-ui small { font-size: 19px !important; }
}

@keyframes journey-onboarding-desktop-hint {
  0%, 100% { opacity: .52; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .journey-onboarding { animation: none; opacity: 1; }
  .journey-onboarding.is-complete { opacity: 0; }
}

/* Keep labels crisp over the artwork: the mist is a separate, cool-blue layer. */
.story-category.category-link,
.story-category.category-link .category-label,
.gamers-frontiers-island-ui,
.wanderers-city-island-ui,
.isekari-portal-island-ui {
  color: #fff8e8;
  text-shadow: 0 2px 4px rgba(7, 15, 35, .95), 0 0 8px rgba(7, 15, 35, .75), 0 0 12px rgba(255, 226, 158, .24);
}
/* A single reusable label system: text and ornament sit above a soft island-local veil. */
.artifacts-island-ui, .story-island-ui:not(.city-lights-ui) {
  --world-label-size: clamp(22px, 1.55vw, 25px);
  --world-label-featured-size: clamp(34px, 2.45vw, 38px);
  --world-label-ornament: rgba(255, 230, 178, .98);
  --world-label-veil: rgba(3, 13, 31, .78);
}
.story-category.category-link.world-label {
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 88px;
  max-width: 190px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  color: #fff8e8;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--world-label-size) !important;
  font-weight: 600;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 2px 4px rgba(4, 11, 26, .98), 0 0 9px rgba(5, 15, 34, .8);
  isolation: isolate;
}
.story-category.category-link.world-label--featured {
  font-size: var(--world-label-featured-size) !important;
}
.world-label::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: calc(100% + 52px);
  height: calc(100% + 34px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 44%, var(--world-label-veil) 0%, rgba(4, 15, 36, .58) 32%, rgba(5, 19, 43, .25) 59%, transparent 79%);
  filter: blur(5px);
  opacity: .88;
  transition: transform 275ms cubic-bezier(.22, 1, .36, 1), opacity 275ms ease;
}
.story-category.category-link.world-label .world-label__text {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 170px;
  color: inherit;
  font: inherit;
  line-height: inherit;
  white-space: normal;
}
.world-label .world-label__text::before { content: none; }
.story-category.category-link.artifacts-category-special .world-label__text {
  width: 128px;
  max-width: 128px;
}
.world-label__ornament {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(66px, 6.7vw, 96px);
  height: 10px;
  flex: none;
  background:
    linear-gradient(90deg, rgba(255, 230, 178, .42), var(--world-label-ornament)) left center / calc(50% - 8px) 2px no-repeat,
    linear-gradient(90deg, var(--world-label-ornament), rgba(255, 230, 178, .42)) right center / calc(50% - 8px) 2px no-repeat;
  transition: filter 275ms ease;
}
.world-label__ornament::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid var(--world-label-ornament);
  background: rgba(255, 235, 190, .72);
  transform: translate(-50%, -50%) rotate(45deg);
}
/* Only real desktop pointers animate the complete interactive island label. */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .story-category.category-link:is(button, a):not(:disabled):not(.is-locked):is(:hover, :focus-visible) {
    z-index: 4;
    color: #fff8e8;
    transform: translate(-50%, -50%) scale(1.06);
    text-shadow: 0 2px 4px rgba(4, 11, 26, .98), 0 0 12px rgba(255, 243, 210, .5);
  }
  .story-category.category-link:is(button, a):not(:disabled):not(.is-locked):is(:hover, :focus-visible) .category-label {
    text-shadow: 0 2px 4px rgba(4, 11, 26, .98), 0 0 12px rgba(255, 243, 210, .55), 0 0 19px rgba(255, 226, 158, .24);
  }
  .story-category.category-link:is(button, a):not(:disabled):not(.is-locked):is(:hover, :focus-visible) .category-label::before {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
  .story-category.category-link.world-label:is(:hover, :focus-visible)::before {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
  .story-category.category-link.world-label:is(:hover, :focus-visible) .world-label__ornament {
    filter: brightness(1.18) drop-shadow(0 0 5px rgba(255, 218, 154, .55));
  }
}
@media (prefers-reduced-motion: reduce) {
  .category-link .category-label,
  .world-label::before,
  .world-label__ornament { transition: none; }
}
.island > .world-island-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: clamp(130px, 17vw, 230px);
  height: 1px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, transparent, rgba(255, 229, 174, .84)) left center / calc(50% - 11px) 1px no-repeat,
    linear-gradient(90deg, rgba(255, 229, 174, .84), transparent) right center / calc(50% - 11px) 1px no-repeat;
}
.island > .world-island-title::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 229, 174, .9);
  background: rgba(255, 237, 195, .8);
  transform: translateX(-50%) rotate(45deg);
}
@media (min-width: 700px) and (max-width: 1100px) {
  .artifacts-island-ui, .story-island-ui:not(.city-lights-ui) {
    --world-label-size: clamp(19px, 2.5vw, 22px);
    --world-label-featured-size: clamp(27px, 3.6vw, 31px);
  }
  .island-world .island-01[data-journey-state],
  .island-world .island-03[data-journey-state],
  .story-island-ui:not(.city-lights-ui),
  .artifacts-island-ui {
    left: 2vw !important;
    top: calc(var(--compact-island-top) - 4svh) !important;
    width: 96vw !important;
    height: 48svh !important;
  }
  .artifacts-category-cards { left: 19%; top: 29%; }
  .artifacts-category-gadgets { left: 81%; top: 29%; }
  .artifacts-category-artbooks { left: 20%; top: 63%; }
  .artifacts-category-collections { left: 80%; top: 63%; }
  .story-island-ui .story-category-manhwa { left: 26.5%; top: 25.5%; }
  .story-island-ui .story-category-manhua { left: 75.5%; top: 25.5%; }
  .story-island-ui .story-category-manga { left: 50.5%; top: 45.5%; }
  .story-island-ui .story-category-creators { left: 15.5%; top: 51.5%; }
  .story-island-ui .story-category-discover { left: 85.5%; top: 51.5%; }
  .story-island-ui .story-category-webtoony { left: 34.5%; top: 75.5%; }
  .story-island-ui .story-category-novel { left: 66.5%; top: 75.5%; }
  .story-categories { inset: auto !important; left: 50% !important; top: 50% !important; }
  .world-label__ornament { width: 76px; }
}
@media (max-width: 699px) {
  .artifacts-island-ui, .story-island-ui:not(.city-lights-ui) {
    --world-label-size: clamp(15px, 4vw, 17px);
    --world-label-featured-size: clamp(22px, 5.7vw, 25px);
  }
  .island-world .island-01[data-journey-state],
  .island-world .island-03[data-journey-state],
  .story-island-ui:not(.city-lights-ui),
  .artifacts-island-ui {
    left: 0 !important;
    top: calc(var(--compact-island-top) - 1svh) !important;
    width: 100vw !important;
    height: 38svh !important;
  }
  .story-category.category-link.world-label { min-width: 64px; min-height: 48px; gap: 1px; padding: 2px 3px; }
  .story-category.category-link.artifacts-category-special .world-label__text { width: 94px; max-width: 94px; }
  .artifacts-category-cards { left: 19%; top: 27%; }
  .artifacts-category-gadgets { left: 81%; top: 27%; }
  .artifacts-category-figures { top: 41%; }
  .artifacts-category-artbooks { left: 19%; top: 63%; }
  .artifacts-category-collections { left: 81%; top: 63%; }
  .artifacts-category-special { top: 69%; }
  .artifacts-category-discover { top: 92%; }
  .story-island-ui .story-category-manhwa { left: 25.5%; top: 25%; }
  .story-island-ui .story-category-manhua { left: 76.5%; top: 25%; }
  .story-island-ui .story-category-manga { left: 50.5%; top: 45%; }
  .story-island-ui .story-category-creators { left: 14%; top: 51%; }
  .story-island-ui .story-category-discover { left: 87%; top: 51%; }
  .story-island-ui .story-category-webtoony { left: 33.5%; top: 77%; }
  .story-island-ui .story-category-novel { left: 67.5%; top: 77%; }
  .story-categories { inset: auto !important; left: 50% !important; top: 50% !important; }
  .world-label__ornament { width: 64px; height: 8px; }
}
/* Touch category labels retain their type scale; only their decoration and hit areas change. */
@media (max-width: 1100px) {
  .story-category.category-link:is(button, a):not(.is-locked) {
    min-width: 44px;
    min-height: 44px;
    pointer-events: auto;
    touch-action: manipulation;
  }
  .story-category.category-link .category-label {
    text-shadow: 0 1px 3px rgba(7, 15, 35, .78), 0 0 4px rgba(7, 15, 35, .28);
  }
  .story-category.category-link .category-label::before {
    width: calc(100% + 18px);
    height: calc(100% + 10px);
    background: radial-gradient(ellipse at center, rgba(8, 20, 48, .34), rgba(15, 31, 65, .12) 46%, transparent 76%);
    filter: blur(3px);
  }
  .story-category.category-link.world-label::before {
    width: calc(100% + 20px);
    height: calc(100% + 12px);
    background: radial-gradient(ellipse at center, rgba(3, 13, 31, .46), rgba(4, 15, 36, .16) 46%, transparent 76%);
    filter: blur(3px);
    opacity: .75;
  }
  .story-category.category-link.world-label .world-label__ornament { display: none; }
  .story-category.category-link:is(button, a):not(.is-locked):active .category-label { opacity: .86; }
}
@media (min-width: 700px) and (max-width: 1100px) {
  .artifacts-category-discover { top: 90%; }
}
.gamers-frontiers-island-ui p,
.wanderers-city-island-ui p,
.isekari-portal-island-ui p {
  position: relative;
  z-index: 0;
  background: none;
}
.gamers-frontiers-island-ui p::before,
.wanderers-city-island-ui p::before,
.isekari-portal-island-ui p::before {
  content: "";
  position: absolute;
  inset: -10px -16px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(10, 24, 55, .38) 0%, rgba(18, 35, 70, .22) 48%, transparent 76%);
  filter: blur(6px);
}

/* An island title remains attached to its island; only neighbouring titles use the compact variant. */
@media (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .island > .world-island-title[data-journey-state="active"] {
    top: auto !important;
    bottom: calc(100% + 28px) !important;
  }
  .island > .world-island-title[data-journey-state="previous"],
  .island > .world-island-title[data-journey-state="next"] {
    top: auto !important;
    bottom: calc(100% + 16px) !important;
    width: 100% !important;
    max-width: 100%;
    font-size: clamp(20px, 1.5vw, 28px) !important;
    letter-spacing: .075em !important;
    line-height: 1.08;
    opacity: .68 !important;
  }
}

/* The Anime realm is a single calm destination, not a cluster of map controls. */
.island-world .island.island-city-lights > .world-island-title.city-lights-title,
.island-world .island.island-01 > .world-island-title.story-island-manga-title {
  width: 100% !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  justify-items: center;
  align-items: center;
  gap: .12em;
  white-space: nowrap;
  line-height: 1 !important;
  text-wrap: balance;
}
.city-lights-title::before,
.city-lights-title::after,
.story-island-manga-title::before,
.story-island-manga-title::after { content: none !important; }
.city-lights-title__place { display: block; grid-column: 1; }
.city-lights-title__domain {
  display: block;
  grid-column: 1;
  color: #fff3d3;
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .2em;
  text-shadow: 0 1px 4px rgba(7, 20, 45, .96), 0 0 9px rgba(255, 218, 145, .46);
}
.city-lights-title__ornament {
  display: flex;
  grid-column: 1;
  width: min(6.2em, 78%);
  align-items: center;
  gap: .28em;
  color: #f7d58d;
  font-size: .48em;
  line-height: .75;
  opacity: .82;
}
.city-lights-title__ornament::before,
.city-lights-title__ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247, 213, 141, .7));
  box-shadow: 0 0 6px rgba(247, 213, 141, .16);
}
.city-lights-title__ornament::after { transform: scaleX(-1); }
.island-city-lights .island-asset,
.island-01 .island-asset {
  transition: transform 620ms ease-out, filter 620ms ease-out;
  transform-origin: 50% 58%;
}
@media (hover: hover) and (pointer: fine) {
  .island-city-lights:has(.island-hitbox:hover) .island-asset,
  .island-city-lights:has(.island-hitbox:focus-visible) .island-asset,
  .island-01:has(.island-hitbox:hover) .island-asset,
  .island-01:has(.island-hitbox:focus-visible) .island-asset {
    transform: translateY(-5px) scale(1.008);
    filter: brightness(1.07) saturate(1.035) drop-shadow(0 10px 18px rgba(255, 214, 139, .2));
  }
}
@media (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .island-world .island.island-01[data-journey-state="active"] {
    left: 33% !important;
    top: 24% !important;
    width: 34% !important;
    height: 42% !important;
  }
  .island-world .island.island-city-lights > .world-island-title.city-lights-title[data-journey-state="active"] {
    bottom: calc(100% - 14px) !important;
  }
  .island-world .island.island-01 > .world-island-title.story-island-manga-title[data-journey-state="active"] {
    bottom: calc(100% - 14px) !important;
  }
  .journey-onboarding {
    top: 35% !important;
    left: 20% !important;
    width: min(28vw, 400px) !important;
    padding: 7px 11px !important;
    font-size: 16px !important;
    line-height: 1.25;
  }
}
@media (max-width: 1100px) {
  .island-world .island.island-city-lights > .world-island-title.city-lights-title,
  .island-world .island.island-01 > .world-island-title.story-island-manga-title {
    font-size: clamp(22px, 4.2vw, 30px) !important;
    letter-spacing: .11em !important;
    gap: .1em;
  }
  .journey-onboarding-touch { display: grid !important; gap: 2px; }
  .journey-onboarding-touch__line { display: block; white-space: nowrap; }
  .journey-onboarding {
    color: rgba(255, 244, 222, .9);
    letter-spacing: .02em;
    text-shadow: 0 1px 5px rgba(4, 13, 34, .92), 0 0 7px rgba(246, 204, 130, .16);
    animation: journey-onboarding-touch-subtle 4.8s ease-in-out infinite !important;
  }
  .journey-onboarding::before {
    inset: -7px -14px;
    background: radial-gradient(ellipse at center, rgba(4, 14, 38, .42) 0%, rgba(4, 14, 38, .18) 52%, transparent 100%);
    filter: blur(6px);
  }
  .city-lights-title__domain { font-size: .72em; text-shadow: 0 1px 4px rgba(7, 20, 45, 1), 0 0 10px rgba(255, 218, 145, .56); }
}
@media (min-width: 700px) and (max-width: 1100px) {
  .island-world .island.island-01[data-journey-state] {
    left: 3vw !important;
    top: var(--compact-island-top) !important;
    width: 94vw !important;
    height: 36svh !important;
  }
  .island-world .island.island-city-lights > .world-island-title.city-lights-title[data-journey-state="active"] {
    bottom: calc(100% - 12px) !important;
  }
  .island-world .island.island-01 > .world-island-title.story-island-manga-title[data-journey-state="active"] {
    bottom: calc(100% - 12px) !important;
  }
  .journey-onboarding {
    top: 62% !important;
    width: min(52vw, 360px) !important;
    font-size: 14px !important;
    line-height: 1.35;
  }
}
@media (max-width: 699px) {
  .island-world .island.island-01[data-journey-state] {
    left: 3vw !important;
    top: var(--compact-island-top) !important;
    width: 94vw !important;
    height: 36svh !important;
  }
  .island-world .island.island-city-lights > .world-island-title.city-lights-title[data-journey-state="active"] {
    bottom: calc(100% - 10px) !important;
  }
  .island-world .island.island-01 > .world-island-title.story-island-manga-title[data-journey-state="active"] {
    bottom: calc(100% - 10px) !important;
  }
  .city-lights-title__domain { font-size: .76em; font-weight: 600; letter-spacing: .18em; }
  .journey-onboarding {
    top: 62% !important;
    width: min(78vw, 300px) !important;
    font-size: 13px !important;
    line-height: 1.35;
  }
}
@keyframes journey-onboarding-touch-subtle {
  0%, 100% { opacity: .58; }
  50% { opacity: .78; }
}
@media (prefers-reduced-motion: reduce) {
  .island-city-lights .island-asset, .island-01 .island-asset { transition-duration: 160ms; }
  .journey-onboarding { animation: none !important; opacity: .72; }
}

/* Kontakt: a quiet, readable page that shares the ISEKARI colour and type system. */
.contact-page { position: relative; isolation: isolate; min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; overflow-y: auto; background: #567eae; color: #10284b; font-family: "Cormorant Garamond", Georgia, serif; }
.contact-page::before { content: ""; position: fixed; z-index: 0; inset: 0; height: 100svh; pointer-events: none; background: linear-gradient(rgba(5, 20, 43, .15), rgba(5, 20, 43, .23)), url("assets/contact-background-landscape.png") center / cover no-repeat; }
html:has(body.contact-page) { overflow-y: auto; }
.contact-page__main { position: relative; z-index: 1; box-sizing: border-box; width: min(100% - 48px, 1040px); min-height: 100vh; margin: 0 auto; padding: 34px 0 72px; }
.contact-page__back { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: #e8c675; font-size: 17px; font-weight: 600; letter-spacing: .03em; text-decoration: none; }
.contact-page__back:hover, .contact-page__back:focus-visible { color: #fff1ce; }
.contact-page__back:focus-visible, .contact-button:focus-visible, .contact-field :focus-visible { outline: 2px solid #f7d58d; outline-offset: 3px; }
.contact-page__brand { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 4px auto 38px; color: #f3d39a; text-align: left; }
.contact-page__brand img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35)); }
.contact-page__brand strong, .contact-page__brand small { display: block; }
.contact-page__brand strong { font-size: clamp(30px, 4vw, 42px); font-weight: 500; letter-spacing: .24em; line-height: 1; }
.contact-page__brand small { margin-top: 7px; color: rgba(243, 211, 154, .82); font-size: 11px; font-weight: 600; letter-spacing: .2em; }
.contact { width: min(100%, 860px); margin: 0 auto; }
.contact__intro { max-width: 650px; margin: 20px auto 42px; text-align: center; }
.contact__eyebrow { margin: 0 0 12px; color: #e8c675; font-size: 14px; font-weight: 600; letter-spacing: .2em; }
.contact h1 { margin: 0; color: #fffdf7; font-size: clamp(38px, 5.4vw, 60px); font-weight: 600; letter-spacing: .045em; line-height: 1; text-shadow: 0 1px 3px rgba(7, 20, 42, .78); }
.contact__intro > p:last-child { margin: 18px 0 0; color: #edf6ff; font-size: clamp(18px, 2.2vw, 22px); font-weight: 500; line-height: 1.45; text-shadow: 0 1px 3px rgba(7, 20, 42, .72); }
.contact__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact-choice, .contact-report, .contact-privacy { border: 1px solid rgba(255, 241, 208, .56); border-radius: 14px; background: rgba(204, 220, 236, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 10px 24px rgba(17, 47, 82, .12); backdrop-filter: blur(18px) saturate(118%); -webkit-backdrop-filter: blur(18px) saturate(118%); }
.contact-choice { display: flex; flex-direction: column; min-height: 218px; box-sizing: border-box; padding: clamp(27px, 4vw, 38px); }
.contact-choice h2, .contact-report h2, .contact-privacy h2 { margin: 0; color: #fffdf7; font-size: clamp(21px, 2.3vw, 26px); font-weight: 600; letter-spacing: .045em; line-height: 1.12; text-shadow: 0 1px 3px rgba(7, 20, 42, .78); }
.contact-choice p { margin: 14px 0 26px; color: #e9f3ff; font-size: 18px; font-weight: 500; line-height: 1.38; text-shadow: 0 1px 3px rgba(7, 20, 42, .66); }
.contact-button { display: inline-flex; width: fit-content; min-width: 44px; min-height: 44px; box-sizing: border-box; align-items: center; justify-content: center; margin-top: auto; border: 1px solid rgba(235, 210, 154, .78); border-radius: 999px; padding: 10px 21px; background: rgba(5, 42, 81, .88); color: #fff8e8; font: 600 18px/1.1 "Cormorant Garamond", Georgia, serif; letter-spacing: .02em; text-decoration: none; cursor: pointer; box-shadow: 0 5px 13px rgba(10, 42, 75, .22); transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease; }
.contact-button:hover { border-color: rgba(255, 236, 186, .96); background: rgba(7, 56, 105, .94); color: #fff; box-shadow: 0 7px 16px rgba(10, 42, 75, .3); }
.contact-report { margin-top: 44px; padding: clamp(26px, 4vw, 38px); }
.contact-report[hidden] { display: none; }
.contact-report form { display: grid; gap: 19px; margin-top: 24px; }
.contact-field { display: grid; gap: 8px; }
.contact-field label { color: #f6fbff; font-size: 18px; font-weight: 600; letter-spacing: .01em; text-shadow: 0 1px 3px rgba(7, 20, 42, .72); }
.contact-field abbr, .contact-form__required abbr { color: #f4cf78; text-decoration: none; }
.contact-field input, .contact-field select, .contact-field textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(255, 245, 220, .72); border-radius: 8px; padding: 11px 12px; background: rgba(247, 250, 255, .58); color: #143355; font: 500 18px/1.35 "Cormorant Garamond", Georgia, serif; }
.contact-field textarea { min-height: 112px; resize: vertical; }
.contact-field select { min-height: 46px; }
.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-attachment { display: grid; gap: 8px; }
.contact-attachment__label { color: #f6fbff; font-size: 18px; font-weight: 600; letter-spacing: .01em; text-shadow: 0 1px 3px rgba(7, 20, 42, .72); }
.contact-attachment__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.contact-attachment__controls { display: flex; min-height: 46px; align-items: center; gap: 10px; border: 1px solid rgba(255, 245, 220, .72); border-radius: 8px; padding: 6px 10px; background: rgba(247, 250, 255, .48); }
.contact-attachment__select, .contact-attachment__remove { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; border: 1px solid rgba(235, 210, 154, .68); border-radius: 999px; padding: 5px 12px; background: rgba(5, 42, 81, .82); color: #fff8e8; font: 600 15px/1.1 "Cormorant Garamond", Georgia, serif; cursor: pointer; }
.contact-attachment__name { min-width: 0; overflow: hidden; color: rgba(241, 248, 255, .9); font-size: 16px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgba(7, 20, 42, .64); }
.contact-attachment__remove { margin-left: auto; background: transparent; color: #17395f; }
.contact-attachment small { color: rgba(232, 243, 255, .78); font-size: 14px; text-shadow: 0 1px 3px rgba(7, 20, 42, .62); }
.contact-attachment__error { min-height: 1.2em; margin: 0; color: #8d2734; font-size: 15px; font-weight: 600; }
.contact-button:disabled { cursor: wait; opacity: .7; }
.contact-form__required { margin: -5px 0 0; color: rgba(232, 243, 255, .8); font-size: 15px; text-shadow: 0 1px 3px rgba(7, 20, 42, .62); }
.contact-button--submit { margin-top: 4px; }
.contact-form__status { min-height: 1.4em; margin: 0; color: #edf6ff; font-size: 17px; line-height: 1.35; white-space: pre-line; text-shadow: 0 1px 3px rgba(7, 20, 42, .68); }
.contact-privacy { margin-top: 48px; padding: 22px clamp(24px, 3vw, 30px); }
.contact-privacy h2 { font-size: 18px; }
.contact-privacy p { max-width: 720px; margin: 10px 0 0; color: rgba(232, 243, 255, .88); font-size: 16px; font-weight: 500; line-height: 1.45; text-shadow: 0 1px 3px rgba(7, 20, 42, .66); }
.contact-privacy strong { color: #fffdf7; font-weight: 600; }
.contact-privacy a { color: #f3d39a; text-underline-offset: 3px; }
.contact-page__main--policy { display: grid; align-content: start; }
.contact-policy { margin-top: clamp(80px, 14vh, 160px); text-align: center; }
.contact-policy > p:last-child { margin-top: 18px; font-size: 20px; }
@media (max-width: 1100px) {
  .contact-page { --contact-hero-height: 100svh; background-color: #5b4032; background-image: linear-gradient(180deg, #5b4032 0 var(--contact-hero-height), #43556a calc(var(--contact-hero-height) + 28svh), #263d53 100%); }
  .contact-page::before { position: absolute; inset: 0; height: auto; min-height: 100%; background-size: 100% var(--contact-hero-height), auto var(--contact-hero-height); background-repeat: no-repeat; background-position: center top; }
  .contact__choices { grid-template-columns: 1fr; }
  .contact-page__main { width: min(100% - 44px, 760px); padding-top: 28px; padding-bottom: 56px; }
  .contact h1 { font-size: clamp(36px, 5vw, 46px); }
  .contact__intro > p:last-child { font-size: clamp(16px, 2.15vw, 19px); }
  .contact-choice { min-height: 0; padding: 28px; }
  .contact-choice h2, .contact-report h2, .contact-privacy h2 { font-size: clamp(20px, 2.35vw, 23px); }
  .contact-choice p { font-size: 17px; }
  .contact-field label, .contact-attachment__label { font-size: 17px; }
  .contact-field input, .contact-field select, .contact-field textarea { font-size: 17px; }
  .contact-attachment__name { font-size: 15px; }
  .contact-attachment small, .contact-form__required, .contact-attachment__error { font-size: 14px; }
  .contact-form__status { font-size: 16px; }
  .contact-privacy p { font-size: 15px; }
}
@media (min-width: 700px) and (max-width: 1100px) and (max-aspect-ratio: 1/1) {
  .contact-page::before { background-image: linear-gradient(rgba(5, 20, 43, .12), rgba(5, 20, 43, .2)), url("assets/contact-background-portrait.png"); background-position: center top; }
}
@media (max-width: 699px) {
  .contact-page::before { background-image: linear-gradient(rgba(5, 20, 43, .12), rgba(5, 20, 43, .2)), url("assets/contact-background-portrait.png"); background-position: center top; }
  .contact-page__main { width: min(100% - 36px, 620px); padding-top: 20px; padding-bottom: 46px; }
  .contact__intro { margin-top: 14px; margin-bottom: 30px; }
  .contact h1 { font-size: clamp(32px, 9vw, 36px); }
  .contact__intro > p:last-child { font-size: 16px; line-height: 1.4; }
  .contact__choices { gap: 14px; }
  .contact-choice { min-height: 0; padding: 22px; }
  .contact-choice h2, .contact-report h2, .contact-privacy h2 { font-size: 19px; }
  .contact-choice p { margin-bottom: 22px; font-size: 16px; }
  .contact-report { margin-top: 34px; padding: 24px 20px; }
  .contact-privacy { margin-top: 34px; padding: 22px; }
  .contact-field label, .contact-attachment__label { font-size: 16px; }
  .contact-field input, .contact-field select, .contact-field textarea { font-size: 16px; }
  .contact-privacy p { font-size: 14px; }
  .contact-attachment__controls { flex-wrap: wrap; }
  .contact-attachment__name { flex: 1 1 130px; }
}
.global-nav { position: relative; z-index: 18; width: 100%; min-height: 64px; border-bottom: 1px solid rgba(230, 194, 116, .22); background: rgba(7, 25, 48, .68); -webkit-backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%); color: #f4e7cb; font-family: var(--isekari-font-ui); pointer-events: auto; }
.inventory-page [data-global-navigation] { position: fixed; z-index: 18; top: 0; left: 0; right: 0; }
.stash-page [data-global-navigation], .chronicle-page [data-global-navigation] { position: relative; z-index: 18; }
.stash-page .stash-stage, .chronicle-page .chronicle-stage { height: calc(100dvh - 64px); }
.inventory-page .world-return-button { pointer-events: none; }
.global-nav--world { position: absolute; top: 0; left: 0; right: 0; }
.global-nav__inner { display: flex; width: 100%; min-height: 64px; align-items: center; gap: clamp(14px, 2vw, 30px); padding: 0 clamp(14px, 2vw, 30px); white-space: nowrap; }
.global-nav__brand { display: inline-flex; flex: none; align-items: center; gap: 7px; color: #f6ddb1; font: 600 clamp(20px, 2.1vw, 25px)/1 var(--isekari-font-display); letter-spacing: .18em; text-decoration: none; }
.global-nav__brand img { flex: none; width: 37px; height: 37px; object-fit: contain; }
.global-nav__discovery, .global-nav__user { display: flex; align-items: center; gap: clamp(9px, 1.1vw, 18px); }
.global-nav__discovery { margin-right: auto; }
.global-nav__link { display: inline-flex; min-height: 44px; align-items: center; gap: 5px; border: 0; padding: 0; background: transparent; color: #f4e7cb; font: 500 14px/1.2 var(--isekari-font-ui); text-decoration: none; white-space: nowrap; }
button.global-nav__link { cursor: pointer; }
.global-nav__link.is-current { color: #ffe1a9; }
.global-nav__discover { color: #f7dba7; }
.global-nav__discover[disabled] { cursor: default; opacity: .82; }
.global-nav__star { color: #e8c675; font-size: 19px; line-height: 1; }
.global-nav__lock { margin-left: 2px; font-size: 11px; filter: grayscale(.5); }
.global-nav__news, .global-nav__cabin { color: rgba(238, 223, 192, .67); }
.global-nav__icon { position: relative; display: grid; flex: none; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(232, 198, 117, .24); border-radius: 50%; padding: 0; background: rgba(10, 27, 57, .16); color: #f0d6a1; cursor: pointer; }
.global-nav__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.global-nav__icon.is-menu-open svg { opacity: 0; }
.global-nav__icon.is-menu-open::after { content: '×'; position: absolute; font: 400 28px/1 var(--isekari-font-display); }
.global-nav__brand:hover, .global-nav__link:not([disabled]):hover, .global-nav__icon:hover { color: #fff3d7; }
.global-nav a:focus-visible, .global-nav button:focus-visible { outline: 2px solid #f7d58d; outline-offset: 3px; }
.hamburger-menu__footer a { display: inline-flex; min-height: 44px; align-items: center; color: inherit; text-decoration: none; }
.hamburger-menu__footer a:hover { color: #fff1ce; text-decoration: underline; }
@media (max-width: 1099px) { .global-nav__crew, .global-nav__equipment { display: none; } }
@media (max-width: 879px) { .global-nav__news, .global-nav__cabin { display: none; } }
@media (max-width: 767px) {
  .global-nav__inner { gap: 8px; padding: 0 14px; }
  .global-nav__brand { margin-right: auto; font-size: clamp(18px, 5vw, 22px); letter-spacing: .13em; }
  .global-nav__brand img { width: 32px; height: 32px; }
  .global-nav__world, .global-nav__discover-text { display: none; }
  .global-nav__discovery { margin: 0; }
  .global-nav__discover { width: 44px; justify-content: center; }
  .global-nav__user { gap: 5px; }
}
@media (max-width: 374px) {
  .global-nav__inner { padding: 0 10px; gap: 4px; }
  .global-nav__brand { font-size: 18px; letter-spacing: .1em; }
  .global-nav__user { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .global-nav__icon { transition: none; } }