/* Force desktop layout minimum width for all devices so layout does not reflow on small screens */
@font-face {
    font-family: 'Shredded';
    src: url('shredded.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
body {
    min-width: 1280px !important;
    margin: 0 auto;
    overflow-x: hidden;
}

:root{
  --bg-0:#0a0a0e;
  --bg-1:#0f172a;
  --bg-2:#2d124d;
  --fire-red:#ef4444;
  --fire-yellow:#f59e0b;
  --fire-orange:#ff8a00;
  --muted:#9aa3b2;
  --glass: rgba(255,255,255,0.03);
  --glow-space: 0 8px 30px rgba(45,18,77,0.45);
}

*{box-sizing:border-box}

/* Make app a column flex layout so footer naturally sits after content and can't overlap interactive areas.
   Use min-height to ensure footer is pushed to bottom when content is short. */
#app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Let top-level <main> pages expand to fill available space so footer remains below content.
   Individual .container elements retain their own width/padding but pages will push footer down. */
#app > main{
  flex: 1 1 auto;
}

html,body{height:100%}
body{
  margin:0;
  /* Global UI uses system/sans fonts; the 'Shredded' font is applied only to the main hub title */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(45,18,77,0.12), transparent),
              radial-gradient(800px 400px at 90% 80%, rgba(15,23,42,0.14), transparent),
              linear-gradient(180deg,var(--bg-0),var(--bg-1) 40%,var(--bg-2) 100%);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  /* ensure one-screen experience on mobile */
  overscroll-behavior-y: contain;
}

/* Apply the uploaded 'Shredded' font only to the main hub title */
.brand-text h1{
  font-family: 'Shredded', sans-serif;
  font-weight: 400;
  /* Larger, highly legible heading for the main page */
  font-size: 48px;
  line-height: 1.05;
  margin: 0;
  letter-spacing: 1px;
  color: var(--fire-yellow);
  text-shadow: 0 2px 12px rgba(245,158,11,0.12);
}

/* Header banner */
.site-header{width:100%;display:block;overflow:hidden}
.banner-img{
  width:100%;
  height: clamp(120px, 20vw, 300px);
  object-fit:cover;
  display:block;
  border-bottom: 4px solid rgba(245,158,11,0.12);
  box-shadow: var(--glow-space);
  transition:transform .4s ease;
}

/* Improve vertical fit on narrow portrait screens so the banner is fully visible */
@media (max-width:480px) and (orientation:portrait){
  .banner-img{
    /* Use viewport-relative height to give the banner more vertical room,
       fallback to a sensible absolute max to avoid huge images on odd viewports */
    height: min(40vh, 380px) !important;
    object-fit: contain !important; /* preserve whole image without cropping */
    padding-top: 6px;
  }
  /* give the first container a little extra top spacing so banner doesn't overlap content */
  .container{
    padding-top: 12px;
  }
  /* ensure header doesn't clip due to body scaling transforms */
  .site-header{overflow:visible}
}

/* layout container */
.container{
  max-width:1100px;
  margin:18px auto;
  padding:16px;
  position:relative;
  /* ensure content within containers stacks from the top so short pages don't appear pushed to the bottom */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Brand */
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent);
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
}
.brand-text h1{
  margin:0;
  /* match the larger heading size for consistency */
  font-size:48px;
  letter-spacing:1px;
  color:var(--fire-yellow);
  text-shadow: 0 2px 12px rgba(245,158,11,0.12);
}
.lead{color:var(--muted);margin:6px 0 0;font-size:0.95rem}
.brand-actions{margin-left:auto}
.social{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:8px;
  color:#111;
  background: linear-gradient(90deg,var(--fire-yellow),var(--fire-orange));
  font-weight:600;
  text-decoration:none;
  box-shadow: 0 6px 18px rgba(255,110,0,0.12);
  transform:translateZ(0);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  min-height:44px;
}
.social .ig-icon{width:18px;height:18px;fill:#111}
.social:hover{transform:translateY(-3px) scale(1.02); filter:brightness(1.03)}

/* Catalog */
.catalog{margin-top:14px}

/* Apply the uploaded 'Shredded' font to the "Nuestros Juegos" heading and make it larger/legible */
.catalog h2{
  color:var(--fire-orange);
  margin:0 0 12px;
  font-family: 'Shredded', sans-serif;
  font-weight: 400;
  font-size: 56px; /* larger, mobile-friendly heading */
  line-height: 1.02;
  letter-spacing: 1px;
  text-shadow: 0 2px 10px rgba(255,140,0,0.09);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.games-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.game-card{
  position:relative;
  background:var(--glass);
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.04);
  /* Make cards perfectly square and large so buttons equal logo size */
  aspect-ratio: 1 / 1;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 24px rgba(13,12,20,0.25);
}
.game-card img{
  /* Logos much larger and centered, scale responsively within the square */
  max-width:84%;
  max-height:84%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.game-card:hover{transform:translateY(-6px); box-shadow:0 18px 48px rgba(239,68,68,0.08)}
.game-card.empty{background:transparent;border:0;box-shadow:none;pointer-events:none}

/* overlay title */
.game-overlay{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:10px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(10,8,12,0.6));
  text-align:center;
  color:var(--fire-yellow);
  font-weight:700;
  letter-spacing:0.6px;
}

/* Game page */
.hidden{display:none}
.game-nav{display:flex;justify-content:flex-start;margin:6px 0 14px}
.btn{
  background:transparent;
  color:var(--fire-yellow);
  border:1px solid rgba(245,158,11,0.12);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease;
}
.btn:hover{transform:translateY(-4px)}
.btn.back{color:#dbeafe;border-color:rgba(99,102,241,0.08);box-shadow:0 8px 36px rgba(15,23,42,0.35)}
.btn.primary{
  background:linear-gradient(90deg,var(--fire-red),var(--fire-orange));
  color:#fff;border:0;box-shadow:0 10px 30px rgba(239,68,68,0.12);
}

.game-banner-placeholder .screenshot-placeholder{
  width:100%;
  height:140px;
  background:linear-gradient(90deg, rgba(45,18,77,0.6), rgba(15,23,42,0.6));
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  border:1px solid rgba(255,255,255,0.02);
  box-shadow:var(--glow-space);
}

/* Game info text */
.game-info{margin-top:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:12px;border-radius:10px}
.game-info h2{color:var(--fire-orange);margin:0 0 8px}
/* Apply 'Shredded' font, lowercase styling and larger size to titles on individual game pages */
#landspeed-page .game-banner-placeholder h2.shredded-lower,
#game-page .game-banner-placeholder h2,
#orbifat-page .game-banner-placeholder h2,
#voxel-page .game-banner-placeholder h2 {
  font-family: 'Shredded', sans-serif;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  /* Larger, more readable heading for game pages */
  font-size: 56px;
  line-height: 1.02;
  font-weight: 400;
  color: var(--fire-orange);
  text-shadow: 0 2px 10px rgba(255,140,0,0.09);
}
.lore-gameplay{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.lore-gameplay h3{margin:0 0 6px;color:var(--fire-yellow)}

/* Play area */
.play-area{margin-top:14px;display:flex;flex-direction:column;gap:12px;align-items:center; width:100%}
/* Fixed-size iframe container to preserve desktop layout on all devices */
.iframe-wrap{
  width:800px !important;
  max-width:800px !important;
  /* increased height to provide more vertical room for content on narrow viewports */
  height:760px;
  background:#000;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);
  box-shadow:0 20px 60px rgba(2,6,23,0.6);
  position:relative;
  transform-origin:center center;
}
.iframe-wrap iframe{
  width:100%;height:100%;display:block;border:0;background:#000;
  transition: transform .18s ease;
  transform-origin:center center;
}

/* Click-block overlay placed on top of iframe content to block clicks in a configurable corner area.
   Defaults: 100px x 60px, bottom-right. Now visually transparent while remaining fully functional. */
.click-block{
  position:absolute !important;
  right:0 !important; /* flush to right edge */
  bottom:0 !important; /* flush to bottom edge */
  width:150px !important; /* default size (can still be overridden by JS) */
  height:50px !important; /* default size (can still be overridden by JS) */
  background: transparent !important; /* fully transparent but still captures events */
  border-radius:8px !important;
  z-index: 9999 !important; /* keep it above iframe and other elements */
  pointer-events: auto !important; /* capture clicks so iframe beneath cannot receive them */
  touch-action: none !important;
  /* keep a subtle shadow for development; remove if you want completely invisible visuals */
  box-shadow: 0 6px 18px rgba(0,0,0,0.00) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  /* ensure it's not focusable or removable via keyboard actions */
  outline: none !important;
}

/* Decorative Pantego badge that sits above the click-block in the bottom-right corner.
   Height is locked to the click-block height via the --click-block-height CSS var set by JS.
   pointer-events:none so it does not interfere with left-click gameplay. */
.iframe-brand{
  position: absolute;
  right: 0;
  bottom: 0;
  height: var(--click-block-height, 50px); /* default fallback */
  width: auto;
  z-index: 10000 !important; /* above click-block */
  pointer-events: none;
  display: block;
  object-fit: contain;
  transform: translateZ(0);
  border-radius: 6px;
  /* small visual smoothing but fully visible; remove background if you want pure image */
  background: transparent;
}
/* helper to make the overlay visually invisible later while still blocking:
   .click-block.invisible{ background: transparent !important; } */
/* optional helper class to hide the visual during production while still blocking:
   .click-block.invisible{ background: transparent; } */

/* Fullscreen landscape helper: when the iframe-wrap has .landscape class, rotate content for mobile fullscreen */
.iframe-wrap.landscape{
  width:100vh; /* rotated container uses viewport height as width */
  height:100vw;
}
.iframe-wrap.landscape iframe{
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
  width:100vh;
  height:100vw;
}

/* responsive: vertical-first mobile layout */
@media (max-width:0px){
  /* disabled mobile-specific overrides to keep desktop layout identical across devices */
}

/* Landscape desktops: slightly larger iframe */
@media (min-width:99999px){
  /* disabled desktop-specific breakpoint (no-op) */
}

@media (prefers-reduced-motion: no-preference){
  .banner-img{transition:transform .6s cubic-bezier(.2,.9,.2,1)}
  .banner-img:hover{transform:scale(1.01)}
}

/* Ad styles - ensure ads integrate into flow, have spacing and never overlap critical UI */
/* .ad-container placed in document flow; uses margins and limited max-width */
.ad-container{
  display:block;
  margin:12px auto;
  padding:8px;
  max-width:980px;
  width:100%;
  box-sizing:border-box;
  text-align:center;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border:1px solid rgba(255,255,255,0.02);
  /* outer ad container should not capture pointer events; let the iframe inside receive them */
  pointer-events: none;
}

/* enable pointer events specifically on ad iframes so left-clicks reach the ad content */
.ad-container iframe,
.ad-container > div iframe,
.ad-sidebar-left iframe,
.ad-skyscraper-160x600 iframe,
.ad-native iframe,
.ad-banner iframe,
.ad-container-300x250 iframe {
  pointer-events: auto;
}

/* Keep ad-side containers transparent to pointer events at the container level;
   individual iframes inside are enabled above so clicks still work. */
.ad-sidebar-left,
.ad-skyscraper-160x600,
.ad-banner,
.ad-container-300x250 {
  pointer-events: none;
}

/* Allow native ad container to receive pointer events so injected native assets (anchors/iframes)
   are clickable while other ad containers remain non-interactive at the container level. */
.ad-native {
  pointer-events: auto;
}

/* banners adapt responsively */
.ad-container.ad-banner iframe,
.ad-container.ad-banner > div,
.ad-container.ad-native > div {
  display:inline-block;
  max-width:100%;
  height:auto;
}

/* top/bottom banner specific spacing */
.ad-banner-top{ margin-bottom:14px; padding:10px; }
.ad-banner-bottom{ margin-top:18px; padding:10px; }

/* native ad block style matches header background and keeps spacing */
.ad-native{ margin:10px auto 6px; padding:12px; }

/* Social bar script may inject floating UI; ensure it can't block game controls:
   keep low z-index relative to click-block overlays (click-block uses z-index:9999),
   but above normal content so it's visible. Also avoid pointer-events interfering with page
   by default letting pointer-events:auto but give site dev ability to override. */
.ad-socialbar {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 9000;
  pointer-events: auto;
  transition: opacity .18s ease;
}

/* Ensure ads never overlap iframes by reducing z-index and keeping in flow.
   Click-block overlay remains topmost to protect critical game UI. */

/* Footer styles */
.site-footer{
  border-top:1px solid rgba(255,255,255,0.03);
  margin-top:18px;
  color:#dbeafe;
  background: linear-gradient(180deg, rgba(10,10,12,0.25), rgba(5,5,8,0.35));
  padding:18px 0;
}
.footer-inner{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.footer-brand{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:220px;
}
.footer-logo{
  width:56px;height:56px;object-fit:cover;border-radius:8px;box-shadow:var(--glow-space);
}
.footer-nav{
  display:flex;
  gap:12px;
  flex:1;
  justify-content:center;
  flex-wrap:wrap;
}
.footer-link{
  color:var(--muted);
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px;
  background:transparent;
  transition: all .12s ease;
  font-weight:600;
}
.footer-link:hover, .footer-link:focus{
  color:var(--fire-yellow);
  background: rgba(255,255,255,0.02);
  outline: none;
  transform: translateY(-3px);
}
.footer-meta{
  min-width:220px;
  text-align:right;
  color:var(--muted);
  font-size:0.95rem;
}

/* responsive */
@media (max-width:900px){
  .footer-inner{gap:12px;padding:6px 0}
  .footer-meta{text-align:center;width:100%}
  .footer-nav{order:3;justify-content:center}
  .footer-brand{order:1;width:100%;justify-content:center}
}