/* Milk Arcade launcher — floating play button and popup.
   Selectors start with "html body" so theme and Elementor button styles can't restyle them. */

@font-face {
  font-family: 'MA Fat Frank';
  src: url('../arcade/shared/assets/FatFrank-Regular.ttf') format('truetype');
  font-display: swap;
}

html.ma-open,
html.ma-open body { overflow: hidden !important; }

/* ---------- Floating play button ---------- */
html body button.ma-launch,
html body button.ma-launch:hover,
html body button.ma-launch:focus {
  position: fixed;
  bottom: 28px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 30px 10px 10px;
  background: #FFC416;
  color: #000;
  border: 3px solid #000;
  border-radius: 100px;
  box-shadow: 8px 8px 0 #000;
  font: 700 16px/1.1 'DM Sans', Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body button.ma-launch {
  transform: translateY(170%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.3s, box-shadow 0.15s;
}
html body button.ma-launch.ma-left { left: 28px; right: auto; }
html body button.ma-launch.ma-right { right: 28px; left: auto; }
html body button.ma-launch.ma-shown {
  transform: none;
  opacity: 1;
  /* a little hop every few seconds; uses translate/rotate so it doesn't fight the hover transform */
  animation: ma-hop 6s ease-in-out 2.5s infinite;
}
html body button.ma-launch.ma-shown:hover { transform: translate(-2px, -3px) rotate(-2deg); box-shadow: 11px 11px 0 #000; animation: none; }
html body button.ma-launch.ma-shown:active { transform: translate(5px, 5px); box-shadow: 3px 3px 0 #000; }
html body button.ma-launch:focus-visible { outline: 3px solid #4DBEED; outline-offset: 4px; }
html.ma-open body button.ma-launch { opacity: 0; pointer-events: none; }

@keyframes ma-hop {
  0%, 12%, 100% { translate: 0 0; rotate: 0deg; }
  3% { translate: 0 -10px; rotate: -3deg; }
  6% { translate: 0 0; rotate: 2deg; }
  8% { translate: 0 -4px; rotate: -1deg; }
}

.ma-launch .ma-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 3px solid #000;
  border-radius: 50%;
  background: #4DBEED;
}
.ma-launch .ma-icon svg { display: block; width: 33px; height: 42px; }
.ma-launch .ma-text { display: flex; flex-direction: column; gap: 4px; }
.ma-launch .ma-kicker {
  font: 700 13px/1 'DM Sans', Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  opacity: 0.7;
}
.ma-launch .ma-label {
  font-family: fatfrank, 'Fat Frank', 'MA Fat Frank', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
}
/* the "NEW" tab, like the one on the TV in the home page hero */
.ma-launch .ma-sticker {
  position: absolute;
  top: -14px;
  right: -12px;
  padding: 5px 9px 4px;
  background: #F38149;
  color: #fff;
  border: 2px solid #000;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #000;
  font-family: fatfrank, 'Fat Frank', 'MA Fat Frank', 'Arial Black', sans-serif;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  transform: rotate(12deg);
}

/* ---------- [milk_arcade_button] ---------- */
html body button.ma-inline-button,
html body button.ma-inline-button:hover,
html body button.ma-inline-button:focus {
  display: inline-block;
  margin: 0;
  padding: 20px 25px;
  background: #FFC416;
  color: #000;
  border: 2px solid #000;
  border-radius: 100px;
  box-shadow: 9px 9px 0 #000;
  font: 700 16px/1.1 'DM Sans', Arial, sans-serif;
  text-transform: none;
  cursor: pointer;
}
html body button.ma-inline-button:active { transform: translate(5px, 5px); box-shadow: 4px 4px 0 #000; }

/* ---------- Popup: just the console, floating over the blurred page ---------- */
.ma-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  background: rgba(7, 11, 26, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.25s;
}
.ma-overlay[hidden] { display: none !important; }
.ma-overlay.ma-in { opacity: 1; }

/* The arcade page is see-through and centres and scales the console itself */
.ma-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color-scheme: normal;
  transform: translateY(40px) scale(0.94);
  transition: transform 0.35s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.ma-in .ma-frame { transform: none; }

html body .ma-overlay button.ma-close,
html body .ma-overlay button.ma-close:hover,
html body .ma-overlay button.ma-close:focus {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0 0 2px;
  background: #F4B0D7;
  color: #000;
  border: 2px solid #000;
  border-radius: 50%;
  box-shadow: 4px 4px 0 #000;
  font: 700 28px/1 'DM Sans', Arial, sans-serif;
  cursor: pointer;
}
html body .ma-overlay button.ma-close:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; }
html body .ma-overlay button.ma-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- [milk_arcade] embed ---------- */
.milk-arcade-embed iframe {
  display: block;
  width: 100%;
  border: 3px solid #000;
  border-radius: 24px;
  box-shadow: 9px 9px 0 #000;
  background: #4DBEED;
}

@media (max-width: 640px) {
  html body button.ma-launch,
  html body button.ma-launch:hover,
  html body button.ma-launch:focus { bottom: 18px; gap: 10px; padding: 7px 14px 7px 7px; box-shadow: 6px 6px 0 #000; }
  html body button.ma-launch.ma-left { left: 12px; }
  html body button.ma-launch.ma-right { right: 12px; }
  .ma-launch .ma-icon { width: 50px; height: 50px; }
  .ma-launch .ma-icon svg { width: 25px; height: 32px; }
  .ma-launch .ma-kicker { font-size: 11px; }
  .ma-launch .ma-label { font-size: 20px; }
  .ma-launch .ma-sticker { font-size: 13px; top: -12px; right: -10px; }
  html body .ma-overlay button.ma-close,
  html body .ma-overlay button.ma-close:hover,
  html body .ma-overlay button.ma-close:focus { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html body button.ma-launch,
  .ma-overlay,
  .ma-frame { transition: none; }
  html body button.ma-launch.ma-shown { animation: none; }
}