/*!
 * Udaan, © 2026 Shoolini University. All rights reserved.
 * Designed & built in-house by Divya Mohan · AI Product Developer · Shoolini Online.
 * Portfolio https://dmj.one/work/ · Proprietary & confidential, see /COPYRIGHT.
 * SPDX-License-Identifier: LicenseRef-Shoolini-Proprietary
 */
/* ============================================================================
 * UdaanSquad styles — the squad-streak card.
 *
 * Warm + social + tactile, reusing the platform's variables so it sits inside
 * the app theme (light/dark) with no extra config. GPU-cheap only: transforms /
 * opacity, no animated blur (i5 / no-GPU budget). Honours prefers-reduced-motion
 * and the .squad-reduced class the client sets.
 * ========================================================================== */

.squad-root { display: block; width: 100%; }

/* visually-hidden live region (screen-reader announcements) */
.squad-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.squad-card {
  position: relative;
  border-radius: 18px;
  padding: 1.25rem 1.25rem 1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  background-color: var(--card, var(--surface, #14181f));
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  box-shadow: 0 6px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
  color: var(--text, #e9eef5);
}

/* ---- shared bits ---- */
.squad-card h2 { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.squad-sub, .squad-help, .squad-line { color: var(--muted, #9fb0c3); }
.squad-msg, .squad-load { text-align: center; padding: 1.5rem 0.5rem; }

.squad-btn {
  appearance: none; cursor: pointer;
  border: 1px solid var(--border, rgba(255,255,255,0.16));
  background: var(--btn-bg, rgba(255,255,255,0.06));
  color: var(--text, #e9eef5);
  border-radius: 12px; padding: 0.6rem 0.95rem;
  font: inherit; font-weight: 600;
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.squad-btn:hover { background: var(--btn-bg-hover, rgba(255,255,255,0.12)); }
.squad-btn:active { transform: translateY(1px); }
.squad-btn-go, .squad-retry {
  background: linear-gradient(180deg, var(--accent, #4f8cff), var(--accent-2, #3a6fd6));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 14px rgba(79,140,255,0.35);
}
.squad-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* keyboard focus: always visible, never removed (WCAG 2.2 AA) */
.squad-card :is(button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--focus, #ffd166);
  outline-offset: 2px; border-radius: 10px;
}

.squad-in {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border, rgba(255,255,255,0.16));
  background: var(--field-bg, rgba(0,0,0,0.22));
  color: var(--text, #e9eef5);
  border-radius: 12px; padding: 0.6rem 0.7rem; font: inherit;
}
.squad-code-in { letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.squad-lbl { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.92rem; }
.squad-help { display: block; font-size: 0.8rem; margin-top: 0.3rem; }
.squad-err { color: var(--danger, #ff8080); margin: 0.75rem 0 0; min-height: 1.1em; font-size: 0.9rem; }

/* ---- empty (create / join) ---- */
.squad-hero { text-align: center; margin-bottom: 1rem; }
.squad-hero-art { font-size: 2.4rem; line-height: 1; }
.squad-sub { margin: 0.35rem auto 0; max-width: 36ch; font-size: 0.92rem; }

.squad-actions {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.9rem; align-items: start;
}
.squad-form { display: flex; flex-direction: column; gap: 0.5rem; }
.squad-or {
  align-self: stretch; display: grid; place-items: center;
  color: var(--muted, #9fb0c3); font-size: 0.85rem; position: relative;
}
.squad-or span {
  background: var(--card, var(--surface, #14181f)); padding: 0 0.4rem;
  border: 1px solid var(--border, rgba(255,255,255,0.10)); border-radius: 999px;
}
@media (max-width: 560px) {
  .squad-actions { grid-template-columns: 1fr; }
  .squad-or { padding: 0.2rem 0; }
}

/* ---- live squad ---- */
.squad-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.squad-name { font-size: 1.2rem; font-weight: 700; word-break: break-word; }
.squad-streak {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,180,80,0.18), rgba(255,120,60,0.10));
  border: 1px solid rgba(255,160,80,0.35);
  font-weight: 800; white-space: nowrap;
}
.squad-flame { font-size: 1.05rem; display: inline-block; transform-origin: 50% 80%; }
.squad-line { margin: 0.6rem 0 0.9rem; font-size: 0.98rem; }

.squad-roster { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.45rem; }
.squad-mate {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.65rem; border-radius: 12px;
  background: var(--field-bg, rgba(0,0,0,0.16));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.squad-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--muted, #62748a);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}
.squad-mate.is-up .squad-dot {
  background: var(--ok, #44d07b);
  box-shadow: 0 0 0 3px rgba(68,208,123,0.18), 0 0 10px rgba(68,208,123,0.45);
}
.squad-mate-name { font-weight: 600; flex: 1 1 auto; word-break: break-word; }
.squad-mate-tag { font-size: 0.78rem; color: var(--muted, #9fb0c3); white-space: nowrap; }
.squad-mate.is-up .squad-mate-tag { color: var(--ok, #44d07b); }

.squad-meta { display: grid; gap: 0.8rem; margin-bottom: 0.9rem; }
.squad-grace { font-size: 0.85rem; color: var(--muted, #9fb0c3); }
.squad-share .squad-lbl { margin-bottom: 0.3rem; }
.squad-code-row { display: flex; align-items: center; gap: 0.5rem; }
.squad-code {
  flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1rem; letter-spacing: 0.22em; font-weight: 800;
  padding: 0.5rem 0.7rem; border-radius: 10px;
  background: var(--field-bg, rgba(0,0,0,0.28));
  border: 1px dashed var(--border, rgba(255,255,255,0.18));
  text-align: center; user-select: all;
}
.squad-copy {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  border: 1px solid var(--border, rgba(255,255,255,0.16));
  background: var(--btn-bg, rgba(255,255,255,0.06)); color: var(--text, #e9eef5);
  border-radius: 10px; padding: 0.5rem 0.8rem; white-space: nowrap;
}
.squad-copy:hover { background: var(--btn-bg-hover, rgba(255,255,255,0.12)); }

.squad-foot { display: flex; justify-content: flex-end; }
.squad-leave {
  appearance: none; cursor: pointer; font: inherit;
  background: none; border: none; color: var(--muted, #9fb0c3);
  text-decoration: underline; text-underline-offset: 3px; padding: 0.4rem;
}
.squad-leave:hover { color: var(--text, #e9eef5); }

/* ---- gentle motion (GPU-cheap; disabled for reduced motion) ---- */
.squad-spark {
  display: inline-block; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--accent, #4f8cff), transparent 70%);
  animation: squad-pulse 1.4s ease-in-out infinite;
}
.squad-card:not(.squad-reduced) .squad-flame { animation: squad-flicker 2.2s ease-in-out infinite; }

@keyframes squad-pulse { 0%,100% { transform: scale(0.85); opacity: 0.7; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes squad-flicker { 0%,100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .squad-spark, .squad-flame { animation: none !important; }
  .squad-btn { transition: none; }
}
.squad-reduced .squad-spark, .squad-reduced .squad-flame { animation: none !important; }