/* MONSTER GAME page – the game itself draws every menu in pixel art; the page only frames it. */
.mg-body{background:#06041a;color:#f5f7fa}
.mg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mg-page{--mg-w:min(1180px,calc((100vh - 170px) * 16 / 9),calc(100vw - 48px));position:relative;padding:136px 12px 0;overflow-x:clip}
/* neon lightning behind the game window */
.mg-page::before,.mg-page::after{content:"";position:absolute;top:96px;width:52vw;height:min(96vh,1040px);z-index:0;pointer-events:none;
  background:url(/games/assets/lightning-bg.webp) left center/cover no-repeat;filter:saturate(1.2) brightness(1.15);
  -webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.mg-page::before{left:0;opacity:.85;animation:mg-flicker 6s steps(1) infinite}
.mg-page::after{right:0;transform:scaleX(-1);opacity:.75;animation:mg-flicker 6s steps(1) 2.7s infinite}
@keyframes mg-flicker{0%,100%{opacity:.8}38%{opacity:1}39%{opacity:.35}40%{opacity:.95}72%{opacity:.6}73%{opacity:.9}}
.mg,.mg-machine{z-index:1}
.mg-lc{text-transform:none}
/* game area: never select text or show the iOS callout/magnifier while playing */
.mg,.mg *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.mg{touch-action:manipulation}

/* game frame: hard pixel border, no rounded corners */
.mg{position:relative;margin:0 auto;width:var(--mg-w);background:#06041a;
  box-shadow:0 0 0 4px #06041a,0 0 0 8px #6b3fa8,0 0 0 12px #06041a,0 24px 80px rgba(0,0,0,.6)}
.mg-stage{position:relative;aspect-ratio:16/9;width:100%;background:#06041a;overflow:hidden}
.mg.is-narrow .mg-stage{aspect-ratio:4/3}
.mg-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;object-fit:contain;touch-action:none;outline:none}
.mg-canvas:focus-visible{outline:3px solid #ffe14a;outline-offset:-3px}

/* touch controls: square pixel buttons, labels drawn with the game's bitmap font */
.mg-touch{display:none;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px calc(14px + env(safe-area-inset-bottom));background:#12062d;
  border-top:4px solid #06041a;box-shadow:inset 0 4px 0 #3c1765;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.mg.is-touch .mg-touch{display:flex}
.mg-pad{display:flex;gap:10px}
.mg-pad-act{display:grid;grid-template-columns:repeat(2,auto);gap:8px}
.mg-tb{width:68px;height:60px;border:0;border-radius:0;padding:0;display:grid;place-items:center;cursor:pointer;touch-action:none;color:#fff;font:700 12px monospace;
  background:#3c1765;box-shadow:inset -4px -4px 0 #1a0844,inset 4px 4px 0 #6b3fa8,0 0 0 3px #06041a}
.mg-tb.is-down{box-shadow:inset 4px 4px 0 #1a0844,inset -4px -4px 0 #6b3fa8,0 0 0 3px #06041a;transform:translateY(2px)}
.mg-tb-label{image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none;width:auto;height:15px}
.mg-tb-jump{background:#35a427;box-shadow:inset -4px -4px 0 #157e20,inset 4px 4px 0 #75e533,0 0 0 3px #06041a}
.mg-tb-punch{background:#e8283c;box-shadow:inset -4px -4px 0 #7a0d1a,inset 4px 4px 0 #ff8a8a,0 0 0 3px #06041a}
.mg-tb-kick{background:#1d6f9c;box-shadow:inset -4px -4px 0 #0b3a55,inset 4px 4px 0 #63fafe,0 0 0 3px #06041a}
.mg-tb-smash{background:#c8871e;box-shadow:inset -4px -4px 0 #7a4a10,inset 4px 4px 0 #ffe14a,0 0 0 3px #06041a}
.mg-tb-small{width:46px;height:46px}
.mg-only-play{visibility:hidden}.mg.is-playing .mg-only-play{visibility:visible}

/* fullscreen */
.mg.is-fullscreen{max-width:none;width:100vw;height:100vh;height:100dvh;display:flex;flex-direction:column;background:#000;box-shadow:none}
.mg.is-fullscreen .mg-stage{flex:1;aspect-ratio:auto;background:#000}
.mg.is-fullscreen.is-touch .mg-touch{position:absolute;left:0;right:0;bottom:0;background:transparent;border:0;box-shadow:none;pointer-events:none;z-index:4}
.mg.is-fullscreen.is-touch .mg-touch>*{pointer-events:auto}
.mg.is-fullscreen.is-touch .mg-tb{opacity:.75}

@media(max-width:760px){.mg-page{--mg-w:calc(100vw - 24px);padding-top:108px}.mg-page::before,.mg-page::after{opacity:.45;animation:none;width:70vw}}
@media(max-width:420px){.mg-tb{width:58px;height:54px}.mg-tb-small{width:42px;height:42px}}

/* reference to the real machine */
.mg-machine{position:relative;margin:56px auto 0;width:var(--mg-w);display:grid;grid-template-columns:220px 1fr 230px;grid-template-areas:'photo text .';overflow:hidden;gap:40px;align-items:start;padding:32px;
  background:#0d1116;box-shadow:0 0 0 4px #06041a,0 0 0 8px #6b3fa8,0 0 0 12px #06041a}
.mg-machine-photo{grid-area:photo;display:block;background:#fff;padding:10px;box-shadow:0 0 0 4px #06041a,0 0 0 8px #e8283c}
.mg-machine>div:not(.mg-peek){grid-area:text}
.mg-machine>.mg-peek{grid-area:auto}
.mg-machine-photo img{display:block;width:100%;height:auto;aspect-ratio:580/850;object-fit:contain}
/* the MONSTER peeks in from behind the right edge of the tile */
.mg-peek{position:absolute;top:0;right:0;bottom:0;width:300px;overflow:hidden;pointer-events:none;z-index:2}
.mg-peek img{position:absolute;top:50%;right:-150px;width:400px;height:auto;margin-top:-210px;transform-origin:100% 60%;
  filter:drop-shadow(-14px 16px 22px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(139,237,54,.3));animation:mg-peek 4.2s ease-in-out infinite}
@keyframes mg-peek{0%,100%{transform:rotate(-24deg) translateX(0)}18%{transform:rotate(-30deg) translateX(-26px)}30%{transform:rotate(-27deg) translateX(-20px)}
  42%{transform:rotate(-31deg) translateX(-28px)}60%{transform:rotate(-22deg) translateX(6px)}80%{transform:rotate(-25deg) translateX(-4px)}}
.mg-machine h2{font:800 clamp(30px,4vw,54px)/.98 Manrope,sans-serif;letter-spacing:-.04em;margin:0 0 14px;color:#fff}
.mg-machine .kicker{margin:2px 0 12px;color:#9ba3ad}
.mg-machine p:not(.kicker){color:#aab1b9;max-width:640px;line-height:1.6;margin:0}
.mg-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
/* GAMES MONSTER logo under the machine tile */
.mg-brand{position:relative;z-index:1;display:flex;justify-content:center;margin:40px auto 0;padding-bottom:16px;width:var(--mg-w)}
.mg-about{position:relative;z-index:1;margin:0 auto;padding:0 8px 32px;max-width:680px;text-align:center;color:#9ba3ad;font-size:15px;line-height:1.6}
.mg-brand img{display:block;width:min(275px,50%);height:auto;filter:drop-shadow(0 10px 30px rgba(139,237,54,.18))}
.mg-footer{margin-top:0;padding-top:24px}
@media(max-width:900px){.mg-machine{grid-template-columns:1fr 1fr;grid-template-areas:'photo .' 'text text';gap:22px 18px;padding:22px}.mg-machine-photo{width:100%;max-width:200px}.mg-peek{bottom:auto;height:min(78vw,340px);width:50%}.mg-peek img{width:min(76vw,300px);right:-34%;margin-top:calc(min(76vw,300px) * -.55)}}
@media(prefers-reduced-motion:reduce){.mg-page::before,.mg-page::after,.mg-peek img{animation:none}}

/* machine tile on computers: wider text column, calmer headline (2-3 lines)
   and both buttons on one row; the MONSTER on the right keeps its space */
@media(min-width:901px){
  .mg-machine{grid-template-columns:200px 1fr 170px;gap:32px}
  .mg-machine h2{font-size:clamp(30px,3.1vw,44px);line-height:1.04}
  .mg-machine .mg-actions{flex-wrap:nowrap}
  .mg-machine .mg-actions .btn{white-space:nowrap}
}
@media(min-width:901px) and (max-width:1100px){
  .mg-machine{grid-template-columns:170px 1fr 160px;gap:26px}
  .mg-machine .mg-actions .btn{padding-left:18px;padding-right:18px}
}

/* phones: even, tidy line endings in the machine tile and the text under the logo */
@media(max-width:600px){
  .mg-machine p:not(.kicker){text-wrap:pretty}
  .mg-about{text-wrap:balance}
}

/* phone line breaks in the machine headline (hidden on computers) */
.mg-br{display:none}
@media(max-width:600px){.mg-br{display:inline}}
/* phones only: keep short words with their neighbour so lines end evenly */
@media(max-width:600px){.mg-keep{white-space:nowrap}.mg-machine h2{font-size:min(30px,calc((100vw - 68px) / 10.3))}}