:root{
  --panel: rgba(17,26,34,.62);
  --panel-border: rgba(255,255,255,.18);
  --muted:#b9c7d4; --text:#eaf2f8; --accent:#6ab7ff;
}

/* Fix dropdown/select styling for Windows */
select {
  background: rgba(0,0,0,0.8) !important;
  color: #e8f4fd !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
}

select option {
  background: rgba(0,0,0,0.9) !important;
  color: #e8f4fd !important;
  padding: 8px !important;
}

select:focus {
  border-color: #6ab7ff !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(106,183,255,0.2) !important;
}
html,body{height:100%}
body{margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:transparent}
/* Background - Liquid Chrome will be the main background */
/* Enhanced Navigation - Modern Apple-style */
.ah-nav, .topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ah-nav .bar, .topnav .bar {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  position: relative;
}

/* Brand styling */
.ah-nav .brand, .topnav .brand {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  transition: transform 0.2s ease;
}

.ah-nav .brand:hover, .topnav .brand:hover {
  transform: scale(1.05);
}

.ah-nav .brand img, .topnav .brand img {
  height: 36px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
  transition: filter 0.2s ease;
}

/* Navigation links */
.ah-nav a, .topnav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 16px;
  border-radius: 12px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  letter-spacing: -0.2px;
}

.ah-nav a:not(.brand):hover, .topnav a:not(.brand):hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Active link styling */
.ah-nav a[aria-current="page"], .topnav a[aria-current="page"] {
  background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4);
}

.ah-nav a[aria-current="page"]:hover, .topnav a[aria-current="page"]:hover {
  background: linear-gradient(135deg, #5AC8FA 0%, #007AFF 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 122, 255, 0.5);
}

/* Spacer */
.topnav .sp, .ah-nav span[style*="flex:1"] {
  flex: 1;
}

/* User info */
.topnav .me, #navUser {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 500;
  margin-right: 12px;
}

/* Auth buttons */
.topnav button, #navLogin, #navLogout {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-radius: 20px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.topnav button:hover, #navLogin:hover, #navLogout:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Sign out button special styling */
#navLogout {
  background: rgba(255, 59, 48, 0.1);
  border-color: rgba(255, 59, 48, 0.3);
  color: #FF3B30;
}

#navLogout:hover {
  background: rgba(255, 59, 48, 0.2);
  border-color: rgba(255, 59, 48, 0.5);
  color: #ffffff;
}

/* Responsive navigation */
@media (max-width: 768px) {
  .ah-nav .bar, .topnav .bar {
    padding: 10px 16px;
    gap: 6px;
  }
  
  .ah-nav a, .topnav a {
    padding: 6px 12px;
    font-size: 14px;
  }
  
  .ah-nav .brand img, .topnav .brand img {
    height: 32px;
  }
}

/* Hide auth elements until loaded */
[data-auth-only] {
  display: none;
}

/* Modal styles */
dialog.modal{border:0;border-radius:14px;padding:16px;background:rgba(17,26,34,.95);color:#eaf2f8;max-width:420px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.field{width:100%;background:rgba(8,12,16,.65);border:1px solid rgba(255,255,255,.18);color:#eaf2f8;border-radius:10px;padding:10px}
.err{color:#ffb4a2;margin-top:8px}
/* Container */
.ah-wrap{max-width:1400px;margin:0 auto 18px;padding:0 12px}
/* Grid + Card */
.ah-grid{display:grid;grid-template-columns:repeat(auto-fill, 300px);justify-content:center;gap:14px;margin-top:18px}
.ah-card{width:300px;background:rgba(10,15,20,.65);border:1px solid var(--panel-border);border-radius:12px;overflow:hidden;
  position:relative;transform-origin:center center;
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s cubic-bezier(.22,1,.36,1), filter .22s cubic-bezier(.22,1,.36,1);will-change:transform}
.ah-card:hover{transform:scale(1.7);z-index:30;box-shadow:0 24px 60px rgba(0,0,0,.55);filter:brightness(1.03)}
@media (prefers-reduced-motion: reduce){ .ah-card{transition:none} .ah-card:hover{transform:none} }
/* Media portrait frame */
.ah-media{position:relative;width:100%;aspect-ratio:63/88;overflow:hidden;background:#0b1116}
.ah-media img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;width:auto;display:block;border-radius:19px}
.ah-media img.rotate90{transform:translate(-50%,-50%) rotate(90deg);height:135%;width:auto;border-radius:19px}
/* Meta */
.ah-meta{padding:10px 12px}
.ah-name{font-weight:800;font-size:16px}
.ah-sub{color:var(--muted);font-size:12.5px}
.ah-stats{margin-top:6px;font-size:12.5px;display:flex;gap:10px;color:var(--muted);flex-wrap:wrap}
.ah-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);
  border:1px solid var(--panel-border);border-radius:999px;padding:3px 8px;font-size:12.5px}
.ah-chip img{width:16px;height:16px}
.ah-rules .icon{width:16px;height:16px;vertical-align:-3px}
/* Slim filters (if used on index) */
.ah-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:10px auto 6px}
.ah-filters .group{background:rgba(10,15,20,.55);border:1px solid var(--panel-border);border-radius:12px;padding:8px 10px}
.ah-filters .title{font-weight:700;color:#dbe7f3;margin-bottom:6px;font-size:13px}

/* Universal card image border radius */
.card img, .ah-card img, .ah-media img {
  border-radius: 19px !important;
}

/* Global background: stretch and fit, no repeat */
html, body{ min-height:100%; }
body{
  background-color: #0b1116 !important;
  background-image: url('../arkham-background.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}