/* KINGDOMS — The Last Soul Season 02 */

.kingdoms { background: #12100e; }

.kingdom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.kingdom {
  min-height: 460px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 25px;
  overflow: hidden;
  border: 1px solid #ffffff14;
  background-position: center;
  background-size: cover;
  transition: background-size .4s;
}

.kingdom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0007, #0000 40%, #000c);
}

.kingdom > * { position: relative; }

.kingdom span { font-size: 10px; letter-spacing: .16em; }

.kingdom h3 { font: 600 clamp(17px, 2vw, 28px) Cinzel, serif; letter-spacing: -.03em; }

.blood {
  background-image: linear-gradient(145deg, #5b1b20, #180b0b), url("../assets/kingdom-bloodborne.jpg");
  background-blend-mode: multiply, normal;
}

.frost {
  background-image: linear-gradient(145deg, #8ca5ac, #15242b), url("../assets/kingdom-frostveil.jpg");
  background-blend-mode: multiply, normal;
}

.eclipse {
  background-image: linear-gradient(145deg, #3b2855, #0d0917), url("../assets/kingdom-eclipse.jpg");
  background-blend-mode: multiply, normal;
}

.ashen {
  background-image: linear-gradient(145deg, #8e4a24, #23100a), url("../assets/kingdom-ashen.jpg");
  background-blend-mode: multiply, normal;
}

.kingdoms .fine { text-align: center; }

@media (max-width: 900px) {
.kingdom-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
.kingdom { min-height: 360px; }
}

@media (max-width: 650px) {
.kingdom-grid { gap: 9px; }
}

@media (max-width: 650px) {
.kingdom { min-height: 260px; padding: 15px; }
}

@media (max-width: 650px) {
.kingdom h3 { font-size: 15px; }
}

.kingdom-grid {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.kingdom {
    flex: 1;
    min-width: 0;
    min-height: 540px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background-position: center;
    background-size: cover;

    cursor: pointer;
    overflow: hidden;

    transition:
        flex 0.55s cubic-bezier(.22, 1, .36, 1),
        filter 0.35s ease,
        border-color 0.35s ease;
}

.kingdom-grid.has-active .kingdom {
    flex: 0.75;
    filter: brightness(0.65);
}

.kingdom-grid.has-active .kingdom.active {
    flex: 2.2;
    filter: brightness(1);
    border-color: var(--gold);
}

.kingdom-content {
    position: relative;
    z-index: 2;
}

.kingdom-extra {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;

    transition:
        max-height 0.45s ease,
        opacity 0.3s ease,
        visibility 0.3s;
}

.kingdom.active .kingdom-extra {
    max-height: 420px;
    opacity: 1;
    visibility: visible;
}

.kingdom-tagline {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 0.14em;
    margin: 12px 0;
}

.kingdom-lore {
    color: #ded7ce;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.kingdom-traits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.kingdom-traits h4 {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 0.15em;
}

.kingdom-traits p {
    font-size: 11px;
    color: #e0d8cc;
    line-height: 1.5;
    margin: 8px 0;
}

.kingdom-number {
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
.kingdom-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
.kingdom {
        min-height: 360px;
    }
}

@media (max-width: 900px) {
.kingdom-grid.has-active .kingdom, .kingdom-grid.has-active .kingdom.active {
        flex: initial;
    }
}

@media (max-width: 900px) {
.kingdom.active {
        grid-column: span 2;
        min-height: 480px;
    }
}

@media (max-width: 650px) {
.kingdom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
.kingdom {
        min-height: 280px;
    }
}

@media (max-width: 650px) {
.kingdom.active {
        grid-column: auto;
        min-height: 490px;
    }
}

@media (max-width: 650px) {
.kingdom-traits {
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
.kingdom, .kingdom-extra {
        transition: none;
    }
}

.blood {
    background-image:
        linear-gradient(to top, #090507 0%, transparent 80%),
        url("../assets/kingdom-bloodborne.png");
}

.frost {
    background-image:
        linear-gradient(to top, #070e13 0%, transparent 80%),
        url("../assets/kingdom-frostveil.png");
}

.eclipse {
    background-image:
        linear-gradient(to top, #0b0714 0%, transparent 80%),
        url("../assets/kingdom-eclipse.png");
}

.ashen {
    background-image:
        linear-gradient(to top, #160b06 0%, transparent 80%),
        url("../assets/kingdom-ashen.png");
}

.kingdom::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: rgba(0, 0, 0, 0);
    opacity: 0;

    transition: opacity 0.45s ease;
    pointer-events: none;
}

.kingdom:hover::before, .kingdom.active::before, .kingdom:focus-visible::before {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.65) 35%,
        rgba(0, 0, 0, 0.85) 70%,
        rgba(0, 0, 0, 0.95) 100%
    );

    opacity: 1;
}

.kingdom > * {
    position: relative;
    z-index: 1;
}

.kingdom-lore, .kingdom-traits p {
    color: #f0ece5;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.kingdom {
    transition:
        flex 0.55s cubic-bezier(.22, 1, .36, 1),
        filter 0.35s ease,
        border-color 0.35s ease;
}

.kingdom::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.25) 55%,
        rgba(0, 0, 0, 0.85) 100%
    );

    opacity: 1;
    pointer-events: none;
    transition: background 0.4s ease;
}

.kingdom.active::before, .kingdom:hover::before, .kingdom:focus-visible::before {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.65) 35%,
        rgba(0, 0, 0, 0.85) 70%,
        rgba(0, 0, 0, 0.95) 100%
    );
}