/* Catch Me — écran chasseur */

.screen { position: fixed; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
[hidden] { display: none !important; }

/* ---------- accueil ---------- */
.welcome-stage { position: absolute; inset: 0; pointer-events: none; }
.welcome-stage .floater { position: absolute; width: 26vw; max-width: 150px; aspect-ratio: 1; animation: av-float 4s ease-in-out infinite; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.welcome-card {
  position: relative; width: min(92vw, 420px); padding: 32px 26px 28px; text-align: center;
  margin-top: 12vh;
}
.logo { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: 1; margin: 0 0 10px; letter-spacing: -.02em; }
.logo span { background: var(--grad-magic); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { margin: 0 0 22px; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.45; }
.name-form { display: flex; flex-direction: column; gap: 12px; }
.name-form label { font-size: .92rem; color: var(--ink-soft); }
.name-form input {
  border: 0; border-radius: 16px; padding: 14px 18px; font-size: 1.15rem; text-align: center;
  background: rgba(255,255,255,.95); color: #2a1458; outline: 3px solid transparent; transition: outline-color .2s;
}
.name-form input:focus { outline-color: var(--pink); }
.welcome-back p { margin: 0 0 16px; font-size: 1.05rem; line-height: 1.5; color: var(--ink-soft); }
.welcome-back b { color: var(--gold); }
.welcome-back { display: flex; flex-direction: column; gap: 10px; }
.link { background: none; border: 0; color: var(--ink-faint); text-decoration: underline; font-size: .9rem; padding: 6px; }

/* ---------- permissions ---------- */
.perm-card { width: min(92vw, 420px); padding: 20px 24px 26px; text-align: center; position: relative; }
.perm-hero { width: 140px; height: 140px; margin: -70px auto 0; filter: drop-shadow(0 10px 24px rgba(0,0,0,.4)); animation: av-float 3.5s ease-in-out infinite; }
.perm-card h2 { font-family: var(--font-display); font-size: 1.7rem; margin: 6px 0 4px; }
.perm-intro { color: var(--ink-soft); margin: 0 0 14px; }
.perm-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.perm-list li { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.08); border-radius: 16px; padding: 10px 14px; }
.perm-list .ico { font-size: 1.6rem; width: 40px; text-align: center; }
.perm-list b { display: block; font-size: 1rem; }
.perm-list small { color: var(--ink-faint); font-size: .82rem; line-height: 1.2; display: block; }
.perm-note { color: var(--ink-faint); font-size: .82rem; margin: 12px 0 0; }

/* ---------- chasse ---------- */
#screen-hunt { background: #000; display: block; }
#cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.magic-tint {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 50% 45%, transparent 55%, rgba(60, 20, 120, .55) 100%),
              linear-gradient(180deg, rgba(120, 70, 220, .14), rgba(255, 120, 200, .12));
  mix-blend-mode: screen;
}
.viewfinder { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.viewfinder i { position: absolute; width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.8); border-radius: 6px; }
.viewfinder i:nth-child(1) { top: calc(var(--safe-top) + 84px); left: 22px; border-right: 0; border-bottom: 0; }
.viewfinder i:nth-child(2) { top: calc(var(--safe-top) + 84px); right: 22px; border-left: 0; border-bottom: 0; }
.viewfinder i:nth-child(3) { bottom: calc(var(--safe-bottom) + 160px); left: 22px; border-right: 0; border-top: 0; }
.viewfinder i:nth-child(4) { bottom: calc(var(--safe-bottom) + 160px); right: 22px; border-left: 0; border-top: 0; }

#ar-layer { position: absolute; inset: 0; overflow: hidden; }
.ar-avatar {
  position: absolute; left: 0; top: 0; width: var(--size); height: var(--size);
  margin-left: calc(var(--size) / -2); margin-top: calc(var(--size) / -2);
  transform: translate3d(var(--x), var(--y), 0);
  transition: opacity .3s; will-change: transform;
  touch-action: manipulation; cursor: pointer;
}
.ar-avatar .ar-glow {
  position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 255, .55) 0%, rgba(196, 155, 255, .25) 40%, transparent 70%);
  animation: av-pulse 2.2s ease-in-out infinite;
}
.ar-avatar .ar-body { position: absolute; inset: 0; animation: av-float 3s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.ar-avatar .ar-tag {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  background: rgba(20, 8, 50, .72); border: 1px solid var(--glass-line); padding: 4px 12px; border-radius: 999px;
  backdrop-filter: blur(8px);
}
.ar-avatar .ar-tag small { color: var(--mint); margin-left: 6px; font-family: var(--font-body); font-weight: 800; }
.ar-avatar.far .ar-tag small { color: var(--gold); }
.ar-avatar.in-range .ar-tag { background: rgba(60, 200, 150, .85); color: #063; border-color: #baffdf; }
.ar-avatar.in-range .ar-glow { background: radial-gradient(circle, rgba(170, 255, 220, .7) 0%, rgba(140, 240, 210, .3) 40%, transparent 70%); animation-duration: 1.1s; }
.ar-avatar .ar-tap {
  position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
  font-size: 1.5rem; animation: tap-bounce 1s ease-in-out infinite; display: none;
}
.ar-avatar.in-range .ar-tap { display: block; }
@keyframes tap-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -10px); } }
.ar-avatar.captured-anim { animation: captured .6s ease-in forwards; }
@keyframes captured { to { transform: translate3d(var(--x), var(--y), 0) scale(0) rotate(40deg); opacity: 0; } }

.edge-hint { position: absolute; top: 50%; transform: translateY(-50%); font-size: 3rem; pointer-events: none; color: var(--gold); filter: drop-shadow(0 0 12px rgba(255, 215, 122, .9)); animation: edge-nudge .8s ease-in-out infinite alternate; }
.edge-hint.left { left: 12px; } .edge-hint.left .edge-arrow { display: inline-block; transform: rotate(180deg); }
.edge-hint.right { right: 12px; }
@keyframes edge-nudge { from { opacity: .6; } to { opacity: 1; } }

/* HUD */
.hud-top { position: absolute; top: calc(var(--safe-top) + 14px); left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; pointer-events: none; }
.chip { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--glass-line); background: rgba(20, 8, 50, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 999px; padding: 6px 14px 6px 6px; font-weight: 800; font-size: .95rem; }
.player-chip .initial { width: 30px; height: 30px; border-radius: 50%; background: var(--grad-magic); color: #2a1458; display: grid; place-items: center; font-family: var(--font-display); }
.points-chip { padding: 8px 16px; font-family: var(--font-display); font-size: 1.1rem; color: var(--gold); }
.points-chip .star { font-size: 1rem; }
.points-chip.bump { animation: bump .5s ease; }
@keyframes bump { 30% { transform: scale(1.25); } }

.hud-center { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 72px); display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: min(88vw, 380px); pointer-events: none; }
.hud-center > * { pointer-events: auto; }
.hud-status {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 20px; max-width: 100%;
  background: rgba(20, 8, 50, .62); text-align: left;
}
.status-text { min-width: 0; }
.status-arrow { font-size: 1.6rem; color: var(--gold); display: inline-block; transition: transform .3s ease; }
.status-text b { display: block; font-family: var(--font-display); font-weight: 600; font-size: .98rem; line-height: 1.2; }
.status-text small { color: var(--ink-faint); font-size: .78rem; line-height: 1.25; display: block; margin-top: 2px; }

.hud-bottom {
  position: absolute; bottom: calc(var(--safe-bottom) + 18px); left: 0; right: 0;
  display: flex; justify-content: space-evenly; align-items: flex-end; pointer-events: none;
}
.round-btn {
  pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: var(--ink);
}
.round-btn span { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: rgba(20, 8, 50, .55); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .15s; }
.round-btn:active span { transform: scale(.92); }
.round-btn small { font-size: .72rem; font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* radar */
.radar { pointer-events: auto; position: relative; width: 124px; height: 124px; border-radius: 50%; background: radial-gradient(circle, rgba(60, 30, 120, .75), rgba(20, 8, 50, .85)); border: 2px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; box-shadow: var(--shadow); }
.radar-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(255,255,255,.25); }
.radar-ring.r1 { inset: 30%; } .radar-ring.r2 { inset: 8%; }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(143, 240, 214, .55), transparent 30%); animation: av-spin 3s linear infinite; }
.radar-cone { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -100%); border-left: 26px solid transparent; border-right: 26px solid transparent; border-bottom: 62px solid rgba(255, 215, 122, .18); transform-origin: 50% 100%; }
.radar-me { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.radar-dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); transition: transform .4s ease; }
.radar-dot.captured { background: rgba(255,255,255,.35); box-shadow: none; }
.radar-dot.legendaire { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.radar-dot.epique { background: var(--lilac); box-shadow: 0 0 8px var(--lilac); }
.radar-n { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-size: .7rem; font-weight: 900; color: var(--ink-faint); transition: transform .3s; }

.drag-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-bottom) + 240px); padding: 10px 16px; font-size: .85rem; text-align: center; max-width: 80vw; border-radius: 16px; }

/* ---------- capture ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.capture { background: radial-gradient(circle at 50% 40%, rgba(80, 40, 160, .95), rgba(20, 8, 50, .97)); flex-direction: column; animation: fade-in .3s ease; }
@keyframes fade-in { from { opacity: 0; } }
.capture-rays { position: absolute; width: 200vmax; height: 200vmax; left: 50%; top: 40%; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.08) 0deg 12deg, transparent 12deg 24deg); animation: av-spin 20s linear infinite; pointer-events: none; }
.capture-circle { position: absolute; left: 50%; top: 40%; width: 78vmin; max-width: 420px; transform: translate(-50%, -50%); opacity: .5; }
.capture-circle svg { width: 100%; fill: none; stroke: var(--gold); stroke-width: 1.2; animation: av-spin 14s linear infinite reverse; }
.capture-avatar { position: absolute; left: 50%; top: 40%; width: 62vmin; max-width: 340px; aspect-ratio: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); animation: cap-pop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes cap-pop { from { transform: translate(-50%, -50%) scale(0) rotate(-20deg); } }
.capture-card { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 24px); transform: translateX(-50%); width: min(92vw, 400px); padding: 20px 22px 22px; text-align: center; animation: slide-up .5s .35s ease both; }
@keyframes slide-up { from { opacity: 0; transform: translate(-50%, 40px); } }
.capture-title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.capture-sub { color: var(--ink-faint); font-size: .9rem; }
.capture-name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; margin-top: 4px; }
.capture-species { color: var(--ink-soft); margin-bottom: 8px; }
.capture-points { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--gold); margin: 10px 0 14px; }
.capture-points small { font-size: 1rem; color: var(--ink-soft); font-family: var(--font-body); font-weight: 800; }

/* ---------- grimoire ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(10, 4, 30, .6); animation: fade-in .25s; }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #2b1c6a, #160d3a); border-radius: 28px 28px 0 0; border-top: 1px solid var(--glass-line); box-shadow: 0 -20px 60px rgba(0,0,0,.5); animation: sheet-up .35s cubic-bezier(.2, .9, .3, 1); padding-bottom: var(--safe-bottom); }
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet-handle { width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); margin: 10px auto 4px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 20px 0; }
.sheet-head h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0; }
.close-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: var(--ink); font-size: 1rem; }
.stats { display: flex; justify-content: space-around; padding: 14px 20px 6px; }
.stats div { text-align: center; }
.stats b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); }
.stats small { color: var(--ink-faint); font-size: .78rem; }
.tabs { display: flex; gap: 6px; margin: 8px 20px; background: rgba(255,255,255,.08); padding: 4px; border-radius: 999px; }
.tab { flex: 1; border: 0; border-radius: 999px; padding: 8px; background: none; color: var(--ink-faint); font-weight: 800; }
.tab.active { background: var(--grad-magic); color: #2a1458; }
.tab-body { overflow-y: auto; padding: 6px 20px 24px; -webkit-overflow-scrolling: touch; }
.col-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.col-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 8px 6px 10px; text-align: center; border: 0; color: var(--ink); }
.col-card .col-av { width: 100%; aspect-ratio: 1; }
.col-card.found .col-av { animation: av-float 3.4s ease-in-out infinite; }
.col-card b { display: block; font-family: var(--font-display); font-weight: 600; font-size: .95rem; margin-top: 2px; }
.col-card small { color: var(--ink-faint); font-size: .72rem; }
.col-card.found { box-shadow: inset 0 0 0 1.5px var(--rc, var(--mint)); }
.col-card .col-pts { display: inline-block; margin-top: 4px; font-size: .75rem; font-weight: 900; color: var(--gold); }
.leader { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.leader li { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.08); border-radius: 14px; padding: 10px 14px; }
.leader .rank { width: 30px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink-faint); }
.leader li:nth-child(1) .rank { color: var(--gold); } .leader li:nth-child(2) .rank { color: #d8dcee; } .leader li:nth-child(3) .rank { color: #e3a26b; }
.leader .nm { flex: 1; font-weight: 800; }
.leader .pt { color: var(--gold); font-weight: 900; }
.leader li.me { box-shadow: inset 0 0 0 1.5px var(--pink); }
.empty { text-align: center; color: var(--ink-faint); padding: 30px 10px; }

/* fiche */
.detail { background: rgba(10, 4, 30, .7); animation: fade-in .25s; z-index: 60; }
.detail-card { position: relative; width: min(88vw, 380px); padding: 0 24px 26px; text-align: center; margin-top: 60px; }
.detail-card .close-btn { position: absolute; right: 12px; top: 12px; }
.detail-avatar { width: 200px; height: 200px; margin: -70px auto 4px; filter: drop-shadow(0 16px 28px rgba(0,0,0,.45)); }
.detail-card h3 { font-family: var(--font-display); font-size: 1.8rem; margin: 8px 0 0; }
.detail-species { color: var(--ink-soft); }
.detail-card p { color: var(--ink-soft); line-height: 1.5; }
.detail-meta { color: var(--ink-faint); font-size: .85rem; }

/* ---------- divers ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 190px); transform: translate(-50%, 20px); z-index: 70; background: rgba(255,255,255,.95); color: #2a1458; padding: 12px 20px; border-radius: 999px; font-weight: 800; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: 86vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #ffd4e6; color: #8a1b4c; }

.rotate-hint { display: none; position: fixed; inset: 0; z-index: 100; background: var(--night-1); place-items: center; text-align: center; font-size: 3rem; }
.rotate-hint p { font-size: 1.1rem; color: var(--ink-soft); }
@media (orientation: landscape) and (max-height: 500px) { .rotate-hint { display: grid; } }

/* caméra indisponible */
.cam-fail { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(86vw, 340px); padding: 16px 18px; text-align: center; display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.cam-fail b { font-family: var(--font-display); font-size: 1.1rem; }
.cam-fail small { color: var(--ink-soft); line-height: 1.35; }

/* petits écrans */
@media (max-width: 400px) {
  .radar { width: 108px; height: 108px; }
  .round-btn span { width: 52px; height: 52px; font-size: 1.35rem; }
  .chip { font-size: .88rem; }
  .points-chip { font-size: 1rem; }
  .hud-center { top: calc(var(--safe-top) + 66px); }
}
@media (max-height: 700px) {
  .viewfinder i:nth-child(3), .viewfinder i:nth-child(4) { bottom: calc(var(--safe-bottom) + 140px); }
  .capture-avatar { width: 48vmin; top: 34%; }
  .capture-circle { width: 60vmin; top: 34%; }
}

/* radar cliquable → carte */
.radar-wrap { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: var(--ink); }
.radar-wrap small { font-size: .72rem; font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* ---------- carte globale ---------- */
.map-overlay { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: radial-gradient(120% 80% at 20% 0%, #3b2683 0%, transparent 60%), radial-gradient(100% 70% at 100% 100%, #6a2a84 0%, transparent 55%), var(--night-1); animation: fade-in .25s; padding-top: var(--safe-top); }
.map-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 6px; }
.map-head h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0; }
.map-head small { color: var(--ink-faint); }
.map-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 10px; }
.map-legend { display: flex; gap: 14px; justify-content: center; font-size: .78rem; color: var(--ink-soft); font-weight: 800; padding: 4px 0 2px; }
.map-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -2px; margin-right: 4px; }
.lg-rem { background: var(--gold); } .lg-done { background: var(--mint); } .lg-me { background: var(--sky); box-shadow: 0 0 0 3px rgba(140,200,255,.35); }
.reu-map { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.reu-map svg { width: 100%; height: 100%; max-height: 100%; overflow: visible; filter: drop-shadow(0 14px 30px rgba(0,0,0,.45)); }
.reu-map .com { stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-linejoin: round; transition: fill .2s; cursor: pointer; }
.reu-map .com.Nord { fill: rgba(182, 156, 255, .30); } .reu-map .com.Est { fill: rgba(143, 240, 214, .26); }
.reu-map .com.Sud { fill: rgba(255, 143, 207, .28); } .reu-map .com.Ouest { fill: rgba(140, 200, 255, .28); }
.reu-map .com.has { stroke: rgba(255,255,255,.7); }
.reu-map .com.sel { fill: rgba(255, 215, 122, .45); stroke: var(--gold); stroke-width: 3; }
.reu-map .pin { cursor: pointer; }
.reu-map .pin circle { fill: var(--gold); stroke: #2a1458; stroke-width: 3; }
.reu-map .pin.done circle { fill: var(--mint); }
.reu-map .pin text { font-family: var(--font-display); font-weight: 700; font-size: 34px; fill: #2a1458; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.reu-map .pin.done text { font-size: 30px; }
.reu-map .me { fill: var(--sky); stroke: #fff; stroke-width: 3; }
.reu-map .me-halo { fill: rgba(140, 200, 255, .3); animation: av-pulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.reu-map .nom { display: none; font-family: var(--font-body); font-weight: 800; font-size: 28px; fill: rgba(255,255,255,.85); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(20,8,50,.8); stroke-width: 5; }
.map-fallback { flex: 1; overflow-y: auto; padding: 10px; }
.map-fallback .list-row { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.08); border-radius: 14px; padding: 8px 12px; margin-bottom: 8px; }
.map-fallback .list-row .av { width: 52px; height: 52px; flex: none; }
.map-fallback .list-row b { display: block; font-family: var(--font-display); font-weight: 600; }
.map-fallback .list-row small { color: var(--ink-faint); }
.map-fallback .empty { padding: 30px 10px; }
.zone-card { margin: 8px 10px calc(var(--safe-bottom) + 10px); padding: 12px 14px; animation: slide-up-plain .25s ease; }
@keyframes slide-up-plain { from { opacity: 0; transform: translateY(16px); } }
.zone-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.zone-head b { font-family: var(--font-display); font-size: 1.15rem; }
.zone-head small { color: var(--ink-soft); font-size: .82rem; text-align: right; }
.zone-avatars { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.zone-avatars .za { flex: none; width: 88px; text-align: center; }
.zone-avatars .za .av { width: 64px; height: 64px; margin: 0 auto; }
.zone-avatars .za small { display: block; font-size: .7rem; font-weight: 800; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-avatars .za.found small { color: var(--mint); }
.zone-avatars .za.todo .av { filter: brightness(0) saturate(0); opacity: .35; }
.zone-avatars .za.todo .av * { animation-play-state: paused; }
.reu-map .nom.show, .reu-map .nom.sel { display: block; }
.reu-map .nom.sel { fill: var(--gold); }

/* indice photo + ancrage visuel */
.hint-chip { font-size: .82rem; padding: 7px 14px; background: rgba(255, 215, 122, .9); color: #4a2a05; border-color: transparent; max-width: 88vw; white-space: normal; text-align: center; }
.hint-card { position: relative; width: min(90vw, 400px); padding: 44px 18px 18px; text-align: center; }
.hint-card .close-btn { position: absolute; right: 12px; top: 12px; }
.hint-card h3 { font-family: var(--font-display); margin: 0 0 10px; font-size: 1.3rem; }
.hint-card canvas { width: 100%; height: auto; border-radius: 16px; display: block; image-rendering: pixelated; }
.hint-riddle { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.35; color: var(--gold); margin: 0 0 10px; }
.hint-help { color: var(--ink-faint); font-size: .85rem; margin: 10px 0 12px; }
.hint-card p { color: var(--ink-soft); font-size: .9rem; line-height: 1.4; margin: 12px 0 0; }
.ar-avatar.anchored .ar-glow { background: radial-gradient(circle, rgba(255, 235, 170, .8) 0%, rgba(255, 215, 122, .35) 40%, transparent 70%); animation-duration: .9s; }
.ar-avatar.anchored .ar-tag { background: rgba(255, 215, 122, .95); color: #4a2a05; border-color: #fff3c4; }

/* ---------- jauge chaud / froid : thermomètre vertical, coin droit ---------- */
.heat { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 58px; height: min(40vh, 320px); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 0 6px; border-radius: 30px; border: 2px solid rgba(255,255,255,.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow); transition: background .4s, border-color .4s; z-index: 4; }
.heat-emoji { font-size: 1.9rem; line-height: 1; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.heat-body { flex: 1; min-height: 0; display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; width: 100%; padding: 6px 0; }
.heat-body b { font-family: var(--font-display); font-weight: 700; font-size: .78rem; line-height: 1; text-shadow: 0 1px 4px rgba(0,0,0,.6); text-align: center; }
.heat-bar { flex: 1; width: 14px; border-radius: 7px; background: rgba(0,0,0,.35); overflow: hidden; display: flex; flex-direction: column-reverse; }
.heat-bar i { display: block; width: 100%; height: var(--fill, 5%); border-radius: 7px; background: linear-gradient(0deg, #6fc3ff, #ffe27a, #ff9f4a, #ff4d6d); transition: height .4s ease; }
.heat[data-level="0"] { background: rgba(60, 110, 200, .6); }
.heat[data-level="1"] { background: rgba(230, 180, 40, .65); }
.heat[data-level="2"] { background: rgba(240, 120, 40, .7); }
.heat[data-level="3"] { background: rgba(235, 50, 80, .75); border-color: #ffd77a; animation: heat-pulse .8s ease-in-out infinite; }
.heat[data-level="3"] .heat-emoji { animation: heat-shake .5s ease-in-out infinite; }
@keyframes heat-pulse { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.06); } }
@keyframes heat-shake { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
.heat-glow { position: absolute; inset: 0; pointer-events: none; transition: box-shadow .5s; }
.heat-glow[data-level="0"] { box-shadow: inset 0 0 90px rgba(90, 150, 255, .45); }
.heat-glow[data-level="1"] { box-shadow: inset 0 0 90px rgba(255, 215, 90, .5); }
.heat-glow[data-level="2"] { box-shadow: inset 0 0 110px rgba(255, 140, 60, .6); }
.heat-glow[data-level="3"] { box-shadow: inset 0 0 140px rgba(255, 70, 100, .7); animation: glow-pulse .8s ease-in-out infinite alternate; }
@keyframes glow-pulse { from { opacity: .7; } to { opacity: 1; } }

/* cadre de la cachette reconnue dans l'image */
.match-box { position: absolute; left: 0; top: 0; border: 3px dashed rgba(255, 215, 122, .55); border-radius: 18px; pointer-events: none; transition: transform .25s ease, width .25s ease, height .25s ease; z-index: 3; }
.match-box.warm { border-color: rgba(255, 226, 122, .5); }
.match-box.hot { border-color: rgba(255, 160, 74, .85); border-style: dashed; }
.match-box.found { border-color: var(--gold); border-style: solid; box-shadow: 0 0 0 4px rgba(255, 215, 122, .25), 0 0 30px rgba(255, 215, 122, .45); }
.heat-count { font-size: .68rem; font-weight: 900; color: rgba(255,255,255,.85); margin-top: -2px; }