/* =========================
   Character sheet collage background
   ========================= */

.cc-page{
  position: relative; /* needed for absolute background */
  overflow: hidden;   /* keeps slices contained */
}

/* Background layer */
.cc-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above background */
.cc-panel{
  position: relative;
  z-index: 1;
}

/* Shared slice styling */
.cc-slice{
  position: absolute;
  border: 1px solid rgba(102, 208, 237, 0.20);
  box-shadow:
    0 0 16px rgba(102, 208, 237, 0.10),
    0 0 40px rgba(102, 208, 237, 0.06);

  /* The “chop”: each slice shows a different part of the same image */
  background-image: image-set(
    url("../assets/images/Condensed_Character_Sheet_for_Website_Dice.avif") type("image/avif"),
    url("../assets/images/Condensed_Character_Sheet_for_Website_Dice.webp") type("image/webp")
  );
  background-repeat: no-repeat;

  /* Maintain aspect ratio: width scaled, height auto */
  background-size: 980px auto;

  /* Vibe */
  opacity: 0.22;
  filter: blur(0.2px) brightness(1.05) contrast(1.08);
  transform-origin: center;
}

/* Optional: soft vignette wash over everything */
.cc-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(0,0,0,0.20), rgba(0,0,0,0.78));
}

/* More separated / spread layout */

.cc-slice.s1{
  width: 300px; height: 190px;
  left: -80px; top: 40px;
  transform: rotate(-7deg);
  background-position: 10% 12%;
}

.cc-slice.s2{
  width: 320px; height: 200px;
  right: -90px; top: 30px;
  transform: rotate(8deg);
  background-position: 78% 10%;
}

.cc-slice.s3{
  width: 380px; height: 240px;
  left: -130px; bottom: 30px;
  transform: rotate(5deg);
  background-position: 18% 78%;
}

.cc-slice.s4{
  width: 380px; height: 240px;
  right: -140px; bottom: 10px;
  transform: rotate(-6deg);
  background-position: 82% 82%;
}

/* Move center pieces farther apart vertically */

.cc-slice.s5{
  width: 420px; height: 180px;
  left: 50%;
  top: 10px;
  transform: translateX(-50%) rotate(1deg);
  background-position: 52% 22%;
  opacity: 0.14;
}

.cc-slice.s6{
  width: 520px; height: 200px;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%) rotate(-1deg);
  background-position: 50% 62%;
  opacity: 0.10;
}

/* Character Creation page */

.cc-page{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 18px 10px 30px;
}

.cc-panel{
  width: min(1040px, 100%);
  padding: 18px 16px 20px;
}

.cc-title{
  margin: 0;
  text-align: center;
  font-family: "AstroSpace-0Wl3o", system-ui, sans-serif;
  font-size: 26px;
  letter-spacing: .10em;
  color: rgb(102, 208, 237);
  text-shadow:
    0 0 6px rgba(102, 208, 237, 0.45),
    0 0 14px rgba(102, 208, 237, 0.25);
}

.cc-subtitle{
  margin: 12px auto 18px;
  text-align: center;
  max-width: 820px;
  font-size: 14px;
  letter-spacing: .06em;
  color: rgba(175, 235, 255, 0.92);
}

.cc-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.cc-card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;

  padding: 14px 14px 12px;
  text-decoration: none;
  border: 1px solid rgba(102, 208, 237, 0.55);
  background: rgba(0, 0, 0, 0.22);

  box-shadow:
    0 0 10px rgba(102, 208, 237, 0.18),
    0 0 22px rgba(102, 208, 237, 0.10);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease;
}

.cc-card:hover{
  border-color: rgba(102, 208, 237, 0.95);
  box-shadow:
    0 0 12px rgba(102, 208, 237, 0.34),
    0 0 30px rgba(102, 208, 237, 0.20);
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.cc-card-title{
  font-size: 15px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgb(102, 208, 237);
  text-shadow:
    0 0 6px rgba(102, 208, 237, 0.40);
}

.cc-card-desc{
  font-size: 13px;
  line-height: 1.35;
  color: rgba(225, 245, 255, 0.92);
}

.cc-card-cta{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(102, 208, 237, 0.95);
  opacity: 0.95;
}

.cc-note{
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(175, 235, 255, 0.72);
}

/* =========================
   SCATTERED CARD THUMBNAILS
   ========================= */

.cc-page { position: relative; }

.cc-card-scatter{
  position: absolute;
  inset: 0;
  z-index: 2;            /* above cc-bg slices, below the panel */
  pointer-events: none;
  overflow: hidden;
}

.cc-card-scatter .cc-card-float{
  position: absolute;
  width: 110px;          /* tweak */
  height: auto;
  opacity: 0.28;         /* tweak */
  filter: blur(0px) brightness(1.05);
  transform-origin: center center;
}

@media (max-width: 980px){
  .cc-grid{
    grid-template-columns: 1fr;
  }
  .cc-panel{
    padding: 14px 12px 18px;
  }
}