@font-face {
font-family: Cinzel;
src: url("fonts/Cinzel.ttf") format("truetype");
font-weight: 400 900;
font-display: swap;
}
@font-face {
font-family: Lora;
src: url("fonts/Lora.ttf") format("truetype");
font-weight: 400 700;
font-display: swap;
}

:root {
--ink: #140e18;
--ivory: #f3ecdf;
--ruby: #9d2438;
--ruby-hot: #d85a62;
--violet: #4a3560;
--violet-hot: #8d6cb8;
--metal: #c9beae;
--muted: #b7abbe;
}

* { box-sizing: border-box; }
html { background: var(--ink); overflow-x: clip; }
body {
margin: 0;
color: var(--ivory);
background:
radial-gradient(1200px 500px at 50% -10%, rgba(157, 36, 56, 0.28), transparent 60%),
var(--ink);
font-family: Lora, Palatino, serif;
overflow-x: clip;
}
button, .banner, .platforms, .section-title, .views a, footer p { font-family: Cinzel, Palatino, serif; }
img { max-width: 100%; }

.hero {
position: relative;
width: 100%;
min-height: min(78vh, 680px);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.backdrop {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
}
.hero-shade {
position: absolute;
inset: 0;
background:
linear-gradient(to top, var(--ink) 0%, rgba(20, 14, 24, 0.2) 42%, rgba(20, 14, 24, 0.35) 100%);
}
.hero-copy {
position: relative;
z-index: 1;
box-sizing: border-box;
width: 100%;
max-width: 920px;
min-width: 0;
margin: 48px 0 64px;
padding: 0 20px;
text-align: center;
}
.logo {
display: block;
width: 100%;
max-width: 760px;
height: auto;
margin: 0 auto;
filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}
.banner {
display: inline-block;
max-width: 100%;
margin: 28px 0 0;
padding: 14px 28px 12px;
color: var(--ivory);
letter-spacing: 0.22em;
text-transform: uppercase;
font-size: clamp(1.15rem, 2.4vw, 1.8rem);
background:
linear-gradient(180deg, rgba(216, 90, 98, 0.55), rgba(157, 36, 56, 0.78));
border: 1px solid var(--metal);
box-shadow: 0 0 28px rgba(157, 36, 56, 0.65), inset 0 1px 0 rgba(255, 230, 210, 0.45);
clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.platforms {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 14px 28px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.platforms li {
display: flex;
align-items: center;
gap: 10px;
color: var(--ivory);
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 0.95rem;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.platform-logo {
width: 28px;
height: 28px;
flex: none;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.65));
}
.tagline {
box-sizing: border-box;
width: 100%;
margin: 22px auto 0;
max-width: 34rem;
color: var(--ivory);
font-size: 1.15rem;
line-height: 1.45;
overflow-wrap: break-word;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.gems {
display: flex;
justify-content: center;
gap: 14px;
margin: 26px 0 0;
padding: 0;
list-style: none;
}
.gems li {
width: 14px;
height: 14px;
transform: rotate(45deg);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}
.fire { background: #e25b45; }
.water { background: #3f8ec9; }
.wind { background: #7dba6a; }
.earth { background: #c6a15a; }
.dark { background: #7b5cab; }

.views {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
width: min(1100px, calc(100% - 32px));
margin: 0 auto 28px;
}
.views a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 10px 16px 8px;
color: var(--ivory);
letter-spacing: 0.14em;
text-decoration: none;
text-transform: uppercase;
font-size: 0.9rem;
background: rgba(74, 53, 96, 0.55);
border: 1px solid var(--metal);
clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.views a:hover { background: rgba(74, 53, 96, 0.9); }
.views a[aria-current="page"] {
background: linear-gradient(180deg, rgba(216, 90, 98, 0.55), rgba(157, 36, 56, 0.78));
box-shadow: inset 0 1px 0 rgba(255, 230, 210, 0.45);
}
.views a:focus-visible, .card:focus-visible {
clip-path: none;
outline: 2px solid var(--violet-hot);
outline-offset: 2px;
}
.sub-title {
margin: 24px 0 14px;
text-align: center;
font-family: Cinzel, Palatino, serif;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--metal);
}
.notice { text-align: center; color: var(--muted); }
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
}
.cards:has(.spells, .gear, .monsters) { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
.card {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 0;
margin: 0;
padding: 10px 8px 12px;
color: inherit;
text-align: center;
cursor: pointer;
background: rgba(74, 53, 96, 0.45);
border: 1px solid var(--metal);
clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.card:hover { background: rgba(74, 53, 96, 0.8); }
.card .card-art {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: contain;
}
.card .name {
font-size: 0.95rem;
letter-spacing: 0.04em;
overflow-wrap: anywhere;
}
.card .status {
font-family: Lora, Palatino, serif;
font-size: 0.8rem;
color: var(--muted);
overflow-wrap: anywhere;
}
.golden { filter: drop-shadow(0 0 8px rgba(240, 190, 80, 0.75)); }
.card .card-art { margin-bottom: 2px; }
.card.spells .card-art, .card.gear .card-art, .card.monsters .card-art { width: min(140px, 100%); }
.card .summary {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
width: 100%;
margin-top: 4px;
padding-top: 9px;
border-top: 1px solid rgba(201, 190, 174, 0.3);
}
.card .cost, .card .tags, .card .stats, .card .affinities { justify-content: center; }
.tier-bronze, .card .status.tier-bronze, .detail-subtitle.tier-bronze { color: #d9a477; }
.tier-silver, .card .status.tier-silver, .detail-subtitle.tier-silver { color: #d4dbe4; }
.tier-legendary, .card .status.tier-legendary, .detail-subtitle.tier-legendary { color: #f0c860; }

/* Jewel costs, effect tags and monster stats on cards and in the detail dialog. */
.cost {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
}
.jewel {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: Cinzel, Palatino, serif;
font-size: 1rem;
font-weight: 700;
line-height: 1;
}
.jewel .jewel-icon { width: 22px; height: 22px; }
.jewel-fire .jewel-count { color: #ff8a76; }
.jewel-water .jewel-count { color: #82c1f0; }
.jewel-wind .jewel-count { color: #a6dd8f; }
.jewel-earth .jewel-count { color: #e5c27c; }
.jewel-dark .jewel-count { color: #b99ae6; }
.jewel-blade .jewel-count { color: var(--metal); }
.jewel-icon { display: inline-block; flex: none; width: 18px; height: 18px; object-fit: contain; vertical-align: middle; }
.move-cost { color: var(--muted); font-size: 0.8rem; font-style: italic; }
.tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 0;
padding: 0;
list-style: none;
}
.tag {
--tag: 201, 190, 174;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px 2px;
border-radius: 999px;
font-size: 0.8rem;
line-height: 1.3;
color: rgb(var(--tag));
background: rgba(var(--tag), 0.14);
border: 1px solid rgba(var(--tag), 0.55);
font-family: Lora, Palatino, serif;
white-space: nowrap;
}
.tag .jewel-icon { width: 14px; height: 14px; }
.tags.compact .tag { font-size: 0.74rem; padding: 2px 7px 1px; }
.tag.damage { --tag: 255, 122, 108; }
.tag.burn { --tag: 255, 160, 84; }
.tag.pierce { --tag: 232, 140, 170; }
.tag.power { --tag: 240, 200, 96; }
.tag.heal { --tag: 130, 222, 140; }
.tag.poison { --tag: 196, 230, 92; }
.tag.shield { --tag: 120, 186, 255; }
.tag.defence { --tag: 190, 202, 216; }
.tag.hp { --tag: 255, 140, 160; }
.tag.mana { --tag: 110, 214, 214; }
.tag.drain { --tag: 186, 150, 240; }
.tag.move { --tag: 240, 216, 120; }
.tag.control { --tag: 196, 160, 255; }
.tag.gold { --tag: 240, 196, 80; }
.tag.board { --tag: 255, 176, 120; }
.tag.limit { --tag: 183, 171, 190; }
.stats {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.stat {
display: inline-flex;
font-family: Lora, Palatino, serif;
align-items: baseline;
gap: 4px;
font-size: 0.8rem;
color: var(--muted);
}
.stat-label { display: inline-flex; align-items: center; gap: 3px; }
.stat .jewel-icon { width: 16px; height: 16px; }
.stat-value { color: var(--ivory); font-family: Cinzel, Palatino, serif; font-weight: 700; font-size: 0.95rem; }
.stats.compact { gap: 4px 10px; }
.stats:not(.compact) { justify-content: center; gap: 8px; margin-top: 10px; }
.stats:not(.compact) .stat {
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 64px;
padding: 8px 10px 6px;
background: rgba(74, 53, 96, 0.45);
border: 1px solid rgba(201, 190, 174, 0.4);
border-radius: 6px;
}
.stats:not(.compact) .stat-value { font-size: 1.3rem; }
.affinities { display: flex; flex-wrap: wrap; gap: 6px; }
.structured .affinities { justify-content: center; margin-top: 10px; }
.affinity {
display: inline-flex;
font-family: Lora, Palatino, serif;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 9px;
border-radius: 999px;
font-size: 0.74rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.affinity.weak { color: #ffb0a2; background: rgba(255, 122, 108, 0.14); border: 1px solid rgba(255, 122, 108, 0.5); }
.affinity.resist { color: #c9d4e2; background: rgba(190, 202, 216, 0.12); border: 1px solid rgba(190, 202, 216, 0.45); }
.affinity .jewel-icon { width: 18px; height: 18px; }
.affinity-name { text-transform: none; letter-spacing: 0; font-size: 0.8rem; }

main {
width: min(1100px, calc(100% - 32px));
margin: 0 auto 48px;
}
.section-title {
margin: 8px 0 18px;
text-align: center;
font-size: 1.35rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.shot {
margin: 0;
padding: 0;
border: 1px solid var(--metal);
background: rgba(74, 53, 96, 0.45);
clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
display: block;
width: 100%;
cursor: pointer;
color: inherit;
}
.shot img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 8 / 5;
object-fit: contain;
background: var(--ink);
}
.shot:hover, .shot:focus-visible {
outline: 2px solid var(--violet-hot);
outline-offset: 3px;
box-shadow: 0 0 18px rgba(141, 108, 184, 0.7);
}
footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 16px 36px;
text-align: center;
}
footer img { width: 96px; height: auto; }
footer p {
margin: 0;
color: var(--muted);
letter-spacing: 0.08em;
font-size: 0.85rem;
}

#lightbox {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
gap: 12px;
width: min(1040px, calc(100vw - 24px));
max-height: calc(100vh - 24px);
padding: 12px;
border: 1px solid var(--metal);
color: var(--ivory);
background: rgba(20, 14, 24, 0.94);
box-shadow: 0 0 36px rgba(157, 36, 56, 0.45);
box-sizing: border-box;
}
#lightbox:not([open]) { display: none; }
#lightbox::backdrop { background: rgba(6, 4, 10, 0.82); }
#lightbox img {
grid-column: 1 / -1;
grid-row: 1;
display: block;
width: 100%;
max-height: calc(100vh - 120px);
object-fit: contain;
margin: 0 auto;
min-height: 0;
}
#lightbox button {
font-family: Cinzel, Palatino, serif;
color: var(--ivory);
background: rgba(74, 53, 96, 0.85);
border: 1px solid var(--metal);
letter-spacing: 0.08em;
text-transform: uppercase;
min-height: 44px;
padding: 8px 14px;
cursor: pointer;
}
#lightbox button:focus-visible { outline: 2px solid var(--violet-hot); outline-offset: 2px; }
#lightbox-close { grid-column: 3; grid-row: 2; justify-self: end; }
#lightbox-prev { grid-column: 1; grid-row: 2; justify-self: start; }
#lightbox-next { grid-column: 2; grid-row: 2; justify-self: end; }

#help-detail {
width: min(640px, calc(100vw - 24px));
max-height: calc(100vh - 24px);
max-height: calc(100dvh - 24px);
padding: 0;
border: 1px solid var(--metal);
color: var(--ivory);
background: rgba(20, 14, 24, 0.97);
box-shadow: 0 0 36px rgba(157, 36, 56, 0.45);
box-sizing: border-box;
}
#help-detail[open] { display: flex; flex-direction: column; }
#help-detail::backdrop { background: rgba(6, 4, 10, 0.82); }
.detail-bar { display: flex; justify-content: flex-end; padding: 8px 8px 0; }
#help-detail-close {
font-family: Cinzel, Palatino, serif;
color: var(--ivory);
background: rgba(74, 53, 96, 0.85);
border: 1px solid var(--metal);
letter-spacing: 0.08em;
text-transform: uppercase;
min-height: 44px;
padding: 8px 14px;
cursor: pointer;
}
#help-detail-close:focus-visible { outline: 2px solid var(--violet-hot); outline-offset: 2px; }
.detail-body { min-height: 0; padding: 0 20px 20px; overflow-y: auto; }
.detail-body [hidden] { display: none; }
#help-detail-art { display: block; width: min(288px, 100%); height: auto; aspect-ratio: 1; object-fit: contain; margin: 0 auto 12px; }
#help-detail-name { margin: 0 0 6px; text-align: center; font-family: Cinzel, Palatino, serif; font-size: 1.4rem; letter-spacing: 0.08em; }
.detail-status, .detail-subtitle { margin: 0 0 4px; text-align: center; color: var(--muted); }
.detail-status { color: var(--ruby-hot); font-family: Cinzel, Palatino, serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem; }
#help-detail-text { margin-top: 14px; line-height: 1.5; }
#help-detail-text p { margin: 0 0 12px; white-space: pre-line; overflow-wrap: break-word; }
#help-detail-text.structured { margin-top: 4px; }
#help-detail-text .cost, #help-detail-text .tags { margin: 0 0 10px; }
.detail-heading {
margin: 18px 0 8px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(201, 190, 174, 0.3);
font-family: Cinzel, Palatino, serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--metal);
}
.effects { margin: 0 0 10px; padding-left: 1.2em; }
.effects li { margin: 0 0 4px; overflow-wrap: break-word; }
.effects li::marker { color: var(--ruby-hot); }
.effects.rules { color: var(--muted); font-size: 0.92rem; }
.effects.rules li::marker { color: var(--violet-hot); }
#help-detail-text .detail-note { margin: 14px 0 0; color: var(--muted); font-size: 0.8rem; font-style: italic; }
.levels { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; margin: 0 0 10px; }
.levels dd { margin: 0; min-width: 0; }
.levels dd .cost, .levels dd .tags { margin: 0; }
.level-name { font-family: Cinzel, Palatino, serif; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.level-name.upgraded { color: #f0c860; }
#help-detail-text .level-text { margin: 0; }
.monster-spell {
margin: 0 0 10px;
padding: 10px 12px 2px;
background: rgba(74, 53, 96, 0.35);
border: 1px solid rgba(201, 190, 174, 0.3);
border-radius: 6px;
}
.monster-spell h4 { margin: 0 0 8px; font-size: 1rem; font-weight: 600; letter-spacing: 0.03em; }

@media (min-width: 700px) {
.grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1040px) {
.hero-copy { margin-top: 8vh; }
}

.studio {
min-height: 100vh;
display: grid;
place-items: center;
}
.studio-main {
display: flex;
flex-direction: column;
align-items: center;
width: min(440px, 100%);
min-width: 0;
padding: 48px 20px 64px;
text-align: center;
}
.studio-mark {
display: block;
width: min(220px, 46vw);
height: auto;
margin: 0 auto;
}
.studio h1 {
max-width: 100%;
margin: 28px 0 0;
color: var(--ivory);
font-family: Cinzel, Palatino, serif;
font-weight: 400;
font-size: clamp(1.2rem, 5vw, 2rem);
letter-spacing: 0.12em;
line-height: 1.35;
text-transform: uppercase;
}
.studio-link {
display: inline-block;
margin-top: 36px;
padding: 14px 28px;
min-height: 44px;
color: var(--ivory);
font-family: Cinzel, Palatino, serif;
letter-spacing: 0.18em;
text-decoration: none;
text-transform: uppercase;
background: linear-gradient(180deg, rgba(216, 90, 98, 0.55), rgba(157, 36, 56, 0.78));
border: 1px solid var(--metal);
box-shadow: 0 0 28px rgba(157, 36, 56, 0.45);
clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.studio-link:hover, .studio-link:focus-visible {
outline: 2px solid var(--violet-hot);
outline-offset: 4px;
}