/* Original LexiAtlas rarity treatments. Deliberately independent of card geometry. */
:root {
  --rarity-n-rgb: 220, 229, 240;
  --rarity-r-rgb: 80, 159, 255;
  --rarity-sr-rgb: 173, 115, 255;
  --rarity-ssr-rgb: 244, 191, 70;
}

.word-card:not(.card-locked) {
  --foil-x: 50%;
  --foil-y: 35%;
  --frame-ink: #9ba8b6;
  --frame-light: #ffffff;
  --frame-paper: #fafbfd;
  --rarity-rgb: var(--rarity-n-rgb);
  isolation: isolate;
  border-color: var(--frame-ink);
  background: linear-gradient(145deg, #ffffff 0%, var(--frame-paper) 57%, #fffdf7 100%);
  box-shadow: 0 4px 13px #25303a0a, inset 0 0 0 1px #ffffffed;
}
.word-card.n {
  --frame-ink: #b2bcc6;
  --frame-light: #fff;
  --frame-paper: #f6f8fa;
  --rarity-rgb: var(--rarity-n-rgb);
}
.word-card.r {
  --frame-ink: #74a0c8;
  --frame-light: #dcedff;
  --frame-paper: #eff6fb;
  --rarity-rgb: var(--rarity-r-rgb);
}
.word-card.sr {
  --frame-ink: #a482c4;
  --frame-light: #f1e2ff;
  --frame-paper: #f7f0fd;
  --rarity-rgb: var(--rarity-sr-rgb);
}
.word-card.ssr {
  --frame-ink: #b18a35;
  --frame-light: #ffefbb;
  --frame-paper: #fff4d8;
  --rarity-rgb: var(--rarity-ssr-rgb);
  box-shadow: 0 5px 17px #74521c13, inset 0 0 0 1px #fff9e6;
}

.word-card .card-volume > .card-frame,
.word-card .card-volume > .card-foil,
.word-card .frame-corner,
.word-card .frame-crest {
  pointer-events: none;
}
.word-card .card-volume > .card-frame {
  position: absolute;
  inset: 2px;
  border: 1px solid var(--frame-light);
  border-radius: 10px;
  z-index: 4;
}
.word-card .card-volume > .card-frame::before,
.word-card .card-volume > .card-frame::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}
.word-card .card-volume > .card-frame::before {
  inset: 1px;
  border: 1px solid var(--frame-ink);
  opacity: .4;
}
.word-card .card-volume > .card-frame::after {
  inset: -2px;
  border: 1px solid #ffffff88;
  background:
    linear-gradient(105deg, transparent 15%, #fff9 45%, transparent 68%) top / 100% 1px no-repeat,
    linear-gradient(105deg, transparent 20%, #fff8 65%, transparent) bottom / 100% 1px no-repeat;
}
.word-card.n .card-volume > .card-frame::before { opacity: .26; }
.word-card.r .card-volume > .card-frame::before { inset: 2px; opacity: .65; }
.word-card.sr .card-volume > .card-frame::before { inset: 2px; opacity: .76; }
.word-card.ssr .card-volume > .card-frame::before {
  inset: 2px;
  border-color: #bd974e;
  box-shadow: inset 0 0 0 1px #fff6d1, 0 0 0 1px #e7c67d66;
  opacity: .92;
}
.word-card:not(.card-locked) .card-art {
  box-shadow: 0 0 0 1px #ffffffc2;
}
.word-card.r .card-art { box-shadow: 0 0 0 1px #8bb9df70; }
.word-card.sr .card-art { box-shadow: 0 0 0 1px #bc9fd77a; }
.word-card.ssr .card-art { box-shadow: 0 0 0 1px #bd974e8c; }
.word-card:not(.card-locked) .card-body {
  position: relative;
  z-index: 3;
}
.word-card:not(.card-locked) .card-bottom { border-top-color: #babda32b; }
.word-card.n .card-stars { color: #8998a8; }
.word-card.r .card-stars { color: #578cbb; }
.word-card.sr .card-stars { color: #9467b7; }
.word-card.ssr .card-stars { color: #af832a; }
.word-card .card-topline { z-index: 3; }
.word-card .mastered-stamp { z-index: 5; }

/* The outer L is shared. Additional facets and fine scrollwork mark higher tiers. */
.frame-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  color: var(--frame-ink);
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  border-top-left-radius: 6px;
  opacity: .8;
}
.frame-corner.tl { left: 0; top: 0; }
.frame-corner.tr { right: 0; top: 0; transform: rotate(90deg); }
.frame-corner.br { right: 0; bottom: 0; transform: rotate(180deg); }
.frame-corner.bl { left: 0; bottom: 0; transform: rotate(270deg); }
.word-card.n .frame-corner { width: 10px; height: 10px; opacity: .56; }
.word-card.r .frame-corner::before {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  left: 3px;
  top: 3px;
  border-left: 1px solid #70a0cc;
  border-top: 1px solid #70a0cc;
  border-top-left-radius: 3px;
}
.word-card.r .frame-corner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e9f5ff;
  box-shadow: 0 0 0 1px #6e9fc8;
}
.word-card.sr .frame-corner { width: 23px; height: 23px; opacity: 1; }
.word-card.sr .frame-corner::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-top: 1px solid #ba94d5;
  border-left: 1px solid #ba94d5;
  border-radius: 7px 0 0;
}
.word-card.sr .frame-corner::after {
  content: '';
  position: absolute;
  left: 1px;
  top: 1px;
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, #fff2ff, #cca6ee 48%, #9660bb 49%, #e6c8ff 100%);
  border: 1px solid #9266b1;
  box-shadow: 0 0 0 1px #f9efff;
  transform: rotate(45deg);
}
.word-card.ssr .frame-corner {
  width: 32px;
  height: 32px;
  opacity: 1;
  border-color: #b58c34;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M3 29V10Q3 3 10 3H29M6 24V12Q6 6 12 6H24' stroke='%23bb9345' stroke-width='.7'/%3E%3Cpath d='M10 18C5 19 6 12 10 10C12 6 19 5 18 10C18 13 13 12 14 9M10 10L5 5M10 10Q17 16 21 10M10 10Q16 17 10 21' stroke='%23be9646' stroke-width='.8'/%3E%3Cpath d='M6 6L9 3L12 6L9 9Z' fill='%23f9dfa0' stroke='%23b68c38' stroke-width='.7'/%3E%3Ccircle cx='25' cy='3' r='1' fill='%23e8c06a'/%3E%3Ccircle cx='3' cy='25' r='1' fill='%23e8c06a'/%3E%3C/svg%3E") center / contain no-repeat;
}
.word-card.ssr .frame-corner::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  left: 6px;
  top: 5px;
  background: #fffcdf;
  box-shadow: 0 0 4px #ffe6a3;
}
.frame-crest { display: none; }
.word-card.sr .frame-crest,
.word-card.ssr .frame-crest {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 20px;
  height: 9px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f3dbff 5%, #be91dd 45%, #8f5cac 50%, #dfc3f4 95%);
  clip-path: polygon(0 0, 35% 0, 50% 25%, 65% 0, 100% 0, 50% 100%);
}
.word-card.ssr .frame-crest {
  top: -1px;
  width: 32px;
  height: 12px;
  background: linear-gradient(125deg, #8b6622, #f6dea0 25%, #fff7d4 40%, #b88c30 55%, #e8c372 78%, #a87924);
  clip-path: polygon(0 12%, 22% 12%, 29% 40%, 38% 12%, 50% 0, 62% 12%, 71% 40%, 78% 12%, 100% 12%, 72% 57%, 50% 100%, 28% 57%);
}

/* Light stays over the illustration. Body copy and progress always sit above it. */
.word-card .card-volume > .card-foil {
  position: absolute;
  inset: 7px 7px 36%;
  border-radius: 7px;
  z-index: 2;
  opacity: 0;
  background:
    radial-gradient(ellipse at var(--foil-x) var(--foil-y), rgba(255,255,255,.58), transparent 61%),
    linear-gradient(118deg, transparent 29%, rgba(var(--rarity-rgb),.15) 38%, #fff7 47%, rgba(var(--rarity-rgb),.27) 55%, transparent 64%);
  background-size: 100% 100%, 240% 100%;
  background-position: center, var(--foil-x) center;
  mix-blend-mode: screen;
  transition: opacity .28s ease;
}
.word-card.sr .card-volume > .card-foil,
.word-card.ssr .card-volume > .card-foil {
  background:
    radial-gradient(ellipse at var(--foil-x) var(--foil-y), #fff8, transparent 59%),
    repeating-linear-gradient(118deg, transparent 0 23%, rgba(var(--rarity-rgb),.14) 27%, #fff9 31%, rgba(var(--rarity-rgb),.23) 35%, transparent 40% 62%);
  background-size: 100% 100%, 240% 100%;
  background-position: center, var(--foil-x) center;
}
@media (hover: hover) {
  .word-card.n:hover .card-volume > .card-foil { opacity: .17; }
  .word-card.r:hover .card-volume > .card-foil { opacity: .31; }
  .word-card.sr:hover .card-volume > .card-foil { opacity: .43; }
  .word-card.ssr:hover .card-volume > .card-foil { opacity: .54; }
  .word-card.r.clickable:hover { box-shadow: 0 8px 22px #345a8024, 0 0 0 1px #bbdcf666; }
  .word-card.sr.clickable:hover { box-shadow: 0 8px 24px #69458b22, 0 0 0 1px #d7baf280; }
  .word-card.ssr.clickable:hover { box-shadow: 0 8px 26px #89621b24, 0 0 0 1px #edcd8080; }
}
.word-card:focus-visible .card-volume > .card-foil { opacity: .25; }

/* Semantic labels preserve contrast even for the white N tier. */
.rarity.n { color: #536274; background: #f7fbffed; border: 1px solid #d6dfe9; box-shadow: inset 0 1px #fff; }
.rarity.r { color: #255d94; background: #e7f3ffed; border: 1px solid #a1c4e6; box-shadow: inset 0 1px #fff9; }
.rarity.sr { color: #72449a; background: #f3e7ffed; border: 1px solid #c8a7e3; box-shadow: inset 0 1px #fff9; }
.rarity.ssr { color: #795417; background: linear-gradient(125deg, #ffefbaed, #fff9d7f5, #f4d181ed); border: 1px solid #d0ad60; box-shadow: inset 0 1px #fffbdc; }

.intro-visual.n,
.intro-visual:has(.rarity.n) { --intro-rarity: #c7d1dc; }
.intro-visual.r,
.intro-visual:has(.rarity.r) { --intro-rarity: #85b6e5; }
.intro-visual.sr,
.intro-visual:has(.rarity.sr) { --intro-rarity: #ba92d9; }
.intro-visual.ssr,
.intro-visual:has(.rarity.ssr) { --intro-rarity: #d0a64f; }
.intro-visual::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid var(--intro-rarity, #d0d8c6);
  box-shadow: 0 0 0 1px #fff9, inset 0 0 0 2px #fff4;
  pointer-events: none;
  z-index: 2;
}
.intro-visual .rarity { z-index: 3; }
.intro-visual:has(.rarity.ssr)::after {
  border: 3px double #e1b954;
  box-shadow: 0 0 0 1px #fff4, inset 0 0 0 1px #fff8;
}

@media (max-width: 540px) {
  .word-card.ssr .frame-corner { width: 26px; height: 26px; }
  .word-card.ssr .frame-crest { width: 26px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .word-card .card-volume > .card-foil { transition: none; }
  .word-card .card-volume > .card-frame,
  .word-card .frame-corner,
  .word-card .frame-crest { animation: none; }
}