/* Liquid Glass Design System */
/* Apple-style glassmorphism design for consistent styling across all pages */

:root {
  --glassBg: rgba(16, 22, 28, 0.45);
  --glassEdge: rgba(255, 255, 255, 0.08);
  --glassHighlight: rgba(255, 255, 255, 0.25);
  --glassShadow: rgba(0, 0, 0, 0.45);
  
  /* Faction colors */
  --f-guardian: #4a86b8;
  --f-seeker: #d29a2e;
  --f-rogue: #2f9b71;
  --f-mystic: #6e5cc8;
  --f-survivor: #b54a4f;
  --f-neutral: #6c757d;
}

/* Glass Panel - Primary container style */
.glass-panel,
.deck-panel {
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.glass-panel header,
.deck-panel header {
  padding: 12px 16px;
  font-weight: 700;
  background: transparent;
  border-bottom: none;
}

/* Glass Card - For items within panels */
.glass-card {
  position: relative;
  border: 1px solid var(--glassEdge);
  background: var(--glassBg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px var(--glassShadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.glass-card:hover {
  transform: translateY(-2px);
  border-color: var(--glassHighlight);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5);
}

/* Glass Button - Primary action */
.glass-btn {
  width: 100%;
  color: #eaf2f8;
  background: linear-gradient(180deg, rgba(106, 183, 255, 0.18), rgba(106, 183, 255, 0.12));
  border: 1px solid rgba(106, 183, 255, 0.22);
  border-radius: 10px;
  padding: 8px 12px;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 8px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.16s ease;
}

.glass-btn:hover {
  background: linear-gradient(180deg, rgba(106, 183, 255, 0.24), rgba(106, 183, 255, 0.16));
  border-color: rgba(106, 183, 255, 0.35);
}

.glass-btn:active {
  transform: translateY(1px);
}

/* Glass Button - Danger variant */
.glass-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 98, 98, 0.16), rgba(255, 98, 98, 0.10));
  border: 1px solid rgba(255, 98, 98, 0.30);
  color: #ffd6d6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 8px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.16s ease;
  cursor: pointer;
}

.glass-btn-danger:hover {
  background: linear-gradient(180deg, rgba(255, 98, 98, 0.22), rgba(255, 98, 98, 0.14));
  border-color: rgba(255, 98, 98, 0.42);
}

.glass-btn-danger:active {
  transform: translateY(1px);
}

/* Glass Input */
.glass-input {
  background: rgba(16, 22, 28, 0.45);
  border: 1px solid var(--glassEdge);
  border-radius: 8px;
  padding: 8px 12px;
  color: #eaf2f8;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.16s ease;
  font-size: 14px;
}

.glass-input:focus {
  outline: none;
  border-color: rgba(106, 183, 255, 0.4);
  box-shadow: 0 0 0 2px rgba(106, 183, 255, 0.1);
}

/* Glass Toolbar - Sticky headers */
.glass-toolbar {
  position: sticky;
  top: 8px;
  z-index: 20;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(10, 16, 22, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Glass Modal */
.glass-modal {
  background: rgba(17, 26, 34, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glassEdge);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* Glass Chip */
.glass-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glassEdge);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  transition: all 0.16s ease;
}

.glass-chip:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--glassHighlight);
}

.glass-chip.active {
  background: rgba(106, 183, 255, 0.18);
  border-color: rgba(106, 183, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(106, 183, 255, 0.35);
}

/* Faction-specific glass tints */
.glass-card.faction-guardian {
  border-color: rgba(74, 134, 184, 0.2);
}

.glass-card.faction-seeker {
  border-color: rgba(210, 154, 46, 0.2);
}

.glass-card.faction-rogue {
  border-color: rgba(47, 155, 113, 0.2);
}

.glass-card.faction-mystic {
  border-color: rgba(110, 92, 200, 0.2);
}

.glass-card.faction-survivor {
  border-color: rgba(181, 74, 79, 0.2);
}

.glass-card.faction-neutral {
  border-color: rgba(108, 117, 125, 0.2);
}

/* Glass Badge */
.glass-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(106, 183, 255, 0.15);
  border: 1px solid rgba(106, 183, 255, 0.25);
  color: #6ab7ff;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Windows fallback: reduced blur for performance */
html.windows-compatibility .glass-panel,
html.windows-compatibility .deck-panel,
html.windows-compatibility .glass-card,
html.windows-compatibility .glass-toolbar,
html.windows-compatibility .glass-modal,
html.windows-compatibility .glass-btn,
html.windows-compatibility .glass-btn-danger,
html.windows-compatibility .glass-input,
html.windows-compatibility .glass-badge {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(17,26,34,0.92) !important;
}

/* Glass Section Header */
.glass-section-header {
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  border-bottom: 1px solid var(--glassEdge);
  font-weight: 700;
  font-size: 14px;
  color: #eaf2f8;
}