/* Design workflow adapted from Unslop by Damir Sokolovsky (@heydamir),
   https://heydamir.design/unslop — CC BY 4.0. */
:root { color-scheme: light; --bg: #fafafa; --ink: #171717; --secondary: #525252; --muted: #707070; --line: #dedede; --surface: #efefef; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; min-height: 44px; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .4; }
button, input { border: 1px solid var(--line); border-radius: 8px; background: transparent; }
button:hover:not(:disabled) { background: var(--surface); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
h1:focus { outline: none; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 20px; font-weight: 500; line-height: 1.4; }
h2 { font-size: 32px; font-weight: 500; line-height: 1.25; }
h3 { font-size: 16px; font-weight: 500; }
.shell { padding: 24px; }
.setup-view { width: 100%; max-width: 336px; margin: clamp(64px, 13svh, 152px) auto 0; }
.setup-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.mystery-swatch { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); background: #ececea; border-radius: 6px; color: #767676; font: 400 20px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.stepper { display: inline-flex; align-items: center; }
.stepper button { width: 44px; font-size: 20px; }
.stepper output { width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.minutes-field { display: flex; align-items: center; gap: 8px; width: 132px; }
.minutes-field input { width: 84px; height: 44px; padding: 8px; font-variant-numeric: tabular-nums; }
.minutes-field span { color: var(--secondary); width: 40px; }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 24px; }
.presets button { padding: 8px 4px; font-size: 14px; color: var(--secondary); }
.presets button.active { background: var(--surface); border-color: #999; color: var(--ink); }
.primary-button { min-height: 48px; background: var(--ink); border-color: var(--ink); color: #fff; padding: 12px 24px; font-weight: 500; }
.primary-button:hover:not(:disabled) { background: #333; }
.setup-view > .primary-button { width: 100%; }
.hunt-view, .viewer-view { display: flex; flex-direction: column; min-height: calc(100svh - 48px); gap: 16px; }
.hunt-heading { display: flex; align-items: center; gap: 24px; }
.hunt-heading h1 { font-size: 16px; margin-right: auto; }
#clock, #viewer-clock { font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.text-button { border: 0; padding: 8px 12px; font-size: 14px; color: var(--secondary); }
.text-button:disabled { visibility: hidden; }
.colour-canvas { position: relative; overflow: hidden; flex: 1; min-height: 240px; border-radius: 8px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 16px; }
.reveal-cover { display: none; position: absolute; inset: 0; z-index: 1; align-items: center; justify-content: center; background: #eaeae8; color: #82827f; font-size: clamp(48px, 8vw, 108px); line-height: 1; }
.colour-canvas.is-revealing .reveal-cover { display: flex; animation: reveal-colour 900ms cubic-bezier(.76,0,.24,1) both; }
.colour-canvas.is-revealing #target-hex { opacity: 0; }
@keyframes reveal-colour { from { transform: translateY(0); } to { transform: translateY(-101%); } }
#target-hex, #compare-hex, #result-hex, #viewer-hex { font-size: 13px; font-variant-numeric: tabular-nums; }
.compare-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.compare-view { max-width: 1216px; margin: auto; }
.reference-colour { display: flex; align-items: center; gap: 8px; }
.reference-colour > span { height: 40px; width: 40px; border: 1px solid #0002; border-radius: 4px; }
.reference-colour div { display: flex; flex-direction: column; font-size: 12px; color: var(--secondary); }
.compare-instruction { margin: 16px 0 24px; color: var(--secondary); font-size: 14px; }
.players-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; gap: 8px; }
.player-card { padding: 8px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; background: #fff; }
.player-card.picked { border-color: var(--ink); }
.player-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.player-heading strong { margin-right: auto; font-size: 16px; font-weight: 500; white-space: nowrap; }
.pick-button { padding: 8px; white-space: nowrap; font-size: 14px; }
.player-card.picked .pick-button { background: var(--ink); color: #fff; border-color: var(--ink); }
.photo-area { position: relative; margin-top: 8px; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: 4px; }
.photo-area:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.photo-stage { width: 100%; height: 192px; display: flex; justify-content: center; align-items: center; padding: 8px; }
.photo-image-wrap { position: relative; line-height: 0; max-width: 100%; flex-shrink: 1; }
.photo-image-wrap img { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: manipulation; }
.sample-marker { position: absolute; width: 16px; height: 16px; border: 2px solid #fff; box-shadow: 0 0 0 1px #171717; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.photo-status { padding: 8px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--secondary); font-size: 13px; }
.photo-status:empty { display: none; }
.sampled { display: inline-flex; align-items: center; gap: 8px; }
.sample-chip { width: 16px; height: 16px; border: 1px solid #0002; border-radius: 4px; }
.change-photo { border: 0; color: var(--secondary); text-decoration: underline; text-underline-offset: 4px; padding: 8px 4px; font-size: 14px; white-space: nowrap; }
.compare-footer { display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin-top: 24px; }
.compare-footer p { color: var(--secondary); font-size: 14px; }
.compare-footer p:empty { display: none; }
.result-view { max-width: 480px; margin: 32px auto 0; }
.result-main { display: flex; align-items: center; gap: 24px; margin: 24px 0; }
.result-colour { width: 128px; min-height: 128px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 12px; border-radius: 4px; font-size: 13px; }
.result-details p { font-size: 14px; color: var(--secondary); margin-top: 8px; }
#winner-detail:empty { display: none; }
.rankings { margin-bottom: 24px; }
.ranking-note { color: var(--secondary); font-size: 13px; margin: 4px 0 8px; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rank-index { width: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-colour { width: 20px; height: 20px; border-radius: 4px; border: 1px solid #0002; }
.rank-name { flex: 1; }
.rank-distance { color: var(--secondary); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .shell { padding: 20px; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .setup-view { margin-top: clamp(64px, 10svh, 108px); }
  .result-view { margin-top: 12px; }
  .hunt-view, .viewer-view { min-height: calc(100svh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); gap: 12px; }
  .hunt-heading { gap: 12px; flex-wrap: wrap; }
  .hunt-heading h1 { font-size: 14px; }
  #clock, #viewer-clock { font-size: 28px; }
  .text-button { padding: 8px; }
  .players-grid { grid-template-columns: 1fr; }
  .compare-footer { flex-direction: column; align-items: stretch; gap: 12px; }
  .result-main { gap: 16px; }
  .result-colour { width: 112px; min-height: 112px; }
  .result-details h2 { font-size: 28px; }
  .result-view > .primary-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .colour-canvas.is-revealing .reveal-cover { display: none; animation: none; }
}


/* A single quiet sharing surface; the QR is generated entirely in the browser. */
.share-dialog {
  box-sizing: border-box;
  width: min(380px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 24px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 64px #00000018;
}
.share-dialog::backdrop { background: #10101070; }
.share-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.share-heading h2 { font-size: 19px; font-weight: 500; }
.share-close { min-width: 44px; min-height: 44px; padding: 0; border: 0; font-size: 26px; font-weight: 300; color: var(--secondary); }
.share-qr {
  width: min(100%, 268px);
  margin: 20px auto 14px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.share-qr svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.share-caption { margin: 0 0 22px; font-size: 14px; text-align: center; color: var(--secondary); }
.share-copy { display: block; width: 100%; }
@media (max-width: 420px) {
  .hunt-heading { column-gap: 6px; }
  .hunt-heading h1 { font-size: 13px; }
  .hunt-view #clock { font-size: 25px; }
  .hunt-view .text-button { font-size: 12px; padding-inline: 5px; }
  .share-dialog { padding: 20px; }
}

/* Room controls follow the existing quiet chrome; the canvas carries the colour. */
.room-create { display: block; width: 100%; margin-top: 8px; padding: 8px 16px; }
.room-message { color: var(--secondary); font-size: 14px; margin: 8px 0; }
.room-message:empty { display: none; }
#room-join h1, #room-lobby h1 { margin-bottom: 16px; }
#join-form { display: grid; gap: 12px; }
#room-name { min-width: 0; padding: 12px; font-size: 16px; }
.room-code { font: 13px/1.5 monospace; overflow-wrap: anywhere; color: var(--secondary); }
#room-players { list-style: none; padding: 0; margin: 16px 0; }
#room-players li { padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
#room-lobby > button { width: 100%; margin-top: 8px; }
.room-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 16px 0; }
#room-status { margin-right: auto; color: var(--secondary); font-size: 14px; }
.room-gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 12px; margin: 16px 0; }
.room-photo { min-width: 0; border-top: 1px solid var(--line); padding-top: 8px; }
.room-photo strong { display: block; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.room-photo img { display: block; width: 100%; height: 160px; object-fit: contain; margin: 8px 0; cursor: crosshair; background: var(--surface); }
.room-photo .room-sample { color: var(--secondary); font-size: 13px; }
.room-photo button { padding: 8px; margin-top: 8px; width: 100%; }
.room-photo.picked { border-color: var(--ink); }
#room-compare-controls { margin-top: 16px; }
#room-result h2 { margin: 24px 0; overflow-wrap: anywhere; }
body.in-room .hunt-view { min-height: 65svh; }
body.in-room #finish-early, body.in-room #share-round { display: none; }
body.in-room #compare-view .compare-instruction,
body.in-room #players-grid, body.in-room .compare-footer { display: none; }
@media (max-width: 400px) { .room-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); } }

body.in-room .colour-canvas.is-revealing .reveal-cover { animation-delay: calc(-1 * var(--reveal-delay, 0ms)); }

.room-setup { margin-top: 16px; }
.room-setup summary { cursor: pointer; padding: 8px 0; color: var(--secondary); font-size: 14px; }
.room-setup .setting-row { margin: 12px 0; gap: 8px; }
.room-setup input[type=text], #host-name, .room-setup select { width: 184px; min-width: 0; min-height: 44px; padding: 8px; font: inherit; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.room-hide { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; }
.room-hide input { width: 18px; height: 18px; accent-color: var(--ink); }
.room-photo img { cursor: default; }
#room-reveal { width: min(100%, 336px); }
#room-scores p { padding: 8px 0; border-bottom: 1px solid var(--line); }