/* ═══ Rain View — Polished ═══ */
:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --c-text: #e8e8ec;
  --c-muted: rgba(232,232,236,.45);
  --c-dim: rgba(232,232,236,.25);
  --c-surface: rgba(8,8,14,.55);
  --c-surface-hover: rgba(8,8,14,.7);
  --c-border: rgba(255,255,255,.07);
  --c-border-hover: rgba(255,255,255,.14);
  --c-accent: rgba(255,255,255,.88);
  --r-pill: 999px;
  --r-card: 14px;
  --r-panel: 18px;
  --blur: 18px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
}

/* ═══ Reset ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;overflow:hidden}
body{min-height:100dvh;width:100vw;overflow:hidden;font-family:var(--font-body);color:var(--c-text);background:#060609;user-select:none;-webkit-user-select:none;touch-action:manipulation}

/* ═══ Splash ═══ */
.splash{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;transition:opacity 1s var(--ease-out),visibility 1s}
.splash.hidden{opacity:0;visibility:hidden;pointer-events:none}
.splash-bg{position:absolute;inset:0;z-index:-1}
.splash-bg img{width:100%;height:100%;object-fit:cover;filter:blur(4px) brightness(.6) saturate(.85);transform:scale(1.06)}
.splash-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,9,.5) 0%,rgba(6,6,9,.75) 50%,rgba(6,6,9,.88) 100%)}
.splash-content{position:relative;text-align:center;padding:2rem 2rem 1.5rem;max-width:880px;width:100%}

/* Logo */
.splash-logo{color:var(--c-muted);opacity:0;animation:fadeUp .8s var(--ease) .2s forwards}

/* Title */
.splash-title{
  font-family:var(--font-display);
  font-size:clamp(3rem,2rem+5vw,5.2rem);
  font-weight:300;
  letter-spacing:.1em;
  line-height:1;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
  opacity:0;animation:fadeUp 1s var(--ease) .4s forwards;
}

/* Subtitle */
.splash-sub{
  font-size:clamp(.72rem,.6rem+.4vw,.88rem);
  font-weight:300;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-dim);
  margin-top:.6rem;
  opacity:0;animation:fadeUp .8s var(--ease) .7s forwards;
}

/* Hint */
.splash-hint{
  display:inline-block;
  font-family:'EB Garamond','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(235,225,180,.55);
  margin-top:1.75rem;
  padding:.55rem 1.6rem;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(235,225,180,.1);
  opacity:0;animation:fadeUp .8s var(--ease) 1.4s forwards;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.splash-logo,.splash-title,.splash-sub,.splash-hint{transform:translateY(10px)}

/* ── Scene Grid ── */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.1rem;
  margin-top:2.8rem;
  opacity:0;animation:fadeUp 1s var(--ease) 1s forwards;
  transform:translateY(14px);
}

.card{
  position:relative;
  border:none;
  background:none;
  cursor:pointer;
  border-radius:var(--r-card);
  overflow:hidden;
  aspect-ratio:16/10;
  border:1px solid var(--c-border);
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;
}
.card:hover{
  transform:scale(1.02);
  border-color:var(--c-border-hover);
  box-shadow:0 16px 48px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.05);
}
.card:active{transform:scale(.97)}

.card img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.55) saturate(.85);
  transition:filter .5s,transform .7s var(--ease);
}
.card:hover img{filter:brightness(.72) saturate(1.05);transform:scale(1.04)}

.card-info{
  position:absolute;bottom:0;left:0;right:0;
  padding:1.5rem 1.15rem 1.1rem;
  background:linear-gradient(transparent 0%,rgba(0,0,0,.65) 100%);
  pointer-events:none;
}
.card-name{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.15rem,1rem+.5vw,1.55rem);
  font-weight:400;
  letter-spacing:.04em;
  color:var(--c-text);
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.card-desc{
  display:block;
  font-size:clamp(.62rem,.5rem+.3vw,.73rem);
  font-weight:300;
  letter-spacing:.03em;
  color:var(--c-muted);
  margin-top:.25rem;
}

/* ═══ Scene View ═══ */
.scene{position:fixed;inset:0;z-index:50;background:#060609;transition:opacity 1s var(--ease-out),visibility 1s}
.scene.hidden{opacity:0;visibility:hidden;pointer-events:none}
#vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;filter:brightness(0.75) contrast(1.08) saturate(0.92)}
.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.4) 100%)}

/* iOS notes */
.scene-ios-note{
  position:absolute;left:50%;top:calc(1.15rem + env(safe-area-inset-top,0px));
  transform:translateX(-50%);z-index:9;
  padding:.5rem .75rem;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(20,20,24,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#e8c95a;font-family:var(--font-body);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none;
}
.audio-silent-note{
  position:absolute;left:50%;bottom:calc(7.25rem + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);z-index:9;
  padding:.55rem .85rem;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.4);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:rgba(255,255,255,.75);font-family:var(--font-body);font-size:.68rem;
  letter-spacing:.05em;text-transform:uppercase;pointer-events:none;
}

/* ═══ Controls ═══ */
.ctrl{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:
    calc(1.25rem + env(safe-area-inset-top,0px))
    calc(1.25rem + env(safe-area-inset-right,0px))
    calc(1.25rem + env(safe-area-inset-bottom,0px))
    calc(1.25rem + env(safe-area-inset-left,0px));
  pointer-events:none;
  transition:opacity .6s var(--ease-out);
}
.ctrl.hidden{opacity:0}
.ctrl>*{pointer-events:auto}

/* ── Top Bar ── */
.ctrl-top{display:flex;align-items:center;gap:.75rem}

.btn-back{
  display:flex;align-items:center;gap:.4rem;
  padding:.55rem .9rem;
  border-radius:var(--r-pill);
  background:var(--c-surface);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--c-border);
  color:rgba(232,232,236,.65);
  font-family:var(--font-body);font-size:.72rem;font-weight:400;letter-spacing:.03em;
  cursor:pointer;transition:all .3s var(--ease);
}
.btn-back:hover{background:var(--c-surface-hover);color:var(--c-text);border-color:var(--c-border-hover)}
.btn-back svg{width:13px;height:13px;opacity:.6}

.ctrl-title{
  font-family:var(--font-display);
  font-size:clamp(1rem,.85rem+.4vw,1.25rem);
  font-weight:300;
  letter-spacing:.08em;
  color:rgba(232,232,236,.4);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
  flex:1;min-width:0;
}

/* Fullscreen btn */
.btn-fullscreen{
  display:none;flex-shrink:0;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;
  border:1px solid var(--c-border);border-radius:10px;
  background:var(--c-surface);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  color:rgba(255,255,255,.6);cursor:pointer;
  transition:all .3s var(--ease);
}
.btn-fullscreen:hover{background:var(--c-surface-hover);color:var(--c-accent);border-color:var(--c-border-hover)}
.btn-fullscreen .fs-icon{display:block}
.btn-fullscreen .fs-exit{display:none}
.btn-fullscreen.is-fullscreen .fs-enter{display:none}
.btn-fullscreen.is-fullscreen .fs-exit{display:block}
@media(min-width:641px) and (pointer:fine){
  html.rv-desktop-fullscreen .btn-fullscreen:not([hidden]){display:inline-flex}
}

/* ── Bottom Panel ── */
.ctrl-bottom{
  display:flex;gap:0;
  border-radius:var(--r-panel);
  background:var(--c-surface);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--c-border);
  overflow:hidden;
}

.ctrl-group{
  flex:1;min-width:0;
  padding:1rem 1.25rem;
}
/* Divider between rain and piano */
.ctrl-group + .ctrl-group{
  border-left:1px solid rgba(255,255,255,.06);
}

.ctrl-label{
  display:flex;align-items:center;gap:.5rem;
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(235,225,180,.45);
  margin-bottom:.65rem;
}
.ctrl-label::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.06),transparent);
}

/* ── Pills ── */
.pills{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.7rem}
.pill{
  padding:6px 13px;
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-size:12px;
  font-weight:400;
  letter-spacing:.02em;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(235,225,180,.08);
  color:rgba(235,225,180,.42);
  cursor:pointer;white-space:nowrap;
  transition:all .3s var(--ease);
}
.pill:hover{
  background:rgba(255,255,255,.08);
  color:rgba(235,225,180,.7);
  border-color:rgba(235,225,180,.15);
}
.pill.active{
  background:rgba(235,225,180,.1);
  border-color:rgba(235,225,180,.25);
  color:rgba(235,225,180,.92);
  box-shadow:0 1px 8px rgba(235,225,180,.06);
}

/* ── Volume Row ── */
.vol-row{display:flex;align-items:center;gap:.55rem}

.btn-playpause{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;
  border:1px solid rgba(255,255,255,.1);border-radius:8px;
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.6);
  cursor:pointer;
  transition:all .25s var(--ease);
}
.btn-playpause:hover{background:rgba(255,255,255,.09);color:var(--c-accent);border-color:rgba(255,255,255,.18)}
.btn-playpause .pp-icon{display:block}
.btn-playpause .pp-play{display:none}
.btn-playpause.is-paused .pp-pause{display:none}
.btn-playpause.is-paused .pp-play{display:block}

.vol-icon{width:13px;height:13px;color:rgba(232,232,236,.3);flex-shrink:0}

/* iOS: hide volume sliders */
.rv-ios-volume .vol-row .vol-icon,
.rv-ios-volume .vol-row input[type="range"]{display:none!important}
.rv-ios-volume .vol-row{gap:.35rem}

/* ── Range Slider ── */
input[type="range"]{
  -webkit-appearance:none;appearance:none;
  flex:1;height:2px;
  background:rgba(255,255,255,.08);
  border-radius:var(--r-pill);
  outline:none;cursor:pointer;
  transition:background .2s;
}
input[type="range"]:hover{background:rgba(255,255,255,.12)}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;height:12px;border-radius:50%;
  background:rgba(232,232,236,.8);
  border:none;
  box-shadow:0 0 6px rgba(255,255,255,.15),0 1px 4px rgba(0,0,0,.3);
  transition:transform .2s var(--ease),background .2s;
}
input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.2);background:var(--c-accent)}
input[type="range"]::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;
  background:rgba(232,232,236,.8);border:none;cursor:pointer;
}

/* ═══ Mobile ═══ */
@media(max-width:640px){
  .grid{
    grid-template-columns:1fr;gap:.6rem;
    max-height:58vh;overflow-y:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .grid::-webkit-scrollbar{display:none}
  .card{aspect-ratio:16/8;border-radius:12px}
  .splash-content{padding:1.25rem .85rem .85rem}
  .splash-title{letter-spacing:.06em}

  /* Compact controls — maximize immersion area */
  .ctrl{
    padding:
      calc(.85rem + env(safe-area-inset-top,0px))
      calc(.85rem + env(safe-area-inset-right,0px))
      calc(.65rem + env(safe-area-inset-bottom,0px))
      calc(.85rem + env(safe-area-inset-left,0px));
  }
  .ctrl-top{gap:.5rem}
  .btn-back{padding:.45rem .7rem;font-size:.68rem}
  .ctrl-title{font-size:.9rem}

  .ctrl-bottom{
    flex-direction:column;gap:0;
    border-radius:14px;
  }
  .ctrl-group{padding:.6rem .85rem}
  .ctrl-group + .ctrl-group{
    border-left:none;
    border-top:1px solid rgba(255,255,255,.05);
  }
  .ctrl-label{margin-bottom:.45rem;font-size:.6rem}
  .pills{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:1px;margin-bottom:.5rem}
  .pills::-webkit-scrollbar{display:none}
  .pill{flex-shrink:0;padding:5px 11px;font-size:11px}
  .vol-row{gap:.4rem}
  .btn-playpause{width:28px;height:28px;border-radius:7px}
  .btn-playpause svg{width:12px;height:12px}
  input[type="range"]{height:2px}
  input[type="range"]::-webkit-slider-thumb{width:11px;height:11px}

  /* Fade scene title after 3s on mobile for max immersion */
  .ctrl-title{transition:opacity 1s ease}
}

/* ═══ Audio Diagnostic Overlay ═══ */
.audio-diag{
  position:absolute;top:60px;left:10px;right:10px;z-index:99;
  padding:10px 12px;border-radius:10px;
  background:rgba(0,0,0,.85);backdrop-filter:blur(8px);
  border:1px solid rgba(235,225,180,.2);
  font-family:'SF Mono',Menlo,monospace;font-size:10px;line-height:1.5;
  color:rgba(235,225,180,.8);white-space:pre-wrap;overflow:auto;max-height:40vh;
  pointer-events:none;
}

/* ═══ Accessibility ═══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}