/* ============================================================
   Base — global resets & screen shell
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-ink);
  overflow: hidden; /* game screens don't scroll */
  user-select: none;
}

#app {
  height: 100%;
}

/* The screen shell: header row pinned to top, play area fills the rest. */
.screen {
  height: 100%;
  position: relative; /* anchors screen overlays (e.g. complete panel) */
  display: grid;
  grid-template-rows: auto 1fr;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

/* ---- Shared screen feedback ------------------------------------------
   A warm, very subtle flash when THE button is pressed. Any screen can
   drop a <div class="screen-flash" :class="{ 'is-active': ... }"> in. */

.screen-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    60% 60% at 50% 55%,
    rgba(255, 194, 75, 0.10),
    rgba(255, 194, 75, 0) 70%
  );
  opacity: 0;
}

.screen-flash.is-active {
  animation: screen-flash 260ms ease-out both;
}

@keyframes screen-flash {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  100% { opacity: 0; }
}