/* Johny le lapin : sa promenade au fond de l'eau, son record sur la page d'accueil et son mini-jeu secret (johny-game.js). */

/* --- le lapin qui se promène sur le sable -------------------------------------------------------------------------- */

.johny-lane {
  position: absolute; left: 0; right: 0; z-index: 5; pointer-events: none;
  bottom: .3rem; /* tout en bas de .deep : la mention de la source (.page-credit) est juste en dessous */
  height: 3.8rem;
}
.johny {
  position: absolute; left: 0; bottom: 0; width: 3.1rem; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer; pointer-events: auto;
  will-change: transform; -webkit-tap-highlight-color: transparent;
  /* le soir il s'assombrit avec le sable (--dayn : 1 en plein jour, 0 la nuit) */
  filter: brightness(calc(.62 + .38 * var(--dayn, 1)));
}
.johny::before { content: ""; position: absolute; inset: -.6rem -.5rem -.3rem; } /* zone de toucher plus large que le dessin */
.johny::after { /* son ombre sur le sable */
  content: ""; position: absolute; left: 10%; right: 6%; bottom: -.12rem; height: .42rem; border-radius: 50%;
  background: rgba(0, 0, 0, .2); z-index: -1;
}
.johny-art { display: block; width: 100%; height: auto; overflow: visible; }
.johny[data-facing="-1"] .johny-art { transform: scaleX(-1); }
.johny:focus-visible { outline: 2px solid var(--glow); outline-offset: .25rem; border-radius: .6rem; }
.johny .ear { transform-box: view-box; }
.johny[data-mode="sit"] .ear-a { animation: ear-twitch 6s ease-in-out infinite; }
.johny[data-mode="sit"] .ear-b { animation: ear-twitch 6s ease-in-out -2.4s infinite; }
@keyframes ear-twitch {
  0%, 70%, 100% { transform: rotate(0); }
  76% { transform: rotate(-14deg); }
  82% { transform: rotate(4deg); }
  88% { transform: rotate(-9deg); }
}
.johny-bubble {
  position: absolute; bottom: 2.4rem; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .14);
}

/* --- le record, sur la page d'accueil (seulement quand il existe) ---------------------------------------------------- */

.record { margin-top: 2rem; }
.record-card {
  margin: 0; display: grid; justify-items: center; gap: .1rem;
  padding: 1rem .8rem 1.1rem; border-radius: 1.1rem; text-align: center;
  background: var(--card); border: 1px solid var(--card-line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.record-card::before { content: "🐰"; font-size: 1.35rem; line-height: 1; margin-bottom: .25rem; }
.record-label { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; padding-left: .24em; color: var(--muted); }
.record-score {
  font-family: var(--serif); font-size: 2.5rem; line-height: 1.1; color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.record-who { font-size: .86rem; color: var(--muted); overflow-wrap: anywhere; max-width: 100%; }
.record:not([hidden]) { animation: fade-in .8s ease both; }

/* --- le jeu : un plein écran avec une zone de jeu 9:16 ----------------------------------------------------------------- */

html.jj-open, html.jj-open body { overflow: hidden; }

.jj {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  padding: max(.5rem, env(safe-area-inset-top)) .5rem max(.5rem, env(safe-area-inset-bottom));
  /* Fond OPAQUE, sans flou : un voile transparent obligerait le téléphone à repeindre la page animée qui est derrière
     (vagues, bulles, poissons) à chaque image du jeu ; opaque, il peut l'ignorer. */
  background: #020a12;
  overscroll-behavior: contain; touch-action: none;
  animation: jj-in .25s ease both;
}
.jj[hidden] { display: none; }
@keyframes jj-in { from { opacity: 0; } to { opacity: 1; } }

.jj-frame {
  position: relative; overflow: hidden; border-radius: 1.1rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .14);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  /* les menus grandissent avec la zone de jeu (un téléphone ≈ 1, un grand écran jusqu'à 1,4) */
  font-size: calc(16px * max(.8, min(var(--jj-scale, 1), 1.4)));
  color: #fff6e6; font-family: var(--sans);
}
.jj-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }

.jj-close {
  position: absolute; top: .55rem; right: .55rem; z-index: 3; width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(8, 24, 40, .6); color: #fff; font-size: 1rem; line-height: 1;
}
.jj-close:focus-visible, .jj-btn:focus-visible, .jj-input:focus-visible { outline: 2px solid #ffd98a; outline-offset: 2px; }

.jj-panel {
  position: absolute; inset: 0; z-index: 2; padding: 1.2em; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65em; text-align: center;
  background: radial-gradient(ellipse at 50% 42%, rgba(6, 22, 40, .55), rgba(6, 22, 40, .9));
}
.jj-panel[hidden] { display: none; }
.jj-panel.is-ready { animation: jj-pop .35s ease both; }
@keyframes jj-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.jj-title { margin: 0; font-family: var(--serif); font-size: 2.25em; font-weight: 600; line-height: 1.1; text-wrap: balance; }
.jj-title-record { color: #ffd98a; }
.jj-sub { margin: 0; font-size: 1.05em; color: #cfe3f0; text-wrap: balance; }
.jj-help, .jj-tips, .jj-note { margin: 0; font-size: .86em; line-height: 1.45; color: #a9c4d6; max-width: 20em; text-wrap: balance; }
.jj-note { color: #cfe3f0; }
.jj-record { margin: 0; font-size: .9em; color: #ffd98a; overflow-wrap: anywhere; max-width: 100%; }
.jj-done { margin: 0; font-size: 1.05em; color: #ffd98a; }

.jj-final { margin: 0; display: grid; gap: .1em; }
.jj-final-label { font-size: .9em; color: #cfe3f0; }
.jj-final-score { font-family: var(--serif); font-size: 3.4em; font-weight: 600; line-height: 1.05; color: #fff6e6; font-variant-numeric: tabular-nums; }

.jj-btn {
  min-width: 10em; min-height: 44px; padding: .7em 1.4em; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 1em; color: inherit;
  border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .1);
  -webkit-tap-highlight-color: transparent;
}
.jj-btn:disabled { opacity: .55; cursor: default; }
.jj-primary { border-color: transparent; background: linear-gradient(180deg, #ffd98a, #ff9f80); color: #3b2410; font-weight: 700; }
.jj-ghost { background: transparent; }

.jj-form { display: grid; gap: .55em; width: min(100%, 17em); justify-items: center; }
.jj-label { font-size: .85em; color: #cfe3f0; }
.jj-input {
  width: 100%; padding: .7em .9em; border-radius: .8em; text-align: center;
  font: inherit; font-size: max(16px, 1em); /* 16 px minimum : iOS ne zoome pas la page quand on touche le champ */
  color: #fff; border: 1px solid rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .13);
  -webkit-user-select: text; user-select: text;
}
.jj-input::placeholder { color: rgba(255, 255, 255, .5); }
.jj-error { margin: 0; min-height: 1.3em; font-size: .88em; color: #ffb4a8; }
.jj-form .jj-btn { width: 100%; }