/*
  Lionare 2026. All rights reserved.
  Logo, brand, agents, mascots and other visual elements.
*/
/* Player login: agent mural (load only on login.html) */
.lm-login-agent-groups {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.9vh, 9px);
  width: 100%;
  margin: 0 auto;
  min-height: 0;
  max-height: min(77vh, calc(100svh - 6.75rem));
}

.lm-login-agent-group {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  padding: clamp(4px, 0.7vh, 7px) 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lm-login-agent-group.is-group-teal {
  --group-border: var(--lm-group-teal-border);
  --group-bg-a: var(--lm-group-teal-bg-a);
  --group-bg-b: var(--lm-group-teal-bg-b);
  --group-accent: var(--lm-group-teal-accent);
  --group-accent-soft: var(--lm-group-teal-accent-soft);
}

.lm-login-agent-group.is-group-gold {
  --group-border: rgba(206, 220, 0, 0.24);
  --group-bg-a: rgba(107, 117, 0, 0.16);
  --group-bg-b: rgba(0, 0, 0, 0.1);
  --group-accent: rgb(224, 232, 140);
  --group-accent-soft: rgba(206, 220, 0, 0.62);
}

.lm-login-agent-group.is-group-green {
  --group-border: var(--lm-group-green-border);
  --group-bg-a: var(--lm-group-green-bg-a);
  --group-bg-b: var(--lm-group-green-bg-b);
  --group-accent: var(--lm-group-green-accent);
  --group-accent-soft: var(--lm-group-green-accent-soft);
}

.lm-login-agent-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px 8px;
  margin: 0 0 clamp(3px, 0.55vh, 6px);
  padding: 0 4px;
  flex-shrink: 0;
  text-align: left;
  width: 100%;
}

.lm-login-agent-group-label {
  font-size: clamp(10px, 1.58cqw, 12px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--group-accent);
}

.lm-login-agent-group-sub {
  font-size: clamp(9px, 1.32cqw, 11px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--group-accent);
  opacity: 0.42;
}

.lm-login-agent-group.is-group-green .lm-login-agent-group-sub,
.lm-login-agent-group.is-group-teal .lm-login-agent-group-sub {
  opacity: 0.42;
}

.lm-login-agents {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(4px, 0.85cqw, 7px);
  width: 95.24%;
  min-height: 0;
  transform: scale(1.05);
  transform-origin: top left;
}

.lm-login-agents[hidden],
.lm-login-agent-groups[hidden] {
  display: none !important;
}

.lm-login-agent {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  border-radius: clamp(10px, 1.53cqw, 14px);
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.14));
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--card-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  animation: lm-login-fade-in 0.45s ease both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.lm-login-agent.is-sector-teal {
  --card-a: rgba(24, 175, 205, 0.24);
  --card-b: rgba(92, 232, 255, 0.18);
  --card-border: rgba(92, 232, 255, 0.34);
  --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  --card-a-peak: rgba(48, 210, 235, 0.52);
  --card-b-peak: rgba(144, 255, 252, 0.44);
  --card-border-peak: rgba(176, 255, 252, 0.5);
  --card-shadow-peak: 0 9px 24px rgba(0, 0, 0, 0.14), 0 0 12px rgba(92, 232, 255, 0.34);
  --card-a-settled: rgba(48, 210, 235, 0.66);
  --card-b-settled: rgba(144, 255, 252, 0.58);
  --card-border-settled: rgba(176, 255, 252, 0.48);
  --card-shadow-settled: 0 10px 28px rgba(0, 0, 0, 0.14), 0 0 12px rgba(92, 232, 255, 0.2);
  --sweep-a: rgba(92, 232, 255, 0.1);
  --sweep-b: rgba(176, 255, 252, 0.38);
  --photo-bg: linear-gradient(180deg, rgb(120 248 255), rgb(0 0 0));
}

.lm-login-agent.is-sector-gold {
  --card-a: rgba(107, 117, 0, 0.22);
  --card-b: rgba(206, 220, 0, 0.18);
  --card-border: rgba(206, 220, 0, 0.3);
  --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(206, 220, 0, 0.1);
  --card-a-peak: rgba(181, 193, 0, 0.52);
  --card-b-peak: rgba(206, 220, 0, 0.46);
  --card-border-peak: rgba(224, 232, 140, 0.5);
  --card-shadow-peak: 0 9px 24px rgba(0, 0, 0, 0.14), 0 0 12px rgba(206, 220, 0, 0.32), inset 0 0 0 1px rgba(224, 232, 140, 0.18);
  --card-a-settled: rgba(181, 193, 0, 0.66);
  --card-b-settled: rgba(206, 220, 0, 0.6);
  --card-border-settled: rgba(224, 232, 140, 0.48);
  --card-shadow-settled: 0 10px 28px rgba(0, 0, 0, 0.14), 0 0 12px rgba(206, 220, 0, 0.18), inset 0 0 0 1px rgba(224, 232, 140, 0.16);
  --sweep-a: rgba(206, 220, 0, 0.1);
  --sweep-b: rgba(224, 232, 140, 0.38);
  --photo-bg: linear-gradient(180deg, rgb(206 220 0), rgb(0 0 0));
}

.lm-login-agent.is-sector-green {
  --card-a: rgba(18, 155, 72, 0.24);
  --card-b: rgba(62, 240, 138, 0.18);
  --card-border: rgba(62, 240, 138, 0.34);
  --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  --card-a-peak: rgba(40, 210, 110, 0.52);
  --card-b-peak: rgba(96, 255, 176, 0.44);
  --card-border-peak: rgba(120, 255, 190, 0.5);
  --card-shadow-peak: 0 9px 24px rgba(0, 0, 0, 0.14), 0 0 12px rgba(62, 240, 138, 0.34);
  --card-a-settled: rgba(40, 210, 110, 0.66);
  --card-b-settled: rgba(96, 255, 176, 0.58);
  --card-border-settled: rgba(120, 255, 190, 0.48);
  --card-shadow-settled: 0 10px 28px rgba(0, 0, 0, 0.14), 0 0 12px rgba(62, 240, 138, 0.2);
  --sweep-a: rgba(62, 240, 138, 0.1);
  --sweep-b: rgba(120, 255, 190, 0.38);
  --photo-bg: linear-gradient(180deg, rgb(80 248 152), rgb(0 0 0));
}

.lm-login-agent::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    108deg,
    transparent 34%,
    var(--sweep-a, rgba(255, 255, 255, 0.08)) 46%,
    var(--sweep-b, rgba(255, 255, 255, 0.16)) 54%,
    transparent 66%
  );
  transform: translateX(-130%) skewX(-12deg);
  opacity: 0;
  pointer-events: none;
}

.lm-login-mural.is-agents-shine .lm-login-agent {
  animation: lm-login-card-shine 0.72s ease both;
  animation-delay: calc(var(--i, 0) * 105ms);
}

.lm-login-mural.is-agents-shine .lm-login-agent-meta {
  animation: lm-login-meta-shine 0.72s ease both;
  animation-delay: calc(var(--i, 0) * 105ms);
}

.lm-login-mural.is-agents-shine .lm-login-agent::after {
  animation: lm-login-card-sweep 0.72s ease both;
  animation-delay: calc(var(--i, 0) * 105ms);
}

.lm-login-agent.is-card-settled {
  animation: none;
  border-color: var(--card-border-settled);
  box-shadow: var(--card-shadow-settled);
}

.lm-login-agent.is-card-settled .lm-login-agent-meta {
  animation: none;
  background: linear-gradient(145deg, var(--card-a-settled), var(--card-b-settled));
}

.lm-login-agent.is-card-settled:hover {
  transform: scale(1.03);
}

.lm-login-agent > * {
  position: relative;
  z-index: 1;
}

.lm-login-agent-photo {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.lm-login-agent-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--photo-bg, linear-gradient(180deg, rgb(20 190 165), rgb(0 0 0)));
  pointer-events: none;
}

.lm-login-agent-photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.lm-login-agent-photo img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.lm-login-agent:hover .lm-login-agent-photo img,
.lm-login-agent:hover .lm-login-agent-photo-fallback {
  z-index: 2;
  opacity: 1;
  filter: blur(2px);
  transform: scale(1.03);
}

.lm-login-agent-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  background: transparent;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.lm-login-agent-photo-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.lm-login-agent-summary {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(9px, 1.8cqw, 12px);
  font-weight: 600;
  line-height: 1.32;
  text-align: center;
  color: rgba(255, 255, 255, 0.94);
  text-wrap: balance;
  transition: color 0.22s ease;
}

.lm-login-agent:hover .lm-login-agent-photo-overlay {
  opacity: 1;
}

.lm-login-agent:hover .lm-login-agent-photo-overlay::before {
  opacity: 1;
}

.lm-login-agent:hover .lm-login-agent-summary {
  color: rgba(255, 255, 255, 0.94);
}

.lm-login-agent-name-on-photo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(5px, 0.9vh, 9px);
  z-index: 3;
  margin: 0;
  padding: 0 clamp(6px, 1cqw, 10px);
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(18px, 3.1cqw, 24px);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  color: #e7d181;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72);
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 1;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.lm-login-agent:hover .lm-login-agent-name-on-photo {
  opacity: 0;
}

.lm-login-agent:hover .lm-login-agent-photo::after {
  opacity: 0;
}

.lm-login-agent-photo-fallback {
  position: relative;
  z-index: 1;
  display: none;
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: 34px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  transition: opacity 0.22s ease, filter 0.22s ease;
}

.lm-login-agent-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  padding: clamp(5px, 0.85vh, 9px) clamp(5px, 0.85cqw, 9px);
  background: linear-gradient(145deg, var(--card-a, rgba(255, 255, 255, 0.07)), var(--card-b, rgba(255, 255, 255, 0.07)));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lm-login-agent-role {
  font-size: clamp(10px, 1.72cqw, 13px);
  font-weight: 700;
  color: #fff;
  line-height: 1.12;
  text-align: center;
  letter-spacing: 0.02em;
}

.lm-login-agent.is-sector-gold .lm-login-agent-role {
  color: #fff;
}

@keyframes lm-login-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes lm-login-card-shine {
  0% {
    border-color: var(--card-border);
    box-shadow: var(--card-shadow);
    transform: translateY(0);
  }
  45% {
    border-color: var(--card-border-peak);
    box-shadow: var(--card-shadow-peak);
    transform: translateY(-1px);
  }
  100% {
    border-color: var(--card-border);
    box-shadow: var(--card-shadow);
    transform: translateY(0);
  }
}

@keyframes lm-login-meta-shine {
  0% { background: linear-gradient(145deg, var(--card-a), var(--card-b)); }
  45% { background: linear-gradient(145deg, var(--card-a-peak), var(--card-b-peak)); }
  100% { background: linear-gradient(145deg, var(--card-a), var(--card-b)); }
}

@keyframes lm-login-card-sweep {
  0% { transform: translateX(-130%) skewX(-12deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(130%) skewX(-12deg); opacity: 0; }
}

@media (max-height: 860px) {
  .lm-login-agent-groups {
    max-height: min(80vh, calc(100svh - 6.5rem));
    gap: 4px;
  }

  .lm-login-agent-group {
    padding: 3px 0;
  }

  .lm-login-agent-group-head {
    margin-bottom: 3px;
  }

  .lm-login-agent-photo-overlay {
    padding: 6px 5px;
  }
}

@supports not (container-type: inline-size) {
  .lm-login-agent-groups {
    gap: clamp(6px, 0.8vh, 10px);
    max-height: min(77vh, calc(100svh - 6.75rem));
  }

  .lm-login-agent-group {
    padding: 4px 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .lm-login-agent-group-label {
    font-size: clamp(10px, 0.86vw, 12px);
  }

  .lm-login-agent-group-sub {
    font-size: clamp(9px, 0.72vw, 11px);
    opacity: 0.42;
  }

  .lm-login-agent-group.is-group-green .lm-login-agent-group-sub,
  .lm-login-agent-group.is-group-teal .lm-login-agent-group-sub {
    opacity: 0.42;
  }

  .lm-login-agents {
    gap: clamp(5px, 0.7vw, 8px);
    width: 95.24%;
    transform: scale(1.05);
    transform-origin: top left;
  }

  .lm-login-agent {
    border-radius: clamp(10px, 1vw, 14px);
  }

  .lm-login-agent-role {
    font-size: clamp(10px, 0.88vw, 13px);
  }

  .lm-login-agent-name-on-photo {
    font-size: clamp(18px, 1.55vw, 24px);
  }

  .lm-login-agent-summary {
    font-size: clamp(9px, 0.8vw, 12px);
  }
}