/* =========================================================
   TXT-ERS PREMIUM ACTIVITY SYSTEM

   Shared visual language for all dynamic activities.
   Activity-specific files should build on these classes.
   ========================================================= */


/* =========================================================
   1. ACTIVITY TOKENS
   ========================================================= */

:root {
  --activity-ink: #17233a;
  --activity-muted: #667085;

  --activity-indigo: #4e46b4;
  --activity-indigo-light: #8178dc;

  --activity-sage: #4f9470;
  --activity-sage-light: #86b99a;

  --activity-clay: #c9785e;
  --activity-clay-light: #e4a084;

  --activity-blue: #557f9f;
  --activity-blue-light: #86aabe;

  --activity-sand: #d8bd8b;
  --activity-lavender: #ddd8f4;

  --activity-surface:
    rgba(255, 255, 255, 0.86);

  --activity-surface-strong:
    rgba(255, 255, 255, 0.96);

  --activity-border:
    rgba(71, 76, 111, 0.11);

  --activity-shadow:
    0 18px 44px rgba(35, 42, 68, 0.10);

  --activity-shadow-raised:
    0 24px 54px rgba(35, 42, 68, 0.18);

  --activity-radius-large: 28px;
  --activity-radius-medium: 20px;
  --activity-radius-small: 14px;

  --activity-spring:
    cubic-bezier(0.22, 0.75, 0.24, 1);
}


/* =========================================================
   2. SHARED ACTIVITY SHELL
   ========================================================= */

.txt-ers-activity {
  position: relative;

  width: 100%;
  min-width: 0;

  color: var(--activity-ink);
}

.txt-ers-activity-header {
  max-width: 640px;
}

.txt-ers-activity-title {
  margin: 0;

  color: var(--activity-ink);

  font-size: clamp(1.2rem, 2vw, 1.52rem);
  font-weight: 790;
  line-height: 1.18;
  letter-spacing: -0.032em;
}

.txt-ers-activity-instructions {
  margin: 10px 0 0;

  color: var(--activity-muted);

  font-size: 0.92rem;
  line-height: 1.65;
}

.txt-ers-activity-stage {
  position: relative;

  width: 100%;
  min-width: 0;

  margin-top: 24px;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.90);

  border-radius: var(--activity-radius-large);

  background:
    radial-gradient(
      circle at 14% 12%,
      rgba(218, 211, 244, 0.42),
      transparent 31%
    ),

    radial-gradient(
      circle at 86% 82%,
      rgba(222, 190, 145, 0.28),
      transparent 32%
    ),

    radial-gradient(
      circle at 50% 48%,
      rgba(204, 229, 215, 0.34),
      transparent 42%
    ),

    linear-gradient(
      145deg,
      rgba(250, 251, 249, 0.98),
      rgba(246, 245, 250, 0.97)
    );

  box-shadow:
    var(--activity-shadow),

    inset 0 1px 0
    rgba(255, 255, 255, 0.96);

  isolation: isolate;
}


/* =========================================================
   3. SUBTLE CULTURAL MOTIF LAYER
   ========================================================= */

.txt-ers-activity-stage::before {
  position: absolute;
  inset: 0;

  z-index: 0;

  content: "";

  pointer-events: none;

  opacity: 0.15;

  background-image:
    radial-gradient(
      circle,
      rgba(63, 76, 101, 0.28) 1px,
      transparent 1.5px
    );

  background-size: 24px 24px;

  mask-image:
    linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.8),
      transparent 56%
    );
}

.txt-ers-activity-stage::after {
  position: absolute;

  right: -34px;
  bottom: -44px;

  z-index: 0;

  width: 180px;
  height: 150px;

  content: "";

  pointer-events: none;

  border:
    1px solid
    rgba(78, 70, 160, 0.10);

  border-radius:
    100% 0 0 0;

  box-shadow:
    -26px -24px 0
      rgba(87, 143, 111, 0.04),

    -52px -48px 0
      rgba(189, 119, 89, 0.035);
}


/* =========================================================
   4. FLOATING INTERACTION OBJECTS
   ========================================================= */

.activity-object {
  position: relative;

  z-index: 3;

  user-select: none;
  touch-action: none;

  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform 220ms var(--activity-spring),
    opacity 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 220ms ease;
}

.activity-object:hover {
  transform: translateY(-2px);

  box-shadow:
    0 15px 32px
    rgba(39, 46, 72, 0.14);
}

.activity-object.is-dragging {
  z-index: 100;

  cursor: grabbing;

  transform:
    scale(1.055)
    rotate(-0.5deg);

  opacity: 0.96;

  box-shadow:
    0 28px 60px
    rgba(28, 35, 61, 0.24);

  transition:
    opacity 120ms ease,
    box-shadow 120ms ease;
}

.activity-object.is-settling {
  transition:
    transform 360ms var(--activity-spring),
    left 360ms var(--activity-spring),
    top 360ms var(--activity-spring);
}


/* =========================================================
   5. DROP ZONES
   ========================================================= */

.activity-drop-zone {
  transition:
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 190ms ease,
    transform 190ms var(--activity-spring);
}

.activity-drop-zone.is-active {
  border-color:
    rgba(78, 70, 180, 0.42);

  background:
    rgba(228, 224, 255, 0.18);
}

.activity-drop-zone.is-targeted {
  border-color:
    rgba(74, 143, 104, 0.72);

  background:
    rgba(210, 237, 220, 0.28);

  box-shadow:
    inset 0 0 0 4px
    rgba(75, 149, 105, 0.08);

  transform: scale(1.012);
}


/* =========================================================
   6. SHARED FLOATING CAPSULE
   ========================================================= */

.activity-capsule {
  min-width: 96px;
  max-width: 150px;
  min-height: 48px;

  padding: 10px 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.90);

  border-radius: 999px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(244, 245, 248, 0.92)
    );

  color: #293147;

  box-shadow:
    0 9px 24px
    rgba(39, 45, 69, 0.10),

    inset 0 1px 0
    rgba(255, 255, 255, 0.96);

  font: inherit;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.25;

  text-align: center;

  cursor: grab;
}

.activity-capsule.is-selected {
  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      var(--activity-indigo),
      var(--activity-indigo-light)
    );

  box-shadow:
    0 15px 34px
    rgba(70, 60, 160, 0.25),

    inset 0 1px 0
    rgba(255, 255, 255, 0.25);
}


/* =========================================================
   7. ACTIVITY STATUS AND FEEDBACK
   ========================================================= */

.activity-status-row {
  margin-top: 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 10px 16px;
}

.activity-status-text {
  margin: 0;

  color: #506175;

  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.4;
}

.activity-reset-button {
  min-height: 42px;

  padding: 8px 4px;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  border: 0;

  background: transparent;

  color: var(--activity-indigo);

  font: inherit;
  font-size: 0.74rem;
  font-weight: 760;

  cursor: pointer;
}

.activity-reset-button:hover {
  color: #352d8e;

  text-decoration: underline;
  text-underline-offset: 3px;
}

.activity-completion {
  margin-top: 16px;
  padding: 15px 16px;

  display: grid;

  grid-template-columns:
    38px minmax(0, 1fr);

  gap: 12px;

  border:
    1px solid
    rgba(75, 149, 105, 0.16);

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(227, 245, 234, 0.94),
      rgba(248, 251, 248, 0.88)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.94);
}

.activity-completion[hidden] {
  display: none;
}

.activity-completion-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #448f65,
      #6db188
    );

  box-shadow:
    0 8px 18px
    rgba(60, 132, 89, 0.20);
}

.activity-completion-title {
  display: block;

  color: #315e43;

  font-size: 0.82rem;
  font-weight: 810;
  line-height: 1.3;
}

.activity-completion-text {
  margin: 4px 0 0;

  color: #4d6155;

  font-size: 0.76rem;
  line-height: 1.5;
}


/* =========================================================
   8. PRIVACY NOTE
   ========================================================= */

.activity-privacy-note {
  margin: 14px 0 0;
  padding-top: 13px;

  display: flex;
  align-items: flex-start;

  gap: 8px;

  border-top:
    1px solid
    rgba(68, 76, 102, 0.09);

  color: #72798a;

  font-size: 0.67rem;
  line-height: 1.45;
}


/* =========================================================
   9. KEYBOARD PLACEMENT MENU
   ========================================================= */

.activity-placement-menu {
  margin-top: 14px;
  padding: 15px;

  border:
    1px solid
    rgba(79, 72, 156, 0.13);

  border-radius: 18px;

  background:
    rgba(247, 245, 252, 0.96);

  box-shadow:
    0 12px 28px
    rgba(47, 42, 93, 0.08);
}

.activity-placement-menu[hidden] {
  display: none;
}

.activity-placement-menu-title {
  margin: 0;

  color: #33394f;

  font-size: 0.8rem;
  font-weight: 790;
  line-height: 1.4;
}

.activity-placement-menu-options {
  margin-top: 12px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}

.activity-placement-menu-button {
  min-height: 46px;

  padding: 9px 11px;

  border:
    1px solid
    rgba(69, 74, 108, 0.12);

  border-radius: 13px;

  background: #ffffff;

  color: #3d4357;

  font: inherit;
  font-size: 0.7rem;
  font-weight: 730;

  cursor: pointer;
}


/* =========================================================
   10. ACCESSIBILITY
   ========================================================= */

.activity-object:focus-visible,
.activity-reset-button:focus-visible,
.activity-placement-menu-button:focus-visible {
  outline:
    3px solid
    rgba(78, 70, 180, 0.30);

  outline-offset: 3px;
}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .txt-ers-activity-title {
    font-size: 1.2rem;
  }

  .txt-ers-activity-instructions {
    font-size: 0.86rem;
    line-height: 1.58;
  }

  .txt-ers-activity-stage {
    margin-top: 20px;

    border-radius: 23px;
  }

  .activity-capsule {
    min-width: 88px;
    max-width: 126px;
    min-height: 46px;

    padding: 9px 11px;

    font-size: 0.68rem;
  }

  .activity-placement-menu-options {
    grid-template-columns:
      minmax(0, 1fr);
  }
}


/* =========================================================
   12. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .activity-object,
  .activity-drop-zone {
    transition: none;
  }

  .activity-object.is-dragging {
    transform: none;
  }
}