/* CHEAPUNO homepage game — full-screen canvas viewport.
   No landing-page / hero-card layout: the whole page is the game. */

html,
body {
  height: 100%;
  min-height: 100%;
}

body[data-page="home"] {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* B7: dark base kills the yellow flash-of-unstyled-content before boot. */
  background: #17141f;
  color: #3a2717;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans TC", sans-serif;
}

body[data-page="home"] #app {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  max-width: none;
  overflow: hidden;
  background: #17141f;
}

body[data-page="home"] .cheapuno-game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  background: #17141f;
  /* mobile pointer rules: canvas owns every touch */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* OtoLogic audio attribution (CC BY 4.0) — visible, never blocks input. */
body[data-page="home"] .cheapuno-credit {
  position: fixed;
  right: 8px;
  bottom: 4px;
  z-index: 30;
  font-size: 10px;
  color: rgba(253, 243, 224, 0.55);
  pointer-events: none;
  user-select: none;
}

/* footer page links inside the credit strip stay clickable */
body[data-page="home"] .cheapuno-credit a {
  pointer-events: auto;
  color: rgba(253, 243, 224, 0.8);
  text-decoration: underline;
}

body[data-page="home"] noscript p {
  display: block;
  max-width: 640px;
  margin: 48px auto;
  padding: 24px;
  border-radius: 20px;
  background: #fdf3e0;
  color: #3a2717;
}


/* Portrait phones: ask for landscape (game is a 16:9 world). */
.cheapuno-rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  body[data-page="home"] .cheapuno-rotate {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 60;
    align-items: center;
    justify-content: center;
    background: rgba(16, 12, 24, 0.96);
  }
}
.cheapuno-rotate-card {
  color: #fdf3e0;
  font: 700 22px/1.7 "Noto Sans TC", system-ui, sans-serif;
  text-align: center;
}
.cheapuno-rotate-card span { font-size: 13px; opacity: 0.65; }

/* B7/C8: dark pixel loading screen shown until the game boots. */
.cheapuno-loader {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #17141f;
  transition: opacity 0.4s ease;
}
.cheapuno-loader.is-hidden { opacity: 0; pointer-events: none; }
.cheapuno-loader-inner { text-align: center; }
.cheapuno-loader-logo {
  font: 800 34px/1 "Noto Sans TC", system-ui, sans-serif;
  letter-spacing: 6px;
  color: #f4d58a;
  text-shadow: 2px 2px 0 #7a4b1e;
  image-rendering: pixelated;
}
.cheapuno-loader-sub {
  margin-top: 10px;
  font: 600 13px/1 "Noto Sans TC", system-ui, sans-serif;
  letter-spacing: 3px;
  color: rgba(244, 213, 138, 0.6);
}
.cheapuno-loader-dots {
  margin-top: 22px;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.cheapuno-loader-dots i {
  width: 8px;
  height: 8px;
  background: #f4d58a;
  display: inline-block;
  animation: cheapuno-blink 1s infinite steps(1);
}
.cheapuno-loader-dots i:nth-child(2) { animation-delay: 0.2s; }
.cheapuno-loader-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes cheapuno-blink {
  0%, 40% { opacity: 1; }
  41%, 100% { opacity: 0.2; }
}