/* /usr/local/var/www/mambo/style.css */      
:root {      
  --blue: #627ccf;      
  --deep-blue: #24396f;      
  --cream: #fff8ee;      
  --red: #a83d47;      
  --gold: #ffd36a;      
  --ink: #272538;      
}      
      
* {      
  box-sizing: border-box;      
}      
      
img.emoji {      
  height: 1em;      
  width: 1em;      
  margin: 0 0.05em;      
  vertical-align: -0.12em;      
  display: inline-block;      
}      
      
button img.emoji {      
  height: 1.35em;      
  width: 1.35em;      
  margin: 0;      
  vertical-align: -0.22em;      
}      
      
body {      
  min-height: 100vh;      
  margin: 0;      
  display: grid;      
  place-items: center;      
  font-family: "Nunito", ui-rounded, system-ui, sans-serif;      
  color: var(--ink);      
  background:      
    radial-gradient(circle at 20% 10%, #ffffffaa 0 8%, transparent 22%),      
    radial-gradient(circle at 80% 20%, #ffd36a66 0 7%, transparent 20%),      
    linear-gradient(180deg, #80b7ff 0%, #dcecff 45%, #9ccf8b 100%);      
  overflow-x: hidden;      
  overflow-y: auto;      
  padding: 24px 0;      
}      
      
body::before {      
  content: "";      
  position: fixed;      
  inset: auto -10% 0;      
  height: 28vh;      
  background:      
    repeating-linear-gradient(      
      -8deg,      
      #7fb66c 0 18px,      
      #72a85f 18px 36px      
    );      
  opacity: 0.65;      
  z-index: -1;      
}      
      
.card {      
  width: min(92vw, 440px);      
  padding: 26px;      
  text-align: center;      
  border: 3px solid #ffffffcc;      
  border-radius: 32px;      
  background: #fff8eecc;      
  box-shadow:      
    0 24px 70px #24396f55,      
    inset 0 0 0 2px #ffd36a99;      
  backdrop-filter: blur(14px);      
  animation: floaty 4s ease-in-out infinite;      
}      
      
.sparkles {      
  color: var(--gold);      
  font-size: 1.45rem;      
  letter-spacing: 0.35rem;      
  text-shadow: 0 2px 10px #fff;      
  margin-bottom: 10px;      
}      
      
.mambo {      
  width: min(72vw, 260px);      
  aspect-ratio: 1;      
  object-fit: cover;      
  border-radius: 28px;      
  border: 5px solid white;      
  box-shadow:      
    0 14px 35px #24396f55,      
    0 0 0 4px var(--blue);      
}      
      
h1 {      
  margin: 18px 0 4px;      
  font-family: "Cherry Bomb One", "Nunito", ui-rounded, system-ui, sans-serif;      
  font-size: clamp(2.4rem, 10vw, 4.4rem);      
  line-height: 0.95;      
  color: var(--deep-blue);      
  text-shadow:      
    2px 2px 0 white,      
    4px 4px 0 var(--gold);      
}      
      
.subtitle {      
  margin: 0 auto 18px;      
  max-width: 28ch;      
  font-weight: 800;      
  color: #5b4f61;      
}      
      
.status {      
  display: inline-flex;      
  gap: 9px;      
  align-items: center;      
  padding: 10px 14px;      
  border-radius: 999px;      
  background: white;      
  border: 2px dashed var(--blue);      
  font-size: 0.95rem;      
  font-weight: 800;      
}      
      
.dot {      
  width: 11px;      
  height: 11px;      
  border-radius: 50%;      
  background: #3ee680;      
  box-shadow: 0 0 14px #3ee680;      
}      
      
button {      
  display: block;      
  margin: 18px auto;      
  padding: 12px 22px;      
  border: 0;      
  border-radius: 999px;      
  background: linear-gradient(135deg, var(--red), #e56a78);      
  color: white;      
  font: inherit;      
  font-weight: 1000;      
  cursor: pointer;      
  box-shadow: 0 9px 0 #6f2630, 0 18px 30px #a83d4755;      
  transition: transform 0.12s ease, box-shadow 0.12s ease;      
}      
      
button:active {      
  transform: translateY(7px);      
  box-shadow: 0 2px 0 #6f2630, 0 8px 20px #a83d4755;      
}      
      
.log {      
  margin: 0;      
  padding: 14px;      
  text-align: left;      
  white-space: pre-wrap;      
  border-radius: 18px;      
  background: #1d2138;      
  color: #d9e4ff;      
  font-family: "JetBrains Mono", ui-monospace, monospace;      
  font-size: 0.8rem;      
  line-height: 1.5;      
  box-shadow: inset 0 0 0 2px #ffffff18;      
}      
      
.munned .card {      
  animation: mun 0.55s ease;      
}      
      
.site-footer {      
  margin-top: 18px;      
  display: grid;      
  gap: 2px;      
  font-family: "JetBrains Mono", ui-monospace, monospace;      
  font-size: 0.64rem;      
  line-height: 1.35;      
  letter-spacing: 0.08em;      
  text-transform: lowercase;      
  opacity: 0.52;      
}      
      
.site-footer a,      
.site-footer-link {      
  color: inherit;      
  text-decoration: none;      
}      
      
.site-footer a:hover,      
.site-footer-link:hover {      
  text-decoration: underline;      
}      
      
.site-footer-link {      
  margin: 0;      
  padding: 0;      
  border: 0;      
  border-radius: 0;      
  background: transparent;      
  box-shadow: none;      
  display: inline;      
  font: inherit;      
  font-size: inherit;      
  font-weight: inherit;      
  letter-spacing: inherit;      
  text-transform: inherit;      
  cursor: pointer;      
}      
      
.site-footer-link:active {      
  transform: none;      
  box-shadow: none;      
}      
      
@keyframes floaty {      
  0%, 100% { transform: translateY(0) rotate(-0.35deg); }      
  50% { transform: translateY(-8px) rotate(0.35deg); }      
}      
      
@keyframes mun {      
  0% { transform: scale(1) rotate(0); }      
  25% { transform: scale(1.04) rotate(-2deg); }      
  50% { transform: scale(1.08) rotate(2deg); }      
  100% { transform: scale(1) rotate(0); }      
}      




/* final mambo portal link */
.action-row {
  margin: 18px auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.action-row button,
.portal-button {
  margin: 0;
}

.action-row #mun {
  width: 100%;
  min-width: 0;
  padding-inline: 14px;
}

.portal-button {
  width: max-content;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 13px;
  border-radius: 999px;
  border: 1px solid rgba(36, 57, 111, 0.5);
  background:
    linear-gradient(135deg, #151827, #242945);
  color: #fff8ee;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    0 9px 0 #0b0e1a,
    0 18px 30px rgba(36, 57, 111, 0.36),
    inset 0 0 0 1px rgba(255,255,255,0.10);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}

.portal-button::before {
  content: ">";
  margin-right: 0.55em;
  color: var(--gold);
}

.portal-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent);
  transform: translateX(-120%);
  transition: transform 0.35s ease;
}

.portal-button:hover {
  filter: brightness(1.08);
  text-decoration: none;
}

.portal-button:hover::after {
  transform: translateX(120%);
}

.portal-button:active {
  transform: translateY(7px);
  box-shadow:
    0 2px 0 #0b0e1a,
    0 8px 20px rgba(36, 57, 111, 0.28),
    inset 0 0 0 1px rgba(255,255,255,0.10);
}

@media (max-width: 390px) {
  .action-row {
    gap: 7px;
  }

  .action-row #mun {
    font-size: 0.86rem;
    padding-inline: 10px;
  }

  .portal-button {
    font-size: 0.56rem;
    padding-inline: 10px;
    letter-spacing: 0.10em;
  }
}



/* final mambo button width polish */
.action-row {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
}

.action-row #mun {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 12px 24px !important;
  white-space: nowrap !important;
}

.portal-button {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 12px 18px !important;
  white-space: nowrap !important;
}

@media (max-width: 420px) {
  .action-row {
    gap: 9px !important;
  }

  .action-row #mun {
    padding-inline: 18px !important;
    font-size: 0.92rem !important;
  }

  .portal-button {
    padding-inline: 13px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.10em !important;
  }
}




/* final artifact handoff transition */
#artifact-flash {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, #fff 0%, #fff 42%, #fff8ee 76%, #fff 100%);
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity 0.72s cubic-bezier(.18, .86, .22, 1),
    transform 0.82s cubic-bezier(.12, .92, .16, 1);
}

body.artifact-opening {
  overflow: hidden;
}

body.artifact-opening #artifact-flash {
  opacity: 1;
  transform: scale(1.025);
}

body.artifact-opening .card {
  animation: none;
  transform: scale(0.982);
  filter: blur(1.25px) brightness(1.32) saturate(0.72);
  transition:
    transform 0.42s ease,
    filter 0.42s ease;
}

body.artifact-opening .portal-button,
body.artifact-opening #mun {
  transform: translateY(7px);
}

@media (prefers-reduced-motion: reduce) {
  #artifact-flash,
  body.artifact-opening .card {
    transition: none;
  }
}