/* Markuiz — mobile-first responsive layer (keeps desktop layout intact) */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
*, *::before, *::after { -webkit-tap-highlight-color: transparent !important; }
a, button, input, textarea, select, [role="button"] { -webkit-tap-highlight-color: transparent !important; }
a:focus, button:focus, input:focus, textarea:focus, select:focus { outline:none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
img, video, iframe, canvas { max-width:100%; }
button, a, [role="button"], input[type="button"], input[type="submit"], input[type="file"] { touch-action:manipulation; }

@media (max-width: 900px) {
  html { font-size:16px; }
  body { min-height:100dvh; min-height:100vh; padding-bottom:env(safe-area-inset-bottom); }
  input, textarea, select { font-size:16px !important; }
  button, a[role="button"], [role="button"] { min-height:44px; }

  /* Never let a desktop-width component create horizontal scrolling. */
  .container, .content, .wrap, .shell, .screen, .kv-container, .bt-container,
  .g-container, .g-content, .support-layout, .gv-content, .KRFC, .kwwP {
    max-width:100% !important; width:100% !important;
  }

  /* Common cards/forms */
  .card, .modal, .kv-modal, .g-modal, .box, .auth-box, .form-card,
  .console-panel, .support-card {
    max-width:calc(100vw - 24px);
  }
  .actions, .kv-actions, .g-actions, .bt-actions { flex-wrap:wrap; }
  .actions > *, .kv-actions > *, .g-actions > * { min-width:0; }

  /* Tables become scrollable instead of squeezing the entire page. */
  table { max-width:100%; }
  .table-wrap, .table-responsive { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Media should stay inside the viewport. */
  video, iframe { max-width:100%; }
  pre, code { max-width:100%; overflow-x:auto; }

  /* Modals behave like comfortable mobile sheets. */
  .kv-overlay, .modal-overlay, .overlay, .g-overlay { padding:12px; }
  .kv-modal, .modal, .g-modal {
    width:min(100%, 520px) !important;
    max-height:calc(100dvh - 24px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Video / Kuiz Video */
  .kv-header, .g-header, .bt-header, .topbar {
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
  .kv-container, .g-container, .bt-container { padding-left:12px !important; padding-right:12px !important; }
  .kv-grid { grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:10px !important; }
  .g-grid { grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:10px !important; }
  .kv-watch-layout { display:block !important; }
  .kv-watch-main { width:100% !important; min-width:0 !important; }

  /* Games: no fixed desktop widths on phones. */
  .g-hero, .g-player-wrap, .g-dev-hero { width:100% !important; max-width:100% !important; }
  .g-player-wrap { border-radius:14px !important; }

  /* Markuiz feed/profile */
  .post, .composer, .profile-card, .settings-card, .setting-item { max-width:100%; }
  .post img, .post video { width:auto; max-width:100%; height:auto; }
  .tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }

  /* Admin/support/navigation */
  .support-layout { display:flex !important; flex-direction:column !important; }
  .tickets-col { width:100% !important; }
  .admin-table { min-width:680px; }

  /* Fixed controls respect the home indicator. */
  .mobile-nav, .kv-toast, .scroll-top-btn, .mobile-fab {
    margin-bottom:env(safe-area-inset-bottom);
  }
}

@media (max-width: 600px) {
  .kv-grid, .g-grid { grid-template-columns:1fr !important; }
  .kv-header { gap:8px !important; }
  .kv-logo { font-size:18px !important; }
  .kv-container, .g-container, .bt-container { padding-left:10px !important; padding-right:10px !important; }

  .card, .modal, .kv-modal, .g-modal, .box, .auth-box { max-width:calc(100vw - 20px); border-radius:18px; }
  .kv-modal, .modal, .g-modal { padding:18px !important; }
  .kv-modal-actions, .actions { flex-direction:column; }
  .kv-modal-actions > *, .actions > * { width:100%; }

  /* Full-width mobile controls are easier to hit. */
  .kv-btn, .g-btn, .bt-btn, .btn { min-height:44px; }
  .kv-search { min-width:0; }

  /* Avoid accidental tiny controls on narrow screens. */
  .header-actions, .kv-header-actions, .g-header-actions { gap:7px !important; }
}

@media (max-width: 420px) {
  .kv-grid, .g-grid { grid-template-columns:1fr !important; }
  .mobile-nav { left:8px !important; right:8px !important; }
}

@media (orientation: landscape) and (max-width: 900px) {
  body { min-height:100dvh; }
  .mobile-nav { padding-bottom:max(4px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}