@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 1000;
  font-display: block;
}
:root { color-scheme: light; --page: #f8fbff; --ink: #30105c; --purple: #7021ce; --pink: #ef83d6; }
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); }
body { margin: 0; color: var(--ink); font-family: 'Nunito'; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #7021ce; outline-offset: 7px; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 12px 20px; background: white; border-radius: 12px; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: relative; z-index: 2; width: min(1440px, 100%); margin: auto; padding: 8px 48px; display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.brand { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; flex-shrink: 0; width: 320px; }
.brand img { display: block; height: auto; }
.brand .brand-icon { width: 76px; flex-shrink: 0; }
.brand .brand-words { width: 232px; min-width: 0; }
nav { display: flex; align-items: center; gap: clamp(24px, 3.2vw, 52px); }
nav a { position: relative; padding: 8px 2px; font-weight: 850; font-size: 20px; transition: color 160ms; }
nav a:hover, nav a[aria-current] { color: #7923e2; }
nav a[aria-current]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: #8828eb; }
/* The home page fits the browser window: the hero picture fills whatever height the header and footer leave. */
.home-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.hero { position: relative; flex: 1; min-height: 280px; overflow: hidden; isolation: isolate; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-title { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; pointer-events: none; }
.adventure-banner { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; width: max-content; max-width: 100%; padding: 20px 38px 24px; border: 6px solid var(--pink); border-radius: 90px; color: white; background: linear-gradient(115deg, #611bb3 0%, #401073 62%, #591397 100%); box-shadow: 0 10px 0 #37105a33, 0 16px 30px #25144745, inset 0 2px 0 #ffffff1a; pointer-events: auto; transition: transform 180ms, box-shadow 180ms; }
.adventure-banner:hover { transform: translateY(-4px); box-shadow: 0 14px 0 #37105a26, 0 20px 35px #25144750; }
.adventure-banner:active { transform: translateY(1px); }
.adventure-banner:focus-visible { outline-color: white; }
.banner-label { position: relative; z-index: 1; }
.banner-label { font-size: clamp(24px, 4.3vw, 64px); font-weight: 1000; line-height: 1.2; letter-spacing: -.025em; translate: -.025em 0; } /* the nudge evens out the space the tight letter spacing leaves after the last letter */
.banner-landscape { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.banner-landscape::after { content: ''; position: absolute; inset: 40% 0 0; opacity: .35; background: linear-gradient(20deg, #a04bea, #6f2ab2); clip-path: polygon(0 100%,0 80%,4% 45%,7% 72%,12% 30%,16% 65%,24% 48%,30% 78%,40% 60%,48% 90%,60% 68%,68% 80%,76% 40%,80% 69%,86% 28%,90% 61%,96% 50%,100% 75%,100% 100%); }
.placeholder-page { min-height: calc(100svh - 170px); padding: 100px 24px; text-align: center; background: radial-gradient(ellipse at 50% 35%, #eee3ff 0, transparent 65%); }
.placeholder-page h1 { font-size: clamp(36px, 6vw, 64px); margin: 0 0 16px; font-weight: 1000; }
.placeholder-page p, .return-home { font-size: 22px; }
.return-home { text-decoration: underline; }
@media (max-width: 700px) {
 .site-header { padding: 10px 18px 4px; flex-direction: column; gap: 2px; }
 .brand { width: 280px; gap: 10px; }
 .brand .brand-icon { width: 62px; }
 .brand .brand-words { width: 208px; }
 nav { width: 100%; justify-content: center; gap: clamp(16px, 5vw, 32px); }
 nav a { font-size: 16px; padding: 6px 0; }
 .hero-title { padding: 16px; }
 .adventure-banner { gap: 10px; border-width: 4px; padding: 18px 20px 20px; }
 .banner-label { font-size: clamp(21px, 5.5vw, 34px); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.site-footer { width: 100%; max-width: 1504px; margin: auto; padding: 24px 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; font-size: 13px; font-weight: 650; }
.site-footer p { margin: 0; }
.site-footer p a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer nav { gap: 24px; flex-shrink: 0; }
.site-footer nav a { font-size: 13px; padding: 8px 0; font-weight: 750; }
@media (max-width: 900px) { .site-footer { grid-template-columns: 1fr; justify-items: center; padding: 24px; text-align: center; gap: 8px; } .site-footer nav { order: -1; } }
.text-page { max-width: 760px; min-height: calc(100svh - 170px); margin: auto; padding: 48px 24px 72px; font-size: 18px; line-height: 1.6; }
.text-page h1 { font-size: clamp(36px, 6vw, 56px); margin: 0 0 24px; font-weight: 1000; line-height: 1.1; }
.text-page h2 { font-size: 24px; margin: 36px 0 8px; font-weight: 900; }
.text-page p, .text-page ul { margin: 0 0 12px; }
.text-page a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
.globe-page { padding: 0 24px 24px; text-align: center; background: radial-gradient(ellipse at 50% 55%, #eee3ff 0, transparent 70%); }
.globe { position: relative; height: min(78svh, 860px, 120vw); min-height: 320px; overflow: hidden; touch-action: none; cursor: grab; }
.globe:active { cursor: grabbing; }
.globe canvas { display: block; }
.globe-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 20px; font-weight: 750; pointer-events: none; }
.globe-status:empty { display: none; }
.globe-guide { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border: 2px solid #2b1747; border-radius: 999px; background: white; color: var(--ink); font: inherit; font-size: 15px; font-weight: 850; cursor: pointer; box-shadow: 0 3px 0 #2b1747; }
.globe-guide:active { transform: translateY(2px); box-shadow: 0 1px 0 #2b1747; }
.globe-guide:focus-visible { outline: 3px solid var(--purple); outline-offset: 5px; }
.globe-guide[hidden] { display: none; }
.globe-card { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 14px 22px 16px; border: 3px solid #2b1747; border-radius: 22px; background: white; box-shadow: 0 5px 0 #2b1747; }
.globe-card[hidden] { display: none; }
.globe-card p { margin: 0; }
.globe-card-manx { font-size: clamp(24px, 4vw, 34px); font-weight: 1000; line-height: 1.1; }
/* A place name swapping between Manx and English (globe.js swapNames): English in purple, and a 1 s glitch at each swap,
   the text jittering while cyan and magenta copies of it flicker in offset slices. */
.name-swap { position: relative; display: inline-grid; justify-items: center; padding: 2px 18px 4px; border-radius: 999px; background: #efe8fb; } /* a pill, so the name stands apart from the lines above and below */
.name-swap[lang="en"] { color: var(--purple); }
.name-swap > * { grid-area: 1 / 1; } /* all the names stacked in one spot */
.name-size { visibility: hidden; }
.name-swap.is-glitching { animation: name-jitter 1s steps(10) both; }
.name-swap.is-glitching::before, .name-swap.is-glitching::after { content: attr(data-text); position: absolute; inset: 0; padding: inherit; text-align: center; pointer-events: none; }
.name-swap.is-glitching::before { color: #00e5ff; animation: name-slice 1s steps(8) both; }
.name-swap.is-glitching::after { color: #ff2bd6; animation: name-slice 1s steps(8) reverse both; }
@keyframes name-jitter {
  0%, 100% { transform: none; }
  20% { transform: translate(-2px, 1px) skewX(-8deg); }
  40% { transform: translate(3px, -1px) skewX(5deg); }
  60% { transform: translate(-1px, 0) skewX(-4deg); }
  80% { transform: translate(2px, 1px); }
}
@keyframes name-slice {
  0% { clip-path: inset(8% 0 70% 0); transform: translateX(-5px); }
  20% { clip-path: inset(55% 0 20% 0); transform: translateX(5px); }
  40% { clip-path: inset(30% 0 45% 0); transform: translateX(-4px); }
  60% { clip-path: inset(75% 0 5% 0); transform: translateX(4px); }
  80% { clip-path: inset(15% 0 60% 0); transform: translateX(-3px); }
  100% { clip-path: inset(45% 0 35% 0); transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .name-swap.is-glitching { animation: none; } .name-swap.is-glitching::before, .name-swap.is-glitching::after { display: none; } }
.globe-back, .globe-play, .globe-sights { margin-top: 12px; padding: 9px 18px; border: 0; border-radius: 999px; background: var(--purple); color: white; font: inherit; font-size: 15px; font-weight: 850; cursor: pointer; }
.globe-play, .globe-sights { margin-left: 8px; background: #23824f; }
.globe-sights { background: #2f6fb0; }
.globe-back:focus-visible, .globe-play:focus-visible, .globe-sights:focus-visible { outline: 3px solid #2b1747; outline-offset: 3px; }
.globe-guide { position: absolute; z-index: 2; bottom: 12px; right: 12px; padding: 8px 16px; }
.globe-markers { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.globe.is-focused .globe-markers, .globe.is-picking .globe-markers { display: none; }
.mist-marker { position: absolute; top: 0; left: 0; transform-origin: 50% 100%; width: 44px; height: 44px; border: 3px solid #2b1747; border-radius: 50%; background: var(--purple); color: white; font: inherit; font-size: 24px; font-weight: 1000; line-height: 1; cursor: pointer; pointer-events: auto; box-shadow: 0 4px 0 #2b1747; animation: marker-bob 2.4s ease-in-out infinite; }
.mist-marker:hover { background: #8a3ae6; }
.mist-marker:focus-visible { outline: 3px solid white; outline-offset: 2px; }
@keyframes marker-bob { 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .mist-marker { animation: none; } }
.globe-panel { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100% - 32px)); padding: 22px 24px; border: 3px solid #2b1747; border-radius: 24px; background: white; box-shadow: 0 6px 0 #2b1747; text-align: center; }
.globe-panel[hidden] { display: none; }
.globe-panel p { margin: 0 0 10px; font-size: 17px; font-weight: 650; line-height: 1.45; }
.globe-panel-title { font-size: 26px !important; font-weight: 1000 !important; line-height: 1.15 !important; }
.globe-panel > button { margin-top: 6px; padding: 10px 22px; border: 0; border-radius: 999px; background: var(--purple); color: white; font: inherit; font-size: 16px; font-weight: 850; cursor: pointer; }
.globe-panel button:focus-visible { outline: 3px solid #2b1747; outline-offset: 3px; }
/* On phones the map is shorter than the panels, so they float over the whole screen instead. */
@media (max-width: 600px) { .globe-panel { position: fixed; max-height: calc(100svh - 32px); overflow-y: auto; padding: 18px 16px; } .globe-guide { bottom: 8px; right: 8px; } }
.globe-panel > .globe-again { background: #eeecf6; color: var(--ink); }
.picker-kicker { margin: 0 !important; font-size: 14px !important; font-weight: 850 !important; color: var(--purple); text-transform: uppercase; letter-spacing: .06em; }
.picker-title { margin: 2px 0 0; font-size: 30px; font-weight: 1000; }
.picker-progress { min-height: 1.45em; }
.picker-games { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.picker-game { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 84px; padding: 10px; border: 2px solid #2b1747; border-radius: 18px; color: #2b1747; font: inherit; text-align: center; cursor: pointer; box-shadow: 0 4px 0 #2b1747; transition: transform 140ms; }
.picker-game strong { font-size: 18px; font-weight: 1000; }
.picker-game span { font-size: 13px; font-weight: 750; }
.picker-game:hover:not(:disabled) { transform: translateY(-2px); }
.picker-game:focus-visible { outline: 3px solid var(--purple); outline-offset: 6px; } /* clear of the 4px drop shadow */
.picker-game:disabled { cursor: default; opacity: .55; box-shadow: 0 2px 0 #2b1747; }
.picker-fairy { background: #e9dcff; }
.picker-tt { background: #ffe0e0; }
.picker-pairs { background: #fff1c9; }
.picker-cat { background: #d9f3e4; }
.picker-kipper { background: #d6eefb; }
.picker-tram { background: #ffe4cc; }
.picker-cauldron { background: #dcf5c8; }
.picker-jinny { background: #d6d2f2; }
.picker-game:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd one out spans the whole row */
.globe-panel > .picker-close { background: #eeecf6; color: var(--ink); }
.progress-page { width: min(1120px, 100%); margin: 0 auto; padding: 8px 24px 56px; }
/* Each word list has its own colour: --tint for backgrounds, --deep for accents. */
.type-animals { --tint: #d9f3e4; --deep: #23824f; }
.type-body { --tint: #ffe0e0; --deep: #c43d3d; }
.type-colours { --tint: #fff0c2; --deep: #a87800; }
.type-days { --tint: #dfe8ff; --deep: #3561c9; }
.type-food { --tint: #ffe4cc; --deep: #c4651b; }
.type-hoptunaa { --tint: #e6e1ef; --deep: #4a3a66; }
.type-phrases { --tint: #ece0ff; --deep: #7021ce; }
.type-relationships { --tint: #ffdff1; --deep: #b5317f; }
.type-weather { --tint: #d4f2fa; --deep: #17829e; }

.progress-hero { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: 24px; align-items: center; margin-bottom: 28px; }
.progress-intro h1 { margin: 0 0 6px; font-size: clamp(36px, 5.5vw, 56px); font-weight: 1000; line-height: 1; }
.progress-intro p { max-width: 520px; margin: 0; font-size: 18px; font-weight: 650; line-height: 1.5; }
.progress-intro b { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #e7e2f2; color: #8f84a8; font-weight: 1000; }
.progress-summary { padding: 20px 24px; border: 3px solid #2b1747; border-radius: 26px; background: linear-gradient(160deg, #7a2ee0, #4d1494); color: white; text-align: center; box-shadow: 0 6px 0 #2b1747; }
.progress-summary p { margin: 0; }
.summary-big { font-size: 64px; font-weight: 1000; line-height: 1; }
.summary-label { font-size: 17px; font-weight: 800; }
.summary-bar { --p: 0%; height: 14px; margin: 14px 0 10px; border: 2px solid #2b1747; border-radius: 999px; background: linear-gradient(90deg, #f2c94c var(--p), #ffffff33 var(--p)); }
.summary-places { font-size: 15px; font-weight: 750; opacity: .9; }

.progress-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 36px; }
.place-card { --p: 0%; position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 3px solid #2b1747; border-radius: 20px; background: var(--tint); box-shadow: 0 4px 0 #2b1747; transition: transform 150ms; }
.place-card:hover { transform: translateY(-3px); }
.place-card:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
.place-ring { flex-shrink: 0; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(closest-side, white 72%, transparent 74%), conic-gradient(var(--deep) var(--p), #ffffffaa 0); font-size: 13px; font-weight: 1000; color: var(--deep); }
.place-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.place-text strong { font-size: 18px; font-weight: 1000; }
.place-text span { font-size: 14px; font-weight: 850; color: var(--deep); }
.place-text small { font-size: 12px; font-weight: 750; opacity: .75; }
.place-lifted { position: absolute; top: -10px; right: 10px; padding: 2px 9px; border: 2px solid #2b1747; border-radius: 999px; background: #f2c94c; font-size: 11px; font-weight: 1000; }

.word-section { margin-bottom: 26px; padding: 0 0 20px; border: 3px solid #2b1747; border-radius: 26px; background: white; box-shadow: 0 6px 0 #2b1747; overflow: hidden; scroll-margin-top: 16px; }
.word-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 22px; background: var(--tint); border-bottom: 3px solid #2b1747; }
.word-head h2 { margin: 0; font-size: 26px; font-weight: 1000; }
.word-place { margin: 0; font-size: 16px; font-weight: 850; color: var(--deep); }
.word-count { margin: 0 0 0 auto; padding: 4px 14px; border: 2px solid #2b1747; border-radius: 999px; background: white; font-size: 15px; font-weight: 1000; }
.word-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; margin: 0; padding: 0 22px; list-style: none; }
.word { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 78px; padding: 10px 8px; border-radius: 16px; text-align: center; background: radial-gradient(circle at 22% 32%, #ffffffb0 0 14px, transparent 15px), radial-gradient(circle at 74% 70%, #ffffff90 0 18px, transparent 19px), #ece8f4; } /* soft mist puffs */
.word-manx { font-size: 20px; font-weight: 1000; line-height: 1.15; color: #b4aac8; }
.word-english { font-size: 13px; font-weight: 800; color: #6e6385; }
.word.is-found { border: 2px solid #2b1747; background: white; box-shadow: 0 3px 0 var(--deep); }
.word.is-found .word-manx { color: var(--ink); }
.word.is-found .word-english { color: var(--deep); }

@media (max-width: 900px) { .progress-hero { grid-template-columns: 1fr; } .progress-overview { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .progress-page { padding: 8px 16px 40px; } .progress-overview { gap: 10px; } .place-card { padding: 10px; gap: 8px; } .place-ring { width: 44px; height: 44px; font-size: 11px; } .word-head { flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px; } .word-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; padding: 0 14px; } .word-manx { font-size: 17px; } }
.secret-play { display: inline-block; margin: 6px 6px 0; padding: 10px 22px; border-radius: 999px; background: var(--purple); color: white; font-size: 16px; font-weight: 850; }
.secret-play:focus-visible { outline: 3px solid #2b1747; outline-offset: 3px; }
.globe-panel > .secret-close { background: #eeecf6; color: var(--ink); }
.type-numbers { --tint: #e2e0f0; --deep: #4a3f7a; }
.type-nature { --tint: #e1f3d3; --deep: #4f7f22; }
.type-places { --tint: #e6eef8; --deep: #3d5f8f; }
.danger-zone { margin-top: 44px; padding: 20px 24px; border: 3px dashed #c43d3d; border-radius: 22px; background: #fff3f3; }
.danger-zone h2 { margin: 0 0 6px; font-size: 22px; font-weight: 1000; color: #a32828; }
.danger-zone p { margin: 0 0 14px; font-size: 16px; font-weight: 650; }
.danger-reset { padding: 10px 20px; border: 2px solid #2b1747; border-radius: 999px; background: #d63a3a; color: white; font: inherit; font-size: 16px; font-weight: 850; cursor: pointer; box-shadow: 0 3px 0 #2b1747; }
.danger-reset:hover { background: #c02e2e; }
.danger-reset:focus-visible { outline: 3px solid #2b1747; outline-offset: 5px; }
/* Word of the hour: a slim purple band under the header on every page. */
.woth { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; min-height: 40px; margin: 0; padding: 9px 16px; background: #6c4590; color: #e8dcf5; font-size: 15px; font-weight: 650; text-align: center; }
.woth-manx, .woth-english { opacity: 0; transition: opacity 300ms; }
.woth.is-ready .woth-manx, .woth.is-ready .woth-english { opacity: 1; }
.woth-manx { color: white; font-size: 16px; font-weight: 900; }
@media (prefers-reduced-motion: reduce) { .woth-manx, .woth-english { transition: none; } }
.woth-footer { padding: 0; } /* the same purple band above the footer, empty for now */
/* Kept for screen readers and the page outline, but not shown. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The home page: the island fills the whole screen, with no header or footer (software design doc 4.1). */
.play-page { overflow: hidden; background: #1a0d3a; }
.play-page .globe-page { height: 100vh; height: 100dvh; padding: 0; background: radial-gradient(ellipse 75% 70% at 50% 52%, #6c4fbd 0%, #3a2373 42%, #1a0d3a 100%); }
.play-page .globe { height: 100%; min-height: 0; }
.play-page .globe-status { color: white; }
.play-page .globe-guide { bottom: max(12px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); }
.globe-info, .globe-full { position: absolute; z-index: 5; padding: 8px 16px; border: 2px solid #2b1747; border-radius: 999px; background: white; color: var(--ink); font: inherit; font-size: 15px; font-weight: 850; cursor: pointer; box-shadow: 0 3px 0 #2b1747; }
.globe-info { bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); }
.globe-full { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); }
/* The corner buttons: small pastel orbs with an icon, opening out to show their name on hover or keyboard focus.
   On the right the icon stays in the corner and the name opens out to its left. */
.play-page .corner-btn { display: flex; align-items: center; gap: 0; height: 46px; min-width: 46px; padding: 0 10px; background: #dccbf7; color: var(--ink); white-space: nowrap; overflow: hidden; transition: gap 250ms; }
.play-page .corner-btn[hidden] { display: none; }
.play-page .globe-guide { flex-direction: row-reverse; }
.corner-btn svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.corner-label { max-width: 0; opacity: 0; transition: max-width 250ms, opacity 200ms; }
.corner-btn:focus-visible { gap: 8px; }
.corner-btn:focus-visible .corner-label { max-width: 10em; opacity: 1; }
@media (hover: hover) { .corner-btn:hover { gap: 8px; } .corner-btn:hover .corner-label { max-width: 10em; opacity: 1; } }
.globe-full .icon-leave, .globe-full.is-full .icon-enter { display: none; }
.globe-full.is-full .icon-leave { display: block; }
.globe-info:active, .globe-full:active { transform: translateY(2px); box-shadow: 0 1px 0 #2b1747; }
.globe-info:focus-visible, .globe-full:focus-visible { outline: 3px solid white; outline-offset: 3px; }
@media (max-width: 600px) { .play-page .globe-card { bottom: 64px; } }
/* End tour sits on the same line as the bottom corner buttons, the same height, centred between them. */
.globe-end-tour { position: absolute; z-index: 5; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); width: max-content; height: 46px; margin: 0 auto; padding: 0 22px; border: 2px solid #2b1747; border-radius: 999px; background: var(--purple); color: white; font: inherit; font-size: 15px; font-weight: 850; cursor: pointer; box-shadow: 0 3px 0 #2b1747; }
.globe-end-tour[hidden] { display: none; }
.globe-end-tour:active { transform: translateY(2px); box-shadow: 0 1px 0 #2b1747; }
.globe-end-tour:focus-visible { outline: 3px solid white; outline-offset: 3px; }

/* The start screen: the story, then a Start button. */
.globe-intro { position: absolute; z-index: 4; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: safe center; padding: 24px; color: white; text-align: center; background: radial-gradient(ellipse at 50% 50%, #1a0d3a33 0, #1a0d3acc 75%); transition: opacity 900ms, visibility 900ms; }
.globe:not(.is-intro) .globe-intro { opacity: 0; visibility: hidden; pointer-events: none; }
.globe.is-intro :is(.globe-guide, .globe-markers, .globe-status) { display: none; }
.intro-logo { width: min(340px, 70vw); height: auto; filter: drop-shadow(0 0 2px white) drop-shadow(0 0 2px white) drop-shadow(0 0 2px white) drop-shadow(0 8px 18px #000a); }
.intro-title { margin: 18px 0 14px; font-size: clamp(34px, 7vw, 72px); font-weight: 1000; line-height: 1.05; text-shadow: 0 4px 0 #2b1747, 0 10px 30px #0009; }
.intro-story { max-width: 34rem; margin-bottom: 26px; }
.intro-story p { margin: 0 0 10px; font-size: clamp(16px, 2.2vw, 19px); font-weight: 700; line-height: 1.5; text-shadow: 0 2px 8px #1a0d3a; }
.intro-story p:last-child { color: #ffc93c; font-weight: 850; }
@media (max-height: 700px) { .intro-logo { width: min(200px, 50vw); } .intro-title { font-size: clamp(28px, 6vw, 48px); } }
@media (max-height: 480px) { .intro-logo { display: none; } }
.intro-start { padding: 16px 56px; border: 5px solid var(--pink); border-radius: 999px; background: linear-gradient(115deg, #611bb3 0%, #401073 62%, #591397 100%); color: white; font: inherit; font-size: 26px; font-weight: 1000; cursor: pointer; box-shadow: 0 8px 0 #37105a, 0 14px 30px #0007; animation: intro-pulse 2.2s ease-in-out infinite; }
.intro-start:disabled { opacity: .6; cursor: wait; animation: none; }
.intro-start:focus-visible { outline: 3px solid white; outline-offset: 4px; }
@keyframes intro-pulse { 50% { transform: scale(1.05); } }

/* Shown for a few seconds when a place's mist lifts. */
.globe-toast { position: absolute; z-index: 3; left: 50%; top: max(72px, 10%); display: grid; justify-items: center; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 14px 28px 16px; border: 3px solid #2b1747; border-radius: 24px; background: #fff4b8; box-shadow: 0 6px 0 #2b1747, 0 16px 40px #0006; text-align: center; transform: translateX(-50%); animation: toast-in 600ms cubic-bezier(.2, 1.4, .4, 1) both; pointer-events: none; }
.globe-toast[hidden] { display: none; }
.globe-toast-kicker { font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); }
.globe-toast-manx { font-size: clamp(28px, 5vw, 44px); font-weight: 1000; line-height: 1.1; }
.globe-toast-english { font-size: 16px; font-weight: 800; color: var(--purple); }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(.8); } }
@media (prefers-reduced-motion: reduce) { .intro-start, .globe-toast { animation: none; } }

/* A mini game, played over the island. */
.game-frame { position: absolute; z-index: 6; inset: 0; background: var(--page); opacity: 0; transition: opacity 400ms; }
.game-frame.is-loaded { opacity: 1; }
.game-frame[hidden] { display: none; }
.game-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.footer-version { justify-self: end; opacity: .7; }
@media (max-width: 900px) { .footer-version { justify-self: center; } }