/* Study-break mini-game styles, shared by the modal on index.html and the
 * standalone /brainrot page. Every rule is scoped under .br-* so dropping this
 * into a page cannot collide with that page's own styles.
 *
 * The engine sizes the canvas from .br-stage's box, so a host only has to give
 * .br-root a height — the games rescale themselves to whatever they get.
 */

.br-root {
  --br-ink: #1a1a1a;
  --br-ink-3: #7a7a7a;
  --br-line: #e4e4e4;
  --br-accent: #2f6f4f;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  height: 100%;
  min-height: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--br-ink);
}

.br-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
  min-height: 1.6rem;
}

/* One row, always. In the 420px modal the three pills plus the score readout
   plus the close button exceed the bar, and wrapping put the picker on its own
   line; the pills shrink their padding instead so the row holds. */
.br-picker { display: flex; gap: 0.3rem; flex-wrap: nowrap; min-width: 0; }

.br-pick {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid var(--br-line);
  border-radius: 999px;
  background: #fff;
  color: var(--br-ink-3);
  cursor: pointer;
}
.br-pick:hover:not(:disabled) { color: var(--br-ink); border-color: var(--br-ink-3); }
.br-pick[aria-pressed="true"] {
  background: var(--br-accent);
  border-color: var(--br-accent);
  color: #fff;
}
.br-scores {
  font-size: 0.78rem;
  color: var(--br-ink-3);
  white-space: nowrap;
  /* Hugs the right edge (or the close button, when there is one) rather than
     floating mid-bar once a third flex item joins the row. */
  margin-left: auto;
}
.br-scores strong { color: var(--br-ink); font-variant-numeric: tabular-nums; }

.br-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--br-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  /* Touch-drag must not scroll or rubber-band the page while playing. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.br-stage canvas { display: block; width: 100%; height: 100%; }

/* Easy to reach with one thumb without adding another item to the already
   crowded mobile picker row. */
.br-pause {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--br-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.br-pause:hover { border-color: var(--br-ink-3); }

/* Title / game-over card, in DOM rather than on the canvas so the text stays
   crisp and needs no font-metrics work. */
.br-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
  padding: 1.1rem;
  background: rgba(255, 255, 255, 0.9);
}
.br-overlay h2 { margin: 0; font-size: 1.15rem; }
.br-overlay p { margin: 0; color: #4a4a4a; font-size: 0.85rem; line-height: 1.45; max-width: 30ch; }
.br-big { font-size: 2.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.br-newbest { color: var(--br-accent); font-weight: 600; font-size: 0.85rem; }

.br-cta {
  margin-top: 0.3rem;
  padding: 0.55rem 1.35rem;
  font: inherit;
  font-size: 0.92rem;
  color: #fff;
  background: var(--br-accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.br-cta:hover { filter: brightness(1.08); }

.br-hint { flex: 0 0 auto; font-size: 0.74rem; color: var(--br-ink-3); text-align: center; }

/* A flex item in .br-bar, NOT an absolutely-positioned overlay: floating it in
   the corner put it on top of the score readout, which lives in that same
   corner. As a sibling the bar reserves space for it and nothing overlaps. */
.br-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--br-ink-3);
  background: #fff;
  border: 1px solid var(--br-line);
  border-radius: 50%;
  cursor: pointer;
}
.br-close:hover { color: var(--br-ink); border-color: var(--br-ink-3); }

/* ---- Modal shell (index.html only; the standalone page lays itself out) ---- */

.br-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 25, 22, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.br-modal-backdrop[hidden] { display: none; }

.br-modal {
  position: relative;
  width: min(420px, 100%);
  /* Tall enough for the games to feel right, but deliberately not fullscreen:
     the notes stay visible around it, which is the point of the modal. */
  height: min(560px, 88vh);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  padding: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .br-pick, .br-cta, .br-pause, .br-close { transition: none; }
}