/* SlotGameMobile - portrait-first shell for the Web player.
   Colours are Theme (Runtime/Art/Theme.cs): Ink #14101A, gold #E8B64C,
   dim gold #A87A28, warning #E86A5A, primary text #F6EBD8. */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #14101A;
  color: #F6EBD8;
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  /* The page itself never scrolls or bounces - all gestures belong to the game. */
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;      /* no iOS long-press "Copy / Share" sheet */
  -webkit-tap-highlight-color: transparent;
}

#unity-canvas {
  display: block;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  /* dvh/dvw track the collapsing mobile URL bar; the vh/vw above are the fallback. */
  width: 100dvw;
  height: 100dvh;
  background: #14101A;
  touch-action: none;
  outline: none;
}

/* ---- loading ---- */

#loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 32px;
  background: #14101A;
  text-align: center;
}

#loading-title {
  font-size: 20px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;       /* letter-spacing pads the right; put it back on the left */
  color: #E8B64C;
}

#progress-track {
  width: min(72vw, 320px);
  height: 2px;
  background: rgba(168, 122, 40, 0.35);
  overflow: hidden;
}

#progress-fill {
  width: 0%;
  height: 100%;
  background: #E8B64C;
  transition: width 120ms linear;
}

#loading-note {
  font-size: 12px;
  color: #B9A48A;
  white-space: pre-line;     /* showFailure() puts the reason on its own line */
  max-width: 90vw;
  word-break: break-word;
}

#loading.failed #progress-fill { background: #E86A5A; }
#loading.failed #loading-note  { color: #E86A5A; }

/* ---- portrait lock hint ---- */

#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #14101A;
  text-align: center;
  padding: 0 24px;
}

#rotate-glyph {
  font-size: 40px;
  line-height: 1;
  color: #E8B64C;
}

.rotate-line { font-size: 16px; color: #F6EBD8; }
.rotate-line-alt { font-size: 13px; color: #B9A48A; }

/* Landscape phones only: a wide desktop window is landscape too, and the game
   is perfectly playable there - the max-height keeps this to short viewports. */
@media (orientation: landscape) and (max-height: 560px) {
  #rotate { display: flex; }
}