@font-face{font-family:'Fredoka';font-style:normal;font-weight:500 700;font-display:swap;src:url(../assets/fonts/fredoka-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500 700;font-display:swap;src:url(../assets/fonts/fredoka-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/nunito-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/nunito-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

#app{
  --green:#2faf3f; --green-d:#1d7a2a; --forest:#16301a;
  --lime:#b6f25c; --orange:#ff8a3d; --pink:#ff6bab; --sky:#5ec8ff;
  --sun:#ffc734; --cream:#fff7e8; --ink:#16301a;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}
#app, #app *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#app,#app{margin:0;padding:0;height:100%;background:#0f3d1a;color:#fff;
  font-family:Nunito,system-ui,sans-serif;overflow:hidden}
#app h1,#app h2,#app h3,#app .kicker,#app .play-hook,#app .end-score,#app .reveal-result,#app .round-label{
  font-family:Fredoka,Nunito,system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
#app img{max-width:100%;height:auto;display:block}
#app button{font:inherit}

#app{height:100%;width:100%;position:relative;overflow:hidden}
#app .bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 8% 0%, #3ecf55 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 8%, #ffb14a 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 85% 100%, #5ec8ff 0%, transparent 55%),
    linear-gradient(165deg, #1a6b2e 0%, #23963a 42%, #147a8a 100%)}
#app .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.32}
#app .b1{width:240px;height:240px;background:var(--lime);top:-50px;left:-60px}
#app .b2{width:200px;height:200px;background:var(--pink);bottom:8%;right:-50px}
#app .b3{width:160px;height:160px;background:var(--sky);top:42%;left:28%;opacity:.2}
#app .dots{position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.22) 1.4px, transparent 1.6px);
  background-size:22px 22px;opacity:.32}

#app .view{
  position:absolute;inset:0;z-index:1;
  display:none;flex-direction:column;
  padding:calc(12px + var(--safe-t)) calc(16px + var(--safe-r)) calc(62px + var(--safe-b)) calc(16px + var(--safe-l));
  overflow:hidden}
#app .view.active{display:flex}

#app .kicker{margin:0 0 6px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#ffe27a}
#app h1{margin:0 0 8px;font-size:clamp(2rem,9vw,3.4rem);line-height:1.02;
  text-shadow:0 3px 0 rgba(0,0,0,.18)}
#app h2{margin:0 0 8px;font-size:clamp(1.35rem,5vw,2rem);line-height:1.1;
  text-shadow:0 2px 0 rgba(0,0,0,.16)}
#app .lead{margin:0 0 14px;font-size:1.05rem;font-weight:700;color:#eaffea;max-width:26rem}
#app .fine{margin:12px 0 0;font-size:.78rem;opacity:.85;font-weight:700;color:#eaffea}

/* Home */
#app #view-home{flex-direction:column}
#app .home-copy{position:relative;z-index:2;flex:0 0 auto}
#app .home-stats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
#app .pill{display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.22);border:2px solid rgba(255,255,255,.35);
  border-radius:999px;padding:6px 12px;font-weight:800;font-size:.9rem}
#app .home-actions{display:flex;flex-direction:column;gap:10px;max-width:22rem}
#app .home-hero{position:relative;flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center}
#app .home-hero img{height:100%;width:auto;max-width:100%;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.28));
  object-fit:contain;object-position:bottom}

/* Buttons */
#app .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:Fredoka,Nunito,system-ui,sans-serif;font-weight:700;
  font-size:1.05rem;line-height:1.1;padding:14px 22px;min-height:52px;
  border:0;border-radius:999px;cursor:pointer;color:#16301a;
  background:#fff;box-shadow:0 6px 0 rgba(0,0,0,.18);
  transition:transform .12s ease}
#app .btn:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.18)}
#app .btn.sun{background:var(--sun);color:#3a2400}
#app .btn.ghost{background:rgba(255,255,255,.16);color:#fff;border:2px solid rgba(255,255,255,.55);box-shadow:none}
#app .btn:disabled{opacity:.45;cursor:default;transform:none}

/* Play */
#app .play-bar{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;padding-right:52px}
#app .round-label,#app .star-total{margin:0;font-size:1rem;font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.2)}
#app .play-hook{margin:6px 0 8px;text-align:center;font-size:clamp(1.15rem,4.5vw,1.55rem);text-shadow:0 2px 0 rgba(0,0,0,.18)}
#app .flag-row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex:1 1 auto;min-height:0}
#app .flag-card{flex:1 1 0;width:min(100%,520px);max-width:100%;min-height:0;display:flex;align-items:center;justify-content:center}
#app .flag-card img{
  width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  border-radius:14px;box-shadow:0 8px 18px rgba(0,0,0,.28),0 0 0 3px rgba(255,255,255,.18);
  background:rgba(0,0,0,.12)}
#app .vs{flex:0 0 auto;font-family:Fredoka,sans-serif;font-size:1.5rem;font-weight:700;
  color:var(--sun);text-shadow:0 2px 0 rgba(0,0,0,.25);line-height:1}
#app .play-side{display:flex;flex-direction:column;flex-shrink:0;width:100%}
#app .clue-box{margin:8px 0 6px;min-height:0;flex-shrink:0}
#app .clue{margin:0 0 6px;background:rgba(0,0,0,.22);border-radius:16px;padding:10px 14px;
  font-weight:800;font-size:.98rem;line-height:1.3;
  border:2px solid rgba(255,255,255,.2)}
#app .clue i{font-style:normal;color:#ffe27a;margin-right:6px}
#app #btn-more{align-self:center;margin-bottom:8px;min-height:44px;padding:8px 18px}
#app .opts{display:flex;flex-direction:column;gap:10px;margin-top:8px;flex-shrink:0}
#app .opt{
  display:flex;align-items:center;gap:12px;width:100%;
  text-align:left;padding:10px 14px;min-height:64px;border-radius:20px;
  background:#fff;color:#16301a;border:0;cursor:pointer;
  box-shadow:0 5px 0 rgba(0,0,0,.16);font-family:Fredoka,Nunito,sans-serif;
  font-weight:700;font-size:1.15rem}
#app .opt img{width:64px;height:42px;object-fit:contain;border-radius:6px;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(22,48,26,.12)}
#app .opt.ok{background:#c8f3a3}
#app .opt.no{background:#ffd0d0}
#app .opt:disabled{cursor:default}

/* Reveal */
#app #view-reveal{align-items:center}
#app .reveal-art{position:relative;flex:1;min-height:0;max-height:100%;width:100%;display:flex;
  align-items:flex-end;justify-content:center;overflow:hidden}
#app #reveal-char{height:100%;width:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.28))}
#app #reveal-flag{position:absolute;top:4%;left:4%;width:min(32vw,160px);height:auto;
  border-radius:10px;box-shadow:0 6px 14px rgba(0,0,0,.3),0 0 0 3px rgba(255,255,255,.25);z-index:2}
#app .reveal-copy{position:relative;z-index:2;width:100%;text-align:center;flex-shrink:0;padding-top:4px}
#app .reveal-result{margin:0;font-size:1.35rem;color:#ffe27a;text-shadow:0 2px 0 rgba(0,0,0,.2)}
#app .reveal-fact{margin:0 0 8px;font-weight:700;color:#eaffea}
#app .reveal-stars{margin:0 0 10px;font-size:1.2rem;font-weight:800}
#app #view-reveal #btn-next{min-width:12rem;margin:0 auto}

/* End */
#app #view-end{align-items:stretch}
#app .end-hero{order:2;display:flex;flex:1 1 24%;min-height:90px;max-height:none;
  align-items:flex-end;justify-content:center}
#app .end-hero img{height:100%;width:auto;max-width:90%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}
#app .end-copy{order:1;position:relative;z-index:2;flex:0 1 auto;min-height:0;
  display:flex;flex-direction:column;align-items:center;text-align:center}
#app .end-score{margin:0;font-size:clamp(2.2rem,12vw,3.6rem);line-height:1;color:#ffe27a;
  text-shadow:0 3px 0 rgba(0,0,0,.2)}
#app .end-meta{margin:0 0 8px;font-weight:800;color:#eaffea}
#app #view-end h2{margin:2px 0 6px}
#app .result-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;
  margin:0 0 10px;font-size:1.15rem;font-weight:800;letter-spacing:.08em}
#app .end-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(100%,22rem)}
#app .end-actions .btn{width:100%;min-height:48px;padding:10px 12px}
#app .toast{min-height:1.2em;margin:8px 0 0;font-weight:800;color:#ffe27a}

#app .corner-logo{
  position:absolute;z-index:5;pointer-events:none;
  right:calc(10px + var(--safe-r));
  bottom:calc(8px + var(--safe-b));
  width:auto;height:36px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}

#app .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Phone landscape */
@media (orientation:landscape) and (max-height:500px){
  #app .view{padding:calc(8px + var(--safe-t)) calc(16px + var(--safe-r)) calc(8px + var(--safe-b)) calc(16px + var(--safe-l));
    flex-direction:row;align-items:stretch;gap:12px}
  #app #view-home{flex-direction:row}
  #app .home-copy{flex:1 1 54%;display:flex;flex-direction:column;justify-content:center}
  #app .home-hero{flex:1 1 46%}
  #app .home-hero img{height:100%;max-width:100%}
  #app h1{font-size:clamp(1.6rem,6vw,2.4rem)}
  #app .home-actions{flex-direction:row;flex-wrap:wrap;max-width:none}
  #app .home-actions .btn{flex:1 1 10rem}
  #app .lead{margin-bottom:8px}
  #app #view-play{flex-wrap:wrap;flex-direction:row}
  #app .play-bar{width:100%;flex-basis:100%}
  #app .play-hook{width:100%;flex-basis:100%;margin:0 0 4px;font-size:1.15rem}
  #app .flag-row{flex-direction:row;min-height:0;flex:1 1 50%;max-width:54%;align-self:stretch}
  #app .flag-card{width:auto;max-width:48%;flex:1 1 0;height:auto}
  #app .flag-card img{max-height:70vh;width:100%;height:auto}
  #app .vs{font-size:1.8rem}
  #app .play-side{width:44%;margin-left:auto;align-self:stretch;justify-content:center}
  #app .clue-box{margin:0 0 8px;width:100%}
  #app #btn-more{align-self:center}
  #app .opts{width:100%;margin:8px 0 0}
  #app .opt{min-height:52px;font-size:1rem}
  #app .opt img{width:52px;height:34px}
  #app #view-reveal{flex-direction:row;align-items:stretch;min-height:0}
  #app .reveal-art{flex:1 1 48%;max-height:100%;overflow:hidden;align-self:stretch}
  #app .reveal-copy{flex:1 1 48%;text-align:left;display:flex;flex-direction:column;justify-content:center}
  #app #reveal-flag{position:absolute;top:8px;left:8px;width:min(18vw,110px);margin:0;z-index:2}
  #app #view-end{flex-direction:row}
  #app .end-hero{order:0;flex:0 0 34%;max-height:none;min-height:0;align-items:flex-end}
  #app .end-hero img{height:100%;width:auto;object-fit:contain;object-position:bottom;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.25))}
  #app .end-copy{order:0;flex:1;overflow:auto;justify-content:center}
  #app .end-score{font-size:2.6rem}
  #app .end-actions{flex-direction:row;flex-wrap:wrap;width:100%}
  #app .end-actions .btn{flex:1 1 9rem;min-height:44px;padding:10px 14px}
  #app .corner-logo{height:28px}
  #app .b1,#app .b2,#app .b3{transform:scale(.7)}
}

/* Tablet */
@media (min-width:700px) and (min-height:600px){
  #app .view{padding:calc(18px + var(--safe-t)) calc(28px + var(--safe-r)) calc(64px + var(--safe-b)) calc(28px + var(--safe-l))}
  #app #view-home{flex-direction:row;align-items:stretch}
  #app .home-copy{flex:1;display:flex;flex-direction:column;justify-content:center;padding-right:12px}
  #app .home-hero{flex:1}
  #app .home-hero img{height:min(78vh,680px)}
  #app h1{font-size:3.6rem}
  #app .home-actions{max-width:26rem}
  #app #view-play.active{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto minmax(0,1fr);align-items:stretch;gap:8px 16px}
  #app .play-bar{grid-column:1 / -1}
  #app .play-hook{grid-column:1 / -1;margin:0}
  #app .flag-row{grid-column:1;grid-row:3;flex-direction:column;flex:unset;max-width:none;width:auto;min-height:0;align-self:stretch}
  #app .flag-card{width:100%;max-width:100%;min-height:0}
  #app .flag-card img{max-height:100%;max-width:100%;width:auto;height:auto}
  #app .play-side{grid-column:2;grid-row:3;width:auto;max-width:none;align-self:stretch;justify-content:center;padding-left:8px}
  #app .clue-box{width:100%;margin:0 0 10px}
  #app #btn-more{align-self:center}
  #app .opts{flex-direction:column;width:100%;margin:10px 0 0}
  #app .opt{flex:0 0 auto}
  #app .corner-logo{height:44px}
  #app #view-end{flex-direction:row}
  #app .end-hero{order:0;display:flex;flex:1 1 46%;max-height:none;min-height:0;align-items:flex-end;justify-content:center}
  #app .end-hero img{height:100%;max-width:100%;width:auto;object-fit:contain;object-position:bottom;
    filter:drop-shadow(0 12px 20px rgba(0,0,0,.28))}
  #app .end-copy{order:0;flex:1 1 54%;justify-content:center}
  #app .end-actions{width:min(100%,26rem)}
  #app .home-copy{justify-content:center}
  #app .home-hero img{height:100%}
}

@media (prefers-reduced-motion:reduce){
  #app .btn,#app .opt{transition:none}
}

/* Mute */
#app .mute-btn{
  position:absolute;z-index:8;
  top:calc(8px + var(--safe-t));right:calc(10px + var(--safe-r));
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.32);color:#fff;font-size:1.2rem;
  border:2px solid rgba(255,255,255,.4);
  box-shadow:0 3px 0 rgba(0,0,0,.18)}
#app .mute-btn:active{transform:translateY(2px)}

/* Home 2-col actions */
#app .home-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:26rem}
#app .home-actions .btn{width:100%;min-height:48px;padding:12px 14px;font-size:1rem}
#app .home-actions .span-2{grid-column:1 / -1}

/* Play variants */
#app #view-play.mode-hard .clue-box,
#app #view-play.mode-hard #btn-more,
#app #view-play.mode-hard #btn-hello-clue,
#app #view-play.mode-speed .clue-box,
#app #view-play.mode-speed #btn-more,
#app #view-play.mode-speed #btn-hello-clue{display:none}
#app #view-play.mode-hard .flag-row,
#app #view-play.mode-speed .flag-row{flex:1 1 auto}
#app #view-play.mode-hard .flag-card{width:min(100%,560px)}
#app .opts.four{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#app .opts.four .opt{min-height:56px;font-size:1rem;padding:8px 10px}
#app .opts.four .opt img{width:48px;height:32px}
#app #btn-hello-clue{align-self:center;margin-bottom:8px;min-height:44px;padding:8px 18px}
#app .timer-urgent{color:#ffe27a}
#app .play-bar .timer{font-variant-numeric:tabular-nums}

/* Reveal */
#app .reveal-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
#app .reveal-fact{max-height:26vh;overflow:auto;padding-right:4px}
#app #btn-hello-reveal{min-height:44px}
#app #btn-hello-reveal[hidden],#app #btn-hello-clue[hidden]{display:none !important}

/* New badges on end screen */
#app .new-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 10px}
#app .new-badges button{background:transparent;border:0;padding:0;cursor:pointer}
#app .new-badges img{width:72px;height:72px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}

/* Map */
#app #view-map,#app #view-badges{overflow:hidden}
#app .sub-bar{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-bottom:8px;padding-right:52px}
#app .sub-bar h2{margin:0;font-size:1.25rem}
#app .sub-progress{margin:0;font-weight:800;color:#ffe27a}
#app .sub-bar .btn{min-height:40px;padding:8px 14px}
#app .zoom-btns{display:flex;gap:6px;margin-left:auto}
#app .zoom-btns .btn{min-width:40px;min-height:40px;padding:0;font-size:1.3rem}
#app .map-scroll{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
  touch-action:manipulation;
  border-radius:16px;background:#0e4a4c;border:2px solid rgba(255,255,255,.18)}
#app .map-stage{position:relative;flex:0 0 auto;box-sizing:content-box}
#app .map-inner{position:relative;width:100%;height:100%;overflow:visible}
#app .map-img{width:100%;height:100%;display:block;pointer-events:none;user-select:none;object-fit:fill}
#app .map-pins{position:absolute;inset:0;overflow:visible;pointer-events:none}
#app .map-pin,#app .map-cluster{pointer-events:auto}
#app .map-pin{
  position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;
  border:0;padding:0;border-radius:50%;cursor:pointer;
  background:#ffe27a;box-shadow:0 0 0 2px #16301a,0 2px 6px rgba(0,0,0,.4);
  transform:translate(0,0);z-index:1}
#app .map-pin.found{width:24px;height:24px;margin:-12px 0 0 -12px;background:#fff;overflow:hidden;
  box-shadow:0 0 0 2px #ffe27a,0 3px 8px rgba(0,0,0,.4);z-index:2}
#app .map-pin.found img{width:100%;height:100%;object-fit:contain;object-position:center 20%;
  background:linear-gradient(#c8f3a3,#fff7e8)}
#app .map-pin.place-pin{box-shadow:0 0 0 2px #5ec8ff,0 2px 6px rgba(0,0,0,.4)}
#app .map-cluster{
  position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;
  border:0;padding:0;border-radius:50%;cursor:pointer;z-index:3;
  background:#ffe27a;color:#16301a;
  font-family:Fredoka,Nunito,sans-serif;font-weight:700;font-size:.8rem;line-height:1;
  box-shadow:0 0 0 2px #16301a,0 3px 8px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center}
#app .map-cluster.has-found{background:#fff;box-shadow:0 0 0 2px #ffe27a,0 3px 8px rgba(0,0,0,.45)}
#app .map-note{margin:8px 0 0;font-size:.75rem;font-weight:700;color:#eaffea;opacity:.9;flex-shrink:0}
#app .map-tip{
  flex-shrink:0;margin-top:8px;background:rgba(0,0,0,.28);
  border:2px solid rgba(255,255,255,.25);border-radius:16px;padding:10px 14px}
#app .map-tip h3{margin:0 0 2px;font-size:1.05rem}
#app .map-tip p{margin:0;font-weight:700;color:#eaffea}

/* Badges */
#app .badge-grid{flex:1;min-height:0;overflow:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:4px 2px 56px}
#app .badge-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:rgba(0,0,0,.22);border:2px solid rgba(255,255,255,.2);
  border-radius:20px;padding:10px 8px 12px;cursor:pointer;color:#fff;
  font-family:Fredoka,Nunito,sans-serif;font-weight:700;text-align:center}
#app .badge-card img{width:110px;height:110px}
#app .badge-card.locked{opacity:.45;filter:grayscale(.8);cursor:default}
#app .badge-card .badge-name{font-size:.9rem;line-height:1.15}
#app .badge-card .badge-how{font-family:Nunito,sans-serif;font-size:.72rem;font-weight:700;color:#eaffea;opacity:.9}

@media (orientation:landscape) and (max-height:500px){
  #app .home-actions{grid-template-columns:1fr 1fr 1fr;max-width:none}
  #app .mute-btn{width:38px;height:38px;font-size:1rem}
  #app .opts.four{grid-template-columns:1fr 1fr}
  #app .reveal-fact{max-height:40vh}
  #app #view-map,#app #view-badges{flex-direction:column}
  #app .map-scroll{flex:1}
  #app .map-note{padding-right:9rem}
  #app .badge-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  #app .sub-bar h2{font-size:1.1rem}
}
@media (min-width:700px) and (min-height:600px){
  #app .home-actions{max-width:28rem}
  #app .badge-grid{grid-template-columns:repeat(4,1fr)}
  #app .reveal-fact{max-height:28vh}
  #app .map-pin{width:14px;height:14px;margin:-7px 0 0 -7px}
  #app .map-pin.found{width:28px;height:28px;margin:-14px 0 0 -14px}
  #app .map-cluster{width:32px;height:32px;margin:-16px 0 0 -16px;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  #app .mute-btn{transition:none}
}