/* GyanNews Games mobile/tablet fixes. Does not depend on a remote CSS CDN. */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; margin: 0; }
body { overflow-x: clip; }
img, video, canvas, iframe { max-width: 100%; }
.container-zon, .cat-container { width: 100%; max-width: 1550px; }
.gn-brand-mark { display: inline-flex; align-items: center; min-width: 145px; max-width: 194px; vertical-align: middle; }
.gn-brand-image { width: 180px; max-width: 100%; height: auto; object-fit: contain; }
.gn-brand-text { align-items: center; gap: 6px; line-height: 1; font-family: system-ui, sans-serif; color: #0f172a; white-space: nowrap; }
.gn-brand-text span { display: flex; flex-direction: column; gap: 3px; }
.gn-brand-text strong { font-size: 17px; letter-spacing: -.7px; }
.gn-brand-text em { font-size: 11px; letter-spacing: 2px; font-weight: 750; color: #0d9488; font-style: normal; text-transform: uppercase; }
.dark .gn-brand-text { color: #f8fafc; }
.mobile-header { z-index: 105 !important; top: 0; padding: 7px 4px; min-height: 62px; }
.mobile-header .gn-brand-image { max-width: 150px; max-height: 52px; }
.mobile-header button { min-height: 42px; min-width: 42px; }
.mobile-header form { min-width: 0; }
.mobile-header input { min-width: 0; }
.cat-item-container { -webkit-overflow-scrolling: touch; }
.cat-item-container a { white-space: nowrap; flex-shrink: 0; }
.grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 12px; grid-auto-rows: minmax(135px, auto); }
.grid > .box { min-width: 0; aspect-ratio: 1; height: auto!important; }
.grid > .box.large { aspect-ratio: 1; }
.grid > .box img { display:block; width: 100%; height:100%; object-fit:cover; }
.grid > .box h2 { max-width: 100%; font-size: 13px; line-height: 1.25; opacity: 1; text-shadow: 0 1px 4px #000; }
.advertisement, .banner { max-width: 100%; height: auto; overflow: hidden; }
.advertisement iframe, .advertisement img, .banner iframe, .banner img { max-width: 100%; }
.offcanvas .offcanvas-menu { overflow-y: auto; }
.offcanvas .offcanvas-menu > ul { height: auto; max-height: calc(100vh - 130px); overflow: auto; }
.offcanvas .close-offcanvas { z-index: 10; }
.screen, .gameplay, .gameplay iframe { min-width: 0; max-width: 100%; }
.screen .gameplay { overflow: hidden; }
.screen.active-screen .gameplay { height: 100%!important; }
input, select, textarea { max-width: 100%; }
@media (max-width: 1100px) {
  .header-main { display: none!important; }
  .mobile-header { display: flex!important; }
  .gameplay { width: 100%!important; height: min(65vw, 460px)!important; min-height: 280px; }
  .screen { width:100%!important; flex: 1 1 100%; }
  .body .flex:has(> .screen) { flex-wrap: wrap; }
  .body .games.md-hidden { display: none!important; }
}
@media (max-width: 640px) {
  .container-zon { padding-left: 12px; padding-right: 12px; }
  .body.container-zon { padding-left: 0; padding-right: 0; }
  .body .mx-4 { margin-left: 12px; margin-right: 12px; }
  .cat-container { margin-top: 8px; padding-left: 12px; padding-right: 12px; }
  .cat-item-container { gap: 9px; }
  .cat-item-container a { padding: 9px 11px; font-size: 12px; margin-bottom: 0; }
  .container-zon h1 { font-size: clamp(23px, 6vw, 30px); line-height: 1.18; }
  .container-zon h2.heading { font-size: 21px; }
  .container-zon p { overflow-wrap: anywhere; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; grid-auto-rows: auto; }
  .grid > .box { height: auto!important; min-height: 0; }
  .grid > .box.large { grid-column: span 2; grid-row: auto; aspect-ratio: 1.65; }
  .grid > .box h2 { opacity: 1; font-size: 12px; padding: 6px!important; }
  .gameplay { height: min(76vw, 420px)!important; min-height: 240px; }
  .gameplay-footer .flex { flex-wrap: wrap; gap: 9px; }
  .offcanvas-menu { width: min(88vw, 340px)!important; }
  .advertisement .banner { width: 100%!important; transform: none!important; }
  iframe { max-width: 100%; }
  footer .container-zon > .flex { flex-wrap: wrap; gap: 12px; }
  footer ul { gap: 8px; }
  footer ul a { padding: 4px!important; }
}
@media (max-width: 345px) { .mobile-header .gn-brand-image { max-width: 120px; } .gn-brand-text strong { font-size: 14px; } }