/* Independent parody badge — deliberately not the official NORVEN symbol or name.
   v6: the composition and the bubble are the ones from the approved black page,
   scaled down for the header band. Bubble across the top, dancer beneath it with
   his feet on the yellow stripe of the flag, Manguangua seal across his right
   shoe. Children are absolute inside a fixed box, so the dancer's overhang past
   the band costs the band no height. */

.satire-host{
  position:relative;
  display:block;
  flex:0 0 auto;
  width:350px;
  height:285px;
  align-self:flex-end;
  text-align:center;
  z-index:4;
}

.satire-dialogue{position:absolute;top:0;left:0;width:350px;z-index:2}

/* Shape, weight and tail taken verbatim from the black page — only the type
   size, padding and shadow are scaled to the smaller block. Clickable: it
   advances to the next line on click/tap (see satire-cast.js's advance()),
   so it needs a pointer cursor and a visible focus ring like any control. */
.satire-bubble{
  position:relative;margin:0;box-sizing:border-box;
  color:#211a14;background:#fffbee;border:3px solid #231b15;
  border-radius:48% 43% 46% 40% / 40% 44% 42% 48%;
  padding:14px 24px;min-height:93px;
  display:flex;align-items:center;justify-content:center;
  font:900 italic 20.5px/1.1 'DM Sans',sans-serif;text-transform:uppercase;
  letter-spacing:-.04em;box-shadow:4px 4px 0 #e7b41f;transform:rotate(-3deg);
  cursor:pointer;
}
.satire-bubble:before{
  content:'';position:absolute;left:65%;bottom:-23px;
  width:21px;height:31px;background:#fffbee;border:0;
  border-right:3px solid #231b15;border-bottom:3px solid #231b15;
  transform:skew(-25deg) rotate(34deg);clip-path:polygon(0 0,100% 0,100% 100%);
}
.satire-bubble:focus-visible{outline:3px solid #ffd847;outline-offset:3px}

/* The wrapper only groups the two for markup; they position against the block. */
.satire-figure{display:contents}

/* Animated WebP with a real alpha channel. The old VP9-alpha .webm rendered
   as a black box in Safari, which does not support alpha in WebM. Also
   clickable: it pauses/resumes both the animation and the rotation. */
.satire-dancer{
  position:absolute;left:50%;bottom:-40px;
  display:block;width:auto;height:233px;z-index:3;
  --dancer-scale:1;
  --dancer-shift-y:0%;
  transform:translate(-50%, var(--dancer-shift-y)) scale(var(--dancer-scale));
  transform-origin:bottom center;
  filter:drop-shadow(3px 5px 2px rgba(0,0,0,.45));
  cursor:pointer;
}
.satire-dancer:focus-visible{outline:3px solid #ffd847;outline-offset:3px;border-radius:8px}

.manguangua-seal{
  position:absolute;left:204px;bottom:-37px;z-index:4;
  width:90px;height:90px;
  border:3px double #154c66;border-radius:50%;
  color:#154c66;background:#fff4d7ed;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;transform:rotate(-17deg);
  box-shadow:0 0 0 2px #fff4d7,2px 4px 0 rgba(0,0,0,.2);
}
.manguangua-seal span{font:bold 7px/1.3 sans-serif;letter-spacing:.04em}
.manguangua-seal b{font:900 27px/1.15 Georgia,serif}
.manguangua-seal strong{font:bold 8px sans-serif}

.video-play-fallback{border:1px solid #e8c64d;background:#211b16;color:#fff3c9;padding:10px 14px;border-radius:4px;cursor:pointer}

@media(max-width:1250px){
  .satire-host{width:274px;height:223px}
  .satire-dialogue{width:274px}
  .satire-bubble{font-size:16px;padding:10px 17px;min-height:71px}
  .satire-dancer{left:50%;height:182px;bottom:-35px}
  .manguangua-seal{left:159px;bottom:-32px;width:70px;height:70px}
  .manguangua-seal b{font-size:22px}
}
@media(max-width:980px){
  .satire-host{width:209px;height:165px}
  .satire-dialogue{width:209px}
  .satire-bubble{font-size:12.5px;padding:9px 13px;min-height:55px}
  .satire-dancer{left:50%;height:139px;bottom:-29px}
  .manguangua-seal{display:none}
}
@media(max-width:860px){.satire-host{display:none}}
@media print{.satire-host{display:none!important}}

/* 2026-09-22 owner call: sized up ~31% ONLY on the homepage's colored
   Chavidad band (.chavidad-nav:not(.gate-stage)), where this widget sits next to the
   character badges and the price drop and was asked to have more presence.
   Deliberately scoped to .chavidad-nav:not(.gate-stage) .satire-host rather than editing the
   base .satire-host rules above -- the black gate page and gate.php's own
   1.7x transform:scale() on the same base class must NOT also grow from
   this, since that request was specifically about the homepage band. */
.chavidad-nav:not(.gate-stage) .satire-host{width:460px;height:375px}
.chavidad-nav:not(.gate-stage) .satire-dialogue{width:460px}
.chavidad-nav:not(.gate-stage) .satire-bubble{font-size:27px;padding:18px 32px;min-height:122px}
.chavidad-nav:not(.gate-stage) .satire-dancer{left:50%;height:306px;bottom:-53px}
.chavidad-nav:not(.gate-stage) .manguangua-seal{left:268px;bottom:-49px;width:118px;height:118px}
.chavidad-nav:not(.gate-stage) .manguangua-seal b{font-size:36px}
@media(max-width:1250px){
  .chavidad-nav:not(.gate-stage) .satire-host{width:360px;height:293px}
  .chavidad-nav:not(.gate-stage) .satire-dialogue{width:360px}
  .chavidad-nav:not(.gate-stage) .satire-bubble{font-size:21px;padding:13px 22px;min-height:93px}
  .chavidad-nav:not(.gate-stage) .satire-dancer{left:50%;height:239px;bottom:-46px}
  .chavidad-nav:not(.gate-stage) .manguangua-seal{left:209px;bottom:-42px;width:92px;height:92px}
  .chavidad-nav:not(.gate-stage) .manguangua-seal b{font-size:29px}
}
@media(max-width:980px){
  .chavidad-nav:not(.gate-stage) .satire-host{width:275px;height:217px}
  .chavidad-nav:not(.gate-stage) .satire-dialogue{width:275px}
  .chavidad-nav:not(.gate-stage) .satire-bubble{font-size:16px;padding:12px 17px;min-height:72px}
  .chavidad-nav:not(.gate-stage) .satire-dancer{left:50%;height:183px;bottom:-38px}
}