/* Added for thegrandpricks.com: the site's "Back to games" link (tools/sync-games.py puts it at <!-- back link -->),
   centered at the top where the game's corners have its score and time */
#back {
  position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 10; padding: 3px 8px; border-radius: 3px;
  font: 12px/1.2 Verdana, Tahoma, sans-serif; letter-spacing: normal; text-transform: none;
  color: #fff; text-decoration: none; background: rgba(0, 0, 0, .45); opacity: .7;
}
#back:hover, #back:focus-visible { opacity: 1; }

/* Phones: the game tries to cancel touch gestures from page-wide listeners, which browsers now make passive (so it
   can't). This keeps a drag on the controls from scrolling, zooming or pull-to-refreshing the page. */
html, body { touch-action: none; overscroll-behavior: none; }

/* Online high scores (HighScores.js): the top 10 and the initials entry, centered in the game's own lettering */
.hsPanel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; display: none;
  font-family: 'HersheySimplex'; letter-spacing: 0.15em; line-height: 1.4; text-transform: uppercase;
  color: #F0F6FF; text-align: center; white-space: nowrap;
  /* a dark outline, so the moonscape's lines stay clear of the letters */
  text-shadow: 2px 0 1px #000006, -2px 0 1px #000006, 0 2px 1px #000006, 0 -2px 1px #000006,
    2px 2px 1px #000006, -2px -2px 1px #000006, 2px -2px 1px #000006, -2px 2px 1px #000006, 0 0 6px #000006;
}
.hsTitle { font-size: 1.3em; margin-bottom: 0.5em; }
.hsRank, .hsName, .hsScore { display: inline-block; }
.hsRank { width: 1.6em; text-align: right; }
.hsName { width: 4em; margin-left: 1.5em; text-align: left; }
.hsScore { width: 4em; text-align: right; }
.hsFoot { margin-top: 0.8em; }
.hsMine { animation: hsBlink 0.8s step-end infinite; }
@keyframes hsBlink { 50% { opacity: 0; } }

.hsButton { cursor: pointer; }
.hsSlots { margin: 0.3em 0 0.5em; }
.hsSlot { display: inline-block; width: max(2.6em, 44px); vertical-align: top; } /* big enough to tap */
.hsArrow { display: flex; align-items: center; justify-content: center; height: max(2.4em, 42px); visibility: hidden; }
.hsPicking .hsArrow { visibility: visible; }
.hsArrow svg { width: 1.3em; height: 0.8em; overflow: visible; }
.hsArrow polygon { fill: #000006; stroke: #F0F6FF; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hsLetter { font-size: 2.2em; height: 1.3em; line-height: 1.3em; margin: 0 0.1em; letter-spacing: 0; border-bottom: 1px solid #F0F6FF; }
.hsPicking .hsLetter { animation: hsBlinkLine 0.8s step-end infinite; }
@keyframes hsBlinkLine { 50% { border-bottom-color: transparent; } }
.hsOk { display: inline-block; padding: max(0.5em, 13px) max(1.2em, 26px); border: 1px solid #F0F6FF; background: #000006; }
.hsSending .hsOk { visibility: hidden; }
.hsHint { font-size: 0.75em; opacity: 0.8; }
.hsOk + .hsHint { margin-top: 1.2em; }