/* UzGameZone: umumiy dizayn tokenlari. Ombor palitrasi (beton, karton, xavf-sariq) barcha o'yinlar uchun asos. */
:root {
  --bg: #dfe2df;
  --surface: #eef0ed;
  --ink: #1b1f21;
  --muted: #556060;
  --line: #c2c7c2;
  --hazard: #f0b400;
  --hazard-ink: #1b1f21;
  --floor: #cfd3cd;
  --floor-joint: #bec3bc;
  --wall: #454c50;
  --wall-edge: #2c3235;
  --crate: #c99555;
  --crate-edge: #8a5b27;
  --tape: #ead39f;
  --done: #2b8450;
  --worker: #2a64a8;
  --shadow: rgba(20, 24, 26, .22);
  --veil: rgba(238, 240, 237, .92);
  --coin: #e2a917;
  --coin-edge: #9a6b06;
  --energy: #e8a400;
  --danger: #c63f39;

  --f-display: 'Saira Stencil One', 'Arial Narrow', Impact, sans-serif;
  --f-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141719; --surface: #1d2124; --ink: #e4e7e2; --muted: #9aa29e; --line: #323a3d;
    --hazard: #f5c021; --hazard-ink: #141719;
    --floor: #262b2e; --floor-joint: #2f3538; --wall: #4d565a; --wall-edge: #3a4245;
    --crate: #b9844a; --crate-edge: #7a4f20; --tape: #dcc18b; --done: #45b073; --worker: #5b95d8;
    --shadow: rgba(0, 0, 0, .4); --veil: rgba(29, 33, 36, .92);
    --coin: #f0c040; --coin-edge: #8a5f05; --energy: #f5c021; --danger: #e3625b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141719; --surface: #1d2124; --ink: #e4e7e2; --muted: #9aa29e; --line: #323a3d;
  --hazard: #f5c021; --hazard-ink: #141719;
  --floor: #262b2e; --floor-joint: #2f3538; --wall: #4d565a; --wall-edge: #3a4245;
  --crate: #b9844a; --crate-edge: #7a4f20; --tape: #dcc18b; --done: #45b073; --worker: #5b95d8;
  --shadow: rgba(0, 0, 0, .4); --veil: rgba(29, 33, 36, .92);
  --coin: #f0c040; --coin-edge: #8a5f05; --energy: #f5c021; --danger: #e3625b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Telegram sets --tg-*-safe-area-inset-* (Bot API 8.0); a plain browser falls back to env() */
.app {
  max-width: 560px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-top: calc(14px + var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  padding-bottom: calc(22px + var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
  display: grid;
  gap: 14px;
}

.in-tg .web-only { display: none !important; }
html:not(.in-tg) .tg-only { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 4px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font: 600 14px/1 var(--f-body); cursor: pointer; text-decoration: none;
  user-select: none; -webkit-user-select: none;
}
.btn:hover { border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--hazard); border-color: var(--hazard); color: var(--hazard-ink); }
.btn.primary:hover { filter: brightness(1.05); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--worker); outline-offset: 2px; }

kbd {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px;
  color: var(--muted); background: var(--bg);
}

.eyebrow {
  margin: 0; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* pinned to the corner with no margin: left in the flow under a full-height screen it made the page scrollable by 16px */
.sr { position: absolute; top: 0; left: 0; margin: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}