:root {
  --primary-color: #011f00;
  --secondary-color: #231f03;
  --tertiary-color: #c38d00;
}

body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.help-dialog-content {
  margin-top: 1.2rem;
  max-height: 80svh;
  overflow-y: auto;
  text-align: center;
  line-height: 1.8;
}

.help-dialog-content ul {
  list-style: none;
  padding-left: 0;
}

/* The vendor appends its own "Version: x" div right after the help content.
   We render our own version line under the logo instead, so hide this
   duplicate. (!important beats the vendor's inline styles.) */
.help-dialog-content + div {
  display: none !important;
}

/* Our version line, appended beneath the developer logo. */
.help-version {
  text-align: center;
  font-size: 1.5rem;
  margin-top: 20px;
}

#help-content div {
  border-bottom: none!important;
}

#dialog-container {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(20, 20, 40, 0.75))!important;
}

/* Make the help modal more compact (matching Lu's Lucky Bao): cap the width
   at 700px instead of the vendor's inline max-width: 90%, which stretches the
   modal across wide screens. width: 90% keeps it responsive on small screens.
   (!important is needed to beat the vendor's inline styles.) */
#help-content {
  width: 90% !important;
  max-width: 800px !important;
}

/* The vendor sizes the dialog with `padding: 2rem` + `min-width: 320px` and no
   `box-sizing: border-box`, so on a 375px phone the card renders 320 + 64 +
   2 = 386px wide and its edges get clipped by #dialog-container's
   overflow: hidden. Trimming the padding (and dropping the floor) on small
   screens keeps the whole card on screen and gives the content ~18px more
   room. */
@media (max-width: 480px) {
  #help-content {
    padding: 1rem !important;
    min-width: 0 !important;
  }
}

@media (min-width: 2000px) {
  .help-dialog-content {
    max-height: 60svh;
  }
}

#app {
  width: 100%;
  height: 100svh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inputPrompt {
  outline: none;
  height: 45px;
  text-align: center;
  color: white;
  background: transparent;
  border: none;
  font-size: 3.5rem;
  font-weight: bold;
  -webkit-text-stroke: 0.5px black;
}

body {
  font-family: 'Poppins', sans-serif;
  color: #333;
}

input {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

h1, h2, h3 {
  color: var(--tertiary-color);
}

/* Section titles in the help/game rules: tighter to their own content,
   more space above to separate one section from the previous one */
.help-dialog-content h2 {
  margin-top: 32px;
  margin-bottom: 6px;
}

ul {
  list-style-type: disc;
}

p {
  margin-bottom: 15px;
}

.emoji {
  font-size: 1.2em;
}

/* Preboot Loading Screen Styles */
#preboot-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #f1f5f9;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.35s ease-in-out, background 1.2s ease-in-out 0.6s;
  overflow: hidden;
  animation: backgroundTransition 1.8s ease-in-out forwards;
}

#preboot-loader.fade-out {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
  animation: fadeOutTransition 0.6s ease-in-out forwards;
  pointer-events: none;
}

.loader-container {
  text-align: center;
  opacity: 0;
  animation: fadeIn 0.4s ease-out 0.1s forwards;
}

.dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.dot {
  width: 12px;
  height: 12px;
  background: #64748b;
  border-radius: 50%;
  margin: 0 auto;
  animation: bounce 1.5s infinite ease-in-out, dotColorTransition 1.8s ease-in-out forwards;
}

.dot:nth-child(1) {
  animation-delay: 0s;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* Animations */
@keyframes fadeOutTransition {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes backgroundTransition {
  0% {
    background: #f1f5f9;
  }
  15% {
    background: #f1f5f9;
  }
  100% {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  }
}

@keyframes dotColorTransition {
  0% {
    background: #64748b;
  }
  15% {
    background: #64748b;
  }
  100% {
    background: var(--secondary-color);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-16px);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design for Preboot Loader */
@media (max-width: 480px) {
  .loader-container {
    padding: 1rem;
  }

  .logo {
    width: 200px;
    height: 200px;
  }

  .spinner {
    width: 40px;
    height: 40px;
  }

  .loading-text {
    font-size: 1rem;
  }
}

/* Help dialog */
.help-title { text-align: center; }

/* minmax(0, 1fr) rather than a bare 1fr: a `1fr` track has an automatic
   minimum of min-content, so the column can never get narrower than the
   widest thing inside it. With a fixed 120px symbol next to the prices that
   floor was wider than the dialog, which is what forced the sideways scroll.
   minmax(0, ...) removes the floor so the cells shrink to the space there is. */
.paytable-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  font-size: 0.95em;
}

@media (orientation: portrait) {
  .paytable-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
    /* The dialog's base font is 1.5rem, which is far too large for two
       columns on a phone. */
    font-size: 0.7em;
  }
}

.sym-img {
  vertical-align: middle;
  margin-right: 8px;
  height: 120px;
}

/* Small symbols shown inline within a sentence (e.g. card symbols in Free Games) */
.sym-inline {
  vertical-align: middle;
  margin: 0 3px;
  height: 48px;
}

.paytable-item {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Flex items also default to min-width: auto, the same shrink floor the grid
     tracks had. */
  min-width: 0;
}

/* Sized as a share of its cell instead of a fixed 120px height, so the symbol
   scales down with the column on narrow screens (and stays at the old size on
   wide ones). */
.paytable-item .sym-img {
  margin-right: 0;
  height: auto;
  width: 42%;
  max-width: 120px;
}

/* Scatter row: one full-width row under the paying symbols, so the longer
   "25 FREE GAMES, 50x pay" lines have room instead of wrapping inside a
   one-third-wide cell. Same grid-column trick as the wild note below.

   justify-content centres the symbol + values pair in that full-width row.
   .paytable-item is a flex row, and flex items pack against the start of the
   line by default, which left the pair hugging the left edge once the row
   became much wider than its content. */
.paytable-scatter {
  grid-column: 1 / -1;
  justify-content: center;
}

/* Wild note: one full-width row under the paying symbols. grid-column: 1 / -1
   makes this item stretch from the first column line to the last, so the
   sentence gets the whole dialog width instead of a narrow 1/3 cell. */
.paytable-wild {
  grid-column: 1 / -1;
}

.paytable-wild p { margin: 0; }

.paytable-values {
  margin: 0;
  padding-left: 0;
  /* .help-dialog-content centres all of its text, which left every row starting
     at a different x. Flush left puts the counts in one column. */
  text-align: left;
  min-width: 0;
}

/* Two columns per row: the "5 -" text node lands in the first, the .pay-val
   span in the second, so counts and prices line up across all three rows. The
   minmax(0, 1fr) + overflow-wrap means an unusually long amount wraps inside
   its own column instead of pushing the paytable wider. */
.paytable-values li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3em;
}

.paytable-values .pay-val { overflow-wrap: anywhere; }

.image-paragraph{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

/* Paylines */
.paylines-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px 26px;
  margin-top: 12px;
  padding-right: 16px;
}

.payline-item {
  display: flex;
  align-items: center;
  gap: 12px;
  content-visibility: auto;
  contain-intrinsic-size: auto 110px;
}

.payline-label {
  min-width: 1.8em;
  text-align: right;
  font-size: 1.05em;
  opacity: 0.85;
}

.payline-cells {
  display: grid;
  gap: 4px;
  flex: 1;
}

.payline-cell {
  aspect-ratio: 1;
  border: 1px solid rgba(130, 220, 150, 0.25);
  border-radius: 3px;
  background: rgba(20, 60, 35, 0.4);
}

.payline-cell.lit {
  border-color: transparent;
  background: radial-gradient(circle, #7dffa0 0%, #2ecc71 55%, rgba(46, 204, 113, 0) 75%);
  box-shadow: 0 0 6px 1px rgba(125, 255, 160, 0.7);
}

/* Portrait: at five columns each payline gets only ~41px of width, which the
   1.8em number label alone overflows -- the cell grid is squeezed to ~2px and
   the diagram disappears (the numbers get clipped too). Two columns plus a
   smaller font (the dialog's base is 1.5rem) leaves each cell ~19px. */
@media (orientation: portrait) {
  .paylines-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    padding-right: 0;
    font-size: 0.7em;
  }
}

/* Game info (TRTP / Min Bet / Max Bet) */
.game-info-label {
  font-weight: 600;
  margin-right: 6px;
}

/* Debug tilt menu */
.debug-modal {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(40, 20, 80, 0.92);
  padding: 10px;
  border: 1px solid #555;
  border-radius: 6px;
  z-index: 1000;
  /* Shrink to fit the header when collapsed instead of always reserving 220px. */
  width: fit-content;
  max-height: calc(100% - 20px);
  overflow-y: auto;
  font-family: 'Poppins', sans-serif;
}

.debug-section > summary {
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 2px 0;
  list-style-position: inside;
}

/* The panel only takes its real width once a section is open. */
.debug-section-body {
  width: 220px;
  padding: 4px 0 6px 8px;
}

/* Nested sections already sit inside a sized body - don't size them again. */
.debug-section .debug-section .debug-section-body {
  width: auto;
}

.debug-modal-title {
  color: #e0d0ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 0 8px 2px;
  text-transform: uppercase;
}

.debug-modal-select {
  width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  background: #1a0a3a;
  color: #e0d0ff;
  border: 1px solid #7755bb;
}

.debug-modal-select:disabled {
  opacity: 0.5;
}

/* //// CANVAS TEXT FONT //// */

/*
 * `GameText` is the face behind every translatable on-canvas label (the Phaser
 * Text objects created via src/helpers/canvasText.ts). It is NOT used by the
 * BitmapText labels, which draw from the Latin-only atlases in
 * public/assets/bitmap/ and cannot render most of the locales we ship.
 *
 * Self-hosted on purpose: an operator iframe's CSP may block a third-party font
 * CDN, and a missing font here silently changes every measured layout.
 *
 * PLACEHOLDER: these two files are DejaVu Sans (free licence), subsetted to
 * Latin + Latin Extended-A/B + Greek + Cyrillic, which covers 23 of the 26
 * locales at 54KB per weight. Thai, Japanese and Chinese fall through to the
 * device font. Swap in the brand face - and add Noto Sans Thai / SC / JP for
 * those three - without touching any code: the family name is all that is
 * referenced.
 *
 * font-display: block, not swap. A swap would paint the fallback first and
 * Phaser would measure it; blocking keeps the first measurement correct, and
 * loadGameTextFont() caps the wait at 3s regardless.
 */
@font-face {
  font-family: 'GameText';
  src: url('/assets/fonts/gametext-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'GameText';
  src: url('/assets/fonts/gametext-700.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}