/* Mini of the day (/games hub): compact tabletop-toy card. Crisp surface, real drop shadows, no glow.
   Nowl perches on the top-right corner (fx/miniday.js). Theme tokens (--surface/--ink) follow light + dark. */
.md-card {
  --md-owl-w: 68px; --md-owl-h: 54px;
  position: relative; display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 14px;
  margin: calc(var(--md-owl-h) - 10px) 0 22px; padding: 12px 14px 12px 12px; max-width: 780px;
  border-radius: 24px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
  background: var(--surface); border: 1px solid var(--card-edge-strong);
  box-shadow: 0 5px 0 var(--surface-deep, rgba(45,22,89,.12)), 0 2px 3px rgba(45,22,89,.10), 0 20px 28px -16px rgba(45,22,89,.38);
  transition: transform .18s ease, box-shadow .18s ease;
}
.md-card:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--surface-deep, rgba(45,22,89,.12)), 0 3px 4px rgba(45,22,89,.10), 0 26px 32px -16px rgba(45,22,89,.42); }
.md-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--surface-deep, rgba(45,22,89,.12)), 0 6px 10px -4px rgba(45,22,89,.3); }
.md-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.md-photo { position: relative; display: block; width: 104px; aspect-ratio: 1; border-radius: 17px; overflow: hidden; background: var(--surface-2);
  box-shadow: 0 3px 0 rgba(45,22,89,.18), 0 10px 14px -8px rgba(45,22,89,.5); transform: rotate(-2deg); transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.md-card:hover .md-photo, .md-card:focus-visible .md-photo { transform: rotate(0deg) scale(1.03); }
.md-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); pointer-events: none; }
.md-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.md-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.md-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--yellow); color: #2d1659; font-size: 12px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 2px 0 var(--yellow-deep); }
.md-eyebrow .kicon { width: 12px; height: 12px; }
.md-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(21px, 5.6vw, 28px); line-height: 1.02; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.md-title em { font-style: normal; color: var(--pink-deep); }
html[data-theme="dark"] .md-title em { color: #ff6fa0; }
.md-sub { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.md-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 9px 16px; border-radius: 14px; background: var(--purple); color: #fff; font-size: 14px; font-weight: 800;
  box-shadow: 0 4px 0 var(--purple-deep), 0 10px 12px -8px rgba(45,22,89,.55); transition: transform .12s ease, box-shadow .12s ease; }
.md-cta .kicon { width: 14px; height: 14px; transition: transform .18s ease; }
.md-card:hover .md-cta .kicon { transform: translateX(3px); }
.md-card:active .md-cta { transform: translateY(3px); box-shadow: 0 1px 0 var(--purple-deep); }

/* Nowl: perched on the top-right corner. Absolutely placed in the headroom above the card, so no layout shift. */
.md-nowl { position: absolute; right: 22px; top: calc(var(--md-owl-h) * -1 + 13px); width: var(--md-owl-w); height: var(--md-owl-h); pointer-events: none; z-index: 2; user-select: none; -webkit-user-select: none; }
.md-sprite { position: absolute; inset: 0; display: block; transform-origin: 50% 92%; will-change: transform; }
.md-sprite { --i: 0; background: url("/img/mascot/buddy-128.webp") no-repeat;
  background-size: calc(var(--md-owl-w) * 7) var(--md-owl-h); background-position: calc(var(--md-owl-w) * var(--i) * -1) 0; }
.md-fly { --c: 0; --r: 0; --fw: calc(var(--md-owl-w) * 1.15); position: absolute; left: 50%; bottom: -4%; width: var(--fw); height: var(--fw); margin-left: calc(var(--fw) * -.5); display: block; visibility: hidden;
  background: url("/img/mascot/owl-flap-128.png") no-repeat; background-size: calc(var(--fw) * 4) calc(var(--fw) * 3); background-position: calc(var(--fw) * var(--c) * -1) calc(var(--fw) * var(--r) * -1); }
.md-nowl.is-flying .md-fly { visibility: visible; }
.md-nowl.is-flying .md-sprite { visibility: hidden; }
@media (min-resolution: 1.5dppx) { .md-sprite { background-image: url("/img/mascot/buddy-256.webp"); } }
/* the flap atlas is 256px cells at 2x; the 128 file is 4x3 of 128px cells */
.md-card .md-nowl:not(.is-ready) .md-sprite { visibility: hidden; }

@media (min-width: 720px) {
  .md-card { --md-owl-w: 96px; --md-owl-h: 77px; grid-template-columns: 252px 1fr; gap: 26px; padding: 16px 28px 16px 16px; border-radius: 30px; margin-bottom: 30px; }
  .md-photo { width: 252px; aspect-ratio: 4/3; border-radius: 22px; }
  .md-eyebrow { font-size: 13px; padding: 4px 12px 4px 10px; }
  .md-title { font-size: clamp(30px, 3vw, 40px); }
  .md-sub { font-size: 16px; -webkit-line-clamp: 3; }
  .md-cta { margin-top: 10px; padding: 12px 22px; font-size: 16px; border-radius: 16px; }
  .md-nowl { right: 44px; }
}
@media (max-width: 340px) {
  .md-card { grid-template-columns: 84px 1fr; gap: 10px; }
  .md-photo { width: 84px; }
  .md-nowl { right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .md-card, .md-photo, .md-cta, .md-cta .kicon { transition: none; } }
body.reduced-motion .md-card, body.reduced-motion .md-photo, body.reduced-motion .md-cta, body.reduced-motion .md-cta .kicon { transition: none; }

/* ---- Hoot Hop: permanent featured tile beside / under the Mini of the day card (static art; Nowl animates on the Mini card only) ---- */
.md-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 780px; }
.md-hoot { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; margin: -4px 0 22px; padding: 10px 14px 10px 10px; border-radius: 20px; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--card-edge-strong); -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 0 var(--surface-deep, rgba(45,22,89,.12)), 0 2px 3px rgba(45,22,89,.10), 0 16px 22px -14px rgba(45,22,89,.35); transition: transform .18s ease, box-shadow .18s ease; }
.md-hoot:hover { transform: translateY(-2px); }
.md-hoot:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--surface-deep, rgba(45,22,89,.12)), 0 4px 8px -4px rgba(45,22,89,.3); }
.md-hoot:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.md-hoot-art { position: relative; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: #5fb8ff; box-shadow: 0 3px 0 rgba(45,22,89,.18), 0 8px 12px -8px rgba(45,22,89,.5); transform: rotate(2deg); }
.md-hoot-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); }
.md-hoot-art img { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; }   /* top of the portrait card art: sky + owl */
.md-hoot-body { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "eb eb" "t cta" "s cta"; column-gap: 10px; row-gap: 2px; align-items: center; justify-items: start; min-width: 0; }
.md-hoot-body .md-eyebrow { grid-area: eb; }
.md-hoot-title { grid-area: t; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.05; letter-spacing: -.02em; }
.md-hoot-title em { font-style: normal; color: var(--pink-deep); }
html[data-theme="dark"] .md-hoot-title em { color: #ff6fa0; }
.md-hoot-body .md-sub { grid-area: s; -webkit-line-clamp: 1; }
.md-hoot-body .md-cta { grid-area: cta; margin: 0; }
.md-eyebrow-sm { font-size: 11px; padding: 2px 9px 2px 7px; }
.md-cta-sm { padding: 8px 14px; font-size: 14px; }
@media (min-width: 720px) {
  .md-row { grid-template-columns: minmax(0, 1fr) 232px; gap: 22px; max-width: 1060px; align-items: stretch; }
  .md-row .md-card { max-width: none; }
  .md-hoot { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: stretch; gap: 12px; margin: calc(var(--md-owl-h, 77px) - 10px) 0 30px; padding: 12px 12px 16px; border-radius: 30px; justify-items: stretch; }
  .md-hoot-art { width: 100%; height: auto; aspect-ratio: 16/10; border-radius: 20px; transform: rotate(1.5deg); }
  .md-hoot-body { grid-template-columns: 1fr; grid-template-areas: "eb" "t" "s" "cta"; padding: 0 6px; row-gap: 4px; align-content: start; }
  .md-hoot-title { font-size: 30px; }
  .md-hoot-body .md-cta { margin-top: 8px; padding: 11px 20px; font-size: 15px; }
  .md-hoot-body .md-sub { font-size: 14px; }
}
@media (max-width: 719px) { .md-row .md-card { margin-bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .md-hoot { transition: none; } }
body.reduced-motion .md-hoot { transition: none; }
.md-hoot .md-eyebrow { background: var(--mint); box-shadow: 0 2px 0 var(--mint-deep); }
/* home carousel: Hoot Hop slide (static card art, no owl animation) */
.feat-hoot .feat-bg { object-position: 50% 0; }
.feat-hoot .feat-top { background: var(--mint); color: #2d1659; padding: 3px 10px; border-radius: 999px; box-shadow: 0 2px 0 var(--mint-deep); width: max-content; }