/* Lienzo virtual 1920×1080 + contain. Prohibido vw/vh/dvh en chrome de juego. */

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
}

.game-shell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  box-sizing: border-box;
  background: #03040a;
}

.ad-column {
  flex: 0 0 var(--ad-col-w, 0px);
  width: var(--ad-col-w, 0px);
  min-width: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(123, 92, 255, 0.04),
      rgba(123, 92, 255, 0.04) 12px,
      transparent 12px,
      transparent 28px
    );
}

/* Banner de AdSense dentro de la columna lateral (js/ui/sideAds.js). */
.ad-column.has-ad {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ad-column.has-ad > .adsbygoogle {
  flex: 0 0 auto;
}

/* Banner de abajo: pantalla vertical. Oculto hasta que la publicidad esté autorizada. */
.ad-banner-bottom {
  flex: 0 0 var(--ad-banner-h, 0px);
  width: 100%;
  height: var(--ad-banner-h, 0px);
  min-height: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(123, 92, 255, 0.04),
      rgba(123, 92, 255, 0.04) 12px,
      transparent 12px,
      transparent 28px
    );
}

.game-shell[data-bottom-ad="on"] {
  flex-direction: column;
}

.ad-banner-bottom.has-ad {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ad-banner-bottom.has-ad > .adsbygoogle {
  flex: 0 0 auto;
}

.game-frame {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.game-scaler {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.game-stage {
  transform-origin: top left;
}

.game-stage-body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  --stage-w: var(--game-virtual-w, 1920px);
  --stage-h: var(--game-virtual-h, 1080px);
}

#game-modal-root,
#game-toast-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
}

#game-modal-root:empty,
#game-toast-root:empty {
  display: none;
}

#game-modal-root > .is-open,
#game-toast-root > * {
  pointer-events: auto;
}

#game-toast-root {
  z-index: 220;
}

.game-shell[data-layout="mobile"] .game-scaler,
.game-shell[data-layout="mobile"] .game-stage,
.game-shell[data-layout="mobile"] .game-stage-body {
  width: 100%;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  transform: none;
}

.game-shell[data-layout="mobile"] .game-scaler {
  flex-shrink: 1;
}

.game-shell[data-layout="mobile"] .game-stage-body {
  --stage-w: 100%;
  --stage-h: 100%;
  overflow-x: hidden;
}

.game-shell[data-layout="mobile"] .app-chrome,
.game-shell[data-layout="mobile"] .landing-content {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}