.logo-slot { position: relative; width: 56px; height: 56px; margin: 0 auto 20px; }
.logo-tile { display: block; border-radius: 16px; transition: opacity .65s ease; }
.intro .intro-logo { position: absolute; inset: 0; width: 56px; height: 56px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transform-origin: 50% 75%; z-index: 3; }
.intro-logo img { display: block; }
.intro-logo:focus-visible, .sailing-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.intro-copy { transition: opacity .5s ease, transform .6s ease; }
.sailing-sea { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.sailing-active .logo-tile, .sailing-active .water-surface { opacity: 0; }
.sailing-active .intro-copy { opacity: 0; transform: translateY(8px); pointer-events: none; }
.sailing-active .intro-logo img, .sailing-active .sailing-sea { opacity: 1; }
.sailing-close { position: absolute; right: 20px; top: 18px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #dce8f4; border-radius: 50%; color: #6c85a6; background: #ffffffb3; cursor: pointer; z-index: 4; }
.sailing-close[hidden] { display: none; }
.sailing-hint { position: absolute; bottom: 15px; left: 20px; right: 20px; color: #6485af; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity .6s; }
.sailing-active .sailing-hint { opacity: 1; }
.sailing-active.sailing-started .sailing-hint { opacity: 0; }
.sailing-active.sailing-danger .sailing-hint { color: #c44949; opacity: 1; }
.sailing-result { position: absolute; z-index: 4; top: 37%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.sailing-result[hidden] { display: none; }
.sailing-result h2 { white-space: nowrap; font-size: 25px; letter-spacing: .08em; color: #35465b; margin-bottom: 16px; }
.sailing-result .button { font: inherit; color: var(--link); cursor: pointer; background: #ffffffd9; }
.sailing-result .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .logo-tile, .intro-copy, .sailing-sea, .sailing-hint { transition: none; }
}