@font-face { font-family:Germania; src:url('../Content/Fonts/GermaniaOne.ttf'); }
@font-face { font-family:ChakraLabel; src:url('../Content/Fonts/ChakraPetch-BoldItalic.ttf'); }
@font-face {
  font-family:Rocker;
  src:url('../Content/Fonts/NewRocker.ttf')
}
@font-face {
  font-family:Chakra;
  src:url('../Content/Fonts/ChakraPetch.ttf')
}
:root {
  color-scheme:dark;
  --page:#11100f;
  --surface:#1c1a18;
  --line:#3b3630;
  --ink:#ece5d9;
  --muted:#afa698;
  --accent:#d9b47a;
  --toolbar-height:76px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.catalog-toolbar {
  position:sticky;
  top:0;
  z-index:70;
  background:#11100ff5;
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top)
}
.toolbar-inner {
  max-width:1570px;
  margin:auto;
  padding:12px 36px;
  display:flex;
  align-items:center;
  gap:16px
}
.toolbar-brand {
  color:var(--accent);
  font:22px Rocker,serif;
  text-decoration:none
}
.toolbar-search {
  flex:1;
  min-width:0
}
.column-toggle,.mobile-only {
  display:none
}
#filters-toggle {
  min-height:44px;
  color:var(--accent)
}
.filter-panel-heading {
  display:flex;
  align-items:center;
  gap:12px
}
.filter-panel-heading h2 {
  margin:0 auto 0 0;
  font:22px Rocker,serif
}
.controls,#collection {
  scroll-margin-top:calc(var(--toolbar-height) + 16px)
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--page);
  color:var(--ink);
  font:16px Chakra,sans-serif
}
button,input,select {
  font:inherit
}
button,select {
  cursor:pointer
}
button,a,input,select,summary {
  outline-offset:5px
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent)
}
.masthead,main,footer {
  max-width:1570px;
  margin:auto;
  padding:0 36px
}
.masthead {
  padding-top:54px;
  padding-bottom:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.eyebrow {
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:12px;
  margin:0 0 12px
}
h1 {
  font:clamp(30px,4vw,46px) Rocker,serif;
  margin:0
}
p {
  margin:0
}
.intro {
  color:var(--muted);
  margin-top:12px
}
.data-link {
  white-space:nowrap;
  color:var(--accent);
  font-size:13px;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:7px
}
.controls {
  padding:24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px
}
input[type=search] {
  background:#100f0e;
  color:var(--ink);
  border:1px solid #51483e;
  border-radius:4px;
  width:100%;
  padding:13px 16px
}
input::placeholder {
  color:#9f9587
}
button {
  color:var(--ink);
  background:transparent;
  border:1px solid var(--line);
  border-radius:4px;
  padding:9px 14px
}
#clear {
  white-space:nowrap
}
.filter-row {
  display:flex;
  gap:20px;
  align-items:end;
  flex-wrap:wrap;
  margin-top:20px
}
.categories {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-right:auto
}
.categories button {
  font-size:14px;
  padding:10px 12px
}
.categories button[aria-pressed=true] {
  background:#413325;
  border-color:#ae8c5d;
  color:#ffe2b8
}
.categories span {
  color:var(--muted);
  margin-left:5px;
  font-size:12px
}
.filter-row label {
  font-size:12px;
  color:var(--muted)
}
select {
  display:block;
  padding:7px 22px 7px 10px;
  background:#141210;
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:4px;
  margin-top:5px
}
.guide {
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:15px;
  display:flex;
  gap:16px;
  justify-content:space-between;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--muted)
}
.guide label {
  color:var(--ink)
}
input[type=checkbox] {
  accent-color:var(--accent)
}
.result-bar {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:13px;
  margin:23px 0
}
.result-bar span {
  font-size:12px
}
.section-heading {
  display:flex;
  align-items:center;
  gap:15px;
  margin:32px 0 22px;
  font:26px Rocker,serif
}
.section-heading span {
  font:13px Chakra,sans-serif;
  color:var(--muted)
}
.section-heading:after {
  content:'';
  height:1px;
  background:var(--line);
  flex:1
}
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:32px 22px;
  align-items:start
}
.entry {
  min-width:0
}
.card-entry {
  display:flex;
  flex-direction:column;
  align-items:center
}
.card-viewport {
  position:relative;
  width:268px;
  max-width:100%;
  aspect-ratio:268 / 377;
  overflow:clip;
  overflow-clip-margin:12px
}
/* Calling Card geometry follows ECS/Rendering/CardConcepts/CallingCardStyle.cs. */
.card-face {
  position:absolute;
  inset:0 auto auto 0;
  width:268px;
  height:377px;
  padding:0;
  border:0;
  border-radius:10px;
  overflow:visible;
  text-align:left;
  background:var(--background);
  color:var(--face-ink);
  box-shadow:5px 7px 0 #09080c;
  transform:scale(var(--card-scale,1));
  transform-origin:top left;
  transition:transform .15s,box-shadow .15s
}
.card-face:hover {
  transform:translateY(-3px) scale(var(--card-scale,1));
  box-shadow:6px 10px 0 #b01230
}
.card-face[aria-pressed=true] { box-shadow:5px 7px 0 #b01230,0 0 0 2px #f4efe1; }
.art-window { position:absolute; inset:0; overflow:hidden; border-radius:10px; }
.card-art { position:absolute; bottom:-8px; left:50px; width:252px; height:auto; }
.card-art.contain { object-fit:contain; }
.card-name {
  position:absolute;
  z-index:2;
  top:9px;
  left:40px;
  width:194px;
  height:40px;
  font:28px/40px Rocker,serif;
  white-space:nowrap;
  color:#f4efe1;
  transform:rotate(-1.6deg)
}
.card-name:before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:-1px -10px -1px -32px;
  background:#09080c;
  border:1.6px solid #f4efe1;
  transform:skewX(3deg);
  box-shadow:5px 5px 0 #09080c
}
.card-capital {
  position:absolute;
  z-index:3;
  top:8px;
  left:-5px;
  width:40px;
  height:46px;
  text-align:center;
  font:43px/46px Rocker,serif;
  background:var(--background);
  color:var(--face-ink);
  border:2px solid currentColor;
  box-shadow:3px 3px 0 #09080c;
  transform:rotate(-8deg)
}
.costs {
  position:absolute;
  z-index:1;
  top:57px;
  left:-8px;
  display:flex;
  gap:6px;
  padding:1px 12px 1px 15px;
  height:27px;
  background:#09080c;
  transform:skewX(10deg);
  box-shadow:0 0 0 1px #f4efe1
}
.pip { display:block; width:21px; height:25px; background:#84807c; border:3px solid #f4efe1; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); transform:skewX(-10deg); }
.pip.Red { background:#e2243a; }
.pip.White { background:#fffaee; }
.pip.Black { background:#18161c; }
.card-text {
  position:absolute;
  bottom:10px;
  left:68px;
  right:10px;
  padding:6px 7px;
  background:var(--slip-bg);
  color:var(--slip-ink);
  font:16px/1.15 Chakra,sans-serif;
  white-space:pre-wrap;
  clip-path:polygon(3% 0,100% 0,97% 100%,0 100%)
}
.stat { position:absolute; z-index:1; left:12px; width:50px; text-align:center; filter:drop-shadow(3px 4px 0 #09080c); }
.stat-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.stat-value { display:grid; place-items:center; height:58px; font:44px/1 Germania,serif; color:#f4efe1; }
.stat.block .stat-value { background:#3a6892; border-top:3px solid #f4efe1; clip-path:polygon(0 0,100% 0,100% 45%,85% 78%,50% 100%,15% 78%,0 45%); text-shadow:2px 2px #1a3450; }
.stat.damage { left:-1px; width:76px; }
.stat.damage .stat-value { height:72px; background:#e2243a; clip-path:polygon(50% 0,59% 14%,76% 4%,77% 23%,96% 19%,88% 38%,100% 50%,86% 60%,95% 79%,75% 77%,73% 96%,58% 86%,45% 100%,38% 84%,18% 94%,21% 73%,2% 73%,13% 55%,0 42%,18% 36%,9% 17%,31% 21%,32% 2%,43% 16%); text-shadow:2px 2px #09080c; }
.stat.ap .stat-value,.stat.free .stat-value { height:32px; border:2px solid #09080c; background:#f4efe1; color:#09080c; font-size:26px; }
.stat.ap .stat-value:after { content:'AP'; color:#b01230; font:14px ChakraLabel,sans-serif; }
.stat.ap .stat-value { display:flex; justify-content:space-evenly; }
.stat.free { transform:rotate(-9deg); }
.stat.free .stat-value { font:17px/1 ChakraLabel,sans-serif; background:#b01230; color:#f4efe1; border:3px solid #f4efe1; }
.delta { position:absolute; right:-5px; bottom:0; background:#56c45c; color:#09080c; padding:1px 4px; font:14px ChakraLabel,sans-serif; transform:rotate(-8deg); }
.type-seal { position:absolute; bottom:23px; left:13px; display:grid; place-items:center; width:48px; height:48px; border:3px solid #f4efe1; border-radius:50%; background:#e2243a; box-shadow:0 0 0 2px #09080c,3px 4px 0 2px #09080c; }
.type-seal.block { background:#3a6892; }
.type-seal.prayer { background:#deb25c; }
.type-seal.relic { background:#d6cdba; }
.type-icon { width:30px; height:30px; object-fit:contain; filter:brightness(0) invert(1); }
.type-seal.prayer .type-icon,.type-seal.relic .type-icon { filter:brightness(0); }
.face-note {
  display:flex;
  gap:8px;
  justify-content:space-between;
  width:100%;
  max-width:268px;
  font-size:12px;
  color:var(--muted);
  margin:12px 0 8px
}
.face-note .upgrade-state {
  color:var(--accent)
}
.entry-details {
  width:100%;
  font-size:13px;
  color:var(--muted)
}
.card-entry .entry-details {
  max-width:268px
}
summary {
  cursor:pointer;
  padding:5px 0;
  color:var(--muted)
}
.details-body {
  padding:10px 0
}
.full-text {
  white-space:pre-wrap;
  color:var(--ink);
  line-height:1.55
}
.detail-meta {
  margin:10px 0;
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  overflow-wrap:anywhere
}
.keyword {
  border-top:1px solid var(--line);
  padding:10px 0;
  line-height:1.5
}
.keyword strong {
  display:block;
  color:var(--accent);
  text-transform:capitalize;
  margin-bottom:3px
}
.item-entry {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden
}
.item-art {
  height:200px;
  background:radial-gradient(ellipse at center,#302a23,#141210);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px
}
.item-art img {
  width:100%;
  height:100%;
  object-fit:contain
}
.medal .item-art {
  height:170px
}
.item-body {
  padding:18px
}
.item-body h3 {
  font:23px Rocker,serif;
  margin:0 0 10px
}
.item-badges {
  font-size:11px;
  letter-spacing:1px;
  color:var(--accent);
  margin-bottom:12px;
  text-transform:uppercase
}
.item-body .full-text {
  font-size:15px
}
.flavor {
  margin-top:16px;
  color:var(--muted);
  font-style:italic;
  line-height:1.5;
  font-size:13px
}
.missing-art {
  font-size:12px;
  color:var(--muted);
  text-align:center
}
.card-face .missing-art {
  position:absolute;
  bottom:90px;
  left:68px;
  right:5px
}
#empty {
  padding:60px 0;
  text-align:center;
  color:var(--muted)
}
footer {
  margin-top:50px;
  padding-top:24px;
  padding-bottom:32px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  display:flex;
  justify-content:space-between;
  gap:16px
}
@media(max-width:700px) {
  .toolbar-inner {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    padding:10px 12px;
    gap:8px
  }
  .toolbar-brand {
    font-size:20px
  }
  .toolbar-search {
    grid-column:1 / -1;
    grid-row:2
  }
  .toolbar-search input {
    padding:11px 12px;
    min-height:44px
  }
  .column-toggle {
    display:flex;
    gap:2px
  }
  .column-toggle button,#filters-toggle {
    font-size:12px;
    min-height:44px;
    padding:8px 9px
  }
  .column-toggle button[aria-pressed=true] {
    background:#413325;
    border-color:#ae8c5d;
    color:#ffe2b8
  }
  .mobile-only {
    display:block
  }
  #filters-panel {
    display:none;
    position:fixed;
    top:var(--toolbar-height);
    left:0;
    right:0;
    max-height:calc(100dvh - var(--toolbar-height));
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:60;
    border-radius:0 0 12px 12px;
    padding:18px 18px calc(24px + env(safe-area-inset-bottom))
  }
  .filters-open #filters-panel {
    display:block
  }
  body.filters-open {
    overflow:hidden
  }
  #filter-backdrop:not([hidden]) {
    position:fixed;
    inset:var(--toolbar-height) 0 0;
    z-index:50;
    background:#0009
  }
  #show-results {
    width:100%;
    min-height:44px;
    margin-top:20px;
    background:#413325;
    color:#ffe2b8;
    border-color:#ae8c5d
  }
  .masthead,main,footer {
    padding-left:18px;
    padding-right:18px
  }
  .masthead {
    padding-top:30px;
    display:block
  }
  .data-link {
    display:inline-block;
    margin-top:20px
  }
  .controls {
    padding:16px
  }
  .filter-row select {
    font-size:16px
  }
  .categories button {
    min-height:44px
  }
  #clear {
    font-size:13px
  }
  .filter-row {
    gap:14px
  }
  .categories {
    width:100%
  }
  .categories button {
    font-size:12px
  }
  .grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 12px
  }
  .result-bar span {
    display:none
  }
  footer {
    flex-direction:column
  }
  .card-entry {
    justify-self:stretch;
    width:100%
  }
  [data-mobile-columns="1"] .grid {
    grid-template-columns:minmax(0,1fr)
  }
  [data-mobile-columns="1"] .card-entry {
    justify-self:center;
    width:min(100%,268px)
  }
  [data-mobile-columns="2"] .face-note {
    flex-direction:column;
    gap:2px;
    font-size:11px
  }
  [data-mobile-columns="2"] .item-art {
    height:140px;
    padding:12px
  }
  [data-mobile-columns="2"] .medal .item-art {
    height:120px
  }
  [data-mobile-columns="2"] .item-body {
    padding:12px
  }
  [data-mobile-columns="2"] .item-body h3 {
    font-size:18px
  }
  [data-mobile-columns="2"] .item-body .full-text {
    font-size:14px
  }
}
@media(prefers-reduced-motion:reduce) {
  .card-face {
    transition:none
  }
  .card-face:hover {
    transform:scale(var(--card-scale,1))
  }
}

/* The name and its charge travel together when rules wrap. */
.passive-name { white-space: nowrap; }
.passive-icon { display: inline-block; width: 1em; height: 1em; margin: 0 .14em; vertical-align: -.16em; background: currentColor; mask-size: contain; mask-position: center; mask-repeat: no-repeat; }

/* Layered keylines keep stat silhouettes legible over the illustration. */
.stat svg { position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); overflow:visible; }
.stat.block { height:58px; }
.stat.damage { height:72px; }
.stat.block .stat-value,.stat.damage .stat-value { position:relative; background:none; border:0; clip-path:none; font-size:68px; -webkit-text-stroke:1.5px #09080c; paint-order:stroke fill; text-shadow:none; }
.stat.block .stat-value { padding-bottom:8px; }
.card-name { font-size:40px; }