/* PipRank WebGL shell. Walnut & Lacquer palette: every value below is copied from Theme in
   Assets/BackgammonApp.Style.cs. Do not add colours here that are not Theme tokens. */
:root {
  --bg: #15120F;          /* Theme.BgBase */
  --raised: #1C1814;      /* Theme.BgRaised */
  --surface: #211C18;     /* Theme.Surface */
  --hairline: #3A322B;    /* Theme.Hairline */
  --brass: #D1A65A;       /* Theme.Brass */
  --brass-light: #EBD08F; /* Theme.BrassLight */
  --brass-dark: #8A672F;  /* Theme.BrassDark */
  --text: #F2EADB;        /* Theme.TextPrimary */
  --text2: #BFB3A1;       /* Theme.TextSecondary */
  --text3: #9A8E7C;       /* Theme.TextTertiary */
  --walnut: #5B3920;      /* Theme.Walnut */
  --danger: #D9614C;      /* Theme.Danger */
  --walnut-rgb: 91, 57, 32;      /* Theme.Walnut as rgb triplet for alpha */
  --brass-rgb: 209, 166, 90;     /* Theme.Brass */
  --brass-dark-rgb: 138, 103, 47;/* Theme.BrassDark */
  --bg-rgb: 21, 18, 15;          /* Theme.BgBase */
  /* Brand mark (loader SVG), mirrors PagesBrandMark + the "branddie" glyph + CheckerAt(forest). */
  --walnut-grain-dark: #3A2213;              /* Theme.WalnutGrainDark */
  --walnut-bevel-top: rgba(192, 138, 85, .55);/* Theme.WalnutBevelTop (C08A55 @ .55) */
  --ivory-face-center: #FFFBF0;              /* Theme.IvoryFaceCenter */
  --ivory-bevel-outer: #B49C74;              /* Theme.IvoryBevelOuter */
  --forest-bevel-outer: #0F2419;             /* Theme.ForestBevelOuter */
  --forest-face-edge: #1A3C2C;               /* Theme.ForestFaceEdge */
  --forest-face-center: #2F6249;             /* Theme.ForestFaceCenter */
  --forest-groove: rgba(11, 29, 20, .50);    /* Theme.ForestGroove (0B1D14 @ .50) */
  --forest-specular: rgba(207, 235, 217, .35);/* Theme.ForestSpecular (CFEBD9 @ .35) */
  --contact-shadow: rgba(0, 0, 0, .45);      /* Theme.ContactShadow (000000 @ .45) */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* The page itself never scrolls (iOS/Android rubber-band, URL-bar shifts): the body is pinned to the viewport. */
body {
  position: fixed;
  inset: 0;
}

/* Full-bleed canvas on every device. Unity owns the safe area, so no env() padding here.
   100% of the fixed containing block is exactly innerWidth x innerHeight (100vw would include a scrollbar gutter);
   the 100vh -> 100dvh lines stay as the fallback chain for engines that drop the percentage. */
#unity-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100%;
  display: block;
  background: var(--bg);
  touch-action: none;
  outline: none;
  border: 0;
}

/* ---------- Loader ----------
   The critical loader rules (#pr-loader layout, brand mark, wordmark, tag, track, indeterminate sweep) are inlined
   in index.html <head> so the first paint is finished; only the tokens above and the extras below live here. */

/* Android-only "Get the app" pill. Lives inside #pr-loader so it is removed with it. */
.pr-app-pill {
  position: absolute;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--raised);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
  white-space: nowrap;
}
.pr-app-pill a {
  color: var(--brass-light);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 4px;
}
.pr-app-pill button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text3);
  font: 600 18px/1 var(--sans);
  cursor: pointer;
}

/* ---------- Error card ---------- */
#pr-error, .pr-noscript {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(var(--bg-rgb), .86);
}
#pr-error[hidden] { display: none; }
.pr-card {
  box-sizing: border-box;
  width: min(420px, 100%);
  padding: 28px 24px 22px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  text-align: center;
  -webkit-user-select: text;
  user-select: text;
}
.pr-card h1 { margin: 0 0 10px; font-size: 20px; font-weight: 800; color: var(--text); }
.pr-card p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text2); }
.pr-card .pr-raw {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text3);
  word-break: break-word;
  max-height: 6.5em;
  overflow: auto;
}
.pr-card .pr-raw:empty { display: none; }
.pr-retry {
  margin-top: 22px;
  min-width: 140px;
  min-height: 44px;
  padding: 0 22px;
  border: 1.5px solid var(--brass);
  border-radius: 10px;
  background: transparent;
  color: var(--brass-light);
  font: 700 16px/1 var(--sans);
  cursor: pointer;
}
.pr-retry:hover, .pr-retry:focus-visible { background: rgba(var(--brass-rgb), .12); outline: none; }
.pr-links { margin-top: 18px; font-size: 12px; color: var(--text3); }
.pr-links a { color: var(--text2); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Toast (non-fatal Unity warnings) ---------- */
#pr-toasts {
  position: fixed;
  left: 50%;
  top: calc(16px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.pr-toast {
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--brass);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text2);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  opacity: 1;
  transition: opacity 300ms ease;
}
.pr-toast.pr-out { opacity: 0; }

/* ---------- noscript (shares the #pr-error overlay layout) ---------- */
.pr-noscript { z-index: 40; background: var(--bg); }

/* Diagnostics button (only emitted when SHOW_DIAGNOSTICS is on) */
#diagnostics-icon {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 20;
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text2);
  font: 600 12px/1 var(--sans);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .pr-toast { transition: none; }
}