/* Everyone Home Safe — styles */
html,body{margin:0;padding:0;background:#110e09;color:#f3ede1}
#root{min-height:100vh}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
    .ehs{ --ink:#16130e; --ink2:#211c15; --line:#3a3026; --paper:#f3ede1; --muted:#a99b86;
      --green:#5fb37a; --amber:#e0a23c; --red:#e36055; --slate:#6c6457; --gold:#d8a64a;
      font-family:'Hanken Grotesk',sans-serif; color:var(--paper); min-height:100vh; width:100%;
      background: radial-gradient(120% 80% at 50% -10%, #2a2218 0%, rgba(42,34,24,0) 55%), linear-gradient(180deg,#1a160f 0%, #110e09 100%);
      padding:18px 16px 40px; display:flex; flex-direction:column; align-items:center; }
    .wrap{width:100%; max-width:460px}
    .disp{font-family:'Bricolage Grotesque',sans-serif; line-height:1.02; letter-spacing:-0.01em}
    .mono{font-family:'IBM Plex Mono',monospace}
    .card{background:linear-gradient(180deg,var(--ink2),#1b170f); border:1px solid var(--line); border-radius:18px}
    .btn{font-family:'Hanken Grotesk',sans-serif; font-weight:700; border:none; cursor:pointer; border-radius:14px; transition:transform .12s ease, filter .2s ease}
    .btn:active{transform:scale(.97)}
    .gold{background:linear-gradient(180deg,#e7b85a,#cf9633); color:#241a07}
    .ghost{background:transparent; border:1px solid var(--line); color:var(--paper)}
    .pulse{animation:pulse 1.6s ease-out infinite}
    @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,179,122,.5)}70%{box-shadow:0 0 0 10px rgba(95,179,122,0)}100%{box-shadow:0 0 0 0 rgba(95,179,122,0)}}
    .alarm{animation:alarm .8s ease-in-out infinite}
    @keyframes alarm{0%,100%{box-shadow:0 0 0 0 rgba(227,96,85,.55)}50%{box-shadow:0 0 0 12px rgba(227,96,85,0)}}
    .rise{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
    @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
    .bars{display:flex; gap:3px; align-items:flex-end; height:16px}
    .bars i{width:3px; background:var(--gold); border-radius:2px; animation:bar 1s ease-in-out infinite}
    @keyframes bar{0%,100%{height:4px}50%{height:16px}}
    .toast{position:fixed; left:16px; right:16px; bottom:20px; max-width:420px; margin:0 auto; z-index:60}
    .toastIn{animation:toastIn .4s cubic-bezier(.2,.8,.2,1) both}
    @keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

    /* ---- town map (desktop only) ---- */
    .townmap{display:none}
    .mapStage{position:relative; overflow:hidden; padding:0}
    .dest{position:absolute; width:9px; height:9px; border-radius:50%; background:#3a3327; transform:translate(-50%,-50%); z-index:1}
    .pin{position:absolute; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%;
      display:grid; place-items:center; font-size:11px; font-weight:800; font-family:'Hanken Grotesk',sans-serif;
      border:2px solid rgba(0,0,0,.35); box-shadow:0 2px 6px rgba(0,0,0,.5);
      transition:left .9s ease, top .9s ease, background .3s ease; z-index:2}
    .pin.on{background:linear-gradient(180deg,#e7b85a,#cf9633); color:#241a07}
    .pin.off{background:#3b352b; color:var(--muted); border-color:#4a4234}
    .pin.alarm{background:var(--red); color:#fff; border-color:rgba(255,255,255,.4); animation:mappulse .8s ease-in-out infinite; z-index:3}
    @keyframes mappulse{0%,100%{box-shadow:0 0 0 0 rgba(227,96,85,.6)}50%{box-shadow:0 0 0 9px rgba(227,96,85,0)}}
    .maplegend{display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:12px; color:var(--muted)}
    .maplegend span{display:flex; align-items:center; gap:6px}
    .maplegend .dot{width:12px; height:12px; border-radius:50%; display:inline-block; flex-shrink:0}
    .maplegend .dot.on{background:linear-gradient(180deg,#e7b85a,#cf9633)}
    .maplegend .dot.off{background:#3b352b; border:1px solid #4a4234}
    .maplegend .dot.alarm{background:var(--red)}

    /* ---- desktop scaling: bigger & readable for a group ---- */
    .sceneBanner{display:none}
    @media (min-width:1024px){
      .wrap{zoom:1.2; max-width:520px}
      .wrapShift{max-width:760px}
      .townmap{display:block}
      .modalCard{zoom:1.15}
      .toast .card{zoom:1.1}
      .sceneBanner{display:block; width:100%; height:184px; object-fit:cover; object-position:center 30%;
        border-radius:14px; border:1px solid var(--line); margin-top:12px}
    }