/* =====================================================
   GMG Phase 3.5 Polish - UI Consistency & Visual Refinements
   NO new features - only visual polish and layout fixes
   All styles scoped to specific views to avoid global regressions
   ===================================================== */

/* =====================================================
   SECTION A — Encounter Manager Polish
   ===================================================== */

#encounterManagerView .encounter-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 1rem;
  width: 100%;
}

@media (max-width: 1024px) {
  #encounterManagerView .encounter-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

#encounterManagerView .encounter-saved-list {
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  padding-right: 0.5rem;
}

#encounterManagerView .participant-row {
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  margin-bottom: 0.5rem;
  background: var(--color-surface, #0c1222);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#encounterManagerView .participant-row.active,
#encounterManagerView .em-participant.active,
#encounterManagerView .em-participant-row.active {
  border-color: var(--color-warning, #facc15);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.2);
}

#encounterManagerView .initiative-bubble {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary, #14B8A6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

#encounterManagerView .participant-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

#encounterManagerView .participant-name {
  font-weight: 500;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#encounterManagerView .participant-type {
  font-size: 0.75rem;
  opacity: 0.7;
}

#encounterManagerView .hp-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 80px;
}

#encounterManagerView .hp-text {
  font-size: 0.75rem;
  text-align: center;
  font-weight: 500;
}

#encounterManagerView .em-hp-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--color-surface-elevated, rgba(30, 64, 175, 0.4));
  overflow: hidden;
}

#encounterManagerView .em-hp-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-success, #22c55e);
  transition: width 0.3s ease;
}

#encounterManagerView .em-hp-bar-fill.low {
  background: var(--color-warning, #f59e0b);
}

#encounterManagerView .em-hp-bar-fill.critical {
  background: var(--color-danger, #ef4444);
}

#encounterManagerView .status-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

#encounterManagerView .status-tag {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.2);
  color: var(--color-accent, #a78bfa);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#encounterManagerView .remove-btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger, #f87171);
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

#encounterManagerView .remove-btn:hover {
  opacity: 1;
}

#encounterManagerView .em-round-display {
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  background: var(--color-primary, #14B8A6);
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

#encounterManagerView .em-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1rem;
}

@media (max-width: 1024px) {
  #encounterManagerView .em-layout {
    grid-template-columns: 1fr;
  }
}

#encounterManagerView .em-saved-list {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* =====================================================
   SECTION B — GM Screen V2 Polish
   ===================================================== */

#gmScreenView .gm-module {
  background: var(--color-surface, #0c1222);
  border-radius: 12px;
  padding: 0.75rem;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.25));
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.2s ease;
}

#gmScreenView .gm-module.dragging,
#gmScreenView .gm-module.resizing {
  box-shadow: 0 0 0 2px var(--color-info, rgba(34, 211, 238, 0.5));
}

#gmScreenView .gm-module-header {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  margin: -0.75rem -0.75rem 0.75rem -0.75rem;
  border-radius: 12px 12px 0 0;
  background: var(--color-surface-elevated, rgba(148, 163, 184, 0.1));
  border-bottom: 1px solid var(--color-border, rgba(148, 163, 184, 0.15));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#gmScreenView .gm-module-content {
  max-height: 300px;
  overflow-y: auto;
}

#gmScreenView .gm-screen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

@media (max-width: 1100px) {
  #gmScreenView .gm-screen-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 900px) {
  #gmScreenView .gm-screen-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  #gmScreenView .gm-screen-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   SECTION C — Player View Polish
   ===================================================== */

#playerView .player-view-root {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  animation: fadeInContent 0.4s ease;
}

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

#playerView .player-view-title {
  font-size: 2.2rem;
  letter-spacing: 0.03em;
  font-family: var(--font-display, 'Cinzel', serif);
  margin-bottom: 0.5rem;
}

#playerView .player-view-subtitle {
  opacity: 0.8;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

#playerView .player-view-text {
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 60ch;
}

#playerView .player-view-text p {
  margin-bottom: 1rem;
}

#playerView .player-view-text p:last-child {
  margin-bottom: 0;
}

#playerView .player-view-image {
  max-height: 45vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  margin: 1rem 0;
}

#playerView.fullscreen {
  cursor: none;
  overflow-x: hidden;
}

#playerView.fullscreen .player-view-controls,
#playerView.fullscreen .player-view-footer {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

#playerView.fullscreen .player-view-controls:hover,
#playerView.fullscreen .player-view-footer:hover {
  opacity: 1;
}

#playerView.fullscreen *:focus {
  outline: none;
}

/* =====================================================
   SECTION D — Pack Builder / Print Packs Polish
   ===================================================== */

.pack-builder-container .pack-section {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

.pack-builder-container .pack-section:last-child {
  border-bottom: none;
}

.pack-builder-container h1.pack-title {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-display, 'Cinzel', serif);
}

.pack-builder-container h2.pack-subtitle {
  font-size: 1.3rem;
  opacity: 0.85;
  margin-bottom: 0.5rem;
}

.pack-builder-container h3.pack-header {
  font-size: 1.1rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.pack-builder-container .page-break {
  page-break-before: always;
}

.pack-builder-container .pack-image {
  max-width: 100%;
  border-radius: 8px;
  margin: 0.5rem 0;
}

@media print {
  .pack-builder-container {
    font-size: 11pt;
    line-height: 1.4;
  }
  
  .pack-builder-container h1 { font-size: 18pt; }
  .pack-builder-container h2 { font-size: 14pt; }
  .pack-builder-container h3 { font-size: 12pt; }
  
  .pack-builder-container .btn,
  .pack-builder-container .pack-no-print {
    display: none !important;
  }
  
  .pack-builder-container .pack-section {
    page-break-inside: avoid;
  }
}

/* =====================================================
   SECTION E — Region Map Polish
   ===================================================== */

#regionMapView .region-map-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#regionMapView .region-map-canvas-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  touch-action: none;
}

#regionMapView .region-map-two-pane {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1rem;
  width: 100%;
}

@media (max-width: 1024px) {
  #regionMapView .region-map-two-pane {
    grid-template-columns: 1fr 280px;
  }
}

@media (max-width: 900px) {
  #regionMapView .region-map-two-pane {
    grid-template-columns: 1fr;
  }
}

#regionMapView .poi-card {
  background: var(--color-surface, #0c1222);
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.25));
  border-radius: 12px;
  padding: 1rem;
  animation: fadeInContent 0.3s ease;
}

#regionMapView .poi-card.selected,
#regionMapView .region-map-poi.selected,
#regionMapView .region-list-item.selected {
  border-color: var(--color-primary, #14B8A6);
  box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.3);
}

#regionMapView .poi-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* =====================================================
   SECTION F — Character Sheets Polish
   ===================================================== */

#characterSheetsView .character-sheet {
  background: var(--color-surface, #0c1222);
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.25));
}

#characterSheetsView .sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

@media (max-width: 900px) {
  #characterSheetsView .sheet-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

#characterSheetsView .sheet-section-header {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border, rgba(148, 163, 184, 0.2));
}

#characterSheetsView .sheet-field-label {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 0.25rem;
}

#characterSheetsView .sheet-field-value {
  font-size: 1rem;
  overflow-wrap: break-word;
}

#characterSheetsView .sheet-field-input {
  width: 100%;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.25));
  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.05));
  color: inherit;
  font-size: 0.9375rem;
}

#characterSheetsView .character-sheet-field {
  margin-bottom: 0.75rem;
}

#characterSheetsView .character-sheet-field label {
  display: block;
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 0.25rem;
}

#characterSheetsView .character-sheet-field input,
#characterSheetsView .character-sheet-field textarea,
#characterSheetsView .character-sheet-field select {
  width: 100%;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.25));
  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.05));
  color: inherit;
  font-size: 0.9375rem;
}

/* =====================================================
   SECTION G — Wizard UI Polish
   ===================================================== */

#characterWizardView .wizard-progress-bar,
#characterWizardView .character-wizard-progress {
  height: 4px;
  background: var(--color-surface-elevated, rgba(148, 163, 184, 0.2));
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

#characterWizardView .wizard-progress-fill,
#characterWizardView .character-wizard-progress-fill {
  height: 100%;
  background: var(--color-primary, #14B8A6);
  border-radius: 999px;
  transition: width 0.3s ease;
}

#characterWizardView .wizard-step,
#characterWizardView .cw-step {
  margin-bottom: 2rem;
  animation: fadeInContent 0.3s ease;
}

#characterWizardView .wizard-step-title,
#characterWizardView .cw-step-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

#characterWizardView .wizard-step-content {
  margin-bottom: 1.5rem;
}

#characterWizardView .wizard-buttons,
#characterWizardView .cw-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border, rgba(148, 163, 184, 0.15));
}

@media (max-width: 480px) {
  #characterWizardView .wizard-buttons,
  #characterWizardView .cw-actions {
    flex-direction: column;
  }
  
  #characterWizardView .wizard-buttons .btn,
  #characterWizardView .cw-actions .btn {
    width: 100%;
  }
}

/* =====================================================
   SECTION H — Save/Load UI Polish
   ===================================================== */

#saveLoadView .save-load-view {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem;
}

#saveLoadView .save-load-modal {
  max-width: 500px;
  margin: auto;
}

#saveLoadView .save-load-card {
  background: var(--color-surface, #0c1222);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.25));
}

#saveLoadView .save-success-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success, #22c55e);
  font-size: 0.875rem;
  animation: fadeInContent 0.3s ease;
}

#saveLoadView .save-success-indicator::before {
  content: "✓";
  font-weight: bold;
}

#saveLoadView .schema-version-badge,
#saveLoadView .schema-version {
  font-size: 0.75rem;
  opacity: 0.5;
  margin-top: 1rem;
  text-align: center;
}

#saveLoadView .save-slot-card {
  background: var(--color-surface, #0c1222);
  border-radius: 12px;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.25));
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.2s ease;
}

#saveLoadView .save-slot-card:hover {
  border-color: var(--color-border-hover, rgba(148, 163, 184, 0.4));
}

#saveLoadView .save-slot-card.active {
  border-color: var(--color-primary, #14B8A6);
}

/* =====================================================
   SECTION I — Session Dashboard Polish
   ===================================================== */

#sessionDashboardView .sd-card {
  background: var(--color-surface, #0c1222);
  border-radius: 12px;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.25));
  padding: 1rem;
}

/* =====================================================
   RESPONSIVE TOUCH TARGETS - View Scoped
   ===================================================== */

@media (max-width: 768px) {
  #encounterManagerView .btn,
  #gmScreenView .btn,
  #characterWizardView .btn,
  #saveLoadView .btn {
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
  }
  
  #encounterManagerView .btn-sm,
  #gmScreenView .btn-sm,
  #characterWizardView .btn-sm,
  #saveLoadView .btn-sm {
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
  }
  
  #encounterManagerView .participant-row {
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
  }
  
  #encounterManagerView .hp-block {
    grid-column: 1 / -1;
    min-width: 100%;
  }
}

/* Tablet breakpoints */
@media (min-width: 769px) and (max-width: 1024px) {
  #encounterManagerView .em-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  
  #gmScreenView .gm-screen-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  #characterSheetsView .sheet-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* =====================================================
   SECTION J — Global Card/Button/Scroll Styling (Spec)
   ===================================================== */

/* Global scroll panel utility */
.scroll-panel {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Global card styling */
.card {
  background: var(--color-surface, #020617);
  border-radius: 0.75rem;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.35));
  padding: 1rem;
}

/* Button size consistency */
.btn-xs {
  font-size: 0.75rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
}

/* Section spacing utility */
.section {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* =====================================================
   SECTION K — Player View Fade Transition (Spec C.5)
   ===================================================== */

#playerView .player-view-content {
  opacity: 0;
  transition: opacity 200ms ease-out;
}

#playerView .player-view-content.is-visible {
  opacity: 1;
}

#playerView.player-view-app {
  background: radial-gradient(circle at top, #020617, #000000);
  color: #f9fafb;
  min-height: 100vh;
  overflow-x: hidden;
}

/* =====================================================
   SECTION L — Region Map Layout (Spec E)
   ===================================================== */

#regionMapView .region-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1rem;
}

@media (max-width: 1024px) {
  #regionMapView .region-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

#regionMapView .region-map-pane,
#regionMapView .region-details-pane {
  background: var(--color-surface, #020617);
  border-radius: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.35));
}

#regionMapView .region-poi-list {
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}

#regionMapView .region-map-canvas {
  touch-action: none;
}

/* =====================================================
   SECTION M — Encounter Header/Participant (Spec A.3-4)
   ===================================================== */

#encounterManagerView .encounter-sidebar,
#encounterManagerView .encounter-main {
  background: var(--color-surface, #020617);
  border-radius: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.35));
}

#encounterManagerView .encounter-sidebar-list {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

#encounterManagerView .encounter-header-main {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

#encounterManagerView .encounter-title {
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

#encounterManagerView .encounter-round-pill {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(129, 140, 248, 0.2);
  border: 1px solid rgba(129, 140, 248, 0.6);
  font-size: 0.8rem;
  text-transform: uppercase;
}

#encounterManagerView .encounter-header-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}

#encounterManagerView .encounter-participant-row {
  background: var(--color-surface, #020617);
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--color-border, rgba(51, 65, 85, 0.9));
}

#encounterManagerView .encounter-participant-row.is-active {
  border-color: rgba(250, 204, 21, 0.9);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.35);
}

#encounterManagerView .encounter-participant-main {
  display: grid;
  grid-template-columns: 40px minmax(0, 1.5fr) minmax(0, 1.3fr);
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.35rem;
}

#encounterManagerView .encounter-participant-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto;
  gap: 0.4rem;
  align-items: center;
}

@media (max-width: 900px) {
  #encounterManagerView .encounter-participant-main {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  
  #encounterManagerView .encounter-hp-block {
    grid-column: 1 / -1;
  }
  
  #encounterManagerView .encounter-participant-meta {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  
  #encounterManagerView .encounter-remove-btn {
    justify-self: flex-end;
  }
}

#encounterManagerView .encounter-initiative {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary, #14B8A6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
}

#encounterManagerView .encounter-hp-number {
  font-size: 0.8rem;
  margin-bottom: 0.1rem;
  font-weight: 500;
}

#encounterManagerView .encounter-hp-bar {
  position: relative;
  width: 100%;
  height: 0.65rem;
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.4);
  overflow: hidden;
}

#encounterManagerView .encounter-hp-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--color-success, #22c55e);
}

#encounterManagerView .encounter-notes textarea,
#encounterManagerView .encounter-notes input {
  font-size: 0.75rem;
  padding: 0.25rem 0.4rem;
}

#encounterManagerView .encounter-remove-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* =====================================================
   UTILITY CLASSES - View Scoped
   ===================================================== */

#encounterManagerView .scrollable-list,
#gmScreenView .scrollable-list,
#characterSheetsView .scrollable-list,
#saveLoadView .scrollable-list {
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  -webkit-overflow-scrolling: touch;
}

#encounterManagerView .section-spacing,
#gmScreenView .section-spacing,
#characterSheetsView .section-spacing,
#saveLoadView .section-spacing {
  padding: 1rem 0;
}

#encounterManagerView .section-divider,
#gmScreenView .section-divider,
#characterSheetsView .section-divider,
#saveLoadView .section-divider {
  border-bottom: 1px solid var(--color-border, rgba(148, 163, 184, 0.15));
  margin: 1rem 0;
}

.text-muted-polish {
  opacity: 0.7;
}

.text-small-polish {
  font-size: 0.875rem;
}

.text-xs-polish {
  font-size: 0.75rem;
}

.overflow-wrap-polish {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* =====================================================
   SECTION N — GM Screen Module Body Layout (Phase 3)
   Shared inner layout styles for DM Screen modules
   ===================================================== */

.dm-module-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.dm-section-header {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.dm-section-header .dm-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  color: var(--mystic-violet, #a855f7);
}

.dm-section-header .dm-section-meta {
  font-size: 0.7rem;
  opacity: 0.6;
  font-weight: normal;
}

.dm-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dm-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: rgba(15,23,42,0.6);
  transition: background 0.15s ease;
}

[data-theme="light"] .dm-list-row {
  background: rgba(15,23,42,0.08);
}

.dm-list-row:hover {
  background: rgba(15,23,42,0.8);
}

[data-theme="light"] .dm-list-row:hover {
  background: rgba(15,23,42,0.12);
}

.dm-list-row.dm-active-turn {
  background: rgba(45, 212, 191, 0.2);
  border-left: 3px solid var(--arcane-teal, #2dd4bf);
}

.dm-list-row-left {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.dm-list-row-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.dm-list-row-primary {
  font-weight: 500;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-list-row-secondary {
  font-size: 0.72rem;
  opacity: 0.7;
}

.dm-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.5);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.dm-badge--danger {
  border-color: rgba(248,113,113,0.9);
  color: #fecaca;
  background: rgba(248,113,113,0.15);
}

[data-theme="light"] .dm-badge--danger {
  color: #b91c1c;
  background: rgba(248,113,113,0.1);
}

.dm-badge--ok {
  border-color: rgba(45,212,191,0.9);
  color: #a7f3d0;
  background: rgba(45,212,191,0.15);
}

[data-theme="light"] .dm-badge--ok {
  color: #047857;
  background: rgba(45,212,191,0.1);
}

.dm-badge--info {
  border-color: rgba(96,165,250,0.9);
  color: #bfdbfe;
  background: rgba(96,165,250,0.15);
}

[data-theme="light"] .dm-badge--info {
  color: #1d4ed8;
  background: rgba(96,165,250,0.1);
}

.dm-badge--warning {
  border-color: rgba(251,191,36,0.9);
  color: #fef08a;
  background: rgba(251,191,36,0.15);
}

[data-theme="light"] .dm-badge--warning {
  color: #a16207;
  background: rgba(251,191,36,0.1);
}

.dm-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-top: 0.35rem;
}

.dm-module-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(148,163,184,0.15);
}

.dm-pill-link {
  font-size: 0.72rem;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.75;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
}

.dm-pill-link:hover {
  opacity: 1;
}

.dm-hp-bar {
  width: 60px;
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.4);
  overflow: hidden;
  background: rgba(148,163,184,0.15);
}

.dm-hp-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.2s ease;
}

.dm-hp-bar-fill.hp-high {
  background: var(--color-success, #22c55e);
}

.dm-hp-bar-fill.hp-mid {
  background: var(--color-warning, #f59e0b);
}

.dm-hp-bar-fill.hp-low {
  background: var(--color-danger, #ef4444);
}

.dm-enc-section {
  margin-bottom: 0.5rem;
}

.dm-enc-section:last-of-type {
  margin-bottom: 0;
}

.dm-scrollable {
  max-height: 180px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dm-text-block {
  font-size: 0.85rem;
  line-height: 1.4;
  max-height: 120px;
  overflow-y: auto;
}

.dm-conditions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: 0.15rem;
}

.dm-condition-tag {
  font-size: 0.6rem;
  padding: 0.05rem 0.25rem;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.2);
  color: var(--color-accent, #a78bfa);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

[data-theme="light"] .dm-condition-tag {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

/* Module header standardization */
#gmScreenView .gm-module-header-right {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

#gmScreenView .gm-module-header-right .btn-xxs {
  font-size: 0.7rem;
  padding: 0.1rem 0.25rem;
  min-width: 1.4rem;
  height: 1.4rem;
}

#gmScreenView .dm-module-send,
#gmScreenView .dm-module-settings,
#gmScreenView .dm-module-close {
  background: none;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.15rem 0.25rem;
  border-radius: 4px;
  transition: all 0.15s ease;
}

#gmScreenView .dm-module-send:hover,
#gmScreenView .dm-module-settings:hover {
  background: rgba(148,163,184,0.15);
  color: var(--text-primary, #fff);
}

#gmScreenView .dm-module-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.btn-xxs {
  font-size: 0.7rem;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
}

/* =====================================================
   SECTION N — NEW DM SCREEN WIDGETS (Phase 4)
   ===================================================== */

/* GM Notes Pro */
.dm-notes-pro {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dm-notes-textarea {
  flex: 1;
  width: 100%;
  min-height: 140px;
  padding: 0.75rem;
  border: 1px solid var(--color-border, rgba(148,163,184,0.25));
  border-radius: 8px;
  background: var(--color-surface-elevated, rgba(15,15,26,0.95));
  color: var(--text-primary, #e8eaed);
  font-size: 0.875rem;
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
}

.dm-notes-textarea:focus {
  outline: none;
  border-color: var(--arcane-teal, #2dd4bf);
}

.dm-notes-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.35rem;
}

.dm-notes-meta {
  font-size: 0.7rem;
  color: var(--text-secondary, #888);
  font-style: italic;
}

/* Scene Tracker */
.dm-scene-tracker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dm-scene-name {
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.5rem;
  background: var(--color-surface-elevated, rgba(15,15,26,0.95));
  border: 1px solid var(--color-border, rgba(148,163,184,0.25));
  border-radius: 6px;
  color: var(--text-primary, #e8eaed);
}

.dm-scene-summary {
  width: 100%;
  padding: 0.5rem;
  font-size: 0.85rem;
  background: var(--color-surface-elevated, rgba(15,15,26,0.95));
  border: 1px solid var(--color-border, rgba(148,163,184,0.25));
  border-radius: 6px;
  color: var(--text-primary, #e8eaed);
  resize: vertical;
  min-height: 50px;
}

.dm-scene-goal-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.dm-scene-goal-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--arcane-teal, #2dd4bf);
}

.dm-goal-done {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Faction Clocks */
.dm-faction-clocks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dm-clock-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dm-clock-visual {
  display: flex;
  gap: 2px;
}

.dm-clock-segment {
  width: 16px;
  height: 16px;
  border: 2px solid var(--arcane-teal, #2dd4bf);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dm-clock-segment:hover {
  background: rgba(45,212,191,0.3);
}

.dm-clock-segment.filled {
  background: var(--arcane-teal, #2dd4bf);
}

.dm-clock-count {
  font-size: 0.75rem;
  color: var(--text-secondary, #888);
  font-weight: 500;
}

/* Quick NPC Forge */
.dm-quick-npc {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dm-quick-npc-content {
  min-height: 80px;
}

.dm-quick-npc-result {
  padding: 0.5rem;
  background: var(--color-surface-elevated, rgba(15,15,26,0.95));
  border-radius: 6px;
  border: 1px solid var(--color-border, rgba(148,163,184,0.25));
}

.dm-npc-hook {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-secondary, #888);
  margin-top: 0.25rem;
}

/* Loot Tracker */
.dm-loot-tracker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dm-loot-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dm-loot-list {
  max-height: 200px;
  overflow-y: auto;
}

/* Initiative Timeline */
.dm-initiative-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dm-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dm-timeline-entry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: var(--color-surface-elevated, rgba(15,15,26,0.5));
  font-size: 0.85rem;
}

.dm-timeline-entry.dm-active {
  background: rgba(250, 204, 21, 0.15);
  border-left: 3px solid var(--color-warning, #facc15);
}

.dm-timeline-init {
  font-weight: 700;
  min-width: 1.5rem;
  text-align: center;
  color: var(--arcane-teal, #2dd4bf);
}

.dm-timeline-name {
  flex: 1;
}

/* Rules Snippets */
.dm-rules-snippets {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dm-rules-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 220px;
  overflow-y: auto;
}

.dm-rule-snippet {
  padding: 0.5rem;
  background: var(--color-surface-elevated, rgba(15,15,26,0.95));
  border-radius: 6px;
  border-left: 3px solid var(--mystic-violet, #a855f7);
}

.dm-rule-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mystic-violet, #a855f7);
  margin-bottom: 0.15rem;
}

.dm-rule-text {
  font-size: 0.8rem;
  color: var(--text-secondary, #ccc);
  line-height: 1.4;
}

/* Ambience & Mood */
.dm-ambience-mood {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dm-mood-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dm-mood-pill {
  padding: 0.15rem 0.5rem;
  font-size: 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--color-border, rgba(148,163,184,0.4));
  background: transparent;
  color: var(--text-secondary, #888);
  cursor: pointer;
  transition: all 0.15s ease;
}

.dm-mood-pill:hover {
  background: rgba(45,212,191,0.1);
  border-color: var(--arcane-teal, #2dd4bf);
}

.dm-mood-pill.active {
  background: rgba(45,212,191,0.2);
  border-color: var(--arcane-teal, #2dd4bf);
  color: var(--arcane-teal, #2dd4bf);
}

.dm-mood-active {
  font-size: 0.75rem;
  color: var(--arcane-teal, #2dd4bf);
  font-weight: 500;
}

.dm-link-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.dm-link-row a {
  color: var(--color-info, #38bdf8);
  text-decoration: none;
  font-size: 0.8rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-link-row a:hover {
  text-decoration: underline;
}

.dm-links-list {
  max-height: 120px;
  overflow-y: auto;
}

/* Compact Dice Roller */
.dm-dice-roller-compact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dm-dice-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dm-dice-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid var(--color-border, rgba(148,163,184,0.4));
  background: var(--color-surface-elevated, rgba(15,15,26,0.95));
  color: var(--text-primary, #e8eaed);
  cursor: pointer;
  transition: all 0.15s ease;
}

.dm-dice-btn:hover {
  background: var(--arcane-teal, #2dd4bf);
  color: #000;
  border-color: var(--arcane-teal, #2dd4bf);
}

.dm-dice-formula-row {
  display: flex;
  gap: 0.35rem;
}

.dm-dice-input {
  flex: 1;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  background: var(--color-surface-elevated, rgba(15,15,26,0.95));
  border: 1px solid var(--color-border, rgba(148,163,184,0.25));
  border-radius: 4px;
  color: var(--text-primary, #e8eaed);
}

.dm-dice-input:focus {
  outline: none;
  border-color: var(--arcane-teal, #2dd4bf);
}

.dm-dice-history {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 100px;
  overflow-y: auto;
}

.dm-dice-history-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.35rem;
  background: var(--color-surface-elevated, rgba(15,15,26,0.5));
  border-radius: 3px;
  font-size: 0.75rem;
}

.dm-dice-formula {
  font-weight: 600;
  color: var(--mystic-violet, #a855f7);
  min-width: 3rem;
}

.dm-dice-rolls {
  flex: 1;
  color: var(--text-secondary, #888);
  font-size: 0.7rem;
}

.dm-dice-total {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--arcane-teal, #2dd4bf);
}

/* Empty hint */
.dm-empty-hint {
  text-align: center;
  color: var(--text-secondary, #888);
  font-style: italic;
  font-size: 0.8rem;
  padding: 0.5rem;
}

/* Action row */
.dm-action-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* Ghost button */
.btn-ghost {
  background: none;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
  padding: 0.15rem 0.25rem;
  font-size: 0.85rem;
  transition: color 0.15s ease;
}

.btn-ghost:hover {
  color: var(--color-danger, #ef4444);
}

/* Light theme overrides */
[data-theme="light"] .dm-notes-textarea,
[data-theme="light"] .dm-scene-name,
[data-theme="light"] .dm-scene-summary,
[data-theme="light"] .dm-quick-npc-result,
[data-theme="light"] .dm-timeline-entry,
[data-theme="light"] .dm-rule-snippet,
[data-theme="light"] .dm-dice-btn,
[data-theme="light"] .dm-dice-input,
[data-theme="light"] .dm-dice-history-row {
  background: rgba(255,255,255,0.8);
  border-color: rgba(0,0,0,0.15);
}

[data-theme="light"] .dm-clock-segment {
  border-color: var(--color-primary, #14B8A6);
}

[data-theme="light"] .dm-clock-segment.filled {
  background: var(--color-primary, #14B8A6);
}