/* [fun15] Pixel Art Together (public/pixel-art.js, px-) and Scavenger Hunt at Home (public/hunt.js,
   hu-). Colors come from the day and evening tokens; tap targets are 44px or more; from 320px wide
   to a phone on its side (the grid on the left, the tools on the right). */

/* ---------- Pixel Art ---------- */
.px-home { display: grid; gap: var(--space-2); }
.px-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); }
.px-template { position: relative; display: grid; justify-items: center; gap: 6px; padding: var(--space-3) var(--space-2); border-radius: var(--radius-lg, 20px); background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; font-weight: 700; min-height: 44px; }
.px-template:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.px-thumb { image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); background: #FFFFFF; }
.px-done { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--success); color: #FFFFFF; }

.px-editor { display: grid; gap: var(--space-3); align-items: start; }
.px-canvas-side { display: grid; gap: var(--space-2); min-width: 0; }
.px-side { display: grid; gap: var(--space-3); min-width: 0; }
.px-grid { width: 100%; max-width: 720px; margin: 0 auto; display: flex; justify-content: center; }
.px-grid.is-off { opacity: 0.6; }
.px-canvas { display: block; touch-action: none; border-radius: 8px; box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-1); background: #FFFFFF; cursor: crosshair; max-width: 100%; }
.px-tools { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg, 20px); background: var(--surface); box-shadow: var(--shadow-1); }
.px-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.px-row .ui-seg { flex: 1 1 220px; }
.px-row--mirror .ui-seg { flex: 1 1 100%; }
.px-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.px-swatch { width: 40px; height: 40px; min-width: 40px; border: 0; border-radius: 10px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); cursor: pointer; touch-action: manipulation; }
.px-swatch.white { box-shadow: inset 0 0 0 2px var(--line-strong); }
.px-swatch.on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent); }
.px-swatch:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.px-any { min-height: 40px; gap: 6px; }
.px-rainbow { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#E53935, #FB8C00, #FDD835, #43A047, #00ACC1, #1E88E5, #8E24AA, #D81B60, #E53935); }
.px-current { font-size: var(--text-xs, 13px); color: var(--ink-muted); }
.px-actions { flex-wrap: wrap; }
.px-numbers { display: flex; flex-wrap: wrap; gap: 8px; }
.px-num { width: 52px; height: 52px; border: 0; border-radius: 14px; background: var(--c); color: #1C2233; font: 800 22px / 1 var(--font-display); cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); touch-action: manipulation; }
.px-num b { display: inline-grid; place-items: center; min-width: 32px; height: 32px; border-radius: 50%; background: rgb(255 255 255 / 0.85); }
.px-num.on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent); }
.px-num.done { opacity: 0.55; }
.px-num:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.px-status { margin: 0; font-weight: 700; min-height: 1.4em; }

@media (min-width: 900px) {
  .px-editor { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .px-editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .px-grid { max-width: calc(100vh - 120px); max-width: calc(100dvh - 120px); }
  .px-swatch { width: 36px; height: 36px; min-width: 36px; }
}

/* ---------- Scavenger Hunt ---------- */
.hu-home, .hu-start, .hu-play, .hu-edit { display: grid; gap: var(--space-3); }
.hu-pad { padding: var(--space-3); margin: 0; }
.hu-art { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.hu-intro { display: flex; gap: var(--space-3); align-items: center; }
.hu-title { margin: 0; font: 800 var(--text-xl, 24px) / 1.15 var(--font-display); }
.hu-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); }
.hu-score { display: flex; flex-wrap: wrap; gap: 6px; }
.hu-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1), inset 4px 0 0 var(--c, var(--accent)); font-weight: 500; }
.hu-chip.me { box-shadow: 0 0 0 2px var(--accent), var(--shadow-1); }
.hu-clock { margin: 0; font: 800 var(--text-lg, 20px) / 1 var(--font-display); }
.hu-card { padding: 0; }
.hu-items { list-style: none; margin: 0; padding: 0; }
.hu-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.hu-item:last-child { border-bottom: 0; }
.hu-item.is-found .hu-text { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--success); }
.hu-check { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 220px; min-height: 48px; cursor: pointer; }
.hu-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hu-box { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-sunken); color: transparent; box-shadow: inset 0 0 0 2px var(--line-strong); }
.hu-check input:checked + .hu-box { background: var(--success); color: #FFFFFF; box-shadow: none; }
.hu-check input:focus-visible + .hu-box { outline: 3px solid var(--focus); outline-offset: 2px; }
.hu-check input:disabled + .hu-box { opacity: 0.5; }
.hu-text { flex: 1 1 auto; font-weight: 600; line-height: 1.35; }
.hu-out { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--warning-soft); color: var(--accent-text); font-size: var(--text-xs, 13px); font-weight: 700; }
.hu-teams { display: flex; flex-wrap: wrap; gap: 6px; }
.hu-team { min-height: 44px; min-width: 64px; padding: 6px 12px; border: 0; border-radius: 12px; background: var(--surface-sunken); color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--c); cursor: pointer; touch-action: manipulation; }
.hu-team.on { background: var(--c); color: #FFFFFF; box-shadow: none; }
.hu-team:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hu-who { display: inline-flex; gap: 2px; }
.hu-draw { width: 100%; max-width: 480px; height: auto; aspect-ratio: 4 / 3; border-radius: 12px; box-shadow: 0 0 0 1px var(--line-strong); touch-action: none; background: #FFFFFF; }
.hu-colors { display: flex; gap: 8px; margin-top: var(--space-2); }
.hu-color { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; }
.hu-edit-rows { display: grid; gap: var(--space-2); }
.hu-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); align-items: start; }
.hu-edit-main { display: grid; gap: 2px; }
.hu-warn { margin: 0; color: var(--danger-text); font-size: var(--text-xs, 13px); min-height: 0; }
.hu-warn:empty { display: none; }
@media (max-width: 420px) {
  .hu-edit-row { grid-template-columns: minmax(0, 1fr) auto; }
  .hu-edit-row .ui-switch { grid-column: 1; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .hu-items { columns: 2; column-gap: 0; }
  .hu-item { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  .hu-team, .px-swatch, .px-num { transition: none; }
}

/* [fixes-b] The Scavenger Hunt finish card, and the buttons under the list stay put (they covered an item on phones). */
.hu-finish { display: grid; justify-items: center; gap: 2px; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--success-soft, var(--accent-soft)); box-shadow: var(--shadow-2); text-align: center; animation: hu-pop .35s ease-out both; }
.hu-finish[hidden] { display: none; }
.hu-finish .ui-icon { color: var(--accent-text); }
.hu-finish-big { margin: 0; font: 800 var(--text-xl, 24px) / 1.15 var(--font-display); }
.hu-finish-sub { margin: 0; font-weight: 600; }
.hu-play .nb-actions { position: static; }
@keyframes hu-pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hu-finish { animation: none; } }