html {
     height:100%;
     display: block;
     background-color: black;
     font-family: arial;
     color: white;
   }
   body {
     height: 100%;
     max-width: 700px;
     margin: auto;
     padding: 0;
   }
   #game-container {
     width:100%;
     margin: 0 auto;
     display:flex;
     flex-flow: column nowrap;
   }
   #header {
     display:flex;
     flex-flow: row nowrap;
     justify-content: space-around;
     min-height:50px;
     padding-left: 5px;
     padding-right: 5px;
     padding-top: 5px;
     align-items: center;
   }
   #board-container {
     width:90%;
     margin: auto;
   }
   #board {
     display:grid;
     grid-gap: 1px;
     margin: auto;
     max-width:calc(75vh - 2em);
     max-height:calc(75vh - 2em);
   }
   #board::before {
     content: '';
     width: 0;
     padding-bottom: 100%;
     grid-row: 1 / 1;
     grid-column: 1 / 1;
   }
   #board > *:first-child {
     grid-row: 1 / 1;
     grid-column: 1 / 1;
   }
   #toolbar-container {
    margin-top: 15px;
     margin-left:5px;
     margin-right:5px;
     min-height: 60px;
     display: flex;
   }
   #toolbar {
     width: 100%;
     padding: 5px;
     height:auto;
     margin:auto;
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-around;
   }
   .box {
     background-color: lightgrey;
     -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
     -o-transition: all .5s ease;
     transition: all .5s ease;
   }
   * {
     -ms-touch-action: manipulation;
     touch-action: manipulation;
   }
   .hdr {
     background-size:cover;
   }


  #preload {
      display: none;
      background: 
          url("/images/themes/default/tiles/blank-track.png") no-repeat,
          url("/images/themes/default/tiles/vt-track.png") no-repeat,
          url("/images/themes/default/tiles/hz-track.png") no-repeat,
          url("/images/themes/default/tiles/br-track.png") no-repeat,
          url("/images/themes/default/tiles/tr-track.png") no-repeat,
          url("/images/themes/default/tiles/bl-track.png") no-repeat,
          url("/images/themes/default/tiles/tl-track.png") no-repeat,
          url("/images/themes/default/tiles/x-track.png") no-repeat,
          url("/images/themes/default/tiles/dot-none.png") no-repeat,
          url("/images/themes/default/tiles/dot-t.png") no-repeat,
          url("/images/themes/default/tiles/dot-b.png") no-repeat,
          url("/images/themes/default/tiles/dot-l.png") no-repeat,
          url("/images/themes/default/tiles/dot-r.png") no-repeat,
          url("/images/themes/default/tiles/dot-hz.png") no-repeat,
          url("/images/themes/default/tiles/dot-vt.png") no-repeat,
          url("/images/themes/default/tiles/dot-tl.png") no-repeat,
          url("/images/themes/default/tiles/dot-bl.png") no-repeat,
          url("/images/themes/default/tiles/dot-tr.png") no-repeat,
          url("/images/themes/default/tiles/dot-br.png") no-repeat,
          url("/images/themes/default/tiles/dot-all.png") no-repeat,
          url("/images/themes/default/tiles/vt-alt-track.png") no-repeat,
          url("/images/themes/default/tiles/hz-alt-track.png") no-repeat,
          url("/images/themes/default/tiles/br-alt-track.png") no-repeat,
          url("/images/themes/default/tiles/tr-alt-track.png") no-repeat,
          url("/images/themes/default/tiles/bl-alt-track.png") no-repeat,
          url("/images/themes/default/tiles/tl-alt-track.png") no-repeat,
          url("/images/themes/default/tiles/blank-track.png") no-repeat,
          url("/images/themes/default/tiles/b-station.png") no-repeat,
          url("/images/themes/default/tiles/t-station.png") no-repeat,
          url("/images/themes/default/tiles/l-station.png") no-repeat,
          url("/images/themes/default/tiles/r-station.png") no-repeat;
  }

   .o {
     background-image: url("/images/themes/default/tiles/blank-track.png");
     background-size:cover;
   }
   .vt {
     background-image: url("/images/themes/default/tiles/vt-track.png");
     background-size:cover;
   }
   .hz {
     background-image: url("/images/themes/default/tiles/hz-track.png");
     background-size:cover;
   }
   .br {
     background-image: url("/images/themes/default/tiles/br-track.png");
     background-size:cover;
   }
   .tr {
     background-image: url("/images/themes/default/tiles/tr-track.png");
     background-size:cover;
   }
   .bl {
     background-image: url("/images/themes/default/tiles/bl-track.png");
     background-size:cover;
   }
   .tl {
     background-image: url("/images/themes/default/tiles/tl-track.png");
     background-size:cover;
   }
   .x {
     background-image: url("/images/themes/default/tiles/x-track.png");
     background-size:cover;
   }
   .dot {
     background-image: url("/images/themes/default/tiles/dot-none.png");
     background-size:cover;
   }
   .dot.t {
     background-image: url("/images/themes/default/tiles/dot-t.png");
     background-size:cover;
   }
   .dot.b {
     background-image: url("/images/themes/default/tiles/dot-b.png");
     background-size:cover;
   }
   .dot.l {
     background-image: url("/images/themes/default/tiles/dot-l.png");
     background-size:cover;
   }
   .dot.r {
     background-image: url("/images/themes/default/tiles/dot-r.png");
     background-size:cover;
   }
   .dot.hz {
     background-image: url("/images/themes/default/tiles/dot-hz.png");
     background-size:cover;
   }
   .dot.vt {
     background-image: url("/images/themes/default/tiles/dot-vt.png");
     background-size:cover;
   }
   .dot.tl {
     background-image: url("/images/themes/default/tiles/dot-tl.png");
     background-size:cover;
   }
   .dot.bl {
     background-image: url("/images/themes/default/tiles/dot-bl.png");
     background-size:cover;
   }
   .dot.tr {
     background-image: url("/images/themes/default/tiles/dot-tr.png");
     background-size:cover;
   }
   .dot.br {
     background-image: url("/images/themes/default/tiles/dot-br.png");
     background-size:cover;
   }
   .tool-dot {
     background-image: url("/images/themes/default/tiles/dot-all.png");
     background-size:cover;
   }
   .vt-alt, .unclickable.vt {
     background-image: url("/images/themes/default/tiles/vt-alt-track.png");
     background-size:cover;
   }
   .hz-alt, .unclickable.hz {
     background-image: url("/images/themes/default/tiles/hz-alt-track.png");
     background-size:cover;
   }
   .br-alt, .unclickable.br {
     background-image: url("/images/themes/default/tiles/br-alt-track.png");
     background-size:cover;
   }
   .tr-alt, .unclickable.tr {
     background-image: url("/images/themes/default/tiles/tr-alt-track.png");
     background-size:cover;
   }
   .bl-alt, .unclickable.bl {
     background-image: url("/images/themes/default/tiles/bl-alt-track.png");
     background-size:cover;
   }
   .tl-alt, .unclickable.tl {
     background-image: url("/images/themes/default/tiles/tl-alt-track.png");
     background-size:cover;
   }
   .x-alt {
     background-image: url("/images/themes/default/tiles/blank-track.png");
     background-size:cover;
   }


   .sb {
     background-image: url("/images/themes/default/tiles/b-station.png");
     background-size:cover;      
   }

   .st {
     background-image: url("/images/themes/default/tiles/t-station.png");
     background-size:cover;      
   }

   .sl {
     background-image: url("/images/themes/default/tiles/l-station.png");
     background-size:cover;      
   }
   
   .sr {
     background-image: url("/images/themes/default/tiles/r-station.png");
     background-size:cover;      
   }
   .unclickable {
   }
   .highlighted {
     opacity: 65%;
   }
   .solved {
     border: solid 5px;
     border-color: darkorange;
   }
   .tool.selected {
     outline: solid 4px red;
   }
   .cnr {
     background-color: black;
   }
   .track-tiles {
     flex-basis: 60%;
     font-variant: all-small-caps;
     display: flex;
     height: 66px;
     justify-content: space-around;
     background-color: #8F7B53;
     #align-items: center;
     padding: 0px 5px;
     border-radius: 4px;
   }
   .helper-tiles {
     flex-basis: 30%;
     font-variant: all-small-caps;
     display: flex;
     height: 66px;
     justify-content: space-around;
     background-color: #8F7B53;
     #align-items: center;
     padding: 0px 5px;
     flex-flow: row nowrap;
     border-radius: 4px;
   }
   .tool {
     width: 30px;
     height: 30px;
     background-color: lightgray;
     color: #fff;
     border-radius: 5px;
     box-shadow: 2px 2px black;
   }
   .left-menu {
     display:flex;
     flex-basis: 40%;
     #justify-content: space-evenly;
     align-items: center;
   }
   .right-menu {
     display:flex;
     flex-basis: 40%;
     justify-content: space-evenly;
     align-items: center;
   }
   #date {
     display:flex;
     justify-content: center;
     color: white;
     font-size: 12px;
     padding-bottom: 5px;
   }
   .title {
     display: flex;
     flex-basis: 20%;
     justify-content: center;
   }
   #debug {
     margin:auto;
     margin-top: 5px;
   }
   #metadata {
     font-family:arial;
     font-size:15px;
     color:white;
     #padding-left: 2px;
   }
   #help-button {
     margin: 5px;
   }
   #timer {
     margin:5px;
   }

   //-- Game Stats -- //
   #gamecomplete {
   display: none;
   }

   :host([open]) #overlay {
     display: flex;
   }
   .modal-content {
     color: black;
     position: relative;
     border-radius: 8px;
     border: 1px solid grey;
     background-color: white;
     box-shadow: 0 4px 23px 0 rgba(0, 0, 0, 0.2);
     width: 80%;
     max-height: 90%;
     overflow-y: auto;
     animation: SlideIn 200ms;
     max-width: 700px;
     padding: 16px;
     box-sizing: border-box;
   }
   #day-of-week {
     font-weight: bold;
   }
   #completion-time {
     display:flex;
     font-weight: bold;
     font-size: 30px;
     padding: 5px;
   }
   #modal-title {
     width: 80%;
     border-bottom: solid 1px lightgray;
   }
   #modal-stats {
     display: flex;
     flex-flow: column nowrap;
     width: 95%;
     border-bottom: solid 1px lightgray;    
     align-items: center;  
     padding:20px;
   }
   .modal-prompt {
     padding: 10px 20px 20px 20px;
   }
   .modal-buttons {
     display: flex;
     justify-content: space-evenly;
   }
   .modal-content .close-icon {
     width: 24px;
     height: 24px;
     position: absolute;
     top: 16px;
     right: 16px;
   }
   .modal-content game-icon {
     position: fixed;
     user-select: none;
     cursor: pointer;
   }
   .modal-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 16px 0; 
   }
   .modal-content h1 {
     font-weight: 700;
     font-size: 16px;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     text-align: center;
     margin-bottom: 10px;
     margin-top: 0px;
   }
   #modal-footer {
     display: flex;
     width: 100%;
     justify-content: space-around;
     /*      outline: solid 1px black;
     */      margin-top: 20px;
     align-items: center;
   }
   #next-countdown {
     display: flex;
     flex-direction: column;
     align-items: center;
   }


.share-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.share-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px; /* Adjust size as needed */
}

/* Specific color adjustments for each platform */
#share-facebook i { color: #3b5998; }
#share-twitter i { color: #1da1f2; }
#share-linkedin i { color: #0077b5; }
#share-reddit i { color: #ff4500; }
#share-whatsapp i { color: #25d366; }
#share-pinterest i { color: #bd081c; }
#share-email i { color: #0072c6; }
#share-copy i { color: #000; }


/*.share-button i {
    color: #3b5998; /* Facebook color */
}

.share-button#share-twitter i {
    color: #1da1f2; /* Twitter color */
}

.share-button#share-copy i {
    color: #000; /* Black color for link */
}
*/

   #share {
/*     background-color: darkseagreen;
     border-radius: 5px;
     cursor: pointer;
     padding-left: 20px;
     padding-right:20px;
*/   }
   #share:hover {
/*     background-color: lightseagreen;
*/   }
   
   /*** GENERATOR ***/
   #generate-game-button, #start-button, #next-game-button, #hint-ok {
     background-color: green;
     color: white;
     width: 200px;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
     text-transform: uppercase;
     font-size: 20px;
     height: 30px;
     border-radius: 4px;
   }


   #start-button:hover, #generate-button:hover {
     opacity: 0.9;
   }
   /*** SLIDER ***/
   .slidecontainer {
     width: 100%; /* Width of the outside container */
   }
   /* The slider itself */
   .slider {
     -webkit-appearance: none;  /* Override default CSS styles */
     appearance: none;
     width: 100%; /* Full-width */
     height: 25px; /* Specified height */
     background: #d3d3d3; /* Grey background */
     outline: none; /* Remove outline */
     opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
     -webkit-transition: .2s; /* 0.2 seconds transition on hover */
     transition: opacity .2s;
   }
   /* Mouse-over effects */
   .slider:hover {
     opacity: 1; /* Fully shown on mouse-over */
   }
   /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
   .slider::-webkit-slider-thumb {
     -webkit-appearance: none; /* Override default look */
     appearance: none;
     width: 25px; /* Set a specific slider handle width */
     height: 25px; /* Slider handle height */
     background: #04AA6D; /* Green background */
     cursor: pointer; /* Cursor on hover */
   }
   .slider::-moz-range-thumb {
     width: 25px; /* Set a specific slider handle width */
     height: 25px; /* Slider handle height */
     background: #04AA6D; /* Green background */
     cursor: pointer; /* Cursor on hover */
   }

   .spinner {
    margin: 20px auto;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}