:root {
    --black: #241623; /* dark_purple */
    --gray: #c5c3bc;
    --green: green;
    --red: red;
    --blue: blue;
    --background: white;
    --possibly-correct: orange;
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
    font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    overflow-y: hidden;
    height: 100%;
}

html, body {
    margin: 0;
    background: var(--background);
    color: var(--black);
}

body {
    text-align: center;

    display: flex;
    flex-direction: column;

    height: 100%;
}

body > h1 {
    /* font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif; */
    font-weight: normal
}

body > main {
    margin: 0 auto;
    max-width: 28rem;
    width: 100%;
    padding: 0em 1em 0.5em 1em; /* T R B L */
    flex-grow: 1;
    box-sizing: border-box;
}

body > footer {
    padding: 1rem;
    padding-top: 0rem;
    text-align: center;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
    touch-action: none; /* Don't allow scrolling while touching the grid */
    user-select: none;
    -webkit-user-select: none;
}

.tile {
    border: solid var(--gray) 1px;
    border-radius: 2px;
    text-align: center;
    font-size: 2.5em;
    aspect-ratio: 1/1;
    cursor: pointer;

    /* Center letters in boxes */
    display: flex;
    justify-content: center;
    align-items: center;
}

.tile:hover {
    border-style: dashed !important;
}

.tile[active=true] {
    border: solid var(--black) 2px;
}

.tile[possibly-correct=true] {
    transition: border 250ms ease-in;
    border: solid var(--possibly-correct) 2px;
}

.tile[correct=true] {
    transition: border 250ms ease-in;
    border: solid var(--green) 2px;
}

.tile[hole=true] {
    color: transparent
}

#shuffled {
    font-weight: bold;
    /* text-decoration: underline; */
    /* text-underline-position: under; */
}

#solution {
    font-weight: bold;
    letter-spacing: 3px;
}

/* Toolbar */
main > aside {
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

#moves {
    background-color: var(--background);
    color: var(--red);
}

#help {
    cursor: pointer;
    text-decoration: underline;
    /* text-underline-position: under; */

    text-decoration-color: rgba(0,0,0,0.2);
    transition: text-decoration-color 200ms;
}
#help:hover {
    text-decoration-color: rgba(0,0,0,1);
}

.modal {
    box-sizing: border-box;

    text-align: left;
    background-color: var(--background);

    box-shadow:
        rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset,
        rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;

    padding: 1rem 2rem;
    border-radius: 1px;

    opacity: 1;
    transition: opacity 300ms ease-in;
    z-index: 2;
    pointer-events: none; /* <-- Overwritten by JS */

    font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
    font-weight: normal;

    overflow-y: auto;
    font-size: 1.1em;

    position: absolute;
    top: 4em;
    bottom: 4em;
    left: 25%;
    right: 25%;
}

.close-modal-btn {
    cursor: pointer;
}

#help-modal.modal {
    box-shadow:
        var(--background) 0px 0px 0px 1px inset,
        rgba(0, 0, 0, 0.9) 0px 0px 0px 1px,
        var(--background) 0px 0px 0px 4px,
        var(--blue) 0px 0px 0px 5px;
}

#victory-modal.modal {
    box-shadow:
        rgb(255, 217, 19) 0px 0px 0px 5px,
        var(--background) 0px 0px 0px 10px,
        rgb(31, 193, 27) 0px 0px 0px 15px;

    /* Some glow */
    filter: drop-shadow(0px 0px 5em rgb(255, 217, 19, 0.5));

    aspect-ratio: 1 / 1;
    border-radius: 100%;
    overflow: hidden;
    margin: auto;

    width: 30%;

    padding: 2em;

    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dimmable {
    transition: opacity 300ms ease-in;
}

#wall {
    position: absolute; top: 0; left: 0; width:100%; height:100%
}

.example {
    display: flex;
    align-items: center;
    gap: 5px;
}

.example > .tile {
    height: 1em;
    box-sizing: border-box;
}

.smaller-options {
    display: flex;
    justify-content: center;
    align-items: bottom;
    margin-top: -1em;
}

.small-option {
    color: var(--gray);
    text-decoration: underline;
    text-decoration-style: dotted;
    font-size: 0.9em;
}

#restart-qm {
    text-align: right;
    cursor: pointer;
}

#hint {
    cursor: pointer;
}

#share {
    text-align: center;
    margin: 0 auto;
    color: var(--black);
    cursor: pointer;
    border: 1px solid var(--black);
    padding: 0.25em 1em;
    border-radius: 2em;
    transition: background-color 100ms ease-in, color 100ms ease-in;
}

#share:hover {
    background-color: var(--black);
    color: var(--background);
}

#share:active {

}

/* --------------------------------------------------------------------------------
 * Animation
 */

.winanim {
  animation: wobble 2s ease 480ms, gelatine 0.5s 2600ms;
}

.wobble {
  animation: wobble 2s ease 480ms;
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

.gelatine {
  animation: gelatine 0.5s 0ms;
}
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

.roll-out {
  animation: roll-out 5s ease infinite;
}
@keyframes roll-out {
  0% {
    opacity: 1;
    transform: translateX(0px);
  }
  25% {
    opacity: 1;
    transform: translateX(0px);
  }
  75% {
    opacity: 0;
    transform: translateX(160%);
  }
  100% {
    opacity: 0;
    transform: translateX(160%);
  }
}

.sym-roll-out {
  animation: sym-roll-out 5s ease infinite;
}
@keyframes sym-roll-out {
  0% {
    opacity: 1;
    transform: translateX(0px);
  }
  25% {
    opacity: 1;
    transform: translateX(0px);
  }
  75% {
    opacity: 0;
    transform: translateX(-160%);
  }
  100% {
    opacity: 0;
    transform: translateX(-160%);
  }
}

.ex-fade-in {
  animation: ex-fade-in 5s ease infinite;
}
@keyframes ex-fade-in {
  0% {
    opacity: 0
  }
  50% {
    opacity: 0
  }
  75% {
    opacity: 1
  }
  100% {
    opacity: 1
  }
}

.hithere {
  animation: hithere 2s ease 500ms;
}
@keyframes hithere {
  30% { transform: scale(1.7) translate(0.7em,0); }
  40%, 60% { transform: rotate(-20deg) scale(1.7) translate(0.7em,0); }
  50% { transform: rotate(20deg) scale(1.7) translate(0.7em,0); }
  70% { transform: rotate(0deg) scale(1.7) translate(0.7em,0); }
  100% { transform: scale(1); }
}

.bounce-in {
  animation: bounce-in 1s ease 305ms;
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(.9);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.win-modal-anim {
    animation: bounce-in 1s ease 300ms;
}

/* --------------------------------------------------------------------------------
   Responsiveness
 */

/* Larger modals */
@media only screen and (max-width: 1024px) {
  .modal {
    top: 3em;
    bottom: 3em;
    left: 17.5%;
    right: 17.5%;
  }

  #victory-modal.modal {
    width: 45%;
  }
}

@media only screen and (max-width: 640px) {
  .modal {
    top: 3em;
    bottom: 3em;
    left: 5%;
    right: 5%;
  }

  #victory-modal.modal {
    width: 85%;
  }
}

/* Next two: don't make letters too big for boxes, causes problem with box-sizing */
@media only screen and (max-width: 445px) {
  .tile {
      font-size: 2em;
  }

  body > h1 {
      font-size: 1.75em;
  }
}

@media only screen and (max-width: 295px) {
  .tile {
      font-size: 1.5em;
  }
}

/* On bigger screens, reduce size of victory modal */
@media only screen and (min-width: 1444px) {
    #victory-modal.modal {
        width: 20%;
    }
}