.mtg-lands{
    font-family: "Goudy";
}
.mtg-lands__top {
    display: flex;
    gap: 1em;
    flex-direction: row;
    padding-bottom: 2rem;
}

.mtg-lands__top-deck {
    display: flex;
    gap: 1em;
    flex-direction: row;
    padding-bottom: 2rem;
}

.mtg-lands__top-textarea {
    width: 20em;
    height: 200px;
    font-family: inherit;
    font-size: 1rem;
}

.mtg-lands__top-button {
    font-family: inherit;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
/* Deck container: 4-column responsive flex grid */
.mtg-lands__deck {
    min-width: 540px;
    column-gap: 1rem;
    padding-bottom: 1rem;
}

@media (min-width:1920px){
    .mtg-lands__deck {
        column-count: 4;
    }
}

@media (max-width: 1919px) and (min-width:1440px){
    .mtg-lands__deck {
        column-count: 3;
    }
}

@media (max-width: 1439px) and (min-width:960px){
    .mtg-lands__deck {
        column-count: 2;
    }
}

@media (max-width: 959px) and (min-width:540px){
    .mtg-lands__deck {
        column-count: 1;
    }
}

.mtg-lands__category {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  background: #eeeeee; /* example */
  padding: 1rem;
  margin-bottom: 1rem;
  break-inside: avoid; /* prevents item from splitting */
  border-radius: 6px;
}

@media (max-width: 767px){
    .mtg-lands__category {
        max-width: 400px;
    }
}

/* Category title */
.mtg-lands__category-title {
    margin: 0 0 0.8rem;
    font-weight: bold;
    font-size: 1.1rem;
}

/* Card list */
.mtg-lands__card-list {
    font-size: 1.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mtg-lands__card-item {
    display: flex;
    gap: 0.2em;
    text-align: left;
    position: relative;
    padding: 0.4rem 0;
    border-bottom: 1px solid #e2e2e2;
    cursor: help;
}

.mtg-lands__tooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    background: #333;
    color: #fff;
    padding: 0.6rem;
    border-radius: 4px;
    font-size: 0.85rem;
    width: 250px;
    z-index: 10;
    transition: opacity 0.2s ease;
}

.mtg-lands__manabase-tooltip {
    text-align: left;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    background: #333;
    color: #fff;
    padding: 0.6rem;
    border-radius: 4px;
    font-size: 0.85rem;
    width: 250px;
    z-index: 10;
    transition: opacity 0.2s ease;
}

.mtg-lands__card-item:hover .mtg-lands__tooltip {
    opacity: 1;
    visibility: visible;
}

.mtg-lands__manabase-item:hover .mtg-lands__manabase-tooltip {
    opacity: 1;
    visibility: visible;
}

.mtg-lands__card-item:last-child {
    border-bottom: none;
}

/* Make all mana symbols inherit baseline */
.mtg-mana {
    font-family: 'Mana';
    display: inline-block;
    background-color: #beb9b2;
    border-radius: 1em;
    color: #111;
    font-size: .95em;
    width: 1em;
    height: 1em;
    text-align: center;
    padding: 0.2em;
}

.mtg-mana + .mtg-mana {
    margin-left: 0.1em;
}

.mtg-mana + .mana-hybrid {
    margin-left: 0.1em;
}

.mana-hybrid + .mana-hybrid {
    margin-left: 0.1em;
}

.mtg-lands__mana-cost {
    text-wrap: nowrap;
    font-size: 0.7em;
    margin-left: auto;
}

/* Colored symbols */
.mtg-mana[class*="G"] { background-color: rgb(196, 211, 202); }
.mtg-mana[class*="U"] { background-color: rgb(179, 206, 234); }
.mtg-mana[class*="R"] { background-color: rgb(235, 159, 130); }
.mtg-mana[class*="B"] { background-color: rgb(166, 159, 157); }
.mtg-mana[class*="W"] { background-color: rgb(248, 231, 185); }

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, rgba(0,0,0,0.85), rgba(0,0,0,0.95));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 9999;
}

.loading-overlay.show {
  visibility: visible;
  opacity: 1;
}

.mana-loader {
  display: flex;
  gap: 1rem;
  animation: rotate 2.5s linear infinite;
}

.mana-symbol {
  font-size: 2.5rem;
  animation: pulse 1.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px white);
}

/* Rotation animation */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Pulse glow */
@keyframes pulse {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(1.2); opacity: 1; }
}
.mana-hybrid {
    background-color: #beb9b2;
    position: relative;
    width: 1.35em;
    height: 1.35em;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    top: 3px;
}

.mana-half {
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: 'Mana', sans-serif; /* your mana font */
  font-size: 0.55em;
  align-items: center;
  color: black;
}

/* Left diagonal half */
.mana-left {
  clip-path: polygon(0 0, 100% 0, 0 100%);
  display: flex;
  justify-content: flex-start;
}

/* Right diagonal half */
.mana-right {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  display: flex;
  justify-content: flex-end;
}

.mana-half[class*="G"] { background-color: rgb(196, 211, 202); }
.mana-half[class*="U"] { background-color: rgb(179, 206, 234); }
.mana-half[class*="R"] { background-color: rgb(235, 159, 130); }
.mana-half[class*="B"] { background-color: rgb(166, 159, 157); }
.mana-half[class*="W"] { background-color: rgb(248, 231, 185); }

.mana-symbol--left {
    position: absolute;
  top: 1px;
  left: 3px;
}


.mana-symbol--right {
    position: absolute;
  top: 7px;
  left: 8px;

}