/* ═══════════════════════════════════════════════
   FOCUS GROUP — W95 redesign foundation
   ═══════════════════════════════════════════════ */

/* ── Overlay + frame ── */
#fg-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.fg-frame {
  background: var(--w95-bg);
  border: 2px solid;
  border-color: var(--w95-border-light) var(--w95-border-dark) var(--w95-border-dark) var(--w95-border-light);
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #dfdfdf, 4px 4px 0 rgba(0, 0, 0, 0.4);
  font-family: 'MS Sans Serif', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 11px;
  color: var(--w95-text);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* CRITICAL: clips tucking cards */
  position: relative;
}

.fg-titlebar {
  background: linear-gradient(90deg, var(--w95-selection), #1084d0);
  color: var(--w95-text-white);
  padding: 3px 6px;
  font-weight: bold;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.fg-titlebar-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-close {
  background: var(--w95-bg);
  color: var(--w95-text);
  width: 18px; height: 16px;
  border: 1px solid;
  border-color: var(--w95-border-light) var(--w95-border-dark) var(--w95-border-dark) var(--w95-border-light);
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  line-height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.fg-close:active { border-color: var(--w95-border-dark) var(--w95-border-light) var(--w95-border-light) var(--w95-border-dark); }

/* ── Menu bar ── */
.fg-menu {
  padding: 2px 6px;
  font-size: 11px;
  display: flex;
  gap: 10px;
  background: var(--w95-bg);
  position: relative;
  z-index: 22;
  flex-shrink: 0;
  border-bottom: 1px solid var(--w95-border-dark);
  box-shadow: 0 1px 0 var(--w95-border-light);
}
.fg-menu span { cursor: default; padding: 1px 4px; }
.fg-menu span:hover { background: var(--w95-selection); color: var(--w95-text-white); }
.fg-menu u { text-decoration: underline; }

/* ── Etched divider: solid gray + dark line + white shadow, z-index above cards ── */
.fg-etch {
  height: 2px;
  background: var(--w95-bg);
  border-bottom: 1px solid var(--w95-border-dark);
  box-shadow: 0 1px 0 var(--w95-border-light);
  position: relative;
  z-index: 22;
  flex-shrink: 0;
}

/* ── Body (scrollable content area) ── */
.fg-body {
  background: var(--w95-bg);
  flex: 1;
  overflow-y: auto;
  position: relative;
}

/* ── Status bar ── */
.fg-status {
  background: var(--w95-bg);
  padding: 2px 6px;
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  position: relative;
  z-index: 22;
  flex-shrink: 0;
}
.fg-status .seg {
  border: 1px solid;
  border-color: var(--w95-border-dark) var(--w95-border-light) var(--w95-border-light) var(--w95-border-dark);
  padding: 0 6px;
}
.fg-status .live { color: #a00; font-weight: bold; }

/* ── W95 button (shared) ── */
.fg-btn {
  background: var(--w95-bg);
  border: 2px solid;
  border-color: var(--w95-border-light) var(--w95-border-dark) var(--w95-border-dark) var(--w95-border-light);
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #dfdfdf;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  color: var(--w95-text);
}
.fg-btn:active {
  border-color: var(--w95-border-dark) var(--w95-border-light) var(--w95-border-light) var(--w95-border-dark);
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
}
.fg-btn.primary {
  background: var(--w95-selection);
  color: var(--w95-text-white);
}
.fg-btn.danger { color: #a00; }
.fg-btn:disabled, .fg-btn.disabled {
  color: var(--w95-text-disabled);
  text-shadow: 1px 1px 0 var(--w95-border-light);
  cursor: default;
}

/* ── W95 input field ── */
.fg-input {
  background: var(--w95-bg-white);
  border: 1.5px solid var(--w95-border-dark);
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
  padding: 3px 6px;
  font-family: inherit;
  font-size: 11px;
  color: var(--w95-text);
  flex: 1;
  min-width: 0;
}

/* ── Shared tarot-card base class ── */
.fg-tarot-base {
  background: linear-gradient(135deg, #1a2030, #0a0d15);
  border: 2px solid #f4e4b3;
  border-radius: 4px;
  color: #f4e4b3;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}
.fg-tarot-base.selected { box-shadow: 0 0 8px 1px #ffee88; }
.fg-tarot-base .fg-check {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  background: #00aa00;
  color: #fff;
  font-size: 9px;
  text-align: center;
  line-height: 12px;
  border-radius: 2px;
  display: none;
}
.fg-tarot-base.selected .fg-check { display: block; }

/* ═══════════════════════════════════════════════
   CASTING screen
   ═══════════════════════════════════════════════ */

.fg-casting-hero {
  padding: 14px 16px;
  text-align: center;
  background: var(--w95-bg);
  position: relative;
  z-index: 22;
}
.fg-casting-eyebrow {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  opacity: 0.7;
  margin: 0;
}
.fg-casting-title {
  font-family: 'Silkscreen', 'Courier New', monospace;
  font-size: 24px;
  letter-spacing: 2px;
  margin: 6px 0 8px;
  font-weight: normal;
}
.fg-casting-counter {
  background: #000;
  color: #33ff33;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid #666;
  letter-spacing: 1px;
}

/* Project picker */
.fg-project-row {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--w95-bg);
  position: relative;
  z-index: 22;
}
.fg-project-label {
  font-weight: bold;
  font-size: 11px;
  flex-shrink: 0;
}
.fg-project-select {
  flex: 1;
  background: var(--w95-bg-white);
  border: 1.5px solid var(--w95-border-dark);
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
  font-family: inherit;
  font-size: 11px;
  padding: 2px 4px;
  color: var(--w95-text);
  min-width: 0;
}

/* Carousel */
.fg-carousel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 12px 10px;
}
.fg-carousel-arrow {
  background: var(--w95-bg);
  border: 2px solid;
  border-color: var(--w95-border-light) var(--w95-border-dark) var(--w95-border-dark) var(--w95-border-light);
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #dfdfdf;
  width: 22px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  flex-shrink: 0;
}
.fg-carousel-arrow:active {
  border-color: var(--w95-border-dark) var(--w95-border-light) var(--w95-border-light) var(--w95-border-dark);
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
}
.fg-carousel-arrow.disabled {
  color: var(--w95-text-disabled);
  text-shadow: 1px 1px 0 var(--w95-border-light);
  cursor: default;
}
.fg-carousel-track-wrap {
  overflow: hidden;
  border: 1.5px solid var(--w95-border-dark);
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
  background: var(--w95-bg-dark);
  padding: 8px;
  min-height: 96px;
}
.fg-carousel-track {
  display: flex;
  gap: 10px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.fg-carousel-track.centered { justify-content: center; }

.fg-tarot {
  aspect-ratio: 7 / 10;
  width: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 9px;
  padding-bottom: 5px;
  cursor: pointer;
}

.fg-preview {
  background: var(--w95-bg);
  border: 1.5px solid;
  border-color: var(--w95-border-dark) var(--w95-border-light) var(--w95-border-light) var(--w95-border-dark);
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
  margin: 6px 10px;
  padding: 8px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 72px;
}
.fg-preview-card {
  aspect-ratio: 7 / 10;
  width: 52px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 8px;
  padding-bottom: 4px;
}
.fg-preview-name { font-weight: bold; font-size: 13px; margin: 0 0 2px; }
.fg-preview-role { color: #444; font-family: 'Courier New', monospace; font-size: 10px; margin: 0 0 4px; }
.fg-preview-bio { font-size: 11px; line-height: 1.4; }
.fg-preview-empty { color: var(--w95-text-disabled); font-style: italic; text-align: center; grid-column: 1 / -1; }

.fg-casting-footer {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--w95-bg);
  position: relative;
  z-index: 22;
}
.fg-casting-footer-helper {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: #444;
}

@media (max-width: 991px) {
  .fg-tarot { width: 64px; }
  .fg-casting-title { font-size: 20px; }
}
@media (max-width: 480px) {
  .fg-carousel { grid-template-columns: 1fr; padding: 8px; }
  .fg-carousel-arrow { display: none; }
  .fg-carousel-track-wrap {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }
  .fg-carousel-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    transform: none !important;
  }
  .fg-tarot { width: 100%; max-width: 48px; justify-self: center; }
  .fg-casting-title { font-size: 18px; }
  .fg-casting-hero { padding: 8px; }
  .fg-preview { grid-template-columns: 40px 1fr; padding: 5px; }
  .fg-preview-card { width: 40px; }
  .fg-preview-name { font-size: 11px; }
}

/* ═══════════════════════════════════════════════
   SESSION ROOM
   ═══════════════════════════════════════════════ */

.fg-session-body {
  padding: 8px;
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 8px;
  position: relative;
  min-height: 280px;
}

.fg-session-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border: 2px solid;
  border-color: var(--w95-border-light) var(--w95-border-dark) var(--w95-border-dark) var(--w95-border-light);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  align-self: start;
}
.fg-session-video video,
.fg-session-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fg-session-video .fg-rec {
  position: absolute;
  bottom: 6px; left: 8px;
  color: #33ff33;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 1px;
}

.fg-session-right {
  position: relative;
  display: flex;
  flex-direction: column;
}

.fg-transcript {
  background: var(--w95-bg-white);
  border: 1.5px solid var(--w95-border-dark);
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
  padding: 8px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.55;
  overflow-y: auto;
  flex: 1;
  min-height: 220px;
  color: #000;
}
.fg-transcript .fg-t-div { color: var(--w95-text-disabled); margin: 6px 0 3px; }
.fg-transcript .fg-t-msg { margin-bottom: 2px; }
.fg-transcript .fg-t-sys { color: var(--w95-text-disabled); font-style: italic; }
.fg-transcript .fg-t-nick { font-weight: bold; }
.fg-transcript .fg-t-time { color: #888; }

.fg-cardstack {
  position: absolute;
  right: 6px;
  bottom: 0;
  display: flex;
  gap: 4px;
  align-items: flex-end;
  z-index: 5;
  pointer-events: none;
}
.fg-session-card {
  width: 34px;
  height: 96px;
  background: linear-gradient(135deg, #1a2030, #0a0d15);
  border: 2px solid #f4e4b3;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.35);
  transform: translateY(80px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}
.fg-session-card.active {
  transform: translateY(10px);
  box-shadow: 0 0 14px 2px #ffee88, 0 -4px 10px rgba(0, 0, 0, 0.35);
  z-index: 10;
}
.fg-session-card .fg-nametab {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 16px;
  background: rgba(244, 228, 179, 0.15);
  padding: 3px 0;
  text-align: center;
  color: #f4e4b3;
  font-family: 'Courier New', monospace;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(244, 228, 179, 0.3);
  box-sizing: border-box;
}
.fg-session-card .fg-cardface {
  position: absolute;
  top: 16px; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f4e4b3;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  opacity: 0.5;
}

.fg-bubble-session {
  position: absolute;
  background: var(--w95-bg-white);
  border: 1.5px solid #000;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 11px;
  max-width: 200px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
  z-index: 20;
  color: #000;
  display: none;
}
.fg-bubble-session.show { display: block; }
.fg-bubble-session .fg-bubble-nick {
  font-weight: bold;
  font-size: 10px;
  display: block;
  margin-bottom: 2px;
}
.fg-bubble-session::after {
  content: '';
  position: absolute;
  bottom: -10px; right: 14px;
  border: 7px solid transparent;
  border-top-color: #000;
  border-bottom: 0;
}
.fg-bubble-session::before {
  content: '';
  position: absolute;
  bottom: -8px; right: 16px;
  border: 6px solid transparent;
  border-top-color: var(--w95-bg-white);
  border-bottom: 0;
  z-index: 1;
}

.fg-input-row {
  padding: 6px 8px;
  display: flex;
  gap: 4px;
  align-items: center;
  background: var(--w95-bg);
  position: relative;
  z-index: 22;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .fg-session-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .fg-session-video { align-self: stretch; }
  .fg-transcript { min-height: 140px; }
  .fg-session-card { width: 30px; height: 86px; transform: translateY(70px); }
  .fg-session-card.active { transform: translateY(9px); }
  .fg-bubble-session { font-size: 10px; max-width: 160px; }
  .fg-input-row .fg-btn.session-secondary { display: none; }
}

/* ═══════════════════════════════════════════════
   VERDICT BOARD
   ═══════════════════════════════════════════════ */

.fg-verdict-hero {
  padding: 12px;
  text-align: center;
  background: var(--w95-bg);
  position: relative;
  z-index: 22;
}
.fg-verdict-title {
  font-family: 'Silkscreen', 'Courier New', monospace;
  font-size: 22px;
  letter-spacing: 3px;
  margin: 0;
  font-weight: normal;
}

.fg-verdict-grid {
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.fg-verdict-tile {
  background: var(--w95-bg);
  border: 1.5px solid;
  border-color: var(--w95-border-dark) var(--w95-border-light) var(--w95-border-light) var(--w95-border-dark);
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
  padding: 8px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
}
.fg-verdict-card {
  aspect-ratio: 7 / 10;
  width: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 9px;
  padding-bottom: 4px;
}
.fg-verdict-name { font-weight: bold; font-size: 12px; margin: 0 0 2px; }
.fg-verdict-assessment {
  font-size: 10px;
  color: #444;
  margin: 0 0 3px;
  line-height: 1.4;
}
.fg-verdict-quote { font-size: 11px; line-height: 1.4; font-style: italic; }

.fg-verdict-footer {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--w95-bg);
  position: relative;
  z-index: 22;
}
.fg-verdict-count {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: bold;
}
.fg-verdict-footer-actions { display: flex; gap: 6px; }

@media (max-width: 991px) {
  .fg-verdict-title { font-size: 18px; }
}

@media (max-width: 480px) {
  .fg-verdict-grid {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 6px;
  }
  .fg-verdict-title { font-size: 16px; }
  .fg-verdict-tile { grid-template-columns: 36px 1fr; padding: 5px; }
  .fg-verdict-card { width: 36px; font-size: 8px; }
  .fg-verdict-quote { font-size: 10px; }
  .fg-verdict-footer { flex-wrap: wrap; gap: 4px; }
}

/* ═══════════════════════════════════════════════
   UTILITY KEYFRAMES
   ═══════════════════════════════════════════════ */

@keyframes fg-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

@keyframes fg-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

@keyframes fg-spin { to { transform: rotate(360deg); } }