/* Not Splendor faces, shared by the TV and the phones. Size a card with --cw, a token
   with --tw, a patron with --nw. Inside a card, cqw units measure the card itself. */
.spcard, .spcard *, .sp-tok, .sp-tok *, .spnoble, .spnoble * { box-sizing: border-box; }

/* ---- development cards ---- */
.spcard {
  width: var(--cw, 120px); aspect-ratio: 5 / 7; container-type: inline-size; position: relative; flex: none;
  border-radius: calc(var(--cw, 120px) * .07); overflow: hidden; user-select: none; -webkit-user-select: none;
  background: #f6efe0;
  box-shadow: 0 calc(var(--cw, 120px) * .025) calc(var(--cw, 120px) * .08) rgba(0,0,0,.38), inset 0 0 0 calc(var(--cw, 120px) * .012) rgba(110,80,30,.35);
  font-family: "Avenir Next", "Inter", "Helvetica Neue", Arial, sans-serif;
}
.spcard .sp-art { position: absolute; inset: 2.6cqw; border-radius: 4.6cqw; overflow: hidden; }
.spcard.lv-1 .sp-art { background: linear-gradient(180deg, #a8c8d2 0%, #d9e8e4 55%, #e9efe6 100%); }
.spcard.lv-2 .sp-art { background: linear-gradient(180deg, #bcd6e6 0%, #e6eef0 60%, #f1efe6 100%); }
.spcard.lv-3 .sp-art { background: linear-gradient(180deg, #24304d 0%, #3d4466 60%, #5a4d63 100%); }
.spcard .sp-scene { width: 100%; height: 100%; display: block; }
.spcard .sp-art::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 .9cqw rgba(201,162,74,.85), inset 0 0 10cqw rgba(0,0,0,.25); border-radius: inherit; pointer-events: none; }
.spcard .sp-top {
  position: absolute; left: 2.6cqw; right: 2.6cqw; top: 2.6cqw; height: 27cqw; border-radius: 4.6cqw 4.6cqw 0 0;
  background: linear-gradient(180deg, rgba(255,251,242,.94), rgba(255,248,232,.78)); display: flex; align-items: center; justify-content: space-between; padding: 0 4cqw 0 6cqw;
  box-shadow: 0 .8cqw 0 rgba(201,162,74,.75);
}
.spcard .sp-pts { font-family: "Didot", "Bodoni 72", "Spectral", Georgia, serif; font-size: 25cqw; font-weight: 700; line-height: 1; color: #2a2118; text-shadow: 0 .6cqw 0 rgba(201,162,74,.6); }
.spcard .sp-bonus { width: 22cqw; height: 22cqw; filter: drop-shadow(0 1cqw 1.4cqw rgba(0,0,0,.35)); }
.spcard .sp-cost { position: absolute; left: 5cqw; bottom: 5cqw; display: flex; flex-direction: column-reverse; gap: 1.8cqw; }
.sp-c {
  width: 20cqw; height: 20cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13cqw; font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 .5cqw 1cqw rgba(0,0,0,.55);
  box-shadow: 0 0 0 1.1cqw rgba(255,252,244,.95), 0 1.2cqw 2.2cqw rgba(0,0,0,.4); font-variant-numeric: tabular-nums;
}
.sp-c.c-diamond { background: radial-gradient(circle at 35% 30%, #ffffff, #cfdbe5); color: #1d2a33; text-shadow: none; }
.sp-c.c-sapphire { background: radial-gradient(circle at 35% 30%, #5b92ef, #173f8c); }
.sp-c.c-emerald { background: radial-gradient(circle at 35% 30%, #3cc584, #0b5c36); }
.sp-c.c-ruby { background: radial-gradient(circle at 35% 30%, #f15a6e, #8a0f22); }
.sp-c.c-onyx { background: radial-gradient(circle at 35% 30%, #5b5664, #121016); }
.spcard .sp-lv { position: absolute; right: 6cqw; bottom: 5.6cqw; display: flex; gap: 2cqw; }
.spcard .sp-lv i, .sp-bdots i { width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: #f6e7bf; box-shadow: 0 0 0 .6cqw rgba(0,0,0,.35); display: block; }
.spcard.empty { background: transparent; box-shadow: inset 0 0 0 calc(var(--cw, 120px) * .012) rgba(201,162,74,.45); border: none; }
.spcard.empty::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; border: calc(var(--cw, 120px) * .012) dashed rgba(201,162,74,.4); }

/* backs: velvet by level with a gold medallion */
.spcard.back { background: #1b1513; }
.spcard.back .sp-backin {
  position: absolute; inset: 2.6cqw; border-radius: 4.6cqw; display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(233,200,119,.16) 0 .7cqw, transparent .7cqw 10cqw),
    repeating-linear-gradient(-45deg, rgba(233,200,119,.16) 0 .7cqw, transparent .7cqw 10cqw),
    radial-gradient(ellipse at 50% 40%, var(--vel-1), var(--vel-2));
  box-shadow: inset 0 0 0 1.2cqw #c9a24a, inset 0 0 0 2.4cqw rgba(0,0,0,.35), inset 0 0 14cqw rgba(0,0,0,.45);
}
.spcard.back.lv-1 { --vel-1: #2c6a55; --vel-2: #123528; }
.spcard.back.lv-2 { --vel-1: #8a3346; --vel-2: #3e1220; }
.spcard.back.lv-3 { --vel-1: #2f4688; --vel-2: #121d40; }
.sp-medal {
  width: 74cqw; aspect-ratio: 1 / 1.25; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw;
  background: radial-gradient(ellipse at 40% 30%, #fff7dc, #e9c877 45%, #a87c26 100%);
  box-shadow: 0 0 0 1.4cqw rgba(0,0,0,.25), 0 2cqw 5cqw rgba(0,0,0,.45), inset 0 0 0 1.6cqw rgba(255,255,255,.35); color: #3a2a0c; text-align: center; line-height: 1;
}
.sp-medal small { font-size: 8cqw; letter-spacing: .3em; font-weight: 800; margin-left: .3em; }
.sp-medal b { font-family: "Didot", "Bodoni 72", "Spectral", Georgia, serif; font-size: 15cqw; font-weight: 700; font-style: italic; letter-spacing: -.01em; }
.sp-bdots { display: flex; gap: 2.2cqw; margin-top: 2cqw; }
.sp-bdots i { background: #3a2a0c; box-shadow: none; }

/* ---- gems and tokens ---- */
.sp-gemsvg { display: block; }
.sp-tok {
  --tc: #888; --tr: #fff; --tin: #ccc;
  width: var(--tw, 56px); height: var(--tw, 56px); border-radius: 50%; position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle, transparent 0 58%, var(--tc) 59%),
    repeating-conic-gradient(var(--tr) 0 7deg, var(--tc) 7deg 30deg);
  box-shadow: 0 calc(var(--tw, 56px) * .05) calc(var(--tw, 56px) * .1) rgba(0,0,0,.45), inset 0 0 0 calc(var(--tw, 56px) * .03) rgba(0,0,0,.25);
}
.sp-tok .sp-tokin { width: 72%; height: 72%; border-radius: 50%; background: radial-gradient(circle at 38% 32%, var(--tin), var(--tc)); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 calc(var(--tw, 56px) * -.03) calc(var(--tw, 56px) * .06) rgba(0,0,0,.35), 0 0 0 calc(var(--tw, 56px) * .02) rgba(255,255,255,.35); }
.sp-tok .sp-gemsvg { width: 70%; height: 70%; filter: drop-shadow(0 calc(var(--tw, 56px) * .03) calc(var(--tw, 56px) * .03) rgba(0,0,0,.4)); }
.sp-tok.t-diamond { --tc: #c9d6e1; --tr: #ffffff; --tin: #f6f9fc; }
.sp-tok.t-sapphire { --tc: #1d4fa6; --tr: #cfe0ff; --tin: #3b74d6; }
.sp-tok.t-emerald { --tc: #0f7a49; --tr: #d2f5e3; --tin: #22a364; }
.sp-tok.t-ruby { --tc: #a8172e; --tr: #ffd9de; --tin: #d6334b; }
.sp-tok.t-onyx { --tc: #1c1a21; --tr: #9b96a6; --tin: #3a3641; }
.sp-tok.t-gold { --tc: #c38f1d; --tr: #fff3c4; --tin: #ecc04f; }
.sp-tokn {
  position: absolute; right: -8%; bottom: -8%; min-width: 46%; height: 46%; padding: 0 12%; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: #15121a; color: #fff; font-size: calc(var(--tw, 56px) * .3); font-weight: 800; line-height: 1; box-shadow: 0 0 0 calc(var(--tw, 56px) * .035) #f6efe0; font-variant-numeric: tabular-nums;
}
.sp-tok.none { opacity: .32; filter: saturate(.4); }

/* ---- patrons ---- */
.spnoble {
  width: var(--nw, 120px); aspect-ratio: 1; position: relative; flex: none; border-radius: calc(var(--nw, 120px) * .08); overflow: hidden;
  background: linear-gradient(160deg, #fbf4e4, #eadcbc); container-type: inline-size;
  box-shadow: 0 calc(var(--nw, 120px) * .03) calc(var(--nw, 120px) * .09) rgba(0,0,0,.4), inset 0 0 0 calc(var(--nw, 120px) * .02) #c9a24a, inset 0 0 0 calc(var(--nw, 120px) * .035) rgba(255,255,255,.6);
}
.spnoble .sp-nart { position: absolute; right: 3cqw; top: 4cqw; width: 64cqw; height: 70cqw; }
.spnoble .sp-cameo { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1.5cqw 2cqw rgba(0,0,0,.3)); }
.spnoble .sp-npts { position: absolute; left: 7cqw; top: 2cqw; font-family: "Didot", "Bodoni 72", "Spectral", Georgia, serif; font-size: 22cqw; font-weight: 700; color: #2a2118; line-height: 1; }
.spnoble .sp-need { position: absolute; left: 7cqw; bottom: 18cqw; display: flex; flex-direction: column; gap: 2.2cqw; }
.sp-nreq {
  width: 15cqw; height: 18cqw; border-radius: 2.4cqw; display: flex; align-items: center; justify-content: center; position: relative;
  font-size: 11.5cqw; font-weight: 800; color: #fff; text-shadow: 0 .5cqw 1cqw rgba(0,0,0,.5); box-shadow: 0 0 0 1cqw rgba(255,252,244,.9), 0 1cqw 2cqw rgba(0,0,0,.35);
}
.sp-nreq small { position: absolute; right: -9cqw; top: 50%; transform: translateY(-50%); font-size: 9cqw; font-weight: 800; color: #6b5a3a; text-shadow: none; }
.sp-nreq.met::after { content: '✓'; position: absolute; right: -9cqw; top: 50%; transform: translateY(-50%); font-size: 10cqw; color: #1f8f3a; text-shadow: none; }
.sp-nreq.c-diamond { background: linear-gradient(160deg, #ffffff, #c9d6e1); color: #1d2a33; text-shadow: none; }
.sp-nreq.c-sapphire { background: linear-gradient(160deg, #4f86e6, #173f8c); }
.sp-nreq.c-emerald { background: linear-gradient(160deg, #2fbb78, #0b5c36); }
.sp-nreq.c-ruby { background: linear-gradient(160deg, #ec4a60, #8a0f22); }
.sp-nreq.c-onyx { background: linear-gradient(160deg, #57525f, #121016); }
.spnoble .sp-nname {
  position: absolute; left: 0; right: 0; bottom: 0; height: 15cqw; display: flex; align-items: center; justify-content: center; padding: 0 4cqw;
  background: linear-gradient(180deg, #3a2a14, #22180b); color: #f3e3b5; font-family: "Didot", "Bodoni 72", "Spectral", Georgia, serif; font-size: 8.4cqw; font-weight: 700; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em;
}

/* ---- plain-English help box ---- */
.sp-explain { background: var(--fill, rgba(120,120,128,.14)); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4; color: var(--text); }
.sp-explain .sp-xkind { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--label-2); }
.sp-explain p { margin: 5px 0 0; }

/* ---- the table: a jeweller's velvet tray (dark) and ivory silk (light) ---- */
.tbl-velvet {
  --tbl-edge: #120b16; --tbl-rim: #c9a24a; --tbl-glow: rgba(233,200,119,.10);
  background:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(46,120,120,.28), transparent 70%),
    radial-gradient(ellipse 55% 50% at 80% 75%, rgba(120,40,90,.30), transparent 70%),
    repeating-linear-gradient(45deg, rgba(233,200,119,.035) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(-45deg, rgba(233,200,119,.035) 0 1px, transparent 1px 56px),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #13262d 0%, #1a1630 55%, #1d0f22 100%);
}
[data-theme="light"] .tbl-velvet {
  --tbl-edge: #fffaf0; --tbl-rim: #c9a24a; --tbl-glow: rgba(255,255,255,.4);
  background:
    radial-gradient(ellipse 60% 50% at 25% 20%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(ellipse 50% 45% at 85% 85%, rgba(214,180,120,.18), transparent 70%),
    repeating-linear-gradient(45deg, rgba(185,145,70,.07) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(-45deg, rgba(185,145,70,.07) 0 1px, transparent 1px 56px),
    linear-gradient(170deg, #fbf6ec 0%, #f4ecdc 60%, #efe4cf 100%);
}