/* ===========================================================
   BHASKAR OS — shared enhancement layer
   ADDITIVE ONLY. Every page keeps its own inline <style> theme.
   Effects inherit --bos-hot / --bos-cool, which app.js reads
   from whatever palette the current page declares.
   =========================================================== */

:root { --bos-hot: #ff007f; --bos-cool: #00f2ff; }

/* ---------- pokeball rain (local asset, was remote) ---------- */
#bos-rain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }
.bos-ball {
  position: absolute; top: -60px; display: block;
  background: url("../assets/images/pokeball.png") no-repeat center / contain;
  animation: bos-drop .62s cubic-bezier(.55,.06,.68,.19) forwards;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.35));
}
@keyframes bos-drop { to { top: 112vh; transform: rotate(720deg); } }

/* ---------- wild encounter ---------- */
.bos-encounter {
  position: fixed; left: 50%; bottom: 26px; z-index: 10000;
  transform: translate(-50%, 160%); opacity: 0;
  transition: transform .4s cubic-bezier(.2,.9,.3,1.5), opacity .3s;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(460px, 92vw); padding: 16px 20px;
  font-family: "Press Start 2P", monospace;
  background: #0d0620; color: #fff;
  border: 4px solid var(--bos-hot);
  box-shadow: 8px 8px 0 rgba(0,0,0,.6), 0 0 26px var(--bos-hot);
}
.bos-encounter[data-show="true"] { transform: translate(-50%, 0); opacity: 1; }
.bos-encounter b { font-size: 10px; color: var(--bos-hot); line-height: 1.7; }
.bos-encounter span { font-size: 8px; line-height: 1.9; color: #d9cff0; }

/* ---------- HUD ---------- */
#bos-hud {
  position: fixed; left: 10px; bottom: 10px; z-index: 600;
  display: flex; gap: 5px; opacity: .3; transition: opacity .25s;
}
#bos-hud:hover, #bos-hud:focus-within { opacity: 1; }
#bos-hud button {
  font-family: "Press Start 2P", monospace; font-size: 7px; padding: 7px 8px; cursor: pointer;
  color: #fff; background: rgba(8,3,20,.88);
  border: 2px solid var(--bos-hot);
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
#bos-hud button:hover { background: var(--bos-hot); color: #08031a; transform: translate(-1px,-1px); }
#bos-hud button:focus-visible { outline: 3px solid var(--bos-cool); outline-offset: 2px; }

/* ---------- shiny mode (konami) ---------- */
.bos-shiny { animation: bos-hue 6s linear infinite; }
@keyframes bos-hue { to { filter: hue-rotate(360deg); } }

/* ---------- focus visibility (was missing sitewide) ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--bos-cool);
  outline-offset: 3px;
}

/* ---------- skip link ---------- */
.bos-skip {
  position: absolute; left: 10px; top: -60px; z-index: 10001;
  font-family: "Press Start 2P", monospace; font-size: 9px;
  padding: 10px 14px; background: var(--bos-hot); color: #fff;
  text-decoration: none; transition: top .2s;
}
.bos-skip:focus { top: 10px; }

/* ---------- BUG FIX: fixed overlays swallowed content on phones ---------- */
@media (max-width: 760px) {
  .legend-side, .controls, .sprite-container {
    position: static !important;
    margin: 14px auto !important;
    width: fit-content !important;
    max-width: 94vw;
  }
  #bos-hud { left: 8px; bottom: 8px; }
  #bos-hud button { font-size: 6px; padding: 7px 7px; }
  .bos-encounter { bottom: 58px; padding: 13px 15px; }
  .bos-encounter b { font-size: 9px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  #bos-rain { display: none; }
}

/* ---------- print ---------- */
@media print {
  #bos-hud, #bos-rain, .bos-encounter, .bos-skip, nav, .legend-side, .controls { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}