/* Shared satire interstitial for ArrestedTN game shortcodes. */

.dryRecordsGameInterstitialOpen,
.dryRecordsGameInterstitialOpen body{
  overflow:hidden !important;
}

.dryRecordsGameInterstitial{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px, 4vw, 42px);
  opacity:0;
  color:#fff;
  background:
    radial-gradient(900px 520px at 50% 115%, rgba(249,115,22,.50), transparent 68%),
    radial-gradient(680px 420px at 20% 18%, rgba(251,113,133,.28), transparent 64%),
    radial-gradient(720px 420px at 84% 12%, rgba(56,189,248,.18), transparent 62%),
    #050505;
  transition:opacity .24s ease;
}

.dryRecordsGameInterstitial.is-visible{
  opacity:1;
}

.dryRecordsGameInterstitial[hidden]{
  display:none !important;
}

.dryRecordsGameInterstitial,
.dryRecordsGameInterstitial *{
  box-sizing:border-box;
  letter-spacing:0;
}

.dryRecordsGameInterstitialFlames{
  position:absolute;
  inset:auto -10% -8%;
  height:min(42svh, 360px);
  overflow:hidden;
  pointer-events:none;
  filter:blur(.2px);
}

.dryRecordsGameInterstitialFlames span{
  position:absolute;
  bottom:-22%;
  width:34%;
  height:120%;
  border-radius:50% 50% 42% 42%;
  background:
    radial-gradient(circle at 50% 72%, rgba(253,186,116,.98), transparent 36%),
    radial-gradient(circle at 50% 42%, rgba(251,113,133,.84), transparent 50%),
    radial-gradient(circle at 50% 12%, rgba(249,115,22,.82), transparent 66%);
  opacity:.62;
  mix-blend-mode:screen;
  transform-origin:50% 100%;
  animation:dryRecordsInterstitialFlame 2.8s ease-in-out infinite;
}

.dryRecordsGameInterstitialFlames span:nth-child(1){
  left:0;
  animation-delay:-.4s;
}

.dryRecordsGameInterstitialFlames span:nth-child(2){
  left:22%;
  width:42%;
  opacity:.72;
  animation-delay:-1.3s;
}

.dryRecordsGameInterstitialFlames span:nth-child(3){
  left:54%;
  width:38%;
  animation-delay:-.8s;
}

.dryRecordsGameInterstitialFlames span:nth-child(4){
  left:76%;
  width:30%;
  opacity:.50;
  animation-delay:-1.8s;
}

.dryRecordsGameInterstitialPanel{
  position:relative;
  z-index:2;
  width:min(760px, 100%);
  max-height:min(92svh, 860px);
  overflow:auto;
  padding:clamp(20px, 4vw, 38px);
  border:1px solid rgba(255,255,255,.20);
  border-radius:18px;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(15,23,42,.86), rgba(3,7,18,.90)),
    rgba(0,0,0,.80);
  box-shadow:
    0 36px 100px rgba(0,0,0,.56),
    0 0 0 1px rgba(255,255,255,.08) inset;
  transform:translateY(10px) scale(.98);
  transition:transform .24s ease;
}

.dryRecordsGameInterstitial.is-visible .dryRecordsGameInterstitialPanel{
  transform:translateY(0) scale(1);
}

.dryRecordsGameInterstitialKicker{
  margin:0 0 10px;
  color:#fed7aa;
  font:900 12px/1.2 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform:uppercase;
}

.dryRecordsGameInterstitial h2{
  max-width:680px;
  margin:0 auto;
  color:#fff;
  font:950 clamp(34px, 7vw, 76px)/.94 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-wrap:balance;
}

.dryRecordsGameInterstitialArtButton{
  display:block;
  width:min(260px, 70vw);
  margin:clamp(18px, 3vw, 28px) auto;
  padding:0;
  border:0;
  border-radius:28px;
  background:transparent;
  cursor:pointer;
  filter:drop-shadow(0 26px 42px rgba(249,115,22,.30));
}

.dryRecordsGameInterstitialArtButton:hover{
  transform:translateY(-2px) rotate(-1deg);
}

.dryRecordsGameInterstitialArtButton:focus-visible{
  outline:3px solid rgba(56,189,248,.82);
  outline-offset:5px;
}

.dryRecordsGameInterstitialArtButton img{
  display:block;
  width:100%;
  height:auto;
  border-radius:28px;
  background:#050505;
  animation:dryRecordsInterstitialFloat 2.8s ease-in-out infinite;
}

.dryRecordsGameInterstitialBody{
  max-width:660px;
  margin:0 auto;
  color:#e5edf7;
  font:750 clamp(15px, 2vw, 20px)/1.42 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-wrap:pretty;
}

.dryRecordsGameInterstitialExit{
  min-width:160px;
  min-height:44px;
  margin-top:clamp(18px, 3vw, 28px);
  padding:0 22px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:9px;
  color:#04110a;
  background:linear-gradient(180deg, #bbf7d0, #22c55e);
  cursor:pointer;
  font:900 15px/1 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dryRecordsGameInterstitialExit:disabled{
  color:#f8fafc;
  cursor:not-allowed;
  background:rgba(255,255,255,.10);
}

.dryRecordsGameInterstitial[data-tone="blue"]{
  background:
    radial-gradient(900px 520px at 50% 115%, rgba(37,99,235,.36), transparent 68%),
    radial-gradient(680px 420px at 20% 18%, rgba(56,189,248,.24), transparent 64%),
    #030712;
}

.dryRecordsGameInterstitial[data-tone="green"]{
  background:
    radial-gradient(900px 520px at 50% 115%, rgba(5,150,105,.38), transparent 68%),
    radial-gradient(680px 420px at 20% 18%, rgba(34,197,94,.22), transparent 64%),
    #020403;
}

.dryRecordsGameInterstitial[data-tone="purple"]{
  background:
    radial-gradient(900px 520px at 50% 115%, rgba(124,58,237,.34), transparent 68%),
    radial-gradient(680px 420px at 20% 18%, rgba(167,139,250,.20), transparent 64%),
    #07030f;
}

@keyframes dryRecordsInterstitialFlame{
  0%,100%{
    transform:translateY(5%) scaleX(.92) rotate(-4deg);
  }
  50%{
    transform:translateY(-3%) scaleX(1.08) rotate(5deg);
  }
}

@keyframes dryRecordsInterstitialFloat{
  0%,100%{
    transform:translateY(0) rotate(.6deg);
  }
  50%{
    transform:translateY(-7px) rotate(-.6deg);
  }
}

@media (max-width:680px){
  .dryRecordsGameInterstitial{
    padding:14px;
  }

  .dryRecordsGameInterstitialPanel{
    max-height:94svh;
    border-radius:14px;
  }

  .dryRecordsGameInterstitialArtButton{
    width:min(220px, 72vw);
    border-radius:22px;
  }

  .dryRecordsGameInterstitialArtButton img{
    border-radius:22px;
  }
}
