/* Ozzle brand v2 — direct integration of seven-log logomark and otter mascot.
   Kept separate from the puzzle's original styles and isolated from its game logic. */
:root{
  --ozzle-signal-blue:#1687ff;
  --ozzle-midnight:#0d1d42;
  --ozzle-anomaly:#ff4f72;
}
.brand-wrap{gap:11px;min-width:0}
.brand-wrap .brand-mark{width:clamp(164px,24vw,198px);height:auto;max-height:none;max-width:100%;object-fit:contain;flex-shrink:0}
.brand-wrap .tagline{font-weight:650;line-height:1.3}
.hero .owl.ozzle-otter{
  position:relative;width:min(248px,75vw);height:auto;aspect-ratio:1536/1004;
  margin:4px auto 6px;display:grid;place-items:center;isolation:isolate;
}
.hero .owl.ozzle-otter img{
  display:block;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;filter:drop-shadow(0 10px 14px rgba(19,82,151,.13));
}
body.hell .hero .owl.ozzle-otter{width:min(248px,75vw);height:auto}
body.hell .hero .owl.ozzle-otter::before{
  content:"";position:absolute;inset:10% 12% 8%;z-index:-1;pointer-events:none;
  border-radius:50%;background:radial-gradient(ellipse at 50% 60%,rgba(255,164,77,.20),rgba(255,94,67,.06) 50%,transparent 70%);
}
body.hell .hero .owl.ozzle-otter img{filter:drop-shadow(0 10px 15px rgba(190,64,34,.14))}
/* The otter provides context; the log puzzle retains visual priority. */
.popup-hero{position:relative;min-height:0}
.popup-hero img{width:min(215px,52vw);max-height:154px;object-fit:contain}
.popup-hero.result-success::after,.popup-hero.result-fail::after{
  position:absolute;top:-2px;left:calc(50% + 72px);display:grid;place-items:center;
  width:33px;height:33px;border-radius:50%;font-weight:900;font-size:1.05rem;
  box-shadow:0 4px 11px rgba(32,73,118,.12);
}
.popup-hero.result-success::after{content:"✓";color:#267748;background:#e4f7e8}
.popup-hero.result-fail::after{content:"?";color:#bd435e;background:#fff0f4}
body.hell .popup-hero.result-fail::after{color:#bf362b;background:#fff0e9}
@media(max-width:560px){
 .brand-wrap .brand-mark{width:clamp(142px,40vw,168px);max-height:none}
 .hero .owl.ozzle-otter,body.hell .hero .owl.ozzle-otter{width:min(187px,58vw);margin-top:0;margin-bottom:2px}
 .popup-hero img{width:min(175px,48vw);max-height:125px}
 .popup-hero.result-success::after,.popup-hero.result-fail::after{left:calc(50% + 59px)}
}
@media(max-width:380px){.brand-wrap .brand-mark{width:135px}}
@media(max-height:520px) and (orientation:landscape){.hero .owl.ozzle-otter{display:none}}
@media(prefers-reduced-motion:reduce){.hero .owl.ozzle-otter img{animation:none!important}}