@font-face { font-family: Lato; font-weight: 700; src: url(fonts/lato-700.woff) format('woff'); }
@font-face { font-family: Lato; font-weight: 900; src: url(fonts/lato-900.woff) format('woff'); }

:root {
  --forest-a: #387f43;
  --forest-b: #3f8a4a;
  --forest-deep: #235a2c;
  --grass: #7FBF60;
  --cell-light: #ADDE8B;
  --cell-dark: #9BD378;
  --cell-used: #E4F4D8;
  --card: #FFFDF3;
  --amber: #FFB43D;
  --amber-deep: #D98F1F;
  --ink: #2F4A22;
  --pick: #FFD34D;
  --bad: #D83A2E;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--forest-a) repeating-conic-gradient(var(--forest-a) 0% 25%, var(--forest-b) 0% 50%) 0 0 / 22vmax 22vmax;
  color: var(--ink);
  font: 700 16px/1.3 Lato, system-ui, sans-serif;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; }
img { display: block; }

.app { position: fixed; inset: 0; display: flex; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); gap: 10px; }

/* Bandeau du haut */
.top { display: flex; align-items: center; gap: 10px; flex: none; }
.logo { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 3px 0 var(--forest-deep); }
.brand { margin: 0; flex: 1; font-weight: 900; font-size: 24px; color: var(--card); text-shadow: 0 3px 0 var(--forest-deep); }
.sound { width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255, 253, 243, .18); color: var(--card); font-size: 22px; font-weight: 900; cursor: pointer; }
.sound.off { opacity: .55; text-decoration: line-through; }
.cta { border: 0; cursor: pointer; font-weight: 900; color: #3a2a05; background: var(--amber); box-shadow: 0 5px 0 var(--amber-deep); border-radius: 999px; }
.cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--amber-deep); }
.cta.small { min-height: 44px; padding: 0 18px; font-size: 17px; }
.cta.big { min-height: 64px; padding: 0 36px; font-size: 24px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.05); } }

/* Zone de jeu : colonne en portrait, deux colonnes en paysage */
.play { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.side { display: flex; flex-direction: column; gap: 8px; flex: none; }
.level { margin: 0; text-align: center; font-weight: 900; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--pick); text-shadow: 0 2px 0 var(--forest-deep); }
.say { margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3.4em; padding: 10px 14px; background: var(--card); border-radius: 16px; font-size: 17px; box-shadow: 0 4px 0 var(--forest-deep); }
.say.bad { color: var(--bad); }
.tray { display: flex; justify-content: center; gap: 4px; min-height: 36px; }
.tray img { width: 36px; height: 36px; filter: grayscale(1) opacity(.45); transition: filter .25s, transform .25s; }
.tray img.done { filter: none; transform: scale(1.08); }

.board-wrap { flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; }
.board {
  --n: 6;
  position: relative;
  width: min(100cqw, 100cqh); aspect-ratio: 1;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(var(--n), minmax(0, 1fr)); gap: 1.2%;
  padding: 2.4%; background: var(--grass); border-radius: 4%;
  box-shadow: 0 6px 0 var(--forest-deep);
}
.board.enter { animation: enter .45s cubic-bezier(.3, 1.3, .6, 1); }
@keyframes enter { from { transform: scale(.85); opacity: 0; } }

.cell { position: relative; min-width: 0; min-height: 0; aspect-ratio: 1; padding: 7%; border: 0; border-radius: 14%; cursor: pointer; display: grid; place-items: center; transition: background-color .2s; }
.cell.light { background: var(--cell-light); }
.cell.dark { background: var(--cell-dark); }
.cell.used { background: var(--cell-used); }
.cell:disabled { cursor: default; }
.cell img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.cell.picked { box-shadow: inset 0 0 0 4px var(--pick); background: #FFF3C4; }
.cell .animal { position: relative; z-index: 2; }
.cell img { position: absolute; inset: 7%; width: 86%; height: 86%; }
.cell .animal { position: absolute; }
.dot { width: 34%; aspect-ratio: 1; border-radius: 50%; animation: dot .25s cubic-bezier(.3, 1.4, .6, 1); }
@keyframes dot { from { transform: scale(0); } }

.links { position: absolute; inset: 2.4%; width: 95.2%; height: 95.2%; pointer-events: none; z-index: 1; }
.links line { stroke-width: .06; stroke-dasharray: .015 .13; stroke-linecap: round; }

.hand { position: absolute; z-index: 5; width: 13%; pointer-events: none; animation: press 1.2s ease-in-out infinite; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3)); transition: left .35s ease, top .35s ease; }
.hand[hidden] { display: none; }
@keyframes press { 45% { transform: translate(-8%, -10%) scale(.88); } }
.cell.cue { z-index: 3; box-shadow: 0 0 0 4px var(--pick); animation: ripple 1.2s ease-out infinite; }
@keyframes ripple { from { box-shadow: 0 0 0 4px var(--pick), 0 0 0 4px rgba(255, 211, 77, .9); } to { box-shadow: 0 0 0 4px var(--pick), 0 0 0 18px rgba(255, 211, 77, 0); } }

.landing { animation: land .34s cubic-bezier(.3, 1.3, .6, 1); }
@keyframes land { from { transform: translate(var(--from-x), var(--from-y)) scale(.6); } }
.refuse { animation: refuse .3s; background: #F6C3BC !important; }
@keyframes refuse { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.won .animal { animation: hop .5s ease-out 2; }
@keyframes hop { 40% { transform: translateY(-28%) scale(1.1); } }

/* Plan de fin */
.end { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: rgba(23, 71, 40, .78); animation: fade .35s ease; }
.end[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.end-card { width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 20px 30px; text-align: center; background: var(--card); border-radius: 28px; box-shadow: 0 8px 0 var(--forest-deep); animation: enter .5s cubic-bezier(.3, 1.3, .6, 1); }
.end-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 4px 0 #cfc8b4; }
.end-title { margin: 0; font-weight: 900; font-size: 38px; color: var(--forest-deep); }
.end-text { margin: 0; font-size: 18px; }
.end-animals { display: flex; justify-content: center; gap: 2px; }
.end-animals img { width: 13%; max-width: 52px; animation: hop .6s ease-out infinite alternate; }
.end-animals img:nth-child(2n) { animation-delay: .2s; }

@media (orientation: landscape) {
  .play { flex-direction: row; align-items: stretch; }
  .side { width: min(36vw, 360px); justify-content: center; }
  .say { font-size: 18px; min-height: 5em; }
  .tray { flex-wrap: wrap; }
}
@media (max-height: 560px) and (orientation: portrait), (max-width: 340px) {
  .say { font-size: 15px; min-height: 3em; padding: 8px 10px; }
  .brand { font-size: 20px; }
  .logo { width: 34px; height: 34px; }
}
@media (max-height: 420px) and (orientation: landscape) {
  .top .brand { font-size: 18px; }
  .end-card { gap: 8px; padding: 14px; }
  .end-icon { width: 60px; height: 60px; }
  .end-title { font-size: 28px; }
  .end-text { font-size: 15px; }
}