/* ============================================================================
   FONT — di-host lokal.
   Sebelumnya @import ke fonts.googleapis.com: platform gagal menampilkan font
   yang benar di jaringan tanpa internet (kondisi umum saat CTF di lab tertutup),
   membocorkan IP pemain ke pihak ketiga, dan diblokir oleh Content-Security-Policy.
   Berkas .woff2 kini ada di /vendor/fonts/ — tampilan tetap identik.
   ========================================================================== */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400 900;            /* variable font: satu berkas untuk semua berat */
  font-display: swap;
  src: url('../vendor/fonts/orbitron.woff2') format('woff2');
}

@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/share-tech-mono.woff2') format('woff2');
}

:root {
  /* ============================================================
     Design tokens "Paper" (overhaul 2026-08-26 — minimalis ala Medium)
     Sumber kebenaran: /var/www/html/assets/tokens.css
     LIGHT theme, full monokrom: hitam/putih/abu, tanpa aksen warna.
     Aksen utama = hitam pekat (ink). Garis tipis, whitespace lega.
     ============================================================ */
  --bg-main: #ffffff;
  --bg-darker: rgba(247, 247, 245, 0.94);
  --primary-accent: #111111;          /* ink — aksen utama (CTA, solved) */
  --secondary-accent: #6b6b6b;        /* gray netral — pending/unsolved */
  --text-primary: #191919;
  --text-muted: #757575;
  --success: #191919;                 /* monokrom: success via weight/border */
  --danger: #111111;

  /* Alias lama dipertahankan agar seluruh halaman ikut berubah konsisten */
  --neon-cyan: #111111;
  --neon-red: #111111;
  --neon-green: #111111;
  --neon-yellow: #6b6b6b;

  /* Permukaan & garis */
  --surface: #ffffff;
  --surface-2: #f7f7f5;
  --border-soft: #e6e6e3;
  --phosphor-dim: rgba(17, 17, 17, 0.06);
  --amber-dim: rgba(0, 0, 0, 0.05);

  /* Font "Paper": serif besar untuk judul, sans bersih untuk body,
     mono tetap untuk data/kode. Orbitron/Share Tech Mono dipensiunkan. */
  --font-main: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-header: Georgia, 'Times New Roman', serif;
  --transition: all 0.2s ease-in-out;

  /* Clip-path cyber dihapus di tema Paper: sudut biasa. */
  --clip-card: none;
  --clip-btn: none;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-main);
  background-image: none;   /* Paper: grid hijau dihapus */
  color: var(--text-primary);
  font-family: var(--font-main);
  line-height: 1.7;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* CRT scanline overlay dihapus (overhaul 2025-08-25): menurunkan kontras teks
   dan jadi pola "neon slop". Personality cukup dari warna + tipografi + matrix redup. */
body::before {
  content: none;
}

h1, h2, h3, h4, h5, h6, .card-title, .stat-num, .asc-num {
  font-family: var(--font-header);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-hot);
  text-underline-offset: 3px;
  transition: var(--transition);
}

a:hover {
  color: var(--primary-accent);
  text-shadow: none;
  text-decoration-color: var(--ink);
}

/* Hide legacy orbs & matrix — Paper: latar polos bersih */
.bg-orbs {
  display: none !important;
}
#matrix-canvas {
  display: none !important;
}

/* Header & Nav — Paper: putih polos, garis bawah tipis */
header {
  background: rgba(255, 255, 255, 0.92);

  border-bottom: 1px solid var(--border-line);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-family: var(--font-header);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
}

.logo h1 {
  font-size: 1.5rem;
  margin: 0;
  color: var(--primary-accent);
}

.logo .subtitle {
  font-size: 0.8rem;
  color: var(--neon-red);
  margin: 0;
  font-family: var(--font-main);
  text-transform: uppercase;
}

nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

nav a {
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
}

nav a.active, nav a:hover {
  color: var(--primary-accent);
}

.player-badge {
  background: var(--bg-darker);
  border: 1px solid var(--neon-cyan);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.player-badge .label {
  color: var(--primary-accent);
  margin-right: 0.5rem;
}

/* Container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}

/* Stats Bar */
.stats-bar {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.stat-item, .admin-stat-card {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-top: 2px solid var(--neon-cyan);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  
}

.stat-item:hover, .admin-stat-card:hover {
  transform: translateY(-5px);
  border: 1px solid var(--neon-cyan);
}

.stat-num, .asc-num {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-accent);
  display: block;
  margin-bottom: 0.5rem;
}

.stat-label, .asc-label {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* Missing Utilities */
.hidden {
  display: none !important;
}

/* Notification Banner */
#notifications-banner {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  background: rgba(10, 10, 15, 0.95);
  border: 1px solid var(--neon-cyan);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 8px;
  animation: slideInUp 0.4s ease-out forwards;
  max-width: 450px;
  border-left: 4px solid var(--neon-cyan);
}

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

#notifications-banner strong {
  color: var(--primary-accent);
  font-family: var(--font-header);
  letter-spacing: 1px;
}

#notif-text {
  flex-grow: 1;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.notif-close {
  background: none;
  border: none;
  color: var(--neon-red);
  font-size: 1.25rem;
  cursor: pointer;
  transition: var(--transition);
  font-weight: bold;
}

.notif-close:hover {
  transform: scale(1.1);
}

/* Category Filter */
.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.5rem;
  background: rgba(10, 10, 15, 0.7);
  
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 1.25rem 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.filter-label {
  color: var(--primary-accent);
  font-family: var(--font-header);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-right: 1rem;
}

.filter-btn {
  background: rgba(25, 25, 30, 0.9);
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  font-family: var(--font-header);
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

.filter-btn:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--border-hot);
}

.filter-btn.active {
  background: var(--neon-cyan);
  color: #fff;
  border-color: var(--neon-cyan);
  box-shadow: 0 4px 14px var(--border-hot);
  font-weight: 700;
}

/* Main & Section Header */
main {
  margin-bottom: 4rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-hot);
  padding-bottom: 1rem;
}

.section-title {
  font-family: var(--font-header);
  font-size: 1.75rem;
  color: var(--primary-accent);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.challenge-count-badge {
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--neon-cyan);
  color: var(--primary-accent);
  padding: 0.35rem 0.75rem;
  font-family: var(--font-header);
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 8px;
}

/* Notification Modal Content */
.modal-notif-content {
  max-width: 700px;
}

.notif-list-container {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.notif-list-container::-webkit-scrollbar {
  width: 6px;
}
.notif-list-container::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
}
.notif-list-container::-webkit-scrollbar-thumb {
  background: var(--neon-cyan);
}

.notif-loading-msg {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: 2rem 0;
}

/* Grid & Cards (Challenges) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 2.2rem;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border-hot);
    border-top: none;
  padding: 1.85rem;
  position: relative;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  
  -webkit-
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
  
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--border-soft), transparent);
  transform: skewX(-25deg);
  transition: all 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

.card:hover::before {
  animation: shine 1.5s infinite;
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 200%; }
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.card:hover::after {
  opacity: 1;
}

.card:hover {
  animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

@keyframes glitch-skew {
  0% { transform: skew(0deg, 0deg); }
  20% { transform: skew(-1deg, -1deg); }
  40% { transform: skew(1deg, 1deg); }
  60% { transform: skew(-0.5deg, -0.5deg); }
  80% { transform: skew(0.5deg, 0.5deg); }
  100% { transform: skew(0deg, 0deg); }
}

.card h3 {
  transform: translateZ(40px);
  transition: transform 0.2s ease, color 0.2s ease;
  font-size: 1.3rem;
  line-height: 1.4;
  margin-bottom: 0.6rem;
}

.card .badge {
  transform: translateZ(32px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}

.card .card-desc {
  transform: translateZ(15px);
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 1.2rem;
  flex: 1;
}

.card .status-indicator {
  transform: translateZ(22px);
  font-weight: 700;
}

.card:hover h3 {
  color: var(--neon-cyan);
}

.card.solved {
  border-top: 3px solid var(--primary-accent);
  background: linear-gradient(145deg, var(--phosphor-dim) 0%, rgba(5,8,7,0.95) 100%);
}

.card.solved:hover {
  border-color: rgba(17,17,17, 0.5);
}

.card.solved h3, .card.solved .card-icon {
  color: var(--success);
}

.solved-ribbon {
  position: absolute;
  top: 15px;
  right: -35px;
  background: var(--success);
  color: #fff;
  font-family: var(--font-header);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 40px;
  transform: rotate(45deg);
  z-index: 10;
  text-transform: uppercase;
}

.card-icon {
  font-size: 2.5rem;
  color: var(--secondary-accent);
  margin-bottom: 1rem;
}

.card h3 {
  font-size: 1.25rem;
  color: var(--primary-accent);
}

.card-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  flex-grow: 1;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-hot);
  padding-top: 1rem;
}

.badge {
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--neon-cyan);
  border-radius: 4px;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-header);
  font-size: 0.75rem;
  color: var(--primary-accent);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.badge.points {
  background: rgba(0,0,0,0.05);
  border-color: var(--secondary-accent);
  color: var(--secondary-accent);
}

/* Modals */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-overlay, .edit-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  
  cursor: pointer;
}

.modal-content, .edit-modal {
  position: relative;
  z-index: 10000;
  background: var(--surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-l);
  width: 90%;
  max-width: 800px;
  padding: 3rem;
  
  
  animation: modalCyberFade 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.modal-content::before {
  content: "SYS.MSG.INCOMING";
  position: absolute;
  top: -10px;
  left: 20px;
  background: var(--neon-cyan);
  color: #fff;
  padding: 0 10px;
  font-family: var(--font-header);
  font-size: 0.8rem;
  font-weight: bold;
}

@keyframes modalCyberFade {
  0% { opacity: 0; transform: scale(0.9) translateY(40px) skewX(10deg); filter: hue-rotate(90deg); }
  50% { opacity: 0.5; transform: scale(1.02) translateY(-10px) skewX(-5deg); }
  100% { opacity: 1; transform: scale(1) translateY(0) skewX(0); filter: hue-rotate(0); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--neon-cyan);
  padding-bottom: 1rem;
}

.modal-header h2 {
  font-size: 2.2rem;
  margin: 0;
  color: var(--primary-accent);
  letter-spacing: 2px;
}

.close-btn {
  position: relative;
  z-index: 10001;
  background: transparent;
  border: 1px solid var(--neon-red);
  color: var(--neon-red);
  font-family: var(--font-header);
  font-size: 1.2rem;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: var(--neon-red);
  color: #fff;
  transform: none;
}

.modal-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

#modal-description {
  color: var(--text-primary);
  margin-bottom: 2.5rem;
  font-size: 1.1rem;
  line-height: 1.8;
  background: rgba(0,0,0,0.03);
  padding: 1.5rem;
  border-left: 3px solid var(--neon-cyan);
  font-family: var(--font-main);
  position: relative;
}

#modal-description::after {
  content: '█';
  animation: blink 1s step-end infinite;
  color: var(--neon-cyan);
  margin-left: 5px;
}

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

/* ── Professional Modern Buttons ── */
.download-btn, .submit-btn, .auth-btn, .admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(20, 20, 25, 0.9);
  color: var(--primary-accent);
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--neon-cyan);
  border-radius: 6px;
  transition: all 0.2s ease;
  font-family: var(--font-header);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.download-btn {
  color: #fff;
  background: var(--secondary-accent);
  border-color: var(--secondary-accent);
  margin-bottom: 2rem;
}

.submit-btn {
  color: #fff;
  background: var(--success);
  border-color: var(--success);
}

.auth-btn, .admin-btn {
  color: #fff;
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
}

.download-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  
  transform: translateY(-1px);
}

.submit-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 4px 14px rgba(17,17,17, 0.4);
  transform: translateY(-1px);
}

.auth-btn:hover, .admin-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 4px 14px var(--border-hot);
  transform: translateY(-1px);
}

.download-btn:active, .submit-btn:active, .auth-btn:active, .admin-btn:active {
  transform: translateY(0) scale(0.98);
}

.flag-submission {
  display: flex;
  gap: 1rem;
}

#flag-input, .auth-input, .admin-input {
  flex: 1;
  background: rgba(10, 10, 15, 0.7);
  border: 1px solid var(--border-hot);
  border-radius: 8px;
  color: var(--primary-accent);
  padding: 0.75rem 1.5rem;
  outline: none;
  transition: var(--transition);
  font-family: var(--font-main);
  font-weight: 600;
}

#flag-input:focus, .auth-input:focus, .admin-input:focus {
  background: rgba(0,0,0,0.03);
}

textarea.admin-input {
  resize: vertical;
  min-height: 120px;
}

#submission-feedback {
  margin-top: 1.5rem;
  font-family: var(--font-header);
  font-size: 1rem;
  text-align: center;
  padding: 1rem;
  border-radius: 8px;
  display: none;
  font-weight: 700;
  text-transform: uppercase;
}

#submission-feedback.success {
  display: block;
  background: rgba(17,17,17, 0.1);
  border: 1px solid var(--success);
  color: var(--success);
}

#submission-feedback.error {
  display: block;
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid var(--danger);
  color: var(--danger);
}

/* Auth Page */
.auth-page-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.auth-card {
  background: var(--surface-2);
  border: 1px solid var(--border-hot);
  border-top: 3px solid var(--neon-cyan);
  border-bottom: 3px solid var(--neon-cyan);
  padding: 0;
  width: 95%;
  max-width: 850px;
  
  display: flex;
  flex-direction: row;
  
}

.auth-card::before {
  content: '';
  position: absolute;
  inset: 0;
  
  pointer-events: none;
}

.auth-sidebar {
  flex: 1;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="%2300f3ff" x="10" y="10" width="80" height="80" fill-opacity="0.05"/><path d="M10 10L30 30M90 10L70 30M10 90L30 70M90 90L70 70" stroke="%2300f3ff" stroke-width="2" stroke-opacity="0.5"/></svg>') center/cover;
  border-right: 1px solid rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.auth-sidebar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, transparent 50%, rgba(255,77,109,0.1) 100%);
  animation: scan 4s linear infinite;
}

@keyframes scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.auth-form-area {
  flex: 1.2;
  padding: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 768px) {
  .auth-card {
    flex-direction: column;
    max-width: 500px;
  }
  .auth-sidebar {
    padding: 2rem;
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  .auth-form-area {
    padding: 2rem;
  }
}

.auth-sidebar h1 {
  font-size: 2.5rem;
  color: var(--primary-accent);
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 2;
}

.auth-sidebar p {
  color: var(--text-muted);
  font-size: 1.1rem;
  position: relative;
  z-index: 2;
  font-family: var(--font-main);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.auth-form-area h2 {
  margin-bottom: 2rem;
  font-size: 1.8rem;
  color: #fff;
  text-align: left;
}

.auth-input {
  width: 100%;
  margin-bottom: 1.5rem;
}

.auth-btn {
  width: 100%;
  padding: 1rem;
  margin-top: 1rem;
  font-size: 1.1rem;
}

.auth-link {
  display: block;
  margin-top: 2rem;
  color: var(--text-muted);
  font-family: var(--font-header);
  font-weight: 600;
  text-transform: uppercase;
}

.auth-link:hover {
  color: var(--primary-accent);
}

/* Scoreboard */
.scoreboard-page {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}

.sb-title {
  font-family: var(--font-header);
  font-size: 2rem;
  color: var(--primary-accent);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.sb-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.sb-back-link {
  margin-bottom: 2rem;
}

.sb-back-link a {
  background: rgba(10, 10, 15, 0.7);
  border: 1px solid var(--border-hot);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: var(--font-header);
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  transition: all 0.3s ease;
}

.sb-back-link a:hover {
  background: linear-gradient(135deg, var(--border-soft), rgba(0, 150, 255, 0.1));
  color: #fff;
  border-color: var(--neon-cyan);
  transform: translateY(-2px);
}

.scoreboard-page .sb-table-wrapper {
  background: var(--bg-darker);
  border: 1px solid var(--neon-cyan);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 1.5rem;
  padding: 1rem;
}

.chart-wrapper {
  margin-bottom: 2rem;
}

.chart-container {
  height: 300px;
  width: 100%;
}

.sb-table, .chall-table {
  width: 100%;
  border-collapse: collapse;
}

.sb-table th, .sb-table td, .chall-table th, .chall-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.9rem;
}

.sb-table th, .chall-table th {
  background: rgba(0,0,0,0.03);
  color: var(--primary-accent);
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--neon-cyan);
}

.sb-table td, .chall-table td {
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-primary);
}

.sb-table tr:hover td, .chall-table tr:hover td {
  background: rgba(0,0,0,0.05);
}

.sb-table tr:last-child td, .chall-table tr:last-child td {
  border-bottom: none;
}

.sb-rank {
  color: var(--primary-accent);
  font-weight: 700;
  font-family: var(--font-header);
}

.sb-score {
  color: var(--secondary-accent);
  font-weight: 700;
  font-family: var(--font-header);
  text-align: right;
}

.text-right {
  text-align: right !important;
}

.col-rank {
  width: 80px;
}


.badge-you {
  background: var(--success);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  margin-left: 0.5rem;
  border-radius: 3px;
  font-weight: 900;
}

.row-me td {
  background: rgba(17,17,17, 0.08);
  border-bottom: 1px solid rgba(17,17,17, 0.3);
}

.sb-username-me {
  color: var(--success);
  font-weight: bold;
}

.sb-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--bg-darker);
  border: 1px dashed var(--neon-cyan);
  border-radius: 12px;
  margin-top: 2rem;
}
.sb-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.7;
}
.sb-empty-title {
  color: var(--primary-accent);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.sb-empty-desc {
  color: var(--text-muted);
}

/* Admin Dashboard */
.admin-card {
  background: var(--bg-darker);
  border: 1px solid var(--neon-cyan);
  border-radius: 12px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
}

.admin-title {
  color: var(--primary-accent);
  margin-bottom: 2rem;
  font-size: 1.75rem;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.tab-nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-hot);
  padding-bottom: 1rem;
  overflow-x: auto;
}

.tab-btn {
  background: rgba(25, 25, 30, 0.9);
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  font-family: var(--font-header);
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
}

.tab-btn.active, .tab-btn:hover {
  background: rgba(0,0,0,0.04);
  color: #fff;
  border-color: var(--border-hot);
}

.tab-btn.active {
  background: var(--neon-cyan);
  color: #fff;
  border-color: var(--neon-cyan);
  box-shadow: 0 4px 14px var(--border-hot);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: modalFadeIn 0.3s ease forwards;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.admin-form-group {
  margin-bottom: 1.5rem;
}

.admin-form-group.full, .span-2 {
  grid-column: span 2;
}

.admin-form-group label {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--primary-accent);
  font-family: var(--font-header);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-edit, .btn-del, .btn-reset {
  background: rgba(25, 25, 30, 0.9);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--text-muted);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font-family: var(--font-header);
  font-size: 0.8rem;
  font-weight: 600;
  margin-right: 0.5rem;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.btn-edit:hover {
  background: var(--neon-cyan);
  color: #fff;
  border-color: var(--neon-cyan);
  box-shadow: 0 4px 14px var(--border-hot);
}

.btn-del:hover, .btn-reset:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  box-shadow: 0 4px 14px rgba(255, 77, 109, 0.3);
}

/* Utilities */
.alert {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  display: none;
  font-family: var(--font-header);
  font-weight: 700;
  text-transform: uppercase;
}
.alert.show {
  display: block;
}
.alert.success {
  background: rgba(17,17,17, 0.1);
  color: var(--success);
  border: 1px solid var(--success);
}
.alert.error {
  background: rgba(255, 77, 109, 0.1);
  color: var(--danger);
  border: 1px solid var(--danger);
}

/* Edit Modal Overlay Fix */
.edit-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: 0.3s;
}
.edit-overlay.open { opacity: 1; visibility: visible; }

footer {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-family: var(--font-main);
  margin-top: 3rem;
  border-top: 1px solid var(--neon-cyan);
  background: rgba(0, 0, 0, 0.8);
}

/* Admin Dashboard Specific Layouts */
.admin-page {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}
.form-wrapper-flex {
  display: flex;
  gap: 1.5rem;
  align-items: flex-end;
}
.form-flex-child {
  flex: 1;
}
.margin-top-8 {
  margin-top: 8px;
  display: inline-block;
}
.admin-file-input, .admin-file-input-full {
  color: var(--primary-accent);
  background: rgba(0, 0, 0, 0.5);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--neon-cyan);
  width: 100%;
  font-family: var(--font-main);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .form-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .admin-form-group.full, .span-2 { grid-column: span 1; }
  .stats-bar { flex-direction: column; gap: 1rem; }
  .form-wrapper-flex { flex-direction: column; align-items: stretch; }
  header { flex-direction: column; gap: 1rem; text-align: center; }
  nav { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================================
   BAGIAN 2 — KELENGKAPAN & PENGERASAN
   ----------------------------------------------------------------------------
   Sebelum ini, sekitar 70 class yang dipakai HTML/JS tidak pernah didefinisikan
   di stylesheet: skeleton loading, empty state, titik kesulitan, warna kategori,
   badge role, kolom tabel, riwayat notifikasi, dan penting sekali .alert-error —
   yang membuat pesan error login benar-benar TIDAK TERLIHAT (karena .alert
   memakai display:none dan hanya .alert.show menampilkannya).

   Bagian ini melengkapi semuanya memakai token warna yang sudah ada, lalu
   menambah lapisan responsif, sentuh, dan aksesibilitas. Tidak ada nilai visual
   pada Bagian 1 yang diubah — tampilan tactical tetap sama, hanya lengkap.
   ========================================================================== */

:root {
  /* Warna per kategori — sebelumnya semua badge kategori tampak identik. */
  --cat-osint:      #191919;
  --cat-web:        #191919;
  --cat-crypto:     #191919;
  --cat-forensics:  #191919;
  --cat-stego:      #191919;
  --cat-reveng:     #191919;
  --cat-misc:       #6b6b6b;

  --surface-1: rgba(0,0,0,0.04);
  --surface-2: #f0f0ee;
  --border-soft: #e6e6e3;

  /* Tinggi header dipakai untuk offset scroll-margin pada anchor. */
  --header-h: 88px;
  /* Inset area aman perangkat (notch iPhone, tepi layar melengkung). */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Ukuran viewport dinamis: 100vh pada mobile termasuk area yang tertutup bilah
   URL, sehingga konten terpotong. dvh mengikuti tinggi terlihat sebenarnya. */
body { min-height: 100svh; }
@supports (min-height: 100dvh) {
  body { min-height: 100dvh; }
  .auth-page-body { min-height: 100dvh; }
}

/* ── Aksesibilitas dasar ─────────────────────────────────────────────────── */

/* Indikator fokus terlihat untuk pengguna keyboard, tanpa menambah outline
   pada klik mouse. Sebelumnya `outline:none` pada input membuat navigasi
   keyboard tidak mungkin diikuti secara visual. */
:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}
.filter-btn:focus-visible,
.tab-btn:focus-visible,
.submit-btn:focus-visible,
.auth-btn:focus-visible,
.admin-btn:focus-visible,
.download-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
#flag-input:focus-visible,
.auth-input:focus-visible,
.admin-input:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 1px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10002;
  background: var(--neon-cyan);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-header);
  font-weight: 700;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hormati preferensi sistem: matikan animasi latar & transisi.
   Matrix rain juga berhenti sendiri lewat matrix.js. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  #matrix-canvas { display: none !important; }
  .card { transform: none !important; }
}

/* Pengguna bisa mematikan efek berat lewat tombol di header (kelas di <html>). */
html.fx-off #matrix-canvas { display: none !important; }
html.fx-off .card { transform: none !important; box-shadow: 0 8px 20px rgba(0,0,0,0.6) !important; }
html.fx-off header,
html.fx-off .category-filter,
html.fx-off .card,
html.fx-off .stat-item {  }

/* ── Header: logo, nav, badge pemain ─────────────────────────────────────── */

.logo-prefix {
  color: var(--secondary-accent);
  font-weight: 900;
  letter-spacing: -1px;
}

header nav ul {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}


.player-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  white-space: nowrap;
}
.player-badge .username {
  color: var(--text-primary);
  font-family: var(--font-header);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.player-badge .admin-username {
  color: var(--neon-red);
}
.player-badge .player-score {
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--secondary-accent);
  color: var(--secondary-accent);
  border-radius: 6px;
  padding: 0.1rem 0.5rem;
  font-family: var(--font-header);
  font-size: 0.8rem;
  font-weight: 800;
}

/* Tombol menu untuk layar sempit — disembunyikan di desktop. */
.nav-toggle {
  display: none;
  background: rgba(25, 25, 30, 0.9);
  color: var(--primary-accent);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}
.nav-toggle:hover { border-color: var(--neon-cyan); }

/* Tombol kecil untuk mematikan efek visual. */
.fx-btn {
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.3rem 0.55rem;
  min-height: 32px;
}
.fx-btn:hover { color: var(--primary-accent); border-color: var(--neon-cyan); }

/* ── Varian warna angka statistik ───────────────────────────────────────── */


.admin-stat-card.asc-green  { border-top-color: var(--success); }
.admin-stat-card.asc-purple { border-top-color: var(--cat-crypto); }
.admin-stat-card.asc-yellow { border-top-color: var(--secondary-accent); }
.admin-stat-card.asc-cyan   { border-top-color: var(--neon-cyan); }
.admin-stat-card.asc-red    { border-top-color: var(--neon-red); }


/* ── Badge: kategori, author, warna per kategori ─────────────────────────── */

.badge-author {
  background: rgba(0,0,0,0.04);
  border-color: var(--border-hot);
  color: var(--text-muted);
  box-shadow: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: none;
}

.badge-category { /* dasar; warna spesifik dari .cat-* di bawah */ }

.cat-osint      { border-color: var(--cat-osint);     color: var(--cat-osint);     background: rgba(0,0,0,0.05); box-shadow: 0 0 8px rgba(0,0,0,0.05); }
.cat-web        { border-color: var(--cat-web);       color: var(--cat-web);       background: rgba(0,0,0,0.05);  box-shadow: 0 0 8px rgba(0,0,0,0.05); }
.cat-crypto     { border-color: var(--cat-crypto);    color: var(--cat-crypto);    background: rgba(0,0,0,0.05);box-shadow: 0 0 8px rgba(0,0,0,0.05); }
.cat-forensics  { border-color: var(--cat-forensics); color: var(--cat-forensics); background: rgba(0,0,0,0.05); box-shadow: 0 0 8px rgba(0,0,0,0.05); }
.cat-stego      { border-color: var(--cat-stego);     color: var(--cat-stego);     background: rgba(251, 146, 60, 0.1); box-shadow: 0 0 8px rgba(251,146,60,0.2); }
.cat-reveng     { border-color: var(--cat-reveng);    color: var(--cat-reveng);    background: rgba(244, 114, 182, 0.1);box-shadow: 0 0 8px rgba(244,114,182,0.2); }
.cat-misc       { border-color: var(--cat-misc);      color: var(--cat-misc);      background: rgba(0,0,0,0.05); box-shadow: 0 0 8px rgba(0,0,0,0.05); }

.chip {
  display: inline-block;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.7rem;
  padding: 0.1rem 0.6rem;
  letter-spacing: 0.5px;
}

/* ── Kartu challenge: kepala, kesulitan, footer, status ──────────────────── */

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-family: var(--font-main);
}
.card-author { color: var(--text-muted); }
.card-rating { color: var(--secondary-accent); white-space: nowrap; }

.card-difficulty {
  display: flex;
  gap: 4px;
  align-items: center;
}
.difficulty-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-soft);
  border: 1px solid var(--border-hot);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.difficulty-dot.fill {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
}
.card.solved .difficulty-dot.fill {
  background: var(--success);
  border-color: var(--success);
}

.status-indicator {
  font-size: 0.75rem;
  font-family: var(--font-header);
  letter-spacing: 0.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.card.solved .status-indicator { color: var(--success); }

/* Kartu terkunci: prasyarat belum selesai atau belum waktunya rilis. */
.card.locked {
  border-top-color: var(--border-hot);
  opacity: 0.72;
  cursor: not-allowed;
}
.card.locked:hover { transform: none !important; box-shadow: 0 15px 35px rgba(0,0,0,0.6) !important; }
.card.locked h3 { color: var(--text-muted); text-shadow: none; }
.lock-note {
  display: block;
  margin-top: 0.5rem;
  color: var(--secondary-accent);
  font-size: 0.75rem;
  font-family: var(--font-main);
}

.card-badges {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

/* Bilah persentase penyelesai. */
.solve-bar {
  height: 3px;
  background: var(--border-soft);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.solve-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--neon-cyan), var(--cat-crypto));
  border-radius: 2px;
}

/* Tombol bookmark di sudut kartu. */
.bookmark-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.35rem;
  min-width: 34px;
  min-height: 34px;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}
.bookmark-btn:hover { color: var(--secondary-accent); background: var(--surface-1); }

/* ── Skeleton loading ───────────────────────────────────────────────────── */

.skeleton-card {
  background: linear-gradient(135deg, rgba(15, 20, 32, 0.6) 0%, rgba(5, 8, 16, 0.8) 100%);
  border: 1px solid rgba(0,0,0,0.06);
  border-top: 3px solid var(--border-hot);
  border-radius: 16px;
  padding: 1.85rem;
  min-height: 210px;
}
.skeleton-line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 14px;
  background: linear-gradient(90deg,
      rgba(0,0,0,0.04) 25%,
      rgba(0,0,0,0.08) 50%,
      rgba(0,0,0,0.04) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.skeleton-line.s1 { width: 45%; height: 20px; }
.skeleton-line.s2 { width: 85%; }
.skeleton-line.s3 { width: 70%; }
.skeleton-line.s4 { width: 35%; margin-bottom: 0; }

@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Empty state ────────────────────────────────────────────────────────── */

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: rgba(10, 10, 15, 0.6);
  border: 1px dashed var(--border-soft);
  border-radius: 16px;
}
.empty-state .ei {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 1rem;
  opacity: 0.75;
}
.empty-state h3 {
  color: var(--primary-accent);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.empty-state p { color: var(--text-muted); margin: 0; }

.empty-solves, .empty-feedback {
  color: var(--text-muted);
  font-style: italic;
}

/* ── Modal challenge: label flag, umpan balik, guncang ───────────────────── */

.flag-label {
  display: block;
  color: var(--primary-accent);
  font-family: var(--font-header);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

/* Tanpa aturan ini, status "Verifying..." tidak pernah tampil karena
   #submission-feedback default display:none. */
#submission-feedback.loading {
  display: block;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--border-soft);
  color: var(--primary-accent);
}
#submission-feedback.info {
  display: block;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  text-transform: none;
  font-weight: 500;
  text-align: left;
}

/* Dipakai app.js saat flag kosong/salah — sebelumnya tidak ada keyframes-nya. */
.shake { animation: inputShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes inputShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

.fade-out {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal-content {
  max-height: calc(100svh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@supports (max-height: 100dvh) {
  .modal-content { max-height: calc(100dvh - 3rem); }
}
.modal-body-scroll { overflow-y: auto; }

#modal-description {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-main);
  max-height: 40vh;
  overflow-y: auto;
}

/* ── Hint ───────────────────────────────────────────────────────────────── */

.hint-section { margin: 1.25rem 0; }
.hint-section > h4 {
  color: var(--secondary-accent);
  font-size: 0.8rem;
  letter-spacing: 1px;
  margin-bottom: 0.6rem;
}
.hint-list { display: flex; flex-direction: column; gap: 0.6rem; }
.hint-item {
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--secondary-accent);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.hint-item .hint-name {
  font-family: var(--font-header);
  font-size: 0.8rem;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.hint-cost {
  background: rgba(255, 77, 109, 0.12);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
}
.hint-cost.free {
  background: rgba(17,17,17, 0.12);
  border-color: var(--success);
  color: var(--success);
}
.hint-body {
  flex-basis: 100%;
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  border-top: 1px dashed var(--border-soft);
  padding-top: 0.6rem;
  margin: 0;
}
.hint-unlock-btn {
  margin-left: auto;
  background: rgba(25, 25, 30, 0.9);
  border: 1px solid var(--secondary-accent);
  border-radius: 6px;
  color: var(--secondary-accent);
  cursor: pointer;
  font-family: var(--font-header);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  min-height: 34px;
  text-transform: uppercase;
}
.hint-unlock-btn:hover:not(:disabled) {
  background: var(--secondary-accent);
  color: #fff;
  
}
.hint-unlock-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Daftar penyelesai + first blood ────────────────────────────────────── */

.solver-section { margin: 1.25rem 0; }
.solver-section > h4 {
  color: var(--primary-accent);
  font-size: 0.8rem;
  letter-spacing: 1px;
  margin-bottom: 0.6rem;
}
.solver-list {
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.solver-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.solver-row:last-child { border-bottom: none; }
.solver-row .s-name { color: var(--text-primary); }
.solver-row .s-time { color: var(--text-muted); font-size: 0.72rem; }

.first-blood-tag {
  background: rgba(255, 77, 109, 0.15);
  border: 1px solid var(--neon-red);
  border-radius: 4px;
  color: var(--neon-red);
  font-family: var(--font-header);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 0.05rem 0.35rem;
  margin-left: 0.4rem;
}

/* ── Notifikasi: riwayat & item ─────────────────────────────────────────── */

.notif-history-title {
  color: var(--primary-accent);
  font-size: 1rem;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}
#notif-list { display: flex; flex-direction: column; gap: 0.6rem; }
.notif-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--neon-cyan);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.notif-item.sev-success { border-left-color: var(--success); }
.notif-item.sev-warning { border-left-color: var(--secondary-accent); }
.notif-item.sev-danger  { border-left-color: var(--neon-red); }
.notif-msg {
  flex: 1;
  color: var(--text-primary);
  font-size: 0.92rem;
  word-break: break-word;
  min-width: 0;
}
.notif-time {
  color: var(--text-muted);
  font-family: var(--font-main);
  font-size: 0.7rem;
  white-space: nowrap;
}

.divider {
  height: 1px;
  background: var(--border-hot);
  border: none;
  margin: 2rem 0 1.5rem;
}

/* ── Formulir admin: label wajib, petunjuk, aksi ─────────────────────────── */

.req { color: var(--neon-red); margin-left: 0.15rem; }

.hint-text {
  color: var(--text-muted);
  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 0.4rem;
}

.field-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: -0.75rem 0 1rem;
  min-height: 1.1em;
  text-align: left;
}
.field-hint.hint-ok  { color: var(--success); }
.field-hint.hint-bad { color: var(--danger); }

.form-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1rem;
}
.reset-btn { background: transparent; }

.input-disabled, .admin-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.5);
}
.textarea-large { min-height: 180px; }

.table-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.25rem;
}
.search-input { flex: 1; min-width: 200px; max-width: 420px; }

/* Wrapper tabel — TIDAK PERNAH ada sebelumnya, sehingga tabel admin dan
   scoreboard meluber keluar layar pada perangkat sempit tanpa cara menggulir. */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: 8px;
}
.table-wrapper table { min-width: 640px; }
.table-wrapper::-webkit-scrollbar { height: 8px; }
.table-wrapper::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); border-radius: 4px; }
.table-wrapper::-webkit-scrollbar-thumb { background: var(--border-hot); border-radius: 4px; }
.table-wrapper::-webkit-scrollbar-thumb:hover { background: var(--neon-cyan); }

/* Perbaikan: overflow:hidden pada Bagian 1 memotong tabel scoreboard. */
.scoreboard-page .sb-table-wrapper { overflow: visible; }
.scoreboard-page .sb-table-wrapper > .table-wrapper { overflow-x: auto; }

.admin-table th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }

.table-empty-msg, .table-loading-msg, .table-error-msg {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem 1rem !important;
  font-style: italic;
}
.table-error-msg { color: var(--danger); font-style: normal; }

/* ── Sel tabel bertema ──────────────────────────────────────────────────── */

.col-id       { color: var(--text-muted); font-family: var(--font-main); font-size: 0.8rem; white-space: nowrap; }
.col-title,
.col-challenge{ color: var(--text-primary); font-weight: 600; }
.col-author   { color: var(--text-muted); font-size: 0.82rem; }
.col-pts      { color: var(--secondary-accent); font-family: var(--font-header); font-weight: 700; white-space: nowrap; }
.col-score    { color: var(--secondary-accent); font-family: var(--font-header); font-weight: 700; text-align: right; white-space: nowrap; }
.col-time     { color: var(--text-muted); font-family: var(--font-main); font-size: 0.75rem; white-space: nowrap; }
.col-player   { color: var(--primary-accent); font-weight: 600; }
.col-rating   { white-space: nowrap; letter-spacing: -1px; }
.col-feedback { color: var(--text-primary); font-size: 0.85rem; max-width: 340px; word-break: break-word; }
.col-dash     { color: var(--text-muted); }
.col-admin    { color: var(--neon-red); font-weight: 700; }
.col-user     { color: var(--text-primary); font-weight: 600; }
.col-ip       { color: var(--text-muted); font-family: var(--font-main); font-size: 0.75rem; }

.role-badge {
  display: inline-block;
  border-radius: 4px;
  font-family: var(--font-header);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}
.badge-admin  { background: rgba(255, 77, 109, 0.15);  border: 1px solid var(--neon-red);        color: var(--neon-red); }
.badge-user   { background: rgba(0,0,0,0.06); border: 1px solid var(--neon-cyan);       color: var(--primary-accent); }
.badge-banned { background: rgba(120, 120, 120, 0.2);border: 1px solid var(--text-muted);      color: var(--text-muted); }
.badge-hidden { background: rgba(167, 139, 250, 0.15);border:1px solid var(--cat-crypto);      color: var(--cat-crypto); }

.s-mini {
  background: rgba(17,17,17, 0.1);
  border: 1px solid rgba(17,17,17, 0.35);
  border-radius: 4px;
  color: var(--success);
  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
}

/* ── Tombol generik yang dipakai JS ─────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(20, 20, 25, 0.9);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-header);
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.6rem 1.1rem;
  text-transform: uppercase;
  transition: all 0.2s ease;
  min-height: 40px;
}
.btn:hover { border-color: var(--neon-cyan); color: #fff; }
.btn-primary {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  color: #fff;
  font-weight: 700;
}
.btn-primary:hover { background: var(--ink); border-color: var(--ink); box-shadow: 0 4px 14px var(--border-hot); color: #fff; }
.btn-danger { background: rgba(255,77,109,0.12); border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; }
.btn:disabled, .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.72rem; min-height: 32px; }

.btn-edit, .btn-del, .btn-reset, .btn-ban, .btn-hide, .btn-role {
  min-height: 32px;
  margin-bottom: 0.25rem;
}
.btn-ban:hover  { background: var(--secondary-accent); color: #fff; border-color: var(--secondary-accent); }
.btn-hide:hover { background: var(--cat-crypto); color: #fff; border-color: var(--cat-crypto); }
.btn-role:hover { background: var(--cat-crypto); color: #fff; border-color: var(--cat-crypto); }

.row-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ── Alert: varian yang HILANG dari stylesheet lama ──────────────────────── */

/* Ini penyebab pesan error login tidak pernah terlihat: markup memakai
   `alert alert-error` sementara CSS hanya mendefinisikan `.alert.error`. */
.alert-error, .alert.error {
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid var(--danger);
  color: var(--danger);
}
.alert-success, .alert.success {
  background: rgba(17,17,17, 0.1);
  border: 1px solid var(--success);
  color: var(--success);
}
.alert-info, .alert.info {
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--neon-cyan);
  color: var(--primary-accent);
}
.alert-warning, .alert.warning {
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--secondary-accent);
  color: var(--secondary-accent);
}
/* Pesan di halaman auth tidak seragam ukurannya; normalkan agar rapi. */
.auth-card .alert {
  font-size: 0.82rem;
  text-align: left;
  line-height: 1.5;
  text-transform: none;
  margin-bottom: 1.25rem;
  padding: 0.8rem 1rem;
}

/* ── Halaman auth: penampil password & kekuatan ──────────────────────────── */

.auth-card form { text-align: left; }
.auth-card label {
  display: block;
  color: var(--primary-accent);
  font-family: var(--font-header);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.auth-card label span {
  color: var(--text-muted);
  font-family: var(--font-main);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.input-with-toggle { position: relative; }
.input-with-toggle .auth-input { padding-right: 3rem; }
.pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 46px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  border-radius: 8px;
}
.pw-toggle:hover { color: var(--primary-accent); }

.pw-strength {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: -0.75rem 0 1.25rem;
}
.pw-bar {
  flex: 1;
  height: 4px;
  background: var(--border-soft);
  border-radius: 2px;
  overflow: hidden;
}
.pw-bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width 0.25s ease, background 0.25s ease;
}
.pw-bar > i.lvl-0 { background: var(--danger); }
.pw-bar > i.lvl-1 { background: #6b6b6b; }
.pw-bar > i.lvl-2 { background: var(--secondary-accent); }
.pw-bar > i.lvl-3 { background: #191919; }
.pw-bar > i.lvl-4 { background: var(--success); }
.pw-label {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-family: var(--font-main);
  min-width: 96px;
  text-align: right;
}

/* ── Scoreboard: kolom solved, nama, banner freeze ──────────────────────── */

.sb-username { color: var(--text-primary); font-weight: 600; }
.sb-solved { color: var(--text-muted); font-family: var(--font-main); font-size: 0.82rem; white-space: nowrap; }
.sb-solved-count { color: var(--success); font-weight: 700; }

.freeze-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--cat-osint);
  border-left: 4px solid var(--cat-osint);
  border-radius: 10px;
  color: var(--cat-osint);
  font-family: var(--font-header);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.25rem;
}

.countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--secondary-accent);
  border-radius: 8px;
  color: var(--secondary-accent);
  font-family: var(--font-header);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 0.35rem 0.8rem;
}
.countdown.urgent {
  border-color: var(--neon-red);
  color: var(--neon-red);
  background: rgba(255, 77, 109, 0.12);
  animation: urgentPulse 1.6s ease-in-out infinite;
}
@keyframes urgentPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 77, 109, 0); }
  50%      { box-shadow: 0 0 14px rgba(255, 77, 109, 0.6); }
}

/* ── Profil pemain & badge ──────────────────────────────────────────────── */

.profile-page { width: 90%; max-width: 1100px; margin: 0 auto; padding: 2rem 0; }

.profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  background: var(--bg-darker);
  border: 1px solid var(--neon-cyan);
  border-top: 3px solid var(--neon-cyan);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}
.profile-avatar {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.05);
  border: 2px solid var(--neon-cyan);
  border-radius: 50%;
  color: var(--primary-accent);
  font-family: var(--font-header);
  font-size: 2rem;
  font-weight: 900;
}
.profile-name { color: var(--primary-accent); font-size: 1.6rem; margin: 0 0 0.25rem; }
.profile-sub  { color: var(--text-muted); font-size: 0.85rem; }

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}
.badge-card {
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 1.1rem;
  text-align: center;
  opacity: 0.45;
  filter: grayscale(1);
  transition: all 0.25s ease;
}
.badge-card.badge-earned {
  opacity: 1;
  filter: none;
  border-color: var(--secondary-accent);
  background: rgba(0,0,0,0.03);
}
.badge-card .b-icon { font-size: 2rem; line-height: 1; display: block; margin-bottom: 0.5rem; }
.badge-card .b-name {
  color: var(--text-primary);
  font-family: var(--font-header);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 0.3rem;
}
.badge-card .b-desc { color: var(--text-muted); font-size: 0.72rem; line-height: 1.45; }

/* ── Toast (pengganti alert()) ───────────────────────────────────────────── */

.toast-stack {
  position: fixed;
  right: max(1rem, var(--safe-r));
  bottom: calc(1rem + var(--safe-b));
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: #ffffff;
  border: 1px solid var(--neon-cyan);
  border-left: 4px solid var(--neon-cyan);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
  color: var(--text-primary);
  font-size: 0.88rem;
  line-height: 1.45;
  padding: 0.85rem 1rem;
  animation: toastIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.toast.leaving { animation: toastOut 0.24s ease forwards; }
.toast.t-success { border-color: var(--success);          border-left-color: var(--success); }
.toast.t-error   { border-color: var(--danger);           border-left-color: var(--danger); }
.toast.t-warning { border-color: var(--secondary-accent); border-left-color: var(--secondary-accent); }
.toast .t-icon { flex: 0 0 auto; font-size: 1rem; line-height: 1.4; }
.toast .t-msg  { flex: 1; min-width: 0; word-break: break-word; }
.toast .t-close {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 1rem; line-height: 1;
  padding: 0.15rem 0.3rem; min-width: 28px; min-height: 28px;
}
.toast .t-close:hover { color: var(--danger); }

@keyframes toastIn  { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(24px); } }

/* ── Kesehatan sistem (panel admin) ─────────────────────────────────────── */

.health-list { display: flex; flex-direction: column; gap: 0.6rem; }
.health-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--text-muted);
  border-radius: 8px;
  padding: 0.8rem 1rem;
}
.health-item.lvl-ok    { border-left-color: var(--success); }
.health-item.lvl-warn  { border-left-color: var(--secondary-accent); }
.health-item.lvl-error { border-left-color: var(--danger); background: rgba(255, 77, 109, 0.06); }
.health-item .h-title {
  color: var(--text-primary);
  font-family: var(--font-header);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.health-item .h-detail { color: var(--text-muted); font-size: 0.78rem; word-break: break-word; }

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.setting-row { display: flex; flex-direction: column; gap: 0.4rem; }
.setting-row label { margin-bottom: 0.25rem; }
.switch-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
}
.switch-row input[type="checkbox"] {
  width: 20px; height: 20px;
  accent-color: var(--neon-cyan);
  cursor: pointer;
  flex: 0 0 auto;
}
.switch-row .sw-label {
  color: var(--text-primary);
  font-family: var(--font-header);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.f-brand { color: var(--primary-accent); font-weight: 700; }
.f-sep    { color: var(--border-hot); margin: 0 0.6rem; }

/* ── Bilah pencarian & pengurutan challenge ─────────────────────────────── */

.board-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.board-tools .search-wrap { position: relative; flex: 1; min-width: 190px; }
.board-tools .search-wrap input {
  width: 100%;
  background: rgba(10, 10, 15, 0.7);
  border: 1px solid var(--border-hot);
  border-radius: 8px;
  color: var(--primary-accent);
  font-family: var(--font-main);
  font-weight: 600;
  padding: 0.65rem 1rem 0.65rem 2.3rem;
  min-height: 44px;
}
.board-tools .search-wrap::before {
  content: '🔍';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  pointer-events: none;
}
.board-tools select {
  background: rgba(25, 25, 30, 0.95);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-header);
  font-size: 0.8rem;
  padding: 0.55rem 0.8rem;
  min-height: 44px;
  cursor: pointer;
  text-transform: uppercase;
}
.board-tools select:hover { border-color: var(--neon-cyan); }

/* ============================================================================
   RESPONSIF
   ----------------------------------------------------------------------------
   Sebelumnya hanya ada SATU breakpoint (768px) yang menangani grid dan header.
   Di bawah ~560px header menumpuk tak terkendali, filter 8 tombol memenuhi
   layar, tabel terpotong, dan modal melebihi tinggi viewport tanpa bisa digulir.
   ========================================================================== */

/* Tablet lebar / laptop kecil */
@media (max-width: 1100px) {
  .container, .scoreboard-page, .admin-page, .profile-page { width: 94%; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.75rem; }
  header { padding: 1rem 1.25rem; }
  nav { gap: 1rem; }
  nav a { font-size: 0.82rem; padding: 0.45rem 0.35rem; }
}

/* Tablet potret */
@media (max-width: 900px) {
  .stats-bar { flex-wrap: wrap; }
  .stat-item { flex: 1 1 calc(50% - 0.75rem); min-width: 140px; }
  .admin-card { padding: 1.75rem; }
  .chart-container { height: 260px; }
  .modal-content, .edit-modal { max-width: 92vw; }
}

/* Mobile: header jadi menu yang bisa dibuka-tutup */
@media (max-width: 768px) {
  header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    text-align: left;
  }
  .logo { flex: 1; min-width: 0; }
  .logo h1 { font-size: 1.15rem; }
  .logo .subtitle { font-size: 0.68rem; }

  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; order: 3; }

  /* Nav disembunyikan sampai tombol menu ditekan. */
  nav {
    order: 5;
    flex-basis: 100%;
    display: none;
  }
  nav.open { display: block; }
  nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--border-soft);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
  }
  nav li { width: 100%; }
  nav a {
    display: block;
    padding: 0.85rem 0.5rem;   /* target sentuh nyaman */
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }

  .player-badge {
    order: 4;
    flex-basis: 100%;
    justify-content: space-between;
    font-size: 0.8rem;
    padding: 0.45rem 0.75rem;
  }

  .container { padding: 1.25rem 0; }
  .section-header { flex-wrap: wrap; gap: 0.6rem; }
  .section-title { font-size: 1.3rem; }

  /* Filter kategori jadi gulir horizontal, bukan menumpuk berbaris-baris. */
  .category-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0.85rem 1rem;
    gap: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .category-filter::-webkit-scrollbar { display: none; }
  .filter-label { display: none; }
  .filter-btn { flex: 0 0 auto; padding: 0.6rem 0.9rem; font-size: 0.78rem; min-height: 40px; }

  .grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .card { padding: 1.35rem; }
  /* Tilt 3D dimatikan di layar sentuh: transform tersangkut setelah tap
     karena tidak ada event mouseleave di perangkat sentuh. */
  .card:hover { transform: none !important; }
  .card h3, .card .badge, .card .card-desc, .card .status-indicator { transform: none; }

  .modal { align-items: flex-end; }
  .modal-content {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 1.5rem 1.25rem calc(1.5rem + var(--safe-b));
    max-height: 92svh;
  }
  @supports (max-height: 100dvh) {
    .modal-content { max-height: 92dvh; }
  }
  .modal-header h2 { font-size: 1.25rem; }
  .modal-meta { flex-wrap: wrap; gap: 0.5rem; }

  /* Input flag jadi dua baris agar tombol tidak tertutup keyboard virtual. */
  .flag-submission { flex-direction: column; }
  .flag-submission .submit-btn { width: 100%; padding: 0.9rem; }
  #flag-input { width: 100%; font-size: 1rem; }  /* >=16px mencegah iOS auto-zoom */

  .tab-nav { gap: 0.5rem; padding-bottom: 0.75rem; -webkit-overflow-scrolling: touch; }
  .tab-btn { flex: 0 0 auto; font-size: 0.75rem; padding: 0.6rem 0.85rem; min-height: 40px; }

  .admin-card { padding: 1.25rem; }
  .admin-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .form-grid { grid-template-columns: 1fr; gap: 1rem; }
  .admin-form-group.full, .span-2 { grid-column: span 1; }

  .sb-title { font-size: 1.5rem; }
  .chart-container { height: 230px; }
  .scoreboard-page .sb-table-wrapper { padding: 0.5rem; }

  #notifications-banner {
    left: max(0.75rem, var(--safe-l));
    right: max(0.75rem, var(--safe-r));
    bottom: calc(0.75rem + var(--safe-b));
    max-width: none;
  }

  .toast-stack { left: max(0.75rem, var(--safe-l)); max-width: none; }

  footer { padding: 2rem 1rem calc(2rem + var(--safe-b)); font-size: 0.82rem; }
  .f-sep { margin: 0 0.35rem; }

  .profile-head { padding: 1.35rem; gap: 1rem; }
  .profile-avatar { width: 58px; height: 58px; flex-basis: 58px; font-size: 1.5rem; }
  .badge-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }
}

/* Ponsel kecil */
@media (max-width: 480px) {
  .logo h1 { font-size: 1rem; }
  .stat-item { flex: 1 1 100%; padding: 1rem; }
  .stat-num, .asc-num { font-size: 1.85rem; }
  .stat-label, .asc-label { font-size: 0.75rem; }
  .admin-stat-grid { grid-template-columns: 1fr; }
  .admin-title, .sb-title { font-size: 1.25rem; }
  .section-title { font-size: 1.1rem; }
  .card { padding: 1.1rem; border-radius: 12px; }
  .card h3 { font-size: 1.05rem; }
  .card-desc { font-size: 0.85rem; }
  .badge { font-size: 0.68rem; padding: 0.3rem 0.6rem; }
  .solved-ribbon { font-size: 0.62rem; padding: 3px 34px; right: -32px; }
  .table-wrapper table { min-width: 520px; }
  .modal-content, .edit-modal { padding: 1.25rem 1rem calc(1.25rem + var(--safe-b)); }
  .chart-container { height: 200px; }
  .auth-card { padding: 2rem 1.35rem; border-radius: 14px; }
  .auth-card h2 { font-size: 1.5rem; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions > * { width: 100%; }
  .row-actions { flex-direction: column; align-items: stretch; }
  .row-actions > button { width: 100%; margin-right: 0; }
  .hint-item { flex-direction: column; align-items: stretch; }
  .hint-unlock-btn { margin-left: 0; width: 100%; }
  .board-tools { flex-direction: column; align-items: stretch; }
  .board-tools select, .board-tools .search-wrap { width: 100%; max-width: none; }
}

/* Scoreboard di layar sangat sempit (<360px): tabel min-width 520px dipaksa
   scroll horizontal oleh .table-wrapper, jadi yang kritis adalah kepadatan sel.
   Padatkan padding & ukuran font agar kolom tetap terbaca tanpa zoom. */
@media (max-width: 359px) {
  .sb-table th, .sb-table td { padding: 0.55rem 0.45rem; font-size: 0.78rem; }
  .sb-table th { font-size: 0.68rem; letter-spacing: 0.5px; }
  .col-rank { width: auto; min-width: 44px; }
  .sb-score { white-space: nowrap; font-size: 0.75rem; }
  .badge-you { margin-left: 0.25rem; font-size: 0.6rem; padding: 0.1rem 0.3rem; }
  .sb-solved { white-space: nowrap; }
  /* medal + angka rank cukup, teks panjang tidak ada di kolom ini */
  .rank-1, .rank-2, .rank-3 { font-size: 0.95rem; }
  .chart-container { height: 170px; }
}

/* Layar sangat pendek dalam mode lanskap: kurangi padding vertikal
   supaya modal dan kartu auth tetap muat tanpa terpotong. */
@media (max-height: 520px) and (orientation: landscape) {
  header { position: static; }
  .auth-page-body { align-items: flex-start; padding: 1rem 0; }
  .auth-card { padding: 1.35rem; }
  .auth-card h1 { font-size: 1.15rem; }
  .auth-card h2 { font-size: 1.15rem; margin-bottom: 1rem; }
  .auth-input { margin-bottom: 0.85rem; }
  .modal-content { max-height: 96svh; padding: 1rem; }
  #modal-description { max-height: 26vh; }
}

/* Perangkat sentuh (tanpa mouse presisi): matikan tilt & efek hover
   yang tersangkut, dan besarkan target ketuk. */
@media (hover: none), (pointer: coarse) {
  .card:hover { transform: none !important; box-shadow: 0 15px 35px rgba(0,0,0,0.6) !important; }
  .card:hover::after { opacity: 0; }
  .auth-card:hover { transform: none; }
  .stat-item:hover, .admin-stat-card:hover { transform: none; box-shadow: none; }
  .sb-table tr:hover td, .chall-table tr:hover td { background: transparent; }
  button, .filter-btn, .tab-btn, nav a, .btn { min-height: 44px; }
  .btn-sm, .btn-edit, .btn-del, .btn-reset { min-height: 38px; }
}

/* Cetak: buang latar gelap agar scoreboard bisa dicetak/di-PDF. */
@media print {
  #matrix-canvas, .bg-orbs, header nav, .nav-toggle, .fx-btn,
  .category-filter, .board-tools, footer, .toast-stack, #notifications-banner { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .sb-table th, .sb-table td, .chall-table th, .chall-table td { color: #000 !important; border-color: #999 !important; }
  .sb-table th { background: #eee !important; }
  .scoreboard-page .sb-table-wrapper { border-color: #999 !important; background: #fff !important; }
  .sb-title, .section-title { color: #000 !important; text-shadow: none !important; }
  a { color: #000 !important; text-decoration: underline; }
}

/* Tombol "Tambah Challenge" — varian hijau dari .admin-btn. */
.admin-btn.add-btn {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.admin-btn.add-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 4px 14px rgba(17,17,17, 0.4);
}

/* Lapisan kilau (glare) mengikuti pointer — memperkuat kesan 3D pada kartu.
   Posisi diisi oleh app.js lewat custom property, jadi tidak ada penulisan
   style yang memaksa reflow. */
.card {
  --glare-x: 50%;
  --glare-y: 50%;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(circle 220px at var(--glare-x) var(--glare-y),
              rgba(0,0,0,0.04), transparent 65%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover::before { opacity: 1; }
}
.card.locked::before { display: none; }
/* Konten kartu harus di atas lapisan kilau. */
.card > * { position: relative; z-index: 2; }
.card .solved-ribbon { z-index: 10; }

/* Slot tombol bookmark: melayang di sudut kanan atas kartu, di bawah ribbon
   SOLVED agar keduanya tidak bertumpuk. */
.card-bookmark-slot {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
}
.card.solved .card-bookmark-slot { top: 2.6rem; }

/* --- 3D Enhancements --- */
.auth-card {
    animation: card3DEntrance 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    transform-style: preserve-3d;
}
@keyframes card3DEntrance { 
    from { transform: perspective(1000px) rotateY(-15deg) rotateX(5deg) scale(0.9); opacity: 0; } 
    to { transform: perspective(1000px) rotateY(0) rotateX(0) scale(1); opacity: 1; } 
}
.auth-card:hover {
    transform: perspective(1000px) rotateY(5deg) rotateX(2deg) translateY(-5px);
}
.auth-input {
    transform-style: preserve-3d;
    transition: transform 0.3s;
}
.auth-input:focus {
    transform: translateZ(5px);
    box-shadow: 0 5px 15px var(--border-hot);
}
.auth-btn {
    transform-style: preserve-3d;
    box-shadow: 0 4px 0 var(--border-hot), 0 5px 15px rgba(0,0,0,0.5);
    transition: transform 0.2s, box-shadow 0.2s;
}
.auth-btn:hover {
    transform: translateY(-3px) translateZ(5px);
    box-shadow: 0 7px 0 var(--border-hot), 0 10px 20px var(--border-hot);
}
.auth-btn:active {
    transform: translateY(1px) translateZ(0);
    box-shadow: 0 1px 0 var(--border-hot), 0 2px 5px rgba(0,0,0,0.5);
}

body::before {
    content: '';
    position: fixed; top: 20%; left: 15%; width: 60px; height: 60px;
    border: 2px solid var(--ink); background: rgba(0,0,0,0.05);
    animation: ctfFloat1 15s linear infinite; z-index: -1; pointer-events: none;
}
body::after {
    content: '';
    position: fixed; bottom: 20%; right: 15%; width: 40px; height: 40px;
    border: 2px solid var(--neon-red); background: rgba(255,77,109,0.1);
    transform: rotate(45deg);
    animation: ctfFloat2 12s linear infinite reverse; z-index: -1; pointer-events: none;
}
@keyframes ctfFloat1 {
    0% { transform: perspective(1000px) rotateX(0) rotateY(0) translateZ(-50px) translateY(0); }
    100% { transform: perspective(1000px) rotateX(360deg) rotateY(180deg) translateZ(-50px) translateY(-100vh); }
}
@keyframes ctfFloat2 {
    0% { transform: perspective(1000px) rotateX(0) rotateY(0) translateZ(-100px) translateY(0); }
    100% { transform: perspective(1000px) rotateX(-360deg) rotateY(-180deg) translateZ(-100px) translateY(-100vh); }
}
.auth-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(125deg, transparent 20%, rgba(0,0,0,0.03) 40%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.03) 60%, transparent 80%);
    background-size: 200% 200%;
    animation: holoShimmer 6s linear infinite;
    pointer-events: none; border-radius: inherit; z-index: 10;
}
@keyframes holoShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.auth-card::after {
    content: ''; position: absolute; inset: -10px;
    background: rgba(0,0,0,0.5); filter: blur(15px);
    transform: translateZ(-20px); z-index: -1; pointer-events: none;
}

/* ============================================
   Locked CySec BRANDING ENHANCEMENTS
   ============================================ */

/* Animated gradient border on focused elements */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Enhanced card hover glow */
.card:hover {
  border-color: var(--ink);
  transform: translateY(-8px);
}

/* Auth card improvements */
.auth-card {
  background: rgba(10, 10, 15, 0.85);
  
  -webkit-
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0,0,0,0.05);
}

/* Auth input glow on focus */
.auth-input:focus {
  border-color: var(--neon-cyan);
  background: rgba(0, 0, 0, 0.95);
}

/* Auth button pulse animation */
.auth-btn {
  position: relative;
  overflow: hidden;
}

.auth-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(0,0,0,0.05) 50%, transparent 70%);
  animation: btn-shimmer 3s ease-in-out infinite;
}

@keyframes btn-shimmer {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

/* Stats bar glow animation */
.stat-item {
  position: relative;
  overflow: hidden;
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  animation: stat-shimmer 3s ease-in-out infinite;
}

@keyframes stat-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Category filter enhanced */
.filter-btn.active {
  background: linear-gradient(135deg, var(--neon-cyan), var(--border-soft));
  color: #fff;
  border-color: var(--neon-cyan);
  font-weight: 700;
  text-shadow: none;
}

/* Enhanced modal */
.modal-content {
  background: rgba(10, 10, 15, 0.95) !important;
  
  -webkit-
  border: 1px solid var(--border-hot) !important;
  box-shadow: 0 30px 60px rgba(0,0,0,0.08) !important;
}

/* Scoreboard enhancements */
.sb-table tbody tr:hover {
  background: rgba(0,0,0,0.05) !important;
}

.row-me {
  background: rgba(0,0,0,0.05) !important;
  border-left: 3px solid var(--neon-cyan) !important;
}

/* Pulse animation for live elements */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px var(--border-hot); }
  50% { box-shadow: 0 0 20px var(--border-hot), 0 0 40px var(--border-soft); }
}

.player-score {
  animation: pulse-glow 3s ease-in-out infinite;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Footer branding enhancement */
footer {
  background: var(--surface-2) !important;
  
  border-top: 1px solid var(--border-line);
}

.f-brand {
}

/* Profile page glow */
.profile-avatar {
  border: 2px solid var(--neon-cyan) !important;
}

/* Badge card improvements */
.badge-earned {
  border-color: var(--neon-yellow) !important;
}

.badge-earned .b-icon {
  filter: drop-shadow(0 0 8px var(--neon-yellow));
}
        /* --- GLOBAL RESPONSIVE FIXES --- */
        html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
        *, *:before, *:after { box-sizing: border-box; }
        img, video, iframe { max-width: 100%; height: auto; }
        canvas { max-width: 100%; }
        @media (max-width: 1024px) {
            section { padding-left: 5% !important; padding-right: 5% !important; }
            .features-grid, .nodes-grid, .grid-container, .card-container { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 20px !important; }
        }
        @media (max-width: 768px) {
            .hero h1, h1 { font-size: clamp(1.8rem, 8vw, 2.5rem) !important; }
            h2, .section-title { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
            h3 { font-size: clamp(1.2rem, 5vw, 1.5rem) !important; }
            p, a, span { font-size: 1rem; }
            .features-grid, .nodes-grid, .grid-container, .card-container { grid-template-columns: 1fr !important; }
            section { padding-left: 15px !important; padding-right: 15px !important; }
            .footer-content { flex-direction: column !important; text-align: center; gap: 20px; }
            .footer-section { width: 100% !important; }
        }
        @media (min-width: 1400px) {
            .features-grid, .nodes-grid, .grid-container, .card-container { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important; }
        }

/* Enhanced card hover effects */
.card:hover {
    border-color: var(--primary-accent);
}

/* Smooth page transitions */
.container, main {
    animation: fadeInUp 0.4s ease-out;
}

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

/* Enhanced scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--primary-accent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--secondary-accent); }

/* Tooltip animations */
[title] { position: relative; }

/* Better focus styles for accessibility */
*:focus-visible {
    outline: 2px solid var(--secondary-accent);
    outline-offset: 2px;
}

/* Loading skeleton animation */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, rgba(0,0,0,0.05) 50%, var(--bg-card) 75%);
    background-size: 400px 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* Enhanced Navigation for many items */
header nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    justify-content: center;
}
header nav ul li a {
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
}
@media (max-width: 1400px) {
    header nav ul li a {
        font-size: 0.75rem;
        padding: 0.3rem 0.4rem;
    }
}
@media (max-width: 768px) {
    #main-nav.active ul {
        display: flex;
        flex-direction: column;
        max-height: 80vh;
        overflow-y: auto;
    }
}


/* ============================================================================
   SIGNATURE — Scoreboard "live feed" (Terminal Classic overhaul)
   Rank #1 diberi treatment CRT halus + indikator LIVE berdenyut.
   Perubahan posisi baris di-flash sekali oleh app.js via class .rank-move.
   ============================================================================ */
.sb-table tr:first-child .sb-rank { position: relative; }
.sb-table tbody tr:first-child {
  background: linear-gradient(90deg, var(--phosphor-dim), transparent 60%);
}
.sb-live-dot {
  display: inline-block; width: 8px; height: 8px; margin-right: 6px;
  border-radius: 50%; background: var(--primary-accent);
  animation: lcs-pulse 1.6s infinite;
}
@keyframes lcs-pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
@media (prefers-reduced-motion: reduce) { .sb-live-dot { animation: none; } }

tr.rank-move td { animation: rank-flash 1.2s ease-out 1; }
@keyframes rank-flash {
  0% { background: rgba(17,17,17,.22); }
  100% { background: transparent; }
}

/* Signature — submit flag "decrypt" scramble (app.js men-trigger class) */
.flag-input-decrypting { color: var(--primary-accent); letter-spacing: 1px; }

/* Empty state sebagai ajakan, bukan kosong */
.table-empty-msg, .notif-loading-msg { color: var(--text-muted); font-style: normal; }

/* Signature — offline page: caret blink ala terminal (hormati reduced-motion) */
.auth-card .caret { color: var(--primary-accent); animation: caretBlink 1.1s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .auth-card .caret { animation: none; } }