/* Durak Football — card backs («рубашки»). Markup: <div class="cb cb-NAME"><i></i></div>
   Same 63:88 card as .pk; everything is in cqw, so a back reads the same at any width (set --w). */
.cb { --w: 60px; container-type: inline-size; position: relative; width: var(--w); aspect-ratio: 63 / 88; flex: none;
  border-radius: calc(var(--w) * .08); overflow: hidden; background: #fbfaf5;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 3px 10px rgba(0,0,0,.45); }
.cb::before, .cb::after, .cb > i { content: ""; position: absolute; pointer-events: none; }
.cb::before { inset: 4.5cqw; border-radius: 5cqw; }
.cb > i { left: 50%; top: 50%; translate: -50% -50%; }

/* shared medallion: a football in a ring */
.cb { --ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Ccircle r='46' fill='%23fbfaf5'/%3E%3Cpath d='M0-17 16-5 10 14-10 14-16-5Z' fill='%2315171c'/%3E%3Cpath d='M0-17V-46M16-5 43-14M10 14 27 38M-10 14-27 38M-16-5-43-14' stroke='%2315171c' stroke-width='3'/%3E%3Cpath d='M-12-44 0-36 12-44M34-28 38-16 46-22M40 20 30 26 34 38M-40 20-30 26-34 38M-34-28-38-16-46-22' fill='none' stroke='%2315171c' stroke-width='3'/%3E%3Ccircle r='46' fill='none' stroke='%2315171c' stroke-width='3'/%3E%3C/svg%3E"); }

/* 1. Класична (free default): navy lattice, gold frame, ball medallion */
.cb-classic::before { background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 1.2cqw, transparent 1.2cqw 5cqw),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 1.2cqw, transparent 1.2cqw 5cqw),
    radial-gradient(circle at 50% 50%, #24479c, #0d2350 70%);
  box-shadow: inset 0 0 0 1.4cqw #e9b949, inset 0 0 0 2.6cqw #0d2350, inset 0 0 0 3.2cqw rgba(233,185,73,.6); }
.cb-classic > i { width: 40cqw; aspect-ratio: 1; border-radius: 50%; background: var(--ball) center / 78% no-repeat, #0d2350;
  box-shadow: 0 0 0 1.6cqw #e9b949, 0 0 0 3.4cqw #0d2350, 0 0 0 4cqw rgba(233,185,73,.6); }

/* 2. Вишиванка: cream linen with a red-black embroidery rhomb band */
.cb-vyshyvanka { background: #f4ecdc; }
.cb-vyshyvanka::before { inset: 4.5cqw; background:
    linear-gradient(45deg, transparent 42%, #c8202f 42% 58%, transparent 58%) 0 0 / 11cqw 11cqw,
    linear-gradient(-45deg, transparent 42%, #c8202f 42% 58%, transparent 58%) 0 0 / 11cqw 11cqw,
    linear-gradient(45deg, transparent 46%, #15171c 46% 54%, transparent 54%) 5.5cqw 5.5cqw / 11cqw 11cqw,
    linear-gradient(-45deg, transparent 46%, #15171c 46% 54%, transparent 54%) 5.5cqw 5.5cqw / 11cqw 11cqw,
    #f4ecdc;
  -webkit-mask: linear-gradient(90deg, #000 0 24%, transparent 24% 76%, #000 76%); mask: linear-gradient(90deg, #000 0 24%, transparent 24% 76%, #000 76%);
  box-shadow: inset 0 0 0 1cqw #c8202f; }
.cb-vyshyvanka::after { inset: 4.5cqw; border-radius: 5cqw; box-shadow: inset 0 0 0 1cqw #c8202f; }
.cb-vyshyvanka > i { width: 30cqw; aspect-ratio: 1; rotate: 45deg; background:
    linear-gradient(#c8202f, #c8202f) center / 40% 40% no-repeat,
    conic-gradient(from 45deg, #15171c 0 25%, #c8202f 0 50%, #15171c 0 75%, #c8202f 0) center / 72% 72% no-repeat, #f4ecdc;
  box-shadow: 0 0 0 1.2cqw #15171c, 0 0 0 2.4cqw #f4ecdc, 0 0 0 3.2cqw #c8202f; }

/* 3. Синьо-жовта: diagonal split, big ball outline */
.cb-flag::before { background: linear-gradient(155deg, #1f5bd6 0 50%, #ffd23f 50%); box-shadow: inset 0 0 0 1.2cqw rgba(255,255,255,.85); }
.cb-flag > i { width: 46cqw; aspect-ratio: 1; border-radius: 50%; background: var(--ball) center / 100% no-repeat; filter: drop-shadow(0 1.5cqw 2cqw rgba(0,0,0,.35)); }

/* 4. Поле: top-down pitch with mown stripes */
.cb-pitch::before { background:
    linear-gradient(transparent calc(50% - .5cqw), rgba(255,255,255,.9) calc(50% - .5cqw) calc(50% + .5cqw), transparent calc(50% + .5cqw)),
    repeating-linear-gradient(#2f8a4a 0 11%, #277a40 11% 22%);
  box-shadow: inset 0 0 0 1.4cqw #fbfaf5, inset 0 0 0 2.4cqw rgba(255,255,255,.9); }
.cb-pitch::after { left: 26%; right: 26%; top: 4.5cqw; bottom: 4.5cqw; --l: rgba(255,255,255,.9); background:
    linear-gradient(var(--l), var(--l)) 0 0 / 1cqw 15% no-repeat, linear-gradient(var(--l), var(--l)) 100% 0 / 1cqw 15% no-repeat,
    linear-gradient(var(--l), var(--l)) 0 15% / 100% 1cqw no-repeat,
    linear-gradient(var(--l), var(--l)) 0 100% / 1cqw 15% no-repeat, linear-gradient(var(--l), var(--l)) 100% 100% / 1cqw 15% no-repeat,
    linear-gradient(var(--l), var(--l)) 0 85% / 100% 1cqw no-repeat; }
.cb-pitch > i { width: 30cqw; aspect-ratio: 1; border-radius: 50%; border: 1cqw solid rgba(255,255,255,.9);
  background: radial-gradient(circle, #fff 0 5%, transparent 6%); }

/* 5. Сітка воріт: white goal net over a dark stadium blue */
.cb-net::before { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0 28 8.1V24.2L14 32.3 0 24.2V8.1ZM14 32.3V48.5' fill='none' stroke='%23e9eef7' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 22cqw auto,
    #12306e;
  box-shadow: inset 0 0 0 1.4cqw #e9eef7; }
.cb-net > i { width: 34cqw; aspect-ratio: 1; border-radius: 50%; background: var(--ball) center / 100% no-repeat; box-shadow: 0 0 0 1.4cqw #12306e; }

/* 6. Ретро-м'яч: brown leather panels with white stitching, like a 1960s ball */
.cb-retro { background: #f1e6d0; }
.cb-retro::before { background:
    repeating-linear-gradient(90deg, transparent 0 calc(33.33% - .6cqw), rgba(255,255,255,.75) calc(33.33% - .6cqw) calc(33.33% + .6cqw), transparent calc(33.33% + .6cqw) 33.33%),
    repeating-linear-gradient(0deg, transparent 0 calc(25% - .6cqw), rgba(255,255,255,.75) calc(25% - .6cqw) calc(25% + .6cqw), transparent calc(25% + .6cqw) 25%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 .8cqw, transparent .8cqw 2.4cqw),
    #8a4b24;
  box-shadow: inset 0 0 0 1.4cqw #f1e6d0, inset 0 0 0 2.4cqw #5b2e13; }
.cb-retro > i { width: 30cqw; height: 12cqw; border-radius: 6cqw; background:
    repeating-linear-gradient(90deg, #f1e6d0 0 1.2cqw, transparent 1.2cqw 3cqw) center / 80% 1.2cqw no-repeat, #5b2e13;
  box-shadow: 0 0 0 1.2cqw #f1e6d0; }