/* =========================================================
   PHONE FRIENDLY PATCH (paste at end)
   ========================================================= */

@media (max-width: 520px){

  /* More compact page padding */
  .shell{ padding: 10px; }

  /* Header becomes a clean stacked block */
  .topbar{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
  }

  .brand .title{
    font-size: 18px;
    line-height: 1.15;
  }

  .subtitle{
    font-size: 12px;
    margin-top: 2px;
  }

  /* Put picker + time + restart on one line, wrap nicely */
  .topbarRight{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    justify-content: initial;
  }

  #scenarioPicker{
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .clock{
    padding: 10px 10px;
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  #btnRestart{
    padding: 10px 12px;
    border-radius: 12px;
    white-space: nowrap;
  }

  /* Tighten main stack spacing */
  .mainGrid{ gap: 10px; margin-top: 10px; }

  /* Stage card spacing */
  .stage{ padding: 10px; }
  .stageHead{ padding-bottom: 8px; }

  /* Make image feel like a “sim frame” on mobile */
  .mediaFrame{
    border-radius: 14px;
    overflow: hidden;
  }

  #frameImg{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    /* Keep the image inside phone viewport */
    max-height: 48vh !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Info/caption reads like a log / findings box */
  .caption{
    margin-top: 8px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.45;
  }

  /* Category buttons: force a clean 2-column control grid */
  .choices{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Buttons look like “controls” not pills */
  .choices button,
  .choices .btn{
    width: 100%;
    min-height: 52px;
    padding: 12px 10px;
    text-align: center;
    border-radius: 14px;
    font-weight: 800;
    letter-spacing: .15px;
  }

  /* If you have submenu “Back” buttons, make them full width */
  .choices button[data-action="menu_back"],
  .choices button[data-action="back"],
  .choices button[data-action="submenu_back"]{
    grid-column: 1 / -1;
    text-align: center;
    font-weight: 700;
    color: var(--muted);
    background: rgba(255,255,255,.02);
  }

  /* Vitals section tighter on mobile */
  .telemetry{ padding: 10px; }
  .vitals{ grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Remove any accidental horizontal scroll */
  body{ overflow-x: hidden; }
}


/* =========================================================
   MODERN MOBILE CONTROLS (bottom bar)
   ========================================================= */
@media (max-width: 520px){

  /* Hide desktop actions panel on phones */
  #desktopActions{ display:none !important; }

  /* Make bottom controls feel like an app dock */
  .controls{
    position: sticky;
    bottom: 0;
    z-index: 50;
    padding: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    margin-top: 14px;
    background: linear-gradient(to top, rgba(10,14,24,.92), rgba(10,14,24,.65) 55%, rgba(10,14,24,0));
    backdrop-filter: blur(8px);
  }

  .controlsBar{
    margin-bottom: 10px;
  }

  .controlsNext{
    width: 100%;
    border-radius: 16px;
    min-height: 54px;
    font-weight: 900;
    letter-spacing: .2px;
    box-shadow: 0 10px 22px rgba(0,0,0,.35);
  }

  .controlsGrid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .controlsGrid .btn{
    border-radius: 16px;
    min-height: 56px;
    padding: 12px 10px;
    font-weight: 850;
    font-size: 13px;
    line-height: 1.1;
    text-align: center;

    /* Higher-contrast, modern control look */
    color: rgba(255,255,255,.95);
    background: linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.92));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow:
      0 10px 18px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.08);
  }

  .controlsGrid .btn:hover{
    border-color: rgba(96,165,250,.35);
  }

  .controlsGrid .btn:focus-visible{
    outline: 2px solid rgba(96,165,250,.55);
    outline-offset: 2px;
  }

  .controlsGrid .btn:active

  .controlsGrid .btn:active{
    transform: translateY(1px);
    box-shadow:
      0 6px 12px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.06);
  }

  /* Submenu back full width if present */
  .submenuBack{
    grid-column: 1 / -1;
  }

  .submenuBack .btn{
    font-weight: 750;
    color: rgba(255,255,255,.85);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
  }

  /* Info window: fixed height + scroll (newest at top) */
  .infoLog{
    margin-top: 10px;
    max-height: 120px;
    overflow-y: auto;
    padding-right: 6px;
  }

  .infoLine{
    padding: 6px 0;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .infoLine:first-child{ border-top: none; }

  /* Keep the whole info box from growing too tall */
  .infoBox{
    max-height: 220px;
    overflow: hidden;
  }

  /* Info box: slightly tighter */
  .infoBox{
    border-radius: 16px;
  }
}


/* =========================================================
   INFO PANEL ROW (scrollable log + vitals toggle button)
   ========================================================= */

.infoRow{
  display:flex;
  gap:10px;
  align-items:stretch;
  margin-top:10px;
}

.infoRow .infoBox{
  flex: 1 1 auto;
  margin-top:0; /* override earlier */
}

.infoHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.infoHint{
  font-size:12px;
  color: var(--muted);
  opacity:.9;
  white-space:nowrap;
}

/* Fixed-height scrolling area */
.infoLog{
  max-height: 130px;
  overflow:auto;
  padding-right: 4px;
}

/* Vitals shown inside info panel */
.infoVitals .vitals{
  margin-top: 0;
}

.vitalsToggle{
  width: 88px;
  border-radius: 16px;
  font-weight: 900;
  letter-spacing: .2px;
  padding: 12px 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}

.vitalsToggle:active{
  transform: translateY(1px);
}

/* Continue button under image */
.continueBtn{
  width: 100%;
  margin-top: 10px;
  margin-bottom: 0;
  padding: 14px 14px;
  border-radius: 16px;
  font-weight: 900;
  background: rgba(96,165,250,.18);
  border: 1px solid rgba(96,165,250,.35);
  color: rgba(255,255,255,.95);
}

/* Slightly taller info area on larger phones */
@media (min-width: 390px) and (max-width: 520px){
  .infoLog{ max-height: 160px; }
  .vitalsToggle{ width: 96px; }
}

/* On very small screens, reduce toggle width */
@media (max-width: 360px){
  .vitalsToggle{ width: 78px; font-size: 13px; }
}

/* =========================================================
   FIXES: hide telemetry on mobile + improve contrast buttons
   ========================================================= */
@media (max-width: 520px){
  /* Remove the old vitals/score panel on phones */
  .telemetry{ display:none !important; }

  /* Remove any leftover lower Continue bar (if present) */
  .controlsBar{ display:none !important; }

  /* Continue under image: strong contrast */
  .continueBtn{
    width: 100%;
    margin: 10px 0 10px 0;
    min-height: 52px;
    border-radius: 16px;
    font-weight: 900;
    color: rgba(255,255,255,.96) !important;
    background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(29,78,216,.95)) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
  }
  .continueBtn:active{ transform: translateY(1px); }

  /* Info row layout: box + tall vitals toggle */
  .infoRow{
    display: grid;
    grid-template-columns: 1fr 62px;
    gap: 10px;
    align-items: stretch;
    margin-top: 10px;
  }

  .vitalsToggle{
    width: 100%;
    border-radius: 16px;
    font-weight: 950;
    letter-spacing: .2px;
    color: rgba(255,255,255,.96) !important;
    background: linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.96)) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 10px 18px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08);
  }

  .vitalsToggle.isActive{
    border-color: rgba(96,165,250,.55) !important;
    box-shadow: 0 10px 18px rgba(0,0,0,.26), 0 0 0 3px rgba(96,165,250,.18), inset 0 1px 0 rgba(255,255,255,.08);
  }
}


/* =========================================================
   PATCH: Fix double UI + size/contrast of Vitals toggle
   ========================================================= */

@media (max-width: 520px){
  /* Hard-hide any desktop actions panel if present */
  #desktopActions, aside.actions, .card.actions { display: none !important; }

  /* Ensure the Info + Vitals toggle layout is side-by-side */
  .infoRow{
    display: grid !important;
    grid-template-columns: 1fr 84px !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-top: 10px !important;
  }

  .infoBox{
    height: 140px !important;
    overflow-y: auto !important;
  }

  /* Make Vitals toggle clearly visible and not oversized */
  #btnVitalsToggle,
  .vitalsToggle{
    width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(10,14,22,.92) !important;
    color: rgba(255,255,255,.95) !important;
    font-weight: 900 !important;
    letter-spacing: .2px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
  }

  #btnVitalsToggle.isActive,
  .vitalsToggle.isActive{
    border-color: rgba(96,165,250,.55) !important;
    background: rgba(30,58,138,.55) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.22), 0 10px 28px rgba(0,0,0,.35) !important;
  }
}



/* =========================================================
   FIX: Info panel + Vitals toggle sizing (prevents huge button)
   ========================================================= */
@media (max-width: 520px){
  /* Hide desktop aside on phones (prevents duplicate buttons) */
  #desktopActions{ display:none !important; }

  /* Hide telemetry on phones (prevents duplicate vitals/score section) */
  .telemetry{ display:none !important; }

  /* Info box + vitals toggle layout */
  .infoRow{
    display:grid !important;
    grid-template-columns: 1fr 84px !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-top: 10px !important;
  }

  .infoBox{
    height: 140px !important;
    overflow-y: auto !important;
  }

  .btn.vitalsToggle{
    height: 140px !important;
    width: 84px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(17,24,39,.94) !important;
    color: rgba(255,255,255,.95) !important;
    font-weight: 900 !important;
    letter-spacing: .2px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding: 10px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.34) !important;
  }

  .btn.vitalsToggle.isActive{
    border-color: rgba(96,165,250,.55) !important;
    background: rgba(30,58,138,.55) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.22), 0 10px 26px rgba(0,0,0,.34) !important;
  }
}
/* =========================================================
   VITALS TOGGLE — VERTICAL LABEL (OPTION A)
   ========================================================= */

.vitalsToggle{
  /* keep your existing styles, just override text layout */
  writing-mode: vertical-rl;
  text-orientation: upright;

  /* center the vertical text cleanly */
  display: flex;
  align-items: center;
  justify-content: center;

  /* tighten horizontal padding so button can be thinner */
  padding: 10px 6px;
  letter-spacing: 1px;
}


/* Mobile-specific width reduction */
@media (max-width: 520px){
  .btn.vitalsToggle{
    width: 56px !important;   /* was ~84px */
    min-width: 56px !important;
  }
}
/* =========================================================
   VITALS TOGGLE — THINNER + BLUE (upright stacked letters)
   Place at very end so it wins.
   ========================================================= */

/* Make the vitals button thinner everywhere */
.vitalsToggle,
.btn.vitalsToggle,
#btnVitalsToggle{
  width: 46px !important;        /* thin */
  min-width: 46px !important;
  padding: 10px 4px !important;  /* tighter side padding */
  border-radius: 14px !important;

  /* Keep upright stacked letters */
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;

  /* Blue button styling */
  color: rgba(255,255,255,.96) !important;
  background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(29,78,216,.95)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0px !important; /* upright letters don't need spacing */
  line-height: 1 !important;
}

/* Active state: slightly brighter + focus ring */
.vitalsToggle.isActive,
.btn.vitalsToggle.isActive,
#btnVitalsToggle.isActive{
  border-color: rgba(191,219,254,.70) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.28),
    0 0 0 3px rgba(59,130,246,.22),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* Tiny phones: a hair wider so it’s still tappable */
@media (max-width: 360px){
  .vitalsToggle,
  .btn.vitalsToggle,
  #btnVitalsToggle{
    width: 52px !important;
    min-width: 52px !important;
  }
}
/* =========================================================
   LAYOUT: Move Vitals button to far-right, give Info more room
   (Overrides—paste at end)
   ========================================================= */

/* Desktop + tablet: use grid so Info takes all space, button hugs right edge */
.infoRow{
  display: grid !important;
  grid-template-columns: 1fr 46px !important; /* Info gets max width */
  gap: 8px !important;
  align-items: stretch !important;
}

/* Make the info box truly fill the available column */
.infoRow .infoBox{
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
}

/* Hug the vitals button to the far-right inside its column */
.infoRow .vitalsToggle,
.infoRow .btn.vitalsToggle,
.infoRow #btnVitalsToggle{
  justify-self: end !important;
}

/* Phones: push button to the very edge and widen info column */
@media (max-width: 520px){
  .infoRow{
    grid-template-columns: 1fr 46px !important;
    gap: 6px !important;
  }

  /* Reduce right-side padding so the button sits closer to the edge */
  .infoRow{
    padding-right: 0 !important;
  }

  /* Optional: slightly smaller inner padding on info box for more text */
  .infoBox{
    padding: 10px 10px !important;
  }
}

/* Tiny phones: keep tap target */
@media (max-width: 360px){
  .infoRow{
    grid-template-columns: 1fr 52px !important;
  }
}