:root {
  --bg-main: #1a1f1c;
  --bg-alt:  #2b3a33;
  --bg-input:#232a27;
  --bg-hover:#24302a;

  --fg-primary:   #e6e6e6;
  --fg-secondary: #a7b2ad;
  --fg-accent:    #d4af37;
  --fg-accent-hover:#f3c96b;
  --fg-danger:    #e05d5d;

  --border: #3a4a42;

  --radius: 6px;
  --transition: .15s ease-in-out;
}

/* ---------- Global ---------------------------------------------------- */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background:
    linear-gradient(rgba(10,18,14,.65), rgba(10,18,14,.65)),
    url(/background_christmas.jpg) center / cover no-repeat fixed;
  color: var(--fg-primary);
}

/* ---------- Snowfall -------------------------------------------------- */

@keyframes snow-fall {
  from { transform: translateY(-15vh); }
  to   { transform: translateY(115vh); }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;

  background-image:
    radial-gradient(circle, rgba(255,255,255,.45) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.30) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.20) 1px, transparent 2px);

  background-size: 120px 120px, 180px 180px, 260px 260px;
  background-position: 0 0, 40px 80px, 80px 20px;

  pointer-events: none;
  opacity: 0.55;

  animation: snow-fall 18s linear infinite;
  z-index: 3;
}

/* ---------- Alice Overlay (30% smaller) ------------------------------- */

hr {
  position: relative;
  z-index: 4;
}

body::after {
  content: "";
  position: fixed;
  right: 2%;
  bottom: 0;

  /* 30% smaller than before */
  width: 19.6vw;
  max-width: 265px;
  height: 28vh;
  max-height: 295px;

  background: url(/christmas_alice.png) no-repeat bottom right;
  background-size: contain;

  pointer-events: none;
  opacity: 0.95;
  z-index: 5;
}

/* ---------- Scrollbar ------------------------------------------------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--fg-secondary);
}

/* ---------- Links ----------------------------------------------------- */

a,
a:visited,
.intro a.email span.name {
  color: var(--fg-accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--fg-accent-hover);
}

/* ---------- Buttons --------------------------------------------------- */

.post-btn,
.hide-thread-link {
  color: var(--fg-accent) !important;
}

.post-btn:hover,
.hide-thread-link:hover {
  color: var(--fg-accent-hover) !important;
}

/* ---------- Posts ----------------------------------------------------- */

div.post.reply {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

div.post.reply.highlighted {
  background: var(--bg-hover);
}

div.post.reply div.body a {
  color: var(--fg-accent);
}

/* ---------- Subject / Headings --------------------------------------- */

.intro span.subject {
  color: var(--fg-danger);
}

/* ---------- Tables ---------------------------------------------------- */

form table tr th,
table.modlog tr th {
  background-color: var(--bg-input);
  color: var(--fg-primary);
  font-weight: 600;
  border: 1px solid var(--border);
  padding: 2px 8px;
  font-size: 10pt;
}

/* ---------- Pagination ------------------------------------------------ */

div.pages {
  background: var(--bg-alt);
  border: 1px solid var(--border);
}

div.pages a {
  color: var(--fg-accent);
}

div.pages a.selected {
  color: var(--fg-primary);
  font-weight: 600;
}

/* ---------- Headers --------------------------------------------------- */

header div.subtitle,
h1 {
  color: var(--fg-primary);
  text-align: center;
}

/* ---------- Rules ----------------------------------------------------- */

hr {
  border: none;
  border-top: 1px solid var(--border);
}

/* ---------- Board list ------------------------------------------------ */

div.boardlist {
  color: var(--fg-secondary);
}

div.boardlist a {
  color: var(--fg-accent);
}

/* ---------- Ban / Alerts --------------------------------------------- */

div.ban,
#options_div,
#alert_div {
  background: var(--bg-main);
  border: 1px solid var(--border);
}

div.ban h2 {
  background: #3b4f45;
  color: var(--fg-primary);
}

/* ---------- Inputs ---------------------------------------------------- */

input,
textarea,
select {
  background: var(--bg-input);
  color: var(--fg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--fg-accent);
  background: var(--bg-hover);
}

/* ---------- Buttons --------------------------------------------------- */

button,
input[type=submit],
input[type=button] {
  background: var(--fg-accent);
  color: #1a1f1c;
  border: none;
  border-radius: var(--radius);
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
}

button:hover,
input[type=submit]:hover,
input[type=button]:hover {
  background: var(--fg-accent-hover);
}

/* ---------- Names / Quotes ------------------------------------------- */

.intro span.name,
span.trip {
  color: #c44b4b;
  font-weight: bold;
}

span.quote {
  color: #8fd14f;
}

/* ---------- Dropzone -------------------------------------------------- */

.dropzone {
  background-color: var(--bg-input);
}

.dropzone .file-hint {
  color: var(--fg-accent);
  border: 2px dashed #7fae9a;
}

/* ---------- VICHAN FIX: reply hover preview --------------------------- */
/* This fixes the "too far down" bug */

#posthover,
.posthover {
  position: absolute !important;
  z-index: 99999 !important;
  transform: none !important;
}

.theme-catalog div.thread:hover {
  background: #0f1a14;      /* very dark evergreen */
  border-color: #e06b6b;    /* light festive red */
}