/* Bettcat mini 20-en: VIP club membership card (credit-card shape) + Trixino chip */
:root {
  --base: #0f1319;
  --sheet: #181d25;
  --hair: #2a313d;
  --white: #eef2f7;
  --slate: #929db0;
  --cyan: #3ed3e3;
  --cyan-low: #1a9eae;
  --gold: #e9be3e;
  --gold-dark: #a8821c;
  --trx-a: #8f45f5;
  --trx-b: #d63fc0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 24px 16px;
  background: radial-gradient(600px 380px at 50% 20%, #1b2d4d 0%, transparent 70%), var(--base);
  color: var(--white); font: 400 14.5px/1.55 "IBM Plex Sans", system-ui, sans-serif;
}
a { color: inherit; }

.club { width: 100%; max-width: 420px; padding: 22px 18px 18px; border-radius: 20px; background: var(--sheet); border: 1px solid var(--hair); box-shadow: 0 24px 60px rgba(0,0,0,.5); text-align: center; }
.club-kicker { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.club-kicker a { color: var(--cyan); text-decoration: none; }
.club-kicker a:hover { text-decoration: underline; }
.club-h { margin-top: 6px; font: 400 25px/1.2 "Righteous", sans-serif; }

.plastic {
  position: relative; display: flex; flex-direction: column; margin: 18px auto 0; width: 100%; max-width: 360px; aspect-ratio: 1.586 / 1;
  padding: 16px 18px; border-radius: 16px; text-decoration: none; text-align: left; overflow: hidden;
  background:
    radial-gradient(220px 160px at 90% 10%, rgba(62,211,227,.35), transparent 70%),
    repeating-linear-gradient(125deg, rgba(255,255,255,.035) 0 10px, transparent 10px 22px),
    linear-gradient(135deg, #2a5ac0 0%, #1b3577 50%, #141f3d 100%);
  border: 1px solid #3a67c4; box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);
  transform: rotate(-2deg); transition: transform .25s;
}
.plastic:hover { transform: rotate(0) translateY(-3px); }
.plastic-top { display: flex; justify-content: space-between; align-items: center; }
.plastic-brand { display: flex; align-items: center; gap: 6px; font: 400 20px/1 "Righteous", sans-serif; }
.plastic-brand svg { width: 30px; height: 27px; }
.plastic-tier { font: 400 15px/1 "Righteous", sans-serif; letter-spacing: .14em; color: #2f2300; background: linear-gradient(180deg, #f6d873, var(--gold)); padding: 4px 9px; border-radius: 5px; }
.plastic-chip { width: 42px; height: 31px; margin-top: 14px; border-radius: 6px;
  background: linear-gradient(90deg, transparent 45%, rgba(0,0,0,.25) 45% 55%, transparent 55%), linear-gradient(0deg, transparent 45%, rgba(0,0,0,.25) 45% 55%, transparent 55%), linear-gradient(135deg, #f3d77d, #c89a2a); }
.plastic-num { margin-top: auto; font: 600 15px/1 "IBM Plex Sans", monospace; letter-spacing: .1em; color: #dfe8f8; text-shadow: 0 1px 0 rgba(0,0,0,.6); white-space: nowrap; }
.plastic-bottom { display: flex; justify-content: space-between; margin-top: 10px; font: 400 15px/1.1 "Righteous", sans-serif; color: var(--gold); }
.plastic-bottom small { display: block; font: 600 9.5px/1.4 "IBM Plex Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #a9bbdc; }
.plastic-bottom span:last-child { text-align: right; color: #fff; }

.perks { list-style: none; margin-top: 22px; display: grid; gap: 7px; text-align: left; }
.perks li { padding: 9px 12px 9px 34px; position: relative; border-radius: 10px; background: #1f2530; font-size: 13.5px; color: #c6cedb; }
.perks li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fbe39a, var(--gold) 60%, var(--gold-dark)); }
.perks b { color: var(--white); }

.club-cta { display: block; margin-top: 16px; padding: 13px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 16px; color: #04272c; background: var(--cyan); box-shadow: 0 4px 0 var(--cyan-low); transition: filter .15s, transform .15s; }
.club-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.club-small { margin-top: 8px; font-size: 11.5px; color: var(--slate); }

.trx { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: 12px; text-align: left;
  background: linear-gradient(120deg, rgba(143,69,245,.18), rgba(214,63,192,.14)); border: 1px solid rgba(181,92,236,.5); }
.trx-badge { flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 4px 7px; border-radius: 6px; background: linear-gradient(135deg, var(--trx-a), var(--trx-b)); }
.trx p { font-size: 13px; color: #ded3f2; }
.trx a { color: #e6a6ff; font-weight: 700; }
.trx b { color: #fff; }

.club-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 11px; color: #77828f; line-height: 1.7; }
.club-foot a { color: #b2bccb; }

@media (max-width: 380px) {
  .club { padding: 20px 14px 16px; }
  .club-h { font-size: 22px; }
  .plastic { padding: 12px 14px; }
  .plastic-num { font-size: 12.5px; letter-spacing: .06em; }
  .plastic-chip { margin-top: 8px; width: 36px; height: 26px; }
}