/* Le terrain de jeu (js/game/). Plein écran, aux couleurs du site. */
html, body.game { height: 100%; margin: 0; overflow: hidden; background: #e5cbbb; overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; }
html { -webkit-tap-highlight-color: transparent; }
#game { position: fixed; touch-action: none; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s var(--ease-out); }
body.is-ready #game { opacity: 1; }

.game__back, .hud > p, .game__hint, .game__loader { font-family: var(--font); color: var(--ink); }
.game__back {
  position: fixed; left: max(16px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); z-index: 5;
  padding: .7em 1.1em; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: transform .3s var(--ease-out);
}
.game__back:hover { transform: scale(1.05); }

.hud { position: fixed; right: max(18px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); z-index: 4; display: grid; gap: 6px; justify-items: end; pointer-events: none; }
.hud p { margin: 0; }
.hud__speed { display: flex; align-items: baseline; gap: .35em; font-weight: 700; }
.hud__speed b { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; }
.hud__speed span { font-size: .95rem; font-weight: 500; opacity: .7; }
.hud__drift { font-weight: 700; font-size: clamp(1.1rem, 2.4vw, 1.6rem); padding: .35em .8em; border-radius: 999px; background: #ca6f57; color: #fff6ee; }
.hud__drift b { font-variant-numeric: tabular-nums; }
.hud__drift i { font-style: normal; margin-left: .3em; opacity: .85; }
.hud__best { font-size: .85rem; opacity: .75; }
.hud__best b { font-variant-numeric: tabular-nums; }

.game__hint {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 3; margin: 0; max-width: 92vw; text-align: center;
  padding: .7em 1.2em; border-radius: 999px; background: rgba(58, 36, 32, .78); color: #fff6ee; font-size: .95rem; transition: opacity .6s var(--ease-out);
}
.game__hint.is-gone { opacity: 0; pointer-events: none; }
.game__hint kbd { font: inherit; font-weight: 700; padding: .05em .45em; border-radius: 6px; background: rgba(255, 246, 238, .2); }
.game__loader { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; font-size: 1.1rem; z-index: 6; }
.game__loader[hidden] { display: none; }

/* Commandes tactiles : à gauche le curseur de direction, à droite Gaz (gros) avec Frein et Drift */
.pad { display: none; }
@media (pointer: coarse) {
  .game__hint { display: none; }
  .pad { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; position: fixed; inset: auto max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); z-index: 5; pointer-events: none; }
  .pad, .pad * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .steer {
    pointer-events: auto; touch-action: none; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
    width: min(54vw, 300px); height: 84px; border-radius: 42px; background: rgba(255, 246, 238, .62); border: 2px solid rgba(58, 36, 32, .3);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: rgba(58, 36, 32, .45); font-size: 1.1rem;
  }
  .steer i { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .12s ease-out, background .15s; }
  .steer.is-on i { background: #ca6f57; transition: none; }
  .pad__right { display: flex; align-items: flex-end; gap: 10px; }
  .pad__small { display: grid; gap: 10px; }
  .pad button {
    pointer-events: auto; touch-action: none; font: 700 1rem var(--font); color: var(--ink); background: rgba(255, 246, 238, .7); border: 2px solid rgba(58, 36, 32, .32); border-radius: 22px;
    min-width: 82px; height: 56px; padding: 0 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .08s, background .08s;
  }
  .pad button.is-on { background: #ca6f57; color: #fff6ee; transform: scale(.94); }
  .pad__gas { min-width: 104px; height: 118px; font-size: 1.2rem; border-radius: 30px; }
  .pad__hb { background: rgba(202, 111, 87, .5); }
}
@media (pointer: coarse) and (max-width: 420px) {   /* téléphone étroit : tout doit tenir sur la largeur */
  .steer { width: 46vw; height: 76px; padding: 0 12px; }
  .steer i { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .pad button { min-width: 68px; height: 52px; padding: 0 8px; }
  .pad__gas { min-width: 88px; height: 108px; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 540px) {   /* couché : un peu moins haut, plus de place au jeu */
  .steer { height: 70px; width: min(34vw, 300px); }
  .pad__gas { height: 96px; }
  .pad button { height: 46px; }
}
@media (prefers-reduced-motion: reduce) { #game { transition: none; } }