/* Palette, 6 Aug 2026. Each accent has exactly one job, so three accents plus
     a fail colour does not turn into a circus. Contrast measured against the
     --night base, WCAG AA needs 4.5:1 for normal text.
       --glow  Honey Bronze   8.87:1  primary accent, brand and interactive
       --door  Mint Glow     12.26:1  correct, truth, success. Only that.
       --teal  Verdigris      4.99:1  factual markers: the sold tag, agent slot
       --mint-soft Frosted Mint 14.38:1  soft tints and labels beside mint marks
       --red   lightened      5.61:1  wrong. Was #e05252, which failed AA at 4.08:1
     Text on a Verdigris or Mint fill must be --night, never white: white on
     Verdigris is 3.12:1 and on Mint Glow it is 1.27:1. */
  :root{
    --night:#202332; --night-2:#2a2e40; --night-3:#363a52;
    --glow:#f8b84d; --glow-soft:#ffd9a0;
    --teal:#17a398; --brick:#17a398; --door:#87ff65; --mint-soft:#ddffd9;
    --milk:#f5f1e8; --milk-dim:#b9bdcf; --red:#ff6b6b;
    --line:rgba(245,241,232,.12);
    --mono:'IBM Plex Mono',ui-monospace,monospace;
    --body:'Archivo',system-ui,sans-serif;
    --disp:'Archivo Black',var(--body);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    background:var(--night);color:var(--milk);font-family:var(--body);
    font-size:16px;line-height:1.45;min-height:100vh;
    background-image:radial-gradient(ellipse 60% 40% at 50% -5%, rgba(248,184,77,.07), transparent);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .app{max-width:430px;margin:0 auto;padding:18px 16px 60px}

  .mast{display:flex;align-items:baseline;justify-content:space-between;padding:2px 2px 12px}
  .logo{font-family:var(--disp);font-size:30px;letter-spacing:-.5px}
  .logo .dot{color:var(--glow)}
  .mast-right{text-align:right;font-size:12px;color:var(--milk-dim)}
  .streak{font-family:var(--mono);font-weight:700;color:var(--glow);font-size:13px}

  .vis-hidden{position:absolute;left:-9999px}
  #townPick{padding:10px 12px 12px;background:rgba(0,0,0,.18);border-radius:0 0 12px 12px}
  select{
    width:100%;padding:10px 12px;background:var(--night-3);color:var(--milk);
    border:1px solid var(--line);border-radius:10px;font-family:var(--body);font-size:14px;
  }
  select:focus{outline:2px solid var(--glow);outline-offset:1px}
  .patch-row{display:flex;gap:8px;margin-top:9px}
  .patch-row .btn-quiet{flex:1;padding:10px 8px;font-size:13px}

  /* extras: everything that isn't the one main path */
  .extras{display:grid;gap:9px;margin-top:12px}
  .extra-block{background:var(--night-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .extra{
    width:100%;display:flex;align-items:center;gap:12px;text-align:left;
    background:var(--night-2);border:1px solid var(--line);border-radius:12px;
    padding:13px 14px;cursor:pointer;color:var(--milk);font-family:var(--body);transition:border-color .15s;
  }
  .extra-block .extra{border:0;border-radius:0;width:100%}
  .extra:hover{border-color:var(--glow)}
  .extra-block .extra:hover{background:var(--night-3)}
  .extra:focus-visible{outline:2px solid var(--glow);outline-offset:-2px}
  .extra-ico{font-size:19px;flex-shrink:0}
  .extra b{display:block;font-size:14.5px;font-weight:600}
  .extra small{display:block;font-size:12px;color:var(--milk-dim);margin-top:1px;line-height:1.35}
  .extra>span:nth-child(2){flex:1}
  .extra-go{color:var(--milk-dim);font-size:16px;flex-shrink:0}
  .btn-wide{width:100%}
  .mode-chip{
    font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
    background:rgba(135,255,101,.15);color:var(--door);border-radius:5px;padding:2px 7px;margin-left:7px;
  }

  .eyebrow{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
  .sub{color:var(--milk-dim);font-size:13px;margin-top:2px}

  .window{
    margin-top:12px;border-radius:14px;overflow:hidden;border:1px solid var(--line);
    background:var(--night-2);box-shadow:0 0 60px rgba(248,184,77,.10), 0 20px 40px rgba(0,0,0,.35);
  }
  .frame{position:relative;aspect-ratio:4/3;background:var(--night-3);cursor:pointer}
  .frame svg,.frame img{display:block;width:100%;height:100%;object-fit:cover}
  .frame.is-video{aspect-ratio:16/9;cursor:default;background:#000}
  .frame iframe{display:block;width:100%;height:100%;border:0}
  .frame.is-video .shot-label{bottom:auto;top:10px;left:10px}
  .missing{color:var(--glow);opacity:.85}
  .approx{color:var(--glow);font-size:11px;vertical-align:super;margin-left:1px}
  .approx-note{color:var(--milk-dim);opacity:.8;font-size:12.5px}
  .sub-unit{color:var(--milk-dim);font-size:11.5px;opacity:.75}
  .listing-copy{color:var(--milk);font-style:italic}
  .shot-label{
    position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:11px;font-weight:700;
    letter-spacing:.08em;background:rgba(32,35,50,.82);color:var(--glow-soft);padding:4px 9px;border-radius:6px;
  }
  .stand-in{
    position:absolute;right:10px;top:10px;font-family:var(--mono);font-size:9.5px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;background:rgba(32,35,50,.7);color:var(--milk-dim);
    padding:3px 7px;border-radius:5px;
  }
  .dots{display:flex;gap:8px;justify-content:center;padding:11px 0;background:var(--night-2)}
  .dots button{width:34px;height:6px;border-radius:3px;border:0;cursor:pointer;background:rgba(245,241,232,.18);transition:background .2s}
  .dots button[aria-current="true"]{background:var(--glow)}
  .dots button:focus-visible{outline:2px solid var(--glow);outline-offset:2px}

  .facts{margin-top:13px}
  .chips{display:flex;gap:7px;flex-wrap:wrap}
  .fact{
    background:var(--night-2);border:1px solid var(--line);border-radius:8px;
    padding:5px 10px;font-size:12.5px;color:var(--milk-dim);
    display:flex;gap:6px;align-items:center;
  }
  .fact b{font-family:var(--mono);font-weight:700}
  .ico{width:15px;height:15px;flex-shrink:0;opacity:.75}
  /* the countable details lead: brighter, slightly larger, amber numerals */
  .fact.key{color:var(--milk);font-size:13.5px;padding:6px 11px;border-color:rgba(245,241,232,.2)}
  .fact.key b{color:var(--glow);font-size:15px}
  .fact.key .ico{opacity:1;color:var(--glow);width:16px;height:16px}
  .fact.key .sub-unit{margin-left:2px}
  .where{margin-top:9px;font-size:13.5px;color:var(--milk-dim);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .where .ico{width:15px;height:15px}
  .where .pc{font-family:var(--mono);font-weight:700;color:var(--milk);background:var(--night-2);border-radius:6px;padding:2px 8px;font-size:12px}
  .blurb{margin-top:12px;font-size:14px;color:var(--milk-dim)}
  .blurb strong{color:var(--milk);font-weight:600}

  .anchor{
    margin-top:12px;border-left:3px solid var(--door);
    background:linear-gradient(90deg, rgba(135,255,101,.10), transparent 70%);
    padding:10px 12px;border-radius:0 10px 10px 0;font-size:13.5px;
  }
  .anchor .tag{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--door)}
  .anchor p{margin-top:3px}
  .anchor .mono,.mono{font-family:var(--mono);font-weight:700}

  .play{margin-top:16px}
  .guess-row{display:flex;gap:9px}
  .pound{position:relative;flex:1}
  .pound::before{content:'£';position:absolute;left:13px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-weight:700;color:var(--glow);font-size:17px;pointer-events:none}
  .pound::after{content:'k';position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-weight:700;color:var(--milk-dim);font-size:15px;pointer-events:none}
  input[type=text]{
    width:100%;padding:13px 30px;font-family:var(--mono);font-size:17px;font-weight:700;
    background:var(--night-2);color:var(--milk);border:1.5px solid rgba(245,241,232,.22);border-radius:11px;transition:border-color .15s;
  }
  input[type=text]:focus{outline:none;border-color:var(--glow)}
  input::placeholder{color:rgba(185,189,207,.5);font-weight:500}
  .btn{
    font-family:var(--disp);font-size:15px;background:var(--glow);color:var(--night);border:0;
    border-radius:11px;padding:13px 20px;cursor:pointer;transition:transform .08s, background .15s;
  }
  .btn:hover{background:var(--glow-soft)}
  .btn:active{transform:scale(.97)}
  .btn:focus-visible{outline:2px solid var(--milk);outline-offset:2px}
  .btn-quiet{
    font-family:var(--body);font-weight:600;font-size:14px;background:var(--night-3);color:var(--milk);
    border:1px solid var(--line);border-radius:11px;padding:12px 18px;cursor:pointer;
  }
  .btn-quiet:hover{border-color:var(--glow)}
  .btn-quiet:focus-visible{outline:2px solid var(--glow);outline-offset:2px}

  .tries{display:flex;gap:7px;margin-top:12px}
  .try{flex:1;height:44px;border-radius:9px;border:1px dashed rgba(245,241,232,.18);display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--mono);font-size:12.5px;font-weight:700;transition:all .2s}
  .try.done{border-style:solid;background:var(--night-2)}
  .try .dir{font-size:15px}
  .try .amt{color:var(--milk-dim);font-weight:500}
  .hint{margin-top:10px;font-size:13.5px;color:var(--milk-dim);min-height:20px}
  .hint b{color:var(--glow)}

  .reveal{margin-top:18px}
  .blindbox{position:relative;border-radius:14px;overflow:hidden;background:var(--night-2);border:1px solid var(--line);text-align:center;padding:26px 16px 22px}
  .sold-tag{display:inline-block;font-family:var(--disp);font-size:12px;letter-spacing:.16em;color:var(--night);background:var(--teal);border-radius:6px;padding:5px 12px;text-transform:uppercase}
  .price{font-family:var(--mono);font-weight:700;font-size:40px;letter-spacing:-1px;color:var(--glow);margin-top:8px;line-height:1.1}
  .verdict{font-family:var(--disp);font-size:18px;margin-top:8px}
  .verdict.good{color:var(--door)} .verdict.ok{color:var(--glow)} .verdict.bad{color:var(--red)}
  .blind{position:absolute;inset:0;background:repeating-linear-gradient(180deg,var(--night-3) 0 14px,#2b3760 14px 16px);transition:transform .9s cubic-bezier(.7,0,.3,1)}
  .blind::after{content:'';position:absolute;bottom:0;left:0;right:0;height:5px;background:var(--glow);border-radius:3px}
  .blind.up{transform:translateY(-101%)}
  @media (prefers-reduced-motion: reduce){.blind{transition:none}}

  .after{margin-top:14px;display:grid;gap:12px}
  .card{background:var(--night-2);border:1px solid var(--line);border-radius:13px;padding:15px 16px}
  .card h3{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--milk-dim);margin-bottom:9px}
  .pct-line{font-size:15px;line-height:1.55}
  .pct-line b{font-family:var(--mono);color:var(--glow);font-size:16px}
  .pct-line b.loc{color:var(--door)}

  .histo{display:flex;align-items:flex-end;gap:3px;height:74px;margin-top:14px}
  .bar{flex:1;background:rgba(245,241,232,.16);border-radius:3px 3px 0 0;min-height:4px;position:relative}
  .bar.truth{background:var(--door)}
  .bar.you{background:var(--glow)}
  .bar.youtruth{background:linear-gradient(180deg,var(--glow) 50%,var(--door) 50%)}
  .bar.you::after,.bar.truth::after,.bar.youtruth::after{
    position:absolute;top:-16px;left:50%;transform:translateX(-50%);
    font-family:var(--mono);font-size:9.5px;font-weight:700;white-space:nowrap;
  }
  .bar.you::after{content:'you';color:var(--glow)}
  .bar.truth::after{content:'sold';color:var(--door)}
  .bar.youtruth::after{content:'you+sold';color:var(--glow)}
  .histo-x{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--milk-dim);margin-top:5px}

  .gossip{font-size:14px;line-height:1.55}
  .gossip .mono{color:var(--glow)}
  .scale{position:relative;height:34px;margin:16px 0 6px;border-radius:4px;background:linear-gradient(90deg,rgba(245,241,232,.07),rgba(245,241,232,.16))}
  .tick{position:absolute;top:9px;width:2px;height:16px;background:var(--milk-dim);opacity:.65;transform:translateX(-1px)}
  .truth-mark{position:absolute;top:0;width:3px;height:34px;background:var(--door);transform:translateX(-1.5px)}
  .truth-mark span{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--mint-soft);white-space:nowrap}
  .truth-mark.right span{left:auto;right:0;transform:none}
  .truth-mark.left span{left:0;transform:none}
  .scale-note{font-size:12.5px;color:var(--milk-dim);margin-top:8px}

  .ad{border:1px solid rgba(248,184,77,.35);background:linear-gradient(180deg,rgba(248,184,77,.08),transparent)}
  .ad .agent{display:flex;align-items:center;gap:11px}
  .agent-mark{width:38px;height:38px;border-radius:9px;background:var(--teal);display:flex;align-items:center;justify-content:center;font-family:var(--disp);color:var(--night);font-size:15px;flex-shrink:0}
  .ad a{color:var(--glow);font-weight:600;font-size:14px;text-decoration:none}
  .ad a:hover{text-decoration:underline}
  .ad .small{font-size:12px;color:var(--milk-dim);margin-top:2px}
  .lead{display:flex;gap:12px;align-items:center}
  .lead p{font-size:14px}
  .lead .btn{white-space:nowrap;font-size:13px;padding:11px 15px}

  .share-row{display:flex;gap:9px}
  .share-row>*{flex:1}
  .share-note{font-family:var(--mono);font-size:11px;color:var(--mint-soft);font-weight:700;min-height:16px;margin-top:8px;text-align:center}
  .share-fallback{display:block;color:var(--milk-dim);line-height:1.7;font-weight:500}
  .again-row{margin-top:9px}
  .again-row .btn-quiet{width:100%}

  .vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .vs-card{background:var(--night-2);border:1.5px solid var(--line);border-radius:13px;padding:0;overflow:hidden;cursor:pointer;text-align:left;color:var(--milk);font-family:var(--body);transition:border-color .15s, transform .08s}
  .vs-card:hover{border-color:var(--glow)}
  .vs-card:active{transform:scale(.98)}
  .vs-card:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
  .vs-shot{height:82px;overflow:hidden}
  .vs-shot svg{display:block;width:100%;height:100%}
  .vs-body{padding:10px 11px 12px}
  .vs-town{font-family:var(--disp);font-size:14px}
  .vs-desc{font-size:11.5px;color:var(--milk-dim);margin-top:3px;line-height:1.4}
  .vs-price{font-family:var(--mono);font-weight:700;color:var(--glow);font-size:14px;margin-top:6px;min-height:19px}
  .vs-card.win{border-color:var(--door)}
  .vs-card.lose{border-color:var(--red);opacity:.85}
  .vs-status{font-family:var(--mono);font-size:12.5px;font-weight:700;margin-top:11px;min-height:18px}
  .g-streak{color:var(--glow)}

  .divider{display:flex;align-items:center;gap:12px;margin:26px 0 4px}
  .divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
  .divider span{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--milk-dim);text-transform:uppercase}

  .footer{margin-top:34px;text-align:center;font-size:11.5px;color:rgba(185,189,207,.55);line-height:1.75}
  .footer a{color:var(--milk-dim)}
  /* Enquiries sits under the licence text, separated so it reads as ours rather
     than as part of the Land Registry attribution. */
  .footer-contact{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
  .footer-contact a{color:var(--glow);text-decoration:none}
  .footer-contact a:hover{text-decoration:underline}
  .hidden{display:none !important}
  .shake{animation:shake .35s}
  @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
  @media (prefers-reduced-motion: reduce){.shake{animation:none}}
  @media (max-width:360px){ .app{padding:14px 12px 50px} .price{font-size:34px} }

  /* ---- v0.5 additions ---- */
  .where{margin-top:9px;font-size:13.5px;color:var(--milk-dim);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .where .ico{width:15px;height:15px}
  .where .pc{font-family:var(--mono);font-weight:700;color:var(--milk);background:var(--night-2);border-radius:6px;padding:2px 8px;font-size:12px}

  .map-wrap{margin-top:12px;border-radius:12px;overflow:hidden;border:1px solid var(--line);position:relative}
  #map{height:170px;background:var(--night-3);filter:saturate(.75) brightness(.92)}
  .map-note{
    position:absolute;left:8px;top:8px;z-index:500;pointer-events:none;
    font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    background:rgba(32,35,50,.86);color:var(--milk-dim);padding:3px 8px;border-radius:5px;
  }
  .leaflet-container{background:var(--night-3)}
  .leaflet-control-attribution{font-size:9px !important;background:rgba(32,35,50,.7) !important;color:#8d93a8 !important}
  .leaflet-control-attribution a{color:#a8adc0 !important}

  /* forgiving amount input: no fixed suffix, live echo instead */
  .pound::before{content:'£';position:absolute;left:14px;top:50%;transform:translateY(-50%);
    font-family:var(--mono);font-weight:700;color:var(--glow);font-size:18px;pointer-events:none}
  .pound::after{content:none}
  input[type=text]{padding:14px 14px 14px 32px;font-size:18px}
  .echo{
    min-height:20px;margin-top:7px;font-family:var(--mono);font-weight:700;font-size:14px;
    color:var(--door);letter-spacing:.02em;
  }
  .echo.warn{color:var(--red)}

  .try .dir{font-size:13px;color:var(--glow)}

  /* score */
  .score-card{text-align:left}
  .score-row{display:flex;align-items:baseline;gap:6px}
  .score-num{font-family:var(--mono);font-weight:700;font-size:44px;line-height:1;color:var(--glow)}
  .score-of{font-family:var(--mono);font-size:15px;color:var(--milk-dim)}
  .score-track{height:8px;border-radius:4px;background:rgba(245,241,232,.13);margin-top:11px;overflow:hidden}
  .score-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--glow));border-radius:4px;transition:width .8s cubic-bezier(.4,0,.2,1)}
  .score-detail{font-size:14px;margin-top:11px;line-height:1.55}
  .score-detail b{font-family:var(--mono);color:var(--milk)}
  .totals{font-size:12.5px;color:var(--milk-dim);margin-top:8px}
  .totals b{font-family:var(--mono);color:var(--glow)}

  .lockout{
    margin-top:16px;background:var(--night-2);border:1px solid var(--line);border-radius:13px;
    padding:16px;font-size:14.5px;line-height:1.6;
  }
  .lockout b{color:var(--glow);font-family:var(--mono)}

  /* gauntlet cards: neighbourhoods, no imagery needed */
  .vs-card{padding:14px 13px 13px;min-height:104px;display:flex;flex-direction:column;justify-content:space-between}
  .vs-hood{font-family:var(--disp);font-size:16px;line-height:1.15}
  .vs-desc{font-size:12px;color:var(--milk-dim);margin-top:5px;line-height:1.45}
  .vs-dim{opacity:.65;font-family:var(--mono);font-size:11px}
  .vs-price{font-family:var(--mono);font-weight:700;color:var(--glow);font-size:15px;margin-top:8px;min-height:20px}

  .lead .btn{white-space:nowrap;font-size:13px;padding:11px 15px;text-decoration:none;display:inline-block}

  .comp-note{color:var(--milk-dim);opacity:.75;font-size:12px}

  /* map controls, restyled to match rather than Leaflet's default white */
  .leaflet-control-zoom a{
    background:rgba(32,35,50,.9) !important;color:var(--milk) !important;
    border-color:rgba(245,241,232,.18) !important;font-weight:600;
  }
  .leaflet-control-zoom a:hover{background:var(--night-3) !important;color:var(--glow) !important}
  .leaflet-touch .leaflet-control-zoom{border:0 !important}
  .leaflet-bar{box-shadow:0 1px 6px rgba(0,0,0,.4) !important}

  .vs-spec{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--milk);margin-top:6px;flex-wrap:wrap}
  .vs-spec b{font-family:var(--mono);font-weight:700;color:var(--glow)}
  .vs-spec .ico{width:14px;height:14px;opacity:.85;color:var(--glow)}
  .vs-sep{color:var(--milk-dim);opacity:.5;margin:0 4px}

  .gauntlet-note{font-size:11.5px;color:var(--milk-dim);opacity:.7;margin-top:12px;line-height:1.6}