:root {
  /* Game-like dark theme — inspired by mobile MMO HUD */
  --bg: #0a0a14;
  --panel: rgba(15, 23, 42, 0.72);
  --panel-solid: #1a1a2e;
  --border: rgba(252, 211, 77, 0.18);
  --text: #f8fafc;
  --muted: #94a3b8;
  --soft: rgba(255, 255, 255, 0.06);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 0 0 1px rgba(252, 211, 77, 0.15) inset;

  --gold: #fbbf24;
  --gold-bright: #fde68a;
  --gold-deep: #b45309;
  --gold-gradient: linear-gradient(135deg, #f59e0b 0%, #fde68a 50%, #d97706 100%);

  --serpier: #14b8a6;
  --nocturne: #60a5fa;
  --feyralis: #fbbf24;

  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;

  font-family: "IBM Plex Sans Thai", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(168, 85, 247, 0.18), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(251, 191, 36, 0.10), transparent 55%),
    radial-gradient(ellipse at 100% 0%, rgba(20, 184, 166, 0.10), transparent 50%),
    linear-gradient(180deg, #050510 0%, #0a0a1a 50%, #14141f 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
}

/* Faint star particles overlay on background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 25%, rgba(252, 211, 77, 0.4) 50%, transparent 100%),
    radial-gradient(1px 1px at 65% 40%, rgba(255, 255, 255, 0.4) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 70%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
    radial-gradient(1px 1px at 25% 80%, rgba(196, 181, 253, 0.5) 50%, transparent 100%),
    radial-gradient(1px 1px at 90% 30%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  opacity: 0.6;
  z-index: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10, 10, 20, 0.95), rgba(10, 10, 20, 0.7));
  border-bottom: 1px solid rgba(252, 211, 77, 0.15);
  backdrop-filter: blur(16px) saturate(180%);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(252, 211, 77, 0.4) 50%, transparent 100%);
}

.brand {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1.5px;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(252, 211, 77, 0.4);
}

.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tab {
  appearance: none;
  border: 1px solid rgba(252, 211, 77, 0.18);
  background: rgba(15, 23, 42, 0.6);
  color: rgba(248, 250, 252, 0.8);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  position: relative;
}
.tab:hover {
  background: rgba(252, 211, 77, 0.1);
  border-color: rgba(252, 211, 77, 0.35);
  color: var(--gold-bright);
}
.tab.active {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.5), rgba(252, 211, 77, 0.3));
  color: var(--gold-bright);
  border-color: var(--gold);
  box-shadow:
    0 0 16px rgba(252, 211, 77, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-weight: 600;
}

.identity-chip {
  appearance: none;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(252, 211, 77, 0.25);
  background: rgba(15, 23, 42, 0.7);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
}
.identity-chip:hover { background: rgba(252, 211, 77, 0.12); border-color: var(--gold); }

/* Avatar-only variant (when logged in) — circular portrait */
.identity-chip-avatar {
  padding: 0;
  border: none;
  background: transparent;
  margin-left: 8px;
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
}
.identity-chip-avatar:hover { background: transparent; }
.identity-chip-avatar:hover .identity-avatar {
  box-shadow:
    0 0 0 2.5px var(--gold-bright),
    0 0 18px rgba(252, 211, 77, 0.6);
  transform: scale(1.05);
}
.identity-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2.5px solid var(--gold);
  background: radial-gradient(ellipse at top, rgba(252, 211, 77, 0.18), rgba(0, 0, 0, 0.4));
  box-shadow:
    0 0 12px rgba(252, 211, 77, 0.35),
    inset 0 0 8px rgba(252, 211, 77, 0.15);
  object-fit: cover;
  transition: transform 0.2s, box-shadow 0.2s;
  display: block;
}
.identity-house-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50%;
  border: 2px solid #0a0a14;
  box-shadow: 0 0 8px currentColor;
}
.identity-admin-crown {
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 18px;
  filter: drop-shadow(0 0 4px rgba(252, 211, 77, 0.8));
  pointer-events: none;
}
.identity-chip-avatar.admin .identity-avatar {
  border-color: var(--gold-bright);
  box-shadow:
    0 0 0 1px rgba(252, 211, 77, 0.3),
    0 0 20px rgba(252, 211, 77, 0.5),
    inset 0 0 8px rgba(252, 211, 77, 0.2);
}

/* Old style (kept for "logged-in" non-admin if needed; unused now) */
.identity-chip.logged-in {
  background: linear-gradient(135deg, rgba(6, 95, 70, 0.6), rgba(15, 23, 42, 0.7));
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}
.role-badge {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(253, 230, 138, 0.2);
  color: #fde68a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* === Modal overlay (identity picker) === */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}
.modal-card {
  background: var(--panel);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 {
  margin: 0;
  font-size: 17px;
  font-family: "Cinzel", serif;
}
.modal-close {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
  width: 32px; height: 32px;
  border-radius: 8px;
}
.modal-close:hover { background: var(--soft); }
.modal-search {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: rgba(15, 23, 42, 0.6);
  color: var(--text);
}
.modal-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.18); }
.modal-list {
  overflow-y: auto;
  padding: 8px;
  flex: 1;
}
.id-row {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.id-row:hover { background: var(--soft); }
.id-row-main { display: flex; flex-direction: column; gap: 2px; }
.id-row-name { font-size: 14px; font-weight: 500; color: var(--text); }
.id-row-meta { font-size: 11px; color: var(--muted); }

/* === Login form === */
.login-card { max-width: 420px; }
.login-form { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.login-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text); }
.login-form input {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: rgba(15, 23, 42, 0.6);
  color: var(--text);
}
.login-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.18); }
.login-error {
  background: rgba(127, 29, 29, 0.3);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
}
.login-submit {
  appearance: none;
  margin-top: 4px;
  padding: 12px 18px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--gold-gradient);
  color: #422006;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 0 16px rgba(252, 211, 77, 0.3);
}
.login-submit:hover:not(:disabled) { filter: brightness(1.1); }
.login-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.login-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.login-hint code {
  background: var(--soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.container {
  padding: 0 28px 40px;
  position: relative;
  z-index: 1;
}

/* === Player HUD === */
.player-hud {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 28px 0;
  padding: 14px 18px;
  background:
    radial-gradient(ellipse at left, rgba(252, 211, 77, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(20, 20, 40, 0.85), rgba(10, 10, 20, 0.92));
  border: 1px solid rgba(252, 211, 77, 0.3);
  border-radius: 14px;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.player-hud:hover {
  border-color: rgba(252, 211, 77, 0.6);
  box-shadow: 0 0 24px rgba(252, 211, 77, 0.15);
}

.hud-portrait {
  position: relative;
  flex-shrink: 0;
}
.hud-portrait img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(0, 0, 0, 0.4);
  box-shadow:
    0 0 16px rgba(252, 211, 77, 0.4),
    inset 0 0 8px rgba(252, 211, 77, 0.2);
}
.hud-rank-badge {
  position: absolute;
  bottom: -4px;
  right: -6px;
  background: var(--gold-gradient);
  color: #422006;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1.5px solid #1a1a2e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.3px;
}

.hud-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hud-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hud-name {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(252, 211, 77, 0.3);
  letter-spacing: 0.4px;
}
.hud-house {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  letter-spacing: 0.5px;
}
.hud-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.hud-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(248, 250, 252, 0.7);
  min-width: 0;
}
.hud-stat-icon { font-size: 14px; flex-shrink: 0; }
.hud-stat-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  min-width: 30px;
}
.hud-stat-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s;
}
.hud-stat-fill.bucket-learn  { background: linear-gradient(90deg, #1e40af, #60a5fa); }
.hud-stat-fill.bucket-help   { background: linear-gradient(90deg, #9d174d, #f472b6); }
.hud-stat-fill.bucket-effort { background: linear-gradient(90deg, #9a3412, #fb923c); }
.hud-stat-fill.bucket-team   { background: linear-gradient(90deg, #065f46, #34d399); }
.hud-stat-val {
  font-family: "Cinzel", "Inter", monospace;
  font-weight: 700;
  color: #fff;
  min-width: 28px;
  text-align: right;
}

.hud-score {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-left: 16px;
  border-left: 1px solid rgba(252, 211, 77, 0.2);
}
.hud-score-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.hud-score-val {
  font-family: "Cinzel", "Inter", monospace;
  font-weight: 700;
  font-size: 28px;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.5px;
  text-shadow: 0 0 24px rgba(252, 211, 77, 0.3);
}

@media (max-width: 640px) {
  .player-hud {
    margin: 12px 14px 0;
    padding: 10px 12px;
    gap: 10px;
  }
  .hud-portrait img { width: 50px; height: 50px; }
  .hud-rank-badge { font-size: 10px; padding: 1px 6px; }
  .hud-name { font-size: 14px; }
  .hud-stats { grid-template-columns: repeat(2, 1fr); gap: 4px 10px; }
  .hud-stat { font-size: 10px; }
  .hud-stat-icon { font-size: 12px; }
  .hud-score-val { font-size: 22px; }
  .hud-score { padding-left: 10px; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(160%);
  position: relative;
  margin-top: 18px;
}
.panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(252, 211, 77, 0.4), transparent 30%, transparent 70%, rgba(252, 211, 77, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.panel-head h1 {
  margin: 0 0 6px;
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(252, 211, 77, 0.3);
}

.muted { color: var(--muted); font-size: 13px; margin: 0; }

.house-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.house-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  background: rgba(20, 20, 40, 0.55);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  backdrop-filter: blur(10px);
}
.house-card:hover {
  transform: translateY(-3px);
  border-color: rgba(252, 211, 77, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(252, 211, 77, 0.15);
}
.house-card.locked { opacity: 0.78; }
.house-card.locked .house-card-score { filter: blur(0.6px); }
.house-card-head-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.house-card-lock {
  font-size: 14px;
  background: rgba(0, 0, 0, 0.5);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(252, 211, 77, 0.3);
}

.house-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.house-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.8px;
  color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(252, 211, 77, 0.3);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #888;
  display: inline-block;
  box-shadow: 0 0 8px currentColor;
}

.rank-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-bright);
  border: 1px solid rgba(252, 211, 77, 0.3);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(252, 211, 77, 0.08);
  letter-spacing: 0.4px;
}

.house-card-score {
  font-size: 60px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 2px;
  line-height: 1.1;
  font-family: "Cinzel", "Inter", "IBM Plex Sans Thai", sans-serif;
  text-shadow: 0 0 24px currentColor;
}

.house-card-label {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-top: -8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.house-card-sub {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  opacity: 0.85;
}
.guild-rank-foot {
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.4);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  color: var(--muted);
  line-height: 1.5;
}
.guild-rank-foot b { color: var(--gold-bright); }

.highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.highlight-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  background: var(--panel);
}

.highlight-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.highlight-value {
  font-size: 13px;
  color: var(--muted);
}

.panel-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 22px;
  border-top: 1px dashed var(--border);
  padding-top: 14px;
}

/* House detail */

.house-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.back-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
}
.back-btn:hover { background: var(--soft); }

.house-total {
  margin-left: auto;
  background: #111827;
  color: #ffffff;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
}

.house-member-count {
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--soft);
  border-radius: 8px;
  padding: 6px 12px;
}

.panel.house-serpier .house-member-count,
.panel.house-nocturne .house-member-count,
.panel.house-feyralis .house-member-count {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
}

.student-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.student-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(252, 211, 77, 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.student-card:hover {
  transform: translateY(-2px);
  border-color: rgba(252, 211, 77, 0.35);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(252, 211, 77, 0.12);
}

.student-photo {
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse at top, rgba(252, 211, 77, 0.08), transparent 60%),
    rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  border-bottom: 1px solid rgba(252, 211, 77, 0.1);
}
.student-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.student-body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.student-rank {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

.student-meta {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.3px;
}

.student-score {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 8px;
  text-align: center;
  font-family: "Cinzel", "Inter", sans-serif;
  text-shadow: 0 0 14px currentColor;
}

.student-score-label {
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  padding-bottom: 4px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.course-chip {
  margin: 4px auto 2px;
  font-size: 11px;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(252, 211, 77, 0.15);
  border-radius: 999px;
  padding: 2px 10px;
  width: fit-content;
  cursor: help;
}

.bucket-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 8px;
}

.bucket-chip {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.bucket-chip {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
}
.bucket-chip.bucket-learn  { color: #93c5fd; border-color: rgba(96, 165, 250, 0.3); }
.bucket-chip.bucket-help   { color: #f9a8d4; border-color: rgba(244, 114, 182, 0.3); }
.bucket-chip.bucket-effort { color: #fdba74; border-color: rgba(251, 146, 60, 0.3); }
.bucket-chip.bucket-team   { color: #6ee7b7; border-color: rgba(52, 211, 153, 0.3); }

.panel.house-serpier .bucket-chip,
.panel.house-nocturne .bucket-chip,
.panel.house-feyralis .bucket-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}
.panel.house-serpier .bucket-chip.bucket-learn  { color: #bfdbfe; }
.panel.house-serpier .bucket-chip.bucket-help   { color: #fbcfe8; }
.panel.house-serpier .bucket-chip.bucket-effort { color: #fed7aa; }
.panel.house-serpier .bucket-chip.bucket-team   { color: #a7f3d0; }
.panel.house-nocturne .bucket-chip.bucket-learn  { color: #bfdbfe; }
.panel.house-nocturne .bucket-chip.bucket-help   { color: #fbcfe8; }
.panel.house-nocturne .bucket-chip.bucket-effort { color: #fed7aa; }
.panel.house-nocturne .bucket-chip.bucket-team   { color: #a7f3d0; }
.panel.house-feyralis .bucket-chip.bucket-learn  { color: #bfdbfe; }
.panel.house-feyralis .bucket-chip.bucket-help   { color: #fbcfe8; }
.panel.house-feyralis .bucket-chip.bucket-effort { color: #fed7aa; }
.panel.house-feyralis .bucket-chip.bucket-team   { color: #a7f3d0; }

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 14px;
}

/* House locked screen (for non-members) */
.house-locked-screen {
  text-align: center;
  padding: 70px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.house-locked-icon {
  font-size: 72px;
  filter: drop-shadow(0 0 24px rgba(252, 211, 77, 0.4));
  animation: lockFloat 3s ease-in-out infinite;
}
@keyframes lockFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.house-locked-title {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(252, 211, 77, 0.3);
}
.house-locked-text {
  font-size: 14px;
  color: rgba(248, 250, 252, 0.7);
  line-height: 1.7;
  max-width: 420px;
}
.house-locked-text b {
  color: var(--gold-bright);
  font-weight: 700;
}
.house-locked-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 640px) {
  .house-locked-screen { padding: 50px 16px; }
  .house-locked-icon { font-size: 56px; }
  .house-locked-title { font-size: 20px; }
}

.error-banner {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 14px;
}

.dot.serpier { background: var(--serpier); }
.dot.nocturne { background: var(--nocturne); }
.dot.feyralis { background: var(--feyralis); }

/* === Dashboard (overview) magical theme === */
.panel.overview-panel {
  background:
    radial-gradient(ellipse at top right, rgba(196, 181, 253, 0.18), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(20, 184, 166, 0.12), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(217, 119, 6, 0.12), transparent 50%),
    linear-gradient(180deg, #0a0d1f 0%, #1e1b4b 55%, #312e81 100%);
  border: none;
  color: #f8fafc;
  position: relative;
  overflow: hidden;
}

.panel.overview-panel::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 20%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 22% 12%, #cbd5e1 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 28%, #fff 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 65% 18%, #fbcfe8 50%, transparent 100%),
    radial-gradient(1px 1px at 85% 12%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 12% 80%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 55% 90%, #c4b5fd 50%, transparent 100%),
    radial-gradient(1.3px 1.3px at 78% 85%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 92% 65%, #fde68a 50%, transparent 100%);
  pointer-events: none;
}

.panel.overview-panel > * { position: relative; z-index: 1; }

.panel.overview-panel h1 {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  letter-spacing: 1.5px;
  font-size: 26px;
  color: #fff;
  text-shadow: 0 0 16px rgba(196, 181, 253, 0.55);
}

.panel.overview-panel .muted,
.panel.overview-panel .panel-foot {
  color: rgba(248, 250, 252, 0.55);
}
.panel.overview-panel .panel-foot {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* House cards on dashboard — each gets its house's mood */
.panel.overview-panel .house-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.panel.overview-panel .house-card:hover {
  transform: translateY(-3px);
}

.panel.overview-panel .house-card .house-label {
  color: #fff;
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.panel.overview-panel .house-card .rank-pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}
.panel.overview-panel .house-card .house-card-label {
  color: rgba(255, 255, 255, 0.55);
}

.panel.overview-panel .house-card.house-serpier {
  background:
    radial-gradient(ellipse at top right, rgba(20, 184, 166, 0.3), transparent 65%),
    linear-gradient(135deg, rgba(4, 47, 46, 0.9), rgba(15, 23, 42, 0.85));
}
.panel.overview-panel .house-card.house-serpier .house-card-score {
  color: #5eead4;
  text-shadow: 0 0 14px rgba(94, 234, 212, 0.55);
}
.panel.overview-panel .house-card.house-serpier:hover {
  box-shadow: 0 0 28px rgba(94, 234, 212, 0.25);
}

.panel.overview-panel .house-card.house-nocturne {
  background:
    radial-gradient(circle at 80% 25%, rgba(255, 255, 255, 0.15), transparent 12%),
    radial-gradient(ellipse at top, rgba(147, 197, 253, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(12, 18, 36, 0.9), rgba(30, 58, 138, 0.7));
}
.panel.overview-panel .house-card.house-nocturne .house-card-score {
  color: #93c5fd;
  text-shadow: 0 0 14px rgba(147, 197, 253, 0.6);
}
.panel.overview-panel .house-card.house-nocturne:hover {
  box-shadow: 0 0 28px rgba(147, 197, 253, 0.3);
}

.panel.overview-panel .house-card.house-feyralis {
  background:
    radial-gradient(ellipse at top left, rgba(234, 179, 8, 0.22), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(127, 29, 29, 0.45), transparent 55%),
    linear-gradient(155deg, rgba(28, 10, 10, 0.9), rgba(74, 20, 20, 0.85));
}
.panel.overview-panel .house-card.house-feyralis .house-card-score {
  color: #fbbf24;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.55);
}
.panel.overview-panel .house-card.house-feyralis:hover {
  box-shadow: 0 0 28px rgba(251, 191, 36, 0.3);
}

/* === House detail page themes (magical / Harry Potter style) === */
.panel.house-serpier,
.panel.house-nocturne,
.panel.house-feyralis {
  position: relative;
  overflow: hidden;
  border: none;
  color: #f8fafc;
}

.panel.house-serpier .student-meta,
.panel.house-nocturne .student-meta,
.panel.house-feyralis .student-meta,
.panel.house-serpier .student-score-label,
.panel.house-nocturne .student-score-label,
.panel.house-feyralis .student-score-label {
  color: rgba(248, 250, 252, 0.65);
}

.panel.house-serpier .house-label,
.panel.house-nocturne .house-label,
.panel.house-feyralis .house-label {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-size: 22px;
  letter-spacing: 1px;
}

.panel.house-serpier .house-total,
.panel.house-nocturne .house-total,
.panel.house-feyralis .house-total {
  font-family: "Cinzel", serif;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  backdrop-filter: blur(8px);
}

.panel.house-serpier .back-btn,
.panel.house-nocturne .back-btn,
.panel.house-feyralis .back-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

.panel.house-serpier .student-card,
.panel.house-nocturne .student-card,
.panel.house-feyralis .student-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  color: #f8fafc;
}

.panel.house-serpier .student-photo,
.panel.house-nocturne .student-photo,
.panel.house-feyralis .student-photo {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(248, 250, 252, 0.5);
}

.panel.house-serpier .course-chip,
.panel.house-nocturne .course-chip,
.panel.house-feyralis .course-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}

/* --- Serpier: emerald, dark, snake-like --- */
.panel.house-serpier {
  background:
    radial-gradient(ellipse at top right, rgba(20, 184, 166, 0.25), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(8, 145, 178, 0.18), transparent 55%),
    linear-gradient(160deg, #042f2e 0%, #0f172a 50%, #064e3b 100%);
}
.panel.house-serpier::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(20, 184, 166, 0.4) 0, transparent 2px);
  background-size: 80px 80px;
  opacity: 0.3;
  pointer-events: none;
}
.panel.house-serpier .student-score { color: #5eead4; text-shadow: 0 0 12px rgba(94, 234, 212, 0.5); }
.panel.house-serpier .house-label { color: #5eead4; text-shadow: 0 0 16px rgba(94, 234, 212, 0.6); }

/* --- Nocturne: deep blue night, moonlit silver --- */
.panel.house-nocturne {
  background:
    radial-gradient(ellipse at top, rgba(186, 230, 253, 0.18), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.18), transparent 8%),
    linear-gradient(180deg, #0c1224 0%, #1e293b 60%, #1e3a8a 100%);
}
.panel.house-nocturne::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 65% 15%, #cbd5e1 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 80% 60%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 35% 75%, #93c5fd 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 85%, #fff 50%, transparent 100%);
  background-size: 100% 100%;
  pointer-events: none;
}
.panel.house-nocturne .student-score { color: #93c5fd; text-shadow: 0 0 12px rgba(147, 197, 253, 0.55); }
.panel.house-nocturne .house-label { color: #e0e7ff; text-shadow: 0 0 16px rgba(196, 181, 253, 0.6); }

/* --- Feyralis: gold crimson, lionhearted --- */
.panel.house-feyralis {
  background:
    radial-gradient(ellipse at top left, rgba(234, 179, 8, 0.25), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(127, 29, 29, 0.4), transparent 55%),
    linear-gradient(155deg, #1c0a0a 0%, #4a1414 45%, #422006 100%);
}
.panel.house-feyralis::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(234, 179, 8, 0.5) 0, transparent 1.5px);
  background-size: 90px 90px;
  opacity: 0.25;
  pointer-events: none;
}
.panel.house-feyralis .student-score { color: #fbbf24; text-shadow: 0 0 12px rgba(251, 191, 36, 0.55); }
.panel.house-feyralis .house-label { color: #fde68a; text-shadow: 0 0 16px rgba(252, 211, 77, 0.6); }

/* Make student-rank readable on themed cards */
.panel.house-serpier .student-rank,
.panel.house-nocturne .student-rank,
.panel.house-feyralis .student-rank {
  color: #f8fafc;
}

/* Subtle magical hover on themed cards */
.panel.house-serpier .student-card:hover,
.panel.house-nocturne .student-card:hover,
.panel.house-feyralis .student-card:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}
.panel.house-serpier .student-card:hover { box-shadow: 0 0 24px rgba(94, 234, 212, 0.3); }
.panel.house-nocturne .student-card:hover { box-shadow: 0 0 24px rgba(147, 197, 253, 0.3); }
.panel.house-feyralis .student-card:hover { box-shadow: 0 0 24px rgba(251, 191, 36, 0.3); }

/* === Ranking panel === */
.panel.ranking-panel {
  background:
    radial-gradient(ellipse at top right, rgba(252, 211, 77, 0.18), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(168, 85, 247, 0.18), transparent 55%),
    linear-gradient(180deg, #0a0d1f 0%, #1e1b4b 60%, #1f1f3a 100%);
  color: #f8fafc;
  border: none;
}
.panel.ranking-panel .panel-head h1 {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-size: 26px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 0 20px rgba(252, 211, 77, 0.55);
}
.panel.ranking-panel .muted { color: rgba(248, 250, 252, 0.65); }

.ranking-filters {
  display: flex;
  gap: 8px;
  margin: 18px 0 14px;
  flex-wrap: wrap;
}
.ranking-filter {
  appearance: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 250, 252, 0.75);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.ranking-filter:hover { background: rgba(255, 255, 255, 0.12); }
.ranking-filter.active {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  border-color: #fbbf24;
  color: #422006;
}

.ranking-list { display: flex; flex-direction: column; gap: 6px; }

.ranking-row {
  display: grid;
  grid-template-columns: 96px 1fr 160px 120px;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ranking-header {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

.rank-col-rank { display: flex; align-items: center; gap: 8px; }
.rank-num { font-size: 17px; font-weight: 600; color: rgba(248, 250, 252, 0.85); min-width: 32px; text-align: center; }
.rank-num.small { font-size: 13px; color: rgba(248, 250, 252, 0.6); }
.rank-medal { font-size: 24px; }

.rank-col-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rank-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  object-fit: cover;
  flex-shrink: 0;
}
.rank-name-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rank-name-text {
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-house-mobile {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(248, 250, 252, 0.6);
}
.rank-house-mobile .dot { width: 8px; height: 8px; }
@media (max-width: 640px) {
  .rank-house-mobile { display: flex; }
}
.rank-me-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(252, 211, 77, 0.25);
  color: #fde68a;
  font-size: 10px;
  font-weight: 700;
}

.rank-col-house { display: flex; align-items: center; gap: 8px; color: rgba(248, 250, 252, 0.75); font-size: 13px; }
.rank-col-house .dot { width: 12px; height: 12px; }

.rank-col-score {
  font-family: "Inter", monospace;
  font-weight: 700;
  font-size: 18px;
  text-align: right;
  color: #fff;
}

/* Top 3 special styling */
.rank-top-1 {
  background: linear-gradient(90deg, rgba(252, 211, 77, 0.22), rgba(120, 53, 15, 0.15) 70%, rgba(15, 23, 42, 0.45));
  border: 1px solid rgba(252, 211, 77, 0.45);
  box-shadow: 0 0 24px rgba(252, 211, 77, 0.18);
}
.rank-top-1 .rank-col-score { color: #fde68a; text-shadow: 0 0 12px rgba(252, 211, 77, 0.55); }
.rank-top-2 {
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.18), rgba(71, 85, 105, 0.12) 70%, rgba(15, 23, 42, 0.45));
  border: 1px solid rgba(226, 232, 240, 0.4);
}
.rank-top-2 .rank-col-score { color: #e2e8f0; }
.rank-top-3 {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.2), rgba(120, 53, 15, 0.12) 70%, rgba(15, 23, 42, 0.45));
  border: 1px solid rgba(217, 119, 6, 0.45);
}
.rank-top-3 .rank-col-score { color: #fdba74; }

.ranking-row.is-me {
  border: 2px solid #fbbf24;
  box-shadow: 0 0 18px rgba(252, 211, 77, 0.35);
}

.ranking-sep {
  text-align: center;
  padding: 12px;
  color: rgba(248, 250, 252, 0.35);
  font-size: 18px;
  letter-spacing: 4px;
}

@media (max-width: 640px) {
  .ranking-row {
    grid-template-columns: 56px 1fr 80px;
    gap: 8px;
    padding: 10px 12px;
  }
  .ranking-header { display: none; }   /* no header on mobile */
  .rank-col-house { display: none; }   /* hide house col, show via dot in name */
  .rank-col-house-mobile { display: block; }
  .rank-name-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .rank-num { font-size: 15px; }
  .rank-medal { font-size: 20px; }
  .rank-col-score { font-size: 16px; }
  .rank-avatar { width: 36px; height: 36px; }
}
.panel.quest-panel {
  background:
    /* dust spots */
    radial-gradient(circle at 12% 18%, rgba(80, 40, 10, 0.25), transparent 6%),
    radial-gradient(circle at 78% 30%, rgba(180, 83, 9, 0.18), transparent 7%),
    radial-gradient(circle at 55% 78%, rgba(80, 40, 10, 0.20), transparent 5%),
    radial-gradient(circle at 88% 65%, rgba(180, 83, 9, 0.14), transparent 6%),
    radial-gradient(circle at 28% 88%, rgba(80, 40, 10, 0.18), transparent 4%),
    /* dappled light */
    radial-gradient(ellipse at 30% 25%, rgba(253, 230, 138, 0.15), transparent 45%),
    radial-gradient(ellipse at 75% 60%, rgba(252, 211, 77, 0.10), transparent 50%),
    /* worn vignette */
    radial-gradient(ellipse at center, transparent 30%, rgba(40, 20, 8, 0.55) 100%),
    /* parchment base */
    linear-gradient(135deg, #4a2f1a 0%, #6b4423 35%, #7a5230 55%, #5c3a1f 80%, #3d2817 100%);
  color: #fef3c7;
  border: none;
  overflow: hidden;
}
.panel.quest-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(80, 40, 10, 0.06) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(80, 40, 10, 0.05) 0 1px, transparent 1px 18px);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.panel.quest-panel > * { position: relative; z-index: 1; }
.panel.quest-panel .panel-head h1 {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-size: 28px;
  letter-spacing: 1.5px;
  background: linear-gradient(180deg, #fde68a 0%, #f59e0b 60%, #92400e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 8px rgba(120, 53, 15, 0.7);
}
.panel.quest-panel .muted { color: rgba(254, 243, 199, 0.78); }

/* === Quest "monument" cards (Soul Land style) === */
.quest-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px 24px;
  margin-top: 32px;
  padding: 32px 12px 24px;
  position: relative;
}

/* Asymmetric vertical offsets — feel like monuments scattered on ground */
.quest-list > .quest-monument:nth-child(1) { transform: translateY(-12px); }
.quest-list > .quest-monument:nth-child(2) { transform: translateY( 16px); }
.quest-list > .quest-monument:nth-child(3) { transform: translateY(-8px);  }
.quest-list > .quest-monument:nth-child(4) { transform: translateY( 22px); }
.quest-list > .quest-monument:nth-child(5) { transform: translateY(-16px); }
.quest-list > .quest-monument:nth-child(6) { transform: translateY( 10px); }
.quest-list > .quest-monument:nth-child(7) { transform: translateY(-6px);  }
.quest-list > .quest-monument:nth-child(8) { transform: translateY( 18px); }

.quest-monument {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: linear-gradient(180deg,
    rgba(40, 30, 20, 0.4) 0%,
    rgba(20, 15, 10, 0.7) 100%);
  border: 1px solid rgba(252, 211, 77, 0.28);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.2s, box-shadow 0.2s;
  z-index: 1;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 2px 0 rgba(120, 53, 15, 0.3) inset,
    0 0 0 1px rgba(252, 211, 77, 0.1) inset;
}
/* Ground shadow under each monument */
.quest-monument::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -16px;
  height: 18px;
  background: radial-gradient(ellipse at center, rgba(20, 10, 5, 0.6) 0%, transparent 70%);
  filter: blur(4px);
  z-index: -1;
  pointer-events: none;
}
.quest-monument:hover {
  transform: translateY(-8px) !important;   /* override the asymmetric offset on hover */
  border-color: rgba(252, 211, 77, 0.55);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(252, 211, 77, 0.25),
    0 0 0 1px rgba(252, 211, 77, 0.2) inset;
}

/* Pillar = top half — the "totem" */
.monument-pillar {
  position: relative;
  height: 220px;
  background:
    /* ground beam */
    radial-gradient(ellipse at center bottom, rgba(252, 211, 77, 0.12), transparent 50%),
    /* pillar glow */
    radial-gradient(ellipse at 50% 38%, rgba(168, 85, 247, 0.32), transparent 60%),
    /* sandy ground tint */
    linear-gradient(180deg, rgba(60, 40, 20, 0.2) 0%, rgba(80, 50, 25, 0.35) 60%, rgba(40, 25, 12, 0.6) 100%);
  border-bottom: 1px solid rgba(252, 211, 77, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Stone obelisk base (wider trapezoid) */
.monument-pillar::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 64%;
  height: 78%;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(120, 100, 130, 0.6) 0%,
    rgba(90, 70, 100, 0.55) 25%,
    rgba(60, 45, 75, 0.65) 55%,
    rgba(35, 25, 50, 0.85) 85%,
    rgba(20, 12, 28, 0.95) 100%);
  clip-path: polygon(22% 0%, 78% 0%, 92% 100%, 8% 100%);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.6);
}
/* Crystal cap floating above obelisk */
.monument-pillar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  width: 30%;
  height: 32%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 40% 30%, rgba(253, 230, 138, 0.7) 0%, rgba(192, 132, 252, 0.5) 30%, rgba(124, 58, 237, 0.4) 70%, transparent 100%);
  clip-path: polygon(50% 0%, 100% 40%, 82% 100%, 18% 100%, 0% 40%);
  filter: drop-shadow(0 0 16px rgba(192, 132, 252, 0.65));
  animation: crystalPulse 3s ease-in-out infinite;
}
@keyframes crystalPulse {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(192, 132, 252, 0.65)); }
  50%      { filter: drop-shadow(0 0 24px rgba(192, 132, 252, 0.95)); }
}

/* Aura halo behind the glyph (lower on the obelisk) */
.monument-aura {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 211, 77, 0.5), transparent 70%);
  filter: blur(6px);
}

.monument-glyph {
  position: relative;
  z-index: 2;
  font-size: 58px;
  filter:
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 18px rgba(252, 211, 77, 0.4));
  margin-top: 40px;
}

/* ✓ check badge — floats above the monument with rays */
.monument-check {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #ffffff 0%, #f1f5f9 50%, #cbd5e1 100%);
  border: 2.5px solid rgba(34, 197, 94, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 22px;
  color: #15803d;
  z-index: 3;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(255, 255, 255, 0.5),
    0 0 14px rgba(34, 197, 94, 0.5);
  animation: checkPop 0.4s ease-out;
}
/* Rays around the check (sun-ray effect) */
.monument-check::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg 6deg, rgba(255, 255, 255, 0.6) 7deg 12deg,
      transparent 12deg 36deg, rgba(255, 255, 255, 0.6) 37deg 42deg,
      transparent 42deg 66deg, rgba(255, 255, 255, 0.6) 67deg 72deg,
      transparent 72deg 96deg, rgba(255, 255, 255, 0.6) 97deg 102deg,
      transparent 102deg 126deg, rgba(255, 255, 255, 0.6) 127deg 132deg,
      transparent 132deg 156deg, rgba(255, 255, 255, 0.6) 157deg 162deg,
      transparent 162deg 186deg, rgba(255, 255, 255, 0.6) 187deg 192deg,
      transparent 192deg 216deg, rgba(255, 255, 255, 0.6) 217deg 222deg,
      transparent 222deg 246deg, rgba(255, 255, 255, 0.6) 247deg 252deg,
      transparent 252deg 276deg, rgba(255, 255, 255, 0.6) 277deg 282deg,
      transparent 282deg 306deg, rgba(255, 255, 255, 0.6) 307deg 312deg,
      transparent 312deg 336deg, rgba(255, 255, 255, 0.6) 337deg 342deg,
      transparent 342deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 50%, black 60%, black 80%, transparent 95%);
          mask: radial-gradient(circle, transparent 50%, black 60%, black 80%, transparent 95%);
  filter: blur(0.6px);
  opacity: 0.5;
  z-index: -1;
  animation: rayRotate 12s linear infinite;
}
@keyframes rayRotate {
  to { transform: rotate(360deg); }
}
@keyframes checkPop {
  0%   { transform: translateX(-50%) scale(0); }
  60%  { transform: translateX(-50%) scale(1.15); }
  100% { transform: translateX(-50%) scale(1); }
}

/* Base = bottom info section — like a stone tablet */
.monument-base {
  padding: 16px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(120, 53, 15, 0.2), transparent 60%),
    linear-gradient(180deg, rgba(40, 25, 12, 0.5) 0%, rgba(20, 12, 6, 0.7) 100%);
  border-top: 1px solid rgba(252, 211, 77, 0.15);
}

.monument-rewards {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 4px;
}

.monument-title {
  font-family: "Cinzel", "IBM Plex Sans Thai", serif;
  font-weight: 700;
  font-size: 15px;
  background: linear-gradient(180deg, #fde68a 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.4px;
  text-shadow: 0 2px 4px rgba(80, 40, 10, 0.8);
}

.monument-desc {
  font-size: 11px;
  color: rgba(248, 250, 252, 0.55);
  line-height: 1.4;
  min-height: 30px;
}

.monument-progress {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.monument-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.monument-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border-radius: 999px;
  transition: width 0.4s;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}
.monument-progress-text {
  font-size: 10px;
  font-family: ui-monospace, monospace;
  color: rgba(248, 250, 252, 0.65);
  min-width: 30px;
  text-align: right;
}

/* Claim button */
.monument-claim-btn {
  appearance: none;
  margin-top: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
  background: var(--gold-gradient);
  color: #422006;
  border: 1px solid var(--gold-bright);
  box-shadow:
    0 0 16px rgba(251, 191, 36, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: claimPulse 1.6s ease-in-out infinite;
}
.monument-claim-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
@keyframes claimPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(251, 191, 36, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
  50%      { box-shadow: 0 0 28px rgba(251, 191, 36, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
}

/* Status pills */
.monument-status {
  margin-top: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-align: center;
}
.status-claimed {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.status-locked {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(248, 250, 252, 0.4);
  border: 1px dashed rgba(255, 255, 255, 0.12);
}

/* === COMPLETED state — gold obelisk === */
.quest-monument.is-completed {
  border-color: rgba(252, 211, 77, 0.6);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(252, 211, 77, 0.22),
    0 0 0 1px rgba(252, 211, 77, 0.2) inset;
}
.quest-monument.is-completed .monument-pillar {
  background:
    radial-gradient(ellipse at center bottom, rgba(252, 211, 77, 0.4), transparent 55%),
    radial-gradient(ellipse at 50% 38%, rgba(252, 211, 77, 0.35), transparent 60%),
    linear-gradient(180deg, rgba(120, 60, 20, 0.3) 0%, rgba(80, 50, 25, 0.4) 60%, rgba(40, 25, 12, 0.65) 100%);
}
.quest-monument.is-completed .monument-pillar::before {
  background: linear-gradient(180deg,
    rgba(253, 230, 138, 0.7) 0%,
    rgba(251, 191, 36, 0.6) 25%,
    rgba(217, 119, 6, 0.55) 55%,
    rgba(120, 53, 15, 0.75) 85%,
    rgba(60, 25, 8, 0.95) 100%);
  box-shadow: inset 0 0 28px rgba(120, 53, 15, 0.6);
}
.quest-monument.is-completed .monument-pillar::after {
  background:
    radial-gradient(ellipse at 40% 30%, #fef3c7 0%, #fde68a 25%, rgba(252, 211, 77, 0.7) 60%, transparent 100%);
  filter: drop-shadow(0 0 24px rgba(252, 211, 77, 0.85));
}
.quest-monument.is-completed .monument-aura {
  background: radial-gradient(circle, rgba(252, 211, 77, 0.7), transparent 70%);
}
.quest-monument.is-completed .monument-progress-fill {
  background: linear-gradient(90deg, #f59e0b, #fde68a);
  box-shadow: 0 0 10px rgba(252, 211, 77, 0.6);
}

/* === CLAIMED state — dimmed === */
.quest-monument.is-claimed { opacity: 0.62; }
.quest-monument.is-claimed:hover { opacity: 0.85; }
.quest-monument.is-claimed .monument-aura { background: radial-gradient(circle, rgba(52, 211, 153, 0.4), transparent 70%); }

@media (max-width: 640px) {
  .quest-list { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; padding: 24px 0 16px; }
  /* Tone down the asymmetric offset on mobile */
  .quest-list > .quest-monument:nth-child(n) { transform: translateY(0); }
  .quest-list > .quest-monument:nth-child(odd) { transform: translateY(-6px); }
  .quest-list > .quest-monument:nth-child(even) { transform: translateY(8px); }
  .monument-pillar { height: 170px; }
  .monument-glyph { font-size: 46px; margin-top: 30px; }
  .monument-check { width: 38px; height: 38px; font-size: 18px; top: -4px; }
  .monument-title { font-size: 13px; }
  .monument-desc { font-size: 10px; min-height: 24px; }
  .monument-claim-btn, .monument-status { padding: 8px 10px; font-size: 11px; }
}

/* === Quiz hub & player === */
.panel.quiz-hub {
  background:
    radial-gradient(ellipse at top, rgba(168, 85, 247, 0.18), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(59, 130, 246, 0.15), transparent 50%),
    linear-gradient(180deg, #0c0f24 0%, #1e1b4b 60%, #4c1d95 100%);
  color: #f8fafc;
  border: none;
}
.panel.quiz-hub .panel-head h1 {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-size: 24px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 0 16px rgba(196, 181, 253, 0.6);
}
.panel.quiz-hub .muted { color: rgba(248, 250, 252, 0.65); }

.quiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.quiz-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.quiz-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 24px var(--accent, rgba(196, 181, 253, 0.4));
}
.quiz-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; height: 3px; width: 100%;
  background: var(--accent, #888);
}

.quiz-subject {
  font-size: 11px;
  color: var(--accent, #cbd5e1);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.quiz-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.35;
}
.quiz-meta {
  font-size: 12px;
  color: rgba(248, 250, 252, 0.55);
  margin-bottom: 14px;
}
.quiz-play-btn {
  appearance: none;
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  background: var(--accent, #6366f1);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.15s;
}
.quiz-play-btn:hover { filter: brightness(1.15); }

/* Quiz player */
.panel.quiz-play {
  background:
    radial-gradient(ellipse at top right, rgba(168, 85, 247, 0.2), transparent 55%),
    linear-gradient(180deg, #0c0f24 0%, #1e1b4b 70%);
  color: #f8fafc;
  border: none;
  min-height: 60vh;
}
.quiz-play-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.quiz-play-head .back-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.quiz-play-title {
  font-family: "Cinzel", serif;
  font-size: 17px;
  color: #fff;
}
.quiz-play-progress {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 13px;
}

.quiz-question {
  max-width: 720px;
  margin: 0 auto;
}
.quiz-q-text {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 24px;
  color: #fff;
  text-align: center;
}
.quiz-choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .quiz-choices { grid-template-columns: 1fr; }
}
.quiz-choice {
  appearance: none;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.quiz-choice:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
.quiz-choice:not(:disabled):active { transform: scale(0.98); }
.quiz-choice.correct {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.6);
}
.quiz-choice.wrong {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.6);
}
.quiz-choice:disabled { cursor: default; }

.quiz-feedback {
  margin-top: 22px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid #6366f1;
}
.quiz-feedback.ok { border-left-color: #22c55e; }
.quiz-feedback.bad { border-left-color: #ef4444; }
.quiz-fb-line { font-weight: 600; color: #fff; margin-bottom: 6px; }
.quiz-fb-explain { font-size: 13px; color: rgba(248, 250, 252, 0.75); margin-bottom: 14px; }
.quiz-next-btn {
  appearance: none;
  margin-top: 12px;
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  background: #6366f1;
  color: white;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
.quiz-next-btn:hover { background: #4f46e5; }

.quiz-result {
  text-align: center;
  padding: 30px 20px;
  max-width: 480px;
  margin: 0 auto;
}
.quiz-result-score {
  font-family: "Cinzel", serif;
  font-size: 56px;
  color: #fff;
  text-shadow: 0 0 24px rgba(196, 181, 253, 0.6);
}
.quiz-result-pct {
  font-size: 18px;
  color: rgba(248, 250, 252, 0.7);
  margin-top: 4px;
}
.quiz-result-msg {
  font-size: 16px;
  margin: 16px 0;
  color: #fff;
}
.quiz-result-points {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(196, 181, 253, 0.85);
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  padding: 10px 16px;
  display: inline-block;
}
.quiz-result-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: center;
}
.quiz-result-actions .back-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

/* student grid stays above the ::before pseudo */
.panel.house-serpier .student-grid,
.panel.house-nocturne .student-grid,
.panel.house-feyralis .student-grid,
.panel.house-serpier .house-head,
.panel.house-nocturne .house-head,
.panel.house-feyralis .house-head {
  position: relative;
  z-index: 1;
}

@media (max-width: 960px) {
  .student-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .house-card-score { font-size: 52px; }
}

@media (max-width: 640px) {
  .topbar { padding: 14px 16px; gap: 10px; }
  .topbar .tabs { display: none; }   /* hide top tabs — use bottom nav */
  .container { padding: 0 14px 100px; } /* extra bottom padding for bottom nav */
  .panel { padding: 16px; }
  .panel.overview-panel { padding: 18px; }
  .panel.overview-panel h1 { font-size: 22px; }
  .house-grid { grid-template-columns: 1fr; gap: 12px; }
  .highlight-grid { grid-template-columns: 1fr; }
  .student-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .house-card-score { font-size: 44px; }
  .house-head { padding-bottom: 6px; }
  .student-card .student-photo { aspect-ratio: 1 / 1; }
  .student-score { font-size: 24px; }
  .quest-card { padding: 12px 14px; gap: 12px; }
  .quiz-q-text { font-size: 18px; padding: 0 4px; }
}

/* === Bottom navigation (mobile only) === */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(10, 10, 20, 0.85) 0%, rgba(10, 10, 20, 0.98) 100%);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(252, 211, 77, 0.25);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index: 100;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
}
.bottom-nav::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(252, 211, 77, 0.5) 50%, transparent);
}
.bn-item {
  appearance: none;
  flex: 1;
  background: transparent;
  border: none;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: inherit;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  border-radius: 10px;
  min-height: 52px;
  transition: color 0.15s, background 0.15s, transform 0.1s;
}
.bn-item:active { background: rgba(252, 211, 77, 0.08); transform: scale(0.96); }
.bn-item.active { color: var(--gold-bright); font-weight: 700; }
.bn-item.active .bn-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px rgba(252, 211, 77, 0.6));
}
.bn-icon { font-size: 22px; line-height: 1; transition: transform 0.15s, filter 0.15s; }
.bn-label { letter-spacing: 0.2px; }

@media (max-width: 640px) {
  .bottom-nav { display: flex; }
}

/* === Install banner === */
.install-banner {
  position: fixed;
  left: 14px; right: 14px;
  bottom: calc(70px + env(safe-area-inset-bottom));
  background: #111827;
  color: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  z-index: 90;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.install-close {
  appearance: none;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 8px;
}
.install-close:hover { background: rgba(255, 255, 255, 0.1); }
@media (min-width: 641px) { .install-banner { display: none !important; } }

/* === Profile sheet === */
.profile-card { max-width: 420px; }
.profile-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(252, 211, 77, 0.12);
  border-radius: 10px;
  font-size: 14px;
}
.profile-key { color: var(--muted); font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; }
.profile-val { font-weight: 600; color: var(--gold-bright); }
.profile-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.profile-btn {
  appearance: none;
  padding: 12px 16px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.5);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
  min-height: 44px;
}
.profile-btn:hover { background: rgba(252, 211, 77, 0.1); border-color: rgba(252, 211, 77, 0.35); }
.profile-btn.danger { color: #fca5a5; border-color: rgba(239, 68, 68, 0.35); background: rgba(127, 29, 29, 0.25); }
.profile-btn.danger:hover { background: rgba(127, 29, 29, 0.4); }
.profile-btn.primary {
  background: var(--gold-gradient);
  color: #422006;
  border-color: var(--gold);
  font-weight: 700;
  box-shadow: 0 0 16px rgba(252, 211, 77, 0.25);
}
.profile-btn.primary:hover { filter: brightness(1.1); }

.profile-avatar-preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: -8px 0 6px;
}
.profile-avatar-preview img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--soft);
  border: 3px solid var(--border);
  object-fit: cover;
}


/* student card → use avatar */
.avatar-photo {
  background: #f3f4f6;
  position: relative;
}
.avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Avatar studio modal */
.avatar-card {
  max-width: 540px;
  /* Override .modal-card { overflow: hidden } so the whole modal body
     (stage + photo + controls + slots) can scroll as one unit.
     Footer is pinned via sticky positioning below. */
  overflow-y: auto;
  overflow-x: hidden;
}
.avatar-card .avatar-controls {
  /* The inner styles grid no longer needs its own scrollbar; let the modal scroll instead */
  max-height: none;
  overflow-y: visible;
}
.avatar-card .avatar-foot {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent, var(--panel-solid) 25%);
  padding-top: 18px;
  z-index: 2;
}
.avatar-stage {
  background:
    radial-gradient(ellipse at top, rgba(168, 85, 247, 0.2), transparent 60%),
    linear-gradient(180deg, #1e1b4b, #4c1d95);
  padding: 24px;
  display: flex;
  justify-content: center;
}
.avatar-preview {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 4px solid rgba(253, 230, 138, 0.5);
  box-shadow: 0 0 32px rgba(253, 230, 138, 0.3);
}
.avatar-stage-inner {
  position: relative;
  width: 200px; height: 200px;
}
.avatar-equipped {
  position: absolute;
  font-size: 36px;
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
  pointer-events: none;
  animation: avatar-eq-pop 0.3s ease-out;
}
@keyframes avatar-eq-pop {
  0%   { transform: translate(var(--tx, 0), var(--ty, 0)) scale(0); opacity: 0; }
  100% { transform: translate(var(--tx, 0), var(--ty, 0)) scale(1); opacity: 1; }
}
.avatar-equipped.equipped-head {
  top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 42px;
}
.avatar-equipped.equipped-pet {
  bottom: -8px; right: -16px;
  font-size: 40px;
}
.avatar-equipped.equipped-aura {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 140px;
  opacity: 0.28;
  filter: blur(2px) drop-shadow(0 0 24px rgba(251, 191, 36, 0.6));
  animation: avatar-eq-aura-spin 12s linear infinite;
}
@keyframes avatar-eq-aura-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.avatar-equipped.equipped-frame {
  top: -8px; left: -8px;
  width: 216px; height: 216px;
  border-radius: 50%;
  border: 4px solid var(--gold);
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.6) inset, 0 0 30px rgba(251, 191, 36, 0.4);
  font-size: 0;
  background: transparent;
  animation: none;
}
.avatar-controls {
  padding: 18px 22px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 50vh;
  overflow-y: auto;
}
.avatar-seed-row { display: flex; gap: 8px; }
.avatar-seed-row input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
}
.avatar-seed-row input:focus { outline: none; border-color: #6d28d9; }
.avatar-dice {
  appearance: none;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 8px;
  font-size: 22px;
  cursor: pointer;
}
.avatar-dice:hover { background: var(--soft); }
.avatar-styles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 10px;
}
.avatar-style-chip {
  appearance: none;
  border: 2px solid transparent;
  background: var(--soft);
  border-radius: 12px;
  padding: 8px 6px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s, transform 0.1s;
}
.avatar-style-chip:hover { transform: translateY(-2px); }
.avatar-style-chip.active { border-color: #6d28d9; background: #ede9fe; }
.avatar-style-chip img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
}
.avatar-style-label {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}
.avatar-style-chip.active .avatar-style-label { color: #5b21b6; font-weight: 600; }
.avatar-foot {
  padding: 14px 22px 18px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .avatar-preview { width: 160px; height: 160px; }
  .avatar-styles { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

/* Touch target tweaks on small screens */
@media (max-width: 640px) {
  .tab { min-height: 38px; }
  .identity-chip { min-height: 38px; padding: 8px 12px; font-size: 12px; }
  .quest-claim-btn { min-height: 38px; padding: 8px 16px; }
  .quiz-choice { min-height: 56px; font-size: 16px; }
  .quiz-play-btn { min-height: 44px; }
  .login-form input { min-height: 44px; font-size: 16px; /* avoid iOS zoom */ }
  .login-submit { min-height: 48px; }
  .modal-card { border-radius: 18px 18px 0 0; max-width: 100%; align-self: flex-end; max-height: 92vh; }
  .modal-overlay { align-items: flex-end; padding: 0; }
}

/* ============================================================
   Game Lobby (Phase 5/6) — premium home screen for logged-in students
   ============================================================ */

.lobby-panel {
  background: linear-gradient(180deg, rgba(15, 17, 35, 0.85), rgba(10, 10, 22, 0.92));
  border: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
}

/* ---- Hero band ---- */
.lobby-hero {
  position: relative;
  padding: 22px 22px 18px;
  background:
    radial-gradient(circle at 18% 20%, rgba(168, 85, 247, 0.22), transparent 50%),
    radial-gradient(circle at 82% 30%, rgba(251, 191, 36, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(30, 27, 75, 0.6) 0%, rgba(15, 17, 35, 0.4) 100%);
  border-bottom: 1px solid rgba(252, 211, 77, 0.18);
  overflow: hidden;
}
.lobby-hero-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 30%, rgba(255,255,255,0.5) 50%, transparent 100%),
    radial-gradient(1px 1px at 70% 65%, rgba(252,211,77,0.55) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 18%, rgba(255,255,255,0.6) 50%, transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}
.lobby-hero-content {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
}
.lobby-hero-avatar-wrap {
  position: relative;
  width: 84px; height: 84px;
}
.lobby-hero-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
  box-shadow:
    0 0 0 3px rgba(15, 17, 35, 0.9),
    0 0 22px rgba(251, 191, 36, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.45);
  background: #0a0a14;
}
.lobby-hero-frame {
  position: absolute; inset: -8px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(251, 191, 36, 0.0) 0deg, rgba(251, 191, 36, 0.45) 90deg, rgba(168, 85, 247, 0.4) 180deg, rgba(20, 184, 166, 0.4) 270deg, rgba(251, 191, 36, 0.0) 360deg);
  filter: blur(6px);
  opacity: 0.7;
  animation: lobby-frame-spin 18s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes lobby-frame-spin { to { transform: rotate(360deg); } }

.lobby-hero-name { min-width: 0; }
.lobby-hero-hello {
  font-size: 12px; letter-spacing: 0.5px; opacity: 0.75;
  text-transform: uppercase;
}
.lobby-hero-title {
  font-family: "Cinzel", serif;
  font-size: 22px; font-weight: 700;
  background: var(--gold-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lobby-hero-house {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
  font-size: 13px;
}
.lobby-house-name { color: var(--text); font-weight: 600; }
.lobby-house-title { color: var(--muted); }

.lobby-streak {
  text-align: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.25), rgba(120, 53, 15, 0.4));
  border: 1px solid rgba(251, 146, 60, 0.45);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.2), 0 0 18px rgba(251, 146, 60, 0.18) inset;
  min-width: 78px;
}
.lobby-streak.is-zero {
  background: linear-gradient(180deg, rgba(71, 85, 105, 0.25), rgba(30, 41, 59, 0.4));
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: none;
  filter: saturate(0.5);
}
.lobby-streak-icon { font-size: 20px; line-height: 1; }
.lobby-streak-val {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-size: 22px; font-weight: 700; color: var(--gold-bright);
  line-height: 1.1;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}
.lobby-streak-label { font-size: 10px; color: var(--muted); letter-spacing: 0.3px; }

/* ---- Level / XP ---- */
.lobby-level { margin-top: 18px; }
.lobby-level-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.lobby-level-pill {
  font-family: "Cinzel", serif;
  font-weight: 700; font-size: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gold-gradient);
  color: #1a1a2e;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.45);
  letter-spacing: 0.5px;
}
.lobby-level-meta { font-size: 12px; color: var(--muted); flex: 1; }
.lobby-level-rank {
  font-size: 12px; color: var(--gold-bright); font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}
.lobby-level-rank-medal { font-size: 14px; }
.lobby-xp-track {
  position: relative;
  height: 12px; border-radius: 999px;
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(252, 211, 77, 0.2);
  overflow: hidden;
}
.lobby-xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f59e0b 0%, #fde68a 50%, #facc15 100%);
  border-radius: 999px;
  transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.55), 0 0 4px rgba(255, 255, 255, 0.4) inset;
}
.lobby-xp-shine {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: lobby-xp-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lobby-xp-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Sections ---- */
.lobby-section { padding: 16px 20px; }
.lobby-section + .lobby-section { border-top: 1px solid rgba(252, 211, 77, 0.08); }
.lobby-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.lobby-section-head h3 {
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: 15px; font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: 0.3px;
}
.lobby-link {
  background: transparent; border: 0; color: var(--muted);
  font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.lobby-link:hover { color: var(--gold-bright); background: rgba(252, 211, 77, 0.08); }

.lobby-empty {
  text-align: center; color: var(--muted); font-size: 13px;
  padding: 20px; background: rgba(255, 255, 255, 0.03);
  border-radius: 12px; border: 1px dashed rgba(255, 255, 255, 0.08);
}

/* ---- Quest strip ---- */
.lobby-quest-strip { display: grid; gap: 10px; }
.lobby-quest-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.6), rgba(15, 23, 42, 0.7));
  border: 1px solid rgba(252, 211, 77, 0.14);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.lobby-quest-card:hover { transform: translateY(-2px); border-color: rgba(252, 211, 77, 0.35); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
.lobby-quest-card.is-completed { background: linear-gradient(135deg, rgba(217, 119, 6, 0.25), rgba(180, 83, 9, 0.35)); border-color: rgba(251, 191, 36, 0.5); }
.lobby-quest-card.is-claimed { opacity: 0.55; filter: saturate(0.7); }
.lobby-quest-icon { font-size: 28px; text-align: center; }
.lobby-quest-title { font-weight: 600; font-size: 14px; color: var(--text); }
.lobby-quest-meta {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 6px; font-size: 11px; color: var(--muted);
}
.lobby-quest-progress { margin-left: auto; font-weight: 600; color: var(--gold-bright); }
.lobby-quest-bar {
  height: 4px; border-radius: 999px;
  background: rgba(2, 6, 23, 0.5); overflow: hidden;
}
.lobby-quest-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  border-radius: 999px;
  transition: width 0.5s ease-out;
}
.lobby-quest-claim {
  background: var(--gold-gradient);
  color: #1a1a2e; font-weight: 700;
  border: 0; border-radius: 10px;
  padding: 8px 16px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
  white-space: nowrap;
  transition: transform 0.12s, box-shadow 0.12s;
}
.lobby-quest-claim:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(251, 191, 36, 0.6); }
.lobby-quest-claim:disabled { opacity: 0.6; cursor: default; transform: none; }
.lobby-quest-tick {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.55);
}

/* ---- Quick actions ---- */
.lobby-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.lobby-action {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.5), rgba(15, 23, 42, 0.7));
  border: 1px solid rgba(252, 211, 77, 0.15);
  color: var(--text); cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.lobby-action:not(.is-soon):not(.is-disabled):hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(251, 191, 36, 0.25);
}
.lobby-action-icon { font-size: 26px; }
.lobby-action-label { font-size: 12px; font-weight: 600; }
.lobby-action.is-soon, .lobby-action.is-disabled {
  opacity: 0.45; cursor: not-allowed; filter: grayscale(0.6);
}
.lobby-action-soon {
  position: absolute; top: 6px; right: 6px;
  font-size: 9px;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(168, 85, 247, 0.3);
  color: #e9d5ff; border: 1px solid rgba(168, 85, 247, 0.5);
}

/* ---- Guild pulse ---- */
.lobby-guild-pulse { display: grid; gap: 10px; }
.lobby-guild-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.lobby-guild-row:hover { border-color: rgba(252, 211, 77, 0.3); background: rgba(15, 23, 42, 0.75); }
.lobby-guild-row.is-mine {
  border-color: var(--gold);
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.1), rgba(15, 23, 42, 0.5));
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.15);
}
.lobby-guild-rank {
  font-family: "Cinzel Decorative", serif;
  font-size: 16px; font-weight: 700;
  color: var(--gold-bright);
  text-align: center;
}
.lobby-guild-body { min-width: 0; }
.lobby-guild-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
  margin-bottom: 4px;
}
.lobby-guild-name { font-weight: 600; }
.lobby-guild-meta { margin-left: auto; color: var(--muted); font-size: 11px; }
.lobby-guild-mine-tag {
  font-size: 9px; padding: 2px 6px; border-radius: 999px;
  background: var(--gold); color: #1a1a2e; font-weight: 700;
}
.lobby-guild-bar {
  height: 6px; border-radius: 999px;
  background: rgba(2, 6, 23, 0.6); overflow: hidden;
}
.lobby-guild-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.6s ease-out;
}
.lobby-guild-fill.bg-serpier  { background: linear-gradient(90deg, #0f766e, #14b8a6, #5eead4); }
.lobby-guild-fill.bg-nocturne { background: linear-gradient(90deg, #1d4ed8, #3b82f6, #93c5fd); }
.lobby-guild-fill.bg-feyralis { background: linear-gradient(90deg, #92400e, #d97706, #fbbf24); }
.lobby-guild-total {
  font-family: "Cinzel", serif;
  font-weight: 700; font-size: 16px;
  color: var(--gold-bright);
  min-width: 60px; text-align: right;
}

/* ---- Activity feed ---- */
.lobby-activity { display: grid; gap: 6px; }
.lobby-activity-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.lobby-activity-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.lobby-activity-icon.bucket-learn  { background: rgba(20, 184, 166, 0.2); }
.lobby-activity-icon.bucket-help   { background: rgba(236, 72, 153, 0.2); }
.lobby-activity-icon.bucket-effort { background: rgba(251, 146, 60, 0.2); }
.lobby-activity-icon.bucket-team   { background: rgba(168, 85, 247, 0.2); }
.lobby-activity-body { min-width: 0; }
.lobby-activity-reason {
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lobby-activity-time { font-size: 11px; color: var(--muted); }
.lobby-activity-pts {
  font-family: "Cinzel", serif; font-weight: 700; font-size: 15px;
  min-width: 50px; text-align: right;
}
.lobby-activity-pts.pos { color: #4ade80; }
.lobby-activity-pts.neg { color: #f87171; }

/* ============================================================
   Ranking — scope tabs + guild cards
   ============================================================ */
.ranking-scope-tabs {
  display: flex; gap: 6px;
  padding: 6px;
  margin: 0 0 14px;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(252, 211, 77, 0.18);
  border-radius: 14px;
}
.ranking-scope-tab {
  flex: 1;
  background: transparent; border: 0;
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.ranking-scope-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.ranking-scope-tab.active {
  background: var(--gold-gradient);
  color: #1a1a2e;
  box-shadow: 0 2px 10px rgba(251, 191, 36, 0.4);
}

.guild-rank-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.45), rgba(15, 23, 42, 0.7));
  border: 1px solid rgba(252, 211, 77, 0.18);
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.guild-rank-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.guild-rank-card.is-mine {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(15, 23, 42, 0.7));
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.18);
}
.guild-rank-card.rank-top-1 { box-shadow: 0 0 22px rgba(251, 191, 36, 0.22); }
.guild-rank-head {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 12px;
  align-items: center;
}
.guild-rank-no {
  font-family: "Cinzel Decorative", serif;
  font-size: 22px; font-weight: 700;
  color: var(--gold-bright);
  text-align: center;
}
.guild-rank-name {
  display: flex; align-items: center; gap: 8px;
  font-family: "Cinzel", serif;
  font-size: 18px; font-weight: 600;
}
.guild-rank-text { color: var(--text); }
.guild-rank-total {
  font-family: "Cinzel", serif;
  font-weight: 700; font-size: 20px;
  color: var(--gold-bright);
}
.guild-rank-bar {
  margin: 10px 0 8px;
  height: 8px; border-radius: 999px;
  background: rgba(2, 6, 23, 0.7); overflow: hidden;
  border: 1px solid rgba(252, 211, 77, 0.15);
}
.guild-rank-meta {
  display: flex; gap: 14px;
  font-size: 12px; color: var(--muted);
  margin-bottom: 8px;
}
.guild-rank-buckets {
  display: flex; flex-wrap: wrap; gap: 6px;
}

@media (max-width: 640px) {
  .ranking-scope-tab { font-size: 12px; padding: 9px 4px; }
  .guild-rank-head { grid-template-columns: 40px 1fr auto; gap: 8px; }
  .guild-rank-no { font-size: 18px; }
  .guild-rank-name { font-size: 15px; }
  .guild-rank-total { font-size: 16px; }
  .guild-rank-meta { gap: 10px; font-size: 11px; }
}

/* ============================================================
   CharacterSpriteStage — drops a full-body chibi sprite, soft aura,
   and rarity stars into any existing portrait slot on a card.
   Used by buildStudentCard (member cards).
   --cs-height : the stage's pixel height
   --cs-aura   : aura color (omit when no aura)
   ============================================================ */
.cs-stage {
  position: relative;
  width: 100%;
  height: var(--cs-height, 180px);
  display: flex; align-items: flex-end; justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 15%, rgba(168, 85, 247, 0.28), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(251, 191, 36, 0.18), transparent 60%),
    linear-gradient(180deg, #1e1b4b 0%, #312e81 60%, #14143a 100%);
  box-shadow:
    inset 0 -8px 22px rgba(0, 0, 0, 0.42),
    inset 0  6px 12px rgba(255, 255, 255, 0.06);
}
/* Floating sparkle dots for game feel */
.cs-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 18% 22%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 32%, rgba(252, 211, 77, 0.5) 50%, transparent 100%),
    radial-gradient(1px 1px at 38% 68%, rgba(255, 255, 255, 0.4) 50%, transparent 100%),
    radial-gradient(1px 1px at 88% 78%, rgba(196, 181, 253, 0.5) 50%, transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}

/* Aura — soft radial glow sitting BEHIND the sprite */
.cs-aura {
  position: absolute;
  left: 50%; bottom: 8%;
  width: 78%; height: 78%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%,
    color-mix(in srgb, var(--cs-aura, #fbbf24) 60%, transparent) 0%,
    color-mix(in srgb, var(--cs-aura, #fbbf24) 22%, transparent) 45%,
    transparent 75%);
  filter: blur(2px);
  pointer-events: none;
  animation: cs-aura-pulse 3.6s ease-in-out infinite;
}
@keyframes cs-aura-pulse {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1.0;  transform: translateX(-50%) scale(1.06); }
}

/* Sprite — either a PNG (when registry entry has spritePath) or the layered placeholder */
.cs-sprite {
  position: relative;
  z-index: 2;
  height: calc(var(--cs-height, 180px) * 0.95);
  display: flex; align-items: flex-end; justify-content: center;
}
.cs-sprite-img {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}
.cs-sprite .av-figure {
  height: 100%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.42));
}

/* Stars row */
.cs-stars {
  position: absolute;
  left: 0; right: 0;
  bottom: 4px;
  z-index: 3;
  display: flex; justify-content: center; gap: 2px;
  font-size: calc(var(--cs-height, 180px) * 0.085);
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
}
.cs-star { color: rgba(255, 255, 255, 0.18); }
.cs-star.is-filled { color: #fde68a; text-shadow: 0 0 6px rgba(251, 191, 36, 0.65), 0 1px 2px rgba(0, 0, 0, 0.6); }

/* Rarity border accents on the stage */
.cs-stage.cs-rarity-common    { border: 1px solid rgba(255, 255, 255, 0.08); }
.cs-stage.cs-rarity-rare      { border: 1px solid rgba(96, 165, 250, 0.55); box-shadow: inset 0 -8px 22px rgba(0, 0, 0, 0.42), inset 0 6px 12px rgba(96, 165, 250, 0.14), 0 0 14px rgba(96, 165, 250, 0.18); }
.cs-stage.cs-rarity-epic      { border: 1px solid rgba(168, 85, 247, 0.65); box-shadow: inset 0 -8px 22px rgba(0, 0, 0, 0.42), inset 0 6px 12px rgba(168, 85, 247, 0.16), 0 0 18px rgba(168, 85, 247, 0.22); }
.cs-stage.cs-rarity-legendary { border: 1px solid var(--gold);              box-shadow: inset 0 -8px 22px rgba(0, 0, 0, 0.42), inset 0 6px 12px rgba(251, 191, 36, 0.18), 0 0 22px rgba(251, 191, 36, 0.35); }

/* When a sprite stage occupies a card's existing photo slot — let the slot size it */
.student-photo.cs-photo-slot {
  background: transparent;
  display: block;
  padding: 0;
  border: none;
}
.student-photo.cs-photo-slot > .cs-stage {
  height: 100%;
}

/* ============================================================
   Chibi avatar — layered 2D figure for cards (Phase 14)
   Not isometric, not a room/scene system. Renders a chibi character
   in a portrait 3:4 box. Each layer fills the same 240×320 viewBox
   so SVG/PNG layers register to a shared anchor.
   ============================================================ */
.av-figure {
  position: relative;
  width: calc(var(--av-fig-size, 240px) * 0.75);
  height: var(--av-fig-size, 240px);
  margin: 0 auto;
  --av-skin: #e8b58a;
}
.av-fig-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.av-fig-layer svg { width: 100%; height: 100%; display: block; }
.av-fig-layer img { width: 100%; height: 100%; object-fit: contain; display: block; }
.av-fig-emoji {
  display: flex; align-items: flex-end; justify-content: center;
  font-size: calc(var(--av-fig-size, 240px) * 0.18);
  line-height: 1;
}
/* Z-order via stacking context (back → front matches LAYER_ORDER) */
.av-fig-effect    { z-index: 1; }
.av-fig-pet       { z-index: 2; }
.av-fig-body      { z-index: 3; color: var(--av-skin, #eab891); }
/* Skin tint flows through the body SVG via `fill="currentColor"` on body parts */
.av-fig-outfit    { z-index: 4; }
.av-fig-shoes     { z-index: 5; }
.av-fig-face      { z-index: 6; }
.av-fig-hair      { z-index: 7; }
.av-fig-accessory { z-index: 8;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: calc(var(--av-fig-size, 240px) * 0.21);
  font-size: calc(var(--av-fig-size, 240px) * 0.16);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));
}
/* Pet sits bottom-right, slightly behind body */
.av-fig-pet.av-fig-emoji {
  align-items: flex-end; justify-content: flex-end;
  padding: 0 2% 4% 0;
  font-size: calc(var(--av-fig-size, 240px) * 0.26);
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.45));
}

/* Idle breathing animation — gentle bob */
.av-figure {
  animation: av-fig-bob 3.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
@keyframes av-fig-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
/* Card-large gets more breath; tiny is static so it doesn't jitter at small size */
.av-card-tiny .av-figure { animation: none; }
.av-card-large .av-figure { animation-duration: 4s; }

/* ============================================================
   Avatar card chrome
   ============================================================ */
.av-card {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: stretch;
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.55), rgba(15, 23, 42, 0.85));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px 10px 12px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.av-card-tiny   { width: 86px; }
.av-card-small  { width: 150px; }
.av-card-medium { width: 220px; }
.av-card-large  { width: 280px; }
.av-card-stage {
  position: relative;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(168, 85, 247, 0.35), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(251, 191, 36, 0.18), transparent 60%),
    linear-gradient(180deg, #1e1b4b 0%, #312e81 60%, #14143a 100%);
  border-radius: 14px;
  padding: 6px;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 -8px 18px rgba(0, 0, 0, 0.35), inset 0 6px 12px rgba(255, 255, 255, 0.08);
}
.av-card-stage::before {
  /* floating sparkle dots for game feel */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 18% 22%, rgba(255, 255, 255, 0.55) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 32%, rgba(252, 211, 77, 0.55) 50%, transparent 100%),
    radial-gradient(1px 1px at 38% 68%, rgba(255, 255, 255, 0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 88% 78%, rgba(196, 181, 253, 0.55) 50%, transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}
.av-card-tiny   .av-card-stage { padding: 2px; }
.av-card-foot { text-align: center; margin-top: 6px; }
.av-card-name {
  font-weight: 700; font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.av-card-tiny .av-card-name { font-size: 11px; }
.av-card-large .av-card-name { font-size: 16px; font-family: "Cinzel", serif; color: var(--gold-bright); }
.av-card-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.av-card-role {
  position: absolute; top: 6px; right: 8px;
  font-size: 18px; line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
}
.av-card-house {
  position: absolute; top: 6px; left: 8px;
}
.av-card-ribbon {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font-size: 10px; padding: 3px 10px; border-radius: 999px;
  background: rgba(168, 85, 247, 0.25); color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.5);
}

/* House-tinted card borders */
.av-card-house-serpier  { border-color: rgba(20, 184, 166, 0.55); box-shadow: 0 6px 22px rgba(20, 184, 166, 0.15); }
.av-card-house-nocturne { border-color: rgba(96, 165, 250, 0.55); box-shadow: 0 6px 22px rgba(96, 165, 250, 0.15); }
.av-card-house-feyralis { border-color: rgba(251, 191, 36, 0.55); box-shadow: 0 6px 22px rgba(251, 191, 36, 0.15); }

/* ============================================================
   Wardrobe page (#wardrobe)
   ============================================================ */
.wardrobe-panel {
  padding: 0;
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.55), rgba(10, 10, 22, 0.92));
  border: 1px solid var(--border);
  overflow: hidden;
}
.wardrobe-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(30, 27, 75, 0.4));
  border-bottom: 1px solid rgba(252, 211, 77, 0.15);
}
.wardrobe-head .back-btn {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  padding: 8px 14px; border-radius: 999px;
  cursor: pointer; font: inherit; font-size: 13px;
}
.wardrobe-title {
  flex: 1; min-width: 0;
  font-family: "Cinzel", serif;
  font-size: 16px; font-weight: 700;
  color: var(--gold-bright); text-align: center;
}
.wardrobe-save {
  background: var(--gold-gradient); color: #1a1a2e;
  border: 0; border-radius: 999px;
  padding: 8px 18px; font: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(251, 191, 36, 0.4);
}
.wardrobe-save:disabled { background: rgba(255,255,255,0.08); color: var(--muted); cursor: not-allowed; box-shadow: none; }

.wardrobe-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  padding: 18px 20px;
}
.wardrobe-preview {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.wardrobe-preview-stage {
  width: 100%;
  display: flex; justify-content: center;
}
.wardrobe-reset {
  background: rgba(244, 63, 94, 0.15); color: #fda4af;
  border: 1px solid rgba(244, 63, 94, 0.4);
  border-radius: 10px;
  padding: 6px 14px; font: inherit; font-size: 12px;
  cursor: pointer;
}
.wardrobe-reset:hover { background: rgba(244, 63, 94, 0.25); }

.wardrobe-picker {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.wardrobe-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(252, 211, 77, 0.18);
  border-radius: 14px;
}
.wardrobe-tab {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; color: var(--muted);
  padding: 8px 14px; border-radius: 10px;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.wardrobe-tab:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.wardrobe-tab.active {
  background: var(--gold-gradient); color: #1a1a2e;
  box-shadow: 0 2px 10px rgba(251, 191, 36, 0.4);
}
.wardrobe-tab-icon { font-size: 16px; }

.wardrobe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  align-content: start;
}
.wardrobe-item {
  position: relative;
  background: rgba(15, 23, 42, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 6px 6px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
  font: inherit; color: var(--text);
}
.wardrobe-item:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 6px 14px rgba(0,0,0,0.4); }
.wardrobe-item.is-selected { border-color: var(--gold); background: linear-gradient(180deg, rgba(251, 191, 36, 0.15), rgba(15, 23, 42, 0.75)); box-shadow: 0 0 14px rgba(251,191,36,0.3); }
.wardrobe-item.is-locked { filter: grayscale(0.7) brightness(0.6); cursor: not-allowed; }
.wardrobe-item-thumb {
  width: 96px; height: 96px;
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.55);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.wardrobe-item-thumb .av-thumb { width: 100%; height: 100%; }
.wardrobe-item-label {
  font-size: 11px; color: var(--text);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.wardrobe-item-lock {
  position: absolute; top: 6px; right: 6px;
  font-size: 14px;
}

/* Thumbnail layout — used inside .wardrobe-item-thumb */
.av-thumb {
  width: var(--av-thumb-size, 64px);
  height: var(--av-thumb-size, 64px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.av-thumb svg { width: 100%; height: 100%; }
.av-thumb img { width: 100%; height: 100%; object-fit: contain; }
.av-thumb-emoji { font-size: calc(var(--av-thumb-size, 64px) * 0.7); }
.av-thumb-tint { border-radius: 50%; }
.av-thumb-none { color: var(--muted); font-size: 26px; }

@media (max-width: 720px) {
  .wardrobe-body { grid-template-columns: 1fr; }
  .wardrobe-preview-stage .av-card { width: 220px; }
  .wardrobe-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .wardrobe-item-thumb { width: 80px; height: 80px; }
}

/* When the lobby hero swaps to chibi mode, drop the legacy gold border/frame */
.lobby-hero-avatar-wrap.lobby-hero-avatar-chibi {
  width: auto; height: auto;
}
.lobby-hero-avatar-wrap.lobby-hero-avatar-chibi .lobby-hero-frame,
.lobby-hero-avatar-wrap.lobby-hero-avatar-chibi .lobby-hero-avatar { display: none; }

/* ============================================================
   Help / Scoring Explanation page (#help)
   ============================================================ */
.help-panel {
  padding: 0;
  background: linear-gradient(180deg, rgba(15, 17, 35, 0.85), rgba(10, 10, 22, 0.92));
  border: 1px solid var(--border);
  overflow: hidden;
}
.help-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(30, 27, 75, 0.4));
  border-bottom: 1px solid rgba(252, 211, 77, 0.18);
}
.help-head .back-btn {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  padding: 8px 14px; border-radius: 999px;
  cursor: pointer; font: inherit; font-size: 13px;
  white-space: nowrap;
}
.help-title { flex: 1; min-width: 0; }
.help-title h1 {
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: 22px; font-weight: 700;
  background: var(--gold-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.help-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.help-section { padding: 22px 20px; }
.help-section + .help-section { border-top: 1px solid rgba(252, 211, 77, 0.08); }
.help-h2 {
  margin: 0 0 14px;
  font-family: "Cinzel", serif;
  font-size: 17px; font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: 0.3px;
}
.help-lede { color: var(--text); line-height: 1.6; margin: 0 0 14px; }

/* ---- Section 1: twin coin cards ---- */
.help-twin {
  display: grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
}
.help-coin-card {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid;
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.55), rgba(15, 23, 42, 0.7));
  position: relative;
  overflow: hidden;
}
.help-coin-personal {
  border-color: var(--gold);
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.18), inset 0 0 32px rgba(251, 191, 36, 0.08);
}
.help-coin-guild {
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.22), inset 0 0 32px rgba(168, 85, 247, 0.1);
}
.help-coin-head {
  display: flex; align-items: center; gap: 10px;
  font-family: "Cinzel", serif;
  font-size: 16px; font-weight: 700;
  margin-bottom: 10px;
  color: var(--gold-bright);
}
.help-coin-guild .help-coin-head { color: #d8b4fe; }
.help-coin-icon { font-size: 22px; }
.help-coin-card p { margin: 0 0 12px; color: var(--text); line-height: 1.55; }
.help-coin-card ul { margin: 0; padding-left: 20px; color: var(--text); line-height: 1.7; }
.help-coin-card li b { color: var(--gold-bright); }

/* ---- Section 2: flow diagram ---- */
.help-flow {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 18px;
}
.help-flow-chain {
  padding: 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.help-flow-chain-personal { border-color: rgba(252, 211, 77, 0.35); }
.help-flow-chain-guild    { border-color: rgba(168, 85, 247, 0.45); }
.help-flow-step {
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: var(--text);
}
.help-flow-step.start { background: rgba(252, 211, 77, 0.1); color: var(--gold-bright); font-weight: 600; }
.help-flow-step.pill  { background: rgba(168, 85, 247, 0.18); border-color: rgba(168, 85, 247, 0.4); }
.help-flow-step.end   { background: rgba(2, 6, 23, 0.7); color: var(--gold-bright); }
.help-flow-chain-personal .help-flow-step.pill { background: rgba(252, 211, 77, 0.18); border-color: var(--gold); color: var(--gold-bright); }
.help-flow-arrow { color: var(--gold); font-size: 18px; line-height: 1; }

.help-key {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(252, 211, 77, 0.3);
  border-radius: 14px;
  padding: 16px;
}
.help-key-title {
  font-family: "Cinzel", serif;
  font-size: 14px; font-weight: 600;
  color: var(--gold-bright);
  margin-bottom: 10px;
}
.help-key-row {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0; font-size: 14px;
}
.help-key-pill {
  display: inline-block;
  padding: 4px 12px; border-radius: 999px;
  background: var(--gold-gradient); color: #1a1a2e;
  font-weight: 700; font-size: 12px;
}
.help-key-pill-guild { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; }
.help-key-em { color: var(--gold-bright); font-weight: 500; }

/* ---- Section 3: activity table ---- */
.help-table-wrap { overflow-x: auto; }
.help-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(252, 211, 77, 0.18);
  border-radius: 12px;
  overflow: hidden;
}
.help-table thead th {
  background: rgba(30, 27, 75, 0.7);
  color: var(--gold-bright);
  font-family: "Cinzel", serif;
  font-weight: 600; font-size: 13px;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(252, 211, 77, 0.2);
}
.help-table tbody td {
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  vertical-align: top;
}
.help-table tbody tr:hover { background: rgba(252, 211, 77, 0.05); }
.help-th-pill {
  display: inline-block;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(252, 211, 77, 0.18);
  border: 1px solid var(--gold);
  font-size: 11px;
}
.help-th-pill-guild { background: rgba(168, 85, 247, 0.22); border-color: rgba(168, 85, 247, 0.55); color: #d8b4fe; }
.help-act-icon { display: inline-block; width: 22px; text-align: center; }

/* ---- Section 4: formula + attendance examples ---- */
.help-formula {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  padding: 16px;
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(252, 211, 77, 0.3);
  border-radius: 14px;
  margin: 14px 0;
  font-family: "Cinzel", serif;
  font-size: 16px;
}
.help-formula-text { color: var(--text); }
.help-formula-eq   { color: var(--gold-bright); font-weight: 700; font-size: 22px; }
.help-formula-num  {
  color: var(--gold-bright); font-weight: 700; font-size: 22px;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}
.help-attend-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 14px;
}
.help-attend-card {
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.55), rgba(15, 23, 42, 0.75));
  border: 1px solid rgba(252, 211, 77, 0.2);
  text-align: center;
}
.help-attend-name { font-weight: 700; color: var(--gold-bright); margin-bottom: 6px; }
.help-attend-desc { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
.help-attend-result {
  font-family: "Cinzel", serif;
  font-weight: 700; font-size: 16px;
  color: var(--gold-bright);
  padding: 6px 12px;
  background: rgba(252, 211, 77, 0.15);
  border-radius: 8px;
  display: inline-block;
}
.help-callout {
  padding: 12px 16px;
  background: rgba(168, 85, 247, 0.12);
  border-left: 4px solid #a855f7;
  border-radius: 8px;
  color: var(--text);
  line-height: 1.6;
  font-size: 14px;
}
.help-callout-team { border-left-color: var(--gold); background: rgba(251, 191, 36, 0.1); }
.help-callout-info { border-left-color: rgba(96, 165, 250, 0.8); background: rgba(59, 130, 246, 0.1); }

/* ---- Section 5: stat cards + total ---- */
.help-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 14px;
}
.help-stat-card {
  padding: 14px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.55), rgba(15, 23, 42, 0.75));
  border: 1px solid rgba(252, 211, 77, 0.18);
  text-align: center;
}
.help-stat-icon { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.help-stat-title { font-weight: 700; font-size: 13px; color: var(--text); margin-bottom: 4px; }
.help-stat-cap {
  display: inline-block;
  padding: 2px 10px; border-radius: 999px;
  background: var(--gold-gradient); color: #1a1a2e;
  font-weight: 700; font-size: 11px;
  margin-bottom: 8px;
}
.help-stat-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }
.help-total-line {
  text-align: center;
  padding: 14px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(120, 53, 15, 0.32));
  border: 1px solid var(--gold);
  border-radius: 12px;
  color: var(--gold-bright);
  font-family: "Cinzel", serif;
  font-size: 16px;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.25);
}

/* ---- Section 6: list ---- */
.help-list-game {
  margin: 0 0 14px;
  padding-left: 0;
  list-style: none;
  display: grid; gap: 6px;
}
.help-list-game li {
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}

/* ---- Section 7: tab cards ---- */
.help-tab-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
  margin-bottom: 14px;
}
.help-tab-card {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.help-tab-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.help-tab-icon { font-size: 18px; }
.help-tab-name { font-weight: 600; color: var(--gold-bright); font-size: 14px; }
.help-tab-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ---- Section 8: example ---- */
.help-example-head {
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 17px; font-weight: 700;
  color: var(--gold-bright);
  margin-bottom: 10px;
}
.help-example-actions {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-bottom: 14px;
}
.help-chip {
  padding: 5px 12px; border-radius: 999px;
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #d8b4fe;
  font-size: 12px;
}
.help-example-twin {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.help-example-card {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid;
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.55), rgba(15, 23, 42, 0.75));
}
.help-example-card-head { font-family: "Cinzel", serif; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.help-example-card ul { margin: 0 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.8; }
.help-example-total {
  padding: 8px 12px;
  background: rgba(252, 211, 77, 0.15);
  border-radius: 8px;
  font-family: "Cinzel", serif;
  font-weight: 700; color: var(--gold-bright);
  text-align: center;
}
.help-example-subtotal {
  padding: 8px 12px;
  background: rgba(168, 85, 247, 0.15);
  border-radius: 8px;
  font-family: "Cinzel", serif;
  font-weight: 700; color: #d8b4fe;
  text-align: center;
  margin-bottom: 6px;
}
.help-example-team {
  padding: 8px 12px;
  background: rgba(168, 85, 247, 0.22);
  border: 1px dashed rgba(168, 85, 247, 0.55);
  border-radius: 8px;
  font-size: 12px;
  text-align: center;
  color: #d8b4fe;
}

/* ---- Section 9: FAQ accordion ---- */
.help-faq-list { display: grid; gap: 8px; }
.help-faq-item {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(252, 211, 77, 0.15);
  border-radius: 12px;
  padding: 0 14px;
  transition: border-color 0.15s;
}
.help-faq-item[open] { border-color: var(--gold); }
.help-faq-q {
  padding: 14px 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px;
}
.help-faq-q::after { content: "▾"; color: var(--gold-bright); transition: transform 0.18s; }
.help-faq-item[open] .help-faq-q::after { transform: rotate(180deg); }
.help-faq-q::-webkit-details-marker { display: none; }
.help-faq-a {
  padding: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: -2px;
  padding-top: 12px;
}

/* ---- Section 10: footer ---- */
.help-footer { text-align: center; }
.help-footer-poem {
  font-size: 15px; line-height: 1.7;
  color: var(--text);
  margin: 0 0 12px;
}
.help-footer-poem b { color: var(--gold-bright); }
.help-footer-rule {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(168, 85, 247, 0.12));
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-family: "Cinzel", serif;
  color: var(--gold-bright);
  font-size: 13px;
  margin-bottom: 16px;
}
.help-footer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---- Mobile responsiveness ---- */
@media (max-width: 720px) {
  .help-title h1 { font-size: 18px; }
  .help-subtitle { font-size: 12px; }
  .help-section { padding: 16px 14px; }
  .help-h2 { font-size: 15px; }
  .help-twin,
  .help-flow,
  .help-example-twin { grid-template-columns: 1fr; }
  .help-attend-grid { grid-template-columns: 1fr; }
  .help-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .help-tab-grid { grid-template-columns: 1fr; }
  .help-coin-card,
  .help-example-card { padding: 14px; }
  .help-formula { font-size: 14px; padding: 12px; }
  .help-formula-eq, .help-formula-num { font-size: 18px; }
  .help-footer-poem { font-size: 13px; }
  .help-footer-rule { font-size: 11px; padding: 8px 14px; }
  .help-table thead th { padding: 10px 8px; font-size: 12px; }
  .help-table tbody td { padding: 10px 8px; font-size: 12px; }
}

/* ============================================================
   Equipped-item overlays — appear on top of any avatar img.
   Use:
     <div class="has-av-overlay" style="--av-size: 64px">
       <img src="..." />
       <span class="av-eq av-eq-head">👑</span>
       ...
     </div>
   --av-size = the avatar's visible side length. All overlay sizes
   derive from it so the same markup looks proportional at any scale.
   ============================================================ */
.has-av-overlay {
  position: relative;
  --av-size: 64px;
}
.av-eq {
  position: absolute;
  pointer-events: none;
  line-height: 1;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  animation: av-eq-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes av-eq-pop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.av-eq-head {
  top: calc(var(--av-size) * -0.22);
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(var(--av-size) * 0.55);
}
.av-eq-pet {
  bottom: calc(var(--av-size) * -0.12);
  right: calc(var(--av-size) * -0.16);
  font-size: calc(var(--av-size) * 0.45);
}
.av-eq-aura {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--av-size) * 1.6);
  opacity: 0.25;
  filter: blur(2px) drop-shadow(0 0 calc(var(--av-size) * 0.18) rgba(251, 191, 36, 0.6));
  animation: av-eq-aura-spin 14s linear infinite;
  z-index: 0;
}
@keyframes av-eq-aura-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.av-eq-frame {
  inset: calc(var(--av-size) * -0.06);
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow:
    0 0 calc(var(--av-size) * 0.2) rgba(251, 191, 36, 0.55),
    inset 0 0 calc(var(--av-size) * 0.15) rgba(251, 191, 36, 0.35);
  font-size: 0;
  background: transparent;
  z-index: 1;
}

/* HUD-specific shrink: head overlay should sit just above the portrait edge */
.hud-portrait.has-av-overlay { overflow: visible; }
.hud-portrait.has-av-overlay .av-eq-head { top: calc(var(--av-size) * -0.28); }
.hud-portrait .hud-rank-badge { z-index: 3; }

/* Lobby hero — slightly larger head/pet for visibility */
.lobby-hero-avatar-wrap.has-av-overlay { overflow: visible; }
.lobby-hero-avatar-wrap.has-av-overlay .av-eq-head { font-size: calc(var(--av-size) * 0.6); top: calc(var(--av-size) * -0.3); }
.lobby-hero-avatar-wrap.has-av-overlay .av-eq-frame {
  /* Defer to the existing gold frame already on .lobby-hero-avatar */
  display: none;
}

/* ============================================================
   Daily Quiz Gauntlet (Phase 12)
   ============================================================ */
.dq-panel {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.55), rgba(10, 10, 22, 0.92));
  border: 1px solid rgba(252, 211, 77, 0.18);
}
.dq-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(30, 27, 75, 0.4));
  border-bottom: 1px solid rgba(252, 211, 77, 0.15);
}
.dq-head .back-btn {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit; font-size: 13px;
}
.dq-head-title {
  font-family: "Cinzel", serif;
  font-size: 16px; font-weight: 700;
  color: var(--gold-bright);
  text-align: center;
  flex: 1; min-width: 0;
}
.dq-progress-text {
  font-family: "Cinzel Decorative", serif;
  font-size: 18px; font-weight: 700;
  color: var(--gold-bright);
  background: rgba(15, 23, 42, 0.6);
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--gold);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.25);
}
.dq-progress-bar {
  height: 8px;
  background: rgba(2, 6, 23, 0.7);
  position: relative;
}
.dq-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #fde68a, #facc15);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.55);
  transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.dq-stage { padding: 22px 20px; }

/* ---- Active question ---- */
.dq-play-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 16px;
}
.dq-play-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.dq-subject-chip, .dq-diff-chip {
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dq-subject-chip { background: rgba(20, 184, 166, 0.22); color: #5eead4; }
.dq-subject-chip.subj-math    { background: rgba(59, 130, 246, 0.22); color: #93c5fd; }
.dq-subject-chip.subj-physics { background: rgba(244, 63, 94, 0.22); color: #fda4af; }
.dq-subject-chip.subj-chemistry { background: rgba(168, 85, 247, 0.22); color: #d8b4fe; }
.dq-subject-chip.subj-biology { background: rgba(34, 197, 94, 0.22); color: #86efac; }
.dq-subject-chip.subj-english { background: rgba(251, 191, 36, 0.22); color: #fde68a; }
.dq-subject-chip.subj-thai    { background: rgba(236, 72, 153, 0.22); color: #f9a8d4; }
.dq-subject-chip.subj-social  { background: rgba(251, 146, 60, 0.22); color: #fdba74; }
.dq-diff-chip.diff-EASY   { background: rgba(34, 197, 94, 0.18); color: #86efac; }
.dq-diff-chip.diff-MEDIUM { background: rgba(251, 146, 60, 0.18); color: #fdba74; }
.dq-diff-chip.diff-HARD   { background: rgba(244, 63, 94, 0.22); color: #fda4af; }

/* Circular timer */
.dq-timer {
  --pct: 100;
  --ring-color: var(--gold);
  position: relative;
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    conic-gradient(var(--ring-color) calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0);
  flex-shrink: 0;
  transition: --pct 0.6s linear;
}
.dq-timer::before {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: var(--panel-solid);
}
.dq-timer-label, .dq-timer-text, .dq-timer-unit { position: relative; z-index: 1; }
.dq-timer-label { font-size: 9px; color: var(--muted); }
.dq-timer-text {
  font-family: "Cinzel", serif;
  font-size: 22px; font-weight: 700; color: var(--gold-bright);
  line-height: 1;
}
.dq-timer-unit { font-size: 10px; color: var(--muted); }

.dq-question-text {
  font-size: 18px; line-height: 1.5;
  padding: 18px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(252, 211, 77, 0.18);
  border-radius: 14px;
  margin-bottom: 18px;
  text-align: center;
}

.dq-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.dq-choice {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  font: inherit; font-size: 15px; text-align: left;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.55), rgba(15, 23, 42, 0.75));
  border: 2px solid rgba(252, 211, 77, 0.18);
  color: var(--text);
  border-radius: 14px;
  cursor: pointer;
  min-height: 64px;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
}
.dq-choice:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(251, 191, 36, 0.2);
}
.dq-choice:disabled { cursor: default; }
/* Picked choice (the one the student tapped — before we know server verdict) */
.dq-choice.picked {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(126, 34, 206, 0.45));
  border-color: rgba(168, 85, 247, 0.85);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
}
/* Correct choice — always shown green after submit, regardless of what the user picked */
.dq-choice.correct {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(22, 101, 52, 0.55));
  border-color: rgba(74, 222, 128, 0.85);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.45);
  animation: dq-choice-correct-pulse 1.2s ease-out;
}
.dq-choice.correct .dq-choice-letter {
  background: rgba(74, 222, 128, 0.3);
  border-color: rgba(74, 222, 128, 0.7);
  color: #4ade80;
}
@keyframes dq-choice-correct-pulse {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.04); }
  40%  { transform: scale(1); }
}
/* Wrong choice — the one the student picked when wrong */
.dq-choice.wrong {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.3), rgba(127, 29, 29, 0.5));
  border-color: rgba(248, 113, 113, 0.85);
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.4);
  animation: dq-choice-wrong-shake 0.4s ease;
}
.dq-choice.wrong .dq-choice-letter {
  background: rgba(248, 113, 113, 0.3);
  border-color: rgba(248, 113, 113, 0.7);
  color: #fda4af;
}
@keyframes dq-choice-wrong-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
/* Disabled "neutral" choices (the un-picked ones that weren't correct) — fade slightly */
.dq-choice:disabled:not(.picked):not(.correct):not(.wrong) { opacity: 0.45; }

/* Inline feedback banner shown under choices, replaces the old popup screen */
.dq-inline-feedback {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  animation: dq-pop 0.3s ease-out;
}
.dq-inline-feedback.is-correct {
  border-color: rgba(34, 197, 94, 0.65);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(15, 23, 42, 0.7));
}
.dq-inline-feedback.is-wrong {
  border-color: rgba(244, 63, 94, 0.65);
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), rgba(15, 23, 42, 0.7));
}
.dq-inline-feedback.is-timeout {
  border-color: rgba(251, 146, 60, 0.65);
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(15, 23, 42, 0.7));
}
.dq-inline-headline {
  font-family: "Cinzel", serif;
  font-size: 18px; font-weight: 700;
  margin-bottom: 6px;
}
.dq-inline-feedback.is-correct .dq-inline-headline { color: #4ade80; }
.dq-inline-feedback.is-wrong   .dq-inline-headline { color: #fda4af; }
.dq-inline-feedback.is-timeout .dq-inline-headline { color: #fdba74; }
.dq-inline-explain {
  font-size: 13px; line-height: 1.5;
  color: var(--text);
  background: rgba(2, 6, 23, 0.5);
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid var(--gold);
  margin: 8px auto;
  max-width: 540px;
  text-align: left;
}
.dq-inline-next {
  font-size: 11px; color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0.3px;
}
.dq-choice-letter {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700; font-size: 18px;
  color: var(--gold-bright);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(252, 211, 77, 0.15);
  border: 1px solid rgba(252, 211, 77, 0.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dq-choice-text { flex: 1; }

.dq-play-foot {
  font-size: 12px; color: var(--muted);
  text-align: center;
  padding-top: 6px;
}
.dq-counter b { color: var(--gold-bright); }

/* ---- Feedback ---- */
.dq-feedback {
  text-align: center;
  padding: 28px 20px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.08);
}
.dq-feedback.is-correct { border-color: rgba(34, 197, 94, 0.6); box-shadow: 0 0 22px rgba(34, 197, 94, 0.25); }
.dq-feedback.is-wrong   { border-color: rgba(244, 63, 94, 0.55); box-shadow: 0 0 22px rgba(244, 63, 94, 0.2); }
.dq-feedback.is-timeout { border-color: rgba(251, 146, 60, 0.55); box-shadow: 0 0 22px rgba(251, 146, 60, 0.22); }
.dq-fb-emoji {
  font-size: 56px;
  margin-bottom: 8px;
  animation: dq-pop 0.4s ease-out;
}
@keyframes dq-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.dq-feedback.is-correct .dq-fb-emoji { color: #4ade80; }
.dq-feedback.is-wrong   .dq-fb-emoji { color: #fda4af; }
.dq-feedback.is-timeout .dq-fb-emoji { color: #fdba74; }
.dq-fb-title {
  font-family: "Cinzel", serif;
  font-size: 22px; font-weight: 700;
  margin-bottom: 10px;
}
.dq-fb-correct {
  font-size: 13px; color: var(--gold-bright);
  margin-bottom: 6px;
}
.dq-fb-explain {
  font-size: 14px;
  background: rgba(2, 6, 23, 0.5);
  padding: 12px 16px; border-radius: 10px;
  border-left: 3px solid var(--gold);
  margin: 14px auto;
  max-width: 480px;
  text-align: left;
  line-height: 1.5;
}
.dq-fb-progress-text { font-size: 14px; color: var(--muted); margin: 14px 0; }
.dq-fb-progress-text b { color: var(--gold-bright); font-size: 16px; }

/* ---- Completion ---- */
.dq-done {
  text-align: center;
  padding: 36px 20px;
}
.dq-done-emoji { font-size: 72px; margin-bottom: 10px; animation: dq-pop 0.5s ease-out; }
.dq-done-title {
  font-family: "Cinzel", serif;
  font-size: 24px; font-weight: 700;
  background: var(--gold-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 8px;
}
.dq-done-sub { color: var(--muted); margin-bottom: 22px; font-size: 14px; }
.dq-done-reward {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(180, 83, 9, 0.3));
  border: 1px solid var(--gold);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
  font-family: "Cinzel", serif;
  font-weight: 600; color: var(--gold-bright);
  margin-bottom: 18px;
}
.dq-done-reward-icon { font-size: 20px; }
.dq-done-stats {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
  font-size: 12px; color: var(--muted);
  margin-bottom: 22px;
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .dq-head { padding: 12px 14px; }
  .dq-head-title { font-size: 14px; }
  .dq-progress-text { font-size: 15px; padding: 5px 12px; }
  .dq-stage { padding: 16px 14px; }
  .dq-timer { width: 60px; height: 60px; }
  .dq-timer-text { font-size: 18px; }
  .dq-question-text { font-size: 16px; padding: 14px; }
  .dq-choices { grid-template-columns: 1fr; gap: 8px; }
  .dq-choice { padding: 14px; font-size: 14px; min-height: 56px; }
  .dq-choice-letter { width: 32px; height: 32px; font-size: 16px; }
  .dq-fb-emoji { font-size: 48px; }
  .dq-fb-title { font-size: 18px; }
  .dq-done-emoji { font-size: 56px; }
  .dq-done-title { font-size: 18px; }
}

/* ============================================================
   Shop — Reward catalog (Phase 7)
   ============================================================ */
.shop-panel { padding: 18px 20px; }
.shop-head-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.shop-wallet {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.shop-balance {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid;
}
.shop-balance-gems {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(30, 64, 175, 0.32));
  border-color: rgba(96, 165, 250, 0.65);
  box-shadow: 0 0 14px rgba(96, 165, 250, 0.25);
}
.shop-balance-points {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(120, 53, 15, 0.32));
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.25);
}
.shop-balance-icon { font-size: 16px; }
.shop-balance-val {
  font-family: "Cinzel", serif;
  font-weight: 700; font-size: 18px;
  text-shadow: 0 0 8px currentColor;
}
.shop-balance-gems   .shop-balance-val { color: #bfdbfe; }
.shop-balance-points .shop-balance-val { color: var(--gold-bright); }
.shop-balance-label { font-size: 11px; color: var(--muted); }
.shop-exchange-btn {
  font-family: inherit; font-weight: 600; font-size: 13px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.7), rgba(126, 34, 206, 0.85));
  color: white;
  border: 1px solid rgba(168, 85, 247, 0.8);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35);
  transition: transform 0.12s, box-shadow 0.12s;
}
.shop-exchange-btn:hover:not(:disabled) {
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.55);
}
.shop-exchange-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Exchange modal */
.exchange-card { max-width: 420px; }
.exchange-body { padding: 18px 22px 22px; }
.exchange-current {
  padding: 14px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(252, 211, 77, 0.15);
  margin-bottom: 14px;
}
.exchange-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-size: 14px;
}
.exchange-row b { color: var(--gold-bright); font-family: "Cinzel", serif; }
.exchange-row.exchange-rate {
  border-top: 1px dashed rgba(252, 211, 77, 0.2);
  margin-top: 6px; padding-top: 10px; font-size: 12px;
}
.exchange-row.exchange-rate b { color: #d8b4fe; }
.exchange-warn {
  padding: 14px; border-radius: 10px;
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid rgba(251, 146, 60, 0.5);
  color: #fdba74;
  font-size: 13px;
  text-align: center;
}
.exchange-label {
  display: block; font-size: 13px; color: var(--muted);
  margin-bottom: 8px;
}
.exchange-input-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.exchange-step {
  width: 40px; height: 44px; border-radius: 10px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(252, 211, 77, 0.25);
  color: var(--text);
  font: inherit; font-size: 22px; font-weight: 700;
  cursor: pointer;
}
.exchange-step:hover { background: rgba(252, 211, 77, 0.15); }
#exchGems {
  flex: 1;
  height: 44px;
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(252, 211, 77, 0.3);
  border-radius: 10px;
  color: var(--gold-bright);
  font-family: "Cinzel", serif; font-size: 22px; font-weight: 700;
  text-align: center;
  padding: 0 8px;
}
.exchange-quick { gap: 6px; }
.exchange-quick-btn {
  flex: 1; padding: 6px 4px;
  font: inherit; font-size: 12px; font-weight: 600;
  background: rgba(168, 85, 247, 0.2);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #d8b4fe;
  border-radius: 8px;
  cursor: pointer;
}
.exchange-quick-btn:hover { background: rgba(168, 85, 247, 0.35); }
.exchange-summary {
  text-align: center; font-size: 15px;
  margin: 14px 0;
  color: var(--text);
}
.exchange-summary b { color: var(--gold-bright); font-family: "Cinzel", serif; }
.exchange-error {
  font-size: 12px; color: #fda4af;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.4);
  padding: 8px 12px; border-radius: 8px;
  margin-bottom: 10px;
}
.exchange-actions { display: flex; gap: 8px; justify-content: flex-end; }

.shop-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 12px 0;
}
.shop-filter {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(252, 211, 77, 0.15);
  color: var(--muted);
  font-size: 13px; font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.shop-filter:hover { color: var(--text); border-color: var(--gold); }
.shop-filter.active {
  background: var(--gold-gradient); color: #1a1a2e; border-color: transparent;
  box-shadow: 0 2px 10px rgba(251, 191, 36, 0.4);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.shop-card {
  position: relative;
  padding: 16px 14px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.55), rgba(15, 23, 42, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.shop-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
.shop-card.rarity-rare      { border-color: rgba(59, 130, 246, 0.55); box-shadow: 0 0 14px rgba(59, 130, 246, 0.15); }
.shop-card.rarity-epic      { border-color: rgba(168, 85, 247, 0.65); box-shadow: 0 0 18px rgba(168, 85, 247, 0.22); }
.shop-card.rarity-legendary { border-color: var(--gold); box-shadow: 0 0 22px rgba(251, 191, 36, 0.35); background: linear-gradient(180deg, rgba(120, 53, 15, 0.45), rgba(15, 23, 42, 0.85)); }
.shop-card.is-owned  { opacity: 0.6; filter: saturate(0.7); }
.shop-card.is-locked { opacity: 0.7; }

.shop-card-rarity {
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(2, 6, 23, 0.7);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.shop-card.rarity-rare      .shop-card-rarity { color: #93c5fd; border-color: rgba(59, 130, 246, 0.4); }
.shop-card.rarity-epic      .shop-card-rarity { color: #d8b4fe; border-color: rgba(168, 85, 247, 0.5); }
.shop-card.rarity-legendary .shop-card-rarity { color: #fde68a; border-color: var(--gold); }

.shop-card-icon {
  font-size: 56px; line-height: 1;
  margin: 4px 0 10px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}
.shop-card-name {
  font-weight: 700; font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
}
.shop-card-desc {
  font-size: 11px; color: var(--muted);
  min-height: 28px;
  line-height: 1.35;
}
.shop-card-stock {
  font-size: 10px; color: var(--muted);
  margin-top: 4px;
}
.shop-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  margin-top: 12px;
}
.shop-card-cost {
  font-family: "Cinzel", serif;
  font-weight: 700; font-size: 15px;
  color: var(--gold-bright);
}
.shop-card-cost-icon { font-size: 13px; }
.shop-buy {
  font-family: inherit; font-weight: 600; font-size: 12px;
  background: rgba(15, 23, 42, 0.6);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: transform 0.12s;
}
.shop-buy.primary {
  background: var(--gold-gradient);
  color: #1a1a2e;
  border: 0;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.35);
}
.shop-buy.primary:hover { transform: scale(1.04); }
.shop-buy.is-owned { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.4); }
.shop-buy:disabled { cursor: not-allowed; opacity: 0.8; }

.shop-history {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(252, 211, 77, 0.12);
}
.shop-history-head h3 {
  margin: 0 0 10px;
  font-family: "Cinzel", serif;
  font-size: 14px; color: var(--gold-bright);
}
.shop-history-list { display: grid; gap: 6px; }
.shop-history-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}
.shop-history-icon { font-size: 22px; text-align: center; }
.shop-history-name { font-weight: 600; font-size: 13px; }
.shop-history-meta { font-size: 11px; color: var(--muted); }
.shop-history-cost {
  font-family: "Cinzel", serif;
  font-weight: 700; color: #fda4af;
  font-size: 14px;
}

@media (max-width: 640px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .shop-card { padding: 12px 10px 10px; }
  .shop-card-icon { font-size: 44px; }
  .shop-card-name { font-size: 13px; }
  .shop-balance-val { font-size: 16px; }
}

/* ============================================================
   Avatar Studio — Photo Upload (Phase 11)
   ============================================================ */
.avatar-photo-section {
  margin: 12px 20px 0;
  padding: 14px 14px 10px;
  border: 1px solid rgba(252, 211, 77, 0.25);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(15, 23, 42, 0.5));
}
.avatar-photo-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.avatar-photo-head h3 {
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: 14px; color: var(--gold-bright); font-weight: 600;
}
.avatar-photo-hint { font-size: 11px; color: var(--muted); }
.avatar-photo-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 8px;
}
.avatar-photo-actions .profile-btn { flex: 1 1 auto; min-width: 0; }
.avatar-photo-status {
  font-size: 12px; padding: 6px 10px; border-radius: 8px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 6px;
}
.avatar-photo-status[data-kind="ok"]    { color: #6ee7b7; border-color: rgba(16, 185, 129, 0.4); }
.avatar-photo-status[data-kind="error"] { color: #fda4af; border-color: rgba(244, 63, 94, 0.5); }
.avatar-photo-divider {
  display: flex; align-items: center;
  margin-top: 10px;
  color: var(--muted); font-size: 11px;
  letter-spacing: 0.5px;
}
.avatar-photo-divider::before,
.avatar-photo-divider::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(252, 211, 77, 0.15);
}
.avatar-photo-divider span { padding: 0 10px; }

@media (max-width: 640px) {
  .avatar-photo-section { margin: 10px 14px 0; padding: 12px 10px 8px; }
  .avatar-photo-actions .profile-btn { font-size: 13px; padding: 10px; }
}

/* ============================================================
   Avatar Studio — Slot Scaffold (Phase 6)
   ============================================================ */
.avatar-slots-section {
  margin: 16px 20px 0;
  padding: 14px 14px 6px;
  border-top: 1px solid rgba(252, 211, 77, 0.15);
}
.avatar-slots-head h3 {
  margin: 0 0 10px;
  font-family: "Cinzel", serif;
  font-size: 14px; font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: 0.3px;
}
.avatar-slots-hint {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-size: 11px; color: var(--muted); font-weight: 400;
  margin-left: 8px;
}
.avatar-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.avatar-slot {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px dashed rgba(148, 163, 184, 0.25);
  user-select: none;
  transition: transform 0.15s, border-color 0.15s;
}
.avatar-slot.is-equipped {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(15, 23, 42, 0.7));
  border: 1px solid var(--gold);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.3);
}
.avatar-slot.is-available {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(15, 23, 42, 0.7));
  border: 1px solid rgba(168, 85, 247, 0.6);
}
.avatar-slot.is-empty { filter: grayscale(0.5); opacity: 0.7; cursor: not-allowed; }
.avatar-slot-icon { font-size: 24px; line-height: 1; }
.avatar-slot-label { font-size: 11px; color: var(--muted); }
.avatar-slot-item-name { font-size: 11px; font-weight: 600; color: var(--gold-bright); text-align: center; }
.avatar-slot-state { font-size: 10px; color: var(--gold-bright); font-weight: 600; }
.avatar-slot.is-available .avatar-slot-state { color: #d8b4fe; }
.avatar-slot.is-empty .avatar-slot-state { color: var(--muted); }
.avatar-slot-unequip {
  margin-top: 4px;
  font: inherit; font-size: 10px; font-weight: 600;
  background: rgba(244, 63, 94, 0.18);
  color: #fda4af;
  border: 1px solid rgba(244, 63, 94, 0.4);
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
}
.avatar-slot-unequip:hover { background: rgba(244, 63, 94, 0.3); }

/* Owned-item picker chips */
.avatar-slot-picks {
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: center;
  margin-top: 4px;
}
.avatar-slot-pick {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.22);
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: var(--text);
  font: inherit; font-size: 11px;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}
.avatar-slot-pick:hover { transform: scale(1.04); background: rgba(168, 85, 247, 0.35); }
.avatar-slot-pick:disabled { opacity: 0.6; }
.avatar-slot-pick-icon { font-size: 14px; }
.avatar-slot-pick-name { font-weight: 500; }

.avatar-slot.shake { animation: avatar-slot-shake 0.4s ease; }
@keyframes avatar-slot-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

@media (max-width: 640px) {
  .avatar-slots-section { margin: 12px 14px 0; padding: 10px 8px 4px; }
  .avatar-slot-icon { font-size: 18px; }
  .avatar-slot-label { font-size: 10px; }
}

/* ============================================================
   Admin Panel (Phase 10) — teacher/admin tools
   ============================================================ */
.admin-panel { padding: 20px; }
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 22px;
}
.admin-stat {
  padding: 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.5), rgba(15, 23, 42, 0.75));
  border: 1px solid rgba(252, 211, 77, 0.18);
  text-align: center;
}
.admin-stat-icon { font-size: 22px; }
.admin-stat-val { font-family: "Cinzel", serif; font-weight: 700; font-size: 22px; color: var(--gold-bright); }
.admin-stat-label { font-size: 11px; color: var(--muted); }

.admin-section { margin-top: 22px; }
.admin-section-head h3 {
  margin: 0 0 10px;
  font-family: "Cinzel", serif;
  font-size: 15px; color: var(--gold-bright);
}
.admin-grant-form {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 2fr auto;
  gap: 8px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(252, 211, 77, 0.15);
  border-radius: 12px;
}
.admin-grant-form input,
.admin-grant-form select {
  background: rgba(2, 6, 23, 0.6); color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px; padding: 8px 10px;
  font: inherit; font-size: 13px;
}

.admin-queue { display: grid; gap: 10px; }
.admin-queue-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px; align-items: start;
  padding: 12px;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 12px;
  border: 1px solid rgba(252, 211, 77, 0.15);
}
.admin-queue-icon { font-size: 22px; text-align: center; padding-top: 4px; }
.admin-queue-title { font-weight: 600; font-size: 14px; }
.admin-queue-student { font-size: 12px; color: var(--muted); margin: 4px 0; }
.admin-queue-evidence {
  background: rgba(2, 6, 23, 0.5);
  border-left: 3px solid var(--gold);
  padding: 8px 10px; border-radius: 6px;
  font-size: 13px; line-height: 1.4;
  margin-top: 6px;
}
.admin-queue-actions { display: flex; flex-direction: column; gap: 6px; }
.admin-queue-actions button { white-space: nowrap; }

@media (max-width: 640px) {
  .admin-grant-form { grid-template-columns: 1fr 1fr; }
  .admin-grant-form input:last-of-type { grid-column: 1 / -1; }
  .admin-grant-form button { grid-column: 1 / -1; }
  .admin-queue-row { grid-template-columns: 30px 1fr; }
  .admin-queue-actions { grid-column: 1 / -1; flex-direction: row; }
  .admin-queue-actions button { flex: 1; }
}

/* ---- Quest section headers (Phase 9) ---- */
.quest-section-head {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  margin: 12px 0 6px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.4);
  border-left: 3px solid var(--gold);
}
.quest-section-head h2 {
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: 15px; color: var(--gold-bright);
}
.quest-section-count {
  font-size: 11px; color: var(--muted);
  background: rgba(252, 211, 77, 0.15);
  padding: 2px 8px; border-radius: 999px;
}
.quest-monument.is-pending-review { opacity: 0.85; }
.quest-monument.is-rejected       { opacity: 0.85; filter: hue-rotate(-20deg); }
.monument-claim-btn.submit {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: white;
}
.monument-status.status-review { color: #d8b4fe; font-weight: 600; }
.monument-status.status-rejected { color: #fca5a5; font-weight: 600; }

/* ---- Badge wall ---- */
.lobby-section-meta { font-size: 12px; color: var(--muted); font-family: "Cinzel", serif; }
.lobby-badge-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}
.lobby-badge {
  position: relative;
  padding: 10px 6px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  cursor: help;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.lobby-badge:hover { transform: translateY(-2px); }
.lobby-badge.is-earned { border-color: var(--gold); box-shadow: 0 0 10px rgba(251, 191, 36, 0.18); }
.lobby-badge.is-earned.rarity-rare   { border-color: rgba(59, 130, 246, 0.7); box-shadow: 0 0 14px rgba(59, 130, 246, 0.25); }
.lobby-badge.is-earned.rarity-epic   { border-color: rgba(168, 85, 247, 0.75); box-shadow: 0 0 16px rgba(168, 85, 247, 0.3); }
.lobby-badge.is-earned.rarity-legendary {
  border-color: var(--gold);
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.45);
  background: linear-gradient(180deg, rgba(120, 53, 15, 0.4), rgba(15, 23, 42, 0.7));
}
.lobby-badge.is-locked { filter: grayscale(0.85) brightness(0.6); }
.lobby-badge-icon { font-size: 28px; line-height: 1; margin-bottom: 4px; }
.lobby-badge-name { font-size: 10px; color: var(--muted); line-height: 1.2; }
.lobby-badge.is-earned .lobby-badge-name { color: var(--gold-bright); font-weight: 600; }
.lobby-badge-lock {
  position: absolute; top: 4px; right: 6px;
  font-size: 10px; opacity: 0.6;
}

/* ---- Lobby mobile ---- */
@media (max-width: 640px) {
  .lobby-badge-wall { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
  .lobby-badge-icon { font-size: 22px; }
  .lobby-badge-name { font-size: 9px; }
  .lobby-hero { padding: 18px 16px 14px; }
  .lobby-hero-content { grid-template-columns: auto 1fr; }
  .lobby-streak { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; }
  .lobby-streak-val { font-size: 18px; }
  .lobby-streak-label { font-size: 11px; }
  .lobby-streak-icon { font-size: 18px; }
  .lobby-hero-avatar, .lobby-hero-avatar-wrap { width: 64px; height: 64px; }
  .lobby-hero-title { font-size: 18px; }
  .lobby-section { padding: 14px 14px; }
  .lobby-actions { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .lobby-action { padding: 12px 6px; }
  .lobby-action-icon { font-size: 22px; }
  .lobby-action-label { font-size: 11px; }
  .lobby-quest-card { grid-template-columns: 40px 1fr auto; padding: 10px; }
  .lobby-quest-icon { font-size: 22px; }
  .lobby-quest-title { font-size: 13px; }
  .lobby-guild-row { grid-template-columns: 24px 1fr auto; padding: 8px 10px; }
  .lobby-guild-total { font-size: 14px; min-width: 48px; }
}