:root {
  color-scheme: light;
  --navy: #000066;
  --blue: #0000ee;
  --silver: #c0c0c0;
  --yellow: #ffff00;
  --ink: #000000;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #008080;
  color: var(--ink);
  font: 13px/1.45 Verdana, Arial, sans-serif;
}

a { color: var(--blue); }
a:visited { color: #551a8b; }

.masthead {
  width: min(960px, calc(100% - 24px));
  margin: 12px auto 0;
  padding: 10px 12px;
  border: 2px outset #ffffff;
  background: var(--navy);
  color: #ffffff;
}

.wordmark {
  color: #ffffff !important;
  font: bold 20px "Times New Roman", serif;
  text-decoration: none;
}

main, footer {
  width: min(960px, calc(100% - 24px));
  margin-inline: auto;
  border-right: 2px outset #ffffff;
  border-left: 2px outset #ffffff;
  background: #ffffff;
}

main { padding: 12px; }
.hero { padding: 0 0 12px; }

.controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 10px;
  border: 2px inset #ffffff;
  background: var(--silver);
}

.controls label { display: grid; gap: 3px; }
.controls label span { font: bold 11px Arial, sans-serif; }
.search-control { grid-column: span 2; }

input, select {
  width: 100%;
  min-height: 27px;
  padding: 3px 5px;
  border: 2px inset #ffffff;
  border-radius: 0;
  background: #ffffff;
  color: #000000;
  font: 12px Arial, sans-serif;
}

input:focus, select:focus { outline: 1px dotted #000000; outline-offset: -4px; }

.check-control {
  display: flex !important;
  align-items: center;
  align-self: end;
  gap: 6px !important;
  min-height: 28px;
}

.check-control input { width: 14px; min-height: 14px; height: 14px; margin: 0; }

.control-button,
.modal-actions button,
.close-button {
  border: 2px outset #ffffff;
  border-radius: 0;
  background: var(--silver);
  color: #000000;
  font: 12px Arial, sans-serif;
  cursor: pointer;
}

.control-button { align-self: end; min-height: 29px; padding: 3px 8px; font-weight: bold; }
.control-button:active, .modal-actions button:active, .close-button:active { border-style: inset; }
.lucky-button { background: var(--yellow); }

.list-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  border: 2px outset #ffffff;
  background: var(--navy);
  color: #ffffff;
}

.list-heading h2 { margin: 0; font: bold 18px Arial, sans-serif; }
.list-heading p { margin: 0; color: var(--yellow); font: 11px "Courier New", monospace; text-transform: uppercase; }
.movie-list { margin: 0; padding: 0; border: 1px solid #808080; border-top: 0; list-style: none; }

.movie {
  display: grid;
  grid-template-columns: 42px 72px 1fr 86px;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px dotted #808080;
  background: #ffffff;
}

/* When a movie has no poster, collapse the poster column for that row. */
.movie:not(:has(.poster-wrap)) { grid-template-columns: 42px 1fr 86px; }

.poster-wrap {
  width: 72px;
  align-self: start;
  border: 2px inset #ffffff;
  background: #000000;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.poster-wrap[hidden] { display: none; }
.poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movie:nth-child(even) { background: #f0f0f0; }
.movie:last-child { border-bottom: 0; }
.rank { color: #555555; font: 12px "Courier New", monospace; }
.title-line { display: flex; align-items: baseline; gap: 7px; }
.movie h3 { margin: 0; font: bold 22px "Times New Roman", serif; }
.year { color: #555555; font: 11px Arial, sans-serif; }
.meta { margin: 3px 0 6px; color: #444444; font: 10px "Courier New", monospace; text-transform: uppercase; }
.expiry, .accolade { display: inline-block; margin: 0 5px 6px 0; padding: 2px 4px; font: bold 10px Arial, sans-serif; text-transform: uppercase; }
.expiry { border: 1px solid #cc0000; background: var(--yellow); color: #990000; }
.accolade { border: 1px solid #000000; background: #ffffff; }
.expiry[hidden], .accolade[hidden] { display: none; }
.plot { max-width: 680px; margin: 0; font: 13px/1.5 Arial, sans-serif; }
.links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.links a { color: var(--blue) !important; font: bold 12px Arial, sans-serif; text-decoration: underline; }
.watch::before { content: "[ "; }
.watch::after { content: " ]"; }

.scores { display: grid; gap: 5px; align-self: start; }
.score { min-width: 78px; padding: 5px; border: 2px outset #ffffff; background: var(--yellow); text-align: center; }
.imdb-score { background: var(--silver); color: #000000; }
.score strong { display: block; font: bold 22px "Times New Roman", serif; }
.score span { font: 9px Arial, sans-serif; text-transform: uppercase; }
.empty { padding: 30px 8px; color: #555555; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 12px 20px;
  border-bottom: 2px outset #ffffff;
  color: #333333;
  font: 10px/1.5 "Courier New", monospace;
}

footer p { max-width: 430px; }

#lucky-modal {
  width: min(680px, calc(100% - 24px));
  padding: 4px;
  border: 2px outset #ffffff;
  border-radius: 0;
  background: var(--silver);
  color: #000000;
  box-shadow: 8px 8px 0 rgb(0 0 0 / 35%);
}

#lucky-modal::backdrop { background: rgb(0 0 0 / 55%); }
.modal-topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; padding: 3px 4px; background: var(--navy); color: #ffffff; font: bold 12px Arial, sans-serif; }
.close-button { min-width: 50px; padding: 2px 5px; }

.modal-body { display: grid; grid-template-columns: 160px 1fr; gap: 14px; padding: 14px; }
.modal-body:has(.modal-poster-wrap[hidden]) { grid-template-columns: 1fr; }
.modal-poster-wrap { align-self: start; border: 2px inset #ffffff; background: #000000; aspect-ratio: 2 / 3; overflow: hidden; }
.modal-poster-wrap[hidden] { display: none; }
.modal-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.modal-copy { min-width: 0; }

.modal-score { float: right; width: 78px; margin: 0 0 6px 12px; padding: 5px; border: 2px outset #ffffff; background: var(--yellow); text-align: center; }
.modal-score strong { display: block; font: bold 22px "Times New Roman", serif; }
.modal-score span { font: 9px Arial, sans-serif; text-transform: uppercase; }
.modal-kicker { margin: 0 0 3px; color: #555555; font: bold 10px Arial, sans-serif; text-transform: uppercase; }
.modal-title { margin: 0; padding-right: 80px; font: bold 28px "Times New Roman", serif; }
.modal-meta { margin: 8px 0; font: 10px "Courier New", monospace; text-transform: uppercase; }
.modal-plot { margin: 10px 0; font: 13px/1.5 Arial, sans-serif; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.modal-actions a, .modal-actions button { padding: 5px 8px; font-weight: bold; }
.modal-actions .modal-watch { border: 2px outset #ffffff; background: var(--yellow); color: var(--blue); }

@media (max-width: 640px) {
  body { background: #ffffff; }
  .masthead, main, footer { width: 100%; margin-top: 0; border-right: 0; border-left: 0; }
  .wordmark { font-size: 17px; }
  .controls { grid-template-columns: 1fr 1fr; }
  .search-control { grid-column: 1 / -1; }
  .movie { grid-template-columns: 28px 60px 1fr; gap: 8px; }
  .movie:not(:has(.poster-wrap)) { grid-template-columns: 28px 1fr; }
  .poster-wrap { width: 60px; grid-column: 2; grid-row: 1 / span 2; }
  .rank { grid-column: 1; grid-row: 1; }
  .scores { grid-column: 3; grid-row: 1; justify-self: end; }
  .movie-copy { grid-column: 3; grid-row: 2; }
  .movie:not(:has(.poster-wrap)) .scores { grid-column: 2; }
  .movie:not(:has(.poster-wrap)) .movie-copy { grid-column: 2; }
  .title-line { padding-right: 88px; flex-wrap: wrap; }
  footer { display: block; }
  #lucky-modal { box-shadow: 4px 4px 0 rgb(0 0 0 / 35%); }
  .modal-body { grid-template-columns: 120px 1fr; gap: 10px; padding: 10px; }
}