/* Ur's warm dark palette, at phone size. */
:root { --paper: #14120f; --ink: #ece5d6; --ink-3: #8a8272; --rule: #2c2822; --focus: #e8b75c; --red: #e06c5a; }
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; font: 19px/1.45 "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
main { max-width: 30rem; margin: 0 auto; padding: 14vh 20px 40px; }
.label { font: 600 12px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
h1 { font-weight: 400; font-size: 30px; line-height: 1.2; margin: .6em 0 .5em; }
p { color: #cfc7b6; }
b { font-weight: 600; color: var(--ink); }
button {
  width: 100%; margin-top: 1.4em; padding: 16px; border: 0; border-radius: 12px;
  background: var(--focus); color: #1d1a14; font: 600 18px system-ui, sans-serif;
}
button:disabled { opacity: .5; }
.msg { min-height: 1.5em; font: 16px system-ui, sans-serif; color: var(--ink-3); }
.msg.ok { color: var(--ink); }
.msg.bad { color: var(--red); }
a.link { color: var(--focus); text-decoration: none; font: 600 16px system-ui, sans-serif; }
input:not([type=file]):not([type=checkbox]) {
  width: 100%; margin-top: 1em; padding: 14px; border-radius: 12px; border: 1px solid var(--rule);
  background: #1c1915; color: var(--ink); font: 18px system-ui, sans-serif;
}
.button { display: block; text-align: center; width: 100%; margin-top: 1.4em; padding: 16px; border-radius: 12px; background: var(--focus); color: #1d1a14; font: 600 18px system-ui, sans-serif; }
button.quiet { background: none; border: 1px solid var(--rule); color: var(--ink-3); font-weight: 500; }
form { display: grid; }
.who { display: flex; gap: 18px; align-items: center; margin-top: 1em; }
.who h1 { margin: 0; }
.sub { margin: .2em 0 0; color: var(--ink-3); font: 15px system-ui, sans-serif; }
.av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; }
.av.big { width: 88px; height: 88px; font-size: 40px; flex: none; }
.av.mono { color: var(--ink); background: #4a3f30; }
.space { margin-top: 2em; }
.scores li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--rule); }
.scores { list-style: none; padding: 0; margin: .6em 0 0; }

/* Recipes: a list to choose from, and a page to cook (or print) from. */
.recipes { list-style: none; padding: 0; margin: .6em 0 0; }
.recipes a { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.recipes small { display: block; color: var(--ink-3); font: 14px system-ui, sans-serif; }
.thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.thumb.none { background: #1c1915; border: 1px solid var(--rule); }
.hero { width: 100%; max-height: 50vh; object-fit: cover; border-radius: 14px; margin-top: 1em; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.actions > :first-child { grid-column: 1 / -1; }
.actions .button, .actions button { margin-top: .8em; }
a.button.quiet, label.button.quiet { background: none; border: 1px solid var(--rule); color: var(--ink-3); font-weight: 500; text-decoration: none; }
.ingredients, .steps { margin: .6em 0 0; padding-left: 1.3em; }
.ingredients li, .steps li { padding: 4px 0; }
.steps li { padding: 8px 0; }
.group { margin: 1.2em 0 0; font: 600 15px system-ui, sans-serif; color: var(--ink); }
@media print {
  html, body { background: #fff; color: #000; }
  main { padding: 0; max-width: none; }
  p, b, .sub, .label, .group { color: #000; }
  .noprint, .label:first-child { display: none; }
  .hero { max-height: 30vh; }
}

/* What you eat: diets as chips to tick, the rest typed. */
.diets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1em; }
.chip { padding: 8px 12px; border: 1px solid var(--rule); border-radius: 999px; font: 15px system-ui, sans-serif; color: var(--ink-3); }
.chip:has(input:checked) { border-color: var(--focus); color: var(--ink); }
.chip input { accent-color: var(--focus); margin: 0 4px 0 0; }
.fit { font: 15px system-ui, sans-serif; margin: .6em 0 0; }
.fit.yes { color: var(--ink-3); }
.fit.check { color: var(--focus); }
.fit.no { color: var(--red); }

/* Duels: two big cards to tap. */
.duel { display: grid; gap: 4px; margin-top: 1em; }
button.pick { display: grid; gap: 4px; text-align: left; margin: 0; padding: 0 0 14px; background: #1c1915; border: 1px solid var(--rule); color: var(--ink); overflow: hidden; }
button.pick > :not(img) { padding: 0 16px; }
button.pick > b:first-child { padding-top: 16px; }
button.pick img { width: 100%; height: 26vh; object-fit: cover; }
button.pick b { font: 400 24px/1.25 "Iowan Old Style", Georgia, serif; }
button.pick small { color: var(--ink-3); font: 14px system-ui, sans-serif; }
button.pick.chosen { border-color: var(--focus); }
.or { text-align: center; margin: 0; color: var(--ink-3); font: italic 16px Georgia, serif; }
.duel-more { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duel-more button { margin-top: 1em; }
.ranking { padding-left: 1.4em; margin: .6em 0 0; }
.ranking li { padding: 6px 0; border-top: 1px solid var(--rule); }
.ranking li span { display: inline-block; width: calc(100% - 3em); }
.ranking b { float: right; }

/* The party's one code: the names on the list, one tap each. */
.claim { list-style: none; padding: 0; margin: .6em 0 0; display: grid; gap: 8px; }
.claim .button { margin: 0; text-align: left; }
.claim small { color: var(--ink-3); font-weight: 400; }