/* --- Global gesture hardening --- */
/* Hide JS-rendered page shells until their page script finishes first render.
   This avoids one-frame flashes of empty cards, placeholder totals, and raw i18n text. */
body[data-page]:not(.kb-ready) > .container,
body[data-page]:not(.kb-ready) > .ti-container,
body[data-page]:not(.kb-ready) > .kb-app,
body[data-page]:not(.kb-ready) > .kb-info-page,
body[data-page]:not(.kb-ready) > .kb-backup-page,
body[data-page]:not(.kb-ready) > .kb-voices-page,
body[data-page="backup-restore"]:not(.kb-ready) .kb-br-bottom,
body[data-page="king-bolola-info"]:not(.kb-ready) .kb-info-bottom-back{
  visibility:hidden;
  opacity:0;
}

body[data-page].kb-ready > .container,
body[data-page].kb-ready > .ti-container,
body[data-page].kb-ready > .kb-app,
body[data-page].kb-ready > .kb-info-page,
body[data-page].kb-ready > .kb-backup-page,
body[data-page].kb-ready > .kb-voices-page,
body[data-page="backup-restore"].kb-ready .kb-br-bottom,
body[data-page="king-bolola-info"].kb-ready .kb-info-bottom-back{
  visibility:visible;
  opacity:1;
}

html, body{
  overscroll-behavior: none;        /* no pull-to-refresh / history chaining */
  touch-action: manipulation;       /* tap/scroll ok, no pan-x from edges */
}

/* Invisible edge blockers (սվայփ-बեք մխթե՛լ) */
.kb-edge-guard{
  position: fixed;
  top: 0; bottom: 0;
  width: 22px;                      /* narrower edge guard: less chance to block edge UI */
  z-index: 90000;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
}
.kb-edge-guard.left  { left: 0;  }
.kb-edge-guard.right { right: 0; }

/* -------- քո առկա toast-ը թող նույնպես մնա -------- */
#kb-exit-toast{
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  transform: translateX(-50%) translateY(14px);
  background: rgba(0,0,0,.78);
  color: #fdf1c9;
  font: 600 14px/1.2 'Segoe UI', system-ui, sans-serif;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 99999;
}
#kb-exit-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* -------- App dialogs: no browser-origin title bar -------- */
#kb-dialog-root{
  position:fixed;
  inset:0;
  z-index:100020;
  pointer-events:none;
}
.kb-dialog-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(2,10,7,.54);
  opacity:0;
  pointer-events:auto;
  transition:opacity .16s ease;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.kb-dialog-overlay.is-open{
  opacity:1;
}
.kb-dialog{
  width:min(360px, calc(100vw - 36px));
  border:1px solid rgba(246,195,106,.22);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    rgba(5,30,18,.96);
  color:#fff4d6;
  box-shadow:0 24px 70px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.10);
  padding:18px;
  transform:translateY(8px) scale(.97);
  transition:transform .18s cubic-bezier(.18,.86,.22,1);
  outline:0;
}
.kb-dialog-overlay.is-open .kb-dialog{
  transform:translateY(0) scale(1);
}
.kb-dialog-title{
  margin:0 0 8px;
  font:800 17px/1.25 'Segoe UI', system-ui, sans-serif;
  color:#ffe2a4;
}
.kb-dialog-message{
  white-space:pre-line;
  overflow-wrap:anywhere;
  font:600 15px/1.45 'Segoe UI', system-ui, sans-serif;
  color:rgba(255,244,214,.92);
}
.kb-dialog-input,
.kb-dialog-select{
  width:100%;
  min-height:44px;
  margin-top:14px;
  padding:10px 12px;
  border:1px solid rgba(246,195,106,.28);
  border-radius:12px;
  background:rgba(0,0,0,.24);
  color:#fff;
  font:700 15px/1.2 'Segoe UI', system-ui, sans-serif;
  outline:0;
  box-sizing:border-box;
}
.kb-dialog-select{
  appearance:auto;
}
.kb-dialog-input:focus,
.kb-dialog-select:focus{
  border-color:rgba(255,214,128,.72);
  box-shadow:0 0 0 3px rgba(246,195,106,.14);
}
.kb-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}
.kb-dialog-btn{
  min-width:86px;
  min-height:42px;
  border:1px solid rgba(246,195,106,.22);
  border-radius:12px;
  padding:0 16px;
  font:800 14px/1 'Segoe UI', system-ui, sans-serif;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.kb-dialog-btn.is-primary{
  background:linear-gradient(145deg, rgba(255,224,154,.96), rgba(229,167,74,.86));
  color:#432006;
  box-shadow:0 10px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.28);
}
.kb-dialog-btn.is-ghost{
  background:rgba(255,255,255,.06);
  color:rgba(255,244,214,.88);
}
.kb-dialog-btn:active{
  transform:translateY(1px) scale(.98);
}

/* ===== Right-swipe quick menu: compact edge dock ===== */
#kb-quickmenu-root{
  position:fixed;
  inset:0;
  z-index:95000;
  pointer-events:none;
}
.kb-qm-scrim{
  position:absolute;
  inset:0;
  background:rgba(2,10,7,.42);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.kb-qm-panel{
  position:absolute;
  right:calc(env(safe-area-inset-right, 0px) + 10px);
  top:50%;
  width:58px;
  min-height:auto;
  padding:8px;
  border:1px solid rgba(246,195,106,.20);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
    rgba(4,27,16,.78);
  box-shadow:0 18px 40px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  opacity:0;
  transform:translate3d(18px, -50%, 0) scale(.94);
  transition:opacity .18s ease, transform .24s cubic-bezier(.18,.86,.22,1);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  pointer-events:none;
}
.kb-quickmenu.is-open{
  pointer-events:auto;
}
.kb-quickmenu.is-open .kb-qm-scrim{
  opacity:1;
  pointer-events:auto;
}
.kb-quickmenu.is-open .kb-qm-panel{
  pointer-events:auto;
  opacity:1;
  transform:translate3d(0, -50%, 0) scale(1);
}
.kb-qm-edge-hint{
  position:fixed;
  right:0;
  top:50%;
  width:34px;
  height:86px;
  z-index:94000;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  box-shadow:none;
  padding:0;
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  opacity:.74;
  transform:translateY(-50%);
  transition:opacity .20s ease, transform .20s ease, filter .20s ease;
}
.kb-qm-edge-hint span{
  position:absolute;
  right:2px;
  top:50%;
  width:28px;
  height:70px;
  transform:translateY(-50%);
  border-radius:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.kb-qm-edge-hint i{
  position:absolute;
  right:2px;
  top:50%;
  width:12px;
  height:12px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
  border-radius:2px;
  opacity:.82;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
  animation:kb-qm-chevron-left 1.8s ease-in-out infinite;
}
.kb-qm-edge-hint span::before,
.kb-qm-edge-hint span::after{
  content:"";
  position:absolute;
  top:50%;
  width:12px;
  height:12px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  border-radius:2px;
  opacity:.64;
  transform:translateY(-50%) rotate(45deg);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
  animation:kb-qm-chevron-left 1.8s ease-in-out infinite;
}
.kb-qm-edge-hint span::after{
  right:8px;
  animation-delay:.14s;
}
.kb-qm-edge-hint span::before{
  right:14px;
  animation-delay:.28s;
}
.kb-qm-edge-hint::after{
  content:none;
}
.kb-qm-edge-hint:active{
  opacity:.82;
  transform:translateY(-50%) translateX(-3px) scale(.98);
}
body.kb-qm-open .kb-qm-edge-hint{
  opacity:0;
  pointer-events:none;
  filter:blur(.4px);
}
.kb-qm-btn{
  width:42px;
  height:42px;
  margin:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(246,195,106,.22);
  border-radius:15px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 42%),
    linear-gradient(145deg, rgba(255,224,154,.92), rgba(229,167,74,.78));
  color:#4a2307;
  box-shadow:0 10px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.28);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  opacity:0;
  transform:translate3d(16px, 0, 0) scale(.88);
  transition:
    transform .22s cubic-bezier(.18,.86,.22,1),
    opacity .20s ease,
    filter .20s ease;
  pointer-events:auto;
  filter:blur(.2px);
}
.kb-qm-btn + .kb-qm-btn{
  margin-top:8px;
}
.kb-quickmenu.is-open .kb-qm-btn{
  opacity:1;
  transform:translate3d(0, 0, 0) scale(1);
  filter:blur(0);
}
.kb-quickmenu.is-open .kb-qm-btn:nth-child(1){ transition-delay:.02s; }
.kb-quickmenu.is-open .kb-qm-btn:nth-child(2){ transition-delay:.06s; }
.kb-quickmenu:not(.is-open) .kb-qm-btn:nth-child(1){ transition-delay:.03s; }
.kb-quickmenu:not(.is-open) .kb-qm-btn:nth-child(2){ transition-delay:0s; }
.kb-qm-btn:active{
  transform:translate3d(0, 1px, 0) scale(.96);
}
.kb-qm-btn svg{
  width:21px;
  height:21px;
  display:block;
  fill:currentColor;
}
.kb-qm-btn:not(.is-lobby){
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.24)),
    rgba(4,27,16,.72);
  color:rgba(255,245,220,.88);
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
}
@media (min-width:700px){
  .kb-qm-panel{
    right:calc(env(safe-area-inset-right, 0px) + 14px);
  }
  .kb-qm-btn{
    width:44px;
    height:44px;
    border-radius:16px;
  }
}

.kb-qm-btn.is-sound.is-off{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.28)),
    rgba(4,27,16,.70);
  color:rgba(255,245,220,.56);
}
.kb-qm-btn.is-sound.is-off::after{
  content:"";
  position:absolute;
  width:27px;
  height:2px;
  border-radius:99px;
  background:currentColor;
  transform:rotate(-38deg);
  opacity:.9;
}

/* ===== Quick menu icon centering hardening across all pages ===== */
#kb-quickmenu-root,
#kb-quickmenu-root *{
  box-sizing:border-box;
}
#kb-quickmenu-root .kb-qm-btn{
  position:relative;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  text-align:center !important;
  line-height:0 !important;
  font-size:0 !important;
  vertical-align:middle !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
#kb-quickmenu-root .kb-qm-btn::before{
  content:none !important;
}
#kb-quickmenu-root .kb-qm-btn svg,
#kb-quickmenu-root .kb-qm-btn > svg{
  position:static !important;
  display:block !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  flex:0 0 22px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  inset:auto !important;
}
#kb-quickmenu-root .kb-qm-btn.is-sound.is-off::after{
  top:50% !important;
  left:50% !important;
  margin:0 !important;
  transform:translate(-50%, -50%) rotate(-38deg) !important;
  pointer-events:none !important;
}

@keyframes kb-qm-chevron-left{
  0%, 100%{ opacity:.30; transform:translateY(-50%) translateX(2px) rotate(45deg); }
  50%{ opacity:.86; transform:translateY(-50%) translateX(-3px) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce){
  .kb-qm-edge-hint,
  .kb-qm-edge-hint i,
  .kb-qm-edge-hint span::before,
  .kb-qm-edge-hint span::after,
  .kb-qm-edge-hint::after{
    animation:none;
  }
}