/* ==========================================================================
   Kingmoon — página do jogo
   Jogo DEITADO (navegador, 16:9): as telas usam a moldura .tela em vez do celular.
   Cores: pôr do sol laranja #ff9a5a, ciano da lua #35c8ff, índigo #0d1630.
   ========================================================================== */

/* moldura de tela deitada (monitor/notebook sem pé) */
.tela {
  --rt: 18px;
  position: relative; width: 100%; padding: 7px; border-radius: var(--rt);
  background: linear-gradient(145deg, #2c3350, #0c0f1d 30%, #070912 70%, #283050);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16), 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .8);
}
.tela__screen { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--rt) - 7px); overflow: hidden; background: #0b1530; isolation: isolate; }
.tela__screen > img, .tela__screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------- herói ---------------- */
.km-hero .gh__bg img { object-position: 50% 40%; filter: blur(2px) saturate(1.15) brightness(.5); }
.km-hero::before {
  /* brilho do pôr do sol vindo de baixo */
  content: ""; position: absolute; inset: auto -10% -30% 30%; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 154, 90, .22), transparent 70%);
}
.km-logo { width: clamp(230px, 27vw, 400px); filter: drop-shadow(0 0 24px rgba(53, 200, 255, .3)) drop-shadow(0 16px 30px rgba(0, 0, 0, .6)); }
.km-visual { display: grid; place-items: center; }
.km-visual__tela { width: min(100%, 640px); rotate: -3deg; z-index: 2; }

/* ---------------- como se joga: a tela deitada pede mais espaço ---------------- */
.km-gp .gp__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.km-gp .gp__phone { width: min(100%, 720px); }
.km-gp .gp__phone .tela__screen img { transition: opacity .7s var(--ease-out), transform 1.2s var(--ease-out); opacity: 0; transform: scale(1.06); }
.km-gp .gp__phone .tela__screen .is-on { opacity: 1; transform: none; }
html.no-js .km-gp .gp__phone [data-step="0"] { opacity: 1; transform: none; }
.km-gp .gp__shot { width: 100%; max-width: 560px; }
.km-gp .gp__dots { right: -24px; }

/* ---------------- galeria (telas deitadas) ---------------- */
.km-gg .gg__item .tela { width: clamp(280px, 40vw, 600px); transition: transform .7s var(--ease-out); }
.km-gg .gg__item:hover .tela { transform: translateY(-8px) rotate(-1deg); }
.km-gg .gg__item a { border-radius: 18px; }

/* ---------------- onde jogar: só o navegador ---------------- */
.onde__grupos--web { grid-template-columns: minmax(0, 1fr); max-width: 560px; }

/* ---------------- responsivo ---------------- */
@media (max-width: 900px) {
  .km-visual { height: auto; min-height: 0; padding: 26px 4% 34px; }
  .km-gp .gp__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tela { --rt: 14px; padding: 5px; }
}