* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --foam: #e8f4f8;
  --deep: #031018;
  --teal: #0a4a5c;
  --mid: #062029;
  --glow: #7ec8e3;
  --leaf: #3d9a6a;
  --sand: #c4a574;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--foam);
  background: var(--deep);
}
html { touch-action: manipulation; }   /* pinch-zoom is allowed (accessibility); only double-tap-to-zoom is off so taps stay instant */

#sea {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  background:
    linear-gradient(#01040a 0%, #06202a 50%, #031822 52%, #010c14 100%);
}

header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.1rem;
  pointer-events: none;
}

header > * { pointer-events: auto; }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: none;
  color: var(--foam);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.mark img { display: block; filter: brightness(0) invert(1); opacity: 0.92; }
.mark img.mark-medallion { filter: none; opacity: 1; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.mark picture { display: block; line-height: 0; }

.header-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.music-btn {
  position: relative;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid rgba(232, 244, 248, 0.3);
  background: rgba(6, 32, 41, 0.55);
  color: var(--foam);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.3s;
}
.music-btn:hover { background: rgba(10, 74, 92, 0.85); border-color: rgba(126, 200, 227, 0.6); }
.music-btn:focus-visible { outline: 2px solid var(--foam); outline-offset: 2px; }
.music-eq { display: none; position: absolute; right: -2px; bottom: -2px; align-items: flex-end; gap: 1.5px; height: 0.8rem; padding: 2px 3px;
  border-radius: 999px; background: var(--deep); border: 1px solid var(--glow); }
.music-eq i { display: block; width: 2px; height: 40%; border-radius: 1px; background: var(--glow); }
.music-btn.is-playing { border-color: var(--glow); box-shadow: 0 0 12px rgba(126, 200, 227, 0.45); }
.music-btn.is-playing .music-eq { display: inline-flex; }
.music-btn.is-playing .music-eq i { animation: music-eq 0.9s ease-in-out infinite; }
.music-btn.is-playing .music-eq i:nth-child(2) { animation-delay: -0.3s; }
.music-btn.is-playing .music-eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes music-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .music-btn.is-playing .music-eq i { animation: none; height: 70%; } .music-btn { transition: none; } }

.globe {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(232, 244, 248, 0.4);
  background: radial-gradient(circle at 30% 30%, var(--glow), #1a6b7c 70%);
  box-shadow: 0 0 12px rgba(126, 200, 227, 0.25);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  cursor: pointer;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.globe img { width: 100%; height: 100%; display: block; }

.globe.pulse {
  box-shadow: 0 0 26px rgba(126, 200, 227, 0.9);
  transform: scale(1.1);
}

.view {
  position: relative;
  z-index: 5;
  height: 100%;
  width: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4.25rem 1rem 1.5rem;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.view.active {
  display: flex;
  opacity: 1;
}

.view.craft {
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

#home {
  overflow: hidden;
}

.islands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 1.75rem);
  flex-wrap: wrap;
}

.island {
  width: min(28vw, 210px);
  height: min(28vw, 210px);
  min-width: 132px;
  min-height: 132px;
  border-radius: 50% 45% 50% 40%;
  border: 1px solid rgba(232, 244, 248, 0.28);
  background: rgba(8, 52, 62, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 0 34px rgba(110, 210, 215, 0.14), inset 0 0 22px rgba(126, 200, 227, 0.1);
  text-shadow: 0 1px 6px rgba(0, 10, 16, 0.7);
  color: var(--foam);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  cursor: pointer;
  text-align: center;
  padding: 1rem;
  animation: bob 5s ease-in-out infinite;
  transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

.island-games { background: rgba(8, 62, 66, 0.52); }
.island-art { background: rgba(18, 52, 80, 0.5); border-radius: 48% 52% 45% 55%; }
.island-music { background: rgba(8, 58, 68, 0.54); border-radius: 55% 45% 50% 48%; }

.island:nth-child(2) { animation-delay: -1.6s; }
.island:nth-child(3) { animation-delay: -3.2s; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.island:hover, .island:focus-visible {
  background: rgba(20, 110, 120, 0.78);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  transform: translateY(-14px);
  animation-play-state: paused;
  outline: none;
}

.island-emoji { font-size: 1.6rem; line-height: 1; }
.island strong { font-size: 1.15rem; }
.island span:last-child { font-size: 0.78rem; opacity: 0.75; }

.hint {
  margin-top: 2rem;
  font-size: 0.85rem;
  opacity: 0.55;
  letter-spacing: 0.06em;
}

.chain {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 980px;
  width: 100%;
  padding-bottom: 2rem;
}

.stop {
  flex: 1 1 260px;
  max-width: 460px;
  padding: 1.35rem 1.4rem;
  border-radius: 1.5rem 1.25rem 1.6rem 1.3rem;
  border: 1px solid rgba(232, 244, 248, 0.2);
  background: rgba(6, 32, 41, 0.78);
  backdrop-filter: blur(8px);
  animation: bob 6s ease-in-out infinite;
}

.stop:nth-child(2) { animation-delay: -2s; }
.stop.game-stop { max-width: 520px; flex: 1 1 320px; animation: none; }

.stop h2, .stop h3 {
  font-weight: 650;
  margin-bottom: 0.55rem;
}

.stop p {
  font-size: 0.94rem;
  line-height: 1.45;
  opacity: 0.9;
  margin-bottom: 0.55rem;
}

.stop.doodle {
  background:
    linear-gradient(135deg, rgba(255, 180, 120, 0.08), transparent 40%),
    rgba(6, 32, 41, 0.78);
}

.doodle-hero {
  margin-top: 0.75rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(232, 244, 248, 0.18);
}

.doodle-hero img {
  display: block;
  width: 100%;
  height: auto;
}

.wallpaper-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.wallpaper-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.65rem;
  border-radius: 1rem;
  border: 1px solid rgba(232, 244, 248, 0.2);
  background: rgba(3, 16, 24, 0.45);
  color: inherit;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.wallpaper-card:hover {
  background: rgba(10, 74, 92, 0.45);
  border-color: rgba(126, 200, 227, 0.45);
}

.wallpaper-card img {
  border-radius: 0.55rem;
  object-fit: cover;
  background: var(--mid);
  flex-shrink: 0;
}

.wallpaper-card.wide img {
  width: 120px;
  height: 68px;
}

.wallpaper-card:not(.wide) img {
  width: 54px;
  height: 96px;
}

.wallpaper-card strong { display: block; font-size: 0.95rem; }
.wallpaper-card span { display: block; font-size: 0.78rem; opacity: 0.7; margin: 0.15rem 0; }
.wallpaper-card em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--glow);
  letter-spacing: 0.03em;
}

.featured-track {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-top: 0.75rem;
  padding: 0.85rem;
  border-radius: 1.1rem;
  background: rgba(3, 16, 24, 0.4);
  border: 1px solid rgba(126, 200, 227, 0.22);
}

.track-art {
  width: 64px;
  height: 64px;
  border-radius: 0.85rem;
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  background: linear-gradient(145deg, #0a4a5c, #1a6b7c);
  flex-shrink: 0;
}

.badge {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glow);
  opacity: 0.9;
  margin-bottom: 0.2rem;
}

.track-list {
  list-style: none;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.track-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.85rem;
  background: rgba(3, 16, 24, 0.35);
  border: 1px solid rgba(232, 244, 248, 0.12);
}

.track-dot {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 74, 92, 0.8);
  color: var(--glow);
  flex-shrink: 0;
}

.track-list strong { display: block; font-size: 0.9rem; }
.track-list span { font-size: 0.75rem; opacity: 0.65; }
.track-list a {
  margin-left: auto;
  color: var(--glow);
  font-size: 0.78rem;
  text-decoration: none;
  white-space: nowrap;
}
.track-list a:hover { text-decoration: underline; }

.btn {
  appearance: none;
  border: 1px solid rgba(126, 200, 227, 0.45);
  background: rgba(10, 74, 92, 0.85);
  color: var(--foam);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.btn:hover { background: rgba(20, 110, 120, 0.95); }


.game-shell { margin-top: 0.5rem; }

.game-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  font-size: 0.88rem;
}

.game-hud .stat strong { color: var(--glow); }

.game-canvas-wrap {
  position: relative;
  width: min(100%, 480px);
  margin: 0 auto;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(126, 200, 227, 0.25);
  background: #041820;
  aspect-ratio: 1;
}

#trail-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.game-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.25rem;
  text-align: center;
  background: rgba(3, 16, 24, 0.82);
  backdrop-filter: blur(4px);
}

.game-overlay.hidden { display: none; }

.game-overlay h2 { font-size: 1.25rem; }
.game-overlay p {
  font-size: 0.85rem;
  opacity: 0.8;
  max-width: 16rem;
  margin: 0;
}

.game-hint {
  text-align: center;
  font-size: 0.75rem !important;
  opacity: 0.55 !important;
  margin-top: 0.55rem !important;
}

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(3, 48px);
  gap: 5px;
  justify-content: center;
  margin-top: 0.75rem;
}

.dpad button {
  appearance: none;
  border: 1px solid rgba(126, 200, 227, 0.28);
  background: rgba(6, 32, 41, 0.9);
  color: var(--glow);
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
}

.dpad button:active { background: rgba(126, 200, 227, 0.22); }
.dpad .spacer { visibility: hidden; }

@media (min-width: 720px) {
  .dpad { display: none; }
}

@media (max-width: 600px) {
  .islands { flex-wrap: nowrap; gap: 0.55rem; }
  .island {
    width: 28vw;
    height: 28vw;
    min-width: 0;
    min-height: 0;
    padding: 0.4rem;
  }
  .island-emoji { font-size: 1.3rem; }
  .island strong { font-size: 0.98rem; }
  .island span:last-child { font-size: 0.68rem; }
  .hint { display: none; }
  .chain { gap: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .island, .stop { animation: none; }
}

/* ---- Chumpchain full-screen overlay ---- */
.game-modal { position: fixed; inset: 0; z-index: 9999; background: #000; }
.game-modal[hidden] { display: none; }
.game-modal iframe { width: 100%; height: 100%; height: 100dvh; border: 0; display: block; }
.game-modal-close {
  position: absolute; z-index: 2;
  top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff;
  background: rgba(0,0,0,.6); color: #fff; font-size: 20px; cursor: pointer;
}
body.game-open { overflow: hidden; }
html:has(body.game-open), body.game-open { overscroll-behavior: none; }

/* ===== Art hero: workshop showcase ===== */
.art-hero { position: relative; flex: 1 1 100%; max-width: 980px; padding: 1rem 0.25rem 1.5rem; text-align: center; }
.art-hero-kicker { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .65; margin-bottom: .6rem; }
.art-hero-frame { position: relative; margin: 0 auto; border-radius: 1.25rem; overflow: hidden; border: 1px solid rgba(255,220,150,.35);
  box-shadow: 0 0 40px rgba(255,200,120,.25), 0 0 120px rgba(120,180,255,.15), 0 24px 60px rgba(0,0,0,.45);
  animation: bob 7s ease-in-out infinite; }
.art-hero-frame img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: cover; }
.art-hero-title { font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 700; margin: 1rem 0 .3rem; text-shadow: 0 0 18px rgba(255,210,140,.4); }
.art-hero-story { font-size: .98rem; opacity: .85; font-style: italic; margin-bottom: 1rem; }
.btn.art-hero-download { display: inline-block; font-size: 1.1rem; padding: .95rem 1.6rem; border-radius: 999px; font-weight: 700;
  background: linear-gradient(135deg, #ffd27a, #ff9f6b); color: #1a1205; text-decoration: none; box-shadow: 0 6px 24px rgba(255,180,100,.4); width: min(100%, 360px); }
.art-hero-download:hover { filter: brightness(1.08); }
.art-hero-free { font-size: .78rem; opacity: .6; margin-top: .55rem; transform: rotate(-1.5deg); }
.art-process { margin: 1.3rem auto 0; max-width: 460px; }
.art-process-label { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.art-process ol { list-style: none; display: flex; gap: .6rem; justify-content: center; margin: .45rem 0 0; padding: 0; }
.art-process li { flex: 1; font-size: .72rem; opacity: .8; }
.art-process .thumb { aspect-ratio: 4/3; border-radius: .6rem; background-size: cover; border: 1px solid rgba(232,244,248,.2); margin-bottom: .25rem; }
.art-process .t1 { background-size: 260%; background-position: 30% 40%; filter: grayscale(1) contrast(.8) brightness(1.1); }
.art-process .t2 { background-size: 180%; background-position: 60% 50%; filter: sepia(.7) saturate(.8); }
.art-process .t3 { background-position: center; box-shadow: 0 0 14px rgba(255,200,120,.35); }
.art-hero-seeall { display: inline-block; margin-top: 1rem; font-size: .82rem; color: inherit; opacity: .7; }
.onchain-pill { position: absolute; top: .6rem; right: .6rem; background: rgba(6,20,30,.55); color: #e8f4f8; font-size: .62rem; padding: .15rem .5rem; border-radius: 999px;
  border: 1px solid rgba(232,244,248,.18); opacity: .45; letter-spacing: .05em; }
@media (min-width: 900px) { .art-hero-frame img { max-height: 58vh; } }
@media (prefers-reduced-motion: reduce) { .art-hero-frame { animation: none; } }

.nft-pill{position:static;margin-left:.4rem;font-size:.65rem;font-weight:500;vertical-align:middle}
.maker-line{margin:.8rem auto;max-width:560px;font-size:.78rem;opacity:.7;text-align:center}
.nft-pill{white-space:nowrap}

.only-desk{display:none!important}
@media (min-width:900px){.only-desk{display:revert!important}.only-phone{display:none!important}.art-hero-frame picture,.art-hero-frame img{display:block;width:100%}}
@media (min-width:900px){a.art-hero-download.only-desk{display:inline-flex!important;margin-bottom:.6rem}.art-hero-frame img{object-position:center 20%}}

.island-print{background:rgba(30,48,70,.52);border-radius:46% 54% 52% 48%}
.island:nth-child(4){animation-delay:-4.4s}
.print-placeholder{font-size:4rem;text-align:center;opacity:.5;padding:2rem 0}
@media (max-width:600px){.island{width:22vw;height:22vw}.islands{gap:.4rem}.island span:not(.island-emoji){font-size:.62rem}.island strong{font-size:.8rem}}

/* ===== Apps / makers card (preview) ===== */
.stop.apps-stop{max-width:520px;flex:1 1 320px;animation:none}
.apps-sub{font-size:.78rem;font-weight:400;opacity:.65;letter-spacing:.02em}
.app-card{display:block;margin-top:.6rem;border-radius:1rem;overflow:hidden;border:1px solid rgba(126,200,227,.28);background:rgba(3,16,24,.45);color:inherit;text-decoration:none;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.app-card:hover,.app-card:focus-visible{background:rgba(10,74,92,.45);border-color:rgba(126,200,227,.55);transform:translateY(-2px);outline:none}
.app-thumb{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover}
.app-body{display:block;padding:.75rem .9rem .85rem}
.app-name{display:block;font-size:1.02rem;font-weight:650;margin-bottom:.3rem}
.app-desc{display:block;font-size:.84rem;line-height:1.4;opacity:.85}
.app-by{display:flex;align-items:center;gap:.4rem;margin-top:.6rem;font-size:.74rem;opacity:.75;letter-spacing:.03em}
.app-by img{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 1px rgba(232,200,120,.35)}

/* ===== Music: self-hosted player (player.js + assets/music/playlist.json) ===== */
.stop.music-stop { max-width: 100%; flex: 1 1 100%; animation: none; }
.mp { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.9rem; max-width: 100%; min-width: 0; }
.mp [hidden] { display: none !important; }
.mp-status { font-size: 0.9rem; opacity: 0.75; }

/* now-playing card */
.mp-card { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 1.2rem 1rem 1.1rem; border-radius: 1.2rem;
  background: linear-gradient(160deg, rgba(10, 74, 92, 0.5), rgba(3, 16, 24, 0.55)); border: 1px solid rgba(126, 200, 227, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }
.mp-coverslot { flex: 0 0 auto; width: min(62vw, 200px); aspect-ratio: 1; }
.mp-cover { position: relative; display: block; overflow: hidden; background: var(--mid); }
.mp-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mp-bigcover { width: 100%; height: 100%; border-radius: 1rem; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(232, 244, 248, 0.14); }
.mp-cover-fallback { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 25%, rgba(126, 200, 227, 0.35), rgba(10, 74, 92, 0.85) 55%, #031018); }
.mp-note-glyph { font-size: 2.4em; line-height: 1; color: rgba(232, 244, 248, 0.85); }
.mp-thumb .mp-note-glyph { font-size: 1.3rem; }
.mp-main { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.mp-info { text-align: center; min-width: 0; }
.mp .mp-title { font-size: clamp(1.2rem, 4.8vw, 1.65rem); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.mp .mp-artist { font-size: 0.92rem; color: var(--glow); margin-top: 0.25rem; letter-spacing: 0.02em; }
.mp .mp-sub { font-size: 0.74rem; opacity: 0.55; margin-top: 0.15rem; }
.mp-watch { margin-top: 0.7rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px; font: inherit; font-size: 0.85rem;
  color: var(--foam); background: rgba(126, 200, 227, 0.12); border: 1px solid rgba(126, 200, 227, 0.5); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.mp-watch:hover { background: rgba(126, 200, 227, 0.26); transform: translateY(-1px); }
.mp-seekrow { display: flex; align-items: center; gap: 0.6rem; }
.mp-time { flex: 0 0 2.6rem; font-size: 0.75rem; opacity: 0.75; font-variant-numeric: tabular-nums; text-align: center; }
.mp-seek { flex: 1 1 auto; min-width: 0; height: 2rem; accent-color: var(--glow); cursor: pointer; background: transparent; }
.mp-seek:disabled { opacity: 0.45; cursor: default; }
.mp-seek:focus-visible, .mp-btn:focus-visible, .mp-row:focus-visible, .mp-watch:focus-visible, .suno-listen:focus-visible, .suno-more:focus-visible,
.vm-video:focus-visible { outline: 2px solid var(--foam); outline-offset: 2px; }
.mp-controls { display: flex; align-items: center; justify-content: center; gap: 0.9rem; }
.mp-btn { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(126, 200, 227, 0.4); background: rgba(3, 16, 24, 0.6); color: var(--foam);
  font-size: 1.15rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s, box-shadow 0.2s; }
.mp-btn:hover { background: rgba(10, 74, 92, 0.85); }
.mp-btn:active { transform: scale(0.94); }
.mp-btn svg { display: block; }
.mp-play svg { margin-left: 0.1em; }
.mp-play.is-pause svg { margin-left: 0; }
.mp-watch svg { font-size: 0.9em; }
.mp-play { width: 4.2rem; height: 4.2rem; font-size: 1.7rem; background: var(--glow); color: var(--deep); border-color: var(--glow); box-shadow: 0 0 18px rgba(126, 200, 227, 0.35); }
.mp-play:hover { background: #a6dcef; box-shadow: 0 0 24px rgba(126, 200, 227, 0.5); }
.mp-small { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
.mp-small[aria-pressed="true"] { background: var(--glow); color: var(--deep); }
.mp-spacer { width: 2.4rem; }

/* track list */
.mp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.mp-item { display: flex; align-items: center; gap: 0.4rem; min-width: 0; border-radius: 0.9rem; background: rgba(3, 16, 24, 0.4);
  border: 1px solid rgba(126, 200, 227, 0.2); transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.mp-item:hover { background: rgba(10, 74, 92, 0.4); border-color: rgba(126, 200, 227, 0.4); }
.mp-item:focus-within { border-color: rgba(126, 200, 227, 0.55); }
.mp-item.is-active { background: rgba(10, 74, 92, 0.72); border-color: var(--glow); box-shadow: 0 0 0 1px rgba(126, 200, 227, 0.3) inset, 0 0 14px rgba(126, 200, 227, 0.18); }
.mp-row { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.4rem 0.55rem 0.7rem; min-height: 56px;
  background: none; border: 0; border-radius: 0.9rem; color: var(--foam); font: inherit; text-align: left; cursor: pointer; }
.mp-numwrap { flex: 0 0 1.4rem; display: inline-flex; align-items: center; justify-content: center; height: 1.4rem; }
.mp-num { font-size: 0.8rem; color: var(--glow); opacity: 0.85; font-variant-numeric: tabular-nums; }
.mp-eq { display: none; align-items: flex-end; gap: 2px; height: 0.95rem; }
.mp-eq i { display: block; width: 3px; height: 35%; border-radius: 1px; background: var(--glow); transform-origin: bottom; }
.mp-item.is-active .mp-num { display: none; }
.mp-item.is-active .mp-eq { display: inline-flex; }
.mp.is-playing .mp-item.is-active .mp-eq i { animation: mp-bar 0.9s ease-in-out infinite; }
.mp.is-playing .mp-item.is-active .mp-eq i:nth-child(2) { animation-delay: -0.3s; }
.mp.is-playing .mp-item.is-active .mp-eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes mp-bar { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.mp-thumb { flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; border-radius: 0.55rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); display: block; }
.mp-rowtitle { flex: 1 1 auto; min-width: 0; font-size: 0.98rem; overflow-wrap: anywhere; line-height: 1.25; }
.mp-item.is-active .mp-rowtitle { font-weight: 650; }
.mp-note { display: block; font-size: 0.72rem; opacity: 0.6; font-weight: 400; margin-top: 0.1rem; }
.mp-dur { flex: 0 0 auto; font-size: 0.78rem; opacity: 0.65; font-variant-numeric: tabular-nums; min-width: 2.4rem; text-align: right; }
.mp-item .suno-listen { flex: 0 0 auto; padding: 0.5rem 0.8rem 0.5rem 0.2rem; white-space: nowrap; font-size: 0.76rem; }
.suno-listen, .suno-more { color: var(--glow); font-size: 0.82rem; text-decoration: none; letter-spacing: 0.02em; }
.suno-listen:hover, .suno-more:hover { text-decoration: underline; }
.suno-listen .sl-short { display: none; }
.suno-more { display: inline-block; margin-top: 0.4rem; opacity: 0.85; }
.mp-credit { margin-top: 0.8rem; font-size: 0.76rem; opacity: 0.6; }
@media (min-width: 700px) {
  .mp-card { flex-direction: row; align-items: center; gap: 1.8rem; padding: 1.4rem 1.6rem; }
  .mp-coverslot { width: 190px; }
  .mp-info { text-align: left; }
  .mp-main { gap: 0.9rem; }
  .mp-controls { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .mp-row { gap: 0.55rem; padding-left: 0.55rem; }
  .mp-thumb { flex-basis: 2.4rem; width: 2.4rem; height: 2.4rem; }
  .mp-item .suno-listen { padding-right: 0.6rem; }
  .suno-listen .sl-long { display: none; } .suno-listen .sl-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .mp.is-playing .mp-item.is-active .mp-eq i { animation: none; height: 70%; }
  .mp-btn, .mp-watch, .mp-item { transition: none; }
  .mp-watch:hover { transform: none; }
}

/* lyric video modal */
.vmodal { position: fixed; inset: 0; z-index: 9000; background: rgba(2, 6, 10, 0.95); display: flex; align-items: center; justify-content: center; padding: 3.2rem 1rem 1rem; }
.vmodal[hidden] { display: none; }
.vm-frame { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; max-width: 100%; max-height: 100%; }
.vm-title { font-size: 0.9rem; opacity: 0.8; text-align: center; }
.vm-video { display: block; background: #000; border-radius: 0.9rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(232, 244, 248, 0.12);
  aspect-ratio: 9 / 16; height: min(calc(100dvh - 7.5rem), calc((100vw - 2rem) * 16 / 9)); max-width: calc(100vw - 2rem); }
.vm-close { top: 0.8rem; right: 0.8rem; font-size: 1.1rem; }
body.vm-open { overflow: hidden; }

/* Art view: Site Ready gallery (watermarked web copies in assets/art/) */
.art-hero-frame img { max-height: none; }
@media (min-width: 900px) { .art-hero-frame img { max-height: none; } }
.art-process .thumb { background-image: url('assets/art/samoan-galaxy-wide.jpg'); }
@media (max-width: 899px) { .art-process .thumb { background-image: url('assets/art/polynesian-canoe-phone.jpg'); } }
.art-credit { font-size: 0.78rem; opacity: 0.6; margin-top: 0.8rem; text-align: right; }
#art-wallpapers { flex: 1 1 100%; max-width: 980px; }

/* Art grids (Wallpapers + Art library): uniform cards, cover thumbnails; the lightbox shows the full image */
#art-library { flex: 1 1 100%; max-width: 980px; }
.art-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 0.75rem; }
@media (min-width: 700px) { .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.art-card { margin: 0; min-width: 0; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(232, 244, 248, 0.2);
  background: rgba(3, 16, 24, 0.45); transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.art-card:hover, .art-card:focus-within { background: rgba(10, 74, 92, 0.45); border-color: rgba(126, 200, 227, 0.45); }
.art-open { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: zoom-in; }
.art-open:focus-visible { outline: 2px solid var(--foam); outline-offset: -2px; border-radius: 1rem; }
.art-thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mid); }
.art-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.art-open:hover .art-thumb img { transform: scale(1.03); }
.art-badge { position: absolute; top: 0.55rem; left: 0.55rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; background: rgba(3, 16, 24, 0.72); border: 1px solid rgba(126, 200, 227, 0.4); color: var(--foam); }
.art-open strong { display: block; padding: 0.7rem 0.9rem 0.8rem; font-size: 0.98rem; }
@media (prefers-reduced-motion: reduce) { .art-thumb img, .art-card { transition: none; } .art-open:hover .art-thumb img { transform: none; } }

/* Fale Eva: Games and Web Apps columns */
.eva-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;width:100%;max-width:1080px;flex:1 1 100%;align-items:start}
.eva-col{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.eva-head{margin:0 0 .1rem;font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.eva-cols .stop.game-stop,.eva-cols .stop.apps-stop{max-width:none;flex:none;width:100%}
@media (max-width:760px){.eva-cols{grid-template-columns:1fr}}

/* Wallpaper lightbox */
.lightbox { position: fixed; inset: 0; z-index: 9000; background: rgba(2, 6, 10, 0.97); display: flex; flex-direction: column; touch-action: pan-y; }
.lightbox[hidden] { display: none; }
.lb-stage { position: absolute; inset: 0 0 4.75rem 0; display: flex; align-items: center; justify-content: center; }
.lb-img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.lb-btn { position: absolute; z-index: 2; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid rgba(232, 244, 248, 0.35);
  background: rgba(3, 16, 24, 0.7); color: var(--foam); font-size: 1.5rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lb-btn:hover { background: rgba(10, 74, 92, 0.9); }
.lb-btn:focus-visible, .lb-toggle button:focus-visible, .lb-download:focus-visible { outline: 2px solid var(--foam); outline-offset: 2px; }
.lb-close { top: 0.8rem; right: 0.8rem; font-size: 1.1rem; }
.lb-nav { top: calc((100% - 4.75rem) / 2); transform: translateY(-50%); }
.lb-prev { left: 0.8rem; } .lb-next { right: 0.8rem; }
.lb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0 1rem; background: linear-gradient(to top, rgba(2, 6, 10, 1), rgba(2, 6, 10, 0.85)); border-top: 1px solid rgba(126, 200, 227, 0.18); }
.lb-meta { min-width: 0; }
.lb-title { font-size: 1rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-count { font-size: 0.75rem; opacity: 0.65; }
.lb-toggle { display: inline-flex; border: 1px solid rgba(126, 200, 227, 0.4); border-radius: 999px; overflow: hidden; }
.lb-toggle[hidden] { display: none; }
.lb-toggle button { background: none; border: 0; color: var(--foam); font: inherit; font-size: 0.8rem; padding: 0.4rem 0.8rem; cursor: pointer; }
.lb-toggle button[aria-pressed="true"] { background: var(--glow); color: var(--deep); font-weight: 700; }
.lb-download { flex: 0 0 auto; display: inline-block; text-decoration: none; font-size: 0.9rem; padding: 0.6rem 1.1rem; }
body.lb-open { overflow: hidden; }
@media (max-width: 600px) { .lb-nav { top: auto; bottom: 5.4rem; transform: none; width: 2.6rem; height: 2.6rem; background: rgba(3, 16, 24, 0.55); } .lb-bar { padding: 0 0.7rem; } }

/* Now-playing popover: opens under the header music button (player.js). Fixed, positioned by JS so it always stays inside the viewport. */
.mini-pop { position: fixed; z-index: 8000; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem 0.75rem 0.6rem; border-radius: 1.1rem; overflow: auto;
  background: rgba(3, 16, 24, 0.94); border: 1px solid rgba(126, 200, 227, 0.35); color: var(--foam);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 18px rgba(126, 200, 227, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: mini-in 0.18s ease both; }
.mini-pop[hidden], .mini-pop [hidden] { display: none !important; }
@keyframes mini-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.music-btn.is-open { background: rgba(10, 74, 92, 0.85); border-color: rgba(126, 200, 227, 0.7); }
.mini-info { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.mini-ctl { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.mini-open { align-self: center; background: none; border: 0; padding: 0.3rem 0.6rem; border-radius: 0.6rem; color: var(--glow); font: inherit; font-size: 0.78rem; cursor: pointer; }
.mini-open:hover { text-decoration: underline; }
.mini-coverslot { flex: 0 0 auto; width: 2.7rem; height: 2.7rem; display: block; }
.mini-cover { width: 100%; height: 100%; border-radius: 0.6rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.mini-cover .mp-note-glyph { font-size: 1.3rem; }
.mini-text { min-width: 0; }
.mini-pop .mini-title { margin: 0; font-size: 0.92rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-pop .mini-artist { margin: 0; font-size: 0.74rem; color: var(--glow); }
.mini-btn { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: none; color: var(--foam); font-size: 1.05rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s; touch-action: manipulation; }
.mini-btn svg { display: block; }
.mini-btn:hover { background: rgba(126, 200, 227, 0.2); }
.mini-btn:active { transform: scale(0.92); }
.mini-play { width: 2.8rem; height: 2.8rem; background: var(--glow); color: var(--deep); font-size: 1.15rem; }
.mini-play:hover { background: #a6dcef; }
.mini-play svg { margin-left: 0.08em; } .mini-play.is-pause svg { margin-left: 0; }
.mini-stop { opacity: 0.8; }
.mini-open:focus-visible, .mini-btn:focus-visible { outline: 2px solid var(--foam); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mini-pop { animation: none; } .mini-btn { transition: none; } }

/* ===== Scene layer (swappable background behind the panels) =====
   Placeholder dusk sky-to-sea gradient. When Atamai's Afao scene arrives, set --scene-image
   (e.g. :root { --scene-image: url(assets/scene/afao-day.jpg); }) or flip body[data-time] to "night". */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2"); }
:root {
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --scene-dusk: radial-gradient(ellipse 60% 22% at 50% 63%, rgba(255, 190, 120, 0.55), transparent 70%),
    linear-gradient(to bottom, #131a45 0%, #3b2a6b 24%, #a8447a 46%, #f08a5d 61%, #1a6b7c 62.5%, #0b3a4e 78%, #031822 100%);
  --scene-night: linear-gradient(to bottom, #02050f 0%, #0a1535 45%, #10294a 61%, #0b3a4e 62.5%, #05202c 80%, #010a10 100%);
}
.scene { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
  background: var(--scene-image, var(--scene-dusk)); background-size: cover; background-position: center bottom; }
body[data-time="night"] .scene { background: var(--scene-image, var(--scene-night)); background-size: cover; background-position: center bottom; }
body.panel-open .scene { opacity: 1; }

/* ===== Section panels: frosted glass over the scene ===== */
#home { transition: opacity 0.4s ease, filter 0.4s ease; }
body.panel-open #home { opacity: 0.3; filter: blur(3px) saturate(0.8); pointer-events: none; }
.view.panel { position: fixed; inset: 0; z-index: 6; height: auto; padding: 4.6rem 1rem 1.4rem; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease; overflow: hidden; }
.view.panel[hidden] { display: none; }
.view.panel.open { opacity: 1; }
.panel-glass { position: relative; display: flex; flex-direction: column; width: min(68vw, 1180px); min-width: min(640px, 100%); height: min(100%, 52rem); overflow: hidden;
  border-radius: 1.7rem; border: 1px solid rgba(232, 244, 248, 0.28);
  background: linear-gradient(160deg, rgba(14, 44, 62, 0.62), rgba(4, 16, 26, 0.74));
  -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: translateY(14px) scale(0.975); transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1); }
.view.panel.open .panel-glass { transform: none; }
.panel-head { position: relative; flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem 0.9rem; border-bottom: 1px solid rgba(232, 244, 248, 0.14); background: linear-gradient(to bottom, rgba(3, 14, 22, 0.5), transparent); }
.panel-grab { display: none; }
.panel-titles { min-width: 0; }
.panel-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1; letter-spacing: 0.02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 190, 130, 0.25); }
.panel-sub { margin-top: 0.4rem; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.78; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.panel-close { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(232, 244, 248, 0.35); background: rgba(3, 16, 24, 0.55);
  color: var(--foam); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; }
.panel-close:hover { background: rgba(10, 74, 92, 0.9); }
.panel-close:focus-visible { outline: 2px solid var(--foam); outline-offset: 2px; }
.panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 1.2rem 1.4rem 1.6rem; display: flex; justify-content: center; align-items: flex-start; }

/* phones: its own layout, a bottom sheet that slides up and leaves a strip of the scene */
@media (max-width: 700px) {
  .view.panel { align-items: flex-end; justify-content: stretch; padding: 16vh 0 0; }
  .panel-glass { width: 100%; min-width: 0; height: 100%; border-radius: 1.5rem 1.5rem 0 0; border-bottom: 0;
    transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .view.panel.open .panel-glass { transform: none; }
  .panel-head { padding: 1.35rem 1rem 0.8rem 1.1rem; }
  .panel-grab { display: block; position: absolute; top: 0.45rem; left: 50%; width: 2.6rem; height: 0.28rem; margin-left: -1.3rem; border-radius: 999px; background: rgba(232, 244, 248, 0.4); }
  .panel-name { font-size: 2.2rem; }
  .panel-sub { font-size: 0.72rem; }
  .panel-body { padding: 0.9rem 0.8rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .view.panel, .scene, #home { transition: none; }
  .panel-glass, .view.panel.open .panel-glass { transform: none; transition: none; }
}


/* =====================================================================================================
   Afao scene (scene.js)  --  painted Afao beach as a locked, full-viewport background. Only the tide moves.
   ALL retunable numbers live in the ":root" config just below. Positions are PERCENT OF THE FRAME (0-100, x from the
   left, y from the top of the 16:9 image), mapped through the same object-fit:cover maths as the picture, so labels,
   clouds and shimmer stay glued to the art at any window shape. Current values were set by eye from the real 1280x720 frames (palm/coconut
   positions measured on day-low); nudge them if the art changes.
   ===================================================================================================== */
:root {
  /* crop focus: 50 = centered (phone-safe crop shows the centre of the frame) */
  --afao-focus-x: 50;
  --afao-focus-y: 50;
  /* aspect (w/h) of the picture that is on screen: 16:9 ladder stills; the phone-portrait crop (1170x2535) in the portrait block below */
  --afao-ar: 1.77778;
  /* section anchors: where each palm's coconuts are (percent of frame). Label stem points here. */
  --palm1-x: 9.5; --palm1-y: 34;   /* Fale Eva  (Games & Web Apps)      */
  --palm2-x: 33.5; --palm2-y: 44;   /* Tusi Ata  (Art & Wallpapers)      */
  --palm3-x: 52; --palm3-y: 46.5;   /* Lali      (Music & Lyric Videos)  */
  --palm4-x: 76.5; --palm4-y: 36;   /* Tufuga    (3D Prints)             */
  /* sea band (water shimmer lives only here) and sky band (clouds live only here), percent of frame height */
  --afao-sea-top: 51;  --afao-sea-bottom: 69;
  --afao-sky-top: 2;   --afao-sky-bottom: 48;
  /* narrow / portrait screens: labels become a 2x2 grid over the sky (percent of the VIEWPORT) */
  --m1-x: 27; --m1-y: 17;   --m2-x: 73; --m2-y: 17;
  --m3-x: 27; --m3-y: 28;   --m4-x: 73; --m4-y: 28;
}

/* shared cover maths (cq units resolve against the nearest container: .afao-stage / .afao-labels) */
.afao-stage, .afao-labels {
  container-type: size;
  --sw: max(100cqw, calc(100cqh * var(--afao-ar)));               /* rendered image width  */
  --sh: max(100cqh, calc(100cqw / var(--afao-ar)));               /* rendered image height */
  --ox: calc((100cqw - var(--sw)) * var(--afao-focus-x) / 100);   /* image left edge in the viewport */
  --oy: calc((100cqh - var(--sh)) * var(--afao-focus-y) / 100);   /* image top edge in the viewport  */
}

.afao-stage { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; background: #031018; opacity: 0; }
.afao-stage.afao-ready { opacity: 1; }
/* no flash of the old home: while JS is bringing the scene up (html.afao-pending, set in <head>), the dark stage is painted from the first frame,
   the old galaxy/islands stay invisible, and the picture fades in over it. If nothing is up after PENDING_FAILSAFE_MS, scene.js drops the class. */
html.afao-pending .afao-stage { opacity: 1; }
html.afao-pending #sea, html.afao-pending #scene, html.afao-pending .islands, html.afao-pending .hint { visibility: hidden; }
.afao-stage .afao-parallax { opacity: 0; }
.afao-stage:not(.afao-ready) .afao-sky, .afao-stage:not(.afao-ready) .afao-sea { opacity: 0 !important; transition: none !important; }
.afao-stage:not(.afao-ready) .afao-cloud { transition: none !important; }   /* clouds/shimmer wait for the picture */
.afao-stage.afao-ready .afao-parallax { opacity: 1; }
/* header legibility on the bright day sky: soft top scrim + wordmark shadow */
.afao-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6rem; pointer-events: none;
  background: linear-gradient(to bottom, rgba(3, 14, 22, 0.55), rgba(3, 14, 22, 0.24) 55%, transparent); }
.mark span { text-shadow: 0 1px 6px rgba(0, 10, 16, 0.85), 0 0 2px rgba(0, 10, 16, 0.7); }
body.afao-on #sea, body.afao-on #scene { display: none; }                 /* old galaxy canvas / gradient hidden once the frames are up */
body.afao-on #home { pointer-events: none; }                              /* home is empty now; let the labels take clicks */
body.afao-on .islands, body.afao-on .hint { display: none; }              /* the four islands became the palm labels (same data-go targets) */

.afao-parallax { position: absolute; inset: -6px; transition: transform 1.4s ease-out, opacity 0.9s ease; }  /* 6px bleed hides the 1-2px parallax */
.afao-grp { position: absolute; inset: 0; }
.afao-grp-dawn, .afao-grp-dusk, .afao-grp-night { opacity: 0; will-change: opacity; }          /* time-of-day blend (dawn / day / dusk / night); opacities are set every frame by scene.js (JS-driven 3s glide, so the weights always sum to 1: no CSS transition here) */
.afao-grp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: calc(var(--afao-focus-x) * 1%) calc(var(--afao-focus-y) * 1%); display: block; user-select: none; -webkit-user-drag: none; }
.afao-grp img[data-frame$="-mid"], .afao-grp img[data-frame$="-high"] { opacity: 0; }       /* tide blend low / mid / high (triangular weights), opacity set by scene.js (same JS glide) */
.afao-stage.afao-noanim .afao-grp-night, .afao-stage.afao-noanim img, .afao-stage.afao-noanim video { transition: none !important; }
/* optional scrubbed tide video (scene.js USE_TIDE_VIDEO): sits over the stills, hidden (opacity 0) until it is ready, so the stills are the poster/fallback */
.afao-grp video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
  object-position: calc(var(--afao-focus-x) * 1%) calc(var(--afao-focus-y) * 1%); display: block; background: transparent; }
.afao-grp video.afao-vid-on { opacity: 1; }
/* film grain (PC): one tiny tiled noise PNG at 5 % over the stills and water, under the labels. Static, no animation, no blend mode (cheap). Phones: off (touch). ?grain=1 / ?grain=0 override. */
.afao-grain { display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.05; background: url("assets/afao/grain.png") 0 0 / 128px 128px repeat; }
@media (hover: hover) and (pointer: fine) { .afao-grain { display: block; } }
html[data-grain="1"] .afao-grain { display: block; }
html[data-grain="0"] .afao-grain { display: none; }
/* tide-driven water reflection (water.js): a small transparent canvas (or, as fallback, CSS layers) over the water strip only. Lives in its own .afao-grp so it
   breathes/parallaxes with the pictures. Painted nothing until its assets are up; hidden for prefers-reduced-motion by water.js. */
.afao-grp-water { pointer-events: none; }
.afao-water { position: absolute; display: block; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.afao-water.on { opacity: 1; }
.afao-wcss { position: absolute; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.afao-wcss.on { opacity: 1; }
.afao-wcss.snap, .afao-wcss.snap * { transition: none !important; }
.afao-wcss-m { position: absolute; inset: 0; opacity: 0; transition: opacity 2s linear; transform: scaleY(-1); }          /* flipped plate, mirrored about the horizon (top edge of the box) */
.afao-wcss-i { position: absolute; inset: 0; background-repeat: no-repeat; transition: filter 2s linear; }
.afao-wcss-g { position: absolute; inset: 0 -256px 0 -256px; opacity: 0; transition: opacity 2s linear; background-size: 256px 256px; background-repeat: repeat; will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%); mask-image: linear-gradient(to bottom, transparent, #000 35%); }
@keyframes afao-breathe { from { translate: -1px -0.5px; } to { translate: 1px 0.5px; } }  /* idle +-1px, no distortion */
.afao-grp { animation: afao-breathe 13s ease-in-out infinite alternate; }

/* clouds: sky band only, soft, slow, hidden at night */
.afao-sky { position: absolute; left: 0; right: 0; overflow: hidden;
  top: calc(var(--oy) + var(--sh) * var(--afao-sky-top) / 100);
  height: calc(var(--sh) * (var(--afao-sky-bottom) - var(--afao-sky-top)) / 100); }
.afao-cloud { position: absolute; left: 0; display: block; height: calc(var(--sh) * 0.12); width: calc(var(--sh) * 0.46);
  background:
    radial-gradient(ellipse 30% 46% at 24% 64%, rgba(255,255,255,.95), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 27% 62% at 47% 44%, rgba(255,255,255,.95), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 30% 50% at 72% 62%, rgba(255,255,255,.9), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 52% 26% at 50% 80%, rgba(255,255,255,.7), rgba(255,255,255,0) 75%);
  opacity: 0.30; transition: opacity 2s ease; will-change: transform; --cx: 18%; }
.afao-cloud-1 { top: 8%;  animation: afao-drift 140s linear infinite -30s; --cx: 18%; }
.afao-cloud-2 { top: 34%; animation: afao-drift 190s linear infinite -120s; opacity: 0.22; width: calc(var(--sh) * 0.36); height: calc(var(--sh) * 0.09); --cx: 58%; }
.afao-cloud-3 { top: 58%; animation: afao-drift 125s linear infinite -85s; opacity: 0.18; width: calc(var(--sh) * 0.3); height: calc(var(--sh) * 0.08); --cx: 82%; }
@keyframes afao-drift { from { transform: translate3d(-60vw, 0, 0); } to { transform: translate3d(125vw, 0, 0); } }
body[data-time="night"] .afao-cloud { opacity: 0; }

/* water shimmer: very light moving glints over the sea band only (no waves) */
.afao-sea { position: absolute; left: 0; right: 0; overflow: hidden; opacity: 0.2; transition: opacity 2s ease;
  top: calc(var(--oy) + var(--sh) * var(--afao-sea-top) / 100);
  height: calc(var(--sh) * (var(--afao-sea-bottom) - var(--afao-sea-top)) / 100);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent); }
.afao-sea::before, .afao-sea::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 480px); will-change: transform;
  background-repeat: repeat; mix-blend-mode: soft-light; }
.afao-sea::before { background-size: 480px 140px; animation: afao-glint 26s linear infinite;
  background-image:
    radial-gradient(ellipse 34px 2px at 40px 22px, rgba(255,255,255,.95), transparent),
    radial-gradient(ellipse 22px 1.5px at 210px 58px, rgba(255,255,255,.8), transparent),
    radial-gradient(ellipse 40px 2px at 330px 96px, rgba(255,255,255,.9), transparent),
    radial-gradient(ellipse 18px 1.5px at 120px 118px, rgba(255,255,255,.7), transparent); }
.afao-sea::after { background-size: 480px 170px; animation: afao-glint 41s linear infinite reverse; opacity: .7;
  background-image:
    radial-gradient(ellipse 28px 1.5px at 90px 40px, rgba(255,255,255,.9), transparent),
    radial-gradient(ellipse 36px 2px at 280px 84px, rgba(255,255,255,.85), transparent),
    radial-gradient(ellipse 20px 1.5px at 400px 140px, rgba(255,255,255,.7), transparent); }
@keyframes afao-glint { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-480px, 0, 0); } }
body[data-time="night"] .afao-sea { opacity: 0.12; }

/* section labels over the palms (glass style) */
.afao-labels { position: fixed; inset: 0; z-index: 4; pointer-events: none; transition: opacity 0.35s ease, visibility 0s; --lbl-pad: 5.6rem; }
body.panel-open .afao-labels, body.panel-open .faq-link { opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }  /* hidden labels also leave the tab order */
.afao-label { position: absolute; pointer-events: auto; cursor: pointer; color: var(--foam); font: inherit; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.42rem 0.95rem 0.5rem; border-radius: 1rem;
  border: 1px solid rgba(232, 244, 248, 0.3);
  background: linear-gradient(160deg, rgba(14, 44, 62, 0.5), rgba(4, 16, 26, 0.6));
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  text-shadow: 0 1px 8px rgba(0, 10, 16, 0.7);
  left: clamp(var(--lbl-pad), calc(var(--ox) + var(--sw) * var(--lx) / 100), calc(100cqw - var(--lbl-pad)));
  top: calc(var(--oy) + var(--sh) * var(--ly) / 100);
  translate: -50% calc(-100% - 14px);               /* label sits above its anchor; the stem ends on the coconuts */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease; }
.afao-label::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 10px; margin-left: -0.5px; background: rgba(232, 244, 248, 0.6); }
.afao-label::before { content: ""; position: absolute; left: 50%; top: calc(100% + 9px); width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: #ffd9a0; box-shadow: 0 0 10px 2px rgba(255, 200, 130, 0.65); }
.afao-label::before, .afao-label::after { pointer-events: none; }   /* the stem and coconut dot are decoration: a tap on them (or just under the label) must not open the panel */
.afao-label strong { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.05; letter-spacing: 0.02em; }
.afao-label span { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; white-space: nowrap; }
.afao-label:hover, .afao-label:focus-visible { transform: translateY(-3px); border-color: rgba(126, 200, 227, 0.8); outline: none;
  background: linear-gradient(160deg, rgba(20, 90, 110, 0.6), rgba(6, 30, 44, 0.66));
  box-shadow: 0 0 26px 3px rgba(126, 200, 227, 0.5), 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.afao-label:focus-visible { outline: 2px solid var(--foam); outline-offset: 3px; }
.afao-label-1 { --lx: var(--palm1-x); --ly: var(--palm1-y); }
.afao-label-2 { --lx: var(--palm2-x); --ly: var(--palm2-y); }
.afao-label-3 { --lx: var(--palm3-x); --ly: var(--palm3-y); }
.afao-label-4 { --lx: var(--palm4-x); --ly: var(--palm4-y); }

/* FAQ: a quiet footer-style link, bottom-left of the home scene (not a chip; nothing else sits on the scene). While a panel is open it hides and the panels have their own footer links. */
.faq-link { position: fixed; left: 0.7rem; bottom: 0.35rem; z-index: 3; padding: 0.5rem 0.55rem; background: none; border: 0; border-radius: 0.5rem; cursor: pointer;
  font: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240, 248, 250, 0.82);
  text-shadow: 0 1px 4px rgba(0, 8, 14, 0.9), 0 0 10px rgba(0, 8, 14, 0.6); touch-action: manipulation; transition: color 0.2s ease, opacity 0.35s ease, visibility 0s; }
.faq-link::after { content: ""; position: absolute; inset: -14px -8px -6px -10px; }   /* invisible hit area: >= 44x44 CSS px on screen, the text itself stays small and faint */
.faq-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.faq-link:focus-visible { outline: 2px solid var(--foam); outline-offset: 1px; color: #fff; }
body.panel-open .faq-link { transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
.panel-credit { flex: 0 0 auto; margin: 0; padding: 0.5rem 1.4rem 0.7rem; font-size: 0.64rem; line-height: 1.35; letter-spacing: 0.03em; color: rgba(232, 244, 248, 0.72);
  border-top: 1px solid rgba(232, 244, 248, 0.1); }
@media (max-width: 700px) {
  .panel-credit { padding: 0.45rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px)); font-size: 0.6rem; }
}
body:not(.afao-on) .afao-labels { display: none; }

/* narrow / portrait: phone-safe. The centre crop shows little of the frame, so labels form a 2x2 grid over the sky. */
@media (max-aspect-ratio: 5/4), (max-width: 700px) {
  .afao-label { left: calc(var(--mx) * 1cqw); top: calc(var(--my) * 1cqh); translate: -50% -50%; min-width: 9.4rem; padding: 0.4rem 0.7rem 0.45rem; }
  .afao-label::before, .afao-label::after { display: none; }
  .afao-label strong { font-size: 1.15rem; }
  .afao-label span { font-size: 0.58rem; letter-spacing: 0.07em; }
  .afao-label-1 { --mx: var(--m1-x); --my: var(--m1-y); } .afao-label-2 { --mx: var(--m2-x); --my: var(--m2-y); }
  .afao-label-3 { --mx: var(--m3-x); --my: var(--m3-y); } .afao-label-4 { --mx: var(--m4-x); --my: var(--m4-y); }
}
@media (max-width: 400px) { .afao-label { min-width: 8.2rem; } }

/* PHONE PORTRAIT (viewport narrower than 3:5; the same media query picks the portrait crop in index.html and in water.js).
   The crop (ladder: x 830..1495 of the 2560 master, full height) shows ONLY palms 2 and 3 and the horizon; the outer palms and the TALOFA / WELCOME letters are cut.
   So anchors are percent of the CROP: Tusi Ata and Lali sit on their own palms (stem + dot on the coconuts, tracking the real anchor even when the label is clamped
   to the screen edge); Fale Eva and Tufuga have no palm on screen, so they sit in the sky above, left and right, as a pair. Nothing overlaps (checked at 360, 390, 412 wide). */
@media (max-aspect-ratio: 3/5) {
  :root {
    --afao-ar: 0.46154;                                          /* 1170 / 2535 */
    --palm2-x: 5.5; --palm2-y: 44;                               /* Tusi Ata: left palm's coconuts (percent of the crop) */
    --palm3-x: 74.5; --palm3-y: 46.8;                            /* Lali: right palm's coconuts */
    --m1-x: 28; --m1-y: 10.5;  --m4-x: 72; --m4-y: 10.5;         /* Fale Eva / Tufuga: sky pair (percent of the viewport) */
  }
  .afao-labels { --lbl-pad: 5.7rem; }   /* half a label (9.4rem wide above 400px) + 1rem (16px) margin, so a clamped label keeps a safe edge gap */
  /* the crop is only a quarter of the frame wide, so the drifting CSS clouds are scaled down to stay cloud-sized (not screen-wide) */
  .afao-cloud { width: calc(var(--sh) * 0.2); height: calc(var(--sh) * 0.055); }
  .afao-cloud-2 { width: calc(var(--sh) * 0.16); height: calc(var(--sh) * 0.042); }
  .afao-cloud-3 { width: calc(var(--sh) * 0.13); height: calc(var(--sh) * 0.035); }
  .afao-label-1, .afao-label-4 { top: max(calc(var(--my) * 1cqh), 5.9rem); }   /* never under the header buttons on short phones */
  .afao-label-2, .afao-label-3 {
    --ax: calc(var(--ox) + var(--sw) * var(--lx) / 100);         /* the palm's real x in the viewport */
    --lc: clamp(var(--lbl-pad), var(--ax), calc(100cqw - var(--lbl-pad)));
    left: var(--lc);
    top: calc(var(--oy) + var(--sh) * var(--ly) / 100);
    translate: -50% calc(-100% - 16px);
  }
  .afao-label-2::before, .afao-label-2::after, .afao-label-3::before, .afao-label-3::after { display: block; left: clamp(0.9rem, calc(50% + var(--ax) - var(--lc)), calc(100% - 0.9rem)); }
  .afao-label-2::after, .afao-label-3::after { height: 12px; }
  .afao-label-2::before, .afao-label-3::before { top: calc(100% + 11px); }
  @media (max-width: 400px) { .afao-labels { --lbl-pad: 5.1rem; } }   /* half of 8.2rem + 1rem */
}
/* mid-size landscape windows: slightly smaller labels so neighbouring palms do not collide */
@media (min-aspect-ratio: 5/4) and (max-width: 1000px) { .afao-labels { --lbl-pad: 4.2rem; } .afao-label { padding: 0.32rem 0.7rem 0.4rem; } .afao-label strong { font-size: 1.05rem; } .afao-label span { font-size: 0.54rem; } }

/* PHONE LANDSCAPE / short wide viewports (height <= 520px: 915x412, 844x390, 740x360 and smaller). Desktop, tablets and portrait are untouched.
   Four fixed-width labels sit BELOW their palm's coconuts (the header takes the top 4rem, so "above" would collide on short screens) and a short stem runs up to the
   coconut dot. Centres are placed left to right: each label is as close to its palm as it can be while keeping one gap from its left neighbour and staying on screen,
   so labels can never overlap; the stem tracks the real palm x (clamped to the label's width). Subtitles stay one line at a readable size. */
@media (orientation: landscape) and (max-height: 520px) {
  .afao-labels {
    --W: min(8.3rem, calc((100cqw - 1.4rem - 3 * 0.45rem) / 4));   /* label width */
    --G: 0.45rem;                                                 /* gap between neighbours */
    --P: calc(var(--W) / 2 + 0.7rem);                             /* min distance of a label centre from the screen edge */
    --a1: calc(var(--ox) + var(--sw) * var(--palm1-x) / 100);
    --a2: calc(var(--ox) + var(--sw) * var(--palm2-x) / 100);
    --a3: calc(var(--ox) + var(--sw) * var(--palm3-x) / 100);
    --a4: calc(var(--ox) + var(--sw) * var(--palm4-x) / 100);
    --c1: min(max(var(--a1), var(--P)), calc(100cqw - var(--P) - 3 * (var(--W) + var(--G))));
    --c2: min(max(var(--a2), calc(var(--c1) + var(--W) + var(--G))), calc(100cqw - var(--P) - 2 * (var(--W) + var(--G))));
    --c3: min(max(var(--a3), calc(var(--c2) + var(--W) + var(--G))), calc(100cqw - var(--P) - (var(--W) + var(--G))));
    --c4: min(max(var(--a4), calc(var(--c3) + var(--W) + var(--G))), calc(100cqw - var(--P)));
  }
  .afao-label { box-sizing: border-box; width: var(--W); min-width: 0; padding: 0.3rem 0.35rem 0.34rem; border-radius: 0.8rem; gap: 0.05rem;
    left: var(--c); top: calc(var(--oy) + var(--sh) * var(--ly) / 100); translate: -50% 16px; }
  .afao-label-1 { --c: var(--c1); --a: var(--a1); } .afao-label-2 { --c: var(--c2); --a: var(--a2); }
  .afao-label-3 { --c: var(--c3); --a: var(--a3); } .afao-label-4 { --c: var(--c4); --a: var(--a4); }
  .afao-label strong { font-size: 1rem; }
  .afao-label span { font-size: 0.56rem; letter-spacing: 0.04em; white-space: nowrap; max-width: 100%; }
  /* stem + coconut dot above the label, at the palm's real x (kept inside the label's width) */
  .afao-label::before, .afao-label::after { display: block; left: clamp(0.7rem, calc(50% + var(--a) - var(--c)), calc(100% - 0.7rem)); top: auto; }
  .afao-label::after { bottom: 100%; height: 12px; margin-left: -0.5px; }
  .afao-label::before { bottom: calc(100% + 11px); margin-left: -3.5px; }
}

/* Short landscape: the FAQ link is tiny and hugs the bottom edge, on the grass below the TALOFA / WELCOME lettering. */
@media (orientation: landscape) and (max-height: 520px) { .faq-link { left: 0.4rem; bottom: 0; padding: 0.3rem 0.5rem; font-size: 0.56rem; }
  .faq-link::after { inset: -22px -6px 0 -6px; } }   /* grows upward and sideways only (the bottom is the screen edge): ~50x45 on screen */

/* FAQ panel + footer link */
.panel-credit-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--glow); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; touch-action: manipulation; }
.panel-credit-link:hover { color: #fff; }
.panel-credit-link:focus-visible { outline: 2px solid var(--foam); outline-offset: 2px; border-radius: 2px; }
.faq-stop { max-width: 46rem; width: 100%; flex: 0 0 auto; }
.faq-stop h3 { margin: 0 0 0.6rem; }
.faq-stop p { margin: 0 0 0.7rem; line-height: 1.5; }
.faq-stop p:last-child { margin-bottom: 0; }
.faq-stop a { color: var(--glow); }
#faq .chain { flex-direction: column; align-items: center; width: 100%; }

/* reduced motion: no drift, no shimmer, no parallax/breathing, instant fades. Tide still follows the clock. */
@media (prefers-reduced-motion: reduce) {
  .afao-cloud { animation: none; transform: none; left: var(--cx); }
  .afao-sea { display: none; }
  .afao-grp { animation: none; }
  .afao-parallax, .afao-grp-night, .afao-grp img, .afao-stage.afao-ready, .afao-cloud, .afao-label, .afao-labels, .faq-link { transition: none; }
  .afao-grp img, .afao-grp img[data-frame$="-high"], .afao-grp video, .afao-water, .afao-wcss, .afao-wcss-m, .afao-wcss-i, .afao-wcss-g { transition: none !important; }   /* reduced motion: stills swap, nothing fades or glides */
  .afao-grp-night { transition: none !important; }
}