/*
 * Shape-Shifting Buttons — v0.5 / v0.6
 * Styles are independent from the Quirkport brand assets and from the
 * base layout. Keep motion purely decorative and respect reduced motion.
 */

.game-button.shape-pill { border-radius: 999px; }
.game-button.shape-square {
  min-width: 142px;
  max-width: 142px;
  width: 142px;
  min-height: 126px;
  border-radius: 9px;
  padding: 18px;
  font-size: 16px;
  flex-direction: column;
  gap: 6px;
  overflow-wrap: anywhere;
}
.game-button.shape-circle {
  min-width: 132px;
  max-width: 132px;
  width: 132px;
  min-height: 132px;
  height: 132px;
  border-radius: 50%;
  padding: 14px;
  flex-direction: column;
  gap: 5px;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.game-button.shape-arcade {
  border-radius: 16px;
  border-width: 4px;
  box-shadow: 0 9px 0 #542543, 0 20px 40px #0005;
}
.game-button.shape-blob {
  border-radius: 38% 62% 58% 42% / 55% 36% 64% 45%;
}
.game-button.shape-classic { border-radius: 11px; }

/* A selected skin overrides the default teal clone palette. */
.game-button.skin-neon {
  background: linear-gradient(140deg,#3e1c7d,#09152e 72%);
  color: #e7ffe9;
  border: 2px solid #99ff89;
  box-shadow: 0 0 0 5px #99ff8924, 0 10px 34px #59ffc756, inset 0 0 22px #ab79ff50;
  text-shadow: 0 0 12px #a7ffae90;
}
.game-button.skin-chrome {
  background: linear-gradient(155deg,#fff 2%,#b5c6d7 20%,#f8fdff 39%,#73869c 72%,#e2eaf1 95%);
  border: 2px solid #e6f5ff;
  color: #1c2535;
  box-shadow: 0 9px 0 #4d6075, 0 16px 36px #0005;
}
.game-button.skin-pixel {
  border: 4px solid #101126;
  background: linear-gradient(135deg,#f8de74 50%,#ffc256 50%);
  color: #18152c;
  box-shadow: 7px 7px 0 #a75962, 12px 12px 0 #05091a;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: -.035em;
}
.game-button.skin-terminal {
  background: #091a14;
  color: #9cffa6;
  border: 1px solid #55b886;
  font: 700 17px var(--mono);
  box-shadow: inset 0 0 18px #3ae68117,0 0 20px #2bcd8638;
}
.game-button.skin-glass {
  background: linear-gradient(135deg,#d5eeff91,#c8baff42);
  color: #ffffff;
  border: 1px solid #ffffff94;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 #fff8, 0 15px 36px #0005;
}
.game-button.skin-hazard {
  background: repeating-linear-gradient(135deg,#ffcc41 0 19px,#ffd65b 19px 37px,#251f27 38px 43px);
  border: 3px solid #24202d;
  color: #221725;
  box-shadow: 0 8px 0 #aa762a,0 16px 30px #0007;
}
.game-button.skin-blueprint {
  background-color: #16589e;
  background-image: linear-gradient(#d8efff1c 1px,transparent 1px),linear-gradient(90deg,#d8efff1c 1px,transparent 1px);
  background-size: 14px 14px;
  color: #ecf7ff;
  border: 2px dashed #a4d6ff;
  box-shadow: 0 9px 0 #0b2e52,0 16px 30px #0005;
}
.game-button.skin-ghost {
  background: #0a1a2b55;
  color: #f0fbff;
  border: 2px dashed #b7d7ed;
  box-shadow: inset 0 0 20px #b2edff15,0 12px 35px #0002;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.game-button.skin-classic { /* Keep the existing coral and teal defaults. */ }

.game-button .button-decoration {
  position: absolute;
  top: -12px;
  left: -10px;
  pointer-events: none;
  line-height: 1;
  color: #fff0c7;
  font: 800 24px var(--sans);
  text-shadow: 0 2px 3px #0008;
  rotate: -12deg;
}
.game-button .decoration-googly {
  top: 7px;
  left: 8px;
  color: #fff;
  letter-spacing: 1px;
  font-size: 12px;
}
.game-button .decoration-tie { top: auto; bottom: -12px; left: 50%; color: #f98587; }
.game-button .decoration-sticker { color: #ffe06d; }
.game-button .decoration-crack { top: 1px; left: 3px; color: #fcf9ee; }
.game-button .decoration-stitches { top: auto; bottom: -7px; left: 14px; font: 800 14px var(--mono); }

.game-button .button-faction {
  position: absolute;
  bottom: -29px;
  left: 50%;
  translate: -50% 0;
  padding: 4px 7px;
  border: 1px solid #aaaad64f;
  border-radius: 4px;
  background: #1a2040f5;
  color: #e7ddff;
  white-space: nowrap;
  font: 9px var(--mono);
  letter-spacing: .035em;
  pointer-events: none;
}
.game-button[data-faction="THE UNION"] .button-faction { color: #c6ff8c; }
.game-button[data-faction="CHAOS COMMITTEE"] .button-faction { color: #ffb99c; }
.game-button[data-faction="QUALITY CONTROL"] .button-faction { color: #a7dcff; }

/* Use individual translate / rotate rather than replacing the positioning
 * transform; buttons must remain clickable during an animation. */
.game-button.motion-squish { animation: button-squish 1.1s ease-in-out both; }
.game-button.motion-bounce { animation: button-bounce 1.1s cubic-bezier(.2,.8,.2,1) both; }
.game-button.motion-wobble { animation: button-wobble 1.1s ease-in-out both; }
.game-button.motion-spin { animation: button-spin 1.1s ease-in-out both; }
.game-button.motion-flip { animation: button-flip 1.1s ease-in-out both; }
.game-button.motion-hinge { animation: button-hinge 1.1s ease-in-out both; }
.game-button.motion-glitch { animation: button-glitch 1.1s steps(2,end) both; }
.game-button.motion-pulse { animation: button-pulse 1.1s ease-in-out both; }
.game-button.motion-dissolve { animation: button-dissolve 1.1s ease-in-out both; }

@keyframes button-squish {
  0%,100% { scale: 1 1; }
  34% { scale: 1.17 .78; }
  68% { scale: .88 1.13; }
}
@keyframes button-bounce {
  0%,100% { translate: 0 0; }
  32% { translate: 0 -34px; }
  62% { translate: 0 8px; }
}
@keyframes button-wobble {
  0%,100% { rotate: 0deg; }
  24%,72% { rotate: -9deg; }
  48% { rotate: 11deg; }
}
@keyframes button-spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@keyframes button-flip {
  0%,100% { transform: translate(-50%,-50%) scale(var(--button-scale,1)) rotateY(0); }
  50% { transform: translate(-50%,-50%) scale(var(--button-scale,1)) rotateY(180deg); }
}
@keyframes button-hinge {
  0%,100% { rotate: 0deg; }
  40% { rotate: 25deg; }
  70% { rotate: -8deg; }
}
@keyframes button-glitch {
  0%,100% { translate: 0 0; filter: none; }
  20% { translate: -5px 2px; filter: hue-rotate(80deg); }
  40% { translate: 7px -3px; filter: hue-rotate(180deg); }
  65% { translate: -3px 4px; filter: hue-rotate(-80deg); }
}
@keyframes button-pulse {
  0%,100% { scale: 1; }
  45% { scale: 1.12; }
}
@keyframes button-dissolve {
  0%,100% { opacity: 1; }
  45% { opacity: .17; }
}
@keyframes button-limp {
  0%,100% { rotate: 0; }
  50% { rotate: 2deg; }
}
.game-button.has-limp:not(.is-takeover) { animation: button-limp 1.8s ease-in-out infinite; }

/* Full-screen events always win over decorative shapes and spin effects. */
.game-button.is-takeover {
  width: calc(100vw - 24px);
  min-width: 0;
  max-width: none;
  height: calc(100dvh - 24px);
  min-height: 0;
  border-radius: 22px;
  font-size: clamp(32px, 8vw, 120px);
  padding: 40px;
}
.game-button.is-takeover .button-faction { bottom: 54px; font-size: 12px; }
.game-button.is-takeover .button-decoration { display: none; }

@media (max-width: 760px) {
  .game-button.shape-square {
    min-width: 108px;
    width: 108px;
    max-width: 108px;
    min-height: 108px;
    padding: 12px;
    font-size: 12px;
  }
  .game-button.shape-circle {
    min-width: 108px;
    width: 108px;
    max-width: 108px;
    min-height: 108px;
    height: 108px;
    padding: 12px;
    font-size: 12px;
  }
  .game-button.shape-arcade { border-width: 3px; }
  .game-button.is-takeover {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    font-size: clamp(30px, 10vw, 65px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .game-button[class*="motion-"],
  .game-button.has-limp {
    animation: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
  }
}