/* News pictures (src/news_art.js): a slot the size of its picture, the old
   face or crest in it until the picture is made, the picture over it with
   hard pixels. */
.na { position: relative; display: grid; place-items: end center; flex: none; width: var(--na-w); height: var(--na-h); max-width: 100%; overflow: hidden; line-height: 0; }
.na > .na-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; image-rendering: pixelated; image-rendering: crisp-edges; }
.na > .na-img:not([src]) { display: none; }

/* Home: the news strip's card gives its picture the room */
.home-sl .sl-card.na-on { flex-basis: 440px; min-height: 144px; }
.home-sl .sl-card.na-on .sl-pic { flex: 0 0 176px; place-items: start center; }
.home-sl .sl-pic.sl-art .na { width: 176px; height: 100%; min-height: 144px; }
.home-sl .sl-pic.sl-art .na > .na-img { object-fit: cover; object-position: center bottom; height: 144px; top: auto; bottom: 0; }
@media (orientation: landscape) and (max-height: 520px) {
  .home-sl .sl-card.na-on { flex-basis: 440px; min-height: 144px; }
  .home-sl .sl-card.na-on .sl-pic { flex-basis: 176px; }
}
@media (max-width: 620px) { .home-sl .sl-card.na-on { flex-basis: 92%; } }

/* the News page: a picture beside the stories that have one */
.nw-r .na.nw-na { box-shadow: 0 0 0 2px var(--ink, #0d1b2a); margin: 2px 2px 2px 0; }
.nw-r .na.nw-na .rm-fc { align-self: center; }
@media (max-width: 560px) { .nw-r .na.nw-na { --na-w: 108px; --na-h: 72px; } }

/* Storylines' Stories: the same 16:9 thumbnail as the room picture */
.gl-th .na.gl-na { width: 100%; height: 100%; }
.gl-th .na.gl-na > img:not(.na-img) { width: 100%; height: 100%; }

/* --- joining an online league: the stadium tunnel while the league comes -- */
.lgl { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; background: #0b1a2c; }
.lgl-bg { position: absolute; inset: 0; background-repeat: no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; }
.lgl-bg::after { content: ''; position: absolute; inset: 0; background: rgba(6, 14, 28, .38); }
.lgl-box { position: relative; display: grid; justify-items: center; gap: 10px; margin: 16px; padding: 16px 22px 14px; min-width: min(420px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
  background: var(--win, #13263d); color: #fff; border: 2px solid #fff; box-shadow: 0 0 0 3px #0d1b2a, 6px 6px 0 0 rgba(0, 0, 0, .55); text-align: center; }
.lgl-ban { margin: -16px -22px 2px; padding: 9px 20px 7px; justify-self: stretch; background: var(--gold, #ffd23f); color: #0d1b2a; border-bottom: 3px solid #0d1b2a;
  font: 400 30px/1 var(--disp, 'Jersey 15', monospace); text-transform: uppercase; letter-spacing: .5px; box-shadow: inset 0 3px 0 0 #fff0a8, inset 0 -3px 0 0 #c9971c; }
.lgl-code { font: 400 22px/1 var(--disp, 'Jersey 15', monospace); letter-spacing: 3px; color: var(--gold, #ffd23f); }
.lgl-club { display: flex; align-items: center; gap: 8px; font: 800 13px var(--sans); }
.lgl-club img { width: 30px; height: 30px; padding: 2px; object-fit: contain; background: #eef1f4; box-shadow: 0 0 0 2px #0d1b2a; }
.lgl-bar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; width: min(320px, 70vw); height: 18px; padding: 3px; background: #0d1b2a; box-shadow: 0 0 0 2px #fff; }
.lgl-bar i { background: #233a55; }
.lgl-bar i.on { background: var(--gold, #ffd23f); box-shadow: inset 0 -3px 0 0 #c9971c; }
.lgl-bar i.run { animation: lgl-blink .9s steps(2, end) infinite; }
@keyframes lgl-blink { 0% { background: #233a55; } 50% { background: #fff0a8; } }
.lgl-msg { margin: 0; font: 800 14px/1.35 var(--sans); max-width: 440px; }
.lgl-msg a { color: inherit; font-weight: 900; }
@media (prefers-reduced-motion: reduce) { .lgl-bar i.run { animation: none; } }