/*
 * Brick-red hero plus a clear watercolour palette for the A–Z collection.
 * The supporting cards stay colourful without competing with the main figure.
 */
.card-a{--card1:#D95B52;--card2:#B9463F;--ink:#B9463F}

.card-b{--card1:#C8DEE9;--card2:#ABC9D8;--ink:#335367}
.card-c{--card1:#C8E1D9;--card2:#A9CEC2;--ink:#32574E}
.card-d{--card1:#E2D3C6;--card2:#CBB8A8;--ink:#594537}
.card-e{--card1:#258AA3;--card2:#176F8A;--ink:#FFFFFF}
.card-f{--card1:#EBCFBA;--card2:#D7AE8E;--ink:#5C402A}
.card-g{--card1:#D1E0C9;--card2:#B3CCA8;--ink:#3F553B}
.card-h{--card1:#E6CBD5;--card2:#CFA9B8;--ink:#593B4A}
.card-i{--card1:#5068C1;--card2:#354AA0;--ink:#FFFFFF}
.card-j{--card1:#B65F79;--card2:#824258;--ink:#FFFFFF;--rare-accent:#D794A6}
.card-k{--card1:#8E7AA5;--card2:#665779;--ink:#FFFFFF;--rare-accent:#C2B4D1}
.card-l{--card1:#DCE0C5;--card2:#C1C99F;--ink:#495434}
.card-m{--card1:#DED0DE;--card2:#C4AEC4;--ink:#513F54}
.card-n{--card1:#CBD9E2;--card2:#ACBFCD;--ink:#374C5C}
.card-o{--card1:#D47720;--card2:#913C0C;--ink:#FFFFFF;--vowel-gold:#FFF0B8}
.card-p{--card1:#E5CCBC;--card2:#CEAA92;--ink:#5A3B2B}
.card-q{--card1:#BB6383;--card2:#88445E;--ink:#FFFFFF;--rare-accent:#DFA0B7}
.card-r{--card1:#E2C4BF;--card2:#C99F99;--ink:#523531}
.card-s{--card1:#EAD98D;--card2:#D6BE62;--ink:#594715}
.card-t{--card1:#C5DEDD;--card2:#A7C9C8;--ink:#325456}
.card-u{--card1:#25A2BC;--card2:#157F9D;--ink:#FFFFFF}
.card-v{--card1:#CDD3E5;--card2:#ADB6D1;--ink:#3D465C}
.card-w{--card1:#DFC2C2;--card2:#C69C9C;--ink:#4F3333}
.card-x{--card1:#151820;--card2:#030406;--ink:#E8C982;--rare-accent:#5CA7AF}
.card-y{--card1:#A88645;--card2:#755B2F;--ink:#FFFFFF;--rare-accent:#D5B871}
.card-z{--card1:#7B8796;--card2:#56606D;--ink:#FFFFFF;--rare-accent:#B9C1CB}

.letter-card{
  box-shadow:0 10px 18px rgba(72,63,51,.08);
}

.letter-card:hover{
  box-shadow:0 13px 23px rgba(72,63,51,.11);
}

.letter-card:not(.card-a),
.letter-card:not(.card-a) .letter,
.letter-card:not(.card-a) .card-title,
.letter-card:not(.card-a) .card-meta{
  color:var(--ink);
  text-shadow:none;
}

.letter-card:not(.card-a)::after{
  border-color:rgba(71,67,60,.16);
}

.letter-card:not(.card-a)::before{
  background:rgba(255,255,255,.24);
}

.letter-card.card-a::after{
  border-color:rgba(255,255,255,.32);
}

/* Vowels: crowned colour houses with a warm-gold, asymmetric archive frame. */
.letter-card.is-vowel{
  overflow:visible;
  border-radius:3px 24px 3px 3px;
  background:linear-gradient(145deg,var(--card1),var(--card2));
  box-shadow:
    0 14px 25px rgba(89,62,24,.20),
    inset 0 0 0 1px rgba(255,235,177,.12);
}

.letter-card.is-vowel.is-feature{
  border-radius:5px 36px 5px 5px;
}

.letter-card.is-vowel,
.letter-card.is-vowel .letter,
.letter-card.is-vowel .card-title,
.letter-card.is-vowel .card-meta{
  color:var(--vowel-gold,#FFE39A);
  text-shadow:none;
}

.letter-card.is-vowel::after{
  inset:6px;
  border:1.5px dashed var(--vowel-gold,rgba(232,201,130,.92));
  border-radius:3px 18px 3px 3px;
}

.letter-card.is-vowel.is-feature::after{
  inset:8px;
  border-radius:4px 28px 4px 4px;
}

.letter-card.is-vowel::before{
  inset:auto 0 0 0;
  width:auto;
  height:50%;
  border-radius:50% 50% 0 0;
  background:rgba(255,255,255,.10);
  opacity:1;
}

.letter-card.is-vowel .vowel-crown{
  position:absolute;
  top:-15px;
  right:auto;
  left:-8px;
  z-index:5;
  width:35px;
  height:25px;
  background:linear-gradient(135deg,#FFF7B8 0%,#FFD954 35%,#C98A12 72%,#FFE36F 100%);
  clip-path:polygon(3% 23%,27% 57%,50% 1%,73% 57%,97% 23%,86% 100%,14% 100%);
  transform:rotate(-8deg);
  transform-origin:center;
  filter:drop-shadow(0 5px 5px rgba(75,48,4,.42)) drop-shadow(0 0 3px rgba(255,231,131,.42));
  pointer-events:none;
}

.letter-card.is-vowel .vowel-crown::before{
  content:"";
  position:absolute;
  right:5px;
  bottom:3px;
  left:5px;
  height:3px;
  border-radius:999px;
  background:rgba(112,68,4,.35);
}

.letter-card.is-vowel .vowel-crown::after{
  content:"";
  position:absolute;
  top:7px;
  left:5px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#FFF7C4;
  box-shadow:8px -4px 0 #FFF7C4,16px 0 0 #FFF7C4;
}

.letter-card.is-vowel.card-a .vowel-crown{
  top:-19px;
  right:auto;
  left:16px;
  width:42px;
  height:29px;
}

/* Sparse letters: dark archive cards, warm-metal lines and left-aligned evidence. */
.letter-card.is-rare{
  align-items:flex-start;
  justify-content:flex-end;
  text-align:left;
  padding:10px 8px 9px 10px;
  border-radius:8px 24px 8px 8px;
  background:
    repeating-linear-gradient(0deg,transparent 0 13px,rgba(232,201,130,.045) 13px 14px),
    linear-gradient(130deg,transparent 0 62%,rgba(232,201,130,.08) 62.5% 63.2%,transparent 63.7%),
    linear-gradient(145deg,var(--card1),var(--card2));
  box-shadow:
    0 14px 25px rgba(31,25,24,.22),
    inset 0 0 0 1px rgba(232,201,130,.08);
}

.letter-card.is-rare::after{
  inset:6px;
  border-radius:5px 17px 5px 5px;
  border-style:dashed;
  border-color:rgba(232,201,130,.48);
}

.letter-card.is-rare::before{
  inset:0 auto 0 0;
  width:4px;
  height:auto;
  border-radius:0;
  background:var(--rare-accent);
  opacity:.86;
}

.letter-card.is-rare .rare-mark{
  position:absolute;
  top:10px;
  right:9px;
  z-index:3;
  padding:2px 4px;
  border:1px solid rgba(232,201,130,.42);
  border-radius:3px;
  color:#E8C982;
  font-size:5.5px;
  font-weight:950;
  line-height:1;
  letter-spacing:.11em;
  opacity:.9;
}

.letter-card.is-rare .letter,
.letter-card.is-rare .card-title,
.letter-card.is-rare .card-meta{
  text-align:left;
  text-shadow:none;
}

.letter-card.is-rare .letter{
  margin:0 0 4px;
  color:#F4E6CA;
}

.letter-card.is-rare .card-title{
  color:#E8C982;
}

.letter-card.is-rare .card-meta{
  color:#B9A071;
  opacity:1;
}

.letter-card.is-rare:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 30px rgba(31,25,24,.27);
}

/* X remains the darkest archive card, but keeps the same metal code as its family. */
.letter-card.is-rare.card-x{
  background:
    repeating-linear-gradient(0deg,transparent 0 13px,rgba(232,201,130,.04) 13px 14px),
    linear-gradient(135deg,transparent 0 43%,rgba(72,165,174,.15) 43.5% 44.5%,transparent 45%),
    radial-gradient(circle at 55% 120%,rgba(45,129,138,.23),transparent 48%),
    linear-gradient(145deg,#181C25 0%,#080A0E 54%,#020304 100%);
  box-shadow:
    0 14px 26px rgba(4,6,9,.36),
    inset 0 0 0 1px rgba(232,201,130,.08);
}

.letter-card.is-rare.card-x::after{
  border-style:dashed;
  border-color:rgba(232,201,130,.48);
}

.letter-card.is-rare.card-x .letter{
  color:#F2E2C3;
  text-shadow:0 0 18px rgba(83,173,181,.28);
}

.letter-card.is-rare.card-x .rare-mark{
  color:#E8C982;
  border-color:rgba(232,201,130,.42);
}

/* J K Q X Y Z: the former vowel frame — centred, quiet and clear. */
.letter-card.is-rare{
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8px 6px 7px;
  border-radius:16px;
  background:linear-gradient(145deg,var(--card1),var(--card2));
  box-shadow:
    0 14px 25px rgba(31,35,45,.22),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.letter-card.is-rare::after{
  inset:7px;
  border:1.4px solid rgba(255,255,255,.88);
  border-radius:11px;
}

.letter-card.is-rare::before{
  inset:auto 0 0 0;
  width:auto;
  height:50%;
  border-radius:50% 50% 0 0;
  background:rgba(255,255,255,.10);
  opacity:1;
}

.letter-card.is-rare .rare-mark{
  top:7px;
  right:7px;
  padding:2px 4px;
  border:1px solid rgba(255,255,255,.52);
  border-radius:4px;
  color:#FFFFFF;
  opacity:.78;
}

.letter-card.is-rare .letter,
.letter-card.is-rare .card-title,
.letter-card.is-rare .card-meta{
  color:#FFFFFF;
  text-align:center;
}

.letter-card.is-rare .letter{
  margin:0 0 5px;
  text-shadow:0 2px 12px rgba(0,0,0,.12);
}

.letter-card.is-rare .card-meta{
  opacity:.82;
}

.letter-card.is-rare.card-x{
  background:
    linear-gradient(135deg,transparent 0 43%,rgba(72,165,174,.15) 43.5% 44.5%,transparent 45%),
    radial-gradient(circle at 55% 120%,rgba(45,129,138,.23),transparent 48%),
    linear-gradient(145deg,#181C25 0%,#080A0E 54%,#020304 100%);
}

.letter-card.is-rare.card-x::after{
  border-style:solid;
  border-color:rgba(255,255,255,.82);
}

.letter-card.is-rare.card-x .letter,
.letter-card.is-rare.card-x .rare-mark{
  color:#FFFFFF;
}

.letter-card.is-rare.card-x .rare-mark{
  border-color:rgba(255,255,255,.48);
}

@media(max-width:420px){
  .letter-card.is-vowel .vowel-crown{
    top:-13px;
    right:auto;
    left:-7px;
    width:30px;
    height:22px;
  }
  .letter-card.is-vowel.card-a .vowel-crown{
    top:-17px;
    right:auto;
    left:14px;
    width:38px;
    height:26px;
  }
  .letter-card.is-vowel{
    border-radius:3px 20px 3px 3px;
  }
  .letter-card.is-vowel.is-feature{
    border-radius:5px 29px 5px 5px;
  }
  .letter-card.is-vowel::after{
    inset:5px;
    border-radius:3px 15px 3px 3px;
  }
  .letter-card.is-vowel.is-feature::after{
    inset:7px;
    border-radius:4px 23px 4px 4px;
  }
  .letter-card.is-rare{
    padding:8px 6px 7px 8px;
    border-radius:6px 19px 6px 6px;
  }
  .letter-card.is-rare::after{
    inset:5px;
    border-radius:4px 14px 4px 4px;
  }
  .letter-card.is-rare .rare-mark{
    top:5px;
    right:6px;
    padding:1px 3px;
    font-size:4px;
  }
  .letter-card.is-rare .letter{
    margin:0 0 2px;
  }
  .letter-card.is-rare{
    padding:7px 4px 6px;
    border-radius:14px;
  }
  .letter-card.is-rare::after{
    inset:6px;
    border-radius:9px;
  }
  .letter-card.is-rare .rare-mark{
    top:5px;
    right:5px;
  }
  .letter-card.is-rare .letter{
    margin:0 0 4px;
  }
}