/* Round 9c §1 — the card art template (Storefront\V2\CardArt). Every size follows the card's own width (cqi), so one
   template serves a 110px tile, the product page and a 2x WebP render. Positions are physical: the card is a picture. */
.spk { position: relative; display: block; inline-size: 100%; container-type: inline-size; color: #111; font-family: 'IBM Plex Sans Arabic', 'Changa', system-ui, sans-serif; line-height: 1.3; text-align: center; }
.spk--hang { aspect-ratio: 260 / 336; }
.spk-in { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 7cqi; background: #fff; }
/* The hole of the hanging card: a real cut (the page shows through), with a soft ring. */
.spk--hang .spk-in { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 336' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0h260v336H0zM106 12h48a7.5 7.5 0 0 1 0 15h-48a7.5 7.5 0 0 1 0-15z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 336' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0h260v336H0zM106 12h48a7.5 7.5 0 0 1 0 15h-48a7.5 7.5 0 0 1 0-15z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.spk-hole { position: absolute; inset-block-start: 4.6cqi; left: 40.8%; inline-size: 18.4%; block-size: 5.8cqi; border-radius: 3cqi; box-shadow: 0 0 0 0.5cqi rgba(0, 0, 0, 0.08); }
.spk [hidden] { display: none !important; }

/* top: white, the brand's words */
.spk-top { position: relative; display: flex; flex: 0 0 55%; flex-direction: column; align-items: center; box-sizing: border-box; padding: 14.5cqi 6cqi 0; }
.spk-flag { position: absolute; inset-block-start: 4.2cqi; left: 6cqi; display: flex; inline-size: 12.5cqi; }
.spk .spk-in .spk-flag img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; margin: 0; border-radius: 1.6cqi; box-shadow: 0 0 0 0.35cqi rgba(0, 0, 0, 0.08); object-fit: contain; transform: none; transition: none; filter: none; }
.spk-globe { display: flex; align-items: center; justify-content: center; inline-size: 9.5cqi; block-size: 9.5cqi; border-radius: 50%; background: #111; color: #fff; }
.spk-globe svg { inline-size: 64%; block-size: 64%; }
.spk-name { display: block; max-inline-size: 100%; overflow: hidden; color: #0d0d0f; font-size: 12.5cqi; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
.spk-name.is-long { font-size: 9.5cqi; }
.spk-name.is-xlong { font-size: 7.6cqi; }
.spk-line { display: -webkit-box; margin-block-start: 2.4cqi; overflow: hidden; color: #2f2f33; font-size: 5.3cqi; font-weight: 500; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.spk-store { position: absolute; inset-block-end: 3.6cqi; padding-block-end: 1.1cqi; border-block-end: 0.7cqi solid #c9a54a; color: #0d0d0f; font-size: 4.9cqi; font-weight: 700; line-height: 1.2; }

/* bottom: the brand's colour, its mark (or the game's art / Discord's motif), the amount and the SPECTER mark */
.spk-bot { position: relative; flex: 1; overflow: hidden; background: linear-gradient(160deg, var(--spk-b), var(--spk-a)); color: #fff; }
.spk-mark { position: absolute; inset-block-start: 14%; left: 28%; inline-size: 44%; block-size: 52%; background: center / contain no-repeat; }
/* The game's art, larger than the frame so its own wordmark (bottom right of the art) stays out of view. */
.spk-art { position: absolute; inset: 0; background: 50% 12% / 140% auto no-repeat; }
.spk-art + .spk-foot::before { content: ""; position: absolute; inset: -18cqi -8cqi -6cqi; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0)); }
.spk-foot { position: absolute; inset-block-end: 4.4cqi; inset-inline: 6cqi; z-index: 1; display: flex; flex-direction: row-reverse; align-items: flex-end; justify-content: space-between; direction: ltr; }
.spk-amt { display: inline-flex; align-items: baseline; gap: 1.4cqi; direction: rtl; line-height: 1; }
.spk-num { font-family: 'Changa', 'IBM Plex Sans Arabic', sans-serif; font-size: 12.5cqi; font-weight: 800; letter-spacing: -0.01em; }
.spk-num.is-name { font-size: 6cqi; font-weight: 700; }
.spk-amt i { font-size: 5.6cqi; font-style: normal; font-weight: 700; }
.spk-amt .sp-sar { font-size: 8.4cqi; font-weight: 700; }
.spk-sp { display: block; inline-size: 21cqi; block-size: 3.9cqi; margin-block-end: 1.6cqi; background: center / contain no-repeat; opacity: 0.92; }
.spk.is-light .spk-bot { color: #111; }
.spk.is-light .spk-sp { filter: invert(1); }

/* Discord's sections (round 9c §7): original art */
.spk-motif { position: absolute; inset: 0 0 24% 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5cqi; }
.spk-word { position: relative; display: flex; flex-direction: column; align-items: center; font-family: 'Changa', 'IBM Plex Sans Arabic', sans-serif; font-size: 13cqi; font-weight: 800; line-height: 1; text-shadow: 0 0.6cqi 2.4cqi rgba(40, 0, 60, 0.35); }
.spk-word small { margin-block-start: 1.4cqi; font-size: 4.8cqi; font-weight: 600; letter-spacing: 0.2em; opacity: 0.9; }
.spk-spark { position: absolute; inset: 6% 5%; inline-size: 90%; block-size: 88%; opacity: 0.9; }
.spk-gem { inline-size: 24cqi; block-size: auto; filter: drop-shadow(0 1.4cqi 2.4cqi rgba(60, 0, 40, 0.4)); }
.spk-m-boosts .spk-word { font-size: 10cqi; }
.spk-lv { font-size: 4.2cqi; font-weight: 700; letter-spacing: 0.08em; opacity: 0.85; }
.spk-av { display: flex; align-items: center; }
.spk-av i { inline-size: 12.5cqi; block-size: 12.5cqi; margin-inline-end: -3.4cqi; border-radius: 50%; box-shadow: 0 0 0 1.2cqi var(--spk-a); background-image: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.9) 0 18%, transparent 19%), radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.9) 0 36%, transparent 37%); }
.spk-av em { display: flex; align-items: center; justify-content: center; inline-size: 12.5cqi; block-size: 12.5cqi; margin-inline-start: 5cqi; border-radius: 50%; background: rgba(15, 10, 40, 0.55); font-size: 8cqi; font-style: normal; font-weight: 800; }
.spk-m-members .spk-word { margin-block-start: 1cqi; font-size: 9cqi; }

/* wide (landscape), final round A1: the coloured card with no white strip — the mark (or the game's art / Discord's
   motif) on the left, the words on the right, an amount big at the bottom right. Same ratio as every product image. */
.spk--wide { aspect-ratio: 290 / 183; }
.spk--wide .spk-in { border-radius: 5.4cqi; background: linear-gradient(150deg, var(--spk-b), var(--spk-a)); }
.spk--wide .spk-top { position: absolute; inset-block-start: 0; right: 0; z-index: 1; inline-size: 56%; block-size: 100%; flex: none; align-items: flex-end; justify-content: center; padding: 0 6cqi 0 0; color: #fff; text-align: right; }
.spk--wide.is-full .spk-top { block-size: 72%; padding-block-start: 4cqi; }
.spk--wide .spk-flag { position: static; order: -2; inline-size: 8cqi; margin-block-end: 2cqi; }
.spk--wide .spk-globe { inline-size: 6.6cqi; block-size: 6.6cqi; background: #fff; color: #111; }
.spk--wide .spk-store { position: static; order: -1; margin-block-end: 1.6cqi; padding: 0; border: 0; color: #f1d27a; font-size: 3.6cqi; }
.spk--wide .spk-name { color: #fff; font-size: 7.4cqi; }
.spk--wide .spk-name.is-long { font-size: 6cqi; }
.spk--wide .spk-name.is-xlong { font-size: 5cqi; }
.spk--wide .spk-line { margin-block-start: 1.4cqi; color: rgba(255, 255, 255, 0.85); font-size: 3.4cqi; text-align: right; }
.spk--wide .spk-bot { position: static; background: none; }
.spk--wide .spk-mark { inset-block-start: 20%; left: 7%; inline-size: 32%; block-size: 60%; }
/* The art larger than the card, from its top left, so the game's own wordmark (bottom right of the art) stays out. */
.spk--wide .spk-art { inset: 0; background-size: 165% auto; background-position: 8% 10%; }
.spk--wide:has(.spk-art) .spk-bot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0.85) 18%, rgba(0, 0, 0, 0) 72%), linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45%); }
.spk--wide .spk-motif { inset: 0 50% 0 0; }
.spk--wide .spk-foot { inset: auto 6cqi 5cqi auto; z-index: 2; block-size: auto; padding: 0; background: none; color: #fff; }
.spk--wide .spk-art + .spk-foot::before { display: none; }
.spk--wide .spk-sp { display: none; }
.spk--wide .spk-amt { gap: 1.6cqi; text-shadow: 0 0.4cqi 1.6cqi rgba(0, 0, 0, 0.45); }
.spk--wide .spk-num { font-size: 11cqi; }
.spk--wide .spk-num.is-name { font-size: 6cqi; }
.spk--wide .spk-amt i { font-size: 5.2cqi; }
.spk--wide .spk-amt .sp-sar { font-size: 7.4cqi; }
.spk--wide.is-light .spk-top, .spk--wide.is-light .spk-name, .spk--wide.is-light .spk-foot { color: #111; }
.spk--wide.is-light .spk-amt { text-shadow: none; }
.spk--wide.is-light .spk-line { color: rgba(0, 0, 0, 0.72); }
.spk--wide.is-light .spk-store { color: #6b4e00; }
/* A game top-up's tile: the game's own cover art, whole tile. */
img.spk-cover { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 290 / 183; border-radius: 14px; object-fit: contain; }
/* A square frame (home rows, cart): the hanging card centred, whole. */
.spk-sq { display: flex; align-items: center; justify-content: center; inline-size: 100%; aspect-ratio: 1; }
.spk-sq > .spk { inline-size: 64%; }
.spk-sq > .spk--wide, .spk-sq > img.spk-cover { inline-size: 100%; }
.spk-num.is-svc { font-size: 8cqi; font-weight: 800; }
/* The homepage's moving strips (banner b1): wide cards in a row, the row twice, moved by half its width. */
.spk-strip { display: flex; inline-size: max-content; }
.spk-cell { display: block; flex: none; inline-size: 300px; margin-right: 6px; }
@keyframes spkRunL { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes spkRunR { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }