/* 1rem = 1 pixel of the game's 144x240 grid; JS sets html font-size to an integer device-pixel scale */
* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html { font-size: 4px; }
html, body { height: 100%; background: #0b0e1f; overflow: hidden; overscroll-behavior: none; touch-action: none;
  user-select: none; -webkit-user-select: none; font-family: 'Press Start 2P', 'Courier New', monospace; }
body { display: flex; align-items: center; justify-content: center; font-size: 4rem; color: #fff; }
#stage { position: relative; width: 144rem; height: 240rem; overflow: hidden; background: #000; }
#c { width: 100%; height: 100%; display: block; image-rendering: crisp-edges; image-rendering: pixelated; }

.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 6rem; text-shadow: 1rem 1rem 0 #000; }
.screen.on { display: flex; }
#menu { justify-content: flex-start; padding-top: 20rem; gap: 4rem; }
.bottom { margin-top: auto; padding-bottom: 12rem; display: flex; flex-direction: column; align-items: center; gap: 6rem; }
h1 { font-size: 16rem; line-height: 1.25; text-align: center; color: #ffd23f; animation: bob 1.2s steps(4) infinite;
  text-shadow: 2rem 2rem 0 #a05a00, 3rem 3rem 0 #000; }
h2 { font-size: 8rem; } h2.red { color: #ff5a5a; margin-bottom: 4rem; }
@keyframes bob { 50% { transform: translateY(-3rem); } }

.btn { font: inherit; font-size: 8rem; color: #fff; background: #ffb52e; border: 0; padding: 5rem 8rem; min-width: 76rem;
  cursor: pointer; text-shadow: 1rem 1rem 0 #7a4200;
  box-shadow: inset -1rem -1rem 0 #c46f0b, inset 1rem 1rem 0 #ffe08a, 0 0 0 1rem #2a1a0a, 0 2rem 0 1rem #2a1a0a; }
.btn.blue { background: #3fa9ff; text-shadow: 1rem 1rem 0 #0b4a80;
  box-shadow: inset -1rem -1rem 0 #1d78c8, inset 1rem 1rem 0 #a5dcff, 0 0 0 1rem #0a1a2a, 0 2rem 0 1rem #0a1a2a; }
.btn:active { transform: translateY(1rem); }
.btn.small { font-size: 4rem; min-width: 40rem; padding: 4rem; flex-shrink: 0; margin-bottom: 6rem; }
.btn.tiny { font-size: 4rem; min-width: 0; padding: 2rem 3rem; }
.btn:disabled { filter: grayscale(.7) brightness(.8); cursor: default; }
#mute { position: absolute; top: 4rem; right: 5rem; z-index: 5; }

#hint { position: absolute; left: 0; right: 0; top: 138rem; text-align: center; font-size: 8rem; display: none;
  text-shadow: 1rem 1rem 0 #000; animation: blink .8s steps(2) infinite; }
#hint.on { display: block; }
@keyframes blink { 50% { opacity: .35; } }

.coin { display: inline-block; width: 6rem; height: 6rem; background: #ffd23f; vertical-align: -1rem;
  box-shadow: 0 0 0 1rem #8a4a00, inset -1rem -1rem 0 #e0a010; }
.coins, #menu p, #shop p { font-size: 6rem; }
.panel { width: 118rem; padding: 8rem; background: rgba(8,10,30,.8); box-shadow: 0 0 0 1rem #fff, 0 0 0 2rem #000; text-align: center; margin-bottom: 4rem; }
.row { display: flex; justify-content: space-between; margin: 3rem 0; }
.row.big { font-size: 6rem; } .row.gold { color: #ffd23f; }
hr { border: 0; height: 1rem; background: #fff5; margin: 4rem 0; }

#shop { justify-content: flex-start; padding-top: 8rem; gap: 3rem; background: rgba(8,10,30,.75); }
#grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; width: 132rem; overflow-y: auto; flex: 1; padding: 3rem;
  touch-action: pan-y; scrollbar-width: none; align-content: start; }
#grid::-webkit-scrollbar { display: none; }
.card { display: flex; flex-direction: column; align-items: center; gap: 3rem; padding: 4rem 2rem; text-align: center;
  background: rgba(0,0,0,.5); box-shadow: 0 0 0 1rem #445; }
.card.sel { box-shadow: 0 0 0 1rem #ffd23f; }
.card.nope { animation: nope .3s steps(4); }
@keyframes nope { 25% { transform: translateX(-2rem); } 75% { transform: translateX(2rem); } }
.card canvas { width: 54rem; height: 42rem; image-rendering: crisp-edges; image-rendering: pixelated; }