/* Not Rivals for Catan: card faces, dice and icons (TV and phones), and the table.
   Cards are square, parchment framed, sized with --cw. Dark rules first, then light. */
.rvcard, .rvcard * { box-sizing: border-box; }
.rvcard {
  width: var(--cw, 100px); aspect-ratio: 1; container-type: inline-size; position: relative; flex: none;
  border-radius: calc(var(--cw, 100px) * .07); padding: calc(var(--cw, 100px) * .045);
  background: linear-gradient(160deg, #f6ecd2, #e6d4ad); user-select: none; -webkit-user-select: none;
  box-shadow: 0 calc(var(--cw, 100px) * .025) calc(var(--cw, 100px) * .08) 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;
}
.rvcard .rv-inner { position: relative; width: 100%; height: 100%; border-radius: 4.5cqw; overflow: hidden; background: #d9c9a5; box-shadow: inset 0 0 0 .8cqw rgba(59,42,22,.55); }
.rvcard svg.rv-art, .rvcard svg.rv-terrain { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rv-ico { display: block; width: 100%; height: 100%; filter: drop-shadow(0 .6px 1px rgba(0,0,0,.35)); }

/* regions: terrain, die number, three storage slots */
.rv-region .rv-rname { position: absolute; left: 0; top: 0; padding: 1.5cqw 5cqw 1.8cqw 4cqw; font-family: "IM Fell English SC", Georgia, serif; font-size: 12cqw; line-height: 1; color: #2a1c08; background: linear-gradient(180deg, #f6ecd2, #e9d8b2); border-bottom-right-radius: 5cqw; box-shadow: .6cqw .6cqw 0 rgba(0,0,0,.25); white-space: nowrap; }
.rv-region .rv-rdie { --ds: 33cqw; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) rotate(-4deg); }
.rv-region .rv-store { position: absolute; left: 6cqw; right: 6cqw; bottom: 5cqw; display: flex; justify-content: space-between; gap: 3cqw; }
.rv-region .rv-slot { flex: 1; aspect-ratio: 1; max-width: 27cqw; border-radius: 5cqw; background: rgba(20,14,6,.38); box-shadow: inset 0 0 0 .9cqw rgba(246,236,210,.55); display: flex; }
.rv-region .rv-slot.full { background: none; box-shadow: 0 0 0 .9cqw #f6ecd2, 0 1cqw 2.5cqw rgba(0,0,0,.45); border-radius: 5cqw; animation: rv-pop .35s cubic-bezier(.2,1.5,.4,1) both; }
.rv-region .rv-slot.full .rv-ico { border-radius: 5cqw; }
.rv-region .rv-gain { position: absolute; right: 3cqw; top: 3cqw; background: #a3e635; color: #0a0d14; font: 900 15cqw/1 "Inter", Arial, sans-serif; padding: 2cqw 4cqw; border-radius: 99px; box-shadow: 0 1cqw 3cqw rgba(0,0,0,.45); animation: rv-gainf 3.2s ease both; }
@keyframes rv-gainf { 0% { transform: translateY(8cqw) scale(.6); opacity: 0; } 12% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6cqw); } }
@keyframes rv-pop { from { transform: scale(.4); opacity: 0; } }
.rvcard.rv-glow { box-shadow: 0 0 0 calc(var(--cw) * .03) #a3e635, 0 0 calc(var(--cw) * .25) rgba(163,230,53,.7), 0 calc(var(--cw) * .025) calc(var(--cw) * .08) rgba(0,0,0,.45); }
.rvcard.rv-lost { box-shadow: 0 0 0 calc(var(--cw) * .03) #ff453a, 0 0 calc(var(--cw) * .25) rgba(255,69,58,.7); }

/* dice */
.rv-die { width: var(--ds, 44px); height: var(--ds, 44px); border-radius: 22%; background: linear-gradient(160deg, #fffdf7, #ece4d2); box-shadow: inset 0 calc(var(--ds, 44px) * -.07) 0 #cfc3a6, 0 calc(var(--ds, 44px) * .06) calc(var(--ds, 44px) * .16) rgba(0,0,0,.45); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: calc(var(--ds, 44px) * .14); flex: none; box-sizing: border-box; }
.rv-die i { display: block; width: calc(var(--ds, 44px) * .19); height: calc(var(--ds, 44px) * .19); border-radius: 50%; align-self: center; justify-self: center; }
.rv-die i.on { background: #1d1a16; box-shadow: inset 0 calc(var(--ds, 44px) * .02) 0 rgba(255,255,255,.25); }
.rv-evdie { width: var(--ds, 44px); height: var(--ds, 44px); border-radius: 22%; background: linear-gradient(160deg, #fffdf7, #ece4d2); box-shadow: inset 0 calc(var(--ds, 44px) * -.07) 0 #cfc3a6, 0 calc(var(--ds, 44px) * .06) calc(var(--ds, 44px) * .16) rgba(0,0,0,.45); padding: calc(var(--ds, 44px) * .12); flex: none; box-sizing: border-box; }
.rv-evdie svg { width: 100%; height: 100%; display: block; }
.rv-evdie.s-bandit { background: linear-gradient(160deg, #fff4f2, #f3d9d4); }

/* centre cards */
.rv-centre .rv-cname { position: absolute; left: 0; bottom: 0; padding: 1.8cqw 5cqw 1.5cqw 4cqw; font-family: "IM Fell English SC", Georgia, serif; font-size: 13cqw; line-height: 1; color: #f6ecd2; background: rgba(30,20,8,.82); border-top-right-radius: 5cqw; }
.rv-centre .rv-vp { position: absolute; right: 4cqw; top: 4cqw; width: 22cqw; height: 25cqw; display: flex; align-items: center; justify-content: center; font: 900 15cqw/1 Georgia, serif; color: #2a1c08; background: #f0c04a; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); filter: drop-shadow(0 1cqw 1cqw rgba(0,0,0,.4)); }

/* basic and event cards */
.rv-basic .rv-art { position: absolute; inset: 0 0 auto 0; height: 66% !important; }
.rv-basic .rv-box { position: absolute; left: 0; right: 0; bottom: 0; height: 37%; padding: 2cqw 4cqw 0; text-align: center; background: linear-gradient(180deg, #d9ecc4, #bcd9a0); border-top: .9cqw solid #5b7f3a; display: flex; flex-direction: column; align-items: center; }
.rv-basic.k-action .rv-box { background: linear-gradient(180deg, #f8e7a8, #ecd17a); border-top-color: #a8801f; }
.rv-basic.k-event .rv-box { background: linear-gradient(180deg, #d8e6f4, #b9d0e8); border-top-color: #41678f; }
.rv-basic .rv-type { font: 800 6.6cqw/1.1 "Inter", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: rgba(42,28,8,.7); white-space: nowrap; }
.rv-basic .rv-name { font-family: "IM Fell English SC", Georgia, serif; font-size: 12.5cqw; line-height: 1; margin-top: 1.2cqw; color: #1d1406; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-basic .rv-text { display: none; font-size: 7.4cqw; line-height: 1.18; margin-top: 1.6cqw; color: #2a1c08; }
.rv-basic .rv-cost { position: absolute; left: 3cqw; top: 3cqw; display: flex; flex-direction: column; gap: 1.6cqw; padding: 1.6cqw; background: rgba(246,236,210,.92); border-radius: 4cqw; box-shadow: 0 1cqw 2cqw rgba(0,0,0,.3); }
.rv-basic .rv-cost .rv-ico { width: 15cqw; height: 15cqw; }
.rv-basic .rv-cost.two { display: grid; grid-template-columns: 1fr 1fr; }
.rv-basic .rv-cost.two .rv-ico { width: 12.5cqw; height: 12.5cqw; }
.rv-basic .rv-pts { position: absolute; right: 3cqw; top: 3cqw; display: flex; flex-direction: column; gap: 1.4cqw; align-items: flex-end; }
.rv-badge { position: relative; display: inline-flex; align-items: center; }
.rv-badge svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 .6px 1.2px rgba(0,0,0,.45)); }
.rv-basic .rv-pts .rv-badge { width: 17cqw; height: 17cqw; }
.rvcard .rv-badge b { font-size: max(9px, 7.5cqw); }
.rv-badge b { position: absolute; right: -3px; bottom: -4px; min-width: 52%; height: 52%; border-radius: 99px; background: #1d1406; color: #f6ecd2; font: 900 10px/1 "Inter", Arial, sans-serif; display: flex; align-items: center; justify-content: center; padding: 0 2px; box-shadow: 0 0 0 1.5px #f6ecd2; }
.rv-basic .rv-mark { position: absolute; left: 3cqw; top: 3cqw; width: 17cqw; height: 17cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 900 11cqw/1 Georgia, serif; color: #2a1c08; background: #f0c04a; box-shadow: 0 0 0 .9cqw #f6ecd2, 0 1cqw 2cqw rgba(0,0,0,.35); }
.rv-basic .rv-mark.ev { background: #8fb3da; }
.rv-basic .rv-boost { position: absolute; right: 3cqw; top: -10.5cqw; display: inline-flex; align-items: center; gap: 1cqw; padding: 1cqw 2.4cqw; border-radius: 99px; background: rgba(29,20,6,.82); color: #f6ecd2; font: 900 7cqw/1 "Inter", Arial, sans-serif; }
.rv-basic .rv-boost .rv-ico { width: 8cqw; height: 8cqw; }
@container (min-width: 150px) {
  .rv-basic .rv-box { height: 45%; }
  .rv-basic .rv-art { height: 58% !important; }
  .rv-basic .rv-text { display: block; }
  .rv-basic .rv-name { font-size: 11.5cqw; -webkit-line-clamp: 1; }
  .rv-basic .rv-type { font-size: 5.4cqw; }
}

/* backs */
.rv-back .rv-inner { background: radial-gradient(circle at 50% 42%, #6b3f22 0 30%, #4a2a16 70%), #3b2213; box-shadow: inset 0 0 0 2.4cqw #2a170b, inset 0 0 0 3.2cqw #c9a54a; }
.rv-back .rv-inner::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 7px); }
.rv-back .rv-medal { position: absolute; left: 50%; top: 45%; width: 52cqw; height: 52cqw; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f6ecd2, #d9c08a); box-shadow: 0 0 0 1.4cqw #c9a54a, 0 0 0 2.6cqw #2a170b, 0 2cqw 5cqw rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rv-back .rv-bsvg { width: 78%; height: 78%; }
.rv-back.b-basic .rv-medal { background: radial-gradient(circle at 40% 35%, #f0a35a, #b8452a); }
.rv-back .rv-bq { font: 900 38cqw/1 Georgia, serif; color: #24427a; }
.rv-back .rv-bname { position: absolute; left: 0; right: 0; bottom: 6cqw; text-align: center; font-family: "IM Fell English SC", Georgia, serif; font-size: 10cqw; color: #e6c27a; letter-spacing: .06em; }
.rv-back.b-event .rv-inner { background: radial-gradient(circle at 50% 42%, #33507e 0 30%, #1e3152 70%), #1a2a46; box-shadow: inset 0 0 0 2.4cqw #13203a, inset 0 0 0 3.2cqw #c9a54a; }
.rv-back.b-region .rv-inner { background: radial-gradient(circle at 50% 42%, #4f7a45 0 30%, #2f4f2c 70%), #284427; box-shadow: inset 0 0 0 2.4cqw #1b301a, inset 0 0 0 3.2cqw #c9a54a; }

.rvcard.dim { filter: saturate(.35) brightness(.82); }
.rv-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; }
.rv-explain .rv-xkind { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--label-2); }
.rv-explain p { margin: 5px 0 0; }

/* the table: walnut and lamplight in the dark, light oak by day */
.tbl-rivals {
  --tbl-edge: #1c0f07; --tbl-rim: #8a6b3a; --tbl-glow: rgba(255,200,130,.14);
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(255,196,128,.16), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 318px, rgba(0,0,0,.4) 318px 321px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 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 23px),
    linear-gradient(180deg, #4a2d1b 0%, #3b2314 55%, #2c190d 100%);
}
[data-theme="light"] .tbl-rivals {
  --tbl-edge: #8a6a40; --tbl-rim: #f3e2bf; --tbl-glow: rgba(255,255,255,.22);
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(255,245,225,.45), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 318px, rgba(120,80,30,.2) 318px 320px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 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 23px),
    linear-gradient(180deg, #dcbf8f 0%, #d2b07b 55%, #c49f69 100%);
}
[data-theme="light"] .rvcard { box-shadow: 0 calc(var(--cw, 100px) * .02) calc(var(--cw, 100px) * .06) rgba(70,45,15,.35), inset 0 0 0 calc(var(--cw, 100px) * .012) #8a6b3a; }