.observation-scenes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}.observation-scenes.single{grid-template-columns:1fr}.observation-scenes h3{font-size:1rem;margin-bottom:8px}.observation-scroll{overflow:auto;border:2px solid #6d8b9c;border-radius:14px;background:#0c243a;max-height:65vh;touch-action:pan-x pan-y}.observation-zoom{min-width:100%}.observation-scene{display:block;width:100%;height:auto;aspect-ratio:3/2;cursor:crosshair}.observation-scene [data-find-person]{cursor:pointer}.observation-scene [data-find-person]:focus-visible{outline:none;filter:drop-shadow(0 0 4px #ffe7a1)}.observation-stats{display:flex;flex-wrap:wrap;gap:14px;color:#d1deeb;font-size:.9rem}.observation-target{display:flex;align-items:center;gap:15px;background:#19364f;border-radius:12px;padding:6px 16px;margin:14px 0}.observation-target svg{width:66px;height:75px}.observation-target span{font-size:.9rem}.observation-level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:20px 0}#observation-shell .toolbar{flex-wrap:wrap}#observation-shell .button{min-height:48px}dialog:has(#observation-shell){width:min(1100px,95vw);max-width:1100px}#observation-status{min-height:28px;color:#ebd4a4}@media(max-width:650px){.observation-scenes{grid-template-columns:1fr;gap:18px}.observation-level-grid{grid-template-columns:repeat(4,1fr);gap:8px}.observation-stats{gap:8px;font-size:.82rem}#observation-shell .toolbar .button{flex:1 1 140px;font-size:.88rem}}


/* ==========================================================
   OBSERVATION — THÈME REFUGE ADULTE
   ========================================================== */

#observation-shell{
  color:#dce5ec;
}

#observation-shell > h2,
#observation-levels > h2{
  color:#f1d39a;
  letter-spacing:.02em;
}

.observation-scenes section{
  padding:12px;
  border:1px solid rgba(190,158,102,.22);
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(25,38,52,.96),rgba(11,20,31,.98));
  box-shadow:
    0 14px 32px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.03);
}

.observation-scenes h3{
  color:#d9c18f;
  letter-spacing:.04em;
}

.observation-scroll{
  border:1px solid rgba(196,164,105,.38);
  border-radius:12px;
  background:#08131e;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,.32),
    0 8px 22px rgba(0,0,0,.25);
}

.observation-scene{
  background:#07121d;
}

.observation-target{
  border:1px solid rgba(202,168,103,.32);
  background:
    linear-gradient(135deg,#172a3a,#101c29);
  box-shadow:0 8px 22px rgba(0,0,0,.2);
}

.observation-target svg{
  padding:3px;
  border-radius:10px;
  background:#0b1824;
}

.observation-stats{
  margin:14px 0;
}

.observation-stats span{
  padding:7px 11px;
  border:1px solid rgba(154,176,192,.18);
  border-radius:999px;
  background:#101f2d;
  color:#d6e0e7;
}

#observation-status{
  padding:10px 12px;
  border-left:3px solid #b99a62;
  border-radius:4px;
  background:rgba(185,154,98,.07);
  color:#ead5aa;
}

.observation-level-grid .button.gold{
  background:linear-gradient(135deg,#9d7741,#66502f);
  border-color:#c4a369;
}

dialog:has(#observation-shell),
dialog:has(#observation-levels){
  background:
    radial-gradient(circle at 80% 0%,rgba(115,92,145,.12),transparent 35%),
    linear-gradient(145deg,#111e2c,#09131e);
  border:1px solid rgba(193,161,104,.3);
  box-shadow:0 24px 80px rgba(0,0,0,.58);
}