:root {
  --blue: #4c9be8;
  --blue-dark: #1e3a8a;
  --red: #e05252;
  --green: #3cb563;
  --orange: #e09a2a;
  --ink: #222;
  --muted: #aaa;
  --skin: #f2bb91;
  --skin-border: #b97855;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  background: #fff;
  color: var(--ink);
  font-family: 'Segoe UI', Arial, sans-serif;
  padding: 18px 14px 26px;
}

button { font-family: inherit; }

.home-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  color: #777;
  font-size: 1.05rem;
  text-decoration: none;
}

.app {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  margin: 4px 42px 2px;
  color: var(--blue-dark);
  font-size: 1.35rem;
}

.subtitle {
  min-height: 20px;
  margin-bottom: 8px;
  color: #888;
  font-size: .82rem;
}

.counter {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: .8rem;
}

.progress {
  display: flex;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin: 0 auto 10px;
}

.progress-item {
  flex: 1 1 0;
  max-width: 46px;
  min-width: 20px;
}

.progress-segment {
  height: 8px;
  border-radius: 5px;
  background: #e7e7e7;
  transition: background .2s;
}

.progress-segment.correct { background: var(--blue); }
.progress-segment.wrong { background: var(--red); }

.segment-time {
  min-height: 11px;
  padding-top: 2px;
  color: #bbb;
  font-size: .58rem;
  font-weight: 700;
}

.segment-time.t-fast { color: var(--green); }
.segment-time.t-medium { color: var(--orange); }
.segment-time.t-slow { color: var(--ink); }

.hands {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 210px;
  margin: 0 auto 2px;
}

.booklet-hand-image {
  flex: 0 0 auto;
  background-image: url('configurations_doigts_0_a_10.png');
  background-repeat: no-repeat;
  background-size: 1214px 756px;
}

.booklet-hand-image.fingers-0  { width: 106px; height: 138px; background-position: -6px -14px; }
.booklet-hand-image.fingers-1  { width: 96px;  height: 132px; background-position: -98px -312px; }
.booklet-hand-image.fingers-2  { width: 120px; height: 154px; background-position: -310px -284px; }
.booklet-hand-image.fingers-3  { width: 122px; height: 156px; background-position: -542px -282px; }
.booklet-hand-image.fingers-4  { width: 106px; height: 156px; background-position: -798px -282px; }
.booklet-hand-image.fingers-5  { width: 132px; height: 156px; background-position: -1016px -282px; }
.booklet-hand-image.fingers-6  { width: 216px; height: 152px; background-position: -26px -596px; }
.booklet-hand-image.fingers-7  { width: 204px; height: 148px; background-position: -270px -596px; }
.booklet-hand-image.fingers-8  { width: 200px; height: 144px; background-position: -512px -596px; }
.booklet-hand-image.fingers-9  { width: 198px; height: 142px; background-position: -742px -596px; }
.booklet-hand-image.fingers-10 { width: 218px; height: 138px; background-position: -978px -600px; }

.ten-hand-image {
  width: 264px;
  height: 172px;
  flex: 0 0 264px;
  position: relative;
  background-image: url('configurations_complement_10_deux_mains.png');
  background-repeat: no-repeat;
  background-size: 264px 1722px;
}

.ten-hand-image.fingers-1  { --ten-row-y: 0; }
.ten-hand-image.fingers-2  { --ten-row-y: -172px; }
.ten-hand-image.fingers-3  { --ten-row-y: -344px; }
.ten-hand-image.fingers-4  { --ten-row-y: -516px; }
.ten-hand-image.fingers-5  { --ten-row-y: -688px; }
.ten-hand-image.fingers-6  { background-position: 0 -860px; }
.ten-hand-image.fingers-7  { background-position: 0 -1034px; }
.ten-hand-image.fingers-8  { background-position: 0 -1206px; }
.ten-hand-image.fingers-9  { background-position: 0 -1378px; }
.ten-hand-image.fingers-10 { background-position: 0 -1550px; }

/*
 * Convention stable autour de 5 : la main gauche est toujours la main-pivot.
 * Pour 1 à 5, on inverse uniquement les deux moitiés de la planche existante :
 * la main fermée reste à gauche et la quantité à lire apparaît à droite.
 */
.ten-hand-image.fingers-1,
.ten-hand-image.fingers-2,
.ten-hand-image.fingers-3,
.ten-hand-image.fingers-4,
.ten-hand-image.fingers-5 {
  background-image: none;
}

.ten-hand-image.fingers-1::before,
.ten-hand-image.fingers-1::after,
.ten-hand-image.fingers-2::before,
.ten-hand-image.fingers-2::after,
.ten-hand-image.fingers-3::before,
.ten-hand-image.fingers-3::after,
.ten-hand-image.fingers-4::before,
.ten-hand-image.fingers-4::after,
.ten-hand-image.fingers-5::before,
.ten-hand-image.fingers-5::after {
  content: "";
  position: absolute;
  top: 0;
  width: 132px;
  height: 172px;
  background-image: url('configurations_complement_10_deux_mains.png');
  background-repeat: no-repeat;
  background-size: 264px 1722px;
}

.ten-hand-image.fingers-1::before,
.ten-hand-image.fingers-2::before,
.ten-hand-image.fingers-3::before,
.ten-hand-image.fingers-4::before,
.ten-hand-image.fingers-5::before {
  left: 0;
  background-position: -132px var(--ten-row-y);
}

.ten-hand-image.fingers-1::after,
.ten-hand-image.fingers-2::after,
.ten-hand-image.fingers-3::after,
.ten-hand-image.fingers-4::after,
.ten-hand-image.fingers-5::after {
  left: 132px;
  background-position: 0 var(--ten-row-y);
}

.five-hand-image {
  width: 140px;
  height: 170px;
  flex: 0 0 140px;
  background-image: url('configurations_complement_5_une_main.png');
  background-repeat: no-repeat;
  background-size: 140px 1016px;
}

.five-hand-image.fingers-0 { background-position: 0 0; }
.five-hand-image.fingers-1 { background-position: 0 -170px; }
.five-hand-image.fingers-2 { background-position: 0 -338px; }
.five-hand-image.fingers-3 { background-position: 0 -508px; }
.five-hand-image.fingers-4 { background-position: 0 -678px; }
.five-hand-image.fingers-5 { background-position: 0 -846px; }

.instruction {
  min-height: 21px;
  margin: 0 0 6px;
  color: #777;
  font-size: .83rem;
}

.equation {
  min-height: 34px;
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 1.35rem;
  font-weight: 800;
}

.equation.wrong { color: var(--red); }

.answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.answer-card {
  min-width: 0;
  padding: 10px 8px 9px;
  border: 2px solid #eee;
  border-radius: 14px;
  background: #fff;
}

.answer-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 27px;
  color: #555;
  font-size: .78rem;
  font-weight: 700;
}

.answer-value {
  width: 50px;
  height: 39px;
  margin: 3px auto 8px;
  border: 2px solid #ddd;
  border-radius: 10px;
  color: #333;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 35px;
}

.answer-value.active { border-color: var(--blue); }

.number-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.nkey {
  min-width: 0;
  min-height: 42px;
  padding: 7px 2px;
  border: 2px solid #eee;
  border-radius: 11px;
  background: #f9f9f9;
  color: #222;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 700;
  user-select: none;
  transition: background .15s, border-color .15s, transform .1s;
}

.nkey:active { background: #e8f2fd; transform: scale(.95); }
.nkey.selected { border-color: var(--blue); background: #e8f2fd; color: #1e5d9b; }
.nkey:focus-visible { outline: 3px solid rgba(76,155,232,.28); outline-offset: 1px; }

.hidden { display: none !important; }

.end-screen {
  padding-top: 54px;
}

.end-screen h2 {
  color: var(--blue-dark);
  font-size: 1.5rem;
}

.end-text {
  margin: 7px 0 22px;
  color: #777;
}

.recap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-bottom: 24px;
}

.tile {
  min-width: 66px;
  padding: 7px 6px;
  border: 3px solid transparent;
  border-radius: 10px;
  background: #f4f4f4;
}

.tile.had-wrong { border-color: var(--red); }
.tile.t-fast { background: #d6f5e3; color: #1a7a40; }
.tile.t-medium { background: #fdecd0; color: #a05a00; }
.tile.t-slow { background: #e8e8e8; color: #222; }
.tile-equation { font-size: .72rem; font-weight: 700; }
.tile-time { margin-top: 2px; font-size: .86rem; font-weight: 800; }
.tile-unit { font-size: .55rem; opacity: .7; }

.end-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
}

.action-btn {
  width: 100%;
  padding: 13px 20px;
  border: 0;
  border-radius: 14px;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.action-btn.secondary { background: #eef3f8; color: #4f6478; }

@media (max-width: 390px) {
  body { padding-left: 8px; padding-right: 8px; }
  h1 { font-size: 1.18rem; }
  .hands { min-height: 190px; margin-top: -8px; }
  .answers { gap: 6px; }
  .answer-card { padding-left: 5px; padding-right: 5px; }
  .nkey { min-height: 40px; font-size: 1.05rem; }
}

@media (max-height: 690px) {
  body { padding-top: 10px; }
  .hands { min-height: 180px; margin-top: -12px; }
  .instruction { margin-top: -5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}