/*
  Global styles for the D92 Inflection Point game.
  Optimized for Samsung Galaxy Tab S10+ (2800 x 1752 landscape).
  The --scale-factor variable is computed automatically using viewport
  units; UI elements multiply their base sizes by this factor.
*/

:root {
  /* Design dimensions for Samsung Galaxy Tab S10+ in landscape */
  --design-width: 2800;
  --design-height: 1752;
  /* Scale factor is set dynamically via JavaScript. Default to 1 so
     that content remains visible before the script runs. */
  --scale-factor: 1;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  width: 100%;
  height: 100%;
  font-family: 'Arial', sans-serif;
  overflow: hidden;
  color: #ffffff;
}

/* General screen container. All screens occupy the full viewport
   but only one is displayed at a time via the .active class. */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.screen.active {
  display: block;
}

/* Full bleed background image for each screen. Placed behind
   everything else using a negative z-index. */
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* The three-dot menu on the welcome screen. */
.menu-button {
  position: absolute;
  top: calc(24px * var(--scale-factor));
  left: calc(24px * var(--scale-factor));
  font-size: calc(56px * var(--scale-factor));
  color: #ffffff;
  background: none;
  border: none;
  cursor: pointer;
}

/* Let's Play button on the welcome screen. Its width is set
   proportionally to the design; height follows the intrinsic
   aspect ratio. */
.letsplay-button {
  position: absolute;
  bottom: calc(240px * var(--scale-factor));
  left: 50%;
  transform: translateX(-50%);
  width: calc(900px * var(--scale-factor));
  max-width: 70%;
  height: auto;
  cursor: pointer;
}

/* Hearts display container. A pill-shaped frame houses the three
   hearts. */
.hearts-display {
  position: absolute;
  top: 4%;
  right: 4%;
}

.heart-container {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--scale-factor));
  padding: calc(14px * var(--scale-factor)) calc(28px * var(--scale-factor));
  /* Use the heart container asset as a background. This white pill
     serves as a backdrop for the hearts. */
  background-image: url('assets/heart_container.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: calc(56px * var(--scale-factor));
}

.heart {
  width: calc(48px * var(--scale-factor));
  height: calc(48px * var(--scale-factor));
  object-fit: contain;
}

/* Wheel wrapper ensures the wheel and pointer stay centered and
   properly sized. */
.wheel-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(1400px * var(--scale-factor));
  height: calc(1400px * var(--scale-factor));
  max-width: 90vw;
  max-height: 92vh;
}

#wheel {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 5s cubic-bezier(0.33, 1, 0.68, 1);
}

#wheel-pointer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(180px * var(--scale-factor));
  height: auto;
  pointer-events: none;
}

/* Question screen header showing question count. */
.question-header {
  position: absolute;
  top: 4%;
  left: 4%;
  font-size: calc(64px * var(--scale-factor));
  font-weight: 600;
}

/* Container for the question text and answer buttons. Centered
   vertically and horizontally. */
.question-body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 82%;
  max-width: 2200px;
  text-align: center;
}

#question-text {
  font-size: calc(72px * var(--scale-factor));
  margin-bottom: calc(48px * var(--scale-factor));
  line-height: 1.2;
  /* Prevent text from going too high */
  max-height: 35vh;
  overflow: hidden;
}

.answers-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28px * var(--scale-factor));
}

.answer-button {
  background: #ffffff;
  color: #0057a8;
  border: none;
  border-radius: calc(56px * var(--scale-factor));
  padding: calc(24px * var(--scale-factor)) calc(36px * var(--scale-factor));
  width: 82%;
  max-width: calc(1800px * var(--scale-factor));
  font-size: calc(52px * var(--scale-factor));
  cursor: pointer;
  transition: background 0.2s ease;
}

.answer-button:hover {
  background: #f0f0f0;
}

/* Feedback screen icons (correct/incorrect). */
.feedback-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.feedback-icon img {
  width: calc(380px * var(--scale-factor));
  height: calc(380px * var(--scale-factor));
  object-fit: contain;
}

/* Generic pill button used on multiple screens for Next/Play Again/Try Again. */
.pill-button {
  position: absolute;
  bottom: calc(100px * var(--scale-factor));
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #0057a8;
  border: none;
  border-radius: calc(56px * var(--scale-factor));
  padding: calc(28px * var(--scale-factor)) calc(96px * var(--scale-factor));
  font-size: calc(56px * var(--scale-factor));
  cursor: pointer;
  transition: background 0.2s ease;
}

.pill-button:hover {
  background: #f0f0f0;
}

/* Tile game layout. Pre-tap screen consists of the hidden grid
   covered by a single image. The wrapper defines the area within
   which the grid is drawn. */
.tiles-wrapper {
  /* Centered, large, consistent size for both hidden + revealed tiles screens.
     Goal: take most of the screen while keeping safe margins.
     The hidden_tiles.png asset is a 5x4 grid (aspect ratio 5/4 = 1.25). */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Optimized for Tab S10+ landscape */
  width: min(90vw, calc(86vh * 1.25));
  height: min(86vh, calc(90vw / 1.25));

  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: calc(32px * var(--scale-factor));
}

.hidden-tiles,
.spread-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

/* Grid used during reveal. The grid is dynamically created. */
.tile-grid {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: calc(2%);
}

/* Win/Lose screen content container. Centers the provided asset. */
.win-lose-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 82%;
  height: 72%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.end-screen-asset {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Lose screen: admin-only reset button */
.start-over-button {
  position: absolute;
  right: calc(72px * var(--scale-factor));
  bottom: calc(72px * var(--scale-factor));
  left: auto;
  transform: none;
}

/* Reveal uses the same wrapper sizing as the hidden tiles screen. */
.tiles-wrapper#tiles-reveal .reveal-bg {
  display: none; /* Hide the img element, we use background-image instead */
}

/* Tile overlay grid - aligned to hidden_tiles.png (5x4 grid)
   Image: 2000x1581px, tiles ~376x375px, gaps ~27-30px
   Using explicit percentage columns/rows for pixel-perfect alignment */
.tile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  /* Explicit column widths: tile, gap, tile, gap, tile, gap, tile, gap, tile */
  grid-template-columns: 18.8% 1.35% 18.8% 1.85% 18.8% 1.5% 18.75% 1.5% 18.65%;
  /* Explicit row heights: tile, gap, tile, gap, tile, gap, tile */
  grid-template-rows: 23.7% 1.71% 23.7% 1.71% 23.7% 1.71% 23.77%;
  padding: 0;
  pointer-events: none;
}

/* Ensure wrapper shows the background */
.tiles-wrapper#tiles-reveal {
  background-image: url('assets/hidden_tiles.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Hide the reveal-bg img element since we use CSS background */
.tiles-wrapper#tiles-reveal .reveal-bg {
  display: none;
}

/* Individual tile cell - icons centered within tile area */
.tile-cell {
  background: transparent !important;
  border-radius: calc(32px * var(--scale-factor));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Padding keeps icons within the visible tile area (accounting for rounded corners) */
  padding: 12%;
}

/* Icons sized properly inside tiles */
.tile-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* If a question has 4 options, tighten spacing and button sizing slightly */
#screen-question.four-answers .answers-container {
  gap: calc(22px * var(--scale-factor));
}

#screen-question.four-answers .answer-button {
  font-size: calc(52px * var(--scale-factor));
  padding: calc(24px * var(--scale-factor)) calc(36px * var(--scale-factor));
}

/* If a question has 2 options, increase button size for better touch targets */
#screen-question.two-answers .answers-container {
  gap: calc(36px * var(--scale-factor));
}

#screen-question.two-answers .answer-button {
  font-size: calc(68px * var(--scale-factor));
  padding: calc(36px * var(--scale-factor)) calc(48px * var(--scale-factor));
}