@import url("https://use.typekit.net/wqy8lqh.css");

/* Header & Footer Overrides */
:is(header.site-header, .ast-primary-header-bar, footer.site-footer, .site-primary-footer-wrap[data-section="section-primary-footer-builder"],.site-below-footer-wrap[data-section="section-below-footer-builder"]) { background-color: #120222; }
.ast-header-break-point .main-header-menu,  .main-header-menu ul.sub-menu { background-color: #120222; }
.et-fixed-header .ast-primary-header-bar li.current-menu-ancestor > a,  .et-fixed-header .ast-primary-header-bar li.current-menu-item > a { color: #fff !important; }
.ast-primary-header-bar a,  #main-header a,  .et-fixed-header .ast-primary-header-bar a { color: #fff !important; opacity: 0.5; transition: all .2s ease-in-out; }
.ast-primary-header-bar li span { color: #fff !important; }
.ast-primary-header-bar:hover a,  #main-header:hover a { opacity: 1; }
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg { fill: #fff; }
.ast-header-social-1-wrap .ast-builder-social-element svg { fill: #f5f5f5; }
.ast-header-social-1-wrap .ast-builder-social-element:hover svg:hover { fill: #fff; }
.entry-content section.wp-block-group { background-color: #120222; }
#ast-mobile-header .main-header-menu > .menu-item > .menu-link { color: #fff !important; }
/* End Overrides */

/* ── Stay Human™ [The Game] — Halloween palette ───────────────── */
.stay-human{
  --ink:#150f24; --cream:#fff4df; --night:#21173d; --dusk:#3a2766;
  --slime:#8fe34a; --blood:#e0213a; --orange:#ff8a1f; --moon:#fff1c9; --skin:#ffe0bf; --sun:#ffc735;
  --sh-outline:-2px -2px 0 var(--ink),0 -2px 0 var(--ink),2px -2px 0 var(--ink),2px 0 0 var(--ink),2px 2px 0 var(--ink),0 2px 0 var(--ink),-2px 2px 0 var(--ink),-2px 0 0 var(--ink);
  --sh-drop:6px;
  --display:var(--ff-body,"Source Sans 3",system-ui,sans-serif);
  --heavy:var(--fw-xb,800);
  --ff-spooky: "cc-meltdown", sans-serif;
}
.stay-human{
  position:relative;box-sizing:border-box;width:100%;aspect-ratio:16/9;max-height:min(620px,90vh);min-height:420px;max-width:1200px;overflow:hidden;
  background-color:var(--night);color:var(--cream);font-family:var(--display);font-weight:700;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;
  border-radius:var(--radius-md,16px);border:6px solid var(--night);
}
/* Phones: fill most of the screen height instead of a fixed 4:5 box.
   svh = the "small" viewport height, which stays stable while mobile browser bars show/hide. */
@media (max-width:640px){
  .stay-human{aspect-ratio:auto;height:78vh;height:78svh;min-height:460px;max-height:780px}
  .entry-content section.wp-block-group:has(.stay-human){padding:.25rem .75rem !important}
}
.stay-human.is-playing{touch-action:none;cursor:none}
.sh__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* HUD: time + segmented monster meter */
.sh__hud{position:absolute;top:10px;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;opacity:0;transition:opacity .2s;pointer-events:none}
.is-playing .sh__hud{opacity:1}
.sh__time{font-weight:var(--heavy);font-size:clamp(24px,3.6vw,36px);line-height:1;color:var(--cream);text-shadow:3px 3px 0 var(--orange)}
.sh__meter{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.sh__bar{display:flex;width:min(140px,34vw);height:13px;border:2.5px solid var(--ink);background:var(--cream);box-shadow:2px 2px 0 var(--ink);overflow:hidden}
.sh__bar em{display:block;height:100%;width:0;flex:none}

/* Power-up announcement */
.sh__power{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-5deg) scale(.3);opacity:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;pointer-events:none;
  transition:opacity .15s,transform .3s cubic-bezier(.3,1.7,.5,1)}
.sh__power.is-on{opacity:1;transform:translate(-50%,-50%) rotate(-5deg) scale(1)}
.sh__power::before{content:"";position:absolute;left:50%;top:50%;width:min(135%,460px);aspect-ratio:1;z-index:-1;
  transform:translate(-50%,-50%);background:var(--slime);opacity:.95;
  clip-path:polygon(50% 0,58% 30%,85% 15%,70% 42%,100% 50%,70% 58%,85% 85%,58% 70%,50% 100%,42% 70%,15% 85%,30% 58%,0 50%,30% 42%,15% 15%,42% 30%)}
.sh__power[data-tone="bad"]::before{background:var(--blood)}
.sh__power b{display:block;width:max-content;max-width:min(88vw,720px);font:var(--heavy) clamp(38px,9vw,84px)/.92 var(--display);letter-spacing:-.015em;color:var(--cream);text-shadow:var(--sh-outline),var(--sh-drop) var(--sh-drop) 0 var(--ink);text-wrap:balance}
.sh__power small{font:700 clamp(13px,2.4vw,17px)/1 var(--display);background:var(--ink);color:var(--cream);padding:6px 10px}

/* Panels */
.sh__panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;padding:16px;pointer-events:none;transition:opacity .25s}
.sh__over{background:rgba(21,15,36,.86);gap:8px}
.sh__panel.is-off{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.sh__panel p{margin:0}

.sh__btn{pointer-events:auto;font:900 clamp(17px,3.4vw,23px)/1 var(--display);letter-spacing:.01em;padding:.6em 1.1em;border-radius:999px;
  border:3px solid var(--ink) !important;transform:rotate(-2deg);cursor:pointer;background:var(--orange);color:var(--ink);
  box-shadow:1px 1px 0 var(--ink),2px 2px 0 var(--ink),3px 3px 0 var(--ink),4px 4px 0 var(--ink),5px 5px 0 var(--ink)}
.sh__btn:hover{transform:rotate(-.5deg) scale(1.05);background:#ffa040;color:var(--ink); box-shadow: 1px 1px 0 var(--ink),2px 2px 0 var(--ink),3px 3px 0 var(--ink),4px 4px 0 var(--ink),5px 5px 0 var(--ink);}
.sh__btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.sh__btn:focus-visible{outline:3px solid var(--slime);outline-offset:4px}
.sh__over .sh__btn{font-size:var(--fs-lg,1.3rem)}

.sh__headline-wrap{padding:1.75rem 3rem;border-radius:50rem;background:#e4def8;box-shadow:6px 6px 0 var(--ink);border:3px solid var(--ink)}
.sh__headline{margin:0 !important;font:var(--heavy) clamp(60px,7vw,120px)/.95 var(--ff-spooky); letter-spacing:-.015em;max-width:11em;text-wrap:balance;
 color:#fff0;background:linear-gradient(-33deg,#ff8a1f,#e0213a,#cb1212,#a60303);background-size:400% 400%;
  -webkit-background-clip:text;background-clip:text;animation:sh-grad 15s ease infinite}
.sh__headline sup{font-size:.4em;vertical-align:top;line-height:1.6; font-family: var(--display);top: -.2em;}
.sh__headline span{font-size:.3em;display:block;margin-top:.5em; font-family: var(--display);}
@keyframes sh-grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.sh__hint{font-size:var(--fs-md,1.1rem);font-weight:var(--fw-sb,600);letter-spacing:.015em;text-shadow:2px 2px 0 var(--ink)}
.sh__best{font-size:var(--fs-lg,1.3rem);min-height:1em;color:var(--slime);text-shadow:2px 2px 0 var(--ink)}

.sh__portrait{width:130px;height:130px;display:block}
.sh__ohno{font-size:clamp(20px,2.4vw,32px)}
.sh__burst{font-weight:var(--heavy);letter-spacing:-.01em;font-size:clamp(46px,8vw,92px);line-height:.95;color:var(--slime);text-wrap:balance;
  text-shadow:var(--sh-outline),var(--sh-drop) var(--sh-drop) 0 var(--ink);transform:rotate(-4deg);animation:sh-pop .4s cubic-bezier(.3,1.6,.5,1)}
.sh__flavor{font-size:clamp(15px,1.8vw,19px);font-weight:600;font-style:italic;opacity:.9;max-width:28em}
.sh__stayed{font-size:clamp(18px,2.2vw,26px);margin-top:4px !important}
.sh__stayed b{display:block;margin-top:2px;font-weight:var(--heavy);font-size:clamp(30px,5vw,48px);line-height:1;color:var(--orange);text-shadow:3px 3px 0 var(--ink)}
.sh__row{display:flex;align-items:center;gap:14px;margin-top:4px}
@keyframes sh-pop{from{transform:rotate(-15deg) scale(.2)}}
.stay-human .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.sh__burst,.sh__headline{animation:none}}
@media (max-width:640px){
  .stay-human{
    --sh-outline:-1.5px -1.5px 0 var(--ink),0 -1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),1.5px 0 0 var(--ink),1.5px 1.5px 0 var(--ink),0 1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink),-1.5px 0 0 var(--ink);
    --sh-drop:3.5px;
  }
  .sh__time{text-shadow:2px 2px 0 var(--orange)}
  .sh__meter{font-size:10px;gap:5px}
  .sh__bar{width:min(120px,32vw);height:11px}
  .sh__bar{box-shadow:1px 1px 0 var(--ink)}
  .sh__headline-wrap{padding:1.25rem 1.5rem;border-radius:var(--radius-md,1rem)}
  .sh__portrait{width:96px;height:96px}
  .sh__over{gap:6px}
}

/* Audio controls: music + sound effects toggles, top-left */
.sh__audio{position:absolute;top:10px;left:12px;z-index:5;display:flex;gap:8px}
.stay-human .sh__mute{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0 !important;margin:0;border-radius:50%;
  background:rgba(21,15,36,.62) !important;border:2px solid rgba(255,244,223,.35) !important;color:var(--cream) !important;cursor:pointer !important;
  box-shadow:none;line-height:1;transition:opacity .15s,border-color .15s,transform .15s}
.stay-human .sh__mute:hover{border-color:var(--cream) !important;transform:scale(1.06)}
.stay-human .sh__mute:focus-visible{outline:3px solid var(--slime);outline-offset:2px}
.sh__mute svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sh__mute[aria-pressed="false"]{opacity:.55}
.sh__mute[aria-pressed="false"]::after{content:"";position:absolute;width:26px;height:2.5px;background:var(--blood);border-radius:2px;transform:rotate(-45deg);box-shadow:0 0 0 1.5px var(--ink)}
.is-playing .sh__audio{opacity:.5;transition:opacity .2s}
.is-playing .sh__audio:hover{opacity:1}
@media (max-width:640px){.stay-human .sh__mute{width:34px;height:34px}.sh__mute svg{width:18px;height:18px}}