body {
  font-family: Arial, sans-serif;
  background-color: #ccc;
  margin: 0 auto;
  text-align: center;
  color: #999999;
}

a {
  color: #333333;
  text-decoration: none;
}
a:visited { color: #333333; }
a:active, a:hover { color: #111111; text-decoration: underline; }

a.exit-link { color: #fff; }
span.bold { font-weight: bold; font-style: italics; }

#content {
  width: 90%;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-top: 10px;
}

.card-counter {
  font-size: 18px;
  color: #333;
  flex: 2;
  text-align: left;
}

.card-wrapper {
  margin-bottom: 20px;
}

a.exit-link {
  font-size: 18px;
  color: #333;
  flex: 1;
  text-align: right;
}

.card-flipper {
  max-width: 35vw;
  aspect-ratio: 750 / 1050;
  perspective: 1000px;
  margin: 0 auto;
}

.effect-wrapper {
  width: 100%;
  max-width: 35vw;
  height: auto;
  aspect-ratio: 750 / 1050;
  position: relative;
}

.effect-layer {
  position: absolute;
  box-sizing: border-box;
  z-index: -1;
  transform: translateY(100%);
  transition: transform 0.5s ease;
}

.effect-layer.sleeve {
  transform: translateY(0);
  top: -2%;
  left: -2%;
  width: 104%;
  height: 102%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background-color: rgba(238, 238, 238, 0.5);
}

.effect-layer.slab {
  transform: translateY(0);
  top: -3%;
  left: -4%;
  width: 108%;
  height: 104.5%;
  border-radius: 0.4vw;
  border: 5px double rgba(255, 255, 255, 1);
  background-color: rgba(238, 238, 238, 0.5);
  border-top: 0;
}

.card {
  width: 100%;
  max-width: 35vw;
  height: auto;
  aspect-ratio: 750 / 1050;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  z-index: 10;
}

.card.flipped {
  transform: rotateY(180deg);
}

.card-flipper .card .card-front { transform: rotateY(180deg); pointer-events: none; }

.ov {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  transform: rotateY(180deg);
  z-index: 4;
  display: none;
  pointer-events: none;
}

.button-action-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 15px 0 10px;
  position: relative;
  transition: opacity 0.3s;
  z-index: 50;
}

.sleeve-button.disabled, .slab-button.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.button-flip-container {
  display: flex;
  justify-content: center;
  margin: auto 0;
  margin: 15px 0 10px;
}

.flip-button,
.ov-button,
.sleeve-button,
.slab-button,
.exit-button,
.review-button,
.restart-link,
.next-button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background: #eee;
  color: #333;
  border: none;
  border-radius: 5px;
}

.tooltip {
  color: #ffffff;
  font-size: 20px;
  margin: 10px auto;
  display: none;
  position: relative;
  z-index: 100;
}

.action-iframe {
  width: 100%;
  height: 100px;
  margin: 10px auto;
  border: 0;
  display: none;
  background-color: transparent !important;
  color: #333;
  position: relative;
  z-index: 100;
}

@keyframes sheen {
  0% { background-position: 0% 0%, 0% 0%, 0% 0%; }
  50% { background-position: 0% 0%, 0% 0%, 100% 100%; }
  100% { background-position: 0% 0%, 0% 0%, 0% 0%; }
}

@keyframes carbon {
  0%, 100% { background-position: 0% 0%, 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0; }
  50%      { background-position: 100% 100%, 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@media (max-width: 800px) {
  .card-wrapper {
    margin-bottom: 80px;
  }
  .card-flipper {
    max-width: 80vw;
    margin: 0 auto;
  }
  .effect-wrapper {
    max-width: none;
  }
  .card {
    max-width: 100%;
  }
  .tooltip {
    font-size: 20px;
  }
  .button-action-container {
    margin-top: 15px;
    flex-wrap: wrap;
  }
  .sleeve-button, .slab-button, .next-button {
    min-width: 80px;
    padding: 10px 15px;
  }
}

.pack-stage {
  margin: 10px auto 0;
}

.pack-box {
  position: relative;
  width: 100%;
  max-width: var(--packw);
  aspect-ratio: 940 / 1410;
  margin: 0 auto;
  perspective: 1200px;
}
.pack {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  transform-style: preserve-3d;
}
@keyframes packIdle {
  0%, 100% { transform: translateY(0) rotateZ(0); }
  50% { transform: translateY(-1.5%) rotateZ(-0.6deg); }
}
.tearing .pack {
  animation: packSnap .18s ease-in-out 1;
  cursor: default;
}
@keyframes packSnap {
  0%, 100% { transform: translateX(0) rotateZ(0); }
  30% { transform: translateX(-2%) rotateZ(-1.2deg); }
  70% { transform: translateX(2%) rotateZ(1deg); }
}
.pack-card {
  position: absolute;
  z-index: 1;
  left: 8%;
  top: 9%;
  width: 84%;
  aspect-ratio: 750 / 1050;

  background: #fff;
  box-sizing: border-box;
  border: 1px solid #999999;
  padding: 5.83% 5.33%;
  object-fit: contain;
  border-radius: 1.5vw;
  box-shadow: 1.28vw 1.28vw 2.4vw rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(6%);
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s, opacity 0.4s ease 1.0s;
}
.pack-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.pack-front, .pack-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.pack-front {
  background: var(--pack) center / 100% 100% no-repeat;
  transform: translateZ(1px);
}
.pack-back {
  transform: rotateY(180deg) translateZ(1px);
  transform-style: preserve-3d;
}

.pack-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: var(--packback, linear-gradient(90deg, #a9a9a9 0%, #dcdcdc 18%, #c4c4c4 40%, #b3b3b3 48.5%, #7d7d7d 49.6%, #f0f0f0 50.4%, #cfcfcf 53%, #c0c0c0 62%, #e0e0e0 82%, #a6a6a6 100%)) 0 0 / 200% 100% no-repeat;
  background-size: 200% 100%;
  -webkit-mask: var(--pack) 0 0 / 200% 100% no-repeat;
  mask: var(--pack) 0 0 / 200% 100% no-repeat;
  backface-visibility: hidden;
  transition: transform 1.1s cubic-bezier(0.3, 0.6, 0.2, 1) 0.9s, opacity 0.25s ease 1.85s;
}
.half-l {
  left: 0;
  transform-origin: 0 50%;
}
.half-r {
  left: 50%;
  background-position: 100% 0;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transform-origin: 100% 50%;
}
.tearing .pack-flip {
  transform: rotateY(180deg);
}

.tearing .half-l {
  transform: rotateY(-80deg);
  opacity: 0;
}
.tearing .half-r {
  transform: rotateY(80deg);
  opacity: 0;
}
.tearing .pack-card {
  opacity: 1;
  transform: translateY(0);
}

.card {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.card img {
  -webkit-user-drag: none;
}
.card.dragging {
  transition: none;
}

.card.flipped .card-back,
.card.flipped .card-back .card-image {
  pointer-events: none;
}
.effect-wrapper.newcard {
  animation: newCard 0.6s ease-out 1;
}
@keyframes newCard {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-3%) rotate(-1.5deg); }
  30% { transform: translateX(3%) rotate(1.5deg); }
  45% { transform: translateX(-2%) rotate(-1deg); }
  60% { transform: translateX(2%) rotate(1deg); }
  75% { transform: translateX(-1%) rotate(0); }
}

.copy-wrapper .card { transition: none; }

.register-button { padding: 10px 20px; font-size: 16px; cursor: pointer; background: #eee; color: #333; border: none; border-radius: 5px; }
.register-button.disabled { opacity: .5; pointer-events: none; }

.copy-wrapper .slab:not(.effect-layer) { width: calc(var(--cardw) + 40px); margin: 0 auto; display: flex; flex-direction: column; box-sizing: border-box; padding: 1.5cqw;
  container-type: inline-size; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0; text-align: left; white-space: nowrap;
  background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.18) 40%, rgba(255,255,255,.35));
  border: 1px solid rgba(255,255,255,.9); border-radius: 1.75cqw;
  box-shadow: 0 3cqw 7cqw rgba(0,0,0,.35), inset 0 0 0 .5cqw rgba(255,255,255,.25), inset 0 0 4cqw rgba(255,255,255,.35); }

@media (max-width: 500px) {
  .copy-wrapper .slab:not(.effect-layer) { width: calc(var(--cardw) + 24px); }
}

.ov svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ov .ov-g { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; }

.gallery { display: flex; align-items: center; justify-content: center; gap: 14px; }

.gallery > .card-flipper { flex: 0 1 auto; width: var(--cardw); margin: 0; }
.gallery > .slab { flex: 0 1 auto; margin: 0; }
.gallery-arrow { flex: 0 0 auto; width: 44px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 8px;
  background: rgba(60,47,47,.28); color: #fff; font-size: 40px; line-height: 1; text-decoration: none; font-family: Arial, sans-serif; transition: background .2s; }
.gallery-arrow:hover { background: rgba(60,47,47,.75); }
.gallery-arrow.off { visibility: hidden; }
@media (max-width: 800px) { .gallery { gap: 6px; } .gallery > .card-flipper { width: var(--cardw); } .gallery-arrow { width: 32px; height: 52px; font-size: 32px; } }
.grading-status { display: inline-block; padding: 10px 14px; background: #fff7d6; border-left: 4px solid #e0b800; border-radius: 5px; font-size: 14px; color: #333; }

.donate-button { background: #f3e2e2; }

.viewall-button { padding: 10px 20px; font-size: 16px; cursor: pointer; background: #eee; color: #333; border: none; border-radius: 5px; }
#copies-grid #review { display: block; }
#copies-grid .copy-tile { margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; width: 100%; }
#copies-grid .copy-tile .ov { transform: none; display: block; z-index: 4; }
#copies-grid .copy-tile .card-front { transform: none; pointer-events: auto; position: relative; }
#copies-grid .caption p { font-size: 13px; color: #444; margin-top: 6px; }
#copies-grid .filters { align-items: center; }
#copies-grid .pickbar { margin-left: auto; }
#copies-grid .donate-selected { padding: 6px 14px; border: 0; border-radius: 16px; background: #b00020; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
#copies-grid .donate-selected[disabled] { background: #c9c6c1; cursor: default; }
#copies-grid .copy-tile { position: relative; }
#copies-grid .copy-tile .pick { position: absolute; top: 8px; left: 12%; z-index: 20; background: rgba(255,255,255,.9); border-radius: 6px; padding: 4px 6px; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
#copies-grid .copy-tile .pick input { width: 22px; height: 22px; margin: 0; display: block; cursor: pointer; }
#copies-grid .copy-tile .lock { font-size: 20px; line-height: 22px; display: block; color: #d4a017; }
#copies-grid .merge-selected { background: #177c28; }
#copies-grid .donate-selected.donate-bin { position: relative; width: 34px; height: 34px; padding: 6px; border-radius: 8px; background: transparent; color: #999; font-size: 0; vertical-align: middle; }
#copies-grid .donate-selected.donate-bin[disabled] { background: transparent; color: #c9c6c1; }
#copies-grid .donate-selected.donate-bin .n { position: absolute; right: -5px; top: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #b00020; color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
#copies-grid .donate-selected.donate-bin .n:empty { display: none; }

.card-wrapper[data-rarity] .card:not(.flipped) .card-back { transition: box-shadow .4s; }
.card-wrapper[data-rarity="R"] .card:not(.flipped) .card-back { --glow: 90, 60, 230; --gsize: 1; animation: rarityGlow 2.6s ease-in-out infinite; }
.card-wrapper[data-rarity="V"] .card:not(.flipped) .card-back { --glow: 255, 215, 0; --gsize: 1.4; --gop: 1.3; animation: rarityGlow 2.2s ease-in-out infinite; }
.card-wrapper[data-rarity="X"] .card:not(.flipped) .card-back { --glow: 160, 10, 20; --gsize: 2; --gop: 1.7; animation: rarityGlow 1.8s ease-in-out infinite; }
.card-wrapper[data-rarity="S"] .card:not(.flipped) .card-back { --glow: 255, 255, 255; --gsize: 2; animation: rarityGlow 1.4s ease-in-out infinite; }
@keyframes rarityGlow {
  0%, 100% { box-shadow: 1.28vw 1.28vw 2.4vw rgba(0, 0, 0, 0.3), 0 0 calc(10px * var(--gsize, 1)) calc(2px * var(--gsize, 1)) rgba(var(--glow), calc(.35 * var(--gop, 1))); }
  50%      { box-shadow: 1.28vw 1.28vw 2.4vw rgba(0, 0, 0, 0.3), 0 0 calc(16px * var(--gsize, 1)) calc(4px * var(--gsize, 1)) rgba(var(--glow), calc(.6 * var(--gop, 1))); }
}
.card-wrapper .card.flipped .card-back { animation: none; }

@media (prefers-reduced-motion: reduce) { .card-wrapper[data-rarity="R"] .card:not(.flipped) .card-back, .card-wrapper[data-rarity="V"] .card:not(.flipped) .card-back, .card-wrapper[data-rarity="X"] .card:not(.flipped) .card-back, .card-wrapper[data-rarity="S"] .card:not(.flipped) .card-back { animation: none; box-shadow: 1.28vw 1.28vw 2.4vw rgba(0, 0, 0, 0.3), 0 0 calc(12px * var(--gsize, 1)) calc(3px * var(--gsize, 1)) rgba(var(--glow), calc(.45 * var(--gop, 1))); } }

.bonus-label { position: absolute; left: 6%; right: 6%; bottom: 7%; padding: .6em 0; text-align: center; background: rgba(0,0,0,.72); color: #fff; font: bold 5.5cqw/1.2 Arial, Helvetica, sans-serif; letter-spacing: .05em; text-transform: uppercase; border-radius: 1.5cqw; z-index: 4; }

body.opening { --packw: min(35vw, max(220px, calc((100vh - 90px) * .667))); }
@media (max-width: 800px) { body.opening { --packw: min(80vw, max(220px, calc((100vh - 90px) * .667))); } }
.card-wrapper .card-flipper, .card-wrapper .effect-wrapper, .card-wrapper .card { max-width: calc(var(--packw) * .84); }
.card-wrapper .card-flipper { margin-top: calc(10px + var(--packw) * .135); }
.card-wrapper .card { cursor: pointer; }

.vault { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; padding: 6px 0 30px; }
.vault-item { text-decoration: none; color: inherit; display: block; container-type: inline-size; }
.vault-item:hover { text-decoration: none; }
.vault .book { margin: 6px 0 0; padding: 0; text-align: center; font-size: 12px; color: #777; }
.vault .book b { color: #333; }
.vault-empty { border: 2px dashed #bbb; border-radius: 12px; aspect-ratio: 750 / 1150; display: flex; align-items: center; justify-content: center; color: #888; font-weight: bold; font-size: 13px; }
.vault .slab { width: 100%; margin: 0; display: flex; flex-direction: column; box-sizing: border-box; padding: 1.5cqw;
  container-type: inline-size; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0; text-align: left; white-space: nowrap;
  background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.18) 40%, rgba(255,255,255,.35));
  border: 1px solid rgba(255,255,255,.9); border-radius: 1.75cqw;
  box-shadow: 0 3cqw 7cqw rgba(0,0,0,.35), inset 0 0 0 .5cqw rgba(255,255,255,.25), inset 0 0 4cqw rgba(255,255,255,.35); transition: transform .15s; }
.vault-item:hover .slab { transform: translateY(-3px); }
.vault .slab .well .card-flipper { max-width: 100%; aspect-ratio: 750 / 1050; position: relative; perspective: none; }
.vault .slab .card-front { position: absolute; inset: 0; transform: none; pointer-events: auto; }

.vault .well.bare { container-type: inline-size; padding: 6% 4% 2%; }
.vault .well.bare .card-flipper { max-width: 100%; aspect-ratio: 750 / 1050; position: relative; perspective: none; transition: transform .15s; }
.vault-item.bare:hover .card-flipper { transform: translateY(-3px); }
.vault .well.bare .card-front { position: absolute; inset: 0; transform: none; pointer-events: auto; box-shadow: 4px 6px 12px rgba(0,0,0,.25); }
.vault-filters .gap { flex-basis: 100%; height: 0; }
.vault-filters .group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vault-filters .label { min-width: 58px; }
.vault-filters .label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8a7a68; margin-right: 2px; }
.vault-filters select.filter { padding: 5px 10px; background: #eee; }
.vault-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.vault-filters .filter { padding: 6px 12px; border: 0; border-radius: 16px; background: #ddd; color: #333; font: inherit; font-size: 13px; cursor: pointer; }
.vault-filters .filter.active { background: #333; color: #fff; }
.vault-filters .filter b { font-weight: normal; opacity: .7; margin-left: 4px; }

.tooltip { display: none !important; }

.newcard-badge { position: absolute; left: 50%; top: 50%; white-space: nowrap; transform: translate(-50%, -50%) scale(.6); z-index: 30; padding: .45em 1.2em; border-radius: 999px; background: #b00020; color: #fff; font: bold 22px/1 Arial, Helvetica, sans-serif; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0,0,0,.45); opacity: 0; pointer-events: none; }
.effect-wrapper.newcard .newcard-badge { animation: newBadge 1.7s ease-out 1 forwards; }
.newcard-badge.copies { background: #2e7d32; }
.effect-wrapper.newcard:has(.newcard-badge.copies) { animation: none; }
@keyframes newBadge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 20% { transform: translate(-50%, -50%) scale(1); } 65% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1) translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .effect-wrapper.newcard .newcard-badge { animation: newBadgeStill 1.7s linear 1 forwards; } @keyframes newBadgeStill { 0%, 70% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } } }

.copy-wrapper .tray { width: max(var(--cardw), 300px); margin: 14px auto 0; box-sizing: border-box; background: #2a1f1f; border-radius: 12px; padding: 10px 12px 12px;
  box-shadow: 0 8px 20px rgba(60,40,20,.3), inset 0 1px 0 rgba(255,255,255,.08); font-family: Arial, Helvetica, sans-serif; }
.tray .nav { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 10px; }
.tray .nav button { white-space: nowrap; background: none; border: 0; color: #bbb; font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.tray .nav button:hover { background: rgba(255,255,255,.1); color: #fff; }
.tray .nav button[disabled] { color: #555; cursor: default; background: none; }
.tray .nav .viewall-button { color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; }
.tray .nav .viewall-button:hover { background: rgba(255,255,255,.22); }
.tray .nav .viewall-button .sep { color: #bbb; font-weight: bold; padding: 0 2px; }
.tray .nav .gridglyph { width: 12px; height: 12px; }
.tray .acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tray .act { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.06); border-radius: 9px; color: #eee; padding: 9px 6px 8px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit; }
.tray .act:hover { background: rgba(255,255,255,.15); }
.tray .act svg { width: 26px; height: 34px; display: block; color: #eee; }
.tray .act .l { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #ccc; }
.tray .act .n { font-size: 15px; font-weight: bold; line-height: 1; }
.tray .act.gold { background: linear-gradient(180deg, #e2c25a, #b8941f); border-color: #f0dc8a; color: #241c00; }
.tray .act.gold:hover { background: linear-gradient(180deg, #f0d370, #c7a12a); }
.tray .act.gold svg { color: #2a2000; } .tray .act.gold .l { color: #3d3000; }
.tray .act.on { background: rgba(120,200,140,.14); border-color: rgba(120,200,140,.5); cursor: default; opacity: 1; }
.tray .act.on svg, .tray .act.on .n { color: #9fe0b0; }
.tray .act.out { opacity: .75; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.05); color: #ddd; }
.tray .act.out svg { color: #888; } .tray .act.out .l { color: #aaa; }
.tray .act.out .n { color: #f0b84a; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tray .acts .grading-status { grid-column: 1 / -1; }
.tray .donate { display: flex; align-items: center; gap: 10px; padding: 10px 4px 0; }
.tray .donate .book { margin-left: auto; }
.register-button.donate-bin { width: 34px; height: 34px; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: #999; cursor: pointer; font-size: 0; }
.donate-bin:hover { background: rgba(255,255,255,.08); color: #d98b8b; }
.donate-bin svg { width: 100%; height: 100%; display: block; }
.trade-button, .trade-button:visited { padding: 10px 20px; font-size: 16px; border-radius: 5px; background: #177c28; color: #fff; text-decoration: none; display: inline-block; }
.tray .acts .trade-button { grid-column: 2; justify-self: center; margin-top: 4px; }
.trade-button:hover { background: #12621f; text-decoration: none; }
.tray .donate:empty { display: none; }
.tray .book { font-size: 12px; color: #999; margin-right: 10px; }
.tray .book b { color: #ddd; }
.tray .forsale { font-size: 12px; color: #ffd466; margin: 0 8px 0 auto; } .tray .forsale b { color: #fff; } .tray .unlist-form { display: inline; margin: 0; }
@media (max-width: 760px) { .tray .donate:has(.forsale) { flex-wrap: wrap; justify-content: center; row-gap: 8px; } .tray .forsale { flex-basis: 100%; order: -1; text-align: center; margin: 0; } }
.tray .sell-button[disabled] { opacity: .45; cursor: default; }
.tray .donate-button { background: none; border: 0; padding: 0; color: #d98b8b; font-size: 12px; cursor: pointer; opacity: .85; }
.tray .donate-button:hover { text-decoration: underline; opacity: 1; }
.copy-wrapper { --cardw: min(35vw, max(220px, calc((100vh - 290px) * .714))); } .copy-wrapper.cardpage { padding-top: 18px; }
@media (max-width: 800px) { .copy-wrapper { --cardw: min(80vw, max(220px, calc((100vh - 290px) * .714))); } }

.copy-wrapper .card { max-width: var(--cardw); }

.copy-wrapper .card-front { box-shadow: 0 18px 40px rgba(60,40,20,.28), 0 2px 6px rgba(60,40,20,.15); }

.trade-button.small { padding: 5px 12px; font-size: 13px; }
.trade-button.request { grid-column: 1 / -1; justify-self: center; }
.trade-button.accept { background: #1f7a2e; }
.trade-button.counter { background: #6F4E37; }
.table-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.table-head h3 { margin: 0; flex: 1 1 auto; }
.table-head form.inline { display: inline; }
.table-head select { font: inherit; padding: 4px 8px; }
.swap-table, .swap-browse { display: flex; gap: 14px; align-items: flex-start; margin: 8px 10px 14px; }
.swap-table { background: #2a1f1f; border-radius: 14px; padding: 12px; min-height: 120px; }
.swap-table h3, .swap-browse h3 { text-align: center; margin: 0 0 8px; font-size: 15px; }
.swap-table h3 { color: #e8d5b7; }
.swap-table .empty { color: #a99; text-align: center; padding: 30px 8px; }
.tside { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tmid { flex: 0 0 40px; text-align: center; font-size: 30px; color: #8a7a68; padding-top: 110px; }
.tslot { text-align: center; }
.tslot form.inline, .tslot .trade-button { margin-top: 6px; }
.tcard .card-flipper { width: min(var(--cardw, 300px), 100%); margin: 0 auto; }
.tcard p { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #ddd; }
.swap-browse .tcard p { color: #444; }
.tcard .spare { color: #1f7a2e; font-weight: bold; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-left: 4px; }
.swap-table .tcard .spare { color: #9fe0b0; }
.tcard.gone p { color: #999; }
.tslot button.cancel, .trade-terms .acts button.cancel, .table-head button.cancel { background: none; border: 0; font: inherit; color: #a99; cursor: pointer; padding: 6px; }
.tslot button.cancel:hover, .trade-terms .acts button.cancel:hover, .table-head button.cancel:hover { text-decoration: underline; }
.trade-terms .acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0 6px; }
.trade-terms .acts form.inline, .dials form.inline { display: inline; }
.trade-terms .acts .cancel, .dials .cancel, .notice .cancel { color: #8a7a68; text-decoration: none; padding: 8px 6px; }
.dials label { margin-right: 14px; font-size: 14px; }
.dials h3 { margin: 10px 0 4px; }
@media (max-width: 700px) { .swap-table, .swap-browse { flex-direction: column; } .tmid { padding: 0; transform: rotate(90deg); } }

.tcard { position: relative; }
.tcard a.cardlink { display: block; text-decoration: none; }
.tcard .copies-badge { position: absolute; top: -0.6em; right: 8%; min-width: 2.2em; height: 2.2em; line-height: 2.2em; padding: 0 0.4em; box-sizing: border-box; border-radius: 1.1em; background: #b3261e; color: #fff; font-size: 15px; font-weight: bold; text-align: center; box-shadow: 0 0.15em 0.4em rgba(0,0,0,.4); z-index: 20; }
.tcard .held { display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 9px; background: #1f7a2e; color: #fff; font-size: 12px; }
.tcard .held.only { background: #ffe58a; color: #5a4300; }
.tcard .held.new { background: #ffd23f; color: #3C2F2F; }
.tcard .held.mine { background: #9a9a9a; color: #fff; }
#copies-grid .pickbar .select-bare { font-size: 13px; color: #3C2F2F; margin-right: 10px; white-space: nowrap; }

.copy-wrapper.cardpage .about { background: #fff; border-radius: 12px; padding: 12px 16px; margin: 0 auto 12px; width: max(var(--cardw), 300px); box-sizing: border-box; text-align: left; font-size: 14px; color: #3C2F2F; box-shadow: 4px 6px 12px rgba(0,0,0,.12); }
.copy-wrapper.cardpage .about .story h3 { margin: 0 0 6px; font-size: 17px; } .copy-wrapper.cardpage .about .story p { margin: 0 0 8px; line-height: 1.45; }
.copy-wrapper.cardpage .about .facts { list-style: none; margin: 0; padding: 0; } .copy-wrapper.cardpage .about .facts li { padding: 4px 0; border-top: 1px solid #eee; } .copy-wrapper.cardpage .about .facts li:first-child { border-top: 0; }
.copy-wrapper.cardpage .about .story + .facts { margin-top: 8px; border-top: 2px solid #eee; padding-top: 4px; }
.noted { color: #c9a227; font-size: 12px; }
@media (max-width: 899px) { .copy-wrapper.cardpage { --cardw: min(80vw, max(220px, calc((100vh - 290px) * .714))); } .copy-wrapper.cardpage .about { margin-top: 14px; } }
.copy-wrapper.cardpage .effect-wrapper { max-width: var(--cardw); }
@media (min-width: 900px) {

  .copy-wrapper.cardpage { --cardw: min(calc(100vw - 580px), max(240px, calc((100vh - 290px) * .714))); display: grid; grid-template-columns: auto 340px; gap: 22px; align-items: start; justify-content: center; }
  .copy-wrapper.cardpage .main { grid-column: 1; }
  .copy-wrapper.cardpage .side { grid-column: 2; }
  .copy-wrapper.cardpage .about { width: 100%; margin: 0; }
  body:has(.copy-wrapper.cardpage) h1:has(.crumbs) { display: none; }
  .copy-wrapper.cardpage { padding-top: 6px; }
}
.copy-wrapper.cardpage .about .trail { margin: 0 0 8px; font-size: 12px; color: #999; } .copy-wrapper.cardpage .about .trail a { color: #777; text-decoration: none; } .copy-wrapper.cardpage .about .trail a:hover { text-decoration: underline; }
.copy-wrapper.cardpage .about .histhead { margin: 10px 0 2px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8a7a68; }
.copy-wrapper.cardpage .about .hist { list-style: none; margin: 0; padding: 0; font-size: 12px; color: #555; } .copy-wrapper.cardpage .about .hist li { padding: 2px 0; border-top: 1px dotted #e4e0da; }
.tray .acts .donate-bin { grid-column: 1; justify-self: start; align-self: center; margin-top: 4px; }
.copy-wrapper.cardpage .about { position: relative; }
.copy-wrapper.cardpage .about .corner { position: absolute; top: 8px; right: 10px; } .copy-wrapper.cardpage .about .corner .fav-form { margin: 0; }
.copy-wrapper.cardpage .about .corner .fav-star { background: none; border: 0; font-size: 24px; line-height: 1; color: #c9a227; cursor: pointer; padding: 0 2px; }
.copy-wrapper.cardpage .about table.facts { width: 100%; border-collapse: collapse; margin: 0 0 6px; font-size: 14px; }
.copy-wrapper.cardpage .about table.facts th { text-align: left; font-weight: normal; color: #8a7a68; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px 5px 0; width: 84px; vertical-align: middle; border-top: 1px solid #eee; }
.copy-wrapper.cardpage .about table.facts td { padding: 5px 0; border-top: 1px solid #eee; color: #3C2F2F; } .copy-wrapper.cardpage .about table.facts tr:first-child th, .copy-wrapper.cardpage .about table.facts tr:first-child td { border-top: 0; }
.copy-wrapper.cardpage .about .story { margin-top: 10px; padding-top: 8px; border-top: 2px solid #eee; }
@media (min-width: 900px) { .tray .donate { justify-content: center; } }
.tray .acts .puzzle-button { grid-column: 3; justify-self: center; margin-top: 4px; } .tray .acts .puzzle-button.on { background: #6F4E37; }

@keyframes ripple {
  0% { background-position: 0 0, 0 0, 0% 0%; }
  50% { background-position: 18px 14px, -14px 11px, 100% 100%; }
  100% { background-position: 0 0, 0 0, 0% 0%; }
}

.card-wrapper[data-complete] .card-flipper { position: relative; }
.complete-burst { position: absolute; left: 50%; top: calc(100% + 36px); width: 0; height: 0; z-index: 0; pointer-events: none; }
.complete-burst::before { content: ""; position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,90,.9), rgba(255,214,90,0) 70%); animation: cburst-glow 1.6s ease-out forwards; }
.complete-burst span { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 2px; background: #f2c230; box-shadow: 0 0 6px rgba(255,200,40,.8); transform: rotate(var(--a)) translateY(0); animation: cburst-fly 1.4s cubic-bezier(.15,.7,.3,1) forwards; }
.complete-burst span:nth-child(3n) { background: #fff3b0; } .complete-burst span:nth-child(4n) { background: #e8bd72; width: 7px; height: 14px; }
.complete-burst.big::before { left: -160px; top: -160px; width: 320px; height: 320px; }
.complete-burst.big span { animation-duration: 1.9s; }
@keyframes cburst-fly { 0% { transform: rotate(var(--a)) translateY(0) scale(.6); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(-1 * var(--d) * 3.2)) scale(1); opacity: 0; } }
@keyframes cburst-glow { 0% { transform: scale(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.complete-banner { position: absolute; left: -4%; right: -4%; top: calc(100% + 12px); z-index: 20; pointer-events: none; text-align: center; padding: 10px 8px 9px; border-radius: 8px;
  background: linear-gradient(180deg, #ffe48a, #f2c230 55%, #c48f0a); color: #3b2600; box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.55); animation: cbanner-in .55s cubic-bezier(.2,1.4,.4,1) both; }
.complete-banner b { display: block; font-size: 22px; letter-spacing: .08em; text-transform: uppercase; } .complete-banner small { display: block; font-size: 14px; font-weight: bold; color: #4a3000; margin-top: 2px; }
.complete-banner.big b { font-size: 28px; }
@keyframes cbanner-in { from { transform: scale(.4) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .complete-burst { display: none; } .complete-banner { animation: none; } }
.copy-wrapper.cardpage .about .admin-tools { margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed #d9d2c7; font-size: 12px; } .copy-wrapper.cardpage .about .admin-tools a { color: #b23a2b; }
.vault .book .gobtn { display: inline-block; cursor: pointer; }
.vault-filters .showing { font-weight: bold; color: #3C2F2F; align-self: center; }
.vault-filters .filter:disabled { opacity: .35; cursor: default; }
.tray .acts .trade-button.sell-button { grid-column: 3; justify-self: start; }
.vault.compact { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.vault.compact .book, .vault.compact .plate .reg, .vault.compact .plate .mint { display: none; }
.vault.compact .plate { font-size: 9px; padding: 3px 4px; }
.swap-table h3 a { color: #e8d5b7; text-decoration: underline; }
.swap-table .tcard p, .swap-table .tcard p a, .swap-table .tslot .forsale, .swap-table .tmid { color: #e8d5b7; }
.swap-table .tcard .held { color: #c9b99f; }
.swap-table { background: linear-gradient(180deg, #6e4b2a, #4c3119); border-radius: 18px; padding: 16px; gap: 16px; box-shadow: inset 0 0 0 3px #3a2412, inset 0 2px 18px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.25); }
.swap-table .tside { flex: 1 1 0; min-width: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 10px; padding: 12px 10px 16px; border-radius: 12px; background-color: #2f7a4e; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.5px), radial-gradient(rgba(0,0,0,.12) 1px, transparent 1.5px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px; box-shadow: inset 0 0 0 2px #245f3c, inset 0 2px 12px rgba(0,0,0,.35); }
.swap-table .tside h3 { flex-basis: 100%; margin: -2px 0 6px; padding: 5px 12px; border-radius: 6px; background: linear-gradient(#e6c966, #b8941f); color: #2b1d08; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 1px 2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.55); }
.swap-table .tside h3 a { color: #2b1d08; text-decoration: underline; }
.swap-table .tslot { flex: 0 1 150px; }
.swap-table .tcard p, .swap-table .tcard p a, .swap-table .tslot .forsale { color: #f3ead6; }
.swap-table .empty { color: #cfe6d6; flex-basis: 100%; }
.swap-table .tmid { color: #e6c966; text-shadow: 0 1px 2px rgba(0,0,0,.6); padding-top: 120px; }
.trade-terms.pcard { background: #fffdf6; border: 1px solid #e3d9c6; border-top: 6px solid #b8941f; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.trade-terms h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8a7a68; margin: 12px 0 4px; }
.trade-terms h3:first-child { margin-top: 0; }
@media (max-width: 700px) { .swap-table { padding: 12px; gap: 10px; } .swap-table .tmid { padding: 0; transform: rotate(90deg); } .swap-table .tslot { flex-basis: 128px; } }
.swap-table .tslot { flex: 0 0 140px; width: 140px; --cardw: 140px; } .swap-table .tcard .slab:not(.effect-layer), .swap-browse .tcard .slab:not(.effect-layer) { width: 100%; } /* a graded copy fits its slot (Don, 2026-10-20) */
.swap-table .tcard p { text-align: left; }
@media (max-width: 700px) { .swap-table .tslot { flex-basis: 128px; width: 128px; --cardw: 128px; } }
.trade-terms .acts { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin: 14px 0 6px; }
.trade-terms .acts form.inline { display: inline; margin: 0; }
@media (max-width: 700px) { .swap-table .tmid { align-self: center; padding: 4px 0; } }
.tcard .newto { position: absolute; left: 8%; top: 4px; padding: 2px 7px; border-radius: 999px; background: #ffd23f; color: #3C2F2F; font: bold 10px/1.4 Arial, Helvetica, sans-serif; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0,0,0,.3); z-index: 2; }
.tcard .warn { color: #b3261e; font-weight: 700; }
.swap-table .tcard .warn { color: #ffb3a7; }
.tcard .copies-badge.spare { background: #1f7a2e; }
.tcard .copies-badge.only { background: #b3261e; }
.swap-table .tcard .copies-badge, .swap-browse .tcard .copies-badge { right: -4px; }
.swap-table .tcard .newto, .swap-browse .tcard .newto { left: -4px; }
#review .card-wrapper .card:not(a .card) { cursor: default; }
#review .card-wrapper a.cardlink .card { cursor: pointer; }
#review .card-wrapper:not(:has(a.cardlink)) .card, #review .card-wrapper:not(:has(a.cardlink)) .card-image { cursor: default; }
.copy-wrapper.cardpage .tray .book, .copy-wrapper.cardpage .tray .fav-form, .copy-wrapper.cardpage .tray .listwrap { display: none; }