/* Stile comune dei giochi 3Load. Usa le variabili del tema v2; i fallback lo rendono valido anche stand-alone. */
.gm {
  --g-bg: rgba(5, 9, 20, .46); /* velatura semi-trasparente: dietro si vede il campo stellato del sito */
  --g-line: var(--line, rgba(120, 160, 255, .14));
  --g-acc: var(--cyan, #38e1ff);
  --g-ok: var(--green, #8bd346);
  --g-bad: var(--danger, #ff5a6a);
  --g-vio: var(--violet, #8b5cf6);
  --g-txt: var(--text, #e7eefc);
  --g-mut: var(--muted, #93a3c4);
  max-width: var(--gw, 800px); margin: 18px auto 0;
  font-family: var(--font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); color: var(--g-txt);
}
.gm-cv {
  display: block; margin: 0 auto; height: auto; background: transparent; /* trasparente: il campo stellato traspare */
  /* responsive: non supera né la larghezza del contenitore né l'altezza dello schermo */
  width: min(100%, calc(var(--gvh, 72vh) * var(--ar, 1)));
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  border: 1px solid var(--g-line); border-radius: 16px; outline: 0; touch-action: none; cursor: pointer;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5), inset 0 0 70px rgba(56, 225, 255, .08);
}
.gm-cv:focus-visible { border-color: var(--g-acc); }
.gm-ctl { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.gm-b {
  appearance: none; cursor: pointer; font: 600 14px/1 var(--font, system-ui, sans-serif); color: var(--g-txt);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-strong, rgba(120, 180, 255, .3));
  border-radius: 10px; padding: 9px 16px; transition: background .15s;
}
.gm-b:hover { background: rgba(255, 255, 255, .09); }
.gm-b.on { background: var(--g-acc); color: #04101f; border-color: transparent; }
.gm-hint { text-align: center; color: var(--g-mut); font-size: 13px; margin: 10px 0 0; }
.gm-pad {
  display: none; justify-content: center; gap: 8px; margin-top: 12px;
  grid-template-columns: repeat(3, 64px); grid-template-areas: ". up ." "left down right";
}
.gm-pad2 { grid-template-columns: repeat(2, 96px); grid-template-areas: "up down"; }
.gm-pad button {
  height: 56px; font-size: 20px; color: var(--g-txt); background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-strong, rgba(120, 180, 255, .3)); border-radius: 12px; touch-action: none;
}
.gm-pad button:active { background: rgba(56, 225, 255, .25); }
.gm-pad [data-k="up"] { grid-area: up; } .gm-pad [data-k="down"] { grid-area: down; }
.gm-pad [data-k="left"] { grid-area: left; } .gm-pad [data-k="right"] { grid-area: right; }
/* barra orizzontale di pulsanti (Tetris, Asteroids): --n = numero di tasti */
.gm-padrow { grid-template-columns: repeat(var(--n, 5), 1fr); grid-template-areas: none; max-width: 440px; margin-left: auto; margin-right: auto; }
.gm-padrow [data-k] { grid-area: auto; }
@media (pointer: coarse) { .gm-pad { display: grid; } }
/* pagina stand-alone (schermo intero) */
body.gm-page { margin: 0; min-height: 100vh; background: #050914; display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; }
body.gm-page .gm { width: 100%; margin: 0; }