/* The pricing page's comparison (#hunt, built by js/hunt.js): the same home from above, with and without Search the
   Home. Plan sizes are in --u, the px per plan unit, set by the script from each plan's width. */

.hunt {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3.4vw, 40px);
  --wall: color-mix(in srgb, var(--ink) 80%, var(--card));
  --furn-line: color-mix(in srgb, var(--ink) 20%, transparent);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hunt { --wall: color-mix(in srgb, var(--ink) 52%, var(--card)); } }
:root[data-theme="dark"] .hunt { --wall: color-mix(in srgb, var(--ink) 52%, var(--card)); }
@media (max-width: 720px) { .hunt { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

.hunt-side { min-width: 0; display: grid; gap: 12px; align-content: start; }
.hunt-tag {
  margin: 0; display: flex; align-items: center; gap: 9px;
  font: 500 11.5px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2);
}
.hunt-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.hunt-with .hunt-tag::before { background: var(--hl); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 8px var(--hl); }
.hunt-without .hunt-tag::before { box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* ---------- the bar: a search box on one side, a thought on the other ---------- */
.hunt-bar {
  display: flex; align-items: center; gap: 11px; height: 50px; padding: 0 18px;
  border-radius: 999px; background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--line);
  font-size: 16.5px; color: var(--ink); transition: box-shadow .35s;
}
.hunt-ico { width: 19px; height: 19px; flex: none; color: var(--ink-3); }
.hunt-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hunt-typed { transition: opacity .3s; }
.hunt-typed:empty::before { content: attr(data-ph); color: var(--ink-3); }
.hunt-caret {
  display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -.18em;
  background: var(--ink); animation: hunt-blink 1s steps(1) infinite;
}
@keyframes hunt-blink { 50% { opacity: 0; } }
.hunt-bar.go { box-shadow: 0 0 0 4px var(--hl-mark), var(--shadow); }
.hunt-without .hunt-bar {
  background: transparent; box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--ink-3) 55%, transparent);
  color: var(--ink-2); font-style: italic;
}
.hunt-without .hunt-text { padding-right: .15em; }

/* ---------- the plan ---------- */
.hunt-plan {
  --u: 1px; position: relative; aspect-ratio: 412 / 302; border-radius: 18px; overflow: hidden;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line);
}
.hunt-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.h-ground { fill: var(--card); }
.h-floor { stroke: none; }
.h-floor.wood { fill: color-mix(in srgb, var(--birch) 26%, var(--card)); }
.h-floor.hall { fill: color-mix(in srgb, var(--birch) 16%, var(--card)); }
.h-floor.tile { fill: color-mix(in srgb, var(--wall-a) 70%, var(--card)); }
.h-floor.stone { fill: color-mix(in srgb, var(--wall-a) 45%, var(--card)); }
.h-tiles { stroke: color-mix(in srgb, var(--ink) 6%, transparent); stroke-width: .6; fill: none; }
.h-wall { stroke: var(--wall); stroke-width: 5; stroke-linecap: square; fill: none; }
.h-win { stroke: var(--card); stroke-width: 3; fill: none; }
.h-win-l { stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: .8; fill: none; }
.h-swing { stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: .7; fill: none; stroke-dasharray: 2 2; }
.h-leaf { stroke: var(--wall); stroke-width: 1.6; stroke-linecap: round; }
.h-label text {
  font: 500 7.4px var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  fill: color-mix(in srgb, var(--ink-3) 85%, transparent);
}

.h-furn > * { stroke: var(--furn-line); stroke-width: .8; }
.f-wood { fill: color-mix(in srgb, var(--oak) 50%, var(--card)); }
.f-seam { stroke: color-mix(in srgb, var(--ink) 16%, transparent) !important; stroke-width: .7; fill: none; }
.f-bed { fill: var(--card); }
.f-pillow { fill: var(--card); }
.f-blanket { fill: color-mix(in srgb, #7E97B8 50%, var(--card)); }
.f-white { fill: color-mix(in srgb, var(--card) 92%, var(--ink)); }
.f-water { fill: color-mix(in srgb, #8EC3DA 45%, var(--card)); }
.f-screen { fill: color-mix(in srgb, var(--ink) 70%, var(--card)); }
.f-chair { fill: color-mix(in srgb, var(--walnut) 40%, var(--card)); }
.f-sofa { fill: color-mix(in srgb, #8C9C88 55%, var(--card)); }
.f-cushion { fill: color-mix(in srgb, #8C9C88 30%, var(--card)); }
.f-plant { fill: color-mix(in srgb, #5E8F5A 62%, var(--card)); }
.f-plant2 { fill: color-mix(in srgb, #7DB070 60%, var(--card)); stroke: none !important; }
.f-bowl { fill: color-mix(in srgb, var(--brass) 70%, var(--card)); }
.f-lamp { fill: color-mix(in srgb, var(--hl) 40%, var(--card)); stroke: none !important; }
.f-counter { fill: color-mix(in srgb, var(--wall-b) 55%, var(--card)); }
.f-burner { fill: none; stroke: color-mix(in srgb, var(--ink) 45%, transparent) !important; stroke-width: 1 !important; }
.f-rug { fill: color-mix(in srgb, var(--oak) 22%, transparent); stroke: color-mix(in srgb, var(--oak) 35%, transparent); stroke-width: .6; stroke-dasharray: 1.4 1.4; }
.f-mat { fill: color-mix(in srgb, var(--walnut) 35%, transparent); }
/* drawers sit under the furniture and slide out (by the spot's dx, dy, in --dx/--dy) while someone looks in */
.f-drawer {
  fill: color-mix(in srgb, var(--oak) 35%, var(--card)); stroke: var(--furn-line); stroke-width: .8;
  transition: transform .45s cubic-bezier(.3, .7, .3, 1);
}
.f-drawer.open { transform: translate(var(--dx), var(--dy)); }

.h-route {
  fill: none; stroke: var(--hl); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .1 5.4;
  opacity: 0; transition: opacity .3s;
}
.h-route.on { opacity: 1; }
.h-trail {
  fill: none; stroke: color-mix(in srgb, var(--ink-3) 70%, transparent); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 2 3; opacity: .55; transition: opacity .5s;
}
.h-trail.fade { opacity: 0; }

/* ---------- what moves: the person, the dot, the smile, the ? and ! ---------- */
.hunt-layer { position: absolute; inset: 0; pointer-events: none; }
.hunt-layer > * { position: absolute; left: 0; top: 0; will-change: transform; }

/* the found dot, the brand's: gold with a white ring, and a ping when it lights */
.hdot {
  width: max(9px, calc(9 * var(--u))); height: max(9px, calc(9 * var(--u))); margin: calc(max(9px, calc(9 * var(--u))) / -2);
  border-radius: 50%; background: var(--hl); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 8px var(--hl);
  opacity: 0; scale: .2; transition: opacity .25s, scale .45s cubic-bezier(.3, 1.6, .5, 1);
}
.hdot::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--hl); opacity: 0;
}
.answered .hdot { opacity: 1; scale: 1; }
.answered .hdot::after { animation: hunt-ping 1.6s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes hunt-ping { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(3.4); opacity: 0; } }

/* the person: a top-down token, head over shoulders, with a soft view cone; the script rotates it to face where it goes */
.hp { width: 0; height: 0; }
.hp > i { position: absolute; display: block; }
.hp-cone {
  --s: calc(32 * var(--u)); width: var(--s); height: var(--s); left: 0; top: calc(var(--s) / -2);
  background: radial-gradient(circle farthest-side at 0 50%, color-mix(in srgb, var(--ink) 20%, transparent), transparent);
  clip-path: polygon(0 50%, 100% 14%, 100% 86%); transform-origin: 0 50%;
  opacity: .8; transition: opacity .3s, transform .3s;
}
.hp-body {
  width: calc(12 * var(--u)); height: calc(23 * var(--u)); left: calc(-7.5 * var(--u)); top: calc(-11.5 * var(--u));
  border-radius: 50%; background: color-mix(in srgb, var(--ink) 58%, var(--card));
  box-shadow: 0 0 0 calc(1.4 * var(--u)) var(--card), 0 calc(1.5 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .25);
  rotate: var(--sway, 0deg); transition: rotate .12s linear;
}
.hp-head {
  width: calc(12 * var(--u)); height: calc(12 * var(--u)); left: calc(-5 * var(--u)); top: calc(-6 * var(--u));
  border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 calc(1.3 * var(--u)) var(--card);
}
/* a nose of sorts: which way it's facing */
.hp-head::after {
  content: ""; position: absolute; right: calc(-2.4 * var(--u)); top: 50%; width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u));
  margin-top: calc(-1.6 * var(--u)); border-radius: 50%; background: var(--ink);
}
.peeking .hp-cone { opacity: 1; transform: scale(1.1, 1.35); }

.hp-pop { width: max(22px, calc(21 * var(--u))); height: max(22px, calc(21 * var(--u))); opacity: 0; transform: translate(-50%, -30%) scale(.2); }
.hp-pop svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .22)); }
.sm-face { fill: var(--hl); stroke: rgba(255, 255, 255, .95); stroke-width: 1.6; }
.sm-ink { fill: #3A2A08; }
.sm-line { fill: none; stroke: #3A2A08; stroke-width: 1.7; stroke-linecap: round; }

.hm {
  font: 760 max(15px, calc(17 * var(--u)))/1 var(--f-display); color: var(--ink-2); opacity: 0;
  text-shadow: 0 0 3px var(--card), 0 0 6px var(--card);
}
.hm.bang { color: var(--red); }

/* ---------- under each plan: where it is and how long it took ---------- */
.hunt-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px;
  font-size: 15px; color: var(--ink-2);
}
.hunt-answer { display: flex; align-items: center; gap: 9px; min-width: 0; white-space: nowrap; }
.hunt-answer b { color: var(--ink); font-weight: 600; }
.hunt-where { overflow: hidden; text-overflow: ellipsis; }
.hunt-thumb { flex: none; width: 26px; height: 26px; display: grid; place-items: center; }
.hunt-thumb svg { max-width: 100%; max-height: 100%; filter: brightness(var(--item-dim)) drop-shadow(0 1px 1.5px rgba(30, 14, 4, .3)); }
.hunt-with .hunt-answer { opacity: 0; translate: 0 -5px; transition: opacity .35s, translate .35s; }
.hunt-with.answered .hunt-answer { opacity: 1; translate: none; }
.hunt-clock {
  flex: none; font: 500 13px/1 var(--f-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ink-3);
  padding: 7px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 5%, transparent);
  transition: background .3s, color .3s;
}
.hunt-with.found .hunt-clock { color: var(--ink); background: var(--hl-mark); }
.hunt-without .hunt-clock { color: color-mix(in srgb, var(--red) calc(var(--f, 0) * 100%), var(--ink-3)); }
.hunt-still { color: var(--ink-3); font-style: italic; }
@media (max-width: 440px) {
  .hunt-foot { font-size: 14px; gap: 8px; }
  .hunt-with .hc-l { display: none; }
  .hunt-bar { height: 46px; font-size: 16px; padding: 0 16px; }
}
.cleared .hunt-typed { opacity: 0; }