@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #fdfbf7;
  --color-champagne: #e8d5b7;
  --color-champagne-dark: #b99a63;
  --color-text: #3a332c;
  --color-text-light: #7a6f5f;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* la scocca: plastica anni '90 (il lilla del Game Boy Color), non è la palette del sito perché
     qui l'oggetto imitato è una console, non un invito */
  --gb-shell: #b9b6ce;
  --gb-shell-dark: #9895ad;
  --gb-screen-bezel: #4b4f4a;
  --gb-screen: #7bbf5a;
  --gb-btn: #8b3a52;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.gb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--color-champagne);
}
.gb-topbar__back { color: var(--color-text-light); text-decoration: none; font-size: 0.9rem; }
.gb-topbar__title { font-weight: 600; font-size: 1.1rem; margin: 0; }

.gb-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1rem;
}

/* ---- la console ---- */
.gb-console {
  background: var(--gb-shell);
  border-radius: 12px 12px 34px 12px;
  padding: 14px 14px 18px;
  width: 100%;
  max-width: 380px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -3px 0 var(--gb-shell-dark),
    0 10px 26px rgba(58, 51, 44, 0.22);
}

.gb-screen-frame {
  background: var(--gb-screen-bezel);
  border-radius: 8px 8px 18px 8px;
  padding: 12px 14px 10px;
}
.gb-screen-label {
  color: #8d94a6;
  font-size: 7px;
  letter-spacing: 0.14em;
  text-align: center;
  margin-bottom: 6px;
}

#gbScreen {
  display: block;
  width: 100%;
  height: auto;
  background: var(--gb-screen);
  /* niente sfocatura: i pixel devono restare pixel */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---- comandi ---- */
.gb-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 0 4px;
}

.gb-dpad { position: relative; width: 96px; height: 96px; }
.gb-dpad__btn {
  position: absolute;
  width: 32px; height: 32px;
  border: none;
  background: #3c3f42;
  color: #cfd2d4;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.gb-dpad__up { left: 32px; top: 0; border-radius: 6px 6px 0 0; }
.gb-dpad__down { left: 32px; top: 64px; border-radius: 0 0 6px 6px; }
.gb-dpad__left { left: 0; top: 32px; border-radius: 6px 0 0 6px; }
.gb-dpad__right { left: 64px; top: 32px; border-radius: 0 6px 6px 0; }
.gb-dpad__center {
  position: absolute; left: 32px; top: 32px;
  width: 32px; height: 32px; background: #3c3f42;
}
.gb-dpad__btn:active { background: #55595d; }

.gb-ab { display: flex; gap: 14px; align-items: center; transform: rotate(-20deg); }
.gb-btn-round {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--gb-btn);
  color: #f4e9ec;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  box-shadow: 0 3px 0 #6d2c40;
}
.gb-btn-round:active { transform: translateY(2px); box-shadow: 0 1px 0 #6d2c40; }

.gb-hint { color: var(--color-text-light); font-size: 0.82rem; text-align: center; margin: 0; }

/* Su computer i tasti fisici bastano: la scocca resta, i pulsanti no — e
   senza pulsanti c'è spazio per uno schermo molto più grande */
@media (hover: hover) and (pointer: fine) {
  .gb-controls { display: none; }
  .gb-console { padding-bottom: 14px; max-width: 720px; }
}

/* Telefono in orizzontale: schermo basso, si stringe tutto */
@media (max-height: 520px) and (pointer: coarse) {
  .gb-topbar { padding: 0.3rem 0.8rem; }
  .gb-wrap { padding: 0.4rem; gap: 0.4rem; }
  .gb-console { max-width: 250px; padding: 8px 8px 10px; }
  .gb-dpad { width: 78px; height: 78px; }
  .gb-dpad__btn, .gb-dpad__center { width: 26px; height: 26px; }
  .gb-dpad__up, .gb-dpad__down, .gb-dpad__center { left: 26px; }
  .gb-dpad__down { top: 52px; }
  .gb-dpad__left, .gb-dpad__right, .gb-dpad__center { top: 26px; }
  .gb-dpad__right { left: 52px; }
  .gb-btn-round { width: 38px; height: 38px; }
  .gb-hint { display: none; }
}