:root { --paper: #f5f2e9; --ink: #22251f; --muted: #74776b; --line: #deded2; --accent: #e8ee89; --white: #fffefa; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
a { color: inherit; }
button, .button { cursor: pointer; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #737b26; outline-offset: 4px; }
[hidden] { display: none !important; }
.site-header { max-width: 1320px; margin: auto; padding: 27px 52px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: flex; align-items: center; font-size: 24px; font-weight: 800; letter-spacing: -1.1px; text-decoration: none; }
.brand-icon { display: inline-grid; place-items: center; background: var(--ink); color: var(--accent); width: 35px; height: 35px; border-radius: 9px; margin-right: 10px; font-size: 26px; }
.brand-dot { color: #818941; }
.header-note { color: var(--muted); font-size: 12px; }
.edition, .muted-label, .eyebrow, .section-kicker, .round-tag { font-size: 10px; font-weight: 700; letter-spacing: 1.7px; }
.edition { border: 1px solid #cccfc0; padding: 6px 10px; border-radius: 4px; white-space: nowrap; }
main { max-width: 1080px; padding: 0 36px; margin: 0 auto; min-height: calc(100vh - 190px); }
.intro { text-align: center; padding: 65px 0 34px; }
.eyebrow { color: #656b4d; }
.tiny-star { color: #7e8533; font-size: 18px; vertical-align: middle; margin-right: 7px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(40px, 5.2vw, 66px); line-height: 1.08; letter-spacing: -3px; font-weight: 650; margin: 20px 0; }
h1 em { font-family: Georgia, serif; font-weight: 400; }
.intro-copy { color: #727568; line-height: 1.7; font-size: 16px; }
.selection-card { max-width: 780px; margin: 0 auto; padding: 30px 34px 24px; background: var(--white); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 6px 20px #33351a04; }
.section-kicker { display: flex; align-items: center; gap: 9px; color: #7a7e65; font-size: 9px; }
.step-circle { border-radius: 50%; width: 23px; height: 23px; display: inline-grid; place-items: center; background: var(--accent); color: var(--ink); letter-spacing: 0; }
h2 { font-size: 25px; line-height: 1.3; letter-spacing: -.8px; font-weight: 600; }
.selection-card h2 { margin: 10px 0 20px; }
.person-form { display: flex; align-items: flex-start; gap: 12px; }
.person-form .autocomplete { flex: 1; min-width: 0; }
.field-label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 7px; color: #5f6255; }
.person-form > .button { margin-top: 24px; white-space: nowrap; }
.input-wrap { position: relative; }
.search-input { width: 100%; height: 51px; padding: 0 42px 0 15px; border: 1px solid #d9dccd; border-radius: 7px; background: var(--white); color: var(--ink); font-size: 13px; }
.search-input::placeholder { color: #919487; }
.search-input:focus { border-color: #8f974d; outline: 2px solid #e8ee8955; }
.search-icon { position: absolute; right: 15px; top: 6px; font-size: 27px; color: #737867; pointer-events: none; }
.field-status { font-size: 10px; color: #858879; margin-top: 7px; min-height: 17px; }
.button { min-height: 51px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 12px 23px; border: 1px solid transparent; border-radius: 7px; text-decoration: none; font-size: 13px; font-weight: 600; }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover { background: #414633; }
.button-dark span { color: var(--accent); font-size: 18px; }
.button-outline { background: transparent; border-color: #bdc1ae; color: var(--ink); -webkit-text-fill-color: currentColor; }
.button-outline:hover { background: #e9ecdc; }
.suggested-people { border-top: 1px solid #eaeadd; margin-top: 19px; padding-top: 17px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.muted-label { color: #8a8d7c; font-size: 8px; letter-spacing: 1.1px; }
.suggested-people > .muted-label { margin-right: 4px; }
.chip-form { display: inline; }
.person-chip { background: #f4f5ed; border: 1px solid #e2e5d7; border-radius: 30px; padding: 5px 11px; color: #62674e; font-size: 10px; }
.person-chip:hover { background: var(--accent); }
.rules { max-width: 780px; margin: 35px auto 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rule-number { font: 11px monospace; color: #8a9064; }
.rules h3 { font-size: 13px; margin: 6px 0; font-weight: 600; }
.rules p { font-size: 11px; line-height: 1.8; color: #888a7d; }
.site-footer { max-width: 1216px; margin: 0 auto; padding: 22px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 15px; font-size: 10px; color: #929486; }
.suggestions { position: absolute; z-index: 20; top: calc(100% + 5px); left: 0; right: 0; max-height: 300px; overflow-y: auto; background: var(--white); border: 1px solid #d7dcc9; border-radius: 7px; box-shadow: 0 10px 28px #24281b20; }
.suggestion { padding: 11px 14px; cursor: pointer; border-bottom: 1px solid #eeefe6; }
.suggestion:last-child { border-bottom: 0; }
.suggestion:hover, .suggestion[aria-selected="true"] { background: #edf0d6; }
.suggestion strong { display: block; font-size: 13px; font-weight: 600; }
.suggestion span { display: block; margin-top: 3px; font-size: 10px; color: #747963; }
.suggestion[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.game-topline { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; }
.text-link { font-size: 12px; color: #737961; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.person-heading { padding: 37px 0 30px; }
.person-heading { display: flex; align-items: center; gap: 26px; }
.person-heading-copy { min-width: 0; }
.media-image { position: relative; flex-shrink: 0; overflow: hidden; background: #e5e7d9; border: 1px solid #d8ddc7; border-radius: 8px; }
.media-image img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; }
.media-image.is-loaded img { opacity: 1; }
.media-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: #7c8469; font-size: 10px; }
.person-photo { width: 110px; height: 150px; }
.title-poster { width: 54px; height: 81px; }
.answer-info { flex: 1; min-width: 0; }
.tmdb-credit { font-size: 10px; color: #7b806b; padding: 0 30px 24px; max-width: 1276px; margin: auto; }
.tmdb-credit a { display: inline-block; margin-bottom: 8px; }
.tmdb-logo { width: 82px; height: auto; }
@media (max-width: 620px) {
  .person-heading { gap: 16px; }
  .person-photo { width: 76px; height: 108px; }
  .person-heading .person-heading-copy h1 { font-size: 30px; letter-spacing: -1px; overflow-wrap: anywhere; }
  .title-card { gap: 10px; padding: 16px; }
  .title-poster { width: 44px; height: 66px; }
  .tmdb-credit { padding: 0 20px 24px; }
}
.person-heading h1 { font-size: clamp(34px, 5vw, 58px); letter-spacing: -2px; margin: 12px 0 14px; }
.person-meta { color: #7d816f; font-size: 12px; }
.guess-section { padding: 26px 0 42px; border-top: 1px solid var(--line); }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.section-header .section-kicker { margin-bottom: 8px; }
.round-tag { background: #e9edcf; color: #697046; font-size: 8px; padding: 7px 10px; border-radius: 4px; white-space: nowrap; letter-spacing: 1px; }
.guess-help { font-size: 12px; color: #828674; margin-bottom: 22px; max-width: 620px; }
.lives-status { display: flex; align-items: center; gap: 12px; margin: 12px 0; font-size: 13px; font-weight: 600; }
.life-hearts { display: inline-flex; gap: 6px; }
.life-heart { color: #b52f43; font-size: 28px; line-height: 1; }
.life-used { color: #c4c5bf; }
.title-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.guess-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 20px; display: flex; align-items: flex-start; gap: 15px; }
.card-number { color: #989f70; font: 13px Georgia, serif; padding-top: 1px; }
.guess-card .autocomplete { flex: 1; min-width: 0; }
.guess-card .search-input { font-size: 12px; }
.submit-row { margin-top: 25px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.submit-row p, .reveal-row p { color: #7b806b; font-size: 12px; }
.alert { margin: 20px 0; padding: 13px 17px; border: 1px solid #dec4aa; border-radius: 7px; color: #7e482e; background: #fff6eb; font-size: 13px; }
.score-card { background: var(--accent); padding: 30px 34px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.score-card h2 { margin-top: 10px; }
.score-card p { margin-top: 8px; color: #697044; font-size: 13px; }
.score { font-size: 78px; font-weight: 650; letter-spacing: -5px; white-space: nowrap; line-height: 1; }
.score span { color: #8b934f; font-size: 28px; letter-spacing: -1px; margin-left: 8px; }
.score-card-lost { background: #f8d4d4; color: #781f28; }
.score-card-lost p, .score-card-lost .eyebrow, .score-card-lost .score span { color: #84323a; }
.score-card-won { background: #d0ebcf; color: #1f542d; }
.score-card-won p, .score-card-won .eyebrow, .score-card-won .score span { color: #31623c; }
.submitted-section { margin: 30px 0; }
.submitted-section h2, .answer-section h2 { font-size: 20px; }
.title-card { background: #fffefa80; padding: 19px 20px; border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 16px; }
.title-card h3 { font-size: 14px; font-weight: 600; line-height: 1.4; }
.title-card p, .answer-list p { color: #818771; font-size: 11px; margin-top: 4px; }
.correct-pick { background: #edf0d6; border-color: #bec98b; }
.pick-status { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; }
.correct-pick .pick-status { color: #506526; }
.incorrect-pick .pick-status { color: #936044; }
.reveal-row { padding: 21px 0; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid var(--line); }
.play-again { margin: 24px 0 45px; }
.loss-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 30px; }
.loss-actions form { margin: 0; }
.share-section { margin: 20px 0 30px; }
.results-image-section { margin: 20px 0 30px; }
.results-image-preview { display: block; width: 100%; max-width: 540px; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.results-image-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.share-status { font-size: 13px; margin-top: 10px; }
.share-text { display: block; width: 100%; min-height: 155px; padding: 12px; margin-top: 10px; font: inherit; box-sizing: border-box; }
.answer-section { border-top: 1px solid var(--line); padding-top: 24px; }
.answer-list { list-style: none; padding: 0; margin: 0; }
.answer-list li { padding: 17px 0; display: flex; justify-content: space-between; align-items: center; gap: 15px; border-bottom: 1px solid var(--line); }
.answer-list strong { font-size: 14px; font-weight: 600; }
.answer-list a { white-space: nowrap; }
@media (min-width: 1500px) { .intro { padding-top: 90px; } }
@media (max-width: 900px) { .site-header { padding: 22px 30px; } .header-note { display: none; } .site-footer { margin: 0 30px; } .title-grid { gap: 12px; } .guess-card { padding: 16px; gap: 10px; } }
@media (max-width: 620px) {
  .site-header { padding: 19px 20px; } .wordmark { font-size: 22px; } .edition { font-size: 8px; letter-spacing: 1px; }
  main { padding: 0 20px; } .intro { padding: 42px 0 26px; } .intro .eyebrow { font-size: 8px; letter-spacing: 1px; }
  h1 { letter-spacing: -1.8px; font-size: 39px; } .intro-copy { font-size: 14px; } .desktop-break { display: none; }
  .selection-card { padding: 24px 20px; } .person-form { display: block; } .person-form > .button { width: 100%; margin-top: 12px; }
  .suggested-people > .muted-label { width: 100%; margin-bottom: 3px; } .rules { gap: 16px; margin-top: 27px; } .rules h3 { font-size: 12px; } .rules p { font-size: 10px; } .rules br { display: none; }
  .site-footer { margin: 0 20px; flex-direction: column; gap: 5px; font-size: 9px; }
  .game-topline > .muted-label { display: none; } .person-heading { padding: 30px 0 25px; } .person-heading h1 { font-size: 39px; }
  .title-grid { grid-template-columns: 1fr; } .round-tag { display: none; } .guess-section h2 { font-size: 23px; }
  .submit-row, .reveal-row { align-items: stretch; flex-direction: column; gap: 13px; } .submit-row > .button { width: 100%; }
  .score-card { padding: 25px 20px; gap: 14px; } .score-card h2 { font-size: 21px; } .score-card p { font-size: 11px; } .score { font-size: 60px; } .score span { font-size: 22px; }
}