/* Dark mode: play/pause button and volume bar contrast */
[data-theme="dark"] #kickbackIcon circle {
  fill: #2e3240;
  stroke: #b08dff;
}
[data-theme="dark"] #kickbackPlay,
[data-theme="dark"] #kickbackPause rect {
  fill: #b08dff;
}
[data-theme="dark"] .volume-bar-container {
  background: none;
}
[data-theme="dark"] .volume-bar {
  background: linear-gradient(90deg, #3a2e4d 0%, #2e3240 100%);
  border-color: #b08dff;
}
[data-theme="dark"] .volume-bar::-webkit-slider-thumb {
  background: #b08dff;
  border: 2px solid #2e3240;
}
[data-theme="dark"] .volume-bar:focus::-webkit-slider-thumb {
  background: #ff79b0;
}
[data-theme="dark"] .volume-bar::-moz-range-thumb {
  background: #b08dff;
  border: 2px solid #2e3240;
}
[data-theme="dark"] .volume-bar:focus::-moz-range-thumb {
  background: #ff79b0;
}
[data-theme="dark"] .volume-bar::-ms-thumb {
  background: #b08dff;
  border: 2px solid #2e3240;
}
[data-theme="dark"] .volume-bar:focus::-ms-thumb {
  background: #ff79b0;
}

/* Per-panel fly-in animation for theme change */

/* (Reverted) Mobile media queries removed earlier can be reintroduced later if needed */
/* Pastel volume bar for Kick Back audio */
.volume-bar-container {
  position: fixed;
  right: 2.2em;
  bottom: 1.5em;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  pointer-events: none;
}
.volume-bar {
  width: 120px;
  min-width: 60px;
  max-width: 160px;
  appearance: none;
  height: 0.7em;
  border-radius: 1em;
  background: linear-gradient(90deg, #ffe6f7 0%, #d1eaff 100%);
  box-shadow: 0 2px 8px 0 #e6e6fa80;
  outline: none;
  pointer-events: auto;
  transition: background 0.2s;
  border: 2.5px solid #a37bff;
}
.volume-bar::-webkit-slider-thumb {
  appearance: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #a37bff;
  box-shadow: 0 2px 8px #d1eaff80;
  border: 2px solid #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.volume-bar:focus::-webkit-slider-thumb {
  background: #ff9ac9;
}
.volume-bar::-moz-range-thumb {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #a37bff;
  box-shadow: 0 2px 8px #d1eaff80;
  border: 2px solid #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.volume-bar:focus::-moz-range-thumb {
  background: #ff9ac9;
}
.volume-bar::-ms-thumb {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #a37bff;
  box-shadow: 0 2px 8px #d1eaff80;
  border: 2px solid #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.volume-bar:focus::-ms-thumb {
  background: #ff9ac9;
}
.volume-bar::-webkit-slider-runnable-track {
  height: 0.7em;
  border-radius: 1em;
  background: linear-gradient(90deg, #ffe6f7 0%, #d1eaff 100%);
}
.volume-bar::-ms-fill-lower {
  background: #ffe6f7;
}
.volume-bar::-ms-fill-upper {
  background: #d1eaff;
}
.volume-bar:focus {
  outline: none;
  box-shadow: 0 0 0 3px #a37bff44;
}
/* Removed listen-btn, listen-label, icon-svg, and related button/icon styles. Play/pause is now a plain SVG. */
html, body { height: 100%; max-width: 100vw; max-height: 100vh; overflow: hidden; }
.dashboard-grid.five-col { display:grid; grid-template-columns:1fr 1fr 1.3fr 1fr 1fr; align-items:stretch; gap:0.7rem; max-width:1920px; margin:0 auto; width:100vw; height:600px; box-sizing:border-box; overflow:hidden; }
.panel-col {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  height: 100%;
  justify-content: center;
}
.col-main {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Quirky panel animations */
.heartbeat-anim {
  animation: heartbeatPulse 0.7s cubic-bezier(.4,1.6,.6,1) 1;
}
@keyframes heartbeatPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 #e88); }
  20% { transform: scale(1.18); filter: drop-shadow(0 0 8px #e88); }
  40% { transform: scale(0.96); }
  60% { transform: scale(1.12); }
  80% { transform: scale(1.04); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 #e88); }
}

.foxnap-anim {
  animation: foxNapBlink 1.2s cubic-bezier(.4,1.6,.6,1) 1;
}
@keyframes foxNapBlink {
  0% { filter: brightness(1); }
  10% { filter: brightness(1.2); }
  20% { filter: brightness(0.8); }
  30% { filter: brightness(1.1); }
  100% { filter: brightness(1); }
}

.genius-anim {
  animation: geniusFlash 0.7s cubic-bezier(.4,1.6,.6,1) 1;
}
@keyframes geniusFlash {
  0% { filter: drop-shadow(0 0 0 #f8c); }
  30% { filter: drop-shadow(0 0 10px #f8c); }
  100% { filter: drop-shadow(0 0 0 #f8c); }
}

.kickback-anim {
  animation: kickbackBeat 0.7s cubic-bezier(.4,1.6,.6,1) 1;
}
@keyframes kickbackBeat {
  0% { transform: scale(1); }
  20% { transform: scale(1.18) rotate(-6deg); }
  40% { transform: scale(0.96) rotate(4deg); }
  60% { transform: scale(1.12) rotate(-2deg); }
  80% { transform: scale(1.04) rotate(2deg); }
  100% { transform: scale(1); }
}
/* Base styles */
:root {
  --bg: #f6f7fb;
  --panel-bg: #ffffffcc;
  --panel-border: #e5e2f7;
  --lavender: #d7c8ff;
  --mint: #c5f7e3;
  --blue: #c8e4ff;
  --peach: #ffd8c8;
  --yellow: #fff3c5;
  --text: #4a4560;
  --text-soft: #6d6785;
  --accent: #a37bff;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --shadow-soft: 0 4px 12px -2px rgba(90,70,150,0.12), 0 2px 4px rgba(90,70,150,0.08);
  --shadow-inner: inset 0 2px 5px rgba(120,90,160,0.08), inset 0 -2px 4px rgba(255,255,255,0.6);
  --gradient-sky: linear-gradient(140deg, #fdfbff 0%, #f4f0ff 60%, #eefcff 100%);
  --gradient-accent: linear-gradient(120deg, #a37bff, #ff9ac9);
}

[data-theme="dark"] {
  --bg: #14151a;
  --panel-bg: #1f2129cc;
  --panel-border: #2e3240;
  --lavender: #4f3d7d;
  --mint: #255b46;
  --blue: #1f4764;
  --peach: #663d2e;
  --yellow: #5a4d1d;
  --text: #e5e7ef;
  --text-soft: #b3b8c9;
  --accent: #b08dff;
  --gradient-sky: linear-gradient(140deg, #15171d 0%, #1b1e26 55%, #1a2330 100%);
  --gradient-accent: linear-gradient(120deg, #b08dff, #ff79b0);
  --shadow-soft: 0 4px 18px -4px rgba(0,0,0,0.5), 0 2px 6px -1px rgba(0,0,0,0.4);
  --shadow-inner: inset 0 2px 5px rgba(255,255,255,0.04), inset 0 -2px 4px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Quicksand', 'Nunito', 'Patrick Hand', system-ui, sans-serif;
  background: var(--gradient-sky);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

[data-theme="dark"] body { color: var(--text); }

.app-shell { min-height:100vh; max-height:100vh; display:flex; flex-direction:column; padding:0.5rem 0.5rem 0 0.5rem; gap:0.5rem; overflow:hidden; }

.site-header { text-align: center; padding-top: .25rem; }
.site-header h1 {
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 3rem);
  margin: 0 0 .4rem;
  background: var(--gradient-accent);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: 1px;
}
.site-header .fren { font-family: 'Patrick Hand', cursive; font-size: 1.1em; }
.site-header .tagline { margin: 0; font-size: .95rem; color: var(--text-soft); }

.sparkle { display: inline-block; animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{ transform: scale(.9) rotate(0deg); opacity:.6;} 50% { transform: scale(1.15) rotate(20deg); opacity:1; } }

main { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; overflow: hidden; }

/* Dashboard layout: side stacks flanking main timer on wide screens */
.dashboard-grid {
  display: grid;
  grid-template-columns: 290px minmax(520px, 700px) 290px;
  align-items: stretch;
  gap: clamp(.75rem,1.1vw,1.25rem);
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(.4rem,.8vw,.8rem);
  height: 100%;
}

.panels-stack { display: flex; flex-direction: column; gap: clamp(1rem,1.4vw,1.25rem); }
.panels-stack.left-stack { justify-content: flex-start; }
.panels-stack.right-stack { justify-content: flex-start; }

@media (max-width: 1400px) { .dashboard-grid { grid-template-columns: 280px minmax(520px, 1fr) 280px; } }
@media (max-width: 1180px) { .dashboard-grid { grid-template-columns: 250px minmax(480px, 1fr) 250px; } .panels-stack .panel { min-height: 150px; } }
@media (max-width: 1040px) { .dashboard-grid { grid-template-columns: 1fr 1fr; grid-template-areas: 'main main' 'left right'; } #main-timer { grid-area: main; } .left-stack { grid-area: left; } .right-stack { grid-area: right; } .dashboard-grid { row-gap: 2rem; } .panels-stack { flex-direction: row; flex-wrap: wrap; } .panels-stack .panel { flex: 1 1 250px; } }
@media (max-width: 760px) { .dashboard-grid { grid-template-columns: 1fr; grid-template-areas: 'main'; } .left-stack, .right-stack { flex-direction: row; flex-wrap: wrap; } .left-stack, .right-stack { order: 2; } #main-timer { order: 1; } .panels-stack .panel { flex: 1 1 calc(50% - .75rem); } }
@media (max-width: 520px) { .panels-stack .panel { flex: 1 1 100%; } }

.main-timer-card { position:relative; max-width:100%; margin:0 auto; background:var(--panel-bg); backdrop-filter:blur(10px) saturate(160%); border:2px solid var(--panel-border); border-radius:var(--radius-lg); padding:1.1rem 1.2rem 1.1rem 1.2rem; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; gap:1.1rem; overflow:hidden; height:100%; justify-content:center; }
.timer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
  gap: clamp(.75rem, 2vw, 1.5rem);
  align-items: stretch;
}
.time-block {
  background: #fff;
  border-radius: var(--radius-md);
  position: relative;
  padding: .85rem .75rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-soft);
  border: 2px solid #ece9f9;
  font-variant-numeric: tabular-nums;
}
.time-block .value {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 1px;
  background: linear-gradient(180deg,#5d4b82,#8d72d9);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 4px 10px rgba(120,90,180,0.15);
}
.time-block .label { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }

.reunion-date { font-size: .85rem; text-align: center; color: var(--text-soft); opacity: .85; }

/* Original .panels grid repurposed for stacks; keep minimal if used elsewhere */
.panels { width: 100%; }

.panel {
  --pad: 1rem;
  position: relative;
  background: var(--panel-bg);
  border: 2px solid var(--panel-border);
  backdrop-filter: blur(8px) saturate(160%);
  border-radius: var(--radius-lg);
  padding: var(--pad) var(--pad) calc(var(--pad) + .4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  box-shadow: var(--shadow-soft);
  min-height: 120px;
  max-height: 220px;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.21,1.02,.73,1), box-shadow .4s ease;
}

[data-theme="dark"] .panel { background: var(--panel-bg); border-color: var(--panel-border); }
[data-theme="dark"] .time-block {
  background: #181a20;
  border-color: #23242a;
}
[data-theme="dark"] .time-block .value {
  background: linear-gradient(180deg,#5d4b82,#8d72d9);
  color: transparent;
  text-shadow: 0 4px 10px rgba(120,90,180,0.15), 0 2px 8px #000a;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .panel-value { color: var(--text); }
[data-theme="dark"] .panel-label { color: var(--text-soft); }
[data-theme="dark"] .reunion-date { color: var(--text-soft); }
[data-theme="dark"] .panel[data-panel="sleeps"] { background: linear-gradient(160deg,#3c3157,#1f2129 80%); }
[data-theme="dark"] .panel[data-panel="coffee"] { background: linear-gradient(160deg,#5a392c,#1f2129 80%); }
[data-theme="dark"] .panel[data-panel="rotations"] { background: linear-gradient(160deg,#274439,#1f2129 80%); }
[data-theme="dark"] .panel[data-panel="fullmoons"] { background: linear-gradient(160deg,#1f3f55,#1f2129 80%); }
[data-theme="dark"] .panel[data-panel="heartbeats"] { background: linear-gradient(160deg,#522f3c,#1f2129 80%); }
[data-theme="dark"] .panel[data-panel="foxnaps"] { background: linear-gradient(160deg,#5a4a2d,#1f2129 80%); }
[data-theme="dark"] .panel[data-panel="genius"] { background: linear-gradient(160deg,#34365e,#1f2129 80%); }
[data-theme="dark"] .panel[data-panel="kickback"] { background: linear-gradient(160deg,#1c4f43,#1f2129 80%); }

/* Toggle button */
.theme-toggle {
  margin-top: .25rem;
  background: var(--panel-bg);
  color: var(--text);
  border: 2px solid var(--panel-border);
  border-radius: 999px;
  padding: .4rem .85rem;
  font-size: .9rem;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  backdrop-filter: blur(8px) saturate(160%);
  box-shadow: var(--shadow-soft);
  transition: background .3s, color .3s, border-color .3s, transform .25s;
}
.theme-toggle:hover { transform: translateY(-2px); }
.theme-toggle:active { transform: translateY(0); }
.theme-toggle:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
[data-theme="dark"] .theme-toggle { background: #262a33cc; }
.panel::before, .panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.panel::before {
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.9), rgba(255,255,255,0));
  mix-blend-mode: overlay;
  opacity: .7;
}
.panel::after {
  background: linear-gradient(140deg, rgba(255,255,255,.4), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity .6s;
}
.panel:hover {
  transform: translateY(-6px) rotateX(8deg) rotateY(-4deg) scale(1.015);
  box-shadow: 0 10px 28px -6px rgba(90,70,150,0.25), 0 6px 12px -4px rgba(90,70,150,0.18);
}
.panel:hover::after { opacity: 1; }

.panel .icon { font-size: 1.8rem; filter: drop-shadow(0 3px 4px rgba(80,60,120,0.15)); }
.panel-value { font-size: 2.2rem; font-weight: 700; line-height: 1; letter-spacing: 1px; }
.panel-label { font-size:.85rem; text-transform:uppercase; letter-spacing:.15em; color:var(--text-soft); font-weight:600; }
.panel-text { font-size: .9rem; color: var(--text); margin-top: auto; opacity: .9; }

/* Panel backgrounds for all types */
.panel[data-panel="sleeps"] { background: linear-gradient(160deg, var(--lavender), #ffffff 80%); }
.panel[data-panel="coffee"] { background: linear-gradient(160deg, var(--peach), #ffffff 80%); }
.panel[data-panel="rotations"] { background: linear-gradient(160deg, var(--mint), #ffffff 80%); }
.panel[data-panel="fullmoons"] { background: linear-gradient(160deg, var(--blue), #ffffff 80%); }
.panel[data-panel="heartbeats"] { background: linear-gradient(160deg, #ffd6e6, #fff 80%); }
.panel[data-panel="foxnaps"] { background: linear-gradient(160deg, #ffe6c8, #fff 80%); }
.panel[data-panel="genius"] { background: linear-gradient(160deg, #e6e6ff, #fff 80%); }
.panel[data-panel="kickback"] { background: linear-gradient(160deg, #e6fff7, #fff 80%); }
/* Placeholder panel removed */

/* Responsive tweaks */
@media (max-width: 760px) {
  .panel { min-height: 155px; }
  .time-block .value { font-size: clamp(2rem, 9vw, 3rem); }
  .panel-value { font-size: 1.9rem; }
}
@media (max-width: 520px) {
  .timer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Animations for digits */
.digit-bounce { animation: bounceIn .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes bounceIn { 0% { transform: translateY(30%) scale(.92); opacity: 0;} 55% { transform: translateY(-12%) scale(1.05); opacity:1;} 100% { transform: translateY(0) scale(1); } }

.fade-update { animation: fadeUpdate .9s ease; }
@keyframes fadeUpdate { 0% { opacity:.35; filter:blur(2px);} 100% { opacity:1; filter:blur(0);} }

.site-footer { text-align: center; font-size: .7rem; color: var(--text-soft); padding-bottom: .5rem; }

/* Accessibility focus ring */
.panel:focus-visible, .time-block:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }