/* CSS DEBUG VERSION 1001 */

/* -------------------------------------------------------
   CORE VARIABLES
------------------------------------------------------- */
:root {
  --bg-main: #0a0a0c;
  --bg-panel: #111317;
  --bg-panel-light: #16181d;
  --accent-red: #8a0000;
  --accent-red-bright: #ff1a1a;
  --accent-red-soft: rgba(255, 26, 26, 0.15);
  --text-main: #e0e0e0;
  --text-muted: #9a9a9a;
  --font-main: 'Rajdhani', sans-serif;
  --font-title: 'Orbitron', sans-serif;
}

/* -------------------------------------------------------
   GLOBAL
------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 18px;
  line-height: 1.55;
}

a {
  color: inherit;
  text-decoration: none;
}

/* -------------------------------------------------------
   NAVIGATION
------------------------------------------------------- */
.nav {
  display: flex;
  justify-content: flex-end;
  gap: 2.5rem;
  padding: 1.8rem 3rem;
  background: #050507;
  border-bottom: 1px solid #181a1f;
  font-family: var(--font-title);
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nav a {
  position: relative;
  padding-bottom: 0.3rem;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent-red-bright);
  transition: width 0.2s ease-out;
}

.nav a:hover::after {
  width: 100%;
}

/* -------------------------------------------------------
   PAGE HEADER
------------------------------------------------------- */
.forum-header {
  padding: 4rem 2rem;
  text-align: center;
  font-family: var(--font-title);
  font-size: 2rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-red-bright);
  background: radial-gradient(circle at center, rgba(255, 26, 26, 0.08), transparent 60%);
  border-bottom: 1px solid rgba(255, 26, 26, 0.25);
}

/* -------------------------------------------------------
   PANEL / CATEGORY BOX
------------------------------------------------------- */
.forum-category {
  margin: 4rem auto;
  max-width: 1100px;
  background: var(--bg-panel);
  border: 1px solid var(--accent-red);
  box-shadow: 0 0 18px rgba(255, 26, 26, 0.22);
  padding: 3rem 3.5rem;
  position: relative;
  overflow: hidden;
}

.forum-category::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 40%);
  opacity: 0.4;
  pointer-events: none;
}

/* -------------------------------------------------------
   CATEGORY TITLES
------------------------------------------------------- */
.category-title {
  font-family: var(--font-title);
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-red-bright);
  margin-bottom: 2.5rem;
}

/* -------------------------------------------------------
   SUBFORUM GROUPS
------------------------------------------------------- */
.subforum-group {
  margin-bottom: 3rem;
}

.group-label {
  font-family: var(--font-title);
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 26, 26, 0.25);
  padding-bottom: 0.5rem;
}

/* -------------------------------------------------------
   SUBFORUM GRID
------------------------------------------------------- */
.subforum-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem 1.5rem;
}

.subforum-list li {
  padding: 0.6rem 0.8rem;
  background: var(--accent-red-soft);
  border-left: 3px solid var(--accent-red-bright);
  font-size: 1.05rem;
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.subforum-list li:hover {
  background: rgba(255, 26, 26, 0.25);
  color: #fff;
}

/* -------------------------------------------------------
   THREAD LIST
------------------------------------------------------- */
.thread-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.thread-row {
  background: var(--bg-panel-light);
  border: 1px solid var(--accent-red-bright);
  padding: 1.4rem 1.6rem;
}

.thread-title {
  font-family: var(--font-title);
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  color: var(--accent-red-bright);
  margin-bottom: 0.5rem;
}

.thread-meta {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* -------------------------------------------------------
   FORMS (LOGIN, CREATE THREAD, REPLY)
------------------------------------------------------- */
.thread-form {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.thread-form label {
  font-family: var(--font-title);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-red-bright);
}

.thread-form input[type="text"],
.thread-form input[type="password"],
.thread-form textarea {
  width: 100%;
  padding: 16px 18px;
  font-size: 1.15rem;
  background: #0a0a0c;
  color: var(--text-main);
  border: 1px solid #333;
  outline: none;
}

.thread-form textarea {
  min-height: 220px;
  resize: vertical;
}

/* -------------------------------------------------------
   BUTTONS
------------------------------------------------------- */
.create-thread-btn,
.reply-btn {
  padding: 16px 26px;
  background: var(--accent-red);
  border: 1px solid var(--accent-red-bright);
  color: #fff;
  font-family: var(--font-title);
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.create-thread-btn:hover,
.reply-btn:hover {
  background: #a00000;
  border-color: #ff4444;
}

/* -------------------------------------------------------
   MESSAGE BOXES
------------------------------------------------------- */
.success-box {
  border-color: #22aa22 !important;
}

.success-box .thread-title {
  color: #88ff88 !important;
}

.info-box {
  border-color: #4444aa !important;
}

.info-box .thread-title {
  color: #8888ff !important;
}

/* -------------------------------------------------------
   FOOTER
------------------------------------------------------- */
footer {
  margin-top: 5rem;
  padding: 1.5rem;
  background: #050507;
  border-top: 1px solid #181a1f;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* THREAD VIEW PANEL */
.thread-view-panel {
  background: var(--bg-panel);
  border: 1px solid var(--accent-red);
  box-shadow: 0 0 18px rgba(255, 26, 26, 0.22);
  padding: 3rem 3.5rem;
  margin: 4rem auto;
  max-width: 1100px;
  position: relative;
  overflow: hidden;
}

.thread-view-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 40%);
  opacity: 0.4;
  pointer-events: none;
}

/* ADMIN BUTTONS */
.admin-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.admin-controls a {
  display: inline-block;
  padding: 10px 18px;
  background: var(--accent-red-bright);
  color: #000;
  font-family: var(--font-title);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid #ff4444;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.1s ease;
}

.admin-controls a:hover {
  background: #ff5555;
  transform: translateY(-1px);
}

/* POST BOX */
.post-box {
  background: var(--bg-panel-light);
  border: 1px solid var(--accent-red-bright);
  padding: 2rem 2.2rem;
  margin-bottom: 2rem;
}

/* POST AUTHOR (RED + BIGGER) */
.post-author {
  font-family: var(--font-title);
  font-size: 1.25rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-red-bright);
  margin-bottom: 0.4rem;
}

/* POST META */
.post-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

/* POST MESSAGE (BIGGER TEXT) */
.post-message {
  font-size: 1.2rem;
  line-height: 1.7;
  margin-top: 0.6rem;
  margin-bottom: 0.8rem;
}

/* POST CONTROLS */
.post-controls a {
  color: var(--accent-red-bright);
  margin-right: 1rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  font-family: var(--font-title);
}

/* REPLY AREA */
.reply-area label {
  font-family: var(--font-title);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-red-bright);
  margin-bottom: 1rem;
  display: block;
}

.reply-area textarea {
  width: 100%;
  min-height: 200px;
  padding: 16px 18px;
  font-size: 1.15rem;
  background: #0a0a0c;
  color: var(--text-main);
  border: 1px solid #333;
  margin-bottom: 1.5rem;
}

/* LOCKED MESSAGE */
.locked-message {
  text-align: center;
  padding: 20px;
  color: #ff4444;
  font-size: 1.1rem;
  font-family: var(--font-title);
  letter-spacing: 0.14em;
}

/* THREAD TITLE — FLICKER → TYPING → CURSOR DISAPPEAR */
.thread-title-animated {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--accent-red-bright);
  font-family: 'Share Tech Mono', var(--font-title), monospace;
  font-size: 2.4rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-red-bright);

  max-width: 40ch;

  animation:
    flicker 0.6s linear,
    typing 4s steps(40, end) 0.6s,
    cursorFade 0.2s 4.6s forwards;

  text-shadow: 0 0 10px rgba(255, 26, 26, 0.75);
}

@keyframes flicker {
  0%   { opacity: 0.1; }
  10%  { opacity: 1; }
  20%  { opacity: 0.3; }
  30%  { opacity: 1; }
  40%  { opacity: 0.2; }
  50%  { opacity: 1; }
  60%  { opacity: 0.4; }
  70%  { opacity: 1; }
  80%  { opacity: 0.15; }
  90%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes typing {
  from { max-width: 0; }
  to   { max-width: 40ch; }
}

@keyframes cursorFade {
  from { border-right-color: var(--accent-red-bright); }
  to   { border-right-color: transparent; }
}