/* The Google layer, one look for every theme that loads it: Street View, the guess map in the bottom-right
   corner with its ↖ / ↘ size buttons, and the maps on the review page. Values are the arcade theme's, written
   out so a theme's own tokens cannot change them. Load it after the theme's style.css and before touch.css.
   Themes style everything around these (timer, compass, submit row, HUD) but never these. */
:root {
  /* map drawings (own pin, lines, battle royale country shading) read this before --accent (ui.js accent()) */
  --map-accent: #E23BFF;
}

#street-view { position: absolute; inset: 0; cursor: crosshair; }
#street-view * { cursor: crosshair; }
/* blink rounds: a cover over Street View blocks every input; it turns black before and after the blink */
#game-screen.blink #street-view { isolation: isolate; }  /* the cover stays below the guess map */
#game-screen.blink #street-view::after { content: ''; position: absolute; inset: 0; z-index: 100000; cursor: default; }
#game-screen.blackout #street-view::after { background: #000; }

/* guess map: 4:3, widths in vw */
#guess-map-wrap {
  position: absolute; bottom: 24px; right: 24px; z-index: 20; --mw: 22;
  width: calc(var(--mw) * 1vw); height: min(calc(var(--mw) * 0.75vw), 88vh); opacity: .7;
  border: 2px solid rgba(36, 21, 71, .5); border-radius: 0; overflow: hidden; background: #0C0619;
  display: flex; flex-direction: column; transition: width .3s ease, height .3s ease, opacity .3s ease;
}
#guess-map-wrap.expanded { opacity: 1; }
#guess-map-box { flex: 1; position: relative; min-height: 0; }
#guess-map { position: absolute; inset: 0; }
#map-size-btns { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; gap: 4px; }
#map-size-btns button {
  width: 42px; height: 42px; border-radius: 4px; border: none; padding: 0; cursor: pointer;
  background: rgba(12, 6, 25, .84); color: #fff; font: 20px/1 Arial, sans-serif;
}
@media (max-width: 700px) {
  #guess-map-wrap { width: calc(100vw - 16px) !important; height: 42vh !important; right: 8px; bottom: 8px; opacity: 1; }
}

/* review: the location map and the replayed guess map sit in the corner of Street View, as in a round */
.rp-loc-map, .rp-map-wrap { border: 2px solid #0C0619; background: #0C0619; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.rp-stage.touch .rp-divider { background: rgba(255, 255, 255, .55); }