* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #f6f2ea; color: #1c1612; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
/* Pas de zoom ni de sélection de texte si l'écran est touché par accident */
html, body { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; }
button { font-family: inherit; touch-action: manipulation; }

.screen { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3.5vmin; padding: 16px; text-align: center; }
.screen.active { display: flex; }

h1 { font-size: 8vmin; }
.primary { font-size: 7vmin; font-weight: 700; padding: 3.5vmin 9vmin; border: 0; border-radius: 3vmin; background: #e8590c; color: #fff; }
.primary:disabled { background: #bbb; }

/* Écran de départ */
#instruction { font-size: 4vmin; color: #5a5048; max-width: 30em; }
#warning { font-size: 4vmin; color: #c21818; max-width: 30em; }
#warning:empty { display: none; }
.choice { display: flex; gap: 2.5vmin; }
.choice button { font-size: 5vmin; font-weight: 700; padding: 2.5vmin 5vmin; border: 0.6vmin solid #b9b0a4; border-radius: 2.5vmin; background: #fff; color: #1c1612; }
.choice button.selected { border-color: #1c1612; background: #1c1612; color: #fff; }
#durationChoice button { font-size: 4.5vmin; padding: 2.5vmin 3vmin; white-space: nowrap; }
/* Choix de la langue : petit, dans le coin en haut à gauche */
#langChoice { position: absolute; top: 3vmin; left: 3vmin; gap: 1.5vmin; }
#langChoice button { font-size: 3.2vmin; padding: 1.2vmin 2.5vmin; border-width: 0.4vmin; border-radius: 1.5vmin; }

/* Écran de jeu */
#game { justify-content: space-between; padding: 0; gap: 0; }
#timerTrack { width: 100%; height: 3vh; background: #ddd5c8; flex: none; }
#timerBar { height: 100%; width: 100%; background: #e8590c; }
#stage { flex: 1; width: 100%; min-height: 0; position: relative; }
#hands { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-around; padding: 1vmin; }
.hand { width: 48%; height: 100%; }
.hand svg { width: 100%; height: 100%; display: block; }
.hand svg path { stroke-width: 3; }
#right svg { transform: scaleX(-1); }
#countdown { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 60vmin; font-weight: 900; }
#stage.counting #countdown { display: flex; }
#stage.counting #hands { display: none; }

#bottom { width: 100%; flex: none; padding: 1.5vh 3vw; display: flex; align-items: center; justify-content: space-between; gap: 3vw; font-size: 3.5vmin; }
#counts, #remaining { font-weight: 700; white-space: nowrap; }
#counts .ok { color: #0a8f3c; }
#counts .ko { color: #c21818; }
#heard { flex: 1; color: #6b6259; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
#stopBtn { font-size: 3.5vmin; padding: 1.5vmin 3vmin; border: 2px solid #8a8076; border-radius: 2vmin; background: #fff; color: #1c1612; }

/* Écran de score */
#scorePercent { font-size: 32vmin; font-weight: 900; line-height: 1; white-space: nowrap; }
#scoreDetail { font-size: 4vmin; color: #5a5048; }

/* Coche / croix plein écran */
#feedback { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 10; }
#feedback.ok { display: flex; background: #0a8f3c; }
#feedback.ko { display: flex; background: #c21818; }
#feedback svg { width: 80vmin; height: 80vmin; display: none; }
#feedback.ok #iconOk, #feedback.ko #iconKo { display: block; }