body { 
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; 
    margin: 0;
    background: #fdfcf6; 
    /* background: #c2ddd6;  */
    color: #222; 
}
.topbar { 
    position: sticky; 
    top: 0; 
    background: #222; 
    color: #fff; 
    padding: 10px 14px; 
    display: flex; 
    gap: 16px; 
    align-items: center; 
    z-index: 10; 
    width: 100%;
    justify-content: center;
}
.brand { 
    color: #fff; 
    text-decoration: none; 
    font-weight: 700; 
}
.nav { 
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap;
}
.nav-link { 
    color: #bbb; 
    text-decoration: none; 
    padding: 6px 10px; 
    border-radius: 10px; 
}
.nav-link.active { 
    color: #111; 
    background: #fff; 
}
.container { 
    padding: 14px; 
    max-width: 1100px; 
    margin: 0 auto; 
}
.toolbar { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 14px; 
    flex-wrap: wrap; 
}
#q { 
    flex: 1; 
    min-width: 220px; 
    padding: 10px; 
    border-radius: 10px; 
    border: 1px solid #ddd; 
}
#sort { 
    padding: 10px; 
    border-radius: 10px; 
    border: 1px solid #ddd; 
    background: #fff; 
}
.grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 12px; 
}
.card { 
    position: relative;
    overflow: hidden; 
    background: #fdfdf3;
    border: 4px solid #fdfae277;
    border-radius: 32px;
    box-shadow: 
    0px 0px 10px rgba(0, 0, 0, 0.452),
        inset 0px 0px 2px #c2c2bb7e;
}
.card.sold {
    opacity: .55;
}
.badge-sold {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background-color: #222;
    border: 2px solid #16161667;
    box-shadow: inset 0px 0px 3px #000000;
    color: #fff;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    z-index: 2;
}
.card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    justify-content: space-between;
}
.card-img { 
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover; 
    display: block;
    box-shadow: inset 0px 0px 70px #c9c6b377;
}
.card-img:hover {
    cursor: pointer;
}
.card-img.placeholder { 
    background: transparent; 
}
.card-body { 
    padding: 12px; 
}
.card-title { 
    margin: 0 0 8px 0; 
    font-size: 16px; 
}
.card-meta { 
    display: flex; 
    justify-content: space-between; 
    gap: 10px; 
    align-items: center; 
    margin-bottom: 8px; 
}
.tag { 
    font-size: 12px; 
    padding: 4px 8px; 
    background: #c7e2bc; 
    border-radius: 999px; 
    text-transform: uppercase; 
    letter-spacing: .04em; 
}
.price { 
    font-weight: 700; 
}
.card-desc { 
    margin: 8px 0;
    opacity: .9; 
}
.card-cond { 
    margin: 0; 
    opacity: .7; 
    font-size: 13px; 
}
.card-cta { 
    display: inline-block; 
    margin-top: 10px; 
    text-decoration: none; 
    padding: 8px 10px; 
    border-radius: 48px; 
    color: #222;
    font-weight: 700;
}
.card-cta:hover { 
    cursor: pointer;
}
.cta-discord {
    background-color: #5865F2;
    border: 3px solid #4650b9; 
    color: white;
}
.cta-discord:hover {
    background-color: #4650b9;
}
.cta-email {
    background-color: #FC6722;
    border: 3px solid #df531b; 
    color: white;
}
.cta-email:hover {
    background-color: #df531b;
}
.cta-link {
    background-color: #e6e6dc;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.178);
}
.empty { 
    opacity: .7; 
}
.footer { 
    margin-top: 18px; 
    opacity: .7; 
}
code { 
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; 
}


.card-img-wrap { 
    position: relative; 
}

.card-img-wrap::after{
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18Zm0-2a6 6 0 1 0 0-12a6 6 0 0 0 0 12Zm8.707 4.707-4.1-4.1 1.414-1.414 4.1 4.1-1.414 1.414Z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18Zm0-2a6 6 0 1 0 0-12a6 6 0 0 0 0 12Zm8.707 4.707-4.1-4.1 1.414-1.414 4.1 4.1-1.414 1.414Z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}


.card-img-wrap:hover::after{
  opacity: 1;
  transform: scale(1);
}

.card-img { 
    transition: transform .18s ease; 
}
.card-img-wrap:hover .card-img { 
    transform: scale(2); 
    box-shadow: none;
}

.count { 
    margin-left:auto; 
    opacity:.7; 
    font-size: 13px; 
}

@media (hover: none) {
  .card-img-wrap::after { 
        opacity:1; 
        transform: scale(1); 
    }
}


/* --- MODAL --- */
.modal { 
    position: fixed; 
    inset: 0;
    z-index: 999; 
}
.modal[hidden] { 
    display: none; 
}
.modal-backdrop { 
    position: absolute; 
    inset:0; 
    background: rgba(27, 27, 27, 0.65); 
}

.modal-dialog {
    position: relative;
    max-width: 980px;
    margin: 6vh auto;
    background: #fdfcf6;
    overflow: hidden;
    width: calc(100% - 20px);

    border: 4px solid #fdfae277;
    border-radius: 32px;
    box-shadow: 
    0px 0px 10px rgba(0, 0, 0, 0.452),
        inset 0px 0px 2px #c2c2bb7e;
}

.modal-close {
    position: absolute;
    top: 10px; 
    right: 10px;
    width: 36px; 
    height: 36px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    background-color: #e6e6dc;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.178);
}

.modal-head { 
    padding: 14px 14px 0 14px; 
}
.modal-title { 
    margin: 0; 
    font-size: 18px; 
}
.modal-meta { 
    margin: 6px 0 0 0; 
    opacity:.7; 
    font-size: 13px; 
}
.modal-body { 
    display: grid; 
    grid-template-columns: 1fr 220px; 
    gap: 12px; 
    padding: 14px; 
}
.modal-main { 
    background: #f3f3f3; 
    border-radius: 24px; 
    overflow: hidden; 
    box-shadow:    inset 0px 0px 10px rgba(0, 0, 0, 0.452),
        inset 0px 0px 2px #c2c2bb7e;;
}
.modal-main-img { 
    width: 100%; 
    height: 520px; 
    object-fit: contain; 
    display: block; 
    background: #f3f1e7;
    box-shadow: inset 0px 0px 30px #00000063;
}
.modal-thumbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-content: start;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.thumb {
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    padding: 0;
    cursor: pointer;
}
.thumb img { 
    width: 100%; 
    height: 90px; 
    object-fit: cover; 
    display: block; 
}
.thumb.active { 
    border-color:#222; 
}

@media (max-width: 820px) {
  .modal-body { 
    grid-template-columns: 1fr; 
}
  .modal-main-img { 
    height: 46vh; 
}
  .modal-thumbs { 
    grid-template-columns: repeat(4, 1fr); 
    max-height: none; 
}
  .thumb img { 
    height: 64px; 
    }
}

.modal-main:hover .modal-main-img {
  transform: scale(1.8);
  cursor: zoom-in;
}

@media (hover:none) {
  .modal-main:hover .modal-main-img { 
    transform:none; 
    }
}