/* Last Extraction — Web template (arch 5.10). Palette tokens mirror UIPalette.asset (UI 6.2). */

:root {
  --ink: #141311;
  --panel: #2A2622;
  --panel-light: #3D3731;
  --bone: #F2EFE6;
  --ash: #A39C90;
  --rust: #C76A1E;
  --hazard: #E8B923;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  background: var(--ink);
  color: var(--bone);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  /* iOS WKWebView raises the callout/magnifier through a mechanism that touch-action and user-select do not
     cover — and a floating one-thumb joystick asks the player to rest a thumb on the canvas. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Portrait-only, full-bleed, no browser gestures.
   --le-h is published by tg.js: Telegram's viewportStableHeight inside Telegram, 100dvh everywhere else. Reading
   Telegram's own --tg-viewport-stable-height here was wrong — telegram-web-app.js defines it as 100vh in EVERY
   browser, so the 100dvh fallback was dead code and the bottom band sat under a mobile browser's URL bar. */
#unity-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--le-h, 100dvh);
  background: var(--ink);
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  touch-action: none;
  outline: none;
  border: 0;
  -webkit-touch-callout: none;
}

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

#le-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--ink);
  z-index: 10;
  transition: opacity 0.35s ease-out;
}

#le-loader.le-hidden {
  opacity: 0;
  pointer-events: none;
}

#le-title {
  font-size: 15px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  font-weight: 700;
  color: var(--bone);
  text-transform: uppercase;
}

#le-bar {
  position: relative;
  width: min(62vw, 320px);
  height: 12px;
  background: var(--panel);
  border: 2px solid var(--panel-light);
}

#le-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--rust) 0%, var(--hazard) 100%);
  transition: width 0.15s linear;
}

/* Hazard ticks over the track, Synty-ish. */
#le-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(20, 19, 17, 0.55) 30px 32px);
}

#le-hint {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ash);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- start-up failure panel
   ONE panel for every start-up failure, with the headline written per failure by index.html. It is scrollable and
   selectable on purpose: #le-facts is evidence the owner screenshots or copies out of a Telegram webview, where
   there is no console to read. */

#le-unsupported {
  /* fixed, not absolute: the panel must cover the REAL viewport. #unity-container is only as tall as the viewport
     Telegram reports, and a client that reports a short or stale stable height would squeeze the one screen whose
     whole job is to be readable and screenshottable. */
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 18px;
  text-align: center;
  background: var(--ink);
  color: var(--bone);
  font-size: 16px;
  line-height: 1.5;
  z-index: 30;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-user-select: text;
  user-select: text;
}

#le-unsupported.le-show { display: flex; }
#le-unsupported small { color: var(--ash); font-size: 12px; max-width: 34ch; }
#le-err-title { font-weight: 700; letter-spacing: 0.04em; }
#le-err-detail { color: var(--rust); font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-word; }

#le-err-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

#le-err-actions button {
  background: var(--panel);
  color: var(--bone);
  border: 1px solid var(--panel-light);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px;
  min-height: 40px;
  cursor: pointer;
}

#le-err-actions button:first-child { border-color: var(--rust); color: var(--hazard); }

#le-facts {
  margin: 4px 0 0;
  padding: 10px;
  max-width: 100%;
  max-height: 34vh;
  overflow: auto;
  background: #0d0c0b;
  border: 1px solid var(--panel);
  color: var(--ash);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
}

#le-err-diag { color: var(--ash); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------------------------------------------------------------- rotate overlay (arch 5.10) */

#le-rotate {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--hazard);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  z-index: 40;
}

/* The gate is a PHONE, not an aspect ratio. `@media (orientation: landscape)` alone put "ROTATE YOUR PHONE" over
   the whole page on Telegram Desktop (a resizable window the user can widen or maximise), on an iPad and on an
   Android tablet — with the run held paused behind it by WebBootstrap and no dismiss, no escape, no fallback.
   html.le-touch is set by tg.js from TG.platform ('ios'/'android' only) or, outside Telegram, from a coarse
   pointer; max-height keeps it off tablets and foldables, which have room to letterbox instead. */
@media (orientation: landscape) and (max-height: 520px) {
  html.le-touch #le-rotate { display: flex; }
}

/* ---------------------------------------------------------------- diagnostics (development builds only) */

#unity-footer {
  position: fixed;
  right: 6px;
  bottom: 6px;
  z-index: 50;
}

#diagnostics-icon {
  background: var(--panel);
  color: var(--ash);
  border: 1px solid var(--panel-light);
  font-size: 11px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
}