/* =====================================================================
   THE FLOOR — the card grid.
   8 columns by 8 rows, held as 16 half-columns of 72px (16*72 + 15*12 =
   1332) so a card can be one and a half columns wide if it ever needs to.
   A single computed zoom scales the whole grid to whatever width the shell
   gives us, up as well as down, so the cards fill the row and the gutters
   match. Card shapes: yes/no 4x2 half-cols, versus 6x2, ranking 4x4.
   ===================================================================== */
.fl{--hc:72px;--rh:86px;--gap:12px;--ink:#22272D;--mut:#6A727B;--faint:#8A929B;
  --line:#E6E8EC;--fill:#F4F5F7;--yes:#1C7D28;--no:#E30F0C;--gold:#9A7714;
  padding:14px 0 60px}
.fl *{box-sizing:border-box}
/* the shell sets caps and tracking on headings; the cards opt out */
.fl,.fl *{text-transform:none;font-variant:normal}
.fl .rk-q,.fl .pc-q,.fl .so-q{color:var(--ink)}
.fl-bar{display:flex;align-items:center;gap:7px;margin:0 0 14px;
  font:600 12px/16px Inter,system-ui,sans-serif;color:var(--mut)}
.fl-bar b{font-weight:600;color:var(--faint);margin-right:1px}
.fl-bar button{border:1px solid var(--line);background:#fff;color:var(--ink);height:26px;
  padding:0 11px;border-radius:7px;font:600 12px/1 Inter,sans-serif;cursor:pointer}
.fl-bar button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fl-bar .sp{width:16px}
.fl-wrap{zoom:1}
.fl-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(16,var(--hc));
  grid-auto-rows:var(--rh);width:max-content}
.fl button{font:inherit;cursor:pointer;border:none}
.fl-grid>*{cursor:pointer}

/* ---- yes / no -------------------------------------------------------- */
.pc{display:flex;flex-direction:column;justify-content:space-between;
  padding:12px 0 8px;border:1px solid #EFF0F3;border-radius:15.2px;background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 16px rgba(16,24,40,.08),0 18px 34px rgba(16,24,40,.06);
  transition:box-shadow .16s,transform .16s}
.pc:hover{transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(16,24,40,.06),0 10px 22px rgba(16,24,40,.11),0 26px 46px rgba(16,24,40,.08)}
.pc-t{display:flex;align-items:center;gap:11px;padding:0 12px;min-height:56px}
.pc-img{width:56px;height:56px;border-radius:9px;flex:none;object-fit:cover;
  object-position:center 18%;background:var(--fill);box-shadow:0 2px 6px rgba(16,24,40,.16)}
.pc-q{flex:1;min-width:0;font:600 14px/20px Inter,sans-serif;letter-spacing:-.09px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-b{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding:10px 12px 0}
.pc-b button{height:40px;border-radius:7.2px;display:flex;align-items:center;justify-content:center;
  gap:6px;font:700 14px/20px Inter,sans-serif;letter-spacing:-.09px;transition:box-shadow .16s}
.pc-b button span{font-weight:600;opacity:.72}
.pc-b .y{background:rgba(28,125,40,.15);color:var(--yes);
  box-shadow:0 1px 2px rgba(20,83,28,.10),0 4px 10px rgba(20,83,28,.16)}
.pc-b .n{background:rgba(227,15,12,.09);color:var(--no);
  box-shadow:0 1px 2px rgba(150,20,16,.09),0 4px 10px rgba(150,20,16,.14)}
.pc-b .y:hover{box-shadow:0 2px 5px rgba(20,83,28,.16),0 7px 15px rgba(20,83,28,.2)}
.pc-b .n:hover{box-shadow:0 2px 5px rgba(150,20,16,.15),0 7px 15px rgba(150,20,16,.18)}
.pc-f{display:flex;align-items:center;height:28px;margin-top:6px;padding:0 12px;
  font:490 13px/16px Inter,sans-serif;letter-spacing:-.1px;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-f i{font-style:normal;margin:0 7px;color:#C6CBD2}

/* ---- versus ---------------------------------------------------------- */
.so{position:relative;display:flex;align-items:stretch;padding:0;overflow:hidden;
  border:1px solid #EFF0F3;border-radius:15.2px;background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 16px rgba(16,24,40,.08),0 18px 34px rgba(16,24,40,.06);
  transition:box-shadow .16s,transform .16s}
.so:hover{transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(16,24,40,.06),0 10px 22px rgba(16,24,40,.11),0 26px 46px rgba(16,24,40,.08)}
.so-p{width:188px;flex:none;position:relative;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 98%);
  mask-image:linear-gradient(to bottom,#000 62%,transparent 98%)}
.so-p img{position:absolute;bottom:0;left:50%;height:168px;width:auto;display:block;
  filter:drop-shadow(0 5px 12px rgba(16,24,40,.11))}
.so-p.l img{transform:translateX(-50%) scaleX(-1)}
.so-p.r img{transform:translateX(-50%) scaleX(-1)}
.so-mid{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 10px 10px;text-align:center}
.so-q{font:600 19px/24px Inter,sans-serif;letter-spacing:-.2px}
.so-b{position:absolute;z-index:3;left:0;right:0;bottom:36px;display:flex;
  justify-content:space-between;padding:0 89px;pointer-events:none}
.so-b button{pointer-events:auto;height:38px;width:150px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:700 14px/20px Inter,sans-serif;letter-spacing:-.09px;transition:box-shadow .16s}
.so-b button span{font-weight:600;opacity:.72}
.so-b .a{background:#E4E5E7;color:#15181D;
  box-shadow:0 1px 2px rgba(16,24,40,.10),0 4px 10px rgba(16,24,40,.14)}
.so-b .b{background:#E0E8FB;color:#1D4ED8;
  box-shadow:0 1px 2px rgba(29,78,216,.10),0 4px 10px rgba(29,78,216,.14)}
.so .pc-f{position:absolute;left:0;right:0;bottom:8px;justify-content:center;margin:0;padding:0}
.so.s3 .so-p{width:152px}
.so.s3 .so-p img{height:148px}
.so.s3 .so-q{font:600 17px/21px Inter,sans-serif}
.so.s3 .so-b{padding:0 56px;bottom:34px}
.so.s3 .so-b button{width:128px;height:36px;font-size:13px}

/* ---- ranking --------------------------------------------------------
   Cutouts scattered on an open stage instead of a stack of list rows.
   Rank reads as height: first is highest. Nothing lines up on purpose.
   Players are allowed to hang a little past the card edge, so the card
   sits above its neighbours and does not clip.
   Every position lives in the .e1/.e2/.e3 and .b1/.b2/.b3 block below —
   that block is the whole layout, move the numbers and reload.
   -------------------------------------------------------------------- */
/* 1.75 cards thick. A card one thick is 156px wide, and each extra one
   swallows its own 12px gutter, so thickness t measures 168t-12: 2 thick
   was 324, 1.75 is 282. It still claims the same four half-columns and
   keeps its full four-row length, but stops short of filling them across
   and sits left in its slot. In the top half the cards beside it are
   pulled across by the 42px it gives back, so both halves of the floor
   start flush on the left and end flush on the right. */
.rk{width:282px;justify-self:start;
  position:relative;z-index:2;display:flex;flex-direction:column;padding:11px 0 8px;
  border:1px solid #EFF0F3;border-radius:15.2px;background:#fff;overflow:visible;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 16px rgba(16,24,40,.08),0 18px 34px rgba(16,24,40,.06);
  transition:box-shadow .16s,transform .16s}
.rk:hover{transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(16,24,40,.06),0 10px 22px rgba(16,24,40,.11),0 26px 46px rgba(16,24,40,.08)}
/* fixed so the stage below is the same height on every ranking card,
   however many lines the headline runs to */
.rk-t{display:flex;align-items:center;gap:10px;padding:0 13px;flex:none;height:54px}
.rk-t img{width:40px;height:40px;flex:none;border-radius:9px;object-fit:cover;
  background:var(--fill);box-shadow:0 2px 6px rgba(16,24,40,.16)}
.rk-q{flex:1;min-width:0;font:700 21px/25px Inter,sans-serif;letter-spacing:-.48px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.rk-stage{position:relative;flex:1;min-height:0;margin-top:4px}
/* z-index on the slot keeps its ground pool inside it and stacks the
   players front to back by rank at the same time */
.rk-e{position:absolute;left:var(--x);top:var(--y);transform-origin:50% 92%;
  transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.rk-ph{display:block;height:var(--h);width:auto;transition:filter .2s;
  filter:drop-shadow(0 1px 1px rgba(16,24,40,.22))
         drop-shadow(0 6px 10px rgba(16,24,40,.24))
         drop-shadow(0 20px 30px rgba(16,24,40,.20))}
/* the pool each player stands in — what lifts them off the card */
.rk-e::before{content:'';position:absolute;z-index:-1;left:50%;bottom:-5px;
  width:calc(var(--h)*.64);height:calc(var(--h)*.13);
  transform:translateX(-50%) scale(1);transform-origin:50% 50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(16,24,40,.40),rgba(16,24,40,0) 70%);
  filter:blur(3px);transition:transform .2s,opacity .2s,filter .2s}
/* pick one up: it lifts, turns on the spot and its pool tucks in under it */
.rk-e:hover{z-index:9;transform:translateY(-11px) scale(1.055) rotate(var(--rot))}
.rk-e:hover .rk-ph{filter:drop-shadow(0 2px 2px rgba(16,24,40,.22))
         drop-shadow(0 10px 16px rgba(16,24,40,.26))
         drop-shadow(0 30px 44px rgba(16,24,40,.24))}
.rk-e:hover::before{transform:translateX(-50%) scale(.86);opacity:.6;filter:blur(5px)}

.fl .rk-btn{position:absolute;left:var(--bx);top:var(--by);z-index:12;
  height:33px;padding:0 13px;border-radius:9px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  font:700 14.5px/20px Inter,sans-serif;letter-spacing:-.14px;transition:box-shadow .16s}
.fl .rk-btn span{font-weight:600;font-size:13.5px;opacity:.72}
/* solid, not a tint: these sit over the players, and a translucent fill
   let a white shirt read straight through the label. Each colour is the
   old tint already flattened onto the card. */
.rk-btn.bar{background:#F2DBE5;color:#7C0234;
  box-shadow:0 1px 2px rgba(124,2,52,.12),0 4px 10px rgba(124,2,52,.18)}
.rk-btn.rma{background:#E5E5EB;color:#23265C;
  box-shadow:0 1px 2px rgba(35,38,92,.12),0 4px 10px rgba(35,38,92,.18)}
.rk-btn.mci{background:#D1E8F5;color:#0C5E90;
  box-shadow:0 1px 2px rgba(12,94,144,.12),0 4px 10px rgba(12,94,144,.18)}
.rk-btn:hover{box-shadow:0 2px 5px rgba(16,24,40,.16),0 7px 15px rgba(16,24,40,.18)}

/* ---- the layout: three players, three buttons -----------------------
   Stage is 280 x 273. Heights step 204 / 160 / 128 so the gap between
   first, second and third is legible at a glance. --rot is how far that
   player turns when picked up.
   Mbappe's face starts about a third of the way across his own frame, so
   his label is parked left of 162 + .34*125 = 205 and never reaches it. */
.e1{--x:12px;--y:10px;--h:176px;--rot:-3.2deg;z-index:3}
.b1{--bx:104px;--by:30px}
.e2{--x:160px;--y:98px;--h:138px;--rot:2.6deg;z-index:2}
.b2{--bx:64px;--by:106px;font-size:12.5px;height:29px;padding:0 11px}
.e3{--x:96px;--y:152px;--h:112px;--rot:-2.2deg;z-index:1}
.b3{--bx:118px;--by:222px}
/* nothing hangs past the card any more */
.fl .rk{overflow:hidden}

/* ---- tomato rating --------------------------------------------------
   156x380: two half-columns by four rows — a proper poster, and the same
   height as a ranking card. Four rows is the trick: it fills a whole
   block, so the other block's bands sweep across those columns freely and
   no film-only strip is needed. Three rows could not do that, which is
   why the tall version had to be stacked.
   -------------------------------------------------------------------- */
.tc{position:relative;border-radius:15.2px;background:#fff;border:1px solid #EFF0F3;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 16px rgba(16,24,40,.08),0 18px 34px rgba(16,24,40,.06);
  transition:box-shadow .16s,transform .16s}
.tc:hover{transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(16,24,40,.06),0 10px 22px rgba(16,24,40,.11),0 26px 46px rgba(16,24,40,.08)}
.tc-ph{position:absolute;right:var(--r);bottom:var(--b);height:var(--h);width:auto;
  transform-origin:60% 92%;transition:transform .2s cubic-bezier(.2,.7,.3,1);
  filter:drop-shadow(0 2px 3px rgba(16,24,40,.18))
         drop-shadow(0 8px 14px rgba(16,24,40,.20))
         drop-shadow(0 20px 30px rgba(16,24,40,.16))}
.tc:hover .tc-ph{transform:translateY(-7px) scale(1.035) rotate(-1.6deg)}
.tc-wm{position:absolute;left:13px;top:12px;z-index:3;width:var(--tw);height:auto;display:block}
.tc-f{position:absolute;left:14px;top:var(--fy);z-index:3;white-space:nowrap;
  font:490 11px/14px Inter,sans-serif;letter-spacing:-.08px;color:#8A929B}
.tc-f i{font-style:normal;margin:0 6px;color:#C6CBD2}
.tc-s{position:absolute;left:var(--sx);top:var(--sy);z-index:4;
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 8px;
  border-radius:11px;background:#FFE3DC;color:#C02911;white-space:nowrap;
  font:700 16px/22px Inter,sans-serif;letter-spacing:-.22px;
  box-shadow:0 1px 2px rgba(192,41,17,.14),0 5px 12px rgba(192,41,17,.20)}
.tc-s img{height:24px;width:auto;display:block}


.tc .tc-ph{--r:-68px;--b:-8px;--h:252px}
.tc .tc-wm{--tw:130px}
.tc .tc-f{--fy:37px}
.tc .tc-s{--sx:12px;--sy:318px}

.rk .pc-f{margin-top:0}

/* ==== six new cards (ranked-new-cards.html, 29 Sep) ==== */
/* ---- new cards ------------------------------------------------------
   Two footprints only, both already on the floor: the versus card at 6
   half-columns and the yes/no card at 4. Everything is drawn at those
   sizes so the grid can be checked rather than guessed at.
   -------------------------------------------------------------------- */
.nc{position:relative;border-radius:15.2px;background:#fff;border:1px solid #EFF0F3;
  overflow:hidden;cursor:pointer;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 16px rgba(16,24,40,.08),0 18px 34px rgba(16,24,40,.06);
  transition:box-shadow .16s,transform .16s}
.nc:hover{transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(16,24,40,.06),0 10px 22px rgba(16,24,40,.11),0 26px 46px rgba(16,24,40,.08)}
.nc .ph{position:absolute;right:var(--r);bottom:var(--b);height:var(--h);width:auto;
  transform:rotate(var(--tilt,0deg));
  transform-origin:50% 90%;transition:transform .2s cubic-bezier(.2,.7,.3,1);
  filter:drop-shadow(0 2px 3px rgba(16,24,40,.15))
         drop-shadow(0 8px 14px rgba(16,24,40,.17))
         drop-shadow(0 20px 30px rgba(16,24,40,.13))}
.nc:hover .ph{transform:translateY(-6px) scale(1.03) rotate(var(--tilt,0deg))}
.nc .f{position:absolute;left:14px;top:14px;z-index:3;white-space:nowrap;
  font:490 11.5px/15px Inter,sans-serif;letter-spacing:-.08px;color:#8A929B}
.nc .f i{font-style:normal;margin:0 5px;color:#C6CBD2}
.nc .q{position:absolute;left:14px;top:36px;z-index:3;width:var(--qw);
  font:700 17px/21px Inter,sans-serif;letter-spacing:-.3px;color:#22272D}
.nc .ynb{position:absolute;left:14px;bottom:16px;z-index:6;display:flex;gap:8px}
.nc .ynb button{height:38px;width:86px;border-radius:8px;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:700 14px/1 Inter,sans-serif;letter-spacing:-.09px;transition:transform .14s}
.nc .ynb button span{font-weight:600;opacity:.72}
/* flattened onto white: these sit beside a cutout, and a tint lets it through */
.nc .ynb .y{background:#DDECDF;color:#1C7D28}
.nc .ynb .n{background:#FBE4E3;color:#C21714}
.nc .ynb button:hover{transform:translateY(-1px)}

.nc.god .ph{--r:4px;--b:-14px;--h:175px}
.nc.god .q{--qw:150px}
/* the handset leans, and the record drops under the buttons rather than
   sitting up in the corner */
.nc.soc .ph{--r:26px;--b:-24px;--h:202px;--tilt:-11deg}
.nc.soc .q{--qw:156px;top:16px;font-size:16px;line-height:20px}
.nc.soc .ynb{bottom:44px}
.nc.soc .f{top:auto;bottom:13px}

/* a flat mark, so no drop shadow — a logo with a cast shadow reads as a
   sticker rather than as artwork */
.nc.ai .ph{--r:16px;--b:52px;--h:118px;filter:none}
.nc.ai .q{--qw:158px;top:16px;font-size:15.5px;line-height:19px}
.nc.ai .ynb{bottom:44px}
.nc.ai .f{top:auto;bottom:13px}
.nc.gta .ph{--r:-8px;--b:-10px;--h:176px}
.nc.gta .q{--qw:148px}

.nc.goat .ph{--r:0;--b:-114px;--h:265px}
.nc.goat .q{left:0;right:0;width:auto;top:11px;text-align:center;
  font:700 16.5px/21px Inter,sans-serif;letter-spacing:-.28px}
.nc.goat .nb{position:absolute;z-index:6;height:34px;padding:0 13px;border-radius:9px;border:none;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;
  font:700 14px/1 Inter,sans-serif;letter-spacing:-.09px;transition:transform .14s}
.nc.goat .nb span{font-weight:600;opacity:.72}
.nc.goat .nb.j{left:8px;top:140px;background:#FADADF;color:#B01133}
.nc.goat .nb.l{left:318px;top:98px;background:#E6D2C2;color:#5B3A24}
.nc.goat .nb:hover{transform:translateY(-1px)}

/* Palm Beach Pete is the plain one: square thumb, record under the buttons */
.nc.pete{display:flex;flex-direction:column;justify-content:space-between;padding:12px 0 8px}
.nc.pete .top{display:flex;align-items:center;gap:11px;padding:0 12px;min-height:56px}
.nc.pete .thumb{width:56px;height:56px;border-radius:9px;flex:none;object-fit:cover;
  background:var(--fill);box-shadow:0 2px 6px rgba(16,24,40,.16)}
.nc.pete .q{position:static;width:auto;flex:1;min-width:0;
  font:600 14px/20px Inter,sans-serif;letter-spacing:-.09px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nc.pete .ynb{position:static;margin-top:auto;padding:10px 12px 0;gap:8px}
.nc.pete .ynb button{flex:1;width:auto;height:40px;border-radius:7.2px}
.nc.pete .f{position:static;left:auto;top:auto;display:flex;align-items:center;
  height:28px;margin-top:6px;padding:0 12px}

/* the floor's rule: hover deepens the shadow, nothing moves */
.fl .nc:hover{transform:none}
.fl .nc:hover .ph{transform:rotate(var(--tilt,0deg))}
.fl .nc .ynb button:hover,.fl .nc.goat .nb:hover{transform:none}

/* ==== v3 (11 Oct): one skeleton for every card ========================
   The versus card is the rule: question on top, image anchored to the
   card edge and cropped by it, labels on one baseline, footer last.
   ===================================================================== */
.fc,.rq{position:relative;overflow:hidden;border-radius:15.2px;background:#fff;border:1px solid #EFF0F3;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 16px rgba(16,24,40,.08),0 18px 34px rgba(16,24,40,.06);
  transition:box-shadow .16s}
.fc:hover,.rq:hover{
  box-shadow:0 2px 4px rgba(16,24,40,.06),0 10px 22px rgba(16,24,40,.11),0 26px 46px rgba(16,24,40,.08)}
.fl .fc-q,.fl .rq-q{color:#22272D}
.fl .fc-q{text-align:left}

/* ---- yes / no: question top-left, picture bottom-right, pills on the
   same baseline as the versus card (36px up), footer under them ------ */
.fc-q{position:absolute;left:16px;top:14px;z-index:3;width:160px;text-align:left;
  font:700 16px/20px Inter,sans-serif;letter-spacing:-.3px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.fc-img{position:absolute;right:-4px;bottom:-6px;z-index:1;height:150px;width:156px;
  object-fit:contain;object-position:right bottom;
  filter:drop-shadow(0 2px 3px rgba(16,24,40,.15)) drop-shadow(0 8px 14px rgba(16,24,40,.17));
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
/* a flat mark gets no cast shadow and sits off the edge */
.fc.flat .fc-img{filter:none;right:18px;bottom:34px;height:108px;width:120px;
  -webkit-mask-image:none;mask-image:none}
/* no cutout: a photo tile tucked into the corner */
.fc.tile .fc-img{right:0;bottom:0;height:120px;width:120px;object-fit:cover;object-position:center 18%;
  border-radius:14px 0 0 0;filter:none;-webkit-mask-image:none;mask-image:none}
.fc-b{position:absolute;left:16px;bottom:36px;z-index:6;display:flex;gap:8px}
.fc-b button{height:38px;width:86px;border-radius:9px;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:700 14px/1 Inter,sans-serif;letter-spacing:-.09px;transition:box-shadow .16s}
.fc-b button span{font-weight:600;opacity:.72}
.fc-b .y{background:#DDECDF;color:#1C7D28;box-shadow:0 1px 2px rgba(20,83,28,.10),0 4px 10px rgba(20,83,28,.16)}
.fc-b .n{background:#FBE4E3;color:#C21714;box-shadow:0 1px 2px rgba(150,20,16,.09),0 4px 10px rgba(150,20,16,.14)}
.fc-b .y:hover{box-shadow:0 2px 5px rgba(20,83,28,.16),0 7px 15px rgba(20,83,28,.2)}
.fc-b .n:hover{box-shadow:0 2px 5px rgba(150,20,16,.15),0 7px 15px rgba(150,20,16,.18)}
.fc-f{position:absolute;left:16px;bottom:11px;z-index:3;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;
  font:490 12px/15px Inter,sans-serif;letter-spacing:-.08px;color:#8A929B}
.fc-f i{font-style:normal;margin:0 6px;color:#C6CBD2}

/* ---- versus with one shared picture (the GOAT card) ---------------- */
.so.goat .so-g{position:absolute;inset:0;z-index:1;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 98%);
  mask-image:linear-gradient(to bottom,#000 62%,transparent 98%)}
.so.goat .so-bg{position:absolute;right:0;bottom:-58px;height:265px;width:auto;display:block}
.so.goat .so-mid{position:relative;z-index:2;padding-left:118px;padding-right:118px}
.so.goat .so-b{padding:0 24px}
.so.goat .so-b .a.j{background:#FADADF;color:#B01133;
  box-shadow:0 1px 2px rgba(176,17,51,.10),0 4px 10px rgba(176,17,51,.14)}
.so.goat .so-b .b.l{background:#E6D2C2;color:#5B3A24;
  box-shadow:0 1px 2px rgba(91,58,36,.10),0 4px 10px rgba(91,58,36,.14)}

/* ---- ranking: a podium. Second left, first centre and tallest, third
   right, each cropped by the card edge like the versus faces; three
   labels on one baseline; footer centred ----------------------------- */
.rq{width:282px;justify-self:start;z-index:2}
.rq-q{position:relative;z-index:3;height:64px;padding:16px 18px 0;text-align:center;
  font:700 19px/23px Inter,sans-serif;letter-spacing:-.4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rq-stage{position:absolute;left:0;right:0;bottom:0;height:300px;z-index:1;
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 97%);
  mask-image:linear-gradient(to bottom,#000 68%,transparent 97%)}
.rq-e{position:absolute;bottom:0}
.rq-e img{display:block;height:var(--h);width:auto;
  filter:drop-shadow(0 2px 3px rgba(16,24,40,.14)) drop-shadow(0 8px 16px rgba(16,24,40,.16))}
.rq-e.p1{left:50%;transform:translateX(-50%);--h:212px;z-index:3}
.rq-e.p2{left:-4px;--h:170px;z-index:2}
.rq-e.p3{right:-4px;--h:152px;z-index:1}
.rq-b{position:absolute;left:0;right:0;bottom:36px;z-index:6;display:flex;justify-content:center;gap:4px;padding:0 6px}
.fl .rq-btn{height:32px;padding:0 7px;border-radius:9px;border:0;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;
  font:700 12px/1 Inter,sans-serif;letter-spacing:-.2px;transition:box-shadow .16s}
.fl .rq-btn span{font-weight:600;font-size:11px;opacity:.72}
.rq-btn.bar{background:#F2DBE5;color:#7C0234;box-shadow:0 1px 2px rgba(124,2,52,.12),0 4px 10px rgba(124,2,52,.18)}
.rq-btn.rma{background:#E5E5EB;color:#23265C;box-shadow:0 1px 2px rgba(35,38,92,.12),0 4px 10px rgba(35,38,92,.18)}
.rq-btn.mci{background:#D1E8F5;color:#0C5E90;box-shadow:0 1px 2px rgba(12,94,144,.12),0 4px 10px rgba(12,94,144,.18)}
.rq-btn:hover{box-shadow:0 2px 5px rgba(16,24,40,.16),0 7px 15px rgba(16,24,40,.18)}
.rq .pc-f{position:absolute;left:0;right:0;bottom:8px;z-index:6;justify-content:center;margin:0;padding:0}