:root {
  color-scheme: light;
  --ink: #29251f;
  --muted: #827c73;
  --paper: #fbf7f0;
  --white: #fffdf9;
  --orange: #df704c;
  --orange-dark: #bd573a;
  --peach: #f7e4d8;
  --green: #516c51;
  --line: #e9e2d8;
  --shadow: 0 18px 50px rgb(57 45 31 / 7%);
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--paper); }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.app-shell { min-height: 100vh; }
.topbar { height: 76px; padding: 0 7.4%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee8df; background: rgb(255 253 249 / 72%); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 15px; letter-spacing: -.5px; white-space: nowrap; }
.brand strong { font-weight: 700; }
.brand-icon { color: var(--orange); font-size: 25px; line-height: 1; }
.main-nav { align-self: stretch; display: flex; align-items: stretch; gap: 33px; }
.nav-button { position: relative; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; }
.nav-button.active { color: var(--ink); }
.nav-button.active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--orange); content: ""; }
.topbar-note { color: #9c9389; font-size: 11px; }
.page { width: min(100% - 48px, 1000px); margin: 0 auto; padding: 53px 0 82px; }
.hero { position: relative; padding: 34px 51px 41px; overflow: hidden; border: 1px solid #f0ddd0; border-radius: 14px; background: #f8eae0; }
.eyebrow, .step-label { display: flex; align-items: center; gap: 9px; color: #9a634d; font-size: 10px; font-weight: 700; letter-spacing: 1.35px; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
h1, h2, p { margin-top: 0; }
h1 { margin: 17px 0 10px; font-family: Fraunces, Georgia, serif; font-size: clamp(40px, 6vw, 58px); font-weight: 600; letter-spacing: -2.1px; line-height: 1.03; }
h1 span { color: var(--orange); }
.hero-copy { margin: 0; color: #766d63; font-size: 14px; line-height: 1.7; }
.hero-scribble { position: absolute; top: 40px; right: 72px; color: #df987a; font-size: 78px; transform: rotate(-15deg); }
.builder-heading { margin: 42px 1px 20px; display: flex; align-items: end; justify-content: space-between; }
.builder-heading h2, .card h2 { margin: 0 0 6px; font-family: Fraunces, Georgia, serif; font-size: 24px; letter-spacing: -.5px; }
.builder-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.participant-count { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.duration-picker { margin: 0 0 18px; padding: 15px; display: flex; flex-wrap: wrap; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.duration-picker legend { padding: 0 5px; color: #645d54; font-size: 12px; font-weight: 700; }
.duration-option { min-width: 145px; flex: 1; display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid #e7e0d7; border-radius: 8px; cursor: pointer; }
.duration-option:has(input:checked) { border-color: #dc977c; background: #fff8f3; box-shadow: 0 0 0 2px rgb(223 112 76 / 9%); }
.duration-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--orange); }
.duration-option span { display: flex; flex-direction: column; gap: 3px; }
.duration-option strong { color: var(--ink); font-size: 12px; }
.duration-option small { color: var(--muted); font-size: 10px; }
.participant-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.participant-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); box-shadow: 0 4px 14px rgb(57 45 31 / 2%); }
.participant-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.participant-number { color: var(--orange-dark); font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; }
.remove-participant { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #9a9288; font-size: 22px; line-height: 1; }
.remove-participant:hover { background: #f7efea; color: var(--orange-dark); }
.field-label { display: block; color: #645d54; font-size: 11px; font-weight: 600; }
.person-name, #player-name { width: 100%; height: 41px; margin-top: 7px; padding: 0 12px; border: 1px solid #e7e0d7; border-radius: 7px; outline: none; background: #fff; color: var(--ink); font-size: 13px; }
.person-name:focus, #player-name:focus { border-color: #db8b6e; box-shadow: 0 0 0 3px rgb(223 112 76 / 11%); }
.photo-fields { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.upload-field { position: relative; display: block; min-width: 0; cursor: pointer; }
.upload-title { display: block; margin-bottom: 8px; color: #645d54; font-size: 11px; font-weight: 600; }
.upload-box { position: relative; height: 107px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #ddcbbb; border-radius: 7px; background: #faf6f0; }
.upload-preview { width: 100%; height: 100%; object-fit: cover; }
.upload-prompt { display: grid; justify-items: center; gap: 1px; color: #9b8d7e; font-size: 10px; }
.upload-prompt b { color: var(--orange); font-size: 23px; font-weight: 400; }
.upload-field input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.upload-hint { display: block; margin-top: 6px; color: #a29a90; font-size: 9px; }
.builder-actions { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; }
.button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 17px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 700; transition: transform .15s ease, background .15s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--orange); color: white; }
.button-primary:hover { background: var(--orange-dark); }
.button-secondary { border-color: #e7ded3; background: var(--white); color: #665e54; }
.button-secondary:hover { background: #f6f0e8; }
.button-secondary span { color: var(--orange); font-size: 17px; }
.button-primary span { font-size: 16px; }
.error-message { margin: 12px 0 0; color: #b13e32; font-size: 12px; }
.play-heading { margin-bottom: 25px; display: flex; align-items: end; justify-content: space-between; }
.play-heading h1 { margin: 13px 0 8px; font-size: 42px; }
.status-pill { margin-bottom: 9px; padding: 7px 11px; border: 1px solid #e9e2d8; border-radius: 30px; background: var(--white); color: #73695e; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.status-pill.live { border-color: #d0e0cd; background: #edf4eb; color: #4e704a; }
.empty-state { padding: 68px 20px; border: 1px dashed #e5dbcf; border-radius: 13px; background: rgb(255 253 249 / 60%); text-align: center; }
.empty-icon { color: #dc8a6c; font-size: 43px; }
.empty-state h2 { margin: 13px 0 8px; font-family: Fraunces, Georgia, serif; font-size: 27px; }
.empty-state p { max-width: 380px; margin: 0 auto 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(275px, .78fr); gap: 18px; align-items: stretch; }
.card { border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.round-card { min-height: 575px; padding: 22px 28px 25px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.round-topline { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.round-label { color: #8d8276; font-size: 10px; font-weight: 700; letter-spacing: 1.3px; }
.timer { min-width: 81px; min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #eadfd3; border-radius: 7px; background: #fffaf4; color: #51483f; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.timer.urgent { border-color: #edb8a6; background: #fff0eb; color: #be4b35; }
.timer-dot { width: 7px; height: 7px; border-radius: 50%; background: #7b9671; }
.timer.urgent .timer-dot { background: #db6649; }
.round-photo-wrap { width: min(245px, 100%); height: 270px; margin: 22px auto 16px; overflow: hidden; border: 1px solid #eee6dc; border-radius: 10px; background: #f5efe7; }
.round-photo { width: 100%; height: 100%; object-fit: cover; }
.photo-placeholder { height: 100%; display: grid; place-items: center; color: #cfb6a3; font-family: Fraunces, Georgia, serif; font-size: 74px; }
.round-card h2 { margin: 2px 0 6px; font-family: Fraunces, Georgia, serif; font-size: 25px; }
.round-card > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.start-button { margin-top: 19px; }
.round-progress { width: 100%; margin-top: 22px; display: flex; gap: 7px; justify-content: center; }
.round-progress span { width: 23px; height: 5px; border-radius: 8px; background: #e9e2d8; }
.round-progress span.done { background: var(--green); }
.round-progress span.current { background: var(--orange); }
.lobby-screen, .scores-screen { width: min(100%, 610px); margin: 0 auto; padding: 30px; }
.lobby-screen { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lobby-screen > h2, .scores-screen > h2 { margin: 11px 0 5px; font-family: Fraunces, Georgia, serif; font-size: 28px; }
.screen-copy { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.lobby-screen .qr-wrap { width: 206px; height: 206px; margin: 19px auto 7px; }
.lobby-screen .join-link { margin-top: 5px; }
.lobby-players { width: min(100%, 350px); margin-top: 23px; padding-top: 18px; border-top: 1px solid #f0ebe5; text-align: left; }
.lobby-players .card-title-row { align-items: center; }
.lobby-players .card-title-row h2, .score-heading h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 20px; }
.lobby-players .score-list { margin-top: 6px; }
.joined-label { color: var(--green); font-size: 10px; font-weight: 600; }
.lobby-screen .start-button { margin-top: 20px; }
.round-card { width: min(100%, 670px); min-height: 0; margin: 0 auto; padding: 23px 30px 28px; }
.round-card .round-photo-wrap { width: min(390px, 100%); height: clamp(300px, 48vw, 430px); margin: 17px auto 18px; }
.round-card > h2 { margin: 0 0 6px; font-family: Fraunces, Georgia, serif; font-size: 27px; }
.round-card > p { color: var(--muted); font-size: 12px; }
.round-card .round-progress { margin-top: 15px; }
.scores-screen { padding: 27px 30px 24px; }
.scores-screen > .eyebrow { justify-content: flex-start; }
.answer-reveal { margin: 19px 0 21px; padding: 15px; display: flex; align-items: center; flex-direction: column; gap: 13px; border-radius: 9px; background: #f8f2eb; }
.photo-match { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; }
.photo-match figure { width: 172px; margin: 0; text-align: center; }
.photo-match img { width: 172px; height: 172px; display: block; border: 1px solid #e7ded3; border-radius: 8px; object-fit: cover; background: #fff; }
.photo-match figcaption { margin-top: 5px; color: #8c8175; font-size: 10px; font-weight: 600; }
.match-arrow { color: var(--orange); font-size: 27px; }
.answer-copy { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.answer-reveal strong { font-family: Fraunces, Georgia, serif; font-size: 22px; }
.answer-reveal small { color: var(--muted); font-size: 11px; }
.score-heading { padding-bottom: 9px; border-bottom: 1px solid #f0ebe5; }
.scores-screen .score-list { margin: 0; }
.scores-screen .score-row { padding: 11px 0; }
.scores-screen .score-note { margin: 10px -30px 0; }
.scores-screen .start-button { margin-top: 18px; }
.round-card .round-photo-wrap { flex-shrink: 0; }
.side-column { display: flex; flex-direction: column; gap: 16px; }
.join-card, .score-card { padding: 18px 19px; }
.card-title-row { display: flex; align-items: flex-start; justify-content: space-between; }
.step-label { margin-bottom: 6px; color: #a18b78; font-size: 9px; letter-spacing: 1.2px; }
.card h2 { font-size: 21px; }
.join-sparkle { color: #df9474; font-size: 24px; }
.qr-wrap { width: 164px; height: 164px; margin: 15px auto 11px; padding: 6px; border: 1px solid #efe8de; border-radius: 7px; background: #fff; }
.qr-wrap img { width: 100%; height: 100%; }
.join-instructions { margin: 0; color: #7c746a; font-size: 11px; line-height: 1.55; text-align: center; }
.join-link { display: block; margin-top: 8px; overflow-wrap: anywhere; color: var(--orange-dark); font-size: 10px; text-align: center; text-decoration: none; }
.player-count { min-width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #f7e9dd; color: var(--orange-dark); font-size: 11px; font-weight: 700; }
.score-list { margin-top: 13px; }
.score-empty { margin: 0; padding: 12px 0; color: #978f85; font-size: 11px; }
.score-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #f0ebe5; font-size: 12px; }
.score-row:last-child { border-bottom: 0; }
.score-name { display: flex; align-items: center; gap: 8px; }
.score-avatar { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #f6e7dc; color: #9b644f; font-size: 10px; font-weight: 700; }
.score-points { color: var(--green); font-size: 11px; font-weight: 700; }
.score-note { margin: 11px -19px -18px; padding: 10px; border-top: 1px solid #f0ebe5; color: #968b7f; font-size: 10px; text-align: center; }
.results-card { margin-top: 18px; padding: 22px 25px; }
.results-card h2 { margin-bottom: 7px; font-family: Fraunces, Georgia, serif; font-size: 25px; }
.results-card > p { color: var(--muted); font-size: 12px; }
.result-winner { margin: 14px 0; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-radius: 8px; background: #f7eee4; }
.result-winner strong { font-size: 14px; }
.result-winner span { color: var(--green); font-size: 13px; font-weight: 700; }
.round-results { padding: 11px 0; display: flex; gap: 12px; align-items: center; border-top: 1px solid #f0ebe5; }
.round-results div { font-size: 12px; font-weight: 600; }
.round-results small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 400; }

.phone-page { width: min(100% - 32px, 430px); min-height: 100vh; margin: 0 auto; padding: 26px 0 35px; display: flex; flex-direction: column; align-items: center; }
.phone-brand { align-self: flex-start; margin: 0 0 23px 4px; }
.phone-card { position: relative; width: 100%; padding: 28px 25px; overflow: hidden; border: 1px solid #eee4d8; border-radius: 15px; background: var(--white); box-shadow: var(--shadow); }
.phone-illustration { position: absolute; top: 17px; right: 20px; color: #edc4ae; font-size: 46px; }
.phone-card h1 { margin: 17px 0 10px; font-size: 39px; letter-spacing: -1.6px; }
.phone-copy { margin: 0 0 24px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.phone-card form { margin-top: 21px; }
.phone-card .field-label { font-size: 12px; }
#player-name { height: 47px; margin-bottom: 14px; font-size: 15px; }
.full-button { width: 100%; min-height: 47px; font-size: 13px; }
.phone-footer { margin: auto 0 0; padding-top: 26px; color: #a59c91; font-size: 10px; letter-spacing: .35px; }
.waiting-icon { width: 47px; height: 47px; margin-bottom: 17px; display: grid; place-items: center; border-radius: 50%; background: #f8eee5; color: var(--orange); font-size: 24px; }
.waiting-dots { margin-top: 21px; display: flex; gap: 7px; }
.waiting-dots i { width: 7px; height: 7px; border-radius: 50%; background: #e5a387; animation: bounce 1s infinite ease-in-out; }
.waiting-dots i:nth-child(2) { animation-delay: .13s; }
.waiting-dots i:nth-child(3) { animation-delay: .26s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-5px); opacity: 1; } }
.phone-playing { padding-top: 20px; }
.phone-round-bar { margin-bottom: 23px; display: flex; align-items: center; justify-content: space-between; color: #8d8276; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.phone-playing h1 { margin: 13px 0 8px; font-size: 37px; }
.phone-playing .phone-copy { margin-bottom: 17px; }
.adult-options { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.adult-option { padding: 7px; border: 1px solid #eee6dc; border-radius: 9px; background: #fff; color: var(--ink); text-align: left; transition: border .15s ease, transform .15s ease; }
.adult-option:hover:not(:disabled) { transform: translateY(-2px); border-color: #dc977c; }
.adult-option:disabled { cursor: default; opacity: .68; }
.adult-option.selected { border: 2px solid var(--orange); padding: 6px; }
.adult-option img { width: 100%; aspect-ratio: 1 / 1; display: block; border-radius: 6px; object-fit: cover; background: #f4ede4; }
.adult-option span { display: block; padding: 7px 3px 3px; overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.answer-feedback { margin-top: 16px; padding: 13px; border-radius: 8px; background: #eff5ec; color: #496747; font-size: 12px; font-weight: 600; line-height: 1.5; text-align: center; }
.answer-feedback.wrong { background: #fbefea; color: #a9503d; }
.phone-final-score { padding: 12px; border-radius: 8px; background: #f6eee5; color: var(--green); font-size: 18px; font-weight: 700; text-align: center; }
.phone-no-game { margin: auto; color: var(--muted); font-size: 14px; line-height: 1.6; text-align: center; }

@media (max-width: 700px) {
  .topbar { height: 64px; padding: 0 20px; }
  .topbar-note { display: none; }
  .main-nav { gap: 19px; }
  .nav-button { font-size: 11px; }
  .page { width: min(100% - 32px, 520px); padding-top: 25px; }
  .hero { padding: 28px 24px 31px; }
  .hero-scribble { top: 30px; right: 22px; font-size: 49px; }
  h1 { font-size: 44px; }
  .hero-copy { max-width: 330px; font-size: 12px; }
  .builder-heading { margin-top: 30px; }
  .participant-list { grid-template-columns: 1fr; }
  .play-heading { align-items: flex-start; gap: 8px; }
  .play-heading h1 { max-width: 300px; font-size: 36px; }
  .play-heading .hero-copy { max-width: 270px; }
  .status-pill { margin-top: 6px; white-space: nowrap; }
  .game-layout { grid-template-columns: 1fr; }
  .round-card { min-height: 0; }
  .round-card .round-photo-wrap { width: min(350px, 100%); height: min(350px, 90vw); }
  .side-column { display: grid; grid-template-columns: 1fr; }
  .join-card { display: grid; grid-template-columns: 1fr 130px; align-items: center; }
  .join-card .card-title-row { grid-column: 1 / -1; }
  .qr-wrap { width: 120px; height: 120px; margin: 10px 0 0; }
  .join-instructions { grid-column: 1; grid-row: 2; text-align: left; }
  .join-link { grid-column: 1 / -1; }
  .lobby-screen, .scores-screen { padding-right: 19px; padding-left: 19px; }
  .scores-screen .score-note { margin-right: -19px; margin-left: -19px; }
  .photo-match figure, .photo-match img { width: min(144px, calc((100vw - 96px) / 2)); }
  .photo-match img { height: min(144px, calc((100vw - 96px) / 2)); }
  .photo-match { gap: 10px; }
  .match-arrow { font-size: 22px; }
}

@media (max-width: 400px) {
  .topbar { padding: 0 12px; }
  .brand { gap: 5px; font-size: 13px; }
  .brand-icon { font-size: 22px; }
  .main-nav { gap: 12px; }
  .page { width: calc(100% - 24px); }
  .hero { padding-right: 16px; padding-left: 19px; }
  .hero-scribble { right: 14px; }
  .play-heading h1 { font-size: 32px; }
  .play-heading .hero-copy { font-size: 11px; }
  .round-card { padding-right: 18px; padding-left: 18px; }
}