@font-face {
  font-family: 'Fascinate Inline';
  src: url('assets/fonts/FascinateInline-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Kenney Future';
  src: url('assets/kenney/kenney-future.ttf') format('truetype');
}

:root {
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* The game fills the whole page everywhere, from the first frame, so nothing flashes around it */
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #a7c8e4;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.game-frame {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #a7c8e4;
}

/* Desktop browsers: the game sits in a framed 16:9 card on a quiet page */
html.framed,
html.framed body {
  background: #e8ede8;
}

html.framed body {
  display: flex;
  align-items: center;
  justify-content: center;
}

html.framed .game-frame {
  --page-gap: clamp(8px, 2vw, 24px);
  width: min(calc(100vw - var(--page-gap) * 2 - 16px), calc((100vh - var(--page-gap) * 2 - 16px) * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  border: 8px solid #fff;
  border-radius: 28px;
  box-shadow: 0 8px 32px rgba(56, 76, 65, 0.12);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.rotate-hint {
  display: none;
}

@media (orientation: portrait) {
  body.touch .game-frame {
    display: none;
  }

  body.touch .rotate-hint {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font: 600 18px 'Trebuchet MS', sans-serif;
    color: #4a5663;
  }

  .rotate-phone {
    width: 56px;
    height: 96px;
    border: 5px solid #4a5663;
    border-radius: 12px;
    animation: rotate-phone 2.2s ease-in-out infinite;
  }
}

@keyframes rotate-phone {
  0%, 30% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}