/* ============================================================
   "Scene" theme — illustrated ambient style (Focus Forest-like).
   ALL rules gated under [data-theme="scene"] so the default aurora
   theme is never affected. Web identity; mobile degrades gracefully.
   Values synthesized from a 4-dimension design pass.
   ============================================================ */

/* Scene layers hidden unless this theme is active */
.scene-bg, .scene-canvas, .scene-caption { display: none; }

[data-theme="scene"] {
  /* Surfaces — the scene shows through */
  --bg-base: #07080D;
  --bg-room: transparent;
  --bg-dim:  #03040A;

  /* Glass system */
  --glass-bg:        rgba(20, 18, 24, 0.42);
  --glass-bg-hi:     rgba(34, 37, 48, 0.60);
  --glass-border:    rgba(255, 255, 255, 0.10);
  --glass-border-hi: rgba(255, 255, 255, 0.18);
  --glass-blur:      18px;
  --glass-shadow:    inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -28px rgba(0,0,0,.65);

  /* Warm peach chrome accent (warm UI on cool scene, like the reference) */
  --peach:        #F4B98C;
  --peach-grad:   linear-gradient(135deg, #F6C79B 0%, #E8965F 100%);
  --peach-fill:   rgba(244,185,140,.16);
  --peach-border: rgba(244,185,140,.42);

  /* Text — airier than aurora */
  --text-1: rgba(245,240,236,.92);
  --text-2: rgba(245,240,236,.52);
  --text-3: rgba(245,240,236,.34);

  --font-mono: "SF Mono","JetBrains Mono",ui-monospace,"Roboto Mono",monospace;
  --r-card: 20px;

  --mo-base: 420ms; --mo-slow: 900ms; --mo-scene: 1200ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}
/* NOTE: --accent is intentionally NOT overridden — the breathing circle /
   pomodoro ring keep the per-space teal/amber as the focal "growing" color. */

/* ---- kill aurora backdrop, show scene layers ---- */
[data-theme="scene"] .ambient { display: none !important; }
[data-theme="scene"] body::after { opacity: 0.04; } /* faint grain kept */
[data-theme="scene"] .room { background: transparent; border: none; max-width: 100%; }
[data-theme="scene"] .app { position: relative; z-index: 2; }

[data-theme="scene"] .scene-bg {
  display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  transition: background var(--mo-scene) ease, filter 1s ease;
}
[data-theme="scene"] .scene-canvas {
  display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none;
}
/* legibility vignette over busy art (top + bottom darken) */
[data-theme="scene"] .scene-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,8,13,.55) 0%, transparent 24%, transparent 60%, rgba(7,8,13,.80) 100%);
}

/* ---- glass surfaces ---- */
[data-theme="scene"] .nowplaying,
[data-theme="scene"] .rail > details,
[data-theme="scene"] .reactions,
[data-theme="scene"] .scene-modal-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  box-shadow: var(--glass-shadow);
}

/* ---- poetic caption (centered, dim italic) ---- */
[data-theme="scene"] .scene-caption {
  display: block; position: fixed; left: 50%; top: 44%; transform: translateX(-50%);
  z-index: 2; pointer-events: none; width: min(90vw, 640px); text-align: center;
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: 16px; line-height: 1.7; letter-spacing: .04em;
  color: var(--text-3); text-shadow: 0 1px 12px rgba(0,0,0,.6);
  opacity: 0; transition: opacity var(--mo-slow) var(--ease-soft);
}
[data-theme="scene"] .scene-caption.show { opacity: 0.78; }

/* ---- brand: thin, wide-tracked, status dot ---- */
[data-theme="scene"] .brand {
  font-family: var(--font-ui); font-weight: 300; font-size: 14px; letter-spacing: .22em;
  color: var(--text-1); position: relative; padding-left: 16px;
}
[data-theme="scene"] .brand::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--peach); box-shadow: 0 0 8px 1px var(--peach-border);
}
@media (prefers-reduced-motion: no-preference) {
  [data-theme="scene"] .brand::before { animation: brandPulse 3.2s ease-in-out infinite; }
}
@keyframes brandPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ---- topbar ghost icon buttons ---- */
[data-theme="scene"] .topbar { padding-top: 22px; background: none; }
[data-theme="scene"] .btn--icon { background: transparent; border-color: transparent; color: var(--text-2); }
[data-theme="scene"] .btn--icon:hover {
  background: var(--glass-bg); border-color: var(--glass-border); color: var(--text-1);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
[data-theme="scene"] .btn--icon.is-on { background: var(--peach-fill); border-color: var(--peach-border); color: var(--peach); }

/* ================= LOBBY ================= */
[data-theme="scene"] .lobby { padding-top: 60px; }
[data-theme="scene"] .lobby-hero h1 {
  font-family: var(--font-display); font-weight: 300; letter-spacing: 1px;
  background: none; -webkit-background-clip: initial; color: var(--text-1);
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
[data-theme="scene"] #lobby > .chips[role="radiogroup"] {
  justify-content: center; width: fit-content; margin: 12px auto 8px !important; padding: 4px;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
[data-theme="scene"] .chip { background: transparent; border-color: transparent; color: var(--text-2); letter-spacing: .06em; }
[data-theme="scene"] .chip[aria-checked="true"] {
  background: var(--glass-bg-hi); border-color: var(--glass-border-hi); color: var(--text-1);
  box-shadow: inset 0 1px 0 var(--glass-border-hi);
}
[data-theme="scene"] .room-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px; max-width: 980px; margin: 24px auto 0;
}
[data-theme="scene"] .room-card {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
[data-theme="scene"] .room-card:hover { border-color: var(--peach-border); }
[data-theme="scene"] .room-card-go { color: var(--text-3); }

/* ================= ROOM VIEW ================= */
[data-theme="scene"] #roomView { display: block; }
[data-theme="scene"] .room-head { text-align: center; padding-top: 8px; opacity: .85; }
[data-theme="scene"] .room-title { font-family: var(--font-display); font-size: 26px; font-weight: 300; letter-spacing: 1px; }
[data-theme="scene"] .room-sub { color: var(--text-3); letter-spacing: 1px; }

/* now-playing + mixer float TOP-right, below the topbar, so they never sit
   over the breathing circle / pomodoro ring in the center. */
[data-theme="scene"] .rail {
  position: fixed; right: 20px; top: 84px; width: 300px; z-index: 5;
  max-height: calc(100dvh - 200px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  /* order: now-playing first, then the Sound-mix panel */
}
[data-theme="scene"] .rail .nowplaying { order: 0; }
[data-theme="scene"] .rail > details { order: 1; }
[data-theme="scene"] .rail > details, [data-theme="scene"] .nowplaying { margin: 0 !important; }
[data-theme="scene"] .rail > details { padding: 12px 16px; border-radius: var(--r-card); }
/* the mixer opens DOWNWARD inside the rail (rail scrolls if needed) — never
   overlaps the stage because the rail is a fixed-width column on the right. */
[data-theme="scene"] .rail > details[open] { padding-bottom: 14px; }
[data-theme="scene"] .live, [data-theme="scene"] .live-dot { color: var(--peach); }
[data-theme="scene"] .live-dot { background: var(--peach); }
[data-theme="scene"] .np-cta { background: var(--peach-grad); border: 0; color: #1a1206; }

/* reactions bottom-left */
[data-theme="scene"] .reactions { position: fixed; left: 24px; bottom: 110px; z-index: 3; flex-direction: column; padding: 8px; border-radius: var(--r-pill); }

/* stage: lift the focal ring, glow it; presets move to the bottom pill. */
[data-theme="scene"] .stage { justify-content: flex-start; padding: 14vh 0 120px; min-height: 56vh; }
/* On wide screens reserve gutters so the fixed rail (right) + reactions (left)
   never overlap the centered ring. */
@media (min-width: 1280px) {
  [data-theme="scene"] .stage { padding-left: 120px; padding-right: 340px; }
}
[data-theme="scene"] .breath .core, [data-theme="scene"] .pomo { filter: drop-shadow(0 0 28px var(--accent-fill)); }
[data-theme="scene"] .pomo .center .time { font-family: var(--font-mono); letter-spacing: 1px; }

/* ---- bottom floating control pill (Calm: breathing presets) ---- */
[data-theme="scene"] #breathPresets {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 4;
  background: var(--glass-bg-hi); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--r-pill); padding: 10px 16px; box-shadow: var(--glass-shadow);
}
[data-theme="scene"] #breathPresets .chip[aria-checked="true"] { background: var(--peach-fill); border-color: var(--peach-border); color: var(--peach); }
/* Focus tag: glass label under the ring (in normal flow, not floating) */
[data-theme="scene"] .pomo-tag {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: var(--r-pill); padding: 6px 16px; letter-spacing: 1px;
}

/* ---- completion "bloom" modal (Focus) ---- */
[data-theme="scene"] .scene-modal {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px;
  background: rgba(5,6,12,.58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
[data-theme="scene"] .scene-modal.hidden { display: none; }
[data-theme="scene"] .scene-modal-card {
  width: min(92vw,380px); padding: 32px 28px 24px; text-align: center; border-radius: 24px;
  background: var(--glass-bg-hi); border: 1px solid var(--glass-border-hi);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 90px -30px rgba(0,0,0,.8);
}
[data-theme="scene"] .bm-sub { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 13px; letter-spacing: .06em; color: var(--peach); opacity: .85; margin-bottom: 6px; }
[data-theme="scene"] .bm-title { font-family: var(--font-display); font-weight: 300; font-size: 28px; margin: 0 0 12px; }
[data-theme="scene"] .bm-line { color: var(--text-2); line-height: 1.6; margin: 0 auto 22px; max-width: 30ch; }
[data-theme="scene"] .bm-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 22px; }
[data-theme="scene"] .bm-stat { padding: 14px 6px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); }
[data-theme="scene"] .bm-stat b { display: block; font-family: var(--font-mono); font-size: 22px; color: var(--peach); }
[data-theme="scene"] .bm-stat span { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: .04em; color: var(--text-3); }
[data-theme="scene"] .bm-actions { display: flex; flex-direction: column; gap: 10px; }
[data-theme="scene"] .bm-actions button {
  width: 100%; height: 44px; border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--font-ui); font-weight: 500; letter-spacing: 1px;
}
[data-theme="scene"] #bmAgain { background: var(--peach-grad); border: 0; color: #1a1206; }
[data-theme="scene"] #bmRest { background: transparent; border: 1px solid var(--glass-border); color: var(--text-2); font-weight: 300; }
[data-theme="scene"] #bmRest:hover { background: rgba(255,255,255,.06); color: var(--text-1); }

/* ---- per-room scene backgrounds (CSS placeholders; user swaps for art) ---- */
[data-theme="scene"] .scene-bg { background: radial-gradient(120% 90% at 50% 0%, #16131c 0%, #0a0910 55%, #07080d 100%); }
[data-theme="scene"][data-room="ocean"] .scene-bg { background:
  radial-gradient(38% 26% at 78% 22%, rgba(190,225,235,.40), transparent 65%),
  radial-gradient(90% 60% at 50% 120%, rgba(60,96,128,.40), transparent 70%),
  linear-gradient(180deg,#070b18 0%,#0b1426 45%,#060a12 100%); }
[data-theme="scene"][data-room="forest"] .scene-bg { background:
  radial-gradient(60% 34% at 50% 100%, rgba(245,183,116,.16), transparent 72%),
  linear-gradient(180deg,#0a1410 0%,#0e1a14 55%,#07060c 100%); }
[data-theme="scene"][data-room="rain"] .scene-bg { background:
  radial-gradient(8% 8% at 22% 38%, rgba(245,183,116,.5), transparent 70%),
  radial-gradient(6% 6% at 70% 30%, rgba(150,190,255,.45), transparent 70%),
  radial-gradient(10% 10% at 84% 60%, rgba(190,225,235,.5), transparent 70%),
  linear-gradient(180deg,#070a14 0%,#0b1020 60%,#07080d 100%); }
[data-theme="scene"][data-room="still"] .scene-bg { background:
  radial-gradient(28% 28% at 50% 46%, rgba(159,225,203,.14), transparent 70%),
  radial-gradient(120% 120% at 50% 50%, #0d0f1c 0%, #07080f 70%, #05060c 100%); }
[data-theme="scene"][data-room="lofi"] .scene-bg { background:
  radial-gradient(40% 32% at 26% 78%, rgba(245,183,116,.28), transparent 74%),
  linear-gradient(180deg,#140f14 0%,#1a1320 55%,#0c0a0f 100%); }
[data-theme="scene"][data-room="deep"] .scene-bg { background:
  radial-gradient(22% 22% at 50% 40%, rgba(245,183,116,.16), transparent 70%),
  radial-gradient(130% 100% at 50% 40%, #161020 0%, #0c0814 65%, #06040a 100%); }
[data-theme="scene"][data-room="cafe"] .scene-bg { background:
  radial-gradient(70% 45% at 50% 88%, rgba(245,183,116,.22), transparent 80%),
  linear-gradient(180deg,#170f10 0%,#1d1614 55%,#0b0810 100%); }
[data-theme="scene"][data-room="classical"] .scene-bg { background:
  radial-gradient(30% 24% at 22% 18%, rgba(200,215,240,.28), transparent 68%),
  radial-gradient(28% 22% at 82% 88%, rgba(245,183,116,.14), transparent 72%),
  linear-gradient(180deg,#0c0d18 0%,#12121f 55%,#0a0a12 100%); }

/* lobby idle dims the scene slightly */
[data-theme="scene"] .scene-bg[data-mode="lobby"] { opacity: 0.85; }

/* room-card mini-scene previews (mirror the per-room palettes) */
[data-theme="scene"] .room-card-art[data-room="ocean"]  { background: radial-gradient(40% 34% at 72% 22%, rgba(190,225,235,.5), transparent 60%), linear-gradient(180deg,#0a1422,#060a12); }
[data-theme="scene"] .room-card-art[data-room="forest"] { background: radial-gradient(60% 50% at 50% 100%, rgba(245,183,116,.45), transparent 64%), linear-gradient(180deg,#0e1a14,#07060c); }
[data-theme="scene"] .room-card-art[data-room="rain"]   { background: radial-gradient(20% 20% at 28% 40%, rgba(245,183,116,.6), transparent 70%), radial-gradient(18% 18% at 74% 56%, rgba(150,190,255,.5), transparent 70%), linear-gradient(180deg,#0b1020,#07080d); }
[data-theme="scene"] .room-card-art[data-room="still"]  { background: radial-gradient(60% 50% at 50% 50%, rgba(159,225,203,.30), transparent 70%), linear-gradient(180deg,#0d0f1c,#07080f); }
[data-theme="scene"] .room-card-art[data-room="lofi"]   { background: radial-gradient(46% 40% at 28% 78%, rgba(245,183,116,.5), transparent 70%), linear-gradient(180deg,#1a1320,#0c0a0f); }
[data-theme="scene"] .room-card-art[data-room="deep"]   { background: radial-gradient(40% 40% at 50% 42%, rgba(245,183,116,.30), transparent 70%), linear-gradient(180deg,#0c0814,#06040a); }
[data-theme="scene"] .room-card-art[data-room="cafe"]   { background: radial-gradient(70% 55% at 50% 88%, rgba(245,183,116,.4), transparent 78%), linear-gradient(180deg,#1d1614,#0b0810); }
[data-theme="scene"] .room-card-art[data-room="classical"] { background: radial-gradient(34% 28% at 22% 22%, rgba(200,215,240,.4), transparent 68%), linear-gradient(180deg,#12121f,#0a0a12); }

/* ---- motion ---- */
@media (prefers-reduced-motion: no-preference) {
  [data-theme="scene"] .scene-bg { animation: sceneIn var(--mo-scene) var(--ease-out) both; }
  [data-theme="scene"] #breathPresets { animation: pillUp var(--mo-base) var(--ease-out) 120ms both; }
  [data-theme="scene"] .scene-modal-card { animation: modalIn var(--mo-base) var(--ease-out) 60ms both; }
}
@keyframes sceneIn { from { opacity: 0; filter: blur(14px); transform: scale(1.04); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes pillUp { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---- dim mode interaction ---- */
[data-theme="scene"] body[data-dim="true"] .scene-bg { filter: brightness(.35) saturate(.7); }
[data-theme="scene"] body[data-dim="true"] .scene-canvas { opacity: .15; }

/* ===== Mobile web: scene works but simplify floating pieces ===== */
@media (max-width: 1023px) {
  [data-theme="scene"] .rail { position: static; width: auto; margin-top: 16px; }
  [data-theme="scene"] .reactions { position: static; flex-direction: row; }
  [data-theme="scene"] #breathPresets { position: static; transform: none; margin: 12px auto; }
  [data-theme="scene"] .scene-caption { top: 68%; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="scene"] .scene-bg, [data-theme="scene"] #breathPresets, [data-theme="scene"] .scene-modal-card { animation: none !important; }
  [data-theme="scene"] .scene-bg { filter: none; transform: none; opacity: 1; }
  [data-theme="scene"] .brand::before { animation: none; }
}