:root{
  /*--bg-blur: 2px;*/
  --orb-size: min(42vmin, 420px);
  --text: #e8e8e8;
  --muted: #9aa0a6;
  --accent: #cfc7a5; /* soft gold */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:#000; color:var(--text);
  font-family:'Spectral', serif; overflow:hidden;
}

/* background layers */
.bg{
  position:fixed; inset:0; z-index:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  filter:blur(var(--bg-blur)); transform:scale(1.03);
  pointer-events:none;
}
.bg video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(var(--bg-blur)); transform:scale(1.03);
  pointer-events:none;
}
.veil{
  position:fixed; inset:0; z-index:1;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.25), rgba(0,0,0,.6) 70%);
  pointer-events:none;
}

/* content */
.wrap{ position:relative; z-index:2; height:100%; display:grid; place-items:center; padding:6vmin 4vmin; }

.orb{
  width:var(--orb-size); height:var(--orb-size); border-radius:50%;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.0), rgba(255,255,255,0.4) 60%, rgba(255,255,255,0.4) 100%);
  box-shadow:0 0 80px rgba(255,255,255,.08), inset 0 0 60px rgba(255,255,255,.05);
  transform:scale(1);
  transition: transform 5s ease-in-out; /* JS rewrites duration */
}

.label{
  margin-top:2rem; text-align:center; letter-spacing:.04em;
  font-size:clamp(1rem,2.4vmin,1.4rem); color:var(--accent); opacity:.9;
}

/* controls */
.controls{
  position:fixed; bottom:18px; left:18px; z-index:3; display:flex; gap:10px; align-items:center;
  font-size:.9rem; color:var(--muted);
  background: rgba(0,0,0,.35); backdrop-filter: blur(4px);
  padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.08);
}
button.control, .sound-toggle{
  cursor:pointer; padding:4px 8px; border-radius:8px; background:transparent; color:inherit;
  border:1px solid transparent; transition:background .2s ease, color .2s ease, border-color .2s ease;
  font:inherit;
}
button.control:hover, .sound-toggle:hover{ background:rgba(255,255,255,.08); color:#ddd; }
button.control.active{ background:rgba(207,199,165,.18); color:#efe8cf; border-color:rgba(207,199,165,.22); }

.divider{ opacity:.4; margin:0 6px; }
.timer{ margin-left:8px; color:#ddd; font-variant-numeric:tabular-nums; }

.hint{
  position:fixed; bottom:18px; right:18px; font-size:.85rem; color:var(--muted); opacity:.8;
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .orb { transition: none !important; }
  .bg, .bg video { filter: none; transform: none; }
}
/* --- Mobile optimizations --- */
@media (max-width: 640px) {
  :root{
    /* larger orb but bounded by viewport; lighter blur for perf */
    --orb-size: min(70dvw, 70dvh);
    --bg-blur: 1.2px;
  }

  /* use dynamic viewport height to avoid iOS address-bar jump */
  .wrap{ height: 100dvh; padding: 8vmin 5vmin; }

  /* center controls, allow wrapping, respect notches */
  .controls{
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    transform: translateX(-50%);
    flex-wrap: wrap;
    gap: 8px 6px;
    font-size: 0.95rem;
    padding: 10px 12px;
  }

  /* bigger touch targets */
  button.control, .sound-toggle{
    padding: 10px 14px;
    min-height: 40px;
    line-height: 1.1;
  }

  /* hide visual clutter; timer on its own line */
  .divider{ display:none; }
  .timer{ order: 99; width: 100%; text-align: center; margin-left: 0; }

  /* hints aren’t useful on phones */
  .hint{ display:none; }
}

/* extra-tiny phones */
@media (max-width: 360px){
  :root{ --orb-size: min(64dvw, 64dvh); }
}
/* Collapsible controls on small screens */
@media (max-width: 640px){
  .controls{
    left: 50%;
    transform: translateX(-50%);
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px 6px;
    width: min(92dvw, 720px);
  }
  .controls .controls-toggle{
    min-width: 64px;
    font-weight: 600;
    border-color: rgba(255,255,255,.12);
  }
  .controls .controls-group{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
    width: 100%;
  }
  .controls[data-open="false"] .controls-group{
    display: none;
  }
  .controls .timer{
    order: 99;
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-top: 2px;
  }
}
/* Hide the mobile menu toggle by default */
.controls .controls-toggle { display: none; }

/* Show it only on small screens */
@media (max-width: 640px){
  .controls .controls-toggle { display: inline-flex; align-items: center; }
}