* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  background-color: #1c1c1e;
  color: #ffffff;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html {
  overflow-x: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 10px;
  /* Reduced padding for mobile */
  background-color: #2c2c2e;
  overflow: visible;
  /* Allow dropdown to escape */
}

.header-right {
  display: flex;
  align-items: center;
  position: relative;
  overflow: visible;
  /* Allow dropdown to escape */
}

/* -------- REVOLVER UI -------- */
/* -------- REVOLVER UI -------- */
.static-title {
  font-size: 18px;
  font-weight: 400;
  /* Thinner to avoid blooming */
  color: #f5f5f7;
  /* Soft white to match OAT and Revolver active */
  user-select: none;
  white-space: pre;
  position: relative;
  z-index: 20;
  text-shadow: none !important;
  -webkit-font-smoothing: grayscale;
  line-height: 30px;
  /* Match revolver item height */
  letter-spacing: -0.01em;
}

@media (max-width: 450px) {
  .static-title {
    font-size: 0;
    /* Hide text */
  }

  .static-title::after {
    content: "De-Ice";
    /* Replace with shorter title */
    font-size: 18px;
    font-weight: 400;
  }
}

.revolver-wrapper {
  height: 44px;
  /* Increased for better touch target (Apple HIG minimum) */
  overflow: visible;
  position: relative;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: min-width 0.3s ease;
  z-index: 10;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 6px;
  perspective: 800px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: pan-x;
  /* Allow horizontal swipe only, prevent vertical pull */
  padding: 8px 0;
  /* Extra vertical touch area */
}

.revolver-wrapper:focus,
.revolver-wrapper:active {
  outline: none;
  background-color: transparent;
  /* Ensure no grey background */
  -webkit-tap-highlight-color: transparent;
}

/* .revolver-wrapper:hover {} */

/* .revolver-wrapper:hover {} */

.revolver-guide {
  font-size: 18px;
  font-weight: 400;
  visibility: hidden;
  /* Reserve space but invisible */
  padding: 0 20px 0 0;
  /* Extra breathing room ONLY on right */
  white-space: nowrap;
}

.revolver-visual-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  /* background-color: #1c1c1e; Removed to blend with header */
  background-color: transparent;
  /* Match flight list */
  border-radius: 0;
  /* Removed to enhance "wrapping" illusion */
  border: none;
  /* Visual cue (Removed as requested) */
  transition: top 0.15s ease-out, bottom 0.15s ease-out, border-color 0.15s;
  display: flex;
  /* To center list */
  align-items: center;
  justify-content: flex-start;
  perspective: 500px;
  /* Stronger 3D curve */
  z-index: 10;
  overflow: hidden;
  /* Mask removed on idle to keep active text sharp */
  /* Persistent mask, tuned to 15% to clear active text while preventing flash */
  pointer-events: none;
  clip-path: inset(10px 0);
  /* Aggressive clipping on idle to hide neighbors while preserving active text descenders */
}

/* Apply mask only on valid hover (desktop) or active interaction (touch) */
@media (hover: hover) {
  .revolver-wrapper:hover .revolver-visual-container {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  }
}

/* Also apply mask during touch interaction */
.revolver-wrapper.interacting .revolver-visual-container {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.revolver-wrapper:hover .revolver-visual-container,
.revolver-wrapper.interacting .revolver-visual-container {
  top: -12px;
  /* Flush with header top */
  bottom: -12px;
  /* Flush with header bottom */
  /* Vertical expansion */
  z-index: 15;
  clip-path: none;
  /* Reveal neighbors on hover/interact */
  border-color: transparent;
  /* Remove border on hover/interact to open up */
}

/* Compensate for container expansion to keep mask stationary */
/* .revolver-wrapper:hover .revolver-mask - Removed */

/* Also compensate BG list to keep it stationary */
/* .revolver-wrapper:hover #revolver-list-bg - Removed */

/* .revolver-mask - Removed */
/* .revolver-mask .revolver-list - Removed */

/* Single List Styles */
.revolver-list {
  position: relative;
  width: 100%;
  height: 30px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.revolver-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 18px;
  font-weight: 400;
  /* Thinner to avoid blooming */
  color: #8e8e93;
  /* Default Gray */
  user-select: none;
  white-space: nowrap;
  backface-visibility: hidden;
  opacity: 1;
  /* Always visible */
  transition: opacity 0.3s, color 0.3s;
  text-shadow: none !important;
  -webkit-font-smoothing: grayscale;
  line-height: 30px;
  letter-spacing: -0.01em;
}

@media (max-width: 450px) {
  .revolver-item {
    font-size: 18px;
  }
}

.revolver-item.active {
  color: #f5f5f7;
  /* Active Soft White to match title */
  text-shadow: none !important;
  /* Force remove any glow */
  -webkit-font-smoothing: grayscale;
  /* Keep it sharp */
}

/* Background list (Gray) - REMOVED */
/* #revolver-list-bg .revolver-item {} */

/* Foreground list (White) - REMOVED */
/* #revolver-list-fg .revolver-item {} */

/* Hide active class logic as we use masking now */
/* .revolver-item.active {} */

/* Show neighbors slightly on hover */
/* .revolver-wrapper:hover .revolver-item {} */

/* Keep active fully visible on hover */
/* .revolver-wrapper:hover .revolver-item.active {} */



.oat {
  font-size: 16px;
  font-weight: 500;
  color: #f5f5f7;
  /* Matching Title and Revolver Active */
  padding-left: 12px;
  border-left: 1px solid #3a3a3c;
  line-height: normal;
}

@media (max-width: 400px) {
  .oat {
    font-size: 14px;
    padding-left: 8px;
  }
}

/* Audio Button States */
#btn-audio.audio-off {
  color: #555555;
  /* Dimmed when off */
  opacity: 0.7;
}

#btn-audio.audio-on {
  color: #ffffff;
  opacity: 1;
}

main {
  padding: 8px;
}

/* -------- FLIGHT ROW -------- */

.flight {
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  grid-template-rows: 20px auto;
  /* Row 1: Labels, Row 2: Values */
  align-items: center;
  padding: 8px 10px;
  /* Reduced top/bottom padding */
  margin-bottom: 6px;
  border-radius: 10px;
  background-color: #1c1c1e;
  transition: transform 0.3s ease-out, background-color 0.3s ease;
  /* Apple-like smoothness */
}

.flight.active {
  background-color: rgba(48, 209, 88, 0.1);
}

.flight.new-flight {
  animation: flash-highlight 4s ease-out forwards;
}

@keyframes flash-highlight {
  0% {
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2);
  }

  100% {
    background-color: #1c1c1e;
    box-shadow: none;
  }
}

/* Flatten the structure to control alignment of grandchildren directly */
.left,
.center,
.right {
  display: contents;
}

/* Column 1: Left (Phonetic + Acreg) */
.phonetic {
  grid-column: 1;
  grid-row: 1;
  align-self: baseline;
  justify-self: start;

  font-size: 12px;
  line-height: 1;
  /* Enforce tight box */
  color: #b0b0b0;
  margin: 0;
  /* No margin */
}

.acreg {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  /* Midline alignment */
  justify-self: start;

  font-size: 32px;
  font-weight: 700;
  cursor: pointer;
  min-height: 38px;
  user-select: none;
  -webkit-user-select: none;
}

/* Column 2: Center (Status + Bay) */
.status {
  grid-column: 2;
  grid-row: 1;
  align-self: baseline;
  justify-self: center;

  font-size: 12px;
  line-height: 1;
  /* Enforce tight box */
  color: #b0b0b0;
  margin: 0;
  /* No margin */
}

.bay {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  /* Midline alignment */
  justify-self: center;

  font-size: 44px;
  font-weight: 700;
  min-height: 52px;
}

/* Column 3: Right (TimeTag + Time) */
.time-tag {
  grid-column: 3;
  grid-row: 1;
  align-self: baseline;
  justify-self: end;

  font-size: 12px;
  line-height: 1;
  /* Enforce tight box */
  color: #b0b0b0;
  margin: 0;
  /* No margin */
}

.time {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  /* Midline alignment */
  justify-self: end;

  font-size: 32px;
  font-weight: 700;
  min-height: 38px;
}

/* Mobile Responsive Flight Card */
@media (max-width: 450px) {
  .flight {
    grid-template-columns: minmax(80px, 1fr) minmax(60px, auto) minmax(70px, 1fr);
    padding: 8px 8px;
    overflow: hidden;
  }

  .acreg {
    font-size: 24px;
    min-height: 30px;
  }

  .bay {
    font-size: 32px;
    min-height: 40px;
  }

  .time {
    font-size: 24px;
    min-height: 30px;
  }

  .status {
    white-space: nowrap;
    /* Prevent "OFF BLOCK" from wrapping */
  }

  .phonetic,
  .status,
  .time-tag {
    font-size: 10px;
  }
}

/* -------- COLORS -------- */

.green {
  color: #30d158;
}

.red {
  color: #ff453a;
}

.blue {
  color: #64d2ff;
}

.orange {
  color: #ff9f0a;
}

.gray {
  color: #8e8e93;
}

.requested {
  color: #bababa;
  /* Light Grey (softer than white) */
}

.requested-bg {
  background-color: transparent;
}

/* -------- EMPTY STATE -------- */

.empty {
  margin-top: 20px;
  text-align: center;
  font-size: 16px;
  color: #8e8e93;
}

/* -------- ANIMATIONS -------- */

@keyframes newFlightPulse {
  0% {
    background-color: #1c1c1e;
  }

  50% {
    background-color: #333333;
  }

  /* Subtle lighter gray */
  100% {
    background-color: #1c1c1e;
  }
}

.new-flight {
  animation: newFlightPulse 2s ease-in-out infinite;
}

@keyframes breatheEffect {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
    /* Subtle pump */
  }

  100% {
    transform: scale(1);
  }
}

.changed-pulse {
  animation: breatheEffect 2s ease-in-out forwards;
}

@keyframes alarm-breathe {
  0% {
    filter: brightness(1);
    background-color: #1c1c1e;
  }

  50% {
    filter: brightness(1.5);
    background-color: #2c2c2e;
  }

  100% {
    filter: brightness(1);
    background-color: #1c1c1e;
  }
}

/* -------- ALARM MENU (Dropdown) -------- */

.header-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  margin-right: 12px;
  transition: color 0.3s, opacity 0.3s;
  position: relative;
  z-index: 101;
  color: #ffffff;
  /* Match title text and OAT */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

.select-all-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  color: #f5f5f7;
  padding: 2px 6px;
  opacity: 0.8;
  transition: background 0.2s, opacity 0.2s;
  user-select: none;
  -webkit-user-select: none;
}

.select-all-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
}

.header-btn svg {
  stroke: currentColor;
  fill: none;
}

.header-btn:hover,
.header-btn.active {
  /* filter: none; */
  opacity: 0.8;
  /* Simple hover effect since we removed filter */
}

.alarm-menu {
  position: fixed;
  top: 60px;
  right: 120px;
  left: auto;
  width: 240px;
  /* Right edge under the bell, with original fixed width */
  background-color: #2c2c2e;
  border: 1px solid #3a3a3c;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 16px;
  /* More padding */
  z-index: 9999;
  /* Very high z-index */

  /* Animation Origin: Top Right (Bell icon location) */
  transform-origin: top right;
  animation: menu-pop-shake 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  /* Bouncy pop */
  overflow: visible;
}

.alarm-menu.hidden {
  display: none;
  animation: none;
  /* Reset animation */
}

@keyframes menu-pop-shake {
  0% {
    transform: scale(0.5) rotate(-10deg) translateY(-20px);
    opacity: 0;
  }

  60% {
    transform: scale(1.05) rotate(2deg) translateY(0);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg) translateY(0);
    opacity: 1;
  }
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.menu-header h3 {
  margin: 0;
  font-size: 14px;
  color: #f5f5f7;
  /* Match title text color */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.menu-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkbox-container {
  display: flex;
  align-items: center;
  font-size: 16px;
  /* Bigger base font */
  cursor: pointer;
  user-select: none;
  color: #fff;
  padding: 6px 0;
  /* Easier target */
}

.checkbox-container:hover {
  color: #ff9f0a;
}

.checkbox-container input {
  margin-right: 14px;
  width: 20px;
  /* Bigger base checkbox */
  height: 20px;
  accent-color: #f5f5f7;
}

@media (max-width: 450px) {
  .checkbox-container {
    font-size: 18px;
    /* Even bigger on mobile */
    padding: 10px 0;
    /* Larger spacing */
  }

  .checkbox-container input {
    width: 24px;
    /* Huge touch target */
    height: 24px;
    margin-right: 16px;
  }
}

.menu-separator {
  height: 1px;
  background-color: #3a3a3c;
  margin: 8px 0;
}

.notify-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.notify-icon-wrapper svg {
  color: #f5f5f7;
  fill: #f5f5f7;
}

.notify-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background-color: #ff375f;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.notify-text {
  color: #f5f5f7;
  margin-left: 8px;
}

/* Alarm Triggered State */
.alarm-triggered {
  --alarm-color: #ffffff;
  /* Default White */
}

/* Header Glow Pulse Animation (Opacity based) */
@keyframes glow-pulse {

  0%,
  100% {
    opacity: 1;
    /* transform: scale(1); */
  }

  50% {
    opacity: 0.2;
    /* transform: scale(0.98); Removed to prevent size change */
  }
}

/* Apply Header Glow when alarm is triggered */
body.alarm-triggered header {
  position: relative;
  z-index: 50;
}

body.alarm-triggered header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  box-shadow: 0 10px 50px -5px rgba(255, 255, 255, 0.4);
  /* Softer, broader glow */
  animation: glow-pulse 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  /* Slower, smoother pulse */
  animation-delay: 0s;
  will-change: opacity, transform;
  pointer-events: none;
}

/* Ensure List Border Glow is REMOVED */
body.alarm-triggered main {
  animation: none;
  border: none;
}

/* Apply violent shake to Bell button when alarm is triggered */
body.alarm-triggered #btn-alarm {
  animation: bell-shake 0.5s ease-in-out infinite both;
  transform-origin: 50% 10%;
}

body.alarm-triggered #btn-alarm svg {
  color: var(--alarm-color);
  stroke: var(--alarm-color);
}

/* Ensure List Border Glow - REMOVED */
/* body.alarm-triggered main { ... } */
/* @keyframes alarm-flash-border { ... } */

@keyframes bell-shake {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(-25deg);
  }

  30% {
    transform: rotate(20deg);
  }

  45% {
    transform: rotate(-15deg);
  }

  60% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* Set Button */
.menu-btn-set {
  margin-top: 10px;
  width: 100%;
  padding: 8px;
  background-color: #3a3a3c;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Pulse the specific flight that caused the alarm */
/* Pulse the specific flight that caused the alarm */
/* Alarm Source Pulse (Opacity based) */
.flight.alarm-source {
  position: relative;
  z-index: 10;
}

.flight.alarm-source::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: #2c2c2e;
  box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.4);
  animation: glow-pulse 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: var(--anim-delay, 0s);
  will-change: opacity, transform;
  pointer-events: none;
  border-radius: inherit;
  /* Ensure inset glow respects corners */
}


.menu-btn-set:active {
  background-color: #ff9f0a;
  color: #000;
}

/* Alarm Color States */
.alarm-active-red {
  color: #ff453a !important;
  fill: #ff453a !important;
  filter: none !important;
}

.alarm-active-green {
  color: #30d158 !important;
  fill: #30d158 !important;
  filter: none !important;
}

.alarm-active-blue {
  color: #64d2ff !important;
  fill: #64d2ff !important;
  filter: none !important;
}

.alarm-active-orange {
  color: #ff9f0a !important;
  fill: #ff9f0a !important;
  filter: none !important;
}

/* Pokeball Shake Animation */
@keyframes pokeball-shake {

  0%,
  100% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-10deg);
  }

  20% {
    transform: rotate(8deg);
  }

  30% {
    transform: rotate(-6deg);
  }

  40% {
    transform: rotate(4deg);
  }

  50% {
    transform: rotate(0deg);
  }

  /* Pause 50-100% */
}

.pokeball-shake {
  animation: pokeball-shake 2s ease-in-out infinite;
  transform-origin: 50% 10%;
}

/* Ensure the alarm button shakes when armed (any trigger enabled) */
#btn-alarm.pokeball-shake {
  animation: pokeball-shake 2s ease-in-out infinite;
  transform-origin: 50% 10%;
}

#btn-alarm.pokeball-shake svg {
  fill: #f5f5f7;
  color: #f5f5f7;
}

/* Synchronous Shake (Click Feedback) */
.pokeball-shake-once {
  animation: single-shake 0.5s ease-in-out forwards;
  transform-origin: 50% 10%;
}

@keyframes single-shake {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(-25deg);
  }

  40% {
    transform: rotate(20deg);
  }

  60% {
    transform: rotate(-15deg);
  }

  80% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}