@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');

/* ============================================================
   COLOR THEMES
   To set a page's color, add data-theme="name" to its <html> tag.
   Example: <html lang="en" data-theme="amber">
   Available themes: green (default), amber, blue, red, pink
   ============================================================ */

:root,
[data-theme="green"] {
  --phosphor:         #33ff33;
  --phosphor-rgb:     51, 255, 51;
  --phosphor-dim:     #1a8c1a;
  --phosphor-dim-rgb: 26, 140, 26;
  --phosphor-muted:   #88cc88;
  --phosphor-glow:    #00ff0055;
  --secondary:        #4af0ff;
  --secondary-rgb:    74, 240, 255;
  --secondary-dim:    #1a7a99;
  --accent:           #ffb000;
  --accent-rgb:       255, 176, 0;
  --bg:               #050a05;
  --scanline-opacity: 0.18;
}

[data-theme="amber"] {
  --phosphor:         #ffb000;
  --phosphor-rgb:     255, 176, 0;
  --phosphor-dim:     #996800;
  --phosphor-dim-rgb: 153, 104, 0;
  --phosphor-muted:   #ccaa55;
  --phosphor-glow:    #ffb00050;
  --secondary:        #ff6633;
  --secondary-rgb:    255, 102, 51;
  --secondary-dim:    #992211;
  --accent:           #ffdd44;
  --accent-rgb:       255, 221, 68;
  --bg:               #080600;
  --scanline-opacity: 0.15;
}

[data-theme="blue"] {
  --phosphor:         #4af0ff;
  --phosphor-rgb:     74, 240, 255;
  --phosphor-dim:     #1a7a99;
  --phosphor-dim-rgb: 26, 122, 153;
  --phosphor-muted:   #88ccdd;
  --phosphor-glow:    #4af0ff45;
  --secondary:        #7744ff;
  --secondary-rgb:    119, 68, 255;
  --secondary-dim:    #331188;
  --accent:           #ffaa00;
  --accent-rgb:       255, 170, 0;
  --bg:               #020810;
  --scanline-opacity: 0.18;
}

[data-theme="red"] {
  --phosphor:         #ff4444;
  --phosphor-rgb:     255, 68, 68;
  --phosphor-dim:     #992222;
  --phosphor-dim-rgb: 153, 34, 34;
  --phosphor-muted:   #cc8888;
  --phosphor-glow:    #ff444450;
  --secondary:        #ff8800;
  --secondary-rgb:    255, 136, 0;
  --secondary-dim:    #994400;
  --accent:           #ffee22;
  --accent-rgb:       255, 238, 34;
  --bg:               #080202;
  --scanline-opacity: 0.20;
}

[data-theme="pink"] {
  --phosphor:         #ff66cc;
  --phosphor-rgb:     255, 102, 204;
  --phosphor-dim:     #993377;
  --phosphor-dim-rgb: 153, 51, 119;
  --phosphor-muted:   #cc88bb;
  --phosphor-glow:    #ff66cc45;
  --secondary:        #aa44ff;
  --secondary-rgb:    170, 68, 255;
  --secondary-dim:    #661199;
  --accent:           #ff8844;
  --accent-rgb:       255, 136, 68;
  --bg:               #080408;
  --scanline-opacity: 0.16;
}

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

html,
body {
  height: 100%;
  background: #000;
  overflow: hidden;
}

/* ── CRT outer shell ── */
.crt-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  overflow: hidden;
}

/* Curved vignette corners */
.crt-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
      transparent 60%,
      rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
  z-index: 10;
}

/* Scanlines */
.crt-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, var(--scanline-opacity)) 2px,
      rgba(0, 0, 0, var(--scanline-opacity)) 4px);
  pointer-events: none;
  z-index: 9;
  animation: scanroll 8s linear infinite;
}

@keyframes scanroll {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 100px;
  }
}

/* Phosphor flicker overlay */
.flicker {
  position: absolute;
  inset: 0;
  background: rgba(var(--phosphor-rgb), 0.015);
  pointer-events: none;
  z-index: 8;
  animation: flicker 0.15s infinite;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.92;
  }

  75% {
    opacity: 0.98;
  }

  100% {
    opacity: 1;
  }
}

/* Horizontal interference line that sweeps */
.sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(var(--phosphor-rgb), 0.08);
  pointer-events: none;
  z-index: 11;
  animation: sweep 5s linear infinite;
}

@keyframes sweep {
  from {
    top: -2px;
  }

  to {
    top: 100%;
  }
}

/* ── Page content ── */
.screen {
  position: relative;
  z-index: 5;
  height: 100vh;
  overflow-y: auto;
  padding: 2rem 2.5rem;
  color: var(--phosphor);
  font-family: 'Share Tech Mono', monospace;
  font-size: 15px;
  line-height: 1.7;
  text-shadow:
    0 0 6px var(--phosphor),
    0 0 12px var(--phosphor-glow);
}

/* scrollbar */
.screen::-webkit-scrollbar {
  width: 6px;
}

.screen::-webkit-scrollbar-track {
  background: #000;
}

.screen::-webkit-scrollbar-thumb {
  background: var(--phosphor-dim);
}

/* ── Typography ── */
h1 {
  font-family: 'VT323', monospace;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: 0.05em;
  line-height: 1.1;
  margin-bottom: 0.25rem;
  text-shadow:
    0 0 10px var(--phosphor),
    0 0 30px var(--phosphor-glow),
    0 0 60px var(--phosphor-glow);
  animation: headflicker 4s infinite;
}

@keyframes headflicker {

  0%,
  95%,
  100% {
    opacity: 1;
  }

  96% {
    opacity: 0.6;
  }

  97% {
    opacity: 1;
  }

  98% {
    opacity: 0.8;
  }
}

h2 {
  font-family: 'VT323', monospace;
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  margin: 2rem 0 0.5rem;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.45);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.25);
  padding-bottom: 2px;
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--secondary);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--secondary-rgb), 0.4);
  transition: text-shadow 0.2s, color 0.2s;
}

a:hover {
  color: var(--secondary);
  text-shadow:
    0 0 10px var(--secondary),
    0 0 20px rgba(var(--secondary-rgb), 0.5);
}

/* ── Header bar ── */
.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.tagline {
  font-size: 0.9rem;
  color: var(--phosphor-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: none;
}

/* ── Nav ── */
nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

nav a {
  border-bottom: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

nav a:hover {
  border-bottom-color: var(--secondary);
}

.nav-active {
  color: var(--accent) !important;
  text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5) !important;
  border-bottom-color: rgba(var(--accent-rgb), 0.5) !important;
}

/* ── Blinking cursor ── */
.cursor {
  display: inline-block;
  width: 0.65em;
  height: 1.1em;
  background: var(--accent);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: blink 1s step-start infinite;
  box-shadow: 0 0 8px var(--accent);
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* ── Content grid ── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.card {
  border: 1px solid var(--phosphor-dim);
  padding: 1rem 1.25rem;
  background: rgba(var(--phosphor-rgb), 0.03);
  position: relative;
}

.card::before {
  content: '▶';
  position: absolute;
  top: -0.7em;
  left: 0.75rem;
  font-size: 0.7rem;
  background: var(--bg);
  padding: 0 4px;
  color: var(--accent);
}

.card h3 {
  font-family: 'VT323', monospace;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.card p {
  font-size: 0.88rem;
  margin-bottom: 0;
  color: var(--phosphor-muted);
  text-shadow: none;
}

/* ── Status line ── */
.statusbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  border-top: 1px solid var(--phosphor-dim);
  padding: 0.3rem 2.5rem;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  color: var(--phosphor-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
  text-shadow: none;
}

#clock {
  font-family: 'VT323', monospace;
  font-size: 1.15rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}

/* ── ASCII art box ── */
.ascii {
  font-family: 'Share Tech Mono', monospace;
  font-size: 2.5rem;
  color: var(--phosphor);
  margin: 0.25rem 0;
  white-space: pre;
  text-shadow: 0 0 8px var(--phosphor-glow);
  line-height: 1.3;
}

/* ── Typing animation on intro ── */
.typeblock {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--phosphor);
  width: 0;
  animation: type 2s steps(39) 0.5s forwards, erasecaret 0s 3s forwards;
  max-width: 100%;
}

@keyframes type {
  to {
    width: 39ch;
  }
}

@keyframes erasecaret {
  to {
    border-color: transparent;
  }
}

/* —— Form elements —— */
.form-section {
  margin: 2rem 0;
}

.form-section h2 {
  margin-bottom: 1rem;
}

.field {
  margin-bottom: 1.5rem;
}

.field label {
  display: block;
  font-size: 0.85rem;
  color: var(--phosphor-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  text-shadow: none;
}

.field input[type="text"],
.field input[type="email"],
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  text-shadow: none;
  appearance: none;
}

.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--phosphor);
  box-shadow: 0 0 8px var(--phosphor-glow);
}

.field textarea {
  resize: vertical;
  min-height: 80px;
}

.field select option {
  background: var(--bg);
  color: var(--phosphor);
}

.radio-group,
.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 0.25rem;
}

.radio-group label,
.check-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--phosphor);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  text-shadow: none;
}

.radio-group input,
.check-group input {
  accent-color: var(--phosphor);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* XY graph */
.xy-wrap {
  margin: 1rem 0;
}

.xy-axes {
  display: flex;
  align-items: center;
  gap: 12px;
}

.y-axis-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 280px;
  font-size: 0.7rem;
  color: var(--phosphor-dim);
  text-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.xy-canvas-col {
  flex: 1;
}

canvas.xy-canvas {
  display: block;
  width: 100%;
  height: 280px;
  border: 1px solid var(--phosphor-dim);
  cursor: crosshair;
  box-shadow: 0 0 6px var(--phosphor-glow);
}

.x-axis-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--phosphor-dim);
  text-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.xy-readout {
  font-size: 0.78rem;
  color: var(--phosphor-dim);
  margin-top: 0.5rem;
  text-shadow: none;
  min-height: 1.2em;
}

/* Submit button */
.btn-submit {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: 'VT323', monospace;
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  padding: 0.5rem 2rem;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.15s, box-shadow 0.15s;
  text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.6);
  margin-top: 1rem;
}

.btn-submit:hover {
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}

.submit-note {
  font-size: 0.82rem;
  color: var(--phosphor-dim);
  text-shadow: none;
  margin-top: 0.5rem;
}

/* Confirmation message */
.confirm-msg {
  display: none;
  border: 1px solid var(--phosphor-dim);
  padding: 1.25rem;
  background: rgba(var(--phosphor-rgb), 0.04);
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

.confirm-msg.visible {
  display: block;
}

/* —— Mini player bar —— */
#sp-mini {
  position: fixed;
  bottom: 26px;
  left: 0;
  right: 0;
  background: var(--bg);
  border-top: 1px solid var(--phosphor-dim);
  padding: 0.3rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 19;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.82rem;
  color: var(--phosphor-dim);
  text-shadow: none;
}

#sp-mini button {
  background: none;
  border: none;
  color: var(--phosphor-dim);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0 2px;
  transition: color 0.15s;
}

#sp-mini button:hover { color: var(--accent); }

#sp-info {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0;
  overflow: hidden;
  white-space: nowrap;
}

#sp-title {
  color: var(--phosphor);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.sp-sep { opacity: 0.4; }

#sp-bar {
  width: 140px;
  height: 3px;
  background: rgba(var(--phosphor-rgb), 0.15);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

#sp-bar:hover { background: rgba(var(--phosphor-rgb), 0.25); }

#sp-fill {
  height: 100%;
  background: var(--accent);
  pointer-events: none;
}

#sp-times { flex-shrink: 0; }

#sp-link {
  color: var(--phosphor-dim);
  text-decoration: none;
  border: none;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: color 0.15s;
  text-shadow: none;
}

#sp-link:hover { color: var(--phosphor); }

/* —— Full player (music.html) —— */
.player {
  border: 1px solid var(--phosphor-dim);
  padding: 2rem;
  background: rgba(var(--phosphor-rgb), 0.02);
  margin-bottom: 2rem;
  box-shadow: 0 0 20px rgba(var(--phosphor-rgb), 0.04), inset 0 0 40px rgba(0,0,0,0.3);
}

.now-playing {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(var(--phosphor-dim-rgb), 0.3);
}

.np-label {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--phosphor-dim);
  margin-bottom: 0.5rem;
  text-shadow: none;
}

.np-title {
  font-family: 'VT323', monospace;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--phosphor);
  line-height: 1.1;
  text-shadow: 0 0 10px var(--phosphor), 0 0 30px var(--phosphor-glow);
  margin-bottom: 0.25rem;
}

.np-artist {
  font-size: 0.9rem;
  color: var(--phosphor-dim);
  letter-spacing: 0.06em;
  text-shadow: none;
}

.progress {
  width: 100%;
  height: 10px;
  background: rgba(var(--phosphor-rgb), 0.08);
  border: 1px solid rgba(var(--phosphor-rgb), 0.15);
  cursor: pointer;
  margin-bottom: 0.5rem;
  position: relative;
}

.progress:hover { border-color: var(--phosphor-dim); }

.progress-fill {
  height: 100%;
  background: var(--accent);
  pointer-events: none;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
  transition: width 0.1s linear;
}

.times {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--phosphor-dim);
  margin-bottom: 1.5rem;
  text-shadow: none;
}

.controls {
  display: flex;
  gap: 0.75rem;
}

.controls button {
  background: none;
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor-dim);
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  padding: 0.4rem 1.25rem;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
  text-shadow: none;
  line-height: 1;
}

.controls button:hover {
  color: var(--secondary);
  border-color: var(--secondary);
  background: rgba(var(--secondary-rgb), 0.06);
  box-shadow: 0 0 10px rgba(var(--secondary-rgb), 0.35);
}

/* Playlist */
.playlist {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.track {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(var(--phosphor-dim-rgb), 0.2);
  cursor: pointer;
  transition: background 0.1s;
}

.track:hover { background: rgba(var(--phosphor-rgb), 0.04); }

.track.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
}

.track.active::before {
  content: '▶ ';
  font-size: 0.6rem;
}

.t-title { font-size: 0.9rem; }

.t-artist {
  font-size: 0.82rem;
  color: var(--phosphor-dim);
  text-shadow: none;
}

/* —— Card action button —— */
.btn-card {
  display: inline-block;
  background: none;
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor-dim);
  font-family: 'VT323', monospace;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  padding: 0.3rem 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
  text-shadow: none;
  margin-top: 0.75rem;
}

.btn-card:hover {
  color: var(--secondary);
  border-color: var(--secondary);
  background: rgba(var(--secondary-rgb), 0.06);
  box-shadow: 0 0 10px rgba(var(--secondary-rgb), 0.35);
}

/* Preview card (devlog snippet on homepage) */
.preview-card {
  margin-bottom: 1.5rem;
}

.preview-card .preview-date {
  font-size: 0.78rem;
  color: var(--phosphor-dim);
  letter-spacing: 0.12em;
  text-shadow: none;
  margin-bottom: 0.25rem;
}

.preview-card .preview-title {
  font-family: 'VT323', monospace;
  font-size: 1.6rem;
  color: var(--phosphor);
  line-height: 1.1;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 6px var(--phosphor-glow);
}

.preview-card .preview-body {
  font-size: 0.88rem;
  color: var(--phosphor-muted);
  text-shadow: none;
  line-height: 1.65;
  margin-bottom: 0;
}

/* —— Theme switcher (statusbar) —— */
#theme-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-shadow: none;
}

#theme-switcher label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--phosphor-dim);
  cursor: default;
}

/* wrapper holds the select + custom arrow */
.theme-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.theme-select-wrap::after {
  content: '▾';
  position: absolute;
  right: 4px;
  pointer-events: none;
  font-size: 0.6rem;
  color: var(--phosphor-dim);
  line-height: 1;
}

#theme-switcher select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg);
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 1px 18px 1px 4px;
  outline: none;
  cursor: pointer;
  text-shadow: none;
  transition: border-color 0.15s;
}

#theme-switcher select:hover { border-color: var(--phosphor); }

#theme-switcher select option {
  background: var(--bg);
  color: var(--phosphor);
}

/* ── Devlog entries (shared: devlog.html + admin-devlog.html) ── */
.entry { margin-bottom: 3.5rem; }
.entry-header { margin-bottom: 1.25rem; }
.entry-date {
  font-size: 0.85rem;
  color: var(--phosphor-muted);
  letter-spacing: 0.12em;
  text-shadow: none;
  margin-bottom: 0.25rem;
}
.entry-title {
  font-family: 'VT323', monospace;
  font-size: 2rem;
  color: var(--accent);
  line-height: 1.1;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
}
.entry-tag {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--secondary);
  border: 1px solid rgba(var(--secondary-rgb), 0.45);
  padding: 1px 6px;
  margin-top: 6px;
  text-shadow: none;
  text-transform: uppercase;
}
.entry p {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--phosphor-muted);
  text-shadow: none;
  margin-bottom: 0.85rem;
}
.entry p strong { color: var(--phosphor); font-weight: normal; }
.entry h3 {
  font-family: 'VT323', monospace;
  font-size: 1.3rem;
  color: var(--accent);
  text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.35);
  margin: 1.5rem 0 0.5rem;
  letter-spacing: 0.05em;
}
.entry ul { list-style: none; padding: 0; margin: 0 0 0.85rem 0; }
.entry ul li {
  font-size: 0.85rem;
  color: var(--phosphor-muted);
  text-shadow: none;
  padding: 0.2rem 0 0.2rem 1.2rem;
  position: relative;
  line-height: 1.6;
}
.entry ul li::before { content: '›'; position: absolute; left: 0; color: var(--secondary); }
.entry ul li ul { margin-top: 0.25rem; margin-bottom: 0; }
.entry ul li ul li { padding-left: 1.4rem; }
.entry ul li ul li::before { content: '—'; font-size: 0.75rem; }
.entry-divider {
  border: none;
  border-top: 1px solid rgba(var(--phosphor-dim-rgb), 0.25);
  margin: 3rem 0;
}
.media-placeholder {
  border: 1px dashed var(--phosphor-dim);
  padding: 1.5rem;
  margin: 1rem 0;
  text-align: center;
  background: rgba(var(--phosphor-rgb), 0.02);
  color: var(--phosphor-dim);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-shadow: none;
}
.media-placeholder .ph-label {
  color: var(--phosphor);
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
}
.media-placeholder .ph-hint { opacity: 0.5; font-size: 0.75rem; }
.game-ref {
  border-left: 2px solid var(--secondary);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  background: rgba(var(--phosphor-rgb), 0.02);
}
.game-ref .game-title {
  color: var(--phosphor);
  font-size: 0.88rem;
  display: block;
  margin-bottom: 0.25rem;
}