@media (hover: hover) and (pointer: fine) {
  .tile:hover { background-color: #a7ccf7; }
  #btn:hover { background-color: #4768bc; }
  #connections polyline.highlight {
    stroke: #a7ccf7;           
    filter: drop-shadow(0 0 2px rgba(0,0,0,.15));
    stroke-width: 2rem;
  }
  #connections polyline:hover {
    stroke: #a7ccf7;
    filter: drop-shadow(0 0 2px rgba(0,0,0,.15));
    stroke-width: 2rem;
  }
}

@media (hover: none) {
  #connections polyline { pointer-events: none; }
  #connections polyline.highlight {
    stroke: #a7ccf7;           
    filter: drop-shadow(0 0 2px rgba(0,0,0,.15));
    stroke-width: 1.5rem;
  }
}

@media (max-width: 520px) {                     
  #connections polyline { stroke-width: 1.25rem; }
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    text-align: center;
    margin: 2rem 0;
    color: rgb(46, 46, 49);
}

p {
    text-align: center;
}

#grid {
    display: grid;
    grid-template-columns: repeat(5, 4rem);
    grid-template-rows: repeat(6, 4rem);
    gap: 0.75rem;
    width: max-content;
    margin: 2rem auto;
    overflow: visible;
    position: relative;
}

.tile {
    position: relative; z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    background-color: #f1f1f1;
    border-radius: 1rem;
    cursor: pointer;
    outline: none;
    transition: background-color 150ms, box-shadow 150ms;
    padding: 0;
    box-shadow: 0px 0px 2px rgba(0,0,0,0.15);
}

.tile:active { background-color: #a7ccf7; }
.tile.selected { background-color: #a7ccf7;}
.tile.current { box-shadow: 0 0 0 3px rgba(60, 89, 252, 0.6);}

.tile.complete {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.tile.selected,
.tile.selected:hover,
.tile.selected:active,
.tile.selected:focus-visible {
  background-color: #a7ccf7 !important;
}

.tile, #btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}


#btn {
    display: block;
    font-size: larger;
    margin: 2rem auto 0 auto;
    padding: 1rem 1.25rem;
    border-radius: 2rem;
    border: none;
    outline: none;
    transition: background-color 150ms, box-shadow 150ms;
    box-shadow: 0px 0px 2px rgba(0,0,0,0.15);
}

#connections { 
    pointer-events: none; 
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
}

#connections polyline {
    fill: none;
    stroke: #4768bc;
    stroke-width: 1.75rem;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 200ms ease,
                stroke-width 200ms ease,
                opacity 200ms ease;
    opacity: 0.4;
}

#connections polyline.connection {
  transition: stroke 120ms ease, opacity 120ms ease;
}

.hidden {
    display: none;
}