/* ============================================================
   FSU Crestron Interface — styles.css

   Table of contents
     1. Tokens (custom properties)             :root
     2. Reset & base                           *, body, .interface
     3. Header                                 .header, .fsu-logo, .building-*, .start-class-btn
     4. Demo bar                               .student-view-demo
     5. Middle row                             .middle-row, .screen-*, .lights-*, .light-btn, fullscreen overlay
     6. Bottom row + cards                     .bottom-row, .control-card (+ modifiers), .card-title
     7. Left section: input sources & cameras  .sources-grid, .source-btn, .camera-btn
     8. Middle section: workflow controls      .workflow-*, .controls-grid, .control-btn, .audio-btn
     9. Action menus (shared shell)            .doccam/.bluray/.project/.hide/.freeze-* + close-X
    10. Right section: power, screens, volume  .right-section, .power-btn, .projector-control-btn,
                                               .screen-controls-grid, .volume-*, .mute-btn, .help-btn
    11. Overlays                               .power-off-modal, .loading-overlay, .technical-setup-*, .help-*
    12. Animations                             @keyframes (powerPulse, sourcePulse, freezePulse, slideDown, spin)
    13. Responsive overrides                   @media queries
   ============================================================ */

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  /* Brand palette (FSU garnet & gold + neutrals) */
  --c-garnet-700: #782f40;
  --c-garnet-900: #572932;
  --c-gold-300:   #dfd1a7;
  --c-gold-500:   #ceb888;
  --c-ink:        #101820;
  --c-ink-light:  #1a2530;
  --c-slate:      #425563;
  --c-slate-dark: #354451;
  --c-red:        #a6192e;
  --c-red-dark:   #8a1526;
  --c-yellow:     #ffc72c;
  --c-teal:       #5cb8b2;
  --c-teal-light: #7dd3cd;

  /* Backdrops */
  --bg-app:    linear-gradient(135deg, var(--c-garnet-700) 0%, var(--c-garnet-900) 100%);
  --bg-accent: linear-gradient(135deg, var(--c-gold-500) 0%, var(--c-gold-300) 100%);

  /* Surfaces (translucent ink overlays) */
  --surface-card-faint:     rgba(16, 24, 32, 0.3);
  --surface-card-soft:      rgba(16, 24, 32, 0.4);
  --surface-card:           rgba(16, 24, 32, 0.5);
  --surface-projector:      rgba(16, 24, 32, 0.6);
  --surface-card-strong:    rgba(16, 24, 32, 0.7);
  --surface-overlay:        rgba(16, 24, 32, 0.85);
  --surface-overlay-strong: rgba(16, 24, 32, 0.95);

  /* Shadows */
  --shadow-xs:        0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-xs-strong: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-sm:        0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-sm-wide:   0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md:        0 4px 10px rgba(0, 0, 0, 0.3);
  --shadow-lg:        0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg-strong: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-xl:        0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl-strong: 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-modal:     0 8px 32px rgba(0, 0, 0, 0.6);

  /* Motion */
  --t-fast: 0.2s ease;
  --t-slow: 0.3s ease;
}

/* Fluid root font-size: scales with the smaller of viewport width and
   height. At 1920x1080 it caps at 16px (current desktop look). At
   1920x970 (browser chrome visible, no F11) it lands ~14.37px ~= 90%.
   Floors at 11px around 1366x768 to keep text readable on laptops.
   Every other size in this stylesheet is expressed in rem so the
   whole UI scales together. */
html {
  font-size: clamp(11px, min(0.834vw, 1.482vh), 16px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--bg-app);
  overflow: hidden;
  height: 100dvh;
  width: 100dvw;
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="white" stroke="black" stroke-width="1" d="M8 2 L8 22 L12 18 L15 26 L18 25 L15 17 L20 17 Z"/></svg>'),
    auto;
}

.interface {
  width: 100dvw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
}

/* Header */
.header {
  height: 8dvh;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1.875rem;
  background: transparent;
  gap: 0.9375rem;
}

.fsu-logo {
  color: var(--c-gold-500);
  font-weight: bold;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
}

.fsu-logo img {
  width: 4.0625rem;
  height: 4.0625rem;
  cursor: pointer;
  transition: all var(--t-fast);
}

.fsu-logo img:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.building-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  justify-self: center;
}

.building-name {
  color: white;
  font-weight: bold;
  font-size: 1.75rem;
  text-align: center;
  letter-spacing: 0.125rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--t-fast);
}

.building-name:hover {
  color: var(--c-gold-500);
  text-shadow: 0 0 10px rgba(206, 184, 136, 0.5);
}

.time-display {
  color: white;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  line-height: 1;
}

.start-class-btn {
  background: var(--bg-accent);
  color: var(--c-ink);
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: bold;
  cursor: pointer;
  border: none;
  box-shadow: var(--shadow-lg);
  transition: all var(--t-slow);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  justify-self: end;
  height: fit-content;
}

.start-class-btn:hover {
  box-shadow: var(--shadow-xl);
  filter: brightness(1.05);
}

.start-class-btn:active {
  filter: brightness(0.95);
  transform: scale(0.95);
}

/* Room View Demo Bar */
.student-view-demo {
  background: rgba(255, 199, 44, 0.15);
  border: 2px dashed var(--c-yellow);
  border-radius: 0.5rem;
  padding: 0.5rem 0.9375rem;
  margin: 0.5rem 1.875rem 0 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  transition: all var(--t-slow);
}

.student-view-demo.hidden {
  display: none;
}

.demo-label {
  color: var(--c-yellow);
  font-size: 0.625rem;
  font-weight: bold;
  letter-spacing: 0.0625rem;
}

.student-projectors {
  display: flex;
  gap: 0.9375rem;
  align-items: center;
}

.student-projector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.projector-label {
  color: var(--c-gold-500);
  font-size: 0.625rem;
  font-weight: 600;
}

.projector-display {
  background: var(--surface-projector);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: bold;
  min-width: 6.25rem;
  text-align: center;
}

.projector-display.blanked {
  background: var(--c-yellow);
  color: var(--c-ink);
}

.projector-display.projecting {
  background: var(--c-red);
  color: white;
}

.projector-display.frozen {
  background: var(--c-teal);
  color: white;
}

/* Middle row - Screens and lights */
.middle-row {
  height: 44dvh;
  display: flex;
  padding: 0.375rem 0.9375rem;
  gap: 0.9375rem;
  transition: all var(--t-slow);
}

/* Adjust height when demo view is hidden */
.student-view-demo.hidden ~ .middle-row {
  height: 48dvh;
}

.screen-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface-card-soft);
  border-radius: 0.5rem;
  padding: 0.625rem;
  border: 2px solid rgba(206, 184, 136, 0.3);
}

.screen-label {
  color: var(--c-gold-500);
  font-size: 0.75rem;
  font-weight: bold;
  margin-bottom: 0.375rem;
  text-align: center;
}

.screen {
  flex: 1;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-teal);
  font-size: 0.875rem;
  font-weight: bold;
  border-radius: 0.25rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-fast);
}

.screen:hover {
  box-shadow: 0 0 15px rgba(92, 184, 178, 0.4);
}

.screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.screen-status {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(206, 184, 136, 0.9);
  color: var(--c-ink);
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: calc(100% - 1rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen-status.preview-badge {
  background: rgba(92, 184, 178, 0.9);
  color: var(--c-ink);
}

.screen-status.no-input {
  background: rgba(166, 25, 46, 0.9);
  color: white;
}

/* Fullscreen overlay */
.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  cursor: pointer;
}

.fullscreen-overlay.active {
  display: flex;
}

.fullscreen-content {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fullscreen-text {
  color: var(--c-teal);
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
}

.fullscreen-text.no-input {
  color: var(--c-red);
}

.lights-panel {
  width: 7.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lights-header {
  background: var(--bg-accent);
  color: var(--c-ink);
  text-align: center;
  padding: 0.625rem;
  font-weight: bold;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-sm-wide);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.lights-header img {
  width: 1.25rem;
  height: 1.25rem;
}

.light-btn {
  background: white;
  color: var(--c-ink);
  text-align: center;
  padding: 0.625rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  flex: 1;
  border-radius: 0.5rem;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
}

.light-btn:hover {
  box-shadow: var(--shadow-md);
  filter: brightness(1.05);
}

.light-btn:active {
  transform: scale(0.95);
}

.light-btn.active {
  background: var(--c-teal);
  color: white;
}

/* Bottom row - Controls */
.bottom-row {
  height: 48dvh;
  display: flex;
  padding: 0.375rem 0.9375rem 1.5rem 0.9375rem;
  gap: 0.9375rem;
}

/* Card styling for sections */
.control-card {
  background: var(--surface-card);
  border-radius: 0.5rem;
  padding: 0.5rem;
  border: 2px solid rgba(206, 184, 136, 0.3);
  transition: all var(--t-slow);
}

/* Layout modifiers replacing per-instance inline styles */
.control-card--input {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 0.25rem;
}

.control-card--shrink {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex-shrink: 0;
}

.control-card--grow {
  flex: 1;
}

.control-card--fill {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.volume-help-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
}

/* Power warning animation */
.control-card.power-warning {
  border-color: var(--c-red);
  box-shadow: 0 0 20px rgba(166, 25, 46, 0.6);
  animation: powerPulse 0.5s ease-in-out 2;
}

/* Source warning animation */
.control-card.source-warning {
  border-color: var(--c-gold-500);
  box-shadow: 0 0 20px rgba(206, 184, 136, 0.6);
  animation: sourcePulse 0.5s ease-in-out 2;
}

/* Source warning animation for buttons */
.control-btn.source-warning {
  border-color: var(--c-gold-500);
  box-shadow: 0 0 20px rgba(206, 184, 136, 0.6);
  animation: sourcePulse 0.5s ease-in-out 2;
}

.card-title {
  color: var(--c-gold-500);
  font-size: 0.75rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Left section - Input Sources */
.left-section {
  flex: 0.65;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.sources-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.375rem;
  flex: 1;
  min-height: 0;
  align-content: start;
}

/* Shared shell for the white-card button family. Specificity (0,1,0)
   so any per-class declaration below overrides this base by sitting
   later in the cascade. */
.source-btn,
.camera-btn,
.control-btn,
.audio-btn,
.power-btn,
.projector-control-btn {
  background: white;
  color: var(--c-ink);
  font-weight: 600;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
}

.source-btn:hover,
.camera-btn:hover,
.control-btn:hover,
.audio-btn:hover,
.power-btn:hover,
.projector-control-btn:hover {
  box-shadow: var(--shadow-md);
  filter: brightness(1.05);
}

.source-btn {
  font-size: 0.625rem;
  padding: 0.25rem;
  gap: 0.125rem;
  text-align: center;
  min-height: 0;
  height: auto;
}

.source-btn:hover {
  background: rgba(255, 255, 255, 0.95);
}

.source-btn:active {
  filter: brightness(0.95);
  transform: scale(0.94);
}

.source-btn.selected {
  background: var(--c-slate);
  color: white;
  border-color: var(--c-gold-500);
}

.btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

/* Scale down icons on shorter screens */

.camera-controls {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
}

.camera-btn {
  flex: 1;
  font-size: 0.875rem;
  padding: 0.375rem;
  gap: 0.125rem;
  min-height: 0;
  height: 100%;
}

.camera-btn:active {
  transform: scale(0.94);
}

.camera-btn.selected {
  background: var(--c-slate);
  color: white;
  border-color: var(--c-gold-500);
}

/* Middle section - Workflow controls */
.middle-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

.workflow-guide {
  background: rgba(206, 184, 136, 0.15);
  border: 2px solid var(--c-gold-500);
  border-radius: 0.5rem;
  padding: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0.25rem;
  height: 2.8125rem;
}

.workflow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  color: var(--c-gold-500);
  font-size: 0.625rem;
  font-weight: bold;
}

.workflow-number {
  background: var(--c-gold-500);
  color: var(--c-ink);
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.625rem;
}

.workflow-arrow {
  color: var(--c-gold-500);
  font-size: 0.875rem;
}

/* Screen Controls Grid - 6 buttons in top row */
.controls-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr;
  gap: 0.625rem;
  min-height: 0;
}

.control-btn {
  font-size: 0.875rem;
  padding: 1rem 0.75rem;
  gap: 0.375rem;
  text-align: center;
  min-height: 0;
  height: 100%;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.95);
}

.control-btn:active {
  filter: brightness(0.95);
  transform: scale(0.95);
}

.control-btn.preview-active {
  background: var(--c-teal);
  color: white;
}

.control-btn.project-active {
  background: var(--c-red);
  color: white;
}

.control-btn.mute-active {
  background: var(--c-yellow);
  color: var(--c-ink);
}

.control-btn.menu-open {
  background: rgba(206, 184, 136, 0.9);
  color: var(--c-ink);
  box-shadow: 0 0 20px rgba(206, 184, 136, 0.8);
}

.control-btn.hide-menu-open {
  background: rgba(255, 199, 44, 0.9);
  color: var(--c-ink);
  box-shadow: 0 0 20px rgba(255, 199, 44, 0.8);
}

.control-btn.freeze-active {
  background: var(--c-teal);
  color: white;
}

.control-btn.freeze-menu-open {
  background: rgba(92, 184, 178, 0.9);
  color: white;
  box-shadow: 0 0 20px rgba(92, 184, 178, 0.8);
}

.control-btn .btn-icon {
  width: 3.75rem;
  height: 3.75rem;
}

/* Audio button styling - part of the 5-button row */
.audio-btn {
  font-size: 0.875rem;
  padding: 1rem 0.75rem;
  gap: 0.375rem;
  text-align: center;
  min-height: 0;
  height: 100%;
}

.audio-btn:active {
  transform: scale(0.95);
}

.audio-btn.active {
  background: var(--c-teal);
  color: white;
}

.audio-btn .btn-icon {
  width: 3.75rem;
  height: 3.75rem;
  object-fit: contain;
}

.audio-btn span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  line-height: 1.2;
}

/* PHASE 4: Doc Cam Selection Menu */
/* Shared shell for the five action menus (Doc Cam, Blu-ray, Project,
   Hide & Mute, Freeze). Each menu sets --menu-accent and --menu-tint
   below; the label inherits --menu-accent automatically. */
.doccam-selection-menu,
.bluray-controls-menu,
.project-controls-menu,
.hide-controls-menu,
.freeze-controls-menu {
  display: none;
  background: var(--menu-tint);
  border: 2px solid var(--menu-accent);
  border-radius: 0.5rem;
  padding: 0.9375rem;
  gap: 0.625rem;
  animation: slideDown 0.3s ease;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  position: relative;
  flex: 1;
  max-width: 49%;
}

.doccam-selection-menu.active,
.bluray-controls-menu.active,
.project-controls-menu.active,
.hide-controls-menu.active,
.freeze-controls-menu.active {
  display: flex;
}

.doccam-menu-label,
.bluray-menu-label,
.project-menu-label,
.hide-menu-label,
.freeze-menu-label {
  color: var(--menu-accent);
  font-size: 0.8125rem;
  font-weight: bold;
  letter-spacing: 0.0938rem;
}

.doccam-selection-menu {
  --menu-accent: var(--c-teal);
  --menu-tint:   rgba(92, 184, 178, 0.2);
}

.doccam-options-row,
.project-options-row,
.hide-options-row,
.freeze-options-row {
  display: flex;
  gap: 0.9375rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

/* Shared shell for the four 130x130 option-card buttons used by the
   Doc Cam, Project, Hide & Mute, and Freeze menus. Only the .selected
   tint differs between them; defined per-class below. */
.doccam-option-btn,
.project-option-btn,
.hide-option-btn,
.freeze-option-btn {
  background: white;
  color: var(--c-ink);
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 0.5rem;
  padding: 1.25rem;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
  width: 8.125rem;
  height: 8.125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.doccam-option-btn:hover,
.project-option-btn:hover,
.hide-option-btn:hover,
.freeze-option-btn:hover {
  box-shadow: var(--shadow-md);
  background: rgba(255, 255, 255, 0.95);
  filter: brightness(1.05);
}

.doccam-option-btn:active,
.project-option-btn:active,
.hide-option-btn:active,
.freeze-option-btn:active {
  filter: brightness(0.95);
  transform: scale(0.94);
}

.doccam-option-btn.selected {
  background: var(--c-slate);
  color: white;
  border-color: var(--c-gold-500);
}

.doccam-label-main,
.project-label-main,
.hide-label-main,
.freeze-label-main {
  font-size: 1rem;
  font-weight: bold;
}

.doccam-label-sub,
.project-label-sub,
.hide-label-sub,
.freeze-label-sub {
  font-size: 0.625rem;
  opacity: 0.8;
}

/* PHASE 5: Blu-ray Controls Menu */
.bluray-controls-menu {
  --menu-accent: var(--c-teal);
  --menu-tint:   rgba(92, 184, 178, 0.2);
  gap: 0.5rem; /* tighter than the other menus */
}

.bluray-controls-container {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.bluray-playback-section {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.bluray-controls-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.375rem;
}

.bluray-controls-grid.four-btn {
  grid-template-columns: repeat(4, 1fr);
}

.bluray-controls-grid.four-btn .bluray-btn {
  min-height: 2.8125rem;
}

.bluray-navigation-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0.375rem;
}

.bluray-btn {
  background: white;
  color: var(--c-ink);
  font-weight: 600;
  font-size: 0.625rem;
  cursor: pointer;
  border-radius: 0.375rem;
  padding: 0.5rem 0.375rem;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  min-height: 2.8125rem;
}

.bluray-btn:hover {
  box-shadow: var(--shadow-md);
  background: rgba(255, 255, 255, 0.95);
  filter: brightness(1.05);
}

.bluray-btn:active {
  filter: brightness(0.95);
  transform: scale(0.93);
}

.bluray-btn-icon {
  font-size: 1rem;
  line-height: 1;
}

.bluray-btn-label {
  font-size: 0.5rem;
  text-align: center;
  line-height: 1.1;
}

/* Special styling for ENTER button (center of navigation) */
.bluray-btn.center-btn {
  background: var(--c-slate);
  color: white;
  font-weight: bold;
  border: 2px solid var(--c-gold-500);
}

.bluray-btn.center-btn:hover {
  background: var(--c-slate-dark);
}

/* Empty grid cell for navigation layout */
.bluray-nav-spacer {
  grid-column: 2;
  grid-row: 2;
}

/* PHASE 2: Project Controls Menu */
.project-controls-menu {
  --menu-accent: var(--c-gold-500);
  --menu-tint:   rgba(206, 184, 136, 0.2);
  margin-left: auto;
}

/* PHASE 4: Wrapper for side-by-side layout */
.menus-wrapper {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.625rem;
  margin-top: 0.5rem;
  align-items: stretch;
}

.project-option-btn.selected {
  background: rgba(206, 184, 136, 0.9);
  color: var(--c-ink);
  border-color: var(--c-gold-500);
}

.close-menu-btn,
.close-hide-menu-btn,
.close-freeze-menu-btn {
  background: var(--c-red);
  color: white;
  font-weight: bold;
  font-size: 1.375rem;
  cursor: pointer;
  border-radius: 0.5rem;
  width: 2.8125rem;
  height: 2.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: var(--shadow-sm);
  transition: all var(--t-fast);
  position: absolute;
  top: 0.3125rem;
  right: 0.3125rem;
  line-height: 1;
  padding-top: 0.125rem;
  padding-left: 0.0625rem;
}

.close-menu-btn:hover,
.close-hide-menu-btn:hover,
.close-freeze-menu-btn:hover {
  box-shadow: var(--shadow-md);
  filter: brightness(1.1);
}

.close-menu-btn:active,
.close-hide-menu-btn:active,
.close-freeze-menu-btn:active {
  transform: scale(0.92);
}

/* PHASE 3: Hide & Mute Controls Menu */
.hide-controls-menu {
  --menu-accent: var(--c-yellow);
  --menu-tint:   rgba(255, 199, 44, 0.2);
  margin-left: auto;
}

.hide-option-btn.selected {
  background: rgba(255, 199, 44, 0.9);
  color: var(--c-ink);
  border-color: var(--c-yellow);
}

/* Freeze Controls Menu */
.freeze-controls-menu {
  --menu-accent: var(--c-teal);
  --menu-tint:   rgba(92, 184, 178, 0.2);
  margin-left: auto;
}

.freeze-option-btn.selected {
  background: rgba(92, 184, 178, 0.9);
  color: white;
  border-color: var(--c-teal);
}

/* Right section - Power and volume */
.right-section {
  flex: 0.65;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.power-volume-row {
  display: flex;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
}

.power-and-screens-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 9.375rem;
  flex-shrink: 0;
  height: 100%;
  min-height: 0;
}

.power-card {
  flex-shrink: 0;
}

/* PHASE 6: Screen Controls Card */
.screen-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.screen-controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
  row-gap: 0.75rem;
  flex: 1;
  min-height: 0;
}

.projector-control-btn {
  font-size: 0.625rem;
  padding: 0.75rem 0.5rem;
  gap: 0.25rem;
  min-height: 0;
  height: 100%;
}

.projector-control-btn:hover {
  background: rgba(255, 255, 255, 0.95);
}

.projector-control-btn:active {
  filter: brightness(0.95);
  transform: scale(0.94);
}

.projector-control-btn.active {
  background: var(--c-teal);
  color: white;
}

.projector-control-btn .btn-icon {
  width: 1.875rem;
  height: 1.875rem;
}

.projector-btn-icon {
  font-size: 1.125rem;
  line-height: 1;
}

.power-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.power-btn {
  font-size: 0.8125rem;
  padding: 0.625rem;
  flex: 1;
  gap: 0.25rem;
}

.power-btn:hover {
  background: rgba(255, 255, 255, 0.95);
}

.power-btn:active {
  filter: brightness(0.95);
  transform: scale(0.94);
}

.power-btn.selected {
  background: var(--c-teal);
  color: white;
}

.volume-controls {
  flex: 1;
  display: flex;
  justify-content: space-around;
  padding: 0;
  gap: 0rem;
}

.volume-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  height: 100%;
}

.volume-label {
  color: var(--c-gold-500);
  font-size: 0.75rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
}

.volume-slider-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1875rem;
  flex: 1;
  justify-content: center;
}

.volume-max {
  color: var(--c-gold-500);
  font-size: 0.5rem;
  font-weight: bold;
}

.volume-slider {
  writing-mode: vertical-lr;
  width: 1rem;
  flex: 1;
  min-height: 9.375rem;
  background: var(--c-slate);
  appearance: none;
  cursor: pointer;
  border-radius: 0.625rem;
  direction: rtl;
}

.volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 1.375rem;
  height: 0.875rem;
  background: white;
  cursor: pointer;
  border-radius: 0.1875rem;
  box-shadow: var(--shadow-xs-strong);
}

.volume-slider::-moz-range-thumb {
  width: 1.375rem;
  height: 0.875rem;
  background: white;
  cursor: pointer;
  border-radius: 0.1875rem;
  box-shadow: var(--shadow-xs-strong);
  border: none;
}

.volume-min {
  color: var(--c-gold-500);
  font-size: 0.5625rem;
  font-weight: bold;
}

.volume-percentage {
  color: white;
  font-size: 0.6875rem;
  font-weight: bold;
  background: rgba(206, 184, 136, 0.3);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  min-width: fit-content;
}

.mute-btn {
  background: white;
  color: var(--c-ink);
  font-weight: bold;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.625rem;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-xs);
  border: 2px solid transparent;
}

.mute-btn:hover {
  filter: brightness(1.1);
}

.mute-btn:active {
  transform: scale(0.92);
}

.mute-btn.active {
  background: var(--c-red);
  color: white;
}

.mute-btn img {
  width: 1.75rem;
  height: 1.75rem;
}

/* Help button */
.help-btn {
  background: var(--c-gold-500);
  color: var(--c-ink);
  font-size: 0.875rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: var(--shadow-lg-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-slow);
  border: 2px solid transparent;
  border-radius: 0.5rem;
  padding: 0.75rem;
  flex-shrink: 0;
}

.help-btn:hover {
  box-shadow: var(--shadow-xl-strong);
  filter: brightness(1.05);
}

.help-btn:active {
  transform: scale(0.95);
}

/* Power Off Confirmation Modal */
.power-off-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background: var(--surface-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.power-off-modal.active {
  display: flex;
}

.modal-content {
  background: var(--bg-app);
  border: 3px solid var(--c-gold-500);
  border-radius: 0.75rem;
  padding: 2.5rem;
  max-width: 31.25rem;
  width: 80%;
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.875rem;
}

.modal-icon {
  font-size: 4.5rem;
  line-height: 1;
}

.modal-message {
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modal-title {
  font-size: 1.75rem;
  font-weight: bold;
  letter-spacing: 0.0625rem;
  color: var(--c-yellow);
}

.modal-text {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--c-gold-500);
}

.modal-buttons {
  display: flex;
  gap: 1.25rem;
  width: 100%;
  margin-top: 0.625rem;
}

.modal-btn {
  flex: 1;
  padding: 1.125rem 2rem;
  font-size: 1.125rem;
  font-weight: bold;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-lg);
  letter-spacing: 0.0625rem;
}

.modal-btn:hover {
  box-shadow: var(--shadow-xl);
  filter: brightness(1.05);
}

.modal-btn:active {
  filter: brightness(0.95);
  transform: scale(0.96);
}

.modal-btn-no {
  background: white;
  color: var(--c-ink);
}

.modal-btn-no:hover {
  background: rgba(255, 255, 255, 0.9);
}

.modal-btn-yes {
  background: var(--c-red);
  color: white;
}

.modal-btn-yes:hover {
  background: var(--c-red-dark);
}

/* Loading Screen */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background: var(--bg-app);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  gap: 1.875rem;
}

.loading-overlay.active {
  display: flex;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 37.5rem;
  width: 80%;
}

.loading-logo {
  width: 6.25rem;
  height: 6.25rem;
  margin-bottom: 1.25rem;
}

.loading-messages {
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.loading-message-primary {
  font-size: 3.5rem;
  font-weight: bold;
  letter-spacing: 0.1875rem;
}

.loading-message-secondary {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: 0.125rem;
}

.loading-message-tertiary {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.0625rem;
}

.progress-container {
  width: 7.5rem;
  height: 7.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 6.25rem;
  height: 6.25rem;
  border: 8px solid rgba(206, 184, 136, 0.2);
  border-top: 8px solid var(--c-gold-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Technical Setup Overlay */
.technical-setup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background: var(--bg-app);
  display: none;
  z-index: 10002;
}

.technical-setup-overlay.active {
  display: block;
}

.technical-setup-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.technical-setup-header {
  height: 8dvh;
  display: flex;
  align-items: center;
  padding: 0 1.875rem;
  background: transparent;
}

.fsu-logo-tech {
  color: var(--c-gold-500);
  font-weight: bold;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
}

.fsu-logo-tech img {
  width: 4.0625rem;
  height: 4.0625rem;
}

.technical-setup-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 2.5rem;
}

.technical-setup-title {
  color: white;
  font-size: 1.75rem;
  font-weight: bold;
  letter-spacing: 0.125rem;
  text-align: center;
  position: absolute;
  top: 1.875rem;
  left: 50%;
  transform: translateX(-50%);
}

.technical-setup-buttons {
  display: flex;
  flex-direction: column;
  gap: 4.375rem;
  width: 100%;
  max-width: 37.5rem;
}

.tech-setup-btn {
  background: var(--c-ink);
  border: 2px solid var(--c-gold-500);
  color: white;
  padding: 1.875rem 3.125rem;
  border-radius: 0.75rem;
  font-size: 1.75rem;
  font-weight: bold;
  cursor: pointer;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-lg);
}

.tech-setup-btn:hover {
  background: var(--c-ink-light);
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-xl);
}

.tech-setup-btn:active {
  transform: translateY(0);
}

/* Help System Styles */
.help-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background: var(--surface-overlay-strong);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  backdrop-filter: blur(4px);
}

.help-overlay.active {
  display: flex;
}

.help-modal {
  background: var(--bg-app);
  border: 3px solid var(--c-gold-500);
  border-radius: 0.75rem;
  width: 95dvw;
  max-width: 100rem;
  height: 90dvh;
  max-height: 56.25rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

/* Help Header */
.help-header {
  display: grid;
  grid-template-columns: 7.5rem 1fr 3.75rem;
  align-items: center;
  padding: 1.25rem 1.875rem;
  border-bottom: 2px solid var(--c-gold-500);
  background: var(--surface-card-faint);
}

.help-back-btn {
  background: rgba(206, 184, 136, 0.2);
  color: var(--c-gold-500);
  border: 2px solid var(--c-gold-500);
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: bold;
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
}

.help-back-btn:hover {
  background: rgba(206, 184, 136, 0.3);
  transform: translateX(-0.1875rem);
}

.help-title {
  color: white;
  font-size: 2.375rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.125rem;
  justify-self: center;
}

.help-close-btn {
  background: var(--c-red);
  color: white;
  border: none;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 0.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: all var(--t-fast);
  justify-self: end;
}

.help-close-btn:hover {
  background: var(--c-red-dark);
  transform: scale(1.05);
}

/* Main Help Content */
.help-content {
  flex: 1;
  padding: 2.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}

.help-section-title {
  color: var(--c-gold-500);
  font-size: 1.75rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.125rem;
  margin-bottom: 0.625rem;
}

.help-tasks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 43.75rem;
  margin: 0 auto;
  width: 100%;
}

.help-task-btn {
  background: white;
  color: var(--c-ink);
  border: 3px solid transparent;
  padding: 2.1875rem;
  border-radius: 0.75rem;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  gap: 1.5625rem;
  box-shadow: var(--shadow-lg);
}

.help-task-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--c-gold-500);
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-xl);
}

.help-task-icon {
  width: 4.375rem;
  height: 4.375rem;
  object-fit: contain;
  flex-shrink: 0;
}

.help-task-icon-emoji {
  font-size: 3.75rem;
  line-height: 1;
  flex-shrink: 0;
}

.help-task-text {
  text-align: left;
  line-height: 1.3;
}

.help-guidebook-btn {
  background: rgba(206, 184, 136, 0.2);
  color: var(--c-gold-500);
  border: 2px solid var(--c-gold-500);
  padding: 1.125rem 2.1875rem;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  font-weight: bold;
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  max-width: 21.875rem;
  margin: auto auto 0;
}

.help-guidebook-btn:hover {
  background: rgba(206, 184, 136, 0.3);
  transform: scale(1.02);
}

.help-guidebook-btn img {
  width: 1.25rem;
  height: 1.25rem;
}

/* Task Detail View */
.help-task-detail {
  flex: 1;
  padding: 2.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.help-detail-title {
  color: white;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.0625rem;
}

.help-detail-content {
  display: grid;
  grid-template-columns: 28.125rem 1fr;
  gap: 2.5rem;
  flex: 1;
  min-height: 0;
}

.help-detail-steps {
  background: var(--surface-card);
  border: 2px solid var(--c-gold-500);
  border-radius: 0.75rem;
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.help-step {
  display: flex;
  gap: 0.9375rem;
  align-items: center;
}

.help-step-number {
  background: var(--c-gold-500);
  color: var(--c-ink);
  width: 2.1875rem;
  height: 2.1875rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.help-step-icon {
  width: 3.125rem;
  height: 3.125rem;
  object-fit: contain;
  flex-shrink: 0;
}

.help-step-spacer {
  width: 3.125rem;
  flex-shrink: 0;
}

.help-step-text {
  color: white;
  font-size: 1.125rem;
  line-height: 1.6;
}

.help-detail-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-gif-placeholder {
  background: var(--surface-card-strong);
  border: 3px solid var(--c-gold-500);
  border-radius: 0.75rem;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold-500);
  font-size: 1.375rem;
  font-weight: bold;
  overflow: hidden;
}

.help-gif-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon Guidebook */
.help-guidebook {
  flex: 1;
  padding: 2.5rem;
  overflow-y: auto;
}

.help-guidebook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.875rem;
  max-width: 68.75rem;
  margin: 0 auto;
}

.help-guidebook-section {
  background: var(--surface-card);
  border: 2px solid var(--c-gold-500);
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}

.help-guidebook-section-title {
  color: var(--c-gold-500);
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid rgba(206, 184, 136, 0.3);
}

.help-icon-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.help-icon {
  width: 3.125rem;
  height: 3.125rem;
  object-fit: contain;
  flex-shrink: 0;
}

.help-icon-play {
  width: 3.125rem;
  height: 3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--c-gold-500);
  flex-shrink: 0;
}

.help-icon-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.help-icon-name {
  color: white;
  font-size: 0.9375rem;
  font-weight: bold;
}

.help-icon-desc {
  color: var(--c-gold-500);
  font-size: 0.8125rem;
  line-height: 1.4;
}


/* ============================================================
   Animations
   ============================================================ */

@keyframes powerPulse {
  0%,
  100% {
    border-color: var(--c-red);
    box-shadow: 0 0 20px rgba(166, 25, 46, 0.6);
  }
  50% {
    border-color: var(--c-yellow);
    box-shadow: 0 0 30px rgba(255, 199, 44, 0.8);
  }
}

@keyframes sourcePulse {
  0%,
  100% {
    border-color: var(--c-gold-500);
    box-shadow: 0 0 20px rgba(206, 184, 136, 0.6);
  }
  50% {
    border-color: var(--c-gold-300);
    box-shadow: 0 0 30px rgba(223, 209, 167, 0.8);
  }
}

@keyframes freezePulse {
  0%,
  100% {
    border-color: var(--c-teal);
    box-shadow: 0 0 20px rgba(92, 184, 178, 0.6);
  }
  50% {
    border-color: var(--c-teal-light);
    box-shadow: 0 0 30px rgba(92, 184, 178, 0.8);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ============================================================
   Responsive overrides
   ============================================================ */

@media (max-height: 800px) {
  .btn-icon {
    width: 2rem;
    height: 2rem;
  }
}

/* Very small laptop viewports (~1024-1200px wide).
   Switches the 6-button screen-controls grid to 3 columns x 2 rows,
   and rebalances the bottom row flex weights. */
@media (max-width: 1200px) {
  .controls-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
  }

  /* When .controls-grid wraps, compensate by making .control-btn
     accept more vertical space. */
  .control-btn,
  .audio-btn {
    padding: 0.375rem 0.25rem;
    font-size: 0.625rem;
  }
  .control-btn .btn-icon,
  .audio-btn .btn-icon {
    width: 2rem;
    height: 2rem;
  }

  /* Allow bottom-row to grow taller so the wrapped grid still
     fits without cropping. */
  .bottom-row {
    height: auto;
    min-height: 48dvh;
  }
}