body {
    background-image: url("background.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}*{box-sizing:border-box}body{margin:0;background:#f5f3ef;color:#24211e;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.hidden{display:none!important}#loading{min-height:100vh;display:grid;place-items:center}header{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:24px 5vw;background:#f5f3eff5;border-bottom:1px solid #ddd7cf}h1{margin:4px 0;font:700 30px Georgia,serif}.eyebrow{font-size:11px;letter-spacing:2px;color:#887e72}button{border:0;border-radius:11px;padding:11px 15px;font-weight:650;cursor:pointer;background:#e7e2db;margin-left:7px}header button:last-child,form button:last-child{background:#292521;color:white}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:28px 5vw 0}.stats div{background:white;border:1px solid #e0dbd4;border-radius:16px;padding:18px}.stats b{display:block;font:700 28px Georgia,serif}.toolbar{display:flex;gap:10px;padding:26px 5vw 12px}.toolbar input{flex:1}.toolbar input,.toolbar select,input,textarea{border:1px solid #d8d0c6;border-radius:10px;padding:11px;background:white;font:inherit}.chips{padding:8px 5vw 24px}.chips button.active{background:#292521;color:white}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;padding:0 5vw 50px}.card{background:white;border:1px solid #ded8d0;border-radius:17px;overflow:hidden;cursor:pointer;position:relative}.card img,.placeholder{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:#eee}.placeholder{display:grid;place-items:center;font-size:48px}.meta{padding:12px}.num{font-size:11px;color:#978d82}.name{font-weight:700}.sub{font-size:12px;color:#81776d}.star{position:absolute;right:9px;top:9px;background:white;border-radius:50%;padding:6px}.empty{text-align:center;padding:50px;color:#81776d}.authbox{width:min(430px,92vw);margin:12vh auto;background:white;padding:32px;border-radius:22px;box-shadow:0 20px 60px #0001}.authbox form{display:grid;gap:12px}.authbox button{margin:0;background:#292521;color:white}.authbox input{width:100%}dialog{width:min(760px,92vw);border:0;border-radius:20px;padding:0;box-shadow:0 30px 80px #0005}dialog::backdrop{background:#0007}form{padding:25px}.modalhead{display:flex;justify-content:space-between;align-items:center}.modalhead h2{font:700 25px Georgia,serif}.modalhead button{font-size:28px;background:none}.photo{display:flex;gap:15px;align-items:center;margin:15px 0}.photo>div{width:105px;height:145px;background:#eee;border-radius:10px;display:grid;place-items:center;text-align:center;overflow:hidden}.photo img{width:100%;height:100%;object-fit:cover}.photo small{display:block}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:650}.wide{grid-column:1/-1}.checks{margin:15px 0}.actions{display:flex;align-items:center;margin-top:15px}.actions span{flex:1}.danger{background:#ead4d0;color:#7b2018}#authError,#formError{color:#9b2b20;margin-top:8px}@media(max-width:700px){header{flex-direction:column;align-items:flex-start;gap:12px}.stats{grid-template-columns:1fr 1fr}.toolbar{flex-direction:column}.grid{grid-template-columns:1fr}.wide{grid-column:auto}.gallery{grid-template-columns:repeat(2,1fr)}}
.multiselect{position:relative;width:100%}
.multiselect>button{width:100%;margin:0;text-align:left;background:white;border:1px solid #d8d0c6;color:#24211e}
.color-options{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:50;background:white;border:1px solid #d8d0c6;border-radius:10px;padding:8px;box-shadow:0 15px 35px #0002;max-height:220px;overflow:auto}
.color-option{display:block!important;padding:7px 8px;font-size:13px!important;font-weight:500!important;cursor:pointer}
.color-option:hover{background:#f5f3ef}
.color-option input{margin-right:7px;padding:0}



html, body {
    min-height: 100%;
}

body {
    background-image: url("background.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}


/* ================================
   PREMIUM JOKER CARD DESIGN
   ================================ */

.card {
  background: #fff;
  border: 1px solid #ddd6ce;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  position: relative;

  box-shadow: 0 4px 12px rgba(0,0,0,0.06);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* Card hover */
.card:hover {
  transform: translateY(-7px);
  box-shadow: 0 16px 35px rgba(0,0,0,0.15);
  border-color: #b9afa3;
}

/* Joker image */
.card img,
.card .placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  background: #eee;

  transition: transform 0.35s ease;
}

/* Slight image zoom */
.card:hover img {
  transform: scale(1.035);
}

/* Image wrapper effect */
.card {
  isolation: isolate;
}

.card img {
  position: relative;
  z-index: 0;
}

/* Information underneath card */
.meta {
  padding: 14px 15px 16px;
  background: #fff;
}

/* Card number */
.num {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #9a9187;
  margin-bottom: 4px;
}

/* Joker name */
.name {
  font-size: 15px;
  font-weight: 750;
  color: #26221f;
  line-height: 1.25;
  margin-bottom: 4px;
}

/* Brand / deck information */
.sub {
  font-size: 12px;
  color: #81776d;
  line-height: 1.4;
}

/* Favorite button */
.star {
  position: absolute;
  right: 10px;
  top: 10px;

  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  padding: 0;

  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 50%;

  box-shadow: 0 4px 12px rgba(0,0,0,0.15);

  font-size: 17px;

  z-index: 2;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.star:hover {
  transform: scale(1.12);
  background: white;
}

/* Gallery spacing */
.gallery {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(190px, 1fr));

  gap: 22px;

  padding: 5px 5vw 60px;
}

/* Empty placeholder */
.placeholder {
  display: grid;
  place-items: center;
  font-size: 48px;
  color: #aaa;
}

/* Mobile cards */
@media (max-width: 700px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-left: 4vw;
    padding-right: 4vw;
  }

  .meta {
    padding: 11px 12px 13px;
  }

  .name {
    font-size: 13px;
  }

  .sub {
    font-size: 11px;
  }

  .star {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }
}