body.theme-transparent-stage {
  --bg: #080a0d;
  --app-bg:
    linear-gradient(115deg, rgba(132, 38, 45, 0.18), transparent 34%),
    linear-gradient(245deg, rgba(45, 124, 142, 0.18), transparent 36%),
    linear-gradient(180deg, #0b0d10 0%, #15171c 52%, #090b0e 100%);
  --surface: rgba(10, 14, 20, 0.72);
  --surface-strong: rgba(17, 23, 32, 0.84);
  --text: #fff7e8;
  --muted: #d8cbb6;
  --line: rgba(255, 247, 232, 0.18);
  --button-bg: rgba(18, 24, 33, 0.78);
  --input-bg: rgba(4, 7, 12, 0.76);
  --badge-bg: rgba(255, 247, 232, 0.1);
  --toast-bg: rgba(8, 11, 16, 0.88);
  --accent: #e4bd70;
  --accent-text: #160f05;
  --focus-ring: rgba(228, 189, 112, 0.28);
  --affirm: #df5b5f;
  --negative: #50a9bd;
  --danger: #ff5b58;
  --success: #72c48b;
  --shadow: 0 18px 52px rgba(0, 0, 0, 0.3);
}

body.theme-transparent-stage .app-shell {
  background: var(--app-bg);
}

body.theme-transparent-stage .setup-view,
body.theme-transparent-stage .timer-view {
  position: relative;
  isolation: isolate;
}

body.theme-transparent-stage .setup-view::before,
body.theme-transparent-stage .timer-view::before,
body.theme-transparent-stage .display-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.38));
  pointer-events: none;
}

body.theme-transparent-stage .setup-view > *,
body.theme-transparent-stage .timer-view > *,
body.theme-transparent-stage .display-screen > * {
  position: relative;
  z-index: 1;
}

body.theme-transparent-stage .timer-view {
  background:
    linear-gradient(120deg, rgba(104, 28, 36, 0.28), transparent 34%),
    linear-gradient(245deg, rgba(36, 112, 130, 0.28), transparent 38%),
    linear-gradient(180deg, #07090d 0%, #12161d 52%, #07090d 100%);
  background-position: center;
  background-size: cover;
}

body.theme-transparent-stage .timer-view::before {
  z-index: 1;
}

body.theme-transparent-stage .timer-view > .dot-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

body.theme-transparent-stage .timer-view > .dot-field > .dot-field-canvas {
  display: block;
}

body.theme-transparent-stage .timer-view > :not(.dot-field) {
  z-index: 2;
}

body.theme-transparent-stage.has-timer-background .timer-view.view-active {
  color: var(--text);
  background-image: var(--timer-background-image);
}

body.theme-transparent-stage.has-timer-background .timer-view.view-active::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.38)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.24)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 128px);
}

body.theme-transparent-stage .timer-toolbar,
body.theme-transparent-stage .action-bar,
body.theme-transparent-stage .panel,
body.theme-transparent-stage .clock-panel,
body.theme-transparent-stage .team-card,
body.theme-transparent-stage .display-team,
body.theme-transparent-stage .display-clock,
body.theme-transparent-stage .background-popover,
body.theme-transparent-stage .replay-popover,
body.theme-transparent-stage .time-popover,
body.theme-transparent-stage .raid-popover {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(1.12);
}

body.theme-transparent-stage .timer-toolbar,
body.theme-transparent-stage .action-bar {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
}

body.theme-transparent-stage .panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 24%),
    var(--surface);
}

body.theme-transparent-stage .clock-panel {
  overflow: hidden;
  border-top-color: rgba(228, 189, 112, 0.56);
  background:
    linear-gradient(180deg, rgba(228, 189, 112, 0.14), transparent 28%),
    linear-gradient(90deg, rgba(223, 91, 95, 0.08), transparent 28%, transparent 72%, rgba(80, 169, 189, 0.08)),
    var(--surface);
}

body.theme-transparent-stage .clock-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(228, 189, 112, 0.18), transparent);
  opacity: 0.46;
  transform: translateX(-65%);
  animation: transparentStageSweep 9s ease-in-out infinite;
  pointer-events: none;
}

body.theme-transparent-stage .timing-stack,
body.theme-transparent-stage .stage-line,
body.theme-transparent-stage .sound-demo-panel,
body.theme-transparent-stage .time-popover,
body.theme-transparent-stage .raid-popover {
  position: relative;
  z-index: 1;
}

body.theme-transparent-stage .team-card {
  background: var(--surface);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

body.theme-transparent-stage .affirmative-card {
  background:
    linear-gradient(90deg, rgba(223, 91, 95, 0.22), rgba(9, 12, 17, 0.32) 46%),
    var(--surface);
}

body.theme-transparent-stage .negative-card {
  background:
    linear-gradient(270deg, rgba(80, 169, 189, 0.22), rgba(9, 12, 17, 0.32) 46%),
    var(--surface);
}

body.theme-transparent-stage .team-card:hover {
  transform: translateY(-1px);
  border-color: rgba(228, 189, 112, 0.42);
}

body.theme-transparent-stage input::placeholder,
body.theme-transparent-stage textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 66%, transparent);
}

body.theme-transparent-stage input:focus,
body.theme-transparent-stage select:focus,
body.theme-transparent-stage textarea:focus {
  border-color: rgba(228, 189, 112, 0.82);
  background: rgba(5, 8, 13, 0.92);
}

body.theme-transparent-stage .clock-text {
  color: #ffe8ad;
  text-shadow:
    0 0 28px rgba(228, 189, 112, 0.26),
    0 18px 52px rgba(0, 0, 0, 0.38);
  animation: transparentStageClockIdle 4.8s ease-in-out infinite;
}

body.theme-transparent-stage.has-timer-background .timer-view.view-active .clock-text {
  color: var(--timer-clock-color);
  text-shadow:
    0 0 28px var(--timer-clock-shadow),
    0 18px 52px rgba(0, 0, 0, 0.42);
}

body.theme-transparent-stage .stage-line h2,
body.theme-transparent-stage .timer-title h1,
body.theme-transparent-stage .display-header h1 {
  color: #fff8ec;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
}

body.theme-transparent-stage .side-badge,
body.theme-transparent-stage .status-pill,
body.theme-transparent-stage .stage-counter,
body.theme-transparent-stage button[data-key]::after {
  border-color: rgba(228, 189, 112, 0.28);
  background: rgba(255, 247, 232, 0.1);
}

body.theme-transparent-stage .status-pill {
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: 0 0 28px rgba(228, 189, 112, 0.18);
}

body.theme-transparent-stage.timer-status-running .status-pill,
body.theme-transparent-stage.timer-status-running .clock-panel {
  animation: transparentStageRunning 2.8s ease-in-out infinite;
}

body.theme-transparent-stage.timer-status-paused .clock-text {
  animation-play-state: paused;
  opacity: 0.84;
}

body.theme-transparent-stage.timer-status-complete .status-pill,
body.theme-transparent-stage.timer-status-overtime .status-pill {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 0 30px rgba(255, 91, 88, 0.34);
}

body.theme-transparent-stage.timer-status-overtime .clock-text,
body.theme-transparent-stage .clock-text.is-overtime {
  color: var(--danger);
  animation: transparentStageWarning 1.1s ease-in-out infinite;
}

body.theme-transparent-stage button,
body.theme-transparent-stage .switch-line,
body.theme-transparent-stage input,
body.theme-transparent-stage select,
body.theme-transparent-stage textarea {
  border-color: var(--line);
  background: var(--button-bg);
  backdrop-filter: blur(14px);
  transition:
    transform 130ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

body.theme-transparent-stage input,
body.theme-transparent-stage select,
body.theme-transparent-stage textarea {
  background: var(--input-bg);
}

body.theme-transparent-stage button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(228, 189, 112, 0.72);
  background: rgba(23, 29, 39, 0.72);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 0 0 3px rgba(228, 189, 112, 0.1);
}

body.theme-transparent-stage button:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
  border-color: rgba(228, 189, 112, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 2px 8px rgba(0, 0, 0, 0.28);
}

body.theme-transparent-stage .primary-button,
body.theme-transparent-stage .timer-controls .primary-button {
  border-color: rgba(255, 233, 177, 0.54);
  color: var(--accent-text);
  background:
    linear-gradient(180deg, rgba(255, 238, 192, 0.38), rgba(228, 189, 112, 0)),
    var(--accent);
  box-shadow: 0 10px 34px rgba(228, 189, 112, 0.18);
}

body.theme-transparent-stage button.primary-button[data-key]::after {
  border-color: rgba(255, 244, 214, 0.34);
  color: #fff3cf;
  background: rgba(22, 15, 5, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0.96;
}

body.theme-transparent-stage .primary-button:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 244, 214, 0.48), rgba(228, 189, 112, 0.08)),
    #efca80;
  box-shadow: 0 14px 38px rgba(228, 189, 112, 0.28), 0 0 0 3px rgba(228, 189, 112, 0.12);
}

body.theme-transparent-stage button:disabled {
  transform: none;
  box-shadow: none;
}

body.theme-transparent-stage .dual-timer-item,
body.theme-transparent-stage .pool-item,
body.theme-transparent-stage .stage-preview-item,
body.theme-transparent-stage .inline-setting,
body.theme-transparent-stage .raid-setup,
body.theme-transparent-stage .recording-setup {
  border-color: rgba(255, 247, 232, 0.18);
  background: var(--surface-strong);
  backdrop-filter: blur(12px);
}

body.theme-transparent-stage .dual-timer-active,
body.theme-transparent-stage .pool-item-active {
  border-color: rgba(228, 189, 112, 0.66);
  box-shadow: 0 0 0 3px rgba(228, 189, 112, 0.18), 0 12px 34px rgba(0, 0, 0, 0.22);
}

body.theme-transparent-stage .display-screen {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  background:
    linear-gradient(120deg, rgba(117, 31, 39, 0.26), transparent 34%),
    linear-gradient(245deg, rgba(40, 116, 134, 0.26), transparent 38%),
    linear-gradient(180deg, #07090d 0%, #131821 54%, #07090d 100%);
  background-position: center;
  background-size: cover;
}

body.theme-transparent-stage.has-display-background .display-screen {
  background-image: var(--display-background-image);
}

body.theme-transparent-stage.has-display-background .display-screen::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 26%, transparent 74%, rgba(0, 0, 0, 0.22)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 132px);
}

body.theme-transparent-stage .display-header {
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.46);
}

body.theme-transparent-stage .display-team,
body.theme-transparent-stage .display-clock {
  background: rgba(8, 12, 18, 0.42);
}

body.theme-transparent-stage .display-clock {
  border: 1px solid rgba(255, 247, 232, 0.22);
  border-radius: 8px;
  backdrop-filter: blur(18px) saturate(1.16);
}

body.theme-transparent-stage .display-clock .clock-text {
  animation-duration: 5.8s;
}

@keyframes transparentStageSweep {
  0%,
  36% {
    transform: translateX(-68%);
    opacity: 0;
  }

  52% {
    opacity: 0.55;
  }

  76%,
  100% {
    transform: translateX(68%);
    opacity: 0;
  }
}

@keyframes transparentStageClockIdle {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.08);
  }
}

@keyframes transparentStageRunning {
  0%,
  100% {
    border-color: var(--line);
  }

  50% {
    border-color: rgba(228, 189, 112, 0.58);
  }
}

@keyframes transparentStageWarning {
  0%,
  100% {
    filter: brightness(1);
    text-shadow: 0 0 26px rgba(255, 91, 88, 0.24), 0 18px 52px rgba(0, 0, 0, 0.42);
  }

  50% {
    filter: brightness(1.24);
    text-shadow: 0 0 40px rgba(255, 91, 88, 0.46), 0 18px 52px rgba(0, 0, 0, 0.42);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-transparent-stage *,
  body.theme-transparent-stage *::before,
  body.theme-transparent-stage *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 900px) {
  body.theme-transparent-stage .timer-toolbar,
  body.theme-transparent-stage .action-bar {
    background: rgba(8, 12, 18, 0.56);
  }

  body.theme-transparent-stage .clock-text {
    min-height: clamp(4.4rem, 11vh, 6.4rem);
  }
}