.observantia-loading { min-height:260px; display:grid; place-content:center; justify-items:center; gap:18px; text-align:center; color:#decba4; }
.observantia-loading[hidden], #observantiaPreview[hidden] { display:none; }
.observantia-loading img { width:116px; height:116px; object-fit:contain;  }
@keyframes observantia-breathe { 50% { opacity:.55; transform:scale(.96); } }
#observantiaFields { border:0; padding:0; margin:0; min-width:0; display:contents; }
.teaser-challenge-image-button { width:100%; }
#observantiaPreview { width:100%; height:auto; }
.teaser-challenge-zoom.observantia-explorer { padding:0; background:#100e0b; overflow:hidden; height:100dvh; }
.teaser-challenge-zoom.observantia-explorer:fullscreen { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; border:0; }
.observantia-viewport { position:absolute; inset:68px 12px 12px; overflow:hidden; touch-action:none; cursor:crosshair; outline-offset:-3px; }

.teaser-challenge-zoom .observantia-viewport img { position:absolute; left:50%; top:50%; max-width:none; max-height:none; margin:0; user-select:none; pointer-events:none; transform-origin:center; }
.teaser-challenge-zoom #observantiaReset { position:absolute; left:16px; top:12px; right:auto; font:inherit; font-size:15px; padding:10px 16px; border:1px solid #806b43; border-radius:4px; }
.observantia-help { font-size:.85rem; color:#c7b58f; }
@media (max-width:700px) { .observantia-viewport { inset:60px 4px 4px; } .teaser-challenge-layout { grid-template-columns:1fr; } .teaser-challenge-image-button { max-width:none; } }
@media (prefers-reduced-motion:reduce) { .observantia-loading img { animation:none; } }

.observantia-lens { position:absolute; box-sizing:border-box; border:1px solid #b99a61; border-radius:50%; background-color:#100e0b; background-repeat:no-repeat; background-origin:border-box; box-shadow:0 0 0 1px #302617,0 3px 10px #0009; pointer-events:none; z-index:1; }
.observantia-lens[hidden] { display:none; }

/* A single reflection/tilt, then a quiet presence if the HD download is slow. */
.observantia-medallion { position:relative; display:block; width:116px; height:116px; border-radius:50%; overflow:hidden; }
.observantia-medallion::after { content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; opacity:0; background:linear-gradient(110deg,transparent 32%,#edce8670 48%,#fff3c28c 50%,transparent 64%); transform:translateX(-120%); }
.observantia-loading[data-phase="intro"] .observantia-medallion { animation:observantia-emerge 850ms ease-out both,observantia-tilt 1400ms 600ms ease-in-out,observantia-breathe 3s 3s ease-in-out infinite; }
.observantia-loading[data-phase="intro"] .observantia-medallion::after { animation:observantia-reflection 1100ms 350ms ease-in-out both; }
.observantia-loading { opacity:1; transition:opacity 450ms ease-out; }
.observantia-loading[data-phase="fade"] { opacity:0; }
@keyframes observantia-emerge { from { opacity:0; } to { opacity:1; } }
@keyframes observantia-tilt { 0%,100% { transform:rotate(0); } 42% { transform:rotate(-5deg); } 70% { transform:rotate(2deg); } }
@keyframes observantia-reflection { 0% { opacity:0; transform:translateX(-120%); } 25%,70% { opacity:.65; } 100% { opacity:0; transform:translateX(120%); } }
@media (prefers-reduced-motion:reduce) {
  .observantia-loading[data-phase="intro"] .observantia-medallion { animation:observantia-emerge 250ms ease-out both; }
  .observantia-loading[data-phase="intro"] .observantia-medallion::after { animation:none; }
  .observantia-loading { transition-duration:150ms; }
}

/* Touch devices: the image covers the viewport; the thin rim remains a broad invisible drag target. */
@media (pointer:coarse) {
  .observantia-viewport.observantia-mobile-pan { touch-action:none; cursor:grab; }
}

/* DEVZ trial: slightly brighten and desaturate the atelier and its magnified view
   on touch devices. The source image and desktop rendering remain unchanged. */
@media (pointer:coarse) {
  .teaser-challenge-zoom .observantia-viewport > img,
  .teaser-challenge-zoom .observantia-viewport > .observantia-lens {
    filter:brightness(1.12) saturate(.85);
  }
}