/* assets/css/bit_shift.css - Bit-Shift page styles */
[hidden] { display: none !important; }
:root { --bs-bg: #0b1220; --bs-panel: #111a2e; --bs-line: #22314f; --bs-ink: #e6edf7; --bs-dim: #8ea0bd; --bs-acc: #22d3ee; }
* { box-sizing: border-box; }
html, body.bs-body { margin: 0; background: var(--bs-bg); color: var(--bs-ink); font-family: 'Quicksand', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
body.bs-body { overscroll-behavior: none; }
.bs-page { display: flex; flex-direction: column; height: calc(100dvh - 60px); min-height: 420px; max-width: 760px; margin: 0 auto; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px; }
.bs-top { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.bs-hud { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.bs-box { background: var(--bs-panel); border: 1px solid var(--bs-line); border-radius: 10px; padding: 6px 10px; min-width: 0; }
.bs-box.bs-mid { text-align: center; } .bs-box.bs-r { text-align: right; }
.bs-lbl { display: block; font-size: 10px; letter-spacing: .12em; color: var(--bs-dim); white-space: nowrap; }
.bs-box b { font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bs-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bs-modes { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; }
.bs-modes button { background: var(--bs-panel); color: var(--bs-dim); border: 1px solid var(--bs-line); border-radius: 999px; padding: 6px 12px; font: 700 13px 'Quicksand', sans-serif; white-space: nowrap; cursor: pointer; }
.bs-modes button.on { color: #04222a; background: var(--bs-acc); border-color: var(--bs-acc); }
.bs-tools { display: flex; gap: 6px; }
#bsPauseBtn { width: auto; min-width: 40px; padding: 0 10px; font: 700 12px 'Quicksand', sans-serif; white-space: nowrap; }
.bs-ico { background: var(--bs-panel); color: var(--bs-ink); border: 1px solid var(--bs-line); border-radius: 10px; width: 40px; height: 34px; font-size: 15px; cursor: pointer; }
.bs-stage { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#gameCanvas { display: block; touch-action: none; border-radius: 12px; background: #0e1627; user-select: none; -webkit-user-select: none; }
.bs-ov { position: absolute; inset: 0; background: rgba(8,13,24,.96); display: flex; overflow-y: auto; z-index: 5; padding: 12px; }
.bs-ov.bs-clear { background: rgba(8,13,24,.55); pointer-events: none; align-items: center; justify-content: center; }
.bs-card { margin: auto; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.bs-card.bs-wide { max-width: 420px; text-align: left; }
.bs-card h2 { margin: 0 0 4px; text-align: center; font-size: 26px; }
.bs-btn { background: var(--bs-panel); color: var(--bs-ink); border: 1px solid var(--bs-line); border-radius: 12px; padding: 12px 16px; font: 700 15px 'Quicksand', sans-serif; cursor: pointer; }
.bs-btn.primary { background: var(--bs-acc); color: #04222a; border-color: var(--bs-acc); }
.bs-btn.sm { padding: 6px 12px; font-size: 13px; min-width: 64px; }
.bs-btn:focus-visible, .bs-ico:focus-visible, .bs-modes button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bs-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; }
.bs-sub { font-size: 11px; letter-spacing: .12em; color: var(--bs-dim); margin-top: 4px; }
.bs-skins { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-skin { background: var(--bs-panel); color: var(--bs-ink); border: 1px solid var(--bs-line); border-radius: 999px; padding: 6px 12px; font: 700 12px 'Quicksand', sans-serif; white-space: nowrap; cursor: pointer; }
.bs-skin.on { border-color: var(--bs-acc); color: var(--bs-acc); }
.bs-skin:disabled { opacity: .55; cursor: not-allowed; }
#trophy-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--bs-line); border-radius: 10px; padding: 8px; font-size: 13px; }
.bs-overscore { font-size: 44px; font-weight: 700; color: var(--bs-acc); font-variant-numeric: tabular-nums; }
.bs-countnum { font-size: 96px; font-weight: 700; color: #fff; }
.bs-toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: #000c; color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; z-index: 9; max-width: 90%; text-align: center; }
body.bs-compact .bs-box b { font-size: 17px; }
body.bs-compact .bs-box { padding: 3px 8px; }
body.bs-compact .bs-page { gap: 4px; padding-top: 4px; }
@media (max-width: 360px) { .bs-modes button { padding: 6px 9px; font-size: 12px; } .bs-modes { gap: 4px; } .bs-box b { font-size: 19px; } }
@media (max-height: 460px) and (orientation: landscape) {
  .bs-page { flex-direction: row; max-width: none; min-height: 0; }
  .bs-top { order: 2; width: 210px; justify-content: flex-start; }
  .bs-hud { grid-template-columns: 1fr; gap: 4px; }
  .bs-box, .bs-box.bs-mid, .bs-box.bs-r { text-align: left; display: flex; justify-content: space-between; align-items: baseline; }
  .bs-bar { flex-direction: column; align-items: stretch; }
  .bs-modes { flex-wrap: wrap; }
  .bs-tools { justify-content: flex-end; }
  .bs-stage { order: 1; }
  .bs-card h2 { font-size: 20px; margin: 0; } .bs-btn { padding: 8px 12px; } .bs-card { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
/* bug reporter is menu-only on this page: hide the floating pill */
#beta-report-trigger { display: none !important; }