/* /scrims: the midweek page, built from the League's parts and the matchmaking screen's language. Every class scr-. */
.scr-hero .hero-in { padding-block: var(--s9) var(--s7); }
.scr-hero h1 { font-size: clamp(42px, 6.4vw, 84px); line-height: .92; text-transform: uppercase; letter-spacing: .005em; }
.scr-first { position: relative; padding: var(--s4) var(--s5); background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); border: 1px solid var(--gold-line); border-radius: var(--rl); box-shadow: 0 0 32px rgba(201,162,39,.1); }
.scr-first > span { display: block; font: 700 11px/1 var(--fd); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.scr-first > b { display: block; margin-top: var(--s2); font: 800 30px/1.05 var(--fd); letter-spacing: .02em; text-transform: uppercase; color: var(--gold-2); }
.scr-first > i { display: block; margin-top: 6px; font: 500 12px/1.3 var(--fm); font-style: normal; color: var(--ink-3); }

/* the night, as the matchmaking screen draws it */
.scr-rail { display: flex; align-items: flex-start; gap: var(--s5); padding: var(--s4) var(--s5) var(--s3); border: 1px solid var(--line); border-radius: var(--rl); background: rgba(8,9,10,.72); overflow-x: auto; }
.scr-rail-l { flex: none; padding-top: 2px; font: 700 12px/1.2 var(--fd); letter-spacing: .22em; color: var(--gold-2); text-transform: uppercase; }
.scr-rail-l i { display: block; margin-top: 4px; font-size: 10px; font-style: normal; letter-spacing: .14em; color: var(--ink-3); }
.scr-rail ol { flex: 1; display: flex; list-style: none; margin: 6px 0 0; padding: 0; }
.scr-rail li { position: relative; flex: 1; min-width: 128px; padding: 12px 12px 0 0; border-top: 2px solid var(--line-2); }
.scr-rail li::before { content: ''; position: absolute; left: 0; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink-3); }
.scr-rail li b { display: block; font: 500 15px/1 var(--fm); font-variant-numeric: tabular-nums; }
.scr-rail li span { display: block; margin-top: 5px; font: 600 11px/1.2 var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.scr-rail li.is-key { border-top-color: var(--gold-line); }
.scr-rail li.is-key::before { border-color: var(--gold-2); background: var(--gold); }
.scr-rail li.is-key b { color: var(--gold-2); }

/* how a side is made: three plates, hatched, gold edge on top */
.scr-h2 { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s5); font: 800 clamp(28px, 3.4vw, 40px)/1 var(--fd); text-transform: uppercase; }
.scr-h2 small { font: 700 12px/1 var(--fd); letter-spacing: .22em; color: var(--gold-2); }
.scr-plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.scr-plate { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s2); min-height: 230px; padding: var(--s5); border: 1px solid var(--line-2); border-top: 3px solid var(--gold); border-radius: var(--rl); background: linear-gradient(180deg, rgba(201,162,39,.12), rgba(12,14,16,.94) 64%); }
.scr-plate::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); }
.scr-plate > * { position: relative; }
.scr-plate em { font: 700 12px/1 var(--fd); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.scr-plate b { font: 500 64px/1 var(--fm); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.scr-plate b small { font-size: .4em; color: var(--ink-3); letter-spacing: 0; }
.scr-plate p { margin: auto 0 0; color: var(--ink-2); line-height: 1.5; }
.scr-plate.is-short { border-top-color: var(--ink-3); background: linear-gradient(180deg, rgba(126,135,143,.12), rgba(12,14,16,.94) 64%); }
.scr-plate.is-short em { color: var(--ink-2); }
.scr-plate.is-solo { border-top-color: var(--blue); background: linear-gradient(180deg, var(--blue-dim), rgba(12,14,16,.94) 64%); }
.scr-plate.is-solo em { color: var(--blue); }
.scr-rule { margin-top: var(--s4); padding: var(--s4) var(--s5); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r); background: var(--panel); color: var(--ink-2); line-height: 1.6; }
.scr-rule b { color: var(--ink); }

/* your place: the panel with the gold edge */
.scr-you { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); align-items: center; padding: var(--s5) var(--s6); border: 1px solid var(--line-2); border-left: 3px solid var(--gold); border-radius: var(--rl); background: linear-gradient(90deg, rgba(201,162,39,.07), var(--panel) 46%); }
.scr-you + .scr-you { margin-top: var(--s4); }
.scr-you em { display: block; font: 700 11px/1 var(--fd); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.scr-you h3 { margin: var(--s2) 0 var(--s2); font: 800 28px/1.05 var(--fd); text-transform: uppercase; }
.scr-you p { margin: 0; color: var(--ink-2); line-height: 1.5; max-width: 62ch; }
.scr-you .cta { justify-content: flex-end; }
.scr-on { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--ok-line); border-radius: var(--r); background: var(--ok-dim); color: var(--ok); font: 700 11px/1 var(--fd); letter-spacing: .2em; text-transform: uppercase; }
.scr-on::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* same referee, same rules, own board */
.scr-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.scr-cell { padding: var(--s4); background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); border: 1px solid var(--line); border-radius: var(--rl); }
.scr-cell span { display: block; font: 700 11px/1 var(--fd); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.scr-cell b { display: block; margin-top: var(--s2); font: 700 22px/1.15 var(--fd); letter-spacing: .02em; text-transform: uppercase; }
.scr-cell p { margin: var(--s2) 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* arriving: the matchmaking screen's rise, once, never for reduced motion */
@keyframes scr-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.scr-hero h1, .scr-hero .lead, .scr-hero .cta, .scr-first, .scr-hero .stat, .scr-plate, .scr-you { animation: scr-up .5s cubic-bezier(.2,.8,.2,1) both; }
.scr-hero .lead { animation-delay: .08s; } .scr-hero .cta { animation-delay: .14s; } .scr-first { animation-delay: .18s; }
.scr-plate:nth-child(2) { animation-delay: .07s; } .scr-plate:nth-child(3) { animation-delay: .14s; }
@media (prefers-reduced-motion: reduce) { .scr-hero h1, .scr-hero .lead, .scr-hero .cta, .scr-first, .scr-hero .stat, .scr-plate, .scr-you { animation: none; } }

@media (max-width: 900px) {
  .scr-plates, .scr-cells { grid-template-columns: 1fr; }
  .scr-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scr-you { grid-template-columns: 1fr; padding: var(--s5); }
  .scr-you .cta { justify-content: flex-start; }
  .scr-plate { min-height: 0; }
}
@media (max-width: 560px) { .scr-cells { grid-template-columns: 1fr; } .scr-plate b { font-size: 52px; } }