style.css

html, body {
   margin: 0;
   padding: 0;
   font-family: monospace;
   color: #2A261F;
   background-color: #E3D8C4;
   overscroll-behavior: none;
}

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

* {
   box-sizing: border-box;
}

.music {
   text-decoration: none;
   display: flex;
   align-items: center;
   position: absolute;
   top: env(safe-area-inset-top);
   right: env(safe-area-inset-right);
   padding: 4px;
   fill: #2A261F;
   font-size: 4em;
}

#s5.intro .music.off::before {
   font-size: 0.3em;
   color: #32291E;
   display: inline-block;
   content: "Enable audio → ";
   animation: shake 1s ease-in-out;
   animation-iteration-count: infinite;
}

@keyframes shake {
   0% { transform: translateX(-4px) }
   50% { transform: translateX(0px) }
   100% { transform: translateX(-4px) }
}

#s5.map .music {
   font-size: 3em;
}

#s5.game .music {
   top: 0;
   right: 0;
   font-size: 2em;
}

.signOut, .signOut:visited {
   color: #32291E;
   margin: 2em;
}

button, a.button {
   all: unset;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-width: 44px;
   min-height: 44px;
   font-size: 1.5em;
   border: 3px solid #32291E;
   color: #32291E;
   background-color: #dad4c8;
   border-radius: 2px;
   padding: 8px 16px;
   width: calc(100% - 36px);
   cursor: pointer;
}

button:hover, a.button:hover {
   background-color: #bab5ab;
}

h1 {
   margin: 4rem 0 0 0;
}

.disclaimer {
   font-size: 0.8em;
}

.subtitle {
   font-size: 2em;
   font-style: italic;
}

.small {
   font-size: 1.5rem;
   font-style: normal;
}

#s5 {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#s5.intro {
   justify-content: center;
   padding-left: 8px;
   padding-right: 8px;
   gap: 8px;
   text-align: center;
   margin-bottom: 2em;
}

#s5.intro h1 {
   font-family: Luminari, monospace;
   font-size: 18vw;
}

#s5.intro .subtitle {
   margin-bottom: 1.5em;
   font-size: 1.5em;
}

#s5.intro p {
   margin-bottom: 0;
}

.leaderboard {
   display: grid;
   grid-template-columns: auto auto 1fr;
   width: 100%;
   max-width: 320px;
   gap: 6px;
   line-break: anywhere;
}

.leaderboardWrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   margin: 1em 0;
}

.leaderboardWrap h2 {
   margin-top: 0;
}

.map .leaderboardWrap {
   margin: 2em 0;
}

.score {
   text-align: right;
   white-space: nowrap;
}

#s5.game {
   width: 100vw;
   background-color: #D9CFBD;
   align-items: unset;
}

.gamePanel {
   display: flex;
   flex: 1;
   flex-direction: column;
   border-bottom: 2px dashed #A7987E;
}

.status {
   padding: 6px;
   text-align: center;
   font-size: 4.5vw;
   background-color: #E3D8C4;
   border-top: 2px solid #B9AF9D;
}

.status svg {
   margin-top: -1em;
}

.gameFrame {
   flex: 1;
   position: relative;
   aspect-ratio: 4 / 3;
   width: 100%;
}

.gameFrame canvas {
   position: absolute;
}

.gameFrame .hud {
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-rows: 1fr auto;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   font-size: 6vw;
}

.hud .ne {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   grid-area: 1 / 2 / 2 / 3;
   padding: 0.5em;
}

.hud .s {
   grid-area: 2 / 1 / 3 / 3;
   text-align: center;
   padding: 0.5em;
}

.hud .nw {
   grid-area: 1 / 1 / 2 / 2;
   padding: 0.5em;
}

.hud .stat {
   display: inline-block;
   padding: 3px;
   backdrop-filter: blur(0.8px);
   -webkit-backdrop-filter: blur(0.7px);
}

.stat .value {
   padding-left: 0.25em;
}

.hud .bonus {
   display: flex;
   flex-direction: column;
   font-size: 2em;
   line-height: 0.8em;
   text-align: center;
}

.controlPanel {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
}

.c7 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
   gap: 6px;
   margin: 1em;
   touch-action: manipulation;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.c7 button {
   padding: 0;
   margin: 0;
}

.c7 .center {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 3.7em;
   line-height: 0.2em;
   color: #295057;
}

#s5.map {
   justify-content: center;
   text-align: center;
   padding-left: 8px;
   padding-right: 8px;
   margin-bottom: 2em;
   max-width: 100vw;
   gap: 8px;
}

#s5.map h1 {
   font-size: 3em;
}

#s5.map canvas {
   max-height: 60vh;
   max-width: 100vw;
}

.share {
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: 8px;
}

.share :first-child {
   margin-left: 0;
}

.share :last-child {
   margin-right: 0;
}

@media (min-width: 480px) {
   .gameFrame .hud {
      font-size: 2em;
   }
}

@media (min-width: 560px) {
   #s5.intro h1 {
      font-size: 7em;
   }
   #s5.map .share {
      flex-direction: row;
   }
}

@media (min-width: 620px) {
   #s5.game {
      flex-direction: row;
   }
   .gamePanel {
      border-bottom: none;
      border-right: 2px dashed #A7987E;
   }
   .status {
      font-size: min(2em, 3vw);
   }
   .gameFrame {
      flex: 1;
      aspect-ratio: unset;
   }
   .controlPanel {
      width: auto;
   }
}