/* Night in the arena. Every team is a candle; its flame lights the ones beside it. Keep it burning. */

:root {
  color-scheme: dark;

  --shelf: #3a2a1c;
  --shelf-lip: #6b4b2e;
  --line: #26323e;
  --wax: #f1e4cc;
  --wax-shade: #b9a283;
  --wax-out: #4d453d;
  --wax-out-shade: #2c2722;
  --gold-wax: #e8bf55;
  --gold-shade: #9c7520;
  --ink-on-wax: #3a2716;
  --fire: #ff8a1e;
  --text: #f1ece4;
  --text-soft: #a8a198;
  --red: #ef4a3a;

  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  font: 400 1.0625rem/1.55 var(--body);
  /* A castle wall, lit by the torch and fading into shadow below. */
  background:
    radial-gradient(ellipse 55% 520px at 80% 240px, rgba(255, 110, 30, calc(0.08 + 0.12 * var(--heat, 1))), transparent 70%),
    linear-gradient(rgba(6, 5, 4, 0.2), rgba(6, 5, 4, 0.55) 900px, rgba(6, 5, 4, 0.8) 1600px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='224'%3E%3Crect width='360' height='224' fill='%230d0c0b'/%3E%3Cpath d='M-43.2 4.4 9.9 4.1 64.4 4.5 65.9 23.9 64.4 42.7 6.2 43.1 -43.0 43.7 -44.7 22.2Z' fill='%2328231f' stroke='%2328231f' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M-40.2 5.9L61.4 6.0' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='5.8' cy='29.7' r='1.3' fill='%23141210'/%3E%3Ccircle cx='22.7' cy='32.3' r='0.7' fill='%23141210'/%3E%3Ccircle cx='-35.5' cy='33.6' r='1.2' fill='%23141210'/%3E%3Cpath d='M316.8 4.4 369.9 4.1 424.4 4.5 425.9 23.9 424.4 42.7 366.2 43.1 317.0 43.7 315.3 22.2Z' fill='%2328231f' stroke='%2328231f' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M319.8 5.9L421.4 6.0' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='365.8' cy='29.7' r='1.3' fill='%23141210'/%3E%3Ccircle cx='382.7' cy='32.3' r='0.7' fill='%23141210'/%3E%3Ccircle cx='324.5' cy='33.6' r='1.2' fill='%23141210'/%3E%3Cpath d='M71.1 3.5 120.8 2.2 176.0 0.5 175.8 24.2 176.5 43.3 129.7 41.7 70.8 44.3 72.0 19.2Z' fill='%231c1a18' stroke='%231c1a18' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M74.1 5.0L173.0 2.0' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='130.4' cy='12.0' r='0.7' fill='%23141210'/%3E%3Ccircle cx='105.1' cy='10.9' r='0.6' fill='%23141210'/%3E%3Ccircle cx='141.7' cy='15.0' r='1.5' fill='%23141210'/%3E%3Cpath d='M182.4 4.0 211.5 3.2 240.5 3.9 241.5 21.5 239.6 42.6 217.6 41.9 184.0 40.6 182.9 22.9Z' fill='%231c1a18' stroke='%231c1a18' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M185.4 5.5L237.5 5.4' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='221.1' cy='14.3' r='1.1' fill='%23141210'/%3E%3Ccircle cx='235.3' cy='30.5' r='1.0' fill='%23141210'/%3E%3Ccircle cx='207.0' cy='20.1' r='1.6' fill='%23141210'/%3E%3Cpath d='M249.8 5.4 277.1 4.5 301.6 1.4 305.5 23.8 304.4 40.7 271.8 42.8 245.5 43.6 249.0 22.1Z' fill='%2325211d' stroke='%2325211d' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M252.8 6.9L298.6 2.9' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='257.3' cy='14.8' r='1.2' fill='%23141210'/%3E%3Ccircle cx='254.7' cy='19.3' r='1.2' fill='%23141210'/%3E%3Ccircle cx='259.6' cy='25.4' r='1.4' fill='%23141210'/%3E%3Cpath d='M-51.6 1.3 -13.1 4.0 12.7 1.4 14.7 26.5 12.5 45.3 -13.4 43.3 -50.4 41.0 -51.4 26.7Z' fill='%231c1a18' stroke='%231c1a18' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M-48.6 2.8L9.7 2.9' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='-31.6' cy='28.7' r='0.9' fill='%23141210'/%3E%3Ccircle cx='-1.2' cy='25.7' r='0.9' fill='%23141210'/%3E%3Ccircle cx='-34.9' cy='29.2' r='0.7' fill='%23141210'/%3E%3Cpath d='M308.4 1.3 346.9 4.0 372.7 1.4 374.7 26.5 372.5 45.3 346.6 43.3 309.6 41.0 308.6 26.7Z' fill='%231c1a18' stroke='%231c1a18' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M311.4 2.8L369.7 2.9' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='328.4' cy='28.7' r='0.9' fill='%23141210'/%3E%3Ccircle cx='358.8' cy='25.7' r='0.9' fill='%23141210'/%3E%3Ccircle cx='325.1' cy='29.2' r='0.7' fill='%23141210'/%3E%3Cpath d='M-30.2 49.6 6.9 48.1 57.1 50.2 53.7 64.3 53.7 78.7 9.4 81.1 -28.6 79.0 -32.1 64.6Z' fill='%2328231f' stroke='%2328231f' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M-27.2 51.1L54.1 51.7' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='-0.5' cy='69.7' r='1.1' fill='%23141210'/%3E%3Ccircle cx='45.1' cy='66.8' r='1.5' fill='%23141210'/%3E%3Ccircle cx='10.1' cy='62.1' r='0.9' fill='%23141210'/%3E%3Cpath d='M329.8 49.6 366.9 48.1 417.1 50.2 413.7 64.3 413.7 78.7 369.4 81.1 331.4 79.0 327.9 64.6Z' fill='%2328231f' stroke='%2328231f' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M332.8 51.1L414.1 51.7' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='359.5' cy='69.7' r='1.1' fill='%23141210'/%3E%3Ccircle cx='405.1' cy='66.8' r='1.5' fill='%23141210'/%3E%3Ccircle cx='370.1' cy='62.1' r='0.9' fill='%23141210'/%3E%3Cpath d='M61.5 46.9 84.8 48.4 117.2 46.9 118.9 63.9 116.7 83.2 92.8 79.9 63.3 80.2 59.8 64.8Z' fill='%23221e1b' stroke='%23221e1b' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M64.5 48.4L114.2 48.4' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='70.6' cy='72.1' r='1.5' fill='%23141210'/%3E%3Ccircle cx='68.4' cy='65.0' r='0.6' fill='%23141210'/%3E%3Ccircle cx='97.5' cy='62.6' r='0.6' fill='%23141210'/%3E%3Cpath d='M123.0 47.1 152.1 48.7 184.2 51.2 185.6 64.7 184.8 81.2 155.2 81.0 124.1 78.9 123.6 68.7Z' fill='%23221e1b' stroke='%23221e1b' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M126.0 48.6L181.2 52.7' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='136.4' cy='70.6' r='1.3' fill='%23141210'/%3E%3Ccircle cx='154.3' cy='72.9' r='1.0' fill='%23141210'/%3E%3Ccircle cx='137.9' cy='67.2' r='1.1' fill='%23141210'/%3E%3Cpath d='M191.8 48.7 247.7 48.5 295.8 47.5 294.8 67.4 297.1 82.9 241.6 81.2 190.1 79.2 191.0 67.7Z' fill='%2325211d' stroke='%2325211d' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M194.8 50.2L292.8 49.0' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='275.1' cy='69.2' r='1.6' fill='%23141210'/%3E%3Ccircle cx='222.5' cy='58.4' r='1.1' fill='%23141210'/%3E%3Ccircle cx='222.3' cy='59.3' r='1.0' fill='%23141210'/%3E%3Cpath d='M-59.0 48.1 -6.9 50.4 36.8 46.9 35.6 68.0 34.7 82.0 -10.2 80.4 -57.5 78.6 -60.1 64.6Z' fill='%2328231f' stroke='%2328231f' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M-56.0 49.6L33.8 48.4' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='-50.9' cy='71.6' r='0.8' fill='%23141210'/%3E%3Ccircle cx='-41.2' cy='55.9' r='1.2' fill='%23141210'/%3E%3Ccircle cx='-15.5' cy='67.6' r='1.3' fill='%23141210'/%3E%3Cpath d='M301.0 48.1 353.1 50.4 396.8 46.9 395.6 68.0 394.7 82.0 349.8 80.4 302.5 78.6 299.9 64.6Z' fill='%2328231f' stroke='%2328231f' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M304.0 49.6L393.8 48.4' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='309.1' cy='71.6' r='0.8' fill='%23141210'/%3E%3Ccircle cx='318.8' cy='55.9' r='1.2' fill='%23141210'/%3E%3Ccircle cx='344.5' cy='67.6' r='1.3' fill='%23141210'/%3E%3Cpath d='M-41.5 88.6 -12.9 87.6 21.3 87.2 18.6 107.8 21.4 133.2 -4.6 133.0 -37.5 131.3 -39.0 111.6Z' fill='%23201d1b' stroke='%23201d1b' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M-38.5 90.1L18.3 88.7' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='-23.3' cy='107.0' r='1.5' fill='%23141210'/%3E%3Ccircle cx='-15.4' cy='108.3' r='0.8' fill='%23141210'/%3E%3Ccircle cx='8.6' cy='93.2' r='1.2' fill='%23141210'/%3E%3Cpath d='M318.5 88.6 347.1 87.6 381.3 87.2 378.6 107.8 381.4 133.2 355.4 133.0 322.5 131.3 321.0 111.6Z' fill='%23201d1b' stroke='%23201d1b' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M321.5 90.1L378.3 88.7' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='336.7' cy='107.0' r='1.5' fill='%23141210'/%3E%3Ccircle cx='344.6' cy='108.3' r='0.8' fill='%23141210'/%3E%3Ccircle cx='368.6' cy='93.2' r='1.2' fill='%23141210'/%3E%3Cpath d='M27.5 89.2 74.1 87.5 121.5 88.1 124.0 111.1 124.1 131.6 79.3 134.4 28.4 133.2 26.9 108.6Z' fill='%2328231f' stroke='%2328231f' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M30.5 90.7L118.5 89.6' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='109.3' cy='122.1' r='0.9' fill='%23141210'/%3E%3Ccircle cx='39.0' cy='108.0' r='1.2' fill='%23141210'/%3E%3Ccircle cx='97.3' cy='109.6' r='0.6' fill='%23141210'/%3E%3Cpath d='M128.6 84.7 182.9 87.6 238.1 86.9 237.5 113.2 236.1 133.9 181.8 134.1 129.4 133.9 129.8 109.5Z' fill='%23221e1b' stroke='%23221e1b' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M131.6 86.2L235.1 88.4' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='188.1' cy='121.3' r='1.2' fill='%23141210'/%3E%3Ccircle cx='150.6' cy='110.5' r='1.5' fill='%23141210'/%3E%3Ccircle cx='159.4' cy='115.8' r='1.6' fill='%23141210'/%3E%3Cpath d='M240.5 88.8 303.1 87.1 353.4 85.5 353.1 110.0 353.5 130.6 303.1 133.0 241.5 134.5 242.2 109.9Z' fill='%2328231f' stroke='%2328231f' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M243.5 90.3L350.4 87.0' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='316.4' cy='95.2' r='1.1' fill='%23141210'/%3E%3Ccircle cx='289.0' cy='125.5' r='1.5' fill='%23141210'/%3E%3Ccircle cx='274.7' cy='109.1' r='0.7' fill='%23141210'/%3E%3Cpath d='M-0.9 85.0 39.5 85.6 80.8 88.0 83.4 106.3 80.3 130.6 37.9 133.7 -2.3 133.0 -1.0 110.7Z' fill='%231c1a18' stroke='%231c1a18' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M2.1 86.5L77.8 89.5' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='65.5' cy='114.2' r='1.3' fill='%23141210'/%3E%3Ccircle cx='54.8' cy='122.9' r='0.6' fill='%23141210'/%3E%3Ccircle cx='49.9' cy='121.1' r='1.2' fill='%23141210'/%3E%3Cpath d='M359.1 85.0 399.5 85.6 440.8 88.0 443.4 106.3 440.3 130.6 397.9 133.7 357.7 133.0 359.0 110.7Z' fill='%231c1a18' stroke='%231c1a18' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M362.1 86.5L437.8 89.5' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='425.5' cy='114.2' r='1.3' fill='%23141210'/%3E%3Ccircle cx='414.8' cy='122.9' r='0.6' fill='%23141210'/%3E%3Ccircle cx='409.9' cy='121.1' r='1.2' fill='%23141210'/%3E%3Cpath d='M-50.8 137.6 -19.9 139.1 18.4 137.2 19.2 157.0 17.2 171.4 -15.3 174.2 -52.5 174.4 -51.9 152.8Z' fill='%23201d1b' stroke='%23201d1b' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M-47.8 139.1L15.4 138.7' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='5.7' cy='147.9' r='0.7' fill='%23141210'/%3E%3Ccircle cx='-22.9' cy='154.6' r='1.5' fill='%23141210'/%3E%3Ccircle cx='-14.0' cy='160.5' r='0.8' fill='%23141210'/%3E%3Cpath d='M309.2 137.6 340.1 139.1 378.4 137.2 379.2 157.0 377.2 171.4 344.7 174.2 307.5 174.4 308.1 152.8Z' fill='%23201d1b' stroke='%23201d1b' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M312.2 139.1L375.4 138.7' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='365.7' cy='147.9' r='0.7' fill='%23141210'/%3E%3Ccircle cx='337.1' cy='154.6' r='1.5' fill='%23141210'/%3E%3Ccircle cx='346.0' cy='160.5' r='0.8' fill='%23141210'/%3E%3Cpath d='M25.5 137.0 72.8 138.6 121.6 138.3 120.6 157.1 119.2 175.5 76.0 173.9 23.9 170.6 24.8 156.9Z' fill='%23201d1b' stroke='%23201d1b' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M28.5 138.5L118.6 139.8' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='106.0' cy='155.6' r='0.8' fill='%23141210'/%3E%3Ccircle cx='39.7' cy='148.8' r='0.8' fill='%23141210'/%3E%3Ccircle cx='53.8' cy='159.8' r='1.2' fill='%23141210'/%3E%3Cpath d='M125.8 140.3 155.9 138.9 190.1 138.7 190.3 152.1 191.0 174.7 154.2 172.9 127.2 172.5 125.1 153.3Z' fill='%23201d1b' stroke='%23201d1b' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M128.8 141.8L187.1 140.2' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='158.7' cy='145.3' r='1.5' fill='%23141210'/%3E%3Ccircle cx='173.7' cy='160.5' r='1.5' fill='%23141210'/%3E%3Ccircle cx='164.7' cy='153.9' r='1.2' fill='%23141210'/%3E%3Cpath d='M198.4 140.5 237.1 140.2 285.2 140.4 284.9 155.2 286.0 174.9 242.3 173.8 197.3 172.5 196.7 152.6Z' fill='%2328231f' stroke='%2328231f' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M201.4 142.0L282.2 141.9' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='228.0' cy='155.3' r='0.6' fill='%23141210'/%3E%3Ccircle cx='229.0' cy='159.1' r='1.2' fill='%23141210'/%3E%3Ccircle cx='219.6' cy='165.8' r='1.3' fill='%23141210'/%3E%3Cpath d='M-69.2 139.3 -31.1 138.7 9.5 139.7 7.6 158.1 9.4 170.6 -30.1 173.7 -71.2 172.5 -71.3 153.6Z' fill='%231f1c1a' stroke='%231f1c1a' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M-66.2 140.8L6.5 141.2' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='-39.6' cy='147.2' r='0.9' fill='%23141210'/%3E%3Ccircle cx='-5.1' cy='157.1' r='1.1' fill='%23141210'/%3E%3Ccircle cx='-1.1' cy='157.5' r='1.6' fill='%23141210'/%3E%3Cpath d='M290.8 139.3 328.9 138.7 369.5 139.7 367.6 158.1 369.4 170.6 329.9 173.7 288.8 172.5 288.7 153.6Z' fill='%231f1c1a' stroke='%231f1c1a' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M293.8 140.8L366.5 141.2' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='320.4' cy='147.2' r='0.9' fill='%23141210'/%3E%3Ccircle cx='354.9' cy='157.1' r='1.1' fill='%23141210'/%3E%3Ccircle cx='358.9' cy='157.5' r='1.6' fill='%23141210'/%3E%3Cpath d='M-59.1 179.5 -11.9 177.6 29.2 177.3 26.9 197.4 27.0 221.6 -20.3 222.3 -57.4 221.1 -56.7 198.9Z' fill='%23201d1b' stroke='%23201d1b' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M-56.1 181.0L26.2 178.8' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='-30.4' cy='204.7' r='1.2' fill='%23141210'/%3E%3Ccircle cx='-30.6' cy='206.5' r='0.9' fill='%23141210'/%3E%3Ccircle cx='-50.0' cy='192.4' r='0.6' fill='%23141210'/%3E%3Cpath d='M300.9 179.5 348.1 177.6 389.2 177.3 386.9 197.4 387.0 221.6 339.7 222.3 302.6 221.1 303.3 198.9Z' fill='%23201d1b' stroke='%23201d1b' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M303.9 181.0L386.2 178.8' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='329.6' cy='204.7' r='1.2' fill='%23141210'/%3E%3Ccircle cx='329.4' cy='206.5' r='0.9' fill='%23141210'/%3E%3Ccircle cx='310.0' cy='192.4' r='0.6' fill='%23141210'/%3E%3Cpath d='M34.3 178.4 70.8 179.7 96.8 181.4 100.3 196.6 101.0 220.6 65.7 222.4 31.7 221.1 34.3 201.8Z' fill='%231c1a18' stroke='%231c1a18' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M37.3 179.9L93.8 182.9' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='64.3' cy='214.4' r='1.4' fill='%23141210'/%3E%3Ccircle cx='71.6' cy='188.5' r='1.2' fill='%23141210'/%3E%3Ccircle cx='63.6' cy='191.1' r='0.7' fill='%23141210'/%3E%3Cpath d='M103.1 178.7 151.5 178.9 192.8 179.4 193.8 202.2 194.2 223.5 154.9 221.7 103.7 219.1 106.2 202.3Z' fill='%231f1c1a' stroke='%231f1c1a' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M106.1 180.2L189.8 180.9' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='159.1' cy='195.8' r='0.9' fill='%23141210'/%3E%3Ccircle cx='163.7' cy='201.9' r='1.2' fill='%23141210'/%3E%3Ccircle cx='159.7' cy='207.6' r='0.8' fill='%23141210'/%3E%3Cpath d='M202.4 181.1 240.0 177.6 268.8 177.9 270.8 201.0 269.0 221.2 230.4 219.8 200.9 221.3 200.4 199.0Z' fill='%2328231f' stroke='%2328231f' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M205.4 182.6L265.8 179.4' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='234.2' cy='191.3' r='0.9' fill='%23141210'/%3E%3Ccircle cx='249.9' cy='210.2' r='0.7' fill='%23141210'/%3E%3Ccircle cx='213.1' cy='209.3' r='1.2' fill='%23141210'/%3E%3Cpath d='M-83.3 180.2 -31.8 178.0 20.3 180.7 22.3 198.3 23.3 222.6 -34.3 221.5 -82.6 220.8 -83.5 200.3Z' fill='%231f1c1a' stroke='%231f1c1a' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M-80.3 181.7L17.3 182.2' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='-36.8' cy='202.0' r='1.4' fill='%23141210'/%3E%3Ccircle cx='-33.9' cy='209.7' r='0.6' fill='%23141210'/%3E%3Ccircle cx='-48.2' cy='212.3' r='1.2' fill='%23141210'/%3E%3Cpath d='M276.7 180.2 328.2 178.0 380.3 180.7 382.3 198.3 383.3 222.6 325.7 221.5 277.4 220.8 276.5 200.3Z' fill='%231f1c1a' stroke='%231f1c1a' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M279.7 181.7L377.3 182.2' stroke='%23332d28' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='323.2' cy='202.0' r='1.4' fill='%23141210'/%3E%3Ccircle cx='326.1' cy='209.7' r='0.6' fill='%23141210'/%3E%3Ccircle cx='311.8' cy='212.3' r='1.2' fill='%23141210'/%3E%3C/svg%3E") 0 0 / 360px 224px,
    #0d0c0b;
}

:focus-visible { outline: 3px solid var(--fire); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 0.95; }

/* ---------- Flame ---------- */

/* Two teardrops (outer flame and white-hot core) made from rotated squares. */
.flame {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4.4;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 4px rgba(255, 140, 40, 0.95)) drop-shadow(0 0 12px rgba(255, 90, 20, 0.5));
  animation: flick var(--d, 1.2s) ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -170ms);
}
.flame::before, .flame::after {
  content: '';
  position: absolute;
  aspect-ratio: 1;
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
}
.flame::before {
  width: 66%;
  left: 17%;
  bottom: 5%;
  background: radial-gradient(circle at 70% 70%, #fff3b0 0 16%, #ffb21e 38%, #ff5a1a 66%, #c41d0e 94%);
}
.flame::after {
  width: 32%;
  left: 34%;
  bottom: 8%;
  background: radial-gradient(circle at 66% 66%, #fffef4 0 32%, #ffe27a 85%);
}
@keyframes flick {
  0% { transform: scale(1, 1) skewX(0deg); }
  30% { transform: scale(0.92, 1.12) skewX(-4deg); }
  60% { transform: scale(1.05, 0.94) skewX(3deg); }
  100% { transform: scale(0.96, 1.07) skewX(-1deg); }
}

/* ---------- Candle: every team's card ---------- */

.candle {
  --w: 56px;
  --wax-h: calc(var(--w) * var(--tall, 1.9) * var(--h, 1) * var(--sh, 1));
  /* Shading follows each team's tint. */
  --wax-shade: color-mix(in oklab, var(--wax) 62%, #5a4128);
  --wax-hi: color-mix(in oklab, var(--wax) 45%, #ffffff);
  position: relative;
  width: var(--w);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.candle .flame { width: 46%; margin-bottom: -2%; }
/* Each win's taken fire makes the flame bigger (--fire, set per candle), and its light reach further. */
.candle .flame { scale: var(--fire, 1); transition: scale 500ms ease-out; }
.candle .glow { scale: calc(1 + (var(--fire, 1) - 1) * 0.6); transition: scale 500ms ease-out; }
/* Shapes whose top dips in the middle (between ears, horns) set the wick lower. */
.candle .flame, .candle .wick, .candle .glow { translate: 0 calc(var(--wax-h) * var(--notch, 0)); }
.candle .wick { width: 6%; min-width: 2px; height: calc(var(--w) * 0.14); background: #1d1814; border-radius: 1px; }
.candle:is(:not(.out), .taking) .wick { visibility: hidden; height: calc(var(--w) * 0.04); }

/* No flame: keep the space so the wax lines up. */
.candle.out:not(.taking) .flame { visibility: hidden; animation: none; }

.wax {
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--wax-h);
  min-height: min-content; /* short forms grow rather than clip their label */
  border-radius: 5px 5px 3px 3px / 3px 3px 2px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--wax-h) * var(--pt, 0.12));
  color: var(--ink-on-wax);
  clip-path: var(--clip, none); /* the team's silhouette */
  background:
    var(--pattern, linear-gradient(transparent, transparent)),
    radial-gradient(ellipse 80% 45% at 50% 0, rgba(255, 214, 140, 0.9), transparent 75%),
    linear-gradient(90deg, var(--wax-shade), var(--wax) 32%, var(--wax-hi) 50%, var(--wax) 68%, var(--wax-shade));
}
/* The melt pool on top, and a drip running down one side. */
.wax::before {
  content: '';
  position: absolute;
  top: calc(var(--notch, 0) * 100% - 1px);
  left: 8%;
  right: 8%;
  height: calc(var(--w) * 0.12);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 246, 225, 0.95), rgba(255, 220, 160, 0.4) 70%);
}
.wax::after {
  content: '';
  position: absolute;
  top: 0;
  left: var(--drip, 18%);
  width: 14%;
  height: calc(var(--w) * 0.5);
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.35));
}

.candle .abbr { font: 900 calc(var(--w) * 0.34) / 1 var(--display); letter-spacing: 0.01em; position: relative; }
.candle .tail { margin-top: 4px; font: 800 calc(var(--w) * 0.17) / 1.05 var(--display); text-align: center; position: relative; opacity: 0.85; }
.candle .tail span { display: block; white-space: nowrap; } /* "Out" over the date, to fit the thin candles */
.candle.taking .tail, .candle.taking .drips { visibility: hidden; } /* a replay's loser, until its fire is taken */

/* The nickname's emblem, pressed into the wax. */
.emblem {
  width: calc(68% * var(--bw, 1));
  aspect-ratio: 1;
  margin-bottom: 4px;
  flex: none;
  position: relative;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
}
.emblem .main { fill: color-mix(in oklab, var(--wax) 35%, #4a2c12); opacity: 0.8; }
.emblem .alt { fill: var(--wax-hi); }
.candle.out:not(.taking) .emblem { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.08)); }
.candle.out:not(.taking) .emblem .main { fill: #2a2520; opacity: 0.9; }
.candle.out:not(.taking) .emblem .alt { fill: #5e554b; }

/* The Hurricanes' candle is a twist. */
.candle.twist .wax { --pattern: repeating-linear-gradient(-28deg, transparent 0 7px, rgba(90, 60, 30, 0.12) 7px 11px); }
.shape-defs { position: absolute; width: 0; height: 0; }

/* A spent candle's drips: the longer it burned, the further they've run. */
.drips { position: absolute; inset: 0; pointer-events: none; }
.candle:not(.out) .drips { display: none; }
.drips i {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--dw);
  height: calc(var(--wax-h) * (0.1 + 0.85 * var(--burn, 0)) * var(--len));
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #6a5f53, #9a8d7e 45%, #5d544a);
  box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.35);
}
.drips i::after { content: ''; position: absolute; left: -18%; right: -18%; bottom: -3px; aspect-ratio: 1; border-radius: 50%; background: inherit; }
.drips i:nth-child(1) { --x: calc(var(--drip) * 0.5 + 4%); --dw: 13%; --len: 1; }
.drips i:nth-child(2) { --x: calc(var(--drip) * 0.3 + 44%); --dw: 10%; --len: 0.55; }
.drips i:nth-child(3) { --x: calc(78% - var(--drip) * 0.15); --dw: 11%; --len: 0.8; }
.candle.out:not(.taking) .wax {
  color: #8d8173;
  --wax-shade: var(--wax-out-shade);
  background: linear-gradient(90deg, var(--wax-out-shade), var(--wax-out) 35%, #5e554b 50%, var(--wax-out) 65%, var(--wax-out-shade));
}
.candle.out:not(.taking) .wax::before { background: radial-gradient(ellipse at 50% 40%, #6a6055, #3a332c 75%); }

.candle.gold .wax {
  color: #3a2600;
  background:
    radial-gradient(ellipse 80% 45% at 50% 0, rgba(255, 245, 200, 0.95), transparent 75%),
    linear-gradient(90deg, var(--gold-shade), var(--gold-wax) 32%, #fff0b8 50%, var(--gold-wax) 68%, var(--gold-shade));
}
.candle.gold .emblem .main { fill: #6b4a08; }

/* The light a burning candle throws on its neighbours (and the shelf, and the wall). */
.candle:is(:not(.out), .taking) .glow {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(var(--w) * 0.3);
  width: calc(var(--w) * var(--reach, 4.6));
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  /* Plain and still: blended or animated glows on every candle are more than browsers will paint reliably. */
  background: radial-gradient(circle, rgba(255, 176, 80, 0.42), rgba(255, 120, 40, 0.14) 34%, rgba(255, 100, 30, 0.04) 55%, transparent 68%);
}

/* A replay's loser, its fire just taken: a curl of smoke rises off the wick. */
.candle.smoking::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 0;
  left: 30%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 210, 210, 0.65), transparent 70%);
  animation: smoke 1.4s ease-out both;
}
@keyframes smoke {
  from { transform: translateY(20%) scale(0.4); opacity: 0; }
  30% { opacity: 1; }
  to { transform: translateY(-120%) translateX(20%) scale(2.4); opacity: 0; }
}

/* Opening moment: the candles catch, one at a time. */
.lighting .candle:not(.out) .flame {
  animation:
    ignite 520ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both calc(var(--i, 0) * 45ms + 300ms),
    flick var(--d, 1.2s) ease-in-out infinite alternate calc(var(--i, 0) * 45ms + 820ms);
}
.lighting .candle:not(.out) .glow { animation: ignite-glow 700ms ease-out both calc(var(--i, 0) * 45ms + 300ms); }
@keyframes ignite { from { transform: scale(0, 0); opacity: 0; } 50% { opacity: 1; } to { transform: scale(1, 1); } }
@keyframes ignite-glow { from { opacity: 0; } }

/* ---------- Header and the Gauntlet ---------- */

.top { padding: 0 16px 24px; }

.seasons {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 18px 0 8px;
}
.seasons > * {
  font: 800 1.0625rem/1 var(--display);
  letter-spacing: 0.03em;
  color: var(--text-soft);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 8px 10px 6px;
  text-decoration: none;
  cursor: pointer;
}
.seasons button:hover { color: var(--text); }
.seasons button[aria-pressed='true'] { color: var(--text); border-bottom-color: var(--fire); }
.seasons .what { color: var(--fire); }
.seasons .what:hover { border-bottom-color: var(--fire); }

.hero {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 340px);
  align-items: center;
  gap: 24px 48px;
}

h1 {
  font-size: clamp(3.75rem, 11vw, 9rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 0 50px rgba(255, 120, 30, 0.25);
}

.lede { font: 800 clamp(1.375rem, 2.8vw, 2rem) / 1.1 var(--display); color: var(--text-soft); margin: 0 0 6px; }
.pitch { font: 800 clamp(1.5rem, 3vw, 2.25rem) / 1 var(--display); color: var(--fire); margin: 10px 0 0; }

.status { font: 800 clamp(1.625rem, 3.2vw, 2.375rem) / 1.08 var(--display); margin: 24px 0 6px; max-width: 30ch; text-wrap: balance; }
.substatus { margin: 0; color: var(--text-soft); max-width: 58ch; }

.replay-open, .close {
  font: 800 1.125rem/1 var(--display);
  letter-spacing: 0.03em;
  color: #1d0d02;
  background: linear-gradient(#ffc04a, #ff7a1a);
  border: 0;
  border-radius: 999px;
  padding: 13px 22px 12px;
  cursor: pointer;
  transition: box-shadow 200ms;
}
.replay-open { margin-top: 20px; }
.replay-open:hover, .close:hover { box-shadow: 0 0 24px 2px rgba(255, 130, 30, 0.5); }

.trophy { margin: 0; justify-self: center; width: 100%; max-width: 340px; }
.trophy svg { display: block; width: 100%; height: auto; overflow: visible; }

.torch-fire .fire-body, .torch-fire .fire-glow, .torch-fire .lick, .torch-fire .embers > * { transform-box: fill-box; }
.torch-fire .fire-body, .torch-fire .fire-glow { transform-origin: 50% 100%; transform: scale(calc(0.55 + 0.45 * var(--heat, 1))); transition: transform 600ms ease-out; }
.torch-fire .fire-glow { animation: glow 2.4s ease-in-out infinite alternate; }
@keyframes glow { to { opacity: 0.7; } }
.torch-fire .lick { transform-origin: 50% 100%; }
.torch-fire .lick-a { animation: lick-a 1.7s ease-in-out infinite alternate; }
.torch-fire .lick-b { animation: lick-b 1.3s ease-in-out infinite alternate; }
.torch-fire .lick-c { animation: lick-c 0.9s ease-in-out infinite alternate; }
@keyframes lick-a { 0% { transform: skewX(0deg) scaleY(1); } 50% { transform: skewX(-5deg) scaleY(1.06); } 100% { transform: skewX(4deg) scaleY(0.96); } }
@keyframes lick-b { 0% { transform: skewX(3deg) scaleY(0.97); } 100% { transform: skewX(-4deg) scaleY(1.08); } }
@keyframes lick-c { 0% { transform: scale(1, 1); } 100% { transform: scale(0.9, 1.1); } }
.torch-fire .embers > * { fill: #ffcf6a; transform-origin: 50% 50%; animation: ember 2.6s linear infinite; opacity: 0; }
.torch-fire .embers > :nth-child(2) { animation-delay: -0.5s; animation-duration: 3.1s; }
.torch-fire .embers > :nth-child(3) { animation-delay: -1.2s; }
.torch-fire .embers > :nth-child(4) { animation-delay: -1.8s; animation-duration: 2.2s; }
.torch-fire .embers > :nth-child(5) { animation-delay: -0.9s; animation-duration: 3.4s; }
.torch-fire .embers > :nth-child(6) { animation-delay: -2.2s; }
.torch-fire .embers text { font-family: var(--display); font-weight: 900; }
.torch-fire .embers.unknown, .undecided .torch-fire .embers.sparks { display: none; }
.undecided .torch-fire .embers.unknown { display: inline; }
@keyframes ember { 0% { transform: translate(0, 30px); opacity: 0; } 15% { opacity: calc(0.4 + 0.6 * var(--heat, 1)); } 100% { transform: translate(8px, -70px); opacity: 0; } }

/* The champions' rings, engraved on the cuff. */
.rings .sep { stroke: #2b3540; stroke-width: 1.5; }
.rings text { font-family: var(--display); text-anchor: middle; }
.rings .season { font-size: 8px; font-weight: 800; letter-spacing: 0.12em; }
.rings .names { font-size: 10.5px; font-weight: 900; letter-spacing: 0.05em; }
.rings .cut { fill: #2b3640; }
.rings .lip { fill: rgba(255, 255, 255, 0.6); }
.rings .blank .cut { fill: #4f5d6a; }

/* ---------- The shelves: 32 candles ---------- */

.shelves { max-width: 1200px; margin: 28px auto 0; display: grid; gap: 28px; }
.shelf { position: relative; }
.shelf-label { font: 900 clamp(1.5rem, 2.6vw, 2.125rem)/1 var(--display); color: var(--text); margin: 0; }
.shelf-label .count { font: 700 0.5em/1 var(--body); color: var(--fire); margin-left: 8px; }

.row {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  align-items: end;
  isolation: isolate;
  /* the shelf they stand on */
  border-bottom: 9px solid var(--shelf);
  box-shadow: 0 1px 0 var(--shelf-lip), 0 14px 22px -10px rgba(0, 0, 0, 0.8);
}
.row li { display: flex; justify-content: center; transform-origin: 50% 100%; }
/* Replay: the loser's flame, in flight to the winner. */
.flame.stolen { position: fixed; z-index: 50; margin: 0; pointer-events: none; }
/* The winner's flame flares as the taken fire lands. */
.candle.flaring .flame { animation: flare 900ms ease-out; transform-origin: 50% 100%; }
.candle.flaring .glow { animation: flare-glow 900ms ease-out; }
@keyframes flare { 0% { transform: scale(1); } 25% { transform: scale(1.7, 1.9); } 100% { transform: scale(1); } }
@keyframes flare-glow { 25% { opacity: 1; filter: brightness(1.8); } }
.row .candle { --w: clamp(34px, 4.6vw, 58px); }
.row .candle .abbr { font-size: clamp(0.8rem, 1.5vw, 1.25rem); }
.row .candle .tail { font-size: clamp(0.55rem, 0.85vw, 0.75rem); }

/* Hover: the flame leans as if someone walked past. */
.row li:hover .flame, .row li:focus-visible .flame { animation: lean 900ms ease-out; }
@keyframes lean { 25% { transform: skewX(-14deg) scale(0.9, 1.15); } 60% { transform: skewX(8deg); } 100% { transform: skewX(0); } }

/* ---------- Replay ---------- */

.replay-panel {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 16px;
  translate: -50% 0;
  width: min(760px, calc(100% - 24px));
  padding: 16px 18px 14px;
  border-radius: 16px;
  background: rgba(14, 12, 10, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 138, 30, 0.35), 0 20px 50px rgba(0, 0, 0, 0.6);
}

.scorecard { min-height: 92px; }
.scorecard .when { color: var(--text-soft); font-size: 0.9375rem; }
.scorecard .score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font: 900 clamp(1.75rem, 4vw, 2.5rem) / 1.05 var(--display);
  margin: 2px 0;
}
.scorecard .score .loser { color: var(--text-soft); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(239, 74, 58, 0.8); }
.scorecard .score .sep { color: var(--text-soft); font-weight: 600; }
.scorecard .line { color: var(--fire); font: 800 1.125rem/1.2 var(--display); }

.controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ctl {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #4a3a2a;
  background: #1c1610;
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ctl:hover { border-color: var(--fire); }
.ctl svg { width: 18px; height: 18px; fill: currentColor; }
.ctl.play { width: 48px; height: 48px; background: linear-gradient(#ffc04a, #ff7a1a); color: #1d0d02; border: 0; }
.ctl.play .i-pause { display: none; }
.ctl.play[aria-pressed='true'] .i-play { display: none; }
.ctl.play[aria-pressed='true'] .i-pause { display: inline; }
.progress { color: var(--text-soft); font-size: 0.9375rem; margin-left: 6px; font-variant-numeric: tabular-nums; }
.controls .close { margin-left: auto; padding: 10px 18px 9px; }

/* ---------- Main ---------- */

main { max-width: 1200px; margin: 0 auto; padding: 0 16px 24px; }
section { padding: 36px 0 0; }
h2 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 900; margin-bottom: 16px; }
.hint { color: var(--text-soft); max-width: 62ch; margin: -6px 0 18px; }

.star, .star-link { color: var(--red); font: 700 1.2em/1 var(--body); }
.star-link { text-decoration: none; padding: 0 2px; }
.star-link:hover { text-decoration: underline; }

/* Next up: two candles side by side for each game. */
.faceoffs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  column-gap: 32px;
}
.faceoffs li {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.faceoffs .when { font: 600 0.9375rem/1.2 var(--body); color: var(--text-soft); white-space: nowrap; }
.faceoffs .game { font: 800 1.25rem/1.1 var(--display); color: var(--text-soft); }
.faceoffs .game b { color: var(--text); font-weight: 900; }
.faceoffs .empty { display: block; color: var(--text-soft); }
.faceoffs .live { color: var(--red); }
.faceoffs .live::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px 2px rgba(239, 74, 58, 0.8);
  animation: goal-light 1s steps(2, jump-none) infinite;
}
@keyframes goal-light { 50% { opacity: 0.2; } }
.empty { color: var(--text-soft); }

/* Bracket: rounds across the top (they stay put as you scroll), East and West in their own lanes. */
.bracket {
  display: grid;
  grid-template-columns: 52px minmax(260px, 2.1fr) repeat(var(--later, 4), minmax(124px, 1fr));
}

.b-head {
  grid-row: 1;
  grid-column: var(--col);
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 12px 12px 10px;
  background: rgba(9, 14, 20, 0.94);
  border-bottom: 2px solid var(--line);
}
.b-head h3 { font-size: 1.375rem; font-weight: 800; }
.b-head .dates { color: var(--text-soft); font-size: 0.875rem; }

.b-lane {
  grid-column: 1;
  writing-mode: vertical-rl;
  rotate: 180deg;
  display: grid;
  place-items: center;
  font: 900 1.375rem/1 var(--display);
  letter-spacing: 0.12em;
  color: var(--text);
  border-left: 3px solid var(--fire);
}
.b-lane.E, .b-cell.E { grid-row: 2; background: rgba(255, 255, 255, 0.03); }
.b-lane.W, .b-cell.W { grid-row: 3; background: rgba(255, 255, 255, 0.055); border-top: 1px solid var(--line); }

.b-cell {
  grid-column: var(--col);
  padding: 14px 12px;
  display: grid;
  align-content: center;
  gap: 12px;
  border-left: 1px solid var(--line);
}
.b-cell.wide { grid-template-columns: 1fr 1fr; gap: 12px 18px; align-content: start; }
.b-cell.span { grid-row: 2 / 4; background: rgba(255, 138, 30, 0.04); }

/* A match: two lines, each a little candle, the team and its score. */
.match { display: grid; gap: 2px; }
.match .side { display: flex; align-items: center; gap: 8px; }
.mini-flame { width: 9px; flex: none; }
.mini-flame.flame { animation: none; }
.match .team { font: 800 1.125rem/1 var(--display); }
.match .pts { font: 600 1rem/1 var(--display); color: var(--text-soft); margin-left: auto; font-variant-numeric: tabular-nums; }
.match .side.lost .team { color: #7c766e; }
.match .side.won .pts { color: var(--text); }
.match .note { color: var(--text-soft); font-size: 0.8125rem; line-height: 1.25; padding-left: 21px; }

.stalled { color: var(--text-soft); font-size: 0.9375rem; margin: 0; }
.stalled b { color: var(--text); }
.champs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  isolation: isolate;
  width: max-content;
  min-height: 120px;
  padding: 0 8px;
  /* the champions' own little shelf */
  border-bottom: 6px solid var(--shelf);
  box-shadow: 0 1px 0 var(--shelf-lip), 0 10px 16px -8px rgba(0, 0, 0, 0.8);
}
.champs .candle { --w: 44px; --tall: 1.8; }
.later { color: var(--text-soft); margin: 0; font-size: 0.9375rem; }

/* What is this, the rules and the footnote */

.about p { max-width: 62ch; margin: 0 0 12px; color: var(--text-soft); }
.about p:first-of-type { color: var(--text); font-size: 1.1875rem; }
#what { scroll-margin-top: 24px; }

.rules dl { max-width: 66ch; margin: 0; }
.rules dt { font: 800 1.5rem/1.1 var(--display); margin-top: 22px; }
.rules dt:first-child { margin-top: 0; }
.rules dd { margin: 6px 0 0; color: var(--text-soft); }
.rules dd a { color: var(--text); text-decoration-color: var(--fire); text-underline-offset: 3px; }

.footnote {
  max-width: 72ch;
  margin: 20px 0 0;
  color: #7f786f;
  font-size: 0.8125rem;
  line-height: 1.5;
  scroll-margin-top: 24px;
}
.footnote b { color: var(--text-soft); font-weight: 600; }
.footnote .star { margin-right: 3px; }
.footnote:target { color: var(--text); background: rgba(255, 138, 30, 0.08); outline: 1px solid rgba(255, 138, 30, 0.4); outline-offset: 8px; }

footer { color: var(--text-soft); font-size: 0.875rem; text-align: center; padding: 28px 16px 40px; }
footer p { margin: 4px 0; }
body.replaying footer { padding-bottom: 220px; }

/* ---------- Motion and small screens ---------- */

@media (prefers-reduced-motion: reduce) {
  .flame, .candle .glow, .lighting .candle:not(.out) .flame, .lighting .candle:not(.out) .glow,
  .candle.smoking::before, .row li:hover .flame,
  .torch-fire .lick, .torch-fire .fire-glow, .torch-fire .embers > *, .faceoffs .live::before { animation: none; }
}

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .trophy { order: -1; max-width: 200px; }
  .row { grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: 16px; border-bottom: 0; box-shadow: none; }
  /* On narrow screens each row of eight gets its own shelf. */
  .row li { border-bottom: 7px solid var(--shelf); box-shadow: 0 1px 0 var(--shelf-lip); }
  .row .candle { --w: 36px; }
  .bracket { grid-template-columns: 1fr; }
  .b-head, .b-cell, .b-lane { grid-row: auto !important; grid-column: auto !important; }
  .b-head { position: static; padding: 18px 0 8px; background: none; }
  .b-lane { display: none; }
  .b-cell { border-left: 0; padding: 10px 12px; }
  .b-cell.wide { grid-template-columns: 1fr; }
  .b-cell.E::before, .b-cell.W::before { font: 800 0.8125rem/1 var(--display); letter-spacing: 0.12em; color: var(--text-soft); grid-column: 1 / -1; }
  .b-cell.E::before { content: 'East'; }
  .b-cell.W::before { content: 'West'; }
  .scorecard { min-height: 0; }
  .controls .close { margin-left: 0; }
}