/* ==========================================================
   rx-ui.css - RaXa Games shared look (home and every game)
   Liquid glass values, floating progress status (lower right),
   Install app button, brand footer and the game page frame.
   ========================================================== */
:root {
  --rx-lime: #ffffff;
  --glass-bg: linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 65%, rgba(255,255,255,.04)), linear-gradient(rgba(8,10,6,.3), rgba(8,10,6,.3));
  --glass-filter: blur(5px) saturate(130%);
  --glass-border: rgba(255,255,255,.2);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 28px rgba(0,0,0,.22);
  --glow-rest: 0 0 16px rgba(255,255,255,.22);
  --glow-hover: 0 0 22px rgba(255,255,255,.35);
  --rx-font: "Google Sans Flex", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

/* ---------- floating progress status, lower right (always on top) ---------- */
.rx-status {
  position: fixed; right: calc(env(safe-area-inset-right, 0px) + 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 2147483000; display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  min-width: 170px; max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 12px;
  color: #fff; font: 400 13px/1.2 var(--rx-font);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.rx-status.is-on { opacity: 1; transform: none; }
.rx-bar { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.rx-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.7); transition: width 0s linear .3s; }
.rx-status.is-work .rx-bar i { width: 90%; transition: width 14s cubic-bezier(.08,.6,.25,1); }
.rx-status.is-done .rx-bar i { width: 100%; transition: width .25s ease; }
.rx-status.is-note .rx-bar { display: none; }

/* ---------- Install app button (top right). Shown only when this device can install RaXa Games ---------- */
.rx-install {
  position: fixed; z-index: 40;
  top: calc(env(safe-area-inset-top, 0px) + 12px); right: calc(env(safe-area-inset-right, 0px) + 12px);
  display: none; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 14px;
  color: #fff; font: 500 14px/1 var(--rx-font); letter-spacing: .02em;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .2s ease, box-shadow .2s ease;
}
.rx-install.is-on { display: inline-flex; }
.rx-install:hover, .rx-install:focus-visible { border-color: rgba(255,255,255,.8); box-shadow: var(--glow-hover); outline: none; }
.rx-install svg { width: 16px; height: 16px; flex: none; }

/* ---------- brand footer (home) ---------- */
.rx-brand-footer {
  position: fixed; z-index: 12;
  left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 0 .35em; padding: 7px 12px; text-align: center;
  font: 500 clamp(10px, 1.25vw, 15px)/1.35 var(--rx-font); letter-spacing: -.015em;
  text-shadow: 0 2px 5px rgba(0,0,0,.98), 0 0 12px rgba(0,0,0,.95);
  pointer-events: none;
}
.rx-brand-footer__lead { color: #fff; text-shadow: 0 0 8px rgba(255,255,255,.45), 0 2px 5px rgba(0,0,0,.98); }
.rx-brand-footer__rest { color: rgba(255,255,255,.85); }
.rx-brand-footer__ver { flex-basis: 100%; font-size: .78em; font-weight: 400; color: rgba(255,255,255,.55); }
.rx-brand-footer__ver:empty { display: none; }

/* ---------- game page frame (games/*.html) ---------- */
.rx-game {
  margin: 0; min-height: 100vh; min-height: 100dvh; overflow: hidden;
  color: #fff; font-family: var(--rx-font);
  background: #0b0d08 url("bg.jpg") center / cover no-repeat fixed;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.rx-game *, .rx-game *::before, .rx-game *::after { box-sizing: border-box; }
.rx-home {
  position: fixed; z-index: 40;
  top: calc(env(safe-area-inset-top, 0px) + 14px); left: calc(env(safe-area-inset-left, 0px) + 14px);
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 20px; color: #fff; text-decoration: none;   /* big target for little fingers */
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.rx-home:hover, .rx-home:focus-visible { border-color: rgba(255,255,255,.8); box-shadow: var(--glow-hover); outline: none; }
.rx-home:active { transform: scale(.94); }
.rx-home svg { width: 32px; height: 32px; }
.rx-stage {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 96px) 16px calc(env(safe-area-inset-bottom, 0px) + 32px);
}
.rx-card {
  width: min(520px, 100%); padding: clamp(24px, 4vw, 40px); border-radius: 28px; text-align: center;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}
.rx-card .rx-ico {
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
  width: clamp(88px, 14vw, 120px); height: clamp(88px, 14vw, 120px); border-radius: 30px;
  border: 1px solid rgba(255,255,255,.45); box-shadow: var(--glow-rest);
}
.rx-card .rx-ico svg { width: 72%; height: 72%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.rx-card h1 { margin: 0 0 8px; font-size: clamp(26px, 4.4vw, 40px); font-weight: 700; letter-spacing: -.02em; text-shadow: 0 2px 5px rgba(0,0,0,.8); }
.rx-card p { margin: 0; font-size: clamp(16px, 2.4vw, 20px); color: rgba(255,255,255,.75); }

@media (max-width: 420px), (max-height: 420px) {
  .rx-install { height: 34px; padding: 0 12px; font-size: 13px; }
  .rx-brand-footer { font-size: clamp(10px, 2.7vw, 12px); padding: 5px 8px; }
  .rx-home { width: 54px; height: 54px; border-radius: 17px; }
}
@media (prefers-reduced-motion: reduce) { .rx-status, .rx-home { transition: none; } }