/* The card a playoff matchup is drawn on.
 *
 * One copy, used by the brackets that go out on social and by the brackets on
 * the playoff pages. They had drifted apart once already -- the same design
 * typed twice, and then only one of them corrected -- which is the whole
 * reason this file exists. Change a color here and both move together.
 *
 * The two draw at different sizes: a sheet for Instagram is 1080 across and
 * holds two columns, a playoff page is four columns of whatever the browser
 * gives it. So everything that is a measurement is a variable, set below at
 * the size the graphics use, and the page turns them down. Everything that is
 * a color or a weight is fixed, because that is the part that has to match.
 *
 * The class names are deliberately prefixed. The site's main stylesheet has
 * its own .team-name, .team-logo, .team-score and .team-seed, and a card that
 * used those names inherited rules written for somewhere else entirely.
 */

:root {
  --bkt-row-h: 84px;
  --bkt-crest: 56px;
  --bkt-seed-w: 30px;
  --bkt-seed-size: 19px;
  --bkt-name: 29px;
  --bkt-mascot: 15px;
  --bkt-score: 34px;
  --bkt-score-w: 58px;
  --bkt-gap: 13px;
  --bkt-pad: 15px;
  --bkt-radius: 5px;
  --bkt-when: 15px;
}

/* ── The card ─────────────────────────────────────────────────────────── */

.bkt-card {
  border-radius: var(--bkt-radius);
  overflow: hidden;
}

/* ── One team's line ──────────────────────────────────────────────────── */

.bkt-row {
  display: flex;
  align-items: center;
  gap: var(--bkt-gap);
  height: var(--bkt-row-h);
  padding: 0 var(--bkt-pad);
  box-sizing: border-box;
  background: linear-gradient(100deg, #20190A 0%, #171206 48%, #0D0A04 100%);
  border: 1px solid #C9A33644;
  border-radius: var(--bkt-radius);
  box-shadow: 0 2px 10px #0008, inset 0 1px 0 #FFFFFF0D;
}

/* Mirrored on the right-hand side of a two-column sheet, so the crests face
   inwards and both halves read outwards from the middle. */
.bkt-mirror .bkt-row {
  flex-direction: row-reverse;
  text-align: right;
  background: linear-gradient(260deg, #20190A 0%, #171206 48%, #0D0A04 100%);
}

/* A team that has gone through. A beaten one stays on the card -- a bracket
   is the story of who went out as much as who went through -- but steps back
   so the winner reads first at a glance on a phone. */
.bkt-row.won {
  border-color: #C9A336DD;
  box-shadow: 0 0 0 1px #C9A33666, 0 0 26px 2px #C9A33640,
              0 2px 14px #0009, inset 0 1px 0 #FFFFFF1A;
}

.bkt-row.lost { opacity: .46; }
.bkt-row.bye  { opacity: .5; }

/* ── Crest ────────────────────────────────────────────────────────────── */

.bkt-crest {
  flex: 0 0 auto;
  width: var(--bkt-crest);
  height: var(--bkt-crest);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bkt-crest img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px #000A);
  background: none;
  border-radius: 0;
}

/* Stands in for a school with no crest on file. */
.bkt-initials {
  width: 92%;
  height: 92%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--bkt-crest) * .34);
  font-weight: 700;
  background: #2A2F3C;
  color: #fff;
  border: 2px solid #FFFFFF2E;
  box-sizing: border-box;
}

/* ── Seed ─────────────────────────────────────────────────────────────── */

/* Its own column. Set inline it pushed the school name along but left the
   mascot under it, so the two lines began in different places. */
.bkt-seed {
  flex: 0 0 auto;
  position: relative;
  width: var(--bkt-seed-w);
  text-align: center;
  font-size: var(--bkt-seed-size);
  font-weight: 600;
  color: #E8C564;
  background: none;
  padding: 0;
  border-radius: 0;
}

/* A lower seed that knocks out a higher one gets a flame behind its number.
   Behind, not beside, so the rest of the line keeps its measurements. The
   flame is drawn first and the number after it, both inside the seed, so the
   number paints on top without either needing a z-index -- a negative one
   would put the flame behind the row's own background, where nobody would
   ever see it. */
.bkt-seed.upset { color: #fff; }

.bkt-flame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--bkt-seed-w) * 1.6);
  height: calc(var(--bkt-seed-w) * 1.73);
  transform: translate(-50%, -54%);
  filter: drop-shadow(0 0 7px #E2560F88);
}

.bkt-seed i {
  position: relative;
  font-style: normal;
  font-weight: 700;
  text-shadow: 0 1px 2px #4A1403, 0 1px 6px #2A0B01CC;
}

/* ── Name and mascot ──────────────────────────────────────────────────── */

.bkt-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The name steps down a size rather than truncating. A school whose name is
   cut off is worse than one whose name is a little smaller, and the long ones
   -- Manchester Memorial, Bishop Guertin -- are exactly the ones a bracket
   cannot afford to leave ambiguous. */
.bkt-name {
  font-size: var(--bkt-name);
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bkt-name.m  { font-size: calc(var(--bkt-name) * .83); }
.bkt-name.s  { font-size: calc(var(--bkt-name) * .72); }
.bkt-name.xs { font-size: calc(var(--bkt-name) * .62); }

a.bkt-name:hover { color: #F2CF6A; text-decoration: underline; }

.bkt-mascot {
  font-size: var(--bkt-mascot);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9BA3AE;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Score ────────────────────────────────────────────────────────────── */

.bkt-score {
  flex: 0 0 auto;
  min-width: var(--bkt-score-w);
  text-align: center;
  font-size: var(--bkt-score);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.bkt-row.lost .bkt-score { color: #B9BEC7; }

/* Overtime, or the inning an extra-innings game ran to. */
.bkt-ot {
  display: block;
  font-size: calc(var(--bkt-score) * .35);
  font-weight: 600;
  letter-spacing: .08em;
  color: #E8C564;
  margin-top: 3px;
}

/* ── When it is played ────────────────────────────────────────────────── */

/* Each tie carries its own date and time. They are usually all the same, but
   a February round gets moved by the weather often enough that one date at
   the top of a sheet would be a promise we could not keep. */
.bkt-when {
  height: calc(var(--bkt-when) * 1.27);
  line-height: calc(var(--bkt-when) * 1.27);
  font-size: var(--bkt-when);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #C9A336;
}

.bkt-mirror .bkt-when { text-align: right; }

.bkt-when .moved { color: #E89A6A; }

/* ── The lines between them ───────────────────────────────────────────── */

/* One weight and one color for every line in a bracket. Two of them made the
   joins read as a separate, heavier drawing rather than part of the same one. */
.bkt-wires path {
  fill: none;
  stroke: #C9A33680;
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* ── Two ways to build a card ─────────────────────────────────────────────
 * On a social graphic the two teams are separate pills with a gap between
 * them, because the sheet has room and the gap is what makes a pairing read
 * as one thing with a seam. On a page four rounds wide there is no such room,
 * so the same two rows are stacked into a single bordered box. Same rows,
 * same type, same glow -- only the join differs, and it differs here rather
 * than in two separate stylesheets. */

.bkt-card.joined {
  border: 1px solid #C9A33640;
  box-shadow: 0 2px 10px #00000088;
  background: #0C0A05;
  transition: border-color .15s, box-shadow .15s;
}

.bkt-card.joined:hover {
  border-color: #C9A33677;
  box-shadow: 0 2px 16px #000000AA;
}

.bkt-card.joined .bkt-row {
  border: 0;
  border-bottom: 1px solid #00000066;
  border-radius: 0;
  box-shadow: none;
}

.bkt-card.joined .bkt-row:last-of-type {
  border-bottom: 0;
}

/* The glow moves inside, because the row no longer has an edge of its own. */
.bkt-card.joined .bkt-row.won {
  box-shadow: inset 0 0 0 1px #C9A33655, inset 0 0 22px #C9A33626;
}

.bkt-card.joined.live {
  border-color: #E2560F99;
  box-shadow: 0 0 18px #E2560F33, 0 2px 10px #00000088;
}