/* lowers.css — 字卡外觀（W3 字卡台）。字卡台和三版並排共用，兩邊打出來的樣子才會一樣。
   字卡 class 叫 .lt（lower third），不叫 .card：compare.html 的每一格外框已經叫 .card。
   字級用 cqw，外層舞台要設 container-type:inline-size。*/
/* 兩層：下方條互斥、上方角標另一層 */
.ovl{position:absolute;left:0;right:0;display:flex;pointer-events:none}
.ovl.lower{bottom:0;padding:0 3% 4%;justify-content:flex-start}
.ovl.lower.center{justify-content:center}
.ovl.corner{top:0;padding:3% 0 0;justify-content:center}
.lt{opacity:0;transition:opacity .4s ease,transform .4s ease;max-width:76%;
  background:rgba(12,12,14,.86);border-radius:5px;padding:2.2cqw 3cqw;color:#fff;line-height:1.35}
.ovl.lower .lt.slide{transform:translateY(150%)}
.ovl.corner .lt.slide{transform:translateY(-180%)}
/* 選擇器要跟上面那兩條一樣重，不然 .slide 的位移收不回來（卡片會停在畫面外）*/
.ovl.lower .lt.on,.ovl.corner .lt.on{opacity:1;transform:none}
.lt b{display:block;font-weight:600}
.lt i{display:block;font-style:normal;color:#cfd6df}
.lt.name{border-left:0.9cqw solid #e33}
.lt.name b{font-size:4cqw}
.lt.name i{font-size:2.6cqw}       /* 第二行＝隊伍／國籍，小一號 */
.lt.stat{border-left:0.9cqw solid #5cf;font-variant-numeric:tabular-nums}
.lt.stat b{font-size:3.4cqw}
.lt.stat i{font-size:2.8cqw}
.lt.caption{text-align:center;background:rgba(8,8,10,.9)}
.lt.caption b{font-size:3.1cqw;font-weight:500}
.lt.caption i{font-size:2.8cqw}
.lt.score{background:rgba(12,12,14,.9);border-radius:99px;padding:1.2cqw 3cqw}
.lt.score b{font-size:3cqw;letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){.lt{transition:none}}