/* Catch Me — jetons de design et animations des avatars, partagés par le chasseur et l'admin */

:root {
  --night-1: #140c33;
  --night-2: #23175a;
  --night-3: #3a2a85;
  --ink: #fdfaff;
  --ink-soft: rgba(253, 250, 255, .72);
  --ink-faint: rgba(253, 250, 255, .45);
  --pink: #ff8fcf;
  --lilac: #b69cff;
  --mint: #8ff0d6;
  --sky: #8cc8ff;
  --gold: #ffd77a;
  --glass: rgba(255, 255, 255, .12);
  --glass-strong: rgba(255, 255, 255, .2);
  --glass-line: rgba(255, 255, 255, .28);
  --shadow: 0 18px 50px rgba(10, 4, 40, .45);
  --grad-magic: linear-gradient(135deg, #ff9ad5 0%, #c49bff 50%, #8cc8ff 100%);
  --grad-gold: linear-gradient(135deg, #fff1b8 0%, #ffc86b 100%);
  --radius: 22px;
  --pill: 14px; /* bulles, puces, boutons : rectangles à petit arrondi (jamais de pilule qui devient ronde sur deux lignes) */
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: radial-gradient(120% 80% at 20% 0%, #4b2f9e 0%, transparent 60%),
              radial-gradient(100% 70% at 100% 100%, #7a2f8f 0%, transparent 55%),
              var(--night-1);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 0; border-radius: var(--pill); padding: .95em 1.6em;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .01em;
  background: var(--grad-magic); color: #2a1458;
  box-shadow: 0 10px 30px rgba(196, 155, 255, .45), inset 0 2px 0 rgba(255, 255, 255, .55);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s;
}
.btn:active { transform: scale(.96); }
.btn:disabled { filter: grayscale(.6) brightness(.8); }
.btn-ghost {
  background: var(--glass); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--glass-line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn-gold { background: var(--grad-gold); color: #5a3405; box-shadow: 0 10px 30px rgba(255, 200, 107, .45), inset 0 2px 0 rgba(255,255,255,.6); }
.btn-sm { padding: .55em 1em; font-size: .9rem; }
.btn-icon { width: 48px; height: 48px; padding: 0; border-radius: 50%; font-size: 1.3rem; }

.glass {
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.rarity {
  display: inline-block; padding: .18em .7em; border-radius: var(--pill);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #22123f;
}

/* ---------- avatars : animations internes ---------- */
.av-svg { width: 100%; height: 100%; overflow: visible; display: block; }

.av-blink   { animation: av-blink 4.2s infinite; }
.av-sway    { animation: av-sway 2.4s ease-in-out infinite alternate; }
.av-flap    { animation: av-flap .55s ease-in-out infinite alternate; }
.av-twinkle { animation: av-twinkle 1.9s ease-in-out infinite; }
.av-pulse   { animation: av-pulse 2.6s ease-in-out infinite; }
.av-wobble  { animation: av-wobble 3.2s ease-in-out infinite; }
.av-wave    { animation: av-wave 1.6s ease-in-out infinite alternate; }
.av-delay   { animation-delay: -.8s; }
.av-orbit   { animation: av-orbit 5s linear infinite; }
.av-spin    { animation: av-spin 3s linear infinite; }
.av-wand    { animation: av-wand 1.8s ease-in-out infinite alternate; }
.av-tilt    { animation: av-tilt 3s ease-in-out infinite alternate; }
.av-rise    { animation: av-rise 2.4s ease-out infinite; }
.av-fall    { animation: av-fall 2.4s ease-in infinite; }
.av-trail   { animation: av-trail 1.4s ease-in-out infinite alternate; }
.av-shimmer { animation: av-shimmer 3s ease-in-out infinite; }

@keyframes av-blink   { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
@keyframes av-sway    { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes av-flap    { from { transform: rotate(10deg); } to { transform: rotate(-14deg) scaleX(.8); } }
@keyframes av-twinkle { 0%, 100% { opacity: .15; transform: scale(.45) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
@keyframes av-pulse   { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes av-wobble  { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes av-wave    { from { transform: rotate(6deg); } to { transform: rotate(-16deg); } }
@keyframes av-orbit   { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes av-spin    { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes av-wand    { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
@keyframes av-tilt    { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes av-rise    { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px) scale(1.15); } }
@keyframes av-fall    { 0% { opacity: 0; transform: translateY(-10px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(22px); } }
@keyframes av-trail   { from { opacity: .7; transform: translate(4px, -4px); } to { opacity: 1; transform: translate(-3px, 3px); } }
@keyframes av-shimmer { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

/* flottement global d'un avatar (posé sur l'élément qui contient le SVG) */
.av-float { animation: av-float 3s ease-in-out infinite; }
@keyframes av-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }

.av-silhouette .av-svg { filter: brightness(0) saturate(0); opacity: .28; }
.av-silhouette .av-svg * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .av-flap { animation-duration: 1.4s; }
  .av-float { animation-duration: 6s; }
}

/* ---------- plan de la maison (isométrique, partagé admin / chasseur ; dessiné par js/plan.js) ---------- */
.iso-plan { display: block; overflow: visible; font-family: var(--font-body); }
.iso-room { cursor: pointer; }
.iso-room.sel .iso-floor { filter: brightness(1.3); }
.iso-room-name { font-family: var(--font-display); font-weight: 600; fill: #fff; pointer-events: none; }
.iso-pill { fill: rgba(20, 8, 50, .82); stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.iso-name.sel .iso-pill { stroke: var(--gold); stroke-width: 2; }
.iso-name.sel .iso-room-name { fill: var(--gold); }
.iso-emoji { pointer-events: none; }
.iso-shadow { fill: rgba(10, 4, 30, .45); }
.iso-creature { cursor: pointer; }
.iso-creature.captured { opacity: .6; }
.iso-creature.captured .av-svg { filter: grayscale(1); }
.iso-creature.unknown .av-svg { filter: brightness(0) saturate(0); opacity: .4; }
.iso-creature.unknown .av-svg * { animation-play-state: paused; }
.iso-creature.selected .iso-shadow { fill: rgba(255, 215, 122, .85); }
.iso-question { fill: #fff; font-family: var(--font-display); font-weight: 700; paint-order: stroke; stroke: rgba(20, 8, 50, .8); stroke-width: 3px; pointer-events: none; }
.iso-bob { animation: iso-bob 2.6s ease-in-out infinite; }
@keyframes iso-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.iso-label { font-size: 16px; font-weight: 800; fill: #fff; paint-order: stroke; stroke: rgba(20, 8, 50, .8); stroke-width: 3px; pointer-events: none; }
.iso-badge circle { fill: var(--gold); stroke: #2a1458; stroke-width: 2.5; r: 19px; }
.iso-badge.done circle { fill: var(--mint); }
.iso-badge text { font-family: var(--font-display); font-weight: 700; font-size: 20px; fill: #2a1458; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .iso-bob { animation: none; } }