/* Spawn — unified premium bottom-sheet design system */

:root {
  --sheet-accent: #00d4ee;
  --sheet-rise: spawnSheetRise 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scrim */
.modal-scrim {
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Premium sheet shell — all standard bottom sheets */
.modal-scrim:not(.lfg-detail-scrim):not(.onboarding-game-sheet) > .sheet,
.modal-scrim > .spawn-sheet {
  --sheet-accent: var(--sheet-accent, #00d4ee);
  display: flex;
  flex-direction: column;
  max-height: 92dvh;
  padding: 0 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sheet-accent) 22%, rgba(255, 255, 255, 0.1));
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%, color-mix(in srgb, var(--sheet-accent) 14%, transparent), transparent 55%),
    linear-gradient(180deg, #12141c 0%, #0a0a0f 38%, #07070b 100%);
  box-shadow:
    0 -8px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.modal-scrim:not(.lfg-detail-scrim):not(.onboarding-game-sheet).open > .sheet,
.modal-scrim.open > .spawn-sheet {
  animation: spawnSheetRise 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes spawnSheetRise {
  from { transform: translateY(18px); opacity: 0.92; }
  to { transform: translateY(0); opacity: 1; }
}

.sheet-handle,
.spawn-sheet__handle {
  width: 40px;
  height: 4px;
  margin: var(--space-3) auto var(--space-2);
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

/* Sheet typography */
.modal-scrim .sheet > h3,
.modal-scrim .sheet .spawn-sheet__title,
.modal-scrim .sheet .lfg-filter-sheet__title,
.modal-scrim .sheet .world-filter-sheet__title,
.modal-scrim .sheet .hub-module-sheet__title,
.modal-scrim .sheet .dock-friends-sheet__title,
.modal-scrim .sheet .dock-notif-sheet__title,
.modal-scrim .sheet .join-info-sheet__head h2 {
  margin: 0;
  padding: 0 var(--space-4);
  font-size: clamp(1.25rem, 4.5vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
  font-family: var(--font-body);
}

.modal-scrim .sheet > p:first-of-type,
.modal-scrim .sheet .spawn-sheet__desc,
.modal-scrim .sheet .lfg-notifications-sheet__hint,
.modal-scrim .sheet .world-filter-sheet__desc,
.modal-scrim .sheet .hub-module__lead,
.modal-scrim .sheet .join-info-sheet__head p {
  margin: 8px 0 0;
  padding: 0 var(--space-4);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.52);
}

/* Scrollable body region */
.modal-scrim .sheet .lfg-filter-sheet__body,
.modal-scrim .sheet .lfg-notifications-list,
.modal-scrim .sheet .lfg-matches-list,
.modal-scrim .sheet .spawn-sheet__hero,
.modal-scrim .sheet .spawn-sheet__body,
.modal-scrim .sheet .world-filter-sheet__section,
.modal-scrim .sheet .world-filter-online,
.modal-scrim .sheet #feed-article-body,
.modal-scrim .sheet #hub-module-body,
.modal-scrim .sheet .dock-friends-sheet__body,
.modal-scrim .sheet .dock-notif-sheet__body,
.modal-scrim .sheet .join-info-sheet__steps {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.modal-scrim .sheet .lfg-filter-sheet__head,
.modal-scrim .sheet .spawn-sheet__hero {
  padding-top: var(--space-1);
}

.modal-scrim .sheet .lfg-filter-sheet__body,
.modal-scrim .sheet .spawn-sheet__body,
.modal-scrim .sheet .lfg-notifications-list,
.modal-scrim .sheet #feed-article-body,
.modal-scrim .sheet #hub-module-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--space-3);
}

.modal-scrim .sheet .lfg-notifications-sheet__hint {
  padding-bottom: var(--space-3);
}

/* Section labels */
.modal-scrim .sheet .lfg-filter-group__label,
.modal-scrim .sheet .world-filter-sheet__label,
.modal-scrim .sheet .spawn-sheet__kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.modal-scrim .sheet .lfg-filter-sheet__mode {
  margin: 6px 0 0;
  padding: 0 var(--space-4);
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--sheet-accent) 70%, rgba(255, 255, 255, 0.55));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-body);
}

/* Premium cards / rows */
.spawn-sheet-card,
.lfg-notif-row,
.lfg-match-row,
.spawn-toggle-row,
.spawn-feed-channel,
.privacy-card,
.hub-module__stats li,
.hub-module__link,
.hub-module__host,
.dock-friend-row,
.dock-notif-row {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.lfg-notif-row,
.lfg-match-row {
  padding: 14px;
  gap: 12px;
}

.lfg-notif-row--unread,
.lfg-match-row--new {
  border-color: color-mix(in srgb, var(--sheet-accent) 35%, transparent);
  background: color-mix(in srgb, var(--sheet-accent) 8%, rgba(255, 255, 255, 0.02));
}

.lfg-notif-row img,
.lfg-notif-row__glyph,
.lfg-match-row img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.lfg-notif-row__glyph {
  background: color-mix(in srgb, var(--sheet-accent) 12%, rgba(0, 0, 0, 0.35));
  color: var(--sheet-accent);
}

/* Filter chips — premium pills */
.lfg-filter-tag,
.world-filter-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 600;
  transform: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.lfg-filter-tag.is-on,
.world-filter-chip.selected {
  border-color: color-mix(in srgb, var(--sheet-accent) 55%, transparent);
  background: color-mix(in srgb, var(--sheet-accent) 18%, rgba(0, 0, 0, 0.35));
  color: #fff;
  box-shadow: 0 0 16px color-mix(in srgb, var(--sheet-accent) 22%, transparent);
  transform: none;
}

.lfg-filter-tag:hover,
.world-filter-chip:hover {
  border-color: color-mix(in srgb, var(--sheet-accent) 35%, rgba(255, 255, 255, 0.2));
  background: rgba(255, 255, 255, 0.06);
}

/* Filter toggles */
.lfg-filter-toggle {
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.lfg-filter-toggle input:checked + .lfg-filter-toggle__track {
  background: linear-gradient(135deg, var(--sheet-accent), color-mix(in srgb, var(--sheet-accent) 65%, #fff));
  box-shadow: 0 0 14px color-mix(in srgb, var(--sheet-accent) 35%, transparent);
}

.lfg-filter-range-val {
  color: var(--sheet-accent);
}

/* Sticky footers */
.spawn-sheet__footer,
.lfg-filter-sheet__foot,
.modal-scrim .sheet > .btn-primary,
.modal-scrim .sheet > .btn-secondary,
.modal-scrim .sheet > .btn-ghost,
.join-info-sheet__actions {
  flex-shrink: 0;
  margin-top: auto;
  padding: var(--space-3) var(--space-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(7, 7, 11, 0.72), rgba(7, 7, 11, 0.96));
  backdrop-filter: blur(12px);
}

.spawn-sheet__footer,
.lfg-filter-sheet__foot,
.join-info-sheet__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
}

.lfg-filter-sheet__foot {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-2);
}

/* Premium buttons inside sheets */
.modal-scrim .sheet .btn-primary,
.lfg-filter-btn--primary,
.lfg-detail-btn--primary {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #041016;
  background: linear-gradient(135deg, #5cefff, #00d4ee);
  box-shadow: 0 8px 24px rgba(0, 212, 238, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.modal-scrim .sheet .btn-primary:active,
.lfg-filter-btn--primary:active {
  transform: scale(0.98);
}

.modal-scrim .sheet .btn-secondary,
.modal-scrim .sheet .btn-ghost,
.lfg-filter-btn--ghost,
.lfg-detail-btn--ghost {
  min-height: 48px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
}

.modal-scrim .sheet .btn-secondary {
  border-color: color-mix(in srgb, var(--sheet-accent) 30%, rgba(255, 255, 255, 0.18));
  color: color-mix(in srgb, var(--sheet-accent) 80%, #fff);
  background: color-mix(in srgb, var(--sheet-accent) 8%, rgba(255, 255, 255, 0.04));
}

.lfg-filter-btn {
  min-height: 48px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
}

/* Accent variants per scrim */
.spawn-scrim--feed { --sheet-accent: #00d4ee; }
.spawn-scrim--notif { --sheet-accent: #fbbf24; }
.spawn-scrim--username { --sheet-accent: #e879f9; }
.spawn-scrim--account-name { --sheet-accent: #00d4ee; }
.spawn-scrim--danger { --sheet-accent: #ff453a; }
.lfg-filter-scrim { --sheet-accent: #7dff9a; }
.lfg-detail-scrim { --sheet-accent: var(--detail-accent, #00d4ee); }
.spawn-scrim--lfg { --sheet-accent: #00d4ee; }
.spawn-scrim--discover { --sheet-accent: #00d4ee; }
.spawn-scrim--dock { --sheet-accent: #00d4ee; }
.spawn-scrim--hub { --sheet-accent: #00d4ee; }
.join-info-scrim { --sheet-accent: #00d4ee; }

/* Account spawn-sheets — align with system */
.modal-scrim .spawn-sheet {
  border-radius: 20px 20px 0 0;
  border: 1px solid color-mix(in srgb, var(--sheet-accent) 22%, rgba(255, 255, 255, 0.1));
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%, color-mix(in srgb, var(--sheet-accent) 14%, transparent), transparent 55%),
    linear-gradient(180deg, #12141c 0%, #0a0a0f 38%, #07070b 100%);
  box-shadow:
    0 -8px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.modal-scrim.spawn-scrim--feed .spawn-sheet--feed {
  background: linear-gradient(180deg, #0c1929 0%, #060a12 42%, transparent 100%);
}

.modal-scrim.spawn-scrim--notif .spawn-sheet--notif {
  background: linear-gradient(165deg, #1a1408 0%, #0e0c14 38%, transparent 100%);
}

.modal-scrim.spawn-scrim--username .spawn-sheet--username {
  background: linear-gradient(180deg, #1a0f24 0%, #0d0a14 35%, transparent 100%);
}

.modal-scrim.spawn-scrim--danger .spawn-sheet--danger {
  background: linear-gradient(180deg, #1f0a0a 0%, #0f0a0a 30%, transparent 100%);
}

.spawn-sheet__hero {
  background: transparent;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.spawn-sheet__kicker {
  color: color-mix(in srgb, var(--sheet-accent) 75%, rgba(255, 255, 255, 0.5));
}

.spawn-toggle-row {
  padding: 14px;
  margin-bottom: 8px;
}

.spawn-toggle-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.spawn-feed-channel {
  border-left: 3px solid var(--channel-accent, var(--sheet-accent));
  background: linear-gradient(90deg, color-mix(in srgb, var(--channel-accent, var(--sheet-accent)) 10%, transparent), rgba(255, 255, 255, 0.02));
}

.privacy-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--sheet-accent) 45%, transparent);
  background: color-mix(in srgb, var(--sheet-accent) 8%, rgba(255, 255, 255, 0.03));
}

.privacy-card:has(input:checked) .privacy-card__check {
  border-color: var(--sheet-accent);
  background: var(--sheet-accent);
}

/* LFG filter — drop graffiti */
.lfg-filter-scrim .lfg-filter-sheet {
  padding: 0 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: transparent;
  border: 0;
}

.lfg-filter-sheet__title {
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 4.5vw, 1.45rem);
  color: #fff;
  text-shadow: none;
}

.lfg-filter-sheet__foot {
  margin-top: 0;
  padding-top: var(--space-3);
}

/* LFG notifications layout */
.lfg-notifications-sheet {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.lfg-notifications-sheet > h3 {
  flex-shrink: 0;
}

.lfg-notifications-sheet > .btn-primary {
  width: calc(100% - var(--space-4) * 2);
  margin: 0 var(--space-4) var(--space-4);
}

.lfg-notifications-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  margin-bottom: var(--space-2);
}

/* World filter */
.world-filter-sheet {
  display: flex;
  flex-direction: column;
}

.world-filter-sheet__title {
  font-family: var(--font-body);
  color: #fff;
}

.world-filter-sheet > .btn-primary,
.world-filter-sheet > .btn-ghost {
  width: calc(100% - var(--space-4) * 2);
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

.world-filter-sheet > .btn-ghost {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.world-filter-online {
  padding: 12px 14px;
  margin: 0 var(--space-4) var(--space-4);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Hub modules */
.hub-module-sheet__title {
  font-family: var(--font-body);
  color: #fff;
}

.hub-module__stats li {
  text-align: center;
  padding: var(--space-3);
}

.hub-module__stats strong {
  color: var(--sheet-accent);
}

.hub-module__link:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Dock sheets */
.dock-friends-sheet .sheet__header,
.dock-notif-sheet .sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
}

.dock-friends-sheet .sheet__header h2,
.dock-notif-sheet .sheet__header h2 {
  font-size: clamp(1.25rem, 4.5vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dock-friends-sheet .sheet__close,
.dock-notif-sheet .sheet__close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  font-size: 22px;
  cursor: pointer;
}

.dock-friend-row,
.dock-notif-row {
  margin: 0 var(--space-4) 8px;
  padding: 12px 14px;
}

/* Join info */
.join-info-sheet {
  padding: 0 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

.join-info-sheet__head {
  padding: var(--space-3) var(--space-4) 0;
}

.join-info-sheet__num {
  background: linear-gradient(135deg, var(--sheet-accent), color-mix(in srgb, var(--sheet-accent) 60%, #fff));
  color: #041016;
}

.join-info-sheet__step {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Feed article */
.feed-article-sheet {
  display: flex;
  flex-direction: column;
}

.feed-article-sheet h2 {
  padding: 0 var(--space-4);
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
}

.feed-article-sheet > .btn-secondary {
  width: calc(100% - var(--space-4) * 2);
  margin: 0 var(--space-4) var(--space-4);
}

/* Desktop */
@media (min-width: 768px) {
  .modal-scrim:not(.lfg-detail-scrim):not(.onboarding-game-sheet) > .sheet,
  .modal-scrim > .spawn-sheet {
    max-width: 520px;
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-scrim.open > .sheet,
  .modal-scrim.open > .spawn-sheet,
  .lfg-detail-scrim.open .lfg-detail-sheet,
  .modal-scrim.spawn-scrim--username.open .spawn-sheet,
  .modal-scrim.spawn-scrim--notif.open .spawn-sheet,
  .modal-scrim.spawn-scrim--feed.open .spawn-sheet {
    animation: none;
  }
}