:root {
  color-scheme: dark;
  --page-bg: #050505;
  --panel-bg: #0b0b0b;
  --gold: #d8ae63;
  --gold-soft: #b78e4f;
  --ivory: #efe8d8;
  --muted: #aaa49a;
  --red: #8e1618;
  --content-max: 520px;
  --section-gap: 22px;
  --related-comments-gap: 56px;
  --review-font-size: 18px;
  --review-line-height: 1.7;
}

* { box-sizing: border-box; }
html { background: var(--page-bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% 0, rgba(113,72,19,.12), transparent 34rem),
    var(--page-bg);
  color: var(--ivory);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

.app-shell {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  min-height: 100%;
  overflow: clip;
}

.brand-header {
  position: relative;
  width: 100%;
  background: #050505;
}
.brand-artwork { display: block; width: 100%; height: auto; }
.header-hotspot {
  position: absolute;
  top: 14%;
  width: 16%;
  height: 72%;
  border: 0;
  background: transparent;
  border-radius: 10px;
}
.header-hotspot:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.header-menu { left: 0; }
.header-search { right: 0; }

.content-page { padding: 0 10px 36px; }
.loading-card {
  margin: 24px 0;
  padding: 28px 18px;
  border: 1px solid rgba(216,174,99,.45);
  text-align: center;
  color: var(--gold);
  background: #080808;
}
.review-page { display: block; }

/* Clapboard */
.clapboard { margin-top: 14px; }
.clapboard-top {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: auto;
}
.clapboard-body {
  position: relative;
  margin-top: -13px;
  min-height: 420px;
  padding: 58px 16px 22px;
}
.clapboard-bg,
.reaction-bg,
.comments-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}
.clapboard-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 34% minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.poster-frame {
  position: relative;
  width: 100%;
  aspect-ratio: .76;
  min-width: 0;
}
.poster-frame-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.poster-safe-zone {
  position: absolute;
  inset: 8%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.movie-poster {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #080808;
}
.movie-meta { min-width: 0; padding-top: 2px; }
.movie-title {
  margin: 0 0 12px;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 5vw, 1.65rem);
  line-height: 1.04;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.meta-list { margin: 0; }
.meta-list > div {
  display: grid;
  grid-template-columns: 88px minmax(0,1fr);
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid rgba(216,174,99,.18);
}
.meta-list > div:first-child { border-top: 0; }
.meta-list dt {
  color: var(--gold-soft);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.meta-list dd {
  margin: 0;
  color: var(--ivory);
  font-size: .79rem;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.movie-rating { color: var(--gold) !important; letter-spacing: .11em; white-space: nowrap; }

.reaction-panel {
  position: relative;
  margin-top: 0;
  min-height: 142px;
  padding: 24px 26px 24px;
  overflow: visible;
}
.reaction-panel > *:not(.reaction-bg) { position: relative; z-index: 1; }
.reaction-panel h2 {
  margin: 0 0 13px;
  color: var(--gold);
  text-align: center;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.reaction-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(216,174,99,.28);
  padding-top: 10px;
}
.reaction-button {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 54px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: var(--ivory);
}
.reaction-button + .reaction-button { border-left: 1px solid rgba(216,174,99,.32); }
.reaction-button svg { width: 29px; height: 29px; fill: var(--gold); }
.reaction-label { font-size: .72rem; color: var(--gold-soft); text-align: left; }
.reaction-button strong { color: var(--ivory); font-size: .9rem; font-variant-numeric: tabular-nums; }
.reaction-button[aria-pressed="true"] { background: rgba(216,174,99,.08); }

/* Theater */
.theater { margin-top: var(--section-gap); }
.theater-top,
.theater-bottom { display:block; width:100%; height:auto; }
.theater-middle {
  margin-top: -1px;
  margin-bottom: -1px;
  min-height: 175px;
  padding: 12px 12.5% 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.review-body {
  color: #eee7d8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--review-font-size);
  line-height: var(--review-line-height);
  overflow-wrap: anywhere;
  word-break: normal;
}
.review-body p { margin: 0 0 1.05em; }
.review-body p:last-child { margin-bottom: 0; }
.review-body ol,
.review-body ul { margin: .8em 0 1.1em 1.3em; padding: 0; }
.review-body li { margin: .45em 0; }
.review-body strong { color: #fff2d0; }
.review-body em { color: #ddd0b4; }

/* Related Reviews */
.related-section { margin-top: 28px; }
.related-header { display:block; width:100%; height:auto; }
.related-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(216,174,99,.45) transparent;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.related-reel {
  position: relative;
  width: max(100%, 760px);
  aspect-ratio: 3.52;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.related-grid {
  position: absolute;
  inset: 12% 1.5% 12%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6%;
}
.related-card {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 4px;
  padding: 7% 7% 5%;
  color: var(--ivory);
  text-decoration: none;
  text-align: center;
}
.related-poster-zone {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.related-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.related-title {
  min-height: 2.5em;
  display: grid;
  place-items: center;
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.related-stars { color: var(--gold); font-size: .72rem; letter-spacing: .05em; }
.related-reason { display:none; }

/* Comments */
.comments-section { margin-top: var(--related-comments-gap); }
.comments-header { display:block; width:100%; height:auto; }
.comments-shell {
  position: relative;
  min-height: 410px;
  padding: 52px 24px 34px;
}
.comments-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  min-width: 0;
}
.comments-content h2 {
  margin: 0 0 18px;
  color: var(--gold);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.comment-list { display: grid; gap: 14px; }
.comment-card {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(216,174,99,.16);
}
.comment-card strong { display:block; color:var(--gold-soft); font-size:.76rem; }
.comment-card p { margin:5px 0; color:var(--ivory); font-size:.72rem; line-height:1.45; }
.comment-card time { color:var(--muted); font-size:.64rem; }
.comment-empty { color:var(--muted); font-size:.72rem; line-height:1.5; }
.comment-form { display:grid; gap:10px; }
.comment-form label { display:grid; gap:4px; color:var(--gold-soft); font-size:.66rem; font-weight:700; text-transform:uppercase; }
.comment-form input,
.comment-form textarea {
  width:100%;
  min-width:0;
  border:1px solid rgba(216,174,99,.52);
  border-radius:5px;
  background:rgba(4,4,4,.78);
  color:var(--ivory);
  padding:9px 10px;
  font-size:16px;
  outline:none;
}
.comment-form textarea { resize:vertical; min-height:96px; }
.comment-form input:focus,
.comment-form textarea:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(216,174,99,.12); }
.comment-actions { margin-top: 22px; display:flex; justify-content:center; }
.comment-actions button {
  min-height:44px;
  padding:10px 18px;
  border:1px solid var(--gold);
  border-radius:6px;
  background:linear-gradient(#16110a,#080603);
  color:var(--gold);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.comment-status { min-height:1.4em; margin:0; color:#8cc57c; font-size:.65rem; line-height:1.4; }

/* Drawer and Search */
.drawer {
  position: fixed;
  z-index: 40;
  top:0;
  left:0;
  width:min(82vw,320px);
  height:100%;
  padding:26px 22px;
  background:#070707;
  border-right:1px solid rgba(216,174,99,.5);
  transform:translateX(-105%);
  transition:transform .2s ease;
}
.drawer[data-open="true"] { transform:translateX(0); }
.drawer-close { float:right; border:0; background:transparent; color:var(--gold); font-size:2rem; }
.drawer-nav { clear:both; display:grid; gap:4px; padding-top:34px; }
.drawer-nav a,
.drawer-nav button {
  display:block;
  width:100%;
  padding:14px 10px;
  border:0;
  border-bottom:1px solid rgba(216,174,99,.16);
  background:transparent;
  color:var(--ivory);
  text-align:left;
  text-decoration:none;
}
.drawer-backdrop { position:fixed; z-index:35; inset:0; background:rgba(0,0,0,.68); }
.search-dialog { width:min(92vw,480px); border:1px solid rgba(216,174,99,.55); background:#080808; color:var(--ivory); padding:0; }
.search-dialog::backdrop { background:rgba(0,0,0,.74); }
.search-shell { padding:18px; }
.search-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; color:var(--gold); font-weight:800; }
.search-head button { border:0; background:transparent; color:var(--gold); font-size:1.6rem; }
.search-shell input { width:100%; padding:12px; border:1px solid rgba(216,174,99,.5); background:#030303; color:var(--ivory); font-size:16px; }
.search-results { display:grid; gap:5px; margin-top:12px; max-height:50vh; overflow:auto; }
.search-result { padding:10px; border:1px solid rgba(216,174,99,.15); color:var(--ivory); text-decoration:none; }
.search-result small { display:block; margin-top:3px; color:var(--muted); }

@media (max-width: 370px) {
  :root { --review-font-size: 17px; }
  .content-page { padding-left:6px; padding-right:6px; }
  .clapboard-body { padding-left:12px; padding-right:12px; }
  .clapboard-content { grid-template-columns:35% minmax(0,1fr); gap:10px; }
  .meta-list > div { grid-template-columns:76px minmax(0,1fr); gap:5px; }
  .meta-list dt { font-size:.62rem; }
  .meta-list dd { font-size:.72rem; }
  .reaction-panel { padding-left:18px; padding-right:18px; }
  .reaction-button { grid-template-columns:27px 1fr; }
  .reaction-button strong { grid-column:2; }
  .comments-shell { padding-left:18px; padding-right:18px; }
  .comments-content { gap:18px; }
}

@media (min-width: 760px) {
  :root { --content-max: 620px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .drawer { transition:none; }
}