/* Not Struggle for Catan: card faces (TV and phones) and the table. Tall parchment cards sized
   with --cw (padding, radius and shadow from --cw; cqw only inside). Dark rules first, then light. */
.sfcard, .sfcard * { box-sizing: border-box; }
.sfcard {
  width: var(--cw, 100px); aspect-ratio: 63 / 96; container-type: inline-size; position: relative; flex: none;
  border-radius: calc(var(--cw, 100px) * .075); padding: calc(var(--cw, 100px) * .04);
  background: linear-gradient(160deg, #f6ecd2, #e2cfa4); user-select: none; -webkit-user-select: none;
  box-shadow: 0 calc(var(--cw, 100px) * .03) calc(var(--cw, 100px) * .09) rgba(0,0,0,.45), inset 0 0 0 calc(var(--cw, 100px) * .012) #8a6b3a;
  font-family: "Spectral", Georgia, "Times New Roman", serif; color: #2a1c08;
}
.sfcard .sf-inner { position: relative; width: 100%; height: 100%; border-radius: 4.5cqw; overflow: hidden; background: #efe2c2; box-shadow: inset 0 0 0 .7cqw rgba(59,42,22,.5); }
.sfcard svg.sf-full { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sf-ico { display: block; width: 100%; height: 100%; filter: drop-shadow(0 .6px 1px rgba(0,0,0,.35)); }
.sf-coin { display: block; width: 100%; height: 100%; filter: drop-shadow(0 .6px 1px rgba(0,0,0,.35)); }
.sf-tico { display: block; width: 1em; height: 1em; }

/* resource cards: full art, a corner badge to read them in a fan, the name on a ribbon */
.sf-res .sf-rbadge { position: absolute; left: 5cqw; top: 5cqw; width: 32cqw; height: 32cqw; border-radius: 7cqw; box-shadow: 0 0 0 1.4cqw rgba(246,236,210,.92), 0 1.4cqw 3cqw rgba(0,0,0,.4); }
.sf-res .sf-rbadge .sf-ico { filter: none; border-radius: 7cqw; }
.sf-res .sf-rname { position: absolute; left: 0; right: 0; bottom: 0; padding: 7cqw 0 4cqw; text-align: center; font: 400 17cqw/1 "IM Fell English SC", Georgia, serif; color: #2a1c08; letter-spacing: .02em; background: linear-gradient(180deg, rgba(246,236,210,0), rgba(246,236,210,.94) 42%, #efe0bb); }
.sf-res.r-logs .sf-inner { box-shadow: inset 0 0 0 1.4cqw #2f6a3b; }
.sf-res.r-clay .sf-inner { box-shadow: inset 0 0 0 1.4cqw #b5532e; }
.sf-res.r-fluff .sf-inner { box-shadow: inset 0 0 0 1.4cqw #7fae47; }
.sf-res.r-grain .sf-inner { box-shadow: inset 0 0 0 1.4cqw #d9ad35; }
.sf-res.r-rocks .sf-inner { box-shadow: inset 0 0 0 1.4cqw #6f7a89; }
.sf-res .sf-inner::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inherit; pointer-events: none; }

/* building cards: a coloured band, the art, parchment text, A/B side and points at the foot */
.sf-bld .sf-head { position: absolute; left: 0; right: 0; top: 0; height: 15%; background: var(--band); color: var(--bink); display: flex; align-items: center; justify-content: center; font: 400 13.5cqw/1 "IM Fell English SC", Georgia, serif; letter-spacing: .02em; white-space: nowrap; box-shadow: inset 0 -.9cqw 0 rgba(0,0,0,.22); z-index: 2; }
.sf-bld.k-upgrade .sf-head { font-size: 10.5cqw; }
.sf-bld svg.sf-art { position: absolute; left: 0; top: 15%; width: 100%; height: 45%; display: block; }
.sf-bld .sf-body { position: absolute; left: 0; right: 0; top: 60%; bottom: 0; display: flex; flex-direction: column; align-items: center; padding: 2.4cqw 4cqw 3.4cqw; text-align: center; background: linear-gradient(180deg, #f6ecd2, #e8d6ae); box-shadow: inset 0 .9cqw 0 rgba(59,42,22,.25); }
.sf-bld .sf-title { font: 400 12cqw/1.02 "IM Fell English SC", Georgia, serif; color: #1d1406; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-bld .sf-text { display: none; font: 500 7.4cqw/1.2 "Spectral", Georgia, serif; color: #3b2a16; margin-top: 1.4cqw; }
.sf-bld .sf-foot { position: relative; margin-top: auto; width: 100%; min-height: 19cqw; display: flex; align-items: center; justify-content: center; }
.sf-bld .sf-side { position: absolute; left: 0; bottom: .6cqw; width: 17cqw; height: 17cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 900 11cqw/1 Georgia, serif; background: #fffaf0; color: #2a1c08; box-shadow: 0 0 0 .9cqw #3b2a16; }
.sf-bld .sf-side.s-B { background: #3b2a16; color: #f6ecd2; }
.sf-bld .sf-coins { display: flex; gap: 1.2cqw; }
.sf-bld .sf-coins .sf-coin { width: 17cqw; height: 17cqw; }
.sf-bld .sf-coins.n4 .sf-coin { width: 15cqw; height: 15cqw; }
.sf-bld .sf-perk { display: inline-flex; align-items: center; gap: 1.5cqw; padding: 1.5cqw 4cqw; border-radius: 99px; background: var(--band); color: var(--bink); font: 900 12cqw/1 "Inter", Arial, sans-serif; box-shadow: 0 .8cqw 2cqw rgba(0,0,0,.25); }
.sf-bld .sf-perk .sf-tico { width: 13cqw; height: 13cqw; }
.sf-evmark { display: inline-block; width: 9cqw; height: 9cqw; border-radius: 50%; margin-right: 1.6cqw; vertical-align: -1cqw; }
.sf-evmark.bandit { background: radial-gradient(circle at 50% 35%, #2a1d10 0 28%, transparent 30%), radial-gradient(circle at 50% 80%, #2a1d10 0 45%, transparent 47%), #c0392b; }
.sf-evmark.market { background: radial-gradient(circle at 35% 40%, #7fae47 0 18%, transparent 20%), radial-gradient(circle at 65% 40%, #e8b83a 0 18%, transparent 20%), #c0392b; }
@container (min-width: 126px) {
  .sf-bld svg.sf-art { height: 38%; }
  .sf-bld .sf-body { top: 53%; }
  .sf-bld .sf-text { display: block; font-size: 6.9cqw; }
  .sf-bld .sf-title { font-size: 10cqw; }
  .sf-bld .sf-foot { min-height: 16cqw; }
  .sf-bld .sf-side { width: 14cqw; height: 14cqw; font-size: 9cqw; }
  .sf-bld .sf-coins .sf-coin { width: 14cqw; height: 14cqw; }
  .sf-bld .sf-perk { font-size: 10cqw; }
}

/* back of the resource cards */
.sf-back .sf-inner { background: #5a2f17; box-shadow: inset 0 0 0 .7cqw #2a170b; }

/* the Weathervane: a wide card */
.sfcard.sf-vane { aspect-ratio: 96 / 66; }
.sf-vane .sf-vlabel { position: absolute; top: 4cqw; padding: 1.4cqw 3cqw; border-radius: 2cqw; font: 400 7.5cqw/1 "IM Fell English SC", Georgia, serif; color: #1d1406; box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.25); }
.sf-vane .sf-vlabel.l { left: 4cqw; background: #9fd08e; }
.sf-vane .sf-vlabel.r { right: 4cqw; background: #aebde8; }
.sf-vane .sf-vname { position: absolute; left: 50%; bottom: 3cqw; transform: translateX(-50%); padding: 1.2cqw 4cqw; border-radius: 99px; background: rgba(29,20,6,.82); color: #f6ecd2; font: 800 6.4cqw/1 "Inter", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

.sfcard.dim { filter: saturate(.35) brightness(.82); }
.sf-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); font-family: "Inter", -apple-system, Arial, sans-serif; }
.sf-explain .sf-xkind { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--label-2); }
.sf-explain p { margin: 5px 0 0; }

/* the table: cherry and lamplight in the dark, light oak by day */
.tbl-struggle {
  --tbl-edge: #1a0d06; --tbl-rim: #8a6b3a; --tbl-glow: rgba(255,200,130,.14);
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(255,190,120,.16), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 296px, rgba(0,0,0,.38) 296px 299px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.024) 0 2px, transparent 2px 9px, rgba(0,0,0,.05) 9px 11px, transparent 11px 17px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 27px),
    linear-gradient(180deg, #4f2a1a 0%, #3e2014 55%, #2d170d 100%);
}
[data-theme="light"] .tbl-struggle {
  --tbl-edge: #8a6a40; --tbl-rim: #f3e2bf; --tbl-glow: rgba(255,255,255,.22);
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(255,246,228,.5), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 296px, rgba(120,80,30,.18) 296px 298px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 9px, rgba(120,80,30,.05) 9px 11px, transparent 11px 17px),
    repeating-linear-gradient(0deg, rgba(120,80,30,.05) 0 1px, transparent 1px 27px),
    linear-gradient(180deg, #e2c697 0%, #d6b37e 55%, #c9a36c 100%);
}
[data-theme="light"] .sfcard { box-shadow: 0 calc(var(--cw, 100px) * .025) calc(var(--cw, 100px) * .07) rgba(70,45,15,.35), inset 0 0 0 calc(var(--cw, 100px) * .012) #8a6b3a; }