:root{
  --warmText: rgba(245, 242, 234, .94);
  --muted: rgba(245, 242, 234, .72);
  --glass: rgba(10,10,10,.40);
  --glass2: rgba(10,10,10,.26);
  --shadow: 0 18px 60px rgba(0,0,0,.42);
  --gold: rgba(255, 210, 120, .62);
  --goldSoft: rgba(255, 210, 120, .28);
  --radius: 24px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; overflow:hidden;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--warmText);
  background:#000;
}

/* Background */
#bgWrap{ position:fixed; inset:0; background:#000; }
#bgVideo, #bgFallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#bgFallback{ background:#000; background-size:cover; background-position:center; opacity:0; }
#bgShade{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(0,0,0,0.10), rgba(0,0,0,0.62) 70%),
    linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.55));
}

/* Screens */
.screen{ position:fixed; inset:0; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) 16px; }
.hidden{ display:none !important; }

/* Landing */
#landing{ display:block; }
.landingShade{
  position:absolute; inset:0; pointer-events:none;
  background: rgba(0,0,0,0.0);
  transition: background 1.2s ease;
}
.landingCenter{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 0 14px;
}
.titleBlock{ margin-top:-30px; }
.title{
  margin:0 0 10px;
  font-weight: 540;
  letter-spacing: .06em;
  text-transform:none;
  font-size: 34px;
  opacity:0;
  transform: translateY(8px);
  transition: opacity .9s ease, transform .9s ease;
}
.subtitle{
  margin:0 0 22px;
  color: var(--muted);
  font-size: 15px;
  line-height:1.45;
  opacity:0;
  transform: translateY(10px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.beginBtn{
  border:none; cursor:pointer;
  padding: 12px 26px;
  border-radius: 999px;
  color: var(--warmText);
  background: rgba(255, 210, 120, .10);
  box-shadow: 0 14px 45px rgba(0,0,0,.25);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity:0;
  transform: translateY(12px);
  transition: opacity 1.2s ease, transform 1.2s ease, background .2s ease;
}
.beginBtn:disabled{
  opacity:.35 !important;
  cursor: default;
}
.beginBtn:not(:disabled){
  background: rgba(255, 210, 120, .22);
}
.beginBtn:not(:disabled):active{ transform: scale(.98); }

/* Dock */
.dockWrap{ position:absolute; left:0; right:0; bottom: max(14px, env(safe-area-inset-bottom)); display:flex; justify-content:center; }
.dock{
  width:min(820px, calc(100vw - 18px));
  display:flex; gap:12px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(10,10,10,.32);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  overflow:auto;
  opacity:0;
  transform: translateY(18px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  border: 1px solid rgba(255,255,255,.06);
}
.dockItem{
  flex:0 0 auto;
  border:none; cursor:pointer;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 10px 12px;
  display:flex; align-items:center; gap:8px;
  color: var(--warmText);
  opacity:.72;
}
.dockItem .lbl{ font-size: 13px; letter-spacing:.01em; }
.dockItem .icon{ font-size: 15px; }
.dockItem.active{
  opacity:1;
  background: rgba(255, 210, 120, .12);
  box-shadow: 0 0 0 1px rgba(255,210,120,.22) inset, 0 10px 30px rgba(0,0,0,.25);
}
.dockItem.active::after{
  content:"";
  display:block;
  height:2px;
  background: var(--gold);
  border-radius: 99px;
  width: 70%;
  margin: 6px auto 0;
}
.soundMini{
  position:absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  border:none; cursor:pointer;
  width: 44px; height: 44px;
  border-radius: 16px;
  background: rgba(10,10,10,.30);
  color: var(--warmText);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06);
}

/* HUD + canvas (minimal gameplay; no branding) */
#hud{
  position:fixed; left:12px; right:12px; top:max(12px, env(safe-area-inset-top));
  display:flex; align-items:center; justify-content:space-between; gap:10px; z-index:10;
}
.chip{
  border:none; cursor:pointer; color: var(--warmText);
  background: rgba(10,10,10,.34);
  padding: 10px 12px; border-radius: 14px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06);
}
.score{
  font-size: 14px; white-space:nowrap;
  background: rgba(10,10,10,.34);
  padding: 10px 12px; border-radius: 14px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06);
}
#gameCanvas{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* Sound drawer */
#soundDrawer{ position:fixed; left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); z-index:11; }
.soundPanel{
  width:min(640px, calc(100vw - 24px)); margin:0 auto;
  background: rgba(10,10,10,.42); border-radius: var(--radius);
  padding: 12px 14px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.06);
}
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; }
.row label{ font-size: 13px; color: rgba(245,242,234,.84); }
input[type="range"]{ width: 220px; }
.toggles{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.toggleBtn{
  border:none; cursor:pointer;
  padding: 8px 10px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--warmText);
  font-size: 13px;
}
.toggleBtn.on{ background: rgba(255, 210, 120, .16); }
.tiny{ font-size: 12px; color: rgba(245,242,234,.68); line-height: 1.35; margin-top: 6px; }

/* Quote modal */
#quoteModal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding:18px; z-index:20;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.quoteCard{
  width:min(680px, 100%);
  border-radius: 26px;
  background: rgba(10,10,10,.62);
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
  border: 1px solid rgba(255,255,255,.06);
}
#quoteText{ font-size: 17px; line-height: 1.5; margin: 0 0 10px; }
#quoteFrom{ margin:0 0 14px; color: rgba(245,242,234,.74); font-size: 13px; }
#quoteClose{
  width:100%; border:none; cursor:pointer;
  padding: 12px; border-radius: 16px;
  background: rgba(255,255,255,.10); color: var(--warmText); font-size: 14px;
}

/* Breathwork modal (premium warm orb) */
#breathModal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding:18px; z-index:25;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.breathCard{
  width:min(560px, 100%);
  border-radius: 28px;
  background: rgba(10,10,10,.64);
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  text-align:center;
  border: 1px solid rgba(255,255,255,.06);
}
.breathTitle{ font-size: 12px; color: rgba(245,242,234,.70); letter-spacing:.22em; text-transform:uppercase; }
.breathCue{ font-size: 22px; margin: 10px 0 12px; }
.orbWrap{ position:relative; width: 240px; height: 240px; margin: 10px auto 12px; }

/* “Realistic” glass orb using layered gradients + warm caustics */
.orb{
  position:absolute; inset: 22px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.78), rgba(255,255,255,.14) 34%, rgba(255,255,255,0) 60%),
    radial-gradient(circle at 72% 78%, rgba(255, 210, 120, .22), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 50% 50%, rgba(255, 210, 120, .16), rgba(0,0,0,0) 58%),
    radial-gradient(circle at 50% 52%, rgba(120,220,255,.10), rgba(0,0,0,0) 62%);
  box-shadow:
    0 0 55px rgba(255, 210, 120, .15),
    0 0 24px rgba(120,220,255,.08),
    inset 0 0 40px rgba(255,255,255,.10);
  transform: scale(.88);
  filter: saturate(1.05) contrast(1.05);
}
.ring{ position:absolute; inset: 0; transform: rotate(-90deg); }
.ringBg{ fill:none; stroke: rgba(255,255,255,.10); stroke-width: 8; }
.ringProg{ fill:none; stroke: rgba(255, 210, 120, .62); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; }
.breathTimer{ font-size: 13px; color: rgba(245,242,234,.78); margin-bottom: 12px; }

.pill.ghost{ border:none; cursor:pointer; color: var(--warmText); background: rgba(255,255,255,.10);
  padding:10px 12px; border-radius:999px; }