/* =====================================================================================
   Archipelago world (12-worlds-b section A, design/Islands.dc.html). Everything here is scoped to .arc-* or to classes only this world uses.
   ===================================================================================== */
@keyframes arc-rock { 0%, 100% { transform: rotate(-4deg) translateY(0) } 50% { transform: rotate(4deg) translateY(2px) } }
.arc-boat { animation: arc-rock 1s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes arc-ripple { 0% { transform: translateX(0) } 100% { transform: translateX(18px) } }
.arc-wv { animation: arc-ripple 2.6s ease-in-out infinite alternate; }
@keyframes arc-drift { 0% { transform: translateX(0) } 100% { transform: translateX(60px) } }
.arc-cloud { animation: arc-drift 14s ease-in-out infinite alternate; }
@keyframes arc-sway { 0%, 100% { transform: rotate(-3deg) } 50% { transform: rotate(3deg) } }
.arc-palm { animation: arc-sway 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes arc-drain { from { width: 100% } to { width: 8% } }
/* one keyframe for every crossing: --fin is the translate from the dock spot to the landing slot, --z0/--zf the depth at both ends */
@keyframes arc-sail { from { transform: translate(0, 0); z-index: var(--z0) } to { transform: var(--fin); z-index: var(--zf) } }

.arc-page { min-height: 100vh; background-color: #23305A; background-image: radial-gradient(rgba(255,255,255,0.07) 2px, transparent 2px); background-size: 28px 28px; color: #1E1B2E; font-family: 'Nunito', 'Trebuchet MS', sans-serif; }
.arc-col { max-width: 1320px; margin: 0 auto; padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 16px; }
.arc-frame { overflow: hidden; border-radius: 28px; border: 3px solid #1E1B2E; box-shadow: 0 8px 0 #0B0A14; max-width: 1206px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.arc-wrap { width: 100%; overflow: hidden; }
.arc-map { position: relative; width: 1200px; height: 720px; overflow: hidden; background: #2CB3C8; transform-origin: 0 0; }
.arc-map .padhit:hover { background: rgba(255,255,255,.22); }
.arc-map .sign:focus-visible, .arc-quick button:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.arc-quick button:focus-visible { outline-color: #5AA9FF; }
.arc-walker { position: absolute; width: 0; height: 0; }
.arc-sailing { animation: arc-sail var(--dur) ease-in-out var(--delay) both; }
.arc-flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.arc-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.arc-quick button { min-width: 44px; height: 44px; padding: 0 10px; border: 3px solid #1E1B2E; border-radius: 12px; box-shadow: 0 3px 0 #1E1B2E; font-family: 'Lilita One', sans-serif; font-size: 18px; color: #1E1B2E; cursor: pointer; }
.arc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .arc-boat, .arc-wv, .arc-cloud, .arc-palm { animation: none; }
  .arc-sailing { animation: none !important; transform: var(--fin) !important; z-index: var(--zf) !important; }
  .arc-map [style*="transition"] { transition: none !important; }
}
.rm .arc-boat, .rm .arc-wv, .rm .arc-cloud, .rm .arc-palm { animation: none; }
.rm .arc-sailing { animation: none !important; transform: var(--fin) !important; z-index: var(--zf) !important; }
.rm .arc-map [style*="transition"] { transition: none !important; }