/* SWFL Scavenger Hunts app. Same parchment, ink, teal, red and forest palette as the website (../styles.css),
   sized for one hand on a phone. */
:root {
  --parch: #ead7a8;
  --parch-light: #f6edd3;
  --ink: #3b240f;
  --ink2: #5a3a1a;
  --teal: #1f6f6b;
  --teal-ink: #165450;
  --red: #b3261e;
  --forest: #2f4a35;
  --forest-dark: #233a29;
  --cream: #f1e3bd;
  --foil: #d9b65e;
  --good: #1d5e2c;
  --display: "Pirata One", Georgia, serif;
  --body: "Lora", Georgia, serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--parch); color: var(--ink);
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.55;
  padding-bottom: env(safe-area-inset-bottom);
}
[hidden] { display: none !important; }
a { color: var(--teal-ink); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2 { margin: 0; font-weight: 400; line-height: 1.1; text-wrap: balance; }
h1 { font-family: var(--display); font-size: 2.3rem; }
h2 { font-family: var(--body); font-weight: 600; font-size: 1.25rem; line-height: 1.35; }
p { margin: 0 0 .75rem; }
.muted { color: var(--ink2); }
.fine { font-size: .9rem; color: var(--ink2); margin-top: 1.25rem; }
.eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); margin: 0 0 .25rem; display: flex; justify-content: space-between; gap: .5rem; }

/* top bar */
.bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: env(safe-area-inset-top) 1rem 0; background: var(--forest-dark); color: var(--cream);
}
.brand { font-family: var(--display); font-size: 1.6rem; color: var(--cream); text-decoration: none; line-height: 1; }
.brand .swfl { color: var(--foil); }
.clock { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.15rem; background: rgba(0, 0, 0, .25); border-radius: 999px; padding: .2rem .8rem; }
.clock.low { background: var(--red); color: #fff; }

main { max-width: 34rem; margin: 0 auto; padding: 1.25rem 1rem 2.5rem; }
.screen > h1 { margin-bottom: 1rem; }
.crumb { margin: 0 0 .5rem; }

/* buttons and fields */
.btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: .5rem 1.25rem;
  background: var(--teal-ink); color: #fff; border: 2px solid var(--teal-ink); border-radius: 999px;
  font: 600 1.05rem/1.2 var(--body); text-align: center; text-decoration: none; cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink2); }
.btn.small { min-height: 44px; font-size: .95rem; }
.link { background: none; border: 0; padding: .5rem 0; font: inherit; color: var(--teal-ink); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 44px; }
.stack { display: grid; gap: .6rem; margin: 1rem 0 .25rem; }
label { font-weight: 600; }
input:not([type=radio]):not([type=file]):not([type=checkbox]) {
  width: 100%; min-height: 50px; padding: .6rem .9rem; font: 1.15rem var(--body); color: var(--ink);
  background: var(--parch-light); border: 2px solid var(--ink2); border-radius: 12px;
}
#join-code { text-transform: uppercase; letter-spacing: .08em; }
.msg { margin: 0; padding: .55rem .8rem; border-radius: 10px; font-weight: 600; }
.msg.bad { background: #f6d9d3; color: #7a1712; }
.msg.info { background: var(--parch-light); color: var(--ink2); }

/* hunt cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.card { background: var(--parch-light); border: 3px solid var(--ink2); border-radius: 18px; padding: 1.1rem 1.1rem 1.2rem; }
.card h2 { font-family: var(--display); font-weight: 400; font-size: 1.75rem; line-height: 1.1; margin-bottom: .35rem; }
.card .when { font-weight: 600; color: var(--teal-ink); margin-bottom: .35rem; }
.card.demo { border-style: dashed; background: transparent; }
.card.demo .eyebrow { color: var(--red); }

/* play */
.team-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.team-row h1 { font-size: 2rem; overflow-wrap: anywhere; }
.score { margin: 0; text-align: right; font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--teal-ink); }
.score small { display: block; font: 600 .75rem var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.sample-banner { margin: .75rem 0 0; font-size: .9rem; padding: .4rem .7rem; border: 2px dashed var(--red); border-radius: 10px; color: var(--ink2); }
html:not(.is-sample) .sample-only { display: none; }

.tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 1rem 0; background: var(--parch-light); border: 2px solid var(--ink2); border-radius: 999px; padding: 3px; }
.tabs button { min-height: 44px; border: 0; border-radius: 999px; background: none; font: 600 1rem var(--body); color: var(--ink); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--forest); color: var(--cream); }

.clue { background: var(--parch-light); border: 3px solid var(--ink2); border-radius: 18px; padding: 1.1rem; }
.clue h2 { margin: .25rem 0 .6rem; }
.clue .pts { color: var(--red); }
.clue .skip { display: block; margin: .5rem auto 0; }
.preview { width: 100%; max-height: 50vh; object-fit: contain; border-radius: 12px; border: 2px solid var(--ink2); background: #000; }

.board { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.board li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; background: var(--parch-light); border: 2px solid rgba(90, 58, 26, .4); border-radius: 12px; padding: .6rem .8rem; }
.board li.mine { border-color: var(--teal); border-width: 3px; }
.board .rank { font-family: var(--display); font-size: 1.5rem; color: var(--ink2); }
.board li:first-child .rank { color: var(--red); }
.board .name { font-weight: 600; overflow-wrap: anywhere; }
.board .name small { font-weight: 400; color: var(--ink2); }
.board .pts { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.15rem; }

.tools { margin-top: 2rem; border: 2px dashed var(--ink2); border-radius: 14px; padding: .25rem .9rem; }
.tools summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.tools fieldset { border: 0; margin: 0 0 .75rem; padding: 0; display: grid; gap: .35rem; }
.tools legend { font-weight: 600; margin-bottom: .25rem; }
.tools fieldset label { font-weight: 400; display: flex; align-items: center; gap: .5rem; min-height: 40px; }
.tools input[type=radio] { width: 1.2rem; height: 1.2rem; accent-color: var(--teal-ink); }
.tool-buttons { display: grid; gap: .5rem; margin-bottom: .9rem; }

.toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10;
  width: max-content; max-width: calc(100vw - 2rem); background: var(--good); color: #fff; font-weight: 600; text-align: center; padding: .7rem 1.1rem; border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: pop .25s ease-out; }
  @keyframes pop { from { opacity: 0; transform: translate(-50%, 10px); } }
}

/* run note on the player side (host started / ended the hunt) */
.run-note { margin: .6rem 0 0; font-weight: 600; color: var(--teal-ink); }

/* ---------- host screens (#/host) ---------- */
.host h1 { margin: .5rem 0 .75rem; }
.host h1:focus { outline: none; }
.host-banner { margin: 0 0 .75rem; }
.host-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; background: var(--parch-light); border: 2px solid var(--ink2); border-radius: 22px; padding: 3px; margin: 0 0 .5rem; }
@media (min-width: 560px) { .host-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: 999px; } }
.host-nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 2px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
.host-nav a[aria-current="page"] { background: var(--forest); color: var(--cream); }
/* Other apps (host screens only): William's other apps, each in a new tab with its own sign-in. */
.other-apps { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--ink2); }
.other-apps h2 { font-size: 1rem; margin: 0 0 .25rem; }
.other-apps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.other-apps a { display: flex; align-items: center; min-height: 44px; color: var(--teal-ink); font-weight: 600; overflow-wrap: anywhere; }
@media print { .other-apps { display: none !important; } }
.host-section { margin-top: 1.75rem; }
.host-section > h2 { margin-bottom: .6rem; }
.small { font-size: .9rem; }
.pill { display: inline-block; font-size: .85rem; font-weight: 600; padding: .2rem .7rem; border: 2px dashed var(--red); border-radius: 999px; color: var(--ink2); }
.note-box { margin-top: 1.75rem; padding: .9rem 1rem; border-left: 5px solid var(--red); background: var(--parch-light); border-radius: 0 12px 12px 0; }
.note-box h2 { font-size: 1.05rem; margin-bottom: .35rem; }
.note-box p { margin: 0; font-size: .95rem; }
.status-card .status { margin: .4rem 0 .6rem; }
.big-clock { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--teal-ink); margin: 0 0 .9rem; font-variant-numeric: tabular-nums; }
.btn.danger { background: var(--red); border-color: var(--red); }
.btn.danger-text { color: #7a1712; border-color: #7a1712; }
.confirm { border: 3px solid var(--red); border-radius: 14px; padding: .8rem; background: #f6d9d3; }
.confirm .tool-buttons { margin: .5rem 0 0; }
.msg.good { background: #d8ead9; color: var(--good); }
.msg ul { margin: .25rem 0 .4rem; padding-left: 1.2rem; font-weight: 400; }
.msg p { margin: 0; }

.field { display: grid; gap: .3rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.field .hint { margin: 0; font-size: .88rem; color: var(--ink2); }
.field-error { margin: 0; font-weight: 600; color: #7a1712; font-size: .92rem; }
[aria-invalid="true"] { border-color: #b3261e !important; box-shadow: 0 0 0 2px #f6d9d3; }
textarea {
  width: 100%; padding: .6rem .9rem; font: 1.05rem/1.4 var(--body); color: var(--ink);
  background: var(--parch-light); border: 2px solid var(--ink2); border-radius: 12px; resize: vertical;
}
.types legend { font-weight: 600; margin-bottom: .2rem; padding: 0; }
.radio { display: flex; align-items: center; gap: .55rem; min-height: 44px; font-weight: 400; }
.radio input { width: 1.2rem; height: 1.2rem; accent-color: var(--teal-ink); }

.cp-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.cp { background: var(--parch-light); border: 2px solid rgba(90, 58, 26, .45); border-radius: 14px; padding: .8rem .9rem; }
.cp .pts, .photo-card .pts { color: var(--red); }
.cp-prompt { font-weight: 600; margin-bottom: .3rem; overflow-wrap: anywhere; }
.cp-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.cp-actions .btn { padding: .3rem .4rem; font-size: .9rem; }
.tool-buttons.two { grid-template-columns: 1fr 1fr; }

.map-box { margin: .25rem 0 .5rem; }
.hunt-map { display: block; width: 100%; height: auto; touch-action: manipulation; cursor: crosshair; margin: .5rem 0; }
.map-bg { fill: #f3e6c2; stroke: var(--ink2); stroke-width: 2; }
.map-scale line { stroke: var(--ink); stroke-width: 3; }
.map-scale text, .map-north text { font: 600 11px var(--body); fill: var(--ink); }
.map-north path { fill: var(--ink); }
.map-start rect { fill: var(--forest); }
.map-start text { font: 600 12px var(--body); fill: var(--cream); }
.map-cp circle { fill: var(--parch-light); stroke: var(--ink); stroke-width: 2; }
.map-cp circle.map-radius { fill: rgba(31, 111, 107, .12); stroke: rgba(31, 111, 107, .55); stroke-width: 1.5; stroke-dasharray: 4 3; }
.map-cp text { font: 600 12px var(--body); fill: var(--ink); }
.map-team circle { stroke: #fff; stroke-width: 2.5; }
.map-team circle.true-spot { stroke: none; }
.map-team text { font: 700 13px var(--body); fill: #fff; }
.map-pin path { fill: var(--red); stroke: #7a1712; stroke-width: 1.5; }
.map-pin .pin-dot { fill: #fff; }

.photo-queue { margin-top: .5rem; }
.photo-card figure { margin: 0 0 .7rem; }
.photo-card img { display: block; width: 100%; height: auto; border-radius: 12px; border: 2px solid var(--ink2); background: #fff; }
.photo-card figcaption { margin-top: .3rem; }
.reviewed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.reviewed { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: 12px; background: var(--parch-light); border-left: 5px solid var(--good); font-size: .95rem; }
.reviewed.rejected { border-left-color: var(--red); }
.reviewed > span { overflow-wrap: anywhere; min-width: 0; }
.board.compact li { padding: .4rem .7rem; }

.team-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.team-list li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; background: var(--parch-light); border-radius: 12px; padding: .55rem .75rem; }
.team-list .swatch { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; font-weight: 700; }
.team-list a { font-size: .92rem; font-weight: 600; text-align: right; }

/* Supabase mode: live host banner and the team/join-code list */
.live-banner { font-size: .9rem; padding: .4rem .7rem; border: 2px solid var(--ink2); border-radius: 10px; color: var(--ink2); }
.live-banner .link { font-size: inherit; }
.team-list.codes li { grid-template-columns: minmax(0, 1fr) auto; }
.team-list .code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; }

/* The clue list: every clue, any order */
.clue-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.clue-row {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; width: 100%;
  min-height: 56px; padding: .6rem .7rem; text-align: left; font: inherit; color: var(--ink);
  background: #fffaf0; border: 2px solid rgba(90, 58, 26, .45); border-radius: 12px;
}
button.clue-row { cursor: pointer; }
button.clue-row:active { transform: translateY(1px); }
.clue-row.done { background: #e4efdf; border-color: rgba(29, 94, 44, .45); }
.clue-row.wait { border-style: dashed; }
.clue-row.bad { border-color: var(--red); }
.clue-row.locked { opacity: .6; }
.cl-num { font-family: var(--display); font-size: 1.4rem; line-height: 1; color: var(--ink2); text-align: center; }
.cl-body { display: grid; gap: .1rem; min-width: 0; }
.cl-prompt { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-meta { font-size: .85rem; color: var(--ink2); }
.chip { justify-self: end; font-size: .8rem; font-weight: 600; white-space: nowrap; padding: .2rem .55rem; border-radius: 999px; border: 1.5px solid currentColor; }
.chip.open { color: var(--teal-ink); }
.chip.done { color: var(--good); }
.chip.wait { color: var(--ink2); }
.chip.bad { color: var(--red); }
.chip.big { display: inline-block; font-size: 1rem; margin: 0 0 .75rem; }

/* ---------- Shuffle Crawl (#/crawl, sample) ---------- */
.tabs.three { grid-template-columns: repeat(3, 1fr); }
.crawl-table, .challenge { background: var(--parch-light); border: 3px solid var(--ink2); border-radius: 18px; padding: 1.1rem; margin-bottom: 1rem; }
.challenge h2 { margin: .1rem 0 .5rem; }
.how { margin: .25rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.small { font-size: .9rem; }
.suit-row { display: flex; align-items: center; gap: .9rem; margin: .25rem 0 .5rem; }
.suit-row h2 { font-family: var(--display); font-weight: 400; font-size: 1.9rem; margin: 0; }
.suit-row p { margin: 0; }
.suit { font-size: 3.6rem; line-height: 1; color: var(--ink); }
.suit.red { color: var(--red); }
.mates { list-style: none; margin: .4rem 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.mates li { padding: .25rem .7rem; border-radius: 999px; border: 2px solid rgba(90, 58, 26, .4); background: #fffaf0; font-weight: 600; }
.mates li.new { border-color: var(--teal); }
.mates li small { color: var(--teal-ink); }
.bingo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin: .75rem 0; }
.bingo button {
  min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: .25rem; padding: .35rem;
  font: .72rem/1.2 var(--body); text-align: left; color: var(--ink); background: #fffaf0;
  border: 2px solid rgba(90, 58, 26, .45); border-radius: 10px; cursor: pointer; overflow-wrap: anywhere;
}
.bingo button.filled { background: #e4efdf; border-color: rgba(29, 94, 44, .5); }
.bingo button.editing { outline: 3px solid var(--teal); outline-offset: 1px; }
.bingo .who { font-weight: 700; font-size: .85rem; color: var(--good); }
.bingo .add { color: var(--teal-ink); font-weight: 600; }
.bingo-edit { border-top: 2px dashed var(--ink2); padding-top: .75rem; }
.choices { border: 0; margin: 0 0 1rem; padding: 0; display: grid; gap: .3rem; min-width: 0; }
.choices legend { font-weight: 600; margin-bottom: .35rem; }
.choices label { font-weight: 400; display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .25rem .6rem; border-radius: 10px; background: #fffaf0; border: 1.5px solid rgba(90, 58, 26, .3); }
.choices input[type=radio] { width: 1.15rem; height: 1.15rem; accent-color: var(--teal-ink); flex: none; }
.ttl-mine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; align-items: center; }
.ttl-mine label { min-height: 50px; }
.answer-row { margin: 0 0 .5rem; }
.right { color: var(--good); font-weight: 600; }
.wrong { color: var(--red); font-weight: 600; }
.timer { font: 400 3.2rem/1 var(--display); text-align: center; color: var(--teal-ink); margin: .75rem 0 0; font-variant-numeric: tabular-nums; }
.breakdown { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.breakdown td { padding: .4rem 0; border-bottom: 1px dotted rgba(90, 58, 26, .4); }
.breakdown td:last-child { text-align: right; font-weight: 600; }
.breakdown tr:last-child td { border-bottom: 0; font-size: 1.1rem; }
.board .people { font-weight: 400; color: var(--ink2); }

/* Photo retakes: rejected photo clues under the clue list */
.retakes { margin-top: 1.25rem; padding-top: .75rem; border-top: 2px dashed var(--ink2); }
.retakes h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.retake-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.retake { background: var(--parch-light); border-radius: 12px; padding: .75rem; }
.retake-none { margin: .25rem 0 0; font-weight: 600; color: var(--red); }
.submission { font-weight: 600; }
/* ---------- Leaderboard (#/host/board), freeze, and the player's frozen tab ---------- */
select {
  width: 100%; min-height: 48px; padding: .5rem .8rem; font: 1.05rem var(--body); color: var(--ink);
  background: var(--parch-light); border: 2px solid var(--ink2); border-radius: 12px;
}
.freeze-card, .auto-card { margin-bottom: .25rem; }
.freeze-card h2, .auto-card h2 { font-family: var(--body); font-weight: 600; font-size: 1.2rem; margin-bottom: .4rem; }
.freeze-card .btn, .auto-card .btn { margin-bottom: .5rem; }
.board.full li { grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: start; }
.board.full .rank { line-height: 1.2; }
.board .who { display: grid; gap: .1rem; min-width: 0; }
.board .facts { display: block; font-size: .85rem; font-weight: 400; color: var(--ink2); }
.board.full li.tied { border-style: dashed; }
.board .to-check { font-size: .88rem; font-weight: 600; justify-self: start; min-height: 32px; display: inline-flex; align-items: center; }
.board .pts small { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); text-align: right; }
.board.full .pts { font-size: 1.35rem; text-align: right; line-height: 1.1; }
.board li.frozen .rank { color: var(--ink2); }
.frozen-note { font-weight: 600; color: var(--teal-ink); }
.proof-status { font-weight: 600; }

/* ---------- Photo proofs (#/host/photos) ---------- */
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .6rem; margin: 0 0 .9rem; }
.filters .field:first-child { grid-column: 1 / -1; }
.filters label { font-size: .9rem; }
.photo-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.photo-card { padding: .75rem; display: grid; gap: .6rem; border-width: 2px; }
.photo-card.pending, .photo-card.auto { border-color: var(--teal-ink); }
.photo-card.rejected { border-color: rgba(179, 38, 30, .55); background: #f8ece6; }
.photo-card .pc-top { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .7rem; align-items: start; }
.photo-card figure { margin: 0; }
.photo-card figure a { display: block; }
.photo-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 2px solid var(--ink2); background: #fff; }
.photo-card .pc-info { min-width: 0; }
.photo-card .pc-info p { margin: 0 0 .3rem; }
.photo-card .cp-prompt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .95rem; }
.photo-card .pc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; }
.photo-card .chip { justify-self: auto; }
.chip.auto { color: var(--teal-ink); }
.photo-card .pc-note { color: #7a1712; font-weight: 600; overflow-wrap: anywhere; }
.photo-card .field label { font-size: .9rem; }
.photo-card input:not([type=radio]):not([type=file]) { min-height: 44px; font-size: 1rem; padding: .45rem .75rem; }
.pc-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .4rem; }
.pc-actions .btn { padding: .3rem .5rem; }
.pc-actions:empty { display: none; }

/* ---------- Big screen (#/host/tv): a TV or laptop at the finish ---------- */
html.tv body { background: var(--forest-dark); color: var(--cream); }
html.tv .bar { display: none; }
html.tv main { max-width: none; padding: clamp(1rem, 3vw, 3rem) clamp(1rem, 4vw, 4.5rem); }
html.tv .screen.host { min-height: calc(100vh - 2 * clamp(1rem, 3vw, 3rem)); display: flex; flex-direction: column; }
.tv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; border-bottom: 3px solid var(--foil); padding-bottom: clamp(.5rem, 1.5vw, 1.25rem); margin-bottom: clamp(.75rem, 2vw, 2rem); }
.tv-head h1 { font-size: clamp(2rem, 5vw, 5.5rem); color: var(--cream); margin: 0; }
.tv-eyebrow { font: 600 clamp(.85rem, 1.3vw, 1.4rem)/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--foil); margin: 0 0 .35rem; }
.tv-clock { font: 400 clamp(2rem, 5vw, 5.5rem)/1 var(--display); font-variant-numeric: tabular-nums; color: var(--cream); margin: 0; }
.tv-clock.low { color: #ffb4a8; }
.tv-board { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.4rem, 1vw, .9rem); flex: 1; align-content: start; }
.tv-board.two { grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 5), auto); grid-template-columns: 1fr 1fr; column-gap: clamp(1rem, 3vw, 3rem); }
.tv-board li { display: grid; grid-template-columns: 4.5ch minmax(0, 1fr) auto 5ch; align-items: center; gap: clamp(.5rem, 1.5vw, 1.5rem); padding: clamp(.35rem, .9vw, .9rem) clamp(.6rem, 1.5vw, 1.5rem); border-radius: 16px; background: rgba(241, 227, 189, .08); border: 2px solid rgba(241, 227, 189, .18); font-size: clamp(1.1rem, 2.4vw, 2.6rem); }
.tv-board .rank { font-family: var(--display); color: var(--foil); text-align: center; }
.tv-board .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-board .done { font-size: .6em; color: rgba(241, 227, 189, .75); white-space: nowrap; }
.tv-board .pts { font-family: var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.tv-board li.top1 { background: rgba(217, 182, 94, .22); border-color: var(--foil); }
.tv-board li.top2, .tv-board li.top3 { border-color: rgba(217, 182, 94, .5); }
.tv-board li.empty { display: block; text-align: center; color: rgba(241, 227, 189, .75); }
.tv-frozen { flex: 1; display: grid; place-content: center; text-align: center; gap: .5rem; padding: 2rem 1rem; }
.tv-frozen p { margin: 0; font-size: clamp(1.1rem, 2.2vw, 2.2rem); color: rgba(241, 227, 189, .85); }
.tv-frozen .tv-big { font: 400 clamp(2.2rem, 6vw, 6.5rem)/1.05 var(--display); color: var(--foil); }
.tv-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: clamp(.75rem, 2vw, 2rem); font-size: clamp(.85rem, 1.1vw, 1.15rem); color: rgba(241, 227, 189, .7); }
.tv-foot a { color: var(--cream); }
@media (max-width: 640px) { .tv-board.two { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; } }

/* ---------- EN / ES switch in the top bar (William, 11/2/2026) ---------- */
.bar-end { display: flex; align-items: center; gap: .6rem; }
.lang {
  min-height: 40px; padding: .2rem .8rem; border: 2px solid var(--foil); border-radius: 999px; background: transparent;
  color: var(--cream); font: 600 .95rem/1 var(--body); cursor: pointer;
}
.lang:hover { background: rgba(217, 182, 94, .18); }
html.tv .lang { display: none; }
.block { display: block; }

/* ---------- Sponsor stops (player side) ---------- */
.sponsor-stop { margin: .25rem 0 .9rem; padding: .75rem .85rem; border: 2px solid var(--foil); border-radius: 14px; background: #fff8e4; }
.sp-head { display: flex; align-items: center; gap: .7rem; }
.sp-head p { margin: 0; }
.sp-logo { width: 56px; height: 56px; flex: none; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid rgba(90, 58, 26, .25); }
.sp-logo.small { width: 36px; height: 36px; border-radius: 8px; }
.sp-logo.none { display: grid; place-items: center; font: 400 1.6rem var(--display); color: var(--ink2); }
.sp-name { font-weight: 600; font-size: 1.1rem; }
.sp-offer { margin: .55rem 0 .35rem; font-weight: 600; color: var(--forest); }
.cl-logo { width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; margin-right: .3rem; border-radius: 4px; background: #fff; }
.clue-row.sponsor { border-color: var(--foil); }
.sponsor-thanks { margin-top: 1.25rem; padding-top: .9rem; border-top: 1px dashed var(--ink2); }
.sponsor-thanks h3 { margin: 0 0 .5rem; font-size: 1rem; }
.sponsor-thanks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.sponsor-thanks li { display: flex; align-items: center; gap: .6rem; }

/* ---------- Sponsors (host side) ---------- */
.sponsor-list, .sponsor-report { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.sponsor-card h2 { font-family: var(--body); font-weight: 600; font-size: 1.15rem; margin: 0; }
.sponsor-card .sp-offer { margin: .2rem 0 0; }
.cp-actions.two { grid-template-columns: 1fr 1fr; }
.cp.sponsor { border-color: var(--foil); }
.cp-sponsor { display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; font-weight: 600; color: var(--forest); }
.cp-sponsor img { border-radius: 4px; background: #fff; }
.sp-teams { margin: .3rem 0 .5rem; padding-left: 1.1rem; }
.sp-photos { display: flex; flex-wrap: wrap; gap: .5rem; }
.sp-photos figure { margin: 0; width: 96px; }
.sp-photos img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 2px solid var(--ink2); background: #fff; display: block; }
.sp-photos figcaption { font-size: .8rem; color: var(--ink2); overflow-wrap: anywhere; }
.sponsor-box, .es-box { border: 2px dashed rgba(90, 58, 26, .45); border-radius: 14px; padding: .6rem .8rem .8rem; display: grid; gap: .6rem; min-width: 0; }
.sponsor-box legend { font-weight: 600; padding: 0 .3rem; }
.es-box summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.logo-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.logo-row .btn { width: auto; }
.field .label { font-weight: 600; }
.tv-sponsors { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: clamp(.75rem, 2vw, 1.5rem); color: rgba(241, 227, 189, .8); font-size: clamp(.85rem, 1.2vw, 1.3rem); }
.tv-sponsor { display: inline-flex; align-items: center; gap: .5rem; color: var(--cream); font-weight: 600; }
.tv-sponsor img { width: clamp(28px, 3vw, 48px); height: clamp(28px, 3vw, 48px); object-fit: contain; border-radius: 8px; background: #fff; }

/* ---------- Print: the paper packet and the sponsor report (#/host/print) ---------- */
.print-controls { margin: .75rem 0; border: 2px dashed rgba(90, 58, 26, .45); border-radius: 14px; padding: .6rem .8rem; }
.print-controls legend { font-weight: 600; padding: 0 .3rem; }
.print-controls input[type=checkbox] { width: 1.2rem; height: 1.2rem; accent-color: var(--teal-ink); flex: none; }
.print-controls input[type=number] { max-width: 8rem; }
.print-preview { margin-top: 1.25rem; }
.pp { color: #111; font-family: var(--body); }
.pp-section { background: #fff; border: 1px solid #bbb; border-radius: 8px; padding: 1rem; margin: 0 0 1rem; }
.pp h1 { font-family: var(--display); font-size: 2rem; margin: .2rem 0 .4rem; }
.pp h2 { font-size: 1.15rem; margin: .8rem 0 .4rem; }
.pp h3 { font-size: 1rem; margin: .7rem 0 .3rem; }
.pp-head { border-bottom: 2px solid #111; margin-bottom: .6rem; }
.pp-head h2 { margin: 0 0 .2rem; }
.pp-head p { margin: 0 0 .4rem; font-size: .9rem; }
.pp-kicker { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.pp-facts { font-weight: 600; }
.pp-rules { padding-left: 1.2rem; display: grid; gap: .3rem; }
.pp-total { font-weight: 600; }
.pp-sponsor { display: flex; align-items: center; gap: .6rem; margin: .4rem 0; }
.pp-sponsor img { object-fit: contain; flex: none; }
.pp-sponsor p { margin: 0; font-size: .9rem; }
.pp-sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .4rem 1rem; }
.pp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0; }
.pp-card { border: 1.5px dashed #555; padding: .7rem .8rem; margin: -1px 0 0 -1px; break-inside: avoid; page-break-inside: avoid; min-height: 9rem; }
.pp-card.sponsor { border-color: #8a6d1a; }
.pp-card-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .4rem; }
.pp-n { font-family: var(--display); font-size: 1.3rem; letter-spacing: 0; }
.pp-prompt { font-size: 1.05rem; font-weight: 600; margin: .3rem 0; }
.pp-hint, .pp-proof { font-size: .85rem; margin: .2rem 0 0; }
.pp-proof { font-style: italic; }
.pp-fill { display: flex; gap: .5rem; align-items: flex-end; font-weight: 600; }
.pp-line { flex: 1; border-bottom: 1px solid #111; min-height: 1.4rem; display: inline-block; }
.pp-line.short { width: 8rem; flex: none; margin-left: .5rem; }
.pp-scroll { overflow-x: auto; }
.pp-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin: .4rem 0 .8rem; }
.pp-table th, .pp-table td { border: 1px solid #555; padding: .3rem .4rem; text-align: left; vertical-align: top; }
.pp-table th { background: #eee; }
.pp-table td.wide { width: 40%; height: 2.4rem; }
.pp-score td { height: 1.8rem; }
.pp-sum td { font-weight: 600; background: #f6f6f6; }
.pp-small { font-size: .78rem; color: #333; }
.pp-photos { display: flex; flex-wrap: wrap; gap: .5rem; }
.pp-photos figure { margin: 0; width: 160px; }
.pp-photos img { width: 160px; height: 120px; object-fit: cover; border: 1px solid #999; }
.pp-photos figcaption { font-size: .8rem; }
.pp-key { border-color: #b3261e; }

@media print {
  @page { margin: 12mm; }
  html.printing body { background: #fff; }
  html.printing .bar, html.printing .host-nav, html.printing .host-banner, html.printing .no-print, html.printing .other-apps,
  html.printing .screen.host > h1, html.printing .note-box, html.printing .toast { display: none !important; }
  html.printing main { max-width: none; padding: 0; }
  html.printing .print-preview { margin: 0; }
  .pp-section { border: 0; border-radius: 0; padding: 0; margin: 0; break-before: page; page-break-before: always; }
  .pp-section:first-child { break-before: auto; page-break-before: auto; }
  .pp-scroll { overflow: visible; }
  .pp-cards { grid-template-columns: 1fr 1fr; }
  .pp-table { font-size: 9.5pt; }
  .pp a { color: #111; text-decoration: none; }
}