:root {
  color-scheme:dark;
  --paper:#091412;
  --ink:#e7eee8;
  --muted:#a1b7ae;
  --line:#29443b;
  --accent:#70e8bd;
  --lime:#193e32;
  --surface:#10201b;
  --gold:#c1ad7f
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif
}
button,input,select {
  font:inherit
}
button,a,input,select {
  touch-action:manipulation
}
button,a,select,input {
  outline-offset:4px
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible {
  outline:2px solid var(--accent)
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default;
  opacity:.4
}
a {
  color:inherit
}
.masthead {
  height:104px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5vw
}
.brand {
  display:flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
  font-weight:800;
  font-size:20px;
  letter-spacing:2px
}
.brand-mark {
  background:var(--ink);
  color:var(--paper);
  width:40px;
  height:44px;
  display:grid;
  place-items:center;
  font-family:Georgia,serif;
  font-size:31px;
  font-style:italic;
  transform:skew(-7deg)
}
.brand-sub {
  display:block;
  font-size:9px;
  letter-spacing:3.3px;
  margin-top:6px;
  font-weight:500
}
.local-badge {
  font-size:10px;
  letter-spacing:1.8px;
  display:flex;
  align-items:center;
  gap:9px
}
.local-badge span {
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%
}
main {
  padding:0 5vw
}
.hero {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:66px 0 62px;
  gap:30px
}
.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  margin:0 0 25px;
  color:var(--muted)
}
h1 {
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(50px,5.6vw,86px);
  line-height:1.02;
  font-weight:400;
  letter-spacing:-3.4px;
  margin:0
}
h1 em {
  color:var(--accent);
  font-weight:400
}
.intro {
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
  margin:25px 0 0
}
.hero-stat {
  padding:15px 35px 0 0;
  min-width:250px
}
.hero-stat strong {
  display:block;
  font:400 91px/.95 Georgia,serif;
  letter-spacing:-5px
}
.hero-stat>span {
  display:block;
  font-size:10px;
  letter-spacing:2px;
  margin-top:19px
}
.stat-rule {
  height:1px;
  background:var(--ink);
  margin:22px 0 16px
}
.hero-stat p {
  font-size:12px;
  color:var(--muted);
  margin:0
}
.hero-stat b {
  color:var(--ink);
  font-weight:500
}
.hero-stat p span {
  padding:0 12px;
  color:#a3aaa2
}
.library {
  border-top:1px solid var(--ink)
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:28px 0 24px
}
h2 {
  font:400 34px Georgia,serif;
  letter-spacing:-1px;
  margin:0
}
.heading-dot {
  color:var(--accent)
}
.section-note {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.6px;
  color:var(--muted)
}
.filters {
  display:flex;
  gap:12px;
  align-items:stretch
}
.search {
  display:flex;
  align-items:center;
  flex:1;
  background:var(--surface);
  border:1px solid var(--line);
  min-width:190px;
  padding:0 14px
}
.search-icon {
  font-size:28px;
  margin-right:9px;
  font-weight:300
}
.search input {
  border:0;
  background:transparent;
  width:100%;
  height:56px;
  font-size:13px;
  color:var(--ink)
}
.search input:focus {
  outline:none
}
.search:focus-within {
  outline:2px solid var(--accent);
  outline-offset:2px
}
.search input::placeholder {
  color:var(--muted)
}
.select-field {
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid var(--line);
  padding:6px 12px;
  min-width:177px;
  background:var(--surface)
}
.select-field>span {
  font-size:8px;
  letter-spacing:1.6px;
  color:var(--muted);
  margin:0 0 3px
}
.select-field select {
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:12px;
  padding:2px 20px 2px 0;
  max-width:220px
}
.signature-toggle {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:11px;
  white-space:nowrap;
  padding:0 4px
}
.signature-toggle input {
  accent-color:var(--ink);
  width:15px;
  height:15px
}
.results-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:21px 0 24px;
  gap:12px
}
.results-bar p {
  font-size:11px;
  color:var(--muted);
  margin:0
}
.text-button {
  border:0;
  background:none;
  color:var(--ink);
  font-size:11px;
  padding:5px 0
}
.card-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:28px 20px
}
.card-tile {
  text-align:left;
  border:0;
  padding:0;
  background:transparent;
  min-width:0;
  color:var(--ink)
}
.card-art {
  position:relative;
  aspect-ratio:744/1039;
  background:#14271f;
  border-radius:9px;
  box-shadow:0 4px 18px #0005;
  transition:transform .2s,box-shadow .2s;
  overflow:hidden
}
.card-tile:hover .card-art {
  transform:translateY(-5px);
  box-shadow:0 12px 30px #0008,0 0 0 1px #70e8bd70
}
.card-art img {
  height:100%;
  width:100%;
  object-fit:contain;
  display:block
}
.signature-stamp {
  position:absolute;
  right:7px;
  top:7px;
  background:var(--lime);
  color:var(--ink);
  font-size:9px;
  padding:5px 7px;
  border-radius:3px;
  letter-spacing:.4px
}
.card-topline {
  display:flex;
  justify-content:space-between;
  gap:4px;
  align-items:center;
  margin:13px 0 6px;
  font-size:9px;
  letter-spacing:.4px;
  color:var(--muted)
}
.card-topline .rarity {
  text-transform:uppercase;
  font-size:8px
}
.card-name {
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  margin:0
}
.card-set {
  font-size:10px;
  color:var(--muted);
  margin:5px 0 0
}
.pagination {
  margin:45px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:22px;
  font-size:11px
}
.page-button {
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  padding:10px 16px
}
.page-button:not(:disabled):hover {
  background:var(--ink);
  color:var(--paper)
}
footer {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:25px 0 30px;
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted);
  gap:15px
}
.empty {
  text-align:center;
  padding:70px 20px
}
.empty>span {
  font-size:40px;
  color:var(--accent)
}
.empty h3 {
  font:30px Georgia,serif;
  margin:15px 0
}
.empty p {
  font-size:13px;
  color:var(--muted)
}
.error {
  padding:24px;
  background:#351e20;
  color:#ffc5b4;
  font-size:13px
}
dialog {
  border:0;
  background:var(--paper);
  color:var(--ink);
  max-width:900px;
  width:calc(100% - 40px);
  padding:38px;
  max-height:90vh;
  overflow:auto;
  box-shadow:0 20px 100px #0005
}
dialog::backdrop {
  background:#020a08df;
  backdrop-filter:blur(4px)
}
.close-dialog {
  position:absolute;
  right:13px;
  top:10px;
  background:transparent;
  border:0;
  font-size:28px;
  color:var(--ink);
  z-index:1
}
.detail-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:start
}
.detail-image {
  width:100%;
  height:auto;
  max-height:74vh;
  object-fit:contain;
  border-radius:9px
}
.detail-info {
  padding-top:18px
}
.detail-info .eyebrow {
  margin-bottom:16px
}
.detail-info h2 {
  font-size:38px;
  line-height:1.08;
  margin-bottom:18px
}
.detail-label {
  display:inline-block;
  font-size:10px;
  background:var(--lime);
  padding:7px 10px;
  margin-bottom:20px
}
.stats {
  display:flex;
  gap:25px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  margin:0 0 20px
}
.stats dt {
  font-size:9px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px
}
.stats dd {
  font:30px Georgia,serif;
  margin:6px 0 0
}
.ability {
  white-space:pre-line;
  font-size:13px;
  line-height:1.7
}
.detail-meta {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin-top:24px
}
.source-link {
  display:inline-block;
  margin-top:20px;
  font-size:11px;
  text-underline-offset:4px
}
.detail-correction {
  font-size:11px;
  background:var(--surface);
  padding:10px;
  line-height:1.5
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
[hidden] {
  display:none!important
}
@media(min-width:1600px) {
  main,.masthead {
    padding-left:max(5vw,calc((100vw - 1600px)/2));
    padding-right:max(5vw,calc((100vw - 1600px)/2))
  }
  .card-grid {
    gap:34px 25px
  }
}
@media(max-width:1100px) {
  .card-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .filters {
    flex-wrap:wrap
  }
  .search {
    flex-basis:45%
  }
  .signature-toggle {
    padding:0 12px
  }
  .hero-stat {
    padding-right:0
  }
  .section-note {
    font-size:9px
  }
}
@media(max-width:650px) {
  .masthead {
    height:80px
  }
  .brand {
    font-size:16px
  }
  .local-badge {
    font-size:8px;
    letter-spacing:1px
  }
  .brand-mark {
    width:32px;
    height:36px;
    font-size:25px
  }
  .hero {
    padding:36px 0;
    display:block
  }
  h1 {
    font-size:54px;
    letter-spacing:-2.4px
  }
  .hero-stat {
    display:none
  }
  .eyebrow {
    margin-bottom:20px;
    font-size:9px
  }
  .intro {
    font-size:13px;
    margin-top:20px
  }
  .section-heading {
    margin:23px 0 20px
  }
  .section-note {
    display:none
  }
  .search {
    flex-basis:100%
  }
  .select-field {
    min-width:0;
    flex:1
  }
  .select-field select {
    max-width:100%
  }
  .signature-toggle {
    height:30px;
    padding:0
  }
  .filters {
    gap:10px
  }
  .card-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 14px
  }
  .card-name {
    font-size:12px
  }
  .results-bar {
    margin:16px 0 22px
  }
  .results-bar p {
    font-size:10px
  }
  .pagination {
    margin:30px 0
  }
  .page-button {
    padding:10px
  }
  footer {
    flex-direction:column;
    gap:9px;
    font-size:8px
  }
  dialog {
    padding:35px 20px 25px;
    width:calc(100% - 24px)
  }
  .detail-layout {
    grid-template-columns:1fr;
    gap:10px
  }
  .detail-image {
    max-height:49vh
  }
  .detail-info h2 {
    font-size:31px
  }
  .detail-info {
    padding-top:15px
  }
}
@media(prefers-reduced-motion:reduce) {
  .card-art {
    transition:none
  }
}
@media(max-width:650px) {
  .signature-toggle {
    flex-basis:100%
  }
}

.app-nav{display:flex;gap:24px;margin-left:auto;margin-right:40px;font-size:12px}
.app-nav a{text-decoration:none;padding:8px 0;color:var(--muted)}
.app-nav a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--accent)}
.list-hero h1{font-size:clamp(50px,5.1vw,78px)}
.list-notice{background:var(--surface);border-left:3px solid var(--accent);padding:15px 18px;font-size:12px;line-height:1.6;margin:0 0 15px}
.snapshot-label{font-size:10px;color:var(--muted);margin:0 0 25px}
.list-grid{margin-bottom:35px;align-items:start}
.list-card{min-width:0}
.quantity-badge{position:absolute;top:9px;left:9px;background:var(--paper);color:var(--ink);font-size:10px;letter-spacing:.7px;padding:7px 9px;border-radius:3px;box-shadow:0 1px 4px #0002}
.quantity-note{font-size:10px;color:var(--muted);margin:9px 0}
.review-art{display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--surface);color:var(--gold)}
.review-art>span:not(.quantity-badge){font-size:40px}
.review-art>p{font:20px Georgia,serif}
.review-note{font-size:11px;line-height:1.5;background:#33291c;color:#e6cfa3;padding:10px;margin:12px 0}
.entry-notes{font-size:11px;line-height:1.5}
.entry-links{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0;font-size:10px;text-underline-offset:3px}
@media(max-width:650px){.masthead{height:auto;min-height:80px;flex-wrap:wrap;padding-top:18px;padding-bottom:14px;gap:15px}.app-nav{order:3;flex-basis:100%;margin:0;gap:24px;justify-content:flex-start}.local-badge{margin-left:auto}.list-hero h1{font-size:49px}}

.list-card .card-art[role="button"]{cursor:pointer}.list-card .card-art[role="button"]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}



.sheet-tools{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}.sheet-tools summary{cursor:pointer;font-size:13px;font-weight:700}.sheet-copy-fields{display:grid;grid-template-columns:1fr 110px;gap:12px;margin-top:15px}.sheet-copy-fields label{font-size:12px;display:grid;gap:6px}.sheet-copy-fields input,.sheet-copy-fields select,.sheet-tools textarea{width:100%;font:inherit;padding:9px;border:1px solid var(--line);background:var(--paper,#f5f2e9);color:inherit}.sheet-copy-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.sheet-copy-hint,.sheet-copy-status{font-size:12px;line-height:1.6}.sheet-copy-status:empty{display:none}.sheet-tools textarea{margin-top:8px;font-size:12px;resize:vertical}


/* Viego-inspired: black mist, spectral jade, weathered gold. */
body{background:radial-gradient(ellipse at 88% 0%,#17463955,transparent 38rem),radial-gradient(ellipse at 0% 36rem,#15372e33,transparent 42rem),var(--paper);min-height:100vh}
::selection{background:#70e8bd;color:#071610}
.masthead{background:#08120fe6;border-bottom-color:#65704b66;position:relative}
.brand{letter-spacing:2.8px;font-size:18px}
.brand-mark{background:linear-gradient(160deg,#213b2e,#0c1d17);color:var(--gold);border:1px solid #85774f;transform:none;width:43px;height:47px;clip-path:polygon(0 0,100% 0,100% 83%,50% 100%,0 83%)}
.brand-mark svg{width:29px;height:34px;display:block}
.brand-sub{color:var(--muted);letter-spacing:3.7px}
.local-badge{color:var(--muted)}
.local-badge span{background:var(--accent);box-shadow:0 0 10px #70e8bd88}
.app-nav a{transition:color .18s}
.app-nav a:hover,.app-nav a[aria-current="page"]{color:var(--accent)}
.app-nav a[aria-current="page"]{border-bottom-color:var(--accent);box-shadow:0 4px 8px -7px var(--accent)}
.hero{position:relative;isolation:isolate;padding-top:72px;padding-bottom:70px}
.hero::before{content:"";position:absolute;z-index:-1;inset:0 -5vw;background:radial-gradient(ellipse at 70% 65%,#367b5b26,transparent 58%);pointer-events:none}
.eyebrow{color:var(--gold);display:flex;align-items:center;gap:12px;letter-spacing:2.6px}
.eyebrow::before{content:"";width:25px;height:1px;background:var(--gold);flex-shrink:0}
h1{color:var(--ink);text-shadow:0 2px 25px #0003}
h1 em{color:var(--accent);text-shadow:0 0 38px #70e8bd18}
.intro{color:var(--muted);max-width:470px}
.hero-stat{position:relative;min-width:270px}
.hero-stat strong{color:var(--ink);text-shadow:0 0 44px #70e8bd20}
.hero-stat>span{color:var(--gold);letter-spacing:2.2px}
.stat-rule{background:linear-gradient(90deg,var(--gold),#c1ad7f22)}
.hero-stat p span{color:#7a927f}
.library{border-top:1px solid #a492626b}
.section-heading h2{color:var(--ink)}
.section-note{color:var(--gold);letter-spacing:2px}
.search,.select-field{border-color:var(--line);box-shadow:inset 0 1px 0 #b4e4cb07}
.search-icon{color:var(--accent)}
.select-field select option{background:var(--surface);color:var(--ink)}
.signature-toggle input{accent-color:var(--accent)}
.text-button{color:var(--accent)}
.text-button:hover,.entry-links a:hover,.source-link:hover{color:#b4ffdf}
.card-art{border:1px solid #33504455;border-radius:7px}
.card-tile:hover .card-name,.list-card:hover .card-name{color:var(--accent)}
.card-topline{color:#a3c4b5}
.card-topline .rarity{color:var(--gold)}
.signature-stamp{background:var(--gold);color:#0a1b13;border:1px solid #e0d1a6;letter-spacing:.8px}
.page-button{background:#10211b;border-color:#45634f;color:var(--ink);transition:background .18s,border-color .18s}
.page-button:not(:disabled):hover{background:#214638;color:#caffdf;border-color:var(--accent)}
.quantity-badge{background:#0b201aeb;color:#b9f8d7;border:1px solid #669c7a99;box-shadow:0 2px 8px #0007}
.entry-links{color:var(--gold)}
dialog{background:linear-gradient(145deg,#13271f,#0b1713 65%);border:1px solid #7a8058;box-shadow:0 24px 100px #000b,0 0 45px #2d8c6122;border-radius:3px}
.close-dialog{color:var(--muted);width:32px;height:32px;line-height:1;border-radius:50%}
.close-dialog:hover{color:var(--accent);background:var(--surface)}
.detail-info .eyebrow{font-size:9px;letter-spacing:1.5px}
.detail-info .eyebrow::before{width:15px}
.detail-label{color:var(--gold);border:1px solid #8c8155;background:#263723}
.stats dd{color:#b8f3d6}
.source-link{color:var(--gold)}
.sheet-tools summary{color:var(--accent)}
.sheet-copy-fields input,.sheet-copy-fields select,.sheet-tools textarea{background:#0a1913;border-color:#385849}
.sheet-copy-hint{color:var(--muted)}
.sheet-copy-status{color:#b9e8cd}
footer{border-top-color:#68754e66}
@media(max-width:650px){.brand{font-size:16px}.brand-mark{width:34px;height:38px}.brand-mark svg{width:24px;height:28px}.hero{padding:38px 0 40px}.eyebrow{font-size:8px;letter-spacing:1.9px}.detail-info .eyebrow{flex-wrap:wrap}.detail-layout{min-width:0}.sheet-copy-fields{grid-template-columns:minmax(0,1fr) 90px}}
@media(prefers-reduced-motion:reduce){.app-nav a,.page-button{transition:none}.card-tile:hover .card-art{transform:none}}


/* Small-screen list counts and easier touch navigation. */
@media(max-width:650px){
  .hero-stat{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:4px;align-items:center;min-width:0;margin-top:26px;padding:18px 0 0;border-top:1px solid var(--line)}
  .hero-stat strong{grid-row:1/3;font-size:44px;line-height:1;letter-spacing:-2px}
  .hero-stat>span{margin:0;font-size:9px;letter-spacing:1.2px}
  .hero-stat p{grid-column:2;font-size:11px;line-height:1.6}
  .hero-stat .stat-rule{display:none}
  .app-nav a{display:inline-flex;align-items:center;min-height:44px;padding:10px 4px}
}

/* Larger phone tap targets and readable card labels. */
@media(max-width:650px){
  .entry-links a{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
  .close-dialog{width:44px;height:44px;top:8px;right:8px;background:#0b1713ed}
  .card-name{font-size:14px;line-height:1.35}
  .card-topline{font-size:10px}
}