/* ==========================================================================
   Base : reset, typographie, structure d'écran
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh; /* repli pour les navigateurs sans dvh */
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

h1, h2, h3, p, ol, ul {
  margin: 0;
}

ol, ul {
  padding: 0;
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Conteneur de l'application : largeur d'un téléphone, centré sur ordinateur
   -------------------------------------------------------------------------- */

#app {
  position: relative;
  max-width: var(--app-width);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
}

@media (min-width: 560px) {
  #app {
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
}

/* --------------------------------------------------------------------------
   Écran : barre du haut, contenu défilant, pied fixe
   -------------------------------------------------------------------------- */

.screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  animation: screen-in var(--t-med) var(--ease);
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.screen__body {
  flex: 1;
  padding: 0 var(--gutter) var(--s-8);
}

.screen__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--gutter) calc(var(--s-4) + var(--safe-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.screen__footer > * {
  flex: 1;
}

/* Écrans de jeu touchés rapidement et à répétition : pas de zoom au double appui (iOS). */
.table-display,
.guess-screen,
.reveal {
  touch-action: manipulation;
}

/* Repli pour les navigateurs sans color-mix() (iOS < 16.2) : teintes unies équivalentes. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .game-tile,
  .chip[aria-pressed="true"],
  .guess-zone--found {
    background: var(--surface-2);
  }
  .tag--accent,
  .chip[aria-pressed="true"] {
    border-color: var(--accent);
  }
  .tag--success {
    border-color: var(--success);
  }
  .tag--danger,
  .btn--danger {
    border-color: var(--danger);
  }
  .btn--accent:active {
    filter: brightness(0.88);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* « transition: none » et non une durée très courte : une durée non nulle activerait
     des transitions sur toutes les propriétés (taille du texte comprise), ce qui fausserait
     les mesures du Table Display. */
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}