/* ==========================================================================
   OATHWOOD MASCOT COMPANION
   Site-wide guide, live presence, social notices and cozy tips.
   ========================================================================== */
#owMascotCompanion, #owMascotCompanion * { box-sizing: border-box; }
#owMascotCompanion {
  position: fixed;
  left: 14px;
  bottom: 10px;
  z-index: 2147482500;
  width: 112px;
  height: 118px;
  font-family: "Nunito", system-ui, sans-serif;
  pointer-events: none;
}
.ow-mascot-character {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 108px;
  height: 108px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 12px 18px rgba(4,18,10,.32));
  transform-origin: 50% 100%;
  transition: transform .18s ease, filter .18s ease;
}
.ow-mascot-character:hover { transform: translateY(-3px) scale(1.035); filter: drop-shadow(0 15px 22px rgba(4,18,10,.4)); }
.ow-mascot-character:active { transform: translateY(0) scale(.98); }
.ow-mascot-character img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ow-mascot-bubble {
  position: absolute;
  left: 91px;
  bottom: 76px;
  width: min(330px, calc(100vw - 132px));
  min-width: 220px;
  padding: 13px 38px 13px 14px;
  border: 2px solid #d3bd76;
  border-radius: 18px 18px 18px 5px;
  background: linear-gradient(145deg,#fffdf4,#f6ecd2);
  color: #233c2b;
  box-shadow: 0 16px 40px rgba(5,20,11,.28);
  opacity: 0;
  visibility: hidden;
  transform: translate(-8px,10px) scale(.96);
  transform-origin: left bottom;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}
.ow-mascot-bubble.show { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.ow-mascot-bubble::after {
  content: ""; position: absolute; left: -11px; bottom: 11px; width: 18px; height: 18px;
  background: #f8efd8; border-left: 2px solid #d3bd76; border-bottom: 2px solid #d3bd76; transform: rotate(45deg);
}
.ow-mascot-kicker { display:block; margin-bottom:3px; color:#6d8e45; font-size:.57rem; font-weight:1000; letter-spacing:.13em; text-transform:uppercase; }
.ow-mascot-message { display:block; font-family:"Fredoka","Nunito",system-ui,sans-serif; font-size:.9rem; font-weight:700; line-height:1.34; overflow-wrap:anywhere; }
.ow-mascot-close {
  position:absolute; right:8px; top:7px; width:27px; height:27px; display:grid; place-items:center;
  padding:0; border:1px solid #dac99c; border-radius:50%; background:#fff8e8; color:#486044; cursor:pointer; font-size:1rem; line-height:1;
}
.ow-mascot-close:hover { background:#eef3df; }
.ow-mascot-bubble[data-kind="join"] { border-color:#8ab45b; background:linear-gradient(145deg,#f5ffe8,#e7f2cf); }
.ow-mascot-bubble[data-kind="join"]::after { background:#eaf5d3; border-color:#8ab45b; }
.ow-mascot-bubble[data-kind="leave"] { border-color:#9ba9bd; background:linear-gradient(145deg,#f6f8fb,#e8edf4); }
.ow-mascot-bubble[data-kind="leave"]::after { background:#ebeff5; border-color:#9ba9bd; }
.ow-mascot-bubble[data-kind="post"] { border-color:#d9ad55; background:linear-gradient(145deg,#fff9e8,#f8e6bd); }
.ow-mascot-bubble[data-kind="post"]::after { background:#f9e8c0; border-color:#d9ad55; }
.ow-mascot-character.is-talking { animation: owMascotBob .48s ease both; }
@keyframes owMascotBob { 0%,100%{transform:translateY(0)} 45%{transform:translateY(-7px) rotate(-1deg)} 70%{transform:translateY(-2px) rotate(1deg)} }
@media (max-width: 680px) {
  #owMascotCompanion { left: 7px; bottom: 5px; width: 88px; height: 94px; }
  .ow-mascot-character { width: 84px; height: 84px; }
  .ow-mascot-bubble { left: 71px; bottom: 60px; min-width: 0; width: min(290px, calc(100vw - 88px)); padding:11px 34px 11px 12px; border-radius:15px 15px 15px 5px; }
  .ow-mascot-message { font-size:.8rem; }
}
@media (prefers-reduced-motion: reduce) { .ow-mascot-character.is-talking { animation:none; } .ow-mascot-bubble,.ow-mascot-character{transition:none;} }

/* Waving mascot: show only the character from the transparent asset sheet. */
#owMascotCharacter .ow-mascot-wave-frame {
  position:absolute;
  display:block;
  left:0;
  bottom:0;
  width:100%;
  aspect-ratio:548 / 450;
  overflow:hidden;
  pointer-events:none;
}
#owMascotCharacter .ow-mascot-wave-frame img {
  position:absolute;
  display:block;
  width:268.0657%;
  max-width:none;
  height:auto;
  left:-79.0146%;
  top:-135.7778%;
}