/* Gallery page — inherits Limbus palette, standalone window */
@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-border2:  #504870;
  --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;
  --win-mid:     #2e2840;
  --transition:  150ms ease;
}

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

body {
  background-color: var(--lc-void);
  background-image:
    url("https://www.transparenttextures.com/patterns/dark-matter.png"),
    radial-gradient(ellipse at 20% 50%, rgba(176,28,46,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(201,162,39,0.05) 0%, transparent 50%);
  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;
}

.win-window {
  position: absolute;
  width: 860px;
  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 40px rgba(176,28,46,0.15);
  display: flex;
  flex-direction: column;
  user-select: none;
}

.win-titlebar {
  height: 26px;
  background: linear-gradient(to right, var(--lc-blood), var(--lc-crimson) 50%, var(--lc-gold-dk) 100%);
  display: flex;
  align-items: center;
  padding: 0 4px;
  gap: 4px;
  cursor: grab;
  flex-shrink: 0;
  border-bottom: 1px solid var(--lc-gold-dk);
}
.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.04em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.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); line-height: 1; flex-shrink: 0;
}
.win-btn:hover { background: var(--lc-crimson); color: var(--lc-text); }
.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);
}

.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;
}
.win-menu-item:hover, .win-menu-item.active {
  background: var(--lc-blood);
  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 4px 20px rgba(0,0,0,0.6);
  z-index: 100; min-width: 170px;
}
.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(--lc-blood); color: var(--lc-gold-lt); }
.win-dropdown-sep { height: 1px; background: var(--lc-border); margin: 3px 4px; }

.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(--lc-gold-dk); }

.section-header {
  padding: 10px 18px 8px;
  background: linear-gradient(to right, var(--lc-surface2), var(--lc-surface));
  border-bottom: 2px solid var(--lc-gold-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(--lc-crimson); font-size: 12px; }

/* Gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  padding: 16px;
}
.char-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);
  cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease;
  text-decoration: none;
  display: flex; flex-direction: column;
}
.char-card:hover {
  box-shadow: 0 0 14px rgba(201,162,39,0.35), 2px 2px 0 var(--win-dark);
  transform: translate(-1px,-1px);
}
.char-card-img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top;
  display: block; filter: saturate(0.85);
  border-bottom: 1px solid var(--lc-border);
}
.char-card-img-placeholder {
  width: 100%; aspect-ratio: 3/4;
  background: linear-gradient(135deg, var(--lc-surface2), var(--lc-raised));
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; border-bottom: 1px solid var(--lc-border);
  color: var(--lc-text-faint);
}
.char-card-info { padding: 8px 10px; }
.char-card-name {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 13px; color: var(--lc-gold); display: block;
}
.char-card-role { font-size: 10px; color: var(--lc-text-faint); margin-top: 2px; display: block; }

/* 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); }
.win-resize {
  position: absolute; bottom: 0; right: 0; width: 16px; height: 16px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, var(--lc-gold-dk) 50%);
}

/* Taskbar */
.taskbar {
  position: fixed; bottom: 0; left: 0; right: 0; height: 30px;
  background: var(--lc-surface2); border-top: 2px solid var(--lc-gold-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(--lc-blood); }
.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);
}