/* The game picker's own styles, on top of bunny-bear-shared/css/arcade.css. Sizes in theme.css. */

/* The panel is the map's ocean (user, 2026-09-29): the sea runs into it, so the map no longer sits
   in a box, and it's 25% bigger, reaching closer to the frame. */
.bb-panel {
  --panel-width: 734px;                     /* map 650 px wide (was 520) + frame + a thin margin */
  --panel-padding-x: calc(12px * var(--ui-scale));
  border-image-source: url('../assets/ui/panel-frame-ocean.png');   /* dev/make_ocean_frame.py */
}
.bb-panel .arcade-top, .bb-panel .arcade-foot { padding-inline: calc(18px * var(--ui-scale)); }

/* Title follows the blinking game; --chars (set by the page) keeps any name on one line. */
.fit-title { --chars: 16; font-size: min(var(--text-title), calc(96cqi / (var(--chars) * 1.04))); }

/* The arcade font has no ∞, so the browser borrows a much smaller one: size it to match the caps. */
.infinity { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 2em; line-height: 0; vertical-align: -0.12em; }

/* Tapping a continent twice (pick, then play) must never zoom the page on a phone. */
html { touch-action: manipulation; }

/* ---- music + SFX switches: top right, mirroring BACK. 44 px tap targets (Apple minimum) ---- */
.sound-toggles {
  position: fixed;
  top: var(--page-gutter);
  right: var(--page-gutter);
  z-index: 3;
  display: flex;
  gap: var(--gap-xs);
}
.sound-toggle {
  width: 44px;
  height: 44px;
  padding: 4px;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sound-toggle img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sound-toggle:active img { transform: scale(0.88); }   /* press state */
.sound-toggle:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; border-radius: 6px; }

/* ---- world map: Street Fighter-style stage picker ---- */
.world-map {
  position: relative;
  width: var(--map-width);
  margin: 0 auto var(--gap-lg);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.world-map img { display: block; width: 100%; height: auto; pointer-events: none; }
.world-map .continent {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: brightness(var(--map-glow))
    drop-shadow(var(--map-outline) 0 0 #fff) drop-shadow(calc(-1 * var(--map-outline)) 0 0 #fff)
    drop-shadow(0 var(--map-outline) 0 #fff) drop-shadow(0 calc(-1 * var(--map-outline)) 0 #fff);
}
/* on for half of --blink-ms, off for half */
.world-map .continent.picked { animation: map-blink var(--blink-ms) steps(1) infinite; }
@keyframes map-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
.world-map:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; }

/* ---- THATBUNNYBEAR.COM is the grass Kev's flower grows out of ---- */
.arcade-foot.has-flower { margin-top: calc(var(--gap-sm) + var(--flower-height)); }
.site-tag { position: relative; color: var(--matcha); }
.site-tag .flower {
  position: absolute;
  bottom: calc(100% - var(--flower-sink));
  left: calc(50% + var(--flower-x));
  height: var(--flower-height);
  width: auto;
  transform: translateX(-32%);   /* the stem is 32% in from the image's left edge (dev/prep_flower.py) */
  pointer-events: none;
}