/* Melo — Wander: an instrument-first, no-pressure playground (shown after Lesson 2).
   NOT a lesson/quiz/progression — a place to STAY. Reuses the Expressive-Pop tokens
   (/engine/melo.css), the shared follow-the-glow keyboard (glowkb.css), and the Lesson 2
   visual language. All motion off under prefers-reduced-motion. */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui, 'Inter', sans-serif);
  background: var(--cream, #FBF2E4); color: var(--ink, #2A1A0E);
  overflow: hidden; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100dvh;
}
:root { --f-home: #FF5A1F; --f-tension: #E5384E; --f-lift: #F2B30A; --f-surprise: #7A3FF2; }

/* background shapes */
.bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bg .s { position: absolute; border-radius: 50%; }
.bg .o1 { width: min(60vw, 540px); aspect-ratio: 1; background: radial-gradient(circle, rgba(255,90,31,.11), transparent 70%); top: -16vw; right: -12vw; animation: float 14s ease-in-out infinite; }
.bg .o2 { width: min(52vw, 440px); aspect-ratio: 1; background: radial-gradient(circle, rgba(122,63,242,.10), transparent 70%); bottom: -16vw; left: -12vw; animation: float 18s ease-in-out infinite reverse; }
.bg .o3 { width: 240px; height: 240px; border: 2px solid rgba(242,179,10,.12); top: 54%; left: -120px; }
.bg .o4 { width: 170px; height: 170px; background: radial-gradient(circle, rgba(229,56,78,.10), transparent 70%); top: 14%; right: 8%; animation: float 11s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }

/* tiny chrome */
.w-top { position: fixed; top: 0; left: 0; right: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; pointer-events: none; }
.w-brand { font-family: var(--font-serif, serif); font-weight: 900; font-size: 19px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; opacity: .55; }
.w-brand .d { width: 7px; height: 7px; border-radius: 50%; background: var(--f-home); margin-top: 8px; }
.w-right { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.w-exit { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-decoration: none; opacity: .6; }
.w-exit:hover { opacity: 1; }
/* listening pill */
.listen { display: none; align-items: center; gap: 8px; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: rgba(255,255,255,.7); border: 1px solid var(--line, #EFE3CF); border-radius: 30px; padding: 6px 12px; }
.listen.on { display: inline-flex; }
.listen .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--f-tension); box-shadow: 0 0 0 0 rgba(229,56,78,.5); animation: listenPulse 1.4s ease-in-out infinite; }
@keyframes listenPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,56,78,.45); opacity: .8 } 50% { box-shadow: 0 0 0 7px rgba(229,56,78,0); opacity: 1 } }
.overlay .w-top .w-brand { color: var(--cream); } .overlay .w-top .w-exit { color: #a8957d; }

/* ---- stage ---- */
.wrap { position: relative; z-index: 1; width: 100%; max-width: 940px; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.opening { font-family: var(--font-serif, serif); font-weight: 700; font-size: clamp(20px, 4vw, 26px); opacity: .55; }

/* ---- Chord GPS readout (primary = the feeling) ---- */
.gps { text-align: center; min-height: 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gps-feeling { font-family: var(--font-serif, serif); font-weight: 900; font-size: clamp(38px, 9vw, 62px); line-height: 1; letter-spacing: -.01em; color: var(--muted); transition: color .35s, opacity .35s; opacity: .35; }
.gps-feeling.home { color: var(--f-home); opacity: 1; } .gps-feeling.tension { color: var(--f-tension); opacity: 1; }
.gps-feeling.lift { color: var(--f-lift); opacity: 1; } .gps-feeling.surprise { color: var(--f-surprise); opacity: 1; }
.gps-feeling.bump { animation: gpsBump .4s var(--spring, cubic-bezier(.22,1,.36,1)); }
@keyframes gpsBump { 0% { transform: scale(1) } 40% { transform: scale(1.06) } 100% { transform: scale(1) } }
.gps-chord { font-family: var(--font-mono, monospace); font-size: 13px; letter-spacing: .04em; color: var(--muted); min-height: 18px; }
/* quiet nearby map */
.gps-map { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; min-height: 16px; margin-top: 2px; }
.gps-map .near { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .5; }

/* ---- feeling pads (touch mode) — filled, never white boxes ---- */
.pads { display: none; gap: 14px; flex-wrap: wrap; justify-content: center; }
.pads.on { display: flex; }
.wpad {
  position: relative; width: 120px; height: 96px; border: none; border-radius: 18px; cursor: pointer; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-serif, serif); font-weight: 700; font-size: 15px;
  box-shadow: 0 8px 22px rgba(120,60,10,.16); transition: transform .12s, box-shadow .2s, filter .2s;
}
.wpad .ico { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.wpad.home { background: linear-gradient(150deg, #FF8A52, var(--f-home)); box-shadow: 0 8px 22px rgba(255,90,31,.4); }
.wpad.tension { background: linear-gradient(150deg, #F0667A, var(--f-tension)); box-shadow: 0 8px 22px rgba(229,56,78,.4); }
.wpad.lift { background: linear-gradient(150deg, #FFD05A, var(--f-lift)); box-shadow: 0 8px 22px rgba(242,179,10,.4); }
.wpad.surprise { background: linear-gradient(150deg, #A06CF5, var(--f-surprise)); box-shadow: 0 8px 22px rgba(122,63,242,.4); }
.wpad:hover { filter: brightness(1.05); transform: translateY(-2px); }
.wpad:active { transform: scale(.95); }
.wpad.play { animation: padPop .4s var(--spring, cubic-bezier(.22,1,.36,1)); }
@keyframes padPop { 0% { transform: scale(1) } 40% { transform: scale(1.07) } 100% { transform: scale(1) } }
.mode-hint { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .06em; color: var(--muted); opacity: .6; min-height: 14px; }

/* ---- looping timeline (feeling journey) ---- */
.timeline { width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tl { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 38px; }
.tl .empty { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); opacity: .6; }
.chip { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-family: var(--font-mono, monospace); font-weight: 700; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; padding: 7px 12px; border-radius: 30px; box-shadow: 0 2px 6px rgba(0,0,0,.1); animation: chipIn .3s var(--spring, cubic-bezier(.22,1,.36,1)); transition: transform .18s, box-shadow .18s; }
.chip.home { background: var(--f-home); } .chip.tension { background: var(--f-tension); }
.chip.lift { background: var(--f-lift); } .chip.surprise { background: var(--f-surprise); }
.chip.now { transform: scale(1.16); box-shadow: 0 0 0 4px rgba(255,255,255,.6), 0 4px 12px rgba(0,0,0,.18); }
@keyframes chipIn { 0% { transform: scale(0); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
.arrow { color: var(--muted); opacity: .5; font-size: 13px; }

.tl-ctrls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.tbtn { font-family: var(--font-ui, sans-serif); font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: 24px; border: 1px solid var(--line, #EFE3CF); background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 3px 10px rgba(120,60,10,.08); transition: transform .1s, background .15s, color .15s; }
.tbtn:active { transform: translateY(1px); }
.tbtn.primary { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.tbtn.primary.playing { background: var(--f-home); border-color: var(--f-home); }
.tbtn:disabled { opacity: .4; cursor: default; }

.kb-wrap { width: 100%; display: flex; justify-content: center; opacity: .96; }

/* ---- cold-open overlay ---- */
.overlay { position: fixed; inset: 0; z-index: 10; background: #241608; color: var(--cream, #FBF2E4); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; transition: opacity .6s; }
.overlay.hide { opacity: 0; pointer-events: none; }
.overlay .brand { font-family: var(--font-serif, serif); font-weight: 900; font-size: 24px; display: flex; align-items: center; gap: 7px; margin-bottom: 24px; opacity: .85; }
.overlay .brand .d { width: 8px; height: 8px; border-radius: 50%; background: var(--f-home); margin-top: 9px; }
.overlay h1 { font-family: var(--font-serif, serif); font-weight: 700; font-size: clamp(30px, 7vw, 46px); line-height: 1.08; margin-bottom: 12px; }
.overlay p { font-size: 14px; color: #cdbca6; max-width: 40ch; margin-bottom: 24px; }
.glowdot { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, rgba(255,140,80,.95), transparent 70%); margin-bottom: 22px; animation: breathe 2s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: .7 } 50% { transform: scale(1.12); opacity: 1 } }
.tap-hint { font-family: var(--font-mono, monospace); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #a8957d; margin-top: 8px; animation: hintfade 2.4s ease-in-out infinite; }
@keyframes hintfade { 0%,100% { opacity: .5 } 50% { opacity: 1 } }
.loading { font-family: var(--font-mono, monospace); font-size: 12px; color: #a8957d; letter-spacing: .08em; margin-top: 14px; opacity: 0; transition: opacity .3s; }
.loading.show { opacity: 1; }

@media (max-width: 560px) {
  .wrap { gap: 12px; }
  .wpad { width: 84px; height: 78px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .12s !important; }
  .bg .o1, .bg .o2, .bg .o4 { animation: none; }
  .listen .dot { animation: none; }
}