@import url('https://fonts.googleapis.com/css2?family=Sacramento&family=Nunito:wght@400;600;700;800&display=swap');

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #05161a;
  overflow: hidden;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

img { -webkit-user-drag: none; user-drag: none; }

/* ----------------------------------------------------------------
   Stage: the game is authored at a fixed 1040x480 design resolution
   (landscape, 19.5:9). #stage-outer centers #stage and JS applies a
   uniform CSS scale so it fits any viewport without reflow per-screen.
   ---------------------------------------------------------------- */
#stage-outer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 120% at 50% 20%, #0f2e33, #05161a);
}

#stage {
  position: relative;
  flex-shrink: 0;
  width: 1040px;
  height: 480px;
  transform-origin: center center;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  background: var(--c-dark-primary);
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  width: 1040px;
  height: 480px;
}

.screen.is-active {
  display: block;
}

/* Rotate-device prompt for narrow/portrait viewports */
#rotate-prompt {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--c-dark-primary);
  color: var(--c-light);
  text-align: center;
  padding: var(--sp-5);
}

#rotate-prompt svg { width: 64px; height: 64px; stroke: var(--c-gold-light); }
#rotate-prompt p { font: 600 14px var(--font-body); color: var(--c-cream); max-width: 260px; margin: 0; }

@media (orientation: portrait) and (max-width: 900px) {
  #stage-outer { display: none; }
  #rotate-prompt { display: flex; }
}

/* Scrollbar theming for any overflowing panel (achievements grid, dropdowns) */
.themed-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--c-gold-base) var(--c-dark-primary); }
.themed-scroll::-webkit-scrollbar { width: 10px; }
.themed-scroll::-webkit-scrollbar-track { background: #0a2f2e; border-radius: var(--r-pill); box-shadow: inset 0 0 3px #00000059; }
.themed-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--c-gold-light), var(--c-gold-base)); border-radius: var(--r-pill); }

#fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}
.fx-flying-card {
  position: fixed;
  border-radius: 8px;
  border: 2px solid #f6f0dd;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
  object-fit: cover;
  transition: left .38s cubic-bezier(.22, .9, .32, 1), top .38s cubic-bezier(.22, .9, .32, 1), transform .38s cubic-bezier(.22, .9, .32, 1);
  will-change: left, top, transform;
}

.grain-overlay {
  position: absolute;
  inset: 0;
  background: var(--img-grain);
  opacity: .45;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Settings > Reduce motion: suppress card lift/rotation and control
   transitions; color changes still happen instantly. */
body.reduce-motion * {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
}
body.reduce-motion .gp-hand-card:nth-child(odd),
body.reduce-motion .gp-hand-card:nth-child(even) {
  transform: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}