/* ==========================================================================
   App Shell, Subtle Caustic Aura, Immersive Running State & Focus (Zen) Mode
   ========================================================================== */

#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  height: var(--app-height, 100dvh);
  overflow: hidden;
  position: relative;
  background-color: #000000;
}

/* Ambient light: soft, static pools of colour placed behind the glass
   surfaces (top bar, bottom cards / sidebar) so the blur has something to
   bend. The middle stays dark to keep focus on the timer. Pure gradients:
   no blur filters, no animation, no GPU cost. */
.ambient-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: strict;
  /* Top and bottom edges fade into the same tint Safari uses for its status bar
     and toolbar strips (set by SC.UI.syncEdgeColor), so there is no seam */
  background:
    linear-gradient(180deg, var(--edge-color, #030406) 0, rgba(3, 4, 6, 0) 90px, rgba(3, 4, 6, 0) calc(100% - 130px), var(--edge-color, #030406) 100%),
    #030406;
}

.ambient-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 34% at 16% 4%, rgba(var(--accent-rgb), 0.30) 0%, transparent 100%),
    radial-gradient(40% 30% at 90% 10%, rgba(var(--ambient-second-rgb), 0.14) 0%, transparent 100%),
    radial-gradient(42% 48% at 100% 58%, rgba(var(--accent-rgb), 0.12) 0%, transparent 100%),
    radial-gradient(70% 34% at 50% 104%, rgba(var(--accent-rgb), 0.24) 0%, transparent 100%),
    radial-gradient(36% 26% at 8% 92%, rgba(var(--ambient-second-rgb), 0.10) 0%, transparent 100%);
  transition: opacity 0.4s var(--ease-apple);
}

/* Secondary violet hue; neutral grey for the colour-free Graphite accent */
:root {
  --ambient-second-rgb: 140, 104, 255;
}

:root[data-accent-theme="graphite"] {
  --ambient-second-rgb: 150, 150, 158;
}

/* Background glow level (Settings → Appearance) */
:root[data-ambient="soft"] .ambient-stage::before {
  opacity: 0.45;
}

:root[data-ambient="off"] .ambient-stage::before {
  opacity: 0;
}

:root[data-ambient="soft"] #timer-halo {
  opacity: 0.25 !important;
}

:root[data-ambient="off"] #timer-halo {
  display: none;
}

/* The old blurred lens blobs are replaced by the gradients above */
.caustic-lens-top,
.caustic-lens-bottom {
  display: none !important;
}

.caustic-lens-top {
  position: absolute;
  top: -175px;
  left: 50%;
  transform: translateX(-50%);
  width: 820px;
  height: 370px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow, rgba(var(--accent-rgb), 0.36)) 0%, transparent 72%);
  filter: blur(52px);
  opacity: 0.62;
  pointer-events: none;
  transition: background 0.4s var(--ease-apple), opacity 0.4s var(--ease-apple);
}

.caustic-lens-bottom {
  position: absolute;
  bottom: -210px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 330px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft, rgba(var(--accent-rgb), 0.14)) 0%, transparent 70%);
  filter: blur(54px);
  opacity: 0.55;
  pointer-events: none;
  transition: background 0.4s var(--ease-apple), opacity 0.4s var(--ease-apple);
}

#timer-halo {
  position: absolute;
  width: 410px;
  height: 215px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow, rgba(var(--accent-rgb), 0.34)) 0%, transparent 70%);
  filter: blur(46px);
  opacity: 0.52;
  pointer-events: none;
  /* Own layer: the blur is drawn once, instead of again behind every digit change of a running solve */
  will-change: transform;
  transition: opacity 0.3s var(--ease-apple), background 0.3s var(--ease-apple), transform 0.3s var(--ease-apple);
}

#timer-area.state-holding #timer-halo {
  background: radial-gradient(circle, rgba(255, 159, 10, 0.32) 0%, transparent 70%);
  opacity: 0.65;
  transform: scale(1.06);
}

/* Finger down with inspection on: the glow takes the inspection colour, release starts the countdown */
#timer-area.is-priming #timer-halo {
  background: radial-gradient(circle, rgba(255, 214, 10, 0.26) 0%, transparent 70%);
  opacity: 0.6;
  transform: scale(1.04);
}

#timer-area.state-ready #timer-halo {
  background: radial-gradient(circle, rgba(48, 209, 88, 0.42) 0%, transparent 70%);
  opacity: 0.85;
  transform: scale(1.12);
}

#timer-area.state-pb #timer-halo {
  background: radial-gradient(circle, rgba(48, 209, 88, 0.38) 0%, transparent 70%);
  opacity: 0.78;
}

/* ==========================================================================
   Immersive Running Mode (.timer-running)
   ========================================================================== */

.timer-running #header,
.timer-running #mobile-tab-dock,
.timer-running #stats-panel,
.timer-running #scramble-capsule,
.timer-running #under-timer-averages,
.timer-running .arena-bottom-stack {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mid-solve the colour pools go dark but the edge fade stays: in Safari the page still meets the
   tinted status-bar and toolbar strips without a black-against-green seam */
.timer-running .ambient-stage::before {
  opacity: 0 !important;
}

.timer-running #timer-area {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 600 !important;
}

/* Inspection / hold: start fading distractions before the timer even runs */
#app:has(#timer-area.state-inspecting) #mobile-tab-dock,
#app:has(#timer-area.state-inspecting) .arena-bottom-stack,
#app:has(#timer-area.state-inspecting) #header,
#app:has(#timer-area.state-holding) .arena-bottom-stack,
#app:has(#timer-area.state-ready) .arena-bottom-stack {
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-apple);
}

/* The sidebar only exists as a visible panel on desktop (on mobile it is a hidden tab) */
@media (min-width: 921px) and (min-height: 521px), (min-width: 1101px) {
  #app:has(#timer-area.state-inspecting) #stats-panel,
  #app:has(#timer-area.state-holding) #stats-panel,
  #app:has(#timer-area.state-ready) #stats-panel {
    opacity: 0.12;
    pointer-events: none;
  }
}

.timer-running:not(.timer-running-splits) .timer-status-slot,
.timer-running .timer-action-slot,
.timer-running #under-timer-averages {
  display: none !important;
}

.timer-running #timer-display {
  font-size: clamp(5.2rem, 15vw, 9.6rem);
}

/* Minute-plus times are wider ("1:05.32", "10:05.32"): sized by screen width so they
   never run off a narrow phone mid-solve (the tick handler sets these classes) */
.timer-running #timer-display.timer-text-long {
  font-size: clamp(3rem, 22vw, 7.6rem);
}

.timer-running #timer-display.timer-text-xlong {
  font-size: clamp(2.6rem, 19vw, 6.6rem);
}

/* Short desktop windows: 1366×768 and 1280×720 laptops leave about 560–650 px under the browser
   bars and taskbar. Digits sized by height and slimmer cards keep everything on screen. */
@media (min-width: 921px) and (min-height: 521px) and (max-height: 660px), (min-width: 1101px) and (max-height: 660px) {
  #timer-display {
    font-size: clamp(4rem, 17vh, 8.6rem);
  }
  #timer-display.timer-text-long {
    font-size: clamp(3rem, 12vh, 6.4rem);
  }
  #bento-deck {
    height: 118px;
  }
}

/* Even shorter: the shortcut row goes (the keys themselves keep working) */
@media (min-width: 921px) and (min-height: 521px) and (max-height: 580px), (min-width: 1101px) and (max-height: 580px) {
  #keyboard-hints-bar {
    display: none;
  }
}

/* ==========================================================================
   Focus Mode (.zen-mode)
   ========================================================================== */

/* Focus mode removes the sidebar the same way the collapse toggle does (see sidebar.css);
   a single-column grid used to push the hidden panel under the timer and halve its height */

.zen-mode #stats-panel,
.zen-mode .arena-bottom-stack,
.zen-mode #mobile-tab-dock {
  opacity: 0;
  pointer-events: none;
}

.zen-mode #header {
  opacity: 0.42;
}

.zen-mode #header:hover,
.zen-mode #header:focus-within {
  opacity: 1;
}

.zen-mode #scramble-capsule {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.zen-mode #scramble-capsule::before {
  opacity: 0;
}

.zen-mode .scramble-actions,
.zen-mode .scramble-top-bar {
  display: none !important;
}