/* Chomp Rex - page styles.
   The game itself is drawn on the canvas (see js/); this file only lays out the page. */

/* ---- Pixel font, self-hosted (works offline and inside the Android app) ---- */
@font-face {
  font-family: 'Press Start 2P';
  src: url('fonts/press-start-2p-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Page ---- */
html,
body {
  margin: 0;
  height: 100%;
  background: #1d1a2b;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

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

/* ---- Game canvas: logical size 800x400, scaled to fit while keeping 2:1 ---- */
canvas {
  display: block;
  width: 100vw;
  max-width: calc(100vh * 2);
  aspect-ratio: 2 / 1;
  image-rendering: pixelated;
  touch-action: none;
}

/* Use the real visible height on mobile browsers (the address bar changes 100vh). */
@supports (height: 100dvh) {
  html,
  body {
    height: 100dvh;
  }

  canvas {
    max-width: calc(100dvh * 2);
  }
}

/* ---- Hidden text field: opens the on-screen keyboard for the name / country screens ---- */
#nm {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px; /* 16px stops iOS from zooming in on focus */
}

/* ---- "Rotate your device" message (phones held upright) ---- */
#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(29, 26, 43, 0.97);
  color: #ffd23f;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  line-height: 2;
  text-align: center;
}

#rotate .phone {
  width: 46px;
  height: 78px;
  margin-bottom: 22px;
  border: 4px solid #ffd23f;
  border-radius: 8px;
  animation: turn 2.4s ease-in-out infinite;
}

@keyframes turn {
  0%,
  25% {
    transform: rotate(0);
  }

  60%,
  100% {
    transform: rotate(-90deg);
  }
}

@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) {
  #rotate {
    display: flex;
  }
}

/* ---- Fullscreen button (shown by js/input.js when the browser supports it) ---- */
#fs {
  display: none;
  position: fixed;
  right: 8px;
  bottom: 8px;
  width: 38px;
  height: 38px;
  padding: 6px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  opacity: 0.7;
  cursor: pointer;
}

#fs svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
}

/* ---- No-JavaScript fallback ---- */
.noscript-msg {
  padding: 2em;
  color: #ffd23f;
  font-family: monospace;
  text-align: center;
}

/* ---- Footer links (privacy, get the app) ----
   Shown only on the menu screen (js/main.js sets body.menu), never while playing, so they cannot be tapped by accident.
   They are real links, so they also work with touch on phones where the page itself does not scroll. */
#site-links {
  display: none;
  position: fixed;
  left: 8px;
  bottom: 6px;
  gap: 8px;
  font: 12px system-ui, sans-serif;
}

body.menu #site-links {
  display: flex;
}

#site-links a {
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  opacity: 0.8;
}

#site-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

@media (pointer: coarse) {
  #site-links a {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* Links inside the "rotate your device" message */
#rotate .links {
  margin-top: 28px;
  display: flex;
  gap: 24px;
  font-size: 11px;
}

#rotate .links a {
  color: #8fd8ff;
}