/* style-cardbacks_public.css - 23 card back designs.
   Scoped to .card-back[data-back="X"] so each card can show a different design.
   Base font-size 72px = card width, so em units scale with the card.
   Revealed cards keep the current face CSS (excluded via :not(.revealed)).
   Overrides the base .card-back::before shine with background: none; designs
   that need ::before (moon mountains, classic-red ellipse, ivory border) set
   it explicitly per design. */

#game-stage {
  --star: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  --serif-cb: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
}

.card-back { font-size: 72px; }
.card-back.shop-cb-preview { font-size: 60px; }
.card-back.shop-cb-equipped { font-size: 160px; }

.card-back[data-back]:not(.revealed) {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--b2, #ffffff);
}
.card-back[data-back]:not(.revealed)::before,
.card-back[data-back]:not(.revealed)::after {
  content: "";
  position: absolute;
}
.card-back[data-back]:not(.revealed)::before {
  background: none;
  border-radius: inherit;
  inset: 0;
}
.card-back[data-back]:not(.revealed)::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.4em;
  aspect-ratio: 1;
}

/* 1. shuriken */
.card-back[data-back="shuriken"]:not(.revealed) {
  --b2: #1a2140;
  background:
    radial-gradient(circle at 100% 50%, transparent 20%, rgba(201,164,92,.34) 21% 34%, transparent 35%) 0 0 / 0.3em 0.4em,
    radial-gradient(circle at 0 50%, transparent 20%, rgba(201,164,92,.34) 21% 34%, transparent 35%) 0 -0.2em / 0.3em 0.4em,
    linear-gradient(160deg, #2a3862, #141a33) !important;
}
.card-back[data-back="shuriken"]:not(.revealed)::after {
  clip-path: var(--star);
  background: radial-gradient(circle, #141a33 0 13%, #c8372d 14%);
}

/* 2. asanoha */
.card-back[data-back="asanoha"]:not(.revealed) {
  --b2: #0f2a20;
  background:
    repeating-linear-gradient(60deg, rgba(216,194,122,.42) 0 1px, transparent 1px 0.26em),
    repeating-linear-gradient(-60deg, rgba(216,194,122,.42) 0 1px, transparent 1px 0.26em),
    repeating-linear-gradient(0deg, rgba(216,194,122,.42) 0 1px, transparent 1px 0.26em),
    linear-gradient(160deg, #1f4a3a, #0f2a20) !important;
}
.card-back[data-back="asanoha"]:not(.revealed)::after {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  background: radial-gradient(circle, #0f2a20 0 16%, #d8c27a 17%);
}

/* 3. sakura */
.card-back[data-back="sakura"]:not(.revealed) {
  --b2: #130b16;
  background:
    radial-gradient(circle, rgba(242,169,187,.55) 0 0.022em, transparent 0.03em) 0 0 / 0.2em 0.2em,
    radial-gradient(circle, rgba(242,169,187,.3) 0 0.02em, transparent 0.03em) 0.1em 0.1em / 0.2em 0.2em,
    linear-gradient(160deg, #2f1c33, #130b16) !important;
}
.card-back[data-back="sakura"]:not(.revealed)::after {
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: radial-gradient(circle, #fff0f3 0 12%, #f2a9bb 13%);
}

/* 4. ichimatsu */
.card-back[data-back="ichimatsu"]:not(.revealed) {
  --b2: #14161c;
  background:
    conic-gradient(#8f2822 25%, #14161c 0 50%, #8f2822 0 75%, #14161c 0) 0 0 / 0.26em 0.26em !important;
}
.card-back[data-back="ichimatsu"]:not(.revealed)::after {
  width: 0.36em;
  border-radius: 50%;
  background: radial-gradient(circle, #14161c 0 32%, #d9c9a0 33% 42%, #8f2822 43%);
}

/* 5. moon */
.card-back[data-back="moon"]:not(.revealed) {
  --b2: #0c1126;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 0.02em, transparent 0.02em 0.12em),
    linear-gradient(180deg, #2a3562, #0c1126) !important;
}
.card-back[data-back="moon"]:not(.revealed)::before {
  inset: auto 0.06em 0.06em 0.06em;
  height: 32%;
  background: #070a18;
  border-radius: 0;
  clip-path: polygon(0 100%, 0 62%, 22% 30%, 38% 56%, 58% 12%, 78% 50%, 100% 24%, 100% 100%);
}
.card-back[data-back="moon"]:not(.revealed)::after {
  top: 34%;
  width: 0.46em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff4d8, #e8dcc0 60%, #c9b98e);
}

/* 6. bamboo */
.card-back[data-back="bamboo"]:not(.revealed) {
  --b2: #173324;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.4) 0 0.02em, transparent 0.02em 0.3em),
    repeating-linear-gradient(90deg, #2d5a3c 0 0.06em, #1d402b 0.06em 0.08em, #2d5a3c 0.08em 0.14em, #173324 0.14em 0.16em) !important;
}
.card-back[data-back="bamboo"]:not(.revealed)::after {
  content: "竹";
  display: grid;
  place-items: center;
  width: 0.34em;
  border-radius: 0.04em;
  background: #c8372d;
  color: #fff;
  font-family: var(--serif-cb);
  font-size: 0.2em;
  font-weight: 400;
}

/* 7. sumi */
.card-back[data-back="sumi"]:not(.revealed) {
  --b2: #0b0c10;
  background:
    radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.05) 21% 34%, transparent 35%) 0 0 / 0.3em 0.4em,
    radial-gradient(circle at 0 50%, transparent 20%, rgba(255,255,255,.05) 21% 34%, transparent 35%) 0 -0.2em / 0.3em 0.4em,
    linear-gradient(160deg, #1d1e25, #0f1014) !important;
}
.card-back[data-back="sumi"]:not(.revealed)::after { display: none; }

/* 8. shibori */
.card-back[data-back="shibori"]:not(.revealed) {
  --b2: #0f1a33;
  background:
    radial-gradient(circle, rgba(255,255,255,.4) 0 0.03em, transparent 0.04em) 0 0 / 0.15em 0.15em,
    radial-gradient(circle, rgba(255,255,255,.4) 0 0.03em, transparent 0.04em) 0.075em 0.075em / 0.15em 0.15em,
    linear-gradient(#1f3a70, #122247) !important;
}
.card-back[data-back="shibori"]:not(.revealed)::after { display: none; }

/* 9. classic-red */
.card-back[data-back="classic-red"]:not(.revealed) {
  --b2: #9a1b22;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.2) 0 1px, transparent 1px 0.13em),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.2) 0 1px, transparent 1px 0.13em),
    linear-gradient(#b3202a, #8e1620) !important;
}
.card-back[data-back="classic-red"]:not(.revealed)::before {
  inset: 0.3em 0.2em;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
}
.card-back[data-back="classic-red"]:not(.revealed)::after { display: none; }

/* 10. classic-blue */
.card-back[data-back="classic-blue"]:not(.revealed) {
  --b2: #1c3f7a;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.2) 0 1px, transparent 1px 0.13em),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.2) 0 1px, transparent 1px 0.13em),
    linear-gradient(#2a56a3, #1a3a73) !important;
}
.card-back[data-back="classic-blue"]:not(.revealed)::before {
  inset: 0.3em 0.2em;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
}
.card-back[data-back="classic-blue"]:not(.revealed)::after { display: none; }

/* 11. graphite */
.card-back[data-back="graphite"]:not(.revealed) {
  --b2: #1a1b1f;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #34363e, #1c1d22) !important;
}
.card-back[data-back="graphite"]:not(.revealed)::after {
  width: 0.22em;
  border-radius: 50%;
  border: 1px solid #7b7e8a;
}

/* 12. emerald */
.card-back[data-back="emerald"]:not(.revealed) {
  --b2: #0c2e22;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.07) 0 1px, transparent 1px 0.06em),
    linear-gradient(160deg, #17604a, #0b3326) !important;
}
.card-back[data-back="emerald"]:not(.revealed)::after {
  width: 0.2em;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: #d9c98a;
}

/* 13. ivory */
.card-back[data-back="ivory"]:not(.revealed) {
  --b2: #cfc6b0;
  background: linear-gradient(#f6f1e3, #e9e1cc) !important;
}
.card-back[data-back="ivory"]:not(.revealed)::before {
  inset: 0.1em;
  border: 1px solid rgba(40,40,46,.5);
  border-radius: 0;
}
.card-back[data-back="ivory"]:not(.revealed)::after {
  width: 0.16em;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: #2a2a2e;
}

/* 14. deco */
.card-back[data-back="deco"]:not(.revealed) {
  --b2: #0c0c0e;
  background:
    repeating-conic-gradient(at 50% 100%, rgba(240,215,138,.4) 0 3deg, transparent 3deg 10deg),
    radial-gradient(ellipse at 50% 100%, #2a2a2f, #0c0c0e 80%) !important;
}
.card-back[data-back="deco"]:not(.revealed)::after {
  width: 0.26em;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: radial-gradient(circle, #0c0c0e 0 22%, #f0d78a 23%);
}

/* 15. frost */
.card-back[data-back="frost"]:not(.revealed) {
  --b2: #7aa6cf;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 1px, transparent 1px 0.12em),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 1px, transparent 1px 0.12em),
    linear-gradient(160deg, #8fc0ea, #4f86bb) !important;
}
.card-back[data-back="frost"]:not(.revealed)::after {
  clip-path: polygon(50% 0, 61% 25%, 93% 25%, 75% 50%, 93% 75%, 61% 75%, 50% 100%, 39% 75%, 7% 75%, 25% 50%, 7% 25%, 39% 25%);
  background: #fff;
}

/* 16. sahara */
.card-back[data-back="sahara"]:not(.revealed) {
  --b2: #0f4a52;
  background:
    repeating-linear-gradient(135deg, rgba(233,196,106,.5) 0 2px, transparent 2px 0.12em),
    repeating-linear-gradient(45deg, rgba(233,196,106,.5) 0 2px, transparent 2px 0.12em),
    linear-gradient(160deg, #1a8a8f, #0c4a52) !important;
}
.card-back[data-back="sahara"]:not(.revealed)::after {
  width: 0.34em;
  border-radius: 50%;
  background: radial-gradient(circle, #0c4a52 0 28%, #e9c46a 29% 44%, #0c4a52 45% 54%, #e9c46a 55%);
}

/* 17. compass */
.card-back[data-back="compass"]:not(.revealed) {
  --b2: #0b1f3a;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(217,194,138,.18) 0 1px, transparent 1px 0.1em),
    linear-gradient(160deg, #17406e, #0b1f3a) !important;
}
.card-back[data-back="compass"]:not(.revealed)::after {
  width: 0.52em;
  clip-path: var(--star);
  background: radial-gradient(circle, #0b1f3a 0 12%, #d9c28a 13%);
}

/* 18. leaf */
.card-back[data-back="leaf"]:not(.revealed) {
  --b2: #102a18;
  background:
    radial-gradient(ellipse 0.09em 0.045em at 50% 50%, rgba(155,192,122,.35) 0 99%, transparent) 0 0 / 0.2em 0.2em,
    radial-gradient(ellipse 0.09em 0.045em at 50% 50%, rgba(155,192,122,.25) 0 99%, transparent) 0.1em 0.1em / 0.2em 0.2em,
    linear-gradient(160deg, #2a5a34, #102a18) !important;
}
.card-back[data-back="leaf"]:not(.revealed)::after {
  width: 0.3em;
  border-radius: 0 100% 0 100%;
  background: #9bc07a;
  transform: translate(-50%, -50%) rotate(-20deg);
}

/* 19. synth */
.card-back[data-back="synth"]:not(.revealed) {
  --b2: #150a26;
  background:
    repeating-linear-gradient(0deg, rgba(255,61,129,.55) 0 0.03em, transparent 0.03em 0.1em) bottom/100% 42% no-repeat,
    linear-gradient(180deg, #2a1450, #150a26) !important;
}
.card-back[data-back="synth"]:not(.revealed)::after {
  top: 42%;
  width: 0.46em;
  border-radius: 50%;
  background: linear-gradient(#ffe45c, #ff3d81);
  -webkit-mask: linear-gradient(#000 52%, transparent 52% 58%, #000 58% 68%, transparent 68% 75%, #000 75%);
  mask: linear-gradient(#000 52%, transparent 52% 58%, #000 58% 68%, transparent 68% 75%, #000 75%);
}

/* 20. damask */
.card-back[data-back="damask"]:not(.revealed) {
  --b2: #2a0c14;
  background:
    radial-gradient(ellipse 0.06em 0.1em at 50% 50%, rgba(214,178,94,.35) 0 98%, transparent) 0 0 / 0.22em 0.3em,
    radial-gradient(ellipse 0.06em 0.1em at 50% 50%, rgba(214,178,94,.25) 0 98%, transparent) 0.11em 0.15em / 0.22em 0.3em,
    linear-gradient(160deg, #6a1a2a, #2a0c14) !important;
}
.card-back[data-back="damask"]:not(.revealed)::after {
  width: 0.32em;
  border-radius: 50%;
  background: radial-gradient(circle, #2a0c14 0 40%, #d6b25e 41% 52%, #2a0c14 53% 64%, #d6b25e 65%);
}

/* 21. stars */
.card-back[data-back="stars"]:not(.revealed) {
  --b2: #080c24;
  background:
    radial-gradient(circle, rgba(255,235,180,.9) 0 0.012em, transparent 0.02em) 0.03em 0.05em / 0.17em 0.21em,
    radial-gradient(circle, rgba(255,255,255,.7) 0 0.01em, transparent 0.018em) 0.09em 0.12em / 0.11em 0.13em,
    radial-gradient(ellipse at 30% 30%, rgba(110,80,200,.4), transparent 60%),
    linear-gradient(160deg, #1a2660, #080c24) !important;
}
.card-back[data-back="stars"]:not(.revealed)::after {
  width: 0.38em;
  clip-path: var(--star);
  background: #ffe9a8;
}

/* 22. mono */
.card-back[data-back="mono"]:not(.revealed) {
  --b2: #f4f4f6;
  background:
    radial-gradient(circle, rgba(255,255,255,.55) 0 0.02em, transparent 0.03em) 0 0 / 0.12em 0.12em,
    #17181c !important;
}
.card-back[data-back="mono"]:not(.revealed)::after {
  width: 0.2em;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* 23. lattice */
.card-back[data-back="lattice"]:not(.revealed) {
  --b2: #4a0a0e;
  background:
    repeating-linear-gradient(45deg, rgba(240,215,138,.4) 0 1px, transparent 1px 0.14em),
    repeating-linear-gradient(-45deg, rgba(240,215,138,.4) 0 1px, transparent 1px 0.14em),
    linear-gradient(160deg, #b0252a, #6e1015) !important;
}
.card-back[data-back="lattice"]:not(.revealed)::after {
  width: 0.32em;
  border-radius: 50%;
  background: radial-gradient(circle, #6e1015 0 22%, #f0d78a 23% 40%, #6e1015 41% 48%, #f0d78a 49%);
}