/* Curved card header + glass + shimmer */
.curved-header {
  border-radius: 0 0 1.5rem 1.5rem;
  background: linear-gradient(135deg, #002045 0%, #1a365d 55%, #0d4a3c 100%);
  position: relative;
  overflow: hidden;
}
.curved-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: shimmer 2.5s infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
/* Glass morphism — การ์ด / พื้นผิวระดับโปร (เลเยอร์แสง + เบลอ + ขอบแก้ว) */
.glass-card {
  position: relative;
  isolation: isolate;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.55) 40%,
    rgba(248, 250, 252, 0.68) 100%
  );
  backdrop-filter: blur(22px) saturate(1.38);
  -webkit-backdrop-filter: blur(22px) saturate(1.38);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22) inset,
    0 2px 0 0 rgba(255, 255, 255, 0.42) inset,
    0 -1px 0 0 rgba(0, 32, 69, 0.05) inset,
    0 28px 56px -14px rgba(0, 32, 69, 0.12),
    0 12px 28px -10px rgba(0, 32, 69, 0.07),
    0 0 0 1px rgba(0, 32, 69, 0.04);
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.35s ease;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0.1) 100%
  );
}

.glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background: radial-gradient(
    ellipse 130% 85% at 0% 0%,
    rgba(255, 255, 255, 0.55) 0%,
    transparent 58%
  );
}

.glass-card > * {
  position: relative;
  z-index: 1;
}

html.dark .glass-card {
  background: linear-gradient(
    145deg,
    rgba(51, 65, 85, 0.52) 0%,
    rgba(30, 41, 59, 0.74) 42%,
    rgba(15, 23, 42, 0.82) 100%
  );
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.14) inset,
    0 28px 56px -14px rgba(0, 0, 0, 0.5),
    0 0 48px -20px rgba(56, 189, 248, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.4);
}

html.dark .glass-card::before {
  opacity: 0.45;
  background: linear-gradient(
    125deg,
    rgba(148, 163, 184, 0.18) 0%,
    transparent 48%,
    rgba(56, 189, 248, 0.08) 100%
  );
}

html.dark .glass-card::after {
  opacity: 0.38;
  background: radial-gradient(
    ellipse 110% 75% at 10% 0%,
    rgba(56, 189, 248, 0.14) 0%,
    transparent 52%
  );
}

header.glass-nav,
nav.glass-nav {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.84) 100%
  );
  backdrop-filter: blur(28px) saturate(1.22);
  -webkit-backdrop-filter: blur(28px) saturate(1.22);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.65) inset,
    0 10px 40px -12px rgba(0, 32, 69, 0.1);
}

html.dark header.glass-nav,
html.dark nav.glass-nav {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.94) 0%,
    rgba(15, 23, 42, 0.88) 100%
  );
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
    0 12px 40px -12px rgba(0, 0, 0, 0.45);
}
.medal-badge {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
}
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

@media print {
  .no-print { display: none !important; }
  body { font-family: 'Kanit', system-ui, sans-serif !important; }
}