/* ============================================================
   HUFFLEPUFF THEME
   ============================================================ */

/* 0. FONTS — warm serif pairing instead of terminal fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

.hufflepuff-theme {

  /* COLORS — badger black + honeycomb gold, on aged parchment & dark oak */
  --color-bg:            #1B120A;   /* dark oak / hearth shadow */
  --color-bios-blue:     #8A5A0B;   /* brass / honey-amber — was the "primary" blue */
  --color-bios-gray:     #F1E2B8;   /* aged parchment — was the panel gray */
  --color-bios-border:   #4A2E0F;   /* worn wood-brown border */

  --color-text:          #F6E9C6;   /* warm parchment-white, on dark oak */
  --color-text-dark:     #2C1B0C;   /* iron-gall ink, on parchment */

  --color-success:       #4C7A2E;   /* mossy herb green */
  --color-warning:       #C98A1B;   /* candle-amber */

  --color-black:         #120C06;
  --color-shadow:        rgba(20, 12, 4, 0.75);
  --color-highlight:     #4A2E0F;   /* brass-brown, replaces neon "selected" blue */

  /* TYPOGRAPHY */
  --font-display: "Cinzel", serif;
  --font-body:    "Crimson Text", serif;

  /* EFFECTS */
  --blink-speed: 1.8s; /* slower — candlelight, not a cursor */

  /* SIZING */
  --base-font-size: 20px;

  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 20% 15%, rgba(201, 138, 27, 0.10), transparent 45%),
    repeating-linear-gradient(115deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 6px);
}

/* ---- Body-level texture: dim hearth glow drifting across the page ---- */
.hufflepuff-theme.bg-ambience::before {
  background: radial-gradient(circle at center, rgba(201, 138, 27, 0.18), transparent 70%);
}

/* ============================================================
   1. TITLE BAR — brass nameplate on a wood-grain beam
   ============================================================ */

.hufflepuff-theme .blocks-row {
  display: none; /* drop the BIOS gradient blocks entirely */
}

.hufflepuff-theme .bios-title-bar {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.25), transparent 40%),
    repeating-linear-gradient(90deg, #5C3A16 0 3px, #4A2E10 3px 7px);
  border-bottom: 3px double var(--color-bios-blue);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  padding: 18px 15px;
}

.hufflepuff-theme .boot-avatar {
  position: fixed;
  top: 50%;
  right: 320px;
  transform: translateY(-50%);
  width: 22vw;
  max-width: 280px;
  min-width: 160px;
  border: 4px solid var(--color-bios-blue);
  border-radius: 4px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.55),      /* grounding shadow, keeps it feeling placed */
    0 0 40px rgba(201, 138, 27, 0.60);     /* warm amber glow */
}

.hufflepuff-theme .title-content {
  padding: 6px 28px;
}

/* carved brass corner flourishes framing the title */
.hufflepuff-theme .title-content::before,
.hufflepuff-theme .title-content::after {
  content: "❦";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-bios-blue);
  font-size: 0.7em;
  opacity: 0.85;
}
.hufflepuff-theme .title-content::before { left: -6px; }
.hufflepuff-theme .title-content::after  { right: -6px; }

.hufflepuff-theme .title-content h1.title-head {
  letter-spacing: 0.06em;
  text-shadow: 0 0 8px rgba(201, 138, 27, 0.45),
               0 2px 0 rgba(0,0,0,0.6);
}

/* ============================================================
   2. NAVIGATION — brass rail, no scanline-blue
   ============================================================ */

.hufflepuff-theme .bios-navbar {
  background: linear-gradient(180deg, #6E4610, #4A2E0F);
  border-bottom: 2px solid var(--color-bios-blue);
  box-shadow: inset 0 -2px 6px rgba(0,0,0,0.4);
}

.hufflepuff-theme .navbar a {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.hufflepuff-theme .navbar a.selectednav,
.hufflepuff-theme .navbar a:hover {
  background-color: var(--color-bios-gray);
  color: var(--color-highlight);
  transform: scale(1.03);
  box-shadow: 0 0 6px rgba(201, 138, 27, 0.5);
}

/* Replace blinking underscore with a flickering candle mark */
.hufflepuff-theme .navbar a:hover::after {
  content: "✦";
  animation: hufflepuff-flicker var(--blink-speed) infinite;
}

/* ============================================================
   3. CONTENT PANEL — aged parchment, ink-brown ruled border
   ============================================================ */

.hufflepuff-theme .bios-section {
  background-color: var(--color-bios-gray);
  background-image: radial-gradient(circle at 80% 0%, rgba(74, 46, 15, 0.08), transparent 55%);
}

.hufflepuff-theme .bios-left,
.hufflepuff-theme .bios-right {
  border: 1px solid var(--color-bios-border);
  box-shadow: 0 0 0 4px var(--color-bios-gray), 0 0 0 5px var(--color-bios-border);
  background-color: rgba(255, 252, 240, 0.35);
}

.hufflepuff-theme .bios-right ul li::before {
  content: "🜁 "; /* small leaf-like glyph instead of ">" */
  color: var(--color-bios-blue);
}

/* ============================================================
   4. BUTTONS — brass-plate, beveled, wax-seal on active
   ============================================================ */

.hufflepuff-theme .btn,
.hufflepuff-theme button {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: none;         /* engraved plates aren't shouty caps */
  letter-spacing: 0.03em;
  border: 2px solid var(--color-bios-blue);
  border-radius: 3px;
  background: linear-gradient(180deg, #9C6A17, #7A4F0E);
  color: var(--color-bios-gray);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 3px rgba(0,0,0,0.4);
}

.hufflepuff-theme .btn:hover,
.hufflepuff-theme button:hover {
  background: linear-gradient(180deg, var(--color-bios-gray), #E4D19E);
  color: var(--color-highlight);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4), 0 0 8px rgba(201,138,27,0.4);
}

.hufflepuff-theme .btn:active,
.hufflepuff-theme button:active {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.hufflepuff-theme .hTLink img:hover {
  border: 4px solid var(--color-bios-blue);
  box-shadow: 0 0 12px rgba(201, 138, 27, 0.5);
}

/* reveal-btn — candle-flicker prompt instead of blinking chevron */
.hufflepuff-theme .reveal-btn::before {
  content: "❋";
  animation: hufflepuff-flicker var(--blink-speed) infinite;
}

.hufflepuff-theme .reveal-btn.revealed {
  border-color: var(--color-success);
  color: var(--color-success);
}

.hufflepuff-theme .reveal-btn.revealed::before {
  content: "✓";
}

.hufflepuff-theme .reveal-btn.revealed:hover {
  background-color: var(--color-success);
  color: var(--color-bg);
  box-shadow: 0 4px 8px rgba(76, 122, 46, 0.35);
}

/* ============================================================
   5. MODAL / CAPTCHA — sealed-letter parchment card
   ============================================================ */

.hufflepuff-theme .modal-inner {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.15), transparent 30%),
    var(--color-bios-blue);
  border: 2px solid var(--color-bios-gray);
  box-shadow: 8px 8px 0 0 #120C06, 12px 12px 0 0 var(--color-bios-gray);
  color: var(--color-text);
}

.hufflepuff-theme .captcha-help,
.hufflepuff-theme .captcha-feedback {
  color: var(--color-bios-gray);
}

.hufflepuff-theme .captcha-feedback[data-state="error"] {
  color: var(--color-warning);
}

.hufflepuff-theme .captcha-feedback[data-state="success"] {
  color: var(--color-success);
}

/* ============================================================
   6. BOOT MENU (kept as-is structurally — recolored + resealed)
   ============================================================ */

.hufflepuff-theme .boot-menu-lead {
  color: var(--color-bios-blue);
  font-family: var(--font-display);
}

.hufflepuff-theme .boot-menu-sublead {
  color: var(--color-warning);
  font-style: italic;
}

.hufflepuff-theme .boot-option.selected {
  background-color: var(--color-bios-gray);
  color: var(--color-highlight);
  border-radius: 2px;
}

/* Replace the blinking arrow with a small glowing wax-seal dot.
   The original > /   text from the HTML is hidden (not removed —
   keeps its layout width) so it can't stack with our own marker. */
.hufflepuff-theme .boot-pointer {
  position: relative;
  color: transparent;
}

.hufflepuff-theme .boot-pointer::before {
  content: "○";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-bios-blue);
}

.hufflepuff-theme .boot-option.selected .boot-pointer::before {
  content: "●";
  color: var(--color-highlight);
}

.hufflepuff-theme .boot-option.selected .boot-pointer {
  animation: hufflepuff-flicker var(--blink-speed) infinite;
}

/* ============================================================
   7. RETRO UTILITIES → COZY UTILITIES
   ============================================================ */

@keyframes hufflepuff-flicker {
  0%, 100% { opacity: 1; }
  35%      { opacity: 0.55; }
  50%      { opacity: 0.9; }
  70%      { opacity: 0.5; }
}

.hufflepuff-theme .logo-blink::before {
  content: "🦡";
  animation: hufflepuff-flicker var(--blink-speed) infinite;
}

.hufflepuff-theme .blink {
  animation: hufflepuff-flicker var(--blink-speed) infinite;
}

.hufflepuff-theme .scanlines::after {
  /* swap harsh scanlines for a soft parchment grain */
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(74, 46, 15, 0.05) 3px,
    rgba(74, 46, 15, 0.05) 6px
  );
}

.hufflepuff-theme ::-webkit-scrollbar-track {
  background: var(--color-bios-blue);
}
.hufflepuff-theme ::-webkit-scrollbar-thumb {
  background: var(--color-bios-gray);
  border: 2px solid var(--color-black);
}

/* ============================================================
   8. PRELOADER — candle-lit loading bar
   ============================================================ */

.hufflepuff-theme .preloader-inner {
  background-color: var(--color-bios-blue);
  border: 2px solid var(--color-bios-gray);
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
}

.hufflepuff-theme .preloader-title {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
}

.hufflepuff-theme .preloader-bar-container {
  border: 2px solid var(--color-bios-gray);
  background-color: var(--color-black);
}

.hufflepuff-theme .preloader-bar {
  background: linear-gradient(90deg, #9C6A17, var(--color-warning));
}

/* ============================================================
   9. GALLERY / LIGHTBOX — gilt picture-frame treatment
   ============================================================ */

.hufflepuff-theme .gallery-grid {
  border: 1px solid var(--color-bios-border);
  background-color: rgba(27, 18, 10, 0.35);
}

.hufflepuff-theme .gallery-item {
  border: 3px solid var(--color-bios-blue);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

.hufflepuff-theme .gallery-item:hover {
  box-shadow: 0 0 12px rgba(201, 138, 27, 0.55);
}

.hufflepuff-theme .gallery-caption {
  background-color: var(--color-highlight);
  color: var(--color-text);
  font-style: italic;
}

.hufflepuff-theme .lightbox-image {
  border: 3px solid var(--color-bios-blue);
}

.hufflepuff-theme .lightbox-nav:hover,
.hufflepuff-theme .lightbox-close:hover {
  color: var(--color-warning);
}

/* ============================================================
   10. SETUP ITEMS (referenced by accessibility overrides)
   ============================================================ */

.hufflepuff-theme .setup-item {
  color: var(--color-text-dark);
}

.hufflepuff-theme .setup-item input[type="checkbox"] {
  accent-color: var(--color-bios-blue);
}

.hufflepuff-theme .setup-title {
  font-family: var(--font-display);
  color: var(--color-bios-blue);
}

/* ===========================================================
   11. AVATAR AND @MEDIA
  ============================================================ */
@media (max-width: 900px) {
  .hufflepuff-theme .boot-avatar {
    display: none;
  }
}