/* BloodDogs project page — Limbus Company palette */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Share+Tech+Mono&display=swap');

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

:root {
  --lc-void:     #0d0b0f;
  --lc-dark:     #141018;
  --lc-surface:  #1c1826;
  --lc-surface2: #231e30;
  --lc-raised:   #2e2840;
  --lc-border:   #3a3254;
  --lc-gold:     #c9a227;
  --lc-gold-lt:  #e8c458;
  --lc-gold-dk:  #8c6d14;
  --lc-crimson:  #b01c2e;
  --lc-crimson2: #e02840;
  --lc-blood:    #6e0f1c;
  --lc-text:     #e8e0d0;
  --lc-text-dim: #9e96b0;
  --lc-text-faint:#5e5875;
  --win-light:   #4a4266;
  --win-dark:    #0a0810;
  --transition:  150ms ease;

  /* BloodDogs accent — slightly warmer crimson tint */
  --bd-accent:   #c41e3a;
  --bd-accent-lt:#e84060;
  --bd-accent-dk:#7a0f1f;
}

/* scanlines */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px
  );
}

body {
  background-color: var(--lc-void);
  background-image:
    url("https://www.transparenttextures.com/patterns/dark-matter.png"),
    radial-gradient(ellipse at 30% 60%, rgba(196,30,58,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 10%, rgba(201,162,39,0.04) 0%, transparent 45%);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 13px;
  color: var(--lc-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}

/* ── MAIN WINDOW ── */
.win-window {
  position: absolute;
  width: 820px;
  min-width: 360px;
  min-height: 200px;
  background-color: var(--lc-dark);
  background-image: url("https://www.transparenttextures.com/patterns/dark-matter.png");
  border-top: 2px solid var(--win-light);
  border-left: 2px solid var(--win-light);
  border-right: 2px solid var(--win-dark);
  border-bottom: 2px solid var(--win-dark);
  box-shadow:
    3px 3px 0 var(--win-dark),
    0 0 50px rgba(196,30,58,0.18),
    0 0 120px rgba(196,30,58,0.06);
  display: flex;
  flex-direction: column;
  user-select: none;
}

/* ── TITLE BAR — BloodDogs: blood red dominant ── */
.win-titlebar {
  height: 26px;
  background: linear-gradient(to right, #3a0008, var(--bd-accent) 50%, var(--lc-gold-dk));
  display: flex;
  align-items: center;
  padding: 0 4px;
  gap: 4px;
  cursor: grab;
  flex-shrink: 0;
  border-bottom: 1px solid var(--bd-accent-dk);
  position: relative;
}
.win-titlebar::after {
  content: '';
  position: absolute; inset: 0;
  background: url("https://www.transparenttextures.com/patterns/dark-matter.png");
  opacity: 0.25; pointer-events: none;
}
.win-titlebar:active { cursor: grabbing; }
.win-title-icon { width: 16px; height: 16px; flex-shrink: 0; }
.win-title-text {
  color: var(--lc-gold-lt);
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.win-btns { display: flex; gap: 3px; }
.win-btn {
  width: 16px; height: 14px;
  background: var(--lc-raised);
  border-top: 1px solid var(--win-light);
  border-left: 1px solid var(--win-light);
  border-right: 1px solid var(--win-dark);
  border-bottom: 1px solid var(--win-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; cursor: pointer; color: var(--lc-gold); flex-shrink: 0;
}
.win-btn:hover { background: var(--bd-accent); color: #fff; }
.win-btn:active {
  border-top: 1px solid var(--win-dark); border-left: 1px solid var(--win-dark);
  border-right: 1px solid var(--win-light); border-bottom: 1px solid var(--win-light);
}

/* ── MENU BAR ── */
.win-menubar {
  height: 22px; display: flex; align-items: stretch; padding: 0 2px;
  background: var(--lc-surface2); border-bottom: 1px solid var(--lc-border);
  flex-shrink: 0; position: relative;
}
.win-menu-item {
  padding: 2px 10px; cursor: pointer; display: flex; align-items: center;
  font-size: 12px; color: var(--lc-text-dim); position: relative; letter-spacing: 0.03em;
}
.win-menu-item:hover, .win-menu-item.active {
  background: var(--bd-accent-dk); color: var(--lc-gold-lt);
}
.win-dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--lc-surface2);
  border-top: 1px solid var(--win-light); border-left: 1px solid var(--win-light);
  border-right: 1px solid var(--win-dark); border-bottom: 1px solid var(--win-dark);
  box-shadow: 3px 3px 0 var(--win-dark), 0 6px 24px rgba(0,0,0,0.7);
  z-index: 100; min-width: 180px;
}
.win-dropdown.open { display: block; }
.win-dropdown-item {
  padding: 5px 20px 5px 24px; cursor: pointer;
  white-space: nowrap; font-size: 12px; color: var(--lc-text);
}
.win-dropdown-item:hover { background: var(--bd-accent-dk); color: var(--lc-gold-lt); }
.win-dropdown-sep { height: 1px; background: var(--lc-border); margin: 3px 4px; }

/* ── CONTENT ── */
.win-content {
  flex: 1; overflow: hidden; display: flex; flex-direction: column;
  background-color: var(--lc-surface);
  background-image: url("https://www.transparenttextures.com/patterns/dark-matter.png");
  border-top: 1px solid var(--lc-border);
}
.win-panel { display: none; flex: 1; overflow-y: auto; flex-direction: column; }
.win-panel.active { display: flex; }
.win-panel::-webkit-scrollbar { width: 10px; }
.win-panel::-webkit-scrollbar-track { background: var(--lc-dark); }
.win-panel::-webkit-scrollbar-thumb { background: var(--lc-raised); border: 1px solid var(--lc-border); }
.win-panel::-webkit-scrollbar-thumb:hover { background: var(--bd-accent-dk); }

/* ── SECTION HEADER ── */
.section-header {
  padding: 10px 18px 8px;
  background: linear-gradient(to right, var(--lc-surface2), var(--lc-surface));
  border-bottom: 2px solid var(--bd-accent-dk);
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 14px; color: var(--lc-gold); letter-spacing: 0.06em;
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
}
.section-header::before { content: '◈'; color: var(--bd-accent); font-size: 12px; }

/* ── HERO BANNER ── */
.project-hero {
  width: 100%; height: 160px; object-fit: cover; object-position: center 40%;
  display: block; flex-shrink: 0;
  border-bottom: 2px solid var(--bd-accent-dk);
  filter: saturate(0.7) brightness(0.7);
}
.project-hero-placeholder {
  width: 100%; height: 160px; flex-shrink: 0;
  background: linear-gradient(160deg, #1a0508, #2e0a14, #0d0b0f);
  border-bottom: 2px solid var(--bd-accent-dk);
  display: flex; align-items: center; justify-content: center;
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 11px; color: var(--lc-text-faint); letter-spacing: 0.1em;
}

/* ── DESCRIPTION PANEL ── */
.desc-body { padding: 18px 22px; }
.desc-body h1 {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 28px; font-weight: normal;
  color: var(--lc-gold);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  line-height: 1.15;
}
.desc-body .project-subtitle {
  font-size: 11px; color: var(--bd-accent-lt);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.desc-body .project-subtitle::before,
.desc-body .project-subtitle::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--bd-accent-dk));
}
.desc-body .project-subtitle::after {
  background: linear-gradient(to left, transparent, var(--bd-accent-dk));
}
.desc-body p {
  font-size: 12px; color: var(--lc-text-dim); line-height: 1.8;
  margin-bottom: 12px; max-width: none;
}
.desc-body p em { color: var(--lc-gold); font-style: normal; }
.desc-body p strong { color: var(--lc-text); font-weight: normal; letter-spacing: 0.03em; }

.lc-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--bd-accent-dk), transparent);
  margin: 14px 0; flex-shrink: 0;
}

/* Meta tags */
.project-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.meta-tag {
  font-size: 10px; padding: 2px 10px; letter-spacing: 0.06em;
  border: 1px solid var(--lc-border); color: var(--lc-text-faint);
  background: var(--lc-surface2);
}
.meta-tag.status-wip { border-color: var(--bd-accent-dk); color: var(--bd-accent-lt); }
.meta-tag.genre     { border-color: var(--lc-gold-dk); color: var(--lc-gold); }
.meta-tag.tone      { border-color: #3a4270; color: #8090d0; }

/* Content warnings box */
.cw-box {
  background: #1e0a0e;
  border-left: 3px solid var(--bd-accent);
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 11px; color: var(--lc-text-dim); line-height: 1.7;
}
.cw-box strong { color: var(--bd-accent-lt); letter-spacing: 0.04em; }

/* ── SCENES / PLACES PANEL ── */
.scenes-body { padding: 14px 16px; }
.scenes-intro {
  font-size: 11px; color: var(--lc-text-faint); margin-bottom: 14px;
  line-height: 1.7;
}

.scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.scene-card {
  background: var(--lc-raised);
  border-top: 1px solid var(--win-light);
  border-left: 1px solid var(--win-light);
  border-right: 1px solid var(--win-dark);
  border-bottom: 1px solid var(--win-dark);
  display: flex; flex-direction: column;
  transition: box-shadow var(--transition);
}
.scene-card:hover {
  box-shadow: 0 0 14px rgba(196,30,58,0.25);
}
.scene-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  display: block; filter: saturate(0.7) brightness(0.75);
  border-bottom: 1px solid var(--lc-border);
  transition: filter 0.3s;
}
.scene-card:hover .scene-img { filter: saturate(0.9) brightness(0.9); }
.scene-img-placeholder {
  width: 100%; aspect-ratio: 16/9;
  background: linear-gradient(160deg, #1a0508, #231e30);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; font-size: 22px; color: var(--lc-text-faint);
  border-bottom: 1px solid var(--lc-border);
}
.scene-img-caption { font-size: 9px; color: var(--lc-text-faint); letter-spacing: 0.06em; }
.scene-info { padding: 8px 10px; }
.scene-name {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 13px; color: var(--lc-gold); display: block; margin-bottom: 3px;
}
.scene-desc {
  font-size: 10px; color: var(--lc-text-faint); line-height: 1.6;
  display: block; max-width: none;
}
.scene-type {
  display: inline-block; margin-top: 5px;
  font-size: 9px; padding: 1px 6px;
  border: 1px solid var(--bd-accent-dk); color: var(--bd-accent-lt);
  letter-spacing: 0.06em;
}

/* ── CHARACTERS PANEL ── */
.chars-body { padding: 14px 16px; }
.chars-intro {
  font-size: 11px; color: var(--lc-text-faint); margin-bottom: 14px; line-height: 1.7;
}
.chars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.char-link-card {
  background: var(--lc-raised);
  border-top: 1px solid var(--win-light);
  border-left: 1px solid var(--win-light);
  border-right: 1px solid var(--win-dark);
  border-bottom: 1px solid var(--win-dark);
  text-decoration: none;
  display: flex; flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
  color: inherit;
}
.char-link-card:hover {
  box-shadow: 0 0 14px rgba(201,162,39,0.3), 2px 2px 0 var(--win-dark);
  transform: translate(-1px, -1px);
}
.char-link-portrait {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top;
  display: block; filter: saturate(0.8) brightness(0.8);
  border-bottom: 1px solid var(--lc-border);
  transition: filter 0.3s;
}
.char-link-card:hover .char-link-portrait { filter: saturate(1) brightness(0.9); }
.char-link-placeholder {
  width: 100%; aspect-ratio: 3/4;
  background: linear-gradient(160deg, #1a0508, var(--lc-raised));
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: var(--lc-text-faint);
  border-bottom: 1px solid var(--lc-border);
}
.char-link-info { padding: 8px 10px; }
.char-link-name {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 13px; color: var(--lc-gold); display: block; margin-bottom: 2px;
}
.char-link-role { font-size: 10px; color: var(--lc-text-faint); display: block; }
.char-link-arrow {
  font-size: 9px; color: var(--bd-accent-lt); margin-top: 4px;
  display: block; letter-spacing: 0.06em;
}

/* ── STATUS BAR ── */
.win-statusbar {
  height: 22px; display: flex; align-items: center; gap: 4px;
  padding: 0 8px; background: var(--lc-surface2);
  border-top: 1px solid var(--lc-border); flex-shrink: 0;
}
.status-pane {
  height: 16px;
  border-top: 1px solid var(--lc-border); border-left: 1px solid var(--lc-border);
  border-right: 1px solid var(--win-dark); border-bottom: 1px solid var(--win-dark);
  padding: 0 8px; font-size: 10px; display: flex; align-items: center;
  color: var(--lc-text-faint); letter-spacing: 0.04em;
}
.status-pane.accent { color: var(--lc-gold); }
.status-pane.red    { color: var(--bd-accent-lt); }

/* ── RESIZE ── */
.win-resize {
  position: absolute; bottom: 0; right: 0; width: 16px; height: 16px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, var(--bd-accent-dk) 50%);
}

/* ── TASKBAR ── */
.taskbar {
  position: fixed; bottom: 0; left: 0; right: 0; height: 30px;
  background: var(--lc-surface2); border-top: 2px solid var(--bd-accent-dk);
  display: flex; align-items: center; padding: 0 4px; gap: 4px; z-index: 9999;
}
.start-btn {
  height: 22px; padding: 0 8px; display: flex; align-items: center; gap: 5px;
  font-family: 'IM Fell English', Georgia, serif; font-size: 12px;
  color: var(--lc-gold-lt); cursor: pointer; letter-spacing: 0.04em;
  border-top: 1px solid var(--win-light); border-left: 1px solid var(--win-light);
  border-right: 1px solid var(--win-dark); border-bottom: 1px solid var(--win-dark);
  background: var(--lc-raised);
}
.start-btn:hover { background: var(--bd-accent-dk); }
.taskbar-sep { width: 1px; height: 20px; background: var(--lc-border); }
.task-btn {
  height: 22px; padding: 0 10px; font-size: 11px; letter-spacing: 0.03em;
  border-top: 1px solid var(--win-light); border-left: 1px solid var(--win-light);
  border-right: 1px solid var(--win-dark); border-bottom: 1px solid var(--win-dark);
  background: var(--lc-raised); color: var(--lc-text-dim); cursor: pointer;
  display: flex; align-items: center; gap: 5px; text-decoration: none;
}
.task-btn:hover { background: var(--lc-surface2); color: var(--lc-gold-lt); }
.task-btn.active {
  background: var(--lc-surface);
  border-top: 1px solid var(--win-dark); border-left: 1px solid var(--win-dark);
  border-right: 1px solid var(--win-light); border-bottom: 1px solid var(--win-light);
  color: var(--lc-gold);
}
.taskbar-clock {
  margin-left: auto; height: 22px; padding: 0 10px;
  border-top: 1px solid var(--lc-border); border-left: 1px solid var(--lc-border);
  border-right: 1px solid var(--win-dark); border-bottom: 1px solid var(--win-dark);
  font-size: 11px; display: flex; align-items: center; color: var(--lc-text-dim);
  letter-spacing: 0.05em;
}

/* ── FLOAT AESTHETIC WINDOWS ── */
.float-win {
  position: absolute; display: flex; flex-direction: column;
  user-select: none; z-index: 10;
  border-top: 2px solid var(--win-light); border-left: 2px solid var(--win-light);
  border-right: 2px solid var(--win-dark); border-bottom: 2px solid var(--win-dark);
  box-shadow: 3px 3px 0 var(--win-dark), 0 0 20px rgba(196,30,58,0.12);
  background: var(--lc-dark);
}
.float-titlebar {
  height: 20px;
  background: linear-gradient(to right, #3a0008, var(--bd-accent) 60%, var(--lc-gold-dk));
  display: flex; align-items: center; padding: 0 4px; gap: 4px;
  cursor: grab; flex-shrink: 0; border-bottom: 1px solid var(--bd-accent-dk);
}
.float-titlebar:active { cursor: grabbing; }
.float-title-text {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 10px; color: var(--lc-gold-lt); letter-spacing: 0.05em;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.float-btn-close {
  width: 13px; height: 11px; background: var(--lc-raised);
  border-top: 1px solid var(--win-light); border-left: 1px solid var(--win-light);
  border-right: 1px solid var(--win-dark); border-bottom: 1px solid var(--win-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; cursor: pointer; color: var(--lc-gold);
}
.float-btn-close:hover { background: var(--bd-accent); color: #fff; }
.float-body {
  flex: 1; overflow: hidden; background: var(--lc-void); border-top: 1px solid var(--lc-border);
}
.float-img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.7) brightness(0.8); transition: filter 0.3s;
}
.float-win:hover .float-img { filter: saturate(0.95) brightness(0.9); }
.float-win::after {
  content: '◈'; position: absolute; bottom: 3px; right: 5px;
  font-size: 8px; color: var(--bd-accent-dk); pointer-events: none; opacity: 0.6;
}