/* ═══════════════════════════════════════════════════════════════════════════
   bhava-responsive.css — Global Mobile/Tablet Toolkit for Medhā Games
   Include ONCE per game, in <head>, AFTER your game's own CSS:
     <link rel="stylesheet" href="bhava-responsive.css">
   (or "../bhava-responsive.css" depending on your folder depth)

   TIER 1 (below): applies automatically to every game, no setup needed.
   TIER 2 (in bhava-responsive.js): opt-in per game via data-attributes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Safe defaults: no accidental double-tap zoom, no callout menus ──── */
html {
  touch-action: manipulation; /* kills the 300ms double-tap-to-zoom delay */
  -webkit-text-size-adjust: 100%;
}
* {
  -webkit-tap-highlight-color: transparent; /* removes grey flash on tap (Android) */
}
img, .drag-item, .cap-tile, [draggable="true"] {
  -webkit-touch-callout: none; /* stops the "save image" popup on long-press */
  -webkit-user-select: none;
  user-select: none;
}

/* ── 2. Safe-area padding for notches / home-indicator bars ─────────────── */
body {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ── 3. Minimum touch target size (WCAG: 44x44px minimum) ───────────────── */
/* Applies to common interactive elements without needing per-game classes */
button, a.cap-tile, .btn, [role="button"], input[type="checkbox"], input[type="radio"] {
  min-height: 44px;
  min-width: 44px;
}
/* Small icon-only buttons: keep visual size, pad the tap area instead */
.icon-btn, .bgnav-btn {
  position: relative;
}
.icon-btn::after, .bgnav-btn::after {
  content: '';
  position: absolute;
  inset: -6px; /* invisible 6px tap-padding on all sides */
}

/* ── 4. Responsive type scale — fonts shrink gracefully, never below floor ─ */
:root {
  --bhava-font-body:  clamp(14px, 2.6vw, 18px);
  --bhava-font-title: clamp(20px, 5vw, 36px);
  --bhava-font-label: clamp(11px, 2.2vw, 14px);
}
/* Opt-in classes — add these to your existing title/body elements if you
   want automatic scaling. Nothing is forced without the class. */
.bhava-text-body  { font-size: var(--bhava-font-body); }
.bhava-text-title { font-size: var(--bhava-font-title); }
.bhava-text-label { font-size: var(--bhava-font-label); }

/* ── 5. Prevent horizontal page overflow (the “half screen” bug root cause) */
html, body {
  max-width: 100vw;
  overflow-x: hidden; /* page itself never scrolls sideways */
}

/* ── 6b. Global layout controls ------------------------------------------ */
:root {
  --bhava-scrollbar-size: 8px;
  --bhava-palette-width: 270px;
  --bhava-diagnostics-width: 280px;
}

/* Games with a palette/workspace/diagnostics shell become user-resizable. */
.build-layout:has(.palette-panel):has(.diagnostics-panel) {
  grid-template-columns: var(--bhava-palette-width) minmax(0, 1fr) var(--bhava-diagnostics-width) !important;
}

.bhava-resize-handle {
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 12px;
  z-index: 20;
  cursor: col-resize;
  border: 0;
  background: transparent;
}

.bhava-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 5px;
  width: 2px;
  height: 44px;
  border-radius: 2px;
  background: rgba(255,255,255,.24);
  transform: translateY(-50%);
  transition: background .18s, height .18s;
}

.bhava-resize-handle:hover::after,
.bhava-resize-handle:focus-visible::after {
  height: 70px;
  background: var(--accent-1, #5ad1ff);
}

.palette-panel, .diagnostics-panel { position: relative; }
.palette-panel .bhava-resize-handle { right: -6px; }
.diagnostics-panel .bhava-resize-handle { left: -6px; }

html.bhava-resizing, html.bhava-resizing * { cursor: col-resize !important; user-select: none !important; }
html.bhava-resizing body { overflow: hidden; }

html, body, * {
  scrollbar-width: auto;
}
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar {
  width: var(--bhava-scrollbar-size);
  height: var(--bhava-scrollbar-size);
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.28);
  border-radius: calc(var(--bhava-scrollbar-size) / 2);
}
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, *::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05);
}

#bhava-layout-controls {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 10001;
  width: 218px;
  padding: 12px;
  display: grid;
  gap: 10px;
  color: var(--text-1, #eef3ff);
  background: rgba(15, 20, 38, .94);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
  backdrop-filter: blur(14px);
  font: 12px/1.3 system-ui, sans-serif;
}
#bhava-layout-controls[hidden] { display: none; }
#bhava-layout-controls .bhava-layout-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#bhava-layout-controls .bhava-layout-heading button { min-width:28px; min-height:28px; padding:3px 7px; border-radius:7px; }
#bhava-layout-controls label { display: grid; gap: 5px; color: var(--text-2, #9aa5c9); }
#bhava-layout-controls input[type="range"] { width: 100%; accent-color: var(--accent-1, #5ad1ff); }
#bhava-layout-controls output { float: right; color: var(--text-1, #eef3ff); }
#bhava-layout-controls button { cursor: pointer; }
#bhava-layout-toggle {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 10000;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: var(--text-1, #eef3ff);
  background: rgba(15, 20, 38, .92);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
@media (max-width: 720px) {
  #bhava-layout-toggle, #bhava-layout-controls { left: 10px; }
}
#bhava-layout-controls:not([hidden]) + #bhava-layout-toggle { display: none; }

@media (max-width: 1100px) {
  .build-layout:has(.palette-panel):has(.diagnostics-panel) {
    grid-template-columns: 1fr !important;
  }
  .bhava-resize-handle { display: none; }
}
/* Any element explicitly marked as the wide content still scrolls INSIDE
   itself — see .bhava-hscroll below — so this is safe to apply globally. */

/* ── 6. Horizontal-scroll container (Option 1 fix) ───────────────────────
   Wrap any wide grid/board in a container with class "bhava-hscroll".
   On phones/tablets it becomes a smooth, snappy horizontal scroller
   instead of squeezing every column smaller. On desktop it behaves
   like a normal block (no visual change at all). */
.bhava-hscroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.bhava-hscroll > * {
  flex-shrink: 0;
  scroll-snap-align: start;
}
.bhava-hscroll::-webkit-scrollbar { height: 5px; }
.bhava-hscroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
}
/* Fade hint on the right edge so kids know there's more to scroll */
.bhava-hscroll-wrap {
  position: relative;
}
.bhava-hscroll-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 10px; width: 28px;
  background: linear-gradient(to right, transparent, rgba(10,8,20,0.55));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s;
}
.bhava-hscroll-wrap.bhava-scrolled-end::after { opacity: 0; }

/* Only activate the horizontal-scroll treatment below desktop width —
   on a laptop/desktop the same markup lays out as a normal wrapping grid,
   so you don't need two different HTML structures. */
@media (max-width: 900px) {
  .bhava-hscroll-auto {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .bhava-hscroll-auto > * {
    flex-shrink: 0;
    scroll-snap-align: start;
    /* keep a comfortable minimum width so nothing feels cramped */
    min-width: 130px;
  }
}

/* ── 7. Rotate / bigger-screen nudge banner (soft, dismissible) ─────────── */
#bhava-rotate-banner {
  position: fixed;
  left: 0; right: 0; top: 44px; /* sits just below bhava-game-nav bar */
  z-index: 9998;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(217,119,6,0.16);
  border-bottom: 1px solid rgba(217,119,6,0.35);
  backdrop-filter: blur(10px);
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 13px;
  color: #fdba74;
}
#bhava-rotate-banner.bhava-show { display: flex; }
#bhava-rotate-banner .bhava-rb-icon { font-size: 18px; flex-shrink: 0; }
#bhava-rotate-banner .bhava-rb-text { flex: 1; }
#bhava-rotate-banner .bhava-rb-close {
  background: none; border: none; color: inherit;
  font-size: 16px; cursor: pointer; padding: 4px 8px;
  opacity: 0.7;
}
#bhava-rotate-banner .bhava-rb-close:hover { opacity: 1; }

/* ── 8. Hard-block rotate screen (opt-in, only for genuinely unplayable UIs) */
#bhava-rotate-block {
  position: fixed; inset: 0; z-index: 100000;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; padding: 32px;
  background: rgba(5,5,15,0.97);
  font-family: 'Poppins', 'Inter', sans-serif;
  color: #e2e8f0;
}
#bhava-rotate-block.bhava-show { display: flex; }
#bhava-rotate-block .bhava-rotate-icon {
  font-size: 56px;
  animation: bhava-rotate-spin 1.8s ease-in-out infinite;
}
@keyframes bhava-rotate-spin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}
#bhava-rotate-block h3 { font-size: 20px; font-weight: 800; margin: 0; }
#bhava-rotate-block p { font-size: 14px; color: #94a3b8; margin: 0; max-width: 320px; }