/* ============================================================
   Chess Kingdom — Android edition
   Mobile-only refinements. Keeps the original visual identity,
   board animations and game layout while avoiding costly effects.
   ============================================================ */

html.android-edition,
html.android-edition body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-x: none;
}

html.android-edition {
  background: #03050d;
  scroll-padding-top: env(safe-area-inset-top, 0px);
}

html.android-edition body {
  max-width: 760px;
  margin-inline: auto;
  min-height: var(--app-vh, 100dvh);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html.android-edition button,
html.android-edition input,
html.android-edition select,
html.android-edition textarea {
  font-family: inherit;
}

html.android-edition button,
html.android-edition .btn,
html.android-edition .hbtn,
html.android-edition label {
  touch-action: manipulation;
}

html.android-edition .app {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
}

html.android-edition #preload {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Better viewport sizing on phones with gesture/navigation bars. */
@media (max-width: 760px) {
  html.android-edition {
    --gut: 4px;
    --fr: clamp(10px, 2.8vw, 13px);
  }

  html.android-edition body {
    min-height: var(--app-vh, 100dvh);
  }

  html.android-edition .app {
    padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }

  html.android-edition .stage {
    --bs: min(
      calc(100vw - 2 * var(--gut) - 2 * var(--fr)),
      640px
    );
    gap: 7px;
  }

  html.android-edition .board-zone,
  html.android-edition .frame,
  html.android-edition .board {
    max-width: 100%;
  }

  html.android-edition .board {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }

  html.android-edition .btn,
  html.android-edition .hbtn,
  html.android-edition .top-actions .icon-btn {
    min-height: 44px;
  }

  html.android-edition input,
  html.android-edition select,
  html.android-edition textarea {
    min-height: 44px;
    font-size: 16px;
  }

  html.android-edition .overlay {
    padding-bottom: 0;
  }

  html.android-edition .overlay .sheet,
  html.android-edition .overlay .sheet.panel {
    max-height: calc(var(--app-vh, 100dvh) - 8px);
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.android-edition .home {
    min-height: var(--app-vh, 100dvh);
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.android-edition .home-menu,
  html.android-edition .home-tools {
    width: 100%;
  }

  html.android-edition .home-menu .hbtn {
    min-height: 72px;
  }

  /* Keep feedback and piece motion; remove only expensive hover-like effects. */
  html.android-edition .btn,
  html.android-edition .hbtn,
  html.android-edition .seg label,
  html.android-edition .tchip {
    transition:
      transform 160ms ease,
      border-color 180ms ease,
      background-color 180ms ease,
      box-shadow 180ms ease;
  }

  html.android-edition .btn:active:not(:disabled),
  html.android-edition .hbtn:active,
  html.android-edition .seg label:active {
    transform: scale(.975);
  }

  html.android-edition .piece {
    will-change: auto;
  }
}

@media (min-width: 560px) and (orientation: landscape) and (max-height: 520px) {
  html.android-edition .app {
    padding-top: 3px;
  }

  html.android-edition .top {
    min-height: 0;
    padding-bottom: 4px;
  }

  html.android-edition .brand {
    display: none;
  }

  html.android-edition .top-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
  }

  html.android-edition .stage {
    --bs: min(
      calc(var(--app-vh, 100dvh) - 104px - 2 * var(--fr)),
      calc(100vw - 360px),
      440px
    );
    display: grid;
    grid-template-columns: minmax(112px, 1fr) auto minmax(112px, 1fr);
    grid-template-rows: auto 1fr auto;
    align-items: center;
    justify-items: stretch;
    gap: 6px 10px;
  }

  html.android-edition .board-zone {
    grid-column: 2;
    grid-row: 1 / 4;
    order: 0;
    align-self: center;
    justify-self: center;
  }

  html.android-edition .moves {
    grid-column: 1;
    grid-row: 1 / 4;
    order: 5;
    max-height: calc(var(--app-vh, 100dvh) - 110px);
    overflow: auto;
  }

  html.android-edition .opp {
    grid-column: 3;
    grid-row: 1;
    order: 1;
  }

  html.android-edition .controls {
    grid-column: 3;
    grid-row: 2;
    order: 4;
  }

  html.android-edition .me {
    grid-column: 3;
    grid-row: 3;
    order: 3;
  }

  html.android-edition .opp,
  html.android-edition .me,
  html.android-edition .controls,
  html.android-edition .moves {
    width: 100%;
    min-width: 0;
  }

  html.android-edition .overlay .sheet,
  html.android-edition .overlay .sheet.panel {
    max-height: calc(var(--app-vh, 100dvh) - 4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.android-edition *,
  html.android-edition *::before,
  html.android-edition *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   Android edition 1.0.1 — native-feeling home and light touch UI
   ============================================================ */
html.android-edition .home {
  scroll-behavior: auto !important;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
html.android-edition .home::-webkit-scrollbar { display: none; }
html.android-edition .home::after {
  background: radial-gradient(440px 440px at 50% 38%, rgba(var(--a), .12), transparent 72%);
}
html.android-edition .home-rays,
html.android-edition .home-aurora,
html.android-edition .home-halo,
html.android-edition .home-floor,
html.android-edition .home-stars,
html.android-edition .floaters,
html.android-edition #ambient,
html.android-edition .beams,
html.android-edition .hcue,
html.android-edition .hfeat,
html.android-edition .hprog,
html.android-edition .hglow {
  display: none !important;
}
html.android-edition .floaters { transform: none !important; transition: none !important; }
html.android-edition .home-inner {
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}
html.android-edition .home-tag { margin-bottom: 10px; }
html.android-edition .android-edition-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 30px;
  margin: 0 auto 18px;
  padding: 5px 12px;
  border: 1px solid rgba(var(--a), .34);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--a), .12), rgba(var(--a), .055));
  color: var(--x2);
  font: 900 11px/1.2 Cairo, sans-serif;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
html.android-edition .android-edition-pill svg {
  width: 17px;
  height: 17px;
  flex: none;
}
html.android-edition .android-edition-pill i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--x4);
  opacity: .8;
}
html.android-edition .android-edition-pill small {
  color: var(--mist);
  font: 800 9px/1 var(--font-latin, Arial, sans-serif);
  letter-spacing: .09em;
  direction: ltr;
}
html.android-edition .android-version {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  width: min(100%, 470px);
  margin: 24px auto 0;
  padding: 14px 8px max(8px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(var(--a), .17);
  color: var(--mist);
  font: 800 11px/1.5 Cairo, sans-serif;
  opacity: .82;
}
html.android-edition .android-version-name {
  color: var(--x3);
  font: 800 9px/1.2 var(--font-latin, Arial, sans-serif);
  letter-spacing: .12em;
  direction: ltr;
}
html.android-edition .android-version-separator {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--x4);
}
html.android-edition .android-version b {
  padding: 3px 8px;
  border: 1px solid rgba(var(--a), .22);
  border-radius: 999px;
  background: rgba(var(--a), .07);
  color: var(--x2);
  font: 900 10px/1.2 var(--font-latin, Arial, sans-serif);
  letter-spacing: .04em;
}

/* Touch-only interaction: no mouse-following tilt, cursor glow, or hover lift. */
html.android-edition .hbtn,
html.android-edition .btn,
html.android-edition .hbtn.online {
  will-change: auto !important;
}
html.android-edition .hbtn:hover,
html.android-edition .hbtn.online:hover,
html.android-edition .btn:hover:not(:disabled),
html.android-edition .hbtn:hover .hic,
html.android-edition .hbtn:hover .go,
html.android-edition .hbtn:hover b,
html.android-edition .hbtn:hover small,
html.android-edition .hbtn:hover .hic svg {
  transform: none !important;
  letter-spacing: inherit;
}
html.android-edition .hbtn:hover,
html.android-edition .hbtn.online:hover,
html.android-edition .btn:hover:not(:disabled) {
  box-shadow: inherit;
}
html.android-edition .hbtn::before,
html.android-edition .hbtn.bot::after,
html.android-edition .hbtn.online::after,
html.android-edition .hbtn:hover::before,
html.android-edition .btn:hover::before,
html.android-edition .hbtn .hglow {
  display: none !important;
  animation: none !important;
}
html.android-edition .btn,
html.android-edition .hbtn,
html.android-edition .seg label,
html.android-edition .tchip {
  transition: transform 130ms ease, background-color 150ms ease, border-color 150ms ease;
}
html.android-edition .btn:active:not(:disabled),
html.android-edition .hbtn:active,
html.android-edition .seg label:active,
html.android-edition .tchip:active {
  transform: scale(.98) !important;
}
html.android-edition .piece { will-change: auto !important; }
html.android-edition .home::after,
html.android-edition .android-edition-pill,
html.android-edition .android-version { animation: none !important; }

/* A lighter preset for entry-level Android hardware. */
html.android-edition.android-low-end .home-crest,
html.android-edition.android-low-end .crest-ring,
html.android-edition.android-low-end .hbtn.online .hic svg,
html.android-edition.android-low-end .home-title {
  filter: none !important;
}
html.android-edition.android-low-end .hbtn,
html.android-edition.android-low-end .card,
html.android-edition.android-low-end .sheet,
html.android-edition.android-low-end .panel {
  box-shadow: 0 5px 14px rgba(0,0,0,.32) !important;
}
@media (max-width: 420px) {
  html.android-edition .home { padding: 12px 8px 18px; }
  html.android-edition .android-edition-pill { margin-bottom: 14px; }
  html.android-edition .android-version { margin-top: 18px; }
}

/* ============================================================
   Android v1.0.7 — touch-first performance tuning
   Keep chess feedback and short UI transitions; remove desktop
   hover behavior and expensive always-running decorative loops.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  html.android-edition,
  html.android-edition body {
    -webkit-tap-highlight-color: transparent;
  }

  /* A touchscreen must never inherit mouse hover lift/glow/tilt. */
  html.android-edition :where(
    .btn, .hbtn, .hbtn.online, .hf, .hi-head, .rv-nav button,
    .rv-ic, .rkrow, .rkt, .tchip, .seg label, .icon-btn
  ):hover {
    transform: none !important;
    filter: none !important;
    letter-spacing: inherit !important;
  }
  html.android-edition :where(
    .btn, .hbtn, .hbtn.online, .hf, .hi-head, .rv-nav button,
    .rv-ic, .rkrow, .rkt, .tchip, .seg label, .icon-btn
  ):hover {
    box-shadow: inherit;
  }
  html.android-edition .hbtn:hover .hic,
  html.android-edition .hbtn:hover .go,
  html.android-edition .hbtn:hover b,
  html.android-edition .hbtn:hover small,
  html.android-edition .hbtn:hover svg,
  html.android-edition .btn:hover svg {
    transform: none !important;
  }
  html.android-edition .btn.gold:hover::after,
  html.android-edition .btn.shine:hover::after,
  html.android-edition .rkrow:hover::before {
    animation: none !important;
    transition: none !important;
  }

  /* Short touch feedback stays; avoid long, multi-property transitions. */
  html.android-edition .btn,
  html.android-edition .hbtn,
  html.android-edition .seg label,
  html.android-edition .tchip,
  html.android-edition .icon-btn {
    transition: transform 120ms ease, background-color 140ms ease,
      border-color 140ms ease, opacity 140ms ease !important;
  }
  html.android-edition .btn:active:not(:disabled),
  html.android-edition .hbtn:active,
  html.android-edition .seg label:active,
  html.android-edition .tchip:active,
  html.android-edition .icon-btn:active {
    transform: scale(.975) !important;
  }

  /* Stop rank/avatar ornaments that continuously repaint; keep rank
     unlock pop-ins, board move feedback, captures and modal entrances. */
  html.android-edition .rkf,
  html.android-edition .rkf *,
  html.android-edition .rkrow .rkmini::before,
  html.android-edition .rkrow.me .mini::before,
  html.android-edition .rkh2,
  html.android-edition .rkcard::before,
  html.android-edition .rkcard .rkshine,
  html.android-edition .lvl.max .lv-ico,
  html.android-edition .lvl.max .lv-txt b,
  html.android-edition .lv-slider input::-webkit-slider-thumb,
  html.android-edition .hs-empty span,
  html.android-edition .pulse,
  html.android-edition .player.active .avatar,
  html.android-edition .clock.low,
  html.android-edition .sq.sel::before,
  html.android-edition .sq.hint::before {
    animation: none !important;
  }

  /* Keep the interface polished without blur/backdrop compositing. */
  html.android-edition .overlay,
  html.android-edition .sheet,
  html.android-edition .panel,
  html.android-edition .card,
  html.android-edition .frame {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Detect weaker devices conservatively; preserve the same layout and
   move animations, while reducing only costly shadows and glows. */
html.android-edition.android-low-end .rkf,
html.android-edition.android-low-end .rkw,
html.android-edition.android-low-end .rkb,
html.android-edition.android-low-end .rkrow.me,
html.android-edition.android-low-end .lv-fill,
html.android-edition.android-low-end .lv-ico {
  filter: none !important;
}
html.android-edition.android-low-end .rkrow.me,
html.android-edition.android-low-end .rkb,
html.android-edition.android-low-end .lv-ico {
  box-shadow: none !important;
}

/* Browsers pause background tabs; this also pauses app-only motion while
   the WebView is hidden, without affecting timers or game state. */
html.android-edition.android-background *,
html.android-edition.android-background *::before,
html.android-edition.android-background *::after {
  animation-play-state: paused !important;
}