/* ============================================================
   GameKit CSS — chrome comum dos jogos (toast, som, layout base).
   Depende de /assets/css/tokens.css.
   ============================================================ */

/* Layout base de uma tela de jogo */
.game-shell {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(4rem, 8vh, 6rem) var(--sp-4) var(--sp-6);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--bg-grad-1), transparent 60%),
    radial-gradient(90% 60% at 100% 0%, var(--bg-grad-2), transparent 55%),
    var(--bg);
  gap: var(--sp-5);
}
.game-header { text-align: center; }
.game-title {
  font-size: var(--fs-2xl); color: var(--brand);
  display: inline-flex; align-items: center; gap: .4em;
}
.game-sub { color: var(--text-soft); font-size: var(--fs-sm); margin-top: .3rem; }
.game-panel {
  width: min(100%, 640px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: clamp(1.2rem, 4vw, 2.2rem);
}

/* Botão de som (canto oposto ao voltar) */
.gk-sound {
  position: fixed; top: max(.9rem, env(safe-area-inset-top)); right: .9rem; z-index: 50;
  width: 2.9rem; height: 2.9rem; font-size: 1.2rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-full); box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) ease;
}
.gk-sound:hover { transform: scale(1.08); box-shadow: var(--shadow-lg); }
.gk-sound:active { transform: scale(.94); }

/* Toast */
.gk-toast {
  position: fixed; left: 50%; bottom: 1.6rem; transform: translate(-50%, 1.5rem);
  z-index: 9998; max-width: min(92vw, 420px);
  padding: .75em 1.2em; border-radius: var(--r-full);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  background: var(--text); color: var(--surface);
  box-shadow: var(--shadow-lg); opacity: 0;
  transition: opacity var(--dur) ease, transform var(--dur) var(--ease);
  pointer-events: none; text-align: center;
}
.gk-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.gk-toast--success { background: var(--green); color: #05230f; }
.gk-toast--error   { background: var(--red);   color: #2a0808; }
.gk-toast--info    { background: var(--violet); color: #fff; }

/* Chips / badges reutilizáveis */
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .3em .8em; border-radius: var(--r-full);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border);
}
.stat-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.stat {
  text-align: center; padding: .6rem 1rem; min-width: 84px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
}
.stat b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); color: var(--brand); }
.stat span { font-size: var(--fs-xs); color: var(--text-mute); text-transform: uppercase; letter-spacing: .06em; }

/* Pop de vitória/gameover reutilizável */
.gk-modal {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(15,13,26,.55); padding: var(--sp-4);
  opacity: 0; pointer-events: none; transition: opacity var(--dur) ease;
}
.gk-modal.is-open { opacity: 1; pointer-events: auto; }
.gk-modal__card {
  width: min(100%, 420px); background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop); padding: clamp(1.5rem, 5vw, 2.4rem); text-align: center;
  transform: scale(.9) translateY(10px); transition: transform var(--dur-slow) var(--ease);
}
.gk-modal.is-open .gk-modal__card { transform: scale(1) translateY(0); }
.gk-modal__emoji { font-size: 3.2rem; line-height: 1; }
.gk-modal__title { font-size: var(--fs-xl); color: var(--brand); margin: .4rem 0; }
.gk-modal__text { color: var(--text-soft); margin-bottom: 1.2rem; }
.gk-modal__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }