:root {
  --bg: #141210;
  --panel: #1f1b17;
  --text: #f3ebe1;
  --muted: #a89a8c;
  --line: #3a322b;
  --accent: #f0c27a;
  --gun: #c44b4b;
  --explosion: #d0892d;
  --death: #6b5cff;
  --kiss: #e091c2;
  --scary: #5a7a4a;
  --alcohol_smoke: #8b7355;
  --nudity: #9a6b4a;
  --other: #3a3f4a;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, #2a2118, var(--bg));
  color: var(--text);
  line-height: 1.45;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.hero, main, footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
}
.hero { text-align: center; padding-top: 2.5rem; }
.brand {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.tagline { margin: 0.4rem 0 1.2rem; color: var(--muted); }
.search-wrap { max-width: 34rem; margin: 0 auto 1rem; }
.search-wrap input {
  width: 100%;
  font-size: 1.15rem;
  padding: 0.9rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, black);
  color: var(--text);
  outline: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.search-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(240, 194, 122, 0.22);
}
.links { font-size: 0.9rem; }
.results {
  width: 100%;
  border-collapse: collapse;
  background: color-mix(in srgb, var(--panel) 88%, black);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
th, td { padding: 0.75rem 0.85rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-size: 0.85rem; }
tr:last-child td { border-bottom: 0; }
.poster-thumb {
  width: 3.6rem;
  height: 5.4rem;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  display: block;
  background: #0c0b09;
}
.safety-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #0c0b09;
  border: 1px solid var(--line);
  margin-bottom: 0.4rem;
}
.safety-seg { display: block; height: 100%; min-width: 0; }
.safety-seg.gun { background: var(--gun); }
.safety-seg.explosion { background: var(--explosion); }
.safety-seg.death { background: var(--death); }
.safety-seg.kiss { background: var(--kiss); }
.safety-seg.scary { background: var(--scary); }
.safety-seg.alcohol_smoke { background: var(--alcohol_smoke); }
.safety-seg.nudity { background: var(--nudity); }
.safety-seg.other { background: var(--other); }
.meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-size: 0.85rem; }
.rag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.75rem;
}
.rag.green { background: #8fd18f; color: #0e1a0e; }
.rag.amber { background: #f0c27a; color: #1a1208; }
.rag.red { background: #e08888; color: #2a1010; }
.summary { margin-top: 0.35rem; color: var(--muted); font-size: 0.9rem; }
.empty, #status {
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
}
footer { padding-bottom: 3rem; font-size: 0.85rem; }
[hidden] { display: none !important; }

.detail-header { max-width: 960px; margin: 0 auto; padding: 1.25rem 1.5rem; }
.crumb { margin: 0 0 0.75rem; }
.detail-hero { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.poster-lg {
  width: 8.5rem;
  height: 12.75rem;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0c0b09;
}
.detail-hero-text { flex: 1; min-width: 16rem; }
.detail-hero-text h1 { margin: 0 0 0.35rem; font-size: 1.75rem; }
.safety-panel { margin-top: 0.85rem; }
.safety-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.55rem 0 0.35rem;
}
.safety-headline { margin: 0.5rem 0 0.15rem; color: var(--text); }
.safety-detail { margin: 0.15rem 0 0; font-size: 0.9rem; }
.pill {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1a1208;
  background: #c9b8a4;
}
.pill.gun { background: var(--gun); color: #fff; }
.pill.explosion { background: var(--explosion); color: #1a1208; }
.pill.death { background: var(--death); color: #fff; }
.pill.kiss { background: var(--kiss); color: #1a1208; }
.pill.scary { background: var(--scary); color: #fff; }
.pill.alcohol_smoke { background: var(--alcohol_smoke); color: #fff; }
.pill.nudity { background: var(--nudity); color: #fff; }
.pill.other { background: var(--other); color: #ddd; }

.section-help { margin: -0.25rem 0 0.85rem; font-size: 0.9rem; }
.timeline-wrap { position: relative; margin-top: 0.5rem; }
.timeline {
  position: relative;
  height: 28px;
  margin: 0.5rem 0 0.75rem;
  background: #0e0c0a;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.timeline .track {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 9%,
    #3a322b 9%,
    #3a322b 10%
  );
}
.seg {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 4px;
  cursor: pointer;
  min-width: 3px;
  opacity: 0.95;
}
.seg.gun { background: var(--gun); }
.seg.explosion { background: var(--explosion); }
.seg.death { background: var(--death); }
.seg.kiss { background: var(--kiss); }
.seg.scary { background: var(--scary); }
.seg.alcohol_smoke { background: var(--alcohol_smoke); }
.seg.nudity { background: var(--nudity); }
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.seg-tooltip {
  position: absolute;
  z-index: 20;
  width: 300px;
  background: #1a1612;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  padding: 0.5rem;
  pointer-events: none;
}
.seg-tooltip.fixed {
  position: fixed;
  z-index: 1000;
}
.seg-tooltip img {
  display: block;
  width: 300px;
  height: 300px;
  object-fit: contain;
  background: #0e0c0a;
  border-radius: 6px;
}
.seg-tooltip-meta { margin-top: 0.5rem; }
.seg-tooltip-meta p { margin: 0.35rem 0 0; color: var(--text); font-size: 0.9rem; }
.seg-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  background: #2a241e;
  border: 1px solid var(--line);
}
.thumb-cell { width: 80px; }
.scenes-table td { vertical-align: middle; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; }