@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');

#full-wrapper { display: block; padding-bottom: 80px; }
html { font-size: 18px; }
body { background-color: #fcffff; color: #222222; font-size: 18px; margin: 0; font-family: "Inter", sans-serif; }

header { position: relative; background-color: #ff5f4e; outline: 1px dashed #ff5f4e; }
header h2 { margin: 0; line-height: 1.8rem; font-size: 1.8rem; font-weight: bold; text-align: center; }
header a { line-height: 100%; color: #fff; text-decoration: none; font-family: "Gloria Hallelujah", cursive; font-weight: 600; font-style: normal; }
header img { position: absolute; top: 0; left: 0; }

footer { }

#timezone { padding: 4px 0; text-align: center; border-bottom: 1px dashed #ff5f4e; }
#games { padding: 4px; }
#games div { padding: 6px; border-top: 1px dashed #c3daff; }
#games div:last-child { border-bottom: 1px dashed #c3daff; }
#games a { text-decoration: none; }

#game-header { font-size: 0.8rem; padding: 4px 0; text-align: center; border-bottom: 1px dashed #ff5f4e; }
#game-header .date { display: block; }

#game-data { position: relative; margin-bottom: 4px; }
#game-data .team { position: absolute; text-align: center; }
#game-data .away { left: 0; width: 40%; }
#game-data .home { right: 0; width: 40%; }
#game-data .clock { text-align: center; }
#game-data .score { font-weight: bold; }

#events .event { padding: 4px; margin: 4px; border-top: 1px dashed #c3daff; }
#events .event:last-child { border-bottom: 1px dashed #c3daff; }
#events .goal { display: block; font-weight: bold; }
#events .meta { display: block; }
#events .assist { display: block; }

#controls { background-color: #fcffff; padding: 4px; border-top: 1px dashed #ff5f4e; text-align: center; position: fixed; bottom: 0; left: 0; right: 0; }
#controls .game-speed { padding: 4px 0; }
#controls button {
  touch-action: manipulation;
  color: #AAA; background-color: #eee; font-weight: normal; -webkit-appearance: none; margin: 0;
  font-family: ubuntumono, monospace;
  font-size: 1rem; line-height: 1.2;
  padding: 4px 4px; border-radius: 6px; cursor: pointer; border: 1px solid transparent;
  box-shadow: #000 0 1px 2px, rgba(0, 0, 0, 0.30) 0 1px 2px; 
}
#controls button:not(:disabled) { color: #000; cursor: pointer; }


#rink {
  position: relative;
  padding: 8px;
  max-width: 800px;
  margin: 0 auto;
  /*
    200 x 85 feet
    goal lines 11 feet from end boards
    corner radius 28 feet
    blue lines 75 feet from end boards
    red line center
    goal-opening: 6 feet, 3.33 feet deep
    face-off cirlce end zones: 31 feet from end board, 22 feet from side board
    face-off circle neutral zone: 5 feet from blue line, 22 feet from side board
  */
}

#rink .faceoff {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #ff5f4e;
  outline: 2px solid #fff;
}

#rink .zone-away .faceoff.top { top: 26%; left: 41%; }
#rink .zone-away .faceoff.bottom { bottom: 26%; left: 41%; }
#rink .zone-home .faceoff.top { top: 26%; right: 41%; }
#rink .zone-home .faceoff.bottom { bottom: 26%; right: 41%; }
#rink .zone-neutral-left .faceoff.top { top: 26%; left: 20%; }
#rink .zone-neutral-left .faceoff.bottom { bottom: 26%; left: 20%; }
#rink .zone-neutral-right .faceoff.top { top: 26%; right: 20%; }
#rink .zone-neutral-right .faceoff.bottom { bottom: 26%; right: 20%; }
#rink .faceoff.center { background-color: #4473ff; left: calc(50% - 3px); top: calc(50% - 3px); }

#rink .outline {
  position: relative;
  width: 100%;
  aspect-ratio: 200 / 85;
  border-radius: 14% / 32.94%;
  outline: 2px solid #444;
}

#rink .zone-away {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 37.5%; /*(75 / 200) * 100*/
  border-right: 4px solid #4473ff;
}

#rink .zone-away .goal-line {
  position: absolute;
  width: 14.7%;
  left: 0;
  top: 6.5%;
  bottom: 6.5%;
  border-right: 2px solid #ff5f4e;
}

#rink .zone-home .goal-line {
  position: absolute;
  width: 14.7%;
  right: 0;
  top: 6.5%;
  bottom: 6.5%;
  border-left: 2px solid #ff5f4e;
}

#rink .zone-away .goal {
  position: absolute;
  width: 30%;
  right: -1px;
  top: 42.4%;
  bottom: 42.4%;
  border-radius: 4px 0 0 4px;
  outline: 1px solid #ff5f4e;
}

#rink .zone-home .goal {
  position: absolute;
  width: 30%;
  left: -1px;
  top: 42.4%;
  bottom: 42.4%;
  border-radius: 0 4px 4px 0;
  outline: 1px solid #ff5f4e;
}

#rink .zone-home {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 37.5%; /*(75 / 200) * 100*/
  border-left: 4px solid #4473ff;
}

#rink .zone-neutral-left {
  position: absolute;
  left: 37.5%;
  top: 0;
  bottom: 0;
  width: 12.5%;
  border-right: 2px solid #ff5f4e;
}

#rink .zone-neutral-right {
  position: absolute;
  right: 37.5%;
  top: 0;
  bottom: 0;
  width: 12.5%;
  border-left: 2px solid #ff5f4e;
}

@keyframes goal {
  0% { background-color: white; }
  10% { background-color: red; width: 70%; }
  20% { background-color: white; }
  30% { background-color: red; width: 70%; }
  40% { background-color: white; }
  50% { background-color: red; width: 70%; }
  60% { background-color: white; }
  70% { background-color: red; width: 70%; }
  80% { background-color: white; }
  90% { background-color: red; width: 70%; }
  100% { background-color: white; }
}

@keyframes faceoff {
  0% { box-shadow: 0 0 0 0 rgba(255,0,0,1); }
  50% { box-shadow: 0 0 0 6px rgba(255,0,0,0.2); }
  100% { box-shadow: 0 0 0 0 rgba(255,0,0,1); }
}

#rink .momentum { overflow: hidden; width: 120px; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); pointer-events: none; }
#rink .momentum .track { display: flex; }
#rink .momentum.away .track { animation: momentum-right 1.2s linear infinite; }
#rink .momentum.home .track { animation: momentum-left 1.2s linear infinite; }
#rink .momentum .arrows { display: flex; gap: 12px; opacity: 0.5; min-width: 100%; justify-content: space-between; }
#rink .momentum.away .arrow { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid orange; }
#rink .momentum.home .arrow { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 14px solid orange; }

@keyframes momentum-right {
  0% { transform: translateX(-43%); }
  100% { transform: translateX(0); }
}

@keyframes momentum-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-43%); }
}

#rink .shot {
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background: black;
}

#rink .shot.home { background: blue; opacity: 0.2; }
#rink .shot.away { background: red; opacity: 0.2; }

#rink .shot-trace {
  position: absolute;
  height: 1px;
  background: black;
  opacity: 0.5;
  transform-origin: 0 0;
  transform: scaleX(0);
  transition: transform 1.4s ease-out;
}