/* Game cover art drawn with CSS (see public/js/lib/covers.js). 1em = 10% of the card width. */
.game-card { container-type: inline-size; }
.game-card .gart::before { display: none; }
.cv { position: absolute; inset: 0; font-size: 10cqw; }
.cv > * { position: absolute; transition: translate 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.game-card:hover .cv > .lift:nth-of-type(odd) { translate: 0 -0.25em; }
.game-card:hover .cv > .lift:nth-of-type(even) { translate: 0 0.15em; }
.cv-glow { width: 6em; height: 6em; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.32), transparent 65%); }
.cv-txt { font-weight: 900; color: #fff; letter-spacing: -0.04em; text-shadow: 0 0.08em 0.35em rgba(0, 0, 0, 0.35); line-height: 1; white-space: nowrap; }
.cv-txt.up { color: #3ef2a6; text-shadow: 0 0 0.4em rgba(62, 242, 166, 0.7); }
.cv-txt.down { color: #ff6b7a; text-shadow: 0 0 0.4em rgba(255, 107, 122, 0.7); }
.cv-txt.vs { font-style: italic; color: #ffe2bf; }
.cv-sym { font-size: 1.6em; width: 1.7em; height: 1.7em; border-radius: 0.38em; line-height: 1; background: linear-gradient(145deg, #fff, #f2e6cc); box-shadow: inset 0 -0.1em 0 rgba(0, 0, 0, 0.12), 0 0.25em 0.55em rgba(0, 0, 0, 0.4); display: grid; place-items: center; }
.cv-die { width: 2.5em; height: 2.5em; border-radius: 0.55em; background: linear-gradient(145deg, #fff, #d6d8e4); box-shadow: inset 0 -0.18em 0 rgba(0, 0, 0, 0.13), inset 0 0.05em 0 #fff, 0 0.45em 0.9em rgba(0, 0, 0, 0.45); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 0.36em; }
.cv-die i { width: 0.42em; height: 0.42em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3a3f55, #11131c); align-self: center; justify-self: center; }
.cv-die.red { background: linear-gradient(145deg, #ff5d6c, #c3203a); }
.cv-die.red i { background: #fff; }
.cv-card { width: 2.4em; height: 3.4em; border-radius: 0.3em; background: linear-gradient(160deg, #fff, #eceef5); color: #151826; box-shadow: 0 0.35em 0.8em rgba(0, 0, 0, 0.42), inset 0 0 0 0.04em rgba(0, 0, 0, 0.08); font-weight: 900; }
.cv-card .r { position: absolute; top: 0.2em; left: 0.24em; font-size: 0.62em; line-height: 1; text-align: center; }
.cv-card .s { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.35em; }
.cv-card.red { color: #e0193a; }
.cv-card.back { background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0 18%, transparent 19%), repeating-linear-gradient(45deg, #ff8a1f 0 0.22em, #d95c00 0.22em 0.44em); border: 0.16em solid #fff; }
.cv-coin { width: 2.9em; height: 2.9em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d1, #ffc93c 35%, #ff8a1f 68%, #a84300); box-shadow: inset 0 0 0 0.18em rgba(120, 45, 0, 0.32), inset 0 0 0 0.42em rgba(255, 230, 160, 0.25), 0 0.45em 1em rgba(0, 0, 0, 0.38); display: grid; place-items: center; color: #7a3300; font-weight: 900; }
.cv-coin::after { content: 'M'; font-size: 1.15em; text-shadow: 0 0.04em 0 rgba(255, 255, 255, 0.45); }
.cv-svg { left: 6%; top: 6%; width: 88%; height: 94%; filter: drop-shadow(0 0 0.5em rgba(255, 255, 255, 0.35)); }
.cv-ring { width: 5em; height: 5em; border-radius: 50%; border: 0.16em solid rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.12), 0 0 0 1em rgba(255, 255, 255, 0.06); }
.cv-grid3 { display: grid; grid-template-columns: repeat(3, 1.6em); gap: 0.28em; }
.cv-grid3 span { width: 1.6em; height: 1.6em; border-radius: 0.32em; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 -0.12em 0 rgba(0, 0, 0, 0.3), inset 0 0.05em 0 rgba(255, 255, 255, 0.12); position: relative; }
.cv-grid3 span.gem { background: rgba(255, 255, 255, 0.92); }
.cv-grid3 span.gem::after { content: ''; position: absolute; inset: 28%; background: linear-gradient(135deg, #7cffc9, #0fb878); transform: rotate(45deg); border-radius: 0.08em; box-shadow: 0 0 0.4em rgba(34, 224, 138, 0.8); }
.cv-grid3 span.bomb { background: #2a1015; }
.cv-grid3 span.bomb::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8090, #c3203a 60%, #5a0b17); box-shadow: 0 0 0.5em rgba(255, 77, 94, 0.9); }
.cv-pegs { inset: 0; }
.cv-pegs i { position: absolute; width: 0.34em; height: 0.34em; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0.25em rgba(255, 255, 255, 0.6); }
.cv-ball { width: 0.75em; height: 0.75em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #ffb347 50%, #ff6a00); box-shadow: 0 0 0.6em rgba(255, 170, 60, 0.95); }
.cv-ball.white { background: radial-gradient(circle at 35% 35%, #fff, #d8dae5); box-shadow: 0 0 0.4em rgba(255, 255, 255, 0.8); width: 0.6em; height: 0.6em; }
.cv-slots { left: 10%; right: 10%; bottom: 2%; height: 0.55em; display: flex; gap: 0.12em; }
.cv-slots span { flex: 1; border-radius: 0.12em; box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.3); }
.cv-roulette { width: 5.6em; height: 5.6em; border-radius: 50%; background: radial-gradient(circle, transparent 54%, #3b2408 55% 58%, transparent 59%), repeating-conic-gradient(#d61f3c 0 10deg, #151826 10deg 20deg); box-shadow: 0 0 0 0.3em #c08a2a, 0 0 0 0.45em #6b4310, 0 0.6em 1.2em rgba(0, 0, 0, 0.45); }
.cv-roulette b { position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe08a, #c08a2a 60%, #6b4310); box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.5); }
.cv-wheel { width: 5.4em; height: 5.4em; border-radius: 50%; background: conic-gradient(#ff4d5e 0 45deg, #ffc53d 45deg 90deg, #22e08a 90deg 135deg, #4da3ff 135deg 180deg, #a855f7 180deg 225deg, #ff8a1f 225deg 270deg, #ffffff 270deg 315deg, #ff5e3a 315deg 360deg); box-shadow: 0 0 0 0.22em #fff, 0 0.6em 1.2em rgba(0, 0, 0, 0.4); }
.cv-wheel b { position: absolute; inset: 40%; border-radius: 50%; background: #fff; box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.4); }
.cv-pointer { width: 0; height: 0; border-left: 0.5em solid transparent; border-right: 0.5em solid transparent; border-top: 0.9em solid #fff; filter: drop-shadow(0 0.15em 0.2em rgba(0, 0, 0, 0.4)); }
.cv-reels { display: flex; gap: 0.25em; padding: 0.35em; border-radius: 0.5em; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 0.12em rgba(255, 220, 150, 0.5); }
.cv-reels span { width: 1.55em; height: 2.3em; border-radius: 0.3em; background: linear-gradient(180deg, #e9e3d5, #fff 30%, #fff 70%, #e9e3d5); display: grid; place-items: center; font-size: 1.15em; font-weight: 900; color: #e0193a; text-shadow: 0 0.04em 0 #ffb3be; font-style: italic; }
.cv-tower { display: flex; flex-direction: column; gap: 0.22em; }
.cv-tower div { display: flex; gap: 0.22em; }
.cv-tower span { width: 1.5em; height: 0.85em; border-radius: 0.22em; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 -0.08em 0 rgba(0, 0, 0, 0.3); }
.cv-tower span.dim { background: rgba(0, 0, 0, 0.28); }
.cv-tower span.on { background: linear-gradient(180deg, #7cffc9, #0fb878); box-shadow: 0 0 0.45em rgba(34, 224, 138, 0.75); }
.cv-plate { width: 5.4em; height: 5.4em; border-radius: 50%; background: radial-gradient(circle, #ffffff 0 55%, #e8e2d2 56% 64%, #f7f3ea 65%); box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.4), inset 0 -0.2em 0.4em rgba(0, 0, 0, 0.12); }
.cv-plate i { position: absolute; width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #d9d9e3); box-shadow: 0 0.12em 0.2em rgba(0, 0, 0, 0.35); }
.cv-plate i.r { background: radial-gradient(circle at 35% 35%, #ff7a87, #c3203a); }
.cv-env { width: 2.6em; height: 3.7em; border-radius: 0.3em; background: linear-gradient(170deg, #ff3b4e, #b5121f); box-shadow: 0 0.45em 0.9em rgba(0, 0, 0, 0.4), inset 0 0 0 0.08em rgba(255, 210, 120, 0.6); overflow: hidden; }
.cv-env::before { content: ''; position: absolute; left: -10%; right: -10%; top: -0.9em; height: 2em; border-radius: 50%; background: linear-gradient(180deg, #d81b2e, #ff4558); box-shadow: 0 0.08em 0 rgba(255, 210, 120, 0.7); }
.cv-env::after { content: ''; position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); width: 1.1em; height: 1.1em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe7a0, #ffc53d 60%, #d48b00); box-shadow: 0 0 0 0.12em rgba(181, 18, 31, 0.6); }
.cv-track { width: 7.4em; display: flex; flex-direction: column; gap: 0.3em; padding: 0.3em 0; }
.cv-track div { height: 1em; border-radius: 0.5em; background: rgba(0, 0, 0, 0.25); position: relative; box-shadow: inset 0 0.06em 0 rgba(0, 0, 0, 0.3); }
.cv-track div i { position: absolute; top: 50%; width: 0.95em; height: 0.95em; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 0.12em #fff, -0.6em 0 0.4em -0.2em rgba(255, 255, 255, 0.5); }
.cv-track b { position: absolute; right: 0.6em; top: 0; bottom: 0; width: 0.56em; background: repeating-conic-gradient(#fff 0 25%, #151826 0 50%) 0 0 / 0.28em 0.28em; border-radius: 0.1em; }
.cv-ticket { width: 6.6em; padding: 0.35em; border-radius: 0.3em; background: #fffaf0; box-shadow: 0 0.45em 0.9em rgba(0, 0, 0, 0.4); display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.15em; }
.cv-ticket span { height: 0.95em; border-radius: 0.14em; background: #f1e7d1; display: grid; place-items: center; font-size: 0.55em; font-weight: 800; color: #7a3300; }
.cv-ticket span:empty { background: #e6d9bd; }
.cv-ticket span.m { background: #e0193a; color: #fff; border-radius: 50%; }
.cv-chip { width: 1.6em; height: 1.6em; border-radius: 50%; background: radial-gradient(circle, #151826 0 38%, transparent 39%), repeating-conic-gradient(#fff 0 22.5deg, #151826 22.5deg 45deg); box-shadow: 0 0 0 0.1em #fff, 0 0.25em 0.5em rgba(0, 0, 0, 0.45); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 1em; }
.cv-chip span { font-size: 0.6em; }
.cv-chip.red { background: radial-gradient(circle, #c3203a 0 38%, transparent 39%), repeating-conic-gradient(#fff 0 22.5deg, #c3203a 22.5deg 45deg); }
.cv-hash { display: grid; grid-template-columns: repeat(3, 1.7em); grid-template-rows: repeat(3, 1.7em);
  background: linear-gradient(#fff, #fff) 33.3% 0 / 0.12em 100% no-repeat, linear-gradient(#fff, #fff) 66.6% 0 / 0.12em 100% no-repeat, linear-gradient(#fff, #fff) 0 33.3% / 100% 0.12em no-repeat, linear-gradient(#fff, #fff) 0 66.6% / 100% 0.12em no-repeat; }
.cv-hash span { display: grid; place-items: center; font-weight: 900; font-size: 1.25em; line-height: 1; }
.cv-hash .x { color: #fff; text-shadow: 0 0 0.35em #fff, 0 0 0.6em #4dd8ff; }
.cv-hash .o { color: #ffe08a; text-shadow: 0 0 0.35em #ffc53d, 0 0 0.6em #ff8a1f; }
.cv-board { left: 12%; right: 12%; top: 8%; bottom: 8%; border-radius: 0.3em; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.28) 0 0.05em, transparent 0.05em 1.1em), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 0.05em, transparent 0.05em 1.1em), rgba(0, 0, 0, 0.18); }
.cv-stone { width: 0.95em; height: 0.95em; border-radius: 50%; box-shadow: 0 0.15em 0.25em rgba(0, 0, 0, 0.45); }
.cv-stone.b { background: radial-gradient(circle at 35% 30%, #5b6178, #10121a 70%); }
.cv-stone.w { background: radial-gradient(circle at 35% 30%, #fff, #cfd2dd 70%); }
.cv-line { width: 6.5em; height: 0.16em; border-radius: 0.1em; background: #ffe08a; box-shadow: 0 0 0.5em #ffc53d; opacity: 0.9; }
.cv-stack { display: flex; flex-direction: column-reverse; align-items: center; }
.cv-stack i { width: 2.4em; height: 0.75em; margin-top: -0.38em; border-radius: 50%; background: radial-gradient(ellipse at 40% 30%, #fff1b8, #ffc93c 45%, #d97a00); box-shadow: inset 0 -0.12em 0 #a85a00, 0 0.15em 0.3em rgba(0, 0, 0, 0.3); }
.cv-oaq { display: flex; align-items: center; gap: 0.16em; padding: 0.3em; border-radius: 1.4em; background: linear-gradient(180deg, #8b5a2b, #5e3a17); box-shadow: inset 0 0.1em 0 rgba(255, 255, 255, 0.2), 0 0.45em 0.9em rgba(0, 0, 0, 0.45); }
.cv-oaq span { width: 1.25em; height: 1.25em; border-radius: 0.3em; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0.08em 0.15em rgba(0, 0, 0, 0.5); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 0.08em; }
.cv-oaq span.q { width: 1.4em; height: 2em; border-radius: 1em 0.3em 0.3em 1em; }
.cv-oaq span.q:last-child { border-radius: 0.3em 1em 1em 0.3em; }
.cv-oaq i { width: 0.36em; height: 0.36em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #b8bccb); }
.cv-oaq span.q i { width: 0.6em; height: 0.6em; background: radial-gradient(circle at 35% 35%, #ffe08a, #c08a2a); }

/* small colour dot instead of icons (sidebar / tables) */
.gdot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05); display: inline-block; }
.game-cell .gdot { width: 10px; height: 10px; }
.game-head .gicon.cover { width: 64px; height: 64px; border-radius: 16px; position: relative; overflow: hidden; container-type: inline-size; }
.game-head .gicon.cover .cv { font-size: 10cqw; }