/* FOOTDECK — card front, design «Модерн» (playing-card format). Needs core.css. */
  /* ===== Design v2: playing-card format, layered poster ===== */
  :root { --display: 'Fira Sans Extra Condensed', 'Arial Narrow', Impact, sans-serif; }

  .card { aspect-ratio: 63 / 88; }
  .card:focus-visible { border-radius: 5cqw; }
  .face {
    overflow: hidden; border-radius: 5cqw;
    background: var(--mat); color: var(--ink);
    box-shadow: 0 3cqw 8cqw rgba(0,0,0,.6), inset 0 0 0 .55cqw var(--edge);
  }
  .coll-grid .face { box-shadow: 0 1cqw 3cqw rgba(0,0,0,.5), inset 0 0 0 .55cqw var(--edge); }
  .face > * { position: absolute; }

  .matfx { inset: -8%; background: var(--matfx); transform: translate(calc(var(--px) * -3cqw), calc(var(--py) * -3cqw)); }
  .back .matfx { opacity: .45; }
  .beams {
    inset: 0; mix-blend-mode: screen;
    background:
      conic-gradient(from 142deg at 6% -6%, transparent 0deg, var(--beam) 9deg, transparent 22deg),
      conic-gradient(from 196deg at 94% -6%, transparent 0deg, var(--beam) 13deg, transparent 22deg);
    transform: translateX(calc(var(--px) * 2cqw));
  }
  .halftone {
    inset: 0;
    background: radial-gradient(circle, var(--dot) 30%, transparent 34%) 0 0 / 2.4cqw 2.4cqw;
    -webkit-mask: linear-gradient(200deg, transparent 35%, #000 95%);
            mask: linear-gradient(200deg, transparent 35%, #000 95%);
  }
  .bignum {
    left: 0; right: 0; top: 6%; text-align: center;
    font: 900 78cqw/1 var(--display);
    color: transparent; -webkit-text-stroke: .5cqw var(--ink); opacity: .15;
    transform: translate(calc(var(--px) * 1.5cqw), calc(var(--py) * 1.5cqw));
  }
  .player {
    left: -6%; right: -6%; bottom: 20%; height: 64%;
    transform: translate(calc(var(--px) * 4.5cqw), calc(var(--py) * 2.5cqw));
  }
  .player svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .frame { inset: 3cqw; border: .45cqw solid var(--line); border-radius: 3cqw; pointer-events: none; }

  .tl { top: 6.5cqw; left: 7cqw; display: grid; justify-items: center; gap: .8cqw; }
  .ovr { font: 900 21cqw/1 var(--display); letter-spacing: -.01em; margin-bottom: -2cqw; }
  .pos { font: 600 5.6cqw/1.1 var(--label); letter-spacing: .1em; }
  .idx { display: flex; gap: .8cqw; align-items: baseline; font: 600 6.8cqw/1.1 var(--label); }
  .idx i { font-style: normal; }
  .idx.red i { color: var(--red); }
  .tr { top: 7cqw; right: 7cqw; display: grid; justify-items: center; gap: 2cqw; }
  .tr .flag { width: 12cqw; height: 8cqw; }
  .tr .crest { width: 11.5cqw; }
  .tier {
    top: 7.2cqw; left: 50%; transform: translateX(-50%);
    font: 600 3.5cqw/1.1 var(--label); letter-spacing: .24em; white-space: nowrap;
    padding: .9cqw 2cqw .9cqw 2.24cqw; border: .35cqw solid var(--line); border-radius: 10cqw;
    background: var(--tierbg, transparent);
  }

  .plate {
    left: 3cqw; right: 3cqw; bottom: 3cqw;
    padding: 15cqw 4cqw 4cqw; text-align: center;
    background: linear-gradient(to top, var(--plate) 58%, transparent);
    border-radius: 0 0 3cqw 3cqw;
  }
  .sur { font: 900 15cqw/1.02 var(--display); text-transform: uppercase; }
  .sub { margin-top: 1.2cqw; font: 700 3.3cqw/1.3 Manrope, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
  .row { margin-top: 3cqw; padding-top: 2.6cqw; border-top: .35cqw solid var(--line); display: grid; grid-template-columns: repeat(6, 1fr); font-variant-numeric: tabular-nums; }
  .row div { display: grid; gap: .8cqw; }
  .row b { font: 800 7cqw/1.05 var(--display); }
  .row span { font: 500 3.1cqw/1.1 var(--label); letter-spacing: .04em; color: var(--muted); }

  .ring {
    inset: 0; border-radius: 5cqw; padding: .9cqw; pointer-events: none;
    background: var(--ringbg, transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  .holo {
    inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: var(--holoO);
    background: linear-gradient(115deg, transparent 18%, #ff5ea8 30%, #ffd36b 38%, #6bffb8 46%, #6bd6ff 54%, #b07bff 62%, transparent 76%);
    background-size: 260% 260%; background-position: var(--mx) var(--my);
  }
  .spark {
    inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: var(--sparkO);
    background-image: var(--sparkle); background-size: 46cqw 46cqw;
    background-position: calc(var(--px) * 14cqw) calc(var(--py) * 14cqw);
    -webkit-mask: radial-gradient(circle at var(--mx) var(--my), #000 0, rgba(0,0,0,.2) 60%);
            mask: radial-gradient(circle at var(--mx) var(--my), #000 0, rgba(0,0,0,.2) 60%);
  }
  .glare {
    inset: 0; pointer-events: none; mix-blend-mode: overlay;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.6), transparent 46%);
  }

  /* tiers */
  .t-bronze {
    --mat: #4a2c19; --edge: #c88b5c;
    --matfx: radial-gradient(120% 80% at 50% 0%, #bb7b4c, #6a3f22 45%, #2b180c 100%);
    --beam: rgba(255, 205, 160, .16); --dot: rgba(0,0,0,.32);
    --ink: #fff0e2; --muted: rgba(255,240,226,.6); --line: rgba(255,240,226,.24); --plate: #2b180c;
    --sil1: #1b0e05; --sil2: #5a341c; --rim: #ffc08a; --red: #ff9a82;
    --sparkO: .14; --holoO: 0;
  }
  .t-silver {
    --mat: #aeb7bf; --edge: #f2f5f8;
    --matfx: linear-gradient(170deg, #ffffff 0%, #b9c2ca 22%, #eef2f5 38%, #7f8a95 60%, #d5dbe0 78%, #8d98a2 100%);
    --beam: rgba(255, 255, 255, .5); --dot: rgba(13,19,25,.16);
    --ink: #0d1319; --muted: rgba(13,19,25,.58); --line: rgba(13,19,25,.22); --plate: #c4ccd3;
    --sil1: #1a2128; --sil2: #56616c; --rim: #1f6fd6; --red: #c21d2a;
    --sparkO: .3; --holoO: .14; --hudshadow: rgba(255,255,255,.6); --tierbg: rgba(238,242,245,.7);
  }
  .t-gold {
    --mat: #d9a53a; --edge: #fff0b8;
    --matfx: linear-gradient(170deg, #fff3c4 0%, #e3b44e 24%, #fce19a 40%, #a8731a 62%, #f0c965 80%, #8a5a0c 100%);
    --beam: rgba(255, 250, 220, .55); --dot: rgba(70,40,0,.2);
    --ink: #1d1302; --muted: rgba(29,19,2,.6); --line: rgba(29,19,2,.24); --plate: #d8a53f;
    --sil1: #2a1a02; --sil2: #7a5410; --rim: #8b1119; --red: #94101b;
    --sparkO: .6; --holoO: .12; --hudshadow: rgba(255,245,210,.6); --tierbg: rgba(252,225,154,.7);
  }
  .t-silver .player, .t-gold .player { --rim: #fff; }
  .t-hero {
    --mat: #0c0c10; --edge: #ff2d3d;
    --matfx:
      radial-gradient(90% 55% at 50% 108%, rgba(255,45,61,.6), transparent 70%),
      repeating-linear-gradient(115deg, transparent 0 13cqw, rgba(255,45,61,.85) 13cqw 14.2cqw, transparent 14.2cqw 16.5cqw, rgba(255,45,61,.35) 16.5cqw 17.1cqw, transparent 17.1cqw 30cqw),
      #0c0c10;
    --beam: rgba(255, 90, 100, .22); --dot: rgba(255,45,61,.26);
    --ink: #ffffff; --muted: rgba(255,255,255,.62); --line: rgba(255,255,255,.2); --plate: #0c0c10;
    --sil1: #000000; --sil2: #2c0a0f; --rim: #ff4755; --red: #ff4755;
    --sparkO: .35; --holoO: .1; --hudshadow: rgba(0,0,0,.6); --tierbg: rgba(12,12,16,.75);
    --ringbg: conic-gradient(from var(--ang), #ff2d3d, #ffffff, #ff2d3d 40%, #5a0710, #ff2d3d);
    animation: spin 5s linear infinite;
  }
  .t-legend {
    --mat: #0b0916; --edge: #f4d58d;
    --matfx:
      radial-gradient(60% 45% at 18% 18%, rgba(120,80,255,.6), transparent 70%),
      radial-gradient(55% 45% at 86% 34%, rgba(255,90,170,.45), transparent 70%),
      radial-gradient(70% 50% at 50% 92%, rgba(60,220,255,.35), transparent 70%),
      #0b0916;
    --beam: rgba(210, 190, 255, .24); --dot: rgba(180,150,255,.22);
    --ink: #fbe9b7; --muted: rgba(251,233,183,.62); --line: rgba(251,233,183,.24); --plate: #0b0916;
    --sil1: #030208; --sil2: #1f1845; --rim: #f4d58d; --red: #ff84a8;
    --sparkO: .85; --holoO: .38; --hudshadow: rgba(0,0,0,.6); --tierbg: rgba(11,9,22,.75);
    --ringbg: conic-gradient(from var(--ang), #f4d58d, #ff6aa8, #72e6ff, #b8ff8f, #f4d58d);
    animation: spin 6s linear infinite;
  }
  .t-legend .front .matfx { background-size: 150% 150%; animation: aurora 10s ease-in-out infinite alternate; }
  .t-legend .sur, .t-legend .bk-name span {
    background: linear-gradient(90deg, #e2b85a, #fff6d8 50%, #e2b85a);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  @keyframes aurora { from { background-position: 0% 0%; } to { background-position: 100% 60%; } }
  @media (prefers-reduced-motion: reduce) {
    .t-hero, .t-legend, .t-legend .front .matfx { animation: none !important; }
  }